atome 0.5.4.1.7 → 0.5.4.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1cd2344c47f76ea286f9a43141167d453be88717f538f71be93cbb43dd37487b
-  data.tar.gz: 26af922e7831e2a363adf36baa7112bde11e1b2cf7cc460a74ed04e348d7d46f
+  metadata.gz: 4feb89bd1af8453078bbe9c826af8f6176c321ee7b155e109c3b8a3f6033e87e
+  data.tar.gz: 7d13f98dde5fbafb74f27eae1ea4fe025ef7de735c939414cc23708205963a6f
 SHA512:
-  metadata.gz: '0847ca30e88fc3c5cb33fa43dd030022b01fa5646455c13f706681516de240a29e5dabb0b9a25a4f714c37a28b87b9523ddddc70989fb7e2618082054a55a51d'
-  data.tar.gz: 6c8ddbb6432e002be2c4eea459bab8ef5a8e7b620789005889e272851a9912ebe88c785f01fc2d7bbed9923ad81aa90e23fea988ae71b817036937f1021428e4
+  metadata.gz: 82eca49b901057c6070c7db3f64496efee49b63833a27b6b0dc2388a32a7cf1e6b37a7531bec2e9272f963f9d39f75ae7884c20d89cbe1482c0abe58dc674b6e
+  data.tar.gz: c1013e2b38c94c2a46fef8aa91fade3361ef952d71be71e7ddbeada26955c43a7ce21e252a5ceadf954fd4a8ea96faf7298f5666be5db9311b1478f6280d834e

data/CHANGELOG.md

@@ -15,4 +15,7 @@ vector now use class instead of a local style
 ## [0.5.4.1.7] - 2023-05-25
 
 remove "shape :pre" and move the condition when using :definition to atome_common , because of a bug that remove all 
-attached atome  
+attached atome  
+
+## [0.5.4.1.8] - 2023-05-25
+Ready to add gradient color now systematically use a variable for each component( Red, green , blue , alpha)  

data/lib/atome/renderers/browser/atome.rb

@@ -23,17 +23,17 @@ generator.build_render(:browser_shape) do
 end
 
 generator.build_render(:browser_color) do |_value|
-  puts  " @atome[:id] : #{@atome[:id]}"
+  puts " @atome[:id] : #{@atome[:id]}"
   @browser_type = :style
   # puts "1 - for the id  : #{id} the browser type is  ::::> #{@browser_type}"
   id_found = @atome[:id]
   # type_found = @atome[:type]
   # we remove previous unused style tag
   BrowserHelper.browser_document[id]&.remove
-  red_found = @atome[:red]
-  blue_found = @atome[:blue]
-  green_found = @atome[:green]
-  alpha_found = @atome[:alpha]
+  red = @atome[:red]
+  green = @atome[:green]
+  blue = @atome[:blue]
+  alpha = @atome[:alpha]
   ########################### old code ###########################
   #   BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
   #   id='#{id_found}'>.#{id_found}{
@@ -47,11 +47,30 @@ generator.build_render(:browser_color) do |_value|
   ########################### new code ###########################
   atomic_style = BrowserHelper.browser_document['#atomic_style']
 
+  #   class_content = <<STR
+  # .#{id_found} {
+  #   --#{id_found}_r : #{red * 255}
+  #   --#{id_found}_g : #{green * 255}
+  #   --#{id_found}_b : #{blue * 255}
+  #   --#{id_found}_a : #{alpha}
+  #   --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ))
+  #
+  #   background-color: rgba(#{red * 255}, #{green * 255}, #{blue * 255}, #{alpha});
+  #   fill: rgba(#{red * 255}, #{green * 255}, #{blue * 255}, #{alpha});
+  #   stroke: rgba(#{red * 255}, #{green * 255}, #{blue * 255}, #{alpha});
+  # }
+  # STR
+
   class_content = <<STR
 .#{id_found} {
-  background-color: rgba(#{red_found * 255}, #{green_found * 255}, #{blue_found * 255}, #{alpha_found});
-  fill: rgba(#{red_found * 255}, #{green_found * 255}, #{blue_found * 255}, #{alpha_found});
-  stroke: rgba(#{red_found * 255}, #{green_found * 255}, #{blue_found * 255}, #{alpha_found});
+  --#{id_found}_r : #{red * 255};
+  --#{id_found}_g : #{green * 255};
+  --#{id_found}_b : #{blue * 255};
+  --#{id_found}_a : #{alpha};
+  --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ));
+  background-color: var(--#{id_found}_col);
+  fill:  var(--#{id_found}_col);
+  stroke:  var(--#{id_found}_col);
 }
 STR
 
@@ -114,8 +133,8 @@ STR
       atomic_style.text += class_content
     end
   end
-#
-#   @browser_object = BrowserHelper.browser_document[id_found]
+  #
+  #   @browser_object = BrowserHelper.browser_document[id_found]
 
 end
 

data/lib/atome/renderers/browser/helpers/color_helper.rb

@@ -2,14 +2,20 @@
 
 # for browser rendering
 module BrowserHelper
-  def self.browser_colorize_color(color_updated, atome)
+  def self.browser_colorize_color(red, green, blue, alpha, atome)
     ########################### new code ###########################
     id_found=atome[:id]
+    # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
     new_class_content = <<STR
 .#{id_found} {
-  background-color: #{color_updated};
-  fill: #{color_updated};
-  stroke: #{color_updated};
+  --#{id_found}_r : #{red * 255};
+  --#{id_found}_g : #{green * 255};
+  --#{id_found}_b : #{blue * 255};
+  --#{id_found}_a : #{alpha};
+  --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ));
+  background-color: var(--#{id_found}_col);
+  fill:  var(--#{id_found}_col);
+  stroke:  var(--#{id_found}_col);
 }
 STR
 
@@ -32,13 +38,16 @@ STR
 
   end
 
-  def self.browser_colorize_shadow(color_updated, atome)
-    "new shadow color is : #{color_updated}"
-    puts "=====> #{color_updated} : #{atome}"
+  def self.browser_colorize_shadow(red, green, blue, alpha, atome)
+    # "new shadow color is : #{color_updated}"
+    # puts "=====> #{color_updated} : #{atome}"
+    # TODO: check if we need to use variable for the color or let it like it is!
     left = atome[:left]
     top = atome[:top]
     blur = atome[:blur]
     direction = atome[:direction]
+
+
     # shadow_updated = "#{left}px #{top}px #{blur}px #{color_updated} #{direction}"
     # `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
 
@@ -46,7 +55,13 @@ STR
     id_found= atome[:id]
     class_content = <<STR
 .#{id_found} {
-  box-shadow: #{left}px #{top}px #{blur}px #{color_updated} #{direction};
+  --#{id_found}_r : #{red * 255};
+  --#{id_found}_g : #{green * 255};
+  --#{id_found}_b : #{blue * 255};
+  --#{id_found}_a : #{alpha};
+  --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ));
+
+  box-shadow: #{left}px #{top}px #{blur}px var(--#{id_found}_col) #{direction};
 }
 STR
 

data/lib/atome/renderers/browser/material.rb

@@ -3,46 +3,46 @@
 generator = Genesis.generator
 
 generator.build_render(:red) do |value|
-  red = ((@atome[:red] = value) * 255)
-  green = @atome[:green] * 255
-  blue = @atome[:blue] * 255
+  red = (@atome[:red] = value)
+  green = @atome[:green]
+  blue = @atome[:blue]
   alpha = @atome[:alpha]
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
 
 generator.build_render(:green) do |value|
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  red = @atome[:red] * 255
-  green = (@atome[:green] = value) * 255
-  blue = @atome[:blue] * 255
+  red = @atome[:red]
+  green = (@atome[:green] = value)
+  blue = @atome[:blue]
   alpha = @atome[:alpha]
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
 
 generator.build_render(:blue) do |value|
-  red = @atome[:red] * 255
-  green = @atome[:green] * 255
-  blue = (@atome[:blue] = value) * 255
+  red = @atome[:red]
+  green = @atome[:green]
+  blue = (@atome[:blue] = value)
   alpha = @atome[:alpha]
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
 
 generator.build_render(:alpha) do |value|
-  red = @atome[:red] * 255
-  green = @atome[:green] * 255
-  blue = @atome[:blue] * 255
+  red = @atome[:red]
+  green = @atome[:green]
+  blue = @atome[:blue]
   alpha = (@atome[:alpha] = value)
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
@@ -89,7 +89,7 @@ new ({ browser: :opacity }) do |value|
 end
 
 new ({ browser: :definition }) do |value|
-  target=id
+  target = id
   `
 
 var divElement =  document.querySelector('#'+#{target});;

data/lib/atome/renderers/browser/opal_add_on.rb

@@ -1,31 +1,32 @@
-def add_new_class(class_name, tag_name, tag_content)
+# def add_new_class(class_name, tag_name, tag_content)
+#
+# `
+#   var styleTag = document.getElementById("atomic_style");
+#   styleTag.innerHTML += "\n."+#{class_name}+'{\n '+#{tag_name}+': '+#{tag_content}+';\n}\n\n\n\n';
+# `
+# end
+#
+# add_new_class('new_class', 'background-color','yellow')
+# add_new_class('other_class', 'color','red')
 
-`
-  var styleTag = document.getElementById("atomic_style");
-  styleTag.innerHTML += "\n    ."+#{class_name}+'{\n        '+#{tag_name}+': '+#{tag_content}+';\n}';
-`
-end
+# def update_css_tag(tag_name, var_name, value)
+#   alert "this code doesn't work with chrome"
+#   `
+#   var rules = null;
+#       var cssRules = document.styleSheets[0].cssRules;
+#       for (var i = 0; i < cssRules.length; i++) {
+#       var rule = cssRules[i];
+#       if (rule.selectorText === '.'+#{tag_name}) {
+#         rules = rule;
+#         break;
+#       }
+#       }
+#
+#       if (rules) {
+#
+#       rules.style.setProperty(#{var_name}, #{value});
+#       }
+# `
+# end
 
-add_new_class('new_class', 'background-color','yellow')
-add_new_class('other_class', 'color','red')
-
-def update_css_tag(tag_name, var_name, value)
-  `
-  var rules = null;
-      var cssRules = document.styleSheets[0].cssRules;
-      for (var i = 0; i < cssRules.length; i++) {
-      var rule = cssRules[i];
-      if (rule.selectorText === '.'+#{tag_name}) {
-        rules = rule;
-        break;
-      }
-      }
-
-      if (rules) {
-
-      rules.style.setProperty(#{var_name}, #{value});
-      }
-`
-end
-
-update_css_tag('other_class', '--end-color', 'blue')
+# update_css_tag('other_class', '--end-color', 'blue')

data/lib/atome/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atome
 version: !ruby/object:Gem::Version
-  version: 0.5.4.1.7
+  version: 0.5.4.1.9
 platform: ruby
 authors:
 - Jean-Eric Godard
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-05-25 00:00:00.000000000 Z
+date: 2023-05-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: arduino_firmata