From 10841ad1beacba0c5fa4c7e8b2a702ca7cba1b6e Mon Sep 17 00:00:00 2001 From: Lyndel Thomas Date: Tue, 25 Dec 2012 03:14:45 -0800 Subject: [PATCH] #8 slider working displaying and updating dates --- public/assets/js/main.js | 125 ++++++++++++++++++--------------------- views/index.html | 4 +- 2 files changed, 61 insertions(+), 68 deletions(-) diff --git a/public/assets/js/main.js b/public/assets/js/main.js index b48dcc8..184c615 100644 --- a/public/assets/js/main.js +++ b/public/assets/js/main.js @@ -59,75 +59,69 @@ function init(){ } -function slider() { - // get today's date - var today = new Date(); // looks like: Mon Dec 24 2012 17:58:26 GMT-0800 (PST) - // var today = new Date(2012, 01, 05, 00, 00, 00, 00); - - // get year from today's date - var year = today.getFullYear(); // looks like 2012 - - // get the day number of the year for todays date - var dateAsDayNumber = dateToDayNumber(today); // looks like 359 - - // setup the slider - initializeSlider(year, dateAsDayNumber); - - function initializeSlider(year, dateAsDayNumber) { - // get the width of the slider input - var sliderWidth = $('#slider input').width(); - // set the amount to multiply the date display position - var multiplier = sliderWidth / dateAsDayNumber; - var newdate = getSliderDate(year, dateAsDayNumber); - - // set the number of steps, max and value in slider to today - $('#slider input') - .attr('max', dateAsDayNumber) - .attr('value', dateAsDayNumber) - .attr('steps', dateAsDayNumber); - // set the position of the slider date display - $('#slider .date').css("left", dateAsDayNumber * multiplier +"px" ); - // update the date display - updateSliderDate(year, dateAsDayNumber); - } - - // monitor slider change and update slider date - $('#slider input').change(function() { - var currentDay = ($(this).val()); - updateSliderDate(year, currentDay); - }); - - function updateSliderDate(year, date) { - var newdate = getSliderDate(year, date); - +var slider = { + "init": function() { + var self = this; + // get today's date + this.today = new Date(); // looks like: Mon Dec 24 2012 17:58:26 GMT-0800 (PST) + // this.today = new Date(2012, 01, 05, 00, 00, 00, 00); + // get year from today's date + this.year = this.today.getFullYear(); // looks like 2012 + // get the day number of the year for todays date + this.dateAsDayNumber = this.dateToDayNumber(this.today); // looks like 359 + this.$slider = $('#slider input'); + this.$sliderDate = $('#slider .date'); + // setup the slider + this.initializeSlider(this.year, this.dateAsDayNumber); + // monitor slider change and update slider date + this.$slider.change(function() { + var currentDay = ($(this).val()); + self.updateSliderDate(self.year, currentDay); + }); + }, + // end init + + "initializeSlider": function(year, dateAsDayNumber) { + // get the width of the slider input + var width = this.$slider.width(); + // set the amount to multiply the date display position + this.multiplier = width / dateAsDayNumber; + this.newdate = this.getSliderDate(year, dateAsDayNumber); + // set the number of steps, max and value in slider to today + this.$slider + .attr('max', dateAsDayNumber) + .attr('value', dateAsDayNumber) + .attr('steps', dateAsDayNumber); + // set the position of the slider date display + this.$sliderDate.css("left", dateAsDayNumber * this.multiplier +"px" ); + // update the date display + this.updateSliderDate(year, dateAsDayNumber); + }, + + "updateSliderDate": function(year, date) { + var newdate = this.getSliderDate(year, date); var day = newdate.getDate(); var mon = newdate.getMonth() + 1; - var year = newdate.getFullYear(); - var pretty = mon + "-" + day + "-" + year; - var sliderWidth = $('#slider input').width(); - var multiplier = sliderWidth / dateAsDayNumber; - $('#slider .date').html(pretty); - $('#slider .date').css("left", date * multiplier +"px" ); - } - - - - - function getSliderDate(year, day) { - var dfd = dateFromDay(year, day); // looks like Mon Dec 24 2012 00:00:00 GMT-0800 (PST) + var fyear = newdate.getFullYear(); + var pretty = mon + "-" + day + "-" + fyear; + var width = this.$slider.width(); + var multiplier = width / this.dateAsDayNumber; + this.$sliderDate.html(pretty); + this.$sliderDate.css("left", date * multiplier +"px" ); + }, + // helper functions + "getSliderDate": function(year, day) { + var dfd = this.dateFromDay(year, day); // looks like Mon Dec 24 2012 00:00:00 GMT-0800 (PST) return(dfd); - } - - + }, // converts day of year (ie 359) to a date - function dateFromDay(year, day) { + "dateFromDay": function (year, day) { var date = new Date(year, 0); // initialize a date in `year-01-01` return new Date(date.setDate(day)); // add the number of days - } - + }, // returns date today as a number (ie 359) - function dateToDayNumber(date) { - var feb = daysInFebruary(date.getFullYear()); + "dateToDayNumber": function (date) { + var feb = this.daysInFebruary(date.getFullYear()); var aggregateMonths = [0, // January 31, // February 31 + feb, // March @@ -142,10 +136,9 @@ function slider() { 31 + feb + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30, // December ]; return aggregateMonths[date.getMonth()] + date.getDate(); - } - + }, // works out how many days in Feb for current year - function daysInFebruary(year) { + "daysInFebruary": function (year) { if(year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) { // Leap year return 29; @@ -154,4 +147,4 @@ function slider() { return 28; } } -} \ No newline at end of file +}; \ No newline at end of file diff --git a/views/index.html b/views/index.html index 6bb0b8a..e7387cf 100644 --- a/views/index.html +++ b/views/index.html @@ -15,7 +15,7 @@ -
+