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

adapt-mock

v1.1.0

Published

Rapid prototype existing HTML/CSS

Downloads

8

Readme

Adapt Build Status Coverage Status

NPM

Rapid prototype existing HTML/CSS with the tools you already know. Adapt is a tool to bridge the gap between design and development.

Installation

npm i adapt-mock
<head>
  ...

  <!--Main Adapt Library-->
  <script src="./node_modules/adapt/umd/adapt-mock.min.js"></script>

  <!--Adapt Stages-->
  <link href="example/styles.css" rel="stylesheet">
  <script src="example/scripts.js"></script>
</head>

Usage

Adapt allows you to step through the various stages when prototyping to help sell and ideas, radical changes or introducing new features. If you can hack CSS in Chrome Developer Tools, you can build a prototype with Adapt. Grab some HTML/CSS and add a class for each design change then use Arrow keys to step through each stage, you can quickly compare each stage in the browser or device in real time.

Moving Stages

You can move between stages with keyboard actions, remember the element that has the Mocker assigned should be in focus.

Key Press|Action --- | --- ArrowRight | Go to next stage Shift + ArrowRight | Go to last stage ArrowLeft | Go to previous stage Shift + ArrowLeft | Go to first stage

Available Modules

Adapt comes in four flavours, can be used directly in the browser via umd or extended for your own projects.

  • UMD (./umd/adapt.js)
  • ES5 (./lib/index.js)
  • ES6 (./lib-esm/index.js)
  • Flat ES6 (./lib-esm/index.js)

Stages

Adapt requires a list of Stages, imagine these as a list of requirements. Each stage can have a description and functions to run when switching to it.

// Setup stages
const stages = [
  {description: 'Improve visibility between label and values'},
  {description: 'Improve information hierarchy'},
  {description: 'Improve contrast'},
];

Load Adapt, with new Adapt.Mocker(), it takes two arguments, the first is an HTML element and the second are your Stages we created above.

// Wait for the document to load
document.addEventListener('DOMContentLoaded', () => {

  // Create a new instance of the Mocker class, and pass it the stages.
  const mock = new Adapt.Mocker(document.body, stages);

});

Prototyping (styling stages)

Adapt uses standard CSS classes when handling style changes between stages. When you go to the next stage Adapt adds a new class to the element, when you go back, it removes it.

Multiple Mockers

To manage multiple Mockers on a document (because why not?) you can set the mockers base class name by using the className property.

const m = new Adapt.Mocker(myElement, myStages);
m.className = 'myClassName';

Using the example above we expect that for the second stage it will set the element class attribute to myClassName1 myClassName2.

Run Functions (DOM)

When changing Stage you may want to make a radical change that can't be achieved with CSS, to do this we use Run functions. Adapt allows you to write your own functions that modify the DOM which get called when changing Stages.

To add a functions to a Stage insert the name of the function in the run array.

const stages = [
  ...
  {description: 'Update Text Labels', run: ['updateLabels']},
];

Declare the function on the window.

function updateLabels(revert, state) {
  // Use whatever JavaScript you like here (e.g. JQuery)
}

Each function receives two arguments.

Param | Type | Description --- | --- | --- revert | Boolean | True if function should reverse (Stage is moving back) state | Object | An object stored inside the Mocker