0
@@ -0,0 +1,134 @@
0
+Author:: Wen-Tien Chang(mailto:ihower@gmail.com), hlb(mailto:hlb@handlino.com)
0
+Copyright:: Copyright (c) 2007 Handlino Inc.
0
+License:: Distributed under the New BSD License
0
+
0
+== Description ==
0
+Spakit is a plugin that makes it very easy to turn your Rails App
0
+Into a "single page application" (SPA).
0
+
0
+To enable SPA, simply install the plug-in, create a spakit layout and use Spakit helper.
0
+Don't need modify any model/controller code... ;)
0
+
0
+Spakit will send xhr request(i.e. prototype's Ajax.Updater ) with ?layout=spakit, 
0
+and controller return HTML with spakit layout. Note that spakit_form_for not support file upload submit.
0
+
0
+By the way, Message plugin is another SPA plugin,using different approach.
0
+
0
+== Usage ==
0
+
0
+For now, Spakit provide three helper:
0
+
0
+ * spakit_link_to, just like remote_link_to
0
+ * spakit_form_for, just like form_for, but you must specify :url
0
+ * spakit_form_tag, just like form_tag
0
+
0
+by default spakit will replace HTML element called #content.
0
+
0
+== Layout code example ==
0
+You should write flash message here because we often place that in application layout.
0
+
0
+# /view/layouts/spakit.rhtml
0
+
0
+<p><%= flash[:notice] %></p>
0
+<%= yield %>
0
+
0
+== History Bookmarks ==
0
+
0
+We recommend Really Simple History(RSH) library to handle browser forward/back.
0
+
0
+Example code:
0
+
0
+# environment.rb
0
+
0
+module SpakitHelper
0
+  @@spa_options = {
0
+    :update => 'content-region',
0
+    :loading => 'SPA.loading',
0
+    :complete => 'SPA.complete'
0
+  }
0
+end
0
+
0
+# application.js
0
+# We use jquery syntax, you can use prototype to define your function.
0
+
0
+var $j = jQuery.noConflict();
0
+
0
+(function($) {
0
+    SPA = {
0
+        currentHash: null,
0
+        currentLocation: null,
0
+        init: function() {
0
+            if ( $('#waiting-message').length == 0 ) {
0
+                $('<div id="waiting-message"><img src="/images/ajax-loader.gif"></div>').appendTo('#bd');
0
+                $('#waiting-message').hide();
0
+            }
0
+        },
0
+        loading: function() {
0
+            this.init();
0
+            $('#waiting-message').show();
0
+        },
0
+        hide: function() {
0
+            $('#waiting-message').hide();
0
+        },
0
+        historyChange: function(newLocation, historyData, isFresh) {
0
+            if (isFresh == null) {
0
+                if (historyStorage.hasKey(newLocation)) {
0
+                    if (newLocation == "start") {
0
+                        newLocation = location.pathname;
0
+                    }
0
+
0
+                    $.ajax({
0
+                        type: "GET",
0
+                        url: newLocation,
0
+                        data: { layout: "spakit" },
0
+                        beforeSend: function(){ SPA.loading(); },
0
+                        complete: function(res, status){
0
+                            if ( status == "success" || status == "notmodified" ) {
0
+                                $('#content-region').html(res.responseText);
0
+                            }
0
+                            SPA.hide();
0
+                        }
0
+                    });
0
+                }
0
+            } else {
0
+                /* new data */
0
+                dhtmlHistory.add(newLocation, historyData);
0
+            }
0
+        },
0
+        complete: function(newLocation) {
0
+            this.historyChange(newLocation, "", true);
0
+            this.hide();
0
+        }
0
+    };
0
+    
0
+    SPA.currentHash = window.location.hash;
0
+    if (SPA.currentHash.length) {
0
+        if (SPA.currentHash.charAt(0) == '#' && SPA.currentHash.charAt(1) == '/') {
0
+            SPA.currentLocation = SPA.currentHash.slice(1);
0
+        }
0
+    }
0
+
0
+    $(document).ready(function(){
0
+        dhtmlHistory.initialize();
0
+        if (SPA.currentLocation) {
0
+            if (SPA.currentLocation != '#start') {
0
+                window.location.href = SPA.currentLocation;
0
+            }
0
+        } else {
0
+            dhtmlHistory.addListener(SPA.historyChange);
0
+            if (dhtmlHistory.isFirstLoad()) {
0
+                dhtmlHistory.add("start", "");
0
+            }
0
+        }
0
+    });
0
+
0
+})(jQuery);
0
+
0
+window.dhtmlHistory.create({
0
+    toJSON: function(o) {
0
+        return JSON.stringify(o);
0
+    },
0
+    fromJSON: function(s) {
0
+        return JSON.parse(s);
0
+    }
0
+});
0
\ No newline at end of file