/**
* Create a dialog with a canvas for cropping an image.
*
* `de_epages.externalcontentUiCropslidedialog()` creates a dialog with a canvas for cropping an image.
*
* ### Examples
* Create dialog with canvas for cropping an image.
*
* JavaScript:
*
* de_epages('#myCroppingDialog').externalcontentUiCropslidedialog({
* width: 900,
* height: 300,
* url: 'de_epages/externalcontent/ui/cropslidedialogTest_Image.png'
* });
*
* HTML:
*
* <div id="myCroppingDialog">Crop this!</div>
*
*
* @class jQuery.ui.externalcontentUiCropslidedialog
*
* @uses de_epages
* @uses ep.dict
* @uses jQuery.ui.widget
* @uses jQuery.tmpl
* @uses fabric
* @uses ep.ui.dialog
* @since 6.15.1
*/
/**
* @cfg {Number} [width] Width of canvas.
*/
/**
* @cfg {Number} [height] Height of canvas
*/
/**
* @cfg {Object} [imageOptions] Hash of options to pass to fabric.Image.fromURL.
*/
/**
* @cfg {Object} [dialogOptions] Hash of options to pass to underlying instance of ep.uiDialog.
*/
/**
* @cfg {Object} [canvasOptions] Hash of options to pass to instance of fabric.Canvas.
*/
/**
* @cfg {String} url Path of image to be cropped.
*/
* @cfg {String} [headerInfoText] Header text.
*/
/**
* See `jQuery.ui.externalcontentUiCropslidedialog` for details.
*
* @param {Object} options A map of additional options pass to the method.
* @param {Number} [width] Width of canvas.
* @param {Number} [height] Height of canvas
* @param {Object} [imageOptions] Hash of options to pass to fabric.Image.fromURL.
* @param {Object} [dialogOptions] Hash of options to pass to underlying instance of ep.uiDialog.
* @param {Object} [canvasOptions] Hash of options to pass to instance of fabric.Canvas.
* @param {String} url Path of image to be cropped.
* @param {String} [headerInfoText] Header text.
*
* @method externalcontentUiCropslidedialog
* @member jQuery
*
* @since 6.15.1
*/
/*
* @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved.
*
* @module de_epages.externalcontent.ui.cropslidedialog
*
* @revision $$
*/
define("de_epages/externalcontent/ui/cropslidedialog", [
"jquery",
"ep",
"de_epages",
"fabric",
"$dict!de_epages/externalcontent/dictionary",
"$tmpl!de_epages/externalcontent/ui/cropslidedialog",
"jquery/ui/widget",
"ep/ui/dialog"
], function ($, ep, de_epages, fabric, dict, tmplCropslidedialog) {
/*
* @dictionary de_epages.externalcontent.gadgets
*
* @translation {RepositionYourImage}
* {ImageTooSmall}
*/
// The actual widget.
$.widget('ui.externalcontentUiCropslidedialog', {
options: {
'width': 1050,
'height': 350,
'imageOptions': {},
'dialogOptions': {},
'canvasOptions': {},
'url': '',
'headerInfoText': ''
},
_create: function () {
var self = this,
o = self.options;
$.extend(self, $.tmplItem(tmplCropslidedialog(o), 'elements'));
ep(self.element.append(self.header, self.canvas))
.uiDialog(o.dialogOptions);
self.fabricCanvas = new fabric.Canvas(self.canvas[0], o.canvasOptions);
fabric.Image.fromURL(o.url, $.proxy(self, '_onImageLoad'), o.imageOptions);
},
_setOption: function (key, value) {
if (key === 'headerInfoText') {
this.header.html(value);
}
return this._superApply(arguments);
},
getFabricCanvas: function () {
return this.fabricCanvas;
},
getFabricImage: function () {
return this.fabricImage;
},
_onImageLoad: function (image) {
var self = this,
o = self.options;
// Store *image* for later access through *getFabricImage* method.
self.fabricImage = image;
// We do not allow scaling and rotating.
image.hasControls = false;
// Do not draw borders on image.
image.hasBorders = false;
// Now let's see which *setting* we have here.
if (image.width < (o.width + 1)) {
if (image.height > (o.height)) {
image.lockMovementX = true;
self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
}
else {
image.lockMovementX = image.lockMovementY = true;
self.fabricCanvas.moveCursor = self.fabricCanvas.hoverCursor = self.fabricCanvas.defaultCursor;
self._setOption('headerInfoText', dict.translate('{ImageTooSmall}'));
}
}
else {
if (image.height < (o.height + 1)) {
image.lockMovementY = true;
self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
}
else {
if (image.width > (3 * image.height - 1)) {
image.scaleToHeight(o.height);
image.lockMovementY = true;
self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
}
else {
image.scaleToWidth(o.width);
image.lockMovementX = true;
self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
}
}
}
// Center image.
image.set(self.fabricCanvas.getCenter());
// Add image to *canvas*.
self.fabricCanvas.add(image);
},
destroy: function () {
var self = this;
// Remove all traces of the widget.
self.canvas.remove();
ep(self.element)
.uiDialog('destroy');
return self._superApply(arguments);
}
});
return de_epages;
});