glimmer-dsl-opal 0.7.5 → 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

data/lib/glimmer/swt/table_editor.rb

@@ -34,7 +34,7 @@ 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', "#{minimumWidth}%") # TODO implement property with pixels (and perhaps derive percentage separately from pixels)

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
       
@@ -147,10 +147,12 @@ module Glimmer
         end
       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 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

data/lib/glimmer/swt/widget_proxy.rb

@@ -23,16 +23,20 @@ require 'glimmer/swt/event_listener_proxy'
 require 'glimmer/swt/property_owner'
 require 'glimmer/swt/swt_proxy'
 
+# TODO implement menu (which delays building it till render using add_content_on_render)
+
 module Glimmer
   module SWT
     class WidgetProxy
       include Glimmer
       include PropertyOwner
       
-      attr_reader :parent, :args, :path, :children, :enabled, :foreground, :background, :font, :focus, :disposed?, :rendered
+      attr_reader :parent, :args, :path, :children, :enabled, :foreground, :background, :font, :focus, :disposed?, :rendered, :menu_requested
+      attr_accessor :menu
       alias isDisposed disposed?
       alias is_disposed disposed?
       alias rendered? rendered
+      alias menu_requested? menu_requested
       
       class << self
         # Factory Method that translates a Glimmer DSL keyword into a WidgetProxy object
@@ -76,7 +80,7 @@ module Glimmer
       end
       
       DEFAULT_INITIALIZERS = {
-        "composite" => lambda do |composite_proxy|
+        composite: lambda do |composite_proxy|
           if composite_proxy.layout.nil?
             layout = GridLayoutProxy.new(composite_proxy, [])
             composite_proxy.layout = layout
@@ -84,18 +88,18 @@ module Glimmer
             layout.margin_height = 15
           end
         end,
-#         "scrolled_composite" => lambda do |scrolled_composite|
+#         scrolled_composite: lambda do |scrolled_composite|
 #           scrolled_composite.expand_horizontal = true
 #           scrolled_composite.expand_vertical = true
 #         end,
-#         "table" => lambda do |table|
+#         table: lambda do |table|
 #           table.setHeaderVisible(true)
 #           table.setLinesVisible(true)
 #         end,
-        "table_column" => lambda do |table_column_proxy|
+        table_column: lambda do |table_column_proxy|
           table_column_proxy.width = 80
         end,
-#         "group" => lambda do |group_proxy|
+#         group: lambda do |group_proxy|
 #           group_proxy.layout = GridLayoutProxy.new(group_proxy, []) if group.layout.nil?
 #         end,
       }
@@ -107,7 +111,7 @@ module Glimmer
         @children = Set.new # TODO consider moving to composite
         @enabled = true
         @data = {}
-        DEFAULT_INITIALIZERS[self.class.underscored_widget_name(self)]&.call(self)
+        DEFAULT_INITIALIZERS[self.class.underscored_widget_name(self).to_s.to_sym]&.call(self)
         @parent.post_initialize_child(self) # TODO rename to post_initialize_child to be closer to glimmer-dsl-swt terminology
       end
       
@@ -124,7 +128,19 @@ module Glimmer
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
       def post_add_content
-        # No Op by default
+        if !menu.nil? && !is_a?(MenuProxy) && !is_a?(MenuItemProxy)
+          on_mouse_down { |mouse_event|
+            if mouse_event.button == 3 # right-click
+              @menu_requested = true
+              dom_element.css('position', 'relative')
+              menu&.render
+              menu.dom_element.css('position', 'absolute')
+              menu.dom_element.css('left', mouse_event.x - parent.layout&.margin_width.to_i) # TODO - parent.layout&.margin_left.to_i)
+              menu.dom_element.css('top', mouse_event.y - parent.layout&.margin_height.to_i - 5) # TODO - parent.layout&.margin_top.to_i)
+              @menu_requested = false
+            end
+          }
+        end
       end
       
       def set_data(key=nil, value)
@@ -148,6 +164,7 @@ module Glimmer
         Document.find(path).remove
         parent&.post_dispose_child(self)
         # TODO fire on_widget_disposed listener
+#         children.each(:dispose) # TODO enable this safely
         @disposed = true
       end
       
@@ -160,6 +177,7 @@ module Glimmer
               event_element_css_selector = mapping[:event_element_css_selector]
               the_listener_dom_element = event_element_css_selector ? Element[event_element_css_selector] : listener_dom_element
               the_listener_dom_element.off(event)
+              # TODO improve to precisely remove the listeners that were added, no more no less. (or use the event_listener_proxies method instead or in collaboration)
             end
           end
         end
@@ -215,27 +233,26 @@ module Glimmer
         Document.find(parent_path)
       end
       
-      def render(custom_parent_dom_element = nil)
+      def render(custom_parent_dom_element: nil, brand_new: false)
         the_parent_dom_element = custom_parent_dom_element || parent_dom_element
         old_element = dom_element
-        brand_new = @dom.nil? || old_element.empty?
-        build_dom(!custom_parent_dom_element) # TODO handle custom parent layout by passing parent instead of parent dom element
+        brand_new = @dom.nil? || old_element.empty? || brand_new
+        build_dom(layout: !custom_parent_dom_element) # TODO handle custom parent layout by passing parent instead of parent dom element
         if brand_new
           the_parent_dom_element.append(@dom)
         else
           old_element.replace_with(@dom)
         end
-        observation_requests&.clone&.each do |keyword, event_listener_set|
+        observation_requests&.each do |keyword, event_listener_set|
           event_listener_set.each do |event_listener|
-            observation_requests[keyword].delete(event_listener) # TODO look into the implications of this and if it's needed.
-            handle_observation_request(keyword, &event_listener)
+            handle_observation_request(keyword, event_listener)
           end
         end
         children.each do |child|
           child.render
         end
         @rendered = true
-        content_on_render_blocks.each { |content_block| content(&content_block) }
+        content_on_render_blocks.each { |content_block| content(&content_block) } unless skip_content_on_render_blocks?
       end
       alias redraw render
       
@@ -243,6 +260,10 @@ module Glimmer
         @content_on_render_blocks ||= []
       end
       
+      def skip_content_on_render_blocks?
+        false
+      end
+      
       def add_content_on_render(&content_block)
         if rendered?
           content_block.call
@@ -251,7 +272,7 @@ module Glimmer
         end
       end
       
-      def build_dom(layout=true)
+      def build_dom(layout: true)
         # TODO consider passing parent element instead and having table item include a table cell widget only for opal
         @dom = nil
         @dom = dom
@@ -273,6 +294,60 @@ module Glimmer
       end
       
       def default_observation_request_to_event_mapping
+        mouse_event_handler = -> (event_listener) {
+          -> (event) {
+            # TODO generalize this solution to all widgets that support key presses
+            # TODO support event.location once DOM3 is supported by opal-jquery
+            event.define_singleton_method(:button, &event.method(:which))
+            event.define_singleton_method(:count) {1} # TODO support double-click count of 2 in the future by using ondblclick
+            event.define_singleton_method(:x, &event.method(:page_x))
+            event.define_singleton_method(:y, &event.method(:page_y))
+            doit = true
+            event.define_singleton_method(:doit=) do |value|
+              doit = value
+            end
+            event.define_singleton_method(:doit) { doit }
+            
+            if event.which == 1
+#               event.prevent # TODO consider if this is needed
+              event_listener.call(event)
+            end
+            
+            # TODO Imlement doit properly for all different kinds of events
+#             unless doit
+#               event.prevent
+#               event.stop
+#               event.stop_immediate
+#             end
+          }
+        }
+        context_menu_handler = -> (event_listener) {
+          -> (event) {
+            # TODO generalize this solution to all widgets that support key presses
+            # TODO support event.location once DOM3 is supported by opal-jquery
+            event.define_singleton_method(:button, &event.method(:which))
+            event.define_singleton_method(:count) {1} # TODO support double-click count of 2 in the future by using ondblclick
+            event.define_singleton_method(:x, &event.method(:page_x))
+            event.define_singleton_method(:y, &event.method(:page_y))
+            doit = true
+            event.define_singleton_method(:doit=) do |value|
+              doit = value
+            end
+            event.define_singleton_method(:doit) { doit }
+            
+            if event.which == 3
+              event.prevent
+              event_listener.call(event)
+            end
+            
+            # TODO Imlement doit properly for all different kinds of events
+#             unless doit
+#               event.prevent
+#               event.stop
+#               event.stop_immediate
+#             end
+          }
+        }
         {
           'on_focus_gained' => {
             event: 'focus',
@@ -280,6 +355,191 @@ module Glimmer
           'on_focus_lost' => {
             event: 'blur',
           },
+          'on_mouse_up' => [
+            {
+              event: 'mouseup',
+              event_handler: mouse_event_handler,
+            },
+            {
+              event: 'contextmenu',
+              event_handler: context_menu_handler,
+            },
+          ],
+          'on_mouse_down' => [
+            {
+              event: 'mousedown',
+              event_handler: mouse_event_handler,
+            },
+            {
+              event: 'contextmenu',
+              event_handler: context_menu_handler,
+            },
+          ],
+          'on_swt_mouseup' => [
+            {
+              event: 'mouseup',
+              event_handler: mouse_event_handler,
+            },
+            {
+              event: 'contextmenu',
+              event_handler: context_menu_handler,
+            },
+          ],
+          'on_swt_mousedown' => [
+            {
+              event: 'mousedown',
+              event_handler: mouse_event_handler,
+            },
+            {
+              event: 'contextmenu',
+              event_handler: context_menu_handler,
+            },
+          ],
+          'on_key_pressed' => {
+            event: 'keypress',
+            event_handler: -> (event_listener) {
+              -> (event) {
+                # TODO generalize this solution to all widgets that support key presses
+                # TODO support event.location once DOM3 is supported by opal-jquery
+                event.define_singleton_method(:keyCode) {event.which}
+                event.define_singleton_method(:key_code, &event.method(:keyCode))
+                event.define_singleton_method(:character) {event.which.chr}
+                event.define_singleton_method(:stateMask) do
+                  state_mask = 0
+                  state_mask |= SWTProxy[:alt] if event.alt_key
+                  state_mask |= SWTProxy[:ctrl] if event.ctrl_key
+                  state_mask |= SWTProxy[:shift] if event.shift_key
+                  state_mask |= SWTProxy[:command] if event.meta_key
+                  state_mask
+                end
+                event.define_singleton_method(:state_mask, &event.method(:stateMask))
+                doit = true
+                event.define_singleton_method(:doit=) do |value|
+                  doit = value
+                end
+                event.define_singleton_method(:doit) { doit }
+                event_listener.call(event)
+                
+                  # TODO Fix doit false, it's not stopping input
+                unless doit
+                  event.prevent
+                  event.prevent_default
+                  event.stop_propagation
+                  event.stop_immediate_propagation
+                end
+                
+                doit
+              }
+            }          },
+          'on_key_released' => {
+            event: 'keydown',
+            event_handler: -> (event_listener) {
+              -> (event) {
+                # TODO generalize this solution to all widgets that support key presses
+                # TODO support event.location once DOM3 is supported by opal-jquery
+                event.define_singleton_method(:keyCode) {event.which}
+                event.define_singleton_method(:key_code, &event.method(:keyCode))
+                event.define_singleton_method(:character) {event.which.chr}
+                event.define_singleton_method(:stateMask) do
+                  state_mask = 0
+                  state_mask |= SWTProxy[:alt] if event.alt_key
+                  state_mask |= SWTProxy[:ctrl] if event.ctrl_key
+                  state_mask |= SWTProxy[:shift] if event.shift_key
+                  state_mask |= SWTProxy[:command] if event.meta_key
+                  state_mask
+                end
+                event.define_singleton_method(:state_mask, &event.method(:stateMask))
+                doit = true
+                event.define_singleton_method(:doit=) do |value|
+                  doit = value
+                end
+                event.define_singleton_method(:doit) { doit }
+                event_listener.call(event)
+                
+                  # TODO Fix doit false, it's not stopping input
+                unless doit
+                  event.prevent
+                  event.prevent_default
+                  event.stop_propagation
+                  event.stop_immediate_propagation
+                end
+                
+                doit
+              }
+            }          },
+          'on_swt_keydown' => {
+            event: 'keypress',
+            event_handler: -> (event_listener) {
+              -> (event) {
+                # TODO generalize this solution to all widgets that support key presses
+                # TODO support event.location once DOM3 is supported by opal-jquery
+                event.define_singleton_method(:keyCode) {event.which}
+                event.define_singleton_method(:key_code, &event.method(:keyCode))
+                event.define_singleton_method(:character) {event.which.chr}
+                event.define_singleton_method(:stateMask) do
+                  state_mask = 0
+                  state_mask |= SWTProxy[:alt] if event.alt_key
+                  state_mask |= SWTProxy[:ctrl] if event.ctrl_key
+                  state_mask |= SWTProxy[:shift] if event.shift_key
+                  state_mask |= SWTProxy[:command] if event.meta_key
+                  state_mask
+                end
+                event.define_singleton_method(:state_mask, &event.method(:stateMask))
+                doit = true
+                event.define_singleton_method(:doit=) do |value|
+                  doit = value
+                end
+                event.define_singleton_method(:doit) { doit }
+                event_listener.call(event)
+                
+                  # TODO Fix doit false, it's not stopping input
+                unless doit
+                  event.prevent
+                  event.prevent_default
+                  event.stop_propagation
+                  event.stop_immediate_propagation
+                end
+                
+                doit
+              }
+            }          },
+          'on_swt_keyup' => {
+            event: 'keydown',
+            event_handler: -> (event_listener) {
+              -> (event) {
+                # TODO generalize this solution to all widgets that support key presses
+                # TODO support event.location once DOM3 is supported by opal-jquery
+                event.define_singleton_method(:keyCode) {event.which}
+                event.define_singleton_method(:key_code, &event.method(:keyCode))
+                event.define_singleton_method(:character) {event.which.chr}
+                event.define_singleton_method(:stateMask) do
+                  state_mask = 0
+                  state_mask |= SWTProxy[:alt] if event.alt_key
+                  state_mask |= SWTProxy[:ctrl] if event.ctrl_key
+                  state_mask |= SWTProxy[:shift] if event.shift_key
+                  state_mask |= SWTProxy[:command] if event.meta_key
+                  state_mask
+                end
+                event.define_singleton_method(:state_mask, &event.method(:stateMask))
+                doit = true
+                event.define_singleton_method(:doit=) do |value|
+                  doit = value
+                end
+                event.define_singleton_method(:doit) { doit }
+                event_listener.call(event)
+                
+                  # TODO Fix doit false, it's not stopping input
+                unless doit
+                  event.prevent
+                  event.prevent_default
+                  event.stop_propagation
+                  event.stop_immediate_propagation
+                end
+                
+                doit
+              }
+            }
+          },
         }
       end
       
@@ -354,6 +614,14 @@ module Glimmer
         Document.find(listener_path)
       end
       
+      def observation_requests
+        @observation_requests ||= {}
+      end
+      
+      def event_listener_proxies
+        @event_listener_proxies ||= []
+      end
+      
       def can_handle_observation_request?(observation_request)
         # TODO sort this out for Opal
         observation_request = observation_request.to_s
@@ -367,32 +635,40 @@ module Glimmer
         end
       end
       
-      def observation_requests
-        @observation_requests ||= {}
-      end
-      
-      def handle_observation_request(keyword, &event_listener)
+      def handle_observation_request(keyword, original_event_listener)
         return unless effective_observation_request_to_event_mapping.keys.include?(keyword)
         event = nil
         delegate = nil
         effective_observation_request_to_event_mapping[keyword].to_collection.each do |mapping|
           observation_requests[keyword] ||= Set.new
-          observation_requests[keyword] << event_listener
+          observation_requests[keyword] << original_event_listener
           event = mapping[:event]
           event_handler = mapping[:event_handler]
           event_element_css_selector = mapping[:event_element_css_selector]
-          potential_event_listener = event_handler&.call(event_listener)
-          event_listener = potential_event_listener || event_listener
+          potential_event_listener = event_handler&.call(original_event_listener)
+          event_listener = potential_event_listener || original_event_listener
           async_event_listener = lambda do |event|
-            Async::Task.new do
+            # TODO look into the issue with using async::task.new here. maybe put it in event listener (like not being able to call preventDefault or return false successfully )
+            # maybe consider pushing inside the widget classes instead where needed only or implement universal doit support correctly to bypass this issue
+#             Async::Task.new do
               event_listener.call(event)
-            end
+#             end
           end
           the_listener_dom_element = event_element_css_selector ? Element[event_element_css_selector] : listener_dom_element
-          delegate = the_listener_dom_element.on(event, &async_event_listener)
+          unless the_listener_dom_element.empty?
+            the_listener_dom_element.on(event, &async_event_listener)
+            # TODO ensure uniqueness of insertion (perhaps adding equals/hash method to event listener proxy)
+            
+            event_listener_proxies << EventListenerProxy.new(element_proxy: self, selector: selector, dom_element: the_listener_dom_element, event: event, listener: async_event_listener, original_event_listener: original_event_listener)
+          end
         end
-        # TODO update code below for new WidgetProxy API
-        EventListenerProxy.new(element_proxy: self, event: event, selector: selector, delegate: delegate)
+      end
+      
+      def remove_event_listener_proxies
+        event_listener_proxies.each do |event_listener_proxy|
+          event_listener_proxy.unregister
+        end
+        event_listener_proxies.clear
       end
       
       def add_observer(observer, property_name)
@@ -410,12 +686,17 @@ module Glimmer
       
       def method_missing(method, *args, &block)
         if method.to_s.start_with?('on_')
-          handle_observation_request(method, &block)
+          handle_observation_request(method, block)
         else
           super(method, *args, &block)
         end
       end
       
+      def swt_widget
+        # only added for compatibility/adaptibility with Glimmer DSL for SWT
+        self
+      end
+      
       def apply_property_type_converters(attribute_name, args)
         if args.count == 1
           value = args.first
@@ -608,6 +889,8 @@ require 'glimmer/swt/date_time_proxy'
 require 'glimmer/swt/group_proxy'
 require 'glimmer/swt/label_proxy'
 require 'glimmer/swt/list_proxy'
+require 'glimmer/swt/menu_item_proxy'
+require 'glimmer/swt/menu_proxy'
 require 'glimmer/swt/radio_proxy'
 require 'glimmer/swt/tab_folder_proxy'
 require 'glimmer/swt/tab_item_proxy'