diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp new file mode 100644 index 000000000..74fd3d69f --- /dev/null +++ b/src/Library/demos/Carousel/main.blp @@ -0,0 +1,77 @@ +using Gtk 4.0; +using Adw 1; + +Box root_box { + orientation: vertical; + valign: center; + halign: center; + spacing: 12; + + Adw.Carousel carousel { + halign: center; + valign: center; + allow-long-swipes: true; + allow-scroll-wheel: true; + spacing: 12; + + Adw.StatusPage { + title: _("Carousel"); + description: _("Swipe or Scroll to Navigate"); + icon-name: "carousel-symbolic"; + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.Carousel.html"; + margin-top: 12; + } + + } + + Adw.Clamp { + maximum-size: 700; + halign: center; + valign: center; + + Adw.PreferencesGroup { + styles ["boxed-list"] + + Adw.ComboRow orientation_row { + title: _("Carousel Orientation"); + model: StringList { + strings [_("Horizontal"), _("Vertical")] + }; + } + + Adw.ComboRow indicator_row { + title: _("Page Indicators"); + model: StringList { + strings [_("Dots"), _("Lines")] + }; + } + + Adw.ActionRow { + title: _("Scroll Wheel"); + activatable-widget: sw_switch; + + Gtk.Switch sw_switch { + valign: center; + } + } + + Adw.ActionRow { + title: _("Long Swipes"); + activatable-widget: ls_switch; + + Gtk.Switch ls_switch { + valign: center; + } + } + } + } + + Adw.StatusPage { + title: _("Last Page"); + description: _("You've reached the end of the carousel."); + } + } +} diff --git a/src/Library/demos/Carousel/main.js b/src/Library/demos/Carousel/main.js new file mode 100644 index 000000000..40c10d250 --- /dev/null +++ b/src/Library/demos/Carousel/main.js @@ -0,0 +1,62 @@ +import Gtk from "gi://Gtk"; +import Adw from "gi://Adw"; + +const root_box = workbench.builder.get_object("root_box"); +const carousel = workbench.builder.get_object("carousel"); +const ls_switch = workbench.builder.get_object("ls_switch"); +const sw_switch = workbench.builder.get_object("sw_switch"); +const indicator_row = workbench.builder.get_object("indicator_row"); +const orientation_row = workbench.builder.get_object("orientation_row"); +let indicators; + +carousel.connect("page-changed", () => { + console.log("Page Changed"); +}); + +// Scroll Wheel Switch +sw_switch.active = carousel.allow_scroll_wheel; + +sw_switch.connect("notify::active", () => { + carousel.allow_scroll_wheel = sw_switch.active; +}); + +// Long Swipe Switch +ls_switch.active = carousel.allow_long_swipes; + +ls_switch.connect("notify::active", () => { + carousel.allow_long_swipes = ls_switch.active; +}); + +if (indicator_row.get_selected() === 0) { + indicators = new Adw.CarouselIndicatorDots({ carousel: carousel }); +} else { + indicators = new Adw.CarouselIndicatorLines({ carousel: carousel }); +} + +indicators.orientation = carousel.orientation; +root_box.append(indicators); + +indicator_row.connect("notify::selected-item", () => { + root_box.remove(indicators); + + if (indicator_row.get_selected() === 0) { + indicators = new Adw.CarouselIndicatorDots({ carousel: carousel }); + } else { + indicators = new Adw.CarouselIndicatorLines({ carousel: carousel }); + } + + indicators.orientation = carousel.orientation; + root_box.append(indicators); +}); + +orientation_row.connect("notify::selected-item", () => { + if (orientation_row.get_selected() === 0) { + root_box.orientation = Gtk.Orientation.VERTICAL; + carousel.orientation = Gtk.Orientation.HORIZONTAL; + indicators.orientation = Gtk.Orientation.HORIZONTAL; + } else { + root_box.orientation = Gtk.Orientation.HORIZONTAL; + carousel.orientation = Gtk.Orientation.VERTICAL; + indicators.orientation = Gtk.Orientation.VERTICAL; + } +}); diff --git a/src/Library/demos/Carousel/main.json b/src/Library/demos/Carousel/main.json new file mode 100644 index 000000000..8060ccba6 --- /dev/null +++ b/src/Library/demos/Carousel/main.json @@ -0,0 +1,8 @@ +{ + "name": "Carousel", + "category": "user_interface", + "description": "A paginated scrolling widget", + "panels": ["code", "ui", "preview"], + "autorun": false + } + \ No newline at end of file diff --git a/src/Library/demos/Carousel/main.vala b/src/Library/demos/Carousel/main.vala new file mode 100644 index 000000000..569039fc3 --- /dev/null +++ b/src/Library/demos/Carousel/main.vala @@ -0,0 +1,68 @@ +#! /usr/bin/env -S vala workbench.vala --pkg gtk4 --pkg libadwaita-1 + +public void main() { + var root_box = workbench.builder.get_object("root_box") as Gtk.Box; + var carousel = workbench.builder.get_object("carousel") as Adw.Carousel; + var ls_switch = workbench.builder.get_object("ls_switch") as Gtk.Switch; + var sw_switch = workbench.builder.get_object("sw_switch") as Gtk.Switch; + var indicator_row = workbench.builder.get_object("indicator_row") as Adw.ComboRow; + var orientation_row = workbench.builder.get_object("orientation_row") as Adw.ComboRow; + Adw.CarouselIndicatorDots? dots = null; + Adw.CarouselIndicatorLines? lines = null; + + carousel.page_changed.connect(() => { + debug("Page Changed"); + }); + + // Scroll Wheel Switch + sw_switch.active = carousel.allow_scroll_wheel; + sw_switch.notify["active"].connect(() => { + carousel.allow_scroll_wheel = sw_switch.active; + }); + + // Long Swipe Switch + ls_switch.active = carousel.allow_long_swipes; + ls_switch.notify["active"].connect(() => { + carousel.allow_long_swipes = ls_switch.active; + }); + + if (indicator_row.get_selected() == 0) { + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); + } else { + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); + } + + indicator_row.notify["selected-item"].connect(() => { + if (indicator_row.get_selected() == 0) { + root_box.remove(lines); + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); + } else { + root_box.remove(dots); + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); + } + }); + + orientation_row.notify["selected-item"].connect(() => { + if (orientation_row.get_selected() == 0) { + root_box.orientation = Gtk.Orientation.VERTICAL; + carousel.orientation = Gtk.Orientation.HORIZONTAL; + dots.orientation = Gtk.Orientation.HORIZONTAL; + lines.orientation = Gtk.Orientation.HORIZONTAL; + } else { + root_box.orientation = Gtk.Orientation.HORIZONTAL; + carousel.orientation = Gtk.Orientation.VERTICAL; + dots.orientation = Gtk.Orientation.VERTICAL; + lines.orientation = Gtk.Orientation.VERTICAL; + } + }); +} + +