const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;

Gtk.init(null);

function getTreeView() {
    let model = Gtk.ListStore.new([GObject.TYPE_STRING]);
    let view = new Gtk.TreeView({ model: model,
                                  headers_visible: false,
                                  hexpand: true,
                                  vexpand: true });

    let col = new Gtk.TreeViewColumn();
    view.append_column(col);

    let renderer = new Gtk.CellRendererText();
    col.pack_start(renderer, true);
    col.add_attribute(renderer, 'text', 0);

    for (let idx = 0; idx < 8; idx++) {
        let iter = model.append();
        model.set(iter, [0], ['Item number ' + idx]);
    }

    view.show_all();
    return view;
}

let w = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL,
                         default_width: 400 });

let box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
w.add(box);

let b = new Gtk.ToggleButton({ label: 'Click for popover',
                               halign: Gtk.Align.CENTER });
let popover = new Gtk.Popover({ relative_to: b,
                                position: Gtk.PositionType.TOP,
                                modal: false });

let view = getTreeView();
popover.add(view);

b.connect('toggled', function() {
    popover.visible = b.active;
});

box.add(b);

let b2 = new Gtk.ToggleButton({ label: 'Click for revealer',
                                halign: Gtk.Align.CENTER });
let revealer = new Gtk.Revealer();

let view2 = getTreeView();
revealer.add(view2);

b2.connect('toggled', function() {
    if (b2.active) {
        revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_DOWN;
        revealer.reveal_child = true;
    } else {
        revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_UP;
        revealer.reveal_child = false;
    }
});

box.add(b2);
box.add(revealer);

w.show_all();

Gtk.main();
