119 lines
3.0 KiB
Plaintext
119 lines
3.0 KiB
Plaintext
build: function () {
|
|
var options = this.options;
|
|
var $this = this.$element;
|
|
var $clone = this.$clone;
|
|
var $cropper;
|
|
var $cropBox;
|
|
var $face;
|
|
|
|
if (!this.isLoaded) {
|
|
return;
|
|
}
|
|
|
|
// Unbuild first when replace
|
|
if (this.isBuilt) {
|
|
this.unbuild();
|
|
}
|
|
|
|
// Create cropper elements
|
|
this.$container = $this.parent();
|
|
this.$cropper = $cropper = $(Cropper.TEMPLATE);
|
|
this.$canvas = $cropper.find('.cropper-canvas').append($clone);
|
|
this.$dragBox = $cropper.find('.cropper-drag-box');
|
|
this.$cropBox = $cropBox = $cropper.find('.cropper-crop-box');
|
|
this.$viewBox = $cropper.find('.cropper-view-box');
|
|
this.$face = $face = $cropBox.find('.cropper-face');
|
|
|
|
// Hide the original image
|
|
$this.addClass(CLASS_HIDDEN).after($cropper);
|
|
|
|
// Show the clone image if is hidden
|
|
if (!this.isImg) {
|
|
$clone.removeClass(CLASS_HIDE);
|
|
}
|
|
|
|
this.initPreview();
|
|
this.bind();
|
|
|
|
options.aspectRatio = max(0, options.aspectRatio) || NaN;
|
|
options.viewMode = max(0, min(3, round(options.viewMode))) || 0;
|
|
|
|
if (options.autoCrop) {
|
|
this.isCropped = true;
|
|
|
|
if (options.modal) {
|
|
this.$dragBox.addClass(CLASS_MODAL);
|
|
}
|
|
} else {
|
|
$cropBox.addClass(CLASS_HIDDEN);
|
|
}
|
|
|
|
if (!options.guides) {
|
|
$cropBox.find('.cropper-dashed').addClass(CLASS_HIDDEN);
|
|
}
|
|
|
|
if (!options.center) {
|
|
$cropBox.find('.cropper-center').addClass(CLASS_HIDDEN);
|
|
}
|
|
|
|
if (options.cropBoxMovable) {
|
|
$face.addClass(CLASS_MOVE).data(DATA_ACTION, ACTION_ALL);
|
|
}
|
|
|
|
if (!options.highlight) {
|
|
$face.addClass(CLASS_INVISIBLE);
|
|
}
|
|
|
|
if (options.background) {
|
|
$cropper.addClass(CLASS_BG);
|
|
}
|
|
|
|
if (!options.cropBoxResizable) {
|
|
$cropBox.find('.cropper-line, .cropper-point').addClass(CLASS_HIDDEN);
|
|
}
|
|
|
|
this.setDragMode(options.dragMode);
|
|
this.render();
|
|
this.isBuilt = true;
|
|
this.setData(options.data);
|
|
$this.one(EVENT_BUILT, options.built);
|
|
|
|
// Trigger the built event asynchronously to keep `data('cropper')` is defined
|
|
setTimeout($.proxy(function () {
|
|
this.trigger(EVENT_BUILT);
|
|
this.isCompleted = true;
|
|
}, this), 0);
|
|
},
|
|
|
|
unbuild: function () {
|
|
if (!this.isBuilt) {
|
|
return;
|
|
}
|
|
|
|
this.isBuilt = false;
|
|
this.isCompleted = false;
|
|
this.initialImage = null;
|
|
|
|
// Clear `initialCanvas` is necessary when replace
|
|
this.initialCanvas = null;
|
|
this.initialCropBox = null;
|
|
this.container = null;
|
|
this.canvas = null;
|
|
|
|
// Clear `cropBox` is necessary when replace
|
|
this.cropBox = null;
|
|
this.unbind();
|
|
|
|
this.resetPreview();
|
|
this.$preview = null;
|
|
|
|
this.$viewBox = null;
|
|
this.$cropBox = null;
|
|
this.$dragBox = null;
|
|
this.$canvas = null;
|
|
this.$container = null;
|
|
|
|
this.$cropper.remove();
|
|
this.$cropper = null;
|
|
},
|