library: Add WebView entry (#299)

src/Library/demos/Web View/main.blp

@@ -0,0 +1,70 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.Clamp {
+  maximum-size: 700;
+
+  Box {
+    orientation: vertical;
+
+    Box {
+      orientation: vertical;
+      margin-top: 12;
+      margin-bottom: 12;
+      spacing: 6;
+
+      Label {
+        label: "Web View";
+
+        styles ["title-1"]
+      }
+
+      Label {
+        label: "Load and display webpages and HTML";
+      }
+    }
+
+    Box controls {
+      spacing: 6;
+
+      Button button_back {
+        icon-name: "arrow1-left-symbolic";
+        tooltip-text: _("Back");
+      }
+
+      Button button_forward {
+        icon-name: "arrow1-right-symbolic";
+        tooltip-text: _("Forward");
+      }
+
+      Entry url_bar {
+        input-purpose: url;
+        hexpand: true;
+      }
+
+      Button button_reload {
+        icon-name: "refresh-symbolic";
+        tooltip-text: _("Reload");
+      }
+
+      Button button_stop {
+        icon-name: "stop-sign-symbolic";
+        tooltip-text: _("Stop");
+      }
+    }
+
+    Adw.Bin container {
+      margin-top: 18;
+      margin-bottom: 18;
+      vexpand: true;
+      hexpand: true;
+      styles ["view"]
+    }
+
+    LinkButton {
+      margin-bottom: 12;
+      label: "API Reference";
+      uri: "https://webkitgtk.org/reference/webkit2gtk/stable/class.WebView.html";
+    }
+  }
+}

src/Library/demos/Web View/main.js

@@ -0,0 +1,90 @@
+import WebKit from "gi://WebKit?version=6.0";
+import GObject from "gi://GObject";
+import GLib from "gi://GLib";
+
+const container = workbench.builder.get_object("container");
+const button_back = workbench.builder.get_object("button_back");
+const button_forward = workbench.builder.get_object("button_forward");
+const button_reload = workbench.builder.get_object("button_reload");
+const button_stop = workbench.builder.get_object("button_stop");
+const url_bar = workbench.builder.get_object("url_bar");
+const web_view = new WebKit.WebView({
+  zoom_level: 0.8,
+});
+container.child = web_view;
+
+// URL bar displays the current loaded page
+web_view.bind_property(
+  "uri",
+  url_bar.buffer,
+  "text",
+  GObject.BindingFlags.DEFAULT,
+);
+
+web_view.load_uri("https://www.gnome.org/");
+
+url_bar.connect("activate", () => {
+  let url = url_bar.buffer.text;
+  const scheme = GLib.Uri.peek_scheme(url);
+  if (scheme == null) {
+    url = `http://${url}`;
+  }
+  web_view.load_uri(url);
+});
+
+button_forward.connect("clicked", () => {
+  web_view.go_forward();
+});
+
+button_back.connect("clicked", () => {
+  web_view.go_back();
+});
+
+button_reload.connect("clicked", () => {
+  web_view.reload();
+});
+
+button_stop.connect("clicked", () => {
+  web_view.stop_loading();
+});
+
+web_view.connect("load-changed", (view, load_event) => {
+  switch (load_event) {
+    case WebKit.LoadEvent.STARTED:
+      console.log("Page loading started");
+      break;
+    case WebKit.LoadEvent.FINISHED:
+      console.log("Page loading has finished ");
+      break;
+  }
+});
+
+web_view.connect("load-failed", (view, load_event, fail_url, error) => {
+  // Dont display error page if it is caused by stop_loading()
+  if (error.code !== WebKit.NetworkError.CANCELLED) {
+    web_view.load_alternate_html(
+      error_page(fail_url, error.message),
+      fail_url,
+      null,
+    );
+  }
+});
+
+web_view.connect("notify::estimated-load-progress", () => {
+  url_bar.progress_fraction = web_view.estimated_load_progress;
+  if (url_bar.progress_fraction === 1) {
+    setTimeout(() => {
+      url_bar.progress_fraction = 0;
+    }, 500);
+  }
+});
+
+function error_page(fail_url, msg) {
+  const error = `
+    <div style="text-align:center; margin:24px;">
+    <h2>An error occurred while loading ${fail_url}</h2>
+    <p>${msg}</p>
+    </div>
+  `;
+  return error;
+}

src/Library/demos/Web View/main.json

@@ -0,0 +1,7 @@
+{
+  "name": "Web View",
+  "category": "network",
+  "description": "Load and display webpages and HTML",
+  "panels": ["code", "preview"],
+  "autorun": true
+}