Skip to content

Instantly share code, notes, and snippets.

@ralfschimmel

ralfschimmel/gist:1080339

Created July 13, 2011 13:59
Show Gist options
  • Save ralfschimmel/1080339 to your computer and use it in GitHub Desktop.
Save ralfschimmel/1080339 to your computer and use it in GitHub Desktop.
Download ZIP
Make a scrollview draggable to left and right
Raw
gistfile1.js
/*globals App */
App.DragView = SC.ScrollView.extend({
backgroundColor: 'black',
touchStart: function(touch) {
var f = this.get("frame");
this._touch = {
start: {
x: touch.pageX,
y: touch.pageY
},
ourStart: {
x: f.x,
y: f.y,
width: f.width,
height: f.height
}
};
return YES;
},
touchesDragged: function(evt, touches) {
var t = this._touch;
var leftOrRight = t.ourStart.x + evt.pageX - t.start.x;
var l2 = evt.pageX;
var l3 = t.start.x;
this._draggedPixels = 0;
this._draggingRight = l3 < l2;
if (this._draggingRight) {
this._draggedPixels = l3 - l2;
} else {
this._draggedPixels = l2 - l3;
}
this.adjust('left', leftOrRight);
if (this._draggingRight) {
this._leftPanel.adjust('left', -this.get('layout').width + this.get('layout').left);
} else {
this._rightPanel.adjust('left', this.get('layout').width + this.get('layout').left);
}
},
touchEnd: function(touch) {
if ((this._draggingRight && touch.pageX > (document.body.clientWidth / 2)) || ((!this._draggingRight && (this._touch.start.x - touch.pageX > document.body.clientWidth / 2)))) {
var move = document.body.clientWidth;
if (!this._draggingRight) {
move = -move;
this._rightPanel.animate('left', 0, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
this._leftPanel.adjust('left', this.get('layout').width);
this._rightPanel = this._leftPanel;
} else {
this._leftPanel.animate('left', 0, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
this._rightPanel.adjust('left', -this.get('layout').width);
this._leftPanel = this._rightPanel;
}
this.animate('left', move, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
} else {
this.animate('left', 0, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
this._leftPanel.animate('left', -this.get('layout').width + this.get('layout').left, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
this._rightPanel.animate('left', this.get('layout').width + this.get('layout').left, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
}
},
mouseDown: function(evt) {
this.touchStart(evt);
},
mouseUp: function(evt) {
this.touchEnd(evt);
},
mouseDragged: function(evt) {
this.touchesDragged(evt);
}
});
Som.mainPage = SC.Page.design({
// The main pane is made visible on screen as soon as your app is loaded.
// Add childViews to this pane for views to display immediately on page
// load.
mainPane: SC.MainPane.design({
childViews: 'workView'.w(),
orientationDidChange: function() {
alert('orientation change!');
}.observes('orientation'),
workView: SC.WorkspaceView.extend({
autoResizeToolbars: YES,
topToolbar: null,
bottomToolbar: SC.ToolbarView.design({
childViews: 'label icon1 icon2 icon3'.w(),
classNames: ['toolbar'],
layout: {
bottom: 0,
height: 45
},
anchorLocation: SC.ANCHOR_BOTTOM,
label: SC.LabelView.design({
layout: {
height: 30,
width: 200,
centerY: 20,
centerX: -100
},
value: "window width: " + document.body.clientWidth,
isVisible: NO
}),
icon1: SC.View.design({
layout: {
width: 24,
height: 24,
centerX: -50,
centerY: 0
},
classNames: ['sc-icon-favorite-24'],
touchStart: function(evt) {
//TODO store current center view and move accordingly!
var contentView = this.get('parentView').get('parentView').get('contentView');
var centerView1 = contentView.get('centerView1');
var centerView2 = contentView.get('centerView2');
var centerView3 = contentView.get('centerView3');
centerView1.animate('left', 0, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
centerView2.animate('left', document.body.clientWidth, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
centerView3.animate('left', -document.body.clientWidth, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
},
mouseDown: function(evt) {
this.touchStart(evt);
}
}),
icon2: SC.View.design({
layout: {
width: 24,
height: 24,
centerX: 0,
centerY: 0
},
classNames: ['sc-icon-bookmark-24'],
touchStart: function(evt) {
var contentView = this.get('parentView').get('parentView').get('contentView');
var centerView1 = contentView.get('centerView1');
var centerView2 = contentView.get('centerView2');
var centerView3 = contentView.get('centerView3');
centerView1.animate('left', -document.body.clientWidth, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
centerView2.animate('left', 0, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
centerView3.animate('left', document.body.clientWidth, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
},
mouseDown: function(evt) {
this.touchStart(evt);
}
}),
icon3: SC.View.design({
layout: {
width: 24,
height: 24,
centerX: 50,
centerY: 0
},
classNames: ['sc-icon-user-24'],
touchStart: function(touch) {
var contentView = this.get('parentView').get('parentView').get('contentView');
var centerView1 = contentView.get('centerView1');
var centerView2 = contentView.get('centerView2');
var centerView3 = contentView.get('centerView3');
centerView1.animate('left', document.body.clientWidth, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
centerView2.animate('left', -document.body.clientWidth, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
centerView3.animate('left', 0, {
duration: 0.5,
timing: SC.Animatable.TRANSITION_CSS_EASE_IN_OUT
});
},
mouseDown: function(evt) {
this.touchStart(evt);
}
})
}),
contentView: SC.View.extend({
childViews: 'centerView1 centerView2 centerView3'.w(),
centerView1: Som.DragView.extend({
layout: {
top: 0,
width: document.body.clientWidth,
height: document.body.clientHeight - 30,
left: -document.body.clientWidth
},
backgroundColor: 'blue',
touchesDragged: function(evt, touches) {
this._leftPanel = this.get('parentView').get('centerView3');
this._rightPanel = this.get('parentView').get('centerView2');
sc_super();
},
contentView: SC.TemplateView.create({
templateName: 'event_list'
})
}),
centerView2: Som.DragView.extend({
layout: {
top: 0,
width: document.body.clientWidth,
height: document.body.clientHeight - 30,
left: 0
},
backgroundColor: 'red',
touchesDragged: function(evt, touches) {
this._leftPanel = this.get('parentView').get('centerView1');
this._rightPanel = this.get('parentView').get('centerView3');
sc_super();
},
contentView: SC.TemplateView.create({
templateName: 'vak_cijfer_list'
})
}),
centerView3: Som.DragView.extend({
layout: {
top: 0,
width: document.body.clientWidth,
height: document.body.clientHeight - 30,
left: document.body.clientWidth
},
backgroundColor: 'yellow',
touchesDragged: function(evt, touches) {
this._leftPanel = this.get('parentView').get('centerView2');
this._rightPanel = this.get('parentView').get('centerView1');
sc_super();
},
contentView: SC.TemplateView.create({
templateName: 'huiswerk_list'
})
})
})
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment