RM_31385_formating_toolbar_color_tools_SVN.diff

Jérôme BATAILLE, 2019-05-18 14:49

Download (4.3 KB)

View differences:

public/javascripts/jstoolbar/jstoolbar.js
471 471
  });
472 472
  return false;
473 473
};
474

  
475
/* Colors menu */
476
jsToolBar.prototype.colorsMenu = function(fn){
477
  var aColors = [
478
    ['#330000','#331900','#333300','#193300','#003300','#003319','#003333','#001933','#000033','#190033','#330033','#330019','#000000'],
479
    ['#660000','#663300','#666600','#336600','#006600','#006633','#006666','#003366','#000066','#330066','#660066','#660033','#202020'],
480
    ['#990000','#994C00','#999900','#4C9900','#009900','#00994C','#009999','#004C99','#000099','#4C0099','#990099','#99004C','#404040'],
481
    ['#CC0000','#CC6600','#CCCC00','#66CC00','#00CC00','#00CC66','#00CCCC','#0066CC','#0000CC','#6600CC','#CC00CC','#CC0066','#606060'],
482
    ['#FF0000','#FF8000','#FFFF00','#80FF00','#00FF00','#00FF80','#00FFFF','#0080FF','#0000FF','#7F00FF','#FF00FF','#FF007F','#808080'],
483
    ['#FF3333','#FF9933','#FFFF33','#99FF33','#33FF33','#33FF99','#33FFFF','#3399FF','#3333FF','#9933FF','#FF33FF','#FF3399','#A0A0A0'],
484
    ['#FF6666','#FFB266','#FFFF66','#B2FF66','#66FF66','#66FFB2','#66FFFF','#66B2FF','#6666FF','#B266FF','#FF66FF','#FF66B2','#C0C0C0'],
485
    ['#FF9999','#FFCC99','#FFFF99','#CCFF99','#99FF99','#99FFCC','#99FFFF','#99CCFF','#9999FF','#CC99FF','#FF99FF','#FF99CC','#E0E0E0'],
486
    ['#FFCCCC','#FFE5CC','#FFFFCC','#E5FFCC','#CCFFCC','#CCFFE5','#CCFFFF','#CCE5FF','#CCCCFF','#E5CCFF','#FFCCFF','#FFCCE5','#FFFFFF']
487
  ];
488
  var menu = $('<table style="position:absolute"></table>');
489
  var alColors = '';
490
  var line;
491
  var cell;
492
  for (var i = 0; i < aColors.length; i++) {
493
    alColors = aColors[i];
494
    line = $('<tr></tr>').appendTo(menu);
495
    for (var j = 0; j < alColors.length; j++) {
496
      cell = $('<td style="background: ' + alColors[j] + '" data-color="' + alColors[j] + '" class="palette"></td>');
497
      cell.appendTo(line);
498
      cell.mouseover(function(){
499
          $(this).addClass('palette-hover');
500
        }).mouseout(function(){
501
          $(this).removeClass('palette-hover');
502
        }).mousedown(function(){
503
          fn($(this).data('color'));
504
        });
505
    }
506
  }
507
  $("body").append(menu);
508
  menu.menu().width(150).position({
509
    my: "left top",
510
    at: "left bottom",
511
    of: this.toolNodes['precode']
512
  });
513
  $(document).on("mousedown", function() {
514
    menu.remove();
515
  });
516
  return false;
517
};
public/javascripts/jstoolbar/textile.js
196 196
// spacer
197 197
jsToolBar.prototype.elements.space4 = {type: 'space'}
198 198

  
199
// Selection Background Color
200
jsToolBar.prototype.elements.bgcolor = {
201
  type: 'button',
202
  title: 'Background Color',
203
  fn: {
204
    wiki: function() {
205
      var This = this;
206
      this.colorsMenu(function(color){
207
        This.encloseSelection('%{background-color:' + color + '}', '%');
208
      });
209
    }
210
  }
211
}
212

  
213
// Selection Color
214
jsToolBar.prototype.elements.color = {
215
  type: 'button',
216
  title: 'Text Color',
217
  fn: {
218
    wiki: function() {
219
      var This = this;
220
      this.colorsMenu(function(color){
221
        This.encloseSelection('%{color:' + color + '}', '%');
222
      });
223
    }
224
  }
225
}
226

  
227
// spacer
228
jsToolBar.prototype.elements.space4 = {type: 'space'}
229

  
199 230
// wiki page
200 231
jsToolBar.prototype.elements.link = {
201 232
  type: 'button',
public/stylesheets/jstoolbar.css
124 124
.jstb_precode {
125 125
    background-image: url(../images/jstoolbar/bt_precode.png);
126 126
}
127
.jstb_color {
128
    background-image: url(../images/jstoolbar/bt_color.png);
129
}
130
.jstb_bgcolor {
131
    background-image: url(../images/jstoolbar/bt_bgcolor.png);
132
}
127 133
.jstb_link {
128 134
    background-image: url(../images/jstoolbar/bt_link.png);
129 135
}
......
133 139
.jstb_help {
134 140
    background-image: url(../images/help.png);
135 141
}
142

  
143
table.ui-widget-content td.palette {
144
    width: 12px;
145
    height: 8px;
146
}
147

  
148
table.ui-widget-content td.palette-hover {
149
    border: 2px solid;
150
}