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.
@@ -0,0 +1,5 @@
1
+ .DS_Store
2
+ *.gem
3
+ Gemfile.lock
4
+ build
5
+ gh-pages
@@ -0,0 +1,8 @@
1
+ language: ruby
2
+
3
+ rvm:
4
+ - 1.8.7
5
+ - 1.9.3
6
+
7
+ before_script:
8
+ - "bundle exec rake opal"
data/Gemfile ADDED
@@ -0,0 +1,11 @@
1
+ source :rubygems
2
+
3
+ gem 'rake'
4
+
5
+ gem 'opal', :git => 'git://github.com/opal/opal.git'
6
+ gem 'opal-spec', :git => 'git://github.com/opal/opal-spec.git'
7
+
8
+ group :docs do
9
+ gem 'redcarpet'
10
+ gem 'albino'
11
+ end
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.
@@ -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.
@@ -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
@@ -0,0 +1,3 @@
1
+ </div>
2
+ </body>
3
+ </html>
@@ -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>
@@ -0,0 +1,4 @@
1
+ require 'opal-jquery/document'
2
+ require 'opal-jquery/element'
3
+ require 'opal-jquery/kernel'
4
+ require 'opal-jquery/http'
@@ -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