Twitter bar (fixes #32) (#49)

* initial for flyout twitter bar

* Change to position fixed

* Use twitter blue from branding data

* version bump

* placeholder for continuing social handles

* pass one embed twitter

* change footer layout on small screens

* fix overflow behaviour for tweets

* fix unending spinner when preloading search

* fix header bar for mobile while logged in

* further improve responsive layout

* help layout of icons on screen on mobile

* Prep breaking terminal into a seperate file for more optimized load

* Collapse all options on mobile by default

* really pull terminal into an aysnc load to reduce initial load size

* re-enable a more mobile-friendly footer

Gruntfile.coffee

@@ -110,8 +110,8 @@ module.exports = (grunt) ->
             fileId = fileNameArr.join(".")
             "js/maps/#{fileId}.js.map"
         files:
-          "js/combined.min.js":["js/c.js","js/admin.js", "js/charts.js","bower_components/purl/purl.js","bower_components/xmlToJSON/lib/xmlToJSON.js","bower_components/jquery-cookie/jquery.cookie.js"]
-          "js/app.min.js":["js/c.js","js/admin.js", "js/charts.js"]
+          "js/combined.min.js":["js/c.js","js/admin.js", "js/charts.js","js/download.js", "js/terminal.js", "bower_components/purl/purl.js","bower_components/xmlToJSON/lib/xmlToJSON.js","bower_components/jquery-cookie/jquery.cookie.js"]
+          "js/app.min.js":["js/c.js","js/admin.js", "js/charts.js", "js/download.js", "js/terminal.js"]
       dist:
         options:
           sourceMap:true
@@ -138,6 +138,7 @@ module.exports = (grunt) ->
         files:
           "js/c.min.js":["js/c.js"]
           "js/download.min.js":["js/download.js"]
+          "js/terminal.min.js":["js/terminal.js"]
           "js/admin.min.js":["js/admin.js"]
           "js/serviceWorker.min.js":["js/serviceWorker.js"]
           "js/charts.min.js":["js/charts.js"]
@@ -190,7 +191,8 @@ module.exports = (grunt) ->
           sourceMapDir: "js/maps"
           sourceMap: true
         files:
-          "js/c.js":["coffee/core.coffee","coffee/search.coffee","coffee/terminal.coffee"]
+          "js/c.js":["coffee/core.coffee","coffee/search.coffee"]
+          "js/terminal.js": ["coffee/terminal.coffee"]
           "js/download.js":["coffee/download.coffee"]
           "js/admin.js":"coffee/admin.coffee"
           "js/serviceWorker.js":["coffee/core-worker.coffee","coffee/serviceWorker.coffee"]

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ASM Mammal Database",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "homepage": "https://github.com/tigerhawkvok/asm-mammal-database",
   "authors": [
     "Philip Kahn <[email protected]>"

coffee/admin.coffee

@@ -103,6 +103,7 @@ verifyLoginCredentials = (callback) ->
     console.log "Server called back from login credential verification", result
     if result.status is true
       $(".logged-in-values").removeAttr "hidden"
+      $(".logged-in-hidden").attr "hidden", "hidden"
       cookieFullName = "#{uri.domain}_fullname"
       $("header .fill-user-fullname").text $.cookie cookieFullName
       if typeof callback is "function"

coffee/core.coffee

@@ -23,6 +23,17 @@ locationData.params =
   enableHighAccuracy: true
 locationData.last = undefined
 
+
+unless typeof window._asm is "object"
+  window._asm = new Object()
+
+_asm.socialHandles =
+  twitter: "mammalogists"
+
+# Breakpoint in px
+_asm.mobileBreakpoint = 767
+
+
 isBool = (str) -> str is true or str is false
 
 isEmpty = (str) -> not str or str.length is 0
@@ -1723,6 +1734,55 @@ delayPolymerBind = (selector, callback, iter = 0) ->
   false
 
 
+
+loadSocialMediaSlideoutBar = (handles, selector = "#social-menu", appendTo = "main") ->
+  ###
+  #
+  # @param obj handles -> an object with keys as service and value as handle
+  ###
+  toggleSocialSlideoutBar = ->
+    if $(selector).hasClass "out"
+      $(selector)
+      .removeClass "out"
+      .addClass "in"
+    else
+      $(selector)
+      .removeClass "in"
+      .addClass "out"
+    false
+  window.toggleSocialSlideoutBar = toggleSocialSlideoutBar
+  unless $(selector).exists()
+    contentHtml = ""
+    for service, handle of handles
+      switch service
+        when "twitter"
+          # https://dev.twitter.com/web/embedded-timelines
+          # https://publish.twitter.com/#
+          serviceHtml = """
+          <a class="twitter-timeline" data-link-color="#1DA1F2" href="https://twitter.com/#{handle}">Tweets by @#{handle}</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>          
+          """
+        else
+          serviceHtml = ""
+      contentHtml += "\n#{serviceHtml}\n"
+    html = """
+<paper-material id="social-menu" class="out" elevation="4">
+  <paper-icon-button icon="glyphicon-social:twitter" class="show-social"></paper-icon-button>
+  <div class="slideout-content">
+    #{contentHtml}
+  </div>
+</paper-material>
+    """
+    showButton = """
+    """
+    $(appendTo).append html
+    $(".show-social").click ->
+      toggleSocialSlideoutBar.debounce 50
+      false
+  false
+
+
+
+
 try
   $()
 catch e
@@ -1785,6 +1845,8 @@ $ ->
         p$(md).markdown = mdText
   browserBeware()
   checkFileVersion()
+  try
+    loadSocialMediaSlideoutBar(_asm.socialHandles)
   try
     for caption in $("figcaption .caption-description")
       captionValue = $(caption).text().unescape()

coffee/search.coffee

@@ -4,7 +4,8 @@ searchParams =
   targetContainer: "#result_container"
 searchParams.apiPath = uri.urlString + searchParams.targetApi
 
-window._asm = new Object()
+unless typeof window._asm is "object"
+  window._asm = new Object()
 # Base query URLs for out-of-site linkouts
 _asm.affiliateQueryUrl =
   iucnRedlist: "http://apiv3.iucnredlist.org/api/v3/species/"
@@ -184,10 +185,15 @@ checkLaggedUpdate = (result) ->
           if j is k and finishedLoop
             elapsed = Date.now() - start
             console.log "Finished async IUCN taxa check in #{elapsed}ms"
+            stopLoad()
+            delay 500, ->
+              stopLoad()
       finishedLoop = true
     catch e
       console.warn "Couldn't do client update -- #{e.message}"
       console.warn e.stack
+  else
+    stopLoad()
   false
 
 
@@ -1357,11 +1363,61 @@ doLazily = ->
       """
       $("#git-footer").prepend html
       bindClicks()
+      mobileCollapsable()
+      loadJS "#{uri.urlString}js/terminal.min.js", ->
+        bindClicks()
+        console.debug "Terminal file loaded"
+        stopLoad()
       false
   false
 
 
 
+mobileCollapsable = (selector = ".search-options-panel", breakpoint = _asm?.mobileBreakpoint ? 767, debounceInterval = 250) ->
+  ###
+  # Collapse all sections inside of selector, using the legend as a trigger
+  ###
+  console.debug "Checking mobile status"
+  if $(window).width() <= breakpoint
+    unless typeof core?.debouncers is "object"
+      unless typeof core is "object"
+        window.core = new Object()
+      core.debouncers = new Object()
+    if core.debouncers.mobileCollapsable?
+      if Date.now() - core.debouncers.mobileCollapsable <= debounceInterval
+        return false
+      delete core.debouncers.mobileCollapsable
+      clearTimeout core.debouncers.mobileCollapseableTimeout
+    core.debouncers.mobileCollapsable = Date.now()
+    clearDebounce = 2 * debounceInterval
+    core.debouncers.mobileCollapseableTimeout = delay clearDebounce, ->
+      delete core.debouncers.mobileCollapsable
+    $(selector).find("section").collapse()
+    hasDoneInitialCollapse = false
+    $($(selector).find("section").get(0)).on "shown.bs.collapse", ->
+      unless hasDoneInitialCollapse
+        delay 50, ->
+          for section in $(selector).find("section")
+            $(section).collapse("hide")
+        hasDoneInitialCollapse = true
+      false
+    $(selector).find("legend")
+    .text "Show Options"
+    .addClass "btn btn-default"
+    .click ->
+      isCollapsed = not $(selector).find("section").hasClass "in"
+      if isCollapsed
+        $(this).text "Hide Options"
+        $(selector).find("section").collapse("show")
+      else
+        $(this).text "Show Options"
+        $(selector).find("section").collapse("hide")
+    true
+  else
+    console.debug "Not a mobile viewport"
+    false
+
+
 $ ->
   devHello = """
   ****************************************************************************

css/main.css

@@ -6718,6 +6718,7 @@ button.close {
  ***/
 body {
   padding: 2rem;
+  overflow-x: hidden;
 }
 .sample-change-also {
   text: #F44336;
@@ -6893,13 +6894,15 @@ header#header-bar paper-button.hidden-xs iron-icon {
   margin-left: 5px;
 }
 @media (max-width: 767px) {
-  header#header-bar paper-icon-button.visible-xs {
+  header#header-bar paper-icon-button.visible-xs:not([hidden]) {
     display: inline-block !important;
   }
 }
 header#header-bar + main {
   margin-top: 3em;
   padding-bottom: 3em;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 .person {
   text-transform: capitalize;
@@ -6965,6 +6968,24 @@ main #images-block div.no-image {
 #search_form .search-control-container paper-fab:not(:last-of-type) {
   margin-right: 1rem;
 }
+@media (max-width: 767px) {
+  #search_form .search-control-container paper-fab {
+    height: 40px;
+    width: 40px;
+    padding: 8px;
+    margin-top: 1em;
+  }
+}
+#search_form #search-options-container.collapse .bool-search-option,
+#search_form #search-options-container.collapsing .bool-search-option {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+@media (max-width: 767px) {
+  #search_form #search-options-container .bool-search-option paper-icon-button[data-toggle='tooltip'] {
+    display: none;
+  }
+}
 #search_form #search-options-container paper-menu-button {
   margin-top: -1.5em;
 }
@@ -7291,9 +7312,19 @@ footer {
 footer.row {
   left: 15px;
 }
+@media (max-width: 767px) and (max-width: 767px) {
+  footer.row #git-footer paper-icon-button + paper-icon-button[icon='glyphicon-social:github'] {
+    display: none !important;
+  }
+}
 footer copyright-statement {
   top: 0.71428571em;
 }
+@media (max-width: 767px) {
+  footer copyright-statement .visible-xs {
+    display: inline-block !important;
+  }
+}
 header .logo-container {
   width: 16.66666667%;
   float: left !important;
@@ -7601,6 +7632,42 @@ iron-label + paper-icon-button,
 label + paper-icon-button {
   padding-left: 0;
 }
+#social-menu {
+  width: 30vw;
+  min-width: 30vw;
+  background: #fff;
+  height: calc(100vh - 6em - 5em);
+  position: fixed;
+  top: calc(3em + 30px);
+  transition: 0.5s all ease-in-out;
+}
+@media (max-width: 991px) {
+  #social-menu {
+    width: 90vw !important;
+  }
+  #social-menu.out {
+    right: -90vw !important;
+  }
+}
+#social-menu.out {
+  right: -30vw;
+}
+#social-menu.in {
+  right: -1em;
+}
+#social-menu div {
+  max-height: calc(100% - 3em);
+  overflow-y: scroll;
+}
+#social-menu > paper-icon-button {
+  margin-left: -30px;
+  background: #fff;
+  box-shadow: -1px 0 5px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+}
+#social-menu > paper-icon-button iron-icon {
+  color: #1DA1F2;
+}
 .clade {
   text-transform: title-case;
 }

index.php

@@ -63,7 +63,7 @@ class="col-xs-7 col-sm-9"
             <paper-fab id="do-reset-search" icon="cancel" raisedButton class="asm-blue" data-toggle="tooltip" title="Reset search" data-placement="bottom"></paper-fab>
           </div>
         </div>
-        <fieldset class="">
+        <fieldset class="search-options-panel">
           <legend>Options</legend>
           <section id="search-options-container" class="row">
             <div class="col-md-3 col-xs-6 toggle-container bool-search-option clearfix">
@@ -137,7 +137,7 @@ class="col-xs-7 col-sm-9"
           <section id="default-hidden-search-option-container">
             <!-- Now, elements that are hidden by default -->
             <paper-button data-toggle="collapse" data-target="#collapse-advanced" aria-expanded="false" aria-controls="collapse-advanced" class="asm-blue-light pull-left" id="collapse-button" raised>Advanced Options <iron-icon icon="icons:unfold-more" id="collapse-icon"></iron-icon></paper-button>
-            <p class="text-muted pull-left">Click to search in specific fields</p>
+            <p class="text-muted pull-left hidden-xs">Click to search in specific fields</p>
             <div class="collapse form-group clearfix clear" id="collapse-advanced">
               <!-- Clade: DWC cohort, magnaorder, and superorder -->
               <paper-input label="Clade" id="major-type-filter" name="major-type-filter" class="cndb-filter col-md-4 col-xs-6" data-column="major_type"></paper-input>