ajaxify_rails 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +132 -6
- data/lib/ajaxify_rails.rb +9 -3
- data/lib/ajaxify_rails/version.rb +1 -1
- data/vendor/assets/javascripts/ajaxify_rails/ajaxify_rails.js.coffee +43 -30
- metadata +3 -3
data/README.md
CHANGED
@@ -1,10 +1,21 @@
|
|
1
|
-
#
|
1
|
+
# Ajaxify Rails
|
2
2
|
|
3
|
-
|
3
|
+
No more full page reloads for your Rails app! Yay!
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
Automatically makes your app loading content in the background via ajax.
|
6
|
+
|
7
|
+
Works by turning all internal links into ajax links that trigger an update of the page's content area.
|
8
|
+
|
9
|
+
Features:
|
10
|
+
|
11
|
+
- Uses the html5 history interface for changing the url and making the browser's back and forward buttons work with ajax.
|
12
|
+
- Falls back to a hash based approach for browsers without the history interface (like Internet Explorer version <10)
|
13
|
+
- Hash based and non-hash URLs are interchangeable.
|
14
|
+
- Transparently handles redirects and supports page titles and flash messages.
|
15
|
+
- Requires Ruby 1.9 and the asset pipeline.
|
16
|
+
- Tested with Chrome, Firefox, Safari and Internet Explorer 8+
|
17
|
+
|
18
|
+
Demo: http://ajaxify-demo.herokuapp.com/
|
8
19
|
|
9
20
|
Inspired by the pjax_rails gem (https://github.com/rails/pjax_rails)
|
10
21
|
|
@@ -24,6 +35,121 @@ In your application.js file add:
|
|
24
35
|
|
25
36
|
## Usage
|
26
37
|
|
38
|
+
### Content Area
|
39
|
+
|
40
|
+
Ajaxify Rails assumes that your app has a content container html tag with the id 'main'.
|
41
|
+
This tag is the container wrapping the yield statement in your layout.
|
42
|
+
If yield doesn't have a wrapper in your app yet, you need to supply one to get ajaxification working:
|
43
|
+
|
44
|
+
#main
|
45
|
+
= yield
|
46
|
+
|
47
|
+
You can change the content wrapper by setting
|
48
|
+
|
49
|
+
Ajaxify.content_container = 'content_container_id'
|
50
|
+
|
51
|
+
### Loader Animation
|
52
|
+
|
53
|
+
You probably like to have a loader image to be displayed to the user while content loads via ajax.
|
54
|
+
This is simple. Ajaxify Rails automatically inserts a loader div with the class ajaxify_loader into
|
55
|
+
the content wrapper before starting an ajax request. So just supply styles for .ajaxify_loader in your css, with an
|
56
|
+
animated gif as a background.
|
57
|
+
|
58
|
+
|
59
|
+
### Page Title
|
60
|
+
|
61
|
+
If you define a method called 'page_title' in your application controller, Ajaxify Rails will automatically
|
62
|
+
update the page's title tag after the main content has changed.
|
63
|
+
|
64
|
+
### Navigation and other Layout Updates
|
65
|
+
|
66
|
+
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 Rails provides a success callback that is triggered after successful
|
68
|
+
updates of he page's main content. Just hook into it and make your layout changes:
|
69
|
+
|
70
|
+
Ajaxify.success ->
|
71
|
+
# update navigation and/or other layout elements
|
72
|
+
|
73
|
+
|
74
|
+
### Flash Messages
|
75
|
+
|
76
|
+
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:
|
78
|
+
|
79
|
+
Ajaxify.flash_types = ['notice', 'warning']
|
80
|
+
|
81
|
+
Also make sure that you supply invisible wrapper tags in your layout with the flash type as its id, e.g.:
|
82
|
+
|
83
|
+
#notice{ style: "#{'display:none' unless flash[:notice]}" }
|
84
|
+
= flash[:notice]
|
85
|
+
|
86
|
+
### Links that need to trigger full Page Reloads
|
87
|
+
|
88
|
+
We all know them. Those big requests changing the layout of the page so significantly that
|
89
|
+
simply loading ajax into a content area and doing some minor layout tweaks here and there simply doesn't cut it. Sigh.
|
90
|
+
Well, okay here is how to turn Ajaxify Rails off for certain links. Simply add the class no_ajaxify directly to the link:
|
91
|
+
|
92
|
+
= link_to 'Change everything!', re_render_it_all_path, class: 'no_ajaxify'
|
93
|
+
|
94
|
+
|
95
|
+
### Root Redirects
|
96
|
+
|
97
|
+
Sometimes you need to redirect on the root url.
|
98
|
+
|
99
|
+
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/. This works fine in browsers supporting
|
101
|
+
the html 5 history api. However, for browsers without the history api like Internet Explorer before version 10, Ajaxify Rails needs hints
|
102
|
+
about your url structure to not get confused (it creates endless redirects otherwise!). You need to explicitly supply some regex.
|
103
|
+
|
104
|
+
Example: if your app's root url potentially redirects to your_domain.com/en/ and your_domain.com/de/
|
105
|
+
you need to hint Ajaxyfiy like this:
|
106
|
+
|
107
|
+
Ajaxify.base_path_regexp = /^(\/en|\/de)/i
|
108
|
+
|
109
|
+
|
110
|
+
### Extra Content
|
111
|
+
|
112
|
+
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 Rails allows you to attach arbitrary html to ajaxified requests. This extra html is then stripped from the main content
|
114
|
+
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:
|
116
|
+
|
117
|
+
def ajaxify_extra_content
|
118
|
+
... your extra html ...
|
119
|
+
end
|
120
|
+
|
121
|
+
For example you could provide url for a widget in the layout like this:
|
122
|
+
|
123
|
+
def ajaxify_extra_content
|
124
|
+
"<div id='my_fancy_widget_html'> some html </div>"
|
125
|
+
end
|
126
|
+
|
127
|
+
And then, on the client side hook into Ajaxify via the handle_extra_content callback and select the widget html via #ajaxify_content:
|
128
|
+
|
129
|
+
Ajaxify.handle_extra_content = ->
|
130
|
+
$('#my_fancy_widget').html $('#ajaxify_content #my_fancy_widget_html').html()
|
131
|
+
|
132
|
+
|
133
|
+
### Reference: All Options and Callbacks
|
134
|
+
|
135
|
+
Here is a reference of all options and callbacks you can set on the client side via Ajaxify.<i>option_or_callback</i> = :
|
136
|
+
|
137
|
+
Option/Callback Default Description
|
138
|
+
|
139
|
+
active true Toggles link ajaxification.
|
140
|
+
content_container 'main' Id of the container to insert the main content into ("yield wrapper").
|
141
|
+
base_path_regexp null Regex hint for applications with root url redirects.
|
142
|
+
|
143
|
+
on_before_load null Callback: Called before the ajaxify request is started.
|
144
|
+
on_success null Callback: Called when an ajaxify requests finished successfully.
|
145
|
+
on_success_once null Callback: Like on_success but only called once.
|
146
|
+
handle_extra_content null Callback: Called before extra content is stripped from the ajax request's response.
|
147
|
+
|
148
|
+
flash_types ['notice'] Flash types your Rails app uses. E.g. ['notice', 'warning', 'error']
|
149
|
+
flash_effect null Callback: Called for each flash type after flash is set.
|
150
|
+
clear_flash_effect null Callback: Called for each flash type whenever flash message is not present
|
151
|
+
|
152
|
+
Also check the example app source code for usage: https://github.com/ncri/ajaxify_rails_demo_app
|
27
153
|
|
28
154
|
|
29
155
|
## Contributing
|
@@ -32,4 +158,4 @@ In your application.js file add:
|
|
32
158
|
2. Create your feature branch (`git checkout -b my-new-feature`)
|
33
159
|
3. Commit your changes (`git commit -am 'Added some feature'`)
|
34
160
|
4. Push to the branch (`git push origin my-new-feature`)
|
35
|
-
5. Create new Pull Request
|
161
|
+
5. Create new Pull Request
|
data/lib/ajaxify_rails.rb
CHANGED
@@ -29,8 +29,12 @@ module AjaxifyRails
|
|
29
29
|
layout = args[:layout] || current_layout
|
30
30
|
layout = (layout == 'application' or layout == true) ? false : layout
|
31
31
|
args[:layout] = layout
|
32
|
-
|
33
|
-
flash
|
32
|
+
|
33
|
+
flash.keys.each do |key|
|
34
|
+
cookies["flash_#{key}"] = flash[key]
|
35
|
+
flash[key] = nil
|
36
|
+
end
|
37
|
+
|
34
38
|
extra_content = (respond_to?(:ajaxify_extra_content) ? ajaxify_extra_content : '')
|
35
39
|
super args
|
36
40
|
|
@@ -39,8 +43,10 @@ module AjaxifyRails
|
|
39
43
|
#
|
40
44
|
current_url_tag = view_context.content_tag(:span, request.fullpath.sub(/\?ajaxified=true&(.*)/, '?\1').sub(/(&|\?)ajaxified=true/, ''),
|
41
45
|
id: 'ajaxify_location')
|
46
|
+
|
42
47
|
response_body[0] += view_context.content_tag(:div, current_url_tag + extra_content,
|
43
|
-
id: 'ajaxify_content', style: 'display:none',
|
48
|
+
id: 'ajaxify_content', style: 'display:none',
|
49
|
+
data: { page_title: respond_to?(:page_title) ? page_title : nil })
|
44
50
|
response.body = self.response_body[0]
|
45
51
|
return
|
46
52
|
end
|
@@ -1,19 +1,30 @@
|
|
1
1
|
@Ajaxify =
|
2
2
|
|
3
|
+
# options
|
4
|
+
#
|
5
|
+
active: true
|
3
6
|
content_container: 'main'
|
7
|
+
handle_extra_content: null
|
8
|
+
base_path_regexp: null
|
9
|
+
|
10
|
+
# callbacks
|
11
|
+
#
|
4
12
|
on_before_load: null
|
5
13
|
on_success: null
|
6
14
|
on_success_once: null
|
7
|
-
hash_changed: null
|
8
|
-
ignore_hash_change: null
|
9
|
-
load_page_from_hash: null
|
10
|
-
handle_extra_content: null
|
11
|
-
base_path_regexp: null
|
12
15
|
|
16
|
+
# flash
|
17
|
+
#
|
13
18
|
flash_types: ['notice']
|
14
19
|
flash_effect: null
|
15
20
|
clear_flash_effect: null
|
16
21
|
|
22
|
+
# internal use only
|
23
|
+
#
|
24
|
+
hash_changed: null
|
25
|
+
ignore_hash_change: null
|
26
|
+
load_page_from_hash: null
|
27
|
+
|
17
28
|
initial_history_state:
|
18
29
|
url: window.location.href
|
19
30
|
data:
|
@@ -22,39 +33,41 @@
|
|
22
33
|
|
23
34
|
init: ->
|
24
35
|
|
25
|
-
if this.
|
26
|
-
this.load_page_from_hash = false
|
27
|
-
this.on_hash_change()
|
36
|
+
if this.active
|
28
37
|
|
29
|
-
|
38
|
+
if this.load_page_from_hash
|
39
|
+
this.load_page_from_hash = false
|
40
|
+
this.on_hash_change()
|
41
|
+
|
42
|
+
self = this
|
30
43
|
|
31
|
-
|
44
|
+
protocol_and_hostname = "#{window.location.protocol}//#{window.location.hostname}"
|
32
45
|
|
33
|
-
|
46
|
+
$('body').on 'click', "a[href^='/']:not(.no_ajaxify), a[href^='#{protocol_and_hostname}']:not(.no_ajaxify)", ->
|
34
47
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
48
|
+
$this = $(this)
|
49
|
+
self.load
|
50
|
+
url: $this.attr('href')
|
51
|
+
type: $this.data('method')
|
52
|
+
confirm: $this.data('confirm')
|
40
53
|
|
41
|
-
|
54
|
+
false
|
42
55
|
|
43
|
-
|
44
|
-
|
45
|
-
|
56
|
+
exclude_selector = ":not(.no_ajaxify):not([enctype='multipart/form-data'])"
|
57
|
+
$('body').on 'submit', "form[action^='/']#{exclude_selector},
|
58
|
+
form[action^='#{protocol_and_hostname}']#{exclude_selector}", ->
|
46
59
|
|
47
|
-
|
48
|
-
|
49
|
-
|
60
|
+
$this = $(this)
|
61
|
+
form_params = $(this).serialize()
|
62
|
+
form_params += '&ajaxified=true'
|
50
63
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
64
|
+
self.load
|
65
|
+
url: $this.attr('action')
|
66
|
+
data: form_params
|
67
|
+
type: $this.attr('method')
|
68
|
+
confirm: $this.data('confirm')
|
56
69
|
|
57
|
-
|
70
|
+
false
|
58
71
|
|
59
72
|
|
60
73
|
window.onpopstate = (e) ->
|
@@ -155,7 +168,7 @@
|
|
155
168
|
|
156
169
|
$("##{this.content_container} #ajaxify_content").remove()
|
157
170
|
|
158
|
-
if title
|
171
|
+
if title
|
159
172
|
document.title = title.replace /&/, '&' # Todo: need to figure out what else needs to be unescaped
|
160
173
|
|
161
174
|
this.show_flash()
|
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.2
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -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: -4267286342306051079
|
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: -4267286342306051079
|
78
78
|
requirements: []
|
79
79
|
rubyforge_project:
|
80
80
|
rubygems_version: 1.8.24
|