Negotiable Paleobotanist Missions

npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

lz-header-lib

2.1.7 • Public • Published

LIGAZAKON HEADER ANGULAR LIBRARY

Installing

### 1. Install it

  npm i lz-header-lib-<current-project-version>

### 2. Prepare your angular.json

  Exmaple:
  ```
  "lzDeveloperClient": {
  ...
    "architect": {
      "build": {
        "builder": ... ,
          "options": {
          "outputPath": ... ,
          "index": ... ,
          "main": ... ,
          "polyfills": ... ,
          "tsConfig": ... ,
          "assets": [
            ... ,
            {
              "glob": "**/*",
              "input": "node_modules/lz-header-lib/assets",
              "output": "dist/ng2/src/assets/lz-header-assets/" // Папка "lz-header-assets" должна находиться по точно такому же пути в вашем проекте т.к. там хранятся шрифты и less который их подключает, можно шрифты можно подключить самому.
            }
            ...
          ],
          "styles": [
            ...
            "node_modules/lz-header-lib/assets/less/reset.less",
            "node_modules/lz-header-lib/assets/less/fonts.less",
            "node_modules/font-awesome/css/font-awesome.css" // Шапка использует font-awesome-4.7
          ],
          "scripts": [ // Шапка использует набор js библиотек
            "node_modules/jquery/dist/jquery.min.js",
            "lib/sockjs/sockjs.min.js",
            "lib/stomp-websocket/lib/stomp.min.js",
            "lib/platform/platform.js",
            "lib/fingerprint/fingerprint.js"
          ]
        }
      }
    }
    ...
  }
  ```

### 3. Prepare your app.module.ts

    Exmaple:
    ```
    import { NgModule } from '@angular/core';

    ...

    import { PLTHeaderModule, LzProductConfig, LzLanguageService } from 'lz-header-lib';

    export function createTranslateLoader(http: HttpClient) {
      // your path to translate sources *смотреть п.4 
      return new TranslateHttpLoader(http, './i18n/', '.json');
    }

    ...

      imports: [
        ...
        PLTHeaderModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
          }
        }),
        ...
      ]

    ...

    export class AppModule { 
      constructor(private lzProductConfig: LzProductConfig, private lzLanguageService: LzLanguageService, private translateService: TranslateService) {
        this.lzProductConfig.setProductSettings({
          'ips_location': '/ips', // Ссылка на ИПС
          'ipas_location': '/ipas', // Ссылка на ПЛАТФОРМУ
          'order_code': 'lz_developer_client', // Алиас продукта, который подключает шапку
          'product_name': 'lzDeveloperClient', // Имя продукта, который подключает шапку
          'product_version': '1.0', // Версия клиента, который подключает шапку
          'api_path': 'dev', // Сервер, через который будут ходить ресты шапки: dev/test/prod, параметр не обязательный, если ну указать, то dev, test и prod будут вычислятся из урла по хосту, если определить не получится, запросы будут ходить на prod
          'check_user_session': true, // Нужно ли проверять сессию пользователя каждую минуту,
                                      // в случае выбитой сессии всплывает модалка с авторизацией
        });
        this.translateService.use(this.lzLanguageService.identifyLanguage());
      }
    }
    ```

### 4. Add header component to your app.component.html

    Example:
    ```
    <lz-header-lib-component></lz-header-lib-component>
    <router-outlet></router-outlet>
    ```

### 5. Translations

    translations and TranslateModule

    lz-header-lib have buttons to change project language. It's using 'LzLanguageService' from lz-header-lib.
    current language is saving in local storage (it can be 'ru' or 'ua' values). By default 'ua' language.

    After language change it triggers page reloading.

    You can use 'identifyLanguage' method from 'LzLanguageService' to get current language and apply it to your project.

    You shoud merge yours i18n .jsons with lz-header-lib translations via grunt, gulp, webpack etc. and import it into yours app.module.ts

      Example:
      
      ```
      Grunt task for merging

      grunt.initConfig({
        "merge-json": {
            "ru": {
                src: [
                    "src/**/ru.json",
                    "lz-shared/**/ru.json",
                    "node_modules/lz-header-lib/assets/i18n/ru.json"
                ],
                dest: "dist/i18n/ru.json"
            },
            "ua": {
                src: [
                    "src/**/ua.json",
                    "lz-shared/**/ua.json",
                    "node_modules/lz-header-lib/assets/i18n/ua.json"
                ],
                dest: "dist/i18n/ua.json"
            }
        }
      })

      app.module.ts

      import { HttpClient } from '@angular/common/http';
      import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
      import { TranslateHttpLoader } from '@ngx-translate/http-loader';

      import { LzLanguageService } from 'lz-header-lib';

      export function createTranslateLoader(http: HttpClient) {
        return new TranslateHttpLoader(http, '/dist/i18n/', '.json'); 
      }

      @NgModule({
        imports: [
          TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
            }
          })
        ]
      })

      export class AppModule {
        constructor(private langService: LzLanguageService, private translate: TranslateService) { 
          translate.use(language.identifyLanguage());
        }
      }
      ```

### 5. Вызов формы заказа на тест

    import { 'LzPurchaseService' } from 'lz-header-lib';
    ....
    constructor(private purchaseService: LzPurchaseService) { }
    ...
    public showTestForm = () => {
      this.purchaseService.doPurchaseNew(alias?: string, isTrial?: boolean, disableSlider?: boolean, customData?: any);
    }

    // alias - не обязательный параметр. Алиас продукта, который берём на тест, если не передать - будет 'platforma'
    // isTrial - не обязательный древний параметр, никто не помнить за что от отвечает, если не передать - будет false
    // disableSlider - не обязательный параметр. Значение true отключает левый слайдер на форме, если не передать - будет false
    // customData - не обязательный параметр. Особенность реализации, ни на что не влияет

Keywords

none

install

npm i lz-header-lib

Downloadsweekly downloads

641

version

2.1.7

license

none

last publish

collaborators

  • avatar
Report a vulnerability