malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Change skin HTML/JS to Stimulus-like format

Browse Source 
I'm not using Stimulus yet, but maybe in the future. Also, this scheme is a lot more clear.
This commit is contained in:
Tetrakern 2024-10-25 20:16:06 +02:00
parent 8decd815d0
commit d609891f82
4 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/complete.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/user-profile.min.js vendored
View File

File diff suppressed because one or more lines are too long

44
partials/account/_skins.php
View File

@ -40,36 +40,36 @@ $current_user = $args['user'];
); );
?></p> ?></p>
<template id="template-custom-skin"> <div class="profile__segment" data-controller="css-skin">
<div class="custom-skin">
<button type="button" class="custom-skin__toggle" data-click-action="skin-toggle"> <template id="template-custom-skin" data-css-skin-target="template">
<i class="fa-regular fa-circle off"></i> <div class="custom-skin" data-css-skin-finder="skin-item">
<i class="fa-solid fa-circle-dot on"></i> <button type="button" class="custom-skin__toggle" data-action="click->css-skin#toggle">
</button> <i class="fa-regular fa-circle off"></i>
<div class="custom-skin__info"> <i class="fa-solid fa-circle-dot on"></i>
<span class="custom-skin__name" data-finder="skin-name">&mdash;</span> </button>
<span class="custom-skin__spacer"></span> <div class="custom-skin__info">
<span class="custom-skin__version" data-finder="skin-version">&mdash;</span> <span class="custom-skin__name" data-css-skin-finder="name">&mdash;</span>
<span class="custom-skin__spacer"></span> <span class="custom-skin__spacer"></span>
<span class="custom-skin__author" data-finder="skin-author">&mdash;</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> </div>
<button type="button" class="custom-skin__delete" data-click-action="skin-delete"><i class="fa-solid fa-trash-can"></i></button> </template>
</div>
</template>
<div class="profile__segment"> <div class="custom-skin-list" data-css-skin-target="list"></div>
<div class="custom-skin-list"></div> <form class="custom-skin _upload" data-css-skin-target="form">
<form id="css-upload-form" class="custom-skin _upload">
<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> <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" id="css-file" name="css-file" accept=".css"> <input type="file" name="css-file" accept=".css" data-css-skin-target="file">
<i class="fa-solid fa-plus"></i> <i class="fa-solid fa-plus"></i>
</form> </form>
<div class="profile__actions"> <div class="profile__actions">
<button type="button" class="button" data-click-action="skins-sync-up" 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#upload" data-disable-with="<?php esc_attr_e( 'Uploading…', 'fictioneer' ); ?>"><?php _e( 'Sync Up', 'fictioneer' ); ?></button>
<button type="button" class="button" data-click-action="skins-sync-down" data-disable-with="<?php esc_attr_e( 'Downloading…', 'fictioneer' ); ?>"><?php _e( 'Sync Down', '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>
</div> </div>

48
src/js/user-profile.js
View File

@ -460,14 +460,14 @@ function fcn_getSkinInfo(css) {
*/ */
function fcn_toggleSkin(target) { function fcn_toggleSkin(target) {
const item = target.closest('.custom-skin'); const item = target.closest('[data-css-skin-finder="skin-item"]');
const skins = fcn_getSkins(); const skins = fcn_getSkins();
if (item.classList.contains('active')) { if (item.classList.contains('active')) {
_$$('.custom-skin').forEach(element => element.classList.remove('active')); _$$('[data-css-skin-finder="skin-item"]').forEach(element => element.classList.remove('active'));
skins.active = null; skins.active = null;
} else { } else {
_$$('.custom-skin').forEach(element => element.classList.remove('active')); _$$('[data-css-skin-finder="skin-item"]').forEach(element => element.classList.remove('active'));
item.classList.add('active'); item.classList.add('active');
skins.active = target.dataset.skinId; skins.active = target.dataset.skinId;
} }
@ -484,7 +484,7 @@ function fcn_toggleSkin(target) {
*/ */
function fcn_deleteSkin(target) { function fcn_deleteSkin(target) {
const item = target.closest('.custom-skin'); const item = target.closest('[data-css-skin-finder="skin-item"]');
const skins = fcn_getSkins(); const skins = fcn_getSkins();
if (item.classList.contains('active')) { if (item.classList.contains('active')) {
@ -492,7 +492,7 @@ function fcn_deleteSkin(target) {
} }
delete skins.data[target.dataset.skinId]; delete skins.data[target.dataset.skinId];
_$('#css-upload-form > input').value = ''; _$('[data-css-skin-target="file"]').value = '';
fcn_setSkins(skins); fcn_setSkins(skins);
fcn_renderSkinList(); fcn_renderSkinList();
@ -542,7 +542,7 @@ function fcn_applySkin() {
*/ */
function fcn_renderSkinList() { function fcn_renderSkinList() {
const container = _$('.custom-skin-list'); const container = _$('[data-css-skin-target="list"]');
const fingerprint = fcn_getCookie('fcnLoggedIn'); const fingerprint = fcn_getCookie('fcnLoggedIn');
// Ensure the theme login check is passed // Ensure the theme login check is passed
@ -558,7 +558,7 @@ function fcn_renderSkinList() {
// Check fingerprint // Check fingerprint
if (skins?.fingerprint !== fingerprint) { if (skins?.fingerprint !== fingerprint) {
_$$$('css-upload-form').style.display = ''; _$('[data-css-skin-target="form"]').style.display = '';
return; return;
} }
@ -566,38 +566,38 @@ function fcn_renderSkinList() {
if (skins?.data && Object.keys(skins.data).length > 0) { if (skins?.data && Object.keys(skins.data).length > 0) {
// Loop through the skins and render them // Loop through the skins and render them
Object.entries(skins.data).forEach(([key, skin]) => { Object.entries(skins.data).forEach(([key, skin]) => {
const template = _$$$('template-custom-skin').content.cloneNode(true); const template = _$('[data-css-skin-target="template"]').content.cloneNode(true);
// Active skin? // Active skin?
if (skins.active === key) { if (skins.active === key) {
template.querySelector('.custom-skin').classList.add('active'); template.querySelector('[data-css-skin-finder="skin-item"]').classList.add('active');
} }
// Fill template with skin data // Fill template with skin data
template.querySelector('[data-click-action="skin-toggle"]').dataset.skinId = key; template.querySelector('[data-action="click->css-skin#toggle"]').dataset.skinId = key;
template.querySelector('[data-click-action="skin-delete"]').dataset.skinId = key; template.querySelector('[data-action="click->css-skin#delete"]').dataset.skinId = key;
template.querySelector('[data-finder="skin-name"]').innerText = skin.name; template.querySelector('[data-css-skin-finder="name"]').innerText = skin.name;
template.querySelector('[data-finder="skin-version"]').innerText = skin.version; template.querySelector('[data-css-skin-finder="version"]').innerText = skin.version;
template.querySelector('[data-finder="skin-author"]').innerText = skin.author; template.querySelector('[data-css-skin-finder="author"]').innerText = skin.author;
// Append the template to the container // Append the template to the container
container.appendChild(template); container.appendChild(template);
}); });
// Add click events // Add click events
_$$('[data-click-action="skin-toggle"]').forEach(button => { _$$('[data-action="click->css-skin#toggle"]').forEach(button => {
button.addEventListener('click', event => fcn_toggleSkin(event.currentTarget)); button.addEventListener('click', event => fcn_toggleSkin(event.currentTarget));
}); });
_$$('[data-click-action="skin-delete"]').forEach(button => { _$$('[data-action="click->css-skin#delete"]').forEach(button => {
button.addEventListener('click', event => fcn_deleteSkin(event.currentTarget)); button.addEventListener('click', event => fcn_deleteSkin(event.currentTarget));
}); });
} }
if (Object.keys(skins.data).length > 2) { if (Object.keys(skins.data).length > 2) {
_$$$('css-upload-form').style.display = 'none'; _$('[data-css-skin-target="form"]').style.display = 'none';
} else { } else {
_$$$('css-upload-form').style.display = ''; _$('[data-css-skin-target="form"]').style.display = '';
} }
} }
@ -605,14 +605,16 @@ function fcn_renderSkinList() {
fcn_renderSkinList(); fcn_renderSkinList();
// Upload // Upload
_$('#css-upload-form > input')?.addEventListener('input', event => { _$('[data-css-skin-target="file"]')?.addEventListener('input', event => {
event.preventDefault(); event.preventDefault();
const input = _$$$('css-file'); const input = event.currentTarget;
const file = input.files[0]; const file = input.files[0];
const skins = fcn_getSkins(); const skins = fcn_getSkins();
const fingerprint = fcn_getCookie('fcnLoggedIn'); const fingerprint = fcn_getCookie('fcnLoggedIn');
console.log(input);
if (Object.keys(skins.data).length > 2) { if (Object.keys(skins.data).length > 2) {
fcn_showNotification(fcn_skinTranslations.tooManySkins, 3, 'warning'); fcn_showNotification(fcn_skinTranslations.tooManySkins, 3, 'warning');
return; return;
@ -729,7 +731,7 @@ function fcn_uploadSkins(trigger) {
}); });
} }
_$('[data-click-action="skins-sync-up"]')?.addEventListener('click', event => { _$('[data-action="click->css-skin#upload"]')?.addEventListener('click', event => {
fcn_uploadSkins(event.currentTarget); fcn_uploadSkins(event.currentTarget);
}); });
@ -781,11 +783,11 @@ function fcn_downloadSkins(trigger) {
console.error(error); console.error(error);
}) })
.then(() => { .then(() => {
_$('#css-upload-form > input').value = ''; _$('[data-css-skin-target="file"]').value = '';
fcn_toggleInProgress(trigger); fcn_toggleInProgress(trigger);
}); });
} }
_$('[data-click-action="skins-sync-down"]')?.addEventListener('click', event => { _$('[data-action="click->css-skin#download"]')?.addEventListener('click', event => {
fcn_downloadSkins(event.currentTarget); fcn_downloadSkins(event.currentTarget);
}); });