From 56580705e3a62eaf1c498c1c0456fc33fe3b2f76 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 5 Apr 2016 14:05:35 -0400
Subject: broaden media support

---
 themes/okadmin/templates/partials/inputs.liquid | 68 ++++++++++++++++++-------
 1 file changed, 50 insertions(+), 18 deletions(-)

(limited to 'themes/okadmin/templates/partials')

diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index e618c61..0cd7f6b 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -9,14 +9,14 @@
 
     {% if type == 'string' %}
       <input
-        name="{{name}}" type="text" value="{{spec.value}}">
+        name="{{name}}" type="text" value="{{spec.value | escape}}">
     {% elsif type == 'text' %}
       <textarea
-        name="{{name}}">{{spec.value}}</textarea>
+        name="{{name}}">{{spec.value | escape}}</textarea>
     {% elsif type == 'number' %}
       <input
         type="number"
-        name="{{name}}" value="{{spec.value}}">
+        name="{{name}}" value="{{spec.value | escape}}">
     {% elsif type == 'enum' or type == 'foreign-key' %}
       <select
         name="{{name}}">
@@ -32,9 +32,9 @@
         <input name="{{name}}[width]" value="{{spec.value.width}}" type="hidden" class="video-width" hidden>
         <input name="{{name}}[height]" value="{{spec.value.height}}" type="hidden" class="video-height" hidden>
         <label>Title</label>
-        <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title">
+        <input name="{{name}}[title]" type="text" value="{{spec.value.title | escape}}" class="video-title">
         <label>Thumbnail</label>
-        <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
+        <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb | escape}}" class="video-thumb">
       </div>
     {% elsif type == 'image' %}
       <div class="image group {% if spec.value.uri %}loaded{% endif %}">
@@ -47,8 +47,8 @@
         </div>
         <div class="image-element">
           <input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}">
-          <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption}}</textarea>
-          <img src="{{spec.value.uri}}" alt="{{spec.value.caption}}">
+          <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption | escape}}</textarea>
+          <img src="{{spec.value.uri}}" alt="{{spec.value.caption | escape}}">
           <button class="remove">x</button>
         </div>
       </div>
@@ -78,7 +78,7 @@
     {% elsif type == 'tag-list' %}
       <div class="tag-list">
         <input name="{{name}}"
-               value="{{spec.value}}"
+               value="{{spec.value | escape}}"
                placeholder="Enter a comma separated list of tags.">
       </div>
 
@@ -90,13 +90,13 @@
               <div class="handle"></div>
               <input
                   name="{{name}}[{{forloop.index0}}][text]"
-                  value="{{link.text}}"
+                  value="{{link.text | escape}}"
                   type="text"
                   placeholder="Link text"
                   class="link-input link-text">
               <input
                   name="{{name}}[{{forloop.index0}}][uri]"
-                  value="{{link.uri}}"
+                  value="{{link.uri | escape}}"
                   type="text"
                   placeholder="URL"
                   class="link-input link-uri">
@@ -142,8 +142,8 @@
       <div class="media-list group loaded">
         <div class="fields">
           <div class="add-image-button">
-            <input type="file" accept="image/*" multiple>
-            <button>+ Add images</button>
+            <input type="file" accept="image/*,video/*,audio/*" multiple>
+            <button>+ Add media</button>
           </div>
           <input class="add-url" type="text" placeholder="+ Add Image/Video/Link URL">
         </div>
@@ -177,6 +177,23 @@
           </li>
         </script>
 
+        <script type="text/html" class="audio-template">
+          <li class="audio-element">
+            <div style="float: left">
+            <input name="{{name}}[][type]" type="hidden" class="audio-type" hidden>
+            <input name="{{name}}[][token]" type="hidden" class="audio-token" hidden>
+            <input name="{{name}}[][uri]" type="hidden" class="audio-uri" hidden>
+            <input name="{{name}}[][duration]" value="{{image.duration}}" type="hidden" class="audio-duration" hidden>
+            <label>Caption</label>
+            <input name="{{name}}[][title]" type="text" class="audio-title">
+            <label>Thumbnail</label>
+            <input name="{{name}}[][thumb]" type="text" class="audio-thumb">
+            </div>
+            <img>
+            <button class="remove">x</button>
+          </li>
+        </script>
+
         <script type="text/html" class="link-template">
           <li class="link-element">
             <input class="uri" type="text" name="{{name}}[][uri]" value="">
@@ -197,19 +214,34 @@
                 <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
                 <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
                 <label>Caption</label>
-                <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title}}" type="text" class="video-title">
+                <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title | escape}}" type="text" class="video-title">
                 <label>Thumbnail</label>
                 <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
                 </div>
                 <img src="{{image.thumb}}">
                 <button class="remove">x</button>
               </li>
+            {% elsif image.type and (image.type == "audio" or image.type == "soundcloud") %}
+              <li class="audio-element">
+                <div style="float: left">
+                <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="audio-type" hidden>
+                <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="audio-token" hidden>
+                <input name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}" type="hidden" class="audio-uri" hidden>
+                <input name="{{name}}[{{forloop.index0}}][duration]" value="{{image.duration}}" type="hidden" class="audio-duration" hidden>
+                <label>Caption</label>
+                <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title | escape}}" type="text" class="audio-title">
+                <label>Thumbnail</label>
+                <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="audio-thumb">
+                </div>
+                <img src="{{image.thumb}}">
+                <button class="remove">x</button>
+              </li>
             {% elsif image.type and image.type == "link" %}
               <li class="link-element">
                 <label>URL</label>
                 <input class="uri" type="text" name="{{name}}[][uri]" value="{{image.uri}}">
                 <label>Caption</label>
-                <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption">{{image.caption}}</textarea>
+                <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption">{{image.caption | escape}}</textarea>
                 <input type="hidden" name="{{name}}[][type]" value="link">
                 <button class="remove">x</button>
               </li>
@@ -217,7 +249,7 @@
               <li class="image-element">
                 <label>Caption</label>
                 <input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
-                <textarea class="caption" name="{{name}}[][caption]">{{image.caption}}</textarea>
+                <textarea class="caption" name="{{name}}[][caption]">{{image.caption | escape}}</textarea>
                 <input type="hidden" name="{{name}}[][type]" value="image">
                 <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
                 <button class="remove">x</button>
@@ -249,7 +281,7 @@
           {% for image in spec.value %}
             <li class="image-element">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
-              <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
+              <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
             </li>
@@ -282,8 +314,8 @@
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}" placeholder="Name">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption}}"  placeholder="Email">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Name">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Email">
             </li>
           {% endfor %}
         </ol>
-- 
cgit v1.2.3-70-g09d2