Support Shadow Dom

package.json

@@ -1,24 +1,20 @@
 {
   "name": "fluidvids.js",
-  "version": "2.4.1",
+  "version": "3.0.0",
   "description": "Raw JavaScript fluid videos",
   "author": "@toddmotto",
   "license": "MIT",
   "main": "dist/fluidvids.js",
   "homepage": "https://github.com/toddmotto/fluidvids",
+  "scripts": {
+    "lint": "./node_modules/.bin/jshint ./src/",
+    "test": "./node_modules/.bin/jest",
+    "build": "./node_modules/.bin/uglifyjs ./src/fluidvids.js --output ./dist/fluidvids.min.js"
+  },
   "devDependencies": {
-    "gulp": "^3.8.5",
-    "gulp-uglify": "~0.3.0",
-    "gulp-rename": "~1.1.0",
-    "gulp-clean": "^0.2.4",
-    "gulp-plumber": "~0.6.2",
-    "gulp-header": "^1.0.2",
-    "gulp-jshint": "^1.6.1",
-    "jshint-stylish": "^0.2.0",
-    "gulp-karma": "0.0.4",
-    "karma": "^0.12.16",
-    "karma-jasmine": "~0.2.0",
-    "karma-phantomjs-launcher": "^0.1.4",
-    "karma-spec-reporter": "0.0.13"
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jshint": "^2.13.5",
+    "uglify": "^0.1.5"
   }
 }

src/fluidvids.js

@@ -1,3 +1,4 @@
+var scriptNode = document.currentScript;
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     define(factory);
@@ -9,6 +10,7 @@
 })(this, function () {
 
   'use strict';
+  var rootNode;
 
   var fluidvids = {
     selector: ['iframe', 'object'],
@@ -24,8 +26,6 @@
     '}'
   ].join('');
 
-  var head = document.head || document.getElementsByTagName('head')[0];
-
   function matches (src) {
     return new RegExp('^(https?:)?\/\/(?:' + fluidvids.players.join('|') + ').*$', 'i').test(src);
   }
@@ -46,20 +46,25 @@
   }
 
   function addStyles () {
+    var rootIsDoc = rootNode === document;
+    var head = rootIsDoc ? rootNode.head || rootNode.getElementsByTagName('head')[0] : rootNode;
+
     var div = document.createElement('div');
     div.innerHTML = '<p>x</p><style>' + css + '</style>';
     head.appendChild(div.childNodes[1]);
   }
 
   fluidvids.render = function () {
-    var nodes = document.querySelectorAll(fluidvids.selector.join());
+    var nodes = rootNode.querySelectorAll(fluidvids.selector.join());
     var i = nodes.length;
     while (i--) {
       fluid(nodes[i]);
     }
   };
 
   fluidvids.init = function (obj) {
+    rootNode = scriptNode ? scriptNode.getRootNode() : document;
+
     for (var key in obj) {
       fluidvids[key] = obj[key];
     }
@@ -69,4 +74,4 @@
 
   return fluidvids;
 
-});
+});

test/fluidvids-script-node.test.js

@@ -0,0 +1,116 @@
+/**
+ * @jest-environment jsdom
+ */
+ var script = document.createElement('script');
+
+ document.body.appendChild(script);
+
+ Object.defineProperty(document, 'currentScript', {
+   value: script,
+ });
+
+var fluidvids = require('../src/fluidvids')();
+
+describe('fluidvids with currentScript set', function () {
+
+  function $$ (selector) {
+    return document.querySelector(selector);
+  }
+
+  describe('insertBefore fluid wrap', function () {
+    beforeEach(function () {
+      var test1 = document.createElement('iframe');
+      test1.src = 'http://www.youtube.com/embed/JMl8cQjBfqk';
+      test1.id = 'test1';
+      test1.className = 'test';
+      document.body.appendChild(test1);
+      fluidvids.init();
+    });
+    it('should wrap the iframe in a fluid <div>', function () {
+      var test1 = $$('#test1');
+      expect(test1.src).toContain('youtube');
+      expect(test1.className).toContain('fluidvids-item');
+      expect(test1.parentNode.className).toBe('fluidvids');
+    });
+  });
+
+  describe('players options, dynamic RegExp construction', function () {
+    beforeEach(function () {
+      var youtube = document.createElement('iframe');
+      var vimeo = document.createElement('iframe');
+      var slideshare = document.createElement('object');
+      youtube.src = 'http://www.youtube.com/embed/JMl8cQjBfqk';
+      youtube.id = 'test2';
+      vimeo.src = 'http://player.vimeo.com/video/23919731';
+      vimeo.id = 'test3';
+      slideshare.data = 'http://static.slideshare.net/swf/ssplayer2.swf?id=39220589&doc=slides-140917211059-phpapp02';
+      slideshare.id = 'test4';
+      document.body.appendChild(youtube);
+      document.body.appendChild(vimeo);
+      document.body.appendChild(slideshare);
+      fluidvids.init({
+        players: ['www.youtube.com', 'static.slideshare.net']
+      });
+    });
+    it('should make YouTube fluid', function () {
+      var test2 = $$('#test2');
+      expect(test2.parentNode.className).toBe('fluidvids');
+    });
+    it('should not make Vimeo fluid', function () {
+      var test3 = $$('#test3');
+      expect(test3.parentNode.className).not.toBe('fluidvids');
+    });
+    it('should make SlideShare fluid', function () {
+      var test4 = $$('#test4');
+      expect(test4.parentNode.className).toBe('fluidvids');
+    });
+  });
+
+  describe('intrinsic ratio', function () {
+    beforeEach(function () {
+      var test5 = document.createElement('iframe');
+      test5.src = 'http://www.youtube.com/embed/JMl8cQjBfqk';
+      test5.width = 1600;
+      test5.height = 900;
+      test5.id = 'test5';
+      document.body.appendChild(test5);
+      fluidvids.init();
+    });
+    it('should add padding based on aspect ratio', function () {
+      var test5 = $$('#test5');
+      expect(test5.parentNode.style.paddingTop).toBe('56.25%');
+    });
+  });
+
+  describe('ignored or rendered fluidvids', function () {
+    beforeEach(function () {
+      var test6 = document.createElement('iframe');
+      test6.src = 'http://www.youtube.com/embed/JMl8cQjBfqk';
+      test6.setAttribute('data-fluidvids', 'loaded');
+      test6.width = 1600;
+      test6.height = 900;
+      test6.id = 'test6';
+      document.body.appendChild(test6);
+      fluidvids.init();
+    });
+    it('should not run on elements with data-fluidvids attrs', function () {
+      var test6 = $$('#test6');
+      expect(test6.parentNode.className).not.toBe('fluidvids');
+    });
+  });
+
+  describe('render method', function () {
+    beforeEach(function () {
+      var test7 = document.createElement('iframe');
+      test7.src = 'http://www.youtube.com/embed/JMl8cQjBfqk';
+      test7.id = 'test7';
+      document.body.appendChild(test7);
+      fluidvids.render();
+    });
+    it('should query another collection and make fluid', function () {
+      var test7 = $$('#test7');
+      expect(test7.parentNode.className).toBe('fluidvids');
+    });
+  });
+
+});