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.

592 lines
17 KiB

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