From 210bbbc8d99685ee3b62e1086b5594144e7da0d6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 17 Aug 2016 02:40:11 -0400
Subject: autoplay/loop checkbox on individual media fields

---
 examples/db.json                                |  6 ++++--
 themes/okadmin/public/css/main.css              | 19 +++++++++++++++++--
 themes/okadmin/public/js/parser.js              |  6 ++++++
 themes/okadmin/templates/partials/inputs.liquid |  8 ++++----
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/examples/db.json b/examples/db.json
index 401bf26..5fee377 100644
--- a/examples/db.json
+++ b/examples/db.json
@@ -196,7 +196,8 @@
           "width": "400",
           "height": "400",
           "title": "ee12b137-1c8a-400a-87e3-89cbee7b4da6.mp4",
-          "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png"
+          "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png",
+          "autoplay": "true"
         },
         {
           "type": "youtube",
@@ -205,7 +206,8 @@
           "width": "640",
           "height": "360",
           "title": "dëf lëöpär¨d¨¨¨¨<>~!@~#!:I!@",
-          "thumb": "http://i.ytimg.com/vi/y_35kXCQxN4/hqdefault.jpg"
+          "thumb": "http://i.ytimg.com/vi/y_35kXCQxN4/hqdefault.jpg",
+          "loop": "true"
         },
         {
           "type": "audio",
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 5fbb624..6a48e94 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -240,11 +240,26 @@ button, input[type=submit] {
   display: block;
   width: 25em;
 }
-.main.resource form .group.video .checkboxes label {
+.main.resource form .group .checkboxes,
+.main.resource form .group.loaded .checkboxes {
+  clear: left;
   display: block;
+  max-width: 250px;
+  padding-top: 5px;
+}
+.main.resource form .group .checkboxes input.flag,
+.main.resource form .group.loaded .checkboxes input.flag {
+  display: inline-block;
+  max-width: 20px;
+  float: none;
 }
-.main.resource form .group.video .checkboxes label {
+.main.resource form .group .checkboxes label,
+.main.resource form .group.loaded .checkboxes label {
   display: inline-block;
+  float: none;
+  width: 70px;
+  margin: 0;
+  text-align: left;
 }
 .main.resource form .group.loaded label {
   display: block;
diff --git a/themes/okadmin/public/js/parser.js b/themes/okadmin/public/js/parser.js
index 4ab9a6c..81bba2d 100644
--- a/themes/okadmin/public/js/parser.js
+++ b/themes/okadmin/public/js/parser.js
@@ -100,6 +100,8 @@ var Parser = {
 						token: id,
 						thumbnail: thumb,
 						title: res.snippet.title,
+						autoplay: false,
+						loop: false,
 						width: 640,
 						height: 360,
 					})
@@ -133,6 +135,8 @@ var Parser = {
 						title: res.title,
 						width: res.width,
 						height: res.height,
+						autoplay: false,
+						loop: false,
 					})
 				}
 			})
@@ -257,6 +261,8 @@ var Parser = {
                   title: stripHTML(post['video-caption']),
                   width: 640,
                   height: 360,
+                  autoplay: false,
+                  loop: false,
                 }
                 media_list.push(media)
               }
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index e83bec0..f093a0d 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -176,9 +176,9 @@
             <label>Thumbnail</label>
             <input name="{{name}}[][thumb]" type="text" class="video-thumb">
             <span class="checkboxes">
-              <input name="{{name}}[][autoplay]" value="{{image.autoplay}}" type="checkbox" class="video-autoplay">
+              <input name="{{name}}[][autoplay]" value="{{image.autoplay}}" type="checkbox" class="video-autoplay flag">
               <label>Autoplay</label>
-              <input name="{{name}}[][loop]" value="{{image.loop}}" type="checkbox" class="video-loop">
+              <input name="{{name}}[][loop]" value="{{image.loop}}" type="checkbox" class="video-loop flag">
               <label>Loop</label>
             </span>
             </div>
@@ -228,9 +228,9 @@
                 <label>Thumbnail</label>
                 <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
                 <span class="checkboxes">
-                  <input name="{{name}}[{{forloop.index0}}][autoplay]" value="{{image.autoplay}}" type="checkbox" class="video-autoplay">
+                  <input name="{{name}}[{{forloop.index0}}][autoplay]" value="true" {% if image.autoplay %}checked="true"{% endif %} type="checkbox" class="flag video-autoplay">
                   <label>Autoplay</label>
-                  <input name="{{name}}[{{forloop.index0}}][loop]" value="{{image.loop}}" type="checkbox" class="video-loop">
+                  <input name="{{name}}[{{forloop.index0}}][loop]" value="true" {% if image.loop %}checked="true"{% endif %} type="checkbox" class="flag video-loop">
                   <label>Loop</label>
                 </span>
                 </div>
-- 
cgit v1.2.3-70-g09d2