Skip to content

Commit a0d5cb0

Browse files
jcbrandjcbrand
committed
Merge branch 'demo'
2 parents c40745b + 99dc1f5 commit a0d5cb0

File tree

40 files changed

+288
-156
lines changed

40 files changed

+288
-156
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
55
<title>Demo page</title>
6-
<link rel="stylesheet" href="../common.css" type="text/css">
6+
<link rel="stylesheet" href="../../style/common.css" type="text/css">
77
<link rel="stylesheet" href="autoscale.css" type="text/css">
88
<style>
99
body {
@@ -20,6 +20,6 @@
2020
<p>Example of body scaling</p>
2121
<hr/>
2222

23-
<script data-main="../main" src="../../src/bower_components/requirejs/require.js" type="text/javascript" charset="utf-8"></script>
23+
<script src="../../bundles/patterns.min.js" type="text/javascript" charset="utf-8"></script>
2424
</body>
2525
</html>

‎demo/auto-scale/index.html‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,39 @@
1-
---
2-
layout: shell
3-
---
4-
<div class="narrow">
5-
Example of transforming with respect to the parent element:
6-
7-
<div class="smallbox">
8-
This is how it should look originally
9-
</div>
10-
<div class="smallbox pat-auto-scale">
11-
This is how it looks after scaling
12-
</div>
13-
</div>
14-
<div class="pat-auto-scale narrow">
15-
This is a narrow scaled to the body width
16-
</div>
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/description.md‎

Whitespace-only changes.

‎demo/auto-submit/index.html‎

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,58 @@
1-
---
2-
layout: shell
3-
---
4-
5-
<form action="pattern-test-response.html" method="get" data-pat-inject="target: #main-content" class="concise pat-inject">
6-
<fieldset class="horizontal pat-autosubmit">
7-
<label>
8-
Take your pick
9-
<select name="mySelect">
10-
<option value="A">
11-
Item A
12-
</option>
13-
<option value="B">
14-
Item B
15-
</option>
16-
</select>
17-
</label>
18-
<fieldset class="group checklist">
19-
<legend>We like options</legend>
20-
<label><input type="checkbox" name="cream" /> Cream</label>
21-
<label><input type="checkbox" name="syrup" /> Syrup</label>
22-
</fieldset>
23-
<label><input type="file" name="myFile" /> Upload a file</label>
24-
<fieldset class="group checklist radio">
25-
<legend>Choose your flavour</legend>
26-
<label><input type="radio" name="radio" /> Strawberry</label>
27-
<label><input type="radio" name="radio" /> Banana</label>
28-
<label><input type="radio" name="radio" /> Raspberry</label>
29-
</fieldset>
30-
<label>Free text field triggers with default delay <input type="text" name="keyup"/></label>
31-
<label>Free text field triggers with 3000 ms delay <input type="search" name="keyup" data-pat-autosubmit="delay: 3000ms" /></label>
32-
<label>Free text field triggers when field loses focus <input type="text" name="defocus" data-pat-autosubmit="delay: defocus" /></label>
33-
</fieldset>
34-
</form>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Auto submit</title>
6+
<link rel="stylesheet" href="../common.css" type="text/css">
7+
<link rel="stylesheet" href="autosubmit.css" type="text/css">
8+
<script data-main="../main" src="../../src/bower_components/requirejs/require.js"></script>
9+
</head>
10+
<body class="home">
11+
<section>
12+
<h1>Auto submit</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+
<form action="pattern-test-response.html" method="get" data-pat-inject="target: #main-content" class="concise pat-inject">
19+
<fieldset class="horizontal pat-autosubmit">
20+
<label>
21+
Take your pick
22+
<select name="mySelect">
23+
<option value="A">
24+
Item A
25+
</option>
26+
<option value="B">
27+
Item B
28+
</option>
29+
</select>
30+
</label>
31+
<fieldset class="group checklist">
32+
<legend>We like options</legend>
33+
<label><input type="checkbox" name="cream" /> Cream</label>
34+
<label><input type="checkbox" name="syrup" /> Syrup</label>
35+
</fieldset>
36+
<label><input type="file" name="myFile" /> Upload a file</label>
37+
<fieldset class="group checklist radio">
38+
<legend>Choose your flavour</legend>
39+
<label><input type="radio" name="radio" /> Strawberry</label>
40+
<label><input type="radio" name="radio" /> Banana</label>
41+
<label><input type="radio" name="radio" /> Raspberry</label>
42+
</fieldset>
43+
<label>Free text field triggers with default delay <input type="text" name="keyup"/></label>
44+
<label>Free text field triggers with 3000 ms delay <input type="search" name="keyup" data-pat-autosubmit="delay: 3000ms" /></label>
45+
<label>Free text field triggers when field loses focus <input type="text" name="defocus" data-pat-autosubmit="delay: defocus" /></label>
46+
</fieldset>
47+
</form>
48+
<div id="main-content">
49+
<p>Some content will appear here if you change anything in the form…</p>
50+
</div>
51+
</section>
52+
<section class="documentation">
53+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Documentation::element; target: self::element; trigger: autoload">Documentation</a>
54+
</section>
55+
</section>
56+
<a href="../index.html" class="pat-inject" data-pat-inject="source: #global-navigation::element; target: self::element; trigger: autoload">Global navigation</a>
57+
</body>
58+
</html>

‎demo/auto-submit/test.html‎

Lines changed: 2 additions & 2 deletions
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>Auto submit</title>
6-
<link rel="stylesheet" href="../common.css" type="text/css">
6+
<link rel="stylesheet" href="../../style/common.css" type="text/css">
77
<link rel="stylesheet" href="autosubmit.css" type="text/css">
8-
<script data-main="../main" src="../../src/bower_components/requirejs/require.js" type="text/javascript" charset="utf-8"></script>
8+
<script src="../../bundles/patterns.min.js" type="text/javascript" charset="utf-8"></script>
99
</head>
1010
<body class="home">
1111
<div class="row pat-equaliser">

‎demo/auto-suggest/documentation.md‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
1-
## Documentation
1+
# Auto suggest
22

3+
## Description
34
Auto suggest completes a user's input as he types, providing hints of possible input values in a dropdown list underneath the input field.
45

5-
This pattern takes three arguments:
6-
7-
- `words`: a list of words which will be automatically suggested when they match what the user types
8-
- `pre-fill`: the default values with which the input must be pre-filled
9-
- `placeholder`: text to be displayed in the input if no values are present
10-
11-
The values inside the input can be cleared by means of a button
12-
of type reset inside the same form as the input.
13-
14-
<button type="reset">Reset</button>
15-
16-
Example
17-
-------
18-
19-
<input type="text" class="pat-autosuggest" data-pat-autosuggest="words: Apple, Pear, Banana; pre-fill: Apple; placeholder: Search by tag…" />
6+
## Documentation
7+
…

‎demo/auto-suggest/index.html‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
1-
---
2-
layout: shell
3-
---
4-
5-
<p>Try the auto suggest pattern below with the terms 'Apples', 'Oranges', 'Pears' and 'Bananas'.</p>
6-
<input class="pat-autosuggest" placeholder="Pick some fruit" data-pat-autosuggest="words: Apples, Oranges, Pears, Bananas" type="text"></input>
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="../common.css" type="text/css">
7+
<link rel="stylesheet" href="select2.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>
13+
Auto suggest
14+
</h1>
15+
<section class="description">
16+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Description::element; target: self::element; trigger: autoload">Description</a>
17+
</section>
18+
<section class="demo">
19+
<h2>Demo</h2>
20+
<p>Try the auto suggest pattern below with the terms 'Apples', 'Oranges', 'Pears' and 'Bananas'.</p>
21+
<input class="pat-autosuggest" placeholder="Pick some fruit" data-pat-autosuggest="words: Apples, Oranges, Pears, Bananas" type="text"></input>
22+
</section>
23+
<section class="documentation">
24+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Documentation::element; target: self::element; trigger: autoload">Documentation</a>
25+
</section>
26+
</section>
27+
<a href="../index.html" class="pat-inject" data-pat-inject="source: #global-navigation::element; target: self::element; trigger: autoload">Global navigation</a>
28+
</body>
29+
</html>

‎demo/autofocus/index.html‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,32 @@
1-
---
2-
layout: shell
3-
---
4-
<fieldset class="concise">
5-
<label>Title <input autofocus="autofocus" type="text" value="Prefilled title"/></label>
6-
<label>Keywords <input autofocus="autofocus" type="text" placeholder="This field should get the focus"/></label>
7-
</fieldset>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Focus demo page</title>
6+
<link rel="stylesheet" href="../common.css" type="text/css">
7+
<link rel="stylesheet" href="autofocus.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>
13+
Autofocus
14+
</h1>
15+
<section class="description">
16+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Description::element; target: self::element; trigger: autoload">Description</a>
17+
</section>
18+
<section class="demo">
19+
<h2>Demo</h2>
20+
<fieldset class="concise">
21+
<label>Title <input autofocus="autofocus" type="text" value="Prefilled title"/></label>
22+
<label>Keywords <input autofocus="autofocus" type="text" placeholder="This field should get the focus"/></label>
23+
</fieldset>
24+
</section>
25+
<section class="documentation">
26+
<a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Documentation::element; target: self::element; trigger: autoload">Documentation</a>
27+
</section>
28+
</section>
29+
30+
<a href="../index.html" class="pat-inject" data-pat-inject="source: #global-navigation::element; target: self::element; trigger: autoload">Global navigation</a>
31+
</body>
32+
</html>

‎demo/bumper/bumper.css‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,25 @@
33
.pat-bumper {
44
}
55

6+
.bumped {
7+
position: fixed !important;
8+
z-index: 1;
9+
}
10+
11+
.bumped-top {
12+
top: 40px;
13+
}
14+
15+
.bumped-bottom {
16+
bottom: 40px;
17+
}
18+
19+
.bumped-right {
20+
right: 40px;
21+
}
22+
23+
.bumped-left {
24+
left: 40px;
25+
}
626

7-
/* @end */
27+
/* @end */

‎demo/bumper/documentation.md‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,33 @@ Below is a simple example of a bumper.
1212
</div>
1313

1414
When the user starts scrolling the page and an edge of the above div reaches an
15-
edge of the viewport, a `bumped` class will be added. For this to work the pattern
16-
will automatically set the ``position`` of the div to ``relative``.
15+
edge of the viewport, a `bumped` class will be added. Additionally, it will be
16+
assigned a `bumped-{top|left|right|bottom}` class depending on which edge(s) of
17+
the element was touched by the viewport. If you want the item to stick at the
18+
edge of the viewport you can use this CSS:
1719

18-
### Bumpers in scrolling containers
20+
.bumped {
21+
position: fixed;
22+
}
1923

20-
You can also put a bumper in a scrolling container. Here is an example:
24+
.bumped-top {
25+
top: 0;
26+
}
2127

22-
<div class="container">
23-
<em class="pat-bumper">Hello!</em>
24-
<p>...</p>
25-
</div>
28+
.bumped-bottom {
29+
bottom: 0;
30+
}
31+
32+
.bumped-left {
33+
left: 0;
34+
}
2635

27-
If the container has its overflow style set to ``auto`` or ``scroll`` and its
28-
contents do not fit in the available space the browser will automatically
29-
add scrollbars. The bumper pattern will detect this and *stick* the bumped
30-
element so it is always visible in its container.
36+
.bumped-right {
37+
right: 0;
38+
}
3139

32-
To implement this the bumper pattern will set the ``position`` of both the
33-
bumper and its scrolling container to ``relative``. In addition it is required
34-
that the scrolling container is the first positioned parent of the bumper
35-
(i.e. its *offset parent*).
40+
Please note that classes `bumped-left` and `bumped-right` will not be assigned
41+
at the same time. The same is true for `bumped-top` and `bumped-bottom`.
3642

3743
### Class specification
3844

@@ -59,7 +65,7 @@ The available options are:
5965

6066
| Property | Default value | Description | Type |
6167
| ----- | ------- | ----------- |
62-
| `margin` | 0| The distance (in pixels) from the edge of the element from which the 'bumped' behaviour will be activated. | Number |
68+
| `margin` | 0| The distance from the edge of the element from which the 'bumped' behaviour will be activated. | Size |
6369
| `selector` | *unset* | CSS selector for elements whose classes must be updated. | CSS selector |
6470
| `bump-add` | `bumped` | CSS class(es) to add when an element is bumped. | String |
6571
| `bump-remove` | *unset* | CSS class(es) to removed when an element is bumped. | String |

0 commit comments

Comments
 (0)