glimmer-web-components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: fd50603c60334cf474cca614126379cec3e53f4b6c60a61676dc7f0442fe6091
+  data.tar.gz: a47e9aa2c039a2f0991ac4214daf50f488ce548430f2fd08a5667abc8e11bcdd
+SHA512:
+  metadata.gz: 798423e6fb786976420d7ff6ffa5a54ed74ccb19836f0d8de40d28f0bff45455d7bb1fd4c0a5f70c478ee0e0c3ffefdf78d52184912dd7184d9704677ba1afed
+  data.tar.gz: 10474787dadfcb2620bc6fad046d4411ab966b04a97f929a45305a17bc4c7df79064cb53ca795a58d512f52134393a49dde273733731d3c45a3b702978324ab2

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Change Log
+
+## 0.1.0
+
+- multi_checkbox_dropdown Glimmer Web Component

data/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2025 Andy Maleh
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,92 @@
+# Glimmer Web Components
+## [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=40 />Glimmer Web Components](https://github.com/AndyObtiva/glimmer-dsl-web)
+[![Gem Version](https://badge.fury.io/rb/glimmer-web-components.svg)](http://badge.fury.io/rb/glimmer-web-components)
+[![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)
+
+This is a collection of reusable Glimmer Web Components for Glimmer DSL for Web, extracted from real Rails web applications.
+
+## Setup
+
+```
+gem install glimmer-web-components
+```
+
+## Usage
+
+### Multi Checkbox Dropdown:
+
+![multi checkbox dropdown](/screenshots/glimmer-web-components-multi-checkbox-dropdown.png)
+
+Add the following at the top:
+
+```ruby
+require 'glimmer/web/component/multi_checkbox_dropdown'
+```
+
+Then use the `multi_checkbox_dropdown` Glimmer Web Component in standard Glimmer HTML DSL code:
+
+```ruby
+  ...
+  markup {
+    div {
+      ...
+      multi_checkbox_dropdown(
+        values: SomePresenter::STATUS_FILTER_TYPES,
+        display_values: SomePresenter::STATUS_FILTER_TYPES.map { |value| I18n.t("status.#{value}") },
+        locale: I18n.locale,
+        width: 190,
+        translations: {
+          en: {select: I18n.t('form.status_filter', locale: :en)},
+          es: {select: I18n.t('form.status_filter', locale: :es)},
+        },
+      ) {
+        selected_values <=> [@some_presenter, :status_filters]
+      }
+      ...
+    }
+  }
+  ...
+```
+
+## Help
+
+## Issues
+
+You may submit [issues](https://github.com/AndyObtiva/glimmer-dsl-web/issues) on [GitHub](https://github.com/AndyObtiva/glimmer-dsl-web/issues).
+
+[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer-dsl-web/issues)
+
+## Chat
+
+If you need live help, try to [![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)
+
+## Feature Suggestions
+
+These features have been suggested. You might see them in a future version of Glimmer. You are welcome to contribute more feature suggestions.
+
+[TODO.md](TODO.md)
+
+## Change Log
+
+[CHANGELOG.md](CHANGELOG.md)
+
+## Contributing
+
+[CONTRIBUTING.md](CONTRIBUTING.md)
+
+## Contributors
+
+* [Andy Maleh](https://github.com/AndyObtiva) (Founder)
+
+[Click here to view contributor commits.](https://github.com/AndyObtiva/glimmer-web-components/graphs/contributors)
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2025 - Andy Maleh.
+See [LICENSE.txt](LICENSE.txt) for further details.
+
+--
+
+[<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=40 />](https://github.com/AndyObtiva/glimmer) Built for [Glimmer](https://github.com/AndyObtiva/glimmer) (DSL Framework).

data/VERSION

@@ -0,0 +1 @@
+0.1.0

data/glimmer-web-components.gemspec

@@ -0,0 +1,54 @@
+# Generated by juwelier
+# DO NOT EDIT THIS FILE DIRECTLY
+# Instead, edit Juwelier::Tasks in Rakefile, and run 'rake gemspec'
+# -*- encoding: utf-8 -*-
+# stub: glimmer-web-components 0.1.0 ruby lib
+
+Gem::Specification.new do |s|
+  s.name = "glimmer-web-components".freeze
+  s.version = "0.1.0"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
+  s.require_paths = ["lib".freeze]
+  s.authors = ["Andy Maleh".freeze]
+  s.date = "2025-03-10"
+  s.description = "This is a collection of reusable Glimmer Web Components for Glimmer DSL for Web, extracted from real Rails web applications.".freeze
+  s.email = "andy.am@gmail.com".freeze
+  s.extra_rdoc_files = [
+    "CHANGELOG.md",
+    "LICENSE.txt",
+    "README.md"
+  ]
+  s.files = [
+    "CHANGELOG.md",
+    "LICENSE.txt",
+    "README.md",
+    "VERSION",
+    "glimmer-web-components.gemspec",
+    "lib/glimmer-web-components.rb",
+    "lib/glimmer/web/component/multi_checkbox_dropdown.rb"
+  ]
+  s.homepage = "https://github.com/AndyObtiva/glimmer-dsl-web".freeze
+  s.licenses = ["MIT".freeze]
+  s.rubygems_version = "3.3.26".freeze
+  s.summary = "Glimmer Web Components".freeze
+
+  if s.respond_to? :specification_version then
+    s.specification_version = 4
+  end
+
+  if s.respond_to? :add_runtime_dependency then
+    s.add_runtime_dependency(%q<glimmer-dsl-web>.freeze, [">= 0.6.0"])
+    s.add_development_dependency(%q<minitest>.freeze, [">= 0"])
+    s.add_development_dependency(%q<rdoc>.freeze, ["~> 3.12"])
+    s.add_development_dependency(%q<juwelier>.freeze, ["~> 2.1.0"])
+    s.add_development_dependency(%q<simplecov>.freeze, [">= 0"])
+  else
+    s.add_dependency(%q<glimmer-dsl-web>.freeze, [">= 0.6.0"])
+    s.add_dependency(%q<minitest>.freeze, [">= 0"])
+    s.add_dependency(%q<rdoc>.freeze, ["~> 3.12"])
+    s.add_dependency(%q<juwelier>.freeze, ["~> 2.1.0"])
+    s.add_dependency(%q<simplecov>.freeze, [">= 0"])
+  end
+end
+

data/lib/glimmer/web/component/multi_checkbox_dropdown.rb

@@ -0,0 +1,272 @@
+require 'glimmer-dsl-web'
+
+require 'facets/hash/deep_merge'
+
+module Glimmer
+  module Web
+    module Component
+      class MultiCheckboxDropdown
+        include Glimmer::Web::Component
+        
+        TRANSLATIONS_DEFAULT = {
+          en: {
+            select: 'Select',
+            items_selected: 'items selected',
+          },
+          fr: {
+            select: 'Sélectionnez',
+            items_selected: 'articles sélectionnés',
+          },
+          es: {
+            select: 'Seleccione',
+            items_selected: 'artículos seleccionados',
+          },
+        }
+        
+        SELECTED_VALUES_FORMATTER_DEFAULT = ->(multi_checkbox_dropdown) {
+          selected_value_count = multi_checkbox_dropdown.selected_values&.size.to_i
+          case selected_value_count
+          when 0
+            multi_checkbox_dropdown.locale_translations[:select]
+          when 1, 2
+            multi_checkbox_dropdown.selected_display_values.join(', ')
+          else
+            items_selected_translation = multi_checkbox_dropdown.locale_translations[:items_selected]
+            "#{selected_value_count} #{items_selected_translation}"
+          end
+        }
+        
+        REGEXP_LOCALE_COUNTRY = /-|_/
+        
+        CSS_CLASS_CONTENT_HIDDEN = "#{MultiCheckboxDropdown.component_element_class}-content-hidden"
+        CSS_CLASS_CONTENT_UL = "#{MultiCheckboxDropdown.component_element_class}-ul"
+        
+        option :values, default: []
+        option :display_values
+        option :selected_values, default: []
+        option :locale, default: :en
+        option :translations, default: {}
+        option :selected_values_formatter, default: SELECTED_VALUES_FORMATTER_DEFAULT
+        option :width, default: 175
+        option :height, default: 40
+        option :margin, default: '0 15px 0 0'
+        option :text_align, default: :center
+        option :content_z_index, default: '1000'
+        option :content_label_padding_px, default: 10
+        option :content_background, default: :white
+        option :content_checkbox_size, default: 20
+        option :content_checkbox_option_hover_color, default: 'rgb(245, 245, 245)'
+        option :content_label_font_size, default: 1.rem
+        
+        attr_accessor :display_content
+        
+        event :change # enables consumers to hook an on_change do; end listener
+        
+        before_render do
+          self.display_values ||= values
+          self.translations = TRANSLATIONS_DEFAULT.deep_merge(translations)
+          self.display_content = false
+        end
+        
+        after_render do
+          setup_observer_so_clicking_outside_displayed_content_closes_content
+        end
+      
+        markup {
+          div(style: {position: :relative}) {
+            multi_checkbox_select
+            multi_checkbox_content
+          }
+        }
+        
+        style { # static global CSS styles shared between all instances of this component
+          rule(".#{CSS_CLASS_CONTENT_HIDDEN}") {
+            display :none
+          }
+        }
+        
+        def locale_translations
+          the_translations = translations[locale.to_s.downcase.to_sym]
+          if the_translations.nil? && locale.to_s.match(REGEXP_LOCALE_COUNTRY)
+            # treat fr-CA as fr, or en-US as en
+            partial_locale = locale.to_s.split(REGEXP_LOCALE_COUNTRY).first.downcase.to_sym
+            the_translations = translations[partial_locale]
+          end
+          the_translations || {}
+        end
+        
+        def selected_indexes
+          selected_values.map { |selected_value| values.index(selected_value) }
+        end
+        
+        def selected_display_values
+          selected_indexes.map { |selected_index| display_values[selected_index] }
+        end
+        
+        def display_value_for(value)
+          display_values[values.index(value)]
+        end
+        
+        def toggle_content(display = nil)
+          new_value = display.nil? ? !self.display_content : display
+          self.display_content = new_value
+        end
+        
+        private
+        
+        def multi_checkbox_select
+          @multi_checkbox_select = select(style: {height:, width:, margin:, text_align:}) {
+            content(self, :selected_values) { # re-renders automatically upon change to self.selected_values
+              placeholder_option_text = formatted_selected_values
+              option(value: placeholder_option_text) {
+                placeholder_option_text
+              }
+            }
+            
+            onkeydown do |event|
+              case event.key_code
+              when 40 # down
+                event.prevent_default
+                self.display_content = true if !self.display_content
+              when 32 # space
+                event.prevent_default
+                toggle_content
+              when 27 # escape
+                event.prevent_default
+                self.display_content = false
+              end
+            end
+            
+            onmousedown do |event|
+              event.prevent_default
+              toggle_content
+            end
+          }
+        end
+          
+        def formatted_selected_values
+          selected_values_formatter.call(self)
+        end
+        
+        def multi_checkbox_content
+          @multi_checkbox_content = div(style: {position: :absolute, z_index: content_z_index, width:, background: content_background, box_shadow: '0 6px 12px rgba(0, 0, 0, 0.175)'}) {
+            class_name(CSS_CLASS_CONTENT_HIDDEN) <= [self, :display_content, on_read: :!]
+            
+            content(self, :selected_values) { # re-renders automatically upon change to self.selected_values
+              ul(class: CSS_CLASS_CONTENT_UL, style: {list_style_type: :none, padding_top: 10, padding_left: 0}) {
+                style { # dynamic CSS styles per component instance, so created before being used in li elements below
+                  rule("ul.#{CSS_CLASS_CONTENT_UL} li:hover") {
+                    background content_checkbox_option_hover_color
+                  }
+                }
+                
+                action_bar_li
+                
+                values.each do |value|
+                  value_checkbox_li(value)
+                end
+              }
+            }
+          }
+        end
+        
+        def action_bar_li
+          are_all_values_selected = (values & selected_values) == values
+          
+          li(class: "#{MultiCheckboxDropdown.component_element_class}-li-select-all-values",
+             style: {background: content_checkbox_option_hover_color, padding: '10px 0'}) {
+            button(type: 'button', class: 'p-multiselect-close p-link',
+                   style: {float: :right, margin_top: -5, margin_right: 10},
+                   'aria-label': 'Close', 'data-pc-section': 'closebutton') {
+              close_x_icon_svg
+              
+              onclick do
+                self.display_content = false
+              end
+            }
+            
+            input(type: 'checkbox', value: are_all_values_selected,
+                  style: {width: content_checkbox_size, height: content_checkbox_size,
+                  display: :block, vertical_align: :middle,
+                  margin_left: content_label_padding_px*2}) { |input_object|
+              checked are_all_values_selected
+              
+              onchange do |event|
+                if are_all_values_selected
+                  self.selected_values = []
+                else
+                  self.selected_values = values.dup
+                end
+                notify_listeners(:change, selected_values)
+              end
+            }
+          }
+        end
+        
+        def close_x_icon_svg
+          svg(width: '14', height: '14', viewbox: '0 0 14 14', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', class: 'p-icon p-multiselect-close-icon', 'aria-hidden': 'true', 'data-pc-section': 'closeicon') {
+            path(d: 'M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z', fill: 'currentColor')
+          }
+        end
+        
+        def value_checkbox_li(value)
+          is_value_selected = selected_values.include?(value)
+          li_class = is_value_selected ? :selected : ''
+          
+          li(class: li_class) {
+            input_id = "#{MultiCheckboxDropdown.component_element_class}-#{object_id}-input-#{value}"
+            
+            input(type: 'checkbox', id: input_id, value: is_value_selected,
+                  style: {width: content_checkbox_size, height: content_checkbox_size,
+                  display: :block, vertical_align: :middle, float: :left,
+                  margin: content_label_padding_px, margin_left: content_label_padding_px*2}) { |input_object|
+              checked is_value_selected
+              
+              onchange do |event|
+                selected_value_changed(value, input_object.checked)
+              end
+            }
+            
+            label(for: input_id, style: {padding: content_label_padding_px, font_size: content_label_font_size,
+                  display: :block, vertical_align: :middle, width: 100.%}) {
+              display_value_for(value)
+            }
+          }
+        end
+        
+        def selected_value_changed(value, selected)
+          new_selected_values = selected_values.dup
+          if selected
+            new_selected_values << value
+          else
+            new_selected_values.delete(value)
+          end
+          new_selected_values.sort_by! { |value| values.index(value) }
+          self.selected_values = new_selected_values
+          notify_listeners(:change, selected_values)
+        end
+        
+        def setup_observer_so_clicking_outside_displayed_content_closes_content
+          Element['body'].on('click') do |event|
+            x = event.page_x || event.touch_x
+            y = event.page_y || event.touch_y
+            if display_content && location_outside_element?(x, y, @multi_checkbox_select) && location_outside_element?(x, y, @multi_checkbox_content)
+              event.prevent_default
+              self.display_content = false
+            end
+          end
+        end
+        
+        def location_inside_element?(x, y, element)
+          element_bounding_box = element.get_bounding_client_rect
+          x.between?(element_bounding_box.left, element_bounding_box.left + element_bounding_box.width) &&
+            y.between?(element_bounding_box.top, element_bounding_box.top + element_bounding_box.height)
+        end
+        
+        def location_outside_element?(x, y, element)
+          !location_inside_element?(x, y, element)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer-web-components.rb

@@ -0,0 +1,10 @@
+require 'opal'
+
+GLIMMER_WEB_COMPONENTS_ROOT = File.expand_path('../..', __FILE__)
+GLIMMER_WEB_COMPONENTS_LIB = File.join(GLIMMER_WEB_COMPONENTS_ROOT, 'lib')
+ 
+$LOAD_PATH.unshift(GLIMMER_WEB_COMPONENTS_LIB)
+
+if RUBY_ENGINE == 'opal'
+  require 'glimmer/web/component/multi_checkbox_dropdown'
+end

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: glimmer-web-components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Andy Maleh
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2025-03-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: glimmer-dsl-web
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.6.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.6.0
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rdoc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.12'
+- !ruby/object:Gem::Dependency
+  name: juwelier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: This is a collection of reusable Glimmer Web Components for Glimmer DSL
+  for Web, extracted from real Rails web applications.
+email: andy.am@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- VERSION
+- glimmer-web-components.gemspec
+- lib/glimmer-web-components.rb
+- lib/glimmer/web/component/multi_checkbox_dropdown.rb
+homepage: https://github.com/AndyObtiva/glimmer-dsl-web
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.26
+signing_key:
+specification_version: 4
+summary: Glimmer Web Components
+test_files: []