fie 0.3.0 → 0.3.1

data/lib/opal/fie.rb

@@ -1,24 +0,0 @@
-require 'opal/base'
-require 'opal/mini'
-
-require 'corelib/io'
-require 'corelib/dir'
-require 'corelib/file'
-
-require 'corelib/unsupported'
-
-module Fie
-    require_tree './fie'
-
-    include Fie::Native
-
-    DiffSetup.run
-
-    Element.document.add_event_listener('DOMContentLoaded') do
-      cable = Cable.new
-
-      ExposeMethods.run
-
-      Listeners.new(cable)
-    end
-end

data/lib/opal/fie/cable.rb

@@ -1,63 +0,0 @@
-require 'securerandom'
-require 'fie/native'
-require 'json'
-
-module Fie
-  class Cable
-    include Fie::Native
-
-    def initialize
-      connection_uuid = SecureRandom.uuid
-      commander_name = "#{ camelize(controller_name) }Commander"
-
-      @commander = Commander.new(channel_name: commander_name, identifier: connection_uuid, cable: self)
-      @pools = {}
-    end
-
-    def call_remote_function(element:, event_name:, function_name:, parameters:)
-      log_event(element: element, event_name: event_name, function_name: function_name, parameters: parameters)
-
-      function_parameters = {
-        caller: {
-          id: element.id,
-          class: element.class_name,
-          value: element.value
-        },
-        controller_name: controller_name,
-        action_name: action_name
-      }.merge(parameters)
-
-      @commander.perform(function_name, function_parameters)
-    end
-
-    def subscribe_to_pool(subject)
-      @pools[subject] = Pool.new(channel_name: 'Fie::Pools', identifier: subject, cable: self)
-    end
-
-    def commander
-      @commander
-    end
-
-    private
-      def log_event(element:, event_name:, function_name:, parameters:)
-        parameters = parameters.to_json
-        puts "Event #{ event_name } triggered by element #{ element.descriptor } is calling function #{ function_name } with parameters #{ parameters }"
-      end
-
-      def action_name
-        view_name_element['fie-action']
-      end
-
-      def controller_name
-        view_name_element['fie-controller']
-      end
-
-      def view_name_element
-        Element.body.query_selector('[fie-controller]:not([fie-controller=""])');
-      end
-
-      def camelize(string)
-        string.split('_').collect(&:capitalize).join
-      end
-  end
-end

data/lib/opal/fie/commander.rb

@@ -1,50 +0,0 @@
-require 'fie/native'
-require 'diffhtml/dist/diffhtml.min'
-
-module Fie
-  class Commander < Fie::Native::ActionCableChannel
-    include Fie::Native
-
-    def connected
-      super
-
-      @cable.call_remote_function \
-        element: Element.body,
-        function_name: 'initialize_state',
-        event_name: 'Upload State',
-        parameters: { view_variables: Util.view_variables }
-    end
-
-    def received(data)
-      process_command(data['command'], data['parameters'])
-    end
-
-    def process_command(command, parameters = {})
-      case command
-      when 'refresh_view'
-        $$.diff.innerHTML Element.fie_body.unwrapped_element, parameters['html']
-        @event.dispatch
-      when 'subscribe_to_pools'
-        parameters['subjects'].each do |subject|
-          @cable.subscribe_to_pool(subject)
-        end
-      when 'publish_to_pool'
-        subject = parameters['subject']
-        object = parameters['object']
-        sender_uuid = parameters['sender_uuid']
-
-        perform("pool_#{ subject }_callback", { object: object, sender_uuid: sender_uuid })
-      when 'publish_to_pool_lazy'
-        subject = parameters['subject']
-        object = parameters['object']
-        sender_uuid = parameters['sender_uuid']
-
-        perform("pool_#{ subject }_callback", { object: object, sender_uuid: sender_uuid, lazy: true })
-      when 'execute_function'
-        Util.exec_js(parameters['name'], parameters['arguments'])
-      else
-        puts "Command: #{ command }, Parameters: #{ parameters }"
-      end
-    end
-  end
-end

data/lib/opal/fie/diff_setup.rb

@@ -1,31 +0,0 @@
-require 'es6-object-assign/dist/object-assign.min'
-
-class DiffSetup
-  class << self
-    include Fie::Native
-
-    def run
-      $$.ObjectAssign.polyfill()
-
-      Native \
-        `diff.use(
-          Object.assign(_ => {}, {
-            syncTreeHook: (oldTree, newTree) => {
-              if (newTree.nodeName === 'input') {
-                let oldElement = document.querySelector('[name="' + newTree.attributes.name + '"]');
-
-                if (oldElement != undefined && oldElement.attributes['fie-ignore'] != undefined) {
-                  newTree.nodeValue = oldElement.value;
-                  newTree.attributes.value = oldElement.value;
-                  newTree.attributes.autofocus = '';
-                  newTree.attributes['fie-ignore'] = oldElement.attributes['fie-ignore'];
-                }
-
-                return newTree;
-              }
-            }
-          })
-        )`
-    end
-  end
-end

data/lib/opal/fie/expose_methods.rb

@@ -1,27 +0,0 @@
-class ExposeMethods
-  class << self
-    def run
-      Native(`window.Fie = {}`)
-
-      Native \
-        `window.Fie.executeCommanderMethod =
-          #{
-            -> (function_name, parameters = {}) do
-              cable.call_remote_function \
-                element: Element.body, 
-                event_name: 'calling remote function', 
-                function_name: function_name,
-                parameters: Hash.new(parameters)
-            end
-          }`
-
-      Native \
-        `window.Fie.addEventListener =
-            #{
-              -> (event_name, selector, block) do
-                Element.fie_body.add_event_listener(event_name, selector, &block)
-              end
-            }`
-    end
-  end
-end

data/lib/opal/fie/listeners.rb

@@ -1,129 +0,0 @@
-require 'fie/native'
-require 'securerandom'
-
-module Fie
-  class Listeners
-    include Fie::Native
-
-    def initialize(cable)
-      @cable = cable
-      @timer = Timeout.new(0) { 'hello' }
-
-      initialize_input_elements
-      initialize_fie_events [:click, :submit, :scroll, :keyup, :keydown, :enter]
-    end
-
-    private
-      def initialize_fie_events(event_names)
-        event_names.each do |fie_event_name|
-          selector = "[fie-#{ fie_event_name }]:not([fie-#{ fie_event_name }=''])"
-
-          event_name = fie_event_name
-          event_name = :keydown if event_name == :enter
-
-          Element.fie_body.add_event_listener(event_name, selector) do |event|
-            handle_fie_event(fie_event_name, event_name, event)
-          end
-        end
-      end
-
-      def handle_fie_event(fie_event_name, event_name, event)
-        event_is_valid = (fie_event_name == :enter && event.keyCode == 13) || fie_event_name != :enter
-
-        if event_is_valid
-          element = Element.new(element: event.target)
-          remote_function_name = element["fie-#{ fie_event_name }"]
-          function_parameters = JSON.parse(element['fie-parameters'] || {})
-
-          @timer.fast_forward
-
-          @cable.call_remote_function \
-            element: element,
-            function_name: remote_function_name,
-            event_name: event_name,
-            parameters: function_parameters
-        end
-      end
-
-      def initialize_input_elements
-        typing_input_types = ['text', 'password', 'search', 'tel', 'url']
-
-        typing_input_selector = (['textarea'] + typing_input_types).reduce do |selector, input_type|
-          selector += ", input[type=#{ input_type }]"
-        end
-
-        non_typing_input_selector = (['input'] + typing_input_types).reduce do |selector, input_type|
-          selector += ":not([type=#{ input_type }])"
-        end
-
-        Element.fie_body.add_event_listener('keydown', typing_input_selector) do |event|
-          if event.keyCode == 13
-            event.target.blur
-          else
-            @timer.clear
-
-            input_element = Element.new(element: event.target)
-
-            @timer = Timeout.new(300) do
-              update_state_using_changelog(input_element)
-            end
-          end
-        end
-
-        Element.fie_body.add_event_listener('focusin', typing_input_selector) do |event|
-          event.target.setAttribute('fie-ignore', SecureRandom.uuid)
-        end
-
-        Element.fie_body.add_event_listener('focusout', typing_input_selector) do |event|
-          event.target.removeAttribute('fie-ignore')
-        end
-
-        Element.fie_body.add_event_listener('change', non_typing_input_selector) do |event|
-          input_element = Element.new(element: event.target)
-          update_state_using_changelog(input_element)
-        end
-      end
-
-      def update_state_using_changelog(input_element)
-        objects_changelog = {}
-
-        changed_object_name = input_element.name.split('[')[0]
-        changed_object_key_chain = input_element.name.scan(Regexp.new '\[(.*?)\]').flatten
-
-        is_form_object = !changed_object_key_chain.empty? && !changed_object_name.nil?
-        is_fie_nested_object = Util.view_variables.include? changed_object_name
-        is_fie_form_object = is_form_object && is_fie_nested_object
-
-        is_fie_non_nested_object = Util.view_variables.include? input_element.name
-
-        if is_fie_form_object
-          build_changelog(changed_object_key_chain, changed_object_name, objects_changelog, input_element)
-        elsif is_fie_non_nested_object
-          objects_changelog[input_element.name] = input_element.value;
-        end
-
-        @cable.call_remote_function \
-          element: input_element,
-          function_name: 'modify_state_using_changelog',
-          event_name: 'Input Element Change',
-          parameters: { objects_changelog: objects_changelog }
-      end
-
-      def build_changelog(object_key_chain, object_name, changelog, input_element)
-        is_final_key = -> (key) { key == object_key_chain[-1] }
-        object_final_key_value = input_element.value
-
-        changelog[object_name] = {}
-        changelog = changelog[object_name]
-
-        object_key_chain.each do |key|
-          if is_final_key.call(key)
-            changelog[key] = object_final_key_value
-          else
-            changelog[key] = {}
-            changelog = changelog[key]
-          end
-        end
-      end
-  end
-end

data/lib/opal/fie/native.rb

@@ -1,5 +0,0 @@
-module Fie
-  module Native
-    require_tree './native'
-  end
-end

data/lib/opal/fie/native/action_cable_channel.rb

@@ -1,35 +0,0 @@
-require 'fie/native'
-
-module Fie
-  module Native
-    class ActionCableChannel
-      def initialize(channel_name:, identifier:, cable:)
-        @channel_name = channel_name
-        @identifier = identifier
-        @cable = cable
-        @event = Event.new('fieChanged')
-
-        @subscription = $$.App.cable.subscriptions.create(
-          { channel: @channel_name, identifier: @identifier },
-          {
-            connected: -> { connected },
-            received: -> (data) { received Native(`#{data}`) }
-          }
-        )
-      end
-
-      def responds_to?(t)
-        true
-      end
-
-      def connected
-        perform('initialize_pools')
-        puts "Connected to #{ @channel_name } with identifier #{ @identifier }"
-      end
-
-      def perform(function_name, parameters = {})
-        @subscription.perform(function_name, parameters);
-      end
-    end
-  end
-end

data/lib/opal/fie/native/element.rb

@@ -1,116 +0,0 @@
-require 'native'
-
-module Fie
-  module Native
-    class Element
-      include Native
-
-      def initialize(element: nil, selector: nil)
-        if selector.nil?
-          @element = element
-        elsif element.nil?
-          if selector == 'document'
-            @element = $$.document
-          else
-            @element = $$.document.querySelector(selector)
-          end
-        end
-      end
-
-      def [](name)
-        @element.getAttribute(name)
-      end
-
-      def []=(name, value)
-        @element.setAttribute(name, value)
-      end
-
-      def add_event_listener(event_name, selector = nil, &block)
-        @element.addEventListener(event_name) do |event|
-          event = Native(`#{ event }`)
-
-          if selector.nil?
-            yield event
-          else
-            if event.target.matches(selector)
-              yield event
-            end
-          end
-        end
-      end
-
-      def innerHTML
-        @element.innerHTML
-      end
-
-      def query_selector(selector)
-        Element.new(element: @element.querySelector(selector))
-      end
-
-      def query_selector_all(selector)
-        entries = Native(`Array.prototype.slice.call(document.querySelectorAll(#{ selector }))`)
-
-        entries.map do |element|
-          Element.new(element: element)
-        end
-      end
-
-      def name
-        @element.name
-      end
-
-      def id
-        @element.id
-      end
-
-      def class_name
-        @element.className
-      end
-
-      def descriptor
-        descriptor = @element.tagName
-
-        id_is_blank =
-          id.nil? || id == ''
-
-        class_name_is_blank =
-          class_name.nil? || class_name == ''
-
-        if !id_is_blank
-          descriptor + "##{ id }"
-        elsif !class_name_is_blank
-          descriptor + ".#{ class_name }"
-        else
-          descriptor
-        end
-      end
-
-      def value
-        @element.value
-      end
-
-      def unwrapped_element
-        @element
-      end
-
-      private
-        def node_list_to_array(node_list)
-          $$.Array.prototype.slice.call(node_list)
-        end
-
-      class << self
-        def document
-          Element.new(selector: 'document')
-        end
-
-        def body
-          Element.new(selector: 'body')
-        end
-
-        def fie_body
-          Element.new(selector: '[fie-body=true]')
-        end
-      end
-    end
-  end
-end