Comparing version 3.5.4 to 3.6.0
@@ -5,23 +5,19 @@ jSuites.app = (function(el, options) { | ||
// Path | ||
obj.el = el; | ||
obj.options.path = 'pages'; | ||
// Default configuration | ||
var defaults = { | ||
path: 'views', | ||
onbeforechangepage: null, | ||
onchangepage: null, | ||
oncreatepage: null, | ||
onloadpage: null, | ||
toolbar: null, | ||
} | ||
// Global elements | ||
var panel = null; | ||
var actionsheet = document.createElement('div'); | ||
actionsheet.className = 'jactionsheet'; | ||
actionsheet.style.display = 'none'; | ||
var actionContent = document.createElement('div'); | ||
actionContent.className = 'jactionsheet-content'; | ||
actionsheet.appendChild(actionContent); | ||
// Page container | ||
var pages = document.querySelector('.pages'); | ||
if (! pages) { | ||
pages = document.createElement('div'); | ||
pages.className = 'pages'; | ||
el.appendChild(pages); | ||
// 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]; | ||
} | ||
} | ||
@@ -32,19 +28,12 @@ | ||
// Jsuites | ||
document.body.classList.add('jsuites'); | ||
/* | ||
* 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') { | ||
eval(script[i].innerHTML); | ||
} | ||
obj.setToolbar = function(toolbar) { | ||
if (toolbar) { | ||
obj.options.toolbar = toolbar; | ||
} | ||
var toolbar = document.createElement('div'); | ||
obj.toolbar = jSuites.toolbar(toolbar, { | ||
app: obj, | ||
items: obj.options.toolbar, | ||
}); | ||
el.appendChild(toolbar); | ||
} | ||
@@ -55,317 +44,404 @@ | ||
*/ | ||
obj.pages = function(route, mixed) { | ||
if (! obj.pages.container[route]) { | ||
if (! route) { | ||
console.error('JSUITES: Error, no route provided'); | ||
obj.pages = function() { | ||
/** | ||
* Create or access a page | ||
*/ | ||
var component = function(route, o, callback) { | ||
// Page options | ||
if (o && typeof(o) == 'object') { | ||
var options = o; | ||
} else { | ||
if (typeof(mixed) == 'function') { | ||
var options = {}; | ||
var callback = mixed; | ||
} else { | ||
// Page options | ||
var options = mixed ? mixed : {}; | ||
var options = {}; | ||
if (! callback && typeof(o) == 'function') { | ||
callback = o; | ||
} | ||
} | ||
// Closed | ||
options.closed = mixed && mixed.closed ? 1 : 0; | ||
// Keep Route | ||
options.route = route; | ||
// 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) { | ||
var routePath = route.split('#'); | ||
options.url = obj.options.path + routePath[0] + '.html'; | ||
// New page url | ||
if (! options.url) { | ||
options.url = obj.options.path + route + '.html'; | ||
} | ||
// Create new page | ||
component.create(options, callback); | ||
} | ||
// Title | ||
if (! options.title) { | ||
options.title = 'Untitled'; | ||
} | ||
} | ||
} | ||
// Create new page | ||
obj.pages.container[route] = obj.pages.create(options, callback ? callback : null); | ||
/** | ||
* 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; | ||
// Always hidden | ||
page.style.display = 'none'; | ||
// Keep options | ||
page.options = o ? o : {}; | ||
if (! component.current) { | ||
pages.appendChild(page); | ||
} else { | ||
pages.insertBefore(page, component.current.nextSibling); | ||
} | ||
} else { | ||
// Update config | ||
if (mixed) { | ||
// History | ||
var ignoreHistory = 0; | ||
if (typeof(mixed) == 'function') { | ||
var callback = mixed; | ||
} else { | ||
if (typeof(mixed.onenter) == 'function') { | ||
obj.pages.container[route].options.onenter = mixed.onenter; | ||
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, page, result); | ||
} | ||
if (typeof(mixed.onleave) == 'function') { | ||
obj.pages.container[route].options.onleave = mixed.onleave; | ||
// Push to refresh controls | ||
if (typeof(page.options.onpush) == 'function') { | ||
jSuites.refresh(page, page.options.onpush); | ||
} | ||
// Ignore history | ||
ignoreHistory = mixed.ignoreHistory ? 1 : 0; | ||
} | ||
} | ||
// Ignore create page actions | ||
if (ret !== false) { | ||
// Open page | ||
page.innerHTML = result; | ||
// Get javascript | ||
parseScript(page); | ||
} | ||
obj.pages.show(obj.pages.container[route], ignoreHistory, callback ? callback : null); | ||
} | ||
} | ||
// Global onload callback | ||
if (typeof(obj.options.onloadpage) == 'function') { | ||
obj.options.onloadpage(page); | ||
} | ||
// Container | ||
obj.pages.container = {}; | ||
// Specific online callback | ||
if (typeof(o.onload) == 'function') { | ||
o.onload(page); | ||
} | ||
/** | ||
* Show one page | ||
*/ | ||
obj.pages.show = function(page, ignoreHistory, callback) { | ||
if (obj.page) { | ||
if (obj.page != page) { | ||
// Keep scroll in the top | ||
window.scrollTo({ top: 0 }); | ||
// Show page | ||
if (! page.options.closed) { | ||
component.show(page, o, callback); | ||
} | ||
} | ||
}); | ||
// Show page | ||
page.style.display = ''; | ||
return page; | ||
} | ||
var a = Array.prototype.indexOf.call(pages.children, obj.page); | ||
var b = Array.prototype.indexOf.call(pages.children, page); | ||
// Leave | ||
if (typeof(obj.page.options.onleave) == 'function') { | ||
obj.page.options.onleave(obj.page, page, ignoreHistory); | ||
component.show = function(page, o, callback) { | ||
var pageIsReady = function() { | ||
// New page | ||
if (typeof(obj.options.onchangepage) == 'function') { | ||
obj.options.onchangepage(obj, component.current, page, o); | ||
} | ||
jSuites.animation.slideLeft(pages, (a < b ? 0 : 1), function() { | ||
obj.page.style.display = 'none'; | ||
obj.page = page; | ||
}); | ||
// Enter | ||
// Enter event | ||
if (typeof(page.options.onenter) == 'function') { | ||
page.options.onenter(page, obj.page, ignoreHistory); | ||
page.options.onenter(obj, page, component.current); | ||
} | ||
} | ||
} else { | ||
// Show | ||
page.style.display = ''; | ||
// Enter | ||
if (typeof(page.options.onenter) == 'function') { | ||
page.options.onenter(page); | ||
// Callback | ||
if (typeof(callback) == 'function') { | ||
callback(obj, page); | ||
} | ||
// Current page | ||
component.current = page; | ||
} | ||
// Keep current | ||
obj.page = page; | ||
} | ||
if (component.current) { | ||
if (component.current != page) { | ||
// Keep scroll in the top | ||
window.scrollTo({ top: 0 }); | ||
// Add history | ||
if (! ignoreHistory) { | ||
// Add history | ||
window.history.pushState({ route: page.options.route }, page.options.title, page.options.route); | ||
} | ||
// Show page | ||
page.style.display = ''; | ||
// Callback | ||
if (typeof(callback) == 'function') { | ||
callback(page); | ||
} | ||
} | ||
var a = Array.prototype.indexOf.call(pages.children, component.current); | ||
var b = Array.prototype.indexOf.call(pages.children, page); | ||
/** | ||
* Create a new page | ||
*/ | ||
obj.pages.create = function(options, callback) { | ||
// Create page | ||
var page = document.createElement('div'); | ||
page.classList.add('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; | ||
} | ||
} | ||
// Always hidden | ||
page.style.display = 'none'; | ||
// Leave event | ||
if (typeof(page.options.onleave) == 'function') { | ||
page.options.onleave(obj, component.current); | ||
} | ||
// Keep options | ||
page.options = options ? options : {}; | ||
jSuites.animation.slideLeft(pages, (a < b ? 0 : 1), function() { | ||
if (component.current != page) { | ||
component.current.style.display = 'none'; | ||
if (! obj.page) { | ||
pages.appendChild(page); | ||
} else { | ||
pages.insertBefore(page, obj.page.nextSibling); | ||
} | ||
// Page is ready | ||
pageIsReady(); | ||
} | ||
}); | ||
} | ||
} else { | ||
// Show | ||
page.style.display = ''; | ||
jSuites.ajax({ | ||
url: page.options.url, | ||
method: 'GET', | ||
success: function(result) { | ||
// Push to refresh controls | ||
jSuites.refresh(page, page.options.onpush); | ||
// Page is ready | ||
pageIsReady(); | ||
} | ||
// Open page | ||
page.innerHTML = result; | ||
// Get javascript | ||
parseScript(page); | ||
// Set title | ||
page.setTitle = function(text) { | ||
this.children[0].children[0].children[1].innerHTML = text; | ||
} | ||
// Show page | ||
if (! page.options.closed) { | ||
obj.pages.show(page); | ||
} | ||
// Onload callback | ||
if (typeof(page.options.onload) == 'function') { | ||
page.options.onload(page); | ||
} | ||
// Force callback | ||
if (typeof(callback) == 'function') { | ||
callback(page); | ||
} | ||
// Select toolbar item | ||
if (page.options.toolbarItem) { | ||
obj.toolbar.selectItem(page.options.toolbarItem); | ||
} | ||
}); | ||
return page; | ||
} | ||
// Add history | ||
if (! o || ! o.ignoreHistory) { | ||
// Add history | ||
window.history.pushState({ route: page.options.route }, page.options.title, page.options.route); | ||
} | ||
} | ||
// Get page | ||
obj.pages.get = function(route) { | ||
if (obj.pages.container[route]) { | ||
return obj.pages.container[route]; | ||
/** | ||
* Get a page by route | ||
*/ | ||
component.get = function(route) { | ||
if (component.container[route]) { | ||
return component.container[route]; | ||
} | ||
} | ||
} | ||
obj.pages.destroy = function() { | ||
// Current is null | ||
obj.page = null; | ||
// Destroy containers | ||
obj.pages.container = {}; | ||
// Reset container | ||
if (pages) { | ||
pages.innerHTML = ''; | ||
/** | ||
* Destroy a page | ||
*/ | ||
component.destroy = function() { | ||
// TODO: create a destroy method | ||
} | ||
} | ||
/** | ||
* Page container controller | ||
*/ | ||
component.container = {}; | ||
/** | ||
* Pages DOM container | ||
*/ | ||
var pages = el.querySelector('.pages'); | ||
if (! pages) { | ||
pages = document.createElement('div'); | ||
pages.className = 'pages'; | ||
// Append page container to the application | ||
el.appendChild(pages); | ||
} | ||
return component; | ||
}(); | ||
/** | ||
* Panel methods | ||
*/ | ||
obj.panel = function(route, options) { | ||
if (! panel) { | ||
// Create element | ||
panel = document.createElement('div'); | ||
panel.classList.add('panel'); | ||
panel.classList.add('panel-left'); | ||
panel.style.display = 'none'; | ||
obj.panel = function() { | ||
var panel = null; | ||
// Bind to the app | ||
el.appendChild(panel); | ||
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) { | ||
var url = obj.options.path + route + '.html'; | ||
// 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: url, | ||
url: o.url, | ||
method: 'GET', | ||
dataType: 'html', | ||
success: function(result) { | ||
// Set content | ||
panel.innerHTML = result; | ||
// Parse scripts | ||
parseScript(panel); | ||
// Visible? | ||
if (! options || ! options.closed) { | ||
// Show panel | ||
obj.panel.show(); | ||
// 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 { | ||
obj.panel.show(); | ||
component.show(); | ||
} | ||
} else { | ||
obj.panel.show(); | ||
} | ||
} | ||
obj.panel.show = function() { | ||
// Show panel | ||
panel.style.display = ''; | ||
// Add animation | ||
if (panel.classList.contains('panel-left')) { | ||
jSuites.animation.slideLeft(panel, 1); | ||
} else { | ||
jSuites.animation.slideRight(panel, 1); | ||
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); | ||
} | ||
} | ||
} | ||
} | ||
obj.panel.hide = function() { | ||
if (panel) { | ||
// 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.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'; | ||
}); | ||
} | ||
} | ||
} | ||
} | ||
obj.panel.get = function() { | ||
return panel; | ||
} | ||
component.get = function() { | ||
return panel; | ||
} | ||
obj.panel.destroy = function() { | ||
el.removeChild(panel); | ||
panel = null; | ||
} | ||
component.destroy = function() { | ||
el.removeChild(panel); | ||
panel = null; | ||
} | ||
obj.actionsheet = function(options) { | ||
if (options) { | ||
obj.actionsheet.options = options; | ||
return component; | ||
}(); | ||
obj.actionsheet = function() { | ||
// Actionsheet container | ||
var actionsheet = el.querySelector('.actionsheet'); | ||
if (! actionsheet) { | ||
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); | ||
} | ||
// Reset container | ||
actionContent.innerHTML = ''; | ||
var component = function(options) { | ||
if (options) { | ||
obj.actionsheet.options = options; | ||
} | ||
// Create new elements | ||
for (var i = 0; i < obj.actionsheet.options.length; i++) { | ||
var actionGroup = document.createElement('div'); | ||
actionGroup.className = 'jactionsheet-group'; | ||
// Reset container | ||
actionContent.innerHTML = ''; | ||
for (var j = 0; j < obj.actionsheet.options[i].length; j++) { | ||
var v = obj.actionsheet.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; | ||
// Create new elements | ||
for (var i = 0; i < obj.actionsheet.options.length; i++) { | ||
var actionGroup = document.createElement('div'); | ||
actionGroup.className = 'jactionsheet-group'; | ||
for (var j = 0; j < obj.actionsheet.options[i].length; j++) { | ||
var v = obj.actionsheet.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(obj, component, this); | ||
} | ||
} | ||
if (v.action == 'cancel') { | ||
actionInput.style.color = 'red'; | ||
} | ||
actionItem.appendChild(actionInput); | ||
actionGroup.appendChild(actionItem); | ||
} | ||
if (v.onclick) { | ||
actionInput.onclick = v.onclick; | ||
} | ||
if (v.action == 'cancel') { | ||
actionInput.style.color = 'red'; | ||
} | ||
actionItem.appendChild(actionInput); | ||
actionGroup.appendChild(actionItem); | ||
actionContent.appendChild(actionGroup); | ||
} | ||
actionContent.appendChild(actionGroup); | ||
// Show | ||
actionsheet.style.display = ''; | ||
// Animation | ||
jSuites.animation.slideBottom(actionContent, true); | ||
} | ||
// Show | ||
actionsheet.style.display = ''; | ||
component.close = function() { | ||
if (actionsheet.style.display != 'none') { | ||
// Remove any existing actionsheet | ||
jSuites.animation.slideBottom(actionContent, false, function() { | ||
actionsheet.style.display = 'none'; | ||
}); | ||
} | ||
} | ||
// Append | ||
el.appendChild(panel); | ||
component.get = function() { | ||
return actionsheet; | ||
} | ||
// Animation | ||
jSuites.animation.slideBottom(actionContent, true); | ||
} | ||
return component; | ||
}(); | ||
obj.actionsheet.close = function() { | ||
if (actionsheet.style.display != 'none') { | ||
// Remove any existing actionsheet | ||
jSuites.animation.slideBottom(actionContent, false, function() { | ||
actionsheet.remove(); | ||
actionsheet.style.display = 'none'; | ||
}); | ||
/* | ||
* 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') { | ||
eval(script[i].innerHTML); | ||
} | ||
} | ||
@@ -383,5 +459,3 @@ } | ||
} else { | ||
if (panel && panel.style.display != 'none') { | ||
obj.panel.hide(); | ||
} | ||
obj.panel.hide(); | ||
} | ||
@@ -398,14 +472,9 @@ } | ||
} else { | ||
if (panel && panel.style.display == 'none') { | ||
obj.panel.show(); | ||
} | ||
obj.panel.show(); | ||
} | ||
} | ||
var actionElement = null; | ||
var actionDown = function(e) { | ||
// Close any actionsheet if is opened | ||
if (! actionsheet.style.display) { | ||
obj.actionsheet.close() | ||
} | ||
// Grouped options | ||
@@ -421,8 +490,8 @@ if (e.target.classList.contains('option-title')) { | ||
// App links | ||
var element = jSuites.findElement(e.target, function(e) { | ||
return (e.tagName == 'A' || e.tagName == 'DIV') && e.getAttribute('data-href') ? e : false; | ||
actionElement = jSuites.findElement(e.target, function(e) { | ||
return e.tagName == 'A' && e.getAttribute('href') ? e : false; | ||
}); | ||
if (element) { | ||
var link = element.getAttribute('data-href'); | ||
if (actionElement) { | ||
var link = actionElement.getAttribute('href'); | ||
if (link == '#back') { | ||
@@ -433,3 +502,7 @@ window.history.back(); | ||
} else { | ||
obj.pages(link); | ||
if (actionElement.classList.contains('link')) { | ||
actionElement = null; | ||
} else { | ||
obj.pages(link); | ||
} | ||
} | ||
@@ -439,2 +512,11 @@ } | ||
var actionUp = function(e) { | ||
obj.actionsheet.close(); | ||
if (actionElement) { | ||
e.preventDefault(); | ||
actionElement = null; | ||
} | ||
} | ||
el.addEventListener('swipeleft', controlSwipeLeft); | ||
@@ -445,4 +527,6 @@ el.addEventListener('swiperight', controlSwipeRight); | ||
document.addEventListener('touchstart', actionDown); | ||
document.addEventListener('touchend', actionUp); | ||
} else { | ||
document.addEventListener('mousedown', actionDown); | ||
document.addEventListener('mouseup', actionUp); | ||
} | ||
@@ -453,3 +537,3 @@ | ||
if (obj.pages.get(e.state.route)) { | ||
obj.pages(e.state.route, { ignoreHistory:true }); | ||
obj.pages(e.state.route, { ignoreHistory: true }); | ||
} | ||
@@ -459,2 +543,6 @@ } | ||
if (obj.options.toolbar) { | ||
obj.setToolbar(); | ||
} | ||
el.app = obj; | ||
@@ -465,3 +553,2 @@ | ||
jSuites.dialog = (function() { | ||
@@ -468,0 +555,0 @@ var obj = {}; |
@@ -30,3 +30,3 @@ { | ||
"main": "dist/jsuites.js", | ||
"version": "3.5.4", | ||
"version": "3.6.0", | ||
"bugs": "https://github.com/paulhodel/jsuites/issues", | ||
@@ -33,0 +33,0 @@ "homepage": "https://github.com/paulhodel/jsuites", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
818741
22098