← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/less/modules/dimmer.js

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

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