Upload artwork using drag and drop or click to browse using track edit.
This commit is contained in:
Codenift
parent
7701d0f438
commit
a65ab11d9f
6 changed files with 334 additions and 3 deletions
|
|
@ -4284,3 +4284,94 @@ li .ui-state-hover {
|
|||
.track-edit-right {
|
||||
margin-left: 160px;
|
||||
}
|
||||
|
||||
/* Artwork Upload in Tracks Edit */
|
||||
.artwork-upload {
|
||||
position: relative;
|
||||
max-width: 205px;
|
||||
}
|
||||
|
||||
.artwork-upload .artwork-edit {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
.artwork-upload .artwork-edit input {
|
||||
display: none;
|
||||
}
|
||||
.artwork-upload .artwork-edit input + label {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 1px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.artwork-upload .artwork-edit input + label:hover {
|
||||
background: rgba(0, 0, 0, 0.40);
|
||||
border-color: #d6d6d6;
|
||||
}
|
||||
.artwork-upload .artwork-edit input + label:after {
|
||||
color: #757575;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
.artwork-upload .artwork-preview {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
border-radius: 1px;
|
||||
border: 2px solid #F8F8F8;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.artwork-upload .artwork-preview > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Drag and Drop Artwork */
|
||||
body.droppable .artwork-upload .artwork-preview {
|
||||
border: 2px dashed lightblue;
|
||||
z-index: 9999;
|
||||
}
|
||||
.profile {
|
||||
width: 50%;
|
||||
}
|
||||
.profile-avatar-wrap {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
margin: 0 20px 5px 0;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
.profile-avatar-wrap:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.profile-avatar-wrap img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.location {
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1601,6 +1601,70 @@ var validationTypes = {
|
|||
};
|
||||
|
||||
|
||||
function readArtworkURL(input, id) {
|
||||
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
$('.artwork-preview-'+id).css('background-image', 'url('+e.target.result +')');
|
||||
$('.artwork-preview-'+id).hide();
|
||||
$('.artwork-preview-'+id).fadeIn(500);
|
||||
$('.artwork_uploaded_'+id).val(function() {
|
||||
return e.target.result;
|
||||
});
|
||||
}
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// Resample Artwork
|
||||
var resampleImg = (function (canvas) {
|
||||
|
||||
function resampleImg(img, width, height, onresample) {
|
||||
var load = typeof img == "string",
|
||||
i = load || img;
|
||||
if (load) {
|
||||
i = new Image;
|
||||
i.onload = onload;
|
||||
i.onerror = onerror;
|
||||
}
|
||||
i._onresample = onresample;
|
||||
i._width = width;
|
||||
i._height = height;
|
||||
load ? (i.src = img) : onload.call(img);
|
||||
}
|
||||
|
||||
function onerror() {
|
||||
throw ("not found: " + this.src);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
var img = this,
|
||||
width = img._width,
|
||||
height = img._height,
|
||||
onresample = img._onresample;
|
||||
|
||||
var minValue = Math.min(img.height, img.width);
|
||||
width == null && (width = round(img.width * height / img.height));
|
||||
height == null && (height = round(img.height * width / img.width));
|
||||
|
||||
delete img._onresample;
|
||||
delete img._width;
|
||||
delete img._height;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
context.drawImage(img,0,0,minValue,minValue,0,0,width,height);
|
||||
onresample(canvas.toDataURL("image/jpeg"));
|
||||
}
|
||||
|
||||
var context = canvas.getContext("2d"),
|
||||
round = Math.round;
|
||||
|
||||
return resampleImg;
|
||||
|
||||
}(this.document.createElement("canvas")));
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
if (window.location.href.indexOf("showbuilder") > -1) {
|
||||
AIRTIME.library.initPodcastDatatable();
|
||||
|
|
@ -1613,5 +1677,95 @@ $(document).ready(function() {
|
|||
$(window).resize(function() {
|
||||
resizeAdvancedSearch();
|
||||
});
|
||||
});
|
||||
|
||||
// image upload by clicking on the artwork container
|
||||
$(document).on('change', '.artworkUpload', 'input', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var id = $(this).attr('data-id');
|
||||
readArtworkURL(this, id);
|
||||
});
|
||||
|
||||
// image upload by dragging onto the artwork container
|
||||
$.event.props.push('dataTransfer');
|
||||
(function() {
|
||||
|
||||
var s;
|
||||
var Artwork = {
|
||||
settings: {
|
||||
body: $("body")
|
||||
},
|
||||
init: function() {
|
||||
s = Artwork.settings;
|
||||
Artwork.bindUIActions();
|
||||
},
|
||||
bindUIActions: function() {
|
||||
|
||||
var timer;
|
||||
s.body.on('dragover', '.artwork-upload', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
clearTimeout(timer);
|
||||
Artwork.showDroppableArea();
|
||||
return false;
|
||||
});
|
||||
s.body.on('dragleave', '.artwork-upload', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
timer = setTimeout(function() {
|
||||
Artwork.hideDroppableArea();
|
||||
}, 200);
|
||||
});
|
||||
s.body.on('drop', '.artwork-upload', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var id = $(this).attr('data-id');
|
||||
Artwork.handleDrop(event.dataTransfer.files, id);
|
||||
});
|
||||
|
||||
},
|
||||
showDroppableArea: function() {
|
||||
s.body.addClass("droppable");
|
||||
},
|
||||
hideDroppableArea: function() {
|
||||
s.body.removeClass("droppable");
|
||||
},
|
||||
handleDrop: function(files, id) {
|
||||
Artwork.hideDroppableArea();
|
||||
var file = files[0];
|
||||
if (typeof file !== 'undefined' && file.type.match('image.*')) {
|
||||
Artwork.resizeImage(file, 512, function(data) {
|
||||
Artwork.placeImage(data, id);
|
||||
});
|
||||
} else {
|
||||
alert("The file is not an image.");
|
||||
}
|
||||
},
|
||||
resizeImage: function(file, size, callback) {
|
||||
var fileTracker = new FileReader;
|
||||
fileTracker.onload = function() {
|
||||
resampleImg(this.result, size, size, callback);
|
||||
}
|
||||
fileTracker.readAsDataURL(file);
|
||||
fileTracker.onabort = function() {
|
||||
alert("Upload aborted!");
|
||||
}
|
||||
fileTracker.onerror = function() {
|
||||
alert("File could not be read.");
|
||||
}
|
||||
},
|
||||
placeImage: function(data, id) {
|
||||
$('.artwork-preview-'+id).css('background-image', 'url('+ data +')');
|
||||
$('.artwork-preview-'+id).hide();
|
||||
$('.artwork-preview-'+id).fadeIn(500);
|
||||
$('.artwork_uploaded_'+id).val(function() {
|
||||
return data;
|
||||
});
|
||||
}
|
||||
}
|
||||
Artwork.init();
|
||||
})();
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue