Worked on post uploads (#11) - added GUI

2025-07-17 08:26:24 +00:00 · 2014-09-13 16:11:58 +02:00
parent 7ec3715cdd
commit dfb1198143
8 changed files with 1047 additions and 4 deletions
--- a/public_html/js/Controls/TagInput.js
+++ b/public_html/js/Controls/TagInput.js
@ -0,0 +1,140 @@
+var App = App || {};
+App.Controls = App.Controls || {};
+
+//todo: autocomplete
+
+App.Controls.TagInput = function(
+	$underlyingInput,
+	_,
+	jQuery) {
+
+	var KEY_RETURN = 13;
+	var KEY_SPACE = 32;
+	var KEY_BACKSPACE = 8;
+
+	var tags = [];
+	var options = {
+		beforeTagAdded: null,
+		beforeTagRemoved: null,
+	};
+
+	if ($underlyingInput.length !== 1) {
+		throw new Error('Cannot set tag input to more than one elements at once');
+	}
+	if ($underlyingInput.attr('data-tagged')) {
+		throw new Error('Tag input was already initialized for this element');
+	}
+	$underlyingInput.attr('data-tagged', true);
+	$underlyingInput.hide();
+
+	var $wrapper = jQuery('<div class="tag-input">');
+	var $tagList = jQuery('<ul class="tags">');
+	var $input = jQuery('<input type="text"/>');
+	$wrapper.append($tagList);
+	$wrapper.append($input);
+	$wrapper.insertAfter($underlyingInput);
+	$wrapper.click(function(e) {
+		e.preventDefault();
+		$input.focus();
+	});
+	$input.attr('placeholder', $underlyingInput.attr('placeholder'));
+
+	$input.unbind('paste').bind('paste', function(e) {
+		e.preventDefault();
+		var pastedText;
+		if (window.clipboardData) {
+			pastedText = window.clipboardData.getData('Text');
+		} else {
+			pastedText = (e.originalEvent || e).clipboardData.getData('text/plain');
+		}
+		var patedTags = pastedText.split(/\s+/);
+		_.each(patedTags, function(tag) {
+			addTag(tag);
+		});
+	});
+
+	$input.unbind('keydown').bind('keydown', function(e) {
+		if (e.which === KEY_RETURN || e.which === KEY_SPACE) {
+			e.preventDefault();
+			var tag = $input.val();
+			addTag(tag);
+			$input.val('');
+		} else if (e.which === KEY_BACKSPACE && jQuery(this).val().length === 0) {
+			e.preventDefault();
+			removeLastTag();
+		}
+	});
+
+	function addTag(tag) {
+		tag = tag.trim();
+		if (tag.length === 0) {
+			return;
+		}
+		var oldTags = getTags();
+		if (_.contains(_.map(oldTags, function(tag) { return tag.toLowerCase(); }), tag.toLowerCase())) {
+			flashTag(tag);
+		} else {
+			if (typeof(options.beforeTagAdded) === 'function') {
+				options.beforeTagAdded(tag);
+			}
+			var newTags = oldTags.slice();
+			newTags.push(tag);
+			setTags(newTags);
+		}
+	}
+
+	function removeTag(tag) {
+		var oldTags = getTags();
+		var newTags = _.without(oldTags, tag);
+		if (newTags.length !== oldTags.length) {
+			if (typeof(options.beforeTagRemoved) === 'function') {
+				options.beforeTagRemoved(tag);
+			}
+			setTags(newTags);
+		}
+	}
+
+	function removeLastTag() {
+		removeTag(_.last(getTags()));
+	}
+
+	function flashTag(tag) {
+		var $elem = $tagList.find('li[data-tag="' + tag.toLowerCase() + '"]');
+		$elem.css({backgroundColor: 'rgba(255, 200, 200, 1)'});
+	}
+
+	function setTags(newTags) {
+		tags = newTags.slice();
+		$tagList.empty();
+		$underlyingInput.val(newTags.join(' '));
+		_.each(newTags, function(tag) {
+			var $elem = jQuery('<li/>');
+			$elem.text(tag);
+			$elem.attr('data-tag', tag.toLowerCase());
+
+			var $deleteButton = jQuery('<a><i class="fa fa-remove"></i></a>');
+			$deleteButton.bind('click', function(e) {
+				e.preventDefault();
+				removeTag(tag);
+				$input.focus();
+			});
+			$elem.append($deleteButton);
+
+			$tagList.append($elem);
+		});
+	}
+
+	function getTags() {
+		return tags;
+	}
+
+	_.extend(options, {
+		setTags: setTags,
+		getTags: getTags,
+		removeTag: removeTag,
+		addTag: addTag,
+	});
+	return options;
+};
+
+App.DI.register('tagInput', App.Controls.TagInput);