jsdialog: move Drawing Area to separate file
Signed-off-by: Szymon Kłos <szymon.klos@collabora.com> Change-Id: Id659d7e2fc9b50d43d66fb48d78c1f1dede4b23f
This commit is contained in:
parent
c718a8f042
commit
dae1f7438a
3 changed files with 69 additions and 43 deletions
|
@ -330,8 +330,9 @@ COOL_JS_LST =\
|
|||
src/control/Control.LokDialog.js \
|
||||
src/control/Control.AlertDialog.js \
|
||||
src/control/ColorPicker.js \
|
||||
src/control/jsdialog/Widget.LanguageSelector.js \
|
||||
src/control/jsdialog/Widget.DrawingArea.js \
|
||||
src/control/jsdialog/Widget.FormulabarEdit.js \
|
||||
src/control/jsdialog/Widget.LanguageSelector.js \
|
||||
src/control/jsdialog/Widget.MobileTabControl.js \
|
||||
src/control/jsdialog/Widget.MultilineEdit.js \
|
||||
src/control/jsdialog/Widget.ScrolledWindow.js \
|
||||
|
|
|
@ -113,7 +113,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
|
|||
this._controlHandlers['borderstyle'] = this._borderControl;
|
||||
this._controlHandlers['treelistbox'] = JSDialog.treeView;
|
||||
this._controlHandlers['iconview'] = this._iconViewControl;
|
||||
this._controlHandlers['drawingarea'] = this._drawingAreaControl;
|
||||
this._controlHandlers['drawingarea'] = JSDialog.drawingArea;
|
||||
this._controlHandlers['rootcomment'] = this._rootCommentControl;
|
||||
this._controlHandlers['comment'] = this._commentControl;
|
||||
this._controlHandlers['emptyCommentWizard'] = this._rootCommentControl;
|
||||
|
@ -1797,47 +1797,6 @@ L.Control.JSDialogBuilder = L.Control.extend({
|
|||
return false;
|
||||
},
|
||||
|
||||
_drawingAreaControl: function(parentContainer, data, builder) {
|
||||
var container = L.DomUtil.create('div', builder.options.cssClass + ' ui-drawing-area-container', parentContainer);
|
||||
container.id = data.id;
|
||||
|
||||
if (!data.image)
|
||||
return;
|
||||
|
||||
var image = L.DomUtil.create('img', builder.options.cssClass + ' ui-drawing-area', container);
|
||||
image.src = data.image.replace(/\\/g, '');
|
||||
image.alt = data.text;
|
||||
image.title = data.text;
|
||||
builder.map.uiManager.enableTooltip(image);
|
||||
|
||||
if (data.loading && data.loading === 'true') {
|
||||
var loaderContainer = L.DomUtil.create('div', 'ui-drawing-area-loader-container', container);
|
||||
L.DomUtil.create('div', 'ui-drawing-area-loader', loaderContainer);
|
||||
}
|
||||
if (data.placeholderText && data.placeholderText === 'true') {
|
||||
var spanContainer = L.DomUtil.create('div', 'ui-drawing-area-placeholder-container', container);
|
||||
var span = L.DomUtil.create('span', 'ui-drawing-area-placeholder', spanContainer);
|
||||
span.innerText = data.text;
|
||||
}
|
||||
L.DomEvent.on(image, 'click touchend', function(e) {
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
|
||||
if (e.offsetX) {
|
||||
x = e.offsetX;
|
||||
y = e.offsetY;
|
||||
} else if (e.changedTouches && e.changedTouches.length) {
|
||||
x = e.changedTouches[e.changedTouches.length-1].pageX - $(image).offset().left;
|
||||
y = e.changedTouches[e.changedTouches.length-1].pageY - $(image).offset().top;
|
||||
}
|
||||
|
||||
var coordinates = (x / image.offsetWidth) + ';' + (y / image.offsetHeight);
|
||||
builder.callback('drawingarea', 'click', container, coordinates, builder);
|
||||
}, this);
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
_menubuttonControl: function(parentContainer, data, builder) {
|
||||
var ids = data.id.split(':');
|
||||
|
||||
|
|
66
browser/src/control/jsdialog/Widget.DrawingArea.js
Normal file
66
browser/src/control/jsdialog/Widget.DrawingArea.js
Normal file
|
@ -0,0 +1,66 @@
|
|||
/* -*- js-indent-level: 8 -*- */
|
||||
/*
|
||||
* JSDialog.DrawingArea - drawing area displaying picture sent from the server
|
||||
*
|
||||
* Example JSON:
|
||||
* {
|
||||
* id: 'id',
|
||||
* type: 'drawingarea',
|
||||
* image: 'base64 encoded image',
|
||||
* text: 'alternative text',
|
||||
* loading: true, - show additional spinner div
|
||||
* placeholderText: false, - 'show text next to image'
|
||||
* }
|
||||
*
|
||||
* Copyright the Collabora Online contributors.
|
||||
*
|
||||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
/* global JSDialog $ */
|
||||
|
||||
function _drawingAreaControl (parentContainer, data, builder) {
|
||||
var container = L.DomUtil.create('div', builder.options.cssClass + ' ui-drawing-area-container', parentContainer);
|
||||
container.id = data.id;
|
||||
|
||||
if (!data.image)
|
||||
return;
|
||||
|
||||
var image = L.DomUtil.create('img', builder.options.cssClass + ' ui-drawing-area', container);
|
||||
image.src = data.image.replace(/\\/g, '');
|
||||
image.alt = data.text;
|
||||
image.title = data.text;
|
||||
builder.map.uiManager.enableTooltip(image);
|
||||
|
||||
if (data.loading && data.loading === 'true') {
|
||||
var loaderContainer = L.DomUtil.create('div', 'ui-drawing-area-loader-container', container);
|
||||
L.DomUtil.create('div', 'ui-drawing-area-loader', loaderContainer);
|
||||
}
|
||||
if (data.placeholderText && data.placeholderText === 'true') {
|
||||
var spanContainer = L.DomUtil.create('div', 'ui-drawing-area-placeholder-container', container);
|
||||
var span = L.DomUtil.create('span', 'ui-drawing-area-placeholder', spanContainer);
|
||||
span.innerText = data.text;
|
||||
}
|
||||
L.DomEvent.on(image, 'click touchend', function(e) {
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
|
||||
if (e.offsetX) {
|
||||
x = e.offsetX;
|
||||
y = e.offsetY;
|
||||
} else if (e.changedTouches && e.changedTouches.length) {
|
||||
x = e.changedTouches[e.changedTouches.length-1].pageX - $(image).offset().left;
|
||||
y = e.changedTouches[e.changedTouches.length-1].pageY - $(image).offset().top;
|
||||
}
|
||||
|
||||
var coordinates = (x / image.offsetWidth) + ';' + (y / image.offsetHeight);
|
||||
builder.callback('drawingarea', 'click', container, coordinates, builder);
|
||||
}, this);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
JSDialog.drawingArea = function (parentContainer, data, builder) {
|
||||
var buildInnerData = _drawingAreaControl(parentContainer, data, builder);
|
||||
return buildInnerData;
|
||||
};
|
Loading…
Reference in a new issue