diff options
Diffstat (limited to 'static/js/functions.js')
| -rw-r--r-- | static/js/functions.js | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/static/js/functions.js b/static/js/functions.js new file mode 100644 index 0000000..49f1316 --- /dev/null +++ b/static/js/functions.js @@ -0,0 +1,194 @@ +/* Initiliaze several plugins. */ + +$(document).ready(function(){ + $('.dropdown-toggle').dropdown(); + $('input[type=file]').bootstrapFileInput(); +}); + +/* Value of upload button. */ + +var buttonId = ""; + +/* Function to toggle button to disabled status. */ + +function toggleButton(id, enable, btnId){ + if(enable == "enable"){ + text = getBtnValue(btnId) + $(id).prop('enable', true); + $(id).removeClass('disabled'); + $(btnId).text(text); + } else { + $(id).prop('disabled', true); + $(id).addClass('disabled'); + $(btnId).html('<i class="fa fa-spinner fa-spin"></i> Uploading...'); + } +}; + +/* Get the correct value from the button. */ + +function getBtnValue(buttonId){ + switch(buttonId) { + case "#imageSubmit": + return "Upload!"; + break; + case "#urlSubmit": + return "Fetch the image!"; + break; + case "#base64Submit": + return "Decode the image!"; + break; + } +} + +/* Resets DOM for bootstrap modal. */ + +$('.modal').on('hidden.bs.modal', function(e){ +// $('.btn-upload').addClass('hidden'); + $("#imageLink").text(''); + $('#created_img').remove(); + $('.error-msg').text(''); + toggleButton('.btn-upload', "enable", buttonId); +}); + +/* Do all the AJAX stuff. */ + +function doAjaxStuff(id, target, isFile){ + + var client = new XMLHttpRequest(); + + var file = document.getElementById(id); + + /* Create a FormData instance */ + var formData = new FormData(); + + /* formData is a file to upload. */ + if(isFile == "isFile"){ + if(file.files[0] === null) { + toggleButton('.btn-upload', "enable", buttonId); + alert("Please add a photo first."); + } else { + /* Add the file */ + formData.append("image", file.files[0]); + } + } else { + if(file.value === null) { + toggleButton('.btn-upload', "enable", buttonId); + $(buttonId).text('Try again!'); + alert("Please add a photo first."); + } else { + formData.append("image", file.value); + } + } + client.open("post", target, true); + /* Send to server */ + client.send(formData); + + /* Check the response status */ + client.onreadystatechange = function() { + if (client.readyState == 4) { + if(client.status == 200){ + var r = JSON.parse(client.responseText); + + var imageLink = '<a id="created_img_link" title="' + r.data.link + '" href="' + r.data.link + '"> ' + r.data.link + '</a>'; + $("#imageLink").append(imageLink); + + var img = $('<img id="created_img" class="img-responsive">'); + img.attr('src', r.data.link) + img.attr('alt', r.data.name) + img.appendTo('#imageObj'); + + $('#created_img').wrap(function() { + return "<a href='" + r.data.link + "'/>"; + }); + + //$('.btn-upload').html('<i class="fa fa-check"></i> Uploaded!'); + $(buttonId).html('<i class="fa fa-check"></i> Uploaded!'); + $('#uploaded-dialog').modal('show'); + + } else if (client.status == 500) { + if (client.responseText == "") { + var errorMsg = "There was an error. That's everything we know."; + } else { + var r = JSON.parse(client.responseText); + var errorMsg = r.data.error; + } + $('.error-msg').text(errorMsg); + toggleButton('.btn-upload', 'enable', buttonId); + $(buttonId).text('Try again!'); + $('#error-dialog').modal('show'); + } else { + var errorMsg = "There was an error. That's everything we know."; + $('.error-msg').text(errorMsg); + toggleButton('.btn-upload', 'enable', buttonId); + $(buttonId).text('Try again!'); + $('#error-dialog').modal('show'); + } + } + } +}; + +/* Prevent the form submit when pressing 'enter'. */ + +$('form').submit(function(event){ + event.preventDefault(); +}); + +/* Detects change on input #file. */ + +$(function() { + $("#file").change(function (){ + //var fileName = $(this).val(); + //$(".filename").html(fileName); + //console.log(fileName) + //$('#imageSubmit').trigger('click'); + $('.btn-upload').addClass('hidden'); + $('#imageSubmit').removeClass('hidden'); + }); +}); + +/* Start file upload via AJAX. */ + +$("#imageSubmit").click( function(event){ + event.preventDefault(); + buttonId = "#imageSubmit"; + + toggleButton('.btn-upload', "disable", buttonId); + + doAjaxStuff("file", "/api/v1/file", "isFile"); +}); + +/* Show upload button for urlBar on click. */ + +$("#urlBar").click(function (){ + $('.btn-upload').addClass('hidden'); + $('#urlSubmit').removeClass("hidden"); +}); + +/* Start upload over url via AJAX. */ + +$("#urlSubmit").click( function(event){ + event.preventDefault(); + buttonId = "#urlSubmit"; + + toggleButton('.btn-upload', "disable"); + + doAjaxStuff("urlBar", "/api/v1/url", "isNoFile"); +}); + +/* Show upload button for base64Bar on click. */ + +$("#base64Bar").click(function (){ + $('.btn-upload').addClass('hidden'); + $('#base64Submit').removeClass("hidden"); +}); + +/* Start upload over base64 encoded image via AJAX. */ + +$("#base64Submit").click( function(event){ + event.preventDefault(); + buttonId = "#base64Submit"; + + toggleButton('.btn-upload', "disable"); + + doAjaxStuff("urlBar", "/api/v1/base64", "isNoFile"); +}); |