Initial commit

lib/assets/javascripts/cdb.js/test/demos/ui/common/dialog.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CartoDB demo template</title>
+  </head>
+
+  <style>
+    body {
+      background-color: #666;
+    }
+    .dialog {
+      width: 400px;
+      padding: 20px;
+      background-color: #FFF;
+      position: absolute;
+    }
+
+    h1 { margin: 0; }
+    h2 { font-size: 20px; }
+
+    .bottom {
+      margin: 10px 0 0 0;
+      padding: 10px 0 0 0;
+      border-top: 1px solid #ccc;
+    }
+
+    button { float: left; }
+
+    .cancel {
+      float:right;
+    }
+
+  </style>
+
+  <script id="base_template" type="text/tmpl">
+    <h1 class="title"><%= title %></h1>
+    <h2 class="description"><%= description %></h2>
+    <div class="content">
+    </div>
+    <div class="bottom">
+      <button class="ok">
+        <%= ok_title %>
+      </button>
+      <a href="#" class="cancel">close</a>
+    </div>
+  </script>
+
+  <body>
+
+  </body>
+
+  <script src="../../../src/cartodb.js"></script>
+  <script>
+    window.onload = function() {
+      cdb.load('../../../src/', function() {
+
+        var MyDialog = cdb.ui.common.Dialog.extend({
+          render_content: function() {
+            return "Always begin typing in the upper search area. Press return to add a new note with that title. While you type, NV searches for notes whose body or title contain your words. Observe that naming a note and searching always occur simultaneously.";
+          },
+        })
+
+        var dialog = new MyDialog({
+          title: 'test',
+          description: 'long description here',
+          template_base: $('#base_template').html(),
+          width: 500
+        });
+
+        $('body').append(dialog.render().el);
+
+        dialog.open();
+      });
+    };
+  </script>
+</html>

lib/assets/javascripts/cdb.js/test/demos/ui/common/notification.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>cartodb demo template</title>
+  </head>
+
+  <script id="template" type="text/tmpl">
+      <p><%= msg %></p>
+      <a class="close">close</a>
+  </script>
+
+  <body>
+    <a id="o" href="#open">open</a>
+    <div id="notification">
+    </div>
+  </body>
+
+  <script src="../../../src/cartodb.js"></script>
+  <script>
+    window.onload = function() {
+      cdb.load('../../../src/', function() {
+        var notification = new cdb.ui.common.Notification({
+          el: $('#notification'),
+          msg: 'this is a test notification, click on close to close!',
+          template: $('#template').html()
+        });
+        $("#o").click(function() {
+          notification.open();
+        });
+      });
+    };
+  </script>
+</html>

lib/assets/javascripts/cdb.js/test/demos/ui/common/settings.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Settings</title>
+  </head>
+  <style>
+    body {
+      width:100%;
+      height:100%;
+      background-color: #D7D7D7;
+    }
+    .settings ul {
+      position:relative;
+      display:inline-block;
+      width:auto;
+      margin:0;
+      padding:0;
+      background:white;
+      -webkit-border-radius:3px;
+      border:none;
+      box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
+      list-style:none;
+      overflow:visible;
+    }
+    .settings ul::before {
+      content:' ';
+      position:absolute;
+      display:block!important;
+      top:-5px;
+      right:10px;
+      width:0;
+      height:0;
+      border-bottom:8px solid white;
+      border-left:8px solid transparent;
+      border-right:8px solid transparent;
+      z-index:10;
+    }
+    .settings li {
+      padding:10px;
+    }
+  </style>
+
+  <script id="settings_template" type="text/tmpl">
+    <ul>
+      <li><a href="#api-keys">Your API keys</a></li>
+      <li><a href="#settings">Account settings</a></li>
+      <li><a href="#close">Close session</a></li>
+    </ul>
+  </script>
+
+  <body>
+  </body>
+
+  <script src="../../../cartodb.js"></script>
+  <script>
+    window.onload = function() {
+      cdb.load('../../../', function() {
+
+        var Settings = cdb.ui.common.Settings.extend();
+
+        var settings = new Settings({
+          template_base: $('#settings_template').html(),
+          speed: 300
+        });
+
+        $('body').append(settings.render().el);
+
+        setTimeout(function(){
+          settings.open();  
+        },3000)
+      });
+    };
+  </script>
+</html>

lib/assets/javascripts/cdb.js/test/demos/ui/common/table.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>cartodb demo template</title>
+  </head>
+
+  <style>
+    body {
+      background-color: #FFF;
+    }
+    td {
+      border: 1px solid #333;
+    }
+  </style>
+
+
+  <body>
+    <h1>table</h1>
+    <p>use console to modify cols variable, i.e:</p>
+    <pre>
+      cols.add({'id': 10, 'col1': 1, 'col2': 2, 'col3': 3});
+      cols.at(0).destroy()
+    </pre>
+  </body>
+
+  <script src="../../../src/cartodb.js"></script>
+  <script>
+    window.onload = function() {
+      cdb.load('../../../src/', function() {
+        cols = new cdb.ui.common.TableData();
+
+        tableMetadata = new cdb.ui.common.TableProperties({
+          schema: [
+            ['id', 'number'],
+            ['col1','number'], 
+            ['col2','number'], 
+            ['col3','number']
+          ]
+        });
+
+        cols.reset([
+          {'id': 1, 'col1': 1, 'col2': 2, 'col3': 3},
+          {'id': 2, 'col1': 4, 'col2': 5, 'col3': 6}
+        ]);
+
+        table = new cdb.ui.common.Table({
+          dataModel: cols,
+          model: tableMetadata
+        });
+
+        $('body').append(table.render().el);
+      });
+    };
+  </script>
+</html>