@ribajs/bs4 - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

package.json

 {
   "name": "@ribajs/bs4",
   "description": "Bootstrap 4 module for Riba.js",
-  "version": "1.2.2",
-  "author": "Pascal Garber <[e-mail]>",
+  "version": "1.3.0",
+  "author": "Pascal Garber <[e-mail]>",
   "contributors": [],
-  "url": "https://github.com/ribajs/riba/tree/master/packages/shopify",
+  "url": "https://github.com/ribajs/riba/tree/master/packages/bs4",
+  "homepage": "https://ribajs.com/",
   "main": "src/index.ts",
@@ -22,2 +23,15 @@ "module": "src/index.ts",
   },
+  "keywords": [
+    "Bootstrap",
+    "Twitter Bootstrap",
+    "Bootstrap 4",
+    "Twitter Bootstrap 4",
+    "Art+Code Studio",
+    "Riba",
+    "Rivets",
+    "tinybind",
+    "SPA",
+    "TypeScript",
+    "Browser"
+  ],
   "scripts": {
@@ -41,16 +55,15 @@ "type-check": "tslint -c tslint.json 'src/**/*.ts' && tsc --noEmit",
     "typescript": "^3.6.4",
-    "webpack": "^4.41.1",
+    "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9"
   },
   "dependencies": {
-    "@ribajs/core": "^1.2.2",
+    "@ribajs/core": "^1.3.0",
     "@types/jquery": "^3.3.31",
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
-    "popper.js": "^1.15.0"
+    "popper.js": "^1.16.0"
   },
   "bugs": {
     "url": "https://github.com/ribajs/riba/issues"
-  },
-  "homepage": "https://github.com/ribajs/riba#readme"
+  }
 }

README.md

@@ -20,4 +20,4 @@ # Bootstrap 4 Module
 JQuery(($: JQueryStatic) => {
-  riba.bind(document.body, this.model);
+  riba.bind(document.body, model);
 });
 ```

src/binders/scroll-to-on-event.binder.ts

@@ -5,2 +5,5 @@ import { IBinder } from '@ribajs/core';
  * Scrolls to an element by event and selector
+ *
+ * Attributes:
+ *  * scroll-element="query-selector"
  * @see https://stackoverflow.com/a/31987330
@@ -11,8 +14,22 @@ * @param element
  */
-const scrollTo = (to: HTMLElement, offset: number) => {
-  window.scroll({
-    behavior: 'smooth',
-    left: 0,
-    top: (to.getBoundingClientRect().top + window.pageYOffset) - offset,
-  });
+const scrollTo = (to: HTMLElement, offset: number, scrollElement: Element | (Window & typeof globalThis) | null) => {
+  if (!scrollElement) {
+    scrollElement = window;
+  }
+
+  if (typeof((scrollElement as Window).pageYOffset) === 'number') {
+    // if is is window to scroll
+    scrollElement.scroll({
+      behavior: 'smooth',
+      left: 0,
+      top: (to.getBoundingClientRect().top + (scrollElement as Window).pageYOffset) - offset,
+    });
+  } else {
+    // if is is another element to scroll
+    scrollElement.scroll({
+      behavior: 'smooth',
+      left: 0,
+      top: (to.offsetTop ) - offset,
+    });
+  }
 };
@@ -26,3 +43,4 @@
       const offset = Number(el.dataset.offset || 0);
-      scrollTo(this.customData.target, offset);
+      const scrollElement = el.dataset.scrollElement ? document.querySelector(el.dataset.scrollElement) : window;
+      scrollTo(this.customData.target, offset, scrollElement);
       event.preventDefault();
@@ -29,0 +47,0 @@ };

src/components/bs4-scrollspy/bs4-scrollspy.component.ts

 import {
-  Component,
   Debug,
 } from '@ribajs/core';
 
+import { Bs4ContentsComponent, Scope as Bs4ContentsComponentScope } from '../bs4-contents/bs4-contents.component';
+
 import template from './bs4-scrollspy.component.html';
 
-interface Anchor {
+export interface Anchor {
   element: HTMLHeadingElement;
@@ -15,16 +16,4 @@ href: string;
 
-interface IScope {
+export interface Scope extends Bs4ContentsComponentScope {
   /**
-   * If start is `2` and depth is `2` depth starts on `h2` and ends on `h3`.
-   */
-  headersStart: number;
-  /**
-   * If start is `1` and depth is `1` only `h1` headers are detected, if depth is `2` also `h2` is detected.
-   */
-  headersDepth: number;
-  /**
-   * Selector to search for headers insite of the element
-   */
-  headerParentSelector?: string;
-  /**
    * Pixels to offset from top when calculating position of scroll.
@@ -37,10 +26,5 @@ */
   offsetBottom: number;
-  /**
-   * Pixels to offset from top when calculating position to scroll there.
-   */
-  scrollOffset: number;
-  anchors: Anchor[];
 }
 
-export class Bs4ScrollspyComponent extends Component {
+export class Bs4ScrollspyComponent extends Bs4ContentsComponent {
 
@@ -59,3 +43,3 @@ public static tagName: string = 'bs4-scrollspy';
 
-  protected scope: IScope = {
+  protected scope: Scope = {
     headersDepth: 1,
@@ -76,67 +60,2 @@ headersStart: 2,
 
-  protected async init(observedAttributes: string[]) {
-    return super.init(observedAttributes)
-    .then((view) => {
-      return view;
-    });
-  }
-
-  protected getIdFromElementOrParent(element: HTMLElement, depth = 0): string | null {
-    if (element.id) {
-      return element.id;
-    }
-    if (depth <= 1) {
-      if (element.parentElement) {
-        return this.getIdFromElementOrParent(element.parentElement, ++depth);
-      }
-    }
-    return null;
-  }
-
-  protected async beforeBind() {
-    this.debug('beforeBind');
-    if (this.scope.headerParentSelector && this.scope.headersStart && this.scope.headersDepth) {
-      this.wrapperElement = document.querySelector(this.scope.headerParentSelector) || undefined;
-      if (this.wrapperElement) {
-        this.scope.anchors = [];
-        const level1Headers = this.wrapperElement.querySelectorAll('h' + this.scope.headersStart) as NodeListOf<HTMLHeadingElement>;
-        level1Headers.forEach((level1Header) => {
-          const idLevel1 = this.getIdFromElementOrParent(level1Header);
-          if (!idLevel1) {
-            this.debug('Ignore element because it has no id', level1Header);
-            return;
-          }
-          this.scope.anchors.push({
-            element: level1Header,
-            href: '#' + idLevel1,
-            title: level1Header.innerHTML,
-            childs: [],
-          });
-          if (!level1Header.parentNode) {
-            return;
-          }
-          const level2Headers = level1Header.parentNode.querySelectorAll('h' + (this.scope.headersStart + 1)) as NodeListOf<HTMLHeadingElement>;
-          level2Headers.forEach((level2Header) => {
-            this.debug('level 2 header', level2Header);
-            const idLevel2 = this.getIdFromElementOrParent(level2Header);
-            if (!idLevel2) {
-              this.debug('Ignore element because it has no id', level2Header);
-              return;
-            }
-            this.scope.anchors[this.scope.anchors.length - 1].childs.push({
-              element: level2Header,
-              href: '#' + idLevel2,
-              title: level2Header.innerHTML,
-              childs: [],
-            });
-          });
-        });
-      }
-    }
-  }
-
-  protected async afterBind() {
-    this.debug('afterBind', this.scope);
-  }
-
   protected requiredAttributes() {
@@ -146,11 +65,2 @@ return ['headersStart', 'headersDepth', 'headerParentSelector'];
 
-  protected attributeChangedCallback(attributeName: string, oldValue: any, newValue: any, namespace: string | null) {
-    super.attributeChangedCallback(attributeName, oldValue, newValue, namespace);
-  }
-
-  // deconstructor
-  protected disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-
   protected template() {
@@ -157,0 +67,0 @@ // Only set the component template if there no childs already

src/components/index.ts

@@ -5,1 +5,3 @@ export { Bs4ScrollspyComponent } from './bs4-scrollspy/bs4-scrollspy.component';
 export { NavbarComponent } from './navbar/navbar.component';
+export { Bs4ContentsComponent } from './bs4-contents/bs4-contents.component';
+export { Bs4IconComponent } from './bs4-icon/bs4-icon.component';

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

Network access

Supply chain risk

This module accesses the network.

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

206571

increased by230.9%

Number of package files

85

increased by123.68%

Lines of code

3371

increased by147.14%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• Updated@ribajs/core@^1.3.0

• Updatedpopper.js@^1.16.0