# j-Paper

> Složte bohatý obsah jako seznam widgetů.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: cs
Content-SHA256: 7c50074be1b47cecc529e1d1ea451e2e692b2fec7cb95a7f5d250455a5315c07
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Komponenta upravuje dokument jako řadu widgetových objektů.Vezměte modelovou cestu k tomuto řádku, nastavte widgetový záznam a použijte autosave pro psaní úprav zpět do modelu.

- Výstup je jednoduchá struktura `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Rozhraní widgetů: https://github.com/totaljs/parts/tree/main/paper

__Konfigurace__:

- `readonly {Number}` umožňuje/nesahuje readonly režim `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` volitelný, mateřský prvek pro min-výšku (podmínkou: `null`)
- `margin {Number}` dodatečná hranice pro min-výška (default: `0`)
- Změny `autosave {Boolean}` jsou automaticky serializovány podle trasy
- `widgets {String}` odkaz na widgety (předvolené: Componentator CDN)
	- Může obsahovat více adres rozdělených komou `mywidget1.html,/mywidget2.html,etc..`
	- Nebo můžete udržet [Struktura CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` odkaz na `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __VÍCE: nazve argument `callback`, pokud je ikona změněna v prvku
- `link {String}` odkaz na `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` - příklad widgetu
- `command {String}` odkaz na `function(cmd)`
	- `cmd.widget {Object}` - dočasný widget
	- `cmd.widgets {Array}` seznam registrovaných widgetů
	- `cmd.remove() {Function}` odstraní widget
	- `cmd.append(name)` nahrazuje stávající dočasný widget novým widgetem (jméno widgetu `name`)
- `format {String}` odkaz na `function(toolbar)`
	- `toolbar` Může být `null`
	- `toolbar.element {jQuery element}` - aktuální prvek
	- `toolbar.node {HTML element}` - aktuální prvek
	- `toolbar.widget {Object}` - příklad widgetu
	- `toolbar.style {Object}` obsahuje aktuální styl, např. `bold: 1, link: 1`
- `upload {String}` odkaz na `function(opt, callback)`
	- `opt.accept {String}` volitelné
	- `opt.files {FileList}` volitelné
	- `opt.multiple {Boolean}` Opční a default: `false`
	- `opt.width {Number}` volitelné
	- `opt.height {Number}` volitelné
	- __IMPORTANT__: Argument `callback` musí být proveden po uploadu s argumentem `files {Array}`
- `change {String}` odkaz na `function(change)`
	- `change.id {String}` identifikátor
	- `change.block {String}` - identifikační blok
	- `change.blockprev {String}` - předchozí blokový identifikátor
	- `change.widget {String}` - Widget ID
	- Typ provozu `change.type {String}` (vložení, aktualizace, odstranění)
- `contextmenu {String}` odkaz na `function(widget)` když uživatel stiskne pravou myš tlačítko na widgetu
- `check {String}` odkaz na `function(widget)`, který rozhoduje, zda je možné editovat nebo ne
- `placeholder {String}` je místo pro výchozí HTML widget (důvodní: `Press / for adding rich content`)

__Metody__:

- `component.save(function(data, ischange) {` pro úsporu obsahu
- `component.import(url or url_array, [callback])` pro dovoz dalších widgetů
- `component.notify(event, [a], [b], [c], [d])` vydává události v každém widgetu

__Dobré vědět__:

Komponenta vytváří globální proměnnou nazvanou `window.papercache {Object}` používanou ve všech případech `j-Paper`.

- složka porovnává obsah při změně dat, takže můžete změnit data v reálném čase
- složka přiděluje (v podobě) třídu `paper-yourwidgetname` každému widgetu
- HTML třídy `readonly`, `widget`, `selected`
	- Přístup k použití: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` obsahuje widget
	- Metoda `widget.remove()` odstraní widget

__Zkratky v textu Edit__:

- `CMD + m` zdůrazňuje text
- `CMD + l` vytváří odkaz
- `CMD + p` přidává ikonu
- `CMD + b` Odvážný
- `CMD + i` Italský
- `CMD + u` podprsenka

__Dobré vědět__:

- `[data-prevent]` může zabránit kliknutí události v widgetu

## Použití

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

Poskytujte index widgetu na /paper/db.json a jeho soubory widgetů z vaší aplikace.

Zdroj : [Total.js součásti](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka a jeho účastníci. [Licence](/knowledge-licenses.json).