(function(){ let nextTooltipKey = 0; var tooltipData = {}; var tootlipVisible = false; var tooltipEl = LNVue.$(`
`); function findTooltipData(el){ let tooltip = null; while (!tooltip) { tooltip = tooltipData[el.dataset['tooltip']]; el = el.parentElement; } return tooltip; } function tooltipShow(ev,tooltip){ tooltipEl.innerText = tooltip.value; tooltipEl.setAttribute("VISIBLE",""); tootlipVisible = true; } function tooltipHide(ev,tooltip){ tooltipEl.removeAttribute("VISIBLE"); tootlipVisible = false; } function tooltipMouseOver(ev){ if (!document.body.contains(tooltipEl)){ document.body.appendChild(tooltipEl); LN.$idle(()=>{ tooltipMouseOver(ev);}); return; } let tooltip = findTooltipData(ev.target); if (!tooltip) console.log(ev); if (tooltipEl){ tooltipEl.style.left = `${ev.pageX+3}px`; tooltipEl.style.top = `${ev.pageY+3}px`; } if (tooltip.timeout) clearTimeout(tooltip.timeout); if (tootlipVisible){ tooltip.timeout = setTimeout(() => { tooltipHide(ev,tooltip); }, (tooltip.delay ? (tooltip.delay / 4) : 200)); } else { tooltip.timeout = setTimeout(() => { tooltipShow(ev,tooltip); }, tooltip.delay || 800); } } function tooltipMouseOut(ev){ let tooltip = findTooltipData(ev.target); if (tooltip.timeout) clearTimeout(tooltip.timeout); tooltipHide(ev,tooltip); } Vue.directive('tooltip',{ bind: function(el, binding, vnode){ let tooltip = { value: binding.value, timeout: null, delay: null, }; let tooltipKey = nextTooltipKey++; tooltipData[tooltipKey] = tooltip; el.dataset['tooltip'] = tooltipKey; el.addEventListener('mousemove',tooltipMouseOver); el.addEventListener('mouseout',tooltipMouseOut); }, update: function(el, binding, vnode, oldVnode){ let tooltip = findTooltipData(el); tooltip.value = binding.value; }, unbind: function(el, binding, vnode){ el.removeEventListener('mouseover',tooltipMouseOver); el.removeEventListener('mouseout',tooltipMouseOut); }, }); Vue.component('ln-statusbar',{ data: function(){ return { current: LN.Promise.getCurrentPromises(), }; }, computed: { CurrentPromises: function(){ return this.current; } }, template: ` `, }); Vue.component('ln-navitem',{ props: { value: { type: Object, required: true, }, key: String, }, template: ` `, }); Vue.component('ln-navbar',{ props: { value: { type: Object, default: function(){ return LNVue.$_.navigation; } }, component: { type: [ Object, String ], default: 'ln-navitem', }, }, template: ` ` }); Vue.component('ln-textfield',{ props: { value: { type: String, required: true, }, }, template: ``, }); Vue.component('ln-password',{ props: { value: { type: String, required: true, }, }, template: ``, }); Vue.component('ln-textarea',{ props: { value: { type: String, required: true, }, }, template: ``, }); Vue.component('ln-number',{ model: { prop: "value", event: "input", }, props: { value: { required: false, type: Number, }, float: { type: Boolean, default: false, }, }, template: ` `, }); Vue.component('ln-slider',{ model: { prop: 'value', event: 'change', }, props: { value: { type: Number, default: 1, }, min: { type: Number, default: 0, }, max: { type: Number, default: 100, }, step: { type: Number, default: 1, }, islogarithmic: { type: Boolean, default: false, }, values: { default: null, } }, data: function(){ let d = { }; if (this.values instanceof Array){ this.min = 0; this.max = this.values.length - 1; this.step = 1; } else if (this.values instanceof Object){ this.min = 0; this.max = Object.keys(this.values).length - 1; this.step = 1; } else if (this.islogarithmic){ /* ToDo: Implement */ } else { } // console.log(`min=${this.min} max=${this.max} step=${this.step} value=${this.value}`); return d; }, computed: { keys: function(){ if (this.values instanceof Array) { let keys = new Array(this.values.length); for (let n=0;n