othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Displaying layout tool current state

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-08-20 17:17:06 -03:00
parent 67fa502930
commit 5c473697d9
2 changed files with 64 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.js
View File

@ -11,6 +11,7 @@ Template.layoutButton.events({
left: $button.offset().left + 'px'
});
// Open or close the layout chooser dialog
toggleDialog($dropdown);
}
});

94
Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
View File

@ -1,43 +1,75 @@
/**
* Adds the 'hover' class to cells above and to the left of the current cell
* This is used to "fill in" the grid that the user will change the layout to,
* if they click on a specific table cell.
*
* @param currentCell
*/
function highlightCells(currentCell) {
const cells = $('.layoutChooser table td');
cells.removeClass('hover');
Template.layoutChooser.onRendered(() => {
const instance = Template.instance();
currentCell = $(currentCell);
const table = currentCell.parents('.layoutChooser table').get(0);
const rowIndex = currentCell.closest('tr').index();
const columnIndex = currentCell.index();
/**
* Adds the 'hover' class to cells above and to the left of the current cell
* This is used to "fill in" the grid that the user will change the layout to,
* if they click on a specific table cell.
*
* @param currentCell
*/
instance.highlightCells = currentCell => {
const cells = $('.layoutChooser table td');
cells.removeClass('hover');
// Loop through the table row by row
// and cell by cell to apply the highlighting
for (var i = 0; i < table.rows.length; i++) {
const row = table.rows[i];
if (i <= rowIndex) {
for (var j = 0; j < row.cells.length; j++) {
if (j <= columnIndex) {
const cell = row.cells[j];
cell.classList.add('hover');
currentCell = $(currentCell);
const table = currentCell.parents('.layoutChooser table').get(0);
const rowIndex = currentCell.closest('tr').index();
const columnIndex = currentCell.index();
// Loop through the table row by row
// and cell by cell to apply the highlighting
for (var i = 0; i < table.rows.length; i++) {
const row = table.rows[i];
if (i <= rowIndex) {
for (var j = 0; j < row.cells.length; j++) {
if (j <= columnIndex) {
const cell = row.cells[j];
cell.classList.add('hover');
}
}
}
}
}
}
};
// Refresh layout chooser highlighting based on current viewports state
instance.refreshHighlights = () => {
// Stop here if layoutManager is not defined yet
if (!window.layoutManager) {
return;
}
// Get the layout rows and columns amount
const info = window.layoutManager.layoutProps;
// get the limiter cell
const cell = instance.$('tr').eq(info.rows - 1).children().eq(info.columns - 1);
// Highlight all cells before the limiter
instance.highlightCells(cell);
};
instance.autorun(() => {
// Run this computation every time the viewer layout is changed
Session.get('LayoutManagerUpdated');
instance.refreshHighlights();
});
});
Template.layoutChooser.events({
'touchstart .layoutChooser table td, mouseenter .layoutChooser table td'(evt) {
highlightCells(evt.currentTarget);
'touchstart .layoutChooser table td, mouseenter .layoutChooser table td'(event, instance) {
instance.highlightCells(event.currentTarget);
},
'click .layoutChooser table td'(evt) {
const currentCell = $(evt.currentTarget);
const rowIndex = currentCell.closest('tr').index();
const columnIndex = currentCell.index();
'mouseleave .layoutChooser'(event, instance) {
instance.refreshHighlights();
},
'click .layoutChooser table td'(event, instance) {
const $currentCell = $(event.currentTarget);
const rowIndex = $currentCell.closest('tr').index();
const columnIndex = $currentCell.index();
// Add 1 because the indices start from zero
const layoutProps = {