Simple drag 'n drop in GJS

[Satyajit Sahoo]

Hello all.

I was trying to build a simple app with drag 'n drop with GJS. But since
I'm new to this stuff, I'm having a hard time figuring out what to do. Here
is the code I've.

#!/usr/bin/gjs

const Gio = imports.gi.Gio;
const Gdk = imports.gi.Gdk;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

const APP_NAME = "Crush";

const Application = new Lang.Class({
    Name: APP_NAME,

    _init: function() {
        this.application = new Gtk.Application({
            application_id: "org.ozonos.crush",
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

        this.application.connect("activate", Lang.bind(this,
this._onActivate));
        this.application.connect("startup", Lang.bind(this,
this._onStartup));
    },

    _buildUI: function() {
        this._window = new Gtk.ApplicationWindow({
                            application: this.application,
                            window_position: Gtk.WindowPosition.CENTER,
                            title: APP_NAME
                        });

        try {
            let icon = Gtk.IconTheme.get_default().load_icon("crush", 48,
0);

            this._window.set_icon(icon);
        } catch (e) {
            print("Failed to load application icon: " + e.message);
        }

        this._headerbar = new Gtk.HeaderBar({
            title: APP_NAME,
            show_close_button: true
        });

        // Let's set up our window for drag 'n drop
        let dnd = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });

        dnd.set_vexpand(true);
        dnd.set_hexpand(true);

*        let target = new Gtk.TargetEntry("text/uri-list",
Gtk.TargetFlags.OTHER_APP, 0);*

*        dnd.drag_dest_set(Gtk.DestDefaults.ALL, [ target ],
Gdk.DragAction.PRIVATE);*

*        dnd.drag_dest_add_image_targets();*

*        dnd.connect("drag_drop", (...args) => {*
*            print("Stuff dropped here" + args);*
*        });*

        let label = new Gtk.Label({ label: "Drop images here to Crush!" });

        dnd.set_center_widget(label);

        this._window.add(dnd);

        this._window.set_default_size(800, 600);
        this._window.set_titlebar(this._headerbar);
        this._window.show_all();
    },

    _onActivate: function() {
        this._window.present();
    },

    _onStartup: function() {
        this._buildUI();
    }
});

let app = new Application();

app.application.run(ARGV);

Satyajit Sahoo
UX Designer
Behance Profile <https://www.behance.net/satyajitha28c7>

We're all stories, in the end. Just make it a good one, eh? — The Doctor,
Season 5, Episode 13.

_______________________________________________
javascript-list mailing list
javascript-list@gnome.org
https://mail.gnome.org/mailman/listinfo/javascript-list