Menu Items Icons Implemented
This commit is contained in:
Luis Fernando Molina committed
1 parent
feec68a2eb
commit
5eb53c4862
2 files changed
+87
-36
No files matched your search
@@ -337,6 +337,8 @@ a:active.docs-footer-link {
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 125%;
|
||||
vertical-align: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
|
||||
@@ -349,11 +351,12 @@ a:active.docs-footer-link {
|
||||
padding: 0 18px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
margin-left: 85px;
|
||||
}
|
||||
|
||||
.docs-collapsible-element:after {
|
||||
content: '\02795'; /* Unicode character for "plus" sign (+) */
|
||||
font-size: 8px;
|
||||
font-size: 5px;
|
||||
color: white;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
@@ -361,4 +364,12 @@ a:active.docs-footer-link {
|
||||
|
||||
.docs-collapsible-active:after {
|
||||
content: "\2796"; /* Unicode character for "minus" sign (-) */
|
||||
}
|
||||
|
||||
.docs-menu-item-image {
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: auto;
|
||||
}
|
||||
@@ -445,7 +445,7 @@ function newSuperalgosDocSpace() {
|
||||
|
||||
function enableCollapsibleContent() {
|
||||
let collapsibleElementsArray = document.getElementsByClassName("docs-collapsible-element")
|
||||
|
||||
|
||||
for (let i = 0; i < collapsibleElementsArray.length; i++) {
|
||||
collapsibleElementsArray[i].addEventListener("click", function () {
|
||||
this.classList.toggle("docs-collapsible-active")
|
||||
@@ -540,12 +540,81 @@ function newSuperalgosDocSpace() {
|
||||
HTML = HTML + '</div>' // Content Ends
|
||||
HTML = HTML + '</div>' // Container Ends
|
||||
|
||||
/*
|
||||
Here we inject the HTML we built into the DOM at the Docs Space Div.
|
||||
*/
|
||||
let docsSpaceDiv = document.getElementById('docs-space-div')
|
||||
docsSpaceDiv.innerHTML = HTML + addFooter()
|
||||
|
||||
hightlightEmbeddedCode()
|
||||
|
||||
addProjectImage()
|
||||
/*
|
||||
After generating the html, we will add the images at all the points we know
|
||||
there are images to be added.
|
||||
*/
|
||||
addImages()
|
||||
|
||||
if (nodeDocsDefinition.definition !== undefined) {
|
||||
addDefinitionImage(objectBeingRendered.project)
|
||||
|
||||
function addImages() {
|
||||
addProjectImage()
|
||||
if (nodeDocsDefinition.definition !== undefined) {
|
||||
addDefinitionImage(objectBeingRendered.project)
|
||||
}
|
||||
addMenuItemsImages()
|
||||
|
||||
function addDefinitionImage(project) {
|
||||
let imageElement
|
||||
if (nodeAppDefinition.icon === undefined) {
|
||||
let imageName = nodeAppDefinition.type.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
|
||||
imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
|
||||
} else {
|
||||
imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, objectBeingRendered.type)
|
||||
}
|
||||
|
||||
imageElement.width = "150"
|
||||
imageElement.height = "150"
|
||||
|
||||
let definitionImageDiv = document.getElementById('definitionImageDiv')
|
||||
definitionImageDiv.appendChild(imageElement)
|
||||
}
|
||||
|
||||
function addProjectImage() {
|
||||
let imageName = project.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
|
||||
let imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
|
||||
imageElement.width = "50"
|
||||
imageElement.height = "50"
|
||||
|
||||
let projectImageDiv = document.getElementById('projectImageDiv')
|
||||
projectImageDiv.appendChild(imageElement)
|
||||
}
|
||||
|
||||
function addMenuItemsImages() {
|
||||
if (nodeAppDefinition !== undefined && nodeAppDefinition.menuItems !== undefined) {
|
||||
for (let i = 0; i < nodeAppDefinition.menuItems.length; i++) {
|
||||
let menuItem = nodeAppDefinition.menuItems[i]
|
||||
let collectionImage = getMenuItemIcon()
|
||||
let imageElement = collectionImage.cloneNode()
|
||||
|
||||
imageElement.className = "docs-menu-item-image"
|
||||
|
||||
let menuItemElement = document.getElementById('docs-menu-item-' + i + '')
|
||||
let dummyImage = menuItemElement.childNodes[0]
|
||||
menuItemElement.replaceChild(imageElement, dummyImage)
|
||||
|
||||
function getMenuItemIcon() {
|
||||
if (menuItem.relatedUiObject !== undefined) {
|
||||
return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, menuItem.relatedUiObject)
|
||||
} else {
|
||||
if (menuItem.iconPathOn !== undefined) {
|
||||
return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, menuItem.iconPathOn)
|
||||
} else {
|
||||
return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName('Superalgos', 'bitcoin')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function autoGeneratedHtml() {
|
||||
@@ -570,9 +639,9 @@ function newSuperalgosDocSpace() {
|
||||
for (let i = 0; i < nodeAppDefinition.menuItems.length; i++) {
|
||||
let menuItem = nodeAppDefinition.menuItems[i]
|
||||
|
||||
HTML = HTML + '<button type="button" class="docs-collapsible-element">' + menuItem.label + '</button>'
|
||||
HTML = HTML + '<button id="docs-menu-item-' + i + '" type="button" class="docs-collapsible-element"><img>' + menuItem.label + '</button>'
|
||||
HTML = HTML + '<div class="docs-collapsible-content">'
|
||||
|
||||
|
||||
paragraph = {
|
||||
style: "Text",
|
||||
text: 'The ' + menuItem.label + ' menu item has the following properties:'
|
||||
@@ -699,10 +768,7 @@ function newSuperalgosDocSpace() {
|
||||
}
|
||||
|
||||
function hightlightEmbeddedCode() {
|
||||
let docsSpaceDiv = document.getElementById('docs-space-div')
|
||||
docsSpaceDiv.innerHTML = HTML + addFooter()
|
||||
_self.Prism.highlightAllUnder(docsSpaceDiv, true, onHighlighted)
|
||||
|
||||
function onHighlighted() {
|
||||
// nothing to do here
|
||||
}
|
||||
@@ -742,32 +808,6 @@ function newSuperalgosDocSpace() {
|
||||
}
|
||||
}
|
||||
|
||||
function addDefinitionImage(project) {
|
||||
let imageElement
|
||||
if (nodeAppDefinition.icon === undefined) {
|
||||
let imageName = nodeAppDefinition.type.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
|
||||
imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
|
||||
} else {
|
||||
imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, objectBeingRendered.type)
|
||||
}
|
||||
|
||||
imageElement.width = "150"
|
||||
imageElement.height = "150"
|
||||
|
||||
let definitionImageDiv = document.getElementById('definitionImageDiv')
|
||||
definitionImageDiv.appendChild(imageElement)
|
||||
}
|
||||
|
||||
function addProjectImage() {
|
||||
let imageName = project.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
|
||||
let imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
|
||||
imageElement.width = "50"
|
||||
imageElement.height = "50"
|
||||
|
||||
let projectImageDiv = document.getElementById('projectImageDiv')
|
||||
projectImageDiv.appendChild(imageElement)
|
||||
}
|
||||
|
||||
function addBold(text) {
|
||||
let splittedText = text.split(':')
|
||||
if (splittedText.length > 1 && splittedText[1].length > 0) {
|
||||
|
||||
Reference in new issue
Block a user