angular-custom-tour - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

package.json

 {
   "name": "angular-custom-tour",
-  "description": "Custom angular tours",
+  "description": "Custom angular tour",
   "repository": {
@@ -8,3 +8,3 @@ "type": "git",
   },
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
@@ -11,0 +11,0 @@ "main": "bundles/angular-custom-tour.umd.min.js",

README.md

@@ -7,3 +7,3 @@ # Will be available later
 
-# demo
+# Demo
 [https://miraxes.github.io/angular-custom-tour](https://miraxes.github.io/angular-custom-tour)
@@ -14,2 +14,4 @@
 
+Follow instructions and everything should be fine. :)
+
 # Usage
@@ -24,19 +26,21 @@
   @NgModule({
-    declarations: [
-      ...
-      ],
+    ...
     imports: [
-    ...
-    HintModule // Put here
-    ...
-    ],
-    entryComponents: [
       ...
+      HintModule // Put here
+      ...
     ]
+    ...
   ]
   ```
-In your page component
+Initialize it in your page component
   ```typescript
   import { HintService } from 'angular-custom-tour'
 
+  @Component({
+    ...
+    providers: [... HintService ... ],
+    ...
+  })
+
   class AppComponent {
@@ -53,2 +57,6 @@
 
+  ## NOTE:
+
+  > In case you want to init slider after pageload, you should use ngAfterViewInit
+
   ```html
@@ -70,1 +78,31 @@ <!-- Bluring element insert on top of the page-->
   ```
+Also you need to inject styles from `styles/main.css`
+
+
+# Custom options Usage
+
+```typescript
+
+  startTour() {
+    let hOpt = new HintOptions();
+
+    hOpt.elementsDisabled = false; //change whatever you want
+
+    this.hintService.initialize(hOpt);
+  }
+
+}
+```
+
+Colons can be used to align columns.
+
+| option                     | default   | Usage  |
+| -------------------------- |:---------:| ------ |
+| elementsDisabled: boolean  | true      | Disabling highlightedElement (click) wont work|
+| defaultPosition: string    | 'bottom'  | Position of tour step to highlightedElement |
+| defaultOrder: number       | 99        | Order of showing steps |
+| defaultLayer: number       | 15        | Distance between highlightedElement and step in px |
+| applyRelative: boolean     | true      | Applying position:relative to highlightedElement (disable in case you want to highligh absolute positioned elements) |
+
+
+This module in active development mode, if you have any suggestions fell free to contact me.

src/hint.service.js

@@ -29,3 +29,3 @@ "use strict";
         if (options === void 0) { options = new options_1.HintOptions(); }
-        this.hintOptions = options;
+        this.hintOptions = Object.assign(new options_1.HintOptions(), options);
         var nodes = document.getElementsByTagName(variables_1.HintConfig.HINT_TAG);
@@ -32,0 +32,0 @@ this.steps = this.initSteps(nodes);

src/intro-tour/tour.component.js

@@ -25,8 +25,38 @@ "use strict";
         var highlightedElement = document.getElementById(this.selector);
-        highlightedElement.style.zIndex = variables_1.HintConfig.Z_INDEX;
-        if (this.hintService.hintOptions.elementsDisabled) {
-            this.disableClick(highlightedElement);
+        if (highlightedElement) {
+            highlightedElement.style.zIndex = variables_1.HintConfig.Z_INDEX;
+            if (this.hintService.hintOptions.elementsDisabled) {
+                this.disableClick(highlightedElement);
+            }
+            if (this.hintService.hintOptions.applyRelative) {
+                highlightedElement.classList.add('hint-relative');
+            }
+            switch (this.position) {
+                case 'top':
+                    this.transformClass = 'transformX_50 transformY_100';
+                    this.topPos = highlightedElement.offsetTop - this.hintService.hintOptions.defaultLayer;
+                    this.leftPos = highlightedElement.offsetLeft + highlightedElement.offsetWidth / 2;
+                    break;
+                case 'bottom':
+                    this.transformClass = 'transformX_50';
+                    this.topPos = highlightedElement.offsetTop + highlightedElement.offsetHeight + this.hintService.hintOptions.defaultLayer;
+                    this.leftPos = highlightedElement.offsetLeft + highlightedElement.offsetWidth / 2;
+                    break;
+                case 'left':
+                    this.topPos = highlightedElement.offsetTop + highlightedElement.offsetHeight / 2;
+                    this.leftPos = highlightedElement.offsetLeft - this.hintService.hintOptions.defaultLayer;
+                    this.transformClass = 'transformY_50 transformX_100';
+                    break;
+                case 'right':
+                    this.topPos = highlightedElement.offsetTop + highlightedElement.offsetHeight / 2;
+                    this.leftPos = highlightedElement.offsetLeft + highlightedElement.offsetWidth + this.hintService.hintOptions.defaultLayer;
+                    this.transformClass = 'transformY_50';
+                    break;
+                default:
+                    throw 'Invalid hint position ->' + this.position;
+            }
         }
-        if (this.hintService.hintOptions.applyRelative) {
-            highlightedElement.classList.add('hint-relative');
+        else {
+            this.topPos = 0;
+            this.leftPos = 0;
         }
@@ -36,33 +66,11 @@ this.showme = true;
         this.hasPrev = this.hintService.hasPrev();
-        switch (this.position) {
-            case 'top':
-                this.transformClass = 'transformX_50 transformY_100';
-                this.topPos = highlightedElement.offsetTop - this.hintService.hintOptions.defaultLayer;
-                this.leftPos = highlightedElement.offsetLeft + highlightedElement.offsetWidth / 2;
-                break;
-            case 'bottom':
-                this.transformClass = 'transformX_50';
-                this.topPos = highlightedElement.offsetTop + highlightedElement.offsetHeight + this.hintService.hintOptions.defaultLayer;
-                this.leftPos = highlightedElement.offsetLeft + highlightedElement.offsetWidth / 2;
-                break;
-            case 'left':
-                this.topPos = highlightedElement.offsetTop + highlightedElement.offsetHeight / 2;
-                this.leftPos = highlightedElement.offsetLeft - this.hintService.hintOptions.defaultLayer;
-                this.transformClass = 'transformY_50 transformX_100';
-                break;
-            case 'right':
-                this.topPos = highlightedElement.offsetTop + highlightedElement.offsetHeight / 2;
-                this.leftPos = highlightedElement.offsetLeft + highlightedElement.offsetWidth + this.hintService.hintOptions.defaultLayer;
-                this.transformClass = 'transformY_50';
-                break;
-            default:
-                throw 'Invalid hint position ->' + this.position;
-        }
     };
     TourComponent.prototype.hideStep = function () {
         var highlightedElement = document.getElementById(this.selector);
-        highlightedElement.style.zIndex = '0';
+        if (highlightedElement) {
+            highlightedElement.style.zIndex = '0';
+            this.enableClick(highlightedElement);
+            highlightedElement.classList.remove('hint-relative');
+        }
         this.showme = false;
-        this.enableClick(highlightedElement);
-        highlightedElement.classList.remove('hint-relative');
     };
@@ -69,0 +77,0 @@ TourComponent.prototype.exit = function () {

src/options.d.ts

 export declare class HintOptions {
-    elementsDisabled?: boolean;
-    defaultPosition?: string;
-    defaultOrder?: number;
-    defaultLayer?: number;
-    applyRelative?: boolean;
+    elementsDisabled: boolean;
+    defaultPosition: string;
+    defaultOrder: number;
+    defaultLayer: number;
+    applyRelative: boolean;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38508

increased by4.84%

Lines of code

705

increased by1.15%

Number of lines in readme file

104

increased by57.58%

No dependency changes