Add more tag filtering capabilities

css/bookmarks.css

@@ -155,7 +155,7 @@
 
 #addBm ul.tagit { background:white; }
 
-#addBm input.ui-autocomplete-input{
+#addBm input.ui-autocomplete-input,  #tag_filter input.ui-autocomplete-input{
 	box-shadow:none;
 }
 
@@ -167,18 +167,18 @@
 #tag_filter {
 	padding-left: 1em;
 }
-#leftcontent hr {
-	background-color:#DDDDDD;
-	border:0;
-	color:#DDDDDD;
-	height:1px;
-	margin-top: 1em;
-	margin-bottom: 1em;
-}
-#leftcontent li, .leftcontent li {
+
+#leftcontent > ul > li, .leftcontent li {
 	padding: 0.2em;
 	padding-left:1em;
 }
+#leftcontent > label {
+	margin-top: 1em;
+	margin-bottom: 0.7em;
+	display: block;
+	padding-left: 1em;
+}
+
 #leftcontent .tag_list > li .tag , #leftcontent .share_list > li .tag{
 		background: none repeat scroll 0 0 #DEE7F8;
     border: 1px solid #CAD8F3;
@@ -205,3 +205,27 @@ li:hover .tags_actions {
 	display:block;
 }
 li:hover em { display : none; }
+#tag_filter li, #tag_filter li:hover{
+	    background: none repeat scroll 0 0 #F8F8F8;
+
+}
+#tag_filter ul.tagit li.tagit-choice {
+    background: none repeat scroll 0 0 #DEE7F8;
+		padding: 0.2em 18px 0.2em 0.5em;
+/* 		padding:0; */
+}
+
+#tag_filter a {
+    display: inline;
+    float: none;
+    margin: 0;
+    padding: 0;
+}
+#tag_filter ul.tagit li.tagit-choice .close{
+		margin-top: -8px;
+		cursor: pointer;
+    margin-top: -8px;
+    position: absolute;
+    right: 0.1em;
+    top: 50%;
+}

index.php

@@ -31,13 +31,19 @@ OCP\App::setActiveNavigationEntry( 'bookmarks_index' );
 
 OCP\Util::addscript('bookmarks','bookmarks');
 OCP\Util::addStyle('bookmarks', 'bookmarks');
-$tags = explode(',',  isset($_GET['tag']) ? $_GET['tag'] : '');
-if($tags[0] =='') unset($tags[0]);
-$qtags = OC_Bookmarks_Bookmarks::findTags($tags);
+
+OCP\Util::addscript('bookmarks','tag-it');
+OCP\Util::addStyle('bookmarks', 'jquery.tagit');
+$qtags = OC_Bookmarks_Bookmarks::findTags();
 $shared = OC_Bookmarks_Bookmarks::findSharing();
 
+$tags = array();
+foreach($qtags as $tag) {
+	$tags[] = $tag['tag'];
+}
+
 $tmpl = new OCP\Template( 'bookmarks', 'list', 'user' );
 $tmpl->assign('req_tag',isset($_GET['tag']) ? $_GET['tag'] : '');
-$tmpl->assign('tags', $qtags);
+$tmpl->assign('tags', json_encode($tags), false);
 $tmpl->assign('shared', $shared);
 $tmpl->printPage();

js/bookmarks.js

@@ -10,8 +10,22 @@ $(document).ready(function() {
 	});
 	$(window).resize();
 	$('.bookmarks_list').scroll(updateOnBottom).empty().width($('#rightcontent').width());
+	$('#tag_filter input').tagit({
+		allowSpaces: true,
+		availableTags: fullTags,
+		onTagRemoved: filterTagsChanged
+	}).tagit('option', 'onTagAdded', filterTagsChanged);
+
+
 	getBookmarks();
 });
+
+function addFilterTag(event)
+{
+		event.preventDefault();
+		$('#tag_filter input').tagit('createTag', $(this).text());
+}
+
 function updateTagsList(tag) {
 	$('.tag_list').append('<li><a href="" class="tag">'+tag['tag']+'</a>'+
 		'<p class="tags_actions">'+
@@ -25,13 +39,19 @@ function updateTagsList(tag) {
 		'<em>'+tag['nbr']+'</em>'+
 	'</li>');
 }
+
+function filterTagsChanged()
+{
+	$('#bookmarkFilterTag').val($('#tag_filter input:hidden').val());
+	bookmarks_page = 0;
+	$('.bookmarks_list').empty();
+	getBookmarks();
+}
 function getBookmarks() {
 	if(bookmarks_loading) {
 		//have patience :)
 		return;
 	}	
-	$('#bookmarkFilterTag').val($('#tag_filter input').val());
-	
 	//Update Rel Tags
 	$.ajax({
 		type: 'POST',
@@ -42,6 +62,7 @@ function getBookmarks() {
 			for(var i in tags.data) {
 				updateTagsList(tags.data[i]);
 			}
+			$('.tag_list a.tag').click(addFilterTag);
 		}
 	});
 	
@@ -201,7 +222,7 @@ function updateOnBottom() {
 	// use a bit of margin to begin loading before we are really at the
 	// bottom
 	if (top < height * 1.2) {
-		getBookmarks();
+	//	getBookmarks();
 	}
 }
 

js/tag-it.js

@@ -725,8 +725,6 @@
 
             tag = $(tag);
 
-            this._trigger('onTagRemoved', null, tag);
-
             if (this.options.singleField) {
                 var tags = this.assignedTags();
                 var removedTagLabel = this.tagLabel(tag);
@@ -743,6 +741,8 @@
             } else {
                 tag.remove();
             }
+            this._trigger('onTagRemoved', null, tag);
+
         },
 
         removeAll: function() {

templates/list.php

@@ -13,14 +13,14 @@
 </div>
 <div id="leftcontent">
 	<p id="tag_filter">
-		<input type="text" placeholder="Filter By tag" value="<?php echo $_['req_tag']; ?>"/> <a href="javascript:bookmarks_page = 0;	$('.bookmarks_list').empty();getBookmarks()">go</a>
+		<input type="text" placeholder="Filter By tag" value="<?php echo $_['req_tag']; ?>"/>
 	</p>
 
 	<label><?php echo $l->t('Related Tags'); ?></label>
 	<ul class="tag_list">
 	</ul>
 	<label><?php echo $l->t('Shared with'); ?></label>
-	<hr />
+
 	<ul class="share_list">
 		<?php foreach($_['shared'] as $users):?>
 			<li><span class="tag"><?php echo $users['name'];?></span>
@@ -48,3 +48,6 @@
 			createBookmarklet(); 
 		?>
 </div>
+<script>
+	var fullTags = <?php echo $_['tags'];?>;
+</script>