photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seperated initiation from production code

Browse Source
This commit is contained in:
Erik Tiekstra
2017-05-15 14:54:11 +02:00
parent e12cbac4b1
commit 75796fbbf1
5 changed files with 89 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build-tasks/compile-js.js
+17 -1
View File
@@ -22,6 +22,14 @@ module.exports = () => {
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.join('dist', 'js')));
const production = browserify(path.join('src', 'js', 'main.js'), {
debug: false
})
.bundle()
.pipe(source('pw-image-editor.js'))
.pipe(buffer())
.pipe(gulp.dest(path.join('dist', 'js')));
const min = browserify(path.join('src', 'js', 'main.js'), {
debug: false
})
@@ -31,5 +39,13 @@ module.exports = () => {
.pipe(uglifyJs())
.pipe(gulp.dest(path.join('dist', 'js')));
return merge(debug, min);
const init = browserify(path.join('src', 'js', 'init.js'), {
debug: false
})
.bundle()
.pipe(source('init.js'))
.pipe(buffer())
.pipe(gulp.dest(path.join('dist', 'js')));
return merge(debug, production, min, init);
};
index.php
+3 -2
View File
@@ -21,12 +21,13 @@
</form>
<br /><br />
<div id="wrapper">
<canvas id="canvas" width="1253" height="600" data-image-id="45809"></canvas>
<canvas id="canvas-editor" width="1253" height="600" data-image-id="45809"></canvas>
</div>
<br /><br /><br />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
<script src="/dist/js/main.js"></script>
<script src="/dist/js/pw-image-editor.js"></script>
<script src="/dist/js/init.js"></script>
</body>
</html>
src/js/components/ImageEditor/ImageEditor.js
+2 -2
View File
@@ -3,7 +3,7 @@
var Canvas = require('./Canvas');
var util = require('../util');
function ImageEditor(args) {
function ImageEditor(canvasId, args) {
var _canvas;
var _settings = $.extend({
@@ -11,7 +11,7 @@ function ImageEditor(args) {
}, args);
// Initialize canvas
_canvas = new Canvas('canvas');
_canvas = new Canvas(canvasId);
_canvas.getButtonMenu()
.addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
src/js/init.js
+67
View File
@@ -0,0 +1,67 @@
'use strict';
(function() {
// 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"]')
};
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');
});
function getOptimalDimension(currentDimension, ratio) {
var width = $input.w.val();
var height = $input.h.val();
if (currentDimension === 'h') {
width = Math.round(height / ratio);
} else {
height = Math.round(width / ratio);
}
return {
width: width,
height: height
};
}
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(),
};
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');
},
};
$input.w.on('input', Event.DimensionChange);
$input.h.on('input', Event.DimensionChange);
$input.mirror.on('change', Event.Mirror);
$input.noCrop.on('change', Event.NoCrop);
}());
src/js/main.js
-66
View File
@@ -9,69 +9,3 @@
window.ImageEditor = ImageEditor;
}());
$(function() {
// 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"]')
};
var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
var editor = new ImageEditor({'type': 'canvas'})
.loadImage(imageUrl, function() {
$input.w.trigger('input');
});
function getOptimalDimension(currentDimension, ratio) {
var width = $input.w.val();
var height = $input.h.val();
if (currentDimension === 'h') {
width = Math.round(height / ratio);
} else {
height = Math.round(width / ratio);
}
return {
width: width,
height: height
};
}
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(),
};
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');
},
};
$input.w.on('input', Event.DimensionChange);
$input.h.on('input', Event.DimensionChange);
$input.mirror.on('change', Event.Mirror);
$input.noCrop.on('change', Event.NoCrop);
}());