Add ScrollView article+demo.

ialexi · Apr 17, 2010 · 463a752 · 463a752
1 parent ef3927e
commit 463a752
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 8 deletions.
diff --git a/apps/hedwig/controllers/guides.js b/apps/hedwig/controllers/guides.js
@@ -16,14 +16,21 @@ Hedwig.guidesController = SC.ObjectController.create(
 
   currentGuide: null,
   loadGuide: function(path) {
-    console.error(path);
+    // quick hack to make things work offline, properly.
+    var g = window.localStorage["hedwig-current-guide"];
+    if (g) {
+      this.set("currentGuide", g);
+    }
+
+
     SC.Request.getUrl(path).json().notify(this, "didLoadGuide").send();
   },
 
   didLoadGuide: function(response) {
     // obviously I have no error handling right now. Did I mention I'm in a bit of a hurry?
     // /me crosses fingers
     if (SC.ok(response)) {
+      window.localStorage["hedwig-current-guide"] = response.get("body");
       this.set("currentGuide", response.get("body"));
     }
   }

diff --git a/apps/hedwig/core.js b/apps/hedwig/core.js
@@ -20,8 +20,9 @@ Hedwig = SC.Application.create(
   // of your model data.  You can also set a data source on this store to
   // connect to a backend server.  The default setup below connects the store
   // to any fixtures you define.
-  store: SC.Store.create().from(SC.Record.fixtures)
+  store: SC.Store.create().from(SC.Record.fixtures),
 
-  // TODO: Add global constants or singleton objects needed by your app here.
+  // THIS IS A HACK BECAUSE DOCS CAN'T HAVE IMAGES YET
+  SAMPLE_IMAGE: sc_static("sample_image.jpg")
 
 }) ;
diff --git a/apps/hedwig/resources/guide/touch.json b/apps/hedwig/resources/guide/touch.json
diff --git a/apps/hedwig/resources/sample_image.jpg b/apps/hedwig/resources/sample_image.jpg
diff --git a/docs/build/articles/controls/scroll/touch.html b/docs/build/articles/controls/scroll/touch.html
@@ -89,4 +89,35 @@
 </head><body><div class="header"><a href="../../../index.html" class="img"><img src="../../../resources/logo.png" /></a><a href="../../../index.html" class="here">Documentation
 </a><a href="../../../reference/index.html" class="item">SproutCore Reference
 </a></div><div class="content"><h1>ScrollView Touch Support</h1>
+
+<p>SproutCore's ScrollView comes with built-in support for touch-based
+scrolling, including momentum and bouncing. In addition, it has (somewhat experimental)
+support for scaling.</p>
+
+<p>For many cases, just putting a view inside a ScrollView will "just work". Still, you may want
+to set some settings.</p>
+
+<h2>Bouncing</h2>
+
+<p>By default, ScrollView will <em>always</em> bounce when scrolling vertically, regardless of the
+content's height, but only bounce horizontally <em>if</em> the content is wider than the ScrollView.
+This is controlled by two properties:</p>
+
+<ul>
+<li>alwaysBounceHorizontal, which defaults to NO.</li>
+<li>alwaysBounceVertical, which defaults to YES.</li>
+</ul>
+
+<h2>Scaling</h2>
+
+<p>ScrollView has support for scaling, which you can use through a few properties:</p>
+
+<ul>
+<li>canScale. Specifies whether the content may be scaled. If YES, using two fingers
+(in that classic "pinch gesture") will zoom the content.</li>
+<li>minimumScale: The minimum scale value. Default: 0.25.</li>
+<li>maximumScale: The maximum scale value. Default: 2.0.</li>
+</ul>
+
+<p><a href='touch.js' class='demo'>touch.js</a></p>
 </div><div class="footer"></div></body></html>
diff --git a/docs/build/articles/controls/scroll/touch.js b/docs/build/articles/controls/scroll/touch.js
@@ -0,0 +1,19 @@
+/*globals Hedwig*/
+var MyExampleView = SC.ScrollView.extend({
+  horizontalAlign: SC.ALIGN_CENTER,
+  verticalAlign: SC.ALIGN_MIDDLE,
+  backgroundColor: "#555",
+
+  canScale: YES,
+  alwaysBounceVertical: NO,
+
+  contentView: SC.ImageView.design({
+    layout: { left: 0, top: 0, width: 1357, height: 2048 },
+    value: Hedwig.SAMPLE_IMAGE
+  })
+});
+
+// bootstrap code :)
+exports.getDemoView = function() {
+  return MyExampleView;
+};
diff --git a/docs/build/articles/controls/scroll/touch.json b/docs/build/articles/controls/scroll/touch.json
@@ -1 +1 @@
-{"content":"<h1>ScrollView Touch Support</h1>","errors":[],"demos":{},"articleDirectory":"articles/controls/scroll/","outputDirectory":"build/","title":"ScrollView Touch Support"}
+{"content":"<h1>ScrollView Touch Support</h1>\n\n<p>SproutCore's ScrollView comes with built-in support for touch-based\nscrolling, including momentum and bouncing. In addition, it has (somewhat experimental)\nsupport for scaling.</p>\n\n<p>For many cases, just putting a view inside a ScrollView will \"just work\". Still, you may want\nto set some settings.</p>\n\n<h2>Bouncing</h2>\n\n<p>By default, ScrollView will <em>always</em> bounce when scrolling vertically, regardless of the\ncontent's height, but only bounce horizontally <em>if</em> the content is wider than the ScrollView.\nThis is controlled by two properties:</p>\n\n<ul>\n<li>alwaysBounceHorizontal, which defaults to NO.</li>\n<li>alwaysBounceVertical, which defaults to YES.</li>\n</ul>\n\n<h2>Scaling</h2>\n\n<p>ScrollView has support for scaling, which you can use through a few properties:</p>\n\n<ul>\n<li>canScale. Specifies whether the content may be scaled. If YES, using two fingers\n(in that classic \"pinch gesture\") will zoom the content.</li>\n<li>minimumScale: The minimum scale value. Default: 0.25.</li>\n<li>maximumScale: The maximum scale value. Default: 2.0.</li>\n</ul>\n\n<p><a href='touch.js' class='demo'>touch.js</a></p>","errors":[],"demos":{"touch.js":{"ex":"/*globals Hedwig*/\nvar MyExampleView = SC.ScrollView.extend({\n  horizontalAlign: SC.ALIGN_CENTER,\n  verticalAlign: SC.ALIGN_MIDDLE,\n  backgroundColor: \"#555\",\n  \n  canScale: YES,\n  alwaysBounceVertical: NO,\n  \n  contentView: SC.ImageView.design({\n    layout: { left: 0, top: 0, width: 1357, height: 2048 },\n    value: Hedwig.SAMPLE_IMAGE\n  })\n});\n\n// bootstrap code :)\nexports.getDemoView = function() {\n  return MyExampleView;\n};\n","highlighted":"<span class=\"multiline comment\">/*globals Hedwig*/</span>\n<span class=\"keyword\">var</span> <span class=\"class\">MyExampleView</span> = <span class=\"class\">SC</span>.<span class=\"class\">ScrollView</span>.<span class=\"variable\">extend</span>({\n  <span class=\"variable\">horizontalAlign</span>: <span class=\"class\">SC</span>.<span class=\"class\">ALIGN_CENTER</span>,\n  <span class=\"variable\">verticalAlign</span>: <span class=\"class\">SC</span>.<span class=\"class\">ALIGN_MIDDLE</span>,\n  <span class=\"variable\">backgroundColor</span>: <span class=\"string\">&quot;#555&quot;</span>,\n  \n  <span class=\"variable\">canScale</span>: <span class=\"class\">YES</span>,\n  <span class=\"variable\">alwaysBounceVertical</span>: <span class=\"class\">NO</span>,\n  \n  <span class=\"variable\">contentView</span>: <span class=\"class\">SC</span>.<span class=\"class\">ImageView</span>.<span class=\"variable\">design</span>({\n    <span class=\"variable\">layout</span>: { <span class=\"variable\">left</span>: <span class=\"number integer\">0</span>, <span class=\"variable\">top</span>: <span class=\"number integer\">0</span>, <span class=\"variable\">width</span>: <span class=\"number integer\">1357</span>, <span class=\"variable\">height</span>: <span class=\"number integer\">2048</span> },\n    <span class=\"variable\">value</span>: <span class=\"class\">Hedwig</span>.<span class=\"class\">SAMPLE_IMAGE</span>\n  })\n});\n\n<span class=\"comment\">// bootstrap code :)</span>\n<span class=\"variable\">exports</span>.<span class=\"variable\">getDemoView</span> = <span class=\"keyword\">function</span>() {\n  <span class=\"keyword\">return</span> <span class=\"class\">MyExampleView</span>;\n};\n","original":"/*globals Hedwig*/\nvar MyExampleView = SC.ScrollView.extend({\n  horizontalAlign: SC.ALIGN_CENTER,\n  verticalAlign: SC.ALIGN_MIDDLE,\n  backgroundColor: \"#555\",\n  \n  canScale: YES,\n  alwaysBounceVertical: NO,\n  \n  contentView: SC.ImageView.design({\n    layout: { left: 0, top: 0, width: 1357, height: 2048 },\n    value: Hedwig.SAMPLE_IMAGE\n  })\n});\n\n// bootstrap code :)\nexports.getDemoView = function() {\n  return MyExampleView;\n};\n"}},"articleDirectory":"articles/controls/scroll/","outputDirectory":"build/","title":"ScrollView Touch Support"}
diff --git a/docs/build/articles/controls/scroll/touch.md b/docs/build/articles/controls/scroll/touch.md
@@ -1,2 +1,30 @@
 ScrollView Touch Support
-=========================
+=========================
+SproutCore's ScrollView comes with built-in support for touch-based
+scrolling, including momentum and bouncing. In addition, it has (somewhat experimental)
+support for scaling.
+
+For many cases, just putting a view inside a ScrollView will "just work". Still, you may want
+to set some settings.
+
+Bouncing
+----------
+By default, ScrollView will _always_ bounce when scrolling vertically, regardless of the
+content's height, but only bounce horizontally _if_ the content is wider than the ScrollView.
+This is controlled by two properties:
+
+- alwaysBounceHorizontal, which defaults to NO.
+- alwaysBounceVertical, which defaults to YES.
+
+
+Scaling
+--------
+ScrollView has support for scaling, which you can use through a few properties:
+
+- canScale. Specifies whether the content may be scaled. If YES, using two fingers
+  (in that classic "pinch gesture") will zoom the content.
+- minimumScale: The minimum scale value. Default: 0.25.
+- maximumScale: The maximum scale value. Default: 2.0.
+
+
+{{demo:sc|touch.js}}
diff --git a/docs/build/guides/touch.json b/docs/build/guides/touch.json
diff --git a/docs/src/articles/controls/scroll/touch.js b/docs/src/articles/controls/scroll/touch.js
@@ -0,0 +1,19 @@
+/*globals Hedwig*/
+var MyExampleView = SC.ScrollView.extend({
+  horizontalAlign: SC.ALIGN_CENTER,
+  verticalAlign: SC.ALIGN_MIDDLE,
+  backgroundColor: "#555",
+
+  canScale: YES,
+  alwaysBounceVertical: NO,
+
+  contentView: SC.ImageView.design({
+    layout: { left: 0, top: 0, width: 1357, height: 2048 },
+    value: Hedwig.SAMPLE_IMAGE
+  })
+});
+
+// bootstrap code :)
+exports.getDemoView = function() {
+  return MyExampleView;
+};
diff --git a/docs/src/articles/controls/scroll/touch.md b/docs/src/articles/controls/scroll/touch.md
@@ -1,2 +1,30 @@
 ScrollView Touch Support
-=========================
+=========================
+SproutCore's ScrollView comes with built-in support for touch-based
+scrolling, including momentum and bouncing. In addition, it has (somewhat experimental)
+support for scaling.
+
+For many cases, just putting a view inside a ScrollView will "just work". Still, you may want
+to set some settings.
+
+Bouncing
+----------
+By default, ScrollView will _always_ bounce when scrolling vertically, regardless of the
+content's height, but only bounce horizontally _if_ the content is wider than the ScrollView.
+This is controlled by two properties:
+
+- alwaysBounceHorizontal, which defaults to NO.
+- alwaysBounceVertical, which defaults to YES.
+
+
+Scaling
+--------
+ScrollView has support for scaling, which you can use through a few properties:
+
+- canScale. Specifies whether the content may be scaled. If YES, using two fingers
+  (in that classic "pinch gesture") will zoom the content.
+- minimumScale: The minimum scale value. Default: 0.25.
+- maximumScale: The maximum scale value. Default: 2.0.
+
+
+{{demo:sc|touch.js}}