|
YUI().use('app','event-key', function (Y) { |
|
|
|
Y.PhotoView = Y.Base.create('photoView', Y.View, [], { |
|
template: '<p><a href="/link_prev" id="previous">prev</a> <a href="/link_next" id="next">next</a> {photo_id} </p>', |
|
render: function () { |
|
this.get('container').setHTML(Y.Lang.sub(this.template, {photo_id: this.get('photo_id')})); |
|
return this; |
|
} |
|
}); |
|
|
|
Y.PictureApp = Y.Base.create('pictureApp', Y.App, [], { |
|
views: { |
|
photo : {type: 'PhotoView'} |
|
}, |
|
initializer: function () { |
|
Y.one('doc').on('key', this.handleKeyPress, 'down:37,39', this); |
|
}, |
|
handleKeyPress: function (e) { |
|
var activeView, pageName; |
|
activeView = this.get('activeView'); |
|
if (activeView instanceof Y.PhotoView) { |
|
// get the model of the active view and get the next or previous |
|
// property depending on whether the left or right arrow was |
|
// pressed and navigate to that route |
|
switch (e.keyCode) { |
|
case 37: |
|
pageName = 'arrow_key_prev'; |
|
break; |
|
case 39: |
|
pageName = 'arrow_key_next'; |
|
break; |
|
default: |
|
break; |
|
} |
|
this.navigate('/'+pageName); |
|
} |
|
} |
|
}); |
|
|
|
var app = new Y.PictureApp({ |
|
serverRouting: false, |
|
transitions: true, |
|
container: '#container' |
|
}); |
|
|
|
app.route('/:photo_id', function (req) { |
|
app.showView('photo', {photo_id: req.params.photo_id}, {render: true}); |
|
}); |
|
app.render().save('/initial_page'); |
|
}); |
