Regularise how Webview handles styling, and add show/hide to Lacci

examples/show_hide.rb

@@ -0,0 +1,6 @@
+Shoes.app do
+  @b1 = button("First")
+  @b2 = button("Hide First") { @b1.hide }
+  @b3 = button("Show everybody") { @b1.show; @b2.show; @b3.show; @b4.show }
+  @b4 = button("Toggle Hide-First") { @b2.toggle }
+end

lacci/lib/shoes/widget.rb

@@ -72,6 +72,9 @@ def display_property_name?(name)
       end
     end
 
+    # Shoes uses a "hidden" style property for hide/show
+    display_property :hidden
+
     def initialize(*args, **kwargs)
       log_init("Widget")
 
@@ -138,6 +141,7 @@ def remove_child(child)
     end
 
     # Do not call directly, use set_parent
+    # Can this be private?
     def add_child(child)
       @children ||= []
       @children << child
@@ -151,18 +155,49 @@ def destroy
 
     alias_method :remove, :destroy
 
+    # Remove all children from this widget. If a block
+    # is given, call the block to replace the children with
+    # new contents from that block.
+    #
+    # Should only be called on Slots, which can
+    # have children.
+    #
+    # @yield The block to call to replace the contents of the widget (optional)
+    # @return [void]
     def clear(&block)
       @children.dup.each(&:destroy)
       append(&block) if block_given?
+      nil
     end
 
+    # Call the block to append new children to a Slot.
+    #
+    # Should only be called on a Slot, since only Slots can have children.
+    #
+    # @yield the block to call to replace children; will be called on the Shoes::App, appending to the called Slot as the current slot
+    # @return [void]
     def append(&block)
       raise("append requires a block!") unless block_given?
       raise("Don't append to something that isn't a slot!") unless self.is_a?(Shoes::Slot)
 
       Shoes::App.instance.with_slot(self, &block)
     end
 
+    # Hide the widget.
+    def hide
+      self.hidden = true
+    end
+
+    # Show the widget.
+    def show
+      self.hidden = false
+    end
+
+    # Hide the widget if it is currently shown. Show it if it is currently hidden.
+    def toggle
+      self.hidden = !self.hidden
+    end
+
     # We use method_missing for widget-creating methods like "button",
     # and also to auto-create display-property getters and setters.
     def method_missing(name, *args, **kwargs, &block)

lacci/lib/shoes/widgets/alert.rb

@@ -10,7 +10,7 @@ def initialize(text)
       super
 
       bind_self_event("click") do
-        destroy_self
+        remove
       end
 
       create_display_widget

lacci/lib/shoes/widgets/para.rb

@@ -34,22 +34,6 @@ def replace(*children)
       # This should signal the display widget to change
       self.text_items = text_children_to_items(@text_children)
     end
-
-    def hide
-      # idempotent
-      return unless @hidden_text_items.empty?
-
-      @hidden_text_items = self.text_items
-      self.text_items = []
-    end
-
-    def show
-      # idempotent
-      return unless self.text_items.empty?
-
-      self.text_items = @hidden_text_items
-      @hidden_text_items = []
-    end
   end
 end
 

lib/scarpe/cats_cradle.rb

@@ -24,6 +24,7 @@ module Scarpe::Test
   # call some of *those* methods.
   class CCProxy
     attr_reader :display
+    attr_reader :obj
 
     def initialize(obj)
       @obj = obj
@@ -165,6 +166,10 @@ def on_event(event, &block)
       end
     end
 
+    def proxy_for(shoes_widget)
+      CCProxy.new(shoes_widget)
+    end
+
     def wait(promise)
       raise("Must supply a promise to wait!") unless promise.is_a?(::Scarpe::Promise)
 

lib/scarpe/wv/alert.rb

@@ -23,8 +23,9 @@ def element
       end
     end
 
-    private
+    protected
 
+    # If the whole widget is hidden, the parent style adds display:none
     def overlay_style
       {
         position: "fixed",
@@ -38,7 +39,7 @@ def overlay_style
         display: "flex",
         "align-items": "center",
         "justify-content": "center",
-      }
+      }.merge(style)
     end
 
     def modal_style

lib/scarpe/wv/arc.rb

@@ -17,17 +17,19 @@ def element(&block)
       end
     end
 
-    private
+    protected
 
     def style
-      {
+      super.merge({
         left: "#{@left}px",
         top: "#{@top}px",
         width: "#{@width}px",
         height: "#{@height}px",
-      }
+      })
     end
 
+    private
+
     def arc_path
       center_x = @width / 2
       center_y = @height / 2

lib/scarpe/wv/button.rb

@@ -20,24 +20,26 @@ def element
       end
     end
 
-    private
+    protected
 
     def style
-      styles = {}
-      styles["background-color"] = @color
-      styles["padding-top"] = @padding_top
-      styles["padding-bottom"] = @padding_bottom
+      styles = super
+
+      styles[:"background-color"] = @color
+      styles[:"padding-top"] = @padding_top
+      styles[:"padding-bottom"] = @padding_bottom
       styles[:color] = @text_color
       styles[:width] = Dimensions.length(@width) if @width
       styles[:height] = Dimensions.length(@height) if @height
-      styles["font-size"] = @font_size
+      styles[:"font-size"] = @font_size
 
       styles[:top] = Dimensions.length(@top) if @top
       styles[:left] = Dimensions.length(@left) if @left
       styles[:position] = "absolute" if @top || @left
-      styles["font-size"] = Dimensions.length(font_size) if @size
-      styles["font-family"] = @font if @font
-      styles["color"] = rgb_to_hex(@stroke) if @stroke
+      styles[:"font-size"] = Dimensions.length(font_size) if @size
+      styles[:"font-family"] = @font if @font
+      styles[:color] = rgb_to_hex(@stroke) if @stroke
+
       styles
     end
 

lib/scarpe/wv/check.rb

@@ -22,7 +22,7 @@ def properties_changed(changes)
 
     def element
       HTML.render do |h|
-        h.input(type: :checkbox, id: html_id, onclick: handler_js_code("click"), value: "hmm #{text}", checked: @checked)
+        h.input(type: :checkbox, id: html_id, onclick: handler_js_code("click"), value: "hmm #{text}", checked: @checked, style:)
       end
     end
   end

lib/scarpe/wv/edit_box.rb

@@ -30,15 +30,13 @@ def element
       end
     end
 
-    private
+    protected
 
     def style
-      styles = {}
-
-      styles[:height] = Dimensions.length(height)
-      styles[:width] = Dimensions.length(width)
-
-      styles.compact
+      super.merge({
+        height: Dimensions.length(height),
+        width: Dimensions.length(width),
+      }.compact)
     end
   end
 end

lib/scarpe/wv/edit_line.rb

@@ -30,10 +30,10 @@ def element
       end
     end
 
-    private
+    protected
 
     def style
-      styles = {}
+      styles = super
 
       styles[:width] = Dimensions.length(@width) if @width
 

lib/scarpe/wv/flow.rb

@@ -9,16 +9,14 @@ def initialize(properties)
     protected
 
     def style
-      styles = super
-
-      styles[:display] = "flex"
-      styles["flex-direction"] = "row"
-      styles["flex-wrap"] = "wrap"
-      styles["align-content"] = "flex-start"
-      styles["justify-content"] = "flex-start"
-      styles["align-items"] = "flex-start"
-
-      styles
+      {
+        display: "flex",
+        "flex-direction": "row",
+        "flex-wrap": "wrap",
+        "align-content": "flex-start",
+        "justify-content": "flex-start",
+        "align-items": "flex-start",
+      }.merge(super)
     end
   end
 end

lib/scarpe/wv/image.rb

@@ -23,10 +23,10 @@ def element
       end
     end
 
-    private
+    protected
 
     def style
-      styles = {}
+      styles = super
 
       styles[:width] = Dimensions.length(@width) if @width
       styles[:height] = Dimensions.length(@height) if @height

lib/scarpe/wv/line.rb

@@ -16,13 +16,13 @@ def element
       end
     end
 
-    private
+    protected
 
     def style
-      {
+      super.merge({
         left: "#{@left}px",
         top: "#{@top}px",
-      }
+      })
     end
 
     def line_style

lib/scarpe/wv/link.rb

@@ -19,10 +19,13 @@ def element
     end
 
     def attributes
+      s = style
+      s[:display] ||= "block" # ensure non-empty style hash
       {
         id: html_id,
         href: @click,
         onclick: (handler_js_code("click") if @has_block),
+        style: s,
       }.compact
     end
   end

lib/scarpe/wv/list_box.rb

@@ -36,15 +36,15 @@ def element
       end
     end
 
-    private
+    protected
 
     def style
-      styles = {}
+      styles = super
 
       styles[:height] = Dimensions.length(height) if height
       styles[:width] = Dimensions.length(width) if width
 
-      styles.compact
+      styles
     end
   end
 end

lib/scarpe/wv/para.rb

@@ -57,6 +57,22 @@ def to_html
       element { child_markup }
     end
 
+    protected
+
+    def style
+      super.merge({
+        color: rgb_to_hex(@stroke),
+        "font-size": font_size,
+        "font-family": @font,
+      }.compact)
+    end
+
+    def font_size
+      font_size = @size.is_a?(Symbol) ? SIZES[@size] : @size
+
+      Dimensions.length(font_size)
+    end
+
     private
 
     def child_markup
@@ -72,19 +88,5 @@ def child_markup
     def options
       @html_attributes.merge(id: html_id, style: style)
     end
-
-    def style
-      {
-        "color" => rgb_to_hex(@stroke),
-        "font-size" => font_size,
-        "font-family" => @font,
-      }.compact
-    end
-
-    def font_size
-      font_size = @size.is_a?(Symbol) ? SIZES[@size] : @size
-
-      Dimensions.length(font_size)
-    end
   end
 end

lib/scarpe/wv/radio.rb

@@ -21,7 +21,7 @@ def properties_changed(changes)
 
     def element
       HTML.render do |h|
-        h.input(type: :radio, id: html_id, onclick: handler_js_code("click"), name: group_name, value: "hmm #{text}", checked: @checked)
+        h.input(type: :radio, id: html_id, onclick: handler_js_code("click"), name: group_name, value: "hmm #{text}", checked: @checked, style: style)
       end
     end