Nineteen Poor Moths

    @uportal/context-menu-navigation

    1.1.0 • Public • Published

    Context Menu Navigation List

    NPM Version Maven Central Build Status

    Development

    # clone the repository if you haven't already
    git clone https://github.com/uPortal-contrib/notification-web-components
    
    # navigate to the context-menu-navigation folder
    cd uPortal-web-components/@uportal/context-menu-navigation
    
    # install the goods
    npm install
    
    # start the app
    npm start

    Build

    Pretty simple:

    npm run build

    This will compile your JavaScript in to build/static/js/main.{buildnumbers}.js

    Usage

    After building, grab the compiled javascript files and place it on your page. You can now place <context-menu-navigation> anywhere on your page.

    Here's the guts of that html file:

    <context-menu-navigation> </context-menu-navigation>
    • Note: The component includes bootstrap, so that you can use bootstrap's styles in your content slots. However, font-awesome has issues crossing the shadow-dom boundry, so that if you include an icon in the content slot, you also need to include a <link> to the font-awesome stylesheet from uPortal (or elsewhere if you wish).

    Logging

    Makes use of the debug utility. The handle is up:context-nav-menu.

    To enable, navigate to your console and type localStorage.debug="up:context-nav-menu". Note, you can enable multiple debug loggers with wild cards and a CSV, such as localStorage.debug="up:*,sockjs-client:websocket".

    To disable, use: localStorage.debug="".

    Portlet Definitions

    While the portlet layout in the menu will be determined by layout.json, only portlets that have a portlet parameter of widgetType will have a context or flyout area rendered. The widgetType is checked when building the menu, but in essence is passed through to the Widget Renderer.

    To customize the context / flyout area for a portlet in the context-menu, add a widgetTemplate portlet parameter. The field can be HTML.

    Note: The HTML is directly rendered onto the screen without sanitization. For this reason, use care when customizing the widgetTemplates.

    Example portlet parameters to render a context / flyout area in the context-menu:

    <parameter>
        <name>widgetTemplate</name>
        <value
            ><![CDATA[ <div> <span>Check out the latest business cartoon. Click on the link below! <a
            href="/uPortal/p/daily-business-cartoon-4"><img
            src="https://raw.githubusercontent.com/Jasig/uPortal/master/docs/images/uPortal-logo.jpg"
            alt="uP"/></a> </span> </div>]]>
        </value>
    </parameter>
    <parameter>
        <name>widgetType</name>
        <value>generic</value>
    </parameter>
    Notice

    We have a /proxy/ leading the oidc-url attribute. This is a developer convenience to be able to query against your local running instance of uPortal. The proxy is configured in package.json:

      "proxy": {
        "/proxy": {
          "target": "http://localhost:8080",
          "changeOrigin": true,
          "pathRewrite": {
            "^/proxy": "/"
          }
        }
      },

    Attributes

    <context-menu-navigation> takes the following attributes:

    notification-api-url

    Url to connect notification-endpoint. Defaults to /NotificationPortlet/api/v2/notifications.

    <context-menu-navigation
        oidc-url="/NotificationPortlet/api/v2/notifications"
    ></context-menu-navigation>

    oidc-url

    Url to connect to oidc. The default for this value is /uPortal/api/v5-1/userinfo.

    <context-menu-navigation oidc-url="/uPortal/api/v5-1/userinfo"></context-menu-navigation>

    color-map

    A map of colors associated with notification categories. The component will choose the first category defined to determine this.

    <context-menu-navigation
        color-map='{
      "Announcement": "#6649bb",
      "Holds": "#487df9",
      "To-Do": "#c85a89"
    }'
    ></context-menu-navigation>

    debug

    Skips oidc call for api token.

    <context-menu-navigation debug></context-menu-navigation

    Theming

    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.

    You should define this in your custom stylesheet.

    fg = foreground (text) bg = background

    :root {
        --notif-list-icon-ph-color: #999; /* color of list icon (category) default color */
        --notif-unread-bg-color: aliceblue; /* background color of unread notifications */
        --notif-read-bg-color: white; /* background color of read notifications */
        --notif-highlight-bg-color: honeydew; /* background color of highlighted notifications */
        --notif-list-item-dd-width: 12px; /* size of ellipsis-v icon trigger for dropdown */
        --notif-list-item-dd-height: 28px; /* size of ellipsis-v icon trigger for dropdown */
    }

    Keywords

    none

    Install

    npm i @uportal/context-menu-navigation

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    none

    Unpacked Size

    4.75 MB

    Total Files

    20

    Last publish

    Collaborators

    • vertein
    • sibley
    • doug.reed
    • apetro
    • zeke.witter
    • christianmurphy
    • drewwills
    • bjagg
    • cbeach47
    • jgribonvald
    • nogalpaulina