reactive-record 0.7.0

data/lib/reactive_record/active_record/reactive_record/while_loading.rb

@@ -0,0 +1,262 @@
+module ReactiveRecord
+
+  # will repeatedly execute the block until it is loaded
+  # immediately returns a promise that will resolve once the block is loaded
+
+  def self.load(&block)
+    promise = Promise.new
+    @load_stack ||= []
+    @load_stack << @loads_pending
+    @loads_pending = nil
+    result = block.call
+    if @loads_pending
+      @blocks_to_load ||= []
+      @blocks_to_load << [promise, block]
+    else
+      promise.resolve result
+    end
+    @loads_pending = @load_stack.pop
+    promise
+  end
+
+  def self.loads_pending!
+    @loads_pending = true
+  end
+
+  def self.run_blocks_to_load
+    if @blocks_to_load
+      blocks_to_load = @blocks_to_load
+      @blocks_to_load = []
+      blocks_to_load.each do |promise_and_block|
+        @loads_pending = nil
+        result = promise_and_block.last.call
+        if @loads_pending
+          @blocks_to_load << promise_and_block
+        else
+          promise_and_block.first.resolve result
+        end
+      end
+    end
+  rescue Exception => e
+    message = "ReactiveRecord.run_blocks_to_load exception raised: #{e}"
+    `console.error(#{message})`
+  end
+
+  
+  # Adds while_loading feature to React
+  # to use attach a .while_loading handler to any element for example
+  # div { "displayed if everything is loaded" }.while_loading { "displayed while I'm loading" }
+  # the contents of the div will be switched (using jQuery.show/hide) depending on the state of contents of the first block
+  
+  # To notify React that something is loading use React::WhileLoading.loading!
+  # once everything is loaded then do React::WhileLoading.loaded_at message (typically a time stamp just for debug purposes)
+  
+  class WhileLoading
+    
+    include React::IsomorphicHelpers
+        
+    before_first_mount do 
+      @css_to_preload = ""
+      @while_loading_counter = 0
+    end
+    
+    def get_next_while_loading_counter
+      @while_loading_counter += 1
+    end
+    
+    def preload_css(css)
+      @css_to_preload << css << "\n"
+    end
+    
+    prerender_footer do
+      "<style>\n#{@css_to_preload}\n</style>".tap { @css_to_preload = ""}
+    end
+    
+    if RUBY_ENGINE == 'opal'
+      
+      # I DONT THINK WE USE opal-jquery in this module anymore - require 'opal-jquery' if opal_client?
+    
+      include React::Component
+    
+      required_param :loading
+      required_param :loaded_children
+      required_param :loading_children
+      required_param :element_type
+      required_param :element_props
+      optional_param :display, default: ""
+     
+      class << self
+        
+        def loading?
+          @is_loading
+        end
+            
+        def loading!
+          React::RenderingContext.waiting_on_resources = true
+          React::State.get_state(self, :loaded_at)
+          @is_loading = true
+        end
+
+        def loaded_at(loaded_at)
+          React::State.set_state(self, :loaded_at, loaded_at)
+          @is_loading = false
+        end
+     
+        def add_style_sheet
+          @style_sheet ||= %x{
+            $('<style type="text/css">'+
+              '  .reactive_record_is_loading > .reactive_record_show_when_loaded { display: none; }'+
+              '  .reactive_record_is_loaded > .reactive_record_show_while_loading { display: none; }'+
+              '</style>').appendTo("head") 
+          } 
+        end
+          
+      end
+            
+      before_mount do
+        @uniq_id = WhileLoading.get_next_while_loading_counter
+        WhileLoading.preload_css(
+          ".reactive_record_while_loading_container_#{@uniq_id} > :nth-child(1n+#{loaded_children.count+1}) {\n"+
+          "  display: none;\n"+ 
+          "}\n"
+        )
+      end
+    
+      after_mount do
+        @waiting_on_resources = loading
+        WhileLoading.add_style_sheet
+        %x{
+          var node = #{@native}.getDOMNode();
+          $(node).children(':nth-child(-1n+'+#{loaded_children.count}+')').addClass('reactive_record_show_when_loaded');
+          $(node).children(':nth-child(1n+'+#{loaded_children.count+1}+')').addClass('reactive_record_show_while_loading');
+        }
+      end
+    
+      after_update do
+        @waiting_on_resources = loading
+      end
+    
+      def render
+        props = element_props.dup
+        classes = [props[:class], props[:className], "reactive_record_while_loading_container_#{@uniq_id}"].compact.join(" ")
+        props.merge!({
+          "data-reactive_record_while_loading_container_id" => @uniq_id,
+          "data-reactive_record_enclosing_while_loading_container_id" => @uniq_id,
+          class: classes
+        })
+        React.create_element(element_type, props) { loaded_children + loading_children }
+      end
+      
+    end
+    
+  end
+  
+end
+  
+module React
+  
+  class Element
+        
+    def while_loading(display = "", &loading_display_block)
+      
+      loaded_children = []
+      loaded_children = block.call.dup if block
+      
+      loading_children = [display]
+      loading_children = RenderingContext.build do |buffer|
+        result = loading_display_block.call
+        buffer << result.to_s if result.is_a? String
+        buffer.dup
+      end if loading_display_block 
+      RenderingContext.replace(
+        self,
+        React.create_element(
+          ReactiveRecord::WhileLoading, 
+          loading: waiting_on_resources, 
+          loading_children: loading_children, 
+          loaded_children: loaded_children, 
+          element_type: type, 
+          element_props: properties) 
+        )
+    end
+    
+    def hide_while_loading
+      while_loading
+    end
+    
+  end
+      
+  module Component
+    
+    alias_method :original_component_did_mount, :component_did_mount
+    
+    def component_did_mount(*args)
+      original_component_did_mount(*args)
+      reactive_record_link_to_enclosing_while_loading_container
+      reactive_record_link_set_while_loading_container_class
+    end
+    
+    alias_method :original_component_did_update, :component_did_update
+    
+    def component_did_update(*args)
+      original_component_did_update(*args)
+      reactive_record_link_set_while_loading_container_class
+    end
+    
+    def reactive_record_link_to_enclosing_while_loading_container 
+      # Call after any component mounts - attaches the containers loading id to this component
+      # Fyi, the while_loading container is responsible for setting its own link to itself
+
+      %x{
+        var node = #{@native}.getDOMNode();
+        if (!$(node).is('[data-reactive_record_enclosing_while_loading_container_id]')) {
+          var while_loading_container = $(node).closest('[data-reactive_record_while_loading_container_id]')
+          if (while_loading_container.length > 0) {
+            var container_id = $(while_loading_container).attr('data-reactive_record_while_loading_container_id')
+            $(node).attr('data-reactive_record_enclosing_while_loading_container_id', container_id)
+          }
+        }
+      }
+
+    end
+    
+    def reactive_record_link_set_while_loading_container_class
+      
+      %x{
+        
+        var node = #{@native}.getDOMNode();
+        var while_loading_container_id = $(node).attr('data-reactive_record_enclosing_while_loading_container_id');
+        if (while_loading_container_id) {
+          var while_loading_container = $('[data-reactive_record_while_loading_container_id='+while_loading_container_id+']');
+          var loading = (#{waiting_on_resources} == true);
+          if (loading) {
+            $(node).addClass('reactive_record_is_loading');
+            $(node).removeClass('reactive_record_is_loaded');
+            $(while_loading_container).addClass('reactive_record_is_loading');
+            $(while_loading_container).removeClass('reactive_record_is_loaded');
+            
+          } else if (!$(node).hasClass('reactive_record_is_loaded')) {
+            
+            if (!$(node).attr('data-reactive_record_while_loading_container_id')) {
+              $(node).removeClass('reactive_record_is_loading');
+              $(node).addClass('reactive_record_is_loaded');  
+            }
+            if (!$(while_loading_container).hasClass('reactive_record_is_loaded')) {
+              var loading_children = $(while_loading_container).
+                find('[data-reactive_record_enclosing_while_loading_container_id='+while_loading_container_id+'].reactive_record_is_loading')
+              if (loading_children.length == 0) {
+                $(while_loading_container).removeClass('reactive_record_is_loading')
+                $(while_loading_container).addClass('reactive_record_is_loaded')
+              } 
+            }
+               
+          }
+          
+        }
+      } 
+      
+    end
+    
+  end if RUBY_ENGINE == 'opal'
+
+end

data/lib/reactive_record/engine.rb

@@ -0,0 +1,13 @@
+#require 'rails'
+
+module ReactiveRecord
+  class Engine < ::Rails::Engine
+    isolate_namespace ReactiveRecord
+    config.generators do |g|
+      g.test_framework      :rspec,        :fixture => false
+      g.fixture_replacement :factory_girl, :dir => 'spec/factories'
+      g.assets false
+      g.helper false
+    end
+  end
+end

data/lib/reactive_record/interval.rb

@@ -0,0 +1,190 @@
+module Browser
+
+# Allows you to create an interval that executes the function every given
+# seconds.
+#
+# @see https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
+class Interval
+  # @!attribute [r] every
+  # @return [Float] the seconds every which the block is called
+  attr_reader :every
+
+  # Create and start an interval.
+  #
+  # @param window [Window] the window to start the interval on
+  # @param time [Float] seconds every which to call the block
+  def initialize(window, time, &block)
+    @window = Native.convert(window)
+    @every  = time
+    @block  = block
+
+    @aborted = false
+  end
+
+  # Check if the interval has been stopped.
+  def stopped?
+    @id.nil?
+  end
+
+  # Check if the interval has been aborted.
+  def aborted?
+    @aborted
+  end
+
+  # Abort the interval, it won't be possible to start it again.
+  def abort
+    `#@window.clearInterval(#@id)`
+
+    @aborted = true
+    @id      = nil
+  end
+
+  # Stop the interval, it will be possible to start it again.
+  def stop
+    return if stopped?
+
+    `#@window.clearInterval(#@id)`
+
+    @stopped = true
+    @id      = nil
+  end
+
+  # 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, #@every * 1000)`
+  end
+
+  # Call the [Interval] block.
+  def call
+    @block.call
+  end
+end
+
+class Window
+  # Execute the block every given seconds.
+  #
+  # @param time [Float] the seconds between every call
+  #
+  # @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
+
+  # (see Browser::Window#every!)
+  def every!(time)
+    $window.every!(time, &self)
+  end
+end
+
+module Browser
+
+# Allows you to delay the call to a function which gets called after the
+# given time.
+#
+# @see https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
+class Delay
+  # @!attribute [r] after
+  # @return [Float] the seconds after which the block is called
+  attr_reader :after
+
+  # Create and start a timeout.
+  #
+  # @param window [Window] the window to start the timeout on
+  # @param time [Float] seconds after which the block is called
+  def initialize(window, time, &block)
+    @window = Native.convert(window)
+    @after  = time
+    @block  = block
+  end
+
+  # Abort the timeout.
+  def abort
+    `#@window.clearTimeout(#@id)`
+  end
+
+  # Start the delay.
+  def start
+    @id = `#@window.setTimeout(#{@block.to_n}, #@after * 1000)`
+  end
+end
+
+class Window
+  # Execute a block after the given seconds.
+  #
+  # @param time [Float] the seconds after it gets called
+  #
+  # @return [Delay] the object representing the timeout
+  def after(time, &block)
+    Delay.new(@native, time, &block).tap(&:start)
+  end
+
+  # Execute a block after the given seconds, you have to call [#start] on it
+  # yourself.
+  #
+  # @param time [Float] the seconds after it gets called
+  #
+  # @return [Delay] the object representing the timeout
+  def after!(time, &block)
+    Delay.new(@native, time, &block)
+  end
+end
+
+end
+
+module Kernel
+  # (see Browser::Window#after)
+  def after(time, &block)
+    `setTimeout(#{block.to_n}, time * 1000)`
+  end
+
+  # (see Browser::Window#after!)
+  def after!(time, &block)
+    `setTimeout(#{block.to_n}, time * 1000)`
+  end
+end
+
+class Proc
+  # (see Browser::Window#after)
+  def after(time)
+    $window.after(time, &self)
+  end
+
+  # (see Browser::Window#after!)
+  def after!(time)
+    $window.after!(time, &self)
+  end
+end