Mercurial > projects > booket

changeset 23:69552aee9993

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use custom expander instead of details element Use a custom expander instead of a details element which is not (yet) universally supported.
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sun, 05 Oct 2014 19:46:32 +0200
parents b19db583b5f8
children 6cf1ec2e8955
files booket.css booket.html booket.js
diffstat 3 files changed, 50 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/booket.css	Sat Oct 04 22:16:56 2014 +0200
+++ b/booket.css	Sun Oct 05 19:46:32 2014 +0200
@@ -113,6 +113,24 @@
     font-weight: bold;
 }
 
+.expander > .expander-label {
+    cursor: pointer;
+}
+
+.expander > .expander-label::before {
+    content: "\25B6";
+    margin-right: .5em;
+}
+
+.expander[data-expander-open] > .expander-label::before {
+    content: "\25BC";
+    margin-right: .5em;
+}
+
+.expander:not([data-expander-open]) > :not(.expander-label) {
+    display: none;
+}
+
 #logo {
     height: 2em;
 }
--- a/booket.html	Sat Oct 04 22:16:56 2014 +0200
+++ b/booket.html	Sun Oct 05 19:46:32 2014 +0200
@@ -183,13 +183,13 @@
         </template>
         <template id="bookmark-template">
           <li>
-            <details>
-              <summary><p><img width="16" height="16"
-                  class="bookmark-favicon"></img>
+            <div class="expander">
+              <div class="expander-label" tabindex="0"><p><img width="16"
+                  height="16" class="bookmark-favicon"></img>
                   <a class="bookmark-link" target="_blank"></a>
                   <span class="bookmark-hostname"></span>
                 </p>
-                <ul class="tag-list"></ul></summary>
+                <ul class="tag-list"></ul></div>
               <div class="bookmark-actions">
                 <button type="button" name="edit-bookmark">Edit</button><button
                 type="button" name="delete-bookmark">Delete</button>
@@ -202,7 +202,7 @@
                 <dt>Last modified</dt>
                 <dd><time class="mtime"></time></dd>
               </dl>
-            </details>
+            </div>
           </li>
         </template>
       </ul>
--- a/booket.js	Sat Oct 04 22:16:56 2014 +0200
+++ b/booket.js	Sun Oct 05 19:46:32 2014 +0200
@@ -1325,6 +1325,7 @@
     this.bookmarkListElement = document.querySelector('ul#bookmark-list');
     this.bookmarkListElement.addEventListener('input', this);
     this.bookmarkListElement.addEventListener('click', this);
+    this.bookmarkListElement.addEventListener('keydown', this);
     this.bookmarkListElement.addEventListener('submit', this);
     this.bookmarkListElement.addEventListener('reset', this);
 
@@ -1343,6 +1344,13 @@
 
 extend(BookmarkView, ObservableMixin);
 
+BookmarkView.prototype.getAncestorClass = function (node, className) {
+    while ((node = node.parentNode) !== null &&
+            (!node.classList || !node.classList.contains(className)));
+
+    return node;
+};
+
 BookmarkView.prototype.handleEvent = function (e) {
     var bookmarkletData;
     var parsedData;
@@ -1417,6 +1425,25 @@
             this.notify(e.target.name,
                 getAncestorElementDatasetItem(e.target, 'tag'));
             break;
+        default:
+            if ((node = this.getAncestorClass(e.target, 'expander')) !== null) {
+                if (node.dataset.expanderOpen !== undefined) {
+                    delete node.dataset.expanderOpen;
+                } else {
+                    node.dataset.expanderOpen = '';
+                }
+            }
+            break;
+        }
+        break;
+    case 'keydown':
+        if (e.keyCode === 32 &&
+                (node = this.getAncestorClass(e.target, 'expander')) !== null) {
+            if (node.dataset.expanderOpen !== undefined) {
+                delete node.dataset.expanderOpen;
+            } else {
+                node.dataset.expanderOpen = '';
+            }
         }
         break;
     case 'submit':