addons/firefox-addons/set-aside

changeset 2:49ec0da1e698

Replace tab list scroll bar with scroll buttons
author Guido Berhoerster <guido+set-aside@berhoerster.name>
date Wed Nov 21 11:39:07 2018 +0100 (18 months ago)
parents b0827360b8e4
children 48b036902118
files sidebar/images/scroll-arrow.svg sidebar/js/tab-collection-manager.js sidebar/style/tab-collection-manager.css sidebar/tab-collection-manager.html
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/sidebar/images/scroll-arrow.svg	Wed Nov 21 11:39:07 2018 +0100
     1.3 @@ -0,0 +1,11 @@
     1.4 +<!--
     1.5 +Copyright (C) 2018 Guido Berhoerster <guido+set-aside@berhoerster.name>
     1.6 +
     1.7 +This Source Code Form is subject to the terms of the Mozilla Public
     1.8 +License, v. 2.0. If a copy of the MPL was not distributed with this
     1.9 +file, You can obtain one at http://mozilla.org/MPL/2.0/.
    1.10 +-->
    1.11 +<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    1.12 +  <path fill="none" stroke="#0c0c0d" stroke-width="2" stroke-linecap="round"
    1.13 +  d="m18 2l-12 10l12 10"/>
    1.14 +</svg>
     2.1 --- a/sidebar/js/tab-collection-manager.js	Mon Nov 19 17:26:17 2018 +0100
     2.2 +++ b/sidebar/js/tab-collection-manager.js	Wed Nov 21 11:39:07 2018 +0100
     2.3 @@ -38,6 +38,8 @@
     2.4  
     2.5          document.body.addEventListener('click', this);
     2.6  
     2.7 +        window.addEventListener('optimizedResize', this);
     2.8 +
     2.9          this.isInitialized = true;
    2.10      }
    2.11  
    2.12 @@ -104,6 +106,7 @@
    2.13                  'to tab collections');
    2.14          this.tabCollectionsElement
    2.15                  .prepend(this.createTabCollectionNode(tabCollection));
    2.16 +        this.handleResize();
    2.17      }
    2.18  
    2.19      replaceTabCollection(tabCollection) {
    2.20 @@ -111,6 +114,7 @@
    2.21          this.tabCollectionsElement.querySelector(`[data-tab-collection-uuid=` +
    2.22                  `"${tabCollection.uuid}"]`)
    2.23                  .replaceWith(this.createTabCollectionNode(tabCollection));
    2.24 +        this.handleResize();
    2.25      }
    2.26  
    2.27      removeTabCollection(tabCollectionUuid) {
    2.28 @@ -158,6 +162,31 @@
    2.29          this.sortTabCollections();
    2.30      }
    2.31  
    2.32 +    handleTabCollectionChanged(tabCollectionContainerElement) {
    2.33 +        let tabsElement = tabCollectionContainerElement
    2.34 +                .querySelector('.tab-collection-tabs');
    2.35 +        let scrollLeftElement = tabCollectionContainerElement
    2.36 +                .querySelector('.scroll-left');
    2.37 +        let scrollRightElement = tabCollectionContainerElement
    2.38 +                .querySelector('.scroll-right');
    2.39 +        if (tabsElement.scrollWidth > tabsElement.clientWidth) {
    2.40 +            scrollLeftElement.classList.add('scroll-visible');
    2.41 +            scrollRightElement.classList.add('scroll-visible');
    2.42 +        } else {
    2.43 +            scrollLeftElement.classList.remove('scroll-visible');
    2.44 +            scrollRightElement.classList.remove('scroll-visible');
    2.45 +        }
    2.46 +    }
    2.47 +
    2.48 +    handleResize() {
    2.49 +        let tabCollectionContainerElements =
    2.50 +                document.querySelectorAll('.tab-collection-tabs-container');
    2.51 +        for (let tabCollectionContainerElement of
    2.52 +                tabCollectionContainerElements) {
    2.53 +            this.handleTabCollectionChanged(tabCollectionContainerElement);
    2.54 +        }
    2.55 +    }
    2.56 +
    2.57      handleEvent(ev) {
    2.58          console.log('DOM event', ev);
    2.59          if (ev.type === 'click') {
    2.60 @@ -191,6 +220,19 @@
    2.61                      tabCollectionUuid,
    2.62                      tabUuid
    2.63                  });
    2.64 +            } else if (ev.target.classList.contains('tabs-scroll-button')) {
    2.65 +                // scroll tab list
    2.66 +                let tabsElement = ev.target
    2.67 +                        .closest('.tab-collection-tabs-container')
    2.68 +                        .querySelector('.tab-collection-tabs');
    2.69 +                if (ev.target.classList.contains('scroll-left')) {
    2.70 +                    tabsElement.scrollLeft = Math.max(tabsElement.scrollLeft -
    2.71 +                            tabsElement.clientWidth * .75, 0);
    2.72 +                } else {
    2.73 +                    tabsElement.scrollLeft = Math.min(tabsElement.scrollLeft +
    2.74 +                            tabsElement.clientWidth * .75,
    2.75 +                            tabsElement.scrollLeftMax);
    2.76 +                }
    2.77              } else {
    2.78                  let tabItemElement = ev.target.closest('.tab-item');
    2.79                  if (tabItemElement !== null) {
    2.80 @@ -207,6 +249,9 @@
    2.81                      });
    2.82                  }
    2.83              }
    2.84 +        } else if (ev.type === 'optimizedResize') {
    2.85 +            // window has been resized
    2.86 +            this.handleResize();
    2.87          }
    2.88      }
    2.89  }
    2.90 @@ -219,5 +264,23 @@
    2.91          return;
    2.92      }
    2.93  
    2.94 +    function throttleResize(type, name, obj) {
    2.95 +        obj = obj || window;
    2.96 +        var isRunning = false;
    2.97 +        var func = function() {
    2.98 +            if (isRunning) {
    2.99 +                return;
   2.100 +            }
   2.101 +
   2.102 +            isRunning = true;
   2.103 +            requestAnimationFrame(function() {
   2.104 +                obj.dispatchEvent(new CustomEvent(name));
   2.105 +                isRunning = false;
   2.106 +            });
   2.107 +        };
   2.108 +        obj.addEventListener(type, func);
   2.109 +    };
   2.110 +    throttleResize('resize', 'optimizedResize');
   2.111 +
   2.112      tabManager = new TabManager();
   2.113  });
     3.1 --- a/sidebar/style/tab-collection-manager.css	Mon Nov 19 17:26:17 2018 +0100
     3.2 +++ b/sidebar/style/tab-collection-manager.css	Wed Nov 21 11:39:07 2018 +0100
     3.3 @@ -18,6 +18,14 @@
     3.4    --font-size-body-20: 15px;
     3.5    --font-size-body-10: 13px;
     3.6  
     3.7 +  --scroll-button-image-width: 24px;
     3.8 +  --scroll-button-image-height: var(--scroll-button-image-width);
     3.9 +  --scroll-button-padding: 4px;
    3.10 +  --scroll-button-width: calc(2 * var(--scroll-button-padding) +
    3.11 +      var(--scroll-button-image-width));
    3.12 +  --scroll-button-height: var(--scroll-button-width);
    3.13 +  --scroll-button-highlight: var(--grey-90-a10);
    3.14 +
    3.15    --thumbnail-width: 224px;
    3.16    --thumbnail-height: 128px;
    3.17    --thumbnail-shadow: var(--box-shadow-border), 0 1px 4px var(--grey-90-a30);
    3.18 @@ -112,7 +120,6 @@
    3.19    padding-left: 0;
    3.20    margin: 0;
    3.21    list-style: none;
    3.22 -  overflow: auto;
    3.23  }
    3.24  
    3.25  .tab-collection-actions {
    3.26 @@ -146,8 +153,37 @@
    3.27    text-decoration: underline;
    3.28  }
    3.29  
    3.30 +.tabs-scroll-button {
    3.31 +  visibility: hidden;
    3.32 +  position: absolute;
    3.33 +  margin-top: calc(var(--remove-tab-overlap) + var(--thumbnail-height) / 2 -
    3.34 +      var(--scroll-button-height) / 2);
    3.35 +  width: var(--scroll-button-width);
    3.36 +  height: var(--scroll-button-height);
    3.37 +  background: url(../images/scroll-arrow.svg)
    3.38 +      var(--scroll-button-padding)/var(--scroll-button-image-width) no-repeat
    3.39 +      var(--scroll-button-highlight);
    3.40 +  border-radius: 4px;
    3.41 +  z-index: 999;
    3.42 +  transition: visibility 300ms;
    3.43 +}
    3.44 +
    3.45 +.tab-collection-tabs-container:hover .tabs-scroll-button.scroll-visible {
    3.46 +  visibility: visible;
    3.47 +}
    3.48 +
    3.49 +.tabs-scroll-button.scroll-left {
    3.50 +  left: 0;
    3.51 +}
    3.52 +
    3.53 +.tabs-scroll-button.scroll-right {
    3.54 +  transform: scaleX(-1);
    3.55 +  right: 0;
    3.56 +}
    3.57 +
    3.58  .tab-collection-tabs {
    3.59 -  margin: 4px 0 0 0;
    3.60 +  overflow: hidden;
    3.61 +  scroll-behavior: smooth;
    3.62  }
    3.63  
    3.64  .tab-item {
     4.1 --- a/sidebar/tab-collection-manager.html	Mon Nov 19 17:26:17 2018 +0100
     4.2 +++ b/sidebar/tab-collection-manager.html	Wed Nov 21 11:39:07 2018 +0100
     4.3 @@ -23,8 +23,12 @@
     4.4            <li><div class="restore-tab-collection" title=""></div></li>
     4.5            <li><div class="remove-tab-collection" title=""></div></li>
     4.6          </ul>
     4.7 -        <ul class="tab-collection-tabs">
     4.8 -        </ul>
     4.9 +        <div class="tab-collection-tabs-container">
    4.10 +          <div class="tabs-scroll-button scroll-left scroll-invisible"></div>
    4.11 +          <div class="tabs-scroll-button scroll-right scroll-invisible"></div>
    4.12 +          <ul class="tab-collection-tabs">
    4.13 +          </ul>
    4.14 +        </div>
    4.15        </div>
    4.16      </template>
    4.17      <template id="tab-item-template">