Redmine

/* Colors menu */

jsToolBar.prototype.colorsMenu = function(fn){

  var aColors = [

    ['#330000','#331900','#333300','#193300','#003300','#003319','#003333','#001933','#000033','#190033','#330033','#330019','#000000'],

    ['#660000','#663300','#666600','#336600','#006600','#006633','#006666','#003366','#000066','#330066','#660066','#660033','#202020'],

    ['#990000','#994C00','#999900','#4C9900','#009900','#00994C','#009999','#004C99','#000099','#4C0099','#990099','#99004C','#404040'],

    ['#CC0000','#CC6600','#CCCC00','#66CC00','#00CC00','#00CC66','#00CCCC','#0066CC','#0000CC','#6600CC','#CC00CC','#CC0066','#606060'],

    ['#FF0000','#FF8000','#FFFF00','#80FF00','#00FF00','#00FF80','#00FFFF','#0080FF','#0000FF','#7F00FF','#FF00FF','#FF007F','#808080'],

    ['#FF3333','#FF9933','#FFFF33','#99FF33','#33FF33','#33FF99','#33FFFF','#3399FF','#3333FF','#9933FF','#FF33FF','#FF3399','#A0A0A0'],

    ['#FF6666','#FFB266','#FFFF66','#B2FF66','#66FF66','#66FFB2','#66FFFF','#66B2FF','#6666FF','#B266FF','#FF66FF','#FF66B2','#C0C0C0'],

    ['#FF9999','#FFCC99','#FFFF99','#CCFF99','#99FF99','#99FFCC','#99FFFF','#99CCFF','#9999FF','#CC99FF','#FF99FF','#FF99CC','#E0E0E0'],

    ['#FFCCCC','#FFE5CC','#FFFFCC','#E5FFCC','#CCFFCC','#CCFFE5','#CCFFFF','#CCE5FF','#CCCCFF','#E5CCFF','#FFCCFF','#FFCCE5','#FFFFFF']

  ];

  var menu = $('<table style="position:absolute"></table>');

  var alColors = '';

  var line;

  var cell;

  for (var i = 0; i < aColors.length; i++) {

    alColors = aColors[i];

    line = $('<tr></tr>').appendTo(menu);

    for (var j = 0; j < alColors.length; j++) {

      cell = $('<td style="background: ' + alColors[j] + '" data-color="' + alColors[j] + '" class="palette"></td>');

      cell.appendTo(line);

      cell.mouseover(function(){

          $(this).addClass('palette-hover');

        }).mouseout(function(){

          $(this).removeClass('palette-hover');

        }).mousedown(function(){

          fn($(this).data('color'));

        });

    }

  }

  $("body").append(menu);

  menu.menu().width(150).position({

    my: "left top",

    at: "left bottom",

    of: this.toolNodes['precode']

  });

  $(document).on("mousedown", function() {

    menu.remove();

  });

  return false;

};

.jstb_color {

    background-image: url(../images/jstoolbar/bt_color.png);

}

.jstb_bgcolor {

    background-image: url(../images/jstoolbar/bt_bgcolor.png);

}

table.ui-widget-content td.palette {

    width: 12px;

    height: 8px;

}

table.ui-widget-content td.palette-hover {

    border: 2px solid;

}

// Selection Background Color

jsToolBar.prototype.elements.bgcolor = {

  type: 'button',

  title: 'Background Color',

  fn: {

    wiki: function() {

      var This = this;

      this.colorsMenu(function(color){

        This.encloseSelection('%{background-color:' + color + '}', '%', function(str, prefix, suffix) {

          css_tag_start = str.indexOf('%{');

          css_tag_end = str.indexOf('}');

          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {

            // space added by encloseSelection

            if (prefix.charAt(0) == ' ') {

              prefix = prefix.substring(1);

            }

            // Already present, replace color

            bgcolor_tag = str.indexOf('%{background-color:');

            bgcolor_tag2 = str.indexOf(';background-color:');

            if (bgcolor_tag != -1) {

              str = str.replace(/(\%\{background-color\:[A-Za-z0-9#]*)/g, prefix.slice(0, -1));

            } else if (bgcolor_tag2 != -1) {

              new_bgcolor_tag = ';' + prefix.substring(2).slice(0, -1);

              str = str.replace(/(;background-color\:[A-Za-z0-9#]*)/g, new_bgcolor_tag);

            } else {

              // Insert bgcolor tag before the others

              new_bgcolor_tag = prefix.substring(2).slice(0, -1);

              end_str = str.substring(css_tag_start + 2)

              begin_str = str.substring(0, css_tag_start + 2);

              str = begin_str + new_bgcolor_tag + ';' + end_str;

            }

          } else {

            str = prefix + str + suffix;

          }

          return str;

        });

      });

    }

  }

}

// Selection Color

jsToolBar.prototype.elements.color = {

  type: 'button',

  title: 'Text Color',

  fn: {

    wiki: function() {

      var This = this;

      this.colorsMenu(function(color){

        This.encloseSelection('%{color:' + color + '}', '%', function(str, prefix, suffix) {

          css_tag_start = str.indexOf('%{');

          css_tag_end = str.indexOf('}');

          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {

            // space added by encloseSelection

            if (prefix.charAt(0) == ' ') {

              prefix = prefix.substring(1);

            }

            // Already present, replace color

            color_tag = str.indexOf('%{color:');

            color_tag2 = str.indexOf(';color:');

            if (color_tag != -1) {

              str = str.replace(/(\%\{color\:[A-Za-z0-9#]*)/g, prefix.slice(0, -1));

            } else if (color_tag2 != -1) {

              new_color_tag = ';' + prefix.substring(2).slice(0, -1);

              str = str.replace(/(;color\:[A-Za-z0-9#]*)/g, new_color_tag);

            } else {

              // Insert color tag before the others

              new_color_tag = prefix.substring(2).slice(0, -1);

              end_str = str.substring(css_tag_start + 2)

              begin_str = str.substring(0, css_tag_start + 2);

              str = begin_str + new_color_tag + ';' + end_str;

            }

          } else {

            str = prefix + str + suffix;

          }

          return str;

        });

      });

    }

  }

}

// spacer

jsToolBar.prototype.elements.space4 = {type: 'space'}