_source/plugins/colordialog/dialogs/colordialog.js

   1 /*\r
   2 Copyright (c) 2003-2010, 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( 'colordialog', function( editor )\r
   7         {\r
   8                 // Define some shorthands.\r
   9                 var $el = CKEDITOR.dom.element,\r
  10                         $doc = CKEDITOR.document,\r
  11                         $tools = CKEDITOR.tools,\r
  12                         lang = editor.lang.colordialog;\r
  13 \r
  14                 // Reference the dialog.\r
  15                 var dialog;\r
  16 \r
  17                 function spacer()\r
  18                 {\r
  19                         return {\r
  20                                 type : 'html',\r
  21                                 html : '&nbsp;'\r
  22                         };\r
  23                 }\r
  24 \r
  25                 var table = new $el( 'table' );\r
  26                 createColorTable();\r
  27 \r
  28                 var cellMouseover = function( event )\r
  29                 {\r
  30                         var color = new $el( event.data.getTarget() ).getAttribute( 'title' );\r
  31                         $doc.getById( 'hicolor' ).setStyle( 'background-color', color );\r
  32                         $doc.getById( 'hicolortext' ).setHtml( color );\r
  33                 };\r
  34 \r
  35                 var cellClick = function( event )\r
  36                 {\r
  37                         var color = new $el( event.data.getTarget() ).getAttribute( 'title' );\r
  38                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );\r
  39                 };\r
  40 \r
  41                 function createColorTable()\r
  42                 {\r
  43                         // Create the base colors array.\r
  44                         var aColors = ['00','33','66','99','cc','ff'];\r
  45 \r
  46                         // This function combines two ranges of three values from the color array into a row.\r
  47                         function appendColorRow( rangeA, rangeB )\r
  48                         {\r
  49                                 for ( var i = rangeA ; i < rangeA + 3 ; i++ )\r
  50                                 {\r
  51                                         var row = table.$.insertRow(-1);\r
  52 \r
  53                                         for ( var j = rangeB ; j < rangeB + 3 ; j++ )\r
  54                                         {\r
  55                                                 for ( var n = 0 ; n < 6 ; n++ )\r
  56                                                 {\r
  57                                                         appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );\r
  58                                                 }\r
  59                                         }\r
  60                                 }\r
  61                         }\r
  62 \r
  63                         // This function create a single color cell in the color table.\r
  64                         function appendColorCell( targetRow, color )\r
  65                         {\r
  66                                 var cell = new $el( targetRow.insertCell( -1 ) );\r
  67                                 cell.setAttribute( 'class', 'ColorCell' );\r
  68                                 cell.setStyle( 'background-color', color );\r
  69 \r
  70                                 cell.setStyle( 'width', '15px' );\r
  71                                 cell.setStyle( 'height', '15px' );\r
  72 \r
  73                                 // Pass unparsed color value in some markup-degradable form.\r
  74                                 cell.setAttribute( 'title', color );\r
  75                         }\r
  76 \r
  77                         appendColorRow( 0, 0 );\r
  78                         appendColorRow( 3, 0 );\r
  79                         appendColorRow( 0, 3 );\r
  80                         appendColorRow( 3, 3 );\r
  81 \r
  82                         // Create the last row.\r
  83                         var oRow = table.$.insertRow(-1) ;\r
  84 \r
  85                         // Create the gray scale colors cells.\r
  86                         for ( var n = 0 ; n < 6 ; n++ )\r
  87                         {\r
  88                                 appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ;\r
  89                         }\r
  90 \r
  91                         // Fill the row with black cells.\r
  92                         for ( var i = 0 ; i < 12 ; i++ )\r
  93                         {\r
  94                                 appendColorCell( oRow, '#000000' ) ;\r
  95                         }\r
  96                 }\r
  97 \r
  98                 function clear()\r
  99                 {\r
 100                         $doc.getById( 'selhicolor' ).removeStyle( 'background-color' );\r
 101                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );\r
 102                 }\r
 103 \r
 104                 var clearActual = $tools.addFunction( function()\r
 105                 {\r
 106                         $doc.getById( 'hicolor' ).removeStyle( 'background-color' );\r
 107                         $doc.getById( 'hicolortext' ).setHtml( '&nbsp;' );\r
 108                 } );\r
 109 \r
 110                 return {\r
 111                         title : lang.title,\r
 112                         minWidth : 360,\r
 113                         minHeight : 220,\r
 114                         onLoad : function()\r
 115                         {\r
 116                                 // Update reference.\r
 117                                 dialog = this;\r
 118                         },\r
 119                         contents : [\r
 120                                 {\r
 121                                         id : 'picker',\r
 122                                         label : lang.title,\r
 123                                         accessKey : 'I',\r
 124                                         elements :\r
 125                                         [\r
 126                                                 {\r
 127                                                         type : 'hbox',\r
 128                                                         padding : 0,\r
 129                                                         widths : [ '70%', '10%', '30%' ],\r
 130                                                         children :\r
 131                                                         [\r
 132                                                                 {\r
 133                                                                         type : 'html',\r
 134                                                                         html : '<table onmouseout="CKEDITOR.tools.callFunction( ' + clearActual + ' );">' + table.getHtml() + '</table>',\r
 135                                                                         onLoad : function()\r
 136                                                                         {\r
 137                                                                                 var table = CKEDITOR.document.getById( this.domId );\r
 138                                                                                 table.on( 'mouseover', cellMouseover );\r
 139                                                                                 table.on( 'click', cellClick );\r
 140                                                                         }\r
 141                                                                 },\r
 142                                                                 spacer(),\r
 143                                                                 {\r
 144                                                                         type : 'vbox',\r
 145                                                                         padding : 0,\r
 146                                                                         widths : [ '70%', '5%', '25%' ],\r
 147                                                                         children :\r
 148                                                                         [\r
 149                                                                                 {\r
 150                                                                                         type : 'html',\r
 151                                                                                         html : '<span>' + lang.highlight +'</span>\\r
 152                                                                                                 <div id="hicolor" style="border: 1px solid; height: 74px; width: 74px;"></div>\\r
 153                                                                                                 <div id="hicolortext">&nbsp;</div>\\r
 154                                                                                                 <span>' + lang.selected +'</span>\\r
 155                                                                                                 <div id="selhicolor" style="border: 1px solid; height: 20px; width: 74px;"></div>'\r
 156                                                                                 },\r
 157                                                                                 {\r
 158                                                                                         type : 'text',\r
 159                                                                                         id : 'selectedColor',\r
 160                                                                                         style : 'width: 74px',\r
 161                                                                                         onChange : function()\r
 162                                                                                         {\r
 163                                                                                                 // Try to update color preview with new value. If fails, then set it no none.\r
 164                                                                                                 try\r
 165                                                                                                 {\r
 166                                                                                                         $doc.getById( 'selhicolor' ).setStyle( 'background-color', this.getValue() );\r
 167                                                                                                 }\r
 168                                                                                                 catch ( e )\r
 169                                                                                                 {\r
 170                                                                                                         clear();\r
 171                                                                                                 }\r
 172                                                                                         }\r
 173                                                                                 },\r
 174                                                                                 spacer(),\r
 175                                                                                 {\r
 176                                                                                         type : 'button',\r
 177                                                                                         id : 'clear',\r
 178                                                                                         style : 'margin-top: 5px',\r
 179                                                                                         label : lang.clear,\r
 180                                                                                         onClick : clear\r
 181                                                                                 }\r
 182                                                                         ]\r
 183                                                                 }\r
 184                                                         ]\r
 185                                                 }\r
 186                                         ]\r
 187                                 }\r
 188                         ]\r
 189                 };\r
 190         }\r
 191         );\r