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

30
partials/account/_skins.php
View File

@ -40,36 +40,36 @@ $current_user = $args['user'];
);
?></p>
<template id="template-custom-skin">
<div class="custom-skin">
<button type="button" class="custom-skin__toggle" data-click-action="skin-toggle">
<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-finder="skin-name">&mdash;</span>
<span class="custom-skin__name" data-css-skin-finder="name">&mdash;</span>
<span class="custom-skin__spacer"></span>
<span class="custom-skin__version" data-finder="skin-version">&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-finder="skin-author">&mdash;</span>
<span class="custom-skin__author" data-css-skin-finder="author">&mdash;</span>
</div>
<button type="button" class="custom-skin__delete" data-click-action="skin-delete"><i class="fa-solid fa-trash-can"></i></button>
<button type="button" class="custom-skin__delete" data-action="click->css-skin#delete"><i class="fa-solid fa-trash-can"></i></button>
</div>
</template>
</template>
<div class="profile__segment">
<div class="custom-skin-list" data-css-skin-target="list"></div>
<div class="custom-skin-list"></div>
<form id="css-upload-form" class="custom-skin _upload">
<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" 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>
</form>
<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-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#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>

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

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