atome 0.5.1.4 → 0.5.2.5

data/lib/atome/renderers/browser/geometry.rb

@@ -2,10 +2,10 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:browser_width) do |value|
+generator.build_render(:browser_width) do |value|
   @browser_object.style[:width] = "#{value}px"
 end
 
-generator.build_render_method(:browser_height) do |value|
+generator.build_render(:browser_height) do |value|
   @browser_object.style[:height] = "#{value}px"
 end

data/lib/atome/renderers/browser/helpers/animation_helper.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  def self.anim_convertor(value)
+    { left: [:left, "#{value}px"], right: [:right, "#{value}px"], top: [:top, "#{value}px"],
+      bottom: [:bottom, "#{value}px"], smooth: ['border-radius', "#{value}px"],
+      left_add: ['transform', "translateX(#{value}px)"],
+      right_add: ['transform', "translateY(#{value}px)"],
+      width: [:width, "#{value}px"], height: [:height, "#{value}px"] }
+  end
+
+  def self.anim_value_analysis(value, particle_found, atome_found)
+    case value
+    when :self
+      # this case mean the user use the current atome so we get the particle value of the atome
+      value = atome_found.atome[particle_found]
+    when Integer
+      value
+    else
+      # this case mean the user try to pass an id so we get the particle value of the atome
+      value = grab(value).atome[particle_found]
+      value
+    end
+    value
+  end
+
+  def self.send_anim_to_js(animation, atome_hash, atome_found, atome_id, animation_atome)
+    animated_particle = animation[0]
+    start_value = animation[1]
+    end_value = animation[2]
+    original_particle = animation[3]
+    atome_js.JS.animate(animated_particle, atome_hash[:duration], atome_hash[:damping], atome_hash[:ease],
+                       atome_hash[:mass], atome_hash[:repeat], atome_hash[:stiffness], atome_hash[:velocity],
+                       start_value, end_value, atome_id, atome_found, atome_hash, original_particle, animation_atome)
+  end
+
+  def self.sanitize_anim_params(value, particle_found, atome_hash, atome_found, atome_id, animation_atome)
+    start_value = anim_value_analysis(value, particle_found, atome_found)
+    start_value = BrowserHelper.anim_convertor(start_value)[particle_found][1]
+    end_value = anim_value_analysis(atome_hash[:end][particle_found], particle_found, atome_found)
+    end_value = BrowserHelper.anim_convertor(end_value)[particle_found][1]
+    animated_particle = BrowserHelper.anim_convertor(value)[particle_found][0]
+    # animation is a stupid array to satisfy rubocop stupidity
+    animation = [animated_particle, start_value, end_value, particle_found]
+    send_anim_to_js(animation, atome_hash, atome_found, atome_id, animation_atome)
+  end
+
+  def self.anim_pop_motion_converter(atome_hash, atome_found, atome_id, animation_atome)
+    atome_hash[:dampingRatio] = atome_hash.delete(:damping)
+    atome_hash[:begin].each do |particle_found, value|
+      sanitize_anim_params(value, particle_found, atome_hash, atome_found, atome_id, animation_atome)
+    end
+  end
+
+  def self.begin_animation(atome_hash, atome_found, atome_id, animation_atome)
+    anim_pop_motion_converter(atome_hash, atome_found, atome_id, animation_atome)
+  end
+
+  def self.browser_play_animation(_options, _browser_object, atome_hash, animation_atome, proc)
+    atome_hash[:targets] = [:eDen] unless atome_hash[:targets]
+    animation_atome.play_active_proc = proc
+    atome_hash[:targets].each do |target|
+      atome_found = grab(target)
+      atome_id = atome_found.atome[:id]
+      begin_animation(atome_hash, atome_found, atome_id, animation_atome)
+    end
+  end
+end

data/lib/atome/renderers/browser/helpers/browser_helper.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  def self.browser_document
+    # Work because of the patched version of opal-browser(0.39)
+    Browser.window
+  end
+
+  def self.browser_attach_div(parents, html_object, _atome)
+    html_object.append_to(browser_document[parents])
+  end
+
+  def self.browser_attach_style(parents, _html_object, atome)
+    browser_document[parents].add_class(atome[:id])
+  end
+end

data/lib/atome/renderers/browser/helpers/color_helper.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  def self.browser_colorize_color(color_updated, atome)
+    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.backgroundColor = #{color_updated}`
+  end
+
+  def self.browser_colorize_shadow(color_updated, atome)
+    left = atome[:left]
+    top = atome[:top]
+    blur = atome[:blur]
+    direction = atome[:direction]
+    shadow_updated = "#{left}px #{top}px #{blur}px #{color_updated} #{direction}"
+    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+  end
+
+  def self.browser_left_color(_value, _browser_object, _atome)
+    puts 'code to write when implementing gradient'
+  end
+
+  def self.browser_right_color(_value, _browser_object, _atome)
+    puts 'code to write when implementing gradient'
+  end
+
+  def self.browser_top_color(_value, _browser_object, _atome)
+    puts 'code to write when implementing gradient'
+  end
+
+  def self.browser_bottom_color(_value, _browser_object, _atome)
+    puts 'code to write when implementing gradient'
+  end
+end

data/lib/atome/renderers/browser/helpers/drag_helper.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# for browser rendering
+
+module BrowserHelper
+  def self.browser_drag_move(params, atome_id, atome, proc)
+    atome.drag_move_proc = proc
+    atome_js.JS.drag(params, atome_id, atome)
+  end
+
+  def self.browser_drag_lock(params, atome_id, atome, _proc)
+    atome_js.JS.lock(params, atome_id, atome)
+  end
+
+  def self.browser_drag_remove(params, atome_id, atome, _proc)
+    params = params != true
+    atome_js.JS.remove(params, atome_id, atome)
+  end
+
+  def self.browser_drag_snap(params, atome_id, atome, _proc)
+    atome_js.JS.snap(params.to_n, atome_id, atome)
+  end
+
+  def self.browser_drag_inertia(params, atome_id, atome, _proc)
+    atome_js.JS.inertia(params, atome_id, atome)
+  end
+
+  def self.browser_drag_constraint(params, atome_id, atome, _proc)
+    atome_js.JS.constraint(params.to_n, atome_id, atome)
+  end
+
+  def self.browser_drag_start(_params, _atome_id, atome, proc)
+    atome.drag_start_proc = proc
+  end
+
+  def self.browser_drag_end(_params, _atome_id, atome, proc)
+    atome.drag_end_proc = proc
+  end
+end

data/lib/atome/renderers/browser/helpers/effect_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  def self.common_shadow_helper
+    alert :zgeg
+  end
+
+  def self.browser_blur_style(_browser_object, value, atome)
+    b_left = "#{atome[:left]}px"
+    b_top = "#{atome[:top]}px"
+    b_blur = "#{atome[:blur] = value}px"
+    b_red = atome[:red] * 255
+    b_green = atome[:green] * 255
+    b_blue = (atome[:blue]) * 255
+    b_direction = atome[:direction]
+    b_alpha = atome[:alpha]
+
+    shadow_updated = "#{b_left} #{b_top} #{b_blur} rgba(#{b_red}, #{b_green}, #{b_blue}, #{b_alpha}) #{b_direction}"
+    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+  end
+
+  def self.browser_blur_div(browser_object, value, _atome)
+    browser_object.style[:filter] = "blur(#{value}px)"
+  end
+end

data/lib/atome/renderers/browser/helpers/event_helper.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+
+  def self.touch_helper_callback(event, proc)
+    instance_exec(event, &proc) if proc.is_a?(Proc)
+  end
+
+  def self.browser_touch_true(browser_object, proc)
+    `
+    interact('#'+#{browser_object})
+  .on('tap', function (event) {
+Opal.BrowserHelper.$touch_helper_callback(event,#{proc});
+  })
+`
+  end
+
+  def self.browser_touch_long(browser_object, proc)
+    `
+    interact('#'+#{browser_object})
+  .on('hold', function (event) {
+Opal.BrowserHelper.$touch_helper_callback(event,#{proc});
+  })
+`
+  end
+
+  def self.browser_touch_double(browser_object, proc)
+    `
+    interact('#'+#{browser_object})
+  .on('doubletap', function (event) {
+Opal.BrowserHelper.$touch_helper_callback(event,#{proc});
+  })
+`
+  end
+
+  def self.browser_touch_down(browser_object, proc)
+
+    `
+    interact('#'+#{browser_object})
+  .on('down', function (event) {
+Opal.BrowserHelper.$touch_helper_callback(event,#{proc});
+  })
+
+`
+  end
+
+  def self.browser_touch_up(browser_object, proc)
+    `
+    interact('#'+#{browser_object})
+  .on('up', function (event) {
+Opal.BrowserHelper.$touch_helper_callback(event,#{proc});
+  })
+`
+  end
+
+end
+
+

data/lib/atome/renderers/browser/helpers/image_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  # image
+  def self.browser_left_image(value, browser_object, _atome)
+    browser_object.style[:left] = "#{value}px"
+  end
+
+  def self.browser_right_image(value, browser_object, _atome)
+    browser_object.style[:right] = "#{value}px"
+  end
+
+  def self.browser_top_image(value, browser_object, _atome)
+    browser_object.style[:top] = "#{value}px"
+  end
+
+  def self.browser_bottom_image(value, browser_object, _atome)
+    browser_object.style[:bottom] = "#{value}px"
+  end
+
+  def self.browser_path_image(value, browser_object, _atome)
+    browser_object[:src] = value
+  end
+
+
+end

data/lib/atome/renderers/browser/helpers/shadow_helper.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  # shadow
+  def self.browser_left_shadow(value, _browser_object, atome)
+    ls_left = "#{atome[:left] = value}px"
+    ls_top = "#{atome[:top]}px"
+    ls_blur = "#{atome[:blur]}px"
+    red = atome[:red] * 255
+    green = atome[:green] * 255
+    blue = (atome[:blue]) * 255
+    direction = atome[:direction]
+    alpha = atome[:alpha]
+
+    shadow_updated = "#{ls_left} #{ls_top} #{ls_blur} rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
+    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+  end
+
+  def self.browser_top_shadow(value, _browser_object, atome)
+    rs_left = "#{atome[:left]}px"
+    rs_top = "#{atome[:top] = value}px"
+    rs_blur = "#{atome[:blur]}px"
+    red = atome[:red] * 255
+    green = atome[:green] * 255
+    blue = (atome[:blue]) * 255
+    direction = atome[:direction]
+    alpha = atome[:alpha]
+
+    shadow_updated = "#{rs_left}px #{rs_top}px #{rs_blur}px rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
+    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+  end
+end

data/lib/atome/renderers/browser/helpers/shape_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+
+  def self.browser_left_shape(value, browser_object, _atome)
+    browser_object.style[:left] = "#{value}px"
+  end
+
+  def self.browser_right_shape(value, browser_object, _atome)
+    browser_object.style[:right] = "#{value}px"
+  end
+
+  def self.browser_top_shape(value, browser_object, _atome)
+    browser_object.style[:top] = "#{value}px"
+  end
+
+  def self.browser_bottom_shape(value, browser_object, _atome)
+    browser_object.style[:bottom] = "#{value}px"
+  end
+
+end

data/lib/atome/renderers/browser/helpers/text_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  # text
+  def self.browser_left_text(value, browser_object, _atome)
+    browser_object.style[:left] = "#{value}px"
+  end
+
+  def self.browser_right_text(value, browser_object, _atome)
+    browser_object.style[:right] = "#{value}px"
+  end
+
+  def self.browser_top_text(value, browser_object, _atome)
+    browser_object.style[:top] = "#{value}px"
+  end
+
+  def self.browser_bottom_text(value, browser_object, _atome)
+    browser_object.style[:bottom] = "#{value}px"
+  end
+
+  def self.browser_data_text(value,atome_send)
+    atome_send.browser_object.text = value
+  end
+
+end

data/lib/atome/renderers/browser/helpers/video_helper.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  # video
+  def self.browser_left_video(value, browser_object, _atome)
+    browser_object.style[:left] = "#{value}px"
+  end
+
+  def self.browser_right_videob(value, browser_object, _atome)
+    browser_object.style[:right] = "#{value}px"
+  end
+
+  def self.browser_top_video(value, browser_object, _atome)
+    browser_object.style[:top] = "#{value}px"
+  end
+
+  def self.browser_bottom_video(value, browser_object, _atome)
+    browser_object.style[:bottom] = "#{value}px"
+  end
+
+  def self.browser_path_video(value, browser_object, _atome)
+    browser_object[:src] = value
+  end
+
+  def self.browser_play_video(_value, browser_object_found, atome_hash, atome_object, proc)
+    browser_object_found.play
+    # TODO : change timeupdate for when possible requestVideoFrameCallback
+    # (opal-browser/opal/browser/event.rb line 36)
+    video_callback = atome_hash[:code] # this is the video callback not the play callback
+    play_callback = proc # this is the video callback not the play callback
+    browser_object_found.on(:timeupdate) do |e|
+      current_time = browser_object_found.currentTime
+      # we update the time particle
+      atome_object.time_callback(current_time)
+      e.prevent # Prevent the default action (eg. form submission)
+      # You can also use `e.stop` to stop propagating the event to other handlers.
+
+      atome_object.instance_exec(current_time, &video_callback) if video_callback.is_a?(Proc)
+      atome_object.instance_exec(current_time, &play_callback) if play_callback.is_a?(Proc)
+    end
+  end
+end

data/lib/atome/renderers/browser/helpers/web_helper.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  # web
+  def self.browser_left_web(value, browser_object, _atome)
+    browser_object.style[:left] = "#{value}px"
+  end
+
+  def self.browser_right_web(value, browser_object, _atome)
+    browser_object.style[:right] = "#{value}px"
+  end
+
+  def self.browser_top_web(value, browser_object, _atome)
+    browser_object.style[:top] = "#{value}px"
+  end
+
+  def self.browser_bottom_web(value, browser_object, _atome)
+    browser_object.style[:bottom] = "#{value}px"
+  end
+
+  def self.browser_path_web(value, browser_object, _atome)
+    browser_object[:src] = value
+  end
+
+  def self.browser_attach_web(parents, html_object, _atome)
+    html_object.append_to(browser_document[parents])
+  end
+
+end

data/lib/atome/renderers/browser/identity.rb

@@ -2,15 +2,15 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:browser_id) do |params|
+generator.build_render(:browser_id) do |params|
   browser_object.id = params if @atome[:id] != params
 end
 
-generator.build_render_method(:browser_type) do |params|
+generator.build_render(:browser_type) do |params|
   send("browser_#{params}", user_proc)
 end
 
-generator.build_render_method(:browser_parents) do |parents_found|
+generator.build_render(:browser_parents) do |parents_found|
   parents_found.each do |parent_found|
     BrowserHelper.send("browser_attach_#{@browser_type}", parent_found, @browser_object, @atome)
   end
@@ -22,3 +22,10 @@ generator.build_option(:pre_render_children) do |children_pass|
     atome_found.parents([@atome[:id]])
   end
 end
+
+generator.build_render(:browser_attach) do |parents_found|
+  parents_found.each do |parent_found|
+    BrowserHelper.send("browser_attach_#{@browser_type}", parent_found, @browser_object, @atome)
+  end
+end
+

data/lib/atome/renderers/browser/material.rb

@@ -2,7 +2,7 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:red) do |value|
+generator.build_render(:red) do |value|
   red = ((@atome[:red] = value) * 255)
   green = @atome[:green] * 255
   blue = @atome[:blue] * 255
@@ -11,7 +11,7 @@ generator.build_render_method(:red) do |value|
   BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
 end
 
-generator.build_render_method(:green) do |value|
+generator.build_render(:green) do |value|
   red = @atome[:red] * 255
   green = (@atome[:green] = value) * 255
   blue = @atome[:blue] * 255
@@ -20,7 +20,7 @@ generator.build_render_method(:green) do |value|
   BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
 end
 
-generator.build_render_method(:blue) do |value|
+generator.build_render(:blue) do |value|
   red = @atome[:red] * 255
   green = @atome[:green] * 255
   blue = (@atome[:blue] = value) * 255
@@ -29,7 +29,7 @@ generator.build_render_method(:blue) do |value|
   BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
 end
 
-generator.build_render_method(:alpha) do |value|
+generator.build_render(:alpha) do |value|
   red = @atome[:red] * 255
   green = @atome[:green] * 255
   blue = @atome[:blue] * 255
@@ -38,6 +38,29 @@ generator.build_render_method(:alpha) do |value|
   BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
 end
 
-generator.build_render_method(:visual) do |value|
+generator.build_render(:visual) do |value|
   browser_object.style['font-size'] = "#{value[:size]}px"
 end
+
+generator.build_render(:browser_edit) do |value|
+  if value == true
+    caret_color = 'white'
+    user_select = 'text'
+    selection_color= 'blue'
+  else
+    caret_color = 'transparent'
+    user_select = 'none'
+    selection_color= 'transparent'
+  end
+
+  @browser_object.attributes[:contenteditable] = value
+  @browser_object.style['caret-color'] = caret_color
+  @browser_object.style['webkit-user-select'] = user_select
+  @browser_object.style['-moz-user-select'] = user_select
+  @browser_object.style['user-select'] = user_select
+end
+
+generator.build_render(:browser_hide) do |value|
+  @browser_object.style[:display] = "none"
+
+end

data/lib/atome/renderers/browser/spatial.rb

@@ -2,22 +2,53 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:browser_left) do |value, _user_proc|
+generator.build_render(:browser_left) do |value, _user_proc|
   BrowserHelper.send("browser_left_#{@atome[:type]}", value, @browser_object, @atome)
 end
 
-generator.build_render_method(:browser_right) do |value, _user_proc|
+generator.build_render(:browser_right) do |value, _user_proc|
   BrowserHelper.send("browser_right_#{@atome[:type]}", value, @browser_object, @atome)
 end
 
-generator.build_render_method(:browser_top) do |value, _user_proc|
+generator.build_render(:browser_top) do |value, _user_proc|
   BrowserHelper.send("browser_top_#{@atome[:type]}", value, @browser_object, @atome)
 end
 
-generator.build_render_method(:browser_bottom) do |value, _user_proc|
+generator.build_render(:browser_bottom) do |value, _user_proc|
   BrowserHelper.send("browser_bottom_#{@atome[:type]}", value, @browser_object, @atome)
 end
 
-generator.build_render_method(:browser_rotate) do |value, _user_proc|
+generator.build_render(:browser_rotate) do |value, _user_proc|
   @browser_object.style[:transform] = "rotate(#{value}deg)" unless @browser_type == :style
 end
+
+generator.build_render(:browser_center) do |value, _user_proc|
+  case value
+  when :horizontal
+    @browser_object.remove_class(:center)
+    @browser_object.remove_class(:center_vertical)
+    @browser_object.add_class(:center_horizontal)
+    @browser_object.style[:bottom] = :auto
+    @browser_object.style[:right] = :auto
+    @browser_object.style[:top] = '0px'
+    @browser_object.style[:left] = '50%'
+  when :vertical
+    @browser_object.remove_class(:center)
+    @browser_object.remove_class(:center_horizontal)
+    @browser_object.add_class(:center_vertical)
+    @browser_object.style[:bottom] = :auto
+    @browser_object.style[:right] = :auto
+    @browser_object.style[:left] = '0px'
+    @browser_object.style[:top] = '50%'
+  else
+    @browser_object.remove_class(:center_vertical)
+    @browser_object.remove_class(:center_horizontal)
+    @browser_object.add_class(:center)
+    @browser_object.style[:bottom] = :auto
+    @browser_object.style[:right] = :auto
+    @browser_object.style[:left] = '50%'
+    @browser_object.style[:top] = '50%'
+  end
+
+end
+

data/lib/atome/renderers/browser/utility.rb

@@ -1,39 +1,48 @@
 # frozen_string_literal: true
 
 generator = Genesis.generator
-generator.build_render_method(:browser_bloc)
-generator.build_render_method(:browser_render)
-generator.build_render_method(:browser_delete) do
-  browser_object&.remove
+generator.build_render(:browser_bloc)
+generator.build_render(:browser_render)
+generator.build_render(:browser_delete) do |params|
+  browser_object&.remove if params == true
 end
 
-generator.build_render_method(:browser_clear) do
+generator.build_render(:browser_clear) do
   @atome[:children].each do |child_found|
     grab(child_found).browser_object&.remove
   end
   children([])
 end
 
-generator.build_render_method(:browser_path) do |value|
+generator.build_render(:browser_path) do |value|
   BrowserHelper.send("browser_path_#{@atome[:type]}", value, @browser_object, @atome)
 end
 
-generator.build_render_method(:browser_data) do |data|
+generator.build_render(:browser_data) do |data|
   # according to the type we send the data to different operator
   type_found = @atome[:type]
-  send("browser_data_#{type_found}", data)
+  BrowserHelper.send("browser_data_#{type_found}", data, self)
 end
 
-generator.build_render_method(:browser_schedule) do |format_date, proc|
+generator.build_render(:browser_schedule) do |format_date, proc|
   years = format_date[0]
   months = format_date[1]
   days = format_date[2]
   hours = format_date[3]
   minutes = format_date[4]
   seconds = format_date[5]
-  `atome.jsSchedule(#{years},#{months},#{days},#{hours},#{minutes},#{seconds},#{self},#{proc})`
+  atome_js.JS.schedule(years, months, days, hours, minutes, seconds, self, proc)
 end
 
-generator.build_render_method(:browser_reader) do |file, proc|
-  `atome.jsReader(#{file},#{self},#{proc})`
+generator.build_render(:browser_reader) do |file, proc|
+  atome_js.JS.reader(file, self, proc)
 end
+
+generator.build_render(:browser_cursor) do |value|
+  @browser_object.style[:cursor] = value
+end
+
+generator.build_render(:browser_overflow) do |value|
+  @browser_object.style[:overflow] = value
+end
+

data/lib/atome/renderers/headless/utility.rb

@@ -2,5 +2,5 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:headless_schedule)
-generator.build_render_method(:headless_reader)
+generator.build_render(:headless_schedule)
+generator.build_render(:headless_reader)