Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

De-jQuery-fication #21

Closed
wants to merge 1 commit into from

2 participants

@rakeshpai

Removed jQuery dep. Added 4 (!) more deps in the process, but I think it's worth it. What do you think?

(Also, there were some errors in the example.html file, which I've fixed.)

@rakeshpai

BTW, if you don't care about IE <= 8, we could get rid of the 'get-by-class' and 'event' dependency. I don't care about it too much. Your call.

@dominicbarnes

jQuery removed via #32 (just merged)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 8, 2013
  1. @rakeshpai

    De-jquery-fication

    rakeshpai authored
This page is out of date. Refresh to see the latest.
Showing with 125 additions and 53 deletions.
  1. +5 −2 component.json
  2. +5 −5 example.html
  3. +5 −4 lib/calendar.js
  4. +110 −42 lib/days.js
View
7 component.json
@@ -10,9 +10,12 @@
],
"dependencies": {
"component/range": "*",
- "component/jquery": "*",
"component/emitter": "*",
- "component/in-groups-of": "*"
+ "component/in-groups-of": "*",
+ "component/domify": "*",
+ "component/classes": "*",
+ "component/event": "*",
+ "javve/get-by-class": "*"
},
"development": {
"component/aurora-calendar": "*"
View
10 example.html
@@ -48,7 +48,7 @@
console.log('change %s', action);
var twoDate = new Date(date);
twoDate.setMonth(date.getMonth() + 1)
- two.show(twoDate);
+ small.show(twoDate);
});
one.on('change', function(date){
@@ -58,19 +58,19 @@
date.getFullYear());
var newDate = new Date(date);
newDate.setMonth(date.getMonth() + 1);
- two.select(newDate);
+ small.select(newDate);
});
- one.el.appendTo('body');
+ document.body.appendChild(one.el);
var small = new Calendar;
small.addClass('small');
- small.el.appendTo('body');
+ document.body.appendChild(small.el);
small.next();
var large = new Calendar;
large.addClass('large');
- large.el.appendTo('body');
+ document.body.appendChild(large.el);
</script>
</body>
</html>
View
9 lib/calendar.js
@@ -3,7 +3,8 @@
* Module dependencies.
*/
-var o = require('jquery')
+var domify = require('domify')
+ , classes = require('classes')
, Emitter = require('emitter')
, template = require('./template')
, Days = require('./days')
@@ -33,9 +34,9 @@ module.exports = Calendar;
function Calendar(date) {
Emitter.call(this);
var self = this;
- this.el = o('<div class=calendar></div>');
+ this.el = domify('<div class=calendar></div>')[0];
this.days = new Days;
- this.el.append(this.days.el);
+ this.el.appendChild(this.days.el);
this.on('change', this.show.bind(this));
this.days.on('prev', this.prev.bind(this));
this.days.on('next', this.next.bind(this));
@@ -64,7 +65,7 @@ Emitter(Calendar.prototype);
*/
Calendar.prototype.addClass = function(name){
- this.el.addClass(name);
+ classes(this.el).add(name);
return this;
};
View
152 lib/days.js
@@ -3,7 +3,10 @@
* Module dependencies.
*/
-var o = require('jquery')
+var classes = require('classes')
+ , domify = require('domify')
+ , byClass = require('get-by-class')
+ , ev = require('event')
, Emitter = require('emitter')
, template = require('./template')
, inGroupsOf = require('in-groups-of')
@@ -49,6 +52,41 @@ function isLeapYear(year) {
}
/**
+ * Get the text contents of a node
+ *
+ * @param {Element} root node
+ * @return {String} text contents
+ * @api private
+ */
+
+function text(node) {
+ return node.textContent || node.innerText;
+}
+
+/**
+ * Get/set dropdown's value
+ *
+ * @param {Element} dropdown
+ * @param {String} (Optional) value to set the dropdown to
+ * @return {String} value if used as getter
+ * @api private
+ */
+
+function val(dropdown, value) {
+ if(!dropdown) return;
+ if (value) {
+ for (var i=0; i<dropdown.options.length; i++){
+ if (dropdown.options[i].value == value){
+ dropdown.options[i].selected = true;
+ return;
+ }
+ }
+ } else {
+ return dropdown.options[dropdown.selectedIndex].value;
+ }
+}
+
+/**
* Expose `Days`.
*/
@@ -69,36 +107,39 @@ module.exports = Days;
function Days() {
Emitter.call(this);
var self = this;
- this.el = o(template).addClass('calendar-days');
- this.head = this.el.find('thead');
- this.body = this.el.find('tbody');
- this.title = this.head.find('.title');
+ this.el = domify(template)[0];
+ classes(this.el).add('calendar-days');
+ this.head = this.el.getElementsByTagName('thead')[0];
+ this.body = this.el.getElementsByTagName('tbody')[0];
+ this.title = byClass(this.head, 'title', true);
this.select(new Date);
// emit "day"
- this.body.on('click', 'a', function(e){
- var el = o(e.target);
- var day = parseInt(el.text(), 10);
- var data = el.data('date').split('-');
- var year = data[0];
- var month = data[1];
- var date = new Date;
- date.setYear(year);
- date.setMonth(month);
- date.setDate(day);
- self.select(date);
- self.emit('change', date);
- return false;
+ ev.bind(this.body, 'click', function(e){
+ if(e.target && e.target.nodeName === 'A') {
+ var el = e.target;
+ var day = parseInt(text(el), 10);
+ var data = el.getAttribute('data-date').split('-');
+ var year = data[0];
+ var month = data[1];
+ var date = new Date;
+ date.setYear(year);
+ date.setMonth(month);
+ date.setDate(day);
+ self.select(date);
+ self.emit('change', date);
+ return false;
+ }
});
// emit "prev"
- this.el.find('.prev').click(function(){
+ ev.bind(byClass(this.head, 'prev', true), 'click', function(){
self.emit('prev');
return false;
});
// emit "next"
- this.el.find('.next').click(function(){
+ ev.bind(byClass(this.head, 'next', true), 'click', function(){
self.emit('next');
return false;
});
@@ -111,6 +152,18 @@ function Days() {
Emitter(Days.prototype);
/**
+ * Get calendar-select node
+ *
+ * @param {String} class name of dropdown
+ * @return {Element}
+ * @api private
+ */
+
+Days.prototype._calendarSelect = function(rootClass){
+ return byClass(byClass(this.title, rootClass, true), 'calendar-select', true);
+}
+
+/**
* Select the given `date`.
*
* @param {Date} date
@@ -135,10 +188,18 @@ Days.prototype.show = function(date){
var month = date.getMonth();
this.showSelectedYear(year);
this.showSelectedMonth(month);
- this.head.find('.subheading').remove();
- this.head.append(this.renderHeading(2));
- this.body.empty();
- this.body.append(this.renderDays(date));
+ var subheading = byClass(this.head, 'subheading', true);
+ if (subheading){
+ this.head.removeChild(subheading);
+ }
+ this.head.appendChild(this.renderHeading(2));
+ while (this.body.firstChild){
+ this.body.removeChild(this.body.firstChild);
+ }
+ var dayRows = this.renderDays(date);
+ for (var i=0;i<dayRows.length;i++){
+ this.body.appendChild(dayRows[i]);
+ }
};
/**
@@ -151,9 +212,10 @@ Days.prototype.show = function(date){
Days.prototype.yearMenu = function(from, to){
this.selectYear = true;
- this.title.find('.year').html(yearDropdown(from, to));
+ var title = this.head.getElementsByTagName('td')[1];
+ byClass(this.title, 'year', true).innerHTML = yearDropdown(from, to);
var self = this;
- this.title.find('.year .calendar-select').change(function(){
+ ev.bind(this._calendarSelect('year'), 'change', function(){
self.emit('year');
return false;
});
@@ -167,9 +229,9 @@ Days.prototype.yearMenu = function(from, to){
Days.prototype.monthMenu = function(){
this.selectMonth = true;
- this.title.find('.month').html(monthDropdown());
+ byClass(this.title, 'month', true).innerHTML = monthDropdown();
var self = this;
- this.title.find('.month .calendar-select').change(function(){
+ ev.bind(this._calendarSelect('month'), 'change', function(){
self.emit('month');
return false;
});
@@ -183,9 +245,9 @@ Days.prototype.monthMenu = function(){
Days.prototype.titleYear = function(){
if (this.selectYear) {
- return this.title.find('.year .calendar-select').val();
+ return val(this._calendarSelect('year'));
} else {
- return this.title.find('.year').text();
+ return text(byClass(this.title, 'year', true));
}
};
@@ -197,9 +259,9 @@ Days.prototype.titleYear = function(){
Days.prototype.titleMonth = function(){
if (this.selectMonth) {
- return this.title.find('.month .calendar-select').val();
+ return val(this._calendarSelect('month'));
} else {
- return this.title.find('.month').text();
+ return text(byClass(this.title, 'month', true));
}
};
@@ -227,7 +289,7 @@ Days.prototype.renderHeading = function(len){
var rows = '<tr class=subheading>' + days.map(function(day){
return '<th>' + day.slice(0, len) + '</th>';
}).join('') + '</tr>';
- return o(rows);
+ return domify(rows)[0];
};
/**
@@ -243,7 +305,7 @@ Days.prototype.renderDays = function(date){
var html = rows.map(function(row){
return '<tr>' + row.join('') + '</tr>';
}).join('\n');
- return o(html);
+ return domify(html);
};
/**
@@ -306,9 +368,9 @@ Days.prototype.rowsFor = function(date){
Days.prototype.showSelectedYear = function(year){
if (this.selectYear) {
- this.title.find('.year .calendar-select').val(year);
+ val(this._calendarSelect('year'), year);
} else {
- this.title.find('.year').text(year);
+ byClass(this.title, 'year', true).innerHTML = year;
}
};
@@ -321,9 +383,9 @@ Days.prototype.showSelectedYear = function(year){
Days.prototype.showSelectedMonth = function(month) {
if (this.selectMonth) {
- this.title.find('.month .calendar-select').val(month);
+ val(this._calendarSelect('year'), month);
} else {
- this.title.find('.month').text(months[month]);
+ byClass(this.title, 'month', true).innerHTML = months[month];
}
};
@@ -387,8 +449,11 @@ function nextMonthDay(year, month, day) {
function yearDropdown(from, to) {
var years = range(from, to, 'inclusive');
- var options = o.map(years, yearOption).join('');
- return '<select class="calendar-select">' + options + '</select>';
+ var options = [];
+ for (var i=0;i<years.length;i++){
+ options.push(yearOption(years[i]));
+ }
+ return '<select class="calendar-select">' + options.join('') + '</select>';
}
/**
@@ -396,8 +461,11 @@ function yearDropdown(from, to) {
*/
function monthDropdown() {
- var options = o.map(months, monthOption).join('');
- return '<select class="calendar-select">' + options + '</select>';
+ var options = [];
+ for (var i=0;i<months.length;i++){
+ options.push(monthOption(months[i], i));
+ }
+ return '<select class="calendar-select">' + options.join(''); + '</select>';
}
/**
Something went wrong with that request. Please try again.