coprl 0.1.0 → 3.0.0.beta.5

data/app/demo/plugins/cacheable.pom

@@ -0,0 +1,64 @@
+require 'ostruct'
+
+Coprl::Presenters.define(:cacheable, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :cacheable
+
+  page_title 'Cacheable'
+
+  helpers do
+    def cache_object
+      OpenStruct.new(cache_key: 'wild')
+    end
+
+    def cache_objects
+      [
+        OpenStruct.new(cache_key: 'abc'),
+        OpenStruct.new(cache_key: '123'),
+      ]
+    end
+  end
+
+  indented_grid do
+    body <<~DOC
+      The caching plugin provides russian doll caching support.
+      Declare the plugin in your pom, `plugin :cacheable`, or configure it globally:
+
+      ```
+      Coprl::Presenters::Settings.configure do |config|
+        config.presenters.plugins.push(:cacheable)
+      end
+      ```
+
+      For Rails it automatically uses the Rails::Cache. For other Rack apps you need to configure it with a block:
+
+      ```
+      Coprl::Presenters::Plugins::Cacheable::Settings.configure do |config|
+        # A cache needs to respond to fetch(key, &block) and exist?(key) or has_key?(key)
+        config.cache=cache_store
+      end
+      ```
+      Simply wrap your POM with the cache directive. 
+      Complex keys are supported.  If an object responds to `cache_key` then that will be used for it.  
+      An object that responds to `map` will be expanded.  As a last resort `to_s` is used.
+               
+      Examples (refresh your browser to observe cached values):
+    DOC
+    title "Not cached at #{DateTime.now}"
+    cache :remember_me do
+      title "Simple Cache Key - cached at #{DateTime.now}"
+    end
+
+    cache [:title, cache_object, cache_objects] do
+      title "Complex Cache Key - cached at #{DateTime.now}"
+    end
+    blank
+    body <<~DOC
+      Note: Confusion alert ... if you are using shotgun for the demo, it **will not cache**, since the demo uses an in memory cache and shotgun reloads its entire process with each refresh.
+    DOC
+
+  end
+  attach :code, file: __FILE__
+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
+

data/app/demo/plugins/clipboard.pom

@@ -0,0 +1,21 @@
+Coprl::Presenters.define(:clipboard, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :clipboard
+  page_title 'Clipboard'
+
+  indented_grid do
+    headline 'Copy'
+    text_field id: :copy_me do
+      value "Don't copy that floppy!"
+    end
+    button :copy, type: :raised do
+      event :click do
+        clipboard copy: :copy_me
+      end
+    end
+  end
+
+  attach :code, file: __FILE__
+end

data/app/demo/plugins/color_picker.pom

@@ -0,0 +1,17 @@
+Coprl::Presenters.define(:color_picker, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :color_picker
+  page_title 'Color picker'
+
+  indented_grid do
+    subheading 'Add a Color picker to your page'
+    color_picker 'color',
+                 value: '#f44336',
+                 color_per_row: 7,
+                 color_size: 25
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/plugins/google_maps.pom

@@ -0,0 +1,24 @@
+Coprl::Presenters.define(:google_maps, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :google_maps
+  page_title 'Maps'
+
+  indented_grid do
+    unless ENV['GOOGLE_API_KEY']
+      headline 'You must define the ENV variable GOOGLE_API_KEY for this to render a map'
+      subtitle 'Dev hint: Create an .env file with a `GOOGLE_API_KEY=yourkey` and restart. Goto [Google Using API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key) to create a key.'
+    end
+    subheading 'Static Maps'
+    address = '125 Park Street, Traverse City, MI'
+    google_map address: address, height: "300px", width: "400px"  do
+      event :click do
+        loads "https://www.google.com/maps/place/#{address}"
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+
+end

data/app/demo/plugins/iframe.pom

@@ -0,0 +1,14 @@
+Coprl::Presenters.define(:iframe, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :iframe
+  page_title 'Iframe'
+
+
+  indented_grid do
+    subheading 'Embed an iFrame'
+    iframe 'https://en.wikipedia.org/wiki/Special:Random', height: "500px",scrolling: :yes # | :no (default)
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/plugins/image_crop.pom

@@ -0,0 +1,44 @@
+Coprl::Presenters.define(:image_crop, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :image_crop
+
+  page_title 'Image Crop'
+
+  indented_grid do
+    title 'Drag and drop with cropper preview'
+    grid do
+      column 6 do
+        image_crop id: :event_image,
+                   aspect_ratio: 1.0,
+                   image: 'https://cdn.mos.cms.futurecdn.net/4f6d31c116fdada59a5cb16d136e3068-970-80.jpg' do
+        end
+      end
+      column 6 do
+        file_input name: :event_file_name, preview: :event_image, accept: 'image/png, image/jpeg, image/gif, image/svg+xml' do
+          grid do
+            column 12 do
+              card do
+                text 'Drop an image or click'
+                button icon: :cloud_upload
+              end
+            end
+          end
+        end
+      end
+      event :change do
+        replaces :context_list, ':context_list'
+      end
+    end
+  end
+
+  # image_crop do
+  #   event :change do
+  #     replaces :context_list, ':context_list'
+  #   end
+  # end
+  attach 'context_list'
+  attach :code, file: __FILE__
+end
+