glimmer-dsl-opal 0.7.1 → 0.8.0

data/lib/glimmer/swt/property_owner.rb

@@ -2,6 +2,8 @@ module Glimmer
   module SWT
     # 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

data/lib/glimmer/swt/radio_proxy.rb

@@ -4,7 +4,7 @@ module Glimmer
   module SWT
     class RadioProxy < WidgetProxy
       # TODO add a create method that ensures passing :radio style in if not there
-      STYLE=<<~CSS
+      STYLE = <<~CSS
         .radio {
           display: inline;
         }

data/lib/glimmer/swt/shell_proxy.rb

@@ -1,12 +1,34 @@
 require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/layout_proxy'
 require 'glimmer/swt/display_proxy'
 require 'glimmer/swt/point'
 
 module Glimmer
   module SWT
     class ShellProxy < CompositeProxy
+      STYLE = <<~CSS
+        html {
+          width: 100%;
+          height: 100%;
+        }
+        body {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+        }
+        .shell {
+          height: 100%;
+          margin: 0;
+        }
+        .shell iframe {
+          width: 100%;
+          height: 100%;
+        }
+      CSS
+    
       # TODO consider renaming to ShellProxy to match SWT API
       attr_reader :minimum_size
+      attr_accessor :menu_bar # TODO implement menu bar rendering
     
       WIDTH_MIN = 130
       HEIGHT_MIN = 0
@@ -52,208 +74,31 @@ module Glimmer
           .hide {
             display: none !important;
           }
-          .selected, .tabs .tab.selected {
+          .selected {
             background: rgb(80, 116, 211);
             color: white;
           }
         CSS
       end
             
-      def style_dom_shell_css
-        <<~CSS
-          html {
-            width: 100%;
-            height: 100%;
-          }
-          body {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-          }
-          .shell {
-            height: 100%;
-            margin: 0;
-          }
-          .shell iframe {
-            width: 100%;
-            height: 100%;
-          }
-        CSS
-      end
-      
-      def style_dom_list_css
-        <<~CSS
-          ul {
-            list-style: none;
-            padding: 0;
-          }
-          li {
-            cursor: default;
-            padding-left: 10px;
-            padding-right: 10px;
-          }
-          li.empty-list-item {
-            color: transparent;
-          }
-        CSS
-      end
-      
-      def style_dom_tab_css
-        <<~CSS
-          .tabs .tab {
-            background-color: inherit;
-            float: left;
-            border: none;
-            outline: none;
-            cursor: pointer;
-            padding: 14px 16px;
-            transition: 0.3s;
-            font-size: 17px;
-          }
-          .tabs {
-            overflow: hidden;
-            border: 1px solid #ccc;
-            background-color: #f1f1f1;
-          }
-        CSS
-      end
-      
-      def style_dom_tab_item_css
-        <<~CSS
-          /* Create an selected/current tablink class */
-          .tabs .tab.selected {
-            background-color: #ccc;
-          }
-          /* Change background color of buttons on hover */
-          .tabs .tab:hover {
-            background-color: #ddd;
-          }
-          /* Style the tab content */
-          .tab-item {
-            padding: 6px 12px;
-            border: 1px solid #ccc;
-            border-top: none;
-          }
-        CSS
-      end
-
-      def style_dom_modal_css
-        <<~CSS
-          /* 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;
-          }
-            
-          .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;
-          }
-        CSS
-      end
-      
-      def style_dom_table_css
-        <<~CSS
-          table {
-            border-spacing: 0;
-          }
-            
-          table tr th,td {
-            cursor: default;
-          }
-        CSS
-      end
-      
       def dom
         i = 0
         body_id = id
         body_class = ([name] + css_classes.to_a).join(' ')
         @dom ||= html {
           div(id: body_id, class: body_class) {
-            # TODO support the idea of dynamic CSS building on close of shell that adds only as much CSS as needed for widgets that were mentioned
+            # TODO consider supporting the idea of dynamic CSS building on close of shell that adds only as much CSS as needed for widgets that were mentioned
             style(class: 'common-style') {
               style_dom_css
             }
-            style(class: 'shell-style') {
-              style_dom_shell_css
-            }
-            style(class: 'list-style') {
-              style_dom_list_css
-            }
-            style(class: 'tab-style') {
-              style_dom_tab_css
-            }
-#             style(class: 'tab-item-style') {
-#               style_dom_tab_item_css
-#             }
-#             style(class: 'modal-style') {
-#               style_dom_modal_css
-#             }
-            style(class: 'table-style') {
-              style_dom_table_css
-            }
-            style(class: 'fill-layout-style') {
-              Glimmer::SWT::FillLayoutProxy::STYLE
-            }
-            style(class: 'row-layout-style') {
-              Glimmer::SWT::RowLayoutProxy::STYLE
-            }
-            style(class: 'grid-layout-style') {
-              Glimmer::SWT::GridLayoutProxy::STYLE
-            }
-            style(class: 'checkbox-style') {
-              Glimmer::SWT::CheckboxProxy::STYLE
-            }
-            style(class: 'radio-style') {
-              Glimmer::SWT::RadioProxy::STYLE
-            }
-            style(class: 'scrolled-composite-style') {
-              Glimmer::SWT::ScrolledCompositeProxy::STYLE
-            }
-            style(class: 'table-item-style') {
-              Glimmer::SWT::TableItemProxy::STYLE
-            }
-            style(class: 'table-column-style') {
-              Glimmer::SWT::TableColumnProxy::STYLE
-            }
+            [LayoutProxy, WidgetProxy].map(&:descendants).reduce(:+).each do |style_class|
+              if style_class.constants.include?('STYLE')
+                style(class: "#{style_class.name.split(':').last.underscore.gsub('_', '-').sub(/-proxy$/, '')}-style") {
+                  style_class::STYLE
+                }
+              end
+            end
+            ''
           }
         }.to_s
       end

data/lib/glimmer/swt/tab_folder_proxy.rb

@@ -1,8 +1,51 @@
+# Copyright (c) 2020 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/swt/widget_proxy'
 
 module Glimmer
   module SWT
     class TabFolderProxy < WidgetProxy
+      STYLE = <<~CSS
+        .tabs .tab.selected {
+          background: rgb(80, 116, 211);
+          color: white;
+        }
+        .tabs .tab {
+          background-color: inherit;
+          float: left;
+          border: none;
+          outline: none;
+          cursor: pointer;
+          padding: 14px 16px;
+          transition: 0.3s;
+          font-size: 17px;
+        }
+        .tabs {
+          overflow: hidden;
+          border: 1px solid #ccc;
+          background-color: #f1f1f1;
+        }
+      CSS
+      
       attr_reader :tabs
       
       def initialize(parent, args, block)

data/lib/glimmer/swt/table_column_proxy.rb

@@ -4,6 +4,8 @@ require 'glimmer/swt/swt_proxy'
 module Glimmer
   module SWT
     class TableColumnProxy < WidgetProxy
+      include Glimmer
+      
       STYLE = <<~CSS
         th.table-column {
           background: rgb(246, 246, 246);
@@ -15,8 +17,7 @@ module Glimmer
           float: right;
         }
       CSS
-      include Glimmer
-      
+            
       attr_accessor :sort_block, :sort_by_block
       attr_reader :text, :width,
                   :no_sort, :sort_property, :editor
@@ -75,7 +76,7 @@ module Glimmer
       end
       
       # Sets editor (e.g. combo)
-      def editor=(args)
+      def editor=(*args)
         @editor = args
       end
       

data/lib/glimmer/swt/table_editor.rb

@@ -34,10 +34,10 @@ module Glimmer
         @editor_widget = editor_widget
         @old_value = table_item.cell_dom_element(table_column_index).html
         table_item.cell_dom_element(table_column_index).html('')
-        editor_widget.render(table_item.cell_dom_element(table_column_index))
+        editor_widget.render(custom_parent_dom_element: table_item.cell_dom_element(table_column_index))
         # TODO tweak the width perfectly so it doesn't expand the table cell
 #         editor_widget.dom_element.css('width', 'calc(100% - 20px)')
-        editor_widget.dom_element.css('width', '90%') # just a good enough approximation
+        editor_widget.dom_element.css('width', "#{minimumWidth}%") # TODO implement property with pixels (and perhaps derive percentage separately from pixels)
         editor_widget.dom_element.css('height', "#{minimumHeight}px")
         editor_widget.dom_element.add_class('table-editor')
         # TODO consider relying on autofocus instead

data/lib/glimmer/swt/table_item_proxy.rb

@@ -39,7 +39,7 @@ module Glimmer
         super(parent, args, block)
         # TODO check if there is a need to remove this observer when removing widget from table upon items update
         on_widget_selected { |event|
-          parent.select(parent.index_of(self), event.meta?)
+          parent.select(parent.index_of(self), (event.meta? if event.respond_to?(:meta?)))
         }
       end
       
@@ -139,10 +139,20 @@ module Glimmer
         redraw
       end
       
-      def on_widget_selected(&block)
-        event = 'click'
-        delegate = $document.on(event, selector, &block)
-        EventListenerProxy.new(element_proxy: self, event: event, selector: selector, delegate: delegate)
+      def redraw_selection
+        if parent.selection.include?(self)
+          dom_element.add_class('selected')
+        else
+          dom_element.remove_class('selected')
+        end
+      end
+      
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'mouseup',
+          }
+        }
       end
       
       def max_column_width(column_index)

data/lib/glimmer/swt/table_proxy.rb

@@ -27,6 +27,16 @@ require 'glimmer/swt/table_editor'
 module Glimmer
   module SWT
     class TableProxy < CompositeProxy
+      STYLE = <<~CSS
+        table {
+          border-spacing: 0;
+        }
+          
+        table tr th,td {
+          cursor: default;
+        }
+      CSS
+
       attr_reader :columns, :selection,
                   :sort_type, :sort_column, :sort_property, :sort_block, :sort_by_block, :additional_sort_properties,
                   :editor, :table_editor
@@ -43,6 +53,7 @@ module Glimmer
             text: {
               widget_value_property: :text,
               editor_gui: lambda do |args, model, property, table_proxy|
+                table_proxy.table_editor.minimumWidth = 90
                 table_proxy.table_editor.minimumHeight = 10
                 table_editor_widget_proxy = text(*args) {
                   text model.send(property)
@@ -66,6 +77,7 @@ module Glimmer
               widget_value_property: :text,
               editor_gui: lambda do |args, model, property, table_proxy|
                 first_time = true
+                table_proxy.table_editor.minimumWidth = 90
                 table_proxy.table_editor.minimumHeight = 18
                 table_editor_widget_proxy = combo(*args) {
                   items model.send("#{property}_options")
@@ -118,11 +130,12 @@ module Glimmer
               widget_value_property: :date_time,
               editor_gui: lambda do |args, model, property, table_proxy|
                 first_time = true
-                table_proxy.table_editor.minimumHeight = 25
+                table_proxy.table_editor.minimumWidth = 90
+                table_proxy.table_editor.minimumHeight = 15
                 date(*args) {
                   date_time model.send(property)
                   focus true
-                  on_focus_lost {
+                  on_widget_selected {
                     table_proxy.finish_edit!
                   }
                   on_key_pressed { |key_event|
@@ -139,11 +152,12 @@ module Glimmer
               widget_value_property: :date_time,
               editor_gui: lambda do |args, model, property, table_proxy|
                 first_time = true
-                table_proxy.table_editor.minimumHeight = 25
+                table_proxy.table_editor.minimumWidth = 80
+                table_proxy.table_editor.minimumHeight = 15
                 date_drop_down(*args) {
                   date_time model.send(property)
                   focus true
-                  on_focus_lost {
+                  on_widget_selected {
                     table_proxy.finish_edit!
                   }
                   on_key_pressed { |key_event|
@@ -160,10 +174,14 @@ module Glimmer
               widget_value_property: :date_time,
               editor_gui: lambda do |args, model, property, table_proxy|
                 first_time = true
-                table_proxy.table_editor.minimumHeight = 25
+                table_proxy.table_editor.minimumWidth = 80
+                table_proxy.table_editor.minimumHeight = 15
                 time(*args) {
                   date_time model.send(property)
                   focus true
+                  on_widget_selected {
+                    table_proxy.finish_edit!
+                  }
                   on_focus_lost {
                     table_proxy.finish_edit!
                   }
@@ -236,6 +254,7 @@ module Glimmer
         @table_editor = TableEditor.new(self)
         @table_editor.horizontalAlignment = SWTProxy[:left]
         @table_editor.grabHorizontal = true
+        @table_editor.minimumWidth = 90
         @table_editor.minimumHeight = 20
         if editable?
           on_mouse_up { |event|
@@ -300,11 +319,12 @@ module Glimmer
         new_selection = new_selection.to_a
         changed = (selection + new_selection) - (selection & new_selection)
         @selection = new_selection
-        changed.each(&:redraw)
+        changed.each(&:redraw_selection)
       end
             
       def items=(new_items)
         @children = new_items
+        # TODO optimize in the future by sorting elements in DOM directly when no change to elements occur other than sort
         redraw
       end
       
@@ -346,7 +366,7 @@ module Glimmer
       end
       
       def sort_property=(new_sort_property)
-        @sort_property = [new_sort_property].flatten.compact
+        @sort_property = new_sort_property.to_collection
       end
       
       def detect_sort_type
@@ -367,7 +387,7 @@ module Glimmer
       
       def column_sort_properties
         column_properties.zip(columns.map(&:sort_property)).map do |pair|
-          [pair.compact.last].flatten.compact
+          pair.compact.last.to_collection
         end
       end
       
@@ -398,7 +418,7 @@ module Glimmer
           end
         end
         
-        new_sort_property = [new_sort_property].flatten.compact unless new_sort_property.is_a?(Array)
+        new_sort_property = new_sort_property.to_collection unless new_sort_property.is_a?(Array)
         @sort_direction = @sort_direction.nil? || @sort_property.first != new_sort_property.first || @sort_direction == :descending ? :ascending : :descending
         
         @sort_property = new_sort_property
@@ -504,7 +524,7 @@ module Glimmer
         @edit_mode = true
         
         editor_config = columns[column_index].editor || editor
-        editor_config = [editor_config].flatten.compact
+        editor_config = editor_config.to_collection
         editor_widget_options = editor_config.last.is_a?(Hash) ? editor_config.last : {}
         editor_widget_arg_last_index = editor_config.last.is_a?(Hash) ? -2 : -1
         editor_widget = (editor_config[0] || :text).to_sym
@@ -604,7 +624,8 @@ module Glimmer
             event.singleton_class.send(:define_method, :column_index) do
               (table_data || event.target).attr('data-column-index')
             end
-            event_listener.call(event)
+            
+            event_listener.call(event) unless event.table_item.nil? && event.column_index.nil?
           }
         }
 
@@ -619,7 +640,8 @@ module Glimmer
           },
           'on_widget_selected' => {
             event: 'mouseup',
-          }
+            event_handler: mouse_handler,
+          },
         }
       end