From 33ed9a939a647ac03f4619ff7b7b2f36604fe397 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 9 Dec 2020 09:53:27 +0100 Subject: [PATCH] context menu implemented --- Client/WebServer/css/context-menu.css | 42 +++++++++ Client/WebServer/index.html | 37 ++++++-- Client/httpInterface.js | 6 ++ .../UI/Spaces/Docs-Space/DocsSpace.js | 91 ++++++++++++++++++- 4 files changed, 164 insertions(+), 12 deletions(-) create mode 100644 Client/WebServer/css/context-menu.css diff --git a/Client/WebServer/css/context-menu.css b/Client/WebServer/css/context-menu.css new file mode 100644 index 000000000..4d8e0c96b --- /dev/null +++ b/Client/WebServer/css/context-menu.css @@ -0,0 +1,42 @@ + + #menu { + display: block; + background-color: white; + padding: 10px 0px; + border-radius: 5px; + box-shadow: 2px 2px 30px lightgrey; + position: absolute; + transform-origin: center; + z-index: 2; + opacity: 0; + transform: scale(0); + transition: transform 0.2s, opacity 0.2s; + } + + #menu.show { + opacity: 1; + transform: scale(1); + transform-origin: top left; + } + + .menu-item { + display: block; + padding: 10px 30px; + transition: 0.1s; + color: #666; + } + + .menu-item:hover { + background-color: #eee; + cursor: pointer; + } + + #out-click { + height: 100vh; + width: 100vw; + position: fixed; + top: 0; + left: 0; + z-index: 1; + display: none; + } \ No newline at end of file diff --git a/Client/WebServer/index.html b/Client/WebServer/index.html index 10fb2eaa2..b8419e257 100644 --- a/Client/WebServer/index.html +++ b/Client/WebServer/index.html @@ -8,6 +8,7 @@ + @@ -52,13 +53,18 @@ style="overflow:hidden; background: url(Images/superalgos-platform.jpg); background-size: cover;" onresize="onResize()">
-

Superalgos is free and open-source, and is constantly improving thanks to the involvement of contributors:

-

Luis Fernando Molina, Julian Molina, Andreja Cobeljic, Matías Benitez, Ira Miller, Eduardo Remis, - Jeff Braun, rico4dev, 9808us, Barry Low, Nikola Bjelogrlic, Hirajin Koizuko, Francisco J. Santillán, Viktoria B., Guillermo V., Daniel J., - Javier A., Gustavo J., Romina GS, Pedro P., Thais M., Andrey M., Loui M., Natalia M., Bashar A., Carlos V., Diego M., - Sebastian E., Bogdan P., Marko V., Igor S., Niksa K., Rodrigo M., Nicanor M., Alejandro P., Mateo H., Lan T., Leon A., Uroš R., Filip M., Vladimir J. and Pavle B.

+

Superalgos is free and open-source, and is + constantly improving thanks to the involvement of contributors:

+

Luis Fernando Molina, Julian Molina, Andreja Cobeljic, Matías Benitez, Ira Miller, Eduardo Remis, + Jeff Braun, rico4dev, 9808us, Barry Low, Nikola Bjelogrlic, Hirajin Koizuko, Francisco J. Santillán, + Viktoria B., Guillermo V., Daniel J., + Javier A., Gustavo J., Romina GS, Pedro P., Thais M., Andrey M., Loui M., Natalia M., Bashar A., Carlos V., + Diego M., + Sebastian E., Bogdan P., Marko V., Igor S., Niksa K., Rodrigo M., Nicanor M., Alejandro P., Mateo H., Lan + T., Leon A., Uroš R., Filip M., Vladimir J. and Pavle B.

You too can help grow and improve Superalgos. Become a contributor!

-

If you like the project, please give it a star and fork it on Github. This helps developers find it on the search!

+

If you like the project, please give it a star and fork it on Github. This helps developers find it on the search!

@@ -77,11 +83,13 @@
- - @@ -89,13 +97,24 @@ onclick="UI.projects.superalgos.spaces.tutorialSpace.previous()" value="">Previous -
+ + + \ No newline at end of file diff --git a/Client/httpInterface.js b/Client/httpInterface.js index 1f3a8a28b..6191fb906 100644 --- a/Client/httpInterface.js +++ b/Client/httpInterface.js @@ -768,6 +768,12 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE } break + case 'context-menu.css': + { + sendStyleSheet('context-menu.css') + } + break + case 'credits.css': { sendStyleSheet('credits.css') diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js index 114f9a2de..ced381d8d 100644 --- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js +++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js @@ -26,6 +26,8 @@ function newSuperalgosDocSpace() { let browserResizedEventSubscriptionId let openingEventSubscriptionId let closingEventSubscriptionId + let textSelection = '' + let htmlSelection = '' return thisObject @@ -37,8 +39,43 @@ function newSuperalgosDocSpace() { closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing) browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) - + setUpContextMenu() isInitialized = true + + function setUpContextMenu() { + window.contextMenu = { + editText: editText, + editHTML: editHTML, + code: code, + note: note, + warning: warning, + important: important + } + + function editText() { + console.log(textSelection) + } + + function editHTML() { + console.log(htmlSelection) + } + + function code() { + + } + + function note() { + + } + + function warning() { + + } + + function important() { + + } + } } function finalize() { @@ -65,11 +102,12 @@ function newSuperalgosDocSpace() { return } buildNodeHtmlPage() + activateRightClick() function buildNodeHtmlPage() { let HTML = '' - HTML = HTML + '
' // Container Starts + HTML = HTML + '
' // Container Starts /* Title */ HTML = HTML + '

' + node.type + '

' @@ -142,6 +180,53 @@ function newSuperalgosDocSpace() { thisObject.sidePanelTab.open() } + function activateRightClick() { + const clickable = document.getElementById('clickable') + const menu = document.getElementById('menu') + const outClick = document.getElementById('docsDiv') + + clickable.addEventListener('contextmenu', e => { + e.preventDefault() + getHTMLOfSelection() + + menu.style.top = `${e.clientY}px` + menu.style.left = `${e.clientX}px` + menu.classList.add('show') + + outClick.style.display = "block" + }) + + outClick.addEventListener('click', () => { + menu.classList.remove('show') + outClick.style.display = "none" + }) + } + + function getHTMLOfSelection() { + let range + if (document.selection && document.selection.createRange) { + range = document.selection.createRange() + htmlSelection = range.htmlText + } + else if (window.getSelection) { + var selection = window.getSelection() + if (selection.rangeCount > 0) { + range = selection.getRangeAt(0) + var clonedSelection = range.cloneContents() + var div = document.createElement('div') + div.appendChild(clonedSelection) + htmlSelection = div.innerHTML + textSelection = div.innerText + } + else { + htmlSelection = '' + } + } + else { + htmlSelection = '' + } + } + function addDefinitionImage(nodeAppDefinition, project) { if (nodeAppDefinition.icon === undefined) { imageName = nodeAppDefinition.type.toLowerCase().replace(' ', '-') @@ -327,7 +412,7 @@ function newSuperalgosDocSpace() { 'position:fixed; top:' + docsAppDivPosition.y + 'px; ' + 'left:' + docsAppDivPosition.x + 'px; z-index:1; ' + 'width: ' + thisObject.container.frame.width + 'px;' + - 'height: ' + thisObject.container.frame.height + 'px' + 'height: ' + thisObject.container.frame.height + 'px' } }