PageRenderTime 55ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/tpl/static/wap/estate/picroll.js

https://gitlab.com/colin.luo/shbs
JavaScript | 395 lines | 342 code | 0 blank | 53 comment | 47 complexity | 1322201317a8b6f3116d909be0ce9723 MD5 | raw file
  1. var FCAPP = FCAPP || {},
  2. myScroll;
  3. FCAPP.HOUSE = FCAPP.HOUSE || {};
  4. FCAPP.HOUSE.Picroll = {
  5. CONFIG: {
  6. zoomTime: 200
  7. },
  8. RUNTIME: {
  9. findCategory: false
  10. },
  11. init: function() {
  12. var R = Picroll.RUNTIME;
  13. if (!R.binded) {
  14. R.binded = true;
  15. Picroll.initElements(R);
  16. Picroll.bindEvents(R);
  17. R.detailState = 'hide';
  18. R.zoomed = false;
  19. R.template = FCAPP.Common.escTpl($('#template').html());
  20. R.imgDom = [];
  21. R.w = document.documentElement.clientWidth;
  22. R.h = document.documentElement.clientHeight;
  23. window.shareData = window.shareData || {};
  24. R.isWeixin = /MicroMessenger/.test(navigator.userAgent);
  25. if (R.isWeixin) {
  26. R.zoomBtn.hide();
  27. R.downBtn.hide();
  28. R.zoomDiv.hide();
  29. } else {
  30. R.zoomBtn.show();
  31. R.downBtn.show();
  32. }
  33. }
  34. // Picroll.loadData();
  35. // var id = '';
  36. // window.shareData.linkKeep = '/Webestate/Housedata/pid/'+PID+'/wechatid/'+WECHATID;
  37. // window.shareData.link = window.shareData.linkKeep;
  38. // if (window.gQuery && gQuery.id) {
  39. // id = gQuery.id;
  40. // window.shareData.link += '&id=' + id;
  41. // window.shareData.linkKeep += '&id=' + id;
  42. // }
  43. // if (window.gQuery && gQuery.houseid) {
  44. // window.shareData.link += '&houseid=' + gQuery.houseid;
  45. // window.shareData.linkKeep += '&houseid=' + gQuery.houseid;
  46. // }
  47. // FCAPP.Common.loadShareData(id);
  48. // FCAPP.Common.hideToolbar();
  49. },
  50. initElements: function(R) {
  51. R.picDetail = $('#picDetail');
  52. R.detailCav = $('#detailContainer');
  53. R.closeBtn = $('a.btn_show_close');
  54. R.zoomBtn = $('a.btn_zoom_out');
  55. R.popTips = $('#popTips');
  56. R.downBtn = $('a.btn_down');
  57. R.picTank = $('#picTank');
  58. R.zoomDiv = $('#zoomDiv');
  59. },
  60. bindEvents: function(R) {
  61. R.closeBtn.click(Picroll.closePage);
  62. R.zoomBtn.click(Picroll.zoomPic);
  63. R.downBtn.click(Picroll.downPic);
  64. $(window).resize(Picroll.resizeLayout);
  65. FCAPP.Common.resizeLayout(R.popTips);
  66. },
  67. resizeLayout: function() {
  68. var R = Picroll.RUNTIME,
  69. t = R.loadSize.length;
  70. R.w = document.documentElement.clientWidth;
  71. R.h = document.documentElement.clientHeight;
  72. t *= R.w;
  73. R.picTank.css({
  74. width: t + 'px',
  75. height: R.h + 'px'
  76. });
  77. for (var i = 0,
  78. il = R.imgDom.length; i < il; i++) {
  79. Picroll.loadedImgProcess(R.imgDom[i]);
  80. }
  81. FCAPP.Common.resizeLayout(R.noticeDiv);
  82. try {
  83. myScroll.refresh();
  84. } catch(e) {}
  85. },
  86. closePage: function() {
  87. FCAPP.Common.jumpTo('house.html', {
  88. '#wechat_webview_type': 1
  89. },
  90. true);
  91. },
  92. switchDetail: function() {
  93. var R = Picroll.RUNTIME;
  94. if (R.detailState == 'hide') {
  95. R.detailState = 'show';
  96. R.detailCav.addClass('type_full');
  97. R.closeBtn.hide();
  98. R.zoomBtn.hide();
  99. R.downBtn.hide();
  100. } else {
  101. R.detailState = 'hide';
  102. R.detailCav.removeClass('type_full');
  103. if (!R.isWeixin) {
  104. R.closeBtn.show();
  105. R.zoomBtn.show();
  106. R.downBtn.show();
  107. }
  108. }
  109. },
  110. // loadData: function() {
  111. // window.showRooms = Picroll.showRooms;
  112. // var datafile = window.gQuery && gQuery.id ? gQuery.id + '.': '',
  113. // dt = new Date();
  114. // datafile = datafile.replace(/[<>\'\"\/\\&#\?\s\r\n]+/gi, '');
  115. // datafile += 'rooms.js?';
  116. // $.ajax({
  117. // //url: 'http://trade.qq.com/fangchan/static/' + datafile + dt.getDate() + dt.getHours(),
  118. // url: '/Webestate/Housedata/pid/'+PID+'/wechatid/'+WECHATID,
  119. // dataType: 'jsonp',
  120. // error: function() {
  121. // FCAPP.Common.msg(true, {
  122. // msg: '数据加载失败!'
  123. // });
  124. // }
  125. // });
  126. // },
  127. showRooms: function(res) {
  128. var R = Picroll.RUNTIME,
  129. data, idx = -1,
  130. find = false;
  131. FCAPP.Common.hideLoading();
  132. data = res.rooms;
  133. for (var i = 0, il = data.length; i < il; i++) {
  134. if (data[i].id == gQuery.houseid) {
  135. idx = i;
  136. break;
  137. }
  138. }
  139. if (idx == -1) {
  140. FCAPP.Common.msg(true, {
  141. msg: '没找到该户型'
  142. });
  143. } else {
  144. find = true;
  145. Picroll.renderPics(data[idx]);
  146. }
  147. R.findCategory = find;
  148. R.closeBtn.show();
  149. },
  150. renderPics: function(room) {
  151. var R = Picroll.RUNTIME,
  152. List = [],
  153. pics = room.pics || [],
  154. detail = '',
  155. imgdata = 'src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="';
  156. R.loadSize = [];
  157. R.Img = [];
  158. R.ImgName = [];
  159. window.shareData.desc = '户型【平面】-' + room.desc.replace(/\.jpe?g$/gi, '') + ' ' + room.name.replace(/\.jpe?g$/gi, '');
  160. window.shareData.descKeep = '户型【平面】-' + room.desc.replace(/\.jpe?g$/gi, '') + ' ' + room.name.replace(/\.jpe?g$/gi, '');
  161. room.total = 1 + pics.length;
  162. detail = $.template(R.template, {
  163. data: room
  164. });
  165. List.push('<img id="pic0" idx="pic0" width="' + R.w + '" border="0" height="' + R.h + '" ' + imgdata + '>');
  166. R.Img.push(room.bimg);
  167. R.ImgName.push([1 + '/' + (pics.length + 1), room.desc.replace(/\.jpe?g$/gi, ''), room.name.replace(/\.jpe?g$/gi, '')]);
  168. R.loadSize.push({
  169. w: room.width,
  170. h: room.height
  171. });
  172. for (var i = 0,
  173. il = pics.length; i < il; i++) {
  174. List.push('<img id="pic' + (1 + i) + '" idx="pic' + (1 + i) + '" width="' + R.w + '" border="0" height="' + R.h + '" ' + imgdata + '>');
  175. R.Img.push(pics[i].img);
  176. R.ImgName.push([(i + 2) + '/' + (il + 1), pics[i].name.replace(/\.jpe?g$/gi, ''), room.name.replace(/\.jpe?g$/gi, '')]);
  177. R.loadSize.push({
  178. w: pics[i].width,
  179. h: pics[i].height
  180. });
  181. }
  182. R.picTank.html(List.join(''));
  183. R.picDetail.html(detail);
  184. FCAPP.Common.loadImg(R.Img[0], 'pic0', Picroll.loadedImgProcess);
  185. R.picTank.css('width', R.w * R.Img.length + 'px');
  186. Picroll.initScroll();
  187. },
  188. renderMsg: function(idx) {
  189. var R = Picroll.RUNTIME;
  190. if (!R.idxCav) {
  191. R.idxCav = $('#typeNum');
  192. }
  193. if (R.ImgName[idx]) {
  194. R.idxCav.html(R.ImgName[idx].slice(0, 2).join(' '));
  195. }
  196. },
  197. // downPic: function() {
  198. // var R = Picroll.RUNTIME;
  199. // if (!R.findCategory) {
  200. // return;
  201. // }
  202. // if (R.pic) {
  203. // window.sendMsgResult = Picroll.sendMsgResult;
  204. // var data = {
  205. // cmd: 'picsend',
  206. // appid: window.gQuery && gQuery.appid ? gQuery.appid: '',
  207. // wticket: window.gQuery && gQuery.wticket ? gQuery.wticket: '',
  208. // picurl: R.pic,
  209. // picname: R.picName,
  210. // callback: 'sendMsgResult'
  211. // };
  212. // $.ajax({
  213. // url: 'http://cgi.trade.qq.com/cgi-bin/common/weixin_helper.fcg?' + $.param(data),
  214. // dataType: 'jsonp'
  215. // });
  216. // }
  217. // },
  218. sendMsgResult: function(res) {
  219. if (res.ret == 0) {
  220. FCAPP.Common.msg(true, {
  221. msg: '已发送这张图片给你的微信'
  222. });
  223. } else {
  224. FCAPP.Common.msg(true, {
  225. msg: '保存失败,请稍后尝试'
  226. });
  227. }
  228. },
  229. zoomPic: function() {
  230. var R = Picroll.RUNTIME,
  231. C = Picroll.CONFIG;
  232. if (!R.findCategory) {
  233. return;
  234. }
  235. if (R.zoomed) {
  236. Picroll.zoomOut(R, C.zoomTime);
  237. } else {
  238. Picroll.zoomIn(R, C.zoomTime);
  239. }
  240. },
  241. zoomIn: function(R, timeout) {
  242. R.zoomed = true;
  243. var idx = myScroll.currPageX,
  244. src = R.Img[idx],
  245. w = R.imgDom[idx].width * 2,
  246. h = R.imgDom[idx].height * 2;
  247. cw = Math.max(w, R.w);
  248. R.zoomIdx = idx;
  249. R.zoomBtn[0].className = 'btn_zoom_in';
  250. R.zoomDiv.show();
  251. R.detailCav.hide();
  252. FCAPP.Common.loadImg(src, 'zoomImg',
  253. function(img) {
  254. if (idx != 0) {
  255. img.width = w;
  256. img.height = h;
  257. } else {
  258. img.width = img.width;
  259. img.height = img.height;
  260. }
  261. var padding = 'padding-left:0px;';
  262. if (img.width < cw) {
  263. padding = 'padding-left:' + (cw - img.width) / 2 + 'px;';
  264. }
  265. img.id = 'zoomImg';
  266. img.style.cssText = 'overflow:hidden;width:' + img.width + 'px;height:' + img.height + 'px;' + padding;
  267. img.onclick = Picroll.showBtn;
  268. R.downBtn.hide();
  269. R.zoomBtn.hide();
  270. R.zoomDiv.css({
  271. width: img.width + 'px',
  272. height: img.height + 'px'
  273. });
  274. setTimeout(function() {
  275. document.body.scrollTop = img.height / 3;
  276. },
  277. 150);
  278. },
  279. true);
  280. },
  281. zoomOut: function(R, timeout) {
  282. R.zoomed = false;
  283. R.zoomDiv.hide();
  284. R.detailCav.show();
  285. R.zoomBtn[0].className = 'btn_zoom_out';
  286. R.picTank.css('height', R.h + 'px');
  287. myScroll.refresh();
  288. setTimeout(function() {
  289. R.zoomDiv.css({
  290. width: '100%',
  291. height: '100%'
  292. });
  293. R.downBtn.show();
  294. R.zoomBtn.show();
  295. $('#zoomImg').prop('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  296. },
  297. timeout);
  298. },
  299. viewImg: function(index) {
  300. var R = Picroll.RUNTIME,
  301. idx = myScroll.currPageX,
  302. src = R.Img[idx],
  303. content = R.ImgName[idx].slice(1, 2).join(' ');
  304. if (index) {
  305. R.imgViewRetry = index;
  306. } else {
  307. R.imgViewRetry++;
  308. }
  309. try {
  310. WeixinJSBridge.invoke('imagePreview', {
  311. content: content,
  312. urls: [src]
  313. });
  314. } catch(e) {
  315. if (R.imgViewRetry < 10) {
  316. setTimeout(Picroll.viewImg, 200);
  317. } else {
  318. R.isWeixin = false;
  319. Picroll.showBtn();
  320. }
  321. }
  322. },
  323. showBtn: function() {
  324. var R = Picroll.RUNTIME;
  325. if (R.isWeixin) {
  326. Picroll.viewImg(1);
  327. } else {
  328. if (R.downBtn[0].style.display == 'none') {
  329. R.downBtn.show();
  330. R.zoomBtn.show();
  331. } else {
  332. R.downBtn.hide();
  333. R.zoomBtn.hide();
  334. }
  335. }
  336. },
  337. initScroll: function() {
  338. var R = Picroll.RUNTIME;
  339. myScroll = new iScroll('detailContainer', {
  340. zoom: false,
  341. snap: true,
  342. momentum: false,
  343. hScrollbar: false,
  344. vScrollbar: false,
  345. fixScrollBar: true,
  346. hScroll: true,
  347. onScrollEnd: function() {
  348. var idx = myScroll.currPageX;
  349. FCAPP.Common.loadImg(R.Img[idx], 'pic' + idx, Picroll.loadedImgProcess);
  350. Picroll.renderMsg(idx);
  351. R.pic = R.Img[idx];
  352. R.picName = R.ImgName[idx].slice(1, 3).join(' ');
  353. }
  354. });
  355. R.pic = R.Img[0];
  356. R.picName = R.ImgName[0].slice(1, 3).join(' ');
  357. },
  358. loadedImgProcess: function(img) {
  359. var R = Picroll.RUNTIME;
  360. idx = img.idx.replace(/[^\d]+/g, ''),
  361. size = R.loadSize[idx],
  362. pw = img.width,
  363. ph = img.height,
  364. sw = R.w,
  365. sh = R.h,
  366. fw = 0,
  367. fh = 0,
  368. style = '';
  369. img.id = img.idx;
  370. if (pw == 0) {
  371. pw = size.w;
  372. }
  373. if (ph == 0) {
  374. ph = size.h;
  375. }
  376. if (ph / pw < sh / sw) {
  377. fw = sw;
  378. fh = Math.floor(ph * sw / pw);
  379. style = 'margin:' + Math.floor((sh - fh) / 2) + "px 0;";
  380. } else {
  381. fh = sh;
  382. fw = Math.floor(pw * sh / ph);
  383. style = 'margin:0 ' + Math.floor((sw - fw) / 2) + "px;";
  384. }
  385. R.imgDom[idx] = img;
  386. img.width = fw;
  387. img.height = fh;
  388. img.style.cssText = style;
  389. if (R.isWeixin) {
  390. img.onclick = Picroll.showBtn;
  391. }
  392. }
  393. };
  394. var Picroll = FCAPP.HOUSE.Picroll;
  395. $(document).ready(Picroll.init);