/* * ----------------------------------------------------------------------------- * 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 uiEndlessList extends HTMLElement { static get observedAttributes() { return ['id','width','height','top','left','api','servercmd','imagewidth','imageheight','showtitle','showsubtitle','type', 'backgroundcolor','borderradii','filter','borders','fontfamily','fontweight','fontsize','fontcolor','labelpadding','pagesize', 'titlefamily','titleweight','titlesize','titlecolor','titlepadding', 'wrap']; } 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(".endless-list"), connected: false, dataSource: null, id: '', width: 0, height: 0, top: 0, left: 0, page: 1, pageSize: 0, eof: false, totalItems: 0, api: '', apiRef: '', apiVar: '', serverCmd: '', type: 'images', imageWidth: 150, imageHeight: 150, showTitle: false, showSubtitle: false, backgroundColor: '', borderRadii: '', filter: '', borders: '', fontFamily: '', fontWeight: '', fontSize: '', fontColor: '', labelPadding: '', titleFamily: '', titleWeight: '', titleSize: '', titleColor: '', titlePadding: '', wrap: 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); } } } e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { if (fxApp.designMode === true) { callbackObj.doMessage("editItem~endlesslist~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; this._onScrollHandler = (e) => { if (!this.settings.eof) { //let height = this.settings.hostObj.scrollHeight - $(this.settings.hostObj).height(); //let scroll = $(this.settings.hostObj).scrollTop(); let height = this.scrollHeight - $(this).height(); let scroll = $(this).scrollTop(); let delta = height - scroll; if (delta <= 50) { this.settings.page += 1; this.buildContent(); } } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.settings.connected = true; this.resolveVars(); //this.settings.hostObj.addEventListener('scroll', this._onScrollHandler, false); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.style.width = newValue + "px"; this.settings.width = parseInt(newValue); } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.style.height = newValue + "px"; this.settings.height = parseInt(newValue); } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.style.top = newValue + "px"; this.settings.top = parseInt(newValue); } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.style.left = newValue + "px"; this.settings.left = parseInt(newValue); } break; } case 'pagesize': { if (fxApp.isNumeric(newValue)) { this.settings.pageSize = parseInt(newValue); } break; } case 'api': { this.settings.apiRef = newValue; break; } case 'servercmd': { this.settings.serverCmd = newValue; break; } case 'imagewidth': { if (fxApp.isNumeric(newValue)) { this.settings.imageWidth = parseInt(newValue); } break; } case 'imageheight': { if (fxApp.isNumeric(newValue)) { this.settings.imageHeight = parseInt(newValue); } break; } case 'wrap': { this.settings.wrap = (newValue == "1") ? true : false; //if (this.settings.wrap === true) { //this.settings.hostObj.style.flexWrap = "wrap"; //this.settings.hostObj.style.overflowX = "clip"; //this.settings.hostObj.style.overflowY = "auto"; //} else { //this.settings.hostObj.style.flexWrap = "nowrap"; //this.settings.hostObj.style.overflowX = "auto"; //this.settings.hostObj.style.overflowY = "clip"; //} if (this.settings.wrap === true) { this.style.flexWrap = "wrap"; this.style.overflowX = "clip"; this.style.overflowY = "auto"; } else { this.style.flexWrap = "nowrap"; this.style.overflowX = "auto"; this.style.overflowY = "clip"; } break; } case 'showtitle': { this.settings.showTitle = (newValue == "1") ? true : false; break; } case 'showsubtitle': { this.settings.showSubtitle = (newValue == "1") ? true : false; break; } case 'type': { if (!fxApp.isEmpty(newValue)) { this.settings.type = newValue.toLowerCase(); } break; } case 'backgroundcolor': { if (!fxApp.isEmpty(newValue)) { this.settings.backgroundColor = newValue; } break; } case 'borderradii': { if (!fxApp.isEmpty(newValue)) { this.settings.borderRadii = newValue; } break; } case 'filter': { if (!fxApp.isEmpty(newValue)) { this.settings.filter = newValue; } break; } case 'borders': { if (!fxApp.isEmpty(newValue)) { this.settings.borders = newValue; } break; } case 'fontfamily': { if (!fxApp.isEmpty(newValue)) { this.settings.fontFamily = newValue; } break; } case 'fontweight': { if (!fxApp.isEmpty(newValue)) { this.settings.fontWeight = newValue; } break; } case 'fontsize': { if (!fxApp.isEmpty(newValue)) { this.settings.fontSize = newValue; } break; } case 'fontcolor': { if (!fxApp.isEmpty(newValue)) { this.settings.fontColor = newValue; } break; } case 'labelpadding': { if (!fxApp.isEmpty(newValue)) { this.settings.labelPadding = newValue; } break; } case 'titlefamily': { if (!fxApp.isEmpty(newValue)) { this.settings.titleFamily = newValue; } break; } case 'titleweight': { if (!fxApp.isEmpty(newValue)) { this.settings.titleWeight = newValue; } break; } case 'titlesize': { if (!fxApp.isEmpty(newValue)) { this.settings.titleSize = newValue; } break; } case 'titlecolor': { if (!fxApp.isEmpty(newValue)) { this.settings.titleColor = newValue; } break; } case 'titlepadding': { if (!fxApp.isEmpty(newValue)) { this.settings.titlePadding = 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.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.classList.add("ui-selected"); } else { this.classList.remove("ui-selected"); } } enableEdit () { this.style.border = "1px solid cornflowerblue"; this.style.pointerEvents = "auto"; this.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } disableEdit () { this.style.pointerEvents = "none"; this.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); } setValue (vName, vVal) { if (!fxApp.isEmpty(vVal)) { this.resolveVars(); } } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.apiRef.indexOf('[[') >= 0) { data.items.push({type: "api", value: this.settings.apiRef}); } else { this.settings.api = this.settings.apiRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.buildContent(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "api": { this.settings.api = decodeURI(item.value).replaceAll(''','\''); this.settings.apiRef = item.reference; this.settings.apiVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.settings.page = 1; //$(this.settings.hostObj).empty(); $(this).empty(); this.buildContent(); } } async buildContent() { switch (this.settings.type.toLowerCase()) { case "cameras": { const res = await fetch(this.settings.api); const data = await (res.json()); this.settings.eof = true; data.forEach(item => { let scmd = this.settings.serverCmd.replaceAll("[[value]]",item.deviceID); let listTemplate = `
`; if (this.settings.showTitle === true) { listTemplate += `

` + item.name + `

`; } listTemplate += `
`; //this.settings.hostObj.insertAdjacentHTML('beforeend', listTemplate); this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "users": { this.settings.eof = true; const res = await fetch(this.settings.api); const data = await (res.json()); data.forEach(item => { let w = this.settings.imageWidth * 0.6; let scmd = this.settings.serverCmd.replaceAll("[[value]]",item.username); let listTemplate = `
`; listTemplate += `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "rooms": { this.settings.eof = true; const res = await fetch(this.settings.api); const data = await (res.json()); data.items.forEach(item => { let w = this.settings.imageWidth * 0.6; let scmd = this.settings.serverCmd.replaceAll("[[value]]",item.name); let listTemplate = `
`; listTemplate += `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "images": { this.settings.eof = true; const res = await fetch(this.settings.api); const data = await (res.json()); data.forEach(item => { let listTemplate = `
`; if (this.settings.showTitle === true) { listTemplate += `

` + item.title + `

`; } if (this.settings.showSubtitle === true) { listTemplate += `

` + item.subtitle + `

`; } listTemplate += `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "media": { this.settings.eof = true; const res = await fetch(this.settings.api); const data = await (res.json()); data.forEach(item => { let listTemplate = `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "tvfavs": { const res = await fetch(this.settings.api); const data = await (res.json()); this.settings.eof = true; data.forEach(item => { let listTemplate = `
`; if (this.settings.showTitle === true) { listTemplate += `

` + item.name + `

`; } listTemplate += `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "tvgrid": { const res = await fetch(this.settings.api); const data = await (res.json()); this.settings.eof = true; data.forEach(item => { let listTemplate = `
`; listTemplate += `
` + item.voutname + ` – ` + item.devname + `
`; listTemplate += `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "sources": { const res = await fetch(this.settings.api); const data = await (res.json()); this.settings.eof = true; data.forEach(item => { let im = this.settings.imageWidth * 0.62; let lft = ((this.settings.imageWidth - im) / 2) + 1; const cmd = this.settings.serverCmd.replaceAll("[[value]]", item.macro); let listTemplate = `
`; listTemplate += ``; listTemplate += ``; listTemplate += `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "applets": case "drivers": { const res = await fetch(this.settings.api); const data = await (res.json()); this.settings.eof = true; data.forEach(item => { let listTemplate = `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } case "templates": { const res = await fetch(this.settings.api); const data = await (res.json()); this.settings.eof = true; data.forEach(item => { let listTemplate = `
`; this.insertAdjacentHTML('beforeend', listTemplate); }); break; } } } getProps() { let results = { objecttype: "endlesslist", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), top: this.getAttribute("top"), left: this.getAttribute("left"), api: this.getAttribute("api"), pagesize: this.getAttribute("pagesize"), servercmd: this.getAttribute("servercmd"), imagewidth: this.getAttribute("imagewidth"), imageheight: this.getAttribute("imageheight"), showtitle: this.getAttribute("showtitle"), showsubtitle: this.getAttribute("showsubtitle"), type: this.getAttribute("type"), backgroundcolor: this.getAttribute("backgroundcolor"), borderradii: this.getAttribute("borderradii"), filter: this.getAttribute("filter"), borders: this.getAttribute("borders"), fontfamily: this.getAttribute("fontfamily"), fontweight: this.getAttribute("fontweight"), fontsize: this.getAttribute("fontsize"), fontcolor: this.getAttribute("fontcolor"), labelpadding: this.getAttribute("labelpadding"), titlefamily: this.getAttribute("titlefamily"), titleweight: this.getAttribute("titleweight"), titlesize: this.getAttribute("titlesize"), titlecolor: this.getAttribute("titlecolor"), titlepadding: this.getAttribute("titlepadding"), wrap: this.getAttribute("wrap") }; return results; } } window.customElements.define("ui-endlesslist", uiEndlessList); export {uiEndlessList } /* * ----------------------------------------------------------------------------- * 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 uiTVGuide extends HTMLElement { static get observedAttributes() { return ['id','width','height','left','top','api', 'guidetype', 'tuner']; } 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 = { isSelected: false, hostObj: this.querySelector(".tvguide-host"), id: '', api: '', apiRef: '', apiVar: '', vertical: true, horizontal: true, guideType: 'full', tuner: 'AV' }; 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~tvguide~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; this._onScrollHandler = (e) => { this.settings.hostObj.classList.remove("noscroller"); clearTimeout(this.settings.timer); this.settings.timer = setTimeout(() => { this.settings.hostObj.classList.add("noscroller"); }, 500); e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { if (this.settings.vertical === true) { this.settings.hostObj.style.overflowY = "scroll"; } if (this.settings.horizontal === true) { this.settings.hostObj.style.overflowX = "scroll"; } //this.settings.hostObj.addEventListener('scroll', this._onScrollHandler, false); 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"; } 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 'api': { this.settings.apiRef = newValue; break; } case 'guidetype': { this.settings.guideType = newValue; break; } case 'tuner': { this.settings.tuner = 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.apiRef.indexOf('[[') >= 0) { data.items.push({type: "api", value: this.settings.apiRef}); } else { this.settings.api = this.settings.apiRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.buildContent(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "api": { this.settings.api = item.value; this.settings.apiRef = item.reference; this.settings.apiVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.buildContent(); } } buildContent() { let _self=this; if (fxApp.designMode === true) { this.settings.hostObj.style.border = "1px solid cornflowerblue"; this.settings.hostObj.style.backgroundImage = "url('/images/testpattern.png')"; this.settings.hostObj.style.backgroundSize = "100% 100%"; this.settings.hostObj.innerHTML = "
TV Guide
" return; } if (!fxApp.isEmpty(this.settings.api)) { $.ajax({ type: "GET", url: this.settings.api, data: {client: fxApp.clientName }, success: function (data) { let guide = '
  •  
    • '; let _lastchan = 'xyzzx'; data.forEach(item => { if (item.channel != "") { if (item.icon == "") { item.icon = "/images/empty.png"; } let compareChan = item.channel; if (_self.settings.guideType == "lite") { compareChan = item.callsign; } if (_lastchan != compareChan) { guide += '
  • '; guide += '
    '; if (_self.settings.guideType != 'lite') { guide += item.channel + ' - '; } guide += item.callsign.toUpperCase().replace(/-HD/gi,'').replace(/(HD$)/,'') + '
    '; if (_self.settings.guideType != 'lite') { guide += '
    '; } guide += '
    • '; _lastchan = item.channel; if (_self.settings.guideType == "lite") { _lastchan = item.callsign; } } } }); guide += "
"; guide += '
  • '; _lastchan = ''; let cmd = ''; let w = 0; let bgcolor = "bg-bluegrey-900"; data.forEach(item => { switch (item.category.toLowerCase()) { // case "variety": {break;} // case "true crime": {break;} // case "travel": {break;} // case "thanksgiving": {break;} // case "telethon": {break;} // case "tba": {break;} // case "talk shows": {break;} case "sports": { bgcolor = "bg-deeppurple-900" break; } // case "specials": {break;} // case "soaps": {break;} // case "sitcom": {break;} // case "short film": {break;} // case "shopping": {break;} // case "science": {break;} // case "sci-fi": {break;} // case "religious": {break;} // case "regular": {break;} // case "reality tv": {break;} // case "political": {break;} // case "performing arts": {break;} // case "paranormal": {break;} // case "paid program": {break;} // case "news magazine": {break;} case "news": { bgcolor = "bg-cyan-900"; break; } // case "new age": {break;} case "music": { bgcolor = "bg-deeporange-900"; break; } case "movie": { bgcolor = "bg-pink-900"; break; } case "movies": { bgcolor = "bg-pink-900"; break; } // case "local": {break;} // case "lifestyle": {break;} // case "legal": {break;} // case "instructional": {break;} // case "home": {break;} // case "hobbies & crafts": {break;} // case "history": {break;} // case "health": {break;} // case "garden": {break;} // case "game shows": {break;} // case "food": {break;} // case "financial": {break;} // case "fashion": {break;} // case "environmental": {break;} // case "drama": {break;} // case "documentary": {break;} // case "docu-Series": {break;} // case "discussion": {break;} // case "current affairs": {break;} // case "cultural magazine": {break;} // case "computers & technologies": {break;} // case "comedy": {break;} // case "christmas": {break;} // case "children": {break;} // case "business": {break;} // case "biography": {break;} // case "awards": {break;} // case "automotive": {break;} // case "animated": {break;} // case "animals": {break;} // case "adult": {break;} case "header": { bgcolor = "bg-teal-900"; break; } default: { bgcolor = "bg-bluegrey-900"; break; } } if (item.title.toLowerCase() === "off air") { item.title = ''; bgcolor = "bg-black"; } if (_lastchan != item.channel) { guide += '
  • '; _lastchan = item.channel; cmd = "fxApp.doCommand(`av|[[active_device_[[clientname]]]]~tune~" + item.channel + '`)'; switch (_self.settings.tuner.toLowerCase()) { case "mytv": { cmd = "fxApp.doCommand(`mytv|tune~[[signage_activeplayer_[[clientname]]]]~" + item.channel + '`)'; break; } } } else { let ttl = item.title; if (!fxApp.isEmpty(item.subTitle)) { ttl += " - " + item.subTitle; } cmd = 'fxApp.schedule(`' + item.channel + '`,`' + item.callsign + '`,`' + ttl + '`,`' + item.localDate + '`,`' + item.localTime + '`)'; } w = item.duration / 10; guide += '
    ' + item.title; if (!fxApp.isEmpty(item.subTitle)) { guide += " – " + item.subTitle; } guide += '
    '; }); guide += '
'; _self.settings.hostObj.innerHTML = guide; } }); } } setValue (vName, vVal) { if (this.settings.apiVar.toLowerCase().indexOf(vName) == 0) { this.settings.api = vVal; this.buildContent(); } else { this.resolveVars(); } } getProps() { let results = { objecttype: "ui-tvguide", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), left: this.getAttribute("left"), top: this.getAttribute("top"), api: this.getAttribute("api"), guidetype: this.getAttribute("guidetype"), tuner: this.getAttribute("tuner") }; return results; } } window.customElements.define("ui-tvguide", uiTVGuide); export { uiTVGuide } /* * ----------------------------------------------------------------------------- * 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 uiRTSPCamera extends HTMLElement { static get observedAttributes() { return [ 'id','position','height','width','top','left','camera', 'borders', 'borderradii', 'shadow', 'clientcmd', 'servercmd', 'streamtype' ]; } 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 = { connected: false, videoObj: this.querySelector(".webrtc-video"), id: '', index: '', left: 0, top: 0, width: 0, height: 0, cameraUrl: '', cameraRef: '', cameraVal: '', cameraVar: '', clientCmd: '', serverCmd: '', streamType: 'webrtc', webrtc: null, webrtcSendChannel: null, mseQueue: [], mse: null, msews: null, mseSourceBuffer: {}, mseStreamingStarted: false, videoSound: false, stopping: false, msePlayer: null, }; 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 (!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~ui-rtspcamera~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }); } connectedCallback() { this.settings.connected = true; if (!fxApp.isEmpty(this.settings.clientCmd) || !fxApp.isEmpty(this.settings.serverCmd)) { this.enableClick(); } else { this.classList.add("noclicks"); this.classList.remove("ripple"); } this.resolveVars(); } disconnectedCallback() { this.stop(); $(this).empty(); $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'camera': { this.settings.cameraRef = newValue; break; } case 'id': { this.settings.id = newValue; break; } case 'position': { if (!fxApp.isEmpty(newValue)) { this.style.position = newValue; } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.left = parseInt(newValue); this.style.left = newValue + "px"; } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.top = parseInt(newValue); this.style.top = newValue + "px"; } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.width = parseInt(newValue); this.style.width = newValue + "px"; } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.height = parseInt(newValue); this.style.height = newValue + "px"; } break; } case 'streamtype': { this.settings.streamType = newValue.toLowerCase(); break; } case 'borders': { this.style.border = newValue; break; } case 'borderradii': { if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 4) { this.style.borderRadius = r[0] + "px " + r[1] + "px " + r[2] + "px " + r[3] + "px"; } else { this.style.borderRadius = newValue + 'px'; } } else { this.style.borderRadius = '0 0 0 0'; } break; } case 'shadow': { switch (newValue.toLowerCase()) { case "none": { this.classList.remove("shadow-xsmall"); this.classList.remove("shadow-small"); this.classList.remove("shadow-medium"); this.classList.remove("shadow-large"); this.classList.remove("shadow-xlarge"); break; } case "xsmall": { this.classList.add("shadow-xsmall"); this.classList.remove("shadow-small"); this.classList.remove("shadow-medium"); this.classList.remove("shadow-large"); this.classList.remove("shadow-xlarge"); break; } case "small": { this.classList.remove("shadow-xsmall"); this.classList.add("shadow-small"); this.classList.remove("shadow-medium"); this.classList.remove("shadow-large"); this.classList.remove("shadow-xlarge"); break; } case "medium": { this.classList.remove("shadow-xsmall"); this.classList.remove("shadow-small"); this.classList.add("shadow-medium"); this.classList.remove("shadow-large"); this.classList.remove("shadow-xlarge"); break; } case "large": { this.classList.remove("shadow-xsmall"); this.classList.remove("shadow-small"); this.classList.remove("shadow-medium"); this.classList.add("shadow-large"); this.classList.remove("shadow-xlarge"); break; } case "xlarge": { this.classList.remove("shadow-xsmall"); this.classList.remove("shadow-small"); this.classList.remove("shadow-medium"); this.classList.remove("shadow-large"); this.classList.add("shadow-xlarge"); break; } default: { this.classList.remove("shadow-xsmall"); this.classList.remove("shadow-small"); this.classList.remove("shadow-medium"); this.classList.remove("shadow-large"); this.classList.remove("shadow-xlarge"); break; } } 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.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.classList.add("ui-selected"); } else { this.classList.remove("ui-selected"); } } enableClick () { this.classList.remove("noclicks"); this.style.pointerEvents = "auto"; this.addEventListener('click', this._onClickHandler, false); } enableEdit () { this.style.pointerEvents = "auto"; this.classList.add("ui-draggable"); this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } disableEdit () { this.style.pointerEvents = "none"; this.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); this.removeEventListener('dblclick', this._onClickHandler, false); } setValue (vName, vVal) { this.resolveVars(); } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.cameraRef.indexOf('[[') >= 0) { data.items.push({type: "camera", value: this.settings.cameraRef}); } else { this.settings.cameraUrl = this.settings.cameraRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.buildPlayer(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "camera": { this.settings.cameraUrl = item.value; this.settings.cameraRef = item.reference; this.settings.cameraVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.buildPlayer(); } } async startWebRtc (videoEl, url) { if (this.settings.stopping === true) { return; } $(videoEl).stop(); this.settings.webrtc = new RTCPeerConnection({ iceServers: [{ urls: ['stun:stun.l.google.com:19302'] }], sdpSemantics: 'unified-plan' }); this.settings.webrtc.ontrack = (event) => { videoEl.srcObject = event.streams[0]; videoEl.play(); }; let _webrtc = this.settings.webrtc; this.settings.webrtc.addTransceiver('video', { direction: 'sendrecv' }) this.settings.webrtc.onnegotiationneeded = async function handleNegotiationNeeded () { const offer = await _webrtc.createOffer() await _webrtc.setLocalDescription(offer) fetch(url, { method: 'POST', body: new URLSearchParams({ data: btoa(_webrtc.localDescription.sdp) }) }) .then(response => response.text()) .then(data => { try { _webrtc.setRemoteDescription( new RTCSessionDescription({ type: 'answer', sdp: atob(data) }) ) } catch (e) { console.warn(e) } }) } this.settings.webrtcSendChannel = this.settings.webrtc.createDataChannel('rtsptowebSendChannel') this.settings.webrtcSendChannel.onopen = (event) => { this.settings.webrtcSendChannel.send('ping') } this.settings.webrtcSendChannel.onclose = (_event) => { this.startWebRtc(videoEl, url) } this.settings.webrtcSendChannel.onmessage = event => console.log(event.data) } stopMSE() { if (this.settings.msews != null) { if ((this.settings.msews.readyState === 0) || (this.settings.msews.readyState === 1)) { // 0=connecting 1=open 2=closing 3=closed this.settings.msews.close(); } } this.settings.msews = null; this.settings.mse = null; this.settings.mseSourceBuffer = null; this.settings.mseStreamingStarted = false, this.settings.videoSound = false; } startMSE(videoEl, url) { this.stopMSE(); let _self = this; this.settings.mse = new MediaSource(); videoEl.src = window.URL.createObjectURL(this.settings.mse); this.settings.mse.addEventListener('sourceopen', () => { this.settings.msews = new WebSocket(url); this.settings.msews.binaryType = "arraybuffer"; this.settings.msews.onopen = () => { console.log("ws opened"); } this.settings.msews.onclose = () => { console.log("ws closed"); } this.settings.msews.onmessage = (event) => { let data = new Uint8Array(event.data); let mimeCodec = null; if (data[0] == 9) { let decoded_arr = data.slice(1); if (window.TextDecoder) { mimeCodec = new TextDecoder("utf-8").decode(decoded_arr); } else { mimeCodec = Utf8ArrayToStr(decoded_arr); } if(mimeCodec.indexOf(',')>0){ this.settings.videoSound=true; } this.settings.mseSourceBuffer = this.settings.mse.addSourceBuffer('video/mp4; codecs="' + mimeCodec + '"'); this.settings.mseSourceBuffer.mode = "segments" this.settings.mseSourceBuffer.addEventListener("updateend", this.pushPacket(_self)); } else { if (this.settings.stopping === true) { this.settings.msews.close(); } else { this.readPacket(event.data); } } }; }, false); } pushPacket(self) { if (self.settings.stopping === true) { return; } let packet = null; if (!self.settings.mseSourceBuffer.updating) { if (self.settings.mseQueue.length > 0) { packet = self.settings.mseQueue.shift(); self.settings.mseSourceBuffer.appendBuffer(packet); } else { self.settings.mseStreamingStarted = false; } } if (self.settings.videoObj.buffered.length > 0) { if (typeof document.hidden !== "undefined" && document.hidden && !self.settings.videoSound) { self.settings.videoObj.currentTime = self.settings.videoObj.buffered.end((self.settings.videoObj.buffered.length - 1)) - 0.5; } } } readPacket(packet) { if (this.settings.stopping === true) { return; } if (!this.settings.mseStreamingStarted) { this.settings.mseSourceBuffer.appendBuffer(packet); this.settings.mseStreamingStarted = true; return; } this.settings.mseQueue.push(packet); if (!this.settings.mseSourceBuffer.updating) { this.pushPacket(this); } } stop() { try { this.settings.stopping === true; $(this.settings.videoObj).pause(); $(this.settings.videoObj).src = ''; $(this.settings.videoObj).removeAttribute('src'); $(this.settings.videoObj).load(); switch (this.settings.streamType) { case "webrtc": { this.settings.webrtc.close(); this.settings.webrtc = null; break; } case "mse": { this.stopMSE(); break; } } } catch {}; this.settings.stopping === false; } async buildPlayer() { console.log(this.settings); if (fxApp.designMode === false) { if (fxApp.isEmpty(this.settings.cameraUrl)) { this.style.backgroundImage = "url('/images/testpattern.png')"; this.style.backgroundSize = "100% 100%"; this.innerHTML = "
RTSP Camera
" return; } this.stop(); switch (this.settings.streamType) { case "webrtc": { this.startWebRtc(this.settings.videoObj, this.settings.cameraUrl); break; } case "mse": { this.startMSE(this.settings.videoObj, this.settings.cameraUrl); break; } case "demo": { this.style.backgroundImage = "url('/images/testpattern.png')"; this.style.backgroundSize = "100% 100%"; this.innerHTML = "
RTSP Camera
" } } } else { this.style.border = "1px solid cornflowerblue"; this.style.backgroundImage = "url('/images/testpattern.png')"; this.style.backgroundSize = "100% 100%"; this.innerHTML = "
RTSP Camera
" } } getProps() { let results = { objecttype: "ui-rtspcamera", id: this.getAttribute("id"), index: this.getAttribute("index"), left: this.getAttribute("left"), top: this.getAttribute("top"), width: this.getAttribute("width"), height: this.getAttribute("height"), borders: this.getAttribute("borders"), borderradii: this.getAttribute("borderradii"), shadow: this.getAttribute("shadow"), camera: this.getAttribute("camera"), streamtype: this.getAttribute("streamtype"), clientcmd: this.getAttribute("clientcmd"), servercmd: this.getAttribute("servercmd") }; return results; } } window.customElements.define("ui-rtspcamera", uiRTSPCamera); export { uiRTSPCamera } /* * ----------------------------------------------------------------------------- * 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 uiScroller extends HTMLElement { static get observedAttributes() { return ['id','top','left','width','height','borderradii','borders','onbordercolor','offbordercolor','fontfamily','fontsize','fontweight', 'fontstyle','texttransform','labelcolor','onlabelcolor','offlabelcolor','backgroundcolor','onbackgroundcolor','offbackgroundcolor', 'trackstartcolor','trackendcolor','pagesize','theme','showtitles','showscale','api','servercmd', 'size']; } constructor() { super(); const uiTemplate = document.createElement('template'); uiTemplate.innerHTML = `
    `; this.appendChild(uiTemplate.content.cloneNode(true)); this.settings = { connected: false, scrollerObj: this.querySelector(".scroller-object"), itemsObj: this.querySelector(".scroller-items"), contentObj: null, isSelected: false, timer: 0, id: '', top: 0, left: 0, width: 0, height: 0, borderradii: '', borders: '', onbordercolor: '', offbordercolor: '', transparent: '', fontfamily: '', fontsize: '', fontweight: '', fontstyle: '', texttransform: '', icon: '', onicon: '', officon: '', label: '', onlabel: '', offlabel: '', labelcolor: '', onlabelcolor: '', offlabelcolor: '', backgroundcolor: '', onbackgroundcolor: '', offbackgroundcolor: '', trackstartcolor: '', trackendcolor: '', showscale: '0', page: 0, pagesize: 500, theme: '', showtitles: '', api: '', apiRef: '', apiVar: '', servercmd:'', size: 'small', eof: true, serverCmd: '', clientCmd: '', buildTimer: null }; 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.reloadContent = this.reloadContent.bind(this); 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 (!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~scroller~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; this._onScrollHandler = (e) => { this.settings.scrollerObj.classList.remove("noscroller"); if (!this.settings.eof) { let height = this.settings.scrollerObj.scrollHeight - $(this.settings.scrollerObj).height(); let scroll = $(this.settings.scrollerObj).scrollTop(); let delta = height - scroll; if (delta <= 50) { this.settings.page += 1; this.buildContent(); } } clearTimeout(this.settings.timer); this.settings.timer = setTimeout(() => { this.settings.scrollerObj.classList.add("noscroller"); }, 500); e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.settings.connected = true; this.resolveVars(); //this.settings.scrollerObj.addEventListener('scroll', this._onScrollHandler, false); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.top = parseInt(newValue); this.settings.scrollerObj.style.top = newValue + "px"; } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.left = parseInt(newValue); this.settings.scrollerObj.style.left = newValue + "px"; } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.width = parseInt(newValue); this.settings.scrollerObj.style.width = newValue + "px"; } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.height = parseInt(newValue); this.settings.scrollerObj.style.height = newValue + "px"; } break; } case 'borderradii': { const parts = newValue.split(' '); if (parts.length == 4) { this.settings.borderradii = parts[0] + "px " + parts[1] + "px " + parts[2] + "px " + parts[3] + "px"; } break; } case 'size': { if (!fxApp.isEmpty(newValue)) { this.settings.size = newValue.toLowerCase(); } break; } case 'borders': { this.settings.borders = newValue; break; } case 'onbordercolor': { this.settings.onbordercolor = newValue; break; } case 'offbordercolor': { this.settings.offbordercolor = newValue; break; } case 'fontfamily': { this.settings.fontfamily = newValue; break; } case 'fontsize': { this.settings.fontsize = newValue; break; } case 'fontweight': { this.settings.fontweight = newValue; break; } case 'fontstyle': { this.settings.fontstyle = newValue; break; } case 'texttransform': { this.settings.texttransform = newValue; break; } case 'icon': { this.settings.icon = newValue; break; } case 'onicon': { this.settings.onicon = newValue; break; } case 'officon': { this.settings.officon = newValue; break; } case 'label': { this.settings.label = newValue; break; } case 'onlabel': { this.settings.onlabel = newValue; break; } case 'offlabel': { this.settings.offlabel = newValue; break; } case 'labelcolor': { this.settings.labelcolor = newValue; break; } case 'onlabelcolor': { this.settings.onlabelcolor = newValue; break; } case 'offlabelcolor': { this.settings.offlabelcolor = newValue; break; } case 'backgroundcolor': { this.settings.backgroundcolor = newValue; break; } case 'onbackgroundcolor': { this.settings.onbackgroundcolor = newValue; break; } case 'offbackgroundcolor': { this.settings.offbackgroundcolor = newValue; break; } case 'trackstartcolor': { this.settings.trackstartcolor = newValue; break; } case 'trackendcolor': { this.settings.trackendcolor = newValue; break; } case 'pagesize': { if (fxApp.isNumeric(newValue)) { this.settings.pagesize = parseInt(newValue) * 50; } break; } case 'theme': { this.settings.theme = newValue; break; } case 'showtitles': { this.settings.showtitles = newValue; break; } case 'showscale': { this.settings.showscale = newValue; break; } case 'api': { this.settings.apiRef = 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.scrollerObj.classList.add("ui-selected"); } deselect () { this.settings.isSelected = false; this.settings.scrollerObj.classList.remove("ui-selected"); } toggleSelect () { this.settings.isSelected = !this.settings.isSelected; if (this.settings.isSelected === true) { this.settings.scrollerObj.classList.add("ui-selected"); } else { this.settings.scrollerObj.classList.remove("ui-selected"); } } enableClick () { this.settings.scrollerObj.style.pointerEvents = "auto"; this.addEventListener('click', this._onClickHandler, false); } enableEdit () { this.settings.scrollerObj.style.pointerEvents = "auto"; this.settings.scrollerObj.classList.add("ui-draggable"); this.settings.scrollerObj.style.border = "1px solid cornflowerblue"; this.addEventListener('click', this._onClickHandler, false); this.addEventListener('dblclick', this._onDblClickHandler, false); } disableEdit () { this.settings.scrollerObj.style.pointerEvents = "none"; this.settings.scrollerObj.classList.remove("ui-draggable"); this.removeEventListener('click', this._onClickHandler, false); this.removeEventListener('dblclick', this._onClickHandler, false); } getProps() { let results = { objecttype: "ui-scroller", id: this.getAttribute("id"), top: this.getAttribute("top"), left: this.getAttribute("left"), width: this.getAttribute("width"), height: this.getAttribute("height"), borderradii: this.getAttribute("borderradii"), borders: this.getAttribute("borders"), onbordercolor: this.getAttribute("onbordercolor"), offbordercolor: this.getAttribute("offbordercolor"), fontfamily: this.getAttribute("fontfamily"), fontsize: this.getAttribute("fontsize"), fontweight: this.getAttribute("fontweight"), textransform: this.getAttribute("textransform"), labelcolor: this.getAttribute("labelcolor"), onlabelcolor: this.getAttribute("onlabelcolor"), offlabelcolor: this.getAttribute("offlabelcolor"), backgroundcolor: this.getAttribute("backgroundcolor"), onbackgroundcolor: this.getAttribute("onbackgroundcolor"), offbackgroundcolor: this.getAttribute("offbackgroundcolor"), texttransform: this.getAttribute("texttransform"), trackstartcolor: this.getAttribute("trackstartcolor"), trackendcolor: this.getAttribute("trackendcolor"), showscale: this.getAttribute("showscale"), pagesize: this.getAttribute("pagesize"), theme: this.getAttribute("theme"), showtitles: this.getAttribute("showtitles"), size: this.getAttribute("size"), api: this.getAttribute("api"), servercmd: this.getAttribute("servercmd") }; return results; } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.apiRef.indexOf('[[') >= 0) { data.items.push({type: "api", value: this.settings.apiRef}); if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.settings.api = this.settings.apiRef; clearTimeout(this.settings.buildTimer); this.settings.buildTimer = setTimeout(() => {this.buildContent();}, 250); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "api": { this.settings.api = item.value; this.settings.apiRef = item.reference; this.settings.apiVar = item.normalized; this.classList = ""; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); clearTimeout(this.settings.buildTimer); this.settings.buildTimer = setTimeout(() => {this.reloadContent();}, 250); } } setValue (vName, vVal) { if (this.settings.apiVar.toLowerCase().indexOf(vName) >= 0) { this.settings.api = vVal; this.reloadContent(); } else { this.resolveVars(); } } buildDimmer(settings, item, icon, cmd) { let w = settings.width - 20; let h = 72; let t = 4; let bh = 80; let bw = 88; let l1 = w - bh - 8; let tw = 44; let sw = 450; let st = 18; let fs = 24; let fsi = 24; let ii = 0; switch (settings.size) { case "small": { h = 72; bh = 56; bw = 56; t = 8; l1 = w - bw - 4; tw = 40; sw = w - (2 * bw) - 12; // * 0.71; fs = 20; fsi = 28; st = 12; ii = 10; break; } case "medium": { h = 72; bh = 64; bw = 64; t = 4; l1 = w - bw - t; tw = 40; sw = w - (2 * bw); // * 0.71; fs = 20; fsi = 32; st = 12; ii = 8; break; } case "large": { h = 88; bh = 80; bw = 88; t = 4; l1 = w - bw - t; tw = 44; sw = w - (2 * bw); // * 0.71; fs = 22; fsi = 36; ii = 0; break; } } let obj = '
  • '; obj += "
    • "; return obj; } buildDrapes(settings, item, icon) { let w = settings.width - 20; let h = 72; let t = 4; let bh = 80; let bw = 88; let l1 = w - (bw * 4) - 16; let l2 = w - (bw * 3) - 12; let l3 = w - (bw * 2) - 8; let l4 = w - (bw * 1) - 4; let fs = 24; let fsb = 24; let pw = l1 - 16; switch (settings.size) { case "small": { h = 72; bh = 56; bw = 56; l1 = w - (bw * 4) - 16; l2 = w - (bw * 3) - 12; l3 = w - (bw * 2) - 8; l4 = w - (bw * 1) - 4; t = 8; fs = 16; fsb = 14; pw = l2 - 16; break; } case "medium": { h = 72; bh = 64; bw = 64; l1 = w - (bw * 4) - 16; l2 = w - (bw * 3) - 12; l3 = w - (bw * 2) - 8; l4 = w - (bw * 1) - 4; t = 4; fs = 20; fsb = 18; break; } case "large": { h = 88; bh = 80; bw = 88; l1 = w - (bw * 4) - 16; l2 = w - (bw * 3) - 12; l3 = w - (bw * 2) - 8; l4 = w - (bw * 1) - 4; t = 4 fs = 24; fsb = 22; break; } } let obj = '
  • '; obj += "
    • "; return obj; } buildBlinds(settings, item, icon) { let w = settings.width - 20; let h = 72; let t = 4; let bh = 80; let bw = 88; let l1 = w - (bw * 4) - 16; let l2 = w - (bw * 3) - 12; let l3 = w - (bw * 2) - 8; let l4 = w - (bw * 1) - 4; let fs = 24; let fsb = 24; let pw = l1 - 16; switch (settings.size) { case "small": { h = 72; bh = 56; bw = 56; l1 = w - (bw * 4) - 16; l2 = w - (bw * 3) - 12; l3 = w - (bw * 2) - 8; l4 = w - (bw * 1) - 4; t = 8; fs = 16; fsb = 14; pw = l2 - 16; break; } case "medium": { h = 72; bh = 64; bw = 64; l1 = w - (bw * 4) - 16; l2 = w - (bw * 3) - 12; l3 = w - (bw * 2) - 8; l4 = w - (bw * 1) - 4; t = 4; fs = 20; fsb = 18; break; } case "large": { h = 88; bh = 80; bw = 88; l1 = w - (bw * 4) - 16; l2 = w - (bw * 3) - 12; l3 = w - (bw * 2) - 8; l4 = w - (bw * 1) - 4; t = 4 fs = 24; fsb = 22; break; } } let obj = '
  • '; obj += "
    • "; return obj; } buildListButton(settings, item) { let w = settings.width - 20; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 18; break; } case "medium": { h = 72; fs = 20; break; } case "large": { h = 78; fs = 24; break; } } let obj = '
  • ' + item.id; obj += ''; obj += '
    ' + item.id; obj += ''; obj += ''; obj += '
    ' + item.id; obj += ''; obj += '
    ' + item.id; obj += ''; obj += '
    ' + item.id; obj += ''; obj += '
    ' + item.id; obj += ''; obj += ''; obj += ''; obj += ''; obj += ''; obj += ''; obj += ''; obj += ''; obj += "
    • "; return obj; } buildLightingButtons(settings, item) { let w = settings.width; let lw = w; //400; let bw = 143; let bh = 65; let la = 0; let lb = 0; let lc = 10; let ld = 20; let le = 30; switch (settings.size) { case "small": { bw = 100; bh = 65; lb = 0; lc = 60 ld = 180; le = 298; break; } case "medium": { bw = 100; bh = 65; lb = 0; lc = 60 ld = 180; le = 298; break; } case "large": { bw = 143; bh = 65; la = 0; lb = 20; lc = 80 ld = 240; le = 400; break; } } let obj = '
  • '; obj += ''; obj += ''; obj += ''; obj += ''; obj += "
    • "; return obj; } buildControlButtons(settings, item) { let w = settings.width; let lw = w; //400; let bw = 143; let bh = 65; let la = 0; let lb = 0; let lc = 10; let ld = 20; let le = 30; switch (settings.size) { case "small": { bw = 100; bh = 65; lb = 0; lc = 60 ld = 180; le = 298; break; } case "medium": { bw = 100; bh = 65; lb = 0; lc = 60 ld = 180; le = 298; break; } case "large": { bw = 143; bh = 65; la = 0; lb = 20; lc = 80 ld = 240; le = 400; break; } } let obj = '
  • '; obj += ''; obj += ''; obj += ''; obj += ''; obj += "
    • "; return obj; } buildHeosItem(settings, key, item) { let w = settings.width - 20; let h; let t; let bh; let ih; let l1; let b1; let w1; let fs; let fs1; let m; switch (settings.size) { case "small": { h = 72; bh = 56; t = 8; fs = 16; fs1 = 12; ih = bh - 4; m = ih * 2; l1 = m + 15; w1 = w - m + 15 b1 = 2; break; } case "medium": { h = 72; bh = 64; t = 4; fs = 22; fs1 = 16; ih = bh - 4; m = ih * 2; l1 = m + 15; w1 = w - m + 15 b1 = 2; break; } case "large": { h = 88; bh = 80; t = 7 fs = 24; fs1 = 18; ih = bh - 4; m = ih * 2; l1 = m + 15; w1 = w - m + 15 b1 = 2; break; } } let obj = '
  • '; obj += "
    • "; return obj; } buildSonosItem(settings, key, item) { let w = settings.width - 20; let h; let t; let bh; let ih; let l1; let b1; let w1; let fs; let fs1; let m; switch (settings.size) { case "small": { h = 72; bh = 56; t = 8; fs = 16; fs1 = 12; ih = bh - 4; m = ih * 2; l1 = m + 15; w1 = w - m + 15 b1 = 2; break; } case "medium": { h = 72; bh = 64; t = 4; fs = 22; fs1 = 16; ih = bh - 4; m = ih * 2; l1 = m + 15; w1 = w - m + 15 b1 = 2; break; } case "large": { h = 88; bh = 80; t = 7 fs = 24; fs1 = 18; ih = bh - 4; m = ih * 2; l1 = m + 15; w1 = w - m + 15 b1 = 2; break; } } let obj = '
  • '; obj += "
    • "; return obj; } buildPreviewItem(settings, key, item) { let w = settings.width - 20; let h; let t; let bh; let ih; let l1; let l2; let b1; let w1; let fs; let fs1; let fsb; let fsh; let m; switch (settings.size) { case "small": { h = 72; bh = 56; t = 8; fs = 22; fs1 = 16; fsb = 32; fsh = fs1 + 4; ih = bh - 4; m = ih + 56; l1 = 2; l2 = bh + 15; w1 = w - l2 - 5; b1 = 2; break; } case "medium": { h = 72; bh = 64; t = 3; fs = 22; fs1 = 16; fsb = 32; fsh = fs1 + 4; ih = bh - 4; m = ih + 56; l1 = 2; l2 = bh + 15; w1 = w - l2 - 5; b1 = 2; break; } case "large": { h = 88; bh = 80; t = 3 fs = 24; fs1 = 18; fsb = 48; fsh = fs1 + 4; ih = bh - 4; m = ih + 56; l1 = 2; l2 = bh + 15; w1 = w - l2 - 5; b1 = 2; break; } } let obj = '
  • '; } obj += "
    • "; return obj; } buildEmbyItem(settings, item) { let w = settings.width - 20; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 18; break; } case "medium": { h = 72; fs = 20; break; } case "large": { h = 88; fs = 24; break; } } let obj = '
  • let obj = '
  • = 0) { obj += ' servercmd="' + settings.servercmd.replace(/\[\[value\]\]/gi, item.logicalsource) + '"'; } else { obj += ' servercmd="' + settings.servercmd + '|' + item.logicalsource + '"'; } } else { obj += ' servercmd=""'; } obj += ' matchmode="active"'; obj += ' activevalue="' + item.logicalsource + '"'; obj += ' label="' + item.name + '"'; obj += '>'; // obj += '= 0) { obj += ' servercmd="' + settings.servercmd.replace(/\[\[value\]\]/gi, item.logicalsource) + '"'; } else { obj += ' servercmd="' + settings.servercmd + '|' + item.logicalsource + '"'; } } else { obj += ' servercmd=""'; } obj += ' matchmode="active"'; obj += ' activevalue="' + item.logicalsource + '"'; if ((item.webpage === "cabletv") || (item.webpage === "directv") || (item.webpage === "androidtv")) { } else { obj += ' label="' + item.name + '"'; } obj += '>'; // obj += ' obj += ' if (item.videopreview === true) { obj += ' if (item.webpage === "xxxxxdirectv") { obj += ''; } if ((item.webpage === "directv") || (item.webpage === "cabletv") || (item.webpage === "androidtv")) { obj += '= 0) { obj += ' servercmd="' + settings.servercmd.replace(/\[\[value\]\]/gi, item.logicalsource) + '"'; } else { obj += ' servercmd="' + settings.servercmd + '|' + item.logicalsource + '"'; } } else { obj += ' servercmd=""'; } obj += ' matchmode="active"'; obj += ' activevalue="' + item.logicalsource + '"'; if ((item.webpage === "cabletv") || (item.webpage === "directv") || (item.webpage === "androidtv")) { } else { obj += ' label="' + item.name + '"'; } obj += '>'; // obj += ' obj += ' obj += ' if (item.webpage === "xxxxxdirectv") { obj += ''; } if ((item.webpage === "directv") || (item.webpage === "cabletv") || (item.webpage === "androidtv")) { obj += '
    • '; return obj; } buildLightingGroup(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 22; break; } case "medium": { h = 72; fs = 22; break; } case "large": { h = 80; fs = 26; break; } } // let obj = '
  • obj += ' let obj = '
  • obj += ''; obj += ''; obj += ''; obj += ''; obj += '' obj += "
    • "; return obj; } buildSystemPreset(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 22; break; } case "medium": { h = 72; fs = 22; break; } case "large": { h = 80; fs = 26; break; } } let obj = '
  • ' obj += ''; obj += ''; obj += ''; obj += ''; obj += '' obj += "
    • "; return obj; } buildLightingPreset(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 22; break; } case "medium": { h = 72; fs = 22; break; } case "large": { h = 80; fs = 26; break; } } let obj = '
  • ' obj += ''; obj += ''; obj += ''; obj += ''; obj += '' obj += "
    • "; return obj; } buildVideoPreset(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 22; break; } case "medium": { h = 72; fs = 22; break; } case "large": { h = 80; fs = 26; break; } } let obj = '
  • ' obj += ''; obj += ''; obj += ''; obj += ''; obj += '' obj += "
    • "; return obj; } buildAudioPreset(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 22; break; } case "medium": { h = 72; fs = 22; break; } case "large": { h = 80; fs = 26; break; } } let obj = '
  • ' obj += ''; obj += ''; obj += ''; obj += ''; obj += '' obj += "
    • "; return obj; } buildSignageMedia(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 22; break; } case "medium": { h = 72; fs = 22; break; } case "large": { h = 80; fs = 26; break; } } let cmd = this.settings.servercmd.replace(/\[\[value\]\]/gi,item.mediaurl); let delCmd = "Macro|setvariable|signage_delete_media_file~" + item.mediafile + "!WebCmd|[[clientname]]~Show|signage-confirm-delete-media"; if (this.settings.api.indexOf("playlists") > 0) { cmd = this.settings.servercmd.replace(/\[\[value\]\]/gi,item.title); delCmd = "Macro|setvariable|signage_delete_playlist_name~" + item.title + "!setvariable|signage_delete_playlist_item~" + item.id + "!WebCmd|[[clientname]]~Show|signage-confirm-delete-playlist"; } let obj = '
  • ' obj += ''; obj += ''; obj += ''; obj += "
    • "; return obj; } buildTaskItem(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; let bs = 72; switch (settings.size) { case "small": { h = 72; fs = 22; bs = h - 6; break; } case "medium": { h = 72; fs = 22; bs = h - 6; break; } case "large": { h = 80; fs = 26; bs = h - 6; break; } } let delCmd = "Macro|setvariable|scheduler_deleteitem_[[clientname]]~" + item.id + "!setvariable|scheduler_deleteitemname_[[clientname]]~" + item.name + "!WebCmd|[[clientname]]~Show|scheduler-overlay-deletetask"; let editCmd = "Macro|Scheduler|EditTask~" + item.id + "!WebCmd|[[clientname]]~Loadscene|scheduler-edittask"; let copyCmd = "Macro|SetVariable|selected_task_[[clientname]]~" + item.id + "!SetVariable|selected_task_name_[[clientname]]~" + item.name + "!WebCmd|[[clientname]]~Toggle|scheduler-overlay-copy"; let runCmd = "Scheduler|RunTask~" + item.id; let obj = '
  • ' let clr = "rgba(255,255,255,1.00)"; if (item.enabled == false) { clr = "rgba(156,163,175,1.00)"; } let br = "0 0 0 0"; if ((item.first === true) && (item.last === true)) { br = "7 7 7 7"; } else { if (item.first === true) { br = "7 7 0 0"; } if (item.last === true) { br = "0 0 7 7"; } } obj += ''; obj += ''; obj += ''; obj += ''; obj += ''; obj += "
    • "; return obj; } buildAreaPreset(settings, item) { let w = settings.width - 22; let h = 72; let fs = 24; let bs = 72; switch (settings.size) { case "small": { h = 120; fs = 22; bs = h - 6; break; } case "medium": { h = 120; fs = 22; bs = h - 6; break; } case "large": { h = 120; fs = 26; bs = h - 6; break; } } // let delCmd = "Macro|setvariable|scheduler_deleteitem_[[clientname]]~" + item.id + "!setvariable|scheduler_deleteitemname_[[clientname]]~" + item.name + "!WebCmd|[[clientname]]~Show|scheduler-overlay-deletetask"; // let editCmd = "Macro|Scheduler|EditTask~" + item.id + "!WebCmd|[[clientname]]~Loadscene|scheduler-edittask"; // let runCmd = "Scheduler|RunTask~" + item.id; let obj = '
  • ' obj += ''; obj += ''; obj += ''; obj += ''; obj += ''; obj += "
    • "; return obj; } buildButton(settings, item, srvcmd, statevar) { let w = settings.width - 22; let h = 72; let fs = 24; let t = 0; let l = 0; let bw = w; let bh = 68; switch (settings.size) { case "small": { break; } case "medium": { break; } case "large": { break; } } // let delCmd = "Macro|setvariable|scheduler_deleteitem_[[clientname]]~" + item.id + "!setvariable|scheduler_deleteitemname_[[clientname]]~" + item.name + "!WebCmd|[[clientname]]~Show|scheduler-overlay-deletetask"; // let editCmd = "Macro|Scheduler|EditTask~" + item.id + "!WebCmd|[[clientname]]~Loadscene|scheduler-edittask"; // let runCmd = "Scheduler|RunTask~" + item.id; let obj = '
  • ' obj += '' obj += ''; obj += "
    • "; return obj; } buildHarmonyButton(settings, item) { let w = settings.width - 20; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 18; break; } case "medium": { h = 72; fs = 20; break; } case "large": { h = 78; fs = 24; break; } } let obj = '
  • '; obj += "
    • "; return obj; } buildHarmonyDeviceButton(settings, item) { let w = settings.width - 20; let h = 72; let fs = 24; switch (settings.size) { case "small": { h = 72; fs = 18; break; } case "medium": { h = 72; fs = 20; break; } case "large": { h = 78; fs = 24; break; } } let obj = '
  • { let tmp = this.buildDeviceButton(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "harmonybuttons": { this.settings.eof = true; $(this.settings.itemsObj).empty(); data.forEach(item => { let tmp = this.buildHarmonyButton(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "harmonydevice": { this.settings.eof = true; $(this.settings.itemsObj).empty(); data.controlGroup.forEach(cg => { let tmp = this.buildHarmonyDeviceLabel(this.settings, cg.name); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); cg.functions.forEach(func => { let tmp = this.buildHarmonyDeviceButton(this.settings, func); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); }); break; } case "harmonyactivity": { this.settings.eof = true; $(this.settings.itemsObj).empty(); data.controlGroup.forEach(cg => { let tmp = this.buildHarmonyDeviceLabel(this.settings, cg.name); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); cg.functions.forEach(func => { let tmp = this.buildHarmonyDeviceButton(this.settings, func); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); }); break; } case "nvp": { this.settings.eof = true; $(this.settings.itemsObj).empty(); data.forEach(item => { let tmp = this.buildListButton(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "housemodes": { this.settings.eof = true; $(this.settings.itemsObj).empty(); data.forEach(item => { let tmp = this.buildHouseModeButton(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "generic": { this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); data.items.forEach(item => { let tmp = this.buildListButton(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "tvs": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildPairingButton(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "power buttons": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildPowerButtons(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "switch buttons": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildLightingButtons(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "relay buttons": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildControlButtons(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "lighting items": { this.settings.eof = true; $(this.settings.itemsObj).empty(); if (data.total > 0) { data.items.forEach(item => { let tmp = ''; let icon = ''; switch (item.type.toLowerCase()) { case "rgbw": case "rgbw dimmer": { tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "RGBLevel"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "SoftWhite"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Red"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Green"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Blue"); break; } case "rgb": case "rgb dimmer": { tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "RGBLevel"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Red"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Green"); $(this.settings.itemsObj).append(tmp); tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Blue"); break; } case "dimmer": { if (item.name.toLowerCase().indexOf('ceiling') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('overhead') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('chandelier') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('table') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('desk') >= 0) { icon = "fal.lamp-desk"; } else if (item.name.toLowerCase().indexOf('floor') >= 0) { icon = "fal.lamp-floor"; } else if (item.name.toLowerCase().indexOf('christmas') >= 0) { icon = "fal.lights-holiday"; } else if (item.name.toLowerCase().indexOf('holiday') >= 0) { icon = "fal.lights-holiday"; } else if (item.name.toLowerCase().indexOf('fireplace') >= 0) { icon = "fal.fire"; } else if (item.name.toLowerCase().indexOf('red') >= 0) { icon = "fal.lightbulb"; } else if (item.name.toLowerCase().indexOf('green') >= 0) { icon = "fal.lightbulb"; } else if (item.name.toLowerCase().indexOf('blue') >= 0) { icon = "fal.lightbulb"; } else if (item.name.toLowerCase().indexOf('white') >= 0) { icon = "fal.lightbulb"; } else { icon = "fal.lamp"; } tmp = this.buildDimmer(this.settings, item, icon, "Level"); break; } case "switch": { if (item.name.toLowerCase().indexOf('ceiling') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('overhead') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('chandelier') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('table') >= 0) { icon = "fal.light-ceiling"; } else if (item.name.toLowerCase().indexOf('desk') >= 0) { icon = "fal.lamp-desk"; } else if (item.name.toLowerCase().indexOf('floor') >= 0) { icon = "fal.lamp-floor"; } else if (item.name.toLowerCase().indexOf('christmas') >= 0) { icon = "fal.lights-holiday"; } else if (item.name.toLowerCase().indexOf('holiday') >= 0) { icon = "fal.lights-holiday"; } else if (item.name.toLowerCase().indexOf('fireplace') >= 0) { icon = "fal.fire"; } else if (item.name.toLowerCase().indexOf('garage') >= 0) { icon = "fal.garage"; } else { icon = "fal.light-switch"; } tmp = this.buildSwitch(this.settings, item, icon); break; } case "relay": { tmp = this.buildSwitch(this.settings, item, "fal.light-switch"); break; } case "door": { tmp = this.buildDoor(this.settings, item, "fal.door-closed"); break; } case "fan": { tmp = this.buildSwitch(this.settings, item, "fal.fan"); break; } case "fan multi-speed": { tmp = this.buildMultiFan(this.settings, item, "fal.fan"); break; } case "red": case "red dimmer": { tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Red"); break; } case "green": case "green dimmer": { tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Green"); break; } case "blue": case "blue dimmer": { tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "Blue"); break; } case "white": case "white dimmer": { tmp = this.buildDimmer(this.settings, item, "fal.lightbulb", "White"); break; } case "shutter": { tmp = this.buildBlinds(this.settings, item, "fal.blinds"); break; } case "shadegroup": case "shade": { tmp = this.buildShades(this.settings, item, "fal.archive"); break; } case "drape": { tmp = this.buildDrapes(this.settings, item, "fal.booth-curtain"); break; } case "blind": { tmp = this.buildBlinds(this.settings, item, "fal.blinds"); break; } case "link": { tmp = this.buildSwitch(this.settings, item, "fal.link"); break; } case "scene": { tmp = this.buildSwitch(this.settings, item, "fal.image"); break; } case "group": { tmp = this.buildSwitch(this.settings, item, "fal.ball-pile"); break; } default: { tmp = this.buildListButton(this.settings, item); break; } } this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); }; break; } case "lighting rooms": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildLightingRooms(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "lighting groups": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildLightingGroup(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "lighting group items": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildLightingGroupItem(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "irrigation programs": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildIrrigationProgram(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "irrigation zones": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildIrrigationZone(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "irrigation enable": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildIrrigationEnable(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "irrigation manual program": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildIrrigationManualProgram(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "irrigation manual zone": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildIrrigationManualZone(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "irrigation watering zones": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildIrrigationWaterZone(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "tunein": { if (data.length > 2) { data.forEach(item => { let tmp = this.buildTuneInItem(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } this.settings.eof = true; break; } case "heos": { for (const [key, value] of Object.entries(data)) { let tmp = this.buildHeosItem(this.settings, key, value); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); } this.settings.eof = ((data.itemCount == 0) || (data.itemCount == data.totalItems)); break; } case "sonos": { for (const [key, value] of Object.entries(data)) { let tmp = this.buildSonosItem(this.settings, key, value); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); } this.settings.eof = ((data.itemCount == 0) || (data.itemCount == data.totalItems)); break; } case "previewer": { $(this.settings.itemsObj).empty(); for (const [key, value] of Object.entries(data)) { let tmp = this.buildPreviewItem(this.settings, key, value); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); } this.settings.eof = ((data.itemCount == 0) || (data.itemCount == data.totalItems)); break; } case "emby": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total < this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { let tmp = this.buildEmbyItem(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "audio": case "audio sources": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { if (item.visible === true) { let tmp = this.buildAudioSource(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); } }); } break; } case "video": case "video sources": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { if (item.visible === true) { let tmp = this.buildVideoSource(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); } }); } break; } case "audiovideo sources": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { data.items.forEach(item => { if (item.visible === true) { let tmp = this.buildAudioVideoSource(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); } }); } break; } case "virtual tvs": { $(this.settings.itemsObj).empty(); this.settings.eof = ((data.total === 0) || (data.total <= this.settings.pagesize)); if (data.total > 0) { this.settings.itemsObj.style.gap = "10px"; data.items.forEach(item => { let tmp = this.buildVirtualTV(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); } break; } case "admin presets": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildAdminPreset(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "system presets": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let tmp = this.buildSystemPreset(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "signage media": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.items.forEach(item => { let tmp = this.buildSignageMedia(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "scheduler": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.items.forEach(item => { let tmp = this.buildTaskItem(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "area presets": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.items.forEach(item => { let tmp = this.buildAreaPreset(this.settings, item); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "signage players": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let scmd = this.settings.servercmd.replaceAll("[[value]]",item.value); let tmp = this.buildButton(this.settings, item, scmd, "[[signage_activeplayer_number_[[clientname]]]]"); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "matrix players": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.forEach(item => { let scmd = this.settings.servercmd.replaceAll("[[value]]",item.value); let tmp = this.buildButton(this.settings, item, scmd, "[[mediamatrix_activedevice_[[clientname]]]]"); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "devices": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.items.forEach(item => { let scmd = this.settings.servercmd.replaceAll("[[value]]",item.deviceID); let tmp = this.buildButton(this.settings, item, scmd, "[[activedevice_[[clientname]]]]"); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } case "media rooms": { $(this.settings.itemsObj).empty(); this.settings.eof = true; data.items.forEach(item => { let scmd = this.settings.servercmd.replaceAll("[[value]]",item.macro); let tmp = this.buildRoomButton(this.settings, item, scmd, "[[activeroom_roomid_[[clientname]]]]"); this.settings.itemsObj.insertAdjacentHTML('beforeend', tmp); }); break; } } } } window.customElements.define("ui-scroller", uiScroller); export { uiScroller } /* * ----------------------------------------------------------------------------- * 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 uiRadialProgress extends HTMLElement { static get observedAttributes() { return ['id','width','height','left','top','startangle','endangle','min','max','label','showlabel', 'startcolor','midcolor','endcolor','barwidth','backcolor','backwidth','value','animated','rounded', 'labelcolor','labelfont','labelfontsize','labelfontweight' ]; } 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 = { isSelected: false, connected: false, hostObj: this.querySelector(".gauge-container"), barObj: null, id: '', width: '', height: '', left: '', top: '', startAngle: 45, endAngle: 135, radius: 47.5, min: 0, max: 100, duration: 0, label: '', labelVar: '', labelRef: '', rounded: false, showLabel: false, animated: false, startColor: '#039be5', midColor: '', endColor: '#6a1b9a', barWidth: 5, backColor: '', backWidth: 2, value: 0, valueRef: '', valueVar: '', labelColor: 'rgba(255,255,255,1)', labelFont: 'Roboto', labelFontSize: '16pt', labelFontWeight: '400', colors: [], colorScale: null }; 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~radialprogress~" + 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': { if (!fxApp.isEmpty(newValue)) { 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 '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 'startangle': { if (fxApp.isNumeric(newValue)) { this.settings.startAngle = parseFloat(newValue); } break; } case 'endangle': { if (fxApp.isNumeric(newValue)) { this.settings.endAngle = parseFloat(newValue); } break; } case 'min': { if (fxApp.isNumeric(newValue)) { this.settings.min = parseFloat(newValue); } break; } case 'max': { if (fxApp.isNumeric(newValue)) { this.settings.max = parseFloat(newValue); } break; } case 'label': { this.settings.labelRef = newValue; break; } case 'showlabel': { this.settings.showLabel = (newValue === "1") ? true : false; break; } case 'rounded': { this.settings.rounded = (newValue === "1") ? true : false; break; } case 'animated': { this.settings.animated = (newValue === "1") ? true : false; break; } case 'startcolor': { this.settings.startColor = newValue; break; } case 'endcolor': { this.settings.endColor = newValue; break; } case 'midcolor': { this.settings.midColor = newValue; break; } case 'barwidth': { if (fxApp.isNumeric(newValue)) { this.settings.barWidth = parseInt(newValue); } break; } case 'backwidth': { if (fxApp.isNumeric(newValue)) { this.settings.backWidth = parseInt(newValue); } break; } case 'backcolor': { this.settings.backColor = newValue; break; } case 'value': { this.settings.valueRef = newValue; break; } case 'labelcolor': { this.settings.labelColor = newValue; break; } case 'labelfont': { this.settings.labelFont = newValue; break; } case 'labelfontsize': { this.settings.labelFontSize = newValue; break; } case 'labelfontweight': { this.settings.labelFontWeight = 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 = parseFloat(this.settings.valueRef); } if (this.settings.labelRef.indexOf('[[') >= 0) { data.items.push({type: "label", value: this.settings.labelRef}); } else { this.settings.label = this.settings.labelRef; } 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 = parseFloat(item.value); this.settings.valueRef = item.reference; this.settings.valueVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } 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); }); break; } } }); this.buildProgress(); } } buildProgress() { const _self=this; if (!fxApp.isEmpty(this.settings.barObj)) { return; } if (!fxApp.isEmpty(this.settings.startColor)) { this.settings.colors.push(this.settings.startColor); } if (!fxApp.isEmpty(this.settings.midColor)) { this.settings.colors.push(this.settings.midColor); } if (!fxApp.isEmpty(this.settings.endColor)) { this.settings.colors.push(this.settings.endColor); } this.settings.colorScale = chroma.scale(this.settings.colors); if (this.settings.startAngle == this.settings.endAngle) { this.settings.endAngle = this.settings.startAngle - 0.001; } if (this.settings.rounded === true) { this.settings.hostObj.style.setProperty('--ui-radial-progress-dial-linecap', 'round'); } this.settings.hostObj.style.setProperty('--ui-radial-progress-width', this.settings.width + "px"); this.settings.hostObj.style.setProperty('--ui-radial-progress-height', this.settings.height + "px"); this.settings.hostObj.style.setProperty('--ui-radial-progress-dial-background', this.settings.backColor); this.settings.hostObj.style.setProperty('--ui-radial-progress-dial-background-width', this.settings.backWidth); this.settings.hostObj.style.setProperty('--ui-radial-progress-dial-color', this.settings.startColor); this.settings.hostObj.style.setProperty('--ui-radial-progress-dial-width', this.settings.barWidth); this.settings.hostObj.style.setProperty('--ui-radial-progress-label-font-color', this.settings.labelColor); this.settings.hostObj.style.setProperty('--ui-radial-progress-label-font-family', this.settings.labelFont); this.settings.hostObj.style.setProperty('--ui-radial-progress-label-font-weight', this.settings.labelFontWeight); this.settings.hostObj.style.setProperty('--ui-radial-progress-label-font-size', this.settings.labelFontSize + "px"); this.settings.barObj = Gauge(this.settings.hostObj, { dialStartAngle : this.settings.startAngle, dialEndAngle: this.settings.endAngle, dialRadius: this.settings.radius, min: this.settings.min, max: this.settings.max, value: this.settings.value, showValue: this.settings.showLabel, label: function(value) { return parseInt(value) + _self.settings.label; }, color: function(value) { const pct = ((_self.settings.max - _self.settings.min) - value) / (_self.settings.max - _self.settings.min); return _self.settings.colorScale(pct).css('rgba'); } }); } setValue (vName, vVal) { if (this.settings.valueVar.toLowerCase().indexOf(vName) == 0) { if (!fxApp.isEmpty(vVal)) { this.settings.value = parseFloat(vVal); if (this.settings.animated) { this.settings.barObj.setValueAnimated(this.settings.value, this.settings.duration); } else { this.settings.barObj.setValue(this.settings.value); } } } else { this.resolveVars(); } } getProps() { let results = { objecttype: "ui-radialprogress", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), left: this.getAttribute("left"), top: this.getAttribute("top"), startangle: this.getAttribute("startangle"), endangle: this.getAttribute("endangle"), min: this.getAttribute("min"), max: this.getAttribute("max"), label: this.getAttribute("label"), showlabel: this.getAttribute("showlabel"), rounded: this.getAttribute("rounded"), animated: this.getAttribute("animated"), startcolor: this.getAttribute("startcolor"), midcolor: this.getAttribute("midcolor"), endcolor: this.getAttribute("endcolor"), barwidth: this.getAttribute("barwidth"), backcolor: this.getAttribute("backcolor"), backwidth: this.getAttribute("backwidth"), value: this.getAttribute("value"), labelcolor: this.getAttribute("labelcolor"), labelfont: this.getAttribute("labelfont"), labelfontsize: this.getAttribute("labelfontsize"), labelfontweight:this.getAttribute("labelfontweight") }; return results; } } window.customElements.define("ui-radialprogress", uiRadialProgress); export { uiRadialProgress } /* * ----------------------------------------------------------------------------- * 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 uiScrollable extends HTMLElement { static get observedAttributes() { return ['id','width','height','left','top','value','content','fontcolor','textalign','texttransform','fontfamily','fontsize','fontweight', 'vertical', 'horizontal']; } 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 = { isSelected: false, hostObj: this.querySelector(".scrollable-host"), id: '', value: '', valueRef: '', valueVar: '', content: '', contentRef: '', contentVar: '', vertical: false, horizontal: 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~scrollable~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { if (this.settings.vertical === true) { this.settings.hostObj.style.overflowY = "scroll"; } if (this.settings.horizontal === true) { this.settings.hostObj.style.overflowX = "scroll"; } 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"; } 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 'value': { this.settings.valueRef = newValue; break; } case 'content': { this.settings.contentRef = newValue; break; } case 'fontcolor': { if (!fxApp.isEmpty(newValue)) { this.settings.hostObj.style.color = newValue; } else { this.settings.hostObj.style.textAlign = "inherit"; } 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 'vertical': { if (!fxApp.isEmpty(newValue)) { this.settings.vertical = (newValue == '1'); } break; } case 'horizontal': { if (!fxApp.isEmpty(newValue)) { this.settings.horizontal = (newValue == '1'); } 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 (this.settings.contentRef.indexOf('[[') >= 0) { data.items.push({type: "content", value: this.settings.contentRef}); } else { this.settings.content = this.settings.contentRef; } if (data.items.length > 0) { this.classList = ""; if (!fxApp.sendMessage(this.settings.id, data)) { setTimeout(() => {this.resolveVars();}, 100); } } else { this.buildContent(); } } 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.buildContent(); } } 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 buildContent() { if (fxApp.designMode === true) { this.settings.hostObj.style.border = "1px solid cornflowerblue"; return; } if (fxApp.isEmpty(this.settings.content)) { this.settings.hostObj.innerHTML = this.settings.value; } else { 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.settings.hostObj.innerHTML = await this.getData(url); } } } setValue (vName, vVal) { if (this.settings.valueVar.toLowerCase().indexOf(vName) == 0) { this.settings.hostObj.innerHTML = vVal; } else if (this.settings.contentVar.toLowerCase().indexOf(vName) == 0) { this.settings.content = vVal; this.buildContent(); } else { this.resolveVars(); } } getProps() { let results = { objecttype: "ui-scrollable", id: this.getAttribute("id"), width: this.getAttribute("width"), height: this.getAttribute("height"), left: this.getAttribute("left"), top: this.getAttribute("top"), value: this.getAttribute("value"), content: this.getAttribute("content"), fontcolor: this.getAttribute("fontcolor"), textalign: this.getAttribute("textalign"), texttransform: this.getAttribute("texttransform"), fontfamily: this.getAttribute("fontfamily"), fontsize: this.getAttribute("fontsize"), fontweight: this.getAttribute("fontweight"), vertical: this.getAttribute("vertical"), horizontal: this.getAttribute("horizontal") }; return results; } } window.customElements.define("ui-scrollable", uiScrollable); export { uiScrollable } /* * ----------------------------------------------------------------------------- * 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 uiImageProgress extends HTMLElement { static get observedAttributes() { return ['id', 'top', 'left', 'width', 'height', 'rotate', 'image', 'min', 'max', 'transition', 'slidefrom', 'value' ]; } 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: '', top: 0, left: 0, width: 0, height: 0, min: 0, max: 0, transition: 2, rotate: '', slideFrom: '', image: '', imageVar: '', imageRef: '', oldValue: 0, value: '', valueVar: '', valueRef: '', imageObj: this.querySelector(".imageprogress-image"), hostObj: this.querySelector(".imageprogress-object"), connected: false, 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~imageprogress~" + this.settings.id); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.buildProgress(); this.resolveVars(); this.settings.connected = true; } 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 'left': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.left = newValue + "px"; this.settings.left = parseInt(newValue); } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.top = newValue + "px"; this.settings.top = parseInt(newValue); } break; } case 'rotate': { if (fxApp.isNumeric(newValue)) { this.settings.hostObj.style.transform = "rotate(" + newValue + "deg)"; this.settings.rotate = "rotate(" + newValue + "deg)"; } break; } case 'image': { this.settings.imageRef = newValue; if (this.settings.connected) { this.resolveVars(); } 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 'transition': { if (fxApp.isNumeric(newValue)) { this.settings.transition = parseInt(newValue); } break; } case 'slidefrom': { this.settings.slideFrom = newValue.toLowerCase(); break; } case 'value': { this.settings.valueRef = 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); this.removeEventListener('dblclick', 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.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; this.buildProgress(); } 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 "value": { this.settings.value = parseInt(item.value); this.settings.oldValue = this.settings.value; this.settings.valueRef = item.reference; this.settings.valueVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); this.setProgress(); 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.buildProgress(); break; } } }); } } 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.valueVar)) { if (this.settings.valueVar.toLowerCase().indexOf(vName) >= 0) { this.settings.oldValue = this.settings.value; this.settings.value = parseInt(vVal); this.setProgress(); return; } } } buildProgress() { this.settings.hostObj.style.clip = "rect(0px " + this.settings.width + "px " + this.settings.height + "px 0px)"; this.settings.imageObj.src = this.settings.image; this.settings.imageObj.style.width = this.settings.width + "px"; this.settings.imageObj.style.height = this.settings.height + "px"; } setProgress() { let deltaVal = Math.abs((this.settings.oldValue - this.settings.value) / this.settings.max); deltaVal = deltaVal * this.settings.transition; if ((fxApp.designMode === true) && (this.settings.value===0)) { this.settings.value = 100; } this.settings.imageObj.style.transitionDuration = deltaVal + "s"; switch (this.settings.slideFrom) { case "top": { this.settings.imageObj.style.top = (100 - this.settings.value) + "%"; this.settings.imageObj.style.bottom = ""; break; } case "left": { this.settings.imageObj.style.left = (100 - this.settings.value) + "%"; this.settings.imageObj.style.right= ""; break; } case "right": { this.settings.imageObj.style.left = ""; this.settings.imageObj.style.right = (100 - this.settings.value) + "%"; break; } case "bottom": { this.settings.imageObj.style.bottom = (100 - this.settings.value) + "%"; this.settings.imageObj.style.top = ""; break; } } } getProps() { let results = { objecttype: "ui-imageprogress", id: this.getAttribute("id"), top: this.getAttribute("top"), left: this.getAttribute("left"), width: this.getAttribute("width"), height: this.getAttribute("height"), rotate: this.getAttribute("rotate"), image: this.getAttribute('image'), min: this.getAttribute('min'), max: this.getAttribute('max'), transition: this.getAttribute('transition'), slidefrom: this.getAttribute('slidefrom'), value: this.getAttribute('value'), }; return results; } } window.customElements.define("ui-imageprogress", uiImageProgress); export { uiImageProgress } /* * ----------------------------------------------------------------------------- * 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 uxScrollButton extends HTMLElement { static get observedAttributes() { return ['id','position','top','right','left','width','height','rotate','borderradii','backgroundcolor','secondbackgroundcolor','gradientsteps','gradientdirection','transparent', 'margins', 'borders','outline','shadow','repeat','label','fontfamily','fontsize','fontweight','fontstyle','labelcolor', 'icon','iconpadding','alignment','allowwrap','texttransform','statevar','activevalue','matchmode','onbackgroundcolor', 'onlabelcolor','onbordercolor','onoutlinecolor','onicon','onlabel','onvisible','onclickable','offbackgroundcolor', 'offlabelcolor','offbordercolor','offoutlinecolor','officon','offlabel','offvisible','offclickable','clientcmd','servercmd','savecmd','cancelcmd']; } constructor() { super(); const uxTemplate = document.createElement('template'); uxTemplate.innerHTML = `

    `; this.appendChild(uxTemplate.content.cloneNode(true)); this.resolve = this.resolve.bind(this); this.setValue = this.setValue.bind(this); this.settings = { connected: false, id: '', position:'', margins: '', top: '', left: '', right: '', width: '', height: '', rotate: '', borderRadii: '', backgroundType: 'color', backgroundColor: '', secondbackgroundColor: '', gradientSteps: 0, gradientDirection: 0, transparent: false, borders: '', outline: '', repeat: false, label: '', fontFamily: '', fontSize: '', fontWeight: '', fontStyle: '', labelColor: '', hasIcons: false, icon: '', iconPadding: '', alignment: '', allowWrap: false, textTransform: '', state: '', stateVar: '', stateRef: '', matchMode: 'active', activeValue: ',1,on,true,', onBackgroundColor: '', onLabelColor: '', onBorderColor: '', onOutlineColor: '', onIcon: '', onLabel: '', onVisible: true, onClickable: true, offBackgroundColor: '', offLabelColor: '', offBorderColor: '', offOutlineColor: '', offIcon: '', offLabel: '', offVisible: true, offClickable: true, clientCmd: '', serverCmd: '', cancelCmd: '', saveCmd: '', buttonObj: this.querySelector(".scroller-button"), buttonLabelObj: this.querySelector(".scroller-button-label"), labelObj: null, iconObj: null }; this._onClickHandler = (e) => { if (!fxApp.isEmpty(this.settings.clientCmd)) { fxApp.clientCmd(this.settings.clientCmd); } if (!fxApp.isEmpty(this.settings.serverCmd)) { fxApp.doCommand(this.settings.serverCmd); } if (!fxApp.isEmpty(this.settings.cancelCmd)) { fxApp.clientCmd(this.settings.clientCmd); } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.settings.connected = true; if (!fxApp.isEmpty(this.settings.clientCmd) || !fxApp.isEmpty(this.settings.serverCmd)) { this.enableClick(); } if (this.settings.hasIcons === true) { this.buildIcons(); } if (!fxApp.isEmpty(this.settings.labelRef)) { this.buildLabels(); } this.setBackground(); this.resolveVars(); } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { let shouldUpdate = false; switch (name.toLowerCase()) { 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.buttonObj.style.top = newValue + "px"; } break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.buttonObj.style.left = newValue + "px"; } break; } case 'right': { if (fxApp.isNumeric(newValue)) { this.settings.buttonObj.style.right = newValue + "px"; } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.buttonObj.style.width = newValue + "px"; } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.buttonObj.style.height = newValue + "px"; } break; } case 'margins': { // "top right bottom left" if (!fxApp.isEmpty(newValue)) { let r = newValue.split(' '); if (r.length == 4) { if (r[0] == 'auto') { this.settings.buttonLabelObj.style.marginTop = r[0]; } else { this.settings.buttonLabelObj.style.marginTop = r[0] + "px "; } if (r[1] == 'auto') { this.settings.buttonLabelObj.style.marginRight = r[1]; } else { this.settings.buttonLabelObj.style.marginRight = r[1] + "px "; } if (r[2] == 'auto') { this.settings.buttonLabelObj.style.marginBottom = r[2]; } else { this.settings.buttonLabelObj.style.marginBottom = r[2] + "px "; } if (r[3] == 'auto') { this.settings.buttonLabelObj.style.marginLeft = r[3]; } else { this.settings.buttonLabelObj.style.marginLeft = r[3] + "px "; } } else if (r.length == 2) { if (r[0] == 'auto') { this.settings.buttonLabelObj.style.marginLeft = r[0]; } else { this.settings.buttonLabelObj.style.marginLeft = r[0] + "px "; } if (r[1] == 'auto') { this.settings.buttonLabelObj.style.marginRight = r[1]; } else { this.settings.buttonLabelObj.style.marginRight = r[1] + "px "; } } else if (r.length == 1) { if (r[0] == 'auto') { this.settings.buttonLabelObj.style.marginLeft = r[0]; } else { this.settings.buttonLabelObj.style.marginLeft = r[0] + "px "; } } } break; } case 'borderradii': { // "tl tr br bl" if (!fxApp.isEmpty(newValue)) { this.settings.buttonObj.style.borderRadius = newValue; } break; } case 'alignment': { if (!fxApp.isEmpty(newValue)) { this.settings.buttonLabelObj.style.textAlign = newValue; } break; } case 'backgroundcolor': { // rgba(0,0,0,1) this.settings.backgroundColor = newValue; 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 { this.settings.buttonObj.style.border = 'none'; } 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 'labelcolor': { this.settings.labelColor = 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 '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 '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 'statevar': { if ((!fxApp.isEmpty(newValue)) && (fxApp.designMode === false)) { this.settings.buttonObj.classList.add("hidden"); } this.settings.stateRef = newValue.toLowerCase(); 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; } } if (shouldUpdate === true) { this.setBackground(); this.buildIcons(); this.buildLabels(); } } setBackground() { if (this.settings.transparent === true) { this.settings.buttonObj.style.backgroundColor = 'transparent'; this.settings.buttonObj.style.backgroundImage = 'none'; } else { this.settings.buttonObj.style.backgroundColor = this.settings.backgroundColor; this.settings.buttonObj.style.backgroundImage = 'none'; } } 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 += '= 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.onLabelColor)) { this.settings.buttonObj.style.color = this.settings.onLabelColor; } if (!fxApp.isEmpty(this.settings.onBackgroundColor)) { this.settings.buttonObj.style.backgroundColor = this.settings.onBackgroundColor; } if (fxApp.designMode === false) { if (this.settings.onVisible == true) { this.settings.buttonObj.classList.remove("hidden"); } else { this.settings.buttonObj.classList.add("hidden"); } } if (!fxApp.isEmpty(this.settings.onIcon)) { this.setIcon(this.settings.onIcon); } } setInactiveState() { if (!fxApp.isEmpty(this.settings.offBackgroundColor)) { this.settings.buttonObj.style.backgroundColor = this.settings.offBackgroundColor; } if (!fxApp.isEmpty(this.settings.offLabelColor)) { this.settings.buttonObj.style.color = this.settings.offLabelColor; } if (fxApp.designMode === false) { if (this.settings.offVisible == true) { this.settings.buttonObj.classList.remove("hidden"); } else { this.settings.buttonObj.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) { // then in active state this.setActiveState(); } else { this.setInactiveState(); } } else { if (this.settings.activeValue.indexOf(','+this.settings.state.toLowerCase()+',') >= 0) { // then in active state this.setInactiveState(); } else { this.setActiveState(); } } } else { // state with no value this.setInactiveState(); } } enableClick () { this.settings.buttonObj.style.pointerEvents = "auto"; this.addEventListener('click', this._onClickHandler, false); } } window.customElements.define("ux-scrollbutton", uxScrollButton); export { uxScrollButton } /* * ----------------------------------------------------------------------------- * 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 uxScrollSlider extends HTMLElement { static get observedAttributes() { return ['id','left','top','width','height','vertical','steps','min','max','value','icon','label','labelcolor','fontsize','showscale','scalecolor', 'servercmd','rangebackground','rangeborder','rangeborderradius','rangefilter','trackwidth','trackbackcolor','trackstartcolor','trackendcolor', 'thumbwidth','thumbheight','thumbbackground','thumbborder','thumbborderradius','thumbfilter','sliderwidth' ]; } constructor() { super(); const uxTemplate = document.createElement('template'); uxTemplate.innerHTML = `
    `; this.appendChild(uxTemplate.content.cloneNode(true)); this.resolve = this.resolve.bind(this); this.setValue = this.setValue.bind(this); this.settings = { baseObj: this.querySelector(".scroller-slider"), hostObj: this.querySelector(".slider-object"), labelObj: this.querySelector(".scroller-slider-label"), rangeObj: null, isSelected: false, connected: false, id: '', label: '', labelColor:'', icon:'', left: 20, top: 20, height: 100, // --ui-range-height: 100px; width: 600, // --ui-range-width: 600px; vertical: false, // --ui-range-rotation: rotate(0deg); step: 1, min: 0, max: 100, threshold: 5, value: 0, lastValue: 0, sliderWidth: 300, valueRef: '', valueVar: '', fontsize: '24', showScale: true, scaleColor:'', // --ui-range-scalecolor: rgba(128,128,128,1); rangeBackground:'', // --ui-range-background: rgba(38,50,56,1); rangeBorder:'', // --ui-range-border: 1px solid pink; rangeFilter:'', // --ui-range-filter: blur(2px); rangeBorderRadius:'', // --ui-range-border-radius: 5px; trackWidth:'', // --ui-range-track-width: 3px; trackBackColor:'', // --ui-range-track-back-color: rgba(17,17,17,1); trackStartColor:'', // --ui-range-track-start-color: rgba(255,225,76,1); trackEndColor:'', // --ui-range-track-end-color: rgba(255,76,170,1); thumbWidth:60, // --ui-range-thumb-width: 60px; thumbHeight:60, // --ui-range-thumb-height: 60px; thumbBackground:'', // --ui-range-thumb-background-color: rgba(21, 27, 31, .60); thumbBorder:'', // --ui-range-thumb-border: 2px solid rgba(144, 164, 174, .65); thumbBorderRadius:'', // --ui-range-thumb-border-radius: 7px; thumbFilter:'', //--ui-range-thumb-filter: blur(4px); serverCmd: '', }; this._onClickHandler = (e) => { e.preventDefault(); e.stopPropagation(); return false; }; this._onDblClickHandler = (e) => { e.preventDefault(); e.stopPropagation(); return false; }; this._onChangeHandler = (e) => { this.settings.value = this.settings.rangeObj.value; this.settings.lastValue = this.settings.value; this.updateSlider(); if (!fxApp.isEmpty(this.settings.serverCmd)) { let cmd = this.settings.serverCmd.replace(/\[\[value\]\]/gi,this.settings.value); fxApp.doCommand(cmd); } e.preventDefault(); e.stopPropagation(); return false; }; this._onInputHandler = (e) => { this.settings.value = this.settings.rangeObj.value; this.updateSlider(); if (!fxApp.isEmpty(this.settings.serverCmd)) { let delta = Math.abs(this.settings.value - this.settings.lastValue); if (delta >= this.settings.threshold) { this.settings.lastValue = this.settings.value; let cmd = this.settings.serverCmd.replace(/\[\[value\]\]/gi,this.settings.value); fxApp.doCommand(cmd); } } e.preventDefault(); e.stopPropagation(); return false; }; } connectedCallback() { this.buildSlider(); this.resolveVars(); this.connected = true; } disconnectedCallback() { $(this).remove(); } attributeChangedCallback(name, oldValue, newValue) { switch (name.toLowerCase()) { case 'id': { this.settings.id = newValue; break; } case 'left': { if (fxApp.isNumeric(newValue)) { this.settings.left = parseInt(newValue); this.settings.hostObj.style.left = newValue + "px"; } break; } case 'top': { if (fxApp.isNumeric(newValue)) { this.settings.top = parseInt(newValue); this.settings.hostObj.style.top = newValue + "px"; } break; } case 'height': { if (fxApp.isNumeric(newValue)) { this.settings.height = parseInt(newValue); } break; } case 'width': { if (fxApp.isNumeric(newValue)) { this.settings.width = parseInt(newValue); this.settings.labelObj.style.width = newValue + "px"; } break; } case 'sliderwidth': { if (fxApp.isNumeric(newValue)) { this.settings.sliderWidth = parseInt(newValue); } break; } case 'vertical': { // --ui-range-rotation: rotate(0deg); this.settings.vertical = (newValue == "1") ? true : false; break; } case 'icon': { this.settings.icon = newValue; break; } case 'label': { this.settings.label = newValue; break; } case 'labelcolor': { if (!fxApp.isEmpty(newValue)) { this.settings.labelColor = newValue; this.settings.labelObj.style.color = newValue; } break; } case 'fontsize': { if (!fxApp.isEmpty(newValue)) { this.settings.fontsize = newValue; } break; } case 'step': { if (fxApp.isNumeric(newValue)) { this.settings.step = parseInt(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 'value': { this.settings.valueRef = newValue; break; } case 'showscale': { this.settings.showScale = (newValue == "1") ? true : false; break; } case 'scalecolor': { // --ui-range-scalecolor: rgba(128,128,128,1); this.settings.scaleColor = newValue; break; } case 'rangebackground': { // --ui-range-background: rgba(38,50,56,1); this.settings.rangeBackground = newValue; break; } case 'rangeborder': { // --ui-range-border: 1px solid pink; this.settings.rangeBorder = newValue; break; } case 'rangefilter': { // --ui-range-filter: blur(2px); this.settings.rangeFilter = newValue; break; } case 'rangeborderradius': { // --ui-range-border-radius: 5px; this.settings.rangeBorderRadius = newValue; break; } case 'trackwidth': { // --ui-range-track-width: 3px; this.settings.trackWidth = newValue; break; } case 'trackbackcolor': { // --ui-range-track-back-color: rgba(17,17,17,1); this.settings.trackBackColor = newValue; break; } case 'trackstartcolor': { // --ui-range-track-start-color: rgba(255,225,76,1); this.settings.trackStartColor = newValue; break; } case 'trackendcolor': { // --ui-range-track-end-color: rgba(255,76,170,1); this.settings.trackEndColor = newValue; break; } case 'thumbwidth': { // --ui-range-thumb-width: 60px; this.settings.thumbWidth = newValue; break; } case 'thumbheight': { // --ui-range-thumb-height: 60px; this.settings.thumbHeight = newValue; break; } case 'thumbbackground': { // --ui-range-thumb-background-color: rgba(21, 27, 31, .60); this.settings.thumbBackground = newValue; break; } case 'thumbborder': { // --ui-range-thumb-border: 2px solid rgba(144, 164, 174, .65); this.settings.thumbBorder = newValue; break; } case 'thumbborderradius': { // --ui-range-thumb-border-radius: 7px; this.settings.thumbBorderRadius = newValue; break; } case 'thumbfilter': { //--ui-range-thumb-filter: blur(4px); this.settings.thumbFilter = newValue; break; } case 'servercmd': { this.settings.serverCmd = newValue; break; } } } resolveVars() { let data = {clientname: fxApp.clientName, items: []}; if (this.settings.valueRef.indexOf('[[') >= 0) { data.items.push({type: "range", 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.updateSlider(); } } resolve (data) { if (data.success === true) { data.items.forEach(item => { switch (item.type.toLowerCase()) { case "range": { this.settings.value = parseInt(item.value); this.settings.valueRef = item.reference; this.settings.valueVar = item.normalized; item.components.forEach(cname => { this.classList.add(cname); }); break; } } }); this.updateSlider(); } } setLabel () { let lbl = ''; if (!fxApp.isEmpty(this.settings.icon)) { let iBits = this.settings.icon.split('.'); switch (iBits[0].toLowerCase()) { case "f7": { //f7.bars_chart_round lbl = '' + iBits[1] + ''; break; } case "mi": { //f7.bars_chart_round lbl = '' + iBits[1] + ''; break; } case "bi": { // this.settings.iconObj.innerHTML = ''; break; } case "fab": { // lbl = ''; break; } case "fal": { // lbl = ''; break; } case "far": { // lbl = ''; break; } case "fat": { // lbl = ''; break; } case "fas": { // lbl = ''; break; } case "fad": { // lbl = ''; break; } case "ei": { // lbl = ''; break; } } } this.settings.labelObj.style.fontSize = this.settings.fontsize + 'px'; this.settings.labelObj.style.fontWeight = '300'; this.settings.labelObj.innerHTML = lbl + this.settings.label; } buildSlider () { this.setLabel(); this.settings.baseObj.style.width = this.settings.width + 'px'; this.settings.baseObj.style.height = this.settings.height + 'px'; this.settings.baseObj.style.background = this.settings.rangeBackground; this.settings.baseObj.style.border = this.settings.rangeBorder; this.settings.baseObj.style.boderRadius = this.settings.rangeBorderRadius; // this.settings.hostObj.style.top = this.settings.top + 'px'; this.settings.hostObj.style.left = '30px'; this.settings.hostObj.style.setProperty('--ui-range-min', this.settings.min); this.settings.hostObj.style.setProperty('--ui-range-max', this.settings.max); if (!fxApp.isEmpty(this.settings.rangeBackground)) { this.settings.hostObj.style.setProperty('--ui-range-background', 'none'); //this.settings.rangeBackground); } if (!fxApp.isEmpty(this.settings.rangeBorder)) { this.settings.hostObj.style.setProperty('--ui-range-border', 'none'); //this.settings.rangeBorder); } if (!fxApp.isEmpty(this.settings.rangeBorderRadius)) { this.settings.hostObj.style.setProperty('--ui-range-border-radius', '0'); //this.settings.rangeBorderRadius); } if (!fxApp.isEmpty(this.settings.scaleColor)) { this.settings.hostObj.style.setProperty('--ui-range-scalecolor', this.settings.scaleColor); } if (!fxApp.isEmpty(this.settings.vertical)) { this.settings.hostObj.style.setProperty('--ui-range-rotation', 'rotate(-90deg)'); } if (!fxApp.isEmpty(this.settings.rangeFilter)) { this.settings.hostObj.style.setProperty('--ui-range-filter', 'none'); //this.settings.rangeFilter); } if (!fxApp.isEmpty(this.settings.value)) { this.settings.hostObj.style.setProperty('--ui-range-value', this.settings.value); } if (!fxApp.isEmpty(this.settings.trackWidth)) { this.settings.hostObj.style.setProperty('--ui-range-track-width', this.settings.trackWidth); } if (!fxApp.isEmpty(this.settings.trackBackColor)) { this.settings.hostObj.style.setProperty('--ui-range-track-back-color', this.settings.trackBackColor); } if (!fxApp.isEmpty(this.settings.trackStartColor)) { this.settings.hostObj.style.setProperty('--ui-range-track-start-color', this.settings.trackStartColor); } if (!fxApp.isEmpty(this.settings.trackEndColor)) { this.settings.hostObj.style.setProperty('--ui-range-track-end-color', this.settings.trackEndColor); } if (!fxApp.isEmpty(this.settings.thumbWidth)) { this.settings.hostObj.style.setProperty('--ui-range-thumb-width', this.settings.thumbWidth + "px"); } if (!fxApp.isEmpty(this.settings.thumbHeight)) { this.settings.hostObj.style.setProperty('--ui-range-thumb-height', this.settings.thumbHeight + "px"); } if (!fxApp.isEmpty(this.settings.thumbBackground)) { this.settings.hostObj.style.setProperty('--ui-range-thumb-background-color', this.settings.thumbBackground); } if (!fxApp.isEmpty(this.settings.thumbBorder)) { this.settings.hostObj.style.setProperty('--ui-range-thumb-border', this.settings.thumbBorder); } if (!fxApp.isEmpty(this.settings.thumbBorderRadius)) { this.settings.hostObj.style.setProperty('--ui-range-thumb-border-radius', this.settings.thumbBorderRadius); } if (!fxApp.isEmpty(this.settings.thumbFilter)) { this.settings.hostObj.style.setProperty('--ui-range-thumb-filter', this.settings.thumbFilter); } if (this.settings.showScale == false) { this.settings.hostObj.style.setProperty('--ui-range-scalecolor', 'transparent'); } this.settings.hostObj.style.setProperty('--ui-range-width', (this.settings.sliderWidth) + 'px'); this.settings.hostObj.style.setProperty('--ui-range-height', (this.settings.height * 0.5) + 'px'); this.settings.hostObj.style.setProperty('--ui-range-vertical-rotation', 'rotate(0deg)'); let obj = ''; this.settings.hostObj.innerHTML = obj; this.settings.rangeObj = this.settings.hostObj.querySelector(".range-slider"); this.addEventListener('change', this._onChangeHandler, false); this.addEventListener('input', this._onInputHandler, false); } updateSlider () { this.settings.hostObj.style.setProperty('--ui-range-value', (this.settings.value - this.settings.min) / (this.settings.max - this.settings.min) * 100); let tw = (((this.settings.value - this.settings.min) / (this.settings.max - this.settings.min)) * this.settings.thumbWidth) - (this.settings.thumbWidth / 2); this.settings.hostObj.style.setProperty('--ui-range-thumb-transform', 'translateX(' + tw + 'px)'); this.settings.rangeObj.value = this.settings.value; } setValue (vName, vVal) { if (this.settings.valueVar.toLowerCase().indexOf(vName) >= 0) { this.settings.value = parseInt(vVal); this.updateSlider(); } else { this.resolveVars(); } } } window.customElements.define("ux-scrollslider", uxScrollSlider); export { uxScrollSlider } /* * ----------------------------------------------------------------------------- * 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 }