opal-browser 0.1.0.beta1 → 0.3.1

data/opal/browser/utils.rb

@@ -1,56 +1,154 @@
 module Browser
+  Promise = defined?(PromiseV2) ? PromiseV2 : ::Promise
+
   Size     = Struct.new(:width, :height)
   Position = Struct.new(:x, :y)
+
+  # {Browser::NativeCachedWrapper} is a special case of {Native::Wrapper}.
+  #
+  # What this module does is it makes sure that your Ruby objects
+  # are mapped 1:1 to your Javascript objects. So that for instance
+  # your `$document.at_css('body')` is always the same Ruby object.
+  #
+  # You can only use it if your final `.new` is of the signature
+  # `.new(native)` and your native (probably DOM) object persists and
+  # doesn't mind arbitrary properties.
+  #
+  # The rule of thumb is: if it does overload `#initialize`'s signature
+  # and not `.new`'s - it won't work. Use {Native::Wrapper} in this case.
+  module NativeCachedWrapper
+    def self.included(klass)
+      klass.include Native::Wrapper
+      klass.extend NativeCachedWrapperClassMethods
+    end
+
+    def restricted?
+      !!@restricted
+    end
+
+    # Change a native reference and make sure the change is reflected on JS
+    # side as well. This method is used by Node#initialize_copy. Please don't
+    # use this method outside of the cloning semantic.
+    def set_native_reference(native)
+      `#{native}.$$opal_native_cached = #{self}`
+      @native = native
+    end
+  end
+
+  module NativeCachedWrapperClassMethods
+    # Check if we don't have access to arbitrary properties of a (presumably)
+    # native object.
+    private def restricted?(native)
+      %x{
+        try {
+          typeof(#{native}.$$try_restricted_access);
+        } catch (e) {
+          if (e.name == 'SecurityError') return true;
+        }
+        return false;
+      }
+    end
+
+    def new(native)
+      # We can't access arbitrary properties if an element is restricted
+      # i.e. the DOM element is an item we can't fully access due to CORS.
+      if restricted?(native)
+        # Let's try to bypass any further initializers... may be ugly, but
+        # works.
+        obj = allocate
+        obj.instance_variable_set :@native, native
+        obj.instance_variable_set :@restricted, true
+        return obj
+      end
+
+      # It's not a native element? Weird, better throw an exception.
+      raise ArgumentError if !native?(native)
+
+      if defined? `#{native}.$$opal_native_cached`
+        `#{native}.$$opal_native_cached`
+      else
+        `#{native}.$$opal_native_cached = #{super(native)}`
+      end
+    end
+  end
+end
+
+class Object
+  # Encode as URI.
+  #
+  # @deprecated Please use FormData.encode_uri
+  # @return [String] the {Object#to_s} encoded for usage as URI
+  def encode_uri
+    warn "opal-browser: Object#encode_uri is deprecated. Please use FormData.encode_uri"
+    FormData.encode_uri(to_s)
+  end
+
+  # Encode as URI component.
+  #
+  # @deprecated Please use FormData.encode
+  # @return [String] the {Object#to_s} encoded for usage as URI component
+  def encode_uri_component
+    warn "opal-browser: Object#encode_uri_component is deprecated. Please use FormData.encode"
+    FormData.encode(to_s)
+  end
 end
 
 class String
   # Encode as URI component.
   #
+  # @deprecated Please use FormData.encode
   # @return [String] the string encoded for usage as URI component
   def encode_uri_component
-    `encodeURIComponent(self)`
+    warn "opal-browser: String#encode_uri_component is deprecated. Please use FormData.encode"
+    FormData.encode(self)
   end
 
   # Encode as URI.
   #
+  # @deprecated Please use FormData.encode_uri
   # @return [String] the string encoded as URI
   def encode_uri
-    `encodeURI(self)`
+    warn "opal-browser: String#encode_uri is deprecated. Please use FormData.encode_uri"
+    FormData.encode_uri(self)
   end
 
   # Decode as URI component.
   #
+  # @deprecated Please use FormData.decode
   # @return [String] the string decoded as URI component
   def decode_uri_component
-    `decodeURIComponent(self)`
+    warn "opal-browser: String#decode_uri_component is deprecated. Please use FormData.decode"
+    FormData.decode(self)
   end
 
   # Decode as URI.
   #
+  # @deprecated Please use FormData.decode_uri
   # @return [String] the string decoded as URI
   def decode_uri
-    `decodeURI(self)`
+    warn "opal-browser: String#decode_uri is deprecated. Please use FormData.decode_uri"
+    FormData.decode_uri(self)
   end
 end
 
 class Hash
+  # Decode an URL encoded form to a {Hash}.
+  #
+  # @param string [String] the URL encoded form
+  #
+  # @deprecated Please use FormData.parse_query
+  # @return [Hash]
   def self.decode_uri(string)
-    self[string.split(?&).map {|part|
-      name, value = part.split(?=)
-
-      [name.decode_uri_component, value.decode_uri_component]
-    }]
-  end
-
-  def encode_uri
-    map {|name, value|
-      "#{name.to_s.encode_uri_component}=#{value.to_s.encode_uri_component}"
-    }.join(?&)
+    warn "opal-browser: Hash.decode_uri is deprecated. Please use FormData.parse_query"
+    FormData.parse_query(string)
   end
-end
 
-class Object
+  # Encode the Hash to an URL form.
+  #
+  # @deprecated Please use FormData.build_query
+  # @return [String] the URL encoded form
   def encode_uri
-    to_s.encode_uri
+    warn "opal-browser: Hash#encode_uri is deprecated. Please use FormData.build_query"
+    FormData.build_query(self)
   end
 end

data/opal/browser/version.rb

@@ -1,3 +1,3 @@
 module Browser
-  VERSION = '0.1.0.beta1'
+  VERSION = '0.3.1'
 end

data/opal/browser/visual_viewport.rb

@@ -0,0 +1,39 @@
+# Firefox browsers need either a flag or a polyfill
+require "browser/polyfill/visual_viewport"
+
+module Browser
+  # The mobile web contains two viewports, the Layout and Visual viewport.
+  # The Layout viewport is what a page lays out its elements into and the
+  # Visual viewport is what is actually visible on the screen. When the user
+  # pinch-zooms into the page, the visual viewport shrinks but the layout viewport
+  # is unchanged. UI like the on-screen keyboard (OSK) can also shrink the visual
+  # viewport without affecting the layout viewport.
+  #
+  # https://github.com/WICG/visual-viewport
+  # https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
+  class VisualViewport
+    include Native::Wrapper
+    include Event::Target
+
+    alias_native :offset_left, :offsetLeft
+    alias_native :offset_top, :offsetTop
+    alias_native :page_left, :pageLeft
+    alias_native :page_top, :pageTop
+    alias_native :width, :width
+    alias_native :height, :height
+    alias_native :scale, :scale
+
+    attr_accessor :native
+  end
+
+  class Window
+    def visual_viewport
+      @visual_viewport ||= VisualViewport.new(`#@native.visualViewport`)
+
+      # Polyfill can take some time to load
+      @visual_viewport.native ||= `#@native.visualViewport`
+
+      @visual_viewport
+    end
+  end
+end

data/opal/browser/window/size.rb

@@ -1,35 +1,73 @@
 module Browser; class Window
 
+# Allows access and manipulation of the {Window} size.
 class Size
+  # @private
   def initialize(window)
     @window = window
     @native = window.to_n
   end
 
-  def set(what)
-    width  = what[:width]  || self.width
-    height = what[:height] || self.height
+  def set(*args)
+    if Hash === args.first
+      width, height = args.first.values_at(:width, :height)
+    else
+      width, height = args
+    end
+
+    width  ||= self.width
+    height ||= self.height
 
     `#@native.resizeTo(#{width}, #{height})`
 
     self
   end
 
-  def width
-    `#@native.outerWidth`
+  # @!attribute width
+  # @return [Integer] the width of the window
+
+  # @!attribute height
+  # @return [Integer] the height of the window
+
+  if Browser.supports? 'Window.outerSize'
+    def width
+      `#@native.outerWidth`
+    end
+
+    def height
+      `#@native.outerHeight`
+    end
+  else
+    def width
+      raise NotImplementedError, 'window outer size not supported'
+    end
+
+    def height
+      raise NotImplementedError, 'window outer size not supported'
+    end
   end
 
   def width=(value)
     set(width: value)
   end
 
-  def height
-    `#@native.outerHeight`
-  end
-
   def height=(value)
     set(height: value)
   end
+
+  # @!attribute inner_width
+  # @return [Integer] the inner width of the window
+
+  def inner_width
+    `#@native.innerWidth`
+  end
+
+  # @!attribute inner_height
+  # @return [Integer] the inner height of the window
+
+  def inner_height
+    `#@native.innerHeight`
+  end
 end
 
 end; end

data/opal/browser/window/view.rb

@@ -6,12 +6,45 @@ class View
     @native = window.to_n
   end
 
-  def width
-    `#@native.innerWidth`
+  if Browser.supports? 'Window.innerSize'
+    def width
+      `#@native.innerWidth`
+    end
+
+    def height
+      `#@native.innerHeight`
+    end
+  elsif Browser.supports? 'Element.clientSize'
+    def height
+      `#@native.document.documentElement.clientHeight`
+    end
+
+    def width
+      `#@native.document.documentElement.clientWidth`
+    end
+  else
+    def width
+      raise NotImplementedError, 'window size unsupported'
+    end
+
+    def height
+      raise NotImplementedError, 'window size unsupported'
+    end
+  end
+
+  # Get a device pixel ratio. Can be used to handle desktop browser
+  # zoom, retina devices and custom screen scale for mobile devices.
+  # Use $window.visual_viewport.scale to handle mobile zoom.
+  def zoom
+    `#@native.devicePixelRatio`
   end
 
-  def height
-    `#@native.innerHeight`
+  # Handle #pixel_ratio changes. This will trigger a block on zoom.
+  def on_zoom &block
+    %x{
+      var mqString = "(resolution: " + #@native.devicePixelRatio + "dppx)";
+      #@native.matchMedia(mqString).addListener(#{block.to_n});
+    }
   end
 end
 

data/opal/browser/window.rb

@@ -1,10 +1,5 @@
-require 'browser/interval'
-require 'browser/timeout'
-
 require 'browser/window/view'
 require 'browser/window/size'
-require 'browser/window/scroll'
-require 'browser/window/compatibility'
 
 module Browser
 
@@ -34,7 +29,12 @@ class Window
     }
   end
 
-  include Native
+  include Browser::NativeCachedWrapper
+  include Event::Target
+
+  target {|value|
+    $window if `#{value} == window`
+  }
 
   # Alert the passed string.
   def alert(value)
@@ -44,8 +44,8 @@ class Window
   end
 
   # Display a prompt dialog with the passed string as text.
-  def prompt(value)
-    `#@native.prompt(value) || nil`
+  def prompt(value, default=nil)
+    `#@native.prompt(value, #{default || ""}) || nil`
   end
 
   # Display a confirmation dialog with the passed string as text.
@@ -53,41 +53,61 @@ class Window
     `#@native.confirm(value) || false`
   end
 
+  # @!attribute [r] parent
+  # @return [Window] parent of the current window or subframe
+  def parent
+    @parent ||= Browser::Window.new(`#@native.parent`)
+  end
+
+  # @!attribute [r] top
+  # @return [Window] reference to the topmost window in the window hierarchy
+  def top
+    @top ||= Browser::Window.new(`#@native.top`)
+  end
+
+  # @!attribute [r] opener
+  # @return [Window] reference to the window that opened the window using `open`
+  def opener
+    @opener ||= Browser::Window.new(`#@native.opener`)
+  end
+
   # Get the {View} for the window.
   #
   # @return [View]
   def view
-    View.new(self)
+    @view ||= View.new(self)
   end
 
   # Get the {Size} for this window.
   #
   # @return [Size]
   def size
-    Size.new(self)
+    @size ||= Size.new(self)
   end
 
-  # Get the {Scroll} for this window.
+  # Get the {DOM::Element::Scroll} for this window.
   #
-  # @return [Scroll]
+  # @return [DOM::Element::Scroll]
   def scroll
-    Scroll.new(self)
+    @scroll ||= DOM::Element::Scroll.new(self)
   end
 
-  # Send a message to the window.
-  #
-  # @param message [String] the message
-  # @param options [Hash] optional `to: target`
-  def send!(message, options = {})
-    `#@native.postMessage(#{message}, #{options[:to] || '*'})`
+  if Browser.supports? 'Window.send'
+    def send(message, options = {})
+      `#@native.postMessage(#{message}, #{options[:to] || '*'})`
+    end
+  else
+    # Send a message to the window.
+    #
+    # @param message [String] the message
+    # @param options [Hash] optional `to: target`
+    def send(message, options = {})
+      raise NotImplementedError, 'message sending unsupported'
+    end
   end
 
   def close
-    %x{
-      return (window.open('', '_self', '') && window.close()) ||
-             (window.opener = null && window.close()) ||
-             (window.opener = '' && window.close());
-    }
+    `#{@native}.close()`
   end
 end
 
@@ -102,8 +122,8 @@ module Kernel
   end
 
   # (see Browser::Window#prompt)
-  def prompt(value)
-    $window.prompt(value)
+  def prompt(value, default=nil)
+    $window.prompt(value, default)
   end
 
   # (see Browser::Window#confirm)

data/opal/browser.rb

@@ -1,10 +1 @@
-require 'native'
-require 'paggio'
-
-require 'browser/version'
-require 'browser/utils'
-require 'browser/compatibility'
-
-require 'browser/window'
-require 'browser/dom'
-require 'browser/css'
+require 'browser/setup/traditional'

data/opal/opal-browser.rb

@@ -0,0 +1 @@
+require 'browser'

data/opal-browser.gemspec

@@ -2,22 +2,20 @@ $LOAD_PATH << File.expand_path('../opal', __FILE__)
 require 'browser/version'
 
 Gem::Specification.new {|s|
-  s.name         = 'opal-browser'
-  s.version      = Browser::VERSION
-  s.author       = 'meh.'
-  s.email        = 'meh@schizofreni.co'
-  s.homepage     = 'http://github.com/opal/opal-browser'
-  s.platform     = Gem::Platform::RUBY
-  s.summary      = 'Browser support for Opal.'
+  s.name     = 'opal-browser'
+  s.version  = Browser::VERSION
+  s.author   = ['meh.', 'hmdne']
+  s.email    = 'meh@schizofreni.co'
+  s.homepage = 'http://github.com/opal/opal-browser'
+  s.platform = Gem::Platform::RUBY
+  s.summary  = 'Browser support for Opal.'
+  s.license  = 'MIT'
 
   s.files         = `git ls-files`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.require_paths = ['lib']
 
-  s.add_dependency 'opal', '>= 0.5.5'
-  s.add_dependency 'paggio'
-
-  s.add_development_dependency 'opal-rspec'
-  s.add_development_dependency 'rake'
+  s.add_dependency 'opal', ['>= 1.0', '< 2.0']
+  s.add_dependency 'paggio', '>= 0.3.0'
 }

data/spec/database/sql_spec.rb

@@ -0,0 +1,139 @@
+require 'spec_helper'
+require 'browser/database/sql'
+
+describe Browser::Database::SQL do
+  SQL  = Browser::Database::SQL
+  SIZE = 1024 * 1024
+
+  describe '#new' do
+    it 'sets the attributes properly' do
+      sql = SQL.new('test', description: 'trains', size: SIZE)
+
+      expect(sql.name).to eq('test')
+      expect(sql.description).to eq('trains')
+      expect(sql.size).to eq(SIZE)
+    end
+
+    it 'sets the version properly' do
+      sql = SQL.new('test2', version: '1.0', size: SIZE)
+      expect(sql.version).to eq('1.0')
+
+      sql = SQL.new('test', size: SIZE)
+      expect(sql.version).to eq('')
+    end
+  end
+
+  describe '#transaction' do
+    it 'calls the block with the transaction' do
+      sql = SQL.new('test', size: SIZE)
+
+      promise = Browser::Promise.new
+      sql.transaction {|t|
+        expect(t).to be_a(SQL::Transaction)
+        promise.resolve
+      }
+      promise.for_rspec
+    end
+
+    it 'the transaction database is the right one' do
+      sql = SQL.new('test', size: SIZE)
+
+      promise = Browser::Promise.new
+      sql.transaction {|t|
+        expect(t.database).to eq(sql)
+        promise.resolve
+      }
+      promise.for_rspec
+    end
+  end
+
+  describe SQL::Transaction do
+    describe '#query' do
+      it 'returns a promise' do
+        sql = SQL.new('test', size: SIZE)
+
+        promise = Browser::Promise.new
+        sql.transaction {|t|
+          expect(t.query('hue')).to be_a(Promise)
+          promise.resolve
+        }
+        promise.for_rspec
+      end
+
+      it 'resolves on success' do
+        sql = SQL.new('test', size: SIZE)
+
+        promise = Browser::Promise.new
+        sql.transaction {|t|
+          t.query('CREATE TABLE IF NOT EXISTS test(ID INTEGER PRIMARY KEY ASC, a TEXT)').then {|r|
+            expect(r).to be_a(SQL::Result)
+            promise.resolve
+          }
+        }
+        promise.for_rspec
+      end
+
+      it 'rejects on failure' do
+        sql = SQL.new('test', size: SIZE)
+
+        promise = Browser::Promise.new
+        sql.transaction {|t|
+          t.query('huehue').rescue {|e|
+            expect(e).to be_a(SQL::Error::Syntax)
+            promise.resolve
+          }
+        }
+        promise.for_rspec
+      end
+    end
+  end
+
+  describe SQL::Result do
+    describe '#length' do
+      it 'has the proper length' do
+        sql = SQL.new('test', size: SIZE)
+
+        promise = Browser::Promise.new
+        sql.transaction {|t|
+          t.query('SELECT 1').then {|r|
+            expect(r.length).to eq(1)
+            promise.resolve
+          }
+        }
+        promise.for_rspec
+      end
+    end
+
+    describe '#[]' do
+      it 'returns a row' do
+        sql = SQL.new('test', size: SIZE)
+
+        promise = Browser::Promise.new
+        sql.transaction {|t|
+          t.query('SELECT 1, 2, 3').then {|r|
+            expect(r[0]).to be_a(SQL::Row)
+            expect(r[-1]).to be_a(SQL::Row)
+
+            expect(r[0]).to eq(r[-1])
+            promise.resolve
+          }
+        }
+        promise.for_rspec
+      end
+
+      it 'returns nil on missing row' do
+        sql = SQL.new('test', size: SIZE)
+
+        promise = Browser::Promise.new
+        sql.transaction {|t|
+          t.query('SELECT 1, 2, 3').then {|r|
+            expect(r[5]).to be_nil
+            expect(r[-5]).to be_nil
+            promise.resolve
+          }
+        }
+        promise.for_rspec
+      end
+    end
+  end
+end if Browser::Database::SQL.supported?