projects/booket

changeset 23:69552aee9993

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 Oct 05 19:46:32 2014 +0200 (2014-10-05)
parents b19db583b5f8
children 6cf1ec2e8955
files booket.css booket.html booket.js
line diff
     1.1 --- a/booket.css	Sat Oct 04 22:16:56 2014 +0200
     1.2 +++ b/booket.css	Sun Oct 05 19:46:32 2014 +0200
     1.3 @@ -113,6 +113,24 @@
     1.4      font-weight: bold;
     1.5  }
     1.6  
     1.7 +.expander > .expander-label {
     1.8 +    cursor: pointer;
     1.9 +}
    1.10 +
    1.11 +.expander > .expander-label::before {
    1.12 +    content: "\25B6";
    1.13 +    margin-right: .5em;
    1.14 +}
    1.15 +
    1.16 +.expander[data-expander-open] > .expander-label::before {
    1.17 +    content: "\25BC";
    1.18 +    margin-right: .5em;
    1.19 +}
    1.20 +
    1.21 +.expander:not([data-expander-open]) > :not(.expander-label) {
    1.22 +    display: none;
    1.23 +}
    1.24 +
    1.25  #logo {
    1.26      height: 2em;
    1.27  }
     2.1 --- a/booket.html	Sat Oct 04 22:16:56 2014 +0200
     2.2 +++ b/booket.html	Sun Oct 05 19:46:32 2014 +0200
     2.3 @@ -183,13 +183,13 @@
     2.4          </template>
     2.5          <template id="bookmark-template">
     2.6            <li>
     2.7 -            <details>
     2.8 -              <summary><p><img width="16" height="16"
     2.9 -                  class="bookmark-favicon"></img>
    2.10 +            <div class="expander">
    2.11 +              <div class="expander-label" tabindex="0"><p><img width="16"
    2.12 +                  height="16" class="bookmark-favicon"></img>
    2.13                    <a class="bookmark-link" target="_blank"></a>
    2.14                    <span class="bookmark-hostname"></span>
    2.15                  </p>
    2.16 -                <ul class="tag-list"></ul></summary>
    2.17 +                <ul class="tag-list"></ul></div>
    2.18                <div class="bookmark-actions">
    2.19                  <button type="button" name="edit-bookmark">Edit</button><button
    2.20                  type="button" name="delete-bookmark">Delete</button>
    2.21 @@ -202,7 +202,7 @@
    2.22                  <dt>Last modified</dt>
    2.23                  <dd><time class="mtime"></time></dd>
    2.24                </dl>
    2.25 -            </details>
    2.26 +            </div>
    2.27            </li>
    2.28          </template>
    2.29        </ul>
     3.1 --- a/booket.js	Sat Oct 04 22:16:56 2014 +0200
     3.2 +++ b/booket.js	Sun Oct 05 19:46:32 2014 +0200
     3.3 @@ -1325,6 +1325,7 @@
     3.4      this.bookmarkListElement = document.querySelector('ul#bookmark-list');
     3.5      this.bookmarkListElement.addEventListener('input', this);
     3.6      this.bookmarkListElement.addEventListener('click', this);
     3.7 +    this.bookmarkListElement.addEventListener('keydown', this);
     3.8      this.bookmarkListElement.addEventListener('submit', this);
     3.9      this.bookmarkListElement.addEventListener('reset', this);
    3.10  
    3.11 @@ -1343,6 +1344,13 @@
    3.12  
    3.13  extend(BookmarkView, ObservableMixin);
    3.14  
    3.15 +BookmarkView.prototype.getAncestorClass = function (node, className) {
    3.16 +    while ((node = node.parentNode) !== null &&
    3.17 +            (!node.classList || !node.classList.contains(className)));
    3.18 +
    3.19 +    return node;
    3.20 +};
    3.21 +
    3.22  BookmarkView.prototype.handleEvent = function (e) {
    3.23      var bookmarkletData;
    3.24      var parsedData;
    3.25 @@ -1417,6 +1425,25 @@
    3.26              this.notify(e.target.name,
    3.27                  getAncestorElementDatasetItem(e.target, 'tag'));
    3.28              break;
    3.29 +        default:
    3.30 +            if ((node = this.getAncestorClass(e.target, 'expander')) !== null) {
    3.31 +                if (node.dataset.expanderOpen !== undefined) {
    3.32 +                    delete node.dataset.expanderOpen;
    3.33 +                } else {
    3.34 +                    node.dataset.expanderOpen = '';
    3.35 +                }
    3.36 +            }
    3.37 +            break;
    3.38 +        }
    3.39 +        break;
    3.40 +    case 'keydown':
    3.41 +        if (e.keyCode === 32 &&
    3.42 +                (node = this.getAncestorClass(e.target, 'expander')) !== null) {
    3.43 +            if (node.dataset.expanderOpen !== undefined) {
    3.44 +                delete node.dataset.expanderOpen;
    3.45 +            } else {
    3.46 +                node.dataset.expanderOpen = '';
    3.47 +            }
    3.48          }
    3.49          break;
    3.50      case 'submit':