modal.js 40 KB

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