| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <style>
- .webcomp-sc {
- position: relative;
- color: var(--MAIN-TITLES-TEXT-color);
- }
- .comp-container {
- margin-right: 30px;
- transition: margin-right .5s ease-in-out;
- }
- .webcomp-sc.expanded .comp-container {
- margin-right: 250px;
- }
- // customizer panel
- .customizer-panel {
- position: absolute;
- top: 0px;
- right: 0px;
- overflow: hidden;
- width: 25px;
- height: 100%;
- border: 1px solid #d6d8db;
- border-radius: 5px;
- padding: 3px 5px;
- transition: width .5s ease-in-out;
- }
- .webcomp-sc.expanded .customizer-panel {
- width: 245px;
- }
- // customizer panel content
- .customizer-panel .panel-content {
- height: 100%;
- margin-left: 20px;
- transition: margin-left .5s ease-in-out;
- display: flex;
- flex-direction: column;
- }
- .webcomp-sc.expanded .customizer-panel .panel-content {
- margin-left: 0;
- }
- .webcomp-sc.hide-events .wc-events {
- display: none;
- }
- .customizer-panel .panel-content textarea {
- width: 232px;
- margin-bottom: 5px;
- resize: none;
- font-family: "Lucida Console", Courier, monospace;
- font-size: .7em;
- white-space: pre;
- }
- .customizer-panel .panel-content .attributes-txt {
- flex: 4;
- }
- .customizer-panel .panel-content .events-txt {
- flex: 1;
- }
- // Expand collapse button
- .customizer-panel .exp-collapse-button {
- position: absolute;
- right: 5px;
- top: 3px;
- height: 100%;
- display: inline-block;
- user-select: none;
- }
- .customizer-panel .exp-collapse-button em.fa-plus {
- transition: transform .5s ease-in-out;
- }
- .webcomp-sc.expanded .customizer-panel .exp-collapse-button em.fa-plus {
- transform: rotate(45deg);
- }
- .customizer-panel .exp-collapse-button .cust-txt {
- position: absolute;
- left: -5px;
- top: 50%;
- margin-top: -50px;
- writing-mode: vertical-rl;
- color: var(--MAIN-TITLES-TEXT-color);
- letter-spacing: .15em;
- transition: left .2s ease-in-out;
- }
- .webcomp-sc.expanded .customizer-panel .exp-collapse-button .cust-txt {
- left: 20px;
- }
- </style>
- <div class="webcomp-sc">
- <script type = "text/javascript" src={{ .Get "src" }}></script>
- <div class="comp-container"></div>
- <div class="customizer-panel">
- <div class="panel-content">
- <b>Attributes</b>
- <textarea class="attributes-txt"></textarea>
- <b class="wc-events">Events</b>
- <textarea class="wc-events events-txt" readonly></textarea>
- </div>
- <div class="exp-collapse-button">
- <a href="javascript:void(0);"><em class="fa fa-plus"></em></a>
- <span class="cust-txt">Customize</span>
- </div>
- </div>
- </div>
- <script type = "text/javascript">
- function initWebcomp() {
- const webcomps = document.querySelectorAll(".webcomp-sc");
- const currentWebcomp = webcomps[webcomps.length - 1];
- currentWebcomp.querySelector(".exp-collapse-button a")
- .addEventListener("click", event => {
- currentWebcomp.classList.toggle("expanded");
- });
- return currentWebcomp;
- }
- function createComponent(name, innerHTML) {
- const webcomp = initWebcomp();
- const container = webcomp.querySelector(".comp-container");
- const eventsTxtArea = webcomp.querySelector("textarea.events-txt");
- const attributesTextArea = webcomp.querySelector("textarea.attributes-txt");
- const component = document.createElement(name);
- component.innerHTML = innerHTML;
- container.appendChild(component);
- return {webcomp, component, eventsTxtArea, attributesTextArea};
- }
- function loadAttrs(url, callback) {
- fetch(url)
- .then(response => response.json())
- .then(json => callback(json));
- }
- (function ({webcomp, component, eventsTxtArea, attributesTextArea}, params){
- const attrsPrefix = "-";
- // Init attributes
- function initAttrs(attrs) {
- Object.assign(component, attrs);
- attributesTextArea.value = JSON.stringify(attrs, null, 2);
- }
- if(params.attrSrc) {
- loadAttrs(params.attrSrc, initAttrs);
- } else {
- const attrs = params.filter(param => param.startsWith(attrsPrefix));
- initAttrs(params);
- }
- attributesTextArea.addEventListener("input", function () {
- Object.assign(component, JSON.parse(attributesTextArea.value));
- });
- // Add event listeners
- function handleEvent(propertyName, event) {
- console.log("Event triggered:", event, $);
- let eventTxt = event.type;
- const eventProp = event.detail[0][propertyName];
- if(eventProp) {
- eventTxt = `${eventTxt} : ${eventProp}`;
- }
- eventsTxtArea.value += `${eventTxt}\r\n`;
- eventsTxtArea.scrollTop = eventsTxtArea.scrollHeight;
- }
- if(params.events) {
- params.events.split(",").forEach(event => {
- const [eventName, propertyName] = event.split(":");
- component.addEventListener(eventName, handleEvent.bind(this, propertyName));
- });
- } else {
- webcomp.classList.add("hide-events");
- }
- })(
- createComponent({{ .Get "name" }}, {{ .Inner }}),
- {{ .Params }}
- );
- </script>
|