Using a little bit of JavaScript magic, we easily can break out of the mold which Desire2Learn (D2L) locks widget content inside of. Example:

1. Create a New Widget with the following HTML content:

   
   
   <script type="text/javascript">
   document.writeln('
           

   Notice that i've added the OrgDefinedId of the currently-logged-in user to the query string of my_d2l_widget.php. We use this to tailor the result of the widget to the user who is requesting it. Neat, eh?

2. Create my_d2l_widget.php on your web server:

   // Find the widget box container
   var TheBox = $('#MyCustomWidgetContents').parents('.dlay_c');
   if ( TheBox.length == 1 )
   {
           // Move #MyCustomWidgetContents to the same level in the DOM,
           // and then hide the widget box
   	$('#MyCustomWidgetContents').remove().insertBefore(TheBox);
   	TheBox.hide();
   }
   
   // Append a custom stylesheet to style your new widget
   $('head').append('
   ');
   
   // Add the contents of the widget.  Mine is generated in PHP,
   // escaped, and placed in the html() call below
   $('#MyCustomWidgetContents').html("This is where the contents of your widget are placed");
   
   // If the widget contents are empty, then hide it.  This is
   // useful for alerts, as the widget takes up no space
   // unless it has something to say
   if ( $('#MyCustomWidgetContents').height() == 0 )
       $('#MyCustomWidgetContents').hide();
   

Here is our widget in action:

D2L · jQuery

At work, the web portal I maintain allows e-teachers to specify a two-level evaluation hierarchy (categories with assignment items inside them) for each of the courses they are teaching.   The current mechanism for rearranging the display order of these categories and assignments – up and down arrows on each item – is extremely cumbersome.  We decided that a better approach would be to allow users to “drag and drop” the items into the proper order, with jQuery’s sortable functionality being the prime candidate to provide this feature.  An exploratory demo of sortable showed that there was no straightforward way to restrict the movement of elements between the main list (categories) and each of the sublists (assignments).  Here is how we accomplished it:

Step 1: HTML

First we set up the list to be ordered…

            Category 1


                    Category 1.1
                

                    Category 1.2
                

                    Category 1.3
                

Step 2: JavaScript

Next we mix in some jQuery magic…

$(document).ready(function(){
	$('.GradeCriteriaList .item-title').each(function() {
		var crid = $(this).attr('gb:courseregid');
		$(this).mousedown(function() {
			$(this).parent().parent().sortable({
				items:" > li",
				handle:"span.item-title",
				axis: 'y',
				cancel:'img',
				distance: 5,
				forceHelperSize: true,
				forcePlaceholderSize: true,
				placeholder: 'sortable-placeholder',
				tolerance: 'pointer',
				forcePlaceholderSize: true,
				helper:'original',
				revert: true,
				stop: function(){ $(this).sortable('destroy'); },
				update: function(event,ui){
					var ajaxData = {};
					ajaxData.parentid = $(this).attr('gb:parent');
					ajaxData.sortOrder = new Array();
					$(this).find(" > li").each(function(){
						var itemkey = $(this).attr('gb:key');
						ajaxData.sortOrder.push(itemkey);
					});

					//TODO: AJAX query to save new order
				}
			});
		});
	});
});

This finds all the sort handles (elements with CSS class “item-title”) and sets up an onmousedown listener on it’s parent ul element. When the onmousedown listener is triggered by a mouse click, the list containing the clicked handle is set up to be sortable by a jQuery.sortable(…) call, which allows the clicked handle to be dragged around within the confines of it’s unordered list. Releasing the mouse button will drop the item into it’s new location, turn off sortable again, and parse the list’s DOM tree to generate an array representing the new list order. Voila! A sortable list with the items locked into their respective nested unordered lists.

No tags