modules/todolist/todolist.js

// $Id: todolist.js,v 1.5.2.1 2009/10/08 19:00:20 marvil07 Exp $

/**
 * Todolist class.
 */
var TodoList = {
  add_incomplete_list: function() {
    if (!$('.todolist.incomplete').length) {
      $('<ul class="todolist incomplete"></ul>').appendTo('#todolist-add-task-form ~ div.item-list:first');
    }

    // create one nub for each incomplete list item
    $('.todolist.incomplete .task').each(TodoList.add_nub);

      // make every incomplete todolist sortable
      $('.todolist.incomplete').sortable({
        revert:  true,
        handle: '.reorder',
        update: TodoList.incomplete_list_reorder,
        items: 'li',
        opacity: 0.5,
        zindex: 999999
      });
  },

  incomplete_list_reorder: function(obj) {
    var serial = $('.todolist.incomplete').sortable('serialize');
    $.ajax({
      type: 'POST',
      url: Drupal.settings.basePath + 'index.php?q=todolist/reorder_task',
      data: serial
    });
  },

  /**
   * Bind event hooks to complete/uncomplete a task.
   */
  bind_task: function() {
    $('input[@type=checkbox]', this).click(function() {
      var element = $(this).parent();
      $.ajax({
        type: 'POST',
        url: Drupal.settings.basePath + 'index.php?q=todolist/toggle_task',
        data: 'id='+this.name+'&checked='+(this.checked? '1' : '0')+'&sort='+(this.checked? -1 : $('.todolist.incomplete .task').length+1),
        dataType: 'script',
        beforeSend: function() { $(element).addClass('loading'); },
        complete: function() { $(element).removeClass('loading'); },
      });
    });
  },

  delete_task: function(id) {
    var element = $('#'+id);
    $.ajax({
      type: 'POST',
      url: Drupal.settings.basePath + 'index.php?q=todolist/delete_task',
      data: 'id='+id,
      dataType: 'script',
      beforeSend: function() { $(element).addClass('loading'); },
      complete: function() { $(element).removeClass('loading'); },
    });
    return false;
  },

  edit_task: function(id) {
    if (id instanceof Object) {
      var element = $(this).parent();
      $.ajax({
        type: 'POST',
        url: Drupal.settings.basePath + 'index.php?q=todolist/edit_task',
        data: $('input, textarea, select', this).serialize(),
        dataType: 'script',
        beforeSend: function() { $(element).addClass('loading'); },
        complete: function() { $(element).removeClass('loading'); },
      });
    } else {
      var element = $('#'+id);
      $.ajax({
        type: 'GET',
        url: Drupal.settings.basePath + 'index.php?q=todolist/edit_task&id='+id,
        dataType: 'script',
        beforeSend: function() { $(element).addClass('loading'); },
        complete: function() { $(element).removeClass('loading'); },
      });
    }
    return false;
  },

  /**
   * Create one nub for each incomplete list item.
   */
  add_nub: function() {
    if (!$('.nub', this).length) {
      $(this).prepend(
        '<div class="nub" style="display:none">' +
        '  <a href="javascript:void(0)" title="Delete this task" class="delete" onclick="return TodoList.delete_task(\''+ $('input[@type=checkbox]', this).attr('name') +'\')">Delete</a>' +
        '  <a href="javascript:void(0)" title="Edit this task" class="edit" onclick="return TodoList.edit_task(\''+ $('input[@type=checkbox]', this).attr('name') +'\')">Edit</a>' +
        '  <a href="javascript:void(0)" title="Reorder this task" class="reorder">Reorder</a>' +
        '</div>'
      ).each(TodoList.bind_nub);
    }
  },

  /**
   * Bind event hooks to hide/show the nub.
   */
  bind_nub: function() {
    if (!$('.nub', this).length) {
      return $(this).each(TodoList.add_nub);
    }

    $(this).mouseover(function() {
      with ($('.nub', this)) {
        TodoList.NubTimer.exec(); // hide all other nubs
        css('display', 'block'); // must render before offsetWidth can be calculated
        css('left', (get(0).offsetWidth*-1)+'px');
        css('top', '-4px');
      }

      TodoList.NubTimer.stop();
    });
    $(this).mouseout(function() { TodoList.NubTimer.start(); });
    $('.nub', this).mouseover(function() { TodoList.NubTimer.stop(); });
    $('.nub', this).mouseout(function() { TodoList.NubTimer.start(); });
  },

  /**
   * Unbind event hooks to hide/show the nub.
   */
  unbind_nub: function() {
    $(this).unbind('mouseover');
    $(this).unbind('mouseout');
    $('.nub', this).unbind('mouseover');
    $('.nub', this).unbind('mouseout');
    TodoList.NubTimer.exec(); // hide all nubs
  },

  /**
   * Nub Timer class.
   */
  NubTimer: {
    tid: 0, // Timer ID

    /**
     * Start the Nub Timer.
     */
    start: function() {
      this.stop();
      this.tid = setTimeout(this.exec, 300); // start timer
    },

    /**
     * Stop the Nub Timer.
     */
    stop: function() {
      if (this.tid) {
        clearTimeout(this.tid); // stop timer
        this.tid = 0;
      }
    },

    /**
     * Execute the Nub Timer.
     */
    exec: function() {
      $('.todolist .nub').css('display', 'none');
      this.stop();
    }
  }
};

$(function() {
  TodoList.add_incomplete_list();

  $.ajaxSetup({
    error: function(xml, status, e) {
      if (status == 'error' && e) {
        alert('An exception occurred in the script. Error name: ' + e.name + '. Error message: ' + e.message);
      } else if (xml.status == 0) {
        // retry
        $.ajax({
          type: this.type,
          url: this.url,
          data: this.data,
          dataType: this.dataType,
        });
      } else
        alert('Unknown AJAX Error: ' + status + ' Status:' + xml.status + ' ' + xml.statusText);
    },
  });

  $('#todolist-add-task-form').submit(function() {
    $('input#edit-task', this).val($.trim($('input#edit-task', this).val()));
    if ($('input', this).val() === '') {
      return false;
    }
    $.ajax({
      type: 'POST',
      url: Drupal.settings.basePath + 'index.php?q=todolist/create_task',
      data: $('input, select', this).serialize() + '&sort='+($('.todolist.incomplete .task').length+1),
      dataType: 'script',
    });
    this.reset();
    return false;
  });

  // Bind event hooks to complete/uncomplete a task.
  $('.todolist .task').each(TodoList.bind_task);
});
1	// $Id: todolist.js,v 1.5.2.1 2009/10/08 19:00:20 marvil07 Exp $
2
3	/**
4	* Todolist class.
5	*/
6	var TodoList = {
7	add_incomplete_list: function() {
8	if (!$('.todolist.incomplete').length) {
9	$('<ul class="todolist incomplete"></ul>').appendTo('#todolist-add-task-form ~ div.item-list:first');
10	}
11
12	// create one nub for each incomplete list item
13	$('.todolist.incomplete .task').each(TodoList.add_nub);
14
15	// make every incomplete todolist sortable
16	$('.todolist.incomplete').sortable({
17	revert: true,
18	handle: '.reorder',
19	update: TodoList.incomplete_list_reorder,
20	items: 'li',
21	opacity: 0.5,
22	zindex: 999999
23	});
24	},
25
26	incomplete_list_reorder: function(obj) {
27	var serial = $('.todolist.incomplete').sortable('serialize');
28	$.ajax({
29	type: 'POST',
30	url: Drupal.settings.basePath + 'index.php?q=todolist/reorder_task',
31	data: serial
32	});
33	},
34
35	/**
36	* Bind event hooks to complete/uncomplete a task.
37	*/
38	bind_task: function() {
39	$('input[@type=checkbox]', this).click(function() {
40	var element = $(this).parent();
41	$.ajax({
42	type: 'POST',
43	url: Drupal.settings.basePath + 'index.php?q=todolist/toggle_task',
44	data: 'id='+this.name+'&checked='+(this.checked? '1' : '0')+'&sort='+(this.checked? -1 : $('.todolist.incomplete .task').length+1),
45	dataType: 'script',
46	beforeSend: function() { $(element).addClass('loading'); },
47	complete: function() { $(element).removeClass('loading'); },
48	});
49	});
50	},
51
52	delete_task: function(id) {
53	var element = $('#'+id);
54	$.ajax({
55	type: 'POST',
56	url: Drupal.settings.basePath + 'index.php?q=todolist/delete_task',
57	data: 'id='+id,
58	dataType: 'script',
59	beforeSend: function() { $(element).addClass('loading'); },
60	complete: function() { $(element).removeClass('loading'); },
61	});
62	return false;
63	},
64
65	edit_task: function(id) {
66	if (id instanceof Object) {
67	var element = $(this).parent();
68	$.ajax({
69	type: 'POST',
70	url: Drupal.settings.basePath + 'index.php?q=todolist/edit_task',
71	data: $('input, textarea, select', this).serialize(),
72	dataType: 'script',
73	beforeSend: function() { $(element).addClass('loading'); },
74	complete: function() { $(element).removeClass('loading'); },
75	});
76	} else {
77	var element = $('#'+id);
78	$.ajax({
79	type: 'GET',
80	url: Drupal.settings.basePath + 'index.php?q=todolist/edit_task&id='+id,
81	dataType: 'script',
82	beforeSend: function() { $(element).addClass('loading'); },
83	complete: function() { $(element).removeClass('loading'); },
84	});
85	}
86	return false;
87	},
88
89	/**
90	* Create one nub for each incomplete list item.
91	*/
92	add_nub: function() {
93	if (!$('.nub', this).length) {
94	$(this).prepend(
95	'<div class="nub" style="display:none">' +
96	' <a href="javascript:void(0)" title="Delete this task" class="delete" onclick="return TodoList.delete_task(\''+ $('input[@type=checkbox]', this).attr('name') +'\')">Delete</a>' +
97	' <a href="javascript:void(0)" title="Edit this task" class="edit" onclick="return TodoList.edit_task(\''+ $('input[@type=checkbox]', this).attr('name') +'\')">Edit</a>' +
98	' <a href="javascript:void(0)" title="Reorder this task" class="reorder">Reorder</a>' +
99	'</div>'
100	).each(TodoList.bind_nub);
101	}
102	},
103
104	/**
105	* Bind event hooks to hide/show the nub.
106	*/
107	bind_nub: function() {
108	if (!$('.nub', this).length) {
109	return $(this).each(TodoList.add_nub);
110	}
111
112	$(this).mouseover(function() {
113	with ($('.nub', this)) {
114	TodoList.NubTimer.exec(); // hide all other nubs
115	css('display', 'block'); // must render before offsetWidth can be calculated
116	css('left', (get(0).offsetWidth*-1)+'px');
117	css('top', '-4px');
118	}
119
120	TodoList.NubTimer.stop();
121	});
122	$(this).mouseout(function() { TodoList.NubTimer.start(); });
123	$('.nub', this).mouseover(function() { TodoList.NubTimer.stop(); });
124	$('.nub', this).mouseout(function() { TodoList.NubTimer.start(); });
125	},
126
127	/**
128	* Unbind event hooks to hide/show the nub.
129	*/
130	unbind_nub: function() {
131	$(this).unbind('mouseover');
132	$(this).unbind('mouseout');
133	$('.nub', this).unbind('mouseover');
134	$('.nub', this).unbind('mouseout');
135	TodoList.NubTimer.exec(); // hide all nubs
136	},
137
138	/**
139	* Nub Timer class.
140	*/
141	NubTimer: {
142	tid: 0, // Timer ID
143
144	/**
145	* Start the Nub Timer.
146	*/
147	start: function() {
148	this.stop();
149	this.tid = setTimeout(this.exec, 300); // start timer
150	},
151
152	/**
153	* Stop the Nub Timer.
154	*/
155	stop: function() {
156	if (this.tid) {
157	clearTimeout(this.tid); // stop timer
158	this.tid = 0;
159	}
160	},
161
162	/**
163	* Execute the Nub Timer.
164	*/
165	exec: function() {
166	$('.todolist .nub').css('display', 'none');
167	this.stop();
168	}
169	}
170	};
171
172	$(function() {
173	TodoList.add_incomplete_list();
174
175	$.ajaxSetup({
176	error: function(xml, status, e) {
177	if (status == 'error' && e) {
178	alert('An exception occurred in the script. Error name: ' + e.name + '. Error message: ' + e.message);
179	} else if (xml.status == 0) {
180	// retry
181	$.ajax({
182	type: this.type,
183	url: this.url,
184	data: this.data,
185	dataType: this.dataType,
186	});
187	} else
188	alert('Unknown AJAX Error: ' + status + ' Status:' + xml.status + ' ' + xml.statusText);
189	},
190	});
191
192	$('#todolist-add-task-form').submit(function() {
193	$('input#edit-task', this).val($.trim($('input#edit-task', this).val()));
194	if ($('input', this).val() === '') {
195	return false;
196	}
197	$.ajax({
198	type: 'POST',
199	url: Drupal.settings.basePath + 'index.php?q=todolist/create_task',
200	data: $('input, select', this).serialize() + '&sort='+($('.todolist.incomplete .task').length+1),
201	dataType: 'script',
202	});
203	this.reset();
204	return false;
205	});
206
207	// Bind event hooks to complete/uncomplete a task.
208	$('.todolist .task').each(TodoList.bind_task);
209	});