webgme
Version:
Web-based Generic Modeling Environment
1,412 lines (1,232 loc) • 86.1 kB
JavaScript
/**
* EpicEditor - An Embeddable JavaScript Markdown Editor (https://github.com/OscarGodson/EpicEditor)
* Copyright (c) 2011-2012, Oscar Godson. (MIT Licensed)
*/
(function (window, undefined) {
/**
* Applies attributes to a DOM object
* @param {object} context The DOM obj you want to apply the attributes to
* @param {object} attrs A key/value pair of attributes you want to apply
* @returns {undefined}
*/
function _applyAttrs(context, attrs) {
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr)) {
context.setAttribute(attr, attrs[attr]);
}
}
}
/**
* Applies styles to a DOM object
* @param {object} context The DOM obj you want to apply the attributes to
* @param {object} attrs A key/value pair of attributes you want to apply
* @returns {undefined}
*/
function _applyStyles(context, attrs) {
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr)) {
context.style[attr] = attrs[attr];
}
}
}
/**
* Returns a DOM objects computed style
* @param {object} el The element you want to get the style from
* @param {string} styleProp The property you want to get from the element
* @returns {string} Returns a string of the value. If property is not set it will return a blank string
*/
function _getStyle(el, styleProp) {
var x = el
, y = null;
if (window.getComputedStyle) {
y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
}
else if (x.currentStyle) {
y = x.currentStyle[styleProp];
}
return y;
}
/**
* Saves the current style state for the styles requested, then applies styles
* to overwrite the existing one. The old styles are returned as an object so
* you can pass it back in when you want to revert back to the old style
* @param {object} el The element to get the styles of
* @param {string} type Can be "save" or "apply". apply will just apply styles you give it. Save will write styles
* @param {object} styles Key/value style/property pairs
* @returns {object}
*/
function _saveStyleState(el, type, styles) {
var returnState = {}
, style;
if (type === 'save') {
for (style in styles) {
if (styles.hasOwnProperty(style)) {
returnState[style] = _getStyle(el, style);
}
}
// After it's all done saving all the previous states, change the styles
_applyStyles(el, styles);
}
else if (type === 'apply') {
_applyStyles(el, styles);
}
return returnState;
}
/**
* Gets an elements total width including it's borders and padding
* @param {object} el The element to get the total width of
* @returns {int}
*/
function _outerWidth(el) {
var b = parseInt(_getStyle(el, 'border-left-width'), 10) + parseInt(_getStyle(el, 'border-right-width'), 10)
, p = parseInt(_getStyle(el, 'padding-left'), 10) + parseInt(_getStyle(el, 'padding-right'), 10)
, w = el.offsetWidth
, t;
// For IE in case no border is set and it defaults to "medium"
if (isNaN(b)) { b = 0; }
t = b + p + w;
return t;
}
/**
* Gets an elements total height including it's borders and padding
* @param {object} el The element to get the total width of
* @returns {int}
*/
function _outerHeight(el) {
var b = parseInt(_getStyle(el, 'border-top-width'), 10) + parseInt(_getStyle(el, 'border-bottom-width'), 10)
, p = parseInt(_getStyle(el, 'padding-top'), 10) + parseInt(_getStyle(el, 'padding-bottom'), 10)
, w = parseInt(_getStyle(el, 'height'), 10)
, t;
// For IE in case no border is set and it defaults to "medium"
if (isNaN(b)) { b = 0; }
t = b + p + w;
return t;
}
/**
* Inserts a <link> tag specifically for CSS
* @param {string} path The path to the CSS file
* @param {object} context In what context you want to apply this to (document, iframe, etc)
* @param {string} id An id for you to reference later for changing properties of the <link>
* @returns {undefined}
*/
function _insertCSSLink(path, context, id) {
id = id || '';
var headID = context.getElementsByTagName("head")[0]
, cssNode = context.createElement('link');
_applyAttrs(cssNode, {
type: 'text/css'
, id: id
, rel: 'stylesheet'
, href: path
, name: path
, media: 'screen'
});
headID.appendChild(cssNode);
}
// Simply replaces a class (o), to a new class (n) on an element provided (e)
function _replaceClass(e, o, n) {
e.className = e.className.replace(o, n);
}
// Feature detects an iframe to get the inner document for writing to
function _getIframeInnards(el) {
return el.contentDocument || el.contentWindow.document;
}
// Grabs the text from an element and preserves whitespace
function _getText(el) {
var theText;
// Make sure to check for type of string because if the body of the page
// doesn't have any text it'll be "" which is falsey and will go into
// the else which is meant for Firefox and shit will break
if (typeof document.body.innerText == 'string') {
theText = el.innerText;
}
else {
// First replace <br>s before replacing the rest of the HTML
theText = el.innerHTML.replace(/<br>/gi, "\n");
// Now we can clean the HTML
theText = theText.replace(/<(?:.|\n)*?>/gm, '');
// Now fix HTML entities
theText = theText.replace(/</gi, '<');
theText = theText.replace(/>/gi, '>');
}
return theText;
}
function _setText(el, content) {
// Don't convert lt/gt characters as HTML when viewing the editor window
// TODO: Write a test to catch regressions for this
content = content.replace(/</g, '<');
content = content.replace(/>/g, '>');
content = content.replace(/\n/g, '<br>');
// Make sure to there aren't two spaces in a row (replace one with )
// If you find and replace every space with a text will not wrap.
// Hence the name (Non-Breaking-SPace).
// TODO: Probably need to test this somehow...
content = content.replace(/<br>\s/g, '<br> ')
content = content.replace(/\s\s\s/g, ' ')
content = content.replace(/\s\s/g, ' ')
content = content.replace(/^ /, ' ')
el.innerHTML = content;
return true;
}
/**
* Converts the 'raw' format of a file's contents into plaintext
* @param {string} content Contents of the file
* @returns {string} the sanitized content
*/
function _sanitizeRawContent(content) {
// Get this, 2 spaces in a content editable actually converts to:
// 0020 00a0, meaning, "space no-break space". So, manually convert
// no-break spaces to spaces again before handing to marked.
// Also, WebKit converts no-break to unicode equivalent and FF HTML.
return content.replace(/\u00a0/g, ' ').replace(/ /g, ' ');
}
/**
* Will return the version number if the browser is IE. If not will return -1
* TRY NEVER TO USE THIS AND USE FEATURE DETECTION IF POSSIBLE
* @returns {Number} -1 if false or the version number if true
*/
function _isIE() {
var rv = -1 // Return value assumes failure.
, ua = navigator.userAgent
, re;
if (navigator.appName == 'Microsoft Internet Explorer') {
re = /MSIE ([0-9]{1,}[\.0-9]{0,})/;
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1, 10);
}
}
return rv;
}
/**
* Same as the isIE(), but simply returns a boolean
* THIS IS TERRIBLE AND IS ONLY USED BECAUSE FULLSCREEN IN SAFARI IS BORKED
* If some other engine uses WebKit and has support for fullscreen they
* probably wont get native fullscreen until Safari's fullscreen is fixed
* @returns {Boolean} true if Safari
*/
function _isSafari() {
var n = window.navigator;
return n.userAgent.indexOf('Safari') > -1 && n.userAgent.indexOf('Chrome') == -1;
}
/**
* Same as the isIE(), but simply returns a boolean
* THIS IS TERRIBLE ONLY USE IF ABSOLUTELY NEEDED
* @returns {Boolean} true if Safari
*/
function _isFirefox() {
var n = window.navigator;
return n.userAgent.indexOf('Firefox') > -1 && n.userAgent.indexOf('Seamonkey') == -1;
}
/**
* Determines if supplied value is a function
* @param {object} object to determine type
*/
function _isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
/**
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
* @param {boolean} [deepMerge=false] If true, will deep merge meaning it will merge sub-objects like {obj:obj2{foo:'bar'}}
* @param {object} first object
* @param {object} second object
* @returnss {object} a new object based on obj1 and obj2
*/
function _mergeObjs() {
// copy reference to target object
var target = arguments[0] || {}
, i = 1
, length = arguments.length
, deep = false
, options
, name
, src
, copy
// Handle a deep copy situation
if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== "object" && !_isFunction(target)) {
target = {};
}
// extend jQuery itself if only one argument is passed
if (length === i) {
target = this;
--i;
}
for (; i < length; i++) {
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
// @NOTE: added hasOwnProperty check
if (options.hasOwnProperty(name)) {
src = target[name];
copy = options[name];
// Prevent never-ending loop
if (target === copy) {
continue;
}
// Recurse if we're merging object values
if (deep && copy && typeof copy === "object" && !copy.nodeType) {
target[name] = _mergeObjs(deep,
// Never move original objects, clone them
src || (copy.length != null ? [] : {})
, copy);
} else if (copy !== undefined) { // Don't bring in undefined values
target[name] = copy;
}
}
}
}
}
// Return the modified object
return target;
}
/**
* Initiates the EpicEditor object and sets up offline storage as well
* @class Represents an EpicEditor instance
* @param {object} options An optional customization object
* @returns {object} EpicEditor will be returned
*/
function EpicEditor(options) {
// Default settings will be overwritten/extended by options arg
var self = this
, opts = options || {}
, _defaultFileSchema
, _defaultFile
, defaults = { container: 'epiceditor'
, basePath: 'epiceditor'
, textarea: undefined
, clientSideStorage: true
, localStorageName: 'epiceditor'
, useNativeFullscreen: true
, file: { name: null
, defaultContent: ''
, autoSave: 100 // Set to false for no auto saving
}
, theme: { base: '/themes/base/epiceditor.css'
, preview: '/themes/preview/github.css'
, editor: '/themes/editor/epic-dark.css'
}
, focusOnLoad: false
, shortcut: { modifier: 18 // alt keycode
, fullscreen: 70 // f keycode
, preview: 80 // p keycode
}
, string: { togglePreview: 'Toggle Preview Mode'
, toggleEdit: 'Toggle Edit Mode'
, toggleFullscreen: 'Enter Fullscreen'
}
, parser: typeof marked == 'function' ? marked : null
, autogrow: false
, button: { fullscreen: true
, preview: true
, bar: "auto"
}
}
, defaultStorage
, autogrowDefaults = { minHeight: 80
, maxHeight: false
, scroll: true
};
self.settings = _mergeObjs(true, defaults, opts);
var buttons = self.settings.button;
self._fullscreenEnabled = typeof(buttons) === 'object' ? typeof buttons.fullscreen === 'undefined' || buttons.fullscreen : buttons === true;
self._editEnabled = typeof(buttons) === 'object' ? typeof buttons.edit === 'undefined' || buttons.edit : buttons === true;
self._previewEnabled = typeof(buttons) === 'object' ? typeof buttons.preview === 'undefined' || buttons.preview : buttons === true;
if (!(typeof self.settings.parser == 'function' && typeof self.settings.parser('TEST') == 'string')) {
self.settings.parser = function (str) {
return str;
}
}
if (self.settings.autogrow) {
if (self.settings.autogrow === true) {
self.settings.autogrow = autogrowDefaults;
}
else {
self.settings.autogrow = _mergeObjs(true, autogrowDefaults, self.settings.autogrow);
}
self._oldHeight = -1;
}
// If you put an absolute link as the path of any of the themes ignore the basePath
// preview theme
if (!self.settings.theme.preview.match(/^https?:\/\//)) {
self.settings.theme.preview = self.settings.basePath + self.settings.theme.preview;
}
// editor theme
if (!self.settings.theme.editor.match(/^https?:\/\//)) {
self.settings.theme.editor = self.settings.basePath + self.settings.theme.editor;
}
// base theme
if (!self.settings.theme.base.match(/^https?:\/\//)) {
self.settings.theme.base = self.settings.basePath + self.settings.theme.base;
}
// Grab the container element and save it to self.element
// if it's a string assume it's an ID and if it's an object
// assume it's a DOM element
if (typeof self.settings.container == 'string') {
self.element = document.getElementById(self.settings.container);
}
else if (typeof self.settings.container == 'object') {
self.element = self.settings.container;
}
if (typeof self.settings.textarea == 'undefined' && typeof self.element != 'undefined') {
var textareas = self.element.getElementsByTagName('textarea');
if (textareas.length > 0) {
self.settings.textarea = textareas[0];
_applyStyles(self.settings.textarea, {
display: 'none'
});
}
}
// Figure out the file name. If no file name is given we'll use the ID.
// If there's no ID either we'll use a namespaced file name that's incremented
// based on the calling order. As long as it doesn't change, drafts will be saved.
if (!self.settings.file.name) {
if (typeof self.settings.container == 'string') {
self.settings.file.name = self.settings.container;
}
else if (typeof self.settings.container == 'object') {
if (self.element.id) {
self.settings.file.name = self.element.id;
}
else {
if (!EpicEditor._data.unnamedEditors) {
EpicEditor._data.unnamedEditors = [];
}
EpicEditor._data.unnamedEditors.push(self);
self.settings.file.name = '__epiceditor-untitled-' + EpicEditor._data.unnamedEditors.length;
}
}
}
if (self.settings.button.bar === "show") {
self.settings.button.bar = true;
}
if (self.settings.button.bar === "hide") {
self.settings.button.bar = false;
}
// Protect the id and overwrite if passed in as an option
// TODO: Put underscrore to denote that this is private
self._instanceId = 'epiceditor-' + Math.round(Math.random() * 100000);
self._storage = {};
self._canSave = true;
// Setup local storage of files
self._defaultFileSchema = function () {
return {
content: self.settings.file.defaultContent
, created: new Date()
, modified: new Date()
}
}
if (localStorage && self.settings.clientSideStorage) {
this._storage = localStorage;
if (this._storage[self.settings.localStorageName] && self.getFiles(self.settings.file.name) === undefined) {
_defaultFile = self._defaultFileSchema();
_defaultFile.content = self.settings.file.defaultContent;
}
}
if (!this._storage[self.settings.localStorageName]) {
defaultStorage = {};
defaultStorage[self.settings.file.name] = self._defaultFileSchema();
defaultStorage = JSON.stringify(defaultStorage);
this._storage[self.settings.localStorageName] = defaultStorage;
}
// A string to prepend files with to save draft versions of files
// and reset all preview drafts on each load!
self._previewDraftLocation = '__draft-';
self._storage[self._previewDraftLocation + self.settings.localStorageName] = self._storage[self.settings.localStorageName];
// This needs to replace the use of classes to check the state of EE
self._eeState = {
fullscreen: false
, preview: false
, edit: false
, loaded: false
, unloaded: false
}
// Now that it exists, allow binding of events if it doesn't exist yet
if (!self.events) {
self.events = {};
}
return this;
}
/**
* Inserts the EpicEditor into the DOM via an iframe and gets it ready for editing and previewing
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.load = function (callback) {
// Get out early if it's already loaded
if (this.is('loaded')) { return this; }
// TODO: Gotta get the privates with underscores!
// TODO: Gotta document what these are for...
var self = this
, _HtmlTemplates
, iframeElement
, baseTag
, utilBtns
, utilBar
, utilBarTimer
, keypressTimer
, mousePos = { y: -1, x: -1 }
, _elementStates
, _isInEdit
, nativeFs = false
, nativeFsWebkit = false
, nativeFsMoz = false
, nativeFsW3C = false
, fsElement
, isMod = false
, isCtrl = false
, eventableIframes
, i // i is reused for loops
, boundAutogrow;
// Startup is a way to check if this EpicEditor is starting up. Useful for
// checking and doing certain things before EpicEditor emits a load event.
self._eeState.startup = true;
if (self.settings.useNativeFullscreen) {
nativeFsWebkit = document.body.webkitRequestFullScreen ? true : false;
nativeFsMoz = document.body.mozRequestFullScreen ? true : false;
nativeFsW3C = document.body.requestFullscreen ? true : false;
nativeFs = nativeFsWebkit || nativeFsMoz || nativeFsW3C;
}
// Fucking Safari's native fullscreen works terribly
// REMOVE THIS IF SAFARI 7 WORKS BETTER
if (_isSafari()) {
nativeFs = false;
nativeFsWebkit = false;
}
// It opens edit mode by default (for now);
if (!self.is('edit') && !self.is('preview')) {
self._eeState.edit = true;
}
callback = callback || function () {};
// The editor HTML
// TODO: edit-mode class should be dynamically added
_HtmlTemplates = {
// This is wrapping iframe element. It contains the other two iframes and the utilbar
chrome: '<div id="epiceditor-wrapper" class="epiceditor-edit-mode">' +
'<iframe frameborder="0" id="epiceditor-editor-frame"></iframe>' +
'<iframe frameborder="0" id="epiceditor-previewer-frame"></iframe>' +
'<div id="epiceditor-utilbar">' +
(self._previewEnabled ? '<button title="' + this.settings.string.togglePreview + '" class="epiceditor-toggle-btn epiceditor-toggle-preview-btn"></button> ' : '') +
(self._editEnabled ? '<button title="' + this.settings.string.toggleEdit + '" class="epiceditor-toggle-btn epiceditor-toggle-edit-btn"></button> ' : '') +
(self._fullscreenEnabled ? '<button title="' + this.settings.string.toggleFullscreen + '" class="epiceditor-fullscreen-btn"></button>' : '') +
'</div>' +
'</div>'
// The previewer is just an empty box for the generated HTML to go into
, previewer: '<div id="epiceditor-preview"></div>'
, editor: '<!doctype HTML>'
};
// Write an iframe and then select it for the editor
iframeElement = document.createElement('iframe');
_applyAttrs(iframeElement, {
scrolling: 'no',
frameborder: 0,
id: self._instanceId
});
self.element.appendChild(iframeElement);
// Because browsers add things like invisible padding and margins and stuff
// to iframes, we need to set manually set the height so that the height
// doesn't keep increasing (by 2px?) every time reflow() is called.
// FIXME: Figure out how to fix this without setting this
self.element.style.height = self.element.offsetHeight + 'px';
// Store a reference to the iframeElement itself
self.iframeElement = iframeElement;
// Grab the innards of the iframe (returns the document.body)
// TODO: Change self.iframe to self.iframeDocument
self.iframe = _getIframeInnards(iframeElement);
self.iframe.open();
self.iframe.write(_HtmlTemplates.chrome);
// Now that we got the innards of the iframe, we can grab the other iframes
self.editorIframe = self.iframe.getElementById('epiceditor-editor-frame')
self.previewerIframe = self.iframe.getElementById('epiceditor-previewer-frame');
// Setup the editor iframe
self.editorIframeDocument = _getIframeInnards(self.editorIframe);
self.editorIframeDocument.open();
// Need something for... you guessed it, Firefox
self.editorIframeDocument.write(_HtmlTemplates.editor);
self.editorIframeDocument.close();
// Setup the previewer iframe
self.previewerIframeDocument = _getIframeInnards(self.previewerIframe);
self.previewerIframeDocument.open();
self.previewerIframeDocument.write(_HtmlTemplates.previewer);
// Base tag is added so that links will open a new tab and not inside of the iframes
baseTag = self.previewerIframeDocument.createElement('base');
baseTag.target = '_blank';
self.previewerIframeDocument.getElementsByTagName('head')[0].appendChild(baseTag);
self.previewerIframeDocument.close();
self.reflow();
// Insert Base Stylesheet
_insertCSSLink(self.settings.theme.base, self.iframe, 'theme');
// Insert Editor Stylesheet
_insertCSSLink(self.settings.theme.editor, self.editorIframeDocument, 'theme');
// Insert Previewer Stylesheet
_insertCSSLink(self.settings.theme.preview, self.previewerIframeDocument, 'theme');
// Add a relative style to the overall wrapper to keep CSS relative to the editor
self.iframe.getElementById('epiceditor-wrapper').style.position = 'relative';
// Set the position to relative so we hide them with left: -999999px
self.editorIframe.style.position = 'absolute';
self.previewerIframe.style.position = 'absolute';
// Now grab the editor and previewer for later use
self.editor = self.editorIframeDocument.body;
self.previewer = self.previewerIframeDocument.getElementById('epiceditor-preview');
self.editor.contentEditable = true;
// Firefox's <body> gets all fucked up so, to be sure, we need to hardcode it
self.iframe.body.style.height = this.element.offsetHeight + 'px';
// Should actually check what mode it's in!
self.previewerIframe.style.left = '-999999px';
// Keep long lines from being longer than the editor
this.editorIframeDocument.body.style.wordWrap = 'break-word';
// FIXME figure out why it needs +2 px
if (_isIE() > -1) {
this.previewer.style.height = parseInt(_getStyle(this.previewer, 'height'), 10) + 2;
}
// If there is a file to be opened with that filename and it has content...
this.open(self.settings.file.name);
if (self.settings.focusOnLoad) {
// We need to wait until all three iframes are done loading by waiting until the parent
// iframe's ready state == complete, then we can focus on the contenteditable
self.iframe.addEventListener('readystatechange', function () {
if (self.iframe.readyState == 'complete') {
self.focus();
}
});
}
// Because IE scrolls the whole window to hash links, we need our own
// method of scrolling the iframe to an ID from clicking a hash
self.previewerIframeDocument.addEventListener('click', function (e) {
var el = e.target
, body = self.previewerIframeDocument.body;
if (el.nodeName == 'A') {
// Make sure the link is a hash and the link is local to the iframe
if (el.hash && el.hostname == window.location.hostname) {
// Prevent the whole window from scrolling
e.preventDefault();
// Prevent opening a new window
el.target = '_self';
// Scroll to the matching element, if an element exists
if (body.querySelector(el.hash)) {
body.scrollTop = body.querySelector(el.hash).offsetTop;
}
}
}
});
utilBtns = self.iframe.getElementById('epiceditor-utilbar');
// TODO: Move into fullscreen setup function (_setupFullscreen)
_elementStates = {}
self._goFullscreen = function (el, callback) {
callback = callback || function () {};
var wait = 0;
this._fixScrollbars('auto');
if (self.is('fullscreen')) {
self._exitFullscreen(el, callback);
return;
}
if (nativeFs) {
if (nativeFsWebkit) {
el.webkitRequestFullScreen();
wait = 750;
}
else if (nativeFsMoz) {
el.mozRequestFullScreen();
}
else if (nativeFsW3C) {
el.requestFullscreen();
}
}
_isInEdit = self.is('edit');
// Why does this need to be in a randomly "750"ms setTimeout? WebKit's
// implementation of fullscreen seem to trigger the webkitfullscreenchange
// event _after_ everything is done. Instead, it triggers _during_ the
// transition. This means calculations of what's half, 100%, etc are wrong
// so to combat this we throw down the hammer with a setTimeout and wait
// to trigger our calculation code.
// See: https://code.google.com/p/chromium/issues/detail?id=181116
setTimeout(function () {
// Set the state of EE in fullscreen
// We set edit and preview to true also because they're visible
// we might want to allow fullscreen edit mode without preview (like a "zen" mode)
self._eeState.fullscreen = true;
self._eeState.edit = true;
self._eeState.preview = true;
// Cache calculations
var windowInnerWidth = window.innerWidth
, windowInnerHeight = window.innerHeight
, windowOuterWidth = window.outerWidth
, windowOuterHeight = window.outerHeight;
// Without this the scrollbars will get hidden when scrolled to the bottom in faux fullscreen (see #66)
if (!nativeFs) {
windowOuterHeight = window.innerHeight;
}
// This MUST come first because the editor is 100% width so if we change the width of the iframe or wrapper
// the editor's width wont be the same as before
_elementStates.editorIframe = _saveStyleState(self.editorIframe, 'save', {
'width': windowOuterWidth / 2 + 'px'
, 'height': windowOuterHeight + 'px'
, 'float': 'left' // Most browsers
, 'cssFloat': 'left' // FF
, 'styleFloat': 'left' // Older IEs
, 'display': 'block'
, 'position': 'static'
, 'left': ''
});
// the previewer
_elementStates.previewerIframe = _saveStyleState(self.previewerIframe, 'save', {
'width': windowOuterWidth / 2 + 'px'
, 'height': windowOuterHeight + 'px'
, 'float': 'right' // Most browsers
, 'cssFloat': 'right' // FF
, 'styleFloat': 'right' // Older IEs
, 'display': 'block'
, 'position': 'static'
, 'left': ''
});
// Setup the containing element CSS for fullscreen
_elementStates.element = _saveStyleState(self.element, 'save', {
'position': 'fixed'
, 'top': '0'
, 'left': '0'
, 'width': '100%'
, 'z-index': '9999' // Most browsers
, 'zIndex': '9999' // Firefox
, 'border': 'none'
, 'margin': '0'
// Should use the base styles background!
, 'background': _getStyle(self.editor, 'background-color') // Try to hide the site below
, 'height': windowInnerHeight + 'px'
});
// The iframe element
_elementStates.iframeElement = _saveStyleState(self.iframeElement, 'save', {
'width': windowOuterWidth + 'px'
, 'height': windowInnerHeight + 'px'
});
// ...Oh, and hide the buttons and prevent scrolling
utilBtns.style.visibility = 'hidden';
if (!nativeFs) {
document.body.style.overflow = 'hidden';
}
self.preview();
self.focus();
self.emit('fullscreenenter');
callback.call(self);
}, wait);
};
self._exitFullscreen = function (el, callback) {
callback = callback || function () {};
this._fixScrollbars();
_saveStyleState(self.element, 'apply', _elementStates.element);
_saveStyleState(self.iframeElement, 'apply', _elementStates.iframeElement);
_saveStyleState(self.editorIframe, 'apply', _elementStates.editorIframe);
_saveStyleState(self.previewerIframe, 'apply', _elementStates.previewerIframe);
// We want to always revert back to the original styles in the CSS so,
// if it's a fluid width container it will expand on resize and not get
// stuck at a specific width after closing fullscreen.
self.element.style.width = self._eeState.reflowWidth ? self._eeState.reflowWidth : '';
self.element.style.height = self._eeState.reflowHeight ? self._eeState.reflowHeight : '';
utilBtns.style.visibility = 'visible';
// Put the editor back in the right state
// TODO: This is ugly... how do we make this nicer?
// setting fullscreen to false here prevents the
// native fs callback from calling this function again
self._eeState.fullscreen = false;
if (!nativeFs) {
document.body.style.overflow = 'auto';
}
else {
if (nativeFsWebkit) {
document.webkitCancelFullScreen();
}
else if (nativeFsMoz) {
document.mozCancelFullScreen();
}
else if (nativeFsW3C) {
document.exitFullscreen();
}
}
if (_isInEdit) {
self.edit();
}
else {
self.preview();
}
self.reflow();
self.emit('fullscreenexit');
callback.call(self);
};
// This setups up live previews by triggering preview() IF in fullscreen on keyup
self.editor.addEventListener('keyup', function () {
if (keypressTimer) {
window.clearTimeout(keypressTimer);
}
keypressTimer = window.setTimeout(function () {
if (self.is('fullscreen')) {
self.preview();
}
}, 250);
});
fsElement = self.iframeElement;
// Sets up the onclick event on utility buttons
utilBtns.addEventListener('click', function (e) {
var targetClass = e.target.className;
if (targetClass.indexOf('epiceditor-toggle-preview-btn') > -1) {
self.preview();
}
else if (targetClass.indexOf('epiceditor-toggle-edit-btn') > -1) {
self.edit();
}
else if (targetClass.indexOf('epiceditor-fullscreen-btn') > -1) {
self._goFullscreen(fsElement);
}
});
// Sets up the NATIVE fullscreen editor/previewer for WebKit
if (nativeFsWebkit) {
document.addEventListener('webkitfullscreenchange', function () {
if (!document.webkitIsFullScreen && self._eeState.fullscreen) {
self._exitFullscreen(fsElement);
}
}, false);
}
else if (nativeFsMoz) {
document.addEventListener('mozfullscreenchange', function () {
if (!document.mozFullScreen && self._eeState.fullscreen) {
self._exitFullscreen(fsElement);
}
}, false);
}
else if (nativeFsW3C) {
document.addEventListener('fullscreenchange', function () {
if (document.fullscreenElement == null && self._eeState.fullscreen) {
self._exitFullscreen(fsElement);
}
}, false);
}
// TODO: Move utilBar stuff into a utilBar setup function (_setupUtilBar)
utilBar = self.iframe.getElementById('epiceditor-utilbar');
// Hide it at first until they move their mouse
if (self.settings.button.bar !== true) {
utilBar.style.display = 'none';
}
utilBar.addEventListener('mouseover', function () {
if (utilBarTimer) {
clearTimeout(utilBarTimer);
}
});
function utilBarHandler(e) {
if (self.settings.button.bar !== "auto") {
return;
}
// Here we check if the mouse has moves more than 5px in any direction before triggering the mousemove code
// we do this for 2 reasons:
// 1. On Mac OS X lion when you scroll and it does the iOS like "jump" when it hits the top/bottom of the page itll fire off
// a mousemove of a few pixels depending on how hard you scroll
// 2. We give a slight buffer to the user in case he barely touches his touchpad or mouse and not trigger the UI
if (Math.abs(mousePos.y - e.pageY) >= 5 || Math.abs(mousePos.x - e.pageX) >= 5) {
utilBar.style.display = 'block';
// if we have a timer already running, kill it out
if (utilBarTimer) {
clearTimeout(utilBarTimer);
}
// begin a new timer that hides our object after 1000 ms
utilBarTimer = window.setTimeout(function () {
utilBar.style.display = 'none';
}, 1000);
}
mousePos = { y: e.pageY, x: e.pageX };
}
// Add keyboard shortcuts for convenience.
function shortcutHandler(e) {
if (e.keyCode == self.settings.shortcut.modifier) { isMod = true } // check for modifier press(default is alt key), save to var
if (e.keyCode == 17) { isCtrl = true } // check for ctrl/cmnd press, in order to catch ctrl/cmnd + s
if (e.keyCode == 18) { isCtrl = false }
// Check for alt+p and make sure were not in fullscreen - default shortcut to switch to preview
if (isMod === true && e.keyCode == self.settings.shortcut.preview && !self.is('fullscreen')) {
e.preventDefault();
if (self.is('edit') && self._previewEnabled) {
self.preview();
}
else if (self._editEnabled) {
self.edit();
}
}
// Check for alt+f - default shortcut to make editor fullscreen
if (isMod === true && e.keyCode == self.settings.shortcut.fullscreen && self._fullscreenEnabled) {
e.preventDefault();
self._goFullscreen(fsElement);
}
// Set the modifier key to false once *any* key combo is completed
// or else, on Windows, hitting the alt key will lock the isMod state to true (ticket #133)
if (isMod === true && e.keyCode !== self.settings.shortcut.modifier) {
isMod = false;
}
// When a user presses "esc", revert everything!
if (e.keyCode == 27 && self.is('fullscreen')) {
self._exitFullscreen(fsElement);
}
// Check for ctrl + s (since a lot of people do it out of habit) and make it do nothing
if (isCtrl === true && e.keyCode == 83) {
self.save();
e.preventDefault();
isCtrl = false;
}
// Do the same for Mac now (metaKey == cmd).
if (e.metaKey && e.keyCode == 83) {
self.save();
e.preventDefault();
}
}
function shortcutUpHandler(e) {
if (e.keyCode == self.settings.shortcut.modifier) { isMod = false }
if (e.keyCode == 17) { isCtrl = false }
}
function pasteHandler(e) {
var content;
if (e.clipboardData) {
//FF 22, Webkit, "standards"
e.preventDefault();
content = e.clipboardData.getData("text/plain");
self.editorIframeDocument.execCommand("insertText", false, content);
}
else if (window.clipboardData) {
//IE, "nasty"
e.preventDefault();
content = window.clipboardData.getData("Text");
content = content.replace(/</g, '<');
content = content.replace(/>/g, '>');
content = content.replace(/\n/g, '<br>');
content = content.replace(/\r/g, ''); //fuck you, ie!
content = content.replace(/<br>\s/g, '<br> ')
content = content.replace(/\s\s\s/g, ' ')
content = content.replace(/\s\s/g, ' ')
self.editorIframeDocument.selection.createRange().pasteHTML(content);
}
}
// Hide and show the util bar based on mouse movements
eventableIframes = [self.previewerIframeDocument, self.editorIframeDocument];
for (i = 0; i < eventableIframes.length; i++) {
eventableIframes[i].addEventListener('mousemove', function (e) {
utilBarHandler(e);
});
eventableIframes[i].addEventListener('scroll', function (e) {
utilBarHandler(e);
});
eventableIframes[i].addEventListener('keyup', function (e) {
shortcutUpHandler(e);
});
eventableIframes[i].addEventListener('keydown', function (e) {
shortcutHandler(e);
});
eventableIframes[i].addEventListener('paste', function (e) {
pasteHandler(e);
});
}
// Save the document every 100ms by default
// TODO: Move into autosave setup function (_setupAutoSave)
if (self.settings.file.autoSave) {
self._saveIntervalTimer = window.setInterval(function () {
if (!self._canSave) {
return;
}
self.save(false, true);
}, self.settings.file.autoSave);
}
// Update a textarea automatically if a textarea is given so you don't need
// AJAX to submit a form and instead fall back to normal form behavior
if (self.settings.textarea) {
self._setupTextareaSync();
}
window.addEventListener('resize', function () {
// If NOT webkit, and in fullscreen, we need to account for browser resizing
// we don't care about webkit because you can't resize in webkit's fullscreen
if (self.is('fullscreen')) {
_applyStyles(self.iframeElement, {
'width': window.outerWidth + 'px'
, 'height': window.innerHeight + 'px'
});
_applyStyles(self.element, {
'height': window.innerHeight + 'px'
});
_applyStyles(self.previewerIframe, {
'width': window.outerWidth / 2 + 'px'
, 'height': window.innerHeight + 'px'
});
_applyStyles(self.editorIframe, {
'width': window.outerWidth / 2 + 'px'
, 'height': window.innerHeight + 'px'
});
}
// Makes the editor support fluid width when not in fullscreen mode
else if (!self.is('fullscreen')) {
self.reflow();
}
});
// Set states before flipping edit and preview modes
self._eeState.loaded = true;
self._eeState.unloaded = false;
if (self.is('preview')) {
self.preview();
}
else {
self.edit();
}
self.iframe.close();
self._eeState.startup = false;
if (self.settings.autogrow) {
self._fixScrollbars();
boundAutogrow = function () {
setTimeout(function () {
self._autogrow();
}, 1);
};
//for if autosave is disabled or very slow
['keydown', 'keyup', 'paste', 'cut'].forEach(function (ev) {
self.getElement('editor').addEventListener(ev, boundAutogrow);
});
self.on('__update', boundAutogrow);
self.on('edit', function () {
setTimeout(boundAutogrow, 50)
});
self.on('preview', function () {
setTimeout(boundAutogrow, 50)
});
//for browsers that have rendering delays
setTimeout(boundAutogrow, 50);
boundAutogrow();
}
// The callback and call are the same thing, but different ways to access them
callback.call(this);
this.emit('load');
return this;
}
EpicEditor.prototype._setupTextareaSync = function () {
var self = this
, _syncTextarea;
// Even if autoSave is false, we want to make sure to keep the textarea synced
// with the editor's content. One bad thing about this tho is that we're
// creating two timers now in some configurations. We keep the textarea synced
// by saving and opening the textarea content from the draft file storage.
self._textareaSaveTimer = window.setInterval(function () {
if (!self._canSave) {
return;
}
self.save(true);
}, 100);
_syncTextarea = function () {
// TODO: Figure out root cause for having to do this ||.
// This only happens for draft files. Probably has something to do with
// the fact draft files haven't been saved by the time this is called.
// TODO: Add test for this case.
// Get the file.name each time as it can change. DO NOT save this to a
// var outside of this closure or the editor will stop syncing when the
// file is changed with importFile or open.
self._textareaElement.value = self.exportFile(self.settings.file.name, 'text', true) || self.settings.file.defaultContent;
}
if (typeof self.settings.textarea == 'string') {
self._textareaElement = document.getElementById(self.settings.textarea);
}
else if (typeof self.settings.textarea == 'object') {
self._textareaElement = self.settings.textarea;
}
// On page load, if there's content in the textarea that means one of two
// different things:
//
// 1. The editor didn't load and the user was writing in the textarea and
// now he refreshed the page or the JS loaded and the textarea now has
// content. If this is the case the user probably expects his content is
// moved into the editor and not lose what he typed.
//
// 2. The developer put content in the textarea from some server side
// code. In this case, the textarea will take precedence.
//
// If the developer wants drafts to be recoverable they should check if
// the local file in localStorage's modified date is newer than the server.
if (self._textareaElement.value !== '') {
self.importFile(self.settings.file.name, self._textareaElement.value);
// manually save draft after import so there is no delay between the
// import and exporting in _syncTextarea. Without this, _syncTextarea
// will pull the saved data from localStorage which will be <=100ms old.
self.save(true);
}
// Update the textarea on load and pull from drafts
_syncTextarea();
// Make sure to keep it updated
self.on('__update', _syncTextarea);
self.on('__create', _syncTextarea);
self.on('__save', _syncTextarea);
}
/**
* Will NOT focus the editor if the editor is still starting up AND
* focusOnLoad is set to false. This allows you to place this in code that
* gets fired during .load() without worrying about it overriding the user's
* option. For example use cases see preview() and edit().
* @returns {undefined}
*/
// Prevent focus when the user sets focusOnLoad to false by checking if the
// editor is starting up AND if focusOnLoad is true
EpicEditor.prototype._focusExceptOnLoad = function () {
var self = this;
if ((self._eeState.startup && self.settings.focusOnLoad) || !self._eeState.startup) {
self.focus();
}
}
/**
* Will remove the editor, but not offline files
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.unload = function (callback) {
// Make sure the editor isn't already unloaded.
if (this.is('unloaded')) {
throw new Error('Editor isn\'t loaded');
}
var self = this
, editor = window.parent.document.getElementById(self._instanceId);
editor.parentNode.removeChild(editor);
self._eeState.loaded = false;
self._eeState.unloaded = true;
callback = callback || function () {};
if (self.settings.textarea) {
self.removeListener('__update');
}
if (self._saveIntervalTimer) {
window.clearInterval(self._saveIntervalTimer);
}
if (self._textareaSaveTimer) {
window.clearInterval(self._textareaSaveTimer);
}
callback.call(this);
self.emit('unload');
return self;
}
/**
* reflow allows you to dynamically re-fit the editor in the parent without
* having to unload and then reload the editor again.
*
* reflow will also emit a `reflow` event and will return the new dimensions.
* If it's called without params it'll return the new width and height and if
* it's called with just width or just height it'll just return the width or
* height. It's returned as an object like: { width: '100px', height: '1px' }
*
* @param {string|null} kind Can either be 'width' or 'height' or null
* if null, both the height and width will be resized
* @param {function} callback A function to fire after the reflow is finished.
* Will return the width / height in an obj as the first param of the callback.
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.reflow = function (kind, callback) {
var self = this
, widthDiff = _outerWidth(self.element) - self.element.offsetWidth
, heightDiff = _outerHeight(self.element) - self.element.offsetHeight
, elements = [self.iframeElement, self.editorIframe, self.previewerIframe]
, eventData = {}
, newWidth
, newHeight;
if (typeof kind == 'function') {
callback = kind;
kind = null;
}
if (!callback) {
callback = function () {};
}
for (var x = 0; x < elements.length; x++) {
if (!kind || kind == 'width') {
newWidth = self.element.offsetWidth - widthDiff + 'px';
elements[x].style.width = newWidth;
self._eeState.reflowWidth = newWidth;
eventData.width = newWidth;
}
if (!kind || kind == 'height') {
newHeight = self.element.offsetHeight - heightDiff + 'px';
elements[x].style.height = newHeight;
self._eeState.reflowHeight = newHeight
eventData.height = newHeight;
}
}
self.emit('reflow', eventData);
callback.call(this, eventData);
return self;
}
/**
* Will take the markdown and generate a preview view based on the theme
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.preview = function () {
var self = this
, x
, theme = self.settings.theme.preview
, anchors;
_replaceClass(self.getElement('wrapper'), 'epiceditor-edit-mode', 'epiceditor-preview-mode');
// Check if no CSS theme link exists
if (!self.previewerIframeDocument.getElementById('theme')) {
_insertCSSLink(theme, self.previewerIframeDocument, 'theme');
}
else if (self.previewerIframeDocument.getElementById('theme').name !== theme) {
self.previewerIframeDocument.getElementById('theme').href = theme;
}
// Save a preview draft since it might not be saved to the real file yet
self.save(true);
// Add the generated draft HTML into the previewer
self.previewer.innerHTML = self.exportFile(null, 'html', true);
// Hide the editor and display the previewer
if (!self.is('fullscreen')) {
self.editorIframe.style.left = '-999999px';
self.previewerIframe.style.left = '';
self._eeState.preview = true;
self._eeState.edit = false;
self._focusExceptOnLoad();
}
self.emit('preview');
return self;
}
/**
* Helper to focus on the editor iframe. Will figure out which iframe to
* focus on based on which one is active and will handle the cross browser
* issues with focusing on the iframe vs the document body.
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.focus = function (pageload) {
var self = this
, isPreview = self.is('preview')
, focusElement = isPreview ? self.previewerIframeDocument.body
: self.editorIframeDocument.body;
if (_isFirefox() && isPreview) {
focusElement = self.previewerIframe;
}
focusElement.focus();
return this;
}
/**
* Puts the editor into fullscreen mode
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.enterFullscreen = function (callback) {
callback = callback || function () {};
if (this.is('fullscreen')) {
callback.call(this);
return this;
}
this._goFullscreen(this.iframeElement, callback);
return this;
}
/**
* Closes fullscreen mode if opened
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.exitFullscreen = function (callback) {
callback = callback || function () {};
if (!this.is('fullscreen')) {
callback.call(this);
return this;
}
this._exitFullscreen(this.iframeElement, callback);
return this;
}
/**
* Hides the preview and shows the editor again
* @returns {object} EpicEditor will be returned
*/
EpicEditor.prototype.edit = function () {
var self = this;
_replaceClass(self.getElement('wrapper'), 'epiceditor-preview-mode', 'epiceditor-