; (function ($, window, document, undefined){ 'use strict'; window = (typeof window != 'undefined' && window.Math == Math)? window: (typeof self != 'undefined' && self.Math == Math)? self: Function('return this')(); $.fn.dimmer = function (parameters){ var $allModules = $(this), time = new Date().getTime(), performance = [] , query = arguments[0], methodInvoked = (typeof query == 'string'), queryArguments = [] .slice.call(arguments, 1), returnedValue; $allModules.each(function (){ var settings = ($.isPlainObject(parameters))? $.extend(true , { } , $.fn.dimmer.settings, parameters): $.extend({ } , $.fn.dimmer.settings), selector = settings.selector, namespace = settings.namespace, className = settings.className, error = settings.error, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', clickEvent = ('ontouchstart' in document.documentElement)? 'touchstart': 'click', $module = $(this), $dimmer, $dimmable, element = this, instance = $module.data(moduleNamespace), module; module = { preinitialize: function (){ if (module.is.dimmer()) { $dimmable = $module.parent(); $dimmer = $module; } else { $dimmable = $module; if (module.has.dimmer()) { if (settings.dimmerName) { $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName); } else { $dimmer = $dimmable.find(selector.dimmer); } } else { $dimmer = module.create(); } } } , initialize: function (){ module.debug('Initializing dimmer', settings); module.bind.events(); module.set.dimmable(); module.instantiate(); } , instantiate: function (){ module.verbose('Storing instance of module', module); instance = module; $module.data(moduleNamespace, instance); } , destroy: function (){ module.verbose('Destroying previous module', $dimmer); module.unbind.events(); module.remove.variation(); $dimmable.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); $dimmable.off(eventNamespace); } } , event: { click: function (event){ module.verbose('Determining if event occured on dimmer', event); if (_AN_Read_length('length', $dimmer.find(_AN_Read_target('target', event))) === 0 || $(_AN_Read_target('target', event)).is(selector.content)) { module.hide(); event.stopImmediatePropagation(); } } } , addContent: function (element){ var $content = $(element); module.debug('Add content to dimmer', $content); if ($content.parent()[0] !== $dimmer[0]) { $content.detach().appendTo($dimmer); } } , create: function (){ var $element = $(settings.template.dimmer()); if (settings.dimmerName) { module.debug('Creating named dimmer', settings.dimmerName); $element.addClass(settings.dimmerName); } $element.appendTo($dimmable); return $element; } , show: function (callback){ callback = $.isFunction(callback)? callback: function (){ } ; module.debug('Showing dimmer', $dimmer, settings); module.set.variation(); if ((!module.is.dimmed() || module.is.animating()) && module.is.enabled()) { _AN_Call_show('show', module.animate, callback); settings.onShow.call(element); settings.onChange.call(element); } else { module.debug('Dimmer is already shown or disabled'); } } , hide: function (callback){ callback = $.isFunction(callback)? callback: function (){ } ; if (module.is.dimmed() || module.is.animating()) { module.debug('Hiding dimmer', $dimmer); module.animate.hide(callback); settings.onHide.call(element); settings.onChange.call(element); } else { module.debug('Dimmer is not visible'); } } , toggle: function (){ module.verbose('Toggling dimmer visibility', $dimmer); if (!module.is.dimmed()) { _AN_Call_show('show', module); } else { module.hide(); } } , animate: { show: function (callback){ callback = $.isFunction(callback)? callback: function (){ } ; if (settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { if (settings.useFlex) { module.debug('Using flex dimmer'); module.remove.legacy(); } else { module.debug('Using legacy non-flex dimmer'); module.set.legacy(); } if (settings.opacity !== 'auto') { module.set.opacity(); } $dimmer.transition({ displayType: settings.useFlex? 'flex': 'block', animation: settings.transition + ' in', queue: false , duration: module.get.duration(), useFailSafe: true , onStart: function (){ module.set.dimmed(); } , onComplete: function (){ module.set.active(); callback(); } } ); } else { module.verbose('Showing dimmer animation with javascript'); module.set.dimmed(); if (settings.opacity == 'auto') { settings.opacity = 0.8; } $dimmer.stop().css({ opacity: 0, width: '100%', height: '100%'} ).fadeTo(module.get.duration(), settings.opacity, function (){ $dimmer.removeAttr('style'); module.set.active(); callback(); } ); } } , hide: function (callback){ callback = $.isFunction(callback)? callback: function (){ } ; if (settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { module.verbose('Hiding dimmer with css'); $dimmer.transition({ displayType: settings.useFlex? 'flex': 'block', animation: settings.transition + ' out', queue: false , duration: module.get.duration(), useFailSafe: true , onStart: function (){ module.remove.dimmed(); } , onComplete: function (){ module.remove.variation(); module.remove.active(); callback(); } } ); } else { module.verbose('Hiding dimmer with javascript'); module.remove.dimmed(); $dimmer.stop().fadeOut(module.get.duration(), function (){ module.remove.active(); $dimmer.removeAttr('style'); callback(); } ); } } } , get: { dimmer: function (){ return $dimmer; } , duration: function (){ if (typeof settings.duration == 'object') { if (module.is.active()) { return settings.duration.hide; } else { return settings.duration.show; } } return settings.duration; } } , has: { dimmer: function (){ if (settings.dimmerName) { return (_AN_Read_length('length', $module.find(selector.dimmer).filter('.' + settings.dimmerName)) > 0); } else { return (_AN_Read_length('length', $module.find(selector.dimmer)) > 0); } } } , is: { active: function (){ return $dimmer.hasClass(className.active); } , animating: function (){ return ($dimmer.is(':animated') || $dimmer.hasClass(className.animating)); } , closable: function (){ if (settings.closable == 'auto') { if (settings.on == 'hover') { return false ; } return true ; } return settings.closable; } , dimmer: function (){ return $module.hasClass(className.dimmer); } , dimmable: function (){ return $module.hasClass(className.dimmable); } , dimmed: function (){ return $dimmable.hasClass(className.dimmed); } , disabled: function (){ return $dimmable.hasClass(className.disabled); } , enabled: function (){ return !module.is.disabled(); } , page: function (){ return $dimmable.is('body'); } , pageDimmer: function (){ return $dimmer.hasClass(className.pageDimmer); } } , can: { show: function (){ return !$dimmer.hasClass(className.disabled); } } , set: { opacity: function (opacity){ var color = $dimmer.css('background-color'), colorArray = color.split(','), isRGB = (colorArray && _AN_Read_length('length', colorArray) == 3), isRGBA = (colorArray && _AN_Read_length('length', colorArray) == 4); opacity = settings.opacity === 0? 0: settings.opacity || opacity; if (isRGB || 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); } , legacy: function (){ $dimmer.addClass(className.legacy); } , active: function (){ $dimmer.addClass(className.active); } , dimmable: function (){ $dimmable.addClass(className.dimmable); } , dimmed: function (){ $dimmable.addClass(className.dimmed); } , pageDimmer: function (){ $dimmer.addClass(className.pageDimmer); } , disabled: function (){ $dimmer.addClass(className.disabled); } , variation: function (variation){ variation = variation || settings.variation; if (variation) { $dimmer.addClass(variation); } } } , remove: { active: function (){ $dimmer.removeClass(className.active); } , legacy: function (){ $dimmer.removeClass(className.legacy); } , dimmed: function (){ $dimmable.removeClass(className.dimmed); } , disabled: function (){ $dimmer.removeClass(className.disabled); } , variation: function (variation){ variation = variation || settings.variation; if (variation) { $dimmer.removeClass(variation); } } } , setting: function (name, value){ module.debug('Changing setting', name, value); if ($.isPlainObject(name)) { $.extend(true , settings, name); } else if (value !== undefined) { if ($.isPlainObject(settings[name])) { $.extend(true , settings[name], value); } else { settings[name] = value; } } else { return settings[name]; } } , internal: function (name, value){ if ($.isPlainObject(name)) { $.extend(true , module, name); } else if (value !== undefined) { module[name] = value; } else { return module[name]; } } , debug: function (){ if (!settings.silent && settings.debug) { if (settings.performance) { module.performance.log(arguments); } else { module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); module.debug.apply(console, arguments); } } } , verbose: function (){ if (!settings.silent && settings.verbose && settings.debug) { if (settings.performance) { module.performance.log(arguments); } else { module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); module.verbose.apply(console, arguments); } } } , error: function (){ if (!settings.silent) { module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); module.error.apply(console, arguments); } } , performance: { log: function (message){ var currentTime, executionTime, previousTime; if (settings.performance) { currentTime = new Date().getTime(); previousTime = time || currentTime; executionTime = currentTime - previousTime; time = currentTime; performance.push({ 'Name': message[0], 'Arguments': [] .slice.call(message, 1) || '', 'Element': element, 'Execution Time': executionTime} ); } clearTimeout(module.performance.timer); module.performance.timer = _AN_Call_settimeout('setTimeout', window, 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 (_AN_Read_length('length', $allModules) > 1) { title += ' ' + '(' + _AN_Read_length('length', $allModules) + ')'; } if ((console.group !== undefined || console.table !== undefined) && _AN_Read_length('length', performance) > 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 = _AN_Read_length('length', query) - 1; $.each(query, function (depth, value){ var camelCaseValue = (depth != maxDepth)? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1): query; if ($.isPlainObject(object[camelCaseValue]) && (depth != maxDepth)) { object = object[camelCaseValue]; } else if (object[camelCaseValue] !== undefined) { found = object[camelCaseValue]; return false ; } else if ($.isPlainObject(object[value]) && (depth != maxDepth)) { object = object[value]; } else if (object[value] !== undefined) { found = object[value]; return false ; } else { module.error(error.method, query); return false ; } } ); } if ($.isFunction(found)) { response = found.apply(context, passedArguments); } else if (found !== undefined) { response = found; } if ($.isArray(returnedValue)) { returnedValue.push(response); } else if (returnedValue !== undefined) { returnedValue = [returnedValue, response] ; } else if (response !== undefined) { returnedValue = response; } return found; } } ; module.preinitialize(); if (methodInvoked) { if (instance === undefined) { module.initialize(); } module.invoke(query); } else { if (instance !== undefined) { instance.invoke('destroy'); } module.initialize(); } } ); return (returnedValue !== undefined)? returnedValue: this; } ; $.fn.dimmer.settings = { name: 'Dimmer', namespace: 'dimmer', silent: false , debug: false , verbose: false , performance: true , useFlex: true , dimmerName: false , variation: false , closable: 'auto', useCSS: true , transition: 'fade', on: false , opacity: 'auto', duration: { show: 500, hide: 500} , onChange: function (){ } , onShow: function (){ } , onHide: function (){ } , error: { method: 'The method you called is not defined.'} , className: { active: 'active', animating: 'animating', dimmable: 'dimmable', dimmed: 'dimmed', dimmer: 'dimmer', disabled: 'disabled', hide: 'hide', legacy: 'legacy', pageDimmer: 'page', show: 'show'} , selector: { dimmer: '> .ui.dimmer', content: '.ui.dimmer > .content, .ui.dimmer > .content > .center'} , template: { dimmer: function (){ return $('
').attr('class', 'ui dimmer'); } } } ; } )(jQuery, window, document);