sharkey-web 3.3.1

data/lib/sharkey/public/js/page-add-link-autofill.js

@@ -0,0 +1,102 @@
+/*global $*/
+
+($(function(){
+
+	// *****************************************************
+	// CODE DUPLICATION
+	// (see `scripts.js`)
+	/**
+	 * 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();
+	// *****************************************************
+
+
+
+	/* When the user finishes entering a URL, we make an
+	 * AJAX request to know that URL's title and description.
+	 *
+	 * We'll use that to automatically fill the <inputs>
+	 * on the "Add Link" dialog.
+	 *
+	 * But if the user starts typing something on the title
+	 * input then we abort that request.
+	 */
+
+	// This will contain the AJAX request for when we ask
+	// for the link info.
+	var linkMetadataRequest;
+
+	// If the user starts typing on the title input
+	// we cancel the AJAX request
+	//
+	$('#input-link-title').keypress(function() {
+		if (typeof(linkMetadataRequest) !== 'undefined')
+			linkMetadataRequest.abort();
+	});
+
+	// And here we make it so that when the user leaves
+	// the URL input, we start making that request.
+	//
+	// When it starts it'll place a cute spinner to show
+	// progress.
+	//
+	// @note: It will only put things on the input if
+	//        there's nothing there!
+	//        In other words, it won't override existing
+	//        values!
+	$('#add-link #input-link-url').focusout(function() {
+
+		// Don't request title for empty URL
+		var text = $(this).val();
+		if (text === "")
+			return;
+
+		// Won't do anything if all the fields
+		// are already filled
+		var title_input = $('#add-link #input-link-title');
+		var comment_input = $('#add-link .input-links-comment');
+		if ((title_input.val() !== '') && (comment_input.val() !== ''))
+			return;
+
+		var spinner_place = $('#single-link span.spinner-placeholder');
+		var spinner       = $(newSpinner()).appendTo(spinner_place);
+
+		linkMetadataRequest = $.ajax({
+			url: '/metadata',
+			method: 'GET',
+			data: {
+				url: text
+			},
+
+			success: function(responseData, textStatus, jqXHR) {
+				spinner.remove();
+
+				var response = $.parseJSON(responseData);
+
+				var title       = response.pageTitle;
+				var description = response.pageDescription;
+
+				if (title_input.val() === '')
+					title_input.val(title);
+
+				if (comment_input.val() === '')
+					comment_input.val(description);
+			},
+
+			complete: function() {
+				spinner.remove();
+			}
+		});
+
+	});
+
+}));
+
+

data/lib/sharkey/public/js/page-add-link.js

@@ -0,0 +1,156 @@
+/*global $*/
+
+/**
+ * Scripts for both the "Add Link" dialog and the "Edit Link".
+ *
+ * They're Bootstrap Modals that initially appear hidden and only
+ * get shown when requested.
+ */
+($(function(){
+
+	// *****************************************************
+	// CODE DUPLICATION
+	// (see `scripts.js`)
+	/**
+	 * 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();
+	// *****************************************************
+
+
+
+	// Prevent user from double-submitting a <form>
+	// 1. Make buttons hide when user submits
+	//    (either by clicking on 'Add Link' or pressing Enter)
+	// 2. As soon as a <form> starts being submitted,
+	//    disable further submissions.
+	var submitting = false;
+	$('.input-link form').submit(function() {
+		// By returning false we prevent further submissions
+		if (submitting)
+			return false;
+
+		// <input> validation!
+		// Only submit if we have an URL on the <form>
+		if ($('.input-link-url').val() !== "") {
+
+			$('.input-link form button').addClass('disabled');
+			submitting = true;
+		}
+		// Makes the form start submitting
+		return true;
+	});
+
+
+	/**
+	 * The awesome new category form.
+	 * We have a button "New Category" that shows
+	 * a form when clicked.
+	 *
+	 * When that form is filled, we hide it and
+	 * show the button again.
+	 */
+	$('.new-category-form').hide();
+
+	$('.new-category').click(function(e) {
+		/* otherwise it would trigger the form validation */
+		e.preventDefault();
+
+		$(this).hide();
+		$('.new-category-form').show();
+	});
+
+	/* ...and when this form is submitted, we send an AJAX
+	 * request for a new category.
+	 *
+	 * If successful it refreshes both <select> fields on
+	 * the page.
+	 */
+	$('.new-category-form').submit(function(e) {
+		/* Don't refresh the page! */
+		e.preventDefault();
+
+		/* Will replace the button text with a nice
+		 * progress spinner */
+		var form   = $(this);
+		var button = $('.new-category-button');
+
+		var buttonText = button.html();
+		var spinner    = $(newSpinner());
+
+		button.html(spinner);
+
+		$.ajax({
+			url:  form.attr('action'),
+			type: 'POST',
+			data: {
+				name:   $('.new-category-name').val(),
+				parent: $('.new-category-parent').val()
+			},
+
+			/* Will add the latest Category to the top of the
+			 * dropdown menu and mark it as selected
+			 */
+			success: function(responseData, textStatus, jqXHR) {
+				var dropdown1 = $('.input-link-category-one');
+				var dropdown2 = $('.input-link-category-two');
+
+				var parsedResponse = $.parseJSON(responseData);
+				var value = parsedResponse['id'];
+				var name  = parsedResponse['name'];
+
+				dropdown1
+					.prepend('<option value="' + value + '">' + name + '</option>')
+					.val(value);
+				dropdown2
+					.prepend('<option value="' + value + '">' + name + '</option>')
+					.val(value);
+			},
+			error: function(responseData, textStatus, jqXHR) {
+				/* This error-handling function sucks! */
+				// form.append(
+				// 	$("<div>Couldn't apply the setting - please reload the page</div>")
+				// 		.attr('class', 'alert alert-danger')
+				// 		.attr('role', 'alert')
+				// );
+				alert('no!');
+			},
+			complete: function() {
+				/* taking out the spinner image */
+				button.html(buttonText);
+				spinner.remove();
+
+				form.hide();
+				$('.new-category').show();
+			}
+		});
+	});
+
+	/* Beautiful tag-handling stuff */
+	$('.tagsinput').magicSuggest({
+		/* URL to make an AJAX call to get results */
+		data: '/tags',
+		/* by default it uses POST, what a bummer */
+		method: 'get',
+		/* how much it waits before triggering the AJAX query */
+		typeDelay: 0,
+		noSuggestionText: 'No tags like this',
+		placeholder: 'Yeah',
+		/* use , to add a tag
+		 * (why does it not work?
+		 *  it keeps accepting tags ending with commas!) */
+		useCommaKey: true,
+		/* choose how many tags you want */
+		maxSelection: null,
+		/* show lines with alternated colors */
+		useZebraStyle: true
+	});
+
+}));
+

data/lib/sharkey/public/js/page-categories.js

@@ -0,0 +1,348 @@
+/*global $,ajaxManager*/
+
+/**
+ * Scripts specific to the Categories page
+ *
+ * Requires FancyTree
+ */
+($(function(){
+
+
+    // When the page loads, focus on the Category Browser
+    $('#categories .fancytree-container').focus();
+
+
+	/**
+	 * Initializing the tree view for all the Categories
+	 */
+	$('#categories').fancytree({
+		extensions: ["glyph", "childcounter"],
+		glyph: {
+			map: {
+				doc:             "glyphicon glyphicon-link",
+				docOpen:         "glyphicon glyphicon-link",
+				checkbox:        "glyphicon glyphicon-unchecked",
+				checkboxSelected:"glyphicon glyphicon-check",
+				checkboxUnknown: "glyphicon glyphicon-edit",
+				expanderClosed:  "glyphicon glyphicon-expand",
+				expanderLazy:    "glyphicon glyphicon-expand",
+				expanderOpen:    "glyphicon glyphicon-collapse-down",
+				folder:          "glyphicon glyphicon-book",
+				folderOpen:      "glyphicon glyphicon-book"
+			}
+		},
+		keyboard: true,
+
+		/* when an item is clicked (either Tag or Link) */
+		click: function(event, data) {
+
+			// Clicked item on the list
+			//var node = data.node;
+
+			/* Whenever you click on a link, let's make an
+			 * AJAX request to add it's visit count
+			 */
+			var element = event.toElement;
+
+			if ((element) && ($(element).attr('class') === 'link-link')) {
+
+				var link_id = $(element).attr('data-link-id');
+
+				$.ajax({
+					url: '/visit/' + link_id,
+					type: 'POST',
+
+					// Yeah, won't do anything if we succeed
+
+					success: function(responseData, textStatus, jqXHR) {
+						console.log($.parseJSON(responseData).visitCount);
+					},
+
+					error: function(responseData, textStatus, jqXHR) {
+						console.log(
+							"Error! Couldn't set Link as visited!\n" +
+								"responseData: " + responseData + "\n" +
+								"textStatus:   " + textStatus + "\n" +
+								"jqXHR:        " + jqXHR
+						);
+					}
+				});
+			}
+		},
+		/* when user presses ENTER or SPACE inside an item */
+		link: function(event, data) {
+			/* redirect to the internal link
+			 * (either Category or Link) */
+			var href = $(
+				$.parseHTML(data.node.title)
+			).attr('href');
+
+			window.location.href = href;
+		}
+	});
+	/**
+	 * Helper to ease applying things to every
+	 * node inside the tree view.
+	 *
+	 * @param apply Function to apply to each node.
+	 */
+	var foreachNode = function(apply) {
+		$('#categories')
+			.fancytree('getTree')
+			.visit(function(node) {
+				apply(node);
+			});
+	};
+	/* Things using FancyTree's API */
+	$('#categories-expand').click(function() {
+		foreachNode(function(node) {
+			node.setExpanded(true);
+		});
+	});
+
+	$('#categories-collapse').click(function() {
+		foreachNode(function(node) {
+			node.setExpanded(false);
+		});
+	});
+
+	/*
+	 * Now we define some functions that will handle the
+	 * editing progress of the Categories.
+	 */
+
+	// Flag to tell if we're editing the Categories
+	var categoryIsEditing   = false;
+
+	// All the buttons for the editing process
+	var categoryEditButtons = $(
+		'#categories-select-all, #categories-select-none, #categories-select-toggle, #categories-delete, #categories-delete-links'
+	);
+	// Initially we're not editing
+	categoryEditButtons.hide();
+
+	/* Start editing, baby! */
+	$('#categories-edit').click(function() {
+		categoryIsEditing = !categoryIsEditing;
+
+		if (categoryIsEditing) {
+			// Change the button's appearance
+			$(this).html(
+				"<button class='btn btn-default'><span class='glyphicon glyphicon-ban-circle' /> Cancel</button>"
+			);
+
+			/* Reinitializing the tree view, this time
+			 * enabling checkboxes and multi-selection
+			 * mode */
+			$('#categories').fancytree({
+				checkbox: true,
+				selectMode: 2,
+
+				// When double-clicking, toggle!
+				dblclick: function(event, data) {
+					data.node.toggleSelected();
+				}
+			});
+			categoryEditButtons.show();
+
+			// Here we only let the user select CATEGORIES,
+			// not LINKS!
+			// Categories are considered folders, because they
+			foreachNode(function(node) {
+				if (! node.isFolder())
+					node.unselectable = true;
+			});
+
+		}
+		else {
+			// Change the button's appearance AGAIN
+			$(this).html(
+				"<button class='btn btn-default'><span class='glyphicon glyphicon-pencil' /> Edit</button>"
+			);
+			$('#categories').fancytree({
+				checkbox:false
+			});
+			categoryEditButtons.hide();
+		}
+	});
+
+	// And now, what happens when you click
+	// on each of those fancy buttons
+
+	$('#categories-select-all').click(function() {
+		foreachNode(function(node) {
+			node.setSelected(true);
+		});
+	});
+	$('#categories-select-none').click(function() {
+		foreachNode(function(node) {
+			node.setSelected(false);
+		});
+	});
+	$('#categories-select-toggle').click(function() {
+		foreachNode(function(node) {
+			node.toggleSelected();
+		});
+	});
+
+	// Now, when you click to delete categories, we musc
+	// communicate with the server
+	$('#categories-delete').click(function() {
+
+		// Will also destroy links that has these categories
+		var destroyLinks = $('#categories-delete-links input').is(':checked');
+
+		// We will send several DELETE requests
+		// to the server, each with a selected
+		// category's ID
+		var maxSize = $('#categories')
+				.fancytree('getTree')
+				.getSelectedNodes()
+				.length;
+
+		// And we place a beautiful progress bar,
+		// to make the user not think we crashed
+		var progressbarParent = $(
+			"<div class='progress progress-striped active'></div>"
+		);
+		var progressbarText = $("<span>0%</span>");
+		var progressbar = $(
+				"<div class='progress-bar' " +
+				"role='progressbar' " +
+				"aria-valuenow='0' " +
+				"aria-valuemin='0' " +
+				"aria-valuemax='" + maxSize + "'></div>"
+		);
+
+		// Replace the buttons by the progress bar
+		$('#categories-buttons').html('');
+		progressbarParent.appendTo($('#categories-buttons'));
+		progressbar.appendTo(progressbarParent);
+		progressbarText.appendTo(progressbar);
+
+		var deletedCount = 0;
+
+		foreachNode(function(node) {
+
+			if (!node.selected)
+				return;
+
+			// Each node has a `title` element,
+			// with an href like '/category/(ID)'
+			var href = $(
+				$.parseHTML(node.title)
+			).attr('href');
+
+			// Now, time for the AJAX request...!
+			ajaxManager.add({
+				url:  href,
+				type: 'DELETE',
+				data: {
+					destroy_links: destroyLinks
+				},
+				/* Showing a red background on deleted categories */
+				success: function(responseData, textStatus, jqXHR) {
+
+					// Updating the progress bar
+					deletedCount += 1;
+					progressbar
+						.attr('style', 'width:' + (deletedCount/maxSize)*100 + '%')
+						.attr('aria-valuenow', deletedCount);
+					progressbarText
+						.text(Math.round( ((deletedCount/maxSize)*100) * 100)/100+ '%');
+
+					// This animation requires jQueryUI
+					$(node.span).animate({
+						backgroundColor: '#FFDFDF'
+					}, 1000);
+
+					// Removing the element on the raw list
+					// generated by sinatra
+					$('#categories')
+						.find("li span a[href='" + href + "']")
+						.each(function() {
+							$(this).parent('li').remove();
+						});
+				},
+				error: function(responseData, textStatus, jqXHR) {
+					/* This error-handling function sucks! */
+					alert("Couldn't remove category! " + responseData + ', ' + textStatus);
+				}
+			});
+		});
+		// When everything's done...
+		ajaxManager.complete = function() {
+
+			// Now the progress bar is shown as completed
+			// and the user is advised to refresh the page
+			progressbarParent.removeClass('active');
+			progressbarParent.removeClass('progress-striped');
+			progressbar.addClass('progress-bar-success');
+			progressbarText.text("Done! Refresh page to see the changes");
+		};
+
+		// Now, do perform those requests for me!
+		ajaxManager.run();
+	});
+
+
+
+
+	// // When the page loads, focus on the categories browser
+    // $('#categories .fancytree-container').focus();
+
+	// /**
+	//  * FancyTree makes easy to show a tree view, just like
+	//  * a file browser on a file system.
+	//  *
+	//  * We use it on the Categories page.
+	//  */
+	// $('#categories').fancytree({
+	// 	extensions: ["glyph", "childcounter"],
+	// 	glyph: {
+	// 		map: {
+	// 			doc:            "glyphicon glyphicon-link",
+	// 			folder:         "glyphicon glyphicon-book",
+	// 			expanderClosed: "glyphicon glyphicon-expand",
+	// 			expanderLazy:   "glyphicon glyphicon-expand",
+	// 			expanderOpen:   "glyphicon glyphicon-collapse-down"
+	// 		}
+	// 	},
+	// 	keyboard: true,
+
+	// 	/* when an item is clicked (either Category or Link) */
+	// 	activate: function(event, data) {
+	// 		/* Nothing for now... */
+	// 		//var node = data.node;
+	// 		//console.log(data);
+	// 	},
+	// 	/* when user presses ENTER or SPACE inside an item */
+	// 	link: function(event, data) {
+	// 		/* redirect to the internal link
+	// 		 * (either Category or Link) */
+	// 		var href = $(
+	// 			$.parseHTML(data.node.title)
+	// 		).attr('href');
+
+	// 		window.location.href = href;
+	// 	}
+	// });
+	// /* Things using FancyTree's API */
+	// $('#categories-expand').click(function() {
+	// 	// For each node, expand it!
+	// 	$('#categories')
+	// 		.fancytree('getTree')
+	// 		.visit(function(node) {
+	// 			node.setExpanded(true);
+	// 		});
+	// });
+	// $('#categories-collapse').click(function() {
+	// 	// TODO: Remove this code repetition!
+	// 	$('#categories')
+	// 		.fancytree('getTree')
+	// 		.visit(function(node) {
+	// 			node.setExpanded(false);
+	// 		});
+	// });
+}));
+