(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){
if (!tooltipEl.parentElement)
{
tooltipEl.style.visibility = "hidden";
tooltipEl.style.opacity = 0.0;
tooltipEl.style.visibility = "visible";
}
document.body.appendChild(tooltipEl);
tooltipEl.innerText = tooltip.value;
tooltipEl.style.opacity = 1.0;
tootlipVisible = true;
}
function tooltipHide(ev,tooltip){
tooltipEl.style.opacity = 0.0;
setTimeout(()=>{
document.body.removeChild(tooltipEl);
}, 600);
tootlipVisible = false;
}
function tooltipMouseOver(ev){
let tooltip = findTooltipData(ev.target);
if (!tooltip)
console.log(ev);
if (tooltip.timeout)
clearTimeout(tooltip.timeout);
if (tootlipVisible)
tooltipHide(ev,tooltip);
else
tooltip.timeout = setTimeout(() => {
tooltipShow(ev,tooltip);
}, 800);
if (tooltipEl){
tooltipEl.style.left = `${ev.x+3}px`;
tooltipEl.style.top = `${ev.y+3}px`;
}
}
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,
};
let tooltipKey = nextTooltipKey++;
tooltipData[tooltipKey] = tooltip;
el.dataset['tooltip'] = tooltipKey;
el.addEventListener('mousemove',tooltipMouseOver);
el.addEventListener('mouseout',tooltipMouseOut);
},
inserted: function(el, binding, vnode){
},
update: function(el, binding, vnode, oldVnode){
},
componentUpdated: function(el, binding, vnode, oldVnode){
},
unbind: function(el, binding, vnode){
el.removeEventListener('mouseover',tooltipMouseOver);
el.removeEventListener('mouseout',tooltipMouseOut);
},
});
Vue.component('ln-navitem',{
props: {
href: {
type: String,
required: true,
},
},
template: `
`,
});
Vue.component('ln-navbar',{
props: {
navitems: {
type: Object,
required: true,
}
},
template: `
{{ navitem.label || navitem.href }}
`
});
Vue.component('ln-textfield',{
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
{{ displayValue }}
`,
});
Vue.component("ln-file",{
props: {
file: {
type: Object,
required: true,
},
remove: {
type: Function,
required: false,
}
},
methods: {
},
template: `{{ file.name }} ({{ file.size }}bytes)
`
});
Vue.component('ln-upload',{
model: {
prop: "files",
event: "change",
},
props: {
maxSize: {
type: Number,
default: 0,
},
files: {
type: Array,
default: [],
}
},
data: function(){ return { maxSize: this.maxSize, files: this.files, }; },
methods: {
drop: function(dropEvent){
dropEvent.preventDefault();
for (let n=0;nDateien hierher ziehen oder auswählen:
`,
});
Vue.component('ln-select',{
model: {
prop: "value",
event: "change",
},
props: {
items: {
required: true,
},
value: {
required: true,
},
empty: {
type: Boolean,
default: true,
},
},
computed: {
prepared: {
get: function(){
let prepared = {};
LNVue.each(this.items,(element,index) => {
prepared[index] = element;
});
return prepared;
},
},
},
methods: {
changed: function(ev){
this.$emit("change", ev.target.value );
},
},
template: `
`,
});
})();