开源桌面系统及设计图、下载地址

开源桌面系统，极简单的mvc设计、数据绑定实现、微事件实现等等。

下载地址：http://git.oschina.net/eternal_rider/sapling/attach_files

设计如下图：

Controller.js

var DtController={
	cache:{}, 
	pubevt:function (topic,args,context) {
		var evtcontext = context || window,
		subs = evtcontext.DtController.cache[topic],
		len = subs ? subs.length : 0;
		while (len--) {
		  subs[len].apply(evtcontext, args || []);
		}
	},
	subevt:function (topic,callback) {
		if (!DtController.cache[topic]) {
		  DtController.cache[topic] = [];
		}
		DtController.cache[topic].push(callback);
		return [topic, callback]; 
	},
	unsubevt:function (handle,callback) {
		var subs = DtController.cache[callback ? handle : handle[0]],
		callback = callback || handle[1],
		len = subs ? subs.length : 0;
		while (len--) {
			if (subs[len] === callback) {
			subs.splice(len, 1);
			}
		}
	},
	bindmodel:function(model,callback){
		Object.observe(model, callback);
	},
	init:function(){
		DtController.subevt('/dtname/set',DtModel.setDtname);
		DtController.subevt('/alias/set',DtModel.setAlias);
		DtController.subevt('/theme/set',DtModel.setTheme);
		DtController.subevt('/wallpaper/set',DtModel.setWallpaper);
		DtController.subevt('/mm/load',DtModel.loadMenu);
		DtController.subevt('/mm/app/set',DtModel.setApp);
		DtController.subevt('/app/xy/set',DtModel.setAppXY);
		DtController.bindmodel(DtModel,function(data){
			data.forEach(function(item, i){
				switch(item.name){
					case 'theme':
						DtView.setTheme(item.object[item.name]);
						break;
					case 'wallpaper':
						DtView.setWallpaper(item.object[item.name]);
						break;
					case 'alias':
						DtView.setAlias(item.object[item.name]);
						break;
					case 'dtname':
						DtView.setDtname(item.object[item.name]);
						break;
					case 'menus':
						DtView.setMenus(item.object[item.name]);
						break;
					case 'apps':
						DtView.setApps(item.object[item.name].list);
						break;
				};
				//console.log(change.type, change.name, change.oldValue);
				DtView.setNotifications('监听到DtModel中' + item.name+',触发'+ item.type+'事件');
			});
		});
		DtController.pubevt('/mm/load',[]);
		var urlstr=window.location.href,
		username=urlstr.substr(urlstr.indexOf("?")+1);
		DtModel.setUserName(username);
		DtView.init();
	}
};

model.js

var DtModel = {
	dtname:"",
	username:"",
	alias:"",
	theme:"",
	wallpaper:{},
	menus:{},
	apps:{},
	storage:window.localStorage,
	loadMenu:function(){
		//初始化开始菜单和邮件菜单
		$.getJSON("assets/menu.json", function(data) {
			if (data) {
				var mm_tmp = [],app_tmp = [];
				$(data.menu).each(function(i, item) {
					mm_tmp.push(item);
				});
				$(data.app).each(function(i, item) {
					app_tmp.push(item);
				});
				var obj = {mm:mm_tmp,app:app_tmp};
				DtModel.menus = obj;
				DtModel.load();
			}
		});
		
		//初始化桌面布局菜单
		
	},
	setDtname:function(name){
		DtModel.dtname = name;
		DtModel.save();
	},
	setUserName:function(username){
		DtModel.username = username;
	},
	setAlias:function(alias){
		DtModel.alias = alias;
		DtModel.save();
	},
	setTheme:function(theme){
		DtModel.theme = theme.colors;
		DtModel.save();
	},
	setWallpaper:function(data){
		DtModel.wallpaper = data;
		DtModel.save();
	},
	setApp:function(id){
		var list = $.extend([],DtModel.apps.list || []);
		$.each(list, function(i,data){
			if(data.id == id){
				list[i].state = list[i].state ==0?1:0;
				id = "-1";
				return false;
			}
		});
		
		if(id != "-1"){
			$.each(DtModel.menus.app, function(i,data){
				if(data.id == id){
					data.state = 1;
					list.push(data);
					return false;
				}
			});
		}

		DtModel.apps = {list:list};
		DtModel.save();
	},
	setAppXY:function(id,x,y){
		$.each(DtModel.apps.list, function(i,data){
			if(data.id == id){
				DtModel.apps.list[i].x=x,DtModel.apps.list[i].y=y;
				return false;
			}
		});
		DtModel.apps = {list:DtModel.apps.list};
		DtModel.save();
	},
    save:function(){
        if(DtModel.storage) {
			var data = {};
			data.dtname = DtModel.dtname;
			data.username = DtModel.username;
			data.alias = DtModel.alias;
			data.theme=DtModel.theme;
			data.wallpaper = DtModel.wallpaper;
			data.apps=DtModel.apps;
            DtModel.storage.sapling = JSON.stringify(data);
			//通过websocket保存到服务器
        }else{
            alert('不支持LocalStorage');
        }
    },
    load:function(){
        if(DtModel.storage) {
			if(DtModel.storage.sapling){
				var data = JSON.parse(DtModel.storage.sapling);
				DtModel.dtname = data.dtname;
				DtModel.username = data.username;
				DtModel.alias = data.alias ? data.alias:data.username;
				DtModel.theme = data.theme;
				DtModel.wallpaper = data.wallpaper;
				DtModel.apps = data.apps;
			}else{
				DtModel.alias = DtModel.username;
			}
        }else{
            alert('不支持LocalStorage');
        }
    }
}

view.js

var DtView = {
	"init":function(){
		setInterval(function() {
			var time = new Date();
			$("#time").html(time.toLocaleTimeString());
		}, 1000);
		
		using('calendar',function(){
			$('#calendar').calendar({
				firstDay:1,
				width:250,
				height:250
			});
		});
		using('textbox',function(){
			$('#dt_name').textbox({
				onClickButton:function(){
					var text = $('#dt_name').textbox('getText');
					if(text){
						DtController.pubevt('/dtname/set',[text]);
					}
				}
			});
			$('#alias').textbox({
				onClickButton:function(){
					var text = $('#alias').textbox('getText');
					if(text){
						DtController.pubevt('/alias/set',[text]);
					}
				}
			});
		});
		
		$("#start").mouseenter(function(e) {
			e.preventDefault();
			$(this).attr("src", "assets/ima/2.jpg");
			using("menu", function() {
				$('#startmm').menu('show', {
					left : 0,
					top : 40
				});
			});
		}).mouseleave(function() {
			$(this).attr("src", "assets/ima/1.jpg");
		});
		$('#dock').on('click','li',function(ev){
			var target = $(this).find('a').attr('href');
			if($(target).dialog('options').minimized){
				$(target).dialog('open');
			}else{
				$(target).dialog('minimize');
			}
			ev.preventDefault();
			ev.stopPropagation();
		});

		$('#user').mouseenter(function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			$('#calendar').hide();
			$('#user_panel').fadeIn();
		});
		$('#user_panel').mouseleave(function() {
			$('#user_panel').fadeOut();
		});
		
		$('#time').mouseenter(function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			$('#user_panel').hide();
			$('#calendar').fadeIn();
		});
		$('#calendar').mouseleave(function() {
			$('#calendar').fadeOut();
		});
		
		$('#desktop,#task_bar').on('contextmenu',function(e){
			e.preventDefault();
			var target=e.target||e.srcElement;
			var tid = $(target).attr('id');
			if(tid == 'desktop'){
				using("menu", function() {
					$('#mm-setup').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				});
			}else if(tid == 'task_bar'){
				alert('任务栏的右键事件');
			}else{
				return false;
			}
		});
		$('#setup_app').on('click','li',function(ev){
			DtController.pubevt('/mm/app/set',[$(this).attr('id')]);
			ev.preventDefault();
			ev.stopPropagation();
		});
		$('#user_blog').on('click',function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			DtView.dialogHandler({
				"id":"myblog",
				"title":"作者博客",
				"link":"http://my.oschina.net/eternal/blog",
				"load":"iframe",
				"icon":"world",
				"width":1280,
				"height":685
			});
		});
		$('#user_about').on('click',function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			DtView.dialogHandler({
				"id":"aboutme",
				"title":"关于作者",
				"link":"apps/about/index.html",
				"load":"iframe",
				"icon":"user",
				"maximized":true
			});
		});
		$('#help_user').on('click',function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			DtView.dialogHandler({
				"id":"helpme",
				"title":"随便给点吧",
				"link":"apps/helpme/index.html",
				"load":"iframe",
				"icon":"heart",
				"maximized":true
			});
		});
		$('#wallpapers_mm').on('click',function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			DtView.dialogHandler({
				"id":"wallpapers",
				"title":"桌面壁纸",
				"link":"apps/wallpaper/index.html",
				"load":"iframe",
				"icon":"customization",
				"width":1280,
				"height":685
			});
		});
		$('#logout').on('click',function(ev){
			ev.preventDefault();
			ev.stopPropagation();
			if (confirm("确认退出系统吗？")==true){
				window.location.href="index.html";
			}
		});
	},
	setDtname:function(name){
		document.title = name;
		using('textbox',function(){
			$('#dt_name').textbox('setText',name);
		});
	},
	setAlias:function(name){
		$('#user').text(name);
		using('textbox',function(){
			$('#alias').textbox('setText',name);
		});
	},
	setApps:function(list){
		if(!list){
			return false;
		}
		$.each(list, function(i,data){
			var hasapp = $("#desktop").children("#dt_"+data.id).html();
			if(!hasapp){
				var app = {id:data.id,width:data.width,height:data.height,title:data.title,x:data.x,y:data.y};
				$("#dtapp_tmpl").tmpl(app).appendTo("#desktop");
				var $appi = $("<iframe border=0 frameborder=0  style='width:100%;height:100%;'  scrolling='yes' src='"+data.link+"'></iframe>");
				$("#dt_body_"+data.id).html($appi);
				
				using("draggable",function(){
					$("#dt_"+data.id).draggable({onStopDrag:function(e){
						var x = $(this).offset().left,y = $(this).offset().top-41;
						DtController.pubevt('/app/xy/set',[data.id,x,y]);
					}});
				});
			}else{
				if(data.state == 0){
					$("#desktop").children("#dt_"+data.id).remove();
				}
			}
		});
	},
	setMenus:function(menus){
		$("#startmm_tmpl").tmpl(menus.mm).appendTo("#startmm");
		using('menu',function(){
			$('#startmm').menu({
				onClick:function(item){
					DtView.menuHandler(item);
				}
			});
		});
		
		$("#app_tmpl").tmpl(menus.app).appendTo("#setup_app");
	},
	setTheme:function(theme){
		var colors = theme.split(',');
		$('#task_bar').css('background-color',colors[0]).css('border-bottom','1px solid '+colors[1]);
		$('body').css('background-color',colors[2]);
	},
	setWallpaper:function(data){
		if(data.type == 'rgb'){
			$('body').css('background',data.name);
		}else{
			$('body').css('background','#777777 url(assets/ima/'+data.name+')');
		}
	},
	setNotifications:function(content){
		var $lists = $("#user_panel_news").children(".notifications");
		if($lists.length >= 3){
			$lists[2].remove();
		}
		$("#notifications_tmpl").tmpl({content:content}).prependTo("#user_panel_news");
	},
	menuHandler:function(item) {
		var menumodel = {};
		$.each(DtModel.menus.mm, function(i,data){
		  if(data.id == item.id){
			  menumodel = data;
			  return false;
		  }
		});
		if(menumodel.id){
			DtView.dialogHandler(menumodel);
		}
	},	
	dialogHandler:function(menumodel) {
		if ($("#mm_"+menumodel.id).length > 0) {
			$("#mm_"+menumodel.id).html("");
		} else {
			$("#desktop").append("<div id='mm_"+menumodel.id+"' style='overflow: hidden;'></div>");
		}
		
		using('dialog', function() {
			var dlgconfig = {
				title:'&nbsp;'+menumodel.title,
				width:menumodel.width,
				height:menumodel.height,
				iconCls:'icon-'+menumodel.icon,
				collapsible:menumodel.collapsible||true,
				minimizable:menumodel.minimizable||true,
				maximizable:menumodel.maximizable||true,
				resizable:menumodel.resizable||true,
				draggable:menumodel.draggable||true,
				inline:true,
				shadow:true,
				maximized:menumodel.maximized||false,
				onBeforeClose:function(){
					$('#dock_'+menumodel.id).remove();
					$(this).parent().next().remove();
					$(this).parent().remove();
				},
				content : "<iframe border=0 frameborder=0  style='width:100%;height:100%;'  scrolling='yes' src='"+menumodel.link+"'  sandbox=\"allow-scripts allow-same-origin allow-forms\"></iframe>"
			};
			menumodel.load == "ajax"?dlgconfig.href=menumodel.link:"";
			$("#mm_"+menumodel.id).dialog(dlgconfig);
		});
		$('<li id="dock_'+menumodel.id+'"><a href="#mm_'+menumodel.id+'"><img src="assets/ima/' + menumodel.icon + '_22.png" />'+menumodel.title+'</a></li>').appendTo('#dock');
	}
};