Colori usanti di recente nell'editor


Tutorial Colori usanti di recente nell'editor

Messaggio Da Niko Lun 1 Nov 2021 - 15:43

Colori usanti di recente nell'editor


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.

Colori usanti di recente nell'editor Temp_c11

Testato su phpBB2 , phpBB3 , PunBB , Invision e modernBB

Installazione Javascript

Andiamo 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 CSS

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

Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8923
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.