opal-browser 0.2.0.beta1 → 0.3.2

data/opal/browser/interval.rb

@@ -19,14 +19,11 @@ class Interval
     @block  = block
 
     @aborted = false
-    @stopped = true
-
-    start
   end
 
   # Check if the interval has been stopped.
   def stopped?
-    @stopped
+    @id.nil?
   end
 
   # Check if the interval has been aborted.
@@ -44,6 +41,8 @@ class Interval
 
   # Stop the interval, it will be possible to start it again.
   def stop
+    return if stopped?
+
     `#@window.clearInterval(#@id)`
 
     @stopped = true
@@ -53,10 +52,14 @@ class Interval
   # Start the interval if it has been stopped.
   def start
     raise "the interval has been aborted" if aborted?
-
     return unless stopped?
 
-    @id = `#@window.setInterval(#{@block.to_n}, #@every * 1000)`
+    @id = `#@window.setInterval(#@block, #@every * 1000)`
+  end
+
+  # Call the [Interval] block.
+  def call
+    @block.call
   end
 end
 
@@ -67,22 +70,42 @@ class Window
   #
   # @return [Interval] the object representing the interval
   def every(time, &block)
+    Interval.new(@native, time, &block).tap(&:start)
+  end
+
+  # Execute the block every given seconds, you have to call [#start] on it
+  # yourself.
+  #
+  # @param time [Float] the seconds between every call
+  #
+  # @return [Interval] the object representing the interval
+  def every!(time, &block)
     Interval.new(@native, time, &block)
   end
 end
 
 end
 
+module Kernel
+  # (see Browser::Window#every)
+  def every(time, &block)
+    $window.every(time, &block)
+  end
+
+  # (see Browser::Window#every!)
+  def every!(time, &block)
+    $window.every!(time, &block)
+  end
+end
+
 class Proc
   # (see Browser::Window#every)
   def every(time)
     $window.every(time, &self)
   end
-end
 
-module Kernel
-  # (see Browser::Window#every)
-  def every(time, &block)
-    $window.every(time, &block)
+  # (see Browser::Window#every!)
+  def every!(time)
+    $window.every!(time, &self)
   end
 end

data/opal/browser/location.rb

@@ -4,7 +4,7 @@ module Browser
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/Location
 class Location
-  include Native
+  include Browser::NativeCachedWrapper
 
   # Change the location.
   #
@@ -66,6 +66,12 @@ class Location
   # @return [String] the query part of the location URI
   alias_native :query, :search
   alias_native :query=, :search=
+
+  # Returns the full path of the location URI, including
+  # the query string and fragment, eg. /site?a=b#c
+  def full_path
+    path + query + fragment
+  end
 end
 
 class Window

data/opal/browser/navigator.rb

@@ -4,7 +4,7 @@ module Browser
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator
 class Navigator
-  include Native
+  include Browser::NativeCachedWrapper
 
   Version = Struct.new(:major, :minor, :build)
   Product = Struct.new(:name, :version)
@@ -12,7 +12,7 @@ class Navigator
 
   # Representation of a MIME type.
   class MimeType
-    include Native
+    include Browser::NativeCachedWrapper
 
     # @!attribute [r] plugin
     # @return [Plugin] the plugin for the MIME type
@@ -62,6 +62,27 @@ class Navigator
     alias_native :version
   end
 
+  # Representation for the array of plugins.
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins
+  class Plugins < Native::Array
+    def initialize(plugins)
+      super plugins do |p|
+        Plugin.new(p)
+      end
+    end
+
+    # Reload all browser plugins.
+    def refresh
+      `#@native.refresh(false)`
+    end
+
+    # Reload all browser plugins reloading pages that contain `<embed>`s.
+    def refresh!
+      `#@native.refresh(true)`
+    end
+  end
+
   # @!attribute [r] code
   # @return [String] the browser code name
   alias_native :code, :appCodeName
@@ -112,11 +133,9 @@ class Navigator
   alias_native :platform
 
   # @!attribute [r] plugins
-  # @return [Native::Array<Plugin>] the enabled plugins
+  # @return [Plugins] the enabled plugins
   def plugins
-    Native::Array.new `#@native.plugins` do |p|
-      Plugin.new(p)
-    end
+    Plugins.new(`#@native.plugins`)
   end
 
   # @!attribute [r] product
@@ -141,13 +160,114 @@ class Navigator
   rescue
     false
   end
+
+  # Representation of user location based on Geolocation API
+  #
+  # Example usage:
+  # ```
+  # $window.navigator.geolocate.then do |pos|
+  #   puts "#{pos.coords.latitude}, #{pos.coords.longitude}, #{pos.coords.accuracy}"
+  # end
+  # ```
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/Position
+  class Position
+    include Browser::NativeCachedWrapper
+
+    class Coords
+      include Native::Wrapper
+
+      # @!attribute [r] latitude
+      alias_native :latitude
+      # @!attribute [r] longitude
+      alias_native :longitude
+      # @!attribute [r] altitude
+      alias_native :altitude
+      # @!attribute [r] accuracy
+      alias_native :accuracy
+      # @!attribute [r] altitude_accuracy
+      alias_native :altitude_accuracy, :altitudeAccuracy
+      # @!attribute [r] heading
+      alias_native :heading
+      # @!attribute [r] speed
+      alias_native :speed
+    end
+
+    # @!attribute [r] timestamp
+    alias_native :timestamp
+
+    def coords
+      @coords ||= Coords.new(`#@native.coords`)
+    end
+  end
+
+  # Geolocates the user once
+  #
+  # @return [Promise] promise that resolves to the {Position} object
+  def geolocate(max_age: 0, timeout: Float::INFINITY, high_accuracy: false)
+    promise = Promise.new
+    succ = proc { |i| promise.resolve(Position.new(i)) }
+    fail = proc { |i| promise.reject(Native(i)) }
+    opts = {maxAge: max_age, timeout: timeout, enableHighAccuracy: high_accuracy}
+    `#@native.geolocation.getCurrentPosition(#{succ.to_n}, #{fail.to_n}, #{opts.to_n})`
+    promise
+  end
+
+  # Geolocates the user multiple times and calls a block with his location
+  # until #stop_tracking is called with a returned id. Calls a proc named error
+  # if error happens.
+  #
+  # @return [Integer] an ID that can be used as an argument to #stop_tracking
+  def track(max_age: 0, timeout: Float::INFINITY, high_accuracy: false, error: proc{|i|}, &block)
+    opts = {maxAge: max_age, timeout: timeout, enableHighAccuracy: high_accuracy}
+    succ = proc { |i| block.call(Position.new(i)) }
+    fail = proc { |i| error.call(Native(i)) }
+    `#@native.geolocation.watchPosition(#{succ.to_n}, #{fail.to_n}, #{opts.to_n})`
+  end
+
+  def stop_tracking(id)
+    `#@native.geolocation.clearWatch(#{id})`
+  end
+
+  # Triggers a vibration on a device. A pattern can be either a number of
+  # miliseconds for a vibration length, or an array of lengths (in
+  # miliseconds) which describes a vibration pattern - first element of said
+  # array describes how long the device should vibrate, second - how long to
+  # stop for and so on.
+  def vibrate(pattern)
+    `#@native.vibrate(#{pattern.to_n})`
+  end
+
+  # Check a battery status of user device. This API is deprecated in the browser
+  # context and usable mainly in privileged contexts.
+  #
+  # @return [Promise] a promise that resolves with a battery status
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery
+  def get_battery
+    promise = Promise.new
+    yes = proc { |r| promise.resolve(Native(r)) }
+    no = proc { |r| promise.reject(Native(r)) }
+    `#@native.getBattery().then(#{yes.to_n}).catch(#{no.to_n})`
+    promise
+  end
+
+  # Queue to send a small amount of data to a server.
+  #
+  # @param url [String] url to trigger
+  # @param payload [String, Blob, FormData, Hash] data to send
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
+  def send_beacon(url, payload=nil)
+    `#@native.sendBeacon(#{url}, #{payload.to_n})`
+  end
 end
 
 class Window
   # @!attribute [r] navigator
   # @return [Navigator] the navigator
   def navigator
-    Navigator.new(`#@native.navigator`) if `#@native.navigator`
+    @navigator ||= Navigator.new(`#@native.navigator`) if `#@native.navigator`
   end
 end
 

data/opal/browser/polyfill/visual_viewport.rb

@@ -0,0 +1,216 @@
+# VisualViewport polyfill (mainly for Firefox browsers) taken from:
+# https://github.com/WICG/visual-viewport/blob/gh-pages/polyfill/visualViewport.js
+# Licensed under "W3C 3-clause BSD License".
+
+# Let's make sure the functions aren't poluting the global context:
+%x{
+(function(){ "use strict";
+
+// This is hacky but necessary in order to get the innerWidth/Height without
+// page scale applied reliably.
+function updateUnscaledDimensions() {
+  if (!window.viewPolyfill.iframeDummy) {
+      var iframe = document.createElement('iframe');
+      iframe.style.position="absolute";
+      iframe.style.width="100%";
+      iframe.style.height="100%";
+      iframe.style.left="0px";
+      iframe.style.top="0px";
+      iframe.style.border="0";
+      iframe.style.visibility="hidden";
+      iframe.style.zIndex="-1";
+      iframe.srcdoc = "<!DOCTYPE html><html><body style='margin:0px; padding:0px'></body></html>";
+
+      document.body.appendChild(iframe);
+      window.viewPolyfill.iframeDummy = iframe;
+  }
+
+  var iframe = window.viewPolyfill.iframeDummy;
+
+  var documentRect = document.documentElement.getBoundingClientRect();
+  var iframeBody = iframe.contentDocument.body;
+  iframeBody.style.width = documentRect.width + 'px';
+  iframeBody.style.height = documentRect.height + 'px';
+
+  // Hide overflow temporarily so that the iframe size isn't shrunk by
+  // scrollbars.
+  var prevDocumentOverflow = document.documentElement.style.overflow;
+  document.documentElement.style.overflow = "hidden";
+
+  var iframeWindow = window.viewPolyfill.iframeDummy.contentWindow;
+  window.viewPolyfill.unscaledInnerWidth = iframeWindow.innerWidth;
+  window.viewPolyfill.unscaledInnerHeight = iframeWindow.innerHeight;
+
+  document.documentElement.style.overflow = prevDocumentOverflow;
+}
+
+function fireScrollEvent() {
+  var listeners = window.viewPolyfill.scrollEventListeners;
+  for (var i = 0; i < listeners.length; i++)
+    listeners[i]();
+}
+
+function fireResizeEvent() {
+  var listeners = window.viewPolyfill.resizeEventListeners;
+  for (var i = 0; i < listeners.length; i++)
+    listeners[i]();
+}
+
+function updateViewportChanged() {
+    var scrollChanged =
+        window.viewPolyfill.offsetLeftSinceLastChange != window.visualViewport.offsetLeft ||
+        window.viewPolyfill.offsetTopSinceLastChange != window.visualViewport.offsetTop;
+
+    var sizeChanged =
+        window.viewPolyfill.widthSinceLastChange != window.visualViewport.width ||
+        window.viewPolyfill.heightSinceLastChange != window.visualViewport.height ||
+        window.viewPolyfill.scaleSinceLastChange != window.visualViewport.scale;
+
+    window.viewPolyfill.offsetLeftSinceLastChange = window.visualViewport.offsetLeft;
+    window.viewPolyfill.offsetTopSinceLastChange = window.visualViewport.offsetTop;
+    window.viewPolyfill.widthSinceLastChange = window.visualViewport.width;
+    window.viewPolyfill.heightSinceLastChange = window.visualViewport.height;
+    window.viewPolyfill.scaleSinceLastChange = window.visualViewport.scale;
+
+    if (scrollChanged)
+      fireScrollEvent();
+
+    if (sizeChanged)
+      fireResizeEvent();
+
+    setTimeout(updateViewportChanged, 500);
+}
+
+function registerChangeHandlers() {
+    window.addEventListener('scroll', updateViewportChanged, {'passive': true});
+    window.addEventListener('resize', updateViewportChanged, {'passive': true});
+    window.addEventListener('resize', updateUnscaledDimensions, {'passive': true});
+}
+
+var isChrome = navigator.userAgent.indexOf('Chrome') > -1;
+var isSafari = navigator.userAgent.indexOf("Safari") > -1;
+var isIEEdge = navigator.userAgent.indexOf('Edge') > -1;
+
+if ((isChrome)&&(isSafari))
+    isSafari=false;
+
+if (window.visualViewport) {
+    console.log('Using real visual viewport API');
+} else {
+    console.log('Polyfilling Viewport API');
+    var layoutDummy = document.createElement('div');
+    layoutDummy.style.width = "100%";
+    layoutDummy.style.height = "100%";
+    if (isSafari) {
+        layoutDummy.style.position = "fixed";
+    } else {
+        layoutDummy.style.position = "absolute";
+    }
+    layoutDummy.style.left = "0px";
+    layoutDummy.style.top = "0px";
+    layoutDummy.style.visibility = "hidden";
+
+    window.viewPolyfill = {
+      "offsetLeftSinceLastChange": null,
+      "offsetTopSinceLastChange": null,
+      "widthSinceLastChange": null,
+      "heightSinceLastChange": null,
+      "scaleSinceLastChange": null,
+      "scrollEventListeners": [],
+      "resizeEventListeners": [],
+      "layoutDummy": layoutDummy,
+      "iframeDummy": null,
+      "unscaledInnerWidth": 0,
+      "unscaledInnerHeight": 0
+    }
+
+    registerChangeHandlers();
+
+    // TODO: Need to wait for <body> to be loaded but this is probably
+    // later than needed.
+    window.addEventListener('load', function() {
+        updateUnscaledDimensions();
+        document.body.appendChild(layoutDummy);
+
+        var viewport = {
+          get offsetLeft() {
+            if (isSafari) {
+              // Note: Safari's getBoundingClientRect left/top is wrong when pinch-zoomed requiring this "unscaling".
+              return window.scrollX - (layoutDummy.getBoundingClientRect().left * this.scale + window.scrollX * this.scale);
+            } else {
+              return window.scrollX + layoutDummy.getBoundingClientRect().left;
+            }
+          },
+          get offsetTop() {
+            if (isSafari) {
+              // Note: Safari's getBoundingClientRect left/top is wrong when pinch-zoomed requiring this "unscaling".
+              return window.scrollY - (layoutDummy.getBoundingClientRect().top * this.scale + window.scrollY * this.scale);
+            } else {
+              return window.scrollY + layoutDummy.getBoundingClientRect().top;
+            }
+          },
+          get width() {
+            var clientWidth = document.documentElement.clientWidth;
+            if (isIEEdge) {
+                // If there's no scrollbar before pinch-zooming, Edge will add
+                // a non-layout-affecting overlay scrollbar. This won't be
+                // reflected in documentElement.clientWidth so we need to
+                // manually subtract it out.
+                if (document.documentElement.clientWidth == window.viewPolyfill.unscaledInnerWidth
+                    && this.scale > 1) {
+                    var oldWidth = document.documentElement.clientWidth;
+                    var prevHeight = layoutDummy.style.height;
+                    // Lengthen the dummy to add a layout vertical scrollbar.
+                    layoutDummy.style.height = "200%";
+                    var scrollbarWidth = oldWidth - document.documentElement.clientWidth;
+                    layoutDummy.style.width = prevHeight;
+                    clientWidth -= scrollbarWidth;
+                }
+            }
+            return clientWidth / this.scale;
+          },
+          get height() {
+            var clientHeight = document.documentElement.clientHeight;
+            if (isIEEdge) {
+                // If there's no scrollbar before pinch-zooming, Edge will add
+                // a non-layout-affecting overlay scrollbar. This won't be
+                // reflected in documentElement.clientHeight so we need to
+                // manually subtract it out.
+                if (document.documentElement.clientHeight == window.viewPolyfill.unscaledInnerHeight
+                    && this.scale > 1) {
+                    var oldHeight = document.documentElement.clientHeight;
+                    var prevWidth = layoutDummy.style.width;
+                    // Widen the dummy to add a layout horizontal scrollbar.
+                    layoutDummy.style.width = "200%";
+                    var scrollbarHeight = oldHeight - document.documentElement.clientHeight;
+                    layoutDummy.style.width = prevWidth;
+                    clientHeight -= scrollbarHeight;
+                }
+            }
+            return clientHeight / this.scale;
+          },
+          get scale() {
+            return window.viewPolyfill.unscaledInnerWidth / window.innerWidth;
+          },
+          get pageLeft() {
+            return window.scrollX;
+          },
+          get pageTop() {
+            return window.scrollY;
+          },
+          "addEventListener": function(name, func) {
+            // TODO: Match event listener semantics. i.e. can't add the same callback twice.
+            if (name === 'scroll')
+              window.viewPolyfill.scrollEventListeners.push(func);
+            else if (name === 'resize')
+              window.viewPolyfill.resizeEventListeners.push(func);
+          }
+        };
+
+        window.visualViewport = viewport;
+    });
+}
+
+})();
+
+}

data/opal/browser/screen.rb

@@ -4,8 +4,8 @@ module Browser
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/Window.screen
 class Screen
-  include Native
-  include DOM::Event::Target
+  include Browser::NativeCachedWrapper
+  include Event::Target
 
   target {|value|
     Screen.new(value) if Native.is_a?(value, `window.Screen`)
@@ -59,7 +59,7 @@ class Window
   # @!attribute [r] screen
   # @return [Screen] the screen for the window
   def screen
-    Screen.new(`#@native.screen`)
+    @screen ||= Screen.new(`#@native.screen`)
   end
 end
 

data/opal/browser/setup/base.rb

@@ -0,0 +1,6 @@
+# browser/setup/base: Setup only the base requires
+
+require 'browser/version'
+require 'browser/utils'
+require 'browser/form_data'
+require 'browser/support'

data/opal/browser/setup/full.rb

@@ -0,0 +1,13 @@
+# browser/setup/full - a full set of requires to provide all features at once
+
+require 'paggio'
+
+require 'browser/setup/large'
+
+require 'browser/event/all'
+
+require 'browser/dom/builder'
+require 'browser/dom/mutation_observer'
+require 'browser/dom/element/custom'
+
+require 'browser/canvas'

data/opal/browser/setup/large.rb

@@ -0,0 +1,17 @@
+# browser/setup/large - a larger set of requires for more complex applications
+#
+# Note - it doesn't include Paggio (or Paggio support) or many events
+
+require 'browser/setup/mini'
+
+require 'browser/effects'
+require 'browser/http'
+require 'browser/delay'
+require 'browser/interval'
+require 'browser/immediate'
+require 'browser/storage'
+require 'browser/blob'
+require 'browser/animation_frame'
+require 'browser/socket'
+require 'browser/history'
+require 'browser/navigator'

data/opal/browser/setup/mini.rb

@@ -0,0 +1,8 @@
+# browser/setup/mini - A smaller set of requires, designed for slim codebases
+
+require 'browser/setup/base'
+
+require 'browser/event'
+require 'browser/window'
+require 'browser/dom'
+require 'browser/css'

data/opal/browser/setup/traditional.rb

@@ -0,0 +1,10 @@
+# browser/setup/traditional, browser, opal-browser
+# ------------------------------------------------
+# A traditional set of requires.
+
+require 'native'
+require 'paggio'
+
+require 'browser/setup/mini'
+require 'browser/event/all'
+require 'browser/dom/builder'

data/opal/browser/socket.rb

@@ -4,14 +4,14 @@ module Browser
 # connection.
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
-class Socket
+class Socket < IO
   def self.supported?
     Browser.supports? :WebSocket
   end
 
-  include Native
-  include IO::Writable
-  include DOM::Event::Target
+  include Native::Wrapper
+  include IO::Writable if defined? IO::Writable
+  include Event::Target
 
   target {|value|
     Socket.new(value) if Native.is_a?(value, `window.WebSocket`)
@@ -107,6 +107,10 @@ class Socket
     `#@native.send(#{data.to_n})`
   end
 
+  alias << write
+
+  alias send write
+
   # Close the socket.
   #
   # @param code [Integer, nil] the error code