| blob | 2f311982fc6b6cb6f1ad0654329580a85616a2b1 |
1 <%@ Page Language="C#" Title="用户设置 - 木头盒子" AutoEventWireup="true" CodeBehind="Profile.aspx.cs"\r
2 Inherits="PumpkinHouse.User.Profile" MasterPageFile="~/Site.Master" %>\r
3 \r
4 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="ScriptContent">\r
5 <link href="/Styles/jquery-ui-1.8.20/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />\r
6 <script src="/Scripts/lib/jquery-ui-1.8.20.custom.min.draggable.js" language="javascript" type="text/javascript"></script>\r
7 <script src="/Scripts/lib/jquery.fileupload.js" language="javascript" type="text/javascript"></script>\r
8 <script type="text/javascript">\r
9 var globalUsername = '<%= Username %>';\r
10 var globalProvinces;\r
11 var globalRatio;\r
12 var globalFlags = [];\r
13 var globalDialog;\r
14 var globalUserInfo;\r
15 var globalProfilePhotoRoot = "http://image.mutouhezi.com/profile/";\r
16 var globalCount = 0;\r
17 \r
18 function uploadPhotoSuccessful(e, data) {\r
19 var result;\r
20 if (typeof data.result == 'string') {\r
21 result = $.parseJSON(data.result); /* other modern browers */\r
22 }\r
23 else {\r
24 result = data.result; /* IE */\r
25 }\r
26 var imageName = result.name;\r
27 var width = result.width;\r
28 var height = result.height;\r
29 \r
30 // calculate the size\r
31 globalRatio = 1.0;\r
32 var maxHeight = 225;\r
33 var maxWidth = 440;\r
34 var fixedRatio = maxHeight * 1.0 / maxWidth;\r
35 if (height > maxHeight || width > maxWidth) { // in that case we need to scale\r
36 var ratio = 1.0 * height / width;\r
37 if (ratio > fixedRatio) {\r
38 // fit the height\r
39 var originalHeight = height;\r
40 height = maxHeight;\r
41 width = height / ratio;\r
42 globalRatio = 1.0 * originalHeight / height;\r
43 }\r
44 else {\r
45 // fit the width\r
46 var originalWidth = width;\r
47 width = maxWidth;\r
48 height = width * ratio;\r
49 globalRatio = 1.0 * originalWidth / width;\r
50 }\r
51 }\r
52 \r
53 $('#statusText', globalDialog).hide();\r
54 $('#imageArea', globalDialog).show();\r
55 \r
56 var rect = $('.drawArea').draggable({ containment: "parent" });\r
57 $('.drawArea').resizable({ containment: "parent", aspectRatio: 1 });\r
58 \r
59 var minLength = width;\r
60 if (height < minLength) minLength = height;\r
61 \r
62 if (minLength < 200) {\r
63 $('.drawArea').css('height', minLength).css('width', minLength);\r
64 }\r
65 \r
66 $('#imageArea').css('width', width + 'px');\r
67 $('#imageArea').css('height', height + 'px');\r
68 // set the image as the background\r
69 var img = $('#bgImage');\r
70 img.attr('src', '/Images/GetPhoto.aspx?name=' + imageName + "&a=Math.floor(new Date/10)");\r
71 img.css('width', width + 'px');\r
72 img.css('height', height + 'px');\r
73 \r
74 $('#selBtn').show();\r
75 }\r
76 \r
77 function select() {\r
78 var t = $('.drawArea');\r
79 var m = 'top: ' + t.position().top + ', left: ' + t.position().left + '\n';\r
80 m += 'size: ' + t.width();\r
81 \r
82 var x = Math.floor(t.position().left * globalRatio);\r
83 var y = Math.floor(t.position().top * globalRatio);\r
84 var d = Math.floor(t.width() * globalRatio);\r
85 \r
86 ajaxCropPhoto(true, x, y, d, cropSuccess, handleFault);\r
87 }\r
88 \r
89 function cropSuccess() {\r
90 if (globalDialog) globalDialog.closeDialog();\r
91 $('#photo').attr('src', '/Images/GetPhoto.aspx?name=' + globalUsername + '_180_180.jpg&a=Math.floor(new Date/10)');\r
92 }\r
93 \r
94 function uploadPhotoStarted() {\r
95 if (globalDialog) {\r
96 // globalDialog.dialog({ width: 570 , height: 370 });\r
97 globalDialog.showDialog();\r
98 }\r
99 else {\r
100 var template = $('#photoDialogTemplate').tmpl();\r
101 globalDialog = template.mDialog({ width: 610, height: 410 });\r
102 \r
103 $('#selBtn').on('click', select);\r
104 }\r
105 \r
106 $('#imageArea', globalDialog).hide();\r
107 $('#selBtn').hide();\r
108 $('#statusText', globalDialog).show().text('头像上传中……');\r
109 \r
110 }\r
111 \r
112 function renderUploadTemplate() {\r
113 var template = $('#profilePhotoTemplate').tmpl();\r
114 var holder = $('#photoHolder');\r
115 holder.empty();\r
116 holder.append(template);\r
117 $('#photo').attr('src', '/Images/GetPhoto.aspx?name=' + globalUsername + '_180_180.jpg');\r
118 \r
119 $('#photoUploadForm').fileupload({\r
120 'formData': { type: 'photo' }, /* 区分头像还是分享 */\r
121 // Unwrapping HTML-encoded JSON required for IE's iframe transport.\r
122 dataType: 'iframejson',\r
123 converters: {\r
124 'html iframejson': function (htmlEncodedJson) {\r
125 return $.parseJSON($('<div/>').html(htmlEncodedJson).text());\r
126 },\r
127 'iframe iframejson': function (iframe) {\r
128 return $.parseJSON(iframe.find('body').text());\r
129 }\r
130 }\r
131 }).\r
132 bind('fileuploaddone', uploadPhotoSuccessful).\r
133 bind('fileuploadstart', uploadPhotoStarted);\r
134 }\r
135 \r
136 function renderGeneralInfo(userInfo) {\r
137 globalUserInfo = userInfo;\r
138 var holder = $('#generalInfoHolder');\r
139 holder.empty();\r
140 var template = $('#userGeneralInfoTemplate').tmpl({ user: userInfo, provinces: globalProvinces });\r
141 holder.append(template);\r
142 \r
143 // bind the event on province select control\r
144 $('#province').on('change', onProvinceChange);\r
145 \r
146 // render the province\r
147 var provinceId = userInfo.provinceName ? userInfo.provinceId : globalProvinces[0].Id;\r
148 \r
149 renderCities(provinceId);\r
150 \r
151 if (userInfo.provinceName) {\r
152 // render the city\r
153 $('#province').val(provinceId);\r
154 $('#city').val(userInfo.cityId);\r
155 }\r
156 \r
157 // render gender info\r
158 $("input[name=gender][value=" + userInfo.gender + ']').attr("checked", "checked");\r
159 \r
160 // bind event on upate info button\r
161 \r
162 $('#generalInfoForm').validate({\r
163 submitHandler: function () {\r
164 var g = $('input[name=gender]:checked').val();\r
165 var lid = $('#city').val();\r
166 var info = new UserGeneralInfo(g, lid, $('#intro').val(), $('#nickname').val());\r
167 ajaxUpdateUserInfo(true, info, updateUserInfoSuccess, handleFault);\r
168 },\r
169 messages: {\r
170 nickname: {\r
171 required: '昵称不能为空',\r
172 remote: '这个昵称已经被别人使用啦！',\r
173 maxlength: '昵称不能超过14字符/汉字'\r
174 }\r
175 },\r
176 rules: {\r
177 nickname: {\r
178 maxlength: 14\r
179 }\r
180 }\r
181 });\r
182 \r
183 }\r
184 \r
185 function updateUserInfoSuccess() {\r
186 $('.resultMessage', '#tabHolder').text('设置成功');\r
187 }\r
188 \r
189 function onProvinceChange() {\r
190 var provinceId = $('option:selected', '#province').attr('value');\r
191 renderCities(provinceId);\r
192 }\r
193 \r
194 function renderCities(provinceId) {\r
195 var cities = $.grep(globalProvinces, function (item, index) {\r
196 return item.Id == provinceId;\r
197 })[0].Cities;\r
198 var cityTemplate = $('#locationTemplate').tmpl(cities);\r
199 $('#city').empty().append('<option value="0"></option>');\r
200 cityTemplate.appendTo('#city');\r
201 }\r
202 \r
203 function renderEmail(userInfo) {\r
204 globalUserInfo = userInfo;\r
205 document.title = '用户邮箱设置 - 木头盒子';\r
206 renderTemplate('#emailHolder', '#emailTemplate', userInfo);\r
207 \r
208 $('#updateEmailBtn').on('click', function () {\r
209 $('form#emailForm').validate({\r
210 messages: {\r
211 email: {\r
212 required: '请输入信箱地址',\r
213 email: '信箱格式不正确！',\r
214 remote: '这个邮箱已经被别人使用啦！'\r
215 }\r
216 },\r
217 submitHandler: function () {\r
218 var newEmail = $('#email').val();\r
219 ajaxUpdateUserEmail(true, newEmail, function () {\r
220 $('#email').val(newEmail);\r
221 userInfo.email = newEmail;\r
222 alert('good');\r
223 }, handleFault);\r
224 }\r
225 });\r
226 });\r
227 }\r
228 \r
229 function renderPassword() {\r
230 var pwdHolder = $('#passwordHolder');\r
231 pwdHolder.empty();\r
232 var template = $('#resetPasswordTemplate').tmpl();\r
233 pwdHolder.append(template);\r
234 \r
235 $('#resetPwdBtn').on('click', function () {\r
236 $('form#pwdForm').validate({\r
237 messages: {\r
238 oldPwd: {\r
239 required: '请输入现在的密码'\r
240 },\r
241 newPwd: {\r
242 required: '请输入新密码'\r
243 },\r
244 repPwd: {\r
245 required: '请重复输入新密码',\r
246 equalTo: '两次密码输入必须一致'\r
247 }\r
248 },\r
249 submitHandler: function () {\r
250 var oldPwd = $('#oldPwd').val();\r
251 var newPwd = $('#newPwd').val();\r
252 ajaxUpdatePassword(true, oldPwd, newPwd, updatePasswordSuccess, handleFault);\r
253 }\r
254 });\r
255 });\r
256 }\r
257 \r
258 function updatePasswordSuccess(result) {\r
259 if (result) {\r
260 $('.resultMessage', '#tabHolder').text('修改成功');\r
261 $('#oldPwd').val('');\r
262 $('#newPwd').val('');\r
263 $('#repPwd').val('');\r
264 }\r
265 else {\r
266 alert('现在的密码填写错误！');\r
267 }\r
268 }\r
269 \r
270 function renderReceiveEmail(userInfo) {\r
271 if (userInfo) {\r
272 renderTemplate('#receiveEmailHolder', '#receiveEmailTemplate', userInfo);\r
273 $('input[name=receiveEmail][value=' + userInfo.receiveEmail + ']').attr('checked', true);\r
274 globalUserInfo = userInfo;\r
275 $('#updateReceiveEmailBtn').on('click', function () {\r
276 var result = $('input[name=receiveEmail]:checked').val();\r
277 ajaxUpdateReceiveEmail(true, result, function () {\r
278 $('.resultMessage', '#tabHolder').text('邮件订阅设置成功');\r
279 }, handleFault);\r
280 });\r
281 }\r
282 else {\r
283 ajaxGetUserInfo(true, renderReceiveEmail, handleFault);\r
284 }\r
285 }\r
286 \r
287 function renderAssociation(associationList) {\r
288 renderTemplate('#associationHolder', '#associationListTemplate', { list: associationList });\r
289 if ('<%= HasBoundError %>' === 'True') {\r
290 alert('此第三方账号已与另一个木头盒子账号绑定。如要坚持绑定此账号，请用此第三方账号登录后取消与另一个账号的绑定。');\r
291 }\r
292 $('.bound_yes', '#associationHolder').on('click', removeAssociation);\r
293 }\r
294 \r
295 function removeAssociation(event) {\r
296 var target = $(event.target);\r
297 var id = target.attr('data-id');\r
298 ajaxRemoveAssociation(true, id, function () { ajaxGetAccountAssociations(true, renderAssociation, handleFault); }, handleFault);\r
299 }\r
300 \r
301 function doAction() {\r
302 \r
303 //load province list\r
304 globalProvinces = getLocationsSync(handleFault);\r
305 \r
306 globalTabs = $('#tabHolder').tabs({\r
307 select: function (event, ui) {\r
308 var tabName = $(ui.tab).attr('href');\r
309 location.hash = tabName;\r
310 return true;\r
311 },\r
312 show: function (event, ui) {\r
313 var index = ($(this).tabs('option', 'selected'));\r
314 switch (index) {\r
315 case 0:\r
316 if (!globalFlags[0]) {\r
317 renderUploadTemplate();\r
318 if (!globalUserInfo) {\r
319 ajaxGetUserInfo(true, renderGeneralInfo, handleFault);\r
320 }\r
321 else {\r
322 renderGeneralInfo(globalUserInfo);\r
323 }\r
324 }\r
325 document.title = '用户基本信息设置 - 木头盒子';\r
326 break;\r
327 case 1:\r
328 if (!globalFlags[index]) {\r
329 renderPassword();\r
330 }\r
331 document.title = '用户密码设置 - 木头盒子';\r
332 break;\r
333 case 2:\r
334 ajaxGetAccountAssociations(true, renderAssociation, handleFault);\r
335 break;\r
336 case 3:\r
337 if (!globalFlags[index]) {\r
338 renderReceiveEmail(globalUserInfo);\r
339 }\r
340 document.title = '用户邮件订阅设置 - 木头盒子';\r
341 break;\r
342 }\r
343 globalFlags[index] = true;\r
344 $('.resultMessage', '#tabHolder').text('');\r
345 }\r
346 });\r
347 $('#tabHolder').show();\r
348 }\r
349 </script>\r
350 </asp:Content>\r
351 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">\r
352 <style type="text/css">\r
353 /*重构UI自带CSS代码*/\r
354 .ui-state-active a\r
355 {\r
356 border: none;\r
357 background: none;\r
358 }\r
359 \r
360 .ui-corner-all\r
361 {\r
362 border-radius: 0px;\r
363 border: none;\r
364 margin: 0 auto;\r
365 }\r
366 .ui-widget-header\r
367 {\r
368 background: none;\r
369 background: #ffffff;\r
370 border: none;\r
371 }\r
372 .ui-corner-al\r
373 {\r
374 border: none;\r
375 background: #FFFFFF;\r
376 }\r
377 .ui-tabs-selected, .ui-state-active, .ui-state-hover\r
378 {\r
379 border: none;\r
380 background: none;\r
381 border-radius: 0px;\r
382 margin-top: -2px;\r
383 }\r
384 .ui-state-default\r
385 {\r
386 border: none;\r
387 background: none;\r
388 font-family: '微软雅黑';\r
389 color: #aacd60;\r
390 font-size: 16px;\r
391 }\r
392 .ui-state-default a:hover\r
393 {\r
394 color: #aacd60;\r
395 font-size: 16px;\r
396 background: none;\r
397 }\r
398 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited\r
399 {\r
400 color: #aacd60;\r
401 border-top: 2px solid #aacd60;\r
402 text-decoration: none;\r
403 cursor: pointer;\r
404 margin-top: -2px;\r
405 font-weight:100;\r
406 }\r
407 \r
408 .ui-widget-content\r
409 {\r
410 border: none;\r
411 background: none;\r
412 overflow: hidden;\r
413 margin: 0 auto;\r
414 }\r
415 .ui-widget-header\r
416 {\r
417 border: none;\r
418 background: none;\r
419 height: 60px;\r
420 }\r
421 .ui-widget-header .ui-icon\r
422 {\r
423 width: 40px;\r
424 height: 40px;\r
425 display: block;\r
426 float: right;\r
427 background: url(/img/DialogClose.png) no-repeat center top;\r
428 border: none;\r
429 }\r
430 .ui-icon:hover\r
431 {\r
432 background: url(/img/DialogCloseHover.png) no-repeat center top;\r
433 display: block;\r
434 margin-top: -2px;\r
435 margin-right: -2px;\r
436 }\r
437 a.ui-dialog-titlebar-close a.ui-corner-all\r
438 {\r
439 border: 2px solid red;\r
440 }\r
441 \r
442 .ui-resizable-se\r
443 {\r
444 display: none;\r
445 }\r
446 \r
447 .ui-corner-all\r
448 {\r
449 background: none;\r
450 }\r
451 .ui-corner-all .ui-state-hover\r
452 {\r
453 \r
454 }\r
455 .ui-state-focus{ background:none;}\r
456 </style>\r
457 <div class="siteLink clearfix" style="width: 800px; height: 55px; margin-top: 50px;">\r
458 <a href="/">木头盒子首页</a> >用户设置</div>\r
459 <div id="tabHolder" class="UserModifyInfo" style="display: none">\r
460 <ul style="background: #F6F6F6; height: 38px;">\r
461 <li style="border: none; margin-left: 10px; font-weight:100;"><a href="#tab1">基本信息</a></li>\r
462 <li style="border: none; margin-left: 10px; font-weight:100;"><a href="#tab3">密码</a></li>\r
463 <li style="border: none; margin-left: 10px; font-weight:100;"><a href="#tab4">账号绑定</a></li>\r
464 <li style="border: none; margin-left: 10px; font-weight:100;"><a href="#tab5">邮件订阅</a></li>\r
465 </ul>\r
466 <div id="tab1">\r
467 <div id="photoHolder" class="UserModifyTab1">\r
468 </div>\r
469 <div id="generalInfoHolder" class="UserModifyTab2">\r
470 </div>\r
471 </div>\r
472 \r
473 <div id="tab3">\r
474 <div id="passwordHolder" class="UserModifyTab4">\r
475 </div>\r
476 </div>\r
477 \r
478 <div id="tab4">\r
479 <div id="associationHolder" class="UserModifyTab5">\r
480 \r
481 </div>\r
482 </div>\r
483 \r
484 <div id="tab5">\r
485 <div id="receiveEmailHolder" class="UserModifyTab6">\r
486 </div>\r
487 </div>\r
488 </div>\r
489 <!-- #Include virtual="/template/userProfileTemplate.html" -->\r
490 </asp:Content>\r