2022-02-01 17:42:58 +01:00
|
|
|
<!-- Components -->
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../paper-icon-button/paper-icon-button.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-util-behavior/strolch-wc-util-behavior.html">
|
|
|
|
|
|
|
|
<dom-module id="strolch-wc-dialog-button">
|
|
|
|
<template>
|
|
|
|
<!-- Style -->
|
2022-04-28 14:58:58 +02:00
|
|
|
<style is="custom-style">
|
2022-02-01 17:42:58 +01:00
|
|
|
:host {
|
|
|
|
pointer-events: all !important;
|
|
|
|
}
|
|
|
|
|
2022-04-28 14:58:58 +02:00
|
|
|
.title {
|
|
|
|
color: var(--paper-dialog-button-color);
|
|
|
|
}
|
|
|
|
|
2022-02-01 17:42:58 +01:00
|
|
|
.aligned-dialog {
|
|
|
|
margin: 0;
|
|
|
|
min-width: 300px;
|
|
|
|
}
|
2022-04-28 14:58:58 +02:00
|
|
|
|
|
|
|
.dialog-headline {
|
|
|
|
padding: 0 8px;
|
|
|
|
margin: 8px 0;
|
|
|
|
@apply(--layout-horizontal);
|
|
|
|
@apply(--layout-center);
|
|
|
|
}
|
2022-02-01 17:42:58 +01:00
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- Content -->
|
2022-02-01 22:10:49 +01:00
|
|
|
<paper-icon-button disabled$="[[!dialogContent]]"
|
|
|
|
icon="[[buttonIcon]]"
|
2022-02-01 17:42:58 +01:00
|
|
|
on-tap="toggleDialog"></paper-icon-button>
|
|
|
|
|
|
|
|
<template is="dom-if" if="[[open]]" restamp>
|
|
|
|
<paper-dialog id="dlg"
|
|
|
|
no-overlap
|
|
|
|
horizontal-align="left"
|
|
|
|
vertical-align="top"
|
|
|
|
id="paper-dialog"
|
|
|
|
class="aligned-dialog"
|
|
|
|
on-iron-overlay-closed="onClose">
|
2022-02-01 22:10:49 +01:00
|
|
|
|
2022-02-01 17:42:58 +01:00
|
|
|
<template is="dom-if" if="[[dialogHeadline]]">
|
2022-04-28 14:58:58 +02:00
|
|
|
<div class="dialog-headline">
|
|
|
|
<paper-icon-button icon="close" on-tap="toggleDialog"></paper-icon-button>
|
|
|
|
<h2 class="title">[[dialogHeadline]]</h2>
|
|
|
|
</div>
|
2022-02-01 17:42:58 +01:00
|
|
|
</template>
|
2022-02-01 22:10:49 +01:00
|
|
|
|
|
|
|
<p>[[dialogContent]]</p>
|
|
|
|
<template is="dom-if" if="[[isNotEmptyString(supplementaryContent)]]">
|
|
|
|
<p>[[supplementaryContent]]</p>
|
2022-02-01 17:42:58 +01:00
|
|
|
</template>
|
2022-02-01 22:10:49 +01:00
|
|
|
|
2022-02-01 17:42:58 +01:00
|
|
|
<template is="dom-if" if="[[linkUrl]]">
|
|
|
|
<a href$="[[linkUrl]]" target="_blank">
|
|
|
|
<paper-button raised style="margin-bottom: 10px">[[linkName]]</paper-button>
|
|
|
|
</a>
|
|
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[newPage]]">
|
|
|
|
<paper-button raised style="margin-left: 24px; margin-bottom: 10px" on-tap="_changePage">
|
|
|
|
[[linkName]]
|
|
|
|
</paper-button>
|
|
|
|
</template>
|
|
|
|
</paper-dialog>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
<!-- Settings -->
|
|
|
|
is: "strolch-wc-dialog-button",
|
|
|
|
|
|
|
|
<!-- Behaviors -->
|
|
|
|
behaviors: [
|
2022-02-01 22:10:49 +01:00
|
|
|
StrolchUtilBehavior
|
2022-02-01 17:42:58 +01:00
|
|
|
],
|
|
|
|
|
|
|
|
<!-- Properties -->
|
|
|
|
properties: {
|
|
|
|
open: {
|
|
|
|
type: Boolean,
|
|
|
|
value: false
|
|
|
|
},
|
|
|
|
dialogContent: {
|
2022-02-01 22:10:49 +01:00
|
|
|
type: String,
|
|
|
|
value: null
|
2022-02-01 17:42:58 +01:00
|
|
|
},
|
|
|
|
supplementaryContent: {
|
2022-02-01 22:10:49 +01:00
|
|
|
type: String,
|
|
|
|
value: null
|
2022-02-01 17:42:58 +01:00
|
|
|
},
|
|
|
|
newPage: {
|
2022-02-01 22:10:49 +01:00
|
|
|
type: String,
|
|
|
|
value: null
|
2022-02-01 17:42:58 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
<!-- Functions -->
|
|
|
|
toggleDialog: function (event) {
|
|
|
|
this.open = !this.open;
|
|
|
|
|
|
|
|
if (this.open) {
|
|
|
|
this.debounce('open-dlg', function () {
|
|
|
|
this.$$('#dlg').positionTarget = event.target;
|
|
|
|
|
|
|
|
// toggle infobox
|
|
|
|
if (this.$$('#dlg').opened) {
|
|
|
|
this.$$('#dlg').close();
|
|
|
|
} else {
|
|
|
|
this.$$('#dlg').open();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// do not bubble the tap event to the wrapping element
|
|
|
|
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
|
|
|
|
},
|
|
|
|
|
|
|
|
onClose: function (e) {
|
|
|
|
this.open = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
_changePage: function () {
|
|
|
|
var queryParamsIndex = this.newPage.indexOf("?");
|
|
|
|
var page;
|
|
|
|
if (queryParamsIndex < 0) {
|
|
|
|
page = this.newPage;
|
|
|
|
} else {
|
|
|
|
page = this.newPage.substring(0, queryParamsIndex);
|
|
|
|
var queryParams = this.newPage.substring(queryParamsIndex + 1);
|
|
|
|
this.setQueryParamsFromObject(this.parseQueryParams(queryParams));
|
|
|
|
}
|
|
|
|
|
2022-04-28 14:59:10 +02:00
|
|
|
this.fire("strolch-change-page", {
|
|
|
|
page: page,
|
|
|
|
keepQueryParams: true
|
|
|
|
});
|
2022-02-01 17:42:58 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|