This commit is contained in:
Philippe Torrel
+4
-3
@@ -351,9 +351,7 @@ Projektarbeit
|
||||
- **Exkurs: Projektstruktur mit Gulp Part II**
|
||||
- Events in JS MouseEvent, KeyboardEvent
|
||||
- Projekt: Newsboard
|
||||
- HTML Element Progress
|
||||
- IDL-Attribut vs. Content-Attribut
|
||||
- HTML Attribute mit boolescher Zuweisung
|
||||
|
||||
|
||||
**Übungen:**
|
||||
|
||||
@@ -365,6 +363,9 @@ Projektarbeit
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- HTML Element Progress
|
||||
- IDL-Attribut vs. Content-Attribut
|
||||
- HTML Attribute mit boolescher Zuweisung
|
||||
- Tooltip: HTML erweitern mit Data-Attribut
|
||||
- Dataset Attribut, DOMStringMap Objekt
|
||||
- getComputedStyle, Attribute mit boolscher Zuweisung
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
# Teams über git-bash
|
||||
|
||||
Hier ist die schrittweise Anleitung, wie du das Skript ablegst, ausführst und bei Bedarf bei jedem Login automatisch starten lässt.
|
||||
|
||||
1. **Speicherort wählen:** Persistentes Verzeichnis.
|
||||
Da das Notebook regelmäßig neu aufgesetzt wird, muss das Skript an einem Ort liegen, der nicht gelöscht wird (z. B. auf einem USB-Stick, Netzlaufwerk oder in einem synchronisierten Ordner).
|
||||
|
||||
Falls dein lokales Benutzerverzeichnis überlebt, erstelle dort einen Skript-Ordner:
|
||||
|
||||
```bash
|
||||
mkdir -p "$HOME/bin"
|
||||
|
||||
```
|
||||
|
||||
*Erfolgsprüfung:* Führe `ls -ld "$HOME/bin"` in der Git Bash aus. Das Verzeichnis wird ohne Fehler gelistet.
|
||||
|
||||
|
||||
2. **Skriptdatei anlegen:** teams-link-fix.sh.
|
||||
Erstelle die Datei `$HOME/bin/teams-link-fix.sh` und füge den folgenden Inhalt ein:
|
||||
|
||||
```bash
|
||||
#!/usr/bin/env bash
|
||||
set -e
|
||||
|
||||
echo "==> Prüfe Standardbrowser für HTTP..."
|
||||
HTTP_PROGID=$(MSYS_NO_PATHCONV=1 reg.exe query \
|
||||
"HKCU\Software\Microsoft\Windows\Shell\Associations\UrlAssociations\http\UserChoice" \
|
||||
/v "ProgId" 2>/dev/null | tr -d '\r' | awk '/ProgId/ {print $NF}')
|
||||
|
||||
if [[ "$HTTP_PROGID" =~ [Ff]irefox ]]; then
|
||||
echo "✔ Firefox ist als Standardbrowser gesetzt ($HTTP_PROGID)."
|
||||
else
|
||||
echo "⚠ Firefox ist aktuell NICHT der Standardbrowser (aktuell: '${HTTP_PROGID:-Unbekannt}')."
|
||||
echo "==> Versuche Firefox als Standardbrowser anzutriggern..."
|
||||
|
||||
FF_BIN=""
|
||||
for candidate in \
|
||||
"/c/Program Files/Mozilla Firefox/firefox.exe" \
|
||||
"/c/Program Files (x86)/Mozilla Firefox/firefox.exe" \
|
||||
"$LOCALAPPDATA/Mozilla Firefox/firefox.exe"; do
|
||||
if [ -f "$candidate" ]; then
|
||||
FF_BIN="$candidate"
|
||||
break
|
||||
fi
|
||||
done
|
||||
|
||||
if [ -n "$FF_BIN" ]; then
|
||||
"$FF_BIN" -setDefaultBrowser >/dev/null 2>&1 || true
|
||||
fi
|
||||
fi
|
||||
|
||||
echo "==> Setze Teams Link-Handler auf Standardbrowser..."
|
||||
MSYS_NO_PATHCONV=1 reg.exe add "HKCU\Software\Microsoft\Office\16.0\Common\Links" \
|
||||
/v "BrowserSelection" \
|
||||
/t REG_DWORD \
|
||||
/d 0 \
|
||||
/f >/dev/null
|
||||
|
||||
echo "✔ Registry aktualisiert (BrowserSelection = 0)."
|
||||
|
||||
echo "==> Starte Teams neu..."
|
||||
taskkill.exe //F //IM ms-teams.exe 2>/dev/null || true
|
||||
taskkill.exe //F //IM Teams.exe 2>/dev/null || true
|
||||
sleep 1
|
||||
explorer.exe 'shell:AppsFolder\MSTeams_8wekyb3d8bbwe!MSTeams'
|
||||
|
||||
echo "✔ Fertig!"
|
||||
|
||||
```
|
||||
|
||||
*Erfolgsprüfung:* Mache das Skript ausführbar mit `chmod +x "$HOME/bin/teams-link-fix.sh"`.
|
||||
|
||||
|
||||
3. **Skript manuell testen:** Git Bash.
|
||||
Führe das Skript einmal direkt aus, um zu prüfen, ob die Registry ohne Fehlermeldung beschrieben wird:
|
||||
|
||||
```bash
|
||||
~/bin/teams-link-fix.sh
|
||||
|
||||
```
|
||||
|
||||
*Erfolgsprüfung:* Die Ausgabe endet mit `✔ Fertig!` und Teams startet neu. Ein Klick auf einen Web-Link in einem Teams-Chat öffnet sich direkt in Firefox statt Microsoft Edge.
|
||||
|
||||
|
||||
4. **Optional: Autostart nach täglichem Re-Image:** Windows Autostart.
|
||||
Wenn du nach dem Neuaufsetzen nicht jedes Mal die Bash öffnen möchtest, lege eine kleine Starter-Verknüpfung im Windows-Autostart-Ordner an:
|
||||
|
||||
1. Drücke `Win + R`, tippe `shell:startup` ein und drücke **Enter**.
|
||||
2. Erstelle in diesem Ordner eine Textdatei namens `teams-fix.cmd` mit folgendem Inhalt (Pfad ggf. anpassen):
|
||||
|
||||
```bat
|
||||
@echo off
|
||||
"C:\Program Files\Git\bin\bash.exe" -c "~/bin/teams-link-fix.sh"
|
||||
|
||||
```
|
||||
|
||||
*Erfolgsprüfung:* Melde dich ab und wieder an. Das Konsolenfenster öffnet sich kurz und schließt sich nach erfolgreicher Ausführung automatisch.
|
||||
Binary file not shown.
@@ -21,7 +21,7 @@
|
||||
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
|
||||
- [HTMLReference.io](https://htmlreference.io/)
|
||||
- [BEM](https://getbem.com/) - Block Element Modifier
|
||||
|
||||
- <https://devtoys.pro/de/blog/keycode-reference-guide>
|
||||
## CSS Tricks
|
||||
|
||||
- [CSSReference.io](https://cssreference.io/)
|
||||
|
||||
@@ -15,34 +15,65 @@
|
||||
|
||||
console.log(DOM);
|
||||
|
||||
// let currentMessageNumber = 1;
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {
|
||||
// Funktionaufrufe zu beginn der Anwendung
|
||||
showMessageByNumber(1);
|
||||
initProgressbar();
|
||||
showMessageByNumber(1);
|
||||
showMessageNumber();
|
||||
|
||||
// Eventlauscher zu beginn der Anwendung
|
||||
DOM.buttonNext.addEventListener('click', onClickNext);
|
||||
DOM.buttonPrev.addEventListener('click', onClickPrev);
|
||||
DOM.buttonFirst.addEventListener('click', onClickFirst);
|
||||
DOM.buttonLast.addEventListener('click', onClickLast);
|
||||
window.addEventListener('keyup', onKeyUp);
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
const onKeyUp = (e) => {
|
||||
// Übung 8.3 && 8.4 Tastatursteuerung
|
||||
if (e.altKey && e.key === 'ArrowLeft') {
|
||||
onClickFirst();
|
||||
} else if (e.altKey && e.key === 'ArrowRight') {
|
||||
onClickLast();
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
onClickPrev();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
onClickNext();
|
||||
}
|
||||
};
|
||||
|
||||
const onClickNext = (e) => {
|
||||
showMessageByNumber((DOM.progressBar.value += 1));
|
||||
// showMessageByNumber(++currentMessageNumber);
|
||||
};
|
||||
const onClickPrev = (e) => {
|
||||
showMessageByNumber((DOM.progressBar.value -= 1));
|
||||
// showMessageByNumber(--currentMessageNumber);
|
||||
};
|
||||
|
||||
const onClickFirst = (e) => {
|
||||
showMessageByNumber((DOM.progressBar.value = 1));
|
||||
// showMessageByNumber((currentMessageNumber = 1));
|
||||
};
|
||||
|
||||
const onClickLast = (e) => {
|
||||
showMessageByNumber((DOM.progressBar.value = MESSAGES.length));
|
||||
// showMessageByNumber((currentMessageNumber = MESSAGES.length));
|
||||
};
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const showMessageByNumber = (n) => {
|
||||
DOM.newsboardContent.innerHTML = MESSAGES[n - 1];
|
||||
updateNavigationButtons();
|
||||
};
|
||||
|
||||
const showMessageNumber = () => {
|
||||
DOM.messageNumber.textContent = MESSAGES.length;
|
||||
};
|
||||
|
||||
const initProgressbar = () => {
|
||||
@@ -50,24 +81,10 @@
|
||||
DOM.progressBar.value = 1;
|
||||
};
|
||||
|
||||
const updateNavigationButtons = () => {
|
||||
DOM.buttonPrev.disabled = DOM.buttonFirst.disabled = DOM.progressBar.value === 1;
|
||||
DOM.buttonNext.disabled = DOM.buttonLast.disabled = DOM.progressBar.value === MESSAGES.length;
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
|
||||
// Übung 8: Newsboard: Das geht noch besser
|
||||
// Das Newsboard wartet noch auf das Vervollständigen seiner Funktionen.
|
||||
|
||||
// 1. Belege die Links » und « mit Funktionalität. Der Link mit der Aufschrift « soll es erlauben, zur ersten Nachricht zu springen, der Link » zur letzten.
|
||||
|
||||
// 2. Der bisher eher sinnlose rote Kreis in der linken oberen Ecke soll nun die Gesamtanzahl der Nachrichten anzeigen. Schreibe eine Funktion, die diese Anzahl ausliest und in das <span> mit der Klasse message_number einträgt.
|
||||
|
||||
// 3. Unterstütze ab sofort das Navigieren durch die News mit der Tastatur. Die Pfeiltasten nach links und rechts sollen dabei jeweils die gleiche Funktionalität wie die Buttons < und > ermöglichen.
|
||||
|
||||
// 4. Auch das Springen auf die erste bzw. letzte Position soll nun mit Tastatur möglich sein. Die Tastenkombination dafür ist alt und die Pfeiltaste nach links (zur ersten Nachricht) bzw. rechts (zur letzten Nachricht).
|
||||
|
||||
// Übung 9: Newsboard: Jetzt ist aber Schluss!
|
||||
|
||||
// Die neuen Features des Newsboards sind schon fast fertig. Problematisch ist aber, dass die Vorwärts- und Rückwärts-Buttons auch aktiv sind, wenn es keine vorige bzw. nächste Nachricht mehr gibt. Dies führt zu einem sehr unschönen Fehler.
|
||||
|
||||
// 2. Sorge dafür, dass die Vor- und Rückwärts-Buttons jeweils deaktiviert werden, sobald der Anwender am Anfang bzw. Ende der Nachrichtenliste angekommen ist.
|
||||
|
||||
// 3. Auch die Buttons, die den Anwender zur ersten bzw. zur letzten Nachricht führen, sollen deaktiviert sein, sobald sich der Anwender bei der ersten bzw. letzten Nachricht befindet.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -6,15 +6,15 @@
|
||||
<title>Webseite mit HTML & CSS (SCSS)</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="./favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="JS Course" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
<link rel="manifest" href="./favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<script src="/assets/js/build.js" defer></script>
|
||||
<link rel="stylesheet" href="./assets/css/main.css" />
|
||||
<script src="./assets/js/build.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -31,18 +31,18 @@
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about.html">About</a></li>
|
||||
<li><a href="./">Home</a></li>
|
||||
<li><a href="./about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="./projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="#">Project 2</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/contact.html">Contact</a></li>
|
||||
<li><a href="./contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
<title>Webseite mit HTML & CSS (SCSS)</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" href="@@webRoot/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="@@webRoot/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="@@webRoot/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="@@webRoot/favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="JS Course" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
<link rel="manifest" href="@@webRoot/favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<script src="/assets/js/build.js" defer></script>
|
||||
<link rel="stylesheet" href="@@webRoot/assets/css/main.css" />
|
||||
<script src="@@webRoot/assets/js/build.js" defer></script>
|
||||
</head>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about.html">About</a></li>
|
||||
<li><a href="@@webRoot/">Home</a></li>
|
||||
<li><a href="@@webRoot/about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="@@webRoot/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="#">Project 2</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/contact.html">Contact</a></li>
|
||||
<li><a href="@@webRoot/contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -154,12 +154,15 @@ import * as dartSass from 'sass';
|
||||
import gulpSass from 'gulp-sass';
|
||||
import autoPrefixer from 'gulp-autoprefixer';
|
||||
|
||||
// import plumber from 'gulp-plumber';
|
||||
|
||||
const sass = gulpSass(dartSass);
|
||||
task('css', (done) => {
|
||||
const sourceFile = './dev/scss/main.scss';
|
||||
const targetFolder = './assets/css';
|
||||
|
||||
src(sourceFile, { allowEmpty: true, sourcemaps: true })
|
||||
// .pipe(plumber()) // Prevent pipe breaking caused by errors from gulp plugins
|
||||
.pipe(
|
||||
sass({
|
||||
outputStyle: 'expanded',
|
||||
|
||||
@@ -6,15 +6,15 @@
|
||||
<title>Webseite mit HTML & CSS (SCSS)</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="./favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="JS Course" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
<link rel="manifest" href="./favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<script src="/assets/js/build.js" defer></script>
|
||||
<link rel="stylesheet" href="./assets/css/main.css" />
|
||||
<script src="./assets/js/build.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -31,18 +31,18 @@
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about.html">About</a></li>
|
||||
<li><a href="./">Home</a></li>
|
||||
<li><a href="./about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="./projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="#">Project 2</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/contact.html">Contact</a></li>
|
||||
<li><a href="./contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
});
|
||||
|
||||
// MouseEvent - mouseleave - Ereignis wird ausgelöst, wenn der Benutzer ein Element verlässt. (einmalig)
|
||||
$('img').addEventListener('mouseenter', (e) => {
|
||||
$('img').addEventListener('mouseleave', (e) => {
|
||||
console.log('MouseEvent: ', e);
|
||||
console.log('MOUSE_LEAVE');
|
||||
});
|
||||
|
||||
@@ -144,6 +144,14 @@
|
||||
console.log('FocusEvent: ', e);
|
||||
console.log('BLUR');
|
||||
});
|
||||
|
||||
const onResize = (e) => {
|
||||
// console.log(e);
|
||||
console.log('width: ', window.outerWidth, 'height: ', window.outerHeight);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', onResize);
|
||||
window.removeEventListener('resize', onResize);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
// === FUNCTIONS ========
|
||||
const highlightListItemsBy = (searchValue = '') => {
|
||||
DOM.listItems.forEach((el) => {
|
||||
el.classList.remove('highlighted');
|
||||
removeClass(el, 'highlighted');
|
||||
const text = el.textContent.trim().toLowerCase();
|
||||
if (searchValue != '' && text.includes(searchValue.trim().toLowerCase())) {
|
||||
// el.classList.add('highlighted');
|
||||
@@ -48,6 +48,14 @@
|
||||
}
|
||||
return el;
|
||||
};
|
||||
const removeClass = (el, className) => {
|
||||
if (Array.isArray(className)) {
|
||||
el.classList.remove(...className);
|
||||
} else {
|
||||
el.classList.remove(className);
|
||||
}
|
||||
return el;
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user