glimmer-dsl-opal 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8fcd24e24134d90f11791bfa99b68aa16726b3ac97a8d77bad5bdba4761c866
-  data.tar.gz: 32f0a803b817689f9ea48e4fda7506fcc562eb606bb546cb1735c77a2ff60487
+  metadata.gz: 4abedea4353104a18359a2131eee38b7cff23498f246e35ddec92380798c5555
+  data.tar.gz: cbba1e1d0b89ebd01c9ddba94cfbeeee5359f93b985e192d826829369794c85e
 SHA512:
-  metadata.gz: b9a3ada345381b967ff44feb61d2a5f52dfba6ce1297c6e3f5d21359276dbdcd3844fc4bc731475f34219f13281d89fe5a1bdb1e7adafd08093e286ec36e6ef8
-  data.tar.gz: e120cdd6aad1afd34b95f59cc805b975dd2348e3b32de13c3ef20402c4c22c9fc0308a97a71846656db2928c038b70bc46014a532616afd8d43e752f5ce9f509
+  metadata.gz: 8223f782d4e4daeefa03081e95b54fc4ab0e9782825a4fd4c17d041d73284c7bf1c78a3141defa526b648e5d6ab41b63ffafea610584d235f7f6b29adb21d3ca
+  data.tar.gz: d8f62269cc84ae305f3e6cbd74d371272008d7ed1f6d2d8bb44b3fb95cc96247c7628fb95f788a19e2e30d67aedf017dfc19e82b8467af349d000013caa05219

data/README.md

@@ -1,5 +1,5 @@
 
-# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=65 /> Glimmer DSL for Opal 0.0.3 (Web GUI for Desktop Apps)
+# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=65 /> Glimmer DSL for Opal 0.0.4 (Web GUI for Desktop Apps)
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -7,10 +7,12 @@
 
 It enables running [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps on the web via [Rails](https://rubyonrails.org/) 5 and [Opal](https://opalrb.com/) 1.
 
-NOTE: Alpha Version 0.0.3 only supports capabilities for:
-- Hello, World!
-- Hello, Combo!
-- Hello, Computed!
+NOTE: Alpha Version 0.0.4 only supports capabilities below (detailed under [Examples](#examples)):
+- [Hello, World!](#hello-world)
+- [Hello, Combo!](#hello-combo)
+- [Hello, Computed!](#hello-computed)
+- [Hello, List Single Selection!](#hello-list-single-selection)
+- [Hello, List Multi Selection!](#hello-list-multi-selection)
 
 Other Glimmer DSL gems:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (Desktop GUI)
@@ -27,6 +29,7 @@ The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glim
 - `button`
 - `text`
 - `composite`
+- `list` & `list(:multi)`
 - `grid_layout`
 - `layout_data`
 
@@ -51,7 +54,7 @@ Add the following to `Gemfile` (NOTE: if you run into issues, they are probably
 ```
 gem 'opal-rails'
 gem 'opal-browser'
-gem 'glimmer-dsl-opal', '~> 0.0.3', require: false
+gem 'glimmer-dsl-opal', '~> 0.0.4', require: false
 ```
 
 Edit `config/initializers/assets.rb` and add:
@@ -183,8 +186,6 @@ class HelloComputed
   end
 end
 
-require_relative "hello_computed/contact"
-
 class HelloComputed
   include Glimmer
 
@@ -270,6 +271,130 @@ You should see "Hello, Computed!"
 
 ![Glimmer DSL for Opal Hello Computed](images/glimmer-dsl-opal-hello-computed.png)
 
+### Hello, List Single Selection!
+
+Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
+
+```ruby
+class Person 
+  attr_accessor :country, :country_options
+
+  def initialize
+    self.country_options=["", "Canada", "US", "Mexico"]
+    self.country = "Canada"
+  end
+
+  def reset_country
+    self.country = "Canada"
+  end
+end
+
+class HelloListSingleSelection
+  include Glimmer
+  def launch
+    person = Person.new
+    shell {
+      composite {
+        list {
+          selection bind(person, :country)
+        }
+        button {
+          text "Reset"
+          on_widget_selected do
+            person.reset_country
+          end
+        }
+      }
+    }.open
+  end
+end
+
+HelloListSingleSelection.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for Opal Hello List Single Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-single-selection.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, List Single Selection!"
+
+![Glimmer DSL for Opal Hello List Single Selection](images/glimmer-dsl-opal-hello-list-single-selection.png)
+
+### Hello, List Multi Selection!
+
+Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
+
+```ruby
+class Person
+  attr_accessor :provinces, :provinces_options
+
+  def initialize
+    self.provinces_options=[
+      "",
+      "Quebec",
+      "Ontario",
+      "Manitoba",
+      "Saskatchewan",
+      "Alberta",
+      "British Columbia",
+      "Nova Skotia",
+      "Newfoundland"
+    ]
+    self.provinces = ["Quebec", "Manitoba", "Alberta"]
+  end
+
+  def reset_provinces
+    self.provinces = ["Quebec", "Manitoba", "Alberta"]
+  end
+end
+
+class HelloListMultiSelection
+  include Glimmer
+  def launch
+    person = Person.new
+    shell {
+      composite {
+        list(:multi) {
+          selection bind(person, :provinces)
+        }
+        button {
+          text "Reset"
+          on_widget_selected do
+            person.reset_provinces
+          end
+        }
+      }
+    }.open
+  end
+end
+
+HelloListMultiSelection.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for Opal Hello List Multi Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-multi-selection.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, List Multi Selection!"
+
+![Glimmer DSL for Opal Hello List Multi Selection](images/glimmer-dsl-opal-hello-list-multi-selection.png)
+
 ## Help
 
 ### Issues

data/VERSION

@@ -1 +1 @@
-0.0.3
+0.0.4

data/lib/glimmer/data_binding/list_selection_binding.rb

@@ -0,0 +1,51 @@
+require 'glimmer/data_binding/observable'
+require 'glimmer/data_binding/observer'
+
+module Glimmer
+  module DataBinding
+    # SWT List element selection binding
+    class ListSelectionBinding
+      include Glimmer
+      include Observable
+      include Observer
+
+      attr_reader :element_proxy
+
+      PROPERTY_TYPE_UPDATERS = {
+        :string => lambda { |element_proxy, value| element_proxy.select(element_proxy.index_of(value.to_s)) },
+        :array => lambda { |element_proxy, value| element_proxy.selection=(value || []) }
+      }
+
+      PROPERTY_EVALUATORS = {
+        :string => lambda do |selection_array|
+          return nil if selection_array.empty?
+          selection_array[0]
+        end,
+        :array => lambda do |selection_array|
+          selection_array
+        end
+      }
+
+      # Initialize with list element and property_type
+      # property_type :string represents default list single selection
+      # property_type :array represents list multi selection
+      def initialize(element_proxy, property_type)
+        property_type = :string if property_type.nil? or property_type == :undefined
+        @element_proxy = element_proxy
+        @property_type = property_type
+        @element_proxy.on_widget_disposed do |dispose_event|
+          unregister_all_observables
+        end
+      end
+
+      def call(value)
+        PROPERTY_TYPE_UPDATERS[@property_type].call(@element_proxy, value) unless evaluate_property == value
+      end
+
+      def evaluate_property
+        selection_array = @element_proxy.selection.to_a #TODO refactor send('selection') into proper method invocation
+        PROPERTY_EVALUATORS[@property_type].call(selection_array)
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/opal/dsl.rb

@@ -15,7 +15,9 @@ require 'glimmer/dsl/opal/combo_selection_data_binding_expression'
 require 'glimmer/dsl/opal/widget_listener_expression'
 require 'glimmer/dsl/opal/grid_layout_expression'
 require 'glimmer/dsl/opal/text_expression'
+require 'glimmer/dsl/opal/list_expression'
 require 'glimmer/dsl/opal/layout_data_expression'
+require 'glimmer/dsl/opal/list_selection_data_binding_expression'
 
 module Glimmer
   module DSL
@@ -25,6 +27,7 @@ module Glimmer
        %w[
          widget_listener
          combo_selection_data_binding
+         list_selection_data_binding
          data_binding
          text
          property

data/lib/glimmer/dsl/opal/list_expression.rb

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/parent_expression'
+require 'glimmer/opal/list_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      class ListExpression < StaticExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Opal::ListProxy.new(parent, args)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/opal/list_selection_data_binding_expression.rb

@@ -0,0 +1,42 @@
+require 'glimmer/dsl/expression'
+require 'glimmer/data_binding/model_binding'
+require 'glimmer/data_binding/element_binding'
+require 'glimmer/data_binding/list_selection_binding'
+require 'glimmer/opal/list_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      class ListSelectionDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'selection' and
+            block.nil? and
+            parent.is_a?(Glimmer::Opal::ListProxy) and
+            args.size == 1 and
+            args[0].is_a?(DataBinding::ModelBinding) and
+            args[0].evaluate_options_property.is_a?(Array)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          model_binding = args[0]
+          element_binding = DataBinding::ElementBinding.new(parent, 'items')
+          element_binding.call(model_binding.evaluate_options_property)
+          model = model_binding.base_model
+          #TODO make this options observer dependent and all similar observers in widget specific data binding interpretrs
+          element_binding.observe(model, model_binding.options_property_name)
+  
+          property_type = :string
+          property_type = :array if parent.has_style?(:multi)
+          list_selection_binding = DataBinding::ListSelectionBinding.new(parent, property_type)
+          list_selection_binding.call(model_binding.evaluate_property)
+          #TODO check if nested data binding works for list widget and other widgets that need custom data binding
+          list_selection_binding.observe(model, model_binding.property_name_expression)
+  
+          parent.on_widget_selected do
+            model_binding.call(list_selection_binding.evaluate_property)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/opal/document_proxy.rb

@@ -28,16 +28,26 @@ module Glimmer
         # TODO make grid-layout support grab excess space false
         @head_dom ||= DOM {
           head {
-#             <<~CSS
-#             <style>
-#               div.grid-layout {
-#                 display: grid;
-#                 grid-template-columns: auto;
-#                 grid-row-gap: 10px;
-#                 justify-content: start;
-#               }
-#             </style>
-#             CSS
+            <<~CSS
+            <style>
+              ul {
+                list-style: none;
+                padding: 0;
+              }
+              li {
+                cursor: default;
+                padding-left: 10px;
+                padding-right: 10px;
+              }
+              li.selected-list-item {
+                background: rgb(80, 116, 211);
+                color: white;
+              }
+              li.empty-list-item {
+                color: transparent;
+              }
+            </style>
+            CSS
           }
         }
       end

data/lib/glimmer/opal/element_proxy.rb

@@ -70,18 +70,28 @@ module Glimmer
         redraw
       end
       
+      # TODO rename to avoid conflict with SWT Style verbiage
+      
       def style=(css)
         @style = css
         redraw
       end
       
+      def has_style?(symbol)
+        @args.include?(symbol) # not a very solid implementation. Bring SWT constants eventually
+      end
+      
       def handle_observation_request(keyword, &event_listener)
         return unless observation_request_to_event_mapping.keys.include?(keyword)
-        event = observation_request_to_event_mapping[keyword][:event]
-        event_handler = observation_request_to_event_mapping[keyword][:event_handler]
-        potential_event_listener = event_handler&.call(event_listener)
-        event_listener = event_handler&.call(event_listener) || event_listener
-        delegate = $document.on(event, selector, &event_listener)
+        event = nil
+        delegate = nil
+        [observation_request_to_event_mapping[keyword]].flatten.each do |mapping|
+          event = mapping[:event]
+          event_handler = mapping[:event_handler]
+          potential_event_listener = event_handler&.call(event_listener)
+          event_listener = event_handler&.call(event_listener) || event_listener
+          delegate = $document.on(event, selector, &event_listener)
+        end
         EventListenerProxy.new(element_proxy: self, event: event, selector: selector, delegate: delegate)
       end
       

data/lib/glimmer/opal/list_proxy.rb

@@ -0,0 +1,80 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class ListProxy < ElementProxy
+      ITEM_EMPTY = '_____'
+      attr_reader :items, :selection
+      
+      def initialize(parent, args)
+        super(parent, args)
+        @selection = []
+      end
+      
+      def items=(items)
+        @items = items.map {|item| item.strip == '' ? ITEM_EMPTY : item}
+        redraw
+      end
+      
+      def index_of(item)
+        @items.index(item)
+      end
+      
+      # used for multi-selection taking an array
+      def selection=(selection)
+        @selection = selection
+        redraw
+      end
+      
+      # used for single selection taking an index
+      def select(index, meta = false)
+        selected_item = @items[index]
+        if @selection.include?(selected_item)
+          @selection.delete(selected_item) if meta
+        else
+          @selection = [] if !meta || (!has_style?(:multi) && @selection.to_a.size >= 1)
+          @selection << selected_item
+        end
+        self.selection = @selection
+      end
+
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click',
+            event_handler: -> (event_listener) {
+              -> (event) {                
+                selected_item = event.target.text
+                select(index_of(selected_item), event.meta?)
+                event_listener.call(event)              
+              }
+            }
+          }
+        }
+      end
+      
+      def name
+        'ul'
+      end
+      
+      def dom
+        list_items = @items
+        list_id = id
+        list_style = style
+        list_selection = selection
+        @dom ||= DOM {
+          ul(id: list_id, style: list_style) {
+            list_items.to_a.each_with_index do |item, index|
+              li_class = ''
+              li_class += ' selected-list-item' if list_selection.include?(item)
+              li_class += ' empty-list-item' if item == ITEM_EMPTY
+              li(class: li_class) {
+                item
+              }
+            end
+          }
+        }
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-opal
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - AndyMaleh
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-17 00:00:00.000000000 Z
+date: 2020-06-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -170,6 +170,7 @@ files:
 - lib/glimmer-dsl-opal.rb
 - lib/glimmer/config.rb
 - lib/glimmer/data_binding/element_binding.rb
+- lib/glimmer/data_binding/list_selection_binding.rb
 - lib/glimmer/data_binding/observable_element.rb
 - lib/glimmer/dsl/engine.rb
 - lib/glimmer/dsl/expression.rb
@@ -184,6 +185,8 @@ files:
 - lib/glimmer/dsl/opal/grid_layout_expression.rb
 - lib/glimmer/dsl/opal/label_expression.rb
 - lib/glimmer/dsl/opal/layout_data_expression.rb
+- lib/glimmer/dsl/opal/list_expression.rb
+- lib/glimmer/dsl/opal/list_selection_data_binding_expression.rb
 - lib/glimmer/dsl/opal/property_expression.rb
 - lib/glimmer/dsl/opal/shell_expression.rb
 - lib/glimmer/dsl/opal/text_expression.rb
@@ -201,6 +204,7 @@ files:
 - lib/glimmer/opal/input_proxy.rb
 - lib/glimmer/opal/label_proxy.rb
 - lib/glimmer/opal/layout_data_proxy.rb
+- lib/glimmer/opal/list_proxy.rb
 - lib/glimmer/opal/property_owner.rb
 - lib/glimmer/opal/select_proxy.rb
 - lib/samples/elaborate/contact_manager.rb