admin/SPA-landing
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate symbols/ into main repo

Browse Source 
- Added symbols/ folder (previously separate repo)
- Removed symbols/ from .gitignore
- Updated CLAUDE.md documentation
- Deleted separate Symbols repo on Gitea

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
architeur
2025-12-14 20:53:14 +01:00
parent e43d4bde1f
commit 7672653254
19 changed files with 9497 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
symbols/js/text-generator/ui-bindings.js Normal file
View File

@@ -0,0 +1,344 @@
/**
* UI Bindings - Verbindet HTML-Elemente mit dem State
*/
var UiBindings = {
elements: {},
init: function() {
this.cacheElements();
this.bindEvents();
this.syncFromState();
this.updateVisibility();
this.updatePreview();
this.updateStandaloneArrowPreview();
},
cacheElements: function() {
var e = this.elements;
// Text & Farben
e.textInput = document.getElementById('textInput');
e.fontSizeInput = document.getElementById('fontSize');
e.fontSizeValue = document.getElementById('fontSizeValue');
e.textColorInput = document.getElementById('textColor');
e.frameColorInput = document.getElementById('frameColor');
// Rahmen
e.frameScaleInput = document.getElementById('frameScale');
e.frameScaleValue = document.getElementById('frameScaleValue');
e.frameScaleRow = document.getElementById('frameScaleRow');
// Padding
e.paddingAllInput = document.getElementById('framePaddingAll');
e.paddingAllValue = document.getElementById('framePaddingAllValue');
e.paddingTopInput = document.getElementById('framePaddingTop');
e.paddingTopValue = document.getElementById('framePaddingTopValue');
e.paddingRightInput = document.getElementById('framePaddingRight');
e.paddingRightValue = document.getElementById('framePaddingRightValue');
e.paddingBottomInput = document.getElementById('framePaddingBottom');
e.paddingBottomValue = document.getElementById('framePaddingBottomValue');
e.paddingLeftInput = document.getElementById('framePaddingLeft');
e.paddingLeftValue = document.getElementById('framePaddingLeftValue');
e.paddingAllRow = document.getElementById('framePaddingAllRow');
e.paddingRow = document.getElementById('framePaddingRow');
// Pfeil
e.arrowLengthInput = document.getElementById('arrowLength');
e.arrowLengthValue = document.getElementById('arrowLengthValue');
e.arrowAngleInput = document.getElementById('arrowAngle');
e.arrowAngleValue = document.getElementById('arrowAngleValue');
e.arrowBendInput = document.getElementById('arrowBend');
e.arrowBendValue = document.getElementById('arrowBendValue');
e.arrowSizeInput = document.getElementById('arrowSize');
e.arrowSizeValue = document.getElementById('arrowSizeValue');
e.arrowTipLengthInput = document.getElementById('arrowTipLength');
e.arrowTipLengthValue = document.getElementById('arrowTipLengthValue');
e.arrowDetailsRow = document.getElementById('arrowDetailsRow');
e.arrowDetailsRow2 = document.getElementById('arrowDetailsRow2');
// Vorschau
e.textPreview = document.getElementById('textPreview');
e.standaloneArrowPreview = document.getElementById('standaloneArrowPreview');
// Buttons
e.shapeButtons = document.querySelectorAll('.shape-btn');
e.arrowButtons = document.querySelectorAll('.arrow-btn');
e.lineStyleButtons = document.querySelectorAll('.line-style-btn');
e.lineWeightButtons = document.querySelectorAll('.line-weight-btn');
},
bindEvents: function() {
var self = this;
var e = this.elements;
var state = window.TextGenState;
// Text-Input
if (e.textInput) {
e.textInput.addEventListener('input', function(ev) {
state.set('text', ev.target.value);
self.updatePreview();
});
}
// Schriftgroesse
if (e.fontSizeInput) {
e.fontSizeInput.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set('fontSize', val);
if (e.fontSizeValue) e.fontSizeValue.textContent = val + 'px';
self.updatePreview();
});
}
// Farben
if (e.textColorInput) {
e.textColorInput.addEventListener('input', function(ev) {
state.set('textColor', ev.target.value);
self.updatePreview();
});
}
if (e.frameColorInput) {
e.frameColorInput.addEventListener('input', function(ev) {
state.set('frameColor', ev.target.value);
self.updatePreview();
});
}
// Rahmen-Skalierung
if (e.frameScaleInput) {
e.frameScaleInput.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set('frameScale', val);
if (e.frameScaleValue) e.frameScaleValue.textContent = val + '%';
self.updatePreview();
});
}
// Gesamt-Padding
if (e.paddingAllInput) {
e.paddingAllInput.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.setMultiple({
paddingTop: val,
paddingRight: val,
paddingBottom: val,
paddingLeft: val
});
if (e.paddingAllValue) e.paddingAllValue.textContent = val + 'px';
// Einzelne Slider synchronisieren
if (e.paddingTopInput) e.paddingTopInput.value = val;
if (e.paddingTopValue) e.paddingTopValue.textContent = val + 'px';
if (e.paddingRightInput) e.paddingRightInput.value = val;
if (e.paddingRightValue) e.paddingRightValue.textContent = val + 'px';
if (e.paddingBottomInput) e.paddingBottomInput.value = val;
if (e.paddingBottomValue) e.paddingBottomValue.textContent = val + 'px';
if (e.paddingLeftInput) e.paddingLeftInput.value = val;
if (e.paddingLeftValue) e.paddingLeftValue.textContent = val + 'px';
self.updatePreview();
});
}
// Einzelne Paddings
this.bindPaddingSlider('paddingTopInput', 'paddingTopValue', 'paddingTop');
this.bindPaddingSlider('paddingRightInput', 'paddingRightValue', 'paddingRight');
this.bindPaddingSlider('paddingBottomInput', 'paddingBottomValue', 'paddingBottom');
this.bindPaddingSlider('paddingLeftInput', 'paddingLeftValue', 'paddingLeft');
// Pfeil-Slider
this.bindSlider('arrowLengthInput', 'arrowLengthValue', 'arrowLength', 'px');
this.bindSlider('arrowAngleInput', 'arrowAngleValue', 'arrowAngle', '\u00B0');
this.bindSlider('arrowBendInput', 'arrowBendValue', 'arrowBend', '%');
this.bindSlider('arrowSizeInput', 'arrowSizeValue', 'arrowSize', 'px');
this.bindSlider('arrowTipLengthInput', 'arrowTipLengthValue', 'arrowTipLength', 'px');
// Shape-Buttons
e.shapeButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.shapeButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('shape', btn.dataset.shape);
self.updateVisibility();
self.updatePreview();
});
});
// Arrow-Buttons
e.arrowButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.arrowButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('arrow', btn.dataset.arrow);
self.updateVisibility();
self.updatePreview();
self.updateStandaloneArrowPreview();
});
});
// Line-Style-Buttons
e.lineStyleButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.lineStyleButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('lineStyle', btn.dataset.style);
self.updatePreview();
});
});
// Line-Weight-Buttons
e.lineWeightButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.lineWeightButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('lineWeight', parseInt(btn.dataset.weight));
self.updatePreview();
});
});
},
bindSlider: function(inputKey, valueKey, stateKey, unit) {
var self = this;
var input = this.elements[inputKey];
var valueEl = this.elements[valueKey];
var state = window.TextGenState;
if (input) {
input.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set(stateKey, val);
if (valueEl) valueEl.textContent = val + unit;
self.updatePreview();
if (stateKey.indexOf('arrow') === 0) {
self.updateStandaloneArrowPreview();
}
});
}
},
bindPaddingSlider: function(inputKey, valueKey, stateKey) {
var self = this;
var input = this.elements[inputKey];
var valueEl = this.elements[valueKey];
var state = window.TextGenState;
if (input) {
input.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set(stateKey, val);
if (valueEl) valueEl.textContent = val + 'px';
self.updatePreview();
});
}
},
syncFromState: function() {
var e = this.elements;
var s = window.TextGenState.current;
if (e.textInput) e.textInput.value = s.text;
if (e.fontSizeInput) e.fontSizeInput.value = s.fontSize;
if (e.fontSizeValue) e.fontSizeValue.textContent = s.fontSize + 'px';
if (e.textColorInput) e.textColorInput.value = s.textColor;
if (e.frameColorInput) e.frameColorInput.value = s.frameColor;
if (e.frameScaleInput) e.frameScaleInput.value = s.frameScale;
if (e.frameScaleValue) e.frameScaleValue.textContent = s.frameScale + '%';
// Padding
if (e.paddingAllInput) e.paddingAllInput.value = s.paddingTop;
if (e.paddingAllValue) e.paddingAllValue.textContent = s.paddingTop + 'px';
if (e.paddingTopInput) e.paddingTopInput.value = s.paddingTop;
if (e.paddingTopValue) e.paddingTopValue.textContent = s.paddingTop + 'px';
if (e.paddingRightInput) e.paddingRightInput.value = s.paddingRight;
if (e.paddingRightValue) e.paddingRightValue.textContent = s.paddingRight + 'px';
if (e.paddingBottomInput) e.paddingBottomInput.value = s.paddingBottom;
if (e.paddingBottomValue) e.paddingBottomValue.textContent = s.paddingBottom + 'px';
if (e.paddingLeftInput) e.paddingLeftInput.value = s.paddingLeft;
if (e.paddingLeftValue) e.paddingLeftValue.textContent = s.paddingLeft + 'px';
// Pfeil
if (e.arrowLengthInput) e.arrowLengthInput.value = s.arrowLength;
if (e.arrowLengthValue) e.arrowLengthValue.textContent = s.arrowLength + 'px';
if (e.arrowAngleInput) e.arrowAngleInput.value = s.arrowAngle;
if (e.arrowAngleValue) e.arrowAngleValue.textContent = s.arrowAngle + '\u00B0';
if (e.arrowBendInput) e.arrowBendInput.value = s.arrowBend;
if (e.arrowBendValue) e.arrowBendValue.textContent = s.arrowBend + '%';
if (e.arrowSizeInput) e.arrowSizeInput.value = s.arrowSize;
if (e.arrowSizeValue) e.arrowSizeValue.textContent = s.arrowSize + 'px';
if (e.arrowTipLengthInput) e.arrowTipLengthInput.value = s.arrowTipLength;
if (e.arrowTipLengthValue) e.arrowTipLengthValue.textContent = s.arrowTipLength + 'px';
// Buttons aktivieren
this.activateButton(e.shapeButtons, 'shape', s.shape);
this.activateButton(e.arrowButtons, 'arrow', s.arrow);
this.activateButton(e.lineStyleButtons, 'style', s.lineStyle);
this.activateButtonByValue(e.lineWeightButtons, 'weight', s.lineWeight);
},
activateButton: function(buttons, dataAttr, value) {
buttons.forEach(function(btn) {
btn.classList.remove('active');
if (btn.dataset[dataAttr] === value) {
btn.classList.add('active');
}
});
},
activateButtonByValue: function(buttons, dataAttr, value) {
buttons.forEach(function(btn) {
btn.classList.remove('active');
if (parseInt(btn.dataset[dataAttr]) === value) {
btn.classList.add('active');
}
});
},
updateVisibility: function() {
var e = this.elements;
var s = window.TextGenState.current;
var hasShape = s.shape !== 'none';
var hasArrow = s.arrow !== 'none';
if (e.frameScaleRow) e.frameScaleRow.style.display = hasShape ? 'flex' : 'none';
if (e.paddingAllRow) e.paddingAllRow.style.display = hasShape ? 'flex' : 'none';
if (e.paddingRow) e.paddingRow.style.display = hasShape ? 'flex' : 'none';
if (e.arrowDetailsRow) e.arrowDetailsRow.style.display = hasArrow ? 'flex' : 'none';
if (e.arrowDetailsRow2) e.arrowDetailsRow2.style.display = hasArrow ? 'flex' : 'none';
},
updatePreview: function() {
var e = this.elements;
if (e.textPreview && window.SvgGenerator) {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
e.textPreview.innerHTML = svg;
}
},
updateStandaloneArrowPreview: function() {
var e = this.elements;
var s = window.TextGenState.current;
if (!e.standaloneArrowPreview) return;
if (s.arrow === 'none') {
e.standaloneArrowPreview.innerHTML = '<p style="color: #9ca3af; font-size: 0.9rem;">Waehle einen Pfeil aus</p>';
return;
}
if (window.SvgGenerator) {
var svg = window.SvgGenerator.generateArrowOnly(s);
if (svg) {
e.standaloneArrowPreview.innerHTML = svg;
}
}
},
resetToDefaults: function() {
window.TextGenState.reset();
this.syncFromState();
this.updateVisibility();
this.updatePreview();
this.updateStandaloneArrowPreview();
}
};
window.UiBindings = UiBindings;