wiselinks 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/{LICENSE.txt → LICENSE} +0 -0
- data/README.md +171 -42
- data/VERSION +1 -1
- data/wiselinks.gemspec +4 -4
- metadata +5 -5
data/{LICENSE.txt → LICENSE}
RENAMED
|
File without changes
|
data/README.md
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
#Wiselinks
|
|
2
|
+
|
|
2
3
|
Wiselinks makes following links and submitting some forms in your web application faster.
|
|
3
4
|
|
|
4
5
|
You may find Wiselinks similar to [Turbolinks](https://github.com/rails/turbolinks) or [Pjax](https://github.com/defunkt/jquery-pjax), but Wiselinks have several rather important differences from both projects. We tried to make Wiselinks as easy to use as Turbolinks are but also as configurable as Pjax.
|
|
5
6
|
|
|
6
7
|
##Compatibility
|
|
8
|
+
|
|
9
|
+
Wiselinks uses awesome [History.js](https://github.com/balupton/History.js/) library to perform requests.
|
|
10
|
+
|
|
7
11
|
Wiselinks should work in all major browsers including browsers that do not support HTML History API out of the box.
|
|
8
12
|
|
|
13
|
+
|
|
9
14
|
##Installation
|
|
10
15
|
|
|
11
16
|
Add this to your Gemfile:
|
|
@@ -16,49 +21,145 @@ Then do:
|
|
|
16
21
|
|
|
17
22
|
bundle
|
|
18
23
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
#= require jquery
|
|
22
|
-
#= require wiselinks
|
|
23
|
-
|
|
24
|
-
$(document).ready ->
|
|
25
|
-
window.wiselinks = new Wiselinks()
|
|
26
|
-
|
|
27
|
-
Or more complex:
|
|
24
|
+
## How does it work?
|
|
28
25
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
26
|
+
Modify your `application.js` or `application.js.coffee` file to use Wiselinks object:
|
|
27
|
+
|
|
28
|
+
```coffeescript
|
|
29
|
+
#= require jquery
|
|
30
|
+
#= require wiselinks
|
|
31
|
+
|
|
32
|
+
$(document).ready ->
|
|
33
|
+
window.wiselinks = new Wiselinks()
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
And finally you should tell Wiselinks to process your links or forms.
|
|
37
|
+
|
|
38
|
+
Links will fire History.pushState() event.
|
|
39
|
+
Data from the request will replace content of the container that was passed to Wiselinks (default is 'body')
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<ul class="menu">
|
|
44
|
+
<li>
|
|
45
|
+
<a href="/" data-push="true">Home</a>
|
|
46
|
+
</li>
|
|
47
|
+
<li>
|
|
48
|
+
<a href="/contacts" data-push="true">Contacts</a>
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Link will fire History.replaceState() event.
|
|
54
|
+
Data from the request will replace content of the container that was passed to Wiselinks (default is 'body')
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<div class="dialog">
|
|
58
|
+
<a href="/step2" data-replace="true">Proceed to the next step</a>
|
|
59
|
+
</div>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Links will fire History.pushState() event.
|
|
63
|
+
Data from the request will be pasted into `<div role='catalog'>`. This configuration is widely when you have list of items that are paginated, sorted or maybe grouped by some attributes and you want to update only these items and nothing more on page.
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<ul class="pagination">
|
|
67
|
+
<li>
|
|
68
|
+
<span>1</span>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
<a href="/?page=2" data-push="true" data-target="@catalog">2</a>
|
|
72
|
+
</li>
|
|
73
|
+
<li>
|
|
74
|
+
<a href="/?page=3" data-push="true" data-target="@catalog">3</a>
|
|
75
|
+
</li>
|
|
76
|
+
<li>
|
|
77
|
+
<a href="/?page=4" data-push="true" data-target="@catalog">4</a>
|
|
78
|
+
</li>
|
|
79
|
+
</ul>
|
|
80
|
+
<ul class="sort">
|
|
81
|
+
<li>
|
|
82
|
+
<a href="/?sort=title" data-push="true" data-target="@catalog">Sort by Title</a>
|
|
83
|
+
</li>
|
|
84
|
+
<li>
|
|
85
|
+
<a href="/?sort=price" data-push="true" data-target="@catalog">Sort by Price</a>
|
|
86
|
+
</li>
|
|
87
|
+
</ul>
|
|
88
|
+
|
|
89
|
+
<div role="catalog">
|
|
90
|
+
<!-- the list of your items -->
|
|
91
|
+
...
|
|
92
|
+
</div
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
**You can use Wiselinks with forms**! As easy and clear as with links. After submit button is clicked, Wiselinks will perform a request to "/" with serialized form attributes. The result of this request will be pasted into `<div role='catalog'>`.
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<div class='filter'>
|
|
99
|
+
<form action="/" method="get" data-push="true" data-target="@catalog">
|
|
100
|
+
<input type="text" size="30" name="title" id="title">
|
|
101
|
+
|
|
102
|
+
<select name="scope" id="scope">
|
|
103
|
+
<option value="">All Tax Liens</option>
|
|
104
|
+
<option value="accruing">Accruing Interest</option>
|
|
105
|
+
<option value="awaiting_payment">Awaiting Payment</option>
|
|
106
|
+
<option value="closed">Closed</option>
|
|
107
|
+
<option value="trashed">Trash</option>
|
|
108
|
+
</select>
|
|
109
|
+
|
|
110
|
+
<input type="submit" value="Find" name="commit">
|
|
111
|
+
</form>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div role='catalog'>
|
|
115
|
+
<!-- the list of your items -->
|
|
116
|
+
...
|
|
117
|
+
</div
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
You can add some options, if you want:
|
|
121
|
+
|
|
122
|
+
```coffeescript
|
|
123
|
+
#= require jquery
|
|
124
|
+
#= require jquery.role
|
|
125
|
+
#= require wiselinks
|
|
126
|
+
|
|
127
|
+
$(document).ready ->
|
|
128
|
+
# DOM element with role = 'content' will be replaced after data load.
|
|
129
|
+
window.wiselinks = new Wiselinks($('@content'))
|
|
49
130
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
131
|
+
# Of course you can use more traditional jQuery selectors.
|
|
132
|
+
# window.wiselinks = new Wiselinks($('#content'))
|
|
133
|
+
# window.wiselinks = new Wiselinks($('.content:first'))
|
|
134
|
+
|
|
135
|
+
$(document).off('page:loading').on(
|
|
136
|
+
'page:loading'
|
|
137
|
+
(event, url, target, render) ->
|
|
138
|
+
console.log("Wiselinks loading: #{url} to #{target} within '#{render}'")
|
|
139
|
+
# start loading animation
|
|
140
|
+
)
|
|
141
|
+
|
|
142
|
+
$(document).off('page:success').on(
|
|
143
|
+
'page:success'
|
|
144
|
+
(event, data, status) ->
|
|
145
|
+
console.log("Wiselinks status: '#{status}'")
|
|
146
|
+
# stop loading animation
|
|
147
|
+
)
|
|
148
|
+
|
|
149
|
+
$(document).off('page:error').on(
|
|
150
|
+
'page:error'
|
|
151
|
+
(event, data, status) ->
|
|
152
|
+
console.log("Wiselinks status: '#{status}'")
|
|
153
|
+
# stop loading animation and show error message
|
|
154
|
+
)
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## Javascript Events
|
|
58
158
|
|
|
59
159
|
While using Wiselinks you **can rely** on `DOMContentLoaded` or `jQuery.ready()` to trigger your JavaScript code, but Wiselinks gives you some additional useful event to deal with the lifecycle of the page:
|
|
60
160
|
|
|
61
|
-
|
|
161
|
+
### page:loading (url, target, render = 'template')
|
|
162
|
+
|
|
62
163
|
Event is triggered before the `XMLHttpRequest` is initialized and performed.
|
|
63
164
|
* *url* - URL of the request that will be performed;
|
|
64
165
|
|
|
@@ -66,19 +167,34 @@ Event is triggered before the `XMLHttpRequest` is initialized and performed.
|
|
|
66
167
|
|
|
67
168
|
* *render = 'template'* – what should be rendered; can be 'template' or 'partial';
|
|
68
169
|
|
|
69
|
-
|
|
170
|
+
### page:success (data, status) ###
|
|
171
|
+
|
|
70
172
|
Event is triggered if the request succeeds.
|
|
71
173
|
* *data* – the data returned from the server;
|
|
72
174
|
|
|
73
175
|
* *status* – a string describing the status;
|
|
74
176
|
|
|
75
|
-
|
|
177
|
+
### page:error (status, error) ###
|
|
76
178
|
|
|
77
179
|
Event is triggered if the request fails.
|
|
78
180
|
|
|
79
181
|
* *status* – a string describing the type of error that occurred;
|
|
80
182
|
* *error* – optional exception object, if one occurred;
|
|
81
183
|
|
|
184
|
+
## ActionController::Base Methods
|
|
185
|
+
|
|
186
|
+
Wiselinks adds a couple of methods to your controller. These methods are mostly syntax sugar and don't have any complex logic, so you can use them or not.
|
|
187
|
+
|
|
188
|
+
### #wiselinks_request? ###
|
|
189
|
+
Method returns `true` if current request is initiated by Wiselinks, `false` otherwise.
|
|
190
|
+
|
|
191
|
+
### #wiselinks\_template\_request? ###
|
|
192
|
+
Method returns `true` if current request is initiated by Wiselinks and client want to render template, `false` otherwise.
|
|
193
|
+
|
|
194
|
+
### #wiselinks\_partial\_request? ###
|
|
195
|
+
Method returns `true` if current request is initiated by Wiselinks and client want to render partial, `false` otherwise.
|
|
196
|
+
|
|
197
|
+
|
|
82
198
|
##Example
|
|
83
199
|
|
|
84
200
|
We crafted small example application that uses Wiselinks so you can see it in action.
|
|
@@ -98,7 +214,20 @@ We crafted small example application that uses Wiselinks so you can see it in ac
|
|
|
98
214
|
bump version in a commit by itself I can ignore when I pull)
|
|
99
215
|
* Send me a pull request. Bonus points for topic branches.
|
|
100
216
|
|
|
101
|
-
##
|
|
217
|
+
## Credits
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
Wiselinks is maintained by [JetRockets](http://www.jetrockets.ru).
|
|
222
|
+
|
|
223
|
+
Contributors:
|
|
224
|
+
|
|
225
|
+
* [Igor Alexandrov](http://igor-alexandrov.github.com/)
|
|
226
|
+
* [Alexey Solilin](https://github.com/solilin)
|
|
227
|
+
* [Julia Egorova](https://github.com/vankiru)
|
|
228
|
+
|
|
229
|
+
## License
|
|
230
|
+
|
|
231
|
+
It is free software, and may be redistributed under the terms specified in the LICENSE file.
|
|
102
232
|
|
|
103
|
-
Copyright (c) 2012 [Igor Alexandrov](http://igor-alexandrov.github.com/), [Alexey Solilin](https://github.com/solilin) and [Julia Egorova](https://github.com/vankiru). See LICENSE for details.
|
|
104
233
|
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.1.
|
|
1
|
+
0.1.2
|
data/wiselinks.gemspec
CHANGED
|
@@ -5,21 +5,21 @@
|
|
|
5
5
|
|
|
6
6
|
Gem::Specification.new do |s|
|
|
7
7
|
s.name = "wiselinks"
|
|
8
|
-
s.version = "0.1.
|
|
8
|
+
s.version = "0.1.2"
|
|
9
9
|
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
|
11
11
|
s.authors = ["Igor Alexandrov", "Alexey Solilin", "Julia Egorova"]
|
|
12
|
-
s.date = "2012-12-
|
|
12
|
+
s.date = "2012-12-21"
|
|
13
13
|
s.email = "igor.alexandrov@gmail.com"
|
|
14
14
|
s.extra_rdoc_files = [
|
|
15
|
-
"LICENSE
|
|
15
|
+
"LICENSE",
|
|
16
16
|
"README.md"
|
|
17
17
|
]
|
|
18
18
|
s.files = [
|
|
19
19
|
".document",
|
|
20
20
|
"Gemfile",
|
|
21
21
|
"Gemfile.lock",
|
|
22
|
-
"LICENSE
|
|
22
|
+
"LICENSE",
|
|
23
23
|
"README.md",
|
|
24
24
|
"Rakefile",
|
|
25
25
|
"VERSION",
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: wiselinks
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -11,7 +11,7 @@ authors:
|
|
|
11
11
|
autorequire:
|
|
12
12
|
bindir: bin
|
|
13
13
|
cert_chain: []
|
|
14
|
-
date: 2012-12-
|
|
14
|
+
date: 2012-12-21 00:00:00.000000000 Z
|
|
15
15
|
dependencies:
|
|
16
16
|
- !ruby/object:Gem::Dependency
|
|
17
17
|
name: shoulda
|
|
@@ -82,13 +82,13 @@ email: igor.alexandrov@gmail.com
|
|
|
82
82
|
executables: []
|
|
83
83
|
extensions: []
|
|
84
84
|
extra_rdoc_files:
|
|
85
|
-
- LICENSE
|
|
85
|
+
- LICENSE
|
|
86
86
|
- README.md
|
|
87
87
|
files:
|
|
88
88
|
- .document
|
|
89
89
|
- Gemfile
|
|
90
90
|
- Gemfile.lock
|
|
91
|
-
- LICENSE
|
|
91
|
+
- LICENSE
|
|
92
92
|
- README.md
|
|
93
93
|
- Rakefile
|
|
94
94
|
- VERSION
|
|
@@ -115,7 +115,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
115
115
|
version: '0'
|
|
116
116
|
segments:
|
|
117
117
|
- 0
|
|
118
|
-
hash:
|
|
118
|
+
hash: -4399132269606173208
|
|
119
119
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
120
120
|
none: false
|
|
121
121
|
requirements:
|