picviews/dashboard/forums.html
<!-- DONE (hhdem) 管理员面板管理页面 -->
<%- Loader('/public/stylesheets/dashboard.min.css')
.css('/public/stylesheets/dashboard.less')
.css('/public/libs/select2/css/select2.css')
.css('/public/libs/bootstrap-select2/select2-bootstrap.css')
.css('/public/stylesheets/_avatar_upload.less')
.done(assets, config.site_static_host, config.mini_assets)
%>
<%- include ../navbar.html %>
<div id='dashboard' class="content">
<div class='container-fluid container-limited'>
<div class="admin-dashboard prepend-top-default">
<div class="row">
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-heading">
<h4><%if (parent) {%><%= parent.title%> / <%}%><a href="/admin/forums">板块列表</a></h4>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<th><input type="checkbox"></th>
<th>板块名称</th>
<th>主题数量</th>
<th>类型</th>
<th>排序</th>
<th>创建于</th>
<th width="310" style="text-align: center">操作</th>
</thead>
<%- partial('_abstract_forum_item', {collection:forums, as:'forum'}) %>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-body text-center">
<button class="btn btn-default" data-toggle="modal" data-target="#create_forum_modal">添加板块</button>
<button class="btn btn-default">删除板块</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>板块数据统计</h4></div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Forum modal -->
<div class="modal fade" id="create_forum_modal" role="dialog" aria-hidden="true" aria-labelledby="createForumModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" action="/admin/forums" method="post">
<div class="modal-header">
<h5 class="modal-title">板块信息</h5>
</div>
<div class="modal-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="basicInfoForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
基本信息
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="title" placeholder="板块名称">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="path_name" placeholder="板块路径" onkeyup="changeExamplePathName(this);">
<div class="help-block">Example: /forums/<code class="text-info" id="example_path_name">{path_name}</code></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea id="forum_content" class="form-control" rows="3" name="content" placeholder="板块描述"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<div class="form-horizontal">
<div id="avatar_list">
<img width="54" height="54" id="avatar_url_54" data-baiduimageplus-ignore="1"
class="avatar" border="0" align="default" style="vertical-align: bottom;">
<img width="34" height="34" id="avatar_url_34" data-baiduimageplus-ignore="1"
class="avatar" border="0" align="default" style="vertical-align: bottom;">
<img width="24" height="24" id="avatar_url_24" data-baiduimageplus-ignore="1"
class="avatar" border="0" align="default" style="vertical-align: bottom;">
</div>
<div class='help-block'>
<a id='upload_avatar_btn' data-toggle="modal" data-target="#image_upload" class="btn wbtn"><strong>
上传图标</strong><span></span></a>
</div>
</div>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" name="order" placeholder="排序值" value="0"> 排序值
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="type" value="public" checked="checked"> 公开
</label>
<label class="radio-inline">
<input type="radio" name="type" value="internal"> 内部(注册用户)
</label>
<label class="radio-inline">
<input type="radio" name="type" value="private"> 私有
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="sidebarForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSidebar" aria-expanded="true" aria-controls="collapseSidebar">
侧栏推荐(Markdown)
</a>
</h4>
</div>
<div id="collapseSidebar" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseSidebar">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control" rows="5" name="sidebar_text" placeholder="本版块侧栏推荐内容"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="cssForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
css 样式
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseFour">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control" rows="5" name="css_text" placeholder="本版块 Css 样式"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="jsForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
js 自定制
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseFive">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control" rows="5" name="js_text" placeholder="本版块自定制 JS "></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="managerForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
管理员信息
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseTwo">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<select name="managers" class="form-control js-data-example-ajax " multiple>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="memberForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
成员列表 (只在 type 为 private 的时候起作用)
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseThree">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<select name="members" class="form-control js-data-example-ajax " multiple>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="bannerImageForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
Banner 图片
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseSix">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="bannerTemplateForum">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
模板选择
</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseSeven">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="parentNode">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
父板块
</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseEight">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<select name="parent" class="form-control js-data-forum-ajax ">
</select>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="showTypeNode">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNight" aria-expanded="true" aria-controls="collapseNight">
显示方式
</a>
</h4>
</div>
<div id="collapseNight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseNight">
<div class="panel-body">
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="show_type" value="index"> 首页显示
</label>
<label class="radio-inline">
<input type="radio" name="show_type" value="default" checked="checked"> 默认显示
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id">
<input type="hidden" name="avatar">
<button type="button" id="create-forum-close" class="btn " data-dismiss="modal">Close</button>
<button type="submit" id="create-forum-submit" class="btn btn-default ">保存
</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="image_upload" role="dialog" aria-hidden="true" aria-labelledby="avatarModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">上传新图标</h5>
</div>
<div class="modal-body">
<div id="upload_area" class="upload-area">
<div class="normal">
<a href="#" onclick="return false;" class="upload-btn btn btn18" for="img_input2">
<span class="text"> 选择新图标</span>
</a>
<div style="margin: 10px 0 25px" class="sub">支持单张 2M 以内图片上传</div>
<div style="margin-top: 20px; font-size: 12px; margin-bottom: 10px;" class="sub">
[提示]请严格遵守保密法律法规，严禁在互联网上存储、处理、传输、发布涉密信息
</div>
</div>
<div style="display: none" class="draging">
<div class="note">释放鼠标以上传</div>
</div>
<div style="display: none" class="uploading">
<div class="animate">上传中...</div>
</div>
<div class="dropzone dz-clickable">
<div class="dz-default dz-message"><span>拖动文件到这里上传</span></div>
</div>
</div>
<div id="upload_view" style="display: none">
<div id="message_alert" aria-hidden="true" class="alert alert-warning" style="display: none;" role="alert" onclick="hideSelf(this)">
<strong>提示</strong>
<span class="alert-content"></span>
</div>
<div class="pin-create">
<div class="preview">
<div id="preview" class="image">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="upload-close" class="btn" data-dismiss="modal">Close</button>
<button type="button" id="select-upload-again" class="btn" onclick="selectUploadAgain();">Select Again</button>
<button type="button" id="upload-submit" class="btn" data-loading-text="<i class='fa fa-circle-o-notch fa-spin' style='background: none;margin: 0px;'></i> Uploading">Upload Image</button>
</div>
</div>
</div>
</div>
<%- Loader('/public/javascripts/dashboard/forums.min.js')
.js('/public/libs/select2/js/select2.full.js')
.js('/public/libs/Q.Uploader.image.all.js')
.js('/public/libs/load-image.all.min.js')
.js('/public/javascripts/dashboard/forums.js')
.done(assets, config.site_static_host, config.mini_assets)
%>
<script type="text/javascript">
$(document).ready(function () {
var insertImageBoardAfterCreate = true;
var _csrf = $('meta[name=csrf-token]').attr('content');
var uploader = new Q.Uploader({
url: "/forumupload?type=file&_csrf=" + _csrf,
target: document.getElementById("upload_area"),
view: document.getElementById("preview"),
allows: ".jpg,.png,.gif,.bmp,.jpeg",
auto: false,
multiple: false,
dataType: "json",
data: {title: 'test'},
//图片缩放
// DONE(hhdem) 如果服务器是在win环境下, 打开图片缩放将无法成功上传
// scale: {
// //最大图片大小(width|height)
// maxWidth: 700
// },
UI: {
init: function () {
console.info('UI init method');
},
draw: function (task) {
var self = this,
ops = self.ops,
boxView = ops.view;
if (!boxView) return;
var name = task.name;
var li = '';
loadImage(task.file,
function (img, data) {
img.style.width = '54px';
$('#preview').append(img);
var img2 = cloneCanvas(img);
img2.style.width = '34px';
$('#preview').append(img2);
var img3 = cloneCanvas(img);
img3.style.width = '24px';
$('#preview').append(img3);
},
{orientation: true} // Options
);
//self.previewImage(boxImage, task, ops);
},
update: function (task) {
}
},
on: {
//添加之前触发
add: function (task) {
if (task.disabled) {
return alert("允许上传的文件格式为：" + this.ops.allows)
}
$('#upload_view').show();
$('#upload_area').hide();
},
//图片预览后触发
preview: function (data) {
console.log(data.task.name + " : " + data.src);
},
//图片压缩后触发,如果图片或浏览器不支持压缩,则不触发
scale: function (data) {
console.log(data.task.name + " : 已压缩！");
},
//上传之前触发
upload: function (task) {
//可针对单独的任务配置参数(POST方式)
var boardSelected = $('#image_upload .right-part .boardlist .item.selected');
uploader.data = {
title: $('#preview-desc').val(),
board: boardSelected.data("id")
};
},
//上传完成后触发
complete: function (task) {
if (task.state != Q.Uploader.COMPLETE) {
return console.log(task.name + ": " + Q.Uploader.getStatusText(task.state) + "!")
}
var json = task.json;
if (!json.success) {
$('#message_alert .alert-content').html(json.msg);
$('#message_alert').fadeIn();
return console.error(task.name + ": 服务器未返回正确的数据！", json.msg);
}
console.log(task.name + ": 服务器返回 " + (task.response || ""));
// 把新头像插入页面
var resJson = JSON.parse(task.response);
var item = resJson.data[0];
$("#avatar_list").html($('#preview').children('canvas'));
$("input[name=avatar]").val(item.url);
//this.list 为上传任务列表
//this.index 为当前上传任务索引
if (this.index >= this.list.length - 1) {
//所有任务上传完成
console.log("所有任务上传完成：" + new Date());
$('#image_upload').modal('hide');
$('#upload-submit').button('reset');
}
}
}
});
// 开始上传图片
document.getElementById("upload-submit").onclick = function () {
var $this = $(this);
$this.button('loading');
uploader.start();
};
$('#image_upload').on('hidden.bs.modal', function (e) {
selectUploadAgain();
});
$('#image_upload').on('hide.bs.modal', function (e) {
selectUploadAgain();
});
});
// 刷新板块数量
$(document).on('click', '#refreshForumCount', function (event) {
if (!event.currentTarget) {
return;
}
var id = event.currentTarget.dataset.id;
$.ajax({
type: "POST",
url: "/admin/forums/refresh/count/" + id
}).done(function (result) {
if (!result.success) {
return ;
} else {
$('#forum_count_' + id).html(result.topic_count);
}
});
});
function isInsertImageBoardAfterCreate(isInsert) {
insertImageBoardAfterCreate = isInsert;
}
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0);
//return the new canvas
return newCanvas;
}
function selectUploadAgain() {
$('#upload-submit').button('reset');
$('#upload_area').show();
$('#upload_view').hide();
$('#preview').html('');
}
function hideSelf(obj) {
$(obj).fadeOut();
}
</script>