From a6f408303f1972ded6938548d057fb859c46f47e Mon Sep 17 00:00:00 2001 From: Carrie Hanscom Date: Wed, 11 Dec 2024 13:34:06 -0500 Subject: [PATCH 1/3] LEAF 4597 move info element, move styles to css, control display with class names --- LEAF_Nexus/css/editor.css | 28 +++++++++++++++++++++++ LEAF_Nexus/templates/editor.tpl | 40 ++++++++++++++++++++++++++++----- 2 files changed, 62 insertions(+), 6 deletions(-) diff --git a/LEAF_Nexus/css/editor.css b/LEAF_Nexus/css/editor.css index 9b02159cc..369609f77 100644 --- a/LEAF_Nexus/css/editor.css +++ b/LEAF_Nexus/css/editor.css @@ -91,4 +91,32 @@ #editor_tools>span:hover { background-color: #2372b0; color: white; +} + +#visual_alert_box_container { + max-width: 354px; + box-sizing: border-box; + margin-left: auto; +} +#visual_alert_box { + text-align: left; + position: relative; + padding: 0.25em; + background-color:#fff; +} +#visual_alert_box_container label { + display: flex; + justify-content:flex-end; + padding-top: 0.25rem; +} +#visual_alert_box.hide, #visual_alert_box_container label.hide { + display: none; +} + +#visual_alert_box_container label input { + margin: 0 0 0 0.25rem; +} + +#visual_alert_box_title { + font-weight: bolder; } \ No newline at end of file diff --git a/LEAF_Nexus/templates/editor.tpl b/LEAF_Nexus/templates/editor.tpl index 3b7c4c3db..abcd4a723 100644 --- a/LEAF_Nexus/templates/editor.tpl +++ b/LEAF_Nexus/templates/editor.tpl @@ -19,9 +19,19 @@ placeholder
+
+
+ You are moving the card
+ Esc - return to original location
+ Enter - save current location +
+ +
-
+
Loading...
@@ -120,6 +130,17 @@ function applyZoomLevel() { } } +function toggleHideClass( elementID = '') { + let el = document.getElementById(elementID); + if(el !== null) { + if(el.classList.contains('hide')) { + el.classList.remove('hide'); + } else { + el.classList.add('hide'); + } + } +} + function viewSupervisor() { $.ajax({ url: './api/position//supervisor', @@ -263,7 +284,7 @@ function moveCoordinates(prefix, position) { if (e.key === "Tab") { saveLayout(position); $('#' + prefix + position).css('box-shadow', 'none'); - $('#visual_alert_box').css('opacity', '0'); + $('#visual_alert_box').addClass('hide'); document.removeEventListener('keydown', moveCard); return; } else if (controlKeys.includes(e.key)) { @@ -300,7 +321,7 @@ function moveCoordinates(prefix, position) { if (abort) { $('#' + prefix + position).css('box-shadow', 'none'); - $('#visual_alert_box').css('opacity', '0'); + $('#visual_alert_box').addClass('hide'); document.removeEventListener('keydown', moveCard); return; } @@ -308,11 +329,18 @@ function moveCoordinates(prefix, position) { }; $('div.positionSmall').css('box-shadow', 'none'); $('#' + prefix + position).css('box-shadow', ' 0 0 6px #c00'); - let alert_box = document.getElementById('visual_alert_box'); + let alert_box_card_title = document.getElementById('visual_alert_box_title'); let title = document.getElementById(prefix + position + '_title'); let titleText = title.innerHTML; - alert_box.innerHTML = "You are moving the " + titleText + " card
Esc - return to original location
Enter - save current location
Tab - Save and move to next card"; - $('#visual_alert_box').css('opacity', '100'); + alert_box_card_title.textContent = titleText; + if( $('#visual_alert_box_container label').hasClass('hide')) { + $('#visual_alert_box_container label').removeClass('hide'); + $('#visual_alert_box').removeClass('hide'); + } else { + if(document.getElementById('MovementInfoToggle').checked !== true) { + $('#visual_alert_box').removeClass('hide'); + } + } let card = document.getElementById(prefix + position); let cardStyle = window.getComputedStyle(card); From a61bc059a1fd1a49bf5f3a84896a9373fbd12c87 Mon Sep 17 00:00:00 2001 From: Carrie Hanscom Date: Thu, 12 Dec 2024 09:25:43 -0500 Subject: [PATCH 2/3] LEAF 4597 only show card keyboard info when using keyboard to move --- LEAF_Nexus/templates/editor.tpl | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/LEAF_Nexus/templates/editor.tpl b/LEAF_Nexus/templates/editor.tpl index abcd4a723..edf443fba 100644 --- a/LEAF_Nexus/templates/editor.tpl +++ b/LEAF_Nexus/templates/editor.tpl @@ -289,6 +289,17 @@ function moveCoordinates(prefix, position) { return; } else if (controlKeys.includes(e.key)) { e.preventDefault(); + //only show extra info if keyboard is being used to move the card + if(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) { + if( $('#visual_alert_box_container label').hasClass('hide')) { + $('#visual_alert_box_container label').removeClass('hide'); + $('#visual_alert_box').removeClass('hide'); + } else { + if(document.getElementById('MovementInfoToggle').checked !== true) { + $('#visual_alert_box').removeClass('hide'); + } + } + } switch (e.key) { case "ArrowLeft": leftValue = (Number(leftValue) - 10); @@ -333,14 +344,6 @@ function moveCoordinates(prefix, position) { let title = document.getElementById(prefix + position + '_title'); let titleText = title.innerHTML; alert_box_card_title.textContent = titleText; - if( $('#visual_alert_box_container label').hasClass('hide')) { - $('#visual_alert_box_container label').removeClass('hide'); - $('#visual_alert_box').removeClass('hide'); - } else { - if(document.getElementById('MovementInfoToggle').checked !== true) { - $('#visual_alert_box').removeClass('hide'); - } - } let card = document.getElementById(prefix + position); let cardStyle = window.getComputedStyle(card); From a189823cba61eb736fa257b3302e7c3f75d02370 Mon Sep 17 00:00:00 2001 From: Carrie Hanscom Date: Thu, 12 Dec 2024 13:12:48 -0500 Subject: [PATCH 3/3] LEAF 4597 updates to coord tracking and after move paint --- LEAF_Nexus/js/ui/position.js | 3 +- LEAF_Nexus/templates/editor.tpl | 61 ++++++++++++++++----------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/LEAF_Nexus/js/ui/position.js b/LEAF_Nexus/js/ui/position.js index a4a956f5b..3fb289027 100644 --- a/LEAF_Nexus/js/ui/position.js +++ b/LEAF_Nexus/js/ui/position.js @@ -47,7 +47,8 @@ position.prototype.initialize = function (parentContainerID) { $("#" + prefixedPID + "_title").on("click keydown mouseenter", function(ev) { //if they are newly focusing an open card just update the tab focus const isNewFocus = document.activeElement !== ev.currentTarget; - if (ev.type === "click" && isNewFocus) { + const cardDataAttr = ev.currentTarget.parentNode.getAttribute('data-moving'); + if (ev.type === "click" && isNewFocus || cardDataAttr === "true") { ev.currentTarget.focus(); return; } diff --git a/LEAF_Nexus/templates/editor.tpl b/LEAF_Nexus/templates/editor.tpl index edf443fba..028c54b3c 100644 --- a/LEAF_Nexus/templates/editor.tpl +++ b/LEAF_Nexus/templates/editor.tpl @@ -155,7 +155,7 @@ function viewSupervisor() { }); } -function saveLayout(positionID) { +function saveLayout(positionID, repaint = false) { const position = $('#' + positions[positionID].getDomID()).offset(); let newPosition = new Object(); newPosition.x = parseInt(position.left); @@ -174,6 +174,9 @@ function saveLayout(positionID) { if (+res === 1) { positions[positionID].x = newPosition.x; positions[positionID].y = newPosition.y; + if(repaint === true) { + jsPlumb.repaintEverything(); + } } $('#busyIndicator').css('visibility', 'hidden'); }, @@ -280,17 +283,26 @@ function addSupervisor(positionID) { } function moveCoordinates(prefix, position) { + let card = document.getElementById(prefix + position); + const cardStyle = window.getComputedStyle(card); + const originalTopOrg = cardStyle.getPropertyValue('top'); + const originalLeftOrg = cardStyle.getPropertyValue('left'); + const moveCard = (e) => { if (e.key === "Tab") { - saveLayout(position); + saveLayout(position, true); $('#' + prefix + position).css('box-shadow', 'none'); $('#visual_alert_box').addClass('hide'); document.removeEventListener('keydown', moveCard); return; } else if (controlKeys.includes(e.key)) { e.preventDefault(); + const cardStyle = window.getComputedStyle(card); + const topValue = Number(cardStyle.getPropertyValue('top').replace("px", "")); + const leftValue = Number(cardStyle.getPropertyValue('left').replace("px", "")); //only show extra info if keyboard is being used to move the card if(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) { + card.setAttribute("data-moving", "true"); if( $('#visual_alert_box_container label').hasClass('hide')) { $('#visual_alert_box_container label').removeClass('hide'); $('#visual_alert_box').removeClass('hide'); @@ -299,43 +311,35 @@ function moveCoordinates(prefix, position) { $('#visual_alert_box').removeClass('hide'); } } + } else { + card.removeAttribute("data-moving"); } switch (e.key) { case "ArrowLeft": - leftValue = (Number(leftValue) - 10); - card.style.left = leftValue + "px"; + card.style.left = leftValue - 10 + "px"; break; case "ArrowRight": - leftValue = (Number(leftValue) + 10); - card.style.left = leftValue + "px"; + card.style.left = leftValue + 10 + "px"; break; case "ArrowUp": - topValue = (Number(topValue) - 10); - card.style.top = topValue + "px"; + card.style.top = topValue - 10 + "px"; break; case "ArrowDown": - topValue = (Number(topValue) + 10); - card.style.top = topValue + "px"; + card.style.top = topValue + 10 + "px"; break; case "Enter": // save the coordinates as they are now - saveLayout(position); - abort = true; + saveLayout(position, true); break; case "Escape": // revert coordinates back to original - card.style.top = topOrg; - card.style.left = leftOrg; - abort = true; + card.style.top = originalTopOrg; + card.style.left = originalLeftOrg + $('#' + prefix + position).css('box-shadow', 'none'); + $('#visual_alert_box').addClass('hide'); + document.removeEventListener('keydown', moveCard); break; } - - if (abort) { - $('#' + prefix + position).css('box-shadow', 'none'); - $('#visual_alert_box').addClass('hide'); - document.removeEventListener('keydown', moveCard); - return; - } } }; $('div.positionSmall').css('box-shadow', 'none'); @@ -345,17 +349,12 @@ function moveCoordinates(prefix, position) { let titleText = title.innerHTML; alert_box_card_title.textContent = titleText; - let card = document.getElementById(prefix + position); - let cardStyle = window.getComputedStyle(card); - let topOrg = cardStyle.getPropertyValue('top'); - let leftOrg = cardStyle.getPropertyValue('left'); - let topValue = cardStyle.getPropertyValue('top').replace("px", ""); - let leftValue = cardStyle.getPropertyValue('left').replace("px", ""); - let key; - let abort = false; const controlKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter', 'Escape']; document.addEventListener('keydown', moveCard); - title.addEventListener('blur', () => document.removeEventListener('keydown', moveCard)); + title.addEventListener('blur', () => { + card.removeAttribute("data-moving"); + document.removeEventListener('keydown', moveCard) + }); } function addSubordinate(parentID) {