Skip to content

Commit 42470b6

Browse files
Bug 1131447 - merge pull request mozilla-b2g#28111 from shamenchens:Bug1131447-FlingPlayerGaiaLoading to mozilla-b2g:master
2 parents f631384 + c3b525f commit 42470b6

16 files changed

+1028
-19
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "gaia-component",
3+
"version": "0.2.1",
4+
"authors": [
5+
"Wilson Page <[email protected]>"
6+
],
7+
"main": "gaia-component.js",
8+
"license": "MIT",
9+
"ignore": [
10+
"**/.*",
11+
"node_modules",
12+
"bower_components",
13+
"test",
14+
"tests"
15+
],
16+
"homepage": "https://github.com/gaia-components/gaia-component",
17+
"_release": "0.2.1",
18+
"_resolution": {
19+
"type": "version",
20+
"tag": "v0.2.1",
21+
"commit": "bf9a25d6673e3481f2c5544d876dcf3e8ba86d40"
22+
},
23+
"_source": "git://github.com/gaia-components/gaia-component.git",
24+
"_target": "~0.2.0",
25+
"_originalSource": "gaia-components/gaia-component"
26+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# gaia-component [![](https://travis-ci.org/gaia-components/gaia-component.svg)](https://travis-ci.org/gaia-components/gaia-component)
2+
3+
A wrapper around `document.registerElement()` to define a custom-element with workarounds for gaps in the Gecko platform, plus some convenience methods.
4+
5+
## Installation
6+
7+
```bash
8+
$ bower install gaia-components/gaia-component
9+
```
10+
11+
## Examples
12+
13+
- [Example](http://gaia-components.github.io/gaia-component/)
14+
15+
## Usage
16+
17+
```js
18+
var MyComponent = component.register('my-component', {
19+
created: function() {
20+
21+
// Creates a shadow-root and
22+
// puts your template in it
23+
this.setupShadowRoot();
24+
},
25+
26+
attributeChanged: function() {},
27+
attached: function() {},
28+
detached: function() {},
29+
30+
template: `
31+
<button>I live in shadow-dom</button>
32+
<style>
33+
button { color: red }
34+
</style>
35+
`,
36+
37+
// Some CSS doesn't work
38+
// in shadow-dom stylesheets,
39+
// this CSS gets put in the <head>
40+
globalCss: `
41+
@keyframes my-animation { ... }
42+
@font-face { ... }
43+
`,
44+
45+
// Property descriptors that get defined
46+
// on the prototype and get called
47+
// when matching attributes change
48+
attrs: {
49+
customAttr: {
50+
get: function() { return this._customAttr; },
51+
set: function(value) { this._customAttr = value; }
52+
}
53+
}
54+
});
55+
56+
var myComponent = new MyComponent();
57+
58+
myComponent.setAttribute('custom-attr', 'foo');
59+
myComponent.customAttr; //=> 'foo';
60+
```
61+
62+
## Tests
63+
64+
1. Ensure Firefox Nightly is installed on your machine.
65+
2. `$ npm install`
66+
3. `$ npm test`
67+
68+
If your would like tests to run on file change use:
69+
70+
`$ npm run test-dev`
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "gaia-component",
3+
"version": "0.2.1",
4+
"authors": [
5+
"Wilson Page <[email protected]>"
6+
],
7+
"main": "gaia-component.js",
8+
"license": "MIT",
9+
"ignore": [
10+
"**/.*",
11+
"node_modules",
12+
"bower_components",
13+
"test",
14+
"tests"
15+
]
16+
}

0 commit comments

Comments
 (0)