/*global $,NProgress,setInterval,clearInterval*/
/**
* My custom scripts beibeh. * * Requires jQuery. */
($(function(){
/** * This makes the top navbar auto hide on * scroll. * It shows again when you scroll upwards * or reach the bottom of the page */ $("div.navbar-fixed-top").autoHidingNavbar(); /** * NProgress is this awesome Progress bar that * makes it look like the site is busy! * * Here we: * 1. Start it as soon as we can * 2. Set it to increase regularly * 3. Finish it off as soon as everything loads */ if (typeof(NProgress) !== "undefined") { NProgress.configure({ showSpinner: false }); NProgress.start(); var NProgressInterval = setInterval(function() { NProgress.inc(); }, 500); $(window).load(function() { NProgress.done(); clearInterval(NProgressInterval); }); } /** * Returns a new cute spinner GIF for * showing indeterminate progress. */ function newSpinner() { return $('<img/>').attr("src", "/images/loader.gif"); } /* Here we preload the image so it won't take long * when creating it for the first time */ newSpinner().appendTo('body').hide(); /** * AJAX requester for deleting stuff. * We need: * - Thing that will be deleted (class `ajax-delete-parent`); * - Inside it a `form`; * - Inside it a button (class `ajax-delete`); * * This way, whenever we click on that "Delete" button: * * 1. Make an AJAX request to the server to * actually delete it from the database * 2. Show a cute spinner gif for progress * 3. When it's done, remove the parent thing * from the DOM */ $('button.ajax-delete').click(function(e) { /* We don't want to refresh the page, do we? */ e.preventDefault(); /* Will delete this if successful on AJAX request */ var delete_item = $(this).parents('.ajax-delete-parent'); /* URL for AJAX request: like '/delete_/DELETE_ID' */ var delete_url = $(this).parents('form').attr('action'); /* Remove button to prevent double request * and create the cute loader image */ $(this).html(newSpinner()); /* Yay, my very first AJAX request! */ $.ajax({ url: delete_url, type: 'DELETE', /* removing Delete_ from the DOM if success */ success: function(responseData, textStatus, jqXHR) { delete_item.fadeOut(500, function() { delete_item.remove(); }); }, error: function(responseData, textStatus, jqXHR) { /* This error-handling function sucks! */ alert("Couldn't remove stuff! " + responseData + ', ' + textStatus); } }); }); /** * Adds/Removes Links from the favorites list. */ $('button.link-favorite').click(function(e) { var id = $(this).parents('.link').attr('data-link-id'); if (typeof(id) === undefined) { console.log("Can't find id for Link!"); console.log($(this)); return; } // If I don't use this variable, setting .html() won't // work inside the ajax's success... var favButton = $(this); // Waiting... favButton.html(newSpinner()); $.ajax({ url: '/favorite/' + id, type: 'POST', success: function(responseData, textStatus, jqXHR) { if ($.parseJSON(responseData).isFavorite) favButton.html('<span class="glyphicon glyphicon-star"></span>'); else favButton.html('<span class="glyphicon glyphicon-star-empty"></span>'); }, error: function(responseData, textStatus, jqXHR) { console.log( "Error! Couldn't set Link as favorite!\n" + "responseData: " + responseData + "\n" + "textStatus: " + textStatus + "\n" + "jqXHR: " + jqXHR ); } }); });
}));