I’ve been upgrading the forum of Computer Science in Syria for a week now.

The forum uses Drupal, and it ran a beta version of Drupal 4, and I upgraded it to the latest Drupal version now.

I wanted to have AJAX quoting in the forum, but I wanted it to be simple without lots of JavaScript loaded. So as usual I got pissed off and decided to create my own code to do it. 8)

The code was very simple, knowing that the Quote link will get you to a page where the textarea has the quoted text, and knowing that Drupal 6 has jQuery loaded in it :)

I added the following code to /misc/drupal.js file:

$('a.quote, li.quote a').click(function () {
	$(this).after($('&nbsp;<img style="width: 16px; height: 16px;" class="quoting" src="/misc/quoting.gif" alt="loading" />'));
	$.ajax({
		url: $(this).attr('href'),
		cache: false,
		success: function(html){
			$('img.quoting').remove();
			var changed = false;
			if ($('#wysiwyg-toggle-edit-comment').text() == Drupal.settings.wysiwyg.disable) {
				$('#wysiwyg-toggle-edit-comment').click();
				changed = true;
			}
			$('#edit-comment').val($('#edit-comment').val() + ($('#edit-comment').val() == '' ? '' : '\n') + $(html).children().find('#edit-comment').val());
			var $target = $('#edit-comment');
			$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
					var targetOffset = $target.offset().top;
					$('html,body').animate({scrollTop: targetOffset}, 1000);
			}
			if (changed)
				$('#wysiwyg-toggle-edit-comment').click();
			$('#edit-comment').scrollTop($('#edit-comment')[0].scrollHeight);
		}
	});
	return false;
});

You can see that I used this image to be displayed while loading the quote into the textarea Quoting because it matches the colors of the forum style.

The process is too simple:

  1. @line 02: Display a loading image.
  2. @line 03: Request the quoting page which is located in the href attribute of the quote link.
  3. @line 07: Remove the image.
  4. @lines 08 ~ 12: Checking if the HTML editor is enabled, and disabling it so I can assign the value directly to the textarea.
  5. @line 13: Assigning the value of the textarea in the quote page to the textarea in this page.
  6. @lines 14 ~ 19: Scrolling the page’s vertical scroll to reach the textarea.
  7. @lines 20 ~ 21: Re-enabling the editor if I disabled it.
  8. @line 22: Scrolling the textarea’s vertical scroll to reach the end of the text.
  9. @line 25: Returning false to the browser so it doesn’t redirect the page to the quoting page.

You see? it is as simple as this :)

I’ll soon post some other modifications that made the forum more simple :)