opal-browser 0.2.0.beta1 → 0.3.2

data/opal/browser/storage.rb

@@ -27,8 +27,6 @@ class Storage
     }]
   end
 
-  include Enumerable
-
   # @!attribute [r] name
   # @return [String] the name of the storage
   attr_reader :name
@@ -45,13 +43,7 @@ class Storage
     @data   = {}
 
     autosave!
-    init
-  end
-
-  # @!attribute [r] encoded_name
-  # @return [String] the generated name
-  def encoded_name
-    "$opal.storage.#@name"
+    reload
   end
 
   # Check if autosaving is enabled.
@@ -72,6 +64,8 @@ class Storage
     @autosave = false
   end
 
+  include Enumerable
+
   # Iterate over the (key, value) pairs in the storage.
   #
   # @yield [key, value]
@@ -83,9 +77,8 @@ class Storage
     self
   end
 
-  # Get a value in the storage.
-  def [](key)
-    @data[key]
+  def method_missing(*args, &block)
+    @data.__send__(*args, &block)
   end
 
   # Set a value in the storage.
@@ -98,7 +91,7 @@ class Storage
   # Delete a value from the storage.
   def delete(key)
     @data.delete(key).tap {
-      save if autosave
+      save if autosave?
     }
   end
 
@@ -120,57 +113,82 @@ class Storage
     end
   end
 
-  # @!method init
-  #   @private
+  # Call the block between a [#reload] and [#save].
+  def commit(&block)
+    autosave  = @autosave
+    @autosave = false
+    result    = nil
+
+    reload
+
+    begin
+      result = block.call
+      save
+    rescue
+      reload
+      raise
+    ensure
+      @autosave = autosave
+    end
+
+    result
+  end
+
+  def to_h
+    @data
+  end
+
+  # @!method reload
+  #   Load the storage.
 
   # @!method save
   #   Persist the current state to the storage.
 
   if Browser.supports? 'Storage.local'
-    def init
-      replace `#@window.localStorage[#{encoded_name}] || '{}'`
+    def reload
+      replace `#@window.localStorage[#@name] || '{}'`
     end
 
     def save
-      `#@window.localStorage[#{encoded_name}] = #{JSON.dump(self)}`
+      `#@window.localStorage[#@name] = #{JSON.dump(self)}`
     end
   elsif Browser.supports? 'Storage.global'
-    def init
-      replace `#@window.globalStorage[#@window.location.hostname][#{encoded_name}] || '{}'`
+    def reload
+      replace `#@window.globalStorage[#@window.location.hostname][#@name] || '{}'`
     end
 
     def save
-      `#@window.globalStorage[#@window.location.hostname][#{encoded_name}] = #{JSON.dump(self)}`
+      `#@window.globalStorage[#@window.location.hostname][#@name] = #{JSON.dump(self)}`
     end
   elsif Browser.supports? 'Element.addBehavior'
-    def init
+    def reload
       %x{
         #@element = #@window.document.createElement('link');
         #@element.addBehavior('#default#userData');
 
         #@window.document.getElementsByTagName('head')[0].appendChild(#@element);
 
-        #@element.load(#{encoded_name});
+        #@element.load(#@name);
       }
 
-      replace `#@element.getAttribute(#{encoded_name}) || '{}'`
+      replace `#@element.getAttribute(#@name) || '{}'`
     end
 
     def save
       %x{
-        #@element.setAttribute(#{encoded_name}, #{JSON.dump(self)});
-        #@element.save(#{encoded_name});
+        #@element.setAttribute(#@name, #{JSON.dump(self)});
+        #@element.save(#@name);
       }
     end
   else
-    def init
+    def reload
       $document.cookies.options expires: 60 * 60 * 24 * 365
 
-      replace $document.cookies[encoded_name]
+      replace $document.cookies[@name]
     end
 
     def save
-      $document.cookies[encoded_name] = self
+      $document.cookies[@name] = JSON.dump(self)
     end
   end
 
@@ -178,12 +196,12 @@ class Storage
   #
   # @return [String] the JSON representation
   def to_json
-    io = StringIO.new("{")
+    io = StringIO.new << "{"
 
     io << JSON.create_id.to_json << ":" << self.class.name.to_json << ","
 
-    each {|key, value|
-      io << key.to_json.to_json << ":" << value.to_json << ","
+    @data.each {|key, value|
+      io << key.to_json.to_s << ":" << value.to_json << ","
     }
 
     io.seek(-1, IO::SEEK_CUR)
@@ -202,12 +220,12 @@ class SessionStorage < Storage
     Browser.supports? 'Storage.session'
   end
 
-  def init
-    replace `#@window.sessionStorage[#{encoded_name}] || '{}'`
+  def reload
+    replace `#@window.sessionStorage[#@name] || '{}'`
   end
 
   def save
-    `#@window.sessionStorage[#{encoded_name}] = #{JSON.dump(self)}`
+    `#@window.sessionStorage[#@name] = #{JSON.dump(self)}`
   end
 end
 

data/opal/browser/support.rb

@@ -1,9 +1,14 @@
+# The engine the browser is running on.
+#
+# Keep in mind it uses the user agent to know, so it's not reliable in case of
+# spoofing.
 BROWSER_ENGINE = `/MSIE|WebKit|Presto|Gecko/.exec(navigator.userAgent)[0]`.downcase rescue :unknown
 
 module Browser
   # @private
   @support = `{}`
 
+  # Check if the browser supports the given feature.
   def self.supports?(feature)
     if defined?(`#@support[#{feature}]`)
       return `#@support[#{feature}]`
@@ -25,8 +30,11 @@ module Browser
       when 'ActiveX'
         defined?(`window.ActiveXObject`)
 
+      when 'WebSQL'
+        defined?(`window.openDatabase`)
+
       when 'Query.css'
-        defined?(`Element.prototype.querySelectorAll`)
+        defined?(`document.querySelectorAll`)
 
       when 'Query.xpath'
         defined?(`document.evaluate`)
@@ -62,6 +70,9 @@ module Browser
         defined?(`document.documentElement.currentStyle`)
 
       when 'Window.send'
+        defined?(`window.postMessage`)
+
+      when 'Window.send (Asynchronous)'
         if defined?(`window.postMessage`) && !defined?(`window.importScripts`)
           %x{
             var ok  = true,
@@ -70,11 +81,14 @@ module Browser
             window.onmessage = function() { ok = false; };
             window.postMessage("", "*")
             window.onmessage = old;
-          }
 
-          `ok`
+            return ok;
+          }
         end
 
+      when 'Window.send (Synchronous)'
+        !supports?('Window.send (Asynchronous)')
+
       when 'Window.innerSize'
         defined?(`window.innerHeight`)
 
@@ -84,11 +98,54 @@ module Browser
       when 'Window.scroll'
         defined?(`document.documentElement.scrollLeft`)
 
+      when 'Window.scrollBy'
+        defined?(`document.documentElement.scrollBy`)
+
       when 'Window.pageOffset'
         defined?(`window.pageXOffset`)
 
+      when 'Attr.isId'
+        %x{
+          var div = document.createElement('div');
+              div.setAttribute('id', 'xxxxxxxxxxxxx');
+
+          return typeof(div.attributes['id'].isId) !== "undefined";
+        }
+
       when 'Element.addBehavior'
-        defined?(`document.body.addBehavior`)
+        defined?(`document.documentElement.addBehavior`)
+
+      when 'Element.className'
+        %x{
+          var div = document.createElement("div");
+              div.setAttribute('className', 'x');
+
+          return div.className === 'x';
+        }
+
+      when 'Element.class'
+        %x{
+          var div = document.createElement("div");
+              div.setAttribute('class', 'x');
+
+          return div.className === 'x';
+        }
+
+      when 'Element.for'
+        %x{
+          var label = document.createElement("label");
+              label.setAttribute('for', 'x');
+
+          return label.htmlFor === 'x';
+        }
+
+      when 'Element.htmlFor'
+        %x{
+          var label = document.createElement("label");
+              label.setAttribute('htmlFor', 'x');
+
+          return label.htmlFor === 'x';
+        }
 
       when 'Element.clientSize'
         defined?(`document.documentElement.clientHeight`)
@@ -128,7 +185,7 @@ module Browser
           `new MouseEvent("click")`
 
           true
-        rescue
+        rescue StandardError, JS::Error
           false
         end
 
@@ -215,11 +272,21 @@ module Browser
 
       when 'Animation.cancelRequest (Chrome)', 'Animation.cancelRequest (Safari)'
         defined?(`window.webkitCancelRequestAnimationFrame`)
+
+      when 'Audio'
+        defined?(`window.AudioContext`)
+
+      when 'Audio (Safari)', 'Audio (Chrome)'
+        defined?(`window.webkitAudioContext`)
+      
+      when 'Custom Elements'
+        defined?(`window.customElements`)
     end
 
     `#@support[#{feature}] = #{support}`
   end
 
+  # Check if the given polyfill is loaded.
   def self.loaded?(name)
     case name
     when 'Sizzle'

data/opal/browser/utils.rb

@@ -1,51 +1,133 @@
 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
-    to_s.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
-    to_s.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
 
@@ -54,21 +136,19 @@ class 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]
-    }]
+    warn "opal-browser: Hash.decode_uri is deprecated. Please use FormData.parse_query"
+    FormData.parse_query(string)
   end
 
   # Encode the Hash to an URL form.
   #
+  # @deprecated Please use FormData.build_query
   # @return [String] the URL encoded form
   def encode_uri
-    map {|name, value|
-      "#{name.to_s.encode_uri_component}=#{value.to_s.encode_uri_component}"
-    }.join(?&)
+    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.2.0.beta1'
+  VERSION = '0.3.2'
 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,20 +1,34 @@
 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
 
+  # @!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`
@@ -40,6 +54,20 @@ class Size
   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

@@ -31,6 +31,21 @@ class View
       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
+
+  # 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
 
 end; end