| <!-- |
| The <zoom-dialog-sk> custom element declaration. |
| |
| A dialog that wraps around the multi-zoom-sk element. |
| |
| Attributes: |
| None |
| |
| Methods: |
| open(detail) - Opens the dialog with the given detail that is passed to the |
| multi-zoom-sk element. |
| |
| Events: |
| None |
| |
| Mailboxes: |
| None |
| |
| --> |
| |
| <link rel="import" href="bower_components/polymer/polymer.html"> |
| <link rel="import" href="bower_components/paper-dialog/paper-dialog.html"> |
| <link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"> |
| <link rel="import" href="bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="multi-zoom-sk.html"> |
| |
| <dom-module id="zoom-dialog-sk"> |
| <template> |
| <paper-dialog id="zoomDialog" opened="{{opened}}"> |
| <paper-dialog-scrollable> |
| <multi-zoom-sk id="zoomer"></multi-zoom-sk> |
| </paper-dialog-scrollable> |
| <div class="buttons"> |
| <paper-button dialog-dismiss>Close</paper-button> |
| </div> |
| </paper-dialog> |
| </template> |
| <script> |
| Polymer({ |
| is: "zoom-dialog-sk", |
| |
| properties: { |
| opened: { |
| type: Boolean, |
| value: false, |
| notify: true |
| } |
| }, |
| |
| ready: function() { |
| this.listen(this, 'iron-overlay-closed', '_handleZoomClosed'); |
| this.listen(this, 'iron-overlay-opened', '_handleZoomDialogOpened'); |
| }, |
| |
| open: function(detail) { |
| this._zoomDetail = detail; |
| this.$.zoomDialog.open(); |
| }, |
| |
| _handleZoomDialogOpened: function(ev) { |
| if (this._zoomDetail) { |
| this.$.zoomer.setDetails(this._zoomDetail); |
| this.$.zoomDialog.refit(); |
| } |
| }, |
| |
| _handleZoomClosed: function (ev) { |
| this.$.zoomer.clear(); |
| this._zoomDetail = null; |
| } |
| |
| }); |
| </script> |
| </dom-module> |
