wp-includes/js/tinymce/plugins/fullscreen/plugin.js

   1 /**
   2  * plugin.js
   3  *
   4  * Released under LGPL License.
   5  * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 /*global tinymce:true */
  12
  13 tinymce.PluginManager.add('fullscreen', function(editor) {
  14         var fullscreenState = false, DOM = tinymce.DOM, iframeWidth, iframeHeight, resizeHandler;
  15         var containerWidth, containerHeight, scrollPos;
  16
  17         if (editor.settings.inline) {
  18                 return;
  19         }
  20
  21         function getWindowSize() {
  22                 var w, h, win = window, doc = document;
  23                 var body = doc.body;
  24
  25                 // Old IE
  26                 if (body.offsetWidth) {
  27                         w = body.offsetWidth;
  28                         h = body.offsetHeight;
  29                 }
  30
  31                 // Modern browsers
  32                 if (win.innerWidth && win.innerHeight) {
  33                         w = win.innerWidth;
  34                         h = win.innerHeight;
  35                 }
  36
  37                 return {w: w, h: h};
  38         }
  39
  40         function getScrollPos() {
  41                 var vp = tinymce.DOM.getViewPort();
  42
  43                 return {
  44                         x: vp.x,
  45                         y: vp.y
  46                 };
  47         }
  48
  49         function setScrollPos(pos) {
  50                 scrollTo(pos.x, pos.y);
  51         }
  52
  53         function toggleFullscreen() {
  54                 var body = document.body, documentElement = document.documentElement, editorContainerStyle;
  55                 var editorContainer, iframe, iframeStyle;
  56
  57                 function resize() {
  58                         DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
  59                 }
  60
  61                 fullscreenState = !fullscreenState;
  62
  63                 editorContainer = editor.getContainer();
  64                 editorContainerStyle = editorContainer.style;
  65                 iframe = editor.getContentAreaContainer().firstChild;
  66                 iframeStyle = iframe.style;
  67
  68                 if (fullscreenState) {
  69                         scrollPos = getScrollPos();
  70                         iframeWidth = iframeStyle.width;
  71                         iframeHeight = iframeStyle.height;
  72                         iframeStyle.width = iframeStyle.height = '100%';
  73                         containerWidth = editorContainerStyle.width;
  74                         containerHeight = editorContainerStyle.height;
  75                         editorContainerStyle.width = editorContainerStyle.height = '';
  76
  77                         DOM.addClass(body, 'mce-fullscreen');
  78                         DOM.addClass(documentElement, 'mce-fullscreen');
  79                         DOM.addClass(editorContainer, 'mce-fullscreen');
  80
  81                         DOM.bind(window, 'resize', resize);
  82                         resize();
  83                         resizeHandler = resize;
  84                 } else {
  85                         iframeStyle.width = iframeWidth;
  86                         iframeStyle.height = iframeHeight;
  87
  88                         if (containerWidth) {
  89                                 editorContainerStyle.width = containerWidth;
  90                         }
  91
  92                         if (containerHeight) {
  93                                 editorContainerStyle.height = containerHeight;
  94                         }
  95
  96                         DOM.removeClass(body, 'mce-fullscreen');
  97                         DOM.removeClass(documentElement, 'mce-fullscreen');
  98                         DOM.removeClass(editorContainer, 'mce-fullscreen');
  99                         DOM.unbind(window, 'resize', resizeHandler);
 100                         setScrollPos(scrollPos);
 101                 }
 102
 103                 editor.fire('FullscreenStateChanged', {state: fullscreenState});
 104         }
 105
 106         editor.on('init', function() {
 107                 editor.addShortcut('Meta+Alt+F', '', toggleFullscreen);
 108         });
 109
 110         editor.on('remove', function() {
 111                 if (resizeHandler) {
 112                         DOM.unbind(window, 'resize', resizeHandler);
 113                 }
 114         });
 115
 116         editor.addCommand('mceFullScreen', toggleFullscreen);
 117
 118         editor.addMenuItem('fullscreen', {
 119                 text: 'Fullscreen',
 120                 shortcut: 'Meta+Alt+F',
 121                 selectable: true,
 122                 onClick: function() {
 123                         toggleFullscreen();
 124                         editor.focus();
 125                 },
 126                 onPostRender: function() {
 127                         var self = this;
 128
 129                         editor.on('FullscreenStateChanged', function(e) {
 130                                 self.active(e.state);
 131                         });
 132                 },
 133                 context: 'view'
 134         });
 135
 136         editor.addButton('fullscreen', {
 137                 tooltip: 'Fullscreen',
 138                 shortcut: 'Meta+Alt+F',
 139                 onClick: toggleFullscreen,
 140                 onPostRender: function() {
 141                         var self = this;
 142
 143                         editor.on('FullscreenStateChanged', function(e) {
 144                                 self.active(e.state);
 145                         });
 146                 }
 147         });
 148
 149         return {
 150                 isFullscreen: function() {
 151                         return fullscreenState;
 152                 }
 153         };
 154 });