daapr/resources/js/views/client.js

/*jslint laxbreak:true */
/*jslint laxcomma:true */
/*jslint loopfunc:true */
/*jslint strict:true */
/*jslint browser:true */
/*jslint devel:true */

define([
	"underscore"
	, "jquery"
	, "backbone"

	, "views/browser"
	, "views/list"

	, "text!../../templates/client/layout.html"

	, "jquery-layout"
]
, function (
_
, $
, Backbone

, BrowserView
, ListView

, tmplClientLayout
) {
	"use strict";

	var Client	= Backbone.View.extend({
		id:				null

		//, el:			$(tmplClientLayout)
		, tagName:		"div"

		, Server:		null

		, Layout:		null

		, Views:		{}

		, initialize:	function (options) {
			_.bindAll(this
				, "_initLayout"
				, "resize"
				, "show"
				, "hide"
			);

			var that			= this
			,	appendEl		= options.appendEl
			;


			that.Server			= options.server;

			delete options.server;
			delete options.appendEl;

			Client.__super__.initialize.apply(that, arguments);

			that.el.id			= "__view-cient-" + that.Server.client.attributes.hostname.replace(".", "_");
			that.id				= that.Server.client.attributes.hostname;
			that.el.innerHTML	= tmplClientLayout;
			that.el.innerHTML	= that.el.innerHTML.replace("this.type", that.Server.client.url());
		}

		, _initLayout:	function () {
			var that	= this
			;

			that.Layout	= that.$el.layout({
				defaults:		{
					closable:			false
					, resizable:		true
					, slidable:			true
					, spacing_open:		5
					, spacing_closed:	5
				}

				, north:		{
					minSize:			100
					, size:				200
					, closable:			true
					, onresize:			function (pane, $pane, state, options) {
						that.Views.Browser.resize(pane, $pane, state, options);
					}
				}

				, center:		{
					minSize:			200
					, onresize:			function (pane, $pane, state, options) {
						that.Views.List.resize(pane, $pane, state, options);
					}
				}
			});

			var dbId			= that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
			,	dbCollection	= that.Server.client.collections.databases[dbId].get("dmap_listing")
			;

			that.Views.Browser	= new BrowserView({
				el:				that.Layout.panes.north
				, parentEl:		that.$el
				, collections:	{
					genres:			that.Server.client.collections.browser.genres[dbId]
					, artists:		that.Server.client.collections.browser.artists[dbId]
					, albums:		that.Server.client.collections.browser.albums[dbId]
				}
			});

			that.Views.List		= new ListView({
				el:				that.Layout.panes.center
				, parentEl:		that.$el
				, collection:	dbCollection
				, type:			"client"
				, client:		{
					hostname:	that.Server.client.attributes.hostname
					, dbId:		dbId
				}
			});
		}

		, resize:		function () {
			var that	= this
			;

			setTimeout(function __fnTimeoutClientResizeViews() {
				that.Views.List.resize();
				that.Views.Browser.resize();
			}, 25);
		}

		, show:			function () {
			var that	= this
			;

			if (that.Layout === null) {
				that._initLayout();
			}

			that.Layout.panes.north.show();
			that.Layout.panes.center.show();
			that.Views.List.show();
			//that.Views.Browser.show();
			//this.$el.show();
			//console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing"));
		}

		, hide:			function () {
			var that	= this
			;

			that.Layout.panes.north.hide();
			that.Layout.panes.center.hide();
			that.Views.List.hide();
			//that.Views.Browser.hide();
			//this.$el.hide();
		}
	});

	return Client;
});

/*

that.layoutItems	= $(that.layout.panes.center).layout({
	defaults:		{
		closable:			false
		, resizable:		true
		, slidable:			true
		, spacing_open:		5
		, spacing_closed:	5
	}

	, north:		{
		minSize:			100
		, size:				200
		, closable:			true
		//, onresize:			function (pane, $pane, state, options) {
		//						var viewportHeight	= $pane.innerHeight() - App.BrowserView.$el.find(".dataTables_scrollHead").height();
		//						App.BrowserView.$el.find(".dataTables_scrollBody").height(viewportHeight);
		//						//App.BrowserView.reDraw();
		//					}
	}

	, center:		{
		minSize:			200
		//, onresize:			function (pane, $pane, state, options) {
		//						var viewportHeight	= $pane.innerHeight() - App.ListView.$el.find(".dataTables_scrollHead").height();
		//						App.ListView.$el.find(".dataTables_scrollBody").height(viewportHeight);
		//						//App.ListView.render();
		//					}
	}
});
 */