atome 0.4.7.0 → 0.5.1.1

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

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+# TODO : remove the DOM const and the parents methods there's just there to satisfy Rubocop
+# start dummy code
+DOM = :nil
+
+def parents(_val) end
+
+# end dummy code
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_shape) do
+  @browser_type = :div
+  id_found = @atome[:id]
+  DOM do
+    div(id: id_found).atome
+  end.append_to(BrowserHelper.browser_document[:user_view])
+  @browser_object = BrowserHelper.browser_document[id_found]
+  # Render particles below
+  a_render
+end
+
+generator.build_render_method(:browser_color) do |_value|
+  @browser_type = :style
+  id_found = @atome[:id]
+  type_found = @atome[:type]
+  # we remove previous unused style tag
+  BrowserHelper.browser_document[id]&.remove
+  red_found = @atome[:red]
+  blue_found = @atome[:blue]
+  green_found = @atome[:green]
+  alpha_found = @atome[:alpha]
+  BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
+  id='#{id_found}'>.#{id_found}{background-color: rgba(#{red_found * 255},
+  #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
+  # TODO/ use the code below to modify the style tag
+  @browser_object = BrowserHelper.browser_document[id_found]
+  # now we just have to attach the color atome
+  parents(@atome[:parents])
+  children(@atome[:children])
+end
+
+generator.build_render_method(:browser_shadow) do |_value|
+  @browser_type = :style
+  id_found = @atome[:id]
+  type_found = @atome[:type]
+  # we remove previous unused style tag
+  BrowserHelper.browser_document[id]&.remove
+  red_found = @atome[:red]
+  blue_found = @atome[:blue]
+  green_found = @atome[:green]
+  alpha_found = @atome[:alpha]
+  blur = @atome[:blur]
+  left = @atome[:left]
+  top = @atome[:top]
+  inset = @atome[:direction]
+
+  BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
+  id='#{id_found}'>.#{id_found}{box-shadow: #{left}px #{top}px #{blur}px #{inset} rgba(#{red_found * 255},
+  #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
+  # TODO/ use the code below to modify the style tag
+  @browser_object = BrowserHelper.browser_document[id_found]
+end
+
+generator.build_render_method(:browser_image) do |_user_prc|
+  @browser_type = :div
+  id_found = id
+  DOM do
+    img({ id: id_found }).atome
+  end.append_to(BrowserHelper.browser_document[:user_view])
+  @browser_object = BrowserHelper.browser_document[id_found]
+  # Render particles below
+  a_render
+end
+
+generator.build_render_method(:browser_video) do |_value, _user_proc|
+  # @browser_type = :div
+  # id_found = id
+  # DOM do
+  #   video({ id: id_found, autoplay: true, loop: false, muted: true }).atome
+  # end.append_to(BrowserHelper.browser_document[:user_view])
+  # @browser_object = BrowserHelper.browser_document[id_found]
+end
+
+generator.build_render_method(:browser_text) do |_value, _user_proc|
+  id_found = id
+  DOM do
+    div(id: id_found).atome.text
+  end.append_to(BrowserHelper.browser_document[:user_view])
+  @browser_object = BrowserHelper.browser_document[id_found]
+  @browser_type = :div
+  # Render particles below
+  a_render
+end

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

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+require 'atome/renderers/browser/effect'
+require 'atome/renderers/browser/event'
+require 'atome/renderers/browser/geometry'
+require 'atome/renderers/browser/identity'
+require 'atome/renderers/browser/material'
+require 'atome/renderers/browser/spatial'
+require 'atome/renderers/browser/atome'
+require 'atome/renderers/browser/utility'
+
+class Atome
+  attr_accessor :browser_object
+end
+
+# for opal rendering
+class BrowserHelper
+  def self.browser_document
+    # Work because of the patched versioo 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
+
+  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
+
+def browser_colorize_color(color_updated, atome)
+  `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.backgroundColor = #{color_updated}`
+end
+
+def 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 browser_left_shape(value, browser_object, _atome)
+  browser_object.style[:left] = "#{value}px"
+end
+
+def browser_right_shape(value, browser_object, _atome)
+  browser_object.style[:right] = "#{value}px"
+end
+
+def browser_top_shape(value, browser_object, _atome)
+  browser_object.style[:top] = "#{value}px"
+end
+
+def browser_bottom_shape(value, browser_object, _atome)
+  browser_object.style[:bottom] = "#{value}px"
+end
+
+def browser_left_image(value, browser_object, _atome)
+  browser_object.style[:left] = "#{value}px"
+end
+
+def browser_right_image(value, browser_object, _atome)
+  browser_object.style[:right] = "#{value}px"
+end
+
+def browser_top_image(value, browser_object, _atome)
+  browser_object.style[:top] = "#{value}px"
+end
+
+def browser_bottom_image(value, browser_object, _atome)
+  browser_object.style[:bottom] = "#{value}px"
+end
+
+def 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 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
+
+def browser_left_color(_value, _browser_object, _atome)
+  puts 'code to write when implementing gradient'
+end
+
+def browser_right_color(_value, _browser_object, _atome)
+  puts 'code to write when implementing gradient'
+end
+
+def browser_top_color(_value, _browser_object, _atome)
+  puts 'code to write when implementing gradient'
+end
+
+def browser_bottom_color(_value, _browser_object, _atome)
+  puts 'code to write when implementing gradient'
+end
+
+# text
+def browser_left_text(value, browser_object, _atome)
+  browser_object.style[:left] = "#{value}px"
+end
+
+def browser_right_text(value, browser_object, _atome)
+  browser_object.style[:right] = "#{value}px"
+end
+
+def browser_top_text(value, browser_object, _atome)
+  browser_object.style[:top] = "#{value}px"
+end
+
+def browser_bottom_text(value, browser_object, _atome)
+  browser_object.style[:bottom] = "#{value}px"
+end
+
+def browser_data_text(value)
+  browser_object.text = value
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_smooth) do |value|
+  format_params = case value
+                  when Array
+                    properties = []
+                    value.each do |param|
+                      properties << "#{param}px"
+                    end
+                    properties.join(' ').to_s
+                  when Integer
+                    "#{value}px"
+                  else
+                    value
+                  end
+  @browser_object.style['border-radius'] = format_params
+end
+
+generator.build_render_method(:browser_blur) do |value|
+  BrowserHelper.send("browser_blur_#{@browser_type}", @browser_object, value, @atome)
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_touch) do |_value, proc|
+  @browser_object.on :click do |e|
+    instance_exec(&proc) if proc.is_a?(Proc)
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_width) do |value|
+  @browser_object.style[:width] = "#{value}px"
+end
+
+generator.build_render_method(:browser_height) do |value|
+  @browser_object.style[:height] = "#{value}px"
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_type) do |params|
+  send("browser_#{params}", user_proc)
+end
+
+generator.build_render_method(:browser_parents) do |parents_found|
+  parents_found.each do |parent_found|
+    BrowserHelper.send("browser_attach_#{@browser_type}", parent_found, @browser_object, @atome)
+  end
+end
+
+generator.build_optional_methods(:pre_save_children) do |children_pass|
+  children_pass.each do |child_found|
+    atome_found = grab(child_found)
+    atome_found.parents([@atome[:id]])
+  end
+end

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:red) do |value|
+  red = ((@atome[:red] = value) * 255)
+  green = @atome[:green] * 255
+  blue = @atome[:blue] * 255
+  alpha = @atome[:alpha]
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:green) do |value|
+  red = @atome[:red] * 255
+  green = (@atome[:green] = value) * 255
+  blue = @atome[:blue] * 255
+  alpha = @atome[:alpha]
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:blue) do |value|
+  red = @atome[:red] * 255
+  green = @atome[:green] * 255
+  blue = (@atome[:blue] = value) * 255
+  alpha = @atome[:alpha]
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:alpha) do |value|
+  red = @atome[:red] * 255
+  green = @atome[:green] * 255
+  blue = @atome[:blue] * 255
+  alpha = (@atome[:alpha] = value)
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:visual) do |value|
+  browser_object.style['font-size'] = "#{value[:size]}px"
+end

data/lib/atome/renderers/{opal → browser}/opal_browser.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 # render methods
-require 'opal'
 require 'native'
 require 'promise'
 require 'browser/setup/full'
-@atome_client_ready = true

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(: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|
+  BrowserHelper.send("browser_right_#{@atome[:type]}", value, @browser_object, @atome)
+  # @browser_object.style[:right] = "#{value}px"
+end
+
+generator.build_render_method(:browser_top) do |value, _user_proc|
+  BrowserHelper.send("browser_top_#{@atome[:type]}", value, @browser_object, @atome)
+  # @browser_object.style[:top] = "#{value}px"
+end
+
+generator.build_render_method(:browser_bottom) do |value, _user_proc|
+  BrowserHelper.send("browser_bottom_#{@atome[:type]}", value, @browser_object, @atome)
+  # @browser_object.style[:bottom] = "#{value}px"
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+generator.build_render_method(:browser_bloc)
+generator.build_render_method(:browser_id)
+generator.build_render_method(:browser_render)
+generator.build_render_method(:browser_delete) do
+  browser_object&.remove
+end
+
+generator.build_render_method(:browser_clear) do
+  @atome[:children].each do |child_found|
+    grab(child_found).browser_object&.remove
+  end
+  children([])
+end
+
+generator.build_render_method(:path) do |value|
+  @browser_object[:src] = value
+end
+
+generator.build_render_method(:data) do |data|
+  # according to the type we send the data to different operator
+  type_found = @atome[:type]
+  send("browser_data_#{type_found}", data)
+end

data/lib/atome/renderers/html/atome.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_shape) do
+  current_atome = @atome
+  id_found = current_atome[:id]
+  @html_object = Html.new
+  @html_object.add_class('atome')
+  @html_object.attr('id', id_found)
+end
+
+generator.build_render_method(:html_color) do |_value|
+  # we remove previous unused style tag
+  opal_document[id]&.remove
+  red_found = @atome[:red]
+  blue_found = @atome[:blue]
+  green_found = @atome[:green]
+  alpha_found = @atome[:alpha]
+  opal_document.head << DOM("<style atome='#{type}'  id='#{id}'>.#{id}{background-color: rgba(#{red_found * 255},
+  #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
+  # TODO/ use the code below to modify the style tag
+  # `document.getElementById(#{id}).sheet.cssRules[0].style.backgroundColor = 'red'`
+end
+
+generator.build_render_method(:html_image) do |_user_prc|
+  # id_found = id
+  # instance_exec(&proc) if proc.is_a?(Proc)
+  # DOM do
+  #   img({ id: id_found }).atome
+  # end.append_to($document[:user_view])
+  # @html_object = $document[id_found]
+  # @html_type = :image
+end
+
+generator.build_render_method(:html_shadow) do
+end
+
+generator.build_render_method(:html_video) do |_value, _user_proc|
+  # id_found = id
+  # # instance_exec(&proc) if proc.is_a?(Proc)
+  # DOM do
+  #   video({ id: id_found, autoplay: true ,loop: false, muted: true }).atome
+  # end.append_to($document[:user_view])
+  # @html_object = $document[id_found]
+end

data/lib/atome/renderers/html/effect.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_smooth) do |value|
+  formated_params = case value
+                    when Array
+                      properties = []
+                      value.each do |param|
+                        properties << "#{param}px"
+                      end
+                      properties.join(' ').to_s
+                    when Integer
+                      "#{value}px"
+                    else
+                      value
+                    end
+  @html_object.style['border-radius'] = formated_params unless @html_type == :style
+end

data/lib/atome/renderers/html/event.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_touch) do |_value, proc|
+  @html_object.on :click do |e|
+    instance_exec(&proc) if proc.is_a?(Proc)
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_width) do |value|
+  @html_object.style[:width] = "#{value}px" unless @html_type == :style
+end
+
+generator.build_render_method(:html_height) do |value|
+  @html_object.style[:height] = "#{value}px" unless @html_type == :style
+end

data/lib/atome/renderers/html/html.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require 'atome/renderers/html/effect'
+require 'atome/renderers/html/event'
+require 'atome/renderers/html/geometry'
+require 'atome/renderers/html/identity'
+require 'atome/renderers/html/spatial'
+require 'atome/renderers/html/atome'
+require 'atome/renderers/html/utility'
+
+# #html object
+class Html
+  def initialize
+    html = `document.createElement("div")`
+    `document.body.appendChild(#{html})`
+    `document.body.appendChild(#{html})`
+    @html = html
+  end
+
+  def add_class(class_to_add)
+    `#{@html}.classList.add(#{class_to_add})`
+  end
+
+  def attr(attribute, value)
+    `#{@html}.setAttribute(#{attribute}, #{value})`
+  end
+
+  def style
+    # `#{@html}.style`
+  end
+  def append_shape(parent)
+    parent_found = `document.getElementById(#{parent})`
+    parent_found
+    `#{parent_found}.appendChild(#{@html})`
+  end
+  def append_color(parent)
+    alert "color : #{parent.class}"
+  end
+  def append_to(_node)
+
+  end
+end

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_type) do |params|
+  send("html_#{params}", user_proc)
+end
+
+generator.build_render_method(:html_parents) do |parents_found|
+  type_found = @atome[:type]
+  parents_found.each do |parent_found|
+    @html_object.send("append_#{type_found}", parent_found)
+  end
+end

data/lib/atome/renderers/html/opal_browser.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# render methods
+require 'native'
+require 'promise'
+require 'browser/setup/full'

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+# generator.build_render_method(:html_left) do |_value, user_proc|
+#   instance_exec(&user_proc) if user_proc.is_a?(Proc)
+# end
+#
+# generator.build_optional_methods(:pre_get_left) do
+#   user_proc = @user_proc
+#   instance_exec(&user_proc) if user_proc.is_a?(Proc)
+# end
+
+generator.build_render_method(:html_left) do |value, _user_proc|
+  @html_object.style[:left] = "#{value}px" unless @html_type == :style
+end
+
+generator.build_render_method(:html_right) do |value, _user_proc|
+  @html_object.style[:right] = "#{value}px" unless @html_type == :style
+end
+
+generator.build_render_method(:html_top) do |value, _user_proc|
+  @html_object.style[:top] = "#{value}px" unless @html_type == :style
+end
+
+generator.build_render_method(:html_bottom) do |value, _user_proc|
+  @html_object.style[:bottom] = "#{value}px" unless @html_type == :style
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+generator.build_render_method(:html_bloc)
+generator.build_render_method(:html_id)
+generator.build_render_method(:html_render)
+generator.build_render_method(:html_delete) do
+  html_object&.remove
+end
+generator.build_render_method(:html_clear) do
+  @atome[:children].each do |child_found|
+    grab(child_found).html_object&.remove
+  end
+  children([])
+end

data/lib/atome/renderers/opal/atome_opal_extensions.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
+require 'extensions/atome'
 require 'extensions/geolocation'
 require 'extensions/ping'
 require 'extensions/sha'
 require 'extensions/color'
-require 'properties/generator'

data/lib/atome/renderers/opal/extensions/atome.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+def wait(seconds, &proc)
+  if seconds == :kill
+    abort
+  else
+    seconds = seconds.to_f
+    after seconds, &proc if proc.instance_of?(Proc)
+  end
+
+end
+
+def repeater(counter, proc)
+  instance_exec(counter, &proc) if proc.is_a?(Proc)
+end
+
+def repeat(delay = 1, repeat = 0, &proc)
+  # below we exec the call a first time
+  instance_exec(0, &proc) if proc.is_a?(Proc)
+  # as we exec one time above we subtract one below
+  `
+var  x = 1
+var intervalID = window.setInterval(function(){ Opal.Object.$repeater(x,#{proc})
+if (++x ===#{repeat} )  {
+       window.clearInterval(intervalID);
+   }}, #{delay * 1000})
+`
+end
+

data/lib/atome/renderers/opal/opal.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+# render methods
+require 'opal'

data/lib/atome/version.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
 class Atome
-  VERSION = '0.4.7.0'
+  VERSION = '0.5.1.1'
 end
-puts "atome version : #{Atome::VERSION}"