mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
web_widget_darkroom: Modal, fixes, cleanup * Fix bugs involving the crop and pan functionality by modifying crop and zoom plugins and Darkroom widget * Add Darkroom modal to normal image widget, using darkroom.modal wizard model to provide backend support for modal view * Remove res.users view changes introduced for demo purposes (not needed due to modal functionality) * Clean up existing code, removing many unnecessary DarkroomJS files
This commit is contained in:
Oleg Bulkin
Dave Lasley
@@ -1,11 +0,0 @@
|
||||
/*.darkroom-container{
|
||||
padding-top: 50px;
|
||||
}
|
||||
.darkroom-toolbar{
|
||||
top: 5px;
|
||||
}
|
||||
*/
|
||||
|
||||
.darkroom-button-group{
|
||||
display: inline;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
/* Copyright 2016 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||
*/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_plugins', function(require){
|
||||
"use strict";
|
||||
|
||||
var DarkroomPlugins = Object;
|
||||
DarkroomPlugins.extend = function(destination, source) {
|
||||
for (var property in source) {
|
||||
if (source.hasOwnProperty(property)) {
|
||||
destination[property] = source[property];
|
||||
}
|
||||
}
|
||||
return destination;
|
||||
};
|
||||
|
||||
return DarkroomPlugins
|
||||
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,80 +1,76 @@
|
||||
/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
|
||||
* License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
|
||||
*/
|
||||
/**
|
||||
* Copyright 2013 Matthieu Moquet
|
||||
* Copyright 2016-2017 LasLabs Inc.
|
||||
* License MIT (https://opensource.org/licenses/MIT)
|
||||
**/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_history', function(require){
|
||||
|
||||
'use strict';
|
||||
odoo.define('web_widget_darkroom.darkroom_history', function() {
|
||||
'use strict';
|
||||
|
||||
var DarkroomPluginHistory = function() {
|
||||
|
||||
Darkroom.plugins['history'] = Darkroom.Plugin.extend({
|
||||
undoTransformations: [],
|
||||
|
||||
initialize: function InitDarkroomHistoryPlugin() {
|
||||
this._initButtons();
|
||||
|
||||
this.darkroom.addEventListener('core:transformation', this._onTranformationApplied.bind(this));
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
if (this.darkroom.transformations.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var lastTransformation = this.darkroom.transformations.pop();
|
||||
this.undoTransformations.unshift(lastTransformation);
|
||||
|
||||
this.darkroom.reinitializeImage();
|
||||
this._updateButtons();
|
||||
},
|
||||
|
||||
redo: function() {
|
||||
if (this.undoTransformations.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var cancelTransformation = this.undoTransformations.shift();
|
||||
this.darkroom.transformations.push(cancelTransformation);
|
||||
|
||||
this.darkroom.reinitializeImage();
|
||||
this._updateButtons();
|
||||
},
|
||||
|
||||
_initButtons: function() {
|
||||
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||
|
||||
this.backButton = buttonGroup.createButton({
|
||||
image: 'fa fa-step-backward',
|
||||
disabled: true,
|
||||
editOnly: true,
|
||||
var DarkroomPluginHistory = function() {
|
||||
Darkroom.plugins.history = Darkroom.Plugin.extend({
|
||||
undoTransformations: [],
|
||||
|
||||
initialize: function InitDarkroomHistoryPlugin() {
|
||||
this._initButtons();
|
||||
this.darkroom.addEventListener('core:transformation', this._onTranformationApplied.bind(this));
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
if (this.darkroom.transformations.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var lastTransformation = this.darkroom.transformations.pop();
|
||||
this.undoTransformations.unshift(lastTransformation);
|
||||
|
||||
this.darkroom.reinitializeImage();
|
||||
this._updateButtons();
|
||||
},
|
||||
|
||||
redo: function() {
|
||||
if (this.undoTransformations.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var cancelTransformation = this.undoTransformations.shift();
|
||||
this.darkroom.transformations.push(cancelTransformation);
|
||||
|
||||
this.darkroom.reinitializeImage();
|
||||
this._updateButtons();
|
||||
},
|
||||
|
||||
_initButtons: function() {
|
||||
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||
|
||||
this.backButton = buttonGroup.createButton({
|
||||
image: 'fa fa-step-backward',
|
||||
disabled: true,
|
||||
editOnly: true,
|
||||
});
|
||||
this.forwardButton = buttonGroup.createButton({
|
||||
image: 'fa fa-step-forward',
|
||||
disabled: true,
|
||||
editOnly: true,
|
||||
});
|
||||
|
||||
this.backButton.addEventListener('click', this.undo.bind(this));
|
||||
this.forwardButton.addEventListener('click', this.redo.bind(this));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_updateButtons: function() {
|
||||
this.backButton.disable(this.darkroom.transformations.length === 0);
|
||||
this.forwardButton.disable(this.undoTransformations.length === 0);
|
||||
},
|
||||
|
||||
_onTranformationApplied: function() {
|
||||
this.undoTransformations = [];
|
||||
this._updateButtons();
|
||||
},
|
||||
});
|
||||
|
||||
this.forwardButton = buttonGroup.createButton({
|
||||
image: 'fa fa-step-forward',
|
||||
disabled: true,
|
||||
editOnly: true,
|
||||
});
|
||||
|
||||
this.backButton.addEventListener('click', this.undo.bind(this));
|
||||
this.forwardButton.addEventListener('click', this.redo.bind(this));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_updateButtons: function() {
|
||||
this.backButton.disable((this.darkroom.transformations.length === 0))
|
||||
this.forwardButton.disable((this.undoTransformations.length === 0))
|
||||
},
|
||||
|
||||
_onTranformationApplied: function() {
|
||||
this.undoTransformations = [];
|
||||
this._updateButtons();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
return {DarkroomPluginHistory: DarkroomPluginHistory};
|
||||
|
||||
};
|
||||
|
||||
return {DarkroomPluginHistory: DarkroomPluginHistory};
|
||||
});
|
||||
|
||||
@@ -1,70 +1,64 @@
|
||||
/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
|
||||
* License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
|
||||
*/
|
||||
/**
|
||||
* Copyright 2013 Matthieu Moquet
|
||||
* Copyright 2016-2017 LasLabs Inc.
|
||||
* License MIT (https://opensource.org/licenses/MIT)
|
||||
**/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_rotate', function(require){
|
||||
|
||||
'use strict';
|
||||
|
||||
var DarkroomPluginRotate = function() {
|
||||
odoo.define('web_widget_darkroom.darkroom_rotate', function() {
|
||||
'use strict';
|
||||
|
||||
var Rotation = Darkroom.Transformation.extend({
|
||||
applyTransformation: function(canvas, image, next) {
|
||||
var angle = (image.getAngle() + this.options.angle) % 360;
|
||||
image.rotate(angle);
|
||||
|
||||
var width, height;
|
||||
height = Math.abs(image.getWidth()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getHeight()*(Math.cos(angle*Math.PI/180)));
|
||||
width = Math.abs(image.getHeight()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getWidth()*(Math.cos(angle*Math.PI/180)));
|
||||
|
||||
canvas.setWidth(width);
|
||||
canvas.setHeight(height);
|
||||
|
||||
canvas.centerObject(image);
|
||||
image.setCoords();
|
||||
canvas.renderAll();
|
||||
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
Darkroom.plugins['rotate'] = Darkroom.Plugin.extend({
|
||||
|
||||
initialize: function InitDarkroomRotatePlugin() {
|
||||
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||
|
||||
var leftButton = buttonGroup.createButton({
|
||||
image: 'fa fa-undo oe_edit_only',
|
||||
editOnly: true,
|
||||
var DarkroomPluginRotate = function() {
|
||||
var Rotation = Darkroom.Transformation.extend({
|
||||
applyTransformation: function(canvas, image, next) {
|
||||
var angle = (image.getAngle() + this.options.angle) % 360;
|
||||
image.rotate(angle);
|
||||
|
||||
var height = Math.abs(image.getWidth()*Math.sin(angle*Math.PI/180))+Math.abs(image.getHeight()*Math.cos(angle*Math.PI/180));
|
||||
var width = Math.abs(image.getHeight()*Math.sin(angle*Math.PI/180))+Math.abs(image.getWidth()*Math.cos(angle*Math.PI/180));
|
||||
|
||||
canvas.setWidth(width);
|
||||
canvas.setHeight(height);
|
||||
|
||||
canvas.centerObject(image);
|
||||
image.setCoords();
|
||||
canvas.renderAll();
|
||||
|
||||
next();
|
||||
},
|
||||
});
|
||||
|
||||
var rightButton = buttonGroup.createButton({
|
||||
image: 'fa fa-repeat oe_edit_only',
|
||||
editOnly: true,
|
||||
});
|
||||
|
||||
leftButton.addEventListener('click', this.rotateLeft.bind(this));
|
||||
rightButton.addEventListener('click', this.rotateRight.bind(this));
|
||||
},
|
||||
|
||||
rotateLeft: function rotateLeft() {
|
||||
this.rotate(-90);
|
||||
},
|
||||
|
||||
rotateRight: function rotateRight() {
|
||||
this.rotate(90);
|
||||
},
|
||||
|
||||
rotate: function rotate(angle) {
|
||||
this.darkroom.applyTransformation(
|
||||
new Rotation({angle: angle})
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return {DarkroomPluginRotate: DarkroomPluginRotate};
|
||||
|
||||
Darkroom.plugins.rotate = Darkroom.Plugin.extend({
|
||||
initialize: function InitDarkroomRotatePlugin() {
|
||||
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||
|
||||
var leftButton = buttonGroup.createButton({
|
||||
image: 'fa fa-undo oe_edit_only',
|
||||
editOnly: true,
|
||||
});
|
||||
var rightButton = buttonGroup.createButton({
|
||||
image: 'fa fa-repeat oe_edit_only',
|
||||
editOnly: true,
|
||||
});
|
||||
|
||||
leftButton.addEventListener('click', this.rotateLeft.bind(this));
|
||||
rightButton.addEventListener('click', this.rotateRight.bind(this));
|
||||
},
|
||||
|
||||
rotateLeft: function rotateLeft() {
|
||||
this.rotate(-90);
|
||||
},
|
||||
|
||||
rotateRight: function rotateRight() {
|
||||
this.rotate(90);
|
||||
},
|
||||
|
||||
rotate: function rotate(angle) {
|
||||
this.darkroom.applyTransformation(
|
||||
new Rotation({angle: angle})
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {DarkroomPluginRotate: DarkroomPluginRotate};
|
||||
});
|
||||
|
||||
@@ -1,198 +1,148 @@
|
||||
/* Copyright 2016 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||
*/
|
||||
/**
|
||||
* Copyright 2013 Matthieu Moquet
|
||||
* Copyright 2016-2017 LasLabs Inc.
|
||||
* License MIT (https://opensource.org/licenses/MIT)
|
||||
**/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_zoom', function(require){
|
||||
odoo.define('web_widget_darkroom.darkroom_zoom', function() {
|
||||
'use strict';
|
||||
|
||||
'use strict';
|
||||
var DarkroomPluginZoom = function() {
|
||||
Darkroom.plugins.zoom = Darkroom.Plugin.extend({
|
||||
inZoom: false,
|
||||
zoomLevel: 0,
|
||||
zoomFactor: 0.1,
|
||||
|
||||
var DarkroomPluginZoom = function(){
|
||||
|
||||
Darkroom.plugins['zoom'] = Darkroom.Plugin.extend({
|
||||
|
||||
inZoom: false,
|
||||
zoomLevel: 0,
|
||||
zoomFactor: .1,
|
||||
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||
|
||||
this.zoomButton = buttonGroup.createButton({
|
||||
image: 'fa fa-search',
|
||||
})
|
||||
this.zoomInButton = buttonGroup.createButton({
|
||||
image: 'fa fa-plus',
|
||||
})
|
||||
this.zoomOutButton = buttonGroup.createButton({
|
||||
image: 'fa fa-minus',
|
||||
})
|
||||
this.okButton = buttonGroup.createButton({
|
||||
image: 'fa fa-check',
|
||||
type: 'success',
|
||||
hide: true,
|
||||
editOnly: true,
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||
|
||||
this.zoomButton = buttonGroup.createButton({
|
||||
image: 'fa fa-search',
|
||||
});
|
||||
this.zoomInButton = buttonGroup.createButton({
|
||||
image: 'fa fa-plus',
|
||||
});
|
||||
this.zoomOutButton = buttonGroup.createButton({
|
||||
image: 'fa fa-minus',
|
||||
});
|
||||
this.cancelButton = buttonGroup.createButton({
|
||||
image: 'fa fa-times',
|
||||
type: 'danger',
|
||||
hide: true
|
||||
});
|
||||
|
||||
// Button click events
|
||||
this.zoomButton.addEventListener('click', this.toggleZoom.bind(this));
|
||||
this.zoomInButton.addEventListener('click', this.zoomIn.bind(this));
|
||||
this.zoomOutButton.addEventListener('click', this.zoomOut.bind(this));
|
||||
this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
|
||||
|
||||
// Canvas events
|
||||
this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
|
||||
this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
|
||||
this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
|
||||
$(this.darkroom.canvas.wrapperEl).on('mousewheel', function(event){
|
||||
self.onMouseWheel(event);
|
||||
});
|
||||
|
||||
this.toggleElements(false);
|
||||
},
|
||||
|
||||
toggleZoom: function() {
|
||||
if (this.hasFocus()) {
|
||||
this.releaseFocus();
|
||||
} else {
|
||||
this.requireFocus();
|
||||
}
|
||||
},
|
||||
|
||||
hasFocus: function() {
|
||||
return this.inZoom;
|
||||
},
|
||||
|
||||
releaseFocus: function() {
|
||||
this.toggleElements(false);
|
||||
},
|
||||
|
||||
requireFocus: function() {
|
||||
this.toggleElements(true);
|
||||
},
|
||||
|
||||
toggleElements: function(bool) {
|
||||
var toggle = bool;
|
||||
if (typeof bool === 'undefined') {
|
||||
toggle = !this.hasFocus();
|
||||
}
|
||||
|
||||
this.zoomButton.active(toggle);
|
||||
this.inZoom = toggle;
|
||||
this.zoomInButton.hide(!toggle);
|
||||
this.zoomOutButton.hide(!toggle);
|
||||
this.cancelButton.hide(!toggle);
|
||||
this.darkroom.canvas.default_cursor = toggle ? 'move' : 'default';
|
||||
},
|
||||
|
||||
zoomIn: function() {
|
||||
return this.setZoomLevel(this.zoomFactor, this.getCenterPoint());
|
||||
},
|
||||
|
||||
zoomOut: function() {
|
||||
return this.setZoomLevel(-this.zoomFactor, this.getCenterPoint());
|
||||
},
|
||||
|
||||
// Return fabric.Point object for center of canvas
|
||||
getCenterPoint: function() {
|
||||
var center = this.darkroom.canvas.getCenter();
|
||||
return new fabric.Point(center.left, center.top);
|
||||
},
|
||||
|
||||
// Set internal zoom
|
||||
setZoomLevel: function(factor, point) {
|
||||
var zoomLevel = this.zoomLevel + factor;
|
||||
if (zoomLevel < 0) {
|
||||
zoomLevel = 0;
|
||||
}
|
||||
if (zoomLevel === this.zoomLevel) {
|
||||
return false;
|
||||
}
|
||||
if (point) {
|
||||
var canvas = this.darkroom.canvas;
|
||||
// Add one for zero index
|
||||
canvas.zoomToPoint(point, zoomLevel + 1);
|
||||
this.zoomLevel = zoomLevel;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
onMouseWheel: function(event) {
|
||||
if (this.hasFocus() && event && event.originalEvent) {
|
||||
var modifier = event.originalEvent.wheelDelta < 0 ? -1 : 1;
|
||||
var pointer = this.darkroom.canvas.getPointer(event.originalEvent);
|
||||
var mousePoint = new fabric.Point(pointer.x, pointer.y);
|
||||
this.setZoomLevel(modifier * this.zoomFactor, mousePoint);
|
||||
return event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
onMouseDown: function() {
|
||||
if (this.hasFocus()) {
|
||||
this.panning = true;
|
||||
}
|
||||
},
|
||||
|
||||
onMouseUp: function() {
|
||||
this.panning = false;
|
||||
},
|
||||
|
||||
onMouseMove: function(event) {
|
||||
if (this.panning && event && event.e) {
|
||||
var delta = new fabric.Point(event.e.movementX, event.e.movementY);
|
||||
this.darkroom.canvas.relativePan(delta);
|
||||
}
|
||||
},
|
||||
});
|
||||
this.cancelButton = buttonGroup.createButton({
|
||||
image: 'fa fa-times',
|
||||
type: 'danger',
|
||||
hide: true
|
||||
});
|
||||
|
||||
// Buttons click
|
||||
this.zoomButton.addEventListener('click', this.toggleZoom.bind(this));
|
||||
this.zoomInButton.addEventListener('click', this.zoomIn.bind(this));
|
||||
this.zoomOutButton.addEventListener('click', this.zoomOut.bind(this));
|
||||
//this.okButton.addEventListener('click', this.saveZoom.bind(this));
|
||||
this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
|
||||
|
||||
// Canvas events
|
||||
this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
|
||||
this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
|
||||
this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
|
||||
//this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
|
||||
//this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
|
||||
$(this.darkroom.canvas.wrapperEl).on('mousewheel', function(event){
|
||||
self.onMouseWheel(event);
|
||||
});
|
||||
|
||||
//fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
|
||||
//fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
|
||||
this.toggleElements(false);
|
||||
|
||||
},
|
||||
|
||||
toggleZoom: function() {
|
||||
if (this.hasFocus()) {
|
||||
this.releaseFocus();
|
||||
} else {
|
||||
this.requireFocus();
|
||||
}
|
||||
},
|
||||
|
||||
hasFocus: function() {
|
||||
return this.inZoom;
|
||||
},
|
||||
|
||||
releaseFocus: function() {
|
||||
this.toggleElements(false);
|
||||
},
|
||||
|
||||
requireFocus: function() {
|
||||
this.toggleElements(true);
|
||||
},
|
||||
|
||||
toggleElements: function(activate) {
|
||||
if (activate === 'undefined') {
|
||||
activate = !this.hasFocus();
|
||||
}
|
||||
this.zoomButton.active(!activate);
|
||||
this.inZoom = activate;
|
||||
this.zoomInButton.hide(!activate);
|
||||
this.zoomOutButton.hide(!activate);
|
||||
this.okButton.hide(!activate);
|
||||
this.cancelButton.hide(!activate);
|
||||
this.darkroom.canvas.default_cursor = activate ? "move" : "default";
|
||||
},
|
||||
|
||||
// Return fabric.Point object for center of canvas
|
||||
getCenterPoint: function() {
|
||||
var center = this.darkroom.canvas.getCenter();
|
||||
return new fabric.Point(center.left, center.top);
|
||||
},
|
||||
|
||||
// Set internal zoom
|
||||
setZoomLevel: function(factor, point) {
|
||||
var zoomLevel = this.zoomLevel + factor;
|
||||
if (zoomLevel < 0) zoomLevel = 0;
|
||||
if (zoomLevel == this.zoomLevel) return false;
|
||||
console.log('Setting zoom factor');
|
||||
console.log(zoomLevel);
|
||||
console.log(point);
|
||||
if (point) {
|
||||
var canvas = this.darkroom.canvas;
|
||||
canvas.zoomToPoint(point, zoomLevel + 1); // Add one for zero index
|
||||
this.zoomLevel = zoomLevel;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
getObjectBounds: function() {
|
||||
var canvas = this.darkroom.canvas;
|
||||
var objects = canvas.getObjects();
|
||||
var top = 0, bottom = 0, left = 0, right = 0;
|
||||
for (var idx in objects) {
|
||||
var obj = objects[idx];
|
||||
var objRight = obj.left + obj.getWidth();
|
||||
var objBottom = obj.top + obj.getHeight();
|
||||
if (obj.left < left) left = obj.left;
|
||||
if (objRight > right) right = objRight;
|
||||
if (obj.top < top) top = obj.top;
|
||||
if (objBottom > bottom) bottom = objBottom;
|
||||
}
|
||||
return {
|
||||
top: top,
|
||||
bottom: bottom,
|
||||
left: left,
|
||||
right: right,
|
||||
height: (bottom - top),
|
||||
width: (right - left),
|
||||
}
|
||||
},
|
||||
|
||||
zoomIn: function() {
|
||||
return this.setZoomLevel(this.zoomFactor, this.getCenterPoint());
|
||||
},
|
||||
|
||||
zoomOut: function() {
|
||||
return this.setZoomLevel(-this.zoomFactor, this.getCenterPoint());
|
||||
},
|
||||
|
||||
onMouseWheel: function(event) {
|
||||
if (this.hasFocus() && event && event.originalEvent) {
|
||||
var modifier = event.originalEvent.wheelDelta < 0 ? -1 : 1;
|
||||
var pointer = this.darkroom.canvas.getPointer(event.originalEvent);
|
||||
var mousePoint = new fabric.Point(pointer.x, pointer.y);
|
||||
this.setZoomLevel(modifier * this.zoomFactor, mousePoint);
|
||||
return event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
onMouseDown: function(event) {
|
||||
if (this.hasFocus()) {
|
||||
this.panning = true;
|
||||
}
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
this.panning = false;
|
||||
},
|
||||
|
||||
onMouseMove: function(event) {
|
||||
if (this.panning && event && event.e) {
|
||||
var delta = new fabric.Point(event.e.movementX,
|
||||
event.e.movementY);
|
||||
var canvas = this.darkroom.canvas;
|
||||
var objBounds = this.getObjectBounds();
|
||||
var newPoint = new fabric.Point(
|
||||
-delta.x - canvas.viewportTransform[4],
|
||||
-delta.y - canvas.viewportTransform[5]
|
||||
)
|
||||
if (newPoint.x < objBounds.left || newPoint.x > objBounds.right) {
|
||||
return;
|
||||
}
|
||||
if (newPoint.y < objBounds.top || newPoint.y > objBounds.bottom) {
|
||||
return;
|
||||
}
|
||||
canvas.absolutePan(newPoint);
|
||||
//canvas.setCoords();
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return {DarkroomPluginZoom: DarkroomPluginZoom};
|
||||
};
|
||||
|
||||
return {DarkroomPluginZoom: DarkroomPluginZoom};
|
||||
});
|
||||
|
||||
@@ -1,238 +1,224 @@
|
||||
/* Copyright 2016 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||
*/
|
||||
/**
|
||||
* Copyright 2013 Matthieu Moquet
|
||||
* Copyright 2016-2017 LasLabs Inc.
|
||||
* License MIT (https://opensource.org/licenses/MIT)
|
||||
**/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_widget', function(require){
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var common = require('web.form_common');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
var framework = require('web.framework');
|
||||
var crash_manager = require('web.crash_manager');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
var _t = core._t;
|
||||
|
||||
var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||
className: 'darkroom-widget',
|
||||
template: 'FieldDarkroomImage',
|
||||
placeholder: "/web/static/src/img/placeholder.png",
|
||||
darkroom: null,
|
||||
no_rerender: false,
|
||||
|
||||
defaults: {
|
||||
// Canvas initialization size
|
||||
minWidth: 100,
|
||||
minHeight: 100,
|
||||
maxWidth: 700,
|
||||
maxHeight: 500,
|
||||
|
||||
// Plugins options
|
||||
plugins: {
|
||||
crop: {
|
||||
minHeight: 50,
|
||||
minWidth: 50,
|
||||
ratio: 1
|
||||
},
|
||||
},
|
||||
|
||||
// Post initialization method
|
||||
initialize: function() {
|
||||
// Active crop selection
|
||||
// this.plugins['crop'].requireFocus();
|
||||
// Add custom listener
|
||||
// this.addEventListener('core:transformation', function() { /* ... */ });
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
init: function(field_manager, node) {
|
||||
this._super(field_manager, node);
|
||||
this.options = _.defaults(this.options, this.defaults);
|
||||
},
|
||||
|
||||
_init_darkroom_icons: function() {
|
||||
var element = document.createElement('div');
|
||||
element.id = 'darkroom-icons';
|
||||
element.style.height = 0;
|
||||
element.style.width = 0;
|
||||
element.style.position = 'absolute';
|
||||
element.style.visibility = 'hidden';
|
||||
element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
|
||||
this.el.appendChild(element);
|
||||
},
|
||||
|
||||
_init_darkroom_plugins: function(){
|
||||
require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
|
||||
require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
|
||||
require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
|
||||
require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
|
||||
},
|
||||
odoo.define('web_widget_darkroom.darkroom_widget', function(require) {
|
||||
'use strict';
|
||||
|
||||
_init_darkroom: function() {
|
||||
if (!this.darkroom) {
|
||||
this._init_darkroom_icons();
|
||||
this._init_darkroom_ui();
|
||||
this._init_darkroom_plugins();
|
||||
}
|
||||
},
|
||||
|
||||
_init_darkroom_ui: function() {
|
||||
var core = require('web.core');
|
||||
var common = require('web.form_common');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
var _ = require('_');
|
||||
|
||||
Darkroom.UI = {
|
||||
Toolbar: Toolbar,
|
||||
ButtonGroup: ButtonGroup,
|
||||
Button: Button,
|
||||
};
|
||||
|
||||
// Toolbar object.
|
||||
function Toolbar(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
Toolbar.prototype = {
|
||||
createButtonGroup: function(options) {
|
||||
var buttonGroup = document.createElement('div');
|
||||
buttonGroup.className = 'darkroom-button-group';
|
||||
this.element.appendChild(buttonGroup);
|
||||
|
||||
return new ButtonGroup(buttonGroup);
|
||||
}
|
||||
};
|
||||
|
||||
// ButtonGroup object.
|
||||
function ButtonGroup(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
ButtonGroup.prototype = {
|
||||
createButton: function(options) {
|
||||
var defaults = {
|
||||
image: 'fa fa-question-circle',
|
||||
type: 'default',
|
||||
group: 'default',
|
||||
hide: false,
|
||||
disabled: false,
|
||||
editOnly: false,
|
||||
addClass: '',
|
||||
};
|
||||
|
||||
options = Darkroom.Utils.extend(options, defaults);
|
||||
|
||||
var buttonElement = document.createElement('button');
|
||||
buttonElement.type = 'button';
|
||||
buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
|
||||
buttonElement.innerHTML = '<i class="' + options.image + ' fa-2x"></i>';
|
||||
if (options.editOnly) {
|
||||
buttonElement.classList.add('oe_edit_only');
|
||||
}
|
||||
if (options.addClass) {
|
||||
buttonElement.classList.add(options.addClass);
|
||||
}
|
||||
// buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
|
||||
this.element.appendChild(buttonElement);
|
||||
|
||||
var button = new Button(buttonElement);
|
||||
button.hide(options.hide);
|
||||
button.disable(options.disabled);
|
||||
|
||||
return button;
|
||||
}
|
||||
}
|
||||
|
||||
// Button object.
|
||||
function Button(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
Button.prototype = {
|
||||
addEventListener: function(eventName, listener) {
|
||||
if (this.element.addEventListener){
|
||||
this.element.addEventListener(eventName, listener);
|
||||
} else if (this.element.attachEvent) {
|
||||
this.element.attachEvent('on' + eventName, listener);
|
||||
}
|
||||
var QWeb = core.qweb;
|
||||
|
||||
var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||
className: 'darkroom-widget',
|
||||
template: 'FieldDarkroomImage',
|
||||
placeholder: "/web/static/src/img/placeholder.png",
|
||||
darkroom: null,
|
||||
no_rerender: false,
|
||||
|
||||
defaults: {
|
||||
// Canvas initialization size
|
||||
minWidth: 100,
|
||||
minHeight: 100,
|
||||
maxWidth: 700,
|
||||
maxHeight: 500,
|
||||
|
||||
// Plugin options
|
||||
plugins: {
|
||||
crop: {
|
||||
minHeight: 50,
|
||||
minWidth: 50,
|
||||
ratio: 1
|
||||
},
|
||||
},
|
||||
},
|
||||
removeEventListener: function(eventName, listener) {
|
||||
if (this.element.removeEventListener){
|
||||
this.element.removeEventListener(eventName, listener);
|
||||
}
|
||||
|
||||
init: function(field_manager, node) {
|
||||
this._super(field_manager, node);
|
||||
this.options = _.defaults(this.options, this.defaults);
|
||||
},
|
||||
active: function(value) {
|
||||
if (value){
|
||||
this.element.classList.add('darkroom-button-active');
|
||||
this.element.disabled = false;
|
||||
} else {
|
||||
this.element.classList.remove('darkroom-button-active');
|
||||
this.element.disabled = true;
|
||||
}
|
||||
|
||||
_init_darkroom: function() {
|
||||
if (!this.darkroom) {
|
||||
this._init_darkroom_icons();
|
||||
this._init_darkroom_ui();
|
||||
this._init_darkroom_plugins();
|
||||
}
|
||||
},
|
||||
hide: function(value) {
|
||||
if (value)
|
||||
this.element.classList.add('hidden');
|
||||
else
|
||||
this.element.classList.remove('hidden');
|
||||
|
||||
_init_darkroom_icons: function() {
|
||||
var element = document.createElement('div');
|
||||
element.id = 'darkroom-icons';
|
||||
element.style.height = 0;
|
||||
element.style.width = 0;
|
||||
element.style.position = 'absolute';
|
||||
element.style.visibility = 'hidden';
|
||||
element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
|
||||
this.el.appendChild(element);
|
||||
},
|
||||
disable: function(value) {
|
||||
this.element.disabled = (value) ? true : false;
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
destroy_content: function() {
|
||||
if (this.darkroom && this.darkroom.containerElement) {
|
||||
this.darkroom.containerElement.remove();
|
||||
this.darkroom = null;
|
||||
}
|
||||
},
|
||||
|
||||
set_value: function(value){
|
||||
this.destroy_content();
|
||||
return this._super(value);
|
||||
},
|
||||
|
||||
render_value: function() {
|
||||
this._init_darkroom();
|
||||
var url;
|
||||
if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
|
||||
url = 'data:image/png;base64,' + this.get('value');
|
||||
} else if (this.get('value')) {
|
||||
var id = JSON.stringify(this.view.datarecord.id || null);
|
||||
var field = this.name;
|
||||
if (this.options.preview_image)
|
||||
field = this.options.preview_image;
|
||||
url = session.url('/web/image', {
|
||||
model: this.view.dataset.model,
|
||||
id: id,
|
||||
field: field,
|
||||
unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
|
||||
});
|
||||
} else {
|
||||
url = this.placeholder;
|
||||
}
|
||||
|
||||
var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
|
||||
this.$el.find('> img').remove();
|
||||
this.$el.append($img);
|
||||
this.darkroom = new Darkroom($img.get(0), this.options);
|
||||
this.darkroom.widget = this;
|
||||
},
|
||||
|
||||
commit_value: function(callback) {
|
||||
this.set_value(
|
||||
this.darkroom.sourceImage.toDataURL().split(',')[1]
|
||||
);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
core.form_widget_registry.add("darkroom", FieldDarkroomImage);
|
||||
|
||||
return {
|
||||
FieldDarkroomImage: FieldDarkroomImage,
|
||||
}
|
||||
|
||||
|
||||
_init_darkroom_plugins: function() {
|
||||
require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
|
||||
require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
|
||||
require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
|
||||
require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
|
||||
},
|
||||
|
||||
_init_darkroom_ui: function() {
|
||||
// Button object
|
||||
function Button(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
Button.prototype = {
|
||||
addEventListener: function(eventName, listener) {
|
||||
if (this.element.addEventListener) {
|
||||
this.element.addEventListener(eventName, listener);
|
||||
} else if (this.element.attachEvent) {
|
||||
this.element.attachEvent('on' + eventName, listener);
|
||||
}
|
||||
},
|
||||
removeEventListener: function(eventName, listener) {
|
||||
if (this.element.removeEventListener) {
|
||||
this.element.removeEventListener(eventName, listener);
|
||||
} else if (this.element.detachEvent) {
|
||||
this.element.detachEvent('on' + eventName, listener);
|
||||
}
|
||||
},
|
||||
active: function(bool) {
|
||||
if (bool) {
|
||||
this.element.classList.add('darkroom-button-active');
|
||||
} else {
|
||||
this.element.classList.remove('darkroom-button-active');
|
||||
}
|
||||
},
|
||||
hide: function(bool) {
|
||||
if (bool) {
|
||||
this.element.classList.add('hidden');
|
||||
} else {
|
||||
this.element.classList.remove('hidden');
|
||||
}
|
||||
},
|
||||
disable: function(bool) {
|
||||
this.element.disabled = bool;
|
||||
},
|
||||
};
|
||||
|
||||
// ButtonGroup object
|
||||
function ButtonGroup(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
ButtonGroup.prototype = {
|
||||
createButton: function(options) {
|
||||
var defaults = {
|
||||
image: 'fa fa-question-circle',
|
||||
type: 'default',
|
||||
group: 'default',
|
||||
hide: false,
|
||||
disabled: false,
|
||||
editOnly: false,
|
||||
addClass: '',
|
||||
};
|
||||
var optionsMerged = Darkroom.Utils.extend(options, defaults);
|
||||
|
||||
var buttonElement = document.createElement('button');
|
||||
buttonElement.type = 'button';
|
||||
buttonElement.className = 'darkroom-button darkroom-button-' + optionsMerged.type;
|
||||
buttonElement.innerHTML = '<i class="' + optionsMerged.image + ' fa-2x"></i>';
|
||||
if (optionsMerged.editOnly) {
|
||||
buttonElement.classList.add('oe_edit_only');
|
||||
}
|
||||
if (optionsMerged.addClass) {
|
||||
buttonElement.classList.add(optionsMerged.addClass);
|
||||
}
|
||||
this.element.appendChild(buttonElement);
|
||||
|
||||
var button = new Button(buttonElement);
|
||||
button.hide(optionsMerged.hide);
|
||||
button.disable(optionsMerged.disabled);
|
||||
|
||||
return button;
|
||||
}
|
||||
};
|
||||
|
||||
// Toolbar object
|
||||
function Toolbar(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
Toolbar.prototype = {
|
||||
createButtonGroup: function() {
|
||||
var buttonGroupElement = document.createElement('div');
|
||||
buttonGroupElement.className = 'darkroom-button-group';
|
||||
this.element.appendChild(buttonGroupElement);
|
||||
|
||||
return new ButtonGroup(buttonGroupElement);
|
||||
}
|
||||
};
|
||||
|
||||
Darkroom.UI = {
|
||||
Toolbar: Toolbar,
|
||||
ButtonGroup: ButtonGroup,
|
||||
Button: Button,
|
||||
};
|
||||
},
|
||||
|
||||
destroy_content: function() {
|
||||
if (this.darkroom && this.darkroom.containerElement) {
|
||||
this.darkroom.containerElement.remove();
|
||||
this.darkroom = null;
|
||||
}
|
||||
},
|
||||
|
||||
set_value: function(value) {
|
||||
return this._super(value);
|
||||
},
|
||||
|
||||
render_value: function() {
|
||||
this.destroy_content();
|
||||
this._init_darkroom();
|
||||
|
||||
var url = null;
|
||||
if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
|
||||
url = 'data:image/png;base64,' + this.get('value');
|
||||
} else if (this.get('value')) {
|
||||
var id = JSON.stringify(this.view.datarecord.id || null);
|
||||
var field = this.name;
|
||||
if (this.options.preview_image) {
|
||||
field = this.options.preview_image;
|
||||
}
|
||||
url = session.url('/web/image', {
|
||||
model: this.view.dataset.model,
|
||||
id: id,
|
||||
field: field,
|
||||
unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
|
||||
});
|
||||
} else {
|
||||
url = this.placeholder;
|
||||
}
|
||||
|
||||
var $img = $(QWeb.render("FieldBinaryImage-img", {widget: this, url: url}));
|
||||
this.$el.find('> img').remove();
|
||||
this.$el.append($img);
|
||||
this.darkroom = new Darkroom($img.get(0), this.options);
|
||||
this.darkroom.widget = this;
|
||||
},
|
||||
|
||||
commit_value: function() {
|
||||
if (this.darkroom.sourceImage) {
|
||||
this.set_value(this.darkroom.sourceImage.toDataURL().split(',')[1]);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
core.form_widget_registry.add("darkroom", FieldDarkroomImage);
|
||||
|
||||
return {FieldDarkroomImage: FieldDarkroomImage};
|
||||
});
|
||||
|
||||
@@ -1,246 +0,0 @@
|
||||
/* © 2016-TODAY LasLabs Inc.
|
||||
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
|
||||
*/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_widget', function(require){
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var common = require('web.form_common');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
var framework = require('web.framework');
|
||||
var crash_manager = require('web.crash_manager');
|
||||
|
||||
var QWeb = core.qweb;
|
||||
var _t = core._t;
|
||||
|
||||
var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||
className: 'darkroom-widget',
|
||||
template: 'FieldDarkroomImage',
|
||||
placeholder: "/web/static/src/img/placeholder.png",
|
||||
darkroom: null,
|
||||
no_rerender: false,
|
||||
|
||||
_init_darkroom_icons: function() {
|
||||
var element = document.createElement('div');
|
||||
element.id = 'darkroom-icons';
|
||||
element.style.height = 0;
|
||||
element.style.width = 0;
|
||||
element.style.position = 'absolute';
|
||||
element.style.visibility = 'hidden';
|
||||
element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
|
||||
this.el.appendChild(element);
|
||||
},
|
||||
|
||||
_init_darkroom_plugins: function(){
|
||||
require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
|
||||
require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
|
||||
require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
|
||||
require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
|
||||
require('web_widget_darkroom.darkroom_save').DarkroomPluginSave();
|
||||
},
|
||||
|
||||
_init_darkroom_ui: function() {
|
||||
|
||||
this._init_darkroom_icons();
|
||||
|
||||
Darkroom.UI = {
|
||||
Toolbar: Toolbar,
|
||||
ButtonGroup: ButtonGroup,
|
||||
Button: Button,
|
||||
};
|
||||
|
||||
// Toolbar object.
|
||||
function Toolbar(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
Toolbar.prototype = {
|
||||
createButtonGroup: function(options) {
|
||||
var buttonGroup = document.createElement('div');
|
||||
buttonGroup.className = 'darkroom-button-group';
|
||||
this.element.appendChild(buttonGroup);
|
||||
|
||||
return new ButtonGroup(buttonGroup);
|
||||
}
|
||||
};
|
||||
|
||||
// ButtonGroup object.
|
||||
function ButtonGroup(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
ButtonGroup.prototype = {
|
||||
createButton: function(options) {
|
||||
var defaults = {
|
||||
image: 'fa fa-question-circle',
|
||||
type: 'default',
|
||||
group: 'default',
|
||||
hide: false,
|
||||
disabled: false,
|
||||
editOnly: false,
|
||||
addClass: '',
|
||||
};
|
||||
|
||||
options = Darkroom.Utils.extend(options, defaults);
|
||||
|
||||
var buttonElement = document.createElement('button');
|
||||
buttonElement.type = 'button';
|
||||
buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
|
||||
buttonElement.innerHTML = '<i class="' + options.image + ' fa-2x"></i>';
|
||||
if (options.editOnly) {
|
||||
buttonElement.classList.add('oe_edit_only');
|
||||
}
|
||||
<<<<<<< Updated upstream
|
||||
if (options.addClass) {
|
||||
buttonElement.classList.add(options.addClass);
|
||||
}
|
||||
// buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
|
||||
=======
|
||||
>>>>>>> Stashed changes
|
||||
this.element.appendChild(buttonElement);
|
||||
|
||||
var button = new Button(buttonElement);
|
||||
button.hide(options.hide);
|
||||
button.disable(options.disabled);
|
||||
|
||||
return button;
|
||||
}
|
||||
}
|
||||
|
||||
// Button object.
|
||||
function Button(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
Button.prototype = {
|
||||
addEventListener: function(eventName, listener) {
|
||||
if (this.element.addEventListener){
|
||||
this.element.addEventListener(eventName, listener);
|
||||
} else if (this.element.attachEvent) {
|
||||
this.element.attachEvent('on' + eventName, listener);
|
||||
}
|
||||
},
|
||||
removeEventListener: function(eventName, listener) {
|
||||
if (this.element.removeEventListener){
|
||||
this.element.removeEventListener(eventName, listener);
|
||||
}
|
||||
},
|
||||
active: function(value) {
|
||||
if (value){
|
||||
this.element.classList.add('darkroom-button-active');
|
||||
this.element.disabled = false;
|
||||
} else {
|
||||
this.element.classList.remove('darkroom-button-active');
|
||||
this.element.disabled = true;
|
||||
}
|
||||
},
|
||||
hide: function(value) {
|
||||
if (value)
|
||||
this.element.classList.add('hidden');
|
||||
else
|
||||
this.element.classList.remove('hidden');
|
||||
},
|
||||
disable: function(value) {
|
||||
this.element.disabled = (value) ? true : false;
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
destroy_content: function() {
|
||||
console.log('Destroying Darkroom Obj');
|
||||
this.darkroom.selfDestroy();
|
||||
},
|
||||
|
||||
render_value: function() {
|
||||
console.log('Rerendering');
|
||||
var url;
|
||||
if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
|
||||
url = 'data:image/png;base64,' + this.get('value');
|
||||
} else if (this.get('value')) {
|
||||
var id = JSON.stringify(this.view.datarecord.id || null);
|
||||
var field = this.name;
|
||||
if (this.options.preview_image)
|
||||
field = this.options.preview_image;
|
||||
url = session.url('/web/image', {
|
||||
model: this.view.dataset.model,
|
||||
id: id,
|
||||
field: field,
|
||||
unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
|
||||
});
|
||||
} else {
|
||||
url = this.placeholder;
|
||||
}
|
||||
|
||||
var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
|
||||
this.$el.find('> img').remove();
|
||||
this.$el.append($img);
|
||||
|
||||
if (!this.darkroom) {
|
||||
this._init_darkroom_ui();
|
||||
this._init_darkroom_plugins();
|
||||
}
|
||||
this.darkroom = new Darkroom($img.get(0));
|
||||
this.darkroom.widget = this;
|
||||
},
|
||||
|
||||
on_save_as: function(e) {
|
||||
|
||||
framework.blockUI();
|
||||
var value = this.darkroom.sourceImage.toDataURL();
|
||||
var c = crash_manager;
|
||||
var filename_fieldname = this.node.attrs.filename;
|
||||
var filename_field = this.view.fields && this.view.fields[filename_fieldname];
|
||||
|
||||
var filereader = new FileReader();
|
||||
filereader.onload = function(upload) {
|
||||
var data = upload.target.result;
|
||||
data = data.split(',')[1];
|
||||
$.post({
|
||||
url: '/web/binary/upload',
|
||||
|
||||
})
|
||||
};
|
||||
filereader.readAsDataURL(new Blob(value));
|
||||
|
||||
this.$el.find('form.o_form_darkroom_form input[name=ufile]').val(value);
|
||||
this.$el.find('form.o_form_darkroom_form input[name=session_id]').val(this.session.session_id);
|
||||
this.$el.find('form.o_form_darkroom_form').submit();
|
||||
|
||||
var $form = $(parentEl).find('form');
|
||||
$form.find('input[name=ufile]').val(value);
|
||||
|
||||
},
|
||||
|
||||
init: function(field_manager, node) {
|
||||
var self = this;
|
||||
this._super(field_manager, node);
|
||||
this.binary_value = false;
|
||||
this.useFileAPI = !!window.FileReader;
|
||||
this.max_upload_size = 25 * 1024 * 1024; // 25Mo
|
||||
if (!this.useFileAPI) {
|
||||
this.fileupload_id = _.uniqueId('oe_fileupload');
|
||||
$(window).on(this.fileupload_id, function() {
|
||||
var args = [].slice.call(arguments).slice(1);
|
||||
self.on_file_uploaded.apply(self, args);
|
||||
});
|
||||
}
|
||||
},
|
||||
stop: function() {
|
||||
if (!this.useFileAPI) {
|
||||
$(window).off(this.fileupload_id);
|
||||
}
|
||||
this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
core.form_widget_registry.add("darkroom", FieldDarkroomImage);
|
||||
|
||||
return {
|
||||
FieldDarkroomImage: FieldDarkroomImage,
|
||||
}
|
||||
|
||||
});
|
||||
64
web_widget_darkroom/static/src/js/widget_darkroom_modal.js
Normal file
64
web_widget_darkroom/static/src/js/widget_darkroom_modal.js
Normal file
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* Copyright 2017 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||
**/
|
||||
|
||||
odoo.define('web_widget_darkroom.darkroom_modal_button', function(require) {
|
||||
'use strict';
|
||||
|
||||
var core = require('web.core');
|
||||
var DataModel = require('web.DataModel');
|
||||
|
||||
core.form_widget_registry.get('image').include({
|
||||
// Used in template to prevent Darkroom buttons from being added to
|
||||
// forms for new records, which are not supported
|
||||
darkroom_supported: function() {
|
||||
if (this.field_manager.dataset.index === null) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
render_value: function() {
|
||||
this._super();
|
||||
|
||||
var imageWidget = this;
|
||||
var activeModel = imageWidget.field_manager.dataset._model.name;
|
||||
var activeRecordId = imageWidget.field_manager.datarecord.id;
|
||||
var activeField = imageWidget.node.attrs.name;
|
||||
|
||||
var updateImage = function() {
|
||||
var ActiveModel = new DataModel(activeModel);
|
||||
ActiveModel.query([activeField]).
|
||||
filter([['id', '=', activeRecordId]]).
|
||||
all().
|
||||
then(function(result) {
|
||||
imageWidget.set_value(result[0].image);
|
||||
});
|
||||
};
|
||||
|
||||
var openModal = function() {
|
||||
var context = {
|
||||
active_model: activeModel,
|
||||
active_record_id: activeRecordId,
|
||||
active_field: activeField,
|
||||
};
|
||||
var modalAction = {
|
||||
type: 'ir.actions.act_window',
|
||||
res_model: 'darkroom.modal',
|
||||
name: 'Darkroom',
|
||||
views: [[false, 'form']],
|
||||
target: 'new',
|
||||
context: context,
|
||||
};
|
||||
var options = {on_close: updateImage};
|
||||
imageWidget.do_action(modalAction, options);
|
||||
};
|
||||
|
||||
var $button = this.$('.oe_form_binary_image_darkroom_modal');
|
||||
if ($button.length > 0) {
|
||||
$button.click(openModal);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
11
web_widget_darkroom/static/src/less/darkroom.less
Executable file
11
web_widget_darkroom/static/src/less/darkroom.less
Executable file
@@ -0,0 +1,11 @@
|
||||
.darkroom-button-group {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.darkroom-button-active {
|
||||
color: @odoo-brand-primary;
|
||||
}
|
||||
|
||||
.oe_form_field_image_controls i {
|
||||
margin: 0 5%;
|
||||
}
|
||||
@@ -1,17 +1,30 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!--
|
||||
Copyright 2016 LasLabs Inc.
|
||||
Copyright 2016-2017 LasLabs Inc.
|
||||
License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||
-->
|
||||
|
||||
<templates id="field_templates" xml:space="preserve">
|
||||
<t t-name="FieldDarkroomImage">
|
||||
<span class="oe_form_field o_form_field_darkroom"
|
||||
t-att-style="widget.node.attrs.style">
|
||||
<span class="oe_form_field o_form_field_darkroom" t-att-style="widget.node.attrs.style">
|
||||
<t t-if="!widget.get('effective_readonly')">
|
||||
<div class="darkroom-toolbar" />
|
||||
<div class="darkroom-toolbar"/>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
<t t-extend="FieldBinaryImage">
|
||||
<t t-jquery=".oe_form_binary_file_edit" t-operation="after">
|
||||
<t t-if="widget.darkroom_supported()">
|
||||
<i class="fa fa-picture-o fa-lg oe_form_binary_image_darkroom_modal" title="Darkroom"></i>
|
||||
</t>
|
||||
</t>
|
||||
<t t-jquery=".oe_form_binary_file_edit" t-operation="replace">
|
||||
<i class="fa fa-pencil fa-lg oe_form_binary_file_edit" title="Edit"></i>
|
||||
</t>
|
||||
<t t-jquery=".oe_form_binary_file_clear" t-operation="replace">
|
||||
<i class="fa fa-trash-o fa-lg oe_form_binary_file_clear" title="Clear"></i>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
|
||||
Reference in New Issue
Block a user