Merge branch 'master' of https://github.com/dluciv/bookmarks.public i…

…nto dluciv-master

Conflicts:
	bookmarks.css
	index.html

README.md

@@ -57,6 +57,17 @@ To make your new additions permanent you must click `Save` and overwrite
 your local `bookmarks.data` file with the updated version.
 
 
+### Adding / Editing / Removing
+
+**Add Bookmark** form allows you to add new bookmark with name, link and comma-separated tags.
+
+When moving mouse over existing bookmark, you can either click *recycle icon* to delete it or
+*pencil icon* to edit it.
+
+Editing works just as adding new bookmark. It even happens in the same form, which temporary
+switches to editing mode (**Edit Bookmark** title and buttons to **Save** and **Cancel**).
+Editing replaces existing bookmark you selected before.
+
 Contributing
 ------------
 

bookmarks.css

@@ -23,3 +23,9 @@ table {
     padding: 0.5em;
     border: 0px solid red;
 }
+.whenedit {
+    display: none;
+}
+span.context {
+    cursor: pointer;
+}

bookmarks.js

@@ -88,6 +88,7 @@ function addBookmark() {
     });
     var form = document.getElementById("newForm");
     form.reset();
+    setupEditRemove();
 }
 
 /**
@@ -233,9 +234,74 @@ function updateView()
         ((typeof tags !== 'undefined') && (tags.toLowerCase().match(decodeURIComponent(tag))))
             ? $(this).show() : $(this).hide();
     });
+
     updateTitle();
 }
 
+/**
+ * Restore Add bookmark form back to new bookmark mode
+ * after saving editing results / canceling editing
+ */
+function doneEditBookmark () {
+    // cleanup form
+    $('#newName').val('');
+    $('#newLink').val('');
+    $('#newTags').val('');
+    // switch form to adding mode
+    $('.whenedit').hide();
+    $('.whenadd').show();
+}
+
+/**
+ * Switch Add bookmark form to editing mode
+ */
+function editBookmark (selector) {
+    // load form
+    $('#newName').val(selector.find('> a').html());
+    $('#newLink').val(selector.find('> a').attr('href'));
+    $('#newTags').val(selector.attr('title'));
+
+    // switch to editing mode
+    $('.whenadd').hide();
+    $('.whenedit').show();
+
+    $('#saveBookmark').off('click').one('click', function(){
+        // save form
+        selector.find('> a').html($('#newName').val());
+        selector.find('> a').attr('href', $('#newLink').val());
+        selector.attr('title', $('#newTags').val());
+        // update tags
+        toggleTags();
+        toggleTags();
+        // switch to adding mode
+        doneEditBookmark();
+    });
+}
+
+/**
+ * Setup edit / remove handlers
+ */
+function setupEditRemove () {
+    var li = $("#bookmarks > li");
+    li.mouseenter(function(){
+        var cli = $(this);
+        var clia = cli.find("> a");
+        var remove = $('<span class="context">&nbsp;&#9851;&nbsp;</span>').insertAfter(clia);
+        var edit = $('<span class="context">&nbsp;&#9998;&nbsp;</span>').insertAfter(clia);
+        edit.off('click').one('click', function(){
+            editBookmark(cli);
+        });
+        remove.off('click').one('click', function(){
+            if ( confirm( "Remove bookmark?" ) ) {
+                cli.remove();
+            }
+        });
+    });
+    li.mouseleave(function(){
+        $(this).find("span.context").remove();
+    });
+}
+
 /**
  * Load our bookmarks from the URL `bookmarks.data`, and setup our
  * initial state + listeners.
@@ -284,6 +350,8 @@ function setup () {
             updateTitle();
         });
 
+        setupEditRemove();
+
         /*
          * Now update the view - in case we were loaded with a
          * hash

index.html

@@ -44,7 +44,6 @@
               <button title="Show all bookmarks" type="button" onclick="clearFilter();">Show All</button>
               <button title="Show only bookmarks with no tags" type="button" onclick="showUntagged();">Show Untagged</button>
               <button title="Show 25 random bookmarks" type="button" onclick="showRandom();">Show Random</button>
-
             </p>
           </fieldset>
           <p> </p>
@@ -56,13 +55,18 @@
           </fieldset>
           <p> </p>
           <fieldset>
-            <legend><b>Add New Bookmark </b></legend>
+            <legend><b><span class="whenadd">Add</span><span class="whenedit">Edit</span> Bookmark </b></legend>
             <form id="newForm" name="newForm">
               <table id="add_bookmark" border="0" cellspacing="2" cellpadding="2">
                 <tr><td>Name:</td><td><input type="text" name="newname" id="newName" value="" size="50" /></td></tr>
                 <tr><td>Link:</td><td><input type="text" name="newLink" id="newLink" value="" size="50" /></td></tr>
                 <tr><td>Tags:</td><td><input type="text" name="newTags" id="newTags" value="" size="50" /></</td></tr>
-                <tr><td colspan="2" style="text-align:right"><button type="button" onclick="addBookmark()">Add</button>  <button type="button" onclick="saveDataFile()">Save...</button></td></tr>
+
+                <tr><td colspan="2" style="text-align:right">
+                  <button class="whenadd" type="button" onclick="addBookmark()">Add</button>
+                  <button class="whenedit" id="saveBookmark" type="button">Save</button>
+                  <button class="whenedit" type="button" onclick="doneEditBookmark()">Cancel</button>
+                </td></tr>
               </table>
             </form>
           </fieldset>