voom-presenters 0.2.0 → 2.1.0

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/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
@@ -41,12 +42,17 @@ Voom::Presenters.define('top_nav') do
         end
       end
 
-      item 'Status' do
+      item 'Custom CSS' do
         event :click do
-          loads :component_status
+          loads :custom_css
         end
       end
 
+      item 'Plugins' do
+        event :click do
+          loads :plugins
+        end
+      end
     end
   end
 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

@@ -88,13 +88,15 @@ end
 Voom::Presenters.define(:completed_searches) do
   helpers Demo::Helpers::SearchSelectDemo
   content id: :completed_searches 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
+    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

data/app/demo/plugins/chart.pom

@@ -0,0 +1,254 @@
+Voom::Presenters.define(:chart, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :chart
+
+  page_title 'Chart'
+
+  indented_grid do
+    text 'Based on the [c3 charting library](https://c3js.org/examples.html).'
+
+    title 'Line Chart'
+    text '[Line chart with sequential data](https://c3js.org/samples/simple_multiple.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+        ]
+    }
+
+    title 'Timeseries Chart'
+    text '[Simple line chart with timeseries data](https://c3js.org/samples/timeseries.html).'
+    chart data: {
+        x: 'x',
+        columns: [
+            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 340, 200, 500, 250, 350]
+        ]},
+        axis: {
+            x: {
+                type: 'timeseries',
+                tick: {
+                    format: '%Y-%m-%d'
+                }
+            }
+        }
+
+    title 'Spline Chart'
+    text '[Display as Spline Chart](https://c3js.org/samples/chart_spline.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        type: 'spline'
+    }
+
+    title 'Simple XY Line Chart'
+    text '[Simple line chart with custom x](https://c3js.org/samples/simple_xy.html).'
+    chart data: {
+        x: 'x',
+        columns: [
+            ['x', 30, 50, 100, 230, 300, 310],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 300, 250, 450]
+        ]
+    }
+
+    title 'Multiple XY Line Chart'
+    text '[Multiple line chart with multiple custom x](https://c3js.org/samples/simple_xy_multiple.html).'
+    chart data: {
+        xs: {
+            'data1': 'x1',
+            'data2': 'x2',
+        },
+        columns: [
+            ['x1', 10, 30, 45, 50, 70, 100],
+            ['x2', 30, 50, 75, 100, 120],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 20, 180, 240, 100, 190]
+        ]
+    }
+
+    title 'Line Chart with Regions'
+    text '[Set regions for each data with style](https://c3js.org/samples/simple_regions.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+        ],
+        regions: {
+            'data1': [{'start': 1, 'end': 2, 'style': 'dashed'}, {'start': 3}],
+            'data2': [{'end': 3}]
+        }
+    }
+
+    title 'Step Chart'
+    text '[Display as Step Chart](https://c3js.org/samples/chart_step.html).'
+    chart data: {
+        columns: [
+            ['data1', 300, 350, 300, 0, 0, 100],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        types: {
+            data1: 'step',
+            data2: 'area-step'
+        }
+    }
+
+    title 'Area Chart'
+    text '[Display as Area Chart](https://c3js.org/samples/chart_area.html).'
+    chart data: {
+        columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        types: {
+            data1: 'area',
+            data2: 'area-spline'
+        }
+    }
+
+    title 'Stacked Area Chart'
+    text '[Display as Stacked Area Chart](https://c3js.org/samples/chart_area_stacked.html).'
+    chart data: {
+        columns: [
+            ['data1', 300, 350, 300, 0, 0, 120],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        types: {
+            data1: 'area-spline',
+            data2: 'area-spline'
+        },
+        groups: [['data1', 'data2']]
+    }
+
+    title 'Bar Chart'
+    text '[Display as Bar Chart](https://c3js.org/samples/chart_bar.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        type: 'bar'
+    },
+          bar: {
+              width: {
+                  ratio: 0.5
+              }
+          }
+
+    title 'Stacked Bar Chart'
+    text '[Display as Stacked Bar Chart](https://c3js.org/samples/chart_bar_stacked.html).'
+    chart data: {
+        columns: [
+            ['data1', -30, 200, 200, 400, -150, 250],
+            ['data2', 130, 100, -100, 200, -150, 50],
+            ['data3', -230, 200, 200, -300, 250, 250]
+        ],
+        type: 'bar',
+        groups: [
+            ['data1', 'data2']
+        ]
+    },
+          grid: {
+              y: {
+                  lines: [{value: 0}]
+              }
+          }
+
+    title 'Scatter Plot'
+    text '[Display as Scatter Plot](https://c3js.org/samples/chart_scatter.html).'
+    chart data: {
+        xs: {
+            setosa: 'setosa_x',
+            versicolor: 'versicolor_x',
+        },
+        columns: [
+            ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
+            ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
+            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
+            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
+        ],
+        type: 'scatter'
+    },
+          axis: {
+              x: {
+                  label: 'Sepal.Width',
+                  tick: {
+                      fit: false
+                  }
+              },
+              y: {
+                  label: 'Petal.Width'
+              }
+          }
+
+    title 'Pie Chart'
+    text '[Display as Pie Chart](https://c3js.org/samples/chart_pie.html).'
+    chart data: {
+        columns: [
+            ['data1', 30],
+            ['data2', 120],
+        ],
+        type: 'pie'
+    }
+
+    title 'Donut Chart'
+    text '[Display as Donut Chart](https://c3js.org/samples/chart_donut.html).'
+    chart data: {
+        columns: [
+            ['data1', 30],
+            ['data2', 120],
+        ],
+        type: 'donut'
+    },
+          donut: {title: 'Iris-Petal-Width'}
+
+
+    title 'Gauge Chart'
+    text '[Display as Gauge Chart](https://c3js.org/samples/chart_gauge.html).'
+    chart data: {
+        columns: [
+            ['data', 91.4]
+        ],
+        type: 'gauge'
+    },
+          color: {
+              pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+              threshold: {
+                  values: [30, 60, 90, 100]
+              }
+          },
+          size: {
+              height: 180
+          }
+
+    title 'Combination Chart'
+    text '[Display all kinda charts up in here](https://c3js.org/samples/chart_combination.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data2', 200, 130, 90, 240, 130, 220],
+            ['data3', 300, 200, 160, 400, 250, 250],
+            ['data4', 200, 130, 90, 240, 130, 220],
+            ['data5', 130, 120, 150, 140, 160, 150],
+            ['data6', 90, 70, 20, 50, 60, 120],
+        ],
+        type: 'bar',
+        types: {
+            data3: 'spline',
+            data4: 'line',
+            data6: 'area',
+        },
+        groups: [
+            ['data1', 'data2']
+        ]
+    }
+
+  end
+  attach :code, file: __FILE__
+end
+