glimmer-dsl-opal 0.0.3 → 0.0.8

data/lib/glimmer/dsl/opal/table_expression.rb

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/parent_expression'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      class TableExpression < StaticExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Opal::TableProxy.new(parent, args)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/opal/table_items_data_binding_expression.rb

@@ -0,0 +1,29 @@
+require 'glimmer/dsl/expression'
+require 'glimmer/data_binding/model_binding'
+require 'glimmer/data_binding/table_items_binding'
+require 'glimmer/opal/table_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      #Depends on BindCommandHandler and TableColumnPropertiesDataBindingCommandHandler
+      class TableItemsDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == "items" and
+            block.nil? and
+            parent.is_a?(Glimmer::Opal::TableProxy) and
+            args.size == 2 and
+            args[0].is_a?(DataBinding::ModelBinding) and
+            args[0].evaluate_property.is_a?(Array) and
+            args[1].is_a?(Array)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          model_binding = args[0]
+          column_properties = args[1]
+          DataBinding::TableItemsBinding.new(parent, model_binding, column_properties)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/opal/display_proxy.rb

@@ -0,0 +1,23 @@
+module Glimmer
+  module Opal
+    class DisplayProxy
+      class << self
+        def instance
+          @instance ||= new
+        end
+      end
+      
+      def async_exec(&block)
+        executer = lambda do
+          if $document.at_css('.modal')
+            sleep(0.05)
+            Async::Task.new(&executer)
+          else
+            block.call
+          end
+        end
+        Async::Task.new(&executer)
+      end
+    end
+  end
+end

data/lib/glimmer/opal/div_proxy.rb

@@ -3,14 +3,23 @@ require 'glimmer/opal/element_proxy'
 module Glimmer
   module Opal
     class DivProxy < ElementProxy
+      attr_reader :layout
+      
       def initialize(parent, args)
         super(parent, args)
-        GridLayoutProxy.new(self, [])
+        @layout = GridLayoutProxy.new(self, [])
+      end
+      
+      def redraw
+        super()
+        @children.each do |child|
+          add_child(child) # TODO think of impact of this on performance, and of other alternatives
+        end
       end
       
       def dom
         div_id = id
-        div_style = style
+        div_style = css
         @dom ||= DOM {
           div(id: div_id, class: 'grid-layout', style: div_style)
         }

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
@@ -23,28 +25,156 @@ module Glimmer
           $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: grid;
-#                 grid-template-columns: auto;
-#                 grid-row-gap: 10px;
-#                 justify-content: start;
-#               }
-#             </style>
-#             CSS
+            <<~CSS
+            <style>
+              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.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-weight: bold;
+                margin: 5px;
+              }
+              
+              .close:hover,
+              .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+              }
+              
+              .selected {
+                background: rgb(80, 116, 211);
+                color: white;
+              }
+              
+              table {
+                border-spacing: 0;
+              }
+              
+              table tr th,td {
+                cursor: default;
+              }
+
+            </style>
+            CSS
           }
         }
       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

@@ -5,26 +5,40 @@ module Glimmer
     class ElementProxy
       include Glimmer
       include PropertyOwner
-      attr_reader :parent, :args, :css_classes, :style
+      attr_reader :parent, :args, :css_classes, :css, :children, :enabled
       
       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,6 +51,7 @@ module Glimmer
       end
       
       def id
+        # TODO replace hash with autoincrement per name
         "#{name}-#{hash}"
       end
       
@@ -70,18 +85,26 @@ module Glimmer
         redraw
       end
       
-      def style=(css)
-        @style = css
+      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)
         return unless observation_request_to_event_mapping.keys.include?(keyword)
-        event = observation_request_to_event_mapping[keyword][:event]
-        event_handler = observation_request_to_event_mapping[keyword][: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)
+        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
       
@@ -171,7 +194,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