restructured backend

src/admin/gallery/script.js

@@ -355,7 +355,7 @@ class Editor {
 				this._editor,
 				getRelativeClientRect(this._imgElement),
 				{ width: this._imgElement.naturalWidth, height: this._imgElement.naturalHeight },
-				4/3);
+				this.aspectRatio);
 
 			document.querySelector("#theatergf-edit-save").style.visibility = "visible";
 		});
@@ -364,9 +364,7 @@ class Editor {
 	save() {
 		const region = this._cutSelector.getMappedPosition();
 
-		console.log(region)
-
-		fetch(wpAPISettings.root + 'theatergf/gallery/v1/images/new', {
+		fetch(wpAPISettings.root + 'theatergf/gallery/v1/images/create', {
 			method: 'POST',
 			headers: {
 				'X-WP-Nonce': wpAPISettings.nonce,
@@ -383,8 +381,6 @@ class Editor {
 
 			response.json().then((json) => {
 				if (response.ok) {
-					console.log("response:", json)
-
 					createSuccessNotice("Successfully created");
 				} else {
 					createErrorNotice(`Failed to create image: ${json?.error ?? "Unknown Error"}`);
@@ -543,28 +539,6 @@ class GalleryItemElement extends HTMLElement {
 
 customElements.define("ttgf-gallery-item", GalleryItemElement)
 
-/*function create_gallery_element(image_src) {
-	const element = document.createElement("div");
-	element.classList.add("image-container")
-
-	const spinner = document.createElement("span");
-	spinner.classList.add("spinner", "is-active");
-	element.appendChild(spinner);
-
-	const image_element = new Image();
-
-	image_element.addEventListener('load', (_) => {
-		spinner.classList.remove("is-active")
-	})
-	image_element.addEventListener('error', (_) => {
-		spinner.classList.remove("is-active")
-	})
-
-	image_element.src = image_src
-	element.appendChild(image_element)
-
-	return element;
-}*/
 
 function create_gallery_element(id, image_src, selected) {
 	const e = document.createElement("ttgf-gallery-item");
@@ -577,13 +551,15 @@ function create_gallery_element(id, image_src, selected) {
 
 async function load_gallery() {
 
+	console.log("loading gallery");
+
 	const spinner = document.querySelector('.gallery-container .spinner');
 	spinner.classList.add("is-active");
 
 	const gallery = document.querySelector('.gallery');
 
 	try {
-		const response = await fetch(wpAPISettings.root + 'theatergf/gallery/v1/images/all', {
+		const response = await fetch(wpAPISettings.root + 'theatergf/gallery/v1/admin/images', {
 			method: 'GET',
 			headers: {
 				'X-WP-Nonce': wpAPISettings.nonce
@@ -591,7 +567,6 @@ async function load_gallery() {
 		})
 
 		const json = await response.json()
-		console.log(json);
 
 		if (!Array.isArray(json)) {
 			throw TypeError(`Did not receive an array of posts as a result! Got ${typeof json}`)
@@ -602,6 +577,8 @@ async function load_gallery() {
 			return;
 		}
 
+		gallery.replaceChildren();
+
 		json.forEach((v) => {
 			const item = create_gallery_element(v["ID"], v["thumbnail_src"], v["selected"])
 			item.addEventListener("click", (e) => {
@@ -679,7 +656,7 @@ jQuery(document).ready( ($) => {
 		const items = gallery.querySelectorAll("ttgf-gallery-item");
 		const payload = Array.from(items, (v) => ({ ID: v.imageId, selected: v.selected }))
 
-		fetch(wpAPISettings.root + 'theatergf/gallery/v1/images/selected/set', {
+		fetch(wpAPISettings.root + 'theatergf/gallery/v1/admin/images/selected', {
 			method: 'POST',
 			headers: {
 				'X-WP-Nonce': wpAPISettings.nonce,

src/backend/backend.php

@@ -2,20 +2,22 @@
 
 namespace TheaterGF\Gallery\Backend;
 
-require_once __DIR__ . '/endpoints/crop.php';
+require_once __DIR__ . '/endpoints/admin.php';
+require_once __DIR__ . '/endpoints/public.php';
 
 add_action( 'rest_api_init', function () {
 	$namespace = 'theatergf/gallery/v1';
 
-	$crop_controller = new Rest\CROP_Endpoints($namespace, 'images');
-	$crop_controller->register_routes();
+	$admin_controller = new Rest\AdminGalleryEndpoints($namespace, 'admin');
+	$admin_controller->register_routes();
+
+	$public_controller = new Rest\PublicGalleryEndpoints($namespace, 'gallery');
+	$public_controller->register_routes();
 });
 
 add_action( 'delete_attachment', function ( $post_id ) {
 	$selected = get_post_meta($post_id, '_ttgf_gallery_selected', true);
 
-	error_log("deleting: " . $post_id . ", selected: " . $selected);
-
 	if ( (! $selected) || empty($selected) ) {
 		return;
 	}

src/backend/endpoints/admin.php

@@ -10,7 +10,7 @@ use \WP_REST_Server;
 
 use function \TheaterGF\Core\get_media_manager;
 
-class CROP_Endpoints extends WP_REST_Controller {
+class AdminGalleryEndpoints extends WP_REST_Controller {
 
 	public function __construct( $namespace, $base_path ) {
 		$this->namespace = $namespace;
@@ -19,14 +19,14 @@ class CROP_Endpoints extends WP_REST_Controller {
 
 	public function register_routes() {
 
-		register_rest_route($this->namespace, '/' . $this->rest_base . '/all', [
+		register_rest_route($this->namespace, '/' . $this->rest_base . '/images', [
 			'methods'               => WP_REST_Server::READABLE,
 			'callback'              => [ $this, 'get_items' ],
 			'permission_callback'	=> [ $this, 'get_items_permissions_check'],
 			'args'                  => []
 		]);
 
-		register_rest_route($this->namespace, '/' . $this->rest_base . '/selected/set', [
+		register_rest_route($this->namespace, '/' . $this->rest_base . '/images/selected', [
 			'methods'               => WP_REST_Server::CREATABLE,
 			'callback'              => [ $this, 'set_selected' ],
 			'permission_callback'	=> [ $this, 'create_item_permissions_check' ],
@@ -47,7 +47,7 @@ class CROP_Endpoints extends WP_REST_Controller {
 			]
 		]);
 
-		register_rest_route($this->namespace, '/' . $this->rest_base . '/new', [
+		register_rest_route($this->namespace, '/' . $this->rest_base . '/images/create', [
 			'methods'               => WP_REST_Server::CREATABLE,
 			'callback'              => [ $this, 'create_item' ],
 			'permission_callback'	=> [ $this, 'create_item_permissions_check' ],
@@ -77,14 +77,13 @@ class CROP_Endpoints extends WP_REST_Controller {
 	}
 
 	public function get_items_permissions_check( $request ) {
-		return $this->editable_permission_check($request);
+		return $this->admin_permission_check($request);
 	}
 
 	public function create_item_permissions_check( $request ) {
-		return $this->editable_permission_check($request);
+		return $this->admin_permission_check($request);
 	}
 
-
 	public function get_items( $request ) {
 
 		$posts = get_posts(array(
@@ -186,7 +185,7 @@ class CROP_Endpoints extends WP_REST_Controller {
 	}
 
 
-	protected function editable_permission_check( $request ) {
+	protected function admin_permission_check( $request ) {
 
 		if ( ! is_user_logged_in()) {
 			return new WP_Error( 'unauthenticated', 'Log in to interact with this endpoint.', array( 'status' => 401 ));

src/backend/endpoints/public.php

@@ -6,14 +6,13 @@ use \WP_Error;
 use \WP_REST_Controller;
 use \WP_REST_Server;
 
-class GALLERY_Endpoints extends WP_REST_Controller {
+class PublicGalleryEndpoints extends WP_REST_Controller {
 
 	public function __construct( $namespace, $base_path ) {
 		$this->namespace = $namespace;
 		$this->rest_base = $base_path;
 	}
 
-
 	public function register_routes() {
 		register_rest_route($this->namespace, '/' . $this->rest_base, [
 			'methods'               => WP_REST_Server::READABLE,
@@ -28,19 +27,25 @@ class GALLERY_Endpoints extends WP_REST_Controller {
 	}
 
 	public function get_items( $request ) {
-		$posts = get_posts(array(
+		$posts = get_posts([
 			'numberposts'  => -1,
 			'post_type'    => "attachment",
 			'meta_key'     => "_ttgf_gallery_selected",
-		));
+			'meta_value'   => 0,
+			'meta_compare' => ">"
+		]);
 
-		$data = []
+		$data = [];
 
 		foreach ( $posts as $post ) {
-			$data[] = wp_get_attachment_image_src($post->ID, "full");
+			$img_data = wp_get_attachment_image_src($post->ID, "full");
+
+			if ($img_data !== false) {
+				$data[] = $img_data[0];
+			}
 		}
 
-		return data;
+		return $data;
 	}
 
 }

src/backend/util.php

@@ -1,18 +0,0 @@
-<?php
-
-namespace TheaterGF\Gallery\Backend;
-
-/**
- * Checks whether all required fields are present. Does not support duplicate keys.
- *
- * @return if a field is missing, its key, otherwise null
- */
-function check_required_fields(WP_REST_Request $request, iterable $fields): string|null {
-
-	foreach ($fields as $key) {
-
-	}
-
-	return null;
-}
-

src/theatergf-gallery/view.js

@@ -168,7 +168,7 @@ class TheaterGFGalleryHTMLElement extends HTMLElement {
 
 			.slide-control {
 				height: 20px;
-				padding: 5px 10px;
+				padding: 5px 15px 0px 15px;
 
 				position: absolute;
 				bottom: 0px;
@@ -176,7 +176,6 @@ class TheaterGFGalleryHTMLElement extends HTMLElement {
 				transform: translateX(-50%);
 
 				background-color: var(--wp--preset--color--base);
-				background: black;
 
 				border-top-left-radius: 15px;
 				border-top-right-radius: 15px;
@@ -184,7 +183,7 @@ class TheaterGFGalleryHTMLElement extends HTMLElement {
 				display: flex;
 				flex-direction: row;
 				flex-wrap: nowrap;
-				gap: 5px;
+				gap: 7.5px;
 
 				align-items: center;
 			}
@@ -242,6 +241,10 @@ class TheaterGFGalleryHTMLElement extends HTMLElement {
 	}
 
 	__got_to_current_slide() {
+		if (this.current_slide.max - this.current_slide.min < 1) {
+			return;
+		}
+
 		const target_position = this.offsetWidth * this.current_slide.count;
 
 		this.slide_container.animate([