Commit 11a53837 authored by Magdalena Turska's avatar Magdalena Turska

backport of pb-popover from LitElement to Polymer

parent 37e39364
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
<title>Pb-popover Demo</title>
<script src="../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../dependencies-dev.html"/>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
main {
display: flex;
justify-content: space-between;
}
</style>
</custom-style>
</head>
<body>
<demo-snippet>
<template>
<main>
<div>
<p><pb-popover>Lorem<span slot="content">tooltip popover</span></pb-popover> ipsum dolor sit amet,
consetetur <pb-popover persistent>sadipscing<span slot="content">persistent dialog popover</span></pb-popover> elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
</main>
</template>
</demo-snippet>
</body>
</html>
......@@ -79,6 +79,7 @@
<link rel="import" href="pb-zoom.html">
<link rel="import" href="pb-view-type.html">
<link rel="import" href="pb-edit-xml.html">
<link rel="import" href="pb-popover.html">
<link rel="import" href="pb-progress.html">
<link rel="import" href="pb-load.html">
<link rel="import" href="pb-download.html">
......
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="pb-mixin.html">
<dom-module id="pb-popover">
<template>
<style>
:host {
display: inline-block;
}
</style>
<a href="#" id="link" on-click="_open"><slot></slot></a>
<template is="dom-if" if="[[_isPersistent()]]">
<paper-dialog id="dialog" dynamic-align no-overlap horizontal-align="left" vertical-align="top">
<h2><slot name="title"></slot></h2>
<paper-dialog-scrollable>
<slot name="content"></slot>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-confirm="dialog-confirm" autofocus="autofocus">
Close
</paper-button>
</div>
</paper-dialog>
</template>
<template is="dom-if" if="[[!_isPersistent()]]">
<paper-tooltip for="link" position="bottom" fit-to-visible-bounds="fit-to-visible-bounds">
<slot name="content"></slot>
</paper-tooltip>
</template>
</template>
<script>
/**
* `pb-popover`
*
*
* @customElement
* @polymer
* @demo demo/pb-popover.html
* @appliesMixin PbMixin
*/
class PbPopover extends PbMixin(Polymer.Element) {
static get is() {
return 'pb-popover';
}
static get properties() {
return {
persistent:{
type: Boolean
}
};
}
connectedCallback() {
super.connectedCallback();
// this.persistent = false;
}
_isPersistent() {
return this.persistent;
}
_open(ev) {
ev.preventDefault();
if (this.persistent) {
const dialog = this.shadowRoot.getElementById('dialog');
dialog.positionTarget = this.shadowRoot.getElementById('link');
dialog.open();
}
}
}
window.customElements.define(PbPopover.is, PbPopover);
</script>
</dom-module>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment