atome 0.5.1.4 → 0.5.2.5

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

@@ -3,7 +3,7 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:html_shape) do
+generator.build_render(:html_shape) do
   current_atome = @atome
   id_found = current_atome[:id]
   @html_object = Html.new
@@ -11,7 +11,7 @@ generator.build_render_method(:html_shape) do
   @html_object.attr('id', id_found)
 end
 
-generator.build_render_method(:html_color) do |_value|
+generator.build_render(:html_color) do |_value|
   # we remove previous unused style tag
   opal_document[id]&.remove
   red_found = @atome[:red]
@@ -24,7 +24,7 @@ generator.build_render_method(:html_color) do |_value|
   # `document.getElementById(#{id}).sheet.cssRules[0].style.backgroundColor = 'red'`
 end
 
-generator.build_render_method(:html_image) do |_user_prc|
+generator.build_render(:html_image) do |_user_prc|
   # id_found = id
   # instance_exec(&proc) if proc.is_a?(Proc)
   # DOM do
@@ -34,10 +34,10 @@ generator.build_render_method(:html_image) do |_user_prc|
   # @html_type = :image
 end
 
-generator.build_render_method(:html_shadow) do
+generator.build_render(:html_shadow) do
 end
 
-generator.build_render_method(:html_video) do |_value, _user_proc|
+generator.build_render(:html_video) do |_value, _user_proc|
   # id_found = id
   # # instance_exec(&proc) if proc.is_a?(Proc)
   # DOM do

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

@@ -2,7 +2,7 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:html_smooth) do |value|
+generator.build_render(:html_smooth) do |value|
   formated_params = case value
                     when Array
                       properties = []

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

@@ -2,7 +2,7 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:html_touch) do |_value, proc|
+generator.build_render(:html_touch) do |_value, proc|
   @html_object.on :click do |e|
     instance_exec(&proc) if proc.is_a?(Proc)
   end

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

@@ -2,10 +2,10 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:html_width) do |value|
+generator.build_render(:html_width) do |value|
   @html_object.style[:width] = "#{value}px" unless @html_type == :style
 end
 
-generator.build_render_method(:html_height) do |value|
+generator.build_render(:html_height) do |value|
   @html_object.style[:height] = "#{value}px" unless @html_type == :style
 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/renderers/html/identity.rb

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

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

@@ -2,7 +2,7 @@
 
 generator = Genesis.generator
 
-# generator.build_render_method(:html_left) do |_value, user_proc|
+# generator.build_render(:html_left) do |_value, user_proc|
 #   instance_exec(&user_proc) if user_proc.is_a?(Proc)
 # end
 #
@@ -11,18 +11,18 @@ generator = Genesis.generator
 #   instance_exec(&user_proc) if user_proc.is_a?(Proc)
 # end
 
-generator.build_render_method(:html_left) do |value, _user_proc|
+generator.build_render(: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|
+generator.build_render(: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|
+generator.build_render(: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|
+generator.build_render(:html_bottom) do |value, _user_proc|
   @html_object.style[:bottom] = "#{value}px" unless @html_type == :style
 end

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

@@ -1,17 +1,17 @@
 # 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
+generator.build_render(:html_bloc)
+generator.build_render(:html_id)
+generator.build_render(:html_render)
+generator.build_render(:html_delete) do
   html_object&.remove
 end
-generator.build_render_method(:html_clear) do
+generator.build_render(:html_clear) do
   @atome[:children].each do |child_found|
     grab(child_found).html_object&.remove
   end
   children([])
 end
-generator.build_render_method(:html_schedule)
-generator.build_render_method(:html_reader)
+generator.build_render(:html_schedule)
+generator.build_render(:html_reader)

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

@@ -2,5 +2,5 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:server_schedule)
-generator.build_render_method(:server_reader)
+generator.build_render(:server_schedule)
+generator.build_render(:server_reader)

data/lib/atome/version.rb

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

data/lib/atome.rb

@@ -8,8 +8,8 @@ require 'atome/kernel/universe'
 require 'atome/helpers/essentials'
 require 'atome/renderers/renderer'
 require 'atome/helpers/color_helper/color'
+require 'atome/extensions/atome'
 require 'atome/atome'
-require 'atome/processors/utilities'
 require 'atome/helpers/utilities'
 require 'atome/helpers/callbacks'
 require 'atome/genesis/generators/atome'
@@ -22,10 +22,12 @@ require 'atome/genesis/generators/identity'
 require 'atome/genesis/generators/material'
 require 'atome/genesis/generators/spatial'
 require 'atome/genesis/generators/utility'
-require 'atome/renderers/browser/browser'
-require 'atome/renderers/html/html'
+if RUBY_ENGINE.downcase == 'opal'
+  require 'atome/renderers/browser/browser'
+  require 'atome/renderers/html/html'
+end
 require 'atome/renderers/headless/headless'
 require 'atome/renderers/server/server'
-require 'atome/extensions/atome'
+require 'atome/extensions/matrix'
 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/sig/atome_js.rbs

@@ -0,0 +1 @@
+ATOME_JS: untyped

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 {
@@ -68,29 +69,26 @@ html, body {
     -webkit-background-clip: text;
 }
 
-.vertical-center {
-    /*font-size: 18px;*/
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: absolute;
-    top: 50%;
-    -ms-transform: translateY(-50%);
-    /*transform: translateY(calc(50% - 200px));*/
+    transform: translate(-50%, -50%);
 }
 
-.center {
-    /*font-size: 18px;*/
+.center_vertical {
+    display: flex;
+    align-items: center;
     position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translateY(-50%);
-    /* #calc is width -border*2 */
-    /*transform: translateX(calc(50% - 200px)) translateY(calc(50% - 200px));*/
+    transform: translateY(-50%);
 }
 
-.horizontal-center {
+.center_horizontal{
+    display: flex;
+    justify-content: center;
     position: absolute;
-    left: 50%;
-    -ms-transform: translateY(-50%);
-    /*transform: translateX(calc(50% - 200px));*/
+    transform: translateX(-50%);
 }
 
 .e_align_h_left {
@@ -119,3 +117,13 @@ html, body {
     display: flex;
     align-items: flex-end;
 }
+
+/*::selection {*/
+/*    color: transparent;*/
+/*    background: none;*/
+/*}*/
+/*!* For Mozilla Firefox *!*/
+/*::-moz-selection {*/
+/*    color: transparent;*/
+/*    background: none;*/
+/*}*/

data/vendor/assets/build/index.html

@@ -8,9 +8,13 @@
     <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/wad.min.js"></script>
+<!--    <script type="text/javascript" src="js/third_parties/tone.min.js"></script>-->
+<!--    <script type="text/javascript" src="js/third_parties/xsound.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,13 +22,18 @@
     <!--    <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>
     <title>atome</title>
     <link rel="icon" type="image/x-icon" href="./favicon.ico">
 </head>
-<body id='user_view' class='atome' oncontextmenu="return false;">
-</body>
+<body id='user_view' class='atome' oncontextmenu="return false;"></body>
 <script src='js/application.js' defer></script>
 </html>

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);
+//
+//     })();
+// });