path: root/public_html/pageeditor/pageeditor.js

var initialized = false;
var editor = null;
var editorchanged = false;
var keepAliveInterval = 60000;

function unsavedChangedHandler (ev) {
    var e = ev || window.event;
    // This message is mainly used by old browsers. It is not translated.
    var msg = 'You have unsaved changes. Are you sure you want to navigate away?';
    if (e) {
        e.returnValue = msg;
    }
    return msg;
};

function addUnsavedChangesHandler() {
    var form = document.getElementById('mainform');
    if (document.addEventListener) {
        form.addEventListener('submit', removeUnsavedChangesHandler);
        window.addEventListener('beforeunload', unsavedChangedHandler);
    } else {
        form.onsubmit = removeUnsavedChangesHandler;
        window.onbeforeunload = unsavedChangedHandler;
    }
}

function removeUnsavedChangesHandler() {
    if (window.removeEventListener) {
        window.removeEventListener('beforeunload', unsavedChangedHandler);
    } else {
        window.onbeforeunload = null;
    }
}

function editorchange() {
    if (!editorchanged) {
        addUnsavedChangesHandler();
        var unsavedparam = document.getElementById('jsUnsaved');
        if (unsavedparam) { unsavedparam.value = '1'; }
        var noticeUnsaved = document.getElementById('noticeUnsaved');
        if (noticeUnsaved) {
            noticeUnsaved.hidden = false;
            noticeUnsaved.setAttribute('class', noticeUnsaved.getAttribute('class') + ' fadein');
        }
        editorchanged = true;
    }
}

function checkEditorChanges() {
    if (!editorchanged && editor.composer.focusState) {
        window.setTimeout(function () {
            if (editor.composer.focusState !== editor.composer.getValue(false, false)) {
                editorchange();
            }
        }, 0);
    }
}

var sessionKeepAliveId = -1;
function enableSessionKeepAlive() {
    if (sessionKeepAliveId == -1) {
        sessionKeepAliveId = window.setInterval(sessionKeepAlive, keepAliveInterval);
        if (window.addEventListener) {
            window.addEventListener('focus', sessionKeepAlive);
        } else {
            window.onfocus = sessionKeepAlive;
        }
    }
}

function disableSessionKeepAlive() {
    if (sessionKeepAliveId != -1) {
        window.clearInterval(sessionKeepAliveId);
        sessionKeepAliveId = -1;
        if (window.addEventListener) {
            window.removeEventListener('focus', sessionKeepAlive);
        } else {
            window.onfocus = null;
        }
    }
}

function sessionKeepAlive() {
    var req = new XMLHttpRequest();
    req.open("GET", "?sessionKeepAlive=1", true);
    req.onreadystatechange = function () {
        if (req.readyState == 4) {
            if (req.responseText == '0' &&
                typeof(document.body) != 'undefined' &&
                typeof(document.body.appendChild) != 'undefined') {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('id', 'sessionExpiredIframe');
                iframe.style.position = 'absolute';
                iframe.style.left = '0';
                iframe.style.top = '0';
                iframe.style.right = '0';
                iframe.style.bottom = '0';
                iframe.style.width = '100%';
                iframe.style.height = '100%';
                iframe.style.zIndex = 1000;
                iframe.style.border = 'none';
                iframe.style.background = '#eee';
                iframe.src = '?iframeLoginForm=1';
                disableSessionKeepAlive();
                document.body.appendChild(iframe);
                return;
            }
        }
    }
    req.setRequestHeader('Accept', 'text/plain');
    req.send();
}

function closeLoginIframe() {
    var iframe = document.getElementById('sessionExpiredIframe');
    document.body.removeChild(iframe);
    enableSessionKeepAlive();
}

function init() {
    if (initialized) return;
    initialized = true;

    var bodyClass = '';
    if (typeof(document.body) !== 'undefined' &&
        typeof(document.body.getAttribute) !== 'undefined') {
        bodyClass = document.body.getAttribute('class');
        if (!bodyClass) { bodyClass = ''; }
    }

    // Close session expired iframe after successful re-login
    if (bodyClass.indexOf('iframeLoggedIn') != -1) {
        window.parent.closeLoginIframe();
        return; // no editor is shown in the iframe
    }

    // Add warning when there are unsaved changes
    if (bodyClass.indexOf('unsaved') != -1) {
        addUnsavedChangesHandler();
    }

    // Automatically upload files once selected
    var uploadinput = document.getElementById('upload');
    var uploadbutton = document.getElementById('button_upload');
    if (uploadinput && uploadbutton) {
        var evhandler = function (ev) {
            uploadbutton.click();
        };
        if (document.addEventListener) {
            uploadinput.addEventListener('change', evhandler);
        } else {
            uploadinput.onchange = evhandler;
        }
        uploadbutton.style.display = 'none';
    }

    // Speed up Ok/cancel buttons
    if (typeof(document.getElementsByClassName) !== 'undefined') {
        var buttons = document.getElementsByClassName('dialogClose');
        for (var i = 0; i < buttons.length; i++) {
            var dialog = buttons[i].parentNode.parentNode;
            var evhandler = function (ev) {
                var e = ev || window.event;
                dialog.style.display = 'none';
                if (typeof(e.preventDefault) !== 'undefined') {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
                return false;
            };
            if (document.addEventListener) {
                buttons[i].addEventListener('click', evhandler);
            } else {
                buttons[i].onclick = evhandler;
            }
        }
    }
    
    // Enable browse away warning when text is changed.
    // This is for the plain textarea only, the contenteditable
    // editor is handled below.
    var textarea = document.getElementById('pagecontent');
    if (textarea.addEventListener) {
        textarea.addEventListener('change', editorchange);
    } else {
        textarea.onchange = editorchange;
    }

    // Create contenteditable editor
    if (typeof(wysihtml) !== 'undefined') {
        var editordiv = document.getElementById('editor');
        var textarea = document.getElementById('pagecontent');
        var toolbardiv = document.getElementById('editortoolbar');
        editordiv.setAttribute('class', 'wysiwyg');
        editordiv.hidden = false;
        // TODO use custom parser rules? (so they are the same as server side)
        editor = new wysihtml.Editor(textarea, { toolbar: toolbardiv, parserRules: wysihtmlParserRules });
        editor.on("change", editorchange);
        editor.on("interaction", checkEditorChanges);
        window.setTimeout(function () {
            editor.composer.commands.exec('enableObjectResizing', true);
            //editor.composer.commands.exec('defaultParagraphSeparator', 'p');
        }, 1000);
    }

    // Session keep alive
    if (typeof(XMLHttpRequest) !== 'undefined' && bodyClass.indexOf('session') != -1) {
        enableSessionKeepAlive();
    }

    // Touch a file item to insert (mobile browsers typically don't support drag and drop)
    var uploadslist = document.getElementById('uploadslist');
    for (var li = uploadslist.firstChild; li; li = li.nextSibling) {
        var elem = li.firstChild;
        if (elem != null && elem.getAttribute('draggable') === 'true') {
            if (typeof(elem.addEventListener) !== 'undefined') {
                var handler = function(ev) {
                    var e = ev || window.event;
                    editor.composer.selection.insertHTML(e.target.outerHTML);
                    if (typeof(e.preventDefault) !== 'undefined') {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
                    return false;
                };
                elem.addEventListener('click', handler);
            }
        }
    }
}

if (typeof(document.getElementById) !== 'undefined') { // skip for old browsers
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', init);
        window.addEventListener('load', init);
    } else {
        window.onload = function (e) { init(); };
    }

    // Make sure init gets called even if the document became ready while
    // this script was running
    if (document.readyState && document.readyState != "loading") {
        init();
    }
}