Wenn die Registerkarte ausgewählt ist, zeigen Sie die nächste Registerkarte .. wenn die letzte Registerkarte ausgewählt ist, zeige erste Registerkarte (Polymerpapier-Tabs + Scroll-Spion)

Question

Ich verwende 2 Sätze Polymer Papier-Tabs + die Eisen-Scroll-Spion benutzerdefinierte Element .

Paper Tabs verwendet das Element "Iron-Selector", damit es seinen Status beibehalten kann. Iron Scroll Spy animiert das Scrollen zu den Abschnitten der Seite, wenn auf die Registerkarte geklickt wird, und aktualisiert auch den Status der Papierregisterkarten beim Scrollen. Jetzt möchte ich einen "Paperfab" -Button an der Unterseite hinzufügen, der es dem Benutzer ermöglicht, zum nächsten Abschnitt zu springen.

---

Mein Ziel:

✔ Wenn "Header Tab 1" ausgewählt, show "Fußzeile Tab 2"
✔ Wenn "Header Tab 2" ausgewählt, show "Fußzeile Register 3"
✔ Wenn "Header Tab 3" ausgewählt, show "Fußzeile Tab 4"
✖ Wenn "Kopflasche 4" ausgewählt, show "Fußzeile Tab 1"

---

Fast es haben ...

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

(Ich bin polygit in jsfiddle verwenden, und ich gibt es einige seltsame Sprunghaftigkeit los mit diesem Beispiel ... warum habe ich den ersten Demo-Link zur Verfügung gestellt).

Standardmäßig sind die Fußzeilentabellen "grau". Ich benutze CSS-Pseudo-Selektoren, um den "ausgewählten" Footer-Tab schwarz zu machen ... Aber ich komme zu kurz. Wenn "Kopfzeilenreiter 4" ausgewählt ist, wird "Fußzeilenreiter 1" nicht angezeigt. Dies ist das letzte Puzzleteil. Ich würde gerne CSS verwenden, wenn überhaupt möglich oder JavaScript deklarativ verwenden.

Was wäre der beste Weg, um dies zum Laufen zu bringen?

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>

Answer 1

die ~ allgemeine Geschwister-Selektor wird nicht so funktionieren, die Sie zu verwenden versuchen. Es ist Syntax A ~ B erfordert, dass B nach A in der DOM-Struktur ist.

Hier ist eine Idee, die Sie erreichen können, was Sie wollen: einiger Tag den Wert scrollSelected in ein Attribut setzen, zum Beispiel Fußzeile:

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

Und dann mit den Tasten [Attribut = „Wert“ Selektor]:

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; } 

ich Ihre jsfiddle mit den oben genannten Änderungen aktualisiert haben, check it out: https://jsfiddle.net/ncn99dpa/

Nach einigem Nachdenken - möchten Sie vielleicht Code schreiben, der bei jedem Hinzufügen eines neuen Papierregisters keinen neuen Selektor in CSS erfordert. In diesem Fall, versuchen Sie diese jsfiddle: https://jsfiddle.net/uwjdz7fg/

In dort habe ich nur eine CSS-Regel, für eine neue Klasse "x-fokussiert" stattdessen alle diese Fußzeile (...) Papier-Tab (...) Regeln, und ich verwende einen Beobachter für die Eigenschaft scrollSelected, um diese Klasse dem richtigen Element hinzuzufügen und aus dem vorherigen Element zu entfernen.