RubyGems - closure - Versions diffs - 1.1.692 - Mend

closure 1.1.692

Files changed (1494) hide show

data/closure-library/closure/goog/demos/menu.html ADDED Viewed

@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html>
+<!--
+Copyright 2010 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.Menu</title>
+  <link rel="stylesheet" href="css/demo.css">
+  <link rel="stylesheet" href="../css/menu.css">
+  <link rel="stylesheet" href="../css/menuitem.css">
+  <link rel="stylesheet" href="../css/menuseparator.css">
+  <script src="../base.js"></script>
+  <script>
+    goog.require('goog.array');
+    goog.require('goog.events');
+    goog.require('goog.object');
+    goog.require('goog.debug.DivConsole');
+    goog.require('goog.debug.Logger');
+    goog.require('goog.debug.LogManager');
+    goog.require('goog.ui.CheckBoxMenuItem');
+    goog.require('goog.ui.Menu');
+    goog.require('goog.ui.MenuItem');
+  </script>
+</head>
+<body>
+  <h1>goog.ui.Menu</h1>
+  <div>
+    This is a very basic menu class, it doesn't handle its display or
+    dismissal. It just exists, listens to keys and mouse events and can fire
+    events for selections or highlights.
+  </div>
+  <div>
+    <a href="javascript:void(menu1.setVisible(true));">Show Menu</a> |
+    <a href="javascript:void(menu1.setVisible(false));">Hide Menu</a> |
+    <a href="javascript:void(menu1.setPosition(0, 0));">Move(0, 0)</a> |
+    <a href="javascript:void(menu1.setPosition(50, 50));">Move(50, 50)</a> |
+    <a href="javascript:void(menu1.setPosition(50, 100));">Move(50, 100)</a> |
+    <a href="javascript:void(menu1.setPosition(200, 300));">Move(200, 300)</a>
+  </div>
+  <br>
+  <br>
+  <table border="0" cellpadding="0" cellspacing="0" width="100%">
+    <tbody>
+      <tr valign="top" height="180">
+        <td width="33%">
+          <div id="menu1"></div>
+        </td>
+        <td width="33%">
+          <div id="menu2" class="goog-menu">
+            <div class="goog-menuitem">Google</div>
+            <div class="goog-menuitem">Yahoo</div>
+            <div class="goog-menuitem">MSN</div>
+            <hr>
+            <div id="enableNewItems"
+                class="goog-menuitem goog-option goog-option-selected">
+              <div class="goog-menuitem-accel">Ctrl+E</div>
+              Enable new items
+            </div>
+            <hr>
+            <div id="addNewItem" class="goog-menuitem">
+              <div class="goog-menuitem-accel">Ctrl+Shift+N</div>
+              New...
+            </div>
+          </div>
+        </td>
+        <td width="33%">
+          <ul id="menu3" class="goog-menu">
+            <li class="goog-menuitem">I am a <b>menu</b></li>
+            <li class="goog-menuitem">based on an</li>
+            <li class="goog-menuitem goog-menuitem-disabled">unordered list</li>
+            <li class="goog-menuitem">Woop!</li>
+          </ul>
+        </td>
+      </tr>
+      <tr valign="top" height="180">
+        <td width="33%">
+          Here's a menu with checkbox items.<br>You checked:&nbsp;
+          <span id="checkedItems" style="color: #800">Bold</span><br>
+          <div id="menu4"></div>
+        </td>
+        <td width="33%">
+          Here's a BiDi menu with checkbox items.<br>
+          <div id="menu5" dir="rtl"></div>
+        </td>
+        <td width="33%">
+          Here's a menu with an explicit content container.<br>
+          <div id="menu6" class="goog-menu">
+            <div style="background: #ccc; border-right: 15px solid #888;">
+              <div class="goog-menu-content">
+                <div class="goog-menuitem">Red</div>
+                <div class="goog-menuitem">Black</div>
+                <div class="goog-menuitem">Blue</div>
+              </div>
+            </div>
+            <hr>
+            <div class="goog-menuitem">White</div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <br>
+  <br>
+  <!-- Event log. -->
+  <fieldset class="goog-debug-panel">
+    <legend>Event Log</legend>
+    <div id="log"></div>
+  </fieldset>
+  <div id="perf"></div>
+  <script type="text/javascript">
+    var timer = goog.now();
+    // Set up a logger.
+    goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL);
+    var logger = goog.debug.Logger.getLogger('demo');
+    var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
+    logconsole.setCapturing(true);
+    var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
+    logger.fine('Listening for: ' + EVENTS.join(', ') + '.');
+    function logEvent(e) {
+      var name = e.target.getCaption ? e.target.getCaption() : 'Menu';
+      logger.info('"' + name + '" dispatched: ' + e.type);
+    }
+    var el = goog.dom.getElement('menu1');
+    var menu1 = new goog.ui.Menu();
+    var m1, m2, m3, m4, m5, m6;
+    menu1.addItem(m1 = new goog.ui.MenuItem('Inbox'));
+    menu1.addItem(m2 = new goog.ui.MenuItem('Starred'));
+    menu1.addItem(m3 = new goog.ui.MenuItem('Chats'));
+    menu1.addItem(m4 = new goog.ui.MenuItem('Sent'));
+    menu1.addItem(new goog.ui.MenuSeparator());
+    menu1.addItem(m5 = new goog.ui.MenuItem('New Folder...'));
+    menu1.addItemAt(m6 = new goog.ui.MenuItem('All Mail'), 1);
+    menu1.render(el);
+    goog.events.listen(menu1, EVENTS, logEvent);
+    m1.setEnabled(false);
+    m6.setEnabled(false);
+    var el2 = goog.dom.getElement('menu2');
+    var menu2 = new goog.ui.Menu();
+    menu2.decorate(el2);
+    goog.events.listen(menu2, EVENTS, logEvent);
+    goog.events.listen(menu2, 'action', function(e) {
+      if (e.target.getId() == 'addNewItem') {
+        var n = prompt('Enter a new item...');
+        if (n) {
+          menu2.addItemAt(new goog.ui.MenuItem(n), menu2.getItemCount() - 4);
+        }
+      } else if (e.target.getId() == 'enableNewItems') {
+        menu2.getItemAt(menu2.getItemCount() - 1).setEnabled(
+            e.target.isChecked());
+      } else {
+        alert(e.target.getCaption());
+      }
+    });
+    var el3 = goog.dom.getElement('menu3');
+    var menu3 = new goog.ui.Menu();
+    menu3.decorate(el3);
+    goog.events.listen(menu3, EVENTS, logEvent);
+    var menu4 = new goog.ui.Menu();
+    var foo, bar;
+    menu4.addItem(foo = new goog.ui.CheckBoxMenuItem('Bold'));
+    menu4.addItem(new goog.ui.CheckBoxMenuItem('Italic'));
+    menu4.addItem(bar = new goog.ui.CheckBoxMenuItem('3D'));
+    menu4.addItem(new goog.ui.CheckBoxMenuItem('Underline'));
+    foo.setChecked(true);
+    bar.setEnabled(false);
+    menu4.render(goog.dom.getElement('menu4'));
+    goog.events.listen(menu4, EVENTS, logEvent);
+    goog.events.listen(menu4, 'action', function(e) {
+      var items = [];
+      menu4.forEachChild(function(child) {
+        if (child.isChecked()) {
+          items.push(child.getCaption());
+        }
+      });
+      goog.dom.setTextContent(goog.dom.getElement('checkedItems'),
+          items.length > 0 ? items.join(', ') : 'nothing');
+    });
+    function createCheckBoxItem(label, shortcut) {
+      return new goog.ui.CheckBoxMenuItem([
+        goog.dom.createDom('div', 'goog-menuitem-accel', shortcut),
+        goog.dom.createTextNode(label)
+      ]);
+    }
+    var menu5 = new goog.ui.Menu();
+    menu5.setRightToLeft(true);
+    var fee, baz;
+    menu5.addItem(fee = createCheckBoxItem('Bold', 'Ctrl+B'));
+    menu5.addItem(createCheckBoxItem('Italic', 'Ctrl+I'));
+    menu5.addItem(baz = createCheckBoxItem('3D', 'Ctrl+Shift+3'));
+    menu5.addItem(createCheckBoxItem('Underline', 'Ctrl+U'));
+    fee.setChecked(true);
+    baz.setEnabled(false);
+    menu5.render(goog.dom.getElement('menu5'));
+    goog.events.listen(menu5, EVENTS, logEvent);
+    var menu6 = new goog.ui.Menu();
+    menu6.decorate(goog.dom.getElement('menu6'));
+    goog.events.listen(menu6, EVENTS, logEvent);
+    goog.dom.setTextContent(goog.dom.getElement('perf'),
+        (goog.now() - timer) + 'ms');
+  </script>
+</body>
+</html>

data/closure-library/closure/goog/demos/menubutton.html ADDED Viewed

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html>
+<!--
+Copyright 2010 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.MenuButton Demo</title>
+  <script src="../base.js"></script>
+  <script>
+    goog.require('goog.array');
+    goog.require('goog.events');
+    goog.require('goog.events.EventType');
+    goog.require('goog.object');
+    goog.require('goog.debug.DivConsole');
+    goog.require('goog.debug.Logger');
+    goog.require('goog.debug.LogManager');
+    goog.require('goog.ui.CustomButton');
+    goog.require('goog.ui.Menu');
+    goog.require('goog.ui.MenuButton');
+    goog.require('goog.ui.MenuItem');
+    goog.require('goog.ui.Separator');
+    goog.require('goog.ui.decorate');
+  </script>
+  <link rel="stylesheet" href="css/demo.css">
+  <link rel="stylesheet" href="../css/custombutton.css">
+  <link rel="stylesheet" href="../css/menu.css">
+  <link rel="stylesheet" href="../css/menuitem.css">
+  <link rel="stylesheet" href="../css/menuseparator.css">
+  <link rel="stylesheet" href="../css/menubutton.css">
+  <style>
+    /* Base class for all icon elements. */
+    .icon {
+      height: 16px;
+      width: 16px;
+      margin: 0 1px;
+      background-image: url(../images/toolbar_icons.gif);
+      background-repeat: no-repeat;
+      vertical-align: middle;
+    }
+    /* "Format" icon. */
+    .format-icon {
+      background-position: -64px;
+    }
+  </style>
+</head>
+<body>
+  <h1>goog.ui.MenuButton</h1>
+  <table border="0" cellpadding="0" cellspacing="4" width="100%">
+    <tbody>
+      <tr valign="top">
+        <td width="67%">
+          <fieldset>
+            <legend>
+              These <strong>MenuButton</strong>s were created programmatically:
+              &nbsp;
+            </legend>
+            <table border="0" cellpadding="0" cellspacing="4">
+              <tbody>
+                <tr valign="middle">
+                  <td>
+                    <div id="menuButtons"></div>
+                  </td>
+                  <td>
+                    Enable first button:
+                    <input type="checkbox" id="b1_enable" checked>
+                    &nbsp;
+                    Show second button:
+                    <input type="checkbox" id="b2_show" checked>
+                    &nbsp;
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <label>
+            </label>
+            <br>
+          </fieldset>
+          <fieldset>
+            <legend>
+              This <strong>MenuButton</strong> decorates an element:&nbsp;
+            </legend>
+            <table border="0" cellpadding="0" cellspacing="4">
+              <tbody>
+                <tr valign="middle">
+                  <td>
+                    <div id="formatButton" class="goog-menu-button"
+                        title="Format">
+                      <!-- These elements will become the button's caption. -->
+                      <div class="icon format-icon goog-inline-block"></div>
+                      <span style="vertical-align:middle">Format</span>
+                      <!-- This DIV will be auto-decorated with a menu. -->
+                      <div id="formatMenu" class="goog-menu">
+                        <div class="goog-menuitem">Bold</div>
+                        <div class="goog-menuitem">Italic</div>
+                        <div class="goog-menuitem">Underline</div>
+                        <div class="goog-menuseparator"></div>
+                        <div class="goog-menuitem goog-menuitem-disabled">
+                          Strikethrough
+                        </div>
+                        <div class="goog-menuseparator"></div>
+                        <div class="goog-menuitem">Font...</div>
+                        <div class="goog-menuitem">Color...</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td>
+                    Enable button:
+                    <input type="checkbox" id="formatButton_enable" checked>
+                    &nbsp;
+                    Show button:
+                    <input type="checkbox" id="formatButton_show" checked>
+                    &nbsp;
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <label>
+            </label>
+            <br>
+          </fieldset>
+          <fieldset>
+            <legend>
+              This <strong>MenuButton</strong> accompanies a
+              <strong>CustomButton</strong> to form a combo button:
+              &nbsp;
+            </legend>
+            <div id="comboButtons"></div>
+            <label>
+            </label>
+            <br>
+          </fieldset>
+        </td>
+        <td width="33%">
+          <!-- Event log. -->
+          <fieldset class="goog-debug-panel">
+            <legend>Event Log</legend>
+            <div id="log"></div>
+          </fieldset>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <br>
+  <div id="perf"></div>
+  <script>
+    var timer = goog.now();
+    // Set up a logger.
+    goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL);
+    var logger = goog.debug.Logger.getLogger('demo');
+    var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
+    logconsole.setCapturing(true);
+    var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
+    logger.fine('Listening for: ' + EVENTS.join(', ') + '.');
+    function logEvent(e) {
+      var component = e.target;
+      var caption = (typeof component.getCaption == 'function') ?
+          component.getCaption() : component.getId();
+      logger.info('"' + caption + '" dispatched: ' + e.type);
+    }
+    // Create a sample menu.
+    var m1 = new goog.ui.Menu();
+    m1.setId('FileMenu');
+    goog.array.forEach(['New', 'Open', 'Save', 'Save as', null, 'Change label'],
+        function(label) {
+          var item;
+          if (label) {
+            item = new goog.ui.MenuItem(label + '...');
+            item.setId(label);
+            item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+            if (label == 'Save as') {
+              item.setEnabled(false);
+            }
+          } else {
+            item = new goog.ui.MenuSeparator();
+          }
+          m1.addItem(item);
+        });
+    // Create the first button programmatically.
+    var b1 = new goog.ui.MenuButton('File', m1);
+    b1.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+    b1.setId('FileButton');
+    b1.render(goog.dom.getElement('menuButtons'));
+    b1.setTooltip('File menu demo');
+    goog.events.listen(b1, EVENTS, logEvent);
+    goog.events.listen(goog.dom.getElement('b1_enable'),
+        goog.events.EventType.CLICK,
+        function(e) {
+          b1.setEnabled(e.target.checked);
+        });
+    goog.events.listen(b1, goog.ui.Component.EventType.ACTION,
+        function(e) {
+          if (e.target && e.target.getCaption() == 'Change label...') {
+            var label = window.prompt('Enter new menu label:', b1.getCaption());
+            b1.setCaption(label || 'Empty');
+          }
+        });
+    // Create another sample menu.
+    var m2 = new goog.ui.Menu();
+    m2.setId('EditMenu');
+    goog.array.forEach(['Cut', 'Copy', 'Paste', null, 'Paste special'],
+        function(label) {
+          var item;
+          if (label) {
+            item = new goog.ui.MenuItem(label + '...');
+            item.setId(label);
+            item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+          } else {
+            item = new goog.ui.MenuSeparator();
+          }
+          m2.addItem(item);
+        });
+    // Create the second button programmatically.
+    var b2 = new goog.ui.MenuButton('Edit', m2);
+    b2.setId('EditButton');
+    b2.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+    b2.render(goog.dom.getElement('menuButtons'));
+    b2.setTooltip('Edit menu demo');
+    goog.events.listen(b2, EVENTS, logEvent);
+    goog.events.listen(goog.dom.getElement('b2_show'),
+        goog.events.EventType.CLICK,
+        function(e) {
+          b2.setVisible(e.target.checked);
+        });
+    // Create another sample menu.
+    var m3 = new goog.ui.Menu();
+    m3.setId('WindowMenu');
+    goog.array.forEach(['Tile', 'Cascade', null, 'Zoom in', 'Zoom out'],
+        function(label) {
+          var item;
+          if (label) {
+            item = new goog.ui.MenuItem(label + '...');
+            item.setId(label);
+            item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+          } else {
+            item = new goog.ui.MenuSeparator();
+          }
+          m3.addItem(item);
+        });
+    var unhighlightable = new goog.ui.MenuItem('Zoom control:');
+    // Disabled implies unhighlightable, unless the menu is specifically set
+    // to allow highlighting disabled items (but it doesn't by default).
+    unhighlightable.setEnabled(false);
+    unhighlightable.setId('unhighlightable');
+    m3.addItemAt(unhighlightable, 3);
+    // Create a third button programmatically.
+    var b3 = new goog.ui.MenuButton('Window', m3);
+    b3.setId('WindowButton');
+    b3.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+    b3.render(goog.dom.getElement('menuButtons'));
+    b3.setTooltip('Windowm menu demo');
+    goog.events.listen(b3, EVENTS, logEvent);
+    // Decorate a menu button.  Note that since one of the child nodes of the
+    // menu button element can be decorated as a menu, it is auto-decorated and
+    // attached to the button.
+    var formatButton = goog.ui.decorate(goog.dom.getElement('formatButton'));
+    goog.events.listen(goog.dom.getElement('formatButton_show'),
+        goog.events.EventType.CLICK,
+        function(e) {
+          formatButton.setVisible(e.target.checked);
+        });
+    goog.events.listen(goog.dom.getElement('formatButton_enable'),
+        goog.events.EventType.CLICK,
+        function(e) {
+          formatButton.setEnabled(e.target.checked);
+        });
+    goog.events.listen(formatButton, EVENTS, logEvent);
+    // Create a combo button with a custom button and a menu button.
+    // Create a sample menu.
+    var cbb1 = new goog.ui.CustomButton('Add to Family');
+    cbb1.render(goog.dom.getElement('comboButtons'));
+    cbb1.addClassName('goog-custom-button-collapse-right');
+    var cbm1 = new goog.ui.Menu();
+    cbm1.setId('ComboMenu');
+    goog.array.forEach(['Friends', 'Family', 'Coworkers'],
+        function(label) {
+          var item = new goog.ui.MenuItem(label);
+          item.setId(label);
+          item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+          cbm1.addItem(item);
+        });
+    var cb1 = new goog.ui.Button('Take action', cbm1);
+    var cbmb1 = new goog.ui.MenuButton(null, cbm1);
+    cbmb1.setPositionElement(cbb1.getElement());
+    cbmb1.addClassName('goog-menu-button-collapse-left');
+    cbmb1.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
+    cbmb1.setId('ComboMenuButton');
+    cbmb1.render(goog.dom.getElement('comboButtons'));
+    cbmb1.setTooltip('Combo button');
+    goog.events.listen(cbmb1, EVENTS, logEvent);
+    goog.dom.setTextContent(goog.dom.getElement('perf'),
+        (goog.now() - timer) + 'ms');
+  </script>
+</body>
+</html>

data/closure-library/closure/goog/demos/mousewheelhandler.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<!--
+Copyright 2010 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.events.MouseWheelHandler</title>
+<link rel="stylesheet" href="../css/checkbox.css">
+<style>
+#out {
+  background-color: #eee;
+  width: 200px;
+  height: 200px;
+  position: relative;
+}
+#h-line, #v-line {
+  position: absolute;
+  background: black;
+}
+#h-line {
+  width: 20px;
+  height: 1px;
+}
+#v-line {
+  width: 1px;
+  height: 20px;
+}
+#status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font: 70% sans-serif;
+}
+</style>
+<script src="../base.js"></script>
+<script>
+goog.require('goog.events');
+goog.require('goog.events.MouseWheelHandler');
+</script>
+</head>
+<body>
+<h1>goog.events.MouseWheelHandler</h1>
+<p>Use your mousewheel on the gray box below to move the cross hair.
+<div id=out>
+  <div id=h-line></div>
+  <div id=v-line></div>
+  <div id=status></div>
+</div>
+<script>
+var MouseWheelHandler = goog.events.MouseWheelHandler;
+var MOUSEWHEEL = MouseWheelHandler.EventType.MOUSEWHEEL;
+function $(id) {
+  return document.getElementById(id)
+}
+var x = 100, y = 100;
+var out = $('out');
+var hLine= $('h-line');
+var vLine = $('v-line');
+var status = $('status');
+var availWidth = out.clientWidth - vLine.offsetWidth;
+var availHeight = out.clientHeight - hLine.offsetHeight;
+function handleMouseWheel(e) {
+  x += e.deltaX / 3;
+  x = Math.max(0, Math.min(availWidth, x));
+  y += e.deltaY / 3;
+  y = Math.max(0, Math.min(availHeight, y));
+  updateLines();
+  e.preventDefault();
+}
+function updateLines() {
+  vLine.style.left = x + 'px';
+  hLine.style.left = x - hLine.offsetWidth / 2 + 'px';
+  hLine.style.top = y + 'px';
+  vLine.style.top = y - vLine.offsetHeight / 2 + 'px';
+  status.innerHTML = x + ', ' + y;
+}
+updateLines();
+var mwh = new MouseWheelHandler(out);
+goog.events.listen(mwh, MOUSEWHEEL, handleMouseWheel);
+goog.events.listen(window, 'unload', function(e) {
+  goog.events.unlisten(mwh, MOUSEWHEEL, handleMouseWheel);
+});
+</script>
+</body>
+</html>