ajaxify_rails 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md CHANGED
@@ -1,10 +1,21 @@
1
- # Nested Form Fields
1
+ # Ajaxify Rails
2
2
 
3
- Rails gem for automatically turning internal links into ajax links that load content without a full page reload.
3
+ No more full page reloads for your Rails app! Yay!
4
4
 
5
- Uses the html5 history interface for changing the url and making the browser's back and forward buttons working with ajax.
6
- Falls back to a hash based approach for browsers without the history interface (like Internet Explorer).
7
- Transparently handles redirects and supports flash messages and page titles. Requires Ruby 1.9 and the asset pipeline.
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
- cookies[:flash_notice] = flash[:notice] # make customizable
33
- flash[:notice] = nil
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', data: { page_title: try(:page_title) })
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,3 +1,3 @@
1
1
  module AjaxifyRails
2
- VERSION = "0.0.1"
2
+ VERSION = "0.0.2"
3
3
  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.load_page_from_hash
26
- this.load_page_from_hash = false
27
- this.on_hash_change()
36
+ if this.active
28
37
 
29
- self = this
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
- protocol_and_hostname = "#{window.location.protocol}//#{window.location.hostname}"
44
+ protocol_and_hostname = "#{window.location.protocol}//#{window.location.hostname}"
32
45
 
33
- $('body').on 'click', "a[href^='/']:not(.no_ajaxify), a[href^='#{protocol_and_hostname}']:not(.no_ajaxify)", ->
46
+ $('body').on 'click', "a[href^='/']:not(.no_ajaxify), a[href^='#{protocol_and_hostname}']:not(.no_ajaxify)", ->
34
47
 
35
- $this = $(this)
36
- self.load
37
- url: $this.attr('href')
38
- type: $this.data('method')
39
- confirm: $this.data('confirm')
48
+ $this = $(this)
49
+ self.load
50
+ url: $this.attr('href')
51
+ type: $this.data('method')
52
+ confirm: $this.data('confirm')
40
53
 
41
- false
54
+ false
42
55
 
43
- exclude_selector = ":not(.no_ajaxify):not([enctype='multipart/form-data'])"
44
- $('body').on 'submit', "form[action^='/']#{exclude_selector},
45
- form[action^='#{protocol_and_hostname}']#{exclude_selector}", ->
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
- $this = $(this)
48
- form_params = $(this).serialize()
49
- form_params += '&ajaxified=true'
60
+ $this = $(this)
61
+ form_params = $(this).serialize()
62
+ form_params += '&ajaxified=true'
50
63
 
51
- self.load
52
- url: $this.attr('action')
53
- data: form_params
54
- type: $this.attr('method')
55
- confirm: $this.data('confirm')
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
- false
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 /&amp;/, '&' # 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.1
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: -44075291166774192
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: -44075291166774192
77
+ hash: -4267286342306051079
78
78
  requirements: []
79
79
  rubyforge_project:
80
80
  rubygems_version: 1.8.24