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.
127 lines • 12.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostListener, NgZone, ChangeDetectorRef } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { ENTER } from '@angular/cdk/keycodes';
export 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'],] }]
};
if (false) {
/** @type {?} */
MenuPortalComponent.prototype.config;
/**
* @type {?}
* @private
*/
MenuPortalComponent.prototype.focusMonitor;
/**
* @type {?}
* @private
*/
MenuPortalComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
MenuPortalComponent.prototype.ngZone;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1wb3J0YWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vamN5bC1tZW51LXBvcnRhbC8iLCJzb3VyY2VzIjpbImxpYi9tZW51LXBvcnRhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQVUsS0FBSyxFQUFFLFlBQVksRUFDdEMsTUFBTSxFQUFFLGlCQUFpQixFQUU1QixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDakQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBVTlDLE1BQU0sT0FBTyxtQkFBbUI7Ozs7OztJQUc1QixZQUNZLFlBQTBCLEVBQzFCLEdBQXNCLEVBQ3RCLE1BQWM7UUFGZCxpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUMxQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUN0QixXQUFNLEdBQU4sTUFBTSxDQUFRO0lBQ3RCLENBQUM7Ozs7O0lBR0wsUUFBUSxDQUFDLEtBQUs7UUFDVixRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO1FBQ25DLFFBQVEsQ0FBQyxjQUFjLENBQUMsV0FBVyxDQUFDLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUM7SUFDOUQsQ0FBQzs7OztJQUNELFFBQVE7UUFDSixDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsS0FBSzs7O1FBQUMsR0FBRyxFQUFFO1lBQ25CLENBQUMsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDLE1BQU0sQ0FDakM7Z0JBQ0ksTUFBTSxFQUFFLENBQUM7YUFDWixDQUNKLENBQUM7UUFDTixDQUFDLEVBQUMsQ0FBQztJQUNQLENBQUM7Ozs7SUFFRCxRQUFROztZQUNBLEdBQVk7UUFDaEIsR0FBRyxHQUFHLEtBQUssQ0FBQzs7Y0FDTixPQUFPLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyx5Q0FBeUMsQ0FBQztRQUNsRixJQUFJLE9BQU8sRUFBRTtZQUNULElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLEVBQUU7Z0JBQ3pDLEdBQUcsR0FBRyxJQUFJLENBQUM7YUFDZDtTQUNKO1FBQ0QsT0FBTyxHQUFHLENBQUM7SUFDZixDQUFDOzs7Ozs7SUFFRCxXQUFXLENBQUMsS0FBSyxFQUFFLE9BQU87UUFDdEIsSUFBSSxLQUFLLEtBQUssS0FBSyxDQUFDLE9BQU8sRUFBRTs7a0JBQ25CLEdBQUcsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQztZQUM1QyxJQUFJLEdBQUcsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxFQUFFO2dCQUNsQyxRQUFRLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBQzVELFFBQVEsQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQzthQUNsRTtpQkFBTTtnQkFDSCxRQUFRLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7Z0JBQ2xFLFFBQVEsQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM1RDtTQUNKO0lBQ0wsQ0FBQzs7OztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU87Ozs7O1FBQUMsQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLEVBQUU7O2tCQUM3QixHQUFHLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1lBQ3RELElBQUksQ0FBQyxZQUFZLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzFDLENBQUMsRUFBQyxDQUFDO0lBQ1AsQ0FBQzs7O1lBN0RKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1Qiw0eUZBQTJDOzthQUk5Qzs7OztZQVZRLFlBQVk7WUFKVCxpQkFBaUI7WUFBekIsTUFBTTs7O3FCQWdCTCxLQUFLO3VCQVFMLFlBQVksU0FBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUM7Ozs7SUFSekMscUNBQTRCOzs7OztJQUd4QiwyQ0FBa0M7Ozs7O0lBQ2xDLGtDQUE4Qjs7Ozs7SUFDOUIscUNBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIEhvc3RMaXN0ZW5lcixcbiAgICBOZ1pvbmUsIENoYW5nZURldGVjdG9yUmVmLFxuICAgIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1lbnVJdGVtIH0gZnJvbSAnLi9tZW51LXBvcnRhbC1tb2RlbHMnO1xuaW1wb3J0IHsgRm9jdXNNb25pdG9yIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHsgRU5URVIgfSBmcm9tICdAYW5ndWxhci9jZGsva2V5Y29kZXMnO1xuZGVjbGFyZSB2YXIgJDogYW55O1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2pjeWwtbWVudS1wb3J0YWwnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9tZW51LXBvcnRhbC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbXG4gICAgICAgICcuL21lbnUtcG9ydGFsLmNvbXBvbmVudC5zY3NzJ1xuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgTWVudVBvcnRhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgICBASW5wdXQoKSBjb25maWc6IE1lbnVJdGVtW107XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSBmb2N1c01vbml0b3I6IEZvY3VzTW9uaXRvcixcbiAgICAgICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICAgICAgICBwcml2YXRlIG5nWm9uZTogTmdab25lXG4gICAgKSB7IH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ3dpbmRvdzpyZXNpemUnLCBbJyRldmVudCddKVxuICAgIG9uUmVzaXplKGV2ZW50KSB7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUud2lkdGggPSAnMTAwJSc7XG4gICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluLW1lbnUnKS5zdHlsZS53aWR0aCA9ICcxMDAlJztcbiAgICB9XG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgICQoZG9jdW1lbnQpLnJlYWR5KCgpID0+IHtcbiAgICAgICAgICAgICQoJyNtYWluLW1lbnUtc3RpY2t5LXdyYXBwZXInKS5zdGlja3koXG4gICAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgICAgICB6SW5kZXg6IDFcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICApO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBpc1N0aWNreSgpOiBib29sZWFuIHtcbiAgICAgICAgbGV0IHJlczogYm9vbGVhbjtcbiAgICAgICAgcmVzID0gZmFsc2U7XG4gICAgICAgIGNvbnN0IGVsZW1lbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbi1tZW51LXN0aWNreS13cmFwcGVyLXN0aWNreS13cmFwcGVyJyk7XG4gICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICBpZiAoZWxlbWVudC5jbGFzc0xpc3QuY29udGFpbnMoJ2lzLXN0aWNreScpKSB7XG4gICAgICAgICAgICAgICAgcmVzID0gdHJ1ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gcmVzO1xuICAgIH1cblxuICAgIHNob3dTdWJtZW51KGV2ZW50LCBlbGVtZW50KSB7XG4gICAgICAgIGlmIChFTlRFUiA9PT0gZXZlbnQua2V5Q29kZSkge1xuICAgICAgICAgICAgY29uc3QgZWxlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbWVudCk7XG4gICAgICAgICAgICBpZiAoZWxlLmNsYXNzTGlzdC5jb250YWlucygnYWN0aXZvJykpIHtcbiAgICAgICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChlbGVtZW50KS5jbGFzc0xpc3QucmVtb3ZlKCdhY3Rpdm8nKTtcbiAgICAgICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChlbGVtZW50KS5jbGFzc0xpc3QuYWRkKCdhY3Rpdm8tZm9jdXMnKTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbWVudCkuY2xhc3NMaXN0LnJlbW92ZSgnYWN0aXZvLWZvY3VzJyk7XG4gICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbWVudCkuY2xhc3NMaXN0LmFkZCgnYWN0aXZvJyk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy5jb25maWcuZm9yRWFjaCgoZWxlbWVudCwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGVsZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzdWJtZW51JyArIGluZGV4KTtcbiAgICAgICAgICAgIHRoaXMuZm9jdXNNb25pdG9yLnN0b3BNb25pdG9yaW5nKGVsZSk7XG4gICAgICAgIH0pO1xuICAgIH1cbn1cbiJdfQ==