Pop Up Modal

app/components/default-modal.js

@@ -0,0 +1,31 @@
+import Component from '@ember/component';
+
+const TOTAL_SLIDES = 7;
+
+export default Component.extend({
+  tagName: '',
+  open: true,
+  slideNumber: Math.floor(Math.random() * TOTAL_SLIDES) + 1, // start on a random slide
+
+  actions: {
+    toggleModal() {
+      this.toggleProperty('open');
+    },
+    nextSlide() {
+      if (this.slideNumber < TOTAL_SLIDES) {
+        this.set('slideNumber', this.slideNumber + 1);
+      } else {
+        // comment out the line below to disable infinite looping
+        this.set('slideNumber', 1);
+      }
+    },
+    prevSlide() {
+      if (this.slideNumber > 1) {
+        this.set('slideNumber', this.slideNumber - 1);
+      } else {
+        // comment out the line below to disable infinite looping
+        this.set('slideNumber', TOTAL_SLIDES);
+      }
+    },
+  },
+});

app/controllers/application.js

@@ -200,6 +200,22 @@ export default class ApplicationController extends Controller.extend(
     return values.every(({ changed }) => changed === false);
   }
 
+  @tracked
+  openModal = !window.localStorage.hideMessage;
+
+  @tracked
+  dontShowModalAgain = false;
+
+  @action toggleModal() {
+    this.openModal = !this.openModal;
+    // Uncomment this when done so that the message only shows the first time
+    // window.localStorage.hideMessage = true;
+    // Uncomment this one to use the checkbox to hide it
+    if (this.dontShowModalAgain) {
+      window.localStorage.hideMessage = true;
+    }
+  }
+
   @action
   async toggleLeftSideMenuVisibility() {
     this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty;

app/styles/app.scss

@@ -21,6 +21,7 @@
 @include foundation-close-button;
 @include foundation-menu;
 @include foundation-label;
+@include foundation-reveal;
 @include foundation-switch;
 @include foundation-visibility-classes;
 @include foundation-float-classes;
@@ -46,7 +47,7 @@
 @import 'modules/_m-maps';
 @import 'modules/_m-noui';
 @import 'modules/_m-search';
-
+@import 'modules/_m-reveal-modal';
 @import 'ember-power-select';
 
 @import 'layouts/_l-print';

app/styles/modules/_m-reveal-modal.scss

@@ -0,0 +1,97 @@
+// --------------------------------------------------
+// Module: Reveal Modal
+// --------------------------------------------------
+
+#reveal-modal-container {
+  z-index: 3;
+}
+
+@include breakpoint(1280px up) {
+  .mobile-header,
+  .mobile-body {
+    display: none;
+  }
+}
+
+
+.reveal-overlay {
+  padding: 1rem;
+
+  @include breakpoint(medium) {
+    padding: 8rem 1rem;
+    // position: absolute;
+  }
+}
+
+.reveal-overlay-target {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.reveal {
+  border: 0;
+  box-shadow: 0 0 0 rem-calc(4) rgba(0,0,0,0.1);
+  top: 0;
+  border-radius: 5px;
+  padding-top: 40px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+/* Slideshow container */
+.slideshow-container {
+  position: relative;
+  /* should we keep this? */
+  min-height: 10rem;
+}
+
+/* Next & previous buttons */
+.slideshow-prev, .slideshow-next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  padding: 16px;
+  margin-top: -22px;
+  color: white;
+  font-weight: bold;
+  font-size: 48px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  background-color: rgba(0,0,0,0.1);
+}
+
+/* Position the "next button" to the right */
+.slideshow-next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.slideshow-prev:hover, .slideshow-next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+.slideshow-content {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 1rem;
+  background-color: lightgray;
+}
+
+.slide img {
+  height: 350px;
+}

app/templates/application.hbs

@@ -1,3 +1,4 @@
+<DefaultModal @openModal={{this.openModal}} @toggleModal={{this.toggleModal}} @dontShowModalAgain={{this.dontShowModalAgain}} />
 <MainHeader @bookmarks={{this.model.bookmarks}} @savedLayerSets={{this.model.savedLayerSets}} />
 <div class="{{if this.printSvc.enabled "print-view"}}">
   <LinkTo @route="index" class="index-active-detector sr-only">Homepage</LinkTo>

app/templates/components/default-modal.hbs

@@ -0,0 +1,24 @@
+<RevealModal @open={{this.openModal}} @closeModal={{this.toggleModal}}>
+  <h1 class='header-large'>
+    We're excited to share some new features we've added to ZoLa! Scroll through the updates below, or select the "Features" tab at any time to view the new additions.
+  </h1>
+
+  <div class="slideshow-container">
+    <a class="slideshow-prev" onclick={{action 'prevSlide'}}>❮</a>
+    <SlideshowContents @slideNumber={{this.slideNumber}} />
+    <a class="slideshow-next" onclick={{action 'nextSlide'}}>❯</a>
+  </div>
+
+  {{input type="checkbox" checked=this.dontShowModalAgain}}
+  Don't show this message again
+
+  {{!-- Uncomment the below to show a message only on mobile --}}
+  {{!-- <h1 class='header-large mobile-header'>
+    labs-zola is optimized for desktop screen widths.
+  </h1>
+  <p class='lead mobile-body'>
+    Mobile support for ZoLa will be added in the future.
+    For the best experience, please use a browser with a minimum width of
+    1280px.
+  </p> --}}
+</RevealModal>

app/templates/components/main-header.hbs

@@ -35,7 +35,12 @@
         <LinkTo @route="about">About</LinkTo>
       </li>
       <li>
-        <LinkTo @route="features" class="features-header-link">Features</LinkTo>
+        <LinkTo @route="features" class="features-header-link">
+          Features
+          <span class="badge sup">
+            <strong>New!</strong>
+          </span>
+        </LinkTo>
       </li>
       <li>
         <LinkTo @route="data">Data</LinkTo>

app/templates/components/reveal-modal.hbs

@@ -0,0 +1,17 @@
+{{#if @open}}
+  <div class="reveal-overlay" style="display:block;">
+    <div class="reveal-overlay-target" {{action @closeModal}}></div>
+    <div
+      class="reveal"
+      role="dialog"
+      aria-hidden="false"
+      tabindex="-1"
+      style="display:block;"
+    >
+      {{yield}}
+      <button {{action @closeModal}} class="close-button" aria-label="Close modal" type="button">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  </div>
+{{/if}}

app/templates/components/slideshow-contents.hbs

@@ -0,0 +1,38 @@
+<div class="slideshow-content">
+  {{#if (eq @slideNumber 1)}}
+    <div class="slide">
+      <p>Access what you're looking for more quickly using your <strong>search history</strong></p>
+      <img src="/img/slideshow/search-history.gif" alt="A video showing the search history functionality" />
+    </div>
+  {{else if (eq @slideNumber 2)}}
+    <div class="slide">
+      <p>See more of the map by <strong>hiding the layers menu</strong></p>
+      <img src="/img/slideshow/toggle-sidebar.gif" alt="A video showing the sidebar toggle functionality" />
+    </div>
+  {{else if (eq @slideNumber 3)}}
+    <div class="slide">
+      <p><strong>Select two tax lots</strong> for side-by-side comparison</p>
+      <img src="/img/slideshow/side-by-side.gif" alt="A video showing the tax lot comparison functionality" />
+    </div>
+  {{else if (eq @slideNumber 4)}}
+    <div class="slide">
+      <p><strong>Turn off all layers</strong> with the click of a button</p>
+      <img src="/img/slideshow/toggle-all-layers-off.gif" alt="A video showing the all layer toggle button functionality" />
+    </div>
+  {{else if (eq @slideNumber 5)}}
+    <div class="slide">
+      <p><strong>Bookmark your selected layers</strong> to return to later</p>
+      <img src="/img/slideshow/bookmark-layer-sets.gif" alt="A video showing the layer bookmark functionality" />
+    </div>
+  {{else if (eq @slideNumber 6)}}
+    <div class="slide">
+      <p>Sum the area or distance of <strong>multiple measurements</strong></p>
+      <img src="/img/slideshow/multiple-measurements.gif" alt="A video showing the multiple measurement functionality" />
+    </div>
+  {{else if (eq @slideNumber 7)}}
+    <div class="slide">
+      <p><strong>New links</strong> to sites related to the selected tax lot</p>
+      <img src="/img/slideshow/relevant-links.gif" alt="A video showing the relevant links functionality" />
+    </div>
+  {{/if}}
+</div>

app/templates/features.hbs

@@ -8,6 +8,122 @@
 <div
   class="content-area cell large-5 large-cell-block-y xxlarge-4 text-center medium-text-left"
 >
+  <h1>
+    New Features!
+  </h1>
+  <h2 class="header-medium">
+    Search History
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/search-history.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/search-history.gif" alt="A video showing the search history functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        Access what you're looking for more quickly using your search history.
+      </p>
+    </div>
+  </div>
+
+  <h2 class="header-medium">
+    Compare Tax Lots
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/side-by-side.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/side-by-side.gif" alt="A video showing the tax lot comparison functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        Select two tax lots for side-by-side comparison.
+      </p>
+    </div>
+  </div>
+
+  <h2 class="header-medium">
+    Bookmark Sets of Layers
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/bookmark-layer-sets.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/bookmark-layer-sets.gif" alt="A video showing the layer bookmark functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        Bookmark your selected layers to return to later.
+      </p>
+    </div>
+  </div>
+
+  <h2 class="header-medium">
+    Access Relevant Links
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/relevant-links.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/relevant-links.gif" alt="A video showing the relevant links functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        Get the information you need faster by using the new links to sites related to the selected tax lot.
+      </p>
+    </div>
+  </div>
+
+<h2 class="header-medium">
+    Improved Measurement Tools
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/multiple-measurements.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/multiple-measurements.gif" alt="A video showing the multiple measurement functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        Sum the area or distance of multiple measurements.
+      </p>
+    </div>
+  </div>
+
+  <h2 class="header-medium">
+    Hide the sidebar
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/toggle-sidebar.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/toggle-sidebar.gif" alt="A video showing the sidebar toggle functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        See more of the map by hiding the layers menu.
+      </p>
+    </div>
+  </div>
+
+  <h2 class="header-medium">
+    Turn Off Layers
+  </h2>
+  <div class="grid-x">
+    <div class="cell medium-3 feature-image-cell">
+      <a href="/img/slideshow/toggle-all-layers-off.gif" target="_blank">
+        <img class="feature-image" src="/img/slideshow/toggle-all-layers-off.gif" alt="A video showing the all layer toggle button functionality" />
+      </a>
+    </div>
+    <div class="cell medium-9">
+      <p>
+        Turn off all layers with the click of a button.
+      </p>
+    </div>
+  </div>
+  <hr />
+
   <h1>
     Features
   </h1>