init
This commit is contained in:
Rinjae
@@ -0,0 +1,949 @@
|
||||
/**
|
||||
* (c) jSuites Javascript Web Components (v3.9.3)
|
||||
*
|
||||
* Website: https://jsuites.net
|
||||
* Description: Create amazing web based applications.
|
||||
*
|
||||
* MIT License
|
||||
*
|
||||
*/
|
||||
;(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
global.jSuites = factory();
|
||||
}(this, (function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
jSuites.app = (function(el, options) {
|
||||
var obj = {};
|
||||
obj.options = {};
|
||||
|
||||
// Default configuration
|
||||
var defaults = {
|
||||
path: 'views',
|
||||
onbeforechangepage: null,
|
||||
onchangepage: null,
|
||||
onbeforecreatepage: null,
|
||||
oncreatepage: null,
|
||||
onloadpage: null,
|
||||
toolbar: null,
|
||||
detachHiddenPages: false
|
||||
}
|
||||
|
||||
// Loop through our object
|
||||
for (var property in defaults) {
|
||||
if (options && options.hasOwnProperty(property)) {
|
||||
obj.options[property] = options[property];
|
||||
} else {
|
||||
obj.options[property] = defaults[property];
|
||||
}
|
||||
}
|
||||
|
||||
// App
|
||||
el.classList.add('japp');
|
||||
|
||||
// Toolbar
|
||||
var toolbar = document.createElement('div');
|
||||
|
||||
obj.setToolbar = function(o) {
|
||||
if (o) {
|
||||
obj.options.toolbar = o;
|
||||
}
|
||||
obj.toolbar = jSuites.toolbar(toolbar, {
|
||||
app: obj,
|
||||
items: obj.options.toolbar,
|
||||
});
|
||||
el.appendChild(toolbar);
|
||||
}
|
||||
|
||||
obj.hideToolbar = function() {
|
||||
if (toolbar.style.display == '') {
|
||||
toolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
obj.showToolbar = function() {
|
||||
if (toolbar.style.display == 'none') {
|
||||
toolbar.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pages
|
||||
*/
|
||||
obj.pages = function() {
|
||||
/**
|
||||
* Create or access a page
|
||||
*/
|
||||
var component = function(route, o, callback) {
|
||||
var options = {};
|
||||
|
||||
if (o) {
|
||||
if (typeof(o) == 'object') {
|
||||
var options = o;
|
||||
} else {
|
||||
if (! callback && typeof(o) == 'function') {
|
||||
callback = o;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If exists just open
|
||||
if (component.container[route]) {
|
||||
component.show(component.container[route], options, callback);
|
||||
} else {
|
||||
// Create a new page
|
||||
if (! route) {
|
||||
console.error('JSUITES: Error, no route provided');
|
||||
} else {
|
||||
// Closed
|
||||
options.closed = options.closed ? 1 : 0;
|
||||
// Keep Route
|
||||
options.route = route;
|
||||
|
||||
// New page url
|
||||
if (! options.url) {
|
||||
options.url = obj.options.path + route + '.html';
|
||||
}
|
||||
|
||||
// Create new page
|
||||
component.create(options, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new page
|
||||
*/
|
||||
component.create = function(o, callback) {
|
||||
// Create page
|
||||
var page = document.createElement('div');
|
||||
page.classList.add('page');
|
||||
|
||||
// Container
|
||||
component.container[o.route] = page;
|
||||
|
||||
// Keep options
|
||||
page.options = o ? o : {};
|
||||
|
||||
// Always hidden when created
|
||||
page.style.display = 'none';
|
||||
|
||||
var updateDOM = function() {
|
||||
// Remove to avoid id conflicts
|
||||
if (component.current && obj.options.detachHiddenPages == true) {
|
||||
while (component.element.children[0]) {
|
||||
component.element.children[0].parentNode.removeChild(component.element.children[0]);
|
||||
}
|
||||
}
|
||||
|
||||
if (! component.current) {
|
||||
component.element.appendChild(page);
|
||||
} else {
|
||||
component.element.insertBefore(page, component.current.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
if (obj.options.detachHiddenPages == false) {
|
||||
updateDOM();
|
||||
}
|
||||
|
||||
// Create page overwrite
|
||||
var ret = null;
|
||||
if (typeof(obj.options.onbeforecreatepage) == 'function') {
|
||||
var ret = obj.options.onbeforecreatepage(obj, page);
|
||||
if (ret === false) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
jSuites.ajax({
|
||||
url: o.url,
|
||||
method: 'GET',
|
||||
dataType: 'html',
|
||||
queue: true,
|
||||
success: function(result) {
|
||||
if (! page.parentNode) {
|
||||
// Update DOM
|
||||
updateDOM();
|
||||
}
|
||||
|
||||
// Create page overwrite
|
||||
var ret = null;
|
||||
if (typeof(obj.options.oncreatepage) == 'function') {
|
||||
ret = obj.options.oncreatepage(obj, page, result);
|
||||
}
|
||||
|
||||
// Push to refresh controls
|
||||
if (typeof(page.options.onpush) == 'function') {
|
||||
jSuites.refresh(page, page.options.onpush);
|
||||
}
|
||||
|
||||
// Ignore create page actions
|
||||
if (ret !== false) {
|
||||
// Open page
|
||||
page.innerHTML = result;
|
||||
// Get javascript
|
||||
try {
|
||||
parseScript(page);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar
|
||||
if (page.querySelector('.navbar')) {
|
||||
page.classList.add('with-navbar');
|
||||
}
|
||||
|
||||
// Global onload callback
|
||||
if (typeof(obj.options.onloadpage) == 'function') {
|
||||
obj.options.onloadpage(page);
|
||||
}
|
||||
|
||||
// Specific online callback
|
||||
if (typeof(o.onload) == 'function') {
|
||||
o.onload(page);
|
||||
}
|
||||
|
||||
// Show page
|
||||
if (! page.options.closed) {
|
||||
component.show(page, o, callback);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return page;
|
||||
}
|
||||
|
||||
component.show = function(page, o, callback) {
|
||||
var pageIsReady = function() {
|
||||
if (component.current) {
|
||||
component.current.style.display = 'none';
|
||||
|
||||
if (component.current && obj.options.detachHiddenPages == true) {
|
||||
if (component.current.parentNode) {
|
||||
component.current.parentNode.removeChild(component.current);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// New page
|
||||
if (typeof(obj.options.onchangepage) == 'function') {
|
||||
obj.options.onchangepage(obj, component.current, page, o);
|
||||
}
|
||||
|
||||
// Enter event
|
||||
if (typeof(page.options.onenter) == 'function') {
|
||||
page.options.onenter(obj, page, component.current);
|
||||
}
|
||||
|
||||
// Callback
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(obj, page);
|
||||
}
|
||||
|
||||
// Current page
|
||||
component.current = page;
|
||||
}
|
||||
|
||||
// Append page in case was detached
|
||||
if (! page.parentNode) {
|
||||
component.element.appendChild(page);
|
||||
}
|
||||
|
||||
if (component.current) {
|
||||
if (component.current != page) {
|
||||
// Show page
|
||||
page.style.display = '';
|
||||
|
||||
var a = Array.prototype.indexOf.call(component.element.children, component.current);
|
||||
var b = Array.prototype.indexOf.call(component.element.children, page);
|
||||
|
||||
// Before leave the page
|
||||
if (typeof(obj.options.onbeforechangepage) == 'function') {
|
||||
var ret = obj.options.onbeforechangepage(obj, component.current, page, o);
|
||||
if (ret === false) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Leave event
|
||||
if (typeof(page.options.onleave) == 'function') {
|
||||
page.options.onleave(obj, component.current);
|
||||
}
|
||||
|
||||
// Animation only on mobile
|
||||
var rect = component.element.getBoundingClientRect();
|
||||
|
||||
// Move to the top
|
||||
window.scrollTo({ top: 0 });
|
||||
|
||||
// Page is ready
|
||||
if (rect.width < 800 && obj.options.detachHiddenPages == false) {
|
||||
jSuites.animation.slideLeft(component.element, (a < b ? 0 : 1), function() {
|
||||
if (component.current != page) {
|
||||
pageIsReady();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (component.current != page) {
|
||||
pageIsReady();
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Show
|
||||
page.style.display = '';
|
||||
|
||||
// Page is ready
|
||||
pageIsReady();
|
||||
}
|
||||
|
||||
// Select toolbar item
|
||||
if (page.options.toolbarItem) {
|
||||
obj.toolbar.selectItem(page.options.toolbarItem);
|
||||
}
|
||||
|
||||
// Add history
|
||||
if (! o || ! o.ignoreHistory) {
|
||||
// Add history
|
||||
window.history.pushState({ route: page.options.route }, page.options.title, page.options.route);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a page by route
|
||||
*/
|
||||
component.get = function(route) {
|
||||
if (component.container[route]) {
|
||||
return component.container[route];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the page container
|
||||
*/
|
||||
component.reset = function() {
|
||||
// Container
|
||||
component.element.innerHTML = '';
|
||||
// Current
|
||||
component.current = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the page container
|
||||
*/
|
||||
component.destroy = function() {
|
||||
// Reset container
|
||||
component.reset();
|
||||
// Destroy references
|
||||
component.container = {};
|
||||
}
|
||||
/**
|
||||
* Page container controller
|
||||
*/
|
||||
component.container = {};
|
||||
|
||||
/**
|
||||
* Pages DOM container
|
||||
*/
|
||||
var pagesContainer = el.querySelector('.pages');
|
||||
if (pagesContainer) {
|
||||
component.element = pagesContainer;
|
||||
} else {
|
||||
component.element = document.createElement('div');
|
||||
component.element.className = 'pages';
|
||||
}
|
||||
|
||||
// Prefetched content
|
||||
if (el.innerHTML) {
|
||||
// Create with the prefetched content
|
||||
var page = document.createElement('div');
|
||||
page.classList.add('page');
|
||||
while (el.childNodes[0]) {
|
||||
page.appendChild(el.childNodes[0]);
|
||||
}
|
||||
if (el.innerHTML) {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = component.element.innerHTML;
|
||||
page.appendChild(div);
|
||||
}
|
||||
// Container
|
||||
var route = window.location.pathname;
|
||||
component.container[route] = page;
|
||||
|
||||
// Keep options
|
||||
page.options = {};
|
||||
page.options.route = route;
|
||||
|
||||
// Current page
|
||||
component.current = page;
|
||||
|
||||
// Place the page to the right container
|
||||
if (! component.current) {
|
||||
component.element.appendChild(page);
|
||||
} else {
|
||||
component.element.insertBefore(page, component.current.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
// Append page container to the application
|
||||
el.appendChild(component.element);
|
||||
|
||||
return component;
|
||||
}();
|
||||
|
||||
/**
|
||||
* Panel methods
|
||||
*/
|
||||
obj.panel = function() {
|
||||
var panel = null;
|
||||
|
||||
var component = function(route, o) {
|
||||
if (! panel) {
|
||||
// Create element
|
||||
panel = document.createElement('div');
|
||||
panel.classList.add('panel');
|
||||
panel.classList.add('panel-left');
|
||||
panel.style.display = 'none';
|
||||
|
||||
// Bind to the app
|
||||
el.appendChild(panel);
|
||||
}
|
||||
|
||||
// Remote content
|
||||
if (route) {
|
||||
// URL
|
||||
if (! o) {
|
||||
o = {};
|
||||
}
|
||||
if (! o.url) {
|
||||
o.url = obj.options.path + route + '.html';
|
||||
}
|
||||
// Route
|
||||
o.route = route;
|
||||
// Panel
|
||||
panel.options = o;
|
||||
|
||||
// Request remote data
|
||||
jSuites.ajax({
|
||||
url: o.url,
|
||||
method: 'GET',
|
||||
dataType: 'html',
|
||||
success: function(result) {
|
||||
// Create page overwrite
|
||||
var ret = null;
|
||||
if (typeof(obj.options.oncreatepage) == 'function') {
|
||||
ret = obj.options.oncreatepage(obj, panel, result);
|
||||
}
|
||||
|
||||
// Ignore create page actions
|
||||
if (ret !== false) {
|
||||
// Open page
|
||||
panel.innerHTML = result;
|
||||
// Get javascript
|
||||
parseScript(page);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
component.show();
|
||||
}
|
||||
}
|
||||
|
||||
component.show = function() {
|
||||
// Show panel
|
||||
if (panel && panel.style.display == 'none') {
|
||||
panel.style.display = '';
|
||||
// Add animation
|
||||
if (panel.classList.contains('panel-left')) {
|
||||
jSuites.animation.slideLeft(panel, 1);
|
||||
} else {
|
||||
jSuites.animation.slideRight(panel, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component.hide = function() {
|
||||
if (panel && panel.style.display == '') {
|
||||
// Animation
|
||||
if (panel.classList.contains('panel-left')) {
|
||||
jSuites.animation.slideLeft(panel, 0, function() {
|
||||
panel.style.display = 'none';
|
||||
});
|
||||
} else {
|
||||
jSuites.animation.slideRight(panel, 0, function() {
|
||||
panel.animation.style.display = 'none';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component.get = function() {
|
||||
return panel;
|
||||
}
|
||||
|
||||
component.destroy = function() {
|
||||
el.removeChild(panel);
|
||||
panel = null;
|
||||
}
|
||||
|
||||
return component;
|
||||
}();
|
||||
|
||||
// Actionsheet
|
||||
obj.actionsheet = jSuites.actionsheet(el, obj);
|
||||
|
||||
/*
|
||||
* Parse javascript from an element
|
||||
*/
|
||||
var parseScript = function(element) {
|
||||
// Get javascript
|
||||
var script = element.getElementsByTagName('script');
|
||||
// Run possible inline scripts
|
||||
for (var i = 0; i < script.length; i++) {
|
||||
// Get type
|
||||
var type = script[i].getAttribute('type');
|
||||
if (! type || type == 'text/javascript' || type == 'text/loader') {
|
||||
eval(script[i].text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var controlSwipeLeft = function(e) {
|
||||
var element = jSuites.findElement(e.target, 'option');
|
||||
|
||||
if (element && element.querySelector('.option-actions')) {
|
||||
element.scrollTo({
|
||||
left: 100,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} else {
|
||||
obj.panel.hide();
|
||||
}
|
||||
}
|
||||
|
||||
var controlSwipeRight = function(e) {
|
||||
var element = jSuites.findElement(e.target, 'option');
|
||||
if (element && element.querySelector('.option-actions')) {
|
||||
element.scrollTo({
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} else {
|
||||
obj.panel.show();
|
||||
}
|
||||
}
|
||||
|
||||
var actionElement = null;
|
||||
|
||||
var actionDown = function(e) {
|
||||
// Grouped options
|
||||
if (e.target.classList.contains('option-title')) {
|
||||
if (e.target.classList.contains('selected')) {
|
||||
e.target.classList.remove('selected');
|
||||
} else {
|
||||
e.target.classList.add('selected');
|
||||
}
|
||||
}
|
||||
|
||||
// Grouped buttons
|
||||
if (e.target.parentNode.classList.contains('jbuttons-group')) {
|
||||
for (var j = 0; j < e.target.parentNode.children.length; j++) {
|
||||
e.target.parentNode.children[j].classList.remove('selected');
|
||||
}
|
||||
e.target.classList.add('selected');
|
||||
}
|
||||
|
||||
// App links
|
||||
actionElement = jSuites.findElement(e.target, function(e) {
|
||||
return e.tagName == 'A' && e.getAttribute('href') ? e : false;
|
||||
});
|
||||
|
||||
if (actionElement) {
|
||||
var link = actionElement.getAttribute('href');
|
||||
if (link == '#back') {
|
||||
window.history.back();
|
||||
} else if (link == '#panel') {
|
||||
obj.panel();
|
||||
} else {
|
||||
if (actionElement.classList.contains('link')) {
|
||||
actionElement = null;
|
||||
} else {
|
||||
obj.pages(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var actionUp = function(e) {
|
||||
obj.actionsheet.close();
|
||||
|
||||
if (actionElement) {
|
||||
e.preventDefault();
|
||||
actionElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
el.addEventListener('swipeleft', controlSwipeLeft);
|
||||
el.addEventListener('swiperight', controlSwipeRight);
|
||||
|
||||
if ('ontouchstart' in document.documentElement === true) {
|
||||
document.addEventListener('touchstart', actionDown);
|
||||
document.addEventListener('touchend', actionUp);
|
||||
} else {
|
||||
document.addEventListener('mousedown', actionDown);
|
||||
document.addEventListener('click', function(e) {
|
||||
actionUp(e);
|
||||
});
|
||||
}
|
||||
|
||||
window.onpopstate = function(e) {
|
||||
if (e.state && e.state.route) {
|
||||
if (obj.pages.get(e.state.route)) {
|
||||
obj.pages(e.state.route, { ignoreHistory: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (obj.options.toolbar) {
|
||||
obj.setToolbar();
|
||||
}
|
||||
|
||||
el.app = obj;
|
||||
|
||||
return obj;
|
||||
});
|
||||
|
||||
jSuites.actionsheet = (function(el, component) {
|
||||
var obj = function(options) {
|
||||
// Reset container
|
||||
actionContent.innerHTML = '';
|
||||
|
||||
// Create new elements
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
var actionGroup = document.createElement('div');
|
||||
actionGroup.className = 'jactionsheet-group';
|
||||
|
||||
for (var j = 0; j < options[i].length; j++) {
|
||||
var v = options[i][j];
|
||||
var actionItem = document.createElement('div');
|
||||
var actionInput = document.createElement('input');
|
||||
actionInput.type = 'button';
|
||||
actionInput.value = v.title;
|
||||
if (v.className) {
|
||||
actionInput.className = v.className;
|
||||
}
|
||||
if (v.onclick) {
|
||||
actionInput.event = v.onclick;
|
||||
actionInput.onclick = function() {
|
||||
this.event(component, this);
|
||||
}
|
||||
}
|
||||
if (v.action == 'cancel') {
|
||||
actionInput.style.color = 'red';
|
||||
}
|
||||
actionItem.appendChild(actionInput);
|
||||
actionGroup.appendChild(actionItem);
|
||||
}
|
||||
|
||||
actionContent.appendChild(actionGroup);
|
||||
}
|
||||
|
||||
// Show
|
||||
actionsheet.style.display = '';
|
||||
|
||||
// Animation
|
||||
jSuites.animation.slideBottom(actionContent, true);
|
||||
}
|
||||
|
||||
obj.close = function() {
|
||||
if (actionsheet.style.display != 'none') {
|
||||
// Remove any existing actionsheet
|
||||
jSuites.animation.slideBottom(actionContent, false, function() {
|
||||
actionsheet.style.display = 'none';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
obj.get = function() {
|
||||
return actionsheet;
|
||||
}
|
||||
|
||||
// Init action sheet
|
||||
var actionsheet = document.createElement('div');
|
||||
actionsheet.className = 'jactionsheet';
|
||||
actionsheet.style.display = 'none';
|
||||
|
||||
var actionContent = document.createElement('div');
|
||||
actionContent.className = 'jactionsheet-content';
|
||||
actionsheet.appendChild(actionContent);
|
||||
|
||||
// Append actionsheet container to the application
|
||||
el.appendChild(actionsheet);
|
||||
|
||||
el.actionsheet = obj;
|
||||
|
||||
return obj;
|
||||
});
|
||||
|
||||
jSuites.dialog = (function() {
|
||||
var obj = {};
|
||||
obj.options = {};
|
||||
|
||||
var dialog = null;
|
||||
var dialogTitle = null;
|
||||
var dialogHeader = null;
|
||||
var dialogMessage = null;
|
||||
var dialogFooter = null;
|
||||
var dialogContainer = null;
|
||||
var dialogConfirm = null;
|
||||
var dialogConfirmButton = null;
|
||||
var dialogCancel = null;
|
||||
var dialogCancelButton = null;
|
||||
|
||||
obj.open = function(options) {
|
||||
if (! jSuites.dialog.hasEvents) {
|
||||
obj.init();
|
||||
|
||||
jSuites.dialog.hasEvents = true;
|
||||
}
|
||||
obj.options = options;
|
||||
|
||||
if (obj.options.title) {
|
||||
dialogTitle.innerHTML = obj.options.title;
|
||||
}
|
||||
|
||||
if (obj.options.message) {
|
||||
dialogMessage.innerHTML = obj.options.message;
|
||||
}
|
||||
|
||||
if (! obj.options.confirmLabel) {
|
||||
obj.options.confirmLabel = 'OK';
|
||||
}
|
||||
dialogConfirmButton.value = obj.options.confirmLabel;
|
||||
|
||||
if (! obj.options.cancelLabel) {
|
||||
obj.options.cancelLabel = 'Cancel';
|
||||
}
|
||||
dialogCancelButton.value = obj.options.cancelLabel;
|
||||
|
||||
if (obj.options.type == 'confirm') {
|
||||
dialogCancelButton.parentNode.style.display = '';
|
||||
} else {
|
||||
dialogCancelButton.parentNode.style.display = 'none';
|
||||
}
|
||||
|
||||
// Append element to the app
|
||||
dialog.style.opacity = 100;
|
||||
|
||||
// Append to the page
|
||||
if (jSuites.el) {
|
||||
jSuites.el.appendChild(dialog);
|
||||
} else {
|
||||
document.body.appendChild(dialog);
|
||||
}
|
||||
|
||||
// Focus
|
||||
dialog.focus();
|
||||
|
||||
// Show
|
||||
setTimeout(function() {
|
||||
dialogContainer.style.opacity = 100;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
obj.close = function() {
|
||||
dialog.style.opacity = 0;
|
||||
dialogContainer.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
dialog.remove();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
obj.init = function() {
|
||||
dialog = document.createElement('div');
|
||||
dialog.setAttribute('tabindex', '901');
|
||||
dialog.className = 'jdialog';
|
||||
dialog.id = 'dialog';
|
||||
|
||||
dialogHeader = document.createElement('div');
|
||||
dialogHeader.className = 'jdialog-header';
|
||||
|
||||
dialogTitle = document.createElement('div');
|
||||
dialogTitle.className = 'jdialog-title';
|
||||
dialogHeader.appendChild(dialogTitle);
|
||||
|
||||
dialogMessage = document.createElement('div');
|
||||
dialogMessage.className = 'jdialog-message';
|
||||
dialogHeader.appendChild(dialogMessage);
|
||||
|
||||
dialogFooter = document.createElement('div');
|
||||
dialogFooter.className = 'jdialog-footer';
|
||||
|
||||
dialogContainer = document.createElement('div');
|
||||
dialogContainer.className = 'jdialog-container';
|
||||
dialogContainer.appendChild(dialogHeader);
|
||||
dialogContainer.appendChild(dialogFooter);
|
||||
|
||||
// Confirm
|
||||
dialogConfirm = document.createElement('div');
|
||||
dialogConfirmButton = document.createElement('input');
|
||||
dialogConfirmButton.value = obj.options.confirmLabel;
|
||||
dialogConfirmButton.type = 'button';
|
||||
dialogConfirmButton.onclick = function() {
|
||||
if (typeof(obj.options.onconfirm) == 'function') {
|
||||
obj.options.onconfirm();
|
||||
}
|
||||
obj.close();
|
||||
};
|
||||
dialogConfirm.appendChild(dialogConfirmButton);
|
||||
dialogFooter.appendChild(dialogConfirm);
|
||||
|
||||
// Cancel
|
||||
dialogCancel = document.createElement('div');
|
||||
dialogCancelButton = document.createElement('input');
|
||||
dialogCancelButton.value = obj.options.cancelLabel;
|
||||
dialogCancelButton.type = 'button';
|
||||
dialogCancelButton.onclick = function() {
|
||||
if (typeof(obj.options.oncancel) == 'function') {
|
||||
obj.options.oncancel();
|
||||
}
|
||||
obj.close();
|
||||
}
|
||||
dialogCancel.appendChild(dialogCancelButton);
|
||||
dialogFooter.appendChild(dialogCancel);
|
||||
|
||||
// Dialog
|
||||
dialog.appendChild(dialogContainer);
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.which == 13) {
|
||||
if (typeof(obj.options.onconfirm) == 'function') {
|
||||
jSuites.dialog.options.onconfirm();
|
||||
}
|
||||
obj.close();
|
||||
} else if (e.which == 27) {
|
||||
obj.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return obj;
|
||||
})();
|
||||
|
||||
jSuites.confirm = (function(message, onconfirm) {
|
||||
if (jSuites.getWindowWidth() < 800) {
|
||||
jSuites.dialog.open({
|
||||
type: 'confirm',
|
||||
message: message,
|
||||
title: 'Confirmation',
|
||||
onconfirm: onconfirm,
|
||||
});
|
||||
} else {
|
||||
if (confirm(message)) {
|
||||
onconfirm();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
jSuites.refresh = (function(el, options) {
|
||||
// Controls
|
||||
var touchPosition = null;
|
||||
var pushToRefresh = null;
|
||||
|
||||
// Page touch move
|
||||
var pageTouchMove = function(e, page) {
|
||||
if (typeof(page.options.onpush) == 'function') {
|
||||
if (page.scrollTop < 5) {
|
||||
if (! touchPosition) {
|
||||
touchPosition = {};
|
||||
touchPosition.x = e.touches[0].clientX;
|
||||
touchPosition.y = e.touches[0].clientY;
|
||||
}
|
||||
|
||||
var height = e.touches[0].clientY - touchPosition.y;
|
||||
if (height > 70) {
|
||||
if (! pushToRefresh.classList.contains('ready')) {
|
||||
pushToRefresh.classList.add('ready');
|
||||
}
|
||||
} else {
|
||||
if (pushToRefresh.classList.contains('ready')) {
|
||||
pushToRefresh.classList.remove('ready');
|
||||
}
|
||||
pushToRefresh.style.height = height + 'px';
|
||||
|
||||
if (height > 20) {
|
||||
if (! pushToRefresh.classList.contains('holding')) {
|
||||
pushToRefresh.classList.add('holding');
|
||||
page.insertBefore(pushToRefresh, page.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Page touch end
|
||||
var pageTouchEnd = function(e, page) {
|
||||
if (typeof(page.options.onpush) == 'function') {
|
||||
// Remove holding
|
||||
pushToRefresh.classList.remove('holding');
|
||||
// Refresh or not refresh
|
||||
if (! pushToRefresh.classList.contains('ready')) {
|
||||
// Reset and not refresh
|
||||
pushToRefresh.style.height = '';
|
||||
obj.hide();
|
||||
} else {
|
||||
pushToRefresh.classList.remove('ready');
|
||||
// Loading indication
|
||||
setTimeout(function() {
|
||||
obj.hide();
|
||||
}, 1000);
|
||||
|
||||
// Refresh
|
||||
if (typeof(page.options.onpush) == 'function') {
|
||||
page.options.onpush(page);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var obj = function(element, callback) {
|
||||
if (! pushToRefresh) {
|
||||
pushToRefresh = document.createElement('div');
|
||||
pushToRefresh.className = 'jrefresh';
|
||||
}
|
||||
|
||||
element.addEventListener('touchmove', function(e) {
|
||||
pageTouchMove(e, element);
|
||||
});
|
||||
element.addEventListener('touchend', function(e) {
|
||||
pageTouchEnd(e, element);
|
||||
});
|
||||
if (! element.options) {
|
||||
element.options = {};
|
||||
}
|
||||
if (typeof(callback) == 'function') {
|
||||
element.options.onpush = callback;
|
||||
}
|
||||
}
|
||||
|
||||
obj.hide = function() {
|
||||
if (pushToRefresh.parentNode) {
|
||||
pushToRefresh.parentNode.removeChild(pushToRefresh);
|
||||
}
|
||||
touchPosition = null;
|
||||
}
|
||||
|
||||
return obj;
|
||||
})();
|
||||
|
||||
|
||||
|
||||
return jSuites;
|
||||
|
||||
})));
|
||||
Reference in New Issue
Block a user