gistfile1.js

// ----------------------------------------------------------------------------------------------
// display control buttons to right of each list item on hover
// ----------------------------------------------------------------------------------------------
var buttonMarkup = "<span class='btn-group'><a href='#' class='drag-handle btn'>" +
  "<i class='icon-resize-vertical'></i></a>" + 
	"<a href='#' class='btn remove-item'><i class='icon-trash'></i></a></span>";
	
$("#sortable")
	.on("mouseenter", "li", function(e){$(this).append($(buttonMarkup))})
	.on("mouseleave", "li", function(e){$(this).find("span.btn-group").remove()}
);

// ----------------------------------------------------------------------------------------------
// capture reorder events and post new order to server
// ----------------------------------------------------------------------------------------------
$("#sortable").on('sortupdate', function(e,ui){
	var indexes = $(this).sortable('toArray');
	console.log(indexes);
	//todo: make ajax call to notify server of new order
	
	//reassign ids, number from 1 and up
	assignSequentialNumbers();
});

// ----------------------------------------------------------------------------------------------
// Delete list item user clicks confirm button
// ----------------------------------------------------------------------------------------------
$("#perform-delete").click( function(e){
	var liItemToRemove = $('#confirm-delete').data('item-to-delete');
	var itemId = liItemToRemove.attr("id");
	console.log("id", itemId);
	//todo: remove from server
	liItemToRemove.hide('slow', function(){
		$(this).remove();
		assignSequentialNumbers();
	});
});

// ----------------------------------------------------------------------------------------------
// show confirmation dialog (using bootstrap modal) when user clicks delete button
// ----------------------------------------------------------------------------------------------
$("#sortable").on('click', 'a.remove-item', function(e){
	var item = $(this).parent().parent();
	var dialog = $("#confirm-delete");
	dialog.data('item-to-delete',item);
	dialog.modal();
});

// ----------------------------------------------------------------------------------------------
// lose focus when ENTER key is pressed to provide visual feedback on save
// ----------------------------------------------------------------------------------------------
 $(document).on("keyup", "input", function(e) {
	if (e.keyCode == 13) $(this).blur();
 }
 );
 

// ----------------------------------------------------------------------------------------------
// capture change event for list item textbox and save change to server
// ----------------------------------------------------------------------------------------------
$("#sortable").on("change", "input.list-item", function(e) {
	var id = $(this).parent().attr("id");
	var newVal = $(this).val().trim();
	console.log("id", id);
	console.log("newVal", newVal);
	//todo: add ajax call to save item
});

// ----------------------------------------------------------------------------------------------
// event handler for new list items
// ----------------------------------------------------------------------------------------------
$("#new-item").keyup(function(e){
	if (e.keyCode == 13 && $(this).val().trim().length > 0)
	{
		var newItem = $(this).val().trim();
		var target = $("#sortable");
		var itemId = target.children().length + 1;
		$("<li id = '" + itemId + "'><input class='list-item' value='" + newItem + "'></li>")
      .hide().appendTo(target).show('slow');
		//todo: ajax call to append the item
		$(this).val('');
	}
});

// ----------------------------------------------------------------------------------------------
// event handler to save name of list when it changes, also update the name left menu
// ----------------------------------------------------------------------------------------------
$("input.title").change(function(e){
	var newListName = $(this).val().trim();
	console.log("new name ", newListName);
	//todo: post new name to server
	
	$('#list-menu > li.active > a').html(newListName);
});