Merge pull request #2138 from shinyichen/fullTextLink2

src/config/shim.js

@@ -76,7 +76,7 @@
  * Do that by checking for the presence of the canonical URL ([ui|dev|qa].adsabs.harvard.edu)
  */
 (function checkIfProxied() {
-  const canonicalUrlPattern = /^(ui|qa|dev|devui)\.adsabs\.harvard\.edu$/;
+  const canonicalUrlPattern = /^(ui|qa|dev|devui|demo)\.adsabs\.harvard\.edu$/;
 
   // if test fails, it is proxied url, set a class on body element
   if (!canonicalUrlPattern.test(window.location.hostname)) {
@@ -90,14 +90,15 @@
  * changes, and return the correct canonical URL.
  */
 window.getCanonicalUrl = () => {
-  const canonicalUrlPattern = /^https:\/\/(ui|qa|dev|devui)\.adsabs\.harvard\.edu$/;
+  const canonicalUrlPattern = /^https:\/\/(ui|qa|dev|devui|demo)\.adsabs\.harvard\.edu$/;
 
   // URLs that could be rewritten by the proxy server
   const couldChangeUrls = [
     { env: 'ui', url: 'https://ui.adsabs.harvard.edu' },
     { env: 'qa', url: 'https://qa.adsabs.harvard.edu' },
     { env: 'dev', url: 'https://dev.adsabs.harvard.edu' },
     { env: 'devui', url: 'https://devui.adsabs.harvard.edu' },
+    { env: 'demo', url: 'https://demo.adsabs.harvard.edu' },
   ];
 
   const [changedUrl] = couldChangeUrls.filter(

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <base href="/" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="viewport" content="width=device-width,user-scalable=no" />
     <meta
       name="google-site-verification"
       content="XxQuw38lagr8-TgtCyhAMP_6ELS9dy35fgrqo9dxw3o"

src/js/apps/discovery/main.js

@@ -162,6 +162,15 @@ define(['config/discovery.config', 'module'], function(config, module) {
             });
           });
 
+          $('body').on('click', '#abs-full-txt-toggle', function() {
+            $('#resources-container').toggleClass('show');
+            if ($('#resources-container').hasClass('show')) {
+              $('#abs-full-txt-toggle').text('Hide Sources');
+            } else {
+              $('#abs-full-txt-toggle').text('Full Text Sources');
+            }
+          });
+
           // accessibility: skip to main content
           $('body').on('click', '#skip-to-main-content', function() {
             $('#main-content').trigger('focus');

src/js/wraps/abstract_page_manager/abstract-page-layout.html

@@ -6,9 +6,10 @@
             <div class="col-xs-12 col-sm-9 col-md-7 s-search-bar-row" id="search-bar-row" data-widget="SearchWidget"></div>
         </div>
     </div>
-    <div class="nav-button-container s-nav-button-container">
-       <button class="btn btn-primary-faded toggle-menu s-toggle-menu "> <i class="fa fa-bars" aria-hidden="true"></i> Show Menu </button>
-     </div>
+    <div class="nav-button-container s-nav-button-container" id="nav-button-container">
+      <button id="abs-nav-menu-toggle" class="btn btn-primary-faded toggle-menu s-toggle-menu "> <i class="fa fa-bars" aria-hidden="true"></i> Show Menu </button>
+      <button id="abs-full-txt-toggle" class="s-abs-full-txt-toggle-btn btn btn-primary-faded ">Full Text Sources</button>
+    </div>
     <div class="s-dynamic-page-body" id="dynamic-page-body">
         <div class="s-abstract-content">
 
@@ -34,9 +35,8 @@
                     </div>
                 </div>
             </div>
-
+            <div data-widget="ShowResources" class="col-sm-3" id="resources-container"/>
             <div class="s-right-col-container col-sm-3 col-lg-2 s-right-column" id="right-col-container">
-                <div data-widget="ShowResources"/>
                 <div data-widget="ShowLibraryAdd"/>
                 <div data-widget="ShowGraphicsSidebar"/>
                 <div data-widget="ShowAssociated"/>

src/js/wraps/abstract_page_manager/abstract_page_manager.js

@@ -27,6 +27,57 @@ define([
     initialize: function() {
       PageManagerController.prototype.initialize.apply(this, arguments);
       this.abstractTimer = new utils.TimingEvent('abstract-loaded', 'workflow');
+
+      // observe scrolling and apply sticky menu
+      this.observer = new IntersectionObserver(
+        () => {
+          this.adjustStickyElements();
+        },
+        { threshold: 0 }
+      );
+      this.observing = false;
+
+      // observe resizing and apply sticky menu
+      _.bindAll(this, 'adjustStickyElements');
+      $(window).on('resize', _.throttle(this.adjustStickyElements, 200));
+    },
+
+    // Make menu bar and menus sticky
+    adjustStickyElements: function() {
+      // if single column and nav buttons container reached top of viewport, float nav button container and menu
+      if (
+        window.matchMedia('(max-width: 788px)').matches &&
+        $('.s-search-bar-widget').get(0) &&
+        $('.s-search-bar-widget')
+          .get(0)
+          .getBoundingClientRect().bottom <= 0
+      ) {
+        var height = $('#nav-button-container').outerHeight(true);
+        this.stickElements(height);
+        // without this abstract content will disappear with above elements fixed
+        $('.s-abstract-content').attr('style', 'overflow: unset');
+      } else {
+        this.unStickElements();
+        $('.s-abstract-content').attr('style', 'overflow: hidden');
+      }
+    },
+
+    stickElements: function(top) {
+      // button container
+      $('#nav-button-container').addClass('sticky');
+      // menu
+      $('.s-nav-container').attr('style', `position:fixed;top:${top}px;left:0`);
+      // full text sources widget
+      $('#resources-container').attr(
+        'style',
+        `position:fixed;top:${top}px;left:100%`
+      );
+    },
+
+    unStickElements: function() {
+      $('#nav-button-container').removeClass('sticky');
+      $('.s-nav-container').attr('style', '');
+      $('#resources-container').attr('style', '');
     },
 
     createView: function(options) {
@@ -87,6 +138,20 @@ define([
     },
 
     show: function(pageName) {
+      // hide drawers
+      $('#abs-full-txt-toggle').text('Full Text Sources');
+      $('#abs-nav-menu-toggle').html(
+        '<i class="fa fa-bars" aria-hidden="true"></i> Show Menu'
+      );
+      $('.s-nav-container').removeClass('show');
+      $('#resources-container').removeClass('show');
+
+      // Observe search bar
+      if (!this.observing && document.querySelector('.s-search-bar-widget')) {
+        this.observer.observe(document.querySelector('.s-search-bar-widget'));
+        this.observing = true;
+      }
+
       var ret = PageManagerController.prototype.show.apply(this, arguments);
       var href = this.getCurrentQuery().url();
 

src/styles/sass/ads-sass/abstract-page-widgets.scss

@@ -3,6 +3,14 @@ $twitter-color: rgb(64, 153, 255);
 $mendeley-color: rgb(60, 30, 33);
 $sciencewise-color: rgb(179, 27, 27);
 
+.s-abs-full-txt-toggle-btn {
+  display: none;
+  margin: 10px 10px;
+  @media screen and (max-width: $screen-xs-max) {
+    display: unset;
+  }
+}
+
 .facebook-icon {
   @extend .fa;
   @extend .fa-2x;
@@ -114,6 +122,7 @@ $sciencewise-color: rgb(179, 27, 27);
 
 .s-abstract-content {
   overflow: hidden;
+  position: relative;
 }
 
 .s-abstract-content {
@@ -285,3 +294,23 @@ $sciencewise-color: rgb(179, 27, 27);
     flex: 0;
   }
 }
+
+#resources-container {
+  transition: transform 0.5s ease-in-out;
+  padding-left: 0;
+  padding-right: 0;
+
+  @media (max-width: $screen-xs-max) {
+    position: absolute;
+    width: 100%;
+    left: 100%;
+    top: 0;
+    z-index: $z-index-4;
+    border-right: 1px solid $gray-lighter;
+
+    &.show {
+      transform: translate(-100%);
+    }
+  }
+
+}

src/styles/sass/ads-sass/general-components.scss

@@ -1,7 +1,3 @@
-#app-container {
-  will-change: transform;
-}
-
 #body-template-container {
   height: 100%;
 }

src/styles/sass/ads-sass/page-managers.scss

@@ -237,6 +237,10 @@ Styles for Abstract Page
     margin: 0px 20px 0px 20px;
   }
 
+  @media only screen and (max-width: $screen-xs-max) {
+    font-size: large;
+  }
+
   li {
     margin: 0 0 1% 6%;
   }

src/styles/sass/ads-sass/sidebar.scss

@@ -3,11 +3,23 @@ $sidenav-background: $body-bg;
 .s-nav-button-container {
   border-bottom: 1px solid darken($gray-lighter, 10%);
   padding-left: 1rem;
+  padding-right: 1rem;
+  display: flex;
+  justify-content: space-between;
+
   @media only screen and (min-width: $screen-md-min) {
     display: none;
   }
 }
 
+#nav-button-container.sticky {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 20;
+  background-color: white;
+}
+
 .s-toggle-menu {
   display: block;
   @media only screen and (min-width: $screen-md-min) {

src/styles/sass/ads-sass/widget.scss

@@ -70,7 +70,7 @@ $base-loading-text-size: 1em;
     color: #909090;
   }
 }
-div[data-widget="ShowPaperExport"] .close-circle {
+div[data-widget='ShowPaperExport'] .close-circle {
   display: none;
 }
 
@@ -89,7 +89,6 @@ div[data-widget="ShowPaperExport"] .close-circle {
   padding-top: 26px;
 }
 
-
 // Resources Widget
 .resources__container {
   background-color: white;
@@ -128,6 +127,10 @@ div[data-widget="ShowPaperExport"] .close-circle {
 
   & .resources__content__links {
     font-size: 1em;
+
+    @media screen and (max-width: $screen-xs-max) {
+      font-size: x-large;
+    }
   }
 
   & .resources__content__link:hover {
@@ -142,6 +145,9 @@ div[data-widget="ShowPaperExport"] .close-circle {
 
   & .resources__content__link {
     position: relative;
+    @media screen and (max-width: $screen-xs-max) {
+      margin: 10px;
+    }
   }
 
   & .resources__content__link.unlock::after {