Skip to content

Commit

Permalink
#8 slider working displaying and updating dates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryndel
ryndel committed Dec 25, 2012
1 parent ef34f26 commit 10841ad
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 68 deletions.
125 changes: 59 additions & 66 deletions public/assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand All @@ -154,4 +147,4 @@ function slider() {
return 28;
}
}
}
};
4 changes: 2 additions & 2 deletions views/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</div>
</div>

<div id="slider">
<div id="slider" style="display:none">
<div style="position:relative; height:20px">
<div class="date"></div>
</div>
Expand All @@ -41,7 +41,7 @@

<script type="text/javascript">
init();
slider();
slider.init();
</script>


Expand Down

0 comments on commit 10841ad

Please sign in to comment.