Hplus(H+) 后台主题 UI 框架

plugins/fullavatareditor/scripts/fullAvatarEditor.js

@@ -0,0 +1,89 @@
+function fullAvatarEditor() {
+	var id				= 'fullAvatarEditor'			//flash文件的ID
+	var file			= 'plugins/fullavatareditor/fullAvatarEditor.swf';		//flash文件的路径
+	var	version			= "10.1.0";						//播放该flash所需的最低版本
+	var	expressInstall	= 'expressInstall.swf';			//expressInstall.swf的路径
+	var	width			= 600;							//flash文件的宽度
+	var	height			= 430;							//flash文件的高度
+	var container		= id;							//装载flash文件的容器(如div)的id
+	var flashvars		= {};
+	var callback		= function(){};
+	var heightChanged	= false;
+	//智能获取参数，字符类型为装载flash文件的容器(如div)的id，第一个数字类型的为高度，第二个为宽度，第一个object类型的为参数对象，如此4个参数的顺序可随意。
+	for(var i = 0; i < arguments.length; i++)
+	{
+		if(typeof arguments[i] == 'string')
+		{
+			container = arguments[i];
+		}
+		else if(typeof arguments[i] == 'number')
+		{
+			if(heightChanged)
+			{
+				width = arguments[i];
+			}
+			else
+			{
+				height = arguments[i];
+				heightChanged = true;
+			}
+		}
+		else if(typeof arguments[i] == 'function')
+		{
+			callback = arguments[i];
+		}
+		else
+		{
+			flashvars = arguments[i];
+		}
+	}
+	var vars = {
+		id : id
+	};
+	//合并参数
+	for (var name in flashvars)
+	{
+		if(flashvars[name] != null)
+		{
+			if(name == 'upload_url' || name == 'src_url')
+			{
+				vars[name] = encodeURIComponent(flashvars[name]);
+			}
+			else
+			{
+				vars[name] = flashvars[name];
+			}
+		}
+	}
+	var params = {
+		menu				: 'true',
+		scale				: 'noScale',
+		allowFullscreen		: 'true',
+		allowScriptAccess	: 'always',
+		wmode				: 'transparent'
+	};
+	var attributes = {
+		id	: vars.id,
+		name: vars.id
+	};
+	var swf = null;
+	var	callbackFn = function (e) {
+		swf = e.ref;
+		swf.eventHandler = function(json){
+			callback.call(swf, json);
+		};
+	};
+	swfobject.embedSWF(
+		file,
+		container,
+		width,
+		height,
+		version,
+		expressInstall,
+		vars,
+		params,
+		attributes,
+		callbackFn
+	);
+	return swf;
+}

plugins/fullavatareditor/scripts/jQuery.Cookie.js

@@ -0,0 +1,96 @@
+/**
+ * Cookie plugin
+ *
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+
+/**
+ * Create a Cookie with the given name and value and other optional parameters.
+ *
+ * @example $.Cookie('the_cookie', 'the_value');
+ * @desc Set the value of a Cookie.
+ * @example $.Cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
+ * @desc Create a Cookie with all available options.
+ * @example $.Cookie('the_cookie', 'the_value');
+ * @desc Create a session Cookie.
+ * @example $.Cookie('the_cookie', null);
+ * @desc Delete a Cookie by passing null as value. Keep in mind that you have to use the same path and domain
+ *       used when the Cookie was set.
+ *
+ * @param String name The name of the Cookie.
+ * @param String value The value of the Cookie.
+ * @param Object options An object literal containing key/value pairs to provide optional Cookie attributes.
+ * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
+ *                             If a negative value is specified (e.g. a date in the past), the Cookie will be deleted.
+ *                             If set to null or omitted, the Cookie will be a session Cookie and will not be retained
+ *                             when the the browser exits.
+ * @option String path The value of the path atribute of the Cookie (default: path of page that created the Cookie).
+ * @option String domain The value of the domain attribute of the Cookie (default: domain of page that created the Cookie).
+ * @option Boolean secure If true, the secure attribute of the Cookie will be set and the Cookie transmission will
+ *                        require a secure protocol (like HTTPS).
+ * @type undefined
+ *
+ * @name $.Cookie
+ * @cat Plugins/Cookie
+ * @author Klaus Hartl/klaus.hartl@stilbuero.de
+ */
+
+/**
+ * Get the value of a Cookie with the given name.
+ *
+ * @example $.Cookie('the_cookie');
+ * @desc Get the value of a Cookie.
+ *
+ * @param String name The name of the Cookie.
+ * @return The value of the Cookie.
+ * @type String
+ *
+ * @name $.Cookie
+ * @cat Plugins/Cookie
+ * @author Klaus Hartl/klaus.hartl@stilbuero.de
+ */
+$.Cookie = function(name, value, options) {
+    if (typeof value != 'undefined') { // name and value given, set Cookie
+        options = options || {};
+        if (value === null) {
+            value = '';
+            options.expires = -1;
+        }
+        var expires = '';
+        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+            var date;
+            if (typeof options.expires == 'number') {
+                date = new Date();
+                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+            } else {
+                date = options.expires;
+            }
+            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
+        }
+        // CAUTION: Needed to parenthesize options.path and options.domain
+        // in the following expressions, otherwise they evaluate to undefined
+        // in the packed version for some reason...
+        var path = options.path ? '; path=' + (options.path) : '';
+        var domain = options.domain ? '; domain=' + (options.domain) : '';
+        var secure = options.secure ? '; secure' : '';
+        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+    } else { // only name given, get Cookie
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = jQuery.trim(cookies[i]);
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+};

plugins/fullavatareditor/scripts/jQuery.Drag.js

@@ -0,0 +1,80 @@
+(function($){
+	var O = 'opacity',
+		C = 'CursorMove',
+		M = 'mousemove.drag',
+		U = 'mouseup.drag',
+		D = 'mousedown.drag',
+		W = $(window),
+		A = $(document),
+		timer = null,
+		E = function () {
+			this.w.css(O, 1);
+			A.unbind(M+' '+U);
+		},
+		G = function (e) {
+			var m = this,
+				p = m.w.offset(),
+				t = p.top,
+				l = p.left,
+				r = W.width() - m.w.outerWidth(),
+				b = W.height() - m.w.outerHeight(),
+				X = e.pageX,
+				Y = e.pageY,
+				x = m.p.left + (X - m.x) - W.scrollLeft(),
+				y = m.p.top  + (Y - m.y) - W.scrollTop();
+			//以下逻辑保证在可视范围内移动
+			if (l <= 0 && X < m.x)
+			{
+				x = 0;
+				m.x = Math.max(X, 0);
+				m.p.left = 0;
+			}
+			if (t <= 0 && Y < m.y)
+			{
+				y = 0;
+				m.y = Math.max(Y, 0);
+				m.p.top = 0;
+			}
+			if (r <= l - A.scrollLeft() && X > m.x)
+			{
+				x = r;
+				m.x = Math.min(X, r);
+				m.p.left = r;
+			}
+			if (b <= t - A.scrollLeft() && Y > m.y)
+			{
+				y = b;
+				m.y = Math.min(Y, b);
+				m.p.top = b;
+			}
+			m.w.css({ left : x, top : y });
+			return false;
+		},
+		S = function (e, m) {
+			e.preventDefault();
+			m = this;
+			m.w.css(O, 0.8);
+			m.p = m.w.offset();
+			m.x = e.pageX;
+			m.y = e.pageY;
+			A.bind(M, $.proxy(G, m)).bind(U, $.proxy(E, m));
+		};
+	$.fn.Drag = function(o){
+		return this.each(function () {
+			var e = $(this),
+				x = function () {
+					this.h = o ? (typeof o === 'string' ? $(o, e[0]) : o) : e;
+					this.w = e;
+					return this;
+				},
+				X = new x();
+			e.data('__h', X.h);
+			X.h.addClass(C).unbind(D).bind(D, $.proxy(S, X));
+		});
+	};
+	$.fn.unDrag = function () {
+		return this.each(function(){
+			($(this).data('__h') || $()).removeClass(C).unbind(D);
+		});
+	};
+})($);

plugins/fullavatareditor/scripts/jQuery.Resize.js

@@ -0,0 +1,109 @@
+(function($){
+	var doc = $(document),
+		win = $(window),
+		mouseDown = 'mousedown.resize',
+		mouseMove = 'mousemove.resize',
+		mouseUp = 'mouseup.resize',
+		clsName = 'CursorResize',
+		resize = function (e) {
+			var o = this,
+				a = o.wrapper.width('auto'),
+				b = o.target,
+				c = 0,
+				d = 0,
+				f = b.offset();
+			if (a)
+			{
+				c = a.width() - b.width();
+				d = a.height() - b.height();
+				f = a.offset();
+			}
+			var m = $.extend({
+					width  : win.width() - (f.left - doc.scrollLeft()) - c,
+					height : win.height() - (f.top - doc.scrollTop()) - d
+				}, o.max),
+				w = Math.min(Math.max(e.pageX - o.x + o.w, o.min.width), m.width),
+				h = Math.min(Math.max(e.pageY - o.y + o.h, o.min.height),m.height);
+			b.css({ width : w, height : h });
+			return false;
+		},
+		end = function () {
+			doc.unbind(mouseMove + ' ' + mouseUp);
+		},
+		start = function (e) {
+			var E = this,
+				T = E.target;
+			E.x = e.pageX;
+			E.y = e.pageY;
+			E.w = T.outerWidth()  - T.getPadding().w;
+			E.h = T.outerHeight() - T.getPadding().h;
+			if (E.min.width  === 0)
+			{
+				var MW = T.data('_mw');
+				if (MW)
+				{
+					E.min.width = MW;
+				}
+				else
+				{
+					E.min.width  = T.outerWidth()  - T.getPadding().w;
+					T.data('_mw', E.min.width);
+				}
+			}
+			if (this.min.height === 0)
+			{
+				var MH = T.data('_mh');
+				if (MH)
+				{
+					E.min.height = MH;
+				}
+				else
+				{
+					E.min.height = T.outerHeight() - T.getPadding().h;
+					T.data('_mh', E.min.height);
+				}
+			}
+			doc.bind(mouseMove, $.proxy(resize, E)).bind(mouseUp, end);
+			return false;
+		};
+	$.fn.resize = function(o){
+		o = $.extend({ min : { width : 0, height: 0 }}, o);
+		/*
+		options = {
+			handler : null,
+			wrapper : null,
+			min : { width : 0, height: 0},
+			max : { width : 0, height: 0}
+		};
+		*/
+		return this.each(function(){
+			var e = $(this),
+				x = function () {
+					this.target = e;
+					this.handler = o.handler ? (typeof o.handler === 'string' ? $(o.handler, e[0]) : o.handler) : e;
+					this.wrapper = o.wrapper;
+					e.data('_h', this.handler);
+					this.min = o.min;
+					this.max = o.max;
+					if (o.min) $.extend(this.min, o.min);
+					return this;
+				},
+				X = new x();
+			X.handler.addClass(clsName).unbind(mouseDown).bind(mouseDown, $.proxy(start, X));
+		});
+	};
+	$.fn.unResize = function () {
+		return this.each(function(){
+			($(this).data('_h') || $()).removeClass(clsName).unbind(mouseDown);
+		});
+	};
+	$.fn.getPadding = function () {
+		var s = this[0].style,
+			o =
+			{
+				w : parseInt(s.paddingLeft) + parseInt(s.paddingRight)  || 0,
+				h : parseInt(s.paddingTop) +  parseInt(s.paddingBottom) || 0
+			};
+		return o;
+	};
+})($);

plugins/fullavatareditor/scripts/test.js

@@ -0,0 +1,231 @@
+swfobject.addDomLoadEvent(function () {
+    //------------------------------------------------------------------------------示例一
+    var webcamAvailable = false;
+    var currentTab = 'upload';
+	var sourcePic1Url = $.Cookie('swf1');
+	var sourcePic2Url = $.Cookie('swf2');
+	if(sourcePic2Url == null)
+	{
+		sourcePic2Url = "http://www.baidu.com/img/bdlogo.png";
+	}
+    var callback = function (json) {
+		var id = this.id;
+        switch (json.code) {
+            case 2:
+                //如果加载原图成功，说明进入了编辑面板，显示保存和取消按钮，隐藏拍照按钮
+                if (json.type == 0) {
+					if(id == "swf1")
+					{
+						$('#webcamPanelButton').hide();
+						$('#editorPanelButtons').show();
+					}
+                }
+                //否则会转到上传面板
+                else {
+                    //隐藏所有按钮
+                    if(id == "swf1")$('#editorPanelButtons,#webcamPanelButton').hide();
+                }
+                break;
+            case 3:
+                //如果摄像头已准备就绪且用户已允许使用，显示拍照按钮。
+                if (json.type == 0) {
+                    if(id == "swf1")
+					{
+						$('.button_shutter').removeClass('Disabled');
+						$('#webcamPanelButton').show();
+						webcamAvailable = true;
+					}
+                }
+                else {
+					if(id == "swf1")
+					{
+						webcamAvailable = false;
+						$('#webcamPanelButton').hide();
+					}
+                    //如果摄像头已准备就绪但用户已拒绝使用。
+                    if (json.type == 1) {
+                        alert('用户拒绝使用摄像头!');
+                    }
+                    //如果摄像头已准备就绪但摄像头被占用。
+                    else {
+                        alert('摄像头被占用!');
+                    }
+                }
+                break;
+            case 4:
+                alert("您选择的原图片文件大小（" + json.content + "）超出了指定的值(2MB)。");
+                break;
+            case 5:
+                //如果上传成功
+                if (json.type == 0) {
+					var e = this;
+					var html = $('<div class="imgList"/>');
+					for(var i = 0; i < json.content.avatarUrls.length; i++)
+					{
+						html.append('<dl><dt>头像图片'+(i+1)+'</dt><dd><img src="' + json.content.avatarUrls[i] + '" /></dd></dl>');
+					}
+					var button = [];
+					//如果上传了原图，给个修改按钮，感受视图初始化带来的用户体验度提升
+					if(json.content.sourceUrl)
+					{
+						button.push({text : '修改头像', callback:function(){
+							this.close();
+							$.Cookie(id, json.content.sourceUrl);
+							location.reload();
+							//e.call('loadPic', json.content.sourceUrl);
+						}});
+					}
+					else
+					{
+						$.Cookie(id, null);
+					}
+					button.push({text : '关闭窗口'});
+					$.dialog({
+						title:'图片已成功保存至服务器',
+						content:html,
+						button:button,
+						mask:true,
+						draggable:false
+					});
+                }
+                else {
+                    alert(json.type);
+                }
+                break;
+        }
+    };
+    var swf1 = new fullAvatarEditor('swf1', 335, {
+		id : 'swf1',
+        upload_url : 'upload.php',
+		src_url : sourcePic1Url,			//默认加载的原图片的url
+        tab_visible : false,				//不显示选项卡，外部自定义
+        button_visible : false,				//不显示按钮，外部自定义
+        src_upload : 2,						//是否上传原图片的选项：2-显示复选框由用户选择，0-不上传，1-上传
+        checkbox_visible : false,			//不显示复选框，外部自定义
+        browse_box_align : 38,				//图片选择框的水平对齐方式。left：左对齐；center：居中对齐；right：右对齐；数值：相对于舞台的x坐标
+		webcam_box_align : 38,				//摄像头拍照框的水平对齐方式，如上。
+		avatar_sizes : '258*200',			//定义单个头像
+		avatar_sizes_desc :'258*200像素',	   //头像尺寸的提示文本。
+        browse_box_align:'left',            //头像选择框对齐方式
+        webcam_box_align:'left',            //头像拍照框对齐方式
+		//头像简介
+		avatar_intro : '     最终会生成下面这个尺寸的头像',
+		avatar_tools_visible:true			//是否显示颜色调整工具
+    }, callback);
+    //选项卡点击事件
+    $('#avatar-tab li').click(function () {
+        if (currentTab != this.id) {
+            currentTab = this.id;
+            $(this).addClass('active');
+            $(this).siblings().removeClass('active');
+            //如果是点击“相册选取”
+            if (this.id === 'albums') {
+                //隐藏flash
+                hideSWF();
+                showAlbums();
+            }
+            else {
+                hideAlbums();
+                showSWF();
+                if (this.id === 'webcam') {
+                    $('#editorPanelButtons').hide();
+                    if (webcamAvailable) {
+                        $('.button_shutter').removeClass('Disabled');
+                        $('#webcamPanelButton').show();
+                    }
+                }
+                else {
+                    //隐藏所有按钮
+                    $('#editorPanelButtons,#webcamPanelButton').hide();
+                }
+            }
+            swf1.call('changepanel', this.id);
+        }
+    });
+    //复选框事件
+    $('#src_upload').change(function () {
+        swf1.call('srcUpload', this.checked);
+    });
+    //点击上传按钮的事件
+    $('.button_upload').click(function () {
+        swf1.call('upload');
+    });
+    //点击取消按钮的事件
+    $('.button_cancel').click(function () {
+        var activedTab = $('#avatar-tab li.active')[0].id;
+        if (activedTab === 'albums') {
+            hideSWF();
+            showAlbums();
+        }
+        else {
+            swf1.call('changepanel', activedTab);
+            if (activedTab === 'webcam') {
+                $('#editorPanelButtons').hide();
+                if (webcamAvailable) {
+                    $('.button_shutter').removeClass('Disabled');
+                    $('#webcamPanelButton').show();
+                }
+            }
+            else {
+                //隐藏所有按钮
+                $('#editorPanelButtons,#webcamPanelButton').hide();
+            }
+        }
+    });
+    //点击拍照按钮的事件
+    $('.button_shutter').click(function () {
+        if (!$(this).hasClass('Disabled')) {
+            $(this).addClass('Disabled');
+            swf1.call('pressShutter');
+        }
+    });
+    //从相册中选取
+    $('#userAlbums a').click(function () {
+        var sourcePic = this.href;
+        swf1.call('loadPic', sourcePic);
+        //隐藏相册
+        hideAlbums();
+        //显示flash
+        showSWF();
+        return false;
+    });
+    //隐藏flash的函数
+    function hideSWF() {
+        //将宽高设置为0的方式来隐藏flash，而不能使用将其display样式设置为none的方式来隐藏，否则flash将不会被加载，隐藏时储存其宽高，以便后期恢复
+        $('#flash1').data({
+            w: $('#flash1').width(),
+            h: $('#flash1').height()
+        })
+		.css({
+		    width: '0px',
+		    height: '0px',
+		    overflow: 'hidden'
+		});
+        //隐藏所有按钮
+        $('#editorPanelButtons,#webcamPanelButton').hide();
+    }
+    function showSWF() {
+        $('#flash1').css({
+            width: $('#flash1').data('w'),
+            height: $('#flash1').data('h')
+        });
+    }
+    //显示相册的函数
+    function showAlbums() {
+        $('#userAlbums').show();
+    }
+    //隐藏相册的函数
+    function hideAlbums() {
+        $('#userAlbums').hide();
+    }
+    //------------------------------------------------------------------------------示例二
+    var swf2 = new fullAvatarEditor('swf2', {
+        id: 'swf2',
+        upload_url: 'upload.php',	//上传图片的接口地址
+        src_url: sourcePic2Url,		//默认加载的原图片的url
+        src_upload: 2,				//是否上传原图片的选项：2-显示复选框由用户选择，0-不上传，1-上传
+		avatar_scale:2,				//头像保存时的缩放系数
+		avatar_intro:'最终头像的尺寸为以下尺寸 * 2(设置的缩放系数)',	//头像尺寸的提示文本。其间用"|"号分隔，
+		avatar_sizes_desc:'100*100像素，缩放系数为2，保存后的大小为200*200像素。|50*50像素，缩放系数为2，保存后的大小为100*100像素。|32*32像素，缩放系数为2，保存后的大小为64*64像素。'
+    }, callback);
+});