# j-Paper

> Upravte bohatý obsah ako zoznam miniaplikácií.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 14d48868174e7d320ab73a11e27c8869c45cba77f5d357d91cc9f116a8b13cf1
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

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](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `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

```html
<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](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper). Autorské právo Peter Širka a prispievatelia. [Licencia MIT](/knowledge-licenses.json).