using snap instead of hard

Author: geelen

.gitignore

@@ -2,3 +2,4 @@ bower_components
 node_modules
 demos/audio
 dist/images
+/*.gif

README.md

@@ -34,7 +34,7 @@ Causes the GIF to expand to cover its container, like if you had used `backgroun
 `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)
+`snap` (sync & bpm modes only)
 Instead of allowing longer GIFs to sync to multiple beats, force them to fit into only one.
 
 `ping-pong`
@@ -75,12 +75,12 @@ Breaks the GIF across 1 or more _beats_ (depending on how long the GIF is), wher
 <x-gif src="something_dumb_from_buzzfeed.gif" bpm="120"></x-gif>
 ```
 
-### Hard-bpm
+### snap-bpm
 
 Just like `bpm` but locks all GIFs to one _beat_, regardless of how long they were originally.
 
 ```html
-<x-gif src="something_dumb_from_buzzfeed.gif" hard-bpm="120"></x-gif>
+<x-gif src="something_dumb_from_buzzfeed.gif" snap-bpm="120"></x-gif>
 ```
 
 ### Stopped

dist/x-gif.angular.js

@@ -2113,7 +2113,7 @@ var $__default = (function() {
     this.pingPong = opts.pingPong;
     this.fill = opts.fill;
     this.stopped = opts.stopped;
-    this.hard = opts.hard;
+    this.snap = opts.snap;
     this.ready = new Promise((function(resolve, reject) {
       var exploder = new Exploder(file);
       exploder.load().then((function(gif) {
@@ -2173,7 +2173,7 @@ var $__default = (function() {
     },
     fromClock: function(beatNr, beatDuration, beatFraction) {
       var speedup = 1.5,
-          lengthInBeats = this.hard ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
+          lengthInBeats = this.snap ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
           subBeat = beatNr % lengthInBeats,
           repeatCount = beatNr / lengthInBeats,
           subFraction = (beatFraction / lengthInBeats) + subBeat / lengthInBeats;

dist/x-gif.js

@@ -2116,7 +2116,7 @@ var $__default = (function() {
     this.pingPong = opts.pingPong;
     this.fill = opts.fill;
     this.stopped = opts.stopped;
-    this.hard = opts.hard;
+    this.snap = opts.snap;
     this.ready = new Promise((function(resolve, reject) {
       var exploder = new Exploder(file);
       exploder.load().then((function(gif) {
@@ -2176,7 +2176,7 @@ var $__default = (function() {
     },
     fromClock: function(beatNr, beatDuration, beatFraction) {
       var speedup = 1.5,
-          lengthInBeats = this.hard ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
+          lengthInBeats = this.snap ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
           subBeat = beatNr % lengthInBeats,
           repeatCount = beatNr / lengthInBeats,
           subFraction = (beatFraction / lengthInBeats) + subBeat / lengthInBeats;

dist/x-gif.raw.js

@@ -2034,10 +2034,9 @@ var XGifController = function XGifController(xgif) {
     if (this.playback)
       this.playback.changeBpm(bpm);
   },
-  hardChanged: function(hard) {
-    console.log("TURN DOWN");
+  snapChanged: function(snap) {
     if (this.playback)
-      this.playback.hard = hard;
+      this.playback.snap = snap;
   },
   stoppedChanged: function(nowStop) {
     if (this.playback) {
@@ -2094,7 +2093,7 @@ var $XGif = XGif;
       stopped: this.hasAttribute('stopped'),
       fill: this.hasAttribute('fill'),
       nTimes: isNaN(maybeNtimes) ? null : maybeNtimes,
-      hard: this.hasAttribute('hard'),
+      snap: this.hasAttribute('snap'),
       pingPong: this.hasAttribute('ping-pong')
     };
   },
@@ -2113,10 +2112,9 @@ var $XGif = XGif;
     } else if (attribute == "ping-pong") {
       this.determinePlaybackOptions();
       this.controller.pingPongChanged(this.options.pingPong);
-    } else if (attribute == "hard") {
-      console.log("TURN DOWN");
+    } else if (attribute == "snap") {
       this.determinePlaybackOptions();
-      this.controller.hardChanged(this.options.hard);
+      this.controller.snapChanged(this.options.snap);
     }
   },
   clock: function(beatNr, beatDuration, beatFraction) {
@@ -2191,7 +2189,7 @@ var $__default = (function() {
     this.pingPong = opts.pingPong;
     this.fill = opts.fill;
     this.stopped = opts.stopped;
-    this.hard = opts.hard;
+    this.snap = opts.snap;
     this.ready = new Promise((function(resolve, reject) {
       var exploder = new Exploder(file);
       exploder.load().then((function(gif) {
@@ -2251,7 +2249,7 @@ var $__default = (function() {
     },
     fromClock: function(beatNr, beatDuration, beatFraction) {
       var speedup = 1.5,
-          lengthInBeats = this.hard ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
+          lengthInBeats = this.snap ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
           subBeat = beatNr % lengthInBeats,
           repeatCount = beatNr / lengthInBeats,
           subFraction = (beatFraction / lengthInBeats) + subBeat / lengthInBeats;

index.html

@@ -115,11 +115,11 @@ <h3>BPM</h3>
       </label>
       <x-gif ng-src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}"></x-gif>
       <figcaption>
-        <pre>&lt;x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" &gt;&lt;/x-gif&gt;</pre>
+        <pre>&lt;x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}"&gt;&lt;/x-gif&gt;</pre>
       </figcaption>
-      <x-gif ng-src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" hard></x-gif>
+      <x-gif ng-src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" snap></x-gif>
       <figcaption>
-        <pre>&lt;x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" hard&gt;&lt;/x-gif&gt;</pre>
+        <pre>&lt;x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" snap&gt;&lt;/x-gif&gt;</pre>
       </figcaption>
     </figure>
 
@@ -139,9 +139,9 @@ <h3>Synced to Audio</h3>
       <figcaption>
         <pre>&lt;x-gif src="{{ trustedUrl() }}" synced&gt;&lt;/x-gif&gt;</pre>
       </figcaption>
-      <x-gif class="x-gif-synced-demo" ng-src="{{ trustedUrl() }}" sync hard></x-gif>
+      <x-gif class="x-gif-synced-demo" ng-src="{{ trustedUrl() }}" sync snap></x-gif>
       <figcaption>
-        <pre>&lt;x-gif src="{{ trustedUrl() }}" synced hard&gt;&lt;/x-gif&gt;</pre>
+        <pre>&lt;x-gif src="{{ trustedUrl() }}" synced snap&gt;&lt;/x-gif&gt;</pre>
         <p>
           Audio: Encom Part II by Daft Punk. CC0 1.0 Universal.
           <br/>

src/playback.js

@@ -21,7 +21,7 @@ export default class Playback {
     this.pingPong = opts.pingPong;
     this.fill = opts.fill;
     this.stopped = opts.stopped;
-    this.hard = opts.hard;
+    this.snap = opts.snap;
 
     this.ready = new Promise((resolve, reject) => {
       var exploder = new Exploder(file)
@@ -91,7 +91,7 @@ export default class Playback {
   fromClock(beatNr, beatDuration, beatFraction) {
     // Always bias GIFs to speeding up rather than slowing down, it looks better.
     var speedup = 1.5,
-      lengthInBeats = this.hard ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
+      lengthInBeats = this.snap ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
       subBeat = beatNr % lengthInBeats,
       repeatCount = beatNr / lengthInBeats,
       subFraction = (beatFraction / lengthInBeats) + subBeat / lengthInBeats;

src/x-gif.raw.js

@@ -41,9 +41,8 @@ class XGifController {
     if (this.playback) this.playback.changeBpm(bpm);
   }
 
-  hardChanged(hard) {
-    console.log("TURN DOWN")
-    if (this.playback) this.playback.hard = hard;
+  snapChanged(snap) {
+    if (this.playback) this.playback.snap = snap;
   }
 
   stoppedChanged(nowStop) {
@@ -108,7 +107,7 @@ class XGif extends HTMLElement {
       stopped: this.hasAttribute('stopped'),
       fill: this.hasAttribute('fill'),
       nTimes: isNaN(maybeNtimes) ? null : maybeNtimes,
-      hard: this.hasAttribute('hard'),
+      snap: this.hasAttribute('snap'),
       pingPong: this.hasAttribute('ping-pong')
     }
   }
@@ -128,10 +127,9 @@ class XGif extends HTMLElement {
     } else if (attribute == "ping-pong") {
       this.determinePlaybackOptions();
       this.controller.pingPongChanged(this.options.pingPong);
-    } else if (attribute == "hard") {
-      console.log("TURN DOWN")
+    } else if (attribute == "snap") {
       this.determinePlaybackOptions();
-      this.controller.hardChanged(this.options.hard);
+      this.controller.snapChanged(this.options.snap);
     }
   }