Extended the editor to support video backgrounds. Ensure that the art…

…icle ID is stored as an integer and not a string.
GetMural · Apr 1, 2017 · d7fbf54 · d7fbf54
1 parent 9ae3871
commit d7fbf54
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 30 deletions.
diff --git a/app.js b/app.js
@@ -223,8 +223,10 @@ app.get('/editor/page/videobackground', function(req, res){
 	res.render('editor/pages/videobackground', {
 		partials: {
 			formcontrols: '../fragments/formcontrols',
-			image: '../fragments/image',
-			videobackground: 'videobackground'
+			title: '../fragments/title',
+			subtitle: '../fragments/subtitle',
+			videobackground: 'videobackground',
+			videosources: '../fragments/videosources'
 		}
 	});
 });
@@ -276,10 +278,6 @@ app.post('/update', function(req, res) {
 
 	var items = req.body;
 
-	for (var item in items) {
-		meta["meta"][item] = items[item];
-	}
-
 	res.send(JSON.stringify({
 		data: data
 	}));

diff --git a/assets/js/editor.js b/assets/js/editor.js
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         event.preventDefault();
         var navItem = this,
             link = this.href;
-        window.id = this.dataset.id;
+        window.id = parseInt(this.dataset.id);
         window.type = this.dataset.type;
         $(bodyElement).load(link, function (response, status, xhr) {
           if ( status !== "error" ) {
@@ -182,6 +182,60 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
       }
     }
+    // Video Background
+    var videoBackgroundEl = $('.js-VideoBackground')[0];
+
+    if (typeof videoBackgroundEl != "undefined") {
+      for (var i = 0; i < Object.keys(items).length; i++) {
+        var item = items[i];
+        if (typeof item["videobackground"] != "undefined") {
+          if (window.id == item["videobackground"]["id"]) {
+            item = item["videobackground"];
+            console.log(item); // uncomment this to see the item
+            $('fieldset').each( function () {
+              if ($(this).hasClass('js-VideoSources')) {
+                $(this).find('input, textarea').each(function () {
+                  var name = this.name;
+                  for (key in item["video"]) {
+                    if (name == key) {
+                      $(this).val(item["video"][key]);
+                    }
+                  }
+                });
+              } else if ($(this).hasClass('js-PosterImage')) {
+                $(this).find('input, textarea').each(function () {
+                  var name = this.name;
+                  for (key in item["image"]) {
+                    if (name == key) {
+                      $(this).val(item["image"][key]);
+                    }
+                  }
+                });
+              } else {
+                $(this).find('input, textarea').each(function () {
+                  var name = this.name;
+                  for (var i = 0; i < Object.keys(item).length; i++) {
+                    var key = Object.keys(item)[i];
+                    if (this.tagName.toLowerCase() == "input") {
+                      if (this.type == "checkbox" && this.name == name) {
+                        if (item[name] == true) {
+                          this.checked = true;
+                        }
+                      } else {
+                        this.value = item[name];
+                      }
+                    }
+                    if (this.tagName.toLowerCase() == "textarea") {
+                      this.value = item[name];
+                    }
+                  }
+                });
+              }
+            });
+          }
+        }
+      }
+    }
   };
 
   function addAssets() {
@@ -259,7 +313,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
     var type = window.type,
         postData = {},
         snippets = [],
-        snippetImage = [];
+        snippetImage = [],
+        posterImage = {};
       var i = 0;
       postData[type] = {};
       postData[type]["id"] = window.id;
@@ -279,6 +334,21 @@ document.addEventListener("DOMContentLoaded", function (event) {
           });
           snippets.push(snippetImage);
           snippetImage = [];
+        } else if ($(this).hasClass('js-VideoSources')) {
+          postData[type]["video"] = {};
+          $(this).find('input').each( function () {
+            postData[type]["video"][this.dataset.name] = this.value;
+          });
+        } else if ($(this).hasClass('js-PosterImage')) {
+          postData[type]["image"] = {};
+          $(this).find('input').each( function () {
+            postData[type]["image"][this.dataset.name] = this.value;
+          });
+        } else if ($(this).hasClass('js-Format')) {
+          postData[type]["format"] = {};
+          $(this).find('input').each( function () {
+            postData[type]["format"][this.dataset.name] = this.checked;
+          });
         } else {
           $(this).find('input, textarea').each( function () {
             if (this.type == "checkbox") {

diff --git a/views/editor/fragments/imagesources.html b/views/editor/fragments/imagesources.html
@@ -1,5 +1,5 @@
-<div class="form-group js-ImageSources">
-  <fieldset>
+<div class="form-group">
+  <fieldset class="js-ImageSources">
     <legend>Image Sources</legend>
     <div class="form-group">
       <label for="scrSmall" class="control-label">Small Image</label>

diff --git a/views/editor/fragments/videosources.html b/views/editor/fragments/videosources.html
@@ -1,11 +1,9 @@
-<fieldset>
-  <legend>Video Sources</legend>
-  <div class="form-group">
-    <label class="control-label">MP4</label>
-    <input name="mp4" data-name="mp4" type="text" class="form-control" value="" />
-  </div>
-  <div class="form-group">
-    <label class="control-label">Webm</label>
-    <input name="webm" data-name="webm" type="text" class="form-control" value="" />
-  </div>
-</fieldset>
+<legend>Video Sources</legend>
+<div class="form-group">
+  <label class="control-label">MP4</label>
+  <input name="mp4" data-name="mp4" type="text" class="form-control" value="" />
+</div>
+<div class="form-group">
+  <label class="control-label">Webm</label>
+  <input name="webm" data-name="webm" type="text" class="form-control" value="" />
+</div>
diff --git a/views/editor/pages/videobackground.html b/views/editor/pages/videobackground.html
@@ -1,31 +1,46 @@
-<form class="form-horizontal" data-id="">
-  <fieldset>
-    <legend>Video Background</legend>
+<form class="form-horizontal js-VideoBackground" data-id="">
+
+  <legend>Video Background</legend>
+
+  <fieldset class="js-Format">
 
     <div class="form-group">
       <div class="togglebutton">
         <label for="fullpage">
-          <input id="fullpage" type="checkbox" class="form-control" checked="checked" />
+          <input id="fullpage" data-name="fullpage" type="checkbox" class="form-control" checked="checked" />
           <span class="toggle"></span>
           Fullpage
         </label>
       </div>
     </div>
 
+  </fieldset>
+
+  <fieldset>
+
     {{> title}}
 
     {{> subtitle}}
 
+  </fieldset>
+
+  <fieldset class="js-VideoSources">
+
     {{> videosources}}
 
-    <fieldset>
-      <legend>Poster Image</legend>
+  </fieldset>
 
-      {{> image}}
+  <fieldset class="js-PosterImage">
 
-    </fieldset>
+    <legend>Poster Image</legend>
 
-    {{> formcontrols}}
+    <div class="form-group">
+      <label for="loading" class="control-label">Src</label>
+      <input name="loading" data-name="loading" type="text" class="form-control" value="" />
+    </div>
 
   </fieldset>
+
+  {{> formcontrols}}
+
 </form>