BCN-BARRA-JS

Npm library created with javascript to serve the corporate bar of the city council BCN

Publishing

Run npm publish

Compatible

Compatible with js frameworks (Angular, React, Vue...) and native javascript projects.

Implementation

1º Install package in project, run command npm i bcn-barra-js 2º Import the package in the file you want to use import { loadBar } from 'bcn-barra-js' 3º In the html create <div id="test-bcn-barra-js"></div> element with id identification, this is where the bar will be displayed 4º Call function loadBar to load the corporative bar

    loadBar(
        'test-bcn-barra-js',
        'ca',
        {
          ca: 'https://www.barcelona.cat/brand/banner/ca/com-shi-va2015.html',
          es: 'https://www.barcelona.cat/brand/banner/es/com-shi-va2015.html',
          en: 'https://www.barcelona.cat/brand/banner/en/com-shi-va2015.html',
        }, 
        [
            "https://www.barcelona.cat/assets/core/stylesheets/core.css",
            "https://www.barcelona.cat/assetsdi/icoajuntament-v2/style.css",
            "https://www.barcelona.cat/assetsdi/icoajuntament/bcn-icon.css"
        ]
    ).then(() => {
      console.log('Bar successfully loaded');
      // Execute some code if you need to
    })
    .catch((error) => {
      console.error('Error', error);
    });

Params loadBar

• @param idHtmlElement - String - ID of the HTML element where the bar is to be loaded.
• @param currentLang - String - Current language of the bar (e.g. “ca”, “es”, “en”).
• @param bannesrHtmlUrl - Object { ca: string; es: string; en: string; } - List of URLS of the HTML file containing the content of the bar.
• @param linksStyle - String[] - Array of CSS style URLs to be loaded.
• @param redirectRoot - Boolean (opcional) - Boolean value defaults to false. Activate if you always want to redirect to the root url ‘http://localhost:4200/ca’.
• @returns A promise that is resolved when the bar has been fully loaded.