From ee92f41a8de53c2278c6ec6ee01484ea32ebcc82 Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Thu, 18 Sep 2014 16:28:52 -0400 Subject: [PATCH] Updated look and feel and added front-end validation for image elements in add-show --- airtime_mvc/public/css/add-show.css | 14 +++- .../public/js/airtime/schedule/add-show.js | 83 +++++++++++++++++-- 2 files changed, 86 insertions(+), 11 deletions(-) diff --git a/airtime_mvc/public/css/add-show.css b/airtime_mvc/public/css/add-show.css index 420cee75f..6e6d03b9a 100644 --- a/airtime_mvc/public/css/add-show.css +++ b/airtime_mvc/public/css/add-show.css @@ -117,7 +117,6 @@ label.wrapp-label input[type="checkbox"] { #add_show_end_date_no_repeat, #add_show_start_date { width: 89px; - } #add_show_duration { @@ -127,8 +126,17 @@ label.wrapp-label input[type="checkbox"] { } #show_logo_current, #show_logo_preview { - width: 50px; - height: 50px; + border: 1px solid #5b5b5b; + -webkit-box-shadow: 0px 0px 2px 1px rgba(48,48,48,1); + -moz-box-shadow: 0px 0px 2px 1px rgba(48,48,48,1); + box-shadow: 0px 0px 2px 1px rgba(48,48,48,1); + width: 200px; + height: 200px; display: none; cursor: default; } + +#show_remove_logo { + display: none; + height: 28px; +} diff --git a/airtime_mvc/public/js/airtime/schedule/add-show.js b/airtime_mvc/public/js/airtime/schedule/add-show.js index 40aebc4d5..950ba6ff1 100644 --- a/airtime_mvc/public/js/airtime/schedule/add-show.js +++ b/airtime_mvc/public/js/airtime/schedule/add-show.js @@ -241,14 +241,17 @@ function setAddShowEvents(form) { $("#show_logo_current-element").show(); $("#show_logo_current-label").show(); $("#show_logo_current").show(); + $("#show_remove_logo").show(); } else { $("#show_logo_current-element").hide(); $("#show_logo_current-label").hide(); $("#show_logo_current").hide(); + $("#show_remove_logo").hide(); } } else { $("#show_logo_current-element").hide(); $("#show_logo_current-label").hide(); + $("#show_remove_logo").hide(); } form.find("#add_show_repeats").click(function(){ @@ -611,7 +614,7 @@ function setAddShowEvents(form) { }); // when an image is uploaded, we want to show it to the user - form.find("#upload").change(function(event) { + form.find("#add_show_logo").change(function(event) { if (this.files && this.files[0]) { $("#show_logo_preview").show(); var reader = new FileReader(); // browser compatibility? @@ -621,13 +624,78 @@ function setAddShowEvents(form) { .attr('src', e.target.result); }; - // read the image data as though it were a data URI - reader.readAsDataURL(this.files[0]); + // check image size so we don't crash the page trying to render + if (validateImage(this.files[0], $("#add_show_logo"))) { + // read the image data as though it were a data URI + reader.readAsDataURL(this.files[0]); + } else { + // remove the element by replcaing it with a clone of itself + var el = $("#add_show_logo"); + el.replaceWith(el = el.clone(true)); + $("#show_logo_preview").hide(); + } } else { $("#show_logo_preview").hide(); } }); + // validate on upload + function validateImage(img, el) { + // remove any existing error messages + if ($("#img-err")) { $("#img-err").remove(); } + + if (img.size > 2048000) { // 2MB - pull this from somewhere instead? + // hack way of inserting an error message + var err = $.i18n._("Selected file is too large"); + el.parent().after( + ""); + return false; + } else if (validateMimeType(img.type) < 0) { + var err = $.i18n._("File format is not supported"); + el.parent().after( + ""); + return false; + } + return true; + } + + function validateMimeType(mime) { + var extensions = [ + 'image/jpeg', + 'image/png', + 'image/gif' + ]; + return $.inArray(mime, extensions); + } + + form.find("#show_remove_logo").click(function() { + var showId = $("#add_show_id").attr("value"); + + console.log(showId); + console.log($("#show_logo_current").attr("src")); + + if (showId && $("#show_logo_current").attr("src") !== "") { + var action = '/rest/show/' + showId + '/delete-image'; + + $.ajax({ + url: action, + data: '', + type: 'POST', + success: function() { + $("#show_logo_current").prop("src", "") + $("#show_logo_current-element").hide(); + $("#show_logo_current-label").hide(); + $("#show_logo_current").hide(); + $("#show_remove_logo").hide(); + } + }); + } + }); + form.find("#add-show-close").click(closeAddShowForm); form.find(".add-show-submit").click(function(event) { @@ -666,11 +734,10 @@ function setAddShowEvents(form) { action = baseUrl+"Schedule/"+String(addShowButton.attr("data-action")); var image; - if ($('#upload')[0] && $('#upload')[0].files - && $('#upload')[0].files[0]) { + if ($('#add_show_logo')[0] && $('#add_show_logo')[0].files + && $('#add_show_logo')[0].files[0]) { image = new FormData(); - image.append('file', $('#upload')[0].files[0]); - data['show_logo_name'] = $('#upload')[0].files[0].name; + image.append('file', $('#add_show_logo')[0].files[0]); } $.ajax({ @@ -826,7 +893,7 @@ function setAddShowEvents(form) { } // Since Zend's setAttrib won't apply through the wrapper, set accept=image/* here - $("#upload").prop("accept", "image/*"); + $("#add_show_logo").prop("accept", "image/*"); var bgColorEle = $("#add_show_background_color"); var textColorEle = $("#add_show_color"); $('#add_show_name').bind('input', 'change', function(){