wispx
565 lines
20 KiB
HTML
565 lines
20 KiB
HTML
{extend name="common:base" /}
|
||
|
||
{block name="title"}图片管理 - {$config.site_name}{/block}
|
||
|
||
{block name="css"}
|
||
<link rel="stylesheet" href="/static/contextjs/css/context.standalone.css">
|
||
<link rel="stylesheet" href="/static/jquery-viewer/1.2.0/css/viewer.css">
|
||
{/block}
|
||
|
||
{block name="main"}
|
||
<div class="mdui-container-fluid">
|
||
<main>
|
||
<div class="images-container">
|
||
<div class="screen-box mdui-m-b-1">
|
||
<div class="mdui-chip">
|
||
<span class="mdui-chip-icon"><i class="mdui-icon material-icons"></i></span>
|
||
<span class="mdui-chip-title">共有 <small class="mdui-text-color-red num">0</small> 张图片</span>
|
||
<span id="reset" class="mdui-chip-delete" mdui-tooltip="{content: '重置数据', position: 'right'}"><i class="mdui-icon material-icons"></i></span>
|
||
</div>
|
||
<div class="mdui-clearfix mdui-m-t-1"></div>
|
||
<form action="" method="post" id="search-form">
|
||
<select class="operation mdui-select" name="state" mdui-select>
|
||
<option value="">选中项</option>
|
||
<option value="move">移动</option>
|
||
<option value="delete">删除</option>
|
||
</select>
|
||
<div class="mdui-btn-group mdui-m-r-1 mdui-float-left">
|
||
<button type="button" id="all" class="mdui-btn mdui-ripple mdui-btn-raised mdui-float-right">全选</button>
|
||
</div>
|
||
<input class="mdui-textfield-input search-input mdui-float-right" type="text" name="keyword" placeholder="回车搜索..." value="" autocomplete="off"/>
|
||
</form>
|
||
<div class="mdui-clearfix"></div>
|
||
<ul class="breadcrumb mdui-m-t-1">
|
||
<li class="active"><a data-id="0">Home</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="mdui-divider mdui-m-b-1"></div>
|
||
<div class="mdui-row">
|
||
<div class="box mdui-row-xs-3 mdui-row-sm-9 mdui-row-md-9 mdui-row-lg-10 mdui-col-xl-12">
|
||
<div class="folders-box"></div>
|
||
<div class="images-box"></div>
|
||
</div>
|
||
</div>
|
||
<button class="mdui-btn mdui-ripple mdui-center mdui-color-grey-300 mdui-text-color-black-secondary mdui-m-t-2 more"></button>
|
||
<!-- Info Dialog -->
|
||
<div class="mdui-dialog" id="info">
|
||
<div class="mdui-dialog-title"></div>
|
||
<div class="mdui-dialog-content">
|
||
<div class="mdui-row">
|
||
<div class="mdui-col-xs-12 mdui-col-sm-3 mdui-col-md-3 mdui-col-lg-3 mdui-col-xl-3">
|
||
<img class="qrcode mdui-center" src="/static/app/images/loading.jpg" width="100%">
|
||
</div>
|
||
<div class="mdui-col-xs-12 mdui-col-sm-9 mdui-col-md-9 mdui-col-lg-9 mdui-col-xl-9">
|
||
<table>
|
||
<tbody>
|
||
<tr class="url">
|
||
<td align="right">链接：</td>
|
||
<td align="left">
|
||
<input class="mdui-textfield-input" type="text" placeholder="图片外链" value=""/>
|
||
</td>
|
||
</tr>
|
||
<tr class="pathname">
|
||
<td align="right">位置：</td>
|
||
<td align="left"></td>
|
||
</tr>
|
||
<tr class="size">
|
||
<td align="right">大小：</td>
|
||
<td align="left"></td>
|
||
</tr>
|
||
<tr class="md5">
|
||
<td align="right">MD5：</td>
|
||
<td align="left"></td>
|
||
</tr>
|
||
<tr class="mime">
|
||
<td align="right">类型：</td>
|
||
<td align="left"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mdui-dialog-actions">
|
||
<div class="mdui-btn-group">
|
||
<a href="" target="_blank" class="open-url mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-dense">打开链接</a>
|
||
<button data-clipboard-action="copy" data-clipboard-text="" class="copy-url mdui-btn mdui-color-teal mdui-ripple mdui-btn-dense">复制链接</button>
|
||
<button data-id="" class="delete-image mdui-btn mdui-color-red mdui-ripple mdui-btn-dense">删除</button>
|
||
<button class="mdui-btn mdui-ripple mdui-color-grey-600 mdui-btn-dense" mdui-dialog-cancel>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Folders Dialog -->
|
||
<div class="mdui-dialog" id="folders">
|
||
<div class="mdui-dialog-content mdui-p-a-0">
|
||
<ul class="breadcrumb">
|
||
<li class="active"><a data-id="0">Home</a></li>
|
||
</ul>
|
||
<ul class="mdui-list">
|
||
<!-- folders -->
|
||
</ul>
|
||
</div>
|
||
<div class="mdui-dialog-actions">
|
||
<button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
|
||
<button class="mdui-btn mdui-ripple" mdui-dialog-confirm>确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<!-- 用于右键复制 -->
|
||
<span id="copy-url" class="none copy-url" data-clipboard-action="copy" data-clipboard-text=""></span>
|
||
{/block}
|
||
|
||
{block name="js"}
|
||
<script src="/static/clipboard.js/2.0.1/clipboard.min.js"></script>
|
||
<script src="/static/contextjs/js/context.js"></script>
|
||
<script src="/static/jquery-viewer/1.2.0/js/viewer.js"></script>
|
||
<script src="/static/jquery-viewer/1.2.0/js/jquery-viewer.js"></script>
|
||
<script>
|
||
$(function () {
|
||
|
||
var params = {},
|
||
viewer,
|
||
foldersBox = $('.folders-box'),
|
||
imagesBox = $('.images-box'),
|
||
totalBox = $('small.num'),
|
||
foldersDialog = new mdui.Dialog('.mdui-dialog#folders', {
|
||
modal: true
|
||
}),
|
||
selectedImagesId = [],
|
||
infoDialog = $(".mdui-dialog#info"),
|
||
qrcodeApi = 'https://api.wispx.cn/qrcode/generate?text=';
|
||
params.page = 1;
|
||
|
||
|
||
// 函数库
|
||
var methods = {
|
||
getData: function (options) {
|
||
params = options || params;
|
||
var more = $(".more");
|
||
more.attr('disabled', true).text('加载中...');
|
||
app.ajax("{:url('user/images')}", params, function (response) {
|
||
if (response.code) {
|
||
var images = response.data.images.data;
|
||
var folders = response.data.folders;
|
||
totalBox.text(response.data.images.total);
|
||
|
||
if (folders.length) {
|
||
for (var f = 0; f < folders.length; f++) {
|
||
foldersBox.append(
|
||
' <div class="mdui-col">' +
|
||
' <div class="item" data-id="' + folders[f].id + '" data-parent-id="' + folders[f].parent_id + '" data-name="' + folders[f].name + '">' +
|
||
' <div class="info">' +
|
||
' <img src="/static/app/images/folder.svg">' +
|
||
' </div>' +
|
||
' <p class="name">' + folders[f].name + '</p>' +
|
||
' </div>' +
|
||
'</div>'
|
||
);
|
||
}
|
||
}
|
||
if (images.length) {
|
||
for (var i = 0; i < images.length; i++) {
|
||
imagesBox.append(
|
||
'<div class="mdui-col">' +
|
||
' <div class="item" data-id="' + images[i].id + '" data-json=\'' + JSON.stringify(images[i]) + '\' title=' + images[i].name + '>' +
|
||
' <i class="choice iconfont icon-choice"></i>' +
|
||
' <i class="info iconfont icon-info"></i>' +
|
||
' <div class="info image">' +
|
||
' <img data-original="' + images[i].url + '" src="' + images[i].url + '">' +
|
||
' </div>' +
|
||
' <p class="name">' + images[i].name + '</p>' +
|
||
' </div>' +
|
||
'</div>');
|
||
}
|
||
|
||
// 图片预览插件
|
||
if (!viewer) {
|
||
viewer = $('.images-box').viewer({
|
||
url: 'data-original',
|
||
zIndex: 999999999
|
||
});
|
||
} else {
|
||
viewer.data('viewer').update();
|
||
}
|
||
|
||
if (response.data.images.current_page == response.data.images.last_page) {
|
||
return more.attr('disabled', true).text('我也是有底线的~');
|
||
}
|
||
params.page++;
|
||
return more.attr('disabled', false).text('加载更多');
|
||
} else {
|
||
more.attr('disabled', true).text('暂无图片');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
resetData: function (options) {
|
||
foldersBox.html('');
|
||
imagesBox.html('');
|
||
methods.getData(options);
|
||
},
|
||
// 删除
|
||
delete: function (id, batch, callback) {
|
||
var msg = '确认删除该图片吗？';
|
||
if (batch) {
|
||
msg = '确认删除选中项图片吗？';
|
||
}
|
||
mdui.confirm(msg, function () {
|
||
app.request("{:url('user/deleteImages')}", {id: id}, function () {
|
||
callback && callback();
|
||
});
|
||
}, function () {
|
||
|
||
}, {confirmText: '确定', cancelText: '取消'});
|
||
},
|
||
getFolders: function (options, openDialog, callback) {
|
||
openDialog = openDialog || false;
|
||
app.ajax("{:url('user/getFolders')}", options, function (response) {
|
||
if (response.code) {
|
||
$('#folders ul.mdui-list').html('');
|
||
var folders = response.data;
|
||
if (folders.length) {
|
||
for (var i = 0; i < folders.length; i++) {
|
||
$('#folders ul.mdui-list').append(
|
||
'<li class="mdui-list-item mdui-ripple" data-id="' + folders[i].id + '" data-parent-id="' + folders[i].parent_id + '">' +
|
||
' <i class="mdui-list-item-avatar mdui-icon material-icons"></i>' +
|
||
' <div class="mdui-list-item-content">' +
|
||
' <div class="mdui-list-item-title">' + folders[i].name + '</div>' +
|
||
' <div class="mdui-list-item-text">' + folders[i].create_time + '</div>' +
|
||
' </div>' +
|
||
'</li>'
|
||
);
|
||
}
|
||
} else {
|
||
$('#folders ul.mdui-list').html('<li class="mdui-text-center mdui-text-color-black-secondary">没有找到文件夹</li>');
|
||
}
|
||
foldersDialog.handleUpdate();
|
||
openDialog && foldersDialog.open();
|
||
callback && callback();
|
||
}
|
||
})
|
||
}
|
||
};
|
||
|
||
methods.getData();
|
||
|
||
// 监听复制操作
|
||
var clipboard = new ClipboardJS('.copy-url');
|
||
clipboard.on('success', function(e) {
|
||
app.msg(true, '复制成功！');
|
||
e.clearSelection();
|
||
});
|
||
|
||
clipboard.on('error', function(e) {
|
||
console.error('Action:', e.action);
|
||
console.error('Trigger:', e.trigger);
|
||
app.msg(false, '复制失败！');
|
||
});
|
||
|
||
// Context Start
|
||
context.init({
|
||
fadeSpeed: 100,
|
||
filter: function ($obj) {},
|
||
above: 'auto',
|
||
preventDoubleContext: true,
|
||
compress: false
|
||
});
|
||
|
||
// 右键操作
|
||
$('.images-container').on('contextmenu', '.box', function(e) {
|
||
var $that = $(e.target), $item = $that.closest('.item');
|
||
if ($that.parents().hasClass('folders-box')) {
|
||
context.attach('.folders-box .item', [
|
||
{header: 'Compressed Menu'},
|
||
{text: '打开', action: function (e) {
|
||
$item.click();
|
||
}
|
||
},
|
||
{text: '重新命名', action: function (e) {
|
||
e.preventDefault();
|
||
mdui.prompt('请输入文件夹名称',
|
||
function (value) {
|
||
app.ajax("{:url('user/renameFolder')}", {
|
||
id: $item.data('id'),
|
||
parent_id: $item.data('parent-id'),
|
||
name: value
|
||
}, function (response) {
|
||
if (response.code) {
|
||
$item.attr('data-name', value).find('p.name').text(value);
|
||
return app.msg(true, response.msg);
|
||
}
|
||
mdui.alert(response.msg);
|
||
})
|
||
}
|
||
);
|
||
}
|
||
},
|
||
{divider: true},
|
||
{text: '删除', action: function (e) {
|
||
e.preventDefault();
|
||
mdui.confirm('确认删除该文件夹吗？', function() {
|
||
app.ajax("{:url('user/deleteFolder')}", {id: $item.data('id')}, function (response) {
|
||
if (response.code) {
|
||
$item.parent().remove();
|
||
return app.msg(true, response.msg);
|
||
}
|
||
mdui.alert(response.msg);
|
||
})
|
||
});
|
||
}
|
||
},
|
||
]);
|
||
} else if ($that.parents().hasClass('images-box')) {
|
||
var $item = $that.closest('.item'), data = $item.data('json');
|
||
context.attach('.images-box .item', [
|
||
{header: 'Compressed Menu'},
|
||
{text: '查看图片', action: function (e) {
|
||
e.preventDefault();
|
||
$item.find('img').click();
|
||
}
|
||
},
|
||
{text: '新窗口打开图片', href: data.url, target: '_blank'},
|
||
{divider: true},
|
||
{text: '复制链接', action: function (e) {
|
||
e.preventDefault();
|
||
$('#copy-url').attr('data-clipboard-text', data.url).click();
|
||
}
|
||
},
|
||
{
|
||
text: '删除', action: function (e) {
|
||
e.preventDefault();
|
||
methods.delete(data.id, false, function () {
|
||
$item.parent().remove();
|
||
totalBox.text(parseInt(totalBox.text()) - 1);
|
||
})
|
||
}
|
||
},
|
||
{
|
||
text: '属性', action: function (e) {
|
||
e.preventDefault();
|
||
$item.find('i.info').click();
|
||
}
|
||
}
|
||
]);
|
||
} else {
|
||
context.attach('.box', [
|
||
{header: 'Compressed Menu'},
|
||
{text: '新建文件夹', action: function (e) {
|
||
e.preventDefault();
|
||
mdui.prompt('请输入文件夹名称',
|
||
function (value) {
|
||
app.ajax("{:url('user/createFolder')}", {
|
||
parent_id: $('ul.breadcrumb li.active:last-child a').data('id'),
|
||
name: value
|
||
}, function (response) {
|
||
if (response.code) {
|
||
methods.resetData();
|
||
return app.msg(true, response.msg);
|
||
}
|
||
mdui.alert(response.msg);
|
||
})
|
||
}
|
||
);
|
||
}
|
||
},
|
||
{divider: true},
|
||
{text: '刷新', action: function (e) {
|
||
// e.preventDefault();
|
||
methods.resetData();
|
||
}
|
||
},
|
||
]);
|
||
}
|
||
});
|
||
|
||
// Context End
|
||
|
||
// 文件夹点击操作
|
||
$('.folders-box').on('click', '.mdui-col', function (e) {
|
||
var $that = $(e.target), $item = $that.closest('.item');
|
||
$('.screen-box ul.breadcrumb li:last-child').removeClass('active');
|
||
$('.screen-box ul.breadcrumb').append(
|
||
'<li class="active">' +
|
||
' <a data-id="' + $item.data('id') + '">' + $item.data('name') + '</a>' +
|
||
'</li>'
|
||
);
|
||
methods.resetData({
|
||
page: 1,
|
||
folderId: $item.data('id')
|
||
});
|
||
});
|
||
|
||
// 面包屑导航点击
|
||
$('.screen-box ul.breadcrumb').on('click', 'li:not(.active) a', function (e) {
|
||
e.preventDefault();
|
||
methods.resetData({
|
||
page: 1,
|
||
folderId: $(this).data('id')
|
||
});
|
||
$(this).parent('li').addClass('active').nextAll().remove();
|
||
});
|
||
|
||
// 模态框面包屑导航点击
|
||
$('.mdui-dialog ul.breadcrumb').on('click', 'li:not(.active) a', function (e) {
|
||
e.preventDefault();
|
||
methods.getFolders({
|
||
id: $(this).data('id')
|
||
});
|
||
$(this).parent('li').addClass('active').nextAll().remove();
|
||
});
|
||
|
||
// 模态框内文件夹点击操作
|
||
$('#folders').on('click', 'ul.mdui-list li.mdui-list-item', function (e) {
|
||
var that = this;
|
||
methods.getFolders({parentId: $(that).data('id')}, false, function () {
|
||
$('#folders ul.breadcrumb li:last-child').removeClass('active');
|
||
$('#folders ul.breadcrumb').append(
|
||
'<li class="active">' +
|
||
' <a data-id="' + $(that).data('id') + '">' + $(that).find('.mdui-list-item-title').text() + '</a>' +
|
||
'</li>'
|
||
);
|
||
});
|
||
});
|
||
|
||
// 确认移动文件夹事件
|
||
mdui.JQ('#folders').on('confirm.mdui.dialog', function (e) {
|
||
app.ajax("{:url('user/moveImages')}", {
|
||
ids: selectedImagesId,
|
||
folderId: $('#folders ul.breadcrumb li:last-child a').data('id')
|
||
}, function (response) {
|
||
if (response.code) {
|
||
methods.resetData();
|
||
return app.msg(true, response.msg);
|
||
}
|
||
mdui.alert(response.msg);
|
||
})
|
||
});
|
||
|
||
// 加载更多
|
||
$('.more').click(function () {
|
||
methods.getData();
|
||
});
|
||
|
||
// 筛选
|
||
$('.screen-box form').submit(function (e) {
|
||
e.preventDefault();
|
||
// 清空内容
|
||
imagesBox.html('');
|
||
params.keyword = $(this).find("input[name='keyword']").val();
|
||
methods.getData();
|
||
});
|
||
|
||
// 选中项操作
|
||
$('.screen-box .mdui-select.operation').on('close.mdui.select', function () {
|
||
if ($(this).val() !== '') {
|
||
var selected = $('.images-box .item.choice');
|
||
selectedImagesId = [];
|
||
if (selected.length) {
|
||
selected.each(function (index, value) {
|
||
selectedImagesId.push($(value).data('id'));
|
||
});
|
||
|
||
// 删除
|
||
if ('delete' === $(this).val()) {
|
||
methods.delete(selectedImagesId, true, function () {
|
||
selected.remove();
|
||
totalBox.text(parseInt(totalBox.text()) - selected.length);
|
||
// methods.getData();
|
||
});
|
||
}
|
||
|
||
// 移动
|
||
if ('move' === $(this).val()) {
|
||
methods.getFolders({parentId: $('#folders ul.breadcrumb li:last-child a').data('id')}, true);
|
||
}
|
||
|
||
} else {
|
||
app.msg(false, '至少选择一项数据！')
|
||
}
|
||
}
|
||
});
|
||
|
||
// 全选
|
||
var all = false;
|
||
$('#all').click(function () {
|
||
var item = $('.images-box .item');
|
||
if (0 === item.length) {
|
||
return mdui.snackbar({
|
||
position: 'right-top',
|
||
message: '暂无数据！'
|
||
});
|
||
}
|
||
if (all) {
|
||
item.removeClass('choice');
|
||
$(this).text('全选');
|
||
all = false;
|
||
} else {
|
||
item.removeClass('choice').addClass('choice');
|
||
$(this).text('取消全选');
|
||
all = true;
|
||
}
|
||
});
|
||
|
||
// 单选
|
||
imagesBox.on('click', '.item i.choice', function () {
|
||
$(this).parent('.item').toggleClass('choice');
|
||
});
|
||
|
||
// 图片信息
|
||
var info = new mdui.Dialog('#info');
|
||
imagesBox.on('click', '.item i.info', function () {
|
||
var data = $(this).parent('.item').data('json');
|
||
if (data) {
|
||
// 标题
|
||
infoDialog.find('.mdui-dialog-title').text(data.name);
|
||
// 二维码
|
||
infoDialog.find('img.qrcode').attr('src', qrcodeApi + data.url);
|
||
// 信息
|
||
for (x in data) {
|
||
var tr = infoDialog.find('tr.' + x);
|
||
if (tr.length) {
|
||
var value = data[x];
|
||
if (x === 'size') {
|
||
value = app.bytesToSize(data[x]);
|
||
}
|
||
if (tr.find('td:last-child input').length) {
|
||
tr.find('td:last-child input').val(value);
|
||
} else {
|
||
tr.find('td:last-child').text(value);
|
||
}
|
||
}
|
||
}
|
||
// 按钮
|
||
infoDialog.find('.open-url').attr('href', data.url);
|
||
infoDialog.find('.copy-url').attr('data-clipboard-text', data.url);
|
||
infoDialog.find('.delete-image').attr('data-id', data.id);
|
||
info.open();
|
||
} else {
|
||
app.msg(false, '数据异常！');
|
||
}
|
||
});
|
||
|
||
// 删除单张图片
|
||
infoDialog.find('.delete-image').click(function () {
|
||
var id = $(this).data('id');
|
||
if (id) {
|
||
info.close();
|
||
methods.delete(id, false, function () {
|
||
imagesBox.find(".item[data-id='" + id + "']").parent().remove();
|
||
totalBox.text(parseInt(totalBox.text()) - 1);
|
||
});
|
||
} else {
|
||
app.msg(false, '数据异常！');
|
||
}
|
||
});
|
||
|
||
// 重置数据
|
||
$('#reset').click(function () {
|
||
methods.resetData();
|
||
});
|
||
})
|
||
</script>
|
||
{/block}
|