glimmer-dsl-opal 0.0.3 → 0.0.8

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

@@ -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' 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/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'

data/lib/glimmer/opal/table_column.rb

@@ -0,0 +1,50 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class TableColumn < ElementProxy
+      include Glimmer
+      attr_reader :text, :width      
+      
+      def text=(value)
+        @text = value
+        redraw
+      end
+    
+      def width=(value)
+        @width = value
+        redraw
+      end
+      
+      def css
+        <<~CSS
+          width: #{width};
+        CSS
+      end
+    
+      def name
+        'th'
+      end
+      
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click'
+          },
+        }
+      end      
+      
+      def dom
+        table_column_text = text
+        table_column_id = id
+        table_column_id_style = css
+        table_column_css_classes = css_classes
+        @dom ||= DOM {
+          th(id: table_column_id, style: table_column_id_style, class: table_column_css_classes.to_a.join(' ')) {
+            table_column_text
+          }
+        }
+      end      
+    end
+  end
+end