LT-275: Creating selected state with 'rename' and 'add description' options
This commit is contained in:
Bruno Alves de Faria
parent
62f102617f
commit
c437081b90
@ -1,5 +1,14 @@
|
||||
<template name="measureFlow">
|
||||
<div class="measure-flow {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
|
||||
<button class="btn-add">Add label</button>
|
||||
{{#if eq instance.state.get 'selected'}}
|
||||
<div class="tree-leaf">
|
||||
<span>{{instance.value.label}}</span>
|
||||
<div class="actions clearfix">
|
||||
<button class="pull-left">Rename</button>
|
||||
<button class="pull-right">Add description</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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));
|
||||
}
|
||||
});
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -42,3 +42,8 @@ Template.componentPlayground.onCreated(() => {
|
||||
value: 'Category 3'
|
||||
}];
|
||||
});
|
||||
|
||||
Template.componentPlayground.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
instance.$('.measure-flow').draggable();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user