Authored by 2586703@qq.com

detail 相关js功能上传

@@ -9,11 +9,15 @@ var $ = require('jquery'), @@ -9,11 +9,15 @@ var $ = require('jquery'),
9 box = require('../plugin/box'), 9 box = require('../plugin/box'),
10 imgZoom = require('../plugin/imgZoom'), 10 imgZoom = require('../plugin/imgZoom'),
11 tools = require('yoho-tools'), 11 tools = require('yoho-tools'),
12 - mulLine = require('mlellipsis'); 12 + mustache = require('mustache'),
  13 + mulLine = require('mlellipsis'),
  14 + flip = require("../plugin/flip"),
  15 + slide = require("../plugin/photoslide");
13 16
14 require('lazyload'); 17 require('lazyload');
15 require('../plugin/slider'); 18 require('../plugin/slider');
16 require('../plugin/comment'); 19 require('../plugin/comment');
  20 +require('../plugin/content-paging');
17 21
18 exports.init = function() { 22 exports.init = function() {
19 var shareUrl = $(".share").attr("data-link"), 23 var shareUrl = $(".share").attr("data-link"),
@@ -25,34 +29,58 @@ exports.init = function() { @@ -25,34 +29,58 @@ exports.init = function() {
25 data, 29 data,
26 cidNum; 30 cidNum;
27 31
28 - //底部数据相关变量  
29 - var adItem = '', //边栏广告  
30 - sideVideoTpl = '', //边栏视频模板  
31 - sideVideoData = '', //边栏视频数据  
32 - sideVideoHtml = '', //边栏视频渲染的html  
33 - sidePostTpl = '', //边栏relatedpost模板  
34 - sidePostData = '', //边栏relatedpost数据  
35 - sidePostHtml = ''; //边栏relatedpost渲染的html 32 + //边栏数据相关变量
  33 + var adItem, //边栏广告
  34 + sideVideoTpl, //边栏视频模板
  35 + sideVideoData, //边栏视频数据
  36 + sideVideoHtml, //边栏视频渲染的html
  37 + sidePostTpl, //边栏relatedpost模板
  38 + sidePostData, //边栏relatedpost数据
  39 + sidePostHtml; //边栏relatedpost渲染的html
36 40
37 //related-post截行相关变量 41 //related-post截行相关变量
38 - var relatedPost = '',  
39 - postList = '', //post列表  
40 - totalLineNum = '', //总行数  
41 - titleLineNum = '', //title行数  
42 - subTitleLineNum = ''; //subtitle行数 42 + var relatedPost,
  43 + postList, //post列表
  44 + totalLineNum, //总行数
  45 + titleLineNum, //title行数
  46 + subTitleLineNum; //subtitle行数
43 47
44 //滑出边栏小视频side-video播放区域暂停相关变量 48 //滑出边栏小视频side-video播放区域暂停相关变量
45 - var relatedPostsOffsetTop = '',  
46 - relatedPostsTop = '',  
47 - relatedPostsMarginLeft = ''; 49 + var relatedPostsOffsetTop,
  50 + relatedPostsTop,
  51 + relatedPostsMarginLeft;
48 52
49 //页面滑动热播位置变化相关变量 53 //页面滑动热播位置变化相关变量
50 - var detailBodyOffsetTop = '',  
51 - relatedPostsOffsetHeightTop = '',  
52 - distance = '',  
53 - eleTop = '',  
54 - detailBodyHeight = ''; 54 + var detailBodyOffsetTop,
  55 + relatedPostsOffsetHeightTop,
  56 + distance,
  57 + eleTop,
  58 + detailBodyHeight;
55 59
  60 + //底部数据相关变量
  61 + var bottomPostTpl, //底部relatedpost模板
  62 + bottomPostData, //底部relatedpost数据
  63 + bottomPostHtml; //底部relatedpost渲染的html
  64 +
  65 + //态度设置相关变量
  66 + var exType = 0,
  67 + isCancel = 0,
  68 + attitudeData,
  69 + attitudeDataWowIcon,
  70 + attitudeWowNum,
  71 + attitudeDataWtfIcon,
  72 + attitudeWtfNum,
  73 + attitudeDataZzzIcon,
  74 + attitudeZzzNum;
  75 +
  76 + //兼容视频,IE等相关变量
  77 + var video,
  78 + ieVideo,
  79 + ipadVideo,
  80 + browser,
  81 + b_version,
  82 + version,
  83 + trim_Version;
56 84
57 //初始化截行插件 85 //初始化截行插件
58 mulLine.init(); 86 mulLine.init();
@@ -165,8 +193,8 @@ exports.init = function() { @@ -165,8 +193,8 @@ exports.init = function() {
165 } 193 }
166 194
167 sideVideoHtml = mustache.render(sideVideoTpl, sideVideoData); 195 sideVideoHtml = mustache.render(sideVideoTpl, sideVideoData);
168 -  
169 $('.detail-side').append($(sideVideoHtml)); 196 $('.detail-side').append($(sideVideoHtml));
  197 +
170 if (navigator.userAgent.indexOf('iPad') !== -1) { 198 if (navigator.userAgent.indexOf('iPad') !== -1) {
171 // 封面视频播放器替换为H5的VIDEO标签 199 // 封面视频播放器替换为H5的VIDEO标签
172 if (!!$('.video-area').find('object').size()) { 200 if (!!$('.video-area').find('object').size()) {
@@ -186,7 +214,7 @@ exports.init = function() { @@ -186,7 +214,7 @@ exports.init = function() {
186 $('.detail-side').append($(sidePostHtml)); 214 $('.detail-side').append($(sidePostHtml));
187 215
188 //边栏related-post根据行数截取字符 216 //边栏related-post根据行数截取字符
189 - relatedPost = relatedPost; 217 + relatedPost = $('.side-related-posts');
190 postList = relatedPost.find("li"); 218 postList = relatedPost.find("li");
191 if (postList.length > 0) { 219 if (postList.length > 0) {
192 totalLineNum = 3; 220 totalLineNum = 3;
@@ -284,73 +312,333 @@ exports.init = function() { @@ -284,73 +312,333 @@ exports.init = function() {
284 attitude = data.attitude, 312 attitude = data.attitude,
285 commentnum = data.commentnum; 313 commentnum = data.commentnum;
286 314
287 - //新品播报  
288 - var relatedPostItem = '';  
289 - for (var i = 0; i < relatedPost.length; i++) {  
290 - if (relatedPost[i].isVideo == true) {  
291 - relatedPostItem = '<li>' +  
292 - '<a href="' + relatedPost[i].link + '" target="_blank" onclick="relatedClickEvent();">' +  
293 - '<div class="pic"><img src="' + relatedPost[i].cover + '" alt="" /><span class="play-icon"></span></div>' +  
294 - '<div class="post-title"><h4>' + relatedPost[i].title + '</h4><p>' + relatedPost[i].subtitle + '</p></div>' +  
295 - '</a>' +  
296 - '</li>';  
297 - } else {  
298 - relatedPostItem = '<li>' +  
299 - '<a href="' + relatedPost[i].link + '" target="_blank">' +  
300 - '<div class="pic"><img src="' + relatedPost[i].cover + '" alt="" /></div>' +  
301 - '<div class="post-title"><h4>' + relatedPost[i].title + '</h4><p>' + relatedPost[i].subtitle + '</p></div>' +  
302 - '</a>' +  
303 - '</li>'; 315 + //底部related-post
  316 + bottomPostTpl = $('#bottom-related-posts').html();
  317 + bottomPostData = {
  318 + relatedPost: {
  319 + postList: data.related
304 } 320 }
305 - $(".postslist").append(relatedPostItem);  
306 -  
307 - //新品播报根据行数截取字符  
308 - var citems = $(".related-posts li");  
309 - var totalLineNum = 3;  
310 - if (citems.length > 0) {  
311 - citems.each(function(index, obj) {  
312 - var self = $(obj);  
313 - var titleLineNum = self.find("h4").getTextLineNumber("title");  
314 - var subTitleLineNum = self.find("p").getTextLineNumber("subtitle");  
315 - if (titleLineNum > 2) {  
316 - self.find("h4").mlellipsis(2);  
317 - titleLineNum = 2;  
318 - }  
319 - if (subTitleLineNum > totalLineNum - titleLineNum) {  
320 - self.find("p").mlellipsis(totalLineNum - titleLineNum, "detail");  
321 - } 321 + }
  322 + bottomPostHtml = mustache.render(bottomPostTpl, bottomPostData);
  323 + $('.detail-body').append($(bottomPostHtml));
322 324
323 - });  
324 - }  
325 - }; 325 + postList = $('.related-posts').find("li");
  326 + postList.eq(5).nextAll().hide();
  327 +
  328 + //底部related-post根据行数截取字符
  329 + if (postList.length > 0) {
  330 + postList.each(function(index, obj) {
  331 + totalLineNum = 3;
  332 + titleLineNum = $(obj).find('h3').getTextLineNumber('title');
  333 + subTitleLineNum = $(obj).find('p').getTextLineNumber('subtitle');
  334 + if (titleLineNum > 2) {
  335 + $(obj).find('h3').mlellipsis(2);
  336 + titleLineNum = 2;
  337 + }
  338 + if (subTitleLineNum > totalLineNum - titleLineNum) {
  339 + $(obj).find('p').mlellipsis(totalLineNum - titleLineNum, 'detail');
  340 + }
  341 + });
  342 + }
326 343
327 //上一篇下一篇 344 //上一篇下一篇
328 - if (prevnext.prev.title) { 345 + if (data.prevnext.prev.title) {
329 $(".news-next-prev .prev").show(); 346 $(".news-next-prev .prev").show();
330 $(".news-next-prev .prev").find("a").attr("href", prevnext.prev.link).attr("title", prevnext.prev.title).attr("onclick", "prevOrNextClickEvent();"); 347 $(".news-next-prev .prev").find("a").attr("href", prevnext.prev.link).attr("title", prevnext.prev.title).attr("onclick", "prevOrNextClickEvent();");
331 } 348 }
332 - if (prevnext.next.title) { 349 + if (data.prevnext.next.title) {
333 $(".news-next-prev .next").show(); 350 $(".news-next-prev .next").show();
334 $(".news-next-prev .next").find("a").attr("href", prevnext.next.link).attr("title", prevnext.next.title).attr("onclick", "prevOrNextClickEvent();"); 351 $(".news-next-prev .next").find("a").attr("href", prevnext.next.link).attr("title", prevnext.next.title).attr("onclick", "prevOrNextClickEvent();");
335 } 352 }
336 353
337 //态度 354 //态度
338 - if (attitude.userWow > 0) { 355 + if (data.attitude.userWow > 0) {
339 $(".stats-btn .wow").addClass("current"); 356 $(".stats-btn .wow").addClass("current");
340 }; 357 };
341 - if (attitude.userWtf > 0) { 358 + if (data.attitude.userWtf > 0) {
342 $(".stats-btn .wtf").addClass("current"); 359 $(".stats-btn .wtf").addClass("current");
343 }; 360 };
344 - if (attitude.userZzz > 0) { 361 + if (data.attitude.userZzz > 0) {
345 $(".stats-btn .zzz").addClass("current"); 362 $(".stats-btn .zzz").addClass("current");
346 }; 363 };
347 - setattitude(attitude.wowCount, attitude.zzzCount, attitude.wtfCount); 364 + setattitude(data.attitude.wowCount, data.attitude.zzzCount, data.attitude.wtfCount);
348 365
349 - if (commentnum > 0) {  
350 - $(".comment-num").text(commentnum); 366 + if (data.commentnum > 0) {
  367 + $(".comment-num").text(data.commentnum);
351 } else { 368 } else {
352 - $(".comment-num").html('<img src="' + YohoConfig.resUrl + '/res/new/boys/images/mobile/comment-mobile.png">'); 369 + $(".comment-num").html('<img src="' + YohoConfig.resUrl + '/assets/images/mobile/comment-mobile.png">');
353 } 370 }
354 } 371 }
355 }); 372 });
356 -}  
  373 +
  374 + //态度设置
  375 + $(".stats-btn").on("click", "li", function() {
  376 + if ($(this).index() == 3) return;
  377 + exType = $(this).index() + 1;
  378 + isCancel = 0;
  379 +
  380 + if ($(this).hasClass("current")) {
  381 + isCancel = 1;
  382 + }
  383 +
  384 + attitudeData = {
  385 + id: ajaxParam.id,
  386 + exType: exType,
  387 + isCancel: isCancel
  388 + };
  389 +
  390 + $.ajax({
  391 + type: 'POST',
  392 + url: YohoConfig.mainUrl + '/channel/detail/setattitude',
  393 + data: attitudeData,
  394 + dataType: 'json',
  395 + success: function(response) {
  396 + $(".stats-btn").find("li").removeClass("current");
  397 +
  398 + if (response.data.userWow > 0) {
  399 + $(".stats-btn .wow").addClass("current");
  400 + };
  401 + if (response.data.userWtf > 0) {
  402 + $(".stats-btn .wtf").addClass("current");
  403 + };
  404 + if (response.data.userZzz > 0) {
  405 + $(".stats-btn .zzz").addClass("current");
  406 + };
  407 + setattitude(response.data.wowCount, response.data.zzzCount, response.data.wtfCount);
  408 + }
  409 + });
  410 + });
  411 +
  412 + /*
  413 + * 态度设置函数
  414 + * @param:三种态度的数值
  415 + */
  416 + function setattitude(wow, zzz, wtf) {
  417 + attitudeDataWowIcon = $(".stats-btn .wow").find("img");
  418 + attitudeWowNum = $(".stats-btn .wow").find("i");
  419 + attitudeDataZzzIcon = $(".stats-btn .zzz").find("img");
  420 + attitudeZzzNum = $(".stats-btn .zzz").find("i");
  421 + attitudeDataWtfIcon = $(".stats-btn .wtf").find("img");
  422 + attitudeWtfNum = $(".stats-btn .wtf").find("i");
  423 + if (wow == 0) {
  424 + attitudeDataWowIcon.show();
  425 + attitudeWowNum.hide();
  426 + } else {
  427 + attitudeWowNum.text(wow).show();
  428 + attitudeDataWowIcon.hide();
  429 + };
  430 +
  431 + if (zzz == 0) {
  432 + attitudeDataZzzIcon.show();
  433 + attitudeZzzNum.hide();
  434 + } else {
  435 + attitudeZzzNum.text(zzz).show();
  436 + attitudeDataZzzIcon.hide();
  437 + };
  438 +
  439 + if (wtf == 0) {
  440 + attitudeDataWtfIcon.show();
  441 + attitudeWtfNum.hide();
  442 + } else {
  443 + attitudeWtfNum.text(wtf).show();
  444 + attitudeDataWtfIcon.hide();
  445 + };
  446 + }
  447 +
  448 + //relatedpost的loadmore事件
  449 + $('.detail-body').on('click.loadMore', '.load-more', function() {
  450 + $(this).fadeOut(500, function() {
  451 + $('.related-posts').find('li').show();
  452 + });
  453 + })
  454 +
  455 + //翻转
  456 + flip.init({
  457 + wrapClass: ".yohoboy-flip",
  458 + operate: "mouse"
  459 + });
  460 +
  461 + //hr分页
  462 + $(".detail-body").contentPaging();
  463 +
  464 + //兼容以前视频视频的大小
  465 + video = $(".text-body").find("embed");
  466 + ieVideo = $(".text-body").find("object");
  467 + ipadVideo = $(".text-body").find("video");
  468 + if ($(window).width() >= 1200) {
  469 + video.css({
  470 + "width": "738px",
  471 + "height": "415px"
  472 + });
  473 + ieVideo.css({
  474 + "width": "738px",
  475 + "height": "415px"
  476 + })
  477 + } else if ($(window).width() <= 768) {
  478 + ipadVideo.css({
  479 + "width": "460px",
  480 + "height": "259px"
  481 + });
  482 + video.css({
  483 + "width": "460px",
  484 + "height": "259px"
  485 + });
  486 + ieVideo.css({
  487 + "width": "460px",
  488 + "height": "259px"
  489 + });
  490 + } else {
  491 + video.css({
  492 + "width": "630px",
  493 + "height": "354px"
  494 + });
  495 + ieVideo.css({
  496 + "width": "630px",
  497 + "height": "354px"
  498 + });
  499 + };
  500 +
  501 + //检测ie版本,ie7/8采用1024分辨率
  502 + browser = navigator.appName;
  503 + b_version = navigator.appVersion;
  504 + version = b_version.split(";");
  505 + if (version.length > 1) {
  506 + var trim_Version = version[1].replace(/[ ]/g, "");
  507 + if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0" || browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
  508 + ieVideo.css({
  509 + "width": "630px",
  510 + "height": "354px"
  511 + })
  512 + }
  513 + }
  514 +
  515 + //ipad横竖屏切换
  516 + $(window).resize(function() {
  517 + clearTimeout(timer);
  518 + var timer = setTimeout(function() {
  519 + $(".detail-slide-piclist").slider('resize');
  520 + }, 0)
  521 + });
  522 + slide.initSlide();
  523 +
  524 + //视频内容右下角浮层小视频同步播放
  525 + exports.videoMiniPlayer = function() {
  526 + var videoPlace = $(".detail-video"),
  527 + videoWrap = $('.video-wrap'),
  528 + video = videoWrap.find("object"),
  529 + videoIpad = videoWrap.find("video"),
  530 + videoHeight,
  531 + videoOffsetHeight,
  532 + headerNavHeight,
  533 + scrollTop,
  534 + smallVideoMarginLeft;
  535 +
  536 + if (video.size() > 0) {
  537 + $(window).on("resize", function() {
  538 + $(".detail-video").css({
  539 + "width": videoIpad.outerWidth(),
  540 + "height": videoIpad.outerHeight()
  541 + })
  542 + }).resize();
  543 + videoWrap.addClass("suspend");
  544 +
  545 + videoHeight = videoWrap.outerHeight();
  546 + videoOffsetHeight = videoWrap.offset().top;
  547 + headerNavHeight = $("#minEnterprise").height();
  548 + scrollTop = videoHeight + videoOffsetHeight - headerNavHeight;
  549 +
  550 +
  551 + $(window).on("scroll", function() {
  552 + if ($(window).scrollTop() > scrollTop && !videoWrap.hasClass("current") && !videoWrap.hasClass("close") && !videoWrap.hasClass("suspend") && !videoWrap.hasClass("stop")) {
  553 + videoWrap.css("opacity", 0);
  554 + videoWrap.addClass("current");
  555 +
  556 + smallVideoMarginLeft = $(".detail-container").width() / 2 - videoWrap.outerWidth();
  557 + videoWrap.css("margin-left", smallVideoMarginLeft);
  558 + videoWrap.animate({
  559 + "opacity": 1
  560 + }, 1000);
  561 + } else if ($(window).scrollTop() < scrollTop) {
  562 + videoWrap.css("opacity", 1);
  563 + videoWrap.removeClass("close").removeClass("current").removeAttr("style");
  564 + }
  565 + });
  566 +
  567 + //小视频关闭按钮
  568 + $(".video-close-btn").on("click", function() {
  569 + videoWrap.animate({
  570 + "opacity": 0
  571 + }, 500, function() {
  572 + videoWrap.addClass("close").removeClass("current");
  573 + });
  574 +
  575 + })
  576 + }
  577 + };
  578 +
  579 +
  580 +}
  581 +
  582 +window.updateState = function() {
  583 + seajs.use("channel/detail", function(detail) {
  584 + detail.updateLogin();
  585 + });
  586 +};
  587 +
  588 +
  589 +window.picLimited = function() {
  590 + seajs.use("jquery/1.8.3/jquery.js", function($) {
  591 + if ($(".text-body") <= 0) return;
  592 + $(".text-body").find("img").css("max-width", "700px");
  593 + });
  594 +};
  595 +
  596 +window.normarlPlayer = function() {
  597 + seajs.use("jquery/1.8.3/jquery.js", function($) {
  598 + $(".video-wrap").removeClass("current");
  599 + });
  600 +};
  601 +
  602 +window.stopPlayer = function() {
  603 + seajs.use('jquery/1.8.3/jquery.js', function($) {
  604 + if ($(".video-wrap").hasClass("current")) {
  605 + $(".video-wrap").animate({
  606 + "opacity": 0
  607 + }, 500, function() {
  608 + $(".video-wrap").addClass("stop").removeClass("current");
  609 + });
  610 + } else {
  611 + $(".video-wrap").addClass("stop").removeClass("current");
  612 + }
  613 + });
  614 +};
  615 +
  616 +window.suspendPlayer = function() {
  617 + seajs.use("jquery/1.8.3/jquery.js", function($) {
  618 + $(".video-wrap").addClass("suspend");
  619 + });
  620 +};
  621 +
  622 +window.startPlayer = function() {
  623 + seajs.use("jquery/1.8.3/jquery.js", function($) {
  624 + $(".video-wrap").removeClass("stop").removeClass("suspend");
  625 + });
  626 +};
  627 +
  628 +//视频不能同时播放
  629 +window.thisMovie = function(movieName) {
  630 + if (navigator.appName.indexOf("Microsoft") != -1) {
  631 + return window[movieName];
  632 + } else {
  633 + return document[movieName];
  634 + }
  635 +};
  636 +
  637 +window.StopAnotherMovie = function(id) {
  638 + seajs.use("jquery/1.8.3/jquery.js", function($) {
  639 + var allVideo = $("body").find("embed");
  640 + allVideo.each(function() {
  641 + window.StopMovie();
  642 + });
  643 + });
  644 +};
@@ -7,8 +7,8 @@ var $ = require("jquery"), @@ -7,8 +7,8 @@ var $ = require("jquery"),
7 validate = require("./validate"), 7 validate = require("./validate"),
8 box = require("./box"), 8 box = require("./box"),
9 tools = require("yoho-tools"), 9 tools = require("yoho-tools"),
10 - tips = require("./tips");  
11 -mustache = require("mustache"); 10 + tips = require("./tips"),
  11 + mustache = require('mustache');
12 require("./login"); 12 require("./login");
13 13
14 (function(global, undefined) { 14 (function(global, undefined) {