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 public function getFinishedArticle(): string
{ {
$a = str_replace('$TOPICPATH', Config::getTopicDirectory($this->subjectId, $this->id) . "images", $this->article); $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; return $a;
} }

67
webseite/subjectEditor.php
View File

@@ -28,6 +28,7 @@ if (isset($_GET['subjectId'])) {
</head> </head>
<body class="min-h-screen bg-gray-50"> <body class="min-h-screen bg-gray-50">
<form id="subjectForm" onsubmit="handleSubjectSubmit(event)"> <form id="subjectForm" onsubmit="handleSubjectSubmit(event)">
<div class="space-y-6"> <div class="space-y-6">
<div> <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" 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" placeholder="z.B. Mathematik"
value="<?php value="<?php
if(isset($editingSubject)) { if (isset($editingSubject)) {
echo $editingSubject->getDisplayName(); 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" 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" rows="4"
placeholder="Kurze Beschreibung des Fachs"><?php placeholder="Kurze Beschreibung des Fachs"><?php
if(isset($editingSubject)) { if (isset($editingSubject)) {
echo $editingSubject->getDescription(); echo $editingSubject->getDescription();
} }
?></textarea> ?></textarea>
@@ -62,7 +63,7 @@ if (isset($_GET['subjectId'])) {
<input type="color" name="color" required <input type="color" name="color" required
class="w-full h-14 px-1 py-1 rounded-lg" class="w-full h-14 px-1 py-1 rounded-lg"
value="<?php value="<?php
if(isset($editingSubject)) { if (isset($editingSubject)) {
echo $editingSubject->getColor(); echo $editingSubject->getColor();
} else { } else {
echo "#3b82f6"; 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"> <div class="grid grid-cols-6 gap-4 p-4 border rounded-lg bg-gray-50">
<?php <?php
$icons = [ $icons = [
['fa-book', 'Buch'], 'fa-book',
['fa-square-root-alt', 'Mathematik'], 'fa-square-root-alt',
['fa-flask', 'Naturwissenschaften'], 'fa-flask',
['fa-language', 'Sprachen'], 'fa-language',
['fa-music', 'Musik'], 'fa-music',
['fa-palette', 'Kunst'], 'fa-palette',
['fa-dumbbell', 'Sport'], 'fa-dumbbell',
['fa-globe', 'Erdkunde'], 'fa-globe',
['fa-clock', 'Geschichte'], 'fa-clock',
['fa-microscope', 'Biologie'], 'fa-microscope',
['fa-atom', 'Physik'], 'fa-atom',
['fa-vial', 'Chemie'], 'fa-vial',
['fa-computer', 'Informatik'], 'fa-calculator',
['fa-calculator', 'Rechnen'], 'fa-pen',
['fa-pen', 'Schreiben'], 'fa-theater-masks',
['fa-theater-masks', 'Theater'], 'fa-draw-polygon',
['fa-draw-polygon', 'Geometrie'], 'fa-tablets',
['fa-tablets', 'Medizin']
]; ];
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' 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'> onclick='selectIcon(this, \"$icon\")' data-icon='$icon'>
<i class='fas $icon text-2xl mb-2'></i> <i class='fas $icon text-2xl mb-2'></i>
<div class='text-xs text-gray-600'>$label</div>
</div>"; </div>";
} }
?> ?>
@@ -120,5 +119,27 @@ if (isset($_GET['subjectId'])) {
</div> </div>
</form> </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> </body>
</html> </html>

45
webseite/topicEditor.php
View File

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