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 );