Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Editoren erweitert

Browse Source
This commit is contained in:
Matthias Grief
2024-12-23 15:00:06 +01:00
parent ed795e6996
commit 9ead25f106
3 changed files with 71 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webseite/classes/TopicData.php
View File

@@ -514,9 +514,6 @@ class TopicData
public function getFinishedArticle(): string
{
$a = str_replace('$TOPICPATH', Config::getTopicDirectory($this->subjectId, $this->id) . "images", $this->article);
$a = str_replace("\r\n", "<br>", $a);
$a = str_replace("\r", "<br>", $a);
$a = str_replace("\n", "<br>", $a);
return $a;
}

67
webseite/subjectEditor.php
View File

@@ -28,6 +28,7 @@ if (isset($_GET['subjectId'])) {
</head>
<body class="min-h-screen bg-gray-50">
<form id="subjectForm" onsubmit="handleSubjectSubmit(event)">
<div class="space-y-6">
<div>
@@ -38,7 +39,7 @@ if (isset($_GET['subjectId'])) {
class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg enabled:hover:border-gray-400"
placeholder="z.B. Mathematik"
value="<?php
if(isset($editingSubject)) {
if (isset($editingSubject)) {
echo $editingSubject->getDisplayName();
}
?>">
@@ -51,7 +52,7 @@ if (isset($_GET['subjectId'])) {
class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg enabled:hover:border-gray-400"
rows="4"
placeholder="Kurze Beschreibung des Fachs"><?php
if(isset($editingSubject)) {
if (isset($editingSubject)) {
echo $editingSubject->getDescription();
}
?></textarea>
@@ -62,7 +63,7 @@ if (isset($_GET['subjectId'])) {
<input type="color" name="color" required
class="w-full h-14 px-1 py-1 rounded-lg"
value="<?php
if(isset($editingSubject)) {
if (isset($editingSubject)) {
echo $editingSubject->getColor();
} else {
echo "#3b82f6";
@@ -75,31 +76,29 @@ if (isset($_GET['subjectId'])) {
<div class="grid grid-cols-6 gap-4 p-4 border rounded-lg bg-gray-50">
<?php
$icons = [
['fa-book', 'Buch'],
['fa-square-root-alt', 'Mathematik'],
['fa-flask', 'Naturwissenschaften'],
['fa-language', 'Sprachen'],
['fa-music', 'Musik'],
['fa-palette', 'Kunst'],
['fa-dumbbell', 'Sport'],
['fa-globe', 'Erdkunde'],
['fa-clock', 'Geschichte'],
['fa-microscope', 'Biologie'],
['fa-atom', 'Physik'],
['fa-vial', 'Chemie'],
['fa-computer', 'Informatik'],
['fa-calculator', 'Rechnen'],
['fa-pen', 'Schreiben'],
['fa-theater-masks', 'Theater'],
['fa-draw-polygon', 'Geometrie'],
['fa-tablets', 'Medizin']
'fa-book',
'fa-square-root-alt',
'fa-flask',
'fa-language',
'fa-music',
'fa-palette',
'fa-dumbbell',
'fa-globe',
'fa-clock',
'fa-microscope',
'fa-atom',
'fa-vial',
'fa-calculator',
'fa-pen',
'fa-theater-masks',
'fa-draw-polygon',
'fa-tablets',
];
foreach ($icons as $index => [$icon, $label]) {
foreach ($icons as $icon) {
echo "<div class='icon-option cursor-pointer p-4 rounded-lg hover:bg-white hover:shadow transition-all text-center'
onclick='selectIcon(this, \"$icon\")' data-icon='$icon'>
<i class='fas $icon text-2xl mb-2'></i>
<div class='text-xs text-gray-600'>$label</div>
</div>";
}
?>
@@ -120,5 +119,27 @@ if (isset($_GET['subjectId'])) {
</div>
</form>
<script>
function selectIcon(element, iconName) {
// Remove active class from all icons
document.querySelectorAll('.icon-option').forEach(el => {
el.classList.remove('bg-blue-50', 'ring-2', 'ring-blue-500');
});
// Add active class to selected icon
element.classList.add('bg-blue-50', 'ring-2', 'ring-blue-500');
// Set the hidden input value and log it
const iconInput = document.getElementById('selectedIcon');
iconInput.value = iconName;
// Visual feedback
element.classList.add('scale-105');
setTimeout(() => {
element.classList.remove('scale-105');
}, 200);
}
</script>
</body>
</html>

45
webseite/topicEditor.php
View File

@@ -34,8 +34,9 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
</head>
<body class="min-h-screen bg-gray-50">
<form id="topicForm" class="space-y-8">
<div class="grid grid-cols-2 gap-8">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
<!-- Left column - Topic details -->
<div class="space-y-6">
<div>
@@ -50,7 +51,8 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<div>
<label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700">Fach</label>
<select id="topicSubjectSelect" name="subject" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<select id="topicSubjectSelect" name="subject"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<option value="">Fach auswählen...</option>
<?php
foreach ($allSubjects as $subject) {
@@ -68,7 +70,8 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
</div>
<div>
<label for="topicDescriptionSelect" class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<label for="topicDescriptionSelect"
class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<textarea id="topicDescriptionSelect" name="description" rows="5"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required><?php
if (isset($editingTopic)) {
@@ -79,24 +82,27 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<div>
<label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon" id="iconSelect" value="<?php
if(isset($editingTopic)){
echo $editingTopic->getIcon();
}
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon"
id="iconSelect" value="<?php
if (isset($editingTopic)) {
echo $editingTopic->getIcon();
}
?>">
</div>
<div>
<label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen als IDs und kommagetrennt</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="related-topics" id="relatedTopicSelect" value="<?php
if(isset($editingTopic)) {
echo implode(", ", $editingTopic->getRelatedTopics());
}
<label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen
als IDs und kommagetrennt</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text"
name="related-topics" id="relatedTopicSelect" value="<?php
if (isset($editingTopic)) {
echo implode(", ", $editingTopic->getRelatedTopics());
}
?>">
</div>
</div>
<!-- Right column - Content and preview -->
<!-- Right column - Editor -->
<div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
@@ -115,20 +121,23 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<div id="quillEditor" style="height: 400px;" class="bg-white border rounded-lg">
<?php
if(isset($editingTopic)) {
echo $editingTopic->getFinishedArticle();
}
if (isset($editingTopic)) {
$article = $editingTopic->getFinishedArticle();
$article = str_replace("$$", "<br>$$<br>", $article);
echo $article;
}
?>
</div>
</div>
</div>
</div>
<!-- Preview section -->
<!--
<div class="border rounded-lg p-8 mt-8 bg-gray-50">
<h4 class="text-lg font-medium text-gray-700 mb-4">Vorschau</h4>
<div id="contentPreview" class="prose prose-lg max-w-none bg-white p-6 rounded-lg shadow-sm"></div>
</div>
-->
<div class="flex justify-end gap-4">
<button type="button" onclick="closeModal()"
@@ -160,7 +169,7 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
quill.on('text-change', (delta, oldDelta, source) => {
const html = quill.getSemanticHTML();
document.getElementById('contentPreview').innerHTML = html;
//document.getElementById('contentPreview').innerHTML = html;
document.getElementById('article-upload-field').value = html;
});