Newly Purchased Memories

    ng-ebi-foundation
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0-alpha.1 • Public • Published

    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.

    License

    Apache 2.0 © EMBL - European Bioinformatics Institute

    Install

    npm i ng-ebi-foundation

    DownloadsWeekly Downloads

    2

    Version

    0.1.0-alpha.1

    License

    Apache-2.0

    Unpacked Size

    125 kB

    Total Files

    26

    Last publish

    Collaborators

    • esanzgar