From 5902528bae21b560b6be4879e5e87ed36ce099b6 Mon Sep 17 00:00:00 2001 From: zotlabs Date: Tue, 23 Jan 2018 16:42:24 -0800 Subject: undo and redo adding new cropper library as it had a .git config from the original project --- library/cropperjs/docs/js/main.js | 298 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 298 insertions(+) create mode 100644 library/cropperjs/docs/js/main.js (limited to 'library/cropperjs/docs/js/main.js') diff --git a/library/cropperjs/docs/js/main.js b/library/cropperjs/docs/js/main.js new file mode 100644 index 000000000..d74afbd60 --- /dev/null +++ b/library/cropperjs/docs/js/main.js @@ -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'; + } +}; -- cgit v1.2.3