atome 0.5.7.1.2 → 0.5.7.1.6

data/lib/renderers/html/html.rb

@@ -4,8 +4,6 @@
 
 class HTML
 
-
-
   # def id
   #   :poil
   # end
@@ -47,14 +45,14 @@ class HTML
   def add_font_to_css(params)
     font_path = params[:path]
     font_name = params[:name]
-    str_to_eval = <<STRDELIM
-var styleSheet = document.styleSheets[0];
-styleSheet.insertRule(`
-@font-face {
-  font-family: '#{font_name}';
-  src: url('../medias/fonts/#{font_path}/#{font_name}.ttf') format('truetype');
-}`, styleSheet.cssRules.length);
-STRDELIM
+    str_to_eval = <<~STRDELIM
+      var styleSheet = document.styleSheets[0];
+      styleSheet.insertRule(`
+      @font-face {
+        font-family: '#{font_name}';
+        src: url('../medias/fonts/#{font_path}/#{font_name}.ttf') format('truetype');
+      }`, styleSheet.cssRules.length);
+    STRDELIM
     JS.eval(str_to_eval)
   end
 
@@ -221,7 +219,6 @@ STRDELIM
       particles_from_style[key.to_sym] = value if key && value
     end
 
-    # alert "hyperedit"
 
     particles_found = particles_found.merge(particles_from_style)
     current_atome = grab(@id)
@@ -378,6 +375,18 @@ STRDELIM
     self
   end
 
+  def audio(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :audio
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    self.id(id)
+    self
+  end
+
   def www(id)
     # we remove any element if the id already exist
     check_double(id)
@@ -505,7 +514,6 @@ STRDELIM
     end
   end
 
-
   def transform(property, value = nil)
     transform_needed = "#{property}(#{value}deg)"
     @element[:style][:transform] = transform_needed.to_s
@@ -578,8 +586,6 @@ STRDELIM
     @element[:style][:"-webkit-backdrop-filter"] = filter_needed
   end
 
-
-
   def currentTime(time)
     @element[:currentTime] = time
   end
@@ -598,7 +604,6 @@ STRDELIM
 
   def action(_particle, action_found, option = nil)
 
-    # alert option
     if action_found == :stop
       currentTime(option)
       @element.pause
@@ -1146,13 +1151,11 @@ STRDELIM
   end
 
   def touch_tap(_option)
-    # alert :touch_tap
     @element[:style][:cursor] = 'pointer'
     interact = JS.eval("return interact('##{@id}')")
     touch_tap = @original_atome.instance_variable_get('@touch_code')[:tap]
     # unless @touch_removed[:tap]
     interact.on('tap') do |native_event|
-      # alert 'touchy'
       event = Native(native_event)
       # we use .call instead of instance_eval because instance_eval bring the current object as context
       # and it's lead to a problem of context and force the use of grab(:view) when using atome method such as shape ,
@@ -1300,37 +1303,30 @@ STRDELIM
     end
   end
 
+
   # animation below
   def animate(animation_properties)
-    command = <<~JS
-          var target_div = document.getElementById('#{@id}');
-          window.currentAnimation = popmotion.animate({
-            from: #{animation_properties[:from]},
-            to: #{animation_properties[:to]},
-            duration: #{animation_properties[:duration]},
-            onUpdate: function(v) {
-      atomeJsToRuby("puts x= "+v)
-      atomeJsToRuby("grab('#{@id}').left("+v+")")
-            },
-            onComplete: function() {
-              window.currentAnimation = null;
-      atomeJsToRuby("puts :complete")
-            }
-          });
+    prop= animation_properties[:particle]
+    command = <<~JS 
+                var target_div = document.getElementById('#{@id}');
+                window.currentAnimation = popmotion.animate({
+                  from: #{animation_properties[ :from]},
+                  to: #{animation_properties[:to]},
+                  duration: #{animation_properties[:duration]},
+                  onUpdate: function(v) {
+      atomeJsToRuby("grab('#{@id}').animation_callback('#{prop}', "+v+")")
+            atomeJsToRuby("grab('#{@id}').#{prop}("+v+")")
+                  },
+                  onComplete: function(v) {
+                    window.currentAnimation = null;
+      atomeJsToRuby("grab('#{@id}').animation_callback('#{prop}_end')")
+                  }
+                });
     JS
     JS.eval(command)
   end
 
-  def play_animation(properties)
-    puts 'change for standard method : action'
-    required_keys = [:from, :to, :duration]
-    unless properties.is_a?(Hash) && (required_keys - properties.keys).empty?
-      raise ArgumentError, 'Properties must be a hash with :from, :to, and :duration keys'
-    end
 
-    animate(properties)
-
-  end
 
   def stop_animation
     JS.eval('if (window.currentAnimation) window.currentAnimation.stop();')
@@ -1359,7 +1355,6 @@ STRDELIM
 
     table_html.appendChild(thead)
     tbody = JS.global[:document].createElement('tbody')
-    # alert data
     data.each_with_index do |row, row_index|
       tr = JS.global[:document].createElement('tr')
 
@@ -1389,8 +1384,6 @@ STRDELIM
     JS.global[:document].querySelector("##{@id}").appendChild(table_html)
   end
 
-
-
   # Helper function to handle Atome objects
   def handle_atome(atome, td_element)
     atome.fit(cell_height)
@@ -1402,7 +1395,6 @@ STRDELIM
     atome.left(0)
   end
 
-
   def refresh_table(_params)
     # first we need to extact all atome from the table or they will be deleted by the table refres
     data = @original_atome.data
@@ -1442,9 +1434,21 @@ STRDELIM
   def set_td_style(td)
     cell_height = @original_atome.component[:height]
     cell_width = @original_atome.component[:width]
-    td[:style][:border] = '1px solid black'
+    # shadow_found = @original_atome.component[:shadow]
+    # if shadow_found
+    #   red = shadow_found[:red] * 255
+    #   green = shadow_found[:green] * 255
+    #   blue = shadow_found[:blue] * 255
+    #   alpha = shadow_found[:alpha]
+    #   left = shadow_found[:left]
+    #   top = shadow_found[:top]
+    #   blur = shadow_found[:blur] # new correct behavior all atome's value should now be get using :value,here to resolve conflict  with blur and back blur
+    #   inset = :inset if shadow_found[:invert]
+    #   shadow_created = "#{left}px #{top}px #{blur}px rgba(#{red}, #{green}, #{blue}, #{alpha}) #{inset}"
+    # end
+    # td[:style][:border] = '1px solid black'
     td[:style][:backgroundColor] = 'white'
-    td[:style][:boxShadow] = '10px 10px 5px #888888'
+    # td[:style][:boxShadow] = shadow_created
     td[:style][:width] = "#{cell_width}px"
     td[:style]['min-width'] = "#{cell_width}px"
     td[:style]['max-width'] = "#{cell_height}px"
@@ -1641,7 +1645,7 @@ STRDELIM
 
   # atomisation!
   def atomized(html_object)
-    html_object = html_object[0] if html_object.instance_of? Array
+    # html_object = html_object[0] if html_object.instance_of? Array
     @element = html_object
   end
 

data/lib/renderers/html/identity.rb

@@ -17,6 +17,9 @@ end
 new({ method: :type, type: :string, renderer: :html, specific: :video }) do |_value, _user_proc|
   html.video(@id)
 end
+new({ method: :type, type: :string, renderer: :html, specific: :audio }) do |_value, _user_proc|
+  html.audio(@id)
+end
 
 new({ method: :type, type: :string, renderer: :html, specific: :www }) do |_value, _user_proc|
   html.www(@id)
@@ -95,7 +98,7 @@ new({ method: :data, type: :string, specific: :table, renderer: :html }) do |val
 end
 
 new({ method: :type, type: :hash, specific: :atomized, renderer: :html }) do |value, _user_proc|
-  html.atomized(value)
+  html.atomized(alien)
 end
 
 

data/lib/renderers/html/utility.rb

@@ -167,4 +167,4 @@ new({ renderer: :html, method: :record }) do |params, user_proc|
     end
   end
 
-end
+end

data/vendor/assets/application/examples/above_below_before_after.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+b=box
+margin = 12
+b2=box({top: below(b, margin)})
+b3=box({top: below(b2, margin)})
+b4=box({top: below(b3, margin)})
+box({top: below(b4, margin)})
+i=0
+while i< 10 do
+  b2=box({top: below(b, margin)})
+  i+=1
+end
+
+b = circle(left: 66)
+margin = 12
+i = 0
+
+while i < 10 do
+  b = circle({top: below(b, margin), left: 66})
+  i += 1
+end

data/vendor/assets/application/examples/animation.rb

@@ -87,5 +87,33 @@
 
 b=box({id: :the_box})
 
-  b.animate({ to: 90 })
+  b.animate({ to: 333, particle: :width, duration: 3000}) do |val|
+    puts "width +#{val}"
+  end
+
+b.animate({ to: 456, particle: :left, duration: 5000}) do |val|
+  puts "left +#{val}"
+end
+
+b.animate({  end: :left}) do |val|
+  puts "left ended"
+end
+
+b.animate({ to: 69, particle: :smooth, duration: 10000}) do |val|
+  puts "smooth +#{val}"
+end
+
+b.animate({ end: :smooth}) do |val|
+  puts " cool smooth end now!!!"
+end
+
+b.animate({ to: 90, particle: :rotate, duration: 10000}) do |val|
+  puts "rotate +#{val}"
+end
+
+b.animate({ to: 222, particle: :top, duration: 10000}) do |val|
+  puts "top +#{val}"
+end
+
+
 

data/vendor/assets/application/examples/audio.rb

@@ -0,0 +1,54 @@
+#  frozen_string_literal: true
+
+# audio tag
+a = audio({ path: 'medias/audios/clap.wav', id: :basic_audio })
+b=box({id: :playButton})
+b.text(:audio_tag)
+a.left(333)
+b.touch(:down) do
+  a.play(true)
+end
+
+
+
+### Web Audio
+ audio({ path: 'medias/audios/clap.wav', id: :audioElement })
+@audio_context = JS.eval('return new AudioContext()')
+@audio_element = JS.global[:document].getElementById('audioElement')
+@track = @audio_context.createMediaElementSource(@audio_element)
+
+@gain_node = @audio_context.createGain()
+@gain_node[:gain][:value] = 0.5
+
+@track.connect(@gain_node)
+@gain_node.connect(@audio_context[:destination])
+
+def play_audio
+  @audio_context[:resume].to_s if @audio_context[:state].to_s == 'suspended'
+  @audio_element.play
+end
+b2=box({left: 166})
+b2.text(:web_audio)
+b2.touch(:down) do
+  play_audio
+end
+
+
+# ######### wadjs
+bb=box({left: 333})
+bb.text(:wadjs)
+init_code = "window.snare = new Wad({source : 'medias/audios/clap.wav'});"
+JS.eval(init_code)
+
+play_code = <<~STRDEL
+  window.snare.play();
+  setTimeout(function() {
+    window.snare.stop();
+  }, 300);
+STRDEL
+
+
+bb.touch(:down) do
+  JS.eval(play_code)
+end
+

data/vendor/assets/application/examples/hypertext.rb

@@ -58,7 +58,7 @@ html_desc = <<STR
     </nav>
 </header>
 
-<section id='title' class="section my_class" style='left: 333px;color: yellow'>
+<section id='div_id' class="section my_class" style='left: 333px;color: yellow'>
     <h2>PRODUCTIONS AUDIOVISUELLES</h2>
     <!-- Contenu de la section -->
 </section>
@@ -105,8 +105,29 @@ b.hypertext(html_desc)
 # get tag content convert to data
 # get style and class convert to particle
 # end
-b.hyperedit(:title) do |tag_desc|
-  puts tag_desc
+b.hyperedit(:div_id) do |tag_desc|
+  puts  tag_desc.class
+end
+
+  wait 2 do
+    div_result = HTML.locate(id: 'div_id') # find by ID
+
+    atomized_el= atomizer({ target: div_result, id: :my_second_html_obj })
+    atomized_el.rotate(55)
+    atomized_el.color(:purple)
+    atomized_el.position(:absolute)
+    atomized_el.left(255)
+    atomized_el.top(255)
+  end
+
+
+wait 3 do
+  # or handle the objet in pure ruby js style
+  div_result = HTML.locate(id: 'div_id') # find by ID
+  div_result[:style][:left]= "66px"
+  puts "the div is : #{div_result[:style][:left]}"
+
+
 end
 
 # TODO : create an html to atome converter

data/vendor/assets/application/examples/test.rb

@@ -1,57 +1,2 @@
-m = table({ renderers: [:html], attach: :view, id: :my_test_box, type: :table, apply: [:shape_color],
-            left: 333, top: 0, width: 300, smooth: 15, height: 900, overflow: :scroll, option: { header: false },
-            component: {
-              border: { thickness: 5, color: :blue, pattern: :dotted },
-              overflow: :auto,
-              color: "white",
-              shadow: {
-                id: :s4,
-                left: 20, top: 0, blur: 9,
-                option: :natural,
-                red: 0, green: 1, blue: 0, alpha: 1
-              },
-              # height: 80,
-              # width: 12,
-              component: { size: 12, color: :black }
-            },
-            data: [
-              { remove_me: :nonono },
-              { dfgdf: 1, name: 'Alice', age: 30, no: 'oko', t: 123, r: 654, f: 123, g: 654, w: 123, x: 654, c: 123, v: 654 },
-            ]
-          })
+# frozen_string_literal: true
 
-
-
-  m.data( [
-            {header_title: nil },
-            { dfgdf:nil, name: nil, age: nil, no: nil, t: nil, r: nil, f: nil, g: nil, w: nil, x: nil, c: nil, v: nil },
-            { id: nil, name: nil, age: nil },
-            { dfg: nil, name: nil, age: nil, no: nil },
-            { dfgd: nil, name: nil, age: nil, no: nil },
-            {header_title: nil },
-            { dfgdf:nil, name: nil, age: nil, no: nil, t: nil, r: nil, f: nil, g: nil, w: nil, x: nil, c: nil, v: nil },
-            { id: nil, name: nil, age: nil },
-            { dfg: nil, name: nil, age: nil, no: nil },
-            { dfgd: nil, name: nil, age: nil, no: nil },
-            {header_title: nil },
-            { dfgdf:nil, name: nil, age: nil, no: nil, t: nil, r: nil, f: nil, g: nil, w: nil, x: nil, c: nil, v: nil },
-            { id: nil, name: nil, age: nil },
-            { dfg: nil, name: nil, age: nil, no: nil },
-            { dfgd: nil, name: nil, age: nil, no: nil },
-            {header_title: nil },
-            { dfgdf:nil, name: nil, age: nil, no: nil, t: nil, r: nil, f: nil, g: nil, w: nil, x: nil, c: nil, v: nil },
-            { id: nil, name: nil, age: nil },
-            { dfg: nil, name: nil, age: nil, no: nil },
-            { dfgd: nil, name: nil, age: nil, no: nil },
-            {header_title: nil },
-            { dfgdf:nil, name: nil, age: nil, no: nil, t: nil, r: nil, f: nil, g: nil, w: nil, x: nil, c: nil, v: nil },
-            { id: nil, name: nil, age: nil },
-            { dfg: nil, name: nil, age: nil, no: nil },
-            { dfgd: nil, name: nil, age: nil, no: nil },
-            {header_title: nil },
-            { dfgdf:nil, name: nil, age: nil, no: nil, t: nil, r: nil, f: nil, g: nil, w: nil, x: nil, c: nil, v: nil },
-            { id: nil, name: nil, age: nil },
-            { dfg: nil, name: nil, age: nil, no: nil },
-            { dfgd: nil, name: nil, age: nil, no: nil },
-
-          ])