Add convenient little links to the bottom of your AEM instance.
Accompanied by video of set up.
| .styler-aem { | |
| position: fixed; | |
| z-index: 999999; | |
| bottom: 1vw; | |
| right: 1vw; | |
| background: rgba(255,255,255,0.5); | |
| font-size: 2vw; | |
| padding: .5vw; | |
| } | |
| .styler-aem a + a { | |
| margin-left: 1vw; | |
| } |
| var n1 = document.createElement("DIV"); | |
| n1.className = 'styler-aem'; | |
| var packmgr = "/crx/de/index.jsp"; | |
| var aemwcm = "/siteadmin#/content"; | |
| var prj = "/projects.html"; | |
| var edit = function () { | |
| var here = window.location.href; | |
| here = here.replace(/\/content\//, "/editor.html/content/"); | |
| here = here.replace(/\?(.*&)?wcmmode=disabled/, "?$1"); | |
| window.location.href = here; | |
| } | |
| var preview = function () { | |
| var here = window.location.pathname; | |
| var hash = window.location.hash; | |
| here = here.replace(/\/editor.html\/content\//, "/content/"); | |
| here += '?wcmmode=disabled' + hash; | |
| window.location.href = here; | |
| } | |
| n1.appendChild(CreateButton(packmgr, 'CRX')); | |
| n1.appendChild(CreateButton(prj, 'Projects')); | |
| n1.appendChild(CreateButton(aemwcm, 'WCM')); | |
| if (isPreview()) n1.appendChild(CreateButton(edit, 'Edit')); | |
| if (isEditor()) n1.appendChild(CreateButton(preview, 'Preview')); | |
| function isEditor(){ | |
| return /^\/editor\.html/.test(window.location.pathname); | |
| } | |
| function isPreview(){ | |
| return /^\/content/.test(window.location.pathname); | |
| } | |
| function CreateButton (href, title, cls) { | |
| const jsHref = 'javascript: void(0);' | |
| var btn = document.createElement("A"); | |
| if (cls) btn.className = cls; | |
| if (typeof href === 'function') { | |
| btn.href = jsHref; | |
| btn.onclick = href; | |
| } else { | |
| btn.href = href; | |
| } | |
| btn.textContent = title; | |
| return btn; | |
| } | |
| setTimeout(function () { | |
| document.body.appendChild(n1); | |
| console.log(n1); | |
| }, 1000) |
