Update Sea.js to 2.1.0 and make all examples runnable

fakerBABA · Jun 28, 2013 · 0da53e6 · 0da53e6
1 parent c0d2d73
commit 0da53e6
Show file tree

Hide file tree

Showing 92 changed files with 16,134 additions and 4,006 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 *.iml
-.idea/
 .ipr
 .iws
 *~
@@ -9,9 +8,8 @@
 *.bak
 .DS_Store
 Thumbs.db
-.svn/
 *.swp
 .nojekyll
 .project
-.settings/
 node_modules
+.*/
diff --git a/README.md b/README.md
@@ -1,8 +1,25 @@
-Examples for SeaJS
-===
+# Examples for Sea.js
 
-<http://seajs.github.com/examples>
+<http://seajs.github.io/examples>
 
-__注意__
 
-如果你想构建示例，需要使用 [Gruntjs](http://gruntjs.com/) 与 [spm](https://github.com/spmjs/spm/wiki)。
+How to Build
+------------
+
+First, you should install `spm` and `spm-build`:
+
+```
+$ npm install spm -g
+$ npm install spm-build -g
+```
+
+Then, build it:
+
+```
+$ cd static/hello
+$ make build
+$ make deploy
+```
+
+Visit <http://docs.spmjs.org/> for detail information.
+
diff --git a/hello.html → app/hello.html b/hello.html → app/hello.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>Hello SeaJS</title>
-<link rel="stylesheet" href="static/hello/style.css">
+<title>Hello Sea.js</title>
+<link rel="stylesheet" href="../static/hello/src/style.css">
 </head>
 <body>
 <div id="container">
@@ -20,9 +20,26 @@
   <img src="https://i.alipayobjects.com/e/201211/1cqKojb72y.png" width="44" height="44" alt="S">
 </div>
 
-<script src="static/seajs/sea.js?t=20130306"
-        data-config="hello/config.js?20130306"
-        data-main="hello/main.js?20130306"></script>
+<script src="../sea-modules/seajs/seajs/2.1.0/sea.js"></script>
+<script>
+
+  // Set configuration
+  seajs.config({
+    base: "../sea-modules/",
+    alias: {
+      "jquery": "jquery/jquery/1.10.1/jquery.js"
+    }
+  });
+
+  // For development
+  if (location.href.indexOf("?dev") > 0) {
+    seajs.use("../static/hello/src/main");
+  }
+  // For production
+  else {
+    seajs.use("examples/hello/1.0.0/main");
+  }
+</script>
 
 </body>
 </html>
diff --git a/app/lucky.html b/app/lucky.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+<title>Lucky Ball</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../static/lucky/src/style.css">
+</head>
+<body>
+<button id="go" data-text-start="Space to Start" data-text-stop="Space to Stop" data-action="start"></button>
+
+<div id="container">
+  <ul id="balls">
+  </ul>
+  <ul id="lucky-balls">
+  </ul>
+</div>
+
+<script src="../sea-modules/seajs/seajs/2.1.0/sea.js"></script>
+<script>
+
+  // Set configuration
+  seajs.config({
+    base: "../sea-modules/",
+    alias: {
+      "jquery": "jquery/jquery/1.10.1/jquery.js",
+      "jquery-easing": "jquery/easing/1.3.0/easing.js"
+    }
+  });
+
+  // For development
+  if (location.href.indexOf("?dev") > 0) {
+    seajs.use("../static/lucky/src/main");
+  }
+  // For production
+  else {
+    seajs.use("examples/lucky/1.0.0/main");
+  }
+</script>
+
+</body>
+</html>
diff --git a/todo.html → app/todo.html b/todo.html → app/todo.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Todo</title>
-    <link rel="stylesheet" href="static/todo/base.css">
+    <link rel="stylesheet" href="../static/todo/src/base.css">
 </head>
 <body>
 <section id="todoapp">
@@ -50,6 +50,29 @@ <h1>todos</h1>
     <button id="clear-completed">Clear completed (<%= completed %>)</button>
     <% } %>
 </script>
-    <script src="static/seajs/sea.js" data-config="todo/config" data-main="todo/main"></script>
+
+<script src="../sea-modules/seajs/seajs/2.1.0/sea.js"></script>
+<script>
+
+  // Set configuration
+  seajs.config({
+    base: "../sea-modules/",
+    alias: {
+      "$": "jquery/jquery/1.10.1/jquery.js",
+      "underscore": "gallery/underscore/1.4.4/underscore.js",
+      "backbone": "gallery/backbone/1.0.0/backbone.js"
+    }
+  });
+
+  // For development
+  if (location.href.indexOf("?dev") > 0) {
+    seajs.use("../static/todo/src/main");
+  }
+  // For production
+  else {
+    seajs.use("examples/todo/1.0.0/main");
+  }
+</script>
+
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -2,27 +2,24 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>Examples for SeaJS</title>
+<title>Examples for Sea.js</title>
 <style>
   body {
     font: 20px/1.5 "Hiragino Sans GB", sans-serif;
-    background: #eee;
     color: #555;
   }
-
   a {
     text-decoration: none;
-    color: #555;
   }
 </style>
 </head>
 <body>
 <pre>
   seajs
     `-- examples
-          | -- <a href="hello.html">hello.html</a>
-          | -- <a href="lucky.html">lucky.html</a>
-          ` -- <a href="todo.html">todo.html</a>
+          | -- <a href="app/hello.html">Hello Sea.js</a>
+          | -- <a href="app/lucky.html">Lucky Ball</a>
+          ` -- <a href="app/todo.html">Todo</a>
 </pre>
 </body>
 </html>
diff --git a/lucky.html b/lucky.html
diff --git a/sea-modules/examples/hello/1.0.0/main-debug.js b/sea-modules/examples/hello/1.0.0/main-debug.js
@@ -0,0 +1,54 @@
+define("examples/hello/1.0.0/main-debug", [ "./spinning-debug", "jquery-debug" ], function(require) {
+    var Spinning = require("./spinning-debug");
+    var s = new Spinning("#container");
+    s.render();
+});
+
+define("examples/hello/1.0.0/spinning-debug", [ "jquery-debug" ], function(require, exports, module) {
+    var $ = require("jquery-debug");
+    function Spinning(container) {
+        this.container = $(container);
+        this.icons = this.container.children();
+        this.spinnings = [];
+    }
+    module.exports = Spinning;
+    Spinning.prototype.render = function() {
+        this._init();
+        this.container.css("background", "none");
+        this.icons.show();
+        this._spin();
+    };
+    Spinning.prototype._init = function() {
+        var spinnings = this.spinnings;
+        $(this.icons).each(function(n) {
+            var startDeg = random(360);
+            var node = $(this);
+            var timer;
+            node.css({
+                top: random(40),
+                left: n * 50 + random(10),
+                zIndex: 1e3
+            }).hover(function() {
+                node.fadeTo(250, 1).css("zIndex", 1001).css("transform", "rotate(0deg)");
+            }, function() {
+                node.fadeTo(250, .6).css("zIndex", 1e3);
+                timer && clearTimeout(timer);
+                timer = setTimeout(spin, Math.ceil(random(1e4)));
+            });
+            function spin() {
+                node.css("transform", "rotate(" + startDeg + "deg)");
+            }
+            spinnings[n] = spin;
+        });
+        return this;
+    };
+    Spinning.prototype._spin = function() {
+        $(this.spinnings).each(function(i, fn) {
+            setTimeout(fn, Math.ceil(random(3e3)));
+        });
+        return this;
+    };
+    function random(x) {
+        return Math.random() * x;
+    }
+});
diff --git a/sea-modules/examples/hello/1.0.0/main.js b/sea-modules/examples/hello/1.0.0/main.js
diff --git a/sea-modules/examples/hello/1.0.0/style-debug.css b/sea-modules/examples/hello/1.0.0/style-debug.css
@@ -0,0 +1,36 @@
+/*! define examples/hello/1.0.0/style-debug.css */
+html, body, div, span, h1, h2, h3, h4, p, img, strong, ol, ul, li {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  background: #F4F4F4;
+}
+
+#container {
+  position: relative;
+  margin: 40px 120px;
+  background: url(https://a248.e.akamai.net/assets.github.com/images/spinners/octocat-spinner-32.gif) no-repeat;
+  min-height: 32px;
+}
+
+#container img {
+  position: absolute;
+  cursor: pointer;
+  opacity: .6;
+  display: none;
+
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -o-transition-property: -o-transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.8s;
+  -moz-transition-duration: 0.8s;
+  -o-transition-duration: 0.8s;
+  transition-duration: 0.8s;
+}
diff --git a/sea-modules/examples/hello/1.0.0/style.css b/sea-modules/examples/hello/1.0.0/style.css