140 lines
5.0 KiB
HTML
140 lines
5.0 KiB
HTML
<!-- 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-styles/strolch-wc-styles.html">
|
|
<link rel="import" href="../strolch-wc-util-behavior/strolch-wc-util-behavior.html">
|
|
<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
|
|
|
|
<dom-module id="strolch-wc-dialog-button">
|
|
<template>
|
|
<!-- Style -->
|
|
<style is="custom-style" include="strolch-wc-styles">
|
|
:host {
|
|
pointer-events: all !important;
|
|
}
|
|
|
|
.aligned-dialog {
|
|
margin: 0;
|
|
min-width: 300px;
|
|
}
|
|
</style>
|
|
|
|
<!-- Content -->
|
|
<paper-icon-button disabled$="{{!dialogContent}}"
|
|
icon="{{buttonIcon}}"
|
|
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">
|
|
<template is="dom-if" if="[[dialogHeadline]]">
|
|
<h2>{{dialogHeadline}}</h2>
|
|
</template>
|
|
<template is="dom-if" if="[[isDefined(localizeContent)]]">
|
|
<p>[[localize(dialogContent)]]</p>
|
|
<template is="dom-if" if="[[isNotEmptyString(supplementaryContent)]]">
|
|
<p>[[localize(supplementaryContent)]]</p>
|
|
</template>
|
|
</template>
|
|
<template is="dom-if" if="[[!isDefined(localizeContent)]]">
|
|
<p>[[dialogContent]]</p>
|
|
<template is="dom-if" if="[[isNotEmptyString(supplementaryContent)]]">
|
|
<p>[[supplementaryContent]]</p>
|
|
</template>
|
|
</template>
|
|
<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: [
|
|
StrolchUtilBehavior, StrolchLocalizeBehavior
|
|
],
|
|
|
|
<!-- Properties -->
|
|
properties: {
|
|
open: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
localizeContent: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
dialogContent: {
|
|
type: String
|
|
},
|
|
supplementaryContent: {
|
|
type: String
|
|
},
|
|
newPage: {
|
|
type: String
|
|
}
|
|
},
|
|
|
|
<!-- 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));
|
|
}
|
|
|
|
this.fire("strolch-change-page", page, true);
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|