forked from mirror/pixelfed
2221 lines
74 KiB
JavaScript
2221 lines
74 KiB
JavaScript
/******/ (function(modules) { // webpackBootstrap
|
||
/******/ // The module cache
|
||
/******/ var installedModules = {};
|
||
/******/
|
||
/******/ // The require function
|
||
/******/ function __webpack_require__(moduleId) {
|
||
/******/
|
||
/******/ // Check if module is in cache
|
||
/******/ if(installedModules[moduleId]) {
|
||
/******/ return installedModules[moduleId].exports;
|
||
/******/ }
|
||
/******/ // Create a new module (and put it into the cache)
|
||
/******/ var module = installedModules[moduleId] = {
|
||
/******/ i: moduleId,
|
||
/******/ l: false,
|
||
/******/ exports: {}
|
||
/******/ };
|
||
/******/
|
||
/******/ // Execute the module function
|
||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||
/******/
|
||
/******/ // Flag the module as loaded
|
||
/******/ module.l = true;
|
||
/******/
|
||
/******/ // Return the exports of the module
|
||
/******/ return module.exports;
|
||
/******/ }
|
||
/******/
|
||
/******/
|
||
/******/ // expose the modules object (__webpack_modules__)
|
||
/******/ __webpack_require__.m = modules;
|
||
/******/
|
||
/******/ // expose the module cache
|
||
/******/ __webpack_require__.c = installedModules;
|
||
/******/
|
||
/******/ // define getter function for harmony exports
|
||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||
/******/ Object.defineProperty(exports, name, {
|
||
/******/ configurable: false,
|
||
/******/ enumerable: true,
|
||
/******/ get: getter
|
||
/******/ });
|
||
/******/ }
|
||
/******/ };
|
||
/******/
|
||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||
/******/ __webpack_require__.n = function(module) {
|
||
/******/ var getter = module && module.__esModule ?
|
||
/******/ function getDefault() { return module['default']; } :
|
||
/******/ function getModuleExports() { return module; };
|
||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||
/******/ return getter;
|
||
/******/ };
|
||
/******/
|
||
/******/ // Object.prototype.hasOwnProperty.call
|
||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||
/******/
|
||
/******/ // __webpack_public_path__
|
||
/******/ __webpack_require__.p = "/";
|
||
/******/
|
||
/******/ // Load entry module and return exports
|
||
/******/ return __webpack_require__(__webpack_require__.s = 6);
|
||
/******/ })
|
||
/************************************************************************/
|
||
/******/ ({
|
||
|
||
/***/ "./node_modules/process/browser.js":
|
||
/***/ (function(module, exports) {
|
||
|
||
// shim for using process in browser
|
||
var process = module.exports = {};
|
||
|
||
// cached from whatever global is present so that test runners that stub it
|
||
// don't break things. But we need to wrap it in a try catch in case it is
|
||
// wrapped in strict mode code which doesn't define any globals. It's inside a
|
||
// function because try/catches deoptimize in certain engines.
|
||
|
||
var cachedSetTimeout;
|
||
var cachedClearTimeout;
|
||
|
||
function defaultSetTimout() {
|
||
throw new Error('setTimeout has not been defined');
|
||
}
|
||
function defaultClearTimeout () {
|
||
throw new Error('clearTimeout has not been defined');
|
||
}
|
||
(function () {
|
||
try {
|
||
if (typeof setTimeout === 'function') {
|
||
cachedSetTimeout = setTimeout;
|
||
} else {
|
||
cachedSetTimeout = defaultSetTimout;
|
||
}
|
||
} catch (e) {
|
||
cachedSetTimeout = defaultSetTimout;
|
||
}
|
||
try {
|
||
if (typeof clearTimeout === 'function') {
|
||
cachedClearTimeout = clearTimeout;
|
||
} else {
|
||
cachedClearTimeout = defaultClearTimeout;
|
||
}
|
||
} catch (e) {
|
||
cachedClearTimeout = defaultClearTimeout;
|
||
}
|
||
} ())
|
||
function runTimeout(fun) {
|
||
if (cachedSetTimeout === setTimeout) {
|
||
//normal enviroments in sane situations
|
||
return setTimeout(fun, 0);
|
||
}
|
||
// if setTimeout wasn't available but was latter defined
|
||
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
|
||
cachedSetTimeout = setTimeout;
|
||
return setTimeout(fun, 0);
|
||
}
|
||
try {
|
||
// when when somebody has screwed with setTimeout but no I.E. maddness
|
||
return cachedSetTimeout(fun, 0);
|
||
} catch(e){
|
||
try {
|
||
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
|
||
return cachedSetTimeout.call(null, fun, 0);
|
||
} catch(e){
|
||
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
|
||
return cachedSetTimeout.call(this, fun, 0);
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
function runClearTimeout(marker) {
|
||
if (cachedClearTimeout === clearTimeout) {
|
||
//normal enviroments in sane situations
|
||
return clearTimeout(marker);
|
||
}
|
||
// if clearTimeout wasn't available but was latter defined
|
||
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
|
||
cachedClearTimeout = clearTimeout;
|
||
return clearTimeout(marker);
|
||
}
|
||
try {
|
||
// when when somebody has screwed with setTimeout but no I.E. maddness
|
||
return cachedClearTimeout(marker);
|
||
} catch (e){
|
||
try {
|
||
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
|
||
return cachedClearTimeout.call(null, marker);
|
||
} catch (e){
|
||
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
|
||
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
|
||
return cachedClearTimeout.call(this, marker);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
var queue = [];
|
||
var draining = false;
|
||
var currentQueue;
|
||
var queueIndex = -1;
|
||
|
||
function cleanUpNextTick() {
|
||
if (!draining || !currentQueue) {
|
||
return;
|
||
}
|
||
draining = false;
|
||
if (currentQueue.length) {
|
||
queue = currentQueue.concat(queue);
|
||
} else {
|
||
queueIndex = -1;
|
||
}
|
||
if (queue.length) {
|
||
drainQueue();
|
||
}
|
||
}
|
||
|
||
function drainQueue() {
|
||
if (draining) {
|
||
return;
|
||
}
|
||
var timeout = runTimeout(cleanUpNextTick);
|
||
draining = true;
|
||
|
||
var len = queue.length;
|
||
while(len) {
|
||
currentQueue = queue;
|
||
queue = [];
|
||
while (++queueIndex < len) {
|
||
if (currentQueue) {
|
||
currentQueue[queueIndex].run();
|
||
}
|
||
}
|
||
queueIndex = -1;
|
||
len = queue.length;
|
||
}
|
||
currentQueue = null;
|
||
draining = false;
|
||
runClearTimeout(timeout);
|
||
}
|
||
|
||
process.nextTick = function (fun) {
|
||
var args = new Array(arguments.length - 1);
|
||
if (arguments.length > 1) {
|
||
for (var i = 1; i < arguments.length; i++) {
|
||
args[i - 1] = arguments[i];
|
||
}
|
||
}
|
||
queue.push(new Item(fun, args));
|
||
if (queue.length === 1 && !draining) {
|
||
runTimeout(drainQueue);
|
||
}
|
||
};
|
||
|
||
// v8 likes predictible objects
|
||
function Item(fun, array) {
|
||
this.fun = fun;
|
||
this.array = array;
|
||
}
|
||
Item.prototype.run = function () {
|
||
this.fun.apply(null, this.array);
|
||
};
|
||
process.title = 'browser';
|
||
process.browser = true;
|
||
process.env = {};
|
||
process.argv = [];
|
||
process.version = ''; // empty string to avoid regexp issues
|
||
process.versions = {};
|
||
|
||
function noop() {}
|
||
|
||
process.on = noop;
|
||
process.addListener = noop;
|
||
process.once = noop;
|
||
process.off = noop;
|
||
process.removeListener = noop;
|
||
process.removeAllListeners = noop;
|
||
process.emit = noop;
|
||
process.prependListener = noop;
|
||
process.prependOnceListener = noop;
|
||
|
||
process.listeners = function (name) { return [] }
|
||
|
||
process.binding = function (name) {
|
||
throw new Error('process.binding is not supported');
|
||
};
|
||
|
||
process.cwd = function () { return '/' };
|
||
process.chdir = function (dir) {
|
||
throw new Error('process.chdir is not supported');
|
||
};
|
||
process.umask = function() { return 0; };
|
||
|
||
|
||
/***/ }),
|
||
|
||
/***/ "./node_modules/setimmediate/setImmediate.js":
|
||
/***/ (function(module, exports, __webpack_require__) {
|
||
|
||
/* WEBPACK VAR INJECTION */(function(global, process) {(function (global, undefined) {
|
||
"use strict";
|
||
|
||
if (global.setImmediate) {
|
||
return;
|
||
}
|
||
|
||
var nextHandle = 1; // Spec says greater than zero
|
||
var tasksByHandle = {};
|
||
var currentlyRunningATask = false;
|
||
var doc = global.document;
|
||
var registerImmediate;
|
||
|
||
function setImmediate(callback) {
|
||
// Callback can either be a function or a string
|
||
if (typeof callback !== "function") {
|
||
callback = new Function("" + callback);
|
||
}
|
||
// Copy function arguments
|
||
var args = new Array(arguments.length - 1);
|
||
for (var i = 0; i < args.length; i++) {
|
||
args[i] = arguments[i + 1];
|
||
}
|
||
// Store and register the task
|
||
var task = { callback: callback, args: args };
|
||
tasksByHandle[nextHandle] = task;
|
||
registerImmediate(nextHandle);
|
||
return nextHandle++;
|
||
}
|
||
|
||
function clearImmediate(handle) {
|
||
delete tasksByHandle[handle];
|
||
}
|
||
|
||
function run(task) {
|
||
var callback = task.callback;
|
||
var args = task.args;
|
||
switch (args.length) {
|
||
case 0:
|
||
callback();
|
||
break;
|
||
case 1:
|
||
callback(args[0]);
|
||
break;
|
||
case 2:
|
||
callback(args[0], args[1]);
|
||
break;
|
||
case 3:
|
||
callback(args[0], args[1], args[2]);
|
||
break;
|
||
default:
|
||
callback.apply(undefined, args);
|
||
break;
|
||
}
|
||
}
|
||
|
||
function runIfPresent(handle) {
|
||
// From the spec: "Wait until any invocations of this algorithm started before this one have completed."
|
||
// So if we're currently running a task, we'll need to delay this invocation.
|
||
if (currentlyRunningATask) {
|
||
// Delay by doing a setTimeout. setImmediate was tried instead, but in Firefox 7 it generated a
|
||
// "too much recursion" error.
|
||
setTimeout(runIfPresent, 0, handle);
|
||
} else {
|
||
var task = tasksByHandle[handle];
|
||
if (task) {
|
||
currentlyRunningATask = true;
|
||
try {
|
||
run(task);
|
||
} finally {
|
||
clearImmediate(handle);
|
||
currentlyRunningATask = false;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function installNextTickImplementation() {
|
||
registerImmediate = function(handle) {
|
||
process.nextTick(function () { runIfPresent(handle); });
|
||
};
|
||
}
|
||
|
||
function canUsePostMessage() {
|
||
// The test against `importScripts` prevents this implementation from being installed inside a web worker,
|
||
// where `global.postMessage` means something completely different and can't be used for this purpose.
|
||
if (global.postMessage && !global.importScripts) {
|
||
var postMessageIsAsynchronous = true;
|
||
var oldOnMessage = global.onmessage;
|
||
global.onmessage = function() {
|
||
postMessageIsAsynchronous = false;
|
||
};
|
||
global.postMessage("", "*");
|
||
global.onmessage = oldOnMessage;
|
||
return postMessageIsAsynchronous;
|
||
}
|
||
}
|
||
|
||
function installPostMessageImplementation() {
|
||
// Installs an event handler on `global` for the `message` event: see
|
||
// * https://developer.mozilla.org/en/DOM/window.postMessage
|
||
// * http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
|
||
|
||
var messagePrefix = "setImmediate$" + Math.random() + "$";
|
||
var onGlobalMessage = function(event) {
|
||
if (event.source === global &&
|
||
typeof event.data === "string" &&
|
||
event.data.indexOf(messagePrefix) === 0) {
|
||
runIfPresent(+event.data.slice(messagePrefix.length));
|
||
}
|
||
};
|
||
|
||
if (global.addEventListener) {
|
||
global.addEventListener("message", onGlobalMessage, false);
|
||
} else {
|
||
global.attachEvent("onmessage", onGlobalMessage);
|
||
}
|
||
|
||
registerImmediate = function(handle) {
|
||
global.postMessage(messagePrefix + handle, "*");
|
||
};
|
||
}
|
||
|
||
function installMessageChannelImplementation() {
|
||
var channel = new MessageChannel();
|
||
channel.port1.onmessage = function(event) {
|
||
var handle = event.data;
|
||
runIfPresent(handle);
|
||
};
|
||
|
||
registerImmediate = function(handle) {
|
||
channel.port2.postMessage(handle);
|
||
};
|
||
}
|
||
|
||
function installReadyStateChangeImplementation() {
|
||
var html = doc.documentElement;
|
||
registerImmediate = function(handle) {
|
||
// Create a <script> element; its readystatechange event will be fired asynchronously once it is inserted
|
||
// into the document. Do so, thus queuing up the task. Remember to clean up once it's been called.
|
||
var script = doc.createElement("script");
|
||
script.onreadystatechange = function () {
|
||
runIfPresent(handle);
|
||
script.onreadystatechange = null;
|
||
html.removeChild(script);
|
||
script = null;
|
||
};
|
||
html.appendChild(script);
|
||
};
|
||
}
|
||
|
||
function installSetTimeoutImplementation() {
|
||
registerImmediate = function(handle) {
|
||
setTimeout(runIfPresent, 0, handle);
|
||
};
|
||
}
|
||
|
||
// If supported, we should attach to the prototype of global, since that is where setTimeout et al. live.
|
||
var attachTo = Object.getPrototypeOf && Object.getPrototypeOf(global);
|
||
attachTo = attachTo && attachTo.setTimeout ? attachTo : global;
|
||
|
||
// Don't get fooled by e.g. browserify environments.
|
||
if ({}.toString.call(global.process) === "[object process]") {
|
||
// For Node.js before 0.9
|
||
installNextTickImplementation();
|
||
|
||
} else if (canUsePostMessage()) {
|
||
// For non-IE10 modern browsers
|
||
installPostMessageImplementation();
|
||
|
||
} else if (global.MessageChannel) {
|
||
// For web workers, where supported
|
||
installMessageChannelImplementation();
|
||
|
||
} else if (doc && "onreadystatechange" in doc.createElement("script")) {
|
||
// For IE 6–8
|
||
installReadyStateChangeImplementation();
|
||
|
||
} else {
|
||
// For older browsers
|
||
installSetTimeoutImplementation();
|
||
}
|
||
|
||
attachTo.setImmediate = setImmediate;
|
||
attachTo.clearImmediate = clearImmediate;
|
||
}(typeof self === "undefined" ? typeof global === "undefined" ? this : global : self));
|
||
|
||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("./node_modules/webpack/buildin/global.js"), __webpack_require__("./node_modules/process/browser.js")))
|
||
|
||
/***/ }),
|
||
|
||
/***/ "./node_modules/timers-browserify/main.js":
|
||
/***/ (function(module, exports, __webpack_require__) {
|
||
|
||
/* WEBPACK VAR INJECTION */(function(global) {var scope = (typeof global !== "undefined" && global) ||
|
||
(typeof self !== "undefined" && self) ||
|
||
window;
|
||
var apply = Function.prototype.apply;
|
||
|
||
// DOM APIs, for completeness
|
||
|
||
exports.setTimeout = function() {
|
||
return new Timeout(apply.call(setTimeout, scope, arguments), clearTimeout);
|
||
};
|
||
exports.setInterval = function() {
|
||
return new Timeout(apply.call(setInterval, scope, arguments), clearInterval);
|
||
};
|
||
exports.clearTimeout =
|
||
exports.clearInterval = function(timeout) {
|
||
if (timeout) {
|
||
timeout.close();
|
||
}
|
||
};
|
||
|
||
function Timeout(id, clearFn) {
|
||
this._id = id;
|
||
this._clearFn = clearFn;
|
||
}
|
||
Timeout.prototype.unref = Timeout.prototype.ref = function() {};
|
||
Timeout.prototype.close = function() {
|
||
this._clearFn.call(scope, this._id);
|
||
};
|
||
|
||
// Does not start the time, just sets up the members needed.
|
||
exports.enroll = function(item, msecs) {
|
||
clearTimeout(item._idleTimeoutId);
|
||
item._idleTimeout = msecs;
|
||
};
|
||
|
||
exports.unenroll = function(item) {
|
||
clearTimeout(item._idleTimeoutId);
|
||
item._idleTimeout = -1;
|
||
};
|
||
|
||
exports._unrefActive = exports.active = function(item) {
|
||
clearTimeout(item._idleTimeoutId);
|
||
|
||
var msecs = item._idleTimeout;
|
||
if (msecs >= 0) {
|
||
item._idleTimeoutId = setTimeout(function onTimeout() {
|
||
if (item._onTimeout)
|
||
item._onTimeout();
|
||
}, msecs);
|
||
}
|
||
};
|
||
|
||
// setimmediate attaches itself to the global object
|
||
__webpack_require__("./node_modules/setimmediate/setImmediate.js");
|
||
// On some exotic environments, it's not clear which object `setimmediate` was
|
||
// able to install onto. Search each possibility in the same order as the
|
||
// `setimmediate` library.
|
||
exports.setImmediate = (typeof self !== "undefined" && self.setImmediate) ||
|
||
(typeof global !== "undefined" && global.setImmediate) ||
|
||
(this && this.setImmediate);
|
||
exports.clearImmediate = (typeof self !== "undefined" && self.clearImmediate) ||
|
||
(typeof global !== "undefined" && global.clearImmediate) ||
|
||
(this && this.clearImmediate);
|
||
|
||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("./node_modules/webpack/buildin/global.js")))
|
||
|
||
/***/ }),
|
||
|
||
/***/ "./node_modules/webpack/buildin/global.js":
|
||
/***/ (function(module, exports) {
|
||
|
||
var g;
|
||
|
||
// This works in non-strict mode
|
||
g = (function() {
|
||
return this;
|
||
})();
|
||
|
||
try {
|
||
// This works if eval is allowed (see CSP)
|
||
g = g || Function("return this")() || (1,eval)("this");
|
||
} catch(e) {
|
||
// This works if the window reference is available
|
||
if(typeof window === "object")
|
||
g = window;
|
||
}
|
||
|
||
// g can still be undefined, but nothing to do about it...
|
||
// We return undefined, instead of nothing here, so it's
|
||
// easier to handle this case. if(!global) { ...}
|
||
|
||
module.exports = g;
|
||
|
||
|
||
/***/ }),
|
||
|
||
/***/ "./resources/assets/js/lib/croppie.js":
|
||
/***/ (function(module, exports, __webpack_require__) {
|
||
|
||
/* WEBPACK VAR INJECTION */(function(setImmediate) {var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||
|
||
/*************************
|
||
* Croppie
|
||
* Copyright 2018
|
||
* Foliotek
|
||
* Version: 2.6.2
|
||
*************************/
|
||
(function (root, factory) {
|
||
if (true) {
|
||
// AMD. Register as an anonymous module.
|
||
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [exports], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
|
||
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
|
||
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
|
||
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||
} else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof exports.nodeName !== 'string') {
|
||
// CommonJS
|
||
factory(exports);
|
||
} else {
|
||
// Browser globals
|
||
factory(root.commonJsStrict = {});
|
||
}
|
||
})(this, function (exports) {
|
||
|
||
/* Polyfills */
|
||
if (typeof Promise !== 'function') {
|
||
/*! promise-polyfill 3.1.0 */
|
||
!function (a) {
|
||
function b(a, b) {
|
||
return function () {
|
||
a.apply(b, arguments);
|
||
};
|
||
}function c(a) {
|
||
if ("object" !== _typeof(this)) throw new TypeError("Promises must be constructed via new");if ("function" !== typeof a) throw new TypeError("not a function");this._state = null, this._value = null, this._deferreds = [], i(a, b(e, this), b(f, this));
|
||
}function d(a) {
|
||
var b = this;return null === this._state ? void this._deferreds.push(a) : void k(function () {
|
||
var c = b._state ? a.onFulfilled : a.onRejected;if (null === c) return void (b._state ? a.resolve : a.reject)(b._value);var d;try {
|
||
d = c(b._value);
|
||
} catch (e) {
|
||
return void a.reject(e);
|
||
}a.resolve(d);
|
||
});
|
||
}function e(a) {
|
||
try {
|
||
if (a === this) throw new TypeError("A promise cannot be resolved with itself.");if (a && ("object" === (typeof a === 'undefined' ? 'undefined' : _typeof(a)) || "function" === typeof a)) {
|
||
var c = a.then;if ("function" === typeof c) return void i(b(c, a), b(e, this), b(f, this));
|
||
}this._state = !0, this._value = a, g.call(this);
|
||
} catch (d) {
|
||
f.call(this, d);
|
||
}
|
||
}function f(a) {
|
||
this._state = !1, this._value = a, g.call(this);
|
||
}function g() {
|
||
for (var a = 0, b = this._deferreds.length; b > a; a++) {
|
||
d.call(this, this._deferreds[a]);
|
||
}this._deferreds = null;
|
||
}function h(a, b, c, d) {
|
||
this.onFulfilled = "function" === typeof a ? a : null, this.onRejected = "function" === typeof b ? b : null, this.resolve = c, this.reject = d;
|
||
}function i(a, b, c) {
|
||
var d = !1;try {
|
||
a(function (a) {
|
||
d || (d = !0, b(a));
|
||
}, function (a) {
|
||
d || (d = !0, c(a));
|
||
});
|
||
} catch (e) {
|
||
if (d) return;d = !0, c(e);
|
||
}
|
||
}var j = setTimeout,
|
||
k = "function" === typeof setImmediate && setImmediate || function (a) {
|
||
j(a, 1);
|
||
},
|
||
l = Array.isArray || function (a) {
|
||
return "[object Array]" === Object.prototype.toString.call(a);
|
||
};c.prototype["catch"] = function (a) {
|
||
return this.then(null, a);
|
||
}, c.prototype.then = function (a, b) {
|
||
var e = this;return new c(function (c, f) {
|
||
d.call(e, new h(a, b, c, f));
|
||
});
|
||
}, c.all = function () {
|
||
var a = Array.prototype.slice.call(1 === arguments.length && l(arguments[0]) ? arguments[0] : arguments);return new c(function (b, c) {
|
||
function d(f, g) {
|
||
try {
|
||
if (g && ("object" === (typeof g === 'undefined' ? 'undefined' : _typeof(g)) || "function" === typeof g)) {
|
||
var h = g.then;if ("function" === typeof h) return void h.call(g, function (a) {
|
||
d(f, a);
|
||
}, c);
|
||
}a[f] = g, 0 === --e && b(a);
|
||
} catch (i) {
|
||
c(i);
|
||
}
|
||
}if (0 === a.length) return b([]);for (var e = a.length, f = 0; f < a.length; f++) {
|
||
d(f, a[f]);
|
||
}
|
||
});
|
||
}, c.resolve = function (a) {
|
||
return a && "object" === (typeof a === 'undefined' ? 'undefined' : _typeof(a)) && a.constructor === c ? a : new c(function (b) {
|
||
b(a);
|
||
});
|
||
}, c.reject = function (a) {
|
||
return new c(function (b, c) {
|
||
c(a);
|
||
});
|
||
}, c.race = function (a) {
|
||
return new c(function (b, c) {
|
||
for (var d = 0, e = a.length; e > d; d++) {
|
||
a[d].then(b, c);
|
||
}
|
||
});
|
||
}, c._setImmediateFn = function (a) {
|
||
k = a;
|
||
}, "undefined" !== typeof module && module.exports ? module.exports = c : a.Promise || (a.Promise = c);
|
||
}(this);
|
||
}
|
||
|
||
if (typeof window.CustomEvent !== "function") {
|
||
(function () {
|
||
function CustomEvent(event, params) {
|
||
params = params || { bubbles: false, cancelable: false, detail: undefined };
|
||
var evt = document.createEvent('CustomEvent');
|
||
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
||
return evt;
|
||
}
|
||
CustomEvent.prototype = window.Event.prototype;
|
||
window.CustomEvent = CustomEvent;
|
||
})();
|
||
}
|
||
|
||
if (!HTMLCanvasElement.prototype.toBlob) {
|
||
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
|
||
value: function value(callback, type, quality) {
|
||
var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
|
||
len = binStr.length,
|
||
arr = new Uint8Array(len);
|
||
|
||
for (var i = 0; i < len; i++) {
|
||
arr[i] = binStr.charCodeAt(i);
|
||
}
|
||
|
||
callback(new Blob([arr], { type: type || 'image/png' }));
|
||
}
|
||
});
|
||
}
|
||
/* End Polyfills */
|
||
|
||
var cssPrefixes = ['Webkit', 'Moz', 'ms'],
|
||
emptyStyles = document.createElement('div').style,
|
||
EXIF_NORM = [1, 8, 3, 6],
|
||
EXIF_FLIP = [2, 7, 4, 5],
|
||
CSS_TRANS_ORG,
|
||
CSS_TRANSFORM,
|
||
CSS_USERSELECT;
|
||
|
||
function vendorPrefix(prop) {
|
||
if (prop in emptyStyles) {
|
||
return prop;
|
||
}
|
||
|
||
var capProp = prop[0].toUpperCase() + prop.slice(1),
|
||
i = cssPrefixes.length;
|
||
|
||
while (i--) {
|
||
prop = cssPrefixes[i] + capProp;
|
||
if (prop in emptyStyles) {
|
||
return prop;
|
||
}
|
||
}
|
||
}
|
||
|
||
CSS_TRANSFORM = vendorPrefix('transform');
|
||
CSS_TRANS_ORG = vendorPrefix('transformOrigin');
|
||
CSS_USERSELECT = vendorPrefix('userSelect');
|
||
|
||
function getExifOffset(ornt, rotate) {
|
||
var arr = EXIF_NORM.indexOf(ornt) > -1 ? EXIF_NORM : EXIF_FLIP,
|
||
index = arr.indexOf(ornt),
|
||
offset = rotate / 90 % arr.length; // 180 = 2%4 = 2 shift exif by 2 indexes
|
||
|
||
return arr[(arr.length + index + offset % arr.length) % arr.length];
|
||
}
|
||
|
||
// Credits to : Andrew Dupont - http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
|
||
function deepExtend(destination, source) {
|
||
destination = destination || {};
|
||
for (var property in source) {
|
||
if (source[property] && source[property].constructor && source[property].constructor === Object) {
|
||
destination[property] = destination[property] || {};
|
||
deepExtend(destination[property], source[property]);
|
||
} else {
|
||
destination[property] = source[property];
|
||
}
|
||
}
|
||
return destination;
|
||
}
|
||
|
||
function clone(object) {
|
||
return deepExtend({}, object);
|
||
}
|
||
|
||
function debounce(func, wait, immediate) {
|
||
var timeout;
|
||
return function () {
|
||
var context = this,
|
||
args = arguments;
|
||
var later = function later() {
|
||
timeout = null;
|
||
if (!immediate) func.apply(context, args);
|
||
};
|
||
var callNow = immediate && !timeout;
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(later, wait);
|
||
if (callNow) func.apply(context, args);
|
||
};
|
||
}
|
||
|
||
function dispatchChange(element) {
|
||
if ("createEvent" in document) {
|
||
var evt = document.createEvent("HTMLEvents");
|
||
evt.initEvent("change", false, true);
|
||
element.dispatchEvent(evt);
|
||
} else {
|
||
element.fireEvent("onchange");
|
||
}
|
||
}
|
||
|
||
//http://jsperf.com/vanilla-css
|
||
function css(el, styles, val) {
|
||
if (typeof styles === 'string') {
|
||
var tmp = styles;
|
||
styles = {};
|
||
styles[tmp] = val;
|
||
}
|
||
|
||
for (var prop in styles) {
|
||
el.style[prop] = styles[prop];
|
||
}
|
||
}
|
||
|
||
function addClass(el, c) {
|
||
if (el.classList) {
|
||
el.classList.add(c);
|
||
} else {
|
||
el.className += ' ' + c;
|
||
}
|
||
}
|
||
|
||
function removeClass(el, c) {
|
||
if (el.classList) {
|
||
el.classList.remove(c);
|
||
} else {
|
||
el.className = el.className.replace(c, '');
|
||
}
|
||
}
|
||
|
||
function setAttributes(el, attrs) {
|
||
for (var key in attrs) {
|
||
el.setAttribute(key, attrs[key]);
|
||
}
|
||
}
|
||
|
||
function num(v) {
|
||
return parseInt(v, 10);
|
||
}
|
||
|
||
/* Utilities */
|
||
function loadImage(src, doExif) {
|
||
var img = new Image();
|
||
img.style.opacity = 0;
|
||
return new Promise(function (resolve) {
|
||
function _resolve() {
|
||
img.style.opacity = 1;
|
||
setTimeout(function () {
|
||
resolve(img);
|
||
}, 1);
|
||
}
|
||
|
||
img.removeAttribute('crossOrigin');
|
||
if (src.match(/^https?:\/\/|^\/\//)) {
|
||
img.setAttribute('crossOrigin', 'anonymous');
|
||
}
|
||
|
||
img.onload = function () {
|
||
if (doExif) {
|
||
EXIF.getData(img, function () {
|
||
_resolve();
|
||
});
|
||
} else {
|
||
_resolve();
|
||
}
|
||
};
|
||
img.src = src;
|
||
});
|
||
}
|
||
|
||
function naturalImageDimensions(img, ornt) {
|
||
var w = img.naturalWidth;
|
||
var h = img.naturalHeight;
|
||
var orient = ornt || getExifOrientation(img);
|
||
if (orient && orient >= 5) {
|
||
var x = w;
|
||
w = h;
|
||
h = x;
|
||
}
|
||
return { width: w, height: h };
|
||
}
|
||
|
||
/* CSS Transform Prototype */
|
||
var TRANSLATE_OPTS = {
|
||
'translate3d': {
|
||
suffix: ', 0px'
|
||
},
|
||
'translate': {
|
||
suffix: ''
|
||
}
|
||
};
|
||
var Transform = function Transform(x, y, scale) {
|
||
this.x = parseFloat(x);
|
||
this.y = parseFloat(y);
|
||
this.scale = parseFloat(scale);
|
||
};
|
||
|
||
Transform.parse = function (v) {
|
||
if (v.style) {
|
||
return Transform.parse(v.style[CSS_TRANSFORM]);
|
||
} else if (v.indexOf('matrix') > -1 || v.indexOf('none') > -1) {
|
||
return Transform.fromMatrix(v);
|
||
} else {
|
||
return Transform.fromString(v);
|
||
}
|
||
};
|
||
|
||
Transform.fromMatrix = function (v) {
|
||
var vals = v.substring(7).split(',');
|
||
if (!vals.length || v === 'none') {
|
||
vals = [1, 0, 0, 1, 0, 0];
|
||
}
|
||
|
||
return new Transform(num(vals[4]), num(vals[5]), parseFloat(vals[0]));
|
||
};
|
||
|
||
Transform.fromString = function (v) {
|
||
var values = v.split(') '),
|
||
translate = values[0].substring(Croppie.globals.translate.length + 1).split(','),
|
||
scale = values.length > 1 ? values[1].substring(6) : 1,
|
||
x = translate.length > 1 ? translate[0] : 0,
|
||
y = translate.length > 1 ? translate[1] : 0;
|
||
|
||
return new Transform(x, y, scale);
|
||
};
|
||
|
||
Transform.prototype.toString = function () {
|
||
var suffix = TRANSLATE_OPTS[Croppie.globals.translate].suffix || '';
|
||
return Croppie.globals.translate + '(' + this.x + 'px, ' + this.y + 'px' + suffix + ') scale(' + this.scale + ')';
|
||
};
|
||
|
||
var TransformOrigin = function TransformOrigin(el) {
|
||
if (!el || !el.style[CSS_TRANS_ORG]) {
|
||
this.x = 0;
|
||
this.y = 0;
|
||
return;
|
||
}
|
||
var css = el.style[CSS_TRANS_ORG].split(' ');
|
||
this.x = parseFloat(css[0]);
|
||
this.y = parseFloat(css[1]);
|
||
};
|
||
|
||
TransformOrigin.prototype.toString = function () {
|
||
return this.x + 'px ' + this.y + 'px';
|
||
};
|
||
|
||
function getExifOrientation(img) {
|
||
return img.exifdata ? img.exifdata.Orientation : 1;
|
||
}
|
||
|
||
function drawCanvas(canvas, img, orientation) {
|
||
var width = img.width,
|
||
height = img.height,
|
||
ctx = canvas.getContext('2d');
|
||
|
||
canvas.width = img.width;
|
||
canvas.height = img.height;
|
||
|
||
ctx.save();
|
||
switch (orientation) {
|
||
case 2:
|
||
ctx.translate(width, 0);
|
||
ctx.scale(-1, 1);
|
||
break;
|
||
|
||
case 3:
|
||
ctx.translate(width, height);
|
||
ctx.rotate(180 * Math.PI / 180);
|
||
break;
|
||
|
||
case 4:
|
||
ctx.translate(0, height);
|
||
ctx.scale(1, -1);
|
||
break;
|
||
|
||
case 5:
|
||
canvas.width = height;
|
||
canvas.height = width;
|
||
ctx.rotate(90 * Math.PI / 180);
|
||
ctx.scale(1, -1);
|
||
break;
|
||
|
||
case 6:
|
||
canvas.width = height;
|
||
canvas.height = width;
|
||
ctx.rotate(90 * Math.PI / 180);
|
||
ctx.translate(0, -height);
|
||
break;
|
||
|
||
case 7:
|
||
canvas.width = height;
|
||
canvas.height = width;
|
||
ctx.rotate(-90 * Math.PI / 180);
|
||
ctx.translate(-width, height);
|
||
ctx.scale(1, -1);
|
||
break;
|
||
|
||
case 8:
|
||
canvas.width = height;
|
||
canvas.height = width;
|
||
ctx.translate(0, width);
|
||
ctx.rotate(-90 * Math.PI / 180);
|
||
break;
|
||
}
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
ctx.restore();
|
||
}
|
||
|
||
/* Private Methods */
|
||
function _create() {
|
||
var self = this,
|
||
contClass = 'croppie-container',
|
||
customViewportClass = self.options.viewport.type ? 'cr-vp-' + self.options.viewport.type : null,
|
||
boundary,
|
||
img,
|
||
viewport,
|
||
overlay,
|
||
bw,
|
||
bh;
|
||
|
||
self.options.useCanvas = self.options.enableOrientation || _hasExif.call(self);
|
||
// Properties on class
|
||
self.data = {};
|
||
self.elements = {};
|
||
|
||
boundary = self.elements.boundary = document.createElement('div');
|
||
viewport = self.elements.viewport = document.createElement('div');
|
||
img = self.elements.img = document.createElement('img');
|
||
overlay = self.elements.overlay = document.createElement('div');
|
||
|
||
if (self.options.useCanvas) {
|
||
self.elements.canvas = document.createElement('canvas');
|
||
self.elements.preview = self.elements.canvas;
|
||
} else {
|
||
self.elements.preview = self.elements.img;
|
||
}
|
||
|
||
addClass(boundary, 'cr-boundary');
|
||
boundary.setAttribute('aria-dropeffect', 'none');
|
||
bw = self.options.boundary.width;
|
||
bh = self.options.boundary.height;
|
||
css(boundary, {
|
||
width: bw + (isNaN(bw) ? '' : 'px'),
|
||
height: bh + (isNaN(bh) ? '' : 'px')
|
||
});
|
||
|
||
addClass(viewport, 'cr-viewport');
|
||
if (customViewportClass) {
|
||
addClass(viewport, customViewportClass);
|
||
}
|
||
css(viewport, {
|
||
width: self.options.viewport.width + 'px',
|
||
height: self.options.viewport.height + 'px'
|
||
});
|
||
viewport.setAttribute('tabindex', 0);
|
||
|
||
addClass(self.elements.preview, 'cr-image');
|
||
setAttributes(self.elements.preview, { 'alt': 'preview', 'aria-grabbed': 'false' });
|
||
addClass(overlay, 'cr-overlay');
|
||
|
||
self.element.appendChild(boundary);
|
||
boundary.appendChild(self.elements.preview);
|
||
boundary.appendChild(viewport);
|
||
boundary.appendChild(overlay);
|
||
|
||
addClass(self.element, contClass);
|
||
if (self.options.customClass) {
|
||
addClass(self.element, self.options.customClass);
|
||
}
|
||
|
||
_initDraggable.call(this);
|
||
|
||
if (self.options.enableZoom) {
|
||
_initializeZoom.call(self);
|
||
}
|
||
|
||
// if (self.options.enableOrientation) {
|
||
// _initRotationControls.call(self);
|
||
// }
|
||
|
||
if (self.options.enableResize) {
|
||
_initializeResize.call(self);
|
||
}
|
||
}
|
||
|
||
// function _initRotationControls () {
|
||
// var self = this,
|
||
// wrap, btnLeft, btnRight, iLeft, iRight;
|
||
|
||
// wrap = document.createElement('div');
|
||
// self.elements.orientationBtnLeft = btnLeft = document.createElement('button');
|
||
// self.elements.orientationBtnRight = btnRight = document.createElement('button');
|
||
|
||
// wrap.appendChild(btnLeft);
|
||
// wrap.appendChild(btnRight);
|
||
|
||
// iLeft = document.createElement('i');
|
||
// iRight = document.createElement('i');
|
||
// btnLeft.appendChild(iLeft);
|
||
// btnRight.appendChild(iRight);
|
||
|
||
// addClass(wrap, 'cr-rotate-controls');
|
||
// addClass(btnLeft, 'cr-rotate-l');
|
||
// addClass(btnRight, 'cr-rotate-r');
|
||
|
||
// self.elements.boundary.appendChild(wrap);
|
||
|
||
// btnLeft.addEventListener('click', function () {
|
||
// self.rotate(-90);
|
||
// });
|
||
// btnRight.addEventListener('click', function () {
|
||
// self.rotate(90);
|
||
// });
|
||
// }
|
||
|
||
function _hasExif() {
|
||
return this.options.enableExif && window.EXIF;
|
||
}
|
||
|
||
function _initializeResize() {
|
||
var self = this;
|
||
var wrap = document.createElement('div');
|
||
var isDragging = false;
|
||
var direction;
|
||
var originalX;
|
||
var originalY;
|
||
var minSize = 50;
|
||
var maxWidth;
|
||
var maxHeight;
|
||
var vr;
|
||
var hr;
|
||
|
||
addClass(wrap, 'cr-resizer');
|
||
css(wrap, {
|
||
width: this.options.viewport.width + 'px',
|
||
height: this.options.viewport.height + 'px'
|
||
});
|
||
|
||
if (this.options.resizeControls.height) {
|
||
vr = document.createElement('div');
|
||
addClass(vr, 'cr-resizer-vertical');
|
||
wrap.appendChild(vr);
|
||
}
|
||
|
||
if (this.options.resizeControls.width) {
|
||
hr = document.createElement('div');
|
||
addClass(hr, 'cr-resizer-horisontal');
|
||
wrap.appendChild(hr);
|
||
}
|
||
|
||
function mouseDown(ev) {
|
||
if (ev.button !== undefined && ev.button !== 0) return;
|
||
|
||
ev.preventDefault();
|
||
if (isDragging) {
|
||
return;
|
||
}
|
||
|
||
var overlayRect = self.elements.overlay.getBoundingClientRect();
|
||
|
||
isDragging = true;
|
||
originalX = ev.pageX;
|
||
originalY = ev.pageY;
|
||
direction = ev.currentTarget.className.indexOf('vertical') !== -1 ? 'v' : 'h';
|
||
maxWidth = overlayRect.width;
|
||
maxHeight = overlayRect.height;
|
||
|
||
if (ev.touches) {
|
||
var touches = ev.touches[0];
|
||
originalX = touches.pageX;
|
||
originalY = touches.pageY;
|
||
}
|
||
|
||
window.addEventListener('mousemove', mouseMove);
|
||
window.addEventListener('touchmove', mouseMove);
|
||
window.addEventListener('mouseup', mouseUp);
|
||
window.addEventListener('touchend', mouseUp);
|
||
document.body.style[CSS_USERSELECT] = 'none';
|
||
}
|
||
|
||
function mouseMove(ev) {
|
||
var pageX = ev.pageX;
|
||
var pageY = ev.pageY;
|
||
|
||
ev.preventDefault();
|
||
|
||
if (ev.touches) {
|
||
var touches = ev.touches[0];
|
||
pageX = touches.pageX;
|
||
pageY = touches.pageY;
|
||
}
|
||
|
||
var deltaX = pageX - originalX;
|
||
var deltaY = pageY - originalY;
|
||
var newHeight = self.options.viewport.height + deltaY;
|
||
var newWidth = self.options.viewport.width + deltaX;
|
||
|
||
if (direction === 'v' && newHeight >= minSize && newHeight <= maxHeight) {
|
||
css(wrap, {
|
||
height: newHeight + 'px'
|
||
});
|
||
|
||
self.options.boundary.height += deltaY;
|
||
css(self.elements.boundary, {
|
||
height: self.options.boundary.height + 'px'
|
||
});
|
||
|
||
self.options.viewport.height += deltaY;
|
||
css(self.elements.viewport, {
|
||
height: self.options.viewport.height + 'px'
|
||
});
|
||
} else if (direction === 'h' && newWidth >= minSize && newWidth <= maxWidth) {
|
||
css(wrap, {
|
||
width: newWidth + 'px'
|
||
});
|
||
|
||
self.options.boundary.width += deltaX;
|
||
css(self.elements.boundary, {
|
||
width: self.options.boundary.width + 'px'
|
||
});
|
||
|
||
self.options.viewport.width += deltaX;
|
||
css(self.elements.viewport, {
|
||
width: self.options.viewport.width + 'px'
|
||
});
|
||
}
|
||
|
||
_updateOverlay.call(self);
|
||
_updateZoomLimits.call(self);
|
||
_updateCenterPoint.call(self);
|
||
_triggerUpdate.call(self);
|
||
originalY = pageY;
|
||
originalX = pageX;
|
||
}
|
||
|
||
function mouseUp() {
|
||
isDragging = false;
|
||
window.removeEventListener('mousemove', mouseMove);
|
||
window.removeEventListener('touchmove', mouseMove);
|
||
window.removeEventListener('mouseup', mouseUp);
|
||
window.removeEventListener('touchend', mouseUp);
|
||
document.body.style[CSS_USERSELECT] = '';
|
||
}
|
||
|
||
if (vr) {
|
||
vr.addEventListener('mousedown', mouseDown);
|
||
vr.addEventListener('touchstart', mouseDown);
|
||
}
|
||
|
||
if (hr) {
|
||
hr.addEventListener('mousedown', mouseDown);
|
||
hr.addEventListener('touchstart', mouseDown);
|
||
}
|
||
|
||
this.elements.boundary.appendChild(wrap);
|
||
}
|
||
|
||
function _setZoomerVal(v) {
|
||
if (this.options.enableZoom) {
|
||
var z = this.elements.zoomer,
|
||
val = fix(v, 4);
|
||
|
||
z.value = Math.max(z.min, Math.min(z.max, val));
|
||
}
|
||
}
|
||
|
||
function _initializeZoom() {
|
||
var self = this,
|
||
wrap = self.elements.zoomerWrap = document.createElement('div'),
|
||
zoomer = self.elements.zoomer = document.createElement('input');
|
||
|
||
addClass(wrap, 'cr-slider-wrap');
|
||
addClass(zoomer, 'cr-slider');
|
||
zoomer.type = 'range';
|
||
zoomer.step = '0.0001';
|
||
zoomer.value = 1;
|
||
zoomer.style.display = self.options.showZoomer ? '' : 'none';
|
||
zoomer.setAttribute('aria-label', 'zoom');
|
||
|
||
self.element.appendChild(wrap);
|
||
wrap.appendChild(zoomer);
|
||
|
||
self._currentZoom = 1;
|
||
|
||
function change() {
|
||
_onZoom.call(self, {
|
||
value: parseFloat(zoomer.value),
|
||
origin: new TransformOrigin(self.elements.preview),
|
||
viewportRect: self.elements.viewport.getBoundingClientRect(),
|
||
transform: Transform.parse(self.elements.preview)
|
||
});
|
||
}
|
||
|
||
function scroll(ev) {
|
||
var delta, targetZoom;
|
||
|
||
if (self.options.mouseWheelZoom === 'ctrl' && ev.ctrlKey !== true) {
|
||
return 0;
|
||
} else if (ev.wheelDelta) {
|
||
delta = ev.wheelDelta / 1200; //wheelDelta min: -120 max: 120 // max x 10 x 2
|
||
} else if (ev.deltaY) {
|
||
delta = ev.deltaY / 1060; //deltaY min: -53 max: 53 // max x 10 x 2
|
||
} else if (ev.detail) {
|
||
delta = ev.detail / -60; //delta min: -3 max: 3 // max x 10 x 2
|
||
} else {
|
||
delta = 0;
|
||
}
|
||
|
||
targetZoom = self._currentZoom + delta * self._currentZoom;
|
||
|
||
ev.preventDefault();
|
||
_setZoomerVal.call(self, targetZoom);
|
||
change.call(self);
|
||
}
|
||
|
||
self.elements.zoomer.addEventListener('input', change); // this is being fired twice on keypress
|
||
self.elements.zoomer.addEventListener('change', change);
|
||
|
||
if (self.options.mouseWheelZoom) {
|
||
self.elements.boundary.addEventListener('mousewheel', scroll);
|
||
self.elements.boundary.addEventListener('DOMMouseScroll', scroll);
|
||
}
|
||
}
|
||
|
||
function _onZoom(ui) {
|
||
var self = this,
|
||
transform = ui ? ui.transform : Transform.parse(self.elements.preview),
|
||
vpRect = ui ? ui.viewportRect : self.elements.viewport.getBoundingClientRect(),
|
||
origin = ui ? ui.origin : new TransformOrigin(self.elements.preview);
|
||
|
||
function applyCss() {
|
||
var transCss = {};
|
||
transCss[CSS_TRANSFORM] = transform.toString();
|
||
transCss[CSS_TRANS_ORG] = origin.toString();
|
||
css(self.elements.preview, transCss);
|
||
}
|
||
|
||
self._currentZoom = ui ? ui.value : self._currentZoom;
|
||
transform.scale = self._currentZoom;
|
||
self.elements.zoomer.setAttribute('aria-valuenow', self._currentZoom);
|
||
applyCss();
|
||
|
||
if (self.options.enforceBoundary) {
|
||
var boundaries = _getVirtualBoundaries.call(self, vpRect),
|
||
transBoundaries = boundaries.translate,
|
||
oBoundaries = boundaries.origin;
|
||
|
||
if (transform.x >= transBoundaries.maxX) {
|
||
origin.x = oBoundaries.minX;
|
||
transform.x = transBoundaries.maxX;
|
||
}
|
||
|
||
if (transform.x <= transBoundaries.minX) {
|
||
origin.x = oBoundaries.maxX;
|
||
transform.x = transBoundaries.minX;
|
||
}
|
||
|
||
if (transform.y >= transBoundaries.maxY) {
|
||
origin.y = oBoundaries.minY;
|
||
transform.y = transBoundaries.maxY;
|
||
}
|
||
|
||
if (transform.y <= transBoundaries.minY) {
|
||
origin.y = oBoundaries.maxY;
|
||
transform.y = transBoundaries.minY;
|
||
}
|
||
}
|
||
applyCss();
|
||
_debouncedOverlay.call(self);
|
||
_triggerUpdate.call(self);
|
||
}
|
||
|
||
function _getVirtualBoundaries(viewport) {
|
||
var self = this,
|
||
scale = self._currentZoom,
|
||
vpWidth = viewport.width,
|
||
vpHeight = viewport.height,
|
||
centerFromBoundaryX = self.elements.boundary.clientWidth / 2,
|
||
centerFromBoundaryY = self.elements.boundary.clientHeight / 2,
|
||
imgRect = self.elements.preview.getBoundingClientRect(),
|
||
curImgWidth = imgRect.width,
|
||
curImgHeight = imgRect.height,
|
||
halfWidth = vpWidth / 2,
|
||
halfHeight = vpHeight / 2;
|
||
|
||
var maxX = (halfWidth / scale - centerFromBoundaryX) * -1;
|
||
var minX = maxX - (curImgWidth * (1 / scale) - vpWidth * (1 / scale));
|
||
|
||
var maxY = (halfHeight / scale - centerFromBoundaryY) * -1;
|
||
var minY = maxY - (curImgHeight * (1 / scale) - vpHeight * (1 / scale));
|
||
|
||
var originMinX = 1 / scale * halfWidth;
|
||
var originMaxX = curImgWidth * (1 / scale) - originMinX;
|
||
|
||
var originMinY = 1 / scale * halfHeight;
|
||
var originMaxY = curImgHeight * (1 / scale) - originMinY;
|
||
|
||
return {
|
||
translate: {
|
||
maxX: maxX,
|
||
minX: minX,
|
||
maxY: maxY,
|
||
minY: minY
|
||
},
|
||
origin: {
|
||
maxX: originMaxX,
|
||
minX: originMinX,
|
||
maxY: originMaxY,
|
||
minY: originMinY
|
||
}
|
||
};
|
||
}
|
||
|
||
function _updateCenterPoint() {
|
||
var self = this,
|
||
scale = self._currentZoom,
|
||
data = self.elements.preview.getBoundingClientRect(),
|
||
vpData = self.elements.viewport.getBoundingClientRect(),
|
||
transform = Transform.parse(self.elements.preview.style[CSS_TRANSFORM]),
|
||
pc = new TransformOrigin(self.elements.preview),
|
||
top = vpData.top - data.top + vpData.height / 2,
|
||
left = vpData.left - data.left + vpData.width / 2,
|
||
center = {},
|
||
adj = {};
|
||
|
||
center.y = top / scale;
|
||
center.x = left / scale;
|
||
|
||
adj.y = (center.y - pc.y) * (1 - scale);
|
||
adj.x = (center.x - pc.x) * (1 - scale);
|
||
|
||
transform.x -= adj.x;
|
||
transform.y -= adj.y;
|
||
|
||
var newCss = {};
|
||
newCss[CSS_TRANS_ORG] = center.x + 'px ' + center.y + 'px';
|
||
newCss[CSS_TRANSFORM] = transform.toString();
|
||
css(self.elements.preview, newCss);
|
||
}
|
||
|
||
function _initDraggable() {
|
||
var self = this,
|
||
isDragging = false,
|
||
originalX,
|
||
originalY,
|
||
originalDistance,
|
||
vpRect,
|
||
transform;
|
||
|
||
function assignTransformCoordinates(deltaX, deltaY) {
|
||
var imgRect = self.elements.preview.getBoundingClientRect(),
|
||
top = transform.y + deltaY,
|
||
left = transform.x + deltaX;
|
||
|
||
if (self.options.enforceBoundary) {
|
||
if (vpRect.top > imgRect.top + deltaY && vpRect.bottom < imgRect.bottom + deltaY) {
|
||
transform.y = top;
|
||
}
|
||
|
||
if (vpRect.left > imgRect.left + deltaX && vpRect.right < imgRect.right + deltaX) {
|
||
transform.x = left;
|
||
}
|
||
} else {
|
||
transform.y = top;
|
||
transform.x = left;
|
||
}
|
||
}
|
||
|
||
function toggleGrabState(isDragging) {
|
||
self.elements.preview.setAttribute('aria-grabbed', isDragging);
|
||
self.elements.boundary.setAttribute('aria-dropeffect', isDragging ? 'move' : 'none');
|
||
}
|
||
|
||
function keyDown(ev) {
|
||
var LEFT_ARROW = 37,
|
||
UP_ARROW = 38,
|
||
RIGHT_ARROW = 39,
|
||
DOWN_ARROW = 40;
|
||
|
||
if (ev.shiftKey && (ev.keyCode === UP_ARROW || ev.keyCode === DOWN_ARROW)) {
|
||
var zoom = 0.0;
|
||
if (ev.keyCode === UP_ARROW) {
|
||
zoom = parseFloat(self.elements.zoomer.value, 10) + parseFloat(self.elements.zoomer.step, 10);
|
||
} else {
|
||
zoom = parseFloat(self.elements.zoomer.value, 10) - parseFloat(self.elements.zoomer.step, 10);
|
||
}
|
||
self.setZoom(zoom);
|
||
} else if (self.options.enableKeyMovement && ev.keyCode >= 37 && ev.keyCode <= 40) {
|
||
ev.preventDefault();
|
||
var movement = parseKeyDown(ev.keyCode);
|
||
|
||
transform = Transform.parse(self.elements.preview);
|
||
document.body.style[CSS_USERSELECT] = 'none';
|
||
vpRect = self.elements.viewport.getBoundingClientRect();
|
||
keyMove(movement);
|
||
}
|
||
|
||
function parseKeyDown(key) {
|
||
switch (key) {
|
||
case LEFT_ARROW:
|
||
return [1, 0];
|
||
case UP_ARROW:
|
||
return [0, 1];
|
||
case RIGHT_ARROW:
|
||
return [-1, 0];
|
||
case DOWN_ARROW:
|
||
return [0, -1];
|
||
}
|
||
}
|
||
}
|
||
|
||
function keyMove(movement) {
|
||
var deltaX = movement[0],
|
||
deltaY = movement[1],
|
||
newCss = {};
|
||
|
||
assignTransformCoordinates(deltaX, deltaY);
|
||
|
||
newCss[CSS_TRANSFORM] = transform.toString();
|
||
css(self.elements.preview, newCss);
|
||
_updateOverlay.call(self);
|
||
document.body.style[CSS_USERSELECT] = '';
|
||
_updateCenterPoint.call(self);
|
||
_triggerUpdate.call(self);
|
||
originalDistance = 0;
|
||
}
|
||
|
||
function mouseDown(ev) {
|
||
if (ev.button !== undefined && ev.button !== 0) return;
|
||
|
||
ev.preventDefault();
|
||
if (isDragging) return;
|
||
isDragging = true;
|
||
originalX = ev.pageX;
|
||
originalY = ev.pageY;
|
||
|
||
if (ev.touches) {
|
||
var touches = ev.touches[0];
|
||
originalX = touches.pageX;
|
||
originalY = touches.pageY;
|
||
}
|
||
toggleGrabState(isDragging);
|
||
transform = Transform.parse(self.elements.preview);
|
||
window.addEventListener('mousemove', mouseMove);
|
||
window.addEventListener('touchmove', mouseMove);
|
||
window.addEventListener('mouseup', mouseUp);
|
||
window.addEventListener('touchend', mouseUp);
|
||
document.body.style[CSS_USERSELECT] = 'none';
|
||
vpRect = self.elements.viewport.getBoundingClientRect();
|
||
}
|
||
|
||
function mouseMove(ev) {
|
||
ev.preventDefault();
|
||
var pageX = ev.pageX,
|
||
pageY = ev.pageY;
|
||
|
||
if (ev.touches) {
|
||
var touches = ev.touches[0];
|
||
pageX = touches.pageX;
|
||
pageY = touches.pageY;
|
||
}
|
||
|
||
var deltaX = pageX - originalX,
|
||
deltaY = pageY - originalY,
|
||
newCss = {};
|
||
|
||
if (ev.type === 'touchmove') {
|
||
if (ev.touches.length > 1) {
|
||
var touch1 = ev.touches[0];
|
||
var touch2 = ev.touches[1];
|
||
var dist = Math.sqrt((touch1.pageX - touch2.pageX) * (touch1.pageX - touch2.pageX) + (touch1.pageY - touch2.pageY) * (touch1.pageY - touch2.pageY));
|
||
|
||
if (!originalDistance) {
|
||
originalDistance = dist / self._currentZoom;
|
||
}
|
||
|
||
var scale = dist / originalDistance;
|
||
|
||
_setZoomerVal.call(self, scale);
|
||
dispatchChange(self.elements.zoomer);
|
||
return;
|
||
}
|
||
}
|
||
|
||
assignTransformCoordinates(deltaX, deltaY);
|
||
|
||
newCss[CSS_TRANSFORM] = transform.toString();
|
||
css(self.elements.preview, newCss);
|
||
_updateOverlay.call(self);
|
||
originalY = pageY;
|
||
originalX = pageX;
|
||
}
|
||
|
||
function mouseUp() {
|
||
isDragging = false;
|
||
toggleGrabState(isDragging);
|
||
window.removeEventListener('mousemove', mouseMove);
|
||
window.removeEventListener('touchmove', mouseMove);
|
||
window.removeEventListener('mouseup', mouseUp);
|
||
window.removeEventListener('touchend', mouseUp);
|
||
document.body.style[CSS_USERSELECT] = '';
|
||
_updateCenterPoint.call(self);
|
||
_triggerUpdate.call(self);
|
||
originalDistance = 0;
|
||
}
|
||
|
||
self.elements.overlay.addEventListener('mousedown', mouseDown);
|
||
self.elements.viewport.addEventListener('keydown', keyDown);
|
||
self.elements.overlay.addEventListener('touchstart', mouseDown);
|
||
}
|
||
|
||
function _updateOverlay() {
|
||
if (!this.elements) return; // since this is debounced, it can be fired after destroy
|
||
var self = this,
|
||
boundRect = self.elements.boundary.getBoundingClientRect(),
|
||
imgData = self.elements.preview.getBoundingClientRect();
|
||
|
||
css(self.elements.overlay, {
|
||
width: imgData.width + 'px',
|
||
height: imgData.height + 'px',
|
||
top: imgData.top - boundRect.top + 'px',
|
||
left: imgData.left - boundRect.left + 'px'
|
||
});
|
||
}
|
||
var _debouncedOverlay = debounce(_updateOverlay, 500);
|
||
|
||
function _triggerUpdate() {
|
||
var self = this,
|
||
data = self.get(),
|
||
ev;
|
||
|
||
if (!_isVisible.call(self)) {
|
||
return;
|
||
}
|
||
|
||
self.options.update.call(self, data);
|
||
if (self.$ && typeof Prototype === 'undefined') {
|
||
self.$(self.element).trigger('update.croppie', data);
|
||
} else {
|
||
var ev;
|
||
if (window.CustomEvent) {
|
||
ev = new CustomEvent('update', { detail: data });
|
||
} else {
|
||
ev = document.createEvent('CustomEvent');
|
||
ev.initCustomEvent('update', true, true, data);
|
||
}
|
||
|
||
self.element.dispatchEvent(ev);
|
||
}
|
||
}
|
||
|
||
function _isVisible() {
|
||
return this.elements.preview.offsetHeight > 0 && this.elements.preview.offsetWidth > 0;
|
||
}
|
||
|
||
function _updatePropertiesFromImage() {
|
||
var self = this,
|
||
initialZoom = 1,
|
||
cssReset = {},
|
||
img = self.elements.preview,
|
||
imgData = null,
|
||
transformReset = new Transform(0, 0, initialZoom),
|
||
originReset = new TransformOrigin(),
|
||
isVisible = _isVisible.call(self);
|
||
|
||
if (!isVisible || self.data.bound) {
|
||
// if the croppie isn't visible or it doesn't need binding
|
||
return;
|
||
}
|
||
|
||
self.data.bound = true;
|
||
cssReset[CSS_TRANSFORM] = transformReset.toString();
|
||
cssReset[CSS_TRANS_ORG] = originReset.toString();
|
||
cssReset['opacity'] = 1;
|
||
css(img, cssReset);
|
||
|
||
imgData = self.elements.preview.getBoundingClientRect();
|
||
|
||
self._originalImageWidth = imgData.width;
|
||
self._originalImageHeight = imgData.height;
|
||
self.data.orientation = getExifOrientation(self.elements.img);
|
||
|
||
if (self.options.enableZoom) {
|
||
_updateZoomLimits.call(self, true);
|
||
} else {
|
||
self._currentZoom = initialZoom;
|
||
}
|
||
|
||
transformReset.scale = self._currentZoom;
|
||
cssReset[CSS_TRANSFORM] = transformReset.toString();
|
||
css(img, cssReset);
|
||
|
||
if (self.data.points.length) {
|
||
_bindPoints.call(self, self.data.points);
|
||
} else {
|
||
_centerImage.call(self);
|
||
}
|
||
|
||
_updateCenterPoint.call(self);
|
||
_updateOverlay.call(self);
|
||
}
|
||
|
||
function _updateZoomLimits(initial) {
|
||
var self = this,
|
||
minZoom = 0,
|
||
maxZoom = self.options.maxZoom || 1.5,
|
||
initialZoom,
|
||
defaultInitialZoom,
|
||
zoomer = self.elements.zoomer,
|
||
scale = parseFloat(zoomer.value),
|
||
boundaryData = self.elements.boundary.getBoundingClientRect(),
|
||
imgData = naturalImageDimensions(self.elements.img, self.data.orientation),
|
||
vpData = self.elements.viewport.getBoundingClientRect(),
|
||
minW,
|
||
minH;
|
||
if (self.options.enforceBoundary) {
|
||
minW = vpData.width / imgData.width;
|
||
minH = vpData.height / imgData.height;
|
||
minZoom = Math.max(minW, minH);
|
||
}
|
||
|
||
if (minZoom >= maxZoom) {
|
||
maxZoom = minZoom + 1;
|
||
}
|
||
|
||
zoomer.min = fix(minZoom, 4);
|
||
zoomer.max = fix(maxZoom, 4);
|
||
|
||
if (!initial && (scale < zoomer.min || scale > zoomer.max)) {
|
||
_setZoomerVal.call(self, scale < zoomer.min ? zoomer.min : zoomer.max);
|
||
} else if (initial) {
|
||
defaultInitialZoom = Math.max(boundaryData.width / imgData.width, boundaryData.height / imgData.height);
|
||
initialZoom = self.data.boundZoom !== null ? self.data.boundZoom : defaultInitialZoom;
|
||
_setZoomerVal.call(self, initialZoom);
|
||
}
|
||
|
||
dispatchChange(zoomer);
|
||
}
|
||
|
||
function _bindPoints(points) {
|
||
if (points.length !== 4) {
|
||
throw "Croppie - Invalid number of points supplied: " + points;
|
||
}
|
||
var self = this,
|
||
pointsWidth = points[2] - points[0],
|
||
|
||
// pointsHeight = points[3] - points[1],
|
||
vpData = self.elements.viewport.getBoundingClientRect(),
|
||
boundRect = self.elements.boundary.getBoundingClientRect(),
|
||
vpOffset = {
|
||
left: vpData.left - boundRect.left,
|
||
top: vpData.top - boundRect.top
|
||
},
|
||
scale = vpData.width / pointsWidth,
|
||
originTop = points[1],
|
||
originLeft = points[0],
|
||
transformTop = -1 * points[1] + vpOffset.top,
|
||
transformLeft = -1 * points[0] + vpOffset.left,
|
||
newCss = {};
|
||
|
||
newCss[CSS_TRANS_ORG] = originLeft + 'px ' + originTop + 'px';
|
||
newCss[CSS_TRANSFORM] = new Transform(transformLeft, transformTop, scale).toString();
|
||
css(self.elements.preview, newCss);
|
||
|
||
_setZoomerVal.call(self, scale);
|
||
self._currentZoom = scale;
|
||
}
|
||
|
||
function _centerImage() {
|
||
var self = this,
|
||
imgDim = self.elements.preview.getBoundingClientRect(),
|
||
vpDim = self.elements.viewport.getBoundingClientRect(),
|
||
boundDim = self.elements.boundary.getBoundingClientRect(),
|
||
vpLeft = vpDim.left - boundDim.left,
|
||
vpTop = vpDim.top - boundDim.top,
|
||
w = vpLeft - (imgDim.width - vpDim.width) / 2,
|
||
h = vpTop - (imgDim.height - vpDim.height) / 2,
|
||
transform = new Transform(w, h, self._currentZoom);
|
||
|
||
css(self.elements.preview, CSS_TRANSFORM, transform.toString());
|
||
}
|
||
|
||
function _transferImageToCanvas(customOrientation) {
|
||
var self = this,
|
||
canvas = self.elements.canvas,
|
||
img = self.elements.img,
|
||
ctx = canvas.getContext('2d'),
|
||
exif = _hasExif.call(self),
|
||
customOrientation = self.options.enableOrientation && customOrientation;
|
||
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
canvas.width = img.width;
|
||
canvas.height = img.height;
|
||
|
||
if (exif && !customOrientation) {
|
||
var orientation = getExifOrientation(img);
|
||
drawCanvas(canvas, img, num(orientation || 0, 10));
|
||
} else if (customOrientation) {
|
||
drawCanvas(canvas, img, customOrientation);
|
||
}
|
||
}
|
||
|
||
function _getCanvas(data) {
|
||
var self = this,
|
||
points = data.points,
|
||
left = num(points[0]),
|
||
top = num(points[1]),
|
||
right = num(points[2]),
|
||
bottom = num(points[3]),
|
||
width = right - left,
|
||
height = bottom - top,
|
||
circle = data.circle,
|
||
canvas = document.createElement('canvas'),
|
||
ctx = canvas.getContext('2d'),
|
||
startX = 0,
|
||
startY = 0,
|
||
canvasWidth = data.outputWidth || width,
|
||
canvasHeight = data.outputHeight || height,
|
||
customDimensions = data.outputWidth && data.outputHeight,
|
||
outputWidthRatio = 1,
|
||
outputHeightRatio = 1;
|
||
|
||
canvas.width = canvasWidth;
|
||
canvas.height = canvasHeight;
|
||
|
||
if (data.backgroundColor) {
|
||
ctx.fillStyle = data.backgroundColor;
|
||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||
}
|
||
|
||
if (self.options.enforceBoundary !== false) {
|
||
width = Math.min(width, self._originalImageWidth);
|
||
height = Math.min(height, self._originalImageHeight);
|
||
}
|
||
|
||
// console.table({ left, right, top, bottom, canvasWidth, canvasHeight });
|
||
ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, canvasWidth, canvasHeight);
|
||
if (circle) {
|
||
ctx.fillStyle = '#fff';
|
||
ctx.globalCompositeOperation = 'destination-in';
|
||
ctx.beginPath();
|
||
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2, true);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
}
|
||
return canvas;
|
||
}
|
||
|
||
function _getHtmlResult(data) {
|
||
var points = data.points,
|
||
div = document.createElement('div'),
|
||
img = document.createElement('img'),
|
||
width = points[2] - points[0],
|
||
height = points[3] - points[1];
|
||
|
||
addClass(div, 'croppie-result');
|
||
div.appendChild(img);
|
||
css(img, {
|
||
left: -1 * points[0] + 'px',
|
||
top: -1 * points[1] + 'px'
|
||
});
|
||
img.src = data.url;
|
||
css(div, {
|
||
width: width + 'px',
|
||
height: height + 'px'
|
||
});
|
||
|
||
return div;
|
||
}
|
||
|
||
function _getBase64Result(data) {
|
||
return _getCanvas.call(this, data).toDataURL(data.format, data.quality);
|
||
}
|
||
|
||
function _getBlobResult(data) {
|
||
var self = this;
|
||
return new Promise(function (resolve, reject) {
|
||
_getCanvas.call(self, data).toBlob(function (blob) {
|
||
resolve(blob);
|
||
}, data.format, data.quality);
|
||
});
|
||
}
|
||
|
||
function _replaceImage(img) {
|
||
if (this.elements.img.parentNode) {
|
||
Array.prototype.forEach.call(this.elements.img.classList, function (c) {
|
||
img.classList.add(c);
|
||
});
|
||
this.elements.img.parentNode.replaceChild(img, this.elements.img);
|
||
this.elements.preview = img; // if the img is attached to the DOM, they're not using the canvas
|
||
}
|
||
this.elements.img = img;
|
||
}
|
||
|
||
function _bind(options, cb) {
|
||
var self = this,
|
||
url,
|
||
points = [],
|
||
zoom = null,
|
||
hasExif = _hasExif.call(self);
|
||
|
||
if (typeof options === 'string') {
|
||
url = options;
|
||
options = {};
|
||
} else if (Array.isArray(options)) {
|
||
points = options.slice();
|
||
} else if (typeof options === 'undefined' && self.data.url) {
|
||
//refreshing
|
||
_updatePropertiesFromImage.call(self);
|
||
_triggerUpdate.call(self);
|
||
return null;
|
||
} else {
|
||
url = options.url;
|
||
points = options.points || [];
|
||
zoom = typeof options.zoom === 'undefined' ? null : options.zoom;
|
||
}
|
||
|
||
self.data.bound = false;
|
||
self.data.url = url || self.data.url;
|
||
self.data.boundZoom = zoom;
|
||
|
||
return loadImage(url, hasExif).then(function (img) {
|
||
_replaceImage.call(self, img);
|
||
if (!points.length) {
|
||
var natDim = naturalImageDimensions(img);
|
||
var rect = self.elements.viewport.getBoundingClientRect();
|
||
var aspectRatio = rect.width / rect.height;
|
||
var imgAspectRatio = natDim.width / natDim.height;
|
||
var width, height;
|
||
|
||
if (imgAspectRatio > aspectRatio) {
|
||
height = natDim.height;
|
||
width = height * aspectRatio;
|
||
} else {
|
||
width = natDim.width;
|
||
height = natDim.height / aspectRatio;
|
||
}
|
||
|
||
var x0 = (natDim.width - width) / 2;
|
||
var y0 = (natDim.height - height) / 2;
|
||
var x1 = x0 + width;
|
||
var y1 = y0 + height;
|
||
self.data.points = [x0, y0, x1, y1];
|
||
} else if (self.options.relative) {
|
||
points = [points[0] * img.naturalWidth / 100, points[1] * img.naturalHeight / 100, points[2] * img.naturalWidth / 100, points[3] * img.naturalHeight / 100];
|
||
}
|
||
|
||
self.data.points = points.map(function (p) {
|
||
return parseFloat(p);
|
||
});
|
||
if (self.options.useCanvas) {
|
||
_transferImageToCanvas.call(self, options.orientation || 1);
|
||
}
|
||
_updatePropertiesFromImage.call(self);
|
||
_triggerUpdate.call(self);
|
||
cb && cb();
|
||
}).catch(function (err) {
|
||
console.error("Croppie:" + err);
|
||
});
|
||
}
|
||
|
||
function fix(v, decimalPoints) {
|
||
return parseFloat(v).toFixed(decimalPoints || 0);
|
||
}
|
||
|
||
function _get() {
|
||
var self = this,
|
||
imgData = self.elements.preview.getBoundingClientRect(),
|
||
vpData = self.elements.viewport.getBoundingClientRect(),
|
||
x1 = vpData.left - imgData.left,
|
||
y1 = vpData.top - imgData.top,
|
||
widthDiff = (vpData.width - self.elements.viewport.offsetWidth) / 2,
|
||
//border
|
||
heightDiff = (vpData.height - self.elements.viewport.offsetHeight) / 2,
|
||
x2 = x1 + self.elements.viewport.offsetWidth + widthDiff,
|
||
y2 = y1 + self.elements.viewport.offsetHeight + heightDiff,
|
||
scale = self._currentZoom;
|
||
|
||
if (scale === Infinity || isNaN(scale)) {
|
||
scale = 1;
|
||
}
|
||
|
||
var max = self.options.enforceBoundary ? 0 : Number.NEGATIVE_INFINITY;
|
||
x1 = Math.max(max, x1 / scale);
|
||
y1 = Math.max(max, y1 / scale);
|
||
x2 = Math.max(max, x2 / scale);
|
||
y2 = Math.max(max, y2 / scale);
|
||
|
||
return {
|
||
points: [fix(x1), fix(y1), fix(x2), fix(y2)],
|
||
zoom: scale,
|
||
orientation: self.data.orientation
|
||
};
|
||
}
|
||
|
||
var RESULT_DEFAULTS = {
|
||
type: 'canvas',
|
||
format: 'png',
|
||
quality: 1
|
||
},
|
||
RESULT_FORMATS = ['jpeg', 'webp', 'png'];
|
||
|
||
function _result(options) {
|
||
var self = this,
|
||
data = _get.call(self),
|
||
opts = deepExtend(clone(RESULT_DEFAULTS), clone(options)),
|
||
resultType = typeof options === 'string' ? options : opts.type || 'base64',
|
||
size = opts.size || 'viewport',
|
||
format = opts.format,
|
||
quality = opts.quality,
|
||
backgroundColor = opts.backgroundColor,
|
||
circle = typeof opts.circle === 'boolean' ? opts.circle : self.options.viewport.type === 'circle',
|
||
vpRect = self.elements.viewport.getBoundingClientRect(),
|
||
ratio = vpRect.width / vpRect.height,
|
||
prom;
|
||
|
||
if (size === 'viewport') {
|
||
data.outputWidth = vpRect.width;
|
||
data.outputHeight = vpRect.height;
|
||
} else if ((typeof size === 'undefined' ? 'undefined' : _typeof(size)) === 'object') {
|
||
if (size.width && size.height) {
|
||
data.outputWidth = size.width;
|
||
data.outputHeight = size.height;
|
||
} else if (size.width) {
|
||
data.outputWidth = size.width;
|
||
data.outputHeight = size.width / ratio;
|
||
} else if (size.height) {
|
||
data.outputWidth = size.height * ratio;
|
||
data.outputHeight = size.height;
|
||
}
|
||
}
|
||
|
||
if (RESULT_FORMATS.indexOf(format) > -1) {
|
||
data.format = 'image/' + format;
|
||
data.quality = quality;
|
||
}
|
||
|
||
data.circle = circle;
|
||
data.url = self.data.url;
|
||
data.backgroundColor = backgroundColor;
|
||
|
||
prom = new Promise(function (resolve, reject) {
|
||
switch (resultType.toLowerCase()) {
|
||
case 'rawcanvas':
|
||
resolve(_getCanvas.call(self, data));
|
||
break;
|
||
case 'canvas':
|
||
case 'base64':
|
||
resolve(_getBase64Result.call(self, data));
|
||
break;
|
||
case 'blob':
|
||
_getBlobResult.call(self, data).then(resolve);
|
||
break;
|
||
default:
|
||
resolve(_getHtmlResult.call(self, data));
|
||
break;
|
||
}
|
||
});
|
||
return prom;
|
||
}
|
||
|
||
function _refresh() {
|
||
_updatePropertiesFromImage.call(this);
|
||
}
|
||
|
||
function _rotate(deg) {
|
||
if (!this.options.useCanvas || !this.options.enableOrientation) {
|
||
throw 'Croppie: Cannot rotate without enableOrientation && EXIF.js included';
|
||
}
|
||
|
||
var self = this,
|
||
canvas = self.elements.canvas,
|
||
ornt;
|
||
|
||
self.data.orientation = getExifOffset(self.data.orientation, deg);
|
||
drawCanvas(canvas, self.elements.img, self.data.orientation);
|
||
_updateZoomLimits.call(self);
|
||
_onZoom.call(self);
|
||
copy = null;
|
||
}
|
||
|
||
function _destroy() {
|
||
var self = this;
|
||
self.element.removeChild(self.elements.boundary);
|
||
removeClass(self.element, 'croppie-container');
|
||
if (self.options.enableZoom) {
|
||
self.element.removeChild(self.elements.zoomerWrap);
|
||
}
|
||
delete self.elements;
|
||
}
|
||
|
||
if (window.jQuery) {
|
||
var $ = window.jQuery;
|
||
$.fn.croppie = function (opts) {
|
||
var ot = typeof opts === 'undefined' ? 'undefined' : _typeof(opts);
|
||
|
||
if (ot === 'string') {
|
||
var args = Array.prototype.slice.call(arguments, 1);
|
||
var singleInst = $(this).data('croppie');
|
||
|
||
if (opts === 'get') {
|
||
return singleInst.get();
|
||
} else if (opts === 'result') {
|
||
return singleInst.result.apply(singleInst, args);
|
||
} else if (opts === 'bind') {
|
||
return singleInst.bind.apply(singleInst, args);
|
||
}
|
||
|
||
return this.each(function () {
|
||
var i = $(this).data('croppie');
|
||
if (!i) return;
|
||
|
||
var method = i[opts];
|
||
if ($.isFunction(method)) {
|
||
method.apply(i, args);
|
||
if (opts === 'destroy') {
|
||
$(this).removeData('croppie');
|
||
}
|
||
} else {
|
||
throw 'Croppie ' + opts + ' method not found';
|
||
}
|
||
});
|
||
} else {
|
||
return this.each(function () {
|
||
var i = new Croppie(this, opts);
|
||
i.$ = $;
|
||
$(this).data('croppie', i);
|
||
});
|
||
}
|
||
};
|
||
}
|
||
|
||
function Croppie(element, opts) {
|
||
if (element.className.indexOf('croppie-container') > -1) {
|
||
throw new Error("Croppie: Can't initialize croppie more than once");
|
||
}
|
||
this.element = element;
|
||
this.options = deepExtend(clone(Croppie.defaults), opts);
|
||
|
||
if (this.element.tagName.toLowerCase() === 'img') {
|
||
var origImage = this.element;
|
||
addClass(origImage, 'cr-original-image');
|
||
setAttributes(origImage, { 'aria-hidden': 'true', 'alt': '' });
|
||
var replacementDiv = document.createElement('div');
|
||
this.element.parentNode.appendChild(replacementDiv);
|
||
replacementDiv.appendChild(origImage);
|
||
this.element = replacementDiv;
|
||
this.options.url = this.options.url || origImage.src;
|
||
}
|
||
|
||
_create.call(this);
|
||
if (this.options.url) {
|
||
var bindOpts = {
|
||
url: this.options.url,
|
||
points: this.options.points
|
||
};
|
||
delete this.options['url'];
|
||
delete this.options['points'];
|
||
_bind.call(this, bindOpts);
|
||
}
|
||
}
|
||
|
||
Croppie.defaults = {
|
||
viewport: {
|
||
width: 100,
|
||
height: 100,
|
||
type: 'square'
|
||
},
|
||
boundary: {},
|
||
orientationControls: {
|
||
enabled: true,
|
||
leftClass: '',
|
||
rightClass: ''
|
||
},
|
||
resizeControls: {
|
||
width: true,
|
||
height: true
|
||
},
|
||
customClass: '',
|
||
showZoomer: true,
|
||
enableZoom: true,
|
||
enableResize: false,
|
||
mouseWheelZoom: true,
|
||
enableExif: false,
|
||
enforceBoundary: true,
|
||
enableOrientation: false,
|
||
enableKeyMovement: true,
|
||
update: function update() {}
|
||
};
|
||
|
||
Croppie.globals = {
|
||
translate: 'translate3d'
|
||
};
|
||
|
||
deepExtend(Croppie.prototype, {
|
||
bind: function bind(options, cb) {
|
||
return _bind.call(this, options, cb);
|
||
},
|
||
get: function get() {
|
||
var data = _get.call(this);
|
||
var points = data.points;
|
||
if (this.options.relative) {
|
||
points[0] /= this.elements.img.naturalWidth / 100;
|
||
points[1] /= this.elements.img.naturalHeight / 100;
|
||
points[2] /= this.elements.img.naturalWidth / 100;
|
||
points[3] /= this.elements.img.naturalHeight / 100;
|
||
}
|
||
return data;
|
||
},
|
||
result: function result(type) {
|
||
return _result.call(this, type);
|
||
},
|
||
refresh: function refresh() {
|
||
return _refresh.call(this);
|
||
},
|
||
setZoom: function setZoom(v) {
|
||
_setZoomerVal.call(this, v);
|
||
dispatchChange(this.elements.zoomer);
|
||
},
|
||
rotate: function rotate(deg) {
|
||
_rotate.call(this, deg);
|
||
},
|
||
destroy: function destroy() {
|
||
return _destroy.call(this);
|
||
}
|
||
});
|
||
|
||
exports.Croppie = window.Croppie = Croppie;
|
||
});
|
||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("./node_modules/timers-browserify/main.js").setImmediate))
|
||
|
||
/***/ }),
|
||
|
||
/***/ 6:
|
||
/***/ (function(module, exports, __webpack_require__) {
|
||
|
||
module.exports = __webpack_require__("./resources/assets/js/lib/croppie.js");
|
||
|
||
|
||
/***/ })
|
||
|
||
/******/ }); |