{{>selectTreeBreadcrumbParent
component=this.component.parent
index=1
@@ -62,11 +64,17 @@
component=parent
index=(sum this.index 1)
}}
-
{{parentNode.label}}
-
/
- {{else}}
-
{{/if}}
+
+
+ {{#if parentNode}}
+ {{parentNode.label}}
+ {{else}}
+
+ {{/if}}
+
+ {{#if parentNode}}/{{/if}}
+
{{/let}}
{{/let}}
diff --git a/Packages/ohif-core/components/bootstrap/input/selectTree.js b/Packages/ohif-core/components/bootstrap/input/selectTree.js
new file mode 100644
index 000000000..799c07046
--- /dev/null
+++ b/Packages/ohif-core/components/bootstrap/input/selectTree.js
@@ -0,0 +1,145 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+import { $ } from 'meteor/jquery';
+
+// TODO: use npm dependency
+import transition from 'meteor/ohif:core/lib/third-party/transition-to-from-auto';
+
+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;
+
+ instance.component = component;
+
+ // Update the component's viewport height
+ instance.updateHeight = () => {
+ const height = rootInstance.$('.tree-options:last').data('height');
+ rootInstance.$('.tree-options:first').height(height);
+ };
+
+ // 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) => {
+ const $treeRoot = rootInstance.$('.select-tree-root:first').first();
+ const $firstChild = $treeRoot.children().first();
+ if (flag) {
+ const search = rootInstance.$('.tree-search').outerHeight() | 0;
+ const leaf = $treeRoot.find('.tree-leaf.active').position().top;
+ const martinTop = search + leaf;
+ // $firstChild.css('margin-top', -martinTop);
+ // $treeRoot.css('margin-top', martinTop).addClass('selected');
+ $treeRoot.addClass('selected');
+ } else {
+ // $treeRoot.removeClass('selected').css('margin-top', '');
+ // $firstChild.css('margin-top', '');
+ $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();
+
+ // Update the viewport height
+ Tracker.afterFlush(() => {
+ instance.updateHeight();
+ instance.updateOpen();
+ });
+ });
+
+ const selector = '.select-tree:first>.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({
+ 'change .select-tree:first>.tree-options>.tree-inputs>label>input'(event, instance) {
+ const component = instance.component;
+ const $target = $(event.target);
+ const $label = $target.closest('label');
+ const eventComponent = $target.data('component');
+ const rootComponent = instance.data.root || component;
+ const rootInstance = rootComponent.templateInstance;
+
+ // Change the component's value
+ component.value(eventComponent.value());
+
+ // Unset the active leaf
+ rootInstance.$('label').removeClass('active');
+
+ // 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.addClass('active');
+
+ // 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-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;
+ }
+ }
+ }
+});
diff --git a/Packages/ohif-core/lib/third-party/transition-to-from-auto.js b/Packages/ohif-core/lib/third-party/transition-to-from-auto.js
new file mode 100644
index 000000000..a32fd8603
--- /dev/null
+++ b/Packages/ohif-core/lib/third-party/transition-to-from-auto.js
@@ -0,0 +1,151 @@
+/*!
+ * transition-to-from-auto 0.5.2
+ * https://github.com/75lb/transition-to-from-auto
+ * Copyright 2015 Lloyd Brookes <75pound@gmail.com>
+ */
+
+/**
+@module
+@alias transition
+*/
+(function(window, document){
+ "use strict";
+
+ var getComputedStyle = window.getComputedStyle;
+ var isTransition = "data-ttfaInTransition";
+
+ var elements = [];
+ var data = [];
+
+ // Transition detecting
+ var transitionProp = false;
+ var transitionEnd = false;
+ var testStyle = document.createElement("a").style;
+ var testProp;
+
+ if(testStyle[testProp = "webkitTransition"] !== undefined) {
+ transitionProp = testProp;
+ transitionEnd = testProp + "End";
+ }
+
+ if(testStyle[testProp = "transition"] !== undefined) {
+ transitionProp = testProp;
+ transitionEnd = testProp + "end";
+ }
+
+ function process(options, data) {
+ var el = options.element;
+ var val = options.val;
+ var prop = options.prop;
+ var style = el.style;
+ var startVal;
+ var autoVal;
+
+ if(!transitionProp) {
+ return style[prop] = val;
+ }
+
+ if(el.hasAttribute(isTransition)) {
+ el.removeEventListener(transitionEnd, data.l);
+ } else {
+ style[transitionProp] = "none";
+
+ startVal = getComputedStyle(el)[prop];
+ style[prop] = "auto";
+ autoVal = getComputedStyle(el)[prop];
+
+ // Interrupt
+ if(startVal === val || val === "auto" && startVal === autoVal) {
+ return;
+ }
+
+ data.auto = autoVal;
+ el.setAttribute(isTransition, 1);
+
+ // Transition
+ style[prop] = startVal;
+ el.offsetWidth;
+ style[transitionProp] = options.style;
+ }
+
+ style[prop] = val === "auto" ? data.auto : val;
+
+ data.l = function (e) {
+ if(e.propertyName === prop) {
+ el.removeAttribute(isTransition);
+ el.removeEventListener(transitionEnd, data.l);
+ if(val === "auto") {
+ /* avoid transition flashes in Safari */
+ style[transitionProp] = "none";
+ style[prop] = val;
+ }
+ }
+ };
+
+ el.addEventListener(transitionEnd, data.l);
+ }
+
+ /**
+ @param options {Object}
+ @param options.element {string | element} - The DOM element or selector to transition
+ @param options.val {string} - The value you want to transition to
+ @param [options.prop] {string} - The CSS property to transition, defaults to `"height"`
+ @param [options.style] {string} - The desired value for the `transition` CSS property (e.g. `"height 1s"`). If specified, this value is added inline and will override your CSS. Leave this value blank if you already have it defined in your stylesheet.
+ @alias module:transition-to-from-auto
+ */
+ function transition(options){
+ var element = options.element;
+ var datum;
+ var index;
+
+ if(typeof element === "string") {
+ element = document.querySelector(element);
+ }
+
+ element = options.element = element instanceof Node ? element : false;
+ options.prop = options.prop || "height";
+ options.style = options.style || "";
+
+ if(element) {
+ index = elements.indexOf(element);
+ if(~index) {
+ datum = data[index];
+ } else {
+ datum = {};
+ elements.push(element);
+ data.push(datum);
+ }
+
+ process(options, datum);
+ }
+ }
+
+ /**
+ The name of the vendor-specific transition CSS property
+ @type {string}
+ @example
+ el.style[transition.prop + 'Duration'] = '1s';
+ */
+ transition.prop = transitionProp;
+
+ /**
+ * The name of the [transition end event](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend) in the current browser (typically `"transitionend"` or `"webkitTransitionEnd"`)
+ * @type {string}
+ * @example
+ * el.addEventListener(transition.end, function(){
+ * // the transition ended..
+ * });
+ */
+ transition.end = transitionEnd;
+
+
+ if (typeof module === "object" && module.exports){
+ module.exports = transition;
+ } else if (typeof define === "function" && define.amd){
+ define(function(){
+ return transition;
+ });
+ } else {
+ window.transition = transition;
+ }
+})(window, document);