/* * jQuery File Upload Plugin JS Example 8.3.0 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2010, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ /*jslint nomen: true, regexp: true */ /*global $, window, blueimp */ $(function () { 'use strict'; var uploaded = []; var newImage = new Object; // Initialize the jQuery File Upload widget: $('#fileupload').fileupload({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, url: "../gallery/fileupload", // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), maxFileSize: 10240000, sequentialUploads: true, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i }); // Insert new image to database once successfully uploaded $('#fileupload').bind('fileuploaddone', function (e, data) { console.log("Image about to be inserted to database: "); console.log(data.result); // Get data into JS object after send happens console.log("Making ajax call to put image to db"); $.post('../gallery/image_to_db', data.result) .done(function(image) { console.log("Image just been inserted to database: >>"); console.log(image); var image_details = $.parseJSON(image); console.log(image_details.image_name); uploaded.push(image_details.image_name); $.extend(data.result.files[0], image_details); console.log("Images Available for logged in user >>"); console.log(data.result.files[0]); $("button#update_undefined").attr("id","update_"+image_details.image_id); $("div#saved_undefined").attr("id","saved_"+image_details.image_id); $("input#title_undefined").attr("id","title_"+image_details.image_id); $("select#undefined").attr("id",image_details.image_id); $("select#group_undefined").attr("id","group_"+image_details.image_id).removeClass("undefined").addClass(image_details.image_cat); $("div.group.undefined").removeClass("undefined").addClass(image_details.image_cat); $("button#gallerize_undefined").attr("id","gallerize_"+image_details.image_id); }); }); // Set the different group options and put into 4 strings var options = new Object; options.admin = options.church = options.community = options.business = ""; for(var i = 0; i < groups.church.length; i++) { options.church += ""; } for(var i = 0; i < groups.community.length; i++) { options.community += ""; } for(var i = 0; i < groups.business.length; i++) { options.business += ""; } $("select.church").html( options.church ); $("select.community").html( options.community ); $("select.business").html( options.business ); console.log("Running Control Code"); control(options); $(document).ajaxStop(function(){ console.log("Ajax request just completed so preparing to lazy load, after half second..."); setTimeout(function(){ console.log("Lazy loading now..."); // Lazy load images $("img.lazy").lazyload({ effect: "fadeIn" }).removeClass("lazy"); $(window).resize(); }, 500); }); /* // Add extra form fields for each image $('#fileupload').bind('fileuploadsubmit', function (e, data) { var inputs = data.context.find(':input'); if (inputs.filter('[required][value=""]').first().focus().length) { return false; } data.formData = inputs.serializeArray(); }); /* // Enable iframe cross-domain access via redirect option: $('#fileupload').fileupload( 'option', 'redirect', window.location.href.replace( /\/[^\/]*$/, '/cors/result.html?%s' ) ); */ // Load existing files: console.log("Loading existing files >>>"); $('#fileupload').addClass('fileupload-processing'); // Grabs images located in the image folder on the server and returns results about them as `result` - basically runs libraries/Upload_handler.php $.ajax({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, url: $('#fileupload').fileupload('option', 'url'), dataType: 'json', context: $('#fileupload')[0] }).always(function () { $(this).removeClass('fileupload-processing'); }).done(function (result) { console.log("Result of scan of images folder >>>>>>>>>>>>>>>>>"); console.log(result); var ref = this; // Grabs images listed in the database and returns results about them from database as `images`, in order to compare with `result` and process // Use URL to work out which photos from those in the images folder to display var uri = window.location.href.replace(/.*managephoto/i,""); console.log("Referring URI: " + uri); console.log("List of image names fetched from database >>>>>>>>>>>>>>>>>>>>"); $.post('../gallery/get_available_images' + uri) .done(function(images) { var imageObj = $.parseJSON(images); var imagelist = []; var imageskeyed = new Object(); $.each( imageObj, function( i, v ) { console.log(v.image_name); imagelist.push(v.image_name); imageskeyed[v.image_name] = v; }); console.log("Object containing all details of images fetched from database, keyed by image_name >>>>>>>>>>>>>>>>>>>>"); console.log(imageskeyed); console.log("Images Available for logged in user >>"); console.log(imagelist); $.each(result.files, function( k, o ) { if ( $.inArray(o.name,imagelist) == -1 ) { delete result.files[k]; console.log("File " + o.name + " not in database"); //console.log("Options >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"); /* // Ditching this hack 17 May 2015 // Delete actual files on server if not in database - but only if scope is universal! if (uri.split("/")[1] == "all") { //$.post("../gallery/unlink/", { 'filename' : o.name } ); } */ } else { $.extend(result.files[k], imageskeyed[o.name]); // Adding options for group down form field var image_options = options[o.image_cat].replace("value='"+o.group_id+"'", "selected='selected' value='"+o.group_id+"'"); result.files[k]['html_options'] = image_options; } }); console.log("No longer removing images not in database (but check server!), result from folder scan now looks like >>>>>>>>>>>>>>>>>"); console.log(result.files); // CAN REMOVE THIS CODE ONCE ALL SITES FULLY TRANSLATED... // Just update database for image widths and heights to aid transition to new interface (ADM - 23 July 2013) /* var dim_data = new Object; $.each(result.files, function( k2, o2 ) { console.log("Iterating through folder scan result...Key " +k2); console.log(o2); if (o2 !== undefined) { if ( $.inArray(o2.name,imagelist) !== -1 ) { // Image is in database dim_data[k2] = new Object; dim_data[k2].n = o2.name; dim_data[k2].h = o2.file_height; dim_data[k2].w = o2.file_width; } } }); $.post("../gallery/update_dimensions/", dim_data ); */ // // REMOVAL END result.files = result.files.sort(function (a, b) { var aName = a.image_last_updated.toLowerCase(); var bName = b.image_last_updated.toLowerCase(); return ((aName > bName) ? -1 : ((aName < bName) ? 1 : 0)); }); console.dir(result.files); $(ref).fileupload('option', 'done') .call(ref, null, {result: result}); }, "json"); }); /* console.log(options); */ }); function control(options) { // Keep watch on change of category to activate group dropdown if need be $('table.table').on('change', 'select.category_select', function(){ var value = $(this).val(); console.log(value); var imageid = $(this).attr("id"); _update_db(imageid); console.log($(imageid)); var group_ref = $("#group_" + imageid) group_ref.html( options[value] ); group_ref.removeClass('church community business admin').addClass(value); if (value == 'admin') { console.log("Parent: " + group_ref.parent().html()); group_ref.parent().fadeOut(); } else { group_ref.parent().fadeIn(); } }); // Update database if form values change... var timer; $('table.table').on('change paste input keyup', '.title input', function(){ var imageid = $(this).attr("id").replace("title_",""); _update_db(imageid); }); $('table.table').on('change', 'select.group_select', function(){ var imageid = $(this).attr("id").replace("group_",""); _update_db(imageid); }); $('table.table').on('change', 'select.album', function(){ var imageid = $(this).attr("id").replace("album_",""); var album_name = $(this).val(); $("#newalbum_" + imageid).remove(); console.log(album_name); if ($(this).find('option:selected').attr('class') == 'new_album_option') { $(this).after(""); $('#newalbum_' + imageid).focus(); } else { _update_db(imageid); } }); $('table.table').on('paste keyup input', 'input.new_album', function(){ var imageid = $(this).attr("id").replace("newalbum_",""); var album_name = $(this).val(); console.log(album_name); var bad_chr; if (bad_chr = album_name.match(/[^A-Z 0-9]/i)) { console.log(bad_chr + " is not allowed"); $("span#album_error_"+imageid).html(bad_chr + " is disallowed - letters, numbers, spaces only please").show(); } else { $("span#album_error_"+imageid).hide(); var html = '
' console.log(html); $("span#album_error_"+imageid).html(html).show(); _update_db(imageid); } }); function _update_db(id) { // Clear the timer so that resets if more input activity clearTimeout(timer); console.log(id); // Update the database 1.5 seconds after input activity finishes - lovely! timer = setTimeout(function() { $('#update_' + id).show(); // Action following update request $('#fileupload').addClass('fileupload-processing'); //var button = $('button.update-btn'); var data = new Object; data.image_description = $("#title_" + id).val(); data.image_cat = $("#" + id).val(); data.group_id = $("#group_" + id).val(); data.album = $("#album_" + id).val(); if ($("#newalbum_" + id).length > 0 ) { data.album = $("#newalbum_" + id).val(); } $.post('../gallery/image_update/' + id, data) .done(function(result) { setTimeout(function() { $('#update_' + id).fadeOut("slow"); console.log("Image just been updated on database: " + result); $('#fileupload').removeClass('fileupload-processing'); }, 1500); }); }, 1000); } // Action following gallerize/ungallerize request $('table.table').on('click', 'button.gallerize', function(e) { e.preventDefault(); var imageid = $(this).attr('id').replace("gallerize_",""); console.log(imageid); var button = $(this); var icon = $(this).find('i'); var span = $(this).find('span'); if (icon.attr('class').indexOf("down") !== -1) { console.log("Ajax call to gallerize function"); $.post('../gallery/image_to_public/yes', {imageid: imageid}) .done(function(result) { console.log("Image just been made public: " + result); icon.removeClass('icon-thumbs-down').addClass('icon-thumbs-up'); span.html('In Public Gallery'); button.removeClass('btn-warning').addClass('btn-success'); }); } else if (icon.attr('class').indexOf("up") !== -1) { console.log("Ajax call to UN-gallerize function"); $.post('../gallery/image_to_public/no', {imageid: imageid}) .done(function(result) { console.log("Image just removed from public gallery: " + result); icon.removeClass('icon-thumbs-up').addClass('icon-thumbs-down'); span.html('Not In Public Gallery'); button.removeClass('btn-success').addClass('btn-warning'); }); } }); }