From ccc18c7bad096d010cf721423190aa0b27b863ba Mon Sep 17 00:00:00 2001
From: iissnan <iissnan@gmail.com>
Date: Tue, 3 Nov 2015 14:43:38 +0800
Subject: [PATCH] Resposive embedded videos support

---
 .editorconfig                |   2 +-
 layout/_partials/head.swig   |   1 +
 layout/_scripts/commons.swig |   2 +-
 source/js/src/bootstrap.js   |  44 ++--------
 source/js/src/helpers.js     |  39 ---------
 source/js/src/utils.js       | 152 +++++++++++++++++++++++++++++++++++
 6 files changed, 160 insertions(+), 80 deletions(-)
 delete mode 100644 source/js/src/helpers.js
 create mode 100644 source/js/src/utils.js

diff --git a/.editorconfig b/.editorconfig
index f0627b937..5ec33d1e2 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 
 [*]
 charset = utf-8
-end_of_line = lf
+end_of_line = crlf
 insert_final_newline = true
 trim_trailing_whitespace = true
 indent_style = space
diff --git a/layout/_partials/head.swig b/layout/_partials/head.swig
index 7868ed65f..81e597223 100644
--- a/layout/_partials/head.swig
+++ b/layout/_partials/head.swig
@@ -81,6 +81,7 @@
 
 {# Export some HEXO Configurations to Front-End #}
 <script type="text/javascript" id="hexo.configuration">
+  var NexT = window.NexT || {};
   var CONFIG = {
     scheme: '{{ theme.scheme }}',
     sidebar: '{{ theme.sidebar }}',
diff --git a/layout/_scripts/commons.swig b/layout/_scripts/commons.swig
index 57ebe8d4a..abc297142 100644
--- a/layout/_scripts/commons.swig
+++ b/layout/_scripts/commons.swig
@@ -1,6 +1,6 @@
 {%
   set js_commons = [
-    'src/helpers.js',
+    'src/utils.js',
     'src/motion.js'
   ]
 %}
diff --git a/source/js/src/bootstrap.js b/source/js/src/bootstrap.js
index cdf0b32e0..a4ddd4da2 100644
--- a/source/js/src/bootstrap.js
+++ b/source/js/src/bootstrap.js
@@ -1,3 +1,5 @@
+/* global NexT: true */
+
 $(document).ready(function () {
 
   isMobile() && FastClick.attach(document.body);
@@ -24,45 +26,9 @@ $(document).ready(function () {
   });
 
 
-  CONFIG.fancybox && addFancyBox();
-
-  addActiveClassToMenuItem();
-
-  function addFancyBox () {
-    $('.content img').not('.group-picture img').each(function () {
-
-      var $image = $(this);
-      var imageTitle = $image.attr('title');
-      var $imageWrapLink = $image.parent('a');
-
-      if ($imageWrapLink.size() < 1) {
-        $imageWrapLink = $image.wrap('<a href="' + this.getAttribute('src') + '"></a>').parent('a');
-      }
-
-      $imageWrapLink.addClass('fancybox');
-      $imageWrapLink.attr('rel', 'group');
-
-      if (imageTitle) {
-        $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');
-        $imageWrapLink.attr("title", imageTitle); //make sure img title tag will show correctly in fancybox
-      }
-    });
-
-    $('.fancybox').fancybox({
-      helpers: {
-        overlay: {
-          locked: false
-        }
-      }
-    });
-  }
-
-  function addActiveClassToMenuItem () {
-    var path = location.pathname;
-    path = path === '/' ? path : path.substring(0, path.length - 1);
-    $('.menu-item a[href="' + path + '"]').parent().addClass('menu-item-active');
-  }
-
+  CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();
+  NexT.utils.embeddedVideoTransformer();
+  NexT.utils.addActiveClassToMenuItem();
 
 
   // Define Motion Sequence.
diff --git a/source/js/src/helpers.js b/source/js/src/helpers.js
deleted file mode 100644
index 056f958f3..000000000
--- a/source/js/src/helpers.js
+++ /dev/null
@@ -1,39 +0,0 @@
-function hasMobileUA () {
-  var nav = window.navigator;
-  var ua = nav.userAgent;
-  var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
-
-  return pa.test(ua);
-}
-
-
-function isTablet () {
-  return screen.width < 992 && screen.width > 767 && hasMobileUA();
-}
-
-function isMobile () {
-  return screen.width < 767 && hasMobileUA();
-}
-
-function isDesktop () {
-  return !isTablet() && !isMobile();
-}
-
-function escapeSelector (selector) {
-  return selector.replace(/[!"$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&")
-}
-
-function displaySidebar () {
-  if (!isDesktop()) {
-    return;
-  }
-  $('.sidebar-toggle').trigger('click');
-}
-
-function isMist () {
-  return CONFIG.scheme === 'Mist';
-}
-
-function isPisces () {
-  return CONFIG.scheme === 'Pisces';
-}
diff --git a/source/js/src/utils.js b/source/js/src/utils.js
new file mode 100644
index 000000000..330302ff7
--- /dev/null
+++ b/source/js/src/utils.js
@@ -0,0 +1,152 @@
+/* global NexT: true */
+
+NexT.utils = NexT.$u = {
+  /**
+   * Wrap images with fancybox support.
+   */
+  wrapImageWithFancyBox: function () {
+    $('.content img').not('.group-picture img').each(function () {
+
+      var $image = $(this);
+      var imageTitle = $image.attr('title');
+      var $imageWrapLink = $image.parent('a');
+
+      if ($imageWrapLink.size() < 1) {
+        $imageWrapLink = $image.wrap('<a href="' + this.getAttribute('src') + '"></a>').parent('a');
+      }
+
+      $imageWrapLink.addClass('fancybox');
+      $imageWrapLink.attr('rel', 'group');
+
+      if (imageTitle) {
+        $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');
+        $imageWrapLink.attr("title", imageTitle); //make sure img title tag will show correctly in fancybox
+      }
+    });
+
+    $('.fancybox').fancybox({
+      helpers: {
+        overlay: {
+          locked: false
+        }
+      }
+    });
+  },
+
+  /**
+   * Transform embedded video to support responsive layout.
+   * @see http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/
+   */
+  embeddedVideoTransformer: function () {
+    var $iframes = $('iframe');
+
+    /*
+     * Supported Players. Extend this if you need more players.
+     */
+    var SUPPORTED_PLAYERS = [
+      'www.youtube.com',
+      'player.vimeo.com',
+      'player.youku.com',
+      'music.163.com',
+      'www.tudou.com'
+    ];
+    var pattern = new RegExp(SUPPORTED_PLAYERS.join('|'));
+
+    $iframes.each(function () {
+      var iframe = this;
+      var $iframe = $(this);
+
+      if (this.src.search(pattern) > 0) {
+        /*
+         * Calculate the video ratio based on the iframe's w/h dimensions
+         */
+        var videoRatio = ( $iframe.height() / $iframe.width() ) * 100;
+
+        // Add height for 163 music.
+        (this.src.search('music.163.com') > 0) && (videoRatio += 10);
+
+        /*
+         * Replace the iframe's dimensions and position
+         * the iframe absolute, this is the trick to emulate
+         * the video ratio
+         */
+        $iframe
+          .width('100%')
+          .height('100%')
+          .css({
+            position: 'absolute',
+            top: '0',
+            left: '0'
+          });
+
+        /*
+         * Wrap the iframe in a new <div> which uses a
+         * dynamically fetched padding-top property based
+         * on the video's w/h dimensions
+         */
+        var wrap = document.createElement('div');
+        wrap.className = 'fluid-vids';
+        wrap.style.width = '100%';
+        wrap.style.position = 'relative';
+        wrap.style.paddingTop = videoRatio + '%';
+
+        /*
+         * Add the iframe inside our newly created <div>
+         */
+        var iframeParent = iframe.parentNode;
+        iframeParent.insertBefore(wrap, iframe);
+        wrap.appendChild(iframe);
+      }
+    });
+  },
+
+  /**
+   * Add `menu-item-active` class name to menu item
+   * via comparing location.path with menu item's href.
+   */
+  addActiveClassToMenuItem: function () {
+    var path = location.pathname;
+    path = path === '/' ? path : path.substring(0, path.length - 1);
+    $('.menu-item a[href="' + path + '"]').parent().addClass('menu-item-active');
+  }
+};
+
+function hasMobileUA () {
+  var nav = window.navigator;
+  var ua = nav.userAgent;
+  var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
+
+  return pa.test(ua);
+}
+
+
+function isTablet () {
+  return screen.width < 992 && screen.width > 767 && hasMobileUA();
+}
+
+function isMobile () {
+  return screen.width < 767 && hasMobileUA();
+}
+
+function isDesktop () {
+  return !isTablet() && !isMobile();
+}
+
+function escapeSelector (selector) {
+  return selector.replace(/[!"$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&")
+}
+
+function displaySidebar () {
+  if (!isDesktop()) {
+    return;
+  }
+  $('.sidebar-toggle').trigger('click');
+}
+
+function isMist () {
+  return CONFIG.scheme === 'Mist';
+}
+
+function isPisces () {
+  return CONFIG.scheme === 'Pisces';
+}