diff --git a/README.md b/README.md index 19f46ea..9357210 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ junior-example =================== -Working on an actual example of [https://github.com/justspamjustin/junior](Junior). - -So far the example instructions don't seem to work, just beginning to debug now. \ No newline at end of file +Working on an actual example of [https://github.com/justspamjustin/junior](Junior). \ No newline at end of file diff --git a/index.html b/index.html index 2bbddb2..301a6f1 100644 --- a/index.html +++ b/index.html @@ -5,21 +5,21 @@ Junior PhoneGap Example - - - - - - - - - - + + -
-
-
-
+
+
+
+
+ + + + + + + + diff --git a/javascripts/app.js b/javascripts/app.js new file mode 100644 index 0000000..abb426d --- /dev/null +++ b/javascripts/app.js @@ -0,0 +1,88 @@ +// Use ratchet as a reference for your template markup + +var HomeTemplate = [ + '
', + '

Hello World!

', + '
Click Me!
', + '
' +].join('\n'); + +var HomeView = Jr.View.extend({ + render: function() { + this.$el.html(HomeTemplate); + return this; + }, + + events: { + 'click .click-me': 'onClickClickMeButton' + }, + + onClickClickMeButton: function() { + this.goToNextPage(); + }, + + goToNextPage: function() { + Jr.Navigator.navigate('cool',{ + trigger: true, + animation: { + type: Jr.Navigator.animations.SLIDE_STACK, + direction: Jr.Navigator.directions.LEFT + } + }) + } +}); + +var CoolTemplate = [ + '
', + '
', + '
Back
', + '

Cool Page

', + '
', + '
', + ' This page is just really cool!', + '
' +].join('\n'); + +var CoolView = Jr.View.extend({ + render: function() { + this.$el.html(CoolTemplate); + return this; + }, + + events: { + 'click .button-prev': 'onClickButtonPrev' + }, + + onClickButtonPrev: function() { + this.goToHomePage(); + }, + + goToHomePage: function() { + Jr.Navigator.navigate('',{ + trigger: true, + animation: { + type: Jr.Navigator.animations.SLIDE_STACK, + direction: Jr.Navigator.directions.RIGHT + } + }) + } + +}); + +var AppRouter = Jr.Router.extend({ + routes: { + '': 'home', + 'cool': 'cool' + }, + + home: function() { + this.renderView(new HomeView()); + }, + + cool: function() { + this.renderView(new CoolView()); + } +}); + +var appRouter = new AppRouter(); +Backbone.history.start(); diff --git a/lib/javascripts/backbone-min.js b/javascripts/vendor/backbone-min.js similarity index 100% rename from lib/javascripts/backbone-min.js rename to javascripts/vendor/backbone-min.js diff --git a/src/javascripts/junior.js b/javascripts/vendor/junior.js similarity index 100% rename from src/javascripts/junior.js rename to javascripts/vendor/junior.js diff --git a/lib/javascripts/lodash.min.js b/javascripts/vendor/lodash.min.js similarity index 100% rename from lib/javascripts/lodash.min.js rename to javascripts/vendor/lodash.min.js diff --git a/lib/javascripts/modernizr.custom.15848.js b/javascripts/vendor/modernizr.custom.15848.js similarity index 100% rename from lib/javascripts/modernizr.custom.15848.js rename to javascripts/vendor/modernizr.custom.15848.js diff --git a/lib/javascripts/zepto.flickable.min.js b/javascripts/vendor/zepto.flickable.min.js similarity index 100% rename from lib/javascripts/zepto.flickable.min.js rename to javascripts/vendor/zepto.flickable.min.js diff --git a/lib/javascripts/zepto.min.js b/javascripts/vendor/zepto.min.js similarity index 100% rename from lib/javascripts/zepto.min.js rename to javascripts/vendor/zepto.min.js diff --git a/main.js b/main.js deleted file mode 100644 index 0ba4b9a..0000000 --- a/main.js +++ /dev/null @@ -1,209 +0,0 @@ -// Home - -var HomeTemplate = [ - '
', - '
', - '

Junior

', - '

A front-end framework for building html5 mobile apps with a native look and feel.

', - '
', - '
  • Features
', - '
', - '
    ', - '
  • ', - ' Transitions with a native look and feel.', - '
    ', - '
    • ', - '
  • ', - ' Carousels using flickable.js', - ' ', - '
    • ', - '
  • ', - ' Integrated with Backbone.js', - '
    ', - '
    • ', - '
', - '
', - '
', - '
', - '
', - '
Show me more!
', - '
' -].join('\n'); - -var HomeView = Jr.View.extend({ - render: function(){ - this.$el.html(HomeTemplate); - this.afterRender(); - return this; - }, - - afterRender: function() { - var after = function() { - this.$('.carousel-list').flickable({segments:3}); - }; - setTimeout(after,1); - }, - - events: { - 'click .show-more-button': 'onClickShowMoreButton', - 'onScroll .carousel-list': 'onScrollCarousel', - 'click .carousel-navigation li': 'onClickCarouselNavigationItem' - }, - - onClickShowMoreButton: function() { - Jr.Navigator.navigate('ratchet',{ - trigger: true, - animation: { - type: Jr.Navigator.animations.SLIDE_STACK, - direction: Jr.Navigator.directions.LEFT - } - }) - return false; - }, - - onScrollCarousel: function() { - index = this.$('.carousel-list').flickable('segment'); - this.$('.carousel-navigation li').removeClass('active'); - this.$('.carousel-navigation li[data-index="'+index+'"]').addClass('active'); - }, - - onClickCarouselNavigationItem: function(e) { - var index = $(e.currentTarget).attr('data-index'); - this.$('.carousel-list').flickable('segment',index); - } - -}); - -// Ratchet Demo - -var RatchetTemplate = [ - '
', - '
', - '
Back
', - '

Ratchet CSS

', - '
Next
', - '
', - '
', - '

Jr. was inspired by Ratchet and pulls in their gorgeous styles.

', - '

Here are some examples:

', - '
', - ' ', - '
Block button
', - ' Mini buttons are awesome!', - '
', - '
1234
', - ' ', - '
', - '

For more examples checkout the ratchet project.

', - '
' -].join('\n'); - -var RatchetView = Jr.View.extend({ - render: function(){ - this.$el.html(RatchetTemplate); - return this; - }, - - events: { - 'click .button-prev': 'onClickButtonPrev', - 'click .button-next': 'onClickButtonNext', - 'click .example-toggle': 'onClickExampleToggle' - }, - - onClickButtonPrev: function() { - Jr.Navigator.navigate('',{ - trigger: true, - animation: { - type: Jr.Navigator.animations.SLIDE_STACK, - direction: Jr.Navigator.directions.RIGHT - } - }); - }, - - onClickButtonNext: function() { - Jr.Navigator.navigate('pushstate',{ - trigger: true, - animation: { - type: Jr.Navigator.animations.SLIDE_STACK, - direction: Jr.Navigator.directions.LEFT - } - }); - }, - - onClickExampleToggle: function() { - this.$('.example-toggle').toggleClass('active'); - } -}); - -var PushStateTemplate = [ - '
', - '
', - '
Back
', - '

Pushstate API

', - '
', - '
', - ' In combination with backbone\'s routing and the pushstate api, Jr. maintains animations when you use pushstate.', - ' ', - '

Push the browser back button to watch it work.

', - '
' -].join('\n'); - -var PushStateView = Jr.View.extend({ - render: function() { - this.$el.html(PushStateTemplate); - return this; - }, - - events: { - 'click .button-prev': 'onClickButtonPrev' - }, - - onClickButtonPrev: function() { - Jr.Navigator.navigate('ratchet',{ - trigger: true, - animation: { - type: Jr.Navigator.animations.SLIDE_STACK, - direction: Jr.Navigator.directions.RIGHT - } - }); - } - -}); - -// Router - - -var AppRouter = Jr.Router.extend({ - routes: { - '': 'home', - 'ratchet': 'ratchet', - 'pushstate': 'pushstate' - }, - - home: function(){ - var homeView = new HomeView(); - this.renderView(homeView); - }, - - ratchet: function() { - var ratchetView = new RatchetView(); - this.renderView(ratchetView); - }, - - pushstate: function() { - var pushStateView = new PushStateView(); - this.renderView(pushStateView); - } - -}); - -var appRouter = new AppRouter(); -Backbone.history.start(); diff --git a/src/stylesheets/junior.css b/stylesheets/vendor/junior.css similarity index 100% rename from src/stylesheets/junior.css rename to stylesheets/vendor/junior.css diff --git a/lib/stylesheets/ratchet.css b/stylesheets/vendor/ratchet.css similarity index 100% rename from lib/stylesheets/ratchet.css rename to stylesheets/vendor/ratchet.css