Chandra
1 match

 view release on metacpan or  search on metacpan

examples/dragdrop_example.pl  view on Meta::CPAN 

#!/usr/bin/env perl
#
# Example: Drag and Drop
#
# Drop files from Finder/Explorer into the app window.
# Also demonstrates intra-app drag between columns.
#

use strict;
use warnings;
use FindBin;
use lib "$FindBin::Bin/../blib/lib", "$FindBin::Bin/../blib/arch";
use Chandra::App;

my $app = Chandra::App->new(
    title  => 'Drag & Drop Example',
    width  => 600,
    height => 500,
    debug  => 1,
);

# ---- Global file drop handler ----

$app->on_file_drop(sub {
    my ($files) = @_;
    my $count = scalar @$files;
    my $names = join ', ', map { (split m{/}, $_)[-1] } @$files;
    $app->eval(
        "document.getElementById('drop-log').innerHTML += "
        . "'<div class=\"entry\">Dropped $count file(s): $names</div>';"
    );
});

# ---- Zone-specific handler ----

$app->drop_zone('#upload-zone', sub {
    my ($files, $target) = @_;
    my $count = scalar @$files;
    $app->eval(
        "document.getElementById('upload-status').textContent = "
        . "'Received $count file(s) in upload zone';"
    );
});

# ---- Advanced: intra-app drag ----

my $dd = $app->drag_drop;

$dd->make_draggable('.draggable', data_from => 'data-item');

$dd->on_internal_drop(sub {
    my ($data, $source, $target) = @_;
    my $src_id = ref $source ? ($source->{id} || '?') : '?';
    my $tgt_id = ref $target ? ($target->{id} || '?') : '?';
    $app->eval(
        "document.getElementById('drag-log').innerHTML += "
        . "'<div class=\"entry\">Moved \\\"$data\\\" from $src_id to $tgt_id</div>';"
    );
});

$dd->on_drag_enter(sub {
    my ($target) = @_;
    return 'drag-over';
});

$dd->on_drag_leave(sub {
    my ($target) = @_;
    my $id = ref $target ? ($target->{id} || '') : '';
    $app->eval("var _el=document.getElementById('$id');if(_el)_el.classList.remove('drag-over');") if $id;
});

# ---- Content ----

$app->set_content(<<'HTML');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        margin: 0; padding: 20px;
        background: #1a1a2e; color: #e0e0e0;
    }
    h1 { color: #e94560; margin-top: 0; }
    h2 { color: #0f3460; background: #e94560; display: inline-block;
         padding: 4px 12px; border-radius: 4px; font-size: 14px; }



( run in 0.740 second using v1.01-cache-2.11-cpan-d7a12ab2c7f )