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

transition-manager

v0.0.17

Published

Transition Manager. Framework independent transition manager to transition elements using states and actions.

Downloads

7

Readme

Transition Manager

build status

Transition-Manager to easily transition visual elements within your application based on your application state.

It is completely framework independant, giving you the ability to implement it in your application regardless the framework or tools you are using within your application.

At its core, the library uses a simple state machine to dictate its transitions. When a State changes, the Transition-Manager checks for a valid transition, fetches and prepares the associated views, then assigns them to the correct transition, providing everything you need to animate to the next state.

See more in the overview guide or check out this example.

Installation

npm install transition-manager --save-dev

Basic Setup

--

config.js
// basic config.js - can also be .json
export default {
    'STATE_HOME' : {
        view  : 'homeView',
        actions : {
            'action_go_about' : {
                transitionType  : 'barTransition',
                target          : 'STATE_ABOUT',
                /* associated views */
                views           : [ 'fooView', 'barView' ],
            },
            // 'action_go_Contact' : { }
        }
    }, // end state home
    /* 
    STATE_ABOUT   : {}
    STATE_CONTACT : {}
    */
}
main.js
import transitionManager from 'transition-manager';
import configData        from './config.js';
// views
import homeView          from './homeView';
import aboutView         from './aboutView';
import contactView       from './contactView';
// transitions
import transitionModule  from './fooTransition';

 /* instantiate passing in basic config */
transitionManager.init({
    data : configData,
    /* 
        specify view objects, *ID's must match those specified 
        in the configData.
        View objects can be any object that will get pased to your 
        transition module, allowing you to access a DOM reference 
        anyway you want.
    */
    views : {
        'homeView'    : homeView,
        'aboutView'   : aboutView,
        'contactView' : contactView
    }
    /* specify transiton modules, *ID's must match those 
    specified in the configData */
    transitions : {
        'fooTransition' : transitionModule
    };
})

/* start the transitionManager - transitions to initial state */
transitionManager.start();

/* transition in the homeView */
transitionManager.action('action_init_home');
fooTransition.js
export default {
    
    /* optional method to setup transitions */
    initialize : function(views, data, deferred, currentViewRef, nextViewRef) {
        // setup code here
    },

    /**
     * @param  {object} views - { currentView, nextView, *additionalViews }
     * @param  {object} data - any data sent with the Action
     * @param  {object} deferred Promise 
     * @param  {string} currentViewRef
     * @param  {string} nextViewRef
     */
    animate : function(views, data, deferred, currentViewRef, nextViewRef) {
        // animation code here

         /* on Complete */
        deferred.resolve();
    }
}

Config Parameters

  • data (object) Configuration data
  • views (object) view objects *can be any object you want passed to your transition module
  • transitions (object) transition modules
  • viewManager (object) optional, allows yu to pass a custome view manager
  • qtransitions (boolean) default=true, if previous transition has not completed, queue the next one up.
  • limitq (boolean) default=true, only queue the last transition (make sure next transition is possible from that state)
  • history (boolean) default=false Store all actions in a history array
  • useCache (boolean) default=false Speed up transitions by storing ready prepared transitions in cache. Only use if your views remain static and are not manipulated between transitions
  • debug (boolean) default=false Traces out info steps

Public Methods

  • action - Start action
  • currentState - Returns the current state object
  • cancel - Cancel the transition
  • addTransition - Dynamically add a transition module
  • removeTransition - Dynamically remove a transition module
  • getHistory - Get the action history

Events

Signals are use for all communication within the library. To listen for an event you can simple write:transitionManager.onStateChanged.add( foo(){} );

  • onStateChanged - triggered when a state is changed
  • onTransitionStarted - triggered when a transition module has started
  • onAllTransitionStarted - triggered when all transitions have started for that Action
  • onAllTransitionCompleted - triggered when all transitions have completed
  • transitionComplete - triggered when a single module transition has completed. Receives the transition object as a parameter