From c1181d05be924dfdc1b48f634ad086515503f509 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Sun, 7 Apr 2024 15:44:11 +0200
Subject: [PATCH] working
---
assets/js/theme/design-system/notes.js | 48 +++++++++++++++++++
assets/js/theme/index.js | 1 +
assets/sass/_theme/design-system/notes.sass | 51 +++++++++++++++++++++
assets/sass/_theme/hugo-osuny.sass | 1 +
4 files changed, 101 insertions(+)
create mode 100644 assets/js/theme/design-system/notes.js
create mode 100644 assets/sass/_theme/design-system/notes.sass
diff --git a/assets/js/theme/design-system/notes.js b/assets/js/theme/design-system/notes.js
new file mode 100644
index 00000000..4fdc3f4b
--- /dev/null
+++ b/assets/js/theme/design-system/notes.js
@@ -0,0 +1,48 @@
+class Note {
+ constructor (note) {
+ this.note = note;
+ this.active = false;
+ this.call = this.note.querySelector('.note__call');
+ this.call.addEventListener('click', this.toggle.bind(this));
+ }
+ toggle () {
+ if (this.active) {
+ this.deactivate();
+ } else {
+ this.activate();
+ }
+ }
+ activate () {
+ this.deactivateAllNotes();
+ this.active = true;
+ this.note.classList.add('note--active');
+ this.definePosition();
+ }
+ deactivate () {
+ this.active = false;
+ this.note.classList.remove('note--active');
+ }
+ deactivateAllNotes () {
+ window.notes.forEach(note => {
+ note.deactivate();
+ })
+ }
+ definePosition () {
+ let isOnTheLeftSide = this.note.offsetLeft < (window.innerWidth / 2)
+ if (isOnTheLeftSide) {
+ this.note.classList.add('note--left');
+ this.note.classList.remove('note--right');
+ } else {
+ this.note.classList.add('note--right');
+ this.note.classList.remove('note--left');
+ }
+ }
+}
+
+(function () {
+ window.notes = [];
+ const notes = document.querySelectorAll(".note");
+ notes.forEach(note => {
+ window.notes.push(new Note(note));
+ })
+})();
\ No newline at end of file
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 98f75c1c..ff242d71 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -4,6 +4,7 @@ import './design-system/dropdowns';
import './design-system/font';
import './design-system/mainMenu';
import './design-system/modal';
+import './design-system/notes';
import './design-system/search';
import './design-system/toc';
import './blocks/keyFigures';
diff --git a/assets/sass/_theme/design-system/notes.sass b/assets/sass/_theme/design-system/notes.sass
new file mode 100644
index 00000000..908c6083
--- /dev/null
+++ b/assets/sass/_theme/design-system/notes.sass
@@ -0,0 +1,51 @@
+.note
+ position: relative
+ margin-left: pxToRem($space-unit)
+ &__call
+ background: $color-background-alt
+ border-radius: 4px
+ cursor: pointer
+ display: inline-block
+ line-height: 100%
+ min-width: $minimum-accessible-size
+ padding-left: $spacing-2
+ padding-right: $spacing-2
+ padding-bottom: 0
+ text-align: center
+ @include meta
+ &__content
+ background: $color-text
+ color: $color-background
+ display: none
+ max-width: 100vw
+ padding: $spacing-3
+ position: absolute
+ width: 450px
+ z-index: 999
+ @include small
+ &--active
+ .note__call
+ background: $color-text
+ color: $color-background
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
+ .note__content
+ display: block
+ @include media-breakpoint-up(desktop)
+ &__content
+ border-radius: 4px
+ top: pxToRem(25)
+ &--left
+ .note__content
+ left: 0
+ border-top-left-radius: 0
+ &--right
+ .note__content
+ right: 0
+ border-top-right-radius: 0
+ @include media-breakpoint-down(desktop)
+ position: inherit
+ .note__content
+ left: 0
+ right: 0
+ margin-top: pxToRem(-$space-unit)
\ No newline at end of file
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index c99d5465..19cddbd5 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -31,6 +31,7 @@
@import design-system/image
@import design-system/logo
@import design-system/nav
+@import design-system/notes
@import design-system/pagination
@import design-system/search
@import design-system/table
--
GitLab