github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/dimmer.js (about)

     1  /*!
     2   * # Semantic UI x.x - Dimmer
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  ;(function ( $, window, document, undefined ) {
    13  
    14  "use strict";
    15  
    16  $.fn.dimmer = function(parameters) {
    17    var
    18      $allModules     = $(this),
    19  
    20      time            = new Date().getTime(),
    21      performance     = [],
    22  
    23      query           = arguments[0],
    24      methodInvoked   = (typeof query == 'string'),
    25      queryArguments  = [].slice.call(arguments, 1),
    26  
    27      returnedValue
    28    ;
    29  
    30    $allModules
    31      .each(function() {
    32        var
    33          settings        = ( $.isPlainObject(parameters) )
    34            ? $.extend(true, {}, $.fn.dimmer.settings, parameters)
    35            : $.extend({}, $.fn.dimmer.settings),
    36  
    37          selector        = settings.selector,
    38          namespace       = settings.namespace,
    39          className       = settings.className,
    40          error           = settings.error,
    41  
    42          eventNamespace  = '.' + namespace,
    43          moduleNamespace = 'module-' + namespace,
    44          moduleSelector  = $allModules.selector || '',
    45  
    46          clickEvent      = ('ontouchstart' in document.documentElement)
    47            ? 'touchstart'
    48            : 'click',
    49  
    50          $module = $(this),
    51          $dimmer,
    52          $dimmable,
    53  
    54          element   = this,
    55          instance  = $module.data(moduleNamespace),
    56          module
    57        ;
    58  
    59        module = {
    60  
    61          preinitialize: function() {
    62            if( module.is.dimmer() ) {
    63              $dimmable = $module.parent();
    64              $dimmer   = $module;
    65            }
    66            else {
    67              $dimmable = $module;
    68              if( module.has.dimmer() ) {
    69                if(settings.dimmerName) {
    70                  $dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName);
    71                }
    72                else {
    73                  $dimmer = $dimmable.children(selector.dimmer);
    74                }
    75              }
    76              else {
    77                $dimmer = module.create();
    78              }
    79            }
    80          },
    81  
    82          initialize: function() {
    83            module.debug('Initializing dimmer', settings);
    84            if(settings.on == 'hover') {
    85              $dimmable
    86                .on('mouseenter' + eventNamespace, module.show)
    87                .on('mouseleave' + eventNamespace, module.hide)
    88              ;
    89            }
    90            else if(settings.on == 'click') {
    91              $dimmable
    92                .on(clickEvent + eventNamespace, module.toggle)
    93              ;
    94            }
    95            if( module.is.page() ) {
    96              module.debug('Setting as a page dimmer', $dimmable);
    97              module.set.pageDimmer();
    98            }
    99  
   100            if( module.is.closable() ) {
   101              module.verbose('Adding dimmer close event', $dimmer);
   102              $dimmer
   103                .on(clickEvent + eventNamespace, module.event.click)
   104              ;
   105            }
   106            module.set.dimmable();
   107            module.instantiate();
   108          },
   109  
   110          instantiate: function() {
   111            module.verbose('Storing instance of module', module);
   112            instance = module;
   113            $module
   114              .data(moduleNamespace, instance)
   115            ;
   116          },
   117  
   118          destroy: function() {
   119            module.verbose('Destroying previous module', $dimmer);
   120            $module
   121              .removeData(moduleNamespace)
   122            ;
   123            $dimmable
   124              .off(eventNamespace)
   125            ;
   126            $dimmer
   127              .off(eventNamespace)
   128            ;
   129          },
   130  
   131          event: {
   132            click: function(event) {
   133              module.verbose('Determining if event occured on dimmer', event);
   134              if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
   135                module.hide();
   136                event.stopImmediatePropagation();
   137              }
   138            }
   139          },
   140  
   141          addContent: function(element) {
   142            var
   143              $content = $(element)
   144            ;
   145            module.debug('Add content to dimmer', $content);
   146            if($content.parent()[0] !== $dimmer[0]) {
   147              $content.detach().appendTo($dimmer);
   148            }
   149          },
   150  
   151          create: function() {
   152            var
   153              $element = $( settings.template.dimmer() )
   154            ;
   155            if(settings.variation) {
   156              module.debug('Creating dimmer with variation', settings.variation);
   157              $element.addClass(settings.variation);
   158            }
   159            if(settings.dimmerName) {
   160              module.debug('Creating named dimmer', settings.dimmerName);
   161              $element.addClass(settings.dimmerName);
   162            }
   163            $element
   164              .appendTo($dimmable)
   165            ;
   166            return $element;
   167          },
   168  
   169          show: function(callback) {
   170            callback = $.isFunction(callback)
   171              ? callback
   172              : function(){}
   173            ;
   174            module.debug('Showing dimmer', $dimmer, settings);
   175            if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
   176              module.animate.show(callback);
   177              settings.onShow.call(element);
   178              settings.onChange.call(element);
   179            }
   180            else {
   181              module.debug('Dimmer is already shown or disabled');
   182            }
   183          },
   184  
   185          hide: function(callback) {
   186            callback = $.isFunction(callback)
   187              ? callback
   188              : function(){}
   189            ;
   190            if( module.is.dimmed() || module.is.animating() ) {
   191              module.debug('Hiding dimmer', $dimmer);
   192              module.animate.hide(callback);
   193              settings.onHide.call(element);
   194              settings.onChange.call(element);
   195            }
   196            else {
   197              module.debug('Dimmer is not visible');
   198            }
   199          },
   200  
   201          toggle: function() {
   202            module.verbose('Toggling dimmer visibility', $dimmer);
   203            if( !module.is.dimmed() ) {
   204              module.show();
   205            }
   206            else {
   207              module.hide();
   208            }
   209          },
   210  
   211          animate: {
   212            show: function(callback) {
   213              callback = $.isFunction(callback)
   214                ? callback
   215                : function(){}
   216              ;
   217              if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
   218                if(settings.opacity !== 'auto') {
   219                  module.set.opacity();
   220                }
   221                $dimmer
   222                  .transition({
   223                    animation   : settings.transition + ' in',
   224                    queue       : false,
   225                    duration    : module.get.duration(),
   226                    useFailSafe : true,
   227                    onStart     : function() {
   228                      module.set.dimmed();
   229                    },
   230                    onComplete  : function() {
   231                      module.set.active();
   232                      callback();
   233                    }
   234                  })
   235                ;
   236              }
   237              else {
   238                module.verbose('Showing dimmer animation with javascript');
   239                module.set.dimmed();
   240                if(settings.opacity == 'auto') {
   241                  settings.opacity = 0.8;
   242                }
   243                $dimmer
   244                  .stop()
   245                  .css({
   246                    opacity : 0,
   247                    width   : '100%',
   248                    height  : '100%'
   249                  })
   250                  .fadeTo(module.get.duration(), settings.opacity, function() {
   251                    $dimmer.removeAttr('style');
   252                    module.set.active();
   253                    callback();
   254                  })
   255                ;
   256              }
   257            },
   258            hide: function(callback) {
   259              callback = $.isFunction(callback)
   260                ? callback
   261                : function(){}
   262              ;
   263              if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
   264                module.verbose('Hiding dimmer with css');
   265                $dimmer
   266                  .transition({
   267                    animation   : settings.transition + ' out',
   268                    queue       : false,
   269                    duration    : module.get.duration(),
   270                    useFailSafe : true,
   271                    onStart     : function() {
   272                      module.remove.dimmed();
   273                    },
   274                    onComplete  : function() {
   275                      module.remove.active();
   276                      callback();
   277                    }
   278                  })
   279                ;
   280              }
   281              else {
   282                module.verbose('Hiding dimmer with javascript');
   283                module.remove.dimmed();
   284                $dimmer
   285                  .stop()
   286                  .fadeOut(module.get.duration(), function() {
   287                    module.remove.active();
   288                    $dimmer.removeAttr('style');
   289                    callback();
   290                  })
   291                ;
   292              }
   293            }
   294          },
   295  
   296          get: {
   297            dimmer: function() {
   298              return $dimmer;
   299            },
   300            duration: function() {
   301              if(typeof settings.duration == 'object') {
   302                if( module.is.active() ) {
   303                  return settings.duration.hide;
   304                }
   305                else {
   306                  return settings.duration.show;
   307                }
   308              }
   309              return settings.duration;
   310            }
   311          },
   312  
   313          has: {
   314            dimmer: function() {
   315              if(settings.dimmerName) {
   316                return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
   317              }
   318              else {
   319                return ( $module.children(selector.dimmer).length > 0 );
   320              }
   321            }
   322          },
   323  
   324          is: {
   325            active: function() {
   326              return $dimmer.hasClass(className.active);
   327            },
   328            animating: function() {
   329              return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
   330            },
   331            closable: function() {
   332              if(settings.closable == 'auto') {
   333                if(settings.on == 'hover') {
   334                  return false;
   335                }
   336                return true;
   337              }
   338              return settings.closable;
   339            },
   340            dimmer: function() {
   341              return $module.is(selector.dimmer);
   342            },
   343            dimmable: function() {
   344              return $module.is(selector.dimmable);
   345            },
   346            dimmed: function() {
   347              return $dimmable.hasClass(className.dimmed);
   348            },
   349            disabled: function() {
   350              return $dimmable.hasClass(className.disabled);
   351            },
   352            enabled: function() {
   353              return !module.is.disabled();
   354            },
   355            page: function () {
   356              return $dimmable.is('body');
   357            },
   358            pageDimmer: function() {
   359              return $dimmer.hasClass(className.pageDimmer);
   360            }
   361          },
   362  
   363          can: {
   364            show: function() {
   365              return !$dimmer.hasClass(className.disabled);
   366            }
   367          },
   368  
   369          set: {
   370            opacity: function(opacity) {
   371              var
   372                opacity    = settings.opacity || opacity,
   373                color      = $dimmer.css('background-color'),
   374                colorArray = color.split(','),
   375                isRGBA     = (colorArray && colorArray.length == 4)
   376              ;
   377              if(isRGBA) {
   378                colorArray[3] = opacity + ')';
   379                color         = colorArray.join(',');
   380              }
   381              else {
   382                color = 'rgba(0, 0, 0, ' + opacity + ')';
   383              }
   384              module.debug('Setting opacity to', opacity);
   385              $dimmer.css('background-color', color);
   386            },
   387            active: function() {
   388              $dimmer.addClass(className.active);
   389            },
   390            dimmable: function() {
   391              $dimmable.addClass(className.dimmable);
   392            },
   393            dimmed: function() {
   394              $dimmable.addClass(className.dimmed);
   395            },
   396            pageDimmer: function() {
   397              $dimmer.addClass(className.pageDimmer);
   398            },
   399            disabled: function() {
   400              $dimmer.addClass(className.disabled);
   401            }
   402          },
   403  
   404          remove: {
   405            active: function() {
   406              $dimmer
   407                .removeClass(className.active)
   408              ;
   409            },
   410            dimmed: function() {
   411              $dimmable.removeClass(className.dimmed);
   412            },
   413            disabled: function() {
   414              $dimmer.removeClass(className.disabled);
   415            }
   416          },
   417  
   418          setting: function(name, value) {
   419            module.debug('Changing setting', name, value);
   420            if( $.isPlainObject(name) ) {
   421              $.extend(true, settings, name);
   422            }
   423            else if(value !== undefined) {
   424              settings[name] = value;
   425            }
   426            else {
   427              return settings[name];
   428            }
   429          },
   430          internal: function(name, value) {
   431            if( $.isPlainObject(name) ) {
   432              $.extend(true, module, name);
   433            }
   434            else if(value !== undefined) {
   435              module[name] = value;
   436            }
   437            else {
   438              return module[name];
   439            }
   440          },
   441          debug: function() {
   442            if(settings.debug) {
   443              if(settings.performance) {
   444                module.performance.log(arguments);
   445              }
   446              else {
   447                module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
   448                module.debug.apply(console, arguments);
   449              }
   450            }
   451          },
   452          verbose: function() {
   453            if(settings.verbose && settings.debug) {
   454              if(settings.performance) {
   455                module.performance.log(arguments);
   456              }
   457              else {
   458                module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
   459                module.verbose.apply(console, arguments);
   460              }
   461            }
   462          },
   463          error: function() {
   464            module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
   465            module.error.apply(console, arguments);
   466          },
   467          performance: {
   468            log: function(message) {
   469              var
   470                currentTime,
   471                executionTime,
   472                previousTime
   473              ;
   474              if(settings.performance) {
   475                currentTime   = new Date().getTime();
   476                previousTime  = time || currentTime;
   477                executionTime = currentTime - previousTime;
   478                time          = currentTime;
   479                performance.push({
   480                  'Name'           : message[0],
   481                  'Arguments'      : [].slice.call(message, 1) || '',
   482                  'Element'        : element,
   483                  'Execution Time' : executionTime
   484                });
   485              }
   486              clearTimeout(module.performance.timer);
   487              module.performance.timer = setTimeout(module.performance.display, 100);
   488            },
   489            display: function() {
   490              var
   491                title = settings.name + ':',
   492                totalTime = 0
   493              ;
   494              time = false;
   495              clearTimeout(module.performance.timer);
   496              $.each(performance, function(index, data) {
   497                totalTime += data['Execution Time'];
   498              });
   499              title += ' ' + totalTime + 'ms';
   500              if(moduleSelector) {
   501                title += ' \'' + moduleSelector + '\'';
   502              }
   503              if($allModules.length > 1) {
   504                title += ' ' + '(' + $allModules.length + ')';
   505              }
   506              if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
   507                console.groupCollapsed(title);
   508                if(console.table) {
   509                  console.table(performance);
   510                }
   511                else {
   512                  $.each(performance, function(index, data) {
   513                    console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
   514                  });
   515                }
   516                console.groupEnd();
   517              }
   518              performance = [];
   519            }
   520          },
   521          invoke: function(query, passedArguments, context) {
   522            var
   523              object = instance,
   524              maxDepth,
   525              found,
   526              response
   527            ;
   528            passedArguments = passedArguments || queryArguments;
   529            context         = element         || context;
   530            if(typeof query == 'string' && object !== undefined) {
   531              query    = query.split(/[\. ]/);
   532              maxDepth = query.length - 1;
   533              $.each(query, function(depth, value) {
   534                var camelCaseValue = (depth != maxDepth)
   535                  ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
   536                  : query
   537                ;
   538                if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
   539                  object = object[camelCaseValue];
   540                }
   541                else if( object[camelCaseValue] !== undefined ) {
   542                  found = object[camelCaseValue];
   543                  return false;
   544                }
   545                else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
   546                  object = object[value];
   547                }
   548                else if( object[value] !== undefined ) {
   549                  found = object[value];
   550                  return false;
   551                }
   552                else {
   553                  module.error(error.method, query);
   554                  return false;
   555                }
   556              });
   557            }
   558            if ( $.isFunction( found ) ) {
   559              response = found.apply(context, passedArguments);
   560            }
   561            else if(found !== undefined) {
   562              response = found;
   563            }
   564            if($.isArray(returnedValue)) {
   565              returnedValue.push(response);
   566            }
   567            else if(returnedValue !== undefined) {
   568              returnedValue = [returnedValue, response];
   569            }
   570            else if(response !== undefined) {
   571              returnedValue = response;
   572            }
   573            return found;
   574          }
   575        };
   576  
   577        module.preinitialize();
   578  
   579        if(methodInvoked) {
   580          if(instance === undefined) {
   581            module.initialize();
   582          }
   583          module.invoke(query);
   584        }
   585        else {
   586          if(instance !== undefined) {
   587            instance.invoke('destroy');
   588          }
   589          module.initialize();
   590        }
   591      })
   592    ;
   593  
   594    return (returnedValue !== undefined)
   595      ? returnedValue
   596      : this
   597    ;
   598  };
   599  
   600  $.fn.dimmer.settings = {
   601  
   602    name        : 'Dimmer',
   603    namespace   : 'dimmer',
   604  
   605    debug       : false,
   606    verbose     : true,
   607    performance : true,
   608  
   609    // name to distinguish between multiple dimmers in context
   610    dimmerName  : false,
   611  
   612    // whether to add a variation type
   613    variation   : false,
   614  
   615    // whether to bind close events
   616    closable    : 'auto',
   617  
   618    // whether to use css animations
   619    useCSS      : true,
   620  
   621    // css animation to use
   622    transition  : 'fade',
   623  
   624    // event to bind to
   625    on          : false,
   626  
   627    // overriding opacity value
   628    opacity     : 'auto',
   629  
   630    // transition durations
   631    duration    : {
   632      show : 500,
   633      hide : 500
   634    },
   635  
   636    onChange    : function(){},
   637    onShow      : function(){},
   638    onHide      : function(){},
   639  
   640    error   : {
   641      method   : 'The method you called is not defined.'
   642    },
   643  
   644    selector: {
   645      dimmable : '.dimmable',
   646      dimmer   : '.ui.dimmer',
   647      content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
   648    },
   649  
   650    template: {
   651      dimmer: function() {
   652       return $('<div />').attr('class', 'ui dimmer');
   653      }
   654    },
   655  
   656    className : {
   657      active     : 'active',
   658      animating  : 'animating',
   659      dimmable   : 'dimmable',
   660      dimmed     : 'dimmed',
   661      disabled   : 'disabled',
   662      hide       : 'hide',
   663      pageDimmer : 'page',
   664      show       : 'show'
   665    }
   666  
   667  };
   668  
   669  })( jQuery, window , document );