Adding mapbox-gl branch

2015-03-16 18:50:27 +01:00
parent 7985f030fa
commit 57ee7f52fd
3109 changed files with 943365 additions and 0 deletions
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>goog.fx.Dragger</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="css/demo.css">
+  <script src="../base.js"></script>
+  <script>
+    goog.require('goog.fx.Dragger');
+    goog.require('goog.dom');
+    goog.require('goog.style');
+  </script>
+  <style>
+    #frame {
+      position: absolute;
+      left: 99px;
+      top: 99px;
+      width: 802px;
+      height: 502px;
+      border: 1px solid #999;
+      background-color: #F0F0F0;
+    }
+
+    .window {
+      position:absolute;
+      left: 150px;
+      top: 110px;
+      width: 300px;
+      height: 100px;
+      background-color: rgb(200,200,250);
+      border: 1px solid #99F;
+      font: bold 11px/18px arial;
+      text-indent: 10px;
+      color: #FFF;
+    }
+
+    #win2 {
+      top:250px;
+      background-color: rgb(250,200,200);
+      border: 1px solid #F99;
+    }
+
+    #win3 {
+      left:500px;
+      background-color: rgb(150,200,150);
+      border: 1px solid #6A6;
+    }
+
+    .bar {
+      position:absolute;
+      left: 0px;
+      top: 0px;
+      width: 300px;
+      height: 20px;
+      background-color: #99F;
+      cursor: default;
+    }
+    #win2 .bar { background-color: #F99; }
+    #win3 .bar { background-color: #6A6; }
+
+    #sliderback {
+      position: absolute;
+      left: 50px;
+      top: 98px;
+      height: 505px;
+      width: 1px;
+      font-size: 1px;
+      background-color: #999;
+    }
+
+    #slider {
+      position: absolute;
+      left: 35px;
+      top: 98px;
+      width: 30px;
+      height: 13px;
+      font: normal 10px verdana;
+      background-color: #EEE;
+      color: #000;
+      text-align:center;
+      border: 1px solid #999;
+      cursor: default;
+    }
+
+    #ghostbox {
+      position: absolute;
+      left: 100px;
+      top: 625px;
+      width: 600px;
+      height: 20px;
+    }
+
+    .block {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 125px;
+      height: 20px;
+      font: bold 11px/18px arial;
+      background-color: #AAA;
+      color: #EEE;
+      text-align: center;
+      border: 1px solid #666;
+    }
+
+    .ghost0 { left: 0px; }
+    .ghost1 { left: 130px; }
+    .ghost2 { left: 260px; }
+    .ghost3 { left: 390px; }
+
+  </style>
+</head>
+<body>
+  <h1>goog.fx.Dragger</h1>
+  <p><strong>Demonstrations of the drag utiities</strong>.</p>
+
+  <div id="frame"></div>
+
+  <div id="win1" class="window"><div class="bar">Drag Me...</div></div>
+  <div id="win2" class="window"><div class="bar">Drag Me...</div></div>
+  <div id="win3" class="window"><div class="bar">Drag Me...</div></div>
+
+  <div id="sliderback"></div>
+  <div id="slider">0</div>
+
+
+  <script>
+
+    var $ = goog.dom.getElement;
+
+    // WINDOW EXAMPLE
+    //================
+
+    var Z = 5;
+
+    var limits = new goog.math.Rect(100, 100, 500, 400) ;
+
+    var window1 = new goog.fx.Dragger($('win1'), $('win1').firstChild, limits);
+    var window2 = new goog.fx.Dragger($('win2'), $('win2').firstChild, limits);
+    var window3 = new goog.fx.Dragger($('win3'), $('win3').firstChild);
+
+    window3.setHysteresis(6);
+
+    function setZ(e) {
+      this.target.style.zIndex = Z++;
+      goog.style.setOpacity(this.target, 0.50);
+    }
+
+    function end(e) {
+      goog.style.setOpacity(this.target, 1);
+    }
+
+    goog.events.listen(window1, 'start', setZ);
+    goog.events.listen(window2, 'start', setZ);
+    goog.events.listen(window3, 'start', setZ);
+
+    goog.events.listen(window1, 'end', end);
+    goog.events.listen(window2, 'end', end);
+    goog.events.listen(window3, 'end', end);
+
+
+    // SLIDER EXAMPLE
+    //================
+
+    var slider1 = new goog.fx.Dragger($('slider'), null,
+        new goog.math.Rect(35, 98, 0, 490));
+
+    goog.events.listen(slider1, 'drag', function(e) {
+      var percent = Math.round(100 * (e.top - e.dragger.limits.top) /
+          e.dragger.limits.height);
+      $('slider').innerHTML = percent;
+    });
+
+
+    goog.events.listen(window, 'unload', function(e) {
+      window1.dispose();
+      window2.dispose();
+      window3.dispose();
+
+      slider1.dispose();
+    });
+
+  </script>
+</body>
+</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.
+-->