j-Paper

Il componente modifica un documento come una serie di oggetti widget. collegare un percorso modello a quella serie, configurare il repository widget, e utilizzare autosave per scrivere le edizioni indietro al modello.

• La produzione è una semplice struttura Object Array:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Ristorante dei widget: https://github.com/totaljs/parts/tree/main/paper

Configurazione:

• readonly {Number} consente/disabilita la modalità readonly 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} opzionale, un elemento parentale per min-altezza (default: null)
• margin {Number} margine aggiuntiva per min-altezza (default: 0)
• I cambiamenti di autosave {Boolean} vengono serializzati in base al percorso automaticamente
• widgets {String} un collegamento ai widget (default: Componentator CDN)
  • può contenere più indirizzi divisi dal comma mywidget1.html,/mywidget2.html,etc..
  • o si può tenere Struttura del CDN
• icon {String} un collegamento al function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANT: chiama l'argomento callback se l'icona è stata modificata nell'elemento
• link {String} un collegamento al function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} per un widget
• command {String} un collegamento al function(cmd)
  • cmd.widget {Object}: un widget temporaneo
  • cmd.widgets {Array} un elenco di widget registrati
  • cmd.remove() {Function} rimuove il widget
  • cmd.append(name) sostituisce il widget temporaneo con un nuovo widget (nome del widget name)
• format {String} un collegamento al function(toolbar)
  • toolbar può essere null
  • toolbar.element {jQuery element} un elemento attuale
  • toolbar.node {HTML element} un elemento attuale
  • toolbar.widget {Object} per un widget
  • toolbar.style {Object} contiene uno stile attuale, ad esempio bold: 1, link: 1
• upload {String} un collegamento al function(opt, callback)
  • opt.accept {String} opzionale
  • opt.files {FileList} opzionale
  • opt.multiple {Boolean} opzionale, predefinito: false
  • opt.width {Number} opzionale
  • opt.height {Number} opzionale
  • Importante è: callback L'argomento deve essere eseguito dopo l'invio con il files {Array} Argomento
• change {String} un collegamento al function(change)
  • Il change.id {String}
  • change.block {String} un identificatore di blocco
  • change.blockprev {String} un identificatore di blocco precedente
  • change.widget {String} di un widget
  • Tipo di funzionamento change.type {String} (inserire, aggiornare, rimuovere)
• contextmenu {String} un collegamento al function(widget) quando l'utente ha premuto il pulsante del mouse destro sul widget
• check {String} un collegamento al function(widget) che decide se abilitare l'editing o meno
• placeholder {String} un locatore per il widget HTML predefinito (predefinita: Press / for adding rich content)

Metodi:

• component.save(function(data, ischange) { per risparmiare contenuti
• component.import(url or url_array, [callback]) per l'importazione di widget aggiuntivi
• component.notify(event, [a], [b], [c], [d]) emette eventi in ogni widget

Buono sapere:

Il componente crea una variabile globale chiamata window.papercache {Object} utilizzata da tutti i casi di j-Paper.

• il componente confronta il contenuto quando si cambiano i dati, in modo da poter modificare i dati in tempo reale
• Il componente assegna (in forma) la classe paper-yourwidgetname a ogni elemento widget
• Classi HTML riservati readonly, widget, selected
  • Utilizzo in linea: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} contiene un widget
  • Il metodo widget.remove() rimuoverà il widget

Scontri in testo Edit:

• CMD + m sottolinea il testo
• CMD + l crea un collegamento
• CMD + p aggiunge un'icona
• CMD + b Il coraggio
• CMD + i Italiano
• CMD + u sottolineato

Buono sapere:

• L'attribuzione [data-prevent] può prevenire l'evento cliccato nel widget

Utilizzo

<ui-component name="paper" path="form.widgets"
  config="autosave:true;widgets:/paper/db.json"></ui-component>
<script>
  SET('form.widgets', []);
  function saveDocument() {
    SETTER('paper/save', function(widgets) {
      console.log(widgets);
    });
  }
</script>

Servite l'indice widget su /paper/db.json e i suoi file widget dalla vostra applicazione.

La fonte: Componenti di Total.jsCopyright Peter Širka e contribuenti. La mia licenza.