|
|
|
/*
|
|
|
|
评论及登录插件
|
|
|
|
author:liuyue
|
|
|
|
date:2015-01-07
|
|
|
|
*/
|
|
|
|
var $=require("jquery");
|
|
|
|
var validate = require("./validate");
|
|
|
|
var box = require("./box");
|
|
|
|
var tools = require("yoho-tools");
|
|
|
|
var tips=require("./tips");
|
|
|
|
require("./login");
|
|
|
|
|
|
|
|
(function(global, undefined) {
|
|
|
|
|
|
|
|
var Comment = function(element, options) {
|
|
|
|
this.options = options;
|
|
|
|
this.$element = $(element);
|
|
|
|
//this.$loginBox = $(this.options.loginbox).appendTo("body");
|
|
|
|
this.init();
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
Comment.DEFAULTS = {
|
|
|
|
cid:'',
|
|
|
|
commentPageUrl:'/writer/default/comment',
|
|
|
|
publishUrl:'/writer/default/publish',
|
|
|
|
deleteUrl:'/writer/default/delete',
|
|
|
|
commentNum:$(".comment-num"),
|
|
|
|
isFeedback:false,
|
|
|
|
isEdit:false,
|
|
|
|
isMobile:false,
|
|
|
|
login:''
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
Comment.prototype = {
|
|
|
|
constructor: Comment,
|
|
|
|
|
|
|
|
init:function(){
|
|
|
|
if($(".comments-list").size()>0 || $(".comment-textarea").size()>0) return;
|
|
|
|
// 组件的创建主函数。
|
|
|
|
this._creat();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 主函数，主要是创建节点，绑定事件。
|
|
|
|
_creat: function(){
|
|
|
|
// 创建节点
|
|
|
|
this._creatCommentDom();
|
|
|
|
this._creatTextareaDom();
|
|
|
|
|
|
|
|
if(this.options.isFeedback){
|
|
|
|
this._creatFeedbackLogin();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 绑定事件
|
|
|
|
this._bindEvent();
|
|
|
|
},
|
|
|
|
|
|
|
|
_creatCommentDom:function(){
|
|
|
|
var that = this;
|
|
|
|
var id = {id:this.options.cid};
|
|
|
|
$.ajax({
|
|
|
|
type:'GET',
|
|
|
|
url:YohoConfig.mainUrl+this.options.commentPageUrl,
|
|
|
|
data: id,
|
|
|
|
dataType:'json',
|
|
|
|
success:function(response)
|
|
|
|
{
|
|
|
|
var data = response.data;
|
|
|
|
|
|
|
|
var commentsList = $('<ul class="comments-list"></ul>'),
|
|
|
|
commentsItem = '';
|
|
|
|
commentsList.prependTo(that.$element);
|
|
|
|
|
|
|
|
if(data.length == 0) return;
|
|
|
|
var total = data.total,
|
|
|
|
viewMoreNum = total-5;
|
|
|
|
viewMore = $('<div class="view-more"><a href="javascript:;">View <span>'+viewMoreNum+'</span> more</a></div>'),
|
|
|
|
commentArr = data.comment,
|
|
|
|
commentLen = commentArr.length;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < commentLen; i++){
|
|
|
|
if(commentArr[i].isSelf == true){
|
|
|
|
commentsItem = $('<li class="clearfix">\n\
|
|
|
|
<div class="userimg">\n\
|
|
|
|
<img src="'+commentArr[i].userimg+'" alt="">\n\
|
|
|
|
<i class="'+commentArr[i].partnerType+'"></i>\n\
|
|
|
|
</div>\n\
|
|
|
|
<div class="userinfo">\n\
|
|
|
|
<h6>'+commentArr[i].username+'</h6>\n\
|
|
|
|
<p class="comment-text">'+commentArr[i].content+'</p>\n\
|
|
|
|
<a class="delete-comment" href="javascript:;" pid="'+commentArr[i].id+'"></a>\n\
|
|
|
|
</div>\n\
|
|
|
|
</li>');
|
|
|
|
}else{
|
|
|
|
commentsItem = $('<li class="clearfix">\n\
|
|
|
|
<div class="userimg">\n\
|
|
|
|
<img src="'+commentArr[i].userimg+'" alt="">\n\
|
|
|
|
<i class="'+commentArr[i].partnerType+'"></i>\n\
|
|
|
|
</div>\n\
|
|
|
|
<div class="userinfo">\n\
|
|
|
|
<h6>'+commentArr[i].username+'</h6>\n\
|
|
|
|
<p class="comment-text">'+commentArr[i].content+'</p>\n\
|
|
|
|
</div>\n\
|
|
|
|
</li>');
|
|
|
|
}
|
|
|
|
commentsList.append(commentsItem);
|
|
|
|
}
|
|
|
|
|
|
|
|
if(commentLen>5){
|
|
|
|
var string = viewMoreNum+'';
|
|
|
|
var num =string.slice(0,1);
|
|
|
|
commentsList.find("li").eq(4).nextAll().hide();
|
|
|
|
commentsList.after(viewMore);
|
|
|
|
if(string.length == 4){
|
|
|
|
$(".view-more").find("span").text(num+'k+');
|
|
|
|
}else if(string.length == 5){
|
|
|
|
$(".view-more").find("span").text(num+'w+');
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
if(data.page){
|
|
|
|
var commentPage = data.page;
|
|
|
|
var pageWrap = $('<div style="display:none" class="pager-content comment-pager-content"></div>');
|
|
|
|
var pageIcon = $('<div class="channel-index-pager">'+commentPage+'</div>')
|
|
|
|
commentsList.after(pageWrap);
|
|
|
|
pageIcon.appendTo(pageWrap);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//创建评论文本域
|
|
|
|
_creatTextareaDom:function(){
|
|
|
|
data = this.options.login;
|
|
|
|
var textarea = $('<div class="comment-textarea"><textarea placeholder="'+tips.getTips("textareaPlaceholder")+'" cid='+this.options.cid+'></textarea></div>'),
|
|
|
|
loginarea = $('<div class="login-status clearfix">\n\
|
|
|
|
<div class="userimg">\n\
|
|
|
|
<img src="'+YohoConfig.resUrl+'/res/new/boys/images/detail/user-img.png" alt="">\n\
|
|
|
|
<i></i>\n\
|
|
|
|
</div>\n\
|
|
|
|
<div class="userinfo">\n\
|
|
|
|
<span></span>\n\
|
|
|
|
<a class="exit-btn" href="javascript:;">退出</a>\n\
|
|
|
|
</div>\n\
|
|
|
|
<div class="publish">\n\
|
|
|
|
<a class="publish-btn" href="javascript:;">Publish</a>\n\
|
|
|
|
</div>\n\
|
|
|
|
</div>');
|
|
|
|
textarea.appendTo(this.$element);
|
|
|
|
loginarea.appendTo(textarea);
|
|
|
|
if(this.options.isFeedback){
|
|
|
|
var anonymous = $('<div class="anonymous">YohoBoy</div>');
|
|
|
|
$(".login-status .userimg").after(anonymous);
|
|
|
|
}
|
|
|
|
if(!data){
|
|
|
|
$(".login-status .userinfo").hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
_creatFeedbackLogin:function(){
|
|
|
|
var $feedbackLogin = '';
|
|
|
|
if(tips.isJian){
|
|
|
|
$feedbackLogin = $('<div class="feedback-login clearfix">\n\
|
|
|
|
<span>'+tips.getTips("thirdLoginFeedback")+'</span>\n\
|
|
|
|
<a class="qq" ref="/passport/partner/index/oauth/qq" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-qq.png" alt="" /></a>\n\
|
|
|
|
<a class="yoho" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-yoho.png" alt="" /></a>\n\
|
|
|
|
<a class="sina" ref="/passport/partner/index/oauth/sina" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-sina.png" alt="" /></a>\n\
|
|
|
|
</div>');
|
|
|
|
}else{
|
|
|
|
$feedbackLogin = $('<div class="feedback-login clearfix">\n\
|
|
|
|
<span>'+tips.getTips("thirdLoginFeedback")+'</span>\n\
|
|
|
|
<a class="fb" ref="/passport/partner/index/oauth/facebook" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-facebook.png" alt="" /></a>\n\
|
|
|
|
<a class="yoho" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-yoho.png" alt="" /></a>\n\
|
|
|
|
<a class="sina" ref="/passport/partner/index/oauth/sina" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-sina.png" alt="" /></a>\n\
|
|
|
|
<a class="qq" ref="/passport/partner/index/oauth/qq" href="javascript:;"><img src="'+YohoConfig.resUrl+'/res/new/boys/images/about/thirdbtn-qq.png" alt="" /></a>\n\
|
|
|
|
</div>');
|
|
|
|
}
|
|
|
|
$feedbackLogin.appendTo(this.$element);
|
|
|
|
},
|
|
|
|
|
|
|
|
//事件绑定
|
|
|
|
_bindEvent: function(){
|
|
|
|
var that = this;
|
|
|
|
//查看更多评论
|
|
|
|
this.$element.on("click.comment",".view-more",function(){
|
|
|
|
that.$element.find("li").show(); //显示第一页后五条
|
|
|
|
that.$element.find(".pager-content").show(); //显示分页按钮
|
|
|
|
that.$element.find(".view-more").remove(); //移除view more
|
|
|
|
});
|
|
|
|
|
|
|
|
//弹出登录框
|
|
|
|
$(this).login();
|
|
|
|
this.$element.on("click.login",".publish-btn",function(){
|
|
|
|
if(that.options.isFeedback) return;
|
|
|
|
$(this).login("loginBoxAnimate");
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//发表评论
|
|
|
|
this.$element.on("click.publish",".publish-btn",function(){
|
|
|
|
if($(".login-status").hasClass("login-success") || that.options.isFeedback){
|
|
|
|
//if($(".comment-textarea textarea").val() == '') return;
|
|
|
|
var $textarea = that.$element.find("textarea");
|
|
|
|
var comment = $textarea.val();
|
|
|
|
|
|
|
|
if (!!!comment || $.trim(comment) === '')
|
|
|
|
{
|
|
|
|
var valEmpty = tips.getTips("commentEmpty");
|
|
|
|
|
|
|
|
if(that.options.isFeedback){
|
|
|
|
valEmpty = tips.getTips("feedbackEmpty");
|
|
|
|
}else if(that.options.isEdit){
|
|
|
|
valEmpty = tips.getTips("editEmpty");
|
|
|
|
}
|
|
|
|
|
|
|
|
box.alert(valEmpty, 5,function(){
|
|
|
|
$textarea.focus();
|
|
|
|
});
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (comment.length > 100)
|
|
|
|
{
|
|
|
|
box.alert(tips.getTips("commentToMuch"), 5);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
var cid = $textarea.attr('cid');
|
|
|
|
if (!cid)
|
|
|
|
{
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
/*
|
|
|
|
var sync = [];
|
|
|
|
if ($('.sync').length > 0)
|
|
|
|
{
|
|
|
|
$('.sync:checked').each(function()
|
|
|
|
{
|
|
|
|
sync.push($(this).val());
|
|
|
|
});
|
|
|
|
}*/
|
|
|
|
//var title = $(".detail-title h1").text()+" "+$(".detail-title h2").text();
|
|
|
|
var data = {id:cid,comment:comment,sync:'222',title:'111'};
|
|
|
|
$.ajax
|
|
|
|
({
|
|
|
|
type:'POST',
|
|
|
|
url:YohoConfig.mainUrl+that.options.publishUrl,
|
|
|
|
data: data,
|
|
|
|
dataType:'json',
|
|
|
|
success:function(response)
|
|
|
|
{
|
|
|
|
if (response.code == '800000')
|
|
|
|
{
|
|
|
|
box.alert(tips.getTips("relogin"), 5);
|
|
|
|
that.$element.login("setLogout");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (response.status && response.data)
|
|
|
|
{
|
|
|
|
var $target = $(".comments-list");
|
|
|
|
var commentItem = '<li class="clearfix">'+
|
|
|
|
'<div class="userimg">'+
|
|
|
|
'<img src="'+response.data.headpic+'" alt="">'+
|
|
|
|
'<i class="'+response.data.partnerType+'"></i>'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="userinfo">'+
|
|
|
|
'<h6>'+response.data.nick+'</h6>'+
|
|
|
|
'<p class="comment-text">'+response.data.content+'</p>'+
|
|
|
|
'<a class="delete-comment" href="javascript:;" pid="'+response.data.id+'"></a>'+
|
|
|
|
'</div>'+
|
|
|
|
'</li>';
|
|
|
|
if(that.options.isFeedback && $(".login-status .anonymous").css("display") != "none"){
|
|
|
|
commentItem = '<li class="clearfix">'+
|
|
|
|
'<div class="userimg">'+
|
|
|
|
'<img src="'+response.data.headpic+'" alt="">'+
|
|
|
|
'<i class="'+response.data.partnerType+'"></i>'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="userinfo">'+
|
|
|
|
'<h6>'+response.data.nick+'</h6>'+
|
|
|
|
'<p class="comment-text">'+response.data.content+'</p>'+
|
|
|
|
'</div>'+
|
|
|
|
'</li>';
|
|
|
|
}
|
|
|
|
if($target.find("li").size()==0){
|
|
|
|
$target.html(commentItem);
|
|
|
|
}else{
|
|
|
|
$target.find("li").eq(0).before(commentItem);
|
|
|
|
}
|
|
|
|
if(that.options.isFeedback){
|
|
|
|
box.alert(tips.getTips("publishFeedback"), 5);
|
|
|
|
}else if(that.options.isEdit){
|
|
|
|
box.alert(tips.getTips("editPublishSuccess"), 5);
|
|
|
|
}else{
|
|
|
|
box.alert(tips.getTips("publishSuccess"), 5);
|
|
|
|
}
|
|
|
|
$(".comment-textarea textarea").val('');
|
|
|
|
var comments = 1;
|
|
|
|
if(!!parseInt(that.options.commentNum.eq(0).text())){
|
|
|
|
comments = parseInt(that.options.commentNum.eq(0).text())+1;
|
|
|
|
};
|
|
|
|
that.options.commentNum.text(comments);
|
|
|
|
}
|
|
|
|
else if(900000 == response.code){
|
|
|
|
box.alert(tips.getTips("notSameContent"), 5);
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
box.alert(tips.getTips("systemBus"), 5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
//评论翻页
|
|
|
|
this.$element.on("click.commentPage",".pager-item",function(){
|
|
|
|
var url = $(this).attr("href");
|
|
|
|
var $_this = $(this);
|
|
|
|
$.ajax({
|
|
|
|
type:'GET',
|
|
|
|
url:url,
|
|
|
|
success:function(response)
|
|
|
|
{
|
|
|
|
|
|
|
|
var data = response.data;
|
|
|
|
|
|
|
|
var commentArr = data.comment,
|
|
|
|
commentLen = commentArr.length,
|
|
|
|
commentsItem = '',
|
|
|
|
commentPage = data.page;
|
|
|
|
|
|
|
|
var pageIcon = $('<div class="channel-index-pager">'+commentPage+'</div>');
|
|
|
|
$(".comments-list").empty();
|
|
|
|
for (var i = 0; i < commentLen; i++){
|
|
|
|
if(commentArr[i].isSelf == true){
|
|
|
|
commentsItem = $('<li class="clearfix">\n\
|
|
|
|
<div class="userimg">\n\
|
|
|
|
<img src="'+commentArr[i].userimg+'" alt="">\n\
|
|
|
|
<i class="'+commentArr[i].partnerType+'"></i>\n\
|
|
|
|
</div>\n\
|
|
|
|
<div class="userinfo">\n\
|
|
|
|
<h6>'+commentArr[i].username+'</h6>\n\
|
|
|
|
<p class="comment-text">'+commentArr[i].content+'</p>\n\
|
|
|
|
<a class="delete-comment" href="javascript:;" pid="'+commentArr[i].id+'"></a>\n\
|
|
|
|
</div>\n\
|
|
|
|
</li>');
|
|
|
|
}else{
|
|
|
|
commentsItem = $('<li class="clearfix">\n\
|
|
|
|
<div class="userimg">\n\
|
|
|
|
<img src="'+commentArr[i].userimg+'" alt="">\n\
|
|
|
|
<i class="'+commentArr[i].partnerType+'"></i>\n\
|
|
|
|
</div>\n\
|
|
|
|
<div class="userinfo">\n\
|
|
|
|
<h6>'+commentArr[i].username+'</h6>\n\
|
|
|
|
<p class="comment-text">'+commentArr[i].content+'</p>\n\
|
|
|
|
</div>\n\
|
|
|
|
</li>');
|
|
|
|
}
|
|
|
|
$(".comments-list").append(commentsItem);
|
|
|
|
}
|
|
|
|
$(".comment-pager-content").html(pageIcon);
|
|
|
|
|
|
|
|
var commentListTop = $(".comments-list").offset().top - $("#minEnterprise").outerHeight();
|
|
|
|
$(window).scrollTop(commentListTop);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
//显示删除按钮
|
|
|
|
if(this.options.isMobile){
|
|
|
|
this.$element.find(".delete-comment").show();
|
|
|
|
}else{
|
|
|
|
this.$element.on("mouseenter","li",function(){
|
|
|
|
$(this).find(".delete-comment").show();
|
|
|
|
}).on("mouseleave","li",function(){
|
|
|
|
$(this).find(".delete-comment").hide();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//删除评论
|
|
|
|
this.$element.on("click.deleteComment",".delete-comment",function(){
|
|
|
|
var _this = $(this);
|
|
|
|
var id = _this.attr('pid');
|
|
|
|
var deleteTip = tips.getTips("deleteComment");
|
|
|
|
if(that.options.isFeedback){
|
|
|
|
deleteTip = tips.getTips("deleteFeedback");
|
|
|
|
}else if(that.options.isEdit){
|
|
|
|
deleteTip = tips.getTips("deleteEdit");
|
|
|
|
}
|
|
|
|
box.confirm(deleteTip, function()
|
|
|
|
{
|
|
|
|
$.ajax
|
|
|
|
({
|
|
|
|
type:'POST',
|
|
|
|
url:YohoConfig.mainUrl+that.options.deleteUrl,
|
|
|
|
data:'id='+id,
|
|
|
|
dataType:'json',
|
|
|
|
success:function(response)
|
|
|
|
{
|
|
|
|
if (response.status)
|
|
|
|
{
|
|
|
|
_this.parents("li").remove();
|
|
|
|
var comments = parseInt($(".comment-num").eq(0).text())-1;
|
|
|
|
if(comments > 0){
|
|
|
|
that.options.commentNum.text(comments);
|
|
|
|
}else{
|
|
|
|
that.options.commentNum.html('<img src="'+YohoConfig.resUrl+'/res/new/boys/images/mobile/comment-mobile.png">');
|
|
|
|
$(".comment-num.zero").text(0);
|
|
|
|
$(".comment-num.edit-comment").text('留言');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$(".feedback-login").on("click","a",function(){
|
|
|
|
var _this = $(this);
|
|
|
|
if (!_this.attr('ref')) return;
|
|
|
|
window.open(_this.attr('ref'), "","width=760,height=650,top=300,left=300");
|
|
|
|
return false;
|
|
|
|
})
|
|
|
|
$(".feedback-login").on("click","a.yoho",function(){
|
|
|
|
$(this).login("loginBoxAnimate");
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
publishComment:function(){
|
|
|
|
var textareaVal = $(".comment-textarea").find("textarea").val();
|
|
|
|
if (!!!textareaVal || $.trim(textareaVal) === '') return;
|
|
|
|
if(this.options.isFeedback) return;
|
|
|
|
$(".publish-btn").trigger("click.publish");
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function Plugin(option, _relatedTarget) {
|
|
|
|
return this.each(function() {
|
|
|
|
var $this = $(this);
|
|
|
|
var data = $this.data('yoho.Comment');
|
|
|
|
var options = $.extend({}, Comment.DEFAULTS, $this.data(), typeof option == 'object' && option);
|
|
|
|
// 如果没有初始化，则初始化该对象，并且把该对象绑定到此元素的yoho.PicSilder属性下。
|
|
|
|
if (!data) $this.data('yoho.Comment', (data = new Comment(this, options)));
|
|
|
|
|
|
|
|
// 如果传递的options是一个字符串，则表示调用改对象的原型方法。
|
|
|
|
if (typeof option == 'string') data[option](_relatedTarget);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
$.fn.comment = Plugin;
|
|
|
|
$.fn.comment.Constructor = Comment;
|
|
|
|
|
|
|
|
})(this); |
|
|
\ No newline at end of file |
...
|
...
|
|
