/* * ----------------------------------------------------------------------------- * uiProject.js * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiProject extends HTMLElement { static get observedAttributes() { return [ 'backgroundcolor', 'backgroundimage', 'overlaycolor', 'projectbuttons' ]; } constructor() { super(); this.setValue = this.setValue.bind(this); this.resolve = this.resolve.bind(this); this.settings = { id: 'ui-project', connected: false, hostObj: document.querySelector("html"), backgroundColor: '', backgroundImage: '', backgroundImageRef: '', backgroundImageVar: '', overlayColor: '', projectButtons: [] }; } connectedCallback() { this.settings.connected = true; fxApp.projectButtons = this.settings.projectButtons; this.resolveVars(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'backgroundcolor': { this.settings.backgroundColor = newValue; break; } case 'backgroundimage': { this.settings.backgroundImageRef = newValue; break; } case 'overlaycolor': { this.settings.overlayColor = newValue; break; } case 'projectbuttons': { if (!fxApp.isEmpty(newValue)) { let tmp = newValue.replace(/`/g, '"'); this.settings.projectButtons = JSON.parse(tmp); fxApp.projectButtons = this.settings.projectButtons; } break; } } } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.backgroundImageRef.indexOf('[[') >= 0) { data.items.push({type: "image", value: this.settings.backgroundImageRef}); } else { this.settings.backgroundImage = this.settings.backgroundImageRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars()}, 100); } } else { this.setBackground(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "image": { this.settings.backgroundImage = item.value; this.settings.backgroundImageRef = item.reference; this.settings.backgroundImageVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setBackground(); break; } } }); } } setBackground() { if (!fxApp.isEmpty(this.settings.backgroundImage)) { let bg = ''; if (!fxApp.isEmpty(this.settings.overlayColor)) { bg = 'linear-gradient(' + this.settings.overlayColor + ',' + this.settings.overlayColor + '),'; } bg += 'url(' + this.settings.backgroundImage + ')'; this.settings.hostObj.style.backgroundImage = bg; } else if (!fxApp.isEmpty(this.settings.backgroundColor)) { this.settings.hostObj.style.backgroundColor = this.settings.backgroundColor; this.settings.hostObj.style.backgroundImage = 'none'; } } setValue (vName, vVal) { if (this.settings.backgroundImageVar.toLowerCase().indexOf(vName) == 0) { this.settings.backgroundImage = vVal; this.setBackground(); } else { this.resolveVars(); } } getProps() { let results = { objecttype: "ui-project", id: "ui-project", backgroundcolor: this.getAttribute("backgroundcolor"), backgroundimage: this.getAttribute("backgroundimage"), overlaycolor: this.getAttribute("overlaycolor"), projectbuttons: this.getAttribute("projectbuttons") } return results; } } window.customElements.define("ui-project", uiProject); export { uiProject } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uxLabelItem extends HTMLElement { static get observedAttributes() { return [ 'id', 'label', 'statevar','activevalue','onlabel','offlabel','matchmode' ]; } constructor() { super(); const uxTemplate = document.createElement('template'); uxTemplate.innerHTML = ``; this.appendChild(uxTemplate.content.cloneNode(true)); this.resolve = this.resolve.bind(this); this.settings = { id: '', labelObj: this.querySelector(".label-item"), label: '', labelRef: '', labelVar: '', activeValue: fxApp.activeValues, matchMode: 'active', state: '', stateRef: '', stateVar: '', onLabel: '', onLabelRef: '', onLabelVar: '', offLabel: '', offLabelRef: '', offLabelVar: '' }; } connectedCallback() { if (fxApp.isEmpty(this.settings.activeValue)) { this.settings.activeValue = fxApp.activeValues; } this.resolveVars(); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'label': { this.settings.labelRef = newValue; break; } case 'statevar': { this.settings.stateRef = newValue; break; } case 'activevalue': { if (!fxApp.isEmpty(newValue)) { this.settings.activeValue = ',' + newValue.toLowerCase() + ','; } else { this.settings.activeValue = fxApp.activeValues; } break; } case 'onlabel': { this.settings.onLabelRef = newValue; break; } case 'offlabel': { this.settings.offLabelRef = newValue; break; } case 'matchmode': { switch (newValue.toLowerCase()) { case "inactive": { this.settings.matchMode = "inactive"; break; } default: { this.settings.matchMode = "active"; break; } } break; } } } resolveVars() { let data = { clientname: fxApp.clientName, items: [] }; if (this.settings.labelRef.indexOf('[[') >= 0) { data.items.push({type: "label", value: this.settings.labelRef}); } else { this.settings.label = this.settings.labelRef; this.settings.labelObj.innerHTML = this.settings.label; } if (this.settings.stateRef.indexOf('[[') >= 0) { data.items.push({type: "state", value: this.settings.stateRef}); } else { this.settings.state = this.settings.stateRef; } if (this.settings.onLabelRef.indexOf('[[') >= 0) { data.items.push({type: "onlabel", value: this.settings.onLabelRef}); } else { this.settings.onLabel = this.settings.onLabelRef; } if (this.settings.offLabelRef.indexOf('[[') >= 0) { data.items.push({type: "offlabel", value: this.settings.offLabelRef}); } else { this.settings.offLabel = this.settings.offLabelRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "label": { this.settings.label = item.value; this.settings.labelRef = item.reference; this.settings.labelVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.settings.labelObj.innerHTML = this.settings.label; break; } case "state": { this.settings.state = item.value; this.settings.stateRef = item.reference; this.settings.stateVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } case "onlabel": { this.settings.onLabel = item.value; this.settings.onLabelRef = item.reference; this.settings.onLabelVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } case "offlabel": { this.settings.offLabel = item.value; this.settings.offLabelRef = item.reference; this.settings.offLabelVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.setState(); } } setValue (vName, vVal) { if (!fxApp.isEmpty(this.settings.labelVar)) { if (this.settings.labelVar.toLowerCase().indexOf(vName) == 0) { this.settings.label = vVal; this.settings.labelObj.innerHTML = this.settings.label; return; } } if (!fxApp.isEmpty(this.settings.stateVar)) { if (this.settings.stateVar.toLowerCase().indexOf(vName) == 0) { this.settings.state = vVal; this.setState(); return; } } if ((vName == this.settings.labelVar) || (vName == this.settings.stateVar) || (vName == this.settings.onLabelVar) || (vName == this.settings.offLabelVar)) { return; } this.resolveVars(); } setActiveState() { if (!fxApp.isEmpty(this.settings.onLabel)) { this.settings.label = this.settings.onLabel; this.settings.labelVar = this.settings.onLabelVar; this.settings.labelObj.innerHTML = this.settings.label; } } setInactiveState() { if (!fxApp.isEmpty(this.settings.offLabel)) { this.settings.label = this.settings.offLabel; this.settings.labelVar = this.settings.offLabelVar; this.settings.labelObj.innerHTML = this.settings.label; } } setState () { if (!fxApp.isEmpty(this.settings.state)) { if (this.settings.matchMode === "active") { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.setActiveState(); } else { this.setInactiveState(); } } else { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.setInactiveState(); } else { this.setActiveState(); } } } else { // state variable defined but no value this.setInactiveState(); } } } window.customElements.define("ux-labelitem", uxLabelItem); export { uxLabelItem } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uxOverlays extends HTMLElement { static get observedAttributes() { return [ 'overlays' ]; } constructor() { super(); this.settings = { connected: false, overlays: '' }; } connectedCallback() { this.settings.connected = true; this.buildOverlays(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'overlays': { this.settings.overlays = newValue; break; } } } buildOverlays() { const items = this.settings.overlays.split('^'); items.forEach(item => { const parts = item.split('~'); let o = ''; if (parts.length === 4) { o = ''; } else if (parts.length === 5) { o = ''; } this.insertAdjacentHTML('beforeend', o); }); } } window.customElements.define("ux-overlays", uxOverlays); export { uxOverlays } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiImage extends HTMLElement { static get observedAttributes() { return ['id', 'top', 'left', 'width', 'height', 'rotate', 'image', 'opacity', 'filter', 'overlaycolor', 'autorefresh', "refreshinterval", 'innershadow', 'outershadow', 'borders', 'borderradii', 'statevar', 'activevalue', 'onimage', 'onfilter', 'onopacity', 'onrotate', 'onvisible', 'onclickable', 'offimage', 'offfilter', 'offopacity', 'offrotate', 'offvisible', 'offclickable', 'clientcmd', 'servercmd', 'readonly', 'position', 'fade', 'fadeinterval']; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = `
`; this.appendChild(uiTemplate.content.cloneNode(true)); this.resolve = this.resolve.bind(this); this.setImage = this.setImage.bind(this); this.setValue = this.setValue.bind(this); this.enableEdit = this.enableEdit.bind(this); this.disableEdit = this.disableEdit.bind(this); this.select = this.select.bind(this); this.isSelected = this.isSelected.bind(this); this.deselect = this.deselect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); this.move = this.move.bind(this); this.moveTo = this.moveTo.bind(this); this.settings = { readonly: false, id: '', top: '', left: '', width: '', height: '', image: '', imageVar: '', imageRef: '', filter: '', fade: false, fadeInterval: 0, overlayColor: '', autoRefresh: false, refreshTimer: null, refreshInterval: 25, borders: '', borderRadii: '', state: '', stateVar: '', stateRef: '', activeValue: fxApp.activeValues, onImage: '', onImageVar: '', onImageRef: '', onFilter: '', opacity: 1, onOpacity: 1, onRotate: false, onVisible: true, onClickable: true, offImage: '', offImageVar: '', offImageRef: '', offFilter: '', offOpacity: 1, offRotate: false, offVisible: true, offClickable: true, clientCmd: '', serverCmd: '', hostObj: this.querySelector(".image-host"), imageObj: this.querySelector(".image-object"), connected: false, canClick: true, }; this._onClickHandler = (e) => { if (fxApp.designMode === true) { if (fxDesigner.ctrlActive || fxDesigner.shiftActive) { this.toggleSelect("ui-selected"); } else { fxDesigner.deselectAll(this.settings.id); this.select(); if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } else { if (this.settings.canClick === true) { if (!fxApp.isEmpty(this.settings.clientCmd)) { fxApp.clientCmd(this.settings.clientCmd); } if (!fxApp.isEmpty(this.settings.serverCmd)) { fxApp.doCommand(this.settings.serverCmd); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { callbackObj.doMessage("editItem~image~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; this._onLoadHandler = (e) => { let interval = this.settings.refreshInterval; if (this.settings.image.indexOf('empty.png') >= 0) { interval = 5000; } if (this.settings.autoRefresh === true) { this.settings.refreshTimer = setTimeout(() => { let d = new Date(); let n = d.getTime(); let src = this.settings.image; let i = this.settings.image.indexOf("*TIMESTAMP*"); if (i > 0) { src = src.replace("*TIMESTAMP*", n); } else { i = this.settings.image.indexOf("?"); if (i < 0) { src += "?ts=" + n; } else { src += "&ts=" + n; } } this.settings.imageObj.src = src; }, interval); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { if (fxApp.isEmpty(this.settings.activeValue)) { this.settings.activeValue = ",1,on,true,"; } if (!fxApp.isEmpty(this.settings.clientCmd) || !fxApp.isEmpty(this.settings.serverCmd)) { this.enableClick(); } else { this.settings.hostObj.classList.add("noclicks"); this.settings.hostObj.classList.remove("ripple"); } if (this.settings.autoRefresh) { this.settings.imageObj.addEventListener('load', this._onLoadHandler, false); this.settings.imageObj.addEventListener('error', this._onLoadHandler, false); } this.resolveVars(); this.settings.connected = true; } disconnectedCallback() { clearTimeout(this.settings.refreshTimer); $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'position': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.position = newValue; } else { this.settings.hostObj.style.position = 'absolute'; } break; } case 'readonly': { this.settings.readonly = (newValue == '1') ? true : false; break; } case 'fade': { this.settings.fade = (newValue == '1') ? true : false; break; } case 'fadeinterval': { if (fxApp.isNumeric(newValue)) { this.settings.fadeInterval = newValue; } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.width = newValue; this.settings.hostObj.style.width = newValue + "px"; this.settings.imageObj.width = parseInt(newValue); } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.height = newValue; this.settings.hostObj.style.height = newValue + "px"; this.settings.imageObj.height = parseInt(newValue); } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.left = newValue; this.settings.hostObj.style.left = newValue + "px"; } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.top = newValue; this.settings.hostObj.style.top = newValue + "px"; } break; } case 'rotate': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.transform = "rotate(" + newValue + "deg)"; } break; } case 'borders': { // border-left = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.border = newValue; } else { this.settings.hostObj.style.border = 'none'; } break; } case 'borderradii': { // "tl tr br bl" if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 4) { this.settings.hostObj.style.borderRadius = r[0] + "px " + r[1] + "px " + r[2] + "px " + r[3] + "px"; } else { this.settings.hostObj.style.borderRadius = newValue + 'px'; } } else { this.settings.hostObj.style.borderRadius = '0 0 0 0'; } break; } case 'image': { this.settings.imageRef = newValue; if (this.settings.connected) { this.resolveVars(); } break; } case 'opacity': { if (!fxApp.isEmpty(newValue)) { this.settings.opacity = parseFloat(newValue); this.settings.imageObj.style.opacity = this.settings.opacity; } break; } case 'filter': { this.settings.filter = newValue; break; } case 'onfilter': { this.settings.onFilter = newValue; break; } case 'offfilter': { this.settings.offFilter = newValue; break; } case 'innershadow': { if (newValue == "1") { this.settings.imageObj.classList.add("shadowinner"); } break; } case 'outershadow': { switch (newValue.toLowerCase()) { case "none": { this.settings.imageObj.classList.remove("shadow-xsmall"); this.settings.imageObj.classList.remove("shadow-small"); this.settings.imageObj.classList.remove("shadow-medium"); this.settings.imageObj.classList.remove("shadow-large"); this.settings.imageObj.classList.remove("shadow-xlarge"); break; } case "xsmall": { this.settings.imageObj.classList.add("shadow-xsmall"); this.settings.imageObj.classList.remove("shadow-small"); this.settings.imageObj.classList.remove("shadow-medium"); this.settings.imageObj.classList.remove("shadow-large"); this.settings.imageObj.classList.remove("shadow-xlarge"); break; } case "small": { this.settings.imageObj.classList.remove("shadow-xsmall"); this.settings.imageObj.classList.add("shadow-small"); this.settings.imageObj.classList.remove("shadow-medium"); this.settings.imageObj.classList.remove("shadow-large"); this.settings.imageObj.classList.remove("shadow-xlarge"); break; } case "medium": { this.settings.imageObj.classList.remove("shadow-xsmall"); this.settings.imageObj.classList.remove("shadow-small"); this.settings.imageObj.classList.add("shadow-medium"); this.settings.imageObj.classList.remove("shadow-large"); this.settings.imageObj.classList.remove("shadow-xlarge"); break; } case "large": { this.settings.imageObj.classList.remove("shadow-xsmall"); this.settings.imageObj.classList.remove("shadow-small"); this.settings.imageObj.classList.remove("shadow-medium"); this.settings.imageObj.classList.add("shadow-large"); this.settings.imageObj.classList.remove("shadow-xlarge"); break; } case "xlarge": { this.settings.imageObj.classList.remove("shadow-xsmall"); this.settings.imageObj.classList.remove("shadow-small"); this.settings.imageObj.classList.remove("shadow-medium"); this.settings.imageObj.classList.remove("shadow-large"); this.settings.imageObj.classList.add("shadow-xlarge"); break; } default: { this.settings.imageObj.classList.remove("shadow-xsmall"); this.settings.imageObj.classList.remove("shadow-small"); this.settings.imageObj.classList.remove("shadow-medium"); this.settings.imageObj.classList.remove("shadow-large"); this.settings.imageObj.classList.remove("shadow-xlarge"); break; } } break; } case 'autorefresh': { this.settings.autoRefresh = (newValue == '1') ? true : false; break; } case 'refreshinterval': { if (fxApp.isNumeric(newValue)) { this.settings.refreshInterval = Number(newValue); } break; } case 'statevar': { this.settings.stateRef = newValue; break; } case 'activevalue': { if (fxApp.isEmpty(newValue)) { this.settings.activeValue = fxApp.activeValues; } else { this.settings.activeValue = ',' + newValue.toLowerCase() + ','; } break; } case 'onimage': { this.settings.onImage = newValue; break; } case 'overlaycolor': { this.settings.overlayColor = newValue; break; } case 'onrotate': { this.settings.onRotate = (newValue == '1') ? true : false; break; } case 'onvisible': { this.settings.onVisible = (newValue == '1') ? true : false; break; } case 'onopacity': { if (!fxApp.isEmpty(newValue)) { this.settings.onOpacity = parseFloat(newValue); } break; } case 'onclickable': { this.settings.onClickable = (newValue == '1') ? true : false; break; } case 'offimage': { this.settings.offImage = newValue; break; } case 'offrotate': { this.settings.offRotate = (newValue == '1') ? true : false; break; } case 'offvisible': { this.settings.offVisible = (newValue == '1') ? true : false; break; } case 'offopacity': { if (!fxApp.isEmpty(newValue)) { this.settings.offOpacity = parseFloat(newValue); } break; } case 'offclickable': { this.settings.offClickable = (newValue == '1') ? true : false; break; } case 'clientcmd': { this.settings.clientCmd = newValue; break; } case 'servercmd': { this.settings.serverCmd = newValue; break; } } } moveTo (top, left) { if (this.settings.isSelected === true) { this.setAttribute("left", left); this.setAttribute("top", top); } } move (borderBit, amount) { if (this.settings.isSelected === true) { let i = 0; switch (borderBit) { case "left": { i = parseInt(this.getAttribute("left")); i += amount; this.setAttribute("left", i); break; } case "top": { i = parseInt(this.getAttribute("top")); i += amount; this.setAttribute("top", i); break; } } if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } isSelected () { return this.settings.isSelected; } select () { this.settings.isSelected = true; this.settings.hostObj.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.settings.hostObj.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.hostObj.classList.add("ui-selected"); } else { this.settings.hostObj.classList.remove("ui-selected"); } } enableClick () { this.settings.hostObj.classList.remove("noclicks"); this.settings.hostObj.style.pointerEvents = "auto"; this.addEventListener('click', this._onClickHandler, false); } enableEdit () { if (this.settings.readonly === false) { this.settings.hostObj.classList.remove("ripple"); this.settings.hostObj.style.pointerEvents = "auto"; this.settings.hostObj.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } } disableEdit () { this.settings.hostObj.style.pointerEvents = "none"; this.settings.hostObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); this.removeEventListener('dblclick', this._onClickHandler, false); } setImage() { if (this.settings.fade === true) { this.settings.imageObj.style.transition = "opacity " + this.settings.fadeInterval + "ms ease-in-out"; } if (fxApp.isEmpty(this.settings.image)) { this.settings.image = "/images/empty.png"; } this.settings.imageObj.src = this.settings.image; if (!fxApp.isEmpty(this.settings.filter)) { this.settings.imageObj.style.filter = this.settings.filter; } else { this.settings.imageObj.style.filter = 'none'; } } resolveVars() { const data = {clientname: fxApp.clientName, items: []}; if (this.settings.stateRef.indexOf('[[') >= 0) { data.items.push({type: "state", value: this.settings.stateRef}); } else { this.settings.state = this.settings.stateRef; } if (this.settings.imageRef.indexOf('[[') >= 0) { data.items.push({type: "image", value: this.settings.imageRef}); } else { this.settings.image = this.settings.imageRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.setImage(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "state": { this.settings.state = item.value; this.settings.stateRef = item.reference; this.settings.stateVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setImage(); this.setState(); break; } case "image": { this.settings.image = item.value; this.settings.imageRef = item.reference; this.settings.imageVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setImage(); break; } } }); } } setActiveState() { if (!fxApp.isEmpty(this.settings.onImage)) { this.settings.image = this.settings.onImage; this.setImage(); } if (!fxApp.isEmpty(this.settings.onFilter)) { this.settings.imageObj.style.filter = this.settings.onFilter; } else { this.settings.imageObj.style.filter = "none"; } if (this.settings.onRotate === true) { this.settings.hostObj.classList.add('ui-spin'); } else { this.settings.hostObj.classList.remove('ui-spin'); } if (fxApp.designMode === false) { if ( this.settings.onVisible === true) { this.settings.hostObj.classList.remove('hidden'); } else { this.settings.hostObj.classList.add('hidden'); } } this.settings.canClick = this.settings.onClickable; this.settings.imageObj.style.opacity = this.settings.onOpacity; } setInactiveState() { if (!fxApp.isEmpty(this.settings.offImage)) { this.settings.image = this.settings.offImage; this.setImage(); } if (!fxApp.isEmpty(this.settings.offFilter)) { this.settings.imageObj.style.filter = this.settings.offFilter; } else { this.settings.imageObj.style.filter = "none"; } this.settings.canClick = this.settings.offClickable; this.settings.imageObj.style.opacity = this.settings.offOpacity; if (fxApp.designMode === false) { if (this.settings.offVisible == true) { this.settings.hostObj.classList.remove('hidden'); } else { this.settings.hostObj.classList.add('hidden'); } } if (this.settings.offRotate == true) { this.settings.hostObj.classList.add('ui-spin'); } else { this.settings.hostObj.classList.remove('ui-spin'); } } setState() { if (!fxApp.isEmpty(this.settings.state)) { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { // then in active state this.setActiveState(); } else { this.setInactiveState(); } } else { // state with no value this.setActiveState(); } if (!fxApp.isEmpty(this.settings.filter)) { this.settings.imageObj.style.filter = this.settings.filter; } else { this.settings.imageObj.style.filter = 'none'; } } setValue (vName, vVal) { if (!fxApp.isEmpty(this.settings.imageVar)) { if (this.settings.imageVar.toLowerCase().indexOf(vName) >= 0) { this.settings.image = vVal; this.setImage(); return; } } if (!fxApp.isEmpty(this.settings.stateVar)) { if (this.settings.stateVar.toLowerCase().indexOf(vName) >= 0) { this.settings.state = vVal; this.setState(); return; } } this.resolveVars(); } getProps() { let results = { objecttype: "ui-image", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), left: this.getAttribute("left"), top: this.getAttribute("top"), rotate: this.getAttribute("rotate"), borders: this.getAttribute('borders'), borderradii: this.getAttribute('borderradii'), filter: this.getAttribute('filter'), fade: this.getAttribute('fade'), fadeinterval: this.getAttribute('fadeinterval'), opacity: this.getAttribute('opacity'), overlaycolor: this.getAttribute('overlaycolor'), innershadow: this.getAttribute('innershadow'), outershadow: this.getAttribute('outershadow'), image: this.getAttribute('image'), imagevar: this.getAttribute('imagevar'), autorefresh: this.getAttribute('autorefresh'), refreshinterval: this.getAttribute('refreshinterval'), statevar: this.getAttribute('statevar'), activevalue: this.getAttribute('activevalue'), onimage: this.getAttribute('onimage'), onrotate: this.getAttribute('onrotate'), onfilter: this.getAttribute('onfilter'), onvisible: this.getAttribute('onvisible'), onopacity: this.getAttribute('onopacity'), onclickable: this.getAttribute('onclickable'), offimage: this.getAttribute('offimage'), offrotate: this.getAttribute('offrotate'), offfilter: this.getAttribute('offfilter'), offvisible: this.getAttribute('offvisible'), offopacity: this.getAttribute('offopacity'), offclickable: this.getAttribute('offclickable'), clientcmd: this.getAttribute('clientcmd'), servercmd: this.getAttribute('servercmd') }; return results; } } window.customElements.define("ui-image", uiImage); export { uiImage } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiLabel extends HTMLElement { static get observedAttributes() { return [ 'id','readonly','position','width','height','left','top','rotate','label','icon','iconpadding','color','allowwrap','textshadow','textalign','texttransform', 'fontfamily','fontsize','fontweight','fontstyle','statevar','activevalue','matchmode','onlabel','onicon','oncolor','onvisible','offlabel','officon','offcolor','offvisible' ]; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = ``; this.appendChild(uiTemplate.content.cloneNode(true)); this.resolve = this.resolve.bind(this); this.setState = this.setState.bind(this); this.setValue = this.setValue.bind(this); this.enableEdit = this.enableEdit.bind(this); this.disableEdit = this.disableEdit.bind(this); this.select = this.select.bind(this); this.isSelected = this.isSelected.bind(this); this.deselect = this.deselect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); this.move = this.move.bind(this); this.moveTo = this.moveTo.bind(this); this.buildIcons = this.buildIcons.bind(this); this.buildLabels = this.buildLabels.bind(this); this.settings = { id: '', hostObj: this.querySelector(".label-host"), iconObj: null, labelObj: null, label: '', labelRef: '', labelVar: '', readonly: false, hasIcons: false, icon: '', iconPadding: '', activeValue: ',on,true,1,', matchMode: 'active', state: '', stateRef: '', stateVar: '', onLabel: '', onLabelRef: '', onLabelVar: '', onColor: '', onIcon: '', onVisible: true, offLabel: '', offLabelRef: '', offLabelVar: '', offColor: '', offIcon: '', offVisible: true, isSelected: false }; this._onClickHandler = (e) => { if (fxApp.designMode === true) { if (fxDesigner.ctrlActive || fxDesigner.shiftActive) { this.toggleSelect("ui-selected"); } else { fxDesigner.deselectAll(this.settings.id); this.select(); if (fxDesigner.getSelectedCount() == 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { callbackObj.doMessage("editItem~label~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { if (fxApp.isEmpty(this.settings.activeValue)) { this.settings.activeValue = fxApp.activevalues; } if (this.settings.hasIcons === true) { this.buildIcons(); } if (!fxApp.isEmpty(this.settings.labelRef)) { this.buildLabels(); } this.resolveVars(); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'position': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.position = newValue; } else { this.settings.hostObj.style.position = 'relative'; } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.width = newValue + "px"; } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.height = newValue + "px"; } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.left = newValue + "px"; } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.top = newValue + "px"; } break; } case 'rotate': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.transform = "rotate(" + newValue + "deg)"; } break; } case 'label': { this.settings.labelRef = newValue; if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'icon': { this.settings.icon = newValue; if (!fxApp.isEmpty(this.settings.icon)) { this.settings.hasIcons = true; if (this.settings.iconObj != null) { this.setIcon(this.settings.icon); } } break; } case 'iconpadding': { this.settings.iconPadding = newValue; this.setIconPadding(); break; } case 'color': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.color = newValue; } else { this.settings.hostObj.style.color = "inherit"; } break; } case 'allowwrap': { switch (newValue.toLowerCase()) { case "false": { this.settings.hostObj.style.whiteSpace = "nowrap"; this.settings.hostObj.style.overflow = "hidden"; this.settings.hostObj.style.textOverflow = "clip"; break; } default: { this.settings.hostObj.style.whiteSpace = "normal"; this.settings.hostObj.style.overflow = "visible"; this.settings.hostObj.style.textOverflow = "string"; break; } } break; } case 'textshadow': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.textShadow = newValue; } else { this.settings.hostObj.style.textShadow = "none"; } break; } case 'textalign': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.textAlign = newValue; } else { this.settings.hostObj.style.textAlign = "inherit"; } break; } case 'texttransform': { switch (newValue.toLowerCase()) { case "lowercase": { this.settings.hostObj.style.textTransform = "lowercase"; break; } case "uppercase": { this.settings.hostObj.style.textTransform = "uppercase"; break; } case "propercase": { this.settings.hostObj.style.textTransform = "capitalize"; break; } default: { this.settings.hostObj.style.textTransform = "none"; break; } } break; } case 'fontfamily': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.fontFamily = newValue; } else { this.settings.hostObj.style.fontFamily = "inherit"; } break; } case 'fontsize': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.fontSize = newValue + "px"; } else { this.settings.hostObj.style.fontSize = "inherit"; } break; } case 'fontweight': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.fontWeight = newValue; } else { this.settings.hostObj.style.fontWeight = "inherit"; } break; } case 'fontstyle': { switch (newValue.toLowerCase()) { case "italic": { this.settings.hostObj.style.fontStyle = "italic"; break; } default: { this.settings.hostObj.style.fontStyle = "normal"; break; } } break; } case 'statevar': { if ((!fxApp.isEmpty(newValue)) && (fxApp.designMode === false)) { this.settings.hostObj.classList.add("hidden"); } this.settings.stateRef = newValue; break; } case 'matchmode': { switch (newValue.toLowerCase()) { case "inactive": { this.settings.matchMode = "inactive"; break; } default: { this.settings.matchMode = "active"; break; } } break; } case 'activevalue': { if (!fxApp.isEmpty(newValue)) { this.settings.activeValue = ',' + newValue.toLowerCase() + ','; } else { this.settings.activeValue = ',1,true,on,'; } break; } case 'onlabel': { this.settings.onLabelRef = newValue; break; } case 'onicon': { this.settings.onIcon = newValue; if (!fxApp.isEmpty(this.settings.onIcon)) { this.settings.hasIcons = true; } break; } case 'oncolor': { this.settings.onColor = newValue; break; } case 'onvisible': { this.settings.onVisible = (newValue.toLowerCase() == '1') ? true : false; break; } case 'offvisible': { this.settings.offVisible = (newValue.toLowerCase() == '1') ? true : false; break; } case 'offlabel': { this.settings.offLabelRef = newValue; break; } case 'offcolor': { this.settings.offColor = newValue; break; } case 'officon': { this.settings.offIcon = newValue; if (!fxApp.isEmpty(this.settings.onIcon)) { this.settings.hasIcons = true; } break; } case 'readonly': { this.settings.readonly = (newValue.toLowerCase() == '1') ? true : false; break; } } } setIconPadding() { if (!fxApp.isEmpty(this.settings.iconObj)) { if (!fxApp.isEmpty(this.settings.iconPadding)) { let p = this.settings.iconPadding.split(','); if (p.length == 3) { this.settings.iconObj.style.marginLeft = p[0] + "px"; this.settings.iconObj.style.marginRight = p[1] + "px"; let ii = this.settings.iconObj.querySelector("i"); if (!fxApp.isEmpty(ii)) { ii.style.position = "relative"; ii.style.top = p[2] + "px"; } } } } } buildIcons() { if (this.settings.iconObj == null) { const el = document.createElement('span'); el.classList.add("label-icon"); this.settings.hostObj.insertBefore(el, this.settings.hostObj.firstChild); this.settings.iconObj = this.querySelector(".label-icon"); } this.setIcon(this.settings.icon); if (!fxApp.isEmpty(this.settings.iconPadding)) { this.setIconPadding(); } } buildLabels() { if (this.settings.labelObj == null) { const el = document.createElement('span'); el.classList.add("label-object"); this.settings.hostObj.appendChild(el); this.settings.labelObj = this.querySelector(".label-object"); } this.settings.labelObj.innerHTML = ''; let tmp = ''; let level = 0; for (let i = 0; i < this.settings.labelRef.length; i++) { if (this.settings.labelRef.charAt(i) == '[') { level += 1; if (level == 1) { tmp += "^["; } else { tmp += this.settings.labelRef.charAt(i); } } else if (this.settings.labelRef.charAt(i) == ']') { level -= 1; if (level == 0) { tmp += "]^"; } else { tmp += this.settings.labelRef.charAt(i); } } else { tmp += this.settings.labelRef.charAt(i); } } let parts = tmp.split('^'); tmp = ''; parts.forEach(part => { if (!fxApp.isEmpty(part)) { if (part.indexOf(' ',0) == 0) { part = ' ' + part.substring(1); } if (part.lastIndexOf(' ') == (part.length-1)) { part = part.substring(0,part.length-1) + ' ' } tmp += ''; } this.settings.labelObj.innerHTML = tmp; }); } moveTo (top, left) { if (this.settings.isSelected === true) { this.setAttribute("left", left); this.setAttribute("top", top); } } move (borderBit, amount) { if (this.settings.isSelected === true) { let i = 0; switch (borderBit) { case "left": { i = parseInt(this.getAttribute("left")); i += amount; this.setAttribute("left", i); break; } case "top": { i = parseInt(this.getAttribute("top")); i += amount; this.setAttribute("top", i); break; } } if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } isSelected () { return this.settings.isSelected; } select () { this.settings.isSelected = true; this.settings.hostObj.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.settings.hostObj.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.hostObj.classList.add("ui-selected"); } else { this.settings.hostObj.classList.remove("ui-selected"); } } enableEdit () { if (this.settings.readonly === false) { this.settings.hostObj.style.pointerEvents = "auto"; this.settings.hostObj.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } } disableEdit () { this.settings.hostObj.style.pointerEvents = "none"; this.settings.hostObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); } resolveVars() { let data = { clientname: fxApp.clientName, items: [] }; if (this.settings.stateRef.indexOf('[[') >= 0) { data.items.push({type: "state", value: this.settings.stateRef}); } else { this.settings.state = this.settings.stateRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "state": { this.settings.state = item.value; this.settings.stateRef = item.reference; this.settings.stateVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.setState(); } } setIcon (iconVal) { this.settings.iconObj.innerHTML = ''; let iBits = iconVal.split('.'); switch (iBits[0].toLowerCase()) { case "f7": { //f7.bars_chart_round this.settings.iconObj.innerHTML = '' + iBits[1] + ''; break; } case "mi": { //f7.bars_chart_round this.settings.iconObj.innerHTML = '' + iBits[1] + ''; break; } case "bi": { // this.settings.iconObj.innerHTML = ''; break; } case "fab": { // this.settings.iconObj.innerHTML = ''; break; } case "fal": { // this.settings.iconObj.innerHTML = ''; break; } case "far": { // this.settings.iconObj.innerHTML = ''; break; } case "fasr": { // this.settings.iconObj.innerHTML = ''; break; } case "fat": { // this.settings.iconObj.innerHTML = ''; break; } case "fas": { // this.settings.iconObj.innerHTML = ''; break; } case "fass": { // this.settings.iconObj.innerHTML = ''; break; } case "fad": { // this.settings.iconObj.innerHTML = ''; break; } case "ei": { // this.settings.iconObj.innerHTML = ''; break; } } } setValue (vName, vVal) { if (!fxApp.isEmpty(this.settings.stateVar)) { if (this.settings.stateVar.toLowerCase().indexOf(vName) == 0) { this.settings.state = vVal; this.setState(); return; } } this.resolveVars(); } setActiveState() { if (!fxApp.isEmpty(this.settings.onColor)) { this.settings.hostObj.style.color = this.settings.onColor; } if (fxApp.designMode === false) { if (this.settings.onVisible == true) { this.settings.hostObj.classList.remove("hidden"); } else { this.settings.hostObj.classList.add("hidden"); } } if (!fxApp.isEmpty(this.settings.onIcon)) { this.setIcon(this.settings.onIcon); } } setInactiveState() { if (!fxApp.isEmpty(this.settings.offColor)) { this.settings.hostObj.style.color = this.settings.offColor; } if (fxApp.designMode === false) { if (this.settings.offVisible === true) { this.settings.hostObj.classList.remove("hidden"); } else { this.settings.hostObj.classList.add("hidden"); } } if (!fxApp.isEmpty(this.settings.offIcon)) { this.setIcon(this.settings.offIcon); } } setState () { if (!fxApp.isEmpty(this.settings.state)) { if (this.settings.matchMode === "active") { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.setActiveState(); } else { this.setInactiveState(); } } else { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.setInactiveState(); } else { this.setActiveState(); } } } else { // state variable defined but no value this.setInactiveState(); } } getProps() { let results = { objecttype: "ui-label", id: this.getAttribute("id"), position: this.getAttribute("position"), width: this.getAttribute("width"), height: this.getAttribute("height"), left: this.getAttribute("left"), top: this.getAttribute("top"), rotate: this.getAttribute("rotate"), label: this.getAttribute("label"), icon: this.getAttribute("icon"), iconpadding: this.getAttribute("iconpadding"), color: this.getAttribute("color"), allowwrap: this.getAttribute("allowwrap"), textshadow: this.getAttribute("textshadow"), textalign: this.getAttribute("textalign"), texttransform: this.getAttribute("texttransform"), fontfamily: this.getAttribute("fontfamily"), fontsize: this.getAttribute("fontsize"), fontweight: this.getAttribute("fontweight"), fontstyle: this.getAttribute("fontstyle"), statevar: this.getAttribute("statevar"), activevalue: this.getAttribute("activevalue"), onlabel: this.getAttribute("onlabel"), onicon: this.getAttribute("onicon"), oncolor: this.getAttribute("oncolor"), onvisible: this.getAttribute("onvisible"), offlabel: this.getAttribute("offlabel"), offcolor: this.getAttribute("offcolor"), officon: this.getAttribute("officon"), offvisible: this.getAttribute("offvisible"), matchmode: this.getAttribute("matchmode") }; return results; } } window.customElements.define("ui-label", uiLabel); export { uiLabel } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiButton extends HTMLElement { static get observedAttributes() { return ['id','readonly','position','top','left','right','width','height','rotate','borderradii','backgroundcolor','secondbackgroundcolor','gradientsteps','gradientdirection','transparent', 'margins', 'borders','borderleft','borderright','bordertop','borderbottom','outline','innershadow','outershadow','repeat','label','fontfamily','fontsize','fontweight','fontstyle','fontcolor','filter', 'icon','iconpadding','alignment','allowwrap','texttransform','statevar','activevalue','matchmode','onbackgroundcolor','labelpadding', 'onlabelcolor','onbordercolor','onoutlinecolor','onicon','onlabel','onvisible','onclickable','offbackgroundcolor', 'offlabelcolor','offbordercolor','offoutlinecolor','officon','offlabel','offvisible','offclickable','clientcmd','servercmd', 'backgroundimage', 'backgroundwidth', 'backgroundheight', 'backgroundposition','hardbuttonlocked','backgroundavatar', 'visibilityvar','visibilityvalue','caption','captionfont','captionweight','captionsize','captioncolor','captionitalic','captiontransform','captionvoffset','captionhoffset']; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = `
`; this.appendChild(uiTemplate.content.cloneNode(true)); this.setValue = this.setValue.bind(this); this.resolve = this.resolve.bind(this); this.enableEdit = this.enableEdit.bind(this); this.disableEdit = this.disableEdit.bind(this); this.select = this.select.bind(this); this.isSelected = this.isSelected.bind(this); this.deselect = this.deselect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); this.move = this.move.bind(this); this.moveTo = this.moveTo.bind(this); this.settings = { connected: false, readonly: false, hardbuttonLocked: false, id: '', position:'', margins: '', marginWidth: 0, top: '', left: '', right: '', width: '', height: '', rotate: '', hasCustomBorder: false, borderRadii: '', backgroundType: 'color', backgroundColor: '', secondbackgroundColor: '', gradientSteps: 0, gradientDirection: 0, transparent: false, filter: '', borders: '', outline: '', repeat: false, visibility: '', visibilityVar: '', visibilityRef: '', visibilityValue: '', caption: '', captionRef: '', captionVar: '', captionFont: '', captionWeight: '', captionSize: '', captionColor: '', captionItalic: '', captionTransform: '', captionVOffset: '', captionHOffset: '', label: '', labelRef: '', labelVar: '', fontFamily: '', fontSize: '', fontWeight: '', fontStyle: '', fontColor: '', hasIcons: false, icon: '', iconPadding: '', alignment: '', allowWrap: false, textTransform: '', state: '', stateVar: '', stateRef: '', matchMode: 'active', activeValue: fxApp.activeValues, backgroundImage: '', backgroundImageVar: '', backgroundImageRef: '', backgroundWidth: '', backgroundHeight: '', backgroundPosition: '', backgroundAvatar: false, onBackgroundColor: '', onLabelColor: '', onBorderColor: '', onOutlineColor: '', onIcon: '', onLabel: '', onVisible: true, onClickable: true, offBackgroundColor: '', offLabelColor: '', offBorderColor: '', offOutlineColor: '', offIcon: '', offLabel: '', offVisible: true, offClickable: true, clientCmd: '', serverCmd: '', buttonObj: this.querySelector(".button-object"), buttonBlurObj: this.querySelector(".button-blur"), buttonLabelObj: this.querySelector(".button-label"), buttonCaptionObj: this.querySelector(".button-caption"), labelObj: null, captionObj: null, iconObj: null, canClick: true, cTimer: 0 }; this.settings.buttonObj.style.border = "none"; this._onClickHandler = (e) => { if (fxApp.designMode === true) { if (fxDesigner.ctrlActive || fxDesigner.shiftActive) { this.toggleSelect("ui-selected"); } else { fxDesigner.deselectAll(this.settings.id); this.select(); if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } else { if (this.settings.canClick === true) { //this.ripple(e); if (!fxApp.isEmpty(this.settings.clientCmd)) { fxApp.clientCmd(this.settings.clientCmd); } if (!fxApp.isEmpty(this.settings.serverCmd)) { fxApp.doCommand(this.settings.serverCmd); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { if (this.settings.hardbuttonLocked === false) { callbackObj.doMessage("editItem~button~" + this.settings.id); } else { callbackObj.doMessage("editItem~hardbutton~" + this.settings.id); } } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.settings.connected = true; this.settings.buttonLabelObj.style.maxWidth = (parseInt(this.settings.width) - this.settings.marginWidth) + "px"; if (fxApp.isEmpty(this.settings.activeValue)) { this.settings.activeValue = fxApp.activeValues; } if (!fxApp.isEmpty(this.settings.clientCmd) || !fxApp.isEmpty(this.settings.serverCmd)) { this.enableClick(); } else { this.settings.buttonObj.classList.remove("ripple"); } if (this.settings.hasIcons === true) { this.buildIcons(); } if (!fxApp.isEmpty(this.settings.labelRef)) { this.buildLabels(); } if (!fxApp.isEmpty(this.settings.captionRef)) { this.buildCaptions(); } this.setBackground(); this.resolveVars(); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'hardbuttonlocked': { this.settings.hardbuttonLocked = (newValue.toLowerCase() == '1') ? true : false; break; } case 'readonly': { this.settings.readonly = (newValue.toLowerCase() == '1') ? true : false; break; } case 'id': { this.settings.id = newValue; break; } case 'position': { if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.position = newValue; } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.top = newValue; this.settings.buttonObj.style.top = newValue + "px"; } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.left = newValue; this.settings.buttonObj.style.left = newValue + "px"; } break; } case 'right': { if (fxApp.isNumeric(newValue)) { this.settings.right = newValue; this.settings.buttonObj.style.right = newValue + "px"; } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.width = newValue; this.settings.buttonObj.style.width = newValue + "px"; if (this.settings.buttonLabelObj !== null) { this.settings.buttonLabelObj.style.maxWidth = (parseInt(this.settings.width) - this.settings.marginWidth) + "px"; } } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.height = newValue; this.settings.buttonObj.style.height = newValue + "px"; } break; } case 'rotate': { if (fxApp.isNumeric(newValue)) { this.settings.buttonObj.style.transform = "rotate(" + newValue + "deg)"; } break; } case 'filter': { if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.backdropFilter = newValue; this.settings.buttonObj.style.webkitBackdropFilter = newValue; } else { this.settings.buttonObj.style.backdropFilter = 'none'; this.settings.buttonObj.style.webkitBackdropFilter = 'none'; } break; } case 'borderradii': { // "tl tr br bl" if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 4) { this.settings.buttonObj.style.borderRadius = r[0] + "px " + r[1] + "px " + r[2] + "px " + r[3] + "px"; } else { this.settings.buttonObj.style.borderRadius = newValue + 'px'; } } else { this.settings.buttonObj.style.borderRadius = '0 0 0 0'; } break; } case 'margins': { // "l r" if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 2) { this.settings.marginWidth = parseInt(r[0]) + parseInt(r[1]); this.settings.buttonLabelObj.style.marginLeft = r[0] + "px "; this.settings.buttonLabelObj.style.marginRight = r[1] + "px "; if (this.settings.buttonLabelObj !== null) { this.settings.buttonLabelObj.style.maxWidth = (parseInt(this.settings.width) - this.settings.marginWidth) + "px"; } } } break; } case 'backgroundavatar': { this.settings.backgroundAvatar = (newValue.toLowerCase() == '1') ? true : false; break; } case 'backgroundimage': { this.settings.backgroundImageRef = newValue; if (this.settings.connected === true) { this.setBlurBackground(); } break; } case 'backgroundwidth': { this.settings.backgroundWidth = newValue; if (this.settings.connected === true) { this.setBlurBackground(); } break; } case 'backgroundheight': { this.settings.backgroundHeight = newValue; if (this.settings.connected === true) { this.setBlurBackground(); } break; } case 'backgroundposition': { this.settings.backgroundPosition = newValue; if (this.settings.connected === true) { this.setBlurBackground(); } break; } case 'backgroundcolor': { // rgba(0,0,0,1) this.settings.backgroundColor = newValue; if (this.settings.connected === true) { this.setBackground(); } break; } case 'secondbackgroundcolor': { // rgba(0,0,0,1) this.settings.secondbackgroundColor = newValue; if (this.settings.connected === true) { this.setBackground(); } break; } case 'gradientsteps': { // 0,2,3,4 if (fxApp.isNumeric(newValue)) { this.settings.gradientSteps = parseInt(newValue); } else { this.settings.gradientSteps = 0; } if (this.settings.connected === true) { this.setBackground(); } break; } case 'gradientdirection': { // 0 to 360 if (fxApp.isNumeric(newValue)) { this.settings.gradientDirection = parseInt(newValue); } else { this.settings.gradientDirection = 0; } if (this.settings.connected === true) { this.setBackground(); } break; } case 'transparent': { this.settings.transparent = (newValue.toLowerCase() == '1') ? true : false; if (this.settings.connected === true) { this.setBackground(); } break; } case 'borders': { // borders = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.border = newValue; } else if (this.settings.hasCustomBorder === false) { this.settings.buttonObj.style.border = 'none'; } break; } case 'borderleft': { // borderleft = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.borderLeft = newValue; this.settings.hasCustomBorder = true; } break; } case 'borderright': { // borderleft = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.borderRight = newValue; this.settings.hasCustomBorder = true; } break; } case 'bordertop': { // borderleft = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.borderTop = newValue; this.settings.hasCustomBorder = true; } break; } case 'borderbottom': { // borderleft = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.borderBottom = newValue; this.settings.hasCustomBorder = true; } break; } case 'outline': { // borders = '1px solid rgba(0,0,255,1) 10 if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 4) { this.settings.buttonObj.style.outlineWidth = r[0]; this.settings.buttonObj.style.outlineStyle = r[1]; this.settings.buttonObj.style.outlineColor = r[2]; this.settings.buttonObj.style.outlineOffset = r[3]; } else { this.settings.buttonObj.style.outlineStyle = 'none'; } } else { this.settings.buttonObj.style.outlineStyle = 'none'; } break; } case 'innershadow': { if (fxApp.isTrue(newValue) === true) { this.settings.buttonObj.classList.add("shadowinner"); } break; } case 'outershadow': { switch (newValue.toLowerCase()) { case "none": { this.settings.buttonObj.classList.remove("shadow-xsmall"); this.settings.buttonObj.classList.remove("shadow-small"); this.settings.buttonObj.classList.remove("shadow-medium"); this.settings.buttonObj.classList.remove("shadow-large"); this.settings.buttonObj.classList.remove("shadow-xlarge"); break; } case "xsmall": { this.settings.buttonObj.classList.add("shadow-xsmall"); this.settings.buttonObj.classList.remove("shadow-small"); this.settings.buttonObj.classList.remove("shadow-medium"); this.settings.buttonObj.classList.remove("shadow-large"); this.settings.buttonObj.classList.remove("shadow-xlarge"); break; } case "small": { this.settings.buttonObj.classList.remove("shadow-xsmall"); this.settings.buttonObj.classList.add("shadow-small"); this.settings.buttonObj.classList.remove("shadow-medium"); this.settings.buttonObj.classList.remove("shadow-large"); this.settings.buttonObj.classList.remove("shadow-xlarge"); break; } case "medium": { this.settings.buttonObj.classList.remove("shadow-xsmall"); this.settings.buttonObj.classList.remove("shadow-small"); this.settings.buttonObj.classList.add("shadow-medium"); this.settings.buttonObj.classList.remove("shadow-large"); this.settings.buttonObj.classList.remove("shadow-xlarge"); break; } case "large": { this.settings.buttonObj.classList.remove("shadow-xsmall"); this.settings.buttonObj.classList.remove("shadow-small"); this.settings.buttonObj.classList.remove("shadow-medium"); this.settings.buttonObj.classList.add("shadow-large"); this.settings.buttonObj.classList.remove("shadow-xlarge"); break; } case "xlarge": { this.settings.buttonObj.classList.remove("shadow-xsmall"); this.settings.buttonObj.classList.remove("shadow-small"); this.settings.buttonObj.classList.remove("shadow-medium"); this.settings.buttonObj.classList.remove("shadow-large"); this.settings.buttonObj.classList.add("shadow-xlarge"); break; } default: { this.settings.buttonObj.classList.remove("shadow-xsmall"); this.settings.buttonObj.classList.remove("shadow-small"); this.settings.buttonObj.classList.remove("shadow-medium"); this.settings.buttonObj.classList.remove("shadow-large"); this.settings.buttonObj.classList.remove("shadow-xlarge"); break; } } break; } case 'repeat': { this.settings.repeat = (newValue.toLowerCase() == '1') ? true : false; break; } case "labelpadding": { this.settings.buttonLabelObj.style.paddingTop = newValue + "px"; break; } case 'caption': { this.settings.captionRef = newValue; if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captionfont': { this.settings.captionFont = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonCaptionObj.style.fontFamily = newValue; } else { this.settings.buttonCaptionObj.style.fontFamily = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captionweight': { this.settings.captionWeight = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonCaptionObj.style.fontWeight = newValue; } else { this.settings.buttonCaptionObj.style.fontWeight = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captionsize': { this.settings.captionSize = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonCaptionObj.style.fontSize = newValue + "px"; } else { this.settings.buttonCaptionObj.style.fontSize = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captioncolor': { this.settings.captionColor = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonCaptionObj.style.color = newValue; } else { this.settings.buttonCaptionObj.style.color = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captionitalic': { this.settings.captionItalic = newValue; switch (newValue.toLowerCase()) { case "italic": { this.settings.buttonCaptionObj.style.fontStyle = "italic"; break; } default: { this.settings.buttonCaptionObj.style.fontStyle = "normal"; break; } } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captiontransform': { this.settings.captionTransform = newValue; switch (newValue.toLowerCase()) { case "lowercase": { this.settings.buttonCaptionObj.style.textTransform = "lowercase"; break; } case "uppercase": { this.settings.buttonCaptionObj.style.textTransform = "uppercase"; break; } case "propercase": { this.settings.buttonCaptionObj.style.textTransform = "capitalize"; break; } default: { this.settings.buttonCaptionObj.style.textTransform = "none"; break; } } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'captionvoffset': { if (!fxApp.isEmpty(newValue)) { this.settings.buttonCaptionObj.style.top = newValue + "px"; } else { this.settings.buttonCaptionObj.style.top = "0"; } break; } case 'captionhoffset': { if (!fxApp.isEmpty(newValue)) { this.settings.buttonCaptionObj.style.left = newValue + "px"; } else { this.settings.buttonCaptionObj.style.left = "0"; } break; } case 'label': { this.settings.labelRef = newValue; if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'fontfamily': { this.settings.fontFamily = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.fontFamily = newValue; } else { this.settings.buttonObj.style.fontFamily = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'fontsize': { this.settings.fontSize = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.fontSize = newValue + "px"; } else { this.settings.buttonObj.style.fontSize = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'fontweight': { this.settings.fontWeight = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.fontWeight = newValue; } else { this.settings.buttonObj.style.fontWeight = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'fontcolor': { this.settings.fontColor = newValue; if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.color = newValue; } else { this.settings.buttonObj.style.color = "inherit"; } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'fontstyle': { this.settings.fontStyle = newValue; switch (newValue.toLowerCase()) { case "italic": { this.settings.buttonObj.style.fontStyle = "italic"; break; } default: { this.settings.buttonObj.style.fontStyle = "normal"; break; } } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'alignment': { this.settings.alignment = newValue; if (!fxApp.isEmpty(newValue)) { switch (newValue.toLowerCase()) { case "left": { this.settings.buttonObj.style.textAlign = 'left'; break; } case "right": { this.settings.buttonObj.style.textAlign = 'right'; break; } case "center": { this.settings.buttonObj.style.textAlign = 'center'; break; } } } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'texttransform': { this.settings.textTransform = newValue; switch (newValue.toLowerCase()) { case "lowercase": { this.settings.buttonObj.style.textTransform = "lowercase"; break; } case "uppercase": { this.settings.buttonObj.style.textTransform = "uppercase"; break; } case "propercase": { this.settings.buttonObj.style.textTransform = "capitalize"; break; } default: { this.settings.buttonObj.style.textTransform = "none"; break; } } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'allowwrap': { this.settings.allowWrap = newValue.toLowerCase(); switch (newValue.toLowerCase()) { case "false": { this.settings.buttonLabelObj.style.whiteSpace = "nowrap"; this.settings.buttonObj.style.whiteSpace = "nowrap"; this.settings.buttonObj.style.overflow = "hidden"; this.settings.buttonObj.style.textOverflow = "clip"; break; } default: { this.settings.buttonLabelObj.style.whiteSpace = "normal"; this.settings.buttonObj.style.whiteSpace = "normal"; this.settings.buttonObj.style.overflow = "hidden"; this.settings.buttonObj.style.textOverflow = "string"; break; } } if (this.settings.labelObj != null) { this.buildLabels(); } break; } case 'icon': { this.settings.icon = newValue; if (!fxApp.isEmpty(this.settings.icon)) { this.settings.hasIcons = true; if (this.settings.iconObj != null) { this.setIcon(this.settings.icon); } } break; } case 'iconpadding': { this.settings.iconPadding = newValue; this.setIconPadding(); break; } case 'visibilityvar': { if ((!fxApp.isEmpty(newValue)) && (fxApp.designMode === false)) { this.settings.buttonObj.classList.add("hidden"); } this.settings.visibilityRef = newValue; break; } case 'visibilityvalue': { if (!fxApp.isEmpty(newValue)) { this.settings.visibilityValue = ',' + newValue.toLowerCase() + ','; } else { this.settings.visibilityValue = ',1,on,true,'; } break; } case 'statevar': { if ((!fxApp.isEmpty(newValue)) && (fxApp.designMode === false)) { this.settings.buttonObj.classList.add("hidden"); } this.settings.stateRef = newValue; break; } case 'matchmode': { switch (newValue.toLowerCase()) { case "inactive": { this.settings.matchMode = "inactive"; break; } default: { this.settings.matchMode = "active"; break; } } break; } case 'activevalue': { if (!fxApp.isEmpty(newValue)) { this.settings.activeValue = ',' + newValue.toLowerCase() + ','; } else { this.settings.activeValue = ',1,on,true,'; } break; } case 'onbackgroundcolor': { this.settings.onBackgroundColor = newValue; break; } case 'onlabelcolor': { this.settings.onLabelColor = newValue; break; } case 'onbordercolor': { this.settings.onBorderColor = newValue; break; } case 'onoutlinecolor': { this.settings.onOutlineColor = newValue; break; } case 'onicon': { this.settings.onIcon = newValue; break; } case 'onlabel': { this.settings.onLabel = newValue; break; } case 'onvisible': { this.settings.onVisible = (newValue.toLowerCase() == '1') ? true : false; break; } case 'onclickable': { this.settings.onClickable = (newValue.toLowerCase() == '1') ? true : false; break; } case 'offbackgroundcolor': { this.settings.offBackgroundColor = newValue; break; } case 'offlabelcolor': { this.settings.offLabelColor = newValue; break; } case 'offbordercolor': { this.settings.offBorderColor = newValue; break; } case 'offoutlinecolor': { this.settings.offOutlineColor = newValue; break; } case 'officon': { this.settings.offIcon = newValue; break; } case 'offlabel': { this.settings.offLabel = newValue; break; } case 'offvisible': { this.settings.offVisible = (newValue.toLowerCase() == '1') ? true : false; break; } case 'offclickable': { this.settings.offClickable = (newValue.toLowerCase() == '1') ? true : false; break; } case 'clientcmd': { this.settings.clientCmd = newValue; break; } case 'servercmd': { this.settings.serverCmd = newValue; break; } } } setBlurBackground() { if (!fxApp.isEmpty(this.settings.backgroundImage)) { this.settings.buttonBlurObj.style.backgroundImage = "url(" + this.settings.backgroundImage + ")"; this.settings.buttonBlurObj.style.backgroundPosition = this.settings.backgroundPosition; this.settings.buttonBlurObj.style.backgroundSize = this.settings.backgroundWidth + "px " + this.settings.backgroundHeight + "px"; if (this.settings.backgroundAvatar === true) { this.settings.buttonBlurObj.style.borderRadius = "50%"; this.settings.buttonBlurObj.style.position = "relative"; this.settings.buttonBlurObj.style.width = this.settings.backgroundWidth + "px "; this.settings.buttonBlurObj.style.height = this.settings.backgroundHeight + "px "; this.settings.buttonBlurObj.style.marginLeft = "auto"; this.settings.buttonBlurObj.style.marginRight = "auto"; this.settings.buttonBlurObj.style.marginTop = "8px"; } } else { this.settings.buttonBlurObj.style.backgroundImage = 'none'; } } setBackground() { if (this.settings.transparent === true) { this.settings.buttonObj.style.backgroundColor = 'transparent'; this.settings.buttonObj.style.backgroundImage = 'none'; } else { let hsla = []; let l1 = 0; let l2 = 0; let l3 = 0; let l4 = 0; let tmp = ''; hsla = fxApp.RGBAtoHSLA(this.settings.backgroundColor); switch (this.settings.gradientSteps) { case 0: case 1: { this.settings.buttonObj.style.backgroundColor = this.settings.backgroundColor; this.settings.buttonObj.style.backgroundImage = 'none'; break; } case 2: { this.settings.buttonObj.style.backgroundColor = 'transparent'; l1 = hsla[2] * 0.66; l2 = hsla[2]; tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '))'; this.settings.buttonObj.style.backgroundImage = tmp; break; } case 3: { l1 = hsla[2] * 0.33; l2 = hsla[2]; l3 = hsla[2] * 1.33; if (l3 > 100) l3 = 100; this.settings.buttonObj.style.backgroundColor = 'transparent'; tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '))'; this.settings.buttonObj.style.backgroundImage = tmp; break; } case 4: { l1 = hsla[2] * 0.50; l2 = hsla[2] * 0.75; l3 = hsla[2] * 1.25; l4 = hsla[2] * 1.50; if (l3 > 100) l3 = 100; if (l4 > 100) l4 = 100; this.settings.buttonObj.style.backgroundColor = 'transparent'; tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l4 + '%,' + hsla[3] + '))'; this.settings.buttonObj.style.backgroundImage = tmp; break; } case 5: { this.settings.buttonObj.style.backgroundColor = 'transparent'; let shsla = []; shsla = fxApp.RGBAtoHSLA(this.settings.secondbackgroundColor); tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + hsla[2] + '%,' + hsla[3] + '), hsla(' + shsla[0] + ',' + shsla[1] + '%,' + shsla[2] + '%,' + shsla[3] + '))'; this.settings.buttonObj.style.backgroundImage = tmp; break; } } } } setIconPadding() { if (!fxApp.isEmpty(this.settings.iconObj)) { if (!fxApp.isEmpty(this.settings.iconPadding)) { let p = this.settings.iconPadding.split(','); if (p.length == 3) { this.settings.iconObj.style.marginLeft = p[0] + "px"; this.settings.iconObj.style.marginRight = p[1] + "px"; let ii = this.settings.iconObj.querySelector("i"); if (!fxApp.isEmpty(ii)) { ii.style.position = "relative"; ii.style.top = p[2] + "px"; } } } } } buildIcons() { if (this.settings.iconObj == null) { const el = document.createElement('span'); el.classList.add("label-icon"); this.settings.buttonLabelObj.insertBefore(el, this.settings.buttonLabelObj.firstChild); this.settings.iconObj = this.querySelector(".label-icon"); } this.setIcon(this.settings.icon); if (!fxApp.isEmpty(this.settings.iconPadding)) { this.setIconPadding(); } } buildLabels() { if (this.settings.labelObj == null) { const el = document.createElement('span'); el.classList.add("label-object"); this.settings.buttonLabelObj.appendChild(el); this.settings.labelObj = this.querySelector(".label-object"); } this.settings.labelObj.innerHTML = ''; let tmp = ''; let level = 0; for (let i = 0; i < this.settings.labelRef.length; i++) { if (this.settings.labelRef.charAt(i) == '[') { level += 1; if (level == 1) { tmp += "^["; } else { tmp += this.settings.labelRef.charAt(i); } } else if (this.settings.labelRef.charAt(i) == ']') { level -= 1; if (level == 0) { tmp += "]^"; } else { tmp += this.settings.labelRef.charAt(i); } } else { tmp += this.settings.labelRef.charAt(i); } } let parts = tmp.split('^'); tmp = ''; parts.forEach(part => { if (!fxApp.isEmpty(part)) { tmp += ' { if (!fxApp.isEmpty(part)) { tmp += '= 0) { data.items.push({type: "state", value: this.settings.stateRef}); } else { this.settings.state = this.settings.stateRef; } if (this.settings.visibilityRef.toLowerCase().indexOf('[[') >= 0) { data.items.push({type: "visibility", value: this.settings.visibilityRef}); } else { this.settings.visibility = this.settings.visibilityRef; } if (this.settings.backgroundImageRef.toLowerCase().indexOf('[[') >= 0) { data.items.push({type: "bckimage", value: this.settings.backgroundImageRef}); } else { this.settings.backgroundImage = this.settings.backgroundImageRef; this.setBlurBackground(); } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "state": { this.settings.state = item.value.toLowerCase(); this.settings.stateRef = item.reference; this.settings.stateVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setState(); break; } case "visibility": { this.settings.visibility = item.value.toLowerCase(); this.settings.visibilityRef = item.reference; this.settings.visibilityVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setVisibility(); break; } case "bckimage": { this.settings.backgroundImage = item.value.toLowerCase(); this.settings.backgroundImageRef = item.reference; this.settings.backgroundImageVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setBlurBackground(); break; } } }); } } setIcon (iconVal) { this.settings.iconObj.innerHTML = ''; let iBits = iconVal.split('.'); switch (iBits[0].toLowerCase()) { case "f7": { //f7.bars_chart_round this.settings.iconObj.innerHTML = '' + iBits[1] + ''; break; } case "mi": { //f7.bars_chart_round this.settings.iconObj.innerHTML = '' + iBits[1] + ''; break; } case "bi": { // this.settings.iconObj.innerHTML = ''; break; } case "fab": { // this.settings.iconObj.innerHTML = ''; break; } case "fal": { // this.settings.iconObj.innerHTML = ''; break; } case "far": { // this.settings.iconObj.innerHTML = ''; break; } case "fasr": { // this.settings.iconObj.innerHTML = ''; break; } case "fat": { // this.settings.iconObj.innerHTML = ''; break; } case "fas": { // this.settings.iconObj.innerHTML = ''; break; } case "fass": { // this.settings.iconObj.innerHTML = ''; break; } case "fad": { // this.settings.iconObj.innerHTML = ''; break; } case "ei": { // this.settings.iconObj.innerHTML = ''; break; } } } setValue (vName, vVal) { if (!fxApp.isEmpty(this.settings.stateVar)) { if (this.settings.stateVar.toLowerCase().indexOf(vName) >= 0) { this.settings.state = vVal; this.setState(); return; } } if (!fxApp.isEmpty(this.settings.visibilityVar)) { if (this.settings.visibilityVar.toLowerCase().indexOf(vName) >= 0) { this.settings.visibility = vVal; this.setVisibility(); return; } } if (!fxApp.isEmpty(this.settings.backgroundImageVar)) { if (this.settings.backgroundImageVar.toLowerCase().indexOf(vName) >= 0) { this.settings.backgroundImage = vVal; this.setBlurBackground(); return; } } this.resolveVars(); } setActiveState() { if (!fxApp.isEmpty(this.settings.onBackgroundColor)) { this.settings.backgroundColor = this.settings.onBackgroundColor; this.setBackground(); } if (!fxApp.isEmpty(this.settings.onLabelColor)) { this.settings.buttonObj.style.color = this.settings.onLabelColor; } if (!fxApp.isEmpty(this.settings.onBorderColor)) { this.settings.buttonObj.style.borderColor = this.settings.onBorderColor; } if (!fxApp.isEmpty(this.settings.onOutlineColor)) { this.settings.buttonObj.style.outlineColor = this.settings.onOutlineColor; } if (!fxApp.isEmpty(this.settings.onIcon)) { this.setIcon(this.settings.onIcon); } this.settings.canClick = this.settings.onClickable; if ((fxApp.designMode === false) || (this.settings.hardbuttonLocked === true)) { if (this.settings.onVisible === true) { this.settings.buttonObj.classList.remove("hidden"); } else { this.settings.buttonObj.classList.add("hidden"); } if (!fxApp.isEmpty(this.settings.visibility)) { this.setVisibility(); } } } setInactiveState() { if (!fxApp.isEmpty(this.settings.offBackgroundColor)) { this.settings.backgroundColor = this.settings.offBackgroundColor; this.setBackground(); } if (!fxApp.isEmpty(this.settings.offLabelColor)) { this.settings.buttonObj.style.color = this.settings.offLabelColor; } if (!fxApp.isEmpty(this.settings.offBorderColor)) { this.settings.buttonObj.style.borderColor = this.settings.offBorderColor; } if (!fxApp.isEmpty(this.settings.offOutlineColor)) { this.settings.buttonObj.style.outlineColor = this.settings.offOutlineColor; } if (!fxApp.isEmpty(this.settings.offIcon)) { this.setIcon(this.settings.offIcon); } this.settings.canClick = this.settings.offClickable; if ((fxApp.designMode === false) || (this.settings.hardbuttonLocked === true)) { if (this.settings.offVisible === true) { this.settings.buttonObj.classList.remove("hidden"); } else { this.settings.buttonObj.classList.add("hidden"); } if (!fxApp.isEmpty(this.settings.visibility)) { this.setVisibility(); } } } setState () { if (!fxApp.isEmpty(this.settings.state)) { if (this.settings.matchMode == "active") { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.setActiveState(); } else { this.setInactiveState(); } } else { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.setInactiveState(); } else { this.setActiveState(); } } } else { // state with no value this.setInactiveState(); } } setVisibility () { if (!fxApp.isEmpty(this.settings.visibility) && (fxApp.designMode === false)) { if (this.settings.visibilityValue.indexOf(','+this.settings.visibility.toLowerCase()+',') >= 0) { this.settings.buttonObj.classList.add("hidden"); } else { this.settings.buttonObj.classList.remove("hidden"); } } } moveTo (top, left) { if (this.settings.hardbuttonLocked === true) return; if (this.settings.isSelected === true) { this.setAttribute("left", left); this.setAttribute("top", top); } } move (borderBit, amount) { if (this.settings.hardbuttonLocked === true) return; if (this.settings.isSelected === true) { let i = 0; switch (borderBit) { case "left": { i = parseInt(this.getAttribute("left")); i += amount; this.setAttribute("left", i); break; } case "top": { i = parseInt(this.getAttribute("top")); i += amount; this.setAttribute("top", i); break; } } if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } isSelected () { return this.settings.isSelected; } select () { if (this.settings.hardbuttonLocked === true) return; this.settings.isSelected = true; this.settings.buttonObj.classList.add("ui-selected"); } deselect () { if (this.settings.hardbuttonLocked === true) return; this.settings.isSelected = false; this.settings.buttonObj.classList.remove("ui-selected"); } toggleSelect () { if (this.settings.hardbuttonLocked === true) return; this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.buttonObj.classList.add("ui-selected"); } else { this.settings.buttonObj.classList.remove("ui-selected"); } } enableClick () { if (this.settings.hardbuttonLocked === true) return; this.settings.buttonObj.style.pointerEvents = "auto"; this.addEventListener('click', this._onClickHandler, false); } enableEdit () { if (this.settings.hardbuttonLocked === true) { this.settings.buttonObj.style.pointerEvents = "auto"; this.addEventListener('dblclick', this._onDblClickHandler, false); fxApp.setButtonVisibility(); } else if (this.settings.readonly === false) { this.settings.buttonObj.classList.remove("ripple"); this.settings.buttonObj.style.pointerEvents = "auto"; this.settings.buttonObj.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } } disableEdit () { this.settings.buttonObj.style.pointerEvents = "none"; this.settings.buttonObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); this.removeEventListener('dblclick', this._onClickHandler, false); } ripple (e) { clearTimeout(this.settings.cTimer); const circle = document.createElement("span"); const diameter = Math.min(this.settings.width, this.settings.height); const radius = diameter / 2; circle.style.width = circle.style.height = `${diameter}px`; const X = (e.offsetX / fxApp.scaleFactor) - (radius / 2); const Y = (e.offsetY / fxApp.scaleFactor) - (radius / 2); circle.style.left = `${X}px`; circle.style.top = `${Y}px`; circle.classList.add("ripple"); const ripped = this.settings.buttonObj.querySelector(".ripple"); if (ripped) { ripped.remove(); } this.settings.buttonObj.appendChild(circle); this.settings.cTimer = setTimeout(() => { const ripped = this.settings.buttonObj.querySelector(".ripple"); if (ripped) { ripped.remove(); } }, 600); } getProps() { let results = { objecttype: "ui-button", id: this.getAttribute("id"), margins: this.getAttribute("margins"), position: this.getAttribute("position"), top: this.getAttribute("top"), left: this.getAttribute("left"), width: this.getAttribute("width"), height: this.getAttribute("height"), rotate: this.getAttribute("rotate"), borderradii: this.getAttribute("borderradii"), backgroundcolor: this.getAttribute("backgroundcolor"), secondbackgroundcolor: this.getAttribute("secondbackgroundcolor"), gradientsteps: this.getAttribute("gradientsteps"), gradientdirection: this.getAttribute("gradientdirection"), transparent: this.getAttribute("transparent"), filter: this.getAttribute("filter"), borders: this.getAttribute("borders"), borderleft: this.getAttribute("borderleft"), borderright: this.getAttribute("borderright"), bordertop: this.getAttribute("bordertop"), borderbottom: this.getAttribute("borderbottom"), outline: this.getAttribute("outline"), innershadow: this.getAttribute("innershadow"), outershadow: this.getAttribute("outershadow"), repeat: this.getAttribute("repeat"), label: this.getAttribute("label"), labelpadding: this.getAttribute("labelpadding"), fontfamily: this.getAttribute("fontfamily"), fontsize: this.getAttribute("fontsize"), fontweight: this.getAttribute("fontweight"), fontstyle: this.getAttribute("fontstyle"), fontcolor: this.getAttribute("fontcolor"), icon: this.getAttribute("icon"), iconpadding: this.getAttribute("iconpadding"), alignment: this.getAttribute("alignment"), allowwrap: this.getAttribute("allowwrap"), texttransform: this.getAttribute("texttransform"), statevar: this.getAttribute("statevar"), activevalue: this.getAttribute("activevalue"), matchmode: this.getAttribute("matchmode"), onbackgroundcolor: this.getAttribute("onbackgroundcolor"), onlabelcolor: this.getAttribute("onlabelcolor"), onbordercolor: this.getAttribute("onbordercolor"), onoutlinecolor: this.getAttribute("onoutlinecolor"), onicon: this.getAttribute("onicon"), onlabel: this.getAttribute("onlabel"), onvisible: this.getAttribute("onvisible"), onclickable: this.getAttribute("onclickable"), offbackgroundcolor: this.getAttribute("offbackgroundcolor"), offlabelcolor: this.getAttribute("offlabelcolor"), offbordercolor: this.getAttribute("offbordercolor"), offoutlinecolor: this.getAttribute("offoutlinecolor"), officon: this.getAttribute("officon"), offlabel: this.getAttribute("offlabel"), offvisible: this.getAttribute("offvisible"), offclickable: this.getAttribute("offclickable"), clientcmd: this.getAttribute("clientcmd"), servercmd: this.getAttribute("servercmd"), backgroundavatar: this.getAttribute("backgroundavatar"), backgroundimage: this.getAttribute("backgroundimage"), backgroundwidth: this.getAttribute("backgroundwidth"), backgroundheight: this.getAttribute("backgroundheight"), backgroundposition: this.getAttribute("backgroundposition"), visibilityvar: this.getAttribute("visibilityvar"), visibilityvalue: this.getAttribute("visibilityvalue"), caption: this.getAttribute("caption"), captionfont: this.getAttribute("captionfont"), captionweight: this.getAttribute("captionweight"), captionsize: this.getAttribute("captionsize"), captioncolor: this.getAttribute("captioncolor"), captionitalic: this.getAttribute("captionitalic"), captiontransform: this.getAttribute("captiontransform"), captionvoffset: this.getAttribute("captionvoffset"), captionhoffset: this.getAttribute("captionhoffset"), hardbuttonLocked: this.getAttribute("hardbuttonLocked") }; return results; } } window.customElements.define("ui-button", uiButton); export { uiButton } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiContent extends HTMLElement { static get observedAttributes() { return [ 'servercmd', 'clientcmd', 'backgroundcolor', 'backgroundimage', 'overlaycolor', 'pagetitle', 'pagebuttons' ]; } constructor() { super(); this.setValue = this.setValue.bind(this); this.resolve = this.resolve.bind(this); this.settings = { id: 'ui-content', connected: false, //hostObj: document.querySelector(".main-content"), hostObj: document.querySelector("html"), backgroundColor: '', backgroundImage: 'none', backgroundImageRef: '', backgroundImageVar: '', overlayColor: '', clientCmd: '', serverCmd: '', pageTitle: '', pageButtons: [], }; } connectedCallback() { this.setAttribute("id", this.settings.id); this.settings.connected = true; if (!fxApp.isEmpty(this.settings.clientCmd)) { fxApp.clientCmd(this.settings.clientCmd); } if (!fxApp.isEmpty(this.settings.serverCmd)) { fxApp.doCommand(this.settings.serverCmd); } fxApp.doCommand("SetVariable|pagetitle_[[clientname]]~" + this.settings.pageTitle); this.resolveVars(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'servercmd': { this.settings.serverCmd = newValue; break; } case 'clientcmd': { this.settings.clientCmd = newValue; break; } case 'pagetitle': { this.settings.pageTitle = newValue; break; } case 'overlaycolor': { this.settings.overlayColor = newValue; break; } case 'backgroundcolor': { this.settings.backgroundColor = newValue; break; } case 'backgroundimage': { this.settings.backgroundImageRef = newValue; break; } case 'pagebuttons': { if (!fxApp.isEmpty(newValue)) { let tmp = newValue.replace(/`/g, '"'); this.settings.pageButtons = JSON.parse(tmp); fxApp.pageButtons = this.settings.pageButtons; } break; } } } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.backgroundImageRef.indexOf('[[') >= 0) { data.items.push({type: "image", value: this.settings.backgroundImageRef}); } else { this.settings.backgroundImage = this.settings.backgroundImageRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.setBackground(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "image": { this.settings.backgroundImage = item.value; this.settings.backgroundImageRef = item.reference; this.settings.backgroundImageVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setBackground(); break; } } }); } } setBackground() { if (!fxApp.isEmpty(this.settings.backgroundImage)) { let bg = ''; if (!fxApp.isEmpty(this.settings.overlayColor)) { bg = 'linear-gradient(' + this.settings.overlayColor + ',' + this.settings.overlayColor + '),'; } bg += 'url(' + this.settings.backgroundImage + ')'; this.settings.hostObj.style.backgroundImage = bg; //this.settings.hostObj.style.backgroundAttachment = 'fixed'; //this.settings.hostObj.style.backgroundPosition = 'bottom center'; //this.settings.hostObj.style.backgroundRepeat = 'no-repeat'; //this.settings.hostObj.style.backgroundSize = 'calc(100vw * fxApp.scaleFactor) calc(100vh * fxApp.scaleFactor)'; } else if (!fxApp.isEmpty(this.settings.backgroundColor)) { this.settings.hostObj.style.backgroundColor = this.settings.backgroundColor; this.settings.hostObj.style.backgroundImage = 'none'; //} else { //this.settings.hostObj.style.backgroundColor = "transparent"; //this.settings.hostObj.style.backgroundImage = 'none'; } } setValue (vName, vVal) { if (this.settings.backgroundImageVar.toLowerCase().indexOf(vName) == 0) { this.settings.backgroundImage = vVal; this.setBackground(); } else { this.resolveVars(); } } getProps() { let results = { objecttype: "ui-content", id: "ui-content", servercmd: this.getAttribute("servercmd"), clientcmd: this.getAttribute("clientcmd"), overlaycolor: this.getAttribute("overlaycolor"), backgroundcolor: this.getAttribute("backgroundcolor"), backgroundimage: this.getAttribute("backgroundimage"), pagetitle: this.getAttribute("pagetitle"), pagebuttons: this.getAttribute("pagebuttons") }; return results; } } window.customElements.define("ui-content", uiContent); export { uiContent } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiLinearProgress extends HTMLElement { static get observedAttributes() { return ['id','width','height','top','left','value','valueRef','valueVar','min','max','duration','rotate','radius','backborder','backcolor','fromcolor','tocolor']; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = `
`; this.appendChild(uiTemplate.content); this.resolve = this.resolve.bind(this); this.setValue = this.setValue.bind(this); this.enableEdit = this.enableEdit.bind(this); this.disableEdit = this.disableEdit.bind(this); this.select = this.select.bind(this); this.isSelected = this.isSelected.bind(this); this.deselect = this.deselect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); this.move = this.move.bind(this); this.moveTo = this.moveTo.bind(this); this.settings = { hostObj: this.querySelector(".linear-progress"), coverObj: this.querySelector(".linear-cover"), connected: false, id: '', width: 0, height: 0, top: 0, left: 0, min: 0, max: 0, duration: 0, rotate: 0, radius: 0, value: -100, valueRef: '', valueVar: '', backBorder: '', fromColor: '', toColor: '', backColor: '', }; this._onClickHandler = (e) => { if (fxApp.designMode === true) { if (fxDesigner.ctrlActive || fxDesigner.shiftActive) { this.toggleSelect("ui-selected"); } else { fxDesigner.deselectAll(this.settings.id); this.select(); if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { callbackObj.doMessage("editItem~linearprogress~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.settings.connected = true; this.resolveVars(); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.width = newValue + "px"; this.settings.width = parseInt(newValue); } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.height = newValue + "px"; this.settings.height = parseInt(newValue); } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.top = newValue + "px"; this.settings.top = parseInt(newValue); } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.left = newValue + "px"; this.settings.left = parseInt(newValue); } break; } case 'value': { this.settings.valueRef = newValue; break; } case 'min': { if (fxApp.isNumeric(newValue)) { this.settings.min = parseInt(newValue); } break; } case 'max': { if (fxApp.isNumeric(newValue)) { this.settings.max = parseInt(newValue); } break; } case 'duration': { if (fxApp.isNumeric(newValue)) { this.settings.duration = parseInt(newValue); } break; } case 'rotate': { if (fxApp.isNumeric(newValue)) { this.settings.rotate = parseInt(newValue); } break; } case 'radius': { if (fxApp.isNumeric(newValue)) { this.settings.radius = parseInt(newValue); } break; } case 'backborder': { this.settings.scaleBorder = newValue; this.settings.hostObj.style.border = newValue; break; } case 'fromcolor': { this.settings.fromColor = newValue; break; } case 'tocolor': { this.settings.toColor = newValue; break; } case 'backcolor': { this.settings.backColor = newValue; this.settings.hostObj.style.background = newValue; break; } } } moveTo (top, left) { if (this.settings.isSelected === true) { this.setAttribute("left", left); this.setAttribute("top", top); } } move (borderBit, amount) { if (this.settings.isSelected === true) { let i = 0; switch (borderBit) { case "left": { i = parseInt(this.getAttribute("left")); i += amount; this.setAttribute("left", i); break; } case "top": { i = parseInt(this.getAttribute("top")); i += amount; this.setAttribute("top", i); break; } } if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } isSelected () { return this.settings.isSelected; } select () { this.settings.isSelected = true; this.settings.hostObj.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.settings.hostObj.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.hostObj.classList.add("ui-selected"); } else { this.settings.hostObj.classList.remove("ui-selected"); } } enableEdit () { this.settings.hostObj.style.pointerEvents = "auto"; this.settings.hostObj.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } disableEdit () { this.settings.hostObj.style.pointerEvents = "none"; this.settings.hostObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.valueRef.indexOf('[[') >= 0) { data.items.push({type: "value", value: this.settings.valueRef}); } else { this.settings.value = this.settings.valueRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.buildProgress(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "value": { this.settings.value = item.value; this.settings.valueRef = item.reference; this.settings.valueVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.buildProgress(); } } buildProgress() { let tmp = this.settings.fromColor; if (!fxApp.isEmpty(this.settings.toColor)) { tmp += ", " + this.settings.toColor; } else { tmp += ", " + this.settings.fromColor; } this.settings.hostObj.style.transform = "rotate(" + this.settings.rotate + "deg)"; this.settings.coverObj.style.left = "-100%"; this.settings.coverObj.style.background = "linear-gradient(to left, " + tmp + ")"; this.settings.coverObj.style.transition = "left " + tmp + "ms)"; this.settings.hostObj.style.borderRadius = this.settings.radius + "px"; this.settings.coverObj.style.borderRadius = this.settings.radius + "px"; this.updateProgress(); } updateProgress() { if (this.settings.value < this.settings.min) { this.settings.value = this.settings.min; } if (this.settings.value > this.settings.max) { this.settings.value = this.settings.max; } let v = ((this.settings.max - this.settings.min) - (this.settings.max - this.settings.value)) / (this.settings.max - this.settings.min); v = (v * 100) - 100; this.settings.coverObj.style.left = v + "%"; } setValue (vName, vVal) { if (this.settings.valueVar.toLowerCase().indexOf(vName) == 0) { if (!fxApp.isEmpty(vVal)) { this.settings.value = parseFloat(vVal); this.updateProgress(); } } else { this.resolveVars(); } } getProps() { let results = { objecttype: "ui-linearprogress", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), top: this.getAttribute("top"), left: this.getAttribute("left"), value: this.getAttribute("value"), min: this.getAttribute("min"), max: this.getAttribute("max"), backborder: this.getAttribute("backborder"), fromcolor: this.getAttribute("fromcolor"), tocolor: this.getAttribute("tocolor"), backcolor: this.getAttribute("backcolor"), rotate: this.getAttribute("rotate"), duration: this.getAttribute("duration"), radius: this.getAttribute("radius") } return results; } } window.customElements.define("ui-linearprogress", uiLinearProgress); export { uiLinearProgress } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiWebFrame extends HTMLElement { static get observedAttributes() { return ['id','width','height','top','left','url','borders']; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = ``; this.appendChild(uiTemplate.content); this.resolve = this.resolve.bind(this); this.setValue = this.setValue.bind(this); this.enableEdit = this.enableEdit.bind(this); this.disableEdit = this.disableEdit.bind(this); this.select = this.select.bind(this); this.isSelected = this.isSelected.bind(this); this.deselect = this.deselect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); this.move = this.move.bind(this); this.moveTo = this.moveTo.bind(this); this.settings = { hostObj: this.querySelector(".iframe-host"), connected: false, id: '', width: 0, height: 0, top: 0, left: 0, url: '', urlRef: '', urlVar: '' }; this._onClickHandler = (e) => { if (fxApp.designMode === true) { if (fxDesigner.ctrlActive || fxDesigner.shiftActive) { this.toggleSelect("ui-selected"); } else { fxDesigner.deselectAll(this.settings.id); this.select(); if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { callbackObj.doMessage("editItem~webframe~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.settings.connected = true; this.resolveVars(); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'type': { this.settings.type = newValue; break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.width = newValue + "px"; this.settings.width = parseInt(newValue); } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.height = newValue + "px"; this.settings.height = parseInt(newValue); } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.top = newValue + "px"; this.settings.top = parseInt(newValue); } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.left = newValue + "px"; this.settings.left = parseInt(newValue); } break; } case 'url': { this.settings.urlRef = newValue; break; } case 'borders': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.border = newValue; } break; } } } moveTo (top, left) { if (this.settings.isSelected === true) { this.setAttribute("left", left); this.setAttribute("top", top); } } move (borderBit, amount) { if (this.settings.isSelected === true) { let i = 0; switch (borderBit) { case "left": { i = parseInt(this.getAttribute("left")); i += amount; this.setAttribute("left", i); break; } case "top": { i = parseInt(this.getAttribute("top")); i += amount; this.setAttribute("top", i); break; } } if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } isSelected () { return this.settings.isSelected; } select () { this.settings.isSelected = true; this.settings.hostObj.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.settings.hostObj.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.hostObj.classList.add("ui-selected"); } else { this.settings.hostObj.classList.remove("ui-selected"); } } enableEdit () { this.settings.hostObj.style.pointerEvents = "auto"; this.settings.hostObj.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } disableEdit () { this.settings.hostObj.style.pointerEvents = "none"; this.settings.hostObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); } setValue (vName, vVal) { if (this.settings.urlVar.toLowerCase().indexOf(vName) >= 0) { this.settings.urlVar = vName; this.settings.url = vVal; this.buildWebFrame(); } else { this.resolveVars(); } } resolveVars() { let data = {clientname: fxApp.clientName, items: [] }; if (this.settings.urlRef.indexOf('[[') >= 0) { data.items.push({type: "url", value: this.settings.urlRef}); } else { this.settings.url = this.settings.urlRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.buildWebFrame(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "url": { this.settings.url = decodeURI(item.value).replaceAll(''','\''); this.settings.urlRef = item.reference; this.settings.urlVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.buildWebFrame(); } } buildWebFrame() { this.settings.hostObj.src = this.settings.url; } getProps() { let results = { objecttype: "ui-webframe", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), top: this.getAttribute("top"), left: this.getAttribute("left"), url: this.getAttribute("url"), borders: this.getAttribute("borders") }; return results; } } window.customElements.define("ui-webframe", uiWebFrame); export { uiWebFrame } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiPanel extends HTMLElement { static get observedAttributes() { return [ 'position', 'id','width','height','left','top','rotate','borderleft','borderright','bordertop','borderbottom','borderradii', 'backgroundcolorvar','backgroundcolor','backgroundtype','backgroundsteps','gradientdirection','backgroundimagevar','backgroundimage', 'backgroundsize','filter','innershadow','outershadow', 'readonly','statevar','activevalue','onbackgroundcolor','onbordercolor','onvisible', 'offbackgroundcolor','offbordercolor','offvisible' ]; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = `
`; this.appendChild(uiTemplate.content.cloneNode(true)); this.resolve = this.resolve.bind(this); this.setValue = this.setValue.bind(this); this.enableEdit = this.enableEdit.bind(this); this.disableEdit = this.disableEdit.bind(this); this.select = this.select.bind(this); this.isSelected = this.isSelected.bind(this); this.deselect = this.deselect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); this.move = this.move.bind(this); this.moveTo = this.moveTo.bind(this); this.settings = { id: '', readonly: false, panelObj: this.querySelector(".panel-object"), color: '', colorRef: '', colorVar: '', filter: '', backgroundColor: '', backgroundType: 'none', backgroundSteps: 0, backgroundImage: '', backgroundImageRef: '', backgroundImageVar: '', backgroundSize: 'cover', gradientDirection: '0', isSelected: false, onBackgroundColor: '', onBorderColor: '', onVisible: true, offBackgroundColor: '', offBorderColor: '', offVisible: true, state: '', stateVar: '', stateRef: '', matchMode: 'active', activeValue: fxApp.activeValues, }; this._onClickHandler = (e) => { if (fxApp.designMode === true) { if (fxDesigner.ctrlActive || fxDesigner.shiftActive) { this.toggleSelect("ui-selected"); } else { fxDesigner.deselectAll(this.settings.id); this.select(); if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { callbackObj.doMessage("editItem~panel~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.resolveVars(); if (fxApp.designMode === false) { this.settings.panelObj.style.pointerEvents = "auto"; this.addEventListener('click', this._onClickHandler, false); } } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { let shouldUpdate = false; switch (name.toLowerCase()) { case 'position': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.position = newValue; } else { this.settings.hostObj.style.position = 'absolute'; } break; } case 'readonly': { this.settings.readonly = (newValue.toLowerCase() == '1') ? true : false; break; } case 'id': { this.settings.id = newValue; break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.panelObj.style.width = newValue + "px"; } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.panelObj.style.height = newValue + "px"; } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.panelObj.style.left = newValue + "px"; } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.panelObj.style.top = newValue + "px"; } break; } case 'rotate': { if (fxApp.isNumeric(newValue)) { this.settings.panelObj.style.transform = "rotate(" + newValue + "deg)"; } break; } case 'borderleft': { // border-left = '1px solid rgba(0,0,255,1) if (!fxApp.isEmpty(newValue)) { this.settings.panelObj.style.borderLeft = newValue; } else { this.settings.panelObj.style.borderLeft = 'none'; } break; } case 'borderright': { if (!fxApp.isEmpty(newValue)) { this.settings.panelObj.style.borderRight = newValue; } else { this.settings.panelObj.style.borderRight = 'none'; } break; } case 'bordertop': { if (!fxApp.isEmpty(newValue)) { this.settings.panelObj.style.borderTop = newValue; } else { this.settings.panelObj.style.borderTop = 'none'; } break; } case 'borderbottom': { if (!fxApp.isEmpty(newValue)) { this.settings.panelObj.style.borderBottom = newValue; } else { this.settings.panelObj.style.borderBottom = 'none'; } break; } case 'borderradii': {// "tl tr br bl" if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 4) { this.settings.panelObj.style.borderRadius = r[0] + "px " + r[1] + "px " + r[2] + "px " + r[3] + "px"; } else { this.settings.panelObj.style.borderRadius = newValue + 'px'; } } else { this.settings.panelObj.style.borderRadius = '0 0 0 0'; } break; } case 'backgroundcolorvar': { this.settings.colorRef = newValue; break; } case 'backgroundcolor': {// rgba(0,0,0,1) this.settings.backgroundColor = newValue; shouldUpdate = true; break; } case 'backgroundtype': {// none,solid,image,linear,radial this.settings.backgroundType = newValue; shouldUpdate = true; break; } case 'backgroundsteps': {// 0,2,3,4 this.settings.backgroundSteps = parseInt(newValue); shouldUpdate = true; break; } case 'gradientdirection': {// 0 to 360 this.settings.gradientDirection = parseInt(newValue); shouldUpdate = true; break; } case 'backgroundimage': { this.settings.backgroundImage = newValue; shouldUpdate = true; break; } case 'backgroundsize': { if (!fxApp.isEmpty(newValue)) { this.settings.backgroundSize = newValue; shouldUpdate = true; } break; } case 'backgroundimagevar': { this.settings.backgroundImageRef = newValue; break; } case 'filter': { this.settings.filter = newValue; shouldUpdate = true; break; } case 'innershadow': { if (fxApp.isTrue(newValue) === true) { this.settings.panelObj.classList.add("shadowinner"); } break; } case 'outershadow': { switch (newValue.toLowerCase()) { case "none": { this.settings.panelObj.classList.remove("shadow-xsmall"); this.settings.panelObj.classList.remove("shadow-small"); this.settings.panelObj.classList.remove("shadow-medium"); this.settings.panelObj.classList.remove("shadow-large"); this.settings.panelObj.classList.remove("shadow-xlarge"); break; } case "xsmall": { this.settings.panelObj.classList.add("shadow-xsmall"); this.settings.panelObj.classList.remove("shadow-small"); this.settings.panelObj.classList.remove("shadow-medium"); this.settings.panelObj.classList.remove("shadow-large"); this.settings.panelObj.classList.remove("shadow-xlarge"); break; } case "small": { this.settings.panelObj.classList.remove("shadow-xsmall"); this.settings.panelObj.classList.add("shadow-small"); this.settings.panelObj.classList.remove("shadow-medium"); this.settings.panelObj.classList.remove("shadow-large"); this.settings.panelObj.classList.remove("shadow-xlarge"); break; } case "medium": { this.settings.panelObj.classList.remove("shadow-xsmall"); this.settings.panelObj.classList.remove("shadow-small"); this.settings.panelObj.classList.add("shadow-medium"); this.settings.panelObj.classList.remove("shadow-large"); this.settings.panelObj.classList.remove("shadow-xlarge"); break; } case "large": { this.settings.panelObj.classList.remove("shadow-xsmall"); this.settings.panelObj.classList.remove("shadow-small"); this.settings.panelObj.classList.remove("shadow-medium"); this.settings.panelObj.classList.add("shadow-large"); this.settings.panelObj.classList.remove("shadow-xlarge"); break; } case "xlarge": { this.settings.panelObj.classList.remove("shadow-xsmall"); this.settings.panelObj.classList.remove("shadow-small"); this.settings.panelObj.classList.remove("shadow-medium"); this.settings.panelObj.classList.remove("shadow-large"); this.settings.panelObj.classList.add("shadow-xlarge"); break; } default: { this.settings.panelObj.classList.remove("shadow-xsmall"); this.settings.panelObj.classList.remove("shadow-small"); this.settings.panelObj.classList.remove("shadow-medium"); this.settings.panelObj.classList.remove("shadow-large"); this.settings.panelObj.classList.remove("shadow-xlarge"); break; } } break; } case 'statevar': { if ((!fxApp.isEmpty(newValue)) && (fxApp.designMode === false)) { this.settings.panelObj.classList.add("hidden"); } this.settings.stateRef = newValue; break; } case 'activevalue': { if (!fxApp.isEmpty(newValue)) { this.settings.activeValue = ',' + newValue.toLowerCase() + ','; } else { this.settings.activeValue = fxApp.activeValues; } break; } case 'onbackgroundcolor': { this.settings.onBackgroundColor = newValue; break; } case 'onbordercolor': { this.settings.onBorderColor = newValue; break; } case 'onvisible': { this.settings.onVisible = (newValue.toLowerCase() == '1') ? true : false; break; } case 'offbackgroundcolor': { this.settings.offBackgroundColor = newValue; break; } case 'offbordercolor': { this.settings.offBorderColor = newValue; break; } case 'offvisible': { this.settings.offVisible = (newValue.toLowerCase() == '1') ? true : false; break; } } if (shouldUpdate == true) { //&& (designMode() === true)) { this.setBackground(); } } setBackground() { let hsla = []; let l1 = 0; let l2 = 0; let l3 = 0; let l4 = 0; let tmp = ''; switch (this.settings.backgroundType.toLowerCase()) { case 'none': { this.settings.panelObj.style.backgroundColor = 'transparent'; this.settings.panelObj.style.backgroundImage = 'none'; break; } case 'color': { this.settings.panelObj.style.backgroundColor = this.settings.backgroundColor; this.settings.panelObj.style.backgroundImage = 'none'; break; } case 'linear': { hsla = fxApp.RGBAtoHSLA(this.settings.backgroundColor); switch (this.settings.backgroundSteps) { case 0: case 1: { this.settings.panelObj.style.backgroundColor = this.settings.backgroundColor; this.settings.panelObj.style.backgroundImage = 'none'; break; } case 2: { this.settings.panelObj.style.backgroundColor = 'transparent'; l1 = hsla[2] * 0.66; l2 = hsla[2]; tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } case 3: { l1 = hsla[2] * 0.33; l2 = hsla[2]; l3 = hsla[2] * 1.33; if (l3 > 100) l3 = 100; this.settings.panelObj.style.backgroundColor = 'transparent'; tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } case 4: { l1 = hsla[2] * 0.25; l2 = hsla[2] * 0.75; l3 = hsla[2] * 1.25; l4 = hsla[2] * 1.50; if (l3 > 100) l3 = 100; if (l4 > 100) l4 = 100; this.settings.panelObj.style.backgroundColor = 'transparent'; tmp = 'linear-gradient(' + this.settings.gradientDirection + 'deg, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l4 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } } break; } case 'elipse': { hsla = fxApp.RGBAtoHSLA(this.settings.backgroundColor); switch (this.settings.backgroundSteps) { case 0: case 1: { this.settings.panelObj.style.backgroundColor = this.settings.backgroundColor; break; } case 2: { this.settings.panel.style.backgroundColor = 'transparent'; l1 = hsla[2]; l2 = hsla[2] * 0.66; tmp = 'radial-gradient(hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } case 3: { l1 = hsla[2] * 1.40; l2 = hsla[2]; l3 = hsla[2] * 0.66; if (l3 > 100) l3 = 100; this.settings.panelObj.style.backgroundColor = 'transparent'; tmp = 'radial-gradient(hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } case 4: { l1 = hsla[2] * 1.40; l2 = hsla[2] * 1.25; l3 = hsla[2] * 0.75; l4 = hsla[2] * 0.66; if (l3 > 100) l3 = 100; if (l4 > 100) l4 = 100; this.settings.panelObj.style.backgroundColor = 'transparent'; tmp = 'radial-gradient(hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l4 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } } break; } case 'circle': { hsla = fxApp.RGBAtoHSLA(this.settings.backgroundColor); switch (this.settings.backgroundSteps) { case 0: case 1: { this.settings.panel.style.backgroundColor = this.settings.backgroundColor; break; } case 2: { this.settings.panelObj.style.backgroundColor = 'transparent'; l1 = hsla[2]; l2 = hsla[2] * 0.66; // radial-gradient(circle, rgba(255, 144, 71, 1) 24% , transparent 100%); tmp = 'radial-gradient(circle, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + ') 24%, transparent 100%)'; this.settings.panelObj.style.backgroundImage = tmp; break; } case 3: { l1 = hsla[2] * 1.40; l2 = hsla[2]; l3 = hsla[2] * 0.66; if (l3 > 100) l3 = 100; this.settings.panelObj.style.backgroundColor = 'transparent'; tmp = 'radial-gradient(circle, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } case 4: { l1 = hsla[2] * 1.40; l2 = hsla[2] * 1.25; l3 = hsla[2] * 0.75; l4 = hsla[2] * 0.66; if (l3 > 100) l3 = 100; if (l4 > 100) l4 = 100; this.settings.panelObj.style.backgroundColor = 'transparent'; tmp = 'radial-gradient(circle, hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l1 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l2 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l3 + '%,' + hsla[3] + '), hsla(' + hsla[0] + ',' + hsla[1] + '%,' + l4 + '%,' + hsla[3] + '))'; this.settings.panelObj.style.backgroundImage = tmp; break; } } break; } case 'image': { if (!fxApp.isEmpty(this.settings.backgroundImage)) { this.settings.panelObj.style.backgroundColor = 'transparent'; this.settings.panelObj.style.backgroundImage = 'url(' + this.settings.backgroundImage + ')'; this.settings.panelObj.style.backgroundPosition = 'center center'; this.settings.panelObj.style.backgroundRepeat = 'no-repeat'; this.settings.panelObj.style.backgroundSize = this.settings.backgroundSize; } break; } } if (!fxApp.isEmpty(this.settings.filter)) { this.settings.panelObj.style.backdropFilter = this.settings.filter; this.settings.panelObj.style.webkitBackdropFilter = this.settings.filter; } else { this.settings.panelObj.style.backdropFilter = 'none'; this.settings.panelObj.style.webkitBackdropFilter = 'none'; } } moveTo (top, left) { if (this.settings.isSelected === true) { this.setAttribute("left", left); this.setAttribute("top", top); } } move (borderBit, amount) { if (this.settings.isSelected === true) { let i = 0; switch (borderBit) { case "left": { i = parseInt(this.getAttribute("left")); i += amount; this.setAttribute("left", i); break; } case "top": { i = parseInt(this.getAttribute("top")); i += amount; this.setAttribute("top", i); break; } } if (fxDesigner.getSelectedCount() === 1) { let l = this.getAttribute("left"); let t = this.getAttribute("top"); callbackObj.doMessage("updateXY~" + l + "~" + t); } } } isSelected () { return this.settings.isSelected; } select () { this.settings.isSelected = true; this.settings.panelObj.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.settings.panelObj.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.panelObj.classList.add("ui-selected"); } else { this.settings.panelObj.classList.remove("ui-selected"); } } enableEdit () { if (this.settings.readonly === false) { this.settings.panelObj.style.pointerEvents = "auto"; this.settings.panelObj.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } } disableEdit () { this.settings.panelObj.style.pointerEvents = "none"; this.settings.panelObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); this.removeEventListener('dblclick', this._onClickHandler, false); } resolveVars() { let data = { clientname: fxApp.clientName, items: [] }; if (this.settings.stateRef.toLowerCase().indexOf('[[') >= 0) { data.items.push({type: "state", value: this.settings.stateRef}); } else { this.settings.state = this.settings.stateRef; } if (this.settings.colorRef.indexOf('[[') >= 0) { data.items.push({type: "color", value: this.settings.colorRef}); } else { this.settings.color = this.settings.colorRef; } if (this.settings.backgroundImageRef.indexOf('[[') >= 0) { data.items.push({type: "image", value: this.settings.backgroundImageRef}); } else { this.settings.backgroundImage = this.settings.backgroundImageRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.setBackground(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "color": { this.settings.color = item.value; this.settings.backgroundColor = item.value; this.settings.colorRef = item.reference; this.settings.colorVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } case "image": { this.settings.backgroundImage = item.value; this.settings.backgroundImageRef = item.reference; this.settings.backgroundImageVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } case "state": { this.settings.state = item.value.toLowerCase(); this.settings.stateRef = item.reference; this.settings.stateVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setState(); break; } } }); this.setBackground(); } } setValue (vName, vVal) { if (!fxApp.isEmpty(this.settings.stateVar)) { if (this.settings.stateVar.toLowerCase().indexOf(vName) >= 0) { this.settings.state = vVal; this.setState(); return; } } if (!fxApp.isEmpty(this.settings.colorVar)) { if (this.settings.colorVar.toLowerCase().indexOf(vName) >= 0) { this.settings.backgroundColor = vVal; this.setBackground(); return; } } if (!fxApp.isEmpty(this.settings.imageVar)) { if (this.settings.imageVar.toLowerCase().indexOf(vName) >= 0) { this.settings.backgroundImage = vVal; this.setBackground(); return; } } this.resolveVars(); } setState () { if (!fxApp.isEmpty(this.settings.state)) { if (this.settings.matchMode == "active") { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { // then in active state this.setActiveState(); } else { this.setInactiveState(); } } } else { // state with no value this.setInactiveState(); } } setActiveState() { if (!fxApp.isEmpty(this.settings.onBackgroundColor)) { this.settings.backgroundColor = this.settings.onBackgroundColor; this.setBackground(); } if (!fxApp.isEmpty(this.settings.onBorderColor)) { this.settings.panelObj.style.borderColor = this.settings.onBorderColor; } if (fxApp.designMode === false) { if (this.settings.onVisible == true) { this.settings.panelObj.classList.remove("hidden"); } else { this.settings.panelObj.classList.add("hidden"); } } } setInactiveState() { if (!fxApp.isEmpty(this.settings.offBackgroundColor)) { this.settings.backgroundColor = this.settings.offBackgroundColor; this.setBackground(); } if (!fxApp.isEmpty(this.settings.offBorderColor)) { this.settings.panelObj.style.borderColor = this.settings.offBorderColor; } if (fxApp.designMode === false) { if (this.settings.offVisible == true) { this.settings.panelObj.classList.remove("hidden"); } else { this.settings.panelObj.classList.add("hidden"); } } } getProps() { let results = { objecttype: "ui-panel", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), left: this.getAttribute("left"), top: this.getAttribute("top"), rotate: this.getAttribute("rotate"), borderleft: this.getAttribute('borderleft'), borderright: this.getAttribute('borderright'), bordertop: this.getAttribute('bordertop'), borderbottom: this.getAttribute('borderbottom'), borderradii: this.getAttribute('borderradii'), backgroundcolorvar: this.getAttribute('backgroundcolorvar'), backgroundcolor: this.getAttribute('backgroundcolor'), backgroundsteps: this.getAttribute('backgroundsteps'), backgroundtype: this.getAttribute('backgroundtype'), backgroundimage: this.getAttribute('backgroundimage'), backgroundimagevar: this.getAttribute('backgroundimagevar'), backgroundsize: this.getAttribute('backgroundsize'), filter: this.getAttribute('filter'), gradientdirection: this.getAttribute('gradientdirection'), innershadow: this.getAttribute('innershadow'), outershadow: this.getAttribute('outershadow'), onbackgroundcolor: this.getAttribute('onbackgroundcolor'), onbordercolor: this.getAttribute('onbordercolor'), onvisible: this.getAttribute('onvisible'), offbackgroundcolor: this.getAttribute('offbackgroundcolor'), offbordercolor: this.getAttribute('offbordercolor'), offvisible: this.getAttribute('offvisible'), statevar: this.getAttribute('statevar'), activevalue: this.getAttribute('activevalue') }; return results; } } window.customElements.define("ui-panel", uiPanel); export { uiPanel } /* * ----------------------------------------------------------------------------- * webcomponents * Version: Production * https://www.allonis.com * © Copyright 2022 Ad Infinitum, Allonis LLC * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * ----------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ "use strict"; class uiOverlay extends HTMLElement { static get observedAttributes() { return [ 'index','content','statevar','visible', 'activevalue' ]; } constructor() { super(); this.resolve = this.resolve.bind(this); this.settings = { id: fxApp.guid(), connected: false, activeState: fxApp.activeValues, index: '', content: '', contentName: '', state: '', stateRef: '', stateVar: '', visible: '' }; } connectedCallback() { this.setAttribute("id", this.settings.id); this.settings.connected = true; // this.style.zIndex = this.settings.index + "000"; this.resolveVars(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'index': { this.settings.index = newValue; break; } case 'content': { this.settings.content = newValue; this.settings.id = newValue.toLowerCase().replace(".html",""); this.settings.contentName = this.settings.id; break; } case 'statevar': { this.settings.stateRef = newValue; break; } case 'visible': { this.settings.visible = newValue; break; } case 'activevalue': { if (!fxApp.isEmpty(newValue)) { this.settings.activeState = ',' + newValue + ','; } break; } } } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.stateRef.indexOf('[[') >= 0) { data.items.push({type: "state", value: this.settings.stateRef}); } else { this.settings.state = this.settings.stateRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.setContent(); this.setVisibility(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "state": { this.settings.state = item.value; this.settings.stateRef = item.reference; this.settings.stateVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.setContent(); this.setState(); } } setValue (vName, vVal) { if (this.settings.stateVar.toLowerCase().indexOf(vName) >= 0) { this.settings.state = vVal; this.setState(); } else { this.resolveVars(); } } setVisibility () { let vis = (this.settings.activeState.toLowerCase().indexOf(','+this.settings.visible.toLowerCase()+',') >= 0) ? true : false; if (vis === true) { this.classList.remove('hidden'); fxApp.doCommand("SetVariable|" + this.settings.contentName + "-visible-[[clientname]]~true"); } else { this.classList.add('hidden'); fxApp.doCommand("SetVariable|" + this.settings.contentName + "-visible-[[clientname]]~false"); } } setState () { if (!fxApp.isEmpty(this.settings.state)) { if (this.settings.activeState.toLowerCase().indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { this.classList.remove('hidden'); fxApp.doCommand("SetVariable|" + this.settings.contentName + "-visible-[[clientname]]~true"); } else { this.classList.add('hidden'); fxApp.doCommand("SetVariable|" + this.settings.contentName + "-visible-[[clientname]]~false"); } } } async getData(url) { const response = await fetch(url, { method: 'GET', cache: 'no-cache', headers: { 'Content-Type': 'application/json', 'clientname': fxApp.clientName }, }); return await response.text(); } async setContent() { if (!fxApp.isEmpty(this.settings.content)) { if (this.settings.content.indexOf(".html") < 0) { this.settings.content += ".html"; } const paths = window.location.pathname.split('/'); let proj = paths[1]; if (fxApp.isEmpty(proj)) { proj = localStorage.getItem("project"); } const url = '/api/getpage?project=' + proj + '&page=' + this.settings.content + "&client=" + fxApp.clientName; this.innerHTML = await this.getData(url); } } } window.customElements.define("ui-overlay", uiOverlay); export { uiOverlay }