Permalink
Browse files

Still just as messy, if not messier, but hey, it is cool, and it shou…

…ld be very cleanable. Like, it is not greasy or anything. Just messy. If you know what I mean.
  • Loading branch information...
1 parent 008ee5b commit 493c8e689c780b5c70ca4c3c84fae4ab1d39e3a2 @ialexi ialexi committed Apr 16, 2010
View
@@ -4,5 +4,5 @@
# ===========================================================================
# Add initial buildfile information here
-config :all, :required => :sproutcore, :theme=>:pig, :url_prefix => "/static/suite/",
+config :all, :required => [:sproutcore, "sproutcore/animation"], :theme=>:pig, :url_prefix => "/static/hedwig/",
:html5_manifest=> true
@@ -15,6 +15,11 @@ Hedwig.articleController = SC.ObjectController.create(
contentBinding: "Hedwig.guideBrowserController.selection",
contentBindingDefault: SC.Binding.single(),
+ toolbarShouldShow: YES,
+ toggleToolbar: function() {
+ this.set("toolbarShouldShow", !this.get("toolbarShouldShow"));
+ },
+
demoFor: function(href) {
if (this.get("demos")) return this.get("demos")[href];
return "";
@@ -35,9 +35,40 @@ Hedwig.mainPage = SC.Page.design({
})
}),
- detailView: SC.WorkspaceView.design({
+ detailView: SC.View.design({
+ classNames: ["paper-view"],
theme: "paper",
- topToolbar: SC.ToolbarView.design(SC.FlowedLayout, {
+ childViews: "contentView topToolbar".w(),
+ topToolbar: SC.ToolbarView.design(SC.Animatable, SC.FlowedLayout, {
+ layout: { top: 0, right: 0, left: 0, height: 44 },
+
+ style: {
+ display: "block",
+ opacity: 0.9
+ },
+ transitions: {
+ display: 0.2,
+ opacity: 0.1
+ },
+
+ isShowing: YES,
+ isShowingBinding: "Hedwig.articleController.toolbarShouldShow",
+ isShowingDidChange: function() {
+ if (this.get("isShowing")) {
+ this.disableAnimation();
+ this.adjust({
+ opacity: 0.9,
+ display: "block"
+ }).updateStyle();
+ this.enableAnimation();
+ } else {
+ this.adjust({
+ opacity: 0.0,
+ display: "none"
+ }).updateStyle();
+ }
+ }.observes("isShowing"),
+
autoResize: NO,
flowPadding: {top:0,bottom:0,right:10,left:10},
childViews: "title previous guide space next".w(),
@@ -76,42 +107,121 @@ Hedwig.mainPage = SC.Page.design({
}),
- contentView: SC.ScrollView.design({
- borderStyle: SC.BORDER_NONE,
- contentView: SC.StaticContentView.design({
- contentBinding: "Hedwig.articleController.contents",
- contentDidChange: function() {
- sc_super();
- this.invokeLater("processContent", 1);
- }.observes("content"),
+ contentView: SC.View.design({
+ childViews: "contentView".w(),
+
+ /**
+ touchGestures: Gestures dealing with single touches.
+ */
+ touchGestures: {
+ "tap": { minX: 0, maxX: 3 },
+ "drag": {minX: 5, maxX: 20},
+ "swipe": { minX: 20 },
+ "RELEASE": { minY: 10 }
+ },
+
+ captureTouch: function() {
+ return NO;
+ },
+
+ /**
+ Maps a delta to gestures
+ */
+ mapDelta: function(deltaX, deltaY) {
+ var key, gesture, gestures = this.get("touchGestures"), inGesture;
+ var ret = {};
- processContent: function() {
- var d = this.$("a.demo").forEach(function(x) {
- x.outerHTML = Hedwig.articleController.replacementFor(x.getAttribute("href"));
- }, this);
- },
- touchStart: function(touch) { this.mouseDown(touch); },
- mouseDown: function(evt) {
- evt.preventDefault();
+ // loop through and evaluate
+ for (key in gestures) {
+ gesture = this.touchGestures[key]; inGesture = YES;
- var el = document.elementFromPoint(evt.pageX, evt.pageY), demoNode = null;
- while (el) {
- if (SC.$(el).hasClass("sc-view")) break;
- if (SC.$(el).hasClass("hedwig-demo")) {
- demoNode = el;
- break;
+ if ("minX" in gesture && deltaX < gesture.minX) inGesture = NO;
+ if ("minY" in gesture && deltaY < gesture.minY) inGesture = NO;
+ if ("maxX" in gesture && deltaX > gesture.maxX) inGesture = NO;
+ if ("maxY" in gesture && deltaY > gesture.maxY) inGesture = NO;
+
+ ret[key] = inGesture;
+ }
+
+ return ret;
+ },
+
+ /**
+ Finds out what gestures this touch could qualify for
+ */
+ mapTouch: function(touch) {
+ // calculate deltaX/Y (should we cache our own versions, by any chance?)
+ var deltaX = Math.abs(touch.pageX - touch.startX),
+ deltaY = Math.abs(touch.pageY - touch.startY);
+
+ return this.mapDelta(deltaX, deltaY);
+ },
+
+ mouseDown: function(evt) {
+ this._mouseStart = { x: evt.pageX, y: evt.pageY };
+ return YES;
+ },
+
+ mouseUp: function(evt) {
+ var couldBe = this.mapDelta(Math.abs(evt.pageX-this._mouseStart.x), Math.abs(evt.pageY-this._mouseStart.y));
+ if (couldBe.tap) this.tap();
+ },
+
+ touchStart: function(touch) {
+ return YES;
+ },
+
+ touchEnd: function(touch) {
+ var couldBe = this.mapTouch(touch);
+ if (couldBe.tap) this.tap();
+ },
+
+ tap: function() {
+ Hedwig.sendAction("toggleToolbar");
+ },
+
+
+ contentView: SC.ScrollView.design({
+ borderStyle: SC.BORDER_NONE,
+ contentView: SC.StaticContentView.design({
+ contentBinding: "Hedwig.articleController.contents",
+ contentDidChange: function() {
+ sc_super();
+ this.invokeLater("processContent", 1);
+ }.observes("content"),
+
+ processContent: function() {
+ var d = this.$("a.demo").forEach(function(x) {
+ x.outerHTML = Hedwig.articleController.replacementFor(x.getAttribute("href"));
+ }, this);
+ },
+ touchStart: function(touch) { this.mouseDown(touch); },
+ mouseDown: function(evt) {
+ evt.preventDefault();
+
+ var el = document.elementFromPoint(evt.pageX, evt.pageY), demoNode = null;
+ while (el) {
+ if (SC.$(el).hasClass("sc-view")) break;
+ if (SC.$(el).hasClass("hedwig-demo")) {
+ demoNode = el;
+ break;
+ }
+ el = el.parentNode;
}
- el = el.parentNode;
- }
- if (demoNode) {
- Hedwig.sendAction("openDemo", demoNode.getAttribute("href"));
+ if (demoNode) {
+ Hedwig.sendAction("openDemo", demoNode.getAttribute("href"));
+ return YES;
+ }
+
}
- }
+ })
})
})
+
+
+
})
-
})
})
@@ -14,5 +14,10 @@ Hedwig.NORMAL = SC.Responder.create({
previousArticle: function() {
Hedwig.guideBrowserController.selectObject(Hedwig.guideBrowserController.get("previousArticle"));
+ },
+
+ toggleToolbar: function() {
+ console.error("T");
+ Hedwig.articleController.toggleToolbar();
}
});
@@ -10,8 +10,10 @@
@extends SC.View
*/
-Hedwig.DemoPanel = SC.PanelPane.extend(
+Hedwig.DemoPanel = SC.PanelPane.extend(SC.Animatable,
/** @scope Hedwig.DemoPanel.prototype */ {
+ classNames: "demo".w(),
+
defaultResponder: Hedwig,
layout: { top: 0, bottom: 0, width: 768, centerX: 0 },
contentView: null,
@@ -20,27 +22,139 @@ Hedwig.DemoPanel = SC.PanelPane.extend(
Hedwig.DemoPanel.generateWithView = function(view) {
return Hedwig.DemoPanel.create({
- contentView: SC.WorkspaceView.design({
- topToolbar: SC.ToolbarView.design({
- layout: { top: 0, height: 44, left: 0, right: 0 },
- childViews: "close source".w(), // not "closed" source-- close & source
- close: SC.ButtonView.design({
- layout: { left: 7, centerY: 0, height: 30, width: 100 },
- title: "Close",
- action: "closeDemo",
- controlSize: SC.AUTO_CONTROL_SIZE,
- isCancel: YES
+ contentView: SC.View.design({
+ childViews: "front back".w(),
+ init: function() {
+ sc_super();
+ SC.Timer.schedule({
+ interval: 1000,
+ target: this,
+ action: "flip",
+ repeats: YES
+ });
+
+ if (SC.Animatable.enableCSS3DTransforms) {
+ this.back.flip(180, YES);
+ } else {
+ this.back.set("isVisible", NO);
+ }
+ },
+
+ nowShowing: "none",
+ flip: function() {
+ if (this.get("nowShowing") == "back") this.set("nowShowing", "front");
+ else this.set("nowShowing", "back");
+ },
+
+ nowShowingDidChange: function() {
+ var ns = this.get("nowShowing");
+ if (ns == "front") {
+ if (SC.Animatable.enableCSS3DTransforms) {
+ this.front.flip(0);
+ this.back.flip(180);
+ } else {
+ this.front.set("isVisible", YES);
+ this.back.set("isVisible", NO);
+ }
+ } else {
+ if (SC.Animatable.enableCSS3DTransforms) {
+ this.front.flip(180);
+ this.back.flip(360);
+ } else {
+ this.back.set("isVisible", YES);
+ this.front.set("isVisible", NO);
+ }
+ }
+ }.observes("nowShowing"),
+
+ back: SC.WorkspaceView.design(SC.Animatable, {
+ classNames: "flippable".w(),
+ transitions: {
+ "transform": {
+ "duration": 0.5, timing: SC.Animatable.TRANSITION_EASE_IN_OUT
+ }
+ },
+ style: {
+ "rotateY": "0deg"
+ },
+
+ flip: function(rot, d) {
+ if (d) this.disableAnimation();
+ this.adjust({
+ "transform": "rotateY(" + rot + "deg)"
+ });
+ if (d) this.enableAnimation();
+ },
+
+
+ topToolbar: SC.ToolbarView.design({
+ layout: { top: 0, height: 44, left: 0, right: 0 },
+ childViews: "close source".w(), // not "closed" source-- close & source
+ close: SC.ButtonView.design({
+ layout: { left: 7, centerY: 0, height: 30, width: 100 },
+ title: "Close",
+ action: "closeSource",
+ controlSize: SC.AUTO_CONTROL_SIZE,
+ isCancel: YES
+ }),
+
+ source: SC.ButtonView.design({
+ layout: { right: 7, centerY: 0, height: 30, width: 100 },
+ title: "Demo",
+ action: "showDemo",
+ controlSize: SC.AUTO_CONTROL_SIZE,
+ isDefault: YES
+ })
}),
+ contentView: SC.ScrollView.design({
+ classNames: "source".w(),
+ borderStyle: SC.BORDER_NONE,
+ contentView: SC.StaticContentView.design({
+ classNames: "source".w(),
+ contentBinding: "Hedwig.demoController.preparedSource"
+ })
- source: SC.ButtonView.design({
- layout: { right: 7, centerY: 0, height: 30, width: 100 },
- title: "Source",
- action: "showSource",
- controlSize: SC.AUTO_CONTROL_SIZE,
- isDefault: YES
})
}),
- contentView: view
+
+ front: SC.WorkspaceView.design(SC.Animatable, {
+ classNames: "flippable".w(),
+ transitions: {
+ "transform": {
+ "duration": 0.5, timing: SC.Animatable.TRANSITION_EASE_IN_OUT
+ }
+ },
+ style: {
+ "rotateY": "0deg"
+ },
+
+ flip: function(rot) {
+ this.adjust({
+ "transform": "rotateY(" + rot + "deg)"
+ });
+ },
+
+ topToolbar: SC.ToolbarView.design({
+ layout: { top: 0, height: 44, left: 0, right: 0 },
+ childViews: "close source".w(), // not "closed" source-- close & source
+ close: SC.ButtonView.design({
+ layout: { left: 7, centerY: 0, height: 30, width: 100 },
+ title: "Close",
+ action: "closeDemo",
+ controlSize: SC.AUTO_CONTROL_SIZE,
+ isCancel: YES
+ }),
+
+ source: SC.ButtonView.design({
+ layout: { right: 7, centerY: 0, height: 30, width: 100 },
+ title: "Source",
+ action: "showSource",
+ controlSize: SC.AUTO_CONTROL_SIZE,
+ isDefault: YES
+ })
+ }),
+ contentView: view
+ })
})
});
};
Oops, something went wrong.

0 comments on commit 493c8e6

Please sign in to comment.