Skip to content

Commit

Permalink
Merge master into release branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcbrand
jcbrand committed Feb 4, 2015
2 parents 372404a + 91521e6 commit 001aa70
Show file tree
Hide file tree
Showing 29 changed files with 1,101 additions and 460 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"jquery.tinymce": "",
"moment": "",
"moment-timezone": "",
"imagesloaded": "~3.1.8"
"imagesloaded": "~3.1.8",
"masonry": "~3.2.2"
}
}
7 changes: 7 additions & 0 deletions build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@
"select2": "bower_components/select2/select2.min",
"tinymce": "bower_components/jquery.tinymce/jscripts/tiny_mce/jquery.tinymce",
"spectrum": "bower_components/spectrum/spectrum",
"masonry": "bower_components/masonry/masonry",
"outlayer": "bower_components/outlayer",
"doc-ready": "bower_components/doc-ready",
"get-size": "bower_components/get-size",
"get-style-property": "bower_components/get-style-property",
"matches-selector": "bower_components/matches-selector",

// Core
"pat-utils": "core/utils",
Expand Down Expand Up @@ -83,6 +89,7 @@
"pat-inject": "pat/inject",
"pat-legend": "pat/legend",
"pat-markdown": "pat/markdown",
"pat-masonry": "pat/masonry",
"pat-menu": "pat/menu",
"pat-modal": "pat/modal",
"pat-navigation": "pat/navigation",
Expand Down
13 changes: 10 additions & 3 deletions changes.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
# Changelog

## 2.0.5 - Dec. 4, 2014

- #383 pat-equaliser sets the height to early
## 2.0.7 - Feb. 4, 2014

- #381 Checked class not set on checklist
- Add stub module i18n.js. Provides compatibility with Mockup patterns.
- Add support for Mockup patterns.
- Add support for parsing JSON as pattern configuration
- Add support for using pat-subform together with pat-modal.
- Give pattern plugins the change to modify arguments before returning them.
- New arg for pat-autosuggest: words-json
- New pattern: pat-masonry

## 2.0.6 - Dec. 10, 2014

Expand Down
2 changes: 1 addition & 1 deletion demo/focus/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>focus pattern demo</title>
<script data-main="../main" src="../../src/bower_components/requirejs/require.js"></script>
<link rel="stylesheet" href="../common.css" type="text/css">
<link rel="stylesheet" href="focus.css" type="text/css">
<script data-main="../main" src="../../src/bower_components/requirejs/require.js"></script>
</head>
<body>
<form class="concise" action="#">
Expand Down
1 change: 1 addition & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ <h4>Fancy stuff</h4>
<a class="navigation gallery" href="gallery/index.html" title="">Gallery<sup>β</sup></a>
<a class="navigation slides" href="slides/index.html" title="">Slideshows<sup>β</sup></a>
<a class="navigation slideshow-builder" href="slideshow-builder/index.html" title="">Slideshow builder<sup>β</sup></a>
<a class="navigation masonry" href="masonry/index.html" title="">Masonry<sup>β</sup></a>
</div>

</nav>
Expand Down
163 changes: 63 additions & 100 deletions demo/inject/documentation.md
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,77 @@
# Injection

## Description
…
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.

## Documentation

Injection is one of the most powerful features of Patterns. It makes it
trivial to load content from a server and include it on a web page. This
can be used to do on-demand loading of content, do in-page form
submission, perform AJAX requests with results shown as notifications
and many other things.
### Concept

The simplest form of injection is a link which loads content when
clicked:
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.

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.

The principle is illustrated in the following graphic.

![image](injection-single.svg)

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.

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.

![image](injection-multiple.svg)

It's also possible to inject content from another page into a modal panel:

![image](injection-modal.svg)

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.

### Code examples

The most simple form of injection is a link which loads content when clicked:

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

<section id="content">
...
…
</section>

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

In another situation you may not want to replace content but add new
content. You can easily do that by using a modifier:
In another situation you may not want to replace content but add new content. You can easily do that by using a modifier:

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

<section id="news">
...
…
</section>

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

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

<section id="section">
<form action="/my/form" class="pat-inject"
data-pat-inject="#content && #notice #notices::after">
...
…
</form>
</section>

When you submit this form two things happen: `#content` from the
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
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
of `#notices`.

XXX: cross references for above

XXX: give an overview of sections with cross references

### Where and what to inject

The most simple injection fetches a source via AJAX, extracts its body's
content and replaces the current body's content with it:
The most simple injection fetches a source via AJAX, extracts its body's content and replaces the current body's content with it:

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

Admittedly, this is a rare use case. However, it is ideal for understanding
the defaults:
Admittedly, this is a rare use case. However, it is ideal for understanding the defaults:

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

XXX: add references to the sections.

### Select individual elements via `#id`

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

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

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

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

The source id specified as part of `href`/`action` is the default source
selector and can be overriden for one or more injections:
The source id specified as part of `href`/`action` is the default source selector and can be overriden for one or more injections:

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

Sometimes it is useful to use the triggering element itself as a target.

This can be done by using the special *self* target:

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

### Modifiers

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

`::element`
Select the element, instead of the content.

Can be used for `source` and `target`, and in case of the latter be
combined with `::before`/`::after`.
Can be used for `source` and `target`, and in case of the latter be combined with `::before`/`::after`.

`::before`
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.
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.

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

`::after`
Like in CSS, the pseudo-element (a position) right before the content of
the selected element.
Like in CSS, the pseudo-element (a position) right before the content of the selected element.

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

Expand Down Expand Up @@ -227,8 +218,7 @@ Source element after target content:

### Using full-blown jQuery selectors

For both selectors every conceivable jQuery selector is allowed. If
multiple elements match, all will be replaced.
For both selectors every conceivable jQuery selector is allowed. If multiple elements match, all will be replaced.

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

### Non-existing targets

In case the target selector returns no elements, we will attempt to
create a matching element for you - the fuuuture, the apex of the vortex
of injection.
In case the target selector returns no elements, we will attempt to create a matching element for you.

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

<a class="pat-inject" href="sources.html"
data-pat-inject="target: #non-existing">
...
<a class="pat-inject" href="sources.html" data-pat-inject="target: #non-existing">
…
</body>

After the injection:

<a class="pat-inject" href="sources.html"
data-pat-inject="target: #non-existing">
...
<a class="pat-inject" href="sources.html" data-pat-inject="target: #non-existing">
…
<div id="non-existing">
Content of body of sources.html
</div>
Expand All @@ -271,13 +255,8 @@ After the injection:
Trigger
-------

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
to build infinite lists, where the injection element replaces itself
with the next 10 entries and a new `autoload-visible` injection link.
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
to build infinite lists, where the injection element replaces itself with the next 10 entries and a new `autoload-visible` injection link.

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

### Change href after injection

EXPERIMENTAL FEATURE

WILL DO SOMETHING WHEN COMBINED WITH MULTI-INJECTION
THIS FEATURE IS EXPERIMENTAL

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

before:

<a class="next-month pat-inject" href="calendar.html#2012-05"
data-pat-inject="post: #2012-04; next-href: #2012-05">Next month</a>
...
<a class="next-month pat-inject" ref="calendar.html#2012-05"
data-pat-inject="post: #2012-04; next-href: 2012-05">Next month</a>
…
<div class="month" id="2012-04">
...
…
</div>

after:

<a class="next-month" href="#2012-05"
data-pat-inject="">Next month</a>
<a class="next-month" href="#2012-05" data-pat-inject="">Next month</a>
…
<div class="month" id="2012-04">
…
</div>
<a class="next-month pat-inject" href="calendar.html#2012-06"
<a class="next-month pat-inject" ref="calendar.html#2012-06"
data-pat-inject="post: #2012-05; next-href: #2012-06">Next month</a>
…
<div class="month" id="2012-05">
…
</div>


### Injection type (modals)

XXX: TODO

THIS IS AN EXPERIMENTAL CONCEPT WHICH IS NOT IMPLEMENTED YET, but rather
still under discussion.

### Modals

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

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

### Properties

You can customise the behaviour of injection through options in the
`data-pat-inject` attribute.
You can customise the behaviour of injection through options in the `data-pat-inject` attribute.

<a href="#" class="pat-inject" data-pat-inject="type: modal">
…
Expand Down
Loading

0 comments on commit 001aa70

Please sign in to comment.