loleaflet/Makefile.am | 9 +
loleaflet/admin/src/AdminSocketSettings.js | 27 ++---
loleaflet/admin/src/ModalDialogCreator.ts | 138 +++++++++++++++++++++++++++++
loleaflet/package.json | 5 -
loleaflet/po/templates/loleaflet-ui.pot | 4
loleaflet/tsconfig.json | 19 +++
6 files changed, 183 insertions(+), 19 deletions(-)
New commits:
commit a0748dda45ede8ec3d8c2b45f2b3446b0ad0e882
Author: gokaysatir <gokaysa...@collabora.com>
AuthorDate: Tue Jun 9 11:13:52 2020 +0300
Commit: Dennis Francis <dennis.fran...@collabora.com>
CommitDate: Tue Jun 9 14:33:40 2020 +0200
leaflet: Introduce typescript. Initiate a modal library with typescript.
Change-Id: I92113f7552f938f0874e8b16904e8bef0b5249a3
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/95624
Reviewed-by: Michael Meeks <michael.me...@collabora.com>
Reviewed-by: Dennis Francis <dennis.fran...@collabora.com>
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
Tested-by: Jenkins
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index b411a4f7c..ff2071a04 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -95,7 +95,8 @@ LOLEAFLET_ADMIN_JS =\
admin/src/AdminSocketAnalytics.js \
admin/src/AdminSocketSettings.js \
admin/src/AdminSocketHistory.js \
- admin/src/AdminSocketLog.js
+ admin/src/AdminSocketLog.js \
+ admin/src/ModalDialogCreator.js
NODE_MODULES_SRC =\
autolinker@3.14.1 \
@@ -391,7 +392,11 @@ if !ENABLE_MOBILEAPP
ADMIN_BUNDLE = $(DIST_FOLDER)/admin-bundle.js
endif
-build-loleaflet: $(LOLEAFLET_L10N_DST) \
+compilets:
+ $(srcdir)/node_modules/typescript/bin/tsc
+
+build-loleaflet: compilets \
+ $(LOLEAFLET_L10N_DST) \
$(L10N_JSON) \
$(LOLEAFLET_IMAGES_DST) \
$(LOLEAFLET_IMAGES_CUSTOM_DST) \
diff --git a/loleaflet/admin/src/AdminSocketSettings.js
b/loleaflet/admin/src/AdminSocketSettings.js
index f57423634..6b4f41f4d 100644
--- a/loleaflet/admin/src/AdminSocketSettings.js
+++ b/loleaflet/admin/src/AdminSocketSettings.js
@@ -2,7 +2,7 @@
/*
Socket to be intialized on opening the settings page in Admin console
*/
-/* global vex $ AdminSocketBase Admin _ */
+/* global DlgYesNo $ AdminSocketBase Admin _ */
var AdminSocketSettings = AdminSocketBase.extend({
constructor: function(host) {
this.base(host);
@@ -29,21 +29,18 @@ var AdminSocketSettings = AdminSocketBase.extend({
socketSettings.send(command);
});
- $('#btnShutdown').click(function() {
- vex.dialog.confirm({
- message: _('Are you sure you want to
shut down the server?'),
- buttons: [
- $.extend({},
vex.dialog.buttons.YES, { text: _('OK') }),
- $.extend({},
vex.dialog.buttons.NO, { text: _('Cancel') })
- ],
- callback: function(value) {
- // TODO: Prompt for reason.
- if (value) {
-
socketSettings.send('shutdown maintenance');
- }
- }
+ document.getElementById('btnShutdown').onclick =
function() {
+ var dialog = (new DlgYesNo())
+ .title(_('Confirmation'))
+ .text(_('Are you sure you want to shut down the
server?'))
+ .yesButtonText(_('OK'))
+ .noButtonText(_('Cancel'))
+ .type('warning')
+ .yesFunction(function() {
+ socketSettings.send('shutdown
maintenance');
});
- });
+ dialog.open();
+ };
});
},
diff --git a/loleaflet/admin/src/ModalDialogCreator.ts
b/loleaflet/admin/src/ModalDialogCreator.ts
new file mode 100644
index 000000000..13dd9f8c3
--- /dev/null
+++ b/loleaflet/admin/src/ModalDialogCreator.ts
@@ -0,0 +1,138 @@
+/* eslint-disable */
+
+/// Available types: info, warning, danger, link, success, primary. Works with
bulma.css.
+
+// Every "set" function returns the instance. So you can do this:
+// (new DlgYesNo).Title('some title').Text('some
text').YesButtonText('yes').NoButtonText('no').YesFunction(function () {/*
*/}).NoFunction(function() {/** */});
+// "Yes" and "No" buttons call callback function, close the modal and destroy
the modal.
+
+class DlgYesNo {
+ static _instanceCount: number = 0;
+ _instance: DlgYesNo;
+ _modalID: number;
+
+ constructor() {
+ this._instance = this;
+ DlgYesNo._instanceCount++;
+ this._modalID = DlgYesNo._instanceCount;
+ this.initialize();
+ }
+
+ private initialize() {
+ let html: string = this.getModalHTML();
+ let element: HTMLDivElement = document.createElement('div');
+ element.innerHTML = html;
+ document.getElementsByTagName('body')[0].appendChild(element);
+ this.initializeBackgroundClick();
+ this.initializeCrossButton();
+ this.initializeYesButton();
+ this.initializeNoButton();
+ }
+
+ private initializeCrossButton() {
+ let element = document.getElementById('modal-' +
String(this._modalID));
+ document.getElementById('modal-cross-button-' +
String(this._modalID)).onclick = function() {
+ element.classList.remove('is-active');
+ element.parentNode.removeChild(element);
+ };
+ }
+
+ private initializeBackgroundClick() {
+ let element = document.getElementById('modal-' +
String(this._modalID));
+ document.getElementById('modal-background-' +
String(this._modalID)).onclick = function() {
+ element.classList.remove('is-active');
+ element.parentNode.removeChild(element);
+ };
+ }
+
+ private initializeYesButton() {
+ let element = document.getElementById('modal-' +
String(this._modalID));
+ document.getElementById('modal-yes-button-' +
String(this._modalID)).onclick = function() {
+ element.classList.remove('is-active');
+ element.parentNode.removeChild(element);
+ };
+ }
+
+ private initializeNoButton() {
+ let element = document.getElementById('modal-' +
String(this._modalID));
+ document.getElementById('modal-no-button-' +
String(this._modalID)).onclick = function() {
+ element.classList.remove('is-active');
+ element.parentNode.removeChild(element);
+ };
+ }
+
+ private getModalHTML(): string {
+ let html: string = ' \
+<div class="modal" id="modal-__created_id__"> \
+ <div class="modal-background" id="modal-background-__created_id__"></div> \
+ <div class="modal-card"> \
+ <header class="modal-card-head" id="modal-head-__created_id__"> \
+ <p class="modal-card-title" id="modal-title-__created_id__">Yes /
No Modal Template</p> \
+ <button class="delete"
id="modal-cross-button-__created_id__"></button> \
+ </header> \
+ <section class="modal-card-body" id="modal-body-__created_id__">Yes /
No Modal Body</section> \
+ <footer class="modal-card-foot is-fullwidth"
id="modal-foot-__created_id__"> \
+ <button type="button" class="button is-pulled-left"
id="modal-no-button-__created_id__" style="min-width:120px;">Cancel</button> \
+ <button type="button" class="button is-pulled-right"
id="modal-yes-button-__created_id__" style="min-width:120px;">OK</button> \
+ </footer> \
+ </div> \
+</div>';
+
+ html = html.split('__created_id__').join(String(this._modalID));
+ return html;
+ }
+
+ yesButtonText(text: string): DlgYesNo {
+ let button: HTMLButtonElement =
<HTMLButtonElement>document.getElementById('modal-yes-button-' +
String(this._modalID));
+ button.innerText = text;
+ return this._instance;
+ }
+
+ noButtonText(text: string): DlgYesNo {
+ let button: HTMLButtonElement =
<HTMLButtonElement>document.getElementById('modal-no-button-' +
String(this._modalID));
+ button.innerText = text;
+ return this._instance;
+ }
+
+ title(text: string): DlgYesNo {
+ let p: HTMLParagraphElement =
<HTMLParagraphElement>document.getElementById('modal-title-' +
String(this._modalID));
+ p.innerText = text;
+ return this._instance;
+ }
+
+ text(text: string): DlgYesNo {
+ let d: HTMLDivElement =
<HTMLDivElement>document.getElementById('modal-body-' + String(this._modalID));
+ d.innerText = text;
+ return this._instance;
+ }
+
+ type(type: string): DlgYesNo {
+ let header: HTMLDivElement =
<HTMLDivElement>document.getElementById('modal-head-' + String(this._modalID));
+ header.className = 'modal-card-head has-background-' + type;
+ return this._instance;
+ }
+
+ yesFunction(f: any): DlgYesNo {
+ let element = document.getElementById('modal-' +
String(this._modalID));
+ document.getElementById('modal-yes-button-' +
String(this._modalID)).onclick = function(e: MouseEvent) {
+ f(e);
+ element.classList.remove('is-active');
+ element.parentNode.removeChild(element);
+ };
+ return this._instance;
+ }
+
+ noFunction(f: any): DlgYesNo {
+ let element = document.getElementById('modal-' +
String(this._modalID));
+ document.getElementById('modal-no-button-' +
String(this._modalID)).onclick = function(e: MouseEvent) {
+ f(e);
+ element.classList.remove('is-active');
+ element.parentNode.removeChild(element);
+ };
+ return this._instance;
+ }
+
+ open() {
+ document.getElementById('modal-' +
String(this._modalID)).classList.add('is-active');
+ }
+}
\ No newline at end of file
diff --git a/loleaflet/package.json b/loleaflet/package.json
index 67120b699..7a1aba5d0 100644
--- a/loleaflet/package.json
+++ b/loleaflet/package.json
@@ -13,7 +13,7 @@
"jquery": "2.2.4",
"jquery-contextmenu": "2.9.2",
"jquery-mousewheel": "3.1.13",
- "jquery-ui-dist": "^1.12.1",
+ "jquery-ui-dist": "1.12.1",
"json-js": "1.1.2",
"l10n-for-node": "0.0.1",
"select2": "4.0.13",
@@ -22,7 +22,8 @@
"uglify-js": "3.9.4",
"uglifycss": "0.0.29",
"uglifyify": "5.0.2",
- "vex-js": "4.1.0"
+ "vex-js": "4.1.0",
+ "typescript": "3.9.5"
},
"repository": {
"type": "git",
diff --git a/loleaflet/po/templates/loleaflet-ui.pot
b/loleaflet/po/templates/loleaflet-ui.pot
index 401133ae4..0be4cc531 100644
--- a/loleaflet/po/templates/loleaflet-ui.pot
+++ b/loleaflet/po/templates/loleaflet-ui.pot
@@ -1362,3 +1362,7 @@ msgstr ""
#: src/map/handler/Map.WOPI.js:422
msgid "Creating copy..."
msgstr ""
+
+#: admin/src/AdminSocketSettings.js:34
+msgid "Confirmation"
+msgstr ""
diff --git a/loleaflet/tsconfig.json b/loleaflet/tsconfig.json
new file mode 100644
index 000000000..8b0e0ca65
--- /dev/null
+++ b/loleaflet/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "target": "es5",
+ "module": "commonjs",
+ "sourceMap": false,
+ "moduleResolution": "classic",
+ "noImplicitAny": true,
+ "removeComments": false,
+ "preserveConstEnums": false,
+ "watch": false
+ },
+ "files": [
+ "admin/src/ModalDialogCreator.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+ }
\ No newline at end of file
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
