Recent colors chart
4 posters
Page 1 of 1
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.
I tested it only on phpBB2, phpBB3, PunBB, Invision and modernBB.
1) Insert this Javascript with the placement 'In all pages' ticked
2) Add this in your CSS
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- Forumember
-
Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Recent colors chart
So if you click the button after you click it the first time, the second click will only show the last colors you used?
![](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![Recent colors chart Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Recent colors chart
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](https://2img.net/i/fa/i/smiles/icon_scratch.png)
Wecoc- Forumember
-
Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Recent colors chart
Also clearing your browser's cache and history.
![](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![Recent colors chart Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Recent colors chart
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 idea and execution. Maybe I'll use this at some point
![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
Guest- Guest
Re: Recent colors chart
Good job
you should really test it on all forums to make sure it works for everyone.
![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif)
Re: Recent colors chart
Not bad, thanks for sharing and like ape said, you should create it for the all versiones ^^
Re: Recent colors chart
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- Forumember
-
Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum