From 0311529e0f46bcdb3987ea7f0893cbbe83f9a357 Mon Sep 17 00:00:00 2001 From: John Lau Date: Fri, 13 Dec 2019 15:59:32 -0800 Subject: [PATCH 1/6] Update sidebar to only display full info on active --- css/main.css | 25 +++++++----- index.html | 2 +- js/main.js | 106 ++++++++++++++++++++++++++++++--------------------- 3 files changed, 80 insertions(+), 53 deletions(-) diff --git a/css/main.css b/css/main.css index 18a57d35..00d539d6 100644 --- a/css/main.css +++ b/css/main.css @@ -133,36 +133,38 @@ 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 .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 +309,8 @@ a:hover { display: none; } } + +.full { + transition: max-height 0.25s ease-out; + overflow: hidden; +} \ No newline at end of file diff --git a/index.html b/index.html index 533fd665..0416ef1a 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@

Murals & Public Art in South Bay

-
+
diff --git a/js/main.js b/js/main.js index 52d4e17f..e62b4746 100644 --- a/js/main.js +++ b/js/main.js @@ -110,7 +110,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,58 +162,71 @@ ); 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 = "
" + prop.title; - link.listingFeature = currentFeature; - link.listingId = "listing-" + currentFeature.id; - - // 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; + function 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 = "
" + prop.title; + link.listingFeature = currentFeature; + link.listingId = "listing-" + currentFeature.id; - var address = listing.appendChild(document.createElement("div")); - address.innerHTML = - prop.address + - ", " + - prop.city + - ", " + - prop.state + - " " + - prop.postalCode; + // 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.className = "artist"; + artist.innerHTML = "by " + prop.artist; - if (prop.image) { - var artImage = listing.appendChild(document.createElement("div")); - artImage.innerHTML = "
" + ''; - } + var address = listing.appendChild(document.createElement("div")); + address.className = "address"; + address.innerHTML = + prop.address + + ", " + + prop.city + + ", " + + prop.state + + " " + + prop.postalCode; + // TODO: Load image on active only. Currently every user DDOSes the SJ.gov site by loading all pages + // TODO: SJ.gov has updated their website and scrapping + JSON no longer point to valid URLs. + // if (prop.image) { + // var artImage = listing.appendChild(document.createElement("div")); + // artImage.style.maxHeight="0%"; + // artImage.className = "artImage full"; + // artImage.innerHTML = "
" + ''; + // } + var story = listing.appendChild(document.createElement("div")); + story.style.maxHeight="0%"; + story.className = "story full"; if (prop.description) { story.innerHTML = "
" + prop.description + "
"; } - + var info = listing.appendChild(document.createElement("a")); + info.style.maxHeight="0%"; + info.className = "info full"; + if (prop.sourceURL) { info.href = prop.sourceURL; info.innerHTML = "Source: " + prop.sourceURL; } - - link.addEventListener("click", linkOnClickHandler); - } + link.addEventListener("click", linkOnClickHandler); } //Series of action to perform after a listing link is clicked. @@ -223,7 +236,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: "${ @@ -239,11 +251,19 @@ // 3. Highlight listing in sidebar (and remove highlight for all other listings) var activeItem = document.getElementsByClassName("active"); - - if (activeItem[0]) { + if (activeItem[0]) { + let activeProps = activeItem[0].getElementsByClassName("full"); + for(let i = 0; i < activeProps.length; i++) { + activeProps[i].style.maxHeight="0%"; + } activeItem[0].classList.remove("active"); } this.parentNode.classList.add("active"); + let hiddenProps = this.parentNode.getElementsByClassName("full"); + + for(let i = 0; i < hiddenProps.length; i++) { + hiddenProps[i].style.maxHeight="100%"; + } } // mobile tabs at bottom of page to switch between map and list view From 08a5fbda1c5484da2d872a667033cd630e00e0af Mon Sep 17 00:00:00 2001 From: John Lau Date: Fri, 13 Dec 2019 16:02:18 -0800 Subject: [PATCH 2/6] Consolidate duplicate select listing code --- js/main.js | 45 ++++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/js/main.js b/js/main.js index e62b4746..57b4587f 100644 --- a/js/main.js +++ b/js/main.js @@ -75,21 +75,17 @@ 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); + // listing.classList.add("active"); }); } catch (exception) { console.error(exception); @@ -248,23 +244,30 @@ 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]) { - let activeProps = activeItem[0].getElementsByClassName("full"); - for(let i = 0; i < activeProps.length; i++) { - activeProps[i].style.maxHeight="0%"; - } - activeItem[0].classList.remove("active"); - } - this.parentNode.classList.add("active"); - let hiddenProps = this.parentNode.getElementsByClassName("full"); - - for(let i = 0; i < hiddenProps.length; i++) { - hiddenProps[i].style.maxHeight="100%"; +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.maxHeight="0%"; } + activeItem[0].classList.remove("active"); + } +} + +function selectListing(node) { + node.classList.add("active"); + let hiddenProps = node.getElementsByClassName("full"); + + for(let i = 0; i < hiddenProps.length; i++) { + hiddenProps[i].style.maxHeight="100%"; } +} // mobile tabs at bottom of page to switch between map and list view var container = document.querySelector(".container"); From 63ff9a40c4282b3354c0f824407503ee567e7f5c Mon Sep 17 00:00:00 2001 From: John Lau Date: Fri, 13 Dec 2019 16:06:23 -0800 Subject: [PATCH 3/6] Separate entry parts for readability --- js/main.js | 93 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 53 insertions(+), 40 deletions(-) diff --git a/js/main.js b/js/main.js index 57b4587f..94c841b1 100644 --- a/js/main.js +++ b/js/main.js @@ -85,7 +85,6 @@ console.log("attempting to show listing for " + listing_id); let listing = document.getElementById(listing_id); selectListing(listing); - // listing.classList.add("active"); }); } catch (exception) { console.error(exception); @@ -163,32 +162,51 @@ } function 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")); + // Simplify properties variable + let prop = currentFeature.properties; + + // Create a listing entry + let listings = document.getElementById("listings"); + let 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")); + + // Display title + let link = listing.appendChild(document.createElement("a")); link.href = "#"; link.className = "title"; link.innerHTML = "
" + prop.title; link.listingFeature = currentFeature; link.listingId = "listing-" + currentFeature.id; - // Create a new div with the class 'details' for each listing - // and fill it with the following - var artist = listing.appendChild(document.createElement("div")); + displayArtist(listing, prop); + displayAddress(listing, prop); + + // TODO: Load image on active only. Currently every user DDOSes the SJ.gov site by loading all pages + // TODO: SJ.gov has updated their website and scrapping + JSON no longer point to valid URLs. + // if (prop.image) { + // var artImage = listing.appendChild(document.createElement("div")); + // artImage.style.maxHeight="0%"; + // artImage.className = "artImage full"; + // artImage.innerHTML = "
" + ''; + // } + + displayDescription(listing, prop); + displayURL(listing, prop); + + link.addEventListener("click", linkOnClickHandler); + } + + function displayArtist(listing, prop) { + let artist = listing.appendChild(document.createElement("div")); artist.className = "artist"; artist.innerHTML = "by " + prop.artist; + } - var address = listing.appendChild(document.createElement("div")); - address.className = "address"; + function displayAddress(listing, prop) { + let address = listing.appendChild(document.createElement("div")); + address.style.maxHeight="0%"; + address.className = "address full"; address.innerHTML = prop.address + ", " + @@ -197,32 +215,27 @@ prop.state + " " + prop.postalCode; + } - // TODO: Load image on active only. Currently every user DDOSes the SJ.gov site by loading all pages - // TODO: SJ.gov has updated their website and scrapping + JSON no longer point to valid URLs. - // if (prop.image) { - // var artImage = listing.appendChild(document.createElement("div")); - // artImage.style.maxHeight="0%"; - // artImage.className = "artImage full"; - // artImage.innerHTML = "
" + ''; - // } - - var story = listing.appendChild(document.createElement("div")); - story.style.maxHeight="0%"; - story.className = "story full"; - if (prop.description) { - story.innerHTML = "
" + prop.description + "
"; - } - - var info = listing.appendChild(document.createElement("a")); - info.style.maxHeight="0%"; - info.className = "info full"; + function displayDescription(listing, prop) { + let story = listing.appendChild(document.createElement("div")); + story.style.maxHeight="0%"; + story.className = "story full"; + if (prop.description) { + story.innerHTML = "
" + prop.description + "
"; + } + } - if (prop.sourceURL) { - info.href = prop.sourceURL; - info.innerHTML = "Source: " + prop.sourceURL; - } - link.addEventListener("click", linkOnClickHandler); + function displayURL(listing, prop) { + let info = listing.appendChild(document.createElement("div")); + info.style.maxHeight="0%"; + info.className = "info full"; + + if (prop.sourceURL) { + let url = info.appendChild(document.createElement("a")); + url.href = prop.sourceURL; + url.innerHTML = "Source"; + } } //Series of action to perform after a listing link is clicked. From ef3a6e3582a29dc942341f583c6af6ba98da8b6c Mon Sep 17 00:00:00 2001 From: John Lau Date: Fri, 13 Dec 2019 16:08:56 -0800 Subject: [PATCH 4/6] Create inactive view for listings --- css/main.css | 14 ++++++++++++++ js/main.js | 42 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/css/main.css b/css/main.css index 00d539d6..7562848b 100644 --- a/css/main.css +++ b/css/main.css @@ -148,6 +148,20 @@ a:hover { /* #listings .item:last-child { border-bottom: none; } */ +#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; color: darkorchid; diff --git a/js/main.js b/js/main.js index 94c841b1..79c0a0f2 100644 --- a/js/main.js +++ b/js/main.js @@ -166,23 +166,28 @@ let prop = currentFeature.properties; // Create a listing entry - let listings = document.getElementById("listings"); - let listing = listings.appendChild(document.createElement("div")); + let listing = document.getElementById("listings").appendChild(document.createElement("div")); listing.className = "item"; listing.id = "listing-" + currentFeature.id; - // Display title + // Display inactive entry box let link = listing.appendChild(document.createElement("a")); link.href = "#"; - link.className = "title"; - link.innerHTML = "
" + prop.title; + link.className = "entry"; link.listingFeature = currentFeature; link.listingId = "listing-" + currentFeature.id; + link.style.overflow = "hidden"; + // Display inactive details + displayTitle(link, prop); + displayArtist(link, prop, false); + displayThumbnail(link, prop); + + // Display active details displayArtist(listing, prop); displayAddress(listing, prop); - // TODO: Load image on active only. Currently every user DDOSes the SJ.gov site by loading all pages + // TODO: Load image on active only. Currently every user DDOSes the SJ.gov site by loading all images // TODO: SJ.gov has updated their website and scrapping + JSON no longer point to valid URLs. // if (prop.image) { // var artImage = listing.appendChild(document.createElement("div")); @@ -197,12 +202,30 @@ link.addEventListener("click", linkOnClickHandler); } - function displayArtist(listing, prop) { + function displayTitle(listing, prop) { + let title = listing.appendChild(document.createElement("div")); + title.className="title"; + title.innerHTML = "
" + prop.title; + } + + function displayArtist(listing, prop, full=true) { let artist = listing.appendChild(document.createElement("div")); - artist.className = "artist"; + artist.style.maxHeight="0%"; + artist.className = full ? "artist full" : "artist"; artist.innerHTML = "by " + prop.artist; } + function displayThumbnail(listing, prop) { + let thumbnail = listing.appendChild(document.createElement("div")); + thumbnail.className="thumbnail"; + thumbnail.style.maxWidth="100px"; + thumbnail.style.float="right"; + thumbnail.style.clear="both"; + thumbnail.innerHTML = ""; + // if(prop.image) { + // thumbnail.innerHTML = ''; + // } + } function displayAddress(listing, prop) { let address = listing.appendChild(document.createElement("div")); address.style.maxHeight="0%"; @@ -269,6 +292,7 @@ function deselectListing() { for(let i = 0; i < activeProps.length; i++) { activeProps[i].style.maxHeight="0%"; } + activeItem[0].getElementsByClassName("thumbnail")[0].style.display="block"; activeItem[0].classList.remove("active"); } } @@ -280,6 +304,8 @@ function selectListing(node) { for(let i = 0; i < hiddenProps.length; i++) { hiddenProps[i].style.maxHeight="100%"; } + + node.getElementsByClassName("thumbnail")[0].style.display="none"; } // mobile tabs at bottom of page to switch between map and list view From 322cd5e379fa53262e3453c41994a53175b187d6 Mon Sep 17 00:00:00 2001 From: John Lau Date: Fri, 13 Dec 2019 16:09:51 -0800 Subject: [PATCH 5/6] Fix cross-compatability w/ Firefox and formatting --- css/main.css | 20 +++++++++++++++++++- js/main.js | 49 ++++++++++++++++++++++++------------------------- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/css/main.css b/css/main.css index 7562848b..63fabb4e 100644 --- a/css/main.css +++ b/css/main.css @@ -326,5 +326,23 @@ a:hover { .full { transition: max-height 0.25s ease-out; - overflow: hidden; + 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%); } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 79c0a0f2..ca17ee95 100644 --- a/js/main.js +++ b/js/main.js @@ -187,14 +187,14 @@ displayArtist(listing, prop); displayAddress(listing, prop); - // TODO: Load image on active only. Currently every user DDOSes the SJ.gov site by loading all images - // TODO: SJ.gov has updated their website and scrapping + JSON no longer point to valid URLs. - // if (prop.image) { - // var artImage = listing.appendChild(document.createElement("div")); - // artImage.style.maxHeight="0%"; - // artImage.className = "artImage full"; - // artImage.innerHTML = "
" + ''; - // } + // 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 = "
" + ''; + } displayDescription(listing, prop); displayURL(listing, prop); @@ -204,31 +204,30 @@ function displayTitle(listing, prop) { let title = listing.appendChild(document.createElement("div")); - title.className="title"; + title.className = "title"; title.innerHTML = "
" + prop.title; } function displayArtist(listing, prop, full=true) { let artist = listing.appendChild(document.createElement("div")); - artist.style.maxHeight="0%"; + artist.style.display = "none"; artist.className = full ? "artist full" : "artist"; artist.innerHTML = "by " + prop.artist; } function displayThumbnail(listing, prop) { let thumbnail = listing.appendChild(document.createElement("div")); - thumbnail.className="thumbnail"; - thumbnail.style.maxWidth="100px"; - thumbnail.style.float="right"; - thumbnail.style.clear="both"; - thumbnail.innerHTML = ""; - // if(prop.image) { - // thumbnail.innerHTML = ''; - // } + thumbnail.className = "thumbnails"; + thumbnail.style.maxWidth = "100px"; + thumbnail.style.float = "right"; + thumbnail.style.clear = "both"; + if(prop.image) { + thumbnail.innerHTML = ''; + } } function displayAddress(listing, prop) { let address = listing.appendChild(document.createElement("div")); - address.style.maxHeight="0%"; + address.style.display = "none"; address.className = "address full"; address.innerHTML = prop.address + @@ -242,7 +241,7 @@ function displayDescription(listing, prop) { let story = listing.appendChild(document.createElement("div")); - story.style.maxHeight="0%"; + story.style.display = "none"; story.className = "story full"; if (prop.description) { story.innerHTML = "
" + prop.description + "
"; @@ -251,7 +250,7 @@ function displayURL(listing, prop) { let info = listing.appendChild(document.createElement("div")); - info.style.maxHeight="0%"; + info.style.display = "none"; info.className = "info full"; if (prop.sourceURL) { @@ -290,9 +289,9 @@ function deselectListing() { if (activeItem[0]) { let activeProps = activeItem[0].getElementsByClassName("full"); for(let i = 0; i < activeProps.length; i++) { - activeProps[i].style.maxHeight="0%"; + activeProps[i].style.display = "none"; } - activeItem[0].getElementsByClassName("thumbnail")[0].style.display="block"; + activeItem[0].getElementsByClassName("thumbnails")[0].style.display = "block"; activeItem[0].classList.remove("active"); } } @@ -302,10 +301,10 @@ function selectListing(node) { let hiddenProps = node.getElementsByClassName("full"); for(let i = 0; i < hiddenProps.length; i++) { - hiddenProps[i].style.maxHeight="100%"; + hiddenProps[i].style.display = "block"; } - node.getElementsByClassName("thumbnail")[0].style.display="none"; + node.getElementsByClassName("thumbnails")[0].style.display = "none"; } // mobile tabs at bottom of page to switch between map and list view From d5b97a1972354b3be14d0bfbe0b33345018458ea Mon Sep 17 00:00:00 2001 From: John Lau Date: Fri, 13 Dec 2019 16:46:07 -0800 Subject: [PATCH 6/6] Inactive view bugfixes --- css/main.css | 3 +-- js/main.js | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/css/main.css b/css/main.css index 63fabb4e..90c73499 100644 --- a/css/main.css +++ b/css/main.css @@ -325,7 +325,6 @@ a:hover { } .full { - transition: max-height 0.25s ease-out; display: none; } @@ -333,7 +332,7 @@ a:hover { position: relative; width: 100px; height: 60px; - overflow: hidden + overflow: hidden; } .thumbnails img { diff --git a/js/main.js b/js/main.js index ca17ee95..40b3db09 100644 --- a/js/main.js +++ b/js/main.js @@ -180,7 +180,6 @@ // Display inactive details displayTitle(link, prop); - displayArtist(link, prop, false); displayThumbnail(link, prop); // Display active details @@ -208,10 +207,9 @@ title.innerHTML = "
" + prop.title; } - function displayArtist(listing, prop, full=true) { + function displayArtist(listing, prop) { let artist = listing.appendChild(document.createElement("div")); - artist.style.display = "none"; - artist.className = full ? "artist full" : "artist"; + artist.className = "artist full"; artist.innerHTML = "by " + prop.artist; } @@ -291,8 +289,10 @@ function deselectListing() { for(let i = 0; i < activeProps.length; i++) { activeProps[i].style.display = "none"; } - activeItem[0].getElementsByClassName("thumbnails")[0].style.display = "block"; - activeItem[0].classList.remove("active"); + if(activeItem[0].getElementsByClassName("thumbnails").length > 0) { + activeItem[0].getElementsByClassName("thumbnails")[0].style.display = "block"; + activeItem[0].classList.remove("active"); + } } } @@ -303,8 +303,10 @@ function selectListing(node) { for(let i = 0; i < hiddenProps.length; i++) { hiddenProps[i].style.display = "block"; } - - node.getElementsByClassName("thumbnails")[0].style.display = "none"; + 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