Skip to content

Commit d9f3eb3

Browse files
committed
Merge branch 'polymer-begone' into gh-pages
2 parents 2c6b04b + 8221f14 commit d9f3eb3

20 files changed

+1806
-203
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
bower_components
22
node_modules
33
demos/audio
4+
dist/images
5+
/*.gif

README.md

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,47 @@ _The GIF tag the internet deserves_
66

77
**<x-gif>** is a web component for flexible GIF playback. Speed them up, slow them down, play them in reverse, synch multiple beats to a rhythm, synch them to audio, whatever you like.
88

9-
1. Import Polymer
10-
```html
11-
<script src="bower_components/platform/platform.js"></script>
12-
```
9+
```html
10+
<x-gif src="probably_cats.gif"></x-gif>
11+
```
12+
13+
Playback modes:
14+
15+
Mutually exclusive. Can't be changed once initialised (create a new x-gif if you want a new mode)
16+
17+
`speed="1.0"` (default mode)
18+
Plays back the GIF at its natural framerate multiplied by the value of the attribute. Can be updated and will have immediate effect.
19+
20+
`sync`
21+
Defers playback to an external object. The DOM element will then expose a `clock` function to facilitate playback. Cannot be changed.
22+
23+
`bpm="120"`
24+
Syncs GIFs to a given beats-per-minute. If multiple x-gifs are on the page, they will all be synced together. By default, will spread long GIFs over multiple beats, unless the `snap` option is also included. Uses `sync` and `clock` under the hood. Can be changed and will take immediate effect.
25+
26+
Options:
27+
28+
`stopped`
29+
Regardless of playback mode, this will prevent the GIF from animating. Removing this attribute resumes playback. In `speed` mode, the GIF will always resume playback from the beginning.
30+
31+
`fill`
32+
Causes the GIF to expand to cover its container, like if you had used `background-size: cover; background-position: 50% 50%` with a normal GIF. Without `fill`, an x-gif behaves like an inline-block element, just like a normal <img> tag.
33+
34+
`n-times="3.0"` (speed mode only)
35+
Stops playback (by adding the attribute `stopped`) after a set number of times. Can be fractional e.g. `0.9` will play the first 90% of the GIF then stop. Removing the `stopped` attribute will restart the playback.
36+
37+
`snap` (sync & bpm modes only)
38+
Instead of allowing longer GIFs to sync to multiple beats, force them to fit into only one.
39+
40+
`ping-pong`
41+
Boolean attribute. Plays the GIF front-to-back then back-to-front, which looks more awesome for some GIFs. Works with all playback modes. Can be removed/added at any time.
42+
43+
Debugging:
1344

14-
2. Import X-Gif
15-
```html
16-
<link rel="import" href="bower_components/x-gif/dist/x-gif.html">
17-
```
45+
`debug`
46+
Turns on debug output from the Gif Exploder, which can help track down errors with some GIFs being parsed incorrectly.
1847

19-
3. Enjoy limitless GIF possibilities
20-
```html
21-
<x-gif src="probably_cats.gif"></x-gif>
22-
```
48+
`exploded`
49+
For visual inspection of the frames. Stops playback, and renders each frame out side-by-side. Many frames will appear semi-transparent, because that's how GIFs work. But this might come in handy.
2350

2451
What does it do?
2552

@@ -48,12 +75,12 @@ Breaks the GIF across 1 or more _beats_ (depending on how long the GIF is), wher
4875
<x-gif src="something_dumb_from_buzzfeed.gif" bpm="120"></x-gif>
4976
```
5077

51-
### Hard-bpm
78+
### snap-bpm
5279

5380
Just like `bpm` but locks all GIFs to one _beat_, regardless of how long they were originally.
5481

5582
```html
56-
<x-gif src="something_dumb_from_buzzfeed.gif" hard-bpm="120"></x-gif>
83+
<x-gif src="something_dumb_from_buzzfeed.gif" snap-bpm="120"></x-gif>
5784
```
5885

5986
### Stopped
@@ -77,10 +104,11 @@ Defers playback to an external clock, such as beat data from an audio stream to
77104

78105
## Status
79106

80-
* **Polymer element - DONE!**
81-
* Angular directive - TODO
82-
* React component - TODO
83-
* Ember component - TODO
107+
* Web Component - YES! (zero-dependencies on Chrome 36!)
108+
* Polymer element - Nah, just use the Web Component
109+
* Angular directive - Nah, just use the Web Component
110+
* React component - Nah, just use the Web Component
111+
* Ember component - Nah, just use the Web Component
84112

85113
## Contributing
86114

demos/audio.html

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Toggle Button</title>
5-
<script src="../dist/platform.js"></script>
4+
<title>Autoplay audio</title>
5+
<script>
6+
if ('registerElement' in document
7+
&& 'createShadowRoot' in HTMLElement.prototype
8+
&& 'import' in document.createElement('link')
9+
&& 'content' in document.createElement('template')) {
10+
// We're using a browser with native WC support!
11+
} else {
12+
document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
13+
}
14+
</script>
615
<link rel="import" href="../dist/x-gif.html">
716
<style>
817
html, body{
@@ -14,7 +23,7 @@
1423
}
1524
</style>
1625
</head>
17-
<body unresolved>
26+
<body>
1827
<x-gif fill sync></x-gif>
1928
<audio loop>
2029
<source src="cc_audio/encom_part_ii.ogg" type="audio/ogg">
@@ -33,32 +42,30 @@
3342
"http://i.imgur.com/m25uYzq.gif",
3443
"http://i.imgur.com/ifR7csn.gif"
3544
];
36-
window.addEventListener('polymer-ready', function (e) {
37-
var xGif = document.querySelector('x-gif'),
38-
audio = document.querySelector('audio'),
39-
metadata,
40-
gifNr = 0,
41-
changeGif = function () {
42-
setTimeout(changeGif, 10000);
43-
xGif.src = gifs[gifNr++ % gifs.length];
44-
};
45-
changeGif();
45+
var xGif = document.querySelector('x-gif'),
46+
audio = document.querySelector('audio'),
47+
metadata,
48+
gifNr = 0,
49+
changeGif = function () {
50+
setTimeout(changeGif, 10000);
51+
xGif.setAttribute('src', gifs[gifNr++ % gifs.length]);
52+
};
53+
changeGif();
4654

47-
var xhr = new XMLHttpRequest();
48-
xhr.open('GET', 'cc_audio/encom_part_ii.json', true);
49-
xhr.onload = function () {
50-
metadata = JSON.parse(this.response);
51-
setupAudioSynching(audio, xGif, metadata);
52-
audio.play();
53-
}
54-
xhr.send();
55+
var xhr = new XMLHttpRequest();
56+
xhr.open('GET', 'cc_audio/encom_part_ii.json', true);
57+
xhr.onload = function () {
58+
metadata = JSON.parse(this.response);
59+
setupAudioSynching(audio, xGif, metadata);
60+
audio.play();
61+
}
62+
xhr.send();
5563

56-
window.addEventListener('resize', function () {
57-
[].forEach.call(document.querySelectorAll('x-gif'), function (elem) {
58-
elem.relayout();
59-
});
60-
})
61-
});
64+
window.addEventListener('resize', function () {
65+
[].forEach.call(document.querySelectorAll('x-gif'), function (elem) {
66+
elem.relayout();
67+
});
68+
})
6269
</script>
6370
<script>
6471
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

demos/exploded.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<html>
33
<head>
44
<title>Exploded</title>
5-
<script src="../dist/platform.js"></script>
5+
<!--<script src="../dist/platform.js"></script>-->
66
<link rel="import" href="../dist/x-gif.html">
77
<style>
88
body { background-color: #eee; }
99
body > * { display: inline-block; }
1010
</style>
1111
</head>
12-
<body unresolved>
12+
<body>
1313
<!--<polymer-ui-toggle-button></polymer-ui-toggle-button>-->
1414
<!--<img src="http://i.imgur.com/RY2vTBQ.gif"/>-->
1515
<x-gif src="http://i.imgur.com/m25uYzq.gif" exploded></x-gif>

demos/stoppable.html

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,28 @@
22
<html>
33
<head>
44
<title>Toggle Button</title>
5-
<script src="../dist/platform.js"></script>
5+
<script>
6+
if ('registerElement' in document
7+
&& 'createShadowRoot' in HTMLElement.prototype
8+
&& 'import' in document.createElement('link')
9+
&& 'content' in document.createElement('template')) {
10+
// We're using a browser with native WC support!
11+
} else {
12+
document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
13+
}
14+
</script>
615
<link rel="import" href="../dist/x-gif.html">
7-
<style>
8-
</style>
916
</head>
10-
<body unresolved>
17+
<body>
1118
<h1>Click a gif to stop or start it</h1>
12-
<x-gif src="http://i.imgur.com/ifR7csn.gif"></x-gif>
13-
<x-gif stopped src="http://i.imgur.com/ifR7csn.gif"></x-gif>
19+
<x-gif src="/dist/images/stars.gif"></x-gif>
20+
<x-gif stopped src="/dist/images/stars.gif"></x-gif>
1421
<script>
15-
window.addEventListener('polymer-ready', function(e) {
16-
document.querySelectorAll('x-gif').array().forEach(function (el) {
17-
el.addEventListener('click', function () {
18-
el.stopped = (el.stopped == null) ? true : null;
19-
})
22+
[].forEach.call(document.querySelectorAll('x-gif'), function (el) {
23+
el.addEventListener('click', function () {
24+
el.hasAttribute('stopped') ? el.removeAttribute('stopped') : el.setAttribute('stopped', '')
2025
})
21-
});
26+
})
2227
</script>
2328
</body>
2429
</html>

demos/synched_playback.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var setupAudioSynching = function (audio, xGif, metadata) {
1+
var setupAudioSynching = function (audio, xGifs, metadata) {
22
var synchOffset = -0.1;
33

44
audio.addEventListener('playing', function () {
@@ -24,7 +24,9 @@ var setupAudioSynching = function (audio, xGif, metadata) {
2424

2525
var sinceLastBeat = currentTime - beat.start,
2626
beatFraction = sinceLastBeat / beat.duration;
27-
xGif.clock(beatIndex, beat.duration * 1000 / audio.playbackRate, beatFraction);
27+
[].forEach.call(xGifs, function (xGif) {
28+
xGif.clock(beatIndex, beat.duration * 1000 / audio.playbackRate, beatFraction);
29+
})
2830
}
2931
}
3032
animationLoop();

demos/visual_test.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Toggle Button</title>
5-
<script src="../dist/platform.js"></script>
4+
<title>X-GIF MULTIBALL</title>
5+
<script>
6+
if ('registerElement' in document
7+
&& 'createShadowRoot' in HTMLElement.prototype
8+
&& 'import' in document.createElement('link')
9+
&& 'content' in document.createElement('template')) {
10+
// We're using a browser with native WC support!
11+
} else {
12+
document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
13+
}
14+
</script>
615
<link rel="import" href="../dist/x-gif.html">
716
<style>
817
</style>
918
</head>
10-
<body unresolved>
19+
<body>
1120
<h1>Any of these dun broken?</h1>
1221
<x-gif src="https://s3-us-west-2.amazonaws.com/x-gif-tests/yeahnah.gif"></x-gif>
1322
<x-gif src="https://s3-us-west-2.amazonaws.com/x-gif-tests/explosion.gif"></x-gif>

dist/polymer-body.html

Lines changed: 0 additions & 33 deletions
This file was deleted.

dist/x-gif.angular.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)