Progress.

js-montreal.rb

@@ -1,5 +1,4 @@
 #!/usr/bin/env ruby
-#$LOAD_PATH.unshift *Dir["#{File.dirname(__FILE__)}/vendor/**/lib"]
 require 'rubygems'
 require 'haml'
 require 'open-uri'
@@ -38,7 +37,7 @@ module Model
 end
 
 helpers do
-  
+
   # Returns the URL for the gravatar image associated with the email
   def gravaturl(email)
     hash = MD5::md5(email.downcase)
@@ -52,35 +51,62 @@ def menu(current)
       "<li class=\"#{li_class}\"><a href=\"#{m[:href]}\">#{m[:label]}</a>"
     }.join("")
   end
-  
+
   # Is this meetup happening in the past?
   def past?(meetup)
     Date.parse(meetup["on"]) < Date.today
   end
-  
+
   # Do we have enough speakers for the next meetup (ie, more than 1)
   # If not we're gonna change the header a bit..
   def booked?
     meetup = Model::MEETUPS.first
     meetup["speakers"].size > 1
   end
-  
+
   def gogodate( yyyymmdd )
     "#{yyyymmdd[0..3]}.#{yyyymmdd[4..5]}.#{yyyymmdd[6..7]}"
   end
-
 end
 
 before do
   # We're gonna need those
   @links = Model::LINKS
 end
 
+# Again, what could possibly go wrong.
+get "/meetups/*.json" do |index|
+  content_type :json
+
+  body = (if index == "current"
+    Model::MEETUPS.first
+  else
+    meetup = Model::MEETUPS.detect{|m| m["num"] == index.to_i}
+    meetup ||= {}
+  end).to_json
+end
+
+get "/meetups.json" do
+  content_type :json
+  body Model::MEETUPS.to_json
+end
+
+get "/css/mobile.css" do
+  sass :mobile
+end
+
+get "/meetups/current/?" do
+  # Exclude the current meeting
+  haml :_meetup_mobile, :layout => false, :locals => { :meetup => Model::MEETUPS.first }
+end
+
+
 get "/meetups/?" do
   @section = "previously"
 
   # Exclude the current meeting
-  haml :meetups, :locals => { :meetups => Model::MEETUPS.reject{ |m| m == Model::MEETUPS.first }}
+  haml :meetups, :locals => { :meetups => Model::MEETUPS.reject{
+    |m| m == Model::MEETUPS.first }}
 end
 
 get "/?" do
@@ -98,6 +124,10 @@ def gogodate( yyyymmdd )
   haml :present, :locals => { :purpose => Model::PURPOSE }
 end
 
+get "/mobile/?" do
+  haml :mobile, :layout => false
+end
+
 # Return the contents of the Yahoo Pipe
 # The pipe contains good shit.  It is displayed in the rainbow.
 get "/data/js-links" do

public/src/jsmtl-sencha.js

@@ -1,15 +1,66 @@
 // JS-MONTREAL
 // Sencha Touch mobile version
 
+
+// GOTCHAS so far
+// 1. the rendering sequence
+// 'fullscreen' renders the component immediately!  don't use that
+// unless that's what you need
+
+
 (function(){
 
 
 
-var jsmtl = new Ext.Application({
+//var mainView = {
+
+var mainView = {
+  id: 'mainPanel',
+  fullscreen: true,
+  cls: 'mobile',
 
-  name    : 'jsmtl-mobile'
+  items: [{
+    ui: 'dark',
+    iconCls: 'favorites',
+    title: 'Currently',
+    html: 'Currently'
+  },{
+    iconCls: 'favorites',
+    title: 'Previously',
+    html: 'bbq'
+  },{
+    iconCls: 'default',
+    title: 'Where',
+    items: {
+      xtype: 'map',
+      useCurrentLocation: true
+    }
+  },{
+    iconCls: 'default',
+    title: 'About',
+    html: 'About JS-MONTREAL'
+  }],
 
+  tabBar: {
+    dock: 'bottom',
+    scroll: {
+      direction: 'horizontal',
+      useIndicators: true
+    },
+    layout: {
+      pack: 'center'
+    }
+  }
+};
+
+var jsmtl = new Ext.Application({
+    name: 'jsmtl',
+
+    launch: function() {
+      this.viewport = new Ext.TabPanel(mainView);
+    }
 });
 
 
+
 })();

views/_meetup_mobile.haml

@@ -0,0 +1,17 @@
+.meetup
+  %h2= meetup["title"]
+  %p.blurb= meetup["blurb"]
+  %ul.speakers
+    - meetup["speakers"].each do |s|
+      %li
+        %a(href="#{s["url"]}" target="_new")
+          %img.gravatar(src="#{gravaturl(s["email"])}")
+        %h4
+          %a(href="#{s["url"]}" target="_new")#{s["name"]}
+        %h5 #{s["title"]}
+        %p.synopsis #{s["synopsis"]}
+        %ul.links
+          - s["links"].each do |l|
+            %li<
+              %a(href="#{l["url"]}" target="_new")#{l["title"]}
+              = ", " unless s["links"].last == l

views/layout.haml

@@ -8,7 +8,6 @@
     %link{ :href => "http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/base/base-min.css", :rel => "stylesheet", :type => "text/css" }
     %link{ :href => "css/js-mtl.css", :rel => "stylesheet", :type => "text/css" }
     %script{ :src => "src/jquery-1.4.2.min.js", :type => "text/javascript" }
-    /%script{ :src => "src/jquery.color.js", :type => "text/javascript" }
     %meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes")
     %title js-montreal : JavaScript User Group in Montreal, Quebec
     :javascript
@@ -38,7 +37,7 @@
           %a{ :href => l["href"]}<
             =l["label"]
           &nbsp;
-        %b Un gros merci au 
+        %b Un gros merci au
         %a{ :href => "http://crim.ca" }CRIM
         %br/
         %b Montreal user groups:&nbsp;

views/mobile.haml

@@ -4,9 +4,12 @@
     %meta{ :charset => "utf-8" }
     %meta{ :name => "description", :content => "Montreal (Canada) Javascript User Group" }
     %meta{ :name => "keywords", :content => "montreal,javascript,js,usergroup,user group" }
-    %script(src="/lib/touch/sencha-touch.js")
     %link(href="/lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css")
-    /%meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes")
+    %link(href="/css/mobile.css" rel="stylesheet" type="text/css")
+    %script(src="/lib/touch/sencha-touch.js")
+    %script(src="/src/jsmtl-sencha.js")
+    %script(type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true")
+
     %title js-montreal : JavaScript User Group in Montreal, Quebec
     :javascript
       var _gaq = _gaq || [];

views/mobile.sass

@@ -0,0 +1,3 @@
+.mobile
+  .meetup
+    background-color: #333