Recent colors chart

I made this code for my forum using some forumotion tutorials as reference, maybe someone will find it useful.
I'm not an expert so I'm pretty sure it can be improved in some ways, but it's working fine for me.

This code replaces the color chart of the forum with another one which looks the same but has an extra feature: The last colors you picked are stored in cache.
With a new BBCode button you can get these colors, so you don't have to find them every time.

Example:

I tested it only on phpBB2, phpBB3, PunBB, Invision and modernBB.

1) Insert this Javascript with the placement 'In all pages' ticked

Code:

/*
* -- Temp Colors --
* Version: 1.0 EN (2017-09-05)
* Author: Wecoc
* References: Font Awesome & Insert new BBCode buttons (Tutorial)
* Description: Adds a new BBCode with the last used colors
*/

// Colors are being treated same way as Font Awesome icons

$(function(){
  if (!$.sceditor) return;
  var autoClose = 1; // closes drop down after an icon is clicked, if enabled
  // icon list
  var color_array = 6 * 6 * 6;
  // create sceditor button and drop down (color)
  // this part rewrites the basic color chart
  $.sceditor.command.set('color', {
    dropDown : function(editor, caller, callback) {
      var a, color, b = '', c = document.createElement('DIV'), i = 0, ix, iy, iz;
      var data = ['00', '33', '66', '99', 'cc', 'ff'];
      for (i; i < color_array; i++) {
        ix = (i % 6); iy = (Math.floor(i / 6) % 6); iz = (Math.floor(Math.floor(i / 6) / 6) % 6);
        color = "#" + data[5-ix] + data[5-iz] + data[5-iy];
        b += '<a href="javascript:void(0)" class="sceditor-color-option" style="display:inline-block; background-color: ' +
          color + '" data-color="' + color + '" title="' + color + '" unselectable="on"></a>'
      }
      c.innerHTML = b;
      var i, j;
      for (a = c.getElementsByClassName("sceditor-color-option"), i = 0, j = a.length; i<j; i++) {
        a[i].onclick = function() {
          callback(this.title);
          autoClose && editor.closeDropDown(true);
          return false;
        };
      }
      editor.createDropDown(caller, 'color', c);
    },
 
    // wysiwyg
    exec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
   
    // source
    txtExec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
    tooltip : 'Color'
  });
 
  // create sceditor button and drop down (color-temp)
  $.sceditor.command.set('color-temp', {
    dropDown : function(editor, caller, callback) {
      var a, color, b = '', c = document.createElement('DIV'), i = 0;
      for (i; i < 6; i++) {
        var ary = localStorage.getObj("color_temp");
        if (!ary) { return false };
        color = ary[i];
        if (color) {
          b += '<a href="javascript:void(0)" class="sceditor-color-option" style="display:inline-block; background-color: ' +
            color + '" data-color="' + color + '" title="' + color + '" unselectable="on"></a>'
        }
      }
      c.innerHTML = b;
      var i, j;
      for (a = c.getElementsByClassName("sceditor-color-option"), i = 0, j = a.length; i<j; i++) {
        a[i].onclick = function() {
          callback(this.title);
          autoClose && editor.closeDropDown(true);
          return false;
        };
      }
      editor.createDropDown(caller, 'color-temp', c);
    },
 
    // wysiwyg
    exec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color-temp').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
   
    // source
    txtExec : function(caller) {
      var editor = this;
      $.sceditor.command.get('color-temp').dropDown(editor, caller, function (color) {
        editor.insert('[color=' + color + ']', '[/color]', true, true, true);
        SaveColorCache(color);
      });
    },
    tooltip : 'Recent color'
  });
 
  toolbar = toolbar.replace(/color,/,'color,color-temp,'); // add the button to the toolbar
 
  var color_stored_length = 10; // change here the length of the stored data
 
  // Save color data to the Cache
  function SaveColorCache(color) {
    var ary = localStorage.getObj("color_temp");
    if (!ary) { ary = [] };
    console.log(ary);
    var index = ary.indexOf(color);
    if (index >= 0) { ary.splice( index, 1 ) };
    ary.unshift(color);
    if (ary.length > color_stored_length) { ary.length = color_stored_length };
    localStorage.setObj("color_temp", ary);
  };
});

Storage.prototype.setObj = function(key, obj) {
  return this.setItem(key, JSON.stringify(obj));
};
Storage.prototype.getObj = function(key) {
  return JSON.parse(this.getItem(key));
};

2) Add this in your CSS

phpBB2, phpBB3, PunBB, Invision

Code:

div.sceditor-dropdown.sceditor-color, div.sceditor-dropdown.sceditor-color-temp {
  width: 66px;
  padding: 0px;
}

.sceditor-color-option{
  height:9px !important;
  width:9px !important;
}

.sceditor-button-color-temp div {
  background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/color_10.png) !important;
}

modernBB

Code:

div.sceditor-dropdown.sceditor-color, div.sceditor-dropdown.sceditor-color-temp {
  width: 66px;
  padding: 0px;
}

.sceditor-button-color-temp div {
  background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/color_10.png) !important;
}

So if you click the button after you click it the first time, the second click will only show the last colors you used?

So if you click the button after you click it the first time, the second click will only show the last colors you used?

Yes, that's basically what it does.
Every time you pick a color on the "Colors" chart or the new "Recent Colors" chart, it's sorted and saved in the cache so it will appear the first in the "Recent Colors" one.
If you pick a color which was already on the list it will not appear duplicated. Also, it only shows and stores the last 6 unique colors, but you could edit the code to add more.

Every user has its own stored list.

You can log out and log back in and the list will remain, the only way to clear it is using the "Delete the forum cookies" option, at least that's what I think

Also clearing your browser's cache and history.

Thanks for sharing. I think this could be very useful in certain forums (if not in all) because users tend to use the same colors over and over, and they have to search them every time they want to make use of them.

Good idea and execution. Maybe I'll use this at some point .

Good job you should really test it on all forums to make sure it works for everyone.

Not bad, thanks for sharing and like ape said, you should create it for the all versiones ^^

SLGray wrote:Also clearing your browser's cache and history.

Yes, you are right.

APE wrote:you should really test it on all forums to make sure it works for everyone

Done. Only a little modification in the CSS for modernBB was needed.