Skip to content
This repository has been archived by the owner on Feb 17, 2020. It is now read-only.

Latest commit

 

History

History
130 lines (95 loc) · 4.16 KB

readme.md

File metadata and controls

130 lines (95 loc) · 4.16 KB
Raw


iro-transparency-plugin

Adds comprehensive transparency support to iro.js

license version downloads minzip size donate

Features | Installation | Usage | Color API Extras


Features

  • Color picker transparency slider
  • Extends iro.js color API to add support for hsva, hsla, rgba, hex8 and hex4 colors
  • 7kb minified, or less than 2kB minified + gzipped

Installation

Install with NPM

$ npm install iro-transparency-plugin --save

If you are using a module bundler like Webpack or Rollup, import iro-transparency-plugin into your project after iro.js:

Using ES6 modules:

import iro from '@jaames/iro';
import iroTransparencyPlugin from 'iro-transparency-plugin';

Using CommonJS modules:

const iro = require('@jaames/iro');
const iroTransparencyPlugin = require('iro-transparency-plugin');

Download and host yourself

Development version
Uncompressed at around 20kB, with source comments included

Production version
Minified to 8kB

Then add it to the <head> of your page with a <script> tag after iro.js:

<html>
  <head>
    <!-- ... -->
    <script src="./path/to/iro.min.js"></script>
    <script src="./path/to/iro-transparency-plugin.min.js"></script>
  </head>
  <!-- ... -->
</html>

Using the jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/iro-transparency-plugin/dist/iro-transparency-plugin.min.js"></script>

Usage

Register Plugin

After both iro.js and iro-transparency-plugin have been imported/downloaded, the plugin needs to be registered with iro.use:

iro.use(iroTransparencyPlugin);

ColorPicker Setup

The plugin adds a new transparency config option to iro.ColorPicker. If set to true, a transparency slider will be added to the color picker.

var colorPicker = new iro.ColorPicker({
  width: 320,
  color: {r: 255, g: 100, b: 100, a: 1},
  transparency: true
})

Color API Extras

There are also additional color properties for getting / setting the selected color from various color-with-alpha formats. Note that the alpha value should always be between 0 and 1 here.

All of these formats are also supported by the set method and the color picker's color option.

Property Example Format
alpha 0.5
hex8String "#ff0000ff"
rgba { r: 255, g: 0, b: 0, a: 0.5 }
rgbaString "rgba(255, 0, 0, 0.5)"
hsla { h: 360, s: 100, l: 50, a: 0.5 }
hslaString "hsla(360, 100%, 50%, 0.5)"
hsva { h: 360, s: 100, v: 100, a: 0.5 }

© James Daniel