diff --git a/browser/Makefile.am b/browser/Makefile.am
index 657918d48..c5a2b98f5 100644
--- a/browser/Makefile.am
+++ b/browser/Makefile.am
@@ -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 \
diff --git a/browser/src/control/Control.JSDialogBuilder.js b/browser/src/control/Control.JSDialogBuilder.js
index e9efe0a84..4d5d7a155 100644
--- a/browser/src/control/Control.JSDialogBuilder.js
+++ b/browser/src/control/Control.JSDialogBuilder.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(':');
 
diff --git a/browser/src/control/jsdialog/Widget.DrawingArea.js b/browser/src/control/jsdialog/Widget.DrawingArea.js
new file mode 100644
index 000000000..cdfbe5a94
--- /dev/null
+++ b/browser/src/control/jsdialog/Widget.DrawingArea.js
@@ -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;
+};