popup.js revision 2a99a7e74a7f215066514fe81d2bfa6639d9eddd
12a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// Copyright 2013 The Chromium Authors. All rights reserved. 22a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 32a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// found in the LICENSE file. 42a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 52a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)(function() { 62a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 72a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// A simple popup manager. 82a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)var activePopup = null; 92a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 102a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)function init() { 112a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // Set up the buttons to toggle the popup. 122a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) Array.prototype.forEach.call(document.getElementsByTagName('button'), 132a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) function(button) { 142a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var popupId = button.getAttribute('data-menu'); 152a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (popupId == null) 162a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) return; 172a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var popup = document.getElementById(popupId); 182a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (popup == null) 192a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) throw new Error('No element with id "' + popupId + '" for popup'); 202a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) button.addEventListener('click', function(event) { 212a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) toggle(popup); 222a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) event.stopPropagation(); 232a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) }); 242a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) }); 252a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // Make clicking anywhere else or pressing escape on the page hide the popup. 262a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) document.body.addEventListener('click', function() { 272a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) hideActive(); 282a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) }); 292a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) document.body.addEventListener('keydown', function(event) { 302a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (event.keyCode == 27) 312a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) hideActive(); 322a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) }); 332a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 342a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 352a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)function toggle(popup) { 362a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (hideActive() == popup) 372a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) return; 382a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) popup.style.display = 'block'; 392a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) activePopup = popup; 402a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 412a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 422a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)function hideActive() { 432a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (activePopup == null) 442a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) return; 452a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) activePopup.style.display = '' 462a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var wasActive = activePopup; 472a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) activePopup = null; 482a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) return wasActive; 492a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 502a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 512a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)init(); 522a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 532a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}()); 54