jcyl-menu-portal
Version:
Esta librería está basada en la [guía de estilos de la Junta de Castilla y León](https://www.jcyl.es/junta/guia/guia-estilos.html) para implementar los estilos mediante un componente Angular.
179 lines (171 loc) • 8.28 kB
JavaScript
import { FocusMonitor } from '@angular/cdk/a11y';
import { ENTER } from '@angular/cdk/keycodes';
import { Injectable, NgModule, CUSTOM_ELEMENTS_SCHEMA, Component, Input, HostListener, NgZone, ChangeDetectorRef, defineInjectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MenuPortalService {
constructor() { }
}
MenuPortalService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
MenuPortalService.ctorParameters = () => [];
/** @nocollapse */ MenuPortalService.ngInjectableDef = defineInjectable({ factory: function MenuPortalService_Factory() { return new MenuPortalService(); }, token: MenuPortalService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MenuPortalComponent {
/**
* @param {?} focusMonitor
* @param {?} cdr
* @param {?} ngZone
*/
constructor(focusMonitor, cdr, ngZone) {
this.focusMonitor = focusMonitor;
this.cdr = cdr;
this.ngZone = ngZone;
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
document.body.style.width = '100%';
document.getElementById('main-menu').style.width = '100%';
}
/**
* @return {?}
*/
ngOnInit() {
$(document).ready((/**
* @return {?}
*/
() => {
$('#main-menu-sticky-wrapper').sticky({
zIndex: 1
});
}));
}
/**
* @return {?}
*/
isSticky() {
/** @type {?} */
let res;
res = false;
/** @type {?} */
const element = document.getElementById('main-menu-sticky-wrapper-sticky-wrapper');
if (element) {
if (element.classList.contains('is-sticky')) {
res = true;
}
}
return res;
}
/**
* @param {?} event
* @param {?} element
* @return {?}
*/
showSubmenu(event, element) {
if (ENTER === event.keyCode) {
/** @type {?} */
const ele = document.getElementById(element);
if (ele.classList.contains('activo')) {
document.getElementById(element).classList.remove('activo');
document.getElementById(element).classList.add('activo-focus');
}
else {
document.getElementById(element).classList.remove('activo-focus');
document.getElementById(element).classList.add('activo');
}
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.config.forEach((/**
* @param {?} element
* @param {?} index
* @return {?}
*/
(element, index) => {
/** @type {?} */
const ele = document.getElementById('submenu' + index);
this.focusMonitor.stopMonitoring(ele);
}));
}
}
MenuPortalComponent.decorators = [
{ type: Component, args: [{
selector: 'jcyl-menu-portal',
template: "<div id=\"main-menu-sticky-wrapper\" class=\"sticky-wrapper\">\r\n <div id=\"main-menu\" [class]=\"'items-' + config.length\">\r\n\r\n <div class=\"contenedor\">\r\n <h2 class=\"elemento-invisible\">Men\u00FA principal</h2>\r\n <button class=\"hamburger hamburger--spin\" type=\"button\" ara-label=\"Men\u00FA\" aria-controls=\"menu\"\r\n aria-haspopup=\"true\" aria-expanded=\"false\">\r\n <span class=\"hamburger-box\">\r\n <span class=\"hamburger-inner\"></span>\r\n </span>\r\n <span class=\"hamburger-text\">Men\u00FA</span>\r\n </button>\r\n <div id=\"sidr\">\r\n <ul id=\"menu\" role=\"menu\">\r\n <ng-container *ngFor=\"let item of config; let i = index\">\r\n <li tabindex=\"-1\" role=\"menuitem\" *ngIf=\"!item.hijos || item.hijos.length === 0\" [class]=\"'items-' + config.length\"\r\n class=\"handy\" [routerLink]=\"[item.enlace]\">\r\n <a tabindex=\"0\" [routerLink]=\"[item.enlace]\">{{item.etiqueta}}</a>\r\n </li>\r\n <li *ngIf=\"item.hijos && item.hijos.length >= 0\" [class]=\"'items-' + config.length\"\r\n class=\"handy\" tabindex=\"-1\" [id]=\"'submenu' + i\">\r\n <a>{{item.etiqueta}}</a>\r\n\r\n <a class=\"menu-focus con-submenu\" tabindex=\"0\" \r\n (keydown)=\"showSubmenu($event, 'submenu' + i)\">\r\n <img src=\"assets/img/sidr-mernu-cerrado.png\" alt=\"menu cerrado\" />\r\n </a>\r\n <div class=\"submenu\">\r\n <ul role=\"menu\">\r\n <ng-container *ngFor=\"let hijo of item.hijos\">\r\n <li tabindex=\"-1\" *ngIf=\"!hijo.esExterno\" [routerLink]=\"[hijo.enlace]\" class=\"handy\">\r\n <a role=\"menuitem\" [routerLink]=\"[hijo.enlace]\">{{hijo.etiqueta}}</a>\r\n </li>\r\n <li tabindex=\"-1\" *ngIf=\"hijo.esExterno\" class=\"handy\">\r\n <a role=\"menuitem\" [href]=\"hijo.enlace\" target=\"_blank\">{{hijo.etiqueta}}</a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>",
styles: [".handy{cursor:pointer}a.menu-focus:focus{opacity:1}#main-menu ul li a.con-submenu{width:100%}"]
}] }
];
/** @nocollapse */
MenuPortalComponent.ctorParameters = () => [
{ type: FocusMonitor },
{ type: ChangeDetectorRef },
{ type: NgZone }
];
MenuPortalComponent.propDecorators = {
config: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MenuPortalModule {
}
MenuPortalModule.decorators = [
{ type: NgModule, args: [{
declarations: [MenuPortalComponent],
imports: [
BrowserModule,
RouterModule
],
exports: [MenuPortalComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MenuItem {
/**
* @param {?} props
*/
constructor(props) {
Object.assign(this, props);
}
}
class SubMenuItem {
/**
* @param {?} props
*/
constructor(props) {
Object.assign(this, props);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { MenuPortalService, MenuPortalComponent, MenuPortalModule, MenuItem, SubMenuItem };
//# sourceMappingURL=jcyl-menu-portal.js.map