Questo codice sostituisce la cartella colori del forum con un'altra che ha lo stesso aspetto ma ha una caratteristica in più: gli ultimi colori che hai scelto sono memorizzati nella cache.
Con un nuovo pulsante BBCode puoi ottenere questi colori, così non devi trovarli ogni volta.
Testato su phpBB2 , phpBB3 , PunBB , Invision e modernBB
Installazione JavascriptAndiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicurati che la gestione del codice Javascript sia attivata, e creiamo un nuovo codice con queste impostazioni:
- Titolo: a tua scelta
- Dove: in tutte le pagine
- Codice:
- Codice:
/*
* -- 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));
};
Codice di stile CSSAndiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo questo codice, secondo la versione:
phpBB2, phpBB3, PunBB, Invision- Codice:
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- Codice:
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;
}
|
Indice
Colori usanti di recente nell'editor
Da Niko Lun 1 Nov 2021 - 15:43
Argomenti simili
Facebook
Twitter
Youtube
