# j-Paper

> Ustaw bogate treści jako listę widgetów.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pl
Content-SHA256: 296ac888c2d647ca8e71ca76bd24bb2e4bb39888628a6b9e026bda211d2ad1ec
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Komponent edytuje dokument jako szereg obiektów widgetowych.Zwiąż ścieżkę modelu do tego szeregu, skonfigurować magazyn widgetowy i użyć autosave do pisania edycji z powrotem do modelu.

- Produkcja jest prostą strukturą `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Rejestracja widgetów: https://github.com/totaljs/parts/tree/main/paper

__Konfiguracja__:

- `readonly {Number}` umożliwia/nie jest dostępny w trybie readonnym `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` opcjonalny, element macierzyński dla wysokości min (default: `null`)
- Dodatkowy margines `margin {Number}` dla wysokości min (default: `0`)
- Zmiany `autosave {Boolean}` są automatycznie serializowane według ścieżki
- `widgets {String}` link do widgetów (default: Componentator CDN)
	- może zawierać wiele adresów podzielonych przez comma `mywidget1.html,/mywidget2.html,etc..`
	- lub możesz utrzymać [Struktura CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` - link do `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __WYJĘCIA__: nazwać argument `callback`, jeśli ikona została zmieniona w elementie
- `link {String}` - link do `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` w przypadku widgetów
- `command {String}` - link do `function(cmd)`
	- `cmd.widget {Object}` - wstępny widget
	- `cmd.widgets {Array}` - lista zarejestrowanych widgetów
	- `cmd.remove() {Function}` usuwa widget
	- `cmd.append(name)` zastępuje bieżący widget tymczasowy nowym widgetem (nazwa widgetu `name`)
- `format {String}` - link do `function(toolbar)`
	- `toolbar` może być `null`
	- `toolbar.element {jQuery element}` - aktualny element
	- `toolbar.node {HTML element}` - aktualny element
	- `toolbar.widget {Object}` w przypadku widgetów
	- `toolbar.style {Object}` zawiera aktualny styl np. `bold: 1, link: 1`
- `upload {String}` - link do `function(opt, callback)`
	- `opt.accept {String}` opcjonalny
	- `opt.files {FileList}` opcjonalny
	- Opcjonalny `opt.multiple {Boolean}`, domyślny: `false`
	- `opt.width {Number}` opcjonalny
	- `opt.height {Number}` opcjonalny
	- __WYWIĄZANIE__: Argument `callback` musi być wykonany po przesłaniu z argumentem `files {Array}`
- `change {String}` - link do `function(change)`
	- `change.id {String}` identyfikator
	- `change.block {String}` - identyfikator bloku
	- `change.blockprev {String}` - identyfikator bloku
	- `change.widget {String}` - identyfikator widgetów
	- Typ operacyjny `change.type {String}` (wstawić, zaktualizować, usunąć)
- `contextmenu {String}` link do `function(widget)` gdy użytkownik naciśnił prawą przycisk myszy na widget
- `check {String}` jest linkem do `function(widget)`, który decyduje, czy umożliwić edycję, czy nie
- `placeholder {String}` miejsce dla domyślnego widżetu HTML (domyślny: `Press / for adding rich content`)

__Metody__:

- `component.save(function(data, ischange) {` dla oszczędzania treści
- `component.import(url or url_array, [callback])` do importu dodatkowych widgetów
- `component.notify(event, [a], [b], [c], [d])` emituje wydarzenie w każdym widgetie

__Dobrze wiedzieć__:

Składnik tworzy globalną zmienną o nazwie `window.papercache {Object}`, która jest używana przez wszystkie instancje `j-Paper`.

- Składnik porównuje treść, gdy zmieniasz dane, dzięki czemu możesz zmienić dane w czasie rzeczywistym
- składnik przypisuje (w formie) klasę `paper-yourwidgetname` do każdego elementu widgetowego
- Klasy HTML `readonly`, `widget`, `selected`
	- Dostarczane do użytku: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` zawiera widget
	- Metoda `widget.remove()` usuwa widget

__Krótki tekst w edycji__:

- `CMD + m` podkreśla tekst
- `CMD + l` tworzy link
- `CMD + p` dodaje ikonę
- `CMD + b` - odważny
- Włoski `CMD + i`
- `CMD + u` Podsumowanie

__Dobrze wiedzieć__:

- Atrybut `[data-prevent]` może zapobiec kliknięciu w widgetie

## Używanie

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

Serwuj indeks widgetów w /paper/db.json i jego pliki widgetowe z aplikacji.

Źródło : [Składniki Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka i jego współpracownicy. [Licencja](/knowledge-licenses.json).