From 3e2d7e98230990ad954b33203e0611358c1fa915 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Apr 2015 14:24:20 -0400 Subject: stubbing in videos --- themes/okadmin/public/css/main.css | 17 +++++--- themes/okadmin/public/js/app.js | 58 ++++++++++++++++++++----- themes/okadmin/public/js/upload.js | 15 ++++++- themes/okadmin/templates/partials/inputs.liquid | 55 +++++++++++++++++++++-- 4 files changed, 124 insertions(+), 21 deletions(-) (limited to 'themes/okadmin') diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index 747ec34..5dbd910 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -283,11 +283,11 @@ button, input[type=submit] { list-style-type: none; display: block; clear: both; - height: 10em; + height: 7em; } .main.resource form img { width: 10em; - max-height: 10em; + max-height: 6em; border: 0; } .main.resource form .images img { @@ -296,7 +296,10 @@ button, input[type=submit] { } .main.resource form textarea.caption { width: 15em; - height: 9em; + height: 6em; +} +.main.resource form .video-element input[type=text] { + width: 15em; } .add-image-button { background: #ddd; @@ -324,13 +327,15 @@ button, input[type=submit] { margin: 0; padding: 0; cursor: pointer; } -.image-element:hover .remove-image { +.video-element:hover .remove, +.image-element:hover .remove { display: block; } -.image-element .remove-image:hover { +.video-element .remove:hover, +.image-element .remove:hover { color: red; } -.remove-image { +.remove { display: none; } diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index e981223..c46cea8 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -2,23 +2,56 @@ var OKAdmin = function(){ // initialize our multi-image uploader with an element and a template $(".group.image-list").each(function(){ + var parent = this var uploader = new OKUpload () uploader.bind( this ) uploader.add = function(url){ - var imageTemplate = $("#captioned-image-template").html() + var imageTemplate = $(".image-template", parent).html() var $el = $(imageTemplate) $el.find(".uri").val(url) $el.find("img").attr("src", url) - $(".captioned-image-list ol").append($el) + $("ol", parent).append($el) } }) // delete image from gallery - $(document).on("mousedown", ".image-list .remove-image", function(){ + $(document).on("mousedown", ".image-list .remove", function(){ if (confirm("Remove this image?")) { $(this).parent().remove() } }) + // initialize our multimedia uploader with an element and a template + $(".group.media-list").each(function(){ + var parent = this + var uploader = new OKUpload () + uploader.bind( this ) + uploader.add = function(url){ + var imageTemplate = $(".image-template", parent).html() + var $el = $(imageTemplate) + $el.find(".uri").val(url) + $el.find("img").attr("src", url) + $("ol", parent).append($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).append($el) + } + }) + // delete image from gallery + $(document).on("mousedown", ".media-list .remove", function(){ + if (confirm("Remove this media?")) { + $(this).parent().remove() + } + }) + // initialize our single image uploader with existing DOM $(".group.image").each(function(){ var $el = $(this) @@ -35,7 +68,7 @@ var OKAdmin = function(){ } }) // delete image from single image entry - $(document).on("mousedown", ".image .remove-image", function(){ + $(document).on("mousedown", ".image .remove", function(){ if (confirm("Remove this image?")) { var $el = $(this).closest(".image") $el.removeClass('loaded') @@ -46,8 +79,8 @@ var OKAdmin = function(){ }) // make the region sortable with drag-and-drop - $(".captioned-image-list ol").sortable() - $(".captioned-image-list ol").disableSelection() + $(".media-list ol, .image-list ol").sortable() + $(".media-list ol, .image-list ol").disableSelection() // populate a video field with info from our url parser var last_url @@ -94,14 +127,17 @@ var OKAdmin = function(){ $id.val( slug ) } - $(".image-element").each(function(index){ - $(this).find("input,textarea").each(function(){ - var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]") - $(this).attr("name", field) + $("ol").each(function(){ + $("li", this).each(function(index){ + $(this).find("input,textarea").each(function(){ + var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]") + $(this).attr("name", field) + }) }) }) }) + // delete individual records $("#delete_form").submit(function(e){ if (confirm("Are you sure you want to delete this record?")) { return @@ -111,6 +147,7 @@ var OKAdmin = function(){ } }) + // reorder items in categories $(".resource-category").on("click", ".edit-btn", function(e) { e.preventDefault(); var $parent = $(e.delegateTarget); @@ -142,6 +179,7 @@ var OKAdmin = function(){ } }); + // save new category order $(".resource-category").on("submit", "form", function(e) { var $parent = $(e.delegateTarget); $parent.find(".resource-input").each(function(index) { diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index b4a0dfc..8d73dd5 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -5,11 +5,19 @@ var OKUpload = function(){ OKUpload.prototype.bind = function(rapper){ var uploader = this $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) ) - $(".add-image-url", rapper).on("keydown blur", pressEnter( function(e){ + $(".add-url", rapper).on("keydown blur", pressEnter( function(e){ var url = $(this).val() $(this).val("") if (! url) return - uploader.add(url) + Parser.parse( url, function(media){ + console.log(url, media) + if (media.type == "image") { + uploader.add(url) + } + else { + uploader.addVideo(media) + } + }) })) } OKUpload.prototype.handleFileSelect = function(e) { @@ -50,6 +58,9 @@ OKUpload.prototype.success = function(data){ OKUpload.prototype.add = function(media){ console.log(media) } +OKUpload.prototype.addVideo = function(media){ + console.log(media) +} OKUpload.prototype.error = function(error){ throw error } diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 4d31413..d5d8b66 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -40,7 +40,7 @@ - +
@@ -49,6 +49,55 @@
+ {% elsif type == 'media-list' %} +
+
+
+ + +
+ +
+ + + + + +
    + {% for image in spec.value %} + {% if image.token %} +
  1. + {{ JSON.stringify(spec.value) }} +
    2. + {% else %} +
  2. + + + {{image.caption}} + +
    3. + {% endif %} + {% endfor %} +
+
{% elsif type == 'captioned-image-list' %}
@@ -56,10 +105,10 @@
- +
- @@ -123,7 +134,7 @@ {{image.caption}} - + {% endfor %} -- cgit v1.2.3-70-g09d2