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.
203 lines (193 loc) • 10.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/cdk/a11y'), require('/cdk/keycodes'), require('/core'), require('@angular/platform-browser'), require('/router')) :
typeof define === 'function' && define.amd ? define('jcyl-menu-portal', ['exports', '/cdk/a11y', '/cdk/keycodes', '/core', '@angular/platform-browser', '/router'], factory) :
(factory((global['jcyl-menu-portal'] = {}),global.ng.cdk.a11y,global.ng.cdk.keycodes,global.ng.core,global.ng.platformBrowser,global.ng.router));
}(this, (function (exports,a11y,keycodes,i0,platformBrowser,router) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MenuPortalService = /** @class */ (function () {
function MenuPortalService() {
}
MenuPortalService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
MenuPortalService.ctorParameters = function () { return []; };
/** @nocollapse */ MenuPortalService.ngInjectableDef = i0.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 (keycodes.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: i0.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: a11y.FocusMonitor },
{ type: i0.ChangeDetectorRef },
{ type: i0.NgZone }
];
};
MenuPortalComponent.propDecorators = {
config: [{ type: i0.Input }],
onResize: [{ type: i0.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: i0.NgModule, args: [{
declarations: [MenuPortalComponent],
imports: [
platformBrowser.BrowserModule,
router.RouterModule
],
exports: [MenuPortalComponent],
schemas: [i0.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
*/
exports.MenuPortalService = MenuPortalService;
exports.MenuPortalComponent = MenuPortalComponent;
exports.MenuPortalModule = MenuPortalModule;
exports.MenuItem = MenuItem;
exports.SubMenuItem = SubMenuItem;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=jcyl-menu-portal.umd.js.map