mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
163 lines
4.9 KiB
JavaScript
163 lines
4.9 KiB
JavaScript
|
/**
|
||
|
* plugin.js
|
||
|
*
|
||
|
* Released under LGPL License.
|
||
|
* Copyright (c) 1999-2015 Ephox Corp. All rights reserved
|
||
|
*
|
||
|
* License: http://www.tinymce.com/license
|
||
|
* Contributing: http://www.tinymce.com/contributing
|
||
|
*/
|
||
|
|
||
|
/*global tinymce:true */
|
||
|
/*eslint no-nested-ternary:0 */
|
||
|
|
||
|
/**
|
||
|
* Auto Resize
|
||
|
*
|
||
|
* This plugin automatically resizes the content area to fit its content height.
|
||
|
* It will retain a minimum height, which is the height of the content area when
|
||
|
* it's initialized.
|
||
|
*/
|
||
|
tinymce.PluginManager.add('autoresize', function(editor) {
|
||
|
var settings = editor.settings, oldSize = 0;
|
||
|
|
||
|
function isFullscreen() {
|
||
|
return editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
|
||
|
}
|
||
|
|
||
|
if (editor.settings.inline) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* This method gets executed each time the editor needs to resize.
|
||
|
*/
|
||
|
function resize(e) {
|
||
|
var deltaSize, doc, body, docElm, DOM = tinymce.DOM, resizeHeight, myHeight,
|
||
|
marginTop, marginBottom, paddingTop, paddingBottom, borderTop, borderBottom;
|
||
|
|
||
|
doc = editor.getDoc();
|
||
|
if (!doc) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
body = doc.body;
|
||
|
docElm = doc.documentElement;
|
||
|
resizeHeight = settings.autoresize_min_height;
|
||
|
|
||
|
if (!body || (e && e.type === "setcontent" && e.initial) || isFullscreen()) {
|
||
|
if (body && docElm) {
|
||
|
body.style.overflowY = "auto";
|
||
|
docElm.style.overflowY = "auto"; // Old IE
|
||
|
}
|
||
|
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
// Calculate outer height of the body element using CSS styles
|
||
|
marginTop = editor.dom.getStyle(body, 'margin-top', true);
|
||
|
marginBottom = editor.dom.getStyle(body, 'margin-bottom', true);
|
||
|
paddingTop = editor.dom.getStyle(body, 'padding-top', true);
|
||
|
paddingBottom = editor.dom.getStyle(body, 'padding-bottom', true);
|
||
|
borderTop = editor.dom.getStyle(body, 'border-top-width', true);
|
||
|
borderBottom = editor.dom.getStyle(body, 'border-bottom-width', true);
|
||
|
myHeight = body.offsetHeight + parseInt(marginTop, 10) + parseInt(marginBottom, 10) +
|
||
|
parseInt(paddingTop, 10) + parseInt(paddingBottom, 10) +
|
||
|
parseInt(borderTop, 10) + parseInt(borderBottom, 10);
|
||
|
|
||
|
// Make sure we have a valid height
|
||
|
if (isNaN(myHeight) || myHeight <= 0) {
|
||
|
// Get height differently depending on the browser used
|
||
|
myHeight = tinymce.Env.ie ? body.scrollHeight : (tinymce.Env.webkit && body.clientHeight === 0 ? 0 : body.offsetHeight);
|
||
|
}
|
||
|
|
||
|
// Don't make it smaller than the minimum height
|
||
|
if (myHeight > settings.autoresize_min_height) {
|
||
|
resizeHeight = myHeight;
|
||
|
}
|
||
|
|
||
|
// If a maximum height has been defined don't exceed this height
|
||
|
if (settings.autoresize_max_height && myHeight > settings.autoresize_max_height) {
|
||
|
resizeHeight = settings.autoresize_max_height;
|
||
|
body.style.overflowY = "auto";
|
||
|
docElm.style.overflowY = "auto"; // Old IE
|
||
|
} else {
|
||
|
body.style.overflowY = "hidden";
|
||
|
docElm.style.overflowY = "hidden"; // Old IE
|
||
|
body.scrollTop = 0;
|
||
|
}
|
||
|
|
||
|
// Resize content element
|
||
|
if (resizeHeight !== oldSize) {
|
||
|
deltaSize = resizeHeight - oldSize;
|
||
|
DOM.setStyle(editor.iframeElement, 'height', resizeHeight + 'px');
|
||
|
oldSize = resizeHeight;
|
||
|
|
||
|
// WebKit doesn't decrease the size of the body element until the iframe gets resized
|
||
|
// So we need to continue to resize the iframe down until the size gets fixed
|
||
|
if (tinymce.isWebKit && deltaSize < 0) {
|
||
|
resize(e);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Calls the resize x times in 100ms intervals. We can't wait for load events since
|
||
|
* the CSS files might load async.
|
||
|
*/
|
||
|
function wait(times, interval, callback) {
|
||
|
tinymce.util.Delay.setEditorTimeout(editor, function() {
|
||
|
resize({});
|
||
|
|
||
|
if (times--) {
|
||
|
wait(times, interval, callback);
|
||
|
} else if (callback) {
|
||
|
callback();
|
||
|
}
|
||
|
}, interval);
|
||
|
}
|
||
|
|
||
|
// Define minimum height
|
||
|
settings.autoresize_min_height = parseInt(editor.getParam('autoresize_min_height', editor.getElement().offsetHeight), 10);
|
||
|
|
||
|
// Define maximum height
|
||
|
settings.autoresize_max_height = parseInt(editor.getParam('autoresize_max_height', 0), 10);
|
||
|
|
||
|
// Add padding at the bottom for better UX
|
||
|
editor.on("init", function() {
|
||
|
var overflowPadding, bottomMargin;
|
||
|
|
||
|
overflowPadding = editor.getParam('autoresize_overflow_padding', 1);
|
||
|
bottomMargin = editor.getParam('autoresize_bottom_margin', 50);
|
||
|
|
||
|
if (overflowPadding !== false) {
|
||
|
editor.dom.setStyles(editor.getBody(), {
|
||
|
paddingLeft: overflowPadding,
|
||
|
paddingRight: overflowPadding
|
||
|
});
|
||
|
}
|
||
|
|
||
|
if (bottomMargin !== false) {
|
||
|
editor.dom.setStyles(editor.getBody(), {
|
||
|
paddingBottom: bottomMargin
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Add appropriate listeners for resizing content area
|
||
|
editor.on("nodechange setcontent keyup FullscreenStateChanged", resize);
|
||
|
|
||
|
if (editor.getParam('autoresize_on_init', true)) {
|
||
|
editor.on('init', function() {
|
||
|
// Hit it 20 times in 100 ms intervals
|
||
|
wait(20, 100, function() {
|
||
|
// Hit it 5 times in 1 sec intervals
|
||
|
wait(5, 1000);
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
|
||
|
editor.addCommand('mceAutoResize', resize);
|
||
|
});
|