ajaxify_rails 0.0.2 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +48 -32
- data/lib/ajaxify_rails.rb +1 -0
- data/lib/ajaxify_rails/version.rb +1 -1
- data/vendor/assets/javascripts/ajaxify_rails/ajaxify_rails.js.coffee +57 -24
- metadata +4 -4
data/README.md
CHANGED
@@ -4,7 +4,8 @@ No more full page reloads for your Rails app! Yay!
|
|
4
4
|
|
5
5
|
Automatically makes your app loading content in the background via ajax.
|
6
6
|
|
7
|
-
Works by turning all internal links into ajax links that trigger an update of the page's content area.
|
7
|
+
Works by turning all internal links into ajax links that trigger an update of the page's content area.
|
8
|
+
Also form submission are automatically turned into ajax requests.
|
8
9
|
|
9
10
|
Features:
|
10
11
|
|
@@ -35,37 +36,46 @@ In your application.js file add:
|
|
35
36
|
|
36
37
|
## Usage
|
37
38
|
|
39
|
+
Call `Ajaxify.init()` in your layout's javascript.
|
40
|
+
Do this as early as possible to ensure Ajaxify's interchangeable url schemes (history api vs. hash based urls)
|
41
|
+
work most effectively.
|
42
|
+
|
43
|
+
The later you call `init()`, the later potential redirects from one scheme to another are performed,
|
44
|
+
which means the more unnecessary work the browser has to do.
|
45
|
+
|
46
|
+
|
38
47
|
### Content Area
|
39
48
|
|
40
|
-
Ajaxify
|
49
|
+
Ajaxify assumes that your app has a content container html tag with the id `main`.
|
41
50
|
This tag is the container wrapping the yield statement in your layout.
|
42
51
|
If yield doesn't have a wrapper in your app yet, you need to supply one to get ajaxification working:
|
43
52
|
|
44
53
|
#main
|
45
54
|
= yield
|
46
55
|
|
47
|
-
You can change the content wrapper by setting
|
56
|
+
You can change the content wrapper in your javascript by setting
|
48
57
|
|
49
58
|
Ajaxify.content_container = 'content_container_id'
|
50
59
|
|
60
|
+
|
51
61
|
### Loader Animation
|
52
62
|
|
53
63
|
You probably like to have a loader image to be displayed to the user while content loads via ajax.
|
54
|
-
This is simple. Ajaxify
|
55
|
-
the content wrapper before starting an ajax request. So just supply styles for
|
64
|
+
This is simple. Ajaxify automatically inserts a loader div with the class `ajaxify_loader` into
|
65
|
+
the content wrapper before starting an ajax request. So just supply styles for `.ajaxify_loader` in your css, with an
|
56
66
|
animated gif as a background.
|
57
67
|
|
58
68
|
|
59
69
|
### Page Title
|
60
70
|
|
61
|
-
If you define a method called
|
71
|
+
If you define a method called `page_title` in your application controller, Ajaxify will automatically
|
62
72
|
update the page's title tag after the main content has changed.
|
63
73
|
|
64
74
|
### Navigation and other Layout Updates
|
65
75
|
|
66
76
|
It's a common use case to have a navigation that needs to change its appearence and possibly functioning when the user navigates
|
67
|
-
to a different section of the page. Ajaxify
|
68
|
-
updates of he page's main content. Just hook into it and make your layout changes:
|
77
|
+
to a different section of the page. Ajaxify provides a success callback that is triggered after successful
|
78
|
+
updates of he page's main content. Just hook into it in your javascript and make your layout changes:
|
69
79
|
|
70
80
|
Ajaxify.success ->
|
71
81
|
# update navigation and/or other layout elements
|
@@ -74,7 +84,7 @@ updates of he page's main content. Just hook into it and make your layout change
|
|
74
84
|
### Flash Messages
|
75
85
|
|
76
86
|
Ajaxify Rails correctly displays your flash messages after ajaxified requests. To do so it stores them in cookies.
|
77
|
-
By default, only flash[:notice] is supported. If you are using for example flash[:warning] as well you have to set:
|
87
|
+
By default, only `flash[:notice]` is supported. If you are using for example `flash[:warning]` as well you have to set:
|
78
88
|
|
79
89
|
Ajaxify.flash_types = ['notice', 'warning']
|
80
90
|
|
@@ -86,8 +96,11 @@ Also make sure that you supply invisible wrapper tags in your layout with the fl
|
|
86
96
|
### Links that need to trigger full Page Reloads
|
87
97
|
|
88
98
|
We all know them. Those big requests changing the layout of the page so significantly that
|
89
|
-
|
90
|
-
|
99
|
+
loading ajax into a content area and doing some minor layout tweaks here and there simply doesn't cut it. Sigh.
|
100
|
+
|
101
|
+
There might also be links and forms that have already their own ajax functionality.
|
102
|
+
|
103
|
+
To turn Ajaxify off for certain links and forms, simply add the class `no_ajaxify` directly to the link or form:
|
91
104
|
|
92
105
|
= link_to 'Change everything!', re_render_it_all_path, class: 'no_ajaxify'
|
93
106
|
|
@@ -97,22 +110,25 @@ Well, okay here is how to turn Ajaxify Rails off for certain links. Simply add t
|
|
97
110
|
Sometimes you need to redirect on the root url.
|
98
111
|
|
99
112
|
For example you might have a localized application with the locale inside the url.
|
100
|
-
When a user navigates to your_domain.com he/she gets redirected to e.g. your_domain.com/en
|
101
|
-
the html 5 history api. However, for browsers without the history api like Internet Explorer before version 10, Ajaxify
|
102
|
-
about your url structure to not get confused (it creates endless redirects otherwise!). You need to explicitly supply
|
113
|
+
When a user navigates to `your_domain.com` he/she gets redirected to e.g. `your_domain.com/en/`. This works fine in browsers supporting
|
114
|
+
the html 5 history api. However, for browsers without the history api like Internet Explorer before version 10, Ajaxify needs hints
|
115
|
+
about your url structure to not get confused (it creates endless redirects otherwise!). You need to explicitly supply all possible root
|
116
|
+
paths.
|
103
117
|
|
104
|
-
Example: if your app's root url potentially redirects to your_domain.com/en
|
118
|
+
Example: if your app's root url potentially redirects to `your_domain.com/en/` and `your_domain.com/de/`
|
105
119
|
you need to hint Ajaxyfiy like this:
|
106
120
|
|
107
|
-
Ajaxify.
|
121
|
+
Ajaxify.base_paths = ['de', 'en']
|
122
|
+
|
123
|
+
Important: `Ajaxify.base_paths` need to be set before `Ajaxify.init()` is called!
|
108
124
|
|
109
125
|
|
110
126
|
### Extra Content
|
111
127
|
|
112
128
|
Sometimes you need to do non trivial modifications of the layout whenever the content in the main content area of your site changes.
|
113
|
-
Ajaxify
|
129
|
+
Ajaxify allows you to attach arbitrary html to ajaxified requests. This extra html is then stripped from the main content
|
114
130
|
that is inserted in the content area. But before that a callback is triggered which can be used to grab the extra content and do something with it.
|
115
|
-
To use this feature you need to provide a method ajaxify_extra_content in your ApplicationController:
|
131
|
+
To use this feature you need to provide a method `ajaxify_extra_content` in your ApplicationController:
|
116
132
|
|
117
133
|
def ajaxify_extra_content
|
118
134
|
... your extra html ...
|
@@ -124,30 +140,30 @@ For example you could provide url for a widget in the layout like this:
|
|
124
140
|
"<div id='my_fancy_widget_html'> some html </div>"
|
125
141
|
end
|
126
142
|
|
127
|
-
And then, on the client side hook into Ajaxify
|
143
|
+
And then, on the client side hook into Ajaxify using the `handle_extra_content` callback and select the widget html via `#ajaxify_content`:
|
128
144
|
|
129
145
|
Ajaxify.handle_extra_content = ->
|
130
146
|
$('#my_fancy_widget').html $('#ajaxify_content #my_fancy_widget_html').html()
|
131
147
|
|
132
148
|
|
133
|
-
### Reference: All Options and Callbacks
|
149
|
+
### Reference: All Javascript Options and Callbacks
|
134
150
|
|
135
|
-
Here is a reference of all options and callbacks you can set on the client side via Ajaxify.<i>option_or_callback</i>
|
151
|
+
Here is a reference of all options and callbacks you can set on the client side via `Ajaxify.<i>option_or_callback</i> =` :
|
136
152
|
|
137
|
-
Option/Callback
|
153
|
+
Option/Callback Default Description
|
138
154
|
|
139
|
-
active
|
140
|
-
content_container
|
141
|
-
|
155
|
+
active true Toggles link ajaxification.
|
156
|
+
content_container 'main' Id of the container to insert the main content into ("yield wrapper").
|
157
|
+
base_paths null Base path segments for applications with root url redirects.
|
142
158
|
|
143
|
-
on_before_load
|
144
|
-
on_success
|
145
|
-
on_success_once
|
146
|
-
handle_extra_content
|
159
|
+
on_before_load null Callback: Called before the ajaxify request is started.
|
160
|
+
on_success null Callback: Called when an ajaxify requests finished successfully.
|
161
|
+
on_success_once null Callback: Like on_success but only called once.
|
162
|
+
handle_extra_content null Callback: Called before extra content is stripped from the ajax request's response.
|
147
163
|
|
148
|
-
flash_types
|
149
|
-
flash_effect
|
150
|
-
clear_flash_effect
|
164
|
+
flash_types ['notice'] Flash types your Rails app uses. E.g. ['notice', 'warning', 'error']
|
165
|
+
flash_effect null Callback: Called for each flash type after flash is set.
|
166
|
+
clear_flash_effect null Callback: Called for each flash type whenever flash message is not present
|
151
167
|
|
152
168
|
Also check the example app source code for usage: https://github.com/ncri/ajaxify_rails_demo_app
|
153
169
|
|
data/lib/ajaxify_rails.rb
CHANGED
@@ -36,6 +36,7 @@ module AjaxifyRails
|
|
36
36
|
end
|
37
37
|
|
38
38
|
extra_content = (respond_to?(:ajaxify_extra_content) ? ajaxify_extra_content : '')
|
39
|
+
|
39
40
|
super args
|
40
41
|
|
41
42
|
# Store current path for redirect url changes. Also used to remove the ajaxify parameter that gets added to some auto generated urls
|
@@ -5,13 +5,14 @@
|
|
5
5
|
active: true
|
6
6
|
content_container: 'main'
|
7
7
|
handle_extra_content: null
|
8
|
-
|
8
|
+
base_paths: null
|
9
9
|
|
10
10
|
# callbacks
|
11
11
|
#
|
12
12
|
on_before_load: null
|
13
13
|
on_success: null
|
14
14
|
on_success_once: null
|
15
|
+
on_before_correct_url: null
|
15
16
|
|
16
17
|
# flash
|
17
18
|
#
|
@@ -31,7 +32,7 @@
|
|
31
32
|
ajaxified: true
|
32
33
|
|
33
34
|
|
34
|
-
|
35
|
+
ajaxify: ->
|
35
36
|
|
36
37
|
if this.active
|
37
38
|
|
@@ -55,14 +56,17 @@
|
|
55
56
|
|
56
57
|
exclude_selector = ":not(.no_ajaxify):not([enctype='multipart/form-data'])"
|
57
58
|
$('body').on 'submit', "form[action^='/']#{exclude_selector},
|
58
|
-
form[action^='#{protocol_and_hostname}']#{exclude_selector}
|
59
|
+
form[action^='#{protocol_and_hostname}']#{exclude_selector},
|
60
|
+
form[action='']#{exclude_selector}", ->
|
59
61
|
|
60
62
|
$this = $(this)
|
61
63
|
form_params = $(this).serialize()
|
62
64
|
form_params += '&ajaxified=true'
|
63
65
|
|
66
|
+
action = $this.attr('action')
|
67
|
+
|
64
68
|
self.load
|
65
|
-
url:
|
69
|
+
url: if action != '' then action else '/'
|
66
70
|
data: form_params
|
67
71
|
type: $this.attr('method')
|
68
72
|
confirm: $this.data('confirm')
|
@@ -203,10 +207,27 @@
|
|
203
207
|
else
|
204
208
|
this.ignore_hash_change = true # avoids loading the page for hash changes caused by link clicks
|
205
209
|
hash = "#{options.url.replace(new RegExp(this.protocol_with_host()), '')}"
|
206
|
-
|
207
|
-
|
210
|
+
base_path_regexp = this.base_path_regexp()
|
211
|
+
if base_path_regexp
|
212
|
+
hash = hash.replace(base_path_regexp, '')
|
213
|
+
hash = "/#{hash}" unless hash == '' or hash.indexOf('/') == 0
|
208
214
|
window.location.hash = hash
|
215
|
+
this.ignore_hash_change = false
|
216
|
+
|
217
|
+
|
218
|
+
base_path_regexp: ->
|
219
|
+
return null unless this.base_paths
|
220
|
+
# match starting and ending with base path, e.g. "^\/en$" (i.e. we are at the base path root) or
|
221
|
+
# starting with base path and continuing with '/', e.g. "^\/en\/" (i.e. we are NOT at the base path root)
|
222
|
+
self = this
|
223
|
+
new RegExp("^\/(#{ $.map(this.base_paths, (el) ->
|
224
|
+
el = self.regexp_escape el
|
225
|
+
"#{el}$|#{el}\/|#{el}\\?"
|
226
|
+
).join('|')})", 'i')
|
227
|
+
|
209
228
|
|
229
|
+
regexp_escape: (str) ->
|
230
|
+
str.replace new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\-]', 'g'), '\\$&'
|
210
231
|
|
211
232
|
|
212
233
|
protocol_with_host: ->
|
@@ -215,28 +236,40 @@
|
|
215
236
|
|
216
237
|
|
217
238
|
correct_url: ->
|
218
|
-
if
|
219
|
-
if
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
if
|
227
|
-
path
|
228
|
-
if
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
239
|
+
if this.active
|
240
|
+
if window.location.hash.indexOf('#/') == 0
|
241
|
+
if !window.history.pushState
|
242
|
+
Ajaxify.load_page_from_hash = true # notify Ajaxify that a hash will be loaded and ignore all other calls to load until hash url is loaded
|
243
|
+
else
|
244
|
+
path = window.location.pathname + window.location.hash.replace(/#\//, "") # load proper url in case url contains #/ and browser supports history api
|
245
|
+
window.location.href = "#{this.protocol_with_host()}#{path}"
|
246
|
+
|
247
|
+
else if !window.history.pushState
|
248
|
+
# move path behind # for browsers without history api
|
249
|
+
if window.location.pathname != '/'
|
250
|
+
base_path_regexp = this.base_path_regexp()
|
251
|
+
if base_path_regexp and (match = window.location.pathname.match(base_path_regexp))
|
252
|
+
if match[0] == window.location.pathname
|
253
|
+
if window.location.search == ''
|
254
|
+
return
|
255
|
+
else
|
256
|
+
path = match[0].replace(/\?/,'') + '#'
|
257
|
+
else
|
258
|
+
path = "#{match[0]}##{window.location.pathname}"
|
259
|
+
else
|
260
|
+
path = "/##{window.location.pathname}"
|
261
|
+
|
262
|
+
window.location.href = "#{this.protocol_with_host()}#{path}#{window.location.search}"
|
263
|
+
else
|
264
|
+
if window.location.search != ''
|
265
|
+
window.location.href = "#{this.protocol_with_host()}/##{window.location.search}" # move search behind #
|
233
266
|
|
267
|
+
init: ->
|
268
|
+
this.correct_url()
|
234
269
|
|
235
270
|
is_string: (variable) ->
|
236
271
|
Object.prototype.toString.call(variable) == '[object String]'
|
237
272
|
|
238
273
|
|
239
|
-
Ajaxify.correct_url()
|
240
|
-
|
241
274
|
jQuery ->
|
242
|
-
Ajaxify.
|
275
|
+
Ajaxify.ajaxify()
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ajaxify_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.4
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-09-
|
12
|
+
date: 2012-09-28 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -65,7 +65,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
65
65
|
version: '0'
|
66
66
|
segments:
|
67
67
|
- 0
|
68
|
-
hash: -
|
68
|
+
hash: -1092049062637497690
|
69
69
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
70
70
|
none: false
|
71
71
|
requirements:
|
@@ -74,7 +74,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
74
74
|
version: '0'
|
75
75
|
segments:
|
76
76
|
- 0
|
77
|
-
hash: -
|
77
|
+
hash: -1092049062637497690
|
78
78
|
requirements: []
|
79
79
|
rubyforge_project:
|
80
80
|
rubygems_version: 1.8.24
|