@ribajs/bs4 - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

package.json

 {
   "name": "@ribajs/bs4",
   "description": "Bootstrap 4 module for Riba.js",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Pascal Garber <[e-mail]>",
@@ -58,3 +58,4 @@ "contributors": [],
   "dependencies": {
-    "@ribajs/core": "^1.4.0",
+    "@ribajs/core": "^1.5.0",
+    "@ribajs/jquery": "^1.5.0",
     "@types/jquery": "^3.3.31",
@@ -68,2 +69,2 @@ "bootstrap": "^4.3.1",
   }
-}
+}

README.md

@@ -14,3 +14,3 @@ # Bootstrap 4 Module
 ```ts
-import { Riba, JQuery } from '@ribajs/core';
+import { Riba, Utils } from '@ribajs/core';
 import bs4Module from '@ribajs/bs4';
@@ -20,5 +20,5 @@ const riba = new Riba();
 riba.module.regist(bs4Module);
-JQuery(($: JQueryStatic) => {
+Utils.domIsReady(() => {
   riba.bind(document.body, model);
 });
 ```

src/binders/collapse-on-url.binder.ts

@@ -1,2 +0,3 @@
-import { IBinder, EventDispatcher, JQuery as $ } from '@ribajs/core';
+import { IBinder, EventDispatcher } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 import { CollapseService } from '../services/collapse.service';
@@ -3,0 +4,0 @@ import { Utils } from '../services/utils.service';

src/binders/collapse.binder.ts

@@ -1,2 +0,3 @@
-import { IBinder, JQuery as $ } from '@ribajs/core';
+import { IBinder } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 import { CollapseService } from '../services/collapse.service';
@@ -3,0 +4,0 @@

src/binders/dropdown.binder.ts

@@ -1,2 +0,3 @@
-import { IBinder, JQuery as $ } from '@ribajs/core';
+import { IBinder } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 import { DropdownService } from '../services/dropdown.service';
@@ -14,9 +15,9 @@
     if ($el.hasClass('dropdown-toggle')) {
-        $toggler = $el as JQuery<HTMLButtonElement>;
+      $toggler = $el as JQuery<HTMLButtonElement>;
     } else {
-        $toggler = $el.find('.dropdown-toggle') as JQuery<HTMLButtonElement>;
+      $toggler = $el.find('.dropdown-toggle') as JQuery<HTMLButtonElement>;
     }
 
     if (!$toggler) {
-        $toggler = $el as JQuery<HTMLButtonElement>;
+      $toggler = $el as JQuery<HTMLButtonElement>;
     }
@@ -23,0 +24,0 @@

src/binders/expan-on-url.binder.ts

@@ -1,2 +0,3 @@
-import { IBinder, EventDispatcher, JQuery as $ } from '@ribajs/core';
+import { IBinder, EventDispatcher } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 import { CollapseService } from '../services/collapse.service';
@@ -3,0 +4,0 @@ import { Utils } from '../services/utils.service';

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

@@ -1,35 +0,3 @@
-import { IBinder } from '@ribajs/core';
+import { IBinder, Utils } from '@ribajs/core';
 
-/**
- * Scrolls to an element by event and selector
- *
- * Attributes:
- *  * scroll-element="query-selector"
- * @see https://stackoverflow.com/a/31987330
- * @param element
- * @param to
- * @param duration
- */
-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,
-    });
-  }
-};
-
 export const scrollToOnEventBinder: IBinder<string> = {
@@ -42,3 +10,3 @@ name: 'scroll-to-on-*',
       const scrollElement = el.dataset.scrollElement ? document.querySelector(el.dataset.scrollElement) : window;
-      scrollTo(this.customData.target, offset, scrollElement);
+      Utils.scrollTo(this.customData.target, offset, scrollElement);
       event.preventDefault();
@@ -45,0 +13,0 @@ };

src/binders/tooltip.binder.ts

@@ -8,4 +8,4 @@ import Popper from 'popper.js'; // /dist/umd/popper
  */
-import Debug from 'debug';
-import { IBinder, JQuery as $ } from '@ribajs/core';
+import { IBinder, Debug } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 
@@ -12,0 +12,0 @@ const template = '<div class="tooltip" role="tooltip">' +

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

@@ -13,17 +13,57 @@ import {
 interface IScope {
+  /**
+   * Selector string to get the container element from DOM
+   */
   containerSelector?: string;
+  /**
+   * The current state of the sidebar, can be `'hidden'`, `'side-left'`, `'side-right'`, `'overlay-left'` or `'overlay-right'`
+   */
   state: State;
+  /**
+   * The 'id' is required to react to events of the `bs4-toggle-button`, the `target-id` attribute of the `bs4-toggle-button` must be identical to this `id`
+   */
   id?: string;
+  /**
+   * The width of the sidebar
+   */
   width: number;
 
   // Options
+  /**
+   * The sidebar can be positioned `right` or `left`
+   */
   position: 'left' | 'right';
+  /**
+   * Auto show the sidebar if the viewport width is wider than this value
+   */
   autoShowOnWiderThan: number;
+  /**
+   * Auto hide the sidebar if the viewport width is slimmer than this value
+   */
   autoHideOnSlimmerThan: number;
+  /**
+   * You can force to hide the sidebar on corresponding URL pathames e.g. you can hide the sidebar on home with `['/']`.
+   */
   forceHideOnLocationPathnames: Array<string>;
+  /**
+   * Like `force-hide-on-location-pathnames`, but to force to open the sidebar
+   */
+  forceShowOnLocationPathnames: Array<string>;
+  /**
+   * If the viewport width is wider than this value the sidebar adds a margin to the container (detected with the `container-selector`) to reduce its content, if the viewport width is slimmer than this value the sidebar opens over the content
+   */
   overlayOnSlimmerThan: number;
 
   // Template methods
+  /**
+   * Hides / closes the sidebar
+   */
   hide: Bs4SidebarComponent['hide'];
+  /**
+   * Shows / opens the sidebar
+   */
   show: Bs4SidebarComponent['show'];
+  /**
+   * Toggles (closes or opens) the sidebar
+   */
   toggle: Bs4SidebarComponent['toggle'];
@@ -41,3 +81,3 @@ }
   static get observedAttributes() {
-    return ['id', 'container-selector', 'position', 'width', 'auto-show-in-wider-than', 'auto-hide-on-slimmer-than', 'force-hide-on-location-pathnames', 'overlay-on-slimmer-than'];
+    return ['id', 'container-selector', 'position', 'width', 'auto-show-in-wider-than', 'auto-hide-on-slimmer-than', 'force-hide-on-location-pathnames', 'force-show-on-location-pathnames', 'overlay-on-slimmer-than'];
   }
@@ -64,2 +104,3 @@
     forceHideOnLocationPathnames: [],
+    forceShowOnLocationPathnames: [],
     overlayOnSlimmerThan: 1200,
@@ -173,2 +214,5 @@
     }
+    if (this.scope.forceShowOnLocationPathnames.includes(window.location.pathname)) {
+      return this.show();
+    }
     const vw = Utils.getViewportDimensions().w;
@@ -175,0 +219,0 @@ if (vw < this.scope.autoHideOnSlimmerThan) {

src/components/dropdown/dropdown.component.ts

@@ -1,2 +0,3 @@
-import { Component, Debug, JQuery as $, IBinder } from '@ribajs/core';
+import { Component, Debug, IBinder } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 import { DropdownService } from '../../services/dropdown.service';
@@ -3,0 +4,0 @@

src/components/navbar/navbar.component.ts

@@ -1,3 +0,4 @@
-import { Component, Debug, JQuery as $, EventDispatcher, IBinder } from '@ribajs/core';
+import { Component, Debug, EventDispatcher, IBinder } from '@ribajs/core';
 import { CollapseService } from '../../services/collapse.service';
+import { JQuery as $ } from '@ribajs/jquery';
 
@@ -4,0 +5,0 @@ export class NavbarComponent extends Component {

src/services/dropdown.service.ts

 import Popper from 'popper.js'; // /dist/umd/popper
+import { Debug } from '@ribajs/core';
+import { JQuery as $ } from '@ribajs/jquery';
 
-import {
-  JQuery as $,
-  Debug,
-} from '@ribajs/core';
-
 import { Utils } from './utils.service';
@@ -9,0 +6,0 @@ /**

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

219791

increased by0.44%

Lines of code

3749

increased by0.48%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@ribajs/jquery@^1.5.0

• + Added@ribajs/cache@1.9.0(transitive)

• + Added@ribajs/jquery@1.9.0(transitive)

• Updated@ribajs/core@^1.5.0