You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Injection makes it trivial to load content from a server and display it on a web page with a rich, modern web experience without any page reloads. Pat-inject works on existing infra structures, is designed with respect for accessibility and follows the principles of progressive enhancement.
5
5
6
6
## Documentation
7
7
8
-
Injection is one of the most powerful features of Patterns. It makes it
9
-
trivial to load content from a server and include it on a web page. This
10
-
can be used to do on-demand loading of content, do in-page form
11
-
submission, perform AJAX requests with results shown as notifications
12
-
and many other things.
8
+
### Concept
13
9
14
-
The simplest form of injection is a link which loads content when
15
-
clicked:
10
+
Injection is an enhancement on regular HTML links that point from one HTML page to another. Without JavaScript and injection, you would keep this standard behaviour. With JavaScript and pat-inject, a richer experience is created for modern graphical browsers.
11
+
12
+
Pat-inject intercepts the page refresh, invisibly collects the remote page, extracts parts out of it that you're interested in and replaces the content somewhere on the currently visible page without refreshing the browser window.
13
+
14
+
The principle is illustrated in the following graphic.
15
+
16
+
17
+
18
+
This typical example illustrates how in this case the content of the main content region is replaced by the content of the same region of another page. One could for instance create a series of links styled as tabs this way, which would each refresh the content area of the page, without refreshing the browser window.
19
+
20
+
A slightly more complex case is illustrated below. You see how multiple regions are extracted out of one page and injected into similar areas on another page. It doesn't matter if the regions on the remote page are differently named or styled.
21
+
22
+
23
+
24
+
It's also possible to inject content from another page into a modal panel:
25
+
26
+
27
+
28
+
The possibilities don't stop here. Other applications of injection include injection in tooltips (pat-tooltip) and injection in 'self healing messages' (Similar to Mac OS banners or Growl) (pat-notification). Those ways of working with injection are explained in the respective documentation sections of the components pat-tooltip and pat-notification.
29
+
30
+
### Code examples
31
+
32
+
The most simple form of injection is a link which loads content when clicked:
16
33
17
34
<a href="demos/frobber.html#content" class="pat-inject">Demo the frobber</a>
18
35
19
36
<section id="content">
20
-
...
37
+
…
21
38
</section>
22
39
23
-
When a user clicks this link `demos/frobber.html` will be fetched via
24
-
AJAX, the element with id `content` is extracted and used to replace the
25
-
content of `#content` on the current page.
40
+
When a user clicks this link `demos/frobber.html` will be fetched via AJAX, the element with id `content` is extracted and used to replace the content of `#content` on the current page.
26
41
27
-
In another situation you may not want to replace content but add new
28
-
content. You can easily do that by using a modifier:
42
+
In another situation you may not want to replace content but add new content. You can easily do that by using a modifier:
When you submit this form two things happen: `#content` from the
51
-
response is used to replace `#section`'s content of the page, replacing
52
-
the current form with a new form or a feedback message. In addition a
53
-
`#notice` element is extracted from the response and added at the bottom
63
+
response is used to replace `#section`'s content of the page, replacing the current form with a new form or a feedback message. In addition a `#notice` element is extracted from the response and added at the bottom
54
64
of `#notices`.
55
65
56
-
XXX: cross references for above
57
-
58
-
XXX: give an overview of sections with cross references
59
-
60
66
### Where and what to inject
61
67
62
-
The most simple injection fetches a source via AJAX, extracts its body's
63
-
content and replaces the current body's content with it:
68
+
The most simple injection fetches a source via AJAX, extracts its body's content and replaces the current body's content with it:
64
69
65
70
<a href="news.html" class="pat-inject">
66
71
Display news content in body content
67
72
</a>
68
73
69
-
Admittedly, this is a rare use case. However, it is ideal for understanding
70
-
the defaults:
74
+
Admittedly, this is a rare use case. However, it is ideal for understanding the defaults:
71
75
72
76
> Default selector and source and target selector
73
77
>
@@ -80,27 +84,21 @@ the defaults:
80
84
> For `target` and `source` by default the content is selected and
81
85
> worked on.
82
86
83
-
In the next section you learn how to use element ids as `source` and
84
-
`target` selectors, which covers most use cases. These can be combined
85
-
with modifiers and finally the full injection power is unleashed with
86
-
arbitrary jQuery selectors.
87
+
In the next section you learn how to use element ids as `source` and `target` selectors, which covers most use cases. These can be combined with modifiers and finally the full injection power is unleashed with arbitrary jQuery selectors.
87
88
88
89
XXX: add references to the sections.
89
90
90
91
### Select individual elements via `#id`
91
92
92
-
The simple injections replace the content of an element in `target` with
93
-
the content of an element in `source`. There is a one-to-one relation
94
-
between elements in source and target:
93
+
The simple injections replace the content of an element in `target` with the content of an element in `source`. There is a one-to-one relation between elements in source and target:
95
94
96
95
<a class="pat-inject" href="sources.html"
97
96
data-pat-inject="source: #src1; target: #tgt1 &&
98
97
source: #src2; target: #tgt2">
99
98
Multi-injection with a one-to-one mapping.
100
99
</a>
101
100
102
-
In case one source element is to be used for both targets, it can be
103
-
specified as part of the `href` (or `action` in case of forms):
101
+
In case one source element is to be used for both targets, it can be specified as part of the `href` (or `action` in case of forms):
104
102
105
103
<a class="pat-inject" href="sources.html"
106
104
data-pat-inject="source: #src; target: #tgt1 &&
@@ -114,8 +112,7 @@ specified as part of the `href` (or `action` in case of forms):
114
112
One source element for two targets, source specified via href.
115
113
</a>
116
114
117
-
The source id specified as part of `href`/`action` is the default source
118
-
selector and can be overriden for one or more injections:
115
+
The source id specified as part of `href`/`action` is the default source selector and can be overriden for one or more injections:
119
116
120
117
<a class="pat-inject" href="sources.html#src"
121
118
data-pat-inject="target: #tgt1 &&
@@ -125,6 +122,7 @@ selector and can be overriden for one or more injections:
125
122
</a>
126
123
127
124
Sometimes it is useful to use the triggering element itself as a target.
125
+
128
126
This can be done by using the special *self* target:
@@ -133,27 +131,20 @@ This can be done by using the special *self* target:
133
131
134
132
### Modifiers
135
133
136
-
So far you can replace target element content with source element
137
-
content. In order to work on the elements instead of their content, and
138
-
to put things relative to selected elements, we introduce three
139
-
modifiers:
134
+
So far you can replace target element content with source element content. In order to work on the elements instead of their content, and to put things relative to selected elements, we introduce three modifiers:
140
135
141
136
`::element`
142
137
Select the element, instead of the content.
143
138
144
-
Can be used for `source` and `target`, and in case of the latter be
145
-
combined with `::before`/`::after`.
139
+
Can be used for `source` and `target`, and in case of the latter be combined with `::before`/`::after`.
146
140
147
141
`::before`
148
-
Like in CSS, the pseudo-element (a position) right before the content of
149
-
the target element. The so far non-existing, but soon-to-be first child
150
-
of the target element.
142
+
Like in CSS, the pseudo-element (a position) right before the content of the target element. The so far non-existing, but soon-to-be first child of the target element.
151
143
152
144
Can be used for `target` and combined with `:element`.
153
145
154
146
`::after`
155
-
Like in CSS, the pseudo-element (a position) right before the content of
156
-
the selected element.
147
+
Like in CSS, the pseudo-element (a position) right before the content of the selected element.
157
148
158
149
Can be used for `target` and combined with `:element`.
159
150
@@ -227,8 +218,7 @@ Source element after target content:
227
218
228
219
### Using full-blown jQuery selectors
229
220
230
-
For both selectors every conceivable jQuery selector is allowed. If
231
-
multiple elements match, all will be replaced.
221
+
For both selectors every conceivable jQuery selector is allowed. If multiple elements match, all will be replaced.
@@ -245,24 +235,18 @@ multiple elements match, all will be replaced.
245
235
246
236
### Non-existing targets
247
237
248
-
In case the target selector returns no elements, we will attempt to
249
-
create a matching element for you - the fuuuture, the apex of the vortex
250
-
of injection.
238
+
In case the target selector returns no elements, we will attempt to create a matching element for you.
251
239
252
-
So far we are able to handle `target` selectors that consist of only an
253
-
id: A `div` with that id will be created and injected as the last child
254
-
of `body`:
240
+
So far we are able to handle 'target' selectors that consist of only an id: A `div` with that id will be created and injected as the last child of `body`:
By default injection is triggered on click for anchors and on submit for
275
-
forms. Further, it can be triggered upon initialisation (`autoload`) and
276
-
when coming into view (`autoload-visible`). `autoload` injection is
277
-
useful to deliver a page skeleton, where e.g. header, body, and sidebar
278
-
load their content in parallel. `autoload-visible` injection is useful
279
-
to build infinite lists, where the injection element replaces itself
280
-
with the next 10 entries and a new `autoload-visible` injection link.
258
+
By default injection is triggered on click for anchors and on submit for forms. Further, it can be triggered upon initialisation (`autoload`) and when coming into view (`autoload-visible`). `autoload` injection is useful to deliver a page skeleton, where e.g. header, body, and sidebar load their content in parallel. `autoload-visible` injection is useful
259
+
to build infinite lists, where the injection element replaces itself with the next 10 entries and a new `autoload-visible` injection link.
281
260
282
261
<a href="sources.html#id" class="pat-inject"
283
262
data-pat-inject="trigger: autoload">Autoloads as soon as initialised</a>
@@ -290,51 +269,36 @@ XXX: example infinite list
290
269
291
270
### Change href after injection
292
271
293
-
EXPERIMENTAL FEATURE
294
-
295
-
WILL DO SOMETHING WHEN COMBINED WITH MULTI-INJECTION
272
+
THIS FEATURE IS EXPERIMENTAL
296
273
297
-
For anchors, you can specify an href to point to, after the injection
298
-
was triggered. If that element exists already during initialisation, the
299
-
injection is not initialised and the href changed to next-href.
274
+
For anchors, you can specify an href to point to, after the injection was triggered. If that element exists already during initialisation, the injection is not initialised and the href changed to next-href.
THIS IS AN EXPERIMENTAL CONCEPT WHICH IS NOT IMPLEMENTED YET, but rather
331
-
still under discussion.
332
-
333
299
### Modals
334
300
335
-
Inject a modal panel: modal-source.html is fetched, its body's content
336
-
is wrapped into a `div#modal.modal`, any existing such modal is removed
337
-
and the new modal injected as last element of the body:
301
+
Inject a modal panel: modal-source.html is fetched, its body's content is wrapped into a `div#modal.modal`, any existing such modal is removed and the new modal injected as last element of the body:
0 commit comments