Introduction
Depending on the architectural design of your page banner and menus, you can encapsulate all the html, css, js on a single javascript file. You will need a placeholder on the textarea to inject all that good html sauce in it. Your script can be as flexible as you'd like by adding parameters. Attached is a sample script that generates a drawer sliding from the right based on this approach.
Getting started
You can only import scripts from the library this way, so I recommend keep the script on a separate dxp file on the library to avoid importing unnecessary scripts every time. It would be nice to store javascript files in the library as well. Maybe in a future version of Spotfire, so I encourage everybody to vote up this idea and this other one
html
<span id="toggleDrawer" >open/close Drawer</span> <div id="myDrawer" class="closed right drawer" style="background:#2a2a2a;font-size:14px"> <div class="close_drawer_button">✖</div> <!--contents starts here--> <h1>my drawer contents</h1> You can put here whatever you want, including spotfire controls <SpotfireControl id="d6eb4007c2ee4220961c1e5b48b24c34" /> <p><SpotfireControl id="94f75a6cd358473ba35723d334821185" /></p> <!-- contents ends here--> </div>
js
//script parameters id ="myDrawer"; //position="left"; //right|left opened = false; //init drawer = document.getElementById(id); if (opened) drawer.classList.add("open"); //drawer.classList.add(position); //settings document.getElementById("toggleDrawer").addEventListener("click", () => {drawer.classList.toggle("open")}); document.querySelector(".close_drawer_button").addEventListener("click", () => {drawer.classList.toggle("open")}); //style css = `<style> .drawer { position: fixed; top: 0; bottom: 0; width: 300px; background-color: #fff; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-in-out; overflow:auto; padding: 20px; } .right{ transform: translateX(100%); right: 0; } .left{ transform: translateX(-100%); left: 0; } .drawer.open { transform: translateX(0); } .close_drawer_button{ float:right; cursor:default; } </style>` document.getElementById(id).insertAdjacentHTML("afterend",css)
Back to JavaScript for Text Areas
-
1
Recommended Comments
There are no comments to display.