Skip to content

Commit

Permalink
maint(Docs): Remove sections which do not apply from patterns.rst.
Browse files Browse the repository at this point in the history
  • Loading branch information
thet committed Aug 11, 2023
1 parent ca0fb41 commit 32a59d1
Showing 1 changed file with 22 additions and 108 deletions.
130 changes: 22 additions & 108 deletions docs/developer/patterns.rst
Original file line number Diff line number Diff line change
@@ -1,12 +1,32 @@
Creating a new pattern
======================

Patterns are implemented as javascript objects that are registered with the
patterns library. Below is a minimal skeleton for a pattern.
Patterns are implemented as JavaScript classes that are registered with the patterns library.
Below is a minimal skeleton for a pattern.

.. code-block:: javascript
:linenos:
import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
import registry from "@patternslib/patternslib/src/core/registry";
class Pattern extends BasePattern {
static name = "test-pattern";
static trigger = ".pat-test-pattern";
init() {
}
}
// Register Pattern class in the global pattern registry and make it usable there.
registry.register(Pattern);
// Export Pattern as default export.
// You can import it as ``import AnyName from "./{{{ pattern.name }}}";``
export default Pattern;
// Export BasePattern as named export.
// You can import it as ``import { Pattern } from "./{{{ pattern.name }}}";``
export { Pattern };
define([
'require'
'../registry'
Expand Down Expand Up @@ -60,72 +80,6 @@ possible to call ``init`` again to reactivate the pattern.

Methods must always return ``this`` to facilitate their use as jQuery widgets.

jQuery plugins
--------------

Patterns can also act as jQuery plugins. This can be done by providing a
``jquery_plugin`` option in the pattern specification.

.. code-block:: javascript
:linenos:
:emphasize-lines: 3
var pattern_spec = {
name: "mypattern",
jquery_plugin: true,
init: function($el) {
...
},
destroy: function($el) {
...
},
othermethod: function($el, options) {
...
}
};
Line 3 tells the patterns framework that this pattern can be used as a jQuery
plugin named ``patMypattern``. You can then interact with it using the
standard jQuery API:

.. code-block:: javascript
// Initialize mypattern for #title
$("#title").patMypattern();
// Invoke othermethod for the pattern
$("#title").patMypattern("othermethod", {option: "value"});
Injection actions
-----------------

The injection mechanism supports invoking arbitrary actions after loading new
content. This is handled through *injection actions*. These are handled by an
``inject`` method on a pattern.

.. code-block:: javascript
:linenos:
:emphasize-lines: 3
var pattern_spec = {
name: "mypattern",
inject: function($trigger, content) {
...
}
};
The inject methods gets a number of parameters:

* ``$trigger`` is the element that triggered the injection.
* ``content`` is an array containing the loaded content.



Pattern configuration
---------------------
Expand Down Expand Up @@ -163,43 +117,3 @@ parser instance and add our options with their default values. In the init
method we use the parser to parse the ``data-mypattern`` attribute for the
element. Finally we combine that with the options that might have been
provided through the jQuery plugin API.

Creating a JavaScript API
-------------------------

Sometimes you may want to create a JavaScript API that is not tied to DOM
elements, so exposing it as a jQuery plugin does not make sense. This can
be done using the standard RequireJS mechanism by creating and returning an
API object.

.. code-block:: javascript
:linenos:
:emphasize-lines: 13-17
define([
'require',
'../registry'
], function(require, registry) {
var pattern_spec = {
init: function($el) {
...
};
};
registry.register(pattern_spec);
var public_api = {
method1: function() { .... },
method2: function() { .... }
};
return public_api;
});
You can then use the API by using require to retrieve the API object for
the pattern:

.. code-block:: javascript
var pattern_api = require("patterns/mypattern");
pattern_api.method1();

0 comments on commit 32a59d1

Please sign in to comment.