_source/plugins/docprops/dialogs/docprops.js

   1 /*\r
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.dialog.add( 'docProps', function( editor )\r
   7 {\r
   8         var lang = editor.lang.docprops,\r
   9                 langCommon = editor.lang.common,\r
  10                 metaHash = {};\r
  11 \r
  12         function getDialogValue( dialogName, callback )\r
  13         {\r
  14                 var onOk = function()\r
  15                 {\r
  16                         releaseHandlers( this );\r
  17                         callback( this, this._.parentDialog );\r
  18                 };\r
  19                 var releaseHandlers = function( dialog )\r
  20                 {\r
  21                         dialog.removeListener( 'ok', onOk );\r
  22                         dialog.removeListener( 'cancel', releaseHandlers );\r
  23                 };\r
  24                 var bindToDialog = function( dialog )\r
  25                 {\r
  26                         dialog.on( 'ok', onOk );\r
  27                         dialog.on( 'cancel', releaseHandlers );\r
  28                 };\r
  29                 editor.execCommand( dialogName );\r
  30                 if ( editor._.storedDialogs.colordialog )\r
  31                         bindToDialog( editor._.storedDialogs.colordialog );\r
  32                 else\r
  33                 {\r
  34                         CKEDITOR.on( 'dialogDefinition', function( e )\r
  35                         {\r
  36                                 if ( e.data.name != dialogName )\r
  37                                         return;\r
  38 \r
  39                                 var definition = e.data.definition;\r
  40 \r
  41                                 e.removeListener();\r
  42                                 definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )\r
  43                                 {\r
  44                                         return function()\r
  45                                         {\r
  46                                                 bindToDialog( this );\r
  47                                                 definition.onLoad = orginal;\r
  48                                                 if ( typeof orginal == 'function' )\r
  49                                                         orginal.call( this );\r
  50                                         };\r
  51                                 });\r
  52                         });\r
  53                 }\r
  54         }\r
  55         function handleOther()\r
  56         {\r
  57                 var dialog = this.getDialog(),\r
  58                         other = dialog.getContentElement( 'general', this.id + 'Other' );\r
  59                 if ( !other )\r
  60                         return;\r
  61                 if ( this.getValue() == 'other' )\r
  62                 {\r
  63                         other.getInputElement().removeAttribute( 'readOnly' );\r
  64                         other.focus();\r
  65                         other.getElement().removeClass( 'cke_disabled' );\r
  66                 }\r
  67                 else\r
  68                 {\r
  69                         other.getInputElement().setAttribute( 'readOnly', true );\r
  70                         other.getElement().addClass( 'cke_disabled' );\r
  71                 }\r
  72         }\r
  73         function commitMeta( name, isHttp, value )\r
  74         {\r
  75                 return function( doc, html, head )\r
  76                 {\r
  77                         var hash = metaHash,\r
  78                                 val = typeof value != 'undefined' ? value : this.getValue();\r
  79                         if ( !val && ( name in hash ) )\r
  80                                 hash[ name ].remove();\r
  81                         else if ( val && ( name in hash ) )\r
  82                                 hash[ name ].setAttribute( 'content', val );\r
  83                         else if ( val )\r
  84                         {\r
  85                                 var meta = new CKEDITOR.dom.element( 'meta', editor.document );\r
  86                                 meta.setAttribute( isHttp ? 'http-equiv' : 'name', name );\r
  87                                 meta.setAttribute( 'content', val );\r
  88                                 head.append( meta );\r
  89                         }\r
  90                 };\r
  91         }\r
  92         function setupMeta( name, ret )\r
  93         {\r
  94                 return function()\r
  95                 {\r
  96                         var hash = metaHash,\r
  97                                 result = ( name in hash ) ? hash[ name ].getAttribute( 'content' ) || '' : '';\r
  98                         if ( ret )\r
  99                                 return result;\r
 100                         this.setValue( result );\r
 101                         return null;\r
 102                 };\r
 103         }\r
 104         function commitMargin( name )\r
 105         {\r
 106                 return function( doc, html, head, body )\r
 107                 {\r
 108                         body.removeAttribute( 'margin' + name );\r
 109                         var val = this.getValue();\r
 110                         if ( val !== '' )\r
 111                                 body.setStyle( 'margin-' + name, CKEDITOR.tools.cssLength( val ) );\r
 112                         else\r
 113                                 body.removeStyle( 'margin-' + name );\r
 114                 };\r
 115         }\r
 116 \r
 117         function createMetaHash( doc )\r
 118         {\r
 119                 var hash = {},\r
 120                         metas = doc.getElementsByTag( 'meta' ),\r
 121                         count = metas.count();\r
 122 \r
 123                 for ( var i = 0; i < count; i++ )\r
 124                 {\r
 125                         var meta = metas.getItem( i );\r
 126                         hash[ meta.getAttribute( meta.hasAttribute( 'http-equiv' ) ? 'http-equiv' : 'name' ).toLowerCase() ] = meta;\r
 127                 }\r
 128                 return hash;\r
 129         }\r
 130         // We cannot just remove the style from the element, as it might be affected from non-inline stylesheets.\r
 131         // To get the proper result, we should manually set the inline style to its default value.\r
 132         function resetStyle( element, prop, resetVal )\r
 133         {\r
 134                 element.removeStyle( prop );\r
 135                 if ( element.getComputedStyle( prop ) != resetVal )\r
 136                         element.setStyle( prop, resetVal );\r
 137         }\r
 138 \r
 139         // Utilty to shorten the creation of color fields in the dialog.\r
 140         var colorField = function( id, label, fieldProps )\r
 141         {\r
 142                 return {\r
 143                         type : 'hbox',\r
 144                         padding : 0,\r
 145                         widths : [ '60%', '40%' ],\r
 146                         children : [\r
 147                                 CKEDITOR.tools.extend( {\r
 148                                         type : 'text',\r
 149                                         id : id,\r
 150                                         label : lang[ label ]\r
 151                                 }, fieldProps || {}, 1 ),\r
 152                                 {\r
 153                                         type : 'button',\r
 154                                         id : id + 'Choose',\r
 155                                         label : lang.chooseColor,\r
 156                                         className : 'colorChooser',\r
 157                                         onClick : function()\r
 158                                         {\r
 159                                                 var self = this;\r
 160                                                 getDialogValue( 'colordialog', function( colorDialog )\r
 161                                                 {\r
 162                                                         var dialog = self.getDialog();\r
 163                                                         dialog.getContentElement( dialog._.currentTabId, id ).setValue( colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue() );\r
 164                                                 });\r
 165                                         }\r
 166                                 }\r
 167                         ]\r
 168                 };\r
 169         };\r
 170         var previewSrc = 'javascript:' +\r
 171                 'void((function(){' +\r
 172                         encodeURIComponent(\r
 173                                 'document.open();' +\r
 174                                 ( CKEDITOR.env.isCustomDomain() ? 'document.domain=\'' + document.domain + '\';' : '' ) +\r
 175                                 'document.write( \'<html style="background-color: #ffffff; height: 100%"><head></head><body style="width: 100%; height: 100%; margin: 0px">' + lang.previewHtml + '</body></html>\' );' +\r
 176                                 'document.close();'\r
 177                         ) +\r
 178                 '})())';\r
 179 \r
 180         return {\r
 181                 title : lang.title,\r
 182                 minHeight: 330,\r
 183                 minWidth: 500,\r
 184                 onShow : function()\r
 185                 {\r
 186                         var doc = editor.document,\r
 187                                 html = doc.getElementsByTag( 'html' ).getItem( 0 ),\r
 188                                 head = doc.getHead(),\r
 189                                 body = doc.getBody();\r
 190                         metaHash = createMetaHash( doc );\r
 191                         this.setupContent( doc, html, head, body );\r
 192                 },\r
 193                 onHide : function()\r
 194                 {\r
 195                         metaHash = {};\r
 196                 },\r
 197                 onOk : function()\r
 198                 {\r
 199                         var doc = editor.document,\r
 200                                 html = doc.getElementsByTag( 'html' ).getItem( 0 ),\r
 201                                 head = doc.getHead(),\r
 202                                 body = doc.getBody();\r
 203                         this.commitContent( doc, html, head, body );\r
 204                 },\r
 205                 contents : [\r
 206                         {\r
 207                                 id : 'general',\r
 208                                 label : langCommon.generalTab,\r
 209                                 elements : [\r
 210                                         {\r
 211                                                 type : 'text',\r
 212                                                 id : 'title',\r
 213                                                 label : lang.docTitle,\r
 214                                                 setup : function( doc )\r
 215                                                 {\r
 216                                                         this.setValue( doc.getElementsByTag( 'title' ).getItem( 0 ).data( 'cke-title' ) );\r
 217                                                 },\r
 218                                                 commit : function( doc, html, head, body, isPreview )\r
 219                                                 {\r
 220                                                         if ( isPreview )\r
 221                                                                 return;\r
 222                                                         doc.getElementsByTag( 'title' ).getItem( 0 ).data( 'cke-title', this.getValue() );\r
 223                                                 }\r
 224                                         },\r
 225                                         {\r
 226                                                 type : 'hbox',\r
 227                                                 children : [\r
 228                                                         {\r
 229                                                                 type : 'select',\r
 230                                                                 id : 'dir',\r
 231                                                                 label : langCommon.langDir,\r
 232                                                                 style : 'width: 100%',\r
 233                                                                 items : [\r
 234                                                                         [ langCommon.notSet , '' ],\r
 235                                                                         [ langCommon.langDirLtr, 'ltr' ],\r
 236                                                                         [ langCommon.langDirRtl, 'rtl' ]\r
 237                                                                 ],\r
 238                                                                 setup : function( doc, html, head, body )\r
 239                                                                 {\r
 240                                                                         this.setValue( body.getDirection() || '' );\r
 241                                                                 },\r
 242                                                                 commit : function( doc, html, head, body )\r
 243                                                                 {\r
 244                                                                         var val = this.getValue();\r
 245                                                                         if ( val )\r
 246                                                                                 body.setAttribute( 'dir', val );\r
 247                                                                         else\r
 248                                                                                 body.removeAttribute( 'dir' );\r
 249                                                                         body.removeStyle( 'direction' );\r
 250                                                                 }\r
 251                                                         },\r
 252                                                         {\r
 253                                                                 type : 'text',\r
 254                                                                 id : 'langCode',\r
 255                                                                 label : langCommon.langCode,\r
 256                                                                 setup : function( doc, html )\r
 257                                                                 {\r
 258                                                                         this.setValue( html.getAttribute( 'xml:lang' ) || html.getAttribute( 'lang' ) || '' );\r
 259                                                                 },\r
 260                                                                 commit : function( doc, html, head, body, isPreview )\r
 261                                                                 {\r
 262                                                                         if ( isPreview )\r
 263                                                                                 return;\r
 264                                                                         var val = this.getValue();\r
 265                                                                         if ( val )\r
 266                                                                                 html.setAttributes( { 'xml:lang' : val, lang : val } );\r
 267                                                                         else\r
 268                                                                                 html.removeAttributes( { 'xml:lang' : 1, lang : 1 } );\r
 269                                                                 }\r
 270                                                         }\r
 271                                                 ]\r
 272                                         },\r
 273                                         {\r
 274                                                 type : 'hbox',\r
 275                                                 children : [\r
 276                                                         {\r
 277                                                                 type : 'select',\r
 278                                                                 id : 'charset',\r
 279                                                                 label : lang.charset,\r
 280                                                                 style : 'width: 100%',\r
 281                                                                 items : [\r
 282                                                                         [ langCommon.notSet, '' ],\r
 283                                                                         [ lang.charsetASCII, 'us-ascii' ],\r
 284                                                                         [ lang.charsetCE, 'iso-8859-2' ],\r
 285                                                                         [ lang.charsetCT, 'big5' ],\r
 286                                                                         [ lang.charsetCR, 'iso-8859-5' ],\r
 287                                                                         [ lang.charsetGR, 'iso-8859-7' ],\r
 288                                                                         [ lang.charsetJP, 'iso-2022-jp' ],\r
 289                                                                         [ lang.charsetKR, 'iso-2022-kr' ],\r
 290                                                                         [ lang.charsetTR, 'iso-8859-9' ],\r
 291                                                                         [ lang.charsetUN, 'utf-8' ],\r
 292                                                                         [ lang.charsetWE, 'iso-8859-1' ],\r
 293                                                                         [ lang.other, 'other' ]\r
 294                                                                 ],\r
 295                                                                 'default' : '',\r
 296                                                                 onChange : function()\r
 297                                                                 {\r
 298                                                                         this.getDialog().selectedCharset = this.getValue() != 'other' ? this.getValue() : '';\r
 299                                                                         handleOther.call( this );\r
 300                                                                 },\r
 301                                                                 setup : function()\r
 302                                                                 {\r
 303                                                                         this.metaCharset = ( 'charset' in metaHash );\r
 304 \r
 305                                                                         var func = setupMeta( this.metaCharset ? 'charset' : 'content-type', 1, 1 ),\r
 306                                                                                 val = func.call( this );\r
 307 \r
 308                                                                         !this.metaCharset && val.match( /charset=[^=]+$/ ) && ( val = val.substring( val.indexOf( '=' ) + 1 ) );\r
 309 \r
 310                                                                         if ( val )\r
 311                                                                         {\r
 312                                                                                 this.setValue( val.toLowerCase() );\r
 313                                                                                 if ( !this.getValue() )\r
 314                                                                                 {\r
 315                                                                                         this.setValue( 'other' );\r
 316                                                                                         var other = this.getDialog().getContentElement( 'general', 'charsetOther' );\r
 317                                                                                         other && other.setValue( val );\r
 318                                                                                 }\r
 319                                                                                 this.getDialog().selectedCharset = val;\r
 320                                                                         }\r
 321 \r
 322                                                                         handleOther.call( this );\r
 323                                                                 },\r
 324                                                                 commit : function( doc, html, head, body, isPreview )\r
 325                                                                 {\r
 326                                                                         if ( isPreview )\r
 327                                                                                 return;\r
 328                                                                         var value = this.getValue(),\r
 329                                                                                 other = this.getDialog().getContentElement( 'general', 'charsetOther' );\r
 330 \r
 331                                                                         value == 'other' && ( value = other ? other.getValue() : '' );\r
 332 \r
 333                                                                         value && !this.metaCharset && ( value = ( metaHash[ 'content-type' ] ? metaHash[ 'content-type' ].getAttribute( 'content' ).split( ';' )[0] : 'text/html' ) + '; charset=' + value );\r
 334 \r
 335                                                                         var func = commitMeta( this.metaCharset ? 'charset' : 'content-type', 1, value );\r
 336                                                                         func.call( this, doc, html, head );\r
 337                                                                 }\r
 338                                                         },\r
 339                                                         {\r
 340                                                                 type : 'text',\r
 341                                                                 id : 'charsetOther',\r
 342                                                                 label : lang.charsetOther,\r
 343                                                                 onChange : function(){ this.getDialog().selectedCharset = this.getValue(); }\r
 344                                                         }\r
 345                                                 ]\r
 346                                         },\r
 347                                         {\r
 348                                                 type : 'hbox',\r
 349                                                 children : [\r
 350                                                         {\r
 351                                                                 type : 'select',\r
 352                                                                 id : 'docType',\r
 353                                                                 label : lang.docType,\r
 354                                                                 style : 'width: 100%',\r
 355                                                                 items : [\r
 356                                                                         [ langCommon.notSet , '' ],\r
 357                                                                         [ 'XHTML 1.1', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">' ],\r
 358                                                                         [ '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
 359                                                                         [ '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
 360                                                                         [ '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
 361                                                                         [ 'HTML 5', '<!DOCTYPE html>' ],\r
 362                                                                         [ 'HTML 4.01 Transitional', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">' ],\r
 363                                                                         [ 'HTML 4.01 Strict', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' ],\r
 364                                                                         [ 'HTML 4.01 Frameset', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">' ],\r
 365                                                                         [ 'HTML 3.2', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">' ],\r
 366                                                                         [ 'HTML 2.0', '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">' ],\r
 367                                                                         [ lang.other, 'other' ]\r
 368                                                                 ],\r
 369                                                                 onChange : handleOther,\r
 370                                                                 setup : function()\r
 371                                                                 {\r
 372                                                                         if ( editor.docType )\r
 373                                                                         {\r
 374                                                                                 this.setValue( editor.docType );\r
 375                                                                                 if ( !this.getValue() )\r
 376                                                                                 {\r
 377                                                                                         this.setValue( 'other' );\r
 378                                                                                         var other = this.getDialog().getContentElement( 'general', 'docTypeOther' );\r
 379                                                                                         other && other.setValue( editor.docType );\r
 380                                                                                 }\r
 381                                                                         }\r
 382                                                                         handleOther.call( this );\r
 383                                                                 },\r
 384                                                                 commit : function( doc, html, head, body, isPreview )\r
 385                                                                 {\r
 386                                                                         if ( isPreview )\r
 387                                                                                 return;\r
 388                                                                         var value = this.getValue(),\r
 389                                                                                 other = this.getDialog().getContentElement( 'general', 'docTypeOther' );\r
 390                                                                         editor.docType = value == 'other' ? ( other ? other.getValue() : '' ) : value;\r
 391                                                                 }\r
 392                                                         },\r
 393                                                         {\r
 394                                                                 type : 'text',\r
 395                                                                 id : 'docTypeOther',\r
 396                                                                 label : lang.docTypeOther\r
 397                                                         }\r
 398                                                 ]\r
 399                                         },\r
 400                                         {\r
 401                                                 type : 'checkbox',\r
 402                                                 id : 'xhtmlDec',\r
 403                                                 label : lang.xhtmlDec,\r
 404                                                 setup : function()\r
 405                                                 {\r
 406                                                         this.setValue( !!editor.xmlDeclaration );\r
 407                                                 },\r
 408                                                 commit : function( doc, html, head, body, isPreview )\r
 409                                                 {\r
 410                                                         if ( isPreview )\r
 411                                                                 return;\r
 412                                                         if ( this.getValue() )\r
 413                                                         {\r
 414                                                                 editor.xmlDeclaration = '<?xml version="1.0" encoding="' + ( this.getDialog().selectedCharset || 'utf-8' )+ '"?>' ;\r
 415                                                                 html.setAttribute( 'xmlns', 'http://www.w3.org/1999/xhtml' );\r
 416                                                         }\r
 417                                                         else\r
 418                                                         {\r
 419                                                                 editor.xmlDeclaration = '';\r
 420                                                                 html.removeAttribute( 'xmlns' );\r
 421                                                         }\r
 422                                                 }\r
 423                                         }\r
 424                                 ]\r
 425                         },\r
 426                         {\r
 427                                 id : 'design',\r
 428                                 label : lang.design,\r
 429                                 elements : [\r
 430                                         {\r
 431                                                 type : 'hbox',\r
 432                                                 widths : [ '60%', '40%' ],\r
 433                                                 children : [\r
 434                                                         {\r
 435                                                                 type : 'vbox',\r
 436                                                                 children : [\r
 437                                                                         colorField( 'txtColor', 'txtColor',\r
 438                                                                         {\r
 439                                                                                 setup : function( doc, html, head, body )\r
 440                                                                                 {\r
 441                                                                                         this.setValue( body.getComputedStyle( 'color' ) );\r
 442                                                                                 },\r
 443                                                                                 commit : function( doc, html, head, body, isPreview )\r
 444                                                                                 {\r
 445                                                                                         if ( this.isChanged() || isPreview )\r
 446                                                                                         {\r
 447                                                                                                 body.removeAttribute( 'text' );\r
 448                                                                                                 var val = this.getValue();\r
 449                                                                                                 if ( val )\r
 450                                                                                                         body.setStyle( 'color', val );\r
 451                                                                                                 else\r
 452                                                                                                         body.removeStyle( 'color' );\r
 453                                                                                         }\r
 454                                                                                 }\r
 455                                                                         }),\r
 456                                                                         colorField( 'bgColor', 'bgColor', {\r
 457                                                                                 setup : function( doc, html, head, body )\r
 458                                                                                 {\r
 459                                                                                         var val = body.getComputedStyle( 'background-color' ) || '';\r
 460                                                                                         this.setValue( val == 'transparent' ? '' : val );\r
 461                                                                                 },\r
 462                                                                                 commit : function( doc, html, head, body, isPreview )\r
 463                                                                                 {\r
 464                                                                                         if ( this.isChanged() || isPreview )\r
 465                                                                                         {\r
 466                                                                                                 body.removeAttribute( 'bgcolor' );\r
 467                                                                                                 var val = this.getValue();\r
 468                                                                                                 if ( val )\r
 469                                                                                                         body.setStyle( 'background-color', val );\r
 470                                                                                                 else\r
 471                                                                                                         resetStyle( body, 'background-color', 'transparent' );\r
 472                                                                                         }\r
 473                                                                                 }\r
 474                                                                         }),\r
 475                                                                         {\r
 476                                                                                 type : 'hbox',\r
 477                                                                                 widths : [ '60%', '40%' ],\r
 478                                                                                 padding : 1,\r
 479                                                                                 children : [\r
 480                                                                                         {\r
 481                                                                                                 type : 'text',\r
 482                                                                                                 id : 'bgImage',\r
 483                                                                                                 label : lang.bgImage,\r
 484                                                                                                 setup : function( doc, html, head, body )\r
 485                                                                                                 {\r
 486                                                                                                         var val = body.getComputedStyle( 'background-image' ) || '';\r
 487                                                                                                         if ( val == 'none' )\r
 488                                                                                                                 val = '';\r
 489                                                                                                         else\r
 490                                                                                                         {\r
 491                                                                                                                 val = val.replace( /url\(\s*(["']?)\s*([^\)]*)\s*\1\s*\)/i, function( match, quote, url )\r
 492                                                                                                                 {\r
 493                                                                                                                         return url;\r
 494                                                                                                                 });\r
 495                                                                                                         }\r
 496                                                                                                         this.setValue( val );\r
 497                                                                                                 },\r
 498                                                                                                 commit : function( doc, html, head, body )\r
 499                                                                                                 {\r
 500                                                                                                         body.removeAttribute( 'background' );\r
 501                                                                                                         var val = this.getValue();\r
 502                                                                                                         if ( val )\r
 503                                                                                                                 body.setStyle( 'background-image', 'url(' + val + ')' );\r
 504                                                                                                         else\r
 505                                                                                                                 resetStyle( body, 'background-image', 'none' );\r
 506                                                                                                 }\r
 507                                                                                         },\r
 508                                                                                         {\r
 509                                                                                                 type : 'button',\r
 510                                                                                                 id : 'bgImageChoose',\r
 511                                                                                                 label : langCommon.browseServer,\r
 512                                                                                                 style : 'display:inline-block;margin-top:10px;',\r
 513                                                                                                 hidden : true,\r
 514                                                                                                 filebrowser : 'design:bgImage'\r
 515                                                                                         }\r
 516                                                                                 ]\r
 517                                                                         },\r
 518                                                                         {\r
 519                                                                                 type : 'checkbox',\r
 520                                                                                 id : 'bgFixed',\r
 521                                                                                 label : lang.bgFixed,\r
 522                                                                                 setup : function( doc, html, head, body )\r
 523                                                                                 {\r
 524                                                                                         this.setValue( body.getComputedStyle( 'background-attachment' ) == 'fixed' );\r
 525                                                                                 },\r
 526                                                                                 commit : function( doc, html, head, body )\r
 527                                                                                 {\r
 528                                                                                         if ( this.getValue() )\r
 529                                                                                                 body.setStyle( 'background-attachment', 'fixed' );\r
 530                                                                                         else\r
 531                                                                                                 resetStyle( body, 'background-attachment', 'scroll' );\r
 532                                                                                 }\r
 533                                                                         }\r
 534                                                                 ]\r
 535                                                         },\r
 536                                                         {\r
 537                                                                 type : 'vbox',\r
 538                                                                 children : [\r
 539                                                                         {\r
 540                                                                                 type : 'html',\r
 541                                                                                 id : 'marginTitle',\r
 542                                                                                 html : '<div style="text-align: center; margin: 0px auto; font-weight: bold">' + lang.margin + '</div>'\r
 543                                                                         },\r
 544                                                                         {\r
 545                                                                                 type : 'text',\r
 546                                                                                 id : 'marginTop',\r
 547                                                                                 label : lang.marginTop,\r
 548                                                                                 style : 'width: 80px; text-align: center; margin: 0px auto',\r
 549                                                                                 inputStyle : 'text-align: center',\r
 550                                                                                 setup : function( doc, html, head, body )\r
 551                                                                                 {\r
 552                                                                                         this.setValue( body.getStyle( 'margin-top' ) || body.getAttribute( 'margintop' ) || '' );\r
 553                                                                                 },\r
 554                                                                                 commit : commitMargin( 'top' ),\r
 555                                                                                 onLoad : function()\r
 556                                                                                 {\r
 557                                                                                         this.getElement().getParent().setStyle( 'text-align', 'center' );\r
 558                                                                                 }\r
 559                                                                         },\r
 560                                                                         {\r
 561                                                                                 type : 'hbox',\r
 562                                                                                 children : [\r
 563                                                                                         {\r
 564                                                                                                 type : 'text',\r
 565                                                                                                 id : 'marginLeft',\r
 566                                                                                                 label : lang.marginLeft,\r
 567                                                                                                 style : 'width: 80px; text-align: center; margin: 0px auto',\r
 568                                                                                                 inputStyle : 'text-align: center',\r
 569                                                                                                 setup : function( doc, html, head, body )\r
 570                                                                                                 {\r
 571                                                                                                         this.setValue( body.getStyle( 'margin-left' ) || body.getAttribute( 'marginleft' ) || '' );\r
 572                                                                                                 },\r
 573                                                                                                 commit : commitMargin( 'left' ),\r
 574                                                                                                 onLoad : function()\r
 575                                                                                                 {\r
 576                                                                                                         this.getElement().getParent().setStyle( 'text-align', 'center' );\r
 577                                                                                                 }\r
 578                                                                                         },\r
 579                                                                                         {\r
 580                                                                                                 type : 'text',\r
 581                                                                                                 id : 'marginRight',\r
 582                                                                                                 label : lang.marginRight,\r
 583                                                                                                 style : 'width: 80px; text-align: center; margin: 0px auto',\r
 584                                                                                                 inputStyle : 'text-align: center',\r
 585                                                                                                 setup : function( doc, html, head, body )\r
 586                                                                                                 {\r
 587                                                                                                         this.setValue( body.getStyle( 'margin-right' ) || body.getAttribute( 'marginright' ) || '' );\r
 588                                                                                                 },\r
 589                                                                                                 commit : commitMargin( 'right' ),\r
 590                                                                                                 onLoad : function()\r
 591                                                                                                 {\r
 592                                                                                                         this.getElement().getParent().setStyle( 'text-align', 'center' );\r
 593                                                                                         }\r
 594                                                                                         }\r
 595                                                                                 ]\r
 596                                                                         },\r
 597                                                                         {\r
 598                                                                                 type : 'text',\r
 599                                                                                 id : 'marginBottom',\r
 600                                                                                 label : lang.marginBottom,\r
 601                                                                                 style : 'width: 80px; text-align: center; margin: 0px auto',\r
 602                                                                                 inputStyle : 'text-align: center',\r
 603                                                                                 setup : function( doc, html, head, body )\r
 604                                                                                 {\r
 605                                                                                         this.setValue( body.getStyle( 'margin-bottom' ) || body.getAttribute( 'marginbottom' ) || '' );\r
 606                                                                                 },\r
 607                                                                                 commit : commitMargin( 'bottom' ),\r
 608                                                                                 onLoad : function()\r
 609                                                                                 {\r
 610                                                                                         this.getElement().getParent().setStyle( 'text-align', 'center' );\r
 611                                                                         }\r
 612                                                                         }\r
 613                                                                 ]\r
 614                                                         }\r
 615                                                 ]\r
 616                                         }\r
 617                                 ]\r
 618                         },\r
 619                         {\r
 620                                 id : 'meta',\r
 621                                 label : lang.meta,\r
 622                                 elements : [\r
 623                                         {\r
 624                                                 type : 'textarea',\r
 625                                                 id : 'metaKeywords',\r
 626                                                 label : lang.metaKeywords,\r
 627                                                 setup : setupMeta( 'keywords' ),\r
 628                                                 commit : commitMeta( 'keywords' )\r
 629                                         },\r
 630                                         {\r
 631                                                 type : 'textarea',\r
 632                                                 id : 'metaDescription',\r
 633                                                 label : lang.metaDescription,\r
 634                                                 setup : setupMeta( 'description' ),\r
 635                                                 commit : commitMeta( 'description' )\r
 636                                         },\r
 637                                         {\r
 638                                                 type : 'text',\r
 639                                                 id : 'metaAuthor',\r
 640                                                 label : lang.metaAuthor,\r
 641                                                 setup : setupMeta( 'author' ),\r
 642                                                 commit : commitMeta( 'author' )\r
 643                                         },\r
 644                                         {\r
 645                                                 type : 'text',\r
 646                                                 id : 'metaCopyright',\r
 647                                                 label : lang.metaCopyright,\r
 648                                                 setup : setupMeta( 'copyright' ),\r
 649                                                 commit : commitMeta( 'copyright' )\r
 650                                         }\r
 651                                 ]\r
 652                         },\r
 653                         {\r
 654                                 id : 'preview',\r
 655                                 label : langCommon.preview,\r
 656                                 elements : [\r
 657                                         {\r
 658                                                 type : 'html',\r
 659                                                 id : 'previewHtml',\r
 660                                                 html : '<iframe src="' + previewSrc + '" style="width: 100%; height: 310px" hidefocus="true" frameborder="0" ' +\r
 661                                                                 'id="cke_docProps_preview_iframe"></iframe>',\r
 662                                                 onLoad : function()\r
 663                                                 {\r
 664                                                         this.getDialog().on( 'selectPage', function( ev )\r
 665                                                         {\r
 666                                                                 if ( ev.data.page == 'preview' )\r
 667                                                                 {\r
 668                                                                         var self = this;\r
 669                                                                         setTimeout( function()\r
 670                                                                         {\r
 671                                                                                 var doc = CKEDITOR.document.getById( 'cke_docProps_preview_iframe' ).getFrameDocument(),\r
 672                                                                                         html = doc.getElementsByTag( 'html' ).getItem( 0 ),\r
 673                                                                                         head = doc.getHead(),\r
 674                                                                                         body = doc.getBody();\r
 675                                                                                 self.commitContent( doc, html, head, body, 1 );\r
 676                                                                         }, 50 );\r
 677                                                                 }\r
 678                                                         });\r
 679                                                         CKEDITOR.document.getById( 'cke_docProps_preview_iframe' ).getAscendant( 'table' ).setStyle( 'height', '100%' );\r
 680                                                 }\r
 681                                         }\r
 682                                 ]\r
 683                         }\r
 684                 ]\r
 685         };\r
 686 });\r