Date selection works

3 files changed, 114 insertions, 31 deletions

diff --git a/client/button.js b/client/button.js
index 81b70b3..2e15ca8 100644
--- a/client/button.js
+++ b/client/button.js
@@ -1,3 +1,32 @@
+function prepareDates() {
+  var month = $('input[name=month]').val();
+  var year = $('input[name=year]').val();
+  if (month !== undefined && year !== undefined) {
+    Meteor.call('getInstagramMedia', +("20"+year), +month, function(error, results) {
+      // console.log('Instagram response', results.data);
+      if (results.data.data.length > 0) {
+        var photos = _.sortBy(results.data.data, function(p) {
+          return p.created_time;
+        });
+
+        Session.set('date', { month: month, year: year });
+        Session.set('photos', photos);
+
+        Meteor.call('getInstagramUsername', function (err, res) {
+          Session.set('username', res);
+        });
+
+        $('form.dates div.error').hide();
+        $('form.dates button.next').show();
+      }
+      else {
+        $('form.dates button.next').hide();
+        $('form.dates div.error').show();
+      }
+    });
+  }
+}
+
 function animate() {
   var delay = 0;
 
@@ -157,33 +186,59 @@ Template.layout.events({
 })
 
 Template.dates.events({
-  'click input.monthOptions, click input.yearOptions': function (event) {
-    var month = $('input[name=monthOptions]:checked').val();
-    var year = $('input[name=yearOptions]:checked').val();
-    if (month !== undefined && year !== undefined) {
-      Meteor.call('getInstagramMedia', +year, +month, function(error, results) {
-        console.log('Instagram response', results.data);
-        if (results.data.data.length > 0) {
-          var photos = _.sortBy(results.data.data, function(p) {
-            return p.created_time;
-          });
+  'scroll .month-wrapper': function (e) {
+    var elements = $('.month-wrapper').find('.month').length;
+    var totalheight = $('.month-wrapper').css('height').replace('px','') * elements;
+    var elementheight = totalheight/elements;
+    var offset = e.target.scrollTop;
+    var distance;
 
-          Session.set('date', { month: month, year: year });
-          Session.set('photos', photos);
+    lastclosest = 9999;
+    lastclosestelement = 0;
+    for (i=0;i<elements;i++) {
+      distance = Math.abs(offset - (i * elementheight));
+      if (distance < lastclosest) {
+        lastclosest = distance;
+        lastclosestelement = i;
+      }
+    }
 
-          Meteor.call('getInstagramUsername', function (err, res) {
-            Session.set('username', res);
-          });
+    if (window.datesTimeout !== undefined)
+      clearTimeout(window.datesTimeout);
+    window.datesTimeout = setTimeout(function(){
+      $('.month-wrapper').animate({ scrollTop: lastclosestelement * elementheight+"px"});
+      $('#month').val($('.month').eq(lastclosestelement).html());
+      prepareDates();
+    }, 200);
 
-          $('form.dates div.error').hide();
-          $('form.dates button.dates').show();
-        }
-        else {
-          $('form.dates button.dates').hide();
-          $('form.dates div.error').show();
-        }
-      });
+    lastOffsetMonth = e.target.scrollTop;
+  },
+  'scroll .year-wrapper': function (e) {
+    var elements = $('.year-wrapper').find('.year').length;
+    var totalheight = $('.year-wrapper').css('height').replace('px','') * elements;
+    var elementheight = totalheight/elements;
+    var offset = e.target.scrollTop;
+    var distance;
+
+    lastclosest = 9999;
+    lastclosestelement = 0;
+    for (i=0;i<elements;i++) {
+      distance = Math.abs(offset - (i * elementheight));
+      if (distance < lastclosest) {
+        lastclosest = distance;
+        lastclosestelement = i;
+      }
     }
+
+    if (window.datesTimeout !== undefined)
+      clearTimeout(window.datesTimeout);
+    window.datesTimeout = setTimeout(function(){
+      $('.year-wrapper').animate({ scrollTop: lastclosestelement * elementheight+"px" });
+      $('#year').val($('.year').eq(lastclosestelement).html());
+      prepareDates();
+    }, 200);
+
+    lastOffsetYear = e.target.scrollTop;
   },
   'submit form.dates': function (event) {
     $('div.about-link').hide();
diff --git a/client/colors.less b/client/colors.less
index 4faa9a5..3e4e458 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -103,7 +103,7 @@ body {
         .month-wrapper {
           overflow: scroll;
           float: left;
-          height: 410px;
+          height: 250px;
           position: relative;
           width: 420px;
           -webkit-overflow-scrolling: touch;
@@ -121,7 +121,7 @@ body {
         .year-wrapper {
           overflow: scroll;
           float: left;
-          height: 410px;
+          height: 250px;
           position: relative;
           width: 420px;
           -webkit-overflow-scrolling: touch;
@@ -133,18 +133,44 @@ body {
         }
 
         .month {
-          height: 410px;
+          height: 250px;
           overflow: hidden;
           width: 390px;
           text-align: right;
         }
 
         .year {
-          height: 410px;
+          height: 250px;
           overflow: hidden;
           width: 390px;
         }
       }
+      form.dates {
+        display: block;
+        div.error {
+          font-family: 'Cutive Mono', serif;
+          text-align: center;
+          width: 600px;
+          margin: 0 auto;
+        }
+        button.next {
+          margin: 0 auto;
+          display: block;
+          font-size: 2.8em;
+          font-weight: bold;
+          line-height: 1.3em;
+          margin-bottom: 14px;
+          padding: 0px 3px;
+          color: black;
+          background-color: white;
+          border: 0px;
+          border-bottom: 6px black solid;
+          &:hover, &:active {
+            color: white;
+            background-color: black;
+          }
+        }
+      }
     }
     div.photos-wrapper {
       ol.steps {
diff --git a/client/templates/dates.html b/client/templates/dates.html
index 7e277c5..62a6a77 100644
--- a/client/templates/dates.html
+++ b/client/templates/dates.html
@@ -28,10 +28,12 @@
           </div>
         </div>
       </div>
-      <form class="date-form">
-        <input type="hidden" name="month" id="month" value="01">
-        <input type="hidden" name="year" id="year" value="15">
-      </form>
     </div>
+    <form class="dates">
+      <input type="hidden" name="month" id="month" value="01">
+      <input type="hidden" name="year" id="year" value="15">
+      <div class="error" style="display: none;">Apparently you don't have enough photos to create a statistic from, please choose another month and try again</div>
+      <button class="next" style="display: none;">Start</button>
+    </form>
   </div>
 </template>