webcit/tiny_mce/plugins/fullpage/js/fullpage.js

   1 /**\r
   2  * fullpage.js\r
   3  *\r
   4  * Copyright 2009, Moxiecode Systems AB\r
   5  * Released under LGPL License.\r
   6  *\r
   7  * License: http://tinymce.moxiecode.com/license\r
   8  * Contributing: http://tinymce.moxiecode.com/contributing\r
   9  */\r
  10 \r
  11 (function() {\r
  12         tinyMCEPopup.requireLangPack();\r
  13 \r
  14         var defaultDocTypes = \r
  15                 'XHTML 1.0 Transitional=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,' +\r
  16                 'XHTML 1.0 Frameset=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">,' +\r
  17                 'XHTML 1.0 Strict=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,' +\r
  18                 'XHTML 1.1=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,' +\r
  19                 'HTML 4.01 Transitional=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,' +\r
  20                 'HTML 4.01 Strict=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,' +\r
  21                 'HTML 4.01 Frameset=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">';\r
  22 \r
  23         var defaultEncodings = \r
  24                 'Western european (iso-8859-1)=iso-8859-1,' +\r
  25                 'Central European (iso-8859-2)=iso-8859-2,' +\r
  26                 'Unicode (UTF-8)=utf-8,' +\r
  27                 'Chinese traditional (Big5)=big5,' +\r
  28                 'Cyrillic (iso-8859-5)=iso-8859-5,' +\r
  29                 'Japanese (iso-2022-jp)=iso-2022-jp,' +\r
  30                 'Greek (iso-8859-7)=iso-8859-7,' +\r
  31                 'Korean (iso-2022-kr)=iso-2022-kr,' +\r
  32                 'ASCII (us-ascii)=us-ascii';\r
  33 \r
  34         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';\r
  35         var defaultFontSizes = '10px,11px,12px,13px,14px,15px,16px';\r
  36 \r
  37         function setVal(id, value) {\r
  38                 var elm = document.getElementById(id);\r
  39 \r
  40                 if (elm) {\r
  41                         value = value || '';\r
  42 \r
  43                         if (elm.nodeName == "SELECT")\r
  44                                 selectByValue(document.forms[0], id, value);\r
  45                         else if (elm.type == "checkbox")\r
  46                                 elm.checked = !!value;\r
  47                         else\r
  48                                 elm.value = value;\r
  49                 }\r
  50         };\r
  51 \r
  52         function getVal(id) {\r
  53                 var elm = document.getElementById(id);\r
  54 \r
  55                 if (elm.nodeName == "SELECT")\r
  56                         return elm.options[elm.selectedIndex].value;\r
  57 \r
  58                 if (elm.type == "checkbox")\r
  59                         return elm.checked;\r
  60 \r
  61                 return elm.value;\r
  62         };\r
  63 \r
  64         window.FullPageDialog = {\r
  65                 changedStyle : function() {\r
  66                         var val, styles = tinyMCEPopup.editor.dom.parseStyle(getVal('style'));\r
  67 \r
  68                         setVal('fontface', styles['font-face']);\r
  69                         setVal('fontsize', styles['font-size']);\r
  70                         setVal('textcolor', styles['color']);\r
  71 \r
  72                         if (val = styles['background-image'])\r
  73                                 setVal('bgimage', val.replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"));\r
  74                         else\r
  75                                 setVal('bgimage', '');\r
  76 \r
  77                         setVal('bgcolor', styles['background-color']);\r
  78 \r
  79                         // Reset margin form elements\r
  80                         setVal('topmargin', '');\r
  81                         setVal('rightmargin', '');\r
  82                         setVal('bottommargin', '');\r
  83                         setVal('leftmargin', '');\r
  84 \r
  85                         // Expand margin\r
  86                         if (val = styles['margin']) {\r
  87                                 val = val.split(' ');\r
  88                                 styles['margin-top'] = val[0] || '';\r
  89                                 styles['margin-right'] = val[1] || val[0] || '';\r
  90                                 styles['margin-bottom'] = val[2] || val[0] || '';\r
  91                                 styles['margin-left'] = val[3] || val[0] || '';\r
  92                         }\r
  93 \r
  94                         if (val = styles['margin-top'])\r
  95                                 setVal('topmargin', val.replace(/px/, ''));\r
  96 \r
  97                         if (val = styles['margin-right'])\r
  98                                 setVal('rightmargin', val.replace(/px/, ''));\r
  99 \r
 100                         if (val = styles['margin-bottom'])\r
 101                                 setVal('bottommargin', val.replace(/px/, ''));\r
 102 \r
 103                         if (val = styles['margin-left'])\r
 104                                 setVal('leftmargin', val.replace(/px/, ''));\r
 105 \r
 106                         updateColor('bgcolor_pick', 'bgcolor');\r
 107                         updateColor('textcolor_pick', 'textcolor');\r
 108                 },\r
 109 \r
 110                 changedStyleProp : function() {\r
 111                         var val, dom = tinyMCEPopup.editor.dom, styles = dom.parseStyle(getVal('style'));\r
 112         \r
 113                         styles['font-face'] = getVal('fontface');\r
 114                         styles['font-size'] = getVal('fontsize');\r
 115                         styles['color'] = getVal('textcolor');\r
 116                         styles['background-color'] = getVal('bgcolor');\r
 117 \r
 118                         if (val = getVal('bgimage'))\r
 119                                 styles['background-image'] = "url('" + val + "')";\r
 120                         else\r
 121                                 styles['background-image'] = '';\r
 122 \r
 123                         delete styles['margin'];\r
 124 \r
 125                         if (val = getVal('topmargin'))\r
 126                                 styles['margin-top'] = val + "px";\r
 127                         else\r
 128                                 styles['margin-top'] = '';\r
 129 \r
 130                         if (val = getVal('rightmargin'))\r
 131                                 styles['margin-right'] = val + "px";\r
 132                         else\r
 133                                 styles['margin-right'] = '';\r
 134 \r
 135                         if (val = getVal('bottommargin'))\r
 136                                 styles['margin-bottom'] = val + "px";\r
 137                         else\r
 138                                 styles['margin-bottom'] = '';\r
 139 \r
 140                         if (val = getVal('leftmargin'))\r
 141                                 styles['margin-left'] = val + "px";\r
 142                         else\r
 143                                 styles['margin-left'] = '';\r
 144 \r
 145                         // Serialize, parse and reserialize this will compress redundant styles\r
 146                         setVal('style', dom.serializeStyle(dom.parseStyle(dom.serializeStyle(styles))));\r
 147                         this.changedStyle();\r
 148                 },\r
 149                 \r
 150                 update : function() {\r
 151                         var data = {};\r
 152 \r
 153                         tinymce.each(tinyMCEPopup.dom.select('select,input,textarea'), function(node) {\r
 154                                 data[node.id] = getVal(node.id);\r
 155                         });\r
 156 \r
 157                         tinyMCEPopup.editor.plugins.fullpage._dataToHtml(data);\r
 158                         tinyMCEPopup.close();\r
 159                 }\r
 160         };\r
 161         \r
 162         function init() {\r
 163                 var form = document.forms[0], i, item, list, editor = tinyMCEPopup.editor;\r
 164 \r
 165                 // Setup doctype select box\r
 166                 list = editor.getParam("fullpage_doctypes", defaultDocTypes).split(',');\r
 167                 for (i = 0; i < list.length; i++) {\r
 168                         item = list[i].split('=');\r
 169 \r
 170                         if (item.length > 1)\r
 171                                 addSelectValue(form, 'doctype', item[0], item[1]);\r
 172                 }\r
 173 \r
 174                 // Setup fonts select box\r
 175                 list = editor.getParam("fullpage_fonts", defaultFontNames).split(';');\r
 176                 for (i = 0; i < list.length; i++) {\r
 177                         item = list[i].split('=');\r
 178 \r
 179                         if (item.length > 1)\r
 180                                 addSelectValue(form, 'fontface', item[0], item[1]);\r
 181                 }\r
 182 \r
 183                 // Setup fontsize select box\r
 184                 list = editor.getParam("fullpage_fontsizes", defaultFontSizes).split(',');\r
 185                 for (i = 0; i < list.length; i++)\r
 186                         addSelectValue(form, 'fontsize', list[i], list[i]);\r
 187 \r
 188                 // Setup encodings select box\r
 189                 list = editor.getParam("fullpage_encodings", defaultEncodings).split(',');\r
 190                 for (i = 0; i < list.length; i++) {\r
 191                         item = list[i].split('=');\r
 192 \r
 193                         if (item.length > 1)\r
 194                                 addSelectValue(form, 'docencoding', item[0], item[1]);\r
 195                 }\r
 196 \r
 197                 // Setup color pickers\r
 198                 document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');\r
 199                 document.getElementById('link_color_pickcontainer').innerHTML = getColorPickerHTML('link_color_pick','link_color');\r
 200                 document.getElementById('visited_color_pickcontainer').innerHTML = getColorPickerHTML('visited_color_pick','visited_color');\r
 201                 document.getElementById('active_color_pickcontainer').innerHTML = getColorPickerHTML('active_color_pick','active_color');\r
 202                 document.getElementById('textcolor_pickcontainer').innerHTML = getColorPickerHTML('textcolor_pick','textcolor');\r
 203                 document.getElementById('stylesheet_browsercontainer').innerHTML = getBrowserHTML('stylesheetbrowser','stylesheet','file','fullpage');\r
 204                 document.getElementById('bgimage_pickcontainer').innerHTML = getBrowserHTML('bgimage_browser','bgimage','image','fullpage');\r
 205 \r
 206                 // Resize some elements\r
 207                 if (isVisible('stylesheetbrowser'))\r
 208                         document.getElementById('stylesheet').style.width = '220px';\r
 209 \r
 210                 if (isVisible('link_href_browser'))\r
 211                         document.getElementById('element_link_href').style.width = '230px';\r
 212 \r
 213                 if (isVisible('bgimage_browser'))\r
 214                         document.getElementById('bgimage').style.width = '210px';\r
 215 \r
 216                 // Update form\r
 217                 tinymce.each(tinyMCEPopup.getWindowArg('data'), function(value, key) {\r
 218                         setVal(key, value);\r
 219                 });\r
 220 \r
 221                 FullPageDialog.changedStyle();\r
 222 \r
 223                 // Update colors\r
 224                 updateColor('textcolor_pick', 'textcolor');\r
 225                 updateColor('bgcolor_pick', 'bgcolor');\r
 226                 updateColor('visited_color_pick', 'visited_color');\r
 227                 updateColor('active_color_pick', 'active_color');\r
 228                 updateColor('link_color_pick', 'link_color');\r
 229         };\r
 230 \r
 231         tinyMCEPopup.onInit.add(init);\r
 232 })();\r