src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/info_bar.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7 <link rel="import" href="/tvcm/ui.html">
   8 <link rel="import" href="/tvcm/ui/dom_helpers.html">
   9 <link rel="stylesheet" href="/tvcm/ui/info_bar.css">
  10 <script>
  11 'use strict';
  12
  13 tvcm.exportTo('tvcm.ui', function() {
  14   /**
  15    * @constructor
  16    */
  17   var InfoBar = tvcm.ui.define('x-info-bar');
  18
  19   InfoBar.prototype = {
  20     __proto__: HTMLDivElement.prototype,
  21
  22     decorate: function() {
  23       this.messageEl_ = tvcm.ui.createSpan({className: 'message'});
  24       this.buttonsEl_ = tvcm.ui.createSpan({className: 'buttons'});
  25
  26       this.appendChild(this.messageEl_);
  27       this.appendChild(this.buttonsEl_);
  28       this.message = '';
  29       this.visible = false;
  30     },
  31
  32     get message() {
  33       return this.messageEl_.textContent;
  34     },
  35
  36     set message(message) {
  37       this.messageEl_.textContent = message;
  38     },
  39
  40     get visible() {
  41       return this.classList.contains('info-bar-hidden');
  42     },
  43
  44     set visible(visible) {
  45       if (visible)
  46         this.classList.remove('info-bar-hidden');
  47       else
  48         this.classList.add('info-bar-hidden');
  49     },
  50
  51     removeAllButtons: function() {
  52       this.buttonsEl_.textContent = '';
  53     },
  54
  55     addButton: function(text, clickCallback) {
  56       var button = document.createElement('button');
  57       button.textContent = text;
  58       button.addEventListener('click', clickCallback);
  59       this.buttonsEl_.appendChild(button);
  60       return button;
  61     }
  62   };
  63
  64   /**
  65    * @constructor
  66    */
  67   var InfoBarGroup = tvcm.ui.define('x-info-bar-group');
  68
  69   InfoBarGroup.prototype = {
  70     __proto__: HTMLUnknownElement.prototype,
  71
  72     decorate: function() {
  73       this.messages_ = [];
  74     },
  75
  76     clearMessages: function() {
  77       this.messages_ = [];
  78       this.updateContents_();
  79     },
  80
  81     addMessage: function(text, opt_buttons) {
  82       opt_buttons = opt_buttons || [];
  83       for (var i = 0; i < opt_buttons.length; i++) {
  84         if (opt_buttons[i].buttonText === undefined)
  85           throw new Error('buttonText must be provided');
  86         if (opt_buttons[i].onClick === undefined)
  87           throw new Error('onClick must be provided');
  88       }
  89
  90       this.messages_.push({
  91         text: text,
  92         buttons: opt_buttons || []
  93       });
  94       this.updateContents_();
  95     },
  96
  97     updateContents_: function() {
  98       this.textContent = '';
  99       this.messages_.forEach(function(message) {
 100         var bar = new InfoBar();
 101         bar.message = message.text;
 102         bar.visible = true;
 103         message.buttons.forEach(function(button) {
 104           bar.addButton(button.buttonText, button.onClick);
 105         }, this);
 106         this.appendChild(bar);
 107       }, this);
 108     }
 109   };
 110
 111
 112   return {
 113     InfoBar: InfoBar,
 114     InfoBarGroup: InfoBarGroup
 115   };
 116 });
 117 </script>