LayerConfigurator Widget

Standard sintax

    <div class="layerConfigurator" data-lcSelect="on | off">
      <canvas class="lcCanvas" width="400" height="400" data-lcImgInit="img/livello-0.jpg"></canvas> 
        
      <div class="lcLayer" data-lcN="1">
        <span class="layerItem" data-lcItemVal="0">
          Annulla
        </span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-01.png">
          Sfondo 1
        </span>
        <!-- ... -->

        <select class="layerSelect">
          <option value="0">-- Seleziona sfondo --</option>
          <option value="img/layers/sfondo-01.png">sfondo 1</option>
          <!-- ... -->
        </select>
      </div>
      <!-- ... -->

      <input type="text" class="lcText" data-lcTextX="canvas x" data-lcTextY="canvas y" data-lcFillStyle="#color" data-lcTextFont="font" />
      <!-- ... -->

      <input type="hidden" class="lcDataUrl" />
    </div>
  

Il LayerConfigurator widget è uno strumento per la configurazione di livelli di immagini (png) che permette la realizzazione di un'immagine finale in un elemento canvas. Possono essere inseriti livelli a piacimento comprensivi di un numero ipoteticamente infinito di possibilità.
Il configuratore può essere utile, ad esempio, per la realizziazione di prodotti personalizzati in un e-commerce dove magari la colorazione di un tessuto, o di parti di esso, possono dipendere dalle scelte dell'utente o per altre applicazioni dove diventano determinanti tali scelte per la composizione del prodotto finito.

Il widget necessita che all'interno del div con classe layerConfigurator sia presente l'elemento canvas e una serie di div con classe lcLayer che rappresentano ogni singolo livello che a loro volta avranno all'interno un elemento select contenente le scelte del livello corrente.
Gli elementi span con classe layerItem sono opzionali e possono contenete un testo o delle anteprime (o quello che si preferisce) cliccabili.

L'elemento select oltre ad essere obbligatorio per il funzionamento del widget può essere utilizzato come elemento di un form qualora si voglano inviare al server le scelte fatte dall'utente o per ulteriori manipolazioni JavaScript, in più deve avere come valore le url delle immagini che compongono le scelte per quel livello stessa cosa vale per gli elementi span (anteprima o selettori) che avranno la stringa della url dell'immagine inserita come valore della proprietà data-lcItemVal (chiaramente dovranno essere corrispondenti).

Le intere opzioni di un livello sono contenute nel div con classe lcLayer che dovrà avere una proprietà data-lcN che identifica, con un valore numerico, l'ordinamento per quel livello, questo è utile perché l'ordine dei livelli non è dato dalla loro posizione nella stesura dell'html ma per esigenze grafiche si potrebbe posizionare le scelte di livello dove si vuole ma pursempre all'interno del div contenitore del widget con classe layerConfigurator.

È possibile inserire all'interno del widget degli input di tipo text con classe lcText e con le relative proprietà per il posizionamento del testo, come da esempio, per poter inserire del testo personalizzato in uno o più punti del canvas.

All'interno del div contenitore del widget può essere incluso un input di tipo hidden che conterrà la striga in base64 dell'immagine generata con l'elemento canvas che manipolata correttamente può essere inviata al server per il salvataggio.

Alle select e all'input possono essere inserite le proprietà name e id a piacimento in base alle esigenze. Inoltre gli elementi select possono essere nascosti impostando la proprietà data-lcSelect al valore off qualora si vogliano usare solo gli elementi cliccabili con classe layerItem.

    <div class="layerConfigurator" data-lcSelect="on">
      <canvas class="lcCanvas" width="400" height="400" data-lcImgInit="img/layers/livello-0.jpg"></canvas> 

      <div class="lcLayer" data-lcN="1">
        <span>Livello 1</span>

        <span class="layerItem" data-lcItemVal="0">Annulla</span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-01.png">Sfondo 1</span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-02.png">Sfondo 2</span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-03.png">Sfondo 3</span>

        <select class="layerSelect">
          <option value="0">-- Seleziona sfondo --</option>
          <option value="img/layers/sfondo-01.png">sfondo 1</option>
          <option value="img/layers/sfondo-02.png">sfondo 2</option>
          <option value="img/layers/sfondo-03.png">sfondo 3</option>
        </select>
      </div>

      <div class="lcLayer" data-lcN="2">
        <span>Livello 2</span>

        <span class="layerItem" data-lcItemVal="img/layers/bint-01.png">bint 1</span>
        <span class="layerItem" data-lcItemVal="img/layers/bint-02.png">bint 2</span>
        <span class="layerItem" data-lcItemVal="img/layers/bint-03.png">bint 3</span>

        <select class="layerSelect">
          <option value="0">-- Seleziona bordo interno --</option>
          <option value="img/layers/bint-01.png">bint 1</option>
          <option value="img/layers/bint-02.png">bint 2</option>
          <option value="img/layers/bint-03.png">bint 3</option>
        </select>
      </div>

      <div class="lcLayer" data-lcN="3">
        <span>Livello 3</span>

        <select class="layerSelect">
          <option value="0">-- Seleziona bordo --</option>
          <option value="img/layers/bordo-01.png">bordo 1</option>
          <option value="img/layers/bordo-02.png">bordo 2</option>
          <option value="img/layers/bordo-03.png">bordo 3</option>
        </select>
      </div>

      <input type="text" class="lcText" data-lcTextX="50" data-lcTextY="250" data-lcFillStyle="#000" data-lcTextFont="italic 20px Roboto" maxlength="30" />

      <input type="hidden" class="lcDataUrl" />
    </div>