vv basic archive ui

2 files changed, 109 insertions, 16 deletions

diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 84e21692..d3e182ea 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -160,26 +160,94 @@
     </div>
     <div class="fade-cover"></div>
   </div>
+<style>
+#archive .heading {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  pointer-events: none;
+}
+#archive.menu .menu {
+  opacity: 1;
+  pointer-events: auto;
+}
+#archive .menu {
+  background: rgba(255,255,255,0.8);
+  position: absolute;;
+  top: 0; left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+#archive .menu .items {
+  border-top: 1px solid black;
+  width: 100%;
+}
+#archive .menu .item {
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px solid black;
+  background: white;
+}
+#archive .scroll {
+  top: 0; left: 0;
+  height: 100%;
+}
+#archive .row {
+  position: relative;
+  min-height: 80vh;
+  perspective: 500;
+}
+#archive .menu .items,
+#archive .row .image,
+#archive .row .text {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform-origin: 50% 50%;
+  transform: translateZ(0) translateX(-50%) translateY(-50%);
+}
+#archive .row .image {
+  width: 100%; height: 100%;
+  background-repeat: no-repeat;
+  background-size: 80% auto;
+  background-position: center center;
+}
+#archive .row .text {
+}
+</style>
 
   <div id="archive">
     <div class="scroll">
-      <h1>ARCHIVE</h1>
-      <div class="subtitle">'982-'015</div>
       <div class="content">
         <script type="text/html" class="template">
-          <img src="{{image}}">
-          <div class="above">
-            <h2>
-              <b>{{code}}</b><br>
-              {{title}}
-            </h2>
-            <div class="body">
-              {{body}}
+          <div class="row">
+            <div class="image" style="background-image:url({{image}})"></div>
+            <div class="text">
+              <h2>
+                <b>{{code}}</b><br>
+                {{label}}
+              </h2>
+              <div class="body">
+                {{caption}}
+              </div>
             </div>
           </div>
         </script>
       </div>
     </div>
+    <div class="menu">
+      <div class="items">
+        <script type="text/html" class="template">
+          <div class="item">{{title}}</div>
+        </script>
+      </div>
+    </div>
+    <div class="heading">
+      <h1>ARCHIVE</h1>
+      <div class="subtitle">'982-'015</div>
+    </div>
   </div>
   
   <div id="privacy" class="page">
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 051ef0c9..3ba1dfb2 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -1,20 +1,34 @@
 var ArchiveView = ScrollableView.extend({
   
   el: "#archive",
-  template: $("#archive .template").html(),
+  menu_template: $("#archive .menu .template").html(),
+  row_template: $("#archive .scroll .template").html(),
   
   events: {
+    "click .item": "pick",
   },
   
   initialize: function(){
+    this.$menu_items = this.$(".menu .items")
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#archive', app.iscroll_options)
+    this.scroller = new IScroll('#archive .scroll', app.iscroll_options)
   },
 
+  back: function(){
+    this.$el.addClass("menu")
+    app.header.set_back(false)
+  },
+
+  pick: function(){
+    this.$el.removeClass("menu")
+    app.header.set_back(true)    
+  },
+  
   show: function(){
     this.deferScrollToTop()
     app.footer.hide()
+    this.back()
     document.body.className = "archive"
   },
 
@@ -24,12 +38,23 @@ var ArchiveView = ScrollableView.extend({
     this.$content.empty()
     
     // id title images[ uri label code caption ]
-    this.data.forEach(function(row){
-      var t = this.template.replace(/{{image}}/, row.images[0].uri)
-                           .replace(/{{code}}/, row.code)
-                           .replace(/{{title}}/, row.title)
+    this.data.forEach(function(row, index){
+      var t = this.row_template.replace(/{{image}}/, row.images[0].uri)
+                               .replace(/{{label}}/, row.images[0].label)
+                               .replace(/{{code}}/, row.images[0].code)
+                               .replace(/{{caption}}/, row.images[0].caption)
       this.$content.append(t)
+
+      var t = this.menu_template.replace(/{{title}}/, row.title)
+      var $t = $(t)
+      $t.data("title", row.title)
+      $t.data("index", index)
+      this.$menu_items.append($t)
     }.bind(this))
+    
+    
+    this.back()
+    this.deferScrollToTop()
   },
 
 })
\ No newline at end of file