@aller/cyclops-frontend-vanilla

cyclops-frontend-vanilla

This package is for vanilla-js DOM-manipulation for cyclops-functions. As of now, it only contains code for injecting the login-button/showing your name in the place of the login-button.

Table of Contents

• Functions
  • injectUser
• TODO

Functions

injectUser

import { injectUser } from '@aller/cyclops-frontend-vanilla'

injectUser(elementId, domain?, ILoginButton?)

For users that want the least possible bloat, imports should be handled as such:

import { injectUser } from "@aller/cyclops-frontend-vanilla/lib/components/loginButton";

Instead of importing everything the index.ts forward-exports, it only imports the element that is wanted/needed. This could help tree-shaking in cases where there are no tree-shaking done on transpiling.

Injects a login-button to the elementId sent in as a parameter and fetches whether the user is logged in.

If you want to test the functionality on a non-relative domain, the domain can also be sent with as a parameter.

This function can include an object of the type ILoginButton interface for customizable classes and texts. Here are the defaults:

{
  dropdownButtonClass: "cyclops-dropbtn",
  dropdownContentClass: "cyclops-dropdown-content",
  dropdownClass: "cyclops-dropdown",
  containerContentClass: "cyclops-login",
  loginText: "Logg Inn",
  logoutText: "Logg Ut",
  myPageText: "Minside",
}

TODO

Add more vanilla-js DOM-manipulation code, for different functions. So far it is only injectUser that has its own vanilla-JS element. This should probably be expanded when/if needed.