atome 0.5.1.1 → 0.5.1.9

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

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# require 'atome/renderers/headless/effect'
+# require 'atome/renderers/headless/event'
+# require 'atome/renderers/headless/geometry'
+# require 'atome/renderers/headless/identity'
+# require 'atome/renderers/headless/material'
+# require 'atome/renderers/headless/spatial'
+# require 'atome/renderers/headless/atome'
+require 'atome/renderers/headless/utility'

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

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:headless_schedule)
+generator.build_render_method(:headless_reader)

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/renderers/html/spatial.rb

@@ -6,7 +6,7 @@ generator = Genesis.generator
 #   instance_exec(&user_proc) if user_proc.is_a?(Proc)
 # end
 #
-# generator.build_optional_methods(:pre_get_left) do
+# generator.build_option(:pre_get_left) do
 #   user_proc = @user_proc
 #   instance_exec(&user_proc) if user_proc.is_a?(Proc)
 # end

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

@@ -13,3 +13,5 @@ generator.build_render_method(:html_clear) do
   end
   children([])
 end
+generator.build_render_method(:html_schedule)
+generator.build_render_method(:html_reader)

data/lib/atome/renderers/renderer.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# Rendering method here
+class Atome
+  private
+
+  def rendering(element_to_render, content, &user_proc)
+    render_engines = @atome[:renderers]
+    render_engines.each do |render_engine|
+      send("#{render_engine}_#{element_to_render}", content, &user_proc)
+    end
+  end
+end

data/lib/atome/renderers/server/server.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# require 'atome/renderers/server/effect'
+# require 'atome/renderers/server/event'
+# require 'atome/renderers/server/geometry'
+# require 'atome/renderers/server/identity'
+# require 'atome/renderers/server/material'
+# require 'atome/renderers/server/spatial'
+# require 'atome/renderers/server/atome'
+require 'atome/renderers/server/utility'

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

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:server_schedule)
+generator.build_render_method(:server_reader)

data/lib/atome/version.rb

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

data/lib/atome.rb

@@ -6,10 +6,11 @@ require 'atome/genesis/genesis'
 require 'atome/kernel/essentials'
 require 'atome/kernel/universe'
 require 'atome/helpers/essentials'
+require 'atome/renderers/renderer'
 require 'atome/helpers/color_helper/color'
-require 'atome/atome_meta_engine'
-require 'atome/processors/utilities'
+require 'atome/atome'
 require 'atome/helpers/utilities'
+require 'atome/helpers/callbacks'
 require 'atome/genesis/generators/atome'
 require 'atome/presets/atome'
 require 'atome/genesis/generators/communication'
@@ -22,6 +23,8 @@ require 'atome/genesis/generators/spatial'
 require 'atome/genesis/generators/utility'
 require 'atome/renderers/browser/browser'
 require 'atome/renderers/html/html'
+require 'atome/renderers/headless/headless'
+require 'atome/renderers/server/server'
 require 'atome/extensions/atome'
 require 'atome/helpers/sanitizer'
 require 'atome/genesis/sparkle'

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

@@ -3,25 +3,28 @@
 <head>
     <meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'>
     <meta charset='UTF-8'/>
-<!--    <meta Cross-Origin-Opener-Policy="same-origin"/>-->
-<!--    <meta Cross-Origin-Embedder-Policy="require-corp"/>-->
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
     <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 will be uncomment when using stand alone app
-and loaded on the fly when using server mode-->
+    <!--    TODO: we line below is commented when using stand alone mode and loaded on demand when using server mode-->
     <!--    <script type="text/javascript" src="js/third_parties/fabric.min.js"></script>-->
     <!--    <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,82 +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 ={
-
-
-}
+///////////////////////////////////////////////////////////
+// //// 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);
+//
+//     })();
+// });
 
-// TODO: put in a class
 
-const atome = {
-    jsSchedule: function (years, months, days, hours, minutes, seconds, proc) {
-        const now = new Date();
-        const formatedDate = new Date(years, months - 1, days, hours, minutes, seconds);
-        const diffTime = Math.abs(formatedDate - now);
-        setTimeout(function () {
-            Opal.Object.$schedule_callback(proc);
-        }, diffTime);
-    }
-}
 

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)
+
+
+    }
+
+
+}

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

@@ -0,0 +1,85 @@
+const atomeDrag = {
+
+    drag: function (options, atome_id, atome) {
+        let element = document.getElementById(atome_id)
+        const position = {x: 0, y: 0}
+        interact(element).draggable({
+            listeners: {
+                start(event) {
+                    atome.$drag_start_callback(event.pageX, event.pageY, event.rect.left, event.rect.top);
+                },
+                move(event) {
+                    position.x += event.dx
+                    position.y += event.dy
+                    //  we feed the callback method below
+                    atome.$drag_move_callback(event.pageX, event.pageY, event.rect.left, event.rect.top);
+
+                    if (options === true) {
+                        event.target.style.transform =
+                            event.target.style.transform = 'translate(' + position.x + 'px, ' + position.y + 'px)'
+                    }
+
+                },
+                end(event) {
+                    atome.$drag_end_callback(event.pageX, event.pageY, event.rect.left, event.rect.top);
+
+
+                },
+            }
+        })
+
+    },
+
+    inertia: function (options, atome_id, _atome) {
+        let element = document.getElementById(atome_id)
+        interact(element).draggable({
+            inertia: options
+        })
+    },
+
+    lock: function (options, atome_id, _atome) {
+        let element = document.getElementById(atome_id)
+        interact(element).draggable({
+            startAxis: 'xy',
+            lockAxis: options
+        });
+    },
+
+    remove: function (options, atome_id, _atome) {
+        let element = document.getElementById(atome_id)
+        interact(element).draggable(options);
+    },
+
+    snap: function (options, atome_id, _atome) {
+        let element = document.getElementById(atome_id)
+        interact(element)
+            .draggable({
+                modifiers: [
+                    interact.modifiers.snap({
+                        targets: [
+                            interact.snappers.grid(options),
+                        ],
+                        range: Infinity,
+                        relativePoints: [{x: 0, y: 0}]
+                    }),
+                ],
+            })
+    },
+
+    constraint: function (params, atome_id, _atome) {
+        let element = document.getElementById(atome_id)
+        if ((typeof params) != 'object' && params !== 'parent') {
+            params = document.getElementById(params);
+        }
+        interact(element)
+            .draggable({
+                modifiers: [
+                    interact.modifiers.restrict({
+                        restriction: params,
+                        elementRect: {top: 0, left: 0, bottom: 1, right: 1},
+                        // endOnly: false
+                    })
+                ],
+            })
+    }
+}

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

@@ -0,0 +1,7 @@
+const atomeFile = {
+    reader: function (file, atome, proc) {
+        fetch('medias/' + file)
+            .then(response => response.text())
+            .then(text => atome.$read_callback(text, proc))
+    }
+}

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

@@ -0,0 +1,20 @@
+const atomeSort = {
+    sort: function (options, atome_id, atome) {
+        let element = document.getElementById(atome_id)
+        let children = Array.from(element.children);
+        children.forEach((element, _index) => {
+            element.style.position = 'relative'
+            element.style.webkitUserDrag = 'element'
+        })
+        Sortable.create(element, {
+            animation: 1150,
+            ghostClass: 'selected',
+            onSort: function () {
+                // alert('sorted');
+                atome.$sort_callback(atome)
+
+                // sortable({sort: onSort, change:onChange, start:onStart })
+            }
+        })
+    },
+}

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

@@ -0,0 +1,10 @@
+const atomeTime = {
+    schedule: 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);
+    }
+}

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

@@ -0,0 +1,12 @@
+const atomeVideo = {
+    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();
+        }
+    }
+}