Mercurial > projects > booket

changeset 6:e9ad4c625b7a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add bookmarklet for bookmarking Add a bookmarklet which gathers the URL and title of the current page which can then be copied and pasted into Booket
author Guido Berhoerster <guido+booket@berhoerster.name>
date Wed, 10 Sep 2014 19:45:23 +0200
parents 39c95b9826d2
children a1a934adff8d
files booket.css booket.html booket.js
diffstat 3 files changed, 71 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/booket.css	Tue Sep 09 20:23:58 2014 +0200
+++ b/booket.css	Wed Sep 10 19:45:23 2014 +0200
@@ -42,7 +42,8 @@
 label,
 input[type="text"],
 input[type="file"],
-input[type="url"] {
+input[type="url"],
+textarea {
     display: block;
 }
 
@@ -129,22 +130,45 @@
     margin: 1em 0 0 0;
 }
 
+#bookmarklet,
 #keyboard-shortcuts {
     float: right;
     border: 1px solid #d3d7cf;
     border-radius: .5em;
-    background-color: #fbfbf9;
     padding: .5em;
     margin: 0 0 1em 1em;
     font-size: .75em;
 }
 
+a#bookmarklet-link {
+    display: block;
+    margin: 1em 0 0 0;
+}
+
+a#bookmarklet-link:link,
+a#bookmarklet-link:visited,
+a#bookmarklet-link:link:hover,
+a#bookmarklet-link:link:focus,
+a#bookmarklet-link:link:active,
+a#bookmarklet-link:visited:hover,
+a#bookmarklet-link:visited:focus,
+a#bookmarklet-link:visited:active {
+    color: #000000;
+    text-decoration: underline;
+}
+
+#bookmarklet h3,
 #keyboard-shortcuts h3 {
     font-size: 1em;
     text-align: center;
     margin: 0;
 }
 
+#keyboard-shortcuts {
+    background-color: #fbfbf9;
+    clear: right;
+}
+
 #keyboard-shortcuts dl {
     margin: 1em 0 0 0;
 }
--- a/booket.html	Tue Sep 09 20:23:58 2014 +0200
+++ b/booket.html	Wed Sep 10 19:45:23 2014 +0200
@@ -55,6 +55,9 @@
           <ul class="tag-input-list"></ul>
           <button type="button" name="more-tags">Add more tags</button>
         </div>
+        <label>Import from Bookmarklet
+        <textarea name="bookmarklet-import" cols="60" rows="4"
+        spellcheck="false"></textarea></label>
         <button type="reset" name="cancel">Cancel</button><button type="submit"
         name="save-bookmark">Save</button>
       </fieldset>
@@ -63,6 +66,11 @@
 
   <section id="actions">
     <h2>Actions</h2>
+    <aside id="bookmarklet">
+      <h3>Bookmarklet</h3>
+      <a title="Create Bookmark" id="bookmarklet-link">Create Bookmark</a>
+    </aside>
+
     <aside id="keyboard-shortcuts">
       <h3>Keyboard Shortcuts</h3>
       <dl>
@@ -78,6 +86,7 @@
         <dd>Focus search field</dd>
       </dl>
     </aside>
+
     <form id="load-form">
       <fieldset>
         <legend>Load Bookmarks</legend>
--- a/booket.js	Tue Sep 09 20:23:58 2014 +0200
+++ b/booket.js	Wed Sep 10 19:45:23 2014 +0200
@@ -24,6 +24,18 @@
 (function () {
 'use strict';
 
+var BOOKMARKLET_URI =
+    'javascript:(function () {' +
+        '\'use strict\';' +
+    '' +
+        'window.alert(\'Copy the following data and paste it into \' +' +
+            '\'Booket:\\n\\n\' + JSON.stringify({' +
+                '\'url\': document.URL,' +
+                '\'title\': document.title' +
+            '}));' +
+    '}) ();';
+
+
 /*
  * utility stuff
  */
@@ -831,6 +843,7 @@
     editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
     editorFormElement.querySelector('input:not([type="hidden"])').accessKey =
         'a';
+    editorFormElement.addEventListener('input', this);
     editorFormElement.addEventListener('click', this);
     editorFormElement.addEventListener('submit', this);
     editorFormElement.addEventListener('reset', this);
@@ -841,6 +854,8 @@
 
     saveFormElement.parentNode.insertBefore(newNode,
         saveFormElement.nextSibling);
+
+    document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI;
 };
 
 extend(ActionsView, ObservableMixin);
@@ -855,10 +870,31 @@
 };
 
 ActionsView.prototype.handleEvent = function (e) {
+    var bookmarkletData;
+    var parsedData;
     var tags = [];
     var i;
 
     switch (e.type) {
+    case 'input':
+        if (e.target.name === 'bookmarklet-import') {
+            // get rid of any preceding text
+            bookmarkletData = e.target.value.replace(/^[^{]*/, '');
+
+            try {
+                parsedData = JSON.parse(bookmarkletData);
+            } catch (exception) {
+                return;
+            }
+
+            if (isString(parsedData.url) && parsedData.url !== '') {
+                e.target.form.elements.url.value = parsedData.url;
+            }
+            if (isString(parsedData.title) && parsedData.title !== '') {
+                e.target.form.elements.title.value = parsedData.title;
+            }
+        }
+        break;
     case 'click':
         if (e.target.name === 'more-tags') {
             e.preventDefault();