/**
* MIT License
*
* Copyright (c) 2018 yadong.zhang
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*
* 评论插件
*
* @date 2018-01-05 10:57
* @author zhyd(yadong.zhang0415#gmail.com)
* @link https://github.com/zhangyd-c
*
*
* 'code', // 插入代码
* 'head', // 标题
* 'bold', // 粗体
* 'italic', // 斜体
* 'underline', // 下划线
* 'strikeThrough', // 删除线
* 'foreColor', // 文字颜色
* 'backColor', // 背景颜色
* 'image', // 插入图片
* 'link', // 插入链接
* 'list', // 列表
* 'justify', // 对齐方式
* 'quote', // 引用
* 'emoticon', // 表情
* 'table', // 表格
* 'video', // 插入视频
* 'undo', // 撤销
* 'redo' // 重复
*
*/
$.extend({
comment: {
detailKey: 'comment-detail',
menus: ['code', 'bold', 'italic', 'underline', 'image', 'link', 'list', 'quote', 'emoticon'],
sid: 0,
_commentDetailModal: '',
_detailForm: '',
_detailFormBtn: '',
_closeBtn: '',
_commentPid: '',
_commentPlace: '',
_commentPost: '',
_cancelReply: '',
_commentReply: '',
initDom: function () {
$.comment._commentDetailModal = $('#comment-detail-modal');
$.comment._detailForm = $('#detail-form');
$.comment._detailFormBtn = $('#detail-form-btn');
$.comment._closeBtn = $('#comment-detail-modal .close');
$.comment._commentPid = $('#comment-pid');
$.comment._commentPlace = $('#comment-place');
$.comment._commentPost = $('#comment-post');
$.comment._cancelReply = $('#cancel-reply');
$.comment._commentReply = $('.comment-reply');
},
init: function (options) {
var $box = $('#comment-box');
if (!$box || !$box[0]) {
return;
}
var op = $.extend({
menus: $.comment.menus,
customMenu: true
}, options);
var detailInfoJson = $.tool.parseFormSerialize(localStorage.getItem(this.detailKey));
var currentUser = '';
if(detailInfoJson){
currentUser = ' - 欢迎回来,' + filterXSS(detailInfoJson.nickname) + '';
}
var commentBox = '
';
$box.html(commentBox);
// 初始化并缓存常用的dom元素
$.comment.initDom();
// 创建编辑框
$.comment.createEdit(op);
$.comment.loadCommentList($box);
$.comment.initValidatorPlugin();
},
createEdit: function (options) {
var $selector = '#editor';
var E = window.wangEditor;
var editor = new E($selector);
if(options.customMenu){
editor.customConfig.menus = options.menus;
}
// debug模式下,有 JS 错误会以throw Error方式提示出来
editor.customConfig.debug = false;
// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = false;
// 插入网络图片的回调
editor.customConfig.linkImgCallback = function (url) {
// console.log(url) // url 即插入图片的地址
};
editor.customConfig.zIndex = 100;
var $content = $('#comment_content');
editor.customConfig.onchange = function (html) {
// 让编辑器始终处于最底部
// var $dom = document.getElementsByClassName("w-e-text")[0];
// $dom.scrollTop = $dom.scrollHeight;
// 监控变化,同步更新到 textarea
$content.val(filterXSS(html));
};
editor.create();
$content.val(editor.txt.html());
E.fullscreen.init($selector);
},
loadCommentList: function (box, pageNumber) {
var sid = box.attr("data-id");
// 该属性为了静态页面中防止请求服务器特加的属性,实际可能不用。
var autoLoad = box.attr("data-auto-load");
if(autoLoad && autoLoad == "false"){
return false;
}
if(!sid){
throw "未指定sid!";
}
this.sid = sid;
$.ajax({
type: "post",
url: "/api/comments",
data: {sid: sid, pageNumber: pageNumber || 1},
success: function (json) {
$.tool.ajaxSuccess(json);
// 加载 评论列表 start
var commentList = json.data.commentList;
var commentListBox = '';
if(!commentList){
commentListBox = '';
$(commentListBox).appendTo(box);
}else{
// 首次加载-刷新页面后第一次加载,此时没有点击加载更多进行分页
if(!pageNumber) {
commentListBox = '';
$(commentListBox).appendTo(box);
}else{
// 点击加载更多时,列表追加到ul中
$(commentListBox).appendTo($(".comment"));
}
// 加载更多按钮
$(".load-more").click(function () {
$(this).parents('li').hide();
$.comment.loadCommentList(box, json.data.nextPage)
});
}
},
error: $.tool.ajaxError
});
},
initValidatorPlugin: function () {
$.comment._detailForm.bootstrapValidator({
message: "输入值无效",
feedbackIcons: {
valid: "fa fa-check",
invalid: "fa fa-remove",
validating: "fa fa-refresh"
},
fields: {
nickname: {
validators: {
notEmpty: {
message: "昵称必填"
}
}
},
url: {
validators: {
uri: {
message: "URL地址不正确"
}
}
},
email: {
validators: {
emailAddress: {
message: "邮箱地址不正确"
}
}
}
}
});
},
submit: function (target) {
var $this = $(target);
$this.button('loading');
var detail = localStorage.getItem(this.detailKey);
var data = $("#comment-form").serialize();
if(!detail){
}else{
var detailInfoJson = $.tool.parseFormSerialize(detail);
$.comment._detailForm.find("input").each(function () {
var $this = $(this);
var inputName = $this.attr("name");
if(detailInfoJson[inputName]){
$this.val(detailInfoJson[inputName]);
}
});
var $img = $.comment._detailForm.find('img');
$img.attr('src', detailInfoJson.avatar);
$img.removeClass('hide');
}
this._commentDetailModal.modal('show');
this._closeBtn.unbind('click');
this._closeBtn.click(function () {
setTimeout(function () {
$this.html("取消操作...");
setTimeout(function () {
$this.button('reset');
}, 1000);
}, 500);
});
// 模态框抖动
this._commentDetailModal.find('.modal-content').addClass("shake");
$.comment._detailForm.find("input[name=qq]").unbind('change');
$.comment._detailForm.find("input[name=qq]").change(function () {
var $this = $(this);
var qq = $this.val();
var $nextImg = $this.next('img');
if(qq){
$.ajax({
type: "post",
url: "/api/qq/" + qq,
success: function (json) {
$.tool.ajaxSuccess(json);
var data = json.data;
$.comment._detailForm.find("input").each(function () {
var $this = $(this);
var inputName = $this.attr("name");
if(data[inputName]){
$this.val(data[inputName]);
}
});
$nextImg.attr('src', data.avatar);
$nextImg.removeClass('hide');
},
error: $.tool.ajaxError
});
}else{
$nextImg.addClass('hide');
}
});
// 提交评论
this._detailFormBtn.unbind('click');
this._detailFormBtn.click(function () {
$.comment._detailForm.bootstrapValidator("validate");
if (_form.valid($.comment._detailForm)) {
data = data + "&" + $.comment._detailForm.serialize();
localStorage.setItem($.comment.detailKey, $.comment._detailForm.serialize());
submitForm(data);
}
});
function submitForm(data) {
$.ajax({
type: "post",
url: "/api/comment",
data: data + '&sid=' + $.comment.sid,
success: function (json) {
$.tool.ajaxSuccess(json);
$.comment._commentDetailModal.modal('hide');
setTimeout(function () {
$this.html("" + json.message);
setTimeout(function () {
$this.button('reset');
window.location.reload();
}, 3000);
}, 1000);
},
error: function (data) {
$.tool.ajaxError();
$this.button('reset');
}
});
}
},
reply: function (pid, target) {
this._commentPid.val(pid);
this._cancelReply.show();
this._commentPost.find('h5 i').addClass("shake");
$(target).hide();
$(target).parents('.comment-body').append(this._commentPost);
},
cancelReply: function (target) {
this._commentPid.val("");
this._cancelReply.hide();
$(target).parents(".comment-body").find('.comment-reply').show();
this._commentPost.find('h5 i').addClass("shake");
this._commentPlace.append(this._commentPost);
},
/* 赞 */
praise: function (pid, target) {
$.bubble.unbind();
$.ajax({
type: "post",
url: "/api/doSupport/" + pid,
success: function (json) {
$.tool.ajaxSuccess(json);
if(json.status == 200){
$(target).effectBubble({y:-80, className:'thumb-bubble', fontSize: 1, content: '+1'});
var oldCount = $(target).find('span.count').text();
$(target).find('span.count').text(parseInt(oldCount) + 1);
}
$.bubble.init();
},
error: function () {
$.tool.ajaxError();
$.bubble.init();
}
});
},
/* 踩 */
step: function (pid, target) {
$.bubble.unbind();
$.ajax({
type: "post",
url: "/api/doOppose/" + pid,
success: function (json) {
$.tool.ajaxSuccess(json);
if(json.status == 200){
$(target).effectBubble({y:-80, className:'thumb-bubble', fontSize: 1, content: '+1'});
var oldCount = $(target).find('span.count').text();
$(target).find('span.count').text(parseInt(oldCount) + 1);
}
$.bubble.init();
},
error: function () {
$.tool.ajaxError();
$.bubble.init();
}
});
},
/* 举报 */
report: function (pid, target) {
}
}
});
$(function () {
$.comment.init({customMenu: true});
$("#comment-form-btn").click(function () {
$.comment.submit($(this));
});
window.wangEditor.fullscreen = {
init: function (editorSelector) {
$(editorSelector + " .w-e-toolbar").append('')
}, toggleFullscreen: function (editorSelector) {
$(editorSelector).toggleClass('fullscreen-editor');
var $a = $(editorSelector + ' ._wangEditor_btn_fullscreen');
var $i = $a.find("i:first-child");
if ($i.hasClass("fa-expand")) {
$a.attr("data-original-title", "退出全屏");
$i.removeClass("fa-expand").addClass("fa-compress")
} else {
$a.attr("data-original-title", "全屏编辑");
$i.removeClass("fa-compress").addClass("fa-expand")
}
}
};
});
发表评论' + currentUser + '
' + '