play/pause confetti, logo styling etc

6 files changed, 40 insertions, 6 deletions

diff --git a/studio-susie/public/assets/css/css.css b/studio-susie/public/assets/css/css.css
index 7bcd2cc..73163be 100644
--- a/studio-susie/public/assets/css/css.css
+++ b/studio-susie/public/assets/css/css.css
@@ -38,6 +38,14 @@ h1, h2 {
 .mobile .section {
   background-size: contain;
 }
+.plaque {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: white;
+}
+.desktop .plaque:hover {
+}
 
 #nav {
   position: fixed;
@@ -55,7 +63,7 @@ h1, h2 {
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
-  background-color: rgba(255,255,255,0.9);
+  background-color: rgba(255,255,255,0.2);
   opacity: 0;
   color: black;
   transition: opacity 800ms;
diff --git a/studio-susie/public/assets/js/app.js b/studio-susie/public/assets/js/app.js
index 0f64ad2..3c2fd37 100644
--- a/studio-susie/public/assets/js/app.js
+++ b/studio-susie/public/assets/js/app.js
@@ -63,10 +63,21 @@ var app = (function() {
         }
         img.src = url
       })
-      $('#fullpage').fullpage({
-        css3: true,
-        scrollingSpeed: 1000
-      })
+      app.fullpage()
+    })
+  }
+  
+  app.fullpage = function(){
+    $('#fullpage').fullpage({
+      css3: true,
+      scrollingSpeed: 800,
+      continuousVertical: false,
+      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
+//         app.views.painting.show_slide(index)
+      },
+      onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
+//         app.views.painting.hide_slide()
+      }
     })
   }
   
diff --git a/studio-susie/public/assets/js/lib/view/PageView.js b/studio-susie/public/assets/js/lib/view/PageView.js
index d69328e..10f18d6 100644
--- a/studio-susie/public/assets/js/lib/view/PageView.js
+++ b/studio-susie/public/assets/js/lib/view/PageView.js
@@ -20,10 +20,12 @@ var PageView = View.extend({
     this.render(this.data)
     document.body.className = "pageopen"
     MAKE_CONFETTI()
+    confetti_on = true
   },
 
   hide: function(){
     document.body.className = ""
+    confetti_on = false
     $(".visible").removeClass("visible")
     $("#nav a.active").removeClass('active')
   },
diff --git a/studio-susie/public/assets/js/lib/view/PaintingView.js b/studio-susie/public/assets/js/lib/view/PaintingView.js
index 1fdc179..5c4f3bd 100644
--- a/studio-susie/public/assets/js/lib/view/PaintingView.js
+++ b/studio-susie/public/assets/js/lib/view/PaintingView.js
@@ -27,6 +27,10 @@ var PaintingView = View.extend({
   },
 
   load: function(id){
+    var index = this.data.paintings.map(function(p){ return p.id }).indexOf(id)
+    if (index) {
+      $.fn.fullpage.moveTo(index+1)
+    }
   },
 
 })
diff --git a/studio-susie/public/assets/js/vendor/confetti.js b/studio-susie/public/assets/js/vendor/confetti.js
index d7eaeb2..3abb2e5 100644
--- a/studio-susie/public/assets/js/vendor/confetti.js
+++ b/studio-susie/public/assets/js/vendor/confetti.js
@@ -1,4 +1,5 @@
 var made_confetti = false
+var confetti_on = true
 function MAKE_CONFETTI() {
   if (made_confetti) return
   made_confetti = true
@@ -108,6 +109,7 @@ function MAKE_CONFETTI() {
   confetti_step = function() {
     var c, j, len, results;
     requestAnimationFrame(confetti_step);
+    if (! confetti_on) return
     context.clearRect(0, 0, w, h);
     results = [];
     for (j = 0, len = confetti.length; j < len; j++) {
diff --git a/studio-susie/templates/index.liquid b/studio-susie/templates/index.liquid
index cdc1f15..c31c37f 100644
--- a/studio-susie/templates/index.liquid
+++ b/studio-susie/templates/index.liquid
@@ -105,10 +105,17 @@
 
 <div id="fullpage">
 {% for painting in paintings %}
-  <div class="section {% if painting.contain %}contain{% endif %}" data-image="{{ painting.image.uri }}"></div>
+  <div class="section {% if painting.contain %}contain{% endif %}" data-image="{{ painting.image.uri }}">
+    {% unless painting.title contains "IMG" %}
+      <div class="plaque">
+        <b>{{painting.title}}</b>{% if painting.date %}, {{painting.date}}.{% endif %} {{painting.description}}
+      </div>
+    {% endunless %}
+  </div>
 {% endfor %}
 </div>
 
+
 <div id="rapper">
 
   <div id="nav">