enhance selection of texture type at upload page

This commit is contained in:
printempw 2016-08-21 10:36:08 +08:00
parent fe1bc5980c
commit f1b966b12d
2 changed files with 54 additions and 16 deletions

View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-07-19 10:46:38
* @Last Modified by: printempw
* @Last Modified time: 2016-08-17 17:58:53
* @Last Modified time: 2016-08-21 10:33:47
*/
'use strict';
@ -31,6 +31,10 @@ $('#private').on('ifToggled', function() {
$(this).prop('checked') ? $('#msg').show() : $('#msg').hide();
});
$('#type-skin').on('ifToggled', function() {
$(this).prop('checked') ? $('#skin-type').show() : $('#skin-type').hide();
});
function addToCloset(tid) {
$.getJSON('../skinlib/info/'+tid, function(json) {
swal({
@ -146,10 +150,10 @@ $('body').on('change', '#file', function() {
var files = $('#file').prop('files');
var type = ($('#type').val() == "cape") ? "cape" : "skin";
handleFiles(files, type);
}).on('change', '#type', function() {
}).on('ifToggled', '#type-skin', function() {
MSP.clear();
var files = $('#file').prop('files');
var type = ($('#type').val() == "cape") ? "cape" : "skin";
var type = $('#type-skin').prop('checked') ? "skin" : "cape";
handleFiles(files, type);
});
@ -180,10 +184,17 @@ function handleFiles(files, type) {
function upload() {
var form_data = new FormData();
form_data.append('name', $('#name').val())
form_data.append('type', $('#type').val())
form_data.append('file', $('#file').prop('files')[0])
form_data.append('public', !$('#private').prop('checked'))
form_data.append('name', $('#name').val());
form_data.append('file', $('#file').prop('files')[0]);
form_data.append('public', !$('#private').prop('checked'));
if ($('#type-skin').prop('checked')) {
form_data.append('type', $('#skin-type').val());
} else if ($('#type-cape').prop('checked')) {
form_data.append('type', 'cape');
} else {
toastr.info('请选择材质的类型'); return;
}
// quick fix for browsers which don't support FormData.get()
if ($('#file').prop('files')[0] == 'undefined') {
@ -192,9 +203,6 @@ function upload() {
} else if ($('#name').val() == "") {
toastr.info('给你的材质起个名字吧');
$('#name').focus();
} else if ($('#type').val() == "") {
toastr.info('请选择材质的类型');
$('#type').focus();
} else if ($('#file').prop('files')[0].type !== "image/png") {
toastr.warning('请选择 PNG 格式的图片');
$('#file').focus();

View File

@ -2,6 +2,15 @@
@section('title', '上传材质')
@section('style')
<style>
label[for="type-skin"],
label[for="type-cape"] {
margin-top: 5px;
}
</style>
@endsection
@section('content')
<!-- Full Width Column -->
<div class="content-wrapper">
@ -29,12 +38,32 @@
</div>
<div class="form-group">
<label for="type">材质类型</label>
<select class="form-control" id="type">
<option value="steve">皮肤Steve 模型)</option>
<option value="alex">皮肤Alex 模型)</option>
<option value="cape">披风</option>
</select>
<label>材质类型</label>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-xs-4">
<label for="type-skin">
<input type="radio" name="type" id="type-skin"> 皮肤
</label>
</div>
<div class="col-xs-8">
<select class="form-control" id="skin-type" style="display: none;">
<option value="steve">Steve 模型</option>
<option value="alex">Alex 模型</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<label for="type-cape">
<input type="radio" name="type" id="type-cape"> 披风
</label>
</div>
</div>
</div>
<div class="form-group">
@ -97,6 +126,7 @@ $(document).ready(function() {
});
$('[for="private"]').tooltip();
});
// Auto resize canvas to fit responsive design
$(window).resize(init3dCanvas);
</script>