npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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 value auto|large|medium|small|smaller, default: auto, define the size of portlet-cards component into favorite-content component part;
  • grid-portlet-card-size: type: String, optional, possible value auto|large|medium|small|smaller, default: auto, define the size of portlet-cards component into grid-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 configure user-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 value auto|always|never, default: auto, define if we should show the actions, auto don't show on small breakpoint;
  • show-favorites-in-slider: type: boolean : show or not the favorites in a slider;
  • icon-type: type: String : possible value four-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]