Skip to content

Commit 001aa70

Browse files
committed
Merge master into release branch
2 parents 372404a + 91521e6 commit 001aa70

29 files changed

+1101
-460
lines changed

bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"jquery.tinymce": "",
2929
"moment": "",
3030
"moment-timezone": "",
31-
"imagesloaded": "~3.1.8"
31+
"imagesloaded": "~3.1.8",
32+
"masonry": "~3.2.2"
3233
}
3334
}

build.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838
"select2": "bower_components/select2/select2.min",
3939
"tinymce": "bower_components/jquery.tinymce/jscripts/tiny_mce/jquery.tinymce",
4040
"spectrum": "bower_components/spectrum/spectrum",
41+
"masonry": "bower_components/masonry/masonry",
42+
"outlayer": "bower_components/outlayer",
43+
"doc-ready": "bower_components/doc-ready",
44+
"get-size": "bower_components/get-size",
45+
"get-style-property": "bower_components/get-style-property",
46+
"matches-selector": "bower_components/matches-selector",
4147

4248
// Core
4349
"pat-utils": "core/utils",
@@ -83,6 +89,7 @@
8389
"pat-inject": "pat/inject",
8490
"pat-legend": "pat/legend",
8591
"pat-markdown": "pat/markdown",
92+
"pat-masonry": "pat/masonry",
8693
"pat-menu": "pat/menu",
8794
"pat-modal": "pat/modal",
8895
"pat-navigation": "pat/navigation",

changes.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
# Changelog
22

3-
## 2.0.5 - Dec. 4, 2014
4-
5-
- #383 pat-equaliser sets the height to early
3+
## 2.0.7 - Feb. 4, 2014
4+
5+
- #381 Checked class not set on checklist
6+
- Add stub module i18n.js. Provides compatibility with Mockup patterns.
7+
- Add support for Mockup patterns.
8+
- Add support for parsing JSON as pattern configuration
9+
- Add support for using pat-subform together with pat-modal.
10+
- Give pattern plugins the change to modify arguments before returning them.
11+
- New arg for pat-autosuggest: words-json
12+
- New pattern: pat-masonry
613

714
## 2.0.6 - Dec. 10, 2014
815

demo/focus/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
55
<title>focus pattern demo</title>
6+
<script data-main="../main" src="../../src/bower_components/requirejs/require.js"></script>
67
<link rel="stylesheet" href="../common.css" type="text/css">
78
<link rel="stylesheet" href="focus.css" type="text/css">
8-
<script data-main="../main" src="../../src/bower_components/requirejs/require.js"></script>
99
</head>
1010
<body>
1111
<form class="concise" action="#">

demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ <h4>Fancy stuff</h4>
5656
<a class="navigation gallery" href="gallery/index.html" title="">Gallery<sup>β</sup></a>
5757
<a class="navigation slides" href="slides/index.html" title="">Slideshows<sup>β</sup></a>
5858
<a class="navigation slideshow-builder" href="slideshow-builder/index.html" title="">Slideshow builder<sup>β</sup></a>
59+
<a class="navigation masonry" href="masonry/index.html" title="">Masonry<sup>β</sup></a>
5960
</div>
6061

6162
</nav>

demo/inject/documentation.md

Lines changed: 63 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,77 @@
11
# Injection
22

33
## Description
4-
4+
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.
55

66
## Documentation
77

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
139

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+
![image](injection-single.svg)
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+
![image](injection-multiple.svg)
23+
24+
It's also possible to inject content from another page into a modal panel:
25+
26+
![image](injection-modal.svg)
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:
1633

1734
<a href="demos/frobber.html#content" class="pat-inject">Demo the frobber</a>
1835

1936
<section id="content">
20-
...
37+
2138
</section>
2239

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.
2641

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:
2943

3044
<a href="latest-news.html#content" class="pat-inject"
3145
data-pat-inject="target: #news::before">Tell me more</a>
3246

3347
<section id="news">
34-
...
48+
3549
</section>
3650

37-
In this example clicking on the *Tell me more* link will load the latest
38-
news content and inject it before the content of `#news`.
51+
In this example clicking on the *Tell me more* link will load the latest news content and inject it before the content of `#news`.
3952

40-
Perhaps inserting a single block of content is not enough for your
41-
needs? Don't worry! Let's give you another example:
53+
Perhaps inserting a single block of content is not enough for your needs? Don't worry! Let's give you another example:
4254

4355
<section id="section">
4456
<form action="/my/form" class="pat-inject"
4557
data-pat-inject="#content && #notice #notices::after">
46-
...
58+
4759
</form>
4860
</section>
4961

5062
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
5464
of `#notices`.
5565

56-
XXX: cross references for above
57-
58-
XXX: give an overview of sections with cross references
59-
6066
### Where and what to inject
6167

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:
6469

6570
<a href="news.html" class="pat-inject">
6671
Display news content in body content
6772
</a>
6873

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:
7175

7276
> Default selector and source and target selector
7377
>
@@ -80,27 +84,21 @@ the defaults:
8084
> For `target` and `source` by default the content is selected and
8185
> worked on.
8286
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.
8788

8889
XXX: add references to the sections.
8990

9091
### Select individual elements via `#id`
9192

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:
9594

9695
<a class="pat-inject" href="sources.html"
9796
data-pat-inject="source: #src1; target: #tgt1 &&
9897
source: #src2; target: #tgt2">
9998
Multi-injection with a one-to-one mapping.
10099
</a>
101100

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):
104102

105103
<a class="pat-inject" href="sources.html"
106104
data-pat-inject="source: #src; target: #tgt1 &&
@@ -114,8 +112,7 @@ specified as part of the `href` (or `action` in case of forms):
114112
One source element for two targets, source specified via href.
115113
</a>
116114

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:
119116

120117
<a class="pat-inject" href="sources.html#src"
121118
data-pat-inject="target: #tgt1 &&
@@ -125,6 +122,7 @@ selector and can be overriden for one or more injections:
125122
</a>
126123

127124
Sometimes it is useful to use the triggering element itself as a target.
125+
128126
This can be done by using the special *self* target:
129127

130128
<a class="pat-inject" href="sources.html" data-pat-inject="target: #self">
@@ -133,27 +131,20 @@ This can be done by using the special *self* target:
133131

134132
### Modifiers
135133

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:
140135

141136
`::element`
142137
Select the element, instead of the content.
143138

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

147141
`::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.
151143

152144
Can be used for `target` and combined with `:element`.
153145

154146
`::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.
157148

158149
Can be used for `target` and combined with `:element`.
159150

@@ -227,8 +218,7 @@ Source element after target content:
227218

228219
### Using full-blown jQuery selectors
229220

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.
232222

233223
<a class="pat-inject" href="sources.html"
234224
data-pat-inject="target: #parentid > .childrensclass">
@@ -245,24 +235,18 @@ multiple elements match, all will be replaced.
245235

246236
### Non-existing targets
247237

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.
251239

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

256-
<a class="pat-inject" href="sources.html"
257-
data-pat-inject="target: #non-existing">
258-
...
242+
<a class="pat-inject" href="sources.html" data-pat-inject="target: #non-existing">
243+
259244
</body>
260245

261246
After the injection:
262247

263-
<a class="pat-inject" href="sources.html"
264-
data-pat-inject="target: #non-existing">
265-
...
248+
<a class="pat-inject" href="sources.html" data-pat-inject="target: #non-existing">
249+
266250
<div id="non-existing">
267251
Content of body of sources.html
268252
</div>
@@ -271,13 +255,8 @@ After the injection:
271255
Trigger
272256
-------
273257

274-
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.
281260

282261
<a href="sources.html#id" class="pat-inject"
283262
data-pat-inject="trigger: autoload">Autoloads as soon as initialised</a>
@@ -290,51 +269,36 @@ XXX: example infinite list
290269

291270
### Change href after injection
292271

293-
EXPERIMENTAL FEATURE
294-
295-
WILL DO SOMETHING WHEN COMBINED WITH MULTI-INJECTION
272+
THIS FEATURE IS EXPERIMENTAL
296273

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.
300275

301276
before:
302277

303-
<a class="next-month pat-inject" href="calendar.html#2012-05"
304-
data-pat-inject="post: #2012-04; next-href: #2012-05">Next month</a>
305-
...
278+
<a class="next-month pat-inject" ref="calendar.html#2012-05"
279+
data-pat-inject="post: #2012-04; next-href: 2012-05">Next month</a>
280+
306281
<div class="month" id="2012-04">
307-
...
282+
308283
</div>
309284

310285
after:
311286

312-
<a class="next-month" href="#2012-05"
313-
data-pat-inject="">Next month</a>
287+
<a class="next-month" href="#2012-05" data-pat-inject="">Next month</a>
314288
315289
<div class="month" id="2012-04">
316290
317291
</div>
318-
<a class="next-month pat-inject" href="calendar.html#2012-06"
292+
<a class="next-month pat-inject" ref="calendar.html#2012-06"
319293
data-pat-inject="post: #2012-05; next-href: #2012-06">Next month</a>
320294
321295
<div class="month" id="2012-05">
322296
323297
</div>
324298

325-
326-
### Injection type (modals)
327-
328-
XXX: TODO
329-
330-
THIS IS AN EXPERIMENTAL CONCEPT WHICH IS NOT IMPLEMENTED YET, but rather
331-
still under discussion.
332-
333299
### Modals
334300

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:
338302

339303
<a class="pat-inject" href="modal-source.html" data-pat-inject="type: modal">
340304
@@ -359,8 +323,7 @@ After injection was triggered:
359323

360324
### Properties
361325

362-
You can customise the behaviour of injection through options in the
363-
`data-pat-inject` attribute.
326+
You can customise the behaviour of injection through options in the `data-pat-inject` attribute.
364327

365328
<a href="#" class="pat-inject" data-pat-inject="type: modal">
366329

0 commit comments

Comments
 (0)