Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add ScrollView article+demo.

  • Loading branch information...
commit 463a752034cfc12e739ea477898a4d4177b4d259 1 parent ef3927e
@ialexi ialexi authored
View
9 apps/hedwig/controllers/guides.js
@@ -16,7 +16,13 @@ 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();
},
@@ -24,6 +30,7 @@ Hedwig.guidesController = SC.ObjectController.create(
// 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"));
}
}
View
5 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")
}) ;
View
2  apps/hedwig/resources/guide/touch.json
1 addition, 1 deletion not shown
View
BIN  apps/hedwig/resources/sample_image.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
31 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>
View
19 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;
+};
View
2  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"}
View
30 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}}
View
2  docs/build/guides/touch.json
1 addition, 1 deletion not shown
View
19 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;
+};
View
30 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}}
Please sign in to comment.
Something went wrong with that request. Please try again.