1
0

dimmer.js 21 KB

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