glimmer-dsl-opal 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 62c893d845b584b5b303dd5070b67b5042656159dbc1e4124fcc20fdaa469a8e
-  data.tar.gz: 192f1904a065a6add1e2cffba0a3514dc8b178746b0f6b350e7973d88a9ac86d
+  metadata.gz: cbf51689c9728f9af6a7670f703584c79def82be3f74085556f91cbc9f02cd51
+  data.tar.gz: e73b3c81aa113ca61e080a5c0fce7299c0812c04883aaf8864bdec5dc80fad00
 SHA512:
-  metadata.gz: 895dda95906afa3738c34c927cc85600bcfb13a04f4e71ddc261221eeb6c0043f2b10f95561e9b03895a3ec7aa2b4c1a90c3c54667aacbc30b307fabdb569654
-  data.tar.gz: da8bf5fa194f983e53190d45246dfecb6add28fd20bec9ea1e2cf413716ad44f256d41674882f59823b32d1576964bdf387b96ef683fdf90196469137757a18d
+  metadata.gz: 98c27b51a8de0e218ed4e888660fb6dbf110deda9b1444b7fd75dc72d5477a5eaa277d2a64d92f223bcf0d3b8c398bf2da369a26e000c2544c34952c9fd7f8ad
+  data.tar.gz: 05725471322ba4a5e55115360fa2a970e69c6f076c36480b3354c86968ac796e63c0e0c1250ca2639f100a329363c51fc7a0254b66a918aa7ed4130f538c2ce4

data/README.md

@@ -1,5 +1,4 @@
-
-# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=65 /> Glimmer DSL for Opal 0.0.5 (Web GUI for Desktop Apps)
+# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=65 /> Glimmer DSL for Opal 0.0.6 (Web GUI for Desktop Apps)
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -7,13 +6,14 @@
 
 It enables running [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps on the web via [Rails](https://rubyonrails.org/) 5 and [Opal](https://opalrb.com/) 1.
 
-NOTE: Alpha Version 0.0.5 only supports capabilities below (detailed under [Examples](#examples)):
+NOTE: Alpha Version 0.0.6 only supports Hello sample capabilities (detailed under [Examples](#examples)):
 - [Hello, World!](#hello-world)
 - [Hello, Combo!](#hello-combo)
 - [Hello, Computed!](#hello-computed)
 - [Hello, List Single Selection!](#hello-list-single-selection)
 - [Hello, List Multi Selection!](#hello-list-multi-selection)
 - [Hello, Browser!](#hello-browser)
+- [Hello, Tab!](#hello-tab)
 
 Other Glimmer DSL gems:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (Desktop GUI)
@@ -31,7 +31,10 @@ The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glim
 - `text`
 - `composite`
 - `list` & `list(:multi)`
-- `browser`
+- `tab_folder`
+- `tab_item`
+- `on_widget_selected`
+- `on_modify_text`
 - `grid_layout`
 - `layout_data`
 
@@ -56,7 +59,7 @@ Add the following to `Gemfile` (NOTE: if you run into issues, they are probably
 ```
 gem 'opal-rails'
 gem 'opal-browser'
-gem 'glimmer-dsl-opal', '~> 0.0.5', require: false
+gem 'glimmer-dsl-opal', '~> 0.0.6', require: false
 ```
 
 Edit `config/initializers/assets.rb` and add:
@@ -64,6 +67,12 @@ Edit `config/initializers/assets.rb` and add:
 Opal.use_gem 'glimmer-dsl-opal'
 ```
 
+Add the following line to the top of an empty `app/assets/javascripts/application.js.rb`
+
+```ruby
+require 'glimmer-dsl-opal' # brings opal and opal browser too
+```
+
 ## Examples
 
 ### Hello, World!
@@ -71,8 +80,6 @@ Opal.use_gem 'glimmer-dsl-opal'
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
 ```ruby
-require 'glimmer-dsl-opal' # brings opal and opal browser too
-
 include Glimmer
    
 shell {
@@ -85,7 +92,7 @@ shell {
 
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for Opal Hello World](https://github.com/AndyObtiva/glimmer/blob/master/images/glimmer-hello-world.png)
+![Glimmer DSL for SWT Hello World](https://github.com/AndyObtiva/glimmer/blob/master/images/glimmer-hello-world.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -105,8 +112,6 @@ You should see "Hello, World!"
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
 ```ruby
-require 'glimmer-dsl-opal' # brings opal and opal browser too
-
 class Person
   attr_accessor :country, :country_options
   
@@ -144,7 +149,7 @@ HelloCombo.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for Opal Hello Combo](https://github.com/AndyObtiva/glimmer/blob/master/images/glimmer-hello-combo.png)
+![Glimmer DSL for SWT Hello Combo](https://github.com/AndyObtiva/glimmer/blob/master/images/glimmer-hello-combo.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -164,8 +169,6 @@ You should see "Hello, Combo!"
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
 ```ruby
-require 'glimmer-dsl-opal' # brings opal and opal browser too
-
 class HelloComputed
   class Contact
     attr_accessor :first_name, :last_name, :year_of_birth
@@ -258,7 +261,7 @@ HelloComputed.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for Opal Hello Computed](https://github.com/AndyObtiva/glimmer/blob/master/images/glimmer-hello-computed.png)
+![Glimmer DSL for SWT Hello Computed](https://github.com/AndyObtiva/glimmer/blob/master/images/glimmer-hello-computed.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -315,7 +318,7 @@ HelloListSingleSelection.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for Opal Hello List Single Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-single-selection.png)
+![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-single-selection.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -382,7 +385,7 @@ HelloListMultiSelection.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for Opal Hello List Multi Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-multi-selection.png)
+![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-multi-selection.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -413,7 +416,7 @@ shell {
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for Opal Hello Browser](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-browser.png)
+![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-browser.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -428,6 +431,55 @@ You should see "Hello, Browser!"
 
 ![Glimmer DSL for Opal Hello Browser](images/glimmer-dsl-opal-hello-browser.png)
 
+### Hello, Tab!
+
+Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
+
+```ruby
+class HelloTab
+  include Glimmer
+  def launch
+    shell {
+      text "Hello, Tab!"
+      tab_folder {
+        tab_item {
+          text "English"
+          label {
+            text "Hello, World!"
+          }
+        }
+        tab_item {
+          text "French"
+          label {
+            text "Bonjour, Univers!"
+          }
+        }
+      }
+    }.open
+  end
+end
+
+HelloTab.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-tab-english.png)
+![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-tab-french.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Tab!"
+
+![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
+![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
+
 ## Help
 
 ### Issues

data/VERSION

@@ -1 +1 @@
-0.0.5
+0.0.6

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

@@ -17,6 +17,8 @@ require 'glimmer/dsl/opal/grid_layout_expression'
 require 'glimmer/dsl/opal/text_expression'
 require 'glimmer/dsl/opal/list_expression'
 require 'glimmer/dsl/opal/browser_expression'
+require 'glimmer/dsl/opal/tab_folder_expression'
+require 'glimmer/dsl/opal/tab_item_expression'
 require 'glimmer/dsl/opal/layout_data_expression'
 require 'glimmer/dsl/opal/list_selection_data_binding_expression'
 

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

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

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

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

data/lib/glimmer/opal/div_proxy.rb

@@ -3,14 +3,16 @@ 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 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

@@ -66,6 +66,44 @@ module Glimmer
               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;
+              }
             </style>
             CSS
           }

data/lib/glimmer/opal/element_proxy.rb

@@ -5,18 +5,19 @@ module Glimmer
     class ElementProxy
       include Glimmer
       include PropertyOwner
-      attr_reader :parent, :args, :css_classes, :style
+      attr_reader :parent, :args, :css_classes, :css, :children
       
       def initialize(parent, args)
         @parent = parent
         @args = args
-        @children = []
-        @parent.add_child(self)
+        @children = Set.new
         @css_classes = Set.new
+        @css = ''
+        @parent.add_child(self)
       end
 
       def add_child(child)
-        return if @children.include?(child)
+#         return if @children.include?(child)
         @children << child
         dom << child.dom
       end
@@ -29,6 +30,10 @@ module Glimmer
         else
           dom
         end
+        @children.each do |child|
+          child.redraw
+          add_child(child)
+        end
       end
       
       # Subclasses must override with their own mappings
@@ -41,6 +46,7 @@ module Glimmer
       end
       
       def id
+        # TODO replace hash with autoincrement per name
         "#{name}-#{hash}"
       end
       
@@ -74,10 +80,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
       

data/lib/glimmer/opal/grid_layout_proxy.rb

@@ -11,6 +11,7 @@ module Glimmer
         @args = args
         @parent.add_css_class('grid-layout')
         @vertical_spacing = 10
+        @num_columns = 1
         reapply
       end
 
@@ -39,7 +40,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/input_proxy.rb

@@ -30,7 +30,7 @@ module Glimmer
       def dom
         input_text = @text
         input_id = id
-        input_style = style
+        input_style = css
         input_args = @args.last
         @dom ||= DOM {
           input input_args.merge(id: input_id, style: input_style, value: input_text)

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

@@ -23,7 +23,7 @@ module Glimmer
       end
 
       def reapply
-#         @parent.style = <<~CSS
+#         @parent.css = <<~CSS
 #         CSS
       end
     end

data/lib/glimmer/opal/list_proxy.rb

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

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,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'

data/lib/samples/hello/hello_tab.rb

@@ -2,7 +2,7 @@ class HelloTab
   include Glimmer
   def launch
     shell {
-      text "Hello Tab"
+      text "Hello, Tab!"
       tab_folder {
         tab_item {
           text "English"
@@ -13,7 +13,7 @@ class HelloTab
         tab_item {
           text "French"
           label {
-            text "Bonjour Univers!"
+            text "Bonjour, Univers!"
           }
         }
       }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-opal
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - AndyMaleh
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-18 00:00:00.000000000 Z
+date: 2020-06-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -190,6 +190,8 @@ files:
 - lib/glimmer/dsl/opal/list_selection_data_binding_expression.rb
 - lib/glimmer/dsl/opal/property_expression.rb
 - lib/glimmer/dsl/opal/shell_expression.rb
+- lib/glimmer/dsl/opal/tab_folder_expression.rb
+- lib/glimmer/dsl/opal/tab_item_expression.rb
 - lib/glimmer/dsl/opal/text_expression.rb
 - lib/glimmer/dsl/opal/widget_listener_expression.rb
 - lib/glimmer/dsl/parent_expression.rb
@@ -210,6 +212,8 @@ files:
 - lib/glimmer/opal/point.rb
 - lib/glimmer/opal/property_owner.rb
 - lib/glimmer/opal/select_proxy.rb
+- lib/glimmer/opal/tab_folder.rb
+- lib/glimmer/opal/tab_item.rb
 - lib/samples/elaborate/contact_manager.rb
 - lib/samples/elaborate/contact_manager/contact.rb
 - lib/samples/elaborate/contact_manager/contact_manager_presenter.rb