You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

668 lines
19 KiB

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