0.1.2 • Published 5 years ago
header-test-c v0.1.2
Thiqah Lit-Element Header Component POC
Thiqah Lit-Element Header Component POC is the beta version of lit-element web components development developed by Thiqah Frontend Development Team
Installation
in case using NPM package installer run one of the following commnad lines
npm i header-test-c -D
npm install header-test-c --save-dev
in case using YARN package installer
yarn add header-test-c
Usage in regular web project
static pages, .NET or any none JS framework inside your html file
<!--
add vendor custom element adapters and styles before the body tag be sure that file comes from
./node-module/header-test-c/vendor/custom-elements-es5-adapter.js
./node-module/header-test-c/src/header.min.css
-->
<script src="./node-module/header-test-c/vendor/custom-elements-es5-adapter.js"></script>
<link rel="stylesheet" href="./node-module/header-test-c/src/header.min.css" />
<main>
<header-component backgroundColor="#0d8a86" mainMenu='[]'
userDetails='{"shortName": "علي الغامدي", "hasDetails": false}' logo='' logoLink='#' slogan=''
sloganLink='#' projectName='الاسماء التجارية' languages='["EN", "AR"]' isSinglePage="false"
currentLang="ar" />
</header-component>
</main>
<!--
add web components loader and header component source be sure that file comes from
/node-module/header-test-c/vendor/webcomponents-loader.js
/node-module/header-test-c/header.min.js
-->
<script src="./node-module/header-test-c/vendor/webcomponents-loader.js"></script>
<script type="text/javascript" src="header.min.js"></script>
<!-- to listen to language changes please add the current listener -->
<script>
var Thiqah = function () {
this.header = document.querySelector('header-component');
this.nav = {
ar: [{
"name": "الشركات",
"link": "#"
},
{
"name": "الأسماء التجارية",
"link":"#"
},
{
"name": "طلباتي",
"link": "#"
},
{
"name": "المحفظة",
"link": "#",
"counter": 3000
}
],
en: [{
"name": "companies",
"link": "#"
},
{
"name": "names",
"link": "#"
},
{
"name": "requests",
"link": "#"
},
{
"name": "walet",
"link": "#",
"counter": 200
}
]
};
this.init();
this.eventListeners();
};
Thiqah.prototype.init = function () {
this.header.mainMenu = this.nav['ar'];
};
Thiqah.prototype.eventListeners = function () {
this.header.addEventListener('langValueChange', this.switchLanguage.bind(this));
};
Thiqah.prototype.switchLanguage = function (event) {
event.detail.lang === 'ar' ?
document.body.classList.add('rtl') :
document.body.classList.remove('rtl');
this.header.mainMenu = this.nav[event.detail.lang];
};
window.onload = new Thiqah();
</script>
Usage in Angular Project
// inside app.module.ts allow CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [],
imports: [],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
<!-- inside index.html add vendors and assets from node-modules -->
<!--
add vendor custom element adapters before the body tag be sure that file comes from
/node-module/header-test-c/vendor/custom-elements-es5-adapter.js
/node-module/header-test-c/vendor/webcomponents-loader.js
/node-module/header-test-c/header.min.js
-->
<script src="./node-module/header-test-c/vendor/custom-elements-es5-adapter.js"></script>
<script src="./node-module/header-test-c/vendor/webcomponents-loader.js"></script>
<script type="text/javascript" src="header.min.js"></script>
Or import assets inside angular.json
// inside your app.component.ts add your event listener
import { Component, ElementRef, NgZone } from '@angular/core';
import { MainMenu } from './models/MainMenu.model';
/**
* MainMenu.model should contain the current models
interface Menu {
name: string;
link: string;
counter?: number;
};
export interface MainMenu {
ar: Menu[];
en: Menu[];
}
*/
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public dir: string = 'ar';
public mainMenu: MainMenu = {
ar: [{ "name": "الشركات", "link": "#" },
{ "name": "الأسماء التجارية", "link": "my-names.html" },
{ "name": "طلباتي", "link": "#" },
{ "name": "المحفظة", "link": "/Wallet/Purchase", "counter": 3000 }],
en: [{ "name": "compony", "link": "#" },
{ "name": "الأسماء التجارية", "link": "my-names.html" },
{ "name": "طلباتي", "link": "#" },
{ "name": "المحفظة", "link": "/Wallet/Purchase", "counter": 3000 }]
};
constructor(
private elementRef: ElementRef,
private _ngZone: NgZone
) { }
switchLanguage() {
const header = this.elementRef.nativeElement.querySelector('header-component');
header.addEventListener('langValueChange', (event) => {
this._ngZone.run(() => this.dir = event['detail'].lang);
});
}
ngAfterViewInit() {
this.switchLanguage();
}
}
<!-- inside app.component.html render menu and current language -->
<div [ngClass]="dir === 'ar' ? 'rtl' : 'ltr'">
<header-component backgroundColor="#0d8a86" [mainMenu]="mainMenu[dir]"
userDetails='{"shortName": "علي الغامدي", "hasDetails": false}' logo='' logoLink='#' slogan='' sloganLink='#'
projectName='الاسماء التجارية' languages='["EN", "AR"]' isSinglePage="false" currentLang="ar">
</header-component>
<router-outlet></router-outlet>
</div>
Contributing
License
THIQAH Frontend Team KSA