Add VideoBackgroundGroups factory class

index.html

@@ -216,11 +216,12 @@ <h1>Group!</h1>
     <script src="http://localhost:35729/livereload.js?snipver=1"></script>
     <script type="text/javascript">
       jQuery(document).ready(function() {
-
-        const groups = document.querySelectorAll('.vbg-group');
-        for (let i = 0; i < groups.length; i++) {
-          const group = groups[i];
-          const elements = group.querySelectorAll('[data-vbg]');
+
+        const groupElements = document.querySelectorAll('.js-vbg-group');
+
+        for (let i = 0; i < groupElements.length; i++) {
+          const groupElement = groupElements[i];
+          const elements = groupElement.querySelectorAll('[data-vbg]');
 
           for (let j = 0; j < elements.length; j++) {
             elements[j].addEventListener('video-background-state-change', function(event) {
@@ -237,9 +238,11 @@ <h1>Group!</h1>
 
         jQuery('[data-vbg]').youtube_background();
 
-        for (let i = 0; i < groups.length; i++) {
-          const group = groups[i];
-          const vbgroup = new VideoBackgroundGroup('.js-vbg-group');
+        const groups = new VideoBackgroundGroups(groupElements);
+
+        for (const i in groups.instances) {
+          const group = groups.instances[i].element;
+          const vbgroup = groups.instances[i];
 
           const groupPrev = group.querySelector('.group-prev');
           const groupNext = group.querySelector('.group-next');

src/experimental.js

@@ -1,6 +1,7 @@
-import { SeekBar, PlayToggle, MuteToggle, VideoBackgroundGroup } from "./lib/controls";
+import { SeekBar, PlayToggle, MuteToggle, VideoBackgroundGroup, VideoBackgroundGroups } from "./lib/controls";
 
 window.SeekBar = SeekBar;
 window.PlayToggle = PlayToggle;
 window.MuteToggle = MuteToggle;
 window.VideoBackgroundGroup = VideoBackgroundGroup;
+window.VideoBackgroundGroups = VideoBackgroundGroups;

src/lib/controls.js

@@ -1,4 +1,3 @@
-
 export class SeekBar {
   constructor(element, vbgInstance) {
     this.lock = false;
@@ -90,8 +89,8 @@ export class VideoBackgroundGroup {
       element.addEventListener('video-background-seeked', this.onVideoSeeked.bind(this));
       element.addEventListener('video-background-pause', this.onVideoPause.bind(this));
       element.addEventListener('video-background-ready', this.onVideoReady.bind(this));
-      element.addEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this));
-      element.addEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this));
+      element.addEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this), { once: true });
+      element.addEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this), { once: true });
     }
   }
 
@@ -225,6 +224,18 @@ export class VideoBackgroundGroup {
     this.currentInstance.play();
     this.dispatchEvent('video-background-group-previous');
   }
+
+  destroy() {
+    for (let i = 0; i < this.elements.length; i++) {
+      const element = this.elements[i];
+      element.removeEventListener('video-background-ended', this.onVideoEnded.bind(this));
+      element.removeEventListener('video-background-seeked', this.onVideoSeeked.bind(this));
+      element.removeEventListener('video-background-pause', this.onVideoPause.bind(this));
+      element.removeEventListener('video-background-ready', this.onVideoReady.bind(this));
+      element.removeEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this));
+      element.removeEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this));
+    }
+  }
 }
 
 export class PlayToggle {
@@ -363,3 +374,85 @@ export class MuteToggle {
     }
   }
 }
+
+class GeneralFactory {
+  constructor(selector, callback, uidAttribute = 'data-uid') {
+    this.instances = {};
+    this.selector = selector;
+    this.callback = callback;
+    this.uidAttribute = uidAttribute;
+
+    if (!callback || typeof callback !== 'function') return;
+
+    if (typeof this.selector === 'string') {
+      this.selector = document.querySelectorAll(this.selector);
+    } else {
+      if (this.selector instanceof Element) {
+        this.selector = [this.selector];
+      }
+    }
+
+    for (let i = 0; i < this.selector.length; i++) {
+      this.add(this.selector[i]);
+    }
+  }
+
+  basicUID() {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2);
+  }
+
+  generateUID() {
+    let tempuid = this.basicUID();
+    if (!this.instances.hasOwnProperty(tempuid)) return tempuid;
+    return this.generateUID();
+  }
+
+  add(element) {
+    let id = this.getID(element);
+
+    if (!this.instances.hasOwnProperty(id)) {
+      id = this.generateUID();
+      element.setAttribute(this.uidAttribute, id);
+      if (this.callback && typeof this.callback === 'function') 
+        this.instances[id] = this.callback(element, id, this);
+    }
+  }
+
+  getID(element) {
+    if (!element) return;
+    const id = element.getAttribute('id');
+    if (id && this.instances.hasOwnProperty(id)) return id;
+    const uid = element.getAttribute(this.uidAttribute);
+    if (uid && this.instances.hasOwnProperty(uid)) return uid;
+  }
+
+  get(element) {
+    if (!element) return;
+    const id = this.getID(element);
+    if (!id) return;
+    return this.instances[id];
+  }
+
+  destroy(element) {
+    if (!element) return;
+    const id = this.getID(element);
+    if (!id) return;
+    const instance = this.instances[id];
+    if (instance.hasOwnProperty('destroy') && typeof instance.destroy == 'function') this.instances[id].destroy();
+    delete this.instances[id];
+  }
+
+  destroyAll() {
+    for (const uid in this.instances) {
+      const instance = this.instances[uid];
+      if (instance.hasOwnProperty('destroy') && typeof instance.destroy == 'function') instance.destroy();
+      delete this.instances[uid];
+    }
+  }
+}
+
+export class VideoBackgroundGroups extends GeneralFactory {
+  constructor(selector = '.js-vbg-group', videoBackgroundSelector, videoBackgroundFactoryInstance) {
+    super(selector, (element, id, factoryInstance) => new VideoBackgroundGroup(element, videoBackgroundSelector, videoBackgroundFactoryInstance));
+  }
+}