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.
143 lines • 12.9 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';
var MenuPortalComponent = /** @class */ (function () {
function MenuPortalComponent(focusMonitor, cdr, ngZone) {
this.focusMonitor = focusMonitor;
this.cdr = cdr;
this.ngZone = ngZone;
}
/**
* @param {?} event
* @return {?}
*/
MenuPortalComponent.prototype.onResize = /**
* @param {?} event
* @return {?}
*/
function (event) {
document.body.style.width = '100%';
document.getElementById('main-menu').style.width = '100%';
};
/**
* @return {?}
*/
MenuPortalComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
$(document).ready((/**
* @return {?}
*/
function () {
$('#main-menu-sticky-wrapper').sticky({
zIndex: 1
});
}));
};
/**
* @return {?}
*/
MenuPortalComponent.prototype.isSticky = /**
* @return {?}
*/
function () {
/** @type {?} */
var res;
res = false;
/** @type {?} */
var 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 {?}
*/
MenuPortalComponent.prototype.showSubmenu = /**
* @param {?} event
* @param {?} element
* @return {?}
*/
function (event, element) {
if (ENTER === event.keyCode) {
/** @type {?} */
var 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 {?}
*/
MenuPortalComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
this.config.forEach((/**
* @param {?} element
* @param {?} index
* @return {?}
*/
function (element, index) {
/** @type {?} */
var 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 = function () { return [
{ type: FocusMonitor },
{ type: ChangeDetectorRef },
{ type: NgZone }
]; };
MenuPortalComponent.propDecorators = {
config: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
return MenuPortalComponent;
}());
export { MenuPortalComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1wb3J0YWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vamN5bC1tZW51LXBvcnRhbC8iLCJzb3VyY2VzIjpbImxpYi9tZW51LXBvcnRhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQVUsS0FBSyxFQUFFLFlBQVksRUFDdEMsTUFBTSxFQUFFLGlCQUFpQixFQUU1QixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDakQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBRzlDO0lBVUksNkJBQ1ksWUFBMEIsRUFDMUIsR0FBc0IsRUFDdEIsTUFBYztRQUZkLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBQzFCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQVE7SUFDdEIsQ0FBQzs7Ozs7SUFHTCxzQ0FBUTs7OztJQURSLFVBQ1MsS0FBSztRQUNWLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUM7UUFDbkMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQztJQUM5RCxDQUFDOzs7O0lBQ0Qsc0NBQVE7OztJQUFSO1FBQ0ksQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLEtBQUs7OztRQUFDO1lBQ2QsQ0FBQyxDQUFDLDJCQUEyQixDQUFDLENBQUMsTUFBTSxDQUNqQztnQkFDSSxNQUFNLEVBQUUsQ0FBQzthQUNaLENBQ0osQ0FBQztRQUNOLENBQUMsRUFBQyxDQUFDO0lBQ1AsQ0FBQzs7OztJQUVELHNDQUFROzs7SUFBUjs7WUFDUSxHQUFZO1FBQ2hCLEdBQUcsR0FBRyxLQUFLLENBQUM7O1lBQ04sT0FBTyxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMseUNBQXlDLENBQUM7UUFDbEYsSUFBSSxPQUFPLEVBQUU7WUFDVCxJQUFJLE9BQU8sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxFQUFFO2dCQUN6QyxHQUFHLEdBQUcsSUFBSSxDQUFDO2FBQ2Q7U0FDSjtRQUNELE9BQU8sR0FBRyxDQUFDO0lBQ2YsQ0FBQzs7Ozs7O0lBRUQseUNBQVc7Ozs7O0lBQVgsVUFBWSxLQUFLLEVBQUUsT0FBTztRQUN0QixJQUFJLEtBQUssS0FBSyxLQUFLLENBQUMsT0FBTyxFQUFFOztnQkFDbkIsR0FBRyxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDO1lBQzVDLElBQUksR0FBRyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQ2xDLFFBQVEsQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDNUQsUUFBUSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBQyxDQUFDO2FBQ2xFO2lCQUFNO2dCQUNILFFBQVEsQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztnQkFDbEUsUUFBUSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQzVEO1NBQ0o7SUFDTCxDQUFDOzs7O0lBRUQseUNBQVc7OztJQUFYO1FBQUEsaUJBS0M7UUFKRyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU87Ozs7O1FBQUMsVUFBQyxPQUFPLEVBQUUsS0FBSzs7Z0JBQ3pCLEdBQUcsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7WUFDdEQsS0FBSSxDQUFDLFlBQVksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDMUMsQ0FBQyxFQUFDLENBQUM7SUFDUCxDQUFDOztnQkE3REosU0FBUyxTQUFDO29CQUNQLFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLDR5RkFBMkM7O2lCQUk5Qzs7OztnQkFWUSxZQUFZO2dCQUpULGlCQUFpQjtnQkFBekIsTUFBTTs7O3lCQWdCTCxLQUFLOzJCQVFMLFlBQVksU0FBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUM7O0lBOEM3QywwQkFBQztDQUFBLEFBOURELElBOERDO1NBdkRZLG1CQUFtQjs7O0lBQzVCLHFDQUE0Qjs7Ozs7SUFHeEIsMkNBQWtDOzs7OztJQUNsQyxrQ0FBOEI7Ozs7O0lBQzlCLHFDQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBIb3N0TGlzdGVuZXIsXG4gICAgTmdab25lLCBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNZW51SXRlbSB9IGZyb20gJy4vbWVudS1wb3J0YWwtbW9kZWxzJztcbmltcG9ydCB7IEZvY3VzTW9uaXRvciB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcbmltcG9ydCB7IEVOVEVSIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2tleWNvZGVzJztcbmRlY2xhcmUgdmFyICQ6IGFueTtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdqY3lsLW1lbnUtcG9ydGFsJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbWVudS1wb3J0YWwuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogW1xuICAgICAgICAnLi9tZW51LXBvcnRhbC5jb21wb25lbnQuc2NzcydcbiAgICBdXG59KVxuZXhwb3J0IGNsYXNzIE1lbnVQb3J0YWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gICAgQElucHV0KCkgY29uZmlnOiBNZW51SXRlbVtdO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZm9jdXNNb25pdG9yOiBGb2N1c01vbml0b3IsXG4gICAgICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICAgICAgcHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZVxuICAgICkgeyB9XG5cbiAgICBASG9zdExpc3RlbmVyKCd3aW5kb3c6cmVzaXplJywgWyckZXZlbnQnXSlcbiAgICBvblJlc2l6ZShldmVudCkge1xuICAgICAgICBkb2N1bWVudC5ib2R5LnN0eWxlLndpZHRoID0gJzEwMCUnO1xuICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbi1tZW51Jykuc3R5bGUud2lkdGggPSAnMTAwJSc7XG4gICAgfVxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICAkKGRvY3VtZW50KS5yZWFkeSgoKSA9PiB7XG4gICAgICAgICAgICAkKCcjbWFpbi1tZW51LXN0aWNreS13cmFwcGVyJykuc3RpY2t5KFxuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgekluZGV4OiAxXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgaXNTdGlja3koKTogYm9vbGVhbiB7XG4gICAgICAgIGxldCByZXM6IGJvb2xlYW47XG4gICAgICAgIHJlcyA9IGZhbHNlO1xuICAgICAgICBjb25zdCBlbGVtZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4tbWVudS1zdGlja3ktd3JhcHBlci1zdGlja3ktd3JhcHBlcicpO1xuICAgICAgICBpZiAoZWxlbWVudCkge1xuICAgICAgICAgICAgaWYgKGVsZW1lbnQuY2xhc3NMaXN0LmNvbnRhaW5zKCdpcy1zdGlja3knKSkge1xuICAgICAgICAgICAgICAgIHJlcyA9IHRydWU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIHJlcztcbiAgICB9XG5cbiAgICBzaG93U3VibWVudShldmVudCwgZWxlbWVudCkge1xuICAgICAgICBpZiAoRU5URVIgPT09IGV2ZW50LmtleUNvZGUpIHtcbiAgICAgICAgICAgIGNvbnN0IGVsZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGVsZW1lbnQpO1xuICAgICAgICAgICAgaWYgKGVsZS5jbGFzc0xpc3QuY29udGFpbnMoJ2FjdGl2bycpKSB7XG4gICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbWVudCkuY2xhc3NMaXN0LnJlbW92ZSgnYWN0aXZvJyk7XG4gICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbWVudCkuY2xhc3NMaXN0LmFkZCgnYWN0aXZvLWZvY3VzJyk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGVsZW1lbnQpLmNsYXNzTGlzdC5yZW1vdmUoJ2FjdGl2by1mb2N1cycpO1xuICAgICAgICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGVsZW1lbnQpLmNsYXNzTGlzdC5hZGQoJ2FjdGl2bycpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIHRoaXMuY29uZmlnLmZvckVhY2goKGVsZW1lbnQsIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBlbGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3VibWVudScgKyBpbmRleCk7XG4gICAgICAgICAgICB0aGlzLmZvY3VzTW9uaXRvci5zdG9wTW9uaXRvcmluZyhlbGUpO1xuICAgICAgICB9KTtcbiAgICB9XG59XG4iXX0=