/app/bundles/CoreBundle/Assets/js/libraries/froala/plugins/fullscreen.js

https://gitlab.com/mautic-master/mautic · JavaScript · 209 lines · 151 code · 32 blank · 26 comment · 29 complexity · 559538b6c8e417285751a529d0673eb8 MD5 · raw file

  1. /*!
  2. * froala_editor v2.3.3 (https://www.froala.com/wysiwyg-editor)
  3. * License https://froala.com/wysiwyg-editor/terms/
  4. * Copyright 2014-2016 Froala Labs
  5. */
  6. (function (factory) {
  7. if (typeof define === 'function' && define.amd) {
  8. // AMD. Register as an anonymous module.
  9. define(['jquery'], factory);
  10. } else if (typeof module === 'object' && module.exports) {
  11. // Node/CommonJS
  12. module.exports = function( root, jQuery ) {
  13. if ( jQuery === undefined ) {
  14. // require('jQuery') returns a factory that requires window to
  15. // build a jQuery instance, we normalize how we use modules
  16. // that require this pattern but the window provided is a noop
  17. // if it's defined (how jquery works)
  18. if ( typeof window !== 'undefined' ) {
  19. jQuery = require('jquery');
  20. }
  21. else {
  22. jQuery = require('jquery')(root);
  23. }
  24. }
  25. factory(jQuery);
  26. return jQuery;
  27. };
  28. } else {
  29. // Browser globals
  30. factory(jQuery);
  31. }
  32. }(function ($) {
  33. 'use strict';
  34. $.FE.PLUGINS.fullscreen = function (editor) {
  35. var old_scroll;
  36. /**
  37. * Check if fullscreen mode is active.
  38. */
  39. function isActive () {
  40. return editor.$box.hasClass('fr-fullscreen');
  41. }
  42. /**
  43. * Turn fullscreen on.
  44. */
  45. var $placeholder;
  46. var height;
  47. var max_height;
  48. function _on () {
  49. old_scroll = $(editor.o_win).scrollTop();
  50. editor.$box.toggleClass('fr-fullscreen');
  51. $('body').toggleClass('fr-fullscreen');
  52. $placeholder = $('<div style="display: none;"></div>');
  53. editor.$box.after($placeholder);
  54. if (editor.helpers.isMobile()) {
  55. editor.$tb.data('parent', editor.$tb.parent());
  56. editor.$tb.prependTo(editor.$box);
  57. if (editor.$tb.data('sticky-dummy')) {
  58. editor.$tb.after(editor.$tb.data('sticky-dummy'));
  59. }
  60. }
  61. height = editor.opts.height;
  62. max_height = editor.opts.heightMax;
  63. editor.opts.height = editor.o_win.innerHeight - (editor.opts.toolbarInline ? 0 : editor.$tb.outerHeight());
  64. editor.opts.heightMax = null;
  65. editor.size.refresh();
  66. if (editor.opts.toolbarInline) editor.toolbar.showInline();
  67. var $parent_node = editor.$box.parent();
  68. while (!$parent_node.is('body')) {
  69. $parent_node
  70. .data('z-index', $parent_node.css('z-index'))
  71. .css('z-index', '9990');
  72. $parent_node = $parent_node.parent();
  73. }
  74. editor.events.trigger('charCounter.update');
  75. editor.$win.trigger('scroll');
  76. }
  77. /**
  78. * Turn fullscreen off.
  79. */
  80. function _off () {
  81. editor.$box.toggleClass('fr-fullscreen');
  82. $('body').toggleClass('fr-fullscreen');
  83. editor.$tb.prependTo(editor.$tb.data('parent'));
  84. if (editor.$tb.data('sticky-dummy')) {
  85. editor.$tb.after(editor.$tb.data('sticky-dummy'));
  86. }
  87. editor.opts.height = height;
  88. editor.opts.heightMax = max_height;
  89. editor.size.refresh();
  90. $(editor.o_win).scrollTop(old_scroll)
  91. if (editor.opts.toolbarInline) editor.toolbar.showInline();
  92. editor.events.trigger('charCounter.update');
  93. if (editor.opts.toolbarSticky) {
  94. if (editor.opts.toolbarStickyOffset) {
  95. if (editor.opts.toolbarBottom) {
  96. editor.$tb
  97. .css('bottom', editor.opts.toolbarStickyOffset)
  98. .data('bottom', editor.opts.toolbarStickyOffset);
  99. }
  100. else {
  101. editor.$tb
  102. .css('top', editor.opts.toolbarStickyOffset)
  103. .data('top', editor.opts.toolbarStickyOffset);
  104. }
  105. }
  106. }
  107. var $parent_node = editor.$box.parent();
  108. while (!$parent_node.is('body')) {
  109. if ($parent_node.data('z-index')) {
  110. $parent_node.css('z-index', '');
  111. if ($parent_node.css('z-index') != $parent_node.data('z-index')) {
  112. $parent_node.css('z-index', $parent_node.data('z-index'));
  113. }
  114. $parent_node.removeData('z-index');
  115. }
  116. $parent_node = $parent_node.parent();
  117. }
  118. editor.$win.trigger('scroll');
  119. }
  120. /**
  121. * Exec fullscreen.
  122. */
  123. function toggle () {
  124. if (!isActive()) {
  125. _on();
  126. }
  127. else {
  128. _off();
  129. }
  130. refresh(editor.$tb.find('.fr-command[data-cmd="fullscreen"]'));
  131. }
  132. function refresh ($btn) {
  133. var active = isActive();
  134. $btn.toggleClass('fr-active', active);
  135. $btn.find('> *').replaceWith(!active ? editor.icon.create('fullscreen') : editor.icon.create('fullscreenCompress'));
  136. }
  137. function _init () {
  138. if (!editor.$wp) return false;
  139. editor.events.$on($(editor.o_win), 'resize', function () {
  140. if (isActive()) {
  141. _off();
  142. _on();
  143. }
  144. });
  145. editor.events.on('toolbar.hide', function () {
  146. if (isActive() && editor.helpers.isMobile()) return false;
  147. })
  148. }
  149. return {
  150. _init: _init,
  151. toggle: toggle,
  152. refresh: refresh,
  153. isActive: isActive
  154. }
  155. }
  156. // Register the font size command.
  157. $.FE.RegisterCommand('fullscreen', {
  158. title: 'Fullscreen',
  159. undo: false,
  160. focus: false,
  161. forcedRefresh: true,
  162. callback: function () {
  163. this.fullscreen.toggle();
  164. },
  165. refresh: function ($btn) {
  166. this.fullscreen.refresh($btn);
  167. },
  168. plugin: 'fullscreen'
  169. })
  170. // Add the font size icon.
  171. $.FE.DefineIcon('fullscreen', {
  172. NAME: 'expand'
  173. });
  174. $.FE.DefineIcon('fullscreenCompress', {
  175. NAME: 'compress'
  176. });
  177. }));