opal-jquery 0.0.1
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/.gitignore +5 -0
- data/.travis.yml +8 -0
- data/Gemfile +11 -0
- data/LICENSE +19 -0
- data/README.md +297 -0
- data/Rakefile +57 -0
- data/docs/post.html +3 -0
- data/docs/pre.html +18 -0
- data/lib/opal-jquery.rb +4 -0
- data/lib/opal-jquery/document.rb +47 -0
- data/lib/opal-jquery/element.rb +380 -0
- data/lib/opal-jquery/event.rb +39 -0
- data/lib/opal-jquery/http.rb +113 -0
- data/lib/opal-jquery/kernel.rb +6 -0
- data/lib/opal-jquery/local_storage.rb +25 -0
- data/opal-jquery.gemspec +16 -0
- data/spec/data/simple.txt +1 -0
- data/spec/data/user.json +4 -0
- data/spec/document_spec.rb +91 -0
- data/spec/element/after_spec.rb +33 -0
- data/spec/element/animations_spec.rb +50 -0
- data/spec/element/append_spec.rb +36 -0
- data/spec/element/append_to_spec.rb +25 -0
- data/spec/element/at_spec.rb +41 -0
- data/spec/element/attributes_spec.rb +202 -0
- data/spec/element/before_spec.rb +33 -0
- data/spec/element/class_name_spec.rb +82 -0
- data/spec/element/css_spec.rb +52 -0
- data/spec/element/display_spec.rb +45 -0
- data/spec/element/inspect_spec.rb +26 -0
- data/spec/element/length_spec.rb +5 -0
- data/spec/element/traversing_spec.rb +150 -0
- data/spec/element_spec.rb +107 -0
- data/spec/event_spec.rb +66 -0
- data/spec/http_spec.rb +49 -0
- data/spec/index.html +13 -0
- data/spec/local_storage_spec.rb +51 -0
- data/spec/spec_helper.rb +1 -0
- data/vendor/jquery.js +4 -0
- metadata +105 -0
data/.gitignore
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
Copyright (C) 2012 by Adam Beynon
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
5
|
+
in the Software without restriction, including without limitation the rights
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
8
|
+
furnished to do so, subject to the following conditions:
|
9
|
+
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
11
|
+
all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
19
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,297 @@
|
|
1
|
+
# opal-jquery
|
2
|
+
|
3
|
+
[](http://travis-ci.org/opal/opal-jquery)
|
4
|
+
|
5
|
+
opal-jquery provides DOM access to opal by wrapping jQuery (or zepto)
|
6
|
+
and providing a nice ruby syntax for dealing with jQuery instances.
|
7
|
+
opal-jquery is [hosted on github](http://github.com/opal/opal-jquery).
|
8
|
+
|
9
|
+
jQuery instances are toll-free bridged to instances of the ruby class
|
10
|
+
`JQuery`, so they can be used interchangeably. The `Document` module also
|
11
|
+
exists, which provides the simple top level css selector method:
|
12
|
+
|
13
|
+
```ruby
|
14
|
+
elements = Document['.foo']
|
15
|
+
# => [<div class="foo">, ...]
|
16
|
+
|
17
|
+
elements.class
|
18
|
+
# => JQuery
|
19
|
+
|
20
|
+
elements.on(:click) do
|
21
|
+
alert "element was clicked"
|
22
|
+
end
|
23
|
+
```
|
24
|
+
|
25
|
+
### Getting Started
|
26
|
+
|
27
|
+
#### Installation
|
28
|
+
|
29
|
+
Install opal-jquery from RubyGems:
|
30
|
+
|
31
|
+
```
|
32
|
+
$ gem install opal-jquery
|
33
|
+
```
|
34
|
+
|
35
|
+
Or include it in your Gemfile for Bundler:
|
36
|
+
|
37
|
+
```ruby
|
38
|
+
gem 'opal-jquery'
|
39
|
+
```
|
40
|
+
|
41
|
+
### Interacting with the DOM
|
42
|
+
|
43
|
+
#### Finding elements
|
44
|
+
|
45
|
+
opal-jquery provides the `Document` module, which is the best way to
|
46
|
+
find elements by CSS selector:
|
47
|
+
|
48
|
+
```ruby
|
49
|
+
Document['#header']
|
50
|
+
```
|
51
|
+
|
52
|
+
This method acts just like `$('selector')`, and can use any jQuery
|
53
|
+
compatible selector:
|
54
|
+
|
55
|
+
```ruby
|
56
|
+
Document['#navigation li:last']
|
57
|
+
```
|
58
|
+
|
59
|
+
The result is just a jQuery instance, which is toll-free bridged to
|
60
|
+
instances of the `Element` class in ruby:
|
61
|
+
|
62
|
+
```ruby
|
63
|
+
Document['.foo'].class
|
64
|
+
# => Element
|
65
|
+
```
|
66
|
+
|
67
|
+
Instances of `Element` also have the `#find` method available for
|
68
|
+
finding elements within the scope of each DOM node represented by
|
69
|
+
the instance:
|
70
|
+
|
71
|
+
```ruby
|
72
|
+
el = Document['#header']
|
73
|
+
el.find '.foo'
|
74
|
+
# => #<Element .... >
|
75
|
+
```
|
76
|
+
|
77
|
+
#### Running code on document ready
|
78
|
+
|
79
|
+
Just like jQuery, opal-jquery requires the document to be ready to
|
80
|
+
be able to fully interact with the page. Any top level access should
|
81
|
+
use the `ready?` method:
|
82
|
+
|
83
|
+
```ruby
|
84
|
+
Document.ready? do
|
85
|
+
alert "document is ready to go!"
|
86
|
+
end
|
87
|
+
```
|
88
|
+
|
89
|
+
The `Kernel#alert` method is shown above too.
|
90
|
+
|
91
|
+
#### Event handling
|
92
|
+
|
93
|
+
The `Element#on` method is used to attach event handlers to elements:
|
94
|
+
|
95
|
+
```ruby
|
96
|
+
Document['#header'].on :click do
|
97
|
+
puts "The header was clicked!"
|
98
|
+
end
|
99
|
+
```
|
100
|
+
|
101
|
+
Selectors can also be passed as a second argument to handle events
|
102
|
+
on certain children:
|
103
|
+
|
104
|
+
```ruby
|
105
|
+
Document['#header'].on(:click, '.foo') do
|
106
|
+
puts "An element with a 'foo' class was clicked"
|
107
|
+
end
|
108
|
+
```
|
109
|
+
|
110
|
+
An `Event` instance is optionally passed to block handlers as well,
|
111
|
+
which is toll-free bridged to jquery events:
|
112
|
+
|
113
|
+
```ruby
|
114
|
+
Document['#my_link'].on(:click) do |evt|
|
115
|
+
evt.stop_propagation
|
116
|
+
puts "stopped the event!"
|
117
|
+
end
|
118
|
+
```
|
119
|
+
|
120
|
+
#### CSS styles and classnames
|
121
|
+
|
122
|
+
The various jQuery methods are available on `Element` instances:
|
123
|
+
|
124
|
+
```ruby
|
125
|
+
foo = Document['.foo']
|
126
|
+
|
127
|
+
foo.add_class 'blue'
|
128
|
+
foo.remove_class 'foo'
|
129
|
+
foo.toggle_class 'selected'
|
130
|
+
```
|
131
|
+
|
132
|
+
There are also added convenience methods for opal-jquery:
|
133
|
+
|
134
|
+
```ruby
|
135
|
+
foo = Document['#header']
|
136
|
+
|
137
|
+
foo.class_name
|
138
|
+
# => 'red lorry'
|
139
|
+
|
140
|
+
foo.class_name = 'yellow house'
|
141
|
+
|
142
|
+
foo.class_name
|
143
|
+
# => 'yellow house'
|
144
|
+
```
|
145
|
+
|
146
|
+
`Element#css` also exists for getting/setting css styles:
|
147
|
+
|
148
|
+
```ruby
|
149
|
+
el = Document['#container']
|
150
|
+
el.css 'color', 'blue'
|
151
|
+
el.css 'color'
|
152
|
+
# => 'blue'
|
153
|
+
```
|
154
|
+
|
155
|
+
### HTTP/AJAX requests
|
156
|
+
|
157
|
+
jQuery's Ajax implementation is also wrapped in the top level HTTP
|
158
|
+
class.
|
159
|
+
|
160
|
+
```ruby
|
161
|
+
HTTP.get("/users/1.json") do |response|
|
162
|
+
puts response.body
|
163
|
+
# => "{\"name\": \"Adam Beynon\"}"
|
164
|
+
end
|
165
|
+
```
|
166
|
+
|
167
|
+
The block passed to this method is used as the handler when the request
|
168
|
+
succeeds, as well as when it fails. To determine whether the request
|
169
|
+
was successful, use the `ok?` method:
|
170
|
+
|
171
|
+
```ruby
|
172
|
+
HTTP.get("/users/2.json") do |response|
|
173
|
+
if response.ok?
|
174
|
+
alert "successful!"
|
175
|
+
else
|
176
|
+
alert "request failed :("
|
177
|
+
end
|
178
|
+
end
|
179
|
+
```
|
180
|
+
|
181
|
+
It is also possible to use a different handler for each case:
|
182
|
+
|
183
|
+
```ruby
|
184
|
+
request = HTTP.get("/users/3.json")
|
185
|
+
|
186
|
+
request.callback {
|
187
|
+
puts "Request worked!"
|
188
|
+
}
|
189
|
+
|
190
|
+
request.errback {
|
191
|
+
puts "Request didn't work :("
|
192
|
+
}
|
193
|
+
```
|
194
|
+
|
195
|
+
The request is actually triggered inside the `HTTP.get` method, but due
|
196
|
+
to the async nature of the request, the callback and errback handlers can
|
197
|
+
be added anytime before the request returns.
|
198
|
+
|
199
|
+
#### Handling responses
|
200
|
+
|
201
|
+
Web apps deal with JSON responses quite frequently, so there is a useful
|
202
|
+
`#json` helper method to get the JSON content from a request:
|
203
|
+
|
204
|
+
```ruby
|
205
|
+
HTTP.get("/users.json") do |response|
|
206
|
+
puts response.body
|
207
|
+
puts response.json
|
208
|
+
end
|
209
|
+
|
210
|
+
# => "[{\"name\": \"Adam\"},{\"name\": \"Ben\"}]"
|
211
|
+
# => [{"name" => "Adam"}, {"name" => "Ben"}]
|
212
|
+
```
|
213
|
+
|
214
|
+
The `#body` method will always return the raw response string.
|
215
|
+
|
216
|
+
If an error is encountered, then the `#status_code` method will hold the
|
217
|
+
specific error code from the underlying request:
|
218
|
+
|
219
|
+
```ruby
|
220
|
+
request = HTTP.get("/users/3.json")
|
221
|
+
|
222
|
+
request.callback { puts "it worked!" }
|
223
|
+
|
224
|
+
request.errback { |response|
|
225
|
+
puts "failed with status #{response.status_code}"
|
226
|
+
}
|
227
|
+
```
|
228
|
+
|
229
|
+
opal-jquery provides DOM access to opal by wrapping jQuery
|
230
|
+
and providing a nice ruby syntax for dealing with jQuery instances.
|
231
|
+
opal-jquery is [hosted on github](http://github.com/opal/opal-jquery).
|
232
|
+
|
233
|
+
See the [website for documentation](http://opal.github.com/opal-jquery).
|
234
|
+
|
235
|
+
### Running Specs
|
236
|
+
|
237
|
+
Get the dependencies:
|
238
|
+
|
239
|
+
$ bundle install
|
240
|
+
|
241
|
+
You will need phantomjs to run the specs outside the browser. It can
|
242
|
+
be downloaded at [http://phantomjs.org/download.html](http://phantomjs.org/download.html)
|
243
|
+
|
244
|
+
On osx you can install through homebrew
|
245
|
+
|
246
|
+
$ brew update; brew install phantomjs
|
247
|
+
|
248
|
+
Build dependencies, opal-jquery and it's specs into `build/`:
|
249
|
+
|
250
|
+
$ rake opal
|
251
|
+
|
252
|
+
Run the tests inside a phantom.js runner:
|
253
|
+
|
254
|
+
$ rake
|
255
|
+
|
256
|
+
You can also run the tests in the browser by opening spec/index.html.
|
257
|
+
|
258
|
+
### Development Tips
|
259
|
+
|
260
|
+
The following rake task are pertinent to adding/changing
|
261
|
+
functionality.
|
262
|
+
|
263
|
+
* opal - builds the following js files:
|
264
|
+
* opal-jquery - opal jquery
|
265
|
+
* opal.js - the opal runtime
|
266
|
+
* opal-spec.js - opal spec framework
|
267
|
+
* specs.js - the spec
|
268
|
+
* opal:test - runs the specs. It is the default rake task
|
269
|
+
|
270
|
+
If you TDD, you may want to run
|
271
|
+
|
272
|
+
$ rake opal opal:test
|
273
|
+
|
274
|
+
Or use a guard script that does similar
|
275
|
+
|
276
|
+
|
277
|
+
### License
|
278
|
+
|
279
|
+
Copyright (C) 2012 by Adam Beynon
|
280
|
+
|
281
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
282
|
+
of this software and associated documentation files (the "Software"), to deal
|
283
|
+
in the Software without restriction, including without limitation the rights
|
284
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
285
|
+
copies of the Software, and to permit persons to whom the Software is
|
286
|
+
furnished to do so, subject to the following conditions:
|
287
|
+
|
288
|
+
The above copyright notice and this permission notice shall be included in
|
289
|
+
all copies or substantial portions of the Software.
|
290
|
+
|
291
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
292
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
293
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
294
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
295
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
296
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
297
|
+
THE SOFTWARE.
|
data/Rakefile
ADDED
@@ -0,0 +1,57 @@
|
|
1
|
+
require 'bundler/setup'
|
2
|
+
require 'opal/rake_task'
|
3
|
+
|
4
|
+
Opal::RakeTask.new do |t|
|
5
|
+
t.name = 'opal-jquery'
|
6
|
+
t.dependencies = ['opal-spec']
|
7
|
+
end
|
8
|
+
|
9
|
+
task :default => :'opal:test'
|
10
|
+
|
11
|
+
namespace :docs do
|
12
|
+
desc "Build docs"
|
13
|
+
task :build do
|
14
|
+
require 'redcarpet'
|
15
|
+
require 'albino'
|
16
|
+
|
17
|
+
klass = Class.new(Redcarpet::Render::HTML) do
|
18
|
+
def block_code(code, language)
|
19
|
+
Albino.new(code, language || :text).colorize
|
20
|
+
end
|
21
|
+
end
|
22
|
+
|
23
|
+
markdown = Redcarpet::Markdown.new(klass, :fenced_code_blocks => true)
|
24
|
+
|
25
|
+
File.open('gh-pages/index.html', 'w+') do |o|
|
26
|
+
puts " * index.html"
|
27
|
+
# remove first 2 lines (header/build status), as pre.html has a docs version
|
28
|
+
src = File.read("README.md").sub(/^(?:[^\n]*\n){4}/, '')
|
29
|
+
|
30
|
+
o.write File.read('docs/pre.html')
|
31
|
+
o.write markdown.render(src)
|
32
|
+
o.write File.read('docs/post.html')
|
33
|
+
end
|
34
|
+
end
|
35
|
+
|
36
|
+
desc "Clone repo"
|
37
|
+
task :clone do
|
38
|
+
if File.exists? 'gh-pages'
|
39
|
+
Dir.chdir('gh-pages') { sh 'git pull origin gh-pages' }
|
40
|
+
else
|
41
|
+
FileUtils.mkdir_p 'gh-pages'
|
42
|
+
Dir.chdir('gh-pages') do
|
43
|
+
sh 'git clone git@github.com:/opal/opal-jquery.git .'
|
44
|
+
sh 'git checkout gh-pages'
|
45
|
+
end
|
46
|
+
end
|
47
|
+
end
|
48
|
+
|
49
|
+
desc "commit and push"
|
50
|
+
task :push do
|
51
|
+
Dir.chdir('gh-pages') do
|
52
|
+
sh "git add ."
|
53
|
+
sh "git commit -a -m \"Documentation update #{Time.new}\""
|
54
|
+
sh "git push origin gh-pages"
|
55
|
+
end
|
56
|
+
end
|
57
|
+
end
|
data/docs/post.html
ADDED
data/docs/pre.html
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>opal-jquery</title>
|
5
|
+
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
|
6
|
+
<link rel="stylesheet" href="css/pygment_trac.css" type="text/css">
|
7
|
+
<style>
|
8
|
+
body {
|
9
|
+
padding-top: 42px;
|
10
|
+
}
|
11
|
+
</style>
|
12
|
+
</head>
|
13
|
+
<body>
|
14
|
+
<a href="https://github.com/opal/opal-jquery"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
15
|
+
<div class="container">
|
16
|
+
<div class="page-header">
|
17
|
+
<h1>opal-jquery <small>jquery wrapper for opal</small></h1>
|
18
|
+
</div>
|
data/lib/opal-jquery.rb
ADDED
@@ -0,0 +1,47 @@
|
|
1
|
+
module Document
|
2
|
+
def self.[](selector)
|
3
|
+
`$(#{selector})`
|
4
|
+
end
|
5
|
+
|
6
|
+
def self.find(selector)
|
7
|
+
self[selector]
|
8
|
+
end
|
9
|
+
|
10
|
+
def self.id(id)
|
11
|
+
%x{
|
12
|
+
var el = document.getElementById(id);
|
13
|
+
|
14
|
+
if (!el) {
|
15
|
+
return nil;
|
16
|
+
}
|
17
|
+
|
18
|
+
return $(el);
|
19
|
+
}
|
20
|
+
end
|
21
|
+
|
22
|
+
def self.parse(str)
|
23
|
+
`$(str)`
|
24
|
+
end
|
25
|
+
|
26
|
+
def self.ready?(&block)
|
27
|
+
%x{
|
28
|
+
if (block === nil) {
|
29
|
+
return nil;
|
30
|
+
}
|
31
|
+
|
32
|
+
$(function() {
|
33
|
+
#{ block.call };
|
34
|
+
});
|
35
|
+
|
36
|
+
return nil;
|
37
|
+
}
|
38
|
+
end
|
39
|
+
|
40
|
+
def self.title
|
41
|
+
`document.title`
|
42
|
+
end
|
43
|
+
|
44
|
+
def self.title=(title)
|
45
|
+
`document.title = title`
|
46
|
+
end
|
47
|
+
end
|