<commit_before><dom-module id="settings-page">
  <style>
   :host {
     --paper-toggle-button-checked-ink-color: var(--trek-highlight-color);
     --paper-toggle-button-checked-button-color: var(--trek-highlight-color);
     --paper-toggle-button-checked-bar-color: var(--trek-highlight-color);
   }

   paper-material{
     background-color: var(--trek-white-color);
     margin: 16px;     
   }

   .content {
     padding: 16px;
   }

   .row {
     margin-left: 16px;
     margin-top: 16px;
     margin-right: 16px;
   }

   h3 {
     background-color: var(--trek-header-color);
     font-weight: 300;
     margin-top: 0px;
     margin-bottom: 0px;
     padding: 16px;
   }

  </style>

  <template>
    <paper-material elevation="2">
      <h3 id="header" class="flex">Generate Random Episodes From</h3>
      <section id="content" class="content">
        <template id="keys" is="dom-repeat" items="[[_keys]]">
          <div class="layout center horizontal row">
            <span class="series flex">[[item.displayName]]</span>
            <paper-toggle-button class="toggle" id$="[[item.key]]" checked="[[item.checked]]" on-change="_onChange"></paper-toggle-button>
          </div>
        </template>
      </section>
    </paper-material>
  </template>
</dom-module>
<script>
 Polymer({
   is: "settings-page",

   behaviors: [
     Polymer.NeonSharedElementAnimatableBehavior
   ],
   
   properties: {

     sharedElements: {
       type: Object,
       value: function() {
         return {
           'genHero': this.$.header,
           'genBody': this.$.content
         }
       }
     },
     
     animationConfig: {
       type: Object,
       value: function() {
         return {
             'entry':
             [
               {
                 name: 'hero-animation',
                 id: 'genBody',
                 toPage: this
               },
               {
                 name: 'hero-animation',
                 id: 'genHero',
                 toPage: this,
                 timing: {
                   delay: 75
                 }
               },
               {
                 name: 'cascaded-animation',
                 animation: 'slide-from-left-animation',
                 timing: {
                   delay: 125
                 }
               },
               {
                 name: 'cascaded-animation',
                 animation: 'scale-up-animation',
                 timing: {
                   delay: 150
                 }
               }
             ],
             'exit':
             [
               {
                 name: 'cascaded-animation',
                 animation: 'scale-down-animation',
               },
               {
                 name: 'cascaded-animation',
                 animation: 'slide-left-animation',
                 timing: {
                   delay: 100
                 }
               },               
               {
                 name: 'fade-out-animation',
                 node: this,
                 timing: {
                   delay: 150
                 }
               },
             ]
         }
       }
     },
     
     _keys: {
       type: Array,
       notify: true,
       value: function(){
         return [
           {
             key: "original",
             displayName: "The Original",
             checked: true
           },
           {
             key: "tng",
             displayName: "The Next Generation",
             checked: true
           },
           {
             key:  "ds9",
             displayName: "Deep Space Nine",
             checked: true
           },
           {
             key:  "voyager",
             displayName: "Voyager",
             checked: true
           },
           {
             key:  "enterprise",
             displayName: "Enterprise",
             checked: true
           }
         ];
       }
     },

     /* data-binding is one-way, upward */
     settings: {
       type: Object,
       notify: true,
       readOnly: true,
       value: function(){
         return {
           random:{ /* only random settings for now */
                    original: true,
                    tng: true,
                    ds9: true,
                    voyager: true,
                    enterprise: true
           }
         };
       }
     }
   },
   
   _onChange: function(e){
     var id = e.srcElement.id;
     var checked = e.srcElement.checked;
     this.settings.random[id] = checked;
     console.log("settings: ", this.settings);
     window.localStorage[id] = checked;
   },

   created: function(){
     if (window.localStorage["original"] === undefined){
       var keys = ["original", "tng", "ds9", "voyager", "enterprise"];
       console.log("app first load");
       for (var i in keys){
         var key = keys[i];
         window.localStorage[key] = true;
         console.log("loop: ", key, window.localStorage[key]);               }
     }
   },

   ready: function(){
     var i = 0;
     for (var series in this.settings.random){
       var checked = window.localStorage[series] == "true";
       this.settings.random[series] = checked;
       this._keys[i].checked = checked;
       i++;
     }
     //     console.log("ready settings-page init: ", this.settings);
     //     console.log("_keys: ", this._keys);
   },

   attached: function(){
     this.async(function(){
       var toggles = Polymer.dom(this.root).querySelectorAll('.toggle');
       var seriesNames = Polymer.dom(this.root).querySelectorAll('.series');       
       console.log("settings-page ATTACHED", toggles, seriesNames);
       this.animationConfig.entry[3].nodes = toggles;
       this.animationConfig.entry[2].nodes = seriesNames;
       this.animationConfig.exit[0].nodes = toggles;
       this.animationConfig.exit[1].nodes = seriesNames;
     }, 0);
   }
   

 });

</script>
<commit_msg>re-added the hero animation with a delay to give a nice button effect when switching to settings-page;<commit_after><dom-module id="settings-page">
  <style>
   :host {
     --paper-toggle-button-checked-ink-color: var(--trek-highlight-color);
     --paper-toggle-button-checked-button-color: var(--trek-highlight-color);
     --paper-toggle-button-checked-bar-color: var(--trek-highlight-color);
   }

   paper-material{
     background-color: var(--trek-white-color);
     margin: 16px;     
   }

   .content {
     padding: 16px;
   }

   .row {
     margin-left: 16px;
     margin-top: 16px;
     margin-right: 16px;
   }

   h3 {
     background-color: var(--trek-header-color);
     font-weight: 300;
     margin-top: 0px;
     margin-bottom: 0px;
     padding: 16px;
   }

  </style>

  <template>
    <paper-material elevation="2">
      <h3 id="header" class="flex">Generate Random Episodes From</h3>
      <section id="content" class="content">
        <template id="keys" is="dom-repeat" items="[[_keys]]">
          <div class="layout center horizontal row">
            <span class="series flex">[[item.displayName]]</span>
            <paper-toggle-button class="toggle" id$="[[item.key]]" checked="[[item.checked]]" on-change="_onChange"></paper-toggle-button>
          </div>
        </template>
      </section>
    </paper-material>
  </template>
</dom-module>
<script>
 Polymer({
   is: "settings-page",

   behaviors: [
     Polymer.NeonSharedElementAnimatableBehavior
   ],
   
   properties: {

     sharedElements: {
       type: Object,
       value: function() {
         return {
           'genHero': this.$.header,
           'genBody': this.$.content
         }
       }
     },
     
     animationConfig: {
       type: Object,
       value: function() {
         return {
             'entry':
             [
               {
                 name: 'hero-animation',
                 id: 'genBody',
                 toPage: this
               },
               {
                 name: 'hero-animation',
                 id: 'genHero',
                 toPage: this,
                 timing: {
                   delay: 75
                 }
               },
               {
                 name: 'cascaded-animation',
                 animation: 'slide-from-left-animation',
                 timing: {
                   delay: 125
                 }
               },
               {
                 name: 'cascaded-animation',
                 animation: 'scale-up-animation',
                 timing: {
                   delay: 150
                 }
               }
             ],
             'exit':
             [
               {
                 name: 'cascaded-animation',
                 animation: 'scale-down-animation',
               },
               {
                 name: 'cascaded-animation',
                 animation: 'slide-left-animation',
                 timing: {
                   delay: 100
                 }
               },               
               {
                 name: 'fade-out-animation',
                 node: this,
                 timing: {
                   delay: 150
                 }
               },
               {
                 name: 'hero-animation',
                 id: 'genHero',
                 fromPage: this,
                 timing: {
                   delay: 150
                 }
               },

             ]
         }
       }
     },
     
     _keys: {
       type: Array,
       notify: true,
       value: function(){
         return [
           {
             key: "original",
             displayName: "The Original",
             checked: true
           },
           {
             key: "tng",
             displayName: "The Next Generation",
             checked: true
           },
           {
             key:  "ds9",
             displayName: "Deep Space Nine",
             checked: true
           },
           {
             key:  "voyager",
             displayName: "Voyager",
             checked: true
           },
           {
             key:  "enterprise",
             displayName: "Enterprise",
             checked: true
           }
         ];
       }
     },

     /* data-binding is one-way, upward */
     settings: {
       type: Object,
       notify: true,
       readOnly: true,
       value: function(){
         return {
           random:{ /* only random settings for now */
                    original: true,
                    tng: true,
                    ds9: true,
                    voyager: true,
                    enterprise: true
           }
         };
       }
     }
   },
   
   _onChange: function(e){
     var id = e.srcElement.id;
     var checked = e.srcElement.checked;
     this.settings.random[id] = checked;
     console.log("settings: ", this.settings);
     window.localStorage[id] = checked;
   },

   created: function(){
     if (window.localStorage["original"] === undefined){
       var keys = ["original", "tng", "ds9", "voyager", "enterprise"];
       console.log("app first load");
       for (var i in keys){
         var key = keys[i];
         window.localStorage[key] = true;
         console.log("loop: ", key, window.localStorage[key]);               }
     }
   },

   ready: function(){
     var i = 0;
     for (var series in this.settings.random){
       var checked = window.localStorage[series] == "true";
       this.settings.random[series] = checked;
       this._keys[i].checked = checked;
       i++;
     }
     //     console.log("ready settings-page init: ", this.settings);
     //     console.log("_keys: ", this._keys);
   },

   attached: function(){
     this.async(function(){
       var toggles = Polymer.dom(this.root).querySelectorAll('.toggle');
       var seriesNames = Polymer.dom(this.root).querySelectorAll('.series');       
       console.log("settings-page ATTACHED", toggles, seriesNames);
       this.animationConfig.entry[3].nodes = toggles;
       this.animationConfig.entry[2].nodes = seriesNames;
       this.animationConfig.exit[0].nodes = toggles;
       this.animationConfig.exit[1].nodes = seriesNames;
     }, 0);
   }
   

 });

</script>

{'fraction_non_alphanumeric': 0.12906159570070277, 'fraction_numerical': 0.007523770152955767, 'mean_word_length': 1.2541930674617965, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4545799', 'n_tokens_mistral': 3375, 'n_tokens_neox': 3267, 'n_words': 639}