opal-browser 0.2.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.github/workflows/build.yml +95 -0
- data/.gitignore +2 -0
- data/Gemfile +17 -3
- data/LICENSE +2 -1
- data/README.md +116 -54
- data/Rakefile +29 -1
- data/config.ru +20 -3
- data/docs/polyfills.md +24 -0
- data/examples/2048/Gemfile +7 -0
- data/examples/2048/README.md +13 -0
- data/examples/2048/app/application.rb +169 -0
- data/examples/2048/config.ru +9 -0
- data/examples/canvas/Gemfile +7 -0
- data/examples/canvas/README.md +9 -0
- data/examples/canvas/app/application.rb +55 -0
- data/examples/canvas/config.ru +9 -0
- data/examples/component/Gemfile +7 -0
- data/examples/component/README.md +10 -0
- data/examples/component/app/application.rb +66 -0
- data/examples/component/config.ru +9 -0
- data/examples/integrations/README.md +24 -0
- data/examples/integrations/dynamic-rack-opal-sprockets-server/Gemfile +7 -0
- data/examples/integrations/dynamic-rack-opal-sprockets-server/README.md +16 -0
- data/examples/integrations/dynamic-rack-opal-sprockets-server/app/application.rb +6 -0
- data/examples/integrations/dynamic-rack-opal-sprockets-server/config.ru +9 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/.gitignore +1 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/Gemfile +8 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/README.md +22 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/Rakefile +4 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/app/application.rb +6 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/app.rb +32 -0
- data/examples/integrations/dynamic-roda-roda-sprockets/config.ru +3 -0
- data/examples/integrations/dynamic-roda-tilt/.gitignore +1 -0
- data/examples/integrations/dynamic-roda-tilt/Gemfile +9 -0
- data/examples/integrations/dynamic-roda-tilt/README.md +17 -0
- data/examples/integrations/dynamic-roda-tilt/Rakefile +6 -0
- data/examples/integrations/dynamic-roda-tilt/app/application.rb +6 -0
- data/examples/integrations/dynamic-roda-tilt/app.rb +50 -0
- data/examples/integrations/dynamic-roda-tilt/config.ru +3 -0
- data/examples/integrations/dynamic-sinatra-opal-sprockets-server/Gemfile +8 -0
- data/examples/integrations/dynamic-sinatra-opal-sprockets-server/README.md +16 -0
- data/examples/integrations/dynamic-sinatra-opal-sprockets-server/app/application.rb +6 -0
- data/examples/integrations/dynamic-sinatra-opal-sprockets-server/config.ru +29 -0
- data/examples/integrations/static-bash/.gitignore +2 -0
- data/examples/integrations/static-bash/Gemfile +4 -0
- data/examples/integrations/static-bash/README.md +8 -0
- data/examples/integrations/static-bash/app/application.rb +6 -0
- data/examples/integrations/static-bash/build.sh +4 -0
- data/examples/integrations/static-bash/index.html +10 -0
- data/examples/integrations/static-bash-opal-parser/.gitignore +3 -0
- data/examples/integrations/static-bash-opal-parser/Gemfile +4 -0
- data/examples/integrations/static-bash-opal-parser/README.md +10 -0
- data/examples/integrations/static-bash-opal-parser/build.sh +4 -0
- data/examples/integrations/static-bash-opal-parser/index.html +19 -0
- data/examples/integrations/static-rake/.gitignore +1 -0
- data/examples/integrations/static-rake/Gemfile +5 -0
- data/examples/integrations/static-rake/README.md +7 -0
- data/examples/integrations/static-rake/Rakefile +10 -0
- data/examples/integrations/static-rake/app/application.rb +6 -0
- data/examples/integrations/static-rake/index.html +9 -0
- data/examples/integrations/static-rake-guard/.gitignore +1 -0
- data/examples/integrations/static-rake-guard/Gemfile +7 -0
- data/examples/integrations/static-rake-guard/Guardfile +3 -0
- data/examples/integrations/static-rake-guard/README.md +10 -0
- data/examples/integrations/static-rake-guard/Rakefile +10 -0
- data/examples/integrations/static-rake-guard/app/application.rb +6 -0
- data/examples/integrations/static-rake-guard/index.html +9 -0
- data/examples/svg/.gitignore +1 -0
- data/examples/svg/Gemfile +5 -0
- data/examples/svg/README.md +7 -0
- data/examples/svg/Rakefile +10 -0
- data/examples/svg/app/application.rb +11 -0
- data/examples/svg/index.html +17 -0
- data/examples/svg/index.svg +6 -0
- data/index.html.erb +2 -3
- data/opal/browser/audio/node.rb +121 -0
- data/opal/browser/audio/param_schedule.rb +43 -0
- data/opal/browser/audio.rb +66 -0
- data/opal/browser/blob.rb +94 -0
- data/opal/browser/canvas/data.rb +1 -1
- data/opal/browser/canvas/gradient.rb +1 -1
- data/opal/browser/canvas/style.rb +3 -1
- data/opal/browser/canvas/text.rb +1 -1
- data/opal/browser/canvas.rb +17 -3
- data/opal/browser/console.rb +3 -1
- data/opal/browser/cookies.rb +16 -7
- data/opal/browser/crypto.rb +79 -0
- data/opal/browser/css/declaration.rb +1 -1
- data/opal/browser/css/rule.rb +1 -1
- data/opal/browser/css/style_sheet.rb +2 -2
- data/opal/browser/css.rb +23 -7
- data/opal/browser/database/sql.rb +7 -8
- data/opal/browser/delay.rb +16 -0
- data/opal/browser/dom/attribute.rb +1 -1
- data/opal/browser/dom/builder.rb +29 -10
- data/opal/browser/dom/document.rb +81 -13
- data/opal/browser/dom/document_fragment.rb +18 -0
- data/opal/browser/dom/document_or_shadow_root.rb +19 -0
- data/opal/browser/dom/element/attributes.rb +28 -4
- data/opal/browser/dom/element/button.rb +31 -0
- data/opal/browser/dom/element/custom.rb +177 -0
- data/opal/browser/dom/element/data.rb +17 -2
- data/opal/browser/dom/element/editable.rb +47 -0
- data/opal/browser/dom/element/form.rb +38 -0
- data/opal/browser/dom/element/iframe.rb +37 -0
- data/opal/browser/dom/element/image.rb +2 -0
- data/opal/browser/dom/element/input.rb +36 -0
- data/opal/browser/dom/element/media.rb +17 -0
- data/opal/browser/dom/element/scroll.rb +106 -74
- data/opal/browser/dom/element/select.rb +6 -0
- data/opal/browser/dom/element/size.rb +12 -0
- data/opal/browser/dom/element/template.rb +2 -0
- data/opal/browser/dom/element/textarea.rb +2 -0
- data/opal/browser/dom/element.rb +193 -48
- data/opal/browser/dom/mutation_observer.rb +2 -2
- data/opal/browser/dom/node.rb +53 -13
- data/opal/browser/dom/node_set.rb +11 -2
- data/opal/browser/dom/shadow_root.rb +12 -0
- data/opal/browser/dom/text.rb +2 -2
- data/opal/browser/dom.rb +38 -5
- data/opal/browser/effects.rb +170 -4
- data/opal/browser/event/all.rb +26 -0
- data/opal/browser/event/animation.rb +2 -0
- data/opal/browser/event/audio_processing.rb +2 -0
- data/opal/browser/event/base.rb +35 -4
- data/opal/browser/event/before_unload.rb +2 -0
- data/opal/browser/event/clipboard.rb +9 -0
- data/opal/browser/event/close.rb +2 -0
- data/opal/browser/event/composition.rb +2 -0
- data/opal/browser/event/custom.rb +1 -1
- data/opal/browser/event/data_transfer.rb +95 -0
- data/opal/browser/event/device_light.rb +2 -0
- data/opal/browser/event/device_motion.rb +2 -0
- data/opal/browser/event/device_orientation.rb +2 -0
- data/opal/browser/event/device_proximity.rb +2 -0
- data/opal/browser/event/drag.rb +9 -5
- data/opal/browser/event/focus.rb +2 -0
- data/opal/browser/event/gamepad.rb +3 -1
- data/opal/browser/event/hash_change.rb +2 -0
- data/opal/browser/event/keyboard.rb +14 -1
- data/opal/browser/event/message.rb +2 -0
- data/opal/browser/event/mouse.rb +10 -6
- data/opal/browser/event/page_transition.rb +2 -0
- data/opal/browser/event/pop_state.rb +2 -0
- data/opal/browser/event/progress.rb +2 -0
- data/opal/browser/event/sensor.rb +2 -0
- data/opal/browser/event/storage.rb +2 -0
- data/opal/browser/event/touch.rb +2 -0
- data/opal/browser/event/wheel.rb +2 -0
- data/opal/browser/event.rb +26 -116
- data/opal/browser/event_source.rb +1 -1
- data/opal/browser/form_data.rb +225 -0
- data/opal/browser/history.rb +4 -8
- data/opal/browser/http/request.rb +32 -10
- data/opal/browser/http/response.rb +5 -1
- data/opal/browser/http.rb +0 -2
- data/opal/browser/immediate.rb +0 -2
- data/opal/browser/location.rb +7 -1
- data/opal/browser/navigator.rb +105 -4
- data/opal/browser/polyfill/visual_viewport.rb +216 -0
- data/opal/browser/screen.rb +2 -2
- data/opal/browser/setup/base.rb +6 -0
- data/opal/browser/setup/full.rb +13 -0
- data/opal/browser/setup/large.rb +17 -0
- data/opal/browser/setup/mini.rb +8 -0
- data/opal/browser/setup/traditional.rb +10 -0
- data/opal/browser/socket.rb +3 -3
- data/opal/browser/storage.rb +2 -2
- data/opal/browser/support.rb +13 -1
- data/opal/browser/utils.rb +94 -14
- data/opal/browser/version.rb +1 -1
- data/opal/browser/visual_viewport.rb +39 -0
- data/opal/browser/window/size.rb +14 -0
- data/opal/browser/window/view.rb +15 -0
- data/opal/browser/window.rb +29 -16
- data/opal/browser.rb +1 -11
- data/opal-browser.gemspec +3 -3
- data/spec/database/sql_spec.rb +43 -35
- data/spec/delay_spec.rb +15 -12
- data/spec/dom/document_spec.rb +10 -8
- data/spec/dom/element/custom_spec.rb +106 -0
- data/spec/dom/element/subclass_spec.rb +144 -0
- data/spec/dom/element_spec.rb +42 -0
- data/spec/dom/mutation_observer_spec.rb +12 -8
- data/spec/dom/node_spec.rb +48 -0
- data/spec/dom_spec.rb +8 -0
- data/spec/event_source_spec.rb +15 -12
- data/spec/{dom/event_spec.rb → event_spec.rb} +44 -15
- data/spec/history_spec.rb +23 -19
- data/spec/http_spec.rb +19 -31
- data/spec/immediate_spec.rb +5 -4
- data/spec/interval_spec.rb +18 -9
- data/spec/native_cached_wrapper_spec.rb +46 -0
- data/spec/runner.rb +37 -62
- data/spec/socket_spec.rb +15 -12
- data/spec/spec_helper.rb +2 -1
- data/spec/spec_helper_promise.rb.erb +25 -0
- metadata +119 -16
- data/.travis.yml +0 -74
- data/opal/browser/window/scroll.rb +0 -59
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 757925a4ec553e27d7aba272bab8ee73bc3ba3625fc0b19639020330cafbbd16
|
4
|
+
data.tar.gz: 86154513d24fa1eb3258ff22459ce83d3d5b5a1d6dcde4467da709fb6a15efa6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 85f9989c87c579e10c24e7a8553cf2c1e93ee2972aa7a570dc37e5835bb6b768a4d3e8971860bf97960ee7720b1d4fd1d32503a9ab3a14a86a87c4fae3d9ab7f
|
7
|
+
data.tar.gz: 150483626044e1a89975eb4181a3547a875310fef3811ac70e7bd140a78b63e56a7311f569d0d329d877e2e3a0f6f27e8693e33f5002bc04db910ca5926bcbcb
|
@@ -0,0 +1,95 @@
|
|
1
|
+
name: build
|
2
|
+
|
3
|
+
on:
|
4
|
+
push:
|
5
|
+
branches:
|
6
|
+
- master
|
7
|
+
- "*-stable"
|
8
|
+
- "*/ci-check"
|
9
|
+
pull_request: {}
|
10
|
+
|
11
|
+
jobs:
|
12
|
+
rake:
|
13
|
+
name: ${{ matrix.combo.name }}
|
14
|
+
strategy:
|
15
|
+
fail-fast: false
|
16
|
+
matrix:
|
17
|
+
combo:
|
18
|
+
- name: Chromium/Linux/Opal-master
|
19
|
+
browser: chrome
|
20
|
+
os: ubuntu-latest
|
21
|
+
opal: master
|
22
|
+
- name: Chromium/Linux/Opal-1.3/PromiseV2
|
23
|
+
browser: chrome
|
24
|
+
os: ubuntu-latest
|
25
|
+
opal: 1.3
|
26
|
+
promise: v2
|
27
|
+
- name: Chromium/Linux/Opal-1.3
|
28
|
+
browser: chrome
|
29
|
+
os: ubuntu-latest
|
30
|
+
opal: 1.3
|
31
|
+
- name: Chromium/Linux/Opal-1.2
|
32
|
+
browser: chrome
|
33
|
+
os: ubuntu-latest
|
34
|
+
opal: 1.2
|
35
|
+
- name: Chromium/Linux/Opal-1.0
|
36
|
+
browser: chrome
|
37
|
+
os: ubuntu-latest
|
38
|
+
opal: '1.0'
|
39
|
+
- name: Chromium/Linux/Ruby-2.7
|
40
|
+
browser: chrome
|
41
|
+
os: ubuntu-latest
|
42
|
+
ruby: 2.7
|
43
|
+
- name: Chromium/Linux/Ruby-2.6
|
44
|
+
browser: chrome
|
45
|
+
os: ubuntu-latest
|
46
|
+
ruby: 2.6
|
47
|
+
- name: Firefox/Linux
|
48
|
+
browser: gecko
|
49
|
+
os: ubuntu-latest
|
50
|
+
- name: Chromium/Windows
|
51
|
+
browser: chrome
|
52
|
+
os: windows-latest
|
53
|
+
- name: Firefox/Windows
|
54
|
+
browser: gecko
|
55
|
+
os: windows-latest
|
56
|
+
- name: Edge/Windows
|
57
|
+
browser: edge
|
58
|
+
os: windows-latest
|
59
|
+
- name: Chromium/macOS
|
60
|
+
browser: chrome
|
61
|
+
os: macos-latest
|
62
|
+
- name: Firefox/macOS
|
63
|
+
browser: gecko
|
64
|
+
os: macos-latest
|
65
|
+
- name: Safari/macOS
|
66
|
+
browser: safari
|
67
|
+
os: macos-latest
|
68
|
+
|
69
|
+
runs-on: ${{ matrix.combo.os }}
|
70
|
+
|
71
|
+
steps:
|
72
|
+
- uses: actions/checkout@v2
|
73
|
+
- name: set environment variables
|
74
|
+
run: |
|
75
|
+
echo "OPAL_VERSION=${{ matrix.combo.opal || '1.3' }}" >> $GITHUB_ENV
|
76
|
+
echo "OPAL_BROWSER_PROMISE=${{ matrix.combo.promise || 'v1' }}" >> $GITHUB_ENV
|
77
|
+
- uses: ruby/setup-ruby@v1
|
78
|
+
with:
|
79
|
+
ruby-version: ${{ matrix.combo.ruby || '3.0' }}
|
80
|
+
- run: bundle lock
|
81
|
+
- uses: actions/cache@v2
|
82
|
+
with:
|
83
|
+
path: ./vendor/bundle
|
84
|
+
key: ${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-${{ github.ref }}-${{ hashFiles('**/Gemfile.lock') }}
|
85
|
+
restore-keys: |
|
86
|
+
${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-${{ github.ref }}
|
87
|
+
${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-master
|
88
|
+
${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-${{ matrix.combo.opal || '1.2.0.beta1' }}-
|
89
|
+
${{ runner.os }}-${{ matrix.combo.ruby || '3.0' }}-gems-
|
90
|
+
- name: bundle install
|
91
|
+
run: |
|
92
|
+
bundle config path $PWD/vendor/bundle
|
93
|
+
bundle install --jobs 4 --retry 3
|
94
|
+
bundle clean
|
95
|
+
- run: bundle exec rake selenium_${{ matrix.combo.browser }}
|
data/.gitignore
CHANGED
data/Gemfile
CHANGED
@@ -2,15 +2,29 @@ source 'https://rubygems.org'
|
|
2
2
|
gemspec
|
3
3
|
|
4
4
|
# specs
|
5
|
+
gem 'rake'
|
5
6
|
gem 'rack'
|
6
7
|
gem 'sinatra'
|
7
8
|
gem 'sinatra-websocket'
|
8
|
-
|
9
|
+
# For opal-rspec, a release is needed
|
10
|
+
gem 'opal-rspec', github: 'hmdne/opal-rspec', branch: 'opal-1.3', submodules: true # '>= 0.8.0.alpha1'
|
11
|
+
gem 'opal-sprockets'
|
12
|
+
# Force build of eventmachine on Windows
|
13
|
+
gem 'eventmachine', github: 'eventmachine/eventmachine' if RUBY_PLATFORM =~ /mingw/
|
14
|
+
|
9
15
|
|
10
16
|
# runner
|
11
17
|
gem 'selenium-webdriver', require: false
|
12
18
|
gem 'rest-client', require: false
|
19
|
+
gem 'webdrivers', require: false
|
20
|
+
gem 'rexml', require: false
|
13
21
|
|
14
22
|
# browser
|
15
|
-
|
16
|
-
|
23
|
+
case ENV['OPAL_VERSION']
|
24
|
+
when nil
|
25
|
+
when /\./
|
26
|
+
gem 'opal', "~> #{ENV['OPAL_VERSION']}.0a"
|
27
|
+
else
|
28
|
+
gem 'opal', github: 'opal/opal', ref: ENV['OPAL_VERSION']
|
29
|
+
end
|
30
|
+
|
data/LICENSE
CHANGED
@@ -1,4 +1,5 @@
|
|
1
|
-
Copyright (C)
|
1
|
+
Copyright (C) 2013-2018 by meh
|
2
|
+
Copyright (C) 2019-2021 hmdne and the Opal-Browser contributors
|
2
3
|
|
3
4
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
5
|
of this software and associated documentation files (the "Software"), to deal
|
data/README.md
CHANGED
@@ -1,18 +1,30 @@
|
|
1
|
-
Browser
|
2
|
-
|
1
|
+
Opal-Browser - Client side web development in pure Ruby, using Opal
|
2
|
+
===================================================================
|
3
3
|
|
4
|
-
[![Build Status](https://secure.travis-ci.org/opal/opal-browser.svg?branch=master)](http://travis-ci.org/opal/opal-browser)
|
5
4
|
[![Gem Version](https://badge.fury.io/rb/opal-browser.svg)](http://badge.fury.io/rb/opal-browser)
|
6
|
-
[![Code Climate](
|
5
|
+
[![Code Climate](https://img.shields.io/codeclimate/maintainability-percentage/opal/opal-browser.svg)](https://codeclimate.com/github/opal/opal-browser)
|
6
|
+
[![Build Status](https://github.com/opal/opal-browser/workflows/build/badge.svg)](https://github.com/opal/opal-browser/actions?query=workflow%3Abuild)
|
7
7
|
|
8
|
-
|
9
|
-
This library aims to be a full-blown wrapper for all the browser API including
|
8
|
+
This library aims to be a full-blown wrapper for all the browser API as defined by
|
10
9
|
HTML5.
|
11
10
|
|
11
|
+
It provides a very JQuery-like interface to DOM, but itself it doesn't use nor
|
12
|
+
require JQuery nor opal-jquery (which is an alternative library for interfacing
|
13
|
+
the web browser). The main difference though is that Opal-Browser goes far beyond
|
14
|
+
what JQuery does.
|
15
|
+
|
12
16
|
Usage
|
13
17
|
=====
|
14
18
|
|
15
|
-
|
19
|
+
_Gemfile_
|
20
|
+
|
21
|
+
```ruby
|
22
|
+
source 'https://rubygems.org/'
|
23
|
+
|
24
|
+
gem 'opal-browser'
|
25
|
+
```
|
26
|
+
|
27
|
+
_Server side (config.ru, Rakefile, Rails, Sinatra, Roda, etc. - not needed for static compilation)_
|
16
28
|
|
17
29
|
```ruby
|
18
30
|
require 'opal-browser'
|
@@ -23,15 +35,47 @@ _Browser side_
|
|
23
35
|
|
24
36
|
```ruby
|
25
37
|
require 'opal'
|
26
|
-
require '
|
38
|
+
require 'native'
|
39
|
+
require 'promise'
|
40
|
+
require 'browser/setup/full'
|
41
|
+
|
27
42
|
# Your Opal code here
|
43
|
+
$document.body << "Hello world!"
|
28
44
|
```
|
29
45
|
|
46
|
+
_Static Compile Opal + Opal-Browser library_
|
30
47
|
|
48
|
+
```bash
|
49
|
+
bundle exec opal -c -q opal-browser -p native -p promise -p browser/setup/full -e '#' -E > opal-browser.js
|
50
|
+
```
|
51
|
+
|
52
|
+
_Static Compile your application_
|
53
|
+
|
54
|
+
```bash
|
55
|
+
bundle exec opal -Oc -s opal -s native -s promise -s browser/setup/full app/application.rb > application.js
|
56
|
+
```
|
57
|
+
|
58
|
+
_And load it in HTML!_
|
59
|
+
|
60
|
+
```html
|
61
|
+
<!DOCTYPE html>
|
62
|
+
<html>
|
63
|
+
<head>
|
64
|
+
<title>My Application</title>
|
65
|
+
</head>
|
66
|
+
<body>
|
67
|
+
<script src='opal-browser.js' onload='Opal.require("native"); Opal.require("promise"); Opal.require("browser/setup/full");'></script>
|
68
|
+
<script src='application.js'></script>
|
69
|
+
</body>
|
70
|
+
</html>
|
71
|
+
```
|
72
|
+
|
73
|
+
See the examples/integrations/ directory for various ideas on how to quickly start
|
74
|
+
development using opal-browser.
|
31
75
|
|
32
76
|
Features
|
33
77
|
========
|
34
|
-
This is a list of
|
78
|
+
This is a list of many currently wrapped features and some details on them.
|
35
79
|
|
36
80
|
DOM
|
37
81
|
---
|
@@ -44,8 +88,8 @@ $document.ready do
|
|
44
88
|
end
|
45
89
|
```
|
46
90
|
|
47
|
-
It also supports a markaby inspired builder DSL which generates
|
48
|
-
directly instead of creating a string.
|
91
|
+
It also supports a markaby inspired builder DSL (using Paggio) which generates
|
92
|
+
DOM nodes directly instead of creating a string.
|
49
93
|
|
50
94
|
```ruby
|
51
95
|
$document.ready do
|
@@ -57,12 +101,37 @@ $document.ready do
|
|
57
101
|
end
|
58
102
|
```
|
59
103
|
|
104
|
+
Events
|
105
|
+
------
|
106
|
+
|
107
|
+
Add an event to a given element:
|
108
|
+
|
109
|
+
```ruby
|
110
|
+
$document.at_css("button").on(:click) do |e|
|
111
|
+
e.prevent # Prevent the default action (eg. form submission)
|
112
|
+
alert "Button clicked!"
|
113
|
+
end
|
114
|
+
```
|
115
|
+
|
116
|
+
Or add it to a parent element and use a delegator, so that an event gets fired
|
117
|
+
when any button children of `$document` is clicked:
|
118
|
+
|
119
|
+
```ruby
|
120
|
+
$document.on(:click, "button") do |e|
|
121
|
+
e.prevent
|
122
|
+
# e.on is a button that has been clicked
|
123
|
+
e.on.inner_text = "Clicked!"
|
124
|
+
end
|
125
|
+
```
|
126
|
+
|
127
|
+
Run an event once with `#one` instead of `#on`, or disable an event with `#off`.
|
128
|
+
|
60
129
|
CSSOM
|
61
130
|
-----
|
62
|
-
CSSOM support is still incomplete but the useful parts are
|
63
|
-
includes a DSL for generating a CSS style and the same DSL
|
64
|
-
change style declarations (which can either belong to a
|
65
|
-
`CSS::Rule::Style`).
|
131
|
+
CSSOM support (using Paggio) is still incomplete but the useful parts are
|
132
|
+
implemented, this includes a DSL for generating a CSS style and the same DSL
|
133
|
+
is also used to change style declarations (which can either belong to a
|
134
|
+
`DOM::Element` or a `CSS::Rule::Style`).
|
66
135
|
|
67
136
|
```ruby
|
68
137
|
$document.body.style.apply {
|
@@ -80,6 +149,8 @@ supports binary results as typed-arrays.
|
|
80
149
|
It easily allows for synchronous and asynchronous requests.
|
81
150
|
|
82
151
|
```ruby
|
152
|
+
require 'browser/http'
|
153
|
+
|
83
154
|
Browser::HTTP.get "/something.json" do
|
84
155
|
on :success do |res|
|
85
156
|
alert res.json.inspect
|
@@ -93,6 +164,8 @@ Websockets have been fully wrapped and they are easily configurable with
|
|
93
164
|
blocks.
|
94
165
|
|
95
166
|
```ruby
|
167
|
+
require 'browser/socket'
|
168
|
+
|
96
169
|
Browser::Socket.new 'ws://echo.websocket.org' do
|
97
170
|
on :open do
|
98
171
|
every 1 do
|
@@ -111,6 +184,8 @@ EventSource
|
|
111
184
|
Event sources have been implemented and are easily configurable with blocks.
|
112
185
|
|
113
186
|
```ruby
|
187
|
+
require 'browser/event_source'
|
188
|
+
|
114
189
|
Browser::EventSource.new '/events' do |es|
|
115
190
|
es.on :message do |e|
|
116
191
|
alert e.data
|
@@ -131,11 +206,20 @@ Storage
|
|
131
206
|
The HTML5 Storage API has been wrapped and it exports a single Storage class
|
132
207
|
that uses the most appropriate and available API to store data locally.
|
133
208
|
|
209
|
+
```ruby
|
210
|
+
require 'browser/storage'
|
211
|
+
|
212
|
+
$storage = $window.storage
|
213
|
+
$storage[:hello] = "world"
|
214
|
+
```
|
215
|
+
|
134
216
|
Database SQL
|
135
217
|
------------
|
136
|
-
WebSQL has been fully wrapped
|
218
|
+
WebSQL has been fully wrapped (Chromium-only)
|
137
219
|
|
138
220
|
```ruby
|
221
|
+
require 'browser/database/sql'
|
222
|
+
|
139
223
|
db = Browser::Database::SQL.new 'test'
|
140
224
|
db.transaction {|t|
|
141
225
|
t.query('CREATE TABLE test(ID INTEGER PRIMARY KEY ASC, text TEXT)').then {
|
@@ -155,55 +239,33 @@ db.transaction {|t|
|
|
155
239
|
Browser support
|
156
240
|
===============
|
157
241
|
|
158
|
-
*
|
159
|
-
* Firefox (Current -
|
160
|
-
* Chrome (Current -
|
161
|
-
* Safari
|
162
|
-
* Opera
|
242
|
+
* Edge (Current - 3) to Current
|
243
|
+
* Firefox (Current - 3) to Current
|
244
|
+
* Chrome (Current - 3) to Current
|
245
|
+
* Safari (Current - 3) to Current
|
246
|
+
* Opera (Current - 3) to Current
|
163
247
|
|
164
248
|
Any problem above browsers should be considered and reported as a bug.
|
165
249
|
|
166
|
-
(Current -
|
167
|
-
the browser and
|
168
|
-
|
169
|
-
|
170
|
-
12.1x or (Current - 1) or Current denotes that we support Opera 12.1x as well
|
171
|
-
as last 2 versions of Opera. For example, if the current Opera version is 20.x,
|
172
|
-
we support Opera 12.1x, 19.x and 20.x but not Opera 15.x through 18.x.
|
173
|
-
|
174
|
-
Cross-browser testing sponsored by [BrowserStack](http://browserstack.com).
|
175
|
-
|
176
|
-
CSS selectors
|
177
|
-
-------------
|
178
|
-
Older browsers do not support CSS selector in queries, this means you'll need
|
179
|
-
external polyfills for this.
|
180
|
-
|
181
|
-
The suggested polyfill is [Sizzle](http://sizzlejs.com/), require it **before**
|
182
|
-
opal-browser.
|
183
|
-
|
184
|
-
JSON parsing
|
185
|
-
------------
|
186
|
-
Older browsers don't support JSON parsing natively, this means you'll need
|
187
|
-
external polyfills for this.
|
188
|
-
|
189
|
-
The suggested polyfill is [json2](https://github.com/douglascrockford/JSON-js),
|
190
|
-
require it **before** opal-browser.
|
250
|
+
(Current - 3) to Current denotes that we support the current major stable version
|
251
|
+
of the browser and 3 versions preceding it. For example, if the current version
|
252
|
+
of a browser is 24.x, we support all versions between 21.x to 24.x.
|
191
253
|
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
254
|
+
We will accept compatibility patches for even earlier browser versions. Opal-Browser
|
255
|
+
is written in such a way, that it integrates a robust compatibility check system,
|
256
|
+
similar to Modernizr, and the history of this library goes even as far as supporting
|
257
|
+
Internet Explorer 6.
|
196
258
|
|
197
|
-
|
198
|
-
|
199
|
-
opal-browser.
|
259
|
+
See the [polyfills documentation](docs/polyfills.md) if you wish to polyfill some
|
260
|
+
behaviors not supported by the ancient web browsers (like `querySelectorAll`).
|
200
261
|
|
201
262
|
License
|
202
263
|
=======
|
203
264
|
|
204
265
|
(The MIT License)
|
205
266
|
|
206
|
-
Copyright (C)
|
267
|
+
Copyright (C) 2013-2018 by meh<br>
|
268
|
+
Copyright (C) 2019-2021 hmdne and the Opal-Browser contributors
|
207
269
|
|
208
270
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
209
271
|
of this software and associated documentation files (the "Software"), to deal
|
data/Rakefile
CHANGED
@@ -1,5 +1,33 @@
|
|
1
1
|
require 'bundler'
|
2
2
|
Bundler.require
|
3
|
+
require 'bundler/gem_tasks'
|
4
|
+
|
5
|
+
require 'webdrivers'
|
6
|
+
load 'webdrivers/Rakefile'
|
3
7
|
|
4
8
|
require 'opal/rspec/rake_task'
|
5
|
-
Opal::RSpec::RakeTask.new(:
|
9
|
+
Opal::RSpec::RakeTask.new(:broken_rspec) do |_, task|
|
10
|
+
task.default_path = 'spec'
|
11
|
+
task.pattern = 'spec/**/*_spec.{rb,opal}'
|
12
|
+
end
|
13
|
+
|
14
|
+
task(:nil) {}
|
15
|
+
|
16
|
+
%w[chrome edge gecko safari].each do |i|
|
17
|
+
dependency = nil
|
18
|
+
if %w[chrome edge gecko].include? i
|
19
|
+
dependency = "webdrivers:#{i}driver:update"
|
20
|
+
end
|
21
|
+
desc "Run Selenium tests with #{i}"
|
22
|
+
task :"selenium_#{i}" => dependency do
|
23
|
+
server = Process.spawn("bundle", "exec", "rackup")
|
24
|
+
at_exit { Process.kill(9, server) rescue nil }
|
25
|
+
sleep 2
|
26
|
+
ENV['BROWSER'] = i
|
27
|
+
load 'spec/runner.rb'
|
28
|
+
ensure
|
29
|
+
Process.kill(9, server) rescue nil
|
30
|
+
end
|
31
|
+
end
|
32
|
+
|
33
|
+
task :default => :selenium_chrome
|
data/config.ru
CHANGED
@@ -2,11 +2,17 @@ require 'bundler'
|
|
2
2
|
Bundler.require
|
3
3
|
|
4
4
|
apps = []
|
5
|
-
|
6
|
-
|
5
|
+
|
6
|
+
sprockets_env = Opal::RSpec::SprocketsEnvironment.new(spec_pattern = 'spec/**/*_spec.{rb,opal}',
|
7
|
+
spec_exclude_pattern = nil,
|
8
|
+
spec_files = nil,
|
9
|
+
default_path = 'spec')
|
10
|
+
|
11
|
+
apps << Opal::Sprockets::Server.new(sprockets: sprockets_env) { |s|
|
7
12
|
s.main = 'opal/rspec/sprockets_runner'
|
13
|
+
s.append_path 'spec'
|
8
14
|
s.index_path = 'index.html.erb'
|
9
|
-
s.debug =
|
15
|
+
s.debug = true
|
10
16
|
}
|
11
17
|
|
12
18
|
apps << Class.new(Sinatra::Base) {
|
@@ -34,6 +40,17 @@ apps << Class.new(Sinatra::Base) {
|
|
34
40
|
"lol"
|
35
41
|
end
|
36
42
|
|
43
|
+
post '/http-file' do
|
44
|
+
if params['lol'] == 'wut' &&
|
45
|
+
params['file'][:filename] == 'yay.txt' &&
|
46
|
+
params['file'][:tempfile].read == 'content'
|
47
|
+
|
48
|
+
"ok"
|
49
|
+
else
|
50
|
+
"fail"
|
51
|
+
end
|
52
|
+
end
|
53
|
+
|
37
54
|
get '/events' do
|
38
55
|
headers 'Content-Type' => 'text/event-stream'
|
39
56
|
|
data/docs/polyfills.md
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
CSS selectors
|
2
|
+
-------------
|
3
|
+
Older browsers do not support CSS selector in queries, this means you'll need
|
4
|
+
external polyfills for this.
|
5
|
+
|
6
|
+
The suggested polyfill is [Sizzle](http://sizzlejs.com/), require it **before**
|
7
|
+
opal-browser.
|
8
|
+
|
9
|
+
JSON parsing
|
10
|
+
------------
|
11
|
+
Older browsers don't support JSON parsing natively, this means you'll need
|
12
|
+
external polyfills for this.
|
13
|
+
|
14
|
+
The suggested polyfill is [json2](https://github.com/douglascrockford/JSON-js),
|
15
|
+
require it **before** opal-browser.
|
16
|
+
|
17
|
+
XPath support
|
18
|
+
-------------
|
19
|
+
Not all browsers support XPath queries, I'm looking at you Internet Explorer,
|
20
|
+
this means you'll need external polyfills for this.
|
21
|
+
|
22
|
+
The suggested polyfill is
|
23
|
+
[wgxpath](https://code.google.com/p/wicked-good-xpath/), require it **before**
|
24
|
+
opal-browser.
|