diff options
author | zotlabs <mike@macgirvin.com> | 2018-01-23 16:42:24 -0800 |
---|---|---|
committer | zotlabs <mike@macgirvin.com> | 2018-01-23 16:42:24 -0800 |
commit | 5902528bae21b560b6be4879e5e87ed36ce099b6 (patch) | |
tree | 5588a1bd3d7cbf1f0444cce96931b3a28640101c /library/cropperjs/src/js/handlers.js | |
parent | 1e8dcaffc977be9757b14ad23a4cc9f98c70ae60 (diff) | |
download | volse-hubzilla-5902528bae21b560b6be4879e5e87ed36ce099b6.tar.gz volse-hubzilla-5902528bae21b560b6be4879e5e87ed36ce099b6.tar.bz2 volse-hubzilla-5902528bae21b560b6be4879e5e87ed36ce099b6.zip |
undo and redo adding new cropper library as it had a .git config from the original project
Diffstat (limited to 'library/cropperjs/src/js/handlers.js')
-rw-r--r-- | library/cropperjs/src/js/handlers.js | 212 |
1 files changed, 212 insertions, 0 deletions
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, + }); + }, +}; |