sharkey-web 3.3.1

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

@@ -0,0 +1,103 @@
+/*global $*/
+
+/**
+ * Scripts for the "Edit Link" dialog.
+ */
+($(function(){
+
+	var clearEditLinkDialog = function() {
+
+		$('#edit-link input').each(function(a, element) {
+			$(element).val('');
+		});
+
+		// This is due to the awesome tag-input helper
+		$('#edit-link #input-link-tags input').val('');
+
+		$('#edit-link select').val(0);
+	};
+
+	/**
+	 * When you click to "Edit Link", Bootstrap will automatically
+	 * show the dialog (modal).
+	 * But we need to fill it with this link's current attributes.
+	 */
+	$('button.link-edit').click(function() {
+
+		// Just in case we tried to edit a link before
+		// and bailed out
+		clearEditLinkDialog();
+
+		var link = $(
+			$(this).parents('li.link')
+		);
+
+		// First, we need to obtain the current data for the link
+		//
+		// I could make an AJAX request to the server, but I'd
+		// rather crawl everything from the current page.
+		//
+		// Unfortunately, if I change the layout then everything
+		// FUCKS UP
+
+		var link_id = link.attr('data-link-id');
+
+		var link_url   = link.find('span.link-title > a').attr('href');
+		var link_title = link.find('span.link-title').text();
+
+		/* Creating an array of tag names */
+		var link_tags = link.find('.link-tags a');
+		if ((link_tags) && (link_tags.length > 0)) {
+			var tmp = [];
+			link_tags.each(function(a, element) {
+				tmp.push($(element).attr('title'));
+			});
+			link_tags = tmp;
+		}
+		else
+			link_tags = [];
+
+		var link_comments = link.find('span.link-description').text();
+
+		/* Creating an array of category names */
+		var link_category = link.find('.link-categories a');
+		if ((link_category) && (link_category.length > 0)) {
+			var tmp = link_category[0];
+
+			// It will be an <a> with href like `/category/id`
+			// When split it will become ["", "category", "id"]
+			link_category = $(tmp).attr('href').split('/')[2];
+		}
+		else
+			link_category = "";
+
+		// Now we fill the "Edit Link" form with the data
+		// we just got. Brace yourselves!
+		$('#edit-link #input-link-url').val(link_url);
+		$('#edit-link #input-link-title').val(link_title);
+
+		// Now here's an EXCEPTION
+		// Since we're using an awesome plugin to visually
+		// handle the tags, we must accommodate to it.
+		// It actually has a hidden input like this:
+		// THIS IS DUPLICATED CODE OMG WHAT DO I DO
+		$('#edit-link #input-link-tags').magicSuggest({
+			data: '/tags',
+			method: 'get',
+			typeDelay: 0,
+			noSuggestionText: 'No tags like this',
+			placeholder: 'Yeah',
+			useCommaKey: true,
+			maxSelection: null,
+			useZebraStyle: true
+		}).setValue(link_tags);
+
+		$('#edit-link #input-link-comment').val(link_comments);
+		$('#edit-link #input-link-category-one').val(link_category);
+
+		$( $('#edit-link form')[0]) .attr('action', '/update/link/' + link_id);
+	});
+
+}));
+
+

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

@@ -0,0 +1,54 @@
+/*global $*/
+
+/**
+ * Scripts specific to the Links page.
+ *
+ * Requires jQuery.
+ */
+($(function(){
+
+	/* Whenever you click on a link, let's make an AJAX request
+	 * to add it's visit count
+	 */
+	$('.link-title > a').click(function(e) {
+
+		// Kinda ugly way of traversing the DOM
+		// It WILL mess up if I ever change the HTML
+		// structure... Maybe I should find a better way
+		var link_element = $(e.target).parents('li');
+		var link_id = link_element.attr('data-link-id');
+
+		$.ajax({
+			url: '/visit/' + link_id,
+			type: 'POST',
+
+			success: function(responseData, textStatus, jqXHR) {
+
+				// Updating the link's visited text with
+				// the new count.
+				var new_count  = $.parseJSON(responseData).visitCount;
+				if (new_count) {
+
+					link_element.find('.link-visited-date').html(
+						'Last visited a moment ago'
+					);
+					link_element.find('.link-visited-count').html(
+						'<span class="glyphicon glyphicon-open"></span> ' + new_count
+					);
+				}
+			},
+			error: function(responseData, textStatus, jqXHR) {
+				console.log(
+					"Error! Couldn't set Link as visited!\n" +
+					"responseData: " + responseData + "\n" +
+					"textStatus:   " + textStatus + "\n" +
+					"jqXHR:        " + jqXHR
+				);
+			}
+		});
+	});
+
+}));
+
+
+

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

@@ -0,0 +1,93 @@
+/*global $*/
+
+/**
+ * Scripts specific for the Settings page
+ */
+($(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();
+	// *****************************************************
+
+
+	/**
+	 * AJAX requester for changing `input radio` settings.
+	 *
+	 * We need:
+	 * - Parent `form`
+	 * - Child `label` with class `ajax-radio`
+	 */
+	$('.ajax-radio').click(function() {
+
+		// The button we just pressed - will add `.active` class
+		// on success
+		var this_button = $(this);
+
+		var parent_form = this_button.parents('form');
+
+		// The button neighbor to the just pressed - will remove
+		// `.active` class on success
+		var that_button = parent_form.find('label:not(.active)');
+
+		/* URL for AJAX request: like '/delete_/DELETE_ID' */
+		var setting_url   = this_button.parents('form').attr('action');
+		var setting_value = this_button.children('input').attr('value');
+
+		/* Remove button to prevent double request
+		 * and create the cute loader image */
+		var spinner = $(newSpinner()).appendTo(parent_form);
+
+		$.ajax({
+			url:  setting_url,
+			type: 'POST',
+			data: {
+				name: this_button.children('input').attr('name'),
+				value: setting_value
+			},
+			success: function(responseData, textStatus, jqXHR) {
+
+				// When this request succeds, Bootstrap JS already changed
+				// the buttons' .active classes.
+				// So the button we just pressed is this...
+				parent_form
+					.find('label.active')
+					.attr('class', 'btn btn-primary ajax-radio active');
+
+				// and the other one is that...
+				parent_form
+					.find('label:not(.active)')
+					.attr('class', 'btn btn-default ajax-radio');
+			},
+			error: function(responseData, textStatus, jqXHR) {
+				/* This error-handling function sucks! */
+				parent_form.append(
+					$("<div>Couldn't apply the setting - please reload the page</div>")
+						.attr('class', 'alert alert-danger')
+						.attr('role', 'alert')
+				);
+			},
+			complete: function() {
+				spinner.remove();
+			}
+		});
+	});
+
+	// It may take a while.
+	// Let's warn the user...!
+	$('#button-import').click(function() {
+		$(this).html('Hold on, this might take a while...  ');
+		$(this).append(newSpinner());
+	});
+}));
+

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

@@ -0,0 +1,35 @@
+/*global $,activateTagCloud*/
+
+/**
+ * Scripts specific to the TagCloud page.
+ *
+ * NOTE: we require jQuery TagCloud!
+ */
+
+$(function () {
+
+	/**
+	 * This function activates the tag cloud functionality.
+	 * Call it from the TagCloud page.
+	 *`
+	 * @note It's actually defined on the TagCloud page!
+	 *
+	 * @param smaller Tiniest possible font size allowed
+	 * @param bigger  Biggest possible font size allowed
+	 */
+	activateTagCloud = function(smaller, bigger) {
+		$.fn.tagcloud.defaults = {
+			size: {
+				start: smaller,
+				end:   bigger,
+				unit: 'pt'
+			},
+			color: {
+				start: '#f5f5f5',
+				end:   '#428bca'
+			}
+		};
+		$('#tagcloud a').tagcloud();
+	};
+});
+

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

@@ -0,0 +1,287 @@
+/**
+ * Scripts specific to the Tags page.
+ *
+ * Note that we assume jQuery, ajaxManager and other stuff.
+ */
+/*global $,ajaxManager*/
+($(function() {
+
+    // When the page loads, focus on the Tag Browser
+    $('#tags .fancytree-container').focus();
+
+
+	/**
+	 * Initializing the tree view for all the Tags
+	 */
+	$('#tags').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-tag",
+				folderOpen:      "glyphicon glyphicon-tag"
+			}
+		},
+		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) {
+		$('#tags')
+			.fancytree('getTree')
+			.visit(function(node) {
+				apply(node);
+			});
+	};
+	/* Things using FancyTree's API */
+	$('#tags-expand').click(function() {
+		foreachNode(function(node) {
+			node.setExpanded(true);
+		});
+	});
+
+	$('#tags-collapse').click(function() {
+		foreachNode(function(node) {
+			node.setExpanded(false);
+		});
+	});
+
+	/*
+	 * Now we define some functions that will handle the
+	 * editing progress of the Tags.
+	 */
+
+	// Flag to tell if we're editing the Tags
+	var tagIsEditing   = false;
+
+	// All the buttons for the editing process
+	var tagEditButtons = $(
+		'#tags-select-all, #tags-select-none, #tags-select-toggle, #tags-delete, #tags-delete-links'
+	);
+	// Initially we're not editing
+	tagEditButtons.hide();
+
+	/* Start editing, baby! */
+	$('#tags-edit').click(function() {
+		tagIsEditing = !tagIsEditing;
+
+		if (tagIsEditing) {
+			// 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 */
+			$('#tags').fancytree({
+				checkbox: true,
+				selectMode: 2,
+
+				// When double-clicking, toggle!
+				dblclick: function(event, data) {
+					data.node.toggleSelected();
+				}
+			});
+			tagEditButtons.show();
+
+			// Here we only let the user select TAGS,
+			// not LINKS!
+			// Tags 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</a>"
+			);
+			$('#tags').fancytree({
+				checkbox:false
+			});
+			tagEditButtons.hide();
+		}
+	});
+
+	// And now, what happens when you click
+	// on each of those fancy buttons
+
+	$('#tags-select-all').click(function() {
+		foreachNode(function(node) {
+			node.setSelected(true);
+		});
+	});
+	$('#tags-select-none').click(function() {
+		foreachNode(function(node) {
+			node.setSelected(false);
+		});
+	});
+	$('#tags-select-toggle').click(function() {
+		foreachNode(function(node) {
+			node.toggleSelected();
+		});
+	});
+
+	// Now, when you click to delete tags, we musc
+	// communicate with the server
+	$('#tags-delete').click(function() {
+
+		// Will also destroy links that has these tags
+		var destroyLinks = $('#tags-delete-links input').is(':checked');
+
+		// We will send several DELETE requests
+		// to the server, each with a selected
+		// tag's ID
+		var maxSize = $('#tags')
+				.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
+		$('#tags-buttons').html('');
+		progressbarParent.appendTo($('#tags-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 '/tag/(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 tags */
+				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
+					$('#tags')
+						.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 tag! " + 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();
+	});
+
+}));
+