atome 0.5.7.6.0 → 0.5.7.6.5

data/vendor/assets/src/medias/utils/examples/particles/end/example.rb

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+new(molecule: :calendar) do |params, &bloc|
+
+  cal = box(params)
+  cal.resize(true)
+  cal_id = cal.id
+
+  ##########################  create calendar ##########################
+  cal_name = cal_id
+  calendar = <<~JAVASCRIPT
+    	 window.#{cal_name} = new tui.Calendar('##{cal_id}', {
+    		defaultView: 'month',
+    		usageStatistics: false,
+    		month: {
+    			startDayOfWeek: 0,
+    		},
+    		week: {
+    			showTimezoneCollapseButton: true,
+    			timezones: [{ timezoneOffset: 0, displayLabel: 'UTC', tooltip: 'UTC' }],
+    		},
+    });
+
+
+    
+     
+  JAVASCRIPT
+
+  JS.eval(calendar)
+
+  ######################### Update view methode ############################
+
+
+
+
+  cal.define_singleton_method(:view) do |view_mode|
+    update_calendar = <<~JAVASCRIPT
+      	 function changeCalendarView(view) {
+      	const validViews = ['day', 'week', 'month'];
+      	if (!validViews.includes(view)) {
+      		console.error(`Vue non valide: ${view}. Les vues valides sont: ${validViews.join(', ')}`);
+      		return;
+      	}
+      	window.#{cal_name}.changeView(view);
+      }
+      	changeCalendarView('#{view_mode}');
+
+      	// changeCalendarView('day');
+    JAVASCRIPT
+    JS.eval(update_calendar)
+  end
+
+  cal.define_singleton_method(:event) do |new_event|
+    add_event = <<~JAVASCRIPT
+      window.#{cal_name}.createEvents([
+      		{
+      			id: '#{new_event[:id]}',
+      			calendarId: '#{new_event[:calendarId]}',
+      			title: '#{new_event[:title]}',
+      			category: '#{new_event[:category]}',
+      			dueDateClass: '#{new_event[:dueDateClass]}',
+      			start: '#{new_event[:start]}',
+      			end: '#{new_event[:end]}',
+      		},
+      	]);
+    JAVASCRIPT
+    JS.eval(add_event)
+
+  end
+
+
+
+  #################
+  cal.define_singleton_method(:update_event) do |event_id, calendar_id, updates|
+    update_event = <<~JAVASCRIPT
+    window.#{cal_name}.updateEvent(
+      '#{event_id}',        // ID de l'événement
+      '#{calendar_id}',     // ID du calendrier
+      {
+        title: '#{updates[:title]}',
+        start: new Date('#{updates[:start]}'),
+        end: new Date('#{updates[:end]}'),
+        category: '#{updates[:category]}',
+        dueDateClass: '#{updates[:dueDateClass]}',
+        isAllDay: #{updates[:isAllDay] ? 'true' : 'false'},
+        location: '#{updates[:location]}',
+        raw: #{updates[:raw] || '{}'},
+        state: '#{updates[:state]}'
+      }
+    );
+  JAVASCRIPT
+    JS.eval(update_event)
+  end
+  #################
+
+  cal.define_singleton_method(:delete_event) do |event_id, calendar_id|
+    delete_event = <<~JAVASCRIPT
+    window.#{cal_name}.deleteEvent('#{event_id}', '#{calendar_id}');
+  JAVASCRIPT
+    JS.eval(delete_event)
+  end
+
+  ####################
+
+  cal.define_singleton_method(:log_event_range) do
+    log_range = <<~JAVASCRIPT
+    var selectedRanges = [];
+
+    window.#{cal_name}.on('selectDateTime', function(info) {
+      var range = { start: new Date(info.start), end: new Date(info.end) };
+      selectedRanges.push(range);
+      console.log('Selected ranges:', selectedRanges);
+
+      // Exemple de traitement de chaque plage
+      selectedRanges.forEach(function(range) {
+        console.log('Processing range:', range.start, 'to', range.end);
+      });
+
+      // Réinitialisation après traitement
+      selectedRanges = [];
+    });
+  JAVASCRIPT
+    JS.eval(log_range)
+  end
+  ######################
+
+  cal.define_singleton_method(:handle_range_clear) do
+    clear_range = <<~JAVASCRIPT
+    window.#{cal_name}.on('selectDateTime', function(info) {
+      // Log the selected range (optional)
+      console.log('Selected range:', new Date(info.start), 'to', new Date(info.end));
+      
+      // Clear the selected range
+      window.#{cal_name}.clearGridSelections();
+      
+      console.log('Range selection cleared');
+    });
+  JAVASCRIPT
+    JS.eval(clear_range)
+  end
+
+  ######################
+  # now we return main atome
+  cal
+end
+cal = calendar({ id: :the_cal, width: 396, height: 396 })
+# below we get range when drag on the calendar
+cal.log_event_range
+# below we remove teh  range newly created to avoid graphical pollution
+cal.handle_range_clear
+wait 1 do
+  cal.event(	{
+                id: '1',
+                calendarId: '1',
+                title: 'nouvel example',
+                category: 'time',
+                dueDateClass: '',
+                start: '2024-08-20T10:12:00+00:00',
+                end: '2024-08-20T12:17:00+00:00',
+              })
+end
+
+wait 2 do
+  grab(:the_cal).view(:day)
+  wait 2 do
+    cal.view(:week)
+    wait 2 do
+      cal.view(:month)
+      wait 1 do
+        wait 1 do
+          cal.update_event('1', '1', {
+            title: 'Événement mis à jour',
+            start: '2024-08-20T11:00:00+00:00',
+            end: '2024-08-20T13:00:00+00:00',
+            category: 'time'
+          })
+        end
+        cal.delete_event('1', '1')
+      end
+    end
+  end
+end
+
+
+
+

data/vendor/assets/src/medias/utils/examples/particles/end/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the end object.

data/vendor/assets/src/medias/utils/examples/particles/end/usage.txt

@@ -0,0 +1 @@
+The end object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/exchange/example.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+b = box({ width: 200, height: 200, color: :white })
+
+a = b.box({ color: :green, left: 33, id: :box, shadow: {
+  id: :menu_active_shade,
+  left: 9,
+  top: -3,
+  blur: 10,
+  invert: false,
+  red: 0,
+  green: 0,
+  blue: 0,
+  alpha: 1 } })
+wait 2 do
+  a.exchange({ color: :red, top: 33})
+end

data/vendor/assets/src/medias/utils/examples/particles/exchange/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the exchange object.

data/vendor/assets/src/medias/utils/examples/particles/exchange/usage.txt

@@ -0,0 +1 @@
+The exchange object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/executor/example.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+def act_on(obj)
+  obj.color(:red)
+  obj.left(56)
+end
+
+def act_off(obj)
+  obj.color(:blue)
+  obj.left(33)
+end
+
+
+b = box({ left: 12, id: :the_first_box, top: 30 })
+
+b.touch(true) do
+  b.alternate({ width: 33, color: :red, height: 33 , smooth: 0 }, { width: 66, color: :orange, blur: 8}, { height: 66, color: :green, smooth: 9, blur: 0})
+end
+
+c = circle({ left: 99 , top: 30})
+
+c.touch(true) do
+  alt = b.alternate(true, false)
+  if alt
+    c.color(:yellowgreen)
+  else
+    c.color(:orange)
+  end
+end
+
+
+c2 = circle({ left: 333 , top: 30})
+
+
+c2.touch(true) do
+  b.alternate({  executor: {act_on: b}  }, { executor: {act_off: b}})
+end

data/vendor/assets/src/medias/utils/examples/particles/executor/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the executor object.

data/vendor/assets/src/medias/utils/examples/particles/executor/usage.txt

@@ -0,0 +1 @@
+The executor object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/fasten/example.rb

@@ -0,0 +1,23 @@
+#  frozen_string_literal: true
+b = box({ drag: true, id: :the_b, top: 63, left: 63 })
+c = b.circle({ left: 99, id: :the_c })
+b.box({left: 99, top: 99, width: 33, height: 33, id: :second_one})
+t = b.text({ data: 'touch the circle', left: 44, top: 44, id: :the_t })
+c.touch(:down) do
+  b.unfasten([c.id])
+  b.color(:green)
+  t.data('circle unfasten')
+  grab(:infos).data("number of item(s) fasten to the box : #{b.fasten}")
+  wait 2 do
+    grab(:second_one).delete((true))
+    grab(:infos).data("number of item(s) fasten to the box : #{b.fasten}")
+    wait 2 do
+      b.color(:red)
+      t.data('unfasten all attached atomes')
+      b.unfasten(:all)
+      grab(:infos).data("number of  item fasten to the box : #{b.fasten}")
+    end
+  end
+end
+
+text({id: :infos,left: 155, data: "number of  item fasten to the box : #{b.fasten}"})

data/vendor/assets/src/medias/utils/examples/particles/fasten/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the fasten object.

data/vendor/assets/src/medias/utils/examples/particles/fasten/usage.txt

@@ -0,0 +1 @@
+The fasten object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/fill/example.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+b=box({width: 300, height: 333, color: {alpha: 0}})
+image({id: :logo,path: 'medias/images/logos/atome.svg', width: 66, left: 555})
+grab(:black_matter).image({id: :planet,path: 'medias/images/red_planet.png', width: 66,height: 66,  left: 555, top: 180})
+
+
+b.fill([atome:  :logo, width: 33, height: 33 ])
+b.overflow(:hidden)
+wait 1 do
+  b.fill([atome:  :planet, width: 33, height: 33 ])
+  wait 1 do
+    b.fill([{atome:  :planet,repeat: {x: 5, y: 3}}])
+    wait 1 do
+      b.fill([{atome:  :planet,width: 33, height: 33 ,rotate: 33, size: { x: 800,y: 600 }, position: { x:-200,y: -200 } }])
+      wait 3 do
+        b.fill([{atome:  :planet,repeat: {x: 5, y: 3}}, { atome: :logo, width: 33, height: 33 ,  opacity: 0.3} ])
+      end
+    end
+  end
+end
+
+b.drag(true)

data/vendor/assets/src/medias/utils/examples/particles/fill/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the fill object.

data/vendor/assets/src/medias/utils/examples/particles/fill/usage.txt

@@ -0,0 +1 @@
+The fill object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/format/infos.txt

@@ -0,0 +1 @@
+No specific information available for the format object.

data/vendor/assets/src/medias/utils/examples/particles/format/usage.txt

@@ -0,0 +1 @@
+The purpose of the format object could not be inferred.

data/vendor/assets/src/medias/utils/examples/particles/fullscreen/infos.txt

@@ -0,0 +1 @@
+No specific information available for the fullscreen object.

data/vendor/assets/src/medias/utils/examples/particles/fullscreen/usage.txt

@@ -0,0 +1 @@
+The purpose of the fullscreen object could not be inferred.

data/vendor/assets/src/medias/utils/examples/particles/get/example.rb

@@ -0,0 +1,16 @@
+#  frozen_string_literal: true
+
+the_text = text({ data: 'hello for al the people in front of their machine jhgj  jg jgh jhg  iuuy res ', center: true, top: 120, width: 77, component: { size: 11 } })
+the_box = box({ left: 12 })
+the_circle = circle({ id: :cc, color: :orange })
+the_circle.image('red_planet')
+the_circle.color('red')
+the_circle.box({ left: 333, id: :the_c })
+
+element({ id: :the_element })
+the_view = grab(:view)
+puts "views_shape's shape are : #{the_view.shape}"
+puts "the_circle color is : #{the_circle.color}"
+puts "the_text data is : #{the_text.data}"
+puts "the_box left is : #{the_box.left}"
+puts "the_circle particles are : #{the_circle.particles}"

data/vendor/assets/src/medias/utils/examples/particles/get/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the get object.

data/vendor/assets/src/medias/utils/examples/particles/get/usage.txt

@@ -0,0 +1 @@
+The get object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/gradient/example.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+circ = circle({ drag: true })
+circ.remove({ all: :color })
+col_1 = circ.color(:white)
+col_2 = circ.color({ red: 1, id: :red_col })
+col_4 = circ.color({ blue: 1, id: :red_col2, alpha: 0.3 })
+col_5 = circ.color({ red: 0, green: 1, id: :red_col3, alpha: 0.7 })
+col_3 = circ.color(:yellow)
+wait 0.5 do
+  circ.paint({ gradient: [col_1.id, col_2.id], direction: :left })
+  wait 0.5 do
+    circ.paint({ id: :the_painter, rotate: 69, gradient: [col_1.id, col_2.id] })
+    wait 0.5 do
+      circ.color(:cyan)
+      circ.paint({ gradient: [col_1.id, col_2.id, col_3.id], rotate: 33, diffusion: :conic })
+      wait 0.5 do
+        painter = circ.paint({ id: :the_painter2, gradient: [col_1.id, col_2.id, col_3.id], direction: :left })
+        wait 0.5 do
+          # circ.color(:blue)
+          circ.paint({ gradient: [col_4.id, col_5.id], diffusion: :conic })
+          wait 1 do
+            circ.color(:blue)
+            # circ.paint({ gradient: [col_5.id, col_5.id], diffusion: :conic })
+          end
+        end
+      end
+    end
+  end
+
+end
+
+the_text = text({ data: 'hello for al the people in front of their machine', center: true, top: 222, width: 777, component: { size: 66 } })
+
+the_text.left(333)
+
+  the_text.paint({ gradient:  [col_1.id, col_2.id], direction: :left , id: :painted_love })
+
+# #TODO : gradient on text!
+

data/vendor/assets/src/medias/utils/examples/particles/gradient/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the gradient object.

data/vendor/assets/src/medias/utils/examples/particles/gradient/usage.txt

@@ -0,0 +1 @@
+The gradient object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/green/infos.txt

@@ -0,0 +1 @@
+No specific information available for the green object.

data/vendor/assets/src/medias/utils/examples/particles/green/usage.txt

@@ -0,0 +1 @@
+The purpose of the green object could not be inferred.

data/vendor/assets/src/medias/utils/examples/particles/height/infos.txt

@@ -0,0 +1 @@
+No specific information available for the height object.

data/vendor/assets/src/medias/utils/examples/particles/height/usage.txt

@@ -0,0 +1 @@
+The purpose of the height object could not be inferred.

data/vendor/assets/src/medias/utils/examples/particles/hide/infos.txt

@@ -0,0 +1 @@
+No specific information available for the hide object.

data/vendor/assets/src/medias/utils/examples/particles/hide/usage.txt

@@ -0,0 +1 @@
+The purpose of the hide object could not be inferred.

data/vendor/assets/src/medias/utils/examples/particles/holder/example.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+# holder is a particle that contain an atome so we use my_objet.holder.left(33)
+# and it will move the atome contain in the holder particle to be manipulated
+# it facilitate the access of some atome without being worried about their id
+# this is mainly used int context of input , slider , etc...
+
+
+# simple example
+b=box({color: :black})
+
+c=b.circle({width: 10, height: 10, color: :red})
+
+b.holder(c)
+wait 1 do
+  b.holder.center(true)
+end
+
+
+
+
+
+
+# second example ( holder is build in the input molecule)
+text({ left: 33, top: 33, data: 'data collected', id: :infos })
+
+inp = A.input({ width: 166,
+                trigger: :up,
+                back: :orange,
+                shadow: {
+                  id: :s2,
+                  left: 3, top: 3, blur: 3,
+                  invert: true,
+                  red: 0, green: 0, blue: 0, alpha: 0.9
+                },
+                text: :black,
+                smooth: 3,
+                left: 66,
+                top: 33,
+                default: 'type here'
+              }) do |val|
+
+  grab(:infos).data(val)
+end
+
+wait 2 do
+  inp.top(12)
+  wait 1 do
+    inp.width(666)
+    inp.holder.blur(6)
+    wait 1 do
+      inp.holder.blur(0)
+      inp.holder.data('injected data')
+    end
+  end
+
+end
+
+
+
+
+
+

data/vendor/assets/src/medias/utils/examples/particles/holder/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the holder object.

data/vendor/assets/src/medias/utils/examples/particles/holder/usage.txt

@@ -0,0 +1 @@
+The holder object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/particles/hyperedit/infos.txt

@@ -0,0 +1 @@
+No specific information available for the hyperedit object.

data/vendor/assets/src/medias/utils/examples/particles/hyperedit/usage.txt

@@ -0,0 +1 @@
+The purpose of the hyperedit object could not be inferred.

data/vendor/assets/src/medias/utils/examples/particles/hypertext/example.rb

@@ -0,0 +1,134 @@
+#  frozen_string_literal: true
+
+b = box({ id: :the_html, color: :orange, overflow: :auto, width: :auto, height: :auto, left: 100, right: 100, top: 100, bottom: 100 })
+# html_desc=<<STR
+# <!DOCTYPE html>
+# <html>
+#     <head>
+#         <title>Une petite page HTML</title>
+#         <meta charset="utf-8" />
+#     </head>
+#     <body>
+#         <h1 id='title' style='color: yellowgreen'>Un titre de niveau 1</h1>
+#
+#         <p>
+#             Un premier petit paragraphe.
+#         </p>
+#
+#         <h2>Un titre de niveau 2</h2>
+#
+#         <p>
+#             Un autre paragraphe contenant un lien pour aller
+#             sur le site <a href="http://koor.fr">KooR.fr</a>.
+#         </p>
+#     </body>
+# </html>
+# STR
+html_desc = <<STR
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Com 1 Image</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
+        header { display: flex; justify-content: space-between; align-items: center; padding: 20px; }
+        nav { display: none; } 
+        .section { padding: 50px 20px; text-align: center;z-index: 3  }
+        .contact-info { text-align: left; }
+        @media (min-width: 768px) {
+            nav { display: block; }
+        }
+    </style>
+  <style>
+        .ok-info { text-align: left; }
+        @media (min-width: 768px) {
+            nav { display: block; }
+        }
+    </style>
+</head>
+<body>
+
+<header>
+    <button>☰</button> <!-- Icône de menu pour mobile -->
+    <h1>Com 1 Image</h1>
+    <nav>
+        <a href="#accueil">Accueil</a>
+    </nav>
+</header>
+
+<section id='div_id' class="section my_class" style='left: 333px;color: yellow'>
+    <h2>PRODUCTIONS AUDIOVISUELLES</h2>
+    <!-- Contenu de la section -->
+</section>
+
+<section class="section">
+    <h2>COLLABORATIF</h2>
+    <p>Texte sur le collaboratif...</p>
+</section>
+
+<section class="section">
+    <h2>CORPORATE</h2>
+    <div class="communication">
+        <!-- Images et textes liés à la communication -->
+    </div>
+    <div class="publicite">
+        <!-- Images et textes liés à la publicité -->
+    </div>
+    <!-- ... Autres contenus de la section Corporate -->
+</section>
+
+<section class="section">
+    <h2>ART</h2>
+    <p>Texte sur l'art...</p>
+</section>
+
+<section class="section contact-info">
+    <h2>CONTACT</h2>
+    <p>email@example.com</p>
+    <address>
+        74 bis avenue des Thèmes<br>
+        63400 - Chamalières
+    </address>
+</section>
+
+</body>
+</html>
+
+STR
+b.hypertext(html_desc)
+
+# b.hyperedit(id)  do |html_object|
+# id convert to atome
+# get tage type  convert to markup
+# get tag content convert to data
+# get style and class convert to particle
+# end
+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/src/medias/utils/examples/particles/hypertext/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the hypertext object.

data/vendor/assets/src/medias/utils/examples/particles/hypertext/usage.txt

@@ -0,0 +1 @@
+The hypertext object is used for specific purposes as indicated in the example.