@gip-recia/extended-uportal-header
v0.5.1
Published
a component to deport the uPortal menu
Downloads
558
Readme
extended-uportal-header
Installation
# Install with npm
npm install @gip-recia/extended-uportal-header
Usage as Web Component
Html
<script
src="/path/to/the/library/extended-uportal-header[.min].js"
defer
></script>
<extended-uportal-header></extended-uportal-header>
internationalization
The component support an internationalization mixin. This adds the additional prop messages
which can be applied to override the default text messages in the various embed components.
For example:
<extended-uportal-header
messages='[{"locales": ["en", "en-US"], "messages": { "message": {"favorites": { "add": "Add me to your favorites!" } }}}]'
>
</extended-uportal-header>
The available messages to override are as follows:
{
"message": {
"services": {
"title": "All services",
"filter": "Find a service..."
},
"favorites": {
"add": "Add to favorites",
"remove": "Remove from favorites",
"title": "My Favorites",
"empty": "No favorite defined"
},
"filter": {
"selectOption": "All categories"
},
"userInfoPortletUrl": {
"title": "See my account informations"
},
"userChangeEtabUrl": {
"title": "Select an other organization"
},
"buttons": {
"logout": "Sign out",
"menuClose": "Close menu"
},
"eyebrow": {
"close": "Close account menu",
"open": "Open account menu",
"avatar": "avatar",
"information": "See my account information",
"logout": "Sign out"
}
}
}
Properties
messages
: type:Object
, optional, see internationalization;domain
: type:String
, optional, target portal domain (ex :www.my-uportal.org
). If not set current domain is used;portal-path
: type:String
, optional, path add to domain to make portal url (ex :/portal
);service-name
: type:String
, optional, current service (app) name;favorites-portlet-card-size
: type:String
, optional, possible valueauto|large|medium|small|smaller
, default:auto
, define the size of portlet-cards component intofavorite-content
component part;grid-portlet-card-size
: type:String
, optional, possible valueauto|large|medium|small|smaller
, default:auto
, define the size ofportlet-cards
component intogrid-content
component part;default-org-logo-url
: type:String
, optional, url to provide an institutional picture when none is found from an optional api;default-org-logo-path
: type:String
, optional, path from portal domain to provide an institutional picture when none is found from an optional api;force-org-logo-url
: type:String
, optional, url to provide an institutional picture overriding the default-org-logo and the institutional one obtained by an api (used to have an overview before updating change to every users from the api);force-org-logo-path
: type:String
, optional, path from portal domain to provide an institutional picture overriding the default-org-logo and the institutional one obtained by an api (used to have an overview before updating change to every users from the api);force-org-icon-url
: type:String
, optional, url to provide an institutional picture overriding the default-org-logo and the institutional one obtained by an api (used to have an overview before updating change to every users from the api);force-org-icon-path
: type:String
, optional, path from portal domain to provide an institutional picture overriding the default-org-logo and the institutional one obtained by an api (used to have an overview before updating change to every users from the api);force-avatar-url
: type:String
, optional, url to provide a default avatar picture for user;force-avatar-path
: type:String
, optional, path from portal domain to provide a default avatar picture for user;context-api-url
: type:String
,optional, default:/uPortal
, usefull to provide a different uPortal context on which to do request;favorite-api-url
: type:String
,optional, default:/uPortal/api/layout
, the uri/url of the favorites api;layout-api-url
: type:String
,optional, default:/uPortal/api/v4-3/dlm/layout.json
, the uri/url of the layout api to request the favorite list in the oser defined order (only needed to get favorite's order defined by the user);portlet-api-url
: type:String
,optional, default:/uPortal/api/v4-3/dlm/portletRegistry.json
, the uri/url of the portletRegistry api to obtains user authorized portlet list;organization-api-url
: type:String
,optional, optional, an uri/url of an api to retrieve organization informations, any json format is accepted, but configureuser-org-id-attribute-name
,user-all-orgs-id-attribute-name
,org-logo-url-attribute-name
to work with;userInfo-api-url
: type:String
,optional, default:/uPortal/api/v5-1/userinfo
, url/uri on which the api request is done to obtain user information and the jwt token;template-api-url
: type:String
,optional, url on which the api request is done to obtain template informations;template-api-path
: type:String
,optional, path from portal domain on which the api request is done to obtain template informations;template
: type:Object
,optional, JSON Object that define icon (iconPath
), icon opacity (iconOpacity
) and background color (color
). Icon opacity override css variable. ex :'{"iconPath": "","iconOpacity": 1,"color":"#057436"}'
;sign-in-url
: type:String
, optional, an uri/url to of the login button. If not set and user not connected, component will only render not-loaded slot see not-loaded;sign-out-url
: type:String
, default:/uPortal/Logout
, an uri/url to call when user logout (for a logout button);user-info-portlet-url
: type:String
, default:''
, an url/uri to the user information application;switch-org-portlet-url
: type:String
, default:''
, an optional url/url of a rest api to obtain institutional organization information;user-org-id-attribute-name
: type:String
, default:'ESCOSIRENCourant[0]'
, the attribute object path to obtain the id of the organization to retrieve from the organization's api;org-logo-url-attribute-name
: type:String
, default:'otherAttributes.ESCOStructureLogo[0]'
, the attribute object path to obtain the organization Picture from organization details obtained from the organization's api;user-all-orgs-id-attribute-name
: type:String
, default:'ESCOSIREN
, the attribute object path to obtain all ids of the organizations linked to the user and to retrieve from the organization's api;hide-action-mode
: type:String
: possible valueauto|always|never
, default:auto
, define if we should show the actions,auto
don't show onsmall
breakpoint;show-favorites-in-slider
: type:boolean
: show or not the favorites in a slider;icon-type
: type:String
: possible valuefour-square|four-empty-square|nine-square|nine-empty-square|never
, default:hamburger
, define the menu icon type;dont-override
type:Object
, optional, array of strings properties (camelcased) to not override in cas of default value usage;portlet-info-api-url
type:String
, optional, the uri/url of the portlet api;fname
type:String
, optional, fname of the corresponding portlet;debug
: type:Boolean
, default:false
, for the demo/debug mode to be able to run in a standalone way (disable api call).
Slots
menu
The content of the menu
slot replace the esco-content-menu
component.
<extended-uportal-header>
<div slot="menu">...</div>
</extended-uportal-header>
menu-icon
If icon-type
attribute is set to custom
, the content of the menu-icon
slot replace the icon of the esco-content-menu
component open button.
Use the menu-icon
slot of the esco-content-menu
component;
<extended-uportal-header>
<div slot="menu-icon">APPS</div>
</extended-uportal-header>
brand
The content of the brand
slot replace the portal icon, name and app.
<extended-uportal-header>
<div slot="brand">...</div>
</extended-uportal-header>
user
The content of the user
slot replace the the eyebrow-user-info
component.
<extended-uportal-header>
<div slot="user">John Doe</div>
</extended-uportal-header>
not-loaded
The not-loaded slot is displayed while remote datas (user and organisation infos) are not loaded.
<extended-uportal-header>
<div slot="not-loaded">Chargement en cours</div>
</extended-uportal-header>
Theming
Extend Header
Currently this component supports CSS Variables for overriding styles.
:root {
--ext-header-tpl-primary-color: #25b2f3;
--ext-header-tpl-bg-color: var(--ext-header-tpl-primary-color);
--ext-header-tpl-spaces: 8px;
--ext-header-tpl-font-family: 'Roboto Condensed', 'Roboto', sans-serif;
--ext-header-tpl-font-size: 18px;
--ext-header-tpl-font-color: #ffffff;
--ext-header-tpl-icon-opacity: 0.6;
}
Embed ESCO Content Menu component
Currently this component supports CSS Variables for overriding button colors. Defining the following variables will change the colors for the component accordingly. They will fall back to the colors described below.
NOTE: This is only supported when the size attribute is set to custom
.
You should define this in your custom stylesheet.
:root {
--content-gridcard-padding: 5px;
--content-gridcard-border: none;
--content-gridcard-bg-color: white;
--content-gridcard-border-radius: 5px;
--content-gridcard-shadow: none;
--content-gridcard-shadow-hover: none;
--content-gridcard-size-w: 180px;
--content-gridcard-size-h: 180px;
--content-gridcard-icon-size: 75px;
--content-gridcard-icon-size: 75px;
--content-gridcard-title-fontsize: 16px;
--content-gridcard-description-fontsize: 16px;
--content-griditem-margin: 20px auto;
}
source : [https://github.com/uPortal-Project/uPortal-web-components/tree/master/%40uportal/esco-content-menu]