Use CSS style for background color instead of attribut bgcolor.

action/toolbar.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * Cellbg Plugin table cell background color Functionality
+ *
+ * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ * @author     Pavel Kochman <[email protected]>
+ */
+// must be run within Dokuwiki
+if(!defined('DOKU_INC')) die();
+
+/**
+ * Class action_plugin_cellbg_toolbar
+ */
+class action_plugin_cellbg_toolbar extends DokuWiki_Action_Plugin {
+
+    /**
+     * Register event handlers.
+     *
+     * @param Doku_Event_Handler $controller The plugin controller
+     */
+    public function register(Doku_Event_Handler $controller) {
+        if($this->getConf('toolbar_icon')) $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'insert_toolbar_button', array ());
+    }
+
+    /**
+     * Inserts the cellbg toolbar button
+     */
+    function insert_toolbar_button(Doku_Event &$event, $param) {
+      $defaultColors = array( 'Yellow'    => 'yellow',
+                              'Red'       => 'red',
+                              'Orange'    => 'orange',
+                              'Salmon'    => 'salmon',
+                              'Pink'      => 'pink',
+                              'Plum'      => 'plum',
+                              'Purple'    => 'purple',
+                              'Fuchsia'   => 'fuchsia',
+                              'Silver'    => 'silver',
+                              'Aqua'      => 'aqua',
+                              'Teal'      => 'teal',
+                              'Cornflower'=> '#6495ed',
+                              'Sky Blue'  => 'skyblue',
+                              'Aquamarine'=> 'aquamarine',
+                              'Pale Green'=> 'palegreen',
+                              'Lime'      => 'lime',
+                              'Green'     => 'green',
+                              'Olive'     => 'olive'
+                            );
+      $custom_colors = array();
+      if($this->getConf('custom_colors'))
+      {
+          $custom_colors_lines = explode(DOKU_LF, $this->getConf('custom_colors'));
+          foreach ($custom_colors_lines as $line) {
+              list($colerName, $color) = explode('=', $line);
+              $custom_colors[$colerName] = $color;
+          }
+      }
+      $event->data[] = array (
+          'type' => 'CellbgPicker',
+          'title' => $this->getLang('toolbar_icon'),
+          'icon' => '../../plugins/cellbg/images/cellbg-toolbar.png',
+          'open' => '@#',
+          'colorlist' => array_merge($defaultColors, $custom_colors),
+          'sample' => 'RRGGBB',
+          'close' => ':'
+        );
+    }
+}

conf/default.php

@@ -0,0 +1,6 @@
+<?php
+/**
+ * Options for the Cellbg Plugin
+ */
+$conf['toolbar_icon']       = 0;         // enables/disables the toolbar icon
+$conf['custom_colors']      = array(''); // Custom colors to show in toolbar

conf/metadata.php

@@ -0,0 +1,10 @@
+<?php
+/**
+ * Metadata for configuration manager plugin
+ * Additions for the cellbg plugin
+ *
+ * @author    Pavel Kochman <[email protected]>
+ */
+
+$meta['toolbar_icon']       = array('onoff');
+$meta['custom_colors']      = array('');

lang/cs/lang.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Czech language file (UTF-8 encoding)
+ *
+ * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ * @author     Pavel Kochman <[email protected]>
+ */
+
+// custom language strings for the plugin
+$lang['toolbar_icon'] = 'Vložit Cellbg-Syntaxi';
+
+//Setup VIM: ex: et ts=2 enc=utf-8 :

lang/cs/settings.php

@@ -0,0 +1,11 @@
+<?php
+/**
+ * Czech language file (UTF-8 encoding)
+ *
+ * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ * @author     Pavel Kochman <[email protected]>
+ */
+
+// for the configuration manager
+$lang['toolbar_icon']   = 'Zobrazit toolbar ikonku (pokud se nezobrazuje, smažte data/cache/* a cache prohlížeče)';
+$lang['custom_colors']  = 'Uživatelsky definované barvy.<br/><span style="font-size:80%">Název barvy následován znakem = a textem barvy či kódu barvy.<br/><br/>Příklad:<br/><pre style="margin:0;padding:5px;font-size:100%;background:#c0c0c0;">Barva 1=green<br/>Barva 2=#002244</pre></span>';

lang/en/lang.php

@@ -0,0 +1,10 @@
+<?php
+/**
+ * English language file
+ *
+ * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ * @author     Pavel Kochman <[email protected]>
+ */
+
+// custom language strings for the plugin
+$lang['toolbar_icon'] = 'Insert Cellbg-Syntax';

lang/en/settings.php

@@ -0,0 +1,11 @@
+<?php
+/**
+ * English language file
+ *
+ * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ * @author     Pavel Kochman <[email protected]>
+ */
+
+// for the configuration manager
+$lang['toolbar_icon']   = 'Show toolbar icon (clear data/cache/* and browser cache if it\'s not displayed)';
+$lang['custom_colors']  = 'Custom colors definitions.<br/><span style="font-size:80%">The color name, followed by a an equals sign and a text color name or color code.<br/><br/>Example:<br/><pre style="margin:0;padding:5px;font-size:100%;background:#c0c0c0;">Color 1=green<br/>Color 2=#002244<br/>Color 2=#ABC</pre></span>';

script.js

@@ -1,112 +1,71 @@
 /* JavaScript function to create cellbg toolbar in DokuwKki */
-/* see http:// for more info */
-
-var plugin_cellbg_colors = {
-
-  "Yellow":      "yellow",
-  "Red":         "red",
-  "Orange":      "orange",
-  "Salmon":      "salmon",
-  "Pink":        "pink",
-  "Plum":        "plum",
-  "Purple":      "purple",
-  "Fuchsia":     "fuchsia",
-  "Silver":      "silver",
-  "Aqua":        "aqua",
-  "Teal":        "teal",
-  "Cornflower":  "#6495ed",
-  "Sky Blue":    "skyblue",
-  "Aquamarine":  "aquamarine",
-  "Pale Green":  "palegreen",
-  "Lime":        "lime",
-  "Green":       "green",
-  "Olive":       "olive"
-  //"Yellow":      "#ffff00",
-  //"Red":         "#ff0000",
-  //"Orange":      "#ffa500",
-  //"Salmon":      "#fa8072",
-  //"Pink":        "#ffc0cb",
-  //"Plum":        "#dda0dd",
-  //"Purple":      "#800080",
-  //"Fuchsia":     "#ff00ff",
-  //"Silver":      "#c0c0c0",
-  //"Aqua":        "#00ffff",
-  //"Teal":        "#008080",
-  //"Cornflower":  "#6495ed",
-  //"Sky Blue":    "#87ceeb",
-  //"Aquamarine":  "#7fffd4",
-  //"Pale Green":  "#98fb98",
-  //"Lime":        "#00ff00",
-  //"Green":       "#008000",
-  //"Olive":       "#808000"
-
-};
-
-function plugin_cellbg_make_color_button(name, value) {
-
-  var btn = document.createElement('button');
-
-  btn.className = 'pickerbutton';
-  btn.value = '';
-  btn.title = name;
-  btn.style.height = '2em';
-  btn.style.padding = '1em';
-  btn.style.backgroundColor = value;
-
-  var open = "@" + value + ":";
-  eval("btn.onclick = function(){ insertAtCarret( '"
-    + jsEscape('wiki__text') + "','"
-    + jsEscape(open) + "','"
-    + "'); return false; } "
-  );
-
-  return(btn);
-
-}
-
-function plugin_cellbg_toolbar_picker() {
-
-  if (!document.getElementById('spell__action')) return; 
+/* see https://www.dokuwiki.org/devel:toolbar for more info */
+
+function createCellbgPicker(id, props, edid) {
+    // create the wrapping div
+    var $picker = jQuery(document.createElement('div'));
+
+    $picker.addClass('picker a11y');
 
-  var toolbar = document.getElementById('tool__bar');
-  if (!toolbar) return;
-
-  // Create the picker button
-  var p_id = 'picker_plugin_cellbg'; // picker id that we're creating
-  var p_ico = document.createElement('img');
-  p_ico.src = DOKU_BASE + 'lib/plugins/cellbg/images/cellbg.png';
-  var p_btn = document.createElement('button');
-  p_btn.className = 'toolbutton';
-  p_btn.title = 'Cell background';
-  p_btn.appendChild(p_ico);
-  eval("p_btn.onclick = function() { showPicker('"
-    + p_id + "',this); return false; }");
-
-  // Create the picker <div>
-  var picker = document.createElement('div');
-  picker.className = 'picker';
-  picker.id = p_id;
-  picker.style.position = 'absolute';
-  picker.style.display = 'none';
-
-  // Add a button to the picker <div> for each of the colors
-  for( var color in plugin_cellbg_colors ) {
-    var btn = plugin_cellbg_make_color_button(color,
-        plugin_cellbg_colors[color]);
-    picker.appendChild(btn);
-  }
-  if (typeof user_cellbg_colors != 'undefined') {
-    for( var color in user_cellbg_colors ) {
-      var btn = plugin_cellbg_make_color_button(color,
-          user_cellbg_colors[color]);
-      picker.appendChild(btn);
+    $picker.attr('id', id).css('position', 'absolute');
+
+    function $makebutton(title, colorValue) {
+        var $btn = jQuery(document.createElement('button'))
+            .addClass('pickerbutton cellbg').attr('title', title)
+            .attr('aria-controls', edid);
+
+        if (colorValue == 'RGB')
+        {
+            $btn.text(colorValue)
+                .addClass('custom')
+                .bind('click', bind(tb_format, $btn[0], props, edid));
+        }
+        else
+        {
+            var insertColorValue = "@" + colorValue + ":";
+            $btn.css('backgroundColor', colorValue)
+                .bind('click', bind(pickerInsert, insertColorValue, edid));
+        }
+        $btn.appendTo($picker);
+        return $btn;
     }
-  }
-
-  var body = document.getElementsByTagName('body')[0];
-  body.appendChild(picker);     // attach the picker <div> to the page body
-  toolbar.appendChild(p_btn);   // attach the picker button to the toolbar
+
+    $makebutton('custom', 'RGB');
+    jQuery.each(props.colorlist, function (key, item) {
+        if (!props.colorlist.hasOwnProperty(key)) {
+            return;
+        }
+        $makebutton(key, item);
+    });
+    jQuery('body').append($picker);
+
+    // we have to return a DOM object (for compatibility reasons)
+    return $picker[0];
+}
+
+/**
+ * Add button action for color picker buttons and create color picker element
+ *
+ * @param  jQuery     btn   Button element to add the action to
+ * @param  array      props Associative array of button properties
+ * @param  string     edid  ID of the editor textarea
+ * @return boolean    If button should be appended
+ * @author Pavel Kochman <[email protected]>
+ */
+function addBtnActionCellbgPicker($btn, props, edid) {
+    var pickerid = 'picker_plugin_cellbg'; // picker id that we're creating
+    var picker = createCellbgPicker(pickerid, props, edid);
+
+    $btn.click(
+        function(e) {
+            pickerToggle(pickerid, $btn);
+            e.preventDefault();
+            return '';
+        }
+    );
+    $btn.attr('aria-haspopup', 'true');
+
+    return pickerid;
 }
-jQuery(plugin_cellbg_toolbar_picker);
-
+
 //Setup VIM: ex: et ts=2 sw=2 enc=utf-8 :

style.css

@@ -0,0 +1,23 @@
+div.picker button.pickerbutton.cellbg
+{
+  height: 2em;
+  width: 2em;
+  line-height: 2em;
+  padding: 1em;
+  background-image: none;
+  background-image: url("images/gradient.png");
+}
+div.picker button.pickerbutton.cellbg:first-child
+{
+  width: 4em;
+  display: inline-block;
+  padding: 0;
+}
+div.picker button.pickerbutton.cellbg:hover
+{
+  background-image: none;
+}
+#picker_plugin_cellbg
+{
+  width: 10em;
+}