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

@aller/cyclops-frontend-vanilla

v2.8.0

Published

Vanilla JS implementation of login-button

Downloads

917

Readme

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

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

injectUser(elementId, domain?, ILoginButton?, withInitials?)

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

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

For users that doesn't want to include any CSS for injectUser, use:

import { injectUser } from "@aller/cyclops-frontend-vanilla/lib/generator/generateLoginButton";

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.

If you want generate user-name with initials, you can pass additional argument to this function withInitials in this case two buttons will be generated: one with fullName and another with just initials of user name. This was done to configuration make flexible and if you need one of them you can hide it trough css.

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

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

For adding more custom elements in the user-dropdown, the property extraLinks can be used. This property can hold elements of the interface:

interface IExtraLink {
  text: string;
  href: string;
}

If the property extraLinks remain empty, there will only be added the default "Minside" and "Logg Ut" buttons. If the extraLinks are defined, these links will appear between the "Minside" and "Logg Ut" links.

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

injectDynamicContent(elementId, productId, studioLink?, plussContentLink?)

For users that doesn't want to include any CSS for injectDynamicContent, use:

import { injectDynamicContent } from "@aller/cyclops-frontend-vanilla/lib/generator/generateLoginButton";

Injects a dynamic content link to the elementId sent in as a parameter and fetches whether the user is logged in.

If user is logged in and has pluss subscription we'll return him link to pluss content. If user is logged in but doesn't have pluss subscription we'll return him link to live content (studio)

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

injectLoginBox(elementId: string, domain?: string, textClasses?: ILoginBox)

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

import { injectLoginBox } from "@aller/cyclops-frontend-vanilla/lib/components/loginBox";

Injects a login-wall/login-box into the document with some customizable classes and texts. elementId defines what element it should be under, domain can be used if you don't want a relative path. textClasses is of the type ILoginBox which can be used to override the default texts and classes.

interface ILoginBox {
  texts?: {
    toSeeText?: string;
    loginText?: string;
    loginaID?: string;
    ifNoPre?: string;
    registerText?: string;
    itsFree?: string;
  };
  classes?: {
    container?: string;
    title?: string;
    subtitle?: string;
    loginButton?: string;
    register?: string;
  };
}
import { injectSubscriptionBox } from '@aller/cyclops-frontend-vanilla'

injectSubscriptionBox(
  elementId: string,
  brandId: string,
  productId: string,
  dealId: string,
  _focus: boolean,
  _brands: any[],
  _textsAndClasses?: ISubscriptionBox,
  _paymentOptions?: IPaymentOptions,
  _domain?: string | null)

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

import { injectSubscriptionBox } from "@aller/cyclops-frontend-vanilla/lib/components/subscriptionBox";

injectSubscriptionBox injects a subscription-box that either is dynamic from the catalogue, or just inserts based on the _brands included. brandId, productId and dealId is used for verifying that the brand/product/deal actually exists in the inserted _brands. If _brands isn't defined, it logs out an error to the console, since _brands are required.

_focus decides whether the box should have the css-class focus, which can be used to add extra styling to that specific element.

_textsAndClasses contains the different override/extra texts and classes editors can add:

interface ISubscriptionBox {
  texts?: {
    youChoseText?: string;
    bottomText?: string;
    subtitleText?: string;
    label?: string;
    buyButtonText?: string;
    returnUrl?: string;
    termsAndConditionsLink?: string;
  };
  classes?: {
    subscriptionBoxClass?: string;
    dealNameClass?: string;
    labelClass?: string;
    costClass?: string;
    fullTermsClass?: string;
    buyButtonClass?: string;
    dialogClass?: string;
    dialogContentClass?: string;
    dialogProductNameClass?: string;
    dialogCostClass?: string;
    dialogDealNameClass?: string;
    dialogFullTermsClass?: string;
    dialogSubtitleTextClass?: string;
    dialogBuyButtonClass?: string;
    dialogBottomTextClass?: string;
    dialogCloseClass?: string;
    termsAndConditionClass?: string;
  };
}
import { injectSubscriptionBoxWidthGetter } from '@aller/cyclops-frontend-vanilla'

injectSubscriptionBoxWidthGetter(
  elementId: string,
  brandId: string,
  productId: string,
  dealId: string,
  _focus: boolean,
  _brands?: any[],
  _textsAndClasses?: ISubscriptionBox,
  _paymentOptions?: IPaymentOptions,
  _domain?: string | null,
  _options?: any)

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

import { injectSubscriptionBoxWidthGetter } from "@aller/cyclops-frontend-vanilla/lib/components/subscriptionBoxWidthGetter";

injectSubscriptionBoxWidthGetter injects a subscription-box that either is dynamic from the catalogue, or just inserts based on the _brands included. brandId, productId and dealId is used for verifying that the brand/product/deal actually exists in the inserted _brands. If _brands isn't defined, the three ID's are used to fetch and populate the correct element from the API.

See injectSubscriptionBox for the rest of the parameters.

import { generateSubscriptionBox } from "@aller/cyclops-frontend-vanilla/lib/generator/generateSubscriptionBox";

generateSubscriptionBox(
  id: string,
  focus: boolean,
  deal: IProductDeal,
  textsAndClasses: ISubscriptionBox
)

Very similar to the injector (and is in fact used by the injector), but instead just returns the HTML for the element as a string. This can be used for serverside "rendering" of the element.

import { generateSubscriptionModal } from "@aller/cyclops-frontend-vanilla/lib/generator/generateSubscriptionModal";

generateSubscriptionModal(
  id: string,
  deal: IProductDeal,
  product: IProduct,
  pathname: string,
  textsAndClasses: ISubscriptionBox,
  domain?: string
)

Very similar to the injector (and is in fact used by the injector), but instead just returns the HTML for the element as a string. This can be used for serverside "rendering" of the element. The only difference to this, and the above generator, is that since it is a modal, this should have e.g. modal appended to the ID, and the A11yDialog has to be added manually for the modal to actually work.

import { generateLoginBox } from "@aller/cyclops-frontend-vanilla/lib/generator/generateLoginBox";

generateLoginBox(
  id: string,
  deal: IProductDeal,
  product: IProduct,
  pathname: string,
  textsAndClasses: ISubscriptionBox,
  domain?: string
)

Very similar to the injector (and is in fact used by the injector), but instead just returns the HTML for the element as a string. This can be used for serverside "rendering" of the element.

import { generateDialogScript } from "@aller/cyclops-frontend-vanilla/lib/generator/generateDialogScript";

generateDialogScript(id: string)

This is used to add inline script-tags to trigger the A11yDialog clientside on page-rendered. The ID here must be the same that is sent in with generateSubscriptionModal.

import "@aller/cyclops-frontend-vanilla/lib/client/loginBox";

This is used to add the needed CSS for the login-box, if going the server-side rendering way.

import "@aller/cyclops-frontend-vanilla/lib/client/subscriptionBox";

This is used to add the needed CSS+A11yDialog script for the subscription-box + modal, if going the server-side rendering way.