Changes to backend and tabs UI

This commit is contained in:
Jeremy Rangel
2025-01-03 16:33:20 -08:00
parent b79a4ece03
commit 63e181109c
15 changed files with 118 additions and 83 deletions

View File

@ -1,3 +1,5 @@
/* ACCORDION */
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Find all elements with the class "lcp-accordion" // Find all elements with the class "lcp-accordion"
var accordions = document.querySelectorAll('.lcp-accordion'); var accordions = document.querySelectorAll('.lcp-accordion');
@ -31,31 +33,64 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
/* TABS */
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.tab-link'); const tabs = document.querySelectorAll('.tab-link');
const panes = document.querySelectorAll('.tab-pane'); const panes = document.querySelectorAll('.tab-pane');
const tabContainer = document.querySelector('.lcp-tab-container'); // The parent container
tabs.forEach(tab => { // Only enable the hash functionality if the container has the class '.lcp-support-hash'
tab.addEventListener('click', function (event) { if (tabContainer && tabContainer.classList.contains('lcp-support-hash')) {
event.preventDefault();
// Function to set the active tab based on the hash in the URL
function setActiveTabFromHash() {
const hash = window.location.hash; // Get the current URL hash
if (hash) {
const targetTab = document.querySelector(`.tab-link[data-tab="${hash.substring(1)}"]`); // Remove '#' from hash
const targetPane = document.getElementById(hash.substring(1));
// Remove active class from all tabs and panes // If both tab and pane exist, make them active
tabs.forEach(link => link.classList.remove('active')); if (targetTab && targetPane) {
panes.forEach(pane => pane.classList.remove('active')); tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// Add active class to the clicked tab targetTab.classList.add('active');
tab.classList.add('active'); targetPane.classList.add('active');
} else {
// Get the target pane console.error(`Tab or pane with ID '${hash}' not found.`);
const targetPaneId = tab.dataset.tab; }
const targetPane = document.getElementById(targetPaneId);
// Check if targetPane exists before trying to manipulate it
if (targetPane) {
targetPane.classList.add('active');
} else {
console.error(`Tab pane with ID '${targetPaneId}' not found.`);
} }
}
// Set the active tab from the hash when the page loads
setActiveTabFromHash();
}
// Handle tab clicks
tabs.forEach(tab => {
tab.addEventListener('click', function (event) {
event.preventDefault();
// Remove active class from all tabs and panes
tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// Add active class to the clicked tab
tab.classList.add('active');
// Get the target pane and update URL hash
const targetPaneId = tab.dataset.tab;
const targetPane = document.getElementById(targetPaneId);
// Check if targetPane exists before trying to manipulate it
if (targetPane) {
targetPane.classList.add('active');
if (tabContainer && tabContainer.classList.contains('lcp-support-hash')){
window.location.hash = targetPaneId; // Update the URL hash
}
} else {
console.error(`Tab pane with ID '${targetPaneId}' not found.`);
}
});
}); });
});
}); });

View File

@ -89,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () {
} }
// Add debounced scroll event listener // Add debounced scroll event listener
window.addEventListener('scroll', debounce(handleScroll, 20)); // 200ms debounce window.addEventListener('scroll', debounce(handleScroll, 0)); // 200ms debounce
}); });

View File

@ -170,32 +170,6 @@ function drop_lcp_icons_table() {
/* BACKEND ICON ADDER */
// Register the dashboard page in the admin menu
function lcp_register_dashboard_page() {
add_menu_page(
'Icon Management', // Page Title
'Icon Management', // Menu Title
'manage_options', // Capability
'icon-management', // Menu Slug
'lcp_dashboard_page', // Callback function
'dashicons-images-alt2', // Icon for the menu item
60 // Position
);
}
add_action('admin_menu', 'lcp_register_dashboard_page');
// Callback function to display the dashboard page content
function lcp_dashboard_page() {
?>
<div class="wrap">
<h1><?php esc_html_e('Icon Management Dashboard', 'lcp'); ?></h1>
<div id="icon-dashboard-container">
<?php lcp_display_icon_sets(); ?>
</div> <!-- This will be populated by PHP -->
</div>
<?php
}
// Function to read and display icon sets from the JSON file // Function to read and display icon sets from the JSON file
// Function to read and display icon sets from the JSON file // Function to read and display icon sets from the JSON file

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '00e12da1bdf9e61c448a'); <?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'eca736ee702435b6a2ff');

File diff suppressed because one or more lines are too long

View File

@ -10,26 +10,26 @@ export default function save(props) {
// Conditionally render the link or button based on buttonAction // Conditionally render the link or button based on buttonAction
return ( return (
<div {...blockProps}> <>
{buttonAction === 'customUrl' ? ( {buttonAction === 'customUrl' ? (
<a href={customUrl} className="lcp-button" style={{ padding: buttonPadding || '10px' }}> <a href={customUrl} className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
{displayIcon && iconSvgPath && ( {displayIcon && iconSvgPath && (
<svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} /> <svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
)} )}
<span className="lcp-button-text"> <span className="lcp-button-text">
{buttonText || 'Button'} {buttonText || 'Button'}
</span> </span>
</a> </a>
) : ( ) : (
<button className="lcp-button" style={{ padding: buttonPadding || '10px' }}> <button className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
{displayIcon && iconSvgPath && ( {displayIcon && iconSvgPath && (
<svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} /> <svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
)} )}
<span className="lcp-button-text"> <span className="lcp-button-text">
{buttonText || 'Button'} {buttonText || 'Button'}
</span> </span>
</button> </button>
)} )}
</div> </>
); );
} }

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'e74f7d37dca7635e59f9'); <?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '7b19c7f88a697fc64c09');

View File

@ -1 +1 @@
(()=>{"use strict";var e,n={998:()=>{const e=window.wp.blocks,n=window.wp.i18n,t=window.wp.blockEditor,r=window.wp.components,i=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/main-area"}');(0,e.registerBlockType)(s.UU,{edit:function(e){const{attributes:s,setAttributes:a}=e,{maxWidth:o="100%",expandVertical:l=!0}=s,c=(0,t.useBlockProps)(),p=(0,t.useInnerBlocksProps)(c);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.InspectorControls,{children:(0,i.jsx)(r.PanelBody,{title:(0,n.__)("Max Width Settings","lcp"),initialOpen:!0,children:(0,i.jsxs)("div",{className:"max-width-settings",children:[(0,i.jsx)(r.__experimentalUnitControl,{onChange:e=>{a({maxWidth:e})},value:o,defaultUnit:"px"}),(0,i.jsx)(r.ToggleControl,{label:(0,n.__)("Enable Vertical Expansion","lcp"),checked:l,onChange:e=>{a({expandVertical:e})}})]})})}),(0,i.jsx)("div",{...p,id:"lcp-main-container",style:{minHeight:"200px"},children:(0,i.jsx)(t.InnerBlocks,{...p})})]})},save:function({attributes:e}){const{maxWidth:n="100%",expandVertical:r}=e,s=t.useBlockProps.save(),a=r?`${s.className} lcp-grow-vertical`:s.className,o={maxWidth:n};return(0,i.jsx)("div",{...s,id:"lcp-main-container",className:a,style:o,children:(0,i.jsx)(t.InnerBlocks.Content,{})})}})}},t={};function r(e){var i=t[e];if(void 0!==i)return i.exports;var s=t[e]={exports:{}};return n[e](s,s.exports,r),s.exports}r.m=n,e=[],r.O=(n,t,i,s)=>{if(!t){var a=1/0;for(p=0;p<e.length;p++){t=e[p][0],i=e[p][1],s=e[p][2];for(var o=!0,l=0;l<t.length;l++)(!1&s||a>=s)&&Object.keys(r.O).every((e=>r.O[e](t[l])))?t.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(p--,1);var c=i();void 0!==c&&(n=c)}}return n}s=s||0;for(var p=e.length;p>0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[t,i,s]},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};r.O.j=n=>0===e[n];var n=(n,t)=>{var i,s,a=t[0],o=t[1],l=t[2],c=0;if(a.some((n=>0!==e[n]))){for(i in o)r.o(o,i)&&(r.m[i]=o[i]);if(l)var p=l(r)}for(n&&n(t);c<a.length;c++)s=a[c],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(p)},t=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})();var i=r.O(void 0,[350],(()=>r(998)));i=r.O(i)})(); (()=>{"use strict";var e,n={998:()=>{const e=window.wp.blocks,n=window.wp.i18n,t=window.wp.blockEditor,i=window.wp.components,r=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/main-area"}');(0,e.registerBlockType)(s.UU,{edit:function(e){const{attributes:s,setAttributes:a}=e,{maxWidth:o="100%",expandVertical:l=!0}=s,c=(0,t.useBlockProps)(),p=(0,t.useInnerBlocksProps)(c);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.InspectorControls,{children:(0,r.jsx)(i.PanelBody,{title:(0,n.__)("Max Width Settings","lcp"),initialOpen:!0,children:(0,r.jsxs)("div",{className:"max-width-settings",children:[(0,r.jsx)(i.__experimentalUnitControl,{onChange:e=>{a({maxWidth:e})},value:o,defaultUnit:"px"}),(0,r.jsx)(i.ToggleControl,{label:(0,n.__)("Enable Vertical Expansion","lcp"),checked:l,onChange:e=>{a({expandVertical:e})}})]})})}),(0,r.jsx)("div",{...p,id:"lcp-main-container",style:{minHeight:"200px"},children:(0,r.jsx)(t.InnerBlocks,{...p})})]})},save:function({attributes:e}){const{maxWidth:n="100%",expandVertical:i}=e,s=t.useBlockProps.save(),a=i?`${s.className} lcp-grow-vertical`:s.className,o={maxWidth:n};return(0,r.jsx)("div",{...s,id:"lcp-main-container",className:a,style:o,children:(0,r.jsx)("div",{id:"lcp-main-container-inner",children:(0,r.jsx)(t.InnerBlocks.Content,{})})})}})}},t={};function i(e){var r=t[e];if(void 0!==r)return r.exports;var s=t[e]={exports:{}};return n[e](s,s.exports,i),s.exports}i.m=n,e=[],i.O=(n,t,r,s)=>{if(!t){var a=1/0;for(p=0;p<e.length;p++){t=e[p][0],r=e[p][1],s=e[p][2];for(var o=!0,l=0;l<t.length;l++)(!1&s||a>=s)&&Object.keys(i.O).every((e=>i.O[e](t[l])))?t.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(p--,1);var c=r();void 0!==c&&(n=c)}}return n}s=s||0;for(var p=e.length;p>0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[t,r,s]},i.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};i.O.j=n=>0===e[n];var n=(n,t)=>{var r,s,a=t[0],o=t[1],l=t[2],c=0;if(a.some((n=>0!==e[n]))){for(r in o)i.o(o,r)&&(i.m[r]=o[r]);if(l)var p=l(i)}for(n&&n(t);c<a.length;c++)s=a[c],i.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return i.O(p)},t=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})();var r=i.O(void 0,[350],(()=>i(998)));r=i.O(r)})();

View File

@ -16,7 +16,9 @@ export default function Save( { attributes } ) {
return ( return (
<div {...blockProps} id="lcp-main-container" className={className} style={style}> <div {...blockProps} id="lcp-main-container" className={className} style={style}>
<InnerBlocks.Content /> <div id="lcp-main-container-inner">
<InnerBlocks.Content />
</div>
</div> </div>
); );
} }

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '9fbf94ac3507c2365b0a'); <?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'e510dd9214b81b305e13');

View File

@ -1 +1 @@
(()=>{"use strict";var e,n={650:()=>{const e=window.wp.blocks,n=(window.wp.i18n,window.wp.blockEditor),r=window.ReactJSXRuntime,o=JSON.parse('{"UU":"lcp/sidecontent"}');(0,e.registerBlockType)(o.UU,{edit:function(){return(0,n.useBlockProps)(),(0,r.jsx)("div",{...n.useBlockProps,children:(0,r.jsx)("div",{id:"lcp-sidecontent",children:(0,r.jsx)(n.InnerBlocks,{renderAppender:()=>(0,r.jsx)(n.InnerBlocks.ButtonBlockAppender,{})})})})},save:function(){const e=n.useBlockProps.save();return(0,r.jsx)("div",{...e,id:"lcp-sidecontent",children:(0,r.jsx)(n.InnerBlocks.Content,{})})}})}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var s=r[e]={exports:{}};return n[e](s,s.exports,o),s.exports}o.m=n,e=[],o.O=(n,r,t,s)=>{if(!r){var i=1/0;for(d=0;d<e.length;d++){r=e[d][0],t=e[d][1],s=e[d][2];for(var c=!0,l=0;l<r.length;l++)(!1&s||i>=s)&&Object.keys(o.O).every((e=>o.O[e](r[l])))?r.splice(l--,1):(c=!1,s<i&&(i=s));if(c){e.splice(d--,1);var p=t();void 0!==p&&(n=p)}}return n}s=s||0;for(var d=e.length;d>0&&e[d-1][2]>s;d--)e[d]=e[d-1];e[d]=[r,t,s]},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};o.O.j=n=>0===e[n];var n=(n,r)=>{var t,s,i=r[0],c=r[1],l=r[2],p=0;if(i.some((n=>0!==e[n]))){for(t in c)o.o(c,t)&&(o.m[t]=c[t]);if(l)var d=l(o)}for(n&&n(r);p<i.length;p++)s=i[p],o.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return o.O(d)},r=self.webpackChunklcp_sidecontent=self.webpackChunklcp_sidecontent||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))})();var t=o.O(void 0,[350],(()=>o(650)));t=o.O(t)})(); (()=>{"use strict";var e,n={650:()=>{const e=window.wp.blocks,n=(window.wp.i18n,window.wp.blockEditor),r=window.ReactJSXRuntime,o=JSON.parse('{"UU":"lcp/sidecontent"}');(0,e.registerBlockType)(o.UU,{edit:function(){return(0,n.useBlockProps)(),(0,r.jsx)("div",{...n.useBlockProps,children:(0,r.jsx)("div",{id:"lcp-sidecontent",children:(0,r.jsx)(n.InnerBlocks,{renderAppender:()=>(0,r.jsx)(n.InnerBlocks.ButtonBlockAppender,{})})})})},save:function(){const e=n.useBlockProps.save();return(0,r.jsx)("div",{...e,id:"lcp-sidecontent",children:(0,r.jsx)("div",{id:"lcp-sidecontent-inner",children:(0,r.jsx)(n.InnerBlocks.Content,{})})})}})}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,o),i.exports}o.m=n,e=[],o.O=(n,r,t,i)=>{if(!r){var s=1/0;for(p=0;p<e.length;p++){r=e[p][0],t=e[p][1],i=e[p][2];for(var c=!0,l=0;l<r.length;l++)(!1&i||s>=i)&&Object.keys(o.O).every((e=>o.O[e](r[l])))?r.splice(l--,1):(c=!1,i<s&&(s=i));if(c){e.splice(p--,1);var d=t();void 0!==d&&(n=d)}}return n}i=i||0;for(var p=e.length;p>0&&e[p-1][2]>i;p--)e[p]=e[p-1];e[p]=[r,t,i]},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};o.O.j=n=>0===e[n];var n=(n,r)=>{var t,i,s=r[0],c=r[1],l=r[2],d=0;if(s.some((n=>0!==e[n]))){for(t in c)o.o(c,t)&&(o.m[t]=c[t]);if(l)var p=l(o)}for(n&&n(r);d<s.length;d++)i=s[d],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return o.O(p)},r=self.webpackChunklcp_sidecontent=self.webpackChunklcp_sidecontent||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))})();var t=o.O(void 0,[350],(()=>o(650)));t=o.O(t)})();

View File

@ -20,11 +20,12 @@ export default function Save() {
return ( return (
<div {...blockProps} id="lcp-sidecontent"> <div {...blockProps} id="lcp-sidecontent">
<div id="lcp-sidecontent-inner">
<InnerBlocks.Content /> <InnerBlocks.Content />
</div>
</div> </div>

View File

@ -241,7 +241,7 @@ function render_lcp_theme_settings_page() {
<h1>Theme Settings</h1> <h1>Theme Settings</h1>
<!-- Tab Structure --> <!-- Tab Structure -->
<div class="tab-container"> <div class="lcp-tab-container lcp-support-hash">
<!-- Tabs --> <!-- Tabs -->
<ul class="tabs"> <ul class="tabs">
<li class="tab-link active" data-tab="custom-meta">Custom Meta</li> <li class="tab-link active" data-tab="custom-meta">Custom Meta</li>

View File

@ -41,7 +41,7 @@ Version: 0.0.1
/* Main Content */ /* Main Content */
.lcp-has-sidecontent #lcp-main-container > * > *{ padding:20px .lcp-has-sidecontent #lcp-main-container > *{ padding-left:40px
} }
@ -53,15 +53,23 @@ Version: 0.0.1
overflow:auto; overflow:auto;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0;
width: 340px; width: 340px;
height: 100%; height: calc(100vh - var(--lcp--header--height));
background: #fff; background: #fff;
border-right: 2px solid #eee; border-right: 2px solid #eee;
z-index: 2; z-index: 2;
outline: 0; outline: 0;
}
}
#lcp-sidecontent #lcp-sidecontent-inner {
padding:10px
}
.admin-bar #lcp-sidecontent {
height:calc(100vh - var(--lcp--header--height) - 32px)
}
#lcp-sidecontent:not(.lcp-fixed) {
top:0
}
#lcp-viewport-outer.lcp-has-sticky-header #lcp-sidecontent { #lcp-viewport-outer.lcp-has-sticky-header #lcp-sidecontent {
top: var(--lcp--header--height); top: var(--lcp--header--height);
position:fixed!important; position:fixed!important;
@ -116,10 +124,10 @@ Version: 0.0.1
width: 100% width: 100%
} }
#lcp-sidecontent {top:var(--lcp---header--height)} #lcp-sidecontent {top:var(--lcp---header--height)}
#lcp-sidecontent { #lcp-sidecontent:not(.lcp-fixed) {
top: calc(var(--lcp--header--height) ); top: calc(var(--lcp--header--height) );
} }
.admin-bar #lcp-sidecontent.lcp-fixed { #lcp-viewport-outer:not(.lcp-has-sticky-header).admin-bar #lcp-sidecontent.lcp-fixed {
top: calc(var(--lcp--header--height) + 32px); top: calc(var(--lcp--header--height) + 32px);
} }
@ -130,7 +138,12 @@ Version: 0.0.1
right: 0; right: 0;
z-index: 3; z-index: 3;
} }
#lcp-header-sidecontent.lcp-fixed {
height:100vh
}
.admin-bar #lcp-sidecontent.lcp-fixed {
height:calc(100vh - 32px)
}
#lcp-header-container.lcp-sticky-on-scroll.lcp-fixed { #lcp-header-container.lcp-sticky-on-scroll.lcp-fixed {
position: fixed; position: fixed;
top:32px; top:32px;
@ -306,3 +319,12 @@ Version: 0.0.1
display: block; display: block;
} }
#lcp-sidecontent {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
border-radius:5px
}

View File

@ -5,6 +5,7 @@
], ],
"settings": { "settings": {
"appearanceTools": true, "appearanceTools": true,
"color": { "color": {
"defaultDuotone": false, "defaultDuotone": false,