8695 lines
266 KiB
JavaScript
8695 lines
266 KiB
JavaScript
/*
|
|
* Slim v4.19.0 - Image Cropping Made Easy
|
|
* Copyright (c) 2018 Rik Schennink - http://slimimagecropper.com
|
|
*/
|
|
define(function() {
|
|
|
|
// custom event polyfill for IE10
|
|
(function() {
|
|
if ( typeof window.CustomEvent === 'function' ) return false;
|
|
|
|
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;
|
|
})();
|
|
/*
|
|
* JavaScript Load Image
|
|
* https://github.com/blueimp/JavaScript-Load-Image
|
|
*
|
|
* Copyright 2011, Sebastian Tschan
|
|
* https://blueimp.net
|
|
*
|
|
* Licensed under the MIT license:
|
|
* http://www.opensource.org/licenses/MIT
|
|
*/
|
|
|
|
/*global define, module, window, document, URL, webkitURL, FileReader */
|
|
|
|
// Loads an image for a given File object.
|
|
// Invokes the callback with an img or optional canvas
|
|
// element (if supported by the browser) as parameter:
|
|
var loadImage = function (file, callback, options) {
|
|
var img = document.createElement('img')
|
|
var url
|
|
var oUrl
|
|
img.onerror = callback
|
|
img.onload = function () {
|
|
if (oUrl && !(options && options.noRevoke)) {
|
|
loadImage.revokeObjectURL(oUrl)
|
|
}
|
|
if (callback) {
|
|
callback(loadImage.scale(img, options))
|
|
}
|
|
}
|
|
if (loadImage.isInstanceOf('Blob', file) ||
|
|
// Files are also Blob instances, but some browsers
|
|
// (Firefox 3.6) support the File API but not Blobs:
|
|
loadImage.isInstanceOf('File', file)) {
|
|
url = oUrl = loadImage.createObjectURL(file)
|
|
// Store the file type for resize processing:
|
|
img._type = file.type
|
|
} else if (typeof file === 'string') {
|
|
url = file
|
|
if (options && options.crossOrigin) {
|
|
img.crossOrigin = options.crossOrigin
|
|
}
|
|
} else {
|
|
return false
|
|
}
|
|
if (url) {
|
|
img.src = url
|
|
return img
|
|
}
|
|
return loadImage.readFile(file, function (e) {
|
|
var target = e.target
|
|
if (target && target.result) {
|
|
img.src = target.result
|
|
} else {
|
|
if (callback) {
|
|
callback(e)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// The check for URL.revokeObjectURL fixes an issue with Opera 12,
|
|
// which provides URL.createObjectURL but doesn't properly implement it:
|
|
var urlAPI = (window.createObjectURL && window) ||
|
|
(window.URL && URL.revokeObjectURL && URL) ||
|
|
(window.webkitURL && webkitURL)
|
|
|
|
loadImage.isInstanceOf = function (type, obj) {
|
|
// Cross-frame instanceof check
|
|
return Object.prototype.toString.call(obj) === '[object ' + type + ']'
|
|
}
|
|
|
|
// Transform image coordinates, allows to override e.g.
|
|
// the canvas orientation based on the orientation option,
|
|
// gets canvas, options passed as arguments:
|
|
loadImage.transformCoordinates = function () {
|
|
return
|
|
}
|
|
|
|
// Returns transformed options, allows to override e.g.
|
|
// maxWidth, maxHeight and crop options based on the aspectRatio.
|
|
// gets img, options passed as arguments:
|
|
loadImage.getTransformedOptions = function (img, options) {
|
|
var aspectRatio = options.aspectRatio
|
|
var newOptions
|
|
var i
|
|
var width
|
|
var height
|
|
if (!aspectRatio) {
|
|
return options
|
|
}
|
|
newOptions = {}
|
|
for (i in options) {
|
|
if (options.hasOwnProperty(i)) {
|
|
newOptions[i] = options[i]
|
|
}
|
|
}
|
|
newOptions.crop = true
|
|
width = img.naturalWidth || img.width
|
|
height = img.naturalHeight || img.height
|
|
if (width / height > aspectRatio) {
|
|
newOptions.maxWidth = height * aspectRatio
|
|
newOptions.maxHeight = height
|
|
} else {
|
|
newOptions.maxWidth = width
|
|
newOptions.maxHeight = width / aspectRatio
|
|
}
|
|
return newOptions
|
|
}
|
|
|
|
// Canvas render method, allows to implement a different rendering algorithm:
|
|
loadImage.renderImageToCanvas = function (
|
|
canvas,
|
|
img,
|
|
sourceX,
|
|
sourceY,
|
|
sourceWidth,
|
|
sourceHeight,
|
|
destX,
|
|
destY,
|
|
destWidth,
|
|
destHeight
|
|
) {
|
|
canvas.getContext('2d').drawImage(
|
|
img,
|
|
sourceX,
|
|
sourceY,
|
|
sourceWidth,
|
|
sourceHeight,
|
|
destX,
|
|
destY,
|
|
destWidth,
|
|
destHeight
|
|
)
|
|
return canvas
|
|
}
|
|
|
|
// This method is used to determine if the target image
|
|
// should be a canvas element:
|
|
loadImage.hasCanvasOption = function (options) {
|
|
return options.canvas || options.crop || !!options.aspectRatio
|
|
}
|
|
|
|
// Scales and/or crops the given image (img or canvas HTML element)
|
|
// using the given options.
|
|
// Returns a canvas object if the browser supports canvas
|
|
// and the hasCanvasOption method returns true or a canvas
|
|
// object is passed as image, else the scaled image:
|
|
loadImage.scale = function (img, options) {
|
|
options = options || {}
|
|
var canvas = document.createElement('canvas')
|
|
var useCanvas = img.getContext ||
|
|
(loadImage.hasCanvasOption(options) && canvas.getContext)
|
|
var width = img.naturalWidth || img.width
|
|
var height = img.naturalHeight || img.height
|
|
var destWidth = width
|
|
var destHeight = height
|
|
var maxWidth
|
|
var maxHeight
|
|
var minWidth
|
|
var minHeight
|
|
var sourceWidth
|
|
var sourceHeight
|
|
var sourceX
|
|
var sourceY
|
|
var pixelRatio
|
|
var downsamplingRatio
|
|
var tmp
|
|
function scaleUp () {
|
|
var scale = Math.max(
|
|
(minWidth || destWidth) / destWidth,
|
|
(minHeight || destHeight) / destHeight
|
|
)
|
|
if (scale > 1) {
|
|
destWidth *= scale
|
|
destHeight *= scale
|
|
}
|
|
}
|
|
function scaleDown () {
|
|
var scale = Math.min(
|
|
(maxWidth || destWidth) / destWidth,
|
|
(maxHeight || destHeight) / destHeight
|
|
)
|
|
if (scale < 1) {
|
|
destWidth *= scale
|
|
destHeight *= scale
|
|
}
|
|
}
|
|
if (useCanvas) {
|
|
options = loadImage.getTransformedOptions(img, options)
|
|
sourceX = options.left || 0
|
|
sourceY = options.top || 0
|
|
if (options.sourceWidth) {
|
|
sourceWidth = options.sourceWidth
|
|
if (options.right !== undefined && options.left === undefined) {
|
|
sourceX = width - sourceWidth - options.right
|
|
}
|
|
} else {
|
|
sourceWidth = width - sourceX - (options.right || 0)
|
|
}
|
|
if (options.sourceHeight) {
|
|
sourceHeight = options.sourceHeight
|
|
if (options.bottom !== undefined && options.top === undefined) {
|
|
sourceY = height - sourceHeight - options.bottom
|
|
}
|
|
} else {
|
|
sourceHeight = height - sourceY - (options.bottom || 0)
|
|
}
|
|
destWidth = sourceWidth
|
|
destHeight = sourceHeight
|
|
}
|
|
maxWidth = options.maxWidth
|
|
maxHeight = options.maxHeight
|
|
minWidth = options.minWidth
|
|
minHeight = options.minHeight
|
|
if (useCanvas && maxWidth && maxHeight && options.crop) {
|
|
destWidth = maxWidth
|
|
destHeight = maxHeight
|
|
tmp = sourceWidth / sourceHeight - maxWidth / maxHeight
|
|
if (tmp < 0) {
|
|
sourceHeight = maxHeight * sourceWidth / maxWidth
|
|
if (options.top === undefined && options.bottom === undefined) {
|
|
sourceY = (height - sourceHeight) / 2
|
|
}
|
|
} else if (tmp > 0) {
|
|
sourceWidth = maxWidth * sourceHeight / maxHeight
|
|
if (options.left === undefined && options.right === undefined) {
|
|
sourceX = (width - sourceWidth) / 2
|
|
}
|
|
}
|
|
} else {
|
|
if (options.contain || options.cover) {
|
|
minWidth = maxWidth = maxWidth || minWidth
|
|
minHeight = maxHeight = maxHeight || minHeight
|
|
}
|
|
if (options.cover) {
|
|
scaleDown()
|
|
scaleUp()
|
|
} else {
|
|
scaleUp()
|
|
scaleDown()
|
|
}
|
|
}
|
|
if (useCanvas) {
|
|
pixelRatio = options.pixelRatio
|
|
if (pixelRatio > 1) {
|
|
canvas.style.width = destWidth + 'px'
|
|
canvas.style.height = destHeight + 'px'
|
|
destWidth *= pixelRatio
|
|
destHeight *= pixelRatio
|
|
canvas.getContext('2d').scale(pixelRatio, pixelRatio)
|
|
}
|
|
downsamplingRatio = options.downsamplingRatio
|
|
if (downsamplingRatio > 0 && downsamplingRatio < 1 &&
|
|
destWidth < sourceWidth && destHeight < sourceHeight) {
|
|
while (sourceWidth * downsamplingRatio > destWidth) {
|
|
canvas.width = sourceWidth * downsamplingRatio
|
|
canvas.height = sourceHeight * downsamplingRatio
|
|
loadImage.renderImageToCanvas(
|
|
canvas,
|
|
img,
|
|
sourceX,
|
|
sourceY,
|
|
sourceWidth,
|
|
sourceHeight,
|
|
0,
|
|
0,
|
|
canvas.width,
|
|
canvas.height
|
|
)
|
|
sourceWidth = canvas.width
|
|
sourceHeight = canvas.height
|
|
img = document.createElement('canvas')
|
|
img.width = sourceWidth
|
|
img.height = sourceHeight
|
|
loadImage.renderImageToCanvas(
|
|
img,
|
|
canvas,
|
|
0,
|
|
0,
|
|
sourceWidth,
|
|
sourceHeight,
|
|
0,
|
|
0,
|
|
sourceWidth,
|
|
sourceHeight
|
|
)
|
|
}
|
|
}
|
|
canvas.width = destWidth
|
|
canvas.height = destHeight
|
|
loadImage.transformCoordinates(
|
|
canvas,
|
|
options
|
|
)
|
|
return loadImage.renderImageToCanvas(
|
|
canvas,
|
|
img,
|
|
sourceX,
|
|
sourceY,
|
|
sourceWidth,
|
|
sourceHeight,
|
|
0,
|
|
0,
|
|
destWidth,
|
|
destHeight
|
|
)
|
|
}
|
|
img.width = destWidth
|
|
img.height = destHeight
|
|
return img
|
|
}
|
|
|
|
loadImage.createObjectURL = function (file) {
|
|
return urlAPI ? urlAPI.createObjectURL(file) : false
|
|
}
|
|
|
|
loadImage.revokeObjectURL = function (url) {
|
|
return urlAPI ? urlAPI.revokeObjectURL(url) : false
|
|
}
|
|
|
|
// Loads a given File object via FileReader interface,
|
|
// invokes the callback with the event object (load or error).
|
|
// The result can be read via event.target.result:
|
|
loadImage.readFile = function (file, callback, method) {
|
|
if (window.FileReader) {
|
|
var fileReader = new FileReader()
|
|
fileReader.onload = fileReader.onerror = callback
|
|
method = method || 'readAsDataURL'
|
|
if (fileReader[method]) {
|
|
fileReader[method](file)
|
|
return fileReader
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
var originalHasCanvasOption = loadImage.hasCanvasOption
|
|
var originalTransformCoordinates = loadImage.transformCoordinates
|
|
var originalGetTransformedOptions = loadImage.getTransformedOptions
|
|
|
|
// This method is used to determine if the target image
|
|
// should be a canvas element:
|
|
loadImage.hasCanvasOption = function (options) {
|
|
return !!options.orientation ||
|
|
originalHasCanvasOption.call(loadImage, options)
|
|
}
|
|
|
|
// Transform image orientation based on
|
|
// the given EXIF orientation option:
|
|
loadImage.transformCoordinates = function (canvas, options) {
|
|
originalTransformCoordinates.call(loadImage, canvas, options)
|
|
var ctx = canvas.getContext('2d')
|
|
var width = canvas.width
|
|
var height = canvas.height
|
|
var styleWidth = canvas.style.width
|
|
var styleHeight = canvas.style.height
|
|
var orientation = options.orientation
|
|
if (!orientation || orientation > 8) {
|
|
return
|
|
}
|
|
if (orientation > 4) {
|
|
canvas.width = height
|
|
canvas.height = width
|
|
canvas.style.width = styleHeight
|
|
canvas.style.height = styleWidth
|
|
}
|
|
switch (orientation) {
|
|
case 2:
|
|
// horizontal flip
|
|
ctx.translate(width, 0)
|
|
ctx.scale(-1, 1)
|
|
break
|
|
case 3:
|
|
// 180° rotate left
|
|
ctx.translate(width, height)
|
|
ctx.rotate(Math.PI)
|
|
break
|
|
case 4:
|
|
// vertical flip
|
|
ctx.translate(0, height)
|
|
ctx.scale(1, -1)
|
|
break
|
|
case 5:
|
|
// vertical flip + 90 rotate right
|
|
ctx.rotate(0.5 * Math.PI)
|
|
ctx.scale(1, -1)
|
|
break
|
|
case 6:
|
|
// 90° rotate right
|
|
ctx.rotate(0.5 * Math.PI)
|
|
ctx.translate(0, -height)
|
|
break
|
|
case 7:
|
|
// horizontal flip + 90 rotate right
|
|
ctx.rotate(0.5 * Math.PI)
|
|
ctx.translate(width, -height)
|
|
ctx.scale(-1, 1)
|
|
break
|
|
case 8:
|
|
// 90° rotate left
|
|
ctx.rotate(-0.5 * Math.PI)
|
|
ctx.translate(-width, 0)
|
|
break
|
|
}
|
|
}
|
|
|
|
// Transforms coordinate and dimension options
|
|
// based on the given orientation option:
|
|
loadImage.getTransformedOptions = function (img, opts) {
|
|
var options = originalGetTransformedOptions.call(loadImage, img, opts)
|
|
var orientation = options.orientation
|
|
var newOptions
|
|
var i
|
|
if (!orientation || orientation > 8 || orientation === 1) {
|
|
return options
|
|
}
|
|
newOptions = {}
|
|
for (i in options) {
|
|
if (options.hasOwnProperty(i)) {
|
|
newOptions[i] = options[i]
|
|
}
|
|
}
|
|
switch (options.orientation) {
|
|
case 2:
|
|
// horizontal flip
|
|
newOptions.left = options.right
|
|
newOptions.right = options.left
|
|
break
|
|
case 3:
|
|
// 180° rotate left
|
|
newOptions.left = options.right
|
|
newOptions.top = options.bottom
|
|
newOptions.right = options.left
|
|
newOptions.bottom = options.top
|
|
break
|
|
case 4:
|
|
// vertical flip
|
|
newOptions.top = options.bottom
|
|
newOptions.bottom = options.top
|
|
break
|
|
case 5:
|
|
// vertical flip + 90 rotate right
|
|
newOptions.left = options.top
|
|
newOptions.top = options.left
|
|
newOptions.right = options.bottom
|
|
newOptions.bottom = options.right
|
|
break
|
|
case 6:
|
|
// 90° rotate right
|
|
newOptions.left = options.top
|
|
newOptions.top = options.right
|
|
newOptions.right = options.bottom
|
|
newOptions.bottom = options.left
|
|
break
|
|
case 7:
|
|
// horizontal flip + 90 rotate right
|
|
newOptions.left = options.bottom
|
|
newOptions.top = options.right
|
|
newOptions.right = options.top
|
|
newOptions.bottom = options.left
|
|
break
|
|
case 8:
|
|
// 90° rotate left
|
|
newOptions.left = options.bottom
|
|
newOptions.top = options.left
|
|
newOptions.right = options.top
|
|
newOptions.bottom = options.right
|
|
break
|
|
}
|
|
if (options.orientation > 4) {
|
|
newOptions.maxWidth = options.maxHeight
|
|
newOptions.maxHeight = options.maxWidth
|
|
newOptions.minWidth = options.minHeight
|
|
newOptions.minHeight = options.minWidth
|
|
newOptions.sourceWidth = options.sourceHeight
|
|
newOptions.sourceHeight = options.sourceWidth
|
|
}
|
|
return newOptions
|
|
}
|
|
|
|
var hasblobSlice = window.Blob && (Blob.prototype.slice ||
|
|
Blob.prototype.webkitSlice || Blob.prototype.mozSlice)
|
|
|
|
loadImage.blobSlice = hasblobSlice && function () {
|
|
var slice = this.slice || this.webkitSlice || this.mozSlice
|
|
return slice.apply(this, arguments)
|
|
}
|
|
|
|
loadImage.metaDataParsers = {
|
|
jpeg: {
|
|
0xffe1: [] // APP1 marker
|
|
}
|
|
}
|
|
|
|
// Parses image meta data and calls the callback with an object argument
|
|
// with the following properties:
|
|
// * imageHead: The complete image head as ArrayBuffer (Uint8Array for IE10)
|
|
// The options arguments accepts an object and supports the following properties:
|
|
// * maxMetaDataSize: Defines the maximum number of bytes to parse.
|
|
// * disableImageHead: Disables creating the imageHead property.
|
|
loadImage.parseMetaData = function (file, callback, options) {
|
|
options = options || {}
|
|
var that = this
|
|
// 256 KiB should contain all EXIF/ICC/IPTC segments:
|
|
var maxMetaDataSize = options.maxMetaDataSize || 262144
|
|
var data = {}
|
|
var noMetaData = !(window.DataView && file && file.size >= 12 &&
|
|
file.type === 'image/jpeg' && loadImage.blobSlice)
|
|
if (noMetaData || !loadImage.readFile(
|
|
loadImage.blobSlice.call(file, 0, maxMetaDataSize),
|
|
function (e) {
|
|
if (e.target.error) {
|
|
// FileReader error
|
|
//console.log(e.target.error)
|
|
callback(data)
|
|
return
|
|
}
|
|
// Note on endianness:
|
|
// Since the marker and length bytes in JPEG files are always
|
|
// stored in big endian order, we can leave the endian parameter
|
|
// of the DataView methods undefined, defaulting to big endian.
|
|
var buffer = e.target.result
|
|
var dataView = new DataView(buffer)
|
|
var offset = 2
|
|
var maxOffset = dataView.byteLength - 4
|
|
var headLength = offset
|
|
var markerBytes
|
|
var markerLength
|
|
var parsers
|
|
var i
|
|
// Check for the JPEG marker (0xffd8):
|
|
if (dataView.getUint16(0) === 0xffd8) {
|
|
while (offset < maxOffset) {
|
|
markerBytes = dataView.getUint16(offset)
|
|
// Search for APPn (0xffeN) and COM (0xfffe) markers,
|
|
// which contain application-specific meta-data like
|
|
// Exif, ICC and IPTC data and text comments:
|
|
if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) ||
|
|
markerBytes === 0xfffe) {
|
|
// The marker bytes (2) are always followed by
|
|
// the length bytes (2), indicating the length of the
|
|
// marker segment, which includes the length bytes,
|
|
// but not the marker bytes, so we add 2:
|
|
markerLength = dataView.getUint16(offset + 2) + 2
|
|
if (offset + markerLength > dataView.byteLength) {
|
|
//console.log('Invalid meta data: Invalid segment size.')
|
|
break
|
|
}
|
|
parsers = loadImage.metaDataParsers.jpeg[markerBytes]
|
|
if (parsers) {
|
|
for (i = 0; i < parsers.length; i += 1) {
|
|
parsers[i].call(
|
|
that,
|
|
dataView,
|
|
offset,
|
|
markerLength,
|
|
data,
|
|
options
|
|
)
|
|
}
|
|
}
|
|
offset += markerLength
|
|
headLength = offset
|
|
} else {
|
|
// Not an APPn or COM marker, probably safe to
|
|
// assume that this is the end of the meta data
|
|
break
|
|
}
|
|
}
|
|
// Meta length must be longer than JPEG marker (2)
|
|
// plus APPn marker (2), followed by length bytes (2):
|
|
if (!options.disableImageHead && headLength > 6) {
|
|
if (buffer.slice) {
|
|
data.imageHead = buffer.slice(0, headLength)
|
|
} else {
|
|
// Workaround for IE10, which does not yet
|
|
// support ArrayBuffer.slice:
|
|
data.imageHead = new Uint8Array(buffer)
|
|
.subarray(0, headLength)
|
|
}
|
|
}
|
|
} else {
|
|
//console.log('Invalid JPEG file: Missing JPEG marker.')
|
|
}
|
|
callback(data)
|
|
},
|
|
'readAsArrayBuffer'
|
|
)) {
|
|
callback(data)
|
|
}
|
|
}
|
|
|
|
loadImage.ExifMap = function () {
|
|
return this
|
|
}
|
|
|
|
loadImage.ExifMap.prototype.map = {
|
|
'Orientation': 0x0112
|
|
}
|
|
|
|
loadImage.ExifMap.prototype.get = function (id) {
|
|
return this[id] || this[this.map[id]]
|
|
}
|
|
|
|
loadImage.getExifThumbnail = function (dataView, offset, length) {
|
|
var hexData,
|
|
i,
|
|
b
|
|
if (!length || offset + length > dataView.byteLength) {
|
|
//console.log('Invalid Exif data: Invalid thumbnail data.')
|
|
return
|
|
}
|
|
hexData = []
|
|
for (i = 0; i < length; i += 1) {
|
|
b = dataView.getUint8(offset + i)
|
|
hexData.push((b < 16 ? '0' : '') + b.toString(16))
|
|
}
|
|
return 'data:image/jpeg,%' + hexData.join('%')
|
|
}
|
|
|
|
loadImage.exifTagTypes = {
|
|
// byte, 8-bit unsigned int:
|
|
1: {
|
|
getValue: function (dataView, dataOffset) {
|
|
return dataView.getUint8(dataOffset)
|
|
},
|
|
size: 1
|
|
},
|
|
// ascii, 8-bit byte:
|
|
2: {
|
|
getValue: function (dataView, dataOffset) {
|
|
return String.fromCharCode(dataView.getUint8(dataOffset))
|
|
},
|
|
size: 1,
|
|
ascii: true
|
|
},
|
|
// short, 16 bit int:
|
|
3: {
|
|
getValue: function (dataView, dataOffset, littleEndian) {
|
|
return dataView.getUint16(dataOffset, littleEndian)
|
|
},
|
|
size: 2
|
|
},
|
|
// long, 32 bit int:
|
|
4: {
|
|
getValue: function (dataView, dataOffset, littleEndian) {
|
|
return dataView.getUint32(dataOffset, littleEndian)
|
|
},
|
|
size: 4
|
|
},
|
|
// rational = two long values, first is numerator, second is denominator:
|
|
5: {
|
|
getValue: function (dataView, dataOffset, littleEndian) {
|
|
return dataView.getUint32(dataOffset, littleEndian) /
|
|
dataView.getUint32(dataOffset + 4, littleEndian)
|
|
},
|
|
size: 8
|
|
},
|
|
// slong, 32 bit signed int:
|
|
9: {
|
|
getValue: function (dataView, dataOffset, littleEndian) {
|
|
return dataView.getInt32(dataOffset, littleEndian)
|
|
},
|
|
size: 4
|
|
},
|
|
// srational, two slongs, first is numerator, second is denominator:
|
|
10: {
|
|
getValue: function (dataView, dataOffset, littleEndian) {
|
|
return dataView.getInt32(dataOffset, littleEndian) /
|
|
dataView.getInt32(dataOffset + 4, littleEndian)
|
|
},
|
|
size: 8
|
|
}
|
|
}
|
|
// undefined, 8-bit byte, value depending on field:
|
|
loadImage.exifTagTypes[7] = loadImage.exifTagTypes[1]
|
|
|
|
loadImage.getExifValue = function (dataView, tiffOffset, offset, type, length, littleEndian) {
|
|
var tagType = loadImage.exifTagTypes[type]
|
|
var tagSize
|
|
var dataOffset
|
|
var values
|
|
var i
|
|
var str
|
|
var c
|
|
if (!tagType) {
|
|
//console.log('Invalid Exif data: Invalid tag type.')
|
|
return
|
|
}
|
|
tagSize = tagType.size * length
|
|
// Determine if the value is contained in the dataOffset bytes,
|
|
// or if the value at the dataOffset is a pointer to the actual data:
|
|
dataOffset = tagSize > 4
|
|
? tiffOffset + dataView.getUint32(offset + 8, littleEndian)
|
|
: (offset + 8)
|
|
if (dataOffset + tagSize > dataView.byteLength) {
|
|
//console.log('Invalid Exif data: Invalid data offset.')
|
|
return
|
|
}
|
|
if (length === 1) {
|
|
return tagType.getValue(dataView, dataOffset, littleEndian)
|
|
}
|
|
values = []
|
|
for (i = 0; i < length; i += 1) {
|
|
values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian)
|
|
}
|
|
if (tagType.ascii) {
|
|
str = ''
|
|
// Concatenate the chars:
|
|
for (i = 0; i < values.length; i += 1) {
|
|
c = values[i]
|
|
// Ignore the terminating NULL byte(s):
|
|
if (c === '\u0000') {
|
|
break
|
|
}
|
|
str += c
|
|
}
|
|
return str
|
|
}
|
|
return values
|
|
}
|
|
|
|
loadImage.parseExifTag = function (dataView, tiffOffset, offset, littleEndian, data) {
|
|
var tag = dataView.getUint16(offset, littleEndian)
|
|
data.exif[tag] = loadImage.getExifValue(
|
|
dataView,
|
|
tiffOffset,
|
|
offset,
|
|
dataView.getUint16(offset + 2, littleEndian), // tag type
|
|
dataView.getUint32(offset + 4, littleEndian), // tag length
|
|
littleEndian
|
|
)
|
|
}
|
|
|
|
loadImage.parseExifTags = function (dataView, tiffOffset, dirOffset, littleEndian, data) {
|
|
var tagsNumber,
|
|
dirEndOffset,
|
|
i
|
|
if (dirOffset + 6 > dataView.byteLength) {
|
|
//console.log('Invalid Exif data: Invalid directory offset.')
|
|
return
|
|
}
|
|
tagsNumber = dataView.getUint16(dirOffset, littleEndian)
|
|
dirEndOffset = dirOffset + 2 + 12 * tagsNumber
|
|
if (dirEndOffset + 4 > dataView.byteLength) {
|
|
//console.log('Invalid Exif data: Invalid directory size.')
|
|
return
|
|
}
|
|
for (i = 0; i < tagsNumber; i += 1) {
|
|
this.parseExifTag(
|
|
dataView,
|
|
tiffOffset,
|
|
dirOffset + 2 + 12 * i, // tag offset
|
|
littleEndian,
|
|
data
|
|
)
|
|
}
|
|
// Return the offset to the next directory:
|
|
return dataView.getUint32(dirEndOffset, littleEndian)
|
|
}
|
|
|
|
loadImage.parseExifData = function (dataView, offset, length, data, options) {
|
|
if (options.disableExif) {
|
|
return
|
|
}
|
|
var tiffOffset = offset + 10
|
|
var littleEndian
|
|
var dirOffset
|
|
var thumbnailData
|
|
// Check for the ASCII code for "Exif" (0x45786966):
|
|
if (dataView.getUint32(offset + 4) !== 0x45786966) {
|
|
// No Exif data, might be XMP data instead
|
|
return
|
|
}
|
|
if (tiffOffset + 8 > dataView.byteLength) {
|
|
//console.log('Invalid Exif data: Invalid segment size.')
|
|
return
|
|
}
|
|
// Check for the two null bytes:
|
|
if (dataView.getUint16(offset + 8) !== 0x0000) {
|
|
//console.log('Invalid Exif data: Missing byte alignment offset.')
|
|
return
|
|
}
|
|
// Check the byte alignment:
|
|
switch (dataView.getUint16(tiffOffset)) {
|
|
case 0x4949:
|
|
littleEndian = true
|
|
break
|
|
case 0x4D4D:
|
|
littleEndian = false
|
|
break
|
|
default:
|
|
//console.log('Invalid Exif data: Invalid byte alignment marker.')
|
|
return
|
|
}
|
|
// Check for the TIFF tag marker (0x002A):
|
|
if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
|
|
//console.log('Invalid Exif data: Missing TIFF marker.')
|
|
return
|
|
}
|
|
// Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
|
|
dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian)
|
|
// Create the exif object to store the tags:
|
|
data.exif = new loadImage.ExifMap()
|
|
// Parse the tags of the main image directory and retrieve the
|
|
// offset to the next directory, usually the thumbnail directory:
|
|
dirOffset = loadImage.parseExifTags(
|
|
dataView,
|
|
tiffOffset,
|
|
tiffOffset + dirOffset,
|
|
littleEndian,
|
|
data
|
|
)
|
|
if (dirOffset && !options.disableExifThumbnail) {
|
|
thumbnailData = {exif: {}}
|
|
dirOffset = loadImage.parseExifTags(
|
|
dataView,
|
|
tiffOffset,
|
|
tiffOffset + dirOffset,
|
|
littleEndian,
|
|
thumbnailData
|
|
)
|
|
// Check for JPEG Thumbnail offset:
|
|
if (thumbnailData.exif[0x0201]) {
|
|
data.exif.Thumbnail = loadImage.getExifThumbnail(
|
|
dataView,
|
|
tiffOffset + thumbnailData.exif[0x0201],
|
|
thumbnailData.exif[0x0202] // Thumbnail data length
|
|
)
|
|
}
|
|
}
|
|
// Check for Exif Sub IFD Pointer:
|
|
if (data.exif[0x8769] && !options.disableExifSub) {
|
|
loadImage.parseExifTags(
|
|
dataView,
|
|
tiffOffset,
|
|
tiffOffset + data.exif[0x8769], // directory offset
|
|
littleEndian,
|
|
data
|
|
)
|
|
}
|
|
// Check for GPS Info IFD Pointer:
|
|
if (data.exif[0x8825] && !options.disableExifGps) {
|
|
loadImage.parseExifTags(
|
|
dataView,
|
|
tiffOffset,
|
|
tiffOffset + data.exif[0x8825], // directory offset
|
|
littleEndian,
|
|
data
|
|
)
|
|
}
|
|
}
|
|
|
|
// Registers the Exif parser for the APP1 JPEG meta data segment:
|
|
loadImage.metaDataParsers.jpeg[0xffe1].push(loadImage.parseExifData)
|
|
var snabbt = (function() {
|
|
|
|
var tickRequests = [];
|
|
var runningAnimations = [];
|
|
var completedAnimations = [];
|
|
var transformProperty = 'transform';
|
|
|
|
// Find which vendor prefix to use
|
|
var styles = window.getComputedStyle(document.documentElement, '');
|
|
var vendorPrefix = (Array.prototype.slice
|
|
.call(styles)
|
|
.join('')
|
|
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
|
|
)[1];
|
|
if(vendorPrefix === 'webkit')
|
|
transformProperty = 'webkitTransform';
|
|
|
|
/* Entry point, only function to be called by user */
|
|
var snabbt = function(arg1, arg2, arg3) {
|
|
|
|
var elements = arg1;
|
|
|
|
// If argument is an Array or a NodeList or other list type that can be iterable.
|
|
// Loop through and start one animation for each element.
|
|
if(elements.length !== undefined) {
|
|
var aggregateChainer = {
|
|
chainers: [],
|
|
then: function(opts) {
|
|
return this.snabbt(opts);
|
|
},
|
|
snabbt: function(opts) {
|
|
var len = this.chainers.length;
|
|
this.chainers.forEach(function(chainer, index) {
|
|
chainer.snabbt(preprocessOptions(opts, index, len));
|
|
});
|
|
return aggregateChainer;
|
|
},
|
|
setValue: function(value) {
|
|
this.chainers.forEach(function(chainer) {
|
|
chainer.setValue(value);
|
|
});
|
|
return aggregateChainer;
|
|
},
|
|
finish: function() {
|
|
this.chainers.forEach(function(chainer) {
|
|
chainer.finish();
|
|
});
|
|
return aggregateChainer;
|
|
},
|
|
rollback: function() {
|
|
this.chainers.forEach(function(chainer) {
|
|
chainer.rollback();
|
|
});
|
|
return aggregateChainer;
|
|
}
|
|
};
|
|
|
|
for(var i=0, len=elements.length;i<len;++i) {
|
|
if(typeof arg2 == 'string')
|
|
aggregateChainer.chainers.push(snabbtSingleElement(elements[i], arg2, preprocessOptions(arg3, i, len)));
|
|
else
|
|
aggregateChainer.chainers.push(snabbtSingleElement(elements[i], preprocessOptions(arg2, i, len), arg3));
|
|
}
|
|
return aggregateChainer;
|
|
} else {
|
|
if(typeof arg2 == 'string')
|
|
return snabbtSingleElement(elements, arg2, preprocessOptions(arg3, 0, 1));
|
|
else
|
|
return snabbtSingleElement(elements, preprocessOptions(arg2, 0, 1), arg3);
|
|
}
|
|
};
|
|
|
|
var preprocessOptions = function(options, index, len) {
|
|
if(!options)
|
|
return options;
|
|
var clone = cloneObject(options);
|
|
|
|
if(isFunction(options.delay)) {
|
|
clone.delay = options.delay(index, len);
|
|
}
|
|
|
|
if(isFunction(options.callback)) {
|
|
clone.complete = function() {
|
|
options.callback.call(this, index, len);
|
|
};
|
|
}
|
|
|
|
var hasAllDoneCallback = isFunction(options.allDone);
|
|
var hasCompleteCallback = isFunction(options.complete);
|
|
|
|
if(hasCompleteCallback || hasAllDoneCallback) {
|
|
clone.complete = function() {
|
|
if(hasCompleteCallback) {
|
|
options.complete.call(this, index, len);
|
|
}
|
|
if(hasAllDoneCallback && (index == len - 1)) {
|
|
options.allDone();
|
|
}
|
|
};
|
|
}
|
|
|
|
if(isFunction(options.valueFeeder)) {
|
|
clone.valueFeeder = function(i, matrix) {
|
|
return options.valueFeeder(i, matrix, index, len);
|
|
};
|
|
}
|
|
if(isFunction(options.easing)) {
|
|
clone.easing = function(i) {
|
|
return options.easing(i, index, len);
|
|
};
|
|
}
|
|
|
|
var properties = [
|
|
'position',
|
|
'rotation',
|
|
'skew',
|
|
'rotationPost',
|
|
'scale',
|
|
'width',
|
|
'height',
|
|
'opacity',
|
|
'fromPosition',
|
|
'fromRotation',
|
|
'fromSkew',
|
|
'fromRotationPost',
|
|
'fromScale',
|
|
'fromWidth',
|
|
'fromHeight',
|
|
'fromOpacity',
|
|
'transformOrigin',
|
|
'duration',
|
|
'delay'
|
|
];
|
|
|
|
properties.forEach(function(property) {
|
|
if(isFunction(options[property])) {
|
|
clone[property] = options[property](index, len);
|
|
}
|
|
});
|
|
|
|
return clone;
|
|
};
|
|
|
|
var snabbtSingleElement = function(element, arg2, arg3) {
|
|
|
|
if(arg2 === 'attention') {
|
|
return setupAttentionAnimation(element, arg3);
|
|
}
|
|
|
|
if(arg2 === 'stop') {
|
|
return stopAnimation(element);
|
|
}
|
|
|
|
if(arg2 === 'detach') {
|
|
return detachChildren(element);
|
|
}
|
|
|
|
var options = arg2;
|
|
|
|
// Remove orphaned end states
|
|
clearOphanedEndStates();
|
|
|
|
// If there is a running or past completed animation with element, use that end state as start state
|
|
var currentState = currentAnimationState(element);
|
|
var start = currentState;
|
|
// from has precendance over current animation state
|
|
start = stateFromOptions(options, start, true);
|
|
var end = cloneObject(currentState);
|
|
end = stateFromOptions(options, end);
|
|
|
|
var animOptions = setupAnimationOptions(start, end, options);
|
|
var animation = createAnimation(animOptions);
|
|
|
|
runningAnimations.push([element, animation]);
|
|
|
|
animation.updateElement(element, true);
|
|
var queue = [];
|
|
var chainer = {
|
|
snabbt: function(opts) {
|
|
queue.unshift(preprocessOptions(opts, 0, 1));
|
|
return chainer;
|
|
},
|
|
then: function(opts) {
|
|
return this.snabbt(opts);
|
|
}
|
|
};
|
|
|
|
function tick(time) {
|
|
animation.tick(time);
|
|
animation.updateElement(element);
|
|
if(animation.isStopped())
|
|
return;
|
|
|
|
if(!animation.completed())
|
|
return queueTick(tick);
|
|
|
|
if(options.loop > 1 && !animation.isStopped()) {
|
|
// Loop current animation
|
|
options.loop -= 1;
|
|
animation.restart();
|
|
queueTick(tick);
|
|
} else {
|
|
if(options.complete) {
|
|
options.complete.call(element);
|
|
}
|
|
|
|
// Start next animation in queue
|
|
if(queue.length) {
|
|
options = queue.pop();
|
|
|
|
start = stateFromOptions(options, end, true);
|
|
end = stateFromOptions(options, cloneObject(end));
|
|
options = setupAnimationOptions(start, end, options);
|
|
|
|
animation = createAnimation(options);
|
|
runningAnimations.push([element, animation]);
|
|
|
|
animation.tick(time);
|
|
queueTick(tick);
|
|
}
|
|
}
|
|
}
|
|
|
|
queueTick(tick);
|
|
// Manual animations are not chainable, instead an animation controller object is returned
|
|
// with setValue, finish and rollback methods
|
|
if(options.manual)
|
|
return animation;
|
|
return chainer;
|
|
};
|
|
|
|
var setupAttentionAnimation = function(element, options) {
|
|
var movement = stateFromOptions(options, createState({}));
|
|
options.movement = movement;
|
|
var animation = createAttentionAnimation(options);
|
|
|
|
runningAnimations.push([element, animation]);
|
|
function tick(time) {
|
|
animation.tick(time);
|
|
animation.updateElement(element);
|
|
if(!animation.completed()) {
|
|
queueTick(tick);
|
|
} else {
|
|
if(options.callback) {
|
|
options.callback(element);
|
|
}
|
|
if(options.loop && options.loop > 1) {
|
|
options.loop--;
|
|
animation.restart();
|
|
queueTick(tick);
|
|
}
|
|
}
|
|
}
|
|
queueTick(tick);
|
|
};
|
|
|
|
var stopAnimation = function(element) {
|
|
for(var i= 0,len=runningAnimations.length;i<len;++i) {
|
|
var currentAnimation = runningAnimations[i];
|
|
var animatedElement = currentAnimation[0];
|
|
var animation = currentAnimation[1];
|
|
|
|
if(animatedElement === element) {
|
|
animation.stop();
|
|
}
|
|
}
|
|
};
|
|
|
|
var indexOfElement = function(arr, element) {
|
|
for(var i=0,len=arr.length;i<len;++i) {
|
|
if (arr[i][0]===element) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
|
|
var detachChildren = function(element) {
|
|
|
|
var elements = [];
|
|
var animations = runningAnimations.concat(completedAnimations);
|
|
var el;
|
|
var i;
|
|
var len = animations.length;
|
|
|
|
for(i=0;i<len;++i) {
|
|
el = animations[i][0];
|
|
if (element.contains(el) || element === el) {
|
|
elements.push(el);
|
|
}
|
|
}
|
|
|
|
len=elements.length;
|
|
for(i=0;i<len;++i) {
|
|
detachElement(elements[i]);
|
|
}
|
|
|
|
};
|
|
|
|
var detachElement = function(element) {
|
|
|
|
// stop animations
|
|
stopAnimation(element);
|
|
|
|
// remove
|
|
var index = indexOfElement(runningAnimations, element);
|
|
if (index >= 0) {
|
|
runningAnimations.splice(index,1);
|
|
}
|
|
|
|
index = indexOfElement(completedAnimations, element);
|
|
if (index >= 0) {
|
|
completedAnimations.splice(index,1);
|
|
}
|
|
|
|
};
|
|
|
|
var findAnimationState = function(animationList, element) {
|
|
for(var i=0,len=animationList.length;i<len;++i) {
|
|
var currentAnimation = animationList[i];
|
|
var animatedElement = currentAnimation[0];
|
|
var animation = currentAnimation[1];
|
|
|
|
if(animatedElement === element) {
|
|
var state = animation.getCurrentState();
|
|
animation.stop();
|
|
return state;
|
|
}
|
|
}
|
|
};
|
|
|
|
var clearOphanedEndStates = function() {
|
|
completedAnimations = completedAnimations.filter(function(animation) {
|
|
return (findUltimateAncestor(animation[0]).body);
|
|
});
|
|
};
|
|
|
|
var findUltimateAncestor = function(node) {
|
|
var ancestor = node;
|
|
while(ancestor.parentNode) {
|
|
ancestor = ancestor.parentNode;
|
|
}
|
|
return ancestor;
|
|
};
|
|
|
|
/**
|
|
* Returns the current state of element if there is an ongoing or previously finished
|
|
* animation releated to it. Will also call stop on the animation.
|
|
* TODO: The stopping of the animation is better put somewhere else
|
|
*/
|
|
var currentAnimationState = function(element) {
|
|
// Check if a completed animation is stored for this element
|
|
var state = findAnimationState(runningAnimations, element);
|
|
if(state)
|
|
return state;
|
|
|
|
return findAnimationState(completedAnimations, element);
|
|
};
|
|
|
|
/**
|
|
* Parses an animation configuration object and returns a State instance
|
|
*/
|
|
var stateFromOptions = function(options, state, useFromPrefix) {
|
|
if (!state) {
|
|
state = createState({
|
|
position: [0, 0, 0],
|
|
rotation: [0, 0, 0],
|
|
rotationPost: [0, 0, 0],
|
|
scale: [1, 1],
|
|
skew: [0, 0]
|
|
});
|
|
}
|
|
var position = 'position';
|
|
var rotation = 'rotation';
|
|
var skew = 'skew';
|
|
var rotationPost = 'rotationPost';
|
|
var scale = 'scale';
|
|
var scalePost = 'scalePost';
|
|
var width = 'width';
|
|
var height = 'height';
|
|
var opacity = 'opacity';
|
|
|
|
if(useFromPrefix) {
|
|
position = 'fromPosition';
|
|
rotation = 'fromRotation';
|
|
skew = 'fromSkew';
|
|
rotationPost = 'fromRotationPost';
|
|
scale = 'fromScale';
|
|
scalePost = 'fromScalePost';
|
|
width = 'fromWidth';
|
|
height = 'fromHeight';
|
|
opacity = 'fromOpacity';
|
|
}
|
|
|
|
state.position = optionOrDefault(options[position], state.position);
|
|
state.rotation = optionOrDefault(options[rotation], state.rotation);
|
|
state.rotationPost = optionOrDefault(options[rotationPost], state.rotationPost);
|
|
state.skew = optionOrDefault(options[skew], state.skew);
|
|
state.scale = optionOrDefault(options[scale], state.scale);
|
|
state.scalePost = optionOrDefault(options[scalePost], state.scalePost);
|
|
state.opacity = options[opacity];
|
|
state.width = options[width];
|
|
state.height = options[height];
|
|
|
|
return state;
|
|
};
|
|
|
|
var setupAnimationOptions = function(start, end, options) {
|
|
options.startState = start;
|
|
options.endState = end;
|
|
return options;
|
|
};
|
|
|
|
var polyFillrAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { return setTimeout(callback, 1000 / 60); };
|
|
|
|
var queueTick = function(func) {
|
|
if(tickRequests.length === 0)
|
|
polyFillrAF(tickAnimations);
|
|
tickRequests.push(func);
|
|
};
|
|
|
|
var tickAnimations = function(time) {
|
|
var len = tickRequests.length;
|
|
for(var i=0;i<len;++i) {
|
|
tickRequests[i](time);
|
|
}
|
|
tickRequests.splice(0, len);
|
|
|
|
var finishedAnimations = runningAnimations.filter(function(animation) {
|
|
return animation[1].completed();
|
|
});
|
|
|
|
// See if there are any previously completed animations on the same element, if so, remove it before merging
|
|
completedAnimations = completedAnimations.filter(function(animation) {
|
|
for(var i=0,len=finishedAnimations.length;i<len;++i) {
|
|
if(animation[0] === finishedAnimations[i][0]) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
});
|
|
|
|
completedAnimations = completedAnimations.concat(finishedAnimations);
|
|
|
|
runningAnimations = runningAnimations.filter(function(animation) {
|
|
return !animation[1].completed();
|
|
});
|
|
|
|
if(tickRequests.length !== 0)
|
|
polyFillrAF(tickAnimations);
|
|
};
|
|
|
|
|
|
// Class for handling animation between two states
|
|
var createAnimation = function(options) {
|
|
var startState = options.startState;
|
|
var endState = options.endState;
|
|
var duration = optionOrDefault(options.duration, 500);
|
|
var delay = optionOrDefault(options.delay, 0);
|
|
var perspective = options.perspective;
|
|
var easing = createEaser(optionOrDefault(options.easing, 'linear'), options);
|
|
var currentState = duration === 0 ? endState.clone() : startState.clone();
|
|
var transformOrigin = options.transformOrigin;
|
|
currentState.transformOrigin = options.transformOrigin;
|
|
|
|
var startTime = 0;
|
|
var currentTime = 0;
|
|
var stopped = false;
|
|
var started = false;
|
|
|
|
// Manual related
|
|
var manual = options.manual;
|
|
var manualValue = 0;
|
|
var manualDelayFactor = delay / duration;
|
|
var manualCallback;
|
|
|
|
var tweener;
|
|
// Setup tweener
|
|
if(options.valueFeeder) {
|
|
tweener = createValueFeederTweener(options.valueFeeder,
|
|
startState,
|
|
endState,
|
|
currentState);
|
|
} else {
|
|
tweener = createStateTweener(startState, endState, currentState);
|
|
}
|
|
|
|
// Public api
|
|
return {
|
|
stop: function() {
|
|
stopped = true;
|
|
},
|
|
isStopped: function() {
|
|
return stopped;
|
|
},
|
|
|
|
finish: function(callback) {
|
|
manual = false;
|
|
var manualDuration = duration * manualValue;
|
|
startTime = currentTime - manualDuration;
|
|
manualCallback = callback;
|
|
easing.resetFrom = manualValue;
|
|
},
|
|
|
|
rollback: function(callback) {
|
|
manual = false;
|
|
tweener.setReverse();
|
|
var manualDuration = duration * (1 - manualValue);
|
|
startTime = currentTime - manualDuration;
|
|
manualCallback = callback;
|
|
easing.resetFrom = manualValue;
|
|
},
|
|
|
|
restart: function() {
|
|
// Restart timer
|
|
startTime = undefined;
|
|
easing.resetFrom(0);
|
|
},
|
|
|
|
tick: function(time) {
|
|
if(stopped)
|
|
return;
|
|
|
|
if(manual) {
|
|
currentTime = time;
|
|
this.updateCurrentTransform();
|
|
return;
|
|
}
|
|
|
|
// If first tick, set startTime
|
|
if(!startTime) {
|
|
startTime = time;
|
|
}
|
|
if(time - startTime > delay) {
|
|
started = true;
|
|
currentTime = time - delay;
|
|
|
|
var curr = Math.min(Math.max(0.0, currentTime - startTime), duration);
|
|
easing.tick(curr / duration);
|
|
this.updateCurrentTransform();
|
|
if(this.completed() && manualCallback) {
|
|
manualCallback();
|
|
}
|
|
}
|
|
},
|
|
|
|
getCurrentState: function() {
|
|
return currentState;
|
|
},
|
|
|
|
setValue: function(_manualValue) {
|
|
started = true;
|
|
manualValue = Math.min(Math.max(_manualValue, 0.0001), 1 + manualDelayFactor);
|
|
},
|
|
|
|
updateCurrentTransform: function() {
|
|
var tweenValue = easing.getValue();
|
|
if(manual) {
|
|
var val = Math.max(0.00001, manualValue - manualDelayFactor);
|
|
easing.tick(val);
|
|
tweenValue = easing.getValue();
|
|
}
|
|
tweener.tween(tweenValue);
|
|
},
|
|
|
|
completed: function() {
|
|
if(stopped)
|
|
return true;
|
|
if(startTime === 0) {
|
|
return false;
|
|
}
|
|
return easing.completed();
|
|
},
|
|
|
|
updateElement: function(element, forceUpdate) {
|
|
if(!started && !forceUpdate)
|
|
return;
|
|
var matrix = tweener.asMatrix();
|
|
var properties = tweener.getProperties();
|
|
updateElementTransform(element, matrix, perspective);
|
|
updateElementProperties(element, properties);
|
|
}
|
|
};
|
|
};
|
|
|
|
// ------------------------------
|
|
// End Time animation
|
|
// ------------------------------
|
|
|
|
// ------------------------
|
|
// -- AttentionAnimation --
|
|
// ------------------------
|
|
|
|
var createAttentionAnimation = function(options) {
|
|
var movement = options.movement;
|
|
options.initialVelocity = 0.1;
|
|
options.equilibriumPosition = 0;
|
|
var spring = createSpringEasing(options);
|
|
var stopped = false;
|
|
var tweenPosition = movement.position;
|
|
var tweenRotation = movement.rotation;
|
|
var tweenRotationPost = movement.rotationPost;
|
|
var tweenScale = movement.scale;
|
|
var tweenSkew = movement.skew;
|
|
|
|
var currentMovement = createState({
|
|
position: tweenPosition ? [0, 0, 0] : undefined,
|
|
rotation: tweenRotation ? [0, 0, 0] : undefined,
|
|
rotationPost: tweenRotationPost ? [0, 0, 0] : undefined,
|
|
scale: tweenScale ? [0, 0] : undefined,
|
|
skew: tweenSkew ? [0, 0] : undefined,
|
|
});
|
|
|
|
// Public API
|
|
return {
|
|
stop: function() {
|
|
stopped = true;
|
|
},
|
|
|
|
isStopped: function(time) {
|
|
return stopped;
|
|
},
|
|
|
|
tick: function(time) {
|
|
if(stopped)
|
|
return;
|
|
if(spring.equilibrium)
|
|
return;
|
|
spring.tick();
|
|
|
|
this.updateMovement();
|
|
},
|
|
|
|
updateMovement:function() {
|
|
var value = spring.getValue();
|
|
if(tweenPosition) {
|
|
currentMovement.position[0] = movement.position[0] * value;
|
|
currentMovement.position[1] = movement.position[1] * value;
|
|
currentMovement.position[2] = movement.position[2] * value;
|
|
}
|
|
if(tweenRotation) {
|
|
currentMovement.rotation[0] = movement.rotation[0] * value;
|
|
currentMovement.rotation[1] = movement.rotation[1] * value;
|
|
currentMovement.rotation[2] = movement.rotation[2] * value;
|
|
}
|
|
if(tweenRotationPost) {
|
|
currentMovement.rotationPost[0] = movement.rotationPost[0] * value;
|
|
currentMovement.rotationPost[1] = movement.rotationPost[1] * value;
|
|
currentMovement.rotationPost[2] = movement.rotationPost[2] * value;
|
|
}
|
|
if(tweenScale) {
|
|
currentMovement.scale[0] = 1 + movement.scale[0] * value;
|
|
currentMovement.scale[1] = 1 + movement.scale[1] * value;
|
|
}
|
|
|
|
if(tweenSkew) {
|
|
currentMovement.skew[0] = movement.skew[0] * value;
|
|
currentMovement.skew[1] = movement.skew[1] * value;
|
|
}
|
|
},
|
|
|
|
updateElement: function(element) {
|
|
updateElementTransform(element, currentMovement.asMatrix());
|
|
updateElementProperties(element, currentMovement.getProperties());
|
|
},
|
|
|
|
getCurrentState: function() {
|
|
return currentMovement;
|
|
},
|
|
|
|
completed: function() {
|
|
return spring.equilibrium || stopped;
|
|
},
|
|
|
|
restart: function() {
|
|
// Restart spring
|
|
spring = createSpringEasing(options);
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
/**********
|
|
* Easings *
|
|
***********/
|
|
|
|
var linearEasing = function(value) {
|
|
return value;
|
|
};
|
|
|
|
var ease = function(value) {
|
|
return (Math.cos(value*Math.PI + Math.PI) + 1)/2;
|
|
};
|
|
|
|
var easeIn = function(value) {
|
|
return value*value;
|
|
};
|
|
|
|
var easeOut = function(value) {
|
|
return -Math.pow(value - 1, 2) + 1;
|
|
};
|
|
|
|
var createSpringEasing = function(options) {
|
|
var position = optionOrDefault(options.startPosition, 0);
|
|
var equilibriumPosition = optionOrDefault(options.equilibriumPosition, 1);
|
|
var velocity = optionOrDefault(options.initialVelocity, 0);
|
|
var springConstant = optionOrDefault(options.springConstant, 0.8);
|
|
var deceleration = optionOrDefault(options.springDeceleration, 0.9);
|
|
var mass = optionOrDefault(options.springMass, 10);
|
|
|
|
var equilibrium = false;
|
|
|
|
// Public API
|
|
return {
|
|
|
|
tick: function(value) {
|
|
if(value === 0.0)
|
|
return;
|
|
if(equilibrium)
|
|
return;
|
|
var springForce = -(position - equilibriumPosition) * springConstant;
|
|
// f = m * a
|
|
// a = f / m
|
|
var a = springForce / mass;
|
|
// s = v * t
|
|
// t = 1 ( for now )
|
|
velocity += a;
|
|
position += velocity;
|
|
|
|
// Deceleration
|
|
velocity *= deceleration;
|
|
|
|
if(Math.abs(position - equilibriumPosition) < 0.001 && Math.abs(velocity) < 0.001) {
|
|
equilibrium = true;
|
|
}
|
|
},
|
|
|
|
resetFrom: function(value) {
|
|
position = value;
|
|
velocity = 0;
|
|
},
|
|
|
|
|
|
getValue: function() {
|
|
if(equilibrium)
|
|
return equilibriumPosition;
|
|
return position;
|
|
},
|
|
|
|
completed: function() {
|
|
return equilibrium;
|
|
}
|
|
};
|
|
};
|
|
|
|
var EASING_FUNCS = {
|
|
'linear': linearEasing,
|
|
'ease': ease,
|
|
'easeIn': easeIn,
|
|
'easeOut': easeOut,
|
|
};
|
|
|
|
|
|
var createEaser = function(easerName, options) {
|
|
if(easerName == 'spring') {
|
|
return createSpringEasing(options);
|
|
}
|
|
var easeFunction = easerName;
|
|
if(!isFunction(easerName)) {
|
|
easeFunction = EASING_FUNCS[easerName];
|
|
}
|
|
|
|
var easer = easeFunction;
|
|
var value = 0;
|
|
var lastValue;
|
|
|
|
// Public API
|
|
return {
|
|
tick: function(v) {
|
|
value = easer(v);
|
|
lastValue = v;
|
|
},
|
|
|
|
resetFrom: function(value) {
|
|
lastValue = 0;
|
|
},
|
|
|
|
getValue: function() {
|
|
return value;
|
|
},
|
|
|
|
completed: function() {
|
|
if(lastValue >= 1) {
|
|
return lastValue;
|
|
}
|
|
return false;
|
|
}
|
|
};
|
|
};
|
|
|
|
/***
|
|
* Matrix related
|
|
*/
|
|
|
|
var assignTranslate = function(matrix, x, y, z) {
|
|
matrix[0] = 1;
|
|
matrix[1] = 0;
|
|
matrix[2] = 0;
|
|
matrix[3] = 0;
|
|
matrix[4] = 0;
|
|
matrix[5] = 1;
|
|
matrix[6] = 0;
|
|
matrix[7] = 0;
|
|
matrix[8] = 0;
|
|
matrix[9] = 0;
|
|
matrix[10] = 1;
|
|
matrix[11] = 0;
|
|
matrix[12] = x;
|
|
matrix[13] = y;
|
|
matrix[14] = z;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
var assignRotateX = function(matrix, rad) {
|
|
matrix[0] = 1;
|
|
matrix[1] = 0;
|
|
matrix[2] = 0;
|
|
matrix[3] = 0;
|
|
matrix[4] = 0;
|
|
matrix[5] = Math.cos(rad);
|
|
matrix[6] = -Math.sin(rad);
|
|
matrix[7] = 0;
|
|
matrix[8] = 0;
|
|
matrix[9] = Math.sin(rad);
|
|
matrix[10] = Math.cos(rad);
|
|
matrix[11] = 0;
|
|
matrix[12] = 0;
|
|
matrix[13] = 0;
|
|
matrix[14] = 0;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
|
|
var assignRotateY = function(matrix, rad) {
|
|
matrix[0] = Math.cos(rad);
|
|
matrix[1] = 0;
|
|
matrix[2] = Math.sin(rad);
|
|
matrix[3] = 0;
|
|
matrix[4] = 0;
|
|
matrix[5] = 1;
|
|
matrix[6] = 0;
|
|
matrix[7] = 0;
|
|
matrix[8] = -Math.sin(rad);
|
|
matrix[9] = 0;
|
|
matrix[10] = Math.cos(rad);
|
|
matrix[11] = 0;
|
|
matrix[12] = 0;
|
|
matrix[13] = 0;
|
|
matrix[14] = 0;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
var assignRotateZ = function(matrix, rad) {
|
|
matrix[0] = Math.cos(rad);
|
|
matrix[1] = -Math.sin(rad);
|
|
matrix[2] = 0;
|
|
matrix[3] = 0;
|
|
matrix[4] = Math.sin(rad);
|
|
matrix[5] = Math.cos(rad);
|
|
matrix[6] = 0;
|
|
matrix[7] = 0;
|
|
matrix[8] = 0;
|
|
matrix[9] = 0;
|
|
matrix[10] = 1;
|
|
matrix[11] = 0;
|
|
matrix[12] = 0;
|
|
matrix[13] = 0;
|
|
matrix[14] = 0;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
var assignSkew = function(matrix, ax, ay) {
|
|
matrix[0] = 1;
|
|
matrix[1] = Math.tan(ax);
|
|
matrix[2] = 0;
|
|
matrix[3] = 0;
|
|
matrix[4] = Math.tan(ay);
|
|
matrix[5] = 1;
|
|
matrix[6] = 0;
|
|
matrix[7] = 0;
|
|
matrix[8] = 0;
|
|
matrix[9] = 0;
|
|
matrix[10] = 1;
|
|
matrix[11] = 0;
|
|
matrix[12] = 0;
|
|
matrix[13] = 0;
|
|
matrix[14] = 0;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
|
|
var assignScale = function(matrix, x, y) {
|
|
matrix[0] = x;
|
|
matrix[1] = 0;
|
|
matrix[2] = 0;
|
|
matrix[3] = 0;
|
|
matrix[4] = 0;
|
|
matrix[5] = y;
|
|
matrix[6] = 0;
|
|
matrix[7] = 0;
|
|
matrix[8] = 0;
|
|
matrix[9] = 0;
|
|
matrix[10] = 1;
|
|
matrix[11] = 0;
|
|
matrix[12] = 0;
|
|
matrix[13] = 0;
|
|
matrix[14] = 0;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
var assignIdentity = function(matrix) {
|
|
matrix[0] = 1;
|
|
matrix[1] = 0;
|
|
matrix[2] = 0;
|
|
matrix[3] = 0;
|
|
matrix[4] = 0;
|
|
matrix[5] = 1;
|
|
matrix[6] = 0;
|
|
matrix[7] = 0;
|
|
matrix[8] = 0;
|
|
matrix[9] = 0;
|
|
matrix[10] = 1;
|
|
matrix[11] = 0;
|
|
matrix[12] = 0;
|
|
matrix[13] = 0;
|
|
matrix[14] = 0;
|
|
matrix[15] = 1;
|
|
};
|
|
|
|
var copyArray = function(a, b) {
|
|
b[0] = a[0];
|
|
b[1] = a[1];
|
|
b[2] = a[2];
|
|
b[3] = a[3];
|
|
b[4] = a[4];
|
|
b[5] = a[5];
|
|
b[6] = a[6];
|
|
b[7] = a[7];
|
|
b[8] = a[8];
|
|
b[9] = a[9];
|
|
b[10] = a[10];
|
|
b[11] = a[11];
|
|
b[12] = a[12];
|
|
b[13] = a[13];
|
|
b[14] = a[14];
|
|
b[15] = a[15];
|
|
};
|
|
|
|
var createMatrix = function() {
|
|
var data = new Float32Array(16);
|
|
var a = new Float32Array(16);
|
|
var b = new Float32Array(16);
|
|
assignIdentity(data);
|
|
|
|
return {
|
|
data: data,
|
|
|
|
asCSS: function() {
|
|
var css = 'matrix3d(';
|
|
for(var i=0;i<15;++i) {
|
|
if(Math.abs(data[i]) < 0.0001)
|
|
css += '0,';
|
|
else
|
|
css += data[i].toFixed(10) + ',';
|
|
}
|
|
if(Math.abs(data[15]) < 0.0001)
|
|
css += '0)';
|
|
else
|
|
css += data[15].toFixed(10) + ')';
|
|
return css;
|
|
},
|
|
|
|
clear: function() {
|
|
assignIdentity(data);
|
|
},
|
|
|
|
translate: function(x, y, z) {
|
|
copyArray(data, a);
|
|
assignTranslate(b, x, y, z);
|
|
assignedMatrixMultiplication(a, b, data);
|
|
return this;
|
|
},
|
|
|
|
rotateX: function(radians) {
|
|
copyArray(data, a);
|
|
assignRotateX(b, radians);
|
|
assignedMatrixMultiplication(a, b, data);
|
|
return this;
|
|
},
|
|
|
|
rotateY: function(radians) {
|
|
copyArray(data, a);
|
|
assignRotateY(b, radians);
|
|
assignedMatrixMultiplication(a, b, data);
|
|
return this;
|
|
},
|
|
|
|
rotateZ: function(radians) {
|
|
copyArray(data, a);
|
|
assignRotateZ(b, radians);
|
|
assignedMatrixMultiplication(a, b, data);
|
|
return this;
|
|
},
|
|
|
|
scale: function(x, y) {
|
|
copyArray(data, a);
|
|
assignScale(b, x, y);
|
|
assignedMatrixMultiplication(a, b, data);
|
|
return this;
|
|
},
|
|
|
|
skew: function(ax, ay) {
|
|
copyArray(data, a);
|
|
assignSkew(b, ax, ay);
|
|
assignedMatrixMultiplication(a, b, data);
|
|
return this;
|
|
}
|
|
};
|
|
};
|
|
|
|
var assignedMatrixMultiplication = function(a, b, res) {
|
|
// Unrolled loop
|
|
res[0] = a[0] * b[0] + a[1] * b[4] + a[2] * b[8] + a[3] * b[12];
|
|
res[1] = a[0] * b[1] + a[1] * b[5] + a[2] * b[9] + a[3] * b[13];
|
|
res[2] = a[0] * b[2] + a[1] * b[6] + a[2] * b[10] + a[3] * b[14];
|
|
res[3] = a[0] * b[3] + a[1] * b[7] + a[2] * b[11] + a[3] * b[15];
|
|
|
|
res[4] = a[4] * b[0] + a[5] * b[4] + a[6] * b[8] + a[7] * b[12];
|
|
res[5] = a[4] * b[1] + a[5] * b[5] + a[6] * b[9] + a[7] * b[13];
|
|
res[6] = a[4] * b[2] + a[5] * b[6] + a[6] * b[10] + a[7] * b[14];
|
|
res[7] = a[4] * b[3] + a[5] * b[7] + a[6] * b[11] + a[7] * b[15];
|
|
|
|
res[8] = a[8] * b[0] + a[9] * b[4] + a[10] * b[8] + a[11] * b[12];
|
|
res[9] = a[8] * b[1] + a[9] * b[5] + a[10] * b[9] + a[11] * b[13];
|
|
res[10] = a[8] * b[2] + a[9] * b[6] + a[10] * b[10] + a[11] * b[14];
|
|
res[11] = a[8] * b[3] + a[9] * b[7] + a[10] * b[11] + a[11] * b[15];
|
|
|
|
res[12] = a[12] * b[0] + a[13] * b[4] + a[14] * b[8] + a[15] * b[12];
|
|
res[13] = a[12] * b[1] + a[13] * b[5] + a[14] * b[9] + a[15] * b[13];
|
|
res[14] = a[12] * b[2] + a[13] * b[6] + a[14] * b[10] + a[15] * b[14];
|
|
res[15] = a[12] * b[3] + a[13] * b[7] + a[14] * b[11] + a[15] * b[15];
|
|
|
|
return res;
|
|
};
|
|
|
|
var createState = function(config) {
|
|
// Caching of matrix and properties so we don't have to create new ones everytime they are needed
|
|
var matrix = createMatrix();
|
|
var properties = {
|
|
opacity: undefined,
|
|
width: undefined,
|
|
height: undefined
|
|
};
|
|
|
|
// Public API
|
|
return {
|
|
position: config.position,
|
|
rotation: config.rotation,
|
|
rotationPost: config.rotationPost,
|
|
skew: config.skew,
|
|
scale: config.scale,
|
|
scalePost: config.scalePost,
|
|
opacity: config.opacity,
|
|
width: config.width,
|
|
height: config.height,
|
|
|
|
|
|
clone: function() {
|
|
return createState({
|
|
position: this.position ? this.position.slice(0) : undefined,
|
|
rotation: this.rotation ? this.rotation.slice(0) : undefined,
|
|
rotationPost: this.rotationPost ? this.rotationPost.slice(0) : undefined,
|
|
skew: this.skew ? this.skew.slice(0) : undefined,
|
|
scale: this.scale ? this.scale.slice(0) : undefined,
|
|
scalePost: this.scalePost ? this.scalePost.slice(0) : undefined,
|
|
height: this.height,
|
|
width: this.width,
|
|
opacity: this.opacity
|
|
});
|
|
},
|
|
|
|
asMatrix: function() {
|
|
var m = matrix;
|
|
m.clear();
|
|
|
|
if(this.transformOrigin)
|
|
m.translate(-this.transformOrigin[0], -this.transformOrigin[1], -this.transformOrigin[2]);
|
|
|
|
if(this.scale) {
|
|
m.scale(this.scale[0], this.scale[1]);
|
|
}
|
|
|
|
if(this.skew) {
|
|
m.skew(this.skew[0], this.skew[1]);
|
|
}
|
|
|
|
if(this.rotation) {
|
|
m.rotateX(this.rotation[0]);
|
|
m.rotateY(this.rotation[1]);
|
|
m.rotateZ(this.rotation[2]);
|
|
}
|
|
|
|
if(this.position) {
|
|
m.translate(this.position[0], this.position[1], this.position[2]);
|
|
}
|
|
|
|
if(this.rotationPost) {
|
|
m.rotateX(this.rotationPost[0]);
|
|
m.rotateY(this.rotationPost[1]);
|
|
m.rotateZ(this.rotationPost[2]);
|
|
}
|
|
|
|
if(this.scalePost) {
|
|
m.scale(this.scalePost[0], this.scalePost[1]);
|
|
}
|
|
|
|
if(this.transformOrigin)
|
|
m.translate(this.transformOrigin[0], this.transformOrigin[1], this.transformOrigin[2]);
|
|
return m;
|
|
},
|
|
|
|
getProperties: function() {
|
|
properties.opacity = this.opacity;
|
|
properties.width = this.width + 'px';
|
|
properties.height = this.height + 'px';
|
|
return properties;
|
|
}
|
|
};
|
|
};
|
|
// ------------------
|
|
// -- StateTweener --
|
|
// -------------------
|
|
|
|
var createStateTweener = function(startState, endState, resultState) {
|
|
var start = startState;
|
|
var end = endState;
|
|
var result = resultState;
|
|
|
|
var tweenPosition = end.position !== undefined;
|
|
var tweenRotation = end.rotation !== undefined;
|
|
var tweenRotationPost = end.rotationPost !== undefined;
|
|
var tweenScale = end.scale !== undefined;
|
|
var tweenSkew = end.skew !== undefined;
|
|
var tweenWidth = end.width !== undefined;
|
|
var tweenHeight = end.height !== undefined;
|
|
var tweenOpacity = end.opacity !== undefined;
|
|
|
|
// Public API
|
|
return {
|
|
|
|
tween: function(tweenValue) {
|
|
|
|
if(tweenPosition) {
|
|
var dX = (end.position[0] - start.position[0]);
|
|
var dY = (end.position[1] - start.position[1]);
|
|
var dZ = (end.position[2] - start.position[2]);
|
|
result.position[0] = start.position[0] + tweenValue*dX;
|
|
result.position[1] = start.position[1] + tweenValue*dY;
|
|
result.position[2] = start.position[2] + tweenValue*dZ;
|
|
}
|
|
|
|
if(tweenRotation) {
|
|
var dAX = (end.rotation[0] - start.rotation[0]);
|
|
var dAY = (end.rotation[1] - start.rotation[1]);
|
|
var dAZ = (end.rotation[2] - start.rotation[2]);
|
|
result.rotation[0] = start.rotation[0] + tweenValue*dAX;
|
|
result.rotation[1] = start.rotation[1] + tweenValue*dAY;
|
|
result.rotation[2] = start.rotation[2] + tweenValue*dAZ;
|
|
}
|
|
|
|
if(tweenRotationPost) {
|
|
var dBX = (end.rotationPost[0] - start.rotationPost[0]);
|
|
var dBY = (end.rotationPost[1] - start.rotationPost[1]);
|
|
var dBZ = (end.rotationPost[2] - start.rotationPost[2]);
|
|
result.rotationPost[0] = start.rotationPost[0] + tweenValue*dBX;
|
|
result.rotationPost[1] = start.rotationPost[1] + tweenValue*dBY;
|
|
result.rotationPost[2] = start.rotationPost[2] + tweenValue*dBZ;
|
|
}
|
|
|
|
if(tweenSkew) {
|
|
var dSX = (end.scale[0] - start.scale[0]);
|
|
var dSY = (end.scale[1] - start.scale[1]);
|
|
|
|
result.scale[0] = start.scale[0] + tweenValue*dSX;
|
|
result.scale[1] = start.scale[1] + tweenValue*dSY;
|
|
}
|
|
|
|
if(tweenScale) {
|
|
var dSkewX = (end.skew[0] - start.skew[0]);
|
|
var dSkewY = (end.skew[1] - start.skew[1]);
|
|
|
|
result.skew[0] = start.skew[0] + tweenValue*dSkewX;
|
|
result.skew[1] = start.skew[1] + tweenValue*dSkewY;
|
|
}
|
|
|
|
if(tweenWidth) {
|
|
var dWidth = (end.width - start.width);
|
|
result.width = start.width + tweenValue*dWidth;
|
|
}
|
|
|
|
|
|
if(tweenHeight) {
|
|
var dHeight = (end.height - start.height);
|
|
result.height = start.height + tweenValue*dHeight;
|
|
}
|
|
|
|
if(tweenOpacity) {
|
|
var dOpacity = (end.opacity - start.opacity);
|
|
result.opacity = start.opacity + tweenValue*dOpacity;
|
|
}
|
|
|
|
},
|
|
|
|
asMatrix: function() {
|
|
return result.asMatrix();
|
|
},
|
|
|
|
getProperties: function() {
|
|
return result.getProperties();
|
|
},
|
|
|
|
setReverse: function() {
|
|
var oldStart = start;
|
|
start = end;
|
|
end = oldStart;
|
|
}
|
|
};
|
|
};
|
|
|
|
// ------------------------
|
|
// -- ValueFeederTweener --
|
|
// ------------------------
|
|
|
|
var createValueFeederTweener = function(valueFeeder, startState, endState, resultState) {
|
|
var currentMatrix = valueFeeder(0, createMatrix());
|
|
var start = startState;
|
|
var end = endState;
|
|
var result = resultState;
|
|
var reverse = false;
|
|
|
|
|
|
// Public API
|
|
return {
|
|
|
|
tween: function(tweenValue) {
|
|
if(reverse)
|
|
tweenValue = 1 - tweenValue;
|
|
currentMatrix.clear();
|
|
currentMatrix = valueFeeder(tweenValue, currentMatrix);
|
|
|
|
var dWidth = (end.width - start.width);
|
|
var dHeight = (end.height - start.height);
|
|
var dOpacity = (end.opacity - start.opacity);
|
|
|
|
if(end.width !== undefined)
|
|
result.width = start.width + tweenValue*dWidth;
|
|
if(end.height !== undefined)
|
|
result.height = start.height + tweenValue*dHeight;
|
|
if(end.opacity !== undefined)
|
|
result.opacity = start.opacity + tweenValue*dOpacity;
|
|
},
|
|
|
|
asMatrix: function() {
|
|
return currentMatrix;
|
|
},
|
|
|
|
getProperties: function() {
|
|
return result.getProperties();
|
|
},
|
|
|
|
setReverse: function() {
|
|
reverse = true;
|
|
}
|
|
|
|
};
|
|
};
|
|
|
|
var optionOrDefault = function(option, def) {
|
|
if(typeof option == 'undefined') {
|
|
return def;
|
|
}
|
|
return option;
|
|
};
|
|
|
|
var updateElementTransform = function(element, matrix, perspective) {
|
|
var cssPerspective = '';
|
|
if(perspective) {
|
|
cssPerspective = 'perspective(' + perspective + 'px) ';
|
|
}
|
|
var cssMatrix = matrix.asCSS();
|
|
element.style[transformProperty] = cssPerspective + cssMatrix;
|
|
};
|
|
|
|
var updateElementProperties = function(element, properties) {
|
|
for(var key in properties) {
|
|
element.style[key] = properties[key];
|
|
}
|
|
};
|
|
|
|
var isFunction = function(object) {
|
|
return (typeof object === "function");
|
|
};
|
|
|
|
var cloneObject = function(object) {
|
|
if(!object)
|
|
return object;
|
|
var clone = {};
|
|
for(var key in object) {
|
|
clone[key] = object[key];
|
|
}
|
|
return clone;
|
|
};
|
|
|
|
snabbt.createMatrix = createMatrix;
|
|
snabbt.setElementTransform = updateElementTransform;
|
|
return snabbt;
|
|
}());
|
|
var stackBlur = (function(){
|
|
|
|
var mul_table = [
|
|
512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,
|
|
454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
|
|
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
|
|
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
|
|
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
|
|
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
|
|
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
|
|
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
|
|
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
|
|
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
|
|
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
|
|
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
|
|
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
|
|
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
|
|
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
|
|
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];
|
|
|
|
|
|
var shg_table = [
|
|
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
|
|
17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
|
|
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
|
|
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
|
|
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
|
|
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
|
|
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
|
|
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
|
|
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
|
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
|
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
|
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
|
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
|
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
|
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
|
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];
|
|
|
|
function getImageDataFromCanvas(canvas, top_x, top_y, width, height)
|
|
{
|
|
if (typeof(canvas) == 'string')
|
|
canvas = document.getElementById(canvas);
|
|
else if (!canvas instanceof HTMLCanvasElement)
|
|
return;
|
|
|
|
var context = canvas.getContext('2d');
|
|
var imageData;
|
|
|
|
try {
|
|
try {
|
|
imageData = context.getImageData(top_x, top_y, width, height);
|
|
} catch(e) {
|
|
throw new Error("unable to access local image data: " + e);
|
|
return;
|
|
}
|
|
} catch(e) {
|
|
throw new Error("unable to access image data: " + e);
|
|
}
|
|
|
|
return imageData;
|
|
}
|
|
|
|
function processCanvasRGBA(canvas, top_x, top_y, width, height, radius)
|
|
{
|
|
if (isNaN(radius) || radius < 1) return;
|
|
radius |= 0;
|
|
|
|
var imageData = getImageDataFromCanvas(canvas, top_x, top_y, width, height);
|
|
|
|
imageData = processImageDataRGBA(imageData, top_x, top_y, width, height, radius);
|
|
|
|
canvas.getContext('2d').putImageData(imageData, top_x, top_y);
|
|
}
|
|
|
|
function processImageDataRGBA(imageData, top_x, top_y, width, height, radius)
|
|
{
|
|
var pixels = imageData.data;
|
|
|
|
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
|
|
r_out_sum, g_out_sum, b_out_sum, a_out_sum,
|
|
r_in_sum, g_in_sum, b_in_sum, a_in_sum,
|
|
pr, pg, pb, pa, rbs;
|
|
|
|
var div = radius + radius + 1;
|
|
var w4 = width << 2;
|
|
var widthMinus1 = width - 1;
|
|
var heightMinus1 = height - 1;
|
|
var radiusPlus1 = radius + 1;
|
|
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
|
|
|
|
var stackStart = new BlurStack();
|
|
var stack = stackStart;
|
|
for (i = 1; i < div; i++)
|
|
{
|
|
stack = stack.next = new BlurStack();
|
|
if (i == radiusPlus1) var stackEnd = stack;
|
|
}
|
|
stack.next = stackStart;
|
|
var stackIn = null;
|
|
var stackOut = null;
|
|
|
|
yw = yi = 0;
|
|
|
|
var mul_sum = mul_table[radius];
|
|
var shg_sum = shg_table[radius];
|
|
|
|
for (y = 0; y < height; y++)
|
|
{
|
|
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
|
|
|
|
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
|
|
g_out_sum = radiusPlus1 * (pg = pixels[yi+1]);
|
|
b_out_sum = radiusPlus1 * (pb = pixels[yi+2]);
|
|
a_out_sum = radiusPlus1 * (pa = pixels[yi+3]);
|
|
|
|
r_sum += sumFactor * pr;
|
|
g_sum += sumFactor * pg;
|
|
b_sum += sumFactor * pb;
|
|
a_sum += sumFactor * pa;
|
|
|
|
stack = stackStart;
|
|
|
|
for (i = 0; i < radiusPlus1; i++)
|
|
{
|
|
stack.r = pr;
|
|
stack.g = pg;
|
|
stack.b = pb;
|
|
stack.a = pa;
|
|
stack = stack.next;
|
|
}
|
|
|
|
for (i = 1; i < radiusPlus1; i++)
|
|
{
|
|
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
|
|
r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
|
|
g_sum += (stack.g = (pg = pixels[p+1])) * rbs;
|
|
b_sum += (stack.b = (pb = pixels[p+2])) * rbs;
|
|
a_sum += (stack.a = (pa = pixels[p+3])) * rbs;
|
|
|
|
r_in_sum += pr;
|
|
g_in_sum += pg;
|
|
b_in_sum += pb;
|
|
a_in_sum += pa;
|
|
|
|
stack = stack.next;
|
|
}
|
|
|
|
|
|
stackIn = stackStart;
|
|
stackOut = stackEnd;
|
|
for (x = 0; x < width; x++)
|
|
{
|
|
pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
|
|
if (pa != 0)
|
|
{
|
|
pa = 255 / pa;
|
|
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
|
|
pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
|
|
pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
|
|
} else {
|
|
pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
|
|
}
|
|
|
|
r_sum -= r_out_sum;
|
|
g_sum -= g_out_sum;
|
|
b_sum -= b_out_sum;
|
|
a_sum -= a_out_sum;
|
|
|
|
r_out_sum -= stackIn.r;
|
|
g_out_sum -= stackIn.g;
|
|
b_out_sum -= stackIn.b;
|
|
a_out_sum -= stackIn.a;
|
|
|
|
p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;
|
|
|
|
r_in_sum += (stackIn.r = pixels[p]);
|
|
g_in_sum += (stackIn.g = pixels[p+1]);
|
|
b_in_sum += (stackIn.b = pixels[p+2]);
|
|
a_in_sum += (stackIn.a = pixels[p+3]);
|
|
|
|
r_sum += r_in_sum;
|
|
g_sum += g_in_sum;
|
|
b_sum += b_in_sum;
|
|
a_sum += a_in_sum;
|
|
|
|
stackIn = stackIn.next;
|
|
|
|
r_out_sum += (pr = stackOut.r);
|
|
g_out_sum += (pg = stackOut.g);
|
|
b_out_sum += (pb = stackOut.b);
|
|
a_out_sum += (pa = stackOut.a);
|
|
|
|
r_in_sum -= pr;
|
|
g_in_sum -= pg;
|
|
b_in_sum -= pb;
|
|
a_in_sum -= pa;
|
|
|
|
stackOut = stackOut.next;
|
|
|
|
yi += 4;
|
|
}
|
|
yw += width;
|
|
}
|
|
|
|
|
|
for (x = 0; x < width; x++)
|
|
{
|
|
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
|
|
|
|
yi = x << 2;
|
|
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
|
|
g_out_sum = radiusPlus1 * (pg = pixels[yi+1]);
|
|
b_out_sum = radiusPlus1 * (pb = pixels[yi+2]);
|
|
a_out_sum = radiusPlus1 * (pa = pixels[yi+3]);
|
|
|
|
r_sum += sumFactor * pr;
|
|
g_sum += sumFactor * pg;
|
|
b_sum += sumFactor * pb;
|
|
a_sum += sumFactor * pa;
|
|
|
|
stack = stackStart;
|
|
|
|
for (i = 0; i < radiusPlus1; i++)
|
|
{
|
|
stack.r = pr;
|
|
stack.g = pg;
|
|
stack.b = pb;
|
|
stack.a = pa;
|
|
stack = stack.next;
|
|
}
|
|
|
|
yp = width;
|
|
|
|
for (i = 1; i <= radius; i++)
|
|
{
|
|
yi = (yp + x) << 2;
|
|
|
|
r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
|
|
g_sum += (stack.g = (pg = pixels[yi+1])) * rbs;
|
|
b_sum += (stack.b = (pb = pixels[yi+2])) * rbs;
|
|
a_sum += (stack.a = (pa = pixels[yi+3])) * rbs;
|
|
|
|
r_in_sum += pr;
|
|
g_in_sum += pg;
|
|
b_in_sum += pb;
|
|
a_in_sum += pa;
|
|
|
|
stack = stack.next;
|
|
|
|
if(i < heightMinus1)
|
|
{
|
|
yp += width;
|
|
}
|
|
}
|
|
|
|
yi = x;
|
|
stackIn = stackStart;
|
|
stackOut = stackEnd;
|
|
for (y = 0; y < height; y++)
|
|
{
|
|
p = yi << 2;
|
|
pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
|
|
if (pa > 0)
|
|
{
|
|
pa = 255 / pa;
|
|
pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa;
|
|
pixels[p+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
|
|
pixels[p+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
|
|
} else {
|
|
pixels[p] = pixels[p+1] = pixels[p+2] = 0;
|
|
}
|
|
|
|
r_sum -= r_out_sum;
|
|
g_sum -= g_out_sum;
|
|
b_sum -= b_out_sum;
|
|
a_sum -= a_out_sum;
|
|
|
|
r_out_sum -= stackIn.r;
|
|
g_out_sum -= stackIn.g;
|
|
b_out_sum -= stackIn.b;
|
|
a_out_sum -= stackIn.a;
|
|
|
|
p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2;
|
|
|
|
r_sum += (r_in_sum += (stackIn.r = pixels[p]));
|
|
g_sum += (g_in_sum += (stackIn.g = pixels[p+1]));
|
|
b_sum += (b_in_sum += (stackIn.b = pixels[p+2]));
|
|
a_sum += (a_in_sum += (stackIn.a = pixels[p+3]));
|
|
|
|
stackIn = stackIn.next;
|
|
|
|
r_out_sum += (pr = stackOut.r);
|
|
g_out_sum += (pg = stackOut.g);
|
|
b_out_sum += (pb = stackOut.b);
|
|
a_out_sum += (pa = stackOut.a);
|
|
|
|
r_in_sum -= pr;
|
|
g_in_sum -= pg;
|
|
b_in_sum -= pb;
|
|
a_in_sum -= pa;
|
|
|
|
stackOut = stackOut.next;
|
|
|
|
yi += width;
|
|
}
|
|
}
|
|
return imageData;
|
|
}
|
|
|
|
function BlurStack()
|
|
{
|
|
this.r = 0;
|
|
this.g = 0;
|
|
this.b = 0;
|
|
this.a = 0;
|
|
this.next = null;
|
|
}
|
|
|
|
return processCanvasRGBA;
|
|
|
|
}());
|
|
// canvas to blob polyfill
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
|
|
if (!HTMLCanvasElement.prototype.toBlob) {
|
|
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
|
|
value: function (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'} ) );
|
|
}
|
|
});
|
|
}
|
|
'use strict';
|
|
|
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
|
|
var _arguments = arguments;
|
|
|
|
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; };
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
var copyString = function copyString(str) {
|
|
return str + '';
|
|
};
|
|
|
|
var getDataset = function getDataset(el) {
|
|
if (typeof el.dataset === 'undefined') {
|
|
var res = {};
|
|
var attr;
|
|
var attrName;
|
|
var attrs = el.attributes;
|
|
for (attr in attrs) {
|
|
if (attrs.hasOwnProperty(attr) && attrs[attr].name && /^data-[a-z_\-\d]*$/i.test(attrs[attr].name)) {
|
|
attrName = toCamelCase(attrs[attr].name.substr(5));
|
|
res[attrName] = attrs[attr].value;
|
|
}
|
|
}
|
|
return res;
|
|
}
|
|
return el.dataset;
|
|
};
|
|
|
|
var toCamelCase = function toCamelCase(str) {
|
|
return str.replace(/\-./g, function (substr) {
|
|
return substr.charAt(1).toUpperCase();
|
|
});
|
|
};
|
|
|
|
var getElementAttributes = function getElementAttributes(el) {
|
|
// is a for loop on purpose as this should still function when Slim not supported
|
|
var result = [];
|
|
var attributes = Array.prototype.slice.call(el.attributes);
|
|
var l = attributes.length;
|
|
for (var i = 0; i < l; i++) {
|
|
result.push({
|
|
name: attributes[i].name,
|
|
value: attributes[i].value
|
|
});
|
|
}
|
|
return result;
|
|
};
|
|
|
|
// helper method
|
|
var getOffsetByEvent = function getOffsetByEvent(e) {
|
|
return {
|
|
x: typeof e.offsetX === 'undefined' ? e.layerX : e.offsetX,
|
|
y: typeof e.offsetY === 'undefined' ? e.layerY : e.offsetY
|
|
};
|
|
};
|
|
|
|
// merge two objects together
|
|
var mergeOptions = function mergeOptions(base, additives) {
|
|
var key;
|
|
var options = {};
|
|
var optionsToMerge = additives || {};
|
|
|
|
for (key in base) {
|
|
if (!base.hasOwnProperty(key)) {
|
|
continue;
|
|
}
|
|
options[key] = typeof optionsToMerge[key] === 'undefined' ? base[key] : optionsToMerge[key];
|
|
}
|
|
|
|
return options;
|
|
};
|
|
|
|
// keys
|
|
var Key = {
|
|
ESC: 27,
|
|
RETURN: 13
|
|
};
|
|
|
|
// pointer events
|
|
var Events = {
|
|
DOWN: ['touchstart', 'pointerdown', 'mousedown'],
|
|
MOVE: ['touchmove', 'pointermove', 'mousemove'],
|
|
UP: ['touchend', 'touchcancel', 'pointerup', 'mouseup']
|
|
};
|
|
|
|
var MimeTypes = {
|
|
jpeg: 'image/jpeg',
|
|
jpg: 'image/jpeg',
|
|
jpe: 'image/jpeg',
|
|
png: 'image/png',
|
|
gif: 'image/gif',
|
|
bmp: 'image/bmp'
|
|
};
|
|
|
|
var ImageExtensionsRegex = /(\.png|\.bmp|\.gif|\.jpg|\.jpe|\.jpg|\.jpeg)$/;
|
|
|
|
var CanvasExportExtensions = /(jpe|jpg|jpeg|png)/;
|
|
|
|
// shortcuts
|
|
var create = function create(name, className) {
|
|
var node = document.createElement(name);
|
|
if (className) {
|
|
node.className = className;
|
|
}
|
|
return node;
|
|
};
|
|
|
|
// events
|
|
var addEvents = function addEvents(obj, events, scope) {
|
|
events.forEach(function (event) {
|
|
obj.addEventListener(event, scope, false);
|
|
});
|
|
};
|
|
|
|
var removeEvents = function removeEvents(obj, events, scope) {
|
|
events.forEach(function (event) {
|
|
obj.removeEventListener(event, scope, false);
|
|
});
|
|
};
|
|
|
|
var getEventOffset = function getEventOffset(e) {
|
|
var event = e.changedTouches ? e.changedTouches[0] : e;
|
|
|
|
// no event found, quit!
|
|
if (!event) {
|
|
return;
|
|
}
|
|
|
|
// get offset from events
|
|
return {
|
|
x: event.pageX,
|
|
y: event.pageY
|
|
};
|
|
};
|
|
|
|
var rotate = function rotate(rect, angle) {
|
|
var cx = 0.5;
|
|
var cy = 0.5;
|
|
|
|
var radians = Math.PI / 180 * angle;
|
|
var cos = Math.cos(radians);
|
|
var sin = Math.sin(radians);
|
|
|
|
var x1 = rect.x;
|
|
var y1 = rect.y;
|
|
var x2 = rect.x + rect.width;
|
|
var y2 = rect.y + rect.height;
|
|
|
|
var rx1 = cos * (x1 - cx) + sin * (y1 - cy) + cx;
|
|
var ry1 = cos * (y1 - cy) - sin * (x1 - cx) + cy;
|
|
|
|
var rx2 = cos * (x2 - cx) + sin * (y2 - cy) + cx;
|
|
var ry2 = cos * (y2 - cy) - sin * (x2 - cx) + cy;
|
|
|
|
if (rx1 <= rx2) {
|
|
rect.x = rx1;
|
|
rect.width = rx2 - rx1;
|
|
} else {
|
|
rect.x = rx2;
|
|
rect.width = rx1 - rx2;
|
|
}
|
|
|
|
if (ry1 <= ry2) {
|
|
rect.y = ry1;
|
|
rect.height = ry2 - ry1;
|
|
} else {
|
|
rect.y = ry2;
|
|
rect.height = ry1 - ry2;
|
|
}
|
|
};
|
|
|
|
var getEventOffsetScroll = function getEventOffsetScroll(e) {
|
|
var offset = getEventOffset(e);
|
|
offset.x -= window.pageXOffset || document.documentElement.scrollLeft;
|
|
offset.y -= window.pageYOffset || document.documentElement.scrollTop;
|
|
return offset;
|
|
};
|
|
|
|
var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
|
|
return string.charAt(0).toLowerCase() + string.slice(1);
|
|
};
|
|
|
|
var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
};
|
|
|
|
var last = function last(array) {
|
|
return array[array.length - 1];
|
|
};
|
|
|
|
var limit = function limit(value, min, max) {
|
|
return Math.max(min, Math.min(max, value));
|
|
};
|
|
|
|
var inArray = function inArray(needle, arr) {
|
|
// is for loop so we can use this method on older browsers to render fallback message
|
|
if (!arr) {
|
|
return false;
|
|
}
|
|
for (var i = 0; i < arr.length; i++) {
|
|
if (arr[i] === needle) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
var send = function send(url) {
|
|
var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'POST';
|
|
var data = arguments[2];
|
|
var requestDecorator = arguments[3];
|
|
var progress = arguments[4];
|
|
var success = arguments[5];
|
|
var err = arguments[6];
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
// if progress callback defined handle progress events
|
|
if (progress) {
|
|
xhr.upload.addEventListener('progress', function (e) {
|
|
progress(e.loaded, e.total);
|
|
});
|
|
}
|
|
|
|
// open the request
|
|
xhr.open(method, url, true);
|
|
|
|
// if request decorator defined pass XMLHttpRequest instance to decorator
|
|
if (requestDecorator) {
|
|
requestDecorator(xhr, data);
|
|
}
|
|
|
|
// handle state changes
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
|
|
var text = xhr.responseText;
|
|
|
|
// if no data returned from server assume success
|
|
if (!text.length) {
|
|
success();
|
|
return;
|
|
}
|
|
|
|
// catch possible PHP content length problem
|
|
if (text.indexOf('Content-Length') !== -1) {
|
|
err('file-too-big');
|
|
return;
|
|
}
|
|
|
|
// if data returned it should be in suggested JSON format
|
|
var obj = void 0;
|
|
try {
|
|
obj = JSON.parse(xhr.responseText);
|
|
} catch (e) {}
|
|
|
|
// if is failure response
|
|
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && obj.status === 'failure') {
|
|
err(obj.message);
|
|
return;
|
|
}
|
|
|
|
success(obj || text);
|
|
} else if (xhr.readyState === 4) {
|
|
var _obj = void 0;
|
|
try {
|
|
_obj = JSON.parse(xhr.responseText);
|
|
} catch (e) {}
|
|
|
|
// if is clean failure response
|
|
if ((typeof _obj === 'undefined' ? 'undefined' : _typeof(_obj)) === 'object' && _obj.status === 'failure') {
|
|
err(_obj.message);
|
|
return;
|
|
}
|
|
|
|
err('fail');
|
|
}
|
|
};
|
|
|
|
// do request
|
|
xhr.send(data);
|
|
};
|
|
|
|
var resetTransforms = function resetTransforms(element) {
|
|
if (!element) {
|
|
return;
|
|
}
|
|
element.style.webkitTransform = '';
|
|
element.style.transform = '';
|
|
};
|
|
|
|
var bytesToMegaBytes = function bytesToMegaBytes(b) {
|
|
return b / 1000000;
|
|
};
|
|
|
|
var megaBytesToBytes = function megaBytesToBytes(mb) {
|
|
return mb * 1000000;
|
|
};
|
|
|
|
var getCommonMimeTypes = function getCommonMimeTypes() {
|
|
var types = [];
|
|
var type = void 0;
|
|
var mimeType = void 0;
|
|
for (type in MimeTypes) {
|
|
if (!MimeTypes.hasOwnProperty(type)) {
|
|
continue;
|
|
}
|
|
mimeType = MimeTypes[type];
|
|
if (types.indexOf(mimeType) == -1) {
|
|
types.push(mimeType);
|
|
}
|
|
}
|
|
return types;
|
|
};
|
|
|
|
var isJPEGMimeType = function isJPEGMimeType(type) {
|
|
return type === 'image/jpeg';
|
|
};
|
|
|
|
var getExtensionByMimeType = function getExtensionByMimeType(mimetype) {
|
|
var type = void 0;
|
|
for (type in MimeTypes) {
|
|
if (!MimeTypes.hasOwnProperty(type)) {
|
|
continue;
|
|
}
|
|
if (MimeTypes[type] === mimetype) {
|
|
return type;
|
|
}
|
|
}
|
|
return mimetype;
|
|
};
|
|
|
|
var getMimeTypeFromResponseType = function getMimeTypeFromResponseType(responseType) {
|
|
var type = void 0;
|
|
for (type in MimeTypes) {
|
|
if (!MimeTypes.hasOwnProperty(type)) {
|
|
continue;
|
|
}
|
|
if (responseType.indexOf(MimeTypes[type]) !== -1) {
|
|
return MimeTypes[type];
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
var getFileName = function getFileName(path) {
|
|
return path.split('/').pop().split('?').shift();
|
|
};
|
|
|
|
var leftPad = function leftPad(value) {
|
|
var padding = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
return (padding + value).slice(-padding.length);
|
|
};
|
|
|
|
var getDateString = function getDateString(date) {
|
|
return date.getFullYear() + '-' + leftPad(date.getMonth() + 1, '00') + '-' + leftPad(date.getDate(), '00') + '_' + leftPad(date.getHours(), '00') + '-' + leftPad(date.getMinutes(), '00') + '-' + leftPad(date.getSeconds(), '00');
|
|
};
|
|
|
|
var getFileNameByFile = function getFileNameByFile(file) {
|
|
if (typeof file.name === 'undefined') {
|
|
return getDateString(new Date()) + '.' + getExtensionByMimeType(getFileTypeByFile(file));
|
|
}
|
|
return file.name;
|
|
};
|
|
|
|
var getFileTypeByFile = function getFileTypeByFile(file) {
|
|
return file.type || 'image/jpeg';
|
|
};
|
|
|
|
var getFileNameWithoutExtension = function getFileNameWithoutExtension(path) {
|
|
if (typeof path !== 'string') {
|
|
return getDateString(new Date());
|
|
}
|
|
var name = getFileName(path);
|
|
return name.split('.').shift();
|
|
};
|
|
|
|
var blobToFile = function blobToFile(blob, name) {
|
|
try {
|
|
return new File([blob], name, { type: blob.type, lastModified: Date.now() });
|
|
} catch (e) {
|
|
blob.lastModified = new Date();
|
|
blob.name = name;
|
|
return blob;
|
|
}
|
|
};
|
|
|
|
var resourceIsFetchURL = function resourceIsFetchURL(resource) {
|
|
return (/^fetch\//.test(resource)
|
|
);
|
|
};
|
|
|
|
var resourceIsBase64Data = function resourceIsBase64Data(resource) {
|
|
return (/^data:image/.test(resource)
|
|
);
|
|
};
|
|
|
|
var loadRemoteURL = function loadRemoteURL(fetcher, fetchRequestDecorator, loadRequestDecorator, url, err, cb) {
|
|
fetcher = '' + fetcher + (fetcher.indexOf('?') !== -1 ? '&' : '?') + 'url=' + url;
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', fetcher, true);
|
|
fetchRequestDecorator(xhr);
|
|
xhr.responseType = 'json';
|
|
xhr.onload = function () {
|
|
if (this.response.status === 'failure') {
|
|
err(this.response.message);
|
|
return;
|
|
}
|
|
|
|
loadURL(this.response.body, loadRequestDecorator, cb);
|
|
};
|
|
|
|
xhr.send();
|
|
};
|
|
|
|
var loadURL = function loadURL(url, requestDecorator, cb, err) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
requestDecorator(xhr);
|
|
xhr.responseType = 'blob';
|
|
xhr.onload = function (e) {
|
|
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
|
|
var name = getFileName(url);
|
|
var type = getMimeTypeFromResponseType(this.response.type);
|
|
|
|
if (!ImageExtensionsRegex.test(name)) {
|
|
name += '.' + getExtensionByMimeType(type);
|
|
}
|
|
|
|
// get as file
|
|
var file = blobToFile(this.response, name);
|
|
|
|
// need to set correct type
|
|
cb(cloneFile(file, type));
|
|
} else {
|
|
err(xhr.status + ': ' + xhr.statusText);
|
|
}
|
|
};
|
|
xhr.onerror = function () {
|
|
err();
|
|
};
|
|
|
|
xhr.send();
|
|
};
|
|
|
|
var base64ToByteString = function base64ToByteString(dataURI) {
|
|
// get data part of string (remove data:image/jpeg...,)
|
|
var dataPart = dataURI.split(',')[1];
|
|
|
|
// remove any whitespace as that causes InvalidCharacterError in IE
|
|
var dataPartCleaned = dataPart.replace(/\s/g, '');
|
|
|
|
// to bytestring
|
|
return atob(dataPartCleaned);
|
|
};
|
|
|
|
var base64ToArrayBuffer = function base64ToArrayBuffer(dataURI) {
|
|
var byteString = base64ToByteString(dataURI);
|
|
var ab = new ArrayBuffer(byteString.length);
|
|
var ia = new Uint8Array(ab);
|
|
|
|
for (var i = 0; i < byteString.length; i++) {
|
|
ia[i] = byteString.charCodeAt(i);
|
|
}
|
|
return ab;
|
|
};
|
|
|
|
var base64ToBlob = function base64ToBlob(dataURI, filename) {
|
|
var byteString = base64ToByteString(dataURI);
|
|
var ab = new ArrayBuffer(byteString.length);
|
|
var ia = new Uint8Array(ab);
|
|
|
|
for (var i = 0; i < byteString.length; i++) {
|
|
ia[i] = byteString.charCodeAt(i);
|
|
}
|
|
|
|
var mimeType = getMimeTypeFromDataURI(dataURI);
|
|
|
|
if (typeof filename === 'undefined') {
|
|
filename = getDateString(new Date()) + '.' + getExtensionByMimeType(mimeType);
|
|
}
|
|
|
|
return blobToFile(createBlob(ab, mimeType), filename);
|
|
};
|
|
|
|
var createBlob = function createBlob(data, mimeType) {
|
|
var BB = window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
|
|
|
|
if (BB) {
|
|
var bb = new BB();
|
|
bb.append(data);
|
|
return bb.getBlob(mimeType);
|
|
}
|
|
|
|
return new Blob([data], {
|
|
type: mimeType
|
|
});
|
|
};
|
|
|
|
var arrayBufferConcat = function arrayBufferConcat(buffers) {
|
|
var length = 0;
|
|
var buffer = null;
|
|
|
|
for (var i in buffers) {
|
|
if (!_arguments.hasOwnProperty(i)) {
|
|
continue;
|
|
}
|
|
buffer = buffers[i];
|
|
length += buffer.byteLength;
|
|
}
|
|
|
|
var joined = new Uint8Array(length);
|
|
var offset = 0;
|
|
|
|
for (var _i in buffers) {
|
|
if (!_arguments.hasOwnProperty(_i)) {
|
|
continue;
|
|
}
|
|
buffer = buffers[_i];
|
|
joined.set(new Uint8Array(buffer), offset);
|
|
offset += buffer.byteLength;
|
|
}
|
|
|
|
return joined.buffer;
|
|
};
|
|
|
|
var getImageAsCanvas = function getImageAsCanvas(src, size, callback) {
|
|
// only cross origin when it's not base64 data, to prevent errors in Safari
|
|
// http://stackoverflow.com/questions/31643096/why-does-safari-throw-cors-error-when-setting-base64-data-on-a-crossorigin-an
|
|
var crossOrigin = typeof src === 'string' ? src.indexOf('data:image') !== 0 : true;
|
|
|
|
loadImage.parseMetaData(src, function (meta) {
|
|
var options = {
|
|
canvas: true,
|
|
crossOrigin: crossOrigin
|
|
};
|
|
|
|
if (size) {
|
|
options.maxWidth = size.width;
|
|
options.maxHeight = size.height;
|
|
}
|
|
|
|
if (meta.exif) {
|
|
options.orientation = meta.exif.get('Orientation');
|
|
}
|
|
|
|
loadImage(src, function (res) {
|
|
if (res.type === 'error') {
|
|
callback();
|
|
return;
|
|
}
|
|
|
|
callback(res, meta);
|
|
}, options);
|
|
});
|
|
};
|
|
|
|
var getAutoCropRect = function getAutoCropRect(width, height, ratioOut) {
|
|
var x,
|
|
y,
|
|
w,
|
|
h,
|
|
ratioIn = height / width;
|
|
|
|
// if input is portrait and required is landscape
|
|
// width is portrait width, height is width times outputRatio
|
|
if (ratioIn < ratioOut) {
|
|
h = height;
|
|
w = h / ratioOut;
|
|
x = (width - w) * 0.5;
|
|
y = 0;
|
|
} else {
|
|
// if input is landscape and required is portrait
|
|
// height is landscape height, width is height divided by outputRatio
|
|
w = width;
|
|
h = w * ratioOut;
|
|
x = 0;
|
|
y = (height - h) * 0.5;
|
|
}
|
|
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
height: h,
|
|
width: w
|
|
};
|
|
};
|
|
|
|
var transformCanvas = function transformCanvas(canvas) {
|
|
var transforms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
var cb = arguments[2];
|
|
|
|
var result = create('canvas');
|
|
|
|
var rotation = transforms.rotation,
|
|
crop = transforms.crop,
|
|
size = transforms.size,
|
|
filters = transforms.filters,
|
|
minSize = transforms.minSize;
|
|
|
|
// do crop transforms
|
|
|
|
if (crop) {
|
|
// do crop
|
|
var isTilted = rotation % 180 !== 0;
|
|
var space = {
|
|
width: isTilted ? canvas.height : canvas.width,
|
|
height: isTilted ? canvas.width : canvas.height
|
|
};
|
|
|
|
// limit crop to size of canvas else safari might return transparent image
|
|
if (crop.x < 0) {
|
|
crop.x = 0;
|
|
}
|
|
|
|
if (crop.y < 0) {
|
|
crop.y = 0;
|
|
}
|
|
|
|
if (crop.width > space.width) {
|
|
crop.width = space.width;
|
|
}
|
|
|
|
if (crop.height > space.height) {
|
|
crop.height = space.height;
|
|
}
|
|
|
|
if (crop.y + crop.height > space.height) {
|
|
crop.y = Math.max(0, space.height - crop.height);
|
|
}
|
|
|
|
if (crop.x + crop.width > space.width) {
|
|
crop.x = Math.max(0, space.width - crop.width);
|
|
}
|
|
|
|
// crop offsets in percentages
|
|
var px = crop.x / space.width;
|
|
var py = crop.y / space.height;
|
|
var pw = crop.width / space.width;
|
|
var ph = crop.height / space.height;
|
|
|
|
// resize canvas to the final crop result size
|
|
result.width = crop.width;
|
|
result.height = crop.height;
|
|
|
|
// draw the crop
|
|
var ctx = result.getContext('2d');
|
|
|
|
if (rotation === 90) {
|
|
ctx.translate(result.width * 0.5, result.height * 0.5);
|
|
ctx.rotate(-90 * Math.PI / 180);
|
|
ctx.drawImage(canvas,
|
|
|
|
// source rectangle (crop area)
|
|
(1 - py) * canvas.width - canvas.width * ph, crop.x, crop.height, crop.width,
|
|
|
|
// target area (cover)
|
|
-result.height * 0.5, -result.width * 0.5, result.height, result.width);
|
|
} else if (rotation === 180) {
|
|
ctx.translate(result.width * 0.5, result.height * 0.5);
|
|
ctx.rotate(-180 * Math.PI / 180);
|
|
ctx.drawImage(canvas,
|
|
|
|
// source rectangle (crop area)
|
|
(1 - (px + pw)) * space.width, (1 - (py + ph)) * space.height, pw * space.width, ph * space.height,
|
|
|
|
// target area (cover)
|
|
-result.width * 0.5, -result.height * 0.5, result.width, result.height);
|
|
} else if (rotation === 270) {
|
|
ctx.translate(result.width * 0.5, result.height * 0.5);
|
|
ctx.rotate(-270 * Math.PI / 180);
|
|
ctx.drawImage(canvas,
|
|
|
|
// source rectangle (crop area)
|
|
crop.y, (1 - px) * canvas.height - canvas.height * pw, crop.height, crop.width,
|
|
|
|
// target area (cover)
|
|
-result.height * 0.5, -result.width * 0.5, result.height, result.width);
|
|
} else {
|
|
ctx.drawImage(canvas,
|
|
|
|
// source rectangle (crop area)
|
|
crop.x, crop.y, crop.width, crop.height,
|
|
|
|
// target area (cover)
|
|
0, 0, result.width, result.height);
|
|
}
|
|
}
|
|
|
|
// do size transforms
|
|
if (size) {
|
|
var scalarX = size.width / result.width;
|
|
var scalarY = size.height / result.height;
|
|
var scalar = Math.min(scalarX, scalarY);
|
|
|
|
scaleCanvas(result, scalar, size, minSize);
|
|
|
|
// sharpen result
|
|
if (filters.sharpen > 0) {
|
|
filter(result, sharpen(filters.sharpen));
|
|
}
|
|
}
|
|
|
|
cb(result);
|
|
};
|
|
|
|
function scaleCanvas(canvas, scalar, bounds, min) {
|
|
// if not scaling down, bail out
|
|
if (scalar >= 1) {
|
|
return;
|
|
}
|
|
|
|
var w = canvas.width;
|
|
var h = canvas.height;
|
|
|
|
// calculate min target width and height
|
|
var targetWidth = Math.max(min.width, Math.min(bounds.width, Math.round(canvas.width * scalar)));
|
|
var targetHeight = Math.max(min.height, Math.min(bounds.height, Math.round(canvas.height * scalar)));
|
|
|
|
var tmp = cloneCanvas(canvas);
|
|
var c = void 0;
|
|
var ctx = void 0;
|
|
|
|
while (w > targetWidth && h > targetHeight) {
|
|
c = document.createElement('canvas');
|
|
w = Math.round(tmp.width * 0.5);
|
|
h = Math.round(tmp.height * 0.5);
|
|
|
|
if (w < targetWidth) {
|
|
w = targetWidth;
|
|
}
|
|
|
|
if (h < targetHeight) {
|
|
h = targetHeight;
|
|
}
|
|
|
|
c.width = w;
|
|
c.height = h;
|
|
ctx = c.getContext('2d');
|
|
ctx.drawImage(tmp, 0, 0, w, h);
|
|
|
|
tmp = cloneCanvas(c);
|
|
}
|
|
|
|
canvas.width = targetWidth;
|
|
canvas.height = targetHeight;
|
|
|
|
ctx = canvas.getContext('2d');
|
|
ctx.drawImage(tmp, 0, 0, targetWidth, targetHeight);
|
|
}
|
|
|
|
var getPixels = function getPixels(canvas) {
|
|
var ctx = canvas.getContext('2d');
|
|
return ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
};
|
|
|
|
var filter = function filter(canvas, _filter) {
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.putImageData(_filter(getPixels(canvas), canvas.width, canvas.height), 0, 0);
|
|
};
|
|
|
|
var createImageData = function createImageData(w, h, pixels) {
|
|
var c = document.createElement('canvas');
|
|
c.width = w;
|
|
c.height = h;
|
|
var ctx = c.getContext('2d');
|
|
var data = ctx.createImageData(c.width, c.height);
|
|
if (pixels) {
|
|
data.set(pixels.data);
|
|
}
|
|
return data;
|
|
};
|
|
|
|
var sharpen = function sharpen(mix) {
|
|
return function (pixels, w, h) {
|
|
var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
|
|
katet = Math.round(Math.sqrt(weights.length)),
|
|
half = katet * 0.5 | 0,
|
|
dstData = createImageData(w, h),
|
|
dstBuff = dstData.data,
|
|
srcBuff = pixels.data,
|
|
y = h,
|
|
x = void 0;
|
|
|
|
while (y--) {
|
|
x = w;
|
|
|
|
while (x--) {
|
|
var sy = y,
|
|
sx = x,
|
|
dstOff = (y * w + x) * 4,
|
|
r = 0,
|
|
g = 0,
|
|
b = 0,
|
|
a = 0;
|
|
|
|
for (var cy = 0; cy < katet; cy++) {
|
|
for (var cx = 0; cx < katet; cx++) {
|
|
var scy = sy + cy - half;
|
|
var scx = sx + cx - half;
|
|
|
|
if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
|
|
var srcOff = (scy * w + scx) * 4;
|
|
var wt = weights[cy * katet + cx];
|
|
|
|
r += srcBuff[srcOff] * wt;
|
|
g += srcBuff[srcOff + 1] * wt;
|
|
b += srcBuff[srcOff + 2] * wt;
|
|
a += srcBuff[srcOff + 3] * wt;
|
|
}
|
|
}
|
|
}
|
|
|
|
dstBuff[dstOff] = r * mix + srcBuff[dstOff] * (1 - mix);
|
|
dstBuff[dstOff + 1] = g * mix + srcBuff[dstOff + 1] * (1 - mix);
|
|
dstBuff[dstOff + 2] = b * mix + srcBuff[dstOff + 2] * (1 - mix);
|
|
dstBuff[dstOff + 3] = srcBuff[dstOff + 3];
|
|
}
|
|
}
|
|
|
|
return dstData;
|
|
};
|
|
};
|
|
|
|
var sizeDist = function sizeDist(rect, canvas) {
|
|
var dx = Math.abs(rect.width - canvas.width);
|
|
var dy = Math.abs(rect.height - canvas.height);
|
|
|
|
return Math.max(dx, dy);
|
|
};
|
|
|
|
var cloneCanvas = function cloneCanvas(original) {
|
|
return cloneCanvasScaled(original, 1);
|
|
};
|
|
|
|
var cloneCanvasScaled = function cloneCanvasScaled(original, scalar) {
|
|
if (!original) {
|
|
return null;
|
|
}
|
|
|
|
var duplicate = document.createElement('canvas');
|
|
var ctx = duplicate.getContext('2d');
|
|
duplicate.width = original.width;
|
|
duplicate.height = original.height;
|
|
ctx.drawImage(original, 0, 0);
|
|
if (scalar > 0 && scalar !== 1) {
|
|
scaleCanvas(duplicate, scalar, {
|
|
width: Math.round(original.width * scalar),
|
|
height: Math.round(original.height * scalar)
|
|
}, {
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
}
|
|
|
|
return duplicate;
|
|
};
|
|
|
|
var canvasHasDimensions = function canvasHasDimensions(canvas) {
|
|
return canvas.width && canvas.height;
|
|
};
|
|
|
|
var copyCanvas = function copyCanvas(original, destination) {
|
|
var ctx = destination.getContext('2d');
|
|
if (canvasHasDimensions(destination)) {
|
|
ctx.drawImage(original, 0, 0, destination.width, destination.height);
|
|
} else {
|
|
destination.width = original.width;
|
|
destination.height = original.height;
|
|
ctx.drawImage(original, 0, 0);
|
|
}
|
|
};
|
|
|
|
var clearCanvas = function clearCanvas(canvas) {
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
};
|
|
|
|
var blurCanvas = function blurCanvas(canvas) {
|
|
stackBlur(canvas, 0, 0, canvas.width, canvas.height, 3);
|
|
};
|
|
|
|
var covers = function covers(image, rect) {
|
|
return parseInt(image.width, 10) >= rect.width && parseInt(image.height, 10) >= rect.height;
|
|
};
|
|
|
|
var scaleRect = function scaleRect(rect, w, h) {
|
|
return {
|
|
x: rect.x * w,
|
|
y: rect.y * h,
|
|
width: rect.width * w,
|
|
height: rect.height * h
|
|
};
|
|
};
|
|
|
|
var divideRect = function divideRect(rect, w, h) {
|
|
return {
|
|
x: rect.x / w,
|
|
y: rect.y / h,
|
|
width: rect.width / w,
|
|
height: rect.height / h
|
|
};
|
|
};
|
|
|
|
var resetFileInput = function resetFileInput(input) {
|
|
// no value, no need to reset
|
|
if (!input || input.value === '') {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// for modern browsers
|
|
input.value = '';
|
|
} catch (err) {}
|
|
|
|
// for IE10
|
|
if (input.value) {
|
|
// quickly append input to temp form and reset form
|
|
var form = document.createElement('form');
|
|
var parentNode = input.parentNode;
|
|
var ref = input.nextSibling;
|
|
form.appendChild(input);
|
|
form.reset();
|
|
|
|
// re-inject input where it originally was
|
|
if (ref) {
|
|
parentNode.insertBefore(input, ref);
|
|
} else {
|
|
parentNode.appendChild(input);
|
|
}
|
|
}
|
|
};
|
|
|
|
var clone = function clone(obj) {
|
|
if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value !== null) {
|
|
return JSON.parse(JSON.stringify(obj));
|
|
}
|
|
return obj;
|
|
};
|
|
|
|
var cloneFile = function cloneFile(file) {
|
|
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
|
|
if (!file) {
|
|
return null;
|
|
}
|
|
var dupe = file.slice(0, file.size, type || file.type);
|
|
dupe.name = file.name;
|
|
dupe.lastModified = new Date(file.lastModified);
|
|
return dupe;
|
|
};
|
|
|
|
var cloneData = function cloneData(obj) {
|
|
var dupe = clone(obj);
|
|
dupe.input.file = cloneFile(obj.input.file);
|
|
dupe.output.image = cloneCanvas(obj.output.image);
|
|
return dupe;
|
|
};
|
|
|
|
/**
|
|
* @param image
|
|
* @param type
|
|
* @param jpegCompression - value between 0 and 100 or undefined/null to use default compression
|
|
* @returns {*}
|
|
*/
|
|
var toDataURL = function toDataURL(image, type, jpegCompression) {
|
|
if (!image || !type) {
|
|
return null;
|
|
}
|
|
return image.toDataURL(type, isJPEGMimeType(type) && typeof jpegCompression === 'number' ? jpegCompression / 100 : undefined);
|
|
};
|
|
|
|
var getMimeTypeFromDataURI = function getMimeTypeFromDataURI(dataUri) {
|
|
if (!dataUri) {
|
|
return null;
|
|
}
|
|
var matches = dataUri.substr(0, 16).match(/^.+;/);
|
|
if (matches.length) {
|
|
return matches[0].substring(5, matches[0].length - 1);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
var flattenData = function flattenData(obj) {
|
|
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
var jpegCompression = arguments[2];
|
|
var forcedType = arguments[3];
|
|
var async = arguments[4];
|
|
|
|
var data = {
|
|
server: clone(obj.server),
|
|
meta: clone(obj.meta),
|
|
input: {
|
|
name: obj.input.name,
|
|
type: obj.input.type,
|
|
size: obj.input.size,
|
|
width: obj.input.width,
|
|
height: obj.input.height,
|
|
field: obj.input.field
|
|
}
|
|
};
|
|
|
|
if (inArray('input', props) && !async) {
|
|
data.input.image = toDataURL(obj.input.image, obj.input.type);
|
|
}
|
|
|
|
if (inArray('output', props)) {
|
|
data.output = {
|
|
name: forcedType ? getFileNameWithoutExtension(obj.input.name) + '.' + forcedType : obj.input.name,
|
|
type: MimeTypes[forcedType] || obj.input.type,
|
|
width: obj.output.width,
|
|
height: obj.output.height
|
|
};
|
|
|
|
data.output.image = toDataURL(obj.output.image, data.output.type, jpegCompression);
|
|
data.output.type = getMimeTypeFromDataURI(data.output.image);
|
|
|
|
// browser problem:
|
|
// if output is of type png and input was of type jpeg we need to fix extension of filename
|
|
// so instead of testing the above situation we just always fix extension when handling PNGs
|
|
if (data.output.type === 'image/png') {
|
|
data.output.name = getFileNameWithoutExtension(data.input.name) + '.png';
|
|
}
|
|
}
|
|
|
|
if (inArray('actions', props)) {
|
|
data.actions = clone(obj.actions);
|
|
}
|
|
|
|
return data;
|
|
};
|
|
|
|
var downloadCanvas = function downloadCanvas(data, jpegCompression, forcedType) {
|
|
var canvas = data.output.image;
|
|
var filename = forcedType ? getFileNameWithoutExtension(data.input.name) + '.' + forcedType : data.input.name;
|
|
var type = MimeTypes[forcedType] || data.input.type;
|
|
|
|
// browser problem:
|
|
// if output is of type png and input was of type jpeg we need to fix extension of filename
|
|
// so instead of testing the above situation we just always fix extension when handling PNGs
|
|
if (type === 'image/png') {
|
|
filename = getFileNameWithoutExtension(data.input.name) + '.png';
|
|
}
|
|
|
|
canvas.toBlob(function (blob) {
|
|
if ('msSaveBlob' in window.navigator) {
|
|
window.navigator.msSaveBlob(blob, filename);
|
|
return;
|
|
}
|
|
|
|
var url = (window.URL || window.webkitURL).createObjectURL(blob);
|
|
|
|
// setup hidden link
|
|
var link = create('a');
|
|
link.style.display = 'none';
|
|
link.download = filename;
|
|
link.href = url;
|
|
|
|
// attach to DOM otherwise this does not work in Firefox
|
|
document.body.appendChild(link);
|
|
|
|
// fire click
|
|
link.click();
|
|
|
|
// delay on remove otherwise does not work in Firefox
|
|
setTimeout(function () {
|
|
document.body.removeChild(link);
|
|
(window.URL || window.webkitURL).revokeObjectURL(url);
|
|
}, 0);
|
|
}, type, typeof jpegCompression === 'number' ? jpegCompression / 100 : undefined);
|
|
};
|
|
|
|
var toggleDisplayBySelector = function toggleDisplayBySelector(selector, enabled, root) {
|
|
var node = root.querySelector(selector);
|
|
if (!node) {
|
|
return;
|
|
}
|
|
node.style.display = enabled ? '' : 'none';
|
|
};
|
|
|
|
var nodeListToArray = function nodeListToArray(nl) {
|
|
return Array.prototype.slice.call(nl);
|
|
};
|
|
|
|
var removeElement = function removeElement(el) {
|
|
el.parentNode.removeChild(el);
|
|
};
|
|
|
|
var wrap = function wrap(element) {
|
|
var wrapper = create('div');
|
|
if (element.parentNode) {
|
|
if (element.nextSibling) {
|
|
element.parentNode.insertBefore(wrapper, element.nextSibling);
|
|
} else {
|
|
element.parentNode.appendChild(wrapper);
|
|
}
|
|
}
|
|
wrapper.appendChild(element);
|
|
return wrapper;
|
|
};
|
|
|
|
var polarToCartesian = function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
|
|
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
|
|
|
|
return {
|
|
x: centerX + radius * Math.cos(angleInRadians),
|
|
y: centerY + radius * Math.sin(angleInRadians)
|
|
};
|
|
};
|
|
|
|
var describeArc = function describeArc(x, y, radius, startAngle, endAngle) {
|
|
var start = polarToCartesian(x, y, radius, endAngle);
|
|
var end = polarToCartesian(x, y, radius, startAngle);
|
|
|
|
var arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
|
|
|
|
var d = ['M', start.x, start.y, 'A', radius, radius, 0, arcSweep, 0, end.x, end.y].join(' ');
|
|
|
|
return d;
|
|
};
|
|
|
|
var percentageArc = function percentageArc(x, y, radius, p) {
|
|
return describeArc(x, y, radius, 0, p * 360);
|
|
};
|
|
|
|
var CropArea = function () {
|
|
var resizers = {
|
|
n: function n(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, p, d;
|
|
|
|
// bottom is fixed
|
|
b = rect.y + rect.height;
|
|
|
|
// intended top
|
|
t = limit(offset.y, 0, b);
|
|
|
|
// if is too small vertically
|
|
if (b - t < space.min.height) {
|
|
t = b - space.min.height;
|
|
}
|
|
|
|
// if should scale by ratio, pick width by ratio of new height
|
|
w = ratio ? (b - t) / ratio : rect.width;
|
|
|
|
// check if has fallen below min width or height
|
|
if (w < space.min.width) {
|
|
w = space.min.width;
|
|
t = b - w * ratio;
|
|
}
|
|
|
|
// add half to left and half to right edge
|
|
p = (w - rect.width) * 0.5;
|
|
l = rect.x - p;
|
|
r = rect.x + rect.width + p;
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (l < 0 || Math.round(r) > Math.round(space.width)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.x, space.width - (rect.x + rect.width));
|
|
|
|
// new left and right offsets
|
|
l = rect.x - d;
|
|
r = rect.x + rect.width + d;
|
|
|
|
// resulting width
|
|
w = r - l;
|
|
|
|
// resulting height based on ratio
|
|
h = w * ratio;
|
|
|
|
// new top position
|
|
t = b - h;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
s: function s(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, p, d;
|
|
|
|
// top is fixed
|
|
t = rect.y;
|
|
|
|
// intended bottom
|
|
b = limit(offset.y, t, space.height);
|
|
|
|
// if is too small vertically
|
|
if (b - t < space.min.height) {
|
|
b = t + space.min.height;
|
|
}
|
|
|
|
// if should scale by ratio, pick width by ratio of new height
|
|
w = ratio ? (b - t) / ratio : rect.width;
|
|
|
|
// check if has fallen below min width or height
|
|
if (w < space.min.width) {
|
|
w = space.min.width;
|
|
b = t + w * ratio;
|
|
}
|
|
|
|
// add half to left and half to right edge
|
|
p = (w - rect.width) * 0.5;
|
|
l = rect.x - p;
|
|
r = rect.x + rect.width + p;
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (l < 0 || Math.round(r) > Math.round(space.width)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.x, space.width - (rect.x + rect.width));
|
|
|
|
// new left and right offsets
|
|
l = rect.x - d;
|
|
r = rect.x + rect.width + d;
|
|
|
|
// resulting width
|
|
w = r - l;
|
|
|
|
// resulting height based on ratio
|
|
h = w * ratio;
|
|
|
|
// new bottom position
|
|
b = t + h;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
e: function e(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, p, d;
|
|
|
|
// left is fixed
|
|
l = rect.x;
|
|
|
|
// intended right edge
|
|
r = limit(offset.x, l, space.width);
|
|
|
|
// if is too small vertically
|
|
if (r - l < space.min.width) {
|
|
r = l + space.min.width;
|
|
}
|
|
|
|
// if should scale by ratio, pick height by ratio of new width
|
|
h = ratio ? (r - l) * ratio : rect.height;
|
|
|
|
// check if has fallen below min width or height
|
|
if (h < space.min.height) {
|
|
h = space.min.height;
|
|
r = l + h / ratio;
|
|
}
|
|
|
|
// add half to top and bottom
|
|
p = (h - rect.height) * 0.5;
|
|
t = rect.y - p;
|
|
b = rect.y + rect.height + p;
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (t < 0 || Math.round(b) > Math.round(space.height)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.y, space.height - (rect.y + rect.height));
|
|
|
|
// new top and bottom offsets
|
|
t = rect.y - d;
|
|
b = rect.y + rect.height + d;
|
|
|
|
// resulting height
|
|
h = b - t;
|
|
|
|
// resulting width based on ratio
|
|
w = h / ratio;
|
|
|
|
// new right position
|
|
r = l + w;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
w: function w(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, p, d;
|
|
|
|
// right is fixed
|
|
r = rect.x + rect.width;
|
|
|
|
// intended left edge
|
|
l = limit(offset.x, 0, r);
|
|
|
|
// if is too small vertically
|
|
if (r - l < space.min.width) {
|
|
l = r - space.min.width;
|
|
}
|
|
|
|
// if should scale by ratio, pick height by ratio of new width
|
|
h = ratio ? (r - l) * ratio : rect.height;
|
|
|
|
// check if has fallen below min width or height
|
|
if (h < space.min.height) {
|
|
h = space.min.height;
|
|
l = r - h / ratio;
|
|
}
|
|
|
|
// add half to top and bottom
|
|
p = (h - rect.height) * 0.5;
|
|
t = rect.y - p;
|
|
b = rect.y + rect.height + p;
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (t < 0 || Math.round(b) > Math.round(space.height)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.y, space.height - (rect.y + rect.height));
|
|
|
|
// new top and bottom offsets
|
|
t = rect.y - d;
|
|
b = rect.y + rect.height + d;
|
|
|
|
// resulting height
|
|
h = b - t;
|
|
|
|
// resulting width based on ratio
|
|
w = h / ratio;
|
|
|
|
// new right position
|
|
l = r - w;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
ne: function ne(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, d;
|
|
|
|
// left and bottom are fixed
|
|
l = rect.x;
|
|
b = rect.y + rect.height;
|
|
|
|
// intended right edge
|
|
r = limit(offset.x, l, space.width);
|
|
|
|
// if is too small vertically
|
|
if (r - l < space.min.width) {
|
|
r = l + space.min.width;
|
|
}
|
|
|
|
// if should scale by ratio, pick height by ratio of new width
|
|
h = ratio ? (r - l) * ratio : limit(b - offset.y, space.min.height, b);
|
|
|
|
// check if has fallen below min width or height
|
|
if (h < space.min.height) {
|
|
h = space.min.height;
|
|
r = l + h / ratio;
|
|
}
|
|
|
|
// add height difference with original height to top
|
|
t = rect.y - (h - rect.height);
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (t < 0 || Math.round(b) > Math.round(space.height)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.y, space.height - (rect.y + rect.height));
|
|
|
|
// new top and bottom offsets
|
|
t = rect.y - d;
|
|
|
|
// resulting height
|
|
h = b - t;
|
|
|
|
// resulting width based on ratio
|
|
w = h / ratio;
|
|
|
|
// new right position
|
|
r = l + w;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
se: function se(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, d;
|
|
|
|
// left and top are fixed
|
|
l = rect.x;
|
|
t = rect.y;
|
|
|
|
// intended right edge
|
|
r = limit(offset.x, l, space.width);
|
|
|
|
// if is too small vertically
|
|
if (r - l < space.min.width) {
|
|
r = l + space.min.width;
|
|
}
|
|
|
|
// if should scale by ratio, pick height by ratio of new width
|
|
h = ratio ? (r - l) * ratio : limit(offset.y - rect.y, space.min.height, space.height - t);
|
|
|
|
// check if has fallen below min width or height
|
|
if (h < space.min.height) {
|
|
h = space.min.height;
|
|
r = l + h / ratio;
|
|
}
|
|
|
|
// add height difference with original height to bottom
|
|
b = rect.y + rect.height + (h - rect.height);
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (t < 0 || Math.round(b) > Math.round(space.height)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.y, space.height - (rect.y + rect.height));
|
|
|
|
// new bottom offset
|
|
b = rect.y + rect.height + d;
|
|
|
|
// resulting height
|
|
h = b - t;
|
|
|
|
// resulting width based on ratio
|
|
w = h / ratio;
|
|
|
|
// new right position
|
|
r = l + w;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
sw: function sw(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, d;
|
|
|
|
// right and top are fixed
|
|
r = rect.x + rect.width;
|
|
t = rect.y;
|
|
|
|
// intended left edge
|
|
l = limit(offset.x, 0, r);
|
|
|
|
// if is too small vertically
|
|
if (r - l < space.min.width) {
|
|
l = r - space.min.width;
|
|
}
|
|
|
|
// if should scale by ratio, pick height by ratio of new width
|
|
h = ratio ? (r - l) * ratio : limit(offset.y - rect.y, space.min.height, space.height - t);
|
|
|
|
// check if has fallen below min width or height
|
|
if (h < space.min.height) {
|
|
h = space.min.height;
|
|
l = r - h / ratio;
|
|
}
|
|
|
|
// add height difference with original height to bottom
|
|
b = rect.y + rect.height + (h - rect.height);
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (t < 0 || Math.round(b) > Math.round(space.height)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.y, space.height - (rect.y + rect.height));
|
|
|
|
// new bottom offset
|
|
b = rect.y + rect.height + d;
|
|
|
|
// resulting height
|
|
h = b - t;
|
|
|
|
// resulting width based on ratio
|
|
w = h / ratio;
|
|
|
|
// new left position
|
|
l = r - w;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
},
|
|
nw: function nw(rect, offset, space, ratio) {
|
|
var t, r, b, l, w, h, d;
|
|
|
|
// right and bottom are fixed
|
|
r = rect.x + rect.width;
|
|
b = rect.y + rect.height;
|
|
|
|
// intended left edge
|
|
l = limit(offset.x, 0, r);
|
|
|
|
// if is too small vertically
|
|
if (r - l < space.min.width) {
|
|
l = r - space.min.width;
|
|
}
|
|
|
|
// if should scale by ratio, pick height by ratio of new width
|
|
h = ratio ? (r - l) * ratio : limit(b - offset.y, space.min.height, b);
|
|
|
|
// check if has fallen below min width or height
|
|
if (h < space.min.height) {
|
|
h = space.min.height;
|
|
l = r - h / ratio;
|
|
}
|
|
|
|
// add height difference with original height to bottom
|
|
t = rect.y - (h - rect.height);
|
|
|
|
// check if any of the edges has moved out of the available space, if so,
|
|
// set max size of rectangle from original position
|
|
if (t < 0 || Math.round(b) > Math.round(space.height)) {
|
|
// smallest distance to edge of space
|
|
d = Math.min(rect.y, space.height - (rect.y + rect.height));
|
|
|
|
// new bottom offset
|
|
t = rect.y - d;
|
|
|
|
// resulting height
|
|
h = b - t;
|
|
|
|
// resulting width based on ratio
|
|
w = h / ratio;
|
|
|
|
// new left position
|
|
l = r - w;
|
|
}
|
|
|
|
return {
|
|
x: l,
|
|
y: t,
|
|
width: r - l,
|
|
height: b - t
|
|
};
|
|
}
|
|
};
|
|
|
|
/**
|
|
* CropArea
|
|
*/
|
|
return function () {
|
|
function CropArea() {
|
|
var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.createElement('div');
|
|
|
|
_classCallCheck(this, CropArea);
|
|
|
|
this._element = element;
|
|
|
|
this._interaction = null;
|
|
|
|
this._minWidth = 1;
|
|
this._minHeight = 1;
|
|
|
|
this._ratio = null;
|
|
|
|
this._rect = {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
|
|
this._space = {
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
|
|
this._rectChanged = false;
|
|
|
|
this._init();
|
|
}
|
|
|
|
_createClass(CropArea, [{
|
|
key: '_init',
|
|
value: function _init() {
|
|
this._element.className = 'slim-crop-area';
|
|
|
|
// lines
|
|
var lines = create('div', 'grid');
|
|
this._element.appendChild(lines);
|
|
|
|
// corner & edge resize buttons
|
|
for (var handler in resizers) {
|
|
if (!resizers.hasOwnProperty(handler)) {
|
|
continue;
|
|
}
|
|
var _btn = create('button', handler);
|
|
this._element.appendChild(_btn);
|
|
}
|
|
var btn = create('button', 'c');
|
|
this._element.appendChild(btn);
|
|
|
|
addEvents(document, Events.DOWN, this);
|
|
}
|
|
}, {
|
|
key: 'reset',
|
|
value: function reset() {
|
|
this._interaction = null;
|
|
|
|
this._rect = {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
|
|
this._rectChanged = true;
|
|
|
|
this._redraw();
|
|
|
|
this._element.dispatchEvent(new CustomEvent('change'));
|
|
}
|
|
}, {
|
|
key: 'rescale',
|
|
value: function rescale(scale) {
|
|
// no rescale
|
|
if (scale === 1) {
|
|
return;
|
|
}
|
|
|
|
this._interaction = null;
|
|
|
|
this._rectChanged = true;
|
|
|
|
this._rect.x *= scale;
|
|
this._rect.y *= scale;
|
|
this._rect.width *= scale;
|
|
this._rect.height *= scale;
|
|
|
|
this._redraw();
|
|
|
|
this._element.dispatchEvent(new CustomEvent('change'));
|
|
}
|
|
}, {
|
|
key: 'limit',
|
|
value: function limit(width, height) {
|
|
this._space.width = width;
|
|
this._space.height = height;
|
|
}
|
|
}, {
|
|
key: 'offset',
|
|
value: function offset(x, y) {
|
|
this._space.x = x;
|
|
this._space.y = y;
|
|
}
|
|
}, {
|
|
key: 'resize',
|
|
value: function resize(x, y, width, height) {
|
|
this._interaction = null;
|
|
|
|
this._rect = {
|
|
x: limit(x, 0, this._space.width - this._minWidth),
|
|
y: limit(y, 0, this._space.height - this._minHeight),
|
|
width: limit(width, this._minWidth, this._space.width),
|
|
height: limit(height, this._minHeight, this._space.height)
|
|
};
|
|
|
|
this._rectChanged = true;
|
|
|
|
this._redraw();
|
|
|
|
this._element.dispatchEvent(new CustomEvent('change'));
|
|
}
|
|
}, {
|
|
key: 'handleEvent',
|
|
value: function handleEvent(e) {
|
|
switch (e.type) {
|
|
case 'touchstart':
|
|
case 'pointerdown':
|
|
case 'mousedown':
|
|
{
|
|
this._onStartDrag(e);
|
|
}
|
|
break;
|
|
case 'touchmove':
|
|
case 'pointermove':
|
|
case 'mousemove':
|
|
{
|
|
this._onDrag(e);
|
|
}
|
|
break;
|
|
case 'touchend':
|
|
case 'touchcancel':
|
|
case 'pointerup':
|
|
case 'mouseup':
|
|
{
|
|
this._onStopDrag(e);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onStartDrag',
|
|
value: function _onStartDrag(e) {
|
|
// is not my event?
|
|
if (!this._element.contains(e.target)) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
// listen to drag related events
|
|
addEvents(document, Events.MOVE, this);
|
|
addEvents(document, Events.UP, this);
|
|
|
|
this._interaction = {
|
|
type: e.target.className,
|
|
offset: getEventOffsetScroll(e)
|
|
};
|
|
|
|
this._interaction.offset.x -= this._rect.x;
|
|
this._interaction.offset.y -= this._rect.y;
|
|
|
|
// now dragging
|
|
this._element.setAttribute('data-dragging', 'true');
|
|
|
|
// start the redraw update loop
|
|
this._redraw();
|
|
}
|
|
}, {
|
|
key: '_onDrag',
|
|
value: function _onDrag(e) {
|
|
e.preventDefault();
|
|
|
|
// get local offset for this event
|
|
var offset = getEventOffsetScroll(e);
|
|
var type = this._interaction.type;
|
|
|
|
// drag
|
|
if (type === 'c') {
|
|
this._rect.x = limit(offset.x - this._interaction.offset.x, 0, this._space.width - this._rect.width);
|
|
this._rect.y = limit(offset.y - this._interaction.offset.y, 0, this._space.height - this._rect.height);
|
|
} else if (resizers[type]) {
|
|
// resize
|
|
this._rect = resizers[type](this._rect, {
|
|
x: offset.x - this._space.x,
|
|
y: offset.y - this._space.y
|
|
}, {
|
|
x: 0,
|
|
y: 0,
|
|
width: this._space.width,
|
|
height: this._space.height,
|
|
min: {
|
|
width: this._minWidth,
|
|
height: this._minHeight
|
|
}
|
|
}, this._ratio);
|
|
}
|
|
|
|
this._rectChanged = true;
|
|
|
|
// dispatch
|
|
this._element.dispatchEvent(new CustomEvent('input'));
|
|
}
|
|
}, {
|
|
key: '_onStopDrag',
|
|
value: function _onStopDrag(e) {
|
|
e.preventDefault();
|
|
|
|
// stop listening to drag related events
|
|
removeEvents(document, Events.MOVE, this);
|
|
removeEvents(document, Events.UP, this);
|
|
|
|
// no longer interacting, so no need to redraw
|
|
this._interaction = null;
|
|
|
|
// now dragging
|
|
this._element.setAttribute('data-dragging', 'false');
|
|
|
|
// fire change event
|
|
this._element.dispatchEvent(new CustomEvent('change'));
|
|
}
|
|
}, {
|
|
key: '_redraw',
|
|
value: function _redraw() {
|
|
var _this = this;
|
|
|
|
if (this._rectChanged) {
|
|
var transform = 'translate(' + this._rect.x + 'px,' + this._rect.y + 'px);';
|
|
this._element.style.cssText = '\n\t\t\t\t\t-webkit-transform: ' + transform + ';\n\t\t\t\t\ttransform: ' + transform + ';\n\t\t\t\t\twidth:' + this._rect.width + 'px;\n\t\t\t\t\theight:' + this._rect.height + 'px;\n\t\t\t\t';
|
|
|
|
this._rectChanged = false;
|
|
}
|
|
|
|
// if no longer interacting with crop area stop here
|
|
if (!this._interaction) {
|
|
return;
|
|
}
|
|
|
|
// redraw
|
|
requestAnimationFrame(function () {
|
|
return _this._redraw();
|
|
});
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
this._interaction = false;
|
|
this._rectChanged = false;
|
|
|
|
removeEvents(document, Events.DOWN, this);
|
|
removeEvents(document, Events.MOVE, this);
|
|
removeEvents(document, Events.UP, this);
|
|
|
|
removeElement(this._element);
|
|
}
|
|
}, {
|
|
key: 'element',
|
|
get: function get() {
|
|
return this._element;
|
|
}
|
|
}, {
|
|
key: 'space',
|
|
get: function get() {
|
|
return this._space;
|
|
}
|
|
}, {
|
|
key: 'area',
|
|
get: function get() {
|
|
var x = this._rect.x / this._space.width;
|
|
var y = this._rect.y / this._space.height;
|
|
var width = this._rect.width / this._space.width;
|
|
var height = this._rect.height / this._space.height;
|
|
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
width: width,
|
|
height: height
|
|
};
|
|
}
|
|
}, {
|
|
key: 'dirty',
|
|
get: function get() {
|
|
return this._rect.x !== 0 || this._rect.y !== 0 || this._rect.width !== 0 || this._rect.height !== 0;
|
|
}
|
|
}, {
|
|
key: 'minWidth',
|
|
set: function set(value) {
|
|
this._minWidth = Math.max(value, 1);
|
|
}
|
|
}, {
|
|
key: 'minHeight',
|
|
set: function set(value) {
|
|
this._minHeight = Math.max(value, 1);
|
|
}
|
|
}, {
|
|
key: 'ratio',
|
|
set: function set(value) {
|
|
this._ratio = value;
|
|
}
|
|
}]);
|
|
|
|
return CropArea;
|
|
}();
|
|
}();
|
|
|
|
var ImageEditor = function () {
|
|
/**
|
|
* ImageEditor
|
|
* @param element
|
|
* @param options
|
|
* @constructor
|
|
*/
|
|
|
|
var CropAreaEvents = ['input', 'change'];
|
|
|
|
var ImageEditor = function () {
|
|
function ImageEditor() {
|
|
var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.createElement('div');
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
_classCallCheck(this, ImageEditor);
|
|
|
|
this._element = element;
|
|
this._options = mergeOptions(ImageEditor.options(), options);
|
|
|
|
this._ratio = null;
|
|
this._output = null;
|
|
this._rotating = false;
|
|
|
|
this._input = null;
|
|
|
|
this._preview = null;
|
|
this._previewBlurred = null;
|
|
|
|
this._blurredPreview = false;
|
|
|
|
this._cropper = null;
|
|
this._straightCrop = null;
|
|
this._previewWrapper = null;
|
|
this._currentWindowSize = {};
|
|
|
|
this._btnGroup = null;
|
|
this._maskFrame = null;
|
|
|
|
this._dirty = false;
|
|
|
|
this._wrapperRotation = 0;
|
|
this._wrapperScale = 1.0;
|
|
|
|
this._init();
|
|
}
|
|
|
|
_createClass(ImageEditor, [{
|
|
key: '_init',
|
|
value: function _init() {
|
|
var _this2 = this;
|
|
|
|
this._element.className = 'slim-image-editor';
|
|
|
|
// container
|
|
this._container = create('div', 'slim-container');
|
|
|
|
// wrapper
|
|
this._wrapper = create('div', 'slim-wrapper');
|
|
|
|
// photo crop mark container
|
|
this._stage = create('div', 'slim-stage');
|
|
this._container.appendChild(this._stage);
|
|
|
|
// create crop marks
|
|
this._cropper = new CropArea();
|
|
CropAreaEvents.forEach(function (e) {
|
|
_this2._cropper.element.addEventListener(e, _this2);
|
|
});
|
|
this._stage.appendChild(this._cropper.element);
|
|
|
|
// canvas ghost
|
|
this._previewWrapper = create('div', 'slim-image-editor-preview slim-crop-preview');
|
|
this._previewBlurred = create('canvas', 'slim-crop-blur');
|
|
this._previewWrapper.appendChild(this._previewBlurred);
|
|
this._wrapper.appendChild(this._previewWrapper);
|
|
|
|
this._previewMask = create('div', 'slim-crop-mask');
|
|
this._preview = create('img');
|
|
this._previewMask.appendChild(this._preview);
|
|
this._cropper.element.appendChild(this._previewMask);
|
|
|
|
// buttons
|
|
this._btnGroup = create('div', 'slim-editor-btn-group');
|
|
ImageEditor.Buttons.forEach(function (c) {
|
|
var prop = capitalizeFirstLetter(c);
|
|
var label = _this2._options['button' + prop + 'Label'];
|
|
var title = _this2._options['button' + prop + 'Title'];
|
|
var className = _this2._options['button' + prop + 'ClassName'];
|
|
var btn = create('button', 'slim-editor-btn slim-btn-' + c + (className ? ' ' + className : ''));
|
|
btn.innerHTML = label;
|
|
btn.title = title || label;
|
|
btn.type = 'button';
|
|
btn.setAttribute('data-action', c);
|
|
btn.addEventListener('click', _this2);
|
|
_this2._btnGroup.appendChild(btn);
|
|
});
|
|
|
|
// utils
|
|
this._utilsGroup = create('div', 'slim-editor-utils-group');
|
|
|
|
// create rotation button
|
|
var btn = create('button', 'slim-editor-utils-btn slim-btn-rotate' + (this._options.buttonRotateClassName ? ' ' + this._options.buttonRotateClassName : ''));
|
|
btn.setAttribute('data-action', 'rotate');
|
|
btn.addEventListener('click', this);
|
|
btn.title = this._options.buttonRotateTitle;
|
|
this._utilsGroup.appendChild(btn);
|
|
|
|
this._container.appendChild(this._wrapper);
|
|
|
|
this._element.appendChild(this._container);
|
|
this._element.appendChild(this._utilsGroup);
|
|
this._element.appendChild(this._btnGroup);
|
|
}
|
|
}, {
|
|
key: 'dirty',
|
|
value: function dirty() {
|
|
this._dirty = true;
|
|
}
|
|
}, {
|
|
key: 'handleEvent',
|
|
value: function handleEvent(e) {
|
|
switch (e.type) {
|
|
case 'click':
|
|
this._onClick(e);
|
|
break;
|
|
case 'change':
|
|
this._onGridChange(e);
|
|
break;
|
|
case 'input':
|
|
this._onGridInput(e);
|
|
break;
|
|
case 'keydown':
|
|
this._onKeyDown(e);
|
|
break;
|
|
case 'resize':
|
|
this._onResize(e);
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onKeyDown',
|
|
value: function _onKeyDown(e) {
|
|
switch (e.keyCode) {
|
|
case Key.RETURN:
|
|
{
|
|
this._confirm();
|
|
break;
|
|
}
|
|
case Key.ESC:
|
|
{
|
|
this._cancel();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onClick',
|
|
value: function _onClick(e) {
|
|
if (e.target.classList.contains('slim-btn-cancel')) {
|
|
this._cancel();
|
|
}
|
|
|
|
if (e.target.classList.contains('slim-btn-confirm')) {
|
|
this._confirm();
|
|
}
|
|
|
|
if (e.target.classList.contains('slim-btn-rotate')) {
|
|
this._rotate();
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onResize',
|
|
value: function _onResize() {
|
|
// remember window size
|
|
this._currentWindowSize = {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
};
|
|
|
|
// redraw the image editor based on new dimensions
|
|
this._redraw();
|
|
|
|
this._redrawCropper(this._cropper.area);
|
|
|
|
this._updateWrapperScale();
|
|
|
|
// apply rotation and scale
|
|
this._redrawWrapper();
|
|
}
|
|
}, {
|
|
key: '_redrawWrapper',
|
|
value: function _redrawWrapper() {
|
|
var matrix = snabbt.createMatrix();
|
|
matrix.scale(this._wrapperScale, this._wrapperScale);
|
|
matrix.rotateZ(this._wrapperRotation * (Math.PI / 180));
|
|
snabbt.setElementTransform(this._previewWrapper, matrix);
|
|
}
|
|
}, {
|
|
key: '_onGridInput',
|
|
value: function _onGridInput() {
|
|
this._redrawCropMask();
|
|
}
|
|
}, {
|
|
key: '_onGridChange',
|
|
value: function _onGridChange() {
|
|
this._redrawCropMask();
|
|
}
|
|
}, {
|
|
key: '_updateWrapperRotation',
|
|
value: function _updateWrapperRotation() {
|
|
if (this._options.minSize.width > this._input.height || this._options.minSize.height > this._input.width) {
|
|
this._wrapperRotation += 180;
|
|
} else {
|
|
this._wrapperRotation += 90;
|
|
}
|
|
}
|
|
}, {
|
|
key: '_updateWrapperScale',
|
|
value: function _updateWrapperScale() {
|
|
// test if is tilted
|
|
var isTilted = this._wrapperRotation % 180 !== 0;
|
|
|
|
// if tilted determine correct scale factor
|
|
if (isTilted) {
|
|
// maximum size
|
|
var maxWidth = this._container.offsetWidth;
|
|
var maxHeight = this._container.offsetHeight;
|
|
|
|
// get wrapper size
|
|
var wrapperWidth = this._wrapper.offsetHeight;
|
|
var wrapperHeight = this._wrapper.offsetWidth;
|
|
|
|
var scalar = maxWidth / wrapperWidth;
|
|
if (scalar * wrapperHeight > maxHeight) {
|
|
scalar = maxHeight / wrapperHeight;
|
|
}
|
|
|
|
this._wrapperScale = scalar;
|
|
} else {
|
|
this._wrapperScale = 1.0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Action handlers
|
|
*/
|
|
|
|
}, {
|
|
key: '_cancel',
|
|
value: function _cancel() {
|
|
if (this._rotating) {
|
|
return;
|
|
}
|
|
|
|
this._element.dispatchEvent(new CustomEvent('cancel'));
|
|
}
|
|
}, {
|
|
key: '_confirm',
|
|
value: function _confirm() {
|
|
if (this._rotating) {
|
|
return;
|
|
}
|
|
|
|
var isTilted = this._wrapperRotation % 180 !== 0;
|
|
var area = this._cropper.area;
|
|
|
|
var result = scaleRect(area, isTilted ? this._input.height : this._input.width, isTilted ? this._input.width : this._input.height);
|
|
|
|
this._element.dispatchEvent(new CustomEvent('confirm', {
|
|
detail: {
|
|
rotation: this._wrapperRotation % 360,
|
|
crop: result
|
|
}
|
|
}));
|
|
}
|
|
}, {
|
|
key: '_rotate',
|
|
value: function _rotate() {
|
|
var _this3 = this;
|
|
|
|
if (this._rotating) {
|
|
return;
|
|
}
|
|
|
|
this._rotating = true;
|
|
|
|
// rotate!
|
|
this._updateWrapperRotation();
|
|
|
|
// only pass current rect if is 1:1 or free
|
|
var rect = this.ratio === 1 || this._ratio === null ? this._cropper.area : null;
|
|
if (rect) {
|
|
rotate(rect, 90);
|
|
}
|
|
|
|
// wrapper might also need to be scaled
|
|
this._updateWrapperScale();
|
|
|
|
// hide the cropper
|
|
this._hideCropper();
|
|
|
|
// rotation effect
|
|
snabbt(this._previewWrapper, {
|
|
rotation: [0, 0, this._wrapperRotation * (Math.PI / 180)],
|
|
scale: [this._wrapperScale, this._wrapperScale],
|
|
easing: 'spring',
|
|
springConstant: 0.8,
|
|
springDeceleration: 0.65,
|
|
complete: function complete() {
|
|
// redraws auto cropper
|
|
_this3._redrawCropper(rect);
|
|
|
|
// shows the cropper
|
|
_this3._showCropper();
|
|
|
|
// done rotating
|
|
_this3._rotating = false;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: '_showCropper',
|
|
value: function _showCropper() {
|
|
snabbt(this._stage, {
|
|
easing: 'ease',
|
|
duration: 250,
|
|
fromOpacity: 0,
|
|
opacity: 1.0
|
|
});
|
|
}
|
|
}, {
|
|
key: '_hideCropper',
|
|
value: function _hideCropper() {
|
|
snabbt(this._stage, {
|
|
duration: 0,
|
|
fromOpacity: 0,
|
|
opacity: 0
|
|
});
|
|
}
|
|
}, {
|
|
key: '_redrawCropMask',
|
|
value: function _redrawCropMask() {
|
|
var _this4 = this;
|
|
|
|
// get rotation
|
|
var rotation = this._wrapperRotation % 360;
|
|
|
|
// get scale
|
|
var scale = this._wrapperScale;
|
|
|
|
// get image size
|
|
var canvas = {
|
|
width: this._wrapper.offsetWidth,
|
|
height: this._wrapper.offsetHeight
|
|
};
|
|
|
|
// get default mask cropper area
|
|
var mask = this._cropper.area;
|
|
var preview = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
if (rotation === 0) {
|
|
preview.x = -mask.x;
|
|
preview.y = -mask.y;
|
|
} else if (rotation === 90) {
|
|
preview.x = -(1 - mask.y);
|
|
preview.y = -mask.x;
|
|
} else if (rotation === 180) {
|
|
preview.x = -(1 - mask.x);
|
|
preview.y = -(1 - mask.y);
|
|
} else if (rotation === 270) {
|
|
preview.x = -mask.y;
|
|
preview.y = -(1 - mask.x);
|
|
}
|
|
|
|
// scale rect to fit canvas
|
|
preview.x *= canvas.width;
|
|
preview.y *= canvas.height;
|
|
|
|
// update on next frame (so it's in sync with crop area redraw)
|
|
cancelAnimationFrame(this._maskFrame);
|
|
this._maskFrame = requestAnimationFrame(function () {
|
|
var transform = 'scale(' + scale + ') rotate(' + -rotation + 'deg) translate(' + preview.x + 'px, ' + preview.y + 'px);';
|
|
_this4._preview.style.cssText = '\n\t\t\t\t\twidth: ' + _this4._previewSize.width + 'px;\n\t\t\t\t\theight: ' + _this4._previewSize.height + 'px;\n\t\t\t\t\t-webkit-transform: ' + transform + ';\n\t\t\t\t\ttransform: ' + transform + ';\n\t\t\t\t';
|
|
});
|
|
}
|
|
}, {
|
|
key: 'open',
|
|
value: function open(image, ratio, crop, rotation, complete) {
|
|
var _this5 = this;
|
|
|
|
// test if is same image
|
|
if (this._input && !this._dirty && this._ratio === ratio) {
|
|
complete();
|
|
return;
|
|
}
|
|
|
|
// remember current window size
|
|
this._currentWindowSize = {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
};
|
|
|
|
// reset dirty value
|
|
this._dirty = false;
|
|
|
|
// reset rotation
|
|
this._wrapperRotation = rotation || 0;
|
|
|
|
// we'll always have to blur the preview of a newly opened image
|
|
this._blurredPreview = false;
|
|
|
|
// set ratio
|
|
this._ratio = ratio;
|
|
|
|
// reset preview size
|
|
this._previewSize = null;
|
|
|
|
// hide editor
|
|
this._element.style.opacity = '0';
|
|
|
|
// set as new input image
|
|
this._input = image;
|
|
|
|
// calculate crop
|
|
var tilted = rotation % 180 !== 0;
|
|
var relativeCrop = divideRect(crop, tilted ? image.height : image.width, tilted ? image.width : image.height);
|
|
|
|
// preview has now loaded
|
|
this._preview.onload = function () {
|
|
// reset onload listener
|
|
_this5._preview.onload = null;
|
|
|
|
// setup cropper
|
|
_this5._cropper.ratio = _this5.ratio;
|
|
|
|
// redraw view (for first time)
|
|
_this5._redraw();
|
|
|
|
// redraw cropper
|
|
_this5._redrawCropper(relativeCrop);
|
|
|
|
// done
|
|
complete();
|
|
|
|
// fade in
|
|
_this5._element.style.opacity = '';
|
|
};
|
|
|
|
// load lower resolution preview image
|
|
this._preview.src = '';
|
|
this._preview.src = cloneCanvasScaled(this._input, Math.min(this._container.offsetWidth / this._input.width, this._container.offsetHeight / this._input.height) * this._options.devicePixelRatio).toDataURL();
|
|
}
|
|
}, {
|
|
key: '_redrawCropper',
|
|
value: function _redrawCropper(rect) {
|
|
var isTilted = this._wrapperRotation % 180 !== 0;
|
|
|
|
// image ratio
|
|
var imageRatio = isTilted ? this._input.height / this._input.width : this._input.width / this._input.height;
|
|
|
|
// get dimensions of image wrapper
|
|
var width = this._wrapper.offsetWidth;
|
|
var height = this._wrapper.offsetHeight;
|
|
|
|
// get space
|
|
var maxWidth = this._container.offsetWidth;
|
|
var maxHeight = this._container.offsetHeight;
|
|
|
|
// rescale wrapper
|
|
this._updateWrapperScale();
|
|
|
|
// position cropper container to fit wrapper
|
|
var sw = this._wrapperScale * (isTilted ? height : width);
|
|
var sh = this._wrapperScale * (isTilted ? width : height);
|
|
var sx = isTilted ? (maxWidth - sw) * 0.5 : this._wrapper.offsetLeft;
|
|
var sy = isTilted ? (maxHeight - sh) * 0.5 : this._wrapper.offsetTop;
|
|
|
|
this._stage.style.cssText = '\n\t\t\t\tleft:' + sx + 'px;\n\t\t\t\ttop:' + sy + 'px;\n\t\t\t\twidth:' + sw + 'px;\n\t\t\t\theight:' + sh + 'px;\n\t\t\t';
|
|
|
|
// set new size limit for crops
|
|
// use image ratio so we have exact amount of pixels
|
|
this._cropper.limit(sw, sw / imageRatio);
|
|
this._cropper.offset(sx + this._element.offsetLeft, sy + this._element.offsetTop);
|
|
|
|
// set min and max height of cropper
|
|
this._cropper.minWidth = this._wrapperScale * this._options.minSize.width * this.scalar;
|
|
this._cropper.minHeight = this._wrapperScale * this._options.minSize.height * this.scalar;
|
|
|
|
// set crop rect
|
|
var crop = null;
|
|
if (rect) {
|
|
crop = {
|
|
x: rect.x * sw,
|
|
y: rect.y * sh,
|
|
width: rect.width * sw,
|
|
height: rect.height * sh
|
|
};
|
|
} else {
|
|
crop = getAutoCropRect(sw, sh, this._ratio || sh / sw);
|
|
}
|
|
|
|
this._cropper.resize(crop.x, crop.y, crop.width, crop.height);
|
|
}
|
|
}, {
|
|
key: '_redraw',
|
|
value: function _redraw() {
|
|
// image ratio
|
|
var ratio = this._input.height / this._input.width;
|
|
|
|
// determine rounded size
|
|
var maxWidth = this._container.clientWidth;
|
|
var maxHeight = this._container.clientHeight;
|
|
|
|
var width = maxWidth;
|
|
var height = width * ratio;
|
|
|
|
if (height > maxHeight) {
|
|
height = maxHeight;
|
|
width = height / ratio;
|
|
}
|
|
|
|
width = Math.round(width);
|
|
height = Math.round(height);
|
|
|
|
// rescale and recenter wrapper
|
|
var x = (maxWidth - width) / 2;
|
|
var y = (maxHeight - height) / 2;
|
|
|
|
this._wrapper.style.cssText = '\n\t\t\t\tleft:' + x + 'px;\n\t\t\t\ttop:' + y + 'px;\n\t\t\t\twidth:' + width + 'px;\n\t\t\t\theight:' + height + 'px;\n\t\t\t';
|
|
|
|
// set image size based on container dimensions
|
|
this._previewBlurred.style.cssText = '\n\t\t\t\twidth:' + width + 'px;\n\t\t\t\theight:' + height + 'px;\n\t\t\t';
|
|
|
|
this._preview.style.cssText = '\n\t\t\t\twidth:' + width + 'px;\n\t\t\t\theight:' + height + 'px;\n\t\t\t';
|
|
|
|
this._previewSize = {
|
|
width: width,
|
|
height: height
|
|
};
|
|
|
|
// scale and blur the blurry preview
|
|
if (!this._blurredPreview) {
|
|
this._previewBlurred.width = 300;
|
|
this._previewBlurred.height = this._previewBlurred.width * ratio;
|
|
|
|
copyCanvas(this._input, this._previewBlurred);
|
|
|
|
blurCanvas(this._previewBlurred, 3);
|
|
|
|
this._blurredPreview = true;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show() {
|
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
|
|
|
|
// test if window size has changed since previous showing
|
|
if (this._currentWindowSize.width !== window.innerWidth || this._currentWindowSize.height !== window.innerHeight) {
|
|
// if so, reposition elements
|
|
this._redraw();
|
|
|
|
// redraw cropper position
|
|
this._redrawCropper(this._cropper.area);
|
|
}
|
|
|
|
// listen to keydown so we can close or confirm with RETURN / ESC
|
|
document.addEventListener('keydown', this);
|
|
|
|
// when window is scaled we want to resize the editor
|
|
window.addEventListener('resize', this);
|
|
|
|
// fade in preview
|
|
var rotation = this._wrapperRotation * (Math.PI / 180);
|
|
snabbt(this._previewWrapper, {
|
|
fromRotation: [0, 0, rotation],
|
|
rotation: [0, 0, rotation],
|
|
fromPosition: [0, 0, 0],
|
|
position: [0, 0, 0],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
fromScale: [this._wrapperScale - 0.02, this._wrapperScale - 0.02],
|
|
scale: [this._wrapperScale, this._wrapperScale],
|
|
easing: 'spring',
|
|
springConstant: 0.3,
|
|
springDeceleration: 0.85,
|
|
delay: 450,
|
|
complete: function complete() {
|
|
// don't reset transforms because we need rotation to stick
|
|
}
|
|
});
|
|
|
|
if (this._cropper.dirty) {
|
|
// now show cropper
|
|
snabbt(this._stage, {
|
|
fromPosition: [0, 0, 0],
|
|
position: [0, 0, 0],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
duration: 250,
|
|
delay: 850,
|
|
complete: function complete() {
|
|
resetTransforms(this);
|
|
callback();
|
|
}
|
|
});
|
|
} else {
|
|
// now show cropper
|
|
snabbt(this._stage, {
|
|
fromPosition: [0, 0, 0],
|
|
position: [0, 0, 0],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
duration: 250,
|
|
delay: 1000,
|
|
complete: function complete() {
|
|
resetTransforms(this);
|
|
}
|
|
});
|
|
}
|
|
|
|
// now show buttons
|
|
snabbt(this._btnGroup.childNodes, {
|
|
fromScale: [0.9, 0.9],
|
|
scale: [1, 1],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
delay: function delay(i) {
|
|
return 1000 + i * 100;
|
|
},
|
|
easing: 'spring',
|
|
springConstant: 0.3,
|
|
springDeceleration: 0.85,
|
|
complete: function complete() {
|
|
resetTransforms(this);
|
|
}
|
|
});
|
|
|
|
snabbt(this._utilsGroup.childNodes, {
|
|
fromScale: [0.9, 0.9],
|
|
scale: [1, 1],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
easing: 'spring',
|
|
springConstant: 0.3,
|
|
springDeceleration: 0.85,
|
|
delay: 1250,
|
|
complete: function complete() {
|
|
resetTransforms(this);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'hide',
|
|
value: function hide() {
|
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
|
|
|
|
// no more need to listen to keydown
|
|
document.removeEventListener('keydown', this);
|
|
|
|
// no more need to resize editor when window is scaled
|
|
window.removeEventListener('resize', this);
|
|
|
|
// fade out buttons
|
|
snabbt(this._utilsGroup.childNodes, {
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
duration: 250
|
|
});
|
|
|
|
snabbt(this._btnGroup.childNodes, {
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
delay: 200,
|
|
duration: 350
|
|
});
|
|
|
|
snabbt([this._stage, this._previewWrapper], {
|
|
fromPosition: [0, 0, 0],
|
|
position: [0, -250, 0],
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
easing: 'spring',
|
|
springConstant: 0.3,
|
|
springDeceleration: 0.75,
|
|
delay: 250,
|
|
allDone: function allDone() {
|
|
callback();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
var _this6 = this;
|
|
|
|
nodeListToArray(this._btnGroup.children).forEach(function (btn) {
|
|
btn.removeEventListener('click', _this6);
|
|
});
|
|
|
|
CropAreaEvents.forEach(function (e) {
|
|
_this6._cropper.element.removeEventListener(e, _this6);
|
|
});
|
|
|
|
this._cropper.destroy();
|
|
|
|
// if still attached to DOM, detach
|
|
if (this._element.parentNode) {
|
|
removeElement(this._element);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'showRotateButton',
|
|
set: function set(enabled) {
|
|
if (enabled) {
|
|
this._element.classList.remove('slim-rotation-disabled');
|
|
} else {
|
|
this._element.classList.add('slim-rotation-disabled');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'element',
|
|
get: function get() {
|
|
return this._element;
|
|
}
|
|
}, {
|
|
key: 'ratio',
|
|
get: function get() {
|
|
if (this._ratio === 'input') {
|
|
return this._input.height / this._input.width;
|
|
}
|
|
return this._ratio;
|
|
}
|
|
}, {
|
|
key: 'offset',
|
|
get: function get() {
|
|
return this._element.getBoundingClientRect();
|
|
}
|
|
}, {
|
|
key: 'original',
|
|
get: function get() {
|
|
return this._input;
|
|
}
|
|
}, {
|
|
key: 'scalar',
|
|
get: function get() {
|
|
return this._previewSize.width / this._input.width;
|
|
}
|
|
}], [{
|
|
key: 'options',
|
|
value: function options() {
|
|
return {
|
|
buttonCancelClassName: null,
|
|
buttonConfirmClassName: null,
|
|
buttonCancelLabel: 'Cancel',
|
|
buttonConfirmLabel: 'Confirm',
|
|
buttonCancelTitle: null,
|
|
buttonConfirmTitle: null,
|
|
|
|
buttonRotateTitle: 'Rotate',
|
|
buttonRotateClassName: null,
|
|
|
|
devicePixelRatio: null,
|
|
|
|
minSize: {
|
|
width: 0,
|
|
height: 0
|
|
}
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return ImageEditor;
|
|
}();
|
|
|
|
ImageEditor.Buttons = ['cancel', 'confirm'];
|
|
|
|
return ImageEditor;
|
|
}(CropArea);
|
|
|
|
var FileHopper = function () {
|
|
/**
|
|
* FileHopper
|
|
* @param element
|
|
* @param options
|
|
* @constructor
|
|
*/
|
|
var DragDropEvents = ['dragenter', 'dragover', 'dragleave', 'drop'];
|
|
|
|
return function () {
|
|
function FileHopper() {
|
|
var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.createElement('div');
|
|
|
|
_classCallCheck(this, FileHopper);
|
|
|
|
this._element = element;
|
|
this._accept = [];
|
|
this._allowURLs = false;
|
|
|
|
this._dragPath = null;
|
|
|
|
this._init();
|
|
}
|
|
|
|
// public properties
|
|
|
|
|
|
_createClass(FileHopper, [{
|
|
key: 'isValidDataTransfer',
|
|
value: function isValidDataTransfer(dataTransfer) {
|
|
if (dataTransfer.files && dataTransfer.files.length) {
|
|
return this.areValidDataTransferFiles(dataTransfer.files);
|
|
}
|
|
|
|
if (dataTransfer.items && dataTransfer.items.length) {
|
|
return this.areValidDataTransferItems(dataTransfer.items);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: 'areValidDataTransferFiles',
|
|
value: function areValidDataTransferFiles(files) {
|
|
if (this._accept.length && files) {
|
|
return this._accept.indexOf(files[0].type) !== -1;
|
|
}
|
|
return true;
|
|
}
|
|
}, {
|
|
key: 'areValidDataTransferItems',
|
|
value: function areValidDataTransferItems(items) {
|
|
if (this._accept.length && items) {
|
|
// is possibly dropping url
|
|
if (this._allowURLs && items[0].kind === 'string') {
|
|
return null;
|
|
}
|
|
|
|
// is http website so firefox will not return file type
|
|
if (items[0].type && items[0].type.indexOf('application') === 0) {
|
|
return null;
|
|
}
|
|
|
|
return this._accept.indexOf(items[0].type) !== -1;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// public methods
|
|
|
|
}, {
|
|
key: 'reset',
|
|
value: function reset() {
|
|
this._element.files = null;
|
|
}
|
|
|
|
// private
|
|
|
|
}, {
|
|
key: '_init',
|
|
value: function _init() {
|
|
var _this7 = this;
|
|
|
|
this._element.className = 'slim-file-hopper';
|
|
|
|
DragDropEvents.forEach(function (e) {
|
|
_this7._element.addEventListener(e, _this7);
|
|
});
|
|
}
|
|
|
|
// the input has changed
|
|
|
|
}, {
|
|
key: 'handleEvent',
|
|
value: function handleEvent(e) {
|
|
switch (e.type) {
|
|
case 'dragenter':
|
|
case 'dragover':
|
|
this._onDragOver(e);
|
|
break;
|
|
case 'dragleave':
|
|
this._onDragLeave(e);
|
|
break;
|
|
case 'drop':
|
|
this._onDrop(e);
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onDrop',
|
|
value: function _onDrop(e) {
|
|
// prevents browser from opening image
|
|
e.preventDefault();
|
|
|
|
// test if a url was dropped
|
|
var remote = null;
|
|
|
|
if (this._allowURLs) {
|
|
var url = void 0;
|
|
var meta = void 0;
|
|
try {
|
|
url = e.dataTransfer.getData('url');
|
|
meta = e.dataTransfer.getData('text/html');
|
|
} catch (e) {
|
|
// nope nope nope (ie11 trouble)
|
|
}
|
|
|
|
if (meta && meta.length) {
|
|
var parsed = meta.match(/src\s*=\s*"(.+?)"/);
|
|
if (parsed) {
|
|
remote = parsed[1];
|
|
}
|
|
} else if (url && url.length) {
|
|
remote = url;
|
|
}
|
|
}
|
|
|
|
if (remote) {
|
|
this._element.files = [{ remote: remote }];
|
|
} else {
|
|
// nope, must have been a file
|
|
// test type in older browsers
|
|
var filesValidity = this.isValidDataTransfer(e.dataTransfer);
|
|
if (!filesValidity) {
|
|
// invalid files, stop here
|
|
this._element.dispatchEvent(new CustomEvent('file-invalid-drop'));
|
|
|
|
// no longer hovering
|
|
this._dragPath = null;
|
|
return;
|
|
}
|
|
|
|
// store dropped files on element files property, so can be accessed by same function as file input handler
|
|
this._element.files = e.dataTransfer.files;
|
|
}
|
|
|
|
// file has been dropped
|
|
this._element.dispatchEvent(new CustomEvent('file-drop', {
|
|
detail: getOffsetByEvent(e)
|
|
}));
|
|
|
|
// file list has changed, let's notify others
|
|
this._element.dispatchEvent(new CustomEvent('change'));
|
|
|
|
// no longer hovering
|
|
this._dragPath = null;
|
|
}
|
|
}, {
|
|
key: '_onDragOver',
|
|
value: function _onDragOver(e) {
|
|
// prevents browser from opening image
|
|
e.preventDefault();
|
|
|
|
// set drop effect
|
|
e.dataTransfer.dropEffect = 'copy';
|
|
|
|
// determin if is valid data
|
|
var dataValidity = this.isValidDataTransfer(e.dataTransfer);
|
|
// if validity is null is undetermined
|
|
if (dataValidity !== null && !dataValidity) {
|
|
// indicate drop mode to user
|
|
e.dataTransfer.dropEffect = 'none';
|
|
|
|
// invalid files, stop here
|
|
this._element.dispatchEvent(new CustomEvent('file-invalid'));
|
|
return;
|
|
}
|
|
|
|
// now hovering file over the area
|
|
if (!this._dragPath) {
|
|
this._dragPath = [];
|
|
}
|
|
|
|
// push location
|
|
this._dragPath.push(getOffsetByEvent(e));
|
|
|
|
// file is hovering over element
|
|
this._element.dispatchEvent(new CustomEvent('file-over', {
|
|
detail: {
|
|
x: last(this._dragPath).x,
|
|
y: last(this._dragPath).y
|
|
}
|
|
}));
|
|
}
|
|
}, {
|
|
key: '_onDragLeave',
|
|
value: function _onDragLeave(e) {
|
|
// user has dragged file out of element area
|
|
this._element.dispatchEvent(new CustomEvent('file-out', {
|
|
detail: getOffsetByEvent(e)
|
|
}));
|
|
|
|
// now longer hovering file
|
|
this._dragPath = null;
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
var _this8 = this;
|
|
|
|
DragDropEvents.forEach(function (e) {
|
|
_this8._element.removeEventListener(e, _this8);
|
|
});
|
|
|
|
removeElement(this._element);
|
|
|
|
this._element = null;
|
|
this._dragPath = null;
|
|
this._accept = null;
|
|
}
|
|
}, {
|
|
key: 'element',
|
|
get: function get() {
|
|
return this._element;
|
|
}
|
|
}, {
|
|
key: 'dragPath',
|
|
get: function get() {
|
|
return this._dragPath;
|
|
}
|
|
}, {
|
|
key: 'enabled',
|
|
get: function get() {
|
|
return this._element.style.display === '';
|
|
},
|
|
set: function set(value) {
|
|
this._element.style.display = value ? '' : 'none';
|
|
}
|
|
}, {
|
|
key: 'allowURLs',
|
|
set: function set(value) {
|
|
this._allowURLs = value;
|
|
}
|
|
}, {
|
|
key: 'accept',
|
|
set: function set(mimetypes) {
|
|
this._accept = mimetypes;
|
|
},
|
|
get: function get() {
|
|
return this._accept;
|
|
}
|
|
}]);
|
|
|
|
return FileHopper;
|
|
}();
|
|
}();
|
|
|
|
var Popover = function () {
|
|
/**
|
|
* Popover
|
|
*/
|
|
return function () {
|
|
function Popover() {
|
|
_classCallCheck(this, Popover);
|
|
|
|
this._element = null;
|
|
this._inner = null;
|
|
|
|
this._init();
|
|
}
|
|
|
|
_createClass(Popover, [{
|
|
key: '_init',
|
|
value: function _init() {
|
|
this._element = create('div', 'slim-popover');
|
|
this._element.setAttribute('data-state', 'off');
|
|
document.body.appendChild(this._element);
|
|
|
|
// prevent body scrolling on iOS 11.3
|
|
this._element.addEventListener('touchmove', function (e) {
|
|
e.preventDefault();
|
|
}, true);
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show() {
|
|
var _this9 = this;
|
|
|
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
|
|
|
|
// turn on
|
|
this._element.setAttribute('data-state', 'on');
|
|
|
|
// show and animate in
|
|
snabbt(this._element, {
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
duration: 350,
|
|
complete: function complete() {
|
|
// clean up transforms
|
|
resetTransforms(_this9._element);
|
|
|
|
// ready!
|
|
callback();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'hide',
|
|
value: function hide() {
|
|
var _this10 = this;
|
|
|
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
|
|
|
|
// animate out and hide
|
|
snabbt(this._element, {
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
duration: 500,
|
|
complete: function complete() {
|
|
// clean up transforms
|
|
resetTransforms(_this10._element);
|
|
|
|
// hide the editor
|
|
_this10._element.setAttribute('data-state', 'off');
|
|
|
|
// ready!
|
|
callback();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
if (!this._element.parentNode) {
|
|
return;
|
|
}
|
|
this._element.parentNode.removeChild(this._element);
|
|
this._element = null;
|
|
this._inner = null;
|
|
}
|
|
}, {
|
|
key: 'inner',
|
|
set: function set(element) {
|
|
this._inner = element;
|
|
if (this._element.firstChild) {
|
|
this._element.removeChild(this._element.firstChild);
|
|
}
|
|
this._element.appendChild(this._inner);
|
|
}
|
|
}, {
|
|
key: 'className',
|
|
set: function set(value) {
|
|
this._element.className = 'slim-popover' + (value === null ? '' : ' ' + value);
|
|
}
|
|
}]);
|
|
|
|
return Popover;
|
|
}();
|
|
}();
|
|
|
|
var intSplit = function intSplit(v, c) {
|
|
return v.split(c).map(function (v) {
|
|
return parseInt(v, 10);
|
|
});
|
|
};
|
|
|
|
var isWrapper = function isWrapper(element) {
|
|
return element.nodeName === 'DIV' || element.nodeName === 'SPAN';
|
|
};
|
|
|
|
var CropType = {
|
|
AUTO: 'auto',
|
|
INITIAL: 'initial',
|
|
MANUAL: 'manual'
|
|
};
|
|
|
|
var Rect = ['x', 'y', 'width', 'height'];
|
|
|
|
var HopperEvents = ['file-invalid-drop', 'file-invalid', 'file-drop', 'file-over', 'file-out', 'click'];
|
|
|
|
var ImageEditorEvents = ['cancel', 'confirm'];
|
|
|
|
var SlimButtons = ['remove', 'edit', 'download', 'upload'];
|
|
|
|
var SlimPopover = null;
|
|
var SlimCount = 0;
|
|
|
|
var SlimLoaderHTML = '\n<div class="slim-loader">\n\t<svg>\n\t\t<path class="slim-loader-background" fill="none" stroke-width="3" />\n\t\t<path class="slim-loader-foreground" fill="none" stroke-width="3" />\n\t</svg>\n</div>\n';
|
|
|
|
var SlimUploadStatusHTML = '\n<div class="slim-upload-status"></div>\n';
|
|
|
|
var stringToSize = function stringToSize(str) {
|
|
var size = str.split(',');
|
|
return {
|
|
width: parseInt(size[0], 10),
|
|
height: parseInt(size[1], 10)
|
|
};
|
|
};
|
|
|
|
var Slim = function () {
|
|
function Slim(element) {
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
_classCallCheck(this, Slim);
|
|
|
|
// create popover element if not already created
|
|
if (!SlimPopover) {
|
|
SlimPopover = new Popover();
|
|
}
|
|
|
|
// we create a new counter, we use this counter to determine if we need to clean up the popover
|
|
this._uid = SlimCount++;
|
|
|
|
// the options to use
|
|
this._options = mergeOptions(Slim.options(), options);
|
|
|
|
// test options correctness
|
|
if (this._options.forceSize) {
|
|
if (typeof this._options.forceSize === 'string') {
|
|
this._options.forceSize = stringToSize(this._options.forceSize);
|
|
}
|
|
this._options.ratio = this._options.forceSize.width + ':' + this._options.forceSize.height;
|
|
this._options.size = clone(this._options.forceSize);
|
|
}
|
|
|
|
// test for size set as string
|
|
if (typeof this._options.size === 'string') {
|
|
this._options.size = stringToSize(this._options.size);
|
|
}
|
|
|
|
// test for size set as string
|
|
if (typeof this._options.minSize === 'string') {
|
|
this._options.minSize = stringToSize(this._options.minSize);
|
|
}
|
|
|
|
// fix post formatting if is supplied as string
|
|
if (typeof this._options.post === 'string') {
|
|
this._options.post = this._options.post.split(',').map(function (part) {
|
|
return part.trim();
|
|
});
|
|
}
|
|
|
|
// reference to original element so we can restore original situation
|
|
this._originalElement = element;
|
|
this._originalElementInner = element.innerHTML;
|
|
this._originalElementAttributes = getElementAttributes(element);
|
|
|
|
// should be file input, image or slim wrapper, if not wrapper, wrap
|
|
if (!isWrapper(element)) {
|
|
this._element = wrap(element);
|
|
this._element.className = element.className;
|
|
element.className = '';
|
|
|
|
// ratio is used for CSS so let's set default attribute
|
|
this._element.setAttribute('data-ratio', this._options.ratio);
|
|
} else {
|
|
this._element = element;
|
|
}
|
|
this._element.classList.add('slim');
|
|
this._element.setAttribute('data-state', 'init');
|
|
|
|
// editor state
|
|
this._state = [];
|
|
|
|
// internal timer array for async processes
|
|
this._timers = [];
|
|
|
|
// the source element (can either be an input or an img)
|
|
this._input = null;
|
|
|
|
// the source element unique name if is input type file
|
|
this._inputReference = null;
|
|
|
|
// the output element (hidden input that contains the resulting json object)
|
|
this._output = null;
|
|
|
|
// current image ratio
|
|
this._ratio = null;
|
|
|
|
// was required field
|
|
this._isRequired = false;
|
|
|
|
// components
|
|
this._imageHopper = null;
|
|
this._imageEditor = null;
|
|
|
|
// progress path
|
|
this._progressEnabled = true;
|
|
|
|
// resulting data
|
|
this._data = {};
|
|
this._resetData();
|
|
|
|
// the circle below the mouse hover point
|
|
this._drip = null;
|
|
|
|
// had initial image
|
|
this._hasInitialImage = false;
|
|
|
|
// initial crop
|
|
this._initialCrop = this._options.crop;
|
|
|
|
// initial rotation
|
|
this._initialRotation = this._options.rotation && this._options.rotation % 90 === 0 ? this._options.rotation : null;
|
|
|
|
// set to true when destroy method is called, used to halt any timeouts or async processes
|
|
this._isBeingDestroyed = false;
|
|
|
|
// stop here if not supported
|
|
if (!Slim.supported) {
|
|
this._fallback();
|
|
} else {
|
|
// let's go!
|
|
this._init();
|
|
}
|
|
}
|
|
|
|
_createClass(Slim, [{
|
|
key: 'setRotation',
|
|
value: function setRotation(rotation, callback) {
|
|
if (typeof rotation !== 'number' && rotation % 90 !== 0) {
|
|
return;
|
|
}
|
|
|
|
this._data.actions.rotation = rotation;
|
|
var isTilted = this._data.actions.rotation % 180 !== 0;
|
|
|
|
if (this._data.input.image) {
|
|
var w = isTilted ? this._data.input.image.height : this._data.input.image.width;
|
|
var h = isTilted ? this._data.input.image.width : this._data.input.image.height;
|
|
this._data.actions.crop = getAutoCropRect(w, h, this._ratio);
|
|
this._data.actions.crop.type = CropType.AUTO;
|
|
}
|
|
|
|
if (this._data.input.image && callback) {
|
|
this._manualTransform(callback);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setSize',
|
|
value: function setSize(dimensions, callback) {
|
|
if (typeof dimensions === 'string') {
|
|
dimensions = stringToSize(dimensions);
|
|
}
|
|
|
|
if (!dimensions || !dimensions.width || !dimensions.height) {
|
|
return;
|
|
}
|
|
|
|
this._options.size = clone(dimensions);
|
|
this._data.actions.size = clone(dimensions);
|
|
|
|
// if a crop area is set do re-crop to conform to size
|
|
if (this._data.input.image && callback) {
|
|
this._manualTransform(callback);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setForceSize',
|
|
value: function setForceSize(dimensions, callback) {
|
|
if (typeof dimensions === 'string') {
|
|
dimensions = stringToSize(dimensions);
|
|
}
|
|
|
|
if (!dimensions || !dimensions.width || !dimensions.height) {
|
|
return;
|
|
}
|
|
|
|
this._options.size = clone(dimensions);
|
|
this._options.forceSize = clone(dimensions);
|
|
this._data.actions.size = clone(dimensions);
|
|
|
|
this.setRatio(this._options.forceSize.width + ':' + this._options.forceSize.height, callback);
|
|
}
|
|
}, {
|
|
key: 'setRatio',
|
|
value: function setRatio(ratio, callback) {
|
|
var _this11 = this;
|
|
|
|
if (!ratio || typeof ratio !== 'string') {
|
|
return;
|
|
}
|
|
|
|
this._options.ratio = ratio;
|
|
|
|
if (this._isFixedRatio()) {
|
|
|
|
var parts = intSplit(this._options.ratio, ':');
|
|
this._ratio = parts[1] / parts[0];
|
|
|
|
if (this._data.input.image && callback) {
|
|
this._cropAuto(function (data) {
|
|
_this11._scaleDropArea(_this11._ratio);
|
|
if (callback) {
|
|
callback(data);
|
|
}
|
|
});
|
|
} else {
|
|
if (this._data.input.image) {
|
|
this._data.actions.crop = getAutoCropRect(this._data.input.image.width, this._data.input.image.height, this._ratio);
|
|
this._data.actions.crop.type = CropType.AUTO;
|
|
}
|
|
|
|
this._scaleDropArea(this._ratio);
|
|
|
|
if (callback) {
|
|
callback(null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// methods
|
|
// Test if this Slim object has been bound to the given element
|
|
|
|
}, {
|
|
key: 'isAttachedTo',
|
|
value: function isAttachedTo(element) {
|
|
return this._element === element || this._originalElement === element;
|
|
}
|
|
}, {
|
|
key: 'isDetached',
|
|
value: function isDetached() {
|
|
return this._element.parentNode === null;
|
|
}
|
|
}, {
|
|
key: 'load',
|
|
value: function load(src) {
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
var callback = arguments[2];
|
|
|
|
if (typeof options === 'function') {
|
|
callback = options;
|
|
} else {
|
|
// store in options
|
|
this._options.crop = options.crop;
|
|
|
|
// set rotation
|
|
this._options.rotation = options.rotation;
|
|
|
|
// initial rotation
|
|
this._initialRotation = options.rotation && options.rotation % 90 === 0 ? options.rotation : null;
|
|
|
|
// set initial crop
|
|
this._initialCrop = this._options.crop;
|
|
}
|
|
|
|
this._load(src, callback, { blockPush: options.blockPush });
|
|
}
|
|
}, {
|
|
key: 'upload',
|
|
value: function upload(callback) {
|
|
this._doUpload(callback);
|
|
}
|
|
}, {
|
|
key: 'download',
|
|
value: function download() {
|
|
this._doDownload();
|
|
}
|
|
}, {
|
|
key: 'remove',
|
|
value: function remove() {
|
|
return this._doRemove();
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
this._doDestroy();
|
|
}
|
|
}, {
|
|
key: 'edit',
|
|
value: function edit() {
|
|
this._doEdit();
|
|
}
|
|
}, {
|
|
key: 'crop',
|
|
value: function crop(rect, callback) {
|
|
this._crop(rect.x, rect.y, rect.width, rect.height, callback);
|
|
}
|
|
}, {
|
|
key: 'containsImage',
|
|
value: function containsImage() {
|
|
return this._data.input.name !== null;
|
|
}
|
|
|
|
/**
|
|
* State Related
|
|
*/
|
|
|
|
}, {
|
|
key: '_canInstantEdit',
|
|
value: function _canInstantEdit() {
|
|
return this._options.instantEdit && !this._isInitialising;
|
|
}
|
|
}, {
|
|
key: '_getFileInput',
|
|
value: function _getFileInput() {
|
|
return this._element.querySelector('input[type=file]');
|
|
}
|
|
}, {
|
|
key: '_getInitialImage',
|
|
value: function _getInitialImage() {
|
|
return this._element.querySelector('img');
|
|
}
|
|
}, {
|
|
key: '_getInputElement',
|
|
value: function _getInputElement() {
|
|
return this._getFileInput() || this._getInitialImage();
|
|
}
|
|
}, {
|
|
key: '_getRatioSpacerElement',
|
|
value: function _getRatioSpacerElement() {
|
|
return this._element.children[0];
|
|
}
|
|
}, {
|
|
key: '_isImageOnly',
|
|
value: function _isImageOnly() {
|
|
return this._input.nodeName !== 'INPUT';
|
|
}
|
|
}, {
|
|
key: '_isFixedRatio',
|
|
value: function _isFixedRatio() {
|
|
return this._options.ratio.indexOf(':') !== -1;
|
|
}
|
|
}, {
|
|
key: '_isAutoCrop',
|
|
value: function _isAutoCrop() {
|
|
return this._data.actions.crop.type === CropType.AUTO;
|
|
}
|
|
}, {
|
|
key: '_toggleButton',
|
|
value: function _toggleButton(action, state) {
|
|
toggleDisplayBySelector('.slim-btn[data-action="' + action + '"]', state, this._element);
|
|
}
|
|
}, {
|
|
key: '_clearState',
|
|
value: function _clearState() {
|
|
this._state = [];
|
|
this._updateState();
|
|
}
|
|
}, {
|
|
key: '_removeState',
|
|
value: function _removeState(state) {
|
|
this._state = this._state.filter(function (item) {
|
|
return item !== state;
|
|
});
|
|
this._updateState();
|
|
}
|
|
}, {
|
|
key: '_addState',
|
|
value: function _addState(state) {
|
|
if (inArray(state, this._state)) {
|
|
return;
|
|
}
|
|
this._state.push(state);
|
|
this._updateState();
|
|
}
|
|
}, {
|
|
key: '_updateState',
|
|
value: function _updateState() {
|
|
if (!this._element) {
|
|
return;
|
|
}
|
|
this._element.setAttribute('data-state', this._state.join(','));
|
|
}
|
|
}, {
|
|
key: '_resetData',
|
|
value: function _resetData() {
|
|
// resets data object
|
|
this._data = {
|
|
server: null,
|
|
meta: clone(this._options.meta),
|
|
input: {
|
|
field: this._inputReference,
|
|
name: null,
|
|
type: null,
|
|
width: 0,
|
|
height: 0,
|
|
file: null
|
|
},
|
|
output: {
|
|
image: null,
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
actions: {
|
|
rotation: null,
|
|
crop: null,
|
|
size: null
|
|
}
|
|
};
|
|
|
|
// resets hidden input clone (has not yet been created when reset call in constructor, hence the check)
|
|
if (this._output) {
|
|
this._output.value = '';
|
|
}
|
|
|
|
// should reset file input
|
|
resetFileInput(this._getFileInput());
|
|
}
|
|
|
|
/**
|
|
* Initialisation
|
|
*/
|
|
|
|
}, {
|
|
key: '_init',
|
|
value: function _init() {
|
|
var _this12 = this;
|
|
|
|
// busy initialising
|
|
this._isInitialising = true;
|
|
|
|
// cropper root is not file input
|
|
this._addState('empty');
|
|
|
|
// define input reference field name
|
|
if (inArray('input', this._options.post)) {
|
|
this._inputReference = 'slim_input_' + this._uid;
|
|
}
|
|
|
|
// get input element
|
|
this._input = this._getInputElement();
|
|
|
|
// if no input supplied we'll automatically create one
|
|
if (!this._input) {
|
|
this._input = create('input');
|
|
this._input.type = 'file';
|
|
this._element.appendChild(this._input);
|
|
}
|
|
|
|
// get required state of input element
|
|
this._isRequired = this._input.required === true;
|
|
|
|
// set or create output field
|
|
this._output = this._element.querySelector('input[type=hidden]');
|
|
|
|
// if no output element defined we'll create one automagically
|
|
if (!this._output) {
|
|
this._output = create('input');
|
|
this._output.type = 'hidden';
|
|
this._output.name = this._input.name || this._options.defaultInputName;
|
|
this._element.appendChild(this._output);
|
|
} else {
|
|
var initialData = null;
|
|
try {
|
|
initialData = JSON.parse(this._output.value);
|
|
} catch (e) {}
|
|
if (initialData) {
|
|
var img = new Image();
|
|
img.src = initialData.output.image;
|
|
img.setAttribute('data-filename', initialData.output.name);
|
|
this._element.insertBefore(img, this._element.firstChild);
|
|
}
|
|
}
|
|
|
|
// prevent the original file input field from posting (value will be duplicated to output field)
|
|
this._input.removeAttribute('name');
|
|
|
|
// create drop area
|
|
var area = create('div', 'slim-area');
|
|
|
|
// test if contains initial image
|
|
var initialImage = this._getInitialImage();
|
|
var initialImageSrc = (initialImage || {}).src;
|
|
var initialImageName = initialImage ? initialImage.getAttribute('data-filename') : null;
|
|
|
|
if (initialImageSrc) {
|
|
this._hasInitialImage = true;
|
|
} else {
|
|
this._initialCrop = null;
|
|
this._initialRotation = null;
|
|
}
|
|
|
|
var resultHTML = '\n\t\t<div class="slim-result">\n\t\t\t<img class="in" style="opacity:0" ' + (initialImageSrc ? 'src="' + initialImageSrc + '"' : '') + '><img><img style="opacity:0">\n\t\t</div>';
|
|
|
|
// add drop overlay
|
|
if (this._isImageOnly()) {
|
|
area.innerHTML = '\n\t\t\t\t' + SlimLoaderHTML + '\n\t\t\t\t' + SlimUploadStatusHTML + '\n\t\t\t\t' + resultHTML + '\n\t\t\t\t<div class="slim-status"><div class="slim-label-loading">' + (this._options.labelLoading || '') + '</div></div>\n\t\t\t';
|
|
} else {
|
|
// if should post input data
|
|
if (inArray('input', this._options.post)) {
|
|
this._data.input.field = this._inputReference;
|
|
|
|
// if is sync post
|
|
// and should post input data
|
|
if (!this._options.service) {
|
|
this._input.name = this._inputReference;
|
|
}
|
|
}
|
|
|
|
// set common image mime type to the accept attribute
|
|
var mimetypes = void 0;
|
|
if (!this._input.hasAttribute('accept') || this._input.getAttribute('accept') === 'image/*') {
|
|
mimetypes = getCommonMimeTypes();
|
|
this._input.setAttribute('accept', mimetypes.join(','));
|
|
} else {
|
|
mimetypes = this._input.accept.split(',').map(function (mimetype) {
|
|
return mimetype.trim();
|
|
}).filter(function (mimetype) {
|
|
return mimetype.length > 0;
|
|
});
|
|
}
|
|
|
|
// setup hopper
|
|
this._imageHopper = new FileHopper();
|
|
this._imageHopper.accept = mimetypes;
|
|
this._imageHopper.allowURLs = typeof this._options.fetcher === 'string';
|
|
this._element.appendChild(this._imageHopper.element);
|
|
HopperEvents.forEach(function (e) {
|
|
_this12._imageHopper.element.addEventListener(e, _this12);
|
|
});
|
|
|
|
// render area
|
|
area.innerHTML = '\n\t\t\t\t' + SlimLoaderHTML + '\n\t\t\t\t' + SlimUploadStatusHTML + '\n\t\t\t\t<div class="slim-drip"><span><span></span></span></div>\n\t\t\t\t<div class="slim-status"><div class="slim-label">' + (this._options.label || '') + '</div><div class="slim-label-loading">' + (this._options.labelLoading || '') + '</div></div>\n\t\t\t\t' + resultHTML + '\n\t\t\t';
|
|
|
|
// start listening for events so we can load image on file input change
|
|
this._input.addEventListener('change', this);
|
|
}
|
|
|
|
// add area node
|
|
this._element.appendChild(area);
|
|
|
|
// add button group
|
|
this._btnGroup = create('div', 'slim-btn-group');
|
|
this._btnGroup.style.display = 'none';
|
|
this._element.appendChild(this._btnGroup);
|
|
SlimButtons.filter(function (c) {
|
|
return _this12._isButtonAllowed(c);
|
|
}).forEach(function (c) {
|
|
var prop = capitalizeFirstLetter(c);
|
|
var label = _this12._options['button' + prop + 'Label'];
|
|
var title = _this12._options['button' + prop + 'Title'] || label;
|
|
var className = _this12._options['button' + prop + 'ClassName'];
|
|
var btn = create('button', 'slim-btn slim-btn-' + c + (className ? ' ' + className : ''));
|
|
btn.innerHTML = label;
|
|
btn.title = title;
|
|
btn.type = 'button';
|
|
btn.addEventListener('click', _this12);
|
|
btn.setAttribute('data-action', c);
|
|
_this12._btnGroup.appendChild(btn);
|
|
});
|
|
|
|
// add ratio padding
|
|
if (this._isFixedRatio()) {
|
|
var parts = intSplit(this._options.ratio, ':');
|
|
this._ratio = parts[1] / parts[0];
|
|
this._scaleDropArea(this._ratio);
|
|
}
|
|
|
|
// setup loader
|
|
this._updateProgress(0.5);
|
|
|
|
// preload source
|
|
if (initialImageSrc) {
|
|
this._load(initialImageSrc, function () {
|
|
_this12._onInit();
|
|
}, { name: initialImageName });
|
|
} else {
|
|
this._onInit();
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onInit',
|
|
value: function _onInit() {
|
|
var _this13 = this;
|
|
|
|
// we're done initialising
|
|
this._isInitialising = false;
|
|
|
|
// done initialising now, else is only called after image load
|
|
var done = function done() {
|
|
// we call this async so the constructor of Slim has returned before the onInit is called, allowing clean immidiate destroy
|
|
var timer = setTimeout(function () {
|
|
_this13._options.didInit.apply(_this13, [_this13.data, _this13]);
|
|
}, 0);
|
|
_this13._timers.push(timer);
|
|
};
|
|
|
|
// save initial image
|
|
if (this._options.saveInitialImage && this.containsImage()) {
|
|
if (!this._options.service) {
|
|
this._save(function () {
|
|
done();
|
|
}, false);
|
|
}
|
|
} else {
|
|
// by default upload button is disabled for existing images
|
|
if (this._options.service && this.containsImage()) {
|
|
this._toggleButton('upload', false);
|
|
}
|
|
|
|
done();
|
|
}
|
|
}
|
|
}, {
|
|
key: '_updateProgress',
|
|
value: function _updateProgress(progress) {
|
|
progress = Math.min(0.99999, progress);
|
|
|
|
if (!this._element) {
|
|
return;
|
|
}
|
|
|
|
if (!this._progressEnabled) {
|
|
return;
|
|
}
|
|
|
|
var loader = this._element.querySelector('.slim-loader');
|
|
if (!loader) {
|
|
return;
|
|
}
|
|
|
|
var size = loader.offsetWidth;
|
|
var paths = loader.querySelectorAll('path');
|
|
var ringWidth = parseInt(paths[0].getAttribute('stroke-width'), 10);
|
|
|
|
paths[0].setAttribute('d', percentageArc(size * 0.5, size * 0.5, size * 0.5 - ringWidth, 0.9999));
|
|
|
|
paths[1].setAttribute('d', percentageArc(size * 0.5, size * 0.5, size * 0.5 - ringWidth, progress));
|
|
}
|
|
}, {
|
|
key: '_startProgress',
|
|
value: function _startProgress(cb) {
|
|
var _this14 = this;
|
|
|
|
if (!this._element) {
|
|
return;
|
|
}
|
|
|
|
this._progressEnabled = false;
|
|
|
|
var loader = this._element.querySelector('.slim-loader');
|
|
if (!loader) {
|
|
return;
|
|
}
|
|
var ring = loader.children[0];
|
|
|
|
this._stopProgressLoop(function () {
|
|
loader.removeAttribute('style');
|
|
ring.removeAttribute('style');
|
|
|
|
_this14._progressEnabled = true;
|
|
|
|
_this14._updateProgress(0);
|
|
|
|
_this14._progressEnabled = false;
|
|
|
|
snabbt(ring, {
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
duration: 250,
|
|
complete: function complete() {
|
|
_this14._progressEnabled = true;
|
|
if (cb) {
|
|
cb();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: '_stopProgress',
|
|
value: function _stopProgress() {
|
|
var _this15 = this;
|
|
|
|
if (!this._element) {
|
|
return;
|
|
}
|
|
|
|
var loader = this._element.querySelector('.slim-loader');
|
|
if (!loader) {
|
|
return;
|
|
}
|
|
var ring = loader.children[0];
|
|
|
|
this._updateProgress(1);
|
|
|
|
snabbt(ring, {
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
duration: 250,
|
|
complete: function complete() {
|
|
loader.removeAttribute('style');
|
|
ring.removeAttribute('style');
|
|
|
|
_this15._updateProgress(0.5);
|
|
|
|
_this15._progressEnabled = false;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: '_startProgressLoop',
|
|
value: function _startProgressLoop() {
|
|
if (!this._element) {
|
|
return;
|
|
}
|
|
|
|
// start loading animation
|
|
var loader = this._element.querySelector('.slim-loader');
|
|
if (!loader) {
|
|
return;
|
|
}
|
|
|
|
var ring = loader.children[0];
|
|
loader.removeAttribute('style');
|
|
ring.removeAttribute('style');
|
|
|
|
// set infinite load state
|
|
this._updateProgress(0.5);
|
|
|
|
// repeat!
|
|
var repeat = 1000;
|
|
|
|
snabbt(loader, 'stop');
|
|
|
|
snabbt(loader, {
|
|
rotation: [0, 0, -(Math.PI * 2) * repeat],
|
|
easing: 'linear',
|
|
duration: repeat * 1000
|
|
});
|
|
|
|
snabbt(ring, {
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
duration: 250
|
|
});
|
|
}
|
|
}, {
|
|
key: '_stopProgressLoop',
|
|
value: function _stopProgressLoop(callback) {
|
|
if (!this._element) {
|
|
return;
|
|
}
|
|
|
|
var loader = this._element.querySelector('.slim-loader');
|
|
if (!loader) {
|
|
return;
|
|
}
|
|
|
|
var ring = loader.children[0];
|
|
|
|
snabbt(ring, {
|
|
fromOpacity: parseFloat(ring.style.opacity),
|
|
opacity: 0,
|
|
duration: 250,
|
|
complete: function complete() {
|
|
snabbt(loader, 'stop');
|
|
|
|
loader.removeAttribute('style');
|
|
ring.removeAttribute('style');
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: '_isButtonAllowed',
|
|
value: function _isButtonAllowed(button) {
|
|
if (button === 'edit') {
|
|
return this._options.edit;
|
|
}
|
|
|
|
if (button === 'download') {
|
|
return this._options.download;
|
|
}
|
|
|
|
if (button === 'upload') {
|
|
// if no service defined upload button makes no sense
|
|
if (!this._options.service) {
|
|
return false;
|
|
}
|
|
|
|
// if push mode is set, no need for upload button
|
|
if (this._options.push) {
|
|
return false;
|
|
}
|
|
|
|
// set upload button
|
|
return true;
|
|
}
|
|
|
|
if (button === 'remove') {
|
|
return !this._isImageOnly();
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: '_fallback',
|
|
value: function _fallback() {
|
|
// create status area
|
|
var area = create('div', 'slim-area');
|
|
area.innerHTML = '\n\t\t\t<div class="slim-status"><div class="slim-label">' + (this._options.label || '') + '</div></div>\n\t\t';
|
|
this._element.appendChild(area);
|
|
|
|
this._throwError(this._options.statusNoSupport);
|
|
}
|
|
|
|
/**
|
|
* Event routing
|
|
*/
|
|
|
|
}, {
|
|
key: 'handleEvent',
|
|
value: function handleEvent(e) {
|
|
switch (e.type) {
|
|
case 'click':
|
|
this._onClick(e);
|
|
break;
|
|
case 'change':
|
|
this._onChange(e);
|
|
break;
|
|
case 'cancel':
|
|
this._onCancel(e);
|
|
break;
|
|
case 'confirm':
|
|
this._onConfirm(e);
|
|
break;
|
|
case 'file-over':
|
|
this._onFileOver(e);
|
|
break;
|
|
case 'file-out':
|
|
this._onFileOut(e);
|
|
break;
|
|
case 'file-drop':
|
|
this._onDropFile(e);
|
|
break;
|
|
case 'file-invalid':
|
|
this._onInvalidFile(e);
|
|
break;
|
|
case 'file-invalid-drop':
|
|
this._onInvalidFileDrop(e);
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: '_getIntro',
|
|
value: function _getIntro() {
|
|
return this._element.querySelector('.slim-result .in');
|
|
}
|
|
}, {
|
|
key: '_getOutro',
|
|
value: function _getOutro() {
|
|
return this._element.querySelector('.slim-result .out');
|
|
}
|
|
}, {
|
|
key: '_getInOut',
|
|
value: function _getInOut() {
|
|
return this._element.querySelectorAll('.slim-result img');
|
|
}
|
|
}, {
|
|
key: '_getDrip',
|
|
value: function _getDrip() {
|
|
if (!this._drip) {
|
|
this._drip = this._element.querySelector('.slim-drip > span');
|
|
}
|
|
return this._drip;
|
|
}
|
|
|
|
// errors
|
|
|
|
}, {
|
|
key: '_throwError',
|
|
value: function _throwError(error) {
|
|
this._addState('error');
|
|
|
|
this._element.querySelector('.slim-label').style.display = 'none';
|
|
|
|
var node = this._element.querySelector('.slim-error');
|
|
if (!node) {
|
|
node = create('div', 'slim-error');
|
|
this._element.querySelector('.slim-status').appendChild(node);
|
|
}
|
|
|
|
node.innerHTML = error;
|
|
|
|
this._options.didThrowError.apply(this, [error]);
|
|
}
|
|
}, {
|
|
key: '_removeError',
|
|
value: function _removeError() {
|
|
this._removeState('error');
|
|
this._element.querySelector('.slim-label').style.display = '';
|
|
|
|
var error = this._element.querySelector('.slim-error');
|
|
if (error) {
|
|
error.parentNode.removeChild(error);
|
|
}
|
|
}
|
|
}, {
|
|
key: '_openFileDialog',
|
|
value: function _openFileDialog() {
|
|
this._removeError();
|
|
this._input.click();
|
|
}
|
|
|
|
// drop area clicked
|
|
|
|
}, {
|
|
key: '_onClick',
|
|
value: function _onClick(e) {
|
|
var _this16 = this;
|
|
|
|
var list = e.target.classList;
|
|
var target = e.target;
|
|
|
|
// no preview, so possible to drop file
|
|
if (list.contains('slim-file-hopper')) {
|
|
e.preventDefault();
|
|
this._openFileDialog();
|
|
return;
|
|
}
|
|
|
|
// decide what button was clicked
|
|
switch (target.getAttribute('data-action')) {
|
|
case 'remove':
|
|
this._options.willRemove.apply(this, [this.data, function () {
|
|
_this16._doRemove();
|
|
}]);
|
|
break;
|
|
case 'edit':
|
|
this._doEdit();
|
|
break;
|
|
case 'download':
|
|
this._doDownload();
|
|
break;
|
|
case 'upload':
|
|
this._doUpload();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onInvalidFileDrop',
|
|
value: function _onInvalidFileDrop() {
|
|
this._onInvalidFile();
|
|
|
|
this._removeState('file-over');
|
|
|
|
// animate out drip
|
|
var drip = this._getDrip();
|
|
snabbt(drip.firstChild, {
|
|
fromScale: [0.5, 0.5],
|
|
scale: [0, 0],
|
|
fromOpacity: 0.5,
|
|
opacity: 0,
|
|
duration: 150,
|
|
complete: function complete() {
|
|
// clean up transforms
|
|
resetTransforms(drip.firstChild);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: '_onInvalidFile',
|
|
value: function _onInvalidFile() {
|
|
var types = this._imageHopper.accept.map(getExtensionByMimeType);
|
|
var error = this._options.statusFileType.replace('$0', types.join(', '));
|
|
this._throwError(error);
|
|
}
|
|
}, {
|
|
key: '_onImageTooSmall',
|
|
value: function _onImageTooSmall() {
|
|
var error = this._options.statusImageTooSmall.replace('$0', this._options.minSize.width + ' \xD7 ' + this._options.minSize.height);
|
|
this._throwError(error);
|
|
}
|
|
}, {
|
|
key: '_onOverWeightFile',
|
|
value: function _onOverWeightFile() {
|
|
var error = this._options.statusFileSize.replace('$0', this._options.maxFileSize);
|
|
this._throwError(error);
|
|
}
|
|
}, {
|
|
key: '_onLocalURLProblem',
|
|
value: function _onLocalURLProblem(error) {
|
|
this._throwError(this._options.statusLocalUrlProblem || error);
|
|
}
|
|
}, {
|
|
key: '_onRemoteURLProblem',
|
|
value: function _onRemoteURLProblem(error) {
|
|
this._throwError(error);
|
|
}
|
|
}, {
|
|
key: '_onFileOver',
|
|
value: function _onFileOver(e) {
|
|
this._addState('file-over');
|
|
this._removeError();
|
|
|
|
// animations
|
|
var drip = this._getDrip();
|
|
|
|
// move around drip
|
|
var matrix = snabbt.createMatrix();
|
|
matrix.translate(e.detail.x, e.detail.y, 0);
|
|
snabbt.setElementTransform(drip, matrix);
|
|
|
|
// on first entry fade in blob
|
|
if (this._imageHopper.dragPath.length == 1) {
|
|
// show
|
|
drip.style.opacity = 1;
|
|
|
|
// animate in
|
|
snabbt(drip.firstChild, {
|
|
fromOpacity: 0,
|
|
opacity: 0.5,
|
|
fromScale: [0, 0],
|
|
scale: [0.5, 0.5],
|
|
duration: 150
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: '_onFileOut',
|
|
value: function _onFileOut(e) {
|
|
this._removeState('file-over');
|
|
this._removeState('file-invalid');
|
|
this._removeError();
|
|
|
|
// move to last position
|
|
var drip = this._getDrip();
|
|
var matrix = snabbt.createMatrix();
|
|
matrix.translate(e.detail.x, e.detail.y, 0);
|
|
snabbt.setElementTransform(drip, matrix);
|
|
|
|
// animate out
|
|
snabbt(drip.firstChild, {
|
|
fromScale: [0.5, 0.5],
|
|
scale: [0, 0],
|
|
fromOpacity: 0.5,
|
|
opacity: 0,
|
|
duration: 150,
|
|
complete: function complete() {
|
|
// clean up transforms
|
|
resetTransforms(drip.firstChild);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* When a file was literally dropped on the drop area
|
|
* @param e
|
|
* @private
|
|
*/
|
|
|
|
}, {
|
|
key: '_onDropFile',
|
|
value: function _onDropFile(e) {
|
|
var _this17 = this;
|
|
|
|
this._removeState('file-over');
|
|
|
|
// get drip node reference and set to last position
|
|
var drip = this._getDrip();
|
|
var matrix = snabbt.createMatrix();
|
|
matrix.translate(e.detail.x, e.detail.y, 0);
|
|
snabbt.setElementTransform(drip, matrix);
|
|
|
|
// get element minimum 10 entries distant from the last entry so we can calculate velocity of movement
|
|
var l = this._imageHopper.dragPath.length;
|
|
var jump = this._imageHopper.dragPath[l - Math.min(10, l)];
|
|
|
|
// velocity
|
|
var dx = e.detail.x - jump.x;
|
|
var dy = e.detail.y - jump.y;
|
|
|
|
snabbt(drip, {
|
|
fromPosition: [e.detail.x, e.detail.y, 0],
|
|
position: [e.detail.x + dx, e.detail.y + dy, 0],
|
|
duration: 200
|
|
});
|
|
|
|
// animate out drip
|
|
snabbt(drip.firstChild, {
|
|
fromScale: [0.5, 0.5],
|
|
scale: [2, 2],
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
duration: 200,
|
|
|
|
complete: function complete() {
|
|
// clean up transforms
|
|
resetTransforms(drip.firstChild);
|
|
|
|
// load dropped resource
|
|
_this17._load(e.target.files[0]);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* When a file has been selected after a click on the drop area
|
|
* @param e
|
|
* @private
|
|
*/
|
|
|
|
}, {
|
|
key: '_onChange',
|
|
value: function _onChange(e) {
|
|
if (e.target.files.length) {
|
|
this._load(e.target.files[0]);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Loads a resource (blocking operation)
|
|
* @param resource
|
|
* @param callback(err)
|
|
* @param options
|
|
* @private
|
|
*/
|
|
|
|
}, {
|
|
key: '_load',
|
|
value: function _load(resource, callback) {
|
|
var _this18 = this;
|
|
|
|
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
|
|
// stop here
|
|
if (this._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
// if currently contains image, remove it
|
|
if (this.containsImage()) {
|
|
clearTimeout(this._replaceTimeout);
|
|
|
|
this._doRemove(function () {
|
|
_this18._replaceTimeout = setTimeout(function () {
|
|
_this18._load(resource, callback, options);
|
|
}, 100);
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
// no longer empty
|
|
this._removeState('empty');
|
|
this._addState('busy');
|
|
|
|
// start loading indicator
|
|
this._startProgressLoop();
|
|
|
|
// can't drop any other image while loading
|
|
if (this._imageHopper) {
|
|
this._imageHopper.enabled = false;
|
|
}
|
|
|
|
clearTimeout(this._loadTimeout);
|
|
var load = function load() {
|
|
clearTimeout(_this18._loadTimeout);
|
|
_this18._loadTimeout = setTimeout(function () {
|
|
if (_this18._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
_this18._addState('loading');
|
|
|
|
snabbt(_this18._element.querySelector('.slim-label-loading'), {
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
duration: 250
|
|
});
|
|
}, 500);
|
|
};
|
|
|
|
// early exit
|
|
var exit = function exit() {
|
|
if (_this18._imageHopper) {
|
|
_this18._imageHopper.enabled = true;
|
|
}
|
|
_this18._removeState('loading');
|
|
_this18._removeState('busy');
|
|
_this18._addState('empty');
|
|
_this18._stopProgressLoop();
|
|
};
|
|
|
|
// turn string based resources (url / base64) into file objects
|
|
if (typeof resource === 'string') {
|
|
if (resourceIsBase64Data(resource)) {
|
|
// resource is base64 data, turn into file
|
|
this._load(base64ToBlob(resource), callback, options);
|
|
} else {
|
|
|
|
// will take a while, show loading indicator
|
|
load();
|
|
|
|
// resource is url, load with XHR
|
|
loadURL(resource, this._options.willLoad, function (file) {
|
|
|
|
// continue with file object
|
|
_this18._load(file, callback, options);
|
|
}, function (error) {
|
|
|
|
setTimeout(function () {
|
|
|
|
exit();
|
|
|
|
_this18._onLocalURLProblem('<p>' + error + '</p>');
|
|
|
|
if (callback) {
|
|
callback.apply(_this18, ['local-url-problem']);
|
|
}
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
// don't continue, wait for load
|
|
return;
|
|
} else if (typeof resource.remote !== 'undefined') {
|
|
// is dropped link
|
|
// test if happens to be base64 data
|
|
if (resourceIsBase64Data(resource.remote)) {
|
|
this._load(base64ToBlob(resource.remote), callback, options);
|
|
return;
|
|
}
|
|
|
|
if (this._options.fetcher) {
|
|
loadRemoteURL(this._options.fetcher, this._options.willFetch, this._options.willLoad, resource.remote, function (error) {
|
|
exit();
|
|
|
|
_this18._onRemoteURLProblem('<p>' + error + '</p>');
|
|
|
|
if (callback) {
|
|
callback.apply(_this18, ['remote-url-problem']);
|
|
}
|
|
}, function (file) {
|
|
// continue with file object
|
|
_this18._load(file, callback, options);
|
|
});
|
|
}
|
|
|
|
// don't continue wait for server fetch
|
|
return;
|
|
}
|
|
|
|
// let's continue with file resource
|
|
var file = resource;
|
|
|
|
// re-test if is valid file type
|
|
// in case of loading base64 data or url
|
|
if (this._imageHopper && this._imageHopper.accept.indexOf(file.type) === -1) {
|
|
exit();
|
|
|
|
this._onInvalidFile();
|
|
if (callback) {
|
|
callback.apply(this, ['file-invalid']);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// test if too big
|
|
if (file.size && this._options.maxFileSize && bytesToMegaBytes(file.size) > this._options.maxFileSize) {
|
|
exit();
|
|
|
|
this._onOverWeightFile();
|
|
if (callback) {
|
|
callback.apply(this, ['file-too-big']);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// if has loaded image editor set to dirty
|
|
if (this._imageEditor) {
|
|
this._imageEditor.dirty();
|
|
}
|
|
|
|
// continue
|
|
this._data.input.name = options && options.name ? options.name : getFileNameByFile(file);
|
|
this._data.input.type = getFileTypeByFile(file);
|
|
this._data.input.size = file.size;
|
|
this._data.input.file = file;
|
|
|
|
// fetch resource
|
|
getImageAsCanvas(file, this._options.internalCanvasSize, function (image, meta) {
|
|
var rewind = function rewind() {
|
|
// rewind state
|
|
if (_this18._imageHopper) {
|
|
_this18._imageHopper.enabled = true;
|
|
}
|
|
|
|
_this18._removeState('loading');
|
|
_this18._removeState('busy');
|
|
_this18._addState('empty');
|
|
_this18._stopProgressLoop();
|
|
_this18._resetData();
|
|
};
|
|
|
|
// if no image, something went wrong
|
|
if (!image) {
|
|
rewind();
|
|
|
|
if (callback) {
|
|
callback.apply(_this18, ['file-not-found']);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// test if image is too small
|
|
if (!covers(image, _this18._options.minSize)) {
|
|
rewind();
|
|
|
|
_this18._onImageTooSmall();
|
|
|
|
if (callback) {
|
|
callback.apply(_this18, ['image-too-small']);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
var status = _this18._options.didLoad.apply(_this18, [file, image, meta, _this18]);
|
|
if (status !== true) {
|
|
rewind();
|
|
|
|
if (status !== false) {
|
|
_this18._throwError(status);
|
|
}
|
|
|
|
if (callback) {
|
|
callback.apply(_this18, [status]);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// done loading file
|
|
_this18._removeState('loading');
|
|
|
|
var revealCanvas = function revealCanvas(done) {
|
|
// done, enable hopper
|
|
if (_this18._imageHopper && _this18._options.dropReplace) {
|
|
_this18._imageHopper.enabled = true;
|
|
}
|
|
|
|
// do intro stuff
|
|
var intro = _this18._getIntro();
|
|
|
|
// setup base animation
|
|
var animation = {
|
|
fromScale: [1.25, 1.25],
|
|
scale: [1, 1],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
complete: function complete() {
|
|
resetTransforms(intro);
|
|
|
|
intro.style.opacity = 1;
|
|
|
|
done();
|
|
}
|
|
};
|
|
|
|
// if not attached to DOM, don't animate
|
|
if (_this18.isDetached()) {
|
|
animation.duration = 1;
|
|
} else {
|
|
animation.easing = 'spring';
|
|
animation.springConstant = 0.3;
|
|
animation.springDeceleration = 0.7;
|
|
}
|
|
|
|
// if is instant edit mode don't zoom out but zoom in
|
|
if (_this18._canInstantEdit()) {
|
|
animation.delay = 500;
|
|
animation.duration = 1;
|
|
|
|
// instant edit mode just fire up the editor immidiately
|
|
_this18._doEdit();
|
|
}
|
|
|
|
// reveal loaded image
|
|
snabbt(intro, animation);
|
|
};
|
|
|
|
// load the image
|
|
_this18._loadCanvas(image,
|
|
|
|
// done loading the canvas
|
|
function (isUploading) {
|
|
_this18._addState('preview');
|
|
|
|
revealCanvas(function () {
|
|
// don't show buttons when instant editing
|
|
// the buttons will be triggered by the closing of the popup
|
|
if (!_this18._canInstantEdit() && !isUploading) {
|
|
_this18._showButtons();
|
|
}
|
|
|
|
if (!isUploading) {
|
|
_this18._stopProgressLoop();
|
|
_this18._removeState('busy');
|
|
}
|
|
|
|
if (callback) {
|
|
callback.apply(_this18, [null, _this18.data]);
|
|
}
|
|
});
|
|
},
|
|
|
|
// done uploading
|
|
function () {
|
|
// don't show buttons when instant editing
|
|
if (!_this18._canInstantEdit()) {
|
|
_this18._showButtons();
|
|
}
|
|
|
|
_this18._removeState('busy');
|
|
},
|
|
|
|
// options for canvas load
|
|
{
|
|
blockPush: options.blockPush
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: '_loadCanvas',
|
|
value: function _loadCanvas(image, ready, complete, options) {
|
|
var _this19 = this;
|
|
|
|
// set default options object if not supplied
|
|
if (!options) {
|
|
options = {};
|
|
}
|
|
|
|
// halt here if cropper is currently being destroyed
|
|
if (this._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
// store raw data
|
|
this._data.input.image = image;
|
|
this._data.input.width = image.width;
|
|
this._data.input.height = image.height;
|
|
|
|
if (this._initialRotation) {
|
|
this._data.actions.rotation = this._initialRotation;
|
|
this._initialRotation = null;
|
|
}
|
|
|
|
var isTilted = this._data.actions.rotation % 180 !== 0;
|
|
|
|
// scales the drop area
|
|
// if is 'input' or 'free' parameter
|
|
if (!this._isFixedRatio()) {
|
|
if (this._initialCrop) {
|
|
this._ratio = this._initialCrop.height / this._initialCrop.width;
|
|
} else {
|
|
this._ratio = isTilted ? image.width / image.height : image.height / image.width;
|
|
}
|
|
this._scaleDropArea(this._ratio);
|
|
}
|
|
|
|
var applyTransforms = function applyTransforms() {
|
|
|
|
// if max size set
|
|
if (_this19._options.size) {
|
|
_this19._data.actions.size = {
|
|
width: _this19._options.size.width,
|
|
height: _this19._options.size.height
|
|
};
|
|
}
|
|
|
|
// do initial auto transform
|
|
_this19._applyTransforms(image, function (transformedImage) {
|
|
var intro = _this19._getIntro();
|
|
var scalar = intro.offsetWidth / transformedImage.width;
|
|
|
|
// store data, if has preview image this prevents initial load from pushing
|
|
var willUpload = false;
|
|
|
|
// can only do auto upload when service is defined and push is enabled...
|
|
if (_this19._options.service && _this19._options.push && !options.blockPush) {
|
|
// ...and is not transformation of initial image
|
|
// + is not instant edit mode
|
|
if (!_this19._hasInitialImage && !_this19._canInstantEdit()) {
|
|
willUpload = true;
|
|
_this19._stopProgressLoop(function () {
|
|
_this19._startProgress(function () {
|
|
_this19._updateProgress(0.1);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// no service set, and instant edit
|
|
if (!_this19._canInstantEdit()) {
|
|
// store data (possibly)
|
|
_this19._save(function () {
|
|
if (_this19._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
if (willUpload) {
|
|
_this19._stopProgress();
|
|
complete();
|
|
}
|
|
}, willUpload);
|
|
}
|
|
|
|
// scale ratio
|
|
var ratio = _this19._options.devicePixelRatio === 'auto' ? window.devicePixelRatio : _this19._options.devicePixelRatio;
|
|
|
|
// show intro animation
|
|
intro.src = '';
|
|
intro.src = cloneCanvasScaled(transformedImage, scalar * ratio).toDataURL();
|
|
intro.onload = function () {
|
|
intro.onload = null;
|
|
|
|
// bail out if we've been cleaned up
|
|
if (_this19._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
if (ready) {
|
|
ready(willUpload);
|
|
}
|
|
};
|
|
});
|
|
};
|
|
|
|
if (this._initialCrop) {
|
|
|
|
// use initial supplied crop rectangle
|
|
this._data.actions.crop = clone(this._initialCrop);
|
|
this._data.actions.crop.type = CropType.INITIAL;
|
|
|
|
// clear initial crop, it's no longer useful
|
|
this._initialCrop = null;
|
|
|
|
// go!
|
|
applyTransforms();
|
|
} else {
|
|
|
|
this._options.willCropInitial.apply(this, [this.data, function (rect) {
|
|
|
|
if (rect) {
|
|
|
|
// apply custom crop rectangle
|
|
_this19._data.actions.crop = rect;
|
|
_this19._data.actions.crop.type = CropType.INITIAL;
|
|
} else {
|
|
|
|
// get automagical crop rectangle
|
|
_this19._data.actions.crop = getAutoCropRect(isTilted ? image.height : image.width, isTilted ? image.width : image.height, _this19._ratio);
|
|
_this19._data.actions.crop.type = CropType.AUTO;
|
|
}
|
|
|
|
applyTransforms();
|
|
}, this]);
|
|
}
|
|
}
|
|
}, {
|
|
key: '_applyTransforms',
|
|
value: function _applyTransforms(image, ready) {
|
|
var _this20 = this;
|
|
|
|
var actions = clone(this._data.actions);
|
|
actions.filters = {
|
|
sharpen: this._options.filterSharpen / 100
|
|
};
|
|
|
|
// if should force minimum size on output image
|
|
if (this._options.forceMinSize) {
|
|
actions.minSize = this._options.minSize;
|
|
} else {
|
|
actions.minSize = {
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
}
|
|
|
|
transformCanvas(image, actions, function (transformedImage) {
|
|
var outputImage = transformedImage;
|
|
|
|
// if should force/correct output size?
|
|
// - is forced size set?
|
|
// - is a discrepancy found between requested output size and transformed size
|
|
if (_this20._options.forceSize || _this20._options.size && sizeDist(_this20._options.size, transformedImage) == 1) {
|
|
outputImage = create('canvas');
|
|
outputImage.width = _this20._options.size.width;
|
|
outputImage.height = _this20._options.size.height;
|
|
var ctx = outputImage.getContext('2d');
|
|
ctx.drawImage(transformedImage, 0, 0, _this20._options.size.width, _this20._options.size.height);
|
|
}
|
|
|
|
// make sure min size is respected when size is equal to min size
|
|
if (_this20._options.forceMinSize && _this20._options.size && _this20._options.minSize.width === _this20._options.size.width && _this20._options.minSize.height === _this20._options.size.height && (outputImage.width < _this20._options.minSize.width || outputImage.height < _this20._options.minSize.height)) {
|
|
var w = Math.max(outputImage.width, _this20._options.minSize.width);
|
|
var h = Math.max(outputImage.height, _this20._options.minSize.height);
|
|
outputImage = create('canvas');
|
|
outputImage.width = w;
|
|
outputImage.height = h;
|
|
var _ctx = outputImage.getContext('2d');
|
|
_ctx.drawImage(transformedImage, 0, 0, w, h);
|
|
}
|
|
|
|
// prevent smaller square output image, this is a quick fix for square images, should be done a lot neater
|
|
if (_this20._options.forceMinSize && _this20._ratio === 1 && (outputImage.width < _this20._options.minSize.width || outputImage.height < _this20._options.minSize.height)) {
|
|
outputImage = create('canvas');
|
|
outputImage.width = _this20._options.minSize.width;
|
|
outputImage.height = _this20._options.minSize.height;
|
|
var _ctx2 = outputImage.getContext('2d');
|
|
_ctx2.drawImage(transformedImage, 0, 0, outputImage.width, outputImage.height);
|
|
}
|
|
|
|
// store output
|
|
_this20._data.output.width = outputImage.width;
|
|
_this20._data.output.height = outputImage.height;
|
|
_this20._data.output.image = outputImage;
|
|
|
|
_this20._onTransformCanvas(function (transformedData) {
|
|
_this20._data = transformedData;
|
|
|
|
_this20._options.didTransform.apply(_this20, [_this20.data, _this20]);
|
|
|
|
ready(_this20._data.output.image);
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: '_onTransformCanvas',
|
|
value: function _onTransformCanvas(ready) {
|
|
this._options.willTransform.apply(this, [this.data, ready, this]);
|
|
}
|
|
|
|
/**
|
|
* Creates the editor nodes
|
|
* @private
|
|
*/
|
|
|
|
}, {
|
|
key: '_appendEditor',
|
|
value: function _appendEditor() {
|
|
var _this21 = this;
|
|
|
|
// we already have an editor
|
|
if (this._imageEditor) {
|
|
return;
|
|
}
|
|
|
|
// add editor
|
|
this._imageEditor = new ImageEditor(create('div'), {
|
|
minSize: this._options.minSize,
|
|
devicePixelRatio: this._options.devicePixelRatio,
|
|
|
|
buttonConfirmClassName: this._options.buttonConfirmClassName,
|
|
buttonCancelClassName: this._options.buttonCancelClassName,
|
|
buttonRotateClassName: this._options.buttonRotateClassName,
|
|
|
|
buttonConfirmLabel: this._options.buttonConfirmLabel,
|
|
buttonCancelLabel: this._options.buttonCancelLabel,
|
|
buttonRotateLabel: this._options.buttonRotateLabel,
|
|
|
|
buttonConfirmTitle: this._options.buttonConfirmTitle,
|
|
buttonCancelTitle: this._options.buttonCancelTitle,
|
|
buttonRotateTitle: this._options.buttonRotateTitle
|
|
});
|
|
|
|
// listen to events
|
|
ImageEditorEvents.forEach(function (e) {
|
|
_this21._imageEditor.element.addEventListener(e, _this21);
|
|
});
|
|
}
|
|
}, {
|
|
key: '_scaleDropArea',
|
|
value: function _scaleDropArea(ratio) {
|
|
var node = this._getRatioSpacerElement();
|
|
if (!node || !this._element) {
|
|
return;
|
|
}
|
|
node.style.marginBottom = ratio * 100 + '%';
|
|
this._element.setAttribute('data-ratio', '1:' + ratio);
|
|
}
|
|
|
|
/**
|
|
* Data Layer
|
|
* @private
|
|
*/
|
|
// image editor closed
|
|
|
|
}, {
|
|
key: '_onCancel',
|
|
value: function _onCancel(e) {
|
|
this._removeState('editor');
|
|
|
|
this._options.didCancel.apply(this, [this]);
|
|
|
|
this._showButtons();
|
|
|
|
this._hideEditor();
|
|
|
|
if (this._options.instantEdit && !this._hasInitialImage && this._isAutoCrop()) {
|
|
this._doRemove();
|
|
}
|
|
}
|
|
|
|
// user confirmed changes
|
|
|
|
}, {
|
|
key: '_onConfirm',
|
|
value: function _onConfirm(e) {
|
|
var _this22 = this;
|
|
|
|
// if
|
|
// - service set
|
|
// - and we are pushing
|
|
// - and we don't instant edit
|
|
// we will upload
|
|
var willUpload = this._options.service && this._options.push;
|
|
if (willUpload) {
|
|
this._startProgress(function () {
|
|
_this22._updateProgress(0.1);
|
|
});
|
|
} else {
|
|
this._startProgressLoop();
|
|
}
|
|
|
|
this._removeState('editor');
|
|
|
|
this._addState('busy');
|
|
|
|
// clear data
|
|
this._output.value = '';
|
|
|
|
// apply new action object to this._data
|
|
this._data.actions.rotation = e.detail.rotation;
|
|
this._data.actions.crop = e.detail.crop;
|
|
this._data.actions.crop.type = CropType.MANUAL;
|
|
|
|
// do transforms
|
|
this._applyTransforms(this._data.input.image, function (transformedImage) {
|
|
// user confirmed the crop (and changes have been applied to data)
|
|
_this22._options.didConfirm.apply(_this22, [_this22.data, _this22]);
|
|
|
|
// set new image result
|
|
var images = _this22._getInOut();
|
|
var intro = images[0].className === 'out' ? images[0] : images[1];
|
|
var outro = intro === images[0] ? images[1] : images[0];
|
|
|
|
intro.className = 'in';
|
|
intro.style.opacity = '0';
|
|
intro.style.zIndex = '2';
|
|
outro.className = 'out';
|
|
outro.style.zIndex = '1';
|
|
|
|
// scale ratio
|
|
var ratio = _this22._options.devicePixelRatio === 'auto' ? window.devicePixelRatio : _this22._options.devicePixelRatio;
|
|
|
|
// new image get's
|
|
intro.src = '';
|
|
intro.src = cloneCanvasScaled(transformedImage, intro.offsetWidth / transformedImage.width * ratio).toDataURL();
|
|
intro.onload = function () {
|
|
intro.onload = null;
|
|
|
|
// scale the dropzone
|
|
if (_this22._options.ratio === 'free') {
|
|
_this22._ratio = intro.naturalHeight / intro.naturalWidth;
|
|
_this22._scaleDropArea(_this22._ratio);
|
|
}
|
|
|
|
// close the editor
|
|
_this22._hideEditor();
|
|
|
|
// wait a tiny bit so animations sync up nicely
|
|
var timer = setTimeout(function () {
|
|
// show the preview
|
|
_this22._showPreview(intro, function () {
|
|
// save the data
|
|
_this22._save(function (err, data, res) {
|
|
// done!
|
|
_this22._toggleButton('upload', true);
|
|
|
|
if (willUpload) {
|
|
_this22._stopProgress();
|
|
} else {
|
|
_this22._stopProgressLoop();
|
|
}
|
|
|
|
_this22._removeState('busy');
|
|
|
|
_this22._showButtons();
|
|
}, willUpload);
|
|
});
|
|
}, 250);
|
|
|
|
_this22._timers.push(timer);
|
|
};
|
|
});
|
|
}
|
|
}, {
|
|
key: '_cropAuto',
|
|
value: function _cropAuto() {
|
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (data) {};
|
|
|
|
var isTilted = this._data.actions.rotation % 180 !== 0;
|
|
|
|
var rect = getAutoCropRect(isTilted ? this._data.input.image.height : this._data.input.image.width, isTilted ? this._data.input.image.width : this._data.input.image.height, this._ratio);
|
|
|
|
this._crop(rect.x, rect.y, rect.width, rect.height, callback, CropType.AUTO);
|
|
}
|
|
}, {
|
|
key: '_crop',
|
|
value: function _crop(x, y, width, height) {
|
|
var callback = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function (data) {};
|
|
var cropType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : CropType.MANUAL;
|
|
|
|
|
|
// clear data
|
|
this._output.value = '';
|
|
|
|
// apply new action object to this._data
|
|
this._data.actions.crop = {
|
|
x: x,
|
|
y: y,
|
|
width: width,
|
|
height: height
|
|
};
|
|
this._data.actions.crop.type = cropType;
|
|
|
|
this._manualTransform(callback);
|
|
}
|
|
}, {
|
|
key: '_manualTransform',
|
|
value: function _manualTransform(callback) {
|
|
var _this23 = this;
|
|
|
|
this._startProgressLoop();
|
|
this._addState('busy');
|
|
|
|
// do transforms
|
|
this._applyTransforms(this._data.input.image, function (transformedImage) {
|
|
// set new image result
|
|
var images = _this23._getInOut();
|
|
var intro = images[0].className === 'out' ? images[0] : images[1];
|
|
var outro = intro === images[0] ? images[1] : images[0];
|
|
|
|
intro.className = 'in';
|
|
intro.style.opacity = '1';
|
|
intro.style.zIndex = '2';
|
|
outro.className = 'out';
|
|
outro.style.zIndex = '0';
|
|
|
|
// scale ratio
|
|
var pixelRatio = _this23._options.devicePixelRatio === 'auto' ? window.devicePixelRatio : _this23._options.devicePixelRatio;
|
|
|
|
// new image
|
|
intro.src = '';
|
|
intro.src = cloneCanvasScaled(transformedImage, intro.offsetWidth / transformedImage.width * pixelRatio).toDataURL();
|
|
intro.onload = function () {
|
|
intro.onload = null;
|
|
|
|
// scale the dropzone
|
|
if (_this23._options.ratio === 'free') {
|
|
_this23._ratio = intro.naturalHeight / intro.naturalWidth;
|
|
_this23._scaleDropArea(_this23._ratio);
|
|
}
|
|
|
|
// determine if will also upload
|
|
var willUpload = _this23._options.service && _this23._options.push;
|
|
|
|
var save = function save() {
|
|
// save the data
|
|
_this23._save(function (err, data, res) {
|
|
// stop loader
|
|
if (!willUpload) {
|
|
_this23._stopProgressLoop();
|
|
}
|
|
|
|
_this23._removeState('busy');
|
|
|
|
callback.apply(_this23, [_this23.data]);
|
|
}, willUpload);
|
|
};
|
|
|
|
if (willUpload) {
|
|
_this23._startProgress(save);
|
|
} else {
|
|
save();
|
|
}
|
|
};
|
|
});
|
|
}
|
|
}, {
|
|
key: '_save',
|
|
value: function _save() {
|
|
var _this24 = this;
|
|
|
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
|
|
var allowUpload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
|
|
if (this._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
// flatten data also turns output canvas into data uri
|
|
// removes input file object and image object
|
|
var data = this.dataBase64;
|
|
|
|
// decide if we need to
|
|
// - A. Store the data in an output field
|
|
// - B. Upload the data and store the response in output field
|
|
|
|
// - we are not doing async uploading (in which case output is used for response)
|
|
// - we are not initialising a replaceable image
|
|
if (!this._options.service && !(this._isInitialising && !this._isImageOnly())) {
|
|
this._options.willSave.apply(this, [data, function (data) {
|
|
_this24._store(data);
|
|
|
|
_this24._options.didSave.apply(_this24, [data, _this24]);
|
|
}, this]);
|
|
}
|
|
|
|
if (this._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
// is remote service defined upload async
|
|
if (this._options.service && allowUpload) {
|
|
// allow user to modify the data
|
|
this._options.willSave.apply(this, [data, function (data) {
|
|
_this24._addState('upload');
|
|
|
|
if (_this24._imageHopper && _this24._options.dropReplace) {
|
|
_this24._imageHopper.enabled = false;
|
|
}
|
|
|
|
// do the actual uploading
|
|
_this24._upload(data, function (err, res) {
|
|
if (_this24._imageHopper && _this24._options.dropReplace) {
|
|
_this24._imageHopper.enabled = true;
|
|
}
|
|
|
|
// store response
|
|
if (!err) {
|
|
_this24._storeServerResponse(res);
|
|
}
|
|
|
|
// we did upload data
|
|
_this24._options.didUpload.apply(_this24, [err, data, res, _this24]);
|
|
|
|
_this24._removeState('upload');
|
|
|
|
// done!
|
|
callback(err, data, res);
|
|
});
|
|
}, this]);
|
|
}
|
|
|
|
// if no service, we're done here
|
|
if (!this._options.service || !allowUpload) {
|
|
callback();
|
|
}
|
|
}
|
|
|
|
// stores active file information in hidden output field
|
|
|
|
}, {
|
|
key: '_storeServerResponse',
|
|
value: function _storeServerResponse(data) {
|
|
// remove required flag
|
|
if (this._isRequired) {
|
|
this._input.required = false;
|
|
}
|
|
|
|
// store data returned from server
|
|
this._data.server = data;
|
|
|
|
// sync with output value
|
|
this._output.value = (typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object' ? JSON.stringify(this._data.server) : data;
|
|
}
|
|
|
|
// stores data in output field
|
|
|
|
}, {
|
|
key: '_store',
|
|
value: function _store(data) {
|
|
if (this._isRequired) {
|
|
this._input.required = false;
|
|
}
|
|
|
|
this._output.value = JSON.stringify(data);
|
|
}
|
|
|
|
// uploads given data to server
|
|
|
|
}, {
|
|
key: '_upload',
|
|
value: function _upload(data, callback) {
|
|
var // function(error) {} // error message (string),
|
|
_this25 = this;
|
|
|
|
this.requestOutput(function (fileData, formData) {
|
|
var statusNode = _this25._element.querySelector('.slim-upload-status');
|
|
|
|
var requestDecorator = _this25._options.willRequest;
|
|
|
|
// callback methods
|
|
var onProgress = function onProgress(loaded, total) {
|
|
_this25._updateProgress(Math.max(0.1, loaded / total));
|
|
};
|
|
|
|
var onSuccess = function onSuccess(obj) {
|
|
var timer = setTimeout(function () {
|
|
// it's possible that Slim has been destroyed in the mean time.
|
|
if (_this25._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
statusNode.innerHTML = _this25._options.statusUploadSuccess;
|
|
statusNode.setAttribute('data-state', 'success');
|
|
statusNode.style.opacity = 1;
|
|
|
|
// hide status update after 2 seconds
|
|
var timer = setTimeout(function () {
|
|
statusNode.style.opacity = 0;
|
|
}, 2000);
|
|
|
|
_this25._timers.push(timer);
|
|
}, 250);
|
|
|
|
_this25._timers.push(timer);
|
|
|
|
callback(null, obj);
|
|
};
|
|
|
|
var onError = function onError(status) {
|
|
var html = '';
|
|
if (status === 'file-too-big') {
|
|
html = _this25._options.statusContentLength;
|
|
} else {
|
|
html = _this25._options.didReceiveServerError.apply(_this25, [status, _this25._options.statusUnknownResponse, _this25]);
|
|
}
|
|
|
|
// when an error occurs the status update is not automatically hidden
|
|
var timer = setTimeout(function () {
|
|
statusNode.innerHTML = html;
|
|
statusNode.setAttribute('data-state', 'error');
|
|
statusNode.style.opacity = 1;
|
|
}, 250);
|
|
|
|
_this25._timers.push(timer);
|
|
|
|
callback(status);
|
|
};
|
|
|
|
// use default send method or custom implementation
|
|
if (typeof _this25._options.service === 'string') {
|
|
send(_this25._options.service, _this25._options.uploadMethod, formData, requestDecorator, onProgress, onSuccess, onError);
|
|
} else if (typeof _this25._options.service === 'function') {
|
|
_this25._options.service.apply(_this25, [_this25._options.serviceFormat === 'file' ? fileData : formData, onProgress, // function(loaded, total) {} // loaded bytes (number), total bytes (number)
|
|
onSuccess, // function(response) {} // response (object or string)
|
|
onError, _this25]);
|
|
}
|
|
}, data);
|
|
}
|
|
}, {
|
|
key: 'requestOutput',
|
|
value: function requestOutput(cb, data) {
|
|
var _this26 = this;
|
|
|
|
if (!this._data.input.file) {
|
|
cb(null, null);
|
|
return;
|
|
}
|
|
|
|
if (!data) {
|
|
data = this.dataBase64;
|
|
}
|
|
|
|
// copy the meta data of the original file to the output
|
|
loadImage.parseMetaData(this._data.input.file,
|
|
|
|
// receives image data from input file
|
|
function (imageData) {
|
|
var fileData = [];
|
|
var formData = new FormData();
|
|
|
|
// if input should be posted along, append data
|
|
// to FormData object as file
|
|
if (inArray('input', _this26._options.post)) {
|
|
// add to data array
|
|
fileData.push(_this26._data.input.file);
|
|
|
|
// add to formdata
|
|
formData.append(_this26._inputReference, _this26._data.input.file, _this26._data.input.file.name);
|
|
}
|
|
|
|
// if image data is defined, turn it into a file object (we can send files if we're uploading)
|
|
if (inArray('output', _this26._options.post) && _this26._data.output.image !== null && _this26._options.uploadBase64 === false) {
|
|
var output = base64ToBlob(data.output.image, data.output.name);
|
|
|
|
// if image head available, inject in output
|
|
if (imageData.imageHead && _this26._options.copyImageHead) {
|
|
try {
|
|
output = new Blob([imageData.imageHead, loadImage.blobSlice.call(output, 20)], {
|
|
type: getMimeTypeFromDataURI(data.output.image)
|
|
});
|
|
|
|
output = blobToFile(output, data.output.name);
|
|
} catch (e) {}
|
|
}
|
|
|
|
// add to data array
|
|
fileData.push(output);
|
|
|
|
// add to formdata
|
|
var field = 'slim_output_' + _this26._uid;
|
|
data.output.image = null; // clear base64 data
|
|
data.output.field = field;
|
|
formData.append(field, output, data.output.name);
|
|
}
|
|
|
|
// output dataset
|
|
formData.append(_this26._output.name, JSON.stringify(data));
|
|
|
|
// done
|
|
cb(fileData, formData);
|
|
}, {
|
|
maxMetaDataSize: 262144,
|
|
disableImageHead: false
|
|
});
|
|
}
|
|
}, {
|
|
key: '_showEditor',
|
|
value: function _showEditor() {
|
|
SlimPopover.className = this._options.popoverClassName;
|
|
|
|
SlimPopover.show();
|
|
|
|
this._imageEditor.show();
|
|
}
|
|
}, {
|
|
key: '_hideEditor',
|
|
value: function _hideEditor() {
|
|
this._imageEditor.hide();
|
|
|
|
var timer = setTimeout(function () {
|
|
SlimPopover.hide();
|
|
}, 250);
|
|
|
|
this._timers.push(timer);
|
|
}
|
|
|
|
/**
|
|
* Animations
|
|
*/
|
|
|
|
}, {
|
|
key: '_showPreview',
|
|
value: function _showPreview(intro, callback) {
|
|
snabbt(intro, {
|
|
fromPosition: [0, 50, 0],
|
|
position: [0, 0, 0],
|
|
|
|
fromScale: [1.5, 1.5],
|
|
scale: [1, 1],
|
|
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
|
|
easing: 'spring',
|
|
springConstant: 0.3,
|
|
springDeceleration: 0.7,
|
|
|
|
complete: function complete() {
|
|
resetTransforms(intro);
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: '_hideResult',
|
|
value: function _hideResult(callback) {
|
|
var intro = this._getIntro();
|
|
if (!intro) {
|
|
return;
|
|
}
|
|
|
|
snabbt(intro, {
|
|
fromScale: [1, 1],
|
|
scale: [0.5, 0.5],
|
|
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
|
|
easing: 'spring',
|
|
springConstant: 0.3,
|
|
springDeceleration: 0.75,
|
|
|
|
complete: function complete() {
|
|
resetTransforms(intro);
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: '_showButtons',
|
|
value: function _showButtons(callback) {
|
|
if (!this._btnGroup) {
|
|
return;
|
|
}
|
|
|
|
this._btnGroup.style.display = '';
|
|
|
|
// setup animation
|
|
var animation = {
|
|
fromScale: [0.5, 0.5],
|
|
scale: [1, 1],
|
|
fromPosition: [0, 10, 0],
|
|
position: [0, 0, 0],
|
|
fromOpacity: 0,
|
|
opacity: 1,
|
|
complete: function complete() {
|
|
resetTransforms(this);
|
|
},
|
|
allDone: function allDone() {
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
};
|
|
|
|
// don't animate when detached
|
|
if (this.isDetached()) {
|
|
animation.duration = 1;
|
|
} else {
|
|
animation.delay = function (i) {
|
|
return 250 + i * 50;
|
|
};
|
|
animation.easing = 'spring';
|
|
animation.springConstant = 0.3;
|
|
animation.springDeceleration = 0.85;
|
|
}
|
|
|
|
snabbt(this._btnGroup.childNodes, animation);
|
|
}
|
|
}, {
|
|
key: '_hideButtons',
|
|
value: function _hideButtons(callback) {
|
|
var _this27 = this;
|
|
|
|
if (!this._btnGroup) {
|
|
return;
|
|
}
|
|
|
|
var animation = {
|
|
fromScale: [1, 1],
|
|
scale: [0.85, 0.85],
|
|
fromOpacity: 1,
|
|
opacity: 0,
|
|
allDone: function allDone() {
|
|
_this27._btnGroup.style.display = 'none';
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
};
|
|
|
|
// don't animate when detached
|
|
if (this.isDetached()) {
|
|
animation.duration = 1;
|
|
} else {
|
|
animation.easing = 'spring';
|
|
animation.springConstant = 0.3;
|
|
animation.springDeceleration = 0.75;
|
|
}
|
|
|
|
// go hide the buttons
|
|
snabbt(this._btnGroup.childNodes, animation);
|
|
}
|
|
}, {
|
|
key: '_hideStatus',
|
|
value: function _hideStatus() {
|
|
var statusNode = this._element.querySelector('.slim-upload-status');
|
|
statusNode.style.opacity = 0;
|
|
}
|
|
}, {
|
|
key: '_doEdit',
|
|
value: function _doEdit() {
|
|
var _this28 = this;
|
|
|
|
// if no input data available, can't edit anything
|
|
if (!this._data.input.image) {
|
|
return;
|
|
}
|
|
|
|
// now in editor mode
|
|
this._addState('editor');
|
|
|
|
// create editor (if not already created)
|
|
if (!this._imageEditor) {
|
|
this._appendEditor();
|
|
}
|
|
|
|
// hide or show rotate button
|
|
this._imageEditor.showRotateButton = this._options.rotateButton;
|
|
|
|
// append to popover
|
|
SlimPopover.inner = this._imageEditor.element;
|
|
|
|
// read the data
|
|
this._imageEditor.open(
|
|
// send copy of canvas to the editor
|
|
cloneCanvas(this._data.input.image),
|
|
|
|
// determine ratio
|
|
this._options.ratio === 'free' ? null : this._ratio,
|
|
|
|
// the initial crop to show
|
|
this._data.actions.crop,
|
|
|
|
// the initial rotation of the image
|
|
this._data.actions.rotation,
|
|
|
|
// handle editor load
|
|
function () {
|
|
_this28._showEditor();
|
|
|
|
_this28._hideButtons();
|
|
|
|
_this28._hideStatus();
|
|
});
|
|
}
|
|
}, {
|
|
key: '_doRemove',
|
|
value: function _doRemove(done) {
|
|
var _this29 = this;
|
|
|
|
// cannot remove when is only one image
|
|
if (this._isImageOnly()) {
|
|
return;
|
|
}
|
|
|
|
this._clearState();
|
|
this._addState('empty');
|
|
|
|
this._hasInitialImage = false;
|
|
if (this._imageHopper) {
|
|
this._imageHopper.enabled = true;
|
|
}
|
|
|
|
if (this._isRequired) {
|
|
this._input.required = true;
|
|
}
|
|
|
|
var out = this._getOutro();
|
|
if (out) {
|
|
out.style.opacity = '0';
|
|
}
|
|
|
|
// get public available clone of data
|
|
var data = this.data;
|
|
|
|
// now reset all data
|
|
this._resetData();
|
|
|
|
var timer = setTimeout(function () {
|
|
if (_this29._isBeingDestroyed) {
|
|
return;
|
|
}
|
|
|
|
_this29._hideButtons(function () {
|
|
_this29._toggleButton('upload', true);
|
|
});
|
|
|
|
_this29._hideStatus();
|
|
|
|
_this29._hideResult();
|
|
|
|
_this29._options.didRemove.apply(_this29, [data, _this29]);
|
|
|
|
if (done) {
|
|
done();
|
|
}
|
|
}, this.isDetached() ? 0 : 250);
|
|
|
|
this._timers.push(timer);
|
|
|
|
return data;
|
|
}
|
|
}, {
|
|
key: '_doUpload',
|
|
value: function _doUpload(callback) {
|
|
var _this30 = this;
|
|
|
|
// if no input data available, can't upload anything
|
|
if (!this._data.input.image) {
|
|
return;
|
|
}
|
|
|
|
this._addState('upload');
|
|
this._startProgress();
|
|
|
|
this._hideButtons(function () {
|
|
// block upload button
|
|
_this30._toggleButton('upload', false);
|
|
|
|
_this30._save(function (err, data, res) {
|
|
_this30._removeState('upload');
|
|
_this30._stopProgress();
|
|
|
|
if (callback) {
|
|
callback.apply(_this30, [err, data, res]);
|
|
}
|
|
|
|
if (err) {
|
|
_this30._toggleButton('upload', true);
|
|
}
|
|
|
|
_this30._showButtons();
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: '_doDownload',
|
|
value: function _doDownload() {
|
|
var image = this._data.output.image;
|
|
if (!image) {
|
|
return;
|
|
}
|
|
|
|
downloadCanvas(this._data, this._options.jpegCompression, this._options.forceType);
|
|
}
|
|
}, {
|
|
key: '_doDestroy',
|
|
value: function _doDestroy() {
|
|
var _this31 = this;
|
|
|
|
// set destroy flag to halt any running functionality
|
|
this._isBeingDestroyed = true;
|
|
|
|
// clear timers
|
|
this._timers.forEach(function (timer) {
|
|
clearTimeout(timer);
|
|
});
|
|
this._timers = [];
|
|
|
|
// clean up snabbt animations
|
|
snabbt(this._element, 'detach');
|
|
|
|
// this removes the image hopper if it's attached
|
|
if (this._imageHopper) {
|
|
HopperEvents.forEach(function (e) {
|
|
_this31._imageHopper.element.removeEventListener(e, _this31);
|
|
});
|
|
this._imageHopper.destroy();
|
|
this._imageHopper = null;
|
|
}
|
|
|
|
// this block removes the image editor
|
|
if (this._imageEditor) {
|
|
ImageEditorEvents.forEach(function (e) {
|
|
_this31._imageEditor.element.removeEventListener(e, _this31);
|
|
});
|
|
this._imageEditor.destroy();
|
|
this._imageEditor = null;
|
|
}
|
|
|
|
// remove button event listeners
|
|
nodeListToArray(this._btnGroup.children).forEach(function (btn) {
|
|
btn.removeEventListener('click', _this31);
|
|
});
|
|
|
|
// stop listening to input
|
|
this._input.removeEventListener('change', this);
|
|
|
|
// detect if was wrapped, if so, remove wrapping (needs to have parent node)
|
|
if (this._element !== this._originalElement && this._element.parentNode) {
|
|
this._element.parentNode.replaceChild(this._originalElement, this._element);
|
|
}
|
|
|
|
// restore HTML of original element
|
|
this._originalElement.innerHTML = this._originalElementInner;
|
|
|
|
// get current attributes and remove all, then add original attributes
|
|
function matchesAttributeInList(a, attributes) {
|
|
return attributes.filter(function (attr) {
|
|
return a.name === attr.name && a.value === attr.value;
|
|
}).length !== 0;
|
|
}
|
|
|
|
var attributes = getElementAttributes(this._originalElement);
|
|
attributes.forEach(function (attribute) {
|
|
// if attribute is contained in original element attribute list and is the same, don't remove
|
|
if (matchesAttributeInList(attribute, _this31._originalElementAttributes)) {
|
|
return;
|
|
}
|
|
|
|
// else remove
|
|
_this31._originalElement.removeAttribute(attribute.name);
|
|
});
|
|
|
|
this._originalElementAttributes.forEach(function (attribute) {
|
|
// attribute was never removed
|
|
if (matchesAttributeInList(attribute, attributes)) {
|
|
return;
|
|
}
|
|
|
|
// add attribute
|
|
_this31._originalElement.setAttribute(attribute.name, attribute.value);
|
|
});
|
|
|
|
// now destroyed this counter so the total Slim count can be lowered
|
|
SlimCount = Math.max(0, SlimCount - 1);
|
|
|
|
// if slim count has reached 0 it's time to clean up the popover
|
|
if (SlimPopover && SlimCount === 0) {
|
|
SlimPopover.destroy();
|
|
SlimPopover = null;
|
|
}
|
|
|
|
this._originalElement = null;
|
|
this._element = null;
|
|
this._input = null;
|
|
this._output = null;
|
|
this._btnGroup = null;
|
|
this._options = null;
|
|
}
|
|
}, {
|
|
key: 'dataBase64',
|
|
|
|
|
|
/**
|
|
* Public API
|
|
*/
|
|
// properties
|
|
get: function get() {
|
|
return flattenData(this._data, this._options.post, this._options.jpegCompression, this._options.forceType, this._options.service !== null);
|
|
}
|
|
}, {
|
|
key: 'data',
|
|
get: function get() {
|
|
return cloneData(this._data);
|
|
}
|
|
}, {
|
|
key: 'element',
|
|
get: function get() {
|
|
return this._element;
|
|
}
|
|
}, {
|
|
key: 'service',
|
|
set: function set(service) {
|
|
this._options.service = service;
|
|
}
|
|
}, {
|
|
key: 'size',
|
|
set: function set(dimensions) {
|
|
this.setSize(dimensions, null);
|
|
}
|
|
}, {
|
|
key: 'rotation',
|
|
set: function set(rotation) {
|
|
this.setRotation(rotation, null);
|
|
}
|
|
}, {
|
|
key: 'forceSize',
|
|
set: function set(dimensions) {
|
|
this.setForceSize(dimensions, null);
|
|
}
|
|
}, {
|
|
key: 'ratio',
|
|
set: function set(ratio) {
|
|
this.setRatio(ratio, null);
|
|
}
|
|
}], [{
|
|
key: 'options',
|
|
value: function options() {
|
|
var defaults = {
|
|
// edit button is enabled by default
|
|
edit: true,
|
|
|
|
// immidiately summons editor on load
|
|
instantEdit: false,
|
|
|
|
// set to true to upload data as base64 string
|
|
uploadBase64: false,
|
|
|
|
// metadata values
|
|
meta: {},
|
|
|
|
// ratio of crop by default is the same as input image ratio
|
|
ratio: 'free',
|
|
|
|
// use fix value for device pixel ratio
|
|
devicePixelRatio: 1, // set to 'auto' to use device ratio
|
|
|
|
// dimensions to resize the resulting image to
|
|
size: null,
|
|
|
|
// set initial rotation
|
|
rotation: null,
|
|
|
|
// initial crop settings for example: {x:0, y:0, width:100, height:100}
|
|
crop: null,
|
|
|
|
// post these values
|
|
post: ['output', 'actions'],
|
|
|
|
// call this service to submit cropped data
|
|
service: null,
|
|
serviceFormat: null,
|
|
|
|
// sharpen filter value, really low values might improve image output
|
|
filterSharpen: 0,
|
|
|
|
// when service is set, and this is set to true, Soon will auto upload all crops (also auto crops)
|
|
push: false,
|
|
|
|
// default fallback name for field
|
|
defaultInputName: 'slim[]',
|
|
|
|
// minimum size of cropped area object with width and height property
|
|
minSize: {
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
|
|
// maximum file size in MB to upload
|
|
maxFileSize: null,
|
|
|
|
// compression of JPEG (between 0 and 100)
|
|
jpegCompression: null,
|
|
|
|
// upload method of request
|
|
uploadMethod: 'POST',
|
|
|
|
// render download link
|
|
download: false,
|
|
|
|
// save initially loaded image
|
|
saveInitialImage: false,
|
|
|
|
// the type to force (jpe|jpg|jpeg or png)
|
|
forceType: false,
|
|
|
|
// the forced output size of the image
|
|
forceSize: null,
|
|
|
|
forceMinSize: true,
|
|
|
|
// disable drop to replace
|
|
dropReplace: true,
|
|
|
|
// remote URL service
|
|
fetcher: null,
|
|
|
|
// set the internal canvas size
|
|
internalCanvasSize: {
|
|
width: 4096,
|
|
height: 4096
|
|
},
|
|
|
|
// copies the input image meta data to the output image
|
|
copyImageHead: false,
|
|
|
|
// enable or disable rotation
|
|
rotateButton: true,
|
|
|
|
// popover classname
|
|
popoverClassName: null,
|
|
|
|
// label HTML to show inside drop area
|
|
label: '<p>Drop your image here</p>',
|
|
labelLoading: '<p>Loading image...</p>',
|
|
|
|
// error messages
|
|
statusFileType: '<p>Invalid file type, expects: $0.</p>',
|
|
statusFileSize: '<p>File is too big, maximum file size: $0 MB.</p>',
|
|
statusNoSupport: '<p>Your browser does not support image cropping.</p>',
|
|
statusImageTooSmall: '<p>Image is too small, minimum size is: $0 pixels.</p>',
|
|
statusContentLength: '<span class="slim-upload-status-icon"></span> The file is probably too big',
|
|
statusUnknownResponse: '<span class="slim-upload-status-icon"></span> An unknown error occurred',
|
|
statusUploadSuccess: '<span class="slim-upload-status-icon"></span> Saved',
|
|
statusLocalUrlProblem: null,
|
|
|
|
// callback methods
|
|
didInit: function didInit(data) {},
|
|
didLoad: function didLoad(file, image, meta) {
|
|
return true;
|
|
},
|
|
didSave: function didSave(data) {},
|
|
didUpload: function didUpload(err, data, res) {},
|
|
didReceiveServerError: function didReceiveServerError(err, defaultError) {
|
|
return defaultError;
|
|
},
|
|
didRemove: function didRemove(data) {},
|
|
didTransform: function didTransform(data) {},
|
|
didConfirm: function didConfirm(data) {},
|
|
didCancel: function didCancel() {},
|
|
didThrowError: function didThrowError() {},
|
|
|
|
willCropInitial: function willCropInitial(file, cb) {
|
|
cb(null);
|
|
},
|
|
willTransform: function willTransform(data, cb) {
|
|
cb(data);
|
|
},
|
|
willSave: function willSave(data, cb) {
|
|
cb(data);
|
|
},
|
|
willRemove: function willRemove(data, cb) {
|
|
cb();
|
|
},
|
|
willRequest: function willRequest(xhr, data) {},
|
|
willFetch: function willFetch(xhr) {},
|
|
willLoad: function willLoad(xhr) {}
|
|
};
|
|
|
|
// add default button labels
|
|
SlimButtons.concat(ImageEditor.Buttons).concat('rotate').forEach(function (btn) {
|
|
var capitalized = capitalizeFirstLetter(btn);
|
|
defaults['button' + capitalized + 'ClassName'] = null;
|
|
defaults['button' + capitalized + 'Label'] = capitalized;
|
|
defaults['button' + capitalized + 'Title'] = capitalized;
|
|
});
|
|
|
|
return defaults;
|
|
}
|
|
}]);
|
|
|
|
return Slim;
|
|
}();
|
|
|
|
/**
|
|
* Slim Static Methods
|
|
*/
|
|
|
|
|
|
(function () {
|
|
var instances = [];
|
|
|
|
var indexOfElement = function indexOfElement(element) {
|
|
var i = 0;
|
|
var l = instances.length;
|
|
for (; i < l; i++) {
|
|
if (instances[i].isAttachedTo(element)) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
|
|
function toLabel(v) {
|
|
// if value set, use as label
|
|
if (v) {
|
|
return '<p>' + v + '</p>';
|
|
}
|
|
|
|
// else use default text
|
|
return null;
|
|
}
|
|
|
|
function toFunctionReference(name) {
|
|
var ref = window;
|
|
var levels = name.split('.');
|
|
levels.forEach(function (level, index) {
|
|
if (!ref[levels[index]]) {
|
|
return;
|
|
}
|
|
ref = ref[levels[index]];
|
|
});
|
|
return ref !== window ? ref : null;
|
|
}
|
|
|
|
var passThrough = function passThrough(v) {
|
|
return v;
|
|
};
|
|
var defaultFalse = function defaultFalse(v) {
|
|
return v === 'true';
|
|
};
|
|
var defaultTrue = function defaultTrue(v) {
|
|
return v ? v === 'true' : true;
|
|
};
|
|
var defaultLabel = function defaultLabel(v) {
|
|
return toLabel(v);
|
|
};
|
|
var defaultFunction = function defaultFunction(v) {
|
|
return v ? toFunctionReference(v) : null;
|
|
};
|
|
var defaultSize = function defaultSize(v) {
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
var parts = intSplit(v, ',');
|
|
return {
|
|
width: parts[0],
|
|
height: parts[1]
|
|
};
|
|
};
|
|
|
|
var toFloat = function toFloat(v) {
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
return parseFloat(v);
|
|
};
|
|
|
|
var toInt = function toInt(v) {
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
return parseInt(v, 10);
|
|
};
|
|
|
|
var toRect = function toRect(v) {
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
var obj = {};
|
|
v.split(',').map(function (p) {
|
|
return parseInt(p, 10);
|
|
}).forEach(function (v, i) {
|
|
obj[Rect[i]] = v;
|
|
});
|
|
return obj;
|
|
};
|
|
|
|
var defaults = {
|
|
// is user allowed to download the cropped image?
|
|
download: defaultFalse,
|
|
|
|
// is user allowed to edit the cropped image?
|
|
edit: defaultTrue,
|
|
|
|
// open editor immidiately on file drop
|
|
instantEdit: defaultFalse,
|
|
|
|
// minimum crop size in pixels of original image
|
|
minSize: defaultSize,
|
|
|
|
// the final bounding box of the output image
|
|
size: defaultSize,
|
|
|
|
// the forced output size of the image
|
|
forceSize: defaultSize,
|
|
|
|
forceMinSize: defaultTrue,
|
|
|
|
// the internal data canvas size
|
|
internalCanvasSize: defaultSize,
|
|
|
|
// url to post to
|
|
service: function service(v) {
|
|
if (typeof v === 'undefined') {
|
|
return null;
|
|
}
|
|
var fn = toFunctionReference(v);
|
|
if (fn) {
|
|
return fn;
|
|
}
|
|
return v;
|
|
},
|
|
|
|
// format of service data
|
|
serviceFormat: function serviceFormat(v) {
|
|
return typeof v === 'undefined' ? null : v;
|
|
},
|
|
|
|
// url to fetch service
|
|
fetcher: function fetcher(v) {
|
|
return typeof v === 'undefined' ? null : v;
|
|
},
|
|
|
|
// set auto push mode
|
|
push: defaultFalse,
|
|
|
|
// initial rotation
|
|
rotation: function rotation(v) {
|
|
return typeof v === 'undefined' ? null : parseInt(v, 10);
|
|
},
|
|
|
|
// set crop rect
|
|
crop: toRect,
|
|
|
|
// what to post
|
|
post: function post(v) {
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
return v.split(',').map(function (item) {
|
|
return item.trim();
|
|
});
|
|
},
|
|
|
|
// default input name
|
|
defaultInputName: passThrough,
|
|
|
|
// the ratio of the crop
|
|
ratio: function ratio(v) {
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
return v;
|
|
},
|
|
|
|
// maximum file size
|
|
maxFileSize: toFloat,
|
|
|
|
// sharpen filter
|
|
filterSharpen: toInt,
|
|
|
|
// jpeg compression
|
|
jpegCompression: toInt,
|
|
|
|
// base64 data uploading
|
|
uploadBase64: defaultFalse,
|
|
|
|
// sets file type to force output to
|
|
forceType: passThrough,
|
|
|
|
// drop to replace
|
|
dropReplace: defaultTrue,
|
|
|
|
// bool determining if initial image should be saved
|
|
saveInitialImage: defaultFalse,
|
|
|
|
// copies input image head to output image
|
|
copyImageHead: defaultFalse,
|
|
|
|
// rotate button
|
|
rotateButton: defaultTrue,
|
|
|
|
// default labels
|
|
label: defaultLabel,
|
|
labelLoading: defaultLabel,
|
|
|
|
// class name to put on popover element
|
|
popoverClassName: passThrough,
|
|
|
|
// the ratio for pixels
|
|
devicePixelRatio: passThrough,
|
|
|
|
// upload request method
|
|
uploadMethod: passThrough
|
|
};
|
|
|
|
// labels
|
|
['FileSize', 'FileType', 'NoSupport', 'ImageTooSmall'].forEach(function (status) {
|
|
defaults['status' + status] = defaultLabel;
|
|
});
|
|
|
|
// status
|
|
['ContentLength', 'UnknownResponse', 'UploadSuccess', 'localUrlProblem'].forEach(function (status) {
|
|
defaults['status' + status] = passThrough;
|
|
});
|
|
|
|
// the did callbacks
|
|
['Init', 'Load', 'Save', 'Upload', 'Remove', 'Transform', 'ReceiveServerError', 'Confirm', 'Cancel', 'ThrowError'].forEach(function (cb) {
|
|
defaults['did' + cb] = defaultFunction;
|
|
});
|
|
|
|
// the will callbacks
|
|
['CropInitial', 'Transform', 'Save', 'Remove', 'Request', 'Load', 'Fetch'].forEach(function (cb) {
|
|
defaults['will' + cb] = defaultFunction;
|
|
});
|
|
|
|
// button defaults
|
|
var buttonOptions = ['ClassName', 'Label', 'Title'];
|
|
SlimButtons.concat(ImageEditor.Buttons).concat('rotate').forEach(function (btn) {
|
|
var capitalized = capitalizeFirstLetter(btn);
|
|
buttonOptions.forEach(function (opt) {
|
|
defaults['button' + capitalized + opt] = passThrough;
|
|
});
|
|
});
|
|
|
|
Slim.supported = function () {
|
|
return !( // is opera mini
|
|
Object.prototype.toString.call(window.operamini) === '[object OperaMini]' ||
|
|
// no event listener support
|
|
typeof window.addEventListener === 'undefined' ||
|
|
// no file reader support
|
|
typeof window.FileReader === 'undefined' ||
|
|
// no blob slicing (can't dupe files)
|
|
!('slice' in Blob.prototype) ||
|
|
// no .createObjectURL support, used by download method but also convenient to exclude Android 4.3 and lower
|
|
// Android 4.3 and lower don't support XHR2 responseType blob
|
|
typeof window.URL === 'undefined' || typeof window.URL.createObjectURL === 'undefined');
|
|
}();
|
|
|
|
Slim.parse = function (context) {
|
|
var elements;
|
|
var element;
|
|
var i;
|
|
var croppers = [];
|
|
|
|
// find all crop elements and bind Crop behavior
|
|
elements = context.querySelectorAll('.slim:not([data-state])');
|
|
i = elements.length;
|
|
|
|
while (i--) {
|
|
element = elements[i];
|
|
croppers.push(Slim.create(element, Slim.getOptionsFromAttributes(element)));
|
|
}
|
|
|
|
return croppers;
|
|
};
|
|
|
|
Slim.getOptionsFromAttributes = function (element) {
|
|
var dataset = getDataset(element);
|
|
|
|
var options = {
|
|
meta: {}
|
|
};
|
|
|
|
for (var prop in dataset) {
|
|
var valueTransformer = defaults[prop];
|
|
var _value = dataset[prop];
|
|
|
|
if (valueTransformer) {
|
|
_value = valueTransformer(_value);
|
|
_value = _value === null ? clone(Slim.options()[prop]) : _value;
|
|
options[prop] = _value;
|
|
} else if (prop.indexOf('meta') === 0) {
|
|
options['meta'][lowercaseFirstLetter(prop.substr(4))] = _value;
|
|
}
|
|
}
|
|
|
|
return options;
|
|
};
|
|
|
|
Slim.find = function (element) {
|
|
var result = instances.filter(function (instance) {
|
|
return instance.isAttachedTo(element);
|
|
});
|
|
return result ? result[0] : null;
|
|
};
|
|
|
|
Slim.create = function (element, options) {
|
|
// if already in array, can't create another slim
|
|
if (Slim.find(element)) {
|
|
return;
|
|
}
|
|
|
|
// if no options supplied, try to get the options from the element
|
|
if (!options) {
|
|
options = Slim.getOptionsFromAttributes(element);
|
|
}
|
|
|
|
// instance
|
|
var slim = new Slim(element, options);
|
|
|
|
// add new slim
|
|
instances.push(slim);
|
|
|
|
// return the slim instance
|
|
return slim;
|
|
};
|
|
|
|
Slim.destroy = function (element) {
|
|
var index = indexOfElement(element);
|
|
|
|
if (index < 0) {
|
|
return false;
|
|
}
|
|
|
|
instances[index].destroy();
|
|
instances.splice(index, 1);
|
|
|
|
return true;
|
|
};
|
|
})();
|
|
return Slim;
|
|
}); |