From c3fde6dc3c2500a278a655acdf6b41b575720202 Mon Sep 17 00:00:00 2001
From: Tetrakern <26898880+Tetrakern@users.noreply.github.com>
Date: Fri, 25 Oct 2024 20:36:21 +0200
Subject: [PATCH] Move skins HTML into helper function

Gotta render this in the admin, too.
---
 includes/functions/_helpers-templates.php | 49 +++++++++++++++++++++--
 partials/account/_skins.php               | 34 +---------------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/includes/functions/_helpers-templates.php b/includes/functions/_helpers-templates.php
index dea84ac3..a28dacc0 100644
--- a/includes/functions/_helpers-templates.php
+++ b/includes/functions/_helpers-templates.php
@@ -2673,8 +2673,7 @@ function fictioneer_get_splide_loading_style( $json_string, $uid ) {
  */
 
 function fictioneer_get_splide_placeholders( $uid = null, $ttb = false ) {
-  return apply_filters( 'fictioneer_filter_splide_placeholders', '', $uid, $ttb
-  );
+  return apply_filters( 'fictioneer_filter_splide_placeholders', '', $uid, $ttb );
 }
 
 // =============================================================================
@@ -2727,7 +2726,7 @@ if ( FICTIONEER_LIST_SCHEDULED_CHAPTERS ) {
 }
 
 // =============================================================================
-// GET CUSTOM CSS SKIN TRANSLATIONS
+// CUSTOM CSS SKINS
 // =============================================================================
 
 /**
@@ -2750,3 +2749,47 @@ function fictioneer_get_skin_translations() {
     'error' => _x( 'Error.', 'Custom CSS skin.', 'fictioneer' )
   );
 }
+
+/**
+ * Renders the HTML for the custom CSS skin interface
+ *
+ * @since 5.26.0
+ */
+
+function fictioneer_render_skin_interface() {
+  // Start HTML ---> ?>
+  <div class="profile__segment custom-skin-section" data-controller="css-skin">
+
+    <template data-css-skin-target="template">
+      <div class="custom-skin" data-css-skin-finder="skin-item">
+        <button type="button" class="custom-skin__toggle" data-action="click->css-skin#toggle">
+          <i class="fa-regular fa-circle off"></i>
+          <i class="fa-solid fa-circle-dot on"></i>
+        </button>
+        <div class="custom-skin__info">
+          <span class="custom-skin__name" data-css-skin-finder="name">&mdash;</span>
+          <span class="custom-skin__spacer"></span>
+          <span class="custom-skin__version" data-css-skin-finder="version">&mdash;</span>
+          <span class="custom-skin__spacer"></span>
+          <span class="custom-skin__author" data-css-skin-finder="author">&mdash;</span>
+        </div>
+        <button type="button" class="custom-skin__delete" data-action="click->css-skin#delete"><i class="fa-solid fa-trash-can"></i></button>
+      </div>
+    </template>
+
+    <div class="custom-skin-list" data-css-skin-target="list"></div>
+
+    <div class="custom-skin _upload" data-css-skin-target="form">
+      <script type="text/javascript" data-jetpack-boost="ignore" data-no-optimize="1" data-no-defer="1" data-no-minify="1">var fcn_skinTranslations = <?php echo json_encode( fictioneer_get_skin_translations() ); ?>;</script>
+      <input type="file" name="css-file" accept=".css" data-css-skin-target="file">
+      <i class="fa-solid fa-plus"></i>
+    </div>
+
+    <div class="profile__actions custom-skin-actions">
+      <button type="button" class="button" data-action="click->css-skin#upload" data-disable-with="<?php esc_attr_e( 'Uploading…', 'fictioneer' ); ?>"><?php _e( 'Sync Up', 'fictioneer' ); ?></button>
+      <button type="button" class="button" data-action="click->css-skin#download" data-disable-with="<?php esc_attr_e( 'Downloading…', 'fictioneer' ); ?>"><?php _e( 'Sync Down', 'fictioneer' ); ?></button>
+    </div>
+
+  </div>
+  <?php // <--- End HTML
+}
diff --git a/partials/account/_skins.php b/partials/account/_skins.php
index c3d14709..0260c27e 100644
--- a/partials/account/_skins.php
+++ b/partials/account/_skins.php
@@ -40,36 +40,4 @@ $current_user = $args['user'];
   );
 ?></p>
 
-<div class="profile__segment" data-controller="css-skin">
-
-  <template id="template-custom-skin" data-css-skin-target="template">
-    <div class="custom-skin" data-css-skin-finder="skin-item">
-      <button type="button" class="custom-skin__toggle" data-action="click->css-skin#toggle">
-        <i class="fa-regular fa-circle off"></i>
-        <i class="fa-solid fa-circle-dot on"></i>
-      </button>
-      <div class="custom-skin__info">
-        <span class="custom-skin__name" data-css-skin-finder="name">&mdash;</span>
-        <span class="custom-skin__spacer"></span>
-        <span class="custom-skin__version" data-css-skin-finder="version">&mdash;</span>
-        <span class="custom-skin__spacer"></span>
-        <span class="custom-skin__author" data-css-skin-finder="author">&mdash;</span>
-      </div>
-      <button type="button" class="custom-skin__delete" data-action="click->css-skin#delete"><i class="fa-solid fa-trash-can"></i></button>
-    </div>
-  </template>
-
-  <div class="custom-skin-list" data-css-skin-target="list"></div>
-
-  <form class="custom-skin _upload" data-css-skin-target="form">
-    <script type="text/javascript" data-jetpack-boost="ignore" data-no-optimize="1" data-no-defer="1" data-no-minify="1">var fcn_skinTranslations = <?php echo json_encode( fictioneer_get_skin_translations() ); ?>;</script>
-    <input type="file" name="css-file" accept=".css" data-css-skin-target="file">
-    <i class="fa-solid fa-plus"></i>
-  </form>
-
-  <div class="profile__actions">
-    <button type="button" class="button" data-action="click->css-skin#upload" data-disable-with="<?php esc_attr_e( 'Uploading…', 'fictioneer' ); ?>"><?php _e( 'Sync Up', 'fictioneer' ); ?></button>
-    <button type="button" class="button" data-action="click->css-skin#download" data-disable-with="<?php esc_attr_e( 'Downloading…', 'fictioneer' ); ?>"><?php _e( 'Sync Down', 'fictioneer' ); ?></button>
-  </div>
-
-</div>
+<?php fictioneer_render_skin_interface(); ?>