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

Themeneditor vorerst fertig

Browse Source
This commit is contained in:
Matthias Grief
2024-12-31 17:32:19 +01:00
parent ea8b48b97b
commit 35fd0537ca
5 changed files with 7669 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
webseite/assets/js/katex_autorender_mod.js Normal file
View File

@@ -0,0 +1,392 @@
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("katex"));
else if (typeof define === 'function' && define.amd)
define(["katex"], factory);
else if (typeof exports === 'object')
exports["renderMathInElement"] = factory(require("katex"));
else
root["renderMathInElement"] = factory(root["katex"]);
})((typeof self !== 'undefined' ? self : this), function (__WEBPACK_EXTERNAL_MODULE__757__) {
return /******/ (function () { // webpackBootstrap
/******/
"use strict";
/******/
var __webpack_modules__ = ({
/***/ 757:
/***/ (function (module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__757__;
/***/
})
/******/
});
/************************************************************************/
/******/ // The module cache
/******/
var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/
function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/
var cachedModule = __webpack_module_cache__[moduleId];
/******/
if (cachedModule !== undefined) {
/******/
return cachedModule.exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/
var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/
};
/******/
/******/ // Execute the module function
/******/
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/
return module.exports;
/******/
}
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/
!function () {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/
__webpack_require__.n = function (module) {
/******/
var getter = module && module.__esModule ?
/******/ function () {
return module['default'];
} :
/******/ function () {
return module;
};
/******/
__webpack_require__.d(getter, {a: getter});
/******/
return getter;
/******/
};
/******/
}();
/******/
/******/ /* webpack/runtime/define property getters */
/******/
!function () {
/******/ // define getter functions for harmony exports
/******/
__webpack_require__.d = function (exports, definition) {
/******/
for (var key in definition) {
/******/
if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/
Object.defineProperty(exports, key, {enumerable: true, get: definition[key]});
/******/
}
/******/
}
/******/
};
/******/
}();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/
!function () {
/******/
__webpack_require__.o = function (obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
}
/******/
}();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function () {
return /* binding */ auto_render;
}
});
// EXTERNAL MODULE: external "katex"
var external_katex_ = __webpack_require__(757);
var external_katex_default = /*#__PURE__*/__webpack_require__.n(external_katex_);
;// CONCATENATED MODULE: ./contrib/auto-render/splitAtDelimiters.js
/* eslint no-constant-condition:0 */
const findEndOfMath = function (delimiter, text, startIndex) {
// Adapted from
// https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
let index = startIndex;
let braceLevel = 0;
const delimLength = delimiter.length;
while (index < text.length) {
const character = text[index];
if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
return index;
} else if (character === "\\") {
index++;
} else if (character === "{") {
braceLevel++;
} else if (character === "}") {
braceLevel--;
}
index++;
}
return -1;
};
const escapeRegex = function (string) {
return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
};
const amsRegex = /^\\begin{/;
const splitAtDelimiters = function (text, delimiters) {
let index;
const data = [];
const regexLeft = new RegExp("(" + delimiters.map(x => escapeRegex(x.left)).join("|") + ")");
while (true) {
index = text.search(regexLeft);
if (index === -1) {
break;
}
if (index > 0) {
data.push({
type: "text",
data: text.slice(0, index)
});
text = text.slice(index); // now text starts with delimiter
} // ... so this always succeeds:
const i = delimiters.findIndex(delim => text.startsWith(delim.left));
index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
if (index === -1) {
break;
}
const rawData = text.slice(0, index + delimiters[i].right.length);
const math = amsRegex.test(rawData) ? rawData : text.slice(delimiters[i].left.length, index);
data.push({
type: "math",
data: math,
rawData,
display: delimiters[i].display
});
text = text.slice(index + delimiters[i].right.length);
}
if (text !== "") {
data.push({
type: "text",
data: text
});
}
return data;
};
/* harmony default export */
var auto_render_splitAtDelimiters = (splitAtDelimiters);
;// CONCATENATED MODULE: ./contrib/auto-render/auto-render.js
/* eslint no-console:0 */
/* Note: optionsCopy is mutated by this method. If it is ever exposed in the
* API, we should copy it before mutating.
*/
const renderMathInText = function (text, optionsCopy) {
const data = auto_render_splitAtDelimiters(text, optionsCopy.delimiters);
if (data.length === 1 && data[0].type === 'text') {
// There is no formula in the text.
// Let's return null which means there is no need to replace
// the current text node with a new one.
return null;
}
const fragment = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
if (data[i].type === "text") {
fragment.appendChild(document.createTextNode(data[i].data));
} else {
const span = document.createElement("span");
let math = data[i].data; // Override any display mode defined in the settings with that
// defined by the text itself
optionsCopy.displayMode = data[i].display;
try {
if (optionsCopy.preProcess) {
math = optionsCopy.preProcess(math);
}
/*
Modified segment (two lines):
makes the rendered Formula compatible with Quill by adding the required Data
*/
span.classList.add('ql-formula');
span.setAttribute('data-value', math);
external_katex_default().render(math, span, optionsCopy);
} catch (e) {
if (!(e instanceof (external_katex_default()).ParseError)) {
throw e;
}
optionsCopy.errorCallback("KaTeX auto-render: Failed to parse `" + data[i].data + "` with ", e);
fragment.appendChild(document.createTextNode(data[i].rawData));
continue;
}
fragment.appendChild(span);
}
}
return fragment;
};
const renderElem = function (elem, optionsCopy) {
for (let i = 0; i < elem.childNodes.length; i++) {
const childNode = elem.childNodes[i];
if (childNode.nodeType === 3) {
// Text node
// Concatenate all sibling text nodes.
// Webkit browsers split very large text nodes into smaller ones,
// so the delimiters may be split across different nodes.
let textContentConcat = childNode.textContent;
let sibling = childNode.nextSibling;
let nSiblings = 0;
while (sibling && sibling.nodeType === Node.TEXT_NODE) {
textContentConcat += sibling.textContent;
sibling = sibling.nextSibling;
nSiblings++;
}
const frag = renderMathInText(textContentConcat, optionsCopy);
if (frag) {
// Remove extra text nodes
for (let j = 0; j < nSiblings; j++) {
childNode.nextSibling.remove();
}
i += frag.childNodes.length - 1;
elem.replaceChild(frag, childNode);
} else {
// If the concatenated text does not contain math
// the siblings will not either
i += nSiblings;
}
} else if (childNode.nodeType === 1) {
// Element node
const className = ' ' + childNode.className + ' ';
const shouldRender = optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 && optionsCopy.ignoredClasses.every(x => className.indexOf(' ' + x + ' ') === -1);
if (shouldRender) {
renderElem(childNode, optionsCopy);
}
} // Otherwise, it's something else, and ignore it.
}
};
const renderMathInElement = function (elem, options) {
if (!elem) {
throw new Error("No element provided to render");
}
const optionsCopy = {}; // Object.assign(optionsCopy, option)
for (const option in options) {
if (options.hasOwnProperty(option)) {
optionsCopy[option] = options[option];
}
} // default options
optionsCopy.delimiters = optionsCopy.delimiters || [{
left: "$$",
right: "$$",
display: true
}, {
left: "\\(",
right: "\\)",
display: false
}, // LaTeX uses $…$, but it ruins the display of normal `$` in text:
// {left: "$", right: "$", display: false},
// $ must come after $$
// Render AMS environments even if outside $$…$$ delimiters.
{
left: "\\begin{equation}",
right: "\\end{equation}",
display: true
}, {
left: "\\begin{align}",
right: "\\end{align}",
display: true
}, {
left: "\\begin{alignat}",
right: "\\end{alignat}",
display: true
}, {
left: "\\begin{gather}",
right: "\\end{gather}",
display: true
}, {
left: "\\begin{CD}",
right: "\\end{CD}",
display: true
}, {
left: "\\[",
right: "\\]",
display: true
}];
optionsCopy.ignoredTags = optionsCopy.ignoredTags || ["script", "noscript", "style", "textarea", "pre", "code", "option"];
optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
optionsCopy.errorCallback = optionsCopy.errorCallback || console.error; // Enable sharing of global macros defined via `\gdef` between different
// math elements within a single call to `renderMathInElement`.
optionsCopy.macros = optionsCopy.macros || {};
renderElem(elem, optionsCopy);
};
/* harmony default export */
var auto_render = (renderMathInElement);
__webpack_exports__ = __webpack_exports__["default"];
/******/
return __webpack_exports__;
/******/
})()
;
});

7236
webseite/assets/js/quill_mod.js Normal file
View File

File diff suppressed because it is too large Load Diff

47
webseite/config/subjects/mathe/topics/bruchrechnung/article.html
View File

@@ -1,46 +1 @@
Brüche werden verwendet, um Anteile an einem Ganzen darzustellen. So kann es vorkommen, dass nur ein Teil einer Pizza gegessen wird oder nur ein Teil einer Flasche getrunken wird. In der Mathematik wird ein solcher Anteil durch einen Bruch dargestellt. In der folgenden Grafik wird gezeigt, wie 3 von 7 Kästchen gelb markiert werden, und wie der entsprechende Bruch dargestellt wird.
<br><br> Ein Bruch setzt sich aus einem Zähler, einem Bruchstrich und einem Nenner zusammen. Der Zähler wird über dem Bruchstrich geschrieben, der Nenner darunter.
<br><br>
$$
\begin{array}{cl}
3 & \text{Zahler} \\
- & \text{Bruchstrich} \\
7 & \text{Nenner} \\
\end{array}
$$
<strong>Brüche addieren und subtrahieren</strong> <br><br> Brüche mit gleichen Nennern (= gleichnamige Brüche) werden addiert, indem die Zähler addiert und der Nenner beibehalten wird. So werden aus 2 von 6 Stücken plus 3 von 6 Stücken insgesamt 5 von 6 Stücken.
$$
\frac{2}{6} + \frac{3}{6} = \frac{5}{6}
$$
<br><br>
Zur Subtraktion gleichnamiger Brüche werden die Zähler subtrahiert und der Nenner beibehalten. Wenn von 5 von 6 Stücken 3 von 6 Stücke weggenommen werden, bleiben 2 der 6 Stücke übrig.
$$
\frac{5}{6} - \frac{3}{6} = \frac{2}{6}
$$
<br><br>
<strong>Brüche multiplizieren und dividieren</strong>
<br><br>
Brüche werden multipliziert, indem die Zähler und Nenner jeweils miteinander multipliziert werden: Zähler mal Zähler und Nenner mal Nenner. Beim Bruchrechnen mit der Grundrechenart Multiplikation spielt es keine Rolle, ob die Nenner gleich oder verschieden sind.
$$
\frac{2}{9} \cdot \frac{5}{9} = \frac{10}{81}
$$
Bei der Multiplikation von Brüchen mit unterschiedlichen Nennern (= ungleichnamige Brüche) werden ebenfalls die Zähler und Nenner jeweils miteinander multipliziert. Im Gegensatz zur Addition müssen die Brüche dabei nicht auf einen gemeinsamen Nenner gebracht werden.
$$
\frac{4}{5} \cdot \frac{2}{3} = \frac{8}{15}
$$
Die Division von Brüchen basiert auf der Multiplikation von Brüchen. Um zwei Brüche zu dividieren, wird aus der Division eine Multiplikation gemacht. Das Geteiltzeichen wird durch ein Malzeichen ersetzt. Dafür wird beim zweiten Bruch der Zähler und der Nenner vertauscht.
$$
\frac{5}{8} : \frac{4}{7} = \frac{5}{8} \cdot \frac{7}{4} = \frac{35}{32}
$$
<p>Brüche werden verwendet, um Anteile an einem Ganzen darzustellen. So kann es vorkommen, dass nur ein Teil einer Pizza gegessen wird oder nur ein Teil einer Flasche getrunken wird. In der Mathematik wird ein solcher Anteil durch einen Bruch dargestellt. In der folgenden Grafik wird gezeigt, wie 3 von 7 Kästchen gelb markiert werden, und wie der entsprechende Bruch dargestellt wird.</p><p></p><p>Ein Bruch setzt sich aus einem Zähler, einem Bruchstrich und einem Nenner zusammen. Der Zähler wird über dem Bruchstrich geschrieben, der Nenner darunter.</p><p><span>$$\begin{array}{cl} 3 & \text{Zahler} \\ - & \text{Bruchstrich} \\ 7 & \text{Nenner} \\ \end{array}$$</span></p><p><strong>Brüche addieren und subtrahieren</strong></p><p></p><p>Brüche mit gleichen Nennern (= gleichnamige Brüche) werden addiert, indem die Zähler addiert und der Nenner beibehalten wird. So werden aus 2 von 6 Stücken plus 3 von 6 Stücken insgesamt 5 von 6 Stücken.</p><p></p><p><span>$$\frac{2}{6} + \frac{3}{6} = \frac{5}{6}$$</span></p><p></p><p>Zur Subtraktion gleichnamiger Brüche werden die Zähler subtrahiert und der Nenner beibehalten. Wenn von 5 von 6 Stücken 3 von 6 Stücke weggenommen werden, bleiben 2 der 6 Stücke übrig.</p><p></p><p><span>$$\frac{5}{6} - \frac{3}{6} = \frac{2}{6}$$</span></p><p></p><p><strong>Brüche multiplizieren und dividieren</strong></p><p></p><p>Brüche werden multipliziert, indem die Zähler und Nenner jeweils miteinander multipliziert werden: Zähler mal Zähler und Nenner mal Nenner. Beim Bruchrechnen mit der Grundrechenart Multiplikation spielt es keine Rolle, ob die Nenner gleich oder verschieden sind.</p><p></p><p><span>$$\frac{2}{9} \cdot \frac{5}{9} = \frac{10}{81}$$</span></p><p></p><p>Bei der Multiplikation von Brüchen mit unterschiedlichen Nennern (= ungleichnamige Brüche) werden ebenfalls die Zähler und Nenner jeweils miteinander multipliziert. Im Gegensatz zur Addition müssen die Brüche dabei nicht auf einen gemeinsamen Nenner gebracht werden.</p><p></p><p><span>$$\frac{4}{5} \cdot \frac{2}{3} = \frac{8}{15}$$</span></p><p></p><p>Die Division von Brüchen basiert auf der Multiplikation von Brüchen. Um zwei Brüche zu dividieren, wird aus der Division eine Multiplikation gemacht. Das Geteiltzeichen wird durch ein Malzeichen ersetzt. Dafür wird beim zweiten Bruch der Zähler und der Nenner vertauscht.</p><p></p><p><span>$$\frac{5}{8} : \frac{4}{7} = \frac{5}{8} \cdot \frac{7}{4} = \frac{35}{32}$$</span></p>

13
webseite/topic.php
View File

@@ -43,10 +43,15 @@ if (!isset($topicData)) {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
{left: "$$", right: "$$", display: true},
{left: "\\(", right: "\\)", display: false},
{left: "\\begin{equation}", right: "\\end{equation}", display: true},
{left: "\\begin{array}", right: "\\end{array}", display: true},
{left: "\\begin{align}", right: "\\end{align}", display: true},
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
{left: "\\[", right: "\\]", display: true}
],
// • rendering keys, e.g.:
throwOnError : false

50
webseite/topicEditor.php
View File

@@ -19,9 +19,9 @@ $defaultValues['article'] = "";
$errors = array();
if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
if (isset($allSubjects[$_GET['subjectId']]->getTopics()[$_GET['topicId']])) {
$editingTopic = $allSubjects[$_GET['subjectId']]->getTopics()[$_GET['topicId']];
if (isset($_GET['subject']) && isset($_GET['topic'])) {
if (isset($allSubjects[$_GET['subject']]->getTopics()[$_GET['topic']])) {
$editingTopic = $allSubjects[$_GET['subject']]->getTopics()[$_GET['topic']];
$defaultValues['displayName'] = $editingTopic->getDisplayName();
$defaultValues['id'] = $editingTopic->getId();
@@ -29,7 +29,7 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
$defaultValues['description'] = $editingTopic->getDescription();
$defaultValues['icon'] = $editingTopic->getIcon();
$defaultValues['relatedTopics'] = implode(", ", $editingTopic->getRelatedTopics());
$defaultValues['article'] = str_replace("$$", "<br>$$<br>", $editingTopic->getFinishedArticle());
$defaultValues['article'] = $editingTopic->getFinishedArticle();
}
}
@@ -106,11 +106,11 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script src="assets/js/quill_mod.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.css" integrity="sha384-veTAhWILPOotXm+kbR5uY7dRamYLJf58I7P+hJhjeuc7hsMAkJHTsPahAl0hBST0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.js" integrity="sha384-v6mkHYHfY/4BWq54f7lQAdtIsoZZIByznQ3ZqN38OL4KCsrxo31SLlPiak7cj/Mg" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.css" integrity="sha384-7lU0muIg/i1plk7MgygDUp3/bNRA65orrBub4/OSWHECgwEsY83HaS1x3bljA/XV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.js" integrity="sha384-RdymN7NRJ+XoyeRY4185zXaxq9QWOOx3O7beyyrRK4KQZrPlCDQQpCu95FoCGPAE" crossorigin="anonymous"></script>
<script src="assets/js/katex_autorender_mod.js"></script>
</head>
<body class="min-h-screen bg-gray-50">
@@ -188,7 +188,12 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
</div>
<div id="quillEditor" style="height: 400px;" class="bg-white border rounded-lg">
<?php echo $defaultValues['article']; ?>
<?php
$article = $defaultValues['article'];
echo $article;
?>
</div>
</div>
</div>
@@ -214,16 +219,24 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
</form>
<script>
const Inline = Quill.import('blots/inline');
const Block = Quill.import('blots/block');
const Embed = Quill.import('blots/embed');
class FormulaBlot extends Embed {
static blotName = 'formula';
static tagName = 'math';
function renderFormulas() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\(", right: "\\)", display: false},
{left: "\\begin{equation}", right: "\\end{equation}", display: true},
{left: "\\begin{array}", right: "\\end{array}", display: true},
{left: "\\begin{align}", right: "\\end{align}", display: true},
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
{left: "\\[", right: "\\]", display: true}
],
throwOnError : false
});
}
//Quill.register(FormulaBlot);
renderFormulas();
const quill = new Quill('#quillEditor', {
modules: {
@@ -242,11 +255,10 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
const html = quill.getSemanticHTML().replace(/&nbsp;/g, " ");
document.getElementById('contentPreview').innerHTML = html;
document.getElementById('article-upload-field').value = html;
renderFormulas();
});
quill.emitter.emit('text-change');
</script>
</body>