| <!DOCTYPE html> |
| <html> |
| <meta name="viewport" content="initial-scale=1" /> |
| <meta charset="UTF-8" /> |
| <head> |
| <script src="../dist/dialog-polyfill.js"></script> |
| <link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css"> |
| <style> |
| |
| dialog.actionbar { |
| position: fixed; |
| border: 0; |
| box-sizing: border-box; |
| width: 100%; |
| bottom: 0; |
| background: #fff; |
| transform: translate(0, 100%); |
| transition: transform 0.25s ease-in-out; |
| margin: 0; |
| padding: 0; |
| box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); |
| } |
| dialog.actionbar.appear { |
| transform: translate(0); |
| } |
| |
| dialog.actionbar .holder { |
| display: flex; |
| justify-content: space-around; |
| flex-flow: wrap; |
| } |
| dialog.actionbar .holder button { |
| flex-grow: 1; |
| min-width: 200px; |
| margin: 8px; |
| border: 0; |
| font-family: Roboto, Arial, Sans-Serif; |
| font-size: 23px; |
| line-height: 33px; |
| font-weight: 400; |
| color: #666; |
| border-radius: 2px; |
| background: #ccc; |
| display: block; |
| box-sizing: border-box; |
| border: 2px solid transparent; |
| } |
| dialog.actionbar .holder button:focus { |
| outline: 0; |
| border-color: rgba(0, 0, 0, 0.125); |
| } |
| dialog.actionbar .holder button.cancel { |
| background: #fcc; |
| } |
| |
| dialog.actionbar::backdrop { |
| background: rgba(0, 0, 0, 0.25); |
| opacity: 0; |
| transition: opacity 0.25s ease-in-out; |
| } |
| dialog.actionbar + .backdrop { |
| background: rgba(0, 0, 0, 0.25); |
| opacity: 0; |
| transition: opacity 0.25s ease-in-out; |
| } |
| dialog.actionbar.appear::backdrop { |
| opacity: 1; |
| } |
| dialog.actionbar.appear + .backdrop { |
| opacity: 1; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <p>Builds an action bar from a modal dialog.</p> |
| |
| <button id="show">Show</button> |
| |
| <script> |
| |
| var ActionBar = function() { |
| this.options_ = []; |
| this.cancelButton_ = true; |
| this.dialog_ = null; |
| }; |
| |
| ActionBar.prototype.enableCancelButton = function(value) { |
| this.cancelButton_ = vaue; |
| }; |
| |
| ActionBar.prototype.addOption = function(name, opt_callback) { |
| this.options_.push({name: name, callback: opt_callback || null}); |
| }; |
| |
| ActionBar.prototype.show = function(opt_callback) { |
| if (this.dialog_ != null) { |
| throw "Can't show ActionBar, already visible"; |
| } |
| |
| var dialog = document.createElement('dialog'); |
| if (!('showModal' in dialog)) { |
| dialogPolyfill.registerDialog(dialog); |
| } |
| dialog.className = 'actionbar'; |
| |
| var holder = document.createElement('div'); |
| holder.className = 'holder'; |
| dialog.appendChild(holder); |
| |
| dialog.addEventListener('click', function(ev) { |
| if (ev.target == dialog) { |
| dialog.close(); |
| } |
| }); |
| |
| dialog.addEventListener('close', function() { |
| opt_callback && opt_callback(dialog.returnValue); |
| |
| var cloneDialog = dialog.cloneNode(true); |
| if (!('showModal' in cloneDialog)) { |
| dialogPolyfill.registerDialog(cloneDialog); |
| } |
| |
| document.body.appendChild(cloneDialog); |
| cloneDialog.showModal(); |
| cloneDialog.classList.remove('appear'); |
| window.setTimeout(function() { |
| cloneDialog.close(); // TODO: needed until DOM removal is safe |
| cloneDialog.parentNode.removeChild(cloneDialog); |
| }, 250); |
| |
| if (dialog.parentNode) { |
| dialog.parentNode.removeChild(dialog); |
| } |
| if (this.dialog_ == dialog) { |
| this.dialog_ = null; |
| } |
| }.bind(this)); |
| |
| this.options_.forEach(function(option) { |
| var button = document.createElement('button'); |
| button.textContent = option.name; |
| button.addEventListener('click', function() { |
| if (option.callback) { |
| window.setTimeout(option.callback, 0); |
| } |
| dialog.close(option.name); |
| }); |
| holder.appendChild(button); |
| }); |
| |
| if (this.cancelButton_) { |
| var cancelButton = document.createElement('button'); |
| cancelButton.className = 'cancel'; |
| cancelButton.textContent = 'Cancel'; |
| cancelButton.addEventListener('click', function() { |
| dialog.close(); |
| }); |
| holder.appendChild(cancelButton); |
| } |
| |
| document.body.appendChild(dialog); |
| dialog.showModal(); |
| dialog.classList.add('appear'); |
| |
| this.dialog_ = dialog; |
| }; |
| |
| ////// DEMO |
| |
| show.addEventListener('click', function() { |
| var ab = new ActionBar(); |
| ab.addOption('Display'); |
| ab.addOption('Options'); |
| ab.addOption('Longer Choice'); |
| ab.addOption('Alert', function() { |
| alert('you hit Alert'); |
| }); |
| ab.show(function(choice) { |
| console.info('choice was', choice); |
| }); |
| }); |
| |
| </script> |
| </body> |
| </html> |