downloads area styling, edits to scroll-to/show JS

fecgov · Feb 17, 2020 · 9dd0e2d · 9dd0e2d
1 parent 69b30e2
commit 9dd0e2d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 15 deletions.
diff --git a/fec/data/templates/widgets/pres-finance-map.jinja b/fec/data/templates/widgets/pres-finance-map.jinja
@@ -130,9 +130,13 @@
         {# <a class="TODO-button--standard button--table js-browse-pres-finance-map" href="TODO-/data/receipts/individual-contributions">Browse TODO stuff</a> #}
     </div>
     <div id="downloads-wrapper">
-      <div>Export raising data</div>
-      <div><a href="" data-stateID="ALL">All states</a></div>
-      <div>
+      <header class="heading--main content__section--extra">
+        <h2>
+         Export raising data
+        </h2>
+      </header>
+      <div class="u-margin--bottom"><a href="" data-stateID="ALL">All states</a></div>
+      <div class=downloads-links>
         <a href="" data-stateID="AL">AL</a>
         <a href="" data-stateID="AK">AK</a>
         <a href="" data-stateID="AZ">AZ</a>

diff --git a/fec/fec/static/js/widgets/pres-finance-map-box.js b/fec/fec/static/js/widgets/pres-finance-map-box.js
@@ -1165,25 +1165,45 @@ PresidentialFundsMap.prototype.refreshOverlay = function() {
 PresidentialFundsMap.prototype.handleExportRaisingClick = function(e) {
   console.log('handleExportRaisingClick(): ', e);
   e.preventDefault();
+  let instance = this;
 
-  this.downloadsWrapper.scrollIntoView({
-    behavior: 'smooth',
-    block: 'center',
-    inline: 'nearest'
-  });
+  /* Robert: Does it matter if this a const or a named function?
+  eg: function openDownloads() VS. const openDownloads = function()
+  */
 
-  $(this.downloadsWrapper).animate(
+  const openDownloads = function(){
+    console.log('callback')
+
+    $(instance.downloadsWrapper).animate(
     {
-      height: $(this.downloadsWrapper).get(0).scrollHeight
+      height: $(instance.downloadsWrapper).get(0).scrollHeight
     },
     1000,
-    function() {
+     function() {
       $(this).height('auto');
+     })
     }
-  );
 
-  // TODO: show {selector_downloadsWrapper}
-  // TODO: animate the page scroll to the downloads section
+  // Wait until the export area is in view before opening
+  window.onscroll = function() {
+    var wS = this.scrollY,
+       hT = instance.downloadsWrapper.getBoundingClientRect().top + wS,
+       hH = instance.downloadsWrapper.offsetHeight,
+       wH = window.innerHeight;
+    if (wS > (hT+hH-wH)){
+     openDownloads()
+    }
+  };
+  //scroll to export area
+  this.downloadsWrapper.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest'
+    });
+
+
+  // TODO-done: show {selector_downloadsWrapper}
+  // TODO-done: animate the page scroll to the downloads section
   // TODO then: Hide {selector_downloadsWrapper} when we're no longer interested in the raising downloads
 };
 

diff --git a/fec/fec/static/scss/widgets/pres-finance-map.scss b/fec/fec/static/scss/widgets/pres-finance-map.scss
@@ -518,10 +518,30 @@ $info-circle: 'data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2
     width: 25%;
   }
   #downloads-wrapper {
-    margin-left: 25%;
     width: 50%;
+    margin-left:25%;
   }
 
+  .downloads-links {
+    display:grid;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    grid-auto-rows: 1fr;
+    border-top: 1px solid $gray-dark;
+    border-bottom: 1px solid $gray-dark;
+
+      a {
+        padding: 1rem;
+        border: 1px solid $gray-light;
+        text-align: center;
+
+        &:hover {
+          background:$gray-light;
+        };
+      }
+
+  }
+
+
 }