Upload SuperEmbed 3.1

Author: corbindavenport

README.md

@@ -10,13 +10,14 @@ I created SuperEmbed to fix all my issues with existing solutions, including (bu
 * Works without external libraries like JQuery
 * Responsive videos maintain their original aspect ratio
 * Responsive layout can be forced or blocked with classes applied to the embed code
-* Extremely tiny, the minified version is only 2 KB
+* Extremely tiny, the minified version is only 3 KB
 
 **Supported Services**
 
-Embeded videos from the following sites are supported:
+SuperEmbed can automatically detect and resize embedded content from these sites: 
 * YouTube
 * Vimeo
+* SoundCloud
 * Kickstarter
 * CollegeHumor
 * Hulu
@@ -29,6 +30,7 @@ Embeded videos from the following sites are supported:
 * Facebook
 * Gfycat
 * LiveLeak
+* MSDN Channel 9
 * MySpace
 * Archive.org
 
@@ -67,24 +69,8 @@ And finally, you can force a 1:1 aspect ratio by adding the `.superembed-square`
 
 ---------------------------------------------------------
 
-__New in SuperEmbed.js 3.0:__
-* Improved performance and cleaner code
-* Added support for Facebook, Gfycat, LiveLeak, MySpace, and Archive.org embeds
-
-__New in SuperEmbed.js 2.3:__
-* Now uses getComputedStyle to calculate width and height on supported browsers
-
-__New in SuperEmbed.js 2.2:__
-* Fixes to avoid conflict with other libraries
-
-__New in SuperEmbed.js 2.1:__
-* Now optionally uses JQuery for detecting page load and page resize, if JQuery is loaded before SuperEmbed
-
-__New in SuperEmbed.js 2.0:__
-* Almost completely re-written, resizing is now handled by JS instead of CSS
-* Now videos maintain their original aspect ratio when resized, no more letterboxing
-* Minimum Internet Explorer version dropped to IE 9
-* The `.superembed-square` class now applies a 1:1 ratio, instead of a 4:3 ratio
+__New in SuperEmbed.js 3.1:__
+* Added support for SoundCloud and MSDN Channel 9 embeds
 
 ---------------------------------------------------------
 

extra/classlist.js

@@ -240,3 +240,67 @@ if (objCtr.defineProperty) {
 
 }
 
+/**
+ * Shim for "fixing" IE's lack of support (IE < 9) for applying slice
+ * on host objects like NamedNodeMap, NodeList, and HTMLCollection
+ * (technically, since host objects have been implementation-dependent,
+ * at least before ES2015, IE hasn't needed to work this way).
+ * Also works on strings, fixes IE < 9 to allow an explicit undefined
+ * for the 2nd argument (as in Firefox), and prevents errors when
+ * called on other DOM objects.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Can't be used with DOM elements in IE < 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Fails in IE < 9
+    // This will work for genuine arrays, array-like objects, 
+    // NamedNodeMap (attributes, entities, notations),
+    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
+    // and will not fail on other DOM objects (as do DOM elements in IE < 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE < 9 gets unhappy with an undefined end argument
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // For native Array objects, we use the native slice function
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end); 
+      }
+
+      // For array like object we handle it ourselves.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Handle negative value for "begin"
+      var start = begin || 0;
+      start = (start >= 0) ? start : Math.max(0, len + start);
+
+      // Handle negative value for "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end < 0) {
+        upTo = len + end;
+      }
+
+      // Actual expected size of the slice
+      size = upTo - start;
+
+      if (size > 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i < size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i < size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());

superembed.js

@@ -27,13 +27,9 @@
       selectors.push(start + superEmbed.services[type].join(end + ',' + start) + end);
     }
 
-    if (!(document.querySelectorAll("div") instanceof Object)) { // For IE8, because it can't handle using slice on NodeList
-      return document.body.querySelectorAll(selectors.join(','));
-    } else { // For other browsers
-      // Transform NodeList object into plain array.
-      // @see http://stackoverflow.com/a/6545450
-      return [].slice.call(document.body.querySelectorAll(selectors.join(',')));
-    }
+    // Transform NodeList object into plain array.
+    // @see http://stackoverflow.com/a/6545450
+    return [].slice.call(document.body.querySelectorAll(selectors.join(',')));
   };
 
   /**
@@ -71,6 +67,23 @@
           iframe.setAttribute('data-height', '9');
         }
 
+        // SoundCloud has two embed types, a "Visual Embed" that shows the full album art, and a "Classic Embed" that is not as tall
+        // SuperEmbed will force the visual embed to be square, and leave alone the classic embed (besides making sure width is set to 100%)
+        if ((iframe.getAttribute('src').indexOf('w.soundcloud.com') != -1) && (!(iframe.getAttribute('data-width')))) {
+          // Remove existing responsive code
+          iframe.setAttribute('width', '');
+          iframe.setAttribute('height', '');
+          if (iframe.getAttribute('src').indexOf('visual=true') != -1) {
+            // Visual embed
+            iframe.setAttribute('data-width', '1');
+            iframe.setAttribute('data-height', '1');
+          } else {
+            // Classic Embed
+            iframe.setAttribute('data-width', '10');
+            iframe.setAttribute('data-height', '4');
+          }
+        }
+
         // Original aspect ratio is kept in data attribute to maintain scaling.
         if (iframe.hasAttribute('data-width')) {
           width = iframe.getAttribute('data-width');
@@ -94,12 +107,35 @@
 
         // Get width and height of parent container.
         // @see http://stackoverflow.com/a/3971875
+
+        if (!window.getComputedStyle) {
+          window.getComputedStyle = function(el, pseudo) {
+            this.el = el;
+            this.getPropertyValue = function(prop) {
+              var re = /(\-([a-z]){1})/g;
+              if (prop == 'float') prop = 'styleFloat';
+              if (re.test(prop)) {
+                prop = prop.replace(re, function () {
+                  return arguments[2].toUpperCase();
+                });
+              }
+              return el.currentStyle[prop] ? el.currentStyle[prop] : null;
+            }
+            return this;
+          }
+        }
+
         if (window.getComputedStyle) {
           maxWidth = parseInt(window.getComputedStyle(iframe.parentElement, null).getPropertyValue('width'));
           maxHeight = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('height'));
+        } else if (iframe.currentStyle) {
+          maxWidth = iframe.parentElement.clientWidth;
+          maxHeight = document.body.clientHeight;
+          console.log(maxWidth + ' ' + maxHeight + ', ' + iframe.currentStyle.margin);
         } else {
           maxWidth = iframe.parentElement.offsetWidth;
           maxHeight = document.body.clientHeight;
+          console.log(maxWidth + ' ' + maxHeight);
         }
 
         if (width != maxWidth) {
@@ -117,7 +153,6 @@
         if (needsUpdate) {
           iframe.setAttribute('width', maxWidth);
           iframe.setAttribute('height', maxHeight);
-
           // Reset width and height to match scaled video.
           width *= ratio;
           height *= ratio;
@@ -145,7 +180,9 @@
       'gfycat.com/ifr/',
       'liveleak.com/ll_embed',
       'media.myspace.com',
-      'archive.org/embed'
+      'archive.org/embed',
+      'w.soundcloud.com/player',
+      'channel9.msdn.com'
     ],
     // object[data*="//www.flickr.com/apps/video"]
     object: [