typescript-overlay-essentials 2.0.5 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +24 -22
  2. package/dist/TutorialOverlay.js +32 -15
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -28,30 +28,32 @@ Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden k
28
28
  - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.
29
29
 
30
30
  ## Examples:
31
- import { useState } from "react";
32
- import { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from 'typescript-overlay-essentials';
31
+ {
32
+ import { useState } from "react";
33
+ import { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from 'typescript-overlay-essentials';
33
34
 
34
35
 
35
- function App() {
36
-
37
- const [stateConfirmationBox, setStateConfirmationBox] = useState<ConfirmationBoxState>(defaultConfirmationState);
38
-
39
- function handleLicenseAgreement() {
36
+ function App() {
37
+
38
+ const [stateConfirmationBox, setStateConfirmationBox] = useState<ConfirmationBoxState>(defaultConfirmationState);
39
+
40
+ function handleLicenseAgreement() {
40
41
 
42
+ }
43
+
44
+ return <div id="root">
45
+ <ConfirmationBox state={stateConfirmationBox} setState={setStateConfirmationBox} />
46
+ <button onClick={() => {
47
+ setStateConfirmationBox({
48
+ headline: "Are you sure?",
49
+ message: "Do you want to accept the License agreement?",
50
+ proceedButtonText: "Agree",
51
+ cancelButtonText: "Decline",
52
+ handlerOk: handleLicenseAgreement
53
+ })
54
+ }}>
55
+ Confirm License
56
+ </button>
57
+ </div>;
41
58
  }
42
-
43
- return <div id="root">
44
- <ConfirmationBox state={stateConfirmationBox} setState={setStateConfirmationBox} />
45
- <button onClick={() => {
46
- setStateConfirmationBox({
47
- headline: "Are you sure?",
48
- message: "Do you want to accept the License agreement?",
49
- proceedButtonText: "Agree",
50
- cancelButtonText: "Decline",
51
- handlerOk: handleLicenseAgreement
52
- })
53
- }}>
54
- Confirm License
55
- </button>
56
- </div>;
57
59
  }
package/dist/TutorialOverlay.js CHANGED
@@ -56,6 +56,8 @@ export function TutorialOverlay({ state, setState }) {
56
56
  const [highlightElementRect, setHighlightElementRect] = useState(null);
57
57
  // Wird verwendet um zu tracken bei welchem Schritt des Tutorials der Nutzer ist
58
58
  const [tutorialStep, setTutorialStep] = useState(0);
59
+ // Wird verwendet um ggf. die TutorialBox wenn sie oben aus dem Bildschirm ragt nach unten zu verschieben
60
+ const tutorialBoxRef = useRef(null);
59
61
  const proceedButtonRef = useRef(null);
60
62
  // Sobald der State von außen aktualisiert wird triggert diese Funktion
61
63
  // Die setzt showTutorial auf true
@@ -88,6 +90,27 @@ export function TutorialOverlay({ state, setState }) {
88
90
  document.body.style.overflow = "";
89
91
  };
90
92
  }, [showTutorial]);
93
+ useEffect(() => {
94
+ var _a, _b, _c;
95
+ if (!tutorialPos || !tutorialBoxRef.current || tutorialPos.position !== Positions.TOP)
96
+ return;
97
+ const tutorialBoxRect = tutorialBoxRef.current.getBoundingClientRect();
98
+ if (tutorialBoxRect.top < 0) {
99
+ const attachElement = (typeof ((_a = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _a === void 0 ? void 0 : _a.attachToObject) === "string"
100
+ ? document.getElementById((_b = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _b === void 0 ? void 0 : _b.attachToObject)
101
+ : (_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _c === void 0 ? void 0 : _c.attachToObject);
102
+ if (attachElement instanceof HTMLElement) {
103
+ var rect = attachElement.getBoundingClientRect();
104
+ // 25 rem
105
+ const _1rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
106
+ setTutorialPos({
107
+ position: Positions.BOTTOM,
108
+ px_left: null,
109
+ px_top: rect.bottom + _1rem
110
+ });
111
+ }
112
+ }
113
+ }, [tutorialPos, tutorialStep]);
91
114
  const showTutorialAtElement = (e, dontHighlightElement) => {
92
115
  var rect = e.getBoundingClientRect();
93
116
  const viewportHeight = window.innerHeight;
@@ -105,13 +128,13 @@ export function TutorialOverlay({ state, setState }) {
105
128
  const tooltipWidth = 32 * _1rem;
106
129
  const position = rect.right + tooltipWidth <= window.innerWidth ? Positions.RIGHT
107
130
  : (rect.left - tooltipWidth >= 0 ? Positions.LEFT
108
- : Positions.BOTTOM);
131
+ : Positions.TOP); // Immer Top nehmen und nur wenn tatsächlich rausragt => Nach rendern auf Bottom ändern
109
132
  setTutorialPos({
110
133
  position,
111
134
  px_left: position === Positions.LEFT ? rect.left - tooltipWidth
112
135
  : (position === Positions.RIGHT ? rect.right + _1rem
113
136
  : null),
114
- px_top: position !== Positions.BOTTOM ? rect.top : (rect.bottom + _1rem)
137
+ px_top: position === Positions.TOP ? (rect.top - _1rem) : rect.top
115
138
  });
116
139
  if (!dontHighlightElement) {
117
140
  setHighlightElementRect({
@@ -139,13 +162,13 @@ export function TutorialOverlay({ state, setState }) {
139
162
  ...(tutorialPos
140
163
  ? {
141
164
  position: "fixed",
142
- left: (_e = tutorialPos.px_left) !== null && _e !== void 0 ? _e : ';',
165
+ left: (_e = tutorialPos.px_left) !== null && _e !== void 0 ? _e : '',
143
166
  top: tutorialPos.px_top,
144
- transform: 'none'
167
+ transform: tutorialPos.position === Positions.TOP ? "translateY(-100%)" : 'none'
145
168
  }
146
169
  : {}),
147
170
  ...((state === null || state === void 0 ? void 0 : state.style) != null ? state.style : {})
148
- }, role: "dialog", "aria-modal": "true", "aria-labelledby": ((_f = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _f === void 0 ? void 0 : _f.headline) != null ? "tutorial-headline" : undefined, "aria-label": ((_g = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _g === void 0 ? void 0 : _g.headline) != null ? undefined : "Tutorial", "aria-describedby": "tutorial-message", onKeyDown: (event) => {
171
+ }, ref: tutorialBoxRef, role: "dialog", "aria-modal": "true", "aria-labelledby": ((_f = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _f === void 0 ? void 0 : _f.headline) != null ? "tutorial-headline" : undefined, "aria-label": ((_g = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _g === void 0 ? void 0 : _g.headline) != null ? undefined : "Tutorial", "aria-describedby": "tutorial-message", onKeyDown: (event) => {
149
172
  var _a;
150
173
  if (event.key === "Escape") {
151
174
  const nextCommand = (_a = state.cancelCommand) !== null && _a !== void 0 ? _a : null;
@@ -157,7 +180,7 @@ export function TutorialOverlay({ state, setState }) {
157
180
  const nextCommand = (_b = (_a = state.steps[tutorialStep]) === null || _a === void 0 ? void 0 : _a.backCommand) !== null && _b !== void 0 ? _b : null;
158
181
  setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined }));
159
182
  setTimeout(() => {
160
- var _a, _b, _c;
183
+ var _a, _b, _c, _d;
161
184
  const attachTo = (_a = state === null || state === void 0 ? void 0 : state.steps[tutorialStep - 1]) === null || _a === void 0 ? void 0 : _a.attachToObject;
162
185
  const attachElement = typeof attachTo === "string"
163
186
  ? document.getElementById(attachTo)
@@ -170,10 +193,7 @@ export function TutorialOverlay({ state, setState }) {
170
193
  setHighlightElementRect(null);
171
194
  }
172
195
  setTutorialStep(prev => prev - 1);
173
- setTimeout(() => {
174
- var _a;
175
- (_a = document.getElementById("overlay-essentials-tutorial-box")) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
176
- }, 10);
196
+ (_d = document.getElementById("overlay-essentials-tutorial-box")) === null || _d === void 0 ? void 0 : _d.scrollIntoView();
177
197
  }, nextCommand != null ? ((_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep - 1].waitFor) !== null && _c !== void 0 ? _c : TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS) : 0);
178
198
  }
179
199
  else {
@@ -186,7 +206,7 @@ export function TutorialOverlay({ state, setState }) {
186
206
  const nextCommand = (_b = (_a = state.steps[tutorialStep + 1]) === null || _a === void 0 ? void 0 : _a.command) !== null && _b !== void 0 ? _b : null;
187
207
  setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined }));
188
208
  setTimeout(() => {
189
- var _a, _b, _c;
209
+ var _a, _b, _c, _d;
190
210
  const attachTo = (_a = state === null || state === void 0 ? void 0 : state.steps[tutorialStep + 1]) === null || _a === void 0 ? void 0 : _a.attachToObject;
191
211
  const attachElement = typeof attachTo === "string"
192
212
  ? document.getElementById(attachTo)
@@ -199,10 +219,7 @@ export function TutorialOverlay({ state, setState }) {
199
219
  setHighlightElementRect(null);
200
220
  }
201
221
  setTutorialStep(prev => prev + 1);
202
- setTimeout(() => {
203
- var _a;
204
- (_a = document.getElementById("overlay-essentials-tutorial-box")) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
205
- }, 10);
222
+ (_d = document.getElementById("overlay-essentials-tutorial-box")) === null || _d === void 0 ? void 0 : _d.scrollIntoView();
206
223
  }, nextCommand != null ? (_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep + 1].waitFor) !== null && _c !== void 0 ? _c : TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS : 0);
207
224
  }
208
225
  else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "typescript-overlay-essentials",
3
- "version": "2.0.5",
3
+ "version": "2.1.2",
4
4
  "description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
5
5
  "keywords": [
6
6
  "typescript",