diff options
| -rw-r--r-- | client/button.js | 101 | ||||
| -rw-r--r-- | client/colors.less | 34 | ||||
| -rw-r--r-- | client/templates/dates.html | 10 |
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> |