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