glimmer-dsl-opal 0.0.9 → 0.5.0

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

@@ -0,0 +1,81 @@
+require 'glimmer/swt/widget_proxy'
+
+module Glimmer
+  module SWT
+    class RadioProxy < WidgetProxy
+      STYLE=<<~CSS
+        .radio {
+          display: inline;
+        }
+        .radio-label {
+          display: inline;
+        }
+        .radio-container {
+        }
+      CSS
+      
+      def text
+        label_dom_element.html
+      end
+      
+      def text=(value)
+        label_dom_element.html(value)
+      end
+      
+      def selection
+        dom_element.prop('checked')
+      end
+      
+      def selection=(value)
+        dom_element.prop('checked', value)
+      end
+      
+      def element
+        'input'
+      end
+      
+      def label_id
+        "#{id}-label"
+      end
+      
+      def label_name
+        "#{name}-label"
+      end
+      
+      def label_path
+        "#{parent_path} ##{label_id}"
+      end
+      
+      def label_dom_element
+        Document.find(label_path)
+      end
+      
+      def container_id
+        "#{id}-container"
+      end
+
+      def container_name
+        "#{name}-container"
+      end
+
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'change'
+          },
+        }
+      end
+      
+      def dom
+        @dom ||= html {
+          span(id: container_id, class: container_name) {
+            input(type: 'radio', id: id, class: name, name: parent&.id)
+            label(id: label_id, class: label_name, for: id) {
+              text
+            }
+          }
+        }.to_s
+      end
+    end
+  end
+end

data/lib/glimmer/swt/row_layout_proxy.rb

@@ -0,0 +1,128 @@
+require 'glimmer/swt/layout_proxy'
+
+module Glimmer
+  module SWT
+    class RowLayoutProxy < LayoutProxy
+      include Glimmer
+      
+      STYLE = <<~CSS
+        .row-layout {
+          display: flex;
+          align-items: flex-start;
+        }
+                
+        .row-layout-pack-false {
+          display: initial;
+        }
+                
+        .row-layout-horizontal {
+          flex-direction: row;
+        }
+        
+        .row-layout-horizontal.row-layout-pack-false {
+          flex-direction: unset;
+        }
+        
+        .row-layout-vertical {
+          flex-direction: column;
+        }
+        
+        .row-layout-vertical.row-layout-pack {
+          flex-direction: none;
+        }
+      CSS
+    
+      attr_reader :type, :margin_width, :margin_height, :margin_top, :margin_right, :margin_bottom, :margin_left, :spacing, :pack
+    
+      def initialize(parent, args)
+        super(parent, args)
+        @type = @args.first || :horizontal
+        @marign_width = 15
+        @margin_height = 15
+        self.pack = true
+        @parent.dom_element.add_class('row-layout')
+        @parent.dom_element.add_class(horizontal? ? 'row-layout-horizontal' : 'row-layout-vertical')
+      end
+      
+      def horizontal?
+        @type == :horizontal
+      end
+
+      def vertical?
+        @type == :vertical
+      end
+      
+      def dom(widget_dom)
+        dom_result = widget_dom
+        dom_result += '<br />' if vertical? && @pack
+        dom_result
+      end
+
+      def pack=(value)
+        @pack = value
+        if @pack
+          @parent.dom_element.remove_class('row-layout-pack-false')
+        else
+          @parent.dom_element.add_class('row-layout-pack-false')
+        end
+      end
+      
+      def margin_width=(pixels)
+        @margin_width = pixels
+        # Using padding for width since margin-right isn't getting respected with width 100%
+        @parent.dom_element.css('padding-left', @margin_width)
+        @parent.dom_element.css('padding-right', @margin_width)
+      end
+      
+      def margin_height=(pixels)
+        @margin_height = pixels
+        @parent.dom_element.css('padding-top', @margin_height)
+        @parent.dom_element.css('padding-bottom', @margin_height)
+      end
+      
+      def margin_top=(pixels)
+        @margin_top = pixels
+        # Using padding for width since margin-right isn't getting respected with width 100%
+        @parent.dom_element.css('padding-top', @margin_top)
+      end
+      
+      def margin_right=(pixels)
+        @margin_right = pixels
+        @parent.dom_element.css('padding-right', @margin_right)
+      end
+      
+      def margin_bottom=(pixels)
+        @margin_bottom = pixels
+        # Using padding for width since margin-right isn't getting respected with width 100%
+        @parent.dom_element.css('padding-bottom', @margin_bottom)
+      end
+      
+      def margin_left=(pixels)
+        @margin_left = pixels
+        @parent.dom_element.css('padding-left', @margin_left)
+      end
+      
+      def spacing=(spacing)
+        @spacing = spacing.to_i
+        # TODO implement changes to accomodate layout_data in the future
+        @parent.style_element.html css {
+          s("##{@parent.id} > *") {
+            if horizontal?
+              margin_right "#{@spacing}px"
+            elsif vertical?
+              margin_bottom "#{@spacing}px"
+            end
+          }
+          s("##{@parent.id} > :last-child") {
+            if horizontal?
+              margin_right 0
+            elsif vertical?
+              margin_bottom 0
+            end
+          }
+        }.to_s
+      end
+      
+    end
+  end
+end

data/lib/glimmer/swt/scrolled_composite_proxy.rb

@@ -0,0 +1,20 @@
+require 'glimmer/swt/grid_layout_proxy'
+require 'glimmer/swt/widget_proxy'
+
+module Glimmer
+  module SWT
+    class ScrolledCompositeProxy < CompositeProxy
+      STYLE = <<~CSS
+        .scrolled-composite {
+        }
+      CSS
+      
+      # TODO set overflow-y and overflow-x based on :v_scroll and :h_scroll styles.... though consider also that it might not be needed in web browsers where scrollbars are always present
+      #  height: 100px;
+      #  overflow-y: auto;       
+      
+    end
+    
+  end
+  
+end

data/lib/glimmer/swt/shell_proxy.rb

@@ -0,0 +1,260 @@
+require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/display_proxy'
+require 'glimmer/swt/point'
+
+module Glimmer
+  module SWT
+    class ShellProxy < CompositeProxy
+      # TODO consider renaming to ShellProxy to match SWT API
+      attr_reader :minimum_size
+    
+      WIDTH_MIN = 130
+      HEIGHT_MIN = 0
+      
+      def initialize(args)
+        @args = args
+        @children = []
+#         Document.ready? do end # TODO consider embedding this jQuery call in so outside consumers don't have to use it
+        Document.find('body').empty unless ENV['RUBY_ENV'] == 'test'
+        render
+        @layout = FillLayoutProxy.new(self, [])
+        @layout.margin_width = 0
+        @layout.margin_height = 0
+        self.minimum_size = Point.new(WIDTH_MIN, HEIGHT_MIN)
+      end
+      
+      def element
+        'div'
+      end
+      
+      def parent_path
+        'body'
+      end
+
+      def text
+        $document.title
+      end
+
+      def text=(value)
+        Document.title = value
+      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)
+        return if @minimum_size.nil?
+        dom_element.css('min-width', "#{@minimum_size.x}px")
+        dom_element.css('min-height', "#{@minimum_size.y}px")
+      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 {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+          }
+          .shell {
+            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] + css_classes.to_a).join(' ')
+        @dom ||= html {
+          div(id: body_id, class: body_class) {
+            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
+            }
+            style(class: 'fill-layout-style') {
+              Glimmer::SWT::FillLayoutProxy::STYLE
+            }
+            style(class: 'row-layout-style') {
+              Glimmer::SWT::RowLayoutProxy::STYLE
+            }
+            style(class: 'grid-layout-style') {
+              Glimmer::SWT::GridLayoutProxy::STYLE
+            }
+            style(class: 'checkbox-style') {
+              Glimmer::SWT::CheckboxProxy::STYLE
+            }
+            style(class: 'radio-style') {
+              Glimmer::SWT::RadioProxy::STYLE
+            }
+            style(class: 'scrolled-composite-style') {
+              Glimmer::SWT::ScrolledCompositeProxy::STYLE
+            }
+          }
+        }.to_s
+      end
+      
+      def open
+        # TODO consider the idea of delaying rendering till the open method
+        # TODO make it start as hidden and show shell upon open
+        Glimmer::SWT::DisplayProxy.instance.shells << self
+      end
+    end
+  end
+end