app/demo/patterns/drag_drop.pom
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