Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LEAF 4597 - move orgchart keyboard info banner #2619

Merged
merged 3 commits into from
Dec 19, 2024
Merged

LEAF 4597 - move orgchart keyboard info banner #2619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6f4083
LEAF 4597 move info element, move styles to css, control display with…
aerinkayne Dec 11, 2024
a61bc05
LEAF 4597 only show card keyboard info when using keyboard to move
aerinkayne Dec 12, 2024
a189823
LEAF 4597 updates to coord tracking and after move paint
aerinkayne Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions LEAF_Nexus/css/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 2 additions & 1 deletion LEAF_Nexus/js/ui/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
102 changes: 66 additions & 36 deletions LEAF_Nexus/templates/editor.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,19 @@ placeholder<br />
<button type="button" class="buttonNorm" onclick="window.location='mailto:?subject=FW:%20Org.%20Chart%20-%20&amp;body=Organizational%20Chart%20URL:%20<!--{if $smarty.server.HTTPS == on}-->https<!--{else}-->http<!--{/if}-->://<!--{$smarty.server.SERVER_NAME}--><!--{$smarty.server.REQUEST_URI|escape:'url'}-->%0A%0A'">
<img src="dynicons/?img=mail-forward.svg&amp;w=24" style="vertical-align: middle" alt="" /> Forward as Email
</button>
<div id="visual_alert_box_container">
<div id="visual_alert_box" class="hide">
You are moving the <span id="visual_alert_box_title"></span> card<br />
Esc - return to original location<br />
Enter - save current location
</div>
<label for="MovementInfoToggle" class="hide">Hide Movement Info
<input type="checkbox" id="MovementInfoToggle" onchange="toggleHideClass('visual_alert_box')">
</label>
</div>
</span>
</span>
<div id="visual_alert_box" role="status" aria-live="assertive" aria-label="" style="position:absolute;opacity:0; z-index:999;background:#fff"></div>

<div id="pageloadIndicator" style="visibility: visible">
<div style="opacity: 0.8; z-index: 1000; position: absolute; background: #f3f3f3; height: 97%; width: 97%"></div>
<div style="z-index: 1001; position: absolute; padding: 16px; width: 97%; text-align: center; font-size: 24px; font-weight: bold; background-color: white">Loading... <img src="images/largespinner.gif" alt="" /></div>
Expand Down Expand Up @@ -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/<!--{$rootID}-->/supervisor',
Expand All @@ -134,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);
Expand All @@ -153,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');
},
Expand Down Expand Up @@ -259,72 +283,78 @@ 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').css('opacity', '0');
$('#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');
} else {
if(document.getElementById('MovementInfoToggle').checked !== true) {
$('#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').css('opacity', '0');
document.removeEventListener('keydown', moveCard);
return;
}
}
};
$('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<br />Esc - return to original location<br />Enter - save current location<br />Tab - Save and move to next card";
$('#visual_alert_box').css('opacity', '100');
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) {
Expand Down
Loading