686 lines
21 KiB
JavaScript
686 lines
21 KiB
JavaScript
'use strict';
|
|
|
|
$('body').on('click', '.player', function () {
|
|
$('.player-selected').removeClass('player-selected');
|
|
$(this).addClass('player-selected');
|
|
|
|
showPlayerTexturePreview(this.id);
|
|
});
|
|
|
|
$('body').on('click', '#preview-switch', () => {
|
|
TexturePreview.previewType == '3D' ? TexturePreview.show2dPreview() : TexturePreview.show3dPreview();
|
|
});
|
|
|
|
let selectedTextures = [];
|
|
|
|
$('body').on('click', '.item-body', function () {
|
|
$('.item-selected').parent().removeClass('item-selected');
|
|
$(this).parent().addClass('item-selected');
|
|
|
|
const tid = parseInt($(this).parent().attr('tid'));
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "../skinlib/info/" + tid,
|
|
dataType: "json",
|
|
success: (json) => {
|
|
if (json.type == "cape") {
|
|
MSP.changeCape('../textures/' + json.hash);
|
|
selectedTextures['cape'] = tid;
|
|
} else {
|
|
MSP.changeSkin('../textures/' + json.hash);
|
|
selectedTextures['skin'] = tid;
|
|
}
|
|
|
|
if (selectedTextures['skin'] !== undefined && selectedTextures['cape'] !== undefined)
|
|
$('#textures-indicator').text(`${trans('general.skin')} & ${trans('general.cape')}`);
|
|
else if (selectedTextures['skin'] != undefined)
|
|
$('#textures-indicator').text(trans('general.skin'));
|
|
else if (selectedTextures['cape'] != undefined)
|
|
$('#textures-indicator').text(trans('general.cape'));
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
|
|
$('body').on('click', '.category-switch', () => {
|
|
const category = $('a[href="#skin-category"]').parent().hasClass('active') ? 'cape' : 'skin';
|
|
const page = parseInt($('#closet-paginator').attr(`last-${category}-page`));
|
|
const search = $('input[name=q]').val();
|
|
reloadCloset(category, page, search);
|
|
});
|
|
|
|
function renderClosetItemComponent(item) {
|
|
return `
|
|
<div class="item" tid="${item.tid}">
|
|
<div class="item-body">
|
|
<img src="${url('/')}preview/${item.tid}.png">
|
|
</div>
|
|
<div class="item-footer">
|
|
<p class="texture-name">
|
|
<span title="${item.name}">${item.name} <small>(${item.type})</small></span>
|
|
</p>
|
|
|
|
<a href="${url('/')}skinlib/show/${item.tid}" title="${trans('user.viewInSkinlib')}" class="more" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-share"></i></a>
|
|
<span title="${trans('general.more')}" class="more" data-toggle="dropdown" aria-haspopup="true" id="more-button"><i class="fa fa-cog"></i></span>
|
|
|
|
<ul class="dropup dropdown-menu" aria-labelledby="more-button">
|
|
<li><a href="javascript:renameClosetItem(${item.tid}, '${item.name}');">${trans('user.renameItem')}</a></li>
|
|
<li><a href="javascript:removeFromCloset(${item.tid});">${trans('user.removeItem')}</a></li>
|
|
<li><a href="javascript:setAsAvatar(${item.tid});">${trans('user.setAsAvatar')}</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function renderCloset(items, category) {
|
|
const search = $('input[name=q]').val();
|
|
let container = $(`#${category}-category`);
|
|
container.html('');
|
|
if (items.length === 0) {
|
|
$('#closet-paginator').hide();
|
|
if (search === '') {
|
|
container.html(`<div class="empty-msg">
|
|
${trans('user.emptyClosetMsg', { url: url('skinlib?filter=' + category) })}</div>`);
|
|
} else {
|
|
container.html(`<div class="empty-msg">${trans('general.noResult')}</div>`);
|
|
}
|
|
} else {
|
|
$('#closet-paginator').show();
|
|
for (const item of items) {
|
|
container.append(renderClosetItemComponent(item));
|
|
}
|
|
}
|
|
}
|
|
|
|
function reloadCloset(category, page, search) {
|
|
Promise.resolve($.ajax({
|
|
type: 'GET',
|
|
url: url('user/closet-data'),
|
|
dataType: 'json',
|
|
data: {
|
|
category: category,
|
|
page: page,
|
|
q: search
|
|
}
|
|
})).then(result => {
|
|
renderCloset(result.items, result.category);
|
|
let paginator = $('#closet-paginator');
|
|
paginator.attr(`last-${result.category}-page`, page);
|
|
paginator.jqPaginator('option', {
|
|
currentPage: page,
|
|
totalPages: result.total_pages
|
|
});
|
|
}).catch(error => showAjaxError);
|
|
}
|
|
|
|
function showPlayerTexturePreview(pid) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url('user/player/show'),
|
|
dataType: "json",
|
|
data: { "pid": pid },
|
|
success: (json) => {
|
|
|
|
['steve', 'alex', 'cape'].forEach((type) => {
|
|
let tid = json[`tid_${type}`];
|
|
let preview = new TexturePreview(type, tid, json.preference);
|
|
|
|
if (tid) {
|
|
preview.change2dPreview().change3dPreview();
|
|
} else {
|
|
preview.showNotUploaded();
|
|
}
|
|
});
|
|
|
|
if ((json.preference == "default" && !json.tid_steve) || (json.preference == "slim" && !json.tid_alex)) {
|
|
// show default skin
|
|
MSP.changeSkin(defaultSkin);
|
|
}
|
|
|
|
console.log(`Texture previews of player ${json.player_name} rendered.`);
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
}
|
|
|
|
function renameClosetItem(tid, oldName) {
|
|
swal({
|
|
title: trans('user.renameClosetItem'),
|
|
input: 'text',
|
|
inputValue: oldName,
|
|
showCancelButton: true,
|
|
inputValidator: function(value) {
|
|
return new Promise(function(resolve, reject) {
|
|
if (value) {
|
|
resolve();
|
|
} else {
|
|
reject(trans('skinlib.emptyNewTextureName'));
|
|
}
|
|
});
|
|
}
|
|
}).then(function(new_name) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "./closet/rename",
|
|
dataType: "json",
|
|
data: { 'tid': tid, 'new_name': new_name },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
$("[tid="+tid+"]>.item-footer>.texture-name>span").html(new_name);
|
|
toastr.success(json.msg);
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
}
|
|
|
|
function removeFromCloset(tid) {
|
|
swal({
|
|
text: trans('user.removeFromClosetNotice'),
|
|
type: 'warning',
|
|
showCancelButton: true
|
|
}).then(function() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "./closet/remove",
|
|
dataType: "json",
|
|
data: { 'tid' : tid },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
});
|
|
|
|
$('div[tid='+tid+']').remove();
|
|
|
|
['skin', 'cape'].forEach(type => {
|
|
let container = $(`#${type}-category`);
|
|
if ($.trim(container.html()) == '') {
|
|
container.html(`<div class="empty-msg">
|
|
${trans('user.emptyClosetMsg', { url: url('skinlib?filter=' + type) })}</div>`);
|
|
}
|
|
})
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
}
|
|
|
|
function setAsAvatar(tid) {
|
|
swal({
|
|
title: trans('user.setAvatar'),
|
|
text: trans('user.setAvatarNotice'),
|
|
type: 'question',
|
|
showCancelButton: true
|
|
}).then(function() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "./profile/avatar",
|
|
dataType: "json",
|
|
data: { "tid": tid },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
toastr.success(json.msg);
|
|
// refersh avatars
|
|
$('[alt="User Image"]').each(function() {
|
|
$(this).prop('src', $(this).attr('src') + '?' + new Date().getTime());
|
|
})
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$('input[type=radio]').iCheck({
|
|
radioClass: 'iradio_square-blue'
|
|
});
|
|
swal.setDefaults({
|
|
confirmButtonText: trans('general.confirm'),
|
|
cancelButtonText: trans('general.cancel')
|
|
});
|
|
|
|
if (window.location.pathname.includes('/user/closet')) {
|
|
Promise.resolve($.ajax({
|
|
type: 'GET',
|
|
url: url('/user/closet-data'),
|
|
dataType: 'json'
|
|
})).then(result => {
|
|
renderCloset(result.items, result.category);
|
|
$('#closet-paginator').jqPaginator($.extend({}, $.defaultPaginatorConfig, {
|
|
totalPages: result.total_pages,
|
|
onPageChange: page => {
|
|
reloadCloset(
|
|
$('#skin-category').hasClass('active') ? 'skin' : 'cape',
|
|
page,
|
|
$('input[name=q]').val()
|
|
);
|
|
}
|
|
}));
|
|
}).catch(error => showAjaxError);
|
|
|
|
$('input[name=q]').on('input', debounce(() => {
|
|
const category = $('#skin-category').hasClass('active') ? 'skin' : 'cape';
|
|
reloadCloset(
|
|
category,
|
|
1,
|
|
$('input[name=q]').val()
|
|
);
|
|
}, 350));
|
|
}
|
|
});
|
|
|
|
function setTexture() {
|
|
var pid = 0;
|
|
|
|
$('input[name="player"]').each(function(){
|
|
if (this.checked) pid = this.id;
|
|
});
|
|
|
|
if (!pid) {
|
|
toastr.info(trans('user.emptySelectedPlayer'));
|
|
} else if (selectedTextures['skin'] == undefined && selectedTextures['cape'] == undefined) {
|
|
toastr.info(trans('user.emptySelectedTexture'));
|
|
} else {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url('user/player/set'),
|
|
dataType: "json",
|
|
data: {
|
|
'pid': pid,
|
|
'tid[skin]': selectedTextures['skin'],
|
|
'tid[cape]': selectedTextures['cape']
|
|
},
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
});
|
|
$('#modal-use-as').modal('hide');
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
}
|
|
}
|
|
|
|
$('body').on('change', '#preference', function() {
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url('user/player/preference'),
|
|
dataType: "json",
|
|
data: { 'pid' : $(this).attr('pid'), 'preference' : $(this).val() },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
toastr.success(json.msg);
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
|
|
function changePlayerName(pid, current_player_name) {
|
|
swal({
|
|
title: trans('user.changePlayerName'),
|
|
text: $('#player_name').attr('placeholder'),
|
|
inputValue: current_player_name,
|
|
input: 'text',
|
|
showCancelButton: true,
|
|
inputValidator: function(value) {
|
|
return new Promise(function(resolve, reject) {
|
|
if (value) {
|
|
resolve();
|
|
} else {
|
|
reject(trans('user.emptyPlayerName'));
|
|
}
|
|
});
|
|
}
|
|
}).then(function(new_player_name) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url('user/player/rename'),
|
|
dataType: "json",
|
|
data: { 'pid' : pid, 'new_player_name' : new_player_name },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
});
|
|
$('td:contains("'+pid+'")').next().html(new_player_name);
|
|
} else {
|
|
swal({
|
|
type: 'error',
|
|
html: json.msg
|
|
});
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
}
|
|
|
|
function clearTexture(pid) {
|
|
let dom = `
|
|
<div class="form-group">
|
|
<input type="checkbox" id="clear-steve"> Default (Steve)
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="checkbox" id="clear-alex"> Slim (Alex)
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="checkbox" id="clear-cape"> ${trans('general.cape')}
|
|
</div>
|
|
<script>
|
|
$('input[type=checkbox]').iCheck({ checkboxClass: 'icheckbox_square-blue' });
|
|
</script>
|
|
`;
|
|
showModal(dom, trans('user.chooseClearTexture'), 'default', { callback: `ajaxClearTexture(${pid})` });
|
|
return;
|
|
}
|
|
|
|
function ajaxClearTexture(pid) {
|
|
$('.modal').each(function () {
|
|
if ($(this).css('display') == "none")
|
|
$(this).remove();
|
|
});
|
|
|
|
let data = { pid: pid };
|
|
['steve', 'alex', 'cape'].forEach(type => {
|
|
data[type] = $(`#clear-${type}`).prop('checked') ? 1 : 0;
|
|
});
|
|
|
|
if (data['steve'] == 0 && data['alex'] == 0 && data['cape'] == 0) {
|
|
toastr.warning(trans('user.noClearChoice'));
|
|
return;
|
|
}
|
|
|
|
Promise.resolve($.ajax({
|
|
type: 'POST',
|
|
url: url('user/player/texture/clear'),
|
|
dataType: 'json',
|
|
data: data
|
|
})).then(json => {
|
|
swal({ type: json.errno == 0 ? 'success' : 'error', html: json.msg });
|
|
$('.modal').modal('hide');
|
|
}).catch(error => showAjaxError);
|
|
}
|
|
|
|
function deletePlayer(pid) {
|
|
swal({
|
|
title: trans('user.deletePlayer'),
|
|
text: trans('user.deletePlayerNotice'),
|
|
type: 'warning',
|
|
showCancelButton: true,
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonColor: '#d33'
|
|
}).then(function() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url('user/player/delete'),
|
|
dataType: "json",
|
|
data: { 'pid' : pid },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
}).then(function() {
|
|
$('tr#'+pid).remove();
|
|
});
|
|
} else {
|
|
swal({
|
|
type: 'error',
|
|
html: json.msg
|
|
});
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
}
|
|
|
|
function addNewPlayer() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url('user/player/add'),
|
|
dataType: "json",
|
|
data: { 'player_name' : $('#player_name').val() },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
}).then(function() {
|
|
location.reload();
|
|
});
|
|
$('#modal-add-player').modal('hide');
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
}
|
|
|
|
function changeNickName() {
|
|
var new_nickname = $('#new-nickname').val();
|
|
|
|
if (!new_nickname) {
|
|
swal({
|
|
type: 'error',
|
|
html: trans('user.emptyNewNickName')
|
|
});
|
|
return;
|
|
}
|
|
|
|
swal({
|
|
text: trans('user.changeNickName', { new_nickname: new_nickname }),
|
|
type: 'question',
|
|
showCancelButton: true
|
|
}).then(function() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "./profile?action=nickname",
|
|
dataType: "json",
|
|
data: { 'new_nickname' : new_nickname },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
});
|
|
$('.nickname').each(function() {
|
|
$(this).html(new_nickname);
|
|
});
|
|
} else {
|
|
swal({
|
|
type: 'warning',
|
|
html: json.msg
|
|
});
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
});
|
|
}
|
|
|
|
function changePassword() {
|
|
let domOldPwd = $('#password');
|
|
let domNewPwd = $('#new-passwd');
|
|
let domConfirmPwd = $('#confirm-pwd');
|
|
|
|
let password = domOldPwd.val();
|
|
let new_passwd = domNewPwd.val();
|
|
|
|
if (password == "") {
|
|
toastr.info(trans('user.emptyPassword'));
|
|
domOldPwd.focus();
|
|
} else if (new_passwd == "") {
|
|
toastr.info(trans('user.emptyNewPassword'));
|
|
domNewPwd.focus();
|
|
} else if (domConfirmPwd.val() == "") {
|
|
toastr.info(trans('auth.emptyConfirmPwd'));
|
|
domConfirmPwd.focus();
|
|
} else if (new_passwd != domConfirmPwd.val()) {
|
|
toastr.warning(trans('auth.invalidConfirmPwd'));
|
|
domConfirmPwd.focus();
|
|
} else {
|
|
Promise.resolve($.ajax({
|
|
type: "POST",
|
|
url: "./profile?action=password",
|
|
dataType: "json",
|
|
data: { 'current_password': password, 'new_password': new_passwd }
|
|
})).then(result => {
|
|
if (result.errno == 0) {
|
|
return swal({ type: 'success', text: result.msg })
|
|
.then(() => {
|
|
return logout();
|
|
}).then(result => {
|
|
if (result.errno == 0) {
|
|
window.location = url('auth/login');
|
|
}
|
|
}).catch(error => showAjaxError);
|
|
} else {
|
|
return swal({ type: 'warning', text: result.msg });
|
|
}
|
|
}).catch(error => showAjaxError);
|
|
}
|
|
}
|
|
|
|
$('#new-email').focusin(function() {
|
|
$('#current-password').parent().show();
|
|
}).focusout(function() {
|
|
window.setTimeout(function() {
|
|
if (!$('#current-password').is(':focus'))
|
|
$('#current-password').parent().hide();
|
|
}, 10);
|
|
})
|
|
|
|
function changeEmail() {
|
|
var new_email = $('#new-email').val();
|
|
|
|
if (!new_email) {
|
|
swal({
|
|
type: 'error',
|
|
html: trans('user.emptyNewEmail')
|
|
});
|
|
return;
|
|
}
|
|
// check valid email address
|
|
if (!/\S+@\S+\.\S+/.test(new_email)) {
|
|
swal({
|
|
type: 'warning',
|
|
html: trans('auth.invalidEmail')
|
|
}); return;
|
|
}
|
|
|
|
swal({
|
|
text: trans('user.changeEmail', { new_email: new_email }),
|
|
type: 'question',
|
|
showCancelButton: true
|
|
}).then(() => {
|
|
return Promise.resolve($.ajax({
|
|
type: 'POST',
|
|
url: './profile?action=email',
|
|
dataType: 'json',
|
|
data: { 'new_email': new_email, 'password': $('#current-password').val() }
|
|
}));
|
|
}).then(result => {
|
|
if (result.errno == 0) {
|
|
return swal({ type: 'success', text: result.msg })
|
|
.then(() => {
|
|
return logout();
|
|
}).then(result => {
|
|
if (result.errno == 0) {
|
|
window.location = url('auth/login');
|
|
}
|
|
}).catch(error => showAjaxError);
|
|
} else {
|
|
return swal({ type: 'warning', text: result.msg });
|
|
}
|
|
}).catch(error => showAjaxError);
|
|
}
|
|
|
|
function deleteAccount() {
|
|
var password = $('.modal-body>#password').val();
|
|
|
|
if (!password) {
|
|
swal({
|
|
type: 'warning',
|
|
html: trans('user.emptyDeletePassword')
|
|
}); return;
|
|
}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "./profile?action=delete",
|
|
dataType: "json",
|
|
data: { 'password' : password },
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
}).then(function() {
|
|
window.location = "../auth/login";
|
|
});
|
|
} else {
|
|
swal({
|
|
type: 'warning',
|
|
html: json.msg
|
|
});
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
}
|
|
|
|
function signIn() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "./user/sign-in",
|
|
dataType: "json",
|
|
success: function(json) {
|
|
if (json.errno == 0) {
|
|
$('#score').html(json.score);
|
|
var dom = '<i class="fa fa-calendar-check-o"></i> ' + trans('user.signInRemainingTime', { time: String(json.remaining_time) });
|
|
$('#sign-in-button').attr('disabled', 'disabled').html(dom);
|
|
|
|
if (json.storage.used > 1024) {
|
|
$('#user-storage').html(`<b>${Math.round(json.storage.used)}</b>/ ${Math.round(json.storage.total)} MB`);
|
|
} else {
|
|
$('#user-storage').html(`<b>${Math.round(json.storage.used)}</b>/ ${Math.round(json.storage.total)} KB`);
|
|
}
|
|
|
|
$('#user-storage-bar').css('width', `${json.storage.percentage}%`)
|
|
|
|
swal({
|
|
type: 'success',
|
|
html: json.msg
|
|
});
|
|
} else {
|
|
toastr.warning(json.msg);
|
|
}
|
|
},
|
|
error: showAjaxError
|
|
});
|
|
}
|