glimmer-dsl-opal 0.0.5 → 0.1.0

data/lib/glimmer/swt/layout_proxy.rb

@@ -0,0 +1,60 @@
+require 'glimmer/swt/property_owner'
+
+module Glimmer
+  module SWT
+    class LayoutProxy
+      include Glimmer::SWT::PropertyOwner
+      
+      class << self
+        # Factory Method that translates a Glimmer DSL keyword into a WidgetProxy object
+        def for(keyword, parent, args)
+          the_layout_class = layout_class(keyword) || Glimmer::SWT::GridLayoutProxy
+          the_layout_class.new(parent, args)
+        end
+        
+        def layout_class(keyword)
+          class_name_alternative = keyword.camelcase(:upper)
+          class_name_main = "#{class_name_alternative}Proxy"
+          a_layout_class = Glimmer::SWT.const_get(class_name_main.to_sym) rescue Glimmer::SWT.const_get(class_name_alternative.to_sym)
+          a_layout_class if a_layout_class.ancestors.include?(Glimmer::SWT::LayoutProxy)
+        rescue => e
+          puts "Layout #{keyword} was not found!"
+          nil
+        end
+        
+        def layout_exists?(keyword)
+          !!layout_class(keyword)
+        end
+      end      
+      
+      attr_reader :parent, :args
+        
+      def initialize(parent, args)
+        @parent = parent
+        @args = args
+        @parent.add_css_class(css_class)
+      end
+
+      def css_class
+        self.class.name.split('::').last.underscore.sub(/_proxy$/, '').gsub('_', '-')
+      end
+      
+      def reapply
+        layout_css = <<~CSS
+          display: grid;
+          grid-template-columns: #{'auto ' * @num_columns.to_i};
+          grid-row-gap: #{@vertical_spacing}px;
+          grid-column-gap: #{@horizontal_spacing}px;
+          justify-content: start;
+        CSS
+        layout_css.split(";").map(&:strip).map {|l| l.split(':').map(&:strip)}.each do |key, value|
+          unless key.nil?
+            @parent.dom_element.css(key, value)
+          end
+        end
+      end
+    end
+  end
+end
+
+require 'glimmer/swt/grid_layout_proxy'

data/lib/glimmer/{opal → swt}/list_proxy.rb

@@ -1,19 +1,19 @@
-require 'glimmer/opal/element_proxy'
+require 'glimmer/swt/widget_proxy'
 
 module Glimmer
-  module Opal
-    class ListProxy < ElementProxy
+  module SWT
+    class ListProxy < WidgetProxy
       ITEM_EMPTY = '_____'
       attr_reader :items, :selection
       
-      def initialize(parent, args)
+      def initialize(parent, args)        
         super(parent, args)
         @selection = []
       end
       
       def items=(items)
         @items = items.map {|item| item.strip == '' ? ITEM_EMPTY : item}
-        redraw
+        redraw # consider repopulating li's instead of redrawing when li's are available.
       end
       
       def index_of(item)
@@ -43,37 +43,40 @@ module Glimmer
           '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)              
+              -> (event) {
+                if event.target.prop('nodeName') == 'LI'
+                  selected_item = event.target.text
+                  select(index_of(selected_item), event.meta_key)
+                  event_listener.call(event)              
+                end
               }
             }
           }
         }
       end
       
-      def name
+      def element
         'ul'
       end
       
       def dom
         list_items = @items
         list_id = id
-        list_style = style
+        list_style = css
         list_selection = selection
-        @dom ||= DOM {
-          ul(id: list_id, style: list_style) {
+        @dom ||= html {
+          ul(id: list_id, class: name, 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 += ' selected' if list_selection.include?(item)
               li_class += ' empty-list-item' if item == ITEM_EMPTY
               li(class: li_class) {
                 item
               }
             end
+            nil #TODO   look into glimmer-dsl-xml and why it doesn't ignore collections like each_with_index
           }
-        }
+        }.to_s
       end
     end
   end

data/lib/glimmer/swt/message_box_proxy.rb

@@ -0,0 +1,146 @@
+require 'glimmer/swt/widget_proxy'
+
+module Glimmer
+  module SWT
+    class MessageBoxProxy < WidgetProxy
+      attr_reader :text, :message
+      
+      def initialize(parent, args)
+        i = 0
+        @parent = parent
+        @args = args
+        @children = Set.new
+        @css_classes = Set.new(['modal', name])
+        @css = ''
+        @enabled = true
+        content do
+          on_widget_selected {
+            hide
+          }
+        end
+      end
+      
+      def text=(txt)
+        @text = txt
+        redraw if @dom
+      end
+    
+      def message=(msg)
+        @message = msg
+        redraw if @dom
+      end
+      
+      def document
+        element = self
+        begin
+          element = element.parent
+        end while(element.parent)
+        element
+      end
+      
+      def open
+        document.add_child(self)
+      end
+      
+      def hide
+        dom_element.remove
+      end
+      
+      def content(&block)
+        Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Opal::MessageBoxExpression.new, &block)
+      end
+      
+      def name
+        'div'
+      end
+      
+      def selector
+        super + ' .close' 
+      end
+    
+      def listener_path
+        path + ' .close' 
+      end
+    
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click'
+          },
+        }
+      end      
+ 
+      def style_dom_modal_css
+        <<~CSS
+          .modal {
+            position: fixed;
+            z-index: 1;
+            padding-top: 100px;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgb(0,0,0);
+            background-color: rgba(0,0,0,0.4);
+            text-align: center;
+          }
+          .modal-content .text {
+            background: rgb(80, 116, 211);
+            color: white;
+            padding: 5px;
+          }
+          .modal-content .message {
+            padding: 20px;
+          }
+          .modal-content {
+            background-color: #fefefe;
+            margin: auto;
+            border: 1px solid #888;
+            display: inline-block;
+            min-width: 200px;
+          }
+        CSS
+#           .close {
+#             color: #aaaaaa;
+#             float: right;
+#             font-weight: bold;
+#             margin: 5px;
+#           }
+#           .close:hover,
+#           .close:focus {
+#             color: #000;
+#             text-decoration: none;
+#             cursor: pointer;
+#           }
+      end
+      
+      def dom
+        modal_id = id
+        modal_style = css
+        modal_text = text
+        modal_message = message
+        modal_css_classes = css_classes
+        modal_class = modal_css_classes.to_a.join(' ')
+        @dom ||= html {        
+          div(id: modal_id, style: modal_style, class: modal_class) {
+            style(class: 'modal-style') {
+              style_dom_modal_css #.split("\n").map(&:strip).join(' ')
+            }        
+            div(class: 'modal-content') {
+              header(class: 'text') {
+                modal_text
+              }
+              tag(_name: 'p', id: 'message') {
+                modal_message
+              }
+              input(type: 'button', class: 'close', autofocus: 'autofocus', value: 'OK')
+            }
+          }
+        }.to_s
+      end
+    end
+  end
+end
+
+require 'glimmer/dsl/opal/message_box_expression'

data/lib/glimmer/{opal → swt}/point.rb

@@ -1,5 +1,5 @@
 module Glimmer
-  module Opal
+  module SWT
     Point = Struct.new(:x, :y)
   end
 end

data/lib/glimmer/{opal → swt}/property_owner.rb

@@ -1,5 +1,5 @@
 module Glimmer
-  module Opal
+  module SWT
     # Adapts Glimmer UI classes to SWT JavaBean property owner classes (which are now adapted to Opal)
     module PropertyOwner
       def get_attribute(attribute_name)

data/lib/glimmer/swt/shell_proxy.rb

@@ -0,0 +1,235 @@
+    require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/point'
+
+module Glimmer
+  module SWT
+    class ShellProxy < WidgetProxy
+      # TODO consider renaming to ShellProxy to match SWT API
+      attr_reader :minimum_size
+    
+      def initialize(args)
+        @args = args
+        @children = []
+#         Document.ready? do
+        Document.find('body').empty unless ENV['RUBY_ENV'] == 'test'
+        redraw
+#         end
+      end
+      
+      def element
+        'div'
+      end
+      
+      def parent_path
+        'body'
+      end
+
+      def text
+        $document.title
+      end
+
+      def text=(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 style_dom_css
+        <<~CSS
+          .hide {
+            display: none !important;
+          }
+          .selected, .tabs .tab.selected {
+            background: rgb(80, 116, 211);
+            color: white;
+          }          
+        CSS
+      end
+            
+      def style_dom_shell_css
+        <<~CSS
+          html {
+            width: 100%;
+            height: 100%;
+          }
+          body, .shell {
+            width: 100%;
+            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
+        body_style = '' # a start for more styling further along
+        if @minimum_size
+          body_style += "min-width: #{@minimum_size.x}px; min-height: #{@minimum_size.y}px;" if @minimum_size
+          Document.find('body').css('min-width', "#{@minimum_size.x}px")
+          Document.find('body').css('min-height', "#{@minimum_size.y}px")
+        end
+        @dom ||= html {
+          div(id: body_id, class: body_class, style: body_style) {
+            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
+            }        
+          }
+        }.to_s
+      end
+      
+      def open
+        # TODO make it start as hidden and show shell upon open
+      end
+    end
+  end
+end