dimmer.js 22 KB

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