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.
195 lines (187 loc) • 9.18 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
*/
var MenuPortalService = /** @class */ (function () {
function MenuPortalService() {
}
MenuPortalService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
MenuPortalService.ctorParameters = function () { return []; };
/** @nocollapse */ MenuPortalService.ngInjectableDef = defineInjectable({ factory: function MenuPortalService_Factory() { return new MenuPortalService(); }, token: MenuPortalService, providedIn: "root" });
return MenuPortalService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MenuPortalModule = /** @class */ (function () {
function MenuPortalModule() {
}
MenuPortalModule.decorators = [
{ type: NgModule, args: [{
declarations: [MenuPortalComponent],
imports: [
BrowserModule,
RouterModule
],
exports: [MenuPortalComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
},] }
];
return MenuPortalModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MenuItem = /** @class */ (function () {
function MenuItem(props) {
Object.assign(this, props);
}
return MenuItem;
}());
var SubMenuItem = /** @class */ (function () {
function SubMenuItem(props) {
Object.assign(this, props);
}
return SubMenuItem;
}());
/**
* @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