library: Add Progress Bar Entry (#222)

Author: SoNiC-HeRE

src/Library/demos/Progress Bar/main.blp

@@ -0,0 +1,48 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Progress Bar";
+  description: _("Display the progress of a long running operation");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+      ProgressBar first {
+        fraction: 0.2;
+        show-text: true;
+        margin-bottom: 24;
+      }
+
+      ProgressBar second {
+        inverted: true;
+        pulse-step: 0.25;
+        show-text: true;
+        text: "";
+        margin-bottom: 24;
+      }
+
+      Label progress_tracker {
+        label: "";
+        margin-bottom: 12;
+      }
+
+      Button play {
+        halign: center;
+        margin-bottom: 24;
+        icon-name: "media-playback-start-symbolic";
+      }
+
+      LinkButton {
+        label: "API Reference";
+        uri: "https://docs.gtk.org/gtk4/class.ProgressBar.html";
+        }
+
+      LinkButton{
+        label: "Human Interface Guidelines";
+        uri: "https://developer.gnome.org/hig/patterns/feedback/progress-bars.html";
+        }
+    }
+  }
+

src/Library/demos/Progress Bar/main.js

@@ -0,0 +1,46 @@
+const first_bar = workbench.builder.get_object("first");
+const second_bar = workbench.builder.get_object("second");
+const play = workbench.builder.get_object("play");
+const progress_tracker = workbench.builder.get_object("progress_tracker");
+
+function handleProgress() {
+  //Counters for respective progress bars and for progress tracker label
+  let counter = 0.3;
+  let counter_two = 0.25;
+  let timeLeft = 12;
+
+  //Display a Countdown
+  const countdownInterval = setInterval(() => {
+    timeLeft--;
+    if (timeLeft === 0) {
+      clearInterval(countdownInterval);
+      progress_tracker.label = "";
+      console.log("Operation Complete!");
+    } else {
+      progress_tracker.label = `${timeLeft} seconds remaining ...`;
+    }
+  }, 1000);
+
+  //Advance the first progress bar by 0.1 value every 1.5 seconds
+  const intervalId_one = setInterval(() => {
+    first_bar.set_fraction(counter);
+    counter += 0.1;
+    if (counter > 1.0) {
+      clearInterval(intervalId_one);
+      first_bar.set_fraction((counter = 0.2));
+    }
+  }, 1500);
+
+  //Advance the second progress bar by 0.25 value every 3 seconds
+  const intervalId_second = setInterval(() => {
+    second_bar.pulse();
+    second_bar.set_fraction(counter_two);
+    counter_two += 0.25;
+    if (counter_two > 1.0) {
+      clearInterval(intervalId_second);
+      second_bar.set_fraction((counter_two = 0));
+    }
+  }, 3000);
+}
+
+play.connect("clicked", handleProgress);

src/Library/demos/Progress Bar/main.json

@@ -0,0 +1,10 @@
+{
+  "name": "Progress Bar",
+  "category": "user_interface",
+  "description": "Display the progress of a long running operation",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}