The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Recent colors chart

5 posters

Go down

Recent colors chart Empty Recent colors chart

Post by Wecoc 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
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

Post by SLGray 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?


Recent colors chart Slgray10

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

Male Posts : 51515
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

Post by Wecoc 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
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

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

Also clearing your browser's cache and history.


Recent colors chart Slgray10

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

Male Posts : 51515
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

Post by mpelmmc 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.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1092
Reputation : 170
Language : English and Spanish

https://help.forumotion.com/

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

Post by Ape March 1st 2018, 11:25 am

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


Recent colors chart Left1212Recent colors chart Center11Recent colors chart Right112
Recent colors chart Ape_b110
Recent colors chart Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19170
Reputation : 1995
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

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

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

Male Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Recent colors chart Empty Re: Recent colors chart

Post by Wecoc 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.
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

Back to top

- Similar topics

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