|
1 | 1 | Creating a new pattern
|
2 | 2 | ======================
|
3 | 3 |
|
4 |
| -Patterns are implemented as javascript objects that are registered with the |
5 |
| -patterns library. Below is a minimal skeleton for a pattern. |
| 4 | +Patterns are implemented as JavaScript classes that are registered with the patterns library. |
| 5 | +Below is a minimal skeleton for a pattern. |
6 | 6 |
|
7 | 7 | .. code-block:: javascript
|
8 | 8 | :linenos:
|
9 | 9 |
|
| 10 | + import { BasePattern } from "@patternslib/patternslib/src/core/basepattern"; |
| 11 | + import registry from "@patternslib/patternslib/src/core/registry"; |
| 12 | +
|
| 13 | + class Pattern extends BasePattern { |
| 14 | + static name = "test-pattern"; |
| 15 | + static trigger = ".pat-test-pattern"; |
| 16 | +
|
| 17 | + init() { |
| 18 | + } |
| 19 | + } |
| 20 | +
|
| 21 | + // Register Pattern class in the global pattern registry and make it usable there. |
| 22 | + registry.register(Pattern); |
| 23 | +
|
| 24 | + // Export Pattern as default export. |
| 25 | + // You can import it as ``import AnyName from "./{{{ pattern.name }}}";`` |
| 26 | + export default Pattern; |
| 27 | + // Export BasePattern as named export. |
| 28 | + // You can import it as ``import { Pattern } from "./{{{ pattern.name }}}";`` |
| 29 | + export { Pattern }; |
10 | 30 | define([
|
11 | 31 | 'require'
|
12 | 32 | '../registry'
|
@@ -60,72 +80,6 @@ possible to call ``init`` again to reactivate the pattern.
|
60 | 80 |
|
61 | 81 | Methods must always return ``this`` to facilitate their use as jQuery widgets.
|
62 | 82 |
|
63 |
| -jQuery plugins |
64 |
| --------------- |
65 |
| - |
66 |
| -Patterns can also act as jQuery plugins. This can be done by providing a |
67 |
| -``jquery_plugin`` option in the pattern specification. |
68 |
| - |
69 |
| -.. code-block:: javascript |
70 |
| - :linenos: |
71 |
| - :emphasize-lines: 3 |
72 |
| -
|
73 |
| - var pattern_spec = { |
74 |
| - name: "mypattern", |
75 |
| - jquery_plugin: true, |
76 |
| -
|
77 |
| - init: function($el) { |
78 |
| - ... |
79 |
| - }, |
80 |
| -
|
81 |
| - destroy: function($el) { |
82 |
| - ... |
83 |
| - }, |
84 |
| -
|
85 |
| - othermethod: function($el, options) { |
86 |
| - ... |
87 |
| - } |
88 |
| - }; |
89 |
| -
|
90 |
| -
|
91 |
| -Line 3 tells the patterns framework that this pattern can be used as a jQuery |
92 |
| -plugin named ``patMypattern``. You can then interact with it using the |
93 |
| -standard jQuery API: |
94 |
| - |
95 |
| -.. code-block:: javascript |
96 |
| -
|
97 |
| - // Initialize mypattern for #title |
98 |
| - $("#title").patMypattern(); |
99 |
| -
|
100 |
| - // Invoke othermethod for the pattern |
101 |
| - $("#title").patMypattern("othermethod", {option: "value"}); |
102 |
| -
|
103 |
| -
|
104 |
| -Injection actions |
105 |
| ------------------ |
106 |
| - |
107 |
| -The injection mechanism supports invoking arbitrary actions after loading new |
108 |
| -content. This is handled through *injection actions*. These are handled by an |
109 |
| -``inject`` method on a pattern. |
110 |
| - |
111 |
| -.. code-block:: javascript |
112 |
| - :linenos: |
113 |
| - :emphasize-lines: 3 |
114 |
| -
|
115 |
| - var pattern_spec = { |
116 |
| - name: "mypattern", |
117 |
| -
|
118 |
| - inject: function($trigger, content) { |
119 |
| - ... |
120 |
| - } |
121 |
| - }; |
122 |
| -
|
123 |
| -The inject methods gets a number of parameters: |
124 |
| - |
125 |
| -* ``$trigger`` is the element that triggered the injection. |
126 |
| -* ``content`` is an array containing the loaded content. |
127 |
| - |
128 |
| - |
129 | 83 |
|
130 | 84 | Pattern configuration
|
131 | 85 | ---------------------
|
@@ -163,43 +117,3 @@ parser instance and add our options with their default values. In the init
|
163 | 117 | method we use the parser to parse the ``data-mypattern`` attribute for the
|
164 | 118 | element. Finally we combine that with the options that might have been
|
165 | 119 | provided through the jQuery plugin API.
|
166 |
| - |
167 |
| -Creating a JavaScript API |
168 |
| -------------------------- |
169 |
| - |
170 |
| -Sometimes you may want to create a JavaScript API that is not tied to DOM |
171 |
| -elements, so exposing it as a jQuery plugin does not make sense. This can |
172 |
| -be done using the standard RequireJS mechanism by creating and returning an |
173 |
| -API object. |
174 |
| - |
175 |
| -.. code-block:: javascript |
176 |
| - :linenos: |
177 |
| - :emphasize-lines: 13-17 |
178 |
| -
|
179 |
| - define([ |
180 |
| - 'require', |
181 |
| - '../registry' |
182 |
| - ], function(require, registry) { |
183 |
| - var pattern_spec = { |
184 |
| - init: function($el) { |
185 |
| - ... |
186 |
| - }; |
187 |
| - }; |
188 |
| -
|
189 |
| - registry.register(pattern_spec); |
190 |
| -
|
191 |
| - var public_api = { |
192 |
| - method1: function() { .... }, |
193 |
| - method2: function() { .... } |
194 |
| - }; |
195 |
| - return public_api; |
196 |
| - }); |
197 |
| -
|
198 |
| -
|
199 |
| -You can then use the API by using require to retrieve the API object for |
200 |
| -the pattern: |
201 |
| - |
202 |
| -.. code-block:: javascript |
203 |
| -
|
204 |
| - var pattern_api = require("patterns/mypattern"); |
205 |
| - pattern_api.method1(); |
0 commit comments