bgneal@312: /**
bgneal@312: * fullpage.js
bgneal@312: *
bgneal@312: * Copyright 2009, Moxiecode Systems AB
bgneal@312: * Released under LGPL License.
bgneal@312: *
bgneal@312: * License: http://tinymce.moxiecode.com/license
bgneal@312: * Contributing: http://tinymce.moxiecode.com/contributing
bgneal@312: */
bgneal@312:
bgneal@442: (function() {
bgneal@442: tinyMCEPopup.requireLangPack();
bgneal@312:
bgneal@442: var defaultDocTypes =
bgneal@442: 'XHTML 1.0 Transitional=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,' +
bgneal@442: 'XHTML 1.0 Frameset=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">,' +
bgneal@442: 'XHTML 1.0 Strict=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,' +
bgneal@442: 'XHTML 1.1=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,' +
bgneal@442: 'HTML 4.01 Transitional=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,' +
bgneal@442: 'HTML 4.01 Strict=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,' +
bgneal@442: 'HTML 4.01 Frameset=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">';
bgneal@312:
bgneal@442: var defaultEncodings =
bgneal@442: 'Western european (iso-8859-1)=iso-8859-1,' +
bgneal@442: 'Central European (iso-8859-2)=iso-8859-2,' +
bgneal@442: 'Unicode (UTF-8)=utf-8,' +
bgneal@442: 'Chinese traditional (Big5)=big5,' +
bgneal@442: 'Cyrillic (iso-8859-5)=iso-8859-5,' +
bgneal@442: 'Japanese (iso-2022-jp)=iso-2022-jp,' +
bgneal@442: 'Greek (iso-8859-7)=iso-8859-7,' +
bgneal@442: 'Korean (iso-2022-kr)=iso-2022-kr,' +
bgneal@442: 'ASCII (us-ascii)=us-ascii';
bgneal@312:
bgneal@442: var defaultFontNames = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;WingDings=wingdings';
bgneal@442: var defaultFontSizes = '10px,11px,12px,13px,14px,15px,16px';
bgneal@312:
bgneal@442: function setVal(id, value) {
bgneal@442: var elm = document.getElementById(id);
bgneal@312:
bgneal@442: if (elm) {
bgneal@442: value = value || '';
bgneal@312:
bgneal@442: if (elm.nodeName == "SELECT")
bgneal@442: selectByValue(document.forms[0], id, value);
bgneal@442: else if (elm.type == "checkbox")
bgneal@442: elm.checked = !!value;
bgneal@442: else
bgneal@442: elm.value = value;
bgneal@442: }
bgneal@442: };
bgneal@312:
bgneal@442: function getVal(id) {
bgneal@442: var elm = document.getElementById(id);
bgneal@312:
bgneal@442: if (elm.nodeName == "SELECT")
bgneal@442: return elm.options[elm.selectedIndex].value;
bgneal@312:
bgneal@442: if (elm.type == "checkbox")
bgneal@442: return elm.checked;
bgneal@312:
bgneal@442: return elm.value;
bgneal@442: };
bgneal@312:
bgneal@442: window.FullPageDialog = {
bgneal@442: changedStyle : function() {
bgneal@442: var val, styles = tinyMCEPopup.editor.dom.parseStyle(getVal('style'));
bgneal@312:
bgneal@442: setVal('fontface', styles['font-face']);
bgneal@442: setVal('fontsize', styles['font-size']);
bgneal@442: setVal('textcolor', styles['color']);
bgneal@312:
bgneal@442: if (val = styles['background-image'])
bgneal@442: setVal('bgimage', val.replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"));
bgneal@442: else
bgneal@442: setVal('bgimage', '');
bgneal@442:
bgneal@442: setVal('bgcolor', styles['background-color']);
bgneal@442:
bgneal@442: // Reset margin form elements
bgneal@442: setVal('topmargin', '');
bgneal@442: setVal('rightmargin', '');
bgneal@442: setVal('bottommargin', '');
bgneal@442: setVal('leftmargin', '');
bgneal@442:
bgneal@442: // Expand margin
bgneal@442: if (val = styles['margin']) {
bgneal@442: val = val.split(' ');
bgneal@442: styles['margin-top'] = val[0] || '';
bgneal@442: styles['margin-right'] = val[1] || val[0] || '';
bgneal@442: styles['margin-bottom'] = val[2] || val[0] || '';
bgneal@442: styles['margin-left'] = val[3] || val[0] || '';
bgneal@442: }
bgneal@442:
bgneal@442: if (val = styles['margin-top'])
bgneal@442: setVal('topmargin', val.replace(/px/, ''));
bgneal@442:
bgneal@442: if (val = styles['margin-right'])
bgneal@442: setVal('rightmargin', val.replace(/px/, ''));
bgneal@442:
bgneal@442: if (val = styles['margin-bottom'])
bgneal@442: setVal('bottommargin', val.replace(/px/, ''));
bgneal@442:
bgneal@442: if (val = styles['margin-left'])
bgneal@442: setVal('leftmargin', val.replace(/px/, ''));
bgneal@442:
bgneal@442: updateColor('bgcolor_pick', 'bgcolor');
bgneal@442: updateColor('textcolor_pick', 'textcolor');
bgneal@442: },
bgneal@442:
bgneal@442: changedStyleProp : function() {
bgneal@442: var val, dom = tinyMCEPopup.editor.dom, styles = dom.parseStyle(getVal('style'));
bgneal@442:
bgneal@442: styles['font-face'] = getVal('fontface');
bgneal@442: styles['font-size'] = getVal('fontsize');
bgneal@442: styles['color'] = getVal('textcolor');
bgneal@442: styles['background-color'] = getVal('bgcolor');
bgneal@442:
bgneal@442: if (val = getVal('bgimage'))
bgneal@442: styles['background-image'] = "url('" + val + "')";
bgneal@442: else
bgneal@442: styles['background-image'] = '';
bgneal@442:
bgneal@442: delete styles['margin'];
bgneal@442:
bgneal@442: if (val = getVal('topmargin'))
bgneal@442: styles['margin-top'] = val + "px";
bgneal@442: else
bgneal@442: styles['margin-top'] = '';
bgneal@442:
bgneal@442: if (val = getVal('rightmargin'))
bgneal@442: styles['margin-right'] = val + "px";
bgneal@442: else
bgneal@442: styles['margin-right'] = '';
bgneal@442:
bgneal@442: if (val = getVal('bottommargin'))
bgneal@442: styles['margin-bottom'] = val + "px";
bgneal@442: else
bgneal@442: styles['margin-bottom'] = '';
bgneal@442:
bgneal@442: if (val = getVal('leftmargin'))
bgneal@442: styles['margin-left'] = val + "px";
bgneal@442: else
bgneal@442: styles['margin-left'] = '';
bgneal@442:
bgneal@442: // Serialize, parse and reserialize this will compress redundant styles
bgneal@442: setVal('style', dom.serializeStyle(dom.parseStyle(dom.serializeStyle(styles))));
bgneal@442: this.changedStyle();
bgneal@442: },
bgneal@442:
bgneal@442: update : function() {
bgneal@442: var data = {};
bgneal@442:
bgneal@442: tinymce.each(tinyMCEPopup.dom.select('select,input,textarea'), function(node) {
bgneal@442: data[node.id] = getVal(node.id);
bgneal@442: });
bgneal@442:
bgneal@442: tinyMCEPopup.editor.plugins.fullpage._dataToHtml(data);
bgneal@442: tinyMCEPopup.close();
bgneal@312: }
bgneal@442: };
bgneal@442:
bgneal@442: function init() {
bgneal@442: var form = document.forms[0], i, item, list, editor = tinyMCEPopup.editor;
bgneal@312:
bgneal@442: // Setup doctype select box
bgneal@442: list = editor.getParam("fullpage_doctypes", defaultDocTypes).split(',');
bgneal@442: for (i = 0; i < list.length; i++) {
bgneal@442: item = list[i].split('=');
bgneal@312:
bgneal@442: if (item.length > 1)
bgneal@442: addSelectValue(form, 'doctype', item[0], item[1]);
bgneal@312: }
bgneal@312:
bgneal@442: // Setup fonts select box
bgneal@442: list = editor.getParam("fullpage_fonts", defaultFontNames).split(';');
bgneal@442: for (i = 0; i < list.length; i++) {
bgneal@442: item = list[i].split('=');
bgneal@312:
bgneal@442: if (item.length > 1)
bgneal@442: addSelectValue(form, 'fontface', item[0], item[1]);
bgneal@312: }
bgneal@312:
bgneal@442: // Setup fontsize select box
bgneal@442: list = editor.getParam("fullpage_fontsizes", defaultFontSizes).split(',');
bgneal@442: for (i = 0; i < list.length; i++)
bgneal@442: addSelectValue(form, 'fontsize', list[i], list[i]);
bgneal@312:
bgneal@442: // Setup encodings select box
bgneal@442: list = editor.getParam("fullpage_encodings", defaultEncodings).split(',');
bgneal@442: for (i = 0; i < list.length; i++) {
bgneal@442: item = list[i].split('=');
bgneal@312:
bgneal@442: if (item.length > 1)
bgneal@442: addSelectValue(form, 'docencoding', item[0], item[1]);
bgneal@312: }
bgneal@312:
bgneal@442: // Setup color pickers
bgneal@442: document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
bgneal@442: document.getElementById('link_color_pickcontainer').innerHTML = getColorPickerHTML('link_color_pick','link_color');
bgneal@442: document.getElementById('visited_color_pickcontainer').innerHTML = getColorPickerHTML('visited_color_pick','visited_color');
bgneal@442: document.getElementById('active_color_pickcontainer').innerHTML = getColorPickerHTML('active_color_pick','active_color');
bgneal@442: document.getElementById('textcolor_pickcontainer').innerHTML = getColorPickerHTML('textcolor_pick','textcolor');
bgneal@442: document.getElementById('stylesheet_browsercontainer').innerHTML = getBrowserHTML('stylesheetbrowser','stylesheet','file','fullpage');
bgneal@442: document.getElementById('bgimage_pickcontainer').innerHTML = getBrowserHTML('bgimage_browser','bgimage','image','fullpage');
bgneal@312:
bgneal@442: // Resize some elements
bgneal@442: if (isVisible('stylesheetbrowser'))
bgneal@442: document.getElementById('stylesheet').style.width = '220px';
bgneal@312:
bgneal@442: if (isVisible('link_href_browser'))
bgneal@442: document.getElementById('element_link_href').style.width = '230px';
bgneal@312:
bgneal@442: if (isVisible('bgimage_browser'))
bgneal@442: document.getElementById('bgimage').style.width = '210px';
bgneal@312:
bgneal@442: // Update form
bgneal@442: tinymce.each(tinyMCEPopup.getWindowArg('data'), function(value, key) {
bgneal@442: setVal(key, value);
bgneal@442: });
bgneal@312:
bgneal@442: FullPageDialog.changedStyle();
bgneal@312:
bgneal@442: // Update colors
bgneal@442: updateColor('textcolor_pick', 'textcolor');
bgneal@442: updateColor('bgcolor_pick', 'bgcolor');
bgneal@442: updateColor('visited_color_pick', 'visited_color');
bgneal@442: updateColor('active_color_pick', 'active_color');
bgneal@442: updateColor('link_color_pick', 'link_color');
bgneal@442: };
bgneal@312:
bgneal@442: tinyMCEPopup.onInit.add(init);
bgneal@442: })();