1
0

modal.js 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138
  1. /*!
  2. * # Fomantic-UI - Modal
  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.modal = function(parameters) {
  22. var
  23. $allModules = $(this),
  24. $window = $(window),
  25. $document = $(document),
  26. $body = $('body'),
  27. moduleSelector = $allModules.selector || '',
  28. time = new Date().getTime(),
  29. performance = [],
  30. query = arguments[0],
  31. methodInvoked = (typeof query == 'string'),
  32. queryArguments = [].slice.call(arguments, 1),
  33. requestAnimationFrame = window.requestAnimationFrame
  34. || window.mozRequestAnimationFrame
  35. || window.webkitRequestAnimationFrame
  36. || window.msRequestAnimationFrame
  37. || function(callback) { setTimeout(callback, 0); },
  38. returnedValue
  39. ;
  40. $allModules
  41. .each(function() {
  42. var
  43. settings = ( $.isPlainObject(parameters) )
  44. ? $.extend(true, {}, $.fn.modal.settings, parameters)
  45. : $.extend({}, $.fn.modal.settings),
  46. selector = settings.selector,
  47. className = settings.className,
  48. namespace = settings.namespace,
  49. error = settings.error,
  50. eventNamespace = '.' + namespace,
  51. moduleNamespace = 'module-' + namespace,
  52. $module = $(this),
  53. $context = $(settings.context),
  54. $close = $module.find(selector.close),
  55. $allModals,
  56. $otherModals,
  57. $focusedElement,
  58. $dimmable,
  59. $dimmer,
  60. element = this,
  61. instance = $module.data(moduleNamespace),
  62. ignoreRepeatedEvents = false,
  63. initialMouseDownInModal,
  64. initialMouseDownInScrollbar,
  65. initialBodyMargin = '',
  66. elementEventNamespace,
  67. id,
  68. observer,
  69. module
  70. ;
  71. module = {
  72. initialize: function() {
  73. module.verbose('Initializing dimmer', $context);
  74. module.create.id();
  75. module.create.dimmer();
  76. if ( settings.allowMultiple ) {
  77. module.create.innerDimmer();
  78. }
  79. if (!settings.centered){
  80. $module.addClass('top aligned');
  81. }
  82. module.refreshModals();
  83. module.bind.events();
  84. if(settings.observeChanges) {
  85. module.observeChanges();
  86. }
  87. module.instantiate();
  88. },
  89. instantiate: function() {
  90. module.verbose('Storing instance of modal');
  91. instance = module;
  92. $module
  93. .data(moduleNamespace, instance)
  94. ;
  95. },
  96. create: {
  97. dimmer: function() {
  98. var
  99. defaultSettings = {
  100. debug : settings.debug,
  101. dimmerName : 'modals'
  102. },
  103. dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
  104. ;
  105. if($.fn.dimmer === undefined) {
  106. module.error(error.dimmer);
  107. return;
  108. }
  109. module.debug('Creating dimmer');
  110. $dimmable = $context.dimmer(dimmerSettings);
  111. if(settings.detachable) {
  112. module.verbose('Modal is detachable, moving content into dimmer');
  113. $dimmable.dimmer('add content', $module);
  114. }
  115. else {
  116. module.set.undetached();
  117. }
  118. $dimmer = $dimmable.dimmer('get dimmer');
  119. },
  120. id: function() {
  121. id = (Math.random().toString(16) + '000000000').substr(2, 8);
  122. elementEventNamespace = '.' + id;
  123. module.verbose('Creating unique id for element', id);
  124. },
  125. innerDimmer: function() {
  126. if ( $module.find(selector.dimmer).length == 0 ) {
  127. $module.prepend('<div class="ui inverted dimmer"></div>');
  128. }
  129. }
  130. },
  131. destroy: function() {
  132. if (observer) {
  133. observer.disconnect();
  134. }
  135. module.verbose('Destroying previous modal');
  136. $module
  137. .removeData(moduleNamespace)
  138. .off(eventNamespace)
  139. ;
  140. $window.off(elementEventNamespace);
  141. $dimmer.off(elementEventNamespace);
  142. $close.off(eventNamespace);
  143. $context.dimmer('destroy');
  144. },
  145. observeChanges: function() {
  146. if('MutationObserver' in window) {
  147. observer = new MutationObserver(function(mutations) {
  148. module.debug('DOM tree modified, refreshing');
  149. module.refresh();
  150. });
  151. observer.observe(element, {
  152. childList : true,
  153. subtree : true
  154. });
  155. module.debug('Setting up mutation observer', observer);
  156. }
  157. },
  158. refresh: function() {
  159. module.remove.scrolling();
  160. module.cacheSizes();
  161. if(!module.can.useFlex()) {
  162. module.set.modalOffset();
  163. }
  164. module.set.screenHeight();
  165. module.set.type();
  166. },
  167. refreshModals: function() {
  168. $otherModals = $module.siblings(selector.modal);
  169. $allModals = $otherModals.add($module);
  170. },
  171. attachEvents: function(selector, event) {
  172. var
  173. $toggle = $(selector)
  174. ;
  175. event = $.isFunction(module[event])
  176. ? module[event]
  177. : module.toggle
  178. ;
  179. if($toggle.length > 0) {
  180. module.debug('Attaching modal events to element', selector, event);
  181. $toggle
  182. .off(eventNamespace)
  183. .on('click' + eventNamespace, event)
  184. ;
  185. }
  186. else {
  187. module.error(error.notFound, selector);
  188. }
  189. },
  190. bind: {
  191. events: function() {
  192. module.verbose('Attaching events');
  193. $module
  194. .on('click' + eventNamespace, selector.close, module.event.close)
  195. .on('click' + eventNamespace, selector.approve, module.event.approve)
  196. .on('click' + eventNamespace, selector.deny, module.event.deny)
  197. ;
  198. $window
  199. .on('resize' + elementEventNamespace, module.event.resize)
  200. ;
  201. },
  202. scrollLock: function() {
  203. // touch events default to passive, due to changes in chrome to optimize mobile perf
  204. $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
  205. }
  206. },
  207. unbind: {
  208. scrollLock: function() {
  209. $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
  210. }
  211. },
  212. get: {
  213. id: function() {
  214. return (Math.random().toString(16) + '000000000').substr(2, 8);
  215. }
  216. },
  217. event: {
  218. approve: function() {
  219. if(ignoreRepeatedEvents || settings.onApprove.call(element, $(this)) === false) {
  220. module.verbose('Approve callback returned false cancelling hide');
  221. return;
  222. }
  223. ignoreRepeatedEvents = true;
  224. module.hide(function() {
  225. ignoreRepeatedEvents = false;
  226. });
  227. },
  228. preventScroll: function(event) {
  229. if(event.target.className.indexOf('dimmer') !== -1) {
  230. event.preventDefault();
  231. }
  232. },
  233. deny: function() {
  234. if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) {
  235. module.verbose('Deny callback returned false cancelling hide');
  236. return;
  237. }
  238. ignoreRepeatedEvents = true;
  239. module.hide(function() {
  240. ignoreRepeatedEvents = false;
  241. });
  242. },
  243. close: function() {
  244. module.hide();
  245. },
  246. mousedown: function(event) {
  247. var
  248. $target = $(event.target)
  249. ;
  250. initialMouseDownInModal = ($target.closest(selector.modal).length > 0);
  251. if(initialMouseDownInModal) {
  252. module.verbose('Mouse down event registered inside the modal');
  253. }
  254. initialMouseDownInScrollbar = module.is.scrolling() && $(window).outerWidth() - settings.scrollbarWidth <= event.clientX;
  255. if(initialMouseDownInScrollbar) {
  256. module.verbose('Mouse down event registered inside the scrollbar');
  257. }
  258. },
  259. mouseup: function(event) {
  260. if(!settings.closable) {
  261. module.verbose('Dimmer clicked but closable setting is disabled');
  262. return;
  263. }
  264. if(initialMouseDownInModal) {
  265. module.debug('Dimmer clicked but mouse down was initially registered inside the modal');
  266. return;
  267. }
  268. if(initialMouseDownInScrollbar){
  269. module.debug('Dimmer clicked but mouse down was initially registered inside the scrollbar');
  270. return;
  271. }
  272. var
  273. $target = $(event.target),
  274. isInModal = ($target.closest(selector.modal).length > 0),
  275. isInDOM = $.contains(document.documentElement, event.target)
  276. ;
  277. if(!isInModal && isInDOM && module.is.active() && $module.hasClass(className.front) ) {
  278. module.debug('Dimmer clicked, hiding all modals');
  279. if(settings.allowMultiple) {
  280. if(!module.hideAll()) {
  281. return;
  282. }
  283. }
  284. else if(!module.hide()){
  285. return;
  286. }
  287. module.remove.clickaway();
  288. }
  289. },
  290. debounce: function(method, delay) {
  291. clearTimeout(module.timer);
  292. module.timer = setTimeout(method, delay);
  293. },
  294. keyboard: function(event) {
  295. var
  296. keyCode = event.which,
  297. escapeKey = 27
  298. ;
  299. if(keyCode == escapeKey) {
  300. if(settings.closable) {
  301. module.debug('Escape key pressed hiding modal');
  302. if ( $module.hasClass(className.front) ) {
  303. module.hide();
  304. }
  305. }
  306. else {
  307. module.debug('Escape key pressed, but closable is set to false');
  308. }
  309. event.preventDefault();
  310. }
  311. },
  312. resize: function() {
  313. if( $dimmable.dimmer('is active') && ( module.is.animating() || module.is.active() ) ) {
  314. requestAnimationFrame(module.refresh);
  315. }
  316. }
  317. },
  318. toggle: function() {
  319. if( module.is.active() || module.is.animating() ) {
  320. module.hide();
  321. }
  322. else {
  323. module.show();
  324. }
  325. },
  326. show: function(callback) {
  327. callback = $.isFunction(callback)
  328. ? callback
  329. : function(){}
  330. ;
  331. module.refreshModals();
  332. module.set.dimmerSettings();
  333. module.set.dimmerStyles();
  334. module.showModal(callback);
  335. },
  336. hide: function(callback) {
  337. callback = $.isFunction(callback)
  338. ? callback
  339. : function(){}
  340. ;
  341. module.refreshModals();
  342. return module.hideModal(callback);
  343. },
  344. showModal: function(callback) {
  345. callback = $.isFunction(callback)
  346. ? callback
  347. : function(){}
  348. ;
  349. if( module.is.animating() || !module.is.active() ) {
  350. module.showDimmer();
  351. module.cacheSizes();
  352. if(module.can.useFlex()) {
  353. module.remove.legacy();
  354. }
  355. else {
  356. module.set.legacy();
  357. module.set.modalOffset();
  358. module.debug('Using non-flex legacy modal positioning.');
  359. }
  360. module.set.screenHeight();
  361. module.set.type();
  362. module.set.clickaway();
  363. if( !settings.allowMultiple && module.others.active() ) {
  364. module.hideOthers(module.showModal);
  365. }
  366. else {
  367. ignoreRepeatedEvents = false;
  368. if( settings.allowMultiple ) {
  369. if ( module.others.active() ) {
  370. $otherModals.filter('.' + className.active).find(selector.dimmer).addClass('active');
  371. }
  372. if ( settings.detachable ) {
  373. $module.detach().appendTo($dimmer);
  374. }
  375. }
  376. settings.onShow.call(element);
  377. if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
  378. module.debug('Showing modal with css animations');
  379. $module
  380. .transition({
  381. debug : settings.debug,
  382. animation : settings.transition + ' in',
  383. queue : settings.queue,
  384. duration : settings.duration,
  385. useFailSafe : true,
  386. onComplete : function() {
  387. settings.onVisible.apply(element);
  388. if(settings.keyboardShortcuts) {
  389. module.add.keyboardShortcuts();
  390. }
  391. module.save.focus();
  392. module.set.active();
  393. if(settings.autofocus) {
  394. module.set.autofocus();
  395. }
  396. callback();
  397. }
  398. })
  399. ;
  400. }
  401. else {
  402. module.error(error.noTransition);
  403. }
  404. }
  405. }
  406. else {
  407. module.debug('Modal is already visible');
  408. }
  409. },
  410. hideModal: function(callback, keepDimmed, hideOthersToo) {
  411. var
  412. $previousModal = $otherModals.filter('.' + className.active).last()
  413. ;
  414. callback = $.isFunction(callback)
  415. ? callback
  416. : function(){}
  417. ;
  418. module.debug('Hiding modal');
  419. if(settings.onHide.call(element, $(this)) === false) {
  420. module.verbose('Hide callback returned false cancelling hide');
  421. ignoreRepeatedEvents = false;
  422. return false;
  423. }
  424. if( module.is.animating() || module.is.active() ) {
  425. if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
  426. module.remove.active();
  427. $module
  428. .transition({
  429. debug : settings.debug,
  430. animation : settings.transition + ' out',
  431. queue : settings.queue,
  432. duration : settings.duration,
  433. useFailSafe : true,
  434. onStart : function() {
  435. if(!module.others.active() && !module.others.animating() && !keepDimmed) {
  436. module.hideDimmer();
  437. }
  438. if( settings.keyboardShortcuts && !module.others.active() ) {
  439. module.remove.keyboardShortcuts();
  440. }
  441. },
  442. onComplete : function() {
  443. module.unbind.scrollLock();
  444. if ( settings.allowMultiple ) {
  445. $previousModal.addClass(className.front);
  446. $module.removeClass(className.front);
  447. if ( hideOthersToo ) {
  448. $allModals.find(selector.dimmer).removeClass('active');
  449. }
  450. else {
  451. $previousModal.find(selector.dimmer).removeClass('active');
  452. }
  453. }
  454. settings.onHidden.call(element);
  455. module.remove.dimmerStyles();
  456. module.restore.focus();
  457. callback();
  458. }
  459. })
  460. ;
  461. }
  462. else {
  463. module.error(error.noTransition);
  464. }
  465. }
  466. },
  467. showDimmer: function() {
  468. if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
  469. module.save.bodyMargin();
  470. module.debug('Showing dimmer');
  471. $dimmable.dimmer('show');
  472. }
  473. else {
  474. module.debug('Dimmer already visible');
  475. }
  476. },
  477. hideDimmer: function() {
  478. if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
  479. module.unbind.scrollLock();
  480. $dimmable.dimmer('hide', function() {
  481. module.restore.bodyMargin();
  482. module.remove.clickaway();
  483. module.remove.screenHeight();
  484. });
  485. }
  486. else {
  487. module.debug('Dimmer is not visible cannot hide');
  488. return;
  489. }
  490. },
  491. hideAll: function(callback) {
  492. var
  493. $visibleModals = $allModals.filter('.' + className.active + ', .' + className.animating)
  494. ;
  495. callback = $.isFunction(callback)
  496. ? callback
  497. : function(){}
  498. ;
  499. if( $visibleModals.length > 0 ) {
  500. module.debug('Hiding all visible modals');
  501. var hideOk = true;
  502. //check in reverse order trying to hide most top displayed modal first
  503. $($visibleModals.get().reverse()).each(function(index,element){
  504. if(hideOk){
  505. hideOk = $(element).modal('hide modal', callback, false, true);
  506. }
  507. });
  508. if(hideOk) {
  509. module.hideDimmer();
  510. }
  511. return hideOk;
  512. }
  513. },
  514. hideOthers: function(callback) {
  515. var
  516. $visibleModals = $otherModals.filter('.' + className.active + ', .' + className.animating)
  517. ;
  518. callback = $.isFunction(callback)
  519. ? callback
  520. : function(){}
  521. ;
  522. if( $visibleModals.length > 0 ) {
  523. module.debug('Hiding other modals', $otherModals);
  524. $visibleModals
  525. .modal('hide modal', callback, true)
  526. ;
  527. }
  528. },
  529. others: {
  530. active: function() {
  531. return ($otherModals.filter('.' + className.active).length > 0);
  532. },
  533. animating: function() {
  534. return ($otherModals.filter('.' + className.animating).length > 0);
  535. }
  536. },
  537. add: {
  538. keyboardShortcuts: function() {
  539. module.verbose('Adding keyboard shortcuts');
  540. $document
  541. .on('keyup' + eventNamespace, module.event.keyboard)
  542. ;
  543. }
  544. },
  545. save: {
  546. focus: function() {
  547. var
  548. $activeElement = $(document.activeElement),
  549. inCurrentModal = $activeElement.closest($module).length > 0
  550. ;
  551. if(!inCurrentModal) {
  552. $focusedElement = $(document.activeElement).blur();
  553. }
  554. },
  555. bodyMargin: function() {
  556. initialBodyMargin = $body.css('margin-right');
  557. var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')),
  558. bodyScrollbarWidth = window.innerWidth - document.documentElement.clientWidth,
  559. diffPos = bodyMarginRightPixel + bodyScrollbarWidth;
  560. $body.css('margin-right', diffPos + 'px');
  561. $body.find(selector.bodyFixed).css('padding-right', diffPos + 'px');
  562. }
  563. },
  564. restore: {
  565. focus: function() {
  566. if($focusedElement && $focusedElement.length > 0 && settings.restoreFocus) {
  567. $focusedElement.focus();
  568. }
  569. },
  570. bodyMargin: function() {
  571. $body.css('margin-right', initialBodyMargin);
  572. $body.find(selector.bodyFixed).css('padding-right', initialBodyMargin);
  573. }
  574. },
  575. remove: {
  576. active: function() {
  577. $module.removeClass(className.active);
  578. },
  579. legacy: function() {
  580. $module.removeClass(className.legacy);
  581. },
  582. clickaway: function() {
  583. $dimmer
  584. .off('mousedown' + elementEventNamespace)
  585. ;
  586. $dimmer
  587. .off('mouseup' + elementEventNamespace)
  588. ;
  589. },
  590. dimmerStyles: function() {
  591. $dimmer.removeClass(className.inverted);
  592. $dimmable.removeClass(className.blurring);
  593. },
  594. bodyStyle: function() {
  595. if($body.attr('style') === '') {
  596. module.verbose('Removing style attribute');
  597. $body.removeAttr('style');
  598. }
  599. },
  600. screenHeight: function() {
  601. module.debug('Removing page height');
  602. $body
  603. .css('height', '')
  604. ;
  605. },
  606. keyboardShortcuts: function() {
  607. module.verbose('Removing keyboard shortcuts');
  608. $document
  609. .off('keyup' + eventNamespace)
  610. ;
  611. },
  612. scrolling: function() {
  613. $dimmable.removeClass(className.scrolling);
  614. $module.removeClass(className.scrolling);
  615. }
  616. },
  617. cacheSizes: function() {
  618. $module.addClass(className.loading);
  619. var
  620. scrollHeight = $module.prop('scrollHeight'),
  621. modalWidth = $module.outerWidth(),
  622. modalHeight = $module.outerHeight()
  623. ;
  624. if(module.cache === undefined || modalHeight !== 0) {
  625. module.cache = {
  626. pageHeight : $(document).outerHeight(),
  627. width : modalWidth,
  628. height : modalHeight + settings.offset,
  629. scrollHeight : scrollHeight + settings.offset,
  630. contextHeight : (settings.context == 'body')
  631. ? $(window).height()
  632. : $dimmable.height(),
  633. };
  634. module.cache.topOffset = -(module.cache.height / 2);
  635. }
  636. $module.removeClass(className.loading);
  637. module.debug('Caching modal and container sizes', module.cache);
  638. },
  639. can: {
  640. useFlex: function() {
  641. return (settings.useFlex == 'auto')
  642. ? settings.detachable && !module.is.ie()
  643. : settings.useFlex
  644. ;
  645. },
  646. fit: function() {
  647. var
  648. contextHeight = module.cache.contextHeight,
  649. verticalCenter = module.cache.contextHeight / 2,
  650. topOffset = module.cache.topOffset,
  651. scrollHeight = module.cache.scrollHeight,
  652. height = module.cache.height,
  653. paddingHeight = settings.padding,
  654. startPosition = (verticalCenter + topOffset)
  655. ;
  656. return (scrollHeight > height)
  657. ? (startPosition + scrollHeight + paddingHeight < contextHeight)
  658. : (height + (paddingHeight * 2) < contextHeight)
  659. ;
  660. }
  661. },
  662. is: {
  663. active: function() {
  664. return $module.hasClass(className.active);
  665. },
  666. ie: function() {
  667. var
  668. isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
  669. isIE = ('ActiveXObject' in window)
  670. ;
  671. return (isIE11 || isIE);
  672. },
  673. animating: function() {
  674. return $module.transition('is supported')
  675. ? $module.transition('is animating')
  676. : $module.is(':visible')
  677. ;
  678. },
  679. scrolling: function() {
  680. return $dimmable.hasClass(className.scrolling);
  681. },
  682. modernBrowser: function() {
  683. // appName for IE11 reports 'Netscape' can no longer use
  684. return !(window.ActiveXObject || 'ActiveXObject' in window);
  685. }
  686. },
  687. set: {
  688. autofocus: function() {
  689. var
  690. $inputs = $module.find('[tabindex], :input').filter(':visible').filter(function() {
  691. return $(this).closest('.disabled').length === 0;
  692. }),
  693. $autofocus = $inputs.filter('[autofocus]'),
  694. $input = ($autofocus.length > 0)
  695. ? $autofocus.first()
  696. : $inputs.first()
  697. ;
  698. if($input.length > 0) {
  699. $input.focus();
  700. }
  701. },
  702. clickaway: function() {
  703. $dimmer
  704. .on('mousedown' + elementEventNamespace, module.event.mousedown)
  705. ;
  706. $dimmer
  707. .on('mouseup' + elementEventNamespace, module.event.mouseup)
  708. ;
  709. },
  710. dimmerSettings: function() {
  711. if($.fn.dimmer === undefined) {
  712. module.error(error.dimmer);
  713. return;
  714. }
  715. var
  716. defaultSettings = {
  717. debug : settings.debug,
  718. dimmerName : 'modals',
  719. closable : 'auto',
  720. useFlex : module.can.useFlex(),
  721. duration : {
  722. show : settings.duration,
  723. hide : settings.duration
  724. }
  725. },
  726. dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
  727. ;
  728. if(settings.inverted) {
  729. dimmerSettings.variation = (dimmerSettings.variation !== undefined)
  730. ? dimmerSettings.variation + ' inverted'
  731. : 'inverted'
  732. ;
  733. }
  734. $context.dimmer('setting', dimmerSettings);
  735. },
  736. dimmerStyles: function() {
  737. if(settings.inverted) {
  738. $dimmer.addClass(className.inverted);
  739. }
  740. else {
  741. $dimmer.removeClass(className.inverted);
  742. }
  743. if(settings.blurring) {
  744. $dimmable.addClass(className.blurring);
  745. }
  746. else {
  747. $dimmable.removeClass(className.blurring);
  748. }
  749. },
  750. modalOffset: function() {
  751. var
  752. width = module.cache.width,
  753. height = module.cache.height
  754. ;
  755. $module
  756. .css({
  757. marginTop: (!$module.hasClass('aligned') && module.can.fit())
  758. ? -(height / 2)
  759. : 0,
  760. marginLeft: -(width / 2)
  761. })
  762. ;
  763. module.verbose('Setting modal offset for legacy mode');
  764. },
  765. screenHeight: function() {
  766. if( module.can.fit() ) {
  767. $body.css('height', '');
  768. }
  769. else if(!$module.hasClass('bottom')) {
  770. module.debug('Modal is taller than page content, resizing page height');
  771. $body
  772. .css('height', module.cache.height + (settings.padding * 2) )
  773. ;
  774. }
  775. },
  776. active: function() {
  777. $module.addClass(className.active + ' ' + className.front);
  778. $otherModals.filter('.' + className.active).removeClass(className.front);
  779. },
  780. scrolling: function() {
  781. $dimmable.addClass(className.scrolling);
  782. $module.addClass(className.scrolling);
  783. module.unbind.scrollLock();
  784. },
  785. legacy: function() {
  786. $module.addClass(className.legacy);
  787. },
  788. type: function() {
  789. if(module.can.fit()) {
  790. module.verbose('Modal fits on screen');
  791. if(!module.others.active() && !module.others.animating()) {
  792. module.remove.scrolling();
  793. module.bind.scrollLock();
  794. }
  795. }
  796. else if (!$module.hasClass('bottom')){
  797. module.verbose('Modal cannot fit on screen setting to scrolling');
  798. module.set.scrolling();
  799. } else {
  800. module.verbose('Bottom aligned modal not fitting on screen is unsupported for scrolling');
  801. }
  802. },
  803. undetached: function() {
  804. $dimmable.addClass(className.undetached);
  805. }
  806. },
  807. setting: function(name, value) {
  808. module.debug('Changing setting', name, value);
  809. if( $.isPlainObject(name) ) {
  810. $.extend(true, settings, name);
  811. }
  812. else if(value !== undefined) {
  813. if($.isPlainObject(settings[name])) {
  814. $.extend(true, settings[name], value);
  815. }
  816. else {
  817. settings[name] = value;
  818. }
  819. }
  820. else {
  821. return settings[name];
  822. }
  823. },
  824. internal: function(name, value) {
  825. if( $.isPlainObject(name) ) {
  826. $.extend(true, module, name);
  827. }
  828. else if(value !== undefined) {
  829. module[name] = value;
  830. }
  831. else {
  832. return module[name];
  833. }
  834. },
  835. debug: function() {
  836. if(!settings.silent && settings.debug) {
  837. if(settings.performance) {
  838. module.performance.log(arguments);
  839. }
  840. else {
  841. module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
  842. module.debug.apply(console, arguments);
  843. }
  844. }
  845. },
  846. verbose: function() {
  847. if(!settings.silent && settings.verbose && settings.debug) {
  848. if(settings.performance) {
  849. module.performance.log(arguments);
  850. }
  851. else {
  852. module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
  853. module.verbose.apply(console, arguments);
  854. }
  855. }
  856. },
  857. error: function() {
  858. if(!settings.silent) {
  859. module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
  860. module.error.apply(console, arguments);
  861. }
  862. },
  863. performance: {
  864. log: function(message) {
  865. var
  866. currentTime,
  867. executionTime,
  868. previousTime
  869. ;
  870. if(settings.performance) {
  871. currentTime = new Date().getTime();
  872. previousTime = time || currentTime;
  873. executionTime = currentTime - previousTime;
  874. time = currentTime;
  875. performance.push({
  876. 'Name' : message[0],
  877. 'Arguments' : [].slice.call(message, 1) || '',
  878. 'Element' : element,
  879. 'Execution Time' : executionTime
  880. });
  881. }
  882. clearTimeout(module.performance.timer);
  883. module.performance.timer = setTimeout(module.performance.display, 500);
  884. },
  885. display: function() {
  886. var
  887. title = settings.name + ':',
  888. totalTime = 0
  889. ;
  890. time = false;
  891. clearTimeout(module.performance.timer);
  892. $.each(performance, function(index, data) {
  893. totalTime += data['Execution Time'];
  894. });
  895. title += ' ' + totalTime + 'ms';
  896. if(moduleSelector) {
  897. title += ' \'' + moduleSelector + '\'';
  898. }
  899. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  900. console.groupCollapsed(title);
  901. if(console.table) {
  902. console.table(performance);
  903. }
  904. else {
  905. $.each(performance, function(index, data) {
  906. console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
  907. });
  908. }
  909. console.groupEnd();
  910. }
  911. performance = [];
  912. }
  913. },
  914. invoke: function(query, passedArguments, context) {
  915. var
  916. object = instance,
  917. maxDepth,
  918. found,
  919. response
  920. ;
  921. passedArguments = passedArguments || queryArguments;
  922. context = element || context;
  923. if(typeof query == 'string' && object !== undefined) {
  924. query = query.split(/[\. ]/);
  925. maxDepth = query.length - 1;
  926. $.each(query, function(depth, value) {
  927. var camelCaseValue = (depth != maxDepth)
  928. ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
  929. : query
  930. ;
  931. if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
  932. object = object[camelCaseValue];
  933. }
  934. else if( object[camelCaseValue] !== undefined ) {
  935. found = object[camelCaseValue];
  936. return false;
  937. }
  938. else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
  939. object = object[value];
  940. }
  941. else if( object[value] !== undefined ) {
  942. found = object[value];
  943. return false;
  944. }
  945. else {
  946. return false;
  947. }
  948. });
  949. }
  950. if ( $.isFunction( found ) ) {
  951. response = found.apply(context, passedArguments);
  952. }
  953. else if(found !== undefined) {
  954. response = found;
  955. }
  956. if(Array.isArray(returnedValue)) {
  957. returnedValue.push(response);
  958. }
  959. else if(returnedValue !== undefined) {
  960. returnedValue = [returnedValue, response];
  961. }
  962. else if(response !== undefined) {
  963. returnedValue = response;
  964. }
  965. return found;
  966. }
  967. };
  968. if(methodInvoked) {
  969. if(instance === undefined) {
  970. module.initialize();
  971. }
  972. module.invoke(query);
  973. }
  974. else {
  975. if(instance !== undefined) {
  976. instance.invoke('destroy');
  977. }
  978. module.initialize();
  979. }
  980. })
  981. ;
  982. return (returnedValue !== undefined)
  983. ? returnedValue
  984. : this
  985. ;
  986. };
  987. $.fn.modal.settings = {
  988. name : 'Modal',
  989. namespace : 'modal',
  990. useFlex : 'auto',
  991. offset : 0,
  992. silent : false,
  993. debug : false,
  994. verbose : false,
  995. performance : true,
  996. observeChanges : false,
  997. allowMultiple : false,
  998. detachable : true,
  999. closable : true,
  1000. autofocus : true,
  1001. restoreFocus : true,
  1002. inverted : false,
  1003. blurring : false,
  1004. centered : true,
  1005. dimmerSettings : {
  1006. closable : false,
  1007. useCSS : true
  1008. },
  1009. // whether to use keyboard shortcuts
  1010. keyboardShortcuts: true,
  1011. context : 'body',
  1012. queue : false,
  1013. duration : 500,
  1014. transition : 'scale',
  1015. // padding with edge of page
  1016. padding : 50,
  1017. scrollbarWidth: 10,
  1018. // called before show animation
  1019. onShow : function(){},
  1020. // called after show animation
  1021. onVisible : function(){},
  1022. // called before hide animation
  1023. onHide : function(){ return true; },
  1024. // called after hide animation
  1025. onHidden : function(){},
  1026. // called after approve selector match
  1027. onApprove : function(){ return true; },
  1028. // called after deny selector match
  1029. onDeny : function(){ return true; },
  1030. selector : {
  1031. close : '> .close',
  1032. approve : '.actions .positive, .actions .approve, .actions .ok',
  1033. deny : '.actions .negative, .actions .deny, .actions .cancel',
  1034. modal : '.ui.modal',
  1035. dimmer : '> .ui.dimmer',
  1036. bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar'
  1037. },
  1038. error : {
  1039. dimmer : 'UI Dimmer, a required component is not included in this page',
  1040. method : 'The method you called is not defined.',
  1041. notFound : 'The element you specified could not be found'
  1042. },
  1043. className : {
  1044. active : 'active',
  1045. animating : 'animating',
  1046. blurring : 'blurring',
  1047. inverted : 'inverted',
  1048. legacy : 'legacy',
  1049. loading : 'loading',
  1050. scrolling : 'scrolling',
  1051. undetached : 'undetached',
  1052. front : 'front'
  1053. }
  1054. };
  1055. })( jQuery, window, document );