gtk-listmodel.js

#!/usr/bin/gjs

imports.gi.versions.Gtk = '4.0';

const Gtk = imports.gi.Gtk;
const Gio = imports.gi.Gio;
const Mainloop = imports.mainloop;
const GObject = imports.gi.GObject;

const RoomTileViewModel = GObject.registerClass({
	GTypeName: "RoomTileViewModel",
	Properties: {
		name: GObject.ParamSpec.string("name", "name", "name", GObject.ParamFlags.READABLE, null),
		notificationCount: GObject.ParamSpec.uint("notificationCount", "notificationCount", "notificationCount", GObject.ParamFlags.READABLE),
	},
}, class RoomTileViewModel extends GObject.Object {
	_init(name, notificationCount) {
		super._init();
		this._name = name;
		this._notificationCount = notificationCount;
	}

	get notificationCount() {
		return this._notificationCount;
	}

	get name() {
		return this._name;
	}
});

const ObservableListModel = GObject.registerClass({
	GTypeName: "ObservableListModel",
	Implements: [Gio.ListModel]
}, class ObservableListModel extends GObject.Object {
    _init(constructProperties) {
        super._init(constructProperties);
        this._items = [new RoomTileViewModel("Watercooler", 2), new RoomTileViewModel("Spec room", 1)];
    }

	vfunc_get_item(position) {
		return this._items[position];
	}
	
	vfunc_get_item_type() {
		return RoomTileViewModel;
	}
	
	vfunc_get_n_items() {
		return this._items.length;
	}

	push(vm) {
		this._items.push(vm);
		this.items_changed(this._items.length - 1, 0, 1);
	}
});

let window;
const app = new Gtk.Application();
app.connect("startup", () => {
	const factory = new Gtk.SignalListItemFactory();
	factory.connect("bind", (factory, listItem) => {
		const label = new Gtk.Label();
		listItem.item.bind_property("name", label, "label", 0);
		label.label = listItem.item.name;
		listItem.child = label;
	});
	// todo: connect to unbind and unref the binding
	const model = new ObservableListModel();
	const listview = new Gtk.ListView({model: new Gtk.SingleSelection({model}), factory});
	window = new Gtk.Window();
	window.child = listview;
	app.add_window(window);
	addItemsOverTime(model);

});
app.connect("activate", () => window.show());
app.run(ARGV);

async function addItemsOverTime(listModel) {
	while (true) {
		await new Promise(resolve => Mainloop.timeout_add(2000, resolve));
		listModel.push(new RoomTileViewModel(`Room ${Math.round(Math.random() * 1000)}`), Math.round(Math.random() * 5));
	}
}