Skip to content

Commit 662e428

Browse files
jcbrandjcbrand
committed
Merge master into release branch
2 parents 9df8536 + fda3435 commit 662e428

File tree

367 files changed

+39457
-17
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

367 files changed

+39457
-17
lines changed

‎RELEASE.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
## Merge master into the "release" branch
44

5-
git checkout -b release
6-
git merge master
5+
git checkout --track origin/release
6+
git merge --no-commit --no-ff master
77

88
## Make sure all tests are passing
99

@@ -22,4 +22,4 @@
2222
## Tag the release and set it free
2323

2424
git tag 2.0.0
25-
git push --tags
25+
git push && git push --tags

‎changes.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
# Changelog
2+
3+
## 2.0.2 - Sept. 8, 2014
4+
5+
- #377 Local inject doesn't work for IE10 and 11
6+
- #378 pat-switch detecting click on container of link prevent default on anchor
7+
- #379 Local inject doesn't work for IE10 and 11
28

39

410
## 2.0.1 - Sept. 2, 2014

‎demo/auto-scale/autoscale.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* @group Example CSS */
2+
3+
.narrow {
4+
position: relative;
5+
width: 50%;
6+
margin: 0 auto;
7+
border-width: 1px;
8+
border-color: #ccc;
9+
border-style: dotted;
10+
padding: 1em;
11+
}
12+
13+
.smallbox {
14+
width: 12em;
15+
height: 12em;
16+
border-width: 2px;
17+
border-color: #CCC;
18+
border-style: dashed;
19+
padding: 1em;
20+
margin: 0 auto;
21+
}
22+
23+
24+
25+
/* @end */
26+
27+
/* @group Pattern CSS */
28+
29+
.pat-auto-scale {
30+
transform-origin: left top;
31+
opacity: 0;
32+
transition: opacity 0.2s;
33+
}
34+
35+
.pat-auto-scale.scaled {
36+
opacity: 1;
37+
}
38+
39+
/* @end */

‎demo/auto-scale/documentation.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Auto scale
2+
3+
## Description
4+
Auto scale scales up any element to the size of it''s parent element. A typical use case is to let an entire webpage scale up to the width of the browser window, as an advanced kind of responsive design.
5+
6+
## Documentation
7+
8+
The script scales an element with the .pat-auto-scale class by the ratio
9+
of its parent width and its own. If the pattern is applied to the body,
10+
the element is scaled with respect to the viewport''s width. The scaling
11+
factor is automatically updated on window resize.
12+
13+
<div class="column">
14+
<img class="pat-auto-scale" src="header.png" alt=""/>
15+
<p>Lorem ipsum</p>
16+
</div>
17+
18+
19+
After an element has been scaled a new scaled class is be added.
20+
21+
<div class="column">
22+
<img class="pat-auto-scale scaled" src="header.png" alt="" style="transform: scale(2.1);"/>
23+
<p>Lorem ipsum</p>
24+
</div>
25+
26+
The default scaling method can be changed via an `data-pat-auto-scale`
27+
attribute.
28+
29+
<div class="column">
30+
<img class="pat-auto-scale" data-pat-auto-scale="method: zoom" src="header.png" alt=""/>
31+
<p>Lorem ipsum</p>
32+
</div>
33+
34+
The available methods are:
35+
36+
* `scale`: Use a [scale transform](http://www.w3.org/TR/css3-2d-transforms/#two-d-transform-functions). (default)
37+
* `[zoom](http://msdn.microsoft.com/en-us/library/ms531189(VS.85).aspx)1
38+
39+
### Browser support
40+
41+
Patterns will check if the browser supports the requested method; if the requested
42+
method is known to be broken another method will be used. The current overrides
43+
are:
44+
45+
* Firefox zoom does not not support zoom ([mozilla bug
46+
\#390936](https://bugzilla.mozilla.org/show_bug.cgi?id=390936)) so the scale
47+
transform is always used.
48+
* IE versions before 9 do not support the scale transform, so zoom is always
49+
used.
50+
51+
### Properties
52+
53+
The depends can be configured through a `data-pat-auto-scale` attribute.
54+
The available options are:
55+
56+
| Property | Default value | Values | Description | Type |
57+
| -------- | ------------- | ------ | ----------- | ---- |
58+
| `method` | `scale` | `scale` `zoom` | The scaling method to use. One of `scale` or `zoom` | Mutually exclusive |
59+
| `min-width` | *unset* | | The minimum width in pixels to scale to. | Number |
60+
| `max-width` | *unset* | | The maximum width in pixels to scale to. | Number |
61+

‎demo/auto-scale/example-2.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Demo page</title>
6+
<link rel="stylesheet" href="../../style/common.css" type="text/css">
7+
<link rel="stylesheet" href="autoscale.css" type="text/css">
8+
<style>
9+
body {
10+
width: 500px;
11+
max-width: auto;
12+
background: silver;
13+
margin: 0 !important;
14+
padding: 50px;
15+
}
16+
</style>
17+
</head>
18+
<body class="pat-auto-scale">
19+
<hr/>
20+
<p>Example of body scaling</p>
21+
<hr/>
22+
23+
<script src="../../bundles/patterns.min.js" type="text/javascript" charset="utf-8"></script>
24+
</body>
25+
</html>

‎demo/auto-scale/icon.svg

Lines changed: 12 additions & 0 deletions
Loading

‎demo/auto-scale/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Auto scale</title>
6+
<link rel="stylesheet" href="../common.css" type="text/css">
7+
<link rel="stylesheet" href="autoscale.css" type="text/css">
8+
<script data-main="../main" src="../../src/bower_components/requirejs/require.js"></script>
9+
</head>
10+
<body>
11+
<section>
12+
<h1>Auto scale</h1>
13+
<section class="description">
14+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Description::element; target: self::element; trigger: autoload">Description</a>
15+
</section>
16+
<section class="demo">
17+
<h2>Demo</h2>
18+
<div class="narrow">
19+
Example of transforming with respect to the parent element:
20+
21+
<div class="smallbox">
22+
This is how it should look originally
23+
</div>
24+
<div class="smallbox pat-auto-scale">
25+
This is how it looks after scaling
26+
</div>
27+
</div>
28+
<div class="pat-auto-scale narrow">
29+
This is a narrow scaled to the body width
30+
</div>
31+
</section>
32+
<section class="documentation">
33+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Documentation::element; target: self::element; trigger: autoload">Documentation</a>
34+
</section>
35+
</section>
36+
<a href="../index.html" class="pat-inject" data-pat-inject="source: #global-navigation::element; target: self::element; trigger: autoload">Global navigation</a>
37+
38+
</body>
39+
</html>

‎demo/auto-submit/autosubmit.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

‎demo/auto-submit/description.md

Whitespace-only changes.

‎demo/auto-submit/documentation.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Auto submit
2+
3+
## Description
4+
Auto submit will submit what the user fills out on a form without the need for the user to press the submit button. It can be used to incrementally send form input data to a server.
5+
6+
For instance to create a live search pattern where the search results update on every keypress.
7+
8+
## Documentation
9+
The autosubmit pattern submits a form if a form element changes. It is
10+
enabled by class "pat-autosubmit" for individual form elements, on
11+
grouping elements for all elements in the group, and on forms for all
12+
elements of the form.
13+
14+
Only one element:
15+
16+
<form>
17+
<input class="pat-autosubmit" type="text" name="q" placeholder="Search query"/>
18+
</form>
19+
20+
On a fieldset:
21+
22+
<form>
23+
<fieldset class="pat-autosubmit">
24+
<input type="text" name="q" placeholder="Search query"/>
25+
<label><input type="checkbox" name="local"/> Only search in this section</label>
26+
</fieldset>
27+
</form>
28+
29+
And on the form:
30+
31+
<form class="pat-autosubmit">
32+
<fieldset>
33+
<input type="text" name="q" placeholder="Search query"/>
34+
<label><input type="checkbox" name="local"/> Only search in this section</label>
35+
</fieldset>
36+
</form>
37+
38+
### What constitutes a change
39+
40+
While for a checkbox a change is clearly defined as uncheck/check, for
41+
input fields there are more options.
42+
43+
Without configuration, a change will be detected 400ms after the last
44+
keypress in an input field. Naturally, if two keypresses are more than
45+
400ms apart, two submits will be triggered.
46+
47+
You can configure this behaviour with the delay option.
48+
49+
no delay:
50+
51+
<form>
52+
<input name="q" class="pat-autosubmit" data-pat-autosubmit="delay: 0ms"/>
53+
</form>
54+
55+
longer delay:
56+
57+
<form>
58+
<input name="q" class="pat-autosubmit" data-pat-autosubmit="delay: 1000ms"/>
59+
</form>
60+
61+
delay until element loses focus:
62+
63+
<form>
64+
<input name="q" class="pat-autosubmit" data-pat-autosubmit="delay: defocus"/>
65+
</form>
66+
67+
### Combining with injection
68+
69+
Autosubmit is most useful when combined with injection. This makes it
70+
trivial to create a form that automatically loads content and displays
71+
it on the page. Here is a minimal search page:
72+
73+
<form class="pat-inject pat-autosubmit" action="/search" data-pat-inject="target: #results">
74+
<input type="text" name="q" placeholder="Search query"/>
75+
<label><input type="checkbox" name="local"/> Only search in this section</label>
76+
</form>
77+
78+
<section id="results">
79+
... present search results here
80+
</section>
81+
82+
As soon as the user starts entering text in the search field or changes
83+
the local-search toggle search requests will send to the server and the
84+
results will be inserted into the existing page by replacing the content
85+
of the *results* section.

0 commit comments

Comments
 (0)