RubyGems - closure - Versions diffs - 1.1.692 - Mend

closure 1.1.692

Files changed (1494) hide show

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

@@ -0,0 +1,70 @@
+<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>Event Test</title>
+  <script type="text/javascript" src="../base.js"></script>
+  <script type="text/javascript">
+    goog.require('goog.events.EventTarget');
+    goog.require('goog.events.Event');
+  </script>
+</head>
+<body>
+  <script type="text/javascript">
+  var preventDefault = false;
+  var stopPropagation = false;
+  function func1(e) {
+    alert('func1');
+    if (preventDefault) e.preventDefault();
+    if (stopPropagation) e.stopPropagation();
+  }
+  function func2(e) {
+    alert('func2');
+  }
+  function Something() { }
+  goog.inherits(Something, goog.events.EventTarget);
+  Something.prototype.DoSomething = function() {
+    alert('Doing something');
+    return this.dispatchEvent(new DemoEventObject('Wooo'));
+  }
+  function DemoEventObject(arg) {
+    this.type = 'synth';
+    this.arg = arg;
+  }
+  goog.inherits(DemoEventObject, goog.events.Event);
+  var st = new Something();
+  goog.events.listen(st, 'synth', func1, true);
+  goog.events.listen(st, 'synth', func2, false);
+  alert('Response = ' + st.DoSomething() + '\nShould be true');
+  preventDefault = true;
+  stopPropagation = false;
+  alert('Response = ' + st.DoSomething() + '\nShould be false');
+  preventDefault = false;
+  stopPropagation = true;
+  alert('Response = ' + st.DoSomething() + '\nShould be true and only func1 should have been called');
+  preventDefault = true;
+  stopPropagation = true;
+  alert('Response = ' + st.DoSomething() + '\nShould be false and only func1 should have been called');
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,63 @@
+<!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.FileDropHandler Demo</title>
+  <script src="../base.js"></script>
+  <script>
+    goog.require('goog.debug.DivConsole');
+    goog.require('goog.debug.Logger');
+    goog.require('goog.dom');
+    goog.require('goog.events.FileDropHandler');
+  </script>
+  <link rel="stylesheet" href="css/demo.css">
+</head>
+<body>
+  <h2>Demo of goog.events.FileDropHandler</h2>
+  <fieldset>
+    <legend>Demo of the <strong>goog.events.FileDropHandler</strong>:</legend>
+    <label>goog.events.FileDropHandler detects file drag and drop events in
+    elements. Try dropping a file in the textarea below and watch the event
+    log at the bottom of the page. Try dropping some text too.<br></label>
+    <textarea id="drop-zone" rows="5" cols="50"></textarea>
+  </fieldset>
+  <fieldset class="goog-debug-panel">
+    <legend>Event Log</legend>
+    <div id="log" style="height: 400px;"></div>
+  </fieldset>
+  <script>
+    var dropZone = goog.dom.getElement('drop-zone');
+    var handler = new goog.events.FileDropHandler(dropZone, true);
+    var logger = goog.debug.Logger.getLogger('demo');
+    goog.events.listen(handler, goog.events.FileDropHandler.EventType.DROP,
+        function(e) {
+          logger.shout('DROP event detected!');
+          logger.info('dataTransfer:\n' +
+              goog.debug.deepExpose(e.getBrowserEvent().dataTransfer));
+          var files = e.getBrowserEvent().dataTransfer.files;
+          for (var i = 0; i < files.length; i++) {
+            // If you want to access the filename you should try both
+            // alternatives.
+            var fileName = file.name || file.fileName;
+            // Sample code to upload the dropped files (commented out).
+            // var xhr = new goog.net.XmlHttp();
+            // xhr.open('POST', 'http://www.myserver.com/upload');
+            // xhr.send(file);
+          }
+        });
+    goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.FINER);
+    var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
+    logconsole.setCapturing(true);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,118 @@
+<!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.FilteredMenu</title>
+<script src="../base.js"></script>
+<script>
+  goog.require('goog.events');
+  goog.require('goog.ui.Menu');
+  goog.require('goog.ui.MenuItem');
+  goog.require('goog.ui.CheckBoxMenuItem');
+  goog.require('goog.ui.FilteredMenu');
+  goog.require('goog.ui.TriStateMenuItem');
+  goog.require('goog.ui.FilterObservingMenuItem');
+</script>
+<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">
+<link rel="stylesheet" href="../css/filteredmenu.css">
+<link rel="stylesheet" href="../css/filterobservingmenuitem.css">
+<link rel="stylesheet" href="../css/tristatemenuitem.css">
+<style>
+.goog-menu {
+  width: 30ex;
+}
+.goog-menu-filter input {
+  width: 100%;
+  /* width: 100% interferes with the input event handler in IE6 */
+  width: expression('30ex');
+}
+</style>
+</head>
+<body>
+<div id="menu1"></div>
+<script type="text/javascript">
+var folders = [
+  'Inbox',
+  'Starred',
+  'Spam',
+  'Sent Mail',
+  'Trash'
+];
+var labels = [
+  'Gmail',
+  'Finance',
+  'Bugs',
+  'Apps',
+  'Apps UI',
+  'Apps UX',
+  'Gmail Bugs',
+  'Reference',
+  'DO',
+  'READ',
+  'misc'
+];
+var el = goog.dom.getElement('menu1');
+var menu1 = new goog.ui.FilteredMenu();
+menu1.setFilterLabel('Create / search');
+menu1.setAllowMultiple(true);
+var lm, cm, cm2;
+for (var str, i = 0; str = labels[i]; i++) {
+  menu1.addItem(lm = new goog.ui.TriStateMenuItem(str));
+  if (i == 0 || i == 3) {
+    lm.setCheckedState(goog.ui.TriStateMenuItem.State.PARTIALLY_CHECKED);
+  } else if (i == 1 || i == 4 || i == 5) {
+    lm.setCheckedState(goog.ui.TriStateMenuItem.State.FULLY_CHECKED);
+  }
+}
+menu1.addItem(new goog.ui.MenuSeparator());
+for (var str, i = 0; str = folders[i]; i++) {
+  menu1.addItem(new goog.ui.MenuItem(str));
+}
+menu1.addItem(new goog.ui.MenuSeparator());
+menu1.addItem(cm = new goog.ui.FilterObservingMenuItem(''));
+menu1.addItem(cm2 = new goog.ui.FilterObservingMenuItem('Manage tags'));
+menu1.render(el);
+menu1.setPosition(10, 10);
+cm.setObserver(function(item, str) {
+  str = goog.string.trim(str);
+  var b = str == '' || goog.array.contains(folders, str) ||
+                       goog.array.contains(labels, str);
+  item.setVisible(!b);
+  if (!b) {
+    item.setContent(this.dom_.createDom(
+        'span',
+        null,
+        '"',
+        this.dom_.createDom('b', null, str),
+        '" (create tag)'));
+  }
+});
+cm2.setObserver(function(item, str) {
+  item.setVisible(str == '');
+});
+</script>
+</body>
+</html>

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

@@ -0,0 +1,58 @@
+<!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.FocusHandler</title>
+<script src="../base.js"></script>
+<script>
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.events.FocusHandler');
+</script>
+<link rel="stylesheet" href="css/demo.css">
+</head>
+<body>
+<h1>goog.events.FocusHandler</h1>
+<p>i1: <input id=i1>
+<p>i2 <input id=i2>
+<p>i3: <input id=i3>
+<p id=out>
+<script>
+var $ = goog.dom.getElement;
+function updateText(e) {
+  var target = e.target;
+  $('out').appendChild(document.createTextNode(target.tagName + "#" +
+                                               target.id + ": " + e.type));
+  $('out').appendChild(document.createElement('br'));
+}
+var focusHandler = new goog.events.FocusHandler(document.body);
+goog.events.listen(focusHandler, goog.events.FocusHandler.EventType.FOCUSIN,
+                   updateText);
+goog.events.listen(focusHandler, goog.events.FocusHandler.EventType.FOCUSOUT,
+                   updateText);
+goog.events.listen(window, 'unload', function() {
+  goog.events.unlisten(focusHandler, goog.events.FocusHandler.EventType.FOCUSIN,
+                       updateText);
+  goog.events.unlisten(focusHandler,
+                       goog.events.FocusHandler.EventType.FOCUSOUT, updateText);
+});
+</script>
+</body>
+</html>

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

@@ -0,0 +1,158 @@
+<!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.Gauge</title>
+  <link rel="stylesheet" href="css/demo.css">
+  <style>
+    .type { font-size:14px; font-weight:bold; font-family:arial; background-color:#f7f7f7; text-align:center }
+  </style>
+  <script src="../base.js"></script>
+  <script>
+    goog.require('goog.dom');
+    goog.require('goog.graphics');
+    goog.require('goog.graphics.Font');
+    goog.require('goog.graphics.LinearGradient');
+    goog.require('goog.graphics.SolidFill');
+    goog.require('goog.graphics.Stroke');
+    goog.require('goog.ui.Gauge');
+    goog.require('goog.ui.GaugeTheme');
+  </script>
+  <script>
+    var CustomGaugeTheme = function() {
+    }
+    goog.inherits(CustomGaugeTheme, goog.ui.GaugeTheme);
+    CustomGaugeTheme.prototype.getInternalBorderFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#8080ff");
+    }
+    CustomGaugeTheme.prototype.getExternalBorderFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#8080c0");
+    }
+    CustomGaugeTheme.prototype.getInternalBorderStroke = function() {
+      return new goog.graphics.Stroke(2, "#ffff00");
+    }
+    CustomGaugeTheme.prototype.getMajorTickStroke = function() {
+      return new goog.graphics.Stroke(2, "#ffffff");
+    }
+    CustomGaugeTheme.prototype.getHingeStroke = function() {
+      return new goog.graphics.Stroke(1, "#00a000");
+    }
+    CustomGaugeTheme.prototype.getHingeFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#00c000");
+    }
+    CustomGaugeTheme.prototype.getNeedleStroke = function() {
+      return new goog.graphics.Stroke(1, "#008040");
+    }
+    CustomGaugeTheme.prototype.getNeedleFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#008040", 0.7);
+    }
+    var interactiveGauge;
+    function setupGauges() {
+      var gauge = new goog.ui.Gauge(120, 120);
+      gauge.setValue(33);
+      gauge.render(document.getElementById('basic'));
+      var gauge = new goog.ui.Gauge(200, 200);
+      gauge.addBackgroundColor(50, 60, goog.ui.Gauge.RED);
+      gauge.addBackgroundColor(35, 50, goog.ui.Gauge.YELLOW);
+      gauge.addBackgroundColor(15, 25, goog.ui.Gauge.GREEN);
+      gauge.setMinimum(15);
+      gauge.setMaximum(60);
+      gauge.setTicks(3, 6);
+      gauge.setValue(40);
+      gauge.setTitleBottom("RPM");
+      gauge.render(document.getElementById('colors'));
+      interactiveGauge = new goog.ui.Gauge(300, 200);
+      interactiveGauge.addBackgroundColor(0, 30, goog.ui.Gauge.RED);
+      interactiveGauge.addBackgroundColor(75, 90, goog.ui.Gauge.YELLOW);
+      interactiveGauge.addBackgroundColor(90, 100, goog.ui.Gauge.RED);
+      interactiveGauge.setTitleTop("CPU Utilization");
+      interactiveGauge.setTicks(5, 2);
+      interactiveGauge.setMajorTickLabels(['Idle', '20%', '40%', '60%', '80%', 'Argh']);
+      setValue();
+      interactiveGauge.render(document.getElementById('interactive'));
+      var gauge = new goog.ui.Gauge(200, 200);
+      gauge.setMinimum(-30);
+      gauge.setMaximum(30);
+      gauge.setTicks(10, 0);
+      gauge.setValue(20);
+      var theme = new CustomGaugeTheme();
+      gauge.setTheme(theme);
+      gauge.render(document.getElementById('customcolors'));
+    }
+    function setValue() {
+      var sv = document.getElementById("v1").value
+      var v = parseInt(sv, 10);
+      if (isNaN(v)) {
+        v = 0;
+      }
+      interactiveGauge.setValue(v, v + "%");
+    }
+  </script>
+</head>
+<body>
+  <h1>goog.ui.Gauge</h1>
+  <h2>Note: This component requires vector graphics support</h2>
+  <table border="1">
+    <tr valign="top">
+      <td class="type">
+        Basic
+      </td>
+      <td class="type">
+        Background colors, title. custom ticks
+      </td>
+      <td class="type">
+        Value change, formatted value, tick labels
+      </td>
+      <td class="type">
+        Custom colors
+      </td>
+    </tr>
+    <tr>
+      <td style="width: 120px">
+        <span id="basic"></span>
+      </td>
+      <td style="width: 200px">
+        <span id="colors"></span>
+      </td>
+      <td style="width: 300px">
+        <span id="interactive"></span>
+        <center>
+          <input type="text" size="3" value="22" id="v1" />
+          <input type="button" onclick="setValue()" value="Set" />
+        </center>
+      </td>
+      <td style="width: 200px">
+        <span id="customcolors"></span>
+      </td>
+    </tr>
+  </table>
+  <script>
+  setupGauges();
+  </script>
+</body>
+</html>

data/closure-library/closure/goog/demos/graphics/advancedcoordinates.html ADDED Viewed

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html>
+<!--
+Copyright 2007 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>Graphics Advanced Coordinates Demo Page</title>
+  <script type="text/javascript" src="../../base.js"></script>
+  <script type="text/javascript">
+    goog.require('goog.dom');
+    goog.require('goog.graphics');
+    goog.require('goog.graphics.ext');
+  </script>
+  <script type="text/javascript">
+    var group;
+    function drawElements() {
+      var graphics = new goog.graphics.ext.Graphics(2000, 2000);
+      group = new goog.graphics.ext.Group(graphics);
+      group.setLeft(20, true);
+      group.setTop(20, true);
+      group.setWidth(600, true);
+      group.setHeight(200);
+      // Basic shapes
+      var fill = new goog.graphics.SolidFill('yellow');
+      var stroke = new goog.graphics.Stroke(2, 'green');
+      var bg = new goog.graphics.SolidFill('#eeeeee');
+      var outline = new goog.graphics.Stroke(1, '#333333');
+      var background = new goog.graphics.ext.Rectangle(group);
+      background.setLeft(0, true);
+      background.setTop(0, true);
+      background.setWidth('100%', true);
+      background.setHeight('100%');
+      background.setStroke(outline);
+      background.setFill(bg);
+      var rect = new goog.graphics.ext.Rectangle(group);
+      rect.setLeft('-5px', true);
+      rect.setTop('-5px', true);
+      rect.setWidth('10px', true);
+      rect.setHeight('10px');
+      rect.setStroke(stroke);
+      rect.setFill(fill);
+      rect = new goog.graphics.ext.Rectangle(group);
+      rect.setRight('-5px', true);
+      rect.setTop('-5px', true);
+      rect.setWidth('10px', true);
+      rect.setHeight('10px');
+      rect.setStroke(stroke);
+      rect.setFill(fill);
+      rect = new goog.graphics.ext.Rectangle(group);
+      rect.setRight('-5px', true);
+      rect.setBottom('-5px', true);
+      rect.setWidth('10px', true);
+      rect.setHeight('10px');
+      rect.setStroke(stroke);
+      rect.setFill(fill);
+      rect = new goog.graphics.ext.Rectangle(group);
+      rect.setLeft('-5px', true);
+      rect.setBottom('-5px', true);
+      rect.setWidth('10px', true);
+      rect.setHeight('10px');
+      rect.setStroke(stroke);
+      rect.setFill(fill);
+      var image = new goog.graphics.ext.Image(group,
+          'http://www.google.com/intl/en_ALL/images/logo.gif');
+      image.setRight(10, true);
+      image.setTop(10, true);
+      image.setWidth('276px', true);
+      image.setHeight('110px');
+      var ellipse = new goog.graphics.ext.Ellipse(group);
+      ellipse.setCenter(0, true);
+      ellipse.setMiddle(0, true);
+      ellipse.setWidth('10%', true);
+      ellipse.setHeight('80%');
+      ellipse.setStroke(stroke);
+      ellipse.setFill(fill);
+      ellipse = new goog.graphics.ext.Ellipse(group);
+      ellipse.setCenter(0, true);
+      ellipse.setMiddle(0, true);
+      ellipse.setWidth(120, true);
+      ellipse.setHeight(60);
+      ellipse.setStroke(stroke);
+      ellipse.setFill(fill);
+      var path = new goog.graphics.ext.Path().moveTo(0, 0).lineTo(20, 0).
+          lineTo(10, 20).close();
+      var shape = new goog.graphics.ext.Shape(group, path);
+      shape.setLeft(10, true);
+      shape.setTop(10, true);
+      shape.setWidth('10%', true);
+      shape.setHeight('10%');
+      shape.setStroke(stroke);
+      shape.setFill(fill);
+      shape = new goog.graphics.ext.Shape(group, path, true);
+      shape.setLeft(40, true);
+      shape.setTop(10, true);
+      shape.setWidth('10%', true);
+      shape.setHeight('10%');
+      shape.setStroke(stroke);
+      shape.setFill(fill);
+      graphics.render(document.body);
+    }
+  </script>
+</head>
+<body onload="drawElements()">
+<div style="position: absolute; top: 400px">
+  <p>
+    W: <input type="text" name="width" value="600"
+              onchange="group.setWidth(this.value)">
+    H: <input type="text" name="height" value="200"
+              onchange="group.setHeight(this.value)">
+    R: <input type="text" name="rotation" value="0"
+              onchange="group.setRotation(this.value)">
+  </p>
+  <p>The front ellipse is sized based on absolute units.  The back ellipse is
+  sized based on percentage of the parent.</p>
+</div>
+</body>
+</html>