voom-presenters 0.1.13 → 2.0.3

data/app/demo/events/nav/drawer.pom

@@ -1,15 +1,19 @@
 Voom::Presenters.define(:events_drawer) do
   helpers Voom::Presenters::Helpers::Inflector
+
+  events = %i[field_level_events form_level_events tagged_input parallel_events].sort
+  actions = %i[dialog replaces loads toggle_visibility snackbar updates deletes posts clear last_response prompt_if_dirty].sort
+
   drawer 'Events' do
     menu do
-      %i(field_level_events form_level_events).sort.each do |comp|
+      events.each do |comp|
         item titleize(comp) do
           event :click do
             loads comp
           end
         end
       end
-      %i(dialog autocomplete replaces toggle_visibility snackbar updates deletes posts).sort.each do |comp|
+      actions.each do |comp|
         item titleize(comp) do
           event :click do
             loads "#{comp}_action"
@@ -18,4 +22,4 @@ Voom::Presenters.define(:events_drawer) do
       end
     end
   end
-end
+end

data/app/demo/events/parallel.pom

@@ -0,0 +1,44 @@
+Voom::Presenters.define(:parallel_content) do
+  content id: context['id'] do
+    heading6 Time.now
+  end
+end
+
+Voom::Presenters.define(:parallel_events) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+   attach :events_drawer
+
+  indented_grid do
+    display 'Parallel Events'
+    body 'This demonstrates multiple event handlers for the same event, running in parallel.
+          It also shows the onload event running in parallel.'
+
+    event :onload do
+      replaces :first, :parallel_content, id: :first
+    end
+    event :onload do
+      replaces :second, :parallel_content, id: :second
+    end
+
+    button :load_in_parallel do
+      event :click do
+        replaces :third, :parallel_content, id: :third
+      end
+      event :click do
+        replaces :forth, :parallel_content, id: :forth
+      end
+
+      event :click do
+        replaces :fifth, :parallel_content, id: :fifth
+      end
+    end
+
+    content id: :first
+    content id: :second
+    content id: :third
+    content id: :forth
+    content id: :fifth
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/tagged_input.pom

@@ -0,0 +1,37 @@
+Voom::Presenters.define(:tagged_input) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :events_drawer
+
+  indented_grid do
+    display 'Tagged Input'
+    body %(This demonstrates the ability to tag containers or components and then to post those values in an event action.
+         Sometimes you need to pull values from different nesting levels on a page to post.
+         Tags let you collect all tagged inputs from anywhere on the page and post them to some server side action.
+         An example of this can be found in the [search select](/search_select) pattern demo.)
+
+    blank
+    body 'Tags can be applied to containers and/or components.
+         Containers include content blocks, grids, forms, steppers, dialogs and cards.
+         All input components accept tags.'
+
+    title 'Example'
+
+    content tag: :somefields do
+      radio_button text: :on, name: :check_me, value: :on, checked: true
+      radio_button text: :off, name: :check_me, value: :off
+    end
+    text_field name: :myfield2, tag: :somefields do
+      label 'More Data to post'
+    end
+
+    button 'Press me' do
+      event :click do
+        replaces :context_list, :context_list, input_tag: :somefields
+      end
+    end
+    attach :context_list
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/hello_world.pom

@@ -0,0 +1,3 @@
+Voom::Presenters.define(:hello_world) do
+    headline 'Hello World'
+end

data/app/demo/index.pom

@@ -5,16 +5,16 @@ Voom::Presenters.define(:index) do
   attach :top_nav
 
   indented_grid do
-    headline 'Presenters', id: :headline
-    subheading 'Presenters are to HTML what C is to assembly'
+    headline 'COmmon PResenter Language (COPRL) Ruby Demo', id: :headline
+    subheading 'COPRL is to HTML what C is to assembly'
 
-    body ['A presenter describes a user interface using a ruby DSL.',
-          'The presenter is evaluated and a presenter object model (POM) is generated.',
+    body ['A presenter describes a user interface using DSL.',
+          'The presenter is evaluated and a presenter object model (POM) is generated. The POM can be serialized as JSON.',
           'A client that renders POM can display the given user interface.']
 
     body 'To get started checkout the components and events.'
 
-    subheading 'For example this is the presenter dsl for this page:', level: 2
+    subheading 'For example this is the complete presenter DSL for this page:', level: 2
 
     source = File.read(__FILE__)
     body <<~HEREDOC

data/app/demo/markdown.pom

@@ -62,5 +62,6 @@ Voom::Presenters.define(:markdown) do
       ## changelog
       * 17-Feb-2013 re-design
     HEREDOC
+    attach :code, file: __FILE__
   end
 end

data/app/demo/namespaces.pom

@@ -0,0 +1,89 @@
+require_relative 'helpers/indented_grid'
+
+Voom::Presenters.define(:namespaces) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  page_title 'Namespaces' do
+    icon 'far fa-object-group'
+  end
+
+  indented_grid do
+    body 'Presenters support namespaces. The namespace is an optional parameter to the define method:'
+    blank
+    body "`Voom::Presenters.define(:mypresenter, namespace: :namespace1)` or"
+    attach 'namespace2:alternate_namespacing'
+
+    body %(When defined in a namespace all other presenters in the same namespace are accessable without scoping the namespace.
+           When accessing a presenter outside your current namespace, simple provide the namespace(s) with `:` as the separator.
+           attach, loads and replaces all accept namespaced presenters:)
+    blank
+    attach 'namespace1:attach_with_namespace'
+    blank
+    body   'Both loads and replaces are namespace aware. To call a presenter in the ame namespace, no scoping is needed.
+            To call a presenter in another namespace, you need to fully qualify it.'
+    button 'Load' do
+      event :click do
+        loads 'namespace1:attach_with_namespace', replaced: 'I was loaded'
+      end
+    end
+    button 'Replace' do
+      event :click do
+        replaces :attach_with_namespace_id, 'namespace1:attach_with_namespace', replaced: 'I was replaced'
+      end
+    end
+    blank
+    attach 'namespace1:namespace2:nested_namespaces'
+    button 'Load' do
+      event :click do
+        loads 'namespace1:namespace2:nested_namespaces', replaced: 'I was loaded'
+      end
+    end
+    button 'Replace' do
+      event :click do
+        replaces :nested_namespaces_id, 'namespace1:namespace2:nested_namespaces', replaced: 'I was replaced'
+      end
+    end
+    blank
+    body %(Routes add the namespace(s) as a prefix: /namespace1/mypresenter)
+    blank
+    overline 'Notes:'
+    attach 'namespace1:namespace2:notes'
+  end
+  attach :code, file: __FILE__
+end
+
+Voom::Presenters.define(:attach_with_namespace, namespace: :namespace1) do
+  content id: :attach_with_namespace_id do
+    body "For example: `attach 'namespace1:mypresenter'` to insert/attach a presenter in a different namespace."
+    attach :replaced # Demonstrates calling top level presenters from a namespaced presenter
+  end
+end
+
+Voom::Presenters.define(:nested_namespaces, namespace: [:namespace1, :namespace2]) do
+  content id: :nested_namespaces_id do
+    body %(Namespaces can be nested two levels deep by passing an array of namespaces:
+              `Voom::Presenters.define(:mypresenter, namespace: [:foo,:bar])`)
+    attach :replaced # Demonstrates calling top level presenters from a namespaced presenter
+  end
+end
+
+Voom::Presenters.define(:replaced) do
+  body "#{context[:replaced]}"
+end
+
+Voom::Presenters.define('namespace2:alternate_namespacing') do
+    body "`Voom::Presenters.define('namespace1:mypresenter')`"
+    attach :blank_line # demonstrates attaching a presenter in the same namespace mixing alternate naming
+end
+
+Voom::Presenters.define(:blank_line, namespace: :namespace2) do
+  blank
+end
+
+Voom::Presenters.define('namespace2:notes', namespace: :namespace1) do
+  body <<~HEREDOC
+    * You can mix the two syntax's. `Voom::Presenters.define('namespace2:mypresenter', namespace: 'namespace1')`
+      * With this syntax attach/loads and replaces will operate in namespace1, unless fully qualified    
+    * Unlike ruby modules you are either inside a namespace and can call presenters without qualification, or you are not and you must fully qualify them.
+  HEREDOC
+end

data/app/demo/nav/top_nav.pom

@@ -1,9 +1,10 @@
 Voom::Presenters.define('top_nav') do
+  TITLE = 'COmmon PResenters Language (COPRL) Ruby Demo'
   page do
-    title 'Presenters Demo'
+    title TITLE
   end
 
-  header 'Presenters Demo' do
+  header TITLE do
     nav do
       item 'About' do
         event :click do
@@ -29,12 +30,29 @@ Voom::Presenters.define('top_nav') do
         end
       end
 
-      item 'Status' do
+      item 'Patterns' do
         event :click do
-          loads :component_status
+          loads :patterns
         end
       end
 
+      item 'Namespaces' do
+        event :click do
+          loads :namespaces
+        end
+      end
+
+      item 'Custom CSS' do
+        event :click do
+          loads :custom_css
+        end
+      end
+
+      item 'Plugins' do
+        event :click do
+          loads :plugins
+        end
+      end
     end
   end
 end

data/app/demo/patterns.pom

@@ -0,0 +1,19 @@
+require_relative 'helpers/indented_grid'
+
+Voom::Presenters.define('patterns') do
+  helpers Demo::Helpers::IndentedGrid
+  attach 'top_nav'
+  attach 'pattern_drawer'
+  page_title 'Patterns'
+
+  indented_grid do
+    grid do
+      column 12 do
+        icon 'fa-hand-point-left', position: :left
+        subheading 'Select a pattern'
+      end
+    end
+  end
+  attach :code, file: __FILE__
+
+end

data/app/demo/patterns/drag_drop.pom

@@ -0,0 +1,89 @@
+require_relative '../helpers/indented_grid'
+require 'net/http'
+require 'json'
+require 'ostruct'
+
+Voom::Presenters.define(:drag_drop) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :pattern_drawer
+  page_title 'Drag and Drop Example'
+
+  helpers do
+    def dragons
+      session = context[:session]
+      return [] if session.nil?
+      session[:dragons] ||=
+          [{id: 1, sort: 4, name: 'Jabberwocky', body: 'Alice in Wonderland, Alice Through the Looking Glass'},
+           {id: 2, sort: 3, name: 'Hydra', body: 'Hercules, Jason and the Argonauts'},
+           {id: 3, sort: 2, name: 'Drogon, Viserion, Rhaegal', body: 'Game of Thrones'},
+           {id: 4, sort: 1, name: 'Spike', body: 'My Little Pony: The Movie'}].to_json
+      JSON.parse(session[:dragons], object_class: OpenStruct)
+    end
+  end
+
+  indented_grid do
+    grid do
+      column 7 do
+        headline 'Select a Dragon'
+        subtitle 'Drag and Drop to reorder the dragons, or drop on card to right to learn more about your Dragon'
+        list do
+          dragons.sort_by(&:sort).each do |dragon|
+            line draggable: {zone: :drag_zone_1, source_id: dragon.id, dragon_name: dragon.name, dragon_info: dragon.body},
+                 drop_zone: {zone: :drag_zone_1} do
+              text dragon.name
+
+              event :drag do
+                snackbar "#{dragon.name} is a real drag!"
+              end
+
+              event :dragend do
+                snackbar "Done dragging #{dragon.name} around!"
+              end
+
+              event :drop do
+                posts '_dragon_drop_change_order_', target_id: dragon.id
+                loads :drag_drop
+              end
+
+              event :dropped do
+                snackbar "Dropped the #{dragon.name}. Whoops!"
+              end
+            end
+          end
+        end
+      end
+      column 5 do
+        attach :drop_zone
+        content drop_zone: {zone: :drag_zone_2}, padding: :top do
+          card do
+            blank
+            text "Try to drop something here"
+            blank
+          end
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end
+
+Voom::Presenters.define(:drop_zone) do
+
+  content id: :drop_zone, drop_zone: {zone: 'drag_zone_1'} do
+    card do
+      blank
+      text "Drop a dragon here..."
+      text "Last dropped dragon: **#{context.fetch(:dragon_name)}**" if context.key?(:dragon_name)
+      text "Appeard In: **#{context.fetch(:dragon_info)}**" if context.key?(:dragon_info)
+      blank
+    end
+
+    event :drop do
+      # posts '_echo_'
+      replaces :drop_zone, :drop_zone #, dragon_name: last_response.dragon_name
+    end
+  end
+end

data/app/demo/patterns/floating_card.pom

@@ -0,0 +1,29 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:floating_card) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :pattern_drawer
+
+  page_title 'Floating Card'
+  indented_grid do
+    button icon: :open_in_new do
+      event :click do
+        toggle_visibility :card
+      end
+    end
+    content id: :card, hidden: true, float: true do
+      card do
+        media do
+          title "Hi I'm floating"
+          button icon: :close do
+            event :click do
+              hide :card
+            end
+          end
+        end
+      end
+    end
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/patterns/search_select.pom

@@ -0,0 +1,106 @@
+require_relative '../helpers/indented_grid'
+
+module Demo
+  module Helpers
+    module SearchSelectDemo
+      def searches
+        search = context.fetch(:search) {nil}
+        searches = context.fetch(:searches) {[]}
+        searches << search unless search.nil? || search == ''
+        searches.select{|s| s != ''}
+      end
+    end
+  end
+end
+
+
+Voom::Presenters.define(:search_select) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :pattern_drawer
+
+  page_title 'Search and Select Pattern'
+  indented_grid do
+    grid tag: :input_data_container do
+      column 6 do
+        grid do
+          column 4 do
+            content do
+              text_field id: :search_field,  name: :search, full_width: false do
+                label 'Search Tickets'
+                event :input do
+                  replaces :ticket_list, :ticket_list, input_tag: :input_data_container
+                end
+                event :change do
+                  replaces :ticket_list, :ticket_list, input_tag: :input_data_container
+                  replaces :completed_searches, :completed_searches, input_tag: :input_data_container
+                  clears :search_field
+                end
+              end
+            end
+          end
+          column 8 do
+            attach :completed_searches
+          end
+        end
+        attach :ticket_list, title: 'Search Results'
+      end
+    end
+    attach :code, file: __FILE__
+  end
+end
+
+Voom::Presenters.define(:ticket_list) do
+  helpers Demo::Helpers::SearchSelectDemo
+  helpers do
+    def ticket_data
+      [OpenStruct.new(id: 1, event_name: 'Pearl Jam', type: 'General Admission', amount: 10.00),
+       OpenStruct.new(id: 2, event_name: 'Pearl Jam', type: 'Reserved Seating', amount: 25.00),
+       OpenStruct.new(id: 3, event_name: 'Temple of the Dog', type: 'General Admission', amount: 5.00),
+       OpenStruct.new(id: 4, event_name: 'Temple of the Dog', type: 'Reserved Seating', amount: 10.00),
+       OpenStruct.new(id: 5, event_name: 'Japandroids', type: 'General Admission', amount: 7.50),
+       OpenStruct.new(id: 6, event_name: 'Japandroids', type: 'Reserved Seating', amount: 15.00)]
+    end
+
+    def tickets
+      re = Regexp.union(searches)
+      ticket_data.select {|ticket| re.match(ticket.event_name)}
+    end
+
+    def ticket_ids
+      context.fetch(:ticket_id) {[]}
+    end
+  end
+
+  content id: :ticket_list do
+    list selectable: true do
+      tickets.each do |ticket|
+        line name: :ticket_id, value: ticket.id, checked: ticket_ids.include?(ticket.id.to_s) do
+          text ticket.event_name
+          subtitle ticket.type
+          info "$#{ticket.amount}"
+        end
+      end
+    end
+  end
+end
+
+Voom::Presenters.define(:completed_searches) do
+  helpers Demo::Helpers::SearchSelectDemo
+  content id: :completed_searches do
+    chipset do
+      searches.each do |search|
+        chip color: :primary, name: 'searches[]', value: search, id: search do
+          text search
+          icon :delete, position: :right do
+            event :click do
+              remove search
+              replaces :ticket_list, :ticket_list, input_tag: :input_data_container
+            end
+          end
+        end
+      end
+    end
+  end
+end
+