Skip to content

Commit 296a058

Browse files
clmathclmath
committed
add samples
1 parent 83a8cac commit 296a058

File tree

11 files changed

+227
-18
lines changed

11 files changed

+227
-18
lines changed

‎README.md

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -38,30 +38,22 @@ Then install dependencies with bower (or manually from github if you prefer to):
3838
$ cd requirejs-dplugins
3939
$ bower install
4040

41-
## Documentation
4241

43-
### has
44-
See [docs/has.md](./docs/has.md).
42+
## has
43+
This plugin provides an extensible API to manage feature detection.
4544

46-
### i18n
47-
See [docs/i18n.md](./docs/has.md).
45+
See [docs/has.md](./docs/has.md) and [samples/has.html](./samples/has.html) for documentation and sample.
4846

47+
## i18n
48+
This plugin provides provides an API to handle string translation.
4949

50+
See [docs/i18n.md](./docs/i18n.md) and [samples/i18n.html](./samples/i18n.html) for documentation and sample.
5051

51-
### maybe
52-
This plugin allows to require modules that may or may not exist. If the module is not found it will be `undefined`.
52+
## maybe
53+
This plugin allows to require modules that may or may not exist.
5354

55+
See [docs/maybe.md](./docs/maybe.md) and [samples/maybe.html](./samples/maybe.html) for documentation and sample.
5456

55-
#### Sample usage
56-
```
57-
require(["maybe!a/module/id"], function(module){
58-
if (module === undefined) {
59-
//do something when module IS NOT found
60-
} else {
61-
//do something else 2when module IS found
62-
}
63-
});
64-
```
6557

6658

6759
## Credits

‎docs/has.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: requirejs-dplugins/has
55

66
# requirejs-dplugins/has
77

8-
`requirejs-dplugins/has` provides standardized feature detection with an extensible API. It also implements the
8+
`requirejs-dplugins/has` provides an extensible API to manage feature detection. It also implements the
99
[requirejs plugin api](http://requirejs.org/docs/plugins.html) to provide conditional module loading.
1010

1111
It is based on the conventions in the [has.js project](https://github.com/phiggins42/has.js).

‎docs/maybe.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
layout: default
3+
title: requirejs-dplugins/maybe
4+
---
5+
6+
# requirejs-dplugins/maybe
7+
8+
`requirejs-dplugins/maybe` allows to require modules that may or may not exist.
9+
If the module is not found, there is an expected 404 in the console and the module will be `undefined`.
10+
11+
## Sample
12+
```
13+
require(["requirejs-dplugins/maybe!a/module/id"], function(module){
14+
if (module === undefined) {
15+
//do something when module IS NOT found
16+
} else {
17+
//do something else when module IS found
18+
}
19+
});
20+
```

‎samples/has.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Has</title>
5+
6+
<script type="text/javascript" src="../../requirejs/require.js"></script>
7+
8+
<script type="text/javascript">
9+
var inverse = (window.location.search.substring(1) === "inverse");
10+
11+
require.config({
12+
baseUrl: "../..",
13+
packages: [{
14+
name: "modules",
15+
location: "requirejs-dplugins/samples/modules"
16+
}],
17+
config: {
18+
"requirejs-dplugins/has": {
19+
inverseColor: inverse
20+
}
21+
}
22+
});
23+
</script>
24+
25+
<script type="text/javascript">
26+
require([
27+
"requirejs-dplugins/has",
28+
"requirejs-dplugins/has!inverseColor?modules/inverse:modules/classic"
29+
], function (has, colorPattern) {
30+
document.getElementById("box").innerHTML = colorPattern.msg;
31+
if (has("inverseColor")) {
32+
document.getElementsByTagName("body")[0].style.background = "black";
33+
document.getElementById("box").style.color = "black";
34+
document.getElementById("box").style.background = "white";
35+
}
36+
});
37+
</script>
38+
39+
<style>
40+
#box {
41+
font-size: 110%;
42+
color: white;
43+
background: black;
44+
margin: auto;
45+
margin-top: 12em;
46+
padding: 3em;
47+
width: 50em;
48+
text-align: center;
49+
}
50+
a {
51+
color: inherit;
52+
}
53+
</style>
54+
55+
</head>
56+
<body>
57+
<div id="box"></div>
58+
</body>
59+
</html>

‎samples/i18n.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>i18n</title>
5+
6+
<script type="text/javascript" src="../../requirejs/require.js"></script>
7+
8+
<script type="text/javascript">
9+
require.config({
10+
baseUrl: "../..",
11+
config: {
12+
"requirejs-dplugins/i18n": {
13+
locale: "fr"
14+
}
15+
}
16+
});
17+
</script>
18+
19+
<script type="text/javascript">
20+
require([
21+
"requirejs-dplugins/i18n!requirejs-dplugins/samples/nls/colors",
22+
"requirejs-dplugins/i18n!requirejs-dplugins/samples/nls/root/colors"
23+
], function (colors, colorsRoot) {
24+
var content;
25+
for (var color in colorsRoot) {
26+
content = "<th>"+ color +"</th>" +
27+
"<td>"+ color +"</td>" +
28+
"<td>"+ colors[color] +"</td>";
29+
var node = document.getElementById(color);
30+
node && (node.innerHTML = content);
31+
}
32+
});
33+
</script>
34+
35+
<style>
36+
table {
37+
border-collapse: collapse;
38+
margin: 2em;
39+
}
40+
th, td {
41+
padding: 0.2em 1em;
42+
border: 2px solid;
43+
}
44+
th {
45+
text-align: left;
46+
}
47+
td {
48+
text-align: center;
49+
}
50+
</style>
51+
52+
</head>
53+
<body>
54+
<table>
55+
<tr>
56+
<th></th>
57+
<th>Colors in root (en) locale</th>
58+
<th>Colors in fr locale</th>
59+
</tr>
60+
<tr id="red">
61+
</tr>
62+
<tr id="green">
63+
</tr>
64+
<tr id="blue">
65+
</tr>
66+
</table>
67+
</body>
68+
</html>

‎samples/maybe.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Maybe</title>
5+
6+
<script type="text/javascript" src="../../requirejs/require.js"></script>
7+
8+
<script type="text/javascript">
9+
require.config({
10+
baseUrl: "../..",
11+
packages: [{
12+
name: "modules",
13+
location: "requirejs-dplugins/samples/modules"
14+
}]
15+
});
16+
</script>
17+
18+
<script type="text/javascript">
19+
var dep = Math.random() < 0.5 ? "maybe" : "missingModule";
20+
require([
21+
"requirejs-dplugins/maybe!modules/"+dep
22+
], function (dep) {
23+
if (dep === undefined) {
24+
dep = {
25+
msg: "No module found."
26+
}
27+
}
28+
document.getElementById("box").innerHTML = dep.msg;
29+
});
30+
</script>
31+
32+
<style>
33+
#box {
34+
font-size: 110%;
35+
border: 2px solid black;
36+
margin: auto;
37+
margin-top: 12em;
38+
padding: 3em;
39+
width: 50em;
40+
text-align: center;
41+
}
42+
</style>
43+
44+
</head>
45+
<body>
46+
<div id="box"></div>
47+
</body>
48+
</html>

‎samples/modules/classic.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
define({
2+
msg: "This sample use the classic color scheme. <br/> <br/> <a href=\"?inverse\">Inverse color sheme</a>"
3+
});

‎samples/modules/inverse.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
define({
2+
msg: "This sample use the inversed color scheme. <br/> <br/> <a href=\"?\">Inverse color sheme</a>"
3+
});

‎samples/modules/maybe.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
define({
2+
msg: "The module maybe was here !"
3+
});

‎samples/nls/colors.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
define({
2+
fr: true,
3+
root: {
4+
red: "red",
5+
green: "green",
6+
blue: "blue"
7+
}
8+
});

0 commit comments

Comments
 (0)