Skip to content

Commit

Permalink
update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
easylogic committed Jul 7, 2019
1 parent 36c9b98 commit 69700bf
Showing 1 changed file with 7 additions and 123 deletions.
130 changes: 7 additions & 123 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Colorpicker With CodeMirror
# Colorpicker With EasyLogic


This project was created to implement a color picker. It implemented basic functions for color and implemented image filters.
Expand All @@ -14,31 +14,19 @@ https://colorpicker.easylogic.studio/



# Sample Image

<img width="500px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/screen-shot.png" />



# Install

## npm

```npm
npm install easylogic-colorpicker
npm install @easylogic/colorpicker
```

## bower

```
bower install easylogic-colorpicker
```

# How to use (for browser)

```
<link rel="stylesheet" href="/easylogic-colorpicker/dist/codemirror-colorpciker.css/>
<script src="/easylogic-colorpicker/dist/easylogic-colorpicker.min.js"></script>
<script src="/@easylogic/colorpicker/dist/easylogic-colorpicker.min.js"></script>
```

# How to use (for require, nodejs)
Expand All @@ -48,125 +36,21 @@ after npm install
## script

```
require( 'easylogic-colorpicker' );
require( '@easylogic/colorpicker' );
or
// es6
import 'easylogic-colorpicker/dist/easylogic-colorpicker.css'
import 'easylogic-colorpicker'
import '@easylogic/colorpicker/dist/easylogic-colorpicker.css'
import '@easylogic/colorpicker'
```

## style

```
<link rel="stylesheet" href="/node_modules/easylogic-colorpicker/dist/easylogic-colorpicker.css">
```

# ColorPicker Options for CodeMirror

## Set option - View mode

```javascript
{
colorpicker : true
}
```

## Set option - Edit mode (open color picker)

```javascript
{
colorpicker : {
mode : 'edit'
}
}
```

## Support short cut (for popup color picker)

It can open color picker on current cursor.

```javascript
{
colorpicker : {
mode : 'edit'
},
extraKeys : {
// when ctrl+k keys pressed, color picker is able to open.
'Ctrl-K' : function (cm, event) {
cm.state.colorpicker.popup_color_picker();
}
}
}
```

## Support custom color paletts (since v1.5)

You can set custom color paletts (ex : material, ...).

```javascript
{
colorpicker : {
mode : 'edit',
colorSets: [
{ name : 'Material', colors : [ '#ffff', 'rgba(255, 255, 0, 0.5)' ] },
{ name : 'My Colors', colors : [ 'red', 'blue', 'white' ] },
{ name : 'Input Colors', edit: true }, // editable
]
}
}
```

<img width="235px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/colorpicker.png" align="absmiddle" />

<img width="235px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/colorpaletts.png" align="absmiddle" />

## Support color scale for palette

```javascript
{
colorpicker : {
mode : 'edit',
colorSets: [
{ name : 'Scale Colors', scale: ['red', 'yellow', 'black'], count : 5 },
]
}
}

```

<img width="235px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/scalecolors-title.png" align="absmiddle" />

<img width="235px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/scalecolors.png" align="absmiddle" />

## Support Sketch Style

```javascript
{
colorpicker : {
mode : 'edit',
type: 'sketch'
}
}

```

<img width="235px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/sketch-type.png" align="absmiddle" />

## Support only Palette Style

```javascript
{
colorpicker : {
mode : 'edit',
type: 'palette'
}
}

<link rel="stylesheet" href="/node_modules/@easylogic/colorpicker/dist/easylogic-colorpicker.css">
```

<img width="235px" src="https://easylogic.github.com/easylogic-colorpicker/resources/image/palette-type.png" align="absmiddle" />

# Developments

Expand Down

0 comments on commit 69700bf

Please sign in to comment.