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