fix below & add content

Author: Zefling

CHANGELOG.md

@@ -1,21 +1,34 @@
 # Changelog of ng-walkthrough
 
+## V0.10.1 (2024-06-24)
+
+### Correction
+
+-   fix `below` position for `verticalAlignContent`
+
+### New feature
+
+-   add `content` position for `alignContent` : to horizontally center on content
+
 ## V0.10.0 (2023-08-01)
 
-### Breaking changes
+### Breaking change
 
 -   upgrade to Angular 16.1
+
+### Correction
+
 -   fix typo/wording
 
 ## V0.9.8 (2022-02-25)
 
-### New features
+### New feature
 
 -   add `hideNext` and `hideNav` attributes
 
 ## V0.9.7 (2021-12-17)
 
-### Corrections
+### Correction
 
 -   add options for DOM detection changes
 
@@ -41,25 +54,25 @@
 
 ## V0.9.3 (2019-08-24)
 
-### Corrections
+### Correction
 
 -   fix `notScrollOnResize`
 
 ## V0.9.2 (2019-08-18)
 
-### New features
+### New feature
 
 -   add `notScrollOnResize` attribute
 
 ## V0.9.1 (2019-07-23)
 
-### Corrections
+### Correction
 
 -   fix the walkthrough pause on resize
 
 ## V0.9.0 (2021-06-02)
 
-### Breaking changes
+### Breaking change
 
 -   upgrade to Angular 11
 
@@ -81,29 +94,29 @@
 
 ## V0.8.0 (2019-03-28)
 
-### Breaking changes
+### Breaking change
 
 -   upgrade to Angular 7
 
-### Corrections
+### Correction
 
 -   Avoid resize event spamming
 
 ## V0.7.4 (2019-02-26)
 
-### New features
+### New feature
 
 -   Optional parameter `scrollOnTarget` default `true` : if the walkthrough detect that `focusElementSelector` is outside of the current view, scrolls automatically.
 
 ## V0.7.3 (2018-10-29)
 
-### Corrections
+### Correction
 
 -   Fix a problem the instance is called too early.
 
 ## V0.7.2 (2018-10-25)
 
-### New features
+### New feature
 
 -   Add subjects on `WalkthroughComponent` :
     -   `onOpen` : on open
@@ -116,7 +129,7 @@
 
 ## V0.7.1 (2018-09-17)
 
-### Corrections
+### Correction
 
 -   Fix crashes with “Toggle focusElementSelector” in demo
 
@@ -134,35 +147,35 @@
 
 ## V0.6.17 (2018-06-12)
 
-### Corrections
+### Correction
 
 -   Fix arrow display on Safari/iOS
 
 ## V0.6.16 (2018-06-05)
 
-### New features
+### New feature
 
 -   Fix hidden zones when using library with fixed elements by adding `rootElement` attribute
 
-### Corrections
+### Correction
 
 -   Fix resize event fired every time the address bar display is toggled (Android and iOS). Now the resize event is applied only when the width changes.
 
 ## V0.6.15 (2018-05-28)
 
-### Corrections
+### Correction
 
 -   Fix case when a step have no `focusElementSelector` (#19)
 
 ## V0.6.14 (2018-05-24)
 
-### Corrections
+### Correction
 
 -   Fix resize code not firing anymore (bug introduced in last release)
 
 ## V0.6.13 (2018-05-23)
 
-### Corrections
+### Correction
 
 -   Fix walkthrough visible while on pause when `window:resize` event is fired
 
@@ -183,7 +196,7 @@
 
 ## V0.6.10 (2018-04-27)
 
-### Corrections
+### Correction
 
 -   Fix a bug of positioning while scrolling
 
@@ -197,7 +210,7 @@
 
 ## V0.6.8 (2018-04-26)
 
-### Corrections
+### Correction
 
 -   Fix crash on static method with IE11
 

projects/angular-walkthrough/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-walkthrough",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Walkthrough, an Angular library",
   "author": "Célian Veyssière",
   "license": "MIT",

projects/angular-walkthrough/src/lib/walkthrough-container.component.ts

@@ -240,7 +240,7 @@ export class WalkthroughContainerComponent extends BasePortalOutlet {
 
     contentBlockPosition(
         paramCoordinate: WalkthroughElementCoordinate,
-        alignContent: 'left' | 'center' | 'right',
+        alignContent: 'left' | 'center' | 'right' | 'content',
         verticalAlignContent: 'above' | 'top' | 'center' | 'bottom' | 'below',
         contentSpacing: number,
         verticalContentSpacing: number,
@@ -273,7 +273,7 @@ export class WalkthroughContainerComponent extends BasePortalOutlet {
                 !notEnoughSpace
             ) {
                 // change align center to left or right if not enough space to align center
-                if (alignContent === 'center') {
+                if (alignContent === 'center' || alignContent === 'content') {
                     const maxSpace = Math.max(spaceRight, spaceLeft);
                     if (maxSpace < width + (window.innerWidth - width) / 2) {
                         alignContent = spaceRight > spaceLeft ? 'right' : 'left';
@@ -307,6 +307,8 @@ export class WalkthroughContainerComponent extends BasePortalOutlet {
             }
         } else if (alignContent === 'center') {
             element.style.left = window.innerWidth / 2 - width / 2 + 'px';
+        } else if (alignContent === 'content') {
+            element.style.left = coordinate.left + coordinate.width / 2 - width / 2 + 'px';
         } else if (alignContent === 'right') {
             element.style.right = '0';
             if (this.hasHighlightZone) {
@@ -354,7 +356,11 @@ export class WalkthroughContainerComponent extends BasePortalOutlet {
                         break;
                     case 'below':
                         element.style.top =
-                            space > verticalContentSpacing
+                            this._walkthroughService.getDocumentHeight() -
+                                coordinate.top +
+                                coordinate.height +
+                                verticalContentSpacing >
+                            height
                                 ? coordinate.top + coordinate.height + verticalContentSpacing + 'px'
                                 : this._walkthroughService.getDocumentHeight() - height + 'px';
                         this._arrowPosition = 'topBottom';

projects/angular-walkthrough/src/lib/walkthrough.component.ts

@@ -129,7 +129,7 @@ export class WalkthroughComponent implements AfterViewInit, OnDestroy {
     get alignContent() {
         return this._alignContent;
     }
-    set alignContent(value: 'left' | 'center' | 'right') {
+    set alignContent(value: 'left' | 'center' | 'content' | 'right') {
         if (this._alignContent !== value) {
             this._alignContent = value;
             this._updateElementPositions(this._getInstance());
@@ -301,7 +301,7 @@ export class WalkthroughComponent implements AfterViewInit, OnDestroy {
     private _arrowColor: string;
     private _marginZone: string;
     private _marginZonePx = new WalkthroughMargin();
-    private _alignContent: 'left' | 'center' | 'right' = 'left';
+    private _alignContent: 'left' | 'center' | 'content' | 'right' = 'left';
     private _verticalAlignContent: 'above' | 'top' | 'center' | 'bottom' | 'below' = 'top';
     private _contentSpacing = 0;
     private _verticalContentSpacing = 50;

src/app/app.component.html

@@ -23,18 +23,17 @@
                 [checked]="flowCloseAnywhere"
                 (change)="flowCloseAnywhere = flowCloseAnywhereValue.checked"
             />
-            CloseAnywhere {{flowCloseAnywhere}}
-        </label><br />
+            CloseAnywhere {{ flowCloseAnywhere }} </label
+        ><br />
         <label>
             <input
                 type="checkbox"
                 #flowHidePreviousValue
                 [checked]="flowHidePrevious"
                 (change)="flowHidePrevious = flowHidePreviousValue.checked"
             />
-            HidePrevious {{flowHidePrevious}}
+            HidePrevious {{ flowHidePrevious }}
         </label>
-
     </div>
 
     <div class="overflow">
@@ -284,6 +283,7 @@
             <div>
                 <button (click)="alignContent = 'left'">left</button>
                 <button (click)="alignContent = 'center'">center</button>
+                <button (click)="alignContent = 'content'">content</button>
                 <button (click)="alignContent = 'right'">right</button>
             </div>
             verticalAlignContent value :