[Sommaire] [Imprimer]

   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   2          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
   4    <head>
   5      <title>Prototype Console</title>
   6      <script src="../dist/prototype.js" type="text/javascript"></script>
   7      <script type="text/javascript">
   8        Prototype.Console = Class.create();
   9        Prototype.Console.prototype = {
  10          initialize: function(element, form, input) {
  11            this.element = $(element);
  12            this.form    = $(form);
  13            this.input   = $(input);
  14            this.context = window.eval.bind(window);
  15            this.registerCallbacks();
  16            document.title = 'Prototype Console ' + Prototype.Version;
  17            Field.activate(this.input);
  18          },
  19          
  20          registerCallbacks: function() {
  21            Event.observe(this.form, 'submit', function(event) {
  22              this.eval($F(this.input));
  23              this.input.value = '';
  24              Field.activate(this.input);
  25              Event.stop(event);
  26            }.bind(this));
  27          },
  28          
  29          log: function(type, message) {
  30            new Insertion.Bottom(this.element, 
  31              '<tr class="' + type + '"><td>' +
  32              message.escapeHTML() + '</td></tr>');
  33            Element.scrollTo(this.form);
  34          },
  35          
  36          eval: function(expression) {
  37            if (expression.match(/^\s*$/)) return;
  38            try {
  39              this.log('input', expression);
  40              window.$_ = this.context.call(window, expression);
  41              this.log('output', Object.inspect($_));
  42            } catch (e) {
  43              this.log('error', e.toString());
  44            }
  45          },
  46          
  47          clear: function() {
  48            this.element.innerHTML = '';
  49          }
  50        }
  51      </script>
  52      <style type="text/css">
  53        body {
  54          margin: 0;
  55          padding: 0;
  56        }
  57        
  58        .console {
  59          width: 100%;
  60          border-collapse: collapse;
  61          margin-bottom: 50px;
  62        }
  63      
  64        .console td {
  65          padding: 5px;
  66          font-family: monospace;
  67          font-size: 14px;
  68        }
  69        
  70        .console tr.input td {
  71          background-color: #eee;
  72          font-weight: bold;
  73        }
  74        
  75        .console tr.error td,
  76        .console tr.output td {
  77          color: #333;
  78          border-bottom: 1px solid #ccc;
  79        }
  80        
  81        .console tr.error td {
  82          color: #f00;
  83        }
  84        
  85        #input-form {
  86          width: 100%;
  87          background-color: #f0f5b8;
  88          border-top: 1px solid #333;
  89          padding: 10px;
  90          position: fixed;
  91          height: 25px;
  92          bottom: 0;
  93          margin: 0;
  94        }
  95      </style>
  96    </head>
  97    <body>
  98      <table class="console">
  99        <tbody id="console">
 100        </tbody>
 101      </table>
 102      <form id="input-form">
 103        <input type="text" size="60" id="input" />
 104        <input type="submit" value="Evaluate" />
 105      </form>
 106      <script type="text/javascript">
 107        window.console = new Prototype.Console('console', 'input-form', 'input');
 108      </script>
 109    </body>
 110  </html>