strolch-wc-information-dialog/strolch-wc-information-dial...

223 lines
7.8 KiB
HTML
Raw Permalink Normal View History

2021-03-03 09:30:23 +01:00
<!-- Imports -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
2022-04-28 15:00:03 +02:00
<link rel="import" href="../strolch-wc-styles/strolch-wc-app-style.html">
2021-03-03 09:30:23 +01:00
<dom-module id="strolch-wc-information-dialog">
<template>
<!-- Style -->
<style is="custom-style">
2022-04-28 15:00:03 +02:00
.title {
color: var(--paper-dialog-button-color);
2022-04-26 09:27:44 +02:00
}
2021-03-03 09:30:23 +01:00
</style>
<paper-dialog id="dlg" modal>
<iron-a11y-keys keys="esc" on-keys-pressed="close"></iron-a11y-keys>
2022-04-28 15:00:03 +02:00
<h2 class="title">[[title]]</h2>
2021-03-03 09:30:23 +01:00
<p>[[line1]]</p>
<template is="dom-if" if="[[isNotEmptyString(line2)]]">
<p>[[line2]]</p>
</template>
<template is="dom-if" if="[[isNotEmptyString(line3)]]">
<p>[[line3]]</p>
</template>
<div class="buttons">
<template is="dom-if" if="[[confirmation]]">
<template is="dom-if" if="[[cancelable]]">
<paper-button on-tap="_onCancel">[[cancelLbl]]</paper-button>
2021-03-03 09:30:23 +01:00
</template>
<template is="dom-if" if="[[closeable]]">
<paper-button on-tap="_onOk">[[okLbl]]</paper-button>
<paper-button autofocus on-tap="_onClose">[[closeLbl]]</paper-button>
</template>
<template is="dom-if" if="[[!closeable]]">
<paper-button autofocus on-tap="_onOk">[[okLbl]]</paper-button>
</template>
2021-03-03 09:30:23 +01:00
</template>
<template is="dom-if" if="[[!confirmation]]">
<paper-button autofocus on-tap="_onClose">[[closeLbl]]</paper-button>
2021-03-03 09:30:23 +01:00
</template>
</div>
</paper-dialog>
</template>
<script>
Polymer({
2022-04-28 15:00:03 +02:00
is: 'strolch-wc-information-dialog',
2021-03-03 09:30:23 +01:00
behaviors: [
StrolchLocalizeBehavior
],
properties: {
localesPath: {
type: String,
value: './locales.json'
},
title: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
line1: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
line2: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
line3: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
cancelLbl: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
okLbl: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
closeLbl: {
type: String,
value: null
2021-03-03 09:30:23 +01:00
},
confirmation: {
type: Boolean,
value: false
2021-03-03 09:30:23 +01:00
},
cancelable: {
type: Boolean,
value: true
},
closeable: {
type: Boolean,
value: false
},
2021-03-03 09:30:23 +01:00
callback: {
type: Function,
value: null
}
},
isNotEmptyString: function (val) {
return val != null && typeof val === "string" && val.length > 0;
2021-03-03 09:30:23 +01:00
},
observers: [],
_onClose: function () {
this.close();
},
_onCancel: function () {
if (this.confirmation) {
this._confirm(false);
} else {
this.close();
}
},
2021-03-03 09:30:23 +01:00
_onOk: function () {
if (this.confirmation) {
this._confirm(true);
} else {
this.close();
}
},
_confirm: function (confirmed) {
2021-03-03 09:30:23 +01:00
if (this.callback == null) {
console.log("Bad dlg config: no callback!");
alert("Bad dlg config: no callback!");
} else if (typeof this.callback !== "function") {
console.log("Bad dlg config: callback is not a function, but is " + (typeof this.callback));
alert("Bad dlg config: callback is not a function, but is " + (typeof this.callback));
} else {
try {
this.callback(confirmed);
2021-03-03 09:30:23 +01:00
this.close();
} catch (e) {
console.log(e);
alert(e);
}
}
},
open: function (data) {
if (data.i18n) {
var args = [data.i18n.key];
if (data.i18n.values != null) {
Object.keys(data.i18n.values).forEach(function (key) {
args.push(key);
args.push(data.i18n.values[key]);
});
}
this.title = this.localize(data.title);
this.line1 = this.localize.apply(this, args);
this.line2 = data.line2;
this.line3 = data.line3;
} else if (data.translate) {
this.title = this.localize(data.title);
this.line1 = this.localize(data.line1);
this.line2 = this.localize(data.line2);
this.line3 = this.localize(data.line3);
} else {
this.title = data.title;
this.line1 = data.line1;
this.line2 = data.line2;
this.line3 = data.line3;
}
if (data.translate) {
this.cancelLbl = data.cancelLbl ? this.localize(data.cancelLbl) : this.localize("cancel");
this.okLbl = data.okLbl ? this.localize(data.okLbl) : this.localize("ok");
this.closeLbl = data.closeLbl ? this.localize(data.closeLbl) : this.localize("close");
} else {
this.cancelLbl = data.cancelLbl ? data.cancelLbl : this.localize("cancel");
this.okLbl = data.okLbl ? data.okLbl : this.localize("ok");
this.closeLbl = data.closeLbl ? data.closeLbl : this.localize("close");
}
if (data.callback == null) {
this.confirmation = false;
} else {
if (typeof data.callback !== "function") {
alert("Bad dlg config: is confirmation, but callback is not a function, but is " + (typeof data.callback));
return;
}
this.callback = data.callback;
this.confirmation = true;
}
if (this.confirmation)
this.cancelable = !(typeof data.cancelable === "boolean") || data.cancelable;
this.closeable = typeof data.closeable === "boolean" && data.closeable;
2021-03-03 09:30:23 +01:00
console.log("Message: " + this.title + ': ' + this.line1);
this.$.dlg.notifyResize();
this.$.dlg.open();
},
close: function (e) {
this.$.dlg.close();
}
});
</script>
</dom-module>