LT-275: Moving the selectTree component to measurements package
This commit is contained in:
Bruno Alves de Faria authored and Erik Ziegler committed
1 parent
dd9fa2b789
commit
b1eb68521a
16 files changed
+14
-66
No files matched your search
@@ -1,89 +0,0 @@
|
||||
<template name="selectTree">
|
||||
{{#group (extend this
|
||||
class=(concat
|
||||
'select-tree '
|
||||
(valueIf this.root '' 'select-tree-root ')
|
||||
this.class
|
||||
)
|
||||
mixins=(concat 'selectTree ' this.mixins)
|
||||
)}}
|
||||
{{>UI.contentBlock}}
|
||||
<div class="tree-content">
|
||||
{{#let currentNode=this.currentNode.get}}
|
||||
{{#if (and (not this.root) (ne this.search false))}}
|
||||
{{#inputText
|
||||
label=this.label
|
||||
labelClass='tree-search'
|
||||
placeholder=(choose this.searchPlaceholder 'Search')
|
||||
}}
|
||||
<i class="fa fa-search"></i>
|
||||
{{/inputText}}
|
||||
{{/if}}
|
||||
<div class="tree-options {{#if currentNode}}collapsed{{/if}}">
|
||||
{{#if this.root}}
|
||||
{{>selectTreeBreadcrumb component=this.component}}
|
||||
{{/if}}
|
||||
<div class="tree-inputs clearfix">
|
||||
{{#each item in treeItems}}
|
||||
{{>inputRadio
|
||||
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')
|
||||
checked=(eq item.value (reactive this.value))
|
||||
}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#if (and currentNode (isArray currentNode.items))}}
|
||||
{{>selectTree (clone this
|
||||
items=currentNode.items
|
||||
root=(choose this.root this.component)
|
||||
class='select-tree-node'
|
||||
)}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/let}}
|
||||
</div>
|
||||
{{#if (and (not this.root) (or this.storageKey this.commonItems))}}
|
||||
{{>selectTreeCommon (clone this component=this.component treeInstance=instance)}}
|
||||
{{/if}}
|
||||
{{/group}}
|
||||
</template>
|
||||
|
||||
<template name="selectTreeBreadcrumb">
|
||||
<div class="tree-breadcrumb clearfix">
|
||||
{{>selectTreeBreadcrumbParent
|
||||
component=this.component.parent
|
||||
index=1
|
||||
}}
|
||||
{{#let currentNode=this.component.parent.templateInstance.data.currentNode.get}}
|
||||
<span class="tree-current-node">{{currentNode.label}}</span>
|
||||
{{/let}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="selectTreeBreadcrumbParent">
|
||||
{{#let parent=this.component.parent}}
|
||||
{{#let parentNode=(reactive parent.templateInstance.data.currentNode)}}
|
||||
{{#if parentNode}}
|
||||
{{>selectTreeBreadcrumbParent
|
||||
component=parent
|
||||
index=(sum this.index 1)
|
||||
}}
|
||||
{{/if}}
|
||||
<span class="path-link">
|
||||
<a href="#" class="tree-back" data-index="{{this.index}}">
|
||||
{{#if parentNode}}
|
||||
<span>{{parentNode.label}}</span>
|
||||
{{else}}
|
||||
<i class="fa fa-fast-backward"></i>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{#if parentNode}}<span>/</span>{{/if}}
|
||||
</span>
|
||||
{{/let}}
|
||||
{{/let}}
|
||||
</template>
|
||||
@@ -1,334 +0,0 @@
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { Template } from 'meteor/templating';
|
||||
import { ReactiveVar } from 'meteor/reactive-var';
|
||||
import { _ } from 'meteor/underscore';
|
||||
import { $ } from 'meteor/jquery';
|
||||
|
||||
// TODO: use npm dependency
|
||||
import transition from 'meteor/ohif:core/client/lib/third-party/transition-to-from-auto';
|
||||
|
||||
Template.selectTree.onCreated(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Return the common items
|
||||
instance.getCommonItems = () => {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Return the common items if given
|
||||
if (instance.data.commonItems) {
|
||||
return instance.data.commonItems;
|
||||
}
|
||||
|
||||
// Get all the tree leaves
|
||||
const leaves = instance.data.component.getLeaves();
|
||||
|
||||
// Generate an object with encoded keys from the tree leaves
|
||||
leavesObject = {};
|
||||
_.each(leaves, leaf => {
|
||||
leavesObject[OHIF.string.encodeId(leaf.value)] = leaf;
|
||||
});
|
||||
|
||||
// Get the current items ranking
|
||||
const ranking = OHIF.user.getData(instance.data.storageKey);
|
||||
|
||||
// Sort the items based on how many times each one was used
|
||||
const sorted = [];
|
||||
_.each(ranking, (count, key) => sorted.push([key, count]));
|
||||
sorted.sort((a, b) => b[1] - a[1]);
|
||||
|
||||
// Create the result and push every item respecting the ranking order
|
||||
const result = [];
|
||||
_.each(sorted, item => {
|
||||
const current = leavesObject[item[0]];
|
||||
if (current) {
|
||||
result.push(current);
|
||||
}
|
||||
});
|
||||
|
||||
// Return the resulting array
|
||||
return result;
|
||||
};
|
||||
|
||||
// Create a reactive variable to control the search
|
||||
instance.searchTerm = new ReactiveVar('');
|
||||
});
|
||||
|
||||
Template.selectTree.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
const component = instance.$('.select-tree:first').data('component');
|
||||
const rootComponent = instance.data.root || component;
|
||||
const rootInstance = rootComponent.templateInstance;
|
||||
const $treeRoot = rootInstance.$('.select-tree-root:first').first();
|
||||
|
||||
instance.component = component;
|
||||
|
||||
// Set the margin to display the common section
|
||||
const isTreeColumns = instance.data.treeColumns;
|
||||
const marginProperty = isTreeColumns ? 'margin-left' : 'margin-right';
|
||||
const marginWidth = isTreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
|
||||
$treeRoot.children('.tree-content').css(marginProperty, marginWidth);
|
||||
|
||||
// Make the component respect the window boundaries
|
||||
$treeRoot.bounded();
|
||||
|
||||
// Check if the component will be rendered on a specific position
|
||||
const position = instance.data.position;
|
||||
if (component === rootComponent && position) {
|
||||
// Get the dimensions and move it with the given position as its center
|
||||
const width = $treeRoot.outerWidth();
|
||||
const height = $treeRoot.outerHeight();
|
||||
position.left -= Math.round(width / 2);
|
||||
position.top -= Math.round(height / 2);
|
||||
|
||||
// Change the component's position and trigger the bounded event
|
||||
$treeRoot.css(_.extend({}, position, {
|
||||
position: 'fixed'
|
||||
})).trigger('spatialChanged');
|
||||
}
|
||||
|
||||
Meteor.defer(() => {
|
||||
// Start the component transitions
|
||||
$treeRoot.addClass('started');
|
||||
|
||||
// Focus the search box
|
||||
$treeRoot.find('.tree-search input').focus();
|
||||
});
|
||||
|
||||
// Update the component's viewport height
|
||||
instance.updateHeight = searchTerm => {
|
||||
let height;
|
||||
|
||||
// Check if there's a search term
|
||||
if (searchTerm) {
|
||||
// Set the viewport height as same as listed options height
|
||||
height = rootInstance.$('.tree-inputs').height();
|
||||
} else {
|
||||
// Set the viewport height as same as selected node's options height
|
||||
height = rootInstance.$('.tree-options:last').data('height');
|
||||
}
|
||||
|
||||
// Update the viewport's height and trigger the bounded event
|
||||
rootInstance.$('.tree-options:first').first().height(height)
|
||||
.on('transitionend', () => $treeRoot.trigger('spatialChanged'));
|
||||
};
|
||||
|
||||
// Update the opened node
|
||||
instance.updateOpen = () => {
|
||||
rootInstance.$('.select-tree').removeClass('open');
|
||||
rootInstance.$('.select-tree:last').addClass('open');
|
||||
};
|
||||
|
||||
// Put the component in selected state
|
||||
instance.setSelected = (flag) => {
|
||||
if (flag) {
|
||||
$treeRoot.addClass('selected');
|
||||
} else {
|
||||
$treeRoot.removeClass('selected');
|
||||
}
|
||||
};
|
||||
|
||||
// Store the element's initial height
|
||||
const $treeOptions = instance.$('.tree-options:first').first();
|
||||
const height = $treeOptions.height();
|
||||
$treeOptions.data('height', height);
|
||||
|
||||
instance.autorun(() => {
|
||||
// Run this computation everytime the current node is changed
|
||||
instance.data.currentNode.dep.depend();
|
||||
|
||||
// Run this computation everytime the search term is changed
|
||||
const searchTerm = instance.searchTerm.get();
|
||||
|
||||
// Clean the current node selection if the user started the search
|
||||
if (searchTerm) {
|
||||
rootInstance.data.currentNode.set(null);
|
||||
}
|
||||
|
||||
// Update the viewport height
|
||||
Tracker.afterFlush(() => {
|
||||
instance.updateHeight(searchTerm);
|
||||
instance.updateOpen();
|
||||
});
|
||||
});
|
||||
|
||||
const selector = '.select-tree:first>.tree-content>.tree-options>.tree-breadcrumb .path-link';
|
||||
instance.$(selector).css('width', 0).each((index, element) => {
|
||||
transition({
|
||||
element: element,
|
||||
prop: 'width',
|
||||
style: 'width 0.3s ease',
|
||||
val: 'auto'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Template.selectTree.events({
|
||||
'click .select-tree-root>.tree-content'(event, instance) {
|
||||
// Get the tree root
|
||||
const $treeRoot = $(event.currentTarget).closest('.select-tree-root');
|
||||
|
||||
// Detect the first interaction with the component and do the animation
|
||||
$treeRoot.addClass('interacted');
|
||||
|
||||
// Remove the margin after the common section is closed
|
||||
$treeRoot.children('.tree-content').css('margin-right', '');
|
||||
},
|
||||
|
||||
'input .tree-search input'(event, instance) {
|
||||
// Get the tree root
|
||||
const $treeRoot = $(event.currentTarget).closest('.select-tree-root');
|
||||
|
||||
// Change the search term to update the tree items
|
||||
instance.searchTerm.set($(event.currentTarget).val());
|
||||
|
||||
// Change the component state
|
||||
$treeRoot.addClass('interacted');
|
||||
},
|
||||
|
||||
'keydown .tree-search input'(event, instance) {
|
||||
// Get the search term
|
||||
const searchTerm = $(event.currentTarget).val().trim();
|
||||
|
||||
const $labels = instance.$('.tree-inputs:first>label');
|
||||
|
||||
// Select the label if ENTER was pressed and there is only one result
|
||||
if (searchTerm.length && $labels.length === 1 && event.which === 13) {
|
||||
$labels.find('input').click();
|
||||
}
|
||||
},
|
||||
|
||||
'change .select-tree:first>.tree-content>.tree-options>.tree-inputs>label>input'(event, instance) {
|
||||
const component = instance.component;
|
||||
const $target = $(event.currentTarget);
|
||||
const $label = $target.closest('label');
|
||||
const eventComponent = $target.data('component');
|
||||
const rootComponent = instance.data.root || component;
|
||||
const rootInstance = rootComponent.templateInstance;
|
||||
|
||||
// Change the component's node
|
||||
component.node(eventComponent.value());
|
||||
|
||||
// Unset the active leaf
|
||||
rootInstance.$('label').removeClass('active').css('width', '');
|
||||
|
||||
// Unset the selected state
|
||||
instance.setSelected(false);
|
||||
|
||||
// Check if the clicked element is a node or a leaf
|
||||
const isLeaf = $label.hasClass('tree-leaf');
|
||||
if (isLeaf) {
|
||||
// Change the active item
|
||||
$label.css('width', $label.outerWidth()).addClass('active');
|
||||
|
||||
// Ckeck if there's a storageKey defined
|
||||
const storageKey = instance.data.storageKey;
|
||||
if (storageKey) {
|
||||
// Get the current stored data
|
||||
const storedData = _.extend({}, OHIF.user.getData(storageKey));
|
||||
|
||||
// Increment or create a counter for the clicked leaf
|
||||
const itemKey = OHIF.string.encodeId($target.val());
|
||||
if (storedData[itemKey]) {
|
||||
storedData[itemKey]++;
|
||||
} else {
|
||||
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);
|
||||
}
|
||||
|
||||
// Mark the component as selected
|
||||
instance.setSelected(true);
|
||||
} else {
|
||||
// Get the position of the clicked element
|
||||
const position = $label.position();
|
||||
|
||||
Meteor.defer(() => {
|
||||
const $treeNode = $label.parent().siblings('.select-tree');
|
||||
|
||||
// Do the transition from the clicked position to top
|
||||
$treeNode.css(position);
|
||||
setTimeout(() => $treeNode.css('top', 0));
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
'click .select-tree:first>.tree-content>.tree-options>.tree-breadcrumb .tree-back'(event, instance) {
|
||||
const rootComponent = instance.data.root || instance.component;
|
||||
const rootInstance = rootComponent.templateInstance;
|
||||
|
||||
// Prevent the default element action
|
||||
event.preventDefault();
|
||||
|
||||
// Reset the checked inputs to unchecked state
|
||||
rootInstance.$('input').removeAttr('checked');
|
||||
|
||||
// Unset the selected state
|
||||
instance.setSelected(false);
|
||||
|
||||
// Get the index of the breadcrumb's clicked option
|
||||
const index = $(event.currentTarget).attr('data-index') | 0;
|
||||
|
||||
// Set the current instance
|
||||
let currentInstance = instance.component.parent.templateInstance;
|
||||
|
||||
// Iterate over all parents until gets into the clicked node
|
||||
for (let i = 1; i <= index; i++) {
|
||||
// Unset the selected node
|
||||
currentInstance.data.currentNode.set(null);
|
||||
|
||||
// Check if it's not the root node
|
||||
if (i < index) {
|
||||
// Change the current instance
|
||||
currentInstance = currentInstance.component.parent.templateInstance;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.selectTree.helpers({
|
||||
treeItems() {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Run this computation everytime the search term is changed
|
||||
const searchTerm = instance.searchTerm.get();
|
||||
|
||||
// Get all the items
|
||||
let items = instance.data.items;
|
||||
|
||||
// Check if the search term was informed
|
||||
if (searchTerm) {
|
||||
// Search the items by the give search term
|
||||
items = OHIF.string.search(items, searchTerm, 'label');
|
||||
|
||||
// Filter only the tree leaves
|
||||
items = _.filter(items, item => !item.items);
|
||||
} else if (instance.data.hideCommon) {
|
||||
// Get the values of common items
|
||||
const commonValues = _.pluck(instance.getCommonItems(), 'value');
|
||||
|
||||
// Filter only the items that are not common
|
||||
items = _.filter(items, item => !_.contains(commonValues, item.value));
|
||||
}
|
||||
|
||||
// Return the items sorted for tree columns
|
||||
if (instance.data.treeColumns) {
|
||||
const begin = items.splice(0, Math.ceil(items.length / 2));
|
||||
const sortedItems = [];
|
||||
_.each(begin, (item, index) => {
|
||||
sortedItems.push(item);
|
||||
items[index] && sortedItems.push(items[index]);
|
||||
});
|
||||
items = sortedItems;
|
||||
}
|
||||
|
||||
// Return the tree items
|
||||
return items;
|
||||
}
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
<template name="selectTreeCommon">
|
||||
<div class="select-tree-common">
|
||||
<div class="content">
|
||||
<h5 class="title">Common</h5>
|
||||
{{#each item in items}}
|
||||
<label for="{{this.storageKey}}_{{encodeId item.value}}">{{item.label}}</label>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,36 +0,0 @@
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
import { Template } from 'meteor/templating';
|
||||
import { _ } from 'meteor/underscore';
|
||||
|
||||
Template.selectTreeCommon.events({
|
||||
'click .select-tree-common label'(event, instance) {
|
||||
// Get the clicked label
|
||||
const $target = $(event.currentTarget);
|
||||
|
||||
// Build the input selector based on the label target
|
||||
const inputSelector = '#' + $target.attr('for');
|
||||
|
||||
// Get the tree instance
|
||||
const treeInstance = instance.data.treeInstance;
|
||||
|
||||
// Check if the input is not rendered
|
||||
if (!$(inputSelector).length) {
|
||||
// Change the search terms with the clicked label string
|
||||
|
||||
treeInstance.$('.tree-search input').val($target.text()).trigger('input');
|
||||
// Wait for options rerendering
|
||||
|
||||
Tracker.afterFlush(() => {
|
||||
// Wait for components initialization
|
||||
Meteor.defer(() => $(inputSelector).click());
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.selectTreeCommon.helpers({
|
||||
// Get the common items
|
||||
items() {
|
||||
return Template.instance().data.treeInstance.getCommonItems();
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user