New tag system

bl-kernel/admin/themes/default/css/default.css

@@ -179,17 +179,53 @@ button.delete-button:hover {
 	text-transform: uppercase;
 }
 
-#jstagList {
+#bludit-tags {
-	margin-top: 5px;
+	margin-top: 15px;
 }
 
-#jstagList span {
+#bludit-tags .uk-button {
-	background: #f1f1f1;
+	padding: 0 12px !important;
-	border-radius: 3px;
+	margin-left: 10px;
-	color: #2672ec;
+}
+
+#jstagList {
+	margin-top: 15px;
+}
+
+#jstagList span.unselect,
+#jstagList span.select {
+	margin-top: 5px;
 	margin-right: 5px;
-	padding: 3px 10px;
+	padding: 1px 15px;
 	cursor: pointer;
+	display: inline-block;
+	border-radius: 3px;
+	background: #f1f1f1;
+	vertical-align: middle;
+}
+
+#jstagList span.unselect:before {
+	font-family: FontAwesome;
+	content: "\f067";
+	padding-right: 5px;
+}
+
+#jstagList span.unselect {
+	color: #AAA;
+}
+
+#jstagList span.unselect:hover {
+	color: #888;
+}
+
+#jstagList span.select:before {
+	font-family: FontAwesome;
+	content: "\f00c";
+	padding-right: 5px;
+}
+
+#jstagList span.select {
+	color: #2672ec;
 }
 
 /* ----------- BLUDIT IMAGES V8 ----------- */

bl-kernel/admin/themes/default/init.php

@@ -21,20 +21,21 @@ class HTML {
 	{
 		$html = '</form>';
 
-$script = '<script>
+		$script = '<script>
 
-$(document).ready(function() {
+		$(document).ready(function() {
 
-	// Prevent the form submit when press enter key.
+			// Prevent the form submit when press enter key.
-	$("form").keypress(function(e) {
+			$("form").keypress(function(e) {
-		if (e.which == 13) {
+				if (e.which == 13) {
-			return false;
+					return false;
-		}
+				}
-	});
+			});
 
-});
+		});
+
+		</script>';
 
-</script>';
 		echo $html.$script;
 	}
 
@@ -67,108 +68,32 @@ $(document).ready(function() {
 		echo $html;
 	}
 
-	public static function tagsAutocomplete($args)
+	public static function tags($args)
 	{
-		// Tag array for Javascript
+		// Javascript code
-		$tagArray = 'var tagArray = [];';
+		include(PATH_JS.'bludit-tags.js');
-		if(!empty($args['value'])) {
+
-			$tagArray = 'var tagArray = ["'.implode('","', $args['value']).'"]';
+		$html  = '<div id="bludit-tags" class="uk-form-row">';
+
+		$html .= '<input type="hidden" id="jstags" name="tags" value="">';
+
+		$html .= '<label for="jstagInput" class="uk-form-label">'.$args['label'].'</label>';
+
+		$html .= '<div class="uk-form-controls">';
+		$html .= '<input id="jstagInput" type="text" class="uk-width-1-2" autocomplete="off">';
+		$html .= '<button id="jstagAdd" class="uk-button">Add</button>';
+
+		$html .= '<div id="jstagList">';
+
+		foreach($args['allTags'] as $tag) {
+			$html .= '<span class="'.( in_array($tag, $args['selectedTags'])?'select':'unselect' ).'">'.$tag.'</span>';
 		}
-		$args['value'] = '';
 
-		// Text input
+		$html .= '</div>';
-		self::formInputText($args);
+		$html .= '</div>';
-
+		$html .= '</div>';
-		echo '<div id="jstagList"></div>';
-
-$script = '<script>
-
-'.$tagArray.'
-
-function insertTag(tag)
-{
-	// Clean the input text
-	$("#jstags").val("");
-
-	if(tag.trim()=="") {
-		return true;
-	}
-
-	// Check if the tag is already inserted.
-	var found = $.inArray(tag, tagArray);
-	if(found == -1) {
-		tagArray.push(tag);
-		renderTagList();
-	}
-}
-
-function removeTag(tag)
-{
-	var found = $.inArray(tag, tagArray);
-
-	if(found => 0) {
-		tagArray.splice(found, 1);
-		renderTagList();
-	}
-}
-
-function renderTagList()
-{
-	if(tagArray.length == 0) {
-		$("#jstagList").html("");
-	}
-	else {
-		$("#jstagList").html("<span>"+tagArray.join("</span><span>")+"</span>");
-	}
-}
-
-$("#jstags").autoComplete({
-	minChars: 1,
-	source: function(term, suggest){
-	term = term.toLowerCase();
-	var choices = ['.$args['words'].'];
-	var matches = [];
-	for (i=0; i<choices.length; i++)
-	    if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
-	suggest(matches);
-	},
-	onSelect: function(e, value, item) {
-		// Insert the tag when select whit the mouse click.
-		insertTag(value);
-	}
-});
-
-$(document).ready(function() {
-
-	// When the page is loaded render the tags
-	renderTagList();
-
-	// Remove the tag when click on it.
-	$("body").on("click", "#jstagList > span", function() {
-		value = $(this).html();
-		removeTag(value);
-	});
-
-	// Insert tag when press enter key.
-	$("#jstags").keypress(function(e) {
-		if (e.which == 13) {
-			var value = $(this).val();
-			insertTag(value);
-		}
-	});
-
-	// When form submit.
-	$("form").submit(function(e) {
-		var list = tagArray.join(",");
-		$("#jstags").val(list);
-	});
-
-});
-
-</script>';
-
-		echo $script;
 
+		echo $html;
 	}
 
 	public static function formInputPassword($args)

bl-kernel/admin/views/edit-page.php

@@ -77,13 +77,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
 	));
 
 	// Tags input
-	HTML::tagsAutocomplete(array(
+	HTML::tags(array(
 		'name'=>'tags',
-		'value'=>$_Page->tags(true),
-		'tip'=>$L->g('Type the tag and press enter'),
-		'class'=>'uk-width-1-1 uk-form-large',
 		'label'=>$L->g('Tags'),
-		'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
+		'allTags'=>$dbTags->getAll(),
+		'selectedTags'=>$_Page->tags(true)
 	));
 
 	echo '</li>';

bl-kernel/admin/views/edit-post.php

@@ -71,13 +71,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
 	));
 
 	// Tags input
-	HTML::tagsAutocomplete(array(
+	HTML::tags(array(
 		'name'=>'tags',
-		'value'=>$_Post->tags(true),
-		'tip'=>$L->g('Type the tag and press enter'),
-		'class'=>'uk-width-1-1 uk-form-large',
 		'label'=>$L->g('Tags'),
-		'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
+		'allTags'=>$dbTags->getAll(),
+		'selectedTags'=>$_Post->tags(true)
 	));
 
 	echo '</li>';

bl-kernel/admin/views/new-page.php

@@ -64,13 +64,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
 	));
 
 	// Tags input
-	HTML::tagsAutocomplete(array(
+	HTML::tags(array(
 		'name'=>'tags',
-		'value'=>'',
-		'tip'=>$L->g('Type the tag and press enter'),
-		'class'=>'uk-width-1-1 uk-form-large',
 		'label'=>$L->g('Tags'),
-		'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
+		'allTags'=>$dbTags->getAll(),
+		'selectedTags'=>array()
 	));
 
 	echo '</li>';

bl-kernel/admin/views/new-post.php

@@ -64,13 +64,11 @@ echo '<div class="sidebar uk-width-large-2-10">';
 	));
 
 	// Tags input
-	HTML::tagsAutocomplete(array(
+	HTML::tags(array(
 		'name'=>'tags',
-		'value'=>'',
-		'tip'=>$L->g('Type the tag and press enter'),
-		'class'=>'uk-width-1-1 uk-form-large',
 		'label'=>$L->g('Tags'),
-		'words'=>'"'.implode('", "', $dbTags->getAll()).'"'
+		'allTags'=>$dbTags->getAll(),
+		'selectedTags'=>array()
 	));
 
 	echo '</li>';

bl-kernel/js/bludit-tags.js

@@ -0,0 +1,64 @@
+<script>
+
+function insertTag() {
+
+	var newTag = $("#jstagInput").val();
+
+	if(newTag.trim()=="") {
+		return true;
+	}
+
+	$("#jstagList").append("<span class=\"select\">"+newTag+"</span>");
+
+	// Clean the input.
+	$("#jstagInput").val("");
+
+}
+
+$(document).ready(function() {
+
+	// Click on tag unselected.
+	$(document).on("click", ".unselect", function() {
+		$(this).removeClass("unselect").addClass("select");
+	});
+
+	// Click on tag selected.
+	$(document).on("click", ".select", function() {
+		$(this).removeClass("select").addClass("unselect");
+	});
+
+	// Insert tag when click on the button "add".
+	$(document).on("click", "#jstagAdd", function(e) {
+
+		// Prevent forum submit.
+		e.preventDefault();
+
+		insertTag();
+
+	});
+
+	// Insert tag when press enter key.
+	$("#jstagInput").keypress(function(e) {
+
+		if(e.which == 13) {
+			insertTag();
+		}
+
+	});
+
+	// Before form submit.
+	$("form").submit(function(e) {
+
+		// For each span.select make an array then implode with comma glue.
+		var list = $("#jstagList > span.select").map(function() {
+			return $(this).html();
+		}).get().join(",");
+
+		// Insert the tags separated by comma in the input hiden field.
+		$("#jstags").val( list );
+
+	});
+
+});
+
+</script>