18882 lines
583 KiB
JavaScript
18882 lines
583 KiB
JavaScript
|
/*
|
||
|
|
* # Semantic UI - 1.11.4
|
||
|
|
* https://github.com/Semantic-Org/Semantic-UI
|
||
|
|
* http://www.semantic-ui.com/
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Site
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
$.site = $.fn.site = function(parameters) {
|
||
|
|
var
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.site.settings, parameters)
|
||
|
|
: $.extend({}, $.site.settings),
|
||
|
|
|
||
|
|
namespace = settings.namespace,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$document = $(document),
|
||
|
|
$module = $document,
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
module,
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of site', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
normalize: function() {
|
||
|
|
module.fix.console();
|
||
|
|
module.fix.requestAnimationFrame();
|
||
|
|
},
|
||
|
|
|
||
|
|
fix: {
|
||
|
|
console: function() {
|
||
|
|
module.debug('Normalizing window.console');
|
||
|
|
if (console === undefined || console.log === undefined) {
|
||
|
|
module.verbose('Console not available, normalizing events');
|
||
|
|
module.disable.console();
|
||
|
|
}
|
||
|
|
if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {
|
||
|
|
module.verbose('Console group not available, normalizing events');
|
||
|
|
window.console.group = function() {};
|
||
|
|
window.console.groupEnd = function() {};
|
||
|
|
window.console.groupCollapsed = function() {};
|
||
|
|
}
|
||
|
|
if (typeof console.markTimeline == 'undefined') {
|
||
|
|
module.verbose('Mark timeline not available, normalizing events');
|
||
|
|
window.console.markTimeline = function() {};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
consoleClear: function() {
|
||
|
|
module.debug('Disabling programmatic console clearing');
|
||
|
|
window.console.clear = function() {};
|
||
|
|
},
|
||
|
|
requestAnimationFrame: function() {
|
||
|
|
module.debug('Normalizing requestAnimationFrame');
|
||
|
|
if(window.requestAnimationFrame === undefined) {
|
||
|
|
module.debug('RequestAnimationFrame not available, normailizing event');
|
||
|
|
window.requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); }
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
moduleExists: function(name) {
|
||
|
|
return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);
|
||
|
|
},
|
||
|
|
|
||
|
|
enabled: {
|
||
|
|
modules: function(modules) {
|
||
|
|
var
|
||
|
|
enabledModules = []
|
||
|
|
;
|
||
|
|
modules = modules || settings.modules;
|
||
|
|
$.each(modules, function(index, name) {
|
||
|
|
if(module.moduleExists(name)) {
|
||
|
|
enabledModules.push(name);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return enabledModules;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
disabled: {
|
||
|
|
modules: function(modules) {
|
||
|
|
var
|
||
|
|
disabledModules = []
|
||
|
|
;
|
||
|
|
modules = modules || settings.modules;
|
||
|
|
$.each(modules, function(index, name) {
|
||
|
|
if(!module.moduleExists(name)) {
|
||
|
|
disabledModules.push(name);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return disabledModules;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
change: {
|
||
|
|
setting: function(setting, value, modules, modifyExisting) {
|
||
|
|
modules = (typeof modules === 'string')
|
||
|
|
? (modules === 'all')
|
||
|
|
? settings.modules
|
||
|
|
: [modules]
|
||
|
|
: modules || settings.modules
|
||
|
|
;
|
||
|
|
modifyExisting = (modifyExisting !== undefined)
|
||
|
|
? modifyExisting
|
||
|
|
: true
|
||
|
|
;
|
||
|
|
$.each(modules, function(index, name) {
|
||
|
|
var
|
||
|
|
namespace = (module.moduleExists(name))
|
||
|
|
? $.fn[name].settings.namespace || false
|
||
|
|
: true,
|
||
|
|
$existingModules
|
||
|
|
;
|
||
|
|
if(module.moduleExists(name)) {
|
||
|
|
module.verbose('Changing default setting', setting, value, name);
|
||
|
|
$.fn[name].settings[setting] = value;
|
||
|
|
if(modifyExisting && namespace) {
|
||
|
|
$existingModules = $(':data(module-' + namespace + ')');
|
||
|
|
if($existingModules.length > 0) {
|
||
|
|
module.verbose('Modifying existing settings', $existingModules);
|
||
|
|
$existingModules[name]('setting', setting, value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
settings: function(newSettings, modules, modifyExisting) {
|
||
|
|
modules = (typeof modules === 'string')
|
||
|
|
? [modules]
|
||
|
|
: modules || settings.modules
|
||
|
|
;
|
||
|
|
modifyExisting = (modifyExisting !== undefined)
|
||
|
|
? modifyExisting
|
||
|
|
: true
|
||
|
|
;
|
||
|
|
$.each(modules, function(index, name) {
|
||
|
|
var
|
||
|
|
$existingModules
|
||
|
|
;
|
||
|
|
if(module.moduleExists(name)) {
|
||
|
|
module.verbose('Changing default setting', newSettings, name);
|
||
|
|
$.extend(true, $.fn[name].settings, newSettings);
|
||
|
|
if(modifyExisting && namespace) {
|
||
|
|
$existingModules = $(':data(module-' + namespace + ')');
|
||
|
|
if($existingModules.length > 0) {
|
||
|
|
module.verbose('Modifying existing settings', $existingModules);
|
||
|
|
$existingModules[name]('setting', newSettings);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
enable: {
|
||
|
|
console: function() {
|
||
|
|
module.console(true);
|
||
|
|
},
|
||
|
|
debug: function(modules, modifyExisting) {
|
||
|
|
modules = modules || settings.modules;
|
||
|
|
module.debug('Enabling debug for modules', modules);
|
||
|
|
module.change.setting('debug', true, modules, modifyExisting);
|
||
|
|
},
|
||
|
|
verbose: function(modules, modifyExisting) {
|
||
|
|
modules = modules || settings.modules;
|
||
|
|
module.debug('Enabling verbose debug for modules', modules);
|
||
|
|
module.change.setting('verbose', true, modules, modifyExisting);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
disable: {
|
||
|
|
console: function() {
|
||
|
|
module.console(false);
|
||
|
|
},
|
||
|
|
debug: function(modules, modifyExisting) {
|
||
|
|
modules = modules || settings.modules;
|
||
|
|
module.debug('Disabling debug for modules', modules);
|
||
|
|
module.change.setting('debug', false, modules, modifyExisting);
|
||
|
|
},
|
||
|
|
verbose: function(modules, modifyExisting) {
|
||
|
|
modules = modules || settings.modules;
|
||
|
|
module.debug('Disabling verbose debug for modules', modules);
|
||
|
|
module.change.setting('verbose', false, modules, modifyExisting);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
console: function(enable) {
|
||
|
|
if(enable) {
|
||
|
|
if(instance.cache.console === undefined) {
|
||
|
|
module.error(error.console);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
module.debug('Restoring console function');
|
||
|
|
window.console = instance.cache.console;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Disabling console function');
|
||
|
|
instance.cache.console = window.console;
|
||
|
|
window.console = {
|
||
|
|
clear : function(){},
|
||
|
|
error : function(){},
|
||
|
|
group : function(){},
|
||
|
|
groupCollapsed : function(){},
|
||
|
|
groupEnd : function(){},
|
||
|
|
info : function(){},
|
||
|
|
log : function(){},
|
||
|
|
markTimeline : function(){},
|
||
|
|
warn : function(){}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous site for', $module);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
cache: {},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Element' : element,
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
module.destroy();
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.site.settings = {
|
||
|
|
|
||
|
|
name : 'Site',
|
||
|
|
namespace : 'site',
|
||
|
|
|
||
|
|
error : {
|
||
|
|
console : 'Console cannot be restored, most likely it was overwritten outside of module',
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
modules: [
|
||
|
|
'accordion',
|
||
|
|
'api',
|
||
|
|
'checkbox',
|
||
|
|
'dimmer',
|
||
|
|
'dropdown',
|
||
|
|
'form',
|
||
|
|
'modal',
|
||
|
|
'nag',
|
||
|
|
'popup',
|
||
|
|
'rating',
|
||
|
|
'shape',
|
||
|
|
'sidebar',
|
||
|
|
'state',
|
||
|
|
'sticky',
|
||
|
|
'tab',
|
||
|
|
'transition',
|
||
|
|
'video',
|
||
|
|
'visit',
|
||
|
|
'visibility'
|
||
|
|
],
|
||
|
|
|
||
|
|
siteNamespace : 'site',
|
||
|
|
namespaceStub : {
|
||
|
|
cache : {},
|
||
|
|
config : {},
|
||
|
|
sections : {},
|
||
|
|
section : {},
|
||
|
|
utilities : {}
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// allows for selection of elements with data attributes
|
||
|
|
$.extend($.expr[ ":" ], {
|
||
|
|
data: ($.expr.createPseudo)
|
||
|
|
? $.expr.createPseudo(function(dataName) {
|
||
|
|
return function(elem) {
|
||
|
|
return !!$.data(elem, dataName);
|
||
|
|
};
|
||
|
|
})
|
||
|
|
: function(elem, i, match) {
|
||
|
|
// support: jQuery < 1.8
|
||
|
|
return !!$.data(elem, match[ 3 ]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Form Validation
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.form = function(fields, parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
settings = $.extend(true, {}, $.fn.form.settings, parameters),
|
||
|
|
validation = $.extend({}, $.fn.form.settings.defaults, fields),
|
||
|
|
|
||
|
|
namespace = settings.namespace,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
selector = settings.selector,
|
||
|
|
className = settings.className,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
$module = $(this),
|
||
|
|
$field = $(this).find(selector.field),
|
||
|
|
$group = $(this).find(selector.group),
|
||
|
|
$message = $(this).find(selector.message),
|
||
|
|
$prompt = $(this).find(selector.prompt),
|
||
|
|
|
||
|
|
$submit = $(this).find(selector.submit),
|
||
|
|
$clear = $(this).find(selector.clear),
|
||
|
|
$reset = $(this).find(selector.reset),
|
||
|
|
|
||
|
|
formErrors = [],
|
||
|
|
keyHeldDown = false,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing form validation', $module, validation, settings);
|
||
|
|
module.bindEvents();
|
||
|
|
module.set.defaults();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module', instance);
|
||
|
|
module.removeEvents();
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache');
|
||
|
|
$field = $module.find(selector.field);
|
||
|
|
},
|
||
|
|
|
||
|
|
submit: function() {
|
||
|
|
module.verbose('Submitting form', $module);
|
||
|
|
$module
|
||
|
|
.submit()
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
attachEvents: function(selector, action) {
|
||
|
|
action = action || 'submit';
|
||
|
|
$(selector)
|
||
|
|
.on('click', function(event) {
|
||
|
|
module[action]();
|
||
|
|
event.preventDefault();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
bindEvents: function() {
|
||
|
|
if(settings.keyboardShortcuts) {
|
||
|
|
$field
|
||
|
|
.on('keydown' + eventNamespace, module.event.field.keydown)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$module
|
||
|
|
.on('submit' + eventNamespace, module.validate.form)
|
||
|
|
;
|
||
|
|
$field
|
||
|
|
.on('blur' + eventNamespace, module.event.field.blur)
|
||
|
|
;
|
||
|
|
|
||
|
|
// attach events to common elements
|
||
|
|
module.attachEvents($submit, 'submit');
|
||
|
|
module.attachEvents($reset, 'reset');
|
||
|
|
module.attachEvents($clear, 'clear');
|
||
|
|
|
||
|
|
$field
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
type = $(this).prop('type'),
|
||
|
|
inputEvent = module.get.changeEvent(type)
|
||
|
|
;
|
||
|
|
$(this)
|
||
|
|
.on(inputEvent + eventNamespace, module.event.field.change)
|
||
|
|
;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function() {
|
||
|
|
$field
|
||
|
|
.each(function () {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$element = $field.parent(),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.find(selector.prompt),
|
||
|
|
defaultValue = $field.data(metadata.defaultValue) || '',
|
||
|
|
isCheckbox = $element.is(selector.uiCheckbox),
|
||
|
|
isDropdown = $element.is(selector.uiDropdown),
|
||
|
|
isErrored = $fieldGroup.hasClass(className.error)
|
||
|
|
;
|
||
|
|
if(isErrored) {
|
||
|
|
module.verbose('Resetting error on field', $fieldGroup);
|
||
|
|
$fieldGroup.removeClass(className.error);
|
||
|
|
$prompt.remove();
|
||
|
|
}
|
||
|
|
if(isDropdown) {
|
||
|
|
module.verbose('Resetting dropdown value', $element, defaultValue);
|
||
|
|
$element.dropdown('clear');
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Resetting field value', $field, defaultValue);
|
||
|
|
$field.val('');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
$field
|
||
|
|
.each(function () {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$element = $field.parent(),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.find(selector.prompt),
|
||
|
|
defaultValue = $field.data(metadata.defaultValue) || '',
|
||
|
|
isCheckbox = $element.is(selector.uiCheckbox),
|
||
|
|
isDropdown = $element.is(selector.uiDropdown),
|
||
|
|
isErrored = $fieldGroup.hasClass(className.error)
|
||
|
|
;
|
||
|
|
if(isErrored) {
|
||
|
|
module.verbose('Resetting error on field', $fieldGroup);
|
||
|
|
$fieldGroup.removeClass(className.error);
|
||
|
|
$prompt.remove();
|
||
|
|
}
|
||
|
|
if(isDropdown) {
|
||
|
|
module.verbose('Resetting dropdown value', $element, defaultValue);
|
||
|
|
$element.dropdown('restore defaults');
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
module.verbose('Resetting checkbox value', $element, defaultValue);
|
||
|
|
if(defaultValue === true) {
|
||
|
|
$element.checkbox('check');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Resetting field value', $field, defaultValue);
|
||
|
|
$field.val(defaultValue);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
removeEvents: function() {
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$field
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$submit
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$field
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
field: {
|
||
|
|
keydown: function(event) {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
key = event.which,
|
||
|
|
keyCode = {
|
||
|
|
enter : 13,
|
||
|
|
escape : 27
|
||
|
|
}
|
||
|
|
;
|
||
|
|
if( key == keyCode.escape) {
|
||
|
|
module.verbose('Escape key pressed blurring field');
|
||
|
|
$field
|
||
|
|
.blur()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).length > 0 ) {
|
||
|
|
$submit
|
||
|
|
.addClass(className.pressed)
|
||
|
|
;
|
||
|
|
if(!keyHeldDown) {
|
||
|
|
$field
|
||
|
|
.one('keyup' + eventNamespace, module.event.field.keyup)
|
||
|
|
;
|
||
|
|
module.submit();
|
||
|
|
module.debug('Enter pressed on input submitting form');
|
||
|
|
}
|
||
|
|
keyHeldDown = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
keyup: function() {
|
||
|
|
keyHeldDown = false;
|
||
|
|
$submit.removeClass(className.pressed);
|
||
|
|
},
|
||
|
|
blur: function() {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$fieldGroup = $field.closest($group)
|
||
|
|
;
|
||
|
|
if( $fieldGroup.hasClass(className.error) ) {
|
||
|
|
module.debug('Revalidating field', $field, module.get.validation($field));
|
||
|
|
module.validate.field( module.get.validation($field) );
|
||
|
|
}
|
||
|
|
else if(settings.on == 'blur' || settings.on == 'change') {
|
||
|
|
module.validate.field( module.get.validation($field) );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
change: function() {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$fieldGroup = $field.closest($group)
|
||
|
|
;
|
||
|
|
if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(function() {
|
||
|
|
module.debug('Revalidating field', $field, module.get.validation($field));
|
||
|
|
module.validate.field( module.get.validation($field) );
|
||
|
|
}, settings.delay);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
changeEvent: function(type) {
|
||
|
|
if(type == 'checkbox' || type == 'radio' || type == 'hidden') {
|
||
|
|
return 'change';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module.get.inputEvent();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
inputEvent: function() {
|
||
|
|
return (document.createElement('input').oninput !== undefined)
|
||
|
|
? 'input'
|
||
|
|
: (document.createElement('input').onpropertychange !== undefined)
|
||
|
|
? 'propertychange'
|
||
|
|
: 'keyup'
|
||
|
|
;
|
||
|
|
},
|
||
|
|
field: function(identifier) {
|
||
|
|
module.verbose('Finding field with identifier', identifier);
|
||
|
|
if( $field.filter('#' + identifier).length > 0 ) {
|
||
|
|
return $field.filter('#' + identifier);
|
||
|
|
}
|
||
|
|
else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
|
||
|
|
return $field.filter('[name="' + identifier +'"]');
|
||
|
|
}
|
||
|
|
else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) {
|
||
|
|
return $field.filter('[name="' + identifier +'[]"]');
|
||
|
|
}
|
||
|
|
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
|
||
|
|
return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]');
|
||
|
|
}
|
||
|
|
return $('<input/>');
|
||
|
|
},
|
||
|
|
fields: function(fields) {
|
||
|
|
var
|
||
|
|
$fields = $()
|
||
|
|
;
|
||
|
|
$.each(fields, function(index, name) {
|
||
|
|
$fields = $fields.add( module.get.field(name) );
|
||
|
|
});
|
||
|
|
return $fields;
|
||
|
|
},
|
||
|
|
validation: function($field) {
|
||
|
|
var
|
||
|
|
rules
|
||
|
|
;
|
||
|
|
$.each(validation, function(fieldName, field) {
|
||
|
|
if( module.get.field(field.identifier).get(0) == $field.get(0) ) {
|
||
|
|
rules = field;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return rules || false;
|
||
|
|
},
|
||
|
|
value: function (field) {
|
||
|
|
var
|
||
|
|
fields = [],
|
||
|
|
results
|
||
|
|
;
|
||
|
|
fields.push(field);
|
||
|
|
results = module.get.values.call(element, fields);
|
||
|
|
return results[field];
|
||
|
|
},
|
||
|
|
values: function (fields) {
|
||
|
|
var
|
||
|
|
$fields = $.isArray(fields)
|
||
|
|
? module.get.fields(fields)
|
||
|
|
: $field,
|
||
|
|
values = {}
|
||
|
|
;
|
||
|
|
$fields.each(function(index, field) {
|
||
|
|
var
|
||
|
|
$field = $(field),
|
||
|
|
type = $field.prop('type'),
|
||
|
|
name = $field.prop('name'),
|
||
|
|
value = $field.val(),
|
||
|
|
isCheckbox = $field.is(selector.checkbox),
|
||
|
|
isRadio = $field.is(selector.radio),
|
||
|
|
isMultiple = (name.indexOf('[]') !== -1),
|
||
|
|
isChecked = (isCheckbox)
|
||
|
|
? $field.is(':checked')
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
if(name) {
|
||
|
|
if(isMultiple) {
|
||
|
|
name = name.replace('[]', '');
|
||
|
|
if(!values[name]) {
|
||
|
|
values[name] = [];
|
||
|
|
}
|
||
|
|
if(isCheckbox) {
|
||
|
|
if(isChecked) {
|
||
|
|
values[name].push(value)
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Omitted unchecked checkbox', $field);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
values[name].push(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(isRadio) {
|
||
|
|
if(isChecked) {
|
||
|
|
values[name] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
if(isChecked) {
|
||
|
|
values[name] = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Omitted unchecked checkbox', $field);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
values[name] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return values;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
|
||
|
|
field: function(identifier) {
|
||
|
|
module.verbose('Checking for existence of a field with identifier', identifier);
|
||
|
|
if( $field.filter('#' + identifier).length > 0 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
prompt: function(identifier, errors) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(identifier),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.children(selector.prompt),
|
||
|
|
promptExists = ($prompt.length !== 0)
|
||
|
|
;
|
||
|
|
errors = (typeof errors == 'string')
|
||
|
|
? [errors]
|
||
|
|
: errors
|
||
|
|
;
|
||
|
|
module.verbose('Adding field error state', identifier);
|
||
|
|
$fieldGroup
|
||
|
|
.addClass(className.error)
|
||
|
|
;
|
||
|
|
if(settings.inline) {
|
||
|
|
if(!promptExists) {
|
||
|
|
$prompt = settings.templates.prompt(errors);
|
||
|
|
$prompt
|
||
|
|
.appendTo($fieldGroup)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$prompt
|
||
|
|
.html(errors[0])
|
||
|
|
;
|
||
|
|
if(!promptExists) {
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
module.verbose('Displaying error with css transition', settings.transition);
|
||
|
|
$prompt.transition(settings.transition + ' in', settings.duration);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Displaying error with fallback javascript animation');
|
||
|
|
$prompt
|
||
|
|
.fadeIn(settings.duration)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Inline errors are disabled, no inline error added', identifier);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
errors: function(errors) {
|
||
|
|
module.debug('Adding form error messages', errors);
|
||
|
|
$message
|
||
|
|
.html( settings.templates.error(errors) )
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
prompt: function(field) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(field.identifier),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.children(selector.prompt)
|
||
|
|
;
|
||
|
|
$fieldGroup
|
||
|
|
.removeClass(className.error)
|
||
|
|
;
|
||
|
|
if(settings.inline && $prompt.is(':visible')) {
|
||
|
|
module.verbose('Removing prompt for field', field);
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$prompt.transition(settings.transition + ' out', settings.duration, function() {
|
||
|
|
$prompt.remove();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$prompt
|
||
|
|
.fadeOut(settings.duration, function(){
|
||
|
|
$prompt.remove();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
success: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.error)
|
||
|
|
.addClass(className.success)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
defaults: function () {
|
||
|
|
$field
|
||
|
|
.each(function () {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
isCheckbox = ($field.filter(selector.checkbox).length > 0),
|
||
|
|
value = (isCheckbox)
|
||
|
|
? $field.is(':checked')
|
||
|
|
: $field.val()
|
||
|
|
;
|
||
|
|
$field.data(metadata.defaultValue, value);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.success)
|
||
|
|
.addClass(className.error)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
value: function (field, value) {
|
||
|
|
var
|
||
|
|
fields = {}
|
||
|
|
;
|
||
|
|
fields[field] = value;
|
||
|
|
return module.set.values.call(element, fields);
|
||
|
|
},
|
||
|
|
values: function (fields) {
|
||
|
|
if($.isEmptyObject(fields)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$.each(fields, function(key, value) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(key),
|
||
|
|
$element = $field.parent(),
|
||
|
|
isMultiple = $.isArray(value),
|
||
|
|
isCheckbox = $element.is(selector.uiCheckbox),
|
||
|
|
isDropdown = $element.is(selector.uiDropdown),
|
||
|
|
isRadio = ($field.is(selector.radio) && isCheckbox),
|
||
|
|
fieldExists = ($field.length > 0),
|
||
|
|
$multipleField
|
||
|
|
;
|
||
|
|
if(fieldExists) {
|
||
|
|
if(isMultiple && isCheckbox) {
|
||
|
|
module.verbose('Selecting multiple', value, $field);
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
$.each(value, function(index, value) {
|
||
|
|
$multipleField = $field.filter('[value="' + value + '"]');
|
||
|
|
$element = $multipleField.parent();
|
||
|
|
if($multipleField.length > 0) {
|
||
|
|
$element.checkbox('check');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if(isRadio) {
|
||
|
|
module.verbose('Selecting radio value', value, $field);
|
||
|
|
$field.filter('[value="' + value + '"]')
|
||
|
|
.parent(selector.uiCheckbox)
|
||
|
|
.checkbox('check')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
module.verbose('Setting checkbox value', value, $element);
|
||
|
|
if(value === true) {
|
||
|
|
$element.checkbox('check');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(isDropdown) {
|
||
|
|
module.verbose('Setting dropdown value', value, $element);
|
||
|
|
$element.dropdown('set selected', value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Setting field value', value, $field);
|
||
|
|
$field.val(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
module.validate.form();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
validate: {
|
||
|
|
|
||
|
|
form: function(event) {
|
||
|
|
var
|
||
|
|
allValid = true,
|
||
|
|
apiRequest
|
||
|
|
;
|
||
|
|
|
||
|
|
// input keydown event will fire submit repeatedly by browser default
|
||
|
|
if(keyHeldDown) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// reset errors
|
||
|
|
formErrors = [];
|
||
|
|
$.each(validation, function(fieldName, field) {
|
||
|
|
if( !( module.validate.field(field) ) ) {
|
||
|
|
allValid = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if(allValid) {
|
||
|
|
module.debug('Form has no validation errors, submitting');
|
||
|
|
module.set.success();
|
||
|
|
return settings.onSuccess.call(element, event);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Form has errors');
|
||
|
|
module.set.error();
|
||
|
|
if(!settings.inline) {
|
||
|
|
module.add.errors(formErrors);
|
||
|
|
}
|
||
|
|
// prevent ajax submit
|
||
|
|
if($module.data('moduleApi') !== undefined) {
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
}
|
||
|
|
return settings.onFailure.call(element, formErrors);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// takes a validation object and returns whether field passes validation
|
||
|
|
field: function(field) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(field.identifier),
|
||
|
|
fieldValid = true,
|
||
|
|
fieldErrors = []
|
||
|
|
;
|
||
|
|
if($field.prop('disabled')) {
|
||
|
|
module.debug('Field is disabled. Skipping', field.identifier);
|
||
|
|
fieldValid = true;
|
||
|
|
}
|
||
|
|
else if(field.optional && $.trim($field.val()) === ''){
|
||
|
|
module.debug('Field is optional and empty. Skipping', field.identifier);
|
||
|
|
fieldValid = true;
|
||
|
|
}
|
||
|
|
else if(field.rules !== undefined) {
|
||
|
|
$.each(field.rules, function(index, rule) {
|
||
|
|
if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) {
|
||
|
|
module.debug('Field is invalid', field.identifier, rule.type);
|
||
|
|
fieldErrors.push(rule.prompt);
|
||
|
|
fieldValid = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if(fieldValid) {
|
||
|
|
module.remove.prompt(field, fieldErrors);
|
||
|
|
settings.onValid.call($field);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
formErrors = formErrors.concat(fieldErrors);
|
||
|
|
module.add.prompt(field.identifier, fieldErrors);
|
||
|
|
settings.onInvalid.call($field, fieldErrors);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
// takes validation rule and returns whether field passes rule
|
||
|
|
rule: function(field, validation) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(field.identifier),
|
||
|
|
type = validation.type,
|
||
|
|
value = $.trim($field.val() + ''),
|
||
|
|
|
||
|
|
bracketRegExp = /\[(.*)\]/i,
|
||
|
|
bracket = bracketRegExp.exec(type),
|
||
|
|
isValid = true,
|
||
|
|
ancillary,
|
||
|
|
functionType
|
||
|
|
;
|
||
|
|
// if bracket notation is used, pass in extra parameters
|
||
|
|
if(bracket !== undefined && bracket !== null) {
|
||
|
|
ancillary = '' + bracket[1];
|
||
|
|
functionType = type.replace(bracket[0], '');
|
||
|
|
isValid = settings.rules[functionType].call(element, value, ancillary);
|
||
|
|
}
|
||
|
|
// normal notation
|
||
|
|
else {
|
||
|
|
isValid = settings.rules[type].call($field, value);
|
||
|
|
}
|
||
|
|
return isValid;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.form.settings = {
|
||
|
|
|
||
|
|
name : 'Form',
|
||
|
|
namespace : 'form',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
|
||
|
|
keyboardShortcuts : true,
|
||
|
|
on : 'submit',
|
||
|
|
inline : false,
|
||
|
|
|
||
|
|
delay : 200,
|
||
|
|
revalidate : true,
|
||
|
|
|
||
|
|
transition : 'scale',
|
||
|
|
duration : 200,
|
||
|
|
|
||
|
|
onValid : function() {},
|
||
|
|
onInvalid : function() {},
|
||
|
|
onSuccess : function() { return true; },
|
||
|
|
onFailure : function() { return false; },
|
||
|
|
|
||
|
|
metadata : {
|
||
|
|
defaultValue : 'default',
|
||
|
|
validate : 'validate'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
checkbox : 'input[type="checkbox"], input[type="radio"]',
|
||
|
|
clear : '.clear',
|
||
|
|
field : 'input, textarea, select',
|
||
|
|
group : '.field',
|
||
|
|
input : 'input',
|
||
|
|
message : '.error.message',
|
||
|
|
prompt : '.prompt.label',
|
||
|
|
radio : 'input[type="radio"]',
|
||
|
|
reset : '.reset',
|
||
|
|
submit : '.submit',
|
||
|
|
uiCheckbox : '.ui.checkbox',
|
||
|
|
uiDropdown : '.ui.dropdown'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
error : 'error',
|
||
|
|
label : 'ui prompt label',
|
||
|
|
pressed : 'down',
|
||
|
|
success : 'success'
|
||
|
|
},
|
||
|
|
|
||
|
|
error: {
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
templates: {
|
||
|
|
|
||
|
|
// template that produces error message
|
||
|
|
error: function(errors) {
|
||
|
|
var
|
||
|
|
html = '<ul class="list">'
|
||
|
|
;
|
||
|
|
$.each(errors, function(index, value) {
|
||
|
|
html += '<li>' + value + '</li>';
|
||
|
|
});
|
||
|
|
html += '</ul>';
|
||
|
|
return $(html);
|
||
|
|
},
|
||
|
|
|
||
|
|
// template that produces label
|
||
|
|
prompt: function(errors) {
|
||
|
|
return $('<div/>')
|
||
|
|
.addClass('ui red pointing prompt label')
|
||
|
|
.html(errors[0])
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
rules: {
|
||
|
|
|
||
|
|
// checkbox checked
|
||
|
|
checked: function() {
|
||
|
|
return ($(this).filter(':checked').length > 0);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value contains text (insensitive)
|
||
|
|
contains: function(value, text) {
|
||
|
|
// escape regex characters
|
||
|
|
text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
||
|
|
return (value.search( new RegExp(text, 'i') ) !== -1);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value contains text (case sensitive)
|
||
|
|
containsExactly: function(value, text) {
|
||
|
|
// escape regex characters
|
||
|
|
text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
||
|
|
return (value.search( new RegExp(text) ) !== -1);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is most likely an email
|
||
|
|
email: function(value){
|
||
|
|
var
|
||
|
|
emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i")
|
||
|
|
;
|
||
|
|
return emailRegExp.test(value);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is not empty or blank string
|
||
|
|
empty: function(value) {
|
||
|
|
return !(value === undefined || '' === value);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is valid integer
|
||
|
|
integer: function(value, range) {
|
||
|
|
var
|
||
|
|
intRegExp = /^\-?\d+$/,
|
||
|
|
min,
|
||
|
|
max,
|
||
|
|
parts
|
||
|
|
;
|
||
|
|
if(range === undefined || range === '' || range === '..') {
|
||
|
|
// do nothing
|
||
|
|
}
|
||
|
|
else if(range.indexOf('..') == -1) {
|
||
|
|
if(intRegExp.test(range)) {
|
||
|
|
min = max = range - 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
parts = range.split('..', 2);
|
||
|
|
if(intRegExp.test(parts[0])) {
|
||
|
|
min = parts[0] - 0;
|
||
|
|
}
|
||
|
|
if(intRegExp.test(parts[1])) {
|
||
|
|
max = parts[1] - 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
intRegExp.test(value) &&
|
||
|
|
(min === undefined || value >= min) &&
|
||
|
|
(max === undefined || value <= max)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is value (case insensitive)
|
||
|
|
is: function(value, text) {
|
||
|
|
text = (typeof text == 'string')
|
||
|
|
? text.toLowerCase()
|
||
|
|
: text
|
||
|
|
;
|
||
|
|
value = (typeof value == 'string')
|
||
|
|
? value.toLowerCase()
|
||
|
|
: value
|
||
|
|
;
|
||
|
|
return (value == text);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is value
|
||
|
|
isExactly: function(value, text) {
|
||
|
|
return (value == text);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is at least string length
|
||
|
|
length: function(value, requiredLength) {
|
||
|
|
return (value !== undefined)
|
||
|
|
? (value.length >= requiredLength)
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
// matches another field
|
||
|
|
match: function(value, fieldIdentifier) {
|
||
|
|
// use either id or name of field
|
||
|
|
var
|
||
|
|
$form = $(this),
|
||
|
|
matchingValue
|
||
|
|
;
|
||
|
|
if($form.find('#' + fieldIdentifier).length > 0) {
|
||
|
|
matchingValue = $form.find('#' + fieldIdentifier).val();
|
||
|
|
}
|
||
|
|
else if($form.find('[name="' + fieldIdentifier +'"]').length > 0) {
|
||
|
|
matchingValue = $form.find('[name="' + fieldIdentifier + '"]').val();
|
||
|
|
}
|
||
|
|
else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').length > 0 ) {
|
||
|
|
matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val();
|
||
|
|
}
|
||
|
|
return (matchingValue !== undefined)
|
||
|
|
? ( value.toString() == matchingValue.toString() )
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
// string length is less than max length
|
||
|
|
maxLength: function(value, maxLength) {
|
||
|
|
return (value !== undefined)
|
||
|
|
? (value.length <= maxLength)
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
// value is not value (case insensitive)
|
||
|
|
not: function(value, notValue) {
|
||
|
|
value = (typeof value == 'string')
|
||
|
|
? value.toLowerCase()
|
||
|
|
: value
|
||
|
|
;
|
||
|
|
notValue = (typeof notValue == 'string')
|
||
|
|
? notValue.toLowerCase()
|
||
|
|
: notValue
|
||
|
|
;
|
||
|
|
return (value != notValue);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value is not value (case sensitive)
|
||
|
|
notExactly: function(value, notValue) {
|
||
|
|
return (value != notValue);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value is most likely url
|
||
|
|
url: function(value) {
|
||
|
|
var
|
||
|
|
urlRegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
|
||
|
|
;
|
||
|
|
return urlRegExp.test(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Accordion
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.accordion = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.accordion.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.accordion.settings),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$title = $module.find(selector.title),
|
||
|
|
$content = $module.find(selector.content),
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
observer,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing', $module);
|
||
|
|
module.bind.events();
|
||
|
|
module.observeChanges();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.debug('Destroying previous instance', $module);
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
$title = $module.find(selector.title);
|
||
|
|
$content = $module.find(selector.content);
|
||
|
|
},
|
||
|
|
|
||
|
|
observeChanges: function() {
|
||
|
|
if('MutationObserver' in window) {
|
||
|
|
observer = new MutationObserver(function(mutations) {
|
||
|
|
module.debug('DOM tree modified, updating selector cache');
|
||
|
|
module.refresh();
|
||
|
|
});
|
||
|
|
observer.observe(element, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
module.debug('Setting up mutation observer', observer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
events: function() {
|
||
|
|
module.debug('Binding delegated events');
|
||
|
|
$module
|
||
|
|
.on('click' + eventNamespace, selector.trigger, module.event.click)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
click: function() {
|
||
|
|
module.toggle.call(this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function(query) {
|
||
|
|
var
|
||
|
|
$activeTitle = (query !== undefined)
|
||
|
|
? (typeof query === 'number')
|
||
|
|
? $title.eq(query)
|
||
|
|
: $(query).closest(selector.title)
|
||
|
|
: $(this).closest(selector.title),
|
||
|
|
$activeContent = $activeTitle.next($content),
|
||
|
|
isAnimating = $activeContent.hasClass(className.animating),
|
||
|
|
isActive = $activeContent.hasClass(className.active),
|
||
|
|
isOpen = (isActive && !isAnimating),
|
||
|
|
isOpening = (!isActive && isAnimating)
|
||
|
|
;
|
||
|
|
module.debug('Toggling visibility of content', $activeTitle);
|
||
|
|
if(isOpen || isOpening) {
|
||
|
|
if(settings.collapsible) {
|
||
|
|
module.close.call($activeTitle);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Cannot close accordion content collapsing is disabled');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.open.call($activeTitle);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
open: function(query) {
|
||
|
|
var
|
||
|
|
$activeTitle = (query !== undefined)
|
||
|
|
? (typeof query === 'number')
|
||
|
|
? $title.eq(query)
|
||
|
|
: $(query).closest(selector.title)
|
||
|
|
: $(this).closest(selector.title),
|
||
|
|
$activeContent = $activeTitle.next($content),
|
||
|
|
isAnimating = $activeContent.hasClass(className.animating),
|
||
|
|
isActive = $activeContent.hasClass(className.active),
|
||
|
|
isUnopen = (!isActive && !isAnimating)
|
||
|
|
;
|
||
|
|
if(isUnopen) {
|
||
|
|
module.debug('Opening accordion content', $activeTitle);
|
||
|
|
if(settings.exclusive) {
|
||
|
|
module.closeOthers.call($activeTitle);
|
||
|
|
}
|
||
|
|
$activeTitle
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
$activeContent.addClass(className.animating);
|
||
|
|
if(settings.animateChildren) {
|
||
|
|
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$activeContent
|
||
|
|
.children()
|
||
|
|
.transition({
|
||
|
|
animation : 'fade in',
|
||
|
|
queue : false,
|
||
|
|
useFailSafe : true,
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
duration : settings.duration
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$activeContent
|
||
|
|
.children()
|
||
|
|
.stop(true)
|
||
|
|
.animate({
|
||
|
|
opacity: 1
|
||
|
|
}, settings.duration, module.resetOpacity)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$activeContent
|
||
|
|
.stop(true)
|
||
|
|
.slideDown(settings.duration, settings.easing, function() {
|
||
|
|
$activeContent
|
||
|
|
.removeClass(className.animating)
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
module.reset.display.call(this);
|
||
|
|
settings.onOpen.call(this);
|
||
|
|
settings.onChange.call(this);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
close: function(query) {
|
||
|
|
var
|
||
|
|
$activeTitle = (query !== undefined)
|
||
|
|
? (typeof query === 'number')
|
||
|
|
? $title.eq(query)
|
||
|
|
: $(query).closest(selector.title)
|
||
|
|
: $(this).closest(selector.title),
|
||
|
|
$activeContent = $activeTitle.next($content),
|
||
|
|
isAnimating = $activeContent.hasClass(className.animating),
|
||
|
|
isActive = $activeContent.hasClass(className.active),
|
||
|
|
isOpening = (!isActive && isAnimating),
|
||
|
|
isClosing = (isActive && isAnimating)
|
||
|
|
;
|
||
|
|
if((isActive || isOpening) && !isClosing) {
|
||
|
|
module.debug('Closing accordion content', $activeContent);
|
||
|
|
$activeTitle
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
$activeContent
|
||
|
|
.addClass(className.animating)
|
||
|
|
;
|
||
|
|
if(settings.animateChildren) {
|
||
|
|
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$activeContent
|
||
|
|
.children()
|
||
|
|
.transition({
|
||
|
|
animation : 'fade out',
|
||
|
|
queue : false,
|
||
|
|
useFailSafe : true,
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
duration : settings.duration
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$activeContent
|
||
|
|
.children()
|
||
|
|
.stop(true)
|
||
|
|
.animate({
|
||
|
|
opacity: 0
|
||
|
|
}, settings.duration, module.resetOpacity)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$activeContent
|
||
|
|
.stop(true)
|
||
|
|
.slideUp(settings.duration, settings.easing, function() {
|
||
|
|
$activeContent
|
||
|
|
.removeClass(className.animating)
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
module.reset.display.call(this);
|
||
|
|
settings.onClose.call(this);
|
||
|
|
settings.onChange.call(this);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
closeOthers: function(index) {
|
||
|
|
var
|
||
|
|
$activeTitle = (index !== undefined)
|
||
|
|
? $title.eq(index)
|
||
|
|
: $(this).closest(selector.title),
|
||
|
|
$parentTitles = $activeTitle.parents(selector.content).prev(selector.title),
|
||
|
|
$activeAccordion = $activeTitle.closest(selector.accordion),
|
||
|
|
activeSelector = selector.title + '.' + className.active + ':visible',
|
||
|
|
activeContent = selector.content + '.' + className.active + ':visible',
|
||
|
|
$openTitles,
|
||
|
|
$nestedTitles,
|
||
|
|
$openContents
|
||
|
|
;
|
||
|
|
if(settings.closeNested) {
|
||
|
|
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
|
||
|
|
$openContents = $openTitles.next($content);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
|
||
|
|
$nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
|
||
|
|
$openTitles = $openTitles.not($nestedTitles);
|
||
|
|
$openContents = $openTitles.next($content);
|
||
|
|
}
|
||
|
|
if( ($openTitles.length > 0) ) {
|
||
|
|
module.debug('Exclusive enabled, closing other content', $openTitles);
|
||
|
|
$openTitles
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
if(settings.animateChildren) {
|
||
|
|
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$openContents
|
||
|
|
.children()
|
||
|
|
.transition({
|
||
|
|
animation : 'fade out',
|
||
|
|
useFailSafe : true,
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
duration : settings.duration
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$openContents
|
||
|
|
.children()
|
||
|
|
.stop()
|
||
|
|
.animate({
|
||
|
|
opacity: 0
|
||
|
|
}, settings.duration, module.resetOpacity)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$openContents
|
||
|
|
.stop()
|
||
|
|
.slideUp(settings.duration , settings.easing, function() {
|
||
|
|
$(this).removeClass(className.active);
|
||
|
|
module.reset.display.call(this);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: {
|
||
|
|
|
||
|
|
display: function() {
|
||
|
|
module.verbose('Removing inline display from element', this);
|
||
|
|
$(this).css('display', '');
|
||
|
|
if( $(this).attr('style') === '') {
|
||
|
|
$(this)
|
||
|
|
.attr('style', '')
|
||
|
|
.removeAttr('style')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
opacity: function() {
|
||
|
|
module.verbose('Removing inline opacity from element', this);
|
||
|
|
$(this).css('opacity', '');
|
||
|
|
if( $(this).attr('style') === '') {
|
||
|
|
$(this)
|
||
|
|
.attr('style', '')
|
||
|
|
.removeAttr('style')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
module.debug('Changing internal', name, value);
|
||
|
|
if(value !== undefined) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.accordion.settings = {
|
||
|
|
|
||
|
|
name : 'Accordion',
|
||
|
|
namespace : 'accordion',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
exclusive : true,
|
||
|
|
collapsible : true,
|
||
|
|
closeNested : false,
|
||
|
|
animateChildren : true,
|
||
|
|
|
||
|
|
duration : 350,
|
||
|
|
easing : 'easeOutQuad',
|
||
|
|
|
||
|
|
onOpen : function(){},
|
||
|
|
onClose : function(){},
|
||
|
|
onChange : function(){},
|
||
|
|
|
||
|
|
error: {
|
||
|
|
method : 'The method you called is not defined'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
animating : 'animating'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
accordion : '.accordion',
|
||
|
|
title : '.title',
|
||
|
|
trigger : '.title',
|
||
|
|
content : '.content'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// Adds easing
|
||
|
|
$.extend( $.easing, {
|
||
|
|
easeOutQuad: function (x, t, b, c, d) {
|
||
|
|
return -c *(t/=d)*(t-2) + b;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Checkbox
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.checkbox = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = $.extend(true, {}, $.fn.checkbox.settings, parameters),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$label = $(this).find(selector.label).first(),
|
||
|
|
$input = $(this).find(selector.input),
|
||
|
|
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
observer,
|
||
|
|
element = this,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing checkbox', settings);
|
||
|
|
|
||
|
|
module.create.label();
|
||
|
|
module.add.events();
|
||
|
|
|
||
|
|
if( module.is.checked() ) {
|
||
|
|
module.set.checked();
|
||
|
|
if(settings.fireOnInit) {
|
||
|
|
settings.onChecked.call($input.get());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.remove.checked();
|
||
|
|
if(settings.fireOnInit) {
|
||
|
|
settings.onUnchecked.call($input.get());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.observeChanges();
|
||
|
|
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying module');
|
||
|
|
module.remove.events();
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
$module = $(this);
|
||
|
|
$label = $(this).find(selector.label).first();
|
||
|
|
$input = $(this).find(selector.input);
|
||
|
|
},
|
||
|
|
|
||
|
|
observeChanges: function() {
|
||
|
|
if('MutationObserver' in window) {
|
||
|
|
observer = new MutationObserver(function(mutations) {
|
||
|
|
module.debug('DOM tree modified, updating selector cache');
|
||
|
|
module.refresh();
|
||
|
|
});
|
||
|
|
observer.observe(element, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
module.debug('Setting up mutation observer', observer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
attachEvents: function(selector, event) {
|
||
|
|
var
|
||
|
|
$element = $(selector)
|
||
|
|
;
|
||
|
|
event = $.isFunction(module[event])
|
||
|
|
? module[event]
|
||
|
|
: module.toggle
|
||
|
|
;
|
||
|
|
if($element.length > 0) {
|
||
|
|
module.debug('Attaching checkbox events to element', selector, event);
|
||
|
|
$element
|
||
|
|
.on('click' + eventNamespace, event)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.notFound);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
keydown: function(event) {
|
||
|
|
var
|
||
|
|
key = event.which,
|
||
|
|
keyCode = {
|
||
|
|
enter : 13,
|
||
|
|
space : 32,
|
||
|
|
escape : 27
|
||
|
|
}
|
||
|
|
;
|
||
|
|
if( key == keyCode.escape) {
|
||
|
|
module.verbose('Escape key pressed blurring field');
|
||
|
|
$module
|
||
|
|
.blur()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
|
||
|
|
module.verbose('Enter key pressed, toggling checkbox');
|
||
|
|
module.toggle.call(this);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
radio: function() {
|
||
|
|
return $module.hasClass(className.radio);
|
||
|
|
},
|
||
|
|
checked: function() {
|
||
|
|
return $input.prop('checked') !== undefined && $input.prop('checked');
|
||
|
|
},
|
||
|
|
unchecked: function() {
|
||
|
|
return !module.is.checked();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
can: {
|
||
|
|
change: function() {
|
||
|
|
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
|
||
|
|
},
|
||
|
|
uncheck: function() {
|
||
|
|
return (typeof settings.uncheckable === 'boolean')
|
||
|
|
? settings.uncheckable
|
||
|
|
: !module.is.radio()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
checked: function() {
|
||
|
|
$module.addClass(className.checked);
|
||
|
|
},
|
||
|
|
tab: function() {
|
||
|
|
if( $input.attr('tabindex') === undefined) {
|
||
|
|
$input
|
||
|
|
.attr('tabindex', 0)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
create: {
|
||
|
|
label: function() {
|
||
|
|
if($input.prevAll(selector.label).length > 0) {
|
||
|
|
$input.prev(selector.label).detach().insertAfter($input);
|
||
|
|
module.debug('Moving existing label', $label);
|
||
|
|
}
|
||
|
|
else if( !module.has.label() ) {
|
||
|
|
$label = $('<label>').insertAfter($input);
|
||
|
|
module.debug('Creating label', $label);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
label: function() {
|
||
|
|
return ($label.length > 0);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
events: function() {
|
||
|
|
module.verbose('Attaching checkbox events');
|
||
|
|
$module
|
||
|
|
.on('click' + eventNamespace, module.toggle)
|
||
|
|
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
checked: function() {
|
||
|
|
$module.removeClass(className.checked);
|
||
|
|
},
|
||
|
|
events: function() {
|
||
|
|
module.debug('Removing events');
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
$input
|
||
|
|
.off(eventNamespace, module.event.keydown)
|
||
|
|
;
|
||
|
|
$label
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
enable: function() {
|
||
|
|
module.debug('Enabling checkbox functionality');
|
||
|
|
$module.removeClass(className.disabled);
|
||
|
|
$input.prop('disabled', false);
|
||
|
|
settings.onEnabled.call($input.get());
|
||
|
|
},
|
||
|
|
|
||
|
|
disable: function() {
|
||
|
|
module.debug('Disabling checkbox functionality');
|
||
|
|
$module.addClass(className.disabled);
|
||
|
|
$input.prop('disabled', 'disabled');
|
||
|
|
settings.onDisabled.call($input.get());
|
||
|
|
},
|
||
|
|
|
||
|
|
check: function() {
|
||
|
|
module.debug('Enabling checkbox', $input);
|
||
|
|
$input
|
||
|
|
.prop('checked', true)
|
||
|
|
.trigger('change')
|
||
|
|
;
|
||
|
|
module.set.checked();
|
||
|
|
$input.trigger('blur');
|
||
|
|
settings.onChange.call($input.get());
|
||
|
|
settings.onChecked.call($input.get());
|
||
|
|
},
|
||
|
|
|
||
|
|
uncheck: function() {
|
||
|
|
module.debug('Disabling checkbox');
|
||
|
|
$input
|
||
|
|
.prop('checked', false)
|
||
|
|
.trigger('change')
|
||
|
|
;
|
||
|
|
module.remove.checked();
|
||
|
|
$input.trigger('blur');
|
||
|
|
settings.onChange.call($input.get());
|
||
|
|
settings.onUnchecked.call($input.get());
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function(event) {
|
||
|
|
if( !module.can.change() ) {
|
||
|
|
console.log(module.can.change());
|
||
|
|
module.debug('Checkbox is read-only or disabled, ignoring toggle');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
module.verbose('Determining new checkbox state');
|
||
|
|
if( module.is.unchecked() ) {
|
||
|
|
module.check();
|
||
|
|
}
|
||
|
|
else if( module.is.checked() && module.can.uncheck() ) {
|
||
|
|
module.uncheck();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.checkbox.settings = {
|
||
|
|
|
||
|
|
name : 'Checkbox',
|
||
|
|
namespace : 'checkbox',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
// delegated event context
|
||
|
|
uncheckable : 'auto',
|
||
|
|
fireOnInit : true,
|
||
|
|
|
||
|
|
onChange : function(){},
|
||
|
|
onChecked : function(){},
|
||
|
|
onUnchecked : function(){},
|
||
|
|
onEnabled : function(){},
|
||
|
|
onDisabled : function(){},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
checked : 'checked',
|
||
|
|
disabled : 'disabled',
|
||
|
|
radio : 'radio',
|
||
|
|
readOnly : 'read-only'
|
||
|
|
},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
method : 'The method you called is not defined'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
input : 'input[type="checkbox"], input[type="radio"]',
|
||
|
|
label : 'label'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Dimmer
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.dimmer = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.dimmer.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.dimmer.settings),
|
||
|
|
|
||
|
|
selector = settings.selector,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
className = settings.className,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
clickEvent = ('ontouchstart' in document.documentElement)
|
||
|
|
? 'touchstart'
|
||
|
|
: 'click',
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$dimmer,
|
||
|
|
$dimmable,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
preinitialize: function() {
|
||
|
|
if( module.is.dimmer() ) {
|
||
|
|
$dimmable = $module.parent();
|
||
|
|
$dimmer = $module;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$dimmable = $module;
|
||
|
|
if( module.has.dimmer() ) {
|
||
|
|
if(settings.dimmerName) {
|
||
|
|
$dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$dimmer = $dimmable.children(selector.dimmer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$dimmer = module.create();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing dimmer', settings);
|
||
|
|
if(settings.on == 'hover') {
|
||
|
|
$dimmable
|
||
|
|
.on('mouseenter' + eventNamespace, module.show)
|
||
|
|
.on('mouseleave' + eventNamespace, module.hide)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.on == 'click') {
|
||
|
|
$dimmable
|
||
|
|
.on(clickEvent + eventNamespace, module.toggle)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if( module.is.page() ) {
|
||
|
|
module.debug('Setting as a page dimmer', $dimmable);
|
||
|
|
module.set.pageDimmer();
|
||
|
|
}
|
||
|
|
|
||
|
|
if( module.is.closable() ) {
|
||
|
|
module.verbose('Adding dimmer close event', $dimmer);
|
||
|
|
$dimmer
|
||
|
|
.on(clickEvent + eventNamespace, module.event.click)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.set.dimmable();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, instance)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module', $dimmer);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
$dimmable
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$dimmer
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
click: function(event) {
|
||
|
|
module.verbose('Determining if event occured on dimmer', event);
|
||
|
|
if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
|
||
|
|
module.hide();
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
addContent: function(element) {
|
||
|
|
var
|
||
|
|
$content = $(element)
|
||
|
|
;
|
||
|
|
module.debug('Add content to dimmer', $content);
|
||
|
|
if($content.parent()[0] !== $dimmer[0]) {
|
||
|
|
$content.detach().appendTo($dimmer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
create: function() {
|
||
|
|
var
|
||
|
|
$element = $( settings.template.dimmer() )
|
||
|
|
;
|
||
|
|
if(settings.variation) {
|
||
|
|
module.debug('Creating dimmer with variation', settings.variation);
|
||
|
|
$element.addClass(className.variation);
|
||
|
|
}
|
||
|
|
if(settings.dimmerName) {
|
||
|
|
module.debug('Creating named dimmer', settings.dimmerName);
|
||
|
|
$element.addClass(settings.dimmerName);
|
||
|
|
}
|
||
|
|
$element
|
||
|
|
.appendTo($dimmable)
|
||
|
|
;
|
||
|
|
return $element;
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
module.debug('Showing dimmer', $dimmer, settings);
|
||
|
|
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
|
||
|
|
module.animate.show(callback);
|
||
|
|
settings.onShow.call(element);
|
||
|
|
settings.onChange.call(element);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Dimmer is already shown or disabled');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( module.is.dimmed() || module.is.animating() ) {
|
||
|
|
module.debug('Hiding dimmer', $dimmer);
|
||
|
|
module.animate.hide(callback);
|
||
|
|
settings.onHide.call(element);
|
||
|
|
settings.onChange.call(element);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Dimmer is not visible');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function() {
|
||
|
|
module.verbose('Toggling dimmer visibility', $dimmer);
|
||
|
|
if( !module.is.dimmed() ) {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
animate: {
|
||
|
|
show: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
|
||
|
|
if(settings.opacity !== 'auto') {
|
||
|
|
module.set.opacity();
|
||
|
|
}
|
||
|
|
$dimmer
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' in',
|
||
|
|
queue : false,
|
||
|
|
duration : module.get.duration(),
|
||
|
|
useFailSafe : true,
|
||
|
|
onStart : function() {
|
||
|
|
module.set.dimmed();
|
||
|
|
},
|
||
|
|
onComplete : function() {
|
||
|
|
module.set.active();
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Showing dimmer animation with javascript');
|
||
|
|
module.set.dimmed();
|
||
|
|
if(settings.opacity == 'auto') {
|
||
|
|
settings.opacity = 0.8;
|
||
|
|
}
|
||
|
|
$dimmer
|
||
|
|
.stop()
|
||
|
|
.css({
|
||
|
|
opacity : 0,
|
||
|
|
width : '100%',
|
||
|
|
height : '100%'
|
||
|
|
})
|
||
|
|
.fadeTo(module.get.duration(), settings.opacity, function() {
|
||
|
|
$dimmer.removeAttr('style');
|
||
|
|
module.set.active();
|
||
|
|
callback();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hide: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
|
||
|
|
module.verbose('Hiding dimmer with css');
|
||
|
|
$dimmer
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' out',
|
||
|
|
queue : false,
|
||
|
|
duration : module.get.duration(),
|
||
|
|
useFailSafe : true,
|
||
|
|
onStart : function() {
|
||
|
|
module.remove.dimmed();
|
||
|
|
},
|
||
|
|
onComplete : function() {
|
||
|
|
module.remove.active();
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Hiding dimmer with javascript');
|
||
|
|
module.remove.dimmed();
|
||
|
|
$dimmer
|
||
|
|
.stop()
|
||
|
|
.fadeOut(module.get.duration(), function() {
|
||
|
|
module.remove.active();
|
||
|
|
$dimmer.removeAttr('style');
|
||
|
|
callback();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
dimmer: function() {
|
||
|
|
return $dimmer;
|
||
|
|
},
|
||
|
|
duration: function() {
|
||
|
|
if(typeof settings.duration == 'object') {
|
||
|
|
if( module.is.active() ) {
|
||
|
|
return settings.duration.hide;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings.duration.show;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return settings.duration;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
dimmer: function() {
|
||
|
|
if(settings.dimmerName) {
|
||
|
|
return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return ( $module.children(selector.dimmer).length > 0 );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
active: function() {
|
||
|
|
return $dimmer.hasClass(className.active);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
|
||
|
|
},
|
||
|
|
closable: function() {
|
||
|
|
if(settings.closable == 'auto') {
|
||
|
|
if(settings.on == 'hover') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return settings.closable;
|
||
|
|
},
|
||
|
|
dimmer: function() {
|
||
|
|
return $module.is(selector.dimmer);
|
||
|
|
},
|
||
|
|
dimmable: function() {
|
||
|
|
return $module.is(selector.dimmable);
|
||
|
|
},
|
||
|
|
dimmed: function() {
|
||
|
|
return $dimmable.hasClass(className.dimmed);
|
||
|
|
},
|
||
|
|
disabled: function() {
|
||
|
|
return $dimmable.hasClass(className.disabled);
|
||
|
|
},
|
||
|
|
enabled: function() {
|
||
|
|
return !module.is.disabled();
|
||
|
|
},
|
||
|
|
page: function () {
|
||
|
|
return $dimmable.is('body');
|
||
|
|
},
|
||
|
|
pageDimmer: function() {
|
||
|
|
return $dimmer.hasClass(className.pageDimmer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
can: {
|
||
|
|
show: function() {
|
||
|
|
return !$dimmer.hasClass(className.disabled);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
opacity: function(opacity) {
|
||
|
|
var
|
||
|
|
opacity = settings.opacity || opacity,
|
||
|
|
color = $dimmer.css('background-color'),
|
||
|
|
colorArray = color.split(','),
|
||
|
|
isRGBA = (colorArray && colorArray.length == 4)
|
||
|
|
;
|
||
|
|
if(isRGBA) {
|
||
|
|
colorArray[3] = opacity + ')';
|
||
|
|
color = colorArray.join(',');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
color = 'rgba(0, 0, 0, ' + opacity + ')';
|
||
|
|
}
|
||
|
|
module.debug('Setting opacity to', opacity);
|
||
|
|
$dimmer.css('background-color', color);
|
||
|
|
},
|
||
|
|
active: function() {
|
||
|
|
$dimmer.addClass(className.active);
|
||
|
|
},
|
||
|
|
dimmable: function() {
|
||
|
|
$dimmable.addClass(className.dimmable);
|
||
|
|
},
|
||
|
|
dimmed: function() {
|
||
|
|
$dimmable.addClass(className.dimmed);
|
||
|
|
},
|
||
|
|
pageDimmer: function() {
|
||
|
|
$dimmer.addClass(className.pageDimmer);
|
||
|
|
},
|
||
|
|
disabled: function() {
|
||
|
|
$dimmer.addClass(className.disabled);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
active: function() {
|
||
|
|
$dimmer
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
dimmed: function() {
|
||
|
|
$dimmable.removeClass(className.dimmed);
|
||
|
|
},
|
||
|
|
disabled: function() {
|
||
|
|
$dimmer.removeClass(className.disabled);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
module.preinitialize();
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.dimmer.settings = {
|
||
|
|
|
||
|
|
name : 'Dimmer',
|
||
|
|
namespace : 'dimmer',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
// name to distinguish between multiple dimmers in context
|
||
|
|
dimmerName : false,
|
||
|
|
|
||
|
|
// whether to add a variation type
|
||
|
|
variation : false,
|
||
|
|
|
||
|
|
// whether to bind close events
|
||
|
|
closable : 'auto',
|
||
|
|
|
||
|
|
// whether to use css animations
|
||
|
|
useCSS : true,
|
||
|
|
|
||
|
|
// css animation to use
|
||
|
|
transition : 'fade',
|
||
|
|
|
||
|
|
// event to bind to
|
||
|
|
on : false,
|
||
|
|
|
||
|
|
// overriding opacity value
|
||
|
|
opacity : 'auto',
|
||
|
|
|
||
|
|
// transition durations
|
||
|
|
duration : {
|
||
|
|
show : 500,
|
||
|
|
hide : 500
|
||
|
|
},
|
||
|
|
|
||
|
|
onChange : function(){},
|
||
|
|
onShow : function(){},
|
||
|
|
onHide : function(){},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector: {
|
||
|
|
dimmable : '.dimmable',
|
||
|
|
dimmer : '.ui.dimmer',
|
||
|
|
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
|
||
|
|
},
|
||
|
|
|
||
|
|
template: {
|
||
|
|
dimmer: function() {
|
||
|
|
return $('<div />').attr('class', 'ui dimmer');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
animating : 'animating',
|
||
|
|
dimmable : 'dimmable',
|
||
|
|
dimmed : 'dimmed',
|
||
|
|
disabled : 'disabled',
|
||
|
|
hide : 'hide',
|
||
|
|
pageDimmer : 'page',
|
||
|
|
show : 'show'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Dropdown
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.dropdown = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
$document = $(document),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
hasTouch = ('ontouchstart' in document.documentElement),
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function(index) {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.dropdown.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.dropdown.settings),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$text = $module.find(selector.text),
|
||
|
|
$search = $module.find(selector.search),
|
||
|
|
$input = $module.find(selector.input),
|
||
|
|
|
||
|
|
$combo = ($module.prev().find(selector.text).length > 0)
|
||
|
|
? $module.prev().find(selector.text)
|
||
|
|
: $module.prev(),
|
||
|
|
|
||
|
|
$menu = $module.children(selector.menu),
|
||
|
|
$item = $menu.find(selector.item),
|
||
|
|
|
||
|
|
activated = false,
|
||
|
|
itemActivated = false,
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
elementNamespace,
|
||
|
|
id,
|
||
|
|
observer,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing dropdown', settings);
|
||
|
|
|
||
|
|
if( module.is.alreadySetup() ) {
|
||
|
|
module.setup.reference();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.setup.layout();
|
||
|
|
|
||
|
|
module.save.defaults();
|
||
|
|
module.set.selected();
|
||
|
|
|
||
|
|
module.create.id();
|
||
|
|
|
||
|
|
if(hasTouch) {
|
||
|
|
module.bind.touchEvents();
|
||
|
|
}
|
||
|
|
module.bind.mouseEvents();
|
||
|
|
module.bind.keyboardEvents();
|
||
|
|
|
||
|
|
module.observeChanges();
|
||
|
|
module.instantiate();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of dropdown', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous dropdown for', $module);
|
||
|
|
module.remove.tabbable();
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
$menu
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$document
|
||
|
|
.off(elementNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
observeChanges: function() {
|
||
|
|
if('MutationObserver' in window) {
|
||
|
|
observer = new MutationObserver(function(mutations) {
|
||
|
|
if( module.is.selectMutation(mutations) ) {
|
||
|
|
module.debug('<select> modified, recreating menu');
|
||
|
|
module.setup.select();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('DOM tree modified, updating selector cache');
|
||
|
|
module.refresh();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
observer.observe(element, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
module.debug('Setting up mutation observer', observer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
create: {
|
||
|
|
id: function() {
|
||
|
|
id = (Math.random().toString(16) + '000000000').substr(2,8);
|
||
|
|
elementNamespace = '.' + id;
|
||
|
|
module.verbose('Creating unique id for element', id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
search: function() {
|
||
|
|
var
|
||
|
|
query
|
||
|
|
;
|
||
|
|
query = $search.val();
|
||
|
|
|
||
|
|
module.verbose('Searching for query', query);
|
||
|
|
module.filter(query);
|
||
|
|
if(module.is.searchSelection() && module.can.show() ) {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setup: {
|
||
|
|
layout: function() {
|
||
|
|
if( $module.is('select') ) {
|
||
|
|
module.setup.select();
|
||
|
|
}
|
||
|
|
if( module.is.search() && !module.is.searchable() ) {
|
||
|
|
$search = $('<input />')
|
||
|
|
.addClass(className.search)
|
||
|
|
.insertBefore($text)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(settings.allowTab) {
|
||
|
|
module.set.tabbable();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
select: function() {
|
||
|
|
var
|
||
|
|
selectValues = module.get.selectValues()
|
||
|
|
;
|
||
|
|
module.debug('Dropdown initialized on a select', selectValues);
|
||
|
|
if( $module.is('select') ) {
|
||
|
|
$input = $module;
|
||
|
|
}
|
||
|
|
// see if select is placed correctly already
|
||
|
|
if($input.parent(selector.dropdown).length > 0) {
|
||
|
|
module.debug('UI dropdown already exists. Creating dropdown menu only');
|
||
|
|
$module = $input.closest(selector.dropdown);
|
||
|
|
$menu = $module.children(selector.menu);
|
||
|
|
if($menu.length === 0) {
|
||
|
|
$menu = $('<div />')
|
||
|
|
.addClass(className.menu)
|
||
|
|
.appendTo($module)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$menu.html( settings.templates.menu( selectValues ));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Creating entire dropdown from select');
|
||
|
|
$module = $('<div />')
|
||
|
|
.attr('class', $input.attr('class') )
|
||
|
|
.addClass(className.selection)
|
||
|
|
.addClass(className.dropdown)
|
||
|
|
.html( settings.templates.dropdown(selectValues) )
|
||
|
|
.insertBefore($input)
|
||
|
|
;
|
||
|
|
$input
|
||
|
|
.removeAttr('class')
|
||
|
|
.prependTo($module)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.setup.reference();
|
||
|
|
},
|
||
|
|
reference: function() {
|
||
|
|
var
|
||
|
|
$firstModules,
|
||
|
|
$lastModules
|
||
|
|
;
|
||
|
|
module.debug('Dropdown behavior was called on select, replacing with closest dropdown');
|
||
|
|
// replace module reference
|
||
|
|
$module = $module.closest(selector.dropdown);
|
||
|
|
module.refresh();
|
||
|
|
// adjust all modules
|
||
|
|
$firstModules = $allModules.slice(0, index);
|
||
|
|
$lastModules = $allModules.slice(index + 1);
|
||
|
|
$allModules = $firstModules.add($module).add($lastModules);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache');
|
||
|
|
$text = $module.find(selector.text);
|
||
|
|
$search = $module.find(selector.search);
|
||
|
|
$input = $module.find(selector.input);
|
||
|
|
$combo = ($module.prev().find(selector.text).length > 0)
|
||
|
|
? $module.prev().find(selector.text)
|
||
|
|
: $module.prev()
|
||
|
|
;
|
||
|
|
$menu = $module.children(selector.menu);
|
||
|
|
$item = $menu.find(selector.item);
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function() {
|
||
|
|
module.verbose('Toggling menu visibility');
|
||
|
|
if( !module.is.active() ) {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( module.is.searchSelection() && module.is.allFiltered() ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( module.can.show() && !module.is.active() ) {
|
||
|
|
module.debug('Showing dropdown');
|
||
|
|
module.animate.show(function() {
|
||
|
|
if( module.can.click() ) {
|
||
|
|
module.bind.intent();
|
||
|
|
}
|
||
|
|
module.set.visible();
|
||
|
|
callback.call(element);
|
||
|
|
});
|
||
|
|
settings.onShow.call(element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( module.is.active() ) {
|
||
|
|
module.debug('Hiding dropdown');
|
||
|
|
module.animate.hide(function() {
|
||
|
|
module.remove.visible();
|
||
|
|
callback.call(element);
|
||
|
|
});
|
||
|
|
settings.onHide.call(element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideOthers: function() {
|
||
|
|
module.verbose('Finding other dropdowns to hide');
|
||
|
|
$allModules
|
||
|
|
.not($module)
|
||
|
|
.has(selector.menu + ':visible:not(.' + className.animating + ')')
|
||
|
|
.dropdown('hide')
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
hideSubMenus: function() {
|
||
|
|
var
|
||
|
|
$subMenus = $menu.find(selector.menu)
|
||
|
|
;
|
||
|
|
$subMenus.transition('hide');
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
keyboardEvents: function() {
|
||
|
|
module.debug('Binding keyboard events');
|
||
|
|
$module
|
||
|
|
.on('keydown' + eventNamespace, module.event.keydown)
|
||
|
|
;
|
||
|
|
if( module.is.searchable() ) {
|
||
|
|
$module
|
||
|
|
.on(module.get.inputEvent(), selector.search, module.event.input)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touchEvents: function() {
|
||
|
|
module.debug('Touch device detected binding additional touch events');
|
||
|
|
if( module.is.searchSelection() ) {
|
||
|
|
// do nothing special yet
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.on('touchstart' + eventNamespace, module.event.test.toggle)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$menu
|
||
|
|
.on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
mouseEvents: function() {
|
||
|
|
module.verbose('Mouse detected binding mouse events');
|
||
|
|
if( module.is.searchSelection() ) {
|
||
|
|
$module
|
||
|
|
.on('mousedown' + eventNamespace, selector.menu, module.event.menu.activate)
|
||
|
|
.on('mouseup' + eventNamespace, selector.menu, module.event.menu.deactivate)
|
||
|
|
.on('click' + eventNamespace, selector.search, module.show)
|
||
|
|
.on('focus' + eventNamespace, selector.search, module.event.searchFocus)
|
||
|
|
.on('blur' + eventNamespace, selector.search, module.event.searchBlur)
|
||
|
|
.on('click' + eventNamespace, selector.text, module.event.searchTextFocus)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(settings.on == 'click') {
|
||
|
|
$module
|
||
|
|
.on('click' + eventNamespace, module.event.test.toggle)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.on == 'hover') {
|
||
|
|
$module
|
||
|
|
.on('mouseenter' + eventNamespace, module.delay.show)
|
||
|
|
.on('mouseleave' + eventNamespace, module.delay.hide)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.on(settings.on + eventNamespace, module.toggle)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$module
|
||
|
|
.on('mousedown' + eventNamespace, module.event.mousedown)
|
||
|
|
.on('mouseup' + eventNamespace, module.event.mouseup)
|
||
|
|
.on('focus' + eventNamespace, module.event.focus)
|
||
|
|
.on('blur' + eventNamespace, module.event.blur)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$menu
|
||
|
|
.on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter)
|
||
|
|
.on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave)
|
||
|
|
.on('click' + eventNamespace, selector.item, module.event.item.click)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
intent: function() {
|
||
|
|
module.verbose('Binding hide intent event to document');
|
||
|
|
if(hasTouch) {
|
||
|
|
$document
|
||
|
|
.on('touchstart' + elementNamespace, module.event.test.touch)
|
||
|
|
.on('touchmove' + elementNamespace, module.event.test.touch)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$document
|
||
|
|
.on('click' + elementNamespace, module.event.test.hide)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
unbind: {
|
||
|
|
intent: function() {
|
||
|
|
module.verbose('Removing hide intent event from document');
|
||
|
|
if(hasTouch) {
|
||
|
|
$document
|
||
|
|
.off('touchstart' + elementNamespace)
|
||
|
|
.off('touchmove' + elementNamespace)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$document
|
||
|
|
.off('click' + elementNamespace)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
filter: function(searchTerm) {
|
||
|
|
var
|
||
|
|
$results = $(),
|
||
|
|
escapedTerm = module.escape.regExp(searchTerm),
|
||
|
|
exactRegExp = new RegExp('^' + escapedTerm, 'igm'),
|
||
|
|
fullTextRegExp = new RegExp(escapedTerm, 'ig'),
|
||
|
|
allItemsFiltered
|
||
|
|
;
|
||
|
|
module.verbose('Searching for matching values');
|
||
|
|
$item
|
||
|
|
.each(function(){
|
||
|
|
var
|
||
|
|
$choice = $(this),
|
||
|
|
text = String(module.get.choiceText($choice, false)),
|
||
|
|
value = String(module.get.choiceValue($choice, text))
|
||
|
|
;
|
||
|
|
if( text.match(exactRegExp) || value.match(exactRegExp) ) {
|
||
|
|
$results = $results.add($choice);
|
||
|
|
}
|
||
|
|
else if(settings.fullTextSearch) {
|
||
|
|
if( text.match(fullTextRegExp) || value.match(fullTextRegExp) ) {
|
||
|
|
$results = $results.add($choice);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
module.debug('Setting filter', searchTerm);
|
||
|
|
module.remove.filteredItem();
|
||
|
|
$item
|
||
|
|
.not($results)
|
||
|
|
.addClass(className.filtered)
|
||
|
|
;
|
||
|
|
|
||
|
|
module.verbose('Selecting first non-filtered element');
|
||
|
|
module.remove.selectedItem();
|
||
|
|
$item
|
||
|
|
.not('.' + className.filtered)
|
||
|
|
.eq(0)
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
if( module.is.allFiltered() ) {
|
||
|
|
module.debug('All items filtered, hiding dropdown', searchTerm);
|
||
|
|
if(module.is.searchSelection()) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
settings.onNoResults.call(element, searchTerm);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
focusSearch: function() {
|
||
|
|
if( module.is.search() ) {
|
||
|
|
$search
|
||
|
|
.focus()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
forceSelection: function() {
|
||
|
|
var
|
||
|
|
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
|
||
|
|
$activeItem = $item.filter('.' + className.active).eq(0),
|
||
|
|
$selectedItem = ($currentlySelected.length > 0)
|
||
|
|
? $currentlySelected
|
||
|
|
: $activeItem,
|
||
|
|
hasSelected = ($selectedItem.size() > 0)
|
||
|
|
;
|
||
|
|
if(hasSelected) {
|
||
|
|
module.event.item.click.call($selectedItem);
|
||
|
|
module.remove.filteredItem();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
// prevents focus callback from occuring on mousedown
|
||
|
|
mousedown: function() {
|
||
|
|
activated = true;
|
||
|
|
},
|
||
|
|
mouseup: function() {
|
||
|
|
activated = false;
|
||
|
|
},
|
||
|
|
focus: function() {
|
||
|
|
if(!activated && module.is.hidden()) {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
blur: function(event) {
|
||
|
|
var
|
||
|
|
pageLostFocus = (document.activeElement === this)
|
||
|
|
;
|
||
|
|
if(!activated && !pageLostFocus) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
searchFocus: function() {
|
||
|
|
activated = true;
|
||
|
|
module.show();
|
||
|
|
},
|
||
|
|
searchBlur: function(event) {
|
||
|
|
var
|
||
|
|
pageLostFocus = (document.activeElement === this)
|
||
|
|
;
|
||
|
|
if(!itemActivated && !pageLostFocus) {
|
||
|
|
if(settings.forceSelection) {
|
||
|
|
module.forceSelection();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
searchTextFocus: function(event) {
|
||
|
|
activated = true;
|
||
|
|
$search.focus();
|
||
|
|
},
|
||
|
|
input: function(event) {
|
||
|
|
if(module.is.searchSelection()) {
|
||
|
|
module.set.filtered();
|
||
|
|
}
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(module.search, settings.delay.search);
|
||
|
|
},
|
||
|
|
keydown: function(event) {
|
||
|
|
var
|
||
|
|
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
|
||
|
|
$activeItem = $menu.children('.' + className.active).eq(0),
|
||
|
|
$selectedItem = ($currentlySelected.length > 0)
|
||
|
|
? $currentlySelected
|
||
|
|
: $activeItem,
|
||
|
|
$visibleItems = ($selectedItem.length > 0)
|
||
|
|
? $selectedItem.siblings(':not(.' + className.filtered +')').andSelf()
|
||
|
|
: $menu.children(':not(.' + className.filtered +')'),
|
||
|
|
$subMenu = $selectedItem.children(selector.menu),
|
||
|
|
$parentMenu = $selectedItem.closest(selector.menu),
|
||
|
|
isSubMenuItem = $parentMenu[0] !== $menu[0],
|
||
|
|
inVisibleMenu = $parentMenu.is(':visible'),
|
||
|
|
pressedKey = event.which,
|
||
|
|
keys = {
|
||
|
|
enter : 13,
|
||
|
|
escape : 27,
|
||
|
|
leftArrow : 37,
|
||
|
|
upArrow : 38,
|
||
|
|
rightArrow : 39,
|
||
|
|
downArrow : 40
|
||
|
|
},
|
||
|
|
hasSubMenu = ($subMenu.length> 0),
|
||
|
|
hasSelectedItem = ($selectedItem.length > 0),
|
||
|
|
lastVisibleIndex = ($visibleItems.size() - 1),
|
||
|
|
$nextItem,
|
||
|
|
newIndex
|
||
|
|
;
|
||
|
|
// visible menu keyboard shortcuts
|
||
|
|
if(module.is.visible()) {
|
||
|
|
// enter (select or sub-menu)
|
||
|
|
if(pressedKey == keys.enter && hasSelectedItem) {
|
||
|
|
if(hasSubMenu && !settings.allowCategorySelection) {
|
||
|
|
module.verbose('Pressed enter on unselectable category, opening sub menu');
|
||
|
|
pressedKey = keys.rightArrow;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Enter key pressed, choosing selected item');
|
||
|
|
module.event.item.click.call($selectedItem, event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// left arrow (hide sub-menu)
|
||
|
|
if(pressedKey == keys.leftArrow) {
|
||
|
|
if(isSubMenuItem) {
|
||
|
|
module.verbose('Left key pressed, closing sub-menu');
|
||
|
|
module.animate.hide(false, $parentMenu);
|
||
|
|
$selectedItem
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$parentMenu
|
||
|
|
.closest(selector.item)
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
// right arrow (show sub-menu)
|
||
|
|
if(pressedKey == keys.rightArrow) {
|
||
|
|
if(hasSubMenu) {
|
||
|
|
module.verbose('Right key pressed, opening sub-menu');
|
||
|
|
module.animate.show(false, $subMenu);
|
||
|
|
$selectedItem
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$subMenu
|
||
|
|
.find(selector.item).eq(0)
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
// up arrow (traverse menu up)
|
||
|
|
if(pressedKey == keys.upArrow) {
|
||
|
|
$nextItem = (hasSelectedItem && inVisibleMenu)
|
||
|
|
? $selectedItem.prevAll(selector.item + ':not(.' + className.filtered + ')').eq(0)
|
||
|
|
: $item.eq(0)
|
||
|
|
;
|
||
|
|
if($visibleItems.index( $nextItem ) < 0) {
|
||
|
|
module.verbose('Up key pressed but reached top of current menu');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Up key pressed, changing active item');
|
||
|
|
$selectedItem
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$nextItem
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
module.set.scrollPosition($nextItem);
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
// down arrow (traverse menu down)
|
||
|
|
if(pressedKey == keys.downArrow) {
|
||
|
|
$nextItem = (hasSelectedItem && inVisibleMenu)
|
||
|
|
? $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0)
|
||
|
|
: $item.eq(0)
|
||
|
|
;
|
||
|
|
if($nextItem.length === 0) {
|
||
|
|
module.verbose('Down key pressed but reached bottom of current menu');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Down key pressed, changing active item');
|
||
|
|
$item
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$nextItem
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
module.set.scrollPosition($nextItem);
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// enter (open menu)
|
||
|
|
if(pressedKey == keys.enter) {
|
||
|
|
module.verbose('Enter key pressed, showing dropdown');
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
// escape (close menu)
|
||
|
|
if(pressedKey == keys.escape) {
|
||
|
|
module.verbose('Escape key pressed, closing dropdown');
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
// down arrow (open menu)
|
||
|
|
if(pressedKey == keys.downArrow) {
|
||
|
|
module.verbose('Down key pressed, showing dropdown');
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
test: {
|
||
|
|
toggle: function(event) {
|
||
|
|
if( module.determine.eventInMenu(event, module.toggle) ) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touch: function(event) {
|
||
|
|
module.determine.eventInMenu(event, function() {
|
||
|
|
if(event.type == 'touchstart') {
|
||
|
|
module.timer = setTimeout(module.hide, settings.delay.touch);
|
||
|
|
}
|
||
|
|
else if(event.type == 'touchmove') {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
event.stopPropagation();
|
||
|
|
},
|
||
|
|
hide: function(event) {
|
||
|
|
module.determine.eventInModule(event, module.hide);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
menu: {
|
||
|
|
activate: function() {
|
||
|
|
itemActivated = true;
|
||
|
|
},
|
||
|
|
deactivate: function() {
|
||
|
|
itemActivated = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
item: {
|
||
|
|
mouseenter: function(event) {
|
||
|
|
var
|
||
|
|
$subMenu = $(this).children(selector.menu),
|
||
|
|
$otherMenus = $(this).siblings(selector.item).children(selector.menu)
|
||
|
|
;
|
||
|
|
if( $subMenu.length > 0 ) {
|
||
|
|
clearTimeout(module.itemTimer);
|
||
|
|
module.itemTimer = setTimeout(function() {
|
||
|
|
module.verbose('Showing sub-menu', $subMenu);
|
||
|
|
$.each($otherMenus, function() {
|
||
|
|
module.animate.hide(false, $(this));
|
||
|
|
});
|
||
|
|
module.animate.show(false, $subMenu);
|
||
|
|
}, settings.delay.show);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mouseleave: function(event) {
|
||
|
|
var
|
||
|
|
$subMenu = $(this).children(selector.menu)
|
||
|
|
;
|
||
|
|
if($subMenu.length > 0) {
|
||
|
|
clearTimeout(module.itemTimer);
|
||
|
|
module.itemTimer = setTimeout(function() {
|
||
|
|
module.verbose('Hiding sub-menu', $subMenu);
|
||
|
|
module.animate.hide(false, $subMenu);
|
||
|
|
}, settings.delay.hide);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
click: function (event) {
|
||
|
|
var
|
||
|
|
$choice = $(this),
|
||
|
|
$target = (event)
|
||
|
|
? $(event.target)
|
||
|
|
: $(''),
|
||
|
|
$subMenu = $choice.find(selector.menu),
|
||
|
|
text = module.get.choiceText($choice),
|
||
|
|
value = module.get.choiceValue($choice, text),
|
||
|
|
callback = function() {
|
||
|
|
module.remove.searchTerm();
|
||
|
|
module.determine.selectAction(text, value);
|
||
|
|
},
|
||
|
|
hasSubMenu = ($subMenu.length > 0),
|
||
|
|
isBubbledEvent = ($subMenu.find($target).length > 0)
|
||
|
|
;
|
||
|
|
if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
resetStyle: function() {
|
||
|
|
$(this).removeAttr('style');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
determine: {
|
||
|
|
selectAction: function(text, value) {
|
||
|
|
module.verbose('Determining action', settings.action);
|
||
|
|
if( $.isFunction( module.action[settings.action] ) ) {
|
||
|
|
module.verbose('Triggering preset action', settings.action, text, value);
|
||
|
|
module.action[ settings.action ](text, value);
|
||
|
|
}
|
||
|
|
else if( $.isFunction(settings.action) ) {
|
||
|
|
module.verbose('Triggering user action', settings.action, text, value);
|
||
|
|
settings.action(text, value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.action, settings.action);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
eventInModule: function(event, callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( $(event.target).closest($module).length === 0 ) {
|
||
|
|
module.verbose('Triggering event', callback);
|
||
|
|
callback();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Event occurred in dropdown, canceling callback');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
eventInMenu: function(event, callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( $(event.target).closest($menu).length === 0 ) {
|
||
|
|
module.verbose('Triggering event', callback);
|
||
|
|
callback();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Event occurred in dropdown menu, canceling callback');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
action: {
|
||
|
|
|
||
|
|
nothing: function() {},
|
||
|
|
|
||
|
|
activate: function(text, value) {
|
||
|
|
value = (value !== undefined)
|
||
|
|
? value
|
||
|
|
: text
|
||
|
|
;
|
||
|
|
module.set.selected(value);
|
||
|
|
module.hide(function() {
|
||
|
|
module.remove.filteredItem();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
select: function(text, value) {
|
||
|
|
value = (value !== undefined)
|
||
|
|
? value
|
||
|
|
: text
|
||
|
|
;
|
||
|
|
module.set.selected(value);
|
||
|
|
module.hide(function() {
|
||
|
|
module.remove.filteredItem();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
combo: function(text, value) {
|
||
|
|
value = (value !== undefined)
|
||
|
|
? value
|
||
|
|
: text
|
||
|
|
;
|
||
|
|
module.set.selected(value);
|
||
|
|
module.hide(function() {
|
||
|
|
module.remove.filteredItem();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function() {
|
||
|
|
module.hide(function() {
|
||
|
|
module.remove.filteredItem();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
id: function() {
|
||
|
|
return id;
|
||
|
|
},
|
||
|
|
text: function() {
|
||
|
|
return $text.text();
|
||
|
|
},
|
||
|
|
value: function() {
|
||
|
|
return ($input.length > 0)
|
||
|
|
? $input.val()
|
||
|
|
: $module.data(metadata.value)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
choiceText: function($choice, preserveHTML) {
|
||
|
|
preserveHTML = (preserveHTML !== undefined)
|
||
|
|
? preserveHTML
|
||
|
|
: settings.preserveHTML
|
||
|
|
;
|
||
|
|
if($choice !== undefined) {
|
||
|
|
if($choice.find(selector.menu).length > 0) {
|
||
|
|
module.verbose('Retreiving text of element with sub-menu');
|
||
|
|
$choice = $choice.clone();
|
||
|
|
$choice.find(selector.menu).remove();
|
||
|
|
$choice.find(selector.menuIcon).remove();
|
||
|
|
}
|
||
|
|
return ($choice.data(metadata.text) !== undefined)
|
||
|
|
? $choice.data(metadata.text)
|
||
|
|
: (preserveHTML)
|
||
|
|
? $choice.html().trim()
|
||
|
|
: $choice.text().trim()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
choiceValue: function($choice, choiceText) {
|
||
|
|
choiceText = choiceText || module.get.choiceText($choice);
|
||
|
|
return ($choice.data(metadata.value) !== undefined)
|
||
|
|
? $choice.data(metadata.value)
|
||
|
|
: (typeof choiceText === 'string')
|
||
|
|
? choiceText.toLowerCase().trim()
|
||
|
|
: choiceText.trim()
|
||
|
|
;
|
||
|
|
},
|
||
|
|
inputEvent: function() {
|
||
|
|
var
|
||
|
|
input = $search[0]
|
||
|
|
;
|
||
|
|
if(input) {
|
||
|
|
return (input.oninput !== undefined)
|
||
|
|
? 'input'
|
||
|
|
: (input.onpropertychange !== undefined)
|
||
|
|
? 'propertychange'
|
||
|
|
: 'keyup'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
selectValues: function() {
|
||
|
|
var
|
||
|
|
select = {}
|
||
|
|
;
|
||
|
|
select.values = (settings.sortSelect)
|
||
|
|
? {} // properties will be sorted in object when re-accessed
|
||
|
|
: [] // properties will keep original order in array
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.find('option')
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
name = $(this).html(),
|
||
|
|
value = ( $(this).attr('value') !== undefined )
|
||
|
|
? $(this).attr('value')
|
||
|
|
: name
|
||
|
|
;
|
||
|
|
if(value === '') {
|
||
|
|
select.placeholder = name;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(settings.sortSelect) {
|
||
|
|
select.values[value] = {
|
||
|
|
name : name,
|
||
|
|
value : value
|
||
|
|
};
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
select.values.push({
|
||
|
|
name: name,
|
||
|
|
value: value
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
if(settings.sortSelect) {
|
||
|
|
module.debug('Retrieved and sorted values from select', select);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Retreived values from select', select);
|
||
|
|
}
|
||
|
|
return select;
|
||
|
|
},
|
||
|
|
activeItem: function() {
|
||
|
|
return $item.filter('.' + className.active);
|
||
|
|
},
|
||
|
|
item: function(value, strict) {
|
||
|
|
var
|
||
|
|
$selectedItem = false
|
||
|
|
;
|
||
|
|
value = (value !== undefined)
|
||
|
|
? value
|
||
|
|
: ( module.get.value() !== undefined)
|
||
|
|
? module.get.value()
|
||
|
|
: module.get.text()
|
||
|
|
;
|
||
|
|
strict = (value === '' || value === 0)
|
||
|
|
? true
|
||
|
|
: strict || false
|
||
|
|
;
|
||
|
|
if(value !== undefined) {
|
||
|
|
$item
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
$choice = $(this),
|
||
|
|
optionText = module.get.choiceText($choice),
|
||
|
|
optionValue = module.get.choiceValue($choice, optionText)
|
||
|
|
;
|
||
|
|
if(strict) {
|
||
|
|
module.verbose('Ambiguous dropdown value using strict type check', $choice, value);
|
||
|
|
if( optionValue === value ) {
|
||
|
|
$selectedItem = $(this);
|
||
|
|
}
|
||
|
|
else if( !$selectedItem && optionText === value ) {
|
||
|
|
$selectedItem = $(this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if( optionValue == value ) {
|
||
|
|
module.verbose('Found select item by value', optionValue, value);
|
||
|
|
$selectedItem = $(this);
|
||
|
|
}
|
||
|
|
else if( !$selectedItem && optionText == value ) {
|
||
|
|
module.verbose('Found select item by text', optionText, value);
|
||
|
|
$selectedItem = $(this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
value = module.get.text();
|
||
|
|
}
|
||
|
|
return $selectedItem || false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
restore: {
|
||
|
|
defaults: function() {
|
||
|
|
module.restore.defaultText();
|
||
|
|
module.restore.defaultValue();
|
||
|
|
},
|
||
|
|
defaultText: function() {
|
||
|
|
var
|
||
|
|
defaultText = $module.data(metadata.defaultText)
|
||
|
|
;
|
||
|
|
module.debug('Restoring default text', defaultText);
|
||
|
|
module.set.text(defaultText);
|
||
|
|
$text.addClass(className.placeholder);
|
||
|
|
},
|
||
|
|
defaultValue: function() {
|
||
|
|
var
|
||
|
|
defaultValue = $module.data(metadata.defaultValue)
|
||
|
|
;
|
||
|
|
if(defaultValue !== undefined) {
|
||
|
|
module.debug('Restoring default value', defaultValue);
|
||
|
|
if(defaultValue.length) {
|
||
|
|
module.set.selected(defaultValue);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.remove.activeItem();
|
||
|
|
module.remove.selectedItem();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
defaults: function() {
|
||
|
|
module.save.defaultText();
|
||
|
|
module.save.placeholderText();
|
||
|
|
module.save.defaultValue();
|
||
|
|
},
|
||
|
|
defaultValue: function() {
|
||
|
|
$module.data(metadata.defaultValue, module.get.value() );
|
||
|
|
},
|
||
|
|
defaultText: function() {
|
||
|
|
$module.data(metadata.defaultText, $text.text() );
|
||
|
|
},
|
||
|
|
placeholderText: function() {
|
||
|
|
if($text.hasClass(className.placeholder)) {
|
||
|
|
$module.data(metadata.placeholderText, $text.text());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function() {
|
||
|
|
var
|
||
|
|
placeholderText = $module.data(metadata.placeholderText)
|
||
|
|
;
|
||
|
|
module.set.text(placeholderText);
|
||
|
|
module.set.value('');
|
||
|
|
module.remove.activeItem();
|
||
|
|
module.remove.selectedItem();
|
||
|
|
$text.addClass(className.placeholder);
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
filtered: function() {
|
||
|
|
var
|
||
|
|
searchValue = $search.val(),
|
||
|
|
hasSearchValue = (typeof searchValue === 'string' && searchValue.length > 0)
|
||
|
|
;
|
||
|
|
if(hasSearchValue) {
|
||
|
|
$text.addClass(className.filtered);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$text.removeClass(className.filtered);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tabbable: function() {
|
||
|
|
if( module.is.searchable() ) {
|
||
|
|
module.debug('Searchable dropdown initialized');
|
||
|
|
$search
|
||
|
|
.val('')
|
||
|
|
.attr('tabindex', 0)
|
||
|
|
;
|
||
|
|
$menu
|
||
|
|
.attr('tabindex', '-1')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Simple selection dropdown initialized');
|
||
|
|
if(!$module.attr('tabindex') ) {
|
||
|
|
$module
|
||
|
|
.attr('tabindex', 0)
|
||
|
|
;
|
||
|
|
$menu
|
||
|
|
.attr('tabindex', '-1')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scrollPosition: function($item, forceScroll) {
|
||
|
|
var
|
||
|
|
edgeTolerance = 5,
|
||
|
|
hasActive,
|
||
|
|
offset,
|
||
|
|
itemHeight,
|
||
|
|
itemOffset,
|
||
|
|
menuOffset,
|
||
|
|
menuScroll,
|
||
|
|
menuHeight,
|
||
|
|
abovePage,
|
||
|
|
belowPage
|
||
|
|
;
|
||
|
|
|
||
|
|
$item = $item || module.get.activeItem();
|
||
|
|
hasActive = ($item && $item.length > 0);
|
||
|
|
forceScroll = (forceScroll !== undefined)
|
||
|
|
? forceScroll
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
|
||
|
|
if($item && hasActive) {
|
||
|
|
|
||
|
|
if(!$menu.hasClass(className.visible)) {
|
||
|
|
$menu.addClass(className.loading);
|
||
|
|
}
|
||
|
|
|
||
|
|
menuHeight = $menu.height();
|
||
|
|
itemHeight = $item.height();
|
||
|
|
menuScroll = $menu.scrollTop();
|
||
|
|
menuOffset = $menu.offset().top;
|
||
|
|
itemOffset = $item.offset().top;
|
||
|
|
offset = menuScroll - menuOffset + itemOffset;
|
||
|
|
belowPage = menuScroll + menuHeight < (offset + edgeTolerance);
|
||
|
|
abovePage = ((offset - edgeTolerance) < menuScroll);
|
||
|
|
module.debug('Scrolling to active item', offset);
|
||
|
|
if(abovePage || belowPage || forceScroll) {
|
||
|
|
$menu
|
||
|
|
.scrollTop(offset)
|
||
|
|
.removeClass(className.loading)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
text: function(text) {
|
||
|
|
if(settings.action == 'combo') {
|
||
|
|
module.debug('Changing combo button text', text, $combo);
|
||
|
|
if(settings.preserveHTML) {
|
||
|
|
$combo.html(text);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$combo.text(text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(settings.action !== 'select') {
|
||
|
|
module.debug('Changing text', text, $text);
|
||
|
|
$text
|
||
|
|
.removeClass(className.filtered)
|
||
|
|
.removeClass(className.placeholder)
|
||
|
|
;
|
||
|
|
if(settings.preserveHTML) {
|
||
|
|
$text.html(text);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$text.text(text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
value: function(value) {
|
||
|
|
module.debug('Adding selected value to hidden input', value, $input);
|
||
|
|
if($input.length > 0) {
|
||
|
|
$input
|
||
|
|
.val(value)
|
||
|
|
.trigger('change')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module.data(metadata.value, value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
active: function() {
|
||
|
|
$module
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module.addClass(className.visible);
|
||
|
|
},
|
||
|
|
selected: function(value) {
|
||
|
|
var
|
||
|
|
$selectedItem = module.get.item(value),
|
||
|
|
selectedText,
|
||
|
|
selectedValue
|
||
|
|
;
|
||
|
|
if($selectedItem) {
|
||
|
|
module.debug('Setting selected menu item to', $selectedItem);
|
||
|
|
module.remove.activeItem();
|
||
|
|
module.remove.selectedItem();
|
||
|
|
$selectedItem
|
||
|
|
.addClass(className.active)
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
selectedText = module.get.choiceText($selectedItem);
|
||
|
|
selectedValue = module.get.choiceValue($selectedItem, selectedText);
|
||
|
|
module.set.text(selectedText);
|
||
|
|
module.set.value(selectedValue);
|
||
|
|
settings.onChange.call(element, value, selectedText, $selectedItem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
active: function() {
|
||
|
|
$module.removeClass(className.active);
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module.removeClass(className.visible);
|
||
|
|
},
|
||
|
|
activeItem: function() {
|
||
|
|
$item.removeClass(className.active);
|
||
|
|
},
|
||
|
|
filteredItem: function() {
|
||
|
|
$item.removeClass(className.filtered);
|
||
|
|
},
|
||
|
|
searchTerm: function() {
|
||
|
|
$search.val('');
|
||
|
|
},
|
||
|
|
selectedItem: function() {
|
||
|
|
$item.removeClass(className.selected);
|
||
|
|
},
|
||
|
|
tabbable: function() {
|
||
|
|
if( module.is.searchable() ) {
|
||
|
|
module.debug('Searchable dropdown initialized');
|
||
|
|
$search
|
||
|
|
.attr('tabindex', '-1')
|
||
|
|
;
|
||
|
|
$menu
|
||
|
|
.attr('tabindex', '-1')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Simple selection dropdown initialized');
|
||
|
|
$module
|
||
|
|
.attr('tabindex', '-1')
|
||
|
|
;
|
||
|
|
$menu
|
||
|
|
.attr('tabindex', '-1')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
active: function() {
|
||
|
|
return $module.hasClass(className.active);
|
||
|
|
},
|
||
|
|
alreadySetup: function() {
|
||
|
|
return ($module.is('select') && $module.parent(selector.dropdown).length > 0);
|
||
|
|
},
|
||
|
|
animating: function($subMenu) {
|
||
|
|
return ($subMenu)
|
||
|
|
? $subMenu.is(':animated') || $subMenu.transition && $subMenu.transition('is animating')
|
||
|
|
: $menu.is(':animated') || $menu.transition && $menu.transition('is animating')
|
||
|
|
;
|
||
|
|
},
|
||
|
|
allFiltered: function() {
|
||
|
|
return ($item.filter('.' + className.filtered).length === $item.length);
|
||
|
|
},
|
||
|
|
hidden: function($subMenu) {
|
||
|
|
return ($subMenu)
|
||
|
|
? $subMenu.is(':hidden')
|
||
|
|
: $menu.is(':hidden')
|
||
|
|
;
|
||
|
|
},
|
||
|
|
selectMutation: function(mutations) {
|
||
|
|
var
|
||
|
|
selectChanged = false
|
||
|
|
;
|
||
|
|
$.each(mutations, function(index, mutation) {
|
||
|
|
if(mutation.target && $(mutation.target).is('select')) {
|
||
|
|
selectChanged = true;
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return selectChanged;
|
||
|
|
},
|
||
|
|
search: function() {
|
||
|
|
return $module.hasClass(className.search);
|
||
|
|
},
|
||
|
|
searchable: function() {
|
||
|
|
return ($search.length > 0);
|
||
|
|
},
|
||
|
|
searchSelection: function() {
|
||
|
|
return ( module.is.searchable() && $search.parent().is($module) );
|
||
|
|
},
|
||
|
|
selection: function() {
|
||
|
|
return $module.hasClass(className.selection);
|
||
|
|
},
|
||
|
|
upward: function() {
|
||
|
|
return $module.hasClass(className.upward);
|
||
|
|
},
|
||
|
|
visible: function($subMenu) {
|
||
|
|
return ($subMenu)
|
||
|
|
? $subMenu.is(':visible')
|
||
|
|
: $menu.is(':visible')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
can: {
|
||
|
|
click: function() {
|
||
|
|
return (hasTouch || settings.on == 'click');
|
||
|
|
},
|
||
|
|
show: function() {
|
||
|
|
return !$module.hasClass(className.disabled);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
animate: {
|
||
|
|
show: function(callback, $subMenu) {
|
||
|
|
var
|
||
|
|
$currentMenu = $subMenu || $menu,
|
||
|
|
start = ($subMenu)
|
||
|
|
? function() {}
|
||
|
|
: function() {
|
||
|
|
module.hideSubMenus();
|
||
|
|
module.hideOthers();
|
||
|
|
module.set.active();
|
||
|
|
}
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
module.set.scrollPosition(module.get.activeItem(), true);
|
||
|
|
module.verbose('Doing menu show animation', $currentMenu);
|
||
|
|
if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
|
||
|
|
|
||
|
|
if(settings.transition == 'auto') {
|
||
|
|
settings.transition = module.is.upward()
|
||
|
|
? 'slide up'
|
||
|
|
: 'slide down'
|
||
|
|
;
|
||
|
|
module.verbose('Automatically determining animation based on animation direction', settings.transition);
|
||
|
|
}
|
||
|
|
if(settings.transition == 'none') {
|
||
|
|
callback.call(element);
|
||
|
|
}
|
||
|
|
else if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$currentMenu
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' in',
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
duration : settings.duration,
|
||
|
|
queue : true,
|
||
|
|
onStart : start,
|
||
|
|
onComplete : function() {
|
||
|
|
callback.call(element);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.transition == 'slide down') {
|
||
|
|
start();
|
||
|
|
$currentMenu
|
||
|
|
.hide()
|
||
|
|
.clearQueue()
|
||
|
|
.children()
|
||
|
|
.clearQueue()
|
||
|
|
.css('opacity', 0)
|
||
|
|
.delay(50)
|
||
|
|
.animate({
|
||
|
|
opacity : 1
|
||
|
|
}, settings.duration, 'easeOutQuad', module.event.resetStyle)
|
||
|
|
.end()
|
||
|
|
.slideDown(100, 'easeOutQuad', function() {
|
||
|
|
module.event.resetStyle.call(this);
|
||
|
|
callback.call(element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.transition == 'fade') {
|
||
|
|
start();
|
||
|
|
$currentMenu
|
||
|
|
.hide()
|
||
|
|
.clearQueue()
|
||
|
|
.fadeIn(settings.duration, function() {
|
||
|
|
module.event.resetStyle.call(this);
|
||
|
|
callback.call(element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.transition, settings.transition);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hide: function(callback, $subMenu) {
|
||
|
|
var
|
||
|
|
$currentMenu = $subMenu || $menu,
|
||
|
|
duration = ($subMenu)
|
||
|
|
? (settings.duration * 0.9)
|
||
|
|
: settings.duration,
|
||
|
|
start = ($subMenu)
|
||
|
|
? function() {}
|
||
|
|
: function() {
|
||
|
|
if( module.can.click() ) {
|
||
|
|
module.unbind.intent();
|
||
|
|
}
|
||
|
|
module.focusSearch();
|
||
|
|
module.remove.active();
|
||
|
|
}
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) {
|
||
|
|
module.verbose('Doing menu hide animation', $currentMenu);
|
||
|
|
|
||
|
|
if(settings.transition == 'auto') {
|
||
|
|
settings.transition = module.is.upward()
|
||
|
|
? 'slide up'
|
||
|
|
: 'slide down'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
$input.trigger('blur');
|
||
|
|
|
||
|
|
if(settings.transition == 'none') {
|
||
|
|
callback.call(element);
|
||
|
|
}
|
||
|
|
else if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$currentMenu
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' out',
|
||
|
|
duration : settings.duration,
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
queue : true,
|
||
|
|
onStart : start,
|
||
|
|
onComplete : function() {
|
||
|
|
callback.call(element);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.transition == 'slide down') {
|
||
|
|
start();
|
||
|
|
$currentMenu
|
||
|
|
.show()
|
||
|
|
.clearQueue()
|
||
|
|
.children()
|
||
|
|
.clearQueue()
|
||
|
|
.css('opacity', 1)
|
||
|
|
.animate({
|
||
|
|
opacity : 0
|
||
|
|
}, 100, 'easeOutQuad', module.event.resetStyle)
|
||
|
|
.end()
|
||
|
|
.delay(50)
|
||
|
|
.slideUp(100, 'easeOutQuad', function() {
|
||
|
|
module.event.resetStyle.call(this);
|
||
|
|
callback.call(element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.transition == 'fade') {
|
||
|
|
start();
|
||
|
|
$currentMenu
|
||
|
|
.show()
|
||
|
|
.clearQueue()
|
||
|
|
.fadeOut(150, function() {
|
||
|
|
module.event.resetStyle.call(this);
|
||
|
|
callback.call(element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.transition);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
delay: {
|
||
|
|
show: function() {
|
||
|
|
module.verbose('Delaying show event to ensure user intent');
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(module.show, settings.delay.show);
|
||
|
|
},
|
||
|
|
hide: function() {
|
||
|
|
module.verbose('Delaying hide event to ensure user intent');
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(module.hide, settings.delay.hide);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
escape: {
|
||
|
|
regExp: function(text) {
|
||
|
|
text = String(text);
|
||
|
|
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: $allModules
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.dropdown.settings = {
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
on : 'click',
|
||
|
|
action : 'activate',
|
||
|
|
|
||
|
|
allowTab : true,
|
||
|
|
fullTextSearch : false,
|
||
|
|
preserveHTML : true,
|
||
|
|
sortSelect : false,
|
||
|
|
|
||
|
|
allowCategorySelection : false,
|
||
|
|
|
||
|
|
delay : {
|
||
|
|
hide : 300,
|
||
|
|
show : 200,
|
||
|
|
search : 50,
|
||
|
|
touch : 50
|
||
|
|
},
|
||
|
|
|
||
|
|
forceSelection: true,
|
||
|
|
|
||
|
|
transition : 'auto',
|
||
|
|
duration : 250,
|
||
|
|
|
||
|
|
/* Callbacks */
|
||
|
|
onNoResults : function(searchTerm){},
|
||
|
|
onChange : function(value, text){},
|
||
|
|
onShow : function(){},
|
||
|
|
onHide : function(){},
|
||
|
|
|
||
|
|
/* Component */
|
||
|
|
|
||
|
|
name : 'Dropdown',
|
||
|
|
namespace : 'dropdown',
|
||
|
|
|
||
|
|
error : {
|
||
|
|
action : 'You called a dropdown action that was not defined',
|
||
|
|
alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
|
||
|
|
method : 'The method you called is not defined.',
|
||
|
|
transition : 'The requested transition was not found'
|
||
|
|
},
|
||
|
|
|
||
|
|
metadata: {
|
||
|
|
defaultText : 'defaultText',
|
||
|
|
defaultValue : 'defaultValue',
|
||
|
|
placeholderText : 'placeholderText',
|
||
|
|
text : 'text',
|
||
|
|
value : 'value'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
dropdown : '.ui.dropdown',
|
||
|
|
input : '> input[type="hidden"], > select',
|
||
|
|
item : '.item',
|
||
|
|
menu : '.menu',
|
||
|
|
menuIcon : '.dropdown.icon',
|
||
|
|
search : '> input.search, .menu > .search > input, .menu > input.search',
|
||
|
|
text : '> .text:not(.icon)'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
animating : 'animating',
|
||
|
|
disabled : 'disabled',
|
||
|
|
dropdown : 'ui dropdown',
|
||
|
|
filtered : 'filtered',
|
||
|
|
loading : 'loading',
|
||
|
|
menu : 'menu',
|
||
|
|
placeholder : 'default',
|
||
|
|
search : 'search',
|
||
|
|
selected : 'selected',
|
||
|
|
selection : 'selection',
|
||
|
|
upward : 'upward',
|
||
|
|
visible : 'visible'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
/* Templates */
|
||
|
|
$.fn.dropdown.settings.templates = {
|
||
|
|
menu: function(select) {
|
||
|
|
var
|
||
|
|
placeholder = select.placeholder || false,
|
||
|
|
values = select.values || {},
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
$.each(select.values, function(index, option) {
|
||
|
|
html += '<div class="item" data-value="' + option.value + '">' + option.name + '</div>';
|
||
|
|
});
|
||
|
|
return html;
|
||
|
|
},
|
||
|
|
dropdown: function(select) {
|
||
|
|
var
|
||
|
|
placeholder = select.placeholder || false,
|
||
|
|
values = select.values || {},
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
html += '<i class="dropdown icon"></i>';
|
||
|
|
if(select.placeholder) {
|
||
|
|
html += '<div class="default text">' + placeholder + '</div>';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
html += '<div class="text"></div>';
|
||
|
|
}
|
||
|
|
html += '<div class="menu">';
|
||
|
|
$.each(select.values, function(index, option) {
|
||
|
|
html += '<div class="item" data-value="' + option.value + '">' + option.name + '</div>';
|
||
|
|
});
|
||
|
|
html += '</div>';
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/* Dependencies */
|
||
|
|
$.extend( $.easing, {
|
||
|
|
easeOutQuad: function (x, t, b, c, d) {
|
||
|
|
return -c *(t/=d)*(t-2) + b;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Modal
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.modal = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
$window = $(window),
|
||
|
|
$document = $(document),
|
||
|
|
$body = $('body'),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.modal.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.modal.settings),
|
||
|
|
|
||
|
|
selector = settings.selector,
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$context = $(settings.context),
|
||
|
|
$close = $module.find(selector.close),
|
||
|
|
|
||
|
|
$allModals,
|
||
|
|
$otherModals,
|
||
|
|
$focusedElement,
|
||
|
|
$dimmable,
|
||
|
|
$dimmer,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
elementNamespace,
|
||
|
|
id,
|
||
|
|
observer,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing dimmer', $context);
|
||
|
|
|
||
|
|
module.create.id();
|
||
|
|
module.create.dimmer();
|
||
|
|
module.refreshModals();
|
||
|
|
|
||
|
|
module.verbose('Attaching close events', $close);
|
||
|
|
module.bind.events();
|
||
|
|
module.observeChanges();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of modal');
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, instance)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
create: {
|
||
|
|
dimmer: function() {
|
||
|
|
var
|
||
|
|
defaultSettings = {
|
||
|
|
debug : settings.debug,
|
||
|
|
dimmerName : 'modals',
|
||
|
|
duration : {
|
||
|
|
show : settings.duration,
|
||
|
|
hide : settings.duration
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
|
||
|
|
;
|
||
|
|
if($.fn.dimmer === undefined) {
|
||
|
|
module.error(error.dimmer);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
module.debug('Creating dimmer with settings', dimmerSettings);
|
||
|
|
$dimmable = $context.dimmer(dimmerSettings);
|
||
|
|
if(settings.detachable) {
|
||
|
|
module.verbose('Modal is detachable, moving content into dimmer');
|
||
|
|
$dimmable.dimmer('add content', $module);
|
||
|
|
}
|
||
|
|
$dimmer = $dimmable.dimmer('get dimmer');
|
||
|
|
},
|
||
|
|
id: function() {
|
||
|
|
id = (Math.random().toString(16) + '000000000').substr(2,8);
|
||
|
|
elementNamespace = '.' + id;
|
||
|
|
module.verbose('Creating unique id for element', id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous modal');
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$window.off(elementNamespace);
|
||
|
|
$close.off(eventNamespace);
|
||
|
|
$context.dimmer('destroy');
|
||
|
|
},
|
||
|
|
|
||
|
|
observeChanges: function() {
|
||
|
|
if('MutationObserver' in window) {
|
||
|
|
observer = new MutationObserver(function(mutations) {
|
||
|
|
module.debug('DOM tree modified, refreshing');
|
||
|
|
module.refresh();
|
||
|
|
});
|
||
|
|
observer.observe(element, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
module.debug('Setting up mutation observer', observer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.remove.scrolling();
|
||
|
|
module.cacheSizes();
|
||
|
|
module.set.screenHeight();
|
||
|
|
module.set.type();
|
||
|
|
module.set.position();
|
||
|
|
},
|
||
|
|
|
||
|
|
refreshModals: function() {
|
||
|
|
$otherModals = $module.siblings(selector.modal);
|
||
|
|
$allModals = $otherModals.add($module);
|
||
|
|
},
|
||
|
|
|
||
|
|
attachEvents: function(selector, event) {
|
||
|
|
var
|
||
|
|
$toggle = $(selector)
|
||
|
|
;
|
||
|
|
event = $.isFunction(module[event])
|
||
|
|
? module[event]
|
||
|
|
: module.toggle
|
||
|
|
;
|
||
|
|
if($toggle.length > 0) {
|
||
|
|
module.debug('Attaching modal events to element', selector, event);
|
||
|
|
$toggle
|
||
|
|
.off(eventNamespace)
|
||
|
|
.on('click' + eventNamespace, event)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.notFound, selector);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
events: function() {
|
||
|
|
$close.on('click' + eventNamespace, module.event.close);
|
||
|
|
$window.on('resize' + elementNamespace, module.event.resize);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
id: function() {
|
||
|
|
return (Math.random().toString(16) + '000000000').substr(2,8);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
close: function() {
|
||
|
|
module.verbose('Closing element pressed');
|
||
|
|
if( $(this).is(selector.approve) ) {
|
||
|
|
if(settings.onApprove.call(element) !== false) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Approve callback returned false cancelling hide');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if( $(this).is(selector.deny) ) {
|
||
|
|
if(settings.onDeny.call(element) !== false) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Deny callback returned false cancelling hide');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
click: function(event) {
|
||
|
|
if( $(event.target).closest($module).length === 0 ) {
|
||
|
|
module.debug('Dimmer clicked, hiding all modals');
|
||
|
|
if( module.is.active() ) {
|
||
|
|
module.remove.clickaway();
|
||
|
|
if(settings.allowMultiple) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hideAll();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debounce: function(method, delay) {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(method, delay);
|
||
|
|
},
|
||
|
|
keyboard: function(event) {
|
||
|
|
var
|
||
|
|
keyCode = event.which,
|
||
|
|
escapeKey = 27
|
||
|
|
;
|
||
|
|
if(keyCode == escapeKey) {
|
||
|
|
if(settings.closable) {
|
||
|
|
module.debug('Escape key pressed hiding modal');
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Escape key pressed, but closable is set to false');
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
resize: function() {
|
||
|
|
if( $dimmable.dimmer('is active') ) {
|
||
|
|
requestAnimationFrame(module.refresh);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function() {
|
||
|
|
if( module.is.active() || module.is.animating() ) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
module.refreshModals();
|
||
|
|
module.showModal(callback);
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
module.refreshModals();
|
||
|
|
module.hideModal(callback);
|
||
|
|
},
|
||
|
|
|
||
|
|
showModal: function(callback) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( module.is.animating() || !module.is.active() ) {
|
||
|
|
|
||
|
|
module.showDimmer();
|
||
|
|
module.cacheSizes();
|
||
|
|
module.set.position();
|
||
|
|
module.set.screenHeight();
|
||
|
|
module.set.type();
|
||
|
|
module.set.clickaway();
|
||
|
|
|
||
|
|
if( !settings.allowMultiple && $otherModals.filter('.' + className.active).length > 0) {
|
||
|
|
module.debug('Other modals visible, queueing show animation');
|
||
|
|
module.hideOthers(module.showModal);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.onShow.call(element);
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
module.debug('Showing modal with css animations');
|
||
|
|
$module
|
||
|
|
.transition({
|
||
|
|
debug : settings.debug,
|
||
|
|
animation : settings.transition + ' in',
|
||
|
|
queue : settings.queue,
|
||
|
|
duration : settings.duration,
|
||
|
|
useFailSafe : true,
|
||
|
|
onComplete : function() {
|
||
|
|
settings.onVisible.apply(element);
|
||
|
|
module.add.keyboardShortcuts();
|
||
|
|
module.save.focus();
|
||
|
|
module.set.active();
|
||
|
|
module.set.autofocus();
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Showing modal with javascript');
|
||
|
|
$module
|
||
|
|
.fadeIn(settings.duration, settings.easing, function() {
|
||
|
|
settings.onVisible.apply(element);
|
||
|
|
module.add.keyboardShortcuts();
|
||
|
|
module.save.focus();
|
||
|
|
module.set.active();
|
||
|
|
callback();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Modal is already visible');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideModal: function(callback, keepDimmed) {
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
module.debug('Hiding modal');
|
||
|
|
settings.onHide.call(element);
|
||
|
|
|
||
|
|
if( module.is.animating() || module.is.active() ) {
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
module.remove.active();
|
||
|
|
$module
|
||
|
|
.transition({
|
||
|
|
debug : settings.debug,
|
||
|
|
animation : settings.transition + ' out',
|
||
|
|
queue : settings.queue,
|
||
|
|
duration : settings.duration,
|
||
|
|
useFailSafe : true,
|
||
|
|
onStart : function() {
|
||
|
|
if(!module.othersActive() && !keepDimmed) {
|
||
|
|
module.hideDimmer();
|
||
|
|
}
|
||
|
|
module.remove.keyboardShortcuts();
|
||
|
|
},
|
||
|
|
onComplete : function() {
|
||
|
|
settings.onHidden.call(element);
|
||
|
|
module.restore.focus();
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.remove.active();
|
||
|
|
if( !module.othersActive() ) {
|
||
|
|
module.hideDimmer();
|
||
|
|
}
|
||
|
|
module.remove.keyboardShortcuts();
|
||
|
|
$module
|
||
|
|
.fadeOut(settings.duration, settings.easing, function() {
|
||
|
|
settings.onHidden.call(element);
|
||
|
|
module.restore.focus();
|
||
|
|
callback();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
showDimmer: function() {
|
||
|
|
if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
|
||
|
|
module.debug('Showing dimmer');
|
||
|
|
$dimmable.dimmer('show');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Dimmer already visible');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideDimmer: function() {
|
||
|
|
if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
|
||
|
|
$dimmable.dimmer('hide', function() {
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
module.remove.clickaway();
|
||
|
|
module.remove.screenHeight();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Dimmer is not visible cannot hide');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideAll: function(callback) {
|
||
|
|
var
|
||
|
|
$visibleModals = $allModals.filter(':visible')
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( $visibleModals.length > 0 ) {
|
||
|
|
module.debug('Hiding all visible modals');
|
||
|
|
module.hideDimmer();
|
||
|
|
$visibleModals
|
||
|
|
.modal('hide modal', callback)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideOthers: function(callback) {
|
||
|
|
var
|
||
|
|
$visibleModals = $otherModals.filter(':visible')
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if( $visibleModals.length > 0 ) {
|
||
|
|
module.debug('Hiding other modals', $otherModals);
|
||
|
|
$visibleModals
|
||
|
|
.modal('hide modal', callback, true)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
othersActive: function() {
|
||
|
|
return ($otherModals.filter('.' + className.active).length > 0);
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
keyboardShortcuts: function() {
|
||
|
|
module.verbose('Adding keyboard shortcuts');
|
||
|
|
$document
|
||
|
|
.on('keyup' + eventNamespace, module.event.keyboard)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
focus: function() {
|
||
|
|
$focusedElement = $(document.activeElement).blur();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
restore: {
|
||
|
|
focus: function() {
|
||
|
|
if($focusedElement && $focusedElement.length > 0) {
|
||
|
|
$focusedElement.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
active: function() {
|
||
|
|
$module.removeClass(className.active);
|
||
|
|
},
|
||
|
|
clickaway: function() {
|
||
|
|
if(settings.closable) {
|
||
|
|
$dimmer
|
||
|
|
.off('click' + elementNamespace)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
screenHeight: function() {
|
||
|
|
if(module.cache.height > module.cache.pageHeight) {
|
||
|
|
module.debug('Removing page height');
|
||
|
|
$body
|
||
|
|
.css('height', '')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
keyboardShortcuts: function() {
|
||
|
|
module.verbose('Removing keyboard shortcuts');
|
||
|
|
$document
|
||
|
|
.off('keyup' + eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
scrolling: function() {
|
||
|
|
$dimmable.removeClass(className.scrolling);
|
||
|
|
$module.removeClass(className.scrolling);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
cacheSizes: function() {
|
||
|
|
var
|
||
|
|
modalHeight = $module.outerHeight()
|
||
|
|
;
|
||
|
|
if(module.cache === undefined || modalHeight !== 0) {
|
||
|
|
module.cache = {
|
||
|
|
pageHeight : $(document).outerHeight(),
|
||
|
|
height : modalHeight + settings.offset,
|
||
|
|
contextHeight : (settings.context == 'body')
|
||
|
|
? $(window).height()
|
||
|
|
: $dimmable.height()
|
||
|
|
};
|
||
|
|
}
|
||
|
|
module.debug('Caching modal and container sizes', module.cache);
|
||
|
|
},
|
||
|
|
|
||
|
|
can: {
|
||
|
|
fit: function() {
|
||
|
|
return ( ( module.cache.height + (settings.padding * 2) ) < module.cache.contextHeight);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
active: function() {
|
||
|
|
return $module.hasClass(className.active);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
return $module.transition('is supported')
|
||
|
|
? $module.transition('is animating')
|
||
|
|
: $module.is(':visible')
|
||
|
|
;
|
||
|
|
},
|
||
|
|
scrolling: function() {
|
||
|
|
return $dimmable.hasClass(className.scrolling);
|
||
|
|
},
|
||
|
|
modernBrowser: function() {
|
||
|
|
// appName for IE11 reports 'Netscape' can no longer use
|
||
|
|
return !(window.ActiveXObject || "ActiveXObject" in window);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
autofocus: function() {
|
||
|
|
if(settings.autofocus) {
|
||
|
|
var
|
||
|
|
$inputs = $module.find(':input:visible'),
|
||
|
|
$autofocus = $inputs.filter('[autofocus]'),
|
||
|
|
$input = ($autofocus.length > 0)
|
||
|
|
? $autofocus
|
||
|
|
: $inputs
|
||
|
|
;
|
||
|
|
$input.first().focus();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clickaway: function() {
|
||
|
|
if(settings.closable) {
|
||
|
|
$dimmer
|
||
|
|
.on('click' + elementNamespace, module.event.click)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
screenHeight: function() {
|
||
|
|
if( module.can.fit() ) {
|
||
|
|
$body.css('height', '');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Modal is taller than page content, resizing page height');
|
||
|
|
$body
|
||
|
|
.css('height', module.cache.height + (settings.padding / 2) )
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
active: function() {
|
||
|
|
$module.addClass(className.active);
|
||
|
|
},
|
||
|
|
scrolling: function() {
|
||
|
|
$dimmable.addClass(className.scrolling);
|
||
|
|
$module.addClass(className.scrolling);
|
||
|
|
},
|
||
|
|
type: function() {
|
||
|
|
if(module.can.fit()) {
|
||
|
|
module.verbose('Modal fits on screen');
|
||
|
|
if(!module.othersActive) {
|
||
|
|
module.remove.scrolling();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Modal cannot fit on screen setting to scrolling');
|
||
|
|
module.set.scrolling();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
position: function() {
|
||
|
|
module.verbose('Centering modal on page', module.cache);
|
||
|
|
if(module.can.fit()) {
|
||
|
|
$module
|
||
|
|
.css({
|
||
|
|
top: '',
|
||
|
|
marginTop: -(module.cache.height / 2)
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.css({
|
||
|
|
marginTop : '',
|
||
|
|
top : $document.scrollTop()
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.modal.settings = {
|
||
|
|
|
||
|
|
name : 'Modal',
|
||
|
|
namespace : 'modal',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
allowMultiple : false,
|
||
|
|
detachable : true,
|
||
|
|
closable : true,
|
||
|
|
autofocus : true,
|
||
|
|
|
||
|
|
dimmerSettings : {
|
||
|
|
closable : false,
|
||
|
|
useCSS : true
|
||
|
|
},
|
||
|
|
|
||
|
|
context : 'body',
|
||
|
|
|
||
|
|
queue : false,
|
||
|
|
duration : 500,
|
||
|
|
easing : 'easeOutExpo',
|
||
|
|
offset : 0,
|
||
|
|
transition : 'scale',
|
||
|
|
|
||
|
|
padding : 50,
|
||
|
|
|
||
|
|
onShow : function(){},
|
||
|
|
onHide : function(){},
|
||
|
|
|
||
|
|
onVisible : function(){},
|
||
|
|
onHidden : function(){},
|
||
|
|
|
||
|
|
onApprove : function(){ return true; },
|
||
|
|
onDeny : function(){ return true; },
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
close : '.close, .actions .button',
|
||
|
|
approve : '.actions .positive, .actions .approve, .actions .ok',
|
||
|
|
deny : '.actions .negative, .actions .deny, .actions .cancel',
|
||
|
|
modal : '.ui.modal'
|
||
|
|
},
|
||
|
|
error : {
|
||
|
|
dimmer : 'UI Dimmer, a required component is not included in this page',
|
||
|
|
method : 'The method you called is not defined.',
|
||
|
|
notFound : 'The element you specified could not be found'
|
||
|
|
},
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
animating : 'animating',
|
||
|
|
scrolling : 'scrolling'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Nag
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.nag = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.nag.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.nag.settings),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = namespace + '-module',
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
|
||
|
|
$close = $module.find(selector.close),
|
||
|
|
$context = (settings.context)
|
||
|
|
? $(settings.context)
|
||
|
|
: $('body'),
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
moduleOffset,
|
||
|
|
moduleHeight,
|
||
|
|
|
||
|
|
contextWidth,
|
||
|
|
contextHeight,
|
||
|
|
contextOffset,
|
||
|
|
|
||
|
|
yOffset,
|
||
|
|
yPosition,
|
||
|
|
|
||
|
|
timer,
|
||
|
|
module,
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); }
|
||
|
|
;
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing element');
|
||
|
|
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
$close
|
||
|
|
.on('click' + eventNamespace, module.dismiss)
|
||
|
|
;
|
||
|
|
|
||
|
|
if(settings.detachable && $module.parent()[0] !== $context[0]) {
|
||
|
|
$module
|
||
|
|
.detach()
|
||
|
|
.prependTo($context)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(settings.displayTime > 0) {
|
||
|
|
setTimeout(module.hide, settings.displayTime);
|
||
|
|
}
|
||
|
|
module.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying instance');
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function() {
|
||
|
|
if( module.should.show() && !$module.is(':visible') ) {
|
||
|
|
module.debug('Showing nag', settings.animation.show);
|
||
|
|
if(settings.animation.show == 'fade') {
|
||
|
|
$module
|
||
|
|
.fadeIn(settings.duration, settings.easing)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.slideDown(settings.duration, settings.easing)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function() {
|
||
|
|
module.debug('Showing nag', settings.animation.hide);
|
||
|
|
if(settings.animation.show == 'fade') {
|
||
|
|
$module
|
||
|
|
.fadeIn(settings.duration, settings.easing)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.slideUp(settings.duration, settings.easing)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onHide: function() {
|
||
|
|
module.debug('Removing nag', settings.animation.hide);
|
||
|
|
$module.remove();
|
||
|
|
if (settings.onHide) {
|
||
|
|
settings.onHide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
dismiss: function(event) {
|
||
|
|
if(settings.storageMethod) {
|
||
|
|
module.storage.set(settings.key, settings.value);
|
||
|
|
}
|
||
|
|
module.hide();
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
event.preventDefault();
|
||
|
|
},
|
||
|
|
|
||
|
|
should: {
|
||
|
|
show: function() {
|
||
|
|
if(settings.persist) {
|
||
|
|
module.debug('Persistent nag is set, can show nag');
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if( module.storage.get(settings.key) != settings.value.toString() ) {
|
||
|
|
module.debug('Stored value is not set, can show nag', module.storage.get(settings.key));
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
module.debug('Stored value is set, cannot show nag', module.storage.get(settings.key));
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
storageOptions: function() {
|
||
|
|
var
|
||
|
|
options = {}
|
||
|
|
;
|
||
|
|
if(settings.expires) {
|
||
|
|
options.expires = settings.expires;
|
||
|
|
}
|
||
|
|
if(settings.domain) {
|
||
|
|
options.domain = settings.domain;
|
||
|
|
}
|
||
|
|
if(settings.path) {
|
||
|
|
options.path = settings.path;
|
||
|
|
}
|
||
|
|
return options;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function() {
|
||
|
|
module.storage.remove(settings.key);
|
||
|
|
},
|
||
|
|
|
||
|
|
storage: {
|
||
|
|
set: function(key, value) {
|
||
|
|
var
|
||
|
|
options = module.get.storageOptions()
|
||
|
|
;
|
||
|
|
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||
|
|
window.localStorage.setItem(key, value);
|
||
|
|
module.debug('Value stored using local storage', key, value);
|
||
|
|
}
|
||
|
|
else if($.cookie !== undefined) {
|
||
|
|
$.cookie(key, value, options);
|
||
|
|
module.debug('Value stored using cookie', key, value, options);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noCookieStorage);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
get: function(key, value) {
|
||
|
|
var
|
||
|
|
storedValue
|
||
|
|
;
|
||
|
|
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||
|
|
storedValue = window.localStorage.getItem(key);
|
||
|
|
}
|
||
|
|
// get by cookie
|
||
|
|
else if($.cookie !== undefined) {
|
||
|
|
storedValue = $.cookie(key);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noCookieStorage);
|
||
|
|
}
|
||
|
|
if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
|
||
|
|
storedValue = undefined;
|
||
|
|
}
|
||
|
|
return storedValue;
|
||
|
|
},
|
||
|
|
remove: function(key) {
|
||
|
|
var
|
||
|
|
options = module.get.storageOptions()
|
||
|
|
;
|
||
|
|
if(settings.storageMethod == 'local' && window.store !== undefined) {
|
||
|
|
window.localStorage.removeItem(key);
|
||
|
|
}
|
||
|
|
// store by cookie
|
||
|
|
else if($.cookie !== undefined) {
|
||
|
|
$.removeCookie(key, options);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noStorage);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.nag.settings = {
|
||
|
|
|
||
|
|
name : 'Nag',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
namespace : 'Nag',
|
||
|
|
|
||
|
|
// allows cookie to be overriden
|
||
|
|
persist : false,
|
||
|
|
|
||
|
|
// set to zero to require manually dismissal, otherwise hides on its own
|
||
|
|
displayTime : 0,
|
||
|
|
|
||
|
|
animation : {
|
||
|
|
show : 'slide',
|
||
|
|
hide : 'slide'
|
||
|
|
},
|
||
|
|
|
||
|
|
context : false,
|
||
|
|
detachable : false,
|
||
|
|
|
||
|
|
expires : 30,
|
||
|
|
domain : false,
|
||
|
|
path : '/',
|
||
|
|
|
||
|
|
// type of storage to use
|
||
|
|
storageMethod : 'cookie',
|
||
|
|
|
||
|
|
// value to store in dismissed localstorage/cookie
|
||
|
|
key : 'nag',
|
||
|
|
value : 'dismiss',
|
||
|
|
|
||
|
|
error: {
|
||
|
|
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
bottom : 'bottom',
|
||
|
|
fixed : 'fixed'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
close : '.close.icon'
|
||
|
|
},
|
||
|
|
|
||
|
|
speed : 500,
|
||
|
|
easing : 'easeOutQuad',
|
||
|
|
|
||
|
|
onHide: function() {}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Popup
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.popup = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
$document = $(document),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
hasTouch = ('ontouchstart' in document.documentElement),
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.popup.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.popup.settings),
|
||
|
|
|
||
|
|
selector = settings.selector,
|
||
|
|
className = settings.className,
|
||
|
|
error = settings.error,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
|
||
|
|
eventNamespace = '.' + settings.namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$context = $(settings.context),
|
||
|
|
$target = (settings.target)
|
||
|
|
? $(settings.target)
|
||
|
|
: $module,
|
||
|
|
|
||
|
|
$window = $(window),
|
||
|
|
$body = $('body'),
|
||
|
|
$popup,
|
||
|
|
$offsetParent,
|
||
|
|
|
||
|
|
searchDepth = 0,
|
||
|
|
triedPositions = false,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
elementNamespace,
|
||
|
|
id,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
// binds events
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing', $module);
|
||
|
|
module.createID();
|
||
|
|
module.bind.events();
|
||
|
|
if( !module.exists() && settings.preserve) {
|
||
|
|
module.create();
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, instance)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
if(settings.popup) {
|
||
|
|
$popup = $(settings.popup).eq(0);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(settings.inline) {
|
||
|
|
$popup = $target.next(selector.popup).eq(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(settings.popup) {
|
||
|
|
$popup.addClass(className.loading);
|
||
|
|
$offsetParent = module.get.offsetParent();
|
||
|
|
$popup.removeClass(className.loading);
|
||
|
|
if(settings.movePopup && module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
|
||
|
|
module.debug('Moving popup to the same offset parent as activating element');
|
||
|
|
$popup
|
||
|
|
.detach()
|
||
|
|
.appendTo($offsetParent)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$offsetParent = (settings.inline)
|
||
|
|
? module.get.offsetParent($target)
|
||
|
|
: module.has.popup()
|
||
|
|
? module.get.offsetParent($popup)
|
||
|
|
: $body
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if( $offsetParent.is('html') ) {
|
||
|
|
module.debug('Setting page as offset parent');
|
||
|
|
$offsetParent = $body;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
reposition: function() {
|
||
|
|
module.refresh();
|
||
|
|
module.set.position();
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.debug('Destroying previous module');
|
||
|
|
// remove element only if was created dynamically
|
||
|
|
if($popup && !settings.preserve) {
|
||
|
|
module.removePopup();
|
||
|
|
}
|
||
|
|
// clear all timeouts
|
||
|
|
clearTimeout(module.hideTimer);
|
||
|
|
clearTimeout(module.showTimer);
|
||
|
|
// remove events
|
||
|
|
$window.off(elementNamespace);
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
start: function(event) {
|
||
|
|
var
|
||
|
|
delay = ($.isPlainObject(settings.delay))
|
||
|
|
? settings.delay.show
|
||
|
|
: settings.delay
|
||
|
|
;
|
||
|
|
clearTimeout(module.hideTimer);
|
||
|
|
module.showTimer = setTimeout(function() {
|
||
|
|
if(module.is.hidden() && !( module.is.active() && module.is.dropdown()) ) {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
}, delay);
|
||
|
|
},
|
||
|
|
end: function() {
|
||
|
|
var
|
||
|
|
delay = ($.isPlainObject(settings.delay))
|
||
|
|
? settings.delay.hide
|
||
|
|
: settings.delay
|
||
|
|
;
|
||
|
|
clearTimeout(module.showTimer);
|
||
|
|
module.hideTimer = setTimeout(function() {
|
||
|
|
if(module.is.visible() ) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
}, delay);
|
||
|
|
},
|
||
|
|
resize: function() {
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
module.set.position();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// generates popup html from metadata
|
||
|
|
create: function() {
|
||
|
|
var
|
||
|
|
html = $module.data(metadata.html) || settings.html,
|
||
|
|
variation = $module.data(metadata.variation) || settings.variation,
|
||
|
|
title = $module.data(metadata.title) || settings.title,
|
||
|
|
content = $module.data(metadata.content) || $module.attr('title') || settings.content
|
||
|
|
;
|
||
|
|
if(html || content || title) {
|
||
|
|
module.debug('Creating pop-up html');
|
||
|
|
if(!html) {
|
||
|
|
html = settings.templates.popup({
|
||
|
|
title : title,
|
||
|
|
content : content
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$popup = $('<div/>')
|
||
|
|
.addClass(className.popup)
|
||
|
|
.addClass(variation)
|
||
|
|
.data(metadata.activator, $module)
|
||
|
|
.html(html)
|
||
|
|
;
|
||
|
|
if(variation) {
|
||
|
|
$popup
|
||
|
|
.addClass(variation)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(settings.inline) {
|
||
|
|
module.verbose('Inserting popup element inline', $popup);
|
||
|
|
$popup
|
||
|
|
.insertAfter($module)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Appending popup element to body', $popup);
|
||
|
|
$popup
|
||
|
|
.appendTo( $context )
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.refresh();
|
||
|
|
if(settings.hoverable) {
|
||
|
|
module.bind.popup();
|
||
|
|
}
|
||
|
|
settings.onCreate.call($popup, element);
|
||
|
|
}
|
||
|
|
else if($target.next(selector.popup).length !== 0) {
|
||
|
|
module.verbose('Pre-existing popup found');
|
||
|
|
settings.inline = true;
|
||
|
|
settings.popup = $target.next(selector.popup).data(metadata.activator, $module);
|
||
|
|
module.refresh();
|
||
|
|
if(settings.hoverable) {
|
||
|
|
module.bind.popup();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(settings.popup) {
|
||
|
|
settings.popup.data(metadata.activator, $module);
|
||
|
|
module.verbose('Used popup specified in settings');
|
||
|
|
module.refresh();
|
||
|
|
if(settings.hoverable) {
|
||
|
|
module.bind.popup();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('No content specified skipping display', element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
createID: function() {
|
||
|
|
id = (Math.random().toString(16) + '000000000').substr(2,8);
|
||
|
|
elementNamespace = '.' + id;
|
||
|
|
module.verbose('Creating unique id for element', id);
|
||
|
|
},
|
||
|
|
|
||
|
|
// determines popup state
|
||
|
|
toggle: function() {
|
||
|
|
module.debug('Toggling pop-up');
|
||
|
|
if( module.is.hidden() ) {
|
||
|
|
module.debug('Popup is hidden, showing pop-up');
|
||
|
|
module.unbind.close();
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Popup is visible, hiding pop-up');
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(callback) {
|
||
|
|
callback = $.isFunction(callback) ? callback : function(){};
|
||
|
|
module.debug('Showing pop-up', settings.transition);
|
||
|
|
if( !module.exists() ) {
|
||
|
|
module.create();
|
||
|
|
}
|
||
|
|
else if(!settings.preserve && !settings.popup) {
|
||
|
|
module.refresh();
|
||
|
|
}
|
||
|
|
if( $popup && module.set.position() ) {
|
||
|
|
module.save.conditions();
|
||
|
|
if(settings.exclusive) {
|
||
|
|
module.hideAll();
|
||
|
|
}
|
||
|
|
module.animate.show(callback);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
hide: function(callback) {
|
||
|
|
callback = $.isFunction(callback) ? callback : function(){};
|
||
|
|
module.remove.visible();
|
||
|
|
module.unbind.close();
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
module.restore.conditions();
|
||
|
|
module.animate.hide(callback);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideAll: function() {
|
||
|
|
$(selector.popup)
|
||
|
|
.filter('.' + className.visible)
|
||
|
|
.each(function() {
|
||
|
|
$(this)
|
||
|
|
.data(metadata.activator)
|
||
|
|
.popup('hide')
|
||
|
|
;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
hideGracefully: function(event) {
|
||
|
|
// don't close on clicks inside popup
|
||
|
|
if(event && $(event.target).closest(selector.popup).length === 0) {
|
||
|
|
module.debug('Click occurred outside popup hiding popup');
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Click was inside popup, keeping popup open');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
exists: function() {
|
||
|
|
if(!$popup) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(settings.inline || settings.popup) {
|
||
|
|
return ( module.has.popup() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return ( $popup.closest($context).length >= 1 )
|
||
|
|
? true
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
removePopup: function() {
|
||
|
|
module.debug('Removing popup', $popup);
|
||
|
|
if( module.has.popup() && !settings.popup) {
|
||
|
|
$popup.remove();
|
||
|
|
$popup = undefined;
|
||
|
|
}
|
||
|
|
settings.onRemove.call($popup, element);
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
conditions: function() {
|
||
|
|
module.cache = {
|
||
|
|
title: $module.attr('title')
|
||
|
|
};
|
||
|
|
if (module.cache.title) {
|
||
|
|
$module.removeAttr('title');
|
||
|
|
}
|
||
|
|
module.verbose('Saving original attributes', module.cache.title);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
restore: {
|
||
|
|
conditions: function() {
|
||
|
|
if(module.cache && module.cache.title) {
|
||
|
|
$module.attr('title', module.cache.title);
|
||
|
|
module.verbose('Restoring original attributes', module.cache.title);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
animate: {
|
||
|
|
show: function(callback) {
|
||
|
|
callback = $.isFunction(callback) ? callback : function(){};
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
module.set.visible();
|
||
|
|
$popup
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' in',
|
||
|
|
queue : false,
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
duration : settings.duration,
|
||
|
|
onComplete : function() {
|
||
|
|
module.bind.close();
|
||
|
|
callback.call($popup, element);
|
||
|
|
settings.onVisible.call($popup, element);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.set.visible();
|
||
|
|
$popup
|
||
|
|
.stop()
|
||
|
|
.fadeIn(settings.duration, settings.easing, function() {
|
||
|
|
module.bind.close();
|
||
|
|
callback.call($popup, element);
|
||
|
|
settings.onVisible.call($popup, element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
settings.onShow.call($popup, element);
|
||
|
|
},
|
||
|
|
hide: function(callback) {
|
||
|
|
callback = $.isFunction(callback) ? callback : function(){};
|
||
|
|
module.debug('Hiding pop-up');
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$popup
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' out',
|
||
|
|
queue : false,
|
||
|
|
duration : settings.duration,
|
||
|
|
debug : settings.debug,
|
||
|
|
verbose : settings.verbose,
|
||
|
|
onComplete : function() {
|
||
|
|
module.reset();
|
||
|
|
callback.call($popup, element);
|
||
|
|
settings.onHidden.call($popup, element);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$popup
|
||
|
|
.stop()
|
||
|
|
.fadeOut(settings.duration, settings.easing, function() {
|
||
|
|
module.reset();
|
||
|
|
callback.call($popup, element);
|
||
|
|
settings.onHidden.call($popup, element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
settings.onHide.call($popup, element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
id: function() {
|
||
|
|
return id;
|
||
|
|
},
|
||
|
|
startEvent: function() {
|
||
|
|
if(settings.on == 'hover') {
|
||
|
|
return (hasTouch)
|
||
|
|
? 'touchstart mouseenter'
|
||
|
|
: 'mouseenter'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.on == 'focus') {
|
||
|
|
return 'focus';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
scrollEvent: function() {
|
||
|
|
return (hasTouch)
|
||
|
|
? 'touchmove scroll'
|
||
|
|
: 'scroll'
|
||
|
|
;
|
||
|
|
},
|
||
|
|
endEvent: function() {
|
||
|
|
if(settings.on == 'hover') {
|
||
|
|
return 'mouseleave';
|
||
|
|
}
|
||
|
|
else if(settings.on == 'focus') {
|
||
|
|
return 'blur';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
offsetParent: function($target) {
|
||
|
|
var
|
||
|
|
element = ($target !== undefined)
|
||
|
|
? $target[0]
|
||
|
|
: $module[0],
|
||
|
|
parentNode = element.parentNode,
|
||
|
|
$node = $(parentNode)
|
||
|
|
;
|
||
|
|
if(parentNode) {
|
||
|
|
var
|
||
|
|
is2D = ($node.css('transform') === 'none'),
|
||
|
|
isStatic = ($node.css('position') === 'static'),
|
||
|
|
isHTML = $node.is('html')
|
||
|
|
;
|
||
|
|
while(parentNode && !isHTML && isStatic && is2D) {
|
||
|
|
parentNode = parentNode.parentNode;
|
||
|
|
$node = $(parentNode);
|
||
|
|
is2D = ($node.css('transform') === 'none');
|
||
|
|
isStatic = ($node.css('position') === 'static');
|
||
|
|
isHTML = $node.is('html');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return ($node && $node.length > 0)
|
||
|
|
? $node
|
||
|
|
: $()
|
||
|
|
;
|
||
|
|
},
|
||
|
|
offstagePosition: function(position) {
|
||
|
|
var
|
||
|
|
boundary = {
|
||
|
|
top : $(window).scrollTop(),
|
||
|
|
bottom : $(window).scrollTop() + $(window).height(),
|
||
|
|
left : 0,
|
||
|
|
right : $(window).width()
|
||
|
|
},
|
||
|
|
popup = {
|
||
|
|
width : $popup.width(),
|
||
|
|
height : $popup.height(),
|
||
|
|
offset : $popup.offset()
|
||
|
|
},
|
||
|
|
offstage = {},
|
||
|
|
offstagePositions = []
|
||
|
|
;
|
||
|
|
position = position || false;
|
||
|
|
if(popup.offset && position) {
|
||
|
|
module.verbose('Checking if outside viewable area', popup.offset);
|
||
|
|
offstage = {
|
||
|
|
top : (popup.offset.top < boundary.top),
|
||
|
|
bottom : (popup.offset.top + popup.height > boundary.bottom),
|
||
|
|
right : (popup.offset.left + popup.width > boundary.right),
|
||
|
|
left : (popup.offset.left < boundary.left)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// return only boundaries that have been surpassed
|
||
|
|
$.each(offstage, function(direction, isOffstage) {
|
||
|
|
if(isOffstage) {
|
||
|
|
offstagePositions.push(direction);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return (offstagePositions.length > 0)
|
||
|
|
? offstagePositions.join(' ')
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
positions: function() {
|
||
|
|
return {
|
||
|
|
'top left' : false,
|
||
|
|
'top center' : false,
|
||
|
|
'top right' : false,
|
||
|
|
'bottom left' : false,
|
||
|
|
'bottom center' : false,
|
||
|
|
'bottom right' : false,
|
||
|
|
'left center' : false,
|
||
|
|
'right center' : false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
nextPosition: function(position) {
|
||
|
|
var
|
||
|
|
positions = position.split(' '),
|
||
|
|
verticalPosition = positions[0],
|
||
|
|
horizontalPosition = positions[1],
|
||
|
|
opposite = {
|
||
|
|
top : 'bottom',
|
||
|
|
bottom : 'top',
|
||
|
|
left : 'right',
|
||
|
|
right : 'left'
|
||
|
|
},
|
||
|
|
adjacent = {
|
||
|
|
left : 'center',
|
||
|
|
center : 'right',
|
||
|
|
right : 'left'
|
||
|
|
},
|
||
|
|
backup = {
|
||
|
|
'top left' : 'top center',
|
||
|
|
'top center' : 'top right',
|
||
|
|
'top right' : 'right center',
|
||
|
|
'right center' : 'bottom right',
|
||
|
|
'bottom right' : 'bottom center',
|
||
|
|
'bottom center' : 'bottom left',
|
||
|
|
'bottom left' : 'left center',
|
||
|
|
'left center' : 'top left'
|
||
|
|
},
|
||
|
|
adjacentsAvailable = (verticalPosition == 'top' || verticalPosition == 'bottom'),
|
||
|
|
oppositeTried = false,
|
||
|
|
adjacentTried = false,
|
||
|
|
nextPosition = false
|
||
|
|
;
|
||
|
|
if(!triedPositions) {
|
||
|
|
module.verbose('All available positions available');
|
||
|
|
triedPositions = module.get.positions();
|
||
|
|
}
|
||
|
|
|
||
|
|
module.debug('Recording last position tried', position);
|
||
|
|
triedPositions[position] = true;
|
||
|
|
|
||
|
|
if(settings.prefer === 'opposite') {
|
||
|
|
nextPosition = [opposite[verticalPosition], horizontalPosition];
|
||
|
|
nextPosition = nextPosition.join(' ');
|
||
|
|
oppositeTried = (triedPositions[nextPosition] === true);
|
||
|
|
module.debug('Trying opposite strategy', nextPosition);
|
||
|
|
}
|
||
|
|
if((settings.prefer === 'adjacent') && adjacentsAvailable ) {
|
||
|
|
nextPosition = [verticalPosition, adjacent[horizontalPosition]];
|
||
|
|
nextPosition = nextPosition.join(' ');
|
||
|
|
adjacentTried = (triedPositions[nextPosition] === true);
|
||
|
|
module.debug('Trying adjacent strategy', nextPosition);
|
||
|
|
}
|
||
|
|
if(adjacentTried || oppositeTried) {
|
||
|
|
module.debug('Using backup position', nextPosition);
|
||
|
|
nextPosition = backup[position];
|
||
|
|
}
|
||
|
|
return nextPosition;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
position: function(position, arrowOffset) {
|
||
|
|
var
|
||
|
|
windowWidth = $(window).width(),
|
||
|
|
windowHeight = $(window).height(),
|
||
|
|
|
||
|
|
targetWidth = $target.outerWidth(),
|
||
|
|
targetHeight = $target.outerHeight(),
|
||
|
|
|
||
|
|
popupWidth = $popup.outerWidth(),
|
||
|
|
popupHeight = $popup.outerHeight(),
|
||
|
|
|
||
|
|
parentWidth = $offsetParent.outerWidth(),
|
||
|
|
parentHeight = $offsetParent.outerHeight(),
|
||
|
|
|
||
|
|
distanceAway = settings.distanceAway,
|
||
|
|
|
||
|
|
targetElement = $target[0],
|
||
|
|
|
||
|
|
marginTop = (settings.inline)
|
||
|
|
? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10)
|
||
|
|
: 0,
|
||
|
|
marginLeft = (settings.inline)
|
||
|
|
? parseInt( window.getComputedStyle(targetElement).getPropertyValue(module.is.rtl() ? 'margin-right' : 'margin-left'), 10)
|
||
|
|
: 0,
|
||
|
|
|
||
|
|
target = (settings.inline || settings.popup)
|
||
|
|
? $target.position()
|
||
|
|
: $target.offset(),
|
||
|
|
|
||
|
|
computedPosition,
|
||
|
|
positioning,
|
||
|
|
offstagePosition
|
||
|
|
;
|
||
|
|
position = position || $module.data(metadata.position) || settings.position;
|
||
|
|
arrowOffset = arrowOffset || $module.data(metadata.offset) || settings.offset;
|
||
|
|
|
||
|
|
if(searchDepth == settings.maxSearchDepth && settings.lastResort) {
|
||
|
|
module.debug('Using last resort position to display', settings.lastResort);
|
||
|
|
position = settings.lastResort;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(settings.inline) {
|
||
|
|
module.debug('Adding targets margin to calculation');
|
||
|
|
if(position == 'left center' || position == 'right center') {
|
||
|
|
arrowOffset += marginTop;
|
||
|
|
distanceAway += -marginLeft;
|
||
|
|
}
|
||
|
|
else if (position == 'top left' || position == 'top center' || position == 'top right') {
|
||
|
|
arrowOffset += marginLeft;
|
||
|
|
distanceAway -= marginTop;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
arrowOffset += marginLeft;
|
||
|
|
distanceAway += marginTop;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.debug('Calculating popup positioning', position);
|
||
|
|
|
||
|
|
computedPosition = position;
|
||
|
|
if (module.is.rtl()) {
|
||
|
|
computedPosition = computedPosition.replace(/left|right/g, function (match) {
|
||
|
|
return (match == 'left')
|
||
|
|
? 'right'
|
||
|
|
: 'left'
|
||
|
|
;
|
||
|
|
});
|
||
|
|
module.debug('RTL: Popup positioning updated', computedPosition);
|
||
|
|
}
|
||
|
|
switch (computedPosition) {
|
||
|
|
case 'top left':
|
||
|
|
positioning = {
|
||
|
|
top : 'auto',
|
||
|
|
bottom : parentHeight - target.top + distanceAway,
|
||
|
|
left : target.left + arrowOffset,
|
||
|
|
right : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'top center':
|
||
|
|
positioning = {
|
||
|
|
bottom : parentHeight - target.top + distanceAway,
|
||
|
|
left : target.left + (targetWidth / 2) - (popupWidth / 2) + arrowOffset,
|
||
|
|
top : 'auto',
|
||
|
|
right : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'top right':
|
||
|
|
positioning = {
|
||
|
|
bottom : parentHeight - target.top + distanceAway,
|
||
|
|
right : parentWidth - target.left - targetWidth - arrowOffset,
|
||
|
|
top : 'auto',
|
||
|
|
left : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'left center':
|
||
|
|
positioning = {
|
||
|
|
top : target.top + (targetHeight / 2) - (popupHeight / 2) + arrowOffset,
|
||
|
|
right : parentWidth - target.left + distanceAway,
|
||
|
|
left : 'auto',
|
||
|
|
bottom : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'right center':
|
||
|
|
positioning = {
|
||
|
|
top : target.top + (targetHeight / 2) - (popupHeight / 2) + arrowOffset,
|
||
|
|
left : target.left + targetWidth + distanceAway,
|
||
|
|
bottom : 'auto',
|
||
|
|
right : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'bottom left':
|
||
|
|
positioning = {
|
||
|
|
top : target.top + targetHeight + distanceAway,
|
||
|
|
left : target.left + arrowOffset,
|
||
|
|
bottom : 'auto',
|
||
|
|
right : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'bottom center':
|
||
|
|
positioning = {
|
||
|
|
top : target.top + targetHeight + distanceAway,
|
||
|
|
left : target.left + (targetWidth / 2) - (popupWidth / 2) + arrowOffset,
|
||
|
|
bottom : 'auto',
|
||
|
|
right : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'bottom right':
|
||
|
|
positioning = {
|
||
|
|
top : target.top + targetHeight + distanceAway,
|
||
|
|
right : parentWidth - target.left - targetWidth - arrowOffset,
|
||
|
|
left : 'auto',
|
||
|
|
bottom : 'auto'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if(positioning === undefined) {
|
||
|
|
module.error(error.invalidPosition, position);
|
||
|
|
}
|
||
|
|
|
||
|
|
module.debug('Calculated popup positioning values', positioning);
|
||
|
|
|
||
|
|
// tentatively place on stage
|
||
|
|
$popup
|
||
|
|
.css(positioning)
|
||
|
|
.removeClass(className.position)
|
||
|
|
.addClass(position)
|
||
|
|
.addClass(className.loading)
|
||
|
|
;
|
||
|
|
// check if is offstage
|
||
|
|
offstagePosition = module.get.offstagePosition(position);
|
||
|
|
|
||
|
|
// recursively find new positioning
|
||
|
|
if(offstagePosition) {
|
||
|
|
module.debug('Popup cant fit into viewport', offstagePosition);
|
||
|
|
if(searchDepth < settings.maxSearchDepth) {
|
||
|
|
searchDepth++;
|
||
|
|
position = module.get.nextPosition(position);
|
||
|
|
module.debug('Trying new position', position);
|
||
|
|
return ($popup)
|
||
|
|
? module.set.position(position)
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(!settings.lastResort) {
|
||
|
|
module.debug('Popup could not find a position in view', $popup);
|
||
|
|
module.error(error.cannotPlace, element);
|
||
|
|
module.remove.attempts();
|
||
|
|
module.remove.loading();
|
||
|
|
module.reset();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
module.debug('Position is on stage', position);
|
||
|
|
module.remove.attempts();
|
||
|
|
module.set.fluidWidth();
|
||
|
|
module.remove.loading();
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
fluidWidth: function() {
|
||
|
|
if( settings.setFluidWidth && $popup.hasClass(className.fluid) ) {
|
||
|
|
$popup.css('width', $offsetParent.width());
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
visible: function() {
|
||
|
|
$module.addClass(className.visible);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
loading: function() {
|
||
|
|
$popup.removeClass(className.loading);
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module.removeClass(className.visible);
|
||
|
|
},
|
||
|
|
attempts: function() {
|
||
|
|
module.verbose('Resetting all searched positions');
|
||
|
|
searchDepth = 0;
|
||
|
|
triedPositions = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
events: function() {
|
||
|
|
module.debug('Binding popup events to module');
|
||
|
|
if(settings.on == 'click') {
|
||
|
|
$module
|
||
|
|
.on('click' + eventNamespace, module.toggle)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if( module.get.startEvent() ) {
|
||
|
|
$module
|
||
|
|
.on(module.get.startEvent() + eventNamespace, module.event.start)
|
||
|
|
.on(module.get.endEvent() + eventNamespace, module.event.end)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(settings.target) {
|
||
|
|
module.debug('Target set to element', $target);
|
||
|
|
}
|
||
|
|
$window.on('resize' + elementNamespace, module.event.resize);
|
||
|
|
},
|
||
|
|
popup: function() {
|
||
|
|
module.verbose('Allowing hover events on popup to prevent closing');
|
||
|
|
if( $popup && module.has.popup() ) {
|
||
|
|
$popup
|
||
|
|
.on('mouseenter' + eventNamespace, module.event.start)
|
||
|
|
.on('mouseleave' + eventNamespace, module.event.end)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close:function() {
|
||
|
|
if(settings.hideOnScroll === true || settings.hideOnScroll == 'auto' && settings.on != 'click') {
|
||
|
|
$document
|
||
|
|
.one(module.get.scrollEvent() + elementNamespace, module.hideGracefully)
|
||
|
|
;
|
||
|
|
$context
|
||
|
|
.one(module.get.scrollEvent() + elementNamespace, module.hideGracefully)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(settings.on == 'click' && settings.closable) {
|
||
|
|
module.verbose('Binding popup close event to document');
|
||
|
|
$document
|
||
|
|
.on('click' + elementNamespace, function(event) {
|
||
|
|
module.verbose('Pop-up clickaway intent detected');
|
||
|
|
module.hideGracefully.call(element, event);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
unbind: {
|
||
|
|
close: function() {
|
||
|
|
if(settings.hideOnScroll === true || settings.hideOnScroll == 'auto' && settings.on != 'click') {
|
||
|
|
$document
|
||
|
|
.off('scroll' + elementNamespace, module.hide)
|
||
|
|
;
|
||
|
|
$context
|
||
|
|
.off('scroll' + elementNamespace, module.hide)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(settings.on == 'click' && settings.closable) {
|
||
|
|
module.verbose('Removing close event from document');
|
||
|
|
$document
|
||
|
|
.off('click' + elementNamespace)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
popup: function() {
|
||
|
|
return ($popup && $popup.length > 0);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
active: function() {
|
||
|
|
return $module.hasClass(className.active);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
return ( $popup && $popup.is(':animated') || $popup.hasClass(className.animating) );
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
return $popup && $popup.is(':visible');
|
||
|
|
},
|
||
|
|
dropdown: function() {
|
||
|
|
return $module.hasClass(className.dropdown);
|
||
|
|
},
|
||
|
|
hidden: function() {
|
||
|
|
return !module.is.visible();
|
||
|
|
},
|
||
|
|
rtl: function () {
|
||
|
|
return $module.css('direction') == 'rtl';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
module.remove.visible();
|
||
|
|
if(settings.preserve) {
|
||
|
|
if($.fn.transition !== undefined) {
|
||
|
|
$popup
|
||
|
|
.transition('remove transition')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.removePopup();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.popup.settings = {
|
||
|
|
|
||
|
|
name : 'Popup',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
namespace : 'popup',
|
||
|
|
|
||
|
|
onCreate : function(){},
|
||
|
|
onRemove : function(){},
|
||
|
|
|
||
|
|
onShow : function(){},
|
||
|
|
onVisible : function(){},
|
||
|
|
onHide : function(){},
|
||
|
|
onHidden : function(){},
|
||
|
|
|
||
|
|
variation : '',
|
||
|
|
content : false,
|
||
|
|
html : false,
|
||
|
|
title : false,
|
||
|
|
|
||
|
|
on : 'hover',
|
||
|
|
closable : true,
|
||
|
|
hideOnScroll : 'auto',
|
||
|
|
exclusive : true,
|
||
|
|
|
||
|
|
context : 'body',
|
||
|
|
|
||
|
|
position : 'top left',
|
||
|
|
prefer : 'opposite',
|
||
|
|
lastResort : false,
|
||
|
|
|
||
|
|
delay : {
|
||
|
|
show : 30,
|
||
|
|
hide : 0
|
||
|
|
},
|
||
|
|
|
||
|
|
setFluidWidth : true,
|
||
|
|
movePopup : true,
|
||
|
|
|
||
|
|
target : false,
|
||
|
|
popup : false,
|
||
|
|
inline : false,
|
||
|
|
preserve : false,
|
||
|
|
hoverable : false,
|
||
|
|
|
||
|
|
duration : 200,
|
||
|
|
easing : 'easeOutQuint',
|
||
|
|
transition : 'scale',
|
||
|
|
|
||
|
|
distanceAway : 0,
|
||
|
|
offset : 0,
|
||
|
|
maxSearchDepth : 20,
|
||
|
|
|
||
|
|
error: {
|
||
|
|
invalidPosition : 'The position you specified is not a valid position',
|
||
|
|
cannotPlace : 'No visible position could be found for the popup',
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
metadata: {
|
||
|
|
activator : 'activator',
|
||
|
|
content : 'content',
|
||
|
|
html : 'html',
|
||
|
|
offset : 'offset',
|
||
|
|
position : 'position',
|
||
|
|
title : 'title',
|
||
|
|
variation : 'variation'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
animating : 'animating',
|
||
|
|
dropdown : 'dropdown',
|
||
|
|
fluid : 'fluid',
|
||
|
|
loading : 'loading',
|
||
|
|
popup : 'ui popup',
|
||
|
|
position : 'top left center bottom right',
|
||
|
|
visible : 'visible'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
popup : '.ui.popup'
|
||
|
|
},
|
||
|
|
|
||
|
|
templates: {
|
||
|
|
escape: function(string) {
|
||
|
|
var
|
||
|
|
badChars = /[&<>"'`]/g,
|
||
|
|
shouldEscape = /[&<>"'`]/,
|
||
|
|
escape = {
|
||
|
|
"&": "&",
|
||
|
|
"<": "<",
|
||
|
|
">": ">",
|
||
|
|
'"': """,
|
||
|
|
"'": "'",
|
||
|
|
"`": "`"
|
||
|
|
},
|
||
|
|
escapedChar = function(chr) {
|
||
|
|
return escape[chr];
|
||
|
|
}
|
||
|
|
;
|
||
|
|
if(shouldEscape.test(string)) {
|
||
|
|
return string.replace(badChars, escapedChar);
|
||
|
|
}
|
||
|
|
return string;
|
||
|
|
},
|
||
|
|
popup: function(text) {
|
||
|
|
var
|
||
|
|
html = '',
|
||
|
|
escape = $.fn.popup.settings.templates.escape
|
||
|
|
;
|
||
|
|
if(typeof text !== undefined) {
|
||
|
|
if(typeof text.title !== undefined && text.title) {
|
||
|
|
text.title = escape(text.title);
|
||
|
|
html += '<div class="header">' + text.title + '</div>';
|
||
|
|
}
|
||
|
|
if(typeof text.content !== undefined && text.content) {
|
||
|
|
text.content = escape(text.content);
|
||
|
|
html += '<div class="content">' + text.content + '</div>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// Adds easing
|
||
|
|
$.extend( $.easing, {
|
||
|
|
easeOutQuad: function (x, t, b, c, d) {
|
||
|
|
return -c *(t/=d)*(t-2) + b;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Progress
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.progress = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.progress.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.progress.settings),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$bar = $(this).find(selector.bar),
|
||
|
|
$progress = $(this).find(selector.progress),
|
||
|
|
$label = $(this).find(selector.label),
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
animating = false,
|
||
|
|
transitionEnd,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing progress bar', settings);
|
||
|
|
|
||
|
|
transitionEnd = module.get.transitionEnd();
|
||
|
|
|
||
|
|
module.read.metadata();
|
||
|
|
module.set.duration();
|
||
|
|
module.set.initials();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of progress', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous progress for', $module);
|
||
|
|
clearInterval(instance.interval);
|
||
|
|
module.remove.state();
|
||
|
|
$module.removeData(moduleNamespace);
|
||
|
|
instance = undefined;
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
module.set.percent(0);
|
||
|
|
},
|
||
|
|
|
||
|
|
complete: function() {
|
||
|
|
if(module.percent === undefined || module.percent < 100) {
|
||
|
|
module.set.percent(100);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
read: {
|
||
|
|
metadata: function() {
|
||
|
|
if( $module.data(metadata.percent) ) {
|
||
|
|
module.verbose('Current percent value set from metadata');
|
||
|
|
module.percent = $module.data(metadata.percent);
|
||
|
|
}
|
||
|
|
if( $module.data(metadata.total) ) {
|
||
|
|
module.verbose('Total value set from metadata');
|
||
|
|
module.total = $module.data(metadata.total);
|
||
|
|
}
|
||
|
|
if( $module.data(metadata.value) ) {
|
||
|
|
module.verbose('Current value set from metadata');
|
||
|
|
module.value = $module.data(metadata.value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
currentValue: function() {
|
||
|
|
return (module.value !== undefined)
|
||
|
|
? module.value
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
increment: function(incrementValue) {
|
||
|
|
var
|
||
|
|
total = module.total || false,
|
||
|
|
edgeValue,
|
||
|
|
startValue,
|
||
|
|
newValue
|
||
|
|
;
|
||
|
|
if(total) {
|
||
|
|
startValue = module.value || 0;
|
||
|
|
incrementValue = incrementValue || 1;
|
||
|
|
newValue = startValue + incrementValue;
|
||
|
|
edgeValue = module.total;
|
||
|
|
module.debug('Incrementing value by', incrementValue, startValue, edgeValue);
|
||
|
|
if(newValue > edgeValue ) {
|
||
|
|
module.debug('Value cannot increment above total', edgeValue);
|
||
|
|
newValue = edgeValue;
|
||
|
|
}
|
||
|
|
module.set.progress(newValue);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
startValue = module.percent || 0;
|
||
|
|
incrementValue = incrementValue || module.get.randomValue();
|
||
|
|
newValue = startValue + incrementValue;
|
||
|
|
edgeValue = 100;
|
||
|
|
module.debug('Incrementing percentage by', incrementValue, startValue);
|
||
|
|
if(newValue > edgeValue ) {
|
||
|
|
module.debug('Value cannot increment above 100 percent');
|
||
|
|
newValue = edgeValue;
|
||
|
|
}
|
||
|
|
module.set.progress(newValue);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
decrement: function(decrementValue) {
|
||
|
|
var
|
||
|
|
total = module.total || false,
|
||
|
|
edgeValue = 0,
|
||
|
|
startValue,
|
||
|
|
newValue
|
||
|
|
;
|
||
|
|
if(total) {
|
||
|
|
startValue = module.value || 0;
|
||
|
|
decrementValue = decrementValue || 1;
|
||
|
|
newValue = startValue - decrementValue;
|
||
|
|
module.debug('Decrementing value by', decrementValue, startValue);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
startValue = module.percent || 0;
|
||
|
|
decrementValue = decrementValue || module.get.randomValue();
|
||
|
|
newValue = startValue - decrementValue;
|
||
|
|
module.debug('Decrementing percentage by', decrementValue, startValue);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(newValue < edgeValue) {
|
||
|
|
module.debug('Value cannot decrement below 0');
|
||
|
|
newValue = 0;
|
||
|
|
}
|
||
|
|
module.set.progress(newValue);
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
text: function(templateText) {
|
||
|
|
var
|
||
|
|
value = module.value || 0,
|
||
|
|
total = module.total || 0,
|
||
|
|
percent = (module.is.visible() && animating)
|
||
|
|
? module.get.displayPercent()
|
||
|
|
: module.percent || 0,
|
||
|
|
left = (module.total > 0)
|
||
|
|
? (total - value)
|
||
|
|
: (100 - percent)
|
||
|
|
;
|
||
|
|
templateText = templateText || '';
|
||
|
|
templateText = templateText
|
||
|
|
.replace('{value}', value)
|
||
|
|
.replace('{total}', total)
|
||
|
|
.replace('{left}', left)
|
||
|
|
.replace('{percent}', percent)
|
||
|
|
;
|
||
|
|
module.debug('Adding variables to progress bar text', templateText);
|
||
|
|
return templateText;
|
||
|
|
},
|
||
|
|
randomValue: function() {
|
||
|
|
module.debug('Generating random increment percentage');
|
||
|
|
return Math.floor((Math.random() * settings.random.max) + settings.random.min);
|
||
|
|
},
|
||
|
|
|
||
|
|
transitionEnd: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('element'),
|
||
|
|
transitions = {
|
||
|
|
'transition' :'transitionend',
|
||
|
|
'OTransition' :'oTransitionEnd',
|
||
|
|
'MozTransition' :'transitionend',
|
||
|
|
'WebkitTransition' :'webkitTransitionEnd'
|
||
|
|
},
|
||
|
|
transition
|
||
|
|
;
|
||
|
|
for(transition in transitions){
|
||
|
|
if( element.style[transition] !== undefined ){
|
||
|
|
return transitions[transition];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// gets current displayed percentage (if animating values this is the intermediary value)
|
||
|
|
displayPercent: function() {
|
||
|
|
var
|
||
|
|
barWidth = $bar.width(),
|
||
|
|
totalWidth = $module.width(),
|
||
|
|
minDisplay = parseInt($bar.css('min-width'), 10),
|
||
|
|
displayPercent = (barWidth > minDisplay)
|
||
|
|
? (barWidth / totalWidth * 100)
|
||
|
|
: module.percent
|
||
|
|
;
|
||
|
|
if(settings.precision === 0) {
|
||
|
|
return Math.round(displayPercent);
|
||
|
|
}
|
||
|
|
return Math.round(displayPercent * (10 * settings.precision) / (10 * settings.precision) );
|
||
|
|
},
|
||
|
|
|
||
|
|
percent: function() {
|
||
|
|
return module.percent || 0;
|
||
|
|
},
|
||
|
|
value: function() {
|
||
|
|
return module.value || false;
|
||
|
|
},
|
||
|
|
total: function() {
|
||
|
|
return module.total || false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
success: function() {
|
||
|
|
return $module.hasClass(className.success);
|
||
|
|
},
|
||
|
|
warning: function() {
|
||
|
|
return $module.hasClass(className.warning);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
return $module.hasClass(className.error);
|
||
|
|
},
|
||
|
|
active: function() {
|
||
|
|
return $module.hasClass(className.active);
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
return $module.is(':visible');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
state: function() {
|
||
|
|
module.verbose('Removing stored state');
|
||
|
|
delete module.total;
|
||
|
|
delete module.percent;
|
||
|
|
delete module.value;
|
||
|
|
},
|
||
|
|
active: function() {
|
||
|
|
module.verbose('Removing active state');
|
||
|
|
$module.removeClass(className.active);
|
||
|
|
},
|
||
|
|
success: function() {
|
||
|
|
module.verbose('Removing success state');
|
||
|
|
$module.removeClass(className.success);
|
||
|
|
},
|
||
|
|
warning: function() {
|
||
|
|
module.verbose('Removing warning state');
|
||
|
|
$module.removeClass(className.warning);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.verbose('Removing error state');
|
||
|
|
$module.removeClass(className.error);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
barWidth: function(value) {
|
||
|
|
if(value > 100) {
|
||
|
|
module.error(error.tooHigh, value);
|
||
|
|
}
|
||
|
|
else if (value < 0) {
|
||
|
|
module.error(error.tooLow, value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$bar
|
||
|
|
.css('width', value + '%')
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.attr('data-percent', parseInt(value, 10))
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
duration: function(duration) {
|
||
|
|
duration = duration || settings.duration;
|
||
|
|
duration = (typeof duration == 'number')
|
||
|
|
? duration + 'ms'
|
||
|
|
: duration
|
||
|
|
;
|
||
|
|
module.verbose('Setting progress bar transition duration', duration);
|
||
|
|
$bar
|
||
|
|
.css({
|
||
|
|
'-webkit-transition-duration': duration,
|
||
|
|
'-moz-transition-duration': duration,
|
||
|
|
'-ms-transition-duration': duration,
|
||
|
|
'-o-transition-duration': duration,
|
||
|
|
'transition-duration': duration
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
initials: function() {
|
||
|
|
if(settings.total !== false) {
|
||
|
|
module.verbose('Current total set in settings', settings.total);
|
||
|
|
module.total = settings.total;
|
||
|
|
}
|
||
|
|
if(settings.value !== false) {
|
||
|
|
module.verbose('Current value set in settings', settings.value);
|
||
|
|
module.value = settings.value;
|
||
|
|
}
|
||
|
|
if(settings.percent !== false) {
|
||
|
|
module.verbose('Current percent set in settings', settings.percent);
|
||
|
|
module.percent = settings.percent;
|
||
|
|
}
|
||
|
|
if(module.percent !== undefined) {
|
||
|
|
module.set.percent(module.percent);
|
||
|
|
}
|
||
|
|
else if(module.value !== undefined) {
|
||
|
|
module.set.progress(module.value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
percent: function(percent) {
|
||
|
|
percent = (typeof percent == 'string')
|
||
|
|
? +(percent.replace('%', ''))
|
||
|
|
: percent
|
||
|
|
;
|
||
|
|
if(percent > 0 && percent < 1) {
|
||
|
|
module.verbose('Module percentage passed as decimal, converting');
|
||
|
|
percent = percent * 100;
|
||
|
|
}
|
||
|
|
// round percentage
|
||
|
|
if(settings.precision === 0) {
|
||
|
|
percent = Math.round(percent);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
percent = Math.round(percent * (10 * settings.precision) / (10 * settings.precision) );
|
||
|
|
}
|
||
|
|
module.percent = percent;
|
||
|
|
if(module.total) {
|
||
|
|
module.value = Math.round( (percent / 100) * module.total);
|
||
|
|
}
|
||
|
|
else if(settings.limitValues) {
|
||
|
|
module.value = (module.value > 100)
|
||
|
|
? 100
|
||
|
|
: (module.value < 0)
|
||
|
|
? 0
|
||
|
|
: module.value
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.set.barWidth(percent);
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
module.set.labelInterval();
|
||
|
|
}
|
||
|
|
module.set.labels();
|
||
|
|
settings.onChange.call(element, percent, module.value, module.total);
|
||
|
|
},
|
||
|
|
labelInterval: function() {
|
||
|
|
var
|
||
|
|
animationCallback = function() {
|
||
|
|
module.verbose('Bar finished animating, removing continuous label updates');
|
||
|
|
clearInterval(module.interval);
|
||
|
|
animating = false;
|
||
|
|
module.set.labels();
|
||
|
|
}
|
||
|
|
;
|
||
|
|
clearInterval(module.interval);
|
||
|
|
$bar.one(transitionEnd + eventNamespace, animationCallback);
|
||
|
|
module.timer = setTimeout(animationCallback, settings.duration + 100);
|
||
|
|
animating = true;
|
||
|
|
module.interval = setInterval(module.set.labels, settings.framerate);
|
||
|
|
},
|
||
|
|
labels: function() {
|
||
|
|
module.verbose('Setting both bar progress and outer label text');
|
||
|
|
module.set.barLabel();
|
||
|
|
module.set.state();
|
||
|
|
},
|
||
|
|
label: function(text) {
|
||
|
|
text = text || '';
|
||
|
|
if(text) {
|
||
|
|
text = module.get.text(text);
|
||
|
|
module.debug('Setting label to text', text);
|
||
|
|
$label.text(text);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
state: function(percent) {
|
||
|
|
percent = (percent !== undefined)
|
||
|
|
? percent
|
||
|
|
: module.percent
|
||
|
|
;
|
||
|
|
if(percent === 100) {
|
||
|
|
if(settings.autoSuccess && !(module.is.warning() || module.is.error())) {
|
||
|
|
module.set.success();
|
||
|
|
module.debug('Automatically triggering success at 100%');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Reached 100% removing active state');
|
||
|
|
module.remove.active();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(percent > 0) {
|
||
|
|
module.verbose('Adjusting active progress bar label', percent);
|
||
|
|
module.set.active();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.remove.active();
|
||
|
|
module.set.label(settings.text.active);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
barLabel: function(text) {
|
||
|
|
if(text !== undefined) {
|
||
|
|
$progress.text( module.get.text(text) );
|
||
|
|
}
|
||
|
|
else if(settings.label == 'ratio' && module.total) {
|
||
|
|
module.debug('Adding ratio to bar label');
|
||
|
|
$progress.text( module.get.text(settings.text.ratio) );
|
||
|
|
}
|
||
|
|
else if(settings.label == 'percent') {
|
||
|
|
module.debug('Adding percentage to bar label');
|
||
|
|
$progress.text( module.get.text(settings.text.percent) );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
active: function(text) {
|
||
|
|
text = text || settings.text.active;
|
||
|
|
module.debug('Setting active state');
|
||
|
|
if(settings.showActivity && !module.is.active() ) {
|
||
|
|
$module.addClass(className.active);
|
||
|
|
}
|
||
|
|
module.remove.warning();
|
||
|
|
module.remove.error();
|
||
|
|
module.remove.success();
|
||
|
|
if(text) {
|
||
|
|
module.set.label(text);
|
||
|
|
}
|
||
|
|
settings.onActive.call(element, module.value, module.total);
|
||
|
|
},
|
||
|
|
success : function(text) {
|
||
|
|
text = text || settings.text.success;
|
||
|
|
module.debug('Setting success state');
|
||
|
|
$module.addClass(className.success);
|
||
|
|
module.remove.active();
|
||
|
|
module.remove.warning();
|
||
|
|
module.remove.error();
|
||
|
|
module.complete();
|
||
|
|
if(text) {
|
||
|
|
module.set.label(text);
|
||
|
|
}
|
||
|
|
settings.onSuccess.call(element, module.total);
|
||
|
|
},
|
||
|
|
warning : function(text) {
|
||
|
|
text = text || settings.text.warning;
|
||
|
|
module.debug('Setting warning state');
|
||
|
|
$module.addClass(className.warning);
|
||
|
|
module.remove.active();
|
||
|
|
module.remove.success();
|
||
|
|
module.remove.error();
|
||
|
|
module.complete();
|
||
|
|
if(text) {
|
||
|
|
module.set.label(text);
|
||
|
|
}
|
||
|
|
settings.onWarning.call(element, module.value, module.total);
|
||
|
|
},
|
||
|
|
error : function(text) {
|
||
|
|
text = text || settings.text.error;
|
||
|
|
module.debug('Setting error state');
|
||
|
|
$module.addClass(className.error);
|
||
|
|
module.remove.active();
|
||
|
|
module.remove.success();
|
||
|
|
module.remove.warning();
|
||
|
|
module.complete();
|
||
|
|
if(text) {
|
||
|
|
module.set.label(text);
|
||
|
|
}
|
||
|
|
settings.onError.call(element, module.value, module.total);
|
||
|
|
},
|
||
|
|
total: function(totalValue) {
|
||
|
|
module.total = totalValue;
|
||
|
|
},
|
||
|
|
progress: function(value) {
|
||
|
|
var
|
||
|
|
numericValue = (typeof value === 'string')
|
||
|
|
? (value.replace(/[^\d.]/g, '') !== '')
|
||
|
|
? +(value.replace(/[^\d.]/g, ''))
|
||
|
|
: false
|
||
|
|
: value,
|
||
|
|
percentComplete
|
||
|
|
;
|
||
|
|
if(numericValue === false) {
|
||
|
|
module.error(error.nonNumeric, value);
|
||
|
|
}
|
||
|
|
if(module.total) {
|
||
|
|
module.value = numericValue;
|
||
|
|
percentComplete = (numericValue / module.total) * 100;
|
||
|
|
module.debug('Calculating percent complete from total', percentComplete);
|
||
|
|
module.set.percent( percentComplete );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
percentComplete = numericValue;
|
||
|
|
module.debug('Setting value to exact percentage value', percentComplete);
|
||
|
|
module.set.percent( percentComplete );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.progress.settings = {
|
||
|
|
|
||
|
|
name : 'Progress',
|
||
|
|
namespace : 'progress',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
random : {
|
||
|
|
min : 2,
|
||
|
|
max : 5
|
||
|
|
},
|
||
|
|
|
||
|
|
duration : 300,
|
||
|
|
|
||
|
|
autoSuccess : true,
|
||
|
|
showActivity : true,
|
||
|
|
limitValues : true,
|
||
|
|
|
||
|
|
label : 'percent',
|
||
|
|
precision : 1,
|
||
|
|
framerate : (1000 / 30), /// 30 fps
|
||
|
|
|
||
|
|
percent : false,
|
||
|
|
total : false,
|
||
|
|
value : false,
|
||
|
|
|
||
|
|
onChange : function(percent, value, total){},
|
||
|
|
onSuccess : function(total){},
|
||
|
|
onActive : function(value, total){},
|
||
|
|
onError : function(value, total){},
|
||
|
|
onWarning : function(value, total){},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
method : 'The method you called is not defined.',
|
||
|
|
nonNumeric : 'Progress value is non numeric',
|
||
|
|
tooHigh : 'Value specified is above 100%',
|
||
|
|
tooLow : 'Value specified is below 0%'
|
||
|
|
},
|
||
|
|
|
||
|
|
regExp: {
|
||
|
|
variable: /\{\$*[A-z0-9]+\}/g
|
||
|
|
},
|
||
|
|
|
||
|
|
metadata: {
|
||
|
|
percent : 'percent',
|
||
|
|
total : 'total',
|
||
|
|
value : 'value'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
bar : '> .bar',
|
||
|
|
label : '> .label',
|
||
|
|
progress : '.bar > .progress'
|
||
|
|
},
|
||
|
|
|
||
|
|
text : {
|
||
|
|
active : false,
|
||
|
|
error : false,
|
||
|
|
success : false,
|
||
|
|
warning : false,
|
||
|
|
percent : '{percent}%',
|
||
|
|
ratio : '{value} of {total}'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
error : 'error',
|
||
|
|
success : 'success',
|
||
|
|
warning : 'warning'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Rating
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.rating = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.rating.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.rating.settings),
|
||
|
|
|
||
|
|
namespace = settings.namespace,
|
||
|
|
className = settings.className,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $(this).data(moduleNamespace),
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$icon = $module.find(selector.icon),
|
||
|
|
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing rating module', settings);
|
||
|
|
|
||
|
|
if($icon.length === 0) {
|
||
|
|
module.setup.layout();
|
||
|
|
}
|
||
|
|
|
||
|
|
if(settings.interactive) {
|
||
|
|
module.enable();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.disable();
|
||
|
|
}
|
||
|
|
if(settings.initialRating) {
|
||
|
|
module.debug('Setting initial rating');
|
||
|
|
module.setRating(settings.initialRating);
|
||
|
|
}
|
||
|
|
if( $module.data(metadata.rating) ) {
|
||
|
|
module.debug('Rating found in metadata');
|
||
|
|
module.setRating( $module.data(metadata.rating) );
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Instantiating module', settings);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous instance', instance);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
$icon
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
$icon = $module.find(selector.icon);
|
||
|
|
},
|
||
|
|
|
||
|
|
setup: {
|
||
|
|
layout: function() {
|
||
|
|
var
|
||
|
|
maxRating = $module.data(metadata.maxRating) || settings.maxRating
|
||
|
|
;
|
||
|
|
module.debug('Generating icon html dynamically');
|
||
|
|
$module
|
||
|
|
.html($.fn.rating.settings.templates.icon(maxRating))
|
||
|
|
;
|
||
|
|
module.refresh();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
mouseenter: function() {
|
||
|
|
var
|
||
|
|
$activeIcon = $(this)
|
||
|
|
;
|
||
|
|
$activeIcon
|
||
|
|
.nextAll()
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
$activeIcon
|
||
|
|
.addClass(className.selected)
|
||
|
|
.prevAll()
|
||
|
|
.addClass(className.selected)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
mouseleave: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$icon
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
click: function() {
|
||
|
|
var
|
||
|
|
$activeIcon = $(this),
|
||
|
|
currentRating = module.getRating(),
|
||
|
|
rating = $icon.index($activeIcon) + 1,
|
||
|
|
canClear = (settings.clearable == 'auto')
|
||
|
|
? ($icon.length === 1)
|
||
|
|
: settings.clearable
|
||
|
|
;
|
||
|
|
if(canClear && currentRating == rating) {
|
||
|
|
module.clearRating();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.setRating( rating );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clearRating: function() {
|
||
|
|
module.debug('Clearing current rating');
|
||
|
|
module.setRating(0);
|
||
|
|
},
|
||
|
|
|
||
|
|
getRating: function() {
|
||
|
|
var
|
||
|
|
currentRating = $icon.filter('.' + className.active).length
|
||
|
|
;
|
||
|
|
module.verbose('Current rating retrieved', currentRating);
|
||
|
|
return currentRating;
|
||
|
|
},
|
||
|
|
|
||
|
|
enable: function() {
|
||
|
|
module.debug('Setting rating to interactive mode');
|
||
|
|
$icon
|
||
|
|
.on('mouseenter' + eventNamespace, module.event.mouseenter)
|
||
|
|
.on('mouseleave' + eventNamespace, module.event.mouseleave)
|
||
|
|
.on('click' + eventNamespace, module.event.click)
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.removeClass(className.disabled)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
disable: function() {
|
||
|
|
module.debug('Setting rating to read-only mode');
|
||
|
|
$icon
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.addClass(className.disabled)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
setRating: function(rating) {
|
||
|
|
var
|
||
|
|
ratingIndex = (rating - 1 >= 0)
|
||
|
|
? (rating - 1)
|
||
|
|
: 0,
|
||
|
|
$activeIcon = $icon.eq(ratingIndex)
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.removeClass(className.selected)
|
||
|
|
;
|
||
|
|
$icon
|
||
|
|
.removeClass(className.selected)
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
if(rating > 0) {
|
||
|
|
module.verbose('Setting current rating to', rating);
|
||
|
|
$activeIcon
|
||
|
|
.prevAll()
|
||
|
|
.andSelf()
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
settings.onRate.call(element, rating);
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.rating.settings = {
|
||
|
|
|
||
|
|
name : 'Rating',
|
||
|
|
namespace : 'rating',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
initialRating : 0,
|
||
|
|
interactive : true,
|
||
|
|
maxRating : 4,
|
||
|
|
clearable : 'auto',
|
||
|
|
|
||
|
|
onRate : function(rating){},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
method : 'The method you called is not defined',
|
||
|
|
noMaximum : 'No maximum rating specified. Cannot generate HTML automatically'
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
metadata: {
|
||
|
|
rating : 'rating',
|
||
|
|
maxRating : 'maxRating'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
disabled : 'disabled',
|
||
|
|
selected : 'selected',
|
||
|
|
loading : 'loading'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
icon : '.icon'
|
||
|
|
},
|
||
|
|
|
||
|
|
templates: {
|
||
|
|
icon: function(maxRating) {
|
||
|
|
var
|
||
|
|
icon = 1,
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
while(icon <= maxRating) {
|
||
|
|
html += '<i class="icon"></i>';
|
||
|
|
icon++;
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Search
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.search = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$(this)
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = $.extend(true, {}, $.fn.search.settings, parameters),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
regExp = settings.regExp,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = namespace + '-module',
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$prompt = $module.find(selector.prompt),
|
||
|
|
$searchButton = $module.find(selector.searchButton),
|
||
|
|
$results = $module.find(selector.results),
|
||
|
|
$result = $module.find(selector.result),
|
||
|
|
$category = $module.find(selector.category),
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
module
|
||
|
|
;
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing module');
|
||
|
|
var
|
||
|
|
prompt = $prompt[0],
|
||
|
|
inputEvent = (prompt !== undefined && prompt.oninput !== undefined)
|
||
|
|
? 'input'
|
||
|
|
: (prompt !== undefined && prompt.onpropertychange !== undefined)
|
||
|
|
? 'propertychange'
|
||
|
|
: 'keyup'
|
||
|
|
;
|
||
|
|
if(settings.automatic) {
|
||
|
|
$prompt
|
||
|
|
.on(inputEvent + eventNamespace, module.throttle)
|
||
|
|
.attr('autocomplete', 'off')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$prompt
|
||
|
|
.on('focus' + eventNamespace, module.event.focus)
|
||
|
|
.on('blur' + eventNamespace, module.event.blur)
|
||
|
|
.on('keydown' + eventNamespace, module.handleKeyboard)
|
||
|
|
;
|
||
|
|
$searchButton
|
||
|
|
.on('click' + eventNamespace, module.query)
|
||
|
|
;
|
||
|
|
$results
|
||
|
|
.on('mousedown' + eventNamespace, module.event.result.mousedown)
|
||
|
|
.on('mouseup' + eventNamespace, module.event.result.mouseup)
|
||
|
|
.on('click' + eventNamespace, selector.result, module.event.result.click)
|
||
|
|
;
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying instance');
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
$prompt
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$searchButton
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$results
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
event: {
|
||
|
|
focus: function() {
|
||
|
|
module.set.focus();
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.throttle();
|
||
|
|
if( module.has.minimumCharacters() ) {
|
||
|
|
module.showResults();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
blur: function(event) {
|
||
|
|
var
|
||
|
|
pageLostFocus = (document.activeElement === this)
|
||
|
|
;
|
||
|
|
if(!pageLostFocus && !module.resultsClicked) {
|
||
|
|
module.cancel.query();
|
||
|
|
module.remove.focus();
|
||
|
|
module.timer = setTimeout(module.hideResults, settings.hideDelay);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
result: {
|
||
|
|
mousedown: function() {
|
||
|
|
module.resultsClicked = true;
|
||
|
|
},
|
||
|
|
mouseup: function() {
|
||
|
|
module.resultsClicked = false;
|
||
|
|
},
|
||
|
|
click: function(event) {
|
||
|
|
module.debug('Search result selected');
|
||
|
|
var
|
||
|
|
$result = $(this),
|
||
|
|
$title = $result.find(selector.title).eq(0),
|
||
|
|
$link = $result.find('a[href]').eq(0),
|
||
|
|
href = $link.attr('href') || false,
|
||
|
|
target = $link.attr('target') || false,
|
||
|
|
title = $title.html(),
|
||
|
|
name = ($title.length > 0)
|
||
|
|
? $title.text()
|
||
|
|
: false,
|
||
|
|
results = module.get.results(),
|
||
|
|
result = module.get.result(name, results),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
if( $.isFunction(settings.onSelect) ) {
|
||
|
|
if(settings.onSelect.call(element, result, results) === false) {
|
||
|
|
module.debug('Custom onSelect callback cancelled default select action');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.hideResults();
|
||
|
|
if(name) {
|
||
|
|
module.set.value(name);
|
||
|
|
}
|
||
|
|
if(href) {
|
||
|
|
module.verbose('Opening search link found in result', $link);
|
||
|
|
if(target == '_blank' || event.ctrlKey) {
|
||
|
|
window.open(href);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
window.location.href = (href);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleKeyboard: function(event) {
|
||
|
|
var
|
||
|
|
// force selector refresh
|
||
|
|
$result = $module.find(selector.result),
|
||
|
|
$category = $module.find(selector.category),
|
||
|
|
currentIndex = $result.index( $result.filter('.' + className.active) ),
|
||
|
|
resultSize = $result.length,
|
||
|
|
|
||
|
|
keyCode = event.which,
|
||
|
|
keys = {
|
||
|
|
backspace : 8,
|
||
|
|
enter : 13,
|
||
|
|
escape : 27,
|
||
|
|
upArrow : 38,
|
||
|
|
downArrow : 40
|
||
|
|
},
|
||
|
|
newIndex
|
||
|
|
;
|
||
|
|
// search shortcuts
|
||
|
|
if(keyCode == keys.escape) {
|
||
|
|
module.verbose('Escape key pressed, blurring search field');
|
||
|
|
$prompt
|
||
|
|
.trigger('blur')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
if(keyCode == keys.enter) {
|
||
|
|
module.verbose('Enter key pressed, selecting active result');
|
||
|
|
if( $result.filter('.' + className.active).length > 0 ) {
|
||
|
|
module.event.result.click.call($result.filter('.' + className.active), event);
|
||
|
|
event.preventDefault();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(keyCode == keys.upArrow) {
|
||
|
|
module.verbose('Up key pressed, changing active result');
|
||
|
|
newIndex = (currentIndex - 1 < 0)
|
||
|
|
? currentIndex
|
||
|
|
: currentIndex - 1
|
||
|
|
;
|
||
|
|
$category
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
$result
|
||
|
|
.removeClass(className.active)
|
||
|
|
.eq(newIndex)
|
||
|
|
.addClass(className.active)
|
||
|
|
.closest($category)
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
else if(keyCode == keys.downArrow) {
|
||
|
|
module.verbose('Down key pressed, changing active result');
|
||
|
|
newIndex = (currentIndex + 1 >= resultSize)
|
||
|
|
? currentIndex
|
||
|
|
: currentIndex + 1
|
||
|
|
;
|
||
|
|
$category
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
$result
|
||
|
|
.removeClass(className.active)
|
||
|
|
.eq(newIndex)
|
||
|
|
.addClass(className.active)
|
||
|
|
.closest($category)
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// query shortcuts
|
||
|
|
if(keyCode == keys.enter) {
|
||
|
|
module.verbose('Enter key pressed, executing query');
|
||
|
|
module.query();
|
||
|
|
module.set.buttonPressed();
|
||
|
|
$prompt.one('keyup', module.remove.buttonFocus);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setup: {
|
||
|
|
api: function() {
|
||
|
|
var
|
||
|
|
apiSettings = {
|
||
|
|
on : false,
|
||
|
|
action : 'search',
|
||
|
|
onFailure : module.error
|
||
|
|
},
|
||
|
|
searchHTML
|
||
|
|
;
|
||
|
|
module.verbose('First request, initializing API');
|
||
|
|
$module.api(apiSettings);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
can: {
|
||
|
|
useAPI: function() {
|
||
|
|
return $.fn.api !== undefined;
|
||
|
|
},
|
||
|
|
transition: function() {
|
||
|
|
return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
empty: function() {
|
||
|
|
return ($results.html() === '');
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
return ($results.filter(':visible').length > 0);
|
||
|
|
},
|
||
|
|
focused: function() {
|
||
|
|
return ($prompt.filter(':focus').length > 0);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
value: function() {
|
||
|
|
return $prompt.val();
|
||
|
|
},
|
||
|
|
results: function() {
|
||
|
|
var
|
||
|
|
results = $module.data(metadata.results)
|
||
|
|
;
|
||
|
|
return results;
|
||
|
|
},
|
||
|
|
result: function(value, results) {
|
||
|
|
var
|
||
|
|
result = false
|
||
|
|
;
|
||
|
|
value = value || module.get.value();
|
||
|
|
results = results || module.get.results();
|
||
|
|
if(settings.type === 'category') {
|
||
|
|
module.debug('Finding result that matches', value);
|
||
|
|
$.each(results, function(index, category) {
|
||
|
|
if($.isArray(category.results)) {
|
||
|
|
result = module.search.object(value, category.results)[0];
|
||
|
|
if(result && result.length > 0) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Finding result in results object', value);
|
||
|
|
result = module.search.object(value, results)[0];
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
focus: function() {
|
||
|
|
$module.addClass(className.focus);
|
||
|
|
},
|
||
|
|
loading: function() {
|
||
|
|
$module.addClass(className.loading);
|
||
|
|
},
|
||
|
|
value: function(value) {
|
||
|
|
module.verbose('Setting search input value', value);
|
||
|
|
$prompt.val(value);
|
||
|
|
module.query();
|
||
|
|
},
|
||
|
|
buttonPressed: function() {
|
||
|
|
$searchButton.addClass(className.pressed);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
loading: function() {
|
||
|
|
$module.removeClass(className.loading);
|
||
|
|
},
|
||
|
|
focus: function() {
|
||
|
|
$module.removeClass(className.focus);
|
||
|
|
},
|
||
|
|
buttonPressed: function() {
|
||
|
|
$searchButton.removeClass(className.pressed);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
query: function() {
|
||
|
|
var
|
||
|
|
searchTerm = module.get.value(),
|
||
|
|
cache = module.read.cache(searchTerm)
|
||
|
|
;
|
||
|
|
if(cache) {
|
||
|
|
module.debug('Reading result for ' + searchTerm + ' from cache');
|
||
|
|
module.save.results(cache.results);
|
||
|
|
module.addResults(cache.html);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Querying for ' + searchTerm);
|
||
|
|
if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
|
||
|
|
module.search.local(searchTerm);
|
||
|
|
}
|
||
|
|
else if( module.can.useAPI() ) {
|
||
|
|
if(settings.apiSettings) {
|
||
|
|
module.debug('Searching with specified API settings', settings.apiSettings);
|
||
|
|
module.search.remote(searchTerm);
|
||
|
|
}
|
||
|
|
else if($.api.settings.api.search !== undefined) {
|
||
|
|
module.debug('Searching with default search API endpoint');
|
||
|
|
module.search.remote(searchTerm);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noEndpoint);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.source);
|
||
|
|
}
|
||
|
|
settings.onSearchQuery.call(element, searchTerm);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
search: {
|
||
|
|
local: function(searchTerm) {
|
||
|
|
var
|
||
|
|
searchResults = module.search.object(searchTerm, settings.content),
|
||
|
|
searchHTML
|
||
|
|
;
|
||
|
|
module.set.loading();
|
||
|
|
module.save.results(searchResults);
|
||
|
|
module.debug('Returned local search results', searchResults);
|
||
|
|
|
||
|
|
searchHTML = module.generateResults({
|
||
|
|
results: searchResults
|
||
|
|
});
|
||
|
|
module.remove.loading();
|
||
|
|
module.write.cache(searchTerm, {
|
||
|
|
html : searchHTML,
|
||
|
|
results : searchResults
|
||
|
|
});
|
||
|
|
module.addResults(searchHTML);
|
||
|
|
},
|
||
|
|
remote: function(searchTerm) {
|
||
|
|
var
|
||
|
|
apiSettings = {
|
||
|
|
onSuccess : function(response) {
|
||
|
|
module.parse.response.call(element, response, searchTerm);
|
||
|
|
},
|
||
|
|
urlData: {
|
||
|
|
query: searchTerm
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
if( !$module.api('get request') ) {
|
||
|
|
module.setup.api();
|
||
|
|
}
|
||
|
|
$.extend(true, apiSettings, settings.apiSettings);
|
||
|
|
module.debug('Executing search', apiSettings);
|
||
|
|
module.cancel.query();
|
||
|
|
$module
|
||
|
|
.api('setting', apiSettings)
|
||
|
|
.api('query')
|
||
|
|
;
|
||
|
|
},
|
||
|
|
object: function(searchTerm, source) {
|
||
|
|
var
|
||
|
|
results = [],
|
||
|
|
fullTextResults = [],
|
||
|
|
searchFields = $.isArray(settings.searchFields)
|
||
|
|
? settings.searchFields
|
||
|
|
: [settings.searchFields],
|
||
|
|
searchExp = searchTerm.replace(regExp.escape, '\\$&'),
|
||
|
|
searchRegExp = new RegExp(regExp.exact + searchExp, 'i')
|
||
|
|
;
|
||
|
|
|
||
|
|
source = source || settings.source;
|
||
|
|
|
||
|
|
// exit conditions on no source
|
||
|
|
if(source === undefined) {
|
||
|
|
module.error(error.source);
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
|
||
|
|
// iterate through search fields in array order
|
||
|
|
$.each(searchFields, function(index, field) {
|
||
|
|
$.each(source, function(label, content) {
|
||
|
|
var
|
||
|
|
fieldExists = (typeof content[field] == 'string'),
|
||
|
|
notAlreadyResult = ($.inArray(content, results) == -1 && $.inArray(content, fullTextResults) == -1)
|
||
|
|
;
|
||
|
|
if(fieldExists && notAlreadyResult) {
|
||
|
|
if( content[field].match(searchRegExp) ) {
|
||
|
|
results.push(content);
|
||
|
|
}
|
||
|
|
else if(settings.searchFullText && module.fuzzySearch(searchTerm, content[field]) ) {
|
||
|
|
fullTextResults.push(content);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return $.merge(results, fullTextResults);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
fuzzySearch: function(query, term) {
|
||
|
|
var
|
||
|
|
termLength = term.length,
|
||
|
|
queryLength = query.length
|
||
|
|
;
|
||
|
|
query = query.toLowerCase();
|
||
|
|
term = term.toLowerCase();
|
||
|
|
if(queryLength > termLength) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(queryLength === termLength) {
|
||
|
|
return (query === term);
|
||
|
|
}
|
||
|
|
search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) {
|
||
|
|
var
|
||
|
|
queryCharacter = query.charCodeAt(characterIndex)
|
||
|
|
;
|
||
|
|
while(nextCharacterIndex < termLength) {
|
||
|
|
if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) {
|
||
|
|
continue search;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
parse: {
|
||
|
|
response: function(response, searchTerm) {
|
||
|
|
var
|
||
|
|
searchHTML = module.generateResults(response)
|
||
|
|
;
|
||
|
|
module.verbose('Parsing server response', response);
|
||
|
|
if(response !== undefined) {
|
||
|
|
if(searchTerm !== undefined && response.results !== undefined) {
|
||
|
|
module.write.cache(searchTerm, {
|
||
|
|
html : searchHTML,
|
||
|
|
results : response.results
|
||
|
|
});
|
||
|
|
module.save.results(response.results);
|
||
|
|
module.addResults(searchHTML);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
throttle: function() {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
if(module.has.minimumCharacters()) {
|
||
|
|
module.timer = setTimeout(module.query, settings.searchDelay);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hideResults();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
cancel: {
|
||
|
|
query: function() {
|
||
|
|
if( module.can.useAPI() ) {
|
||
|
|
$module.api('abort');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
minimumCharacters: function() {
|
||
|
|
var
|
||
|
|
searchTerm = module.get.value(),
|
||
|
|
numCharacters = searchTerm.length
|
||
|
|
;
|
||
|
|
return (numCharacters >= settings.minCharacters);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
read: {
|
||
|
|
cache: function(name) {
|
||
|
|
var
|
||
|
|
cache = $module.data(metadata.cache)
|
||
|
|
;
|
||
|
|
if(settings.cache) {
|
||
|
|
module.verbose('Checking cache for generated html for query', name);
|
||
|
|
return (typeof cache == 'object') && (cache[name] !== undefined)
|
||
|
|
? cache[name]
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
results: function(results) {
|
||
|
|
module.verbose('Saving current search results to metadata', results);
|
||
|
|
$module.data(metadata.results, results);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
write: {
|
||
|
|
cache: function(name, value) {
|
||
|
|
var
|
||
|
|
cache = ($module.data(metadata.cache) !== undefined)
|
||
|
|
? $module.data(metadata.cache)
|
||
|
|
: {}
|
||
|
|
;
|
||
|
|
if(settings.cache) {
|
||
|
|
module.verbose('Writing generated html to cache', name, value);
|
||
|
|
cache[name] = value;
|
||
|
|
$module
|
||
|
|
.data(metadata.cache, cache)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
addResults: function(html) {
|
||
|
|
if( $.isFunction(settings.onResultsAdd) ) {
|
||
|
|
if( settings.onResultsAdd.call($results, html) === false ) {
|
||
|
|
module.debug('onResultsAdd callback cancelled default action');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$results
|
||
|
|
.html(html)
|
||
|
|
;
|
||
|
|
module.showResults();
|
||
|
|
},
|
||
|
|
|
||
|
|
showResults: function() {
|
||
|
|
if( !module.is.visible() && module.is.focused() && !module.is.empty() ) {
|
||
|
|
if( module.can.transition() ) {
|
||
|
|
module.debug('Showing results with css animations');
|
||
|
|
$results
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' in',
|
||
|
|
duration : settings.duration,
|
||
|
|
queue : true
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Showing results with javascript');
|
||
|
|
$results
|
||
|
|
.stop()
|
||
|
|
.fadeIn(settings.duration, settings.easing)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
settings.onResultsOpen.call($results);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hideResults: function() {
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
if( module.can.transition() ) {
|
||
|
|
module.debug('Hiding results with css animations');
|
||
|
|
$results
|
||
|
|
.transition({
|
||
|
|
animation : settings.transition + ' out',
|
||
|
|
duration : settings.duration,
|
||
|
|
queue : true
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Hiding results with javascript');
|
||
|
|
$results
|
||
|
|
.stop()
|
||
|
|
.fadeOut(settings.duration, settings.easing)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
settings.onResultsClose.call($results);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
generateResults: function(response) {
|
||
|
|
module.debug('Generating html from response', response);
|
||
|
|
var
|
||
|
|
template = settings.templates[settings.type],
|
||
|
|
isProperObject = ($.isPlainObject(response.results) && !$.isEmptyObject(response.results)),
|
||
|
|
isProperArray = ($.isArray(response.results) && response.results.length > 0),
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
if(isProperObject || isProperArray ) {
|
||
|
|
if(settings.maxResults > 0) {
|
||
|
|
if(isProperObject) {
|
||
|
|
if(settings.type == 'standard') {
|
||
|
|
module.error(error.maxResults);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
response.results = response.results.slice(0, settings.maxResults);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if($.isFunction(template)) {
|
||
|
|
html = template(response);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noTemplate, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
html = module.displayMessage(error.noResults, 'empty');
|
||
|
|
}
|
||
|
|
settings.onResults.call(element, response);
|
||
|
|
return html;
|
||
|
|
},
|
||
|
|
|
||
|
|
displayMessage: function(text, type) {
|
||
|
|
type = type || 'standard';
|
||
|
|
module.debug('Displaying message', text, type);
|
||
|
|
module.addResults( settings.templates.message(text, type) );
|
||
|
|
return settings.templates.message(text, type);
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.search.settings = {
|
||
|
|
|
||
|
|
name : 'Search Module',
|
||
|
|
namespace : 'search',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
type : 'standard',
|
||
|
|
minCharacters : 1,
|
||
|
|
|
||
|
|
// api config
|
||
|
|
apiSettings : false,
|
||
|
|
|
||
|
|
source : false,
|
||
|
|
searchFields : [
|
||
|
|
'title',
|
||
|
|
'description'
|
||
|
|
],
|
||
|
|
searchFullText : true,
|
||
|
|
|
||
|
|
automatic : 'true',
|
||
|
|
hideDelay : 0,
|
||
|
|
searchDelay : 100,
|
||
|
|
maxResults : 7,
|
||
|
|
cache : true,
|
||
|
|
|
||
|
|
transition : 'scale',
|
||
|
|
duration : 300,
|
||
|
|
easing : 'easeOutExpo',
|
||
|
|
|
||
|
|
onSelect : false,
|
||
|
|
onResultsAdd : false,
|
||
|
|
|
||
|
|
onSearchQuery : function(){},
|
||
|
|
onResults : function(response){},
|
||
|
|
|
||
|
|
onResultsOpen : function(){},
|
||
|
|
onResultsClose : function(){},
|
||
|
|
|
||
|
|
className: {
|
||
|
|
active : 'active',
|
||
|
|
empty : 'empty',
|
||
|
|
focus : 'focus',
|
||
|
|
loading : 'loading',
|
||
|
|
pressed : 'down'
|
||
|
|
},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
source : 'Cannot search. No source used, and Semantic API module was not included',
|
||
|
|
noResults : 'Your search returned no results',
|
||
|
|
logging : 'Error in debug logging, exiting.',
|
||
|
|
noEndpoint : 'No search endpoint was specified',
|
||
|
|
noTemplate : 'A valid template name was not specified.',
|
||
|
|
serverError : 'There was an issue with querying the server.',
|
||
|
|
maxResults : 'Results must be an array to use maxResults setting',
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
metadata: {
|
||
|
|
cache : 'cache',
|
||
|
|
results : 'results'
|
||
|
|
},
|
||
|
|
|
||
|
|
regExp: {
|
||
|
|
escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
|
||
|
|
exact : '(?:\s|^)'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
prompt : '.prompt',
|
||
|
|
searchButton : '.search.button',
|
||
|
|
results : '.results',
|
||
|
|
category : '.category',
|
||
|
|
result : '.result',
|
||
|
|
title : '.title, .name'
|
||
|
|
},
|
||
|
|
|
||
|
|
templates: {
|
||
|
|
escape: function(string) {
|
||
|
|
var
|
||
|
|
badChars = /[&<>"'`]/g,
|
||
|
|
shouldEscape = /[&<>"'`]/,
|
||
|
|
escape = {
|
||
|
|
"&": "&",
|
||
|
|
"<": "<",
|
||
|
|
">": ">",
|
||
|
|
'"': """,
|
||
|
|
"'": "'",
|
||
|
|
"`": "`"
|
||
|
|
},
|
||
|
|
escapedChar = function(chr) {
|
||
|
|
return escape[chr];
|
||
|
|
}
|
||
|
|
;
|
||
|
|
if(shouldEscape.test(string)) {
|
||
|
|
return string.replace(badChars, escapedChar);
|
||
|
|
}
|
||
|
|
return string;
|
||
|
|
},
|
||
|
|
message: function(message, type) {
|
||
|
|
var
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
if(message !== undefined && type !== undefined) {
|
||
|
|
html += ''
|
||
|
|
+ '<div class="message ' + type + '">'
|
||
|
|
;
|
||
|
|
// message type
|
||
|
|
if(type == 'empty') {
|
||
|
|
html += ''
|
||
|
|
+ '<div class="header">No Results</div class="header">'
|
||
|
|
+ '<div class="description">' + message + '</div class="description">'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
html += ' <div class="description">' + message + '</div>';
|
||
|
|
}
|
||
|
|
html += '</div>';
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
},
|
||
|
|
category: function(response) {
|
||
|
|
var
|
||
|
|
html = '',
|
||
|
|
escape = $.fn.search.settings.templates.escape
|
||
|
|
;
|
||
|
|
if(response.results !== undefined) {
|
||
|
|
// each category
|
||
|
|
$.each(response.results, function(index, category) {
|
||
|
|
if(category.results !== undefined && category.results.length > 0) {
|
||
|
|
html += ''
|
||
|
|
+ '<div class="category">'
|
||
|
|
+ '<div class="name">' + category.name + '</div>'
|
||
|
|
;
|
||
|
|
// each item inside category
|
||
|
|
$.each(category.results, function(index, result) {
|
||
|
|
html += '<div class="result">';
|
||
|
|
if(result.url) {
|
||
|
|
html += '<a href="' + result.url + '"></a>';
|
||
|
|
}
|
||
|
|
if(result.image !== undefined) {
|
||
|
|
result.image = escape(result.image);
|
||
|
|
html += ''
|
||
|
|
+ '<div class="image">'
|
||
|
|
+ ' <img src="' + result.image + '" alt="">'
|
||
|
|
+ '</div>'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
html += '<div class="content">';
|
||
|
|
if(result.price !== undefined) {
|
||
|
|
result.price = escape(result.price);
|
||
|
|
html += '<div class="price">' + result.price + '</div>';
|
||
|
|
}
|
||
|
|
if(result.title !== undefined) {
|
||
|
|
result.title = escape(result.title);
|
||
|
|
html += '<div class="title">' + result.title + '</div>';
|
||
|
|
}
|
||
|
|
if(result.description !== undefined) {
|
||
|
|
html += '<div class="description">' + result.description + '</div>';
|
||
|
|
}
|
||
|
|
html += ''
|
||
|
|
+ '</div>'
|
||
|
|
+ '</div>'
|
||
|
|
;
|
||
|
|
});
|
||
|
|
html += ''
|
||
|
|
+ '</div>'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if(response.action) {
|
||
|
|
html += ''
|
||
|
|
+ '<a href="' + response.action.url + '" class="action">'
|
||
|
|
+ response.action.text
|
||
|
|
+ '</a>';
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
standard: function(response) {
|
||
|
|
var
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
if(response.results !== undefined) {
|
||
|
|
|
||
|
|
// each result
|
||
|
|
$.each(response.results, function(index, result) {
|
||
|
|
if(result.url) {
|
||
|
|
html += '<a class="result" href="' + result.url + '">';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
html += '<a class="result">';
|
||
|
|
}
|
||
|
|
if(result.image !== undefined) {
|
||
|
|
html += ''
|
||
|
|
+ '<div class="image">'
|
||
|
|
+ ' <img src="' + result.image + '">'
|
||
|
|
+ '</div>'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
html += '<div class="content">';
|
||
|
|
if(result.price !== undefined) {
|
||
|
|
html += '<div class="price">' + result.price + '</div>';
|
||
|
|
}
|
||
|
|
if(result.title !== undefined) {
|
||
|
|
html += '<div class="title">' + result.title + '</div>';
|
||
|
|
}
|
||
|
|
if(result.description !== undefined) {
|
||
|
|
html += '<div class="description">' + result.description + '</div>';
|
||
|
|
}
|
||
|
|
html += ''
|
||
|
|
+ '</div>'
|
||
|
|
;
|
||
|
|
html += '</a>';
|
||
|
|
});
|
||
|
|
|
||
|
|
if(response.action) {
|
||
|
|
html += ''
|
||
|
|
+ '<a href="' + response.action.url + '" class="action">'
|
||
|
|
+ response.action.text
|
||
|
|
+ '</a>';
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Shape
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.shape = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
$body = $('body'),
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
settings = $.extend(true, {}, $.fn.shape.settings, parameters),
|
||
|
|
|
||
|
|
// internal aliases
|
||
|
|
namespace = settings.namespace,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
className = settings.className,
|
||
|
|
|
||
|
|
// define namespaces for modules
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
// selector cache
|
||
|
|
$module = $(this),
|
||
|
|
$sides = $module.find(selector.sides),
|
||
|
|
$side = $module.find(selector.side),
|
||
|
|
|
||
|
|
// private variables
|
||
|
|
nextIndex = false,
|
||
|
|
$activeSide,
|
||
|
|
$nextSide,
|
||
|
|
|
||
|
|
// standard module
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing module for', element);
|
||
|
|
module.set.defaultSide();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, instance)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module for', element);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache for', element);
|
||
|
|
$module = $(element);
|
||
|
|
$sides = $(this).find(selector.shape);
|
||
|
|
$side = $(this).find(selector.side);
|
||
|
|
},
|
||
|
|
|
||
|
|
repaint: function() {
|
||
|
|
module.verbose('Forcing repaint event');
|
||
|
|
var
|
||
|
|
shape = $sides.get(0) || document.createElement('div'),
|
||
|
|
fakeAssignment = shape.offsetWidth
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
animate: function(propertyObject, callback) {
|
||
|
|
module.verbose('Animating box with properties', propertyObject);
|
||
|
|
callback = callback || function(event) {
|
||
|
|
module.verbose('Executing animation callback');
|
||
|
|
if(event !== undefined) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
module.reset();
|
||
|
|
module.set.active();
|
||
|
|
};
|
||
|
|
settings.beforeChange.call($nextSide.get());
|
||
|
|
if(module.get.transitionEvent()) {
|
||
|
|
module.verbose('Starting CSS animation');
|
||
|
|
$module
|
||
|
|
.addClass(className.animating)
|
||
|
|
;
|
||
|
|
$sides
|
||
|
|
.css(propertyObject)
|
||
|
|
.one(module.get.transitionEvent(), callback)
|
||
|
|
;
|
||
|
|
module.set.duration(settings.duration);
|
||
|
|
requestAnimationFrame(function() {
|
||
|
|
$module
|
||
|
|
.addClass(className.animating)
|
||
|
|
;
|
||
|
|
$activeSide
|
||
|
|
.addClass(className.hidden)
|
||
|
|
;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
queue: function(method) {
|
||
|
|
module.debug('Queueing animation of', method);
|
||
|
|
$sides
|
||
|
|
.one(module.get.transitionEvent(), function() {
|
||
|
|
module.debug('Executing queued animation');
|
||
|
|
setTimeout(function(){
|
||
|
|
$module.shape(method);
|
||
|
|
}, 0);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
module.verbose('Animating states reset');
|
||
|
|
$module
|
||
|
|
.removeClass(className.animating)
|
||
|
|
.attr('style', '')
|
||
|
|
.removeAttr('style')
|
||
|
|
;
|
||
|
|
// removeAttr style does not consistently work in safari
|
||
|
|
$sides
|
||
|
|
.attr('style', '')
|
||
|
|
.removeAttr('style')
|
||
|
|
;
|
||
|
|
$side
|
||
|
|
.attr('style', '')
|
||
|
|
.removeAttr('style')
|
||
|
|
.removeClass(className.hidden)
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.removeClass(className.animating)
|
||
|
|
.attr('style', '')
|
||
|
|
.removeAttr('style')
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
complete: function() {
|
||
|
|
return ($side.filter('.' + className.active)[0] == $nextSide[0]);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
return $module.hasClass(className.animating);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
|
||
|
|
defaultSide: function() {
|
||
|
|
$activeSide = $module.find('.' + settings.className.active);
|
||
|
|
$nextSide = ( $activeSide.next(selector.side).length > 0 )
|
||
|
|
? $activeSide.next(selector.side)
|
||
|
|
: $module.find(selector.side).first()
|
||
|
|
;
|
||
|
|
nextIndex = false;
|
||
|
|
module.verbose('Active side set to', $activeSide);
|
||
|
|
module.verbose('Next side set to', $nextSide);
|
||
|
|
},
|
||
|
|
|
||
|
|
duration: function(duration) {
|
||
|
|
duration = duration || settings.duration;
|
||
|
|
duration = (typeof duration == 'number')
|
||
|
|
? duration + 'ms'
|
||
|
|
: duration
|
||
|
|
;
|
||
|
|
module.verbose('Setting animation duration', duration);
|
||
|
|
$sides.add($side)
|
||
|
|
.css({
|
||
|
|
'-webkit-transition-duration': duration,
|
||
|
|
'-moz-transition-duration': duration,
|
||
|
|
'-ms-transition-duration': duration,
|
||
|
|
'-o-transition-duration': duration,
|
||
|
|
'transition-duration': duration
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
stageSize: function() {
|
||
|
|
var
|
||
|
|
$clone = $module.clone().addClass(className.loading),
|
||
|
|
$activeSide = $clone.find('.' + settings.className.active),
|
||
|
|
$nextSide = (nextIndex)
|
||
|
|
? $clone.find(selector.side).eq(nextIndex)
|
||
|
|
: ( $activeSide.next(selector.side).length > 0 )
|
||
|
|
? $activeSide.next(selector.side)
|
||
|
|
: $clone.find(selector.side).first(),
|
||
|
|
newSize = {}
|
||
|
|
;
|
||
|
|
$activeSide.removeClass(className.active);
|
||
|
|
$nextSide.addClass(className.active);
|
||
|
|
$clone.insertAfter($module);
|
||
|
|
newSize = {
|
||
|
|
width : $nextSide.outerWidth(),
|
||
|
|
height : $nextSide.outerHeight()
|
||
|
|
};
|
||
|
|
$clone.remove();
|
||
|
|
$module
|
||
|
|
.css(newSize)
|
||
|
|
;
|
||
|
|
module.verbose('Resizing stage to fit new content', newSize);
|
||
|
|
},
|
||
|
|
|
||
|
|
nextSide: function(selector) {
|
||
|
|
nextIndex = selector;
|
||
|
|
$nextSide = $side.filter(selector);
|
||
|
|
nextIndex = $side.index($nextSide);
|
||
|
|
if($nextSide.length === 0) {
|
||
|
|
module.set.defaultSide();
|
||
|
|
module.error(error.side);
|
||
|
|
}
|
||
|
|
module.verbose('Next side manually set to', $nextSide);
|
||
|
|
},
|
||
|
|
|
||
|
|
active: function() {
|
||
|
|
module.verbose('Setting new side to active', $nextSide);
|
||
|
|
$side
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
settings.onChange.call($nextSide.get());
|
||
|
|
module.set.defaultSide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
flip: {
|
||
|
|
|
||
|
|
up: function() {
|
||
|
|
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||
|
|
module.debug('Side already visible', $nextSide);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( !module.is.animating()) {
|
||
|
|
module.debug('Flipping up', $nextSide);
|
||
|
|
module.set.stageSize();
|
||
|
|
module.stage.above();
|
||
|
|
module.animate( module.get.transform.up() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue('flip up');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
down: function() {
|
||
|
|
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||
|
|
module.debug('Side already visible', $nextSide);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( !module.is.animating()) {
|
||
|
|
module.debug('Flipping down', $nextSide);
|
||
|
|
module.set.stageSize();
|
||
|
|
module.stage.below();
|
||
|
|
module.animate( module.get.transform.down() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue('flip down');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
left: function() {
|
||
|
|
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||
|
|
module.debug('Side already visible', $nextSide);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( !module.is.animating()) {
|
||
|
|
module.debug('Flipping left', $nextSide);
|
||
|
|
module.set.stageSize();
|
||
|
|
module.stage.left();
|
||
|
|
module.animate(module.get.transform.left() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue('flip left');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
right: function() {
|
||
|
|
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||
|
|
module.debug('Side already visible', $nextSide);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( !module.is.animating()) {
|
||
|
|
module.debug('Flipping right', $nextSide);
|
||
|
|
module.set.stageSize();
|
||
|
|
module.stage.right();
|
||
|
|
module.animate(module.get.transform.right() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue('flip right');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
over: function() {
|
||
|
|
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||
|
|
module.debug('Side already visible', $nextSide);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( !module.is.animating()) {
|
||
|
|
module.debug('Flipping over', $nextSide);
|
||
|
|
module.set.stageSize();
|
||
|
|
module.stage.behind();
|
||
|
|
module.animate(module.get.transform.over() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue('flip over');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
back: function() {
|
||
|
|
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||
|
|
module.debug('Side already visible', $nextSide);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if( !module.is.animating()) {
|
||
|
|
module.debug('Flipping back', $nextSide);
|
||
|
|
module.set.stageSize();
|
||
|
|
module.stage.behind();
|
||
|
|
module.animate(module.get.transform.back() );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue('flip back');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
|
||
|
|
transform: {
|
||
|
|
up: function() {
|
||
|
|
var
|
||
|
|
translate = {
|
||
|
|
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
||
|
|
z: -($activeSide.outerHeight() / 2)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
return {
|
||
|
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
down: function() {
|
||
|
|
var
|
||
|
|
translate = {
|
||
|
|
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
||
|
|
z: -($activeSide.outerHeight() / 2)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
return {
|
||
|
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
left: function() {
|
||
|
|
var
|
||
|
|
translate = {
|
||
|
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
|
||
|
|
z : -($activeSide.outerWidth() / 2)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
return {
|
||
|
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
right: function() {
|
||
|
|
var
|
||
|
|
translate = {
|
||
|
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
|
||
|
|
z : -($activeSide.outerWidth() / 2)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
return {
|
||
|
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
over: function() {
|
||
|
|
var
|
||
|
|
translate = {
|
||
|
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
return {
|
||
|
|
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
back: function() {
|
||
|
|
var
|
||
|
|
translate = {
|
||
|
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
return {
|
||
|
|
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
transitionEvent: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('element'),
|
||
|
|
transitions = {
|
||
|
|
'transition' :'transitionend',
|
||
|
|
'OTransition' :'oTransitionEnd',
|
||
|
|
'MozTransition' :'transitionend',
|
||
|
|
'WebkitTransition' :'webkitTransitionEnd'
|
||
|
|
},
|
||
|
|
transition
|
||
|
|
;
|
||
|
|
for(transition in transitions){
|
||
|
|
if( element.style[transition] !== undefined ){
|
||
|
|
return transitions[transition];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
nextSide: function() {
|
||
|
|
return ( $activeSide.next(selector.side).length > 0 )
|
||
|
|
? $activeSide.next(selector.side)
|
||
|
|
: $module.find(selector.side).first()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
stage: {
|
||
|
|
|
||
|
|
above: function() {
|
||
|
|
var
|
||
|
|
box = {
|
||
|
|
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
||
|
|
depth : {
|
||
|
|
active : ($nextSide.outerHeight() / 2),
|
||
|
|
next : ($activeSide.outerHeight() / 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
module.verbose('Setting the initial animation position as above', $nextSide, box);
|
||
|
|
$activeSide
|
||
|
|
.css({
|
||
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.addClass(className.animating)
|
||
|
|
.css({
|
||
|
|
'display' : 'block',
|
||
|
|
'top' : box.origin + 'px',
|
||
|
|
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
below: function() {
|
||
|
|
var
|
||
|
|
box = {
|
||
|
|
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
||
|
|
depth : {
|
||
|
|
active : ($nextSide.outerHeight() / 2),
|
||
|
|
next : ($activeSide.outerHeight() / 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
module.verbose('Setting the initial animation position as below', $nextSide, box);
|
||
|
|
$activeSide
|
||
|
|
.css({
|
||
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.addClass(className.animating)
|
||
|
|
.css({
|
||
|
|
'display' : 'block',
|
||
|
|
'top' : box.origin + 'px',
|
||
|
|
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
left: function() {
|
||
|
|
var
|
||
|
|
box = {
|
||
|
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
|
||
|
|
depth : {
|
||
|
|
active : ($nextSide.outerWidth() / 2),
|
||
|
|
next : ($activeSide.outerWidth() / 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
||
|
|
$activeSide
|
||
|
|
.css({
|
||
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.addClass(className.animating)
|
||
|
|
.css({
|
||
|
|
'display' : 'block',
|
||
|
|
'left' : box.origin + 'px',
|
||
|
|
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
right: function() {
|
||
|
|
var
|
||
|
|
box = {
|
||
|
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
|
||
|
|
depth : {
|
||
|
|
active : ($nextSide.outerWidth() / 2),
|
||
|
|
next : ($activeSide.outerWidth() / 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
||
|
|
$activeSide
|
||
|
|
.css({
|
||
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.addClass(className.animating)
|
||
|
|
.css({
|
||
|
|
'display' : 'block',
|
||
|
|
'left' : box.origin + 'px',
|
||
|
|
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
behind: function() {
|
||
|
|
var
|
||
|
|
box = {
|
||
|
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
|
||
|
|
depth : {
|
||
|
|
active : ($nextSide.outerWidth() / 2),
|
||
|
|
next : ($activeSide.outerWidth() / 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
module.verbose('Setting the initial animation position as behind', $nextSide, box);
|
||
|
|
$activeSide
|
||
|
|
.css({
|
||
|
|
'transform' : 'rotateY(0deg)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
$nextSide
|
||
|
|
.addClass(className.animating)
|
||
|
|
.css({
|
||
|
|
'display' : 'block',
|
||
|
|
'left' : box.origin + 'px',
|
||
|
|
'transform' : 'rotateY(-180deg)'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.shape.settings = {
|
||
|
|
|
||
|
|
// module info
|
||
|
|
name : 'Shape',
|
||
|
|
|
||
|
|
// debug content outputted to console
|
||
|
|
debug : false,
|
||
|
|
|
||
|
|
// verbose debug output
|
||
|
|
verbose : true,
|
||
|
|
|
||
|
|
// performance data output
|
||
|
|
performance: true,
|
||
|
|
|
||
|
|
// event namespace
|
||
|
|
namespace : 'shape',
|
||
|
|
|
||
|
|
// callback occurs on side change
|
||
|
|
beforeChange : function() {},
|
||
|
|
onChange : function() {},
|
||
|
|
|
||
|
|
// allow animation to same side
|
||
|
|
allowRepeats: false,
|
||
|
|
|
||
|
|
// animation duration
|
||
|
|
duration : 700,
|
||
|
|
|
||
|
|
// possible errors
|
||
|
|
error: {
|
||
|
|
side : 'You tried to switch to a side that does not exist.',
|
||
|
|
method : 'The method you called is not defined'
|
||
|
|
},
|
||
|
|
|
||
|
|
// classnames used
|
||
|
|
className : {
|
||
|
|
animating : 'animating',
|
||
|
|
hidden : 'hidden',
|
||
|
|
loading : 'loading',
|
||
|
|
active : 'active'
|
||
|
|
},
|
||
|
|
|
||
|
|
// selectors used
|
||
|
|
selector : {
|
||
|
|
sides : '.sides',
|
||
|
|
side : '.side'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Sidebar
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.sidebar = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
$window = $(window),
|
||
|
|
$document = $(document),
|
||
|
|
$html = $('html'),
|
||
|
|
$head = $('head'),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.sidebar.settings),
|
||
|
|
|
||
|
|
selector = settings.selector,
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
regExp = settings.regExp,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$context = $(settings.context),
|
||
|
|
|
||
|
|
$sidebars = $module.children(selector.sidebar),
|
||
|
|
$fixed = $context.children(selector.fixed),
|
||
|
|
$pusher = $context.children(selector.pusher),
|
||
|
|
$style,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
elementNamespace,
|
||
|
|
id,
|
||
|
|
currentScroll,
|
||
|
|
transitionEvent,
|
||
|
|
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing sidebar', parameters);
|
||
|
|
|
||
|
|
module.create.id();
|
||
|
|
|
||
|
|
transitionEvent = module.get.transitionEvent();
|
||
|
|
|
||
|
|
// cache on initialize
|
||
|
|
if( ( settings.useLegacy == 'auto' && module.is.legacy() ) || settings.useLegacy === true) {
|
||
|
|
settings.transition = 'overlay';
|
||
|
|
settings.useLegacy = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(module.is.ios()) {
|
||
|
|
module.set.ios();
|
||
|
|
}
|
||
|
|
|
||
|
|
// avoids locking rendering if initialized in onReady
|
||
|
|
if(settings.delaySetup) {
|
||
|
|
requestAnimationFrame(module.setup.layout);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.setup.layout();
|
||
|
|
}
|
||
|
|
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
create: {
|
||
|
|
id: function() {
|
||
|
|
id = (Math.random().toString(16) + '000000000').substr(2,8);
|
||
|
|
elementNamespace = '.' + id;
|
||
|
|
module.verbose('Creating unique id for element', id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module for', $module);
|
||
|
|
module.remove.direction();
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
// bound by uuid
|
||
|
|
$context.off(elementNamespace);
|
||
|
|
$window.off(elementNamespace);
|
||
|
|
$document.off(elementNamespace);
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
clickaway: function(event) {
|
||
|
|
var
|
||
|
|
clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)),
|
||
|
|
clickedContext = ($context.is(event.target))
|
||
|
|
;
|
||
|
|
if(clickedInPusher) {
|
||
|
|
module.verbose('User clicked on dimmed page');
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
if(clickedContext) {
|
||
|
|
module.verbose('User clicked on dimmable context (scaled out page)');
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touch: function(event) {
|
||
|
|
//event.stopPropagation();
|
||
|
|
},
|
||
|
|
containScroll: function(event) {
|
||
|
|
if(element.scrollTop <= 0) {
|
||
|
|
element.scrollTop = 1;
|
||
|
|
}
|
||
|
|
if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) {
|
||
|
|
element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scroll: function(event) {
|
||
|
|
if( $(event.target).closest(selector.sidebar).length === 0 ) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
clickaway: function() {
|
||
|
|
module.verbose('Adding clickaway events to context', $context);
|
||
|
|
if(settings.closable) {
|
||
|
|
$context
|
||
|
|
.on('click' + elementNamespace, module.event.clickaway)
|
||
|
|
.on('touchend' + elementNamespace, module.event.clickaway)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scrollLock: function() {
|
||
|
|
if(settings.scrollLock) {
|
||
|
|
module.debug('Disabling page scroll');
|
||
|
|
$window
|
||
|
|
.on('DOMMouseScroll' + elementNamespace, module.event.scroll)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.verbose('Adding events to contain sidebar scroll');
|
||
|
|
$document
|
||
|
|
.on('touchmove' + elementNamespace, module.event.touch)
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.on('scroll' + eventNamespace, module.event.containScroll)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
unbind: {
|
||
|
|
clickaway: function() {
|
||
|
|
module.verbose('Removing clickaway events from context', $context);
|
||
|
|
$context.off(elementNamespace);
|
||
|
|
},
|
||
|
|
scrollLock: function() {
|
||
|
|
module.verbose('Removing scroll lock from page');
|
||
|
|
$document.off(elementNamespace);
|
||
|
|
$window.off(elementNamespace);
|
||
|
|
$module.off('scroll' + eventNamespace);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
bodyCSS: function() {
|
||
|
|
var
|
||
|
|
width = $module.outerWidth(),
|
||
|
|
height = $module.outerHeight(),
|
||
|
|
direction = module.get.direction(),
|
||
|
|
distance = {
|
||
|
|
left : width,
|
||
|
|
right : -width,
|
||
|
|
top : height,
|
||
|
|
bottom : -height
|
||
|
|
},
|
||
|
|
style
|
||
|
|
;
|
||
|
|
if( module.is.rtl() ){
|
||
|
|
module.verbose('RTL detected, flipping widths');
|
||
|
|
distance.left = -width;
|
||
|
|
distance.right = width;
|
||
|
|
}
|
||
|
|
|
||
|
|
style = '<style title="' + namespace + '">';
|
||
|
|
|
||
|
|
if(direction === 'left' || direction === 'right') {
|
||
|
|
module.debug('Adding CSS rules for animation distance', width);
|
||
|
|
style += ''
|
||
|
|
+ ' .ui.visible.' + direction + '.sidebar ~ .fixed,'
|
||
|
|
+ ' .ui.visible.' + direction + '.sidebar ~ .pusher {'
|
||
|
|
+ ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
|
||
|
|
+ ' transform: translate3d('+ distance[direction] + 'px, 0, 0);'
|
||
|
|
+ ' }'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(direction === 'top' || direction == 'bottom') {
|
||
|
|
style += ''
|
||
|
|
+ ' .ui.visible.' + direction + '.sidebar ~ .fixed,'
|
||
|
|
+ ' .ui.visible.' + direction + '.sidebar ~ .pusher {'
|
||
|
|
+ ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
|
||
|
|
+ ' transform: translate3d(0, ' + distance[direction] + 'px, 0);'
|
||
|
|
+ ' }'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* IE is only browser not to create context with transforms */
|
||
|
|
/* https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 */
|
||
|
|
if( module.is.ie() ) {
|
||
|
|
if(direction === 'left' || direction === 'right') {
|
||
|
|
module.debug('Adding CSS rules for animation distance', width);
|
||
|
|
style += ''
|
||
|
|
+ ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
|
||
|
|
+ ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
|
||
|
|
+ ' transform: translate3d('+ distance[direction] + 'px, 0, 0);'
|
||
|
|
+ ' }'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(direction === 'top' || direction == 'bottom') {
|
||
|
|
style += ''
|
||
|
|
+ ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
|
||
|
|
+ ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
|
||
|
|
+ ' transform: translate3d(0, ' + distance[direction] + 'px, 0);'
|
||
|
|
+ ' }'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
/* opposite sides visible forces content overlay */
|
||
|
|
style += ''
|
||
|
|
+ ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
|
||
|
|
+ ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
|
||
|
|
+ ' -webkit-transform: translate3d(0px, 0, 0);'
|
||
|
|
+ ' transform: translate3d(0px, 0, 0);'
|
||
|
|
+ ' }'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
style += '</style>';
|
||
|
|
$head.append(style);
|
||
|
|
$style = $('style[title=' + namespace + ']');
|
||
|
|
module.debug('Adding sizing css to head', $style);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache');
|
||
|
|
$context = $(settings.context);
|
||
|
|
$sidebars = $context.children(selector.sidebar);
|
||
|
|
$pusher = $context.children(selector.pusher);
|
||
|
|
$fixed = $context.children(selector.fixed);
|
||
|
|
},
|
||
|
|
|
||
|
|
refreshSidebars: function() {
|
||
|
|
module.verbose('Refreshing other sidebars');
|
||
|
|
$sidebars = $context.children(selector.sidebar);
|
||
|
|
},
|
||
|
|
|
||
|
|
repaint: function() {
|
||
|
|
module.verbose('Forcing repaint event');
|
||
|
|
element.style.display='none';
|
||
|
|
element.offsetHeight;
|
||
|
|
element.scrollTop = element.scrollTop;
|
||
|
|
element.style.display='';
|
||
|
|
},
|
||
|
|
|
||
|
|
setup: {
|
||
|
|
layout: function() {
|
||
|
|
if( $context.children(selector.pusher).length === 0 ) {
|
||
|
|
module.debug('Adding wrapper element for sidebar');
|
||
|
|
module.error(error.pusher);
|
||
|
|
$pusher = $('<div class="pusher" />');
|
||
|
|
$context
|
||
|
|
.children()
|
||
|
|
.not(selector.omitted)
|
||
|
|
.not($sidebars)
|
||
|
|
.wrapAll($pusher)
|
||
|
|
;
|
||
|
|
module.refresh();
|
||
|
|
}
|
||
|
|
if($module.nextAll(selector.pusher).length === 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) {
|
||
|
|
module.debug('Moved sidebar to correct parent element');
|
||
|
|
module.error(error.movedSidebar, element);
|
||
|
|
$module.detach().prependTo($context);
|
||
|
|
module.refresh();
|
||
|
|
}
|
||
|
|
module.set.pushable();
|
||
|
|
module.set.direction();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
attachEvents: function(selector, event) {
|
||
|
|
var
|
||
|
|
$toggle = $(selector)
|
||
|
|
;
|
||
|
|
event = $.isFunction(module[event])
|
||
|
|
? module[event]
|
||
|
|
: module.toggle
|
||
|
|
;
|
||
|
|
if($toggle.length > 0) {
|
||
|
|
module.debug('Attaching sidebar events to element', selector, event);
|
||
|
|
$toggle
|
||
|
|
.on('click' + eventNamespace, event)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.notFound, selector);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(callback) {
|
||
|
|
var
|
||
|
|
animateMethod = (settings.useLegacy === true)
|
||
|
|
? module.legacyPushPage
|
||
|
|
: module.pushPage
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if(module.is.hidden()) {
|
||
|
|
module.refreshSidebars();
|
||
|
|
if(settings.overlay) {
|
||
|
|
module.error(error.overlay);
|
||
|
|
settings.transition = 'overlay';
|
||
|
|
}
|
||
|
|
module.refresh();
|
||
|
|
if(module.othersActive()) {
|
||
|
|
module.debug('Other sidebars currently visible');
|
||
|
|
if(settings.exclusive) {
|
||
|
|
// if not overlay queue animation after hide
|
||
|
|
if(settings.transition != 'overlay') {
|
||
|
|
module.hideOthers(module.show);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hideOthers();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.transition = 'overlay';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
animateMethod(function() {
|
||
|
|
callback.call(element);
|
||
|
|
settings.onShow.call(element);
|
||
|
|
});
|
||
|
|
settings.onChange.call(element);
|
||
|
|
settings.onVisible.call(element);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Sidebar is already visible');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function(callback) {
|
||
|
|
var
|
||
|
|
animateMethod = (settings.useLegacy === true)
|
||
|
|
? module.legacyPullPage
|
||
|
|
: module.pullPage
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if(module.is.visible() || module.is.animating()) {
|
||
|
|
module.debug('Hiding sidebar', callback);
|
||
|
|
module.refreshSidebars();
|
||
|
|
animateMethod(function() {
|
||
|
|
callback.call(element);
|
||
|
|
settings.onHidden.call(element);
|
||
|
|
});
|
||
|
|
settings.onChange.call(element);
|
||
|
|
settings.onHide.call(element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
othersAnimating: function() {
|
||
|
|
return ($sidebars.not($module).filter('.' + className.animating).length > 0);
|
||
|
|
},
|
||
|
|
othersVisible: function() {
|
||
|
|
return ($sidebars.not($module).filter('.' + className.visible).length > 0);
|
||
|
|
},
|
||
|
|
othersActive: function() {
|
||
|
|
return(module.othersVisible() || module.othersAnimating());
|
||
|
|
},
|
||
|
|
|
||
|
|
hideOthers: function(callback) {
|
||
|
|
var
|
||
|
|
$otherSidebars = $sidebars.not($module).filter('.' + className.visible),
|
||
|
|
sidebarCount = $otherSidebars.length,
|
||
|
|
callbackCount = 0
|
||
|
|
;
|
||
|
|
callback = callback || function(){};
|
||
|
|
$otherSidebars
|
||
|
|
.sidebar('hide', function() {
|
||
|
|
callbackCount++;
|
||
|
|
if(callbackCount == sidebarCount) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function() {
|
||
|
|
module.verbose('Determining toggled direction');
|
||
|
|
if(module.is.hidden()) {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
pushPage: function(callback) {
|
||
|
|
var
|
||
|
|
transition = module.get.transition(),
|
||
|
|
$transition = (transition == 'safe')
|
||
|
|
? $context
|
||
|
|
: (transition === 'overlay' || module.othersActive())
|
||
|
|
? $module
|
||
|
|
: $pusher,
|
||
|
|
animate,
|
||
|
|
transitionEnd
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
if(settings.transition == 'scale down') {
|
||
|
|
module.scrollToTop();
|
||
|
|
}
|
||
|
|
module.set.transition(transition);
|
||
|
|
module.repaint();
|
||
|
|
animate = function() {
|
||
|
|
module.bind.clickaway();
|
||
|
|
module.add.bodyCSS();
|
||
|
|
module.set.animating();
|
||
|
|
module.set.visible();
|
||
|
|
if(!module.othersVisible()) {
|
||
|
|
if(settings.dimPage) {
|
||
|
|
$pusher.addClass(className.dimmed);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
transitionEnd = function(event) {
|
||
|
|
if( event.target == $transition[0] ) {
|
||
|
|
$transition.off(transitionEvent + elementNamespace, transitionEnd);
|
||
|
|
module.remove.animating();
|
||
|
|
module.bind.scrollLock();
|
||
|
|
callback.call(element);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
$transition.off(transitionEvent + elementNamespace);
|
||
|
|
$transition.on(transitionEvent + elementNamespace, transitionEnd);
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
},
|
||
|
|
|
||
|
|
pullPage: function(callback) {
|
||
|
|
var
|
||
|
|
transition = module.get.transition(),
|
||
|
|
$transition = (transition == 'safe')
|
||
|
|
? $context
|
||
|
|
: (transition == 'overlay' || module.othersActive())
|
||
|
|
? $module
|
||
|
|
: $pusher,
|
||
|
|
animate,
|
||
|
|
transitionEnd
|
||
|
|
;
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
module.verbose('Removing context push state', module.get.direction());
|
||
|
|
|
||
|
|
module.set.transition(transition);
|
||
|
|
module.unbind.clickaway();
|
||
|
|
module.unbind.scrollLock();
|
||
|
|
|
||
|
|
animate = function() {
|
||
|
|
module.set.animating();
|
||
|
|
module.remove.visible();
|
||
|
|
if(settings.dimPage && !module.othersVisible()) {
|
||
|
|
$pusher.removeClass(className.dimmed);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
transitionEnd = function(event) {
|
||
|
|
if( event.target == $transition[0] ) {
|
||
|
|
$transition.off(transitionEvent + elementNamespace, transitionEnd);
|
||
|
|
module.remove.animating();
|
||
|
|
module.remove.transition();
|
||
|
|
module.remove.bodyCSS();
|
||
|
|
if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
|
||
|
|
module.scrollBack();
|
||
|
|
}
|
||
|
|
callback.call(element);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
$transition.off(transitionEvent + elementNamespace);
|
||
|
|
$transition.on(transitionEvent + elementNamespace, transitionEnd);
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
},
|
||
|
|
|
||
|
|
legacyPushPage: function(callback) {
|
||
|
|
var
|
||
|
|
distance = $module.width(),
|
||
|
|
direction = module.get.direction(),
|
||
|
|
properties = {}
|
||
|
|
;
|
||
|
|
distance = distance || $module.width();
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
properties[direction] = distance;
|
||
|
|
module.debug('Using javascript to push context', properties);
|
||
|
|
module.set.visible();
|
||
|
|
module.set.transition();
|
||
|
|
module.set.animating();
|
||
|
|
if(settings.dimPage) {
|
||
|
|
$pusher.addClass(className.dimmed);
|
||
|
|
}
|
||
|
|
$context
|
||
|
|
.css('position', 'relative')
|
||
|
|
.animate(properties, settings.duration, settings.easing, function() {
|
||
|
|
module.remove.animating();
|
||
|
|
module.bind.clickaway();
|
||
|
|
callback.call(element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
legacyPullPage: function(callback) {
|
||
|
|
var
|
||
|
|
distance = 0,
|
||
|
|
direction = module.get.direction(),
|
||
|
|
properties = {}
|
||
|
|
;
|
||
|
|
distance = distance || $module.width();
|
||
|
|
callback = $.isFunction(callback)
|
||
|
|
? callback
|
||
|
|
: function(){}
|
||
|
|
;
|
||
|
|
properties[direction] = '0px';
|
||
|
|
module.debug('Using javascript to pull context', properties);
|
||
|
|
module.unbind.clickaway();
|
||
|
|
module.set.animating();
|
||
|
|
module.remove.visible();
|
||
|
|
if(settings.dimPage && !module.othersActive()) {
|
||
|
|
$pusher.removeClass(className.dimmed);
|
||
|
|
}
|
||
|
|
$context
|
||
|
|
.css('position', 'relative')
|
||
|
|
.animate(properties, settings.duration, settings.easing, function() {
|
||
|
|
module.remove.animating();
|
||
|
|
callback.call(element);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
scrollToTop: function() {
|
||
|
|
module.verbose('Scrolling to top of page to avoid animation issues');
|
||
|
|
currentScroll = $(window).scrollTop();
|
||
|
|
$module.scrollTop(0);
|
||
|
|
window.scrollTo(0, 0);
|
||
|
|
},
|
||
|
|
|
||
|
|
scrollBack: function() {
|
||
|
|
module.verbose('Scrolling back to original page position');
|
||
|
|
window.scrollTo(0, currentScroll);
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
// html
|
||
|
|
ios: function() {
|
||
|
|
$html.addClass(className.ios);
|
||
|
|
},
|
||
|
|
|
||
|
|
// container
|
||
|
|
pushed: function() {
|
||
|
|
$context.addClass(className.pushed);
|
||
|
|
},
|
||
|
|
pushable: function() {
|
||
|
|
$context.addClass(className.pushable);
|
||
|
|
},
|
||
|
|
|
||
|
|
// sidebar
|
||
|
|
active: function() {
|
||
|
|
$module.addClass(className.active);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
$module.addClass(className.animating);
|
||
|
|
},
|
||
|
|
transition: function(transition) {
|
||
|
|
transition = transition || module.get.transition();
|
||
|
|
$module.addClass(transition);
|
||
|
|
},
|
||
|
|
direction: function(direction) {
|
||
|
|
direction = direction || module.get.direction();
|
||
|
|
$module.addClass(className[direction]);
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module.addClass(className.visible);
|
||
|
|
},
|
||
|
|
overlay: function() {
|
||
|
|
$module.addClass(className.overlay);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
remove: {
|
||
|
|
|
||
|
|
bodyCSS: function() {
|
||
|
|
module.debug('Removing body css styles', $style);
|
||
|
|
if($style && $style.length > 0) {
|
||
|
|
$style.remove();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// context
|
||
|
|
pushed: function() {
|
||
|
|
$context.removeClass(className.pushed);
|
||
|
|
},
|
||
|
|
pushable: function() {
|
||
|
|
$context.removeClass(className.pushable);
|
||
|
|
},
|
||
|
|
|
||
|
|
// sidebar
|
||
|
|
active: function() {
|
||
|
|
$module.removeClass(className.active);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
$module.removeClass(className.animating);
|
||
|
|
},
|
||
|
|
transition: function(transition) {
|
||
|
|
transition = transition || module.get.transition();
|
||
|
|
$module.removeClass(transition);
|
||
|
|
},
|
||
|
|
direction: function(direction) {
|
||
|
|
direction = direction || module.get.direction();
|
||
|
|
$module.removeClass(className[direction]);
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module.removeClass(className.visible);
|
||
|
|
},
|
||
|
|
overlay: function() {
|
||
|
|
$module.removeClass(className.overlay);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
direction: function() {
|
||
|
|
if($module.hasClass(className.top)) {
|
||
|
|
return className.top;
|
||
|
|
}
|
||
|
|
else if($module.hasClass(className.right)) {
|
||
|
|
return className.right;
|
||
|
|
}
|
||
|
|
else if($module.hasClass(className.bottom)) {
|
||
|
|
return className.bottom;
|
||
|
|
}
|
||
|
|
return className.left;
|
||
|
|
},
|
||
|
|
transition: function() {
|
||
|
|
var
|
||
|
|
direction = module.get.direction(),
|
||
|
|
transition
|
||
|
|
;
|
||
|
|
transition = ( module.is.mobile() )
|
||
|
|
? (settings.mobileTransition == 'auto')
|
||
|
|
? settings.defaultTransition.mobile[direction]
|
||
|
|
: settings.mobileTransition
|
||
|
|
: (settings.transition == 'auto')
|
||
|
|
? settings.defaultTransition.computer[direction]
|
||
|
|
: settings.transition
|
||
|
|
;
|
||
|
|
module.verbose('Determined transition', transition);
|
||
|
|
return transition;
|
||
|
|
},
|
||
|
|
transitionEvent: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('element'),
|
||
|
|
transitions = {
|
||
|
|
'transition' :'transitionend',
|
||
|
|
'OTransition' :'oTransitionEnd',
|
||
|
|
'MozTransition' :'transitionend',
|
||
|
|
'WebkitTransition' :'webkitTransitionEnd'
|
||
|
|
},
|
||
|
|
transition
|
||
|
|
;
|
||
|
|
for(transition in transitions){
|
||
|
|
if( element.style[transition] !== undefined ){
|
||
|
|
return transitions[transition];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
|
||
|
|
ie: function() {
|
||
|
|
var
|
||
|
|
isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
|
||
|
|
isIE = ('ActiveXObject' in window)
|
||
|
|
;
|
||
|
|
return (isIE11 || isIE);
|
||
|
|
},
|
||
|
|
|
||
|
|
legacy: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('div'),
|
||
|
|
transforms = {
|
||
|
|
'webkitTransform' :'-webkit-transform',
|
||
|
|
'OTransform' :'-o-transform',
|
||
|
|
'msTransform' :'-ms-transform',
|
||
|
|
'MozTransform' :'-moz-transform',
|
||
|
|
'transform' :'transform'
|
||
|
|
},
|
||
|
|
has3D
|
||
|
|
;
|
||
|
|
|
||
|
|
// Add it to the body to get the computed style.
|
||
|
|
document.body.insertBefore(element, null);
|
||
|
|
for (var transform in transforms) {
|
||
|
|
if (element.style[transform] !== undefined) {
|
||
|
|
element.style[transform] = "translate3d(1px,1px,1px)";
|
||
|
|
has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.body.removeChild(element);
|
||
|
|
return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
|
||
|
|
},
|
||
|
|
ios: function() {
|
||
|
|
var
|
||
|
|
userAgent = navigator.userAgent,
|
||
|
|
isIOS = userAgent.match(regExp.ios)
|
||
|
|
;
|
||
|
|
if(isIOS) {
|
||
|
|
module.verbose('Browser was found to be iOS', userAgent);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mobile: function() {
|
||
|
|
var
|
||
|
|
userAgent = navigator.userAgent,
|
||
|
|
isMobile = userAgent.match(regExp.mobile)
|
||
|
|
;
|
||
|
|
if(isMobile) {
|
||
|
|
module.verbose('Browser was found to be mobile', userAgent);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Browser is not mobile, using regular transition', userAgent);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hidden: function() {
|
||
|
|
return !module.is.visible();
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
return $module.hasClass(className.visible);
|
||
|
|
},
|
||
|
|
// alias
|
||
|
|
open: function() {
|
||
|
|
return module.is.visible();
|
||
|
|
},
|
||
|
|
closed: function() {
|
||
|
|
return module.is.hidden();
|
||
|
|
},
|
||
|
|
vertical: function() {
|
||
|
|
return $module.hasClass(className.top);
|
||
|
|
},
|
||
|
|
animating: function() {
|
||
|
|
return $context.hasClass(className.animating);
|
||
|
|
},
|
||
|
|
rtl: function () {
|
||
|
|
return $module.css('direction') == 'rtl';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
module.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.sidebar.settings = {
|
||
|
|
|
||
|
|
name : 'Sidebar',
|
||
|
|
namespace : 'sidebar',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
transition : 'auto',
|
||
|
|
mobileTransition : 'auto',
|
||
|
|
|
||
|
|
defaultTransition : {
|
||
|
|
computer: {
|
||
|
|
left : 'uncover',
|
||
|
|
right : 'uncover',
|
||
|
|
top : 'overlay',
|
||
|
|
bottom : 'overlay'
|
||
|
|
},
|
||
|
|
mobile: {
|
||
|
|
left : 'uncover',
|
||
|
|
right : 'uncover',
|
||
|
|
top : 'overlay',
|
||
|
|
bottom : 'overlay'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
context : 'body',
|
||
|
|
exclusive : false,
|
||
|
|
closable : true,
|
||
|
|
dimPage : true,
|
||
|
|
scrollLock : false,
|
||
|
|
returnScroll : false,
|
||
|
|
delaySetup : false,
|
||
|
|
|
||
|
|
useLegacy : 'auto',
|
||
|
|
duration : 500,
|
||
|
|
easing : 'easeInOutQuint',
|
||
|
|
|
||
|
|
onChange : function(){},
|
||
|
|
onShow : function(){},
|
||
|
|
onHide : function(){},
|
||
|
|
|
||
|
|
onHidden : function(){},
|
||
|
|
onVisible : function(){},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active',
|
||
|
|
animating : 'animating',
|
||
|
|
dimmed : 'dimmed',
|
||
|
|
ios : 'ios',
|
||
|
|
pushable : 'pushable',
|
||
|
|
pushed : 'pushed',
|
||
|
|
right : 'right',
|
||
|
|
top : 'top',
|
||
|
|
left : 'left',
|
||
|
|
bottom : 'bottom',
|
||
|
|
visible : 'visible'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector: {
|
||
|
|
fixed : '.fixed',
|
||
|
|
omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
|
||
|
|
pusher : '.pusher',
|
||
|
|
sidebar : '.ui.sidebar'
|
||
|
|
},
|
||
|
|
|
||
|
|
regExp: {
|
||
|
|
ios : /(iPad|iPhone|iPod)/g,
|
||
|
|
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
|
||
|
|
},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
method : 'The method you called is not defined.',
|
||
|
|
pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
|
||
|
|
movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
|
||
|
|
overlay : 'The overlay setting is no longer supported, use animation: overlay',
|
||
|
|
notFound : 'There were no elements that matched the specified selector'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// Adds easing
|
||
|
|
$.extend( $.easing, {
|
||
|
|
easeInOutQuint: function (x, t, b, c, d) {
|
||
|
|
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||
|
|
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Sticky
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributorss
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.sticky = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.sticky.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.sticky.settings),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
$window = $(window),
|
||
|
|
$container = $module.offsetParent(),
|
||
|
|
$scroll = $(settings.scrollContext),
|
||
|
|
$context,
|
||
|
|
|
||
|
|
selector = $module.selector || '',
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
observer,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
|
||
|
|
module.determineContext();
|
||
|
|
module.verbose('Initializing sticky', settings, $container);
|
||
|
|
|
||
|
|
module.save.positions();
|
||
|
|
module.checkErrors();
|
||
|
|
module.bind.events();
|
||
|
|
|
||
|
|
if(settings.observeChanges) {
|
||
|
|
module.observeChanges();
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module');
|
||
|
|
module.reset();
|
||
|
|
if(observer) {
|
||
|
|
observer.disconnect();
|
||
|
|
}
|
||
|
|
$window.off('resize' + eventNamespace, module.event.resize);
|
||
|
|
$scroll.off('scroll' + eventNamespace, module.event.scroll);
|
||
|
|
$module.removeData(moduleNamespace);
|
||
|
|
},
|
||
|
|
|
||
|
|
observeChanges: function() {
|
||
|
|
var
|
||
|
|
context = $context[0]
|
||
|
|
;
|
||
|
|
if('MutationObserver' in window) {
|
||
|
|
observer = new MutationObserver(function(mutations) {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(function() {
|
||
|
|
module.verbose('DOM tree modified, updating sticky menu');
|
||
|
|
module.refresh();
|
||
|
|
}, 20);
|
||
|
|
});
|
||
|
|
observer.observe(element, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
observer.observe(context, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
module.debug('Setting up mutation observer', observer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
determineContext: function() {
|
||
|
|
if(settings.context) {
|
||
|
|
$context = $(settings.context);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$context = $container;
|
||
|
|
}
|
||
|
|
if($context.length === 0) {
|
||
|
|
module.error(error.invalidContext, settings.context, $module);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
checkErrors: function() {
|
||
|
|
if( module.is.hidden() ) {
|
||
|
|
module.error(error.visible, $module);
|
||
|
|
}
|
||
|
|
if(module.cache.element.height > module.cache.context.height) {
|
||
|
|
module.reset();
|
||
|
|
module.error(error.elementSize, $module);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
events: function() {
|
||
|
|
$window.on('resize' + eventNamespace, module.event.resize);
|
||
|
|
$scroll.on('scroll' + eventNamespace, module.event.scroll);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
resize: function() {
|
||
|
|
requestAnimationFrame(function() {
|
||
|
|
module.refresh();
|
||
|
|
module.stick();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
scroll: function() {
|
||
|
|
requestAnimationFrame(function() {
|
||
|
|
module.stick();
|
||
|
|
settings.onScroll.call(element);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function(hardRefresh) {
|
||
|
|
module.reset();
|
||
|
|
if(hardRefresh) {
|
||
|
|
$container = $module.offsetParent();
|
||
|
|
}
|
||
|
|
module.save.positions();
|
||
|
|
module.stick();
|
||
|
|
settings.onReposition.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
supports: {
|
||
|
|
sticky: function() {
|
||
|
|
var
|
||
|
|
$element = $('<div/>'),
|
||
|
|
element = $element.get()
|
||
|
|
;
|
||
|
|
$element.addClass(className.supported);
|
||
|
|
return($element.css('position').match('sticky'));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
scroll: function(scroll) {
|
||
|
|
module.lastScroll = scroll;
|
||
|
|
},
|
||
|
|
positions: function() {
|
||
|
|
var
|
||
|
|
window = {
|
||
|
|
height: $window.height()
|
||
|
|
},
|
||
|
|
element = {
|
||
|
|
margin: {
|
||
|
|
top : parseInt($module.css('margin-top'), 10),
|
||
|
|
bottom : parseInt($module.css('margin-bottom'), 10),
|
||
|
|
},
|
||
|
|
offset : $module.offset(),
|
||
|
|
width : $module.outerWidth(),
|
||
|
|
height : $module.outerHeight()
|
||
|
|
},
|
||
|
|
context = {
|
||
|
|
offset : $context.offset(),
|
||
|
|
height : $context.outerHeight(),
|
||
|
|
bottomPadding : parseInt($context.css('padding-bottom'), 10)
|
||
|
|
}
|
||
|
|
;
|
||
|
|
module.cache = {
|
||
|
|
fits : ( element.height < window.height ),
|
||
|
|
window: {
|
||
|
|
height: window.height
|
||
|
|
},
|
||
|
|
element: {
|
||
|
|
margin : element.margin,
|
||
|
|
top : element.offset.top - element.margin.top,
|
||
|
|
left : element.offset.left,
|
||
|
|
width : element.width,
|
||
|
|
height : element.height,
|
||
|
|
bottom : element.offset.top + element.height
|
||
|
|
},
|
||
|
|
context: {
|
||
|
|
top : context.offset.top,
|
||
|
|
height : context.height,
|
||
|
|
bottomPadding : context.bottomPadding,
|
||
|
|
bottom : context.offset.top + context.height - context.bottomPadding
|
||
|
|
}
|
||
|
|
};
|
||
|
|
module.set.containerSize();
|
||
|
|
module.set.size();
|
||
|
|
module.stick();
|
||
|
|
module.debug('Caching element positions', module.cache);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
direction: function(scroll) {
|
||
|
|
var
|
||
|
|
direction = 'down'
|
||
|
|
;
|
||
|
|
scroll = scroll || $scroll.scrollTop();
|
||
|
|
if(module.lastScroll !== undefined) {
|
||
|
|
if(module.lastScroll < scroll) {
|
||
|
|
direction = 'down';
|
||
|
|
}
|
||
|
|
else if(module.lastScroll > scroll) {
|
||
|
|
direction = 'up';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return direction;
|
||
|
|
},
|
||
|
|
scrollChange: function(scroll) {
|
||
|
|
scroll = scroll || $scroll.scrollTop();
|
||
|
|
return (module.lastScroll)
|
||
|
|
? (scroll - module.lastScroll)
|
||
|
|
: 0
|
||
|
|
;
|
||
|
|
},
|
||
|
|
currentElementScroll: function() {
|
||
|
|
return ( module.is.top() )
|
||
|
|
? Math.abs(parseInt($module.css('top'), 10)) || 0
|
||
|
|
: Math.abs(parseInt($module.css('bottom'), 10)) || 0
|
||
|
|
;
|
||
|
|
},
|
||
|
|
elementScroll: function(scroll) {
|
||
|
|
scroll = scroll || $scroll.scrollTop();
|
||
|
|
var
|
||
|
|
element = module.cache.element,
|
||
|
|
window = module.cache.window,
|
||
|
|
delta = module.get.scrollChange(scroll),
|
||
|
|
maxScroll = (element.height - window.height + settings.offset),
|
||
|
|
currentScroll = module.get.currentElementScroll(),
|
||
|
|
possibleScroll = (currentScroll + delta),
|
||
|
|
elementScroll
|
||
|
|
;
|
||
|
|
if(module.cache.fits || possibleScroll < 0) {
|
||
|
|
elementScroll = 0;
|
||
|
|
}
|
||
|
|
else if (possibleScroll > maxScroll ) {
|
||
|
|
elementScroll = maxScroll;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
elementScroll = possibleScroll;
|
||
|
|
}
|
||
|
|
return elementScroll;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
offset: function() {
|
||
|
|
$module.css('margin-top', '');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
offset: function() {
|
||
|
|
module.verbose('Setting offset on element', settings.offset);
|
||
|
|
$module.css('margin-top', settings.offset);
|
||
|
|
},
|
||
|
|
containerSize: function() {
|
||
|
|
var
|
||
|
|
tagName = $container.get(0).tagName
|
||
|
|
;
|
||
|
|
if(tagName === 'HTML' || tagName == 'body') {
|
||
|
|
// this can trigger for too many reasons
|
||
|
|
//module.error(error.container, tagName, $module);
|
||
|
|
$container = $module.offsetParent();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Settings container size', module.cache.context.height);
|
||
|
|
if( Math.abs($container.height() - module.cache.context.height) > 5) {
|
||
|
|
$container.css({
|
||
|
|
height: module.cache.context.height
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scroll: function(scroll) {
|
||
|
|
module.debug('Setting scroll on element', scroll);
|
||
|
|
if( module.is.top() ) {
|
||
|
|
$module
|
||
|
|
.css('bottom', '')
|
||
|
|
.css('top', -scroll)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if( module.is.bottom() ) {
|
||
|
|
$module
|
||
|
|
.css('top', '')
|
||
|
|
.css('bottom', scroll)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
size: function() {
|
||
|
|
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
|
||
|
|
$module
|
||
|
|
.css({
|
||
|
|
width : module.cache.element.width,
|
||
|
|
height : module.cache.element.height
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
top: function() {
|
||
|
|
return $module.hasClass(className.top);
|
||
|
|
},
|
||
|
|
bottom: function() {
|
||
|
|
return $module.hasClass(className.bottom);
|
||
|
|
},
|
||
|
|
initialPosition: function() {
|
||
|
|
return (!module.is.fixed() && !module.is.bound());
|
||
|
|
},
|
||
|
|
hidden: function() {
|
||
|
|
return (!$module.is(':visible'));
|
||
|
|
},
|
||
|
|
bound: function() {
|
||
|
|
return $module.hasClass(className.bound);
|
||
|
|
},
|
||
|
|
fixed: function() {
|
||
|
|
return $module.hasClass(className.fixed);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
stick: function() {
|
||
|
|
var
|
||
|
|
cache = module.cache,
|
||
|
|
fits = cache.fits,
|
||
|
|
element = cache.element,
|
||
|
|
window = cache.window,
|
||
|
|
context = cache.context,
|
||
|
|
offset = (module.is.bottom() && settings.pushing)
|
||
|
|
? settings.bottomOffset
|
||
|
|
: settings.offset,
|
||
|
|
scroll = {
|
||
|
|
top : $scroll.scrollTop() + offset,
|
||
|
|
bottom : $scroll.scrollTop() + offset + window.height
|
||
|
|
},
|
||
|
|
direction = module.get.direction(scroll.top),
|
||
|
|
elementScroll = module.get.elementScroll(scroll.top),
|
||
|
|
|
||
|
|
// shorthand
|
||
|
|
doesntFit = !fits,
|
||
|
|
elementVisible = (element.height !== 0)
|
||
|
|
;
|
||
|
|
|
||
|
|
// save current scroll for next run
|
||
|
|
module.save.scroll(scroll.top);
|
||
|
|
|
||
|
|
if(elementVisible) {
|
||
|
|
|
||
|
|
if( module.is.initialPosition() ) {
|
||
|
|
if(scroll.top >= context.bottom) {
|
||
|
|
console.log(scroll.top, context.bottom);
|
||
|
|
module.debug('Element bottom of container');
|
||
|
|
module.bindBottom();
|
||
|
|
}
|
||
|
|
else if(scroll.top >= element.top) {
|
||
|
|
module.debug('Element passed, fixing element to page');
|
||
|
|
module.fixTop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if( module.is.fixed() ) {
|
||
|
|
|
||
|
|
// currently fixed top
|
||
|
|
if( module.is.top() ) {
|
||
|
|
if( scroll.top < element.top ) {
|
||
|
|
module.debug('Fixed element reached top of container');
|
||
|
|
module.setInitialPosition();
|
||
|
|
}
|
||
|
|
else if( (element.height + scroll.top - elementScroll) > context.bottom ) {
|
||
|
|
module.debug('Fixed element reached bottom of container');
|
||
|
|
module.bindBottom();
|
||
|
|
}
|
||
|
|
// scroll element if larger than screen
|
||
|
|
else if(doesntFit) {
|
||
|
|
module.set.scroll(elementScroll);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// currently fixed bottom
|
||
|
|
else if(module.is.bottom() ) {
|
||
|
|
|
||
|
|
// top edge
|
||
|
|
if( (scroll.bottom - element.height) < element.top) {
|
||
|
|
module.debug('Bottom fixed rail has reached top of container');
|
||
|
|
module.setInitialPosition();
|
||
|
|
}
|
||
|
|
// bottom edge
|
||
|
|
else if(scroll.bottom > context.bottom) {
|
||
|
|
module.debug('Bottom fixed rail has reached bottom of container');
|
||
|
|
module.bindBottom();
|
||
|
|
}
|
||
|
|
// scroll element if larger than screen
|
||
|
|
else if(doesntFit) {
|
||
|
|
module.set.scroll(elementScroll);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if( module.is.bottom() ) {
|
||
|
|
if(settings.pushing) {
|
||
|
|
if(module.is.bound() && scroll.bottom < context.bottom ) {
|
||
|
|
module.debug('Fixing bottom attached element to bottom of browser.');
|
||
|
|
module.fixBottom();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(module.is.bound() && (scroll.top < context.bottom - element.height) ) {
|
||
|
|
module.debug('Fixing bottom attached element to top of browser.');
|
||
|
|
module.fixTop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bindTop: function() {
|
||
|
|
module.debug('Binding element to top of parent container');
|
||
|
|
module.remove.offset();
|
||
|
|
$module
|
||
|
|
.css('left' , '')
|
||
|
|
.css('top' , '')
|
||
|
|
.css('margin-bottom' , '')
|
||
|
|
.removeClass(className.fixed)
|
||
|
|
.removeClass(className.bottom)
|
||
|
|
.addClass(className.bound)
|
||
|
|
.addClass(className.top)
|
||
|
|
;
|
||
|
|
settings.onTop.call(element);
|
||
|
|
settings.onUnstick.call(element);
|
||
|
|
},
|
||
|
|
bindBottom: function() {
|
||
|
|
module.debug('Binding element to bottom of parent container');
|
||
|
|
module.remove.offset();
|
||
|
|
$module
|
||
|
|
.css('left' , '')
|
||
|
|
.css('top' , '')
|
||
|
|
.css('margin-bottom' , module.cache.context.bottomPadding)
|
||
|
|
.removeClass(className.fixed)
|
||
|
|
.removeClass(className.top)
|
||
|
|
.addClass(className.bound)
|
||
|
|
.addClass(className.bottom)
|
||
|
|
;
|
||
|
|
settings.onBottom.call(element);
|
||
|
|
settings.onUnstick.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
setInitialPosition: function() {
|
||
|
|
module.unfix();
|
||
|
|
module.unbind();
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
fixTop: function() {
|
||
|
|
module.debug('Fixing element to top of page');
|
||
|
|
module.set.offset();
|
||
|
|
$module
|
||
|
|
.css('left', module.cache.element.left)
|
||
|
|
.css('bottom' , '')
|
||
|
|
.removeClass(className.bound)
|
||
|
|
.removeClass(className.bottom)
|
||
|
|
.addClass(className.fixed)
|
||
|
|
.addClass(className.top)
|
||
|
|
;
|
||
|
|
settings.onStick.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
fixBottom: function() {
|
||
|
|
module.debug('Sticking element to bottom of page');
|
||
|
|
module.set.offset();
|
||
|
|
$module
|
||
|
|
.css('left', module.cache.element.left)
|
||
|
|
.css('bottom' , '')
|
||
|
|
.removeClass(className.bound)
|
||
|
|
.removeClass(className.top)
|
||
|
|
.addClass(className.fixed)
|
||
|
|
.addClass(className.bottom)
|
||
|
|
;
|
||
|
|
settings.onStick.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
unbind: function() {
|
||
|
|
module.debug('Removing absolute position on element');
|
||
|
|
module.remove.offset();
|
||
|
|
$module
|
||
|
|
.removeClass(className.bound)
|
||
|
|
.removeClass(className.top)
|
||
|
|
.removeClass(className.bottom)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
unfix: function() {
|
||
|
|
module.debug('Removing fixed position on element');
|
||
|
|
module.remove.offset();
|
||
|
|
$module
|
||
|
|
.removeClass(className.fixed)
|
||
|
|
.removeClass(className.top)
|
||
|
|
.removeClass(className.bottom)
|
||
|
|
;
|
||
|
|
settings.onUnstick.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
module.debug('Reseting elements position');
|
||
|
|
module.unbind();
|
||
|
|
module.unfix();
|
||
|
|
module.resetCSS();
|
||
|
|
},
|
||
|
|
|
||
|
|
resetCSS: function() {
|
||
|
|
$module
|
||
|
|
.css({
|
||
|
|
top : '',
|
||
|
|
bottom : '',
|
||
|
|
width : '',
|
||
|
|
height : ''
|
||
|
|
})
|
||
|
|
;
|
||
|
|
$container
|
||
|
|
.css({
|
||
|
|
height: ''
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 0);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.sticky.settings = {
|
||
|
|
|
||
|
|
name : 'Sticky',
|
||
|
|
namespace : 'sticky',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : false,
|
||
|
|
performance : false,
|
||
|
|
|
||
|
|
pushing : false,
|
||
|
|
context : false,
|
||
|
|
scrollContext : window,
|
||
|
|
|
||
|
|
offset : 0,
|
||
|
|
bottomOffset : 0,
|
||
|
|
|
||
|
|
observeChanges : true,
|
||
|
|
|
||
|
|
onReposition : function(){},
|
||
|
|
onScroll : function(){},
|
||
|
|
onStick : function(){},
|
||
|
|
onUnstick : function(){},
|
||
|
|
onTop : function(){},
|
||
|
|
onBottom : function(){},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
container : 'Sticky element must be inside a relative container',
|
||
|
|
visible : 'Element is hidden, you must call refresh after element becomes visible',
|
||
|
|
method : 'The method you called is not defined.',
|
||
|
|
invalidContext : 'Context specified does not exist',
|
||
|
|
elementSize : 'Sticky element is larger than its container, cannot create sticky.'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
bound : 'bound',
|
||
|
|
fixed : 'fixed',
|
||
|
|
supported : 'native',
|
||
|
|
top : 'top',
|
||
|
|
bottom : 'bottom'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Tab
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributorss
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.tab = function(parameters) {
|
||
|
|
|
||
|
|
var
|
||
|
|
// use window context if none specified
|
||
|
|
$allModules = $.isFunction(this)
|
||
|
|
? $(window)
|
||
|
|
: $(this),
|
||
|
|
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.tab.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.tab.settings),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
module,
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + settings.namespace,
|
||
|
|
moduleNamespace = 'module-' + settings.namespace,
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
|
||
|
|
cache = {},
|
||
|
|
firstLoad = true,
|
||
|
|
recursionDepth = 0,
|
||
|
|
|
||
|
|
$context,
|
||
|
|
$tabs,
|
||
|
|
activeTabPath,
|
||
|
|
parameterArray,
|
||
|
|
historyEvent,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace)
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing tab menu item', $module);
|
||
|
|
|
||
|
|
module.determineTabs();
|
||
|
|
module.debug('Determining tabs', settings.context, $tabs);
|
||
|
|
|
||
|
|
// set up automatic routing
|
||
|
|
if(settings.auto) {
|
||
|
|
module.set.auto();
|
||
|
|
}
|
||
|
|
|
||
|
|
// attach events if navigation wasn't set to window
|
||
|
|
if( !$.isWindow( element ) ) {
|
||
|
|
module.debug('Attaching tab activation events to element', $module);
|
||
|
|
$module
|
||
|
|
.on('click' + eventNamespace, module.event.click)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
determineTabs: function() {
|
||
|
|
var
|
||
|
|
$reference
|
||
|
|
;
|
||
|
|
|
||
|
|
// determine tab context
|
||
|
|
if(settings.context === 'parent') {
|
||
|
|
if($module.closest(selector.ui).length > 0) {
|
||
|
|
$reference = $module.closest(selector.ui);
|
||
|
|
module.verbose('Using closest UI element for determining parent', $reference);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$reference = $module;
|
||
|
|
}
|
||
|
|
$context = $reference.parent();
|
||
|
|
module.verbose('Determined parent element for creating context', $context);
|
||
|
|
}
|
||
|
|
else if(settings.context) {
|
||
|
|
$context = $(settings.context);
|
||
|
|
module.verbose('Using selector for tab context', settings.context, $context);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$context = $('body');
|
||
|
|
}
|
||
|
|
|
||
|
|
// find tabs
|
||
|
|
if(settings.childrenOnly) {
|
||
|
|
$tabs = $context.children(selector.tabs);
|
||
|
|
module.debug('Searching tab context children for tabs', $context, $tabs);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$tabs = $context.find(selector.tabs);
|
||
|
|
module.debug('Searching tab context for tabs', $context, $tabs);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
initializeHistory: function() {
|
||
|
|
if(settings.history) {
|
||
|
|
module.debug('Initializing page state');
|
||
|
|
if( $.address === undefined ) {
|
||
|
|
module.error(error.state);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(settings.historyType == 'state') {
|
||
|
|
module.debug('Using HTML5 to manage state');
|
||
|
|
if(settings.path !== false) {
|
||
|
|
$.address
|
||
|
|
.history(true)
|
||
|
|
.state(settings.path)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.path);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$.address
|
||
|
|
.bind('change', module.event.history.change)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function () {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.debug('Destroying tabs', $module);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
click: function(event) {
|
||
|
|
var
|
||
|
|
tabPath = $(this).data(metadata.tab)
|
||
|
|
;
|
||
|
|
if(tabPath !== undefined) {
|
||
|
|
if(settings.history) {
|
||
|
|
module.verbose('Updating page state', event);
|
||
|
|
$.address.value(tabPath);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Changing tab', event);
|
||
|
|
module.changeTab(tabPath);
|
||
|
|
}
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('No tab specified');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
history: {
|
||
|
|
change: function(event) {
|
||
|
|
var
|
||
|
|
tabPath = event.pathNames.join('/') || module.get.initialPath(),
|
||
|
|
pageTitle = settings.templates.determineTitle(tabPath) || false
|
||
|
|
;
|
||
|
|
module.performance.display();
|
||
|
|
module.debug('History change event', tabPath, event);
|
||
|
|
historyEvent = event;
|
||
|
|
if(tabPath !== undefined) {
|
||
|
|
module.changeTab(tabPath);
|
||
|
|
}
|
||
|
|
if(pageTitle) {
|
||
|
|
$.address.title(pageTitle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
if(activeTabPath) {
|
||
|
|
module.debug('Refreshing tab', activeTabPath);
|
||
|
|
module.changeTab(activeTabPath);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
cache: {
|
||
|
|
|
||
|
|
read: function(cacheKey) {
|
||
|
|
return (cacheKey !== undefined)
|
||
|
|
? cache[cacheKey]
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
add: function(cacheKey, content) {
|
||
|
|
cacheKey = cacheKey || activeTabPath;
|
||
|
|
module.debug('Adding cached content for', cacheKey);
|
||
|
|
cache[cacheKey] = content;
|
||
|
|
},
|
||
|
|
remove: function(cacheKey) {
|
||
|
|
cacheKey = cacheKey || activeTabPath;
|
||
|
|
module.debug('Removing cached content for', cacheKey);
|
||
|
|
delete cache[cacheKey];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
auto: function() {
|
||
|
|
var
|
||
|
|
url = (typeof settings.path == 'string')
|
||
|
|
? settings.path.replace(/\/$/, '') + '/{$tab}'
|
||
|
|
: '/{$tab}'
|
||
|
|
;
|
||
|
|
module.verbose('Setting up automatic tab retrieval from server', url);
|
||
|
|
if($.isPlainObject(settings.apiSettings)) {
|
||
|
|
settings.apiSettings.url = url;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.apiSettings = {
|
||
|
|
url: url
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
state: function(state) {
|
||
|
|
$.address.value(state);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
changeTab: function(tabPath) {
|
||
|
|
var
|
||
|
|
pushStateAvailable = (window.history && window.history.pushState),
|
||
|
|
shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad),
|
||
|
|
remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ),
|
||
|
|
// only get default path if not remote content
|
||
|
|
pathArray = (remoteContent && !shouldIgnoreLoad)
|
||
|
|
? module.utilities.pathToArray(tabPath)
|
||
|
|
: module.get.defaultPathArray(tabPath)
|
||
|
|
;
|
||
|
|
tabPath = module.utilities.arrayToPath(pathArray);
|
||
|
|
$.each(pathArray, function(index, tab) {
|
||
|
|
var
|
||
|
|
currentPathArray = pathArray.slice(0, index + 1),
|
||
|
|
currentPath = module.utilities.arrayToPath(currentPathArray),
|
||
|
|
|
||
|
|
isTab = module.is.tab(currentPath),
|
||
|
|
isLastIndex = (index + 1 == pathArray.length),
|
||
|
|
|
||
|
|
$tab = module.get.tabElement(currentPath),
|
||
|
|
$anchor,
|
||
|
|
nextPathArray,
|
||
|
|
nextPath,
|
||
|
|
isLastTab
|
||
|
|
;
|
||
|
|
module.verbose('Looking for tab', tab);
|
||
|
|
if(isTab) {
|
||
|
|
|
||
|
|
module.verbose('Tab was found', tab);
|
||
|
|
// scope up
|
||
|
|
activeTabPath = currentPath;
|
||
|
|
parameterArray = module.utilities.filterArray(pathArray, currentPathArray);
|
||
|
|
|
||
|
|
if(isLastIndex) {
|
||
|
|
isLastTab = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
nextPathArray = pathArray.slice(0, index + 2);
|
||
|
|
nextPath = module.utilities.arrayToPath(nextPathArray);
|
||
|
|
isLastTab = ( !module.is.tab(nextPath) );
|
||
|
|
if(isLastTab) {
|
||
|
|
module.verbose('Tab parameters found', nextPathArray);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(isLastTab && remoteContent) {
|
||
|
|
if(!shouldIgnoreLoad) {
|
||
|
|
module.activate.navigation(currentPath);
|
||
|
|
module.content.fetch(currentPath, tabPath);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Ignoring remote content on first tab load', currentPath);
|
||
|
|
firstLoad = false;
|
||
|
|
module.cache.add(tabPath, $tab.html());
|
||
|
|
module.activate.all(currentPath);
|
||
|
|
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
|
||
|
|
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Opened local tab', currentPath);
|
||
|
|
module.activate.all(currentPath);
|
||
|
|
if( !module.cache.read(currentPath) ) {
|
||
|
|
module.cache.add(currentPath, true);
|
||
|
|
module.debug('First time tab loaded calling tab init');
|
||
|
|
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
|
||
|
|
}
|
||
|
|
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(tabPath.search('/') == -1 && tabPath !== '') {
|
||
|
|
// look for in page anchor
|
||
|
|
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'),
|
||
|
|
currentPath = $anchor.closest('[data-tab]').data('tab');
|
||
|
|
$tab = module.get.tabElement(currentPath);
|
||
|
|
// if anchor exists use parent tab
|
||
|
|
if($anchor && $anchor.length > 0 && currentPath) {
|
||
|
|
module.debug('No tab found, but deep anchor link present, opening parent tab');
|
||
|
|
module.activate.all(currentPath);
|
||
|
|
if( !module.cache.read(currentPath) ) {
|
||
|
|
module.cache.add(currentPath, true);
|
||
|
|
module.debug('First time tab loaded calling tab init');
|
||
|
|
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.missingTab, $module, $context, currentPath);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
content: {
|
||
|
|
|
||
|
|
fetch: function(tabPath, fullTabPath) {
|
||
|
|
var
|
||
|
|
$tab = module.get.tabElement(tabPath),
|
||
|
|
apiSettings = {
|
||
|
|
dataType : 'html',
|
||
|
|
on : 'now',
|
||
|
|
onSuccess : function(response) {
|
||
|
|
module.cache.add(fullTabPath, response);
|
||
|
|
module.content.update(tabPath, response);
|
||
|
|
if(tabPath == activeTabPath) {
|
||
|
|
module.debug('Content loaded', tabPath);
|
||
|
|
module.activate.tab(tabPath);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Content loaded in background', tabPath);
|
||
|
|
}
|
||
|
|
settings.onTabInit.call($tab, tabPath, parameterArray, historyEvent);
|
||
|
|
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
|
||
|
|
},
|
||
|
|
urlData: { tab: fullTabPath }
|
||
|
|
},
|
||
|
|
request = $tab.api('get request') || false,
|
||
|
|
existingRequest = ( request && request.state() === 'pending' ),
|
||
|
|
requestSettings,
|
||
|
|
cachedContent
|
||
|
|
;
|
||
|
|
|
||
|
|
fullTabPath = fullTabPath || tabPath;
|
||
|
|
cachedContent = module.cache.read(fullTabPath);
|
||
|
|
|
||
|
|
|
||
|
|
module.activate.tab(tabPath);
|
||
|
|
|
||
|
|
if(settings.cache && cachedContent) {
|
||
|
|
module.debug('Showing existing content', fullTabPath);
|
||
|
|
module.content.update(tabPath, cachedContent);
|
||
|
|
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
|
||
|
|
}
|
||
|
|
else if(existingRequest) {
|
||
|
|
module.debug('Content is already loading', fullTabPath);
|
||
|
|
$tab.addClass(className.loading);
|
||
|
|
}
|
||
|
|
else if($.api !== undefined) {
|
||
|
|
requestSettings = $.extend(true, {
|
||
|
|
headers: { 'X-Remote': true }
|
||
|
|
}, settings.apiSettings, apiSettings);
|
||
|
|
module.debug('Retrieving remote content', fullTabPath, requestSettings);
|
||
|
|
$tab.api( requestSettings );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.api);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
update: function(tabPath, html) {
|
||
|
|
module.debug('Updating html for', tabPath);
|
||
|
|
var
|
||
|
|
$tab = module.get.tabElement(tabPath)
|
||
|
|
;
|
||
|
|
$tab
|
||
|
|
.html(html)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
activate: {
|
||
|
|
all: function(tabPath) {
|
||
|
|
module.activate.tab(tabPath);
|
||
|
|
module.activate.navigation(tabPath);
|
||
|
|
},
|
||
|
|
tab: function(tabPath) {
|
||
|
|
var
|
||
|
|
$tab = module.get.tabElement(tabPath)
|
||
|
|
;
|
||
|
|
module.verbose('Showing tab content for', $tab);
|
||
|
|
$tab
|
||
|
|
.addClass(className.active)
|
||
|
|
.siblings($tabs)
|
||
|
|
.removeClass(className.active + ' ' + className.loading)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
navigation: function(tabPath) {
|
||
|
|
var
|
||
|
|
$navigation = module.get.navElement(tabPath)
|
||
|
|
;
|
||
|
|
module.verbose('Activating tab navigation for', $navigation, tabPath);
|
||
|
|
$navigation
|
||
|
|
.addClass(className.active)
|
||
|
|
.siblings($allModules)
|
||
|
|
.removeClass(className.active + ' ' + className.loading)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
deactivate: {
|
||
|
|
all: function() {
|
||
|
|
module.deactivate.navigation();
|
||
|
|
module.deactivate.tabs();
|
||
|
|
},
|
||
|
|
navigation: function() {
|
||
|
|
$allModules
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
tabs: function() {
|
||
|
|
$tabs
|
||
|
|
.removeClass(className.active + ' ' + className.loading)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
tab: function(tabName) {
|
||
|
|
return (tabName !== undefined)
|
||
|
|
? ( module.get.tabElement(tabName).length > 0 )
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
initialPath: function() {
|
||
|
|
return $allModules.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab);
|
||
|
|
},
|
||
|
|
path: function() {
|
||
|
|
return $.address.value();
|
||
|
|
},
|
||
|
|
// adds default tabs to tab path
|
||
|
|
defaultPathArray: function(tabPath) {
|
||
|
|
return module.utilities.pathToArray( module.get.defaultPath(tabPath) );
|
||
|
|
},
|
||
|
|
defaultPath: function(tabPath) {
|
||
|
|
var
|
||
|
|
$defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0),
|
||
|
|
defaultTab = $defaultNav.data(metadata.tab) || false
|
||
|
|
;
|
||
|
|
if( defaultTab ) {
|
||
|
|
module.debug('Found default tab', defaultTab);
|
||
|
|
if(recursionDepth < settings.maxDepth) {
|
||
|
|
recursionDepth++;
|
||
|
|
return module.get.defaultPath(defaultTab);
|
||
|
|
}
|
||
|
|
module.error(error.recursion);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('No default tabs found for', tabPath, $tabs);
|
||
|
|
}
|
||
|
|
recursionDepth = 0;
|
||
|
|
return tabPath;
|
||
|
|
},
|
||
|
|
navElement: function(tabPath) {
|
||
|
|
tabPath = tabPath || activeTabPath;
|
||
|
|
return $allModules.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
|
||
|
|
},
|
||
|
|
tabElement: function(tabPath) {
|
||
|
|
var
|
||
|
|
$fullPathTab,
|
||
|
|
$simplePathTab,
|
||
|
|
tabPathArray,
|
||
|
|
lastTab
|
||
|
|
;
|
||
|
|
tabPath = tabPath || activeTabPath;
|
||
|
|
tabPathArray = module.utilities.pathToArray(tabPath);
|
||
|
|
lastTab = module.utilities.last(tabPathArray);
|
||
|
|
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]');
|
||
|
|
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
|
||
|
|
return ($fullPathTab.length > 0)
|
||
|
|
? $fullPathTab
|
||
|
|
: $simplePathTab
|
||
|
|
;
|
||
|
|
},
|
||
|
|
tab: function() {
|
||
|
|
return activeTabPath;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
utilities: {
|
||
|
|
filterArray: function(keepArray, removeArray) {
|
||
|
|
return $.grep(keepArray, function(keepValue) {
|
||
|
|
return ( $.inArray(keepValue, removeArray) == -1);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
last: function(array) {
|
||
|
|
return $.isArray(array)
|
||
|
|
? array[ array.length - 1]
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
pathToArray: function(pathName) {
|
||
|
|
if(pathName === undefined) {
|
||
|
|
pathName = activeTabPath;
|
||
|
|
}
|
||
|
|
return typeof pathName == 'string'
|
||
|
|
? pathName.split('/')
|
||
|
|
: [pathName]
|
||
|
|
;
|
||
|
|
},
|
||
|
|
arrayToPath: function(pathArray) {
|
||
|
|
return $.isArray(pathArray)
|
||
|
|
? pathArray.join('/')
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
if(module && !methodInvoked) {
|
||
|
|
module.initializeHistory();
|
||
|
|
}
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// shortcut for tabbed content with no defined navigation
|
||
|
|
$.tab = function() {
|
||
|
|
$(window).tab.apply(this, arguments);
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.tab.settings = {
|
||
|
|
|
||
|
|
name : 'Tab',
|
||
|
|
namespace : 'tab',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers
|
||
|
|
history : false, // use browser history
|
||
|
|
historyType : 'hash', // #/ or html5 state
|
||
|
|
path : false, // base path of url
|
||
|
|
|
||
|
|
context : false, // specify a context that tabs must appear inside
|
||
|
|
childrenOnly : false, // use only tabs that are children of context
|
||
|
|
maxDepth : 25, // max depth a tab can be nested
|
||
|
|
|
||
|
|
alwaysRefresh : false, // load tab content new every tab click
|
||
|
|
cache : true, // cache the content requests to pull locally
|
||
|
|
ignoreFirstLoad : false, // don't load remote content on first load
|
||
|
|
apiSettings : false, // settings for api call
|
||
|
|
|
||
|
|
onTabInit : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
|
||
|
|
onTabLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
|
||
|
|
|
||
|
|
templates : {
|
||
|
|
determineTitle: function(tabArray) {} // returns page title for path
|
||
|
|
},
|
||
|
|
|
||
|
|
error: {
|
||
|
|
api : 'You attempted to load content without API module',
|
||
|
|
method : 'The method you called is not defined',
|
||
|
|
missingTab : 'Activated tab cannot be found for this context.',
|
||
|
|
noContent : 'The tab you specified is missing a content url.',
|
||
|
|
path : 'History enabled, but no path was specified',
|
||
|
|
recursion : 'Max recursive depth reached',
|
||
|
|
state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
|
||
|
|
},
|
||
|
|
|
||
|
|
metadata : {
|
||
|
|
tab : 'tab',
|
||
|
|
loaded : 'loaded',
|
||
|
|
promise: 'promise'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
loading : 'loading',
|
||
|
|
active : 'active'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
tabs : '.ui.tab',
|
||
|
|
ui : '.ui'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Transition
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.transition = function() {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
moduleArguments = arguments,
|
||
|
|
query = moduleArguments[0],
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
methodInvoked = (typeof query === 'string'),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function(index) {
|
||
|
|
var
|
||
|
|
$module = $(this),
|
||
|
|
element = this,
|
||
|
|
|
||
|
|
// set at run time
|
||
|
|
settings,
|
||
|
|
instance,
|
||
|
|
|
||
|
|
error,
|
||
|
|
className,
|
||
|
|
metadata,
|
||
|
|
animationStart,
|
||
|
|
animationEnd,
|
||
|
|
animationName,
|
||
|
|
|
||
|
|
namespace,
|
||
|
|
moduleNamespace,
|
||
|
|
eventNamespace,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
|
||
|
|
// get full settings
|
||
|
|
settings = module.get.settings.apply(element, moduleArguments);
|
||
|
|
|
||
|
|
// shorthand
|
||
|
|
className = settings.className;
|
||
|
|
error = settings.error;
|
||
|
|
metadata = settings.metadata;
|
||
|
|
|
||
|
|
// define namespace
|
||
|
|
eventNamespace = '.' + settings.namespace;
|
||
|
|
moduleNamespace = 'module-' + settings.namespace;
|
||
|
|
instance = $module.data(moduleNamespace) || module;
|
||
|
|
|
||
|
|
// get vendor specific events
|
||
|
|
animationEnd = module.get.animationEndEvent();
|
||
|
|
animationName = module.get.animationName();
|
||
|
|
animationStart = module.get.animationStartEvent();
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
methodInvoked = module.invoke(query);
|
||
|
|
}
|
||
|
|
|
||
|
|
// method not invoked, lets run an animation
|
||
|
|
if(methodInvoked === false) {
|
||
|
|
module.verbose('Converted arguments into settings object', settings);
|
||
|
|
if(settings.interval) {
|
||
|
|
module.delay(settings.animate);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.animate();
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, instance)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module for', element);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing display type on next animation');
|
||
|
|
delete module.displayType;
|
||
|
|
},
|
||
|
|
|
||
|
|
forceRepaint: function() {
|
||
|
|
module.verbose('Forcing element repaint');
|
||
|
|
var
|
||
|
|
$parentElement = $module.parent(),
|
||
|
|
$nextElement = $module.next()
|
||
|
|
;
|
||
|
|
if($nextElement.length === 0) {
|
||
|
|
$module.detach().appendTo($parentElement);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module.detach().insertBefore($nextElement);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
repaint: function() {
|
||
|
|
module.verbose('Repainting element');
|
||
|
|
var
|
||
|
|
fakeAssignment = element.offsetWidth
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
delay: function(interval) {
|
||
|
|
var
|
||
|
|
isReverse = (settings.reverse === true),
|
||
|
|
shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward),
|
||
|
|
delay
|
||
|
|
;
|
||
|
|
interval = (typeof interval !== undefined)
|
||
|
|
? interval
|
||
|
|
: settings.interval
|
||
|
|
;
|
||
|
|
delay = (isReverse || shouldReverse)
|
||
|
|
? ($allModules.length - index) * settings.interval
|
||
|
|
: index * settings.interval
|
||
|
|
;
|
||
|
|
module.debug('Delaying animation by', delay);
|
||
|
|
setTimeout(module.animate, delay);
|
||
|
|
},
|
||
|
|
|
||
|
|
animate: function(overrideSettings) {
|
||
|
|
settings = overrideSettings || settings;
|
||
|
|
if(!module.is.supported()) {
|
||
|
|
module.error(error.support);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
module.debug('Preparing animation', settings.animation);
|
||
|
|
if(module.is.animating()) {
|
||
|
|
if(settings.queue) {
|
||
|
|
if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
|
||
|
|
module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.queue(settings.animation);
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if(!settings.allowRepeats && module.is.occurring()) {
|
||
|
|
module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('New animation started, completing previous early', settings.animation);
|
||
|
|
module.complete();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if( module.can.animate() ) {
|
||
|
|
module.set.animating(settings.animation);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noAnimation, settings.animation, element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
module.debug('Resetting animation to beginning conditions');
|
||
|
|
module.remove.animationCallbacks();
|
||
|
|
module.restore.conditions();
|
||
|
|
module.remove.animating();
|
||
|
|
},
|
||
|
|
|
||
|
|
queue: function(animation) {
|
||
|
|
module.debug('Queueing animation of', animation);
|
||
|
|
module.queuing = true;
|
||
|
|
$module
|
||
|
|
.one(animationEnd + '.queue' + eventNamespace, function() {
|
||
|
|
module.queuing = false;
|
||
|
|
module.repaint();
|
||
|
|
module.animate.apply(this, settings);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
complete: function (event) {
|
||
|
|
module.debug('Animation complete', settings.animation);
|
||
|
|
module.remove.completeCallback();
|
||
|
|
module.remove.failSafe();
|
||
|
|
if(!module.is.looping()) {
|
||
|
|
if( module.is.outward() ) {
|
||
|
|
module.verbose('Animation is outward, hiding element');
|
||
|
|
module.restore.conditions();
|
||
|
|
module.hide();
|
||
|
|
settings.onHide.call(this);
|
||
|
|
}
|
||
|
|
else if( module.is.inward() ) {
|
||
|
|
module.verbose('Animation is outward, showing element');
|
||
|
|
module.restore.conditions();
|
||
|
|
module.show();
|
||
|
|
settings.onShow.call(this);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.restore.conditions();
|
||
|
|
}
|
||
|
|
module.remove.animation();
|
||
|
|
module.remove.animating();
|
||
|
|
}
|
||
|
|
settings.onComplete.call(this);
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
direction: function(animation) {
|
||
|
|
var
|
||
|
|
hasDirection = false
|
||
|
|
;
|
||
|
|
animation = animation || settings.animation;
|
||
|
|
if(typeof animation === 'string') {
|
||
|
|
animation = animation.split(' ');
|
||
|
|
$.each(animation, function(index, word){
|
||
|
|
if(word === className.inward || word === className.outward) {
|
||
|
|
hasDirection = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return hasDirection;
|
||
|
|
},
|
||
|
|
inlineDisplay: function() {
|
||
|
|
var
|
||
|
|
style = $module.attr('style') || ''
|
||
|
|
;
|
||
|
|
return $.isArray(style.match(/display.*?;/, ''));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
animating: function(animation) {
|
||
|
|
animation = animation || settings.animation;
|
||
|
|
if(!module.is.animating()) {
|
||
|
|
module.save.conditions();
|
||
|
|
}
|
||
|
|
module.remove.direction();
|
||
|
|
module.remove.completeCallback();
|
||
|
|
if(module.can.transition() && !module.has.direction()) {
|
||
|
|
module.set.direction();
|
||
|
|
}
|
||
|
|
module.remove.hidden();
|
||
|
|
module.set.display();
|
||
|
|
$module
|
||
|
|
.addClass(className.animating + ' ' + className.transition + ' ' + animation)
|
||
|
|
.addClass(animation)
|
||
|
|
.one(animationEnd + '.complete' + eventNamespace, module.complete)
|
||
|
|
;
|
||
|
|
if(settings.useFailSafe) {
|
||
|
|
module.add.failSafe();
|
||
|
|
}
|
||
|
|
module.set.duration(settings.duration);
|
||
|
|
settings.onStart.call(this);
|
||
|
|
module.debug('Starting tween', animation, $module.attr('class'));
|
||
|
|
},
|
||
|
|
duration: function(animationName, duration) {
|
||
|
|
duration = duration || settings.duration;
|
||
|
|
duration = (typeof duration == 'number')
|
||
|
|
? duration + 'ms'
|
||
|
|
: duration
|
||
|
|
;
|
||
|
|
if(duration || duration === 0) {
|
||
|
|
module.verbose('Setting animation duration', duration);
|
||
|
|
$module
|
||
|
|
.css({
|
||
|
|
'-webkit-animation-duration': duration,
|
||
|
|
'-moz-animation-duration': duration,
|
||
|
|
'-ms-animation-duration': duration,
|
||
|
|
'-o-animation-duration': duration,
|
||
|
|
'animation-duration': duration
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
style = module.get.style(),
|
||
|
|
displayType = module.get.displayType(),
|
||
|
|
overrideStyle = style + 'display: ' + displayType + ' !important;'
|
||
|
|
;
|
||
|
|
$module.css('display', '');
|
||
|
|
module.refresh();
|
||
|
|
if( $module.css('display') !== displayType ) {
|
||
|
|
module.verbose('Setting inline visibility to', displayType);
|
||
|
|
$module
|
||
|
|
.attr('style', overrideStyle)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
direction: function() {
|
||
|
|
if($module.is(':visible') && !module.is.hidden()) {
|
||
|
|
module.debug('Automatically determining the direction of animation', 'Outward');
|
||
|
|
$module
|
||
|
|
.removeClass(className.inward)
|
||
|
|
.addClass(className.outward)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Automatically determining the direction of animation', 'Inward');
|
||
|
|
$module
|
||
|
|
.removeClass(className.outward)
|
||
|
|
.addClass(className.inward)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
looping: function() {
|
||
|
|
module.debug('Transition set to loop');
|
||
|
|
$module
|
||
|
|
.addClass(className.looping)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
hidden: function() {
|
||
|
|
if(!module.is.hidden()) {
|
||
|
|
$module
|
||
|
|
.addClass(className.transition)
|
||
|
|
.addClass(className.hidden)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if($module.css('display') !== 'none') {
|
||
|
|
module.verbose('Overriding default display to hide element');
|
||
|
|
$module
|
||
|
|
.css('display', 'none')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module
|
||
|
|
.addClass(className.transition)
|
||
|
|
.addClass(className.visible)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
displayType: function(displayType) {
|
||
|
|
$module.data(metadata.displayType, displayType);
|
||
|
|
},
|
||
|
|
transitionExists: function(animation, exists) {
|
||
|
|
$.fn.transition.exists[animation] = exists;
|
||
|
|
module.verbose('Saving existence of transition', animation, exists);
|
||
|
|
},
|
||
|
|
conditions: function() {
|
||
|
|
var
|
||
|
|
clasName = $module.attr('class') || false,
|
||
|
|
style = $module.attr('style') || ''
|
||
|
|
;
|
||
|
|
$module.removeClass(settings.animation);
|
||
|
|
module.remove.direction();
|
||
|
|
module.cache = {
|
||
|
|
className : $module.attr('class'),
|
||
|
|
style : module.get.style()
|
||
|
|
};
|
||
|
|
module.verbose('Saving original attributes', module.cache);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
restore: {
|
||
|
|
conditions: function() {
|
||
|
|
if(module.cache === undefined) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(module.cache.className) {
|
||
|
|
$module.attr('class', module.cache.className);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module.removeAttr('class');
|
||
|
|
}
|
||
|
|
if(module.cache.style) {
|
||
|
|
module.verbose('Restoring original style attribute', module.cache.style);
|
||
|
|
$module.attr('style', module.cache.style);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Clearing style attribute');
|
||
|
|
$module.removeAttr('style');
|
||
|
|
}
|
||
|
|
module.verbose('Restoring original attributes', module.cache);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
failSafe: function() {
|
||
|
|
var
|
||
|
|
duration = module.get.duration()
|
||
|
|
;
|
||
|
|
module.timer = setTimeout(function() {
|
||
|
|
$module.trigger(animationEnd);
|
||
|
|
}, duration + settings.failSafeDelay);
|
||
|
|
module.verbose('Adding fail safe timer', module.timer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
animating: function() {
|
||
|
|
$module.removeClass(className.animating);
|
||
|
|
},
|
||
|
|
animation: function() {
|
||
|
|
$module
|
||
|
|
.css({
|
||
|
|
'-webkit-animation' : '',
|
||
|
|
'-moz-animation' : '',
|
||
|
|
'-ms-animation' : '',
|
||
|
|
'-o-animation' : '',
|
||
|
|
'animation' : ''
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
animationCallbacks: function() {
|
||
|
|
module.remove.queueCallback();
|
||
|
|
module.remove.completeCallback();
|
||
|
|
},
|
||
|
|
queueCallback: function() {
|
||
|
|
$module.off('.queue' + eventNamespace)
|
||
|
|
},
|
||
|
|
completeCallback: function() {
|
||
|
|
$module.off('.complete' + eventNamespace);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
$module.css('display', '');
|
||
|
|
},
|
||
|
|
direction: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.inward)
|
||
|
|
.removeClass(className.outward)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
failSafe: function() {
|
||
|
|
module.verbose('Removing fail safe timer', module.timer);
|
||
|
|
if(module.timer) {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hidden: function() {
|
||
|
|
$module.removeClass(className.hidden);
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
$module.removeClass(className.visible);
|
||
|
|
},
|
||
|
|
looping: function() {
|
||
|
|
module.debug('Transitions are no longer looping');
|
||
|
|
if( module.is.looping() ) {
|
||
|
|
module.reset();
|
||
|
|
$module
|
||
|
|
.removeClass(className.looping)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
transition: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.visible)
|
||
|
|
.removeClass(className.hidden)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
get: {
|
||
|
|
settings: function(animation, duration, onComplete) {
|
||
|
|
// single settings object
|
||
|
|
if(typeof animation == 'object') {
|
||
|
|
return $.extend(true, {}, $.fn.transition.settings, animation);
|
||
|
|
}
|
||
|
|
// all arguments provided
|
||
|
|
else if(typeof onComplete == 'function') {
|
||
|
|
return $.extend({}, $.fn.transition.settings, {
|
||
|
|
animation : animation,
|
||
|
|
onComplete : onComplete,
|
||
|
|
duration : duration
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// only duration provided
|
||
|
|
else if(typeof duration == 'string' || typeof duration == 'number') {
|
||
|
|
return $.extend({}, $.fn.transition.settings, {
|
||
|
|
animation : animation,
|
||
|
|
duration : duration
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// duration is actually settings object
|
||
|
|
else if(typeof duration == 'object') {
|
||
|
|
return $.extend({}, $.fn.transition.settings, duration, {
|
||
|
|
animation : animation
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// duration is actually callback
|
||
|
|
else if(typeof duration == 'function') {
|
||
|
|
return $.extend({}, $.fn.transition.settings, {
|
||
|
|
animation : animation,
|
||
|
|
onComplete : duration
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// only animation provided
|
||
|
|
else {
|
||
|
|
return $.extend({}, $.fn.transition.settings, {
|
||
|
|
animation : animation
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return $.fn.transition.settings;
|
||
|
|
},
|
||
|
|
direction: function(animation) {
|
||
|
|
// quickest manually specified direction
|
||
|
|
animation = animation || settings.animation;
|
||
|
|
if(typeof animation === 'string') {
|
||
|
|
animation = animation.split(' ');
|
||
|
|
$.each(animation, function(index, word){
|
||
|
|
if(word === className.inward) {
|
||
|
|
return className.inward;
|
||
|
|
}
|
||
|
|
else if(word === className.outward) {
|
||
|
|
return className.outward;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// slower backup
|
||
|
|
if( !module.can.transition() ) {
|
||
|
|
return 'static';
|
||
|
|
}
|
||
|
|
if($module.is(':visible') && !module.is.hidden()) {
|
||
|
|
return className.outward;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return className.inward;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
duration: function(duration) {
|
||
|
|
duration = duration || settings.duration;
|
||
|
|
if(duration === false) {
|
||
|
|
duration = $module.css('animation-duration') || 0;
|
||
|
|
}
|
||
|
|
return (typeof duration === 'string')
|
||
|
|
? (duration.indexOf('ms') > -1)
|
||
|
|
? parseFloat(duration)
|
||
|
|
: parseFloat(duration) * 1000
|
||
|
|
: duration
|
||
|
|
;
|
||
|
|
},
|
||
|
|
displayType: function() {
|
||
|
|
if(settings.displayType) {
|
||
|
|
return settings.displayType;
|
||
|
|
}
|
||
|
|
if($module.data(metadata.displayType) === undefined) {
|
||
|
|
// create fake element to determine display state
|
||
|
|
module.can.transition(true);
|
||
|
|
}
|
||
|
|
return $module.data(metadata.displayType);
|
||
|
|
},
|
||
|
|
style: function() {
|
||
|
|
var
|
||
|
|
style = $module.attr('style') || ''
|
||
|
|
;
|
||
|
|
return style.replace(/display.*?;/, '');
|
||
|
|
},
|
||
|
|
transitionExists: function(animation) {
|
||
|
|
return $.fn.transition.exists[animation];
|
||
|
|
},
|
||
|
|
animationName: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('div'),
|
||
|
|
animations = {
|
||
|
|
'animation' :'animationName',
|
||
|
|
'OAnimation' :'oAnimationName',
|
||
|
|
'MozAnimation' :'mozAnimationName',
|
||
|
|
'WebkitAnimation' :'webkitAnimationName'
|
||
|
|
},
|
||
|
|
animation
|
||
|
|
;
|
||
|
|
for(animation in animations){
|
||
|
|
if( element.style[animation] !== undefined ){
|
||
|
|
return animations[animation];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
animationStartEvent: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('div'),
|
||
|
|
animations = {
|
||
|
|
'animation' :'animationstart',
|
||
|
|
'OAnimation' :'oAnimationStart',
|
||
|
|
'MozAnimation' :'mozAnimationStart',
|
||
|
|
'WebkitAnimation' :'webkitAnimationStart'
|
||
|
|
},
|
||
|
|
animation
|
||
|
|
;
|
||
|
|
for(animation in animations){
|
||
|
|
if( element.style[animation] !== undefined ){
|
||
|
|
return animations[animation];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
animationEndEvent: function() {
|
||
|
|
var
|
||
|
|
element = document.createElement('div'),
|
||
|
|
animations = {
|
||
|
|
'animation' :'animationend',
|
||
|
|
'OAnimation' :'oAnimationEnd',
|
||
|
|
'MozAnimation' :'mozAnimationEnd',
|
||
|
|
'WebkitAnimation' :'webkitAnimationEnd'
|
||
|
|
},
|
||
|
|
animation
|
||
|
|
;
|
||
|
|
for(animation in animations){
|
||
|
|
if( element.style[animation] !== undefined ){
|
||
|
|
return animations[animation];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
can: {
|
||
|
|
transition: function(forced) {
|
||
|
|
var
|
||
|
|
elementClass = $module.attr('class'),
|
||
|
|
tagName = $module.prop('tagName'),
|
||
|
|
animation = settings.animation,
|
||
|
|
transitionExists = module.get.transitionExists(animation),
|
||
|
|
$clone,
|
||
|
|
currentAnimation,
|
||
|
|
inAnimation,
|
||
|
|
directionExists,
|
||
|
|
displayType
|
||
|
|
;
|
||
|
|
if( transitionExists === undefined || forced) {
|
||
|
|
module.verbose('Determining whether animation exists');
|
||
|
|
$clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
|
||
|
|
currentAnimation = $clone
|
||
|
|
.addClass(animation)
|
||
|
|
.removeClass(className.inward)
|
||
|
|
.removeClass(className.outward)
|
||
|
|
.addClass(className.animating)
|
||
|
|
.addClass(className.transition)
|
||
|
|
.css(animationName)
|
||
|
|
;
|
||
|
|
inAnimation = $clone
|
||
|
|
.addClass(className.inward)
|
||
|
|
.css(animationName)
|
||
|
|
;
|
||
|
|
displayType = $clone
|
||
|
|
.attr('class', elementClass)
|
||
|
|
.removeAttr('style')
|
||
|
|
.removeClass(className.hidden)
|
||
|
|
.removeClass(className.visible)
|
||
|
|
.show()
|
||
|
|
.css('display')
|
||
|
|
;
|
||
|
|
module.verbose('Determining final display state', displayType);
|
||
|
|
module.save.displayType(displayType);
|
||
|
|
|
||
|
|
$clone.remove();
|
||
|
|
if(currentAnimation != inAnimation) {
|
||
|
|
module.debug('Direction exists for animation', animation);
|
||
|
|
directionExists = true;
|
||
|
|
}
|
||
|
|
else if(currentAnimation == 'none' || !currentAnimation) {
|
||
|
|
module.debug('No animation defined in css', animation);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Static animation found', animation, displayType);
|
||
|
|
directionExists = false;
|
||
|
|
}
|
||
|
|
module.save.transitionExists(animation, directionExists);
|
||
|
|
}
|
||
|
|
return (transitionExists !== undefined)
|
||
|
|
? transitionExists
|
||
|
|
: directionExists
|
||
|
|
;
|
||
|
|
},
|
||
|
|
animate: function() {
|
||
|
|
// can transition does not return a value if animation does not exist
|
||
|
|
return (module.can.transition() !== undefined);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
animating: function() {
|
||
|
|
return $module.hasClass(className.animating);
|
||
|
|
},
|
||
|
|
inward: function() {
|
||
|
|
return $module.hasClass(className.inward);
|
||
|
|
},
|
||
|
|
outward: function() {
|
||
|
|
return $module.hasClass(className.outward);
|
||
|
|
},
|
||
|
|
looping: function() {
|
||
|
|
return $module.hasClass(className.looping);
|
||
|
|
},
|
||
|
|
occurring: function(animation) {
|
||
|
|
animation = animation || settings.animation;
|
||
|
|
animation = '.' + animation.replace(' ', '.');
|
||
|
|
return ( $module.filter(animation).length > 0 );
|
||
|
|
},
|
||
|
|
visible: function() {
|
||
|
|
return $module.is(':visible');
|
||
|
|
},
|
||
|
|
hidden: function() {
|
||
|
|
return $module.css('visibility') === 'hidden';
|
||
|
|
},
|
||
|
|
supported: function() {
|
||
|
|
return(animationName !== false && animationEnd !== false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function() {
|
||
|
|
module.verbose('Hiding element');
|
||
|
|
if( module.is.animating() ) {
|
||
|
|
module.reset();
|
||
|
|
}
|
||
|
|
module.remove.display();
|
||
|
|
module.remove.visible();
|
||
|
|
module.set.hidden();
|
||
|
|
module.repaint();
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(display) {
|
||
|
|
module.verbose('Showing element', display);
|
||
|
|
module.remove.hidden();
|
||
|
|
module.set.visible();
|
||
|
|
module.set.display();
|
||
|
|
module.repaint();
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function() {
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
module.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
stop: function() {
|
||
|
|
module.debug('Stopping current animation');
|
||
|
|
$module.trigger(animationEnd);
|
||
|
|
},
|
||
|
|
|
||
|
|
stopAll: function() {
|
||
|
|
module.debug('Stopping all animation');
|
||
|
|
module.remove.queueCallback();
|
||
|
|
$module.trigger(animationEnd);
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: {
|
||
|
|
queue: function() {
|
||
|
|
module.debug('Clearing animation queue')
|
||
|
|
module.remove.queueCallback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
enable: function() {
|
||
|
|
module.verbose('Starting animation');
|
||
|
|
$module.removeClass(className.disabled);
|
||
|
|
},
|
||
|
|
|
||
|
|
disable: function() {
|
||
|
|
module.debug('Stopping animation');
|
||
|
|
$module.addClass(className.disabled);
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// modified for transition to return invoke success
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return (found !== undefined)
|
||
|
|
? found
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
module.initialize();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Records if CSS transition is available
|
||
|
|
$.fn.transition.exists = {};
|
||
|
|
|
||
|
|
$.fn.transition.settings = {
|
||
|
|
|
||
|
|
// module info
|
||
|
|
name : 'Transition',
|
||
|
|
|
||
|
|
// debug content outputted to console
|
||
|
|
debug : false,
|
||
|
|
|
||
|
|
// verbose debug output
|
||
|
|
verbose : true,
|
||
|
|
|
||
|
|
// performance data output
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
// event namespace
|
||
|
|
namespace : 'transition',
|
||
|
|
|
||
|
|
// delay between animations in group
|
||
|
|
interval : 0,
|
||
|
|
|
||
|
|
// whether group animations should be reversed
|
||
|
|
reverse : 'auto',
|
||
|
|
|
||
|
|
// animation callback event
|
||
|
|
onStart : function() {},
|
||
|
|
onComplete : function() {},
|
||
|
|
onShow : function() {},
|
||
|
|
onHide : function() {},
|
||
|
|
|
||
|
|
// whether timeout should be used to ensure callback fires in cases animationend does not
|
||
|
|
useFailSafe : true,
|
||
|
|
|
||
|
|
// delay in ms for fail safe
|
||
|
|
failSafeDelay : 100,
|
||
|
|
|
||
|
|
// whether EXACT animation can occur twice in a row
|
||
|
|
allowRepeats : false,
|
||
|
|
|
||
|
|
// Override final display type on visible
|
||
|
|
displayType : false,
|
||
|
|
|
||
|
|
// animation duration
|
||
|
|
animation : 'fade',
|
||
|
|
duration : false,
|
||
|
|
|
||
|
|
// new animations will occur after previous ones
|
||
|
|
queue : true,
|
||
|
|
|
||
|
|
metadata : {
|
||
|
|
displayType: 'display'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
animating : 'animating',
|
||
|
|
disabled : 'disabled',
|
||
|
|
hidden : 'hidden',
|
||
|
|
inward : 'in',
|
||
|
|
loading : 'loading',
|
||
|
|
looping : 'looping',
|
||
|
|
outward : 'out',
|
||
|
|
transition : 'transition',
|
||
|
|
visible : 'visible'
|
||
|
|
},
|
||
|
|
|
||
|
|
// possible errors
|
||
|
|
error: {
|
||
|
|
noAnimation : 'There is no css animation matching the one you specified.',
|
||
|
|
repeated : 'That animation is already occurring, cancelling repeated animation',
|
||
|
|
method : 'The method you called is not defined',
|
||
|
|
support : 'This browser does not support CSS animations'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Video
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributorss
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.video = function(parameters) {
|
||
|
|
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.video.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.video.settings),
|
||
|
|
|
||
|
|
selector = settings.selector,
|
||
|
|
className = settings.className,
|
||
|
|
error = settings.error,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
templates = settings.templates,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$window = $(window),
|
||
|
|
$module = $(this),
|
||
|
|
$placeholder = $module.find(selector.placeholder),
|
||
|
|
$playButton = $module.find(selector.playButton),
|
||
|
|
$embed = $module.find(selector.embed),
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing video');
|
||
|
|
module.create();
|
||
|
|
$placeholder
|
||
|
|
.on('click' + eventNamespace, module.play)
|
||
|
|
;
|
||
|
|
$playButton
|
||
|
|
.on('click' + eventNamespace, module.play)
|
||
|
|
;
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
create: function() {
|
||
|
|
var
|
||
|
|
image = $module.data(metadata.image),
|
||
|
|
html = templates.video(image)
|
||
|
|
;
|
||
|
|
$module.html(html);
|
||
|
|
module.refresh();
|
||
|
|
if(!image) {
|
||
|
|
module.play();
|
||
|
|
}
|
||
|
|
module.debug('Creating html for video element', html);
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous instance of video');
|
||
|
|
module.reset();
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$placeholder
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$playButton
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache');
|
||
|
|
$placeholder = $module.find(selector.placeholder);
|
||
|
|
$playButton = $module.find(selector.playButton);
|
||
|
|
$embed = $module.find(selector.embed);
|
||
|
|
},
|
||
|
|
|
||
|
|
// sets new video
|
||
|
|
change: function(source, id, url) {
|
||
|
|
module.debug('Changing video to ', source, id, url);
|
||
|
|
$module
|
||
|
|
.data(metadata.source, source)
|
||
|
|
.data(metadata.id, id)
|
||
|
|
.data(metadata.url, url)
|
||
|
|
;
|
||
|
|
settings.onChange();
|
||
|
|
},
|
||
|
|
|
||
|
|
// clears video embed
|
||
|
|
reset: function() {
|
||
|
|
module.debug('Clearing video embed and showing placeholder');
|
||
|
|
$module
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
$embed
|
||
|
|
.html(' ')
|
||
|
|
;
|
||
|
|
$placeholder
|
||
|
|
.show()
|
||
|
|
;
|
||
|
|
settings.onReset();
|
||
|
|
},
|
||
|
|
|
||
|
|
// plays current video
|
||
|
|
play: function() {
|
||
|
|
module.debug('Playing video');
|
||
|
|
var
|
||
|
|
source = $module.data(metadata.source) || false,
|
||
|
|
url = $module.data(metadata.url) || false,
|
||
|
|
id = $module.data(metadata.id) || false
|
||
|
|
;
|
||
|
|
$embed
|
||
|
|
.html( module.generate.html(source, id, url) )
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
settings.onPlay();
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
source: function(url) {
|
||
|
|
if(typeof url !== 'string') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if(url.search('youtube.com') !== -1) {
|
||
|
|
return 'youtube';
|
||
|
|
}
|
||
|
|
else if(url.search('vimeo.com') !== -1) {
|
||
|
|
return 'vimeo';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
id: function(url) {
|
||
|
|
if(url.match(settings.regExp.youtube)) {
|
||
|
|
return url.match(settings.regExp.youtube)[1];
|
||
|
|
}
|
||
|
|
else if(url.match(settings.regExp.vimeo)) {
|
||
|
|
return url.match(settings.regExp.vimeo)[2];
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
generate: {
|
||
|
|
// generates iframe html
|
||
|
|
html: function(source, id, url) {
|
||
|
|
module.debug('Generating embed html');
|
||
|
|
var
|
||
|
|
html
|
||
|
|
;
|
||
|
|
// allow override of settings
|
||
|
|
source = source || settings.source;
|
||
|
|
id = id || settings.id;
|
||
|
|
if((source && id) || url) {
|
||
|
|
if(!source || !id) {
|
||
|
|
source = module.get.source(url);
|
||
|
|
id = module.get.id(url);
|
||
|
|
}
|
||
|
|
if(source == 'vimeo') {
|
||
|
|
html = ''
|
||
|
|
+ '<iframe src="//player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
|
||
|
|
+ ' width="100%" height="100%"'
|
||
|
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(source == 'youtube') {
|
||
|
|
html = ''
|
||
|
|
+ '<iframe src="//www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
|
||
|
|
+ ' width="100%" height="100%"'
|
||
|
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.noVideo);
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
},
|
||
|
|
|
||
|
|
// generate url parameters
|
||
|
|
url: function(source) {
|
||
|
|
var
|
||
|
|
api = (settings.api)
|
||
|
|
? 1
|
||
|
|
: 0,
|
||
|
|
autoplay = (settings.autoplay === 'auto')
|
||
|
|
? ($module.data('image') !== undefined)
|
||
|
|
: settings.autoplay,
|
||
|
|
hd = (settings.hd)
|
||
|
|
? 1
|
||
|
|
: 0,
|
||
|
|
showUI = (settings.showUI)
|
||
|
|
? 1
|
||
|
|
: 0,
|
||
|
|
// opposite used for some params
|
||
|
|
hideUI = !(settings.showUI)
|
||
|
|
? 1
|
||
|
|
: 0,
|
||
|
|
url = ''
|
||
|
|
;
|
||
|
|
if(source == 'vimeo') {
|
||
|
|
url = ''
|
||
|
|
+ 'api=' + api
|
||
|
|
+ '&title=' + showUI
|
||
|
|
+ '&byline=' + showUI
|
||
|
|
+ '&portrait=' + showUI
|
||
|
|
+ '&autoplay=' + autoplay
|
||
|
|
;
|
||
|
|
if(settings.color) {
|
||
|
|
url += '&color=' + settings.color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(source == 'ustream') {
|
||
|
|
url = ''
|
||
|
|
+ 'autoplay=' + autoplay
|
||
|
|
;
|
||
|
|
if(settings.color) {
|
||
|
|
url += '&color=' + settings.color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(source == 'youtube') {
|
||
|
|
url = ''
|
||
|
|
+ 'enablejsapi=' + api
|
||
|
|
+ '&autoplay=' + autoplay
|
||
|
|
+ '&autohide=' + hideUI
|
||
|
|
+ '&hq=' + hd
|
||
|
|
+ '&modestbranding=1'
|
||
|
|
;
|
||
|
|
if(settings.color) {
|
||
|
|
url += '&color=' + settings.color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return url;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.video.settings = {
|
||
|
|
|
||
|
|
name : 'Video',
|
||
|
|
namespace : 'video',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
metadata : {
|
||
|
|
id : 'id',
|
||
|
|
image : 'image',
|
||
|
|
source : 'source',
|
||
|
|
url : 'url'
|
||
|
|
},
|
||
|
|
|
||
|
|
source : false,
|
||
|
|
url : false,
|
||
|
|
id : false,
|
||
|
|
|
||
|
|
aspectRatio : (16/9),
|
||
|
|
|
||
|
|
onPlay : function(){},
|
||
|
|
onReset : function(){},
|
||
|
|
onChange : function(){},
|
||
|
|
|
||
|
|
// callbacks not coded yet (needs to use jsapi)
|
||
|
|
onPause : function() {},
|
||
|
|
onStop : function() {},
|
||
|
|
|
||
|
|
width : 'auto',
|
||
|
|
height : 'auto',
|
||
|
|
|
||
|
|
autoplay : 'auto',
|
||
|
|
color : '#442359',
|
||
|
|
hd : true,
|
||
|
|
showUI : false,
|
||
|
|
api : true,
|
||
|
|
|
||
|
|
regExp : {
|
||
|
|
youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/,
|
||
|
|
vimeo : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
|
||
|
|
},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
noVideo : 'No video specified',
|
||
|
|
method : 'The method you called is not defined'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
active : 'active'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
embed : '.embed',
|
||
|
|
placeholder : '.placeholder',
|
||
|
|
playButton : '.play'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.video.settings.templates = {
|
||
|
|
video: function(image) {
|
||
|
|
var
|
||
|
|
html = ''
|
||
|
|
;
|
||
|
|
if(image) {
|
||
|
|
html += ''
|
||
|
|
+ '<i class="video play icon"></i>'
|
||
|
|
+ '<img class="placeholder" src="' + image + '">'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
html += '<div class="embed"></div>';
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - API
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.api = $.fn.api = function(parameters) {
|
||
|
|
|
||
|
|
var
|
||
|
|
// use window context if none specified
|
||
|
|
$allModules = $.isFunction(this)
|
||
|
|
? $(window)
|
||
|
|
: $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.api.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.api.settings),
|
||
|
|
|
||
|
|
// internal aliases
|
||
|
|
namespace = settings.namespace,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
selector = settings.selector,
|
||
|
|
error = settings.error,
|
||
|
|
className = settings.className,
|
||
|
|
|
||
|
|
// define namespaces for modules
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
// element that creates request
|
||
|
|
$module = $(this),
|
||
|
|
$form = $module.closest(selector.form),
|
||
|
|
|
||
|
|
// context used for state
|
||
|
|
$context = (settings.stateContext)
|
||
|
|
? $(settings.stateContext)
|
||
|
|
: $module,
|
||
|
|
|
||
|
|
// request details
|
||
|
|
ajaxSettings,
|
||
|
|
requestSettings,
|
||
|
|
url,
|
||
|
|
data,
|
||
|
|
|
||
|
|
// standard module
|
||
|
|
element = this,
|
||
|
|
context = $context.get(),
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
var
|
||
|
|
triggerEvent = module.get.event()
|
||
|
|
;
|
||
|
|
// bind events
|
||
|
|
if(!methodInvoked) {
|
||
|
|
if( triggerEvent ) {
|
||
|
|
module.debug('Attaching API events to element', triggerEvent);
|
||
|
|
$module
|
||
|
|
.on(triggerEvent + eventNamespace, module.event.trigger)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(settings.on == 'now') {
|
||
|
|
module.debug('Querying API now', triggerEvent);
|
||
|
|
module.query();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, instance)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module for', element);
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
query: function() {
|
||
|
|
|
||
|
|
if(module.is.disabled()) {
|
||
|
|
module.debug('Element is disabled API request aborted');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// determine if an api event already occurred
|
||
|
|
if(module.is.loading() && settings.throttle === 0 ) {
|
||
|
|
module.debug('Cancelling request, previous request is still pending');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// pass element metadata to url (value, text)
|
||
|
|
if(settings.defaultData) {
|
||
|
|
$.extend(true, settings.urlData, module.get.defaultData());
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add form content
|
||
|
|
if(settings.serializeForm !== false || $context.is('form')) {
|
||
|
|
if(settings.serializeForm == 'json') {
|
||
|
|
$.extend(true, settings.data, module.get.formData());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.data = module.get.formData();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// call beforesend and get any settings changes
|
||
|
|
requestSettings = module.get.settings();
|
||
|
|
|
||
|
|
// check if before send cancelled request
|
||
|
|
if(requestSettings === false) {
|
||
|
|
module.cancelled = true;
|
||
|
|
module.error(error.beforeSend);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.cancelled = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(settings.url) {
|
||
|
|
// override with url if specified
|
||
|
|
module.debug('Using specified url', url);
|
||
|
|
url = module.add.urlData( settings.url );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// otherwise find url from api endpoints
|
||
|
|
url = module.add.urlData( module.get.templateURL() );
|
||
|
|
module.debug('Added URL Data to url', url);
|
||
|
|
}
|
||
|
|
|
||
|
|
// exit conditions reached, missing url parameters
|
||
|
|
if( !url ) {
|
||
|
|
if( module.is.form() ) {
|
||
|
|
url = $module.attr('action') || '';
|
||
|
|
module.debug('No url or action specified, defaulting to form action', url);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.missingURL, settings.action);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// add loading state
|
||
|
|
module.set.loading();
|
||
|
|
|
||
|
|
// look for jQuery ajax parameters in settings
|
||
|
|
ajaxSettings = $.extend(true, {}, settings, {
|
||
|
|
type : settings.method || settings.type,
|
||
|
|
data : data,
|
||
|
|
url : settings.base + url,
|
||
|
|
beforeSend : settings.beforeXHR,
|
||
|
|
success : function() {},
|
||
|
|
failure : function() {},
|
||
|
|
complete : function() {}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.debug('Querying URL', ajaxSettings.url);
|
||
|
|
module.debug('Sending data', data, ajaxSettings.method);
|
||
|
|
module.verbose('Using AJAX settings', ajaxSettings);
|
||
|
|
|
||
|
|
if( module.is.loading() ) {
|
||
|
|
// throttle additional requests
|
||
|
|
module.timer = setTimeout(function() {
|
||
|
|
module.request = module.create.request();
|
||
|
|
module.xhr = module.create.xhr();
|
||
|
|
settings.onRequest.call(context, module.request, module.xhr);
|
||
|
|
}, settings.throttle);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// immediately on first request
|
||
|
|
module.request = module.create.request();
|
||
|
|
module.xhr = module.create.xhr();
|
||
|
|
settings.onRequest.call(context, module.request, module.xhr);
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
is: {
|
||
|
|
disabled: function() {
|
||
|
|
return ($module.filter(settings.filter).length > 0);
|
||
|
|
},
|
||
|
|
form: function() {
|
||
|
|
return $module.is('form');
|
||
|
|
},
|
||
|
|
input: function() {
|
||
|
|
return $module.is('input');
|
||
|
|
},
|
||
|
|
loading: function() {
|
||
|
|
return (module.request && module.request.state() == 'pending');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
was: {
|
||
|
|
cancelled: function() {
|
||
|
|
return (module.cancelled || false);
|
||
|
|
},
|
||
|
|
succesful: function() {
|
||
|
|
return (module.request && module.request.state() == 'resolved');
|
||
|
|
},
|
||
|
|
failure: function() {
|
||
|
|
return (module.request && module.request.state() == 'rejected');
|
||
|
|
},
|
||
|
|
complete: function() {
|
||
|
|
return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
urlData: function(url, urlData) {
|
||
|
|
var
|
||
|
|
requiredVariables,
|
||
|
|
optionalVariables
|
||
|
|
;
|
||
|
|
if(url) {
|
||
|
|
requiredVariables = url.match(settings.regExp.required);
|
||
|
|
optionalVariables = url.match(settings.regExp.optional);
|
||
|
|
urlData = urlData || settings.urlData;
|
||
|
|
if(requiredVariables) {
|
||
|
|
module.debug('Looking for required URL variables', requiredVariables);
|
||
|
|
$.each(requiredVariables, function(index, templatedString) {
|
||
|
|
var
|
||
|
|
// allow legacy {$var} style
|
||
|
|
variable = (templatedString.indexOf('$') !== -1)
|
||
|
|
? templatedString.substr(2, templatedString.length - 3)
|
||
|
|
: templatedString.substr(1, templatedString.length - 2),
|
||
|
|
value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
|
||
|
|
? urlData[variable]
|
||
|
|
: ($module.data(variable) !== undefined)
|
||
|
|
? $module.data(variable)
|
||
|
|
: ($context.data(variable) !== undefined)
|
||
|
|
? $context.data(variable)
|
||
|
|
: urlData[variable]
|
||
|
|
;
|
||
|
|
// remove value
|
||
|
|
if(value === undefined) {
|
||
|
|
module.error(error.requiredParameter, variable, url);
|
||
|
|
url = false;
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Found required variable', variable, value);
|
||
|
|
url = url.replace(templatedString, value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if(optionalVariables) {
|
||
|
|
module.debug('Looking for optional URL variables', requiredVariables);
|
||
|
|
$.each(optionalVariables, function(index, templatedString) {
|
||
|
|
var
|
||
|
|
// allow legacy {/$var} style
|
||
|
|
variable = (templatedString.indexOf('$') !== -1)
|
||
|
|
? templatedString.substr(3, templatedString.length - 4)
|
||
|
|
: templatedString.substr(2, templatedString.length - 3),
|
||
|
|
value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
|
||
|
|
? urlData[variable]
|
||
|
|
: ($module.data(variable) !== undefined)
|
||
|
|
? $module.data(variable)
|
||
|
|
: ($context.data(variable) !== undefined)
|
||
|
|
? $context.data(variable)
|
||
|
|
: urlData[variable]
|
||
|
|
;
|
||
|
|
// optional replacement
|
||
|
|
if(value !== undefined) {
|
||
|
|
module.verbose('Optional variable Found', variable, value);
|
||
|
|
url = url.replace(templatedString, value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Optional variable not found', variable);
|
||
|
|
// remove preceding slash if set
|
||
|
|
if(url.indexOf('/' + templatedString) !== -1) {
|
||
|
|
url = url.replace('/' + templatedString, '');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
url = url.replace(templatedString, '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return url;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
trigger: function(event) {
|
||
|
|
module.query();
|
||
|
|
if(event.type == 'submit' || event.type == 'click') {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xhr: {
|
||
|
|
always: function() {
|
||
|
|
// calculate if loading time was below minimum threshold
|
||
|
|
},
|
||
|
|
done: function(response) {
|
||
|
|
var
|
||
|
|
context = this,
|
||
|
|
elapsedTime = (new Date().getTime() - time),
|
||
|
|
timeLeft = (settings.loadingDuration - elapsedTime)
|
||
|
|
;
|
||
|
|
timeLeft = (timeLeft > 0)
|
||
|
|
? timeLeft
|
||
|
|
: 0
|
||
|
|
;
|
||
|
|
setTimeout(function() {
|
||
|
|
module.request.resolveWith(context, [response]);
|
||
|
|
}, timeLeft);
|
||
|
|
},
|
||
|
|
fail: function(xhr, status, httpMessage) {
|
||
|
|
var
|
||
|
|
context = this,
|
||
|
|
elapsedTime = (new Date().getTime() - time),
|
||
|
|
timeLeft = (settings.loadingDuration - elapsedTime)
|
||
|
|
;
|
||
|
|
timeLeft = (timeLeft > 0)
|
||
|
|
? timeLeft
|
||
|
|
: 0
|
||
|
|
;
|
||
|
|
// page triggers abort on navigation, dont show error
|
||
|
|
setTimeout(function() {
|
||
|
|
if(status !== 'abort') {
|
||
|
|
module.request.rejectWith(context, [xhr, status, httpMessage]);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.reset();
|
||
|
|
}
|
||
|
|
}, timeLeft);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
request: {
|
||
|
|
complete: function(response) {
|
||
|
|
module.remove.loading();
|
||
|
|
settings.onComplete.call(context, response, $module);
|
||
|
|
},
|
||
|
|
done: function(response) {
|
||
|
|
module.debug('API Response Received', response);
|
||
|
|
if(settings.dataType == 'json') {
|
||
|
|
if( $.isFunction(settings.successTest) ) {
|
||
|
|
module.debug('Checking JSON returned success', settings.successTest, response);
|
||
|
|
if( settings.successTest(response) ) {
|
||
|
|
settings.onSuccess.call(context, response, $module);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('JSON test specified by user and response failed', response);
|
||
|
|
settings.onFailure.call(context, response, $module);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.onSuccess.call(context, response, $module);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.onSuccess.call(context, response, $module);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, status, httpMessage) {
|
||
|
|
var
|
||
|
|
errorMessage = (settings.error[status] !== undefined)
|
||
|
|
? settings.error[status]
|
||
|
|
: httpMessage,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
// let em know unless request aborted
|
||
|
|
if(xhr !== undefined) {
|
||
|
|
// readyState 4 = done, anything less is not really sent
|
||
|
|
if(xhr.readyState !== undefined && xhr.readyState == 4) {
|
||
|
|
|
||
|
|
// if http status code returned and json returned error, look for it
|
||
|
|
if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {
|
||
|
|
module.error(error.statusMessage + httpMessage, ajaxSettings.url);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(status == 'error' && settings.dataType == 'json') {
|
||
|
|
try {
|
||
|
|
response = $.parseJSON(xhr.responseText);
|
||
|
|
if(response && response.error !== undefined) {
|
||
|
|
errorMessage = response.error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch(e) {
|
||
|
|
module.error(error.JSONParse);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.remove.loading();
|
||
|
|
module.set.error();
|
||
|
|
// show error state only for duration specified in settings
|
||
|
|
if(settings.errorDuration) {
|
||
|
|
setTimeout(module.remove.error, settings.errorDuration);
|
||
|
|
}
|
||
|
|
module.debug('API Request error:', errorMessage);
|
||
|
|
settings.onError.call(context, errorMessage, $module);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.onAbort.call(context, errorMessage, $module);
|
||
|
|
module.debug('Request Aborted (Most likely caused by page change or CORS Policy)', status, httpMessage);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
create: {
|
||
|
|
request: function() {
|
||
|
|
return $.Deferred()
|
||
|
|
.always(module.event.request.complete)
|
||
|
|
.done(module.event.request.done)
|
||
|
|
.fail(module.event.request.error)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
xhr: function() {
|
||
|
|
return $.ajax(ajaxSettings)
|
||
|
|
.always(module.event.xhr.always)
|
||
|
|
.done(module.event.xhr.done)
|
||
|
|
.fail(module.event.xhr.fail)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
error: function() {
|
||
|
|
module.verbose('Adding error state to element', $context);
|
||
|
|
$context.addClass(className.error);
|
||
|
|
},
|
||
|
|
loading: function() {
|
||
|
|
module.verbose('Adding loading state to element', $context);
|
||
|
|
$context.addClass(className.loading);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
error: function() {
|
||
|
|
module.verbose('Removing error state from element', $context);
|
||
|
|
$context.removeClass(className.error);
|
||
|
|
},
|
||
|
|
loading: function() {
|
||
|
|
module.verbose('Removing loading state from element', $context);
|
||
|
|
$context.removeClass(className.loading);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
request: function() {
|
||
|
|
return module.request || false;
|
||
|
|
},
|
||
|
|
xhr: function() {
|
||
|
|
return module.xhr || false;
|
||
|
|
},
|
||
|
|
settings: function() {
|
||
|
|
var
|
||
|
|
runSettings
|
||
|
|
;
|
||
|
|
runSettings = settings.beforeSend.call($module, settings);
|
||
|
|
if(runSettings) {
|
||
|
|
if(runSettings.success !== undefined) {
|
||
|
|
module.debug('Legacy success callback detected', runSettings);
|
||
|
|
module.error(error.legacyParameters, runSettings.success);
|
||
|
|
runSettings.onSuccess = runSettings.success;
|
||
|
|
}
|
||
|
|
if(runSettings.failure !== undefined) {
|
||
|
|
module.debug('Legacy failure callback detected', runSettings);
|
||
|
|
module.error(error.legacyParameters, runSettings.failure);
|
||
|
|
runSettings.onFailure = runSettings.failure;
|
||
|
|
}
|
||
|
|
if(runSettings.complete !== undefined) {
|
||
|
|
module.debug('Legacy complete callback detected', runSettings);
|
||
|
|
module.error(error.legacyParameters, runSettings.complete);
|
||
|
|
runSettings.onComplete = runSettings.complete;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(runSettings === undefined) {
|
||
|
|
module.error(error.noReturnedValue);
|
||
|
|
}
|
||
|
|
return (runSettings !== undefined)
|
||
|
|
? runSettings
|
||
|
|
: settings
|
||
|
|
;
|
||
|
|
},
|
||
|
|
defaultData: function() {
|
||
|
|
var
|
||
|
|
data = {}
|
||
|
|
;
|
||
|
|
if( !$.isWindow(element) ) {
|
||
|
|
if( module.is.input() ) {
|
||
|
|
data.value = $module.val();
|
||
|
|
}
|
||
|
|
else if( !module.is.form() ) {
|
||
|
|
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
data.text = $module.text();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
},
|
||
|
|
event: function() {
|
||
|
|
if( $.isWindow(element) || settings.on == 'now' ) {
|
||
|
|
module.debug('API called without element, no events attached');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if(settings.on == 'auto') {
|
||
|
|
if( $module.is('input') ) {
|
||
|
|
return (element.oninput !== undefined)
|
||
|
|
? 'input'
|
||
|
|
: (element.onpropertychange !== undefined)
|
||
|
|
? 'propertychange'
|
||
|
|
: 'keyup'
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if( $module.is('form') ) {
|
||
|
|
return 'submit';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return 'click';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings.on;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
formData: function() {
|
||
|
|
var
|
||
|
|
formData
|
||
|
|
;
|
||
|
|
if($module.serializeObject !== undefined) {
|
||
|
|
formData = $form.serializeObject();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.missingSerialize);
|
||
|
|
formData = $form.serialize();
|
||
|
|
}
|
||
|
|
module.debug('Retrieved form data', formData);
|
||
|
|
return formData;
|
||
|
|
},
|
||
|
|
templateURL: function(action) {
|
||
|
|
var
|
||
|
|
url
|
||
|
|
;
|
||
|
|
action = action || $module.data(metadata.action) || settings.action || false;
|
||
|
|
if(action) {
|
||
|
|
module.debug('Looking up url for action', action, settings.api);
|
||
|
|
if(settings.api[action] !== undefined) {
|
||
|
|
url = settings.api[action];
|
||
|
|
module.debug('Found template url', url);
|
||
|
|
}
|
||
|
|
else if( !module.is.form() ) {
|
||
|
|
module.error(error.missingAction, settings.action, settings.api);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return url;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
abort: function() {
|
||
|
|
var
|
||
|
|
xhr = module.get.xhr()
|
||
|
|
;
|
||
|
|
if( xhr && xhr.state() !== 'resolved') {
|
||
|
|
module.debug('Cancelling API request');
|
||
|
|
xhr.abort();
|
||
|
|
module.request.rejectWith(settings.apiSettings);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// reset state
|
||
|
|
reset: function() {
|
||
|
|
module.remove.error();
|
||
|
|
module.remove.loading();
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
//'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.api.settings = {
|
||
|
|
|
||
|
|
name : 'API',
|
||
|
|
namespace : 'api',
|
||
|
|
|
||
|
|
debug : true,
|
||
|
|
verbose : false,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
// event binding
|
||
|
|
on : 'auto',
|
||
|
|
filter : '.disabled',
|
||
|
|
stateContext : false,
|
||
|
|
|
||
|
|
// state
|
||
|
|
loadingDuration : 0,
|
||
|
|
errorDuration : 2000,
|
||
|
|
|
||
|
|
// templating
|
||
|
|
action : false,
|
||
|
|
url : false,
|
||
|
|
base : '',
|
||
|
|
|
||
|
|
// data
|
||
|
|
urlData : {},
|
||
|
|
|
||
|
|
// ui
|
||
|
|
defaultData : true,
|
||
|
|
serializeForm : false,
|
||
|
|
throttle : 0,
|
||
|
|
|
||
|
|
// jQ ajax
|
||
|
|
method : 'get',
|
||
|
|
data : {},
|
||
|
|
dataType : 'json',
|
||
|
|
|
||
|
|
// callbacks
|
||
|
|
beforeSend : function(settings) { return settings; },
|
||
|
|
beforeXHR : function(xhr) {},
|
||
|
|
|
||
|
|
onRequest : function(promise, xhr) {},
|
||
|
|
onSuccess : function(response, $module) {},
|
||
|
|
onComplete : function(response, $module) {},
|
||
|
|
onFailure : function(errorMessage, $module) {},
|
||
|
|
onError : function(errorMessage, $module) {},
|
||
|
|
onAbort : function(errorMessage, $module) {},
|
||
|
|
|
||
|
|
successTest : false,
|
||
|
|
|
||
|
|
// errors
|
||
|
|
error : {
|
||
|
|
beforeSend : 'The before send function has aborted the request',
|
||
|
|
error : 'There was an error with your request',
|
||
|
|
exitConditions : 'API Request Aborted. Exit conditions met',
|
||
|
|
JSONParse : 'JSON could not be parsed during error handling',
|
||
|
|
legacyParameters : 'You are using legacy API success callback names',
|
||
|
|
method : 'The method you called is not defined',
|
||
|
|
missingAction : 'API action used but no url was defined',
|
||
|
|
missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize',
|
||
|
|
missingURL : 'No URL specified for api event',
|
||
|
|
noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
|
||
|
|
parseError : 'There was an error parsing your request',
|
||
|
|
requiredParameter : 'Missing a required URL parameter: ',
|
||
|
|
statusMessage : 'Server gave an error: ',
|
||
|
|
timeout : 'Your request timed out'
|
||
|
|
},
|
||
|
|
|
||
|
|
regExp : {
|
||
|
|
required: /\{\$*[A-z0-9]+\}/g,
|
||
|
|
optional: /\{\/\$*[A-z0-9]+\}/g,
|
||
|
|
},
|
||
|
|
|
||
|
|
className: {
|
||
|
|
loading : 'loading',
|
||
|
|
error : 'error'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector: {
|
||
|
|
form: 'form'
|
||
|
|
},
|
||
|
|
|
||
|
|
metadata: {
|
||
|
|
action : 'action'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
$.api.settings.api = {};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Form Validation
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.form = function(fields, parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
settings = $.extend(true, {}, $.fn.form.settings, parameters),
|
||
|
|
validation = $.extend({}, $.fn.form.settings.defaults, fields),
|
||
|
|
|
||
|
|
namespace = settings.namespace,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
selector = settings.selector,
|
||
|
|
className = settings.className,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
$module = $(this),
|
||
|
|
$field = $(this).find(selector.field),
|
||
|
|
$group = $(this).find(selector.group),
|
||
|
|
$message = $(this).find(selector.message),
|
||
|
|
$prompt = $(this).find(selector.prompt),
|
||
|
|
|
||
|
|
$submit = $(this).find(selector.submit),
|
||
|
|
$clear = $(this).find(selector.clear),
|
||
|
|
$reset = $(this).find(selector.reset),
|
||
|
|
|
||
|
|
formErrors = [],
|
||
|
|
keyHeldDown = false,
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing form validation', $module, validation, settings);
|
||
|
|
module.bindEvents();
|
||
|
|
module.set.defaults();
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module', instance);
|
||
|
|
module.removeEvents();
|
||
|
|
$module
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache');
|
||
|
|
$field = $module.find(selector.field);
|
||
|
|
},
|
||
|
|
|
||
|
|
submit: function() {
|
||
|
|
module.verbose('Submitting form', $module);
|
||
|
|
$module
|
||
|
|
.submit()
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
attachEvents: function(selector, action) {
|
||
|
|
action = action || 'submit';
|
||
|
|
$(selector)
|
||
|
|
.on('click', function(event) {
|
||
|
|
module[action]();
|
||
|
|
event.preventDefault();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
bindEvents: function() {
|
||
|
|
if(settings.keyboardShortcuts) {
|
||
|
|
$field
|
||
|
|
.on('keydown' + eventNamespace, module.event.field.keydown)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$module
|
||
|
|
.on('submit' + eventNamespace, module.validate.form)
|
||
|
|
;
|
||
|
|
$field
|
||
|
|
.on('blur' + eventNamespace, module.event.field.blur)
|
||
|
|
;
|
||
|
|
|
||
|
|
// attach events to common elements
|
||
|
|
module.attachEvents($submit, 'submit');
|
||
|
|
module.attachEvents($reset, 'reset');
|
||
|
|
module.attachEvents($clear, 'clear');
|
||
|
|
|
||
|
|
$field
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
type = $(this).prop('type'),
|
||
|
|
inputEvent = module.get.changeEvent(type)
|
||
|
|
;
|
||
|
|
$(this)
|
||
|
|
.on(inputEvent + eventNamespace, module.event.field.change)
|
||
|
|
;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function() {
|
||
|
|
$field
|
||
|
|
.each(function () {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$element = $field.parent(),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.find(selector.prompt),
|
||
|
|
defaultValue = $field.data(metadata.defaultValue) || '',
|
||
|
|
isCheckbox = $element.is(selector.uiCheckbox),
|
||
|
|
isDropdown = $element.is(selector.uiDropdown),
|
||
|
|
isErrored = $fieldGroup.hasClass(className.error)
|
||
|
|
;
|
||
|
|
if(isErrored) {
|
||
|
|
module.verbose('Resetting error on field', $fieldGroup);
|
||
|
|
$fieldGroup.removeClass(className.error);
|
||
|
|
$prompt.remove();
|
||
|
|
}
|
||
|
|
if(isDropdown) {
|
||
|
|
module.verbose('Resetting dropdown value', $element, defaultValue);
|
||
|
|
$element.dropdown('clear');
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Resetting field value', $field, defaultValue);
|
||
|
|
$field.val('');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
$field
|
||
|
|
.each(function () {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$element = $field.parent(),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.find(selector.prompt),
|
||
|
|
defaultValue = $field.data(metadata.defaultValue) || '',
|
||
|
|
isCheckbox = $element.is(selector.uiCheckbox),
|
||
|
|
isDropdown = $element.is(selector.uiDropdown),
|
||
|
|
isErrored = $fieldGroup.hasClass(className.error)
|
||
|
|
;
|
||
|
|
if(isErrored) {
|
||
|
|
module.verbose('Resetting error on field', $fieldGroup);
|
||
|
|
$fieldGroup.removeClass(className.error);
|
||
|
|
$prompt.remove();
|
||
|
|
}
|
||
|
|
if(isDropdown) {
|
||
|
|
module.verbose('Resetting dropdown value', $element, defaultValue);
|
||
|
|
$element.dropdown('restore defaults');
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
module.verbose('Resetting checkbox value', $element, defaultValue);
|
||
|
|
if(defaultValue === true) {
|
||
|
|
$element.checkbox('check');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Resetting field value', $field, defaultValue);
|
||
|
|
$field.val(defaultValue);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
removeEvents: function() {
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$field
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$submit
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
$field
|
||
|
|
.off(eventNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
field: {
|
||
|
|
keydown: function(event) {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
key = event.which,
|
||
|
|
keyCode = {
|
||
|
|
enter : 13,
|
||
|
|
escape : 27
|
||
|
|
}
|
||
|
|
;
|
||
|
|
if( key == keyCode.escape) {
|
||
|
|
module.verbose('Escape key pressed blurring field');
|
||
|
|
$field
|
||
|
|
.blur()
|
||
|
|
;
|
||
|
|
}
|
||
|
|
if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).length > 0 ) {
|
||
|
|
$submit
|
||
|
|
.addClass(className.pressed)
|
||
|
|
;
|
||
|
|
if(!keyHeldDown) {
|
||
|
|
$field
|
||
|
|
.one('keyup' + eventNamespace, module.event.field.keyup)
|
||
|
|
;
|
||
|
|
module.submit();
|
||
|
|
module.debug('Enter pressed on input submitting form');
|
||
|
|
}
|
||
|
|
keyHeldDown = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
keyup: function() {
|
||
|
|
keyHeldDown = false;
|
||
|
|
$submit.removeClass(className.pressed);
|
||
|
|
},
|
||
|
|
blur: function() {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$fieldGroup = $field.closest($group)
|
||
|
|
;
|
||
|
|
if( $fieldGroup.hasClass(className.error) ) {
|
||
|
|
module.debug('Revalidating field', $field, module.get.validation($field));
|
||
|
|
module.validate.field( module.get.validation($field) );
|
||
|
|
}
|
||
|
|
else if(settings.on == 'blur' || settings.on == 'change') {
|
||
|
|
module.validate.field( module.get.validation($field) );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
change: function() {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
$fieldGroup = $field.closest($group)
|
||
|
|
;
|
||
|
|
if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(function() {
|
||
|
|
module.debug('Revalidating field', $field, module.get.validation($field));
|
||
|
|
module.validate.field( module.get.validation($field) );
|
||
|
|
}, settings.delay);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
changeEvent: function(type) {
|
||
|
|
if(type == 'checkbox' || type == 'radio' || type == 'hidden') {
|
||
|
|
return 'change';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module.get.inputEvent();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
inputEvent: function() {
|
||
|
|
return (document.createElement('input').oninput !== undefined)
|
||
|
|
? 'input'
|
||
|
|
: (document.createElement('input').onpropertychange !== undefined)
|
||
|
|
? 'propertychange'
|
||
|
|
: 'keyup'
|
||
|
|
;
|
||
|
|
},
|
||
|
|
field: function(identifier) {
|
||
|
|
module.verbose('Finding field with identifier', identifier);
|
||
|
|
if( $field.filter('#' + identifier).length > 0 ) {
|
||
|
|
return $field.filter('#' + identifier);
|
||
|
|
}
|
||
|
|
else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
|
||
|
|
return $field.filter('[name="' + identifier +'"]');
|
||
|
|
}
|
||
|
|
else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) {
|
||
|
|
return $field.filter('[name="' + identifier +'[]"]');
|
||
|
|
}
|
||
|
|
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
|
||
|
|
return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]');
|
||
|
|
}
|
||
|
|
return $('<input/>');
|
||
|
|
},
|
||
|
|
fields: function(fields) {
|
||
|
|
var
|
||
|
|
$fields = $()
|
||
|
|
;
|
||
|
|
$.each(fields, function(index, name) {
|
||
|
|
$fields = $fields.add( module.get.field(name) );
|
||
|
|
});
|
||
|
|
return $fields;
|
||
|
|
},
|
||
|
|
validation: function($field) {
|
||
|
|
var
|
||
|
|
rules
|
||
|
|
;
|
||
|
|
$.each(validation, function(fieldName, field) {
|
||
|
|
if( module.get.field(field.identifier).get(0) == $field.get(0) ) {
|
||
|
|
rules = field;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return rules || false;
|
||
|
|
},
|
||
|
|
value: function (field) {
|
||
|
|
var
|
||
|
|
fields = [],
|
||
|
|
results
|
||
|
|
;
|
||
|
|
fields.push(field);
|
||
|
|
results = module.get.values.call(element, fields);
|
||
|
|
return results[field];
|
||
|
|
},
|
||
|
|
values: function (fields) {
|
||
|
|
var
|
||
|
|
$fields = $.isArray(fields)
|
||
|
|
? module.get.fields(fields)
|
||
|
|
: $field,
|
||
|
|
values = {}
|
||
|
|
;
|
||
|
|
$fields.each(function(index, field) {
|
||
|
|
var
|
||
|
|
$field = $(field),
|
||
|
|
type = $field.prop('type'),
|
||
|
|
name = $field.prop('name'),
|
||
|
|
value = $field.val(),
|
||
|
|
isCheckbox = $field.is(selector.checkbox),
|
||
|
|
isRadio = $field.is(selector.radio),
|
||
|
|
isMultiple = (name.indexOf('[]') !== -1),
|
||
|
|
isChecked = (isCheckbox)
|
||
|
|
? $field.is(':checked')
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
if(name) {
|
||
|
|
if(isMultiple) {
|
||
|
|
name = name.replace('[]', '');
|
||
|
|
if(!values[name]) {
|
||
|
|
values[name] = [];
|
||
|
|
}
|
||
|
|
if(isCheckbox) {
|
||
|
|
if(isChecked) {
|
||
|
|
values[name].push(value)
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Omitted unchecked checkbox', $field);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
values[name].push(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(isRadio) {
|
||
|
|
if(isChecked) {
|
||
|
|
values[name] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
if(isChecked) {
|
||
|
|
values[name] = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Omitted unchecked checkbox', $field);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
values[name] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return values;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
has: {
|
||
|
|
|
||
|
|
field: function(identifier) {
|
||
|
|
module.verbose('Checking for existence of a field with identifier', identifier);
|
||
|
|
if( $field.filter('#' + identifier).length > 0 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
prompt: function(identifier, errors) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(identifier),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.children(selector.prompt),
|
||
|
|
promptExists = ($prompt.length !== 0)
|
||
|
|
;
|
||
|
|
errors = (typeof errors == 'string')
|
||
|
|
? [errors]
|
||
|
|
: errors
|
||
|
|
;
|
||
|
|
module.verbose('Adding field error state', identifier);
|
||
|
|
$fieldGroup
|
||
|
|
.addClass(className.error)
|
||
|
|
;
|
||
|
|
if(settings.inline) {
|
||
|
|
if(!promptExists) {
|
||
|
|
$prompt = settings.templates.prompt(errors);
|
||
|
|
$prompt
|
||
|
|
.appendTo($fieldGroup)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
$prompt
|
||
|
|
.html(errors[0])
|
||
|
|
;
|
||
|
|
if(!promptExists) {
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
module.verbose('Displaying error with css transition', settings.transition);
|
||
|
|
$prompt.transition(settings.transition + ' in', settings.duration);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Displaying error with fallback javascript animation');
|
||
|
|
$prompt
|
||
|
|
.fadeIn(settings.duration)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Inline errors are disabled, no inline error added', identifier);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
errors: function(errors) {
|
||
|
|
module.debug('Adding form error messages', errors);
|
||
|
|
$message
|
||
|
|
.html( settings.templates.error(errors) )
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
prompt: function(field) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(field.identifier),
|
||
|
|
$fieldGroup = $field.closest($group),
|
||
|
|
$prompt = $fieldGroup.children(selector.prompt)
|
||
|
|
;
|
||
|
|
$fieldGroup
|
||
|
|
.removeClass(className.error)
|
||
|
|
;
|
||
|
|
if(settings.inline && $prompt.is(':visible')) {
|
||
|
|
module.verbose('Removing prompt for field', field);
|
||
|
|
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||
|
|
$prompt.transition(settings.transition + ' out', settings.duration, function() {
|
||
|
|
$prompt.remove();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$prompt
|
||
|
|
.fadeOut(settings.duration, function(){
|
||
|
|
$prompt.remove();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
success: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.error)
|
||
|
|
.addClass(className.success)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
defaults: function () {
|
||
|
|
$field
|
||
|
|
.each(function () {
|
||
|
|
var
|
||
|
|
$field = $(this),
|
||
|
|
isCheckbox = ($field.filter(selector.checkbox).length > 0),
|
||
|
|
value = (isCheckbox)
|
||
|
|
? $field.is(':checked')
|
||
|
|
: $field.val()
|
||
|
|
;
|
||
|
|
$field.data(metadata.defaultValue, value);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.success)
|
||
|
|
.addClass(className.error)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
value: function (field, value) {
|
||
|
|
var
|
||
|
|
fields = {}
|
||
|
|
;
|
||
|
|
fields[field] = value;
|
||
|
|
return module.set.values.call(element, fields);
|
||
|
|
},
|
||
|
|
values: function (fields) {
|
||
|
|
if($.isEmptyObject(fields)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$.each(fields, function(key, value) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(key),
|
||
|
|
$element = $field.parent(),
|
||
|
|
isMultiple = $.isArray(value),
|
||
|
|
isCheckbox = $element.is(selector.uiCheckbox),
|
||
|
|
isDropdown = $element.is(selector.uiDropdown),
|
||
|
|
isRadio = ($field.is(selector.radio) && isCheckbox),
|
||
|
|
fieldExists = ($field.length > 0),
|
||
|
|
$multipleField
|
||
|
|
;
|
||
|
|
if(fieldExists) {
|
||
|
|
if(isMultiple && isCheckbox) {
|
||
|
|
module.verbose('Selecting multiple', value, $field);
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
$.each(value, function(index, value) {
|
||
|
|
$multipleField = $field.filter('[value="' + value + '"]');
|
||
|
|
$element = $multipleField.parent();
|
||
|
|
if($multipleField.length > 0) {
|
||
|
|
$element.checkbox('check');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if(isRadio) {
|
||
|
|
module.verbose('Selecting radio value', value, $field);
|
||
|
|
$field.filter('[value="' + value + '"]')
|
||
|
|
.parent(selector.uiCheckbox)
|
||
|
|
.checkbox('check')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else if(isCheckbox) {
|
||
|
|
module.verbose('Setting checkbox value', value, $element);
|
||
|
|
if(value === true) {
|
||
|
|
$element.checkbox('check');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$element.checkbox('uncheck');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(isDropdown) {
|
||
|
|
module.verbose('Setting dropdown value', value, $element);
|
||
|
|
$element.dropdown('set selected', value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose('Setting field value', value, $field);
|
||
|
|
$field.val(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
module.validate.form();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
validate: {
|
||
|
|
|
||
|
|
form: function(event) {
|
||
|
|
var
|
||
|
|
allValid = true,
|
||
|
|
apiRequest
|
||
|
|
;
|
||
|
|
|
||
|
|
// input keydown event will fire submit repeatedly by browser default
|
||
|
|
if(keyHeldDown) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// reset errors
|
||
|
|
formErrors = [];
|
||
|
|
$.each(validation, function(fieldName, field) {
|
||
|
|
if( !( module.validate.field(field) ) ) {
|
||
|
|
allValid = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if(allValid) {
|
||
|
|
module.debug('Form has no validation errors, submitting');
|
||
|
|
module.set.success();
|
||
|
|
return settings.onSuccess.call(element, event);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Form has errors');
|
||
|
|
module.set.error();
|
||
|
|
if(!settings.inline) {
|
||
|
|
module.add.errors(formErrors);
|
||
|
|
}
|
||
|
|
// prevent ajax submit
|
||
|
|
if($module.data('moduleApi') !== undefined) {
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
}
|
||
|
|
return settings.onFailure.call(element, formErrors);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// takes a validation object and returns whether field passes validation
|
||
|
|
field: function(field) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(field.identifier),
|
||
|
|
fieldValid = true,
|
||
|
|
fieldErrors = []
|
||
|
|
;
|
||
|
|
if($field.prop('disabled')) {
|
||
|
|
module.debug('Field is disabled. Skipping', field.identifier);
|
||
|
|
fieldValid = true;
|
||
|
|
}
|
||
|
|
else if(field.optional && $.trim($field.val()) === ''){
|
||
|
|
module.debug('Field is optional and empty. Skipping', field.identifier);
|
||
|
|
fieldValid = true;
|
||
|
|
}
|
||
|
|
else if(field.rules !== undefined) {
|
||
|
|
$.each(field.rules, function(index, rule) {
|
||
|
|
if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) {
|
||
|
|
module.debug('Field is invalid', field.identifier, rule.type);
|
||
|
|
fieldErrors.push(rule.prompt);
|
||
|
|
fieldValid = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if(fieldValid) {
|
||
|
|
module.remove.prompt(field, fieldErrors);
|
||
|
|
settings.onValid.call($field);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
formErrors = formErrors.concat(fieldErrors);
|
||
|
|
module.add.prompt(field.identifier, fieldErrors);
|
||
|
|
settings.onInvalid.call($field, fieldErrors);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
// takes validation rule and returns whether field passes rule
|
||
|
|
rule: function(field, validation) {
|
||
|
|
var
|
||
|
|
$field = module.get.field(field.identifier),
|
||
|
|
type = validation.type,
|
||
|
|
value = $.trim($field.val() + ''),
|
||
|
|
|
||
|
|
bracketRegExp = /\[(.*)\]/i,
|
||
|
|
bracket = bracketRegExp.exec(type),
|
||
|
|
isValid = true,
|
||
|
|
ancillary,
|
||
|
|
functionType
|
||
|
|
;
|
||
|
|
// if bracket notation is used, pass in extra parameters
|
||
|
|
if(bracket !== undefined && bracket !== null) {
|
||
|
|
ancillary = '' + bracket[1];
|
||
|
|
functionType = type.replace(bracket[0], '');
|
||
|
|
isValid = settings.rules[functionType].call(element, value, ancillary);
|
||
|
|
}
|
||
|
|
// normal notation
|
||
|
|
else {
|
||
|
|
isValid = settings.rules[type].call($field, value);
|
||
|
|
}
|
||
|
|
return isValid;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if($allModules.length > 1) {
|
||
|
|
title += ' ' + '(' + $allModules.length + ')';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.form.settings = {
|
||
|
|
|
||
|
|
name : 'Form',
|
||
|
|
namespace : 'form',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : true,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
|
||
|
|
keyboardShortcuts : true,
|
||
|
|
on : 'submit',
|
||
|
|
inline : false,
|
||
|
|
|
||
|
|
delay : 200,
|
||
|
|
revalidate : true,
|
||
|
|
|
||
|
|
transition : 'scale',
|
||
|
|
duration : 200,
|
||
|
|
|
||
|
|
onValid : function() {},
|
||
|
|
onInvalid : function() {},
|
||
|
|
onSuccess : function() { return true; },
|
||
|
|
onFailure : function() { return false; },
|
||
|
|
|
||
|
|
metadata : {
|
||
|
|
defaultValue : 'default',
|
||
|
|
validate : 'validate'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector : {
|
||
|
|
checkbox : 'input[type="checkbox"], input[type="radio"]',
|
||
|
|
clear : '.clear',
|
||
|
|
field : 'input, textarea, select',
|
||
|
|
group : '.field',
|
||
|
|
input : 'input',
|
||
|
|
message : '.error.message',
|
||
|
|
prompt : '.prompt.label',
|
||
|
|
radio : 'input[type="radio"]',
|
||
|
|
reset : '.reset',
|
||
|
|
submit : '.submit',
|
||
|
|
uiCheckbox : '.ui.checkbox',
|
||
|
|
uiDropdown : '.ui.dropdown'
|
||
|
|
},
|
||
|
|
|
||
|
|
className : {
|
||
|
|
error : 'error',
|
||
|
|
label : 'ui prompt label',
|
||
|
|
pressed : 'down',
|
||
|
|
success : 'success'
|
||
|
|
},
|
||
|
|
|
||
|
|
error: {
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
templates: {
|
||
|
|
|
||
|
|
// template that produces error message
|
||
|
|
error: function(errors) {
|
||
|
|
var
|
||
|
|
html = '<ul class="list">'
|
||
|
|
;
|
||
|
|
$.each(errors, function(index, value) {
|
||
|
|
html += '<li>' + value + '</li>';
|
||
|
|
});
|
||
|
|
html += '</ul>';
|
||
|
|
return $(html);
|
||
|
|
},
|
||
|
|
|
||
|
|
// template that produces label
|
||
|
|
prompt: function(errors) {
|
||
|
|
return $('<div/>')
|
||
|
|
.addClass('ui red pointing prompt label')
|
||
|
|
.html(errors[0])
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
rules: {
|
||
|
|
|
||
|
|
// checkbox checked
|
||
|
|
checked: function() {
|
||
|
|
return ($(this).filter(':checked').length > 0);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value contains text (insensitive)
|
||
|
|
contains: function(value, text) {
|
||
|
|
// escape regex characters
|
||
|
|
text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
||
|
|
return (value.search( new RegExp(text, 'i') ) !== -1);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value contains text (case sensitive)
|
||
|
|
containsExactly: function(value, text) {
|
||
|
|
// escape regex characters
|
||
|
|
text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
||
|
|
return (value.search( new RegExp(text) ) !== -1);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is most likely an email
|
||
|
|
email: function(value){
|
||
|
|
var
|
||
|
|
emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i")
|
||
|
|
;
|
||
|
|
return emailRegExp.test(value);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is not empty or blank string
|
||
|
|
empty: function(value) {
|
||
|
|
return !(value === undefined || '' === value);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is valid integer
|
||
|
|
integer: function(value, range) {
|
||
|
|
var
|
||
|
|
intRegExp = /^\-?\d+$/,
|
||
|
|
min,
|
||
|
|
max,
|
||
|
|
parts
|
||
|
|
;
|
||
|
|
if(range === undefined || range === '' || range === '..') {
|
||
|
|
// do nothing
|
||
|
|
}
|
||
|
|
else if(range.indexOf('..') == -1) {
|
||
|
|
if(intRegExp.test(range)) {
|
||
|
|
min = max = range - 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
parts = range.split('..', 2);
|
||
|
|
if(intRegExp.test(parts[0])) {
|
||
|
|
min = parts[0] - 0;
|
||
|
|
}
|
||
|
|
if(intRegExp.test(parts[1])) {
|
||
|
|
max = parts[1] - 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
intRegExp.test(value) &&
|
||
|
|
(min === undefined || value >= min) &&
|
||
|
|
(max === undefined || value <= max)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is value (case insensitive)
|
||
|
|
is: function(value, text) {
|
||
|
|
text = (typeof text == 'string')
|
||
|
|
? text.toLowerCase()
|
||
|
|
: text
|
||
|
|
;
|
||
|
|
value = (typeof value == 'string')
|
||
|
|
? value.toLowerCase()
|
||
|
|
: value
|
||
|
|
;
|
||
|
|
return (value == text);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is value
|
||
|
|
isExactly: function(value, text) {
|
||
|
|
return (value == text);
|
||
|
|
},
|
||
|
|
|
||
|
|
// is at least string length
|
||
|
|
length: function(value, requiredLength) {
|
||
|
|
return (value !== undefined)
|
||
|
|
? (value.length >= requiredLength)
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
// matches another field
|
||
|
|
match: function(value, fieldIdentifier) {
|
||
|
|
// use either id or name of field
|
||
|
|
var
|
||
|
|
$form = $(this),
|
||
|
|
matchingValue
|
||
|
|
;
|
||
|
|
if($form.find('#' + fieldIdentifier).length > 0) {
|
||
|
|
matchingValue = $form.find('#' + fieldIdentifier).val();
|
||
|
|
}
|
||
|
|
else if($form.find('[name="' + fieldIdentifier +'"]').length > 0) {
|
||
|
|
matchingValue = $form.find('[name="' + fieldIdentifier + '"]').val();
|
||
|
|
}
|
||
|
|
else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').length > 0 ) {
|
||
|
|
matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val();
|
||
|
|
}
|
||
|
|
return (matchingValue !== undefined)
|
||
|
|
? ( value.toString() == matchingValue.toString() )
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
// string length is less than max length
|
||
|
|
maxLength: function(value, maxLength) {
|
||
|
|
return (value !== undefined)
|
||
|
|
? (value.length <= maxLength)
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
// value is not value (case insensitive)
|
||
|
|
not: function(value, notValue) {
|
||
|
|
value = (typeof value == 'string')
|
||
|
|
? value.toLowerCase()
|
||
|
|
: value
|
||
|
|
;
|
||
|
|
notValue = (typeof notValue == 'string')
|
||
|
|
? notValue.toLowerCase()
|
||
|
|
: notValue
|
||
|
|
;
|
||
|
|
return (value != notValue);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value is not value (case sensitive)
|
||
|
|
notExactly: function(value, notValue) {
|
||
|
|
return (value != notValue);
|
||
|
|
},
|
||
|
|
|
||
|
|
// value is most likely url
|
||
|
|
url: function(value) {
|
||
|
|
var
|
||
|
|
urlRegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
|
||
|
|
;
|
||
|
|
return urlRegExp.test(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - State
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.state = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
hasTouch = ('ontouchstart' in document.documentElement),
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.state.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.state.settings),
|
||
|
|
|
||
|
|
error = settings.error,
|
||
|
|
metadata = settings.metadata,
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
states = settings.states,
|
||
|
|
text = settings.text,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = namespace + '-module',
|
||
|
|
|
||
|
|
$module = $(this),
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
module
|
||
|
|
;
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.verbose('Initializing module');
|
||
|
|
|
||
|
|
// allow module to guess desired state based on element
|
||
|
|
if(settings.automatic) {
|
||
|
|
module.add.defaults();
|
||
|
|
}
|
||
|
|
|
||
|
|
// bind events with delegated events
|
||
|
|
if(settings.context && moduleSelector !== '') {
|
||
|
|
$(settings.context)
|
||
|
|
.on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
|
||
|
|
.on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
|
||
|
|
.on(moduleSelector, 'click' + eventNamespace, module.toggle.state)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.on('mouseenter' + eventNamespace, module.change.text)
|
||
|
|
.on('mouseleave' + eventNamespace, module.reset.text)
|
||
|
|
.on('click' + eventNamespace, module.toggle.state)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.verbose('Storing instance of module', module);
|
||
|
|
instance = module;
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module', instance);
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.verbose('Refreshing selector cache');
|
||
|
|
$module = $(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
add: {
|
||
|
|
defaults: function() {
|
||
|
|
var
|
||
|
|
userStates = parameters && $.isPlainObject(parameters.states)
|
||
|
|
? parameters.states
|
||
|
|
: {}
|
||
|
|
;
|
||
|
|
$.each(settings.defaults, function(type, typeStates) {
|
||
|
|
if( module.is[type] !== undefined && module.is[type]() ) {
|
||
|
|
module.verbose('Adding default states', type, element);
|
||
|
|
$.extend(settings.states, typeStates, userStates);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
|
||
|
|
active: function() {
|
||
|
|
return $module.hasClass(className.active);
|
||
|
|
},
|
||
|
|
loading: function() {
|
||
|
|
return $module.hasClass(className.loading);
|
||
|
|
},
|
||
|
|
inactive: function() {
|
||
|
|
return !( $module.hasClass(className.active) );
|
||
|
|
},
|
||
|
|
state: function(state) {
|
||
|
|
if(className[state] === undefined) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return $module.hasClass( className[state] );
|
||
|
|
},
|
||
|
|
|
||
|
|
enabled: function() {
|
||
|
|
return !( $module.is(settings.filter.active) );
|
||
|
|
},
|
||
|
|
disabled: function() {
|
||
|
|
return ( $module.is(settings.filter.active) );
|
||
|
|
},
|
||
|
|
textEnabled: function() {
|
||
|
|
return !( $module.is(settings.filter.text) );
|
||
|
|
},
|
||
|
|
|
||
|
|
// definitions for automatic type detection
|
||
|
|
button: function() {
|
||
|
|
return $module.is('.button:not(a, .submit)');
|
||
|
|
},
|
||
|
|
input: function() {
|
||
|
|
return $module.is('input');
|
||
|
|
},
|
||
|
|
progress: function() {
|
||
|
|
return $module.is('.ui.progress');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
allow: function(state) {
|
||
|
|
module.debug('Now allowing state', state);
|
||
|
|
states[state] = true;
|
||
|
|
},
|
||
|
|
disallow: function(state) {
|
||
|
|
module.debug('No longer allowing', state);
|
||
|
|
states[state] = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
allows: function(state) {
|
||
|
|
return states[state] || false;
|
||
|
|
},
|
||
|
|
|
||
|
|
enable: function() {
|
||
|
|
$module.removeClass(className.disabled);
|
||
|
|
},
|
||
|
|
|
||
|
|
disable: function() {
|
||
|
|
$module.addClass(className.disabled);
|
||
|
|
},
|
||
|
|
|
||
|
|
setState: function(state) {
|
||
|
|
if(module.allows(state)) {
|
||
|
|
$module.addClass( className[state] );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
removeState: function(state) {
|
||
|
|
if(module.allows(state)) {
|
||
|
|
$module.removeClass( className[state] );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: {
|
||
|
|
state: function() {
|
||
|
|
var
|
||
|
|
apiRequest,
|
||
|
|
requestCancelled
|
||
|
|
;
|
||
|
|
if( module.allows('active') && module.is.enabled() ) {
|
||
|
|
module.refresh();
|
||
|
|
if($.fn.api !== undefined) {
|
||
|
|
apiRequest = $module.api('get request');
|
||
|
|
requestCancelled = $module.api('was cancelled');
|
||
|
|
if( requestCancelled ) {
|
||
|
|
module.debug('API Request cancelled by beforesend');
|
||
|
|
settings.activateTest = function(){ return false; };
|
||
|
|
settings.deactivateTest = function(){ return false; };
|
||
|
|
}
|
||
|
|
else if(apiRequest) {
|
||
|
|
module.listenTo(apiRequest);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.change.state();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
listenTo: function(apiRequest) {
|
||
|
|
module.debug('API request detected, waiting for state signal', apiRequest);
|
||
|
|
if(apiRequest) {
|
||
|
|
if(text.loading) {
|
||
|
|
module.update.text(text.loading);
|
||
|
|
}
|
||
|
|
$.when(apiRequest)
|
||
|
|
.then(function() {
|
||
|
|
if(apiRequest.state() == 'resolved') {
|
||
|
|
module.debug('API request succeeded');
|
||
|
|
settings.activateTest = function(){ return true; };
|
||
|
|
settings.deactivateTest = function(){ return true; };
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('API request failed');
|
||
|
|
settings.activateTest = function(){ return false; };
|
||
|
|
settings.deactivateTest = function(){ return false; };
|
||
|
|
}
|
||
|
|
module.change.state();
|
||
|
|
})
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// checks whether active/inactive state can be given
|
||
|
|
change: {
|
||
|
|
|
||
|
|
state: function() {
|
||
|
|
module.debug('Determining state change direction');
|
||
|
|
// inactive to active change
|
||
|
|
if( module.is.inactive() ) {
|
||
|
|
module.activate();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.deactivate();
|
||
|
|
}
|
||
|
|
if(settings.sync) {
|
||
|
|
module.sync();
|
||
|
|
}
|
||
|
|
settings.onChange.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
text: function() {
|
||
|
|
if( module.is.textEnabled() ) {
|
||
|
|
if(module.is.disabled() ) {
|
||
|
|
module.verbose('Changing text to disabled text', text.hover);
|
||
|
|
module.update.text(text.disabled);
|
||
|
|
}
|
||
|
|
else if( module.is.active() ) {
|
||
|
|
if(text.hover) {
|
||
|
|
module.verbose('Changing text to hover text', text.hover);
|
||
|
|
module.update.text(text.hover);
|
||
|
|
}
|
||
|
|
else if(text.deactivate) {
|
||
|
|
module.verbose('Changing text to deactivating text', text.deactivate);
|
||
|
|
module.update.text(text.deactivate);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(text.hover) {
|
||
|
|
module.verbose('Changing text to hover text', text.hover);
|
||
|
|
module.update.text(text.hover);
|
||
|
|
}
|
||
|
|
else if(text.activate){
|
||
|
|
module.verbose('Changing text to activating text', text.activate);
|
||
|
|
module.update.text(text.activate);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
activate: function() {
|
||
|
|
if( settings.activateTest.call(element) ) {
|
||
|
|
module.debug('Setting state to active');
|
||
|
|
$module
|
||
|
|
.addClass(className.active)
|
||
|
|
;
|
||
|
|
module.update.text(text.active);
|
||
|
|
settings.onActivate.call(element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
deactivate: function() {
|
||
|
|
if( settings.deactivateTest.call(element) ) {
|
||
|
|
module.debug('Setting state to inactive');
|
||
|
|
$module
|
||
|
|
.removeClass(className.active)
|
||
|
|
;
|
||
|
|
module.update.text(text.inactive);
|
||
|
|
settings.onDeactivate.call(element);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
sync: function() {
|
||
|
|
module.verbose('Syncing other buttons to current state');
|
||
|
|
if( module.is.active() ) {
|
||
|
|
$allModules
|
||
|
|
.not($module)
|
||
|
|
.state('activate');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$allModules
|
||
|
|
.not($module)
|
||
|
|
.state('deactivate')
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
text: function() {
|
||
|
|
return (settings.selector.text)
|
||
|
|
? $module.find(settings.selector.text).text()
|
||
|
|
: $module.html()
|
||
|
|
;
|
||
|
|
},
|
||
|
|
textFor: function(state) {
|
||
|
|
return text[state] || false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
flash: {
|
||
|
|
text: function(text, duration, callback) {
|
||
|
|
var
|
||
|
|
previousText = module.get.text()
|
||
|
|
;
|
||
|
|
module.debug('Flashing text message', text, duration);
|
||
|
|
text = text || settings.text.flash;
|
||
|
|
duration = duration || settings.flashDuration;
|
||
|
|
callback = callback || function() {};
|
||
|
|
module.update.text(text);
|
||
|
|
setTimeout(function(){
|
||
|
|
module.update.text(previousText);
|
||
|
|
callback.call(element);
|
||
|
|
}, duration);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: {
|
||
|
|
// on mouseout sets text to previous value
|
||
|
|
text: function() {
|
||
|
|
var
|
||
|
|
activeText = text.active || $module.data(metadata.storedText),
|
||
|
|
inactiveText = text.inactive || $module.data(metadata.storedText)
|
||
|
|
;
|
||
|
|
if( module.is.textEnabled() ) {
|
||
|
|
if( module.is.active() && activeText) {
|
||
|
|
module.verbose('Resetting active text', activeText);
|
||
|
|
module.update.text(activeText);
|
||
|
|
}
|
||
|
|
else if(inactiveText) {
|
||
|
|
module.verbose('Resetting inactive text', activeText);
|
||
|
|
module.update.text(inactiveText);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
update: {
|
||
|
|
text: function(text) {
|
||
|
|
var
|
||
|
|
currentText = module.get.text()
|
||
|
|
;
|
||
|
|
if(text && text !== currentText) {
|
||
|
|
module.debug('Updating text', text);
|
||
|
|
if(settings.selector.text) {
|
||
|
|
$module
|
||
|
|
.data(metadata.storedText, text)
|
||
|
|
.find(settings.selector.text)
|
||
|
|
.text(text)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module
|
||
|
|
.data(metadata.storedText, text)
|
||
|
|
.html(text)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug('Text is already set, ignoring update', text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
module.debug('Changing setting', name, value);
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.state.settings = {
|
||
|
|
|
||
|
|
// module info
|
||
|
|
name : 'State',
|
||
|
|
|
||
|
|
// debug output
|
||
|
|
debug : false,
|
||
|
|
|
||
|
|
// verbose debug output
|
||
|
|
verbose : true,
|
||
|
|
|
||
|
|
// namespace for events
|
||
|
|
namespace : 'state',
|
||
|
|
|
||
|
|
// debug data includes performance
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
// callback occurs on state change
|
||
|
|
onActivate : function() {},
|
||
|
|
onDeactivate : function() {},
|
||
|
|
onChange : function() {},
|
||
|
|
|
||
|
|
// state test functions
|
||
|
|
activateTest : function() { return true; },
|
||
|
|
deactivateTest : function() { return true; },
|
||
|
|
|
||
|
|
// whether to automatically map default states
|
||
|
|
automatic : true,
|
||
|
|
|
||
|
|
// activate / deactivate changes all elements instantiated at same time
|
||
|
|
sync : false,
|
||
|
|
|
||
|
|
// default flash text duration, used for temporarily changing text of an element
|
||
|
|
flashDuration : 1000,
|
||
|
|
|
||
|
|
// selector filter
|
||
|
|
filter : {
|
||
|
|
text : '.loading, .disabled',
|
||
|
|
active : '.disabled'
|
||
|
|
},
|
||
|
|
|
||
|
|
context : false,
|
||
|
|
|
||
|
|
// error
|
||
|
|
error: {
|
||
|
|
beforeSend : 'The before send function has cancelled state change',
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
},
|
||
|
|
|
||
|
|
// metadata
|
||
|
|
metadata: {
|
||
|
|
promise : 'promise',
|
||
|
|
storedText : 'stored-text'
|
||
|
|
},
|
||
|
|
|
||
|
|
// change class on state
|
||
|
|
className: {
|
||
|
|
active : 'active',
|
||
|
|
disabled : 'disabled',
|
||
|
|
error : 'error',
|
||
|
|
loading : 'loading',
|
||
|
|
success : 'success',
|
||
|
|
warning : 'warning'
|
||
|
|
},
|
||
|
|
|
||
|
|
selector: {
|
||
|
|
// selector for text node
|
||
|
|
text: false
|
||
|
|
},
|
||
|
|
|
||
|
|
defaults : {
|
||
|
|
input: {
|
||
|
|
disabled : true,
|
||
|
|
loading : true,
|
||
|
|
active : true
|
||
|
|
},
|
||
|
|
button: {
|
||
|
|
disabled : true,
|
||
|
|
loading : true,
|
||
|
|
active : true,
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
active : true,
|
||
|
|
success : true,
|
||
|
|
warning : true,
|
||
|
|
error : true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
states : {
|
||
|
|
active : true,
|
||
|
|
disabled : true,
|
||
|
|
error : true,
|
||
|
|
loading : true,
|
||
|
|
success : true,
|
||
|
|
warning : true
|
||
|
|
},
|
||
|
|
|
||
|
|
text : {
|
||
|
|
disabled : false,
|
||
|
|
flash : false,
|
||
|
|
hover : false,
|
||
|
|
active : false,
|
||
|
|
inactive : false,
|
||
|
|
activate : false,
|
||
|
|
deactivate : false
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* # Semantic UI 1.11.4 - Visibility
|
||
|
|
* http://github.com/semantic-org/semantic-ui/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Copyright 2014 Contributors
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function ( $, window, document, undefined ) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.visibility = function(parameters) {
|
||
|
|
var
|
||
|
|
$allModules = $(this),
|
||
|
|
moduleSelector = $allModules.selector || '',
|
||
|
|
|
||
|
|
time = new Date().getTime(),
|
||
|
|
performance = [],
|
||
|
|
|
||
|
|
query = arguments[0],
|
||
|
|
methodInvoked = (typeof query == 'string'),
|
||
|
|
queryArguments = [].slice.call(arguments, 1),
|
||
|
|
returnedValue
|
||
|
|
;
|
||
|
|
|
||
|
|
$allModules
|
||
|
|
.each(function() {
|
||
|
|
var
|
||
|
|
settings = ( $.isPlainObject(parameters) )
|
||
|
|
? $.extend(true, {}, $.fn.visibility.settings, parameters)
|
||
|
|
: $.extend({}, $.fn.visibility.settings),
|
||
|
|
|
||
|
|
className = settings.className,
|
||
|
|
namespace = settings.namespace,
|
||
|
|
error = settings.error,
|
||
|
|
|
||
|
|
eventNamespace = '.' + namespace,
|
||
|
|
moduleNamespace = 'module-' + namespace,
|
||
|
|
|
||
|
|
$window = $(window),
|
||
|
|
$module = $(this),
|
||
|
|
$context = $(settings.context),
|
||
|
|
$container = $module.offsetParent(),
|
||
|
|
|
||
|
|
selector = $module.selector || '',
|
||
|
|
instance = $module.data(moduleNamespace),
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame
|
||
|
|
|| window.mozRequestAnimationFrame
|
||
|
|
|| window.webkitRequestAnimationFrame
|
||
|
|
|| window.msRequestAnimationFrame
|
||
|
|
|| function(callback) { setTimeout(callback, 0); },
|
||
|
|
|
||
|
|
element = this,
|
||
|
|
observer,
|
||
|
|
module
|
||
|
|
;
|
||
|
|
|
||
|
|
module = {
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
module.debug('Initializing', settings);
|
||
|
|
|
||
|
|
module.setup.cache();
|
||
|
|
module.save.position();
|
||
|
|
|
||
|
|
if( module.should.trackChanges() ) {
|
||
|
|
module.bind.events();
|
||
|
|
if(settings.type == 'image') {
|
||
|
|
module.setup.image();
|
||
|
|
}
|
||
|
|
if(settings.type == 'fixed') {
|
||
|
|
module.setup.fixed();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(settings.initialCheck) {
|
||
|
|
module.checkVisibility();
|
||
|
|
}
|
||
|
|
if(settings.observeChanges) {
|
||
|
|
module.observeChanges();
|
||
|
|
}
|
||
|
|
module.instantiate();
|
||
|
|
},
|
||
|
|
|
||
|
|
instantiate: function() {
|
||
|
|
module.debug('Storing instance', module);
|
||
|
|
$module
|
||
|
|
.data(moduleNamespace, module)
|
||
|
|
;
|
||
|
|
instance = module;
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function() {
|
||
|
|
module.verbose('Destroying previous module');
|
||
|
|
$module
|
||
|
|
.off(eventNamespace)
|
||
|
|
.removeData(moduleNamespace)
|
||
|
|
;
|
||
|
|
$window.off('resize' + eventNamespace, module.event.refresh);
|
||
|
|
$context.off('scroll' + eventNamespace, module.event.scroll);
|
||
|
|
},
|
||
|
|
|
||
|
|
observeChanges: function() {
|
||
|
|
var
|
||
|
|
context = $context[0]
|
||
|
|
;
|
||
|
|
if('MutationObserver' in window) {
|
||
|
|
observer = new MutationObserver(function(mutations) {
|
||
|
|
module.verbose('DOM tree modified, updating visibility calculations');
|
||
|
|
module.refresh();
|
||
|
|
});
|
||
|
|
observer.observe(element, {
|
||
|
|
childList : true,
|
||
|
|
subtree : true
|
||
|
|
});
|
||
|
|
module.debug('Setting up mutation observer', observer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bind: {
|
||
|
|
events: function() {
|
||
|
|
module.verbose('Binding visibility events to scroll and resize');
|
||
|
|
$window
|
||
|
|
.on('resize' + eventNamespace, module.event.refresh)
|
||
|
|
;
|
||
|
|
$context
|
||
|
|
.on('scroll' + eventNamespace, module.event.scroll)
|
||
|
|
;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
event: {
|
||
|
|
refresh: function() {
|
||
|
|
requestAnimationFrame(module.refresh);
|
||
|
|
},
|
||
|
|
scroll: function() {
|
||
|
|
module.verbose('Scroll position changed');
|
||
|
|
if(settings.throttle) {
|
||
|
|
clearTimeout(module.timer);
|
||
|
|
module.timer = setTimeout(function() {
|
||
|
|
module.checkVisibility();
|
||
|
|
}, settings.throttle);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
requestAnimationFrame(function() {
|
||
|
|
module.checkVisibility();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
precache: function(images, callback) {
|
||
|
|
if (!(images instanceof Array)) {
|
||
|
|
images = [images];
|
||
|
|
}
|
||
|
|
var
|
||
|
|
imagesLength = images.length,
|
||
|
|
loadedCounter = 0,
|
||
|
|
cache = [],
|
||
|
|
cacheImage = document.createElement('img'),
|
||
|
|
handleLoad = function() {
|
||
|
|
loadedCounter++;
|
||
|
|
if (loadedCounter >= images.length) {
|
||
|
|
if ($.isFunction(callback)) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
;
|
||
|
|
while (imagesLength--) {
|
||
|
|
cacheImage = document.createElement('img');
|
||
|
|
cacheImage.onload = handleLoad;
|
||
|
|
cacheImage.onerror = handleLoad;
|
||
|
|
cacheImage.src = images[imagesLength];
|
||
|
|
cache.push(cacheImage);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
should: {
|
||
|
|
trackChanges: function() {
|
||
|
|
if(methodInvoked && queryArguments.length > 0) {
|
||
|
|
module.debug('One time query, no need to bind events');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
module.debug('Callbacks being attached');
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setup: {
|
||
|
|
cache: function() {
|
||
|
|
module.cache = {
|
||
|
|
occurred : {},
|
||
|
|
screen : {},
|
||
|
|
element : {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
image: function() {
|
||
|
|
var
|
||
|
|
src = $module.data('src')
|
||
|
|
;
|
||
|
|
if(src) {
|
||
|
|
module.verbose('Lazy loading image', src);
|
||
|
|
settings.observeChanges = false;
|
||
|
|
// show when top visible
|
||
|
|
module.topVisible(function() {
|
||
|
|
module.debug('Image top visible', element);
|
||
|
|
module.precache(src, function() {
|
||
|
|
module.set.image(src);
|
||
|
|
settings.onTopVisible = false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fixed: function() {
|
||
|
|
module.verbose('Setting up fixed on element pass');
|
||
|
|
settings.once = false;
|
||
|
|
settings.onTopPassed = function() {
|
||
|
|
$module
|
||
|
|
.addClass(className.fixed)
|
||
|
|
.css({
|
||
|
|
top: settings.offset + 'px'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
if(settings.transition) {
|
||
|
|
if($.fn.transition !== undefined) {
|
||
|
|
$module.transition(settings.transition, settings.duration);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
settings.onTopPassedReverse = function() {
|
||
|
|
$module
|
||
|
|
.removeClass(className.fixed)
|
||
|
|
.css({
|
||
|
|
position: '',
|
||
|
|
top: ''
|
||
|
|
})
|
||
|
|
;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
set: {
|
||
|
|
image: function(src) {
|
||
|
|
var
|
||
|
|
offScreen = (module.cache.screen.bottom < module.cache.element.top)
|
||
|
|
;
|
||
|
|
$module
|
||
|
|
.attr('src', src)
|
||
|
|
;
|
||
|
|
if(offScreen) {
|
||
|
|
module.verbose('Image outside browser, no show animation');
|
||
|
|
$module.show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(settings.transition) {
|
||
|
|
if( $.fn.transition !== undefined ) {
|
||
|
|
$module.transition(settings.transition, settings.duration);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module.fadeIn(settings.duration);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$module.show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
is: {
|
||
|
|
visible: function() {
|
||
|
|
if(module.cache && module.cache.element) {
|
||
|
|
return (module.cache.element.width > 0);
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh: function() {
|
||
|
|
module.debug('Refreshing constants (element width/height)');
|
||
|
|
module.reset();
|
||
|
|
module.save.position();
|
||
|
|
module.checkVisibility();
|
||
|
|
settings.onRefresh.call(element);
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function() {
|
||
|
|
module.verbose('Reseting all cached values');
|
||
|
|
if( $.isPlainObject(module.cache) ) {
|
||
|
|
module.cache.screen = {};
|
||
|
|
module.cache.element = {};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
checkVisibility: function() {
|
||
|
|
module.verbose('Checking visibility of element', module.cache.element);
|
||
|
|
|
||
|
|
if( module.is.visible() ) {
|
||
|
|
|
||
|
|
// update calculations derived from scroll
|
||
|
|
module.save.calculations();
|
||
|
|
|
||
|
|
// percentage
|
||
|
|
module.passed();
|
||
|
|
|
||
|
|
// reverse (must be first)
|
||
|
|
module.passingReverse();
|
||
|
|
module.topVisibleReverse();
|
||
|
|
module.bottomVisibleReverse();
|
||
|
|
module.topPassedReverse();
|
||
|
|
module.bottomPassedReverse();
|
||
|
|
|
||
|
|
// one time
|
||
|
|
module.passing();
|
||
|
|
module.topVisible();
|
||
|
|
module.bottomVisible();
|
||
|
|
module.topPassed();
|
||
|
|
module.bottomPassed();
|
||
|
|
|
||
|
|
// on update callback
|
||
|
|
if(settings.onUpdate) {
|
||
|
|
settings.onUpdate.call(element, module.get.elementCalculations());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
passed: function(amount, newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
amountInPixels
|
||
|
|
;
|
||
|
|
// assign callback
|
||
|
|
if(amount !== undefined && newCallback !== undefined) {
|
||
|
|
settings.onPassed[amount] = newCallback;
|
||
|
|
}
|
||
|
|
else if(amount !== undefined) {
|
||
|
|
return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);
|
||
|
|
}
|
||
|
|
else if(calculations.passing) {
|
||
|
|
$.each(settings.onPassed, function(amount, callback) {
|
||
|
|
if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {
|
||
|
|
module.execute(callback, amount);
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callback);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
passing: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onPassing,
|
||
|
|
callbackName = 'passing'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for passing', newCallback);
|
||
|
|
settings.onPassing = newCallback;
|
||
|
|
}
|
||
|
|
if(calculations.passing) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback !== undefined) {
|
||
|
|
return calculations.passing;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
topVisible: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onTopVisible,
|
||
|
|
callbackName = 'topVisible'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for top visible', newCallback);
|
||
|
|
settings.onTopVisible = newCallback;
|
||
|
|
}
|
||
|
|
if(calculations.topVisible) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return calculations.topVisible;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bottomVisible: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onBottomVisible,
|
||
|
|
callbackName = 'bottomVisible'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for bottom visible', newCallback);
|
||
|
|
settings.onBottomVisible = newCallback;
|
||
|
|
}
|
||
|
|
if(calculations.bottomVisible) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return calculations.bottomVisible;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
topPassed: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onTopPassed,
|
||
|
|
callbackName = 'topPassed'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for top passed', newCallback);
|
||
|
|
settings.onTopPassed = newCallback;
|
||
|
|
}
|
||
|
|
if(calculations.topPassed) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return calculations.topPassed;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bottomPassed: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onBottomPassed,
|
||
|
|
callbackName = 'bottomPassed'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for bottom passed', newCallback);
|
||
|
|
settings.onBottomPassed = newCallback;
|
||
|
|
}
|
||
|
|
if(calculations.bottomPassed) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return calculations.bottomPassed;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
passingReverse: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onPassingReverse,
|
||
|
|
callbackName = 'passingReverse'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for passing reverse', newCallback);
|
||
|
|
settings.onPassingReverse = newCallback;
|
||
|
|
}
|
||
|
|
if(!calculations.passing) {
|
||
|
|
if(module.get.occurred('passing')) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback !== undefined) {
|
||
|
|
return !calculations.passing;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
topVisibleReverse: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onTopVisibleReverse,
|
||
|
|
callbackName = 'topVisibleReverse'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for top visible reverse', newCallback);
|
||
|
|
settings.onTopVisibleReverse = newCallback;
|
||
|
|
}
|
||
|
|
if(!calculations.topVisible) {
|
||
|
|
if(module.get.occurred('topVisible')) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return !calculations.topVisible;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bottomVisibleReverse: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onBottomVisibleReverse,
|
||
|
|
callbackName = 'bottomVisibleReverse'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for bottom visible reverse', newCallback);
|
||
|
|
settings.onBottomVisibleReverse = newCallback;
|
||
|
|
}
|
||
|
|
if(!calculations.bottomVisible) {
|
||
|
|
if(module.get.occurred('bottomVisible')) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return !calculations.bottomVisible;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
topPassedReverse: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onTopPassedReverse,
|
||
|
|
callbackName = 'topPassedReverse'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for top passed reverse', newCallback);
|
||
|
|
settings.onTopPassedReverse = newCallback;
|
||
|
|
}
|
||
|
|
if(!calculations.topPassed) {
|
||
|
|
if(module.get.occurred('topPassed')) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return !calculations.onTopPassed;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
bottomPassedReverse: function(newCallback) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
callback = newCallback || settings.onBottomPassedReverse,
|
||
|
|
callbackName = 'bottomPassedReverse'
|
||
|
|
;
|
||
|
|
if(newCallback) {
|
||
|
|
module.debug('Adding callback for bottom passed reverse', newCallback);
|
||
|
|
settings.onBottomPassedReverse = newCallback;
|
||
|
|
}
|
||
|
|
if(!calculations.bottomPassed) {
|
||
|
|
if(module.get.occurred('bottomPassed')) {
|
||
|
|
module.execute(callback, callbackName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(!settings.once) {
|
||
|
|
module.remove.occurred(callbackName);
|
||
|
|
}
|
||
|
|
if(newCallback === undefined) {
|
||
|
|
return !calculations.bottomPassed;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
execute: function(callback, callbackName) {
|
||
|
|
var
|
||
|
|
calculations = module.get.elementCalculations(),
|
||
|
|
screen = module.get.screenCalculations()
|
||
|
|
;
|
||
|
|
callback = callback || false;
|
||
|
|
if(callback) {
|
||
|
|
if(settings.continuous) {
|
||
|
|
module.debug('Callback being called continuously', callbackName, calculations);
|
||
|
|
callback.call(element, calculations, screen);
|
||
|
|
}
|
||
|
|
else if(!module.get.occurred(callbackName)) {
|
||
|
|
module.debug('Conditions met', callbackName, calculations);
|
||
|
|
callback.call(element, calculations, screen);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.save.occurred(callbackName);
|
||
|
|
},
|
||
|
|
|
||
|
|
remove: {
|
||
|
|
occurred: function(callback) {
|
||
|
|
if(callback) {
|
||
|
|
if(module.cache.occurred[callback] !== undefined && module.cache.occurred[callback] === true) {
|
||
|
|
module.debug('Callback can now be called again', callback);
|
||
|
|
module.cache.occurred[callback] = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.cache.occurred = {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save: {
|
||
|
|
calculations: function() {
|
||
|
|
module.verbose('Saving all calculations necessary to determine positioning');
|
||
|
|
module.save.scroll();
|
||
|
|
module.save.direction();
|
||
|
|
module.save.screenCalculations();
|
||
|
|
module.save.elementCalculations();
|
||
|
|
},
|
||
|
|
occurred: function(callback) {
|
||
|
|
if(callback) {
|
||
|
|
if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) {
|
||
|
|
module.verbose('Saving callback occurred', callback);
|
||
|
|
module.cache.occurred[callback] = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scroll: function() {
|
||
|
|
module.cache.scroll = $context.scrollTop() + settings.offset;
|
||
|
|
},
|
||
|
|
direction: function() {
|
||
|
|
var
|
||
|
|
scroll = module.get.scroll(),
|
||
|
|
lastScroll = module.get.lastScroll(),
|
||
|
|
direction
|
||
|
|
;
|
||
|
|
if(scroll > lastScroll && lastScroll) {
|
||
|
|
direction = 'down';
|
||
|
|
}
|
||
|
|
else if(scroll < lastScroll && lastScroll) {
|
||
|
|
direction = 'up';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
direction = 'static';
|
||
|
|
}
|
||
|
|
module.cache.direction = direction;
|
||
|
|
return module.cache.direction;
|
||
|
|
},
|
||
|
|
elementPosition: function() {
|
||
|
|
var
|
||
|
|
element = module.cache.element,
|
||
|
|
screen = module.get.screenSize()
|
||
|
|
;
|
||
|
|
module.verbose('Saving element position');
|
||
|
|
// (quicker than $.extend)
|
||
|
|
element.fits = (element.height < screen.height);
|
||
|
|
element.offset = $module.offset();
|
||
|
|
element.width = $module.outerWidth();
|
||
|
|
element.height = $module.outerHeight();
|
||
|
|
// store
|
||
|
|
module.cache.element = element;
|
||
|
|
return element;
|
||
|
|
},
|
||
|
|
elementCalculations: function() {
|
||
|
|
var
|
||
|
|
screen = module.get.screenCalculations(),
|
||
|
|
element = module.get.elementPosition()
|
||
|
|
;
|
||
|
|
// offset
|
||
|
|
if(settings.includeMargin) {
|
||
|
|
element.margin = {};
|
||
|
|
element.margin.top = parseInt($module.css('margin-top'), 10);
|
||
|
|
element.margin.bottom = parseInt($module.css('margin-bottom'), 10);
|
||
|
|
element.top = element.offset.top - element.margin.top;
|
||
|
|
element.bottom = element.offset.top + element.height + element.margin.bottom;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
element.top = element.offset.top;
|
||
|
|
element.bottom = element.offset.top + element.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
// visibility
|
||
|
|
element.topVisible = (screen.bottom >= element.top);
|
||
|
|
element.topPassed = (screen.top >= element.top);
|
||
|
|
element.bottomVisible = (screen.bottom >= element.bottom);
|
||
|
|
element.bottomPassed = (screen.top >= element.bottom);
|
||
|
|
element.pixelsPassed = 0;
|
||
|
|
element.percentagePassed = 0;
|
||
|
|
|
||
|
|
// meta calculations
|
||
|
|
element.visible = (element.topVisible || element.bottomVisible);
|
||
|
|
element.passing = (element.topPassed && !element.bottomPassed);
|
||
|
|
element.hidden = (!element.topVisible && !element.bottomVisible);
|
||
|
|
|
||
|
|
// passing calculations
|
||
|
|
if(element.passing) {
|
||
|
|
element.pixelsPassed = (screen.top - element.top);
|
||
|
|
element.percentagePassed = (screen.top - element.top) / element.height;
|
||
|
|
}
|
||
|
|
module.cache.element = element;
|
||
|
|
module.verbose('Updated element calculations', element);
|
||
|
|
return element;
|
||
|
|
},
|
||
|
|
screenCalculations: function() {
|
||
|
|
var
|
||
|
|
scroll = module.get.scroll()
|
||
|
|
;
|
||
|
|
module.save.direction();
|
||
|
|
module.cache.screen.top = scroll;
|
||
|
|
module.cache.screen.bottom = scroll + module.cache.screen.height;
|
||
|
|
return module.cache.screen;
|
||
|
|
},
|
||
|
|
screenSize: function() {
|
||
|
|
module.verbose('Saving window position');
|
||
|
|
module.cache.screen = {
|
||
|
|
height: $context.height()
|
||
|
|
};
|
||
|
|
},
|
||
|
|
position: function() {
|
||
|
|
module.save.screenSize();
|
||
|
|
module.save.elementPosition();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
get: {
|
||
|
|
pixelsPassed: function(amount) {
|
||
|
|
var
|
||
|
|
element = module.get.elementCalculations()
|
||
|
|
;
|
||
|
|
if(amount.search('%') > -1) {
|
||
|
|
return ( element.height * (parseInt(amount, 10) / 100) );
|
||
|
|
}
|
||
|
|
return parseInt(amount, 10);
|
||
|
|
},
|
||
|
|
occurred: function(callback) {
|
||
|
|
return (module.cache.occurred !== undefined)
|
||
|
|
? module.cache.occurred[callback] || false
|
||
|
|
: false
|
||
|
|
;
|
||
|
|
},
|
||
|
|
direction: function() {
|
||
|
|
if(module.cache.direction === undefined) {
|
||
|
|
module.save.direction();
|
||
|
|
}
|
||
|
|
return module.cache.direction;
|
||
|
|
},
|
||
|
|
elementPosition: function() {
|
||
|
|
if(module.cache.element === undefined) {
|
||
|
|
module.save.elementPosition();
|
||
|
|
}
|
||
|
|
return module.cache.element;
|
||
|
|
},
|
||
|
|
elementCalculations: function() {
|
||
|
|
if(module.cache.element === undefined) {
|
||
|
|
module.save.elementCalculations();
|
||
|
|
}
|
||
|
|
return module.cache.element;
|
||
|
|
},
|
||
|
|
screenCalculations: function() {
|
||
|
|
if(module.cache.screen === undefined) {
|
||
|
|
module.save.screenCalculations();
|
||
|
|
}
|
||
|
|
return module.cache.screen;
|
||
|
|
},
|
||
|
|
screenSize: function() {
|
||
|
|
if(module.cache.screen === undefined) {
|
||
|
|
module.save.screenSize();
|
||
|
|
}
|
||
|
|
return module.cache.screen;
|
||
|
|
},
|
||
|
|
scroll: function() {
|
||
|
|
if(module.cache.scroll === undefined) {
|
||
|
|
module.save.scroll();
|
||
|
|
}
|
||
|
|
return module.cache.scroll;
|
||
|
|
},
|
||
|
|
lastScroll: function() {
|
||
|
|
if(module.cache.screen === undefined) {
|
||
|
|
module.debug('First scroll event, no last scroll could be found');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return module.cache.screen.top;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setting: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, settings, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
settings[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return settings[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
internal: function(name, value) {
|
||
|
|
if( $.isPlainObject(name) ) {
|
||
|
|
$.extend(true, module, name);
|
||
|
|
}
|
||
|
|
else if(value !== undefined) {
|
||
|
|
module[name] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return module[name];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
debug: function() {
|
||
|
|
if(settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.debug.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
verbose: function() {
|
||
|
|
if(settings.verbose && settings.debug) {
|
||
|
|
if(settings.performance) {
|
||
|
|
module.performance.log(arguments);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||
|
|
module.verbose.apply(console, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||
|
|
module.error.apply(console, arguments);
|
||
|
|
},
|
||
|
|
performance: {
|
||
|
|
log: function(message) {
|
||
|
|
var
|
||
|
|
currentTime,
|
||
|
|
executionTime,
|
||
|
|
previousTime
|
||
|
|
;
|
||
|
|
if(settings.performance) {
|
||
|
|
currentTime = new Date().getTime();
|
||
|
|
previousTime = time || currentTime;
|
||
|
|
executionTime = currentTime - previousTime;
|
||
|
|
time = currentTime;
|
||
|
|
performance.push({
|
||
|
|
'Name' : message[0],
|
||
|
|
'Arguments' : [].slice.call(message, 1) || '',
|
||
|
|
'Element' : element,
|
||
|
|
'Execution Time' : executionTime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
module.performance.timer = setTimeout(module.performance.display, 100);
|
||
|
|
},
|
||
|
|
display: function() {
|
||
|
|
var
|
||
|
|
title = settings.name + ':',
|
||
|
|
totalTime = 0
|
||
|
|
;
|
||
|
|
time = false;
|
||
|
|
clearTimeout(module.performance.timer);
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
totalTime += data['Execution Time'];
|
||
|
|
});
|
||
|
|
title += ' ' + totalTime + 'ms';
|
||
|
|
if(moduleSelector) {
|
||
|
|
title += ' \'' + moduleSelector + '\'';
|
||
|
|
}
|
||
|
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||
|
|
console.groupCollapsed(title);
|
||
|
|
if(console.table) {
|
||
|
|
console.table(performance);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$.each(performance, function(index, data) {
|
||
|
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.groupEnd();
|
||
|
|
}
|
||
|
|
performance = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
invoke: function(query, passedArguments, context) {
|
||
|
|
var
|
||
|
|
object = instance,
|
||
|
|
maxDepth,
|
||
|
|
found,
|
||
|
|
response
|
||
|
|
;
|
||
|
|
passedArguments = passedArguments || queryArguments;
|
||
|
|
context = element || context;
|
||
|
|
if(typeof query == 'string' && object !== undefined) {
|
||
|
|
query = query.split(/[\. ]/);
|
||
|
|
maxDepth = query.length - 1;
|
||
|
|
$.each(query, function(depth, value) {
|
||
|
|
var camelCaseValue = (depth != maxDepth)
|
||
|
|
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||
|
|
: query
|
||
|
|
;
|
||
|
|
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[camelCaseValue];
|
||
|
|
}
|
||
|
|
else if( object[camelCaseValue] !== undefined ) {
|
||
|
|
found = object[camelCaseValue];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||
|
|
object = object[value];
|
||
|
|
}
|
||
|
|
else if( object[value] !== undefined ) {
|
||
|
|
found = object[value];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
module.error(error.method, query);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if ( $.isFunction( found ) ) {
|
||
|
|
response = found.apply(context, passedArguments);
|
||
|
|
}
|
||
|
|
else if(found !== undefined) {
|
||
|
|
response = found;
|
||
|
|
}
|
||
|
|
if($.isArray(returnedValue)) {
|
||
|
|
returnedValue.push(response);
|
||
|
|
}
|
||
|
|
else if(returnedValue !== undefined) {
|
||
|
|
returnedValue = [returnedValue, response];
|
||
|
|
}
|
||
|
|
else if(response !== undefined) {
|
||
|
|
returnedValue = response;
|
||
|
|
}
|
||
|
|
return found;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if(methodInvoked) {
|
||
|
|
if(instance === undefined) {
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
module.invoke(query);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(instance !== undefined) {
|
||
|
|
instance.invoke('destroy');
|
||
|
|
}
|
||
|
|
module.initialize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
return (returnedValue !== undefined)
|
||
|
|
? returnedValue
|
||
|
|
: this
|
||
|
|
;
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.visibility.settings = {
|
||
|
|
|
||
|
|
name : 'Visibility',
|
||
|
|
namespace : 'visibility',
|
||
|
|
|
||
|
|
debug : false,
|
||
|
|
verbose : false,
|
||
|
|
performance : true,
|
||
|
|
|
||
|
|
// whether to use mutation observers to follow changes
|
||
|
|
observeChanges : true,
|
||
|
|
|
||
|
|
// callback should only occur one time
|
||
|
|
once : true,
|
||
|
|
|
||
|
|
// callback should fire continuously whe evaluates to true
|
||
|
|
continuous : false,
|
||
|
|
|
||
|
|
// offset to use with scroll top
|
||
|
|
offset : 0,
|
||
|
|
|
||
|
|
// whether to include margin in elements position
|
||
|
|
includeMargin : false,
|
||
|
|
|
||
|
|
// scroll context for visibility checks
|
||
|
|
context : window,
|
||
|
|
|
||
|
|
// check position immediately on init
|
||
|
|
initialCheck : true,
|
||
|
|
|
||
|
|
// visibility check delay in ms (defaults to animationFrame)
|
||
|
|
throttle : false,
|
||
|
|
|
||
|
|
// special visibility type (image, fixed)
|
||
|
|
type : false,
|
||
|
|
|
||
|
|
// image only animation settings
|
||
|
|
transition : false,
|
||
|
|
duration : 1000,
|
||
|
|
|
||
|
|
// array of callbacks for percentage
|
||
|
|
onPassed : {},
|
||
|
|
|
||
|
|
// standard callbacks
|
||
|
|
onPassing : false,
|
||
|
|
onTopVisible : false,
|
||
|
|
onBottomVisible : false,
|
||
|
|
onTopPassed : false,
|
||
|
|
onBottomPassed : false,
|
||
|
|
|
||
|
|
// reverse callbacks
|
||
|
|
onPassingReverse : false,
|
||
|
|
onTopVisibleReverse : false,
|
||
|
|
onBottomVisibleReverse : false,
|
||
|
|
onTopPassedReverse : false,
|
||
|
|
onBottomPassedReverse : false,
|
||
|
|
|
||
|
|
// utility callbacks
|
||
|
|
onUpdate : false, // disabled by default for performance
|
||
|
|
onRefresh : function(){},
|
||
|
|
|
||
|
|
className: {
|
||
|
|
fixed: 'fixed'
|
||
|
|
},
|
||
|
|
|
||
|
|
error : {
|
||
|
|
method : 'The method you called is not defined.'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery, window , document );
|