grayscaleBody.js

Automatically turn the site to grayscale (may be used for some purpose)

Install

1: npm

1.1 Install npm
1.2 Install package: `npm install --save grayscale-body-js`

2: bower

2.1 Install npm
2.2 Install bower: `npm install -g bower`
2.3 Install package: `bower install --save grayscale-body-js`

Getting Started for dev

1. Install Node.js
2. Set path (e.g. cd C:\xampp\htdocs\jojoee.com\grayscale-body-js)
3. Install global: npm install -g gulp bower browser-sync
4. Install dependencies: bower install && npm install
5. Start: gulp to build and gulp watch to dev

Usage

// init
var option = {
  switcherPosition: 'bottom-right', // string: top-left, top-right, bottom-left, bottom-right
  isEnableSwitcher: true,           // boolean
  isDebug: true,                    // boolean
};

var gsb = new GrayscaleBody(option);

// event
gsb.on('onSwitchersClicked', function() {
  console.log('onSwitchersClicked - callback 1');
});

Feature

• Grayscale / Color switcher (for non-IE)
• 4 switcher positions
• Compatible with all browsers:
  • Google Chrome 19+
  • Mozilla Firefox 3.5+
  • Safari 6+
  • Internet Explorer 8-9
  • Opera 11.5

Note

• 2 spaces for indent

TODO

• Support IE edge
• DocBlockr
• Grayscale opacity customizer
• Unit test
• Separate utilities function into another files
• Add callback event when switcher button's triggered
• Add .npmignore
• Implement ci.testling.com
• Add E2E testing script by Nightwatch.js
• Localization
• Update demo page

Thank you

• Unsplash It