undo and redo adding new cropper library as it had a .git config from the original project
This commit is contained in:
zotlabs
298
library/cropperjs/docs/js/main.js
Normal file
298
library/cropperjs/docs/js/main.js
Normal file
@@ -0,0 +1,298 @@
|
||||
window.onload = function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
var Cropper = window.Cropper;
|
||||
var URL = window.URL || window.webkitURL;
|
||||
var container = document.querySelector('.img-container');
|
||||
var image = container.getElementsByTagName('img').item(0);
|
||||
var download = document.getElementById('download');
|
||||
var actions = document.getElementById('actions');
|
||||
var dataX = document.getElementById('dataX');
|
||||
var dataY = document.getElementById('dataY');
|
||||
var dataHeight = document.getElementById('dataHeight');
|
||||
var dataWidth = document.getElementById('dataWidth');
|
||||
var dataRotate = document.getElementById('dataRotate');
|
||||
var dataScaleX = document.getElementById('dataScaleX');
|
||||
var dataScaleY = document.getElementById('dataScaleY');
|
||||
var options = {
|
||||
aspectRatio: 16 / 9,
|
||||
preview: '.img-preview',
|
||||
ready: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
cropstart: function (e) {
|
||||
console.log(e.type, e.detail.action);
|
||||
},
|
||||
cropmove: function (e) {
|
||||
console.log(e.type, e.detail.action);
|
||||
},
|
||||
cropend: function (e) {
|
||||
console.log(e.type, e.detail.action);
|
||||
},
|
||||
crop: function (e) {
|
||||
var data = e.detail;
|
||||
|
||||
console.log(e.type);
|
||||
dataX.value = Math.round(data.x);
|
||||
dataY.value = Math.round(data.y);
|
||||
dataHeight.value = Math.round(data.height);
|
||||
dataWidth.value = Math.round(data.width);
|
||||
dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
|
||||
dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
|
||||
dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
|
||||
},
|
||||
zoom: function (e) {
|
||||
console.log(e.type, e.detail.ratio);
|
||||
}
|
||||
};
|
||||
var cropper = new Cropper(image, options);
|
||||
var originalImageURL = image.src;
|
||||
var uploadedImageType = 'image/jpeg';
|
||||
var uploadedImageURL;
|
||||
|
||||
// Tooltip
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
// Buttons
|
||||
if (!document.createElement('canvas').getContext) {
|
||||
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
|
||||
}
|
||||
|
||||
if (typeof document.createElement('cropper').style.transition === 'undefined') {
|
||||
$('button[data-method="rotate"]').prop('disabled', true);
|
||||
$('button[data-method="scale"]').prop('disabled', true);
|
||||
}
|
||||
|
||||
// Download
|
||||
if (typeof download.download === 'undefined') {
|
||||
download.className += ' disabled';
|
||||
}
|
||||
|
||||
// Options
|
||||
actions.querySelector('.docs-toggles').onchange = function (event) {
|
||||
var e = event || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
var cropBoxData;
|
||||
var canvasData;
|
||||
var isCheckbox;
|
||||
var isRadio;
|
||||
|
||||
if (!cropper) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.tagName.toLowerCase() === 'label') {
|
||||
target = target.querySelector('input');
|
||||
}
|
||||
|
||||
isCheckbox = target.type === 'checkbox';
|
||||
isRadio = target.type === 'radio';
|
||||
|
||||
if (isCheckbox || isRadio) {
|
||||
if (isCheckbox) {
|
||||
options[target.name] = target.checked;
|
||||
cropBoxData = cropper.getCropBoxData();
|
||||
canvasData = cropper.getCanvasData();
|
||||
|
||||
options.ready = function () {
|
||||
console.log('ready');
|
||||
cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
|
||||
};
|
||||
} else {
|
||||
options[target.name] = target.value;
|
||||
options.ready = function () {
|
||||
console.log('ready');
|
||||
};
|
||||
}
|
||||
|
||||
// Restart
|
||||
cropper.destroy();
|
||||
cropper = new Cropper(image, options);
|
||||
}
|
||||
};
|
||||
|
||||
// Methods
|
||||
actions.querySelector('.docs-buttons').onclick = function (event) {
|
||||
var e = event || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
var cropped;
|
||||
var result;
|
||||
var input;
|
||||
var data;
|
||||
|
||||
if (!cropper) {
|
||||
return;
|
||||
}
|
||||
|
||||
while (target !== this) {
|
||||
if (target.getAttribute('data-method')) {
|
||||
break;
|
||||
}
|
||||
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
data = {
|
||||
method: target.getAttribute('data-method'),
|
||||
target: target.getAttribute('data-target'),
|
||||
option: target.getAttribute('data-option') || undefined,
|
||||
secondOption: target.getAttribute('data-second-option') || undefined
|
||||
};
|
||||
|
||||
cropped = cropper.cropped;
|
||||
|
||||
if (data.method) {
|
||||
if (typeof data.target !== 'undefined') {
|
||||
input = document.querySelector(data.target);
|
||||
|
||||
if (!target.hasAttribute('data-option') && data.target && input) {
|
||||
try {
|
||||
data.option = JSON.parse(input.value);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
switch (data.method) {
|
||||
case 'rotate':
|
||||
if (cropped && options.viewMode > 0) {
|
||||
cropper.clear();
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'getCroppedCanvas':
|
||||
try {
|
||||
data.option = JSON.parse(data.option);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
|
||||
if (uploadedImageType === 'image/jpeg') {
|
||||
if (!data.option) {
|
||||
data.option = {};
|
||||
}
|
||||
|
||||
data.option.fillColor = '#fff';
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
result = cropper[data.method](data.option, data.secondOption);
|
||||
|
||||
switch (data.method) {
|
||||
case 'rotate':
|
||||
if (cropped && options.viewMode > 0) {
|
||||
cropper.crop();
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'scaleX':
|
||||
case 'scaleY':
|
||||
target.setAttribute('data-option', -data.option);
|
||||
break;
|
||||
|
||||
case 'getCroppedCanvas':
|
||||
if (result) {
|
||||
// Bootstrap's Modal
|
||||
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
|
||||
|
||||
if (!download.disabled) {
|
||||
download.href = result.toDataURL(uploadedImageType);
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'destroy':
|
||||
cropper = null;
|
||||
|
||||
if (uploadedImageURL) {
|
||||
URL.revokeObjectURL(uploadedImageURL);
|
||||
uploadedImageURL = '';
|
||||
image.src = originalImageURL;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
if (typeof result === 'object' && result !== cropper && input) {
|
||||
try {
|
||||
input.value = JSON.stringify(result);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.body.onkeydown = function (event) {
|
||||
var e = event || window.event;
|
||||
|
||||
if (!cropper || this.scrollTop > 300) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.keyCode) {
|
||||
case 37:
|
||||
e.preventDefault();
|
||||
cropper.move(-1, 0);
|
||||
break;
|
||||
|
||||
case 38:
|
||||
e.preventDefault();
|
||||
cropper.move(0, -1);
|
||||
break;
|
||||
|
||||
case 39:
|
||||
e.preventDefault();
|
||||
cropper.move(1, 0);
|
||||
break;
|
||||
|
||||
case 40:
|
||||
e.preventDefault();
|
||||
cropper.move(0, 1);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Import image
|
||||
var inputImage = document.getElementById('inputImage');
|
||||
|
||||
if (URL) {
|
||||
inputImage.onchange = function () {
|
||||
var files = this.files;
|
||||
var file;
|
||||
|
||||
if (cropper && files && files.length) {
|
||||
file = files[0];
|
||||
|
||||
if (/^image\/\w+/.test(file.type)) {
|
||||
uploadedImageType = file.type;
|
||||
|
||||
if (uploadedImageURL) {
|
||||
URL.revokeObjectURL(uploadedImageURL);
|
||||
}
|
||||
|
||||
image.src = uploadedImageURL = URL.createObjectURL(file);
|
||||
cropper.destroy();
|
||||
cropper = new Cropper(image, options);
|
||||
inputImage.value = null;
|
||||
} else {
|
||||
window.alert('Please choose an image file.');
|
||||
}
|
||||
}
|
||||
};
|
||||
} else {
|
||||
inputImage.disabled = true;
|
||||
inputImage.parentNode.className += ' disabled';
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user