glimmer-dsl-opal 0.0.4 → 0.0.9

data/VERSION

@@ -1 +1 @@
-0.0.4
+0.0.9

data/lib/glimmer-dsl-opal.rb

@@ -1,5 +1,7 @@
 require 'opal'
-require 'opal-parser'
+require 'opal-async'
+require 'browser'
+require 'browser/effects'
 require 'glimmer'
 
 GLIMMER_DSL_OPAL_ROOT = File.expand_path('../..', __FILE__)
@@ -7,4 +9,5 @@ GLIMMER_DSL_OPAL_LIB = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib')
 
 $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_LIB)
 
-require 'glimmer/dsl/opal/dsl' 
+require 'glimmer/dsl/opal/dsl'
+require 'glimmer/data_binding/ext/observable_model'

data/lib/glimmer/data_binding/ext/observable_model.rb

@@ -0,0 +1,40 @@
+require 'glimmer/data_binding/observable'
+require 'glimmer/data_binding/observer'
+require 'glimmer/opal/display_proxy'
+
+# This ensures all data-binding events happen async and block on modal display
+
+module Glimmer
+  module DataBinding
+    # TODO prefix utility methods with double-underscore
+    module ObservableModel
+      include Observable
+#       include Glimmer
+
+      def add_property_writer_observers(property_name)
+        property_writer_name = "#{property_name}="
+        method(property_writer_name)
+        ensure_array_object_observer(property_name, send(property_name))
+        begin
+          method("__original_#{property_writer_name}")
+        rescue
+          old_method = self.class.instance_method(property_writer_name)
+          define_singleton_method("__original_#{property_writer_name}", old_method)
+          define_singleton_method(property_writer_name) do |value|
+            old_value = self.send(property_name)
+            unregister_dependent_observers(property_name, old_value)
+            self.send("__original_#{property_writer_name}", value)
+            Glimmer::Opal::DisplayProxy.instance.async_exec do
+              notify_observers(property_name)
+              ensure_array_object_observer(property_name, value, old_value)
+            end
+          end
+        end
+      rescue => e
+        # ignore writing if no property writer exists
+        Glimmer::Config.logger&.debug "No need to observe property writer: #{property_writer_name}\n#{e.message}\n#{e.backtrace.join("\n")}"
+      end
+      
+    end
+  end
+end

data/lib/glimmer/data_binding/table_items_binding.rb

@@ -0,0 +1,70 @@
+require 'glimmer/data_binding/observable_array'
+require 'glimmer/data_binding/observable_model'
+require 'glimmer/data_binding/observable'
+require 'glimmer/data_binding/observer'
+require 'glimmer/opal/table_proxy'
+require 'glimmer/opal/table_item'
+
+module Glimmer
+  module DataBinding
+    class TableItemsBinding
+      include DataBinding::Observable
+      include DataBinding::Observer
+
+      def initialize(parent, model_binding, column_properties)
+        @last_model_collection = nil
+        @table = parent
+        @model_binding = model_binding
+        @column_properties = column_properties
+        if @table.respond_to?(:column_properties=)
+          @table.column_properties = @column_properties
+        ##else # assume custom widget
+        ##  @table.body_root.column_properties = @column_properties
+        end
+        call(@model_binding.evaluate_property)
+        model = model_binding.base_model
+        observe(model, model_binding.property_name_expression)
+        ##@table.on_widget_disposed do |dispose_event| # doesn't seem needed within Opal
+        ##  unregister_all_observables
+        ##end
+      end
+
+      def call(new_model_collection=nil)
+        if new_model_collection and new_model_collection.is_a?(Array)
+          observe(new_model_collection, @column_properties)
+          @model_collection = new_model_collection
+        end
+        populate_table(@model_collection, @table, @column_properties)
+        sort_table(@model_collection, @table, @column_properties)
+      end
+      
+      def populate_table(model_collection, parent, column_properties)
+        return if model_collection&.sort_by(&:hash) == @last_model_collection&.sort_by(&:hash)
+        @last_model_collection = model_collection
+        # TODO improve performance
+        selected_table_item_models = parent.selection.map(&:get_data)
+        old_items = parent.items
+        old_item_ids_per_model = old_items.reduce({}) {|hash, item| hash.merge(item.get_data.hash => item.id) }
+        parent.remove_all
+        model_collection.each do |model|
+          table_item = Glimmer::Opal::TableItem.new(parent)
+          for index in 0..(column_properties.size-1)
+            table_item.set_text(index, model.send(column_properties[index]).to_s)
+          end
+          table_item.set_data(model)
+          table_item.id = old_item_ids_per_model[model.hash] if old_item_ids_per_model[model.hash]
+        end
+        selected_table_items = parent.search {|item| selected_table_item_models.include?(item.get_data) }
+        selected_table_items = [parent.items.first] if selected_table_items.empty? && !parent.items.empty?
+        parent.selection = selected_table_items unless selected_table_items.empty?
+        parent.redraw
+      end
+      
+      def sort_table(model_collection, parent, column_properties)
+        return if model_collection == @last_model_collection
+        parent.items = parent.items.sort_by { |item| model_collection.index(item.get_data) }
+        @last_model_collection = model_collection
+      end      
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/opal/display_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      class AsyncExecExpression < StaticExpression
+        include TopLevelExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Opal::DisplayProxy.instance.async_exec(&block)
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,22 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      # Responsible for providing a readable keyword (command symbol) to capture
+      # and return column properties for use in TreeItemsDataBindingCommandHandler
+      class ColumnPropertiesExpression < StaticExpression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'column_properties' and
+            block.nil? and
+            parent.is_a?(Glimmer::Opal::TableProxy)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          args
+        end
+      end
+    end
+  end
+end

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

@@ -16,8 +16,18 @@ 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/browser_expression'
+require 'glimmer/dsl/opal/tab_folder_expression'
+require 'glimmer/dsl/opal/tab_item_expression'
+require 'glimmer/dsl/opal/message_box_expression'
+require 'glimmer/dsl/opal/async_exec_expression'
+require 'glimmer/dsl/opal/observe_expression'
 require 'glimmer/dsl/opal/layout_data_expression'
 require 'glimmer/dsl/opal/list_selection_data_binding_expression'
+require 'glimmer/dsl/opal/table_expression'
+require 'glimmer/dsl/opal/table_column_expression'
+require 'glimmer/dsl/opal/table_items_data_binding_expression'
+require 'glimmer/dsl/opal/column_properties_expression'
 
 module Glimmer
   module DSL
@@ -26,6 +36,7 @@ module Glimmer
        Opal,
        %w[
          widget_listener
+         table_items_data_binding
          combo_selection_data_binding
          list_selection_data_binding
          data_binding

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

@@ -0,0 +1,20 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/dsl/parent_expression'
+require 'glimmer/opal/modal'
+
+module Glimmer
+  module DSL
+    module Opal
+      class MessageBoxExpression < StaticExpression
+        include TopLevelExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          parent = args.delete_at(0)
+          Glimmer::Opal::Modal.new(parent, args)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/data_binding/observer'
+require 'glimmer/data_binding/model_binding'
+
+module Glimmer
+  module DSL
+    module Opal
+      class ObserveExpression < StaticExpression
+        include TopLevelExpression
+
+        REGEX_NESTED_OR_INDEXED_PROPERTY = /([^\[]+)(\[[^\]]+\])?/
+  
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'observe' and
+            block_given? and
+            (args.size == 2) and
+            textual?(args[1])
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          observer = DataBinding::Observer.proc(&block)
+          if args[1].to_s.match(REGEX_NESTED_OR_INDEXED_PROPERTY)
+            observer.observe(DataBinding::ModelBinding.new(args[0], args[1]))
+          else
+            observer.observe(args[0], args[1])
+          end
+        end
+      end
+    end
+  end
+end

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+require 'glimmer/dsl/expression'
+require 'glimmer/data_binding/model_binding'
+require 'glimmer/data_binding/table_items_binding'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      #Depends on BindCommandHandler and TableColumnPropertiesDataBindingCommandHandler
+      class TableItemsDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == "items" and
+            block.nil? and
+            parent.is_a?(Glimmer::Opal::TableProxy) and
+            args.size == 2 and
+            args[0].is_a?(DataBinding::ModelBinding) and
+            args[0].evaluate_property.is_a?(Array) and
+            args[1].is_a?(Array)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          model_binding = args[0]
+          column_properties = args[1]
+          DataBinding::TableItemsBinding.new(parent, model_binding, column_properties)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/opal/display_proxy.rb

@@ -0,0 +1,23 @@
+module Glimmer
+  module Opal
+    class DisplayProxy
+      class << self
+        def instance
+          @instance ||= new
+        end
+      end
+      
+      def async_exec(&block)
+        executer = lambda do
+          if $document.at_css('.modal')
+            sleep(0.05)
+            Async::Task.new(&executer)
+          else
+            block.call
+          end
+        end
+        Async::Task.new(&executer)
+      end
+    end
+  end
+end

data/lib/glimmer/opal/div_proxy.rb

@@ -3,14 +3,23 @@ require 'glimmer/opal/element_proxy'
 module Glimmer
   module Opal
     class DivProxy < ElementProxy
+      attr_reader :layout
+      
       def initialize(parent, args)
         super(parent, args)
-        GridLayoutProxy.new(self, [])
+        @layout = GridLayoutProxy.new(self, [])
+      end
+      
+      def redraw
+        super()
+        @children.each do |child|
+          add_child(child) # TODO think of impact of this on performance, and of other alternatives
+        end
       end
       
       def dom
         div_id = id
-        div_style = style
+        div_style = css
         @dom ||= DOM {
           div(id: div_id, class: 'grid-layout', style: div_style)
         }

data/lib/glimmer/opal/document_proxy.rb

@@ -1,9 +1,11 @@
 require 'glimmer/opal/element_proxy'
+require 'glimmer/opal/point'
 
 module Glimmer
   module Opal
     class DocumentProxy < ElementProxy
       # TODO consider renaming to ShellProxy to match SWT API
+      attr_reader :minimum_size
     
       def initialize(args)
         @args = args
@@ -23,6 +25,11 @@ module Glimmer
           $document.title = value
         end
       end
+      
+      def minimum_size=(width_or_minimum_size, height = nil)
+        @minimum_size = height.nil? ? width_or_minimum_size : Point.new(width_or_minimum_size, height)
+        redraw
+      end
 
       def head_dom
         # TODO make grid-layout support grab excess space false
@@ -30,6 +37,19 @@ module Glimmer
           head {
             <<~CSS
             <style>
+              html {
+                width: 100%;
+                height: 100%;
+              }
+              body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+              }
+              body > iframe {
+                width: 100%;
+                height: 100%;
+              }
               ul {
                 list-style: none;
                 padding: 0;
@@ -39,13 +59,110 @@ module Glimmer
                 padding-left: 10px;
                 padding-right: 10px;
               }
-              li.selected-list-item {
+              li.empty-list-item {
+                color: transparent;
+              }
+              .tabs {
+                overflow: hidden;
+                border: 1px solid #ccc;
+                background-color: #f1f1f1;
+              }
+              
+              /* Style the buttons inside the tab */
+              .tabs .tab {
+                background-color: inherit;
+                float: left;
+                border: none;
+                outline: none;
+                cursor: pointer;
+                padding: 14px 16px;
+                transition: 0.3s;
+                font-size: 17px;
+              }
+              
+              /* Change background color of buttons on hover */
+              .tabs .tab:hover {
+                background-color: #ddd;
+              }
+              
+              /* Create an active/current tablink class */
+              .tabs .tab.active {
+                background-color: #ccc;
+              }
+              
+              /* Style the tab content */
+              .tab-item {
+                padding: 6px 12px;
+                border: 1px solid #ccc;
+                border-top: none;
+              }
+              
+              .hide {
+                display: none !important;
+              }
+                            
+              /* The Modal (background) */
+              .modal {
+                position: fixed; /* Stay in place */
+                z-index: 1; /* Sit on top */
+                padding-top: 100px; /* Location of the box */
+                left: 0;
+                top: 0;
+                width: 100%; /* Full width */
+                height: 100%; /* Full height */
+                overflow: auto; /* Enable scroll if needed */
+                background-color: rgb(0,0,0); /* Fallback color */
+                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+                text-align: center;
+              }
+              
+              /* Modal Content */
+              .modal-content {
+                background-color: #fefefe;
+                margin: auto;
+                border: 1px solid #888;
+                display: inline-block;
+                min-width: 200px;
+              }
+              
+              .modal-content .text {
                 background: rgb(80, 116, 211);
                 color: white;
+                padding: 5px;
               }
-              li.empty-list-item {
-                color: transparent;
+              
+              .modal-content .message {
+                padding: 20px;
               }
+              
+              /* The Close Button */
+              .close {
+                color: #aaaaaa;
+                float: right;
+                font-weight: bold;
+                margin: 5px;
+              }
+              
+              .close:hover,
+              .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+              }
+              
+              .selected {
+                background: rgb(80, 116, 211);
+                color: white;
+              }
+              
+              table {
+                border-spacing: 0;
+              }
+              
+              table tr th,td {
+                cursor: default;
+              }
+
             </style>
             CSS
           }
@@ -53,8 +170,11 @@ module Glimmer
       end
 
       def dom
+        i = 0
+        body_style = ''
+        body_style += "min-width: #{@minimum_size.x}px; min-height: #{@minimum_size.y}px;" if @minimum_size
         @dom ||= DOM {
-          body {
+          body(style: body_style) {
           }
         }
       end