From c437081b9082bce722a064507f5fff2a6da42747 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Mon, 15 Aug 2016 15:04:55 -0300 Subject: [PATCH] LT-275: Creating selected state with 'rename' and 'add description' options --- .../components/measureFlow/measureFlow.html | 9 +++ .../components/measureFlow/measureFlow.js | 70 ++++++++++++++++++- .../components/base/mixins/selectTree.js | 35 ++++++++-- .../bootstrap/input/selectTree.html | 1 + .../components/bootstrap/input/selectTree.js | 8 ++- .../components/playground/playground.js | 5 ++ 6 files changed, 119 insertions(+), 9 deletions(-) diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html index 6e8b43758..b00020a36 100644 --- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html +++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html @@ -1,5 +1,14 @@ diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js index e1ece2874..e0b9e422e 100644 --- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js +++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js @@ -10,6 +10,48 @@ Template.measureFlow.onCreated(() => { instance.state = new ReactiveVar('closed'); + instance.items = [{ + label: 'Category 1', + value: 'Category 1', + items: [{ + label: 'Subcategory 1.1', + value: 'Subcategory 1.1' + }, { + label: 'Subcategory 1.2', + value: 'Subcategory 1.2', + items: [{ + label: 'Subcategory 1.2.1', + value: 'Subcategory 1.2.1' + }, { + label: 'Subcategory 1.2.2', + value: 'Subcategory 1.2.2', + items: [{ + label: 'Subcategory 1.2.2.1', + value: 'Subcategory 1.2.2.1' + }, { + label: 'Subcategory 1.2.2.2', + value: 'Subcategory 1.2.2.2' + }] + }] + }] + }, { + label: 'Category 2', + value: 'Category 2', + items: [{ + label: 'Subcategory 2.1', + value: 'Subcategory 2.1' + }, { + label: 'Subcategory 2.2', + value: 'Subcategory 2.2' + }, { + label: 'Subcategory 2.3', + value: 'Subcategory 2.3' + }] + }, { + label: 'Category 3', + value: 'Category 3' + }]; + const items = [ 'Adrenal', 'Bladder', @@ -75,20 +117,42 @@ Template.measureFlow.events({ const parentElement = instance.$('.measure-flow')[0]; // Render the selectTree element - Blaze.renderWithData(Template.selectTree, data, parentElement); + instance.selectTreeView = Blaze.renderWithData(Template.selectTree, data, parentElement); }); }, 'click .select-tree-common label'(event, instance) { instance.commonClicked = true; }, + 'change .select-tree-root'(event, instance) { + // Stop here if it's an inner input event + if (event.target !== event.currentTarget) { + return; + } + + const $treeRoot = $(event.currentTarget); + instance.value = $treeRoot.data('component').value(); + }, 'click .tree-leaf input'(event, instance) { - const $label = $(event.currentTarget).closest('label'); - const $container = $label.closest('.select-tree-root').find('.tree-options:first'); + const $target = $(event.currentTarget); + const $label = $target.closest('label'); + const $treeRoot = $label.closest('.select-tree-root'); + const $container = $treeRoot.find('.tree-options:first'); if (instance.commonClicked) { const labelTop = $label.position().top; const containerCenter = Math.round($container.height() / 2); const labelCenter = Math.round($label.height() / 2); $container.scrollTop(labelTop - containerCenter + labelCenter); } + + instance.state.set('selected'); + Tracker.afterFlush(() => { + const $measureFlow = instance.$('.measure-flow'); + const labelOffset = $label.offset(); + labelOffset.top -= 10; + $measureFlow.css(labelOffset); + $measureFlow.children('.tree-leaf').width($label.outerWidth()); + }); + + $container.one('transitionend', event => Blaze.remove(instance.selectTreeView)); } }); diff --git a/Packages/ohif-core/client/components/base/mixins/selectTree.js b/Packages/ohif-core/client/components/base/mixins/selectTree.js index 9384c14c1..2e8320964 100644 --- a/Packages/ohif-core/client/components/base/mixins/selectTree.js +++ b/Packages/ohif-core/client/components/base/mixins/selectTree.js @@ -15,6 +15,9 @@ OHIF.mixins.selectTree = new OHIF.Mixin({ const rootComponent = instance.data.root || component; const rootInstance = rootComponent.templateInstance; + // Store the component's current value + instance.currentValue = null; + // Create the component's value storage property instance.data.currentNode = new ReactiveVar(null); @@ -25,7 +28,23 @@ OHIF.mixins.selectTree = new OHIF.Mixin({ component.value = value => { const isGet = _.isUndefined(value); - // Return the current node value + // Return the current value + if (isGet) { + return rootInstance.currentValue; + } + + // Change the current value + rootInstance.currentValue = value; + + // Trigger the change event + component.$element.trigger('change'); + }; + + // Method to manipulate nodes + component.node = node => { + const isGet = _.isUndefined(node); + + // Return the current node if (isGet) { const currentNode = instance.data.currentNode.get(); return currentNode ? currentNode.value : null; @@ -35,12 +54,12 @@ OHIF.mixins.selectTree = new OHIF.Mixin({ const items = component.templateInstance.data.items; // Get the node for the selected value - const node = _.findWhere(items, { - value: value + const currentNode = _.findWhere(items, { + value: node }); // Change the current node - instance.data.currentNode.set(node); + instance.data.currentNode.set(currentNode); }; // Return plain data for all the leaves inside current node @@ -59,6 +78,14 @@ OHIF.mixins.selectTree = new OHIF.Mixin({ return recursiveSeek(instance.data.items); }; + }, + + onRendered() { + const instance = Template.instance(); + const component = instance.component; + + // Define the main element + component.$element = instance.$('.select-tree:first').first(); } } }); diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html index ac4859ea2..fe1f10849 100644 --- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html +++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html @@ -27,6 +27,7 @@ id=(concat this.storageKey '_' (encodeId item.value)) class=this.radioClass name=this.key + itemData=item value=item.value label=item.label labelClass=(valueIf (isArray item.items) 'tree-node' 'tree-leaf') diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js index 489ac247d..c2cd715b5 100644 --- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js +++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js @@ -140,8 +140,8 @@ Template.selectTree.events({ const rootComponent = instance.data.root || component; const rootInstance = rootComponent.templateInstance; - // Change the component's value - component.value(eventComponent.value()); + // Change the component's node + component.node(eventComponent.value()); // Unset the active leaf rootInstance.$('label').removeClass('active').css('width', ''); @@ -169,6 +169,10 @@ Template.selectTree.events({ storedData[itemKey] = 1; } + // Set the selected leaf value in the root component + const itemData = $target.data('component').templateInstance.data.itemData; + rootComponent.value(itemData); + // Updata the stored data with the new count OHIF.user.setData(storageKey, storedData); } diff --git a/Packages/ohif-core/client/components/playground/playground.js b/Packages/ohif-core/client/components/playground/playground.js index 941d7b4cf..de6f7d478 100644 --- a/Packages/ohif-core/client/components/playground/playground.js +++ b/Packages/ohif-core/client/components/playground/playground.js @@ -42,3 +42,8 @@ Template.componentPlayground.onCreated(() => { value: 'Category 3' }]; }); + +Template.componentPlayground.onRendered(() => { + const instance = Template.instance(); + instance.$('.measure-flow').draggable(); +});