Permalink
Browse files

Updated mojito-yaf-pnm to take advantage of mojito YAF client

  • Loading branch information...
1 parent 2da4d42 commit c174cfc25b4ba30c9a62084a0b6cae63f98238ec @add0n add0n committed Jan 4, 2013
@@ -1,6 +1,7 @@
[
{
"settings": [ "master" ],
+ "useYAF": true,
"specs": {
"frame": {
"type": "HTMLFrameMojit",
@@ -12,43 +12,79 @@ YUI.add('LightboxMojitBinder', function (Y, NAME) {
* @module LightboxMojitBinder
*/
- /**
- * Constructor for the Binder class.
- *
- * @param mojitProxy {Object} The proxy to allow
- * the binder to interact with its owning mojit.
- * @class Binder
- * @constructor
- */
- Y.namespace('mojito.binders')[NAME] = {
- /**
- * Binder initialization method, invoked
- * after all binders on the page have
- * been constructed.
- */
- init: function(mojitProxy) {
- this.mojitProxy = mojitProxy;
-
- // Listen for the 'broadcast-detail-link' event. This will have
- // been fired when someone clicks on a picture in the photos view
- // and will bubble up from there to our master mojit.
- this.mojitProxy.listen('broadcast-detail-link', function(payload) {
-
- // The photos view sent us the largeUrl and the title.
- var largeUrl = payload.data.largeUrl;
- var title = payload.data.title;
-
- // Tell the mojitProxy to refresh the view, using our largeUlr
- // and the title.
- mojitProxy.refreshView({
- params: {
- url: {
- largeUrl: largeUrl,
- title: title
- }
- }
- });
- });
+ var MOJITO_NS = Y.namespace('mojito');
+
+ MOJITO_NS.LightboxMojitView = Y.Base.create('LightboxMojitView', MOJITO_NS.View, [],
+ {
+ initializer: function (params) {
+ // Handlebars template¬
+ this.set('template', '<div class="lightbox"><div class="photo"><img src="{{largeUrl}}" alt="A photo titled: {{title}}" /><div class="photo-info"><h2 class="photo-title"><a href="{{pageUrl}}" title="View on Flickr">{{title}}</a></h2></div></div></div></div>');
+ }
+ }
+ );
+
+ // ---
+
+ MOJITO_NS.LightboxMojitHandler = Y.Base.create('LightboxMojitHandler', MOJITO_NS.Handler, [],
+ {
+ setupEventBindings: function () {
+ // Make sure and set up the auto bindings
+ this.constructor.superclass.setupEventBindings.apply(
+ this, arguments);
+ }
+ }, {
+ ATTRS: {
+ eventBindings: {value: []}
+ }
}
- };
-}, '0.0.1', {requires: ['mojito-client']});
+ );
+
+ // ---
+
+ MOJITO_NS.LightboxMojitModel = Y.Base.create('LightboxMojitModel', Y.Model, [],
+ {
+ }
+ );
+
+ // ---
+
+ MOJITO_NS.LightboxMojitController = Y.Base.create('LightboxMojitController', MOJITO_NS.Controller, [],
+ {
+ initializer: function (params) {
+ var lightboxModel;
+ var lightboxView;
+
+ this.set('appObj', params.appObj);
+
+ lightboxModel = new MOJITO_NS.LightboxMojitModel({largeUrl: ''});
+ this.get('models')['urlHolder'] = lightboxModel;
+
+ lightboxView = new MOJITO_NS.LightboxMojitView(
+ {model: lightboxModel,
+ id: this.get('id'),
+ mojit: this});
+ lightboxView.set('templateEngine',
+ new MOJITO_NS.Template(Y.Handlebars));
+ lightboxView.render();
+
+ this.addViewNamed(lightboxView, 'lightboxView');
+
+ this.setupEventObservations();
+ },
+
+ onLightboxShow: function (evt) {
+ this.get('models')['urlHolder'].set(
+ 'largeUrl', decodeURIComponent(evt.params.largeUrl));
+ },
+ }, {
+ ATTRS: {
+ name: {value: 'lightbox'},
+ controllerEvents: {value: ['lightbox:show']},
+ handlerType: {value: MOJITO_NS.LightboxMojitHandler},
+ routes: {value: []},
+ appObj: {value: null}
+ }
+ }
+ );
+
+}, '0.0.1', {requires: ['handlebars', 'mojito-yaf-client']});
@@ -7,39 +7,90 @@
/*jslint anon:true, sloppy:true, nomen:true*/
YUI.add('PhotosMojitBinder', function (Y, NAME) {
- /**
- * The PhotosMojitBinder module.
- * @module PhotosMojitBinder
- */
-
- /**
- * Constructor for the Binder class.
- *
- * @param mojitProxy {Object} The proxy to allow
- * the binder to interact with its owning mojit.
- * @class Binder
- * @constructor
- */
- Y.namespace('mojito.binders')[NAME] = {
- /**
- * Binder initialization method, invoked
- * after all binders on the page have
- * been constructed.
- */
- init: function(mojitProxy) {
- this.mojitProxy = mojitProxy;
- },
- bind: function(node) {
- var mp = this.mojitProxy;
- node.all('li.photo a').on('click', function(evt) {
- evt.halt();
-
- var largeUrl = evt.currentTarget.getDOMNode().getAttribute('data-large-url');
- var title = evt.currentTarget.one('img').get('title');
-
- mp.broadcast('detail-link', {largeUrl: largeUrl,
- title: title});
- });
+
+ var MOJITO_NS = Y.namespace('mojito');
+
+ MOJITO_NS.PhotosMojitView = Y.Base.create('PhotosMojitView', MOJITO_NS.View, [],
+ {
+ }
+ );
+
+ // ---
+
+ MOJITO_NS.PhotosMojitHandler = Y.Base.create('PhotosMojitHandler', MOJITO_NS.Handler, [],
+ {
+ setupEventBindings: function () {
+ // Make sure and set up the auto bindings
+ this.constructor.superclass.setupEventBindings.apply(
+ this, arguments);
+
+ Y.all('li.photo a').on(
+ 'click',
+ function (evt) {
+ var largeUrl,
+ title;
+
+ evt.halt();
+ largeUrl = evt.currentTarget.getDOMNode().getAttribute('data-large-url');
+ title = evt.currentTarget.one('img').get('title');
+
+ this.fire('mojit:showLightbox',
+ {largeUrl: largeUrl, title: title});
+ }.bind(this));
+ }
+ }, {
+ ATTRS: {
+ eventBindings: {value: []}
+ }
+ }
+ );
+
+ // ---
+
+ MOJITO_NS.PhotosMojitModel = Y.Base.create('PhotosMojitModel', Y.Model, [],
+ {
}
- };
-}, '0.0.1', {requires: ['yql', 'io', 'dump', 'mojito-client']});
+ );
+
+ // ---
+
+ MOJITO_NS.PhotosMojitController = Y.Base.create('PhotosMojitController', MOJITO_NS.Controller, [],
+ {
+ initializer: function (params) {
+ var photosModel;
+ var photosView;
+
+ this.set('appObj', params.appObj);
+
+ photosModel = new MOJITO_NS.PhotosMojitModel();
+
+ photosView = new MOJITO_NS.PhotosMojitView(
+ {model: photosModel,
+ id: this.get('id'),
+ mojit: this});
+ photosView.set('templateEngine',
+ new MOJITO_NS.Template(Y.Handlebars));
+ photosView.render();
+
+ this.addViewNamed(photosView, 'photosView');
+
+ this.setupEventObservations();
+ },
+
+ onMojitShowLightbox: function (evt) {
+ this.get('appObj').navigate(
+ '/lightbox/show/' + encodeURIComponent(evt.largeUrl));
+ },
+ }, {
+ ATTRS: {
+ name: {value: 'photos'},
+ controllerEvents: {value:
+ ['mojit:showLightbox']},
+ handlerType: {value: MOJITO_NS.PhotosMojitHandler},
+ routes: {value: []},
+ appObj: {value: null}
+ }
+ }
+ );
+
+}, '0.0.1', {requires: ['yql', 'io', 'dump', 'mojito-yaf-client']});
@@ -7,7 +7,7 @@
},
"lightbox": {
"verbs": ["get"],
- "path": "/lightbox/show",
+ "path": "/lightbox/show/:largeUrl",
"call": "lightbox.show"
}
}]

0 comments on commit c174cfc

Please sign in to comment.