First step^of removing the popup. Adding js templating and inline editing of bookmark

ajax/editBookmark.php

@@ -38,7 +38,6 @@ if(isset($_POST['url'])) {
 	}
 	else {
 		$bm = OC_Bookmarks_Bookmarks::addBookmark($_POST['url'], $_POST['title'], $tags, $_POST['desc'], $pub);
-		continue;
 	}
 	OCP\JSON::success(array('id'=>$bm));
 	exit();

css/bookmarks.css

@@ -50,6 +50,9 @@
 
 }
 
+#add_url {
+	width: 25em;
+}
 .bookmarks_addBml {
 	text-decoration: underline;
 }
@@ -170,7 +173,7 @@
 
 .addBm ul.tagit { background:white; }
 
-.addBm input.ui-autocomplete-input,  #tag_filter input.ui-autocomplete-input{
+.addBm input.ui-autocomplete-input,  #tag_filter input.ui-autocomplete-input, .bookmark_form_tags input.ui-autocomplete-input{
 	box-shadow:none;
 
 }
@@ -288,7 +291,7 @@ li:hover em { display : none; }
   overflow:hidden;
   display:block;
 }
-.bookmark_date {
+.bookmark_date, .bookmark_submit {
 	font-size:small;
 	position: absolute;
   right: 6em;
@@ -296,6 +299,7 @@ li:hover em { display : none; }
 /* 	margin-top:2.5em; */
 	margin-right: 0.2em;
 }
+
 /*
 .bm_view_img .bookmark_single:hover .bookmark_url{
 	display:block; 
@@ -308,7 +312,15 @@ li:hover em { display : none; }
 .bookmark_single:hover .bookmark_url a[href]{ color:gray; }
 
 .bookmark_url { display: none; }
+.bookmark_form_title input, .bookmark_form_url input, .bookmark_form_desc textarea  {
+	width: 80%;
+}
 
+.bookmark_single_form .tagit{
+   width: 80%;
+	box-shadow: 0 1px 1px #FFFFFF, 0 1px 0 #BBBBBB inset;
+	margin: 3px;
+}
 .bm_view_img .bookmark_actions {
     bottom: 0.7em;
     display: block;

index.php

@@ -35,6 +35,7 @@ OCP\Util::addscript('bookmarks','addBm');
 
 
 OCP\Util::addscript('bookmarks','tag-it');
+OCP\Util::addscript('bookmarks','js_tpl');
 OCP\Util::addStyle('bookmarks', 'jquery.tagit');
 $qtags = OC_Bookmarks_Bookmarks::findTags();
 

js/addBm.js

@@ -38,7 +38,8 @@
 			// Init Tagging thing
 			base.$el.find('.tags').tagit({
 				allowSpaces: true,
-				availableTags: fullTags
+				availableTags: fullTags,
+				placeholderText: t('bookmark', 'Tags')
 			});
 
 			if(base.options['record']) { //Fill the form if it's an edit
@@ -54,9 +55,6 @@
 					}
 				}
 			}
-
-			base.$el.find('.tagit-new input').attr('placeholder',t('bookmark', 'Tags'));
-
     };
 
     base.init();

js/bookmarks.js

@@ -228,9 +228,46 @@ function delBookmark(event) {
 function editBookmark(event) {
 	var record = $(this).parent().parent();
 	bookmark =  record.data('record');
-	createEditDialog(bookmark);
+	console.log(bookmark);
+	//createEditDialog(bookmark);
+	html = tmpl("item_form_tmpl", bookmark);
+	
+	record.after(html);
+	record.hide();
+	rec_form = record.next().find('form');
+	console.log(rec_form);
+	rec_form.find('.bookmark_form_tags ul').tagit({
+				allowSpaces: true,
+				availableTags: fullTags,
+				placeholderText: t('bookmark', 'Tags')
+			});
+	rec_form.bind('submit',submitBookmark);
+	rec_form.find('.reset').bind('click',cancelBookmark);
 }
 
+function cancelBookmark(event) {
+	event.preventDefault();
+	rec_form = $(this).closest('form').parent();
+	rec_form.prev().show();
+	rec_form.remove();
+}
+function submitBookmark(event) {
+	event.preventDefault();
+	form_values = $(this).serialize();
+	$.ajax({
+		type: 'POST',
+		url: $(this).attr('action'),
+		data: form_values,
+		success: function(data){
+			if(data.status == 'success'){
+				//@TODO : do better reaction than reloading the page
+				filterTagsChanged();
+			} else { // On failure
+				//@TODO : show error message?
+			}
+		}
+	});
+}
 function updateBookmarksList(bookmark) {
 	var tags = bookmark.tags;
 	var taglist = '';

js/js_tpl.js

@@ -0,0 +1,36 @@
+
+// Simple JavaScript Templating
+// John Resig - http://ejohn.org/ - MIT Licensed
+(function(){
+  var cache = {};
+
+  this.tmpl = function tmpl(str, data){
+    // Figure out if we're getting a template, or if we need to
+    // load the template - and be sure to cache the result.
+    var fn = !/\W/.test(str) ?
+      cache[str] = cache[str] ||
+        tmpl(document.getElementById(str).innerHTML) :
+
+      // Generate a reusable function that will serve as a template
+      // generator (and which will be cached).
+      new Function("obj",
+        "var p=[],print=function(){p.push.apply(p,arguments);};" +
+
+        // Introduce the data as local variables using with(){}
+        "with(obj){p.push('" +
+
+        // Convert the template into pure JavaScript
+        str
+          .replace(/[\r\t\n]/g, " ")
+          .split("<%").join("\t")
+          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+          .replace(/\t=(.*?)%>/g, "',$1,'")
+          .split("\t").join("');")
+          .split("%>").join("p.push('")
+          .split("\r").join("\\'")
+      + "');}return p.join('');");
+
+    // Provide some basic currying to the user
+    return data ? fn( data ) : fn;
+  };
+})();

templates/list.php

@@ -52,6 +52,46 @@
 	var shot_provider = '<?php echo OCP\Config::getUserValue(OCP\USER::getUser(), 'bookmarks', 'shot_provider', 'http://screenshots.bookmarkly.com/thumb?url={url}');?>';
 	//http://api.thumbalizr.com/?width={width}&url={url}
 </script>
-<div id="edit_dialog" style="display:none;">
+
+<script type="text/html" id="edit_dialog_tmpl">
 <?php include 'addBm.php';?>
-</div>
+</script>
+
+
+<script type="text/html" id="item_tmpl">
+		<div class="bookmark_single" data-id="<%= id %>">
+				<p class="bookmark_actions">
+					<span class="bookmark_edit">
+						<img class="svg" src="<?php echo OCP\image_path("", "actions/rename.svg");?>" title="Edit">
+					</span>
+					<span class="bookmark_delete">
+						<img class="svg" src="<?php echo OCP\image_path("", "actions/delete.svg");?>" title="Delete">
+					</span>&nbsp;
+				</p>
+				<p class="bookmark_title">
+					<a href="<%= encodeEntities(url) %>" target="_blank" class="bookmark_link"><%= encodeEntities(title) %></a>
+				</p>
+				<p class="bookmark_url"><a href="<%= encodeEntities(url) %>" target="_blank" class="bookmark_link"><%= encodeEntities(url) %></a></p>
+				<p class="bookmark_date"><%= formatDate(added_date) %></p>
+				<p class="bookmark_desc"><%= encodeEntities(description)%> </p>
+			</div>
+</script>
+
+<script type="text/html" id="item_form_tmpl">
+		<div class="bookmark_single_form" data-id="<%= id %>">
+			<form method="post" action="<?php echo OCP\Util::linkTo('bookmarks', 'ajax/editBookmark.php');?>" >
+					<input type="hidden" name="record_id" value="<%= id %>" />
+				<p class="bookmark_form_title">
+					<input type="text" name="title" placeholder="<?php echo $l->t('The title of the page');?>" value="<%= title %>"/>
+				</p>
+				<p class="bookmark_form_url"><input type="text" name="url" placeholder=""<?php echo $l->t('The address of the page');?>" value="<%= encodeEntities(url)%>"/></p>
+				<div class="bookmark_form_tags"><ul>
+					<% for ( var i = 0; i < tags.length; i++ ) { %>
+						<li><%=tags[i]%></li>
+					<% } %>
+				</ul></div>
+				<p class="bookmark_form_desc"><textarea name="desc" placeholder="<?php echo $l->t('Description of the page');?>"><%= description%></textarea> </p>
+				<p class="bookmark_form_submit"><button class="reset" ><?php echo $l->t('Cancel');?></button><input type="submit" value="<?php echo $l->t('Save');?>"></p>
+			</form>
+		</div>
+</script>