Global-esb-common NPM

Getting Started

global-esb-common is a utility for angular 2 or above .provide pipe such as left pipe ....

Install

$ npm install --save global-esb-common

Usage

import { GlobalEsbCommonModule } from 'global-esb-common';
imports: [GlobalEsbCommonModule]

export class XxxComponent {
constructor(private esbLeftPadPipe:EsbLeftPadPipe ,private esbRightPadPipe:EsbRightPadPipe,private esbService:EsbService){ 
  /*
  取得瀏覽器版本
  { "name": "Chrome", "fullVersion": "70.0.3538.102" }
  */
  this.browser=this.esbService.getBrowser();
  const rightPadResult = this.esbRightPadPipe.transform('rightPad', 15, "X");
  //使用特定字元補足長度不足
  //testXXXXXXXXXXX
  console.log(rightPadResult);
  const leftPadResult = this.esbLeftPadPipe.transform('leftPad', 15, 'X');
   //使用特定字元補足長度不足
  //XXXXXXXXXXXtest
  console.log(leftPadResult);
}

esbZoom:放大圖檔
click 圖檔 放大
再 click 圖檔/或頁面其他地方 恢復原始圖檔
  <img src="/assets/pic1.jpg" esbZoom>


esb-multiple-select-shift-item:左右panel複選選單
<div>
      <esb-multiple-select-shift-item  name="itemsLeft" [itemsLeft]="itemsLeft" [selectedItemsRight]="selectedItemsRight" (selectChange)="selectedRightItemChange($event)" ></esb-multiple-select-shift-item>
</div>
程式說明

itemsLeft為左邊資料來源
格式需為陣例 陣例元素為 {lable:'xxx',value:xxx}
範例如下
[
{ label: ' -K  其他大洋洲地區', value: 1 },
{ label: ' -L 東帝汶 TIMOR-LESTE', value: 2 },
]
selectedItemsRight 為右邊預設資料來源 格式同上
selectChange事件為當把左邊選取的項目,按了按鈕把項目加到右邊選單時觸發
範例如下
 selectedRightItemChange($event: any) {    
    console.log($event);   
}

$event 值為右邊項目 範例如下
[
{ label: ' -L 東帝汶 TIMOR-LESTE', value: 2 }
]


EsbImageSliderComponent:圖片輪播

範例如下
html檔
<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6" style="height:300px">
    <esb-image-slider [dataSource]="imgDataSource" [config]="imgDataConfig"></esb-image-slider>
  </div>
  <div class="col-md-3"></div>
</div>


ts檔
  this.imgDataSource = {
      images: ['assets/slide-img1.jpg',
        'assets/slide-img2.jpg',
        'assets/slide-img3.jpg'],
      tooltips: [
        '',
        `<div class="tooltipdemo1">
        <div>xxx</div>
        <div>go to <a href="https://xxx" target="_blank">
        網站連結</a></div></div>`,
        ''
      ]
    };
    
    this.imgDataConfig = {
      animationType: EsbImageAnimationConfig.SLIDE_OVERLAP,
      autoplay: true,
      autoplayDelay: 2000
    };