allow generic urls in media fieldv0.1.21

3 files changed, 62 insertions, 21 deletions

diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index da398eb..61fc8c8 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -47,17 +47,33 @@ var OKAdmin = function(){
       $("ol", parent).prepend($el)
     }
     uploader.addVideo = function(media){
-      console.log(media)
-      var videoTemplate = $(".video-template", parent).html()
-      var $el = $(videoTemplate)
-      $el.addClass("loaded")
-      $el.find(".video-type").val( media.type )
-      $el.find(".video-token").val( media.token )
-      $el.find(".video-title").val( media.title )
-      $el.find(".video-thumb").val( media.thumbnail )
-      $el.find("img").attr("src", media.thumbnail )
-      $("ol", parent).prepend($el)
-   }
+      switch (media.type) {
+        case 'youtube':
+        case 'vimeo':
+        case 'video':
+          var videoTemplate = $(".video-template", parent).html()
+          var $el = $(videoTemplate)
+          $el.addClass("loaded")
+          $el.find(".video-type").val( media.type )
+          $el.find(".video-token").val( media.token )
+          $el.find(".video-title").val( media.title )
+          $el.find(".video-thumb").val( media.thumbnail )
+          $el.find(".video-width").val( media.width )
+          $el.find(".video-height").val( media.height )
+          $el.find("img").attr("src", media.thumbnail )
+          $("ol", parent).prepend($el)
+          break
+        case 'link':
+          var linkTemplate = $(".link-template", parent).html()
+          var $el = $(linkTemplate)
+          $el.addClass("loaded")
+          $el.find(".uri").val( media.url )
+          $("ol", parent).prepend($el)
+          break
+        default:
+          alert("Unsupported link type!")
+      }
+    }
   })
   // delete image from gallery
   $(document).on("mousedown", ".media-list .remove", function(){
diff --git a/themes/okadmin/public/js/parser.js b/themes/okadmin/public/js/parser.js
index 411f425..95b391c 100644
--- a/themes/okadmin/public/js/parser.js
+++ b/themes/okadmin/public/js/parser.js
@@ -145,7 +145,6 @@ var Parser = {
 					'&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>'
 		}
 	},
-  /*
 	{
 		type: 'link',
 		regex: /^http.+/i,
@@ -163,8 +162,7 @@ var Parser = {
 		tag: function (media) {
 			return '<a href="' + media.url + '" target="_blank">' + media.url + '</a>'
 		}
-	}
-	*/
+	},
 	],
 
   tumblr: function(url, cb){
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 4acb435..77ee7a4 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -29,6 +29,8 @@
         <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
         <input name="{{name}}[type]" type="hidden" value="{{spec.value.type}}" class="video-type" hidden>
         <input name="{{name}}[token]" type="hidden" value="{{spec.value.token}}" class="video-token" hidden>
+        <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">
         <label>Thumbnail</label>
@@ -143,11 +145,12 @@
             <input type="file" accept="image/*" multiple>
             <button>+ Add images</button>
           </div>
-          <input class="add-url" type="text" placeholder="+ Add Image/Video URL">
+          <input class="add-url" type="text" placeholder="+ Add Image/Video/Link URL">
         </div>
 
         <script type="text/html" class="image-template">
           <li class="image-element">
+            <label>Caption</label>
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <img>
@@ -160,6 +163,8 @@
             <div style="float: left">
             <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
             <input name="{{name}}[][token]" type="hidden" class="video-token" hidden>
+            <input name="{{name}}[][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
+            <input name="{{name}}[][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
             <label>Caption</label>
             <input name="{{name}}[][title]" type="text" class="video-title">
             <label>Thumbnail</label>
@@ -170,13 +175,24 @@
           </li>
         </script>
 
+        <script type="text/html" class="link-template">
+          <li class="link-element">
+            <input class="uri" type="text" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption"></textarea>
+            <input type="hidden" name="{{name}}[][type]" value="link">
+            <button class="remove">x</button>
+          </li>
+        </script>
+        
         <ol>
           {% for image in spec.value %}
-            {% if image.token %}
+            {% if image.type and (image.type == "vimeo" or image.type == "youtube" or image.type == "video") %}
               <li class="video-element">
                 <div style="float: left">
                 <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
                 <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
+                <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">
                 <label>Thumbnail</label>
@@ -185,11 +201,22 @@
                 <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>
+                <input type="hidden" name="{{name}}[][type]" value="link">
+                <button class="remove">x</button>
+              </li>
             {% else %}
               <li class="image-element">
+                <label>Caption</label>
                 <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
                 <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
-                <img src="{{image.uri}}" alt="{{image.caption}}">
+                <input type="hidden" name="{{name}}[][type]" value="image">
+                <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
                 <button class="remove">x</button>
               </li>
             {% endif %}
@@ -210,7 +237,7 @@
           <li class="image-element">
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
-            <img alt="{{image.caption}}">
+            <img>
             <button class="remove">x</button>
           </li>
         </script>
@@ -220,7 +247,7 @@
             <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>
-              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
             </li>
           {% endfor %}
@@ -238,7 +265,7 @@
 
         <script type="text/html" class="image-template">
           <li class="image-element">
-            <img alt="{{image.caption}}">
+            <img>
             <button class="remove">x</button>
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <input class="caption" name="{{name}}[][label]" placeholder="Name">
@@ -249,7 +276,7 @@
         <ol>
           {% for image in spec.value %}
             <li class="image-element">
-              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <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">