using ES6 here makes this so much nicer!

geelen · geelen · commit b246ace38d94 · 2014-07-29T14:34:33.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 bower_components
 node_modules
 demos/audio
+dist/images
diff --git a/README.md b/README.md
@@ -6,20 +6,47 @@ _The GIF tag the internet deserves_
 
 **&lt;x-gif&gt;** 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.
 
-1. Import Polymer
-  ```html
-  <script src="bower_components/platform/platform.js"></script>
-  ```
+```html
+<x-gif src="probably_cats.gif"></x-gif>
+```
+
+Playback modes:
+
+Mutually exclusive. Can't be changed once initialised (create a new x-gif if you want a new mode)
+
+`speed="1.0"` (default mode)
+Plays back the GIF at its natural framerate multiplied by the value of the attribute. Can be updated and will have immediate effect.
+
+`sync`
+Defers playback to an external object. The DOM element will then expose a `clock` function to facilitate playback. Cannot be changed.
+
+`bpm="120"`
+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.
+
+Options:
+
+`stopped`
+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.
+
+`fill`
+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.
+
+`n-times="3.0"` (speed mode only)
+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.
+
+`hard` (sync & bpm modes only)
+Instead of allowing longer GIFs to sync to multiple beats, force them to fit into only one.
+
+`ping-pong`
+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.
+
+Debugging:
 
-2. Import X-Gif
-  ```html
-  <link rel="import" href="bower_components/x-gif/dist/x-gif.html">
-  ```
+`debug`
+Turns on debug output from the Gif Exploder, which can help track down errors with some GIFs being parsed incorrectly.
 
-3. Enjoy limitless GIF possibilities
-  ```html
-  <x-gif src="probably_cats.gif"></x-gif>
-  ```
+`exploded`
+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.
 
 What does it do?
 
@@ -77,10 +104,11 @@ Defers playback to an external clock, such as beat data from an audio stream to
 
 ## Status
 
-* **Polymer element - DONE!**
-* Angular directive - TODO
-* React component - TODO
-* Ember component - TODO
+* Web Component - YES! (zero-dependencies on Chrome 36!)
+* Polymer element - Nah, just use the Web Component
+* Angular directive - Nah, just use the Web Component
+* React component - Nah, just use the Web Component
+* Ember component - Nah, just use the Web Component
 
 ## Contributing
 
diff --git a/demos/stoppable.html b/demos/stoppable.html
@@ -16,8 +16,8 @@
   </head>
   <body>
     <h1>Click a gif to stop or start it</h1>
-    <x-gif src="http://i.imgur.com/ifR7csn.gif"></x-gif>
-    <x-gif stopped src="http://i.imgur.com/ifR7csn.gif"></x-gif>
+    <x-gif src="/dist/images/stars.gif"></x-gif>
+    <x-gif stopped src="/dist/images/stars.gif"></x-gif>
     <script>
       [].forEach.call(document.querySelectorAll('x-gif'), function (el) {
         el.addEventListener('click', function () {
diff --git a/dist/x-gif.angular.js b/dist/x-gif.angular.js
@@ -2086,7 +2086,6 @@ var $__default = (function() {
 
 },{}],6:[function(require,module,exports){
 "use strict";
-"use strict";
 Object.defineProperties(exports, {
   default: {get: function() {
       return $__default;
diff --git a/dist/x-gif.js b/dist/x-gif.js
@@ -1998,7 +1998,6 @@ var $__default = (function() {
 
 },{"./gif.js":5,"./stream_reader.js":8,"./utils.js":9}],4:[function(require,module,exports){
 "use strict";
-"use strict";
 var Playback = $traceurRuntime.assertObject(require('./playback.js')).default;
 var Strategies = $traceurRuntime.assertObject(require('./strategies.js')).default;
 var XGif = function() {
@@ -2089,7 +2088,6 @@ var $__default = (function() {
 
 },{}],6:[function(require,module,exports){
 "use strict";
-"use strict";
 Object.defineProperties(exports, {
   default: {get: function() {
       return $__default;
diff --git a/dist/x-gif.raw.js b/dist/x-gif.raw.js
@@ -1998,86 +1998,90 @@ var $__default = (function() {
 
 },{"./gif.js":5,"./stream_reader.js":8,"./utils.js":9}],4:[function(require,module,exports){
 "use strict";
-"use strict";
 var Playback = $traceurRuntime.assertObject(require('./playback.js')).default;
 var Strategies = $traceurRuntime.assertObject(require('./strategies.js')).default;
-(function(document, owner) {
-  var XGifController = function(context) {
-    var $__0 = this;
-    this.context = context;
-    this.shadow = this.context.createShadowRoot();
-    var template = owner.querySelector("#template").content.cloneNode(true);
-    this.shadow.appendChild(template);
-    if (context.hasAttribute('exploded')) {
-      this.playbackStrategy = 'noop';
-    } else if (context.hasAttribute('sync')) {
-      this.playbackStrategy = 'noop';
-    } else if (context.getAttribute('hard-bpm')) {
-      this.playbackStrategy = 'hardBpm';
-    } else if (context.getAttribute('bpm')) {
-      this.playbackStrategy = 'bpm';
-    } else {
-      this.speed = parseFloat(context.getAttribute('speed')) || 1.0;
-      this.playbackStrategy = 'speed';
-    }
-    this.srcChanged = function(src) {
-      if (!src)
-        return;
-      console.log("Loading " + src);
-      var playbackStrategy = Strategies[this.playbackStrategy];
-      this.playback = new Playback(this, this.shadow.querySelector('#frames'), src, {
-        pingPong: context.hasAttribute('ping-pong'),
-        fill: context.hasAttribute('fill'),
-        stopped: context.hasAttribute('stopped')
-      });
-      this.playback.ready.then(playbackStrategy.bind(this));
-    };
-    this.srcChanged(context.getAttribute('src'));
-    this.speedChanged = function(speedStr) {
-      this.speed = parseFloat(speedStr) || this.speed;
-      if (this.playback)
-        this.playback.speed = this.speed;
-    };
-    this.stoppedChanged = function(newVal) {
-      var nowStop = newVal != null;
-      if (this.playback && nowStop && !this.playback.stopped) {
-        this.playback.stop();
-      } else if (this.playback && !nowStop && this.playback.stopped) {
-        this.playback.start();
-      }
-    };
-    context.togglePingPong = (function() {
-      if (context.hasAttribute('ping-pong')) {
-        context.removeAttribute('ping-pong');
-      } else {
-        context.setAttribute('ping-pong', '');
-      }
-      if ($__0.playback)
-        $__0.playback.pingPong = context.hasAttribute('ping-pong');
-    });
-    context.clock = (function(beatNr, beatDuration, beatFraction) {
-      if ($__0.playback && $__0.playback.gif)
-        $__0.playback.fromClock(beatNr, beatDuration, beatFraction);
-    });
-    context.relayout = (function() {
-      if (context.hasAttribute('fill'))
-        $__0.playback.scaleToFill();
+var owner = (document._currentScript || document.currentScript).ownerDocument;
+var XGifController = function XGifController(xgif) {
+  var $__0 = this;
+  this.xgif = xgif;
+  this.shadow = this.xgif.createShadowRoot();
+  var template = owner.querySelector("#template").content.cloneNode(true);
+  this.shadow.appendChild(template);
+  if (xgif.hasAttribute('exploded')) {
+    this.playbackStrategy = 'noop';
+  } else if (xgif.hasAttribute('sync')) {
+    this.playbackStrategy = 'noop';
+  } else if (xgif.getAttribute('hard-bpm')) {
+    this.playbackStrategy = 'hardBpm';
+  } else if (xgif.getAttribute('bpm')) {
+    this.playbackStrategy = 'bpm';
+  } else {
+    this.speed = parseFloat(xgif.getAttribute('speed')) || 1.0;
+    this.playbackStrategy = 'speed';
+  }
+  this.srcChanged = function(src) {
+    if (!src)
+      return;
+    console.log("Loading " + src);
+    var playbackStrategy = Strategies[this.playbackStrategy];
+    this.playback = new Playback(this, this.shadow.querySelector('#frames'), src, {
+      pingPong: xgif.hasAttribute('ping-pong'),
+      fill: xgif.hasAttribute('fill'),
+      stopped: xgif.hasAttribute('stopped')
     });
+    this.playback.ready.then(playbackStrategy.bind(this));
   };
-  var XGif = Object.create(HTMLElement.prototype);
-  XGif.createdCallback = function() {
-    this.controller = new XGifController(this);
+  this.srcChanged(xgif.getAttribute('src'));
+  this.speedChanged = function(speedStr) {
+    this.speed = parseFloat(speedStr) || this.speed;
+    if (this.playback)
+      this.playback.speed = this.speed;
+  };
+  this.stoppedChanged = function(newVal) {
+    var nowStop = newVal != null;
+    if (this.playback && nowStop && !this.playback.stopped) {
+      this.playback.stop();
+    } else if (this.playback && !nowStop && this.playback.stopped) {
+      this.playback.start();
+    }
   };
-  XGif.attributeChangedCallback = function(attribute, oldVal, newVal) {
+  xgif.togglePingPong = (function() {
+    if (xgif.hasAttribute('ping-pong')) {
+      xgif.removeAttribute('ping-pong');
+    } else {
+      xgif.setAttribute('ping-pong', '');
+    }
+    if ($__0.playback)
+      $__0.playback.pingPong = xgif.hasAttribute('ping-pong');
+  });
+  xgif.clock = (function(beatNr, beatDuration, beatFraction) {
+    if ($__0.playback && $__0.playback.gif)
+      $__0.playback.fromClock(beatNr, beatDuration, beatFraction);
+  });
+  xgif.relayout = (function() {
+    if (xgif.hasAttribute('fill'))
+      $__0.playback.scaleToFill();
+  });
+};
+($traceurRuntime.createClass)(XGifController, {}, {});
+var XGif = function XGif() {
+  $traceurRuntime.defaultSuperCall(this, $XGif.prototype, arguments);
+};
+var $XGif = XGif;
+($traceurRuntime.createClass)(XGif, {
+  createdCallback: function() {
+    this.controller = new XGifController(this);
+  },
+  attributeChangedCallback: function(attribute, oldVal, newVal) {
     if (attribute == "src")
       this.controller.srcChanged(newVal);
     if (attribute == "speed")
       this.controller.speedChanged(newVal);
     if (attribute == "stopped")
       this.controller.stoppedChanged(newVal);
-  };
-  document.registerElement('x-gif', {prototype: XGif});
-})(document, (document._currentScript || document.currentScript).ownerDocument);
+  }
+}, {}, HTMLElement);
+document.registerElement('x-gif', XGif);
 
 
 },{"./playback.js":6,"./strategies.js":7}],5:[function(require,module,exports){
@@ -2115,7 +2119,6 @@ var $__default = (function() {
 
 },{}],6:[function(require,module,exports){
 "use strict";
-"use strict";
 Object.defineProperties(exports, {
   default: {get: function() {
       return $__default;
diff --git a/src/playback.js b/src/playback.js
@@ -1,5 +1,3 @@
-"use strict";
-
 import Exploder from './exploder.js';
 
 // Private functions for setup
diff --git a/src/x-gif.js b/src/x-gif.js
@@ -1,5 +1,3 @@
-"use strict";
-
 import Playback from './playback.js';
 import Strategies from './strategies.js';
 
diff --git a/src/x-gif.raw.js b/src/x-gif.raw.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-"use strict";`
`2`		`-`
`3`	`1`	`import Exploder from './exploder.js';`
`4`	`2`
`5`	`3`	`// Private functions for setup`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-"use strict";`
`2`		`-`
`3`	`1`	`import Playback from './playback.js';`
`4`	`2`	`import Strategies from './strategies.js';`
`5`	`3`