fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

context menu implemented

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2020-12-09 09:53:27 +01:00
1 parent e7f1e109f7
commit 33ed9a939a
4 files changed
+164 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/WebServer/css/context-menu.css
+42
View File
@@ -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;
}
Client/WebServer/index.html
+28 -9
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="credits.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="tutorial.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="docs.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="context-menu.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="font-awasome.css" type="text/css" />
<link rel="shortcut icon" type="image/png/ico" href="Images/favicon.ico" />
<script type="text/javascript" src="WebServer/require.js"></script>
@@ -52,13 +53,18 @@
style="overflow:hidden; background: url(Images/superalgos-platform.jpg); background-size: cover;"
onresize="onResize()">
<div id="contributors" class="credits">
<p>Superalgos is <span class="credits-red">free</span> and <span class="credits-red">open-source</span>, and is <span class="credits-red">constantly improving</span> thanks to the involvement of contributors:</p>
<p>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.</p>
<p>Superalgos is <span class="credits-red">free</span> and <span class="credits-red">open-source</span>, and is
<span class="credits-red">constantly improving</span> thanks to the involvement of contributors:</p>
<p>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.</p>
<p><span class="credits-red">You too can help grow and improve Superalgos. Become a contributor!</span></p>
<p>If you like the project, please give it a <span class="credits-red">star</span> and <span class="credits-red">fork</span> it on Github. This helps developers find it on the search! </p>
<p>If you like the project, please give it a <span class="credits-red">star</span> and <span
class="credits-red">fork</span> it on Github. This helps developers find it on the search! </p>
</div>
<div id="masterApp"></div>
<div id="canvasApp"></div>
@@ -77,11 +83,13 @@
<table class="tutorial-buttonsTable">
<tr>
<td align="center">
<label class="tutorial-font-small tutorial-stop-button" onclick="UI.projects.superalgos.spaces.tutorialSpace.stop()"
<label class="tutorial-font-small tutorial-stop-button"
onclick="UI.projects.superalgos.spaces.tutorialSpace.stop()"
value="">&nbsp;&nbsp;Stop&nbsp;&nbsp;&nbsp;</label>
</td>
<td align="center">
<label class="tutorial-font-small tutorial-skip-button" onclick="UI.projects.superalgos.spaces.tutorialSpace.skip()"
<label class="tutorial-font-small tutorial-skip-button"
onclick="UI.projects.superalgos.spaces.tutorialSpace.skip()"
value="">&nbsp;&nbsp;Skip&nbsp;&nbsp;&nbsp;</label>
</td>
<td align="center">
@@ -89,13 +97,24 @@
onclick="UI.projects.superalgos.spaces.tutorialSpace.previous()" value="">Previous</label>
</td>
<td align="center">
<label class="tutorial-font-small tutorial-next-button" onclick="UI.projects.superalgos.spaces.tutorialSpace.next()"
<label class="tutorial-font-small tutorial-next-button"
onclick="UI.projects.superalgos.spaces.tutorialSpace.next()"
value="">&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;</label>
</td>
</tr>
</table>
</form>
</div>
<ul id="menu">
<li class="menu-item" onClick="window.contextMenu.editText()">Edit Text</li>
<li class="menu-item" onClick="window.contextMenu.editHTML()">Edit HTML</li>
<li class="menu-item" onClick="window.contextMenu.code()">Code</li>
<li class="menu-item" onClick="window.contextMenu.note()">Note</li>
<li class="menu-item" onClick="window.contextMenu.warning()">Warning</li>
<li class="menu-item" onClick="window.contextMenu.important()">Important</li>
</ul>
</body>
</html>
Client/httpInterface.js
+6
View File
@@ -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')
Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+88 -3
View File
@@ -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 + '<div class="docs-node-html-page-container">' // Container Starts
HTML = HTML + '<div id="clickable" class="docs-node-html-page-container">' // Container Starts
/* Title */
HTML = HTML + '<div><h2 class="docs-h2" id="' + node.type.toLowerCase().replace(' ', '-') + '" > ' + node.type + '</h2></div>'
@@ -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'
}
}