projects/booket

changeset 6:e9ad4c625b7a

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 Sep 10 19:45:23 2014 +0200 (2014-09-10)
parents 39c95b9826d2
children a1a934adff8d
files booket.css booket.html booket.js
line diff
     1.1 --- a/booket.css	Tue Sep 09 20:23:58 2014 +0200
     1.2 +++ b/booket.css	Wed Sep 10 19:45:23 2014 +0200
     1.3 @@ -42,7 +42,8 @@
     1.4  label,
     1.5  input[type="text"],
     1.6  input[type="file"],
     1.7 -input[type="url"] {
     1.8 +input[type="url"],
     1.9 +textarea {
    1.10      display: block;
    1.11  }
    1.12  
    1.13 @@ -129,22 +130,45 @@
    1.14      margin: 1em 0 0 0;
    1.15  }
    1.16  
    1.17 +#bookmarklet,
    1.18  #keyboard-shortcuts {
    1.19      float: right;
    1.20      border: 1px solid #d3d7cf;
    1.21      border-radius: .5em;
    1.22 -    background-color: #fbfbf9;
    1.23      padding: .5em;
    1.24      margin: 0 0 1em 1em;
    1.25      font-size: .75em;
    1.26  }
    1.27  
    1.28 +a#bookmarklet-link {
    1.29 +    display: block;
    1.30 +    margin: 1em 0 0 0;
    1.31 +}
    1.32 +
    1.33 +a#bookmarklet-link:link,
    1.34 +a#bookmarklet-link:visited,
    1.35 +a#bookmarklet-link:link:hover,
    1.36 +a#bookmarklet-link:link:focus,
    1.37 +a#bookmarklet-link:link:active,
    1.38 +a#bookmarklet-link:visited:hover,
    1.39 +a#bookmarklet-link:visited:focus,
    1.40 +a#bookmarklet-link:visited:active {
    1.41 +    color: #000000;
    1.42 +    text-decoration: underline;
    1.43 +}
    1.44 +
    1.45 +#bookmarklet h3,
    1.46  #keyboard-shortcuts h3 {
    1.47      font-size: 1em;
    1.48      text-align: center;
    1.49      margin: 0;
    1.50  }
    1.51  
    1.52 +#keyboard-shortcuts {
    1.53 +    background-color: #fbfbf9;
    1.54 +    clear: right;
    1.55 +}
    1.56 +
    1.57  #keyboard-shortcuts dl {
    1.58      margin: 1em 0 0 0;
    1.59  }
     2.1 --- a/booket.html	Tue Sep 09 20:23:58 2014 +0200
     2.2 +++ b/booket.html	Wed Sep 10 19:45:23 2014 +0200
     2.3 @@ -55,6 +55,9 @@
     2.4            <ul class="tag-input-list"></ul>
     2.5            <button type="button" name="more-tags">Add more tags</button>
     2.6          </div>
     2.7 +        <label>Import from Bookmarklet
     2.8 +        <textarea name="bookmarklet-import" cols="60" rows="4"
     2.9 +        spellcheck="false"></textarea></label>
    2.10          <button type="reset" name="cancel">Cancel</button><button type="submit"
    2.11          name="save-bookmark">Save</button>
    2.12        </fieldset>
    2.13 @@ -63,6 +66,11 @@
    2.14  
    2.15    <section id="actions">
    2.16      <h2>Actions</h2>
    2.17 +    <aside id="bookmarklet">
    2.18 +      <h3>Bookmarklet</h3>
    2.19 +      <a title="Create Bookmark" id="bookmarklet-link">Create Bookmark</a>
    2.20 +    </aside>
    2.21 +
    2.22      <aside id="keyboard-shortcuts">
    2.23        <h3>Keyboard Shortcuts</h3>
    2.24        <dl>
    2.25 @@ -78,6 +86,7 @@
    2.26          <dd>Focus search field</dd>
    2.27        </dl>
    2.28      </aside>
    2.29 +
    2.30      <form id="load-form">
    2.31        <fieldset>
    2.32          <legend>Load Bookmarks</legend>
     3.1 --- a/booket.js	Tue Sep 09 20:23:58 2014 +0200
     3.2 +++ b/booket.js	Wed Sep 10 19:45:23 2014 +0200
     3.3 @@ -24,6 +24,18 @@
     3.4  (function () {
     3.5  'use strict';
     3.6  
     3.7 +var BOOKMARKLET_URI =
     3.8 +    'javascript:(function () {' +
     3.9 +        '\'use strict\';' +
    3.10 +    '' +
    3.11 +        'window.alert(\'Copy the following data and paste it into \' +' +
    3.12 +            '\'Booket:\\n\\n\' + JSON.stringify({' +
    3.13 +                '\'url\': document.URL,' +
    3.14 +                '\'title\': document.title' +
    3.15 +            '}));' +
    3.16 +    '}) ();';
    3.17 +
    3.18 +
    3.19  /*
    3.20   * utility stuff
    3.21   */
    3.22 @@ -831,6 +843,7 @@
    3.23      editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
    3.24      editorFormElement.querySelector('input:not([type="hidden"])').accessKey =
    3.25          'a';
    3.26 +    editorFormElement.addEventListener('input', this);
    3.27      editorFormElement.addEventListener('click', this);
    3.28      editorFormElement.addEventListener('submit', this);
    3.29      editorFormElement.addEventListener('reset', this);
    3.30 @@ -841,6 +854,8 @@
    3.31  
    3.32      saveFormElement.parentNode.insertBefore(newNode,
    3.33          saveFormElement.nextSibling);
    3.34 +
    3.35 +    document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI;
    3.36  };
    3.37  
    3.38  extend(ActionsView, ObservableMixin);
    3.39 @@ -855,10 +870,31 @@
    3.40  };
    3.41  
    3.42  ActionsView.prototype.handleEvent = function (e) {
    3.43 +    var bookmarkletData;
    3.44 +    var parsedData;
    3.45      var tags = [];
    3.46      var i;
    3.47  
    3.48      switch (e.type) {
    3.49 +    case 'input':
    3.50 +        if (e.target.name === 'bookmarklet-import') {
    3.51 +            // get rid of any preceding text
    3.52 +            bookmarkletData = e.target.value.replace(/^[^{]*/, '');
    3.53 +
    3.54 +            try {
    3.55 +                parsedData = JSON.parse(bookmarkletData);
    3.56 +            } catch (exception) {
    3.57 +                return;
    3.58 +            }
    3.59 +
    3.60 +            if (isString(parsedData.url) && parsedData.url !== '') {
    3.61 +                e.target.form.elements.url.value = parsedData.url;
    3.62 +            }
    3.63 +            if (isString(parsedData.title) && parsedData.title !== '') {
    3.64 +                e.target.form.elements.title.value = parsedData.title;
    3.65 +            }
    3.66 +        }
    3.67 +        break;
    3.68      case 'click':
    3.69          if (e.target.name === 'more-tags') {
    3.70              e.preventDefault();