deploy: 7b73b5c

README/index.html

@@ -354,7 +354,7 @@ <h2>Usage</h2>
 <p>or:</p>
 </li>
 </ol>
-<pre class="language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@plone/mockup@latest/dist/bundle.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br> ```<br><br><br>## Install<br><br>- Have a current version of Node.js installed.<br><br>- To install, run: `make install`.<br><br>- To run the demo server, do: `make serve`.<br><br> This starts up the webpack build process in watch mode.<br> Any JavaScript changes are immediately compiled.<br> For some changes - like for adding new packages via `yarn add` and then using it you might need to restart.<br> The command also spins up a development server for our `11ty` based documentation and demo pages.<br> If you don't need the docs running, you can run `yarn start:webpack` or `npm run start:webpack` instead, so that only the webpack devserver is running.<br><br>- Go to `http://localhost:8000`:<br> On this port our demo and documentation pages are served.<br><br><br>## Mockup overview<br><br>Mockup is a JavaScript UI library which provides widgets, apps, and functionality for the Plone Classic UI frontend.<br>It is based on Patternslib(XXX), and provides its functionality through patterns.<br>Patterns are initialized and activated when a triggering CSS selector is found in the DOM tree.<br>For example, the related items widget is initialized on a form input field with the CSS class `pat-relateditems`.<br>The configuration is done via data attributes.<br>For the related items pattern, it's an attribute called `data-pat-relateditems`.<br>The data strucutre of the configuration can be a JSON string or CSS declaration like key-value pairs separated by a semicolon.<br>Defining a JSON structure is more flexible though.<br><br>Here are two examples.<br><br>`pat-relateditems` configuration as JSON structure:<br>```html<br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><br> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pat-relateditems<span class="token punctuation">"</span></span><br> <span class="token attr-name">data-pat-relateditems</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{<br> "selectableTypes": ["Document"],<br> "vocabularyUrl": "relateditems-test.json"<br> }<span class="token punctuation">'</span></span><br><span class="token punctuation">/></span></span></code></pre>
+<pre class="language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@plone/mockup@latest/dist/bundle.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br> ```<br><br><br>## Install<br><br>- Have a current version of Node.js installed.<br><br>- To install, run: `make install`.<br><br>- To run the demo server, do: `make serve`.<br><br> This starts up the webpack build process in watch mode.<br> Any JavaScript changes are immediately compiled.<br> For some changes - like for adding new packages via `yarn add` and then using it you might need to restart.<br> The command also spins up a development server for our `11ty` based documentation and demo pages.<br> If you don't need the docs running, you can run `yarn start:webpack` or `npm run start:webpack` instead, so that only the webpack devserver is running.<br><br>- Go to `http://localhost:8000`:<br> On this port our demo and documentation pages are served.<br><br><br>## Mockup overview<br><br>Mockup is a JavaScript UI library which provides widgets, apps, and functionality for the Plone Classic UI frontend.<br>It is based on Patternslib(XXX), and provides its functionality through patterns.<br>Patterns are initialized and activated when a triggering CSS selector is found in the DOM tree.<br>For example, the related items widget is initialized on a form input field with the CSS class `pat-relateditems`.<br>The configuration is done via data attributes.<br>For the related items pattern, it's an attribute called `data-pat-relateditems`.<br>The data structure of the configuration can be a JSON string or CSS declaration as key-value pairs, with the key and value separated by a colon (`:`), and the pairs separated by a semicolon (`;`).<br>Defining a JSON structure is more flexible though.<br><br>Here are two examples.<br><br>`pat-relateditems` configuration as JSON structure:<br>```html<br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><br> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pat-relateditems<span class="token punctuation">"</span></span><br> <span class="token attr-name">data-pat-relateditems</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{<br> "selectableTypes": ["Document"],<br> "vocabularyUrl": "relateditems-test.json"<br> }<span class="token punctuation">'</span></span><br><span class="token punctuation">/></span></span></code></pre>
 <p><code>pat-relateditems</code> configuration as CSS declarations:</p>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><br> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pat-relateditems<span class="token punctuation">"</span></span><br> <span class="token attr-name">data-pat-relateditems</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><br> selectableTypes: Document;<br> vocabularyUrl: relateditems-test.json;<br> <span class="token punctuation">"</span></span><br><span class="token punctuation">/></span></span></code></pre>
 <p>Because of historic reasons, the Mockup pattern attributes are written in &quot;camelCase&quot;, for example <code>vocabularyUrl</code>.