atome 0.5.1.4 → 0.5.1.9

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/utility.rb

@@ -21,7 +21,7 @@ end
 generator.build_render_method(: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|
@@ -31,9 +31,9 @@ generator.build_render_method(:browser_schedule) do |format_date, proc|
   hours = format_date[3]
   minutes = format_date[4]
   seconds = format_date[5]
-  `atome.jsSchedule(#{years},#{months},#{days},#{hours},#{minutes},#{seconds},#{self},#{proc})`
+  AtomeJS.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})`
+  AtomeJS.JS.reader(file, self, proc)
 end

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

@@ -34,7 +34,7 @@ class Html
     `#{parent_found}.appendChild(#{@html})`
   end
   def append_color(parent)
-    alert "color : #{parent.class}"
+    aleputsrt "color : #{parent.class}"
   end
   def append_to(_node)
 

data/lib/atome/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 class Atome
-  VERSION = '0.5.1.4'
+  VERSION = '0.5.1.9'
 end

data/lib/atome.rb

@@ -9,7 +9,6 @@ require 'atome/helpers/essentials'
 require 'atome/renderers/renderer'
 require 'atome/helpers/color_helper/color'
 require 'atome/atome'
-require 'atome/processors/utilities'
 require 'atome/helpers/utilities'
 require 'atome/helpers/callbacks'
 require 'atome/genesis/generators/atome'

data/sig/atome.rbs

@@ -1,4 +1,5 @@
 module Atome
   VERSION: String
   # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+  def sort_callback: -> untyped
 end

data/vendor/assets/build/css/style.css

@@ -18,7 +18,7 @@ html, body {
 }
 
 
-#device {
+#view {
     left: 0;
     font-size: 25px;
     right: 0;
@@ -43,6 +43,7 @@ html, body {
 
 .selected {
     outline: 2px dashed white;
+    background-color: #00bb00;
 }
 
 .atome {

data/vendor/assets/build/index.html

@@ -8,9 +8,10 @@
     <link type="text/css" rel="stylesheet" href="css/style.css">
     <script type="text/javascript" src="js/third_parties/interact.min.js"></script>
     <script type="text/javascript" src="js/third_parties/popmotion.min.js"></script>
+    <script type="text/javascript" src="js/third_parties/sortable.min.js"></script>
     <script type="text/javascript" src="js/third_parties/sha256.min.js"></script>
     <script type="text/javascript" src="js/third_parties/ping.min.js"></script>
-    <script src='js/third_parties/w3color.js'></script>
+<!--    <script src='js/third_parties/w3color.js'></script>-->
     <script src='js/opal/opal.js'></script>
     <script src='js/opal/opal_browser.js'></script>
     <!--    TODO: we line below is commented when using stand alone mode and loaded on demand when using server mode-->
@@ -18,6 +19,12 @@
     <!--    <script type="text/javascript" src="js/third_parties/three.min.js"></script>-->
     <!--    <script src='js/opal/opal_parser.js'></script>-->
     <script src='js/aui.js'></script>
+    <script src='js/atome/atome_helpers/atome_animate.js' defer></script>
+    <script src='js/atome/atome_helpers/atome_drag.js' defer></script>
+    <script src='js/atome/atome_helpers/atome_file.js' defer></script>
+    <script src='js/atome/atome_helpers/atome_sort.js' defer></script>
+    <script src='js/atome/atome_helpers/atome_time.js' defer></script>
+    <script src='js/atome/atome_helpers/atome_video.js' defer></script>
     <script src='js/atome/atome.js' defer></script>
     <script src='js/atome/kernel.js' defer></script>
     <script src='js/opal/atome_opal_extensions.js'></script>

data/vendor/assets/build/js/atome/atome.js

@@ -1,155 +1,160 @@
-// class AtomeDrag {
-//     constructor() {
-//     }
+const atomeJS = Object.assign(atomeAnimate,atomeDrag,atomeFile,atomeSort, atomeTime, atomeVideo);
+
+// // class AtomeDrag {
+// //     constructor() {
+// //     }
+// //
+// //     drag(atome_drag_id) {
+// //         // target elements with the "draggable" class
+// //         self.current_obj = Opal.Utilities.$grab(atome_drag_id)
+// //         interact('.'+atome_drag_id)
+// //             .draggable({
+// //                 // enable inertial throwing
+// //                 startAxis: 'x',
+// //                 lockAxis: 'x',
+// //                 // lockAxis: ''+lock_axis,
+// //                 inertia: true,
+// //                 // keep the element within the area of it's parent
+// //                 modifiers: [
+// //                     interact.modifiers.restrictRect({
+// //                         restriction: 'parent',
+// //                         endOnly: true
+// //                     })
+// //                 ],
+// //                 // enable autoScroll
+// //                 autoScroll: true,
+// //
+// //                 listeners: {
+// //                     // call this function on every dragmove event
+// //
+// //                     move: dragMoveListener,
+// //                     start(event) {
+// // //TODO:  optimise this passing the proc to the drag callback
+// //                         // lets get the current atome Object
+// //                         // self.current_obj = Opal.Utilities.$grab(atome_drag_id)
+// //                         // now get the grab proc
+// //                         self.proc_meth = current_obj.bloc
+// //                     },
+// //                     // call this function on every dragend event
+// //                     end(event) {
+// //                     }
+// //                 }
+// //             })
+// //
+// //         function dragMoveListener(event) {
+// //             const target = event.target
+// //             // the code below can be conditioned to receive the drag event without moving the object
+// //             // keep the dragged position in the data-x/data-y attributes
+// //             const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+// //             const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+// //             // translate the element
+// //             target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
+// //             // update the position attributes
+// //             target.setAttribute('data-x', x)
+// //             target.setAttribute('data-y', y)
+// //             // CallBack here
+// //             self.current_obj.$dragCallback(event.pageX, event.pageY, event.rect.left, event.rect.top, self.current_obj, self.proc_meth);
+// //         }
+// //     }
+// //
+// // }
+//
+// // Usage:
+// // let atomeDrag = new AtomeDrag();
+// // atomeDrag.drag('atome_id', 'options');
+// // const Atomeanimation = {}
+//
+//
+//
+// // TODO: put in a class
+//
 //
-//     drag(atome_drag_id) {
-//         // target elements with the "draggable" class
-//         self.current_obj = Opal.Utilities.$grab(atome_drag_id)
-//         interact('.'+atome_drag_id)
-//             .draggable({
-//                 // enable inertial throwing
-//                 startAxis: 'x',
-//                 lockAxis: 'x',
-//                 // lockAxis: ''+lock_axis,
-//                 inertia: true,
-//                 // keep the element within the area of it's parent
-//                 modifiers: [
-//                     interact.modifiers.restrictRect({
-//                         restriction: 'parent',
-//                         endOnly: true
-//                     })
-//                 ],
-//                 // enable autoScroll
-//                 autoScroll: true,
-//
-//                 listeners: {
-//                     // call this function on every dragmove event
-//
-//                     move: dragMoveListener,
-//                     start(event) {
-// //TODO:  optimise this passing the proc to the drag callback
-//                         // lets get the current atome Object
-//                         // self.current_obj = Opal.Utilities.$grab(atome_drag_id)
-//                         // now get the grab proc
-//                         self.proc_meth = current_obj.bloc
-//                     },
-//                     // call this function on every dragend event
-//                     end(event) {
-//                     }
-//                 }
-//             })
-//
-//         function dragMoveListener(event) {
-//             const target = event.target
-//             // the code below can be conditioned to receive the drag event without moving the object
-//             // keep the dragged position in the data-x/data-y attributes
-//             const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
-//             const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
-//             // translate the element
-//             target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
-//             // update the position attributes
-//             target.setAttribute('data-x', x)
-//             target.setAttribute('data-y', y)
-//             // CallBack here
-//             self.current_obj.$dragCallback(event.pageX, event.pageY, event.rect.left, event.rect.top, self.current_obj, self.proc_meth);
+// const atome = {
+//     jsSchedule: function (years, months, days, hours, minutes, seconds, atome, proc) {
+//         const now = new Date();
+//         const formatDate = new Date(years, months - 1, days, hours, minutes, seconds);
+//         const diffTime = Math.abs(formatDate - now);
+//         setTimeout(function () {
+//             atome.$schedule_callback(proc);
+//         }, diffTime);
+//     },
+//     jsReader: function (file, atome, proc) {
+//         fetch('medias/' + file)
+//             .then(response => response.text())
+//             .then(text => atome.$read_callback(text, proc))
+//     },
+//     js_Fullscreen: function (atome_id){
+//         let elem = document.getElementById(atome_id)
+//         if (elem.requestFullscreen) {
+//             elem.requestFullscreen();
+//         } else if (elem.webkitRequestFullscreen) { /* Safari */
+//             elem.webkitEnterFullscreen();
+//         } else if (elem.msRequestFullscreen) { /* IE11 */
+//             elem.msRequestFullscreen();
 //         }
+//
 //     }
 //
 // }
 
-// Usage:
-// let atomeDrag = new AtomeDrag();
-// atomeDrag.drag('atome_id', 'options');
-const Atomeanimation = {}
-
-
-
-// TODO: put in a class
-
-
-const atome = {
-    jsSchedule: function (years, months, days, hours, minutes, seconds, atome, proc) {
-        const now = new Date();
-        const formatDate = new Date(years, months - 1, days, hours, minutes, seconds);
-        const diffTime = Math.abs(formatDate - now);
-        setTimeout(function () {
-            atome.$schedule_callback(proc);
-        }, diffTime);
-    },
-    jsReader: function (file, atome, proc) {
-        fetch('medias/' + file)
-            .then(response => response.text())
-            .then(text => atome.$read_callback(text, proc))
-    },
-    js_Fullscreen: function (atome_id){
-        let elem = document.getElementById(atome_id)
-        if (elem.requestFullscreen) {
-            elem.requestFullscreen();
-        } else if (elem.webkitRequestFullscreen) { /* Safari */
-            elem.webkitEnterFullscreen();
-        } else if (elem.msRequestFullscreen) { /* IE11 */
-            elem.msRequestFullscreen();
-        }
-
-    }
-
-}
-
-
-// example ruby equivalent in js //
-Opal.queue(function (Opal) {/* Generated by Opal 1.6.0 */
-    const $klass = Opal.klass, $defs = Opal.defs, $def = Opal.def;
-// The line below create the AtomicJS cons to simplify access to js object from ruby
-
-    // var $const_set = Opal.const_set, $nesting = [], nil = Opal.nil;
-    // return $const_set($nesting[0], 'AtomicJS', atome)
-
-    (function ($base, $super) {
-        const self = $klass($base, $super, 'Atome_html');
-        $def(self, '$initialize', function $$initialize(val) {
-            // Init code below
-        }, 1);
-
-        $defs(self, '$check_this', function $$check_this(val) {
-            // getter code below
-            return (val);
-        }, 0);
-
-        $def(self, '$way', function $way() {
-            // getter code below
-            return (self.my_var);
-        }, 0);
-
-        return $def(self, '$way=', function $way(val) {
-            //self method example
-            return (self.my_var = val);
-        }, 0);
 
-
-    })();
-
-    // new class below
-    return (function ($base, $super) {
-        const self = $klass($base, $super, 'Atome');
-
-        $defs(self, '$verif', function $$verif(val) {
-            //self method example
-            return (val);
-        }, 0);
-
-        $def(self, '$new_method', function $way() {
-            // getter code below
-            return (self.new_method);
-        }, 0);
-
-
-        return $def(self, '$new_method=', function $way(val) {
-            //setter code below
-            return (self.atome = val);
-        }, 0);
-
-    })();
-});
+///////////////////////////////////////////////////////////
+// //// example ruby equivalent in js ///
+// Opal.queue(function (Opal) {/* Generated by Opal 1.6.0 */
+//     const $klass = Opal.klass, $defs = Opal.defs, $def = Opal.def;
+// // The line below create the AtomicJS cons to simplify access to js object from ruby
+//
+//     // var $const_set = Opal.const_set, $nesting = [], nil = Opal.nil;
+//     // return $const_set($nesting[0], 'AtomicJS', atome)
+//
+//     (function ($base, $super) {
+//         const self = $klass($base, $super, 'AtomeJS');
+//         $def(self, '$initialize', function $$initialize(val) {
+//             // Init code below
+//         }, 1);
+//
+//         $defs(self, '$check_this', function $$check_this(val) {
+//             // getter code below
+//             // alert ('Suoer cool!!'+val)
+//             // alert(atomeJS)
+//             return (val);
+//         }, 0);
+//
+//         $def(self, '$way', function $way() {
+//             // getter code below
+//             return (self.my_var);
+//         }, 0);
+//
+//         return $def(self, '$way=', function $way(val) {
+//             //self method example
+//             return (self.my_var = val);
+//         }, 0);
+//
+//
+//     })();
+//
+//     // new class below
+//     return (function ($base, $super) {
+//         const self = $klass($base, $super, 'Atome');
+//
+//         $defs(self, '$verif', function $$verif(val) {
+//             //self method example
+//             return (val);
+//         }, 0);
+//
+//         $def(self, '$new_method', function $way() {
+//             // getter code below
+//             return (self.new_method);
+//         }, 0);
+//
+//
+//         return $def(self, '$new_method=', function $way(val) {
+//             //setter code below
+//             return (self.atome = val);
+//         }, 0);
+//
+//     })();
+// });
 
 
 

data/vendor/assets/build/js/atome/atome_helpers/atome_animate.js

@@ -0,0 +1,65 @@
+const atomeAnimate = {
+
+    animate: function(particle_found, duration,damping_ratio,ease, mass,  repeat,stiffness, velocity,
+                      start_value, end_value, atome_id, atome_found,atome_hash,original_particle,animation_atome) {
+        // console.log(start_value)
+
+        const {easing,  styler, animate} = window.popmotion;
+
+        const target_div = document.querySelector('#'+atome_id);
+
+        // var myHash = Opal.hash({postion: target_div.style.transform});
+
+        // let particle_to_process=  myHash.$fetch('postion','');
+
+        animate({
+            type: ease,
+            from: start_value,
+            to: end_value,
+            duration: duration,
+            // mass: mass,
+            // velocity: velocity,
+            // dampingRatio: damping_ratio,
+            // stiffness: stiffness,
+            // repeat: repeat,
+            onPlay: (value) => {
+                animation_atome.$play_start_callback(particle_found, start_value,atome_hash,original_particle,atome_found)
+            },
+            onUpdate: (value) => {
+                atome_found.$browser_animate_callback(particle_found, value,atome_hash,original_particle,animation_atome)
+            },
+            onComplete: (value) => {
+                animation_atome.$play_stop_callback(particle_found, end_value,atome_hash,original_particle,atome_found)
+            }
+        });
+
+
+        ///////////////////////////
+
+
+
+        // const target_1 = document.querySelector('#box2');
+        // animate({
+        // 	  // from: 0,
+        // 	  // to: 100,
+        // 	  // from: "#fff",
+        // 		// to: "#000",
+        // 		// from: "0px 0px 0px rgba(0, 0, 0, 0)",
+        // 		//   to: "10px 10px 0px rgba(0, 0, 0, 0.2)",
+        // 		from: "rgba(0, 0, 0, 0)",
+        // 		  to: "rgba(0, 0, 0, 0.2)",
+        // 	  duration: 1000,
+        // 	  onUpdate: latest => {
+        // 		  console.log(latest)
+        // 		  // target_1.style.transform = `translateX(${latest}px)`;
+        // 		  target_1.style.background= latest
+        // 	  },
+        // 	  repeat: 6
+        // 	})
+        // let element = document.getElementById(atome_id)
+
+
+    }
+
+
+}