12470 lines
402 KiB
JavaScript
12470 lines
402 KiB
JavaScript
/*
|
|
* # Semantic UI - 2.2.10
|
|
* 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 2.2.10 - Site
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* 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, normalizing 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, 500);
|
|
},
|
|
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 : false,
|
|
performance : true,
|
|
|
|
modules: [
|
|
'accordion',
|
|
'api',
|
|
'checkbox',
|
|
'dimmer',
|
|
'dropdown',
|
|
'embed',
|
|
'form',
|
|
'modal',
|
|
'nag',
|
|
'popup',
|
|
'rating',
|
|
'shape',
|
|
'sidebar',
|
|
'state',
|
|
'sticky',
|
|
'tab',
|
|
'transition',
|
|
'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 2.2.10 - Form Validation
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.fn.form = function(parameters) {
|
|
var
|
|
$allModules = $(this),
|
|
moduleSelector = $allModules.selector || '',
|
|
|
|
time = new Date().getTime(),
|
|
performance = [],
|
|
|
|
query = arguments[0],
|
|
legacyParameters = arguments[1],
|
|
methodInvoked = (typeof query == 'string'),
|
|
queryArguments = [].slice.call(arguments, 1),
|
|
returnedValue
|
|
;
|
|
$allModules
|
|
.each(function() {
|
|
var
|
|
$module = $(this),
|
|
element = this,
|
|
|
|
formErrors = [],
|
|
keyHeldDown = false,
|
|
|
|
// set at run-time
|
|
$field,
|
|
$group,
|
|
$message,
|
|
$prompt,
|
|
$submit,
|
|
$clear,
|
|
$reset,
|
|
|
|
settings,
|
|
validation,
|
|
|
|
metadata,
|
|
selector,
|
|
className,
|
|
regExp,
|
|
error,
|
|
|
|
namespace,
|
|
moduleNamespace,
|
|
eventNamespace,
|
|
|
|
instance,
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
|
|
// settings grabbed at run time
|
|
module.get.settings();
|
|
if(methodInvoked) {
|
|
if(instance === undefined) {
|
|
module.instantiate();
|
|
}
|
|
module.invoke(query);
|
|
}
|
|
else {
|
|
if(instance !== undefined) {
|
|
instance.invoke('destroy');
|
|
}
|
|
module.verbose('Initializing form validation', $module, 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);
|
|
$group = $module.find(selector.group);
|
|
$message = $module.find(selector.message);
|
|
$prompt = $module.find(selector.prompt);
|
|
|
|
$submit = $module.find(selector.submit);
|
|
$clear = $module.find(selector.clear);
|
|
$reset = $module.find(selector.reset);
|
|
},
|
|
|
|
submit: function() {
|
|
module.verbose('Submitting form', $module);
|
|
$module
|
|
.submit()
|
|
;
|
|
},
|
|
|
|
attachEvents: function(selector, action) {
|
|
action = action || 'submit';
|
|
$(selector)
|
|
.on('click' + eventNamespace, function(event) {
|
|
module[action]();
|
|
event.preventDefault();
|
|
})
|
|
;
|
|
},
|
|
|
|
bindEvents: function() {
|
|
module.verbose('Attaching form events');
|
|
$module
|
|
.on('submit' + eventNamespace, module.validate.form)
|
|
.on('blur' + eventNamespace, selector.field, module.event.field.blur)
|
|
.on('click' + eventNamespace, selector.submit, module.submit)
|
|
.on('click' + eventNamespace, selector.reset, module.reset)
|
|
.on('click' + eventNamespace, selector.clear, module.clear)
|
|
;
|
|
if(settings.keyboardShortcuts) {
|
|
$module
|
|
.on('keydown' + eventNamespace, selector.field, module.event.field.keydown)
|
|
;
|
|
}
|
|
$field
|
|
.each(function() {
|
|
var
|
|
$input = $(this),
|
|
type = $input.prop('type'),
|
|
inputEvent = module.get.changeEvent(type, $input)
|
|
;
|
|
$(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) {
|
|
$field.prop('checked', false);
|
|
}
|
|
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(defaultValue === undefined) {
|
|
return;
|
|
}
|
|
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);
|
|
$field.prop('checked', defaultValue);
|
|
}
|
|
else {
|
|
module.verbose('Resetting field value', $field, defaultValue);
|
|
$field.val(defaultValue);
|
|
}
|
|
})
|
|
;
|
|
},
|
|
|
|
determine: {
|
|
isValid: function() {
|
|
var
|
|
allValid = true
|
|
;
|
|
$.each(validation, function(fieldName, field) {
|
|
if( !( module.validate.field(field, fieldName, true) ) ) {
|
|
allValid = false;
|
|
}
|
|
});
|
|
return allValid;
|
|
}
|
|
},
|
|
|
|
is: {
|
|
bracketedRule: function(rule) {
|
|
return (rule.type && rule.type.match(settings.regExp.bracket));
|
|
},
|
|
empty: function($field) {
|
|
if(!$field || $field.length === 0) {
|
|
return true;
|
|
}
|
|
else if($field.is('input[type="checkbox"]')) {
|
|
return !$field.is(':checked');
|
|
}
|
|
else {
|
|
return module.is.blank($field);
|
|
}
|
|
},
|
|
blank: function($field) {
|
|
return $.trim($field.val()) === '';
|
|
},
|
|
valid: function(field) {
|
|
var
|
|
allValid = true
|
|
;
|
|
if(field) {
|
|
module.verbose('Checking if field is valid', field);
|
|
return module.validate.field(validation[field], field, false);
|
|
}
|
|
else {
|
|
module.verbose('Checking if form is valid');
|
|
$.each(validation, function(fieldName, field) {
|
|
if( !module.is.valid(fieldName) ) {
|
|
allValid = false;
|
|
}
|
|
});
|
|
return allValid;
|
|
}
|
|
}
|
|
},
|
|
|
|
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,
|
|
isInput = $field.is(selector.input),
|
|
isCheckbox = $field.is(selector.checkbox),
|
|
isInDropdown = ($field.closest(selector.uiDropdown).length > 0),
|
|
keyCode = {
|
|
enter : 13,
|
|
escape : 27
|
|
}
|
|
;
|
|
if( key == keyCode.escape) {
|
|
module.verbose('Escape key pressed blurring field');
|
|
$field
|
|
.blur()
|
|
;
|
|
}
|
|
if(!event.ctrlKey && key == keyCode.enter && isInput && !isInDropdown && !isCheckbox) {
|
|
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;
|
|
},
|
|
blur: function(event) {
|
|
var
|
|
$field = $(this),
|
|
$fieldGroup = $field.closest($group),
|
|
validationRules = module.get.validation($field)
|
|
;
|
|
if( $fieldGroup.hasClass(className.error) ) {
|
|
module.debug('Revalidating field', $field, validationRules);
|
|
if(validationRules) {
|
|
module.validate.field( validationRules );
|
|
}
|
|
}
|
|
else if(settings.on == 'blur' || settings.on == 'change') {
|
|
if(validationRules) {
|
|
module.validate.field( validationRules );
|
|
}
|
|
}
|
|
},
|
|
change: function(event) {
|
|
var
|
|
$field = $(this),
|
|
$fieldGroup = $field.closest($group),
|
|
validationRules = module.get.validation($field)
|
|
;
|
|
if(validationRules && (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( validationRules );
|
|
}, settings.delay);
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
get: {
|
|
ancillaryValue: function(rule) {
|
|
if(!rule.type || (!rule.value && !module.is.bracketedRule(rule))) {
|
|
return false;
|
|
}
|
|
return (rule.value !== undefined)
|
|
? rule.value
|
|
: rule.type.match(settings.regExp.bracket)[1] + ''
|
|
;
|
|
},
|
|
ruleName: function(rule) {
|
|
if( module.is.bracketedRule(rule) ) {
|
|
return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], '');
|
|
}
|
|
return rule.type;
|
|
},
|
|
changeEvent: function(type, $input) {
|
|
if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) {
|
|
return 'change';
|
|
}
|
|
else {
|
|
return module.get.inputEvent();
|
|
}
|
|
},
|
|
inputEvent: function() {
|
|
return (document.createElement('input').oninput !== undefined)
|
|
? 'input'
|
|
: (document.createElement('input').onpropertychange !== undefined)
|
|
? 'propertychange'
|
|
: 'keyup'
|
|
;
|
|
},
|
|
prompt: function(rule, field) {
|
|
var
|
|
ruleName = module.get.ruleName(rule),
|
|
ancillary = module.get.ancillaryValue(rule),
|
|
prompt = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
|
|
requiresValue = (prompt.search('{value}') !== -1),
|
|
requiresName = (prompt.search('{name}') !== -1),
|
|
$label,
|
|
$field,
|
|
name
|
|
;
|
|
if(requiresName || requiresValue) {
|
|
$field = module.get.field(field.identifier);
|
|
}
|
|
if(requiresValue) {
|
|
prompt = prompt.replace('{value}', $field.val());
|
|
}
|
|
if(requiresName) {
|
|
$label = $field.closest(selector.group).find('label').eq(0);
|
|
name = ($label.length == 1)
|
|
? $label.text()
|
|
: $field.prop('placeholder') || settings.text.unspecifiedField
|
|
;
|
|
prompt = prompt.replace('{name}', name);
|
|
}
|
|
prompt = prompt.replace('{identifier}', field.identifier);
|
|
prompt = prompt.replace('{ruleValue}', ancillary);
|
|
if(!rule.prompt) {
|
|
module.verbose('Using default validation prompt for type', prompt, ruleName);
|
|
}
|
|
return prompt;
|
|
},
|
|
settings: function() {
|
|
if($.isPlainObject(parameters)) {
|
|
var
|
|
keys = Object.keys(parameters),
|
|
isLegacySettings = (keys.length > 0)
|
|
? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined)
|
|
: false,
|
|
ruleKeys
|
|
;
|
|
if(isLegacySettings) {
|
|
// 1.x (ducktyped)
|
|
settings = $.extend(true, {}, $.fn.form.settings, legacyParameters);
|
|
validation = $.extend({}, $.fn.form.settings.defaults, parameters);
|
|
module.error(settings.error.oldSyntax, element);
|
|
module.verbose('Extending settings from legacy parameters', validation, settings);
|
|
}
|
|
else {
|
|
// 2.x
|
|
if(parameters.fields) {
|
|
ruleKeys = Object.keys(parameters.fields);
|
|
if( typeof parameters.fields[ruleKeys[0]] == 'string' || $.isArray(parameters.fields[ruleKeys[0]]) ) {
|
|
$.each(parameters.fields, function(name, rules) {
|
|
if(typeof rules == 'string') {
|
|
rules = [rules];
|
|
}
|
|
parameters.fields[name] = {
|
|
rules: []
|
|
};
|
|
$.each(rules, function(index, rule) {
|
|
parameters.fields[name].rules.push({ type: rule });
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
settings = $.extend(true, {}, $.fn.form.settings, parameters);
|
|
validation = $.extend({}, $.fn.form.settings.defaults, settings.fields);
|
|
module.verbose('Extending settings', validation, settings);
|
|
}
|
|
}
|
|
else {
|
|
settings = $.fn.form.settings;
|
|
validation = $.fn.form.settings.defaults;
|
|
module.verbose('Using default form validation', validation, settings);
|
|
}
|
|
|
|
// shorthand
|
|
namespace = settings.namespace;
|
|
metadata = settings.metadata;
|
|
selector = settings.selector;
|
|
className = settings.className;
|
|
regExp = settings.regExp;
|
|
error = settings.error;
|
|
moduleNamespace = 'module-' + namespace;
|
|
eventNamespace = '.' + namespace;
|
|
|
|
// grab instance
|
|
instance = $module.data(moduleNamespace);
|
|
|
|
// refresh selector cache
|
|
module.refresh();
|
|
},
|
|
field: function(identifier) {
|
|
module.verbose('Finding field with identifier', identifier);
|
|
identifier = module.escape.string(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
|
|
fieldValidation,
|
|
identifier
|
|
;
|
|
if(!validation) {
|
|
return false;
|
|
}
|
|
$.each(validation, function(fieldName, field) {
|
|
identifier = field.identifier || fieldName;
|
|
if( module.get.field(identifier)[0] == $field[0] ) {
|
|
field.identifier = identifier;
|
|
fieldValidation = field;
|
|
}
|
|
});
|
|
return fieldValidation || 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 || true);
|
|
}
|
|
else {
|
|
values[name].push(false);
|
|
}
|
|
}
|
|
else {
|
|
values[name].push(value);
|
|
}
|
|
}
|
|
else {
|
|
if(isRadio) {
|
|
if(isChecked) {
|
|
values[name] = value;
|
|
}
|
|
}
|
|
else if(isCheckbox) {
|
|
if(isChecked) {
|
|
values[name] = value || true;
|
|
}
|
|
else {
|
|
values[name] = false;
|
|
}
|
|
}
|
|
else {
|
|
values[name] = value;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return values;
|
|
}
|
|
},
|
|
|
|
has: {
|
|
|
|
field: function(identifier) {
|
|
module.verbose('Checking for existence of a field with identifier', identifier);
|
|
identifier = module.escape.string(identifier);
|
|
if(typeof identifier !== 'string') {
|
|
module.error(error.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;
|
|
}
|
|
|
|
},
|
|
|
|
escape: {
|
|
string: function(text) {
|
|
text = String(text);
|
|
return text.replace(regExp.escape, '\\$&');
|
|
}
|
|
},
|
|
|
|
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);
|
|
module.set.error();
|
|
$message
|
|
.html( settings.templates.error(errors) )
|
|
;
|
|
}
|
|
},
|
|
|
|
remove: {
|
|
prompt: function(identifier) {
|
|
var
|
|
$field = module.get.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', identifier);
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
validate: {
|
|
|
|
form: function(event, ignoreCallbacks) {
|
|
var
|
|
values = module.get.values(),
|
|
apiRequest
|
|
;
|
|
|
|
// input keydown event will fire submit repeatedly by browser default
|
|
if(keyHeldDown) {
|
|
return false;
|
|
}
|
|
|
|
// reset errors
|
|
formErrors = [];
|
|
if( module.determine.isValid() ) {
|
|
module.debug('Form has no validation errors, submitting');
|
|
module.set.success();
|
|
if(ignoreCallbacks !== true) {
|
|
return settings.onSuccess.call(element, event, values);
|
|
}
|
|
}
|
|
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();
|
|
}
|
|
if(ignoreCallbacks !== true) {
|
|
return settings.onFailure.call(element, formErrors, values);
|
|
}
|
|
}
|
|
},
|
|
|
|
// takes a validation object and returns whether field passes validation
|
|
field: function(field, fieldName, showErrors) {
|
|
showErrors = (showErrors !== undefined)
|
|
? showErrors
|
|
: true
|
|
;
|
|
if(typeof field == 'string') {
|
|
module.verbose('Validating field', field);
|
|
fieldName = field;
|
|
field = validation[field];
|
|
}
|
|
var
|
|
identifier = field.identifier || fieldName,
|
|
$field = module.get.field(identifier),
|
|
$dependsField = (field.depends)
|
|
? module.get.field(field.depends)
|
|
: false,
|
|
fieldValid = true,
|
|
fieldErrors = []
|
|
;
|
|
if(!field.identifier) {
|
|
module.debug('Using field name as identifier', identifier);
|
|
field.identifier = identifier;
|
|
}
|
|
if($field.prop('disabled')) {
|
|
module.debug('Field is disabled. Skipping', identifier);
|
|
fieldValid = true;
|
|
}
|
|
else if(field.optional && module.is.blank($field)){
|
|
module.debug('Field is optional and blank. Skipping', identifier);
|
|
fieldValid = true;
|
|
}
|
|
else if(field.depends && module.is.empty($dependsField)) {
|
|
module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);
|
|
fieldValid = true;
|
|
}
|
|
else if(field.rules !== undefined) {
|
|
$.each(field.rules, function(index, rule) {
|
|
if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) {
|
|
module.debug('Field is invalid', identifier, rule.type);
|
|
fieldErrors.push(module.get.prompt(rule, field));
|
|
fieldValid = false;
|
|
}
|
|
});
|
|
}
|
|
if(fieldValid) {
|
|
if(showErrors) {
|
|
module.remove.prompt(identifier, fieldErrors);
|
|
settings.onValid.call($field);
|
|
}
|
|
}
|
|
else {
|
|
if(showErrors) {
|
|
formErrors = formErrors.concat(fieldErrors);
|
|
module.add.prompt(identifier, fieldErrors);
|
|
settings.onInvalid.call($field, fieldErrors);
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
// takes validation rule and returns whether field passes rule
|
|
rule: function(field, rule) {
|
|
var
|
|
$field = module.get.field(field.identifier),
|
|
type = rule.type,
|
|
value = $field.val(),
|
|
isValid = true,
|
|
ancillary = module.get.ancillaryValue(rule),
|
|
ruleName = module.get.ruleName(rule),
|
|
ruleFunction = settings.rules[ruleName]
|
|
;
|
|
if( !$.isFunction(ruleFunction) ) {
|
|
module.error(error.noRule, ruleName);
|
|
return;
|
|
}
|
|
// cast to string avoiding encoding special values
|
|
value = (value === undefined || value === '' || value === null)
|
|
? ''
|
|
: $.trim(value + '')
|
|
;
|
|
return ruleFunction.call($field, value, ancillary);
|
|
}
|
|
},
|
|
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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;
|
|
}
|
|
};
|
|
module.initialize();
|
|
})
|
|
;
|
|
|
|
return (returnedValue !== undefined)
|
|
? returnedValue
|
|
: this
|
|
;
|
|
};
|
|
|
|
$.fn.form.settings = {
|
|
|
|
name : 'Form',
|
|
namespace : 'form',
|
|
|
|
debug : false,
|
|
verbose : false,
|
|
performance : true,
|
|
|
|
fields : false,
|
|
|
|
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'
|
|
},
|
|
|
|
regExp: {
|
|
htmlID : /^[a-zA-Z][\w:.-]*$/g,
|
|
bracket : /\[(.*)\]/i,
|
|
decimal : /^\d+\.?\d*$/,
|
|
email : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,
|
|
escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
|
|
flags : /^\/(.*)\/(.*)?/,
|
|
integer : /^\-?\d+$/,
|
|
number : /^\-?\d*(\.\d+)?$/,
|
|
url : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i
|
|
},
|
|
|
|
text: {
|
|
unspecifiedRule : 'Please enter a valid value',
|
|
unspecifiedField : 'This field'
|
|
},
|
|
|
|
prompt: {
|
|
empty : '{name} must have a value',
|
|
checked : '{name} must be checked',
|
|
email : '{name} must be a valid e-mail',
|
|
url : '{name} must be a valid url',
|
|
regExp : '{name} is not formatted correctly',
|
|
integer : '{name} must be an integer',
|
|
decimal : '{name} must be a decimal number',
|
|
number : '{name} must be set to a number',
|
|
is : '{name} must be "{ruleValue}"',
|
|
isExactly : '{name} must be exactly "{ruleValue}"',
|
|
not : '{name} cannot be set to "{ruleValue}"',
|
|
notExactly : '{name} cannot be set to exactly "{ruleValue}"',
|
|
contain : '{name} cannot contain "{ruleValue}"',
|
|
containExactly : '{name} cannot contain exactly "{ruleValue}"',
|
|
doesntContain : '{name} must contain "{ruleValue}"',
|
|
doesntContainExactly : '{name} must contain exactly "{ruleValue}"',
|
|
minLength : '{name} must be at least {ruleValue} characters',
|
|
length : '{name} must be at least {ruleValue} characters',
|
|
exactLength : '{name} must be exactly {ruleValue} characters',
|
|
maxLength : '{name} cannot be longer than {ruleValue} characters',
|
|
match : '{name} must match {ruleValue} field',
|
|
different : '{name} must have a different value than {ruleValue} field',
|
|
creditCard : '{name} must be a valid credit card number',
|
|
minCount : '{name} must have at least {ruleValue} choices',
|
|
exactCount : '{name} must have exactly {ruleValue} choices',
|
|
maxCount : '{name} must have {ruleValue} or less choices'
|
|
},
|
|
|
|
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:not([type="reset"])',
|
|
submit : '.submit:not([type="submit"])',
|
|
uiCheckbox : '.ui.checkbox',
|
|
uiDropdown : '.ui.dropdown'
|
|
},
|
|
|
|
className : {
|
|
error : 'error',
|
|
label : 'ui prompt label',
|
|
pressed : 'down',
|
|
success : 'success'
|
|
},
|
|
|
|
error: {
|
|
identifier : 'You must specify a string identifier for each field',
|
|
method : 'The method you called is not defined.',
|
|
noRule : 'There is no rule matching the one you specified',
|
|
oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.'
|
|
},
|
|
|
|
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 basic red pointing prompt label')
|
|
.html(errors[0])
|
|
;
|
|
}
|
|
},
|
|
|
|
rules: {
|
|
|
|
// is not empty or blank string
|
|
empty: function(value) {
|
|
return !(value === undefined || '' === value || $.isArray(value) && value.length === 0);
|
|
},
|
|
|
|
// checkbox checked
|
|
checked: function() {
|
|
return ($(this).filter(':checked').length > 0);
|
|
},
|
|
|
|
// is most likely an email
|
|
email: function(value){
|
|
return $.fn.form.settings.regExp.email.test(value);
|
|
},
|
|
|
|
// value is most likely url
|
|
url: function(value) {
|
|
return $.fn.form.settings.regExp.url.test(value);
|
|
},
|
|
|
|
// matches specified regExp
|
|
regExp: function(value, regExp) {
|
|
if(regExp instanceof RegExp) {
|
|
return value.match(regExp);
|
|
}
|
|
var
|
|
regExpParts = regExp.match($.fn.form.settings.regExp.flags),
|
|
flags
|
|
;
|
|
// regular expression specified as /baz/gi (flags)
|
|
if(regExpParts) {
|
|
regExp = (regExpParts.length >= 2)
|
|
? regExpParts[1]
|
|
: regExp
|
|
;
|
|
flags = (regExpParts.length >= 3)
|
|
? regExpParts[2]
|
|
: ''
|
|
;
|
|
}
|
|
return value.match( new RegExp(regExp, flags) );
|
|
},
|
|
|
|
// is valid integer or matches range
|
|
integer: function(value, range) {
|
|
var
|
|
intRegExp = $.fn.form.settings.regExp.integer,
|
|
min,
|
|
max,
|
|
parts
|
|
;
|
|
if( !range || ['', '..'].indexOf(range) !== -1) {
|
|
// 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 valid number (with decimal)
|
|
decimal: function(value) {
|
|
return $.fn.form.settings.regExp.decimal.test(value);
|
|
},
|
|
|
|
// is valid number
|
|
number: function(value) {
|
|
return $.fn.form.settings.regExp.number.test(value);
|
|
},
|
|
|
|
// 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);
|
|
},
|
|
|
|
// value is not another 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 another value (case sensitive)
|
|
notExactly: function(value, notValue) {
|
|
return (value != notValue);
|
|
},
|
|
|
|
// value contains text (insensitive)
|
|
contains: function(value, text) {
|
|
// escape regex characters
|
|
text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
|
|
return (value.search( new RegExp(text, 'i') ) !== -1);
|
|
},
|
|
|
|
// value contains text (case sensitive)
|
|
containsExactly: function(value, text) {
|
|
// escape regex characters
|
|
text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
|
|
return (value.search( new RegExp(text) ) !== -1);
|
|
},
|
|
|
|
// value contains text (insensitive)
|
|
doesntContain: function(value, text) {
|
|
// escape regex characters
|
|
text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
|
|
return (value.search( new RegExp(text, 'i') ) === -1);
|
|
},
|
|
|
|
// value contains text (case sensitive)
|
|
doesntContainExactly: function(value, text) {
|
|
// escape regex characters
|
|
text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
|
|
return (value.search( new RegExp(text) ) === -1);
|
|
},
|
|
|
|
// is at least string length
|
|
minLength: function(value, requiredLength) {
|
|
return (value !== undefined)
|
|
? (value.length >= requiredLength)
|
|
: false
|
|
;
|
|
},
|
|
|
|
// see rls notes for 2.0.6 (this is a duplicate of minLength)
|
|
length: function(value, requiredLength) {
|
|
return (value !== undefined)
|
|
? (value.length >= requiredLength)
|
|
: false
|
|
;
|
|
},
|
|
|
|
// is exactly length
|
|
exactLength: function(value, requiredLength) {
|
|
return (value !== undefined)
|
|
? (value.length == requiredLength)
|
|
: false
|
|
;
|
|
},
|
|
|
|
// is less than length
|
|
maxLength: function(value, maxLength) {
|
|
return (value !== undefined)
|
|
? (value.length <= maxLength)
|
|
: false
|
|
;
|
|
},
|
|
|
|
// matches another field
|
|
match: function(value, identifier) {
|
|
var
|
|
$form = $(this),
|
|
matchingValue
|
|
;
|
|
if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
|
|
matchingValue = $('[data-validate="'+ identifier +'"]').val();
|
|
}
|
|
else if($('#' + identifier).length > 0) {
|
|
matchingValue = $('#' + identifier).val();
|
|
}
|
|
else if($('[name="' + identifier +'"]').length > 0) {
|
|
matchingValue = $('[name="' + identifier + '"]').val();
|
|
}
|
|
else if( $('[name="' + identifier +'[]"]').length > 0 ) {
|
|
matchingValue = $('[name="' + identifier +'[]"]');
|
|
}
|
|
return (matchingValue !== undefined)
|
|
? ( value.toString() == matchingValue.toString() )
|
|
: false
|
|
;
|
|
},
|
|
|
|
// different than another field
|
|
different: function(value, identifier) {
|
|
// use either id or name of field
|
|
var
|
|
$form = $(this),
|
|
matchingValue
|
|
;
|
|
if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
|
|
matchingValue = $('[data-validate="'+ identifier +'"]').val();
|
|
}
|
|
else if($('#' + identifier).length > 0) {
|
|
matchingValue = $('#' + identifier).val();
|
|
}
|
|
else if($('[name="' + identifier +'"]').length > 0) {
|
|
matchingValue = $('[name="' + identifier + '"]').val();
|
|
}
|
|
else if( $('[name="' + identifier +'[]"]').length > 0 ) {
|
|
matchingValue = $('[name="' + identifier +'[]"]');
|
|
}
|
|
return (matchingValue !== undefined)
|
|
? ( value.toString() !== matchingValue.toString() )
|
|
: false
|
|
;
|
|
},
|
|
|
|
creditCard: function(cardNumber, cardTypes) {
|
|
var
|
|
cards = {
|
|
visa: {
|
|
pattern : /^4/,
|
|
length : [16]
|
|
},
|
|
amex: {
|
|
pattern : /^3[47]/,
|
|
length : [15]
|
|
},
|
|
mastercard: {
|
|
pattern : /^5[1-5]/,
|
|
length : [16]
|
|
},
|
|
discover: {
|
|
pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/,
|
|
length : [16]
|
|
},
|
|
unionPay: {
|
|
pattern : /^(62|88)/,
|
|
length : [16, 17, 18, 19]
|
|
},
|
|
jcb: {
|
|
pattern : /^35(2[89]|[3-8][0-9])/,
|
|
length : [16]
|
|
},
|
|
maestro: {
|
|
pattern : /^(5018|5020|5038|6304|6759|676[1-3])/,
|
|
length : [12, 13, 14, 15, 16, 17, 18, 19]
|
|
},
|
|
dinersClub: {
|
|
pattern : /^(30[0-5]|^36)/,
|
|
length : [14]
|
|
},
|
|
laser: {
|
|
pattern : /^(6304|670[69]|6771)/,
|
|
length : [16, 17, 18, 19]
|
|
},
|
|
visaElectron: {
|
|
pattern : /^(4026|417500|4508|4844|491(3|7))/,
|
|
length : [16]
|
|
}
|
|
},
|
|
valid = {},
|
|
validCard = false,
|
|
requiredTypes = (typeof cardTypes == 'string')
|
|
? cardTypes.split(',')
|
|
: false,
|
|
unionPay,
|
|
validation
|
|
;
|
|
|
|
if(typeof cardNumber !== 'string' || cardNumber.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// allow dashes in card
|
|
cardNumber = cardNumber.replace(/[\-]/g, '');
|
|
|
|
// verify card types
|
|
if(requiredTypes) {
|
|
$.each(requiredTypes, function(index, type){
|
|
// verify each card type
|
|
validation = cards[type];
|
|
if(validation) {
|
|
valid = {
|
|
length : ($.inArray(cardNumber.length, validation.length) !== -1),
|
|
pattern : (cardNumber.search(validation.pattern) !== -1)
|
|
};
|
|
if(valid.length && valid.pattern) {
|
|
validCard = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
if(!validCard) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// skip luhn for UnionPay
|
|
unionPay = {
|
|
number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1),
|
|
pattern : (cardNumber.search(cards.unionPay.pattern) !== -1)
|
|
};
|
|
if(unionPay.number && unionPay.pattern) {
|
|
return true;
|
|
}
|
|
|
|
// verify luhn, adapted from <https://gist.github.com/2134376>
|
|
var
|
|
length = cardNumber.length,
|
|
multiple = 0,
|
|
producedValue = [
|
|
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
[0, 2, 4, 6, 8, 1, 3, 5, 7, 9]
|
|
],
|
|
sum = 0
|
|
;
|
|
while (length--) {
|
|
sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)];
|
|
multiple ^= 1;
|
|
}
|
|
return (sum % 10 === 0 && sum > 0);
|
|
},
|
|
|
|
minCount: function(value, minCount) {
|
|
if(minCount == 0) {
|
|
return true;
|
|
}
|
|
if(minCount == 1) {
|
|
return (value !== '');
|
|
}
|
|
return (value.split(',').length >= minCount);
|
|
},
|
|
|
|
exactCount: function(value, exactCount) {
|
|
if(exactCount == 0) {
|
|
return (value === '');
|
|
}
|
|
if(exactCount == 1) {
|
|
return (value !== '' && value.search(',') === -1);
|
|
}
|
|
return (value.split(',').length == exactCount);
|
|
},
|
|
|
|
maxCount: function(value, maxCount) {
|
|
if(maxCount == 0) {
|
|
return false;
|
|
}
|
|
if(maxCount == 1) {
|
|
return (value.search(',') === -1);
|
|
}
|
|
return (value.split(',').length <= maxCount);
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
})( jQuery, window, document );
|
|
|
|
/*!
|
|
* # Semantic UI 2.2.10 - Checkbox
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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).children(selector.label),
|
|
$input = $(this).children(selector.input),
|
|
input = $input[0],
|
|
|
|
initialLoad = false,
|
|
shortcutPressed = false,
|
|
instance = $module.data(moduleNamespace),
|
|
|
|
observer,
|
|
element = this,
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
module.verbose('Initializing checkbox', settings);
|
|
|
|
module.create.label();
|
|
module.bind.events();
|
|
|
|
module.set.tabbable();
|
|
module.hide.input();
|
|
|
|
module.observeChanges();
|
|
module.instantiate();
|
|
module.setup();
|
|
},
|
|
|
|
instantiate: function() {
|
|
module.verbose('Storing instance of module', module);
|
|
instance = module;
|
|
$module
|
|
.data(moduleNamespace, module)
|
|
;
|
|
},
|
|
|
|
destroy: function() {
|
|
module.verbose('Destroying module');
|
|
module.unbind.events();
|
|
module.show.input();
|
|
$module.removeData(moduleNamespace);
|
|
},
|
|
|
|
fix: {
|
|
reference: function() {
|
|
if( $module.is(selector.input) ) {
|
|
module.debug('Behavior called on <input> adjusting invoked element');
|
|
$module = $module.closest(selector.checkbox);
|
|
module.refresh();
|
|
}
|
|
}
|
|
},
|
|
|
|
setup: function() {
|
|
module.set.initialLoad();
|
|
if( module.is.indeterminate() ) {
|
|
module.debug('Initial value is indeterminate');
|
|
module.indeterminate();
|
|
}
|
|
else if( module.is.checked() ) {
|
|
module.debug('Initial value is checked');
|
|
module.check();
|
|
}
|
|
else {
|
|
module.debug('Initial value is unchecked');
|
|
module.uncheck();
|
|
}
|
|
module.remove.initialLoad();
|
|
},
|
|
|
|
refresh: function() {
|
|
$label = $module.children(selector.label);
|
|
$input = $module.children(selector.input);
|
|
input = $input[0];
|
|
},
|
|
|
|
hide: {
|
|
input: function() {
|
|
module.verbose('Modifying <input> z-index to be unselectable');
|
|
$input.addClass(className.hidden);
|
|
}
|
|
},
|
|
show: {
|
|
input: function() {
|
|
module.verbose('Modifying <input> z-index to be selectable');
|
|
$input.removeClass(className.hidden);
|
|
}
|
|
},
|
|
|
|
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: {
|
|
click: function(event) {
|
|
var
|
|
$target = $(event.target)
|
|
;
|
|
if( $target.is(selector.input) ) {
|
|
module.verbose('Using default check action on initialized checkbox');
|
|
return;
|
|
}
|
|
if( $target.is(selector.link) ) {
|
|
module.debug('Clicking link inside checkbox, skipping toggle');
|
|
return;
|
|
}
|
|
module.toggle();
|
|
$input.focus();
|
|
event.preventDefault();
|
|
},
|
|
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');
|
|
$input.blur();
|
|
shortcutPressed = true;
|
|
}
|
|
else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
|
|
module.verbose('Enter/space key pressed, toggling checkbox');
|
|
module.toggle();
|
|
shortcutPressed = true;
|
|
}
|
|
else {
|
|
shortcutPressed = false;
|
|
}
|
|
},
|
|
keyup: function(event) {
|
|
if(shortcutPressed) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
|
|
check: function() {
|
|
if( !module.should.allowCheck() ) {
|
|
return;
|
|
}
|
|
module.debug('Checking checkbox', $input);
|
|
module.set.checked();
|
|
if( !module.should.ignoreCallbacks() ) {
|
|
settings.onChecked.call(input);
|
|
settings.onChange.call(input);
|
|
}
|
|
},
|
|
|
|
uncheck: function() {
|
|
if( !module.should.allowUncheck() ) {
|
|
return;
|
|
}
|
|
module.debug('Unchecking checkbox');
|
|
module.set.unchecked();
|
|
if( !module.should.ignoreCallbacks() ) {
|
|
settings.onUnchecked.call(input);
|
|
settings.onChange.call(input);
|
|
}
|
|
},
|
|
|
|
indeterminate: function() {
|
|
if( module.should.allowIndeterminate() ) {
|
|
module.debug('Checkbox is already indeterminate');
|
|
return;
|
|
}
|
|
module.debug('Making checkbox indeterminate');
|
|
module.set.indeterminate();
|
|
if( !module.should.ignoreCallbacks() ) {
|
|
settings.onIndeterminate.call(input);
|
|
settings.onChange.call(input);
|
|
}
|
|
},
|
|
|
|
determinate: function() {
|
|
if( module.should.allowDeterminate() ) {
|
|
module.debug('Checkbox is already determinate');
|
|
return;
|
|
}
|
|
module.debug('Making checkbox determinate');
|
|
module.set.determinate();
|
|
if( !module.should.ignoreCallbacks() ) {
|
|
settings.onDeterminate.call(input);
|
|
settings.onChange.call(input);
|
|
}
|
|
},
|
|
|
|
enable: function() {
|
|
if( module.is.enabled() ) {
|
|
module.debug('Checkbox is already enabled');
|
|
return;
|
|
}
|
|
module.debug('Enabling checkbox');
|
|
module.set.enabled();
|
|
settings.onEnable.call(input);
|
|
// preserve legacy callbacks
|
|
settings.onEnabled.call(input);
|
|
},
|
|
|
|
disable: function() {
|
|
if( module.is.disabled() ) {
|
|
module.debug('Checkbox is already disabled');
|
|
return;
|
|
}
|
|
module.debug('Disabling checkbox');
|
|
module.set.disabled();
|
|
settings.onDisable.call(input);
|
|
// preserve legacy callbacks
|
|
settings.onDisabled.call(input);
|
|
},
|
|
|
|
get: {
|
|
radios: function() {
|
|
var
|
|
name = module.get.name()
|
|
;
|
|
return $('input[name="' + name + '"]').closest(selector.checkbox);
|
|
},
|
|
otherRadios: function() {
|
|
return module.get.radios().not($module);
|
|
},
|
|
name: function() {
|
|
return $input.attr('name');
|
|
}
|
|
},
|
|
|
|
is: {
|
|
initialLoad: function() {
|
|
return initialLoad;
|
|
},
|
|
radio: function() {
|
|
return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');
|
|
},
|
|
indeterminate: function() {
|
|
return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');
|
|
},
|
|
checked: function() {
|
|
return $input.prop('checked') !== undefined && $input.prop('checked');
|
|
},
|
|
disabled: function() {
|
|
return $input.prop('disabled') !== undefined && $input.prop('disabled');
|
|
},
|
|
enabled: function() {
|
|
return !module.is.disabled();
|
|
},
|
|
determinate: function() {
|
|
return !module.is.indeterminate();
|
|
},
|
|
unchecked: function() {
|
|
return !module.is.checked();
|
|
}
|
|
},
|
|
|
|
should: {
|
|
allowCheck: function() {
|
|
if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {
|
|
module.debug('Should not allow check, checkbox is already checked');
|
|
return false;
|
|
}
|
|
if(settings.beforeChecked.apply(input) === false) {
|
|
module.debug('Should not allow check, beforeChecked cancelled');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
allowUncheck: function() {
|
|
if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {
|
|
module.debug('Should not allow uncheck, checkbox is already unchecked');
|
|
return false;
|
|
}
|
|
if(settings.beforeUnchecked.apply(input) === false) {
|
|
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
allowIndeterminate: function() {
|
|
if(module.is.indeterminate() && !module.should.forceCallbacks() ) {
|
|
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
|
|
return false;
|
|
}
|
|
if(settings.beforeIndeterminate.apply(input) === false) {
|
|
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
allowDeterminate: function() {
|
|
if(module.is.determinate() && !module.should.forceCallbacks() ) {
|
|
module.debug('Should not allow determinate, checkbox is already determinate');
|
|
return false;
|
|
}
|
|
if(settings.beforeDeterminate.apply(input) === false) {
|
|
module.debug('Should not allow determinate, beforeDeterminate cancelled');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
forceCallbacks: function() {
|
|
return (module.is.initialLoad() && settings.fireOnInit);
|
|
},
|
|
ignoreCallbacks: function() {
|
|
return (initialLoad && !settings.fireOnInit);
|
|
}
|
|
},
|
|
|
|
can: {
|
|
change: function() {
|
|
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );
|
|
},
|
|
uncheck: function() {
|
|
return (typeof settings.uncheckable === 'boolean')
|
|
? settings.uncheckable
|
|
: !module.is.radio()
|
|
;
|
|
}
|
|
},
|
|
|
|
set: {
|
|
initialLoad: function() {
|
|
initialLoad = true;
|
|
},
|
|
checked: function() {
|
|
module.verbose('Setting class to checked');
|
|
$module
|
|
.removeClass(className.indeterminate)
|
|
.addClass(className.checked)
|
|
;
|
|
if( module.is.radio() ) {
|
|
module.uncheckOthers();
|
|
}
|
|
if(!module.is.indeterminate() && module.is.checked()) {
|
|
module.debug('Input is already checked, skipping input property change');
|
|
return;
|
|
}
|
|
module.verbose('Setting state to checked', input);
|
|
$input
|
|
.prop('indeterminate', false)
|
|
.prop('checked', true)
|
|
;
|
|
module.trigger.change();
|
|
},
|
|
unchecked: function() {
|
|
module.verbose('Removing checked class');
|
|
$module
|
|
.removeClass(className.indeterminate)
|
|
.removeClass(className.checked)
|
|
;
|
|
if(!module.is.indeterminate() && module.is.unchecked() ) {
|
|
module.debug('Input is already unchecked');
|
|
return;
|
|
}
|
|
module.debug('Setting state to unchecked');
|
|
$input
|
|
.prop('indeterminate', false)
|
|
.prop('checked', false)
|
|
;
|
|
module.trigger.change();
|
|
},
|
|
indeterminate: function() {
|
|
module.verbose('Setting class to indeterminate');
|
|
$module
|
|
.addClass(className.indeterminate)
|
|
;
|
|
if( module.is.indeterminate() ) {
|
|
module.debug('Input is already indeterminate, skipping input property change');
|
|
return;
|
|
}
|
|
module.debug('Setting state to indeterminate');
|
|
$input
|
|
.prop('indeterminate', true)
|
|
;
|
|
module.trigger.change();
|
|
},
|
|
determinate: function() {
|
|
module.verbose('Removing indeterminate class');
|
|
$module
|
|
.removeClass(className.indeterminate)
|
|
;
|
|
if( module.is.determinate() ) {
|
|
module.debug('Input is already determinate, skipping input property change');
|
|
return;
|
|
}
|
|
module.debug('Setting state to determinate');
|
|
$input
|
|
.prop('indeterminate', false)
|
|
;
|
|
},
|
|
disabled: function() {
|
|
module.verbose('Setting class to disabled');
|
|
$module
|
|
.addClass(className.disabled)
|
|
;
|
|
if( module.is.disabled() ) {
|
|
module.debug('Input is already disabled, skipping input property change');
|
|
return;
|
|
}
|
|
module.debug('Setting state to disabled');
|
|
$input
|
|
.prop('disabled', 'disabled')
|
|
;
|
|
module.trigger.change();
|
|
},
|
|
enabled: function() {
|
|
module.verbose('Removing disabled class');
|
|
$module.removeClass(className.disabled);
|
|
if( module.is.enabled() ) {
|
|
module.debug('Input is already enabled, skipping input property change');
|
|
return;
|
|
}
|
|
module.debug('Setting state to enabled');
|
|
$input
|
|
.prop('disabled', false)
|
|
;
|
|
module.trigger.change();
|
|
},
|
|
tabbable: function() {
|
|
module.verbose('Adding tabindex to checkbox');
|
|
if( $input.attr('tabindex') === undefined) {
|
|
$input.attr('tabindex', 0);
|
|
}
|
|
}
|
|
},
|
|
|
|
remove: {
|
|
initialLoad: function() {
|
|
initialLoad = false;
|
|
}
|
|
},
|
|
|
|
trigger: {
|
|
change: function() {
|
|
var
|
|
events = document.createEvent('HTMLEvents'),
|
|
inputElement = $input[0]
|
|
;
|
|
if(inputElement) {
|
|
module.verbose('Triggering native change event');
|
|
events.initEvent('change', true, false);
|
|
inputElement.dispatchEvent(events);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
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);
|
|
}
|
|
},
|
|
|
|
bind: {
|
|
events: function() {
|
|
module.verbose('Attaching checkbox events');
|
|
$module
|
|
.on('click' + eventNamespace, module.event.click)
|
|
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
|
|
.on('keyup' + eventNamespace, selector.input, module.event.keyup)
|
|
;
|
|
}
|
|
},
|
|
|
|
unbind: {
|
|
events: function() {
|
|
module.debug('Removing events');
|
|
$module
|
|
.off(eventNamespace)
|
|
;
|
|
}
|
|
},
|
|
|
|
uncheckOthers: function() {
|
|
var
|
|
$radios = module.get.otherRadios()
|
|
;
|
|
module.debug('Unchecking other radios', $radios);
|
|
$radios.removeClass(className.checked);
|
|
},
|
|
|
|
toggle: function() {
|
|
if( !module.can.change() ) {
|
|
if(!module.is.radio()) {
|
|
module.debug('Checkbox is read-only or disabled, ignoring toggle');
|
|
}
|
|
return;
|
|
}
|
|
if( module.is.indeterminate() || module.is.unchecked() ) {
|
|
module.debug('Currently unchecked');
|
|
module.check();
|
|
}
|
|
else if( module.is.checked() && module.can.uncheck() ) {
|
|
module.debug('Currently checked');
|
|
module.uncheck();
|
|
}
|
|
},
|
|
setting: function(name, value) {
|
|
module.debug('Changing setting', name, value);
|
|
if( $.isPlainObject(name) ) {
|
|
$.extend(true, settings, name);
|
|
}
|
|
else if(value !== undefined) {
|
|
if($.isPlainObject(settings[name])) {
|
|
$.extend(true, settings[name], value);
|
|
}
|
|
else {
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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',
|
|
|
|
silent : false,
|
|
debug : false,
|
|
verbose : true,
|
|
performance : true,
|
|
|
|
// delegated event context
|
|
uncheckable : 'auto',
|
|
fireOnInit : false,
|
|
|
|
onChange : function(){},
|
|
|
|
beforeChecked : function(){},
|
|
beforeUnchecked : function(){},
|
|
beforeDeterminate : function(){},
|
|
beforeIndeterminate : function(){},
|
|
|
|
onChecked : function(){},
|
|
onUnchecked : function(){},
|
|
|
|
onDeterminate : function() {},
|
|
onIndeterminate : function() {},
|
|
|
|
onEnable : function(){},
|
|
onDisable : function(){},
|
|
|
|
// preserve misspelled callbacks (will be removed in 3.0)
|
|
onEnabled : function(){},
|
|
onDisabled : function(){},
|
|
|
|
className : {
|
|
checked : 'checked',
|
|
indeterminate : 'indeterminate',
|
|
disabled : 'disabled',
|
|
hidden : 'hidden',
|
|
radio : 'radio',
|
|
readOnly : 'read-only'
|
|
},
|
|
|
|
error : {
|
|
method : 'The method you called is not defined'
|
|
},
|
|
|
|
selector : {
|
|
checkbox : '.ui.checkbox',
|
|
label : 'label, .box',
|
|
input : 'input[type="checkbox"], input[type="radio"]',
|
|
link : 'a[href]'
|
|
}
|
|
|
|
};
|
|
|
|
})( jQuery, window, document );
|
|
|
|
/*!
|
|
* # Semantic UI 2.2.10 - Dropdown
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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(elementIndex) {
|
|
var
|
|
settings = ( $.isPlainObject(parameters) )
|
|
? $.extend(true, {}, $.fn.dropdown.settings, parameters)
|
|
: $.extend({}, $.fn.dropdown.settings),
|
|
|
|
className = settings.className,
|
|
message = settings.message,
|
|
fields = settings.fields,
|
|
keys = settings.keys,
|
|
metadata = settings.metadata,
|
|
namespace = settings.namespace,
|
|
regExp = settings.regExp,
|
|
selector = settings.selector,
|
|
error = settings.error,
|
|
templates = settings.templates,
|
|
|
|
eventNamespace = '.' + namespace,
|
|
moduleNamespace = 'module-' + namespace,
|
|
|
|
$module = $(this),
|
|
$context = $(settings.context),
|
|
$text = $module.find(selector.text),
|
|
$search = $module.find(selector.search),
|
|
$sizer = $module.find(selector.sizer),
|
|
$input = $module.find(selector.input),
|
|
$icon = $module.find(selector.icon),
|
|
|
|
$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,
|
|
internalChange = false,
|
|
element = this,
|
|
instance = $module.data(moduleNamespace),
|
|
|
|
initialLoad,
|
|
pageLostFocus,
|
|
willRefocus,
|
|
elementNamespace,
|
|
id,
|
|
selectObserver,
|
|
menuObserver,
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
module.debug('Initializing dropdown', settings);
|
|
|
|
if( module.is.alreadySetup() ) {
|
|
module.setup.reference();
|
|
}
|
|
else {
|
|
module.setup.layout();
|
|
module.refreshData();
|
|
|
|
module.save.defaults();
|
|
module.restore.selected();
|
|
|
|
module.create.id();
|
|
module.bind.events();
|
|
|
|
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', $module);
|
|
module.remove.tabbable();
|
|
$module
|
|
.off(eventNamespace)
|
|
.removeData(moduleNamespace)
|
|
;
|
|
$menu
|
|
.off(eventNamespace)
|
|
;
|
|
$document
|
|
.off(elementNamespace)
|
|
;
|
|
module.disconnect.menuObserver();
|
|
module.disconnect.selectObserver();
|
|
},
|
|
|
|
observeChanges: function() {
|
|
if('MutationObserver' in window) {
|
|
selectObserver = new MutationObserver(module.event.select.mutation);
|
|
menuObserver = new MutationObserver(module.event.menu.mutation);
|
|
module.debug('Setting up mutation observer', selectObserver, menuObserver);
|
|
module.observe.select();
|
|
module.observe.menu();
|
|
}
|
|
},
|
|
|
|
disconnect: {
|
|
menuObserver: function() {
|
|
if(menuObserver) {
|
|
menuObserver.disconnect();
|
|
}
|
|
},
|
|
selectObserver: function() {
|
|
if(selectObserver) {
|
|
selectObserver.disconnect();
|
|
}
|
|
}
|
|
},
|
|
observe: {
|
|
select: function() {
|
|
if(module.has.input()) {
|
|
selectObserver.observe($input[0], {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
}
|
|
},
|
|
menu: function() {
|
|
if(module.has.menu()) {
|
|
menuObserver.observe($menu[0], {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
create: {
|
|
id: function() {
|
|
id = (Math.random().toString(16) + '000000000').substr(2, 8);
|
|
elementNamespace = '.' + id;
|
|
module.verbose('Creating unique id for element', id);
|
|
},
|
|
userChoice: function(values) {
|
|
var
|
|
$userChoices,
|
|
$userChoice,
|
|
isUserValue,
|
|
html
|
|
;
|
|
values = values || module.get.userValues();
|
|
if(!values) {
|
|
return false;
|
|
}
|
|
values = $.isArray(values)
|
|
? values
|
|
: [values]
|
|
;
|
|
$.each(values, function(index, value) {
|
|
if(module.get.item(value) === false) {
|
|
html = settings.templates.addition( module.add.variables(message.addResult, value) );
|
|
$userChoice = $('<div />')
|
|
.html(html)
|
|
.attr('data-' + metadata.value, value)
|
|
.attr('data-' + metadata.text, value)
|
|
.addClass(className.addition)
|
|
.addClass(className.item)
|
|
;
|
|
if(settings.hideAdditions) {
|
|
$userChoice.addClass(className.hidden);
|
|
}
|
|
$userChoices = ($userChoices === undefined)
|
|
? $userChoice
|
|
: $userChoices.add($userChoice)
|
|
;
|
|
module.verbose('Creating user choices for value', value, $userChoice);
|
|
}
|
|
});
|
|
return $userChoices;
|
|
},
|
|
userLabels: function(value) {
|
|
var
|
|
userValues = module.get.userValues()
|
|
;
|
|
if(userValues) {
|
|
module.debug('Adding user labels', userValues);
|
|
$.each(userValues, function(index, value) {
|
|
module.verbose('Adding custom user value');
|
|
module.add.label(value, value);
|
|
});
|
|
}
|
|
},
|
|
menu: function() {
|
|
$menu = $('<div />')
|
|
.addClass(className.menu)
|
|
.appendTo($module)
|
|
;
|
|
},
|
|
sizer: function() {
|
|
$sizer = $('<span />')
|
|
.addClass(className.sizer)
|
|
.insertAfter($search)
|
|
;
|
|
}
|
|
},
|
|
|
|
search: function(query) {
|
|
query = (query !== undefined)
|
|
? query
|
|
: module.get.query()
|
|
;
|
|
module.verbose('Searching for query', query);
|
|
if(module.has.minCharacters(query)) {
|
|
module.filter(query);
|
|
}
|
|
else {
|
|
module.hide();
|
|
}
|
|
},
|
|
|
|
select: {
|
|
firstUnfiltered: function() {
|
|
module.verbose('Selecting first non-filtered element');
|
|
module.remove.selectedItem();
|
|
$item
|
|
.not(selector.unselectable)
|
|
.not(selector.addition + selector.hidden)
|
|
.eq(0)
|
|
.addClass(className.selected)
|
|
;
|
|
},
|
|
nextAvailable: function($selected) {
|
|
$selected = $selected.eq(0);
|
|
var
|
|
$nextAvailable = $selected.nextAll(selector.item).not(selector.unselectable).eq(0),
|
|
$prevAvailable = $selected.prevAll(selector.item).not(selector.unselectable).eq(0),
|
|
hasNext = ($nextAvailable.length > 0)
|
|
;
|
|
if(hasNext) {
|
|
module.verbose('Moving selection to', $nextAvailable);
|
|
$nextAvailable.addClass(className.selected);
|
|
}
|
|
else {
|
|
module.verbose('Moving selection to', $prevAvailable);
|
|
$prevAvailable.addClass(className.selected);
|
|
}
|
|
}
|
|
},
|
|
|
|
setup: {
|
|
api: function() {
|
|
var
|
|
apiSettings = {
|
|
debug : settings.debug,
|
|
urlData : {
|
|
value : module.get.value(),
|
|
query : module.get.query()
|
|
},
|
|
on : false
|
|
}
|
|
;
|
|
module.verbose('First request, initializing API');
|
|
$module
|
|
.api(apiSettings)
|
|
;
|
|
},
|
|
layout: function() {
|
|
if( $module.is('select') ) {
|
|
module.setup.select();
|
|
module.setup.returnedObject();
|
|
}
|
|
if( !module.has.menu() ) {
|
|
module.create.menu();
|
|
}
|
|
if( module.is.search() && !module.has.search() ) {
|
|
module.verbose('Adding search input');
|
|
$search = $('<input />')
|
|
.addClass(className.search)
|
|
.prop('autocomplete', 'off')
|
|
.insertBefore($text)
|
|
;
|
|
}
|
|
if( module.is.multiple() && module.is.searchSelection() && !module.has.sizer()) {
|
|
module.create.sizer();
|
|
}
|
|
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);
|
|
if( !module.has.menu() ) {
|
|
module.create.menu();
|
|
}
|
|
$menu = $module.children(selector.menu);
|
|
module.setup.menu(selectValues);
|
|
}
|
|
else {
|
|
module.debug('Creating entire dropdown from select');
|
|
$module = $('<div />')
|
|
.attr('class', $input.attr('class') )
|
|
.addClass(className.selection)
|
|
.addClass(className.dropdown)
|
|
.html( templates.dropdown(selectValues) )
|
|
.insertBefore($input)
|
|
;
|
|
if($input.hasClass(className.multiple) && $input.prop('multiple') === false) {
|
|
module.error(error.missingMultiple);
|
|
$input.prop('multiple', true);
|
|
}
|
|
if($input.is('[multiple]')) {
|
|
module.set.multiple();
|
|
}
|
|
if ($input.prop('disabled')) {
|
|
module.debug('Disabling dropdown');
|
|
$module.addClass(className.disabled);
|
|
}
|
|
$input
|
|
.removeAttr('class')
|
|
.detach()
|
|
.prependTo($module)
|
|
;
|
|
}
|
|
module.refresh();
|
|
},
|
|
menu: function(values) {
|
|
$menu.html( templates.menu(values, fields));
|
|
$item = $menu.find(selector.item);
|
|
},
|
|
reference: function() {
|
|
module.debug('Dropdown behavior was called on select, replacing with closest dropdown');
|
|
// replace module reference
|
|
$module = $module.parent(selector.dropdown);
|
|
module.refresh();
|
|
module.setup.returnedObject();
|
|
// invoke method in context of current instance
|
|
if(methodInvoked) {
|
|
instance = module;
|
|
module.invoke(query);
|
|
}
|
|
},
|
|
returnedObject: function() {
|
|
var
|
|
$firstModules = $allModules.slice(0, elementIndex),
|
|
$lastModules = $allModules.slice(elementIndex + 1)
|
|
;
|
|
// adjust all modules to use correct reference
|
|
$allModules = $firstModules.add($module).add($lastModules);
|
|
}
|
|
},
|
|
|
|
refresh: function() {
|
|
module.refreshSelectors();
|
|
module.refreshData();
|
|
},
|
|
|
|
refreshItems: function() {
|
|
$item = $menu.find(selector.item);
|
|
},
|
|
|
|
refreshSelectors: function() {
|
|
module.verbose('Refreshing selector cache');
|
|
$text = $module.find(selector.text);
|
|
$search = $module.find(selector.search);
|
|
$input = $module.find(selector.input);
|
|
$icon = $module.find(selector.icon);
|
|
$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);
|
|
},
|
|
|
|
refreshData: function() {
|
|
module.verbose('Refreshing cached metadata');
|
|
$item
|
|
.removeData(metadata.text)
|
|
.removeData(metadata.value)
|
|
;
|
|
},
|
|
|
|
clearData: function() {
|
|
module.verbose('Clearing metadata');
|
|
$item
|
|
.removeData(metadata.text)
|
|
.removeData(metadata.value)
|
|
;
|
|
$module
|
|
.removeData(metadata.defaultText)
|
|
.removeData(metadata.defaultValue)
|
|
.removeData(metadata.placeholderText)
|
|
;
|
|
},
|
|
|
|
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.can.show() && module.is.remote()) {
|
|
module.debug('No API results retrieved, searching before show');
|
|
module.queryRemote(module.get.query(), module.show);
|
|
}
|
|
if( module.can.show() && !module.is.active() ) {
|
|
module.debug('Showing dropdown');
|
|
if(module.has.message() && !(module.has.maxSelections() || module.has.allResultsFiltered()) ) {
|
|
module.remove.message();
|
|
}
|
|
if(module.is.allFiltered()) {
|
|
return true;
|
|
}
|
|
if(settings.onShow.call(element) !== false) {
|
|
module.animate.show(function() {
|
|
if( module.can.click() ) {
|
|
module.bind.intent();
|
|
}
|
|
if(module.has.menuSearch()) {
|
|
module.focusSearch();
|
|
}
|
|
module.set.visible();
|
|
callback.call(element);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
hide: function(callback) {
|
|
callback = $.isFunction(callback)
|
|
? callback
|
|
: function(){}
|
|
;
|
|
if( module.is.active() ) {
|
|
module.debug('Hiding dropdown');
|
|
if(settings.onHide.call(element) !== false) {
|
|
module.animate.hide(function() {
|
|
module.remove.visible();
|
|
callback.call(element);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
hideOthers: function() {
|
|
module.verbose('Finding other dropdowns to hide');
|
|
$allModules
|
|
.not($module)
|
|
.has(selector.menu + '.' + className.visible)
|
|
.dropdown('hide')
|
|
;
|
|
},
|
|
|
|
hideMenu: function() {
|
|
module.verbose('Hiding menu instantaneously');
|
|
module.remove.active();
|
|
module.remove.visible();
|
|
$menu.transition('hide');
|
|
},
|
|
|
|
hideSubMenus: function() {
|
|
var
|
|
$subMenus = $menu.children(selector.item).find(selector.menu)
|
|
;
|
|
module.verbose('Hiding sub menus', $subMenus);
|
|
$subMenus.transition('hide');
|
|
},
|
|
|
|
bind: {
|
|
events: function() {
|
|
if(hasTouch) {
|
|
module.bind.touchEvents();
|
|
}
|
|
module.bind.keyboardEvents();
|
|
module.bind.inputEvents();
|
|
module.bind.mouseEvents();
|
|
},
|
|
touchEvents: function() {
|
|
module.debug('Touch device detected binding additional touch events');
|
|
if( module.is.searchSelection() ) {
|
|
// do nothing special yet
|
|
}
|
|
else if( module.is.single() ) {
|
|
$module
|
|
.on('touchstart' + eventNamespace, module.event.test.toggle)
|
|
;
|
|
}
|
|
$menu
|
|
.on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)
|
|
;
|
|
},
|
|
keyboardEvents: function() {
|
|
module.verbose('Binding keyboard events');
|
|
$module
|
|
.on('keydown' + eventNamespace, module.event.keydown)
|
|
;
|
|
if( module.has.search() ) {
|
|
$module
|
|
.on(module.get.inputEvent() + eventNamespace, selector.search, module.event.input)
|
|
;
|
|
}
|
|
if( module.is.multiple() ) {
|
|
$document
|
|
.on('keydown' + elementNamespace, module.event.document.keydown)
|
|
;
|
|
}
|
|
},
|
|
inputEvents: function() {
|
|
module.verbose('Binding input change events');
|
|
$module
|
|
.on('change' + eventNamespace, selector.input, module.event.change)
|
|
;
|
|
},
|
|
mouseEvents: function() {
|
|
module.verbose('Binding mouse events');
|
|
if(module.is.multiple()) {
|
|
$module
|
|
.on('click' + eventNamespace, selector.label, module.event.label.click)
|
|
.on('click' + eventNamespace, selector.remove, module.event.remove.click)
|
|
;
|
|
}
|
|
if( module.is.searchSelection() ) {
|
|
$module
|
|
.on('mousedown' + eventNamespace, module.event.mousedown)
|
|
.on('mouseup' + eventNamespace, module.event.mouseup)
|
|
.on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown)
|
|
.on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup)
|
|
.on('click' + eventNamespace, selector.icon, module.event.icon.click)
|
|
.on('focus' + eventNamespace, selector.search, module.event.search.focus)
|
|
.on('click' + eventNamespace, selector.search, module.event.search.focus)
|
|
.on('blur' + eventNamespace, selector.search, module.event.search.blur)
|
|
.on('click' + eventNamespace, selector.text, module.event.text.focus)
|
|
;
|
|
if(module.is.multiple()) {
|
|
$module
|
|
.on('click' + eventNamespace, module.event.click)
|
|
;
|
|
}
|
|
}
|
|
else {
|
|
if(settings.on == 'click') {
|
|
$module
|
|
.on('click' + eventNamespace, selector.icon, module.event.icon.click)
|
|
.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)
|
|
;
|
|
if(module.has.menuSearch() ) {
|
|
$module
|
|
.on('blur' + eventNamespace, selector.search, module.event.search.blur)
|
|
;
|
|
}
|
|
else {
|
|
$module
|
|
.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(query) {
|
|
var
|
|
searchTerm = (query !== undefined)
|
|
? query
|
|
: module.get.query(),
|
|
afterFiltered = function() {
|
|
if(module.is.multiple()) {
|
|
module.filterActive();
|
|
}
|
|
module.select.firstUnfiltered();
|
|
if( module.has.allResultsFiltered() ) {
|
|
if( settings.onNoResults.call(element, searchTerm) ) {
|
|
if(settings.allowAdditions) {
|
|
if(settings.hideAdditions) {
|
|
module.verbose('User addition with no menu, setting empty style');
|
|
module.set.empty();
|
|
module.hideMenu();
|
|
}
|
|
}
|
|
else {
|
|
module.verbose('All items filtered, showing message', searchTerm);
|
|
module.add.message(message.noResults);
|
|
}
|
|
}
|
|
else {
|
|
module.verbose('All items filtered, hiding dropdown', searchTerm);
|
|
module.hideMenu();
|
|
}
|
|
}
|
|
else {
|
|
module.remove.empty();
|
|
module.remove.message();
|
|
}
|
|
if(settings.allowAdditions) {
|
|
module.add.userSuggestion(query);
|
|
}
|
|
if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) {
|
|
module.show();
|
|
}
|
|
}
|
|
;
|
|
if(settings.useLabels && module.has.maxSelections()) {
|
|
return;
|
|
}
|
|
if(settings.apiSettings) {
|
|
if( module.can.useAPI() ) {
|
|
module.queryRemote(searchTerm, function() {
|
|
if(settings.filterRemoteData) {
|
|
module.filterItems(searchTerm);
|
|
}
|
|
afterFiltered();
|
|
});
|
|
}
|
|
else {
|
|
module.error(error.noAPI);
|
|
}
|
|
}
|
|
else {
|
|
module.filterItems(searchTerm);
|
|
afterFiltered();
|
|
}
|
|
},
|
|
|
|
queryRemote: function(query, callback) {
|
|
var
|
|
apiSettings = {
|
|
errorDuration : false,
|
|
cache : 'local',
|
|
throttle : settings.throttle,
|
|
urlData : {
|
|
query: query
|
|
},
|
|
onError: function() {
|
|
module.add.message(message.serverError);
|
|
callback();
|
|
},
|
|
onFailure: function() {
|
|
module.add.message(message.serverError);
|
|
callback();
|
|
},
|
|
onSuccess : function(response) {
|
|
module.remove.message();
|
|
module.setup.menu({
|
|
values: response[fields.remoteValues]
|
|
});
|
|
callback();
|
|
}
|
|
}
|
|
;
|
|
if( !$module.api('get request') ) {
|
|
module.setup.api();
|
|
}
|
|
apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings);
|
|
$module
|
|
.api('setting', apiSettings)
|
|
.api('query')
|
|
;
|
|
},
|
|
|
|
filterItems: function(query) {
|
|
var
|
|
searchTerm = (query !== undefined)
|
|
? query
|
|
: module.get.query(),
|
|
results = null,
|
|
escapedTerm = module.escape.string(searchTerm),
|
|
beginsWithRegExp = new RegExp('^' + escapedTerm, 'igm')
|
|
;
|
|
// avoid loop if we're matching nothing
|
|
if( module.has.query() ) {
|
|
results = [];
|
|
|
|
module.verbose('Searching for matching values', searchTerm);
|
|
$item
|
|
.each(function(){
|
|
var
|
|
$choice = $(this),
|
|
text,
|
|
value
|
|
;
|
|
if(settings.match == 'both' || settings.match == 'text') {
|
|
text = String(module.get.choiceText($choice, false));
|
|
if(text.search(beginsWithRegExp) !== -1) {
|
|
results.push(this);
|
|
return true;
|
|
}
|
|
else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text)) {
|
|
results.push(this);
|
|
return true;
|
|
}
|
|
else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, text)) {
|
|
results.push(this);
|
|
return true;
|
|
}
|
|
}
|
|
if(settings.match == 'both' || settings.match == 'value') {
|
|
value = String(module.get.choiceValue($choice, text));
|
|
if(value.search(beginsWithRegExp) !== -1) {
|
|
results.push(this);
|
|
return true;
|
|
}
|
|
else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, value)) {
|
|
results.push(this);
|
|
return true;
|
|
}
|
|
else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, value)) {
|
|
results.push(this);
|
|
return true;
|
|
}
|
|
}
|
|
})
|
|
;
|
|
}
|
|
module.debug('Showing only matched items', searchTerm);
|
|
module.remove.filteredItem();
|
|
if(results) {
|
|
$item
|
|
.not(results)
|
|
.addClass(className.filtered)
|
|
;
|
|
}
|
|
},
|
|
|
|
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;
|
|
},
|
|
exactSearch: function (query, term) {
|
|
query = query.toLowerCase();
|
|
term = term.toLowerCase();
|
|
if(term.indexOf(query) > -1) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
filterActive: function() {
|
|
if(settings.useLabels) {
|
|
$item.filter('.' + className.active)
|
|
.addClass(className.filtered)
|
|
;
|
|
}
|
|
},
|
|
|
|
focusSearch: function(skipHandler) {
|
|
if( module.has.search() && !module.is.focusedOnSearch() ) {
|
|
if(skipHandler) {
|
|
$module.off('focus' + eventNamespace, selector.search);
|
|
$search.focus();
|
|
$module.on('focus' + eventNamespace, selector.search, module.event.search.focus);
|
|
}
|
|
else {
|
|
$search.focus();
|
|
}
|
|
}
|
|
},
|
|
|
|
forceSelection: function() {
|
|
var
|
|
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
|
|
$activeItem = $item.not(className.filtered).filter('.' + className.active).eq(0),
|
|
$selectedItem = ($currentlySelected.length > 0)
|
|
? $currentlySelected
|
|
: $activeItem,
|
|
hasSelected = ($selectedItem.length > 0)
|
|
;
|
|
if(hasSelected && !module.is.multiple()) {
|
|
module.debug('Forcing partial selection to selected item', $selectedItem);
|
|
module.event.item.click.call($selectedItem, {}, true);
|
|
return;
|
|
}
|
|
else {
|
|
if(settings.allowAdditions) {
|
|
module.set.selected(module.get.query());
|
|
module.remove.searchTerm();
|
|
}
|
|
else {
|
|
module.remove.searchTerm();
|
|
}
|
|
}
|
|
},
|
|
|
|
event: {
|
|
change: function() {
|
|
if(!internalChange) {
|
|
module.debug('Input changed, updating selection');
|
|
module.set.selected();
|
|
}
|
|
},
|
|
focus: function() {
|
|
if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) {
|
|
module.show();
|
|
}
|
|
},
|
|
blur: function(event) {
|
|
pageLostFocus = (document.activeElement === this);
|
|
if(!activated && !pageLostFocus) {
|
|
module.remove.activeLabel();
|
|
module.hide();
|
|
}
|
|
},
|
|
mousedown: function() {
|
|
if(module.is.searchSelection()) {
|
|
// prevent menu hiding on immediate re-focus
|
|
willRefocus = true;
|
|
}
|
|
else {
|
|
// prevents focus callback from occurring on mousedown
|
|
activated = true;
|
|
}
|
|
},
|
|
mouseup: function() {
|
|
if(module.is.searchSelection()) {
|
|
// prevent menu hiding on immediate re-focus
|
|
willRefocus = false;
|
|
}
|
|
else {
|
|
activated = false;
|
|
}
|
|
},
|
|
click: function(event) {
|
|
var
|
|
$target = $(event.target)
|
|
;
|
|
// focus search
|
|
if($target.is($module)) {
|
|
if(!module.is.focusedOnSearch()) {
|
|
module.focusSearch();
|
|
}
|
|
else {
|
|
module.show();
|
|
}
|
|
}
|
|
},
|
|
search: {
|
|
focus: function() {
|
|
activated = true;
|
|
if(module.is.multiple()) {
|
|
module.remove.activeLabel();
|
|
}
|
|
if(settings.showOnFocus) {
|
|
module.search();
|
|
}
|
|
},
|
|
blur: function(event) {
|
|
pageLostFocus = (document.activeElement === this);
|
|
if(module.is.searchSelection() && !willRefocus) {
|
|
if(!itemActivated && !pageLostFocus) {
|
|
if(settings.forceSelection) {
|
|
module.forceSelection();
|
|
}
|
|
module.hide();
|
|
}
|
|
}
|
|
willRefocus = false;
|
|
}
|
|
},
|
|
icon: {
|
|
click: function(event) {
|
|
module.toggle();
|
|
}
|
|
},
|
|
text: {
|
|
focus: function(event) {
|
|
activated = true;
|
|
module.focusSearch();
|
|
}
|
|
},
|
|
input: function(event) {
|
|
if(module.is.multiple() || module.is.searchSelection()) {
|
|
module.set.filtered();
|
|
}
|
|
clearTimeout(module.timer);
|
|
module.timer = setTimeout(module.search, settings.delay.search);
|
|
},
|
|
label: {
|
|
click: function(event) {
|
|
var
|
|
$label = $(this),
|
|
$labels = $module.find(selector.label),
|
|
$activeLabels = $labels.filter('.' + className.active),
|
|
$nextActive = $label.nextAll('.' + className.active),
|
|
$prevActive = $label.prevAll('.' + className.active),
|
|
$range = ($nextActive.length > 0)
|
|
? $label.nextUntil($nextActive).add($activeLabels).add($label)
|
|
: $label.prevUntil($prevActive).add($activeLabels).add($label)
|
|
;
|
|
if(event.shiftKey) {
|
|
$activeLabels.removeClass(className.active);
|
|
$range.addClass(className.active);
|
|
}
|
|
else if(event.ctrlKey) {
|
|
$label.toggleClass(className.active);
|
|
}
|
|
else {
|
|
$activeLabels.removeClass(className.active);
|
|
$label.addClass(className.active);
|
|
}
|
|
settings.onLabelSelect.apply(this, $labels.filter('.' + className.active));
|
|
}
|
|
},
|
|
remove: {
|
|
click: function() {
|
|
var
|
|
$label = $(this).parent()
|
|
;
|
|
if( $label.hasClass(className.active) ) {
|
|
// remove all selected labels
|
|
module.remove.activeLabels();
|
|
}
|
|
else {
|
|
// remove this label only
|
|
module.remove.activeLabels( $label );
|
|
}
|
|
}
|
|
},
|
|
test: {
|
|
toggle: function(event) {
|
|
var
|
|
toggleBehavior = (module.is.multiple())
|
|
? module.show
|
|
: module.toggle
|
|
;
|
|
if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) {
|
|
return;
|
|
}
|
|
if( module.determine.eventOnElement(event, toggleBehavior) ) {
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
touch: function(event) {
|
|
module.determine.eventOnElement(event, function() {
|
|
if(event.type == 'touchstart') {
|
|
module.timer = setTimeout(function() {
|
|
module.hide();
|
|
}, settings.delay.touch);
|
|
}
|
|
else if(event.type == 'touchmove') {
|
|
clearTimeout(module.timer);
|
|
}
|
|
});
|
|
event.stopPropagation();
|
|
},
|
|
hide: function(event) {
|
|
module.determine.eventInModule(event, module.hide);
|
|
}
|
|
},
|
|
select: {
|
|
mutation: function(mutations) {
|
|
module.debug('<select> modified, recreating menu');
|
|
module.setup.select();
|
|
}
|
|
},
|
|
menu: {
|
|
mutation: function(mutations) {
|
|
var
|
|
mutation = mutations[0],
|
|
$addedNode = mutation.addedNodes
|
|
? $(mutation.addedNodes[0])
|
|
: $(false),
|
|
$removedNode = mutation.removedNodes
|
|
? $(mutation.removedNodes[0])
|
|
: $(false),
|
|
$changedNodes = $addedNode.add($removedNode),
|
|
isUserAddition = $changedNodes.is(selector.addition) || $changedNodes.closest(selector.addition).length > 0,
|
|
isMessage = $changedNodes.is(selector.message) || $changedNodes.closest(selector.message).length > 0
|
|
;
|
|
if(isUserAddition || isMessage) {
|
|
module.debug('Updating item selector cache');
|
|
module.refreshItems();
|
|
}
|
|
else {
|
|
module.debug('Menu modified, updating selector cache');
|
|
module.refresh();
|
|
}
|
|
},
|
|
mousedown: function() {
|
|
itemActivated = true;
|
|
},
|
|
mouseup: function() {
|
|
itemActivated = false;
|
|
}
|
|
},
|
|
item: {
|
|
mouseenter: function(event) {
|
|
var
|
|
$target = $(event.target),
|
|
$item = $(this),
|
|
$subMenu = $item.children(selector.menu),
|
|
$otherMenus = $item.siblings(selector.item).children(selector.menu),
|
|
hasSubMenu = ($subMenu.length > 0),
|
|
isBubbledEvent = ($subMenu.find($target).length > 0)
|
|
;
|
|
if( !isBubbledEvent && hasSubMenu ) {
|
|
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, skipRefocus) {
|
|
var
|
|
$choice = $(this),
|
|
$target = (event)
|
|
? $(event.target)
|
|
: $(''),
|
|
$subMenu = $choice.find(selector.menu),
|
|
text = module.get.choiceText($choice),
|
|
value = module.get.choiceValue($choice, text),
|
|
hasSubMenu = ($subMenu.length > 0),
|
|
isBubbledEvent = ($subMenu.find($target).length > 0)
|
|
;
|
|
// prevents IE11 bug where menu receives focus even though `tabindex=-1`
|
|
if(module.has.menuSearch()) {
|
|
$(document.activeElement).blur();
|
|
}
|
|
if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) {
|
|
if(module.is.searchSelection()) {
|
|
if(settings.allowAdditions) {
|
|
module.remove.userAddition();
|
|
}
|
|
module.remove.searchTerm();
|
|
if(!module.is.focusedOnSearch() && !(skipRefocus == true)) {
|
|
module.focusSearch(true);
|
|
}
|
|
}
|
|
if(!settings.useLabels) {
|
|
module.remove.filteredItem();
|
|
module.set.scrollPosition($choice);
|
|
}
|
|
module.determine.selectAction.call(this, text, value);
|
|
}
|
|
}
|
|
},
|
|
|
|
document: {
|
|
// label selection should occur even when element has no focus
|
|
keydown: function(event) {
|
|
var
|
|
pressedKey = event.which,
|
|
isShortcutKey = module.is.inObject(pressedKey, keys)
|
|
;
|
|
if(isShortcutKey) {
|
|
var
|
|
$label = $module.find(selector.label),
|
|
$activeLabel = $label.filter('.' + className.active),
|
|
activeValue = $activeLabel.data(metadata.value),
|
|
labelIndex = $label.index($activeLabel),
|
|
labelCount = $label.length,
|
|
hasActiveLabel = ($activeLabel.length > 0),
|
|
hasMultipleActive = ($activeLabel.length > 1),
|
|
isFirstLabel = (labelIndex === 0),
|
|
isLastLabel = (labelIndex + 1 == labelCount),
|
|
isSearch = module.is.searchSelection(),
|
|
isFocusedOnSearch = module.is.focusedOnSearch(),
|
|
isFocused = module.is.focused(),
|
|
caretAtStart = (isFocusedOnSearch && module.get.caretPosition() === 0),
|
|
$nextLabel
|
|
;
|
|
if(isSearch && !hasActiveLabel && !isFocusedOnSearch) {
|
|
return;
|
|
}
|
|
|
|
if(pressedKey == keys.leftArrow) {
|
|
// activate previous label
|
|
if((isFocused || caretAtStart) && !hasActiveLabel) {
|
|
module.verbose('Selecting previous label');
|
|
$label.last().addClass(className.active);
|
|
}
|
|
else if(hasActiveLabel) {
|
|
if(!event.shiftKey) {
|
|
module.verbose('Selecting previous label');
|
|
$label.removeClass(className.active);
|
|
}
|
|
else {
|
|
module.verbose('Adding previous label to selection');
|
|
}
|
|
if(isFirstLabel && !hasMultipleActive) {
|
|
$activeLabel.addClass(className.active);
|
|
}
|
|
else {
|
|
$activeLabel.prev(selector.siblingLabel)
|
|
.addClass(className.active)
|
|
.end()
|
|
;
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
else if(pressedKey == keys.rightArrow) {
|
|
// activate first label
|
|
if(isFocused && !hasActiveLabel) {
|
|
$label.first().addClass(className.active);
|
|
}
|
|
// activate next label
|
|
if(hasActiveLabel) {
|
|
if(!event.shiftKey) {
|
|
module.verbose('Selecting next label');
|
|
$label.removeClass(className.active);
|
|
}
|
|
else {
|
|
module.verbose('Adding next label to selection');
|
|
}
|
|
if(isLastLabel) {
|
|
if(isSearch) {
|
|
if(!isFocusedOnSearch) {
|
|
module.focusSearch();
|
|
}
|
|
else {
|
|
$label.removeClass(className.active);
|
|
}
|
|
}
|
|
else if(hasMultipleActive) {
|
|
$activeLabel.next(selector.siblingLabel).addClass(className.active);
|
|
}
|
|
else {
|
|
$activeLabel.addClass(className.active);
|
|
}
|
|
}
|
|
else {
|
|
$activeLabel.next(selector.siblingLabel).addClass(className.active);
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
else if(pressedKey == keys.deleteKey || pressedKey == keys.backspace) {
|
|
if(hasActiveLabel) {
|
|
module.verbose('Removing active labels');
|
|
if(isLastLabel) {
|
|
if(isSearch && !isFocusedOnSearch) {
|
|
module.focusSearch();
|
|
}
|
|
}
|
|
$activeLabel.last().next(selector.siblingLabel).addClass(className.active);
|
|
module.remove.activeLabels($activeLabel);
|
|
event.preventDefault();
|
|
}
|
|
else if(caretAtStart && !hasActiveLabel && pressedKey == keys.backspace) {
|
|
module.verbose('Removing last label on input backspace');
|
|
$activeLabel = $label.last().addClass(className.active);
|
|
module.remove.activeLabels($activeLabel);
|
|
}
|
|
}
|
|
else {
|
|
$activeLabel.removeClass(className.active);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
keydown: function(event) {
|
|
var
|
|
pressedKey = event.which,
|
|
isShortcutKey = module.is.inObject(pressedKey, keys)
|
|
;
|
|
if(isShortcutKey) {
|
|
var
|
|
$currentlySelected = $item.not(selector.unselectable).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 +')').addBack()
|
|
: $menu.children(':not(.' + className.filtered +')'),
|
|
$subMenu = $selectedItem.children(selector.menu),
|
|
$parentMenu = $selectedItem.closest(selector.menu),
|
|
inVisibleMenu = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating) || $parentMenu.parent(selector.menu).length > 0),
|
|
hasSubMenu = ($subMenu.length> 0),
|
|
hasSelectedItem = ($selectedItem.length > 0),
|
|
selectedIsSelectable = ($selectedItem.not(selector.unselectable).length > 0),
|
|
delimiterPressed = (pressedKey == keys.delimiter && settings.allowAdditions && module.is.multiple()),
|
|
isAdditionWithoutMenu = (settings.allowAdditions && settings.hideAdditions && (pressedKey == keys.enter || delimiterPressed) && selectedIsSelectable),
|
|
$nextItem,
|
|
isSubMenuItem,
|
|
newIndex
|
|
;
|
|
// allow selection with menu closed
|
|
if(isAdditionWithoutMenu) {
|
|
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
|
|
module.event.item.click.call($selectedItem, event);
|
|
if(module.is.searchSelection()) {
|
|
module.remove.searchTerm();
|
|
}
|
|
}
|
|
|
|
// visible menu keyboard shortcuts
|
|
if( module.is.visible() ) {
|
|
|
|
// enter (select or open sub-menu)
|
|
if(pressedKey == keys.enter || delimiterPressed) {
|
|
if(pressedKey == keys.enter && hasSelectedItem && hasSubMenu && !settings.allowCategorySelection) {
|
|
module.verbose('Pressed enter on unselectable category, opening sub menu');
|
|
pressedKey = keys.rightArrow;
|
|
}
|
|
else if(selectedIsSelectable) {
|
|
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
|
|
module.event.item.click.call($selectedItem, event);
|
|
if(module.is.searchSelection()) {
|
|
module.remove.searchTerm();
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
|
|
// sub-menu actions
|
|
if(hasSelectedItem) {
|
|
|
|
if(pressedKey == keys.leftArrow) {
|
|
|
|
isSubMenuItem = ($parentMenu[0] !== $menu[0]);
|
|
|
|
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(' + selector.unselectable + ')').eq(0)
|
|
: $item.eq(0)
|
|
;
|
|
if($visibleItems.index( $nextItem ) < 0) {
|
|
module.verbose('Up key pressed but reached top of current menu');
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
else {
|
|
module.verbose('Up key pressed, changing active item');
|
|
$selectedItem
|
|
.removeClass(className.selected)
|
|
;
|
|
$nextItem
|
|
.addClass(className.selected)
|
|
;
|
|
module.set.scrollPosition($nextItem);
|
|
if(settings.selectOnKeydown && module.is.single()) {
|
|
module.set.selectedItem($nextItem);
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
|
|
// down arrow (traverse menu down)
|
|
if(pressedKey == keys.downArrow) {
|
|
$nextItem = (hasSelectedItem && inVisibleMenu)
|
|
? $nextItem = $selectedItem.nextAll(selector.item + ':not(' + selector.unselectable + ')').eq(0)
|
|
: $item.eq(0)
|
|
;
|
|
if($nextItem.length === 0) {
|
|
module.verbose('Down key pressed but reached bottom of current menu');
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
else {
|
|
module.verbose('Down key pressed, changing active item');
|
|
$item
|
|
.removeClass(className.selected)
|
|
;
|
|
$nextItem
|
|
.addClass(className.selected)
|
|
;
|
|
module.set.scrollPosition($nextItem);
|
|
if(settings.selectOnKeydown && module.is.single()) {
|
|
module.set.selectedItem($nextItem);
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
|
|
// page down (show next page)
|
|
if(pressedKey == keys.pageUp) {
|
|
module.scrollPage('up');
|
|
event.preventDefault();
|
|
}
|
|
if(pressedKey == keys.pageDown) {
|
|
module.scrollPage('down');
|
|
event.preventDefault();
|
|
}
|
|
|
|
// escape (close menu)
|
|
if(pressedKey == keys.escape) {
|
|
module.verbose('Escape key pressed, closing dropdown');
|
|
module.hide();
|
|
}
|
|
|
|
}
|
|
else {
|
|
// delimiter key
|
|
if(delimiterPressed) {
|
|
event.preventDefault();
|
|
}
|
|
// down arrow (open menu)
|
|
if(pressedKey == keys.downArrow && !module.is.visible()) {
|
|
module.verbose('Down key pressed, showing dropdown');
|
|
module.select.firstUnfiltered();
|
|
module.show();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
if( !module.has.search() ) {
|
|
module.set.selectedLetter( String.fromCharCode(pressedKey) );
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
trigger: {
|
|
change: function() {
|
|
var
|
|
events = document.createEvent('HTMLEvents'),
|
|
inputElement = $input[0]
|
|
;
|
|
if(inputElement) {
|
|
module.verbose('Triggering native change event');
|
|
events.initEvent('change', true, false);
|
|
inputElement.dispatchEvent(events);
|
|
}
|
|
}
|
|
},
|
|
|
|
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 ].call(element, text, value, this);
|
|
}
|
|
else if( $.isFunction(settings.action) ) {
|
|
module.verbose('Triggering user action', settings.action, text, value);
|
|
settings.action.call(element, text, value, this);
|
|
}
|
|
else {
|
|
module.error(error.action, settings.action);
|
|
}
|
|
},
|
|
eventInModule: function(event, callback) {
|
|
var
|
|
$target = $(event.target),
|
|
inDocument = ($target.closest(document.documentElement).length > 0),
|
|
inModule = ($target.closest($module).length > 0)
|
|
;
|
|
callback = $.isFunction(callback)
|
|
? callback
|
|
: function(){}
|
|
;
|
|
if(inDocument && !inModule) {
|
|
module.verbose('Triggering event', callback);
|
|
callback();
|
|
return true;
|
|
}
|
|
else {
|
|
module.verbose('Event occurred in dropdown, canceling callback');
|
|
return false;
|
|
}
|
|
},
|
|
eventOnElement: function(event, callback) {
|
|
var
|
|
$target = $(event.target),
|
|
$label = $target.closest(selector.siblingLabel),
|
|
inVisibleDOM = document.body.contains(event.target),
|
|
notOnLabel = ($module.find($label).length === 0),
|
|
notInMenu = ($target.closest($menu).length === 0)
|
|
;
|
|
callback = $.isFunction(callback)
|
|
? callback
|
|
: function(){}
|
|
;
|
|
if(inVisibleDOM && notOnLabel && notInMenu) {
|
|
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, element) {
|
|
value = (value !== undefined)
|
|
? value
|
|
: text
|
|
;
|
|
if( module.can.activate( $(element) ) ) {
|
|
module.set.selected(value, $(element));
|
|
if(module.is.multiple() && !module.is.allFiltered()) {
|
|
return;
|
|
}
|
|
else {
|
|
module.hideAndClear();
|
|
}
|
|
}
|
|
},
|
|
|
|
select: function(text, value, element) {
|
|
value = (value !== undefined)
|
|
? value
|
|
: text
|
|
;
|
|
if( module.can.activate( $(element) ) ) {
|
|
module.set.value(value, $(element));
|
|
if(module.is.multiple() && !module.is.allFiltered()) {
|
|
return;
|
|
}
|
|
else {
|
|
module.hideAndClear();
|
|
}
|
|
}
|
|
},
|
|
|
|
combo: function(text, value, element) {
|
|
value = (value !== undefined)
|
|
? value
|
|
: text
|
|
;
|
|
module.set.selected(value, $(element));
|
|
module.hideAndClear();
|
|
},
|
|
|
|
hide: function(text, value, element) {
|
|
module.set.value(value, text);
|
|
module.hideAndClear();
|
|
}
|
|
|
|
},
|
|
|
|
get: {
|
|
id: function() {
|
|
return id;
|
|
},
|
|
defaultText: function() {
|
|
return $module.data(metadata.defaultText);
|
|
},
|
|
defaultValue: function() {
|
|
return $module.data(metadata.defaultValue);
|
|
},
|
|
placeholderText: function() {
|
|
return $module.data(metadata.placeholderText) || '';
|
|
},
|
|
text: function() {
|
|
return $text.text();
|
|
},
|
|
query: function() {
|
|
return $.trim($search.val());
|
|
},
|
|
searchWidth: function(value) {
|
|
value = (value !== undefined)
|
|
? value
|
|
: $search.val()
|
|
;
|
|
$sizer.text(value);
|
|
// prevent rounding issues
|
|
return Math.ceil( $sizer.width() + 1);
|
|
},
|
|
selectionCount: function() {
|
|
var
|
|
values = module.get.values(),
|
|
count
|
|
;
|
|
count = ( module.is.multiple() )
|
|
? $.isArray(values)
|
|
? values.length
|
|
: 0
|
|
: (module.get.value() !== '')
|
|
? 1
|
|
: 0
|
|
;
|
|
return count;
|
|
},
|
|
transition: function($subMenu) {
|
|
return (settings.transition == 'auto')
|
|
? module.is.upward($subMenu)
|
|
? 'slide up'
|
|
: 'slide down'
|
|
: settings.transition
|
|
;
|
|
},
|
|
userValues: function() {
|
|
var
|
|
values = module.get.values()
|
|
;
|
|
if(!values) {
|
|
return false;
|
|
}
|
|
values = $.isArray(values)
|
|
? values
|
|
: [values]
|
|
;
|
|
return $.grep(values, function(value) {
|
|
return (module.get.item(value) === false);
|
|
});
|
|
},
|
|
uniqueArray: function(array) {
|
|
return $.grep(array, function (value, index) {
|
|
return $.inArray(value, array) === index;
|
|
});
|
|
},
|
|
caretPosition: function() {
|
|
var
|
|
input = $search.get(0),
|
|
range,
|
|
rangeLength
|
|
;
|
|
if('selectionStart' in input) {
|
|
return input.selectionStart;
|
|
}
|
|
else if (document.selection) {
|
|
input.focus();
|
|
range = document.selection.createRange();
|
|
rangeLength = range.text.length;
|
|
range.moveStart('character', -input.value.length);
|
|
return range.text.length - rangeLength;
|
|
}
|
|
},
|
|
value: function() {
|
|
var
|
|
value = ($input.length > 0)
|
|
? $input.val()
|
|
: $module.data(metadata.value),
|
|
isEmptyMultiselect = ($.isArray(value) && value.length === 1 && value[0] === '')
|
|
;
|
|
// prevents placeholder element from being selected when multiple
|
|
return (value === undefined || isEmptyMultiselect)
|
|
? ''
|
|
: value
|
|
;
|
|
},
|
|
values: function() {
|
|
var
|
|
value = module.get.value()
|
|
;
|
|
if(value === '') {
|
|
return '';
|
|
}
|
|
return ( !module.has.selectInput() && module.is.multiple() )
|
|
? (typeof value == 'string') // delimited string
|
|
? value.split(settings.delimiter)
|
|
: ''
|
|
: value
|
|
;
|
|
},
|
|
remoteValues: function() {
|
|
var
|
|
values = module.get.values(),
|
|
remoteValues = false
|
|
;
|
|
if(values) {
|
|
if(typeof values == 'string') {
|
|
values = [values];
|
|
}
|
|
$.each(values, function(index, value) {
|
|
var
|
|
name = module.read.remoteData(value)
|
|
;
|
|
module.verbose('Restoring value from session data', name, value);
|
|
if(name) {
|
|
if(!remoteValues) {
|
|
remoteValues = {};
|
|
}
|
|
remoteValues[value] = name;
|
|
}
|
|
});
|
|
}
|
|
return remoteValues;
|
|
},
|
|
choiceText: function($choice, preserveHTML) {
|
|
preserveHTML = (preserveHTML !== undefined)
|
|
? preserveHTML
|
|
: settings.preserveHTML
|
|
;
|
|
if($choice) {
|
|
if($choice.find(selector.menu).length > 0) {
|
|
module.verbose('Retrieving 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)
|
|
? $.trim($choice.html())
|
|
: $.trim($choice.text())
|
|
;
|
|
}
|
|
},
|
|
choiceValue: function($choice, choiceText) {
|
|
choiceText = choiceText || module.get.choiceText($choice);
|
|
if(!$choice) {
|
|
return false;
|
|
}
|
|
return ($choice.data(metadata.value) !== undefined)
|
|
? String( $choice.data(metadata.value) )
|
|
: (typeof choiceText === 'string')
|
|
? $.trim(choiceText.toLowerCase())
|
|
: String(choiceText)
|
|
;
|
|
},
|
|
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 = [];
|
|
$module
|
|
.find('option')
|
|
.each(function() {
|
|
var
|
|
$option = $(this),
|
|
name = $option.html(),
|
|
disabled = $option.attr('disabled'),
|
|
value = ( $option.attr('value') !== undefined )
|
|
? $option.attr('value')
|
|
: name
|
|
;
|
|
if(settings.placeholder === 'auto' && value === '') {
|
|
select.placeholder = name;
|
|
}
|
|
else {
|
|
select.values.push({
|
|
name : name,
|
|
value : value,
|
|
disabled : disabled
|
|
});
|
|
}
|
|
})
|
|
;
|
|
if(settings.placeholder && settings.placeholder !== 'auto') {
|
|
module.debug('Setting placeholder value to', settings.placeholder);
|
|
select.placeholder = settings.placeholder;
|
|
}
|
|
if(settings.sortSelect) {
|
|
select.values.sort(function(a, b) {
|
|
return (a.name > b.name)
|
|
? 1
|
|
: -1
|
|
;
|
|
});
|
|
module.debug('Retrieved and sorted values from select', select);
|
|
}
|
|
else {
|
|
module.debug('Retrieved values from select', select);
|
|
}
|
|
return select;
|
|
},
|
|
activeItem: function() {
|
|
return $item.filter('.' + className.active);
|
|
},
|
|
selectedItem: function() {
|
|
var
|
|
$selectedItem = $item.not(selector.unselectable).filter('.' + className.selected)
|
|
;
|
|
return ($selectedItem.length > 0)
|
|
? $selectedItem
|
|
: $item.eq(0)
|
|
;
|
|
},
|
|
itemWithAdditions: function(value) {
|
|
var
|
|
$items = module.get.item(value),
|
|
$userItems = module.create.userChoice(value),
|
|
hasUserItems = ($userItems && $userItems.length > 0)
|
|
;
|
|
if(hasUserItems) {
|
|
$items = ($items.length > 0)
|
|
? $items.add($userItems)
|
|
: $userItems
|
|
;
|
|
}
|
|
return $items;
|
|
},
|
|
item: function(value, strict) {
|
|
var
|
|
$selectedItem = false,
|
|
shouldSearch,
|
|
isMultiple
|
|
;
|
|
value = (value !== undefined)
|
|
? value
|
|
: ( module.get.values() !== undefined)
|
|
? module.get.values()
|
|
: module.get.text()
|
|
;
|
|
shouldSearch = (isMultiple)
|
|
? (value.length > 0)
|
|
: (value !== undefined && value !== null)
|
|
;
|
|
isMultiple = (module.is.multiple() && $.isArray(value));
|
|
strict = (value === '' || value === 0)
|
|
? true
|
|
: strict || false
|
|
;
|
|
if(shouldSearch) {
|
|
$item
|
|
.each(function() {
|
|
var
|
|
$choice = $(this),
|
|
optionText = module.get.choiceText($choice),
|
|
optionValue = module.get.choiceValue($choice, optionText)
|
|
;
|
|
// safe early exit
|
|
if(optionValue === null || optionValue === undefined) {
|
|
return;
|
|
}
|
|
if(isMultiple) {
|
|
if($.inArray( String(optionValue), value) !== -1 || $.inArray(optionText, value) !== -1) {
|
|
$selectedItem = ($selectedItem)
|
|
? $selectedItem.add($choice)
|
|
: $choice
|
|
;
|
|
}
|
|
}
|
|
else if(strict) {
|
|
module.verbose('Ambiguous dropdown value using strict type check', $choice, value);
|
|
if( optionValue === value || optionText === value) {
|
|
$selectedItem = $choice;
|
|
return true;
|
|
}
|
|
}
|
|
else {
|
|
if( String(optionValue) == String(value) || optionText == value) {
|
|
module.verbose('Found select item by value', optionValue, value);
|
|
$selectedItem = $choice;
|
|
return true;
|
|
}
|
|
}
|
|
})
|
|
;
|
|
}
|
|
return $selectedItem;
|
|
}
|
|
},
|
|
|
|
check: {
|
|
maxSelections: function(selectionCount) {
|
|
if(settings.maxSelections) {
|
|
selectionCount = (selectionCount !== undefined)
|
|
? selectionCount
|
|
: module.get.selectionCount()
|
|
;
|
|
if(selectionCount >= settings.maxSelections) {
|
|
module.debug('Maximum selection count reached');
|
|
if(settings.useLabels) {
|
|
$item.addClass(className.filtered);
|
|
module.add.message(message.maxSelections);
|
|
}
|
|
return true;
|
|
}
|
|
else {
|
|
module.verbose('No longer at maximum selection count');
|
|
module.remove.message();
|
|
module.remove.filteredItem();
|
|
if(module.is.searchSelection()) {
|
|
module.filterItems();
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
},
|
|
|
|
restore: {
|
|
defaults: function() {
|
|
module.clear();
|
|
module.restore.defaultText();
|
|
module.restore.defaultValue();
|
|
},
|
|
defaultText: function() {
|
|
var
|
|
defaultText = module.get.defaultText(),
|
|
placeholderText = module.get.placeholderText
|
|
;
|
|
if(defaultText === placeholderText) {
|
|
module.debug('Restoring default placeholder text', defaultText);
|
|
module.set.placeholderText(defaultText);
|
|
}
|
|
else {
|
|
module.debug('Restoring default text', defaultText);
|
|
module.set.text(defaultText);
|
|
}
|
|
},
|
|
placeholderText: function() {
|
|
module.set.placeholderText();
|
|
},
|
|
defaultValue: function() {
|
|
var
|
|
defaultValue = module.get.defaultValue()
|
|
;
|
|
if(defaultValue !== undefined) {
|
|
module.debug('Restoring default value', defaultValue);
|
|
if(defaultValue !== '') {
|
|
module.set.value(defaultValue);
|
|
module.set.selected();
|
|
}
|
|
else {
|
|
module.remove.activeItem();
|
|
module.remove.selectedItem();
|
|
}
|
|
}
|
|
},
|
|
labels: function() {
|
|
if(settings.allowAdditions) {
|
|
if(!settings.useLabels) {
|
|
module.error(error.labels);
|
|
settings.useLabels = true;
|
|
}
|
|
module.debug('Restoring selected values');
|
|
module.create.userLabels();
|
|
}
|
|
module.check.maxSelections();
|
|
},
|
|
selected: function() {
|
|
module.restore.values();
|
|
if(module.is.multiple()) {
|
|
module.debug('Restoring previously selected values and labels');
|
|
module.restore.labels();
|
|
}
|
|
else {
|
|
module.debug('Restoring previously selected values');
|
|
}
|
|
},
|
|
values: function() {
|
|
// prevents callbacks from occurring on initial load
|
|
module.set.initialLoad();
|
|
if(settings.apiSettings && settings.saveRemoteData && module.get.remoteValues()) {
|
|
module.restore.remoteValues();
|
|
}
|
|
else {
|
|
module.set.selected();
|
|
}
|
|
module.remove.initialLoad();
|
|
},
|
|
remoteValues: function() {
|
|
var
|
|
values = module.get.remoteValues()
|
|
;
|
|
module.debug('Recreating selected from session data', values);
|
|
if(values) {
|
|
if( module.is.single() ) {
|
|
$.each(values, function(value, name) {
|
|
module.set.text(name);
|
|
});
|
|
}
|
|
else {
|
|
$.each(values, function(value, name) {
|
|
module.add.label(value, name);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
read: {
|
|
remoteData: function(value) {
|
|
var
|
|
name
|
|
;
|
|
if(window.Storage === undefined) {
|
|
module.error(error.noStorage);
|
|
return;
|
|
}
|
|
name = sessionStorage.getItem(value);
|
|
return (name !== undefined)
|
|
? name
|
|
: false
|
|
;
|
|
}
|
|
},
|
|
|
|
save: {
|
|
defaults: function() {
|
|
module.save.defaultText();
|
|
module.save.placeholderText();
|
|
module.save.defaultValue();
|
|
},
|
|
defaultValue: function() {
|
|
var
|
|
value = module.get.value()
|
|
;
|
|
module.verbose('Saving default value as', value);
|
|
$module.data(metadata.defaultValue, value);
|
|
},
|
|
defaultText: function() {
|
|
var
|
|
text = module.get.text()
|
|
;
|
|
module.verbose('Saving default text as', text);
|
|
$module.data(metadata.defaultText, text);
|
|
},
|
|
placeholderText: function() {
|
|
var
|
|
text
|
|
;
|
|
if(settings.placeholder !== false && $text.hasClass(className.placeholder)) {
|
|
text = module.get.text();
|
|
module.verbose('Saving placeholder text as', text);
|
|
$module.data(metadata.placeholderText, text);
|
|
}
|
|
},
|
|
remoteData: function(name, value) {
|
|
if(window.Storage === undefined) {
|
|
module.error(error.noStorage);
|
|
return;
|
|
}
|
|
module.verbose('Saving remote data to session storage', value, name);
|
|
sessionStorage.setItem(value, name);
|
|
}
|
|
},
|
|
|
|
clear: function() {
|
|
if(module.is.multiple() && settings.useLabels) {
|
|
module.remove.labels();
|
|
}
|
|
else {
|
|
module.remove.activeItem();
|
|
module.remove.selectedItem();
|
|
}
|
|
module.set.placeholderText();
|
|
module.clearValue();
|
|
},
|
|
|
|
clearValue: function() {
|
|
module.set.value('');
|
|
},
|
|
|
|
scrollPage: function(direction, $selectedItem) {
|
|
var
|
|
$currentItem = $selectedItem || module.get.selectedItem(),
|
|
$menu = $currentItem.closest(selector.menu),
|
|
menuHeight = $menu.outerHeight(),
|
|
currentScroll = $menu.scrollTop(),
|
|
itemHeight = $item.eq(0).outerHeight(),
|
|
itemsPerPage = Math.floor(menuHeight / itemHeight),
|
|
maxScroll = $menu.prop('scrollHeight'),
|
|
newScroll = (direction == 'up')
|
|
? currentScroll - (itemHeight * itemsPerPage)
|
|
: currentScroll + (itemHeight * itemsPerPage),
|
|
$selectableItem = $item.not(selector.unselectable),
|
|
isWithinRange,
|
|
$nextSelectedItem,
|
|
elementIndex
|
|
;
|
|
elementIndex = (direction == 'up')
|
|
? $selectableItem.index($currentItem) - itemsPerPage
|
|
: $selectableItem.index($currentItem) + itemsPerPage
|
|
;
|
|
isWithinRange = (direction == 'up')
|
|
? (elementIndex >= 0)
|
|
: (elementIndex < $selectableItem.length)
|
|
;
|
|
$nextSelectedItem = (isWithinRange)
|
|
? $selectableItem.eq(elementIndex)
|
|
: (direction == 'up')
|
|
? $selectableItem.first()
|
|
: $selectableItem.last()
|
|
;
|
|
if($nextSelectedItem.length > 0) {
|
|
module.debug('Scrolling page', direction, $nextSelectedItem);
|
|
$currentItem
|
|
.removeClass(className.selected)
|
|
;
|
|
$nextSelectedItem
|
|
.addClass(className.selected)
|
|
;
|
|
if(settings.selectOnKeydown && module.is.single()) {
|
|
module.set.selectedItem($nextSelectedItem);
|
|
}
|
|
$menu
|
|
.scrollTop(newScroll)
|
|
;
|
|
}
|
|
},
|
|
|
|
set: {
|
|
filtered: function() {
|
|
var
|
|
isMultiple = module.is.multiple(),
|
|
isSearch = module.is.searchSelection(),
|
|
isSearchMultiple = (isMultiple && isSearch),
|
|
searchValue = (isSearch)
|
|
? module.get.query()
|
|
: '',
|
|
hasSearchValue = (typeof searchValue === 'string' && searchValue.length > 0),
|
|
searchWidth = module.get.searchWidth(),
|
|
valueIsSet = searchValue !== ''
|
|
;
|
|
if(isMultiple && hasSearchValue) {
|
|
module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
|
|
$search.css('width', searchWidth);
|
|
}
|
|
if(hasSearchValue || (isSearchMultiple && valueIsSet)) {
|
|
module.verbose('Hiding placeholder text');
|
|
$text.addClass(className.filtered);
|
|
}
|
|
else if(!isMultiple || (isSearchMultiple && !valueIsSet)) {
|
|
module.verbose('Showing placeholder text');
|
|
$text.removeClass(className.filtered);
|
|
}
|
|
},
|
|
empty: function() {
|
|
$module.addClass(className.empty);
|
|
},
|
|
loading: function() {
|
|
$module.addClass(className.loading);
|
|
},
|
|
placeholderText: function(text) {
|
|
text = text || module.get.placeholderText();
|
|
module.debug('Setting placeholder text', text);
|
|
module.set.text(text);
|
|
$text.addClass(className.placeholder);
|
|
},
|
|
tabbable: function() {
|
|
if( module.is.searchSelection() ) {
|
|
module.debug('Added tabindex to searchable dropdown');
|
|
$search
|
|
.val('')
|
|
.attr('tabindex', 0)
|
|
;
|
|
$menu
|
|
.attr('tabindex', -1)
|
|
;
|
|
}
|
|
else {
|
|
module.debug('Added tabindex to dropdown');
|
|
if( $module.attr('tabindex') === undefined) {
|
|
$module
|
|
.attr('tabindex', 0)
|
|
;
|
|
$menu
|
|
.attr('tabindex', -1)
|
|
;
|
|
}
|
|
}
|
|
},
|
|
initialLoad: function() {
|
|
module.verbose('Setting initial load');
|
|
initialLoad = true;
|
|
},
|
|
activeItem: function($item) {
|
|
if( settings.allowAdditions && $item.filter(selector.addition).length > 0 ) {
|
|
$item.addClass(className.filtered);
|
|
}
|
|
else {
|
|
$item.addClass(className.active);
|
|
}
|
|
},
|
|
partialSearch: function(text) {
|
|
var
|
|
length = module.get.query().length
|
|
;
|
|
$search.val( text.substr(0 , length));
|
|
},
|
|
scrollPosition: function($item, forceScroll) {
|
|
var
|
|
edgeTolerance = 5,
|
|
$menu,
|
|
hasActive,
|
|
offset,
|
|
itemHeight,
|
|
itemOffset,
|
|
menuOffset,
|
|
menuScroll,
|
|
menuHeight,
|
|
abovePage,
|
|
belowPage
|
|
;
|
|
|
|
$item = $item || module.get.selectedItem();
|
|
$menu = $item.closest(selector.menu);
|
|
hasActive = ($item && $item.length > 0);
|
|
forceScroll = (forceScroll !== undefined)
|
|
? forceScroll
|
|
: false
|
|
;
|
|
if($item && $menu.length > 0 && hasActive) {
|
|
itemOffset = $item.position().top;
|
|
|
|
$menu.addClass(className.loading);
|
|
menuScroll = $menu.scrollTop();
|
|
menuOffset = $menu.offset().top;
|
|
itemOffset = $item.offset().top;
|
|
offset = menuScroll - menuOffset + itemOffset;
|
|
if(!forceScroll) {
|
|
menuHeight = $menu.height();
|
|
belowPage = menuScroll + menuHeight < (offset + edgeTolerance);
|
|
abovePage = ((offset - edgeTolerance) < menuScroll);
|
|
}
|
|
module.debug('Scrolling to active item', offset);
|
|
if(forceScroll || abovePage || belowPage) {
|
|
$menu.scrollTop(offset);
|
|
}
|
|
$menu.removeClass(className.loading);
|
|
}
|
|
},
|
|
text: function(text) {
|
|
if(settings.action !== 'select') {
|
|
if(settings.action == 'combo') {
|
|
module.debug('Changing combo button text', text, $combo);
|
|
if(settings.preserveHTML) {
|
|
$combo.html(text);
|
|
}
|
|
else {
|
|
$combo.text(text);
|
|
}
|
|
}
|
|
else {
|
|
if(text !== module.get.placeholderText()) {
|
|
$text.removeClass(className.placeholder);
|
|
}
|
|
module.debug('Changing text', text, $text);
|
|
$text
|
|
.removeClass(className.filtered)
|
|
;
|
|
if(settings.preserveHTML) {
|
|
$text.html(text);
|
|
}
|
|
else {
|
|
$text.text(text);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
selectedItem: function($item) {
|
|
var
|
|
value = module.get.choiceValue($item),
|
|
searchText = module.get.choiceText($item, false),
|
|
text = module.get.choiceText($item, true)
|
|
;
|
|
module.debug('Setting user selection to item', $item);
|
|
module.remove.activeItem();
|
|
module.set.partialSearch(searchText);
|
|
module.set.activeItem($item);
|
|
module.set.selected(value, $item);
|
|
module.set.text(text);
|
|
},
|
|
selectedLetter: function(letter) {
|
|
var
|
|
$selectedItem = $item.filter('.' + className.selected),
|
|
alreadySelectedLetter = $selectedItem.length > 0 && module.has.firstLetter($selectedItem, letter),
|
|
$nextValue = false,
|
|
$nextItem
|
|
;
|
|
// check next of same letter
|
|
if(alreadySelectedLetter) {
|
|
$nextItem = $selectedItem.nextAll($item).eq(0);
|
|
if( module.has.firstLetter($nextItem, letter) ) {
|
|
$nextValue = $nextItem;
|
|
}
|
|
}
|
|
// check all values
|
|
if(!$nextValue) {
|
|
$item
|
|
.each(function(){
|
|
if(module.has.firstLetter($(this), letter)) {
|
|
$nextValue = $(this);
|
|
return false;
|
|
}
|
|
})
|
|
;
|
|
}
|
|
// set next value
|
|
if($nextValue) {
|
|
module.verbose('Scrolling to next value with letter', letter);
|
|
module.set.scrollPosition($nextValue);
|
|
$selectedItem.removeClass(className.selected);
|
|
$nextValue.addClass(className.selected);
|
|
if(settings.selectOnKeydown && module.is.single()) {
|
|
module.set.selectedItem($nextValue);
|
|
}
|
|
}
|
|
},
|
|
direction: function($menu) {
|
|
if(settings.direction == 'auto') {
|
|
if(module.is.onScreen($menu)) {
|
|
module.remove.upward($menu);
|
|
}
|
|
else {
|
|
module.set.upward($menu);
|
|
}
|
|
}
|
|
else if(settings.direction == 'upward') {
|
|
module.set.upward($menu);
|
|
}
|
|
},
|
|
upward: function($menu) {
|
|
var $element = $menu || $module;
|
|
$element.addClass(className.upward);
|
|
},
|
|
value: function(value, text, $selected) {
|
|
var
|
|
escapedValue = module.escape.value(value),
|
|
hasInput = ($input.length > 0),
|
|
isAddition = !module.has.value(value),
|
|
currentValue = module.get.values(),
|
|
stringValue = (value !== undefined)
|
|
? String(value)
|
|
: value,
|
|
newValue
|
|
;
|
|
if(hasInput) {
|
|
if(!settings.allowReselection && stringValue == currentValue) {
|
|
module.verbose('Skipping value update already same value', value, currentValue);
|
|
if(!module.is.initialLoad()) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if( module.is.single() && module.has.selectInput() && module.can.extendSelect() ) {
|
|
module.debug('Adding user option', value);
|
|
module.add.optionValue(value);
|
|
}
|
|
module.debug('Updating input value', escapedValue, currentValue);
|
|
internalChange = true;
|
|
$input
|
|
.val(escapedValue)
|
|
;
|
|
if(settings.fireOnInit === false && module.is.initialLoad()) {
|
|
module.debug('Input native change event ignored on initial load');
|
|
}
|
|
else {
|
|
module.trigger.change();
|
|
}
|
|
internalChange = false;
|
|
}
|
|
else {
|
|
module.verbose('Storing value in metadata', escapedValue, $input);
|
|
if(escapedValue !== currentValue) {
|
|
$module.data(metadata.value, stringValue);
|
|
}
|
|
}
|
|
if(settings.fireOnInit === false && module.is.initialLoad()) {
|
|
module.verbose('No callback on initial load', settings.onChange);
|
|
}
|
|
else {
|
|
settings.onChange.call(element, value, text, $selected);
|
|
}
|
|
},
|
|
active: function() {
|
|
$module
|
|
.addClass(className.active)
|
|
;
|
|
},
|
|
multiple: function() {
|
|
$module.addClass(className.multiple);
|
|
},
|
|
visible: function() {
|
|
$module.addClass(className.visible);
|
|
},
|
|
exactly: function(value, $selectedItem) {
|
|
module.debug('Setting selected to exact values');
|
|
module.clear();
|
|
module.set.selected(value, $selectedItem);
|
|
},
|
|
selected: function(value, $selectedItem) {
|
|
var
|
|
isMultiple = module.is.multiple(),
|
|
$userSelectedItem
|
|
;
|
|
$selectedItem = (settings.allowAdditions)
|
|
? $selectedItem || module.get.itemWithAdditions(value)
|
|
: $selectedItem || module.get.item(value)
|
|
;
|
|
if(!$selectedItem) {
|
|
return;
|
|
}
|
|
module.debug('Setting selected menu item to', $selectedItem);
|
|
if(module.is.multiple()) {
|
|
module.remove.searchWidth();
|
|
}
|
|
if(module.is.single()) {
|
|
module.remove.activeItem();
|
|
module.remove.selectedItem();
|
|
}
|
|
else if(settings.useLabels) {
|
|
module.remove.selectedItem();
|
|
}
|
|
// select each item
|
|
$selectedItem
|
|
.each(function() {
|
|
var
|
|
$selected = $(this),
|
|
selectedText = module.get.choiceText($selected),
|
|
selectedValue = module.get.choiceValue($selected, selectedText),
|
|
|
|
isFiltered = $selected.hasClass(className.filtered),
|
|
isActive = $selected.hasClass(className.active),
|
|
isUserValue = $selected.hasClass(className.addition),
|
|
shouldAnimate = (isMultiple && $selectedItem.length == 1)
|
|
;
|
|
if(isMultiple) {
|
|
if(!isActive || isUserValue) {
|
|
if(settings.apiSettings && settings.saveRemoteData) {
|
|
module.save.remoteData(selectedText, selectedValue);
|
|
}
|
|
if(settings.useLabels) {
|
|
module.add.value(selectedValue, selectedText, $selected);
|
|
module.add.label(selectedValue, selectedText, shouldAnimate);
|
|
module.set.activeItem($selected);
|
|
module.filterActive();
|
|
module.select.nextAvailable($selectedItem);
|
|
}
|
|
else {
|
|
module.add.value(selectedValue, selectedText, $selected);
|
|
module.set.text(module.add.variables(message.count));
|
|
module.set.activeItem($selected);
|
|
}
|
|
}
|
|
else if(!isFiltered) {
|
|
module.debug('Selected active value, removing label');
|
|
module.remove.selected(selectedValue);
|
|
}
|
|
}
|
|
else {
|
|
if(settings.apiSettings && settings.saveRemoteData) {
|
|
module.save.remoteData(selectedText, selectedValue);
|
|
}
|
|
module.set.text(selectedText);
|
|
module.set.value(selectedValue, selectedText, $selected);
|
|
$selected
|
|
.addClass(className.active)
|
|
.addClass(className.selected)
|
|
;
|
|
}
|
|
})
|
|
;
|
|
}
|
|
},
|
|
|
|
add: {
|
|
label: function(value, text, shouldAnimate) {
|
|
var
|
|
$next = module.is.searchSelection()
|
|
? $search
|
|
: $text,
|
|
escapedValue = module.escape.value(value),
|
|
$label
|
|
;
|
|
$label = $('<a />')
|
|
.addClass(className.label)
|
|
.attr('data-' + metadata.value, escapedValue)
|
|
.html(templates.label(escapedValue, text))
|
|
;
|
|
$label = settings.onLabelCreate.call($label, escapedValue, text);
|
|
|
|
if(module.has.label(value)) {
|
|
module.debug('Label already exists, skipping', escapedValue);
|
|
return;
|
|
}
|
|
if(settings.label.variation) {
|
|
$label.addClass(settings.label.variation);
|
|
}
|
|
if(shouldAnimate === true) {
|
|
module.debug('Animating in label', $label);
|
|
$label
|
|
.addClass(className.hidden)
|
|
.insertBefore($next)
|
|
.transition(settings.label.transition, settings.label.duration)
|
|
;
|
|
}
|
|
else {
|
|
module.debug('Adding selection label', $label);
|
|
$label
|
|
.insertBefore($next)
|
|
;
|
|
}
|
|
},
|
|
message: function(message) {
|
|
var
|
|
$message = $menu.children(selector.message),
|
|
html = settings.templates.message(module.add.variables(message))
|
|
;
|
|
if($message.length > 0) {
|
|
$message
|
|
.html(html)
|
|
;
|
|
}
|
|
else {
|
|
$message = $('<div/>')
|
|
.html(html)
|
|
.addClass(className.message)
|
|
.appendTo($menu)
|
|
;
|
|
}
|
|
},
|
|
optionValue: function(value) {
|
|
var
|
|
escapedValue = module.escape.value(value),
|
|
$option = $input.find('option[value="' + module.escape.string(escapedValue) + '"]'),
|
|
hasOption = ($option.length > 0)
|
|
;
|
|
if(hasOption) {
|
|
return;
|
|
}
|
|
// temporarily disconnect observer
|
|
module.disconnect.selectObserver();
|
|
if( module.is.single() ) {
|
|
module.verbose('Removing previous user addition');
|
|
$input.find('option.' + className.addition).remove();
|
|
}
|
|
$('<option/>')
|
|
.prop('value', escapedValue)
|
|
.addClass(className.addition)
|
|
.html(value)
|
|
.appendTo($input)
|
|
;
|
|
module.verbose('Adding user addition as an <option>', value);
|
|
module.observe.select();
|
|
},
|
|
userSuggestion: function(value) {
|
|
var
|
|
$addition = $menu.children(selector.addition),
|
|
$existingItem = module.get.item(value),
|
|
alreadyHasValue = $existingItem && $existingItem.not(selector.addition).length,
|
|
hasUserSuggestion = $addition.length > 0,
|
|
html
|
|
;
|
|
if(settings.useLabels && module.has.maxSelections()) {
|
|
return;
|
|
}
|
|
if(value === '' || alreadyHasValue) {
|
|
$addition.remove();
|
|
return;
|
|
}
|
|
if(hasUserSuggestion) {
|
|
$addition
|
|
.data(metadata.value, value)
|
|
.data(metadata.text, value)
|
|
.attr('data-' + metadata.value, value)
|
|
.attr('data-' + metadata.text, value)
|
|
.removeClass(className.filtered)
|
|
;
|
|
if(!settings.hideAdditions) {
|
|
html = settings.templates.addition( module.add.variables(message.addResult, value) );
|
|
$addition
|
|
.html(html)
|
|
;
|
|
}
|
|
module.verbose('Replacing user suggestion with new value', $addition);
|
|
}
|
|
else {
|
|
$addition = module.create.userChoice(value);
|
|
$addition
|
|
.prependTo($menu)
|
|
;
|
|
module.verbose('Adding item choice to menu corresponding with user choice addition', $addition);
|
|
}
|
|
if(!settings.hideAdditions || module.is.allFiltered()) {
|
|
$addition
|
|
.addClass(className.selected)
|
|
.siblings()
|
|
.removeClass(className.selected)
|
|
;
|
|
}
|
|
module.refreshItems();
|
|
},
|
|
variables: function(message, term) {
|
|
var
|
|
hasCount = (message.search('{count}') !== -1),
|
|
hasMaxCount = (message.search('{maxCount}') !== -1),
|
|
hasTerm = (message.search('{term}') !== -1),
|
|
values,
|
|
count,
|
|
query
|
|
;
|
|
module.verbose('Adding templated variables to message', message);
|
|
if(hasCount) {
|
|
count = module.get.selectionCount();
|
|
message = message.replace('{count}', count);
|
|
}
|
|
if(hasMaxCount) {
|
|
count = module.get.selectionCount();
|
|
message = message.replace('{maxCount}', settings.maxSelections);
|
|
}
|
|
if(hasTerm) {
|
|
query = term || module.get.query();
|
|
message = message.replace('{term}', query);
|
|
}
|
|
return message;
|
|
},
|
|
value: function(addedValue, addedText, $selectedItem) {
|
|
var
|
|
currentValue = module.get.values(),
|
|
newValue
|
|
;
|
|
if(addedValue === '') {
|
|
module.debug('Cannot select blank values from multiselect');
|
|
return;
|
|
}
|
|
// extend current array
|
|
if($.isArray(currentValue)) {
|
|
newValue = currentValue.concat([addedValue]);
|
|
newValue = module.get.uniqueArray(newValue);
|
|
}
|
|
else {
|
|
newValue = [addedValue];
|
|
}
|
|
// add values
|
|
if( module.has.selectInput() ) {
|
|
if(module.can.extendSelect()) {
|
|
module.debug('Adding value to select', addedValue, newValue, $input);
|
|
module.add.optionValue(addedValue);
|
|
}
|
|
}
|
|
else {
|
|
newValue = newValue.join(settings.delimiter);
|
|
module.debug('Setting hidden input to delimited value', newValue, $input);
|
|
}
|
|
|
|
if(settings.fireOnInit === false && module.is.initialLoad()) {
|
|
module.verbose('Skipping onadd callback on initial load', settings.onAdd);
|
|
}
|
|
else {
|
|
settings.onAdd.call(element, addedValue, addedText, $selectedItem);
|
|
}
|
|
module.set.value(newValue, addedValue, addedText, $selectedItem);
|
|
module.check.maxSelections();
|
|
}
|
|
},
|
|
|
|
remove: {
|
|
active: function() {
|
|
$module.removeClass(className.active);
|
|
},
|
|
activeLabel: function() {
|
|
$module.find(selector.label).removeClass(className.active);
|
|
},
|
|
empty: function() {
|
|
$module.removeClass(className.empty);
|
|
},
|
|
loading: function() {
|
|
$module.removeClass(className.loading);
|
|
},
|
|
initialLoad: function() {
|
|
initialLoad = false;
|
|
},
|
|
upward: function($menu) {
|
|
var $element = $menu || $module;
|
|
$element.removeClass(className.upward);
|
|
},
|
|
visible: function() {
|
|
$module.removeClass(className.visible);
|
|
},
|
|
activeItem: function() {
|
|
$item.removeClass(className.active);
|
|
},
|
|
filteredItem: function() {
|
|
if(settings.useLabels && module.has.maxSelections() ) {
|
|
return;
|
|
}
|
|
if(settings.useLabels && module.is.multiple()) {
|
|
$item.not('.' + className.active).removeClass(className.filtered);
|
|
}
|
|
else {
|
|
$item.removeClass(className.filtered);
|
|
}
|
|
module.remove.empty();
|
|
},
|
|
optionValue: function(value) {
|
|
var
|
|
escapedValue = module.escape.value(value),
|
|
$option = $input.find('option[value="' + module.escape.string(escapedValue) + '"]'),
|
|
hasOption = ($option.length > 0)
|
|
;
|
|
if(!hasOption || !$option.hasClass(className.addition)) {
|
|
return;
|
|
}
|
|
// temporarily disconnect observer
|
|
if(selectObserver) {
|
|
selectObserver.disconnect();
|
|
module.verbose('Temporarily disconnecting mutation observer');
|
|
}
|
|
$option.remove();
|
|
module.verbose('Removing user addition as an <option>', escapedValue);
|
|
if(selectObserver) {
|
|
selectObserver.observe($input[0], {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
}
|
|
},
|
|
message: function() {
|
|
$menu.children(selector.message).remove();
|
|
},
|
|
searchWidth: function() {
|
|
$search.css('width', '');
|
|
},
|
|
searchTerm: function() {
|
|
module.verbose('Cleared search term');
|
|
$search.val('');
|
|
module.set.filtered();
|
|
},
|
|
userAddition: function() {
|
|
$item.filter(selector.addition).remove();
|
|
},
|
|
selected: function(value, $selectedItem) {
|
|
$selectedItem = (settings.allowAdditions)
|
|
? $selectedItem || module.get.itemWithAdditions(value)
|
|
: $selectedItem || module.get.item(value)
|
|
;
|
|
|
|
if(!$selectedItem) {
|
|
return false;
|
|
}
|
|
|
|
$selectedItem
|
|
.each(function() {
|
|
var
|
|
$selected = $(this),
|
|
selectedText = module.get.choiceText($selected),
|
|
selectedValue = module.get.choiceValue($selected, selectedText)
|
|
;
|
|
if(module.is.multiple()) {
|
|
if(settings.useLabels) {
|
|
module.remove.value(selectedValue, selectedText, $selected);
|
|
module.remove.label(selectedValue);
|
|
}
|
|
else {
|
|
module.remove.value(selectedValue, selectedText, $selected);
|
|
if(module.get.selectionCount() === 0) {
|
|
module.set.placeholderText();
|
|
}
|
|
else {
|
|
module.set.text(module.add.variables(message.count));
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
module.remove.value(selectedValue, selectedText, $selected);
|
|
}
|
|
$selected
|
|
.removeClass(className.filtered)
|
|
.removeClass(className.active)
|
|
;
|
|
if(settings.useLabels) {
|
|
$selected.removeClass(className.selected);
|
|
}
|
|
})
|
|
;
|
|
},
|
|
selectedItem: function() {
|
|
$item.removeClass(className.selected);
|
|
},
|
|
value: function(removedValue, removedText, $removedItem) {
|
|
var
|
|
values = module.get.values(),
|
|
newValue
|
|
;
|
|
if( module.has.selectInput() ) {
|
|
module.verbose('Input is <select> removing selected option', removedValue);
|
|
newValue = module.remove.arrayValue(removedValue, values);
|
|
module.remove.optionValue(removedValue);
|
|
}
|
|
else {
|
|
module.verbose('Removing from delimited values', removedValue);
|
|
newValue = module.remove.arrayValue(removedValue, values);
|
|
newValue = newValue.join(settings.delimiter);
|
|
}
|
|
if(settings.fireOnInit === false && module.is.initialLoad()) {
|
|
module.verbose('No callback on initial load', settings.onRemove);
|
|
}
|
|
else {
|
|
settings.onRemove.call(element, removedValue, removedText, $removedItem);
|
|
}
|
|
module.set.value(newValue, removedText, $removedItem);
|
|
module.check.maxSelections();
|
|
},
|
|
arrayValue: function(removedValue, values) {
|
|
if( !$.isArray(values) ) {
|
|
values = [values];
|
|
}
|
|
values = $.grep(values, function(value){
|
|
return (removedValue != value);
|
|
});
|
|
module.verbose('Removed value from delimited string', removedValue, values);
|
|
return values;
|
|
},
|
|
label: function(value, shouldAnimate) {
|
|
var
|
|
$labels = $module.find(selector.label),
|
|
$removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(value) +'"]')
|
|
;
|
|
module.verbose('Removing label', $removedLabel);
|
|
$removedLabel.remove();
|
|
},
|
|
activeLabels: function($activeLabels) {
|
|
$activeLabels = $activeLabels || $module.find(selector.label).filter('.' + className.active);
|
|
module.verbose('Removing active label selections', $activeLabels);
|
|
module.remove.labels($activeLabels);
|
|
},
|
|
labels: function($labels) {
|
|
$labels = $labels || $module.find(selector.label);
|
|
module.verbose('Removing labels', $labels);
|
|
$labels
|
|
.each(function(){
|
|
var
|
|
$label = $(this),
|
|
value = $label.data(metadata.value),
|
|
stringValue = (value !== undefined)
|
|
? String(value)
|
|
: value,
|
|
isUserValue = module.is.userValue(stringValue)
|
|
;
|
|
if(settings.onLabelRemove.call($label, value) === false) {
|
|
module.debug('Label remove callback cancelled removal');
|
|
return;
|
|
}
|
|
module.remove.message();
|
|
if(isUserValue) {
|
|
module.remove.value(stringValue);
|
|
module.remove.label(stringValue);
|
|
}
|
|
else {
|
|
// selected will also remove label
|
|
module.remove.selected(stringValue);
|
|
}
|
|
})
|
|
;
|
|
},
|
|
tabbable: function() {
|
|
if( module.is.searchSelection() ) {
|
|
module.debug('Searchable dropdown initialized');
|
|
$search
|
|
.removeAttr('tabindex')
|
|
;
|
|
$menu
|
|
.removeAttr('tabindex')
|
|
;
|
|
}
|
|
else {
|
|
module.debug('Simple selection dropdown initialized');
|
|
$module
|
|
.removeAttr('tabindex')
|
|
;
|
|
$menu
|
|
.removeAttr('tabindex')
|
|
;
|
|
}
|
|
}
|
|
},
|
|
|
|
has: {
|
|
menuSearch: function() {
|
|
return (module.has.search() && $search.closest($menu).length > 0);
|
|
},
|
|
search: function() {
|
|
return ($search.length > 0);
|
|
},
|
|
sizer: function() {
|
|
return ($sizer.length > 0);
|
|
},
|
|
selectInput: function() {
|
|
return ( $input.is('select') );
|
|
},
|
|
minCharacters: function(searchTerm) {
|
|
if(settings.minCharacters) {
|
|
searchTerm = (searchTerm !== undefined)
|
|
? String(searchTerm)
|
|
: String(module.get.query())
|
|
;
|
|
return (searchTerm.length >= settings.minCharacters);
|
|
}
|
|
return true;
|
|
},
|
|
firstLetter: function($item, letter) {
|
|
var
|
|
text,
|
|
firstLetter
|
|
;
|
|
if(!$item || $item.length === 0 || typeof letter !== 'string') {
|
|
return false;
|
|
}
|
|
text = module.get.choiceText($item, false);
|
|
letter = letter.toLowerCase();
|
|
firstLetter = String(text).charAt(0).toLowerCase();
|
|
return (letter == firstLetter);
|
|
},
|
|
input: function() {
|
|
return ($input.length > 0);
|
|
},
|
|
items: function() {
|
|
return ($item.length > 0);
|
|
},
|
|
menu: function() {
|
|
return ($menu.length > 0);
|
|
},
|
|
message: function() {
|
|
return ($menu.children(selector.message).length !== 0);
|
|
},
|
|
label: function(value) {
|
|
var
|
|
escapedValue = module.escape.value(value),
|
|
$labels = $module.find(selector.label)
|
|
;
|
|
return ($labels.filter('[data-' + metadata.value + '="' + module.escape.string(escapedValue) +'"]').length > 0);
|
|
},
|
|
maxSelections: function() {
|
|
return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections);
|
|
},
|
|
allResultsFiltered: function() {
|
|
var
|
|
$normalResults = $item.not(selector.addition)
|
|
;
|
|
return ($normalResults.filter(selector.unselectable).length === $normalResults.length);
|
|
},
|
|
userSuggestion: function() {
|
|
return ($menu.children(selector.addition).length > 0);
|
|
},
|
|
query: function() {
|
|
return (module.get.query() !== '');
|
|
},
|
|
value: function(value) {
|
|
var
|
|
values = module.get.values(),
|
|
hasValue = $.isArray(values)
|
|
? values && ($.inArray(value, values) !== -1)
|
|
: (values == value)
|
|
;
|
|
return (hasValue)
|
|
? true
|
|
: false
|
|
;
|
|
}
|
|
},
|
|
|
|
is: {
|
|
active: function() {
|
|
return $module.hasClass(className.active);
|
|
},
|
|
bubbledLabelClick: function(event) {
|
|
return $(event.target).is('select, input') && $module.closest('label').length > 0;
|
|
},
|
|
bubbledIconClick: function(event) {
|
|
return $(event.target).closest($icon).length > 0;
|
|
},
|
|
alreadySetup: function() {
|
|
return ($module.is('select') && $module.parent(selector.dropdown).length > 0 && $module.prev().length === 0);
|
|
},
|
|
animating: function($subMenu) {
|
|
return ($subMenu)
|
|
? $subMenu.transition && $subMenu.transition('is animating')
|
|
: $menu.transition && $menu.transition('is animating')
|
|
;
|
|
},
|
|
disabled: function() {
|
|
return $module.hasClass(className.disabled);
|
|
},
|
|
focused: function() {
|
|
return (document.activeElement === $module[0]);
|
|
},
|
|
focusedOnSearch: function() {
|
|
return (document.activeElement === $search[0]);
|
|
},
|
|
allFiltered: function() {
|
|
return( (module.is.multiple() || module.has.search()) && !(settings.hideAdditions == false && module.has.userSuggestion()) && !module.has.message() && module.has.allResultsFiltered() );
|
|
},
|
|
hidden: function($subMenu) {
|
|
return !module.is.visible($subMenu);
|
|
},
|
|
initialLoad: function() {
|
|
return initialLoad;
|
|
},
|
|
onScreen: function($subMenu) {
|
|
var
|
|
$currentMenu = $subMenu || $menu,
|
|
canOpenDownward = true,
|
|
onScreen = {},
|
|
calculations
|
|
;
|
|
$currentMenu.addClass(className.loading);
|
|
calculations = {
|
|
context: {
|
|
scrollTop : $context.scrollTop(),
|
|
height : $context.outerHeight()
|
|
},
|
|
menu : {
|
|
offset: $currentMenu.offset(),
|
|
height: $currentMenu.outerHeight()
|
|
}
|
|
};
|
|
if(module.is.verticallyScrollableContext()) {
|
|
calculations.menu.offset.top += calculations.context.scrollTop;
|
|
}
|
|
onScreen = {
|
|
above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.menu.height,
|
|
below : (calculations.context.scrollTop + calculations.context.height) >= calculations.menu.offset.top + calculations.menu.height
|
|
};
|
|
if(onScreen.below) {
|
|
module.verbose('Dropdown can fit in context downward', onScreen);
|
|
canOpenDownward = true;
|
|
}
|
|
else if(!onScreen.below && !onScreen.above) {
|
|
module.verbose('Dropdown cannot fit in either direction, favoring downward', onScreen);
|
|
canOpenDownward = true;
|
|
}
|
|
else {
|
|
module.verbose('Dropdown cannot fit below, opening upward', onScreen);
|
|
canOpenDownward = false;
|
|
}
|
|
$currentMenu.removeClass(className.loading);
|
|
return canOpenDownward;
|
|
},
|
|
inObject: function(needle, object) {
|
|
var
|
|
found = false
|
|
;
|
|
$.each(object, function(index, property) {
|
|
if(property == needle) {
|
|
found = true;
|
|
return true;
|
|
}
|
|
});
|
|
return found;
|
|
},
|
|
multiple: function() {
|
|
return $module.hasClass(className.multiple);
|
|
},
|
|
remote: function() {
|
|
return settings.apiSettings && module.can.useAPI();
|
|
},
|
|
single: function() {
|
|
return !module.is.multiple();
|
|
},
|
|
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);
|
|
},
|
|
searchSelection: function() {
|
|
return ( module.has.search() && $search.parent(selector.dropdown).length === 1 );
|
|
},
|
|
selection: function() {
|
|
return $module.hasClass(className.selection);
|
|
},
|
|
userValue: function(value) {
|
|
return ($.inArray(value, module.get.userValues()) !== -1);
|
|
},
|
|
upward: function($menu) {
|
|
var $element = $menu || $module;
|
|
return $element.hasClass(className.upward);
|
|
},
|
|
visible: function($subMenu) {
|
|
return ($subMenu)
|
|
? $subMenu.hasClass(className.visible)
|
|
: $menu.hasClass(className.visible)
|
|
;
|
|
},
|
|
verticallyScrollableContext: function() {
|
|
var
|
|
overflowY = ($context.get(0) !== window)
|
|
? $context.css('overflow-y')
|
|
: false
|
|
;
|
|
return (overflowY == 'auto' || overflowY == 'scroll');
|
|
}
|
|
},
|
|
|
|
can: {
|
|
activate: function($item) {
|
|
if(settings.useLabels) {
|
|
return true;
|
|
}
|
|
if(!module.has.maxSelections()) {
|
|
return true;
|
|
}
|
|
if(module.has.maxSelections() && $item.hasClass(className.active)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
click: function() {
|
|
return (hasTouch || settings.on == 'click');
|
|
},
|
|
extendSelect: function() {
|
|
return settings.allowAdditions || settings.apiSettings;
|
|
},
|
|
show: function() {
|
|
return !module.is.disabled() && (module.has.items() || module.has.message());
|
|
},
|
|
useAPI: function() {
|
|
return $.fn.api !== undefined;
|
|
}
|
|
},
|
|
|
|
animate: {
|
|
show: function(callback, $subMenu) {
|
|
var
|
|
$currentMenu = $subMenu || $menu,
|
|
start = ($subMenu)
|
|
? function() {}
|
|
: function() {
|
|
module.hideSubMenus();
|
|
module.hideOthers();
|
|
module.set.active();
|
|
},
|
|
transition
|
|
;
|
|
callback = $.isFunction(callback)
|
|
? callback
|
|
: function(){}
|
|
;
|
|
module.verbose('Doing menu show animation', $currentMenu);
|
|
module.set.direction($subMenu);
|
|
transition = module.get.transition($subMenu);
|
|
if( module.is.selection() ) {
|
|
module.set.scrollPosition(module.get.selectedItem(), true);
|
|
}
|
|
if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
|
|
if(transition == 'none') {
|
|
start();
|
|
$currentMenu.transition('show');
|
|
callback.call(element);
|
|
}
|
|
else if($.fn.transition !== undefined && $module.transition('is supported')) {
|
|
$currentMenu
|
|
.transition({
|
|
animation : transition + ' in',
|
|
debug : settings.debug,
|
|
verbose : settings.verbose,
|
|
duration : settings.duration,
|
|
queue : true,
|
|
onStart : start,
|
|
onComplete : function() {
|
|
callback.call(element);
|
|
}
|
|
})
|
|
;
|
|
}
|
|
else {
|
|
module.error(error.noTransition, 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.remove.active();
|
|
},
|
|
transition = module.get.transition($subMenu)
|
|
;
|
|
callback = $.isFunction(callback)
|
|
? callback
|
|
: function(){}
|
|
;
|
|
if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) {
|
|
module.verbose('Doing menu hide animation', $currentMenu);
|
|
|
|
if(transition == 'none') {
|
|
start();
|
|
$currentMenu.transition('hide');
|
|
callback.call(element);
|
|
}
|
|
else if($.fn.transition !== undefined && $module.transition('is supported')) {
|
|
$currentMenu
|
|
.transition({
|
|
animation : transition + ' out',
|
|
duration : settings.duration,
|
|
debug : settings.debug,
|
|
verbose : settings.verbose,
|
|
queue : true,
|
|
onStart : start,
|
|
onComplete : function() {
|
|
if(settings.direction == 'auto') {
|
|
module.remove.upward($subMenu);
|
|
}
|
|
callback.call(element);
|
|
}
|
|
})
|
|
;
|
|
}
|
|
else {
|
|
module.error(error.transition);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
hideAndClear: function() {
|
|
module.remove.searchTerm();
|
|
if( module.has.maxSelections() ) {
|
|
return;
|
|
}
|
|
if(module.has.search()) {
|
|
module.hide(function() {
|
|
module.remove.filteredItem();
|
|
});
|
|
}
|
|
else {
|
|
module.hide();
|
|
}
|
|
},
|
|
|
|
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: {
|
|
value: function(value) {
|
|
var
|
|
multipleValues = $.isArray(value),
|
|
stringValue = (typeof value === 'string'),
|
|
isUnparsable = (!stringValue && !multipleValues),
|
|
hasQuotes = (stringValue && value.search(regExp.quote) !== -1),
|
|
values = []
|
|
;
|
|
if(isUnparsable || !hasQuotes) {
|
|
return value;
|
|
}
|
|
module.debug('Encoding quote values for use in select', value);
|
|
if(multipleValues) {
|
|
$.each(value, function(index, value){
|
|
values.push(value.replace(regExp.quote, '"'));
|
|
});
|
|
return values;
|
|
}
|
|
return value.replace(regExp.quote, '"');
|
|
},
|
|
string: function(text) {
|
|
text = String(text);
|
|
return text.replace(regExp.escape, '\\$&');
|
|
}
|
|
},
|
|
|
|
setting: function(name, value) {
|
|
module.debug('Changing setting', name, value);
|
|
if( $.isPlainObject(name) ) {
|
|
$.extend(true, settings, name);
|
|
}
|
|
else if(value !== undefined) {
|
|
if($.isPlainObject(settings[name])) {
|
|
$.extend(true, settings[name], value);
|
|
}
|
|
else {
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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 = {
|
|
|
|
silent : false,
|
|
debug : false,
|
|
verbose : false,
|
|
performance : true,
|
|
|
|
on : 'click', // what event should show menu action on item selection
|
|
action : 'activate', // action on item selection (nothing, activate, select, combo, hide, function(){})
|
|
|
|
|
|
apiSettings : false,
|
|
selectOnKeydown : true, // Whether selection should occur automatically when keyboard shortcuts used
|
|
minCharacters : 0, // Minimum characters required to trigger API call
|
|
|
|
filterRemoteData : false, // Whether API results should be filtered after being returned for query term
|
|
saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
|
|
|
|
throttle : 200, // How long to wait after last user input to search remotely
|
|
|
|
context : window, // Context to use when determining if on screen
|
|
direction : 'auto', // Whether dropdown should always open in one direction
|
|
keepOnScreen : true, // Whether dropdown should check whether it is on screen before showing
|
|
|
|
match : 'both', // what to match against with search selection (both, text, or label)
|
|
fullTextSearch : false, // search anywhere in value (set to 'exact' to require exact matches)
|
|
|
|
placeholder : 'auto', // whether to convert blank <select> values to placeholder text
|
|
preserveHTML : true, // preserve html when selecting value
|
|
sortSelect : false, // sort selection on init
|
|
|
|
forceSelection : true, // force a choice on blur with search selection
|
|
|
|
allowAdditions : false, // whether multiple select should allow user added values
|
|
hideAdditions : true, // whether or not to hide special message prompting a user they can enter a value
|
|
|
|
maxSelections : false, // When set to a number limits the number of selections to this count
|
|
useLabels : true, // whether multiple select should filter currently active selections from choices
|
|
delimiter : ',', // when multiselect uses normal <input> the values will be delimited with this character
|
|
|
|
showOnFocus : true, // show menu on focus
|
|
allowReselection : false, // whether current value should trigger callbacks when reselected
|
|
allowTab : true, // add tabindex to element
|
|
allowCategorySelection : false, // allow elements with sub-menus to be selected
|
|
|
|
fireOnInit : false, // Whether callbacks should fire when initializing dropdown values
|
|
|
|
transition : 'auto', // auto transition will slide down or up based on direction
|
|
duration : 200, // duration of transition
|
|
|
|
glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
|
|
|
|
// label settings on multi-select
|
|
label: {
|
|
transition : 'scale',
|
|
duration : 200,
|
|
variation : false
|
|
},
|
|
|
|
// delay before event
|
|
delay : {
|
|
hide : 300,
|
|
show : 200,
|
|
search : 20,
|
|
touch : 50
|
|
},
|
|
|
|
/* Callbacks */
|
|
onChange : function(value, text, $selected){},
|
|
onAdd : function(value, text, $selected){},
|
|
onRemove : function(value, text, $selected){},
|
|
|
|
onLabelSelect : function($selectedLabels){},
|
|
onLabelCreate : function(value, text) { return $(this); },
|
|
onLabelRemove : function(value) { return true; },
|
|
onNoResults : function(searchTerm) { return true; },
|
|
onShow : function(){},
|
|
onHide : function(){},
|
|
|
|
/* Component */
|
|
name : 'Dropdown',
|
|
namespace : 'dropdown',
|
|
|
|
message: {
|
|
addResult : 'Add <b>{term}</b>',
|
|
count : '{count} selected',
|
|
maxSelections : 'Max {maxCount} selections',
|
|
noResults : 'No results found.',
|
|
serverError : 'There was an error contacting the server'
|
|
},
|
|
|
|
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',
|
|
labels : 'Allowing user additions currently requires the use of labels.',
|
|
missingMultiple : '<select> requires multiple property to be set to correctly preserve multiple values',
|
|
method : 'The method you called is not defined.',
|
|
noAPI : 'The API module is required to load resources remotely',
|
|
noStorage : 'Saving remote data requires session storage',
|
|
noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
|
|
},
|
|
|
|
regExp : {
|
|
escape : /[-[\]{}()*+?.,\\^$|#\s]/g,
|
|
quote : /"/g
|
|
},
|
|
|
|
metadata : {
|
|
defaultText : 'defaultText',
|
|
defaultValue : 'defaultValue',
|
|
placeholderText : 'placeholder',
|
|
text : 'text',
|
|
value : 'value'
|
|
},
|
|
|
|
// property names for remote query
|
|
fields: {
|
|
remoteValues : 'results', // grouping for api results
|
|
values : 'values', // grouping for all dropdown values
|
|
disabled : 'disabled', // whether value should be disabled
|
|
name : 'name', // displayed dropdown text
|
|
value : 'value', // actual dropdown value
|
|
text : 'text' // displayed text when selected
|
|
},
|
|
|
|
keys : {
|
|
backspace : 8,
|
|
delimiter : 188, // comma
|
|
deleteKey : 46,
|
|
enter : 13,
|
|
escape : 27,
|
|
pageUp : 33,
|
|
pageDown : 34,
|
|
leftArrow : 37,
|
|
upArrow : 38,
|
|
rightArrow : 39,
|
|
downArrow : 40
|
|
},
|
|
|
|
selector : {
|
|
addition : '.addition',
|
|
dropdown : '.ui.dropdown',
|
|
hidden : '.hidden',
|
|
icon : '> .dropdown.icon',
|
|
input : '> input[type="hidden"], > select',
|
|
item : '.item',
|
|
label : '> .label',
|
|
remove : '> .label > .delete.icon',
|
|
siblingLabel : '.label',
|
|
menu : '.menu',
|
|
message : '.message',
|
|
menuIcon : '.dropdown.icon',
|
|
search : 'input.search, .menu > .search > input, .menu input.search',
|
|
sizer : '> input.sizer',
|
|
text : '> .text:not(.icon)',
|
|
unselectable : '.disabled, .filtered'
|
|
},
|
|
|
|
className : {
|
|
active : 'active',
|
|
addition : 'addition',
|
|
animating : 'animating',
|
|
disabled : 'disabled',
|
|
empty : 'empty',
|
|
dropdown : 'ui dropdown',
|
|
filtered : 'filtered',
|
|
hidden : 'hidden transition',
|
|
item : 'item',
|
|
label : 'ui label',
|
|
loading : 'loading',
|
|
menu : 'menu',
|
|
message : 'message',
|
|
multiple : 'multiple',
|
|
placeholder : 'default',
|
|
sizer : 'sizer',
|
|
search : 'search',
|
|
selected : 'selected',
|
|
selection : 'selection',
|
|
upward : 'upward',
|
|
visible : 'visible'
|
|
}
|
|
|
|
};
|
|
|
|
/* Templates */
|
|
$.fn.dropdown.settings.templates = {
|
|
|
|
// generates dropdown from select values
|
|
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 += (option.disabled)
|
|
? '<div class="disabled item" data-value="' + option.value + '">' + option.name + '</div>'
|
|
: '<div class="item" data-value="' + option.value + '">' + option.name + '</div>'
|
|
;
|
|
});
|
|
html += '</div>';
|
|
return html;
|
|
},
|
|
|
|
// generates just menu from select
|
|
menu: function(response, fields) {
|
|
var
|
|
values = response[fields.values] || {},
|
|
html = ''
|
|
;
|
|
$.each(values, function(index, option) {
|
|
var
|
|
maybeText = (option[fields.text])
|
|
? 'data-text="' + option[fields.text] + '"'
|
|
: '',
|
|
maybeDisabled = (option[fields.disabled])
|
|
? 'disabled '
|
|
: ''
|
|
;
|
|
html += '<div class="'+ maybeDisabled +'item" data-value="' + option[fields.value] + '"' + maybeText + '>'
|
|
html += option[fields.name];
|
|
html += '</div>';
|
|
});
|
|
return html;
|
|
},
|
|
|
|
// generates label for multiselect
|
|
label: function(value, text) {
|
|
return text + '<i class="delete icon"></i>';
|
|
},
|
|
|
|
|
|
// generates messages like "No results"
|
|
message: function(message) {
|
|
return message;
|
|
},
|
|
|
|
// generates user addition to selection menu
|
|
addition: function(choice) {
|
|
return choice;
|
|
}
|
|
|
|
};
|
|
|
|
})( jQuery, window, document );
|
|
|
|
/*!
|
|
* # Semantic UI 2.2.10 - Embed
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.fn.embed = 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.embed.settings, parameters)
|
|
: $.extend({}, $.fn.embed.settings),
|
|
|
|
selector = settings.selector,
|
|
className = settings.className,
|
|
sources = settings.sources,
|
|
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),
|
|
$icon = $module.find(selector.icon),
|
|
$embed = $module.find(selector.embed),
|
|
|
|
element = this,
|
|
instance = $module.data(moduleNamespace),
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
module.debug('Initializing embed');
|
|
module.determine.autoplay();
|
|
module.create();
|
|
module.bind.events();
|
|
module.instantiate();
|
|
},
|
|
|
|
instantiate: function() {
|
|
module.verbose('Storing instance of module', module);
|
|
instance = module;
|
|
$module
|
|
.data(moduleNamespace, module)
|
|
;
|
|
},
|
|
|
|
destroy: function() {
|
|
module.verbose('Destroying previous instance of embed');
|
|
module.reset();
|
|
$module
|
|
.removeData(moduleNamespace)
|
|
.off(eventNamespace)
|
|
;
|
|
},
|
|
|
|
refresh: function() {
|
|
module.verbose('Refreshing selector cache');
|
|
$placeholder = $module.find(selector.placeholder);
|
|
$icon = $module.find(selector.icon);
|
|
$embed = $module.find(selector.embed);
|
|
},
|
|
|
|
bind: {
|
|
events: function() {
|
|
if( module.has.placeholder() ) {
|
|
module.debug('Adding placeholder events');
|
|
$module
|
|
.on('click' + eventNamespace, selector.placeholder, module.createAndShow)
|
|
.on('click' + eventNamespace, selector.icon, module.createAndShow)
|
|
;
|
|
}
|
|
}
|
|
},
|
|
|
|
create: function() {
|
|
var
|
|
placeholder = module.get.placeholder()
|
|
;
|
|
if(placeholder) {
|
|
module.createPlaceholder();
|
|
}
|
|
else {
|
|
module.createAndShow();
|
|
}
|
|
},
|
|
|
|
createPlaceholder: function(placeholder) {
|
|
var
|
|
icon = module.get.icon(),
|
|
url = module.get.url(),
|
|
embed = module.generate.embed(url)
|
|
;
|
|
placeholder = placeholder || module.get.placeholder();
|
|
$module.html( templates.placeholder(placeholder, icon) );
|
|
module.debug('Creating placeholder for embed', placeholder, icon);
|
|
},
|
|
|
|
createEmbed: function(url) {
|
|
module.refresh();
|
|
url = url || module.get.url();
|
|
$embed = $('<div/>')
|
|
.addClass(className.embed)
|
|
.html( module.generate.embed(url) )
|
|
.appendTo($module)
|
|
;
|
|
settings.onCreate.call(element, url);
|
|
module.debug('Creating embed object', $embed);
|
|
},
|
|
|
|
changeEmbed: function(url) {
|
|
$embed
|
|
.html( module.generate.embed(url) )
|
|
;
|
|
},
|
|
|
|
createAndShow: function() {
|
|
module.createEmbed();
|
|
module.show();
|
|
},
|
|
|
|
// sets new embed
|
|
change: function(source, id, url) {
|
|
module.debug('Changing video to ', source, id, url);
|
|
$module
|
|
.data(metadata.source, source)
|
|
.data(metadata.id, id)
|
|
;
|
|
if(url) {
|
|
$module.data(metadata.url, url);
|
|
}
|
|
else {
|
|
$module.removeData(metadata.url);
|
|
}
|
|
if(module.has.embed()) {
|
|
module.changeEmbed();
|
|
}
|
|
else {
|
|
module.create();
|
|
}
|
|
},
|
|
|
|
// clears embed
|
|
reset: function() {
|
|
module.debug('Clearing embed and showing placeholder');
|
|
module.remove.active();
|
|
module.remove.embed();
|
|
module.showPlaceholder();
|
|
settings.onReset.call(element);
|
|
},
|
|
|
|
// shows current embed
|
|
show: function() {
|
|
module.debug('Showing embed');
|
|
module.set.active();
|
|
settings.onDisplay.call(element);
|
|
},
|
|
|
|
hide: function() {
|
|
module.debug('Hiding embed');
|
|
module.showPlaceholder();
|
|
},
|
|
|
|
showPlaceholder: function() {
|
|
module.debug('Showing placeholder image');
|
|
module.remove.active();
|
|
settings.onPlaceholderDisplay.call(element);
|
|
},
|
|
|
|
get: {
|
|
id: function() {
|
|
return settings.id || $module.data(metadata.id);
|
|
},
|
|
placeholder: function() {
|
|
return settings.placeholder || $module.data(metadata.placeholder);
|
|
},
|
|
icon: function() {
|
|
return (settings.icon)
|
|
? settings.icon
|
|
: ($module.data(metadata.icon) !== undefined)
|
|
? $module.data(metadata.icon)
|
|
: module.determine.icon()
|
|
;
|
|
},
|
|
source: function(url) {
|
|
return (settings.source)
|
|
? settings.source
|
|
: ($module.data(metadata.source) !== undefined)
|
|
? $module.data(metadata.source)
|
|
: module.determine.source()
|
|
;
|
|
},
|
|
type: function() {
|
|
var source = module.get.source();
|
|
return (sources[source] !== undefined)
|
|
? sources[source].type
|
|
: false
|
|
;
|
|
},
|
|
url: function() {
|
|
return (settings.url)
|
|
? settings.url
|
|
: ($module.data(metadata.url) !== undefined)
|
|
? $module.data(metadata.url)
|
|
: module.determine.url()
|
|
;
|
|
}
|
|
},
|
|
|
|
determine: {
|
|
autoplay: function() {
|
|
if(module.should.autoplay()) {
|
|
settings.autoplay = true;
|
|
}
|
|
},
|
|
source: function(url) {
|
|
var
|
|
matchedSource = false
|
|
;
|
|
url = url || module.get.url();
|
|
if(url) {
|
|
$.each(sources, function(name, source) {
|
|
if(url.search(source.domain) !== -1) {
|
|
matchedSource = name;
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
return matchedSource;
|
|
},
|
|
icon: function() {
|
|
var
|
|
source = module.get.source()
|
|
;
|
|
return (sources[source] !== undefined)
|
|
? sources[source].icon
|
|
: false
|
|
;
|
|
},
|
|
url: function() {
|
|
var
|
|
id = settings.id || $module.data(metadata.id),
|
|
source = settings.source || $module.data(metadata.source),
|
|
url
|
|
;
|
|
url = (sources[source] !== undefined)
|
|
? sources[source].url.replace('{id}', id)
|
|
: false
|
|
;
|
|
if(url) {
|
|
$module.data(metadata.url, url);
|
|
}
|
|
return url;
|
|
}
|
|
},
|
|
|
|
|
|
set: {
|
|
active: function() {
|
|
$module.addClass(className.active);
|
|
}
|
|
},
|
|
|
|
remove: {
|
|
active: function() {
|
|
$module.removeClass(className.active);
|
|
},
|
|
embed: function() {
|
|
$embed.empty();
|
|
}
|
|
},
|
|
|
|
encode: {
|
|
parameters: function(parameters) {
|
|
var
|
|
urlString = [],
|
|
index
|
|
;
|
|
for (index in parameters) {
|
|
urlString.push( encodeURIComponent(index) + '=' + encodeURIComponent( parameters[index] ) );
|
|
}
|
|
return urlString.join('&');
|
|
}
|
|
},
|
|
|
|
generate: {
|
|
embed: function(url) {
|
|
module.debug('Generating embed html');
|
|
var
|
|
source = module.get.source(),
|
|
html,
|
|
parameters
|
|
;
|
|
url = module.get.url(url);
|
|
if(url) {
|
|
parameters = module.generate.parameters(source);
|
|
html = templates.iframe(url, parameters);
|
|
}
|
|
else {
|
|
module.error(error.noURL, $module);
|
|
}
|
|
return html;
|
|
},
|
|
parameters: function(source, extraParameters) {
|
|
var
|
|
parameters = (sources[source] && sources[source].parameters !== undefined)
|
|
? sources[source].parameters(settings)
|
|
: {}
|
|
;
|
|
extraParameters = extraParameters || settings.parameters;
|
|
if(extraParameters) {
|
|
parameters = $.extend({}, parameters, extraParameters);
|
|
}
|
|
parameters = settings.onEmbed(parameters);
|
|
return module.encode.parameters(parameters);
|
|
}
|
|
},
|
|
|
|
has: {
|
|
embed: function() {
|
|
return ($embed.length > 0);
|
|
},
|
|
placeholder: function() {
|
|
return settings.placeholder || $module.data(metadata.placeholder);
|
|
}
|
|
},
|
|
|
|
should: {
|
|
autoplay: function() {
|
|
return (settings.autoplay === 'auto')
|
|
? (settings.placeholder || $module.data(metadata.placeholder) !== undefined)
|
|
: settings.autoplay
|
|
;
|
|
}
|
|
},
|
|
|
|
is: {
|
|
video: function() {
|
|
return module.get.type() == 'video';
|
|
}
|
|
},
|
|
|
|
setting: function(name, value) {
|
|
module.debug('Changing setting', name, value);
|
|
if( $.isPlainObject(name) ) {
|
|
$.extend(true, settings, name);
|
|
}
|
|
else if(value !== undefined) {
|
|
if($.isPlainObject(settings[name])) {
|
|
$.extend(true, settings[name], value);
|
|
}
|
|
else {
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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.embed.settings = {
|
|
|
|
name : 'Embed',
|
|
namespace : 'embed',
|
|
|
|
silent : false,
|
|
debug : false,
|
|
verbose : false,
|
|
performance : true,
|
|
|
|
icon : false,
|
|
source : false,
|
|
url : false,
|
|
id : false,
|
|
|
|
// standard video settings
|
|
autoplay : 'auto',
|
|
color : '#444444',
|
|
hd : true,
|
|
brandedUI : false,
|
|
|
|
// additional parameters to include with the embed
|
|
parameters: false,
|
|
|
|
onDisplay : function() {},
|
|
onPlaceholderDisplay : function() {},
|
|
onReset : function() {},
|
|
onCreate : function(url) {},
|
|
onEmbed : function(parameters) {
|
|
return parameters;
|
|
},
|
|
|
|
metadata : {
|
|
id : 'id',
|
|
icon : 'icon',
|
|
placeholder : 'placeholder',
|
|
source : 'source',
|
|
url : 'url'
|
|
},
|
|
|
|
error : {
|
|
noURL : 'No URL specified',
|
|
method : 'The method you called is not defined'
|
|
},
|
|
|
|
className : {
|
|
active : 'active',
|
|
embed : 'embed'
|
|
},
|
|
|
|
selector : {
|
|
embed : '.embed',
|
|
placeholder : '.placeholder',
|
|
icon : '.icon'
|
|
},
|
|
|
|
sources: {
|
|
youtube: {
|
|
name : 'youtube',
|
|
type : 'video',
|
|
icon : 'video play',
|
|
domain : 'youtube.com',
|
|
url : '//www.youtube.com/embed/{id}',
|
|
parameters: function(settings) {
|
|
return {
|
|
autohide : !settings.brandedUI,
|
|
autoplay : settings.autoplay,
|
|
color : settings.color || undefined,
|
|
hq : settings.hd,
|
|
jsapi : settings.api,
|
|
modestbranding : !settings.brandedUI
|
|
};
|
|
}
|
|
},
|
|
vimeo: {
|
|
name : 'vimeo',
|
|
type : 'video',
|
|
icon : 'video play',
|
|
domain : 'vimeo.com',
|
|
url : '//player.vimeo.com/video/{id}',
|
|
parameters: function(settings) {
|
|
return {
|
|
api : settings.api,
|
|
autoplay : settings.autoplay,
|
|
byline : settings.brandedUI,
|
|
color : settings.color || undefined,
|
|
portrait : settings.brandedUI,
|
|
title : settings.brandedUI
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
templates: {
|
|
iframe : function(url, parameters) {
|
|
var src = url;
|
|
if (parameters) {
|
|
src += '?' + parameters;
|
|
}
|
|
return ''
|
|
+ '<iframe src="' + src + '"'
|
|
+ ' width="100%" height="100%"'
|
|
+ ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
|
;
|
|
},
|
|
placeholder : function(image, icon) {
|
|
var
|
|
html = ''
|
|
;
|
|
if(icon) {
|
|
html += '<i class="' + icon + ' icon"></i>';
|
|
}
|
|
if(image) {
|
|
html += '<img class="placeholder" src="' + image + '">';
|
|
}
|
|
return html;
|
|
}
|
|
},
|
|
|
|
// NOT YET IMPLEMENTED
|
|
api : false,
|
|
onPause : function() {},
|
|
onPlay : function() {},
|
|
onStop : function() {}
|
|
|
|
};
|
|
|
|
|
|
|
|
})( jQuery, window, document );
|
|
|
|
/*!
|
|
* # Semantic UI 2.2.10 - Shape
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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 = ( $.isPlainObject(parameters) )
|
|
? $.extend(true, {}, $.fn.shape.settings, parameters)
|
|
: $.extend({}, $.fn.shape.settings),
|
|
|
|
// 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[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[0]);
|
|
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);
|
|
if(settings.duration || settings.duration === 0) {
|
|
$sides.add($side)
|
|
.css({
|
|
'-webkit-transition-duration': duration,
|
|
'-moz-transition-duration': duration,
|
|
'-ms-transition-duration': duration,
|
|
'-o-transition-duration': duration,
|
|
'transition-duration': duration
|
|
})
|
|
;
|
|
}
|
|
},
|
|
|
|
currentStageSize: function() {
|
|
var
|
|
$activeSide = $module.find('.' + settings.className.active),
|
|
width = $activeSide.outerWidth(true),
|
|
height = $activeSide.outerHeight(true)
|
|
;
|
|
$module
|
|
.css({
|
|
width: width,
|
|
height: height
|
|
})
|
|
;
|
|
},
|
|
|
|
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(),
|
|
newWidth = (settings.width == 'next')
|
|
? $nextSide.outerWidth(true)
|
|
: (settings.width == 'initial')
|
|
? $module.width()
|
|
: settings.width,
|
|
newHeight = (settings.height == 'next')
|
|
? $nextSide.outerHeight(true)
|
|
: (settings.height == 'initial')
|
|
? $module.height()
|
|
: settings.height
|
|
;
|
|
$activeSide.removeClass(className.active);
|
|
$nextSide.addClass(className.active);
|
|
$clone.insertAfter($module);
|
|
$clone.remove();
|
|
if(settings.width != 'auto') {
|
|
$module.css('width', newWidth + settings.jitter);
|
|
module.verbose('Specifying width during animation', newWidth);
|
|
}
|
|
if(settings.height != 'auto') {
|
|
$module.css('height', newHeight + settings.jitter);
|
|
module.verbose('Specifying height during animation', newHeight);
|
|
}
|
|
},
|
|
|
|
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[0]);
|
|
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);
|
|
var
|
|
transform = module.get.transform.up()
|
|
;
|
|
module.set.stageSize();
|
|
module.stage.above();
|
|
module.animate(transform);
|
|
}
|
|
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);
|
|
var
|
|
transform = module.get.transform.down()
|
|
;
|
|
module.set.stageSize();
|
|
module.stage.below();
|
|
module.animate(transform);
|
|
}
|
|
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);
|
|
var
|
|
transform = module.get.transform.left()
|
|
;
|
|
module.set.stageSize();
|
|
module.stage.left();
|
|
module.animate(transform);
|
|
}
|
|
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);
|
|
var
|
|
transform = module.get.transform.right()
|
|
;
|
|
module.set.stageSize();
|
|
module.stage.right();
|
|
module.animate(transform);
|
|
}
|
|
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(true) - $nextSide.outerHeight(true)) / 2),
|
|
z: -($activeSide.outerHeight(true) / 2)
|
|
}
|
|
;
|
|
return {
|
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
|
|
};
|
|
},
|
|
|
|
down: function() {
|
|
var
|
|
translate = {
|
|
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
|
z: -($activeSide.outerHeight(true) / 2)
|
|
}
|
|
;
|
|
return {
|
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
|
|
};
|
|
},
|
|
|
|
left: function() {
|
|
var
|
|
translate = {
|
|
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
|
|
z : -($activeSide.outerWidth(true) / 2)
|
|
}
|
|
;
|
|
return {
|
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
|
|
};
|
|
},
|
|
|
|
right: function() {
|
|
var
|
|
translate = {
|
|
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
|
|
z : -($activeSide.outerWidth(true) / 2)
|
|
}
|
|
;
|
|
return {
|
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
|
|
};
|
|
},
|
|
|
|
over: function() {
|
|
var
|
|
translate = {
|
|
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
|
|
}
|
|
;
|
|
return {
|
|
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
|
|
};
|
|
},
|
|
|
|
back: function() {
|
|
var
|
|
translate = {
|
|
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 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(true) - $nextSide.outerHeight(true)) / 2),
|
|
depth : {
|
|
active : ($nextSide.outerHeight(true) / 2),
|
|
next : ($activeSide.outerHeight(true) / 2)
|
|
}
|
|
}
|
|
;
|
|
module.verbose('Setting the initial animation position as above', $nextSide, box);
|
|
$sides
|
|
.css({
|
|
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$activeSide
|
|
.css({
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$nextSide
|
|
.addClass(className.animating)
|
|
.css({
|
|
'top' : box.origin + 'px',
|
|
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
|
|
})
|
|
;
|
|
},
|
|
|
|
below: function() {
|
|
var
|
|
box = {
|
|
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
|
depth : {
|
|
active : ($nextSide.outerHeight(true) / 2),
|
|
next : ($activeSide.outerHeight(true) / 2)
|
|
}
|
|
}
|
|
;
|
|
module.verbose('Setting the initial animation position as below', $nextSide, box);
|
|
$sides
|
|
.css({
|
|
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$activeSide
|
|
.css({
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$nextSide
|
|
.addClass(className.animating)
|
|
.css({
|
|
'top' : box.origin + 'px',
|
|
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
|
|
})
|
|
;
|
|
},
|
|
|
|
left: function() {
|
|
var
|
|
height = {
|
|
active : $activeSide.outerWidth(true),
|
|
next : $nextSide.outerWidth(true)
|
|
},
|
|
box = {
|
|
origin : ( ( height.active - height.next ) / 2),
|
|
depth : {
|
|
active : (height.next / 2),
|
|
next : (height.active / 2)
|
|
}
|
|
}
|
|
;
|
|
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
|
$sides
|
|
.css({
|
|
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$activeSide
|
|
.css({
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$nextSide
|
|
.addClass(className.animating)
|
|
.css({
|
|
'left' : box.origin + 'px',
|
|
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
|
|
})
|
|
;
|
|
},
|
|
|
|
right: function() {
|
|
var
|
|
height = {
|
|
active : $activeSide.outerWidth(true),
|
|
next : $nextSide.outerWidth(true)
|
|
},
|
|
box = {
|
|
origin : ( ( height.active - height.next ) / 2),
|
|
depth : {
|
|
active : (height.next / 2),
|
|
next : (height.active / 2)
|
|
}
|
|
}
|
|
;
|
|
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
|
$sides
|
|
.css({
|
|
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$activeSide
|
|
.css({
|
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
})
|
|
;
|
|
$nextSide
|
|
.addClass(className.animating)
|
|
.css({
|
|
'left' : box.origin + 'px',
|
|
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
|
|
})
|
|
;
|
|
},
|
|
|
|
behind: function() {
|
|
var
|
|
height = {
|
|
active : $activeSide.outerWidth(true),
|
|
next : $nextSide.outerWidth(true)
|
|
},
|
|
box = {
|
|
origin : ( ( height.active - height.next ) / 2),
|
|
depth : {
|
|
active : (height.next / 2),
|
|
next : (height.active / 2)
|
|
}
|
|
}
|
|
;
|
|
module.verbose('Setting the initial animation position as behind', $nextSide, box);
|
|
$activeSide
|
|
.css({
|
|
'transform' : 'rotateY(0deg)'
|
|
})
|
|
;
|
|
$nextSide
|
|
.addClass(className.animating)
|
|
.css({
|
|
'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) {
|
|
if($.isPlainObject(settings[name])) {
|
|
$.extend(true, settings[name], value);
|
|
}
|
|
else {
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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',
|
|
|
|
// hide all debug content
|
|
silent : false,
|
|
|
|
// debug content outputted to console
|
|
debug : false,
|
|
|
|
// verbose debug output
|
|
verbose : false,
|
|
|
|
// fudge factor in pixels when swapping from 2d to 3d (can be useful to correct rounding errors)
|
|
jitter : 0,
|
|
|
|
// performance data output
|
|
performance: true,
|
|
|
|
// event namespace
|
|
namespace : 'shape',
|
|
|
|
// width during animation, can be set to 'auto', initial', 'next' or pixel amount
|
|
width: 'initial',
|
|
|
|
// height during animation, can be set to 'auto', 'initial', 'next' or pixel amount
|
|
height: 'initial',
|
|
|
|
// callback occurs on side change
|
|
beforeChange : function() {},
|
|
onChange : function() {},
|
|
|
|
// allow animation to same side
|
|
allowRepeats: false,
|
|
|
|
// animation duration
|
|
duration : false,
|
|
|
|
// 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 2.2.10 - Sticky
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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),
|
|
$scroll = $(settings.scrollContext),
|
|
$container,
|
|
$context,
|
|
|
|
selector = $module.selector || '',
|
|
instance = $module.data(moduleNamespace),
|
|
|
|
requestAnimationFrame = window.requestAnimationFrame
|
|
|| window.mozRequestAnimationFrame
|
|
|| window.webkitRequestAnimationFrame
|
|
|| window.msRequestAnimationFrame
|
|
|| function(callback) { setTimeout(callback, 0); },
|
|
|
|
element = this,
|
|
|
|
documentObserver,
|
|
observer,
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
|
|
module.determineContainer();
|
|
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 instance');
|
|
module.reset();
|
|
if(documentObserver) {
|
|
documentObserver.disconnect();
|
|
}
|
|
if(observer) {
|
|
observer.disconnect();
|
|
}
|
|
$window
|
|
.off('load' + eventNamespace, module.event.load)
|
|
.off('resize' + eventNamespace, module.event.resize)
|
|
;
|
|
$scroll
|
|
.off('scrollchange' + eventNamespace, module.event.scrollchange)
|
|
;
|
|
$module.removeData(moduleNamespace);
|
|
},
|
|
|
|
observeChanges: function() {
|
|
if('MutationObserver' in window) {
|
|
documentObserver = new MutationObserver(module.event.documentChanged);
|
|
observer = new MutationObserver(module.event.changed);
|
|
documentObserver.observe(document, {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
observer.observe(element, {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
observer.observe($context[0], {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
module.debug('Setting up mutation observer', observer);
|
|
}
|
|
},
|
|
|
|
determineContainer: function() {
|
|
if(settings.container) {
|
|
$container = $(settings.container);
|
|
}
|
|
else {
|
|
$container = $module.offsetParent();
|
|
}
|
|
},
|
|
|
|
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('load' + eventNamespace, module.event.load)
|
|
.on('resize' + eventNamespace, module.event.resize)
|
|
;
|
|
// pub/sub pattern
|
|
$scroll
|
|
.off('scroll' + eventNamespace)
|
|
.on('scroll' + eventNamespace, module.event.scroll)
|
|
.on('scrollchange' + eventNamespace, module.event.scrollchange)
|
|
;
|
|
}
|
|
},
|
|
|
|
event: {
|
|
changed: function(mutations) {
|
|
clearTimeout(module.timer);
|
|
module.timer = setTimeout(function() {
|
|
module.verbose('DOM tree modified, updating sticky menu', mutations);
|
|
module.refresh();
|
|
}, 100);
|
|
},
|
|
documentChanged: function(mutations) {
|
|
[].forEach.call(mutations, function(mutation) {
|
|
if(mutation.removedNodes) {
|
|
[].forEach.call(mutation.removedNodes, function(node) {
|
|
if(node == element || $(node).find(element).length > 0) {
|
|
module.debug('Element removed from DOM, tearing down events');
|
|
module.destroy();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
load: function() {
|
|
module.verbose('Page contents finished loading');
|
|
requestAnimationFrame(module.refresh);
|
|
},
|
|
resize: function() {
|
|
module.verbose('Window resized');
|
|
requestAnimationFrame(module.refresh);
|
|
},
|
|
scroll: function() {
|
|
requestAnimationFrame(function() {
|
|
$scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
|
|
});
|
|
},
|
|
scrollchange: function(event, scrollPosition) {
|
|
module.stick(scrollPosition);
|
|
settings.onScroll.call(element);
|
|
}
|
|
},
|
|
|
|
refresh: function(hardRefresh) {
|
|
module.reset();
|
|
if(!settings.context) {
|
|
module.determineContext();
|
|
}
|
|
if(hardRefresh) {
|
|
module.determineContainer();
|
|
}
|
|
module.save.positions();
|
|
module.stick();
|
|
settings.onReposition.call(element);
|
|
},
|
|
|
|
supports: {
|
|
sticky: function() {
|
|
var
|
|
$element = $('<div/>'),
|
|
element = $element[0]
|
|
;
|
|
$element.addClass(className.supported);
|
|
return($element.css('position').match('sticky'));
|
|
}
|
|
},
|
|
|
|
save: {
|
|
lastScroll: function(scroll) {
|
|
module.lastScroll = scroll;
|
|
},
|
|
elementScroll: function(scroll) {
|
|
module.elementScroll = scroll;
|
|
},
|
|
positions: function() {
|
|
var
|
|
scrollContext = {
|
|
height : $scroll.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()
|
|
},
|
|
container = {
|
|
height: $container.outerHeight()
|
|
}
|
|
;
|
|
if( !module.is.standardScroll() ) {
|
|
module.debug('Non-standard scroll. Removing scroll offset from element offset');
|
|
|
|
scrollContext.top = $scroll.scrollTop();
|
|
scrollContext.left = $scroll.scrollLeft();
|
|
|
|
element.offset.top += scrollContext.top;
|
|
context.offset.top += scrollContext.top;
|
|
element.offset.left += scrollContext.left;
|
|
context.offset.left += scrollContext.left;
|
|
}
|
|
module.cache = {
|
|
fits : ( element.height < scrollContext.height ),
|
|
scrollContext : {
|
|
height : scrollContext.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,
|
|
bottom : context.offset.top + context.height
|
|
}
|
|
};
|
|
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() {
|
|
if(module.elementScroll) {
|
|
return module.elementScroll;
|
|
}
|
|
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,
|
|
scrollContext = module.cache.scrollContext,
|
|
delta = module.get.scrollChange(scroll),
|
|
maxScroll = (element.height - scrollContext.height + settings.offset),
|
|
elementScroll = module.get.currentElementScroll(),
|
|
possibleScroll = (elementScroll + delta)
|
|
;
|
|
if(module.cache.fits || possibleScroll < 0) {
|
|
elementScroll = 0;
|
|
}
|
|
else if(possibleScroll > maxScroll ) {
|
|
elementScroll = maxScroll;
|
|
}
|
|
else {
|
|
elementScroll = possibleScroll;
|
|
}
|
|
return elementScroll;
|
|
}
|
|
},
|
|
|
|
remove: {
|
|
lastScroll: function() {
|
|
delete module.lastScroll;
|
|
},
|
|
elementScroll: function(scroll) {
|
|
delete module.elementScroll;
|
|
},
|
|
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);
|
|
module.determineContainer();
|
|
}
|
|
else {
|
|
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
|
|
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
|
|
$container.css({
|
|
height: module.cache.context.height
|
|
});
|
|
}
|
|
}
|
|
},
|
|
minimumSize: function() {
|
|
var
|
|
element = module.cache.element
|
|
;
|
|
$container
|
|
.css('min-height', element.height)
|
|
;
|
|
},
|
|
scroll: function(scroll) {
|
|
module.debug('Setting scroll on element', scroll);
|
|
if(module.elementScroll == scroll) {
|
|
return;
|
|
}
|
|
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) {
|
|
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
|
|
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
|
|
}
|
|
}
|
|
},
|
|
|
|
is: {
|
|
standardScroll: function() {
|
|
return ($scroll[0] == window);
|
|
},
|
|
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(scroll) {
|
|
var
|
|
cachedPosition = scroll || $scroll.scrollTop(),
|
|
cache = module.cache,
|
|
fits = cache.fits,
|
|
element = cache.element,
|
|
scrollContext = cache.scrollContext,
|
|
context = cache.context,
|
|
offset = (module.is.bottom() && settings.pushing)
|
|
? settings.bottomOffset
|
|
: settings.offset,
|
|
scroll = {
|
|
top : cachedPosition + offset,
|
|
bottom : cachedPosition + offset + scrollContext.height
|
|
},
|
|
direction = module.get.direction(scroll.top),
|
|
elementScroll = (fits)
|
|
? 0
|
|
: module.get.elementScroll(scroll.top),
|
|
|
|
// shorthand
|
|
doesntFit = !fits,
|
|
elementVisible = (element.height !== 0)
|
|
;
|
|
|
|
if(elementVisible) {
|
|
|
|
if( module.is.initialPosition() ) {
|
|
if(scroll.top >= context.bottom) {
|
|
module.debug('Initial element position is bottom of container');
|
|
module.bindBottom();
|
|
}
|
|
else if(scroll.top > element.top) {
|
|
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
|
|
module.debug('Initial element position is bottom of container');
|
|
module.bindBottom();
|
|
}
|
|
else {
|
|
module.debug('Initial element position is fixed');
|
|
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);
|
|
module.save.lastScroll(scroll.top);
|
|
module.save.elementScroll(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);
|
|
module.save.lastScroll(scroll.top);
|
|
module.save.elementScroll(elementScroll);
|
|
}
|
|
|
|
}
|
|
}
|
|
else if( module.is.bottom() ) {
|
|
if( scroll.top <= element.top ) {
|
|
module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button');
|
|
module.setInitialPosition();
|
|
}
|
|
else {
|
|
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 : '',
|
|
top : '',
|
|
marginBottom : ''
|
|
})
|
|
.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 : '',
|
|
top : ''
|
|
})
|
|
.removeClass(className.fixed)
|
|
.removeClass(className.top)
|
|
.addClass(className.bound)
|
|
.addClass(className.bottom)
|
|
;
|
|
settings.onBottom.call(element);
|
|
settings.onUnstick.call(element);
|
|
},
|
|
|
|
setInitialPosition: function() {
|
|
module.debug('Returning to initial position');
|
|
module.unfix();
|
|
module.unbind();
|
|
},
|
|
|
|
|
|
fixTop: function() {
|
|
module.debug('Fixing element to top of page');
|
|
module.set.minimumSize();
|
|
module.set.offset();
|
|
$module
|
|
.css({
|
|
left : module.cache.element.left,
|
|
bottom : '',
|
|
marginBottom : ''
|
|
})
|
|
.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.minimumSize();
|
|
module.set.offset();
|
|
$module
|
|
.css({
|
|
left : module.cache.element.left,
|
|
bottom : '',
|
|
marginBottom : ''
|
|
})
|
|
.removeClass(className.bound)
|
|
.removeClass(className.top)
|
|
.addClass(className.fixed)
|
|
.addClass(className.bottom)
|
|
;
|
|
settings.onStick.call(element);
|
|
},
|
|
|
|
unbind: function() {
|
|
if( module.is.bound() ) {
|
|
module.debug('Removing container bound position on element');
|
|
module.remove.offset();
|
|
$module
|
|
.removeClass(className.bound)
|
|
.removeClass(className.top)
|
|
.removeClass(className.bottom)
|
|
;
|
|
}
|
|
},
|
|
|
|
unfix: function() {
|
|
if( module.is.fixed() ) {
|
|
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('Resetting elements position');
|
|
module.unbind();
|
|
module.unfix();
|
|
module.resetCSS();
|
|
module.remove.offset();
|
|
module.remove.lastScroll();
|
|
},
|
|
|
|
resetCSS: function() {
|
|
$module
|
|
.css({
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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',
|
|
|
|
silent : false,
|
|
debug : false,
|
|
verbose : true,
|
|
performance : true,
|
|
|
|
// whether to stick in the opposite direction on scroll up
|
|
pushing : false,
|
|
|
|
context : false,
|
|
container : false,
|
|
|
|
// Context to watch scroll events
|
|
scrollContext : window,
|
|
|
|
// Offset to adjust scroll
|
|
offset : 0,
|
|
|
|
// Offset to adjust scroll when attached to bottom of screen
|
|
bottomOffset : 0,
|
|
|
|
jitter : 5, // will only set container height if difference between context and container is larger than this number
|
|
|
|
// Whether to automatically observe changes with Mutation Observers
|
|
observeChanges : false,
|
|
|
|
// Called when position is recalculated
|
|
onReposition : function(){},
|
|
|
|
// Called on each scroll
|
|
onScroll : function(){},
|
|
|
|
// Called when element is stuck to viewport
|
|
onStick : function(){},
|
|
|
|
// Called when element is unstuck from viewport
|
|
onUnstick : function(){},
|
|
|
|
// Called when element reaches top of context
|
|
onTop : function(){},
|
|
|
|
// Called when element reaches bottom of context
|
|
onBottom : function(){},
|
|
|
|
error : {
|
|
container : 'Sticky element must be inside a relative container',
|
|
visible : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',
|
|
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 2.2.10 - API
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
var
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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,
|
|
requestStartTime,
|
|
|
|
// standard module
|
|
element = this,
|
|
context = $context[0],
|
|
instance = $module.data(moduleNamespace),
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
if(!methodInvoked) {
|
|
module.bind.events();
|
|
}
|
|
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)
|
|
;
|
|
},
|
|
|
|
bind: {
|
|
events: function() {
|
|
var
|
|
triggerEvent = module.get.event()
|
|
;
|
|
if( triggerEvent ) {
|
|
module.verbose('Attaching API events to element', triggerEvent);
|
|
$module
|
|
.on(triggerEvent + eventNamespace, module.event.trigger)
|
|
;
|
|
}
|
|
else if(settings.on == 'now') {
|
|
module.debug('Querying API endpoint immediately');
|
|
module.query();
|
|
}
|
|
}
|
|
},
|
|
|
|
decode: {
|
|
json: function(response) {
|
|
if(response !== undefined && typeof response == 'string') {
|
|
try {
|
|
response = JSON.parse(response);
|
|
}
|
|
catch(e) {
|
|
// isnt json string
|
|
}
|
|
}
|
|
return response;
|
|
}
|
|
},
|
|
|
|
read: {
|
|
cachedResponse: function(url) {
|
|
var
|
|
response
|
|
;
|
|
if(window.Storage === undefined) {
|
|
module.error(error.noStorage);
|
|
return;
|
|
}
|
|
response = sessionStorage.getItem(url);
|
|
module.debug('Using cached response', url, response);
|
|
response = module.decode.json(response);
|
|
return response;
|
|
}
|
|
},
|
|
write: {
|
|
cachedResponse: function(url, response) {
|
|
if(response && response === '') {
|
|
module.debug('Response empty, not caching', response);
|
|
return;
|
|
}
|
|
if(window.Storage === undefined) {
|
|
module.error(error.noStorage);
|
|
return;
|
|
}
|
|
if( $.isPlainObject(response) ) {
|
|
response = JSON.stringify(response);
|
|
}
|
|
sessionStorage.setItem(url, response);
|
|
module.verbose('Storing cached response for url', url, response);
|
|
}
|
|
},
|
|
|
|
query: function() {
|
|
|
|
if(module.is.disabled()) {
|
|
module.debug('Element is disabled API request aborted');
|
|
return;
|
|
}
|
|
|
|
if(module.is.loading()) {
|
|
if(settings.interruptRequests) {
|
|
module.debug('Interrupting previous request');
|
|
module.abort();
|
|
}
|
|
else {
|
|
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) {
|
|
settings.data = module.add.formData(settings.data);
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// get url
|
|
url = module.get.templatedURL();
|
|
|
|
if(!url && !module.is.mocked()) {
|
|
module.error(error.missingURL);
|
|
return;
|
|
}
|
|
|
|
// replace variables
|
|
url = module.add.urlData( url );
|
|
// missing url parameters
|
|
if( !url && !module.is.mocked()) {
|
|
return;
|
|
}
|
|
|
|
requestSettings.url = settings.base + url;
|
|
|
|
// 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.verbose('Using AJAX settings', ajaxSettings);
|
|
if(settings.cache === 'local' && module.read.cachedResponse(url)) {
|
|
module.debug('Response returned from local cache');
|
|
module.request = module.create.request();
|
|
module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);
|
|
return;
|
|
}
|
|
|
|
if( !settings.throttle ) {
|
|
module.debug('Sending request', data, ajaxSettings.method);
|
|
module.send.request();
|
|
}
|
|
else {
|
|
if(!settings.throttleFirstRequest && !module.timer) {
|
|
module.debug('Sending request', data, ajaxSettings.method);
|
|
module.send.request();
|
|
module.timer = setTimeout(function(){}, settings.throttle);
|
|
}
|
|
else {
|
|
module.debug('Throttling request', settings.throttle);
|
|
clearTimeout(module.timer);
|
|
module.timer = setTimeout(function() {
|
|
if(module.timer) {
|
|
delete module.timer;
|
|
}
|
|
module.debug('Sending throttled request', data, ajaxSettings.method);
|
|
module.send.request();
|
|
}, settings.throttle);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
should: {
|
|
removeError: function() {
|
|
return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );
|
|
}
|
|
},
|
|
|
|
is: {
|
|
disabled: function() {
|
|
return ($module.filter(selector.disabled).length > 0);
|
|
},
|
|
expectingJSON: function() {
|
|
return settings.dataType === 'json' || settings.dataType === 'jsonp';
|
|
},
|
|
form: function() {
|
|
return $module.is('form') || $context.is('form');
|
|
},
|
|
mocked: function() {
|
|
return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);
|
|
},
|
|
input: function() {
|
|
return $module.is('input');
|
|
},
|
|
loading: function() {
|
|
return (module.request)
|
|
? (module.request.state() == 'pending')
|
|
: false
|
|
;
|
|
},
|
|
abortedRequest: function(xhr) {
|
|
if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {
|
|
module.verbose('XHR request determined to be aborted');
|
|
return true;
|
|
}
|
|
else {
|
|
module.verbose('XHR request was not aborted');
|
|
return false;
|
|
}
|
|
},
|
|
validResponse: function(response) {
|
|
if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) {
|
|
module.verbose('Response is not JSON, skipping validation', settings.successTest, response);
|
|
return true;
|
|
}
|
|
module.debug('Checking JSON returned success', settings.successTest, response);
|
|
if( settings.successTest(response) ) {
|
|
module.debug('Response passed success test', response);
|
|
return true;
|
|
}
|
|
else {
|
|
module.debug('Response failed success test', response);
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
|
|
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);
|
|
value = (settings.encodeParameters)
|
|
? module.get.urlEncodedValue(value)
|
|
: 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;
|
|
},
|
|
formData: function(data) {
|
|
var
|
|
canSerialize = ($.fn.serializeObject !== undefined),
|
|
formData = (canSerialize)
|
|
? $form.serializeObject()
|
|
: $form.serialize(),
|
|
hasOtherData
|
|
;
|
|
data = data || settings.data;
|
|
hasOtherData = $.isPlainObject(data);
|
|
|
|
if(hasOtherData) {
|
|
if(canSerialize) {
|
|
module.debug('Extending existing data with form data', data, formData);
|
|
data = $.extend(true, {}, data, formData);
|
|
}
|
|
else {
|
|
module.error(error.missingSerialize);
|
|
module.debug('Cant extend data. Replacing data with form data', data, formData);
|
|
data = formData;
|
|
}
|
|
}
|
|
else {
|
|
module.debug('Adding form data', formData);
|
|
data = formData;
|
|
}
|
|
return data;
|
|
}
|
|
},
|
|
|
|
send: {
|
|
request: function() {
|
|
module.set.loading();
|
|
module.request = module.create.request();
|
|
if( module.is.mocked() ) {
|
|
module.mockedXHR = module.create.mockedXHR();
|
|
}
|
|
else {
|
|
module.xhr = module.create.xhr();
|
|
}
|
|
settings.onRequest.call(context, module.request, module.xhr);
|
|
}
|
|
},
|
|
|
|
event: {
|
|
trigger: function(event) {
|
|
module.query();
|
|
if(event.type == 'submit' || event.type == 'click') {
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
xhr: {
|
|
always: function() {
|
|
// nothing special
|
|
},
|
|
done: function(response, textStatus, xhr) {
|
|
var
|
|
context = this,
|
|
elapsedTime = (new Date().getTime() - requestStartTime),
|
|
timeLeft = (settings.loadingDuration - elapsedTime),
|
|
translatedResponse = ( $.isFunction(settings.onResponse) )
|
|
? module.is.expectingJSON()
|
|
? settings.onResponse.call(context, $.extend(true, {}, response))
|
|
: settings.onResponse.call(context, response)
|
|
: false
|
|
;
|
|
timeLeft = (timeLeft > 0)
|
|
? timeLeft
|
|
: 0
|
|
;
|
|
if(translatedResponse) {
|
|
module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);
|
|
response = translatedResponse;
|
|
}
|
|
if(timeLeft > 0) {
|
|
module.debug('Response completed early delaying state change by', timeLeft);
|
|
}
|
|
setTimeout(function() {
|
|
if( module.is.validResponse(response) ) {
|
|
module.request.resolveWith(context, [response, xhr]);
|
|
}
|
|
else {
|
|
module.request.rejectWith(context, [xhr, 'invalid']);
|
|
}
|
|
}, timeLeft);
|
|
},
|
|
fail: function(xhr, status, httpMessage) {
|
|
var
|
|
context = this,
|
|
elapsedTime = (new Date().getTime() - requestStartTime),
|
|
timeLeft = (settings.loadingDuration - elapsedTime)
|
|
;
|
|
timeLeft = (timeLeft > 0)
|
|
? timeLeft
|
|
: 0
|
|
;
|
|
if(timeLeft > 0) {
|
|
module.debug('Response completed early delaying state change by', timeLeft);
|
|
}
|
|
setTimeout(function() {
|
|
if( module.is.abortedRequest(xhr) ) {
|
|
module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);
|
|
}
|
|
else {
|
|
module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);
|
|
}
|
|
}, timeLeft);
|
|
}
|
|
},
|
|
request: {
|
|
done: function(response, xhr) {
|
|
module.debug('Successful API Response', response);
|
|
if(settings.cache === 'local' && url) {
|
|
module.write.cachedResponse(url, response);
|
|
module.debug('Saving server response locally', module.cache);
|
|
}
|
|
settings.onSuccess.call(context, response, $module, xhr);
|
|
},
|
|
complete: function(firstParameter, secondParameter) {
|
|
var
|
|
xhr,
|
|
response
|
|
;
|
|
// have to guess callback parameters based on request success
|
|
if( module.was.succesful() ) {
|
|
response = firstParameter;
|
|
xhr = secondParameter;
|
|
}
|
|
else {
|
|
xhr = firstParameter;
|
|
response = module.get.responseFromXHR(xhr);
|
|
}
|
|
module.remove.loading();
|
|
settings.onComplete.call(context, response, $module, xhr);
|
|
},
|
|
fail: function(xhr, status, httpMessage) {
|
|
var
|
|
// pull response from xhr if available
|
|
response = module.get.responseFromXHR(xhr),
|
|
errorMessage = module.get.errorFromRequest(response, status, httpMessage)
|
|
;
|
|
if(status == 'aborted') {
|
|
module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);
|
|
settings.onAbort.call(context, status, $module, xhr);
|
|
return true;
|
|
}
|
|
else if(status == 'invalid') {
|
|
module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);
|
|
}
|
|
else if(status == 'error') {
|
|
if(xhr !== undefined) {
|
|
module.debug('XHR produced a server error', status, httpMessage);
|
|
// make sure we have an error to display to console
|
|
if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {
|
|
module.error(error.statusMessage + httpMessage, ajaxSettings.url);
|
|
}
|
|
settings.onError.call(context, errorMessage, $module, xhr);
|
|
}
|
|
}
|
|
|
|
if(settings.errorDuration && status !== 'aborted') {
|
|
module.debug('Adding error state');
|
|
module.set.error();
|
|
if( module.should.removeError() ) {
|
|
setTimeout(module.remove.error, settings.errorDuration);
|
|
}
|
|
}
|
|
module.debug('API Request failed', errorMessage, xhr);
|
|
settings.onFailure.call(context, response, $module, xhr);
|
|
}
|
|
}
|
|
},
|
|
|
|
create: {
|
|
|
|
request: function() {
|
|
// api request promise
|
|
return $.Deferred()
|
|
.always(module.event.request.complete)
|
|
.done(module.event.request.done)
|
|
.fail(module.event.request.fail)
|
|
;
|
|
},
|
|
|
|
mockedXHR: function () {
|
|
var
|
|
// xhr does not simulate these properties of xhr but must return them
|
|
textStatus = false,
|
|
status = false,
|
|
httpMessage = false,
|
|
responder = settings.mockResponse || settings.response,
|
|
asyncResponder = settings.mockResponseAsync || settings.responseAsync,
|
|
asyncCallback,
|
|
response,
|
|
mockedXHR
|
|
;
|
|
|
|
mockedXHR = $.Deferred()
|
|
.always(module.event.xhr.complete)
|
|
.done(module.event.xhr.done)
|
|
.fail(module.event.xhr.fail)
|
|
;
|
|
|
|
if(responder) {
|
|
if( $.isFunction(responder) ) {
|
|
module.debug('Using specified synchronous callback', responder);
|
|
response = responder.call(context, requestSettings);
|
|
}
|
|
else {
|
|
module.debug('Using settings specified response', responder);
|
|
response = responder;
|
|
}
|
|
// simulating response
|
|
mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
|
|
}
|
|
else if( $.isFunction(asyncResponder) ) {
|
|
asyncCallback = function(response) {
|
|
module.debug('Async callback returned response', response);
|
|
|
|
if(response) {
|
|
mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
|
|
}
|
|
else {
|
|
mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);
|
|
}
|
|
};
|
|
module.debug('Using specified async response callback', asyncResponder);
|
|
asyncResponder.call(context, requestSettings, asyncCallback);
|
|
}
|
|
return mockedXHR;
|
|
},
|
|
|
|
xhr: function() {
|
|
var
|
|
xhr
|
|
;
|
|
// ajax request promise
|
|
xhr = $.ajax(ajaxSettings)
|
|
.always(module.event.xhr.always)
|
|
.done(module.event.xhr.done)
|
|
.fail(module.event.xhr.fail)
|
|
;
|
|
module.verbose('Created server request', xhr, ajaxSettings);
|
|
return xhr;
|
|
}
|
|
},
|
|
|
|
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);
|
|
requestStartTime = new Date().getTime();
|
|
}
|
|
},
|
|
|
|
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: {
|
|
responseFromXHR: function(xhr) {
|
|
return $.isPlainObject(xhr)
|
|
? (module.is.expectingJSON())
|
|
? module.decode.json(xhr.responseText)
|
|
: xhr.responseText
|
|
: false
|
|
;
|
|
},
|
|
errorFromRequest: function(response, status, httpMessage) {
|
|
return ($.isPlainObject(response) && response.error !== undefined)
|
|
? response.error // use json error message
|
|
: (settings.error[status] !== undefined) // use server error message
|
|
? settings.error[status]
|
|
: httpMessage
|
|
;
|
|
},
|
|
request: function() {
|
|
return module.request || false;
|
|
},
|
|
xhr: function() {
|
|
return module.xhr || false;
|
|
},
|
|
settings: function() {
|
|
var
|
|
runSettings
|
|
;
|
|
runSettings = settings.beforeSend.call(context, 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);
|
|
}
|
|
if(runSettings === false) {
|
|
return runSettings;
|
|
}
|
|
return (runSettings !== undefined)
|
|
? $.extend(true, {}, runSettings)
|
|
: $.extend(true, {}, settings)
|
|
;
|
|
},
|
|
urlEncodedValue: function(value) {
|
|
var
|
|
decodedValue = window.decodeURIComponent(value),
|
|
encodedValue = window.encodeURIComponent(value),
|
|
alreadyEncoded = (decodedValue !== value)
|
|
;
|
|
if(alreadyEncoded) {
|
|
module.debug('URL value is already encoded, avoiding double encoding', value);
|
|
return value;
|
|
}
|
|
module.verbose('Encoding value using encodeURIComponent', value, encodedValue);
|
|
return encodedValue;
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
templatedURL: function(action) {
|
|
action = action || $module.data(metadata.action) || settings.action || false;
|
|
url = $module.data(metadata.url) || settings.url || false;
|
|
if(url) {
|
|
module.debug('Using specified url', url);
|
|
return url;
|
|
}
|
|
if(action) {
|
|
module.debug('Looking up url for action', action, settings.api);
|
|
if(settings.api[action] === undefined && !module.is.mocked()) {
|
|
module.error(error.missingAction, settings.action, settings.api);
|
|
return;
|
|
}
|
|
url = settings.api[action];
|
|
}
|
|
else if( module.is.form() ) {
|
|
url = $module.attr('action') || $context.attr('action') || false;
|
|
module.debug('No url or action specified, defaulting to form action', url);
|
|
}
|
|
return url;
|
|
}
|
|
},
|
|
|
|
abort: function() {
|
|
var
|
|
xhr = module.get.xhr()
|
|
;
|
|
if( xhr && xhr.state() !== 'resolved') {
|
|
module.debug('Cancelling API request');
|
|
xhr.abort();
|
|
}
|
|
},
|
|
|
|
// 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) {
|
|
if($.isPlainObject(settings[name])) {
|
|
$.extend(true, settings[name], value);
|
|
}
|
|
else {
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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 : false,
|
|
verbose : false,
|
|
performance : true,
|
|
|
|
// object containing all templates endpoints
|
|
api : {},
|
|
|
|
// whether to cache responses
|
|
cache : true,
|
|
|
|
// whether new requests should abort previous requests
|
|
interruptRequests : true,
|
|
|
|
// event binding
|
|
on : 'auto',
|
|
|
|
// context for applying state classes
|
|
stateContext : false,
|
|
|
|
// duration for loading state
|
|
loadingDuration : 0,
|
|
|
|
// whether to hide errors after a period of time
|
|
hideError : 'auto',
|
|
|
|
// duration for error state
|
|
errorDuration : 2000,
|
|
|
|
// whether parameters should be encoded with encodeURIComponent
|
|
encodeParameters : true,
|
|
|
|
// API action to use
|
|
action : false,
|
|
|
|
// templated URL to use
|
|
url : false,
|
|
|
|
// base URL to apply to all endpoints
|
|
base : '',
|
|
|
|
// data that will
|
|
urlData : {},
|
|
|
|
// whether to add default data to url data
|
|
defaultData : true,
|
|
|
|
// whether to serialize closest form
|
|
serializeForm : false,
|
|
|
|
// how long to wait before request should occur
|
|
throttle : 0,
|
|
|
|
// whether to throttle first request or only repeated
|
|
throttleFirstRequest : true,
|
|
|
|
// standard ajax settings
|
|
method : 'get',
|
|
data : {},
|
|
dataType : 'json',
|
|
|
|
// mock response
|
|
mockResponse : false,
|
|
mockResponseAsync : false,
|
|
|
|
// aliases for mock
|
|
response : false,
|
|
responseAsync : false,
|
|
|
|
// callbacks before request
|
|
beforeSend : function(settings) { return settings; },
|
|
beforeXHR : function(xhr) {},
|
|
onRequest : function(promise, xhr) {},
|
|
|
|
// after request
|
|
onResponse : false, // function(response) { },
|
|
|
|
// response was successful, if JSON passed validation
|
|
onSuccess : function(response, $module) {},
|
|
|
|
// request finished without aborting
|
|
onComplete : function(response, $module) {},
|
|
|
|
// failed JSON success test
|
|
onFailure : function(response, $module) {},
|
|
|
|
// server error
|
|
onError : function(errorMessage, $module) {},
|
|
|
|
// request aborted
|
|
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 : 'jquery-serialize-object is required to add form data to an existing data object',
|
|
missingURL : 'No URL specified for api event',
|
|
noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
|
|
noStorage : 'Caching responses locally requires session storage',
|
|
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: {
|
|
disabled : '.disabled',
|
|
form : 'form'
|
|
},
|
|
|
|
metadata: {
|
|
action : 'action',
|
|
url : 'url'
|
|
}
|
|
};
|
|
|
|
|
|
|
|
})( jQuery, window, document );
|
|
|
|
/*!
|
|
* # Semantic UI 2.2.10 - State
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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) {
|
|
if($.isPlainObject(settings[name])) {
|
|
$.extend(true, settings[name], value);
|
|
}
|
|
else {
|
|
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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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 : false,
|
|
|
|
// 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 2.2.10 - Visibility
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
window = (typeof window != 'undefined' && window.Math == Math)
|
|
? window
|
|
: (typeof self != 'undefined' && self.Math == Math)
|
|
? self
|
|
: Function('return this')()
|
|
;
|
|
|
|
$.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,
|
|
|
|
moduleCount = $allModules.length,
|
|
loadedCount = 0
|
|
;
|
|
|
|
$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,
|
|
metadata = settings.metadata,
|
|
|
|
eventNamespace = '.' + namespace,
|
|
moduleNamespace = 'module-' + namespace,
|
|
|
|
$window = $(window),
|
|
|
|
$module = $(this),
|
|
$context = $(settings.context),
|
|
|
|
$placeholder,
|
|
|
|
selector = $module.selector || '',
|
|
instance = $module.data(moduleNamespace),
|
|
|
|
requestAnimationFrame = window.requestAnimationFrame
|
|
|| window.mozRequestAnimationFrame
|
|
|| window.webkitRequestAnimationFrame
|
|
|| window.msRequestAnimationFrame
|
|
|| function(callback) { setTimeout(callback, 0); },
|
|
|
|
element = this,
|
|
disabled = false,
|
|
|
|
contextObserver,
|
|
observer,
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
module.debug('Initializing', settings);
|
|
|
|
module.setup.cache();
|
|
|
|
if( module.should.trackChanges() ) {
|
|
|
|
if(settings.type == 'image') {
|
|
module.setup.image();
|
|
}
|
|
if(settings.type == 'fixed') {
|
|
module.setup.fixed();
|
|
}
|
|
|
|
if(settings.observeChanges) {
|
|
module.observeChanges();
|
|
}
|
|
module.bind.events();
|
|
}
|
|
|
|
module.save.position();
|
|
if( !module.is.visible() ) {
|
|
module.error(error.visible, $module);
|
|
}
|
|
|
|
if(settings.initialCheck) {
|
|
module.checkVisibility();
|
|
}
|
|
module.instantiate();
|
|
},
|
|
|
|
instantiate: function() {
|
|
module.debug('Storing instance', module);
|
|
$module
|
|
.data(moduleNamespace, module)
|
|
;
|
|
instance = module;
|
|
},
|
|
|
|
destroy: function() {
|
|
module.verbose('Destroying previous module');
|
|
if(observer) {
|
|
observer.disconnect();
|
|
}
|
|
if(contextObserver) {
|
|
contextObserver.disconnect();
|
|
}
|
|
$window
|
|
.off('load' + eventNamespace, module.event.load)
|
|
.off('resize' + eventNamespace, module.event.resize)
|
|
;
|
|
$context
|
|
.off('scroll' + eventNamespace, module.event.scroll)
|
|
.off('scrollchange' + eventNamespace, module.event.scrollchange)
|
|
;
|
|
if(settings.type == 'fixed') {
|
|
module.resetFixed();
|
|
module.remove.placeholder();
|
|
}
|
|
$module
|
|
.off(eventNamespace)
|
|
.removeData(moduleNamespace)
|
|
;
|
|
},
|
|
|
|
observeChanges: function() {
|
|
if('MutationObserver' in window) {
|
|
contextObserver = new MutationObserver(module.event.contextChanged);
|
|
observer = new MutationObserver(module.event.changed);
|
|
contextObserver.observe(document, {
|
|
childList : true,
|
|
subtree : true
|
|
});
|
|
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');
|
|
if(settings.refreshOnLoad) {
|
|
$window
|
|
.on('load' + eventNamespace, module.event.load)
|
|
;
|
|
}
|
|
$window
|
|
.on('resize' + eventNamespace, module.event.resize)
|
|
;
|
|
// pub/sub pattern
|
|
$context
|
|
.off('scroll' + eventNamespace)
|
|
.on('scroll' + eventNamespace, module.event.scroll)
|
|
.on('scrollchange' + eventNamespace, module.event.scrollchange)
|
|
;
|
|
}
|
|
},
|
|
|
|
event: {
|
|
changed: function(mutations) {
|
|
module.verbose('DOM tree modified, updating visibility calculations');
|
|
module.timer = setTimeout(function() {
|
|
module.verbose('DOM tree modified, updating sticky menu');
|
|
module.refresh();
|
|
}, 100);
|
|
},
|
|
contextChanged: function(mutations) {
|
|
[].forEach.call(mutations, function(mutation) {
|
|
if(mutation.removedNodes) {
|
|
[].forEach.call(mutation.removedNodes, function(node) {
|
|
if(node == element || $(node).find(element).length > 0) {
|
|
module.debug('Element removed from DOM, tearing down events');
|
|
module.destroy();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
resize: function() {
|
|
module.debug('Window resized');
|
|
if(settings.refreshOnResize) {
|
|
requestAnimationFrame(module.refresh);
|
|
}
|
|
},
|
|
load: function() {
|
|
module.debug('Page finished loading');
|
|
requestAnimationFrame(module.refresh);
|
|
},
|
|
// publishes scrollchange event on one scroll
|
|
scroll: function() {
|
|
if(settings.throttle) {
|
|
clearTimeout(module.timer);
|
|
module.timer = setTimeout(function() {
|
|
$context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
|
|
}, settings.throttle);
|
|
}
|
|
else {
|
|
requestAnimationFrame(function() {
|
|
$context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
|
|
});
|
|
}
|
|
},
|
|
// subscribes to scrollchange
|
|
scrollchange: function(event, scrollPosition) {
|
|
module.checkVisibility(scrollPosition);
|
|
},
|
|
},
|
|
|
|
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);
|
|
}
|
|
},
|
|
|
|
enableCallbacks: function() {
|
|
module.debug('Allowing callbacks to occur');
|
|
disabled = false;
|
|
},
|
|
|
|
disableCallbacks: function() {
|
|
module.debug('Disabling all callbacks temporarily');
|
|
disabled = true;
|
|
},
|
|
|
|
should: {
|
|
trackChanges: function() {
|
|
if(methodInvoked) {
|
|
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(metadata.src)
|
|
;
|
|
if(src) {
|
|
module.verbose('Lazy loading image', src);
|
|
settings.once = true;
|
|
settings.observeChanges = false;
|
|
|
|
// show when top visible
|
|
settings.onOnScreen = function() {
|
|
module.debug('Image on screen', element);
|
|
module.precache(src, function() {
|
|
module.set.image(src, function() {
|
|
loadedCount++;
|
|
if(loadedCount == moduleCount) {
|
|
settings.onAllLoaded.call(this);
|
|
}
|
|
settings.onLoad.call(this);
|
|
});
|
|
});
|
|
};
|
|
}
|
|
},
|
|
fixed: function() {
|
|
module.debug('Setting up fixed');
|
|
settings.once = false;
|
|
settings.observeChanges = false;
|
|
settings.initialCheck = true;
|
|
settings.refreshOnLoad = true;
|
|
if(!parameters.transition) {
|
|
settings.transition = false;
|
|
}
|
|
module.create.placeholder();
|
|
module.debug('Added placeholder', $placeholder);
|
|
settings.onTopPassed = function() {
|
|
module.debug('Element passed, adding fixed position', $module);
|
|
module.show.placeholder();
|
|
module.set.fixed();
|
|
if(settings.transition) {
|
|
if($.fn.transition !== undefined) {
|
|
$module.transition(settings.transition, settings.duration);
|
|
}
|
|
}
|
|
};
|
|
settings.onTopPassedReverse = function() {
|
|
module.debug('Element returned to position, removing fixed', $module);
|
|
module.hide.placeholder();
|
|
module.remove.fixed();
|
|
};
|
|
}
|
|
},
|
|
|
|
create: {
|
|
placeholder: function() {
|
|
module.verbose('Creating fixed position placeholder');
|
|
$placeholder = $module
|
|
.clone(false)
|
|
.css('display', 'none')
|
|
.addClass(className.placeholder)
|
|
.insertAfter($module)
|
|
;
|
|
}
|
|
},
|
|
|
|
show: {
|
|
placeholder: function() {
|
|
module.verbose('Showing placeholder');
|
|
$placeholder
|
|
.css('display', 'block')
|
|
.css('visibility', 'hidden')
|
|
;
|
|
}
|
|
},
|
|
hide: {
|
|
placeholder: function() {
|
|
module.verbose('Hiding placeholder');
|
|
$placeholder
|
|
.css('display', 'none')
|
|
.css('visibility', '')
|
|
;
|
|
}
|
|
},
|
|
|
|
set: {
|
|
fixed: function() {
|
|
module.verbose('Setting element to fixed position');
|
|
$module
|
|
.addClass(className.fixed)
|
|
.css({
|
|
position : 'fixed',
|
|
top : settings.offset + 'px',
|
|
left : 'auto',
|
|
zIndex : settings.zIndex
|
|
})
|
|
;
|
|
settings.onFixed.call(element);
|
|
},
|
|
image: function(src, callback) {
|
|
$module
|
|
.attr('src', src)
|
|
;
|
|
if(settings.transition) {
|
|
if( $.fn.transition !== undefined) {
|
|
if($module.hasClass(className.visible)) {
|
|
module.debug('Transition already occurred on this image, skipping animation');
|
|
return;
|
|
}
|
|
$module.transition(settings.transition, settings.duration, callback);
|
|
}
|
|
else {
|
|
$module.fadeIn(settings.duration, callback);
|
|
}
|
|
}
|
|
else {
|
|
$module.show();
|
|
}
|
|
}
|
|
},
|
|
|
|
is: {
|
|
onScreen: function() {
|
|
var
|
|
calculations = module.get.elementCalculations()
|
|
;
|
|
return calculations.onScreen;
|
|
},
|
|
offScreen: function() {
|
|
var
|
|
calculations = module.get.elementCalculations()
|
|
;
|
|
return calculations.offScreen;
|
|
},
|
|
visible: function() {
|
|
if(module.cache && module.cache.element) {
|
|
return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);
|
|
}
|
|
return false;
|
|
},
|
|
verticallyScrollableContext: function() {
|
|
var
|
|
overflowY = ($context.get(0) !== window)
|
|
? $context.css('overflow-y')
|
|
: false
|
|
;
|
|
return (overflowY == 'auto' || overflowY == 'scroll');
|
|
},
|
|
horizontallyScrollableContext: function() {
|
|
var
|
|
overflowX = ($context.get(0) !== window)
|
|
? $context.css('overflow-x')
|
|
: false
|
|
;
|
|
return (overflowX == 'auto' || overflowX == 'scroll');
|
|
}
|
|
},
|
|
|
|
refresh: function() {
|
|
module.debug('Refreshing constants (width/height)');
|
|
if(settings.type == 'fixed') {
|
|
module.resetFixed();
|
|
}
|
|
module.reset();
|
|
module.save.position();
|
|
if(settings.checkOnRefresh) {
|
|
module.checkVisibility();
|
|
}
|
|
settings.onRefresh.call(element);
|
|
},
|
|
|
|
resetFixed: function () {
|
|
module.remove.fixed();
|
|
module.remove.occurred();
|
|
},
|
|
|
|
reset: function() {
|
|
module.verbose('Resetting all cached values');
|
|
if( $.isPlainObject(module.cache) ) {
|
|
module.cache.screen = {};
|
|
module.cache.element = {};
|
|
}
|
|
},
|
|
|
|
checkVisibility: function(scroll) {
|
|
module.verbose('Checking visibility of element', module.cache.element);
|
|
|
|
if( !disabled && module.is.visible() ) {
|
|
|
|
// save scroll position
|
|
module.save.scroll(scroll);
|
|
|
|
// 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.onScreen();
|
|
module.offScreen();
|
|
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 && newCallback) {
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
onScreen: function(newCallback) {
|
|
var
|
|
calculations = module.get.elementCalculations(),
|
|
callback = newCallback || settings.onOnScreen,
|
|
callbackName = 'onScreen'
|
|
;
|
|
if(newCallback) {
|
|
module.debug('Adding callback for onScreen', newCallback);
|
|
settings.onOnScreen = newCallback;
|
|
}
|
|
if(calculations.onScreen) {
|
|
module.execute(callback, callbackName);
|
|
}
|
|
else if(!settings.once) {
|
|
module.remove.occurred(callbackName);
|
|
}
|
|
if(newCallback !== undefined) {
|
|
return calculations.onOnScreen;
|
|
}
|
|
},
|
|
|
|
offScreen: function(newCallback) {
|
|
var
|
|
calculations = module.get.elementCalculations(),
|
|
callback = newCallback || settings.onOffScreen,
|
|
callbackName = 'offScreen'
|
|
;
|
|
if(newCallback) {
|
|
module.debug('Adding callback for offScreen', newCallback);
|
|
settings.onOffScreen = newCallback;
|
|
}
|
|
if(calculations.offScreen) {
|
|
module.execute(callback, callbackName);
|
|
}
|
|
else if(!settings.once) {
|
|
module.remove.occurred(callbackName);
|
|
}
|
|
if(newCallback !== undefined) {
|
|
return calculations.onOffScreen;
|
|
}
|
|
},
|
|
|
|
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: {
|
|
fixed: function() {
|
|
module.debug('Removing fixed position');
|
|
$module
|
|
.removeClass(className.fixed)
|
|
.css({
|
|
position : '',
|
|
top : '',
|
|
left : '',
|
|
zIndex : ''
|
|
})
|
|
;
|
|
settings.onUnfixed.call(element);
|
|
},
|
|
placeholder: function() {
|
|
module.debug('Removing placeholder content');
|
|
if($placeholder) {
|
|
$placeholder.remove();
|
|
}
|
|
},
|
|
occurred: function(callback) {
|
|
if(callback) {
|
|
var
|
|
occurred = module.cache.occurred
|
|
;
|
|
if(occurred[callback] !== undefined && 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.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(scrollPosition) {
|
|
scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;
|
|
module.cache.scroll = scrollPosition;
|
|
},
|
|
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();
|
|
// compensate for scroll in context
|
|
if(module.is.verticallyScrollableContext()) {
|
|
element.offset.top += $context.scrollTop() - $context.offset().top;
|
|
}
|
|
if(module.is.horizontallyScrollableContext()) {
|
|
element.offset.left += $context.scrollLeft - $context.offset().left;
|
|
}
|
|
// 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.topPassed = (screen.top >= element.top);
|
|
element.bottomPassed = (screen.top >= element.bottom);
|
|
element.topVisible = (screen.bottom >= element.top) && !element.bottomPassed;
|
|
element.bottomVisible = (screen.bottom >= element.bottom) && !element.topPassed;
|
|
element.pixelsPassed = 0;
|
|
element.percentagePassed = 0;
|
|
|
|
// meta calculations
|
|
element.onScreen = (element.topVisible && !element.bottomPassed);
|
|
element.passing = (element.topPassed && !element.bottomPassed);
|
|
element.offScreen = (!element.onScreen);
|
|
|
|
// 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.silent && 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.silent && 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() {
|
|
if(!settings.silent) {
|
|
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, 500);
|
|
},
|
|
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();
|
|
}
|
|
instance.save.scroll();
|
|
instance.save.calculations();
|
|
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,
|
|
|
|
// check position immediately on init
|
|
initialCheck : true,
|
|
|
|
// whether to refresh calculations after all page images load
|
|
refreshOnLoad : true,
|
|
|
|
// whether to refresh calculations after page resize event
|
|
refreshOnResize : true,
|
|
|
|
// should call callbacks on refresh event (resize, etc)
|
|
checkOnRefresh : 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,
|
|
|
|
// visibility check delay in ms (defaults to animationFrame)
|
|
throttle : false,
|
|
|
|
// special visibility type (image, fixed)
|
|
type : false,
|
|
|
|
// z-index to use with visibility 'fixed'
|
|
zIndex : '10',
|
|
|
|
// image only animation settings
|
|
transition : 'fade in',
|
|
duration : 1000,
|
|
|
|
// array of callbacks for percentage
|
|
onPassed : {},
|
|
|
|
// standard callbacks
|
|
onOnScreen : false,
|
|
onOffScreen : false,
|
|
onPassing : false,
|
|
onTopVisible : false,
|
|
onBottomVisible : false,
|
|
onTopPassed : false,
|
|
onBottomPassed : false,
|
|
|
|
// reverse callbacks
|
|
onPassingReverse : false,
|
|
onTopVisibleReverse : false,
|
|
onBottomVisibleReverse : false,
|
|
onTopPassedReverse : false,
|
|
onBottomPassedReverse : false,
|
|
|
|
// special callbacks for image
|
|
onLoad : function() {},
|
|
onAllLoaded : function() {},
|
|
|
|
// special callbacks for fixed position
|
|
onFixed : function() {},
|
|
onUnfixed : function() {},
|
|
|
|
// utility callbacks
|
|
onUpdate : false, // disabled by default for performance
|
|
onRefresh : function(){},
|
|
|
|
metadata : {
|
|
src: 'src'
|
|
},
|
|
|
|
className: {
|
|
fixed : 'fixed',
|
|
placeholder : 'placeholder',
|
|
visible : 'visible'
|
|
},
|
|
|
|
error : {
|
|
method : 'The method you called is not defined.',
|
|
visible : 'Element is hidden, you must call refresh after element becomes visible'
|
|
}
|
|
|
|
};
|
|
|
|
})( jQuery, window, document );
|