v2.2
MENU ANIMATIONS
UI SURECART
BUTTONS
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Tabs Configurator - BricksFusion</title>
<style>
:root {
--background: #000;
--card-bg: #1e1e1e;
--card-bg-hover: #252525;
--text-primary: #f2f2f7;
--text-secondary: #8e8e93;
--accent: #ef6013;
--accent-hover: #c64c0c;
--border: #2c2c2e;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--track: #2c2c2e;
--thumb: #ef6013;
--card-radius: 16px;
--input-radius: 8px;
--button-radius: 12px;
--transition: all 0.25s ease;
--font: 'Inter', BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
--action-bar-height: 70px;
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
background-color: var(--background);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: var(--action-bar-height);
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--action-bar-height);
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
border-top: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 1.5rem;
gap: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.breadcrumb-item {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 500;
text-decoration: none;
transition: var(--transition);
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.breadcrumb-item:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.breadcrumb-item.active {
color: var(--accent);
background-color: rgba(239, 96, 19, 0.1);
}
.breadcrumb-separator {
color: var(--text-secondary);
font-size: var(--text-xs);
opacity: 0.5;
}
.action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.action-btn {
padding: 0.6rem 1rem;
background-color: var(--card-bg);
color: var(--text-primary);
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--button-radius);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
white-space: nowrap;
}
.action-btn:hover {
background-color: var(--card-bg-hover);
border-color: var(--accent);
transform: translateY(-1px);
}
.action-btn.primary {
background: linear-gradient(90deg, var(--accent), #ff8c51);
border-color: var(--accent);
color: white;
}
.action-btn.primary:hover {
background: linear-gradient(90deg, var(--accent-hover), #e67a3f);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 96, 19, 0.3);
}
.data-attribute-display {
background-color: rgba(50, 50, 50, 0.8);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #ff8c51;
cursor: pointer;
transition: var(--transition);
user-select: all;
}
.data-attribute-display:hover {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--accent), #ff8c51);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
font-size: var(--text-s);
color: var(--text-secondary);
font-weight: 500;
}
.instructions-toggle {
margin-bottom: 2rem;
}
.instructions-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.instructions-header {
padding: 1rem 1.5rem;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid transparent;
}
.instructions-header:hover {
background-color: var(--card-bg-hover);
}
.instructions-card.expanded .instructions-header {
border-bottom-color: var(--border);
}
.instructions-title {
font-size: var(--text-s);
font-weight: 600;
}
.toggle-icon {
font-size: 1.2em;
transition: transform 0.3s ease;
}
.toggle-icon.expanded {
transform: rotate(180deg);
}
.instructions-content {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.instructions-content.show {
max-height: 500px;
padding: 1.5rem;
}
.instructions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.how-to-use ol {
padding-left: 1.5rem;
}
.how-to-use li {
margin-bottom: 0.75rem;
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
.how-to-use strong {
color: var(--text-primary);
font-weight: 600;
}
.how-to-use code {
background-color: rgba(50, 50, 50, 0.5);
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #ff8c51;
}
.content {
display: grid;
grid-template-columns: 1fr 500px;
gap: 2rem;
align-items: start;
}
.preview-section {
position: sticky;
top: 2rem;
}
.controls-section {
max-width: 500px;
}
.card {
background-color: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.preview-container {
height: 400px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: var(--card-radius);
background-color: #252525;
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.preview-content {
text-align: center;
font-weight: bold;
font-size: var(--text-s);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.preview-controls {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 10;
}
.card-heading {
padding: 1rem 1.5rem;
font-size: var(--text-s);
font-weight: 600;
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.card-action-btn {
padding: 0.4rem 0.8rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: var(--text-xs);
transition: var(--transition);
}
.card-action-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
background-color: rgba(239, 96, 19, 0.1);
}
.card-content {
padding: 1.5rem;
}
.control-group {
margin-bottom: 1.5rem;
position: relative;
}
.control-group:last-child {
margin-bottom: 0;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.label-text {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.help-tooltip {
cursor: help;
opacity: 0.7;
transition: var(--transition);
}
.help-tooltip:hover {
opacity: 1;
color: var(--accent);
}
.value-display {
display: flex;
align-items: center;
gap: 0.5rem;
}
.value-text {
font-size: var(--text-xs);
color: var(--text-secondary);
background-color: rgba(50, 50, 50, 0.5);
padding: 2px 8px;
border-radius: 4px;
min-width: 45px;
text-align: center;
}
.reset-btn {
padding: 0.2rem 0.4rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
transition: var(--transition);
}
.reset-btn:hover {
color: var(--danger);
border-color: var(--danger);
background-color: rgba(220, 53, 69, 0.1);
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--track);
border-radius: 3px;
outline: none;
margin: 0.8rem 0;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--thumb);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(239, 96, 19, 0.5);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--thumb);
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(239, 96, 19, 0.5);
}
.color-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.color-row {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem 1.25rem;
background-color: rgba(30, 30, 30, 0.7);
border: 1px solid var(--border);
border-radius: var(--input-radius);
transition: var(--transition);
}
.color-row:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(239, 96, 19, 0.1);
}
.color-picker-container {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--border);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
background: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
--selected-color: #3b82f6;
}
.color-picker-container:hover {
border-color: var(--accent);
transform: scale(1.05);
box-shadow: 0 0 12px rgba(239, 96, 19, 0.3);
}
.color-picker-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--selected-color, #3b82f6);
border-radius: 6px;
transition: var(--transition);
}
input[type="color"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
cursor: pointer;
background: transparent;
opacity: 0;
z-index: 2;
}
.color-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.color-label {
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 0.25rem;
}
.color-input {
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 12px;
transition: var(--transition);
min-width: 0;
}
.color-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(239, 96, 19, 0.2);
outline: none;
}
.color-input.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}
.hex-input,
.hsl-input {
width: 100%;
}
.color-input-group:nth-child(2) {
flex: 0.3;
}
.color-input-group:nth-child(3) {
flex: 0.7;
}
input[type="text"],
input[type="url"],
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
font-family: var(--font);
font-size: var(--text-xs);
color: var(--text-primary);
background-color: var(--card-bg);
margin-bottom: 0.75rem;
outline: none;
transition: var(--transition);
}
input[type="text"]:focus,
input[type="url"]:focus,
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(239, 96, 19, 0.2);
}
.toggle-switch-wrapper {
display: flex;
align-items: center;
margin: 0.5rem 0;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--card-bg);
border: 1px solid var(--border);
transition: .4s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 3px;
background-color: var(--text-secondary);
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--accent);
border-color: var(--accent);
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
background-color: white;
}
.toggle-label {
margin-left: 10px;
font-size: var(--text-xs);
color: var(--text-secondary);
}
input:checked ~ .toggle-label {
color: var(--accent);
}
.tab-inputs {
margin-bottom: 1rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
padding: 1rem;
position: relative;
}
.tab-inputs:last-child {
margin-bottom: 0;
}
.tab-count {
position: absolute;
top: -10px;
left: 10px;
background-color: var(--accent);
color: white;
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
}
.tab-action-buttons {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.action-button {
flex: 1;
padding: 0.7rem 1rem;
border: none;
border-radius: var(--input-radius);
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}
.add-btn {
background-color: #2c2c2e;
color: white;
}
.add-btn:hover {
background-color: #3a3a3c;
transform: translateY(-2px);
}
.remove-btn {
background-color: rgba(255, 59, 48, 0.2);
color: #ff3b30;
}
.remove-btn:hover {
background-color: rgba(255, 59, 48, 0.3);
transform: translateY(-2px);
}
.add-separator-btn {
background-color: rgba(10, 132, 255, 0.2);
color: #0a84ff;
}
.add-separator-btn:hover {
background-color: rgba(10, 132, 255, 0.3);
transform: translateY(-2px);
}
.separator-item {
background-color: rgba(100, 100, 100, 0.2);
border-radius: 4px;
padding: 4px;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
color: var(--text-secondary);
}
.icon-select-btn {
padding: 8px;
border-radius: var(--input-radius);
background-color: var(--card-bg);
border: 1px solid var(--border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--text-secondary);
transition: var(--transition);
font-size: var(--text-xs);
font-weight: 500;
}
.icon-select-btn:hover {
background-color: var(--card-bg-hover);
border-color: var(--accent);
color: var(--text-primary);
}
.input-with-label {
display: flex;
flex-direction: column;
margin-bottom: 0.75rem;
}
.input-with-label label {
font-size: var(--text-xs);
margin-bottom: 0.25rem;
color: var(--text-secondary);
}
.radio-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 1rem;
}
.radio-option {
display: flex;
align-items: center;
cursor: pointer;
}
.radio-option input[type="radio"] {
margin-right: 0.8rem;
cursor: pointer;
accent-color: var(--accent);
}
.radio-option label {
font-size: var(--text-xs);
color: var(--text-secondary);
cursor: pointer;
}
.radio-option input[type="radio"]:checked + label {
color: var(--text-primary);
font-weight: 500;
}
.notification {
position: fixed;
bottom: calc(var(--action-bar-height) + 1rem);
left: 50%;
background-color: var(--success);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--input-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1001;
transform: translate(-50%, 200px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
font-size: var(--text-xs);
font-weight: 500;
max-width: 320px;
word-wrap: break-word;
line-height: 1.4;
text-align: center;
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.icon-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.icon-modal.active {
visibility: visible;
opacity: 1;
}
.icon-modal-content {
width: 90%;
max-width: 900px;
max-height: 90vh;
background-color: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
border: 1px solid var(--border);
}
.icon-modal.active .icon-modal-content {
transform: translateY(0);
}
.icon-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.icon-modal-title {
font-size: var(--text-s);
font-weight: 600;
}
.close-modal {
background: none;
border: none;
font-size: var(--text-s);
cursor: pointer;
color: var(--text-secondary);
transition: var(--transition);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-modal:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.1);
}
.icon-modal-body {
padding: 1.5rem;
overflow-y: auto;
max-height: calc(90vh - 200px);
-webkit-overflow-scrolling: touch;
}
.icon-upload-section {
margin-bottom: 2rem;
padding: 1rem;
border: 2px dashed var(--border);
border-radius: var(--input-radius);
text-align: center;
}
.icon-upload-section h4 {
margin-bottom: 1rem;
color: var(--text-primary);
font-size: 14px;
}
.upload-area {
position: relative;
padding: 2rem;
background-color: rgba(30, 30, 30, 0.5);
border-radius: var(--input-radius);
transition: var(--transition);
cursor: pointer;
}
.upload-area:hover {
background-color: rgba(239, 96, 19, 0.1);
border-color: var(--accent);
}
.upload-area.dragover {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.upload-icon {
font-size: 2rem;
color: var(--text-secondary);
}
.upload-text {
font-size: var(--text-xs);
color: var(--text-secondary);
}
.upload-subtext {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.7;
}
.file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.custom-icons-section {
margin-bottom: 2rem;
}
.custom-icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 10px;
margin-top: 1rem;
}
.custom-icon-item {
position: relative;
padding: 12px;
border-radius: var(--input-radius);
background-color: var(--card-bg);
border: 1px solid var(--border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
aspect-ratio: 1;
}
.custom-icon-item:hover {
background-color: rgba(239, 96, 19, 0.1);
border-color: var(--accent);
transform: translateY(-2px);
}
.custom-icon-item.selected {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
}
.custom-icon-item svg {
width: 24px;
height: 24px;
color: var(--text-secondary);
}
.custom-icon-item.selected svg {
color: var(--accent);
}
.delete-custom-icon {
position: absolute;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
background-color: var(--danger);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.delete-custom-icon:hover {
background-color: #c82333;
transform: scale(1.1);
}
.icon-search {
margin-bottom: 1rem;
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
background-color: var(--card-bg);
color: var(--text-primary);
font-size: var(--text-xs);
}
.icon-search:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(239, 96, 19, 0.2);
outline: none;
}
.icon-categories {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.category-btn {
padding: 0.5rem 0.75rem;
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--input-radius);
color: var(--text-secondary);
font-size: 11px;
cursor: pointer;
transition: var(--transition);
}
.category-btn:hover,
.category-btn.active {
background-color: rgba(239, 96, 19, 0.1);
border-color: var(--accent);
color: var(--accent);
}
.modal-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 10px;
max-height: 400px;
overflow-y: auto;
padding: 10px 0;
}
.icon-modal-option {
padding: 12px;
border-radius: var(--input-radius);
background-color: var(--card-bg);
border: 1px solid var(--border);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: var(--transition);
aspect-ratio: 1;
position: relative;
}
.icon-modal-option:hover {
background-color: rgba(239, 96, 19, 0.1);
border-color: var(--accent);
transform: translateY(-2px);
}
.icon-modal-option.selected {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
}
.icon-modal-option svg {
width: 24px;
height: 24px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.icon-modal-option.selected svg {
color: var(--accent);
}
.icon-name {
font-size: 9px;
color: var(--text-secondary);
text-align: center;
line-height: 1.2;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-modal-option.selected .icon-name {
color: var(--accent);
}
.icon-modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 1rem;
}
.btn {
display: block;
width: 100%;
padding: 0.9rem 1.5rem;
background-color: var(--accent);
color: white;
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
text-align: center;
border: none;
border-radius: var(--button-radius);
cursor: pointer;
transition: var(--transition);
}
.btn:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(239, 96, 19, 0.3);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(239, 96, 19, 0.2);
}
@media (max-width: 1200px) {
.content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.preview-section {
position: static;
}
.controls-section {
max-width: 100%;
}
}
@media (max-width: 768px) {
.action-bar {
flex-direction: column;
height: auto;
min-height: var(--action-bar-height);
padding: 0.75rem;
}
.breadcrumb {
order: 1;
width: 100%;
}
.action-buttons {
order: 2;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
body {
padding-bottom: calc(var(--action-bar-height) + 20px);
}
.notification {
bottom: calc(var(--action-bar-height) + 2rem);
max-width: 280px;
transform: translate(-50%, 250px);
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.color-row {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.color-picker-container {
align-self: center;
margin-bottom: 0.5rem;
}
.color-input-group {
align-items: stretch;
}
.hex-input,
.hsl-input {
width: 100%;
}
.preview-container {
height: 300px;
}
.data-attribute-display {
font-size: 10px;
padding: 0.4rem 0.6rem;
}
.action-btn {
font-size: 11px;
padding: 0.5rem 0.8rem;
}
.page-title {
font-size: 2rem;
}
.modal-icon-grid {
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
.custom-icons-grid {
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
button:focus-visible,
input:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--background);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
</style>
</head>
<body>
<div class="action-bar">
<nav class="breadcrumb">
<a href="https://bricksfusion.com" class="breadcrumb-item">Home</a>
<span class="breadcrumb-separator">›</span>
<a href="https://bricksfusion.com/menu-animations/" class="breadcrumb-item">Menu animations</a>
<span class="breadcrumb-separator">›</span>
<span class="breadcrumb-item active">Expandable Tabs</span>
</nav>
<div class="action-buttons">
<div class="data-attribute-display" id="quick-attribute" title="Click to copy data attribute">
data-expandable-tabs
</div>
<button class="action-btn primary" id="download-config" title="Copy JavaScript code (Ctrl+D)" data-protection-animation="true">
<span>📋</span>
Copy JS
</button>
<button class="action-btn" id="copy-full-section" title="Copy complete section JSON for Bricks Builder (Ctrl+S)" data-protection-animation="true">
<span>📦</span>
Copy Full Section
</button>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 class="page-title">Expandable Tabs</h1>
<p class="page-subtitle">Interactive navigation tabs for Bricks Builder</p>
</div>
<div class="instructions-toggle">
<div class="instructions-card" id="instructions-card">
<div class="instructions-header" id="instructions-toggle">
<div class="instructions-title">
How to Use & Code Information
</div>
<span class="toggle-icon">▼</span>
</div>
<div class="instructions-content" id="instructions-content">
<div class="instructions-grid">
<div class="how-to-use">
<ol>
<li>Customize your expandable tabs using the controls below</li>
<li>Choose from 50+ built-in icons or upload your own SVG icons</li>
<li>Click <strong>Copy JS</strong> to copy the JavaScript code to clipboard</li>
<li>In Bricks Builder, add a <strong>Code</strong> element</li>
<li>Paste or upload the JavaScript code</li>
<li>To add the effect to any section: go to <strong>Section → Style → Attributes</strong>, add <code>data-expandable-tabs</code> as attribute name (leave value empty)</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="tabs-preview" data-expandable-tabs="true">
<div class="preview-content">Interactive Expandable Tabs Preview</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Tab Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-tabs" title="Reset Tabs">↺</button>
</div>
</div>
<div class="card-content">
<div id="tabs-container"></div>
<div class="tab-action-buttons">
<button class="action-button add-btn" id="add-tab-btn">Add Tab</button>
<button class="action-button add-separator-btn" id="add-separator-btn">Add Separator</button>
<button class="action-button remove-btn" id="remove-last-btn">Remove Last</button>
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Style Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-style" title="Reset Style">↺</button>
</div>
</div>
<div class="card-content">
<div class="color-list">
<div class="color-row">
<div class="color-picker-container">
<input type="color" id="background-color" value="#1e1e1e">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="background-color-hex" value="#1e1e1e" placeholder="#FFFFFF">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="background-color-hsl" placeholder="hsl(0, 100%, 50%)">
</div>
</div>
<div class="color-row">
<div class="color-picker-container">
<input type="color" id="active-bg-color" value="#2c2c2e">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="active-bg-color-hex" value="#2c2c2e" placeholder="#FFFFFF">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="active-bg-color-hsl" placeholder="hsl(0, 100%, 50%)">
</div>
</div>
<div class="color-row">
<div class="color-picker-container">
<input type="color" id="border-color" value="#38383a">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="border-color-hex" value="#38383a" placeholder="#FFFFFF">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="border-color-hsl" placeholder="hsl(0, 100%, 50%)">
</div>
</div>
<div class="color-row">
<div class="color-picker-container">
<input type="color" id="primary-color" value="#3b82f6">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="primary-color-hex" value="#3b82f6" placeholder="#FFFFFF">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="primary-color-hsl" placeholder="hsl(0, 100%, 50%)">
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Border Radius
<span class="help-tooltip" title="Corner roundness of the tabs container">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="border-radius-value">16</span>px</span>
<button class="reset-btn" onclick="resetParameter('border-radius', 16)">↺</button>
</div>
</div>
<input type="range" id="border-radius" min="0" max="24" step="1" value="16">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Tab Height
<span class="help-tooltip" title="Height of individual tab buttons">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="tab-height-value">36</span>px</span>
<button class="reset-btn" onclick="resetParameter('tab-height', 36)">↺</button>
</div>
</div>
<input type="range" id="tab-height" min="24" max="56" step="1" value="36">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Animation Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-animation" title="Reset Animation">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Animation Duration
<span class="help-tooltip" title="Speed of tab expansion animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="animation-duration-value">300</span>ms</span>
<button class="reset-btn" onclick="resetParameter('animation-duration', 300)">↺</button>
</div>
</div>
<input type="range" id="animation-duration" min="100" max="1000" step="50" value="300">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Animation Delay
<span class="help-tooltip" title="Delay before animation starts">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="animation-delay-value">50</span>ms</span>
<button class="reset-btn" onclick="resetParameter('animation-delay', 50)">↺</button>
</div>
</div>
<input type="range" id="animation-delay" min="0" max="200" step="10" value="50">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Behavior Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-behavior" title="Reset Behavior">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">Auto-detect Active Page</span>
</div>
<div class="toggle-switch-wrapper">
<label class="toggle-switch">
<input type="checkbox" id="auto-detect-page" checked>
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">Automatically highlight the tab for the current page</span>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Expand on Hover</span>
</div>
<div class="toggle-switch-wrapper">
<label class="toggle-switch">
<input type="checkbox" id="expand-on-hover">
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">Tabs will expand when hovered instead of clicked</span>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Close on Click Outside</span>
</div>
<div class="toggle-switch-wrapper">
<label class="toggle-switch">
<input type="checkbox" id="close-on-outside" checked>
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">Tabs will close when clicking elsewhere on the page</span>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Collapse on Second Click</span>
</div>
<div class="toggle-switch-wrapper">
<label class="toggle-switch">
<input type="checkbox" id="collapse-on-second" checked>
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">Clicking an active tab collapses it</span>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Icon Position</span>
</div>
<div class="radio-group">
<div class="radio-option">
<input type="radio" id="icon-left" name="icon-position" value="left" checked>
<label for="icon-left">Left</label>
</div>
<div class="radio-option">
<input type="radio" id="icon-right" name="icon-position" value="right">
<label for="icon-right">Right</label>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<div class="icon-modal" id="icon-modal">
<div class="icon-modal-content">
<div class="icon-modal-header">
<h3 class="icon-modal-title">Select an Icon</h3>
<button class="close-modal" id="close-icon-modal">×</button>
</div>
<div class="icon-modal-body">
<!-- Upload Section -->
<div class="icon-upload-section">
<h4>Upload Custom SVG</h4>
<div class="upload-area" id="upload-area">
<input type="file" class="file-input" id="svg-file-input" accept=".svg,image/svg+xml">
<div class="upload-content">
<div class="upload-icon">📄</div>
<div class="upload-text">Click to upload or drag & drop</div>
<div class="upload-subtext">SVG files only</div>
</div>
</div>
</div>
<!-- Custom Icons Section -->
<div class="custom-icons-section" id="custom-icons-section" style="display: none;">
<h4 style="margin-bottom: 1rem; color: var(--text-primary); font-size: 14px;">Your Custom Icons</h4>
<div class="custom-icons-grid" id="custom-icons-grid"></div>
</div>
<!-- Search and Filter -->
<input type="text" class="icon-search" id="icon-search" placeholder="Search icons...">
<div class="icon-categories">
<button class="category-btn active" data-category="all">All</button>
<button class="category-btn" data-category="navigation">Navigation</button>
<button class="category-btn" data-category="ui">UI/UX</button>
<button class="category-btn" data-category="content">Content</button>
<button class="category-btn" data-category="communication">Communication</button>
<button class="category-btn" data-category="ecommerce">E-commerce</button>
<button class="category-btn" data-category="social">Social</button>
<button class="category-btn" data-category="tools">Tools</button>
</div>
<!-- Icon Grid -->
<div class="modal-icon-grid" id="icon-grid"></div>
</div>
<div class="icon-modal-footer">
<button class="btn" id="select-icon-btn">Select Icon</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let tabsConfig = {
tabs: [
{ title: "Home", icon: "home", url: "" },
{ type: "separator" },
{ title: "Settings", icon: "settings", url: "" },
{ type: "separator" },
{ title: "Profile", icon: "user", url: "" }
],
backgroundColor: "#1e1e1e",
activeBgColor: "#2c2c2e",
borderColor: "#38383a",
primaryColor: "#3b82f6",
borderRadius: 16,
tabHeight: 36,
animationDuration: 300,
animationDelay: 50,
expandOnHover: false,
closeOnOutsideClick: true,
collapseOnSecondClick: true,
iconPosition: "left",
autoDetectActivePage: true
};
const defaultConfig = { ...tabsConfig };
let currentTabsAnimation = null;
let customIcons = {};
let currentTabIndex = null;
let selectedIconName = null;
let currentCategory = 'all';
let searchTerm = '';
// Expanded icon library with 50+ icons categorized
const ICONS = {
// Navigation (8 icons)
home: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>', category: 'navigation' },
menu: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></svg>', category: 'navigation' },
search: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>', category: 'navigation' },
arrowLeft: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>', category: 'navigation' },
arrowRight: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>', category: 'navigation' },
arrowUp: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>', category: 'navigation' },
arrowDown: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>', category: 'navigation' },
compass: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>', category: 'navigation' },
// UI/UX (12 icons)
settings: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>', category: 'ui' },
user: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>', category: 'ui' },
users: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="m22 21-3-3 3-3"/><path d="M16 3h6v6"/></svg>', category: 'ui' },
eye: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>', category: 'ui' },
eyeOff: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>', category: 'ui' },
lock: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>', category: 'ui' },
unlock: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg>', category: 'ui' },
shield: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>', category: 'ui' },
check: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>', category: 'ui' },
x: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', category: 'ui' },
plus: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>', category: 'ui' },
minus: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>', category: 'ui' },
// Content (10 icons)
file: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>', category: 'content' },
folder: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>', category: 'content' },
image: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>', category: 'content' },
video: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>', category: 'content' },
music: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>', category: 'content' },
download: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>', category: 'content' },
upload: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>', category: 'content' },
archive: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>', category: 'content' },
book: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>', category: 'content' },
bookmark: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>', category: 'content' },
// Communication (8 icons)
mail: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>', category: 'communication' },
phone: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>', category: 'communication' },
message: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>', category: 'communication' },
bell: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>', category: 'communication' },
chat: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>', category: 'communication' },
send: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>', category: 'communication' },
inbox: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 21 6 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>', category: 'communication' },
wifi: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/></svg>', category: 'communication' },
// E-commerce (8 icons)
shoppingCart: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>', category: 'ecommerce' },
creditCard: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>', category: 'ecommerce' },
dollarSign: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="2" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>', category: 'ecommerce' },
gift: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.9 4.9 0 0 1 12 8a4.9 4.9 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>', category: 'ecommerce' },
tag: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42l-8.704-8.704Z"/><circle cx="7.5" cy="7.5" r=".5"/></svg>', category: 'ecommerce' },
percent: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="5" y1="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>', category: 'ecommerce' },
truck: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>', category: 'ecommerce' },
package: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></svg>', category: 'ecommerce' },
// Social (6 icons)
heart: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>', category: 'social' },
star: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>', category: 'social' },
share: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>', category: 'social' },
thumbsUp: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h3.73a2 2 0 0 1 1.92 2.56z"/></svg>', category: 'social' },
follow: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>', category: 'social' },
link: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>', category: 'social' },
// Tools (8 icons)
edit: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>', category: 'tools' },
trash: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c-1 0 2 1 2 2v2"/></svg>', category: 'tools' },
save: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>', category: 'tools' },
copy: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>', category: 'tools' },
printer: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>', category: 'tools' },
filter: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>', category: 'tools' },
tool: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>', category: 'tools' },
wrench: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>', category: 'tools' },
// Additional common icons (4 icons)
calendar: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>', category: 'ui' },
clock: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>', category: 'ui' },
globe: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" x2="22" y1="12" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>', category: 'navigation' },
zap: { svg: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>', category: 'ui' }
};
function loadCustomIcons() {
try {
const saved = localStorage.getItem('bricksfusion-custom-icons');
if (saved) {
customIcons = JSON.parse(saved);
}
} catch (e) {
console.warn('Failed to load custom icons:', e);
}
}
function saveCustomIcons() {
try {
localStorage.setItem('bricksfusion-custom-icons', JSON.stringify(customIcons));
} catch (e) {
console.warn('Failed to save custom icons:', e);
}
}
function isValidSVG(svgString) {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');
const svg = doc.querySelector('svg');
if (!svg) return false;
if (doc.querySelector('parsererror')) return false;
// Check for potentially dangerous elements
const dangerousElements = ['script', 'object', 'embed', 'iframe'];
for (const tag of dangerousElements) {
if (doc.querySelector(tag)) return false;
}
return true;
} catch (e) {
return false;
}
}
function sanitizeSVG(svgString) {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');
const svg = doc.querySelector('svg');
if (!svg) return null;
// Set standard attributes
svg.setAttribute('width', '20');
svg.setAttribute('height', '20');
svg.setAttribute('viewBox', svg.getAttribute('viewBox') || '0 0 24 24');
svg.setAttribute('fill', 'none');
svg.setAttribute('stroke', 'currentColor');
svg.setAttribute('stroke-width', '2');
svg.setAttribute('stroke-linecap', 'round');
svg.setAttribute('stroke-linejoin', 'round');
// Remove potentially dangerous attributes and elements
const dangerousElements = ['script', 'object', 'embed', 'iframe'];
dangerousElements.forEach(tag => {
const elements = svg.querySelectorAll(tag);
elements.forEach(el => el.remove());
});
const dangerousAttrs = ['onload', 'onerror', 'onclick', 'onmouseover'];
svg.querySelectorAll('*').forEach(el => {
dangerousAttrs.forEach(attr => {
if (el.hasAttribute(attr)) {
el.removeAttribute(attr);
}
});
});
return svg.outerHTML;
} catch (e) {
return null;
}
}
function generateCustomIconId() {
return 'custom_' + Math.random().toString(36).substring(2, 10) + Date.now().toString(36);
}
function handleFileUpload(file) {
if (!file || file.type !== 'image/svg+xml') {
showNotification('Please select a valid SVG file', 'error');
return;
}
if (file.size > 50000) { // 50KB limit
showNotification('SVG file is too large. Please use a file under 50KB', 'error');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const svgContent = e.target.result;
if (!isValidSVG(svgContent)) {
showNotification('Invalid SVG file format', 'error');
return;
}
const sanitized = sanitizeSVG(svgContent);
if (!sanitized) {
showNotification('Failed to process SVG file', 'error');
return;
}
const iconId = generateCustomIconId();
const iconName = file.name.replace(/\.(svg)$/i, '').substring(0, 20);
customIcons[iconId] = {
name: iconName,
svg: sanitized,
category: 'custom'
};
saveCustomIcons();
renderCustomIcons();
showNotification(`Custom icon "${iconName}" uploaded successfully!`);
};
reader.onerror = function() {
showNotification('Failed to read SVG file', 'error');
};
reader.readAsText(file);
}
function renderCustomIcons() {
const customIconsSection = document.getElementById('custom-icons-section');
const customIconsGrid = document.getElementById('custom-icons-grid');
const hasCustomIcons = Object.keys(customIcons).length > 0;
customIconsSection.style.display = hasCustomIcons ? 'block' : 'none';
if (!hasCustomIcons) return;
customIconsGrid.innerHTML = '';
Object.keys(customIcons).forEach(iconId => {
const icon = customIcons[iconId];
const iconElement = document.createElement('div');
iconElement.className = 'custom-icon-item';
iconElement.dataset.icon = iconId;
iconElement.innerHTML = `
${icon.svg}
<button class="delete-custom-icon" onclick="deleteCustomIcon('${iconId}')">×</button>
`;
iconElement.addEventListener('click', function(e) {
if (e.target.classList.contains('delete-custom-icon')) return;
document.querySelectorAll('.icon-modal-option, .custom-icon-item').forEach(opt => opt.classList.remove('selected'));
this.classList.add('selected');
selectedIconName = iconId;
});
customIconsGrid.appendChild(iconElement);
});
}
window.deleteCustomIcon = function(iconId) {
if (confirm('Are you sure you want to delete this custom icon?')) {
delete customIcons[iconId];
saveCustomIcons();
renderCustomIcons();
showNotification('Custom icon deleted');
}
};
function filterIcons() {
const iconGrid = document.getElementById('icon-grid');
iconGrid.innerHTML = '';
const filteredIcons = Object.keys(ICONS).filter(iconName => {
const icon = ICONS[iconName];
const matchesCategory = currentCategory === 'all' || icon.category === currentCategory;
const matchesSearch = !searchTerm || iconName.toLowerCase().includes(searchTerm.toLowerCase());
return matchesCategory && matchesSearch;
});
filteredIcons.forEach(iconName => {
const icon = ICONS[iconName];
const iconOption = document.createElement('div');
iconOption.className = `icon-modal-option ${iconName === selectedIconName ? 'selected' : ''}`;
iconOption.dataset.icon = iconName;
iconOption.innerHTML = `
${icon.svg}
<div class="icon-name">${iconName}</div>
`;
iconOption.addEventListener('click', function() {
document.querySelectorAll('.icon-modal-option, .custom-icon-item').forEach(opt => opt.classList.remove('selected'));
this.classList.add('selected');
selectedIconName = this.dataset.icon;
});
iconGrid.appendChild(iconOption);
});
}
function setupIconModal() {
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('svg-file-input');
const iconSearch = document.getElementById('icon-search');
const categoryBtns = document.querySelectorAll('.category-btn');
// File upload handlers
uploadArea.addEventListener('click', () => fileInput.click());
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('dragover');
const files = Array.from(e.dataTransfer.files);
const svgFile = files.find(file => file.type === 'image/svg+xml');
if (svgFile) {
handleFileUpload(svgFile);
}
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
handleFileUpload(e.target.files[0]);
}
});
// Search handler
iconSearch.addEventListener('input', (e) => {
searchTerm = e.target.value;
filterIcons();
});
// Category handlers
categoryBtns.forEach(btn => {
btn.addEventListener('click', () => {
categoryBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentCategory = btn.dataset.category;
filterIcons();
});
});
loadCustomIcons();
renderCustomIcons();
filterIcons();
}
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.className = `notification ${type}`;
notification.offsetHeight;
notification.style.visibility = 'visible';
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
if (!notification.classList.contains('show')) {
notification.style.visibility = 'hidden';
}
}, 400);
}, 3000);
}
function hexToHsl(hex) {
const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
function hslToHex(hsl) {
const match = hsl.match(/hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/);
if (!match) return null;
let h = parseInt(match[1]) / 360;
let s = parseInt(match[2]) / 100;
let l = parseInt(match[3]) / 100;
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
const toHex = (c) => {
const hex = Math.round(c * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
function isValidHex(hex) {
return /^#[0-9A-F]{6}$/i.test(hex);
}
function isValidHsl(hsl) {
return /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i.test(hsl);
}
function formatHex(value) {
let hex = value.replace(/[^0-9A-Fa-f#]/g, '');
if (!hex.startsWith('#')) {
hex = '#' + hex;
}
if (hex.length > 7) {
hex = hex.substring(0, 7);
}
return hex.toUpperCase();
}
function formatHsl(value) {
const cleanValue = value.replace(/[^\d,\s]/g, '');
const numbers = cleanValue.match(/\d+/g);
if (!numbers || numbers.length < 3) {
const partialMatch = value.match(/(\d+)/g);
if (partialMatch && partialMatch.length >= 1) {
const h = Math.min(360, Math.max(0, parseInt(partialMatch[0]) || 0));
const s = Math.min(100, Math.max(0, parseInt(partialMatch[1]) || 50));
const l = Math.min(100, Math.max(0, parseInt(partialMatch[2]) || 50));
return `hsl(${h}, ${s}%, ${l}%)`;
}
return value;
}
let h = Math.min(360, Math.max(0, parseInt(numbers[0])));
let s = Math.min(100, Math.max(0, parseInt(numbers[1])));
let l = Math.min(100, Math.max(0, parseInt(numbers[2])));
return `hsl(${h}, ${s}%, ${l}%)`;
}
function updateColorInputs(colorKey, value) {
const hexInput = document.getElementById(`${colorKey}-hex`);
const hslInput = document.getElementById(`${colorKey}-hsl`);
const colorInput = document.getElementById(colorKey);
hexInput.value = value;
colorInput.value = value;
const hsl = hexToHsl(value);
hslInput.value = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
if (colorPickerContainer) {
colorPickerContainer.style.setProperty('--selected-color', value);
}
}
function setupColorInputs(colorKey) {
const colorInput = document.getElementById(colorKey);
const hexInput = document.getElementById(`${colorKey}-hex`);
const hslInput = document.getElementById(`${colorKey}-hsl`);
colorInput.addEventListener('input', () => {
const color = colorInput.value;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
const configKey = colorKey.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
tabsConfig[configKey] = color;
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', color);
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
});
hexInput.addEventListener('input', (e) => {
let hex = e.target.value;
hex = formatHex(hex);
e.target.value = hex;
if (isValidHex(hex)) {
colorInput.value = hex;
hslInput.value = `hsl(${hexToHsl(hex).h}, ${hexToHsl(hex).s}%, ${hexToHsl(hex).l}%)`;
const configKey = colorKey.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
tabsConfig[configKey] = hex;
e.target.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
} else {
e.target.classList.add('invalid');
}
});
hexInput.addEventListener('blur', (e) => {
if (!isValidHex(e.target.value)) {
e.target.value = colorInput.value;
e.target.classList.remove('invalid');
}
});
hslInput.addEventListener('input', (e) => {
let hsl = e.target.value;
if (isValidHsl(hsl)) {
const hex = hslToHex(hsl);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
const configKey = colorKey.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
tabsConfig[configKey] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
return;
}
}
e.target.classList.add('invalid');
});
hslInput.addEventListener('blur', (e) => {
let hsl = e.target.value;
if (!isValidHsl(hsl) && hsl.trim()) {
const formatted = formatHsl(hsl);
if (isValidHsl(formatted)) {
e.target.value = formatted;
const hex = hslToHex(formatted);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
const configKey = colorKey.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
tabsConfig[configKey] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
return;
}
}
}
if (!isValidHsl(e.target.value)) {
e.target.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
e.target.classList.remove('invalid');
}
});
}
function renderTabInputs() {
const tabsContainer = document.getElementById('tabs-container');
tabsContainer.innerHTML = '';
let realTabCount = 0;
tabsConfig.tabs.forEach((tab, index) => {
if (tab.type === 'separator') {
const separatorDiv = document.createElement('div');
separatorDiv.className = 'separator-item';
separatorDiv.innerHTML = 'Separator';
tabsContainer.appendChild(separatorDiv);
return;
}
realTabCount++;
const tabInputs = document.createElement('div');
tabInputs.className = 'tab-inputs';
// Get icon SVG - check custom icons first, then built-in icons
let iconSvg = '';
let iconDisplayName = tab.icon;
if (customIcons[tab.icon]) {
iconSvg = customIcons[tab.icon].svg;
iconDisplayName = customIcons[tab.icon].name;
} else if (ICONS[tab.icon]) {
iconSvg = ICONS[tab.icon].svg;
} else {
iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9 9h6v6"/></svg>';
iconDisplayName = 'unknown';
}
tabInputs.innerHTML = `
<div class="tab-count">Tab ${realTabCount}</div>
<div class="input-with-label">
<label for="tab-title-${index}">Title</label>
<input
type="text"
id="tab-title-${index}"
value="${tab.title}"
placeholder="Enter tab title..."
data-index="${index}"
class="tab-title-input"
>
</div>
<div class="input-with-label">
<label for="tab-url-${index}">URL (optional)</label>
<input
type="url"
id="tab-url-${index}"
value="${tab.url || ''}"
placeholder="https://example.com"
data-index="${index}"
class="tab-url-input"
>
</div>
<div class="input-with-label">
<label for="tab-icon-${index}">Icon</label>
<button
class="icon-select-btn"
data-index="${index}"
id="icon-btn-${index}"
>
<span class="current-icon">${iconSvg}</span>
<span>${iconDisplayName}</span>
<span class="icon-label">Change</span>
</button>
</div>
`;
tabsContainer.appendChild(tabInputs);
});
addTabInputListeners();
}
function addTabInputListeners() {
document.querySelectorAll('.tab-title-input').forEach(input => {
input.addEventListener('input', function() {
const index = parseInt(this.dataset.index);
tabsConfig.tabs[index].title = this.value;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
});
document.querySelectorAll('.tab-url-input').forEach(input => {
input.addEventListener('input', function() {
const index = parseInt(this.dataset.index);
tabsConfig.tabs[index].url = this.value;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
});
document.querySelectorAll('.icon-select-btn').forEach(button => {
button.addEventListener('click', function() {
const index = parseInt(this.dataset.index);
openIconModal(index);
});
});
}
function openIconModal(tabIndex) {
currentTabIndex = tabIndex;
selectedIconName = tabsConfig.tabs[tabIndex].icon;
// Reset search and category
searchTerm = '';
currentCategory = 'all';
document.getElementById('icon-search').value = '';
document.querySelectorAll('.category-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.category === 'all');
});
renderCustomIcons();
filterIcons();
// Select current icon if it exists
setTimeout(() => {
const currentIconElement = document.querySelector(`[data-icon="${selectedIconName}"]`);
if (currentIconElement) {
currentIconElement.classList.add('selected');
}
}, 100);
document.getElementById('icon-modal').classList.add('active');
}
function closeIconModal() {
document.getElementById('icon-modal').classList.remove('active');
}
function selectIcon() {
if (currentTabIndex !== null && selectedIconName) {
tabsConfig.tabs[currentTabIndex].icon = selectedIconName;
const iconBtn = document.getElementById(`icon-btn-${currentTabIndex}`);
const currentIconSpan = iconBtn.querySelector('.current-icon');
// Get the appropriate icon SVG and name
let iconSvg = '';
let iconDisplayName = selectedIconName;
if (customIcons[selectedIconName]) {
iconSvg = customIcons[selectedIconName].svg;
iconDisplayName = customIcons[selectedIconName].name;
} else if (ICONS[selectedIconName]) {
iconSvg = ICONS[selectedIconName].svg;
} else {
iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9 9h6v6"/></svg>';
iconDisplayName = 'unknown';
}
currentIconSpan.innerHTML = iconSvg;
iconBtn.querySelector('span:nth-child(2)').textContent = iconDisplayName;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
closeIconModal();
}
}
function generateUniqueId() {
return Math.random().toString(36).substring(2, 8);
}
function generateFullSectionJSON() {
const sectionId = generateUniqueId();
const containerId = generateUniqueId();
const divId = generateUniqueId();
const codeId = generateUniqueId();
const jsCode = generateJavaScriptCode();
const bricksJSON = {
"content": [
{
"id": sectionId,
"name": "section",
"parent": 0,
"children": [containerId, codeId],
"settings": {
"_padding": {"top": "10", "bottom": "10"},
"_position": "absolute",
"_bottom": "0"
}
},
{
"id": containerId,
"name": "container",
"parent": sectionId,
"children": [divId],
"settings": {
"_alignItems": "center"
}
},
{
"id": divId,
"name": "div",
"parent": containerId,
"children": [],
"settings": {
"_attributes": [{"id": "kkejtl", "name": "data-expandable-tabs"}]
},
"label": "Tab Expand Div"
},
{
"id": codeId,
"name": "code",
"parent": sectionId,
"children": [],
"settings": {
"_display": "none",
"javascriptCode": jsCode,
"executeCode": true
},
"label": "Tab Expand JS"
}
],
"source": "bricksCopiedElements",
"sourceUrl": "https://test.bricksfusion.com",
"version": "2.0.1",
"globalClasses": [],
"globalElements": []
};
return JSON.stringify(bricksJSON, null, 2);
}
function generateJavaScriptCode() {
// Combine built-in icons with custom icons for the generated code
const allIcons = { ...ICONS };
// Add custom icons to the ICONS object for the generated code
Object.keys(customIcons).forEach(iconId => {
allIcons[iconId] = { svg: customIcons[iconId].svg };
});
// Convert icons object to the format expected by the JavaScript code
const iconsForCode = {};
Object.keys(allIcons).forEach(key => {
iconsForCode[key] = allIcons[key].svg;
});
return `(function() {
window.ExpandableTabs = window.ExpandableTabs || {};
if (window.ExpandableTabs.initialized) {
return;
}
const ICONS = ${JSON.stringify(iconsForCode, null, 2)};
const DEFAULT_TABS = ${JSON.stringify(tabsConfig.tabs, null, 2)};
const ANIMATION = {
duration: ${tabsConfig.animationDuration},
delay: ${tabsConfig.animationDelay}
};
const CONFIG = {
expandOnHover: ${tabsConfig.expandOnHover},
closeOnOutsideClick: ${tabsConfig.closeOnOutsideClick},
collapseOnSecondClick: ${tabsConfig.collapseOnSecondClick},
iconPosition: "${tabsConfig.iconPosition}",
autoDetectActivePage: ${tabsConfig.autoDetectActivePage}
};
const initializedContainers = new WeakSet();
function injectCSS() {
if (document.getElementById('expandable-tabs-styles')) return;
const style = document.createElement('style');
style.id = 'expandable-tabs-styles';
style.textContent = \`
:root {
--et-background: ${tabsConfig.backgroundColor};
--et-foreground: #f2f2f7;
--et-muted: ${tabsConfig.activeBgColor};
--et-muted-foreground: #8e8e93;
--et-border: ${tabsConfig.borderColor};
--et-primary: ${tabsConfig.primaryColor};
}
[data-expandable-tabs] {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
border-radius: ${tabsConfig.borderRadius}px !important;
border: 1px solid var(--et-border) !important;
background-color: var(--et-background) !important;
padding: 4px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
height: auto !important;
min-height: ${tabsConfig.tabHeight + 8}px !important;
box-sizing: border-box !important;
width: fit-content !important;
min-width: auto !important;
max-width: 100% !important;
}
[data-expandable-tabs] .et-button {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: ${Math.max(8, tabsConfig.borderRadius - 4)}px !important;
padding: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: all ${tabsConfig.animationDuration / 1000}s cubic-bezier(0.19, 1, 0.22, 1) !important;
color: var(--et-muted-foreground) !important;
background-color: transparent !important;
border: none !important;
cursor: pointer !important;
outline: none !important;
height: ${tabsConfig.tabHeight}px !important;
margin: 0 !important;
}
[data-expandable-tabs] .et-button:hover {
background-color: var(--et-muted) !important;
color: var(--et-foreground) !important;
}
[data-expandable-tabs] .et-button.selected {
background-color: var(--et-muted) !important;
color: var(--et-primary) !important;
}
[data-expandable-tabs] .et-separator {
margin: 0 4px !important;
height: 24px !important;
width: 1px !important;
background-color: var(--et-border) !important;
}
[data-expandable-tabs] .et-button span {
overflow: hidden !important;
white-space: nowrap !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
font-size: 14px !important;
}
[data-expandable-tabs] .et-button svg {
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
\`;
document.head.appendChild(style);
}
function animate(element, properties, duration, delay = 0) {
return new Promise(resolve => {
const startValues = {};
const changeValues = {};
const startTime = Date.now() + delay;
for (const key in properties) {
if (key === 'width' && properties[key] === 'auto') {
const currentPosition = element.style.position;
const currentVisibility = element.style.visibility;
const currentDisplay = element.style.display;
element.style.position = 'absolute';
element.style.visibility = 'hidden';
element.style.display = 'inline-block';
element.style.width = 'auto';
const width = element.offsetWidth;
element.style.position = currentPosition;
element.style.visibility = currentVisibility;
element.style.display = currentDisplay;
element.style.width = '0px';
startValues[key] = 0;
changeValues[key] = width;
} else {
startValues[key] = parseFloat(getComputedStyle(element)[key]) || 0;
changeValues[key] = parseFloat(properties[key]) - startValues[key];
}
}
function update() {
const now = Date.now();
if (now < startTime) {
requestAnimationFrame(update);
return;
}
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeProgress = ease(progress);
for (const key in properties) {
let value;
if (key === 'width' && properties[key] === 'auto' && progress >= 1) {
value = 'auto';
} else {
value = startValues[key] + changeValues[key] * easeProgress;
if (key === 'width' || key === 'paddingLeft' || key === 'paddingRight' || key === 'gap') {
value += 'px';
}
}
element.style[key] = value;
}
if (progress < 1) {
requestAnimationFrame(update);
} else {
resolve();
}
}
requestAnimationFrame(update);
});
}
function ease(t) {
return cubicBezier(0.33, 1, 0.68, 1, t);
}
function cubicBezier(x1, y1, x2, y2, t) {
function sampleCurveX(t) {
return ((1 - t) * (1 - t) * (1 - t) * 0) +
(3 * (1 - t) * (1 - t) * t * x1) +
(3 * (1 - t) * t * t * x2) +
(t * t * t * 1);
}
function sampleCurveY(t) {
return ((1 - t) * (1 - t) * (1 - t) * 0) +
(3 * (1 - t) * (1 - t) * t * y1) +
(3 * (1 - t) * t * t * y2) +
(t * t * t * 1);
}
function sampleCurveDerivativeX(t) {
return (3 * (1 - t) * (1 - t) * x1) +
(6 * (1 - t) * t * (x2 - x1)) +
(3 * t * t * (1 - x2));
}
function solveCurveX(x, epsilon = 0.00001) {
if (x <= 0) return 0;
if (x >= 1) return 1;
let t = x;
for (let i = 0; i < 8; i++) {
const x2 = sampleCurveX(t) - x;
if (Math.abs(x2) < epsilon) break;
const dx = sampleCurveDerivativeX(t);
if (Math.abs(dx) < epsilon) break;
t = t - x2 / dx;
}
return t;
}
return sampleCurveY(solveCurveX(t));
}
function isCurrentPage(url) {
if (!url || url.trim() === '') return false;
const currentUrl = window.location.href;
const tabUrl = new URL(url, window.location.origin).href;
if (currentUrl === tabUrl) return true;
if (currentUrl.startsWith(tabUrl)) return true;
const currentPath = window.location.pathname;
const tabPath = new URL(tabUrl).pathname;
if (currentPath === tabPath) return true;
if ((tabPath === '/' || tabPath === '') && (currentPath === '/' || currentPath === '')) return true;
return false;
}
function createExpandableTabs(container) {
if (initializedContainers.has(container)) {
return;
}
initializedContainers.add(container);
let tabs;
try {
const dataTabsAttr = container.getAttribute('data-tabs');
if (!dataTabsAttr) {
tabs = DEFAULT_TABS;
container.setAttribute('data-tabs', JSON.stringify(DEFAULT_TABS));
} else {
tabs = JSON.parse(dataTabsAttr);
}
} catch (e) {
tabs = DEFAULT_TABS;
container.setAttribute('data-tabs', JSON.stringify(DEFAULT_TABS));
}
const activeColor = container.getAttribute('data-active-color') || 'text-primary';
const callbackFn = container.getAttribute('data-callback');
container.innerHTML = '';
container.tabIndex = -1;
let selectedIndices = [];
let activePageIndex = null;
const clickOutsideHandler = (e) => {
if (CONFIG.closeOnOutsideClick && !container.contains(e.target)) {
if (selectedIndices.length > 0) {
selectedIndices.forEach(index => {
if (CONFIG.autoDetectActivePage && index === activePageIndex) return;
const button = buttons.find(b => b.index === index);
if (button) {
closeTab(button.element);
}
});
selectedIndices = CONFIG.autoDetectActivePage && activePageIndex !== null ? [activePageIndex] : [];
if (callbackFn && window[callbackFn]) {
window[callbackFn](null);
}
}
}
};
document.removeEventListener('click', clickOutsideHandler);
document.addEventListener('click', clickOutsideHandler);
const buttons = [];
tabs.forEach((tab, index) => {
if (tab.type === 'separator') {
const separator = document.createElement('div');
separator.setAttribute('aria-hidden', 'true');
separator.className = 'et-separator';
container.appendChild(separator);
return;
}
const button = document.createElement('button');
button.className = 'et-button';
button.style.gap = '0';
button.setAttribute('data-index', index);
if (tab.url) {
button.setAttribute('data-url', tab.url);
}
const iconName = tab.icon;
if (ICONS[iconName]) {
button.innerHTML = ICONS[iconName];
} else {
button.textContent = '?';
}
const span = document.createElement('span');
span.textContent = tab.title;
span.style.width = '0';
span.style.opacity = '0';
span.style.marginLeft = '0';
if (CONFIG.iconPosition === 'left') {
button.appendChild(span);
} else {
button.innerHTML = '';
button.appendChild(span);
if (ICONS[iconName]) {
const iconContainer = document.createElement('div');
iconContainer.innerHTML = ICONS[iconName];
button.appendChild(iconContainer.firstChild);
} else {
button.appendChild(document.createTextNode('?'));
}
}
if (CONFIG.autoDetectActivePage && tab.url && isCurrentPage(tab.url)) {
activePageIndex = index;
}
if (CONFIG.expandOnHover) {
button.addEventListener('mouseenter', (e) => {
e.preventDefault();
const buttonIndex = parseInt(button.getAttribute('data-index'));
if (CONFIG.autoDetectActivePage && buttonIndex === activePageIndex && selectedIndices.includes(buttonIndex)) {
return;
}
if (CONFIG.autoDetectActivePage && activePageIndex !== null && buttonIndex !== activePageIndex) {
selectedIndices.forEach(prevIndex => {
if (prevIndex !== buttonIndex && prevIndex !== activePageIndex) {
const prevButton = buttons.find(b => b.index === prevIndex);
if (prevButton) {
closeTab(prevButton.element);
}
}
});
if (!selectedIndices.includes(buttonIndex)) {
selectedIndices.push(buttonIndex);
}
} else {
selectedIndices.forEach(prevIndex => {
if (prevIndex !== buttonIndex) {
const prevButton = buttons.find(b => b.index === prevIndex);
if (prevButton) {
closeTab(prevButton.element);
}
}
});
selectedIndices = [buttonIndex];
}
button.setAttribute('data-user-clicked', 'true');
openTab(button);
if (callbackFn && window[callbackFn]) {
window[callbackFn](buttonIndex);
}
});
button.addEventListener('mouseleave', (e) => {
e.preventDefault();
const buttonIndex = parseInt(button.getAttribute('data-index'));
if (CONFIG.autoDetectActivePage && buttonIndex === activePageIndex) return;
button.removeAttribute('data-user-clicked');
button.removeAttribute('data-click-action');
closeTab(button);
selectedIndices = selectedIndices.filter(idx => idx !== buttonIndex);
if (callbackFn && window[callbackFn]) {
window[callbackFn](null);
}
});
button.addEventListener('click', (e) => {
e.preventDefault();
const url = button.getAttribute('data-url');
button.setAttribute('data-click-action', 'true');
if (url && url.trim() !== '') {
window.open(url, '_blank');
}
});
} else {
button.addEventListener('click', (e) => {
e.preventDefault();
const buttonIndex = parseInt(button.getAttribute('data-index'));
const isCurrentlySelected = selectedIndices.includes(buttonIndex);
const url = button.getAttribute('data-url');
button.setAttribute('data-user-clicked', 'true');
button.setAttribute('data-click-action', 'true');
if (isCurrentlySelected && CONFIG.collapseOnSecondClick) {
if (CONFIG.autoDetectActivePage && buttonIndex === activePageIndex) {
if (url && url.trim() !== '') {
window.open(url, '_blank');
}
return;
}
selectedIndices = selectedIndices.filter(idx => idx !== buttonIndex);
closeTab(button);
if (callbackFn && window[callbackFn]) {
window[callbackFn](null);
}
} else {
selectedIndices.forEach(prevIndex => {
if (CONFIG.autoDetectActivePage && prevIndex === activePageIndex && prevIndex !== buttonIndex) return;
const prevButton = buttons.find(b => b.index === prevIndex);
if (prevButton) {
closeTab(prevButton.element);
}
});
selectedIndices = CONFIG.autoDetectActivePage && activePageIndex !== null && activePageIndex !== buttonIndex
? [activePageIndex, buttonIndex]
: [buttonIndex];
openTab(button);
if (callbackFn && window[callbackFn]) {
window[callbackFn](buttonIndex);
}
if (url && url.trim() !== '') {
window.open(url, '_blank');
}
}
});
}
container.appendChild(button);
buttons.push({ element: button, index });
});
function closeTab(element, skipAnimation = false) {
element.classList.remove('selected');
element.style.backgroundColor = 'transparent';
element.style.color = 'var(--et-muted-foreground)';
const span = element.querySelector('span');
if (skipAnimation) {
element.style.gap = '0px';
element.style.paddingLeft = '8px';
element.style.paddingRight = '8px';
span.style.width = '0px';
span.style.opacity = '0';
span.style.marginLeft = '0px';
span.style.display = 'none';
} else {
animate(element, {
gap: 0,
paddingLeft: 8,
paddingRight: 8
}, ANIMATION.duration, 0);
animate(span, {
width: 0,
opacity: 0,
marginLeft: 0
}, ANIMATION.duration, 0).then(() => {
span.style.display = 'none';
});
}
}
function openTab(element, skipAnimation = false) {
const isInitializing = !element.classList.contains('initialized');
const url = element.getAttribute('data-url');
const isHoverMode = CONFIG.expandOnHover;
const fromUserAction = element.hasAttribute('data-user-clicked') && !isInitializing;
const isClickAction = element.hasAttribute('data-click-action');
const shouldOpenUrl = !isInitializing && ((!isHoverMode && fromUserAction) || isClickAction);
if (url && url.trim() !== '' && shouldOpenUrl) {
window.open(url, '_blank');
element.removeAttribute('data-user-clicked');
element.removeAttribute('data-click-action');
}
element.classList.add('initialized');
element.classList.add('selected');
element.style.backgroundColor = 'var(--et-muted)';
element.style.color = 'var(--et-primary)';
const span = element.querySelector('span');
span.style.display = 'inline-block';
span.style.marginLeft = '4px';
if (skipAnimation) {
element.style.gap = '8px';
element.style.paddingLeft = '12px';
element.style.paddingRight = '12px';
span.style.width = 'auto';
span.style.opacity = '1';
} else {
span.style.willChange = 'width, opacity';
element.style.willChange = 'padding, gap';
animate(element, {
gap: 8,
paddingLeft: 12,
paddingRight: 12
}, ANIMATION.duration, ANIMATION.delay).then(() => {
element.style.willChange = 'auto';
});
animate(span, {
width: 'auto',
opacity: 1
}, ANIMATION.duration, ANIMATION.delay).then(() => {
span.style.willChange = 'auto';
});
}
}
function updateTabStatesInitial() {
buttons.forEach(({element, index}) => {
const isSelected = selectedIndices.includes(index);
if (isSelected) {
openTab(element, true);
} else {
closeTab(element, true);
}
});
}
if (CONFIG.autoDetectActivePage && activePageIndex !== null) {
selectedIndices = [activePageIndex];
updateTabStatesInitial();
} else if (buttons.length > 0 && !CONFIG.expandOnHover) {
selectedIndices = [0];
updateTabStatesInitial();
}
container.updateConfig = function(newConfig) {
Object.assign(CONFIG, {
expandOnHover: newConfig.expandOnHover,
closeOnOutsideClick: newConfig.closeOnOutsideClick,
collapseOnSecondClick: newConfig.collapseOnSecondClick,
iconPosition: newConfig.iconPosition,
autoDetectActivePage: newConfig.autoDetectActivePage
});
Object.assign(ANIMATION, {
duration: newConfig.animationDuration,
delay: newConfig.animationDelay
});
const style = document.getElementById('expandable-tabs-styles');
if (style) {
style.textContent = style.textContent
.replace(/--et-background: [^;]+/g, '--et-background: ' + newConfig.backgroundColor)
.replace(/--et-muted: [^;]+/g, '--et-muted: ' + newConfig.activeBgColor)
.replace(/--et-border: [^;]+/g, '--et-border: ' + newConfig.borderColor)
.replace(/--et-primary: [^;]+/g, '--et-primary: ' + newConfig.primaryColor)
.replace(/border-radius: \\d+px/g, 'border-radius: ' + newConfig.borderRadius + 'px')
.replace(/height: \\d+px/g, 'height: ' + newConfig.tabHeight + 'px')
.replace(/min-height: \\d+px/g, 'min-height: ' + (newConfig.tabHeight + 8) + 'px')
.replace(/transition: all [\\d.]+ cubic-bezier/g, 'transition: all ' + (newConfig.animationDuration / 1000) + 's cubic-bezier');
}
container.setAttribute('data-tabs', JSON.stringify(newConfig.tabs));
buttons.forEach(({element, index}) => {
const tab = newConfig.tabs[index];
if (!tab || tab.type === 'separator') return;
const span = element.querySelector('span');
if (span) {
span.textContent = tab.title;
}
if (tab.url) {
element.setAttribute('data-url', tab.url);
} else {
element.removeAttribute('data-url');
}
});
};
return container;
}
function init() {
injectCSS();
const tabContainers = document.querySelectorAll('[data-expandable-tabs]');
tabContainers.forEach(container => {
createExpandableTabs(container);
});
}
function safeInit() {
if (window.ExpandableTabs.initialized) {
return;
}
window.ExpandableTabs.initialized = true;
init();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', safeInit);
} else {
safeInit();
}
document.addEventListener('bricks/content_updated', () => {
const tabContainers = document.querySelectorAll('[data-expandable-tabs]');
tabContainers.forEach(container => {
if (!initializedContainers.has(container)) {
createExpandableTabs(container);
}
});
});
window.ExpandableTabs = {
init: safeInit,
create: createExpandableTabs,
initialized: false
};
})();`;
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => {
showNotification('Copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function copyJsToClipboard() {
const jsCode = generateJavaScriptCode();
navigator.clipboard.writeText(jsCode)
.then(() => {
showNotification('JavaScript code copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = jsCode;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('JavaScript code copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function copyFullSectionToClipboard() {
const sectionJSON = generateFullSectionJSON();
navigator.clipboard.writeText(sectionJSON)
.then(() => {
showNotification('Full section JSON copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = sectionJSON;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Full section JSON copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
window.resetParameter = function(parameterId, defaultValue) {
const element = document.getElementById(parameterId);
if (element) {
element.value = defaultValue;
const valueElement = document.getElementById(`${parameterId}-value`);
if (valueElement) {
valueElement.textContent = defaultValue;
}
const configKey = parameterId.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
tabsConfig[configKey] = defaultValue;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-tabs-config', JSON.stringify(tabsConfig));
} catch (e) {
console.warn('Failed to save configuration:', e);
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-tabs-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(tabsConfig, savedConfig);
updateColorInputs('background-color', savedConfig.backgroundColor);
updateColorInputs('active-bg-color', savedConfig.activeBgColor);
updateColorInputs('border-color', savedConfig.borderColor);
updateColorInputs('primary-color', savedConfig.primaryColor);
document.getElementById('border-radius').value = savedConfig.borderRadius;
document.getElementById('tab-height').value = savedConfig.tabHeight;
document.getElementById('animation-duration').value = savedConfig.animationDuration;
document.getElementById('animation-delay').value = savedConfig.animationDelay;
document.getElementById('border-radius-value').textContent = savedConfig.borderRadius;
document.getElementById('tab-height-value').textContent = savedConfig.tabHeight;
document.getElementById('animation-duration-value').textContent = savedConfig.animationDuration;
document.getElementById('animation-delay-value').textContent = savedConfig.animationDelay;
document.getElementById('expand-on-hover').checked = savedConfig.expandOnHover;
document.getElementById('close-on-outside').checked = savedConfig.closeOnOutsideClick;
document.getElementById('collapse-on-second').checked = savedConfig.collapseOnSecondClick;
document.getElementById('auto-detect-page').checked = savedConfig.autoDetectActivePage;
document.getElementById('icon-left').checked = savedConfig.iconPosition === 'left';
document.getElementById('icon-right').checked = savedConfig.iconPosition === 'right';
renderTabInputs();
}
} catch (e) {
console.warn('Failed to load configuration:', e);
}
}
function initializeUI() {
const instructionsToggle = document.getElementById('instructions-toggle');
const instructionsContent = document.getElementById('instructions-content');
const instructionsCard = document.getElementById('instructions-card');
const toggleIcon = instructionsToggle.querySelector('.toggle-icon');
instructionsToggle.addEventListener('click', () => {
const isVisible = instructionsContent.classList.contains('show');
if (isVisible) {
instructionsContent.classList.remove('show');
instructionsCard.classList.remove('expanded');
toggleIcon.classList.remove('expanded');
} else {
instructionsContent.classList.add('show');
instructionsCard.classList.add('expanded');
toggleIcon.classList.add('expanded');
}
});
document.getElementById('quick-attribute').addEventListener('click', () => {
copyToClipboard('data-expandable-tabs');
});
document.getElementById('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('copy-full-section').addEventListener('click', () => {
copyFullSectionToClipboard();
});
document.getElementById('close-icon-modal').addEventListener('click', closeIconModal);
document.getElementById('select-icon-btn').addEventListener('click', selectIcon);
document.getElementById('icon-modal').addEventListener('click', function(e) {
if (e.target === this) {
closeIconModal();
}
});
document.getElementById('add-tab-btn').addEventListener('click', function() {
const newTab = {
title: "New Tab",
icon: "star",
url: ""
};
tabsConfig.tabs.push(newTab);
renderTabInputs();
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
document.getElementById('add-separator-btn').addEventListener('click', function() {
tabsConfig.tabs.push({ type: "separator" });
renderTabInputs();
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
document.getElementById('remove-last-btn').addEventListener('click', function() {
if (tabsConfig.tabs.length > 1) {
tabsConfig.tabs.pop();
renderTabInputs();
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
} else {
showNotification('At least one tab is required', 'error');
}
});
document.getElementById('reset-tabs').addEventListener('click', () => {
tabsConfig.tabs = [...defaultConfig.tabs];
renderTabInputs();
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
showNotification('Tabs reset to default');
});
document.getElementById('reset-style').addEventListener('click', () => {
tabsConfig.backgroundColor = defaultConfig.backgroundColor;
tabsConfig.activeBgColor = defaultConfig.activeBgColor;
tabsConfig.borderColor = defaultConfig.borderColor;
tabsConfig.primaryColor = defaultConfig.primaryColor;
tabsConfig.borderRadius = defaultConfig.borderRadius;
tabsConfig.tabHeight = defaultConfig.tabHeight;
updateColorInputs('background-color', defaultConfig.backgroundColor);
updateColorInputs('active-bg-color', defaultConfig.activeBgColor);
updateColorInputs('border-color', defaultConfig.borderColor);
updateColorInputs('primary-color', defaultConfig.primaryColor);
document.getElementById('border-radius').value = defaultConfig.borderRadius;
document.getElementById('tab-height').value = defaultConfig.tabHeight;
document.getElementById('border-radius-value').textContent = defaultConfig.borderRadius;
document.getElementById('tab-height-value').textContent = defaultConfig.tabHeight;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
showNotification('Style settings reset');
});
document.getElementById('reset-animation').addEventListener('click', () => {
tabsConfig.animationDuration = defaultConfig.animationDuration;
tabsConfig.animationDelay = defaultConfig.animationDelay;
document.getElementById('animation-duration').value = defaultConfig.animationDuration;
document.getElementById('animation-delay').value = defaultConfig.animationDelay;
document.getElementById('animation-duration-value').textContent = defaultConfig.animationDuration;
document.getElementById('animation-delay-value').textContent = defaultConfig.animationDelay;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
showNotification('Animation settings reset');
});
document.getElementById('reset-behavior').addEventListener('click', () => {
tabsConfig.expandOnHover = defaultConfig.expandOnHover;
tabsConfig.closeOnOutsideClick = defaultConfig.closeOnOutsideClick;
tabsConfig.collapseOnSecondClick = defaultConfig.collapseOnSecondClick;
tabsConfig.autoDetectActivePage = defaultConfig.autoDetectActivePage;
tabsConfig.iconPosition = defaultConfig.iconPosition;
document.getElementById('expand-on-hover').checked = defaultConfig.expandOnHover;
document.getElementById('close-on-outside').checked = defaultConfig.closeOnOutsideClick;
document.getElementById('collapse-on-second').checked = defaultConfig.collapseOnSecondClick;
document.getElementById('auto-detect-page').checked = defaultConfig.autoDetectActivePage;
document.getElementById('icon-left').checked = defaultConfig.iconPosition === 'left';
document.getElementById('icon-right').checked = defaultConfig.iconPosition === 'right';
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
showNotification('Behavior settings reset');
});
setupColorInputs('background-color');
setupColorInputs('active-bg-color');
setupColorInputs('border-color');
setupColorInputs('primary-color');
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const valueElement = document.getElementById(`${input.id}-value`);
if (valueElement) {
valueElement.textContent = input.value;
}
input.addEventListener('input', () => {
if (valueElement) {
valueElement.textContent = input.value;
}
const configKey = input.id.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
tabsConfig[configKey] = parseInt(input.value);
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
});
document.getElementById('expand-on-hover').addEventListener('change', function() {
tabsConfig.expandOnHover = this.checked;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
document.getElementById('close-on-outside').addEventListener('change', function() {
tabsConfig.closeOnOutsideClick = this.checked;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
document.getElementById('collapse-on-second').addEventListener('change', function() {
tabsConfig.collapseOnSecondClick = this.checked;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
document.getElementById('auto-detect-page').addEventListener('change', function() {
tabsConfig.autoDetectActivePage = this.checked;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
});
document.querySelectorAll('input[name="icon-position"]').forEach(radio => {
radio.addEventListener('change', function() {
if (this.checked) {
tabsConfig.iconPosition = this.value;
if (currentTabsAnimation) {
currentTabsAnimation.updateConfig(tabsConfig);
}
saveConfiguration();
}
});
});
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
if (e.ctrlKey || e.metaKey) {
switch (e.key.toLowerCase()) {
case 'd':
e.preventDefault();
const downloadBtn = document.getElementById('download-config');
if (downloadBtn && downloadBtn.hasAttribute('data-protection-animation')) {
downloadBtn.click();
}
break;
case 's':
e.preventDefault();
const fullSectionBtn = document.getElementById('copy-full-section');
if (fullSectionBtn && fullSectionBtn.hasAttribute('data-protection-animation')) {
fullSectionBtn.click();
}
break;
}
}
});
setupIconModal();
loadConfiguration();
renderTabInputs();
const jsCode = generateJavaScriptCode();
const script = document.createElement('script');
script.textContent = jsCode;
document.body.appendChild(script);
const preview = document.getElementById('tabs-preview');
if (preview && window.ExpandableTabs && window.ExpandableTabs.create) {
currentTabsAnimation = window.ExpandableTabs.create(preview);
}
setTimeout(() => {
showNotification('BricksFusion Expandable Tabs Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHTWEIGHT
Expandable Tab
Creates compact tabs that smoothly expand to reveal text on hover or click. Icons stay visible while labels animate in and out. Perfect for navigation bars, toolbars, or space-efficient menus with visual appeal.
Items
Tab Items
repeater
Add tabs and separators. Each tab needs an icon (HTML/FontAwesome), title text, and optional URL. Separators create visual dividers between groups. Set type to "separator" for divider items.
Default: Empty array
Appearance
Background Color
color picker
Background color of the tab container. Dark colors work best for most designs.
Default: #1e1e1e (dark gray)
Border Color
color picker
Color of the container border and separators between tabs.
Default: #38383a (medium gray)
Active Background
color picker
Background color of expanded/active tabs. Should contrast with container background.
Default: #2c2c2e (lighter gray)
Primary Color
color picker
Color of text and icons when tab is active. Your brand color works well here.
Default: #3b82f6 (blue)
Border Radius
0-50 pixels
Roundness of the tab container corners. Higher values create more rounded appearance.
Default: 16
Tab Height
24-60 pixels
Height of individual tabs. Affects overall size and touch target.
Default: 36
Animation
Animation Duration
100-1000 ms
Speed of expand/collapse animation. Lower is snappier, higher is smoother.
Default: 300
Animation Delay
0-200 ms
Delay before text appears when expanding. Creates staggered effect.
Default: 50
Behavior
Expand on Hover
on/off
Tabs expand when hovering instead of clicking. Good for quick preview of options.
Default: Off
Close on Outside Click
on/off
Collapse all tabs when clicking anywhere outside. Keeps interface clean.
Default: Off
Collapse on Second Click
on/off
Clicking active tab again collapses it. Allows toggling tab state.
Default: Off
Icon Position
left / right
Where icon appears relative to text when expanded. Left is most common.
Default: Left
Auto Detect Active Page
on/off
Automatically keeps the tab for current page expanded. Perfect for navigation menus.
Default: Off
Performance
This element uses custom JavaScript animations with cubic-bezier easing for smooth expand/collapse. Width is calculated dynamically to fit content. No external libraries required. Uses requestAnimationFrame for 60fps animations. Separators are simple dividers between tab groups.