using namespace kyle; - ko sortable, round 2

KO Sortable, Round 2

Kyle Kirby
March 12, 2012
Hello. After posting my previous post, I realized there were a few issues with my code. I found that KO doesn't handle observableArrays with duplicate values very well. It handles them just fine, but when you go and remove the DOM node that was assocoated with it, things get messy. To fix this, I've revised my code.
<script>
(function(ko,$){
	
	// This is a utility function that will create a function
	// to generate options based on a value accessor.
	// The result will be a function that returns the created
	// options.
	// A dream, within a dream, within a dream. Yeah, I'm insane.
	var createOptions = function(assigner,defaultOptions){
		return function(valueAccessor){
			if(typeof assigner == 'function'){
				var res = assigner();
				assigner = res[0];
				defaultOptions = res[1];
			}
			
			var options = $.extend({},defaultOptions);
			var value = valueAccessor();
			if(ko.isObservable(value)){
				options[assigner] = value;
			}
			else {
				$.extend(
					options,
					value
				);
			}
			return function(){
				return options;
			}
		}
	}
	
	
	/**
	 * start draggable
	 *
	 * A basic binder that allows the element to be dragged.
	 */
	ko.bindingHandlers.draggable = {
		modelKey: 'ko.bh.draggable.model',
		afterRenderCallback: function(elements, model){
			$(elements).each(function(){
				$(this).data(
					ko.bindingHandlers.draggable.modelKey,
					model
				);
			});
		},
		generateOptions: createOptions(
			function(){
				return [
					'with',
					{
						afterRender: ko.bindingHandlers.draggable.afterRenderCallback,
						draggable: {}
					}
				];
			}
		),
		init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			var options = ko.bindingHandlers.draggable.generateOptions(valueAccessor);
			
			$(element).data(
				ko.bindingHandlers.draggable.modelKey,
				options().with
			);
			
			$(element).draggable(options().draggable);
			
			return ko.bindingHandlers['with'].init(
				element,
				options,
				allBindingsAccessor,
				viewModel,
				bindingContext
			);
		},
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			var options = ko.bindingHandlers.draggable.generateOptions(valueAccessor);
			return ko.bindingHandlers['with'].update(
				element,
				options,
				allBindingsAccessor,
				viewModel,
				bindingContext
			);
		}
	}
	/**
	 * end draggable
	 */
	
	
	/**
	 * start droppable
	 *
	 * A basic binder that allows the element to be dragged.
	 */
	ko.bindingHandlers.droppable = {
		wasDroppedFromSortable: false,
		generateOptions: createOptions(
			'data',
			{
				droppable: {}
			}
		),
		init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			var options = ko.bindingHandlers.droppable.generateOptions(valueAccessor);
			var model = options().data;
			
			$(element).droppable(
				$.extend(
					{
						accept: function(dragging){
							// Check for the 'accept' method on the property
							if(typeof model.accept == 'function'){
								// Evaluate and return the 'accept' method,
								// passing in the model and the element being
								// dragged.
								return model.accept(
									$(dragging).data(
										ko.bindingHandlers.draggable.modelKey
									),
									dragging
								);
							}
							else {
								return true;
							}
						},
						drop: function(event,ui){
							// In case of sortable being dropped here,
							// we need to tell the sortable not to sort.
							// This global variable does just that.
							ko.bindingHandlers.droppable.wasDroppedFromSortable = true;
							if(typeof model.onDrop == 'function'){
								// Evaluate the onDrop method of the model
								// passing in the model dropped on it,
								// the event, and jQuery UI Map
								return model.onDrop(
									$(ui.draggable).data(ko.bindingHandlers.draggable.modelKey),
									event,
									ui
								);
							}
							else {
								return true;
							}
						}
					},
					options().droppable
				)
			);
		},
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			var options = ko.bindingHandlers.draggable.generateOptions(valueAccessor);
		}
	}
	/**
	 * end droppable
	 */
	
	
	ko.bindingHandlers.sortable = {
		sourceKey: 'ko.bh.sortable.source',
		generateOptions: createOptions(
			'foreach',
			{
				afterRender: ko.bindingHandlers.draggable.afterRenderCallback,
				sortable: {}
			}
		),
		init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			var options = ko.bindingHandlers.sortable.generateOptions(valueAccessor);
			$(element).data(
				ko.bindingHandlers.sortable.sourceKey,
				options().foreach
			);
			
			$(element).sortable(
				$.extend(
					options().sortable,
					{
						connectWith: '*',
						// This defines better what can be connected
						// to this sortable. (This is a mod on jQuery UI)
						connectWithCallback: function(event,ui){
							var containerArray = ui.instance.element.data(ko.bindingHandlers.sortable.sourceKey);
							var model = this.currentItem.data(ko.bindingHandlers.draggable.modelKey);
							if(typeof containerArray.accept == 'function'){
								return containerArray.accept(model,options().foreach,this.currentItem);
							}
							else {
								return true;
							}
						},
						stop: function(event, ui){
							// Who we're sending to.
							var target = $(ui.item.data('sortableItem').currentContainer.element);
							// Who's sending it.
							var source = $(event.target);
							// What's the UI element?
							var droppedElement = $(ui.item);
							// The model that is being sent.
							var droppedModel = droppedElement.data(ko.bindingHandlers.draggable.modelKey);
							// The observableArray of the sender.
							var sourceObservable = source.data(ko.bindingHandlers.sortable.sourceKey);
							// The ObservableArray of the receiver.
							var targetObservable = target.data(ko.bindingHandlers.sortable.sourceKey);
							// The offset the item was placed at.
							var targetOffset = droppedElement.prevAll().length;
							// Cancel the default action, since we'll be updating
							// everything using ko bindings
							source.sortable('cancel');
							// This is different than above because
							// we've ran cancel(), which put the item
							// back to it's start.
							var sourceOffset = droppedElement.prevAll().length;
							
							var wasAccepted = (
								typeof targetObservable.accept == 'function' &&
								targetObservable.accept(droppedModel,sourceObservable,droppedElement) == true ||
								typeof targetObservable.accept == 'undefined'
							);
							
							var wasDroppedOntoDroppable= ko.bindingHandlers.droppable.wasDroppedFromSortable;
							ko.bindingHandlers.droppable.wasDroppedFromSortable = false;
							
							var handleTarget = function(){
								if(targetObservable.indexOf(droppedModel) != -1){
									// dropping into something that already has that
									// item requires special attention.
									targetObservable.valueWillMutate();
									var key = "setDomNodeChildrenFromArrayMapping_lastMappingResult";
									ko.utils.domData.set(target.get(0),key,[]);
									$(target).children().remove();
									targetObservable.valueHasMutated();
								}
								
								targetObservable.splice(
									targetOffset,
									0,
									droppedModel
								);
							}
							
							if(wasAccepted && !wasDroppedOntoDroppable){
								if(typeof targetObservable.beforeRecieve == 'function'){
									targetObservable.beforeRecieve(sourceObservable,droppedModel,source);
								}
								if(typeof sourceObservable.beforeSend == 'function'){
									targetObservable.beforeSend(targetObservable,droppedModel,source);
								}
								if(
									// The only thing that isn't writable is computed,
									// or something else. We double check it's an
									ko.isWriteableObservable(sourceObservable) == false &&
									// Make sure it's an observable and not something
									// else.
									ko.isObservable(sourceObservable)
								){
									var subscribable = sourceObservable.subscribe(
										function(){
										   var key = "setDomNodeChildrenFromArrayMapping_lastMappingResult";
										   ko.utils.domData.set(source.get(0),key,[]);
										   $(element).children().remove();
										},
										sourceObservable,
										'beforeChange'
									);
									handleTarget();
									subscribable.dispose();
								}
								else {
									sourceObservable.splice(
										sourceOffset,
										1
									);
									handleTarget();
								}
								
								$(droppedElement).remove();
								
								if(typeof targetObservable.afterRecieve == 'function'){
									targetObservable.afterRecieve(sourceObservable,droppedModel,source);
								}
								if(typeof sourceObservable.afterSend == 'function'){
									targetObservable.afterRecieve(targetObservable,droppedModel,source);
								}
							}
						}
					}
				)
			);
			
			/**
			 * To allow the ability of custom dropping allowance,
			 * we override _rearrange so we can give the feeling
			 * that the element isn't allow. This is called everyime
			 * a sortable is hovered over another and it re-renders
			 * the list to show that an element can be dropped.
			 * We simply stop this process if that target does not
			 * accept the element. We further verify on drop
			 * to make sure the target does accept it.
			 */
			// Grab an instance of the sortable.
			var data = $(element).data('sortable');
			// Assign a backup for _rearrange
			data._rearrangeOld = data._rearrange;
			// Overwrite _rearrange
			data._rearrange = function(event,ui){
				// If the options supplied to this sortable
				// contain the method 'connectWithCallback'
				// then we run it, supplying the event
				// and the ui variable. 
				if(typeof this.options.connectWithCallback == 'function'){
					if(this.options.connectWithCallback.apply(this,[event,ui])){
						// We can accept this sort, call the old _rearrange
						return data._rearrangeOld.apply(this,arguments);
					}
					else{
						return false;
					}
				}
				else {
					return data._rearrangeOld.apply(this,arguments);
				}
			}
			
			return ko.bindingHandlers['template'].init(
				element,
				options,
				allBindingsAccessor,
				viewModel,
				bindingContext
			);
		},
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			return ko.bindingHandlers['template'].update(
				element,
				ko.bindingHandlers.sortable.generateOptions(valueAccessor),
				allBindingsAccessor,
				viewModel,
				bindingContext
			);
		}
	}
	
	ko.extenders.sortable = function(target, options){
		target.accept = options.accept || function(model, source, element){return true;};
		target.beforeSend = options.beforeSend || function(model, source, target, element){};
		target.afterSend = options.afterSend || function(model, source, target, element){};
		target.beforeRecieve = options.beforeRecieve || function(model, source, target, element){};
		target.afterRecieve = options.afterRecieve || function(model, source, target, element){};
	}
	
	// This extender allows you to handle droppable things, such as
	// what the droppable can accept, and what to do when an
	// object is dropped.
	ko.extenders.droppable = function(target, options){
		target.accept = options.accept || function(model, source, element){return true;};
		target.onDrop = options.onDrop || function(model,event,ui){};
		return target;
	}
	
	ko.extenders.nonMultipleDroppable = function(target, options){
		target.accept = function(model,source, element){
			if(source == target){
				return true;
			}
			else if(target.indexOf(model) == -1){
				return (options.accept || function(){return true;})(model,source,element);
			}
			else {
				return false;
			}
		};
		target.onDrop = options.onDrop || function(model,event,ui){};
		return target;
	}
})(ko,jQuery);
</script>