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

@schibsted/data-controller

v4.1.0

Published

The Schibsted Media data controller SDK is a simple module for rendering information in order to comply with GDPR laws of informing users of who are controlling and processing their data. This SDK provides functionality to comply with the [guidelines as o

Downloads

2,489

Readme

Schibsted Media Data Controller SDK

The Schibsted Media data controller SDK is a simple module for rendering information in order to comply with GDPR laws of informing users of who are controlling and processing their data. This SDK provides functionality to comply with the guidelines as outlined here.

Installing

$ npm install --save @schibsted/data-controller

or with Yarn:

$ yarn add @schibsted/data-controller

Usage

The SDK can be included in two different ways, either directly in the browser clients, or installed as a module and included as part of the consuming applications JS pipeline.

As part of the JS pipeline:

Import (or require) the module as usual, and initialize it:

import { init } from '@schibsted/data-controller';

const sdkInstance = init({
  brandName: 'AwesomeSite',
  language: 'sv',
  layout: 'footer',
  hideAfter: 5000,
  minimizeText: false,
});

sdkInstance.render(document.querySelector('#target-node'));

As part of the React / TypeScript pipeline:

Import (or require) the module as usual, and initialize it. By creating a ref using useRef and using useEffect, you can render the Data Controller element to an element in React.

import { init, DataControllerSdk } from '@schibsted/data-controller';

export const DataController = () => {
  const nodeRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (nodeRef.current) {
      const sdkInstance: DataControllerSdk = init({
        brandName: 'AwesomeSite',
        language: 'sv',
        layout: 'footer',
        hideAfter: 5000,
        minimizeText: false,
      });

      sdkInstance.render(nodeRef.current);
    }
  }, []);

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: '<!-- googleoff: index -->' }} />
      <div ref={nodeRef} id="target-node" />
      <div dangerouslySetInnerHTML={{ __html: '<!-- googleon: index -->' }} />
    </>
  );
};

As a browser script tag:

<script src="https://unpkg.com/@schibsted/data-controller/dist/data-controller-sdk.umd.js"></script>
<script>
  const sdkInstance = CNP.DataControllerSDK.init({
    brandName: 'AwesomeSite',
    language: 'sv',
    layout: 'footer',
    hideAfter: 5000,
    minimizeText: false,
  });

  sdkInstance.render(document.querySelector('#target-node'));
</script>

hideAfter is an optional parameter that gives an opportunity to define time in milliseconds after which the data controller stripe will be hidden. Works for the 'footer' layout. The default value is 0.

minimizeText is an optional parameter that determines link text length. If it is set to true, then the link text in 'no' and 'sv' language is 'Les mer' and 'Läs mer'. The default value is false.

Once you have a configured instance, you can call the render method to render it to a node:

sdkInstance.render(document.querySelector('#target-node'));

This will, potentially, insert some markup into the document to explain to the end users that Schibsted Media will process the data they produce on this site in order to comply with GDPR laws.

Internally, the SDK will check for when this information was last shown on this device and decide whether to display or not.

You can also force the element to show up. This can, for example, be useful if displaying the element in a static footer on the site:

sdkInstance.render(document.querySelector('#target-node', { permanent: true }));

Styling

The DataController markup follows BEM conventions, and the classes used are documented below. To use the default styles shipped with this SDK, remember to link it on the page, or import it in your asset pipeline.

import '@schibsted/data-controller/dist/styles.css';
<link rel="stylesheet" href="https://unpkg.com/@schibsted/data-controller/dist/styles.css" />

To override the default styles, just override using normal CSS rules. To avoid specificity issues you can either have rules with higher precidence than the single class selectors used in the default styles, or ensure that your overrides are defined after the default styling.

Blocks

.sch-datacontroller: This is the top level node containing the rest of the markup.

modifiers:

  • .sch-datacontroller--subheader: Set when using the subheader-layout
  • .sch-datacontroller--footer: Set when using the footer-layout
  • .sch-datacontroller--permanent: Set when permanent is supplied as rendering options
  • .sch-datacontroller--cobranded: Set when the content contains both logotype and text and a read more link
  • .sch-datacontroller--minimal: Set when the content is just the brandname and logotype inlined.

Elements

  • .sch-datacontroller__wrapper: Wrapper inside the top-level node. Contains all other markup. This can be used to inset the contents to fit a certain width, while allowing the overall markup to take up the full width of the page

  • .sch-datacontroller__content: Contains the Schibsted Media logo, texts and links, but not the close button when using the footer-layout

  • .sch-datacontroller__text: Contains all text, including links to read more. You can use this class to change the font family, or font size etc.

    modifiers

    • .sch-datacontroller__text--inline: Set when the logotype is inlined in the text
  • .sch-datacontroller__logo: Set on the Schibsted Media logotype SVG

    modifiers

    • .sch-datacontroller__logo--inline: Set when the logotype is part of the text, as a child of .sch-datacontroller__text
  • .sch-datacontroller__read-more: Set on the link to display more information about the data collected

  • .sch-datacontroller__btn: Set on all <button>-elements

  • .sch-datacontroller__btn-close: Set on the close-button in the sticky footer

  • .sch-datacontroller__btn-close-icon: Set on the close-icon SVG