zorin-e
8/21/2017 - 5:21 AM
Upload photos and send to server
Upload photos and send to server
document.getElementById('upload-photo').addEventListener('change', function(e) {
new UploadPhoto({
el: e.target,
files: e.target.files,
playerID: 4,
clubID: 3
}).send();
});
document.querySelector('[data-action="deletePhoto"]').addEventListener('click', function(e) {
new UploadPhoto({
upload: false,
el: e.target,
url: '/admin/player.php?gh_id=4',
photoID: 4,
action: 'delete_player_photo'
}).delete();
});
document.querySelector('[data-action="setPhoto"]').addEventListener('click', function(e) {
new UploadPhoto({
upload: false,
el: e.target,
url: '/admin/player.php?gh_id=4',
photoID: 4,
action: 'set_main_player_photo'
}).delete();
});<div id="photo-wrapper">
<div class="m-b-20 {if $player_photos|count|default:'0' >= 40}unactive{/if}">
<input id="show-take-photo" type="file" class="hidden" multiple>
<label for="show-take-photo" class="btn btn-blue">{t}Take photo{/t}</label>
<label for="upload-photo" class="btn btn-blue m-l-10">{t}Upload photo{/t}</label>
<input id="upload-photo" name="player_upload[]" type="file" class="hidden" accept="image/*" multiple>
</div>
<div class="row">
<div class="container container--lg container--left photos">
<div class="row">
{foreach from=$player_photos item=item key=key name=name}
<div data-name="item" class="col-lg-3 col-md-4 col-sm-6">
<div class="{if $item['IsMain'] == 1}photos__item photos__item--active{else}photos__item{/if}">
<a href="/admin/players.php?gh_id={$current_gh_id}&get_player_photo={$item['PhotoID']}" data-lightbox="player-photos">
<img class="photos__img" src="/admin/players.php?gh_id={$current_gh_id}&get_player_photo={$item['PhotoID']}" alt="">
</a>
<div class="photos__actions">
<i data-action="setPhoto" data-id="{$item['PhotoID']}" class="photos__actions-apply fa fa-check-circle-o"></i>
<i data-action="deletePhoto" data-id="{$item['PhotoID']}" class="photos__actions-delete fa fa-times-circle-o"></i>
</div>
</div>
</div>
{/foreach}
</div>
</div>
</div>
</div>;(function() {
this.UploadPhoto = function(param) {
this.param = param || {};
this.filesCount = 40;
this.messages = {
error: 'Max upload photos is ' + this.filesCount,
success: 'Photos is uploaded',
notUploaded: 'is not uploaded',
notValid: 'is not valid format',
errorText: 'Error'
};
this.wrapper = 'photo-wrapper';
if(this.param.el && this.param.upload !== false) {
this.onChangeHandler = onChangeHandler.bind(this);
this.param.el.addEventListener('change', this.onChangeHandler);
}
}
/**
*
* private methods
*
*/
function onChangeHandler(e) {
var self = this;
// when input file change
self.param.files = e.target.files;
self.send();
e.preventDefault();
}
function sendAction() {
var self = this;
return new Ajax({
method: 'post',
url: self.param.url,
data: 'photo_id=' + self.param.photoID + '&' + self.param.action + '=true'
}).send()
}
function showPhotos(data) {
var self = this;
// create item
var docFrag = document.createDocumentFragment(),
item = document.createElement('div'),
photosItem = document.createElement('div'),
a = document.createElement('a'),
img = document.createElement('img'),
photosActions = document.createElement('div'),
setPhoto = document.createElement('i'),
deletePhoto = document.createElement('i');
// set attributes
item.classList.add('col-lg-3', 'col-md-4', 'col-sm-6');
item.setAttribute('data-name', 'item');
photosItem.classList.add('photos__item');
a.setAttribute('data-lightbox', 'player-photos');
img.classList.add('photos__img');
photosActions.classList.add('photos__actions');
setPhoto.setAttribute('data-action', 'setPhoto');
setPhoto.classList.add('photos__actions-apply', 'fa', 'fa-check-circle-o');
deletePhoto.setAttribute('data-action', 'deletePhoto');
deletePhoto.classList.add('photos__actions-delete', 'fa', 'fa-times-circle-o');
// append
item.appendChild(photosItem);
photosItem.appendChild(a);
a.appendChild(img);
photosItem.appendChild(photosActions);
photosActions.appendChild(setPhoto)
photosActions.appendChild(deletePhoto);
// set attributes to elemens from data and append to docFrag
for (var i = 0; i < data.length; i++) {
var el = item.cloneNode(true);
el.querySelector('.photos__img').setAttribute('src', '/admin/players.php?gh_id='+ self.param.clubID +'&get_player_photo=' + data[i].PhotoID);
el.querySelector('[data-lightbox="player-photos"]').setAttribute('href', '/admin/players.php?gh_id='+ self.param.clubID +'&get_player_photo=' + data[i].PhotoID);
el.querySelector('[data-action="setPhoto"]').setAttribute('data-id', data[i].PhotoID);
el.querySelector('[data-action="deletePhoto"]').setAttribute('data-id', data[i].PhotoID);
docFrag.appendChild(el);
}
return docFrag;
}
function getProfileImg() {
return this.param.el.closest('.tabs__wrapper')
.querySelectorAll('.tabs__content')[0]
.querySelector('.photos__img');
}
/**
*
* public methods
*
*/
UploadPhoto.prototype = {
getMessage: function(type) {
return {
type: type,
message: this.messages[type]
};
},
checkFilesCount: function() {
return this.param.files.length > this.filesCount ? this.getMessage('error') : this.getMessage('success');
},
send: function(blob) {
var self = this;
var check = this.checkFilesCount();
if(check.type !== 'error') {
var formData = new FormData(this.param.el.form);
if(blob) formData.append('player_upload', blob);
new Ajax({
method: 'post',
url: '/admin/player.php?upload=1&gh_id=' + self.param.clubID + '&player_id=' + self.param.playerID,
data: formData,
type: ''
}).send()
.then(
preloader({
target: self.wrapper,
action: 'show'
})
)
.then(JSON.parse)
.then(function(data) {
if(data.success === 1) {
var item = self.param.el.closest('#photo-wrapper').querySelector('.photos').querySelector('[data-name="item"]'),
parent = item.parentNode;
parent.insertBefore(showPhotos.call(self, data.data), item);
}
else {
toastr.error(self.messages.errorText + ' #' + data.success);
}
})
.catch(function(error) {
console.error(error);
})
.then(function() {
setTimeout(
preloader.bind(null, {
target: self.wrapper,
action: 'hide'
})
, 200);
});
}
else {
toastr.error(check.message);
}
this.param.el.removeEventListener('change', this.onChangeHandler);
},
delete: function() {
var self = this;
sendAction.call(this)
.then(
preloader({
target: self.wrapper,
action: 'show'
})
)
.then(JSON.parse)
.then(function(data) {
if(data.success === 1) {
var img = getProfileImg.call(self);
if(self.param.el.closest('.photos__item').className.indexOf('photos__item--active') > -1) {
img.classList.add('hidden');
img.nextElementSibling.classList.remove('hidden');
}
self.param.el.closest('.row').removeChild(self.param.el.closest('[data-name="item"]'));
}
else {
toastr.error(self.messages.errorText + ' #' + data.success);
}
})
.catch(function(error) {
console.error(error);
})
.then(function(data) {
setTimeout(
preloader.bind(null, {
target: self.wrapper,
action: 'hide'
})
, 200);
return data;
});
},
set: function() {
var self = this;
sendAction.call(this)
.then(
preloader({
target: self.wrapper,
action: 'show'
})
)
.then(JSON.parse)
.then(function(data) {
return data;
})
.catch(function(error) {
console.error(error);
})
.then(function(data) {
preloader({
target: self.wrapper,
action: 'hide'
});
return data;
})
.then(function(data) {
if(data.success === 1) {
var img = getProfileImg.call(self);
var activeItem = self.param.el.closest('.row').querySelector('.photos__item--active');
if(activeItem !== null) activeItem.classList.remove('photos__item--active');
self.param.el.closest('.photos__item').classList.add('photos__item--active');
img.setAttribute('src', img.getAttribute('src').replace(/(get_player_photo=)(\d*)/g, '$1' + self.param.el.getAttribute('data-id')));
if(img.className.indexOf('hidden') > -1) {
img.classList.remove('hidden');
img.nextElementSibling.classList.add('hidden');
}
}
else {
toastr.error(self.messages.errorText + ' #' + data.success);
}
});
}
};
})();