1 files changed, 243 insertions, 0 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/splitpane.html.svn-base b/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/splitpane.html.svn-base
new file mode 100644
index 0000000..366df63
--- /dev/null
+++ b/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/splitpane.html.svn-base
@@ -0,0 +1,243 @@
+<!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.SplitPane</title>
+  <script src="../base.js"></script>
+
+  <script>
+    goog.require('goog.dom');
+    goog.require('goog.events');
+    goog.require('goog.ui.Component');
+    goog.require('goog.ui.Ratings');
+    goog.require('goog.ui.ServerChart');
+    goog.require('goog.ui.SplitPane');
+    goog.require('goog.ui.SplitPane.Orientation');
+  </script>
+  <link rel="stylesheet" href="css/demo.css">
+  <style class="text/css">
+
+    /* NOTE: A bug in Safari 3 requires these css definitions to be in here.
+       Do not move these to a seperate file without testing safari 3! */
+
+    /* These are recommended styles for the default splitpane */
+    .goog-splitpane {
+      height: 200px;
+      width: 300px;
+    }
+
+    .goog-splitpane-handle {
+      border-left: 1px solid gray;
+      border-right: 1px solid gray;
+      background: #ccc;
+      position: absolute;
+    }
+
+    .goog-splitpane-handle-horizontal {
+      cursor: col-resize;
+    }
+
+    .goog-splitpane-handle-vertical {
+      cursor: row-resize;
+    }
+
+    .goog-splitpane-first-container,
+    .goog-splitpane-second-container {
+      border: 5px solid black;
+      overflow: auto;
+      position: absolute;
+    }
+
+    /* The rest of these styles are for the splitpane demo, splitpane.html */
+
+    /* Example of styling a particular handle */
+    #another-splitpane .goog-splitpane-handle {
+      background: gray;
+    }
+
+    /* The following styles are for the rating widget, which is used in the splipane
+       example.  These have nothing to do with the splitpane! */
+    .goog-ratings {
+      display: block;
+      float: left;
+      height: 20px;
+      height: 20px;
+    }
+
+    .goog-ratings-star {
+      display: block;
+      float: left;
+      padding-left: 13px;
+      height: 19px;
+      cursor: pointer;
+      background-image: url('../images/ratingstars.gif');
+      background-repeat: no-repeat;
+    }
+
+    .goog-ratings-firststar-off {
+      padding-left: 20px;
+      background-position: 0px 0px;
+    }
+
+    .goog-ratings-firststar-on {
+      padding-left: 20px;
+      background-position: 0px -20px;
+    }
+
+    .goog-ratings-midstar-off {
+      background-position: 0px -40px;
+    }
+
+    .goog-ratings-midstar-on {
+      background-position: 0px -60px;
+    }
+
+    .goog-ratings-laststar-off {
+      padding-left: 18px;
+      background-position: 0px -80px;
+    }
+
+    .goog-ratings-laststar-on {
+      padding-left: 18px;
+      background-position: 0px -100px;
+    }
+  </style>
+</head>
+<body>
+  <h1>goog.ui.SplitPane</h1>
+  Left Component Size: <input type='text' id='firstComponentSize' size='4' value=''>
+  Width: <input type='text' id='newWidth' size='5' value='300'>
+  Height: <input type='text' id='newHeight' size='5' value='200'>
+  <br>
+  <input type='radio' id='select1' name='selectSplitter' checked='true' value='first'>First One
+  <input type='radio' id='select2' name='selectSplitter' value='second'>Second One
+  <input type='button' value='Update Splitter' onclick='updatePane_()'>
+  <input type='button' value='Change Orientation' onclick='changeOrientation_()'>
+  <p>
+  <div class='goog-splitpane' id='anotherSplitter'>
+    <div class='goog-splitpane-first-container'>
+      Left Frame
+    </div>
+    <div class='goog-splitpane-second-container'>
+       <iframe style='z-index:10; width:100%; height:100%' src='http://www.google.com/'></iframe>
+    </div>
+    <div class='goog-splitpane-handle'></div>
+  </div>
+  First Component Width:  <span id='componentOneWidth'></span>
+
+  <div id="test1">
+    <select name="sel">
+      <option>Aweful</option>
+      <option>Bad</option>
+      <option selected>Ok</option>
+      <option>Good</option>
+      <option>Excellent</option>
+    </select>
+  </div>
+  <p/>
+
+
+  <p/>
+  <div id="chart"></div>
+
+  <script>
+
+    /**
+     * Show the width of the first splitpane on event changes.
+     * @param {goog.events.Event} e The event
+     */
+    var showWidth_ = function(e) {
+      var el = document.getElementById('componentOneWidth');
+      if (el) {
+        goog.dom.setTextContent(el, e.target.getFirstComponentSize());
+      }
+    }
+
+    var lhs = new goog.ui.Component();
+    var rhs = new goog.ui.Component();
+
+    // Set up splitpane with already existing DOM.
+    var splitpane1 = new goog.ui.SplitPane(lhs, rhs,
+        goog.ui.SplitPane.Orientation.HORIZONTAL);
+
+    // Listen for change events and call showWidth.
+    goog.events.listen(splitpane1, goog.ui.Component.EventType.CHANGE,
+        showWidth_);
+
+
+    splitpane1.setInitialSize(100);
+    splitpane1.setHandleSize(10);
+    splitpane1.decorate(document.getElementById('anotherSplitter'));
+    splitpane1.setSize(new goog.math.Size(600,300));
+
+    var rw1 = new goog.ui.Ratings();
+    rw1.decorate(document.getElementById('test1'));
+
+    // Create a barchart to put in a splitpane
+    bar = new goog.ui.ServerChart(goog.ui.ServerChart.ChartType.BAR, 180, 104);
+    bar.addDataSet([8,23,7], '008000');
+    bar.addDataSet([31,11,7], 'ffcc33');
+    bar.addDataSet([2,43,70,3,43,74], '3072f3');
+    bar.setLeftLabels(['','20K','','60K','','100K']);
+    bar.setXLabels(['O','N','D']);
+    bar.setMaxValue(100);
+
+    var splitpane2 = new goog.ui.SplitPane(rw1, bar,
+        goog.ui.SplitPane.Orientation.HORIZONTAL);
+    splitpane2.render();
+
+    splitpane2.setContinuousResize(false);
+
+    /**
+     * Change the left splitter size or size a split pane.
+     * This method reads the form fields to choose the splitter
+     * and get the new values.
+     */
+    var updatePane_ = function() {
+      var componentSizeValue =
+          document.getElementById('firstComponentSize').value;
+      var width = document.getElementById('newWidth').value;
+      var height = document.getElementById('newHeight').value;
+      var s1Checked = document.getElementById('select1').checked;
+      // Which splitter to update.
+      var whichSplitter = (s1Checked) ? splitpane1 : splitpane2;
+
+      var componentSize;
+      if ('' != componentSizeValue) {
+        componentSize = parseInt(componentSizeValue, 10);
+      }
+      else {
+        componentSize = whichSplitter.getFirstComponentSize();
+      }
+      whichSplitter.setFirstComponentSize(componentSize);
+      whichSplitter.setSize(new goog.math.Size(width, height));
+
+      // If the first pane height is changed, force the second one to update
+      // so it moves up or down the page.
+      splitpane2.setFirstComponentSize();
+    }
+
+    /**
+     * Change the orientation of the splitter pane.
+     */
+    var changeOrientation_ = function() {
+      var s1Checked = document.getElementById('select1').checked;
+      // Which splitter to update.
+      var whichSplitter = s1Checked ? splitpane1 : splitpane2;
+      var orientation = whichSplitter.getOrientation();
+      if (orientation == goog.ui.SplitPane.Orientation.VERTICAL) {
+        whichSplitter.setOrientation(goog.ui.SplitPane.Orientation.HORIZONTAL);
+      } else {
+        whichSplitter.setOrientation(goog.ui.SplitPane.Orientation.VERTICAL);
+      }
+    }
+
+  </script>
+
+</body>
+</html>