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

@perfectgym/client-portal

v1.12.2

Published

Library for embeding PerfectGym's Client Portal on your page

Downloads

519

Readme

Perfect Gym Client Portal Embed

npm version NPM Downloads

This library is the best way for your company to embed PerfectGym's Client Portal on your site. It provides a range of features which covers intergration needs:

  • Navigating from your site.
  • Showing loader on data load.
  • Callbacks on user log in/out.
  • Callbacks on changing states.
  • Cookies support on safari.
  • Has TypeScript support.

jsFiddle live demo.

Demo with own navigation

Calendar embeding demo

Changelog

Embedding tips

Embedded Client Portal has transparent background, basic branding looks best on grey/blurred image background. To maintain best responsiveness it is recommended to set your Embedded Client Portal width to full page width.

The simplest way of embedding Client Portal on your site

We recommend including ClientPortal.Embed and iframe-resizer using jsDelivr CDN.

  1. Add ClientPortal.Embed styling.

At the end of <head> add:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@perfectgym/client-portal@latest/dist/ClientPortal.css"></link>
  1. Add iframe-resizer GitHub page and ClientPortal.Embed GitHub page libraries.

At the end of <body> tag add:


<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@perfectgym/client-portal@latest/dist/ClientPortal.min.js"></script>
  1. Initialize library.

After scripts form 2nd point add:


<script>
    window.onload = function () {
        var ClientPortal = window.PerfectGym.ClientPortal;

        // element to which ClientPortal will be appended
        var clientPortalElement = document.getElementById('pg-client-portal');
        var options = {
            url: "CLIENT_PORTAL_URL"
        }

        var embeddedClientPortal = new ClientPortal(clientPortalElement, options);
    }
</script>
  1. Reload your page

Click here to play with live demo.

Installation

Package can be installed via NPM.

npm install @perfectgym/client-portal

It requires iframe-resizer as dependency.

Usage


import ClientPortal from "@perfectgym/client-portal";

// element to which ClientPortal will be appended
var clientPortalElement = document.getElementById('pg-client-portal');
var options = {
    url: "CLIENT_PORTAL_URL"
}

var embeddedClientPortal = new ClientPortal(clientPortalElement, options);

API

API section covers:

  1. Constructor options Core Options
  2. Methods
  3. Data types

Options

Options object must be passed passed to new ClientPortal constructor. url parameter is required. The rest are optional.


var options = {
    url: "CLIENT_PORTAL_URL"
}

new ClientPortal(clientPortalElement, options);

Core Options

url [REQUIRED]

  • type: string

Client Portal application url without fragment(the part before #). If Client Portal is hosted on PerfectGym domain correct url looks like: https://CLUB_NAME.perfectgym.pl/ClientPortal2/.

 

forceUrl

  • type: string

Url to Client Portal application. It will be loaded regarding url, defaultState or defaultStateParams as the first page that user sees on the embedded Client Portal. It's main functionality is to give simple way of displaying calendar with predefined filters on your page. Example forceUrl value looks like: https://CLUB_NAME.perfectgym.pl/ClientPortal2/#/Classes/1/Calendar?timeTableId=12&trainerId=92. Domain from this option must match domain in url option.

defaultState

  • type: ClientPortal.State
  • default: ClientPortal.State.Profile

First state showed to user after load. Unauthenticated users are redirected to ClientPortal.State.Login.

defaultStateParams

  • type: Object
  • default: undefined

State params from with which Client Portal will be loaded.

language

  • type: string // Language code standardized by ISO 639-1

If language option is not set Client Portal tries to use user's browser language. If browser language is not supported by Club's Client Portal then language is set to default Client Portal language. For list of available languages in your company please contact PerfectGym support.

minHeight

  • type: number

Client Portal min height in pixels.

onConnect

  • type: function()

Callback fired when iframe connects to Client Portal.

onUserLoggedIn

  • type: function(authInfo: ClientPortalAuthInfo)

Callback fires when user logs in to Client Portal.

onUserLoggedOut

  • type: function(authInfo: ClientPortalAuthInfo)

Callback fires when user logs out from Client Portal.

onStateChangeSuccess

  • type: function(stateInfo: ClientPortalChangeStateInfo)

Callback fires on state (view) change.

onContentScroll

  • type: function(scrollTop: number)

This function is used to override default library scroll behaviour. scrollTop is scroll value which normally would be used to scroll parent page window.

topOffset

  • type: number

Used to adjust scroll behaviour. If you have floating navigation which isn't pinned when page is scrolled to top and you have a bug in which field to which page is scrolled on validation error is hidden under floating navigation. Then topOffset property should have passed navigation height (as a number).

brandingId

  • type: number

Used to apply a specific branding theme.


calendarPage options

hideBookingIfNotLogged

* type: boolean
* default: false

Hides "Book now" button on calendar when user is not logged. This function is useful when you want to embed only calendar on your site.

disableCourseEnrollment

* type: boolean
* default: false

Disables a possibility to enroll for a course from within an embedded ClientPortal.


loginPage options

var options = {
    url: "CLIENT_PORTAL_URL",
    loginPage: {
        navbar: true,
        logo: true
    }
}

var embeddedClientPortal = new ClientPortal(clientPortalElement, options);

Object helpful in customizing login page.

navbar

* type: boolean
* default: true

Show header.

logo

* type: boolean
* default: true

Show logo in header.


navigation options

var options = {
    url: "CLIENT_PORTAL_URL",
    navigation: {
        hide: false,
        logo: true
    }
}

var embeddedClientPortal = new ClientPortal(clientPortalElement, options);

Options responsible for customizing navigation visible after user logs in.

hide

* type: boolean
* default: false

Show navbar.

logo

* type: boolean
* default: true

registration options

var options = {
    url: "CLIENT_PORTAL_URL",
    registration: {
        logo: true
    }
}

var embeddedClientPortal = new ClientPortal(clientPortalElement, options);

Options responsible for customizing registration.

logo

* type: boolean
* default: true

loadMask options

var options = {
    url: "CLIENT_PORTAL_URL",
    loadMask: {
        disable: true,
        onShow: () => { console.log('show my load mask')},
        onHide: () => { console.log('hide my load mask')}
    }
}

var embeddedClientPortal = new ClientPortal(clientPortalElement, options);

Options responsible for customizing load mask.

disable

  • type: boolean
  • default: false

Decides whether to show default Client Portal load mask. Load mask shows when Client Portal is requesting server data or on view change. If changed to true you should use onShow() and onHide() options to show load mask on your site preventing user from making actions in ClientPortal.

disableOnInit

  • type: boolean
  • default: false

Decides whether to hide load mask on initializing iframe.

onShow

  • type: function()

Callback fired when Client Portal normally shows load mask.

onHide

  • type: function()

Callback fired when Client Portal normally hides load mask.


modal options

var options = {
    url: "CLIENT_PORTAL_URL",
    modal: {
        disableOverlay: false
    }
}

var embeddedClientPortal = new ClientPortal(clientPortalElement, options);

disableOverlay

  • type: boolean
  • default: false

Decides whether to show modal overlay layer on top and bottom of the iframe.

Overlay covers elements outside of iframe on parent element to focus user attention on popups and other elements opened in Client Portal.

If set to false dark overlay will be used only on elements inside modal. If you would like to use your own overlay use onShow() and onHide() callback options.

onShow

  • type: function()

Callback when Client Portal shows modal (popup).

onHide

  • type: function()

Callback fires when Client Portal hides modal (popup).

onMobileOpen

  • type: function()

Some dropdowns opens only on mobile mode. This callback fires when fullscreen dropdown opens on mobile mode.

onMobileClose

  • type: function()

Callback fires when dropdown opened only on mobile mode closes.


Methods

Methods can be used on embedded Client Portal object. All methods returns promise which is resolved on response from server.

goTo

  • type: function(state: ClientPortal.State)
  • returns: Promise<>

Navigates through ClientPortal. States are held in ClientPortal.State object.

Usage:

var CP = new ClientPortal(element, options)

CP.goTo(ClientPortal.State.Login)

logout

  • type: function(state: ClientPortal.State)
  • returns: Promise<>

Logouts user.

changeLanguage

  • type: function(languageCode: string)
  • returns: Promise<>

Changes client portal language.

Language code is a two letters string standardized by ISO 639-1.

isUserLoggedIn

  • type: function()
  • returns: Promise<authInfo: ClientPortalAuthInfo>

Returns info if user is authenticated.

getElement

  • type: function()
  • returns: Promise<element: HTMLIFrameElement>

Returns iframe element.

Client Portal types

Types listed below are used as return types or parameters in options and methods.

ClientPortal.State

Can be used in implementing own navigation, using goTo() method.


CP.goTo(ClientPortal.State.<STATE_FROM_LIST_BELOW>)
  • Login
  • Registration
  • ClassesCalendar
  • ClassesList
  • PersonalTraining
  • ReservedClasses
  • Products
  • BuyProducts
  • ProfileEdit
  • ProfileContract
  • ProfileFreeze
  • ProfilePrepaid
  • ProfileChangePassword
  • ProfilePayments
  • ProfileFamily

ClientPortalAuthInfo

{
    isAuthenticated: boolean,
    user: ClientPortalUserInfo
}

ClientPortalUserInfo

{
    FirstName: string,
    LastName: string,
    Email: string,
    HomeClubId: number,
    PhotoUrl: string,
    Type: string
}

ClientPortalChangeStateInfo

{
    fromState: ClientPortalStateInfo,
    toState: ClientPortalStateInfo,
    isVirtual: boolean
}

ClientPortalStateInfo

{
    auth: boolean,
    name: string,
    params: Object //depends on current view
}

Release notes