glimmer-dsl-web 0.0.6 → 0.0.8

data/lib/glimmer/web/event_proxy.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the

data/lib/glimmer/web/listener_proxy.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the
@@ -34,7 +34,6 @@ module Glimmer
         @selector = selector
         @listener = listener
         @js_listener = lambda do |js_event|
-          # TODO wrap event with a Ruby Event object before passing to listener
           event = EventProxy.new(js_event: js_event, listener: self)
           result = listener.call(event)
           result = true if result.nil?

data/lib/glimmer/web.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the

data/lib/glimmer-dsl-web/ext/date.rb

@@ -1,4 +1,3 @@
-# TODO double check if the latest Opal implemented everything below already
 require 'date'
 require 'time'
 
@@ -13,6 +12,10 @@ class DateTime < Date
       end
     end
   end
+  
+  def now
+    Time.now.to_datetime
+  end
 
   def to_date
     @time.to_date

data/lib/glimmer-dsl-web/samples/hello/hello_button.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the

data/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb

@@ -0,0 +1,137 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'glimmer-dsl-web'
+
+class Address
+  attr_accessor :text
+  attr_reader :name, :street, :city, :state, :zip
+  
+  def name=(value)
+    @name = value
+    update_text
+  end
+  
+  def street=(value)
+    @street = value
+    update_text
+  end
+  
+  def city=(value)
+    @city = value
+    update_text
+  end
+  
+  def state=(value)
+    @state = value
+    update_text
+  end
+  
+  def zip=(value)
+    @zip = value
+    update_text
+  end
+  
+  private
+  
+  def update_text
+    self.text = [name, street, city, state, zip].compact.reject(&:empty?).join(', ')
+  end
+end
+
+class User
+  attr_accessor :addresses
+  attr_reader :address_count
+  
+  def initialize
+    @address_count = 1
+    @addresses = []
+    update_addresses
+  end
+  
+  def address_count=(value)
+    value = [[1, value.to_i].max, 3].min
+    @address_count = value
+    update_addresses
+  end
+  
+  private
+  
+  def update_addresses
+    address_count_change = address_count - addresses.size
+    if address_count_change > 0
+      address_count_change.times { addresses << Address.new }
+    else
+      address_count_change.abs.times { addresses.pop }
+    end
+  end
+end
+
+@user = User.new
+
+div {
+  div {
+    label('Number of addresses: ', for: 'address-count-field')
+    input(id: 'address-count-field', type: 'number', min: 1, max: 3) {
+      value <=> [@user, :address_count]
+    }
+  }
+  
+  div {
+    # Content Data-Binding is used to dynamically (re)generate content of div
+    # based on changes to @user.addresses, replacing older content on every change
+    content(@user, :addresses) do
+      @user.addresses.each do |address|
+        div {
+          div(style: 'display: grid; grid-auto-columns: 80px 280px;') { |address_div|
+            [:name, :street, :city, :state, :zip].each do |attribute|
+              label(attribute.to_s.capitalize, for: "#{attribute}-field")
+              input(id: "#{attribute}-field", type: 'text') {
+                value <=> [address, attribute]
+              }
+            end
+            
+            div(style: 'grid-column: 1 / span 2;') {
+              inner_text <= [address, :text]
+            }
+            
+            style {
+              <<~CSS
+                #{address_div.selector} {
+                  margin: 10px 0;
+                }
+                #{address_div.selector} * {
+                  margin: 5px;
+                }
+                #{address_div.selector} label {
+                  grid-column: 1;
+                }
+                #{address_div.selector} input, #{address_div.selector} select {
+                  grid-column: 2;
+                }
+              CSS
+            }
+          }
+        }
+      end
+    end
+  }
+}.render

data/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the
@@ -21,7 +21,7 @@
 
 require 'glimmer-dsl-web'
 
-Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init: true) do
+Address = Struct.new(:street, :street2, :city, :state, :zip_code, :billing_and_shipping, keyword_init: true) do
   STATES = {
     "AK"=>"Alaska",
     "AL"=>"Alabama",
@@ -89,7 +89,10 @@ Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init:
   end
 
   def summary
-    values.map(&:to_s).reject(&:empty?).join(', ')
+    string_attributes = to_h.except(:billing_and_shipping)
+    summary = string_attributes.values.map(&:to_s).reject(&:empty?).join(', ')
+    summary += " (Billing & Shipping)" if billing_and_shipping
+    summary
   end
 end
 
@@ -98,14 +101,15 @@ end
   street2: 'Apartment 3C, 2nd door to the right',
   city: 'San Diego',
   state: 'California',
-  zip_code: '91911'
+  zip_code: '91911',
+  billing_and_shipping: true,
 )
 
 include Glimmer
 
 Document.ready? do
   div {
-    form(style: 'display: grid; grid-auto-columns: 80px 200px;') { |address_form|
+    div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
       label('Street: ', for: 'street-field')
       input(id: 'street-field') {
         # Bidirectional Data-Binding with <=> ensures input.value and @address.street
@@ -139,16 +143,25 @@ Document.ready? do
         # on_write option specifies :to_s method to invoke on value before writing to model attribute
         # to ensure the numeric zip code value is stored as a String
         value <=> [@address, :zip_code,
-                    on_write: :to_s
+                    on_write: :to_s,
                   ]
       }
       
+      div(style: 'grid-column: 1 / span 2') {
+        input(id: 'billing-and-shipping-field', type: 'checkbox') {
+          checked <=> [@address, :billing_and_shipping]
+        }
+        label(for: 'billing-and-shipping-field') {
+          'Use this address for both Billing & Shipping'
+        }
+      }
+      
       style {
         <<~CSS
-          .#{address_form.element_id} * {
+          #{address_div.selector} * {
             margin: 5px;
           }
-          .#{address_form.element_id} input, .#{address_form.element_id} select {
+          #{address_div.selector} input, #{address_div.selector} select {
             grid-column: 2;
           }
         CSS
@@ -156,10 +169,12 @@ Document.ready? do
     }
   
     div(style: 'margin: 5px') {
-      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes update div.inner_text
-      # as computed by changes to the address member attributes + state_code address custom attribute
+      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes
+      # automatically update div.inner_text
+      # (computed by changes to address attributes, meaning if street changes,
+      # @address.summary is automatically recomputed.)
       inner_text <= [@address, :summary,
-                      computed_by: @address.members + ['state_code']
+                      computed_by: @address.members + ['state_code'],
                     ]
     }
   }.render

data/lib/glimmer-dsl-web/samples/hello/hello_form.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the

data/lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb

@@ -0,0 +1,117 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'glimmer-dsl-web'
+
+class TimePresenter
+  attr_accessor :date_time, :month_string, :week_string
+  
+  def initialize
+    @date_time = Time.now
+  end
+  
+  def month_string
+    @date_time&.strftime('%Y-%m')
+  end
+  
+  def month_string=(value)
+    if value.match(/^\d{4}-\d{2}$/)
+      year, month = value.split('-')
+      self.date_time = Time.new(year, month, date_time.day, date_time.hour, date_time.min)
+    end
+  end
+  
+  def week_string
+    return nil if @date_time.nil?
+    year = @date_time.year
+    week = ((@date_time.yday / 7).to_i + 1).to_s.rjust(2, '0')
+    "#{year}-W#{week}"
+  end
+  
+  def date_time_string
+    @date_time&.strftime('%Y-%m-%dT%H:%M')
+  end
+  
+  def date_time_string=(value)
+    if value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+      date_time_parts = value.split('T')
+      date_parts = date_time_parts.first.split('-')
+      time_parts = date_time_parts.last.split(':')
+      self.date_time = Time.new(*date_parts, *time_parts)
+    end
+  end
+end
+
+@time_presenter = TimePresenter.new
+
+include Glimmer
+
+Document.ready? do
+  div {
+    div(style: 'display: grid; grid-auto-columns: 130px 260px;') { |container_div|
+      label('Date Time: ', for: 'date-time-field')
+      input(id: 'date-time-field', type: 'datetime-local') {
+        # Bidirectional Data-Binding with <=> ensures input.value and @time_presenter.date_time
+        # automatically stay in sync when either side changes
+        value <=> [@time_presenter, :date_time]
+      }
+      
+      label('Date: ', for: 'date-field')
+      input(id: 'date-field', type: 'date') {
+        value <=> [@time_presenter, :date_time]
+      }
+      
+      label('Time: ', for: 'time-field')
+      input(id: 'time-field', type: 'time') {
+        value <=> [@time_presenter, :date_time]
+      }
+      
+      label('Month: ', for: 'month-field')
+      input(id: 'month-field', type: 'month') {
+        value <=> [@time_presenter, :month_string, computed_by: :date_time]
+      }
+      
+      label('Week: ', for: 'week-field')
+      input(id: 'week-field', type: 'week', disabled: true) {
+        value <=> [@time_presenter, :week_string, computed_by: :date_time]
+      }
+      
+      label('Time String: ', for: 'time-string-field')
+      input(id: 'time-string-field', type: 'text') {
+        value <=> [@time_presenter, :date_time_string, computed_by: :date_time]
+      }
+      
+      style {
+        <<~CSS
+          #{container_div.selector} * {
+            margin: 5px;
+          }
+          #{container_div.selector} label {
+            grid-column: 1;
+          }
+          #{container_div.selector} input {
+            grid-column: 2;
+          }
+        CSS
+      }
+    }
+  }.render
+end

data/lib/glimmer-dsl-web/samples/hello/hello_world.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the

data/lib/glimmer-dsl-web.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
 # a copy of this software and associated documentation files (the
@@ -26,7 +26,11 @@ GLIMMER_DSL_OPAL_LIB = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib')
  
 $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_LIB)
 
-if RUBY_ENGINE == 'opal'
+if RUBY_ENGINE != 'opal'
+  require 'opal-rails'
+  require 'opal-async'
+  require 'opal-jquery'
+else
 #   GLIMMER_DSL_OPAL_MISSING = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib', 'glimmer-dsl-opal', 'missing')
    
 #   $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_MISSING) # missing Ruby classes/methods
@@ -75,7 +79,7 @@ if RUBY_ENGINE == 'opal'
   require 'glimmer-dsl-xml'
   require 'glimmer-dsl-css'
   
-  Glimmer::Config.loop_max_count = 150 # TODO consider disabling if preferred
+  Glimmer::Config.loop_max_count = 50 # TODO consider disabling if preferred
   
   original_logger_level = Glimmer::Config.logger.level
   Glimmer::Config.logger = Glimmer::Config::OpalLogger.new(STDOUT)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.8
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-01 00:00:00.000000000 Z
+date: 2024-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.4.1
+        version: 2.7.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.4.1
+        version: 2.7.6
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-xml
   requirement: !ruby/object:Gem::Requirement
@@ -52,6 +52,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 1.2.2
+- !ruby/object:Gem::Dependency
+  name: opal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.4.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.4.1
+- !ruby/object:Gem::Dependency
+  name: opal-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.0.2
 - !ruby/object:Gem::Dependency
   name: opal-async
   requirement: !ruby/object:Gem::Requirement
@@ -66,6 +94,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 1.4.0
+- !ruby/object:Gem::Dependency
+  name: opal-jquery
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.4.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.4.6
 - !ruby/object:Gem::Dependency
   name: to_collection
   requirement: !ruby/object:Gem::Requirement
@@ -188,34 +230,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.8.0.alpha2
-- !ruby/object:Gem::Dependency
-  name: opal-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.1.2
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.1.2
-- !ruby/object:Gem::Dependency
-  name: opal-jquery
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.4.4
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.4.4
 description: Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) -
   Enables frontend GUI development with Ruby by adopting a DSL that follows web-like
   HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development.
@@ -239,13 +253,16 @@ files:
 - lib/glimmer-dsl-web/ext/date.rb
 - lib/glimmer-dsl-web/ext/exception.rb
 - lib/glimmer-dsl-web/samples/hello/hello_button.rb
+- lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_form.rb
+- lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb
 - lib/glimmer-dsl-web/samples/hello/hello_world.rb
 - lib/glimmer-dsl-web/vendor/jquery.js
 - lib/glimmer/config/opal_logger.rb
 - lib/glimmer/data_binding/element_binding.rb
 - lib/glimmer/dsl/web/bind_expression.rb
+- lib/glimmer/dsl/web/content_data_binding_expression.rb
 - lib/glimmer/dsl/web/data_binding_expression.rb
 - lib/glimmer/dsl/web/dsl.rb
 - lib/glimmer/dsl/web/element_expression.rb
@@ -260,7 +277,6 @@ files:
 - lib/glimmer/web/element_proxy.rb
 - lib/glimmer/web/event_proxy.rb
 - lib/glimmer/web/listener_proxy.rb
-- lib/glimmer/web/property_owner.rb
 homepage: http://github.com/AndyObtiva/glimmer-dsl-web
 licenses:
 - MIT

data/lib/glimmer/web/property_owner.rb

@@ -1,24 +0,0 @@
-module Glimmer
-  module Web
-    # Adapts Glimmer UI classes to SWT JavaBean property owner classes (which are now adapted to Opal)
-    module PropertyOwner
-      # TODO consider adding has_attribute?
-      
-      def get_attribute(attribute_name)
-        send(attribute_getter(attribute_name))
-      end
-    
-      def set_attribute(attribute_name, *args)
-        send(attribute_setter(attribute_name), *args) unless args.size == 1 && send(attribute_getter(attribute_name)) == args.first
-      end
-      
-      def attribute_setter(attribute_name)
-        "#{attribute_name.to_s.underscore}="
-      end
-      
-      def attribute_getter(attribute_name)
-        attribute_name.to_s.underscore
-      end
-    end
-  end
-end