Some refactoring and documentation
This commit is contained in:
Erik Tiekstra
+89
-70
@@ -1,30 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
|
||||
/**
|
||||
* This is just an example usage of the image editor. Also this is used for testing.
|
||||
* This code can be pretty messy, but that is fine because nothing of this will come to
|
||||
* production.
|
||||
*/
|
||||
(function() {
|
||||
var $document = $(document);
|
||||
var $window = $(window);
|
||||
var $wrapper = $('#wrapper');
|
||||
var $formControl = $('#form-control');
|
||||
var editor = null;
|
||||
|
||||
// Inputs for the editor
|
||||
var $input = {
|
||||
w: $('#form-control input[name="w"]'),
|
||||
h: $('#form-control input[name="h"]'),
|
||||
image_id: $('#form-control input[name="image_id"]'),
|
||||
mirror: $('#form-control input[name="mirror"]'),
|
||||
noCrop: $('#form-control input[name="no-crop"]'),
|
||||
border: $('#form-control select[name="canvas-border"]'),
|
||||
w: $formControl.find('input[name="w"]'),
|
||||
h: $formControl.find('input[name="h"]'),
|
||||
image_id: $formControl.find('input[name="image_id"]'),
|
||||
mirror: $formControl.find('input[name="mirror"]'),
|
||||
noCrop: $formControl.find('input[name="no-crop"]'),
|
||||
border: $formControl.find('select[name="canvas-border"]'),
|
||||
};
|
||||
|
||||
var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
|
||||
|
||||
var editor = new ImageEditor('canvas-editor', {
|
||||
type: 'canvas',
|
||||
})
|
||||
.loadImage(imageUrl, function() {
|
||||
$input.w.trigger('input');
|
||||
Event.handleResize();
|
||||
});
|
||||
|
||||
function getOptimalDimension(values, currentDimension, ratio) {
|
||||
if (currentDimension === 'h') {
|
||||
values.width = Math.round(values.height * ratio);
|
||||
@@ -35,63 +34,83 @@
|
||||
return values;
|
||||
}
|
||||
|
||||
var Event = {
|
||||
DimensionChange: function() {
|
||||
var noCropIsChecked = $input.noCrop.is(':checked');
|
||||
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
|
||||
var data = editor.canvas.getViewport().getData();
|
||||
var values = {
|
||||
width: $input.w.val(),
|
||||
height: $input.h.val(),
|
||||
};
|
||||
function handleDimensionChange() {
|
||||
var noCropIsChecked = $input.noCrop.is(':checked');
|
||||
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
|
||||
var data = editor.canvas.getViewport().getData();
|
||||
var values = {
|
||||
width: $input.w.val(),
|
||||
height: $input.h.val(),
|
||||
};
|
||||
|
||||
if (noCropIsChecked) {
|
||||
values = getOptimalDimension(values, currentDimension, data.objectRatio);
|
||||
}
|
||||
|
||||
$input.w.val(values.width);
|
||||
$input.h.val(values.height);
|
||||
|
||||
editor.crop(values.width, values.height);
|
||||
},
|
||||
Mirror: function() {
|
||||
editor.canvas.getImage().transformation.set('mirror', this.checked);
|
||||
},
|
||||
NoCrop: function() {
|
||||
$input.w.trigger('input');
|
||||
},
|
||||
SetBorder: function () {
|
||||
editor.canvas.getViewport().setFrame($(this).val());
|
||||
},
|
||||
handleResize: function() {
|
||||
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
||||
var width = $wrapper.width();
|
||||
var height = isFullScreen ? ($window.height() < 800 ? $window.height() : 800) : $wrapper.height();
|
||||
editor.canvas.resize({width: width, height: height});
|
||||
if (noCropIsChecked) {
|
||||
values = getOptimalDimension(values, currentDimension, data.objectRatio);
|
||||
}
|
||||
};
|
||||
|
||||
$input.w.on('input', Event.DimensionChange);
|
||||
$input.h.on('input', Event.DimensionChange);
|
||||
$input.mirror.on('change', Event.Mirror);
|
||||
$input.noCrop.on('change', Event.NoCrop);
|
||||
$input.border.on('change', Event.SetBorder);
|
||||
$document
|
||||
.on('PIE:dragged', function() {
|
||||
console.log('Dragged the image/dragbar!');
|
||||
})
|
||||
.on('PIE:needs-dragging', function(e, data) {
|
||||
console.log('Image needs dragging on: ' + data.axis);
|
||||
})
|
||||
.on('PIE:dragbar-click', function(e, data) {
|
||||
console.log('Clicked on a dragbar! Axis: ' + data.axis);
|
||||
})
|
||||
.on('PIE:image-start-load', function() {
|
||||
console.log('Start loading image');
|
||||
})
|
||||
.on('PIE:image-end-load', function() {
|
||||
console.log('Image loaded');
|
||||
});
|
||||
$window.on('resize', Event.handleResize);
|
||||
$input.w.val(values.width);
|
||||
$input.h.val(values.height);
|
||||
|
||||
editor.crop(values.width, values.height);
|
||||
}
|
||||
|
||||
function handleMirrorChange() {
|
||||
editor.canvas.getImage().transformation.set('mirror', this.checked);
|
||||
}
|
||||
|
||||
function handleNoCropChange() {
|
||||
$input.w.trigger('input');
|
||||
}
|
||||
|
||||
function handleFrameChange() {
|
||||
editor.canvas.getViewport().setFrame($(this).val());
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
||||
var width = $wrapper.width();
|
||||
var height = isFullScreen ? $window.height() : $wrapper.height();
|
||||
editor.canvas.resize({width: width, height: height});
|
||||
}
|
||||
|
||||
function eventHandlers() {
|
||||
$input.w.on('input', handleDimensionChange);
|
||||
$input.h.on('input', handleDimensionChange);
|
||||
$input.mirror.on('change', handleMirrorChange);
|
||||
$input.noCrop.on('change', handleNoCropChange);
|
||||
$input.border.on('change', handleFrameChange);
|
||||
|
||||
$document
|
||||
.on('PIE:dragged', function() {
|
||||
console.log('Dragged the image/dragbar!');
|
||||
})
|
||||
.on('PIE:needs-dragging', function(e, data) {
|
||||
console.log('Image needs dragging on: ' + data.axis);
|
||||
})
|
||||
.on('PIE:dragbar-click', function(e, data) {
|
||||
console.log('Clicked on a dragbar! Axis: ' + data.axis);
|
||||
})
|
||||
.on('PIE:image-start-load', function() {
|
||||
console.log('Start loading image');
|
||||
})
|
||||
.on('PIE:image-end-load', function() {
|
||||
console.log('Image loaded');
|
||||
});
|
||||
|
||||
$window.on('resize', handleResize);
|
||||
}
|
||||
|
||||
function init() {
|
||||
editor = new ImageEditor('canvas-editor', {
|
||||
type: 'canvas',
|
||||
})
|
||||
.loadImage(imageUrl, function() {
|
||||
$input.w.trigger('input');
|
||||
handleResize();
|
||||
});
|
||||
|
||||
eventHandlers();
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
}());
|
||||
|
||||
Reference in New Issue
Block a user