Recent colors chart

Go down

Recent colors chart

Post by Wecoc on February 28th 2018, 7:29 pm

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;
}


Last edited by Wecoc on March 1st 2018, 10:26 pm; edited 1 time in total
avatar
Wecoc
Forumember

Male Posts : 135
Reputation : 95
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: Recent colors chart

Post by SLGray on February 28th 2018, 7:49 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3125
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: Recent colors chart

Post by Wecoc on February 28th 2018, 7:59 pm

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 scratch
avatar
Wecoc
Forumember

Male Posts : 135
Reputation : 95
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: Recent colors chart

Post by SLGray on February 28th 2018, 8:01 pm

Also clearing your browser's cache and history.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3125
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: Recent colors chart

Post by mpelmmc on February 28th 2018, 8:09 pm

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 Smile.
avatar
mpelmmc
Support Moderator
Support Moderator

Male Posts : 676
Reputation : 103
Language : English and Spanish

http://asistencia.foroactivo.com/forum

Back to top Go down

Re: Recent colors chart

Post by APE on March 1st 2018, 11:25 am

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



avatar
APE
Administrator
Administrator

Male Posts : 12728
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Recent colors chart

Post by YoshiGM on March 1st 2018, 9:09 pm

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

Male Posts : 746
Reputation : 106
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: Recent colors chart

Post by Wecoc on March 1st 2018, 10:30 pm

@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.
avatar
Wecoc
Forumember

Male Posts : 135
Reputation : 95
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum