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:
Szymon Kłos 2023-03-14 11:49:10 +01:00 committed by Szymon Kłos
parent c718a8f042
commit dae1f7438a
3 changed files with 69 additions and 43 deletions

View file

@ -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 \

View file

@ -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(':');

View 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;
};