RM_31385_formating_toolbar_color_tools_SVN.diff

Jérôme BATAILLE, 2019-05-21 01:33

Download (6.25 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 + '}', '%', function(str, prefix, suffix) {
208
          css_tag_start = str.indexOf('%{');
209
          css_tag_end = str.indexOf('}');
210

  
211
          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
212
            // Already present, replace color
213
            bgcolor_tag = str.indexOf('background-color:');
214
            if (bgcolor_tag != -1) {
215
              str = str.replace(/(\%\{background\-color\:[A-Za-z1-9#]*)/g, prefix.slice(0, -1));
216
            } else {
217
              // Insert bgcolor tag before the others
218
              new_bgcolor_tag = prefix.substring(2).slice(0, -1);
219
              end_str = str.substring(css_tag_start + 2)
220
              begin_str = str.substring(0, css_tag_start + 2);
221
              str = begin_str + new_bgcolor_tag + ';' + end_str;
222
            }
223
          } else {
224
            str = prefix + str + suffix;
225
          }
226

  
227
          return str;
228
        });
229
      });
230
    }
231
  }
232
}
233

  
234
// Selection Color
235
jsToolBar.prototype.elements.color = {
236
  type: 'button',
237
  title: 'Text Color',
238
  fn: {
239
    wiki: function() {
240
      var This = this;
241
      this.colorsMenu(function(color){
242
        This.encloseSelection('%{color:' + color + '}', '%', function(str, prefix, suffix) {
243
          css_tag_start = str.indexOf('%{');
244
          css_tag_end = str.indexOf('}');
245

  
246
          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
247
            // Already present, replace color
248
            color_tag = str.indexOf('%{color:');
249
            color_tag2 = str.indexOf(';color:');
250
            if (color_tag != -1) {
251
              str = str.replace(/(\%\{color\:[A-Za-z1-9#]*)/g, prefix.slice(0, -1));
252
            } else if (color_tag2 != -1) {
253
              new_color_tag = ';' + prefix.substring(2).slice(0, -1);
254
              str = str.replace(/(;color\:[A-Za-z1-9#]*)/g, new_color_tag);
255
            } else {
256
              // Insert color tag before the others
257
              new_color_tag = prefix.substring(2).slice(0, -1);
258
              end_str = str.substring(css_tag_start + 2)
259
              begin_str = str.substring(0, css_tag_start + 2);
260
              str = begin_str + new_color_tag + ';' + end_str;
261
            }
262
          } else {
263
            str = prefix + str + suffix;
264
          }
265

  
266
          return str;
267
        });
268
      });
269
    }
270
  }
271
}
272

  
273
// spacer
274
jsToolBar.prototype.elements.space4 = {type: 'space'}
275

  
199 276
// wiki page
200 277
jsToolBar.prototype.elements.link = {
201 278
  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
}