adding modal and covid19 faq link

5 files changed, 214 insertions, 12 deletions

diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 03e3fb39..8ae57921 100755
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -413,6 +413,8 @@ padding-bottom:0px;
 /* MODAL */
 
 .modal {
+  display: none;
+  z-index: 2;
   position: absolute;
   top: 50%; left: 50%;
   transform: translate3d(-50%, -50%, 0);
@@ -424,22 +426,12 @@ padding-bottom:0px;
   opacity: 0;
   pointer-events: none;
   transition: all 0.2s;
+  font-size: 1rem;
 }
 .modal.visible {
   opacity: 1;
   pointer-events: auto;
 }
-
-/* CONSENT MODAL */
-
-#consent_modal {
-  display: none;
-  z-index: 2;
-  font-size: 1rem;
-}
-#consent_modal a {
-  color: black;
-}
 .modal button {
   font-family: pfd, sans-serif;
   font-size: 0.875rem;
@@ -452,6 +444,12 @@ padding-bottom:0px;
   margin-top: 20px;
   width: 100px;
 }
+
+/* CONSENT MODAL */
+
+#consent_modal a {
+  color: black;
+}
 #consent_proceed {
   display: inline-block;
   background: black;
@@ -466,6 +464,47 @@ padding-bottom:0px;
 #consent_error.visible {
   opacity: 1;
 }
+
+/* INTRO MODAL */
+
+#intro_modal {
+  min-width: 360px;
+}
+#intro_modal .intro_title {
+  font-weight: bold;
+}
+#intro_modal .intro_title,
+#intro_modal .intro_tagline,
+#intro_modal .intro_content {
+  margin-bottom: 1rem;
+}
+#intro_modal .intro_content {
+  white-space: pre-line;
+}
+#intro_modal button {
+  display: block;
+}
+#intro_modal.black {
+  background-color: black;
+  color: white;
+}
+#intro_modal.white {
+  background-color: white;
+  color: black;
+}
+#intro_modal .intro_tagline.red {
+  color: #f00;
+}
+#intro_modal .intro_tagline.blue {
+  color: #11f;
+}
+#intro_modal .intro_tagline.white {
+  color: #fff;
+}
+#intro_modal .intro_tagline.black {
+  color: #000;
+}
+
 /* SELECTOR */
 
 #selector {
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 17289033..2e4e50b6 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -62,6 +62,7 @@
       <span role="menuitem" class="terms">TERMS AND CONDITIONS</span>
       <span role="menuitem" class="returns">RETURN POLICY</span>
       <span role="menuitem" class="care">CUSTOMER CARE</span>
+      <span role="menuitem" class="covid">COVID-19 FAQS</span>
     </div>
   </span>
   
@@ -1094,6 +1095,16 @@
     <button role="menuitem" id="consent_logout">LOG OUT</button>
   </div>
 
+  <div class="modal" id="intro_modal" role="modal" aria-label="Before you start using the app">
+    <div class="intro_title"></div>
+    <div class="intro_tagline tagline_top"></div>
+    <div class="intro_content"></div>
+    <div class="intro_tagline tagline_bottom"></div>
+    <div>
+      <button role="menuitem" class="intro_proceed">CONTINUE</button>
+    </div>
+  </div>
+
   <div id="selector">
     <div class="options" role="select">
       <script type="text/html" class="template">
@@ -1345,6 +1356,7 @@
 <script src="js/lib/cart/CartError.js"></script>
 
 <script src="js/lib/nav/IntroView.js"></script>
+<script src="js/lib/nav/IntroModal.js"></script>
 <script src="js/lib/nav/CurtainView.js"></script>
 <script src="js/lib/nav/HeaderView.js"></script>
 <script src="js/lib/nav/FooterView.js"></script>
diff --git a/StoneIsland/www/js/lib/nav/IntroModal.js b/StoneIsland/www/js/lib/nav/IntroModal.js
new file mode 100644
index 00000000..242405a0
--- /dev/null
+++ b/StoneIsland/www/js/lib/nav/IntroModal.js
@@ -0,0 +1,145 @@
+var IntroModal = View.extend({
+  
+  el: "#intro_modal",
+  
+  events: {
+    "click .intro_proceed": "proceed",
+    "click .intro_tagline": "navigateToTagline",
+    "click a": "navigate",
+  },
+
+  alreadyShown: false,
+  curtainBackgroundColor: false,
+  
+  initialize: function(){
+    this.$introTitle = this.$(".intro_title")
+    this.$introTaglineTop = this.$(".tagline_top")
+    this.$introTaglineBottom = this.$(".tagline_bottom")
+    this.$introContent = this.$(".intro_content")
+    this.$introProceed = this.$(".intro_proceed")
+  },
+
+  check: function(){
+    if (this.alreadyShown) {
+      this.hide()
+      return false
+    }
+    var lastMessage = localStorage.getItem('app.intro_modal_last_message')
+    switch (app.store.showModal) {
+      case 'never':
+        this.hide()
+        return false
+      case 'once':
+        if (lastMessage === app.store.modalContent) {
+          this.hide()
+          return false
+        }
+        this.show()
+        return true
+      case 'always':
+        this.show()
+        return true
+    }
+  },
+
+  build: function(){
+    var modalTitle = app.store.modalTitle.trim()
+    var modalTagline = app.store.modalTagline.trim()
+    var modalTaglineHref = app.store.modalTaglineLink.trim()
+    var modalContent = app.store.modalContent.trim()
+    var modalButton = app.store.modalButton.trim().toUpperCase() || "PROCEED"
+    if (app.store.modalBackgroundColor === 'black') {
+      this.curtainBackgroundColor = 'white'
+    } else {
+      this.curtainBackgroundColor = 'black'
+    }
+    this.$el.addClass(app.store.modalBackgroundColor)
+    if (modalTagline.length === 0) {
+      app.store.modalTaglinePosition = 'hidden'
+    }
+    switch (app.store.modalTaglinePosition) {
+      case 'hidden':
+        this.$introTaglineBottom.hide()
+        this.$introTaglineTop.hide()
+        break
+      case 'top':
+        this.$introTaglineBottom.hide()
+        this.$introTaglineTop.show()
+        this.$introTaglineTop.addClass(app.store.modalTaglineColor)
+        this.$introTaglineTop.text(app.store.modalTagline)
+        break
+      case 'bottom':
+        this.$introTaglineTop.hide()
+        this.$introTaglineBottom.show()
+        this.$introTaglineBottom.addClass(app.store.modalTaglineColor)
+        this.$introTaglineBottom.text(app.store.modalTagline)
+        break
+    }
+    if (modalTitle.length === 0) {
+      this.$introTitle.hide()
+    } else {
+      this.$introTitle.show()
+      this.$introTitle.text(modalTitle)
+    }
+    if (modalContent.length === 0) {
+      this.$introContent.hide()
+    } else {
+      this.$introContent.show()
+      this.$introContent.text(modalContent)
+    }
+    this.$introProceed.html(sanitize(modalButton))
+  },
+
+  show: function(){
+    this.alreadyShown = true
+    this.build()
+    this.$el.show()
+    setTimeout(function(){
+      this.$el.addClass('visible')
+    }.bind(this), 20)
+    app.curtain.show('opaque')
+    setTimeout(function(){
+      app.curtain.show('opaque')
+    }, 300)
+  },
+
+  hide: function(){
+    this.alreadyShown = true
+    localStorage.setItem('app.intro_modal_last_message', app.store.modalContent)
+    app.curtain.hide()
+    this.$el.removeClass('visible')
+    setTimeout(function(){
+      this.$el.hide()
+      app.curtain.$el.removeClass('opaque')
+      if (this.curtainBackgroundColor) {
+        app.curtain.$el.removeClass(this.curtainBackgroundColor)
+      }
+    }.bind(this), 300)
+  },
+
+  navigateToTagline: function(){
+    var modalTaglineHref = app.store.modalTaglineLink.trim()
+    if (modalTaglineHref.length) {
+      this.hide()
+      console.log(modalTaglineHref)
+      if (modalTaglineHref.indexOf('http') === 0) {
+        window.open(modalTaglineHref, '_system')
+      } else {
+        app.router.go(modalTaglineHref)
+      }
+    }
+  },
+
+  navigate: function(e){
+    var href = $(e.currentTarget).attr('href').replace('#', '')
+    console.log(href)
+    this.hide()
+    app.router.go(href)
+  },
+  
+  proceed: function(){
+    console.log('proceed')
+    this.hide()
+  },
+
+})
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/nav/IntroView.js b/StoneIsland/www/js/lib/nav/IntroView.js
index c075619a..8cb92b53 100755
--- a/StoneIsland/www/js/lib/nav/IntroView.js
+++ b/StoneIsland/www/js/lib/nav/IntroView.js
@@ -14,6 +14,7 @@ var IntroView = View.extend({
     this.compass = this.$("#compass").get(0)
     this.orient = this.deviceorientation.bind(this)
     this.$alert.hide()
+    this.modal = new IntroModal()
   },
   
   show: function(){
@@ -21,6 +22,7 @@ var IntroView = View.extend({
     window.addEventListener("deviceorientation", this.orient)
     app.footer.hide()
     this.orient({ alpha: 0 })
+    this.modal.check()
   },
   
   hide: function(){
diff --git a/StoneIsland/www/js/lib/nav/NavView.js b/StoneIsland/www/js/lib/nav/NavView.js
index a6a39633..bd068ce0 100755
--- a/StoneIsland/www/js/lib/nav/NavView.js
+++ b/StoneIsland/www/js/lib/nav/NavView.js
@@ -34,6 +34,7 @@ var NavView = View.extend({
     "click .returns": "returns",
     "click .terms": "terms",
     "click .care": "care",
+    "click .covid": "covid",
     
     "click .fb": "fb",
     "click .insta": "insta",
@@ -158,7 +159,10 @@ var NavView = View.extend({
     e.preventDefault()
     window.open("https://www.stoneisland.com/customercare?utm_source=AppMobile&utm_medium=referral&utm_campaign=CustomerCare", '_system')
   },
-
+  covid: function(e){
+    e.preventDefault()
+    window.open("https://www.stoneisland.com/system/selfservice.controller?CONFIGURATION=1701&PARTITION_ID=1&CMD=BROWSE_TOPIC&LANGUAGE=en&COUNTRY=us&USERTYPE=1&TOPIC_ID=149680", '_system')
+  },
 
   search: function(){
     this.hide()