Merge pull request #3 from cortex-cms/refactor-get-media-html-and-upgrade

Youtube Responsive, Refactor getMediaHtml and Upgrade

Author: Alex Tharp

bower.json

@@ -1,17 +1,17 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "ignore": [
     "**/.*",
     "node_modules",
     "components"
   ],
   "dependencies": {
-    "riot": "~2.3.12",
+    "riot": "~2.3.18",
     "q": "~1.3.0",
     "qajax": "[email protected]:cb-talent-development/qajax#master",
     "underscore": "~1.8.3",
-    "materialize": "~0.97",
+    "materialize": "~0.97.6",
     "normalize-scss": "~3.0"
   },
   "resolutions": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A tool to enable in-page editing of elements with Cortex as a backend",
   "author": "CB Content Enablement Product Team <[email protected]>",
   "license": "Apache-2.0",
@@ -13,24 +13,24 @@
     "edit"
   ],
   "devDependencies": {
-    "gulp": "~3.9.0",
-    "gulp-load-plugins": "~1.1.0",
+    "gulp": "~3.9.1",
+    "gulp-load-plugins": "~1.2.2",
     "gulp-autoprefixer": "~3.1.0",
     "gulp-concat": "~2.6.0",
     "gulp-ruby-sass": "~2.0.6",
-    "gulp-riot": "~0.4.2",
-    "gulp-size": "~2.0.0",
+    "gulp-riot": "~0.4.9",
+    "gulp-size": "~2.1.0",
     "gulp-util": "~3.0.7",
-    "gulp-uglify": "~1.5.1",
+    "gulp-uglify": "~1.5.3",
     "gulp-combine-mq": "~0.4.0",
-    "gulp-minify-css": "~1.2.2",
+    "gulp-minify-css": "~1.2.4",
     "gulp-rename": "~1.2.2",
     "gulp-ignore": "~2.0.1",
-    "main-bower-files": "~2.11.0",
+    "main-bower-files": "~2.13.0",
     "streamqueue": "~1.1.1",
-    "dotenv": "~1.2.0"
+    "dotenv": "~2.0.0"
   },
   "engines": {
-    "node": ">=4.2.1"
+    "node": ">=6.0.0"
   }
 }

src/app/main.js

@@ -21,9 +21,9 @@
         MediasStore: new MediasStore()
       };
 
-      for (var k in stores) {
-        RiotControl.addStore(stores[k]);
-      }
+      _.each(stores, function(store) {
+        RiotControl.addStore(store);
+      });
 
       global.stores = stores;
 

src/app/sass/main.scss

@@ -6,7 +6,6 @@
   @import "components/reset";
 
   // Mixins
-  @import "materialize/sass/components/prefixer";
   @import "materialize/sass/components/mixins";
   @import "materialize/sass/components/color";
 
@@ -39,6 +38,8 @@
   @import "materialize/sass/components/global";
   @import "materialize/sass/components/icons-material-design";
   @import "materialize/sass/components/grid";
+  @import "materialize/sass/components/navbar";
+  @import "materialize/sass/components/roboto";
   @import "materialize/sass/components/typography";
   @import "materialize/sass/components/cards";
   @import "materialize/sass/components/toast";
@@ -49,8 +50,17 @@
   @import "materialize/sass/components/waves";
   @import "materialize/sass/components/modal";
   @import "materialize/sass/components/collapsible";
+  @import "materialize/sass/components/chips";
   @import "materialize/sass/components/materialbox";
-  @import "materialize/sass/components/form";
+  @import "materialize/sass/components/forms/forms";
+  @import "materialize/sass/components/table_of_contents";
+  @import "materialize/sass/components/sideNav";
+  @import "materialize/sass/components/preloader";
+  @import "materialize/sass/components/slider";
+  @import "materialize/sass/components/carousel";
+  @import "materialize/sass/components/date_picker/default";
+  @import "materialize/sass/components/date_picker/default.date";
+  @import "materialize/sass/components/date_picker/default.time";
 
   // icons
   @import "components/icons";

src/app/stores/MediasStore.js

@@ -49,6 +49,7 @@
 
   MediasStore.prototype._search = function(query) {
     this.page.query = query;
+    this.page.page = 1;
     this._fetch();
   };
 

src/app/utility.js

@@ -1,30 +1,70 @@
-(function(global) {
+(function (global) {
   'use strict';
 
-  global.utility = {
-    currentEditor: {},
-    mediaLibraryModal: {},
-    insertMedia: function(media) {
-      this.currentEditor.insertHtml(getMediaHtml(media));
-      this.mediaLibraryModal.closeModal();
-    }
-  };
+  var getMediaHtml = function (media) {
+    // must use setAttribute for non-standard attributes
+    var getImageMediaElement = function (media) {
+        var image = document.createElement('img');
+        image.src = media.url;
+        image.alt = media.name;
+
+        return image;
+      },
+      getYoutubeMediaElement = function (media) {
+        var youtube = document.createElement('iframe');
+        youtube.setAttribute('type', 'text/html');
+        youtube.src = 'http://www.youtube.com/embed/' + media.video_id + '?rel=0&enablejsapi=1controls=1&showinfo=0&wmode=transparent';
+        youtube.setAttribute('frameborder', '0');
+        youtube.style.position = 'absolute';
+        youtube.style.top = '0';
+        youtube.style.left = '0';
+        youtube.width = '100%';
+        youtube.height = '100%';
+
+        var fluidYoutubeWrap = document.createElement('div');
+        fluidYoutubeWrap.className = 'video--fluid';
+        fluidYoutubeWrap.style.height = '0';
+        fluidYoutubeWrap.style.maxWidth = '100%';
+        fluidYoutubeWrap.style.position = 'relative';
+        fluidYoutubeWrap.style.paddingBottom = '56.25%';
+        fluidYoutubeWrap.style.overflow = 'hidden';
+
+        fluidYoutubeWrap.appendChild(youtube);
 
-  var getMediaHtml = function(media) {
-    var media_html;
+        return fluidYoutubeWrap;
+      },
+      getPdfMediaElement = function (media) {
+        var pdf = document.createElement('a');
+        pdf.href = media.url;
+        pdf.innerHTML = media.name;
 
-    switch(media.content_type) {
+        return pdf;
+      },
+      mediaElement;
+
+    switch (media.content_type) {
       case 'image':
-        media_html = '<img src="' + media.url + '" data-media-id="' + media.id + '" alt="' + media.name + '"></img>';
+        mediaElement = getImageMediaElement(media);
         break;
       case 'youtube':
-        media_html = '<iframe data-media-id="' + media.id + '" type="text/html" src="http://www.youtube.com/embed/' + media.video_id + '" frameborder="0" style="width: 100%; height: auto;" />';
+        mediaElement = getYoutubeMediaElement(media);
         break;
       case 'pdf':
-        media_html = '<a href="' + media.url + '" data-media-id="' + media.id + '">' + media.name + '</a>';
+        mediaElement = getPdfMediaElement(media);
         break;
     }
 
-    return media_html;
-  }
+    mediaElement.setAttribute('data-media-id', media.id);
+    return mediaElement.outerHTML;
+  };
+
+  global.utility = {
+    currentEditor: {},
+    mediaLibraryModal: {},
+    insertMedia: function (media) {
+      this.currentEditor.insertHtml(getMediaHtml(media));
+      this.mediaLibraryModal.closeModal();
+    },
+    getMediaHtml: getMediaHtml
+  };
 }(this));