checkbox.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.Checkbox</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.debug.DivConsole');
    goog.require('goog.dom');
    goog.require('goog.events');
    goog.require('goog.log');
    goog.require('goog.ui.Checkbox');
    goog.require('goog.ui.Checkbox.State');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/checkbox.css">
</head>
<body>
  <h1>goog.ui.Checkbox</h1>
  <p>This is a tri-state checkbox.</p>
  <div>
    <span id="enable" class="goog-checkbox-checked"></span>Enable/disable</div>
  <br>
  <div><span id="all" class="goog-checkbox-undetermined"></span>root</div>
  <div style="margin-left: 1em;">
    <div><span id="leaf1" class="goog-checkbox-checked"></span>leaf 1</div>
    <div><span id="leaf2"></span>leaf 2</div>
  </div>
  <br>
  <div id="render">
    Created with render
  </div>
  <br>
  <div id="decorate">
    Created with decorate
    <span class="goog-checkbox"></span>
    <span class="goog-checkbox goog-checkbox-checked"></span>
    <span class="goog-checkbox goog-checkbox-undetermined"></span>
    <span class="goog-checkbox goog-checkbox-disabled"></span>
  </div>
  <br><br>
  <!-- Event log. -->
  <fieldset class="goog-debug-panel">
    <legend>Event Log for 'root', 'leaf1', 'leaf2'</legend>
    <div id="log" style="height: 500px"></div>
  </fieldset>
  <script type="text/javascript">
    // Set up a logger.
    goog.log.setLevel(goog.log.getRootLogger(), goog.log.Level.ALL);
    var logger = goog.log.getLogger('demo');
    var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
    logconsole.setCapturing(true);
    var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
    goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
    function logEvent(name, e) {
      goog.log.info(logger, '"' + name + '" dispatched: ' + e.type);
    }

    var all = new goog.ui.Checkbox();
    all.decorate(goog.dom.getElement('all'));
    all.setLabel(all.getElement().parentNode);
    goog.events.listen(all, EVENTS, goog.partial(logEvent, 'root'));

    var leaf1 = new goog.ui.Checkbox();
    leaf1.decorate(goog.dom.getElement('leaf1'));
    leaf1.setLabel(leaf1.getElement().parentNode);
    goog.events.listen(leaf1, EVENTS, goog.partial(logEvent, 'leaf1'));

    var leaf2 = new goog.ui.Checkbox();
    leaf2.decorate(goog.dom.getElement('leaf2'));
    leaf2.setLabel(leaf2.getElement().parentNode);
    goog.events.listen(leaf2, EVENTS, goog.partial(logEvent, 'leaf2'));

    var enable = new goog.ui.Checkbox();
    enable.setLabel(goog.dom.getElement('enable').parentNode);
    enable.decorate(goog.dom.getElement('enable'));

    var states = [false, true, null];
    goog.array.forEach(states, function(state) {
      new goog.ui.Checkbox(state).render(goog.dom.getElement('render'));
    });
    var checkbox = new goog.ui.Checkbox();
    checkbox.render(goog.dom.getElement('render'));
    checkbox.setEnabled(false);

    var decorateNodes = goog.dom.getElementsByTagNameAndClass('span', null,
        goog.dom.getElement('decorate'));
    for (var i = 0, len = decorateNodes.length; i < len; i++) {
      goog.ui.decorate(decorateNodes[i]);
    }

    function rootChanged(e) {
      leaf1.setChecked(all.getChecked());
      leaf2.setChecked(all.getChecked());
    }

    function leafChanged(e) {
      var same = leaf1.getChecked() == leaf2.getChecked();
      all.setChecked(same ? leaf1.getChecked() :
          goog.ui.Checkbox.State.UNDETERMINED);
    }

    function enableTree(enable) {
      all.setEnabled(enable);
      leaf1.setEnabled(enable);
      leaf2.setEnabled(enable);
    }

    goog.events.listen(all, goog.ui.Component.EventType.CHANGE, rootChanged);
    goog.events.listen(leaf1, goog.ui.Component.EventType.CHANGE, leafChanged);
    goog.events.listen(leaf2, goog.ui.Component.EventType.CHANGE, leafChanged);
    goog.events.listen(enable, goog.ui.Component.EventType.CHANGE,
        function() { enableTree(enable.getChecked()); });
  </script>
</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/checkbox.html
