coprl 0.1.0 → 3.0.0.beta.5

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 input_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/animate.pom

@@ -0,0 +1,144 @@
+Coprl::Presenters.define(:animate, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :animate, :scroll_to
+  page_title 'Animate', id: :page_title
+
+  indented_grid do
+    grid do
+      column 4 do
+        heading "Animations plugin", id: :animate_heading
+        subheading "Just-add-POM CSS animations"
+        body "It is based on [animate.css](https://animate.style/)."
+      end
+      column 8 do
+        [["Attention seekers",
+          %i( bounce
+              flash
+              pulse
+              rubber_band
+              shake_x
+              shake_y
+              head_shake
+              swing
+              tada
+              wobble
+              jello
+              heart_beat)],
+         ["Back entrances",
+          %i( back_in_down
+              back_in_left
+              back_in_right
+              back_in_up)],
+         ["Back exits",
+          %i( back_out_down
+              back_out_left
+              back_out_right
+              back_out_up)],
+         ["Bouncing entrances",
+          %i( bounce_in
+              bounce_in_down
+              bounce_in_left
+              bounce_in_right
+              bounce_in_up)],
+         ["Bouncing exits",
+          %i( bounce_out
+              bounce_out_down
+              bounce_out_left
+              bounce_out_right
+              bounce_out_up)],
+         ["Fading entrances",
+          %i( fade_in
+              fade_in_down
+              fade_in_down_big
+              fade_in_left
+              fade_in_left_big
+              fade_in_right
+              fade_in_right_big
+              fade_in_up
+              fade_in_up_big
+              fade_in_top_left
+              fade_in_top_right
+              fade_in_bottom_left
+              fade_in_bottom_right)],
+         ["Fading exits",
+          %i( fade_out
+              fade_out_down
+              fade_out_down_big
+              fade_out_left
+              fade_out_left_big
+              fade_out_right
+              fade_out_right_big
+              fade_out_up
+              fade_out_up_big
+              fade_out_top_left
+              fade_out_top_right
+              fade_out_bottom_right
+              fade_out_bottom_left)],
+         ["Flippers",
+          %i( flip
+              flip_in_x
+              flip_in_y
+              flip_out_x
+              flip_out_y)],
+         ["lightspeed",
+          %i(  light_speed_in_right
+              light_speed_in_left
+              light_speed_out_right
+              light_speed_out_left)],
+         ["Rotating entrances",
+          %i( rotate_in
+              rotate_in_down_left
+              rotate_in_down_right
+              rotate_in_up_left
+              rotate_in_up_right)],
+         ["Rotating exits",
+          %i( rotate_out
+              rotate_out_down_left
+              rotate_out_down_right
+              rotate_out_up_left
+              rotate_out_up_right)],
+         ["Specials",
+          %i( hinge
+              jack_in_the_box
+              roll_in
+              roll_out)],
+         ["Zooming entrances",
+          %i( zoom_in
+              zoom_in_down
+              zoom_in_left
+              zoom_in_right
+              zoom_in_up)],
+         ["Zooming exits",
+          %i( zoom_out
+              zoom_out_down
+              zoom_out_left
+              zoom_out_right
+              zoom_out_up)],
+         ["Sliding entrances",
+          %i( slide_in_down
+              slide_in_left
+              slide_in_right
+              slide_in_up)],
+         ["Sliding exits",
+          %i( slide_out_down
+              slide_out_left
+              slide_out_right
+              slide_out_up)]].each do |animiation_title, animiations|
+          subtitle animiation_title
+          animiations.each do |animation|
+            button animation do
+              event :click do
+                scroll_to :page_title
+                animate :animate_heading, animation, wait: true
+              end
+            end
+          end
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end