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/src/js/handlers.js | 212 +++++++++++++++++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 library/cropperjs/src/js/handlers.js (limited to 'library/cropperjs/src/js/handlers.js') diff --git a/library/cropperjs/src/js/handlers.js b/library/cropperjs/src/js/handlers.js new file mode 100644 index 000000000..7b7b2469a --- /dev/null +++ b/library/cropperjs/src/js/handlers.js @@ -0,0 +1,212 @@ +import { + ACTION_CROP, + ACTION_ZOOM, + CLASS_CROP, + CLASS_MODAL, + DATA_ACTION, + DRAG_MODE_CROP, + DRAG_MODE_MOVE, + DRAG_MODE_NONE, + EVENT_CROP_END, + EVENT_CROP_MOVE, + EVENT_CROP_START, + REGEXP_ACTIONS, +} from './constants'; +import { + addClass, + dispatchEvent, + each, + extend, + getData, + getPointer, + hasClass, + toggleClass, +} from './utilities'; + +export default { + resize() { + const { options, container, containerData } = this; + const minContainerWidth = Number(options.minContainerWidth) || 200; + const minContainerHeight = Number(options.minContainerHeight) || 100; + + if (this.disabled || containerData.width <= minContainerWidth || + containerData.height <= minContainerHeight) { + return; + } + + const ratio = container.offsetWidth / containerData.width; + + // Resize when width changed or height changed + if (ratio !== 1 || container.offsetHeight !== containerData.height) { + let canvasData; + let cropBoxData; + + if (options.restore) { + canvasData = this.getCanvasData(); + cropBoxData = this.getCropBoxData(); + } + + this.render(); + + if (options.restore) { + this.setCanvasData(each(canvasData, (n, i) => { + canvasData[i] = n * ratio; + })); + this.setCropBoxData(each(cropBoxData, (n, i) => { + cropBoxData[i] = n * ratio; + })); + } + } + }, + + dblclick() { + if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) { + return; + } + + this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP); + }, + + wheel(e) { + const ratio = Number(this.options.wheelZoomRatio) || 0.1; + let delta = 1; + + if (this.disabled) { + return; + } + + e.preventDefault(); + + // Limit wheel speed to prevent zoom too fast (#21) + if (this.wheeling) { + return; + } + + this.wheeling = true; + + setTimeout(() => { + this.wheeling = false; + }, 50); + + if (e.deltaY) { + delta = e.deltaY > 0 ? 1 : -1; + } else if (e.wheelDelta) { + delta = -e.wheelDelta / 120; + } else if (e.detail) { + delta = e.detail > 0 ? 1 : -1; + } + + this.zoom(-delta * ratio, e); + }, + + cropStart(e) { + if (this.disabled) { + return; + } + + const { options, pointers } = this; + let action; + + if (e.changedTouches) { + // Handle touch event + each(e.changedTouches, (touch) => { + pointers[touch.identifier] = getPointer(touch); + }); + } else { + // Handle mouse event and pointer event + pointers[e.pointerId || 0] = getPointer(e); + } + + if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) { + action = ACTION_ZOOM; + } else { + action = getData(e.target, DATA_ACTION); + } + + if (!REGEXP_ACTIONS.test(action)) { + return; + } + + if (dispatchEvent(this.element, EVENT_CROP_START, { + originalEvent: e, + action, + }) === false) { + return; + } + + e.preventDefault(); + + this.action = action; + this.cropping = false; + + if (action === ACTION_CROP) { + this.cropping = true; + addClass(this.dragBox, CLASS_MODAL); + } + }, + + cropMove(e) { + const { action } = this; + + if (this.disabled || !action) { + return; + } + + const { pointers } = this; + + e.preventDefault(); + + if (dispatchEvent(this.element, EVENT_CROP_MOVE, { + originalEvent: e, + action, + }) === false) { + return; + } + + if (e.changedTouches) { + each(e.changedTouches, (touch) => { + extend(pointers[touch.identifier], getPointer(touch, true)); + }); + } else { + extend(pointers[e.pointerId || 0], getPointer(e, true)); + } + + this.change(e); + }, + + cropEnd(e) { + if (this.disabled) { + return; + } + + const { action, pointers } = this; + + if (e.changedTouches) { + each(e.changedTouches, (touch) => { + delete pointers[touch.identifier]; + }); + } else { + delete pointers[e.pointerId || 0]; + } + + if (!action) { + return; + } + + e.preventDefault(); + + if (!Object.keys(pointers).length) { + this.action = ''; + } + + if (this.cropping) { + this.cropping = false; + toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal); + } + + dispatchEvent(this.element, EVENT_CROP_END, { + originalEvent: e, + action, + }); + }, +}; -- cgit v1.2.3