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

   1 /**
   2  * plugin.js
   3  *
   4  * Copyright, Moxiecode Systems AB
   5  * Released under LGPL License.
   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;
  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 toggleFullscreen() {
  41                 var body = document.body, documentElement = document.documentElement, editorContainerStyle;
  42                 var editorContainer, iframe, iframeStyle;
  43
  44                 function resize() {
  45                         DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
  46                 }
  47
  48                 fullscreenState = !fullscreenState;
  49
  50                 editorContainer = editor.getContainer();
  51                 editorContainerStyle = editorContainer.style;
  52                 iframe = editor.getContentAreaContainer().firstChild;
  53                 iframeStyle = iframe.style;
  54
  55                 if (fullscreenState) {
  56                         iframeWidth = iframeStyle.width;
  57                         iframeHeight = iframeStyle.height;
  58                         iframeStyle.width = iframeStyle.height = '100%';
  59                         containerWidth = editorContainerStyle.width;
  60                         containerHeight = editorContainerStyle.height;
  61                         editorContainerStyle.width = editorContainerStyle.height = '';
  62
  63                         DOM.addClass(body, 'mce-fullscreen');
  64                         DOM.addClass(documentElement, 'mce-fullscreen');
  65                         DOM.addClass(editorContainer, 'mce-fullscreen');
  66
  67                         DOM.bind(window, 'resize', resize);
  68                         resize();
  69                         resizeHandler = resize;
  70                 } else {
  71                         iframeStyle.width = iframeWidth;
  72                         iframeStyle.height = iframeHeight;
  73
  74                         if (containerWidth) {
  75                                 editorContainerStyle.width = containerWidth;
  76                         }
  77
  78                         if (containerHeight) {
  79                                 editorContainerStyle.height = containerHeight;
  80                         }
  81
  82                         DOM.removeClass(body, 'mce-fullscreen');
  83                         DOM.removeClass(documentElement, 'mce-fullscreen');
  84                         DOM.removeClass(editorContainer, 'mce-fullscreen');
  85                         DOM.unbind(window, 'resize', resizeHandler);
  86                 }
  87
  88                 editor.fire('FullscreenStateChanged', {state: fullscreenState});
  89         }
  90
  91         editor.on('init', function() {
  92                 editor.addShortcut('Ctrl+Alt+F', '', toggleFullscreen);
  93         });
  94
  95         editor.on('remove', function() {
  96                 if (resizeHandler) {
  97                         DOM.unbind(window, 'resize', resizeHandler);
  98                 }
  99         });
 100
 101         editor.addCommand('mceFullScreen', toggleFullscreen);
 102
 103         editor.addMenuItem('fullscreen', {
 104                 text: 'Fullscreen',
 105                 shortcut: 'Ctrl+Alt+F',
 106                 selectable: true,
 107                 onClick: toggleFullscreen,
 108                 onPostRender: function() {
 109                         var self = this;
 110
 111                         editor.on('FullscreenStateChanged', function(e) {
 112                                 self.active(e.state);
 113                         });
 114                 },
 115                 context: 'view'
 116         });
 117
 118         editor.addButton('fullscreen', {
 119                 tooltip: 'Fullscreen',
 120                 shortcut: 'Ctrl+Alt+F',
 121                 onClick: toggleFullscreen,
 122                 onPostRender: function() {
 123                         var self = this;
 124
 125                         editor.on('FullscreenStateChanged', function(e) {
 126                                 self.active(e.state);
 127                         });
 128                 }
 129         });
 130
 131         return {
 132                 isFullscreen: function() {
 133                         return fullscreenState;
 134                 }
 135         };
 136 });