glimmer-dsl-opal 0.0.2 → 0.0.7

data/lib/glimmer/opal/div_proxy.rb

@@ -3,10 +3,18 @@ require 'glimmer/opal/element_proxy'
 module Glimmer
   module Opal
     class DivProxy < ElementProxy
+      attr_reader :layout
+      
+      def initialize(parent, args)
+        super(parent, args)
+        @layout = GridLayoutProxy.new(self, [])
+      end
+      
       def dom
         div_id = id
+        div_style = css
         @dom ||= DOM {
-          div(id: div_id, class: 'grid_layout')
+          div(id: div_id, class: 'grid-layout', style: div_style)
         }
       end
     end

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
@@ -19,18 +21,139 @@ module Glimmer
       end
 
       def text=(value)
-        $document.title = value
+        $document.ready do
+          $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
         @head_dom ||= DOM {
           head {
             <<~CSS
             <style>
-              div.grid_layout > * {
-                display: block;
-                margin-bottom: 10px;
+              html {
+                width: 100%;
+                height: 100%;
+              }
+              body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+              }
+              body > iframe {
+                width: 100%;
+                height: 100%;
+              }
+              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;
+              }
+              .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;
+              }
+              
+              .modal-content .message {
+                padding: 20px;
+              }
+              
+              /* The Close Button */
+              .close {
+                color: #aaaaaa;
+                float: right;
+#                 font-size: 18px;
+                font-weight: bold;
+                margin: 5px;
               }
+              
+              .close:hover,
+              .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+              }              
             </style>
             CSS
           }
@@ -38,8 +161,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

data/lib/glimmer/opal/element_proxy.rb

@@ -1,25 +1,45 @@
+require 'glimmer/opal/property_owner'
+
 module Glimmer
   module Opal
     class ElementProxy
-      attr_reader :parent, :args
+      include Glimmer
+      include PropertyOwner
+      attr_reader :parent, :args, :css_classes, :css, :children, :enabled
       
       def initialize(parent, args)
         @parent = parent
         @args = args
-        @children = []
+        @children = Set.new
+        @css_classes = Set.new
+        @css = ''
+        @enabled = true
         @parent.add_child(self)
       end
 
       def add_child(child)
-        return if @children.include?(child)
+#         return if @children.include?(child) # TODO consider adding an option to enable this if needed to prevent dom repetition
         @children << child
         dom << child.dom
       end
+      
+      def enabled=(value)
+        @enabled = value
+        redraw
+      end
 
       def redraw
-        old_dom = @dom
-        @dom = nil
-        old_dom.replace dom
+        if @dom
+          old_dom = @dom
+          @dom = nil
+          old_dom.replace dom
+        else
+          dom
+        end
+        @children.each do |child|
+          child.redraw
+          add_child(child)
+        end
       end
       
       # Subclasses must override with their own mappings
@@ -32,6 +52,7 @@ module Glimmer
       end
       
       def id
+        # TODO replace hash with autoincrement per name
         "#{name}-#{hash}"
       end
       
@@ -40,13 +61,227 @@ module Glimmer
         "#{name}##{id}"
       end
       
+      def add_css_class(css_class)
+        @css_classes << css_class
+        redraw
+      end
+      
+      def add_css_classes(css_classes)
+        @css_classes += css_classes
+        redraw
+      end
+      
+      def remove_css_class(css_class)
+        @css_classes.delete(css_class)
+        redraw
+      end
+      
+      def remove_css_classes(css_classes)
+        @css_classes -= css_classes
+        redraw
+      end
+      
+      def clear_css_classes(css_class)
+        @css_classes.clear
+        redraw
+      end
+      
+      def css=(css)
+        @css = 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)
-        event = observation_request_to_event_mapping[keyword][:event]
-        event_handler = observation_request_to_event_mapping[keyword][:event_handler]
-        event_listener = event_handler&.call(event_listener) || event_listener
-        delegate = $document.on(event, selector, &event_listener)
+        return unless observation_request_to_event_mapping.keys.include?(keyword)
+        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         
+      end
+      
+      def add_observer(observer, property_name)
+        property_listener_installers = self.class.ancestors.map {|ancestor| widget_property_listener_installers[ancestor]}.compact
+        widget_listener_installers = property_listener_installers.map{|installer| installer[property_name.to_s.to_sym]}.compact if !property_listener_installers.empty?
+        widget_listener_installers.to_a.each do |widget_listener_installer|
+          widget_listener_installer.call(observer)
+        end
+      end
+      
+      def set_attribute(attribute_name, *args)
+        apply_property_type_converters(attribute_name, args)
+        super(attribute_name, *args)
+      end
+      
+      def apply_property_type_converters(attribute_name, args)
+        if args.count == 1
+          value = args.first
+          converter = property_type_converters[attribute_name.to_sym]
+          args[0] = converter.call(value) if converter
+        end
+#         if args.count == 1 && args.first.is_a?(ColorProxy)
+#           g_color = args.first
+#           args[0] = g_color.swt_color
+#         end
+      end
+      
+      def property_type_converters
+        @property_type_converters ||= {
+#           :background => color_converter,
+#           :background_image => lambda do |value|
+#             if value.is_a?(String)
+#               if value.start_with?('uri:classloader')
+#                 value = value.sub(/^uri\:classloader\:\//, '')
+#                 object = java.lang.Object.new
+#                 value = object.java_class.resource_as_stream(value)
+#                 value = java.io.BufferedInputStream.new(value)
+#               end
+#               image_data = ImageData.new(value)
+#               on_event_Resize do |resize_event|
+#                 new_image_data = image_data.scaledTo(@swt_widget.getSize.x, @swt_widget.getSize.y)
+#                 @swt_widget.getBackgroundImage&.dispose
+#                 @swt_widget.setBackgroundImage(Image.new(@swt_widget.getDisplay, new_image_data))
+#               end
+#               Image.new(@swt_widget.getDisplay, image_data)
+#             else
+#               value
+#             end
+#           end,
+#           :foreground => color_converter,
+#           :font => lambda do |value|
+#             if value.is_a?(Hash)
+#               font_properties = value
+#               FontProxy.new(self, font_properties).swt_font
+#             else
+#               value
+#             end
+#           end,
+#           :items => lambda do |value|
+#             value.to_java :string
+#           end,
+          :text => lambda do |value|
+#             if swt_widget.is_a?(Browser)
+#               value.to_s
+#             else
+              value.to_s
+#             end
+          end,
+#           :visible => lambda do |value|
+#             !!value
+#           end,
+        }      
+      end      
+      
+      def widget_property_listener_installers
+        @swt_widget_property_listener_installers ||= {
+#           ElementProxy => {
+#             :focus => lambda do |observer|
+#               on_focus_gained { |focus_event|
+#                 observer.call(true)
+#               }
+#               on_focus_lost { |focus_event|
+#                 observer.call(false)
+#               }
+#             end,
+#           },
+          InputProxy => {
+            :text => lambda do |observer|
+              on_modify_text { |modify_event|
+                observer.call(text)
+              }
+            end,
+#             :caret_position => lambda do |observer|
+#               on_event_keydown { |event|
+#                 observer.call(getCaretPosition)
+#               }
+#               on_event_keyup { |event|
+#                 observer.call(getCaretPosition)
+#               }
+#               on_event_mousedown { |event|
+#                 observer.call(getCaretPosition)
+#               }
+#               on_event_mouseup { |event|
+#                 observer.call(getCaretPosition)
+#               }
+#             end,
+#             :selection => lambda do |observer|
+#               on_event_keydown { |event|
+#                 observer.call(getSelection)
+#               }
+#               on_event_keyup { |event|
+#                 observer.call(getSelection)
+#               }
+#               on_event_mousedown { |event|
+#                 observer.call(getSelection)
+#               }
+#               on_event_mouseup { |event|
+#                 observer.call(getSelection)
+#               }
+#             end,
+#             :selection_count => lambda do |observer|
+#               on_event_keydown { |event|
+#                 observer.call(getSelectionCount)
+#               }
+#               on_event_keyup { |event|
+#                 observer.call(getSelectionCount)
+#               }
+#               on_event_mousedown { |event|
+#                 observer.call(getSelectionCount)
+#               }
+#               on_event_mouseup { |event|
+#                 observer.call(getSelectionCount)
+#               }
+#             end,
+#             :top_index => lambda do |observer|
+#               @last_top_index = getTopIndex
+#               on_paint_control { |event|
+#                 if getTopIndex != @last_top_index
+#                   @last_top_index = getTopIndex
+#                   observer.call(@last_top_index)
+#                 end
+#               }
+#             end,
+          },
+#           Java::OrgEclipseSwtCustom::StyledText => {
+#             :text => lambda do |observer|
+#               on_modify_text { |modify_event|
+#                 observer.call(getText)
+#               }
+#             end,
+#           },
+#           InputProxy => {
+#             :selection => lambda do |observer|
+#               on_widget_selected { |selection_event|
+#                 observer.call(getSelection)
+#               }
+#             end
+#           },
+#           Java::OrgEclipseSwtWidgets::MenuItem => {
+#             :selection => lambda do |observer|
+#               on_widget_selected { |selection_event|
+#                 observer.call(getSelection)
+#               }
+#             end
+#           },
+#           Java::OrgEclipseSwtWidgets::Spinner => {
+#             :selection => lambda do |observer|
+#               on_widget_selected { |selection_event|
+#                 observer.call(getSelection)
+#               }
+#             end
+#           },
+        }
+      end
+      
     end
   end
 end