glimmer-dsl-opal 0.0.4 → 0.0.9

data/lib/glimmer/opal/element_proxy.rb

@@ -5,26 +5,54 @@ module Glimmer
     class ElementProxy
       include Glimmer
       include PropertyOwner
-      attr_reader :parent, :args, :css_classes, :style
+      attr_reader :parent, :args, :css_classes, :css, :children, :enabled
+      
+      class << self
+        def next_id_number_for(name)
+          @max_id_numbers[name] = max_id_number_for(name) + 1
+        end
+        
+        def max_id_number_for(name)
+          @max_id_numbers[name] = max_id_numbers[name] || 0
+        end
+        
+        def max_id_numbers
+          @max_id_numbers ||= {}
+        end
+      end
       
       def initialize(parent, args)
         @parent = parent
         @args = args
-        @children = []
-        @parent.add_child(self)
+        @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
+        end
       end
       
       # Subclasses must override with their own mappings
@@ -37,9 +65,14 @@ module Glimmer
       end
       
       def id
-        "#{name}-#{hash}"
+        @id ||= "#{name}-#{ElementProxy.next_id_number_for(name)}"
       end
-      
+            
+      # Sets id explicitly. Useful in cases of wanting to maintain a stable id
+      def id=(value)
+        @id = value
+      end
+            
       # Subclasses can override with their own selector
       def selector
         "#{name}##{id}"
@@ -70,10 +103,8 @@ module Glimmer
         redraw
       end
       
-      # TODO rename to avoid conflict with SWT Style verbiage
-      
-      def style=(css)
-        @style = css
+      def css=(css)
+        @css = css
         redraw
       end
       
@@ -181,7 +212,7 @@ module Glimmer
 #           },
           InputProxy => {
             :text => lambda do |observer|
-              on_modify_text { |modify_event|                
+              on_modify_text { |modify_event|
                 observer.call(text)
               }
             end,

data/lib/glimmer/opal/grid_layout_proxy.rb

@@ -10,7 +10,9 @@ module Glimmer
         @parent = parent
         @args = args
         @parent.add_css_class('grid-layout')
+        @horizontal_spacing = 10
         @vertical_spacing = 10
+        @num_columns = @args.first || 1        
         reapply
       end
 
@@ -39,7 +41,7 @@ module Glimmer
       end
       
       def reapply
-        @parent.style = <<~CSS
+        @parent.css = <<~CSS
           display: grid;
           grid-template-columns: #{'auto ' * @num_columns.to_i};
           grid-row-gap: #{@vertical_spacing}px;

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

@@ -19,8 +19,10 @@ module Glimmer
             event: 'keyup',
             event_handler: -> (event_listener) {
               -> (event) {
-                @text = event.target.value
-                event_listener.call(event)              
+                if args.last[:type] == 'text'
+                  @text = event.target.value
+                  event_listener.call(event)              
+                end
               }
             }
           }
@@ -30,10 +32,12 @@ module Glimmer
       def dom
         input_text = @text
         input_id = id
-        input_style = style
+        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 input_args.merge(id: input_id, style: input_style, 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,7 +13,7 @@ module Glimmer
       def dom
         label_text = @text
         label_id = id
-        label_style = style
+        label_style = css
         @dom ||= DOM {
           label(id: label_id, style: label_style) {
             label_text

data/lib/glimmer/opal/layout_data_proxy.rb

@@ -4,7 +4,13 @@ module Glimmer
   module Opal
     class LayoutDataProxy
       include PropertyOwner
-      attr_reader :parent, :args, :horizontal_alignment, :grab_excess_horizontal_space
+      attr_reader :parent, 
+                  :args, 
+                  :horizontal_alignment, 
+                  :vertical_alignment, 
+                  :grab_excess_horizontal_space,
+                  :grab_excess_vertical_space,
+                  :height_hint
     
       def initialize(parent, args)
         @parent = parent
@@ -12,18 +18,33 @@ module Glimmer
         reapply
       end
 
+      def height_hint=(height_hint)
+        @height_hint = height_hint
+        reapply
+      end
+
       def horizontal_alignment=(horizontal_alignment)
         @horizontal_alignment = horizontal_alignment
         reapply
       end
       
+      def vertical_alignment=(vertical_alignment)
+        @vertical_alignment = vertical_alignment
+        reapply
+      end
+      
       def grab_excess_horizontal_space=(grab_excess_horizontal_space)
         @grab_excess_horizontal_space = grab_excess_horizontal_space
         reapply
       end
 
+      def grab_excess_vertical_space=(grab_excess_vertical_space)
+        @grab_excess_vertical_space = grab_excess_vertical_space
+        reapply
+      end
+
       def reapply
-#         @parent.style = <<~CSS
+#         @parent.css = <<~CSS
 #         CSS
       end
     end

data/lib/glimmer/opal/list_proxy.rb

@@ -60,13 +60,13 @@ module Glimmer
       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) {
             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

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/select_proxy.rb

@@ -41,7 +41,7 @@ module Glimmer
         select_text = @text        
         items = @items
         select_id = id
-        select_style = style
+        select_style = css
         @dom ||= DOM {
           select(id: select_id, style: select_style) {
             items.to_a.each do |item|

data/lib/glimmer/opal/tab_folder.rb

@@ -0,0 +1,53 @@
+require 'glimmer/opal/element_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 redraw
+        super()
+        @children.each do |child|
+          add_child(child) # TODO think of impact of this on performance
+        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/div_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'