init
This commit is contained in:
Rinjae
@@ -0,0 +1,501 @@
|
||||
|
||||
/**
|
||||
* (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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user