opal-jquery 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
[![Build Status](https://secure.travis-ci.org/opal/opal-jquery.png?branch=master)](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
|