view release on metacpan or  search on metacpan

js/tvguide/Objects/TvList.js  view on Meta::CPAN

/*
Manages a list of TV program related "things", displaying them as a tabular list. Optionally each row
can have a sub-row (e.g. a recording main row can have a number of sub-rows that are the scheduled
programs for this recording request).

NOTE: The list of "things" is stored in a SortedObjList(). Expects any "subthings" to also be stored in 
 	  a SortedObjList() (or anything that provides the values() method)
 	  
Builds the contents into the normal "gridbox" div 

*/

//========================================================================================================
// CLASS
//========================================================================================================

TvList.settings = {} ;
TvList.popup = new Popup();

TvList.IMAGE_MAP = {
	'show'	: 'plus',	
	'hide'	: 'minus'	
} ;


/*------------------------------------------------------------------------------------------------------*/
// Constructor
function TvList(args)
{
	// Data - override with args
	this.rowClass = "" ;
	this.subrowClass = "" ;
	this.index = "pid" ;
	this.subindex = "" ;					// name of field containg list of sub-things
	this.sort = TvList.sort ;
	
	this.popupClassName = "tvListPop" ;		// added to popupDiv for setting record level
	this.recselCallback = TvList.setRecordings ;	// callback called when record level changed
	this.priCallback = TvList.setRecordings ;	// callback called when priority changed
	
	// add a ref to the global settings
	this.settings = TvList.settings ;
	this.popup = TvList.popup ;
	
	// override with settings
	if (args && (typeof args == "object"))
	{
		for (var setting in args)
		{
			this[setting] = args[setting] ;
		}
	}
	
	
	//--------------------------------------------------------------------
	// Cache
	//?????
	
	//--------------------------------------------------------------------
	// Init code
	
	// list of "things"
	this.list = new SortedObjList(this.index, this.sort ) ;

	this.init(
		this.index, 
		this.sort
	) ;
	
}

// Sort programs such that the newest program appears first
TvList.sort = function(a,b) {
	// NOTE: Invert compare to sort "descending"
	var cmp = Prog.prog_sort(a, b) ;
	cmp = -cmp ;
	return cmp;
} 



/*------------------------------------------------------------------------------------------------------*/
// Set the the class settings
//
//
TvList.setup = function(settings)
{
	// Init the common display settings - anything else is added by the derived object
	for (var setting in settings)
	{
		TvList.settings[setting] = settings[setting] ;
	}
	
	TvList.settings.TOTAL_PAD = 10 ;
	if (Env.BROWSER.PS3)
	{

// log.debug(" + set width for PS3") ;

		// For PS3 - fill the screen
		TvList.settings.GRID_WIDTH = Env.SCREEN_WIDTH-TvList.settings.TOTAL_PAD ;
	}
	else

js/tvguide/Objects/TvList.js  view on Meta::CPAN

			
		// show/hide all sub-entries
		$('.suball')[showHide]() ;
		
	} ;
}



//========================================================================================================
// INSTANCE
//========================================================================================================

/*------------------------------------------------------------------------------------------------------*/
//Initialise list
//
TvList.prototype.init = function(index, sort_fn)
{
	// HOOK
}

/*------------------------------------------------------------------------------------------------------*/
// Add/Create progs
//
// Array of thing "HASHes"
//
TvList.prototype.update = function(data)
{
	Profile.start('TvList.update') ;

	// Remove existing
	this.list.empty() ;
	
	// Create list of objects
	for (var i=0; i < data.length; ++i)	{
		// create a new thing entry based on the data received
		var thing = this.createEntry(data[i]) ;
		
		// Add it to the list
		this.list.add(thing) ;
	}

	Profile.stop('TvList.update') ;
}




/*------------------------------------------------------------------------------------------------------*/
// Clear out the gridbox
TvList.prototype.clear_grid = function()
{
	var gridbox = document.getElementById("gridbox");
	gridbox.innerHTML = "" ;
}


//===[ Record Selector ]==================================================================================

/*------------------------------------------------------------------------------------------------------*/
TvList.prototype.popup_recsel_contents = function(popupDiv, record_select, progObj)
{
	popupDiv.className = this.popupClassName ;

	var recUl = document.createElement("ul");
	recUl.className = "recprog" ;
	
		var recLi = document.createElement("li");
		recLi.className = "sub" ;
		recUl.appendChild(recLi) ;
	
			// Add list of record options (with handler for each)
			Prog.create_recSelTabs(recLi, progObj, record_select) ;
	
	
	popupDiv.appendChild(recUl) ;
}



/*------------------------------------------------------------------------------------------------------*/
// Add a popup window for recording selection on multiple lines of the TvList display. 
//
TvList.prototype.add_record_popup = function(node, progobj)
{
	var thisObj = this ;
	
	// use this width
	var popup_width = thisObj.settings.POPUP_WIDTH_PX ;
	
	var progSettings = {
		//-----------------------------------------------------
		create_popup: function(settings, x, y, callback) {
			
			var popupDiv = document.createElement("div");
			thisObj.popup_recsel_contents(popupDiv, callback, progobj) ; 
			var popupObj = {
				dom 	: popupDiv
			} ;
			
			return popupObj ;
		},
		//-----------------------------------------------------
		popup_node	: function(settings, popupObj) {
			return popupObj.dom ;
		},
		//-----------------------------------------------------
		show_popup	: function(settings, popupObj, x, y) {
			
			var popupDiv = popupObj.dom ;
			
			// ensure we're over the popupDiv to stop the popup cycling up/down
			x = x - 10 ;
			y = y - 10 ;
			
			// Show the popup window
			thisObj.popup.show(popupDiv, x, y, popup_width);
			thisObj.popup.adjustXY(x, y) ;
		},
		//-----------------------------------------------------
		hide_popup	: function(settings, popupObj) {
			thisObj.popup.hide();
		},
		//-----------------------------------------------------
		callback	: function(settings, vars) {
			
			var progObject = vars.prog ;
			var new_rec = vars.val ;
			
			// only update if changed
			if (new_rec != progObject.record)
			{
				// Call the GridApp.set_rec() method
				var old_rec = progObject.record ;
				progObject.record = new_rec ;
				thisObj.recselCallback(progObject, old_rec) ;
				
			}

		}
	} ;
	
	PopupHandler.add_popup(node, progSettings) ;
}

/*------------------------------------------------------------------------------------------------------*/
//Add a record level selection element
TvList.prototype.display_recsel = function(ol, prog)
{
	var li ;

	li = document.createElement("li");
	li.className = "lcol" ;
	li.style.width = this.settings.REC_PX+'px' ;
	ol.appendChild(li) ;

		var a = document.createElement("a");
		li.appendChild(a) ;
	
			var img = document.createElement("img");
			img.src = Prog.RecImg(prog.record) ; 
			a.appendChild(img) ;

			// add a popup display to show program details
			this.add_record_popup(a, prog) ;
			
	return li ;
}


//===[ Priority Selector ]================================================================================

/*------------------------------------------------------------------------------------------------------*/
TvList.prototype.popup_prisel_contents = function(popupDiv, popup_callback, progObj)
{
	popupDiv.className = this.popupClassName ;

	var ul = document.createElement("ul");
	
	// Add list of record options (with handler for each)
//	Prog.create_priSelList(ul, progObj, progObj.record, popup_callback) ;
	Prog.create_priSelList(ul, progObj, popup_callback) ;

	popupDiv.appendChild(ul) ;
}



/*------------------------------------------------------------------------------------------------------*/
//Add a popup window for priority selection on multiple lines of the TvList display. 
//
TvList.prototype.add_priority_popup = function(node, progobj)
{
	var thisObj = this ;
	
	// use this width
	var popup_width = thisObj.settings.POPUP_WIDTH_PX ;
	
	var progSettings = {
		//-----------------------------------------------------
		create_popup: function(settings, x, y, popup_callback) {
			
			var popupDiv = document.createElement("div");
			thisObj.popup_prisel_contents(popupDiv, popup_callback, progobj) ; 
			var popupObj = {
				dom 	: popupDiv
			} ;
			
			return popupObj ;
		},
		//-----------------------------------------------------
		popup_node	: function(settings, popupObj) {
			return popupObj.dom ;
		},
		//-----------------------------------------------------
		show_popup	: function(settings, popupObj, x, y) {
			
			var popupDiv = popupObj.dom ;
			
			// ensure we're over the popupDiv to stop the popup cycling up/down
			x = x - 10 ;
			y = y - 10 ;
			
			// Show the popup window
			thisObj.popup.show(popupDiv, x, y, popup_width);
			thisObj.popup.adjustXY(x, y) ;
		},
		//-----------------------------------------------------
		hide_popup	: function(settings, popupObj) {
			thisObj.popup.hide();
		},
		//-----------------------------------------------------
		callback	: function(settings, vars) {
			
			var progObject = vars.prog ;
			var new_pri = vars.val ;
			
			// only update if changed
			if (new_pri != progObject.priority)
			{
				// Call the GridApp.set_rec() method
				progObject.priority = new_pri ;
//				thisObj.recselCallback(progObject.record, progObject.pid, progObject.rid, progObject.priority) ;
				thisObj.recselCallback(progObject, progObject.record) ;
			}

		}
	} ;
	
	PopupHandler.add_popup(node, progSettings) ;
}



/*------------------------------------------------------------------------------------------------------*/
//Add a record level selection element
TvList.prototype.display_prisel = function(ol, prog)
{
	var li ;

	var pri = Prog.priIndex(prog.priority) ;
	
	li = document.createElement("li");
	li.className = "lcol" ;
	li.style.width = this.settings.REC_PX+'px' ;
	ol.appendChild(li) ;

		var a = document.createElement("a");
		li.appendChild(a) ;
	
			var img = document.createElement("img");
			img.src = Prog.PriImg(pri) ; 
			a.appendChild(img) ;

			// add a popup display to show program details
			this.add_priority_popup(a, prog) ;
			
	return li ;
}


//===[ Path Selector ]====================================================================================

/*------------------------------------------------------------------------------------------------------*/
TvList.prototype.popup_dirsel_contents = function(popupDiv, popup_callback, progObj)
{
	popupDiv.className = this.popupClassName ;

//	var div = document.createElement("div");
	
	//----------------------------------------------------------------------------
	// Value change callback
	function add_editor_fn(progObj, callback) {
		
		return function(edit) {
			
			//----------------------------------------------------------------------------
			// Value change callback
			function dir_change(progObject, newVal) {
				
				// only update if changed
				if (newVal != progObject.pathspec)
				{
					callback({
				   		prog : progObject, 
				   		val  : newVal 
			   		}) ;
				}
			}
			
			// Create the text edit
			$(edit).change(function() {
				dir_change(progObj, edit.value);
			})
		} ;
	}

	// Add directory editor
	this.display_edit(popupDiv, 300, progObj.pathspec, add_editor_fn(progObj, popup_callback), "")

//	popupDiv.appendChild(div) ;
}



/*------------------------------------------------------------------------------------------------------*/
//Add a popup window for pathspec selection on multiple lines of the TvList display. 
//
TvList.prototype.add_dir_popup = function(node, progobj)
{
	var thisObj = this ;
	
	// use this width
	var popup_width = thisObj.settings.POPUP_WIDTH_PX ;
	
	var progSettings = {
		//-----------------------------------------------------
		create_popup: function(settings, x, y, popup_callback) {
			
			var popupDiv = document.createElement("div");
			thisObj.popup_dirsel_contents(popupDiv, popup_callback, progobj) ; 
			var popupObj = {
				dom 	: popupDiv
			} ;
			
			return popupObj ;
		},
		//-----------------------------------------------------
		popup_node	: function(settings, popupObj) {
			return popupObj.dom ;
		},
		//-----------------------------------------------------
		show_popup	: function(settings, popupObj, x, y) {
			
			var popupDiv = popupObj.dom ;
			
			x = x+10 ;
			y = y ;
			
			// Show the popup window
			thisObj.popup.show(popupDiv, x, y, popup_width);
			thisObj.popup.adjustXY(x, y) ;
		},
		//-----------------------------------------------------
		hide_popup	: function(settings, popupObj) {
			thisObj.popup.hide();
		},
		//-----------------------------------------------------
		callback	: function(settings, vars) {
			
			var progObject = vars.prog ;
			var new_dir = vars.val ;
			
			// only update if changed
			if (new_dir != progObject.pathspec)
			{
				// Call the GridApp.set_rec() method
				progObject.pathspec = new_dir ;
				thisObj.recselCallback(progObject, progObject.record) ;
			}

		}
	} ;
	
	PopupHandler.add_popup(node, progSettings) ;
}



/*------------------------------------------------------------------------------------------------------*/
//Add a record level selection element
TvList.prototype.display_dirsel = function(ol, prog)
{
	var pathspec = '' ;
	if (prog.hasOwnProperty('pathspec'))
	{
		pathspec = prog.pathspec ;
	}
	

	var li = document.createElement("li");
	$(li)
		.addClass("lcol")
		.width(this.settings.DIR_PX)
		.appendTo($(ol))
			.append(
				$('<a>')
				.addClass('dirSel')
				.append(
					$('<img>')
					.attr({
						'src'	: Prog.ImageCache['icon_dir'].src,
						'title'	: 'Dir: ' + pathspec
					})
				)
//				.click()
			) ;
				
	// add a popup display to show program details
	this.add_dir_popup($('.dirSel', $(li)).get(0), prog) ;
	
	return li ;
}



/*------------------------------------------------------------------------------------------------------*/
//Add a text edit
TvList.prototype.display_edit = function(ol, width, text, add_editor_fn, className)
{
	var margin=10 ;
	
	// Container
	var li = this._display_li(ol, width, className) ;
	
	// Edit - slightly smaller than container
	var edit = document.createElement("input");
	edit.className = "edView" ;
	edit.style.width = (width-2*margin)+'px' ;
	edit.style.marginLeft = margin+'px' ;

	edit.setAttribute("type", 'text') ;	// NOTE: IE does NOT allow this after input is added to DOM, so postpone appendChild!
	if (text !== null) edit.setAttribute("value", text) ; 
	
	li.appendChild(edit) ;
	add_editor_fn(edit) ;

}



/*------------------------------------------------------------------------------------------------------*/
//Add a text element
TvList.prototype.display_labelled_edit = function(ol, labelWidth, label, width, text, add_editor_fn, className)
{
	// Label
	this.display_label(ol, labelWidth, label, 'edLabel') ;
//	this.display_inplace_edit(ol, width, text, add_editor_fn, className);
	this.display_edit(ol, width, text, add_editor_fn, className);
}

/*------------------------------------------------------------------------------------------------------*/
//Add a combobox element
TvList.prototype.display_selector = function(ol, width, value, valuesArray, namesArray, className, changeHandler)
{
	var margin=10 ;
	
	// Container
	var li = this._display_li(ol, width, className) ;
	
	// View - slightly smaller than container
	var view = document.createElement("li");
	view.className = "selector" ;
	var selWidth = (width-2*margin) ;
	view.style.width = selWidth+'px' ;
	view.style.marginLeft = margin+'px' ;
	
		var select = document.createElement("select");
		select.style.width = selWidth+'px' ;
		var html = "" ;