diff options
Diffstat (limited to 'src/js/semantic.js')
| -rw-r--r-- | src/js/semantic.js | 14128 |
1 files changed, 10069 insertions, 4059 deletions
diff --git a/src/js/semantic.js b/src/js/semantic.js index c0ea5b7..378108c 100644 --- a/src/js/semantic.js +++ b/src/js/semantic.js @@ -1,5 +1,5 @@ /* - * # Semantic UI + * # Semantic UI - 2.1.6 * https://github.com/Semantic-Org/Semantic-UI * http://www.semantic-ui.com/ * @@ -8,12 +8,12 @@ * http://opensource.org/licenses/MIT * */ -/* - * # Semantic - Site +/*! + * # Semantic UI 2.1.6 - Site * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -91,7 +91,7 @@ $.site = $.fn.site = function(parameters) { requestAnimationFrame: function() { module.debug('Normalizing requestAnimationFrame'); if(window.requestAnimationFrame === undefined) { - module.debug('RequestAnimationFrame not available, normailizing event'); + module.debug('RequestAnimationFrame not available, normalizing event'); window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame @@ -160,7 +160,7 @@ $.site = $.fn.site = function(parameters) { $.fn[name].settings[setting] = value; if(modifyExisting && namespace) { $existingModules = $(':data(module-' + namespace + ')'); - if($existingModules.size() > 0) { + if($existingModules.length > 0) { module.verbose('Modifying existing settings', $existingModules); $existingModules[name]('setting', setting, value); } @@ -186,7 +186,7 @@ $.site = $.fn.site = function(parameters) { $.extend(true, $.fn[name].settings, newSettings); if(modifyExisting && namespace) { $existingModules = $(':data(module-' + namespace + ')'); - if($existingModules.size() > 0) { + if($existingModules.length > 0) { module.verbose('Modifying existing settings', $existingModules); $existingModules[name]('setting', newSettings); } @@ -330,7 +330,7 @@ $.site = $.fn.site = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -443,7 +443,7 @@ $.site.settings = { }, debug : false, - verbose : true, + verbose : false, performance : true, modules: [ @@ -452,6 +452,7 @@ $.site.settings = { 'checkbox', 'dimmer', 'dropdown', + 'embed', 'form', 'modal', 'nag', @@ -463,7 +464,6 @@ $.site.settings = { 'sticky', 'tab', 'transition', - 'video', 'visit', 'visibility' ], @@ -494,13 +494,14 @@ $.extend($.expr[ ":" ], { }); -})( jQuery, window , document ); -/* - * # Semantic - Form Validation +})( jQuery, window, document ); + +/*! + * # Semantic UI 2.1.6 - Form Validation * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -508,55 +509,74 @@ $.extend($.expr[ ":" ], { ;(function ( $, window, document, undefined ) { -$.fn.form = function(fields, parameters) { - var - $allModules = $(this), - - settings = $.extend(true, {}, $.fn.form.settings, parameters), - validation = $.extend({}, $.fn.form.settings.defaults, fields), - - namespace = settings.namespace, - metadata = settings.metadata, - selector = settings.selector, - className = settings.className, - error = settings.error, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, +"use strict"; - moduleSelector = $allModules.selector || '', +$.fn.form = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', - time = new Date().getTime(), - performance = [], + time = new Date().getTime(), + performance = [], - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + query = arguments[0], + legacyParameters = arguments[1], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), returnedValue ; $allModules .each(function() { var - $module = $(this), - $field = $(this).find(selector.field), - $group = $(this).find(selector.group), - $message = $(this).find(selector.message), - $prompt = $(this).find(selector.prompt), - $submit = $(this).find(selector.submit), + $module = $(this), + element = this, - formErrors = [], + formErrors = [], + keyHeldDown = false, - element = this, - instance = $module.data(moduleNamespace), + // set at run-time + $field, + $group, + $message, + $prompt, + $submit, + $clear, + $reset, + + settings, + validation, + + metadata, + selector, + className, + error, + + namespace, + moduleNamespace, + eventNamespace, + + instance, module ; module = { initialize: function() { - module.verbose('Initializing form validation', $module, validation, settings); - module.bindEvents(); - module.instantiate(); + + // settings grabbed at run time + module.get.settings(); + if(methodInvoked) { + if(instance === undefined) { + module.instantiate(); + } + module.invoke(query); + } + else { + module.verbose('Initializing form validation', $module, settings); + module.bindEvents(); + module.set.defaults(); + module.instantiate(); + } }, instantiate: function() { @@ -577,7 +597,14 @@ $.fn.form = function(fields, parameters) { refresh: function() { module.verbose('Refreshing selector cache'); - $field = $module.find(selector.field); + $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() { @@ -590,7 +617,7 @@ $.fn.form = function(fields, parameters) { attachEvents: function(selector, action) { action = action || 'submit'; $(selector) - .on('click', function(event) { + .on('click' + eventNamespace, function(event) { module[action](); event.preventDefault(); }) @@ -598,26 +625,25 @@ $.fn.form = function(fields, parameters) { }, bindEvents: function() { - - if(settings.keyboardShortcuts) { - $field - .on('keydown' + eventNamespace, module.event.field.keydown) - ; - } + 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) ; - $field - .on('blur' + eventNamespace, module.event.field.blur) - ; - // attach submit events - module.attachEvents($submit, 'submit'); - + if(settings.keyboardShortcuts) { + $module + .on('keydown' + eventNamespace, selector.field, module.event.field.keydown) + ; + } $field .each(function() { var - type = $(this).prop('type'), - inputEvent = module.get.changeEvent(type) + $input = $(this), + type = $input.prop('type'), + inputEvent = module.get.changeEvent(type, $input) ; $(this) .on(inputEvent + eventNamespace, module.event.field.change) @@ -626,6 +652,94 @@ $.fn.form = function(fields, parameters) { ; }, + 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); + } + }) + ; + }, + + is: { + bracketedRule: function(rule) { + return (rule.type && rule.type.match(settings.regExp.bracket)); + }, + valid: function() { + var + allValid = true + ; + module.verbose('Checking if form is valid'); + $.each(validation, function(fieldName, field) { + if( !( module.validate.field(field, fieldName) ) ) { + allValid = false; + } + }); + return allValid; + } + }, + removeEvents: function() { $module .off(eventNamespace) @@ -658,35 +772,37 @@ $.fn.form = function(fields, parameters) { .blur() ; } - if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).size() > 0 ) { - module.debug('Enter key pressed, submitting form'); - $submit - .addClass(className.down) - ; - $field - .one('keyup' + eventNamespace, module.event.field.keyup) - ; + if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).length > 0 ) { + if(!keyHeldDown) { + $field + .one('keyup' + eventNamespace, module.event.field.keyup) + ; + module.submit(); + module.debug('Enter pressed on input submitting form'); + } + keyHeldDown = true; } }, keyup: function() { - module.verbose('Doing keyboard shortcut form submit'); - $submit.removeClass(className.down); - module.submit(); + keyHeldDown = false; }, - blur: function() { + blur: function(event) { var - $field = $(this), - $fieldGroup = $field.closest($group) + $field = $(this), + $fieldGroup = $field.closest($group), + validationRules = module.get.validation($field) ; if( $fieldGroup.hasClass(className.error) ) { - module.debug('Revalidating field', $field, module.get.validation($field)); - module.validate.field( module.get.validation($field) ); + module.debug('Revalidating field', $field, validationRules); + module.validate.form.call(module, event, true); } else if(settings.on == 'blur' || settings.on == 'change') { - module.validate.field( module.get.validation($field) ); + if(validationRules) { + module.validate.field( validationRules ); + } } }, - change: function() { + change: function(event) { var $field = $(this), $fieldGroup = $field.closest($group) @@ -695,7 +811,7 @@ $.fn.form = function(fields, parameters) { clearTimeout(module.timer); module.timer = setTimeout(function() { module.debug('Revalidating field', $field, module.get.validation($field)); - module.validate.field( module.get.validation($field) ); + module.validate.form.call(module, event, true); }, settings.delay); } } @@ -704,42 +820,237 @@ $.fn.form = function(fields, parameters) { }, get: { - changeEvent: function(type) { - if(type == 'checkbox' || type == 'radio' || type == 'hidden') { + ancillaryValue: function(rule) { + if(!rule.type || !module.is.bracketedRule(rule)) { + return false; + } + return 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 (document.createElement('input').oninput !== undefined) - ? 'input' - : (document.createElement('input').onpropertychange !== undefined) - ? 'propertychange' - : 'keyup' + 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.size() == 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; + 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); - if( $field.filter('#' + identifier).size() > 0 ) { + if( $field.filter('#' + identifier).length > 0 ) { return $field.filter('#' + identifier); } - else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { return $field.filter('[name="' + identifier +'"]'); } - else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { + else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) { + return $field.filter('[name="' + identifier +'[]"]'); + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); } return $('<input/>'); }, + fields: function(fields) { + var + $fields = $() + ; + $.each(fields, function(index, name) { + $fields = $fields.add( module.get.field(name) ); + }); + return $fields; + }, validation: function($field) { var - rules + fieldValidation, + identifier ; + if(!validation) { + return false; + } $.each(validation, function(fieldName, field) { - if( module.get.field(field.identifier).get(0) == $field.get(0) ) { - rules = field; + identifier = field.identifier || fieldName; + if( module.get.field(identifier)[0] == $field[0] ) { + field.identifier = identifier; + fieldValidation = field; } }); - return rules || false; + 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; } }, @@ -747,13 +1058,16 @@ $.fn.form = function(fields, parameters) { field: function(identifier) { module.verbose('Checking for existence of a field with identifier', identifier); - if( $field.filter('#' + identifier).size() > 0 ) { + if(typeof identifier !== 'string') { + module.error(error.identifier, identifier); + } + if( $field.filter('#' + identifier).length > 0 ) { return true; } - else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { return true; } - else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { return true; } return false; @@ -766,8 +1080,8 @@ $.fn.form = function(fields, parameters) { var $field = module.get.field(identifier), $fieldGroup = $field.closest($group), - $prompt = $fieldGroup.find(selector.prompt), - promptExists = ($prompt.size() !== 0) + $prompt = $fieldGroup.children(selector.prompt), + promptExists = ($prompt.length !== 0) ; errors = (typeof errors == 'string') ? [errors] @@ -806,6 +1120,7 @@ $.fn.form = function(fields, parameters) { }, errors: function(errors) { module.debug('Adding form error messages', errors); + module.set.error(); $message .html( settings.templates.error(errors) ) ; @@ -813,17 +1128,17 @@ $.fn.form = function(fields, parameters) { }, remove: { - prompt: function(field) { + prompt: function(identifier) { var - $field = module.get.field(field.identifier), + $field = module.get.field(identifier), $fieldGroup = $field.closest($group), - $prompt = $fieldGroup.find(selector.prompt) + $prompt = $fieldGroup.children(selector.prompt) ; $fieldGroup .removeClass(className.error) ; if(settings.inline && $prompt.is(':visible')) { - module.verbose('Removing prompt for field', field); + 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(); @@ -847,32 +1162,110 @@ $.fn.form = function(fields, parameters) { .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) { + form: function(event, ignoreCallbacks) { var - allValid = true, + values = module.get.values(), apiRequest ; + + // input keydown event will fire submit repeatedly by browser default + if(keyHeldDown) { + return false; + } + // reset errors formErrors = []; - $.each(validation, function(fieldName, field) { - if( !( module.validate.field(field) ) ) { - allValid = false; - } - }); - if(allValid) { + if( module.is.valid() ) { module.debug('Form has no validation errors, submitting'); module.set.success(); - return $.proxy(settings.onSuccess, this)(event); + if(ignoreCallbacks !== true) { + return settings.onSuccess.call(element, event, values); + } } else { module.debug('Form has errors'); @@ -884,67 +1277,75 @@ $.fn.form = function(fields, parameters) { if($module.data('moduleApi') !== undefined) { event.stopImmediatePropagation(); } - return $.proxy(settings.onFailure, this)(formErrors); + if(ignoreCallbacks !== true) { + return settings.onFailure.call(element, formErrors, values); + } } }, // takes a validation object and returns whether field passes validation - field: function(field) { + field: function(field, fieldName) { var - $field = module.get.field(field.identifier), + identifier = field.identifier || fieldName, + $field = module.get.field(identifier), fieldValid = true, fieldErrors = [] ; - if(field.optional && $.trim($field.val()) === ''){ - module.debug('Field is optional and empty. Skipping', field.identifier); + 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 && $.trim($field.val()) === ''){ + module.debug('Field is optional and empty. Skipping', identifier); fieldValid = true; } else if(field.rules !== undefined) { $.each(field.rules, function(index, rule) { - if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) { - module.debug('Field is invalid', field.identifier, rule.type); - fieldErrors.push(rule.prompt); + 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) { - module.remove.prompt(field, fieldErrors); - $.proxy(settings.onValid, $field)(); + module.remove.prompt(identifier, fieldErrors); + settings.onValid.call($field); } else { formErrors = formErrors.concat(fieldErrors); - module.add.prompt(field.identifier, fieldErrors); - $.proxy(settings.onInvalid, $field)(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, validation) { + rule: function(field, rule) { var - $field = module.get.field(field.identifier), - type = validation.type, - value = $.trim($field.val() + ''), - - bracketRegExp = /\[(.*)\]/i, - bracket = bracketRegExp.exec(type), - isValid = true, - ancillary, - functionType - ; - // if bracket notation is used, pass in extra parameters - if(bracket !== undefined && bracket !== null) { - ancillary = '' + bracket[1]; - functionType = type.replace(bracket[0], ''); - isValid = $.proxy(settings.rules[functionType], $module)(value, ancillary); - } - // normal notation - else { - isValid = $.proxy(settings.rules[type], $field)(value); + $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; } - return isValid; + // cast to string avoiding encoding special values + value = (value === undefined || value === '' || value === null) + ? '' + : $.trim(value + '') + ; + return ruleFunction.call($field, value, ancillary); } }, @@ -1016,7 +1417,7 @@ $.fn.form = function(fields, parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -1032,8 +1433,8 @@ $.fn.form = function(fields, parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); @@ -1086,7 +1487,7 @@ $.fn.form = function(fields, parameters) { } }); } - if ( $.isFunction( found ) ) { + if( $.isFunction( found ) ) { response = found.apply(context, passedArguments); } else if(found !== undefined) { @@ -1104,19 +1505,7 @@ $.fn.form = function(fields, parameters) { return found; } }; - if(methodInvoked) { - if(instance === undefined) { - module.initialize(); - } - module.invoke(query); - } - else { - if(instance !== undefined) { - module.destroy(); - } - module.initialize(); - } - + module.initialize(); }) ; @@ -1132,9 +1521,10 @@ $.fn.form.settings = { namespace : 'form', debug : false, - verbose : true, + verbose : false, performance : true, + fields : false, keyboardShortcuts : true, on : 'submit', @@ -1146,38 +1536,93 @@ $.fn.form.settings = { transition : 'scale', duration : 200, - onValid : function() {}, onInvalid : function() {}, onSuccess : function() { return true; }, onFailure : function() { return false; }, metadata : { - validate: 'validate' + defaultValue : 'default', + validate : 'validate' + }, + + regExp: { + 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-]*[a-z0-9])?", + 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 : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - checkbox: 'input[type="checkbox"], input[type="radio"]', - input : 'input', - prompt : '.prompt', - submit : '.submit' + 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', - success : 'success', - down : 'down', - label : 'ui prompt label' + label : 'ui prompt label', + pressed : 'down', + success : 'success' }, error: { - method : 'The method you called is not defined.' + 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">' @@ -1188,9 +1633,11 @@ $.fn.form.settings = { html += '</ul>'; return $(html); }, + + // template that produces label prompt: function(errors) { return $('<div/>') - .addClass('ui red pointing prompt label') + .addClass('ui basic red pointing prompt label') .html(errors[0]) ; } @@ -1198,52 +1645,71 @@ $.fn.form.settings = { rules: { - // checkbox checked - checked: function() { - return ($(this).filter(':checked').size() > 0); + // is not empty or blank string + empty: function(value) { + return !(value === undefined || '' === value || $.isArray(value) && value.length === 0); }, - // value contains (text) - contains: function(value, text) { - text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); - return (value.search(text) !== -1); + // checkbox checked + checked: function() { + return ($(this).filter(':checked').length > 0); }, // is most likely an email email: function(value){ var - emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i") + emailRegExp = new RegExp($.fn.form.settings.regExp.email, 'i') ; return emailRegExp.test(value); }, - // is not empty or blank string - empty: function(value) { - return !(value === undefined || '' === value); + // value is most likely url + url: function(value) { + return $.fn.form.settings.regExp.url.test(value); + }, + + // matches specified regExp + regExp: function(value, 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 + // is valid integer or matches range integer: function(value, range) { var - intRegExp = /^\-?\d+$/, + intRegExp = $.fn.form.settings.regExp.integer, min, max, parts ; - if (range === undefined || range === '' || range === '..') { + if( !range || ['', '..'].indexOf(range) !== -1) { // do nothing } - else if (range.indexOf('..') == -1) { - if (intRegExp.test(range)) { + else if(range.indexOf('..') == -1) { + if(intRegExp.test(range)) { min = max = range - 0; } } else { parts = range.split('..', 2); - if (intRegExp.test(parts[0])) { + if(intRegExp.test(parts[0])) { min = parts[0] - 0; } - if (intRegExp.test(parts[1])) { + if(intRegExp.test(parts[1])) { max = parts[1] - 0; } } @@ -1254,12 +1720,89 @@ $.fn.form.settings = { ); }, - // is exactly value + // 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) @@ -1267,21 +1810,39 @@ $.fn.form.settings = { ; }, + // 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, fieldIdentifier) { - // use either id or name of field + match: function(value, identifier) { var $form = $(this), matchingValue ; - if($form.find('#' + fieldIdentifier).size() > 0) { - matchingValue = $form.find('#' + fieldIdentifier).val(); + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); } - else if($form.find('[name="' + fieldIdentifier +'"]').size() > 0) { - matchingValue = $form.find('[name="' + fieldIdentifier + '"]').val(); + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); } - else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').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() ) @@ -1289,38 +1850,176 @@ $.fn.form.settings = { ; }, - // string length is less than max length - maxLength: function(value, maxLength) { - return (value !== undefined) - ? (value.length <= maxLength) + // 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 ; }, - // value is not exactly notValue - not: function(value, notValue) { - return (value != notValue); - }, + 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 + ; - // value is most likely url - url: function(value) { + if(typeof cardNumber !== 'string' || cardNumber.length === 0) { + return; + } + + // 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 - urlRegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ + 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 ; - return urlRegExp.test(value); + 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 ); +})( jQuery, window, document ); -/* - * # Semantic - Accordion +/*! + * # Semantic UI 2.1.6 - Accordion * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -1378,11 +2077,11 @@ $.fn.accordion = function(parameters) { module = { initialize: function() { - module.debug('Initializing accordion with bound events', $module); - $module - .on('click' + eventNamespace, selector.title, module.event.click) - ; - module.observeChanges(); + module.debug('Initializing', $module); + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } module.instantiate(); }, @@ -1394,12 +2093,10 @@ $.fn.accordion = function(parameters) { }, destroy: function() { - module.debug('Destroying previous accordion for', $module); + module.debug('Destroying previous instance', $module); $module - .removeData(moduleNamespace) - ; - $title .off(eventNamespace) + .removeData(moduleNamespace) ; }, @@ -1422,10 +2119,18 @@ $.fn.accordion = function(parameters) { } }, + bind: { + events: function() { + module.debug('Binding delegated events'); + $module + .on(settings.on + eventNamespace, selector.trigger, module.event.click) + ; + } + }, event: { click: function() { - $.proxy(module.toggle, this)(); + module.toggle.call(this); } }, @@ -1434,22 +2139,25 @@ $.fn.accordion = function(parameters) { $activeTitle = (query !== undefined) ? (typeof query === 'number') ? $title.eq(query) - : $(query) - : $(this), + : $(query).closest(selector.title) + : $(this).closest(selector.title), $activeContent = $activeTitle.next($content), - contentIsOpen = $activeContent.is(':visible') + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) ; module.debug('Toggling visibility of content', $activeTitle); - if(contentIsOpen) { + if(isOpen || isOpening) { if(settings.collapsible) { - $.proxy(module.close, $activeTitle)(); + module.close.call($activeTitle); } else { module.debug('Cannot close accordion content collapsing is disabled'); } } else { - $.proxy(module.open, $activeTitle)(); + module.open.call($activeTitle); } }, @@ -1458,38 +2166,64 @@ $.fn.accordion = function(parameters) { $activeTitle = (query !== undefined) ? (typeof query === 'number') ? $title.eq(query) - : $(query) - : $(this), - $activeContent = $activeTitle.next($content), - currentlyAnimating = $activeContent.is(':animated'), - currentlyActive = $activeContent.hasClass(className.active) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive || isAnimating) ; - if(!currentlyAnimating && !currentlyActive) { - module.debug('Opening accordion content', $activeTitle); - if(settings.exclusive) { - $.proxy(module.closeOthers, $activeTitle)(); + if(isOpen) { + module.debug('Accordion already open, skipping', $activeContent); + return; + } + module.debug('Opening accordion content', $activeTitle); + settings.onOpening.call($activeContent); + if(settings.exclusive) { + module.closeOthers.call($activeTitle); + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade in', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 1 + }, settings.duration, module.resetOpacity) + ; } - $activeTitle - .addClass(className.active) - ; - $activeContent - .stop() - .children() - .stop() - .animate({ - opacity: 1 - }, settings.duration, module.reset.display) - .end() - .slideDown(settings.duration, settings.easing, function() { - $activeContent - .addClass(className.active) - ; - $.proxy(module.reset.display, this)(); - $.proxy(settings.onOpen, this)(); - $.proxy(settings.onChange, this)(); - }) - ; } + $activeContent + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .addClass(className.active) + ; + module.reset.display.call(this); + settings.onOpen.call(this); + settings.onChange.call(this); + }) + ; }, close: function(query) { @@ -1497,30 +2231,57 @@ $.fn.accordion = function(parameters) { $activeTitle = (query !== undefined) ? (typeof query === 'number') ? $title.eq(query) - : $(query) - : $(this), + : $(query).closest(selector.title) + : $(this).closest(selector.title), $activeContent = $activeTitle.next($content), - isActive = $activeContent.hasClass(className.active) + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) ; - if(isActive) { + if((isActive || isOpening) && !isClosing) { module.debug('Closing accordion content', $activeContent); + settings.onClosing.call($activeContent); $activeTitle .removeClass(className.active) ; $activeContent - .removeClass(className.active) - .show() - .stop() - .children() - .stop() - .animate({ - opacity: 0 - }, settings.duration, module.reset.opacity) - .end() + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade out', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent .slideUp(settings.duration, settings.easing, function() { - $.proxy(module.reset.display, this)(); - $.proxy(settings.onClose, this)(); - $.proxy(settings.onChange, this)(); + $activeContent + .removeClass(className.animating) + .removeClass(className.active) + ; + module.reset.display.call(this); + settings.onClose.call(this); + settings.onChange.call(this); }) ; } @@ -1530,7 +2291,7 @@ $.fn.accordion = function(parameters) { var $activeTitle = (index !== undefined) ? $title.eq(index) - : $(this), + : $(this).closest(selector.title), $parentTitles = $activeTitle.parents(selector.content).prev(selector.title), $activeAccordion = $activeTitle.closest(selector.accordion), activeSelector = selector.title + '.' + className.active + ':visible', @@ -1546,25 +2307,45 @@ $.fn.accordion = function(parameters) { else { $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles); - $openTitles = $openTitles.not($nestedTitles); + $openTitles = $openTitles.not($nestedTitles); $openContents = $openTitles.next($content); } - if( ($openTitles.size() > 0) ) { + if( ($openTitles.length > 0) ) { module.debug('Exclusive enabled, closing other content', $openTitles); $openTitles .removeClass(className.active) ; $openContents - .stop() - .children() - .stop() - .animate({ - opacity: 0 - }, settings.duration, module.resetOpacity) - .end() + .removeClass(className.animating) + .stop(true, true) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $openContents + .children() + .transition({ + animation : 'fade out', + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $openContents + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $openContents .slideUp(settings.duration , settings.easing, function() { $(this).removeClass(className.active); - $.proxy(module.reset.display, this)(); + module.reset.display.call(this); }) ; } @@ -1668,7 +2449,7 @@ $.fn.accordion = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -1731,6 +2512,7 @@ $.fn.accordion = function(parameters) { return false; } else { + module.error(error.method, query); return false; } }); @@ -1761,7 +2543,7 @@ $.fn.accordion = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -1775,35 +2557,45 @@ $.fn.accordion = function(parameters) { $.fn.accordion.settings = { - name : 'Accordion', - namespace : 'accordion', + name : 'Accordion', + namespace : 'accordion', - debug : false, - verbose : true, - performance : true, + debug : false, + verbose : false, + performance : true, - exclusive : true, - collapsible : true, - closeNested : false, + on : 'click', // event on title that opens accordion - duration : 500, - easing : 'easeInOutQuint', + observeChanges : true, // whether accordion should automatically refresh on DOM insertion - onOpen : function(){}, - onClose : function(){}, - onChange : function(){}, + exclusive : true, // whether a single accordion content panel should be open at once + collapsible : true, // whether accordion content can be closed + closeNested : false, // whether nested content should be closed when a panel is closed + animateChildren : true, // whether children opacity should be animated + + duration : 350, // duration of animation + easing : 'easeOutQuad', // easing equation for animation + + + onOpening : function(){}, // callback before open animation + onOpen : function(){}, // callback after open animation + onClosing : function(){}, // callback before closing animation + onClose : function(){}, // callback after closing animation + onChange : function(){}, // callback after closing or opening animation error: { - method : 'The method you called is not defined' + method : 'The method you called is not defined' }, className : { - active : 'active' + active : 'active', + animating : 'animating' }, selector : { accordion : '.accordion', title : '.title', + trigger : '.title', content : '.content' } @@ -1811,21 +2603,20 @@ $.fn.accordion.settings = { // Adds easing $.extend( $.easing, { - easeInOutQuint: function (x, t, b, c, d) { - if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; - return c/2*((t-=2)*t*t*t*t + 2) + b; + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; } }); -})( jQuery, window , document ); +})( jQuery, window, document ); -/* - * # Semantic - Checkbox +/*! + * # Semantic UI 2.1.6 - Checkbox * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -1863,9 +2654,12 @@ $.fn.checkbox = function(parameters) { moduleNamespace = 'module-' + namespace, $module = $(this), - $label = $(this).find(selector.label).first(), - $input = $(this).find(selector.input), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], + initialLoad = false, + shortcutPressed = false, instance = $module.data(moduleNamespace), observer, @@ -1879,23 +2673,14 @@ $.fn.checkbox = function(parameters) { module.verbose('Initializing checkbox', settings); module.create.label(); - module.add.events(); + module.bind.events(); - if( module.is.checked() ) { - module.set.checked(); - if(settings.fireOnInit) { - $.proxy(settings.onChecked, $input.get())(); - } - } - else { - module.remove.checked(); - if(settings.fireOnInit) { - $.proxy(settings.onUnchecked, $input.get())(); - } - } - module.observeChanges(); + module.set.tabbable(); + module.hide.input(); + module.observeChanges(); module.instantiate(); + module.setup(); }, instantiate: function() { @@ -1908,16 +2693,55 @@ $.fn.checkbox = function(parameters) { destroy: function() { module.verbose('Destroying module'); - module.remove.events(); - $module - .removeData(moduleNamespace) - ; + 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() { - $module = $(this); - $label = $(this).find(selector.label).first(); - $input = $(this).find(selector.input); + $label = $module.children(selector.label); + $input = $module.children(selector.input); + input = $input[0]; + }, + + hide: { + input: function() { + module.verbose('Modfying <input> z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modfying <input> z-index to be selectable'); + $input.removeClass(className.hidden); + } }, observeChanges: function() { @@ -1942,7 +2766,7 @@ $.fn.checkbox = function(parameters) { ? module[event] : module.toggle ; - if($element.size() > 0) { + if($element.length > 0) { module.debug('Attaching checkbox events to element', selector, event); $element .on('click' + eventNamespace, event) @@ -1954,43 +2778,220 @@ $.fn.checkbox = function(parameters) { }, 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) { + if(key == keyCode.escape) { module.verbose('Escape key pressed blurring field'); - $module - .blur() - ; + $input.blur(); + shortcutPressed = true; } - if(!event.ctrlKey && key == keyCode.enter) { - module.verbose('Enter key pressed, toggling checkbox'); - $.proxy(module.toggle, this)(); + 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); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + settings.onDisable.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 $module.hasClass(className.radio); + 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') ); + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); }, uncheck: function() { return (typeof settings.uncheckable === 'boolean') @@ -2001,21 +3002,135 @@ $.fn.checkbox = function(parameters) { }, set: { + initialLoad: function() { + initialLoad = true; + }, checked: function() { - $module.addClass(className.checked); + 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(); }, - tab: function() { + 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) - ; + $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).size() > 0) { + if($input.prevAll(selector.label).length > 0) { $input.prev(selector.label).detach().insertAfter($input); module.debug('Moving existing label', $label); } @@ -2028,86 +3143,51 @@ $.fn.checkbox = function(parameters) { has: { label: function() { - return ($label.size() > 0); + return ($label.length > 0); } }, - add: { + bind: { events: function() { module.verbose('Attaching checkbox events'); $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.click) .on('keydown' + eventNamespace, selector.input, module.event.keydown) + .on('keyup' + eventNamespace, selector.input, module.event.keyup) ; } }, - remove: { - checked: function() { - $module.removeClass(className.checked); - }, + unbind: { events: function() { module.debug('Removing events'); $module .off(eventNamespace) - .removeData(moduleNamespace) - ; - $input - .off(eventNamespace, module.event.keydown) - ; - $label - .off(eventNamespace) ; } }, - enable: function() { - module.debug('Enabling checkbox functionality'); - $module.removeClass(className.disabled); - $input.prop('disabled', false); - $.proxy(settings.onEnabled, $input.get())(); - }, - - disable: function() { - module.debug('Disabling checkbox functionality'); - $module.addClass(className.disabled); - $input.prop('disabled', 'disabled'); - $.proxy(settings.onDisabled, $input.get())(); - }, - - check: function() { - module.debug('Enabling checkbox', $input); - $input - .prop('checked', true) - .trigger('change') - ; - module.set.checked(); - $.proxy(settings.onChange, $input.get())(); - $.proxy(settings.onChecked, $input.get())(); - }, - - uncheck: function() { - module.debug('Disabling checkbox'); - $input - .prop('checked', false) - .trigger('change') + uncheckOthers: function() { + var + $radios = module.get.otherRadios() ; - module.remove.checked(); - $.proxy(settings.onChange, $input.get())(); - $.proxy(settings.onUnchecked, $input.get())(); + module.debug('Unchecking other radios', $radios); + $radios.removeClass(className.checked); }, - toggle: function(event) { + toggle: function() { if( !module.can.change() ) { - console.log(module.can.change()); - module.debug('Checkbox is read-only or disabled, ignoring toggle'); + if(!module.is.radio()) { + module.debug('Checkbox is read-only or disabled, ignoring toggle'); + } return; } - module.verbose('Determining new checkbox state'); - if( module.is.unchecked() ) { + 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(); } }, @@ -2180,7 +3260,7 @@ $.fn.checkbox = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -2243,6 +3323,7 @@ $.fn.checkbox = function(parameters) { return false; } else { + module.error(error.method, query); return false; } }); @@ -2274,7 +3355,7 @@ $.fn.checkbox = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -2289,49 +3370,63 @@ $.fn.checkbox = function(parameters) { $.fn.checkbox.settings = { - name : 'Checkbox', - namespace : 'checkbox', + name : 'Checkbox', + namespace : 'checkbox', - debug : false, - verbose : true, - performance : true, + debug : false, + verbose : true, + performance : true, // delegated event context - uncheckable : 'auto', - fireOnInit : true, + uncheckable : 'auto', + fireOnInit : false, - onChange : function(){}, - onChecked : function(){}, - onUnchecked : function(){}, - onEnabled : function(){}, - onDisabled : function(){}, + onChange : function(){}, - className : { - checked : 'checked', - disabled : 'disabled', - radio : 'radio', - readOnly : 'read-only' + beforeChecked : function(){}, + beforeUnchecked : function(){}, + beforeDeterminate : function(){}, + beforeIndeterminate : function(){}, + + onChecked : function(){}, + onUnchecked : function(){}, + + onDeterminate : function() {}, + onIndeterminate : function() {}, + + 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.' + method : 'The method you called is not defined' }, selector : { - input : 'input[type=checkbox], input[type=radio]', - label : 'label' + checkbox : '.ui.checkbox', + label : 'label, .box', + input : 'input[type="checkbox"], input[type="radio"]', + link : 'a[href]' } }; -})( jQuery, window , document ); +})( jQuery, window, document ); -/* - * # Semantic - Dimmer +/*! + * # Semantic UI 2.1.6 - Dimmer * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -2339,6 +3434,8 @@ $.fn.checkbox.settings = { ;(function ( $, window, document, undefined ) { +"use strict"; + $.fn.dimmer = function(parameters) { var $allModules = $(this), @@ -2386,6 +3483,7 @@ $.fn.dimmer = function(parameters) { preinitialize: function() { if( module.is.dimmer() ) { + $dimmable = $module.parent(); $dimmer = $module; } @@ -2393,10 +3491,10 @@ $.fn.dimmer = function(parameters) { $dimmable = $module; if( module.has.dimmer() ) { if(settings.dimmerName) { - $dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName); + $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName); } else { - $dimmer = $dimmable.children(selector.dimmer); + $dimmer = $dimmable.find(selector.dimmer); } } else { @@ -2407,28 +3505,8 @@ $.fn.dimmer = function(parameters) { initialize: function() { module.debug('Initializing dimmer', settings); - if(settings.on == 'hover') { - $dimmable - .on('mouseenter' + eventNamespace, module.show) - .on('mouseleave' + eventNamespace, module.hide) - ; - } - else if(settings.on == 'click') { - $dimmable - .on(clickEvent + eventNamespace, module.toggle) - ; - } - if( module.is.page() ) { - module.debug('Setting as a page dimmer', $dimmable); - module.set.pageDimmer(); - } - if( module.is.closable() ) { - module.verbose('Adding dimmer close event', $dimmer); - $dimmer - .on(clickEvent + eventNamespace, module.event.click) - ; - } + module.bind.events(); module.set.dimmable(); module.instantiate(); }, @@ -2443,21 +3521,52 @@ $.fn.dimmer = function(parameters) { destroy: function() { module.verbose('Destroying previous module', $dimmer); - $module - .removeData(moduleNamespace) - ; + module.unbind.events(); + module.remove.variation(); $dimmable .off(eventNamespace) ; - $dimmer - .off(eventNamespace) - ; + }, + + bind: { + events: function() { + if(settings.on == 'hover') { + $dimmable + .on('mouseenter' + eventNamespace, module.show) + .on('mouseleave' + eventNamespace, module.hide) + ; + } + else if(settings.on == 'click') { + $dimmable + .on(clickEvent + eventNamespace, module.toggle) + ; + } + if( module.is.page() ) { + module.debug('Setting as a page dimmer', $dimmable); + module.set.pageDimmer(); + } + + if( module.is.closable() ) { + module.verbose('Adding dimmer close event', $dimmer); + $dimmable + .on(clickEvent + eventNamespace, selector.dimmer, module.event.click) + ; + } + } + }, + + unbind: { + events: function() { + $module + .removeData(moduleNamespace) + ; + } }, event: { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( $dimmer.find(event.target).size() === 0 || $(event.target).is(selector.content) ) { + if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) { module.hide(); event.stopImmediatePropagation(); } @@ -2480,7 +3589,7 @@ $.fn.dimmer = function(parameters) { ; if(settings.variation) { module.debug('Creating dimmer with variation', settings.variation); - $element.addClass(className.variation); + $element.addClass(settings.variation); } if(settings.dimmerName) { module.debug('Creating named dimmer', settings.dimmerName); @@ -2500,8 +3609,8 @@ $.fn.dimmer = function(parameters) { module.debug('Showing dimmer', $dimmer, settings); if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { module.animate.show(callback); - $.proxy(settings.onShow, element)(); - $.proxy(settings.onChange, element)(); + settings.onShow.call(element); + settings.onChange.call(element); } else { module.debug('Dimmer is already shown or disabled'); @@ -2516,8 +3625,8 @@ $.fn.dimmer = function(parameters) { if( module.is.dimmed() || module.is.animating() ) { module.debug('Hiding dimmer', $dimmer); module.animate.hide(callback); - $.proxy(settings.onHide, element)(); - $.proxy(settings.onChange, element)(); + settings.onHide.call(element); + settings.onChange.call(element); } else { module.debug('Dimmer is not visible'); @@ -2541,15 +3650,19 @@ $.fn.dimmer = function(parameters) { : function(){} ; if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { + if(settings.opacity !== 'auto') { + module.set.opacity(); + } $dimmer .transition({ - animation : settings.transition + ' in', + animation : settings.transition + ' in', queue : false, - duration : module.get.duration(), - onStart : function() { + duration : module.get.duration(), + useFailSafe : true, + onStart : function() { module.set.dimmed(); }, - onComplete : function() { + onComplete : function() { module.set.active(); callback(); } @@ -2559,6 +3672,9 @@ $.fn.dimmer = function(parameters) { else { module.verbose('Showing dimmer animation with javascript'); module.set.dimmed(); + if(settings.opacity == 'auto') { + settings.opacity = 0.8; + } $dimmer .stop() .css({ @@ -2566,7 +3682,7 @@ $.fn.dimmer = function(parameters) { width : '100%', height : '100%' }) - .fadeTo(module.get.duration(), 1, function() { + .fadeTo(module.get.duration(), settings.opacity, function() { $dimmer.removeAttr('style'); module.set.active(); callback(); @@ -2583,13 +3699,14 @@ $.fn.dimmer = function(parameters) { module.verbose('Hiding dimmer with css'); $dimmer .transition({ - animation : settings.transition + ' out', - queue : false, - duration : module.get.duration(), - onStart : function() { + animation : settings.transition + ' out', + queue : false, + duration : module.get.duration(), + useFailSafe : true, + onStart : function() { module.remove.dimmed(); }, - onComplete : function() { + onComplete : function() { module.remove.active(); callback(); } @@ -2631,10 +3748,10 @@ $.fn.dimmer = function(parameters) { has: { dimmer: function() { if(settings.dimmerName) { - return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).size() > 0); + return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0); } else { - return ( $module.children(selector.dimmer).size() > 0 ); + return ( $module.find(selector.dimmer).length > 0 ); } } }, @@ -2656,10 +3773,10 @@ $.fn.dimmer = function(parameters) { return settings.closable; }, dimmer: function() { - return $module.is(selector.dimmer); + return $module.hasClass(className.dimmer); }, dimmable: function() { - return $module.is(selector.dimmable); + return $module.hasClass(className.dimmable); }, dimmed: function() { return $dimmable.hasClass(className.dimmed); @@ -2685,6 +3802,23 @@ $.fn.dimmer = function(parameters) { }, set: { + opacity: function(opacity) { + var + color = $dimmer.css('background-color'), + colorArray = color.split(','), + isRGBA = (colorArray && colorArray.length == 4) + ; + opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity; + if(isRGBA) { + colorArray[3] = opacity + ')'; + color = colorArray.join(','); + } + else { + color = 'rgba(0, 0, 0, ' + opacity + ')'; + } + module.debug('Setting opacity to', opacity); + $dimmer.css('background-color', color); + }, active: function() { $dimmer.addClass(className.active); }, @@ -2699,6 +3833,12 @@ $.fn.dimmer = function(parameters) { }, disabled: function() { $dimmer.addClass(className.disabled); + }, + variation: function(variation) { + variation = variation || settings.variation; + if(variation) { + $dimmer.addClass(variation); + } } }, @@ -2713,6 +3853,12 @@ $.fn.dimmer = function(parameters) { }, disabled: function() { $dimmer.removeClass(className.disabled); + }, + variation: function(variation) { + variation = variation || settings.variation; + if(variation) { + $dimmer.removeClass(variation); + } } }, @@ -2785,7 +3931,7 @@ $.fn.dimmer = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -2801,8 +3947,8 @@ $.fn.dimmer = function(parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); @@ -2851,6 +3997,7 @@ $.fn.dimmer = function(parameters) { return false; } else { + module.error(error.method, query); return false; } }); @@ -2884,7 +4031,7 @@ $.fn.dimmer = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -2903,16 +4050,31 @@ $.fn.dimmer.settings = { namespace : 'dimmer', debug : false, - verbose : true, + verbose : false, performance : true, + // name to distinguish between multiple dimmers in context dimmerName : false, + + // whether to add a variation type variation : false, + + // whether to bind close events closable : 'auto', - transition : 'fade', + + // whether to use css animations useCSS : true, + + // css animation to use + transition : 'fade', + + // event to bind to on : false, + // overriding opacity value + opacity : 'auto', + + // transition durations duration : { show : 500, hide : 500 @@ -2926,38 +4088,38 @@ $.fn.dimmer.settings = { method : 'The method you called is not defined.' }, - selector: { - dimmable : '.dimmable', - dimmer : '.ui.dimmer', - content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' - }, - - template: { - dimmer: function() { - return $('<div />').attr('class', 'ui dimmer'); - } - }, - className : { active : 'active', animating : 'animating', dimmable : 'dimmable', dimmed : 'dimmed', + dimmer : 'dimmer', disabled : 'disabled', hide : 'hide', pageDimmer : 'page', show : 'show' + }, + + selector: { + dimmer : '> .ui.dimmer', + content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' + }, + + template: { + dimmer: function() { + return $('<div />').attr('class', 'ui dimmer'); + } } }; -})( jQuery, window , document ); -/* - * # Semantic - Dropdown +})( jQuery, window, document ); +/*! + * # Semantic UI 2.1.6 - Dropdown * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -2985,27 +4147,34 @@ $.fn.dropdown = function(parameters) { ; $allModules - .each(function() { + .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), $input = $module.find(selector.input), + $icon = $module.find(selector.icon), - $combo = ($module.prev().find(selector.text).size() > 0) + $combo = ($module.prev().find(selector.text).length > 0) ? $module.prev().find(selector.text) : $module.prev(), @@ -3014,10 +4183,16 @@ $.fn.dropdown = function(parameters) { activated = false, itemActivated = false, - + internalChange = false, element = this, instance = $module.data(moduleNamespace), - observer, + + initialLoad, + pageLostFocus, + elementNamespace, + id, + selectObserver, + menuObserver, module ; @@ -3025,18 +4200,24 @@ $.fn.dropdown = function(parameters) { initialize: function() { module.debug('Initializing dropdown', settings); - module.setup.layout(); - module.save.defaults(); - module.set.selected(); - if(hasTouch) { - module.bind.touchEvents(); + 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(); } - module.bind.mouseEvents(); - module.bind.keyboardEvents(); - module.observeChanges(); - module.instantiate(); }, instantiate: function() { @@ -3048,37 +4229,175 @@ $.fn.dropdown = function(parameters) { }, destroy: function() { - module.verbose('Destroying previous dropdown for', $module); + module.verbose('Destroying previous dropdown', $module); module.remove.tabbable(); $module .off(eventNamespace) .removeData(moduleNamespace) ; + $menu + .off(eventNamespace) + ; + $document + .off(elementNamespace) + ; + if(selectObserver) { + selectObserver.disconnect(); + } + if(menuObserver) { + menuObserver.disconnect(); + } }, observeChanges: function() { if('MutationObserver' in window) { - observer = new MutationObserver(function(mutations) { - module.debug('DOM tree modified, updating selector cache'); + selectObserver = new MutationObserver(function(mutations) { + module.debug('<select> modified, recreating menu'); + module.setup.select(); + }); + menuObserver = new MutationObserver(function(mutations) { + module.debug('Menu modified, updating selector cache'); module.refresh(); }); - observer.observe(element, { - childList : true, - subtree : true + if(module.has.input()) { + selectObserver.observe($input[0], { + childList : true, + subtree : true + }); + } + if(module.has.menu()) { + menuObserver.observe($menu[0], { + childList : true, + subtree : true + }); + } + module.debug('Setting up mutation observer', selectObserver, menuObserver); + } + }, + + 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) + ; + $userChoices = ($userChoices === undefined) + ? $userChoice + : $userChoices.add($userChoice) + ; + module.verbose('Creating user choices for value', value, $userChoice); + } }); - module.debug('Setting up mutation observer', observer); + 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) + ; } }, - setup: { + search: function(query) { + query = (query !== undefined) + ? query + : module.get.query() + ; + module.verbose('Searching for query', query); + module.filter(query); + }, + select: { + firstUnfiltered: function() { + module.verbose('Selecting first non-filtered element'); + module.remove.selectedItem(); + $item + .not(selector.unselectable) + .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, + 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.is.search() && !module.is.searchable() ) { + 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) ; } @@ -3088,46 +4407,106 @@ $.fn.dropdown = function(parameters) { }, select: function() { var - selectValues = module.get.selectValues() + selectValues = module.get.selectValues() ; module.debug('Dropdown initialized on a select', selectValues); - // see if select exists inside a dropdown - $input = $module; - if($input.parents(selector.dropdown).size() > 0) { - module.debug('Creating dropdown menu only from template'); + 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.find('.' + className.dropdown).size() === 0) { - $('<div />') - .addClass(className.menu) - .html( settings.templates.menu( selectValues )) - .appendTo($module) - ; + if( !module.has.menu() ) { + module.create.menu(); } + $menu = $module.children(selector.menu); + module.setup.menu(selectValues); } else { - module.debug('Creating entire dropdown from template'); + module.debug('Creating entire dropdown from select'); $module = $('<div />') .attr('class', $input.attr('class') ) .addClass(className.selection) .addClass(className.dropdown) - .html( settings.templates.dropdown(selectValues) ) + .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(); + }, + + refreshSelectors: function() { + module.verbose('Refreshing selector cache'); $text = $module.find(selector.text); $search = $module.find(selector.search); $input = $module.find(selector.input); - $menu = $module.children(selector.menu); - $item = $menu.find(selector.item); + $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) + ; + $module + .removeData(metadata.defaultText) + .removeData(metadata.defaultValue) + .removeData(metadata.placeholderText) + ; }, toggle: function() { @@ -3140,26 +4519,44 @@ $.fn.dropdown = function(parameters) { } }, - show: function() { - module.debug('Checking if dropdown can show'); - if( !module.is.active() ) { - module.animate.show(function() { - if( module.can.click() ) { - module.bind.intent(); - } - module.set.visible(); - }); - $.proxy(settings.onShow, element)(); + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.can.show() && !module.is.active() ) { + module.debug('Showing dropdown'); + if(module.is.multiple() && !module.has.search() && module.is.allFiltered()) { + return true; + } + if(module.has.message() && !(module.has.maxSelections() || module.has.allResultsFiltered()) ) { + module.remove.message(); + } + if(settings.onShow.call(element) !== false) { + module.animate.show(function() { + if( module.can.click() ) { + module.bind.intent(); + } + module.set.visible(); + callback.call(element); + }); + } } }, - hide: function() { + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; if( module.is.active() ) { module.debug('Hiding dropdown'); - module.animate.hide(function() { - module.remove.visible(); - }); - $.proxy(settings.onHide, element)(); + if(settings.onHide.call(element) !== false) { + module.animate.hide(function() { + module.remove.visible(); + callback.call(element); + }); + } } }, @@ -3167,36 +4564,41 @@ $.fn.dropdown = function(parameters) { module.verbose('Finding other dropdowns to hide'); $allModules .not($module) - .has(selector.menu + ':visible:not(.' + className.animating + ')') + .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.find(selector.menu) + $subMenus = $menu.children(selector.item).find(selector.menu) ; + module.verbose('Hiding sub menus', $subMenus); $subMenus.transition('hide'); }, bind: { - keyboardEvents: function() { - module.debug('Binding keyboard events'); - $module - .on('keydown' + eventNamespace, module.event.keydown) - ; - if( module.is.searchable() ) { - $module - .on(module.get.inputEvent(), selector.search, module.event.input) - ; + 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 { + else if( module.is.single() ) { $module .on('touchstart' + eventNamespace, module.event.test.toggle) ; @@ -3205,20 +4607,56 @@ $.fn.dropdown = function(parameters) { .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('Mouse detected binding mouse events'); + 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, selector.menu, module.event.menu.activate) - .on('mouseup' + eventNamespace, selector.menu, module.event.menu.deactivate) - .on('focus' + eventNamespace, selector.search, module.event.searchFocus) + .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('click' + eventNamespace, selector.search, module.show) - .on('blur' + eventNamespace, selector.search, module.event.searchBlur) + .on('focus' + 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) ; } @@ -3250,12 +4688,12 @@ $.fn.dropdown = function(parameters) { module.verbose('Binding hide intent event to document'); if(hasTouch) { $document - .on('touchstart' + eventNamespace, module.event.test.touch) - .on('touchmove' + eventNamespace, module.event.test.touch) + .on('touchstart' + elementNamespace, module.event.test.touch) + .on('touchmove' + elementNamespace, module.event.test.touch) ; } $document - .on('click' + eventNamespace, module.event.test.hide) + .on('click' + elementNamespace, module.event.test.hide) ; } }, @@ -3265,204 +4703,367 @@ $.fn.dropdown = function(parameters) { module.verbose('Removing hide intent event from document'); if(hasTouch) { $document - .off('touchstart' + eventNamespace) - .off('touchmove' + eventNamespace) + .off('touchstart' + elementNamespace) + .off('touchmove' + elementNamespace) ; } $document - .off('click' + eventNamespace) + .off('click' + elementNamespace) ; } }, - filter: function(searchTerm) { + filter: function(query) { var - $results = $(), - exactRegExp = new RegExp('(?:\s|^)' + searchTerm, 'i'), - fullTextRegExp = new RegExp(searchTerm, 'i'), - allItemsFiltered, - $filteredItems - ; - $item - .each(function(){ - var - $choice = $(this), - text = ( $choice.data(metadata.text) !== undefined ) - ? $choice.data(metadata.text) - : (settings.preserveHTML) - ? $choice.html() - : $choice.text(), - value = ( $choice.data(metadata.value) !== undefined) - ? $choice.data(metadata.value) - : (typeof text === 'string') - ? text.toLowerCase() - : text - ; - if( exactRegExp.test( text ) || exactRegExp.test( value ) ) { - $results = $results.add($choice); - } - else if(settings.fullTextSearch) { - if( fullTextRegExp.test( text ) || fullTextRegExp.test( value ) ) { - $results = $results.add($choice); + 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) { + 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.message(); + } + if(settings.allowAdditions) { + module.add.userSuggestion(query); + } + if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) { + module.show(); + } + } ; - $filteredItems = $item.not($results); - allItemsFiltered = ($filteredItems.size() == $item.size()); + if(settings.useLabels && module.has.maxSelections()) { + return; + } + if(settings.apiSettings) { + if( module.can.useAPI() ) { + module.queryRemote(searchTerm, function() { + afterFiltered(); + }); + } + else { + module.error(error.noAPI); + } + } + else { + module.filterItems(searchTerm); + afterFiltered(); + } + }, - module.remove.filteredItem(); - module.remove.selectedItem(); - $filteredItems - .addClass(className.filtered) + queryRemote: function(query, callback) { + var + apiSettings = { + errorDuration : false, + 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(); + } + } ; - $item - .not('.' + className.filtered) - .eq(0) - .addClass(className.selected) + if( !$module.api('get request') ) { + module.setup.api(); + } + apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings); + $module + .api('setting', apiSettings) + .api('query') ; - if(allItemsFiltered) { - module.hide(); + }, + + filterItems: function(query) { + var + searchTerm = (query !== undefined) + ? query + : module.get.query(), + results = null, + escapedTerm = module.escape.regExp(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 && 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 && 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) + ; } }, - focusSearch: function() { - if( module.is.search() ) { - $search - .focus() + 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; + }, + + filterActive: function() { + if(settings.useLabels) { + $item.filter('.' + className.active) + .addClass(className.filtered) + ; + } + }, + + focusSearch: function() { + if( module.is.search() && !module.is.focusedOnSearch() ) { + $search[0].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.size() > 0) + ; + if( module.has.query() ) { + if(hasSelected) { + module.debug('Forcing partial selection to selected item', $selectedItem); + module.event.item.click.call($selectedItem); + return; + } + else { + module.remove.searchTerm(); + } } + module.hide(); }, event: { - // prevents focus callback from occuring on mousedown - mousedown: function() { - activated = true; - }, - mouseup: function() { - activated = false; + change: function() { + if(!internalChange) { + module.debug('Input changed, updating selection'); + module.set.selected(); + } }, focus: function() { - if(!activated && module.is.hidden()) { + if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) { module.show(); } }, + click: function(event) { + var + $target = $(event.target) + ; + // focus search + if($target.is($module) && !module.is.focusedOnSearch()) { + module.focusSearch(); + } + }, blur: function(event) { - if(!activated) { + pageLostFocus = (document.activeElement === this); + if(!activated && !pageLostFocus) { + module.remove.activeLabel(); module.hide(); } }, - searchFocus: function() { + // prevents focus callback from occurring on mousedown + mousedown: function() { activated = true; - module.show(); }, - searchBlur: function(event) { - if(!itemActivated) { - module.hide(); - } + mouseup: function() { + activated = false; }, - input: function(event) { - var - query = $search.val() - ; - if(module.is.searchSelection()) { - if( module.can.show() ) { - module.show(); + search: { + focus: function() { + activated = true; + if(module.is.multiple()) { + module.remove.activeLabel(); } - module.set.filtered(); - } - module.filter(query); - }, - keydown: function(event) { - var - $selectedItem = $item.not(className.filtered).filter('.' + className.selected).eq(0), - $visibleItems = $item.not('.' + className.filtered), - pressedKey = event.which, - keys = { - enter : 13, - escape : 27, - upArrow : 38, - downArrow : 40 - }, - selectedClass = className.selected, - currentIndex = $visibleItems.index( $selectedItem ), - hasSelectedItem = ($selectedItem.size() > 0), - $nextItem, - newIndex - ; - // default to activated choice if no selection present - if(!hasSelectedItem) { - $selectedItem = $item.filter('.' + className.active).eq(0); - hasSelectedItem = ($selectedItem.size() > 0); - } - // close shortcuts - if(pressedKey == keys.escape) { - module.verbose('Escape key pressed, closing dropdown'); - module.hide(); - } - // result shortcuts - if(module.is.visible()) { - if(pressedKey == keys.enter && hasSelectedItem) { - module.verbose('Enter key pressed, choosing selected item'); - $.proxy(module.event.item.click, $selectedItem)(event); - event.preventDefault(); - return false; + if(settings.showOnFocus) { + module.search(); + module.show(); } - else if(pressedKey == keys.upArrow) { - if(!hasSelectedItem) { - $nextItem = $visibleItems.eq(0); - } - else { - $nextItem = $selectedItem.prevAll(selector.item + ':not(.' + className.filtered + ')').eq(0); - } - if(currentIndex !== 0) { - module.verbose('Up key pressed, changing active item'); - $item - .removeClass(selectedClass) - ; - $nextItem - .addClass(selectedClass) - ; - module.set.scrollPosition($nextItem); + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(!itemActivated && !pageLostFocus) { + if(module.is.multiple()) { + module.remove.activeLabel(); + module.hide(); } - event.preventDefault(); - } - else if(pressedKey == keys.downArrow) { - if(!hasSelectedItem) { - $nextItem = $visibleItems.eq(0); + else if(settings.forceSelection) { + module.forceSelection(); } else { - $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0); + module.hide(); } - if(currentIndex + 1 < $visibleItems.size() ) { - module.verbose('Down key pressed, changing active item'); - $item - .removeClass(selectedClass) - ; - $nextItem - .addClass(selectedClass) - ; - module.set.scrollPosition($nextItem); + } + else if(pageLostFocus) { + if(settings.forceSelection) { + module.forceSelection(); } - event.preventDefault(); } } - else { - if(pressedKey == keys.enter) { - module.show(); + }, + icon: { + click: function(event) { + module.toggle(); + event.stopPropagation(); + } + }, + 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) { - if( module.determine.eventInMenu(event, module.toggle) ) { + var + toggleBehavior = (module.is.multiple()) + ? module.show + : module.toggle + ; + if( module.determine.eventOnElement(event, toggleBehavior) ) { event.preventDefault(); } }, touch: function(event) { - module.determine.eventInMenu(event, function() { + module.determine.eventOnElement(event, function() { if(event.type == 'touchstart') { - module.timer = setTimeout(module.hide, settings.delay.touch); + module.timer = setTimeout(function() { + module.hide(); + }, settings.delay.touch); } else if(event.type == 'touchmove') { clearTimeout(module.timer); @@ -3474,78 +5075,362 @@ $.fn.dropdown = function(parameters) { module.determine.eventInModule(event, module.hide); } }, - menu: { - activate: function() { + mousedown: function() { itemActivated = true; }, - deactivate: function() { + mouseup: function() { itemActivated = false; } }, item: { mouseenter: function(event) { var - $currentMenu = $(this).children(selector.menu), - $otherMenus = $(this).siblings(selector.item).children(selector.menu) + $subMenu = $(this).children(selector.menu), + $otherMenus = $(this).siblings(selector.item).children(selector.menu) ; - if( $currentMenu.size() > 0 ) { + if( $subMenu.length > 0 ) { clearTimeout(module.itemTimer); module.itemTimer = setTimeout(function() { + module.verbose('Showing sub-menu', $subMenu); $.each($otherMenus, function() { module.animate.hide(false, $(this)); }); - module.verbose('Showing sub-menu', $currentMenu); - module.animate.show(false, $currentMenu); + module.animate.show(false, $subMenu); }, settings.delay.show); event.preventDefault(); } }, - mouseleave: function(event) { var - $currentMenu = $(this).children(selector.menu) + $subMenu = $(this).children(selector.menu) ; - if($currentMenu.size() > 0) { + if($subMenu.length > 0) { clearTimeout(module.itemTimer); module.itemTimer = setTimeout(function() { - module.verbose('Hiding sub-menu', $currentMenu); - module.animate.hide(false, $currentMenu); + module.verbose('Hiding sub-menu', $subMenu); + module.animate.hide(false, $subMenu); }, settings.delay.hide); } }, - + touchend: function() { + }, click: function (event) { var - $choice = $(this), - text = ( $choice.data(metadata.text) !== undefined ) - ? $choice.data(metadata.text) - : (settings.preserveHTML) - ? $choice.html() - : $choice.text(), - value = ( $choice.data(metadata.value) !== undefined) - ? $choice.data(metadata.value) - : (typeof text === 'string') - ? text.toLowerCase() - : text, - callback = function() { - module.remove.searchTerm(); - module.remove.filteredItem(); - module.determine.selectAction(text, value); - }, - openingSubMenu = ($choice.find(selector.menu).size() > 0) + $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) ; - if( !openingSubMenu ) { - callback(); + if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) { + if(!settings.useLabels) { + module.remove.filteredItem(); + module.remove.searchTerm(); + 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); + } + } + } }, - resetStyle: function() { - $(this).removeAttr('style'); + 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 +')').andSelf() + : $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()), + $nextItem, + isSubMenuItem, + newIndex + ; + // 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(); + } + + // left arrow (hide sub-menu) + 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); + } + 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); + } + 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.verbose('Down key pressed, showing dropdown'); + module.show(); + event.preventDefault(); + } + } + } + else { + if( module.is.selection() && !module.is.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: { @@ -3553,19 +5438,27 @@ $.fn.dropdown = function(parameters) { module.verbose('Determining action', settings.action); if( $.isFunction( module.action[settings.action] ) ) { module.verbose('Triggering preset action', settings.action, text, value); - module.action[ settings.action ](text, value); + module.action[ settings.action ].call(this, text, value); } else if( $.isFunction(settings.action) ) { module.verbose('Triggering user action', settings.action, text, value); - settings.action(text, value); + settings.action.call(this, text, value); } else { module.error(error.action, settings.action); } }, eventInModule: function(event, callback) { - callback = callback || function(){}; - if( $(event.target).closest($module).size() === 0 ) { + 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; @@ -3575,9 +5468,18 @@ $.fn.dropdown = function(parameters) { return false; } }, - eventInMenu: function(event, callback) { - callback = callback || function(){}; - if( $(event.target).closest($menu).size() === 0 ) { + eventOnElement: function(event, callback) { + var + $target = $(event.target), + $label = $target.closest(selector.siblingLabel), + notOnLabel = ($module.find($label).length === 0), + notInMenu = ($target.closest($menu).length === 0) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(notOnLabel && notInMenu) { module.verbose('Triggering event', callback); callback(); return true; @@ -3593,28 +5495,25 @@ $.fn.dropdown = function(parameters) { nothing: function() {}, - hide: function() { - module.hide(); - }, - - select: function(text, value) { + activate: function(text, value) { value = (value !== undefined) ? value : text ; - module.set.selected(value); - module.set.value(value); - module.hide(); + if( module.can.activate( $(this) ) ) { + module.set.selected(value, $(this)); + if(module.is.multiple() && !module.is.allFiltered()) { + return; + } + else { + module.hideAndClear(); + } + } }, - activate: function(text, value) { - value = (value !== undefined) - ? value - : text - ; - module.set.selected(value); - module.set.value(value); - module.hide(); + select: function(text, value) { + // mimics action.activate but does not select text + module.action.activate.call(this); }, combo: function(text, value) { @@ -3622,21 +5521,178 @@ $.fn.dropdown = function(parameters) { ? value : text ; - module.set.selected(value); + module.set.selected(value, $(this)); + module.hideAndClear(); + }, + + hide: function(text, value) { module.set.value(value); - module.hide(); + 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(characterCount) { + return (characterCount * settings.glyphWidth) + 'em'; + }, + 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() { - return ($input.size() > 0) - ? $input.val() - : $module.data(metadata.value) + var + value = ($input.length > 0) + ? $input.val() + : $module.data(metadata.value) + ; + // prevents placeholder element from being selected when multiple + if($.isArray(value) && value.length === 1 && value[0] === '') { + return ''; + } + return 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]; + } + remoteValues = {}; + $.each(values, function(index, value) { + var + name = module.read.remoteData(value) + ; + module.verbose('Restoring value from session data', name, value); + remoteValues[value] = (name) + ? name + : value + ; + }); + } + return remoteValues; + }, + choiceText: function($choice, preserveHTML) { + preserveHTML = (preserveHTML !== undefined) + ? preserveHTML + : settings.preserveHTML + ; + if($choice) { + if($choice.find(selector.menu).length > 0) { + module.verbose('Retreiving text of element with sub-menu'); + $choice = $choice.clone(); + $choice.find(selector.menu).remove(); + $choice.find(selector.menuIcon).remove(); + } + return ($choice.data(metadata.text) !== undefined) + ? $choice.data(metadata.text) + : (preserveHTML) + ? $.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() { @@ -3655,158 +5711,453 @@ $.fn.dropdown = function(parameters) { }, selectValues: function() { var - select = { - values : {} - } + select = {} ; + select.values = []; $module .find('option') .each(function() { var - name = $(this).html(), - value = ( $(this).attr('value') !== undefined ) - ? $(this).attr('value') + $option = $(this), + name = $option.html(), + disabled = $option.attr('disabled'), + value = ( $option.attr('value') !== undefined ) + ? $option.attr('value') : name ; - if(value === '') { + if(settings.placeholder === 'auto' && value === '') { select.placeholder = name; } else { - select.values[value] = name; + select.values.push({ + name : name, + value : value, + disabled : disabled + }); } }) ; - module.debug('Retrieved values from select', select); + 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('Retreived 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 + $selectedItem = false, + shouldSearch, + isMultiple ; value = (value !== undefined) ? value - : ( module.get.value() !== undefined) - ? module.get.value() + : ( module.get.values() !== undefined) + ? module.get.values() : module.get.text() ; - strict = (value === '' || value === 0) + shouldSearch = (isMultiple) + ? (value.length > 0) + : (value !== undefined && value !== null) + ; + isMultiple = (module.is.multiple() && $.isArray(value)); + strict = (value === '' || value === 0) ? true : strict || false ; - if(value !== undefined) { + if(shouldSearch) { $item .each(function() { var $choice = $(this), - optionText = ( $choice.data(metadata.text) !== undefined ) - ? $choice.data(metadata.text) - : (settings.preserveHTML) - ? $choice.html() - : $choice.text(), - optionValue = ( $choice.data(metadata.value) !== undefined ) - ? $choice.data(metadata.value) - : (typeof optionText === 'string') - ? optionText.toLowerCase() - : optionText + optionText = module.get.choiceText($choice), + optionValue = module.get.choiceValue($choice, optionText) ; - if(strict) { - module.verbose('Ambiguous dropdown value using strict type check', $choice, value); - if( optionValue === value ) { - $selectedItem = $(this); + // 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( !$selectedItem && optionText === value ) { - $selectedItem = $(this); + } + 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( optionValue == value ) { + if( String(optionValue) == String(value) || optionText == value) { module.verbose('Found select item by value', optionValue, value); - $selectedItem = $(this); - } - else if( !$selectedItem && optionText == value ) { - module.verbose('Found select item by text', optionText, value); - $selectedItem = $(this); + $selectedItem = $choice; + return true; } } }) ; } - else { - value = module.get.text(); + 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 $selectedItem || false; + return true; } }, restore: { defaults: function() { + module.clear(); module.restore.defaultText(); module.restore.defaultValue(); }, defaultText: function() { var - defaultText = $module.data(metadata.defaultText) + defaultText = module.get.defaultText(), + placeholderText = module.get.placeholderText ; - module.debug('Restoring default text', defaultText); - module.set.text(defaultText); + 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); + } }, defaultValue: function() { var - defaultValue = $module.data(metadata.defaultValue) + defaultValue = module.get.defaultValue() ; if(defaultValue !== undefined) { module.debug('Restoring default value', defaultValue); - module.set.selected(defaultValue); - module.set.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 occuring on initial load + module.set.initialLoad(); + if(settings.apiSettings) { + if(settings.saveRemoteData) { + module.restore.remoteValues(); + } + else { + module.clearValue(); + } + } + 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() { - $module.data(metadata.defaultValue, module.get.value() ); + var + value = module.get.value() + ; + module.verbose('Saving default value as', value); + $module.data(metadata.defaultValue, value); }, defaultText: function() { - $module.data(metadata.defaultText, $text.text() ); + 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()) { + 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) + ; + $menu + .scrollTop(newScroll) + ; } }, set: { filtered: function() { - $text.addClass(className.filtered); + 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(searchValue.length), + 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); + } + }, + 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.searchable() ) { - module.debug('Searchable dropdown initialized'); + if( module.has.search() ) { + module.debug('Added tabindex to searchable dropdown'); $search .val('') .attr('tabindex', 0) ; $menu - .attr('tabindex', '-1') + .attr('tabindex', -1) ; } else { - module.debug('Simple selection dropdown initialized'); - if(!$module.attr('tabindex') ) { + module.debug('Added tabindex to dropdown'); + if( $module.attr('tabindex') === undefined) { $module .attr('tabindex', 0) ; $menu - .attr('tabindex', '-1') + .attr('tabindex', -1) ; } } }, - scrollPosition: function($item) { + 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); + } + }, + scrollPosition: function($item, forceScroll) { var - $item = $item || module.get.item(), - hasActive = ($item && $item.size() > 0), edgeTolerance = 5, + $menu, + hasActive, offset, itemHeight, itemOffset, @@ -3816,57 +6167,158 @@ $.fn.dropdown = function(parameters) { abovePage, belowPage ; - if($item && hasActive) { - menuHeight = $menu.height(); - itemHeight = $item.height(); + + $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; - belowPage = menuScroll + menuHeight < (offset + edgeTolerance); - abovePage = ((offset - edgeTolerance) < menuScroll); - if(abovePage || belowPage) { - module.debug('Scrolling to active item'); - $menu - .scrollTop(offset) - ; + 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 == 'combo') { - module.debug('Changing combo button text', text, $combo); - if(settings.preserveHTML) { - $combo.html(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 { - $combo.text(text); + 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); + } } } - else if(settings.action !== 'select') { - module.debug('Changing text', text, $text); - $text - .removeClass(className.filtered) - .removeClass(className.placeholder) + }, + 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; + } + }) ; - if(settings.preserveHTML) { - $text.html(text); + } + // 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); + } + }, + direction: function($menu) { + if(settings.direction == 'auto') { + if(module.is.onScreen($menu)) { + module.remove.upward($menu); } else { - $text.text(text); + module.set.upward($menu); } } + else if(settings.direction == 'upward') { + module.set.upward($menu); + } }, - value: function(value) { - module.debug('Adding selected value to hidden input', value, $input); - if($input.size() > 0) { + upward: function($menu) { + var $element = $menu || $module; + $element.addClass(className.upward); + }, + value: function(value, text, $selected) { + var + hasInput = ($input.length > 0), + isAddition = !module.has.value(value), + currentValue = module.get.values(), + stringValue = (value !== undefined) + ? String(value) + : value, + newValue + ; + if(hasInput) { + if(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', value, currentValue); + internalChange = true; $input .val(value) - .trigger('change') ; + 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.data(metadata.value, value); + module.verbose('Storing value in metadata', value, $input); + if(value !== 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() { @@ -3874,31 +6326,274 @@ $.fn.dropdown = function(parameters) { .addClass(className.active) ; }, + multiple: function() { + $module.addClass(className.multiple); + }, visible: function() { $module.addClass(className.visible); }, - selected: function(value) { + exactly: function(value, $selectedItem) { + module.debug('Setting selected to exact values'); + module.clear(); + module.set.selected(value, $selectedItem); + }, + selected: function(value, $selectedItem) { var - $selectedItem = module.get.item(value), - selectedText + isMultiple = module.is.multiple(), + $userSelectedItem ; - if($selectedItem) { - module.debug('Setting selected menu item to', $selectedItem); - selectedText = ($selectedItem.data(metadata.text) !== undefined) - ? $selectedItem.data(metadata.text) - : (settings.preserveHTML) - ? $selectedItem.html() - : $selectedItem.text() - ; + $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.single()) { module.remove.activeItem(); module.remove.selectedItem(); - $selectedItem - .addClass(className.active) + } + 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, + $label + ; + $label = $('<a />') + .addClass(className.label) + .attr('data-value', value) + .html(templates.label(value, text)) + ; + $label = settings.onLabelCreate.call($label, value, text); + + if(module.has.label(value)) { + module.debug('Label already exists, skipping', value); + 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 + $option = $input.find('option[value="' + value + '"]'), + hasOption = ($option.length > 0) + ; + if(hasOption) { + return; + } + // temporarily disconnect observer + if(selectObserver) { + selectObserver.disconnect(); + module.verbose('Temporarily disconnecting mutation observer', value); + } + if( module.is.single() ) { + module.verbose('Removing previous user addition'); + $input.find('option.' + className.addition).remove(); + } + $('<option/>') + .prop('value', value) + .addClass(className.addition) + .html(value) + .appendTo($input) + ; + module.verbose('Adding user addition as an <option>', value); + if(selectObserver) { + selectObserver.observe($input[0], { + childList : true, + subtree : true + }); + } + }, + 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; + } + $item + .removeClass(className.selected) + ; + if(hasUserSuggestion) { + html = settings.templates.addition( module.add.variables(message.addResult, value) ); + $addition + .html(html) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) + .removeClass(className.filtered) .addClass(className.selected) ; - module.set.text(selectedText); - $.proxy(settings.onChange, element)(value, selectedText, $selectedItem); + module.verbose('Replacing user suggestion with new value', $addition); + } + else { + $addition = module.create.userChoice(value); + $addition + .prependTo($menu) + .addClass(className.selected) + ; + module.verbose('Adding item choice to menu corresponding with user choice addition', $addition); + } + }, + 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(); } }, @@ -3906,6 +6601,19 @@ $.fn.dropdown = function(parameters) { active: function() { $module.removeClass(className.active); }, + activeLabel: function() { + $module.find(selector.label).removeClass(className.active); + }, + 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); }, @@ -3913,78 +6621,398 @@ $.fn.dropdown = function(parameters) { $item.removeClass(className.active); }, filteredItem: function() { - $item.removeClass(className.filtered); + 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); + } + }, + optionValue: function(value) { + var + $option = $input.find('option[value="' + value + '"]'), + hasOption = ($option.length > 0) + ; + if(!hasOption || !$option.hasClass(className.addition)) { + return; + } + // temporarily disconnect observer + if(selectObserver) { + selectObserver.disconnect(); + module.verbose('Temporarily disconnecting mutation observer', value); + } + $option.remove(); + module.verbose('Removing user addition as an <option>', value); + if(selectObserver) { + selectObserver.observe($input[0], { + childList : true, + subtree : true + }); + } + }, + message: function() { + $menu.children(selector.message).remove(); }, searchTerm: function() { + module.verbose('Cleared search term'); $search.val(''); + module.set.filtered(); + }, + 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-value="' + 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; + } + 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.searchable() ) { + if( module.has.search() ) { module.debug('Searchable dropdown initialized'); $search - .attr('tabindex', '-1') + .removeAttr('tabindex') ; $menu - .attr('tabindex', '-1') + .removeAttr('tabindex') ; } else { module.debug('Simple selection dropdown initialized'); $module - .attr('tabindex', '-1') + .removeAttr('tabindex') ; $menu - .attr('tabindex', '-1') + .removeAttr('tabindex') ; } } }, - is: { + has: { search: function() { - return $module.hasClass(className.search); + return ($search.length > 0); }, - searchable: function() { - return ($search.size() > 0); + selectInput: function() { + return ( $input.is('select') ); }, - searchSelection: function() { - return ( module.is.searchable() && $search.parent().is($module) ); + 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); }, - selection: function() { - return $module.hasClass(className.selection); + input: function() { + return ($input.length > 0); }, - animating: function($subMenu) { - return ($subMenu) - ? $subMenu.is(':animated') || $subMenu.transition && $subMenu.transition('is animating') - : $menu.is(':animated') || $menu.transition && $menu.transition('is animating') + 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 + $labels = $module.find(selector.label) ; + return ($labels.filter('[data-value="' + value +'"]').length > 0); }, + maxSelections: function() { + return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections); + }, + allResultsFiltered: function() { + return ($item.filter(selector.unselectable).length === $item.length); + }, + 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); }, - visible: function($subMenu) { + alreadySetup: function() { + return ($module.is('select') && $module.parent(selector.dropdown).length > 0 && $module.prev().length === 0); + }, + animating: function($subMenu) { return ($subMenu) - ? $subMenu.is(':visible') - : $menu.is(':visible') + ? $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()) && !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() + } + }; + 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); + }, + 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.is(':hidden') - : $menu.is(':hidden') + ? $subMenu.hasClass(className.visible) + : $menu.hasClass(className.visible) ; } }, 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.hasClass(className.disabled); + return !module.is.disabled() && (module.has.items() || module.has.message()); + }, + useAPI: function() { + return $.fn.api !== undefined; } }, @@ -3998,62 +7026,42 @@ $.fn.dropdown = function(parameters) { module.hideSubMenus(); module.hideOthers(); module.set.active(); - module.set.scrollPosition(); - } + }, + transition + ; + callback = $.isFunction(callback) + ? callback + : function(){} ; - 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(settings.transition == 'none') { - $.proxy(callback, element)(); + if(transition == 'none') { + start(); + $currentMenu.transition('show'); + callback.call(element); } else if($.fn.transition !== undefined && $module.transition('is supported')) { $currentMenu .transition({ - animation : settings.transition + ' in', + animation : transition + ' in', debug : settings.debug, verbose : settings.verbose, duration : settings.duration, queue : true, onStart : start, onComplete : function() { - $.proxy(callback, element)(); + callback.call(element); } }) ; } - else if(settings.transition == 'slide down') { - start(); - $currentMenu - .hide() - .clearQueue() - .children() - .clearQueue() - .css('opacity', 0) - .delay(50) - .animate({ - opacity : 1 - }, settings.duration, 'easeOutQuad', module.event.resetStyle) - .end() - .slideDown(100, 'easeOutQuad', function() { - $.proxy(module.event.resetStyle, this)(); - $.proxy(callback, element)(); - }) - ; - } - else if(settings.transition == 'fade') { - start(); - $currentMenu - .hide() - .clearQueue() - .fadeIn(settings.duration, function() { - $.proxy(module.event.resetStyle, this)(); - $.proxy(callback, element)(); - }) - ; - } else { - module.error(error.transition, settings.transition); + module.error(error.noTransition, transition); } } }, @@ -4069,62 +7077,40 @@ $.fn.dropdown = function(parameters) { if( module.can.click() ) { module.unbind.intent(); } - module.focusSearch(); module.remove.active(); - } + }, + transition = module.get.transition($subMenu) + ; + callback = $.isFunction(callback) + ? callback + : function(){} ; - callback = callback || function(){}; if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) { module.verbose('Doing menu hide animation', $currentMenu); - if(settings.transition == 'none') { - $.proxy(callback, element)(); + if(transition == 'none') { + start(); + $currentMenu.transition('hide'); + callback.call(element); } else if($.fn.transition !== undefined && $module.transition('is supported')) { $currentMenu .transition({ - animation : settings.transition + ' out', + animation : transition + ' out', duration : settings.duration, debug : settings.debug, verbose : settings.verbose, queue : true, onStart : start, onComplete : function() { - $.proxy(callback, element)(); + if(settings.direction == 'auto') { + module.remove.upward($subMenu); + } + callback.call(element); } }) ; } - else if(settings.transition == 'slide down') { - start(); - $currentMenu - .show() - .clearQueue() - .children() - .clearQueue() - .css('opacity', 1) - .animate({ - opacity : 0 - }, 100, 'easeOutQuad', module.event.resetStyle) - .end() - .delay(50) - .slideUp(100, 'easeOutQuad', function() { - $.proxy(module.event.resetStyle, this)(); - $.proxy(callback, element)(); - }) - ; - } - else if(settings.transition == 'fade') { - start(); - $currentMenu - .show() - .clearQueue() - .fadeOut(150, function() { - $.proxy(module.event.resetStyle, this)(); - $.proxy(callback, element)(); - }) - ; - } else { module.error(error.transition); } @@ -4132,6 +7118,21 @@ $.fn.dropdown = function(parameters) { } }, + 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'); @@ -4145,6 +7146,13 @@ $.fn.dropdown = function(parameters) { } }, + escape: { + regExp: function(text) { + text = String(text); + return text.replace(regExp.escape, '\\$&'); + } + }, + setting: function(name, value) { module.debug('Changing setting', name, value); if( $.isPlainObject(name) ) { @@ -4214,7 +7222,7 @@ $.fn.dropdown = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -4309,85 +7317,181 @@ $.fn.dropdown = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } }) ; - return (returnedValue !== undefined) ? returnedValue - : this + : $allModules ; }; $.fn.dropdown.settings = { - debug : false, - verbose : true, - performance : true, + 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(){}) + - on : 'click', - action : 'activate', + apiSettings : false, + 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 - allowTab : true, - fullTextSearch : true, - preserveHTML : true, + 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 - delay : { - show : 200, - hide : 300, - touch : 50 + match : 'both', // what to match against with search selection (both, text, or label) + fullTextSearch : false, // search anywhere in value + + 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 + + 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 + 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.0714, // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width + + // label settings on multi-select + label: { + transition : 'scale', + duration : 200, + variation : false }, - transition : 'slide down', - duration : 250, + // delay before event + delay : { + hide : 300, + show : 200, + search : 20, + touch : 50 + }, /* Callbacks */ - - onChange : function(value, text){}, - onShow : function(){}, - onHide : function(){}, + 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', - error : { - action : 'You called a dropdown action that was not defined', - method : 'The method you called is not defined.', - transition : 'The requested transition was not found' + 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' }, - metadata: { - defaultText : 'defaultText', - defaultValue : 'defaultValue', - text : 'text', - value : 'value' + 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, + }, + + 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 + name : 'name', // displayed dropdown text + value : 'value' // actual dropdown value + }, + + 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 : { - dropdown : '.ui.dropdown', - text : '> .text:not(.icon)', - input : '> input[type="hidden"], > select', - search : '> input.search, .menu > .search > input, .menu > input.search', - menu : '.menu', - item : '.item' + addition : '.addition', + dropdown : '.ui.dropdown', + 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', + text : '> .text:not(.icon)', + unselectable : '.disabled, .filtered' }, className : { active : 'active', + addition : 'addition', animating : 'animating', disabled : 'disabled', dropdown : 'ui dropdown', filtered : 'filtered', + hidden : 'hidden transition', + item : 'item', + label : 'ui label', + loading : 'loading', menu : 'menu', + message : 'message', + multiple : 'multiple', placeholder : 'default', search : 'search', selected : 'selected', selection : 'selection', + upward : 'upward', visible : 'visible' } @@ -4395,17 +7499,8 @@ $.fn.dropdown.settings = { /* Templates */ $.fn.dropdown.settings.templates = { - menu: function(select) { - var - placeholder = select.placeholder || false, - values = select.values || {}, - html = '' - ; - $.each(select.values, function(value, name) { - html += '<div class="item" data-value="' + value + '">' + name + '</div>'; - }); - return html; - }, + + // generates dropdown from select values dropdown: function(select) { var placeholder = select.placeholder || false, @@ -4420,30 +7515,714 @@ $.fn.dropdown.settings.templates = { html += '<div class="text"></div>'; } html += '<div class="menu">'; - $.each(select.values, function(value, name) { - html += '<div class="item" data-value="' + value + '">' + name + '</div>'; + $.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) { + html += '<div class="item" data-value="' + option[fields.value] + '">' + option[fields.name] + '</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 ); -/* Dependencies */ -$.extend( $.easing, { - easeOutQuad: function (x, t, b, c, d) { - return -c *(t/=d)*(t-2) + b; +/*! + * # Semantic UI 2.1.6 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.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); + }, + + 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) + .data(metadata.url, url) + ; + 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: { + 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) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 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', + + 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' + }, -})( jQuery, window , document ); -/* - * # Semantic - Modal + 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.colors || 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.colors || undefined, + portrait : settings.brandedUI, + title : settings.brandedUI + }; + } + } + }, + + templates: { + iframe : function(url, parameters) { + return '' + + '<iframe src="' + url + '?' + parameters + '"' + + ' 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 : true, + onPause : function() {}, + onPlay : function() {}, + onStop : function() {} + +}; + + + +})( jQuery, window, document ); + +/*! + * # Semantic UI 2.1.6 - Modal * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -4516,37 +8295,14 @@ $.fn.modal = function(parameters) { initialize: function() { module.verbose('Initializing dimmer', $context); - if($.fn.dimmer === undefined) { - module.error(error.dimmer); - return; - } - - id = module.get.uniqueID(); - elementNamespace = '.' + id; - - $dimmable = $context - .dimmer({ - debug : settings.debug, - dimmerName : 'modals', - closable : false, - useCSS : true, - duration : { - show : settings.duration * 0.9, - hide : settings.duration * 1.1 - } - }) - ; - if(settings.detachable) { - $dimmable.dimmer('add content', $module); - } - - $dimmer = $dimmable.dimmer('get dimmer'); + module.create.id(); + module.create.dimmer(); module.refreshModals(); - module.verbose('Attaching close events', $close); module.bind.events(); - module.observeChanges(); - + if(settings.observeChanges) { + module.observeChanges(); + } module.instantiate(); }, @@ -4558,6 +8314,50 @@ $.fn.modal = function(parameters) { ; }, + create: { + dimmer: function() { + var + defaultSettings = { + debug : settings.debug, + dimmerName : 'modals', + duration : { + show : settings.duration, + hide : settings.duration + } + }, + dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) + ; + if(settings.inverted) { + dimmerSettings.variation = (dimmerSettings.variation !== undefined) + ? dimmerSettings.variation + ' inverted' + : 'inverted' + ; + } + if($.fn.dimmer === undefined) { + module.error(error.dimmer); + return; + } + module.debug('Creating dimmer with settings', dimmerSettings); + $dimmable = $context.dimmer(dimmerSettings); + if(settings.detachable) { + module.verbose('Modal is detachable, moving content into dimmer'); + $dimmable.dimmer('add content', $module); + } + else { + module.set.undetached(); + } + if(settings.blurring) { + $dimmable.addClass(className.blurring); + } + $dimmer = $dimmable.dimmer('get dimmer'); + }, + id: function() { + id = (Math.random().toString(16) + '000000000').substr(2,8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + } + }, + destroy: function() { module.verbose('Destroying previous modal'); $module @@ -4604,7 +8404,7 @@ $.fn.modal = function(parameters) { ? module[event] : module.toggle ; - if($toggle.size() > 0) { + if($toggle.length > 0) { module.debug('Attaching modal events to element', selector, event); $toggle .off(eventNamespace) @@ -4618,8 +8418,11 @@ $.fn.modal = function(parameters) { bind: { events: function() { - $close - .on('click' + eventNamespace, module.event.close) + module.verbose('Attaching events'); + $module + .on('click' + eventNamespace, selector.close, module.event.close) + .on('click' + eventNamespace, selector.approve, module.event.approve) + .on('click' + eventNamespace, selector.deny, module.event.deny) ; $window .on('resize' + elementNamespace, module.event.resize) @@ -4628,36 +8431,36 @@ $.fn.modal = function(parameters) { }, get: { - uniqueID: function() { + id: function() { return (Math.random().toString(16) + '000000000').substr(2,8); } }, event: { - close: function() { - module.verbose('Closing element pressed'); - if( $(this).is(selector.approve) ) { - if($.proxy(settings.onApprove, element)() !== false) { - module.hide(); - } - else { - module.verbose('Approve callback returned false cancelling hide'); - } - } - else if( $(this).is(selector.deny) ) { - if($.proxy(settings.onDeny, element)() !== false) { - module.hide(); - } - else { - module.verbose('Deny callback returned false cancelling hide'); - } + approve: function() { + if(settings.onApprove.call(element, $(this)) === false) { + module.verbose('Approve callback returned false cancelling hide'); + return; } - else { - module.hide(); + module.hide(); + }, + deny: function() { + if(settings.onDeny.call(element, $(this)) === false) { + module.verbose('Deny callback returned false cancelling hide'); + return; } + module.hide(); + }, + close: function() { + module.hide(); }, click: function(event) { - if( $(event.target).closest($module).size() === 0 ) { + var + $target = $(event.target), + isInModal = ($target.closest(selector.modal).length > 0), + isInDOM = $.contains(document.documentElement, event.target) + ; + if(!isInModal && isInDOM) { module.debug('Dimmer clicked, hiding all modals'); if( module.is.active() ) { module.remove.clickaway(); @@ -4712,7 +8515,6 @@ $.fn.modal = function(parameters) { : function(){} ; module.refreshModals(); - module.showDimmer(); module.showModal(callback); }, @@ -4722,9 +8524,6 @@ $.fn.modal = function(parameters) { : function(){} ; module.refreshModals(); - if( !module.othersActive() ) { - module.hideDimmer(); - } module.hideModal(callback); }, @@ -4733,49 +8532,44 @@ $.fn.modal = function(parameters) { ? callback : function(){} ; - if( !module.is.active() ) { + if( module.is.animating() || !module.is.active() ) { + + module.showDimmer(); + module.cacheSizes(); + module.set.position(); + module.set.screenHeight(); + module.set.type(); + module.set.clickaway(); - if( !settings.allowMultiple && $otherModals.filter(':visible').size() > 0) { - module.debug('Other modals visible, queueing show animation'); + if( !settings.allowMultiple && module.others.active() ) { module.hideOthers(module.showModal); } else { - $.proxy(settings.onShow, element)(); + settings.onShow.call(element); if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { module.debug('Showing modal with css animations'); - module.cacheSizes(); - module.set.position(); - module.set.screenHeight(); - module.set.type(); - module.set.clickaway(); $module .transition({ - debug : settings.debug, - animation : settings.transition + ' in', - queue : false, - duration : settings.duration, + debug : settings.debug, + animation : settings.transition + ' in', + queue : settings.queue, + duration : settings.duration, + useFailSafe : true, onComplete : function() { - $.proxy(settings.onVisible, element)(); + settings.onVisible.apply(element); module.add.keyboardShortcuts(); module.save.focus(); module.set.active(); - module.set.autofocus(); + if(settings.autofocus) { + module.set.autofocus(); + } callback(); } }) ; } else { - module.debug('Showing modal with javascript'); - $module - .fadeIn(settings.duration, settings.easing, function() { - $.proxy(settings.onVisible, element)(); - module.add.keyboardShortcuts(); - module.save.focus(); - module.set.active(); - callback(); - }) - ; + module.error(error.noTransition); } } } @@ -4784,8 +8578,49 @@ $.fn.modal = function(parameters) { } }, + hideModal: function(callback, keepDimmed) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.debug('Hiding modal'); + if(settings.onHide.call(element, $(this)) === false) { + module.verbose('Hide callback returned false cancelling hide'); + return; + } + + if( module.is.animating() || module.is.active() ) { + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.remove.active(); + $module + .transition({ + debug : settings.debug, + animation : settings.transition + ' out', + queue : settings.queue, + duration : settings.duration, + useFailSafe : true, + onStart : function() { + if(!module.others.active() && !keepDimmed) { + module.hideDimmer(); + } + module.remove.keyboardShortcuts(); + }, + onComplete : function() { + settings.onHidden.call(element); + module.restore.focus(); + callback(); + } + }) + ; + } + else { + module.error(error.noTransition); + } + } + }, + showDimmer: function() { - if( !$dimmable.dimmer('is active') ) { + if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) { module.debug('Showing dimmer'); $dimmable.dimmer('show'); } @@ -4795,91 +8630,61 @@ $.fn.modal = function(parameters) { }, hideDimmer: function() { - if( !($dimmable.dimmer('is active') || $dimmable.dimmer('is animating')) ) { - module.debug('Dimmer is not visible cannot hide'); - return; - } - module.debug('Hiding dimmer'); - $dimmable.dimmer('hide', function() { - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) { + $dimmable.dimmer('hide', function() { module.remove.clickaway(); module.remove.screenHeight(); - } - }); - }, - - hideModal: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - module.debug('Hiding modal'); - $.proxy(settings.onHide, element)(); - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - module.remove.active(); - $module - .transition({ - debug : settings.debug, - animation : settings.transition + ' out', - queue : false, - duration : settings.duration, - onStart : function() { - module.remove.keyboardShortcuts(); - }, - onComplete : function() { - $.proxy(settings.onHidden, element)(); - module.restore.focus(); - callback(); - } - }) - ; + }); } else { - module.remove.active(); - module.remove.keyboardShortcuts(); - $module - .fadeOut(settings.duration, settings.easing, function() { - $.proxy(settings.onHidden, element)(); - module.restore.focus(); - callback(); - }) - ; + module.debug('Dimmer is not visible cannot hide'); + return; } }, hideAll: function(callback) { + var + $visibleModals = $allModals.filter('.' + className.active + ', .' + className.animating) + ; callback = $.isFunction(callback) ? callback : function(){} ; - if( $allModals.is(':visible') ) { + if( $visibleModals.length > 0 ) { module.debug('Hiding all visible modals'); module.hideDimmer(); - $allModals - .filter(':visible') - .modal('hide modal', callback) + $visibleModals + .modal('hide modal', callback) ; } }, hideOthers: function(callback) { + var + $visibleModals = $otherModals.filter('.' + className.active + ', .' + className.animating) + ; callback = $.isFunction(callback) ? callback : function(){} ; - if( $otherModals.is(':visible') ) { + if( $visibleModals.length > 0 ) { module.debug('Hiding other modals', $otherModals); - $otherModals - .filter(':visible') - .modal('hide modal', callback) + $visibleModals + .modal('hide modal', callback, true) ; } }, - othersActive: function() { - return ($otherModals.filter('.' + className.active).size() > 0); + others: { + active: function() { + return ($otherModals.filter('.' + className.active).length > 0); + }, + animating: function() { + return ($otherModals.filter('.' + className.animating).length > 0); + } }, + add: { keyboardShortcuts: function() { module.verbose('Adding keyboard shortcuts'); @@ -4897,7 +8702,7 @@ $.fn.modal = function(parameters) { restore: { focus: function() { - if($focusedElement && $focusedElement.size() > 0) { + if($focusedElement && $focusedElement.length > 0) { $focusedElement.focus(); } } @@ -4914,14 +8719,18 @@ $.fn.modal = function(parameters) { ; } }, - screenHeight: function() { - if(module.cache.height > module.cache.pageHeight) { - module.debug('Removing page height'); - $body - .css('height', '') - ; + bodyStyle: function() { + if($body.attr('style') === '') { + module.verbose('Removing style attribute'); + $body.removeAttr('style'); } }, + screenHeight: function() { + module.debug('Removing page height'); + $body + .css('height', '') + ; + }, keyboardShortcuts: function() { module.verbose('Removing keyboard shortcuts'); $document @@ -4952,7 +8761,7 @@ $.fn.modal = function(parameters) { can: { fit: function() { - return (module.cache.height < module.cache.contextHeight); + return ( ( module.cache.height + (settings.padding * 2) ) < module.cache.contextHeight); } }, @@ -4977,15 +8786,15 @@ $.fn.modal = function(parameters) { set: { autofocus: function() { - if(settings.autofocus) { - var - $inputs = $module.find(':input:visible'), - $autofocus = $inputs.filter('[autofocus]'), - $input = ($autofocus.size() > 0) - ? $autofocus - : $inputs - ; - $input.first().focus(); + var + $inputs = $module.find(':input').filter(':visible'), + $autofocus = $inputs.filter('[autofocus]'), + $input = ($autofocus.length > 0) + ? $autofocus.first() + : $inputs.first() + ; + if($input.length > 0) { + $input.focus(); } }, clickaway: function() { @@ -4996,15 +8805,15 @@ $.fn.modal = function(parameters) { } }, screenHeight: function() { - if(module.cache.height > module.cache.pageHeight) { + if( module.can.fit() ) { + $body.css('height', ''); + } + else { module.debug('Modal is taller than page content, resizing page height'); $body - .css('height', module.cache.height + settings.padding) + .css('height', module.cache.height + (settings.padding * 2) ) ; } - else { - $body.css('height', ''); - } }, active: function() { $module.addClass(className.active); @@ -5016,7 +8825,7 @@ $.fn.modal = function(parameters) { type: function() { if(module.can.fit()) { module.verbose('Modal fits on screen'); - if(!module.othersActive) { + if(!module.others.active() && !module.others.animating()) { module.remove.scrolling(); } } @@ -5043,6 +8852,9 @@ $.fn.modal = function(parameters) { }) ; } + }, + undetached: function() { + $dimmable.addClass(className.undetached); } }, @@ -5115,7 +8927,7 @@ $.fn.modal = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -5209,7 +9021,7 @@ $.fn.modal = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -5224,38 +9036,59 @@ $.fn.modal = function(parameters) { $.fn.modal.settings = { - name : 'Modal', - namespace : 'modal', + name : 'Modal', + namespace : 'modal', - debug : false, - verbose : true, - performance : true, + debug : false, + verbose : false, + performance : true, + + observeChanges : false, - allowMultiple : false, - detachable : true, - closable : true, - autofocus : true, + allowMultiple : false, + detachable : true, + closable : true, + autofocus : true, - context : 'body', + inverted : false, + blurring : false, - duration : 500, - easing : 'easeOutExpo', - offset : 0, - transition : 'scale', + dimmerSettings : { + closable : false, + useCSS : true + }, - padding : 30, - onShow : function(){}, - onHide : function(){}, + context : 'body', - onVisible : function(){}, - onHidden : function(){}, + queue : false, + duration : 500, + offset : 0, + transition : 'scale', - onApprove : function(){ return true; }, - onDeny : function(){ return true; }, + // padding with edge of page + padding : 50, + + // called before show animation + onShow : function(){}, + + // called after show animation + onVisible : function(){}, + + // called before hide animation + onHide : function(){ return true; }, + + // called after hide animation + onHidden : function(){}, + + // called after approve selector match + onApprove : function(){ return true; }, + + // called after deny selector match + onDeny : function(){ return true; }, selector : { - close : '.close, .actions .button', + close : '> .close', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel', modal : '.ui.modal' @@ -5266,20 +9099,23 @@ $.fn.modal.settings = { notFound : 'The element you specified could not be found' }, className : { - active : 'active', - scrolling : 'scrolling' + active : 'active', + animating : 'animating', + blurring : 'blurring', + scrolling : 'scrolling', + undetached : 'undetached' } }; -})( jQuery, window , document ); +})( jQuery, window, document ); -/* - * # Semantic - Nag +/*! + * # Semantic UI 2.1.6 - Nag * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -5352,11 +9188,9 @@ $.fn.nag = function(parameters) { module.verbose('Initializing element'); $module + .on('click' + eventNamespace, selector.close, module.dismiss) .data(moduleNamespace, module) ; - $close - .on('click' + eventNamespace, module.dismiss) - ; if(settings.detachable && $module.parent()[0] !== $context[0]) { $module @@ -5472,6 +9306,10 @@ $.fn.nag = function(parameters) { window.localStorage.setItem(key, value); module.debug('Value stored using local storage', key, value); } + else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) { + window.sessionStorage.setItem(key, value); + module.debug('Value stored using session storage', key, value); + } else if($.cookie !== undefined) { $.cookie(key, value, options); module.debug('Value stored using cookie', key, value, options); @@ -5488,6 +9326,9 @@ $.fn.nag = function(parameters) { if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { storedValue = window.localStorage.getItem(key); } + else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) { + storedValue = window.sessionStorage.getItem(key); + } // get by cookie else if($.cookie !== undefined) { storedValue = $.cookie(key); @@ -5504,9 +9345,12 @@ $.fn.nag = function(parameters) { var options = module.get.storageOptions() ; - if(settings.storageMethod == 'local' && window.store !== undefined) { + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { window.localStorage.removeItem(key); } + else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) { + window.sessionStorage.removeItem(key); + } // store by cookie else if($.cookie !== undefined) { $.removeCookie(key, options); @@ -5586,7 +9430,7 @@ $.fn.nag = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -5681,7 +9525,7 @@ $.fn.nag = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -5699,7 +9543,7 @@ $.fn.nag.settings = { name : 'Nag', debug : false, - verbose : true, + verbose : false, performance : true, namespace : 'Nag', @@ -5730,8 +9574,9 @@ $.fn.nag.settings = { value : 'dismiss', error: { - noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state', - method : 'The method you called is not defined.' + noCookieStorage : '$.cookie is not included. A storage solution is required.', + noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state', + method : 'The method you called is not defined.' }, className : { @@ -5750,14 +9595,14 @@ $.fn.nag.settings = { }; -})( jQuery, window , document ); +})( jQuery, window, document ); -/* - * # Semantic - Popup - * http://github.com/jlukic/semantic-ui/ +/*! + * # Semantic UI 2.1.6 - Popup + * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -5771,10 +9616,12 @@ $.fn.popup = function(parameters) { var $allModules = $(this), $document = $(document), + $window = $(window), + $body = $('body'), moduleSelector = $allModules.selector || '', - hasTouch = ('ontouchstart' in document.documentElement), + hasTouch = (true), time = new Date().getTime(), performance = [], @@ -5806,16 +9653,18 @@ $.fn.popup = function(parameters) { ? $(settings.target) : $module, - $window = $(window), - $body = $('body'), $popup, $offsetParent, searchDepth = 0, triedPositions = false, + openedWithTouch = false, element = this, instance = $module.data(moduleNamespace), + + elementNamespace, + id, module ; @@ -5823,36 +9672,17 @@ $.fn.popup = function(parameters) { // binds events initialize: function() { - module.debug('Initializing module', $module); - module.refresh(); - if(settings.on == 'click') { - $module - .on('click' + eventNamespace, module.toggle) - ; - } - else if( module.get.startEvent() ) { - $module - .on(module.get.startEvent() + eventNamespace, module.event.start) - .on(module.get.endEvent() + eventNamespace, module.event.end) - ; - } - if(settings.target) { - module.debug('Target set to element', $target); - } - $window - .on('resize' + eventNamespace, module.event.resize) - ; - if( !module.exists() ) { + module.debug('Initializing', $module); + module.createID(); + module.bind.events(); + if( !module.exists() && settings.preserve) { module.create(); } - else if(settings.hoverable) { - module.bind.popup(); - } module.instantiate(); }, instantiate: function() { - module.verbose('Storing instance of module', module); + module.verbose('Storing instance', module); instance = module; $module .data(moduleNamespace, instance) @@ -5861,28 +9691,41 @@ $.fn.popup = function(parameters) { refresh: function() { if(settings.popup) { - $popup = $(settings.popup); + $popup = $(settings.popup).eq(0); } else { if(settings.inline) { - $popup = $target.next(settings.selector.popup); + $popup = $target.nextAll(selector.popup).eq(0); + settings.popup = $popup; } } if(settings.popup) { $popup.addClass(className.loading); - $offsetParent = $popup.offsetParent(); + $offsetParent = module.get.offsetParent(); $popup.removeClass(className.loading); + if(settings.movePopup && module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) { + module.debug('Moving popup to the same offset parent as activating element'); + $popup + .detach() + .appendTo($offsetParent) + ; + } } else { $offsetParent = (settings.inline) - ? $target.offsetParent() + ? module.get.offsetParent($target) + : module.has.popup() + ? module.get.offsetParent($popup) : $body ; } - if( $offsetParent.is('html') ) { - module.debug('Page is popups offset parent'); + if( $offsetParent.is('html') && $offsetParent[0] !== $body[0] ) { + module.debug('Setting page as offset parent'); $offsetParent = $body; } + if( module.get.variation() ) { + module.set.variation(); + } }, reposition: function() { @@ -5892,9 +9735,15 @@ $.fn.popup = function(parameters) { destroy: function() { module.debug('Destroying previous module'); + // remove element only if was created dynamically if($popup && !settings.preserve) { module.removePopup(); } + // clear all timeouts + clearTimeout(module.hideTimer); + clearTimeout(module.showTimer); + // remove events + $window.off(elementNamespace); $module .off(eventNamespace) .removeData(moduleNamespace) @@ -5909,11 +9758,9 @@ $.fn.popup = function(parameters) { : settings.delay ; clearTimeout(module.hideTimer); - module.showTimer = setTimeout(function() { - if( module.is.hidden() && !( module.is.active() && module.is.dropdown()) ) { - module.show(); - } - }, delay); + if(!openedWithTouch) { + module.showTimer = setTimeout(module.show, delay); + } }, end: function() { var @@ -5922,27 +9769,37 @@ $.fn.popup = function(parameters) { : settings.delay ; clearTimeout(module.showTimer); - module.hideTimer = setTimeout(function() { - if( module.is.visible() ) { - module.hide(); - } - }, delay); + module.hideTimer = setTimeout(module.hide, delay); + }, + touchstart: function(event) { + openedWithTouch = true; + module.show(); }, resize: function() { if( module.is.visible() ) { module.set.position(); } + }, + hideGracefully: function(event) { + // don't close on clicks inside popup + if(event && $(event.target).closest(selector.popup).length === 0) { + module.debug('Click occurred outside popup hiding popup'); + module.hide(); + } + else { + module.debug('Click was inside popup, keeping popup open'); + } } }, // generates popup html from metadata create: function() { var - html = $module.data(metadata.html) || settings.html, - variation = $module.data(metadata.variation) || settings.variation, - title = $module.data(metadata.title) || settings.title, - content = $module.data(metadata.content) || $module.attr('title') || settings.content + html = module.get.html(), + title = module.get.title(), + content = module.get.content() ; + if(html || content || title) { module.debug('Creating pop-up html'); if(!html) { @@ -5953,14 +9810,9 @@ $.fn.popup = function(parameters) { } $popup = $('<div/>') .addClass(className.popup) - .addClass(variation) + .data(metadata.activator, $module) .html(html) ; - if(variation) { - $popup - .addClass(variation) - ; - } if(settings.inline) { module.verbose('Inserting popup element inline', $popup); $popup @@ -5973,14 +9825,26 @@ $.fn.popup = function(parameters) { .appendTo( $context ) ; } + module.refresh(); + module.set.variation(); + if(settings.hoverable) { module.bind.popup(); } - $.proxy(settings.onCreate, $popup)(element); + settings.onCreate.call($popup, element); } - else if($target.next(settings.selector.popup).size() !== 0) { - module.verbose('Pre-existing popup found, reverting to inline'); + else if($target.next(selector.popup).length !== 0) { + module.verbose('Pre-existing popup found'); settings.inline = true; + settings.popups = $target.next(selector.popup).data(metadata.activator, $module); + module.refresh(); + if(settings.hoverable) { + module.bind.popup(); + } + } + else if(settings.popup) { + $(settings.popup).data(metadata.activator, $module); + module.verbose('Used popup specified in settings'); module.refresh(); if(settings.hoverable) { module.bind.popup(); @@ -5991,13 +9855,18 @@ $.fn.popup = function(parameters) { } }, + createID: function() { + id = (Math.random().toString(16) + '000000000').substr(2,8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + }, + // determines popup state toggle: function() { module.debug('Toggling pop-up'); if( module.is.hidden() ) { module.debug('Popup is hidden, showing pop-up'); module.unbind.close(); - module.hideAll(); module.show(); } else { @@ -6007,26 +9876,39 @@ $.fn.popup = function(parameters) { }, show: function(callback) { - callback = $.isFunction(callback) ? callback : function(){}; + callback = callback || function(){}; module.debug('Showing pop-up', settings.transition); - if(!settings.preserve && !settings.popup) { - module.refresh(); - } - if( !module.exists() ) { - module.create(); - } - if( $popup && module.set.position() ) { - module.save.conditions(); - module.animate.show(callback); + if(module.is.hidden() && !( module.is.active() && module.is.dropdown()) ) { + if( !module.exists() ) { + module.create(); + } + if(settings.onShow.call($popup, element) === false) { + module.debug('onShow callback returned false, cancelling popup animation'); + return; + } + else if(!settings.preserve && !settings.popup) { + module.refresh(); + } + if( $popup && module.set.position() ) { + module.save.conditions(); + if(settings.exclusive) { + module.hideAll(); + } + module.animate.show(callback); + } } }, hide: function(callback) { - callback = $.isFunction(callback) ? callback : function(){}; - module.remove.visible(); - module.unbind.close(); - if( module.is.visible() ) { + callback = callback || function(){}; + if( module.is.visible() || module.is.animating() ) { + if(settings.onHide.call($popup, element) === false) { + module.debug('onHide callback returned false, cancelling popup animation'); + return; + } + module.remove.visible(); + module.unbind.close(); module.restore.conditions(); module.animate.hide(callback); } @@ -6034,38 +9916,37 @@ $.fn.popup = function(parameters) { hideAll: function() { $(selector.popup) - .filter(':visible') - .popup('hide') + .filter('.' + className.visible) + .each(function() { + $(this) + .data(metadata.activator) + .popup('hide') + ; + }) ; }, - - hideGracefully: function(event) { - // don't close on clicks inside popup - if(event && $(event.target).closest(selector.popup).size() === 0) { - module.debug('Click occurred outside popup hiding popup'); - module.hide(); - } - else { - module.debug('Click was inside popup, keeping popup open'); - } - }, - exists: function() { if(!$popup) { return false; } if(settings.inline || settings.popup) { - return ( $popup.size() !== 0 ); + return ( module.has.popup() ); } else { - return ( $popup.closest($context).size() ); + return ( $popup.closest($context).length >= 1 ) + ? true + : false + ; } }, removePopup: function() { - module.debug('Removing popup'); - $.proxy(settings.onRemove, $popup)(element); - $popup.remove(); + if( module.has.popup() && !settings.popup) { + module.debug('Removing popup', $popup); + $popup.remove(); + $popup = undefined; + settings.onRemove.call($popup, element); + } }, save: { @@ -6081,7 +9962,6 @@ $.fn.popup = function(parameters) { }, restore: { conditions: function() { - element.blur(); if(module.cache && module.cache.title) { $module.attr('title', module.cache.title); module.verbose('Restoring original attributes', module.cache.title); @@ -6103,27 +9983,23 @@ $.fn.popup = function(parameters) { duration : settings.duration, onComplete : function() { module.bind.close(); - $.proxy(callback, $popup)(element); - $.proxy(settings.onVisible, $popup)(element); + callback.call($popup, element); + settings.onVisible.call($popup, element); } }) ; } else { - module.set.visible(); - $popup - .stop() - .fadeIn(settings.duration, settings.easing, function() { - module.bind.close(); - $.proxy(callback, element)(); - }) - ; + module.error(error.noTransition); } - $.proxy(settings.onShow, $popup)(element); }, hide: function(callback) { callback = $.isFunction(callback) ? callback : function(){}; module.debug('Hiding pop-up'); + if(settings.onHide.call($popup, element) === false) { + module.debug('onHide callback returned false, cancelling popup animation'); + return; + } if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { $popup .transition({ @@ -6134,26 +10010,119 @@ $.fn.popup = function(parameters) { verbose : settings.verbose, onComplete : function() { module.reset(); - $.proxy(callback, $popup)(element); - $.proxy(settings.onHidden, $popup)(element); + callback.call($popup, element); + settings.onHidden.call($popup, element); } }) ; } else { - $popup - .stop() - .fadeOut(settings.duration, settings.easing, function() { - module.reset(); - callback(); - }) - ; + module.error(error.noTransition); } - $.proxy(settings.onHide, $popup)(element); + } + }, + + change: { + content: function(html) { + $popup.html(html); } }, get: { + html: function() { + $module.removeData(metadata.html); + return $module.data(metadata.html) || settings.html; + }, + title: function() { + $module.removeData(metadata.title); + return $module.data(metadata.title) || settings.title; + }, + content: function() { + $module.removeData(metadata.content); + return $module.data(metadata.content) || $module.attr('title') || settings.content; + }, + variation: function() { + $module.removeData(metadata.variation); + return $module.data(metadata.variation) || settings.variation; + }, + popup: function() { + return $popup; + }, + popupOffset: function() { + return $popup.offset(); + }, + calculations: function() { + var + targetElement = $target[0], + targetPosition = (settings.inline || (settings.popup && settings.movePopup)) + ? $target.position() + : $target.offset(), + calculations = {}, + screen + ; + calculations = { + // element which is launching popup + target : { + element : $target[0], + width : $target.outerWidth(), + height : $target.outerHeight(), + top : targetPosition.top, + left : targetPosition.left, + margin : {} + }, + // popup itself + popup : { + width : $popup.outerWidth(), + height : $popup.outerHeight() + }, + // offset container (or 3d context) + parent : { + width : $offsetParent.outerWidth(), + height : $offsetParent.outerHeight() + }, + // screen boundaries + screen : { + scroll: { + top : $window.scrollTop(), + left : $window.scrollLeft() + }, + width : $window.width(), + height : $window.height() + } + }; + + // add in container calcs if fluid + if( settings.setFluidWidth && module.is.fluid() ) { + calculations.container = { + width: $popup.parent().outerWidth() + }; + calculations.popup.width = calculations.container.width; + } + + // add in margins if inline + calculations.target.margin.top = (settings.inline) + ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10) + : 0 + ; + calculations.target.margin.left = (settings.inline) + ? module.is.rtl() + ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-right'), 10) + : parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-left') , 10) + : 0 + ; + // calculate screen boundaries + screen = calculations.screen; + calculations.boundary = { + top : screen.scroll.top, + bottom : screen.scroll.top + screen.height, + left : screen.scroll.left, + right : screen.scroll.left + screen.width + }; + return calculations; + }, + id: function() { + return id; + }, startEvent: function() { if(settings.on == 'hover') { return 'mouseenter'; @@ -6163,6 +10132,9 @@ $.fn.popup = function(parameters) { } return false; }, + scrollEvent: function() { + return 'scroll'; + }, endEvent: function() { if(settings.on == 'hover') { return 'mouseleave'; @@ -6172,41 +10144,55 @@ $.fn.popup = function(parameters) { } return false; }, - offstagePosition: function(position) { + distanceFromBoundary: function(offset, calculations) { var - position = position || false, - boundary = { - top : $(window).scrollTop(), - bottom : $(window).scrollTop() + $(window).height(), - left : 0, - right : $(window).width() - }, - popup = { - width : $popup.width(), - height : $popup.height(), - offset : $popup.offset() - }, - offstage = {}, - offstagePositions = [] - ; - if(popup.offset && position) { - module.verbose('Checking if outside viewable area', popup.offset); - offstage = { - top : (popup.offset.top < boundary.top), - bottom : (popup.offset.top + popup.height > boundary.bottom), - right : (popup.offset.left + popup.width > boundary.right), - left : (popup.offset.left < boundary.left) + distanceFromBoundary = {}, + popup, + boundary + ; + offset = offset || module.get.offset(); + calculations = calculations || module.get.calculations(); + + // shorthand + popup = calculations.popup; + boundary = calculations.boundary; + + if(offset) { + distanceFromBoundary = { + top : (offset.top - boundary.top), + left : (offset.left - boundary.left), + right : (boundary.right - (offset.left + popup.width) ), + bottom : (boundary.bottom - (offset.top + popup.height) ) }; + module.verbose('Distance from boundaries determined', offset, distanceFromBoundary); } - // return only boundaries that have been surpassed - $.each(offstage, function(direction, isOffstage) { - if(isOffstage) { - offstagePositions.push(direction); + return distanceFromBoundary; + }, + offsetParent: function($target) { + var + element = ($target !== undefined) + ? $target[0] + : $module[0], + parentNode = element.parentNode, + $node = $(parentNode) + ; + if(parentNode) { + var + is2D = ($node.css('transform') === 'none'), + isStatic = ($node.css('position') === 'static'), + isHTML = $node.is('html') + ; + while(parentNode && !isHTML && isStatic && is2D) { + parentNode = parentNode.parentNode; + $node = $(parentNode); + is2D = ($node.css('transform') === 'none'); + isStatic = ($node.css('position') === 'static'); + isHTML = $node.is('html'); } - }); - return (offstagePositions.length > 0) - ? offstagePositions.join(' ') - : false + } + return ($node && $node.length > 0) + ? $node + : $() ; }, positions: function() { @@ -6281,123 +10267,134 @@ $.fn.popup = function(parameters) { }, set: { - position: function(position, arrowOffset) { - var - windowWidth = $(window).width(), - windowHeight = $(window).height(), + position: function(position, calculations) { - targetWidth = $target.outerWidth(), - targetHeight = $target.outerHeight(), - - popupWidth = $popup.outerWidth(), - popupHeight = $popup.outerHeight(), - - parentWidth = $offsetParent.outerWidth(), - parentHeight = $offsetParent.outerHeight(), - - distanceAway = settings.distanceAway, - - targetElement = $target[0], + // exit conditions + if($target.length === 0 || $popup.length === 0) { + module.error(error.notFound); + return; + } + var + offset, + distanceAway, + target, + popup, + parent, + positioning, + popupOffset, + distanceFromBoundary + ; - marginTop = (settings.inline) - ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10) - : 0, - marginLeft = (settings.inline) - ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-left'), 10) - : 0, + calculations = calculations || module.get.calculations(); + position = position || $module.data(metadata.position) || settings.position; - target = (settings.inline || settings.popup) - ? $target.position() - : $target.offset(), + offset = $module.data(metadata.offset) || settings.offset; + distanceAway = settings.distanceAway; - positioning, - offstagePosition - ; - position = position || $module.data(metadata.position) || settings.position; - arrowOffset = arrowOffset || $module.data(metadata.offset) || settings.offset; + // shorthand + target = calculations.target; + popup = calculations.popup; + parent = calculations.parent; - if(searchDepth == settings.maxSearchDepth && settings.lastResort) { - module.debug('Using last resort position to display', settings.lastResort); - position = settings.lastResort; + if(target.width === 0 && target.height === 0 && !(target.element instanceof SVGGraphicsElement)) { + module.debug('Popup target is hidden, no action taken'); + return false; } if(settings.inline) { - module.debug('Adding targets margin to calculation'); + module.debug('Adding margin to calculation', target.margin); if(position == 'left center' || position == 'right center') { - arrowOffset += marginTop; - distanceAway += -marginLeft; + offset += target.margin.top; + distanceAway += -target.margin.left; } else if (position == 'top left' || position == 'top center' || position == 'top right') { - arrowOffset += marginLeft; - distanceAway -= marginTop; + offset += target.margin.left; + distanceAway -= target.margin.top; } else { - arrowOffset += marginLeft; - distanceAway += marginTop; + offset += target.margin.left; + distanceAway += target.margin.top; } } - module.debug('Calculating popup positioning', position); - switch(position) { + + module.debug('Determining popup position from calculations', position, calculations); + + if (module.is.rtl()) { + position = position.replace(/left|right/g, function (match) { + return (match == 'left') + ? 'right' + : 'left' + ; + }); + module.debug('RTL: Popup position updated', position); + } + + // if last attempt use specified last resort position + if(searchDepth == settings.maxSearchDepth && typeof settings.lastResort === 'string') { + position = settings.lastResort; + } + + switch (position) { case 'top left': positioning = { top : 'auto', - bottom : parentHeight - target.top + distanceAway, - left : target.left + arrowOffset, + bottom : parent.height - target.top + distanceAway, + left : target.left + offset, right : 'auto' }; break; case 'top center': positioning = { - bottom : parentHeight - target.top + distanceAway, - left : target.left + (targetWidth / 2) - (popupWidth / 2) + arrowOffset, + bottom : parent.height - target.top + distanceAway, + left : target.left + (target.width / 2) - (popup.width / 2) + offset, top : 'auto', right : 'auto' }; break; case 'top right': positioning = { - bottom : parentHeight - target.top + distanceAway, - right : parentWidth - target.left - targetWidth - arrowOffset, + bottom : parent.height - target.top + distanceAway, + right : parent.width - target.left - target.width - offset, top : 'auto', left : 'auto' }; break; case 'left center': positioning = { - top : target.top + (targetHeight / 2) - (popupHeight / 2) + arrowOffset, - right : parentWidth - target.left + distanceAway, + top : target.top + (target.height / 2) - (popup.height / 2) + offset, + right : parent.width - target.left + distanceAway, left : 'auto', bottom : 'auto' }; break; case 'right center': positioning = { - top : target.top + (targetHeight / 2) - (popupHeight / 2) + arrowOffset, - left : target.left + targetWidth + distanceAway, + top : target.top + (target.height / 2) - (popup.height / 2) + offset, + left : target.left + target.width + distanceAway, bottom : 'auto', right : 'auto' }; break; case 'bottom left': positioning = { - top : target.top + targetHeight + distanceAway, - left : target.left + arrowOffset, + top : target.top + target.height + distanceAway, + left : target.left + offset, bottom : 'auto', right : 'auto' }; break; case 'bottom center': positioning = { - top : target.top + targetHeight + distanceAway, - left : target.left + (targetWidth / 2) - (popupWidth / 2) + arrowOffset, + top : target.top + target.height + distanceAway, + left : target.left + (target.width / 2) - (popup.width / 2) + offset, bottom : 'auto', right : 'auto' }; break; case 'bottom right': positioning = { - top : target.top + targetHeight + distanceAway, - right : parentWidth - target.left - targetWidth - arrowOffset, + top : target.top + target.height + distanceAway, + right : parent.width - target.left - target.width - offset, left : 'auto', bottom : 'auto' }; @@ -6407,6 +10404,8 @@ $.fn.popup = function(parameters) { module.error(error.invalidPosition, position); } + module.debug('Calculated popup positioning values', positioning); + // tentatively place on stage $popup .css(positioning) @@ -6414,41 +10413,57 @@ $.fn.popup = function(parameters) { .addClass(position) .addClass(className.loading) ; - // check if is offstage - offstagePosition = module.get.offstagePosition(position); - // recursively find new positioning - if(offstagePosition) { - module.debug('Popup cant fit into viewport', offstagePosition); + popupOffset = module.get.popupOffset(); + + // see if any boundaries are surpassed with this tentative position + distanceFromBoundary = module.get.distanceFromBoundary(popupOffset, calculations); + + if( module.is.offstage(distanceFromBoundary, position) ) { + module.debug('Position is outside viewport', position); if(searchDepth < settings.maxSearchDepth) { searchDepth++; position = module.get.nextPosition(position); module.debug('Trying new position', position); return ($popup) - ? module.set.position(position) + ? module.set.position(position, calculations) : false ; } - else if(!settings.lastResort) { - module.debug('Popup could not find a position in view', $popup); - module.error(error.cannotPlace); - module.remove.attempts(); - module.remove.loading(); - module.reset(); - return false; + else { + if(settings.lastResort) { + module.debug('No position found, showing with last position'); + } + else { + module.debug('Popup could not find a position to display', $popup); + module.error(error.cannotPlace, element); + module.remove.attempts(); + module.remove.loading(); + module.reset(); + return false; + } } } - module.debug('Position is on stage', position); module.remove.attempts(); - module.set.fluidWidth(); module.remove.loading(); + if( settings.setFluidWidth && module.is.fluid() ) { + module.set.fluidWidth(calculations); + } return true; }, - fluidWidth: function() { - if( settings.setFluidWidth && $popup.hasClass(className.fluid) ) { - $popup.css('width', $offsetParent.width()); + fluidWidth: function(calculations) { + calculations = calculations || module.get.calculations(); + module.debug('Automatically setting element width to parent width', calculations.parent.width); + $popup.css('width', calculations.container.width); + }, + + variation: function(variation) { + variation = variation || module.get.variation(); + if(variation && module.has.popup() ) { + module.verbose('Adding variation to popup', variation); + $popup.addClass(variation); } }, @@ -6461,6 +10476,13 @@ $.fn.popup = function(parameters) { loading: function() { $popup.removeClass(className.loading); }, + variation: function(variation) { + variation = variation || module.get.variation(); + if(variation) { + module.verbose('Removing variation', variation); + $popup.removeClass(variation); + } + }, visible: function() { $module.removeClass(className.visible); }, @@ -6472,32 +10494,62 @@ $.fn.popup = function(parameters) { }, bind: { + events: function() { + module.debug('Binding popup events to module'); + if(settings.on == 'click') { + $module + .on('click' + eventNamespace, module.toggle) + ; + } + if(settings.on == 'hover' && hasTouch) { + $module + .on('touchstart' + eventNamespace, module.event.touchstart) + ; + } + if( module.get.startEvent() ) { + $module + .on(module.get.startEvent() + eventNamespace, module.event.start) + .on(module.get.endEvent() + eventNamespace, module.event.end) + ; + } + if(settings.target) { + module.debug('Target set to element', $target); + } + $window.on('resize' + elementNamespace, module.event.resize); + }, popup: function() { module.verbose('Allowing hover events on popup to prevent closing'); - if($popup && $popup.size() > 0) { + if( $popup && module.has.popup() ) { $popup .on('mouseenter' + eventNamespace, module.event.start) .on('mouseleave' + eventNamespace, module.event.end) ; } }, - close:function() { - if(settings.hideOnScroll === true || settings.hideOnScroll == 'auto' && settings.on != 'click') { + close: function() { + if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) { $document - .one('touchmove' + eventNamespace, module.hideGracefully) - .one('scroll' + eventNamespace, module.hideGracefully) + .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully) ; $context - .one('touchmove' + eventNamespace, module.hideGracefully) - .one('scroll' + eventNamespace, module.hideGracefully) + .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully) + ; + } + if(settings.on == 'hover' && openedWithTouch) { + module.verbose('Binding popup close event to document'); + $document + .on('touchstart' + elementNamespace, function(event) { + module.verbose('Touched away from popup'); + module.event.hideGracefully.call(element, event); + }) ; } if(settings.on == 'click' && settings.closable) { module.verbose('Binding popup close event to document'); $document - .on('click' + eventNamespace, function(event) { - module.verbose('Pop-up clickaway intent detected'); - $.proxy(module.hideGracefully, element)(event); + .on('click' + elementNamespace, function(event) { + module.verbose('Clicked away from popup'); + module.event.hideGracefully.call(element, event); }) ; } @@ -6506,44 +10558,80 @@ $.fn.popup = function(parameters) { unbind: { close: function() { - if(settings.hideOnScroll === true || settings.hideOnScroll == 'auto' && settings.on != 'click') { + if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) { $document - .off('scroll' + eventNamespace, module.hide) + .off('scroll' + elementNamespace, module.hide) ; $context - .off('scroll' + eventNamespace, module.hide) + .off('scroll' + elementNamespace, module.hide) + ; + } + if(settings.on == 'hover' && openedWithTouch) { + $document + .off('touchstart' + elementNamespace) ; + openedWithTouch = false; } if(settings.on == 'click' && settings.closable) { module.verbose('Removing close event from document'); $document - .off('click' + eventNamespace) + .off('click' + elementNamespace) ; } } }, + has: { + popup: function() { + return ($popup && $popup.length > 0); + } + }, + is: { + offstage: function(distanceFromBoundary, position) { + var + offstage = [] + ; + // return boundaries that have been surpassed + $.each(distanceFromBoundary, function(direction, distance) { + if(distance < -settings.jitter) { + module.debug('Position exceeds allowable distance from edge', direction, distance, position); + offstage.push(direction); + } + }); + if(offstage.length > 0) { + return true; + } + else { + return false; + } + }, active: function() { return $module.hasClass(className.active); }, animating: function() { - return ( $popup && $popup.is(':animated') || $popup.hasClass(className.animating) ); + return ( $popup && $popup.hasClass(className.animating) ); + }, + fluid: function() { + return ( $popup && $popup.hasClass(className.fluid)); }, visible: function() { - return $popup && $popup.is(':visible'); + return $popup && $popup.hasClass(className.visible); }, dropdown: function() { return $module.hasClass(className.dropdown); }, hidden: function() { return !module.is.visible(); + }, + rtl: function () { + return $module.css('direction') == 'rtl'; } }, reset: function() { module.remove.visible(); - if(settings.preserve || settings.popup) { + if(settings.preserve) { if($.fn.transition !== undefined) { $popup .transition('remove transition') @@ -6623,7 +10711,7 @@ $.fn.popup = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -6717,7 +10805,7 @@ $.fn.popup = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -6734,62 +10822,122 @@ $.fn.popup.settings = { name : 'Popup', + // module settings debug : false, - verbose : true, + verbose : false, performance : true, namespace : 'popup', + // callback only when element added to dom onCreate : function(){}, + + // callback before element removed from dom onRemove : function(){}, + // callback before show animation onShow : function(){}, + + // callback after show animation onVisible : function(){}, + + // callback before hide animation onHide : function(){}, + + // callback after hide animation onHidden : function(){}, + // when to show popup + on : 'hover', + + // whether to add touchstart events when using hover + addTouchEvents : true, + + // default position relative to element + position : 'top left', + + // name of variation to use variation : '', + + // whether popup should be moved to context + movePopup : true, + + // element which popup should be relative to + target : false, + + // jq selector or element that should be used as popup + popup : false, + + // popup should remain inline next to activator + inline : false, + + // popup should be removed from page on hide + preserve : false, + + // popup should not close when being hovered on + hoverable : false, + + // explicitly set content content : false, + + // explicitly set html html : false, + + // explicitly set title title : false, - on : 'hover', + // whether automatically close on clickaway when on click closable : true, + + // automatically hide on scroll hideOnScroll : 'auto', + // hide other popups on show + exclusive : false, + + // context to attach popups context : 'body', - position : 'top left', + // position to prefer when calculating new position prefer : 'opposite', + + // specify position to appear even if it doesn't fit lastResort : false, + // delay used to prevent accidental refiring of animations due to user error delay : { - show : 30, - hide : 0 + show : 50, + hide : 70 }, + // whether fluid variation should assign width explicitly setFluidWidth : true, - target : false, - popup : false, - inline : false, - preserve : true, - hoverable : false, - + // transition settings duration : 200, - easing : 'easeOutQuint', transition : 'scale', + // distance away from activating element in px distanceAway : 0, + + // number of pixels an element is allowed to be "offstage" for a position to be chosen (allows for rounding) + jitter : 2, + + // offset on aligning axis from calculated position offset : 0, - maxSearchDepth : 20, + + // maximum times to look for a position before failing (9 positions total) + maxSearchDepth : 15, error: { invalidPosition : 'The position you specified is not a valid position', - cannotPlace : 'No visible position could be found for the popup', - method : 'The method you called is not defined.' + cannotPlace : 'Popup does not fit within the boundaries of the viewport', + method : 'The method you called is not defined.', + noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>', + notFound : 'The target or popup you specified does not exist on the page' }, metadata: { + activator : 'activator', content : 'content', html : 'html', offset : 'offset', @@ -6856,22 +11004,15 @@ $.fn.popup.settings = { }; -// Adds easing -$.extend( $.easing, { - easeOutQuad: function (x, t, b, c, d) { - return -c *(t/=d)*(t-2) + b; - } -}); +})( jQuery, window, document ); -})( jQuery, window , document ); - -/* - * # Semantic - Progress +/*! + * # Semantic UI 2.1.6 - Progress * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -6920,15 +11061,23 @@ $.fn.progress = function(parameters) { element = this, instance = $module.data(moduleNamespace), + + animating = false, + transitionEnd, module ; module = { initialize: function() { - module.debug('Initializing progress', settings); + module.debug('Initializing progress bar', settings); + + module.set.duration(); + module.set.transitionEvent(); + module.read.metadata(); - module.set.initials(); + module.read.settings(); + module.instantiate(); }, @@ -6939,9 +11088,9 @@ $.fn.progress = function(parameters) { .data(moduleNamespace, module) ; }, - destroy: function() { module.verbose('Destroying previous progress for', $module); + clearInterval(instance.interval); module.remove.state(); $module.removeData(moduleNamespace); instance = undefined; @@ -6949,6 +11098,7 @@ $.fn.progress = function(parameters) { reset: function() { module.set.percent(0); + module.set.value(0); }, complete: function() { @@ -6959,111 +11109,187 @@ $.fn.progress = function(parameters) { read: { metadata: function() { - if( $module.data(metadata.percent) ) { - module.verbose('Current percent value set from metadata'); - module.percent = $module.data(metadata.percent); + var + data = { + percent : $module.data(metadata.percent), + total : $module.data(metadata.total), + value : $module.data(metadata.value) + } + ; + if(data.percent) { + module.debug('Current percent value set from metadata', data.percent); + module.set.percent(data.percent); } - if( $module.data(metadata.total) ) { - module.verbose('Total value set from metadata'); - module.total = $module.data(metadata.total); + if(data.total) { + module.debug('Total value set from metadata', data.total); + module.set.total(data.total); } - if( $module.data(metadata.value) ) { - module.verbose('Current value set from metadata'); - module.value = $module.data(metadata.value); + if(data.value) { + module.debug('Current value set from metadata', data.value); + module.set.value(data.value); + module.set.progress(data.value); } }, - currentValue: function() { - return (module.value !== undefined) - ? module.value - : false - ; + settings: function() { + if(settings.total !== false) { + module.debug('Current total set in settings', settings.total); + module.set.total(settings.total); + } + if(settings.value !== false) { + module.debug('Current value set in settings', settings.value); + module.set.value(settings.value); + module.set.progress(module.value); + } + if(settings.percent !== false) { + module.debug('Current percent set in settings', settings.percent); + module.set.percent(settings.percent); + } } }, increment: function(incrementValue) { var - total = module.total || false, - edgeValue, + maxValue, startValue, newValue ; - if(total) { - startValue = module.value || 0; + if( module.has.total() ) { + startValue = module.get.value(); incrementValue = incrementValue || 1; + newValue = startValue + incrementValue; - edgeValue = module.total; - module.debug('Incrementing value by', incrementValue, startValue, edgeValue); - if(newValue > edgeValue ) { - module.debug('Value cannot increment above total', edgeValue); - newValue = edgeValue; + maxValue = module.get.total(); + + module.debug('Incrementing value', startValue, newValue, maxValue); + if(newValue > maxValue ) { + module.debug('Value cannot increment above total', maxValue); + newValue = maxValue; } - module.set.progress(newValue); } else { - startValue = module.percent || 0; + startValue = module.get.percent(); incrementValue = incrementValue || module.get.randomValue(); + newValue = startValue + incrementValue; - edgeValue = 100; - module.debug('Incrementing percentage by', incrementValue, startValue); - if(newValue > edgeValue ) { + maxValue = 100; + + module.debug('Incrementing percentage by', startValue, newValue); + if(newValue > maxValue ) { module.debug('Value cannot increment above 100 percent'); - newValue = edgeValue; + newValue = maxValue; } - module.set.progress(newValue); } + module.set.progress(newValue); }, decrement: function(decrementValue) { var - total = module.total || false, - edgeValue = 0, + total = module.get.total(), startValue, newValue ; if(total) { - startValue = module.value || 0; + startValue = module.get.value(); decrementValue = decrementValue || 1; newValue = startValue - decrementValue; module.debug('Decrementing value by', decrementValue, startValue); } else { - startValue = module.percent || 0; + startValue = module.get.percent(); decrementValue = decrementValue || module.get.randomValue(); newValue = startValue - decrementValue; module.debug('Decrementing percentage by', decrementValue, startValue); } - if(newValue < edgeValue) { + if(newValue < 0) { module.debug('Value cannot decrement below 0'); newValue = 0; } module.set.progress(newValue); }, + has: { + total: function() { + return (module.get.total() !== false); + } + }, + get: { text: function(templateText) { var - value = module.value || 0, - total = module.total || 0, - percent = module.percent || 0 + value = module.value || 0, + total = module.total || 0, + percent = (animating) + ? module.get.displayPercent() + : module.percent || 0, + left = (module.total > 0) + ? (total - value) + : (100 - percent) ; templateText = templateText || ''; templateText = templateText .replace('{value}', value) .replace('{total}', total) + .replace('{left}', left) .replace('{percent}', percent) ; module.debug('Adding variables to progress bar text', templateText); return templateText; }, + + randomValue: function() { module.debug('Generating random increment percentage'); return Math.floor((Math.random() * settings.random.max) + settings.random.min); }, + + numericValue: function(value) { + return (typeof value === 'string') + ? (value.replace(/[^\d.]/g, '') !== '') + ? +(value.replace(/[^\d.]/g, '')) + : false + : value + ; + }, + + transitionEnd: function() { + var + element = document.createElement('element'), + transitions = { + 'transition' :'transitionend', + 'OTransition' :'oTransitionEnd', + 'MozTransition' :'transitionend', + 'WebkitTransition' :'webkitTransitionEnd' + }, + transition + ; + for(transition in transitions){ + if( element.style[transition] !== undefined ){ + return transitions[transition]; + } + } + }, + + // gets current displayed percentage (if animating values this is the intermediary value) + displayPercent: function() { + var + barWidth = $bar.width(), + totalWidth = $module.width(), + minDisplay = parseInt($bar.css('min-width'), 10), + displayPercent = (barWidth > minDisplay) + ? (barWidth / totalWidth * 100) + : module.percent + ; + return (settings.precision > 0) + ? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision) + : Math.round(displayPercent) + ; + }, + percent: function() { return module.percent || 0; }, value: function() { - return module.value || false; + return module.value || 0; }, total: function() { return module.total || false; @@ -7079,6 +11305,12 @@ $.fn.progress = function(parameters) { }, error: function() { return $module.hasClass(className.error); + }, + active: function() { + return $module.hasClass(className.active); + }, + visible: function() { + return $module.is(':visible'); } }, @@ -7119,80 +11351,104 @@ $.fn.progress = function(parameters) { $bar .css('width', value + '%') ; + $module + .attr('data-percent', parseInt(value, 10)) + ; } }, - initials: function() { - - if(settings.total !== false) { - module.verbose('Current total set in settings', settings.total); - module.total = settings.total; - } - if(settings.value !== false) { - module.verbose('Current value set in settings', settings.value); - module.value = settings.value; - } - if(settings.percent !== false) { - module.verbose('Current percent set in settings', settings.percent); - module.percent = settings.percent; - } - - if(module.percent !== undefined) { - module.set.percent(module.percent); - } - else if(module.value !== undefined) { - module.set.progress(module.value); - } + duration: function(duration) { + duration = duration || settings.duration; + duration = (typeof duration == 'number') + ? duration + 'ms' + : duration + ; + module.verbose('Setting progress bar transition duration', duration); + $bar + .css({ + 'transition-duration': duration + }) + ; }, percent: function(percent) { percent = (typeof percent == 'string') ? +(percent.replace('%', '')) : percent ; - if(percent > 0 && percent < 1) { - module.verbose('Module percentage passed as decimal, converting'); - percent = percent * 100; - } - // round percentage - if(settings.precision === 0) { - percent = Math.round(percent); - } - else { - percent = Math.round(percent * (10 * settings.precision) / (10 * settings.precision) ); - } + // round display percentage + percent = (settings.precision > 0) + ? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision) + : Math.round(percent) + ; module.percent = percent; - if(module.total) { - module.value = Math.round( (percent / 100) * module.total); - } - if(settings.limitValues) { - module.value = (module.value > 100) - ? 100 - : (module.value < 0) - ? 0 - : module.value + if( !module.has.total() ) { + module.value = (settings.precision > 0) + ? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision) + : Math.round( (percent / 100) * module.total * 10) / 10 ; + if(settings.limitValues) { + module.value = (module.value > 100) + ? 100 + : (module.value < 0) + ? 0 + : module.value + ; + } } module.set.barWidth(percent); + module.set.labelInterval(); + module.set.labels(); + settings.onChange.call(element, percent, module.value, module.total); + }, + labelInterval: function() { + var + animationCallback = function() { + module.verbose('Bar finished animating, removing continuous label updates'); + clearInterval(module.interval); + animating = false; + module.set.labels(); + } + ; + clearInterval(module.interval); + $bar.one(transitionEnd + eventNamespace, animationCallback); + module.timer = setTimeout(animationCallback, settings.duration + 100); + animating = true; + module.interval = setInterval(module.set.labels, settings.framerate); + }, + labels: function() { + module.verbose('Setting both bar progress and outer label text'); module.set.barLabel(); + module.set.state(); + }, + label: function(text) { + text = text || ''; + if(text) { + text = module.get.text(text); + module.debug('Setting label to text', text); + $label.text(text); + } + }, + state: function(percent) { + percent = (percent !== undefined) + ? percent + : module.percent + ; if(percent === 100) { if(settings.autoSuccess && !(module.is.warning() || module.is.error())) { module.set.success(); module.debug('Automatically triggering success at 100%'); } else { + module.verbose('Reached 100% removing active state'); module.remove.active(); } } else if(percent > 0) { + module.verbose('Adjusting active progress bar label', percent); module.set.active(); } - $.proxy(settings.onChange, element)(percent, module.value, module.total); - }, - label: function(text) { - text = text || ''; - if(text) { - text = module.get.text(text); - module.debug('Setting label to text', text); - $label.text(text); + else { + module.remove.active(); + module.set.label(settings.text.active); } }, barLabel: function(text) { @@ -7211,7 +11467,7 @@ $.fn.progress = function(parameters) { active: function(text) { text = text || settings.text.active; module.debug('Setting active state'); - if(settings.showActivity) { + if(settings.showActivity && !module.is.active() ) { $module.addClass(className.active); } module.remove.warning(); @@ -7220,7 +11476,7 @@ $.fn.progress = function(parameters) { if(text) { module.set.label(text); } - $.proxy(settings.onActive, element)(module.value, module.total); + settings.onActive.call(element, module.value, module.total); }, success : function(text) { text = text || settings.text.success; @@ -7233,7 +11489,7 @@ $.fn.progress = function(parameters) { if(text) { module.set.label(text); } - $.proxy(settings.onSuccess, element)(module.total); + settings.onSuccess.call(element, module.total); }, warning : function(text) { text = text || settings.text.warning; @@ -7246,7 +11502,7 @@ $.fn.progress = function(parameters) { if(text) { module.set.label(text); } - $.proxy(settings.onWarning, element)(module.value, module.total); + settings.onWarning.call(element, module.value, module.total); }, error : function(text) { text = text || settings.text.error; @@ -7259,25 +11515,27 @@ $.fn.progress = function(parameters) { if(text) { module.set.label(text); } - $.proxy(settings.onError, element)(module.value, module.total); + settings.onError.call(element, module.value, module.total); + }, + transitionEvent: function() { + transitionEnd = module.get.transitionEnd(); }, total: function(totalValue) { module.total = totalValue; }, + value: function(value) { + module.value = value; + }, progress: function(value) { var - numericValue = (typeof value === 'string') - ? (value.replace(/[^\d.]/g, '') !== '') - ? +(value.replace(/[^\d.]/g, '')) - : false - : value, + numericValue = module.get.numericValue(value), percentComplete ; if(numericValue === false) { module.error(error.nonNumeric, value); } - if(module.total) { - module.value = numericValue; + if( module.has.total() ) { + module.set.value(numericValue); percentComplete = (numericValue / module.total) * 100; module.debug('Calculating percent complete from total', percentComplete); module.set.percent( percentComplete ); @@ -7359,7 +11617,7 @@ $.fn.progress = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -7454,7 +11712,7 @@ $.fn.progress = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -7473,7 +11731,7 @@ $.fn.progress.settings = { namespace : 'progress', debug : false, - verbose : true, + verbose : false, performance : true, random : { @@ -7481,12 +11739,15 @@ $.fn.progress.settings = { max : 5 }, + duration : 300, + autoSuccess : true, showActivity : true, limitValues : true, label : 'percent', - precision : 1, + precision : 0, + framerate : (1000 / 30), /// 30 fps percent : false, total : false, @@ -7540,13 +11801,13 @@ $.fn.progress.settings = { }; -})( jQuery, window , document ); -/* - * # Semantic - Rating +})( jQuery, window, document ); +/*! + * # Semantic UI 2.1.6 - Rating * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -7599,7 +11860,7 @@ $.fn.rating = function(parameters) { initialize: function() { module.verbose('Initializing rating module', settings); - if($icon.size() === 0) { + if($icon.length === 0) { module.setup.layout(); } @@ -7609,14 +11870,7 @@ $.fn.rating = function(parameters) { else { module.disable(); } - if(settings.initialRating) { - module.debug('Setting initial rating'); - module.setRating(settings.initialRating); - } - if( $module.data(metadata.rating) ) { - module.debug('Rating found in metadata'); - module.setRating( $module.data(metadata.rating) ); - } + module.set.rating( module.get.initialRating() ); module.instantiate(); }, @@ -7630,12 +11884,10 @@ $.fn.rating = function(parameters) { destroy: function() { module.verbose('Destroying previous instance', instance); + module.remove.events(); $module .removeData(moduleNamespace) ; - $icon - .off(eventNamespace) - ; }, refresh: function() { @@ -7645,11 +11897,12 @@ $.fn.rating = function(parameters) { setup: { layout: function() { var - maxRating = $module.data(metadata.maxRating) || settings.maxRating + maxRating = module.get.maxRating(), + html = $.fn.rating.settings.templates.icon(maxRating) ; module.debug('Generating icon html dynamically'); $module - .html($.fn.rating.settings.templates.icon(maxRating)) + .html(html) ; module.refresh(); } @@ -7684,41 +11937,49 @@ $.fn.rating = function(parameters) { click: function() { var $activeIcon = $(this), - currentRating = module.getRating(), + currentRating = module.get.rating(), rating = $icon.index($activeIcon) + 1, canClear = (settings.clearable == 'auto') - ? ($icon.size() === 1) + ? ($icon.length === 1) : settings.clearable ; if(canClear && currentRating == rating) { module.clearRating(); } else { - module.setRating( rating ); + module.set.rating( rating ); } } }, clearRating: function() { module.debug('Clearing current rating'); - module.setRating(0); + module.set.rating(0); }, - getRating: function() { - var - currentRating = $icon.filter('.' + className.active).size() - ; - module.verbose('Current rating retrieved', currentRating); - return currentRating; + bind: { + events: function() { + module.verbose('Binding events'); + $module + .on('mouseenter' + eventNamespace, selector.icon, module.event.mouseenter) + .on('mouseleave' + eventNamespace, selector.icon, module.event.mouseleave) + .on('click' + eventNamespace, selector.icon, module.event.click) + ; + } + }, + + remove: { + events: function() { + module.verbose('Removing events'); + $module + .off(eventNamespace) + ; + } }, enable: function() { module.debug('Setting rating to interactive mode'); - $icon - .on('mouseenter' + eventNamespace, module.event.mouseenter) - .on('mouseleave' + eventNamespace, module.event.mouseleave) - .on('click' + eventNamespace, module.event.click) - ; + module.bind.events(); $module .removeClass(className.disabled) ; @@ -7726,37 +11987,61 @@ $.fn.rating = function(parameters) { disable: function() { module.debug('Setting rating to read-only mode'); - $icon - .off(eventNamespace) - ; + module.remove.events(); $module .addClass(className.disabled) ; }, - setRating: function(rating) { - var - ratingIndex = (rating - 1 >= 0) - ? (rating - 1) - : 0, - $activeIcon = $icon.eq(ratingIndex) - ; - $module - .removeClass(className.selected) - ; - $icon - .removeClass(className.selected) - .removeClass(className.active) - ; - if(rating > 0) { - module.verbose('Setting current rating to', rating); - $activeIcon - .prevAll() - .andSelf() - .addClass(className.active) + get: { + initialRating: function() { + if($module.data(metadata.rating) !== undefined) { + $module.removeData(metadata.rating); + return $module.data(metadata.rating); + } + return settings.initialRating; + }, + maxRating: function() { + if($module.data(metadata.maxRating) !== undefined) { + $module.removeData(metadata.maxRating); + return $module.data(metadata.maxRating); + } + return settings.maxRating; + }, + rating: function() { + var + currentRating = $icon.filter('.' + className.active).length + ; + module.verbose('Current rating retrieved', currentRating); + return currentRating; + } + }, + + set: { + rating: function(rating) { + var + ratingIndex = (rating - 1 >= 0) + ? (rating - 1) + : 0, + $activeIcon = $icon.eq(ratingIndex) + ; + $module + .removeClass(className.selected) ; + $icon + .removeClass(className.selected) + .removeClass(className.active) + ; + if(rating > 0) { + module.verbose('Setting current rating to', rating); + $activeIcon + .prevAll() + .andSelf() + .addClass(className.active) + ; + } + settings.onRate.call(element, rating); } - $.proxy(settings.onRate, element)(rating); }, setting: function(name, value) { @@ -7828,7 +12113,7 @@ $.fn.rating = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -7844,8 +12129,8 @@ $.fn.rating = function(parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); @@ -7924,7 +12209,7 @@ $.fn.rating = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -7943,7 +12228,7 @@ $.fn.rating.settings = { namespace : 'rating', debug : false, - verbose : true, + verbose : false, performance : true, initialRating : 0, @@ -7991,14 +12276,14 @@ $.fn.rating.settings = { }; -})( jQuery, window , document ); +})( jQuery, window, document ); -/* - * # Semantic - Search +/*! + * # Semantic UI 2.1.6 - Search * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -8024,9 +12309,14 @@ $.fn.search = function(parameters) { $(this) .each(function() { var - settings = $.extend(true, {}, $.fn.search.settings, parameters), + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.search.settings, parameters) + : $.extend({}, $.fn.search.settings), className = settings.className, + metadata = settings.metadata, + regExp = settings.regExp, + fields = settings.fields, selector = settings.selector, error = settings.error, namespace = settings.namespace, @@ -8046,36 +12336,15 @@ $.fn.search = function(parameters) { module ; + module = { initialize: function() { module.verbose('Initializing module'); - var - prompt = $prompt[0], - inputEvent = (prompt !== undefined && prompt.oninput !== undefined) - ? 'input' - : (prompt !== undefined && prompt.onpropertychange !== undefined) - ? 'propertychange' - : 'keyup' - ; - if(settings.automatic) { - $prompt - .on(inputEvent + eventNamespace, module.search.throttle) - ; - } - $prompt - .on('focus' + eventNamespace, module.event.focus) - .on('blur' + eventNamespace, module.event.blur) - .on('keydown' + eventNamespace, module.handleKeyboard) - ; - $searchButton - .on('click' + eventNamespace, module.search.query) - ; - $results - .on('mousedown' + eventNamespace, module.event.mousedown) - .on('mouseup' + eventNamespace, module.event.mouseup) - .on('click' + eventNamespace, selector.result, module.results.select) - ; + module.determine.searchFields(); + module.bind.events(); + module.set.type(); + module.create.results(); module.instantiate(); }, instantiate: function() { @@ -8088,76 +12357,145 @@ $.fn.search = function(parameters) { destroy: function() { module.verbose('Destroying instance'); $module - .removeData(moduleNamespace) - ; - $prompt - .off(eventNamespace) - ; - $searchButton - .off(eventNamespace) - ; - $results .off(eventNamespace) + .removeData(moduleNamespace) ; }, - event: { - focus: function() { + + bind: { + events: function() { + module.verbose('Binding events to search'); + if(settings.automatic) { + $module + .on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input) + ; + $prompt + .attr('autocomplete', 'off') + ; + } $module - .addClass(className.focus) + // prompt + .on('focus' + eventNamespace, selector.prompt, module.event.focus) + .on('blur' + eventNamespace, selector.prompt, module.event.blur) + .on('keydown' + eventNamespace, selector.prompt, module.handleKeyboard) + // search button + .on('click' + eventNamespace, selector.searchButton, module.query) + // results + .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown) + .on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup) + .on('click' + eventNamespace, selector.result, module.event.result.click) ; - clearTimeout(module.timer); - module.search.throttle(); - if(module.has.minimum()) { - module.results.show(); + } + }, + + determine: { + searchFields: function() { + // this makes sure $.extend does not add specified search fields to default fields + // this is the only setting which should not extend defaults + if(parameters && parameters.searchFields !== undefined) { + settings.searchFields = parameters.searchFields; } + } + }, + + event: { + input: function() { + clearTimeout(module.timer); + module.timer = setTimeout(module.query, settings.searchDelay); }, - mousedown: function() { - module.resultsClicked = true; - }, - mouseup: function() { - module.resultsClicked = false; + focus: function() { + module.set.focus(); + if( module.has.minimumCharacters() ) { + module.query(); + if( module.can.show() ) { + module.showResults(); + } + } }, blur: function(event) { - module.search.cancel(); - $module - .removeClass(className.focus) + var + pageLostFocus = (document.activeElement === this) ; - if(!module.resultsClicked) { - module.timer = setTimeout(module.results.hide, settings.hideDelay); + if(!pageLostFocus && !module.resultsClicked) { + module.cancel.query(); + module.remove.focus(); + module.timer = setTimeout(module.hideResults, settings.hideDelay); + } + }, + result: { + mousedown: function() { + module.resultsClicked = true; + }, + mouseup: function() { + module.resultsClicked = false; + }, + click: function(event) { + module.debug('Search result selected'); + var + $result = $(this), + $title = $result.find(selector.title).eq(0), + $link = $result.find('a[href]').eq(0), + href = $link.attr('href') || false, + target = $link.attr('target') || false, + title = $title.html(), + // title is used for result lookup + value = ($title.length > 0) + ? $title.text() + : false, + results = module.get.results(), + result = $result.data(metadata.result) || module.get.result(value, results), + returnedValue + ; + if( $.isFunction(settings.onSelect) ) { + if(settings.onSelect.call(element, result, results) === false) { + module.debug('Custom onSelect callback cancelled default select action'); + return; + } + } + module.hideResults(); + if(value) { + module.set.value(value); + } + if(href) { + module.verbose('Opening search link found in result', $link); + if(target == '_blank' || event.ctrlKey) { + window.open(href); + } + else { + window.location.href = (href); + } + } } } }, handleKeyboard: function(event) { var - // force latest jq dom - $result = $module.find(selector.result), - $category = $module.find(selector.category), - keyCode = event.which, - keys = { + // force selector refresh + $result = $module.find(selector.result), + $category = $module.find(selector.category), + currentIndex = $result.index( $result.filter('.' + className.active) ), + resultSize = $result.length, + + keyCode = event.which, + keys = { backspace : 8, enter : 13, escape : 27, upArrow : 38, downArrow : 40 }, - activeClass = className.active, - currentIndex = $result.index( $result.filter('.' + activeClass) ), - resultSize = $result.size(), newIndex ; // search shortcuts if(keyCode == keys.escape) { module.verbose('Escape key pressed, blurring search field'); - $prompt - .trigger('blur') - ; + module.trigger.blur(); } - // result shortcuts - if($results.filter(':visible').size() > 0) { + if( module.is.visible() ) { if(keyCode == keys.enter) { module.verbose('Enter key pressed, selecting active result'); - if( $result.filter('.' + activeClass).size() > 0 ) { - $.proxy(module.results.select, $result.filter('.' + activeClass) )(event); + if( $result.filter('.' + className.active).length > 0 ) { + module.event.result.click.call($result.filter('.' + className.active), event); event.preventDefault(); return false; } @@ -8169,14 +12507,14 @@ $.fn.search = function(parameters) { : currentIndex - 1 ; $category - .removeClass(activeClass) + .removeClass(className.active) ; $result - .removeClass(activeClass) + .removeClass(className.active) .eq(newIndex) - .addClass(activeClass) + .addClass(className.active) .closest($category) - .addClass(activeClass) + .addClass(className.active) ; event.preventDefault(); } @@ -8187,14 +12525,14 @@ $.fn.search = function(parameters) { : currentIndex + 1 ; $category - .removeClass(activeClass) + .removeClass(className.active) ; $result - .removeClass(activeClass) + .removeClass(className.active) .eq(newIndex) - .addClass(activeClass) + .addClass(className.active) .closest($category) - .addClass(activeClass) + .addClass(className.active) ; event.preventDefault(); } @@ -8203,280 +12541,606 @@ $.fn.search = function(parameters) { // query shortcuts if(keyCode == keys.enter) { module.verbose('Enter key pressed, executing query'); - module.search.query(); - $searchButton - .addClass(className.down) - ; - $prompt - .one('keyup', function(){ - $searchButton - .removeClass(className.down) - ; - }) - ; + module.query(); + module.set.buttonPressed(); + $prompt.one('keyup', module.remove.buttonFocus); } } }, - has: { - minimum: function() { + + setup: { + api: function() { var - searchTerm = $prompt.val(), - numCharacters = searchTerm.length + apiSettings = { + debug : settings.debug, + on : false, + cache : 'local', + action : 'search', + onError : module.error + }, + searchHTML ; - return (numCharacters >= settings.minCharacters); + module.verbose('First request, initializing API'); + $module.api(apiSettings); } }, - search: { - cancel: function() { + + can: { + useAPI: function() { + return $.fn.api !== undefined; + }, + show: function() { + return module.is.focused() && !module.is.visible() && !module.is.empty(); + }, + transition: function() { + return settings.transition && $.fn.transition !== undefined && $module.transition('is supported'); + } + }, + + is: { + empty: function() { + return ($results.html() === ''); + }, + visible: function() { + return ($results.filter(':visible').length > 0); + }, + focused: function() { + return ($prompt.filter(':focus').length > 0); + } + }, + + trigger: { + blur: function() { var - xhr = $module.data('xhr') || false + events = document.createEvent('HTMLEvents'), + promptElement = $prompt[0] ; - if( xhr && xhr.state() != 'resolved') { - module.debug('Cancelling last search'); - xhr.abort(); + if(promptElement) { + module.verbose('Triggering native blur event'); + events.initEvent('blur', false, false); + promptElement.dispatchEvent(events); } + } + }, + + get: { + inputEvent: function() { + var + prompt = $prompt[0], + inputEvent = (prompt !== undefined && prompt.oninput !== undefined) + ? 'input' + : (prompt !== undefined && prompt.onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + return inputEvent; }, - throttle: function() { - clearTimeout(module.timer); - if(module.has.minimum()) { - module.timer = setTimeout(module.search.query, settings.searchDelay); + value: function() { + return $prompt.val(); + }, + results: function() { + var + results = $module.data(metadata.results) + ; + return results; + }, + result: function(value, results) { + var + lookupFields = ['title', 'id'], + result = false + ; + value = (value !== undefined) + ? value + : module.get.value() + ; + results = (results !== undefined) + ? results + : module.get.results() + ; + if(settings.type === 'category') { + module.debug('Finding result that matches', value); + $.each(results, function(index, category) { + if($.isArray(category.results)) { + result = module.search.object(value, category.results, lookupFields)[0]; + // don't continue searching if a result is found + if(result) { + return false; + } + } + }); } else { - module.results.hide(); + module.debug('Finding result in results object', value); + result = module.search.object(value, results, lookupFields)[0]; } + return result || false; }, - query: function() { - var - searchTerm = $prompt.val(), - cachedHTML = module.search.cache.read(searchTerm) + }, + + set: { + focus: function() { + $module.addClass(className.focus); + }, + loading: function() { + $module.addClass(className.loading); + }, + value: function(value) { + module.verbose('Setting search input value', value); + $prompt + .val(value) ; - if(cachedHTML) { - module.debug("Reading result for '" + searchTerm + "' from cache"); - module.results.add(cachedHTML); + }, + type: function(type) { + type = type || settings.type; + if(settings.type == 'category') { + $module.addClass(settings.type); + } + }, + buttonPressed: function() { + $searchButton.addClass(className.pressed); + } + }, + + remove: { + loading: function() { + $module.removeClass(className.loading); + }, + focus: function() { + $module.removeClass(className.focus); + }, + buttonPressed: function() { + $searchButton.removeClass(className.pressed); + } + }, + + query: function() { + var + searchTerm = module.get.value(), + cache = module.read.cache(searchTerm) + ; + if( module.has.minimumCharacters() ) { + if(cache) { + module.debug('Reading result from cache', searchTerm); + module.save.results(cache.results); + module.addResults(cache.html); + module.inject.id(cache.results); } else { - module.debug("Querying for '" + searchTerm + "'"); + module.debug('Querying for', searchTerm); if($.isPlainObject(settings.source) || $.isArray(settings.source)) { module.search.local(searchTerm); } - else if(settings.apiSettings) { - module.search.remote(searchTerm); - } - else if($.fn.api !== undefined && $.api.settings.api.search !== undefined) { - module.debug('Searching with default search API endpoint'); - settings.apiSettings = { - action: 'search' - }; + else if( module.can.useAPI() ) { module.search.remote(searchTerm); } else { module.error(error.source); } - $.proxy(settings.onSearchQuery, $module)(searchTerm); } - }, + settings.onSearchQuery.call(element, searchTerm); + } + else { + module.hideResults(); + } + }, + + search: { local: function(searchTerm) { var - results = [], - fullTextResults = [], - searchFields = $.isArray(settings.searchFields) - ? settings.searchFields - : [settings.searchFields], - searchRegExp = new RegExp('(?:\s|^)' + searchTerm, 'i'), - fullTextRegExp = new RegExp(searchTerm, 'i'), + results = module.search.object(searchTerm, settings.content), searchHTML ; + module.set.loading(); + module.save.results(results); + module.debug('Returned local search results', results); + + searchHTML = module.generateResults({ + results: results + }); + module.remove.loading(); + module.addResults(searchHTML); + module.inject.id(results); + module.write.cache(searchTerm, { + html : searchHTML, + results : results + }); + }, + remote: function(searchTerm) { + var + apiSettings = { + onSuccess : function(response) { + module.parse.response.call(element, response, searchTerm); + }, + onFailure: function() { + module.displayMessage(error.serverError); + }, + urlData: { + query: searchTerm + } + } + ; + if( !$module.api('get request') ) { + module.setup.api(); + } + $.extend(true, apiSettings, settings.apiSettings); + module.debug('Executing search', apiSettings); + module.cancel.query(); $module - .addClass(className.loading) + .api('setting', apiSettings) + .api('query') + ; + }, + object: function(searchTerm, source, searchFields) { + var + results = [], + fuzzyResults = [], + searchExp = searchTerm.toString().replace(regExp.escape, '\\$&'), + matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'), + + // avoid duplicates when pushing results + addResult = function(array, result) { + var + notResult = ($.inArray(result, results) == -1), + notFuzzyResult = ($.inArray(result, fuzzyResults) == -1) + ; + if(notResult && notFuzzyResult) { + array.push(result); + } + } ; - // iterate through search fields in array order + source = source || settings.source; + searchFields = (searchFields !== undefined) + ? searchFields + : settings.searchFields + ; + + // search fields should be array to loop correctly + if(!$.isArray(searchFields)) { + searchFields = [searchFields]; + } + + // exit conditions if no source + if(source === undefined || source === false) { + module.error(error.source); + return []; + } + + // iterate through search fields looking for matches $.each(searchFields, function(index, field) { - $.each(settings.source, function(label, content) { + $.each(source, function(label, content) { var - fieldExists = (typeof content[field] == 'string'), - notAlreadyResult = ($.inArray(content, results) == -1 && $.inArray(content, fullTextResults) == -1) + fieldExists = (typeof content[field] == 'string') ; - if(fieldExists && notAlreadyResult) { - if( searchRegExp.test( content[field] ) ) { - results.push(content); + if(fieldExists) { + if( content[field].search(matchRegExp) !== -1) { + // content starts with value (first in results) + addResult(results, content); } - else if( settings.searchFullText && fullTextRegExp.test( content[field] ) ) { - fullTextResults.push(content); + else if(settings.searchFullText && module.fuzzySearch(searchTerm, content[field]) ) { + // content fuzzy matches (last in results) + addResult(fuzzyResults, content); } } }); }); - searchHTML = module.results.generate({ - results: $.merge(results, fullTextResults) - }); - $module - .removeClass(className.loading) + return $.merge(results, fuzzyResults); + } + }, + + fuzzySearch: function(query, term) { + var + termLength = term.length, + queryLength = query.length + ; + if(typeof query !== 'string') { + return false; + } + 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) ; - module.search.cache.write(searchTerm, searchHTML); - module.results.add(searchHTML); - }, - remote: function(searchTerm) { + while(nextCharacterIndex < termLength) { + if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) { + continue search; + } + } + return false; + } + return true; + }, + + parse: { + response: function(response, searchTerm) { var - apiSettings = { - stateContext : $module, - urlData : { - query: searchTerm - }, - onSuccess : function(response) { - searchHTML = module.results.generate(response); - module.search.cache.write(searchTerm, searchHTML); - module.results.add(searchHTML); - }, - onFailure : module.error - }, - searchHTML + searchHTML = module.generateResults(response) + ; + module.verbose('Parsing server response', response); + if(response !== undefined) { + if(searchTerm !== undefined && response[fields.results] !== undefined) { + module.addResults(searchHTML); + module.inject.id(response[fields.results]); + module.write.cache(searchTerm, { + html : searchHTML, + results : response[fields.results] + }); + module.save.results(response[fields.results]); + } + } + } + }, + + cancel: { + query: function() { + if( module.can.useAPI() ) { + $module.api('abort'); + } + } + }, + + has: { + minimumCharacters: function() { + var + searchTerm = module.get.value(), + numCharacters = searchTerm.length ; - module.search.cancel(); - module.debug('Executing search'); - $.extend(true, apiSettings, settings.apiSettings); - $.api(apiSettings); - }, + return (numCharacters >= settings.minCharacters); + } + }, - cache: { - read: function(name) { - var - cache = $module.data('cache') - ; - return (settings.cache && (typeof cache == 'object') && (cache[name] !== undefined) ) + clear: { + cache: function(value) { + var + cache = $module.data(metadata.cache) + ; + if(!value) { + module.debug('Clearing cache', value); + $module.removeData(metadata.cache); + } + else if(value && cache && cache[value]) { + module.debug('Removing value from cache', value); + delete cache[value]; + $module.data(metadata.cache, cache); + } + } + }, + + read: { + cache: function(name) { + var + cache = $module.data(metadata.cache) + ; + if(settings.cache) { + module.verbose('Checking cache for generated html for query', name); + return (typeof cache == 'object') && (cache[name] !== undefined) ? cache[name] : false ; - }, - write: function(name, value) { - var - cache = ($module.data('cache') !== undefined) - ? $module.data('cache') - : {} - ; - cache[name] = value; - $module - .data('cache', cache) - ; } + return false; } }, - results: { - generate: function(response) { - module.debug('Generating html from response', response); + create: { + id: function(resultIndex, categoryIndex) { var - template = settings.templates[settings.type], - html = '' - ; - if(($.isPlainObject(response.results) && !$.isEmptyObject(response.results)) || ($.isArray(response.results) && response.results.length > 0) ) { - if(settings.maxResults > 0) { - response.results = $.isArray(response.results) - ? response.results.slice(0, settings.maxResults) - : response.results - ; - } - if($.isFunction(template)) { - html = template(response); - } - else { - module.error(error.noTemplate, false); - } + resultID = (resultIndex + 1), // not zero indexed + categoryID = (categoryIndex + 1), + firstCharCode, + letterID, + id + ; + if(categoryIndex !== undefined) { + // start char code for "A" + letterID = String.fromCharCode(97 + categoryIndex); + id = letterID + resultID; + module.verbose('Creating category result id', id); } else { - html = module.message(error.noResults, 'empty'); + id = resultID; + module.verbose('Creating result id', id); } - $.proxy(settings.onResults, $module)(response); - return html; + return id; }, - add: function(html) { - if(settings.onResultsAdd == 'default' || $.proxy(settings.onResultsAdd, $results)(html) == 'default') { - $results - .html(html) + results: function() { + if($results.length === 0) { + $results = $('<div />') + .addClass(className.results) + .appendTo($module) ; } - module.results.show(); + } + }, + + inject: { + result: function(result, resultIndex, categoryIndex) { + module.verbose('Injecting result into results'); + var + $selectedResult = (categoryIndex !== undefined) + ? $results + .children().eq(categoryIndex) + .children(selector.result).eq(resultIndex) + : $results + .children(selector.result).eq(resultIndex) + ; + module.verbose('Injecting results metadata', $selectedResult); + $selectedResult + .data(metadata.result, result) + ; }, - show: function() { - if( ($results.filter(':visible').size() === 0) && ($prompt.filter(':focus').size() > 0) && $results.html() !== '') { - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported') && !$results.transition('is inward')) { - module.debug('Showing results with css animations'); - $results - .transition({ - animation : settings.transition + ' in', - duration : settings.duration, - queue : true - }) - ; - } - else { - module.debug('Showing results with javascript'); - $results - .stop() - .fadeIn(settings.duration, settings.easing) - ; - } - $.proxy(settings.onResultsOpen, $results)(); + id: function(results) { + module.debug('Injecting unique ids into results'); + var + // since results may be object, we must use counters + categoryIndex = 0, + resultIndex = 0 + ; + if(settings.type === 'category') { + // iterate through each category result + $.each(results, function(index, category) { + resultIndex = 0; + $.each(category.results, function(index, value) { + var + result = category.results[index] + ; + if(result.id === undefined) { + result.id = module.create.id(resultIndex, categoryIndex); + } + module.inject.result(result, resultIndex, categoryIndex); + resultIndex++; + }); + categoryIndex++; + }); } - }, - hide: function() { - if($results.filter(':visible').size() > 0) { - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported') && !$results.transition('is outward')) { - module.debug('Hiding results with css animations'); - $results - .transition({ - animation : settings.transition + ' out', - duration : settings.duration, - queue : true - }) - ; - } - else { - module.debug('Hiding results with javascript'); - $results - .stop() - .fadeIn(settings.duration, settings.easing) + else { + // top level + $.each(results, function(index, value) { + var + result = results[index] ; - } - $.proxy(settings.onResultsClose, $results)(); + if(result.id === undefined) { + result.id = module.create.id(resultIndex); + } + module.inject.result(result, resultIndex); + resultIndex++; + }); } - }, - select: function(event) { - module.debug('Search result selected'); + return results; + } + }, + + save: { + results: function(results) { + module.verbose('Saving current search results to metadata', results); + $module.data(metadata.results, results); + } + }, + + write: { + cache: function(name, value) { var - $result = $(this), - $title = $result.find('.title'), - title = $title.html() + cache = ($module.data(metadata.cache) !== undefined) + ? $module.data(metadata.cache) + : {} ; - if(settings.onSelect == 'default' || $.proxy(settings.onSelect, this)(event) == 'default') { - var - $link = $result.find('a[href]').eq(0), - $title = $result.find(selector.title).eq(0), - href = $link.attr('href') || false, - target = $link.attr('target') || false, - name = ($title.size() > 0) - ? $title.text() - : false + if(settings.cache) { + module.verbose('Writing generated html to cache', name, value); + cache[name] = value; + $module + .data(metadata.cache, cache) ; - module.results.hide(); - if(name) { - $prompt.val(name); - } - if(href) { - if(target == '_blank' || event.ctrlKey) { - window.open(href); - } - else { - window.location.href = (href); + } + } + }, + + addResults: function(html) { + if( $.isFunction(settings.onResultsAdd) ) { + if( settings.onResultsAdd.call($results, html) === false ) { + module.debug('onResultsAdd callback cancelled default action'); + return false; + } + } + $results + .html(html) + ; + if( module.can.show() ) { + module.showResults(); + } + }, + + showResults: function() { + if(!module.is.visible()) { + if( module.can.transition() ) { + module.debug('Showing results with css animations'); + $results + .transition({ + animation : settings.transition + ' in', + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + queue : true + }) + ; + } + else { + module.debug('Showing results with javascript'); + $results + .stop() + .fadeIn(settings.duration, settings.easing) + ; + } + settings.onResultsOpen.call($results); + } + }, + hideResults: function() { + if( module.is.visible() ) { + if( module.can.transition() ) { + module.debug('Hiding results with css animations'); + $results + .transition({ + animation : settings.transition + ' out', + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + queue : true + }) + ; + } + else { + module.debug('Hiding results with javascript'); + $results + .stop() + .fadeOut(settings.duration, settings.easing) + ; + } + settings.onResultsClose.call($results); + } + }, + + generateResults: function(response) { + module.debug('Generating html from response', response); + var + template = settings.templates[settings.type], + isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])), + isProperArray = ($.isArray(response[fields.results]) && response[fields.results].length > 0), + html = '' + ; + if(isProperObject || isProperArray ) { + if(settings.maxResults > 0) { + if(isProperObject) { + if(settings.type == 'standard') { + module.error(error.maxResults); } } + else { + response[fields.results] = response[fields.results].slice(0, settings.maxResults); + } } + if($.isFunction(template)) { + html = template(response, fields); + } + else { + module.error(error.noTemplate, false); + } + } + else { + html = module.displayMessage(error.noResults, 'empty'); } + settings.onResults.call(element, response); + return html; }, - // displays mesage visibly in search results - message: function(text, type) { + displayMessage: function(text, type) { type = type || 'standard'; - module.results.add( settings.templates.message(text, type) ); + module.debug('Displaying message', text, type); + module.addResults( settings.templates.message(text, type) ); return settings.templates.message(text, type); }, @@ -8548,7 +13212,7 @@ $.fn.search = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -8564,8 +13228,8 @@ $.fn.search = function(parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); @@ -8618,7 +13282,7 @@ $.fn.search = function(parameters) { } }); } - if ( $.isFunction( found ) ) { + if( $.isFunction( found ) ) { response = found.apply(context, passedArguments); } else if(found !== undefined) { @@ -8644,7 +13308,7 @@ $.fn.search = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -8660,40 +13324,62 @@ $.fn.search = function(parameters) { $.fn.search.settings = { - name : 'Search Module', + name : 'Search', namespace : 'search', debug : false, - verbose : true, + verbose : false, performance : true, - // api config - apiSettings : false, type : 'standard', + // template to use (specified in settings.templates) + minCharacters : 1, + // minimum characters required to search + + apiSettings : false, + // API config source : false, + // object to search + searchFields : [ 'title', 'description' ], + // fields to search + + displayField : '', + // field to display in standard results template + searchFullText : true, + // whether to include fuzzy results in local search + + automatic : true, + // whether to add events to prompt automatically - automatic : 'true', hideDelay : 0, - searchDelay : 300, + // delay before hiding menu after blur + + searchDelay : 200, + // delay before searching + maxResults : 7, + // maximum results returned from local + cache : true, + // whether to store lookups in local cache + // transition settings transition : 'scale', - duration : 300, + duration : 200, easing : 'easeOutExpo', - // onSelect default action is defined in module - onSelect : 'default', - onResultsAdd : 'default', + // callbacks + onSelect : false, + onResultsAdd : false, - onSearchQuery : function(){}, + onSearchQuery : function(query){}, onResults : function(response){}, onResultsOpen : function(){}, @@ -8701,21 +13387,51 @@ $.fn.search.settings = { className: { active : 'active', - down : 'down', - focus : 'focus', empty : 'empty', - loading : 'loading' + focus : 'focus', + loading : 'loading', + results : 'results', + pressed : 'down' }, error : { source : 'Cannot search. No source used, and Semantic API module was not included', noResults : 'Your search returned no results', logging : 'Error in debug logging, exiting.', + noEndpoint : 'No search endpoint was specified', noTemplate : 'A valid template name was not specified.', - serverError : 'There was an issue with querying the server.', + serverError : 'There was an issue querying the server.', + maxResults : 'Results must be an array to use maxResults setting', method : 'The method you called is not defined.' }, + metadata: { + cache : 'cache', + results : 'results', + result : 'result' + }, + + regExp: { + escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, + beginsWith : '(?:\s|^)' + }, + + // maps api response attributes to internal representation + fields: { + categories : 'results', // array of categories (category view) + categoryName : 'name', // name of category (category view) + categoryResults : 'results', // array of results (category view) + description : 'description', // result description + image : 'image', // result image + price : 'price', // result price + results : 'results', // array of results (standard) + title : 'title', // result title + url : 'url', // result url + action : 'action', // "view more" object name + actionText : 'text', // "view more" text + actionURL : 'url' // "view more" url + }, + selector : { prompt : '.prompt', searchButton : '.search.button', @@ -8769,95 +13485,98 @@ $.fn.search.settings = { } return html; }, - category: function(response) { + category: function(response, fields) { var html = '', escape = $.fn.search.settings.templates.escape ; - if(response.results !== undefined) { + if(response[fields.categoryResults] !== undefined) { + // each category - $.each(response.results, function(index, category) { - if(category.results !== undefined && category.results.length > 0) { - html += '' - + '<div class="category">' - + '<div class="name">' + category.name + '</div>' - ; + $.each(response[fields.categoryResults], function(index, category) { + if(category[fields.results] !== undefined && category.results.length > 0) { + + html += '<div class="category">'; + + if(category[fields.categoryName] !== undefined) { + html += '<div class="name">' + category[fields.categoryName] + '</div>'; + } + // each item inside category $.each(category.results, function(index, result) { - html += '<div class="result">'; - if(result.url) { - html += '<a href="' + result.url + '"></a>'; + if(result[fields.url]) { + html += '<a class="result" href="' + result[fields.url] + '">'; } - if(result.image !== undefined) { - result.image = escape(result.image); + else { + html += '<a class="result">'; + } + if(result[fields.image] !== undefined) { html += '' + '<div class="image">' - + ' <img src="' + result.image + '" alt="">' + + ' <img src="' + result[fields.image] + '">' + '</div>' ; } html += '<div class="content">'; - if(result.price !== undefined) { - result.price = escape(result.price); - html += '<div class="price">' + result.price + '</div>'; + if(result[fields.price] !== undefined) { + html += '<div class="price">' + result[fields.price] + '</div>'; } - if(result.title !== undefined) { - result.title = escape(result.title); - html += '<div class="title">' + result.title + '</div>'; + if(result[fields.title] !== undefined) { + html += '<div class="title">' + result[fields.title] + '</div>'; } - if(result.description !== undefined) { - html += '<div class="description">' + result.description + '</div>'; + if(result[fields.description] !== undefined) { + html += '<div class="description">' + result[fields.description] + '</div>'; } html += '' + '</div>' - + '</div>' ; + html += '</a>'; }); html += '' + '</div>' ; } }); - if(response.action) { + if(response[fields.action]) { html += '' - + '<a href="' + response.action.url + '" class="action">' - + response.action.text + + '<a href="' + response[fields.action][fields.actionURL] + '" class="action">' + + response[fields.action][fields.actionText] + '</a>'; } return html; } return false; }, - standard: function(response) { + standard: function(response, fields) { var html = '' ; - if(response.results !== undefined) { + if(response[fields.results] !== undefined) { // each result - $.each(response.results, function(index, result) { - if(result.url) { - html += '<a class="result" href="' + result.url + '">'; + $.each(response[fields.results], function(index, result) { + if(result[fields.url]) { + html += '<a class="result" href="' + result[fields.url] + '">'; } else { html += '<a class="result">'; } - if(result.image !== undefined) { + if(result[fields.image] !== undefined) { html += '' + '<div class="image">' - + ' <img src="' + result.image + '">' + + ' <img src="' + result[fields.image] + '">' + '</div>' ; } html += '<div class="content">'; - if(result.price !== undefined) { - html += '<div class="price">' + result.price + '</div>'; + if(result[fields.price] !== undefined) { + html += '<div class="price">' + result[fields.price] + '</div>'; } - if(result.title !== undefined) { - html += '<div class="title">' + result.title + '</div>'; + if(result[fields.title] !== undefined) { + html += '<div class="title">' + result[fields.title] + '</div>'; } - if(result.description !== undefined) { - html += '<div class="description">' + result.description + '</div>'; + if(result[fields.description] !== undefined) { + html += '<div class="description">' + result[fields.description] + '</div>'; } html += '' + '</div>' @@ -8865,10 +13584,10 @@ $.fn.search.settings = { html += '</a>'; }); - if(response.action) { + if(response[fields.action]) { html += '' - + '<a href="' + response.action.url + '" class="action">' - + response.action.text + + '<a href="' + response[fields.action][fields.actionURL] + '" class="action">' + + response[fields.action][fields.actionText] + '</a>'; } return html; @@ -8878,14 +13597,14 @@ $.fn.search.settings = { } }; -})( jQuery, window , document ); +})( jQuery, window, document ); -/* - * # Semantic - Shape +/*! + * # Semantic UI 2.1.6 - Shape * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -8919,8 +13638,10 @@ $.fn.shape = function(parameters) { $allModules .each(function() { var - moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.shape.settings, parameters), + moduleSelector = $allModules.selector || '', + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.shape.settings, parameters) + : $.extend({}, $.fn.shape.settings), // internal aliases namespace = settings.namespace, @@ -8982,7 +13703,7 @@ $.fn.shape = function(parameters) { repaint: function() { module.verbose('Forcing repaint event'); var - shape = $sides.get(0) || document.createElement('div'), + shape = $sides[0] || document.createElement('div'), fakeAssignment = shape.offsetWidth ; }, @@ -8997,7 +13718,7 @@ $.fn.shape = function(parameters) { module.reset(); module.set.active(); }; - $.proxy(settings.beforeChange, $nextSide[0])(); + settings.beforeChange.call($nextSide[0]); if(module.get.transitionEvent()) { module.verbose('Starting CSS animation'); $module @@ -9071,7 +13792,7 @@ $.fn.shape = function(parameters) { defaultSide: function() { $activeSide = $module.find('.' + settings.className.active); - $nextSide = ( $activeSide.next(selector.side).size() > 0 ) + $nextSide = ( $activeSide.next(selector.side).length > 0 ) ? $activeSide.next(selector.side) : $module.find(selector.side).first() ; @@ -9087,13 +13808,29 @@ $.fn.shape = function(parameters) { : duration ; module.verbose('Setting animation duration', duration); - $sides.add($side) + 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({ - '-webkit-transition-duration': duration, - '-moz-transition-duration': duration, - '-ms-transition-duration': duration, - '-o-transition-duration': duration, - 'transition-duration': duration + width: width, + height: height }) ; }, @@ -9104,17 +13841,18 @@ $.fn.shape = function(parameters) { $activeSide = $clone.find('.' + settings.className.active), $nextSide = (nextIndex) ? $clone.find(selector.side).eq(nextIndex) - : ( $activeSide.next(selector.side).size() > 0 ) + : ( $activeSide.next(selector.side).length > 0 ) ? $activeSide.next(selector.side) : $clone.find(selector.side).first(), newSize = {} ; + module.set.currentStageSize(); $activeSide.removeClass(className.active); $nextSide.addClass(className.active); $clone.insertAfter($module); newSize = { - width : $nextSide.outerWidth(), - height : $nextSide.outerHeight() + width : $nextSide.outerWidth(true), + height : $nextSide.outerHeight(true) }; $clone.remove(); $module @@ -9127,7 +13865,7 @@ $.fn.shape = function(parameters) { nextIndex = selector; $nextSide = $side.filter(selector); nextIndex = $side.index($nextSide); - if($nextSide.size() === 0) { + if($nextSide.length === 0) { module.set.defaultSide(); module.error(error.side); } @@ -9142,7 +13880,7 @@ $.fn.shape = function(parameters) { $nextSide .addClass(className.active) ; - $.proxy(settings.onChange, $nextSide[0])(); + settings.onChange.call($nextSide[0]); module.set.defaultSide(); } }, @@ -9253,8 +13991,8 @@ $.fn.shape = function(parameters) { up: function() { var translate = { - y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), - z: -($activeSide.outerHeight() / 2) + y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), + z: -($activeSide.outerHeight(true) / 2) } ; return { @@ -9265,8 +14003,8 @@ $.fn.shape = function(parameters) { down: function() { var translate = { - y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), - z: -($activeSide.outerHeight() / 2) + y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), + z: -($activeSide.outerHeight(true) / 2) } ; return { @@ -9277,8 +14015,8 @@ $.fn.shape = function(parameters) { left: function() { var translate = { - x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), - z : -($activeSide.outerWidth() / 2) + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2), + z : -($activeSide.outerWidth(true) / 2) } ; return { @@ -9289,8 +14027,8 @@ $.fn.shape = function(parameters) { right: function() { var translate = { - x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), - z : -($activeSide.outerWidth() / 2) + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2), + z : -($activeSide.outerWidth(true) / 2) } ; return { @@ -9301,7 +14039,7 @@ $.fn.shape = function(parameters) { over: function() { var translate = { - x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2) } ; return { @@ -9312,7 +14050,7 @@ $.fn.shape = function(parameters) { back: function() { var translate = { - x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2) } ; return { @@ -9340,7 +14078,7 @@ $.fn.shape = function(parameters) { }, nextSide: function() { - return ( $activeSide.next(selector.side).size() > 0 ) + return ( $activeSide.next(selector.side).length > 0 ) ? $activeSide.next(selector.side) : $module.find(selector.side).first() ; @@ -9353,14 +14091,19 @@ $.fn.shape = function(parameters) { above: function() { var box = { - origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), + origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), depth : { - active : ($nextSide.outerHeight() / 2), - next : ($activeSide.outerHeight() / 2) + 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)' @@ -9369,7 +14112,6 @@ $.fn.shape = function(parameters) { $nextSide .addClass(className.animating) .css({ - 'display' : 'block', 'top' : box.origin + 'px', 'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)' }) @@ -9379,14 +14121,19 @@ $.fn.shape = function(parameters) { below: function() { var box = { - origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), + origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), depth : { - active : ($nextSide.outerHeight() / 2), - next : ($activeSide.outerHeight() / 2) + 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)' @@ -9395,7 +14142,6 @@ $.fn.shape = function(parameters) { $nextSide .addClass(className.animating) .css({ - 'display' : 'block', 'top' : box.origin + 'px', 'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)' }) @@ -9404,15 +14150,24 @@ $.fn.shape = function(parameters) { left: function() { var + height = { + active : $activeSide.outerWidth(true), + next : $nextSide.outerWidth(true) + }, box = { - origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), + origin : ( ( height.active - height.next ) / 2), depth : { - active : ($nextSide.outerWidth() / 2), - next : ($activeSide.outerWidth() / 2) + 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)' @@ -9421,7 +14176,6 @@ $.fn.shape = function(parameters) { $nextSide .addClass(className.animating) .css({ - 'display' : 'block', 'left' : box.origin + 'px', 'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)' }) @@ -9430,15 +14184,24 @@ $.fn.shape = function(parameters) { right: function() { var + height = { + active : $activeSide.outerWidth(true), + next : $nextSide.outerWidth(true) + }, box = { - origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), + origin : ( ( height.active - height.next ) / 2), depth : { - active : ($nextSide.outerWidth() / 2), - next : ($activeSide.outerWidth() / 2) + 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)' @@ -9447,7 +14210,6 @@ $.fn.shape = function(parameters) { $nextSide .addClass(className.animating) .css({ - 'display' : 'block', 'left' : box.origin + 'px', 'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)' }) @@ -9456,11 +14218,15 @@ $.fn.shape = function(parameters) { behind: function() { var + height = { + active : $activeSide.outerWidth(true), + next : $nextSide.outerWidth(true) + }, box = { - origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), + origin : ( ( height.active - height.next ) / 2), depth : { - active : ($nextSide.outerWidth() / 2), - next : ($activeSide.outerWidth() / 2) + active : (height.next / 2), + next : (height.active / 2) } } ; @@ -9473,7 +14239,6 @@ $.fn.shape = function(parameters) { $nextSide .addClass(className.animating) .css({ - 'display' : 'block', 'left' : box.origin + 'px', 'transform' : 'rotateY(-180deg)' }) @@ -9549,7 +14314,7 @@ $.fn.shape = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -9565,8 +14330,8 @@ $.fn.shape = function(parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); @@ -9646,7 +14411,7 @@ $.fn.shape = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -9668,7 +14433,7 @@ $.fn.shape.settings = { debug : false, // verbose debug output - verbose : true, + verbose : false, // performance data output performance: true, @@ -9684,7 +14449,7 @@ $.fn.shape.settings = { allowRepeats: false, // animation duration - duration : 700, + duration : false, // possible errors error: { @@ -9709,13 +14474,13 @@ $.fn.shape.settings = { }; -})( jQuery, window , document ); -/* - * # Semantic - Sidebar +})( jQuery, window, document ); +/*! + * # Semantic UI 2.1.6 - Sidebar * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -9727,19 +14492,20 @@ $.fn.shape.settings = { $.fn.sidebar = function(parameters) { var - $allModules = $(this), - $window = $(window), - $document = $(document), - $head = $('head'), + $allModules = $(this), + $window = $(window), + $document = $(document), + $html = $('html'), + $head = $('head'), - moduleSelector = $allModules.selector || '', + moduleSelector = $allModules.selector || '', - time = new Date().getTime(), - performance = [], + time = new Date().getTime(), + performance = [], - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame @@ -9760,6 +14526,7 @@ $.fn.sidebar = function(parameters) { selector = settings.selector, className = settings.className, namespace = settings.namespace, + regExp = settings.regExp, error = settings.error, eventNamespace = '.' + namespace, @@ -9769,6 +14536,7 @@ $.fn.sidebar = function(parameters) { $context = $(settings.context), $sidebars = $module.children(selector.sidebar), + $fixed = $context.children(selector.fixed), $pusher = $context.children(selector.pusher), $style, @@ -9788,19 +14556,25 @@ $.fn.sidebar = function(parameters) { initialize: function() { module.debug('Initializing sidebar', parameters); + module.create.id(); + transitionEvent = module.get.transitionEvent(); - // cache on initialize - if( module.is.legacy() || settings.legacy) { - settings.transition = 'overlay'; - settings.useLegacy = true; + if(module.is.ios()) { + module.set.ios(); } - id = module.get.uniqueID(); - elementNamespace = '.' + id; - // avoids locking rendering if initialized in onReady - requestAnimationFrame(module.setup.layout); + if(settings.delaySetup) { + requestAnimationFrame(module.setup.layout); + } + else { + module.setup.layout(); + } + + requestAnimationFrame(function() { + module.setup.cache(); + }); module.instantiate(); }, @@ -9813,13 +14587,23 @@ $.fn.sidebar = function(parameters) { ; }, + create: { + id: function() { + id = (Math.random().toString(16) + '000000000').substr(2,8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + } + }, + destroy: function() { module.verbose('Destroying previous module for', $module); - module.remove.direction(); $module .off(eventNamespace) .removeData(moduleNamespace) ; + if(module.is.ios()) { + module.remove.ios(); + } // bound by uuid $context.off(elementNamespace); $window.off(elementNamespace); @@ -9828,10 +14612,18 @@ $.fn.sidebar = function(parameters) { event: { clickaway: function(event) { - if( $(event.target).closest(selector.sidebar).size() === 0 ) { + var + clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)), + clickedContext = ($context.is(event.target)) + ; + if(clickedInPusher) { module.verbose('User clicked on dimmed page'); module.hide(); } + if(clickedContext) { + module.verbose('User clicked on dimmable context (scaled out page)'); + module.hide(); + } }, touch: function(event) { //event.stopPropagation(); @@ -9845,7 +14637,7 @@ $.fn.sidebar = function(parameters) { } }, scroll: function(event) { - if( $(event.target).closest(selector.sidebar).size() === 0 ) { + if( $(event.target).closest(selector.sidebar).length === 0 ) { event.preventDefault(); } } @@ -9856,7 +14648,7 @@ $.fn.sidebar = function(parameters) { module.verbose('Adding clickaway events to context', $context); if(settings.closable) { $context - .on('click' + elementNamespace, module.event.clickaway) + .on('click' + elementNamespace, module.event.clickaway) .on('touchend' + elementNamespace, module.event.clickaway) ; } @@ -9891,75 +14683,82 @@ $.fn.sidebar = function(parameters) { }, add: { - bodyCSS: function(direction, distance) { + inlineCSS: function() { var - width = $module.outerWidth(), - height = $module.outerHeight(), + width = module.cache.width || $module.outerWidth(), + height = module.cache.height || $module.outerHeight(), + isRTL = module.is.rtl(), + direction = module.get.direction(), + distance = { + left : width, + right : -width, + top : height, + bottom : -height + }, style ; - style = '' - + '<style title="' + namespace + '">' - + ' .ui.visible.left.sidebar ~ .fixed,' - + ' .ui.visible.left.sidebar ~ .pusher {' - + ' -webkit-transform: translate3d('+ width + 'px, 0, 0);' - + ' transform: translate3d('+ width + 'px, 0, 0);' - + ' }' - + ' .ui.visible.right.sidebar ~ .fixed,' - + ' .ui.visible.right.sidebar ~ .pusher {' - + ' -webkit-transform: translate3d(-'+ width + 'px, 0, 0);' - + ' transform: translate3d(-'+ width + 'px, 0, 0);' - + ' }' - + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,' - + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,' - + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,' - + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {' - + ' -webkit-transform: translate3d(0px, 0, 0);' - + ' transform: translate3d(0px, 0, 0);' - + ' }' - + ' .ui.visible.top.sidebar ~ .fixed,' - + ' .ui.visible.top.sidebar ~ .pusher {' - + ' -webkit-transform: translate3d(0, ' + height + 'px, 0);' - + ' transform: translate3d(0, ' + height + 'px, 0);' - + ' }' - + ' .ui.visible.bottom.sidebar ~ .fixed,' - + ' .ui.visible.bottom.sidebar ~ .pusher {' - + ' -webkit-transform: translate3d(0, -' + height + 'px, 0);' - + ' transform: translate3d(0, -' + height + 'px, 0);' - + ' }' - ; + + if(isRTL){ + module.verbose('RTL detected, flipping widths'); + distance.left = -width; + distance.right = width; + } + + style = '<style>'; + + if(direction === 'left' || direction === 'right') { + module.debug('Adding CSS rules for animation distance', width); + style += '' + + ' .ui.visible.' + direction + '.sidebar ~ .fixed,' + + ' .ui.visible.' + direction + '.sidebar ~ .pusher {' + + ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);' + + ' transform: translate3d('+ distance[direction] + 'px, 0, 0);' + + ' }' + ; + } + else if(direction === 'top' || direction == 'bottom') { + style += '' + + ' .ui.visible.' + direction + '.sidebar ~ .fixed,' + + ' .ui.visible.' + direction + '.sidebar ~ .pusher {' + + ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);' + + ' transform: translate3d(0, ' + distance[direction] + 'px, 0);' + + ' }' + ; + } /* IE is only browser not to create context with transforms */ /* https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 */ if( module.is.ie() ) { + if(direction === 'left' || direction === 'right') { + module.debug('Adding CSS rules for animation distance', width); + style += '' + + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {' + + ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);' + + ' transform: translate3d('+ distance[direction] + 'px, 0, 0);' + + ' }' + ; + } + else if(direction === 'top' || direction == 'bottom') { + style += '' + + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {' + + ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);' + + ' transform: translate3d(0, ' + distance[direction] + 'px, 0);' + + ' }' + ; + } + /* opposite sides visible forces content overlay */ style += '' - + ' .ui.visible.left.sidebar ~ .pusher:after {' - + ' -webkit-transform: translate3d('+ width + 'px, 0, 0);' - + ' transform: translate3d('+ width + 'px, 0, 0);' - + ' }' - + ' .ui.visible.right.sidebar ~ .pusher:after {' - + ' -webkit-transform: translate3d(-'+ width + 'px, 0, 0);' - + ' transform: translate3d(-'+ width + 'px, 0, 0);' - + ' }' - + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,' - + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {' + + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,' + + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {' + ' -webkit-transform: translate3d(0px, 0, 0);' + ' transform: translate3d(0px, 0, 0);' + ' }' - + ' .ui.visible.top.sidebar ~ .pusher:after {' - + ' -webkit-transform: translate3d(0, ' + height + 'px, 0);' - + ' transform: translate3d(0, ' + height + 'px, 0);' - + ' }' - + ' .ui.visible.bottom.sidebar ~ .pusher:after {' - + ' -webkit-transform: translate3d(0, -' + height + 'px, 0);' - + ' transform: translate3d(0, -' + height + 'px, 0);' - + ' }' ; } - - style += '</style>'; - - $head.append(style); - $style = $('style[title=' + namespace + ']'); + style += '</style>'; + $style = $(style) + .appendTo($head) + ; module.debug('Adding sizing css to head', $style); } }, @@ -9969,6 +14768,8 @@ $.fn.sidebar = function(parameters) { $context = $(settings.context); $sidebars = $context.children(selector.sidebar); $pusher = $context.children(selector.pusher); + $fixed = $context.children(selector.fixed); + module.clear.cache(); }, refreshSidebars: function() { @@ -9978,15 +14779,22 @@ $.fn.sidebar = function(parameters) { repaint: function() { module.verbose('Forcing repaint event'); - element.style.display='none'; - element.offsetHeight; + element.style.display = 'none'; + var ignored = element.offsetHeight; element.scrollTop = element.scrollTop; - element.style.display=''; + element.style.display = ''; }, setup: { + cache: function() { + module.cache = { + width : $module.outerWidth(), + height : $module.outerHeight(), + rtl : ($module.css('direction') == 'rtl') + }; + }, layout: function() { - if( $context.children(selector.pusher).size() === 0 ) { + if( $context.children(selector.pusher).length === 0 ) { module.debug('Adding wrapper element for sidebar'); module.error(error.pusher); $pusher = $('<div class="pusher" />'); @@ -9998,12 +14806,13 @@ $.fn.sidebar = function(parameters) { ; module.refresh(); } - if($module.nextAll(selector.pusher).size() === 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) { + if($module.nextAll(selector.pusher).length === 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) { module.debug('Moved sidebar to correct parent element'); module.error(error.movedSidebar, element); $module.detach().prependTo($context); module.refresh(); } + module.clear.cache(); module.set.pushable(); module.set.direction(); } @@ -10017,7 +14826,7 @@ $.fn.sidebar = function(parameters) { ? module[event] : module.toggle ; - if($toggle.size() > 0) { + if($toggle.length > 0) { module.debug('Attaching sidebar events to element', selector, event); $toggle .on('click' + eventNamespace, event) @@ -10029,11 +14838,6 @@ $.fn.sidebar = function(parameters) { }, show: function(callback) { - var - animateMethod = (settings.useLegacy) - ? module.legacyPushPage - : module.pushPage - ; callback = $.isFunction(callback) ? callback : function(){} @@ -10045,18 +14849,28 @@ $.fn.sidebar = function(parameters) { settings.transition = 'overlay'; } module.refresh(); - if(module.othersVisible() && module.get.transition() != 'overlay') { - module.debug('Other sidebars currently open'); + if(module.othersActive()) { + module.debug('Other sidebars currently visible'); if(settings.exclusive) { - module.hideOthers(); + // if not overlay queue animation after hide + if(settings.transition != 'overlay') { + module.hideOthers(module.show); + return; + } + else { + module.hideOthers(); + } + } + else { + settings.transition = 'overlay'; } } - animateMethod(function() { - $.proxy(callback, element)(); - $.proxy(settings.onShow, element)(); + module.pushPage(function() { + callback.call(element); + settings.onShow.call(element); }); - $.proxy(settings.onChange, element)(); - $.proxy(settings.onVisible, element)(); + settings.onChange.call(element); + settings.onVisible.call(element); } else { module.debug('Sidebar is already visible'); @@ -10064,11 +14878,6 @@ $.fn.sidebar = function(parameters) { }, hide: function(callback) { - var - animateMethod = (settings.useLegacy) - ? module.legacyPullPage - : module.pullPage - ; callback = $.isFunction(callback) ? callback : function(){} @@ -10076,26 +14885,32 @@ $.fn.sidebar = function(parameters) { if(module.is.visible() || module.is.animating()) { module.debug('Hiding sidebar', callback); module.refreshSidebars(); - animateMethod(function() { - $.proxy(callback, element)(); - $.proxy(settings.onHidden, element)(); + module.pullPage(function() { + callback.call(element); + settings.onHidden.call(element); }); - $.proxy(settings.onChange, element)(); - $.proxy(settings.onHide, element)(); + settings.onChange.call(element); + settings.onHide.call(element); } }, + othersAnimating: function() { + return ($sidebars.not($module).filter('.' + className.animating).length > 0); + }, othersVisible: function() { - return ($sidebars.not($module).filter('.' + className.visible).size() > 0); + return ($sidebars.not($module).filter('.' + className.visible).length > 0); + }, + othersActive: function() { + return(module.othersVisible() || module.othersAnimating()); }, hideOthers: function(callback) { var $otherSidebars = $sidebars.not($module).filter('.' + className.visible), - callback = callback || function(){}, - sidebarCount = $otherSidebars.size(), + sidebarCount = $otherSidebars.length, callbackCount = 0 ; + callback = callback || function(){}; $otherSidebars .sidebar('hide', function() { callbackCount++; @@ -10119,55 +14934,53 @@ $.fn.sidebar = function(parameters) { pushPage: function(callback) { var transition = module.get.transition(), - $transition = (transition == 'safe') - ? $context - : (transition == 'overlay' || module.othersVisible()) - ? $module - : $pusher, + $transition = (transition === 'overlay' || module.othersActive()) + ? $module + : $pusher, animate, + dim, transitionEnd ; callback = $.isFunction(callback) ? callback : function(){} ; - if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) { + if(settings.transition == 'scale down') { module.scrollToTop(); } - module.set.transition(); + module.set.transition(transition); module.repaint(); animate = function() { module.bind.clickaway(); - module.add.bodyCSS(); + module.add.inlineCSS(); module.set.animating(); module.set.visible(); - if(!module.othersVisible()) { - if(settings.dimPage) { - $pusher.addClass(className.dimmed); - } - } + }; + dim = function() { + module.set.dimmed(); }; transitionEnd = function(event) { if( event.target == $transition[0] ) { $transition.off(transitionEvent + elementNamespace, transitionEnd); module.remove.animating(); module.bind.scrollLock(); - $.proxy(callback, element)(); + callback.call(element); } }; $transition.off(transitionEvent + elementNamespace); $transition.on(transitionEvent + elementNamespace, transitionEnd); requestAnimationFrame(animate); + if(settings.dimPage && !module.othersVisible()) { + requestAnimationFrame(dim); + } }, pullPage: function(callback) { var transition = module.get.transition(), - $transition = (transition == 'safe') - ? $context - : (transition == 'overlay' || module.othersVisible()) - ? $module - : $pusher, + $transition = (transition == 'overlay' || module.othersActive()) + ? $module + : $pusher, animate, transitionEnd ; @@ -10181,6 +14994,7 @@ $.fn.sidebar = function(parameters) { module.unbind.scrollLock(); animate = function() { + module.set.transition(transition); module.set.animating(); module.remove.visible(); if(settings.dimPage && !module.othersVisible()) { @@ -10192,11 +15006,11 @@ $.fn.sidebar = function(parameters) { $transition.off(transitionEvent + elementNamespace, transitionEnd); module.remove.animating(); module.remove.transition(); - module.remove.bodyCSS(); + module.remove.inlineCSS(); if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) { module.scrollBack(); } - $.proxy(callback, element)(); + callback.call(element); } }; $transition.off(transitionEvent + elementNamespace); @@ -10204,62 +15018,6 @@ $.fn.sidebar = function(parameters) { requestAnimationFrame(animate); }, - legacyPushPage: function(callback) { - var - distance = $module.width(), - direction = module.get.direction(), - properties = {} - ; - distance = distance || $module.width(); - callback = $.isFunction(callback) - ? callback - : function(){} - ; - properties[direction] = distance; - module.debug('Using javascript to push context', properties); - module.set.visible(); - module.set.transition(); - module.set.animating(); - if(settings.dimPage) { - $pusher.addClass(className.dimmed); - } - $context - .css('position', 'relative') - .animate(properties, settings.duration, settings.easing, function() { - module.remove.animating(); - module.bind.clickaway(); - $.proxy(callback, module)(); - }) - ; - }, - legacyPullPage: function(callback) { - var - distance = 0, - direction = module.get.direction(), - properties = {} - ; - distance = distance || $module.width(); - callback = $.isFunction(callback) - ? callback - : function(){} - ; - properties[direction] = '0px'; - module.debug('Using javascript to pull context', properties); - module.unbind.clickaway(); - module.set.animating(); - module.remove.visible(); - if(settings.dimPage && !module.othersVisible()) { - $pusher.removeClass(className.dimmed); - } - $context - .css('position', 'relative') - .animate(properties, settings.duration, settings.easing, function() { - module.remove.animating(); - $.proxy(callback, module)(); - }) - ; - }, - scrollToTop: function() { module.verbose('Scrolling to top of page to avoid animation issues'); currentScroll = $(window).scrollTop(); @@ -10272,7 +15030,20 @@ $.fn.sidebar = function(parameters) { window.scrollTo(0, currentScroll); }, + clear: { + cache: function() { + module.verbose('Clearing cached dimensions'); + module.cache = {}; + } + }, + set: { + + // ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios + ios: function() { + $html.addClass(className.ios); + }, + // container pushed: function() { $context.addClass(className.pushed); @@ -10281,6 +15052,11 @@ $.fn.sidebar = function(parameters) { $context.addClass(className.pushable); }, + // pusher + dimmed: function() { + $pusher.addClass(className.dimmed); + }, + // sidebar active: function() { $module.addClass(className.active); @@ -10305,13 +15081,18 @@ $.fn.sidebar = function(parameters) { }, remove: { - bodyCSS: function() { - module.debug('Removing body css styles', $style); - if($style.size() > 0) { + inlineCSS: function() { + module.debug('Removing inline css styles', $style); + if($style && $style.length > 0) { $style.remove(); } }, + // ios scroll on html not document + ios: function() { + $html.removeClass(className.ios); + }, + // context pushed: function() { $context.removeClass(className.pushed); @@ -10361,7 +15142,7 @@ $.fn.sidebar = function(parameters) { direction = module.get.direction(), transition ; - return ( module.is.mobile() ) + transition = ( module.is.mobile() ) ? (settings.mobileTransition == 'auto') ? settings.defaultTransition.mobile[direction] : settings.mobileTransition @@ -10369,6 +15150,8 @@ $.fn.sidebar = function(parameters) { ? settings.defaultTransition.computer[direction] : settings.transition ; + module.verbose('Determined transition', transition); + return transition; }, transitionEvent: function() { var @@ -10386,9 +15169,6 @@ $.fn.sidebar = function(parameters) { return transitions[transition]; } } - }, - uniqueID: function() { - return (Math.random().toString(16) + '000000000').substr(2,8); } }, @@ -10402,35 +15182,24 @@ $.fn.sidebar = function(parameters) { return (isIE11 || isIE); }, - legacy: function() { + ios: function() { var - element = document.createElement('div'), - transforms = { - 'webkitTransform' :'-webkit-transform', - 'OTransform' :'-o-transform', - 'msTransform' :'-ms-transform', - 'MozTransform' :'-moz-transform', - 'transform' :'transform' - }, - has3D + userAgent = navigator.userAgent, + isIOS = userAgent.match(regExp.ios), + isMobileChrome = userAgent.match(regExp.mobileChrome) ; - - // Add it to the body to get the computed style. - document.body.insertBefore(element, null); - for (var transform in transforms) { - if (element.style[transform] !== undefined) { - element.style[transform] = "translate3d(1px,1px,1px)"; - has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]); - } + if(isIOS && !isMobileChrome) { + module.verbose('Browser was found to be iOS', userAgent); + return true; + } + else { + return false; } - document.body.removeChild(element); - return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none'); }, mobile: function() { var userAgent = navigator.userAgent, - mobileRegExp = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/, - isMobile = mobileRegExp.test(userAgent) + isMobile = userAgent.match(regExp.mobile) ; if(isMobile) { module.verbose('Browser was found to be mobile', userAgent); @@ -10459,6 +15228,12 @@ $.fn.sidebar = function(parameters) { }, animating: function() { return $context.hasClass(className.animating); + }, + rtl: function () { + if(module.cache.rtl === undefined) { + module.cache.rtl = ($module.css('direction') == 'rtl'); + } + return module.cache.rtl; } }, @@ -10531,7 +15306,7 @@ $.fn.sidebar = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -10645,7 +15420,7 @@ $.fn.sidebar.settings = { namespace : 'sidebar', debug : false, - verbose : true, + verbose : false, performance : true, transition : 'auto', @@ -10672,10 +15447,9 @@ $.fn.sidebar.settings = { dimPage : true, scrollLock : false, returnScroll : false, + delaySetup : false, - useLegacy : false, duration : 500, - easing : 'easeInOutQuint', onChange : function(){}, onShow : function(){}, @@ -10688,6 +15462,7 @@ $.fn.sidebar.settings = { active : 'active', animating : 'animating', dimmed : 'dimmed', + ios : 'ios', pushable : 'pushable', pushed : 'pushed', right : 'right', @@ -10704,6 +15479,12 @@ $.fn.sidebar.settings = { sidebar : '.ui.sidebar' }, + regExp: { + ios : /(iPad|iPhone|iPod)/g, + mobileChrome : /(CriOS)/g, + mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g + }, + error : { method : 'The method you called is not defined.', pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element', @@ -10714,23 +15495,15 @@ $.fn.sidebar.settings = { }; -// Adds easing -$.extend( $.easing, { - easeInOutQuint: function (x, t, b, c, d) { - if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; - return c/2*((t-=2)*t*t*t*t + 2) + b; - } -}); - -})( jQuery, window , document ); +})( jQuery, window, document ); - /* - * # Semantic - Sticky +/*! + * # Semantic UI 2.1.6 - Sticky * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributors + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -10757,7 +15530,9 @@ $.fn.sticky = function(parameters) { $allModules .each(function() { var - settings = $.extend(true, {}, $.fn.sticky.settings, parameters), + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.sticky.settings, parameters) + : $.extend({}, $.fn.sticky.settings), className = settings.className, namespace = settings.namespace, @@ -10768,8 +15543,8 @@ $.fn.sticky = function(parameters) { $module = $(this), $window = $(window), - $container = $module.offsetParent(), $scroll = $(settings.scrollContext), + $container, $context, selector = $module.selector || '', @@ -10789,37 +15564,18 @@ $.fn.sticky = function(parameters) { module = { initialize: function() { - if(settings.context) { - $context = $(settings.context); - } - else { - $context = $container; - } - if($context.size() === 0) { - module.error(error.invalidContext, settings.context, $module); - return; - } + + module.determineContainer(); + module.determineContext(); module.verbose('Initializing sticky', settings, $container); + module.save.positions(); + module.checkErrors(); + module.bind.events(); - // error conditions - 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; + if(settings.observeChanges) { + module.observeChanges(); } - - $window - .on('resize' + eventNamespace, module.event.resize) - ; - $scroll - .on('scroll' + eventNamespace, module.event.scroll) - ; - - module.observeChanges(); module.instantiate(); }, @@ -10832,17 +15588,19 @@ $.fn.sticky = function(parameters) { }, destroy: function() { - module.verbose('Destroying previous module'); + module.verbose('Destroying previous instance'); module.reset(); + if(observer) { + observer.disconnect(); + } $window + .off('load' + eventNamespace, module.event.load) .off('resize' + eventNamespace, module.event.resize) ; $scroll - .off('scroll' + eventNamespace, module.event.scroll) - ; - $module - .removeData(moduleNamespace) + .off('scrollchange' + eventNamespace, module.event.scrollchange) ; + $module.removeData(moduleNamespace); }, observeChanges: function() { @@ -10853,9 +15611,9 @@ $.fn.sticky = function(parameters) { observer = new MutationObserver(function(mutations) { clearTimeout(module.timer); module.timer = setTimeout(function() { - module.verbose('DOM tree modified, updating sticky menu'); + module.verbose('DOM tree modified, updating sticky menu', mutations); module.refresh(); - }, 200); + }, 100); }); observer.observe(element, { childList : true, @@ -10869,52 +15627,104 @@ $.fn.sticky = function(parameters) { } }, + determineContainer: function() { + $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: { + load: function() { + module.verbose('Page contents finished loading'); + requestAnimationFrame(module.refresh); + }, resize: function() { - requestAnimationFrame(function() { - module.refresh(); - module.stick(); - }); + module.verbose('Window resized'); + requestAnimationFrame(module.refresh); }, scroll: function() { requestAnimationFrame(function() { - module.stick(); - $.proxy(settings.onScroll, element)(); + $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) { - $container = $module.offsetParent(); + module.determineContainer(); } module.save.positions(); module.stick(); - $.proxy(settings.onReposition, element)(); + settings.onReposition.call(element); }, supports: { sticky: function() { var $element = $('<div/>'), - element = $element.get() - ; - $element - .addClass(className.supported) + element = $element[0] ; + $element.addClass(className.supported); return($element.css('position').match('sticky')); } }, save: { - scroll: function(scroll) { + lastScroll: function(scroll) { module.lastScroll = scroll; }, + elementScroll: function(scroll) { + module.elementScroll = scroll; + }, positions: function() { var - window = { - height: $window.height() + scrollContext = { + height : $scroll.height() }, element = { margin: { @@ -10926,14 +15736,28 @@ $.fn.sticky = function(parameters) { height : $module.outerHeight() }, context = { - offset: $context.offset(), - height: $context.outerHeight() + 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 < window.height ), - window: { - height: window.height + fits : ( element.height < scrollContext.height ), + scrollContext : { + height : scrollContext.height }, element: { margin : element.margin, @@ -10944,9 +15768,9 @@ $.fn.sticky = function(parameters) { bottom : element.offset.top + element.height }, context: { - top : context.offset.top, - height : context.height, - bottom : context.offset.top + context.height + top : context.offset.top, + height : context.height, + bottom : context.offset.top + context.height } }; module.set.containerSize(); @@ -10980,26 +15804,29 @@ $.fn.sticky = function(parameters) { ; }, 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, - window = module.cache.window, + scrollContext = module.cache.scrollContext, delta = module.get.scrollChange(scroll), - maxScroll = (element.height - window.height + settings.offset), - currentScroll = module.get.currentElementScroll(), - possibleScroll = (currentScroll + delta), - elementScroll + 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 ) { + else if(possibleScroll > maxScroll ) { elementScroll = maxScroll; } else { @@ -11010,6 +15837,12 @@ $.fn.sticky = function(parameters) { }, remove: { + lastScroll: function() { + delete module.lastScroll; + }, + elementScroll: function(scroll) { + delete module.elementScroll; + }, offset: function() { $module.css('margin-top', ''); } @@ -11018,7 +15851,9 @@ $.fn.sticky = function(parameters) { set: { offset: function() { module.verbose('Setting offset on element', settings.offset); - $module.css('margin-top', settings.offset); + $module + .css('margin-top', settings.offset) + ; }, containerSize: function() { var @@ -11027,15 +15862,30 @@ $.fn.sticky = function(parameters) { if(tagName === 'HTML' || tagName == 'body') { // this can trigger for too many reasons //module.error(error.container, tagName, $module); - $container = $module.offsetParent(); + module.determineContainer(); } else { - module.debug('Settings container size', module.cache.context.height); - $container.height(module.cache.context.height); + 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', '') @@ -11051,17 +15901,16 @@ $.fn.sticky = function(parameters) { }, size: function() { if(module.cache.element.height !== 0 && module.cache.element.width !== 0) { - $module - .css({ - width : module.cache.element.width, - height : module.cache.element.height - }) - ; + 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); }, @@ -11082,54 +15931,67 @@ $.fn.sticky = function(parameters) { } }, - stick: function() { + stick: function(scroll) { var + cachedPosition = scroll || $scroll.scrollTop(), cache = module.cache, fits = cache.fits, element = cache.element, - window = cache.window, + scrollContext = cache.scrollContext, context = cache.context, offset = (module.is.bottom() && settings.pushing) ? settings.bottomOffset : settings.offset, scroll = { - top : $scroll.scrollTop() + offset, - bottom : $scroll.scrollTop() + offset + window.height + top : cachedPosition + offset, + bottom : cachedPosition + offset + scrollContext.height }, direction = module.get.direction(scroll.top), - elementScroll = module.get.elementScroll(scroll.top), + elementScroll = (fits) + ? 0 + : module.get.elementScroll(scroll.top), // shorthand doesntFit = !fits, elementVisible = (element.height !== 0) ; - // save current scroll for next run - module.save.scroll(scroll.top); - if(elementVisible) { if( module.is.initialPosition() ) { - if(scroll.top >= element.top) { - module.debug('Element passed, fixing element to page'); - module.fixTop(); + 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 ) { + if( scroll.top <= element.top ) { module.debug('Fixed element reached top of container'); module.setInitialPosition(); } - else if( (element.height + scroll.top - elementScroll) > context.bottom ) { + 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); } } @@ -11137,33 +15999,41 @@ $.fn.sticky = function(parameters) { else if(module.is.bottom() ) { // top edge - if( (scroll.bottom - element.height) < element.top) { + 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) { + 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(settings.pushing) { - if(module.is.bound() && scroll.bottom < context.bottom ) { - module.debug('Fixing bottom attached element to bottom of browser.'); - module.fixBottom(); - } + if( scroll.top <= element.top ) { + module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button'); + module.setInitialPosition(); } else { - if(module.is.bound() && (scroll.top < context.bottom - element.height) ) { - module.debug('Fixing bottom attached element to top of browser.'); - module.fixTop(); + 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(); + } } } } @@ -11174,34 +16044,38 @@ $.fn.sticky = function(parameters) { module.debug('Binding element to top of parent container'); module.remove.offset(); $module - .css('left' , '') - .css('top' , '') - .css('bottom' , '') + .css({ + left : '', + top : '', + marginBottom : '' + }) .removeClass(className.fixed) .removeClass(className.bottom) .addClass(className.bound) .addClass(className.top) ; - $.proxy(settings.onTop, element)(); - $.proxy(settings.onUnstick, element)(); + settings.onTop.call(element); + settings.onUnstick.call(element); }, bindBottom: function() { module.debug('Binding element to bottom of parent container'); module.remove.offset(); $module - .css('left' , '') - .css('top' , '') - .css('bottom' , '') + .css({ + left : '', + top : '' + }) .removeClass(className.fixed) .removeClass(className.top) .addClass(className.bound) .addClass(className.bottom) ; - $.proxy(settings.onBottom, element)(); - $.proxy(settings.onUnstick, element)(); + settings.onBottom.call(element); + settings.onUnstick.call(element); }, setInitialPosition: function() { + module.debug('Returning to initial position'); module.unfix(); module.unbind(); }, @@ -11209,49 +16083,63 @@ $.fn.sticky = function(parameters) { fixTop: function() { module.debug('Fixing element to top of page'); + module.set.minimumSize(); module.set.offset(); $module - .css('left', module.cache.element.left) + .css({ + left : module.cache.element.left, + bottom : '', + marginBottom : '' + }) .removeClass(className.bound) .removeClass(className.bottom) .addClass(className.fixed) .addClass(className.top) ; - $.proxy(settings.onStick, element)(); + 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) + .css({ + left : module.cache.element.left, + bottom : '', + marginBottom : '' + }) .removeClass(className.bound) .removeClass(className.top) .addClass(className.fixed) .addClass(className.bottom) ; - $.proxy(settings.onStick, element)(); + settings.onStick.call(element); }, unbind: function() { - module.debug('Removing absolute position on element'); - module.remove.offset(); - $module - .removeClass(className.bound) - .removeClass(className.top) - .removeClass(className.bottom) - ; + 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() { - module.debug('Removing fixed position on element'); - module.remove.offset(); - $module - .removeClass(className.fixed) - .removeClass(className.top) - .removeClass(className.bottom) - ; - $.proxy(settings.onUnstick, this)(); + 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() { @@ -11259,13 +16147,13 @@ $.fn.sticky = function(parameters) { module.unbind(); module.unfix(); module.resetCSS(); + module.remove.offset(); + module.remove.lastScroll(); }, resetCSS: function() { $module .css({ - top : '', - bottom : '', width : '', height : '' }) @@ -11439,7 +16327,7 @@ $.fn.sticky = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -11454,25 +16342,49 @@ $.fn.sticky = function(parameters) { $.fn.sticky.settings = { - name : 'Sticky', - namespace : 'sticky', + name : 'Sticky', + namespace : 'sticky', - debug : false, - verbose : false, - performance : false, + debug : false, + verbose : true, + performance : true, - pushing : false, - context : false, - scrollContext : window, - offset : 0, - bottomOffset : 0, + // whether to stick in the opposite direction on scroll up + pushing : false, + + context : 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, - onReposition : function(){}, - onScroll : function(){}, - onStick : function(){}, - onUnstick : function(){}, - onTop : function(){}, - onBottom : function(){}, + // 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', @@ -11492,14 +16404,13 @@ $.fn.sticky.settings = { }; -})( jQuery, window , document ); - - /* - * # Semantic - Tab +})( jQuery, window, document ); +/*! + * # Semantic UI 2.1.6 - Tab * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributors + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -11509,7 +16420,7 @@ $.fn.sticky.settings = { "use strict"; -$.tab = $.fn.tab = function(parameters) { +$.fn.tab = function(parameters) { var // use window context if none specified @@ -11517,10 +16428,6 @@ $.tab = $.fn.tab = function(parameters) { ? $(window) : $(this), - settings = ( $.isPlainObject(parameters) ) - ? $.extend(true, {}, $.fn.tab.settings, parameters) - : $.extend({}, $.fn.tab.settings), - moduleSelector = $allModules.selector || '', time = new Date().getTime(), performance = [], @@ -11529,65 +16436,94 @@ $.tab = $.fn.tab = function(parameters) { methodInvoked = (typeof query == 'string'), queryArguments = [].slice.call(arguments, 1), - module, + initializedHistory = false, returnedValue ; - $allModules .each(function() { var - className = settings.className, - metadata = settings.metadata, - selector = settings.selector, - error = settings.error, - - eventNamespace = '.' + settings.namespace, - moduleNamespace = 'module-' + settings.namespace, + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.tab.settings, parameters) + : $.extend({}, $.fn.tab.settings), - $module = $(this), + className = settings.className, + metadata = settings.metadata, + selector = settings.selector, + error = settings.error, - cache = {}, - firstLoad = true, - recursionDepth = 0, + eventNamespace = '.' + settings.namespace, + moduleNamespace = 'module-' + settings.namespace, + $module = $(this), $context, $tabs, + + cache = {}, + firstLoad = true, + recursionDepth = 0, + element = this, + instance = $module.data(moduleNamespace), + activeTabPath, parameterArray, - historyEvent, + module, + + historyEvent - element = this, - instance = $module.data(moduleNamespace) ; module = { initialize: function() { module.debug('Initializing tab menu item', $module); - + module.fix.callbacks(); module.determineTabs(); - module.debug('Determining tabs', settings.context, $tabs); + module.debug('Determining tabs', settings.context, $tabs); // set up automatic routing if(settings.auto) { - module.verbose('Setting up automatic tab retrieval from server'); - settings.apiSettings = { - url: settings.path + '/{$tab}' - }; + module.set.auto(); } + module.bind.events(); - // attach events if navigation wasn't set to window - if( !$.isWindow( element ) ) { - module.debug('Attaching tab activation events to element', $module); - $module - .on('click' + eventNamespace, module.event.click) - ; + if(settings.history && !initializedHistory) { + module.initializeHistory(); + initializedHistory = true; } + module.instantiate(); }, + instantiate: function () { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying tabs', $module); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + }, + + bind: { + events: function() { + // if using $.tab don't add events + if( !$.isWindow( element ) ) { + module.debug('Attaching tab activation events to element', $module); + $module + .on('click' + eventNamespace, module.event.click) + ; + } + } + }, + determineTabs: function() { var $reference @@ -11595,9 +16531,9 @@ $.tab = $.fn.tab = function(parameters) { // determine tab context if(settings.context === 'parent') { - if($module.closest(selector.ui).size() > 0) { + if($module.closest(selector.ui).length > 0) { $reference = $module.closest(selector.ui); - module.verbose('Using closest UI element for determining parent', $reference); + module.verbose('Using closest UI element as parent', $reference); } else { $reference = $module; @@ -11612,7 +16548,6 @@ $.tab = $.fn.tab = function(parameters) { else { $context = $('body'); } - // find tabs if(settings.childrenOnly) { $tabs = $context.children(selector.tabs); @@ -11624,47 +16559,48 @@ $.tab = $.fn.tab = function(parameters) { } }, - initializeHistory: function() { - if(settings.history) { - module.debug('Initializing page state'); - if( $.address === undefined ) { - module.error(error.state); - return false; - } - else { - if(settings.historyType == 'state') { - module.debug('Using HTML5 to manage state'); - if(settings.path !== false) { - $.address - .history(true) - .state(settings.path) - ; - } - else { - module.error(error.path); - return false; - } + fix: { + callbacks: function() { + if( $.isPlainObject(parameters) && (parameters.onTabLoad || parameters.onTabInit) ) { + if(parameters.onTabLoad) { + parameters.onLoad = parameters.onTabLoad; + delete parameters.onTabLoad; + module.error(error.legacyLoad, parameters.onLoad); } - $.address - .bind('change', module.event.history.change) - ; + if(parameters.onTabInit) { + parameters.onFirstLoad = parameters.onTabInit; + delete parameters.onTabInit; + module.error(error.legacyInit, parameters.onFirstLoad); + } + settings = $.extend(true, {}, $.fn.tab.settings, parameters); } } }, - instantiate: function () { - module.verbose('Storing instance of module', module); - $module - .data(moduleNamespace, module) - ; - }, - - destroy: function() { - module.debug('Destroying tabs', $module); - $module - .removeData(moduleNamespace) - .off(eventNamespace) - ; + initializeHistory: function() { + module.debug('Initializing page state'); + if( $.address === undefined ) { + module.error(error.state); + return false; + } + else { + if(settings.historyType == 'state') { + module.debug('Using HTML5 to manage state'); + if(settings.path !== false) { + $.address + .history(true) + .state(settings.path) + ; + } + else { + module.error(error.path); + return false; + } + } + $.address + .bind('change', module.event.history.change) + ; + } }, event: { @@ -11734,6 +16670,39 @@ $.tab = $.fn.tab = function(parameters) { }, set: { + auto: function() { + var + url = (typeof settings.path == 'string') + ? settings.path.replace(/\/$/, '') + '/{$tab}' + : '/{$tab}' + ; + module.verbose('Setting up automatic tab retrieval from server', url); + if($.isPlainObject(settings.apiSettings)) { + settings.apiSettings.url = url; + } + else { + settings.apiSettings = { + url: url + }; + } + }, + loading: function(tabPath) { + var + $tab = module.get.tabElement(tabPath), + isLoading = $tab.hasClass(className.loading) + ; + if(!isLoading) { + module.verbose('Setting loading state for', $tab); + $tab + .addClass(className.loading) + .siblings($tabs) + .removeClass(className.active + ' ' + className.loading) + ; + if($tab.length > 0) { + settings.onRequest.call($tab[0], tabPath); + } + } + }, state: function(state) { $.address.value(state); } @@ -11744,7 +16713,7 @@ $.tab = $.fn.tab = function(parameters) { pushStateAvailable = (window.history && window.history.pushState), shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ), - // only get default path if not remote content + // only add default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) : module.get.defaultPathArray(tabPath) @@ -11767,9 +16736,8 @@ $.tab = $.fn.tab = function(parameters) { module.verbose('Looking for tab', tab); if(isTab) { module.verbose('Tab was found', tab); - // scope up - activeTabPath = currentPath; + activeTabPath = currentPath; parameterArray = module.utilities.filterArray(pathArray, currentPathArray); if(isLastIndex) { @@ -11786,15 +16754,15 @@ $.tab = $.fn.tab = function(parameters) { if(isLastTab && remoteContent) { if(!shouldIgnoreLoad) { module.activate.navigation(currentPath); - module.content.fetch(currentPath, tabPath); + module.fetch.content(currentPath, tabPath); } else { module.debug('Ignoring remote content on first tab load', currentPath); firstLoad = false; module.cache.add(tabPath, $tab.html()); module.activate.all(currentPath); - $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); - $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); + settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent); + settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent); } return false; } @@ -11804,25 +16772,32 @@ $.tab = $.fn.tab = function(parameters) { if( !module.cache.read(currentPath) ) { module.cache.add(currentPath, true); module.debug('First time tab loaded calling tab init'); - $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); + settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent); } - $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); + settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent); } + } - else if(tabPath.search('/') == -1) { + else if(tabPath.search('/') == -1 && tabPath !== '') { // look for in page anchor - $anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'), - currentPath = $anchor.closest('[data-tab]').data('tab'); + $anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'); + currentPath = $anchor.closest('[data-tab]').data(metadata.tab); $tab = module.get.tabElement(currentPath); // if anchor exists use parent tab - if($anchor && $anchor.size() > 0 && currentPath) { - module.debug('No tab found, but deep anchor link present, opening parent tab'); + if($anchor && $anchor.length > 0 && currentPath) { + module.debug('Anchor link used, opening parent tab', $tab, $anchor); + if( !$tab.hasClass(className.active) ) { + setTimeout(function() { + module.scrollTo($anchor); + }, 0); + } module.activate.all(currentPath); if( !module.cache.read(currentPath) ) { module.cache.add(currentPath, true); module.debug('First time tab loaded calling tab init'); - $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); + settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent); } + settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent); return false; } } @@ -11833,17 +16808,55 @@ $.tab = $.fn.tab = function(parameters) { }); }, - content: { + scrollTo: function($element) { + var + scrollOffset = ($element && $element.length > 0) + ? $element.offset().top + : false + ; + if(scrollOffset !== false) { + module.debug('Forcing scroll to an in-page link in a hidden tab', scrollOffset, $element); + $(document).scrollTop(scrollOffset); + } + }, - fetch: function(tabPath, fullTabPath) { + update: { + content: function(tabPath, html, evaluateScripts) { var - $tab = module.get.tabElement(tabPath), - apiSettings = { - dataType : 'html', - stateContext : $tab, - onSuccess : function(response) { + $tab = module.get.tabElement(tabPath), + tab = $tab[0] + ; + evaluateScripts = (evaluateScripts !== undefined) + ? evaluateScripts + : settings.evaluateScripts + ; + if(evaluateScripts) { + module.debug('Updating HTML and evaluating inline scripts', tabPath, html); + $tab.html(html); + } + else { + module.debug('Updating HTML', tabPath, html); + tab.innerHTML = html; + } + } + }, + + fetch: { + + content: function(tabPath, fullTabPath) { + var + $tab = module.get.tabElement(tabPath), + apiSettings = { + dataType : 'html', + encodeParameters : false, + on : 'now', + cache : settings.alwaysRefresh, + headers : { + 'X-Remote': true + }, + onSuccess : function(response) { module.cache.add(fullTabPath, response); - module.content.update(tabPath, response); + module.update.content(tabPath, response); if(tabPath == activeTabPath) { module.debug('Content loaded', tabPath); module.activate.tab(tabPath); @@ -11851,12 +16864,14 @@ $.tab = $.fn.tab = function(parameters) { else { module.debug('Content loaded in background', tabPath); } - $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); - $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); + settings.onFirstLoad.call($tab[0], tabPath, parameterArray, historyEvent); + settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent); }, - urlData: { tab: fullTabPath } + urlData: { + tab: fullTabPath + } }, - request = $tab.data(metadata.promise) || false, + request = $tab.api('get request') || false, existingRequest = ( request && request.state() === 'pending' ), requestSettings, cachedContent @@ -11865,36 +16880,31 @@ $.tab = $.fn.tab = function(parameters) { fullTabPath = fullTabPath || tabPath; cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { - module.debug('Showing existing content', fullTabPath); - module.content.update(tabPath, cachedContent); module.activate.tab(tabPath); - $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); + module.debug('Adding cached content', fullTabPath); + if(settings.evaluateScripts == 'once') { + module.update.content(tabPath, cachedContent, false); + } + else { + module.update.content(tabPath, cachedContent); + } + settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent); } else if(existingRequest) { + module.set.loading(tabPath); module.debug('Content is already loading', fullTabPath); - $tab - .addClass(className.loading) - ; } else if($.api !== undefined) { - requestSettings = $.extend(true, { headers: { 'X-Remote': true } }, settings.apiSettings, apiSettings); + requestSettings = $.extend(true, {}, settings.apiSettings, apiSettings); module.debug('Retrieving remote content', fullTabPath, requestSettings); - $.api( requestSettings ); + module.set.loading(tabPath); + $tab.api(requestSettings); } else { module.error(error.api); } - }, - - update: function(tabPath, html) { - module.debug('Updating html for', tabPath); - var - $tab = module.get.tabElement(tabPath) - ; - $tab - .html(html) - ; } }, @@ -11905,25 +16915,34 @@ $.tab = $.fn.tab = function(parameters) { }, tab: function(tabPath) { var - $tab = module.get.tabElement(tabPath) + $tab = module.get.tabElement(tabPath), + isActive = $tab.hasClass(className.active) ; module.verbose('Showing tab content for', $tab); - $tab - .addClass(className.active) - .siblings($tabs) - .removeClass(className.active + ' ' + className.loading) - ; + if(!isActive) { + $tab + .addClass(className.active) + .siblings($tabs) + .removeClass(className.active + ' ' + className.loading) + ; + if($tab.length > 0) { + settings.onVisible.call($tab[0], tabPath); + } + } }, navigation: function(tabPath) { var - $navigation = module.get.navElement(tabPath) + $navigation = module.get.navElement(tabPath), + isActive = $navigation.hasClass(className.active) ; module.verbose('Activating tab navigation for', $navigation, tabPath); - $navigation - .addClass(className.active) - .siblings($allModules) - .removeClass(className.active + ' ' + className.loading) - ; + if(!isActive) { + $navigation + .addClass(className.active) + .siblings($allModules) + .removeClass(className.active + ' ' + className.loading) + ; + } } }, @@ -11947,7 +16966,7 @@ $.tab = $.fn.tab = function(parameters) { is: { tab: function(tabName) { return (tabName !== undefined) - ? ( module.get.tabElement(tabName).size() > 0 ) + ? ( module.get.tabElement(tabName).length > 0 ) : false ; } @@ -11997,9 +17016,9 @@ $.tab = $.fn.tab = function(parameters) { tabPath = tabPath || activeTabPath; tabPathArray = module.utilities.pathToArray(tabPath); lastTab = module.utilities.last(tabPathArray); - $fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]'); - $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); - return ($fullPathTab.size() > 0) + $fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); + $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]'); + return ($fullPathTab.length > 0) ? $fullPathTab : $simplePathTab ; @@ -12107,7 +17126,7 @@ $.tab = $.fn.tab = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -12193,7 +17212,6 @@ $.tab = $.fn.tab = function(parameters) { return found; } }; - if(methodInvoked) { if(instance === undefined) { module.initialize(); @@ -12202,15 +17220,12 @@ $.tab = $.fn.tab = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } }) ; - if(module && !methodInvoked) { - module.initializeHistory(); - } return (returnedValue !== undefined) ? returnedValue : this @@ -12219,60 +17234,53 @@ $.tab = $.fn.tab = function(parameters) { }; // shortcut for tabbed content with no defined navigation -$.tab = function(settings) { - $(window).tab(settings); +$.tab = function() { + $(window).tab.apply(this, arguments); }; $.fn.tab.settings = { - name : 'Tab', - namespace : 'tab', - - debug : false, - verbose : true, - performance : true, - - // uses pjax style endpoints fetching content from same url with remote-content headers - auto : false, - history : false, - historyType : 'hash', - path : false, + name : 'Tab', + namespace : 'tab', - context : false, - childrenOnly : false, - - // max depth a tab can be nested - maxDepth : 25, - - // dont load content on first load - ignoreFirstLoad : false, + debug : false, + verbose : false, + performance : true, - // load tab content new every tab click - alwaysRefresh : false, + auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers + history : false, // use browser history + historyType : 'hash', // #/ or html5 state + path : false, // base path of url - // cache the content requests to pull locally - cache : true, + context : false, // specify a context that tabs must appear inside + childrenOnly : false, // use only tabs that are children of context + maxDepth : 25, // max depth a tab can be nested - // settings for api call - apiSettings : false, + alwaysRefresh : false, // load tab content new every tab click + cache : true, // cache the content requests to pull locally + ignoreFirstLoad : false, // don't load remote content on first load - // only called first time a tab's content is loaded (when remote source) - onTabInit : function(tabPath, parameterArray, historyEvent) {}, + apiSettings : false, // settings for api call + evaluateScripts : 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content - // called on every load - onTabLoad : function(tabPath, parameterArray, historyEvent) {}, + onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded + onLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load + onVisible : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible + onRequest : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content templates : { - determineTitle: function(tabArray) {} + determineTitle: function(tabArray) {} // returns page title for path }, error: { api : 'You attempted to load content without API module', method : 'The method you called is not defined', - missingTab : 'Activated tab cannot be found for this context.', + missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.', noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', recursion : 'Max recursive depth reached', + legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.', + legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code', state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>' }, @@ -12294,13 +17302,14 @@ $.fn.tab.settings = { }; -})( jQuery, window , document ); -/* - * # Semantic - Transition +})( jQuery, window, document ); + +/*! + * # Semantic UI 2.1.6 - Transition * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -12332,7 +17341,7 @@ $.fn.transition = function() { returnedValue ; $allModules - .each(function() { + .each(function(index) { var $module = $(this), element = this, @@ -12344,7 +17353,6 @@ $.fn.transition = function() { error, className, metadata, - animationStart, animationEnd, animationName, @@ -12359,32 +17367,41 @@ $.fn.transition = function() { initialize: function() { // get full settings - moduleNamespace = 'module-' + namespace; settings = module.get.settings.apply(element, moduleArguments); + + // shorthand className = settings.className; + error = settings.error; metadata = settings.metadata; - animationStart = module.get.animationStartEvent(); - animationEnd = module.get.animationEndEvent(); - animationName = module.get.animationName(); - error = settings.error; - namespace = settings.namespace; + // define namespace eventNamespace = '.' + settings.namespace; + moduleNamespace = 'module-' + settings.namespace; instance = $module.data(moduleNamespace) || module; + // get vendor specific events + animationEnd = module.get.animationEndEvent(); + if(methodInvoked) { methodInvoked = module.invoke(query); } - // no internal method was found matching query or query not made + + // method not invoked, lets run an animation if(methodInvoked === false) { module.verbose('Converted arguments into settings object', settings); - module.animate(); + if(settings.interval) { + module.delay(settings.animate); + } + else { + module.animate(); + } module.instantiate(); } }, instantiate: function() { module.verbose('Storing instance of module', module); + instance = module; $module .data(moduleNamespace, instance) ; @@ -12408,7 +17425,7 @@ $.fn.transition = function() { $parentElement = $module.parent(), $nextElement = $module.next() ; - if($nextElement.size() === 0) { + if($nextElement.length === 0) { $module.detach().appendTo($parentElement); } else { @@ -12423,6 +17440,31 @@ $.fn.transition = function() { ; }, + delay: function(interval) { + var + direction = module.get.animationDirection(), + shouldReverse, + delay + ; + if(!direction) { + direction = module.can.transition() + ? module.get.direction() + : 'static' + ; + } + interval = (interval !== undefined) + ? interval + : settings.interval + ; + shouldReverse = (settings.reverse == 'auto' && direction == className.outward); + delay = (shouldReverse || settings.reverse == true) + ? ($allModules.length - index) * settings.interval + : index * settings.interval + ; + module.debug('Delaying animation by', delay); + setTimeout(module.animate, delay); + }, + animate: function(overrideSettings) { settings = overrideSettings || settings; if(!module.is.supported()) { @@ -12432,29 +17474,34 @@ $.fn.transition = function() { module.debug('Preparing animation', settings.animation); if(module.is.animating()) { if(settings.queue) { - if(!settings.allowRepeats && module.has.direction() && module.is.occuring() && module.queuing !== true) { - module.error(error.repeated, settings.animation, $module); + if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) { + module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation); } else { module.queue(settings.animation); } return false; } + else if(!settings.allowRepeats && module.is.occurring()) { + module.debug('Animation is already occurring, will not execute repeated animation', settings.animation); + return false; + } else { - + module.debug('New animation started, completing previous early', settings.animation); + instance.complete(); } } if( module.can.animate() ) { module.set.animating(settings.animation); } else { - module.error(error.noAnimation, settings.animation); + module.error(error.noAnimation, settings.animation, element); } }, reset: function() { module.debug('Resetting animation to beginning conditions'); - module.remove.animationEndCallback(); + module.remove.animationCallbacks(); module.restore.conditions(); module.remove.animating(); }, @@ -12463,7 +17510,7 @@ $.fn.transition = function() { module.debug('Queueing animation of', animation); module.queuing = true; $module - .one(animationEnd + eventNamespace, function() { + .one(animationEnd + '.queue' + eventNamespace, function() { module.queuing = false; module.repaint(); module.animate.apply(this, settings); @@ -12471,41 +17518,84 @@ $.fn.transition = function() { ; }, - complete: function () { - module.verbose('CSS animation complete', settings.animation); - module.remove.animationEndCallback(); + complete: function (event) { + module.debug('Animation complete', settings.animation); + module.remove.completeCallback(); module.remove.failSafe(); if(!module.is.looping()) { if( module.is.outward() ) { module.verbose('Animation is outward, hiding element'); module.restore.conditions(); module.hide(); - $.proxy(settings.onHide, this)(); } else if( module.is.inward() ) { module.verbose('Animation is outward, showing element'); module.restore.conditions(); module.show(); - module.set.display(); - $.proxy(settings.onShow, this)(); } else { + module.verbose('Static animation completed'); module.restore.conditions(); + settings.onComplete.call(element); + } + } + }, + + force: { + visible: function() { + var + style = $module.attr('style'), + userStyle = module.get.userStyle(), + displayType = module.get.displayType(), + overrideStyle = userStyle + 'display: ' + displayType + ' !important;', + currentDisplay = $module.css('display'), + emptyStyle = (style === undefined || style === '') + ; + if(currentDisplay !== displayType) { + module.verbose('Overriding default display to show element', displayType); + $module + .attr('style', overrideStyle) + ; + } + else if(emptyStyle) { + $module.removeAttr('style'); + } + }, + hidden: function() { + var + style = $module.attr('style'), + currentDisplay = $module.css('display'), + emptyStyle = (style === undefined || style === '') + ; + if(currentDisplay !== 'none' && !module.is.hidden()) { + module.verbose('Overriding default display to hide element'); + $module + .css('display', 'none') + ; + } + else if(emptyStyle) { + $module + .removeAttr('style') + ; } - module.remove.animation(); - module.remove.animating(); } - $.proxy(settings.onComplete, this)(); }, has: { direction: function(animation) { + var + hasDirection = false + ; animation = animation || settings.animation; - if( animation.search(className.inward) !== -1 || animation.search(className.outward) !== -1) { - module.debug('Direction already set in animation'); - return true; + if(typeof animation === 'string') { + animation = animation.split(' '); + $.each(animation, function(index, word){ + if(word === className.inward || word === className.outward) { + hasDirection = true; + } + }); } - return false; + return hasDirection; }, inlineDisplay: function() { var @@ -12517,29 +17607,28 @@ $.fn.transition = function() { set: { animating: function(animation) { - animation = animation || settings.animation; - if(!module.is.animating()) { - module.save.conditions(); - } - module.remove.direction(); - module.remove.animationEndCallback(); - if(module.can.transition() && !module.has.direction()) { - module.set.direction(); - } - module.remove.hidden(); - module.set.display(); - $module - .addClass(className.animating) - .addClass(className.transition) - .addClass(animation) - .one(animationEnd + '.complete' + eventNamespace, module.complete) + var + animationClass, + direction ; - if(settings.useFailSafe) { - module.add.failSafe(); - } - module.set.duration(settings.duration); - $.proxy(settings.onStart, this)(); - module.debug('Starting tween', animation, $module.attr('class')); + // remove previous callbacks + module.remove.completeCallback(); + + // determine exact animation + animation = animation || settings.animation; + animationClass = module.get.animationClass(animation); + + // save animation class in cache to restore class names + module.save.animation(animationClass); + + // override display if necessary so animation appears visibly + module.force.visible(); + + module.remove.hidden(); + module.remove.direction(); + + module.start.animation(animationClass); + }, duration: function(animationName, duration) { duration = duration || settings.duration; @@ -12547,46 +17636,22 @@ $.fn.transition = function() { ? duration + 'ms' : duration ; - module.verbose('Setting animation duration', duration); - $module - .css({ - '-webkit-animation-duration': duration, - '-moz-animation-duration': duration, - '-ms-animation-duration': duration, - '-o-animation-duration': duration, - 'animation-duration': duration - }) - ; - }, - display: function() { - var - style = module.get.style(), - displayType = module.get.displayType(), - overrideStyle = style + 'display: ' + displayType + ' !important;' - ; - $module.css('display', ''); - module.refresh(); - if( $module.css('display') !== displayType ) { - module.verbose('Setting inline visibility to', displayType); + if(duration || duration === 0) { + module.verbose('Setting animation duration', duration); $module - .attr('style', overrideStyle) + .css({ + 'animation-duration': duration + }) ; } }, - direction: function() { - if($module.is(':visible') && !module.is.hidden()) { - module.debug('Automatically determining the direction of animation', 'Outward'); - $module - .removeClass(className.inward) - .addClass(className.outward) - ; + direction: function(direction) { + direction = direction || module.get.direction(); + if(direction == className.inward) { + module.set.inward(); } else { - module.debug('Automatically determining the direction of animation', 'Inward'); - $module - .removeClass(className.outward) - .addClass(className.inward) - ; + module.set.outward(); } }, looping: function() { @@ -12596,18 +17661,24 @@ $.fn.transition = function() { ; }, hidden: function() { - if(!module.is.hidden()) { - $module - .addClass(className.transition) - .addClass(className.hidden) - ; - if($module.css('display') !== 'none') { - module.verbose('Overriding default display to hide element'); - $module - .css('display', 'none') - ; - } - } + $module + .addClass(className.transition) + .addClass(className.hidden) + ; + }, + inward: function() { + module.debug('Setting direction to inward'); + $module + .removeClass(className.outward) + .addClass(className.inward) + ; + }, + outward: function() { + module.debug('Setting direction to outward'); + $module + .removeClass(className.inward) + .addClass(className.outward) + ; }, visible: function() { $module @@ -12617,48 +17688,52 @@ $.fn.transition = function() { } }, + start: { + animation: function(animationClass) { + animationClass = animationClass || module.get.animationClass(); + module.debug('Starting tween', animationClass); + $module + .addClass(animationClass) + .one(animationEnd + '.complete' + eventNamespace, module.complete) + ; + if(settings.useFailSafe) { + module.add.failSafe(); + } + module.set.duration(settings.duration); + settings.onStart.call(element); + } + }, + save: { + animation: function(animation) { + if(!module.cache) { + module.cache = {}; + } + module.cache.animation = animation; + }, displayType: function(displayType) { - $module.data(metadata.displayType, displayType); + if(displayType !== 'none') { + $module.data(metadata.displayType, displayType); + } }, transitionExists: function(animation, exists) { $.fn.transition.exists[animation] = exists; module.verbose('Saving existence of transition', animation, exists); - }, - conditions: function() { - var - clasName = $module.attr('class') || false, - style = $module.attr('style') || '' - ; - $module.removeClass(settings.animation); - module.remove.direction(); - module.cache = { - className : $module.attr('class'), - style : module.get.style() - }; - module.verbose('Saving original attributes', module.cache); } }, restore: { conditions: function() { - if(module.cache === undefined) { - return false; - } - if(module.cache.className) { - $module.attr('class', module.cache.className); - } - else { - $module.removeAttr('class'); - } - if(module.cache.style) { - module.verbose('Restoring original style attribute', module.cache.style); - $module.attr('style', module.cache.style); - } - if(module.is.looping()) { - module.remove.looping(); + var + animation = module.get.currentAnimation() + ; + if(animation) { + $module + .removeClass(animation) + ; + module.verbose('Removing animation class', module.cache); } - module.verbose('Restoring original attributes', module.cache); + module.remove.duration(); } }, @@ -12667,7 +17742,9 @@ $.fn.transition = function() { var duration = module.get.duration() ; - module.timer = setTimeout(module.complete, duration + 100); + module.timer = setTimeout(function() { + $module.triggerHandler(animationEnd); + }, duration + settings.failSafeDelay); module.verbose('Adding fail safe timer', module.timer); } }, @@ -12676,19 +17753,15 @@ $.fn.transition = function() { animating: function() { $module.removeClass(className.animating); }, - animation: function() { - $module - .css({ - '-webkit-animation' : '', - '-moz-animation' : '', - '-ms-animation' : '', - '-o-animation' : '', - 'animation' : '' - }) - ; + animationCallbacks: function() { + module.remove.queueCallback(); + module.remove.completeCallback(); + }, + queueCallback: function() { + $module.off('.queue' + eventNamespace); }, - animationEndCallback: function() { - $module.off('.complete'); + completeCallback: function() { + $module.off('.complete' + eventNamespace); }, display: function() { $module.css('display', ''); @@ -12699,6 +17772,11 @@ $.fn.transition = function() { .removeClass(className.outward) ; }, + duration: function() { + $module + .css('animation-duration', '') + ; + }, failSafe: function() { module.verbose('Removing fail safe timer', module.timer); if(module.timer) { @@ -12713,10 +17791,12 @@ $.fn.transition = function() { }, looping: function() { module.debug('Transitions are no longer looping'); - $module - .removeClass(className.looping) - ; - module.forceRepaint(); + if( module.is.looping() ) { + module.reset(); + $module + .removeClass(className.looping) + ; + } }, transition: function() { $module @@ -12767,9 +17847,66 @@ $.fn.transition = function() { } return $.fn.transition.settings; }, + animationClass: function(animation) { + var + animationClass = animation || settings.animation, + directionClass = (module.can.transition() && !module.has.direction()) + ? module.get.direction() + ' ' + : '' + ; + return className.animating + ' ' + + className.transition + ' ' + + directionClass + + animationClass + ; + }, + currentAnimation: function() { + return (module.cache && module.cache.animation !== undefined) + ? module.cache.animation + : false + ; + }, + currentDirection: function() { + return module.is.inward() + ? className.inward + : className.outward + ; + }, + direction: function() { + return module.is.hidden() || !module.is.visible() + ? className.inward + : className.outward + ; + }, + animationDirection: function(animation) { + var + direction + ; + animation = animation || settings.animation; + if(typeof animation === 'string') { + animation = animation.split(' '); + // search animation name for out/in class + $.each(animation, function(index, word){ + if(word === className.inward) { + direction = className.inward; + } + else if(word === className.outward) { + direction = className.outward; + } + }); + } + // return found direction + if(direction) { + return direction; + } + return false; + }, duration: function(duration) { duration = duration || settings.duration; - return (typeof settings.duration === 'string') + if(duration === false) { + duration = $module.css('animation-duration') || 0; + } + return (typeof duration === 'string') ? (duration.indexOf('ms') > -1) ? parseFloat(duration) : parseFloat(duration) * 1000 @@ -12786,32 +17923,12 @@ $.fn.transition = function() { } return $module.data(metadata.displayType); }, - style: function() { - var - style = $module.attr('style') || '' - ; + userStyle: function(style) { + style = style || $module.attr('style') || ''; return style.replace(/display.*?;/, ''); }, transitionExists: function(animation) { - return $.fn.transition.exists[animation]; - }, - animationName: function() { - var - element = document.createElement('div'), - animations = { - 'animation' :'animationName', - 'OAnimation' :'oAnimationName', - 'MozAnimation' :'mozAnimationName', - 'WebkitAnimation' :'webkitAnimationName' - }, - animation - ; - for(animation in animations){ - if( element.style[animation] !== undefined ){ - return animations[animation]; - } - } - return false; + return true; //$.fn.transition.exists[animation]; }, animationStartEvent: function() { var @@ -12855,10 +17972,10 @@ $.fn.transition = function() { can: { transition: function(forced) { var - elementClass = $module.attr('class'), - tagName = $module.prop('tagName'), animation = settings.animation, transitionExists = module.get.transitionExists(animation), + elementClass, + tagName, $clone, currentAnimation, inAnimation, @@ -12867,6 +17984,9 @@ $.fn.transition = function() { ; if( transitionExists === undefined || forced) { module.verbose('Determining whether animation exists'); + elementClass = $module.attr('class'); + tagName = $module.prop('tagName'); + $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module); currentAnimation = $clone .addClass(animation) @@ -12874,11 +17994,11 @@ $.fn.transition = function() { .removeClass(className.outward) .addClass(className.animating) .addClass(className.transition) - .css(animationName) + .css('animationName') ; inAnimation = $clone .addClass(className.inward) - .css(animationName) + .css('animationName') ; displayType = $clone .attr('class', elementClass) @@ -12889,6 +18009,8 @@ $.fn.transition = function() { .css('display') ; module.verbose('Determining final display state', displayType); + module.save.displayType(displayType); + $clone.remove(); if(currentAnimation != inAnimation) { module.debug('Direction exists for animation', animation); @@ -12902,7 +18024,6 @@ $.fn.transition = function() { module.debug('Static animation found', animation, displayType); directionExists = false; } - module.save.displayType(displayType); module.save.transitionExists(animation, directionExists); } return (transitionExists !== undefined) @@ -12929,10 +18050,10 @@ $.fn.transition = function() { looping: function() { return $module.hasClass(className.looping); }, - occuring: function(animation) { + occurring: function(animation) { animation = animation || settings.animation; - animation = animation.replace(' ', '.'); - return ( $module.filter(animation).size() > 0 ); + animation = '.' + animation.replace(' ', '.'); + return ( $module.filter(animation).length > 0 ); }, visible: function() { return $module.is(':visible'); @@ -12941,7 +18062,7 @@ $.fn.transition = function() { return $module.css('visibility') === 'hidden'; }, supported: function() { - return(animationName !== false && animationEnd !== false); + return(animationEnd !== false); } }, @@ -12950,34 +18071,63 @@ $.fn.transition = function() { if( module.is.animating() ) { module.reset(); } + element.blur(); // IE will trigger focus change if element is not blurred before hiding module.remove.display(); module.remove.visible(); module.set.hidden(); - module.repaint(); + module.force.hidden(); + settings.onHide.call(element); + settings.onComplete.call(element); + // module.repaint(); }, show: function(display) { module.verbose('Showing element', display); module.remove.hidden(); module.set.visible(); - module.repaint(); + module.force.visible(); + settings.onShow.call(element); + settings.onComplete.call(element); + // module.repaint(); + }, + + toggle: function() { + if( module.is.visible() ) { + module.hide(); + } + else { + module.show(); + } }, - start: function() { + stop: function() { + module.debug('Stopping current animation'); + $module.triggerHandler(animationEnd); + }, + + stopAll: function() { + module.debug('Stopping all animation'); + module.remove.queueCallback(); + $module.triggerHandler(animationEnd); + }, + + clear: { + queue: function() { + module.debug('Clearing animation queue'); + module.remove.queueCallback(); + } + }, + + enable: function() { module.verbose('Starting animation'); $module.removeClass(className.disabled); }, - stop: function() { + disable: function() { module.debug('Stopping animation'); $module.addClass(className.disabled); }, - toggle: function() { - module.debug('Toggling play status'); - $module.toggleClass(className.disabled); - }, - setting: function(name, value) { module.debug('Changing setting', name, value); if( $.isPlainObject(name) ) { @@ -13047,7 +18197,7 @@ $.fn.transition = function() { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 600); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -13063,8 +18213,8 @@ $.fn.transition = function() { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); @@ -13155,41 +18305,50 @@ $.fn.transition.exists = {}; $.fn.transition.settings = { // module info - name : 'Transition', + name : 'Transition', // debug content outputted to console - debug : false, + debug : false, // verbose debug output - verbose : true, + verbose : false, // performance data output - performance : true, + performance : true, // event namespace - namespace : 'transition', + namespace : 'transition', - // animation complete event - onStart : function() {}, - onComplete : function() {}, - onShow : function() {}, - onHide : function() {}, + // delay between animations in group + interval : 0, + + // whether group animations should be reversed + reverse : 'auto', + + // animation callback event + onStart : function() {}, + onComplete : function() {}, + onShow : function() {}, + onHide : function() {}, // whether timeout should be used to ensure callback fires in cases animationend does not - useFailSafe : false, + useFailSafe : true, + + // delay in ms for fail safe + failSafeDelay : 100, // whether EXACT animation can occur twice in a row - allowRepeats : false, + allowRepeats : false, // Override final display type on visible - displayType : false, + displayType : false, // animation duration - animation : 'fade', - duration : '500ms', + animation : 'fade', + duration : false, // new animations will occur after previous ones - queue : true, + queue : true, metadata : { displayType: 'display' @@ -13209,7 +18368,7 @@ $.fn.transition.settings = { // possible errors error: { - noAnimation : 'There is no css animation matching the one you specified.', + noAnimation : 'There is no css animation matching the one you specified. Please make sure your css is vendor prefixed, and you have included transition css.', repeated : 'That animation is already occurring, cancelling repeated animation', method : 'The method you called is not defined', support : 'This browser does not support CSS animations' @@ -13218,561 +18377,23 @@ $.fn.transition.settings = { }; -})( jQuery, window , document ); +})( jQuery, window, document ); - /* - * # Semantic - Video +/*! + * # Semantic UI 2.1.6 - API * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributors + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ -;(function ($, window, document, undefined) { +;(function ( $, window, document, undefined ) { "use strict"; -$.fn.video = function(parameters) { - - var - $allModules = $(this), - - moduleSelector = $allModules.selector || '', - - time = new Date().getTime(), - performance = [], - - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), - - requestAnimationFrame = window.requestAnimationFrame - || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback) { setTimeout(callback, 0); }, - - returnedValue - ; - - $allModules - .each(function() { - var - settings = ( $.isPlainObject(parameters) ) - ? $.extend(true, {}, $.fn.video.settings, parameters) - : $.extend({}, $.fn.video.settings), - - selector = settings.selector, - className = settings.className, - error = settings.error, - metadata = settings.metadata, - namespace = settings.namespace, - templates = settings.templates, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, - - $window = $(window), - $module = $(this), - $placeholder = $module.find(selector.placeholder), - $playButton = $module.find(selector.playButton), - $embed = $module.find(selector.embed), - - element = this, - instance = $module.data(moduleNamespace), - module - ; - - module = { - - initialize: function() { - module.debug('Initializing video'); - module.create(); - $placeholder - .on('click' + eventNamespace, module.play) - ; - $playButton - .on('click' + eventNamespace, module.play) - ; - module.instantiate(); - }, - - instantiate: function() { - module.verbose('Storing instance of module', module); - instance = module; - $module - .data(moduleNamespace, module) - ; - }, - - create: function() { - var - image = $module.data(metadata.image), - html = templates.video(image) - ; - $module.html(html); - module.refresh(); - if(!image) { - module.play(); - } - module.debug('Creating html for video element', html); - }, - - destroy: function() { - module.verbose('Destroying previous instance of video'); - module.reset(); - $module - .removeData(moduleNamespace) - .off(eventNamespace) - ; - $placeholder - .off(eventNamespace) - ; - $playButton - .off(eventNamespace) - ; - }, - - refresh: function() { - module.verbose('Refreshing selector cache'); - $placeholder = $module.find(selector.placeholder); - $playButton = $module.find(selector.playButton); - $embed = $module.find(selector.embed); - }, - - // sets new video - change: function(source, id, url) { - module.debug('Changing video to ', source, id, url); - $module - .data(metadata.source, source) - .data(metadata.id, id) - .data(metadata.url, url) - ; - settings.onChange(); - }, - - // clears video embed - reset: function() { - module.debug('Clearing video embed and showing placeholder'); - $module - .removeClass(className.active) - ; - $embed - .html(' ') - ; - $placeholder - .show() - ; - settings.onReset(); - }, - - // plays current video - play: function() { - module.debug('Playing video'); - var - source = $module.data(metadata.source) || false, - url = $module.data(metadata.url) || false, - id = $module.data(metadata.id) || false - ; - $embed - .html( module.generate.html(source, id, url) ) - ; - $module - .addClass(className.active) - ; - settings.onPlay(); - }, - - get: { - source: function(url) { - if(typeof url !== 'string') { - return false; - } - if(url.search('youtube.com') !== -1) { - return 'youtube'; - } - else if(url.search('vimeo.com') !== -1) { - return 'vimeo'; - } - return false; - }, - id: function(url) { - if(settings.regExp.youtube.test(url)) { - return url.match(settings.regExp.youtube)[1]; - } - else if(settings.regExp.vimeo.test(url)) { - return url.match(settings.regExp.vimeo)[2]; - } - return false; - } - }, - - generate: { - // generates iframe html - html: function(source, id, url) { - module.debug('Generating embed html'); - var - html - ; - // allow override of settings - source = source || settings.source; - id = id || settings.id; - if((source && id) || url) { - if(!source || !id) { - source = module.get.source(url); - id = module.get.id(url); - } - if(source == 'vimeo') { - html = '' - + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"' - + ' width="100%" height="100%"' - + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' - ; - } - else if(source == 'youtube') { - html = '' - + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"' - + ' width="100%" height="100%"' - + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' - ; - } - } - else { - module.error(error.noVideo); - } - return html; - }, - - // generate url parameters - url: function(source) { - var - api = (settings.api) - ? 1 - : 0, - autoplay = (settings.autoplay === 'auto') - ? ($module.data('image') !== undefined) - : settings.autoplay, - hd = (settings.hd) - ? 1 - : 0, - showUI = (settings.showUI) - ? 1 - : 0, - // opposite used for some params - hideUI = !(settings.showUI) - ? 1 - : 0, - url = '' - ; - if(source == 'vimeo') { - url = '' - + 'api=' + api - + '&title=' + showUI - + '&byline=' + showUI - + '&portrait=' + showUI - + '&autoplay=' + autoplay - ; - if(settings.color) { - url += '&color=' + settings.color; - } - } - if(source == 'ustream') { - url = '' - + 'autoplay=' + autoplay - ; - if(settings.color) { - url += '&color=' + settings.color; - } - } - else if(source == 'youtube') { - url = '' - + 'enablejsapi=' + api - + '&autoplay=' + autoplay - + '&autohide=' + hideUI - + '&hq=' + hd - + '&modestbranding=1' - ; - if(settings.color) { - url += '&color=' + settings.color; - } - } - return url; - } - }, - - setting: function(name, value) { - module.debug('Changing setting', name, value); - if( $.isPlainObject(name) ) { - $.extend(true, settings, name); - } - else if(value !== undefined) { - settings[name] = value; - } - else { - return settings[name]; - } - }, - internal: function(name, value) { - if( $.isPlainObject(name) ) { - $.extend(true, module, name); - } - else if(value !== undefined) { - module[name] = value; - } - else { - return module[name]; - } - }, - debug: function() { - if(settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.debug.apply(console, arguments); - } - } - }, - verbose: function() { - if(settings.verbose && settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.verbose.apply(console, arguments); - } - } - }, - error: function() { - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); - module.error.apply(console, arguments); - }, - performance: { - log: function(message) { - var - currentTime, - executionTime, - previousTime - ; - if(settings.performance) { - currentTime = new Date().getTime(); - previousTime = time || currentTime; - executionTime = currentTime - previousTime; - time = currentTime; - performance.push({ - 'Name' : message[0], - 'Arguments' : [].slice.call(message, 1) || '', - 'Element' : element, - 'Execution Time' : executionTime - }); - } - clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); - }, - display: function() { - var - title = settings.name + ':', - totalTime = 0 - ; - time = false; - clearTimeout(module.performance.timer); - $.each(performance, function(index, data) { - totalTime += data['Execution Time']; - }); - title += ' ' + totalTime + 'ms'; - if(moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; - } - 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) { - module.destroy(); - } - module.initialize(); - } - }) - ; - return (returnedValue !== undefined) - ? returnedValue - : this - ; -}; - -$.fn.video.settings = { - - name : 'Video', - namespace : 'video', - - debug : false, - verbose : true, - performance : true, - - metadata : { - id : 'id', - image : 'image', - source : 'source', - url : 'url' - }, - - source : false, - url : false, - id : false, - - aspectRatio : (16/9), - - onPlay : function(){}, - onReset : function(){}, - onChange : function(){}, - - // callbacks not coded yet (needs to use jsapi) - onPause : function() {}, - onStop : function() {}, - - width : 'auto', - height : 'auto', - - autoplay : 'auto', - color : '#442359', - hd : true, - showUI : false, - api : true, - - regExp : { - youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/, - vimeo : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/ - }, - - error : { - noVideo : 'No video specified', - method : 'The method you called is not defined' - }, - - className : { - active : 'active' - }, - - selector : { - embed : '.embed', - placeholder : '.placeholder', - playButton : '.play' - } -}; - -$.fn.video.settings.templates = { - video: function(image) { - var - html = '' - ; - if(image) { - html += '' - + '<i class="video play icon"></i>' - + '<img class="placeholder" src="' + image + '">' - ; - } - html += '<div class="embed"></div>'; - return html; - } -}; - - -})( jQuery, window , document ); - -/* - * # Semantic - API - * http://github.com/semantic-org/semantic-ui/ - * - * - * Copyright 2014 Contributor - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -;(function ( $, window, document, undefined ) { - $.api = $.fn.api = function(parameters) { var @@ -13823,10 +18444,11 @@ $.api = $.fn.api = function(parameters) { requestSettings, url, data, + requestStartTime, // standard module element = this, - context = $context.get(), + context = $context[0], instance = $module.data(moduleNamespace), module ; @@ -13834,20 +18456,8 @@ $.api = $.fn.api = function(parameters) { module = { initialize: function() { - var - triggerEvent = module.get.event() - ; - // bind events if(!methodInvoked) { - if( triggerEvent ) { - module.debug('Attaching API events to element', triggerEvent); - $module - .on(triggerEvent + eventNamespace, module.event.trigger) - ; - } - else { - module.query(); - } + module.bind.events(); } module.instantiate(); }, @@ -13868,16 +18478,87 @@ $.api = $.fn.api = function(parameters) { ; }, + 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 false; + } + }, + 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; } - // determine if an api event already occurred - if(module.is.loading() && settings.throttle === 0 ) { - module.debug('Cancelling request, previous request is still pending'); - 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) @@ -13886,49 +18567,39 @@ $.api = $.fn.api = function(parameters) { } // Add form content - if(settings.serializeForm !== false || $context.is('form')) { - if(settings.serializeForm == 'json') { - $.extend(true, settings.data, module.get.formData()); - } - else { - settings.data = module.get.formData(); - } + if(settings.serializeForm) { + settings.data = module.add.formData(settings.data); } // call beforesend and get any settings changes requestSettings = module.get.settings(); - // check if beforesend cancelled request + // check if before send cancelled request if(requestSettings === false) { + module.cancelled = true; module.error(error.beforeSend); return; } - - if(settings.url) { - // override with url if specified - module.debug('Using specified url', url); - url = module.add.urlData( settings.url ); - } else { - // otherwise find url from api endpoints - url = module.add.urlData( module.get.templateURL() ); - module.debug('Added URL Data to url', url); + module.cancelled = false; } - // exit conditions reached, missing url parameters - if( !url ) { - if($module.is('form')) { - module.debug('No url or action specified, defaulting to form action'); - url = $module.attr('action'); - } - else { - module.error(error.missingURL, settings.action); - return; - } + // 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; } - // add loading state - module.set.loading(); // look for jQuery ajax parameters in settings ajaxSettings = $.extend(true, {}, settings, { @@ -13941,33 +18612,94 @@ $.api = $.fn.api = function(parameters) { complete : function() {} }); - module.verbose('Creating AJAX request with settings', ajaxSettings); + module.debug('Querying URL', ajaxSettings.url); + module.verbose('Using AJAX settings', ajaxSettings); - if( !module.is.loading() ) { + if(settings.cache === 'local' && module.read.cachedResponse(url)) { + module.debug('Response returned from local cache'); module.request = module.create.request(); - module.xhr = module.create.xhr(); + module.request.resolveWith(context, [ module.read.cachedResponse(url) ]); + return; + } + + if( !settings.throttle ) { + module.debug('Sending request', data, ajaxSettings.method); + module.send.request(); } else { - // throttle additional requests - module.timer = setTimeout(function() { - module.request = module.create.request(); - module.xhr = module.create.xhr(); - }, settings.throttle); + 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(settings.filter).size() > 0); + return ($module.filter(selector.disabled).length > 0); + }, + form: function() { + return $module.is('form') || $context.is('form'); + }, + mocked: function() { + return (settings.mockResponse || settings.mockResponseAsync); + }, + input: function() { + return $module.is('input'); }, loading: function() { return (module.request && module.request.state() == 'pending'); + }, + 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( (settings.dataType !== 'json' && settings.dataType !== 'jsonp') || !$.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'); }, @@ -14013,6 +18745,10 @@ $.api = $.fn.api = function(parameters) { } else { module.verbose('Found required variable', variable, value); + value = (settings.encodeParameters) + ? module.get.urlEncodedValue(value) + : value + ; url = url.replace(templatedString, value); } }); @@ -14052,6 +18788,48 @@ $.api = $.fn.api = function(parameters) { } } 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); } }, @@ -14064,130 +18842,192 @@ $.api = $.fn.api = function(parameters) { }, xhr: { always: function() { - // calculate if loading time was below minimum threshold + // nothing special }, - done: function(response) { + done: function(response, textStatus, xhr) { var - context = this, - elapsedTime = (new Date().getTime() - time), - timeLeft = (settings.loadingDuration - elapsedTime) + context = this, + elapsedTime = (new Date().getTime() - requestStartTime), + timeLeft = (settings.loadingDuration - elapsedTime), + translatedResponse = ( $.isFunction(settings.onResponse) ) + ? settings.onResponse.call(context, $.extend(true, {}, 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() { - module.request.resolveWith(context, [response]); + 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() - time), + elapsedTime = (new Date().getTime() - requestStartTime), timeLeft = (settings.loadingDuration - elapsedTime) ; timeLeft = (timeLeft > 0) ? timeLeft : 0 ; - // page triggers abort on navigation, dont show error + if(timeLeft > 0) { + module.debug('Response completed early delaying state change by', timeLeft); + } setTimeout(function() { - if(status !== 'abort') { - module.request.rejectWith(context, [xhr, status, httpMessage]); + if( module.is.abortedRequest(xhr) ) { + module.request.rejectWith(context, [xhr, 'aborted', httpMessage]); } else { - module.reset(); + module.request.rejectWith(context, [xhr, 'error', status, httpMessage]); } }, timeLeft); } }, request: { - complete: function(response) { - module.remove.loading(); - $.proxy(settings.onComplete, context)(response, $module); + 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); }, - done: function(response) { - module.debug('API Response Received', response); - if(settings.dataType == 'json') { - if( $.isFunction(settings.successTest) ) { - module.debug('Checking JSON returned success', settings.successTest, response); - if( settings.successTest(response) ) { - $.proxy(settings.onSuccess, context)(response, $module); - } - else { - module.debug('JSON test specified by user and response failed', response); - $.proxy(settings.onFailure, context)(response, $module); - } - } - else { - $.proxy(settings.onSuccess, context)(response, $module); - } + 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 { - $.proxy(settings.onSuccess, context)(response, $module); + xhr = firstParameter; + response = module.get.responseFromXHR(xhr); } + module.remove.loading(); + settings.onComplete.call(context, response, $module, xhr); }, - error: function(xhr, status, httpMessage) { + fail: function(xhr, status, httpMessage) { var - errorMessage = (settings.error[status] !== undefined) - ? settings.error[status] - : httpMessage, - response + // pull response from xhr if available + response = module.get.responseFromXHR(xhr), + errorMessage = module.get.errorFromRequest(response, status, httpMessage) ; - // let em know unless request aborted - if(xhr !== undefined) { - // readyState 4 = done, anything less is not really sent - if(xhr.readyState !== undefined && xhr.readyState == 4) { - - // if http status code returned and json returned error, look for it + if(status == 'aborted') { + module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage); + settings.onAbort.call(context, status, $module, xhr); + } + 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); - } - else { - if(status == 'error' && settings.dataType == 'json') { - try { - response = $.parseJSON(xhr.responseText); - if(response && response.error !== undefined) { - errorMessage = response.error; - } - } - catch(e) { - module.error(error.JSONParse); - } - } - } - module.remove.loading(); - module.set.error(); - // show error state only for duration specified in settings - if(settings.errorDuration) { - setTimeout(module.remove.error, settings.errorDuration); + module.error(error.statusMessage + httpMessage, ajaxSettings.url); } - module.debug('API Request error:', errorMessage); - $.proxy(settings.onError, context)(errorMessage, context); + settings.onError.call(context, errorMessage, $module, xhr); } - else { - $.proxy(settings.onAbort, context)(errorMessage, context); - module.debug('Request Aborted (Most likely caused by page change or CORS Policy)', status, httpMessage); + } + + 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.error) + .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, + asyncCallback, + response, + mockedXHR ; + + mockedXHR = $.Deferred() + .always(module.event.xhr.complete) + .done(module.event.xhr.done) + .fail(module.event.xhr.fail) + ; + + if(settings.mockResponse) { + if( $.isFunction(settings.mockResponse) ) { + module.debug('Using mocked callback returning response', settings.mockResponse); + response = settings.mockResponse.call(context, settings); + } + else { + module.debug('Using specified response', settings.mockResponse); + response = settings.mockResponse; + } + // simulating response + mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]); + } + else if( $.isFunction(settings.mockResponseAsync) ) { + 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 async mocked response', settings.mockResponseAsync); + settings.mockResponseAsync.call(context, settings, asyncCallback); + } + return mockedXHR; }, + xhr: function() { - $.ajax(ajaxSettings) + 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); + return xhr; } }, @@ -14199,6 +19039,7 @@ $.api = $.fn.api = function(parameters) { loading: function() { module.verbose('Adding loading state to element', $context); $context.addClass(className.loading); + requestStartTime = new Date().getTime(); } }, @@ -14214,6 +19055,22 @@ $.api = $.fn.api = function(parameters) { }, get: { + responseFromXHR: function(xhr) { + return $.isPlainObject(xhr) + ? (settings.dataType == 'json' || settings.dataType == 'jsonp') + ? 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; }, @@ -14224,7 +19081,7 @@ $.api = $.fn.api = function(parameters) { var runSettings ; - runSettings = $.proxy(settings.beforeSend, $module)(settings); + runSettings = settings.beforeSend.call(context, settings); if(runSettings) { if(runSettings.success !== undefined) { module.debug('Legacy success callback detected', runSettings); @@ -14250,15 +19107,28 @@ $.api = $.fn.api = function(parameters) { : 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') ) { + if( module.is.input() ) { data.value = $module.val(); } - else if( $module.is('form') ) { + else if( !module.is.form() ) { } else { @@ -14292,39 +19162,39 @@ $.api = $.fn.api = function(parameters) { return settings.on; } }, - formData: function() { - var - formData - ; - if($(this).serializeObject() !== undefined) { - formData = $form.serializeObject(); - } - else { - module.error(error.missingSerialize); - formData = $form.serialize(); + 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; } - module.debug('Retrieved form data', formData); - return formData; - }, - templateURL: function(action) { - var - url - ; - action = action || $module.data(settings.metadata.action) || settings.action || false; if(action) { module.debug('Looking up url for action', action, settings.api); - if(settings.api[action] !== undefined) { - url = settings.api[action]; - module.debug('Found template url', url); - } - else { + if(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(); @@ -14400,7 +19270,7 @@ $.api = $.fn.api = function(parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -14495,7 +19365,7 @@ $.api = $.fn.api = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } @@ -14510,48 +19380,94 @@ $.api = $.fn.api = function(parameters) { $.api.settings = { - name : 'API', - namespace : 'api', + name : 'API', + namespace : 'api', - debug : false, - verbose : true, - performance : true, + 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', - filter : '.disabled', - stateContext : false, + on : 'auto', - // state - loadingDuration : 0, - errorDuration : 2000, + // context for applying state classes + stateContext : false, - // templating - action : false, - url : false, - base : '', + // duration for loading state + loadingDuration : 0, - // data - urlData : {}, + // whether to hide errors after a period of time + hideError : 'auto', - // ui - defaultData : true, - serializeForm : false, - throttle : 0, + // duration for error state + errorDuration : 2000, - // jQ ajax - method : 'get', - data : {}, - dataType : 'json', + // whether parameters should be encoded with encodeURIComponent + encodeParameters : true, - // callbacks + // 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, + + // 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) {}, - onFailure : function(errorMessage, $module) {}, + + // failed JSON success test + onFailure : function(response, $module) {}, + + // server error onError : function(errorMessage, $module) {}, + + // request aborted onAbort : function(errorMessage, $module) {}, successTest : false, @@ -14563,10 +19479,12 @@ $.api.settings = { exitConditions : 'API Request Aborted. Exit conditions met', JSONParse : 'JSON could not be parsed during error handling', legacyParameters : 'You are using legacy API success callback names', + method : 'The method you called is not defined', missingAction : 'API action used but no url was defined', - missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize', + 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: ', @@ -14574,8 +19492,8 @@ $.api.settings = { }, regExp : { - required: /\{\$*[A-z0-9]+\}/g, - optional: /\{\/\$*[A-z0-9]+\}/g, + required : /\{\$*[A-z0-9]+\}/g, + optional : /\{\/\$*[A-z0-9]+\}/g, }, className: { @@ -14584,27 +19502,26 @@ $.api.settings = { }, selector: { - form: 'form' + disabled : '.disabled', + form : 'form' }, metadata: { action : 'action', - request : 'request', - xhr : 'xhr' + url : 'url' } }; -$.api.settings.api = {}; +})( jQuery, window, document ); -})( jQuery, window , document ); -/* - * # Semantic - Form Validation +/*! + * # Semantic UI 2.1.6 - State * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributor + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * @@ -14612,54 +19529,73 @@ $.api.settings.api = {}; ;(function ( $, window, document, undefined ) { -$.fn.form = function(fields, parameters) { +"use strict"; + +$.fn.state = function(parameters) { var $allModules = $(this), - settings = $.extend(true, {}, $.fn.form.settings, parameters), - validation = $.extend({}, $.fn.form.settings.defaults, fields), - - namespace = settings.namespace, - metadata = settings.metadata, - selector = settings.selector, - className = settings.className, - error = settings.error, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', + 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 - $module = $(this), - $field = $(this).find(selector.field), - $group = $(this).find(selector.group), - $message = $(this).find(selector.message), - $prompt = $(this).find(selector.prompt), - $submit = $(this).find(selector.submit), + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.state.settings, parameters) + : $.extend({}, $.fn.state.settings), - formErrors = [], + 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), - element = this, - instance = $module.data(moduleNamespace), module ; - - module = { + module = { initialize: function() { - module.verbose('Initializing form validation', $module, validation, settings); - module.bindEvents(); + 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(); }, @@ -14673,382 +19609,1555 @@ $.fn.form = function(fields, parameters) { destroy: function() { module.verbose('Destroying previous module', instance); - module.removeEvents(); $module + .off(eventNamespace) .removeData(moduleNamespace) ; }, refresh: function() { module.verbose('Refreshing selector cache'); - $field = $module.find(selector.field); + $module = $(element); }, - submit: function() { - module.verbose('Submitting form', $module); - $module - .submit() - ; + 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); + } + }); + } }, - attachEvents: function(selector, action) { - action = action || 'submit'; - $(selector) - .on('click', function(event) { - module[action](); - event.preventDefault(); - }) - ; - }, + is: { - bindEvents: function() { + 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] ); + }, - if(settings.keyboardShortcuts) { - $field - .on('keydown' + eventNamespace, module.event.field.keydown) - ; + 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'); } - $module - .on('submit' + eventNamespace, module.validate.form) - ; - $field - .on('blur' + eventNamespace, module.event.field.blur) - ; - // attach submit events - module.attachEvents($submit, 'submit'); + }, - $field - .each(function() { - var - type = $(this).prop('type'), - inputEvent = module.get.changeEvent(type) - ; - $(this) - .on(inputEvent + eventNamespace, module.event.field.change) - ; - }) - ; + allow: function(state) { + module.debug('Now allowing state', state); + states[state] = true; + }, + disallow: function(state) { + module.debug('No longer allowing', state); + states[state] = false; }, - removeEvents: function() { - $module - .off(eventNamespace) - ; - $field - .off(eventNamespace) - ; - $submit - .off(eventNamespace) - ; - $field - .off(eventNamespace) - ; + allows: function(state) { + return states[state] || false; }, - event: { - field: { - keydown: function(event) { - var - $field = $(this), - key = event.which, - keyCode = { - enter : 13, - escape : 27 + 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; } - ; - if( key == keyCode.escape) { - module.verbose('Escape key pressed blurring field'); - $field - .blur() - ; } - if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).size() > 0 ) { - module.debug('Enter key pressed, submitting form'); - $submit - .addClass(className.down) - ; - $field - .one('keyup' + eventNamespace, module.event.field.keyup) - ; + 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); + } } - }, - keyup: function() { - module.verbose('Doing keyboard shortcut form submit'); - $submit.removeClass(className.down); - module.submit(); - }, - blur: function() { - var - $field = $(this), - $fieldGroup = $field.closest($group) - ; - if( $fieldGroup.hasClass(className.error) ) { - module.debug('Revalidating field', $field, module.get.validation($field)); - module.validate.field( module.get.validation($field) ); + else { + if(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); + } } - else if(settings.on == 'blur' || settings.on == 'change') { - module.validate.field( module.get.validation($field) ); + } + } + + }, + + 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); } - }, - change: function() { - var - $field = $(this), - $fieldGroup = $field.closest($group) - ; - if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) { - clearTimeout(module.timer); - module.timer = setTimeout(function() { - module.debug('Revalidating field', $field, module.get.validation($field)); - module.validate.field( module.get.validation($field) ); - }, settings.delay); + 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); + } + } }, - get: { - changeEvent: function(type) { - if(type == 'checkbox' || type == 'radio' || type == 'hidden') { - return 'change'; + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); } else { - return (document.createElement('input').oninput !== undefined) - ? 'input' - : (document.createElement('input').onpropertychange !== undefined) - ? 'propertychange' - : 'keyup' - ; + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); } - }, - field: function(identifier) { - module.verbose('Finding field with identifier', identifier); - if( $field.filter('#' + identifier).size() > 0 ) { - return $field.filter('#' + identifier); + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); } - else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { - return $field.filter('[name="' + identifier +'"]'); + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); } - else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { - return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); } - return $('<input/>'); + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); }, - validation: function($field) { + display: function() { var - rules + title = settings.name + ':', + totalTime = 0 ; - $.each(validation, function(fieldName, field) { - if( module.get.field(field.identifier).get(0) == $field.get(0) ) { - rules = field; - } + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; }); - return rules || false; + 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; + } + }; - has: { + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; - field: function(identifier) { - module.verbose('Checking for existence of a field with identifier', identifier); - if( $field.filter('#' + identifier).size() > 0 ) { - return true; + 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.1.6 - Visibility + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.visibility = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.visibility.settings, parameters) + : $.extend({}, $.fn.visibility.settings), + + className = settings.className, + namespace = settings.namespace, + error = settings.error, + 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, + + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', settings); + + module.setup.cache(); + + if( module.should.trackChanges() ) { + + if(settings.type == 'image') { + module.setup.image(); } - else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { - return true; + if(settings.type == 'fixed') { + module.setup.fixed(); } - else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { - return true; + + if(settings.observeChanges) { + module.observeChanges(); } - return false; + module.bind.events(); + } + + module.save.position(); + if( !module.is.visible() ) { + module.error(error.visible, $module); } + if(settings.initialCheck) { + module.checkVisibility(); + } + module.instantiate(); }, - add: { - prompt: function(identifier, errors) { - var - $field = module.get.field(identifier), - $fieldGroup = $field.closest($group), - $prompt = $fieldGroup.find(selector.prompt), - promptExists = ($prompt.size() !== 0) - ; - errors = (typeof errors == 'string') - ? [errors] - : errors + instantiate: function() { + module.debug('Storing instance', module); + $module + .data(moduleNamespace, module) + ; + instance = module; + }, + + destroy: function() { + module.verbose('Destroying previous module'); + if(observer) { + observer.disconnect(); + } + $window + .off('load' + eventNamespace, module.event.load) + .off('resize' + eventNamespace, module.event.resize) + ; + $context + .off('scrollchange' + eventNamespace, module.event.scrollchange) + ; + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(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); + }); + 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) ; - module.verbose('Adding field error state', identifier); - $fieldGroup - .addClass(className.error) + // pub/sub pattern + $context + .off('scroll' + eventNamespace) + .on('scroll' + eventNamespace, module.event.scroll) + .on('scrollchange' + eventNamespace, module.event.scrollchange) ; - 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) - ; + } + }, + + event: { + 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(); } } - else { - module.verbose('Inline errors are disabled, no inline error added', identifier); - } } + ; + 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 : {}, + }; }, - errors: function(errors) { - module.debug('Adding form error messages', errors); - $message - .html( settings.templates.error(errors) ) + 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); + }); + }; + } + }, + 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) ; } }, - remove: { - prompt: function(field) { - var - $field = module.get.field(field.identifier), - $fieldGroup = $field.closest($group), - $prompt = $fieldGroup.find(selector.prompt) + show: { + placeholder: function() { + module.verbose('Showing placeholder'); + $placeholder + .css('display', 'block') + .css('visibility', 'hidden') ; - $fieldGroup - .removeClass(className.error) + } + }, + hide: { + placeholder: function() { + module.verbose('Hiding placeholder'); + $placeholder + .css('display', 'none') + .css('visibility', '') ; - if(settings.inline && $prompt.is(':visible')) { - module.verbose('Removing prompt for field', field); - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - $prompt.transition(settings.transition + ' out', settings.duration, function() { - $prompt.remove(); - }); - } - else { - $prompt - .fadeOut(settings.duration, function(){ - $prompt.remove(); - }) - ; - } - } } }, set: { - success: function() { + fixed: function() { + module.verbose('Setting element to fixed position'); $module - .removeClass(className.error) - .addClass(className.success) + .addClass(className.fixed) + .css({ + position : 'fixed', + top : settings.offset + 'px', + left : 'auto', + zIndex : '1' + }) ; }, - error: function() { + image: function(src) { $module - .removeClass(className.success) - .addClass(className.error) + .attr('src', src) ; + if(settings.transition) { + if( $.fn.transition !== undefined ) { + $module.transition(settings.transition, settings.duration); + } + else { + $module.fadeIn(settings.duration); + } + } + else { + $module.show(); + } } }, - validate: { - - form: function(event) { + is: { + onScreen: function() { var - allValid = true, - apiRequest + calculations = module.get.elementCalculations() ; - // reset errors - formErrors = []; - $.each(validation, function(fieldName, field) { - if( !( module.validate.field(field) ) ) { - allValid = false; + 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; + } + }, + + refresh: function() { + module.debug('Refreshing constants (width/height)'); + if(settings.type == 'fixed') { + module.remove.fixed(); + module.remove.occurred(); + } + module.reset(); + module.save.position(); + if(settings.checkOnRefresh) { + module.checkVisibility(); + } + settings.onRefresh.call(element); + }, + + reset: function() { + module.verbose('Reseting all cached values'); + if( $.isPlainObject(module.cache) ) { + module.cache.screen = {}; + module.cache.element = {}; + } + }, + + checkVisibility: function(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); } }); - if(allValid) { - module.debug('Form has no validation errors, submitting'); - module.set.success(); - return $.proxy(settings.onSuccess, this)(event); + } + }, + + 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 { - module.debug('Form has errors'); - module.set.error(); - if(!settings.inline) { - module.add.errors(formErrors); + } + 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 : '' + }) + ; + }, + 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; } - // prevent ajax submit - if($module.data('moduleApi') !== undefined) { - event.stopImmediatePropagation(); + } + 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; } - return $.proxy(settings.onFailure, this)(formErrors); } }, - - // takes a validation object and returns whether field passes validation - field: function(field) { + scroll: function(scrollPosition) { + scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset; + module.cache.scroll = scrollPosition; + }, + direction: function() { var - $field = module.get.field(field.identifier), - fieldValid = true, - fieldErrors = [] + scroll = module.get.scroll(), + lastScroll = module.get.lastScroll(), + direction ; - if(field.optional && $.trim($field.val()) === ''){ - module.debug('Field is optional and empty. Skipping', field.identifier); - fieldValid = true; + if(scroll > lastScroll && lastScroll) { + direction = 'down'; } - else if(field.rules !== undefined) { - $.each(field.rules, function(index, rule) { - if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) { - module.debug('Field is invalid', field.identifier, rule.type); - fieldErrors.push(rule.prompt); - fieldValid = false; - } - }); - } - if(fieldValid) { - module.remove.prompt(field, fieldErrors); - $.proxy(settings.onValid, $field)(); + else if(scroll < lastScroll && lastScroll) { + direction = 'up'; } else { - formErrors = formErrors.concat(fieldErrors); - module.add.prompt(field.identifier, fieldErrors); - $.proxy(settings.onInvalid, $field)(fieldErrors); - return false; + direction = 'static'; } - return true; + module.cache.direction = direction; + return module.cache.direction; }, + elementPosition: function() { + var + element = module.cache.element, + screen = module.get.screenSize() + ; + module.verbose('Saving element position'); + // (quicker than $.extend) + element.fits = (element.height < screen.height); + element.offset = $module.offset(); + element.width = $module.outerWidth(); + element.height = $module.outerHeight(); + // store + module.cache.element = element; + return element; + }, + elementCalculations: function() { + var + screen = module.get.screenCalculations(), + element = module.get.elementPosition() + ; + // offset + if(settings.includeMargin) { + element.margin = {}; + element.margin.top = parseInt($module.css('margin-top'), 10); + element.margin.bottom = parseInt($module.css('margin-bottom'), 10); + element.top = element.offset.top - element.margin.top; + element.bottom = element.offset.top + element.height + element.margin.bottom; + } + else { + element.top = element.offset.top; + element.bottom = element.offset.top + element.height; + } - // takes validation rule and returns whether field passes rule - rule: function(field, validation) { + // visibility + element.topVisible = (screen.bottom >= element.top); + element.topPassed = (screen.top >= element.top); + element.bottomVisible = (screen.bottom >= element.bottom); + element.bottomPassed = (screen.top >= element.bottom); + element.pixelsPassed = 0; + element.percentagePassed = 0; + + // meta calculations + element.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 - $field = module.get.field(field.identifier), - type = validation.type, - value = $.trim($field.val() + ''), + 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(); + } + }, - bracketRegExp = /\[(.*)\]/i, - bracket = bracketRegExp.exec(type), - isValid = true, - ancillary, - functionType + get: { + pixelsPassed: function(amount) { + var + element = module.get.elementCalculations() ; - // if bracket notation is used, pass in extra parameters - if(bracket !== undefined && bracket !== null) { - ancillary = '' + bracket[1]; - functionType = type.replace(bracket[0], ''); - isValid = $.proxy(settings.rules[functionType], $module)(value, ancillary); + if(amount.search('%') > -1) { + return ( element.height * (parseInt(amount, 10) / 100) ); } - // normal notation - else { - isValid = $.proxy(settings.rules[type], $field)(value); + 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 isValid; + return module.cache.screen.top; } }, @@ -15120,7 +21229,7 @@ $.fn.form = function(fields, parameters) { }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 500); }, display: function() { var @@ -15136,9 +21245,6 @@ $.fn.form = function(fields, parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; - } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); if(console.table) { @@ -15186,6 +21292,7 @@ $.fn.form = function(fields, parameters) { return false; } else { + module.error(error.method, query); return false; } }); @@ -15208,19 +21315,21 @@ $.fn.form = function(fields, parameters) { return found; } }; + if(methodInvoked) { if(instance === undefined) { module.initialize(); } + instance.save.scroll(); + instance.save.calculations(); module.invoke(query); } else { if(instance !== undefined) { - module.destroy(); + instance.invoke('destroy'); } module.initialize(); } - }) ; @@ -15230,191 +21339,92 @@ $.fn.form = function(fields, parameters) { ; }; -$.fn.form.settings = { +$.fn.visibility.settings = { - name : 'Form', - namespace : 'form', + name : 'Visibility', + namespace : 'visibility', - debug : false, - verbose : true, - performance : true, + debug : false, + verbose : false, + performance : true, + // whether to use mutation observers to follow changes + observeChanges : true, - keyboardShortcuts : true, - on : 'submit', - inline : false, + // check position immediately on init + initialCheck : true, - delay : 200, - revalidate : true, + // whether to refresh calculations after all page images load + refreshOnLoad : true, - transition : 'scale', - duration : 200, + // whether to refresh calculations after page resize event + refreshOnResize : true, + // should call callbacks on refresh event (resize, etc) + checkOnRefresh : true, - onValid : function() {}, - onInvalid : function() {}, - onSuccess : function() { return true; }, - onFailure : function() { return false; }, + // callback should only occur one time + once : true, - metadata : { - validate: 'validate' - }, + // callback should fire continuously whe evaluates to true + continuous : false, - selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - checkbox: 'input[type="checkbox"], input[type="radio"]', - input : 'input', - prompt : '.prompt', - submit : '.submit' - }, + // offset to use with scroll top + offset : 0, - className : { - error : 'error', - success : 'success', - down : 'down', - label : 'ui prompt label' - }, + // whether to include margin in elements position + includeMargin : false, - error: { - method : 'The method you called is not defined.' - }, + // scroll context for visibility checks + context : window, - templates: { - error: function(errors) { - var - html = '<ul class="list">' - ; - $.each(errors, function(index, value) { - html += '<li>' + value + '</li>'; - }); - html += '</ul>'; - return $(html); - }, - prompt: function(errors) { - return $('<div/>') - .addClass('ui red pointing prompt label') - .html(errors[0]) - ; - } - }, + // visibility check delay in ms (defaults to animationFrame) + throttle : false, - rules: { + // special visibility type (image, fixed) + type : false, - // checkbox checked - checked: function() { - return ($(this).filter(':checked').size() > 0); - }, + // image only animation settings + transition : 'fade in', + duration : 1000, - // value contains (text) - contains: function(value, text) { - text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); - return (value.search(text) !== -1); - }, + // array of callbacks for percentage + onPassed : {}, - // is most likely an email - email: function(value){ - var - emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i") - ; - return emailRegExp.test(value); - }, + // standard callbacks + onOnScreen : false, + onOffScreen : false, + onPassing : false, + onTopVisible : false, + onBottomVisible : false, + onTopPassed : false, + onBottomPassed : false, - // is not empty or blank string - empty: function(value) { - return !(value === undefined || '' === value); - }, + // reverse callbacks + onPassingReverse : false, + onTopVisibleReverse : false, + onBottomVisibleReverse : false, + onTopPassedReverse : false, + onBottomPassedReverse : false, - // is valid integer - integer: function(value, range) { - var - intRegExp = /^\-?\d+$/, - min, - max, - parts - ; - if (range === undefined || range === '' || range === '..') { - // do nothing - } - else if (range.indexOf('..') == -1) { - if (intRegExp.test(range)) { - min = max = range - 0; - } - } - else { - parts = range.split('..', 2); - if (intRegExp.test(parts[0])) { - min = parts[0] - 0; - } - if (intRegExp.test(parts[1])) { - max = parts[1] - 0; - } - } - return ( - intRegExp.test(value) && - (min === undefined || value >= min) && - (max === undefined || value <= max) - ); - }, + // utility callbacks + onUpdate : false, // disabled by default for performance + onRefresh : function(){}, - // is exactly value - is: function(value, text) { - return (value == text); - }, - - // is at least string length - length: function(value, requiredLength) { - return (value !== undefined) - ? (value.length >= requiredLength) - : false - ; - }, - - // matches another field - match: function(value, fieldIdentifier) { - // use either id or name of field - var - $form = $(this), - matchingValue - ; - if($form.find('#' + fieldIdentifier).size() > 0) { - matchingValue = $form.find('#' + fieldIdentifier).val(); - } - else if($form.find('[name="' + fieldIdentifier +'"]').size() > 0) { - matchingValue = $form.find('[name="' + fieldIdentifier + '"]').val(); - } - else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); - } - return (matchingValue !== undefined) - ? ( value.toString() == matchingValue.toString() ) - : false - ; - }, - - // string length is less than max length - maxLength: function(value, maxLength) { - return (value !== undefined) - ? (value.length <= maxLength) - : false - ; - }, + metadata : { + src: 'src' + }, - // value is not exactly notValue - not: function(value, notValue) { - return (value != notValue); - }, + className: { + fixed : 'fixed', + placeholder : 'placeholder' + }, - // value is most likely url - url: function(value) { - var - urlRegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ - ; - return urlRegExp.test(value); - } + error : { + method : 'The method you called is not defined.', + visible : 'Element is hidden, you must call refresh after element becomes visible' } }; -})( jQuery, window , document ); +})( jQuery, window, document ); |