j-Paper

Komponent upravuje dokument ako pole objektov widgetu. Naviažte cestu modelu k tomuto poľu, nakonfigurujte archív miniaplikácií a použite automatické ukladanie na zapisovanie úprav späť do modelu.

• výstupom je jednoduchá štruktúra Object Array:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• úložisko widgetov: https://github.com/totaljs/parts/tree/main/paper

Konfigurácia:

• readonly {Number} zapína/vypína režim len na čítanie 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} voliteľné, nadradený prvok pre minimálnu výšku (predvolené: null)
• margin {Number} dodatočná rezerva pre minimálnu výšku (predvolené: 0)
• Zmeny autosave {Boolean} sa serializujú podľa cesty automaticky
• widgets {String} odkaz na miniaplikácie (predvolené: Componentator CDN)
  • môže obsahovať viacero adries oddelených čiarkou mywidget1.html,/mywidget2.html,etc..
  • alebo si môžete ponechať štruktúru CDN
• icon {String} odkaz na function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANT: zavolajte argument callback, ak bola ikona v prvku zmenená
• link {String} odkaz na function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} inštancia miniaplikácie
• command {String} odkaz na function(cmd)
  • cmd.widget {Object} dočasná inštancia widgetu
  • cmd.widgets {Array} zoznam zaregistrovaných widgetov
  • cmd.remove() {Function} odstráni miniaplikáciu
  • cmd.append(name) nahradí aktuálny dočasný widget novým widgetom (name názov widgetu)
• format {String} odkaz na function(toolbar)
  • toolbar môže byť null
  • toolbar.element {jQuery element} prúdový prvok
  • toolbar.node {HTML element} prúdový prvok
  • toolbar.widget {Object} inštancia miniaplikácie
  • toolbar.style {Object} obsahuje aktuálny štýl napr. bold: 1, link: 1
• upload {String} odkaz na function(opt, callback)
  • opt.accept {String} voliteľné
  • opt.files {FileList} voliteľné
  • opt.multiple {Boolean} voliteľné, predvolené: false
  • opt.width {Number} voliteľné
  • opt.height {Number} voliteľné
  • DÔLEŽITÉ: Argument callback sa musí vykonať po odovzdaní s argumentom files {Array}
• change {String} odkaz na function(change)
  • Identifikátor change.id {String}
  • change.block {String} identifikátor bloku
  • change.blockprev {String} predchádzajúci identifikátor bloku
  • change.widget {String} ID miniaplikácie
  • Typ operácie change.type {String} (vložiť, aktualizovať, odstrániť)
• contextmenu {String} odkaz na function(widget), keď používateľ stlačil pravé tlačidlo myši na miniaplikácii
• check {String} odkaz na function(widget), ktorý rozhoduje, či povoliť úpravy alebo nie
• placeholder {String} zástupný symbol pre predvolenú miniaplikáciu HTML (predvolené: Press / for adding rich content)

Metódy:

• component.save(function(data, ischange) { na ukladanie obsahu
• component.import(url or url_array, [callback]) na import ďalších miniaplikácií
• component.notify(event, [a], [b], [c], [d]) vydáva udalosť v každom widgete

Je dobré vedieť:

Komponent vytvára globálnu premennú s názvom window.papercache {Object}, ktorú používajú všetky inštancie j-Paper.

• komponent porovnáva obsah pri zmene údajov, takže údaje môžete meniť v reálnom čase
• komponent priraďuje (vo forme) každému prvku widgetu triedu paper-yourwidgetname
• vyhradené HTML triedy readonly, widget, selected
  • použitie len na čítanie: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} obsahuje inštanciu widgetu
  • Metóda widget.remove() odstráni miniaplikáciu

Skratky v úprave textu:

• CMD + m zvýrazní text
• CMD + l vytvorí prepojenie
• CMD + p pridá ikonu
• CMD + b tučné
• CMD + i kurzíva
• CMD + u podčiarknite

Je dobré vedieť:

• Atribút [data-prevent] môže zabrániť udalosti kliknutia vo widgete

Použitie

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

Poskytnite index miniaplikácií na /paper/db.json a jeho súbory miniaplikácií z vašej aplikácie. Spätné volanie pri ukladaní prijíma serializované pole miniaplikácií.

Zdroj: Total.js komponenty. Autorské právo Peter Širka a prispievatelia. Licencia MIT.