glimmer-dsl-opal 0.0.2 → 0.0.7

data/lib/glimmer/opal/grid_layout_proxy.rb

@@ -0,0 +1,54 @@
+require 'glimmer/opal/property_owner'
+
+module Glimmer
+  module Opal
+    class GridLayoutProxy
+      include PropertyOwner
+      attr_reader :parent, :args, :num_columns, :make_columns_equal_width, :horizontal_spacing, :vertical_spacing
+    
+      def initialize(parent, args)
+        @parent = parent
+        @args = args
+        @parent.add_css_class('grid-layout')
+        @horizontal_spacing = 10
+        @vertical_spacing = 10
+        @num_columns = @args.first || 1        
+        reapply
+      end
+
+      def num_columns=(columns)
+        @num_columns = columns
+#         @parent.add_css_class("num-columns-#{@num_columns}")
+        reapply
+      end
+      
+      def make_columns_equal_width=(equal_width)
+        @make_columns_equal_width = equal_width        
+#         @parent.add_css_class('make_columns_equal_width') if @make_columns_equal_width
+        reapply
+      end
+      
+      def horizontal_spacing=(spacing)
+        @horizontal_spacing = spacing
+#         @parent.add_css_class("horizontal-spacing-#{@horizontal_spacing}")
+        reapply
+      end
+
+      def vertical_spacing=(spacing)
+        @vertical_spacing = spacing
+#         @parent.add_css_class("vertical-spacing-#{@vertical_spacing}")
+        reapply
+      end
+      
+      def reapply
+        @parent.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
+      end
+    end
+  end
+end

data/lib/glimmer/opal/iframe_proxy.rb

@@ -0,0 +1,23 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class IframeProxy < ElementProxy
+      attr_reader :url
+      
+      def url=(value)
+        @url = value
+        redraw
+      end
+    
+      def dom
+        iframe_id = id
+        iframe_url = url
+        @dom ||= DOM {
+          iframe(src: iframe_url, frameBorder: 0) {
+          }
+        }
+      end      
+    end
+  end
+end

data/lib/glimmer/opal/input_proxy.rb

@@ -14,6 +14,17 @@ module Glimmer
         {
           'on_widget_selected' => {
             event: 'click'
+          }, 
+          'on_modify_text' => {
+            event: 'keyup',
+            event_handler: -> (event_listener) {
+              -> (event) {
+                if args.last[:type] == 'text'
+                  @text = event.target.value
+                  event_listener.call(event)              
+                end
+              }
+            }
           }
         }
       end
@@ -21,8 +32,12 @@ module Glimmer
       def dom
         input_text = @text
         input_id = id
+        input_style = css
+        input_args = @args.last
+        input_disabled = @enabled ? {} : {'disabled': 'disabled'}
+        input_args = input_args.merge(type: 'password') if has_style?(:password)        
         @dom ||= DOM {
-          input id: input_id, type: 'button', value: input_text
+          input input_args.merge(id: input_id, style: input_style, value: input_text, style: 'min-width: 27px;').merge(input_disabled)
         }
       end
     end

data/lib/glimmer/opal/label_proxy.rb

@@ -13,8 +13,9 @@ module Glimmer
       def dom
         label_text = @text
         label_id = id
+        label_style = css
         @dom ||= DOM {
-          label(id: label_id) {
+          label(id: label_id, style: label_style) {
             label_text
           }
         }

data/lib/glimmer/opal/layout_data_proxy.rb

@@ -0,0 +1,31 @@
+require 'glimmer/opal/property_owner'
+
+module Glimmer
+  module Opal
+    class LayoutDataProxy
+      include PropertyOwner
+      attr_reader :parent, :args, :horizontal_alignment, :grab_excess_horizontal_space
+    
+      def initialize(parent, args)
+        @parent = parent
+        @args = args
+        reapply
+      end
+
+      def horizontal_alignment=(horizontal_alignment)
+        @horizontal_alignment = horizontal_alignment
+        reapply
+      end
+      
+      def grab_excess_horizontal_space=(grab_excess_horizontal_space)
+        @grab_excess_horizontal_space = grab_excess_horizontal_space
+        reapply
+      end
+
+      def reapply
+#         @parent.css = <<~CSS
+#         CSS
+      end
+    end
+  end
+end

data/lib/glimmer/opal/list_proxy.rb

@@ -0,0 +1,80 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class ListProxy < ElementProxy
+      ITEM_EMPTY = '_____'
+      attr_reader :items, :selection
+      
+      def initialize(parent, args)
+        super(parent, args)
+        @selection = []
+      end
+      
+      def items=(items)
+        @items = items.map {|item| item.strip == '' ? ITEM_EMPTY : item}
+        redraw
+      end
+      
+      def index_of(item)
+        @items.index(item)
+      end
+      
+      # used for multi-selection taking an array
+      def selection=(selection)
+        @selection = selection
+        redraw
+      end
+      
+      # used for single selection taking an index
+      def select(index, meta = false)
+        selected_item = @items[index]
+        if @selection.include?(selected_item)
+          @selection.delete(selected_item) if meta
+        else
+          @selection = [] if !meta || (!has_style?(:multi) && @selection.to_a.size >= 1)
+          @selection << selected_item
+        end
+        self.selection = @selection
+      end
+
+      def observation_request_to_event_mapping
+        {
+          '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)              
+              }
+            }
+          }
+        }
+      end
+      
+      def name
+        'ul'
+      end
+      
+      def dom
+        list_items = @items
+        list_id = id
+        list_style = css
+        list_selection = selection
+        @dom ||= DOM {
+          ul(id: list_id, 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 += ' empty-list-item' if item == ITEM_EMPTY
+              li(class: li_class) {
+                item
+              }
+            end
+          }
+        }
+      end
+    end
+  end
+end

data/lib/glimmer/opal/modal.rb

@@ -0,0 +1,94 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class Modal < ElementProxy
+      attr_reader :text, :message
+      
+      def initialize(parent, args)
+        i = 0
+        @parent = parent
+        @args = args
+        @children = Set.new
+        @css_classes = Set.new(['modal'])
+        @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.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 observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click'
+          },
+        }
+      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 ||= DOM {        
+          div(id: modal_id, style: modal_style, class: modal_class) {
+            div(class: 'modal-content') {
+              header.text {
+                modal_text
+              }
+              p.message {
+                modal_message
+              }
+              input(type: 'button', class: 'close', autofocus: 'autofocus', value: 'OK')
+            }
+          }
+        }
+      end
+    end
+  end
+end
+
+require 'glimmer/dsl/opal/message_box_expression'

data/lib/glimmer/opal/point.rb

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

data/lib/glimmer/opal/property_owner.rb

@@ -0,0 +1,22 @@
+module Glimmer
+  module Opal
+    # Adapts Glimmer UI classes to SWT JavaBean property owner classes (which are now adapted to Opal)
+    module PropertyOwner
+      def get_attribute(attribute_name)
+        send(attribute_getter(attribute_name))
+      end
+    
+      def set_attribute(attribute_name, *args)
+        send(attribute_setter(attribute_name), *args) unless send(attribute_getter(attribute_name)) == args.first
+      end
+      
+      def attribute_setter(attribute_name)
+        "#{attribute_name.to_s.underscore}="
+      end
+      
+      def attribute_getter(attribute_name)
+        attribute_name.to_s.underscore
+      end      
+    end
+  end
+end

data/lib/glimmer/opal/select_proxy.rb

@@ -41,8 +41,9 @@ module Glimmer
         select_text = @text        
         items = @items
         select_id = id
+        select_style = css
         @dom ||= DOM {
-          select(id: select_id) {
+          select(id: select_id, style: select_style) {
             items.to_a.each do |item|
               option_hash = {value: item}
               option_hash[:selected] = 'selected' if select_text == item

data/lib/glimmer/opal/tab_folder.rb

@@ -0,0 +1,46 @@
+require 'glimmer/opal/div_proxy'
+
+module Glimmer
+  module Opal
+    class TabFolder < ElementProxy
+      attr_reader :tabs
+      
+      def initialize(parent, args)
+        super(parent, args)
+        @tabs = []
+      end
+      
+      def add_child(child)
+        super(child)
+        if @children.size == 1
+          child.show
+        end
+      end      
+      
+      def hide_all_tab_content
+        @children.each(&:hide)
+      end
+    
+      def name
+        'div'
+      end
+      
+      def tabs_dom
+        tabs_id = id + '-tabs'
+        @tabs_dom ||= DOM {
+          div(id: tabs_id, class: 'tabs')
+        }
+      end
+      
+      def dom
+        tab_folder_id = id
+        tab_folder_id_style = css
+        @dom ||= DOM {
+          div(id: tab_folder_id, style: tab_folder_id_style, class: 'tab-folder') {
+            
+          }
+        }.tap {|the_dom| the_dom << tabs_dom }
+      end
+    end
+  end
+end

data/lib/glimmer/opal/tab_item.rb

@@ -0,0 +1,98 @@
+require 'glimmer/opal/input_proxy'
+
+module Glimmer
+  module Opal
+    class TabItem < DivProxy
+      include Glimmer
+      attr_reader :text, :content_visible      
+      
+      def initialize(parent, args)
+        super(parent, args)
+        css_classes << 'tab-item'
+        content do
+          on_widget_selected {
+            @parent.hide_all_tab_content
+            show
+          }
+        end
+      end
+      
+      def content(&block)
+        Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Opal::TabItemExpression.new, &block)
+      end
+      
+      def show
+        @content_visible = true
+        redraw      
+      end
+      
+      def hide
+        @content_visible = false
+        redraw
+      end
+    
+      def text=(value)
+        @text = value
+        redraw
+      end
+    
+      def name
+        'button'
+      end
+      
+      def selector
+        super + '-tab'
+      end      
+      
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click'
+          },
+        }
+      end      
+      
+      def redraw        
+        if @tab_dom
+          old_tab_dom = @tab_dom
+          @tab_dom = nil
+          old_tab_dom.replace tab_dom
+        else
+          tab_dom
+        end
+        super
+      end      
+      
+      def tab_dom
+        tab_id = id + '-tab'
+        tab_text = text
+        tab_active = content_visible ? 'active' : ''
+        @tab_dom ||= DOM {
+          button(id: tab_id, class: "tab #{tab_active}") {
+            tab_text
+          }
+        }
+      end
+      
+      def dom
+        tab_item_id = id
+        tab_item_id_style = css
+        tab_item_css_classes = css_classes
+        if content_visible
+          tab_item_css_classes.delete('hide')
+        else
+          tab_item_css_classes << 'hide' 
+        end
+        if !@parent.tabs.include?(self)
+          @parent.tabs_dom << tab_dom
+          @parent.tabs << self
+        end
+        @dom ||= DOM {
+          div(id: tab_item_id, style: tab_item_id_style, class: tab_item_css_classes.to_a.join(' ')) {
+          }
+        }
+      end      
+    end
+  end
+end
+require 'glimmer/dsl/opal/tab_item_expression'