Rinjae
502 lines
13 KiB
JavaScript
502 lines
13 KiB
JavaScript
|
|
/**
|
|
* (c) jSuites Javascript Web Components (v3.9.0)
|
|
*
|
|
* Website: https://jsuites.net
|
|
* Description: Create amazing web based applications.
|
|
*
|
|
* MIT License
|
|
*
|
|
*/
|
|
|
|
class JsuitesCalendar extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
// Create element
|
|
this.input = document.createElement('input');
|
|
// Append to the DOM
|
|
o.appendChild(this.input);
|
|
// Place holder
|
|
var placeholder = o.getAttribute('placeholder');
|
|
// Place holder
|
|
var format = o.getAttribute('format');
|
|
// Place holder
|
|
var time = o.getAttribute('time');
|
|
// Initial value
|
|
var value = o.getAttribute('value');
|
|
if (value) {
|
|
this.input.value = value;
|
|
o.value = value;
|
|
}
|
|
// Component
|
|
jSuites.calendar(this.input, {
|
|
value: value ? value : null,
|
|
placeholder: placeholder ? placeholder : null,
|
|
format: format ? format : 'YYYY-MM-DD',
|
|
time: time ? true : false,
|
|
onchange: function(el, val) {
|
|
// Change value of the element
|
|
el.setAttribute('value', val);
|
|
o.setAttribute('value', val);
|
|
o.value = val;
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onchange');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onchange");
|
|
el.parentNode.dispatchEvent(e);
|
|
},
|
|
onclose: function(el) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onclose');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onclose");
|
|
el.parentNode.dispatchEvent(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.input) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-calendar', JsuitesCalendar);
|
|
|
|
class JsuitesColor extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
// Create element
|
|
this.input = document.createElement('input');
|
|
// Append to the DOM
|
|
o.appendChild(this.input);
|
|
// Place holder
|
|
var placeholder = o.getAttribute('placeholder');
|
|
// Initial value
|
|
var value = o.getAttribute('value');
|
|
if (value) {
|
|
o.value = value;
|
|
}
|
|
// Component
|
|
jSuites.color(this.input, {
|
|
value: value ? value : null,
|
|
placeholder: placeholder ? placeholder : null,
|
|
onchange: function(el, color) {
|
|
// Change value of the element
|
|
o.setAttribute('value', color);
|
|
o.value = color;
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onchange');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onchange");
|
|
el.parentNode.dispatchEvent(e);
|
|
},
|
|
onclose: function(el) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onclose');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onclose");
|
|
el.parentNode.dispatchEvent(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.input) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-color', JsuitesColor);
|
|
|
|
class JsuitesContextmenu extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
this.el = jSuites.contextmenu(o, {
|
|
items: null,
|
|
onclick: function(a) {
|
|
a.close();
|
|
}
|
|
});
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.el) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-contextmenu', JsuitesContextmenu);
|
|
|
|
class JsuitesEditor extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
this.el = document.createElement('div');
|
|
|
|
// Options
|
|
var options = {};
|
|
// Initial values
|
|
var toolbar = o.getAttribute('toolbar');
|
|
if (toolbar) {
|
|
options.toolbar = toolbar;
|
|
}
|
|
|
|
// Events
|
|
options.onload = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onload');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onload");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
options.onclick = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onclick');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onclick");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
options.onfocus = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onfocus');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onfocus");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
options.onblur = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onblur');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onblur");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
options.onclose = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onclose');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onclose");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
setTimeout(function() {
|
|
jSuites.editor(o, options);
|
|
}, 0);
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.el) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-editor', JsuitesEditor);
|
|
|
|
class JsuitesModal extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
this.el = document.createElement('div');
|
|
|
|
// Options
|
|
var options = {};
|
|
// Initial values
|
|
var title = o.getAttribute('title');
|
|
if (title) {
|
|
options.title = title;
|
|
}
|
|
var width = o.getAttribute('width');
|
|
if (width) {
|
|
options.width = parseInt(width) + 'px';
|
|
}
|
|
var height = o.getAttribute('height');
|
|
if (height) {
|
|
options.height = parseInt(height) + 'px';
|
|
}
|
|
var closed = o.getAttribute('closed');
|
|
if (closed) {
|
|
options.closed = closed;
|
|
}
|
|
|
|
// Events
|
|
options.onopen = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onopen');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onopen");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
options.onclose = function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onclose');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onclose");
|
|
el.dispatchEvent(e);
|
|
}
|
|
|
|
setTimeout(function() {
|
|
jSuites.modal(o, options);
|
|
}, 0);
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.el) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-modal', JsuitesModal);
|
|
|
|
class JsuitesRating extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
// Initial values
|
|
var value = o.getAttribute('value') ? o.getAttribute('value') : null;
|
|
var number = o.getAttribute('number') ? o.getAttribute('number') : 5;
|
|
var tooltip = o.getAttribute('tooltip') ? o.getAttribute('tooltip') : null;
|
|
if (tooltip) {
|
|
tooltip = tooltip.split(',');
|
|
} else {
|
|
tooltip = [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ];
|
|
}
|
|
|
|
jSuites.rating(o, {
|
|
value: value,
|
|
number: number,
|
|
tooltip: tooltip,
|
|
onchange: function(el, v) {
|
|
// Change value of the element
|
|
o.setAttribute('value', v);
|
|
o.value = v;
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onchange');
|
|
if (s) {
|
|
eval(s);
|
|
}
|
|
// Trigger event
|
|
var e = new CustomEvent("onchange");
|
|
el.dispatchEvent(e);
|
|
}
|
|
});
|
|
|
|
// Initiated
|
|
this.initiated = true;
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.initiated) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-rating', JsuitesRating);
|
|
|
|
class JsuitesTags extends HTMLElement {
|
|
constructor() {
|
|
// always call super() first
|
|
super();
|
|
}
|
|
|
|
init(o) {
|
|
// Initial values
|
|
var value = o.getAttribute('value') ? o.getAttribute('value') : null;
|
|
var limit = o.getAttribute('limit') ? o.getAttribute('limit') : null;
|
|
var search = o.getAttribute('search') ? o.getAttribute('search') : null;
|
|
var placeholder = o.getAttribute('placeholder') ? o.getAttribute('placeholder') : null;
|
|
|
|
jSuites.tags(o, {
|
|
value: value,
|
|
limit: limit,
|
|
search: search,
|
|
placeholder: placeholder,
|
|
onbeforechange: function(el, obj, v) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onbeforechange');
|
|
if (s) {
|
|
var newValue = eval(s);
|
|
if (newValue != null) {
|
|
return newValue;
|
|
}
|
|
} else {
|
|
// Trigger event
|
|
var e = new CustomEvent("onbeforechange");
|
|
el.dispatchEvent(e);
|
|
}
|
|
},
|
|
onchange: function(el, obj, v) {
|
|
var newValue = obj.getValue();
|
|
// Change value of the element
|
|
o.setAttribute('value', newValue);
|
|
o.value = newValue;
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onchange');
|
|
if (s) {
|
|
eval(s);
|
|
} else {
|
|
// Trigger event
|
|
var e = new CustomEvent("onchange");
|
|
el.dispatchEvent(e);
|
|
}
|
|
},
|
|
onfocus: function(el, obj, v) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onfocus');
|
|
if (s) {
|
|
eval(s);
|
|
} else {
|
|
// Trigger event
|
|
var e = new CustomEvent("onfocus");
|
|
el.dispatchEvent(e);
|
|
}
|
|
},
|
|
onblur: function(el, obj, v) {
|
|
var newValue = obj.getValue();
|
|
// Change value of the element
|
|
o.setAttribute('value', newValue);
|
|
o.value = newValue;
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onblur');
|
|
if (s) {
|
|
eval(s);
|
|
} else {
|
|
// Trigger event
|
|
var e = new CustomEvent("onblur");
|
|
el.dispatchEvent(e);
|
|
}
|
|
},
|
|
onload: function(el, obj) {
|
|
// Basic HTML event
|
|
var s = o.getAttribute('onload');
|
|
if (s) {
|
|
eval(s);
|
|
} else {
|
|
// Trigger event
|
|
var e = new CustomEvent("onload");
|
|
el.dispatchEvent(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initiated
|
|
this.initiated = true;
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (! this.initiated) {
|
|
this.init(this);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
}
|
|
}
|
|
|
|
window.customElements.define('jsuites-tags', JsuitesTags);
|
|
|
|
|