From da83a0dd039996d6fb1fee445cf55b628eddcc44 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@villataika.fi>
Date: Sun, 5 Feb 2023 17:47:51 +0200
Subject: [PATCH] add opal browser, find element in dom

---
 Gemfile                               |  1 +
 Gemfile.lock                          |  5 +++++
 app/assets/javascript/opal_main.js.rb | 21 +++++++++++++++++++++
 app/views/kanta/show.html.haml        | 15 +++++++--------
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/Gemfile b/Gemfile
index 13a4b59..1d4f5e6 100644
--- a/Gemfile
+++ b/Gemfile
@@ -33,6 +33,7 @@ gem "passenger" , "6.0.15" ,  require: "phusion_passenger/rack_handler"
 gem "bootsnap", require: false
 
 gem "opal-rails"
+gem "opal-browser"
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
diff --git a/Gemfile.lock b/Gemfile.lock
index 6a5eae8..65713a0 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -265,6 +265,9 @@ GEM
     opal (1.7.2)
       ast (>= 2.3.0)
       parser (~> 3.0, >= 3.0.3.2)
+    opal-browser (0.3.3)
+      opal (>= 1.0, < 2.0)
+      paggio (>= 0.3.0)
     opal-rails (2.0.2)
       opal (~> 1.0)
       opal-sprockets (~> 1.0)
@@ -276,6 +279,7 @@ GEM
       tilt (>= 1.4)
     open4 (1.3.4)
     orm_adapter (0.5.0)
+    paggio (0.3.0)
     parser (3.2.0.0)
       ast (~> 2.4.1)
     passenger (6.0.15)
@@ -447,6 +451,7 @@ DEPENDENCIES
   kaminari
   merged!
   mina
+  opal-browser
   opal-rails
   passenger (= 6.0.15)
   pg (~> 1.1)
diff --git a/app/assets/javascript/opal_main.js.rb b/app/assets/javascript/opal_main.js.rb
index 508ba44..096d401 100644
--- a/app/assets/javascript/opal_main.js.rb
+++ b/app/assets/javascript/opal_main.js.rb
@@ -1 +1,22 @@
 require "opal"
+require "native"
+require 'promise'
+require 'browser/setup/mini'
+
+class Kanta
+  def initialize(hash)
+    hash.each do |k,v|
+      instance_variable_set "@#{k}" , v
+      self.class.define_method k.to_sym do
+        instance_variable_get "@#{k}".to_sym
+      end
+      self.class.define_method "#{k}=".to_sym  do |new_v|
+        instance_variable_set "@#{k}" , new_v
+      end
+    end
+
+    def mount(on_class)
+      puts $document[on_class].inner_html
+    end
+  end
+end
diff --git a/app/views/kanta/show.html.haml b/app/views/kanta/show.html.haml
index 77afcf2..4fcd449 100644
--- a/app/views/kanta/show.html.haml
+++ b/app/views/kanta/show.html.haml
@@ -1,4 +1,4 @@
-.flex.justify-center
+#app.flex.justify-center
   .flex.flex-col
     = @image.attributes
 
@@ -6,13 +6,12 @@
       Back
 
 :opal
-  class Kanta
-    def initialize(hash)
-      hash.each do |k,v|
-      puts k
-      puts v
-      end
-    end
+  class Clicker < Kanta
+
   end
 
   kanta = Kanta.new(bg: 'bg-cyan-200')
+  puts kanta.bg
+  kanta.bg = "bg-cyan"
+  puts kanta.bg
+  kanta.mount("#app")