nodality/dist/range.cjs.js

A lightweight library for declarative UI elements.

/*! For license information please see range.cjs.js.LICENSE.txt */
(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,i(r.key),r)}}function i(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}e.r(t),e.d(t,{Range:()=>l});var l=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el=null,this.minLabel=null,this.maxLabel=null,this.currentLabel=null},(t=[{key:"padding",value:function(e){return this.el.style.padding=e,this}},{key:"toCode",value:function(){var e=JSON.stringify(this.options,null,4);return["new Range().set(".concat(e,")")]}},{key:"set",value:function(e){var t,n,r=this;this.options=e;var i=document.createElement("input");if(i.setAttribute("id","slider"),i.setAttribute("type","range"),i.setAttribute("min",e.min),i.setAttribute("max",e.max),i.setAttribute("value",e.min),i.style.width=null!==(t=e.width)&&void 0!==t?t:"100%",!e.plain){var l,a;i.style.setProperty("-webkit-appearance","none"),i.style.appearance="none",i.style.height="9px",i.style.background=null!==(l=e.style.trackColor)&&void 0!==l?l:"orange",i.style.borderRadius="5px";var o="\n            #slider::-webkit-slider-thumb {\n                -webkit-appearance: none;\n                appearance: none;\n                width: 25px;\n                height: 25px;\n                border-radius: 50%;\n                background: ".concat(null!==(a=e.style.thumbColor)&&void 0!==a?a:"4CAF50",";\n                cursor: pointer;\n            }\n        "),u=document.createElement("style");u.appendChild(document.createTextNode(o)),document.head.appendChild(u)}var s=document.createElement("div");s.style.display="flex",s.style.flexDirection="column",s.style.alignItems="center",s.style.width="100%";var d=document.createElement("div");if(d.style.display="flex",d.style.justifyContent="space-between",d.style.width=null!==(n=e.width)&&void 0!==n?n:"100%",this.minLabel=document.createElement("span"),this.minLabel.textContent=e.min,this.maxLabel=document.createElement("span"),this.maxLabel.textContent=e.max,this.currentLabel=document.createElement("span"),this.currentLabel.textContent=i.value,e.font&&(this.currentLabel.style.fontFamily=e.font),e.font&&(this.minLabel.style.fontFamily=e.font),e.font&&(this.maxLabel.style.fontFamily=e.font),e.plain||(d.appendChild(this.minLabel),d.appendChild(this.currentLabel),d.appendChild(this.maxLabel)),i.addEventListener("input",(function(){r.currentLabel.textContent=i.value})),window.matchMedia("(max-device-width: 415px)").matches)if(e.plain)i.style.width="80%";else{var c,p;i.style.height="20px",i.style.background=null!==(c=e.style.trackColor)&&void 0!==c?c:"1abc9C",i.style.borderRadius="10px",i.style.fontSize="3rem",i.style.width="80%";var y="\n                #slider::-webkit-slider-thumb {\n                    -webkit-appearance: none;\n                    appearance: none;\n                    width: 25px;\n                    height: 25px;\n                    border-radius: 50%;\n                    background: ".concat(null!==(p=e.style.thumbColor)&&void 0!==p?p:"blue",";\n                    cursor: pointer;\n                }\n            "),m=document.createElement("style");m.appendChild(document.createTextNode(y)),document.head.appendChild(m)}return s.appendChild(d),s.appendChild(i),this.el=s,this}},{key:"value",value:function(){return this.el.querySelector("#slider").value}},{key:"render",value:function(e){if(!e)return this.el;document.querySelector(e).appendChild(this.el)}}])&&r(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();window.Range=l,module.exports=t})();