Sidebar enhancement (#86)

* Update sidebar to only display full info on active * Consolidate duplicate select listing code * Separate entry parts for readability * Create inactive view for listings * Fix cross-compatability w/ Firefox and formatting * Inactive view bugfixes
codeforsanjose · Dec 16, 2019 · 3d05752 · 3d05752
1 parent 034bfed
commit 3d05752
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 68 deletions.
diff --git a/css/main.css b/css/main.css
@@ -133,36 +133,52 @@ a:hover {
   padding: 0 10px;
 }
 
-.listings {
+#listings {
   height: 88%;
   overflow: auto;
   padding-bottom: 60px;
 }
 
-.listings .item {
+#listings .item {
   display: block;
   border-bottom: 1px solid #eee;
   padding: 10px;
   text-decoration: none;
 }
 
-.listings .item:last-child { border-bottom: none; }
+/* #listings .item:last-child { border-bottom: none; } */
 
-.listings .item .title {
+#listings .item .entry { 
+  display: block;
+}
+
+#listings .item .entry:hover { 
+  color: blue;
+  text-decoration: none;
+}
+
+.artist {
+  color: black;
+  text-decoration: none;
+}
+
+#listings .item .title {
   display: block;
-  padding-top: 25px;
   color: darkorchid;
   font-weight: 700;
   line-height: 20px;
   font-size: 16px;
 }
 
-.listings .item .title small { font-weight: 400; }
+#listings .item .title small { font-weight: 400; }
 
-.listings .item.active .title,
-.listings .item .title:hover { color: blue; }
+#listings .item.active .title,
+#listings .item .title:hover { 
+  color: blue;
+  text-decoration: none;
+}
 
-.listings .item.active {
+#listings .item.active {
   background-color: lightgrey;
 }
 
@@ -307,3 +323,25 @@ a:hover {
     display: none;
   }
 }
+
+.full {
+  display: none;
+}
+
+.thumbnails {
+  position: relative;
+  width: 100px;
+  height: 60px;
+  overflow: hidden;
+}
+
+.thumbnails img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  height: 100%;
+  width: auto;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+      transform: translate(-50%,-50%);
+}
diff --git a/index.html b/index.html
@@ -49,7 +49,7 @@
       <div class='header' style="padding-top: 50px; padding-bottom:15px;">
         <h4>Murals & Public Art in South Bay</h4>
       </div>
-      <div id='listings' class='listings'>
+      <div id='listings'>
       </div>
     </div>
     <div id='map' class='map'></div>

diff --git a/js/main.js b/js/main.js
@@ -75,21 +75,16 @@
           let listing_id = "listing-" + marker.id;
           el.addEventListener("click", function(e) {
             console.log("marker has been clicked", marker_elem.id);
-            let activeItem = document.getElementsByClassName("active");
             // 1. Fly to the point
             flyToArt(marker_elem);
             // 2. Close all other popups and display popup for clicked art
             createPopUp(marker_elem, listing_id);
             // 3. Highlight listing in sidebar (and remove highlight for all other listings)
             e.stopPropagation();
-            if (activeItem[0]) {
-              console.log("activeItem: ", activeItem);
-              activeItem[0].classList.remove("active");
-            }
+            deselectListing();
             console.log("attempting to show listing for " + listing_id);
             let listing = document.getElementById(listing_id);
-
-            listing.classList.add("active");
+            selectListing(listing);
           });
         } catch (exception) {
           console.error(exception);
@@ -110,7 +105,7 @@
     if (popUps[0]) popUps[0].remove();
 
     if (typeof linkId !== "undefined") {
-      window.location.hash = "#" + linkId;
+      setTimeout(() => { window.location.hash = "#" + linkId; }, 250);
     }
 
     console.log("showing popup for ", currentFeature.properties.title);
@@ -162,57 +157,104 @@
         );
         continue;
       }
+    displayEntry(currentFeature);
+    }
+  }
 
-      // Shorten data.feature.properties to just `prop` so we're not
-      // writing this long form over and over again.
-      var prop = currentFeature.properties;
-      // Select the listing container in the HTML and append a div
-      // with the class 'item' for each art
-      var listings = document.getElementById("listings");
-      var listing = listings.appendChild(document.createElement("div"));
-      listing.className = "item";
-      listing.id = "listing-" + currentFeature.id;
-      // Create a new link with the class 'title' for each art
-      // and fill it with the art address
-      var link = listing.appendChild(document.createElement("a"));
-      link.href = "#";
-      link.className = "title";
-      link.innerHTML = "<br/>" + prop.title;
-      link.listingFeature = currentFeature;
-      link.listingId = "listing-" + currentFeature.id;
+  function displayEntry(currentFeature) {
+    // Simplify properties variable
+    let prop = currentFeature.properties;
 
-      // Create a new div with the class 'details' for each listing
-      // and fill it with the following
-      var artist = listing.appendChild(document.createElement("div"));
-      artist.innerHTML = "by " + prop.artist;
+    // Create a listing entry
+    let listing = document.getElementById("listings").appendChild(document.createElement("div"));
+    listing.className = "item";
+    listing.id = "listing-" + currentFeature.id;
+
+    // Display inactive entry box
+    let link = listing.appendChild(document.createElement("a"));
+    link.href = "#";
+    link.className = "entry";
+    link.listingFeature = currentFeature;
+    link.listingId = "listing-" + currentFeature.id;
+    link.style.overflow = "hidden";
 
-      var address = listing.appendChild(document.createElement("div"));
-      address.innerHTML =
-        prop.address +
-        ", " +
-        prop.city +
-        ", " +
-        prop.state +
-        " " +
-        prop.postalCode;
+    // Display inactive details
+    displayTitle(link, prop);
+    displayThumbnail(link, prop);
 
-      if (prop.image) {
-        var artImage = listing.appendChild(document.createElement("div"));
-        artImage.innerHTML = "<br/>" + '<img src="' + prop.image + '">';
-      }
+    // Display active details
+    displayArtist(listing, prop);
+    displayAddress(listing, prop);
 
-      var story = listing.appendChild(document.createElement("div"));
-      if (prop.description) {
-        story.innerHTML = "<br/>" + prop.description + "<br/>";
-      }
+    // TODO: Pagination so we don't overload external servers
+    // TODO: Scrapper needs to be updated due to changes to the San Jose government's website.
+    if (prop.image) { 
+      var artImage = listing.appendChild(document.createElement("div"));
+      artImage.style.display = "none";
+      artImage.className = "artImage full";
+      artImage.innerHTML = "<br/>" + '<img src="' + prop.image + '">';
+    }
+
+    displayDescription(listing, prop);
+    displayURL(listing, prop);
 
-      var info = listing.appendChild(document.createElement("a"));
-      if (prop.sourceURL) {
-        info.href = prop.sourceURL;
-        info.innerHTML = "Source: " + prop.sourceURL;
-      }
+    link.addEventListener("click", linkOnClickHandler);
+  }
+
+  function displayTitle(listing, prop) {
+    let title = listing.appendChild(document.createElement("div"));
+    title.className = "title";
+    title.innerHTML = "<br/>" + prop.title;
+  }
 
-      link.addEventListener("click", linkOnClickHandler);
+  function displayArtist(listing, prop) {
+    let artist = listing.appendChild(document.createElement("div"));
+    artist.className = "artist full";
+    artist.innerHTML = "by " + prop.artist;
+  }
+
+  function displayThumbnail(listing, prop) {
+    let thumbnail = listing.appendChild(document.createElement("div"));
+    thumbnail.className = "thumbnails";
+    thumbnail.style.maxWidth = "100px";
+    thumbnail.style.float = "right";
+    thumbnail.style.clear = "both";
+    if(prop.image) {
+      thumbnail.innerHTML = '<img src="' + prop.image + '">';
+    }
+  }
+  function displayAddress(listing, prop) {
+    let address = listing.appendChild(document.createElement("div"));
+    address.style.display = "none";
+    address.className = "address full";
+    address.innerHTML =
+      prop.address +
+      ", " +
+      prop.city +
+      ", " +
+      prop.state +
+      " " +
+      prop.postalCode;
+  }
+
+  function displayDescription(listing, prop) {
+    let story = listing.appendChild(document.createElement("div"));
+    story.style.display = "none";
+    story.className = "story full";
+    if (prop.description) {
+      story.innerHTML = "<br/>" + prop.description + "<br/>";
+    }
+  }
+
+  function displayURL(listing, prop) {
+    let info = listing.appendChild(document.createElement("div"));
+    info.style.display = "none";
+    info.className = "info full";
+
+    if (prop.sourceURL) {
+      let url = info.appendChild(document.createElement("a"));
+      url.href = prop.sourceURL;
+      url.innerHTML = "Source";
     }
   }
 
@@ -223,7 +265,6 @@
     // Update the currentFeature to the art associated with the clicked link
     // var clickedListing = data.features[this.dataPosition];
     var clickedListing = this.listingFeature;
-
     if (!clickedListing.geometry.coordinates) {
       return console.warn(
         `Missing coordinates for listing: "${
@@ -236,15 +277,37 @@
     flyToArt(clickedListing);
     // 2. Close all other popups and display popup for clicked point
     createPopUp(clickedListing, this.listingId);
+    // 3. Show full info and highlight listing in sidebar (and remove highlight for all other listings)
+    deselectListing();
+    selectListing(this.parentNode);
+  }
 
-    // 3. Highlight listing in sidebar (and remove highlight for all other listings)
-    var activeItem = document.getElementsByClassName("active");
-
-    if (activeItem[0]) {
+function deselectListing() {
+  var activeItem = document.getElementsByClassName("active");
+  if (activeItem[0]) { 
+    let activeProps = activeItem[0].getElementsByClassName("full");
+    for(let i = 0; i < activeProps.length; i++) {
+      activeProps[i].style.display = "none";
+    }
+    if(activeItem[0].getElementsByClassName("thumbnails").length > 0) {
+      activeItem[0].getElementsByClassName("thumbnails")[0].style.display = "block";
       activeItem[0].classList.remove("active");
     }
-    this.parentNode.classList.add("active");
   }
+}
+
+function selectListing(node) {
+  node.classList.add("active");
+  let hiddenProps = node.getElementsByClassName("full");
+
+  for(let i = 0; i < hiddenProps.length; i++) {
+    hiddenProps[i].style.display = "block";
+  }
+  console.log(node.getElementsByClassName("thumbnails"));
+  if(node.getElementsByClassName("thumbnails").length > 0) {
+    node.getElementsByClassName("thumbnails")[0].style.display = "none";
+  }
+}
 
   // mobile tabs at bottom of page to switch between map and list view
   var container = document.querySelector(".container");