ng-ebi-foundation

v0.1.0-alpha.1

Published

4 years ago

The ng-ebi-foundation is an Angular library that provides two directives to reinvoke Foundation on specific components (see examples below).

0High
0Medium
0Low

esanzgar

ebi angular foundation zurb

ng-ebi-foundation

The ng-ebi-foundation is an Angular library that provides two directives to reinvoke Foundation on specific components (see examples below).

To fully benefit from Foundation, jQuery has to be properly set up and the .foundation() function called on every new or updated component.

The major differences between the two directives are:

ebiReloadFoundation is a lighter option, because it reinvokes Foundation only when the element view is initialized. It doesn't reinvoke Foundation afterwards. Initial Foundation setup is achieved when the init value is passed to the directive (ebiReloadFoundation="init"). In this case, Foundation is invoked on the whole document and executes foundationExtendEBI (mostly necessary on the initial setup). Usually, there is only a single ebiReloadFoundation="init" in the application but many ebiReloadFoundation spread among components.
ebiAutoFoundation is experimental at the moment. It detects mutation in the DOM of the element and reinvokes Foundation. This could cause very frequent invocations to Foundation, depending on the application and how it is used. Use this directive with care.

Foundation and single-page applications, like Angular, are not an ideal combination. Foundation wasn't written with these frameworks in mind (plus the size increase of using jQuery). Continuous reinvocations of Foundation could slow down the application and produce a lot of DOM garbage (for example, each time a tooltip is generated a hidden DOM element is created, but never removed).

There maybe better ways to use Foundation and Angular using directly the plugins (see this example).

Installation

To install this library, run:

npm install --save @angular/cdk
npm install --save ng-ebi-foundation

or

yarn add @angular/cdk
yarn add ng-ebi-foundation

Consuming the library

Add CSS and JavaScript for the EBI framework in your src/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello Foundation</title>
  <base href="/">

  <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all"/>
  <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.min.css" type="text/css" media="all"/>
  <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all"/>

</head>
<body>
  <app-root></app-root>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/foundation-6/js/foundation.min.js"></script>
  <script src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/foundationExtendEBI.min.js"></script>
  <script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.min.js"></script>
</body>
</html>

In your Angular AppModule (app.module.ts):

import {
    BrowserModule
} from '@angular/platform-browser';
import {
    NgModule
} from '@angular/core';

import {
    FoundationModule
} from 'ng-ebi-foundation';

import {
    AppComponent
} from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FoundationModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Basic example of using the ebiReloadFoundation directive:

import {
    Component,
    OnInit
} from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <h2 data-tooltip title="This is a tooltip" ebiReloadFoundation="init">Hello Foundation</h2>
    <ng-container *ngIf="toggle; else other">
        <ul class="vertical menu accordion-menu" data-accordion-menu ebiReloadFoundation>
            <li>
                <a href="#">Item 1</a>
                <ul class="menu vertical nested">
                  <li><a href="#">Item 1A</a></li>
                  <li><a href="#">Item 1B</a></li>
                </ul>
            </li>
            <li><a href="#">Item 2</a></li>
        </ul>
    </ng-container>
    <ng-template #other>
        <ul class="dropdown menu" data-dropdown-menu ebiReloadFoundation>
            <li>
              <a href="#">Item 1</a>
              <ul class="menu">
                <li><a href="#">Item 1A</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </ng-template>
    `,
})
export class AppComponent implements OnInit {
    toggle = false;

    ngOnInit() {
        window.setInterval(() => this.toggle = !this.toggle, 2000)
    }
}

Example using the ebiAutoFoundation:

import {
    Component,
    OnInit
} from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <!--section ebiAutoFoundation [cdkObserveContentDisabled]="false" debounce="1000" (cdkObserveContent)="changeDOM($event)" -->
    <section ebiAutoFoundation>
        <h2 data-tooltip title="This is a tooltip" >Hello Foundation</h2>
        <ng-container *ngIf="toggle; else other">
            <ul class="vertical menu accordion-menu" data-accordion-menu>
                <li>
                    <a href="#">Item 1</a>
                    <ul class="menu vertical nested">
                      <li><a href="#">Item 1A</a></li>
                      <li><a href="#">Item 1B</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </ng-container>
        <ng-template #other>
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                  <a href="#">Item 1</a>
                  <ul class="menu">
                    <li><a href="#">Item 1A</a></li>
                  </ul>
                </li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
            </ul>
        </ng-template>
    </section>
    `,
})
export class AppComponent implements OnInit {
    toggle = false;

    ngOnInit() {
        window.setInterval(() => this.toggle = !this.toggle, 2000)
    }

    changeDOM(changes: MutationRecord[]) {
        window.console.log('Changes in the DOM detected:', changes);
    }
}

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ng-ebi-foundation

Installation

Consuming the library

Want to help?

License