readme updated grunt tweaks for dev

Gruntfile.js

@@ -66,17 +66,16 @@ module.exports = function(grunt) {
             files:[
                 "src/**/*.scss",
                 "src/**/*.html",
-                "*.html",
-                "*.md",
+                "index.html"
             ],
             tasks:[
                 "exec:sass"
             ]
         }
     });
 
-    grunt.registerTask('build',  ['sass','vulcanize']);
-    grunt.registerTask('deploy', ['copy','gh-pages']);
+    grunt.registerTask('build',  ['sass','vulcanize','copy']);
+    grunt.registerTask('deploy', ['gh-pages']);
     grunt.registerTask('serve', ['build','connect','watch']);
 
 };

README.md

@@ -4,7 +4,7 @@ a polymer web-component for displaying gifs thru [gfycat](http://gfycat.com/)'s
 
 ## Demo
 
-[Check it live!](http://mattybow.github.io/gfy-cat)
+[See this working here](http://mattybow.github.io/gfy-cat)
 
 ## Install
 
@@ -28,30 +28,23 @@ Or [download as ZIP](https://github.com/mattybow/gfy-cat/archive/master.zip).
 </body>
 ```
 
+Use, [grunt-vulcanize](https://github.com/Polymer/grunt-vulcanize) to reduce network requests
+
 ## Options
 
 Attribute       | Options           | Default      | Description
 ---             | ---               | ---          | ---
-`src`           | *string*          | ``           | .gif source url
-`gfyName`       | *string*          | ``           | gfyName returned by gfycat.com _example:CostlyAfraidEmu_
+`src`           | *string*          | `''`         | .gif source url
+`gfyName`       | *string*          | `''`         | gfyName returned by gfycat.com _example:CostlyAfraidEmu_
 `width`         | *% or px*         | `100%`       | size you want the element
 `color`         | *hex rbg or rgba* | `#eee`       | the color of the contols and the text
 `fill`          | *true or false*   | `false`      | true means a solid filled in polygon, false will be a path
 `strokeWidth`   | *integer*         | `3`          | controls the line width if you have fill attribute set to true
 `ntimes`        | *integer*         | `3`          | if not specified, animation will loop 3 times then pause, user can playback at will
 `loop`          | *true or false*    | `false`     | video will loop infinitely until paused or pingpong is activated in which case ntimes is set to 100
 
-## Methods
-
-Method        | Parameters   | Returns     | Description
----           | ---          | ---         | ---
-`unicorn()`   | None.        | Nothing.    | Magic stuff appears.
-
-## Events
-
-Event         | Description
----           | ---
-`onsomething` | Triggers when something happens.
+## Compatibility
+Please see bottom of the [demo](http://mattybow.github.io/gfy-cat) on notes about iOS safari fallbacks
 
 ## Development
 

dist/gfy-cat/gfy-cat.html

@@ -105,6 +105,11 @@
                         }.bind(this));
                     this.$.gfyAjax.go();
                 }
+                if(this.isIdevice()){
+                    this.$.vid.style.height=this.$.vid.getBoundingClientRect().width+'px';
+                    this.$.vid.setAttribute('controls','true');
+                    this.$.vid.addEventListener('loadedmetadata',this.scaleMedia.bind(this));
+                }
             },
             addLoopAttr:function(){
                 this.$.vid.setAttribute('loop','true');
@@ -121,6 +126,12 @@
                 }
             },
 
+            scaleMedia:function(e){
+                var curWidth = this.$.vid.getBoundingClientRect().width;
+                var calcHeight = Math.floor((this.$.vid.videoHeight * curWidth)/ this.$.vid.videoWidth);
+                this.$.vid.style.height=calcHeight+'px';
+            },
+
             incrementPlayCount:function(){
                 this.playCount++;
                 //console.log("playCount=" + this.playCount,"endCount="+this.ntimes);
@@ -140,7 +151,7 @@
             },
             pingPongActiveChanged:function(){
                 this.toggleNTimes();
-                console.log('ntimes changed, now:'+this.ntimes);
+                //console.log('ntimes changed, now:'+this.ntimes);
             },
 
             toggleNTimes:function(){
@@ -187,6 +198,9 @@
             isMobile:function(){
                 return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
             },
+            isIdevice:function(){
+                return (/iPhone|iPad|iPod/i.test(navigator.userAgent));
+            },
             hoverOutHandle:function(){
                 if(this.hideTimeOut){
                     clearTimeout(this.hideTimeOut);
@@ -232,10 +246,10 @@
             reversePlayback:function(e,d,s){
                 if(this.playMode === 'reverse'){
                     this.playMode = 'forward';
-                    console.log('play forward');
+                    //console.log('play forward');
                 } else {
                     this.playMode = 'reverse';
-                    console.log('play backward');
+                    //console.log('play backward');
                 }
 
                 if(e) {

index.html

@@ -10,6 +10,12 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 		<script src="bower_components/platform/platform.js"></script>
+    <!--uncomment this out for dev-->
+    <!--<link rel="import" href="src/gfy-cat/gfy-cat.html">
+    <link rel="import" href="bower_components/paper-button/paper-button.html">
+    <link rel="import" href="bower_components/x-gif/dist/x-gif.html">-->
+
+    <!--comment this out for dev, vulcanize takes too long on livereload-->
 		<link rel="import" href="gfy-cat-demo.vulcanized.html">
         <style>
             body {