• Stars
    star
    625
  • Rank 71,862 (Top 2 %)
  • Language
    JavaScript
  • Created over 11 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A responsive state manager which allows you to run different javascript at different browser widths

Simple State Manager 4

Build Status Code Climate

Simple State Manager (SSM for short) is a javascript state manager for responsive websites. It is built to be light weight, has no dependencies (except javascript of course) and aims to be really easy to simply drop into your project ready to use.

As a state manager, SSM allows you to target different javascript towards different states of your site. It allows you to define as many states as your site requires and allows you to have independent Enter, Leave and Resize events for each of the states.

##Getting started

To get started with SSM the first step is to include it in your project, you can do this in two ways

  • Download and add the ssm.js (or ssm.min.js) file to your site
  • Use Bower to add to your project using bower install SimpleStateManager

##Documentation Documentation can be found at http://www.simplestatemanager.com

##Browser Support Version 4.x of SimpleStateManager is built in ES6 so for the majority of browsers will require being transpiled to work accross different browsers. In its transpiled form SimpleStateManager supports:

  • Internet Explorer 10+ (Internet Explorer 9 should work if you use a matchMedia polyfill)
  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Apple Safari

The library is tested across browser prior to each release and every commit is validated using TravisCI and BrowserStack.

If you need to support Internet Explorer 8 or below their are two options available:

  • Use a matchMedia polyfill and a bind polfill
  • Use SimpleStateManager 2.X.X branch

##Release Log

4.0.0 - 10th December 2017

In SimpleStateManager 4 the library is completely rewritten into ES6. I also updated the API so that there is less duplication.

  • Updated whole codebase to ES6
  • Seperated out the utils into a seperate file
  • Seperated out state into a seperate file
  • Use requestAnimationFrame for debounce [Issue #41]

###3.2.0 - August 24th, 2016

  • Add method to enable developers to attach multiple callbacks to a state

###3.1.2 - June 17th, 2016

  • Fixed a bug where IE11 would reject a media expression that is an empty string, switched to provide a media expersion that is always true as the default.

###3.1.1 - March 8th, 2016

  • Fixed bug that prevented removing states correctly removing the listeners

###3.1.0 - February 10th, 2016

  • Added isActive method back into library

###3.0.0 - June 8th, 2015

  • Rewrite to use the matchMedia API
  • Add support for media queries
  • Major refactor
  • Remove legacy browser (IE 8 and below) support

###2.4.1 - May 17, 2015

  • Fix browser width when browser is zoomed

###2.4.0 - December 29, 2014

  • Improved release process with version auto updating
  • Implemented proper AMD support
  • Made the site a seperate repository

###2.3.0 - July 25, 2014

  • Added onFirstRun callback method to states.

###2.2.6 - June 23, 2014

  • Fixed issue where you can apply multiple readies.

###2.2.5 - June 12, 2014

  • Fixed issue where it didnt work when you zoom the browser.

###2.2.4 - March 12, 2014

  • Fixed issue where respond.js would trick SimpleStateManager into thinking the matchMedia API was fully supported.

###2.2.3 - February 14, 2014

  • Fixed issue where the width of the browser would not always match the media query.

###2.2.2 - February 12, 2014

  • Fixed issue where config options were required otherwise there would be an error.

###2.2.1 - January 31, 2014

  • Fixed build issue

###2.2.0 - January 29, 2014

  • Added ssm.isActive to allow us to test if a state is active.

###2.1.0 - December 23, 2013

  • Added config option API which allows you to add your own SimpleStateManager config options along with the test to see if they are valid.
  • Rewrote how testing of minWidth and maxWidth is handled to use the new config option API
  • Added new unit tests to improve code coverage

###2.0.3 - October 7, 2013

  • Fixed issue where browser width was not updated correctly

###2.0.2 - September 26, 2013

  • Fixed issue where leave events fired incorrectly

###2.0.1 - September 18, 2013

  • Fixed issue where ssm.js could not be placed in the head of the document

###2.0.0 - September 13, 2013

  • Major API changes to all states mangement methods, please read through the new API documention if upgrading
  • Ability to overlap your states
  • Debug mode removed - replaced with a new debug tool (currently early alpha) which will continue to be expanded to allow better responsive debugging
  • Define min-width and max-width values for each state
  • Easier to extend SSM (it is now encouraged)

###1.3.0 - August 10, 2013

  • Added .removeStates method
  • Added unit tests using QUnit
  • Integrated Travis CI

###1.2.0 - August 9, 2013

  • Added .getState method

###1.1.0 - August 9, 2013

  • Added .removeAllStates method

###1.0.2 - August 6, 2013

  • AMD Support
  • Replaced Debounce with timeout
  • New Site

###1.0.1 - June 24, 2013

  • Added Debounce to SSM (Thanks Kevin)

###1.0.0 - June 22, 2013

  • Initial release

License

License: MIT (http://www.opensource.org/licenses/mit-license.php)

More Repositories

1

AppBoilerplate

A jquery mobile app boilerplate
JavaScript
96
star
2

criticaljs

CriticalJS is a JavaScript library which enables you to improve the perceived performance of your site
JavaScript
9
star
3

jquery-notifications

JavaScript
8
star
4

homebridge-yalealarmsystem

Homebridge plugin for the Yale Smart Burglar Alarm System
JavaScript
8
star
5

gulp-json-to-sass

Gulp wrapper around json-to-sass
JavaScript
7
star
6

DeferJS-Example

A quick example of deferring the loading of main javascript
JavaScript
4
star
7

json-to-sass

Node module that converts json to sass variables
JavaScript
4
star
8

jQuery-Hover-Panels

jQuery hover panels is a plugin for jQuery which enables you to display content using the hover over in a way that works consistently across all browsers.
JavaScript
4
star
9

performancebudget.io

A website for creating and managing performance budgets
TypeScript
3
star
10

element-data-store

Simple library that provides an api to stores data for an element (similar to $.data in jQuery)
JavaScript
3
star
11

tweetcli

a simple twitter command line interface for your web browser
JavaScript
3
star
12

URLmimic

URL mimic is an open source URL shortener
PHP
3
star
13

fixBroken

A simple JavaScript library which will attempt to replace broken images with a placeholder
CSS
3
star
14

yalealarmsystem

Node.js connector for Yale Burglar Alarm System
JavaScript
3
star
15

whatifidrop.com

What If I Drop is a website that enables developers to see what features they gain access to by dropping support for a version of a browser
CSS
3
star
16

jQuery-Plugins

Repository sharing my jQuery plugin work
JavaScript
2
star
17

api.browserfeatures.io

API for finding out what browsers support a particular feature
JavaScript
2
star
18

Responsive-Javascript-Examples

A series of examples for how you can write responsive javascript
CSS
2
star
19

CalcCLI

Command line CLI using Node
JavaScript
1
star
20

spectacle-code-runner-example

An example of how you can have a full blown Node.js repl inside your Spectacle slides
JavaScript
1
star
21

ResponsiveJavascript

CSS
1
star
22

KISJS

Keep it simple javascript
JavaScript
1
star
23

X-Carousel

An open source jQuery Carousel available under the http://creativecommons.org/licenses/by-sa/3.0/ license
JavaScript
1
star
24

ResponsiveJavaScriptTalkExamples

The code examples to go with my talk on ResponsiveJavascript
CSS
1
star
25

DigitalOceanCLI

A simple command line utility for working with Digital Ocean Droplets
JavaScript
1
star
26

spectacle-codemirror

A spectacle implementation of Codemirror
CSS
1
star
27

browserstack-travis-integration-demo

A simple demo of how we would intergrate BrowserStack and TravisCI to perform unit tests
JavaScript
1
star
28

manager-readme

1
star
29

developer.management

Developer Management is my new blog focused on being a manager in the software engineering space. I will be posting about different areas of being a manager including recruitment, people management and stakeholder management.
CSS
1
star