Dispatch event when gfy video is loaded (general event and event-0 with index of element in collection)

Author: sarahjsquire

build/gfycat.js

@@ -44,7 +44,7 @@ var gfyCollection = function () {
         for (var i = 0; i < elem_coll.length; i++) {
             // don't need to worry about finding existing gfyitems - they are
             // replaced by gfyObject
-            var gfyObj = new gfyObject(elem_coll[i]);
+            var gfyObj = new gfyObject(elem_coll[i], i);
             collection.push(gfyObj);
         }
         // run init _after_ all are collected, because the init function deletes and recreates
@@ -73,8 +73,9 @@ var gfyCollection = function () {
  * for interacting with its own gfycat video.
  */
 
-var gfyObject = function (gfyElem) {
+var gfyObject = function (gfyElem, gfyIndex) {
     var gfyRootElem = gfyElem;
+    var gfyElemIndex = gfyIndex;
     var gfyId;
     // Options are set by data- attributes on tag
     var optExpand; // Option: will video grow to fill space
@@ -439,6 +440,13 @@ var gfyObject = function (gfyElem) {
     }
 
     function vidLoaded() {
+        //emit custom events when loaded (general loaded, loaded + index)
+        var event = new Event('gfyLoaded'),
+            eventIndexed = new Event('gfyLoaded-'+gfyElemIndex);
+        // Dispatch the event.
+        document.dispatchEvent(event);
+        document.dispatchEvent(eventIndexed);
+
         setSize();
         if (!ctrlBox) {
             createCtrlBox();

build/gfycat.min.js

@@ -63,6 +63,12 @@ <h3>Load gif</h3>
     // or run gfyCollection.init() when ready
     	$(function() {
 			gfyCollection.init();
+			$(document).on('gfyLoaded', function(){
+				console.log('gfyLoaded');
+			});
+			$(document).one('gfyLoaded-0', function(){
+				console.log('gfyLoaded-0');
+			});
 		});
 	</script>
   </body>

demo/build/gfycat.js

@@ -44,7 +44,7 @@ var gfyCollection = function () {
         for (var i = 0; i < elem_coll.length; i++) {
             // don't need to worry about finding existing gfyitems - they are
             // replaced by gfyObject
-            var gfyObj = new gfyObject(elem_coll[i]);
+            var gfyObj = new gfyObject(elem_coll[i], i);
             collection.push(gfyObj);
         }
         // run init _after_ all are collected, because the init function deletes and recreates

demo/index.html

@@ -6,8 +6,9 @@
  * for interacting with its own gfycat video.
  */
 
-var gfyObject = function (gfyElem) {
+var gfyObject = function (gfyElem, gfyIndex) {
     var gfyRootElem = gfyElem;
+    var gfyElemIndex = gfyIndex;
     var gfyId;
     // Options are set by data- attributes on tag
     var optExpand; // Option: will video grow to fill space
@@ -372,6 +373,13 @@ var gfyObject = function (gfyElem) {
     }
 
     function vidLoaded() {
+        //emit custom events when loaded (general loaded, loaded + index)
+        var event = new Event('gfyLoaded'),
+            eventIndexed = new Event('gfyLoaded-'+gfyElemIndex);
+        // Dispatch the event.
+        document.dispatchEvent(event);
+        document.dispatchEvent(eventIndexed);
+
         setSize();
         if (!ctrlBox) {
             createCtrlBox();