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