When tab is selected, show next tab.. if last tab selected, show first tab (polymer paper-tabs + scroll spy)

0
votes

I'm using 2 sets of polymer paper-tabs + the iron-scroll-spy custom element.

Paper Tabs uses the "iron-selector" element so that it can keep it's state. Iron Scroll Spy will animate scroll to the sections of the page when the tab is clicked and also update the paper tabs state when scrolled. Now I want to add in a "paper fab" button at the bottom that allows the user to "jump" to the next section.

My Goal:

✔ If "header tab 1" selected, show "footer tab 2"
✔ If "header tab 2" selected, show "footer tab 3"
✔ If "header tab 3" selected, show "footer tab 4"
✖ If "header tab 4" selected, show "footer tab 1"

Almost have it!...

demo: http://oneezy.com/demo/scroll-spy/index.html
jsfiddle: https://jsfiddle.net/oneeezy/c3ertupe

(I'm using polygit in jsfiddle, and I there is some weird jumpiness going on with that example..hence why I provided the first demo link).

By default the footer tabs are "gray". I'm using CSS pseudo selectors to turn the "selected" footer tab black...But I'm falling short. When "header tab 4" is selected it doesn't show "footer tab 1". This is the last piece of the puzzle. I'd like to use CSS if at all possible or use javascript declaratively.

What would be the best way to get this working?

Code:

    <base href="https://polygit.org/iron-scroll-spy+zecat+v1.0/components/">
    
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="iron-scroll-spy/iron-scroll-spy.html">
    <link rel="import" href="iron-scroll-spy/iron-scroll-spy-behavior.html">
    <link rel="import" href="app-layout/app-header/app-header.html">
    <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="app-layout/app-scroll-effects/app-scroll-effects.html">
    <link rel="import" href="paper-tabs/paper-tabs.html">
    <link rel="import" href="paper-tabs/paper-tab.html">
    <link rel="import" href="paper-fab/paper-fab.html">
    <link rel="import" href="iron-icons/hardware-icons.html">
    
    <!-- DOM Module
    ---------------------------------------->
    <dom-module id="scroll-spy-app">
    <template>
        <style>
            :host {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
                flex-direction: column;
                position: relative;
                height: 100%;
                padding-top: 150px;
            }
    
            /* Flex Classes */
            .flex-horizontal { display: -ms-flexbox; -ms-flex-direction: row; display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; }
            .flex-vertical   { display: -ms-flexbox; -ms-flex-direction: column; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; }
    
    
    
            /* HEADER TABS (normal order)
            ***************************************************************************************************************************************************************************/
            app-header { background: #009688; position: fixed; top: 0; left: 0; width: 100%; height: 128px; }
            app-header app-toolbar { background: #009688; }
            app-header app-toolbar.toolbar-top { position: relative; z-index: 1; }
            app-header app-toolbar.toolbar-bottom { position: relative; z-index: 2; }
    
    
    
            /* FOOTER TABS (Custom Order)
            ***************************************************************************************************************************************************************************/
            footer { position: fixed; bottom: 0; right: 0; width: 100%; z-index: 100; background: #ccc; }
            footer paper-tabs { position: relative; height: 70px; }
            footer paper-tabs paper-tab paper-fab { background: black; }
    
            /* Inactive */
            footer paper-tabs paper-tab                     { opacity: .25; }
            footer paper-tabs paper-tab:nth-of-type(1)      {  }        /* order: 4; */
            footer paper-tabs paper-tab:nth-of-type(2)      {  }        /* order: 1; */
            footer paper-tabs paper-tab:nth-of-type(3)      {  }        /* order: 2; */
            footer paper-tabs paper-tab:nth-of-type(4)      {  }        /* order: 3; */
    
            /* Selected */
            footer paper-tabs paper-tab.iron-selected {  }
    
            footer paper-tabs paper-tab.iron-selected:nth-of-type(1)      ~     paper-tab:nth-of-type(2)      { opacity: 1; display: block; }
            footer paper-tabs paper-tab.iron-selected:nth-of-type(2)      ~     paper-tab:nth-of-type(3)      { opacity: 1; display: block; }
            footer paper-tabs paper-tab.iron-selected:nth-of-type(3)      ~     paper-tab:nth-of-type(4)      { opacity: 1; display: block; }
            footer paper-tabs paper-tab.iron-selected:nth-of-type(4)      ~     paper-tab:nth-of-type(1)      { opacity: 1; display: block; }
    
    
    
            /* MAIN CONTENT (Scroll Spy)
            ***************************************************************************************************************************************************************************/
            section                          { min-height: 100vh; }
            section iron-scroll-spy          {  }
            section iron-scroll-spy div      { min-height: 100vh; padding: 250px 100px; border-bottom: 1px solid grey; }
    
        </style>
    
    
    
            <app-header condenses reveals fixed effects="waterfall">
                <app-toolbar class="toolbar-top">Iron Scroll Spy</app-toolbar>
    
                <app-toolbar class="toolbar-bottom" sticky>
                    <paper-tabs selected="{{scrollSelected}}">
                        <paper-tab>Tab 1</paper-tab>
                        <paper-tab>Tab 2</paper-tab>
                        <paper-tab>Tab 3</paper-tab>
                        <paper-tab>Tab 4</paper-tab>
                    </paper-tabs>
                </app-toolbar>
            </app-header>
    
            <section id="scrollTarget">
                <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
                  <div>
                    <h1>Section 1</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                  <div>
                    <h1>Section 2</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                  <div>
                    <h1>Section 3</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                  <div>
                    <h1>Section 4</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                </iron-scroll-spy>
            </section>
    
            <footer>
                <paper-tabs selected="{{scrollSelected}}" align-bottom="true">
                    <paper-tab tab="hidden">
                        Tab 1
                        <paper-fab icon="hardware:keyboard-arrow-up"></paper-fab>
                    </paper-tab>
    
                    <paper-tab tab="active">
                        Tab 2
                        <paper-fab icon="hardware:keyboard-arrow-down"></paper-fab>
                    </paper-tab>
    
                    <paper-tab tab="hidden">
                        Tab 3
                        <paper-fab icon="hardware:keyboard-arrow-down"></paper-fab>
                    </paper-tab>
    
                    <paper-tab tab="hidden">
                        Tab 4
                        <paper-fab icon="hardware:keyboard-arrow-down"></paper-fab>
                    </paper-tab>
                </paper-tabs>
            </footer>
    
    </template>
    
    <script>
      Polymer({
        is: 'scroll-spy-app',
    
        ready: function() {
          this.$.scrollSpy.scrollTarget;
        }
      });
    </script>
    
    </dom-module>
    
    
    
    
    <!-- Custom Element 
    ---------------------------------------->
    <scroll-spy-app></scroll-spy-app>
1
javascriptcsscss-selectorspolymerpolymer-1.0

1 Answers

1
votes

the ~ general sibling selector won't work the way you're trying to use. It's syntax A ~ B requires that B is after A in the DOM tree.

Here's an idea you can use to achieve what you want: put the value of scrollSelected into an attribute of some tag, for example footer:

<footer selected$="[[scrollSelected]]">

And then use the [attribute="value"] selector:

    footer[selected="0"] paper-tab:nth-of-type(2) { opacity: 1; display: block; }
    footer[selected="1"] paper-tab:nth-of-type(3) { opacity: 1; display: block; }
    footer[selected="2"] paper-tab:nth-of-type(4) { opacity: 1; display: block; }
    footer[selected="3"] paper-tab:nth-of-type(1) { opacity: 1; display: block; }

I've updated your jsfiddle with the above changes, check it out: https://jsfiddle.net/ncn99dpa/

EDIT

After some thinking - you might wanna write code that doesn't require a new selector in CSS each time you add a new paper tab. In that case, try this jsfiddle: https://jsfiddle.net/uwjdz7fg/

In there, I've made just one css rule, for a new class "x-focused" instead all those footer (...) paper-tab (...) rules, and I use an observer on the scrollSelected property to add that class to the proper element and remove from the previous one.