Skip to content

W
web-ui
Commit 10e8c152 by Lynette Lizardo
Options

implemented shorcuts

parent 5779ec31
Showing with 226 additions and 56 deletions
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js
......@@ -21,6 +21,21 @@ export class ImageViewer {
highLightCanvasID;
highlightObject;
imageControls = {
fitContentButton: null,
flipVerticalButton: null,
flipHorizontalButton: null,
rotateLeftButton: null,
rotateRightButton: null,
zoomInButton: null,
zoomOutBtn: null,
nextPageButton: null,
previousPageButton: null,
refreshButton: null,
previousImageButton:null,
nextImageButton: null
}
constructor(imageContainerID) {
this.imageContainerID = imageContainerID;
}
......@@ -42,6 +57,21 @@ export class ImageViewer {
this.nextPageButton.addEventListener("click", () => { this.nextPageFunction(this.currentImageObject) });
this.previousPageButton.addEventListener("click", () => { this.previousPageFunction(this.currentImageObject) });
this.imageControls.fitContentButton = document.getElementById("fitContentBtn");
this.imageControls.flipVerticalButton = document.getElementById("flipVerticalBtn");
this.imageControls.flipHorizontalButton = document.getElementById("flipHorizontalBtn");
this.imageControls.rotateLeftButton = document.getElementById("leftRotateBtn");
this.imageControls.rotateRightButton = document.getElementById("rightRotateBtn");
this.imageControls.zoomInButton = document.getElementById("zoomInBtn");
this.imageControls.zoomOutBtn = document.getElementById("zoomOutBtn");
this.imageControls.nextPageButton = document.getElementById("nextPageBtn");
this.imageControls.previousPageButton = document.getElementById("previousPageBtn");
this.imageControls.refreshButton = document.getElementById("refreshCurrentImage");
this.imageControls.previousImageButton = document.getElementById("previousRecordImage");
this.imageControls.nextImageButton = document.getElementById("nextRecordImage");
}
async addImage(imageID, imageType, imageName, imageBlob) {
......@@ -196,7 +226,7 @@ export class ImageViewer {
if (object) {
this.nextImageObject = object;
} else {
this.nextImageObject = this.currentImageObject ;
this.nextImageObject = this.currentImageObject;
if (document.getElementById(this.nextImageID)) {
document.getElementById(this.nextImageID).remove();
}
......@@ -262,7 +292,7 @@ export class ImageViewer {
}
document.getElementById(_this.currentImageID).childNodes.forEach(element => {
if(!element.classList.includes("image")){
if (!element.classList.includes("image")) {
element.classList.add("image");
}
});
......@@ -363,13 +393,13 @@ export class ImageViewer {
console.log(scale);
}
const container = document.getElementById(_this.currentImageID);
if(container.getAttribute("file-type") !== "pdf"){
if (container.getAttribute("file-type") !== "pdf") {
container.childNodes.forEach(element => {
element.classList.remove("image");
});
}else{
} else {
container.childNodes.forEach(element => {
if(!element.classList.includes("image")){
if (!element.classList.includes("image")) {
element.classList.add("image");
}
});
......@@ -382,8 +412,8 @@ export class ImageViewer {
if (highlight) {
highlight.style.zoom = scale;
//highlight.style.transform = "scale(" + scale + ")";
// highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
// highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
}
});
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js
......@@ -207,6 +207,10 @@ export class DocumentControlWidget {
return this.global.refreshBtn;
}
getSubmitBtn(){
return this.global.submitBtn;
}
getPauseBtn() {
return this.global.pauseBtn;
}
......
WebGde/WebContent/script.js
......@@ -95,7 +95,7 @@ async function checkBPODetails() {
let dir_files = sessionStorage.getItem("dir_files");
let fileLocation = sessionStorage.getItem("element_file_loc");
if(dir_files && fileLocation){
if (dir_files && fileLocation) {
return true;
}
......@@ -108,7 +108,7 @@ async function checkBPODetails() {
createModal(exitTool, "Please log-out and try again.");
sessionStorage.clear();
}
}else{
} else {
await BPO_OBJECT.returnElement(elementId);
window.location.reload();
}
......@@ -192,7 +192,7 @@ async function createInputForm() {
//document.getElementById("input-field-container").appendChild(controls.getWidget());
}
function createMenuBar(){
function createMenuBar() {
let div = document.createElement("div");
div.setAttribute('class', "row row-bar");
......@@ -202,7 +202,7 @@ function createMenuBar(){
//<span id="info-icon" class="icon">&#9432;</span>
scIcon.setAttribute("id", "info-icon");
scIcon.setAttribute("class", "icon");
scIcon.addEventListener("click", ()=>{
scIcon.addEventListener("click", () => {
showListOfShortcutKeys();
});
scIcon.innerHTML = '&#9432;';
......@@ -212,9 +212,9 @@ function createMenuBar(){
logOutDiv.setAttribute('class', "row");
let logOutIcon = document.createElement("button");
logOutIcon.setAttribute("id", "logoutBtn");
logOutIcon.addEventListener("click", ()=>{
logOutIcon.addEventListener("click", () => {
///logoutKeycloak();
async function successfulReturn () {
async function successfulReturn() {
await returnElementBPO(sessionStorage.getItem("element_id"));
sessionStorage.clear();
logoutKeycloak();
......@@ -225,7 +225,7 @@ function createMenuBar(){
div.appendChild(shortcutDiv);
div.appendChild(logOutDiv);
let dataInputContainer = document.getElementById('input-field-container');
dataInputContainer.insertBefore(div, dataInputContainer.firstChild);
}
......@@ -241,16 +241,16 @@ async function createImageViewer() {
if (!checkChangesInTheRecord(parseInt(sessionStorage.getItem("display_counter")))) {
let isSuccessful = await submitForm(e);
if (isSuccessful) {
if(sessionStorage.getItem("isElementComplete")){
if (sessionStorage.getItem("isElementComplete")) {
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
displayPreviousRecord(e);
}
......@@ -267,16 +267,16 @@ async function createImageViewer() {
if (!checkChangesInTheRecord(parseInt(sessionStorage.getItem("display_counter")))) {
let isSuccessful = await submitForm(e);
if (isSuccessful) {
if(sessionStorage.getItem("isElementComplete")){
if (sessionStorage.getItem("isElementComplete")) {
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
displayPreviousRecord(e);
}
......@@ -542,15 +542,143 @@ function init() {
}
}
window.onkeydown = (key) => {
window.onkeydown = (e) => {
console.log(e);
// e.preventDefault();
if (e.ctrlKey == true && e.keyCode == 69) {
createRejectWindow();
e.target.disabled = true;
}
if (e.shiftKey == true && e.keyCode == 13) {
DOCUMENT_CONTROL_OBJECT.getSubmitBtn().click();
// e.target.disabled = true;
}
if (e.ctrlKey == true && e.keyCode == 190) {
let button = IMAGE_VIEWER_OBJECT.imageControls.nextPageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.ctrlKey == true && e.keyCode == 188) {
let button = IMAGE_VIEWER_OBJECT.imageControls.previousPageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.ctrlKey == true && e.shiftKey == true && e.keyCode == 70) {
let button = IMAGE_VIEWER_OBJECT.imageControls.fitContentButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 72) {
let button = IMAGE_VIEWER_OBJECT.imageControls.flipHorizontalButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 86) {
let button = IMAGE_VIEWER_OBJECT.imageControls.flipVerticalButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 33) {
let button = IMAGE_VIEWER_OBJECT.imageControls.rotateRightButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 34) {
let button = IMAGE_VIEWER_OBJECT.imageControls.rotateLeftButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 187) {
let button = IMAGE_VIEWER_OBJECT.imageControls.zoomInButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 109) {
let button = IMAGE_VIEWER_OBJECT.imageControls.zoomOutBtn;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.keyCode == 122) {
let button = IMAGE_VIEWER_OBJECT.imageControls.previousImageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.keyCode == 123) {
let button = IMAGE_VIEWER_OBJECT.imageControls.nextImageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
// if (e.ctrlKey == true && e.keyCode == 37) {
// let div = document.getElementById("imageContainer");
// if(div && div.style.visibility !== "hidden"){
// div.scrollLeft += 10;
// // e.target.disabled = true;
// if(!isNaN(div.scrollLeft)){
// div.scrollLeft +=10;
// } else{
// div.scrollLeft =10;
// }
// }
// }
// if (e.ctrlKey == true && e.keyCode == 39) {
// let div = document.getElementById("imageContainer");
// if(div && div.style.visibility !== "hidden"){
// // if(!isNaN(div.scrollRight)){
// // div.scrollRight +=10;
// // } else{
// // div.scrollRight = 10;
// // }
// // // e.target.disabled = true;
// div.scrollTo(div.scrollX, div.scrollY + 1);
// }
// }
}
}
function showListOfShortcutKeys(){
function showListOfShortcutKeys() {
let mainDiv = document.getElementById("shortcut-popUp");
if(mainDiv){
if (mainDiv) {
mainDiv.remove();
return;
}
......@@ -575,10 +703,17 @@ function showListOfShortcutKeys(){
functions.innerHTML = "<span>" + element.function + "</span>";
let keys = document.createElement("td");
element.keys.forEach(key =>{
let i=0;
element.keys.forEach(key => {
if(i > 0 && i != element.keys.length){
let plus = document.createElement("span");
plus.innerHTML ="+";
keys.appendChild(plus);
}
let button = document.createElement("button");
button.innerHTML = key;
keys.appendChild(button);
i++;
});
row.appendChild(functions);
......@@ -594,11 +729,11 @@ function showListOfShortcutKeys(){
dataInputContainer.appendChild(mainDiv);
}
export const SHORTCUT_KEYS =[
{
"function": "Pause",
"keys": ["ESC"]
},
export const SHORTCUT_KEYS = [
// {
// "function": "Pause",
// "keys": ["ESC"]
// },
{
"function": "Submit",
"keys": ["Shift", "Enter"]
......@@ -613,10 +748,10 @@ export const SHORTCUT_KEYS =[
},
{
"function": "Fit Content",
"keys": ["Shift", "F"]
"keys": ["Ctrl","Shift", "F"]
},
{
"function": "Flip Horizontally",
"function": "Flip Horizontally",
"keys": ["Shift", "H"]
},
{
......@@ -633,11 +768,11 @@ export const SHORTCUT_KEYS =[
},
{
"function": "Zoom In",
"keys":["Ctrl", "+"]
"keys": ["Ctrl", "="]
},
{
"function": "Zoom out",
"keys": ["Ctrl", "_"]
"keys": ["Ctrl", "-"]
},
{
"function": "Previous Image",
......@@ -645,24 +780,24 @@ export const SHORTCUT_KEYS =[
},
{
"function": "Next Image",
"keys":["F12"]
},
{
"function": "Scroll Image to the Left",
"keys": ["Ctrl", "&larr;"]
"keys": ["F12"]
},
{
"function": "Scroll Image to the Left",
"keys": ["Ctrl", "&rarr;"]
},
{
"function":"Scroll up Image",
"keys":["Ctrl", "&uarr;"]
},
{
"function": "Scroll down Image",
"keys": ["Ctrl", "&darr;"]
}
// {
// "function": "Scroll Image to the Left",
// "keys": ["Ctrl", "&larr;"]
// },
// {
// "function": "Scroll Image to the Rigt",
// "keys": ["Ctrl", "&rarr;"]
// },
// {
// "function": "Scroll up Image",
// "keys": ["Ctrl", "&uarr;"]
// },
// {
// "function": "Scroll down Image",
// "keys": ["Ctrl", "&darr;"]
// }
// {
// "function":
// "keys":
......
WebGde/WebContent/style.css
......@@ -110,6 +110,7 @@ h3{
#shortcut-popUp div table tr td{
border-bottom: 1px solid #fff !important;
margin-bottom: 2px !important;
color:#fff;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment