| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <!-- |
| The 'overlay-message' displays an overlaid pop-up on top of the content. |
| |
| By default 'overlay-message' will close whenever other elements are focused |
| as well as automatically disappear after 'duration'. |
| |
| Example usage: |
| |
| <overlay-message id="message" opened="true">Draft saved.</overlay-message> |
| |
| Or: |
| |
| var message = document.getElementById("message"); |
| message.updateContent("Draft saved."); |
| |
| Position is default at the center of the screen. Position can be changed |
| by overriding style attributes: |
| |
| overlay-message { |
| top: 26px; |
| left: 10px; |
| } |
| --> |
| |
| <link rel="import" href="/components/core-overlay/core-overlay.html"> |
| <link rel="import" href="/components/paper-shadow/paper-shadow.html"> |
| |
| <polymer-element |
| name="overlay-message" |
| attributes="text autoCloseDisabled transition duration opened maxWidth |
| delay"> |
| <template> |
| <style> |
| :host { |
| border: 1px solid #f0c36d; |
| background-color: #f9edbe; |
| } |
| |
| #container { |
| overflow: hidden; |
| margin: 5px; |
| } |
| </style> |
| |
| |
| <paper-shadow z="1" hasPosition></paper-shadow> |
| |
| <core-overlay id="overlay" target="{{}}" opened="{{opened}}" |
| autoCloseDisabled="{{autoCloseDisabled}}" |
| sizingTarget="{{$.container}}" transition="{{transition}}"></core-overlay> |
| |
| <div id="container" horizontal layout max-width="{{maxWidth}}"> |
| <div class="message-content" flex id="content"></div> |
| <div class="message-content"> |
| <content></content> |
| </div> |
| </div> |
| |
| </template> |
| |
| <script> |
| 'use strict'; |
| Polymer('overlay-message', { |
| |
| /** |
| * Number of milliseconds to stay opened. 0 to stay open indefinitely. |
| */ |
| duration: 6000, |
| |
| /** |
| * Whether to close overlay if focus is taken somewhere else. |
| */ |
| autoCloseDisabled: false, |
| |
| /** |
| * Number of milliseconds to wait before opening. |
| */ |
| delay: 0, |
| |
| ready: function() { |
| this.defaultConfig = { |
| 'duration': this.duration, |
| 'autoCloseDisabled': this.autoCloseDisabled, |
| 'delay': this.delay |
| }; |
| }, |
| |
| /** |
| * Update content and open 'overlay-message'. If 'overlay-message' is |
| * already opened, it will close then re-open. |
| * @param {string} content String message to display. |
| * @param {Object} config Dictionary of 'overlay-message' attributes to |
| * use for this message. |
| */ |
| updateContent: function(content, config) { |
| this.setConfig(config); |
| this.$.content.innerHTML = content; |
| if (this.delay > 0) { |
| if (this.showJob) { |
| this.showJob.stop(); |
| } |
| this.showJob = this.job(this.showJob, this.show, this.delay); |
| } else { |
| this.show(); |
| } |
| }, |
| |
| setConfig: function(config) { |
| config = config || this.defaultConfig; |
| if ('duration' in config) { |
| this.duration = config['duration']; |
| } |
| if ('autoCloseDisabled' in config) { |
| this.autoCloseDisabled = config['autoCloseDisabled']; |
| } |
| if ('delay' in config) { |
| this.delay = config['delay']; |
| } |
| }, |
| |
| /** |
| * Hide this overlay message. |
| */ |
| hide: function() { |
| if (this.showJob) { |
| this.showJob.stop(); |
| } |
| this.opened = false; |
| }, |
| |
| /** |
| * Show this overlay message. |
| */ |
| show: function() { |
| if (this.hideJob) { |
| this.hideJob.stop(); |
| } |
| if (this.showJob) { |
| this.showJob.stop(); |
| } |
| if (this.duration > 0) { |
| this.hideJob = this.job(this.hideJob, this.hide, this.duration); |
| } |
| this.opened = true; |
| } |
| }); |
| </script> |
| </polymer-element> |
