coprl 0.1.0 → 3.0.0.beta.1

data/app/demo/nav/top_nav.pom

@@ -0,0 +1,60 @@
+Coprl::Presenters.define('top_nav') do
+  TITLE = 'COmmon PResenters Language (COPRL) Ruby Demo' unless defined?(TITLE)
+  page do
+    title TITLE
+  end
+
+  header TITLE do
+    nav do
+      item 'About' do
+        event :click do
+          loads :index
+        end
+      end
+
+      item 'Components' do
+        event :click do
+          loads :components
+        end
+      end
+
+      item 'Styles' do
+        event :click do
+          loads :styles
+        end
+      end
+
+      item 'Events' do
+        event :click do
+          loads :events
+        end
+      end
+
+      item 'Patterns' do
+        event :click do
+          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'
+
+Coprl::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'
+
+Coprl::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
+
+Coprl::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'
+
+Coprl::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
+
+
+Coprl::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
+
+Coprl::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
+
+Coprl::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
+

data/app/demo/plugins/chart.pom

@@ -0,0 +1,254 @@
+Coprl::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
+