diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js index b200e2532..d52219261 100644 --- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js +++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js @@ -92,6 +92,13 @@ Template.measureFlow.onCreated(() => { }); }); +Template.measureFlow.onRendered(() => { + const instance = Template.instance(); + + // Make the measure flow bounded by the window borders + instance.$('.measure-flow').bounded(); +}); + Template.measureFlow.events({ 'click .measure-flow .btn-add, click .measure-flow .btn-rename'(event, instance) { // Set the open state for the component @@ -122,6 +129,7 @@ Template.measureFlow.events({ instance.selectTreeView = Blaze.renderWithData(Template.selectTree, data, parentElement); }); }, + 'click .measure-flow .btn-description'(event, instance) { // Fade out the action buttons instance.$('.measure-flow .actions').addClass('fadeOut'); @@ -129,12 +137,13 @@ Template.measureFlow.events({ // Set the description edit mode instance.descriptionEdit.set(true); - // Wait for DOM rerendering, resize and focus the description textarea + // Wait for DOM re-rendering, resize and focus the description textarea Tracker.afterFlush(() => { const $textarea = instance.$('textarea'); $textarea.trigger('input').focus(); }); }, + 'input textarea, change textarea'(event, instance) { const element = event.currentTarget; const $element = $(element); @@ -143,7 +152,12 @@ Template.measureFlow.events({ $element.css('max-height', 0); $element.height(element.scrollHeight); $element.css('max-height', ''); + + // Reposition the measure flow if needed + const $measureFlow = instance.$('.measure-flow'); + $element.one('transitionend', () => $measureFlow.trigger('spatialChanged')); }, + 'keydown textarea'(event, instance) { // Unset the description edit mode if ENTER or ESC was pressed if (event.which === 13 || event.which === 27) { @@ -156,39 +170,61 @@ Template.measureFlow.events({ instance.description.set($(event.currentTarget).val()); } }, + 'click .select-tree-common label'(event, instance) { + // Set the common section clicked flag instance.commonClicked = true; }, + 'change .select-tree-root'(event, instance) { // Stop here if it's an inner input event if (event.target !== event.currentTarget) { return; } + // Store the selectTree component value before it's removed from DOM const $treeRoot = $(event.currentTarget); instance.value = $treeRoot.data('component').value(); }, + 'click .tree-leaf input'(event, instance) { const $target = $(event.currentTarget); const $label = $target.closest('label'); const $treeRoot = $label.closest('.select-tree-root'); const $container = $treeRoot.find('.tree-options:first'); + + // Check if the targe click was a label inside common section if (instance.commonClicked) { const labelTop = $label.position().top; const containerCenter = Math.round($container.height() / 2); const labelCenter = Math.round($label.height() / 2); + + // Scroll the options container to make the target input visible $container.scrollTop(labelTop - containerCenter + labelCenter); } + // Change the measure flow state to selected instance.state.set('selected'); + + // Wait for the DOM re-rendering Tracker.afterFlush(() => { + // Get the measure flow div const $measureFlow = instance.$('.measure-flow'); + + // Get the clicked label window offset const labelOffset = $label.offset(); + + // Subtract the label box shadow height from the label's position labelOffset.top -= 10; + + // Reposition the measure flow based on the clicked label position $measureFlow.css(labelOffset); + + // Resize the copied label with same width of the clicked one $measureFlow.children('.tree-leaf').width($label.outerWidth()); }); + // Wait the fade-out transition and remove the selectTree component $container.one('transitionend', event => Blaze.remove(instance.selectTreeView)); } });