https://github.com/eziomercer/cobo

CoBo - Colorful Border
https://github.com/eziomercer/cobo

Last synced: about 1 month ago
JSON representation

CoBo - Colorful Border

• Host: GitHub
• URL: https://github.com/eziomercer/cobo
• Owner: EzioMercer
• License: mit
• Created: 2020-03-15T22:09:49.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-08T13:53:29.000Z (4 months ago)
• Last Synced: 2024-11-13T16:48:04.234Z (about 1 month ago)
• Language: JavaScript
• Size: 25.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# cobo

**Co**lorful **Bo**rder

## Install

```

npm install cobo --save

```

## Usage

This package contains two files:

 * `cobo.js` -- unminified version for development purposes

 * `cobo.min.js` -- minified production-ready version

Just include either of those files and import `Cobo` in your code.

```js

/**

 * @param {HTMLImageElement} img - Required

 * @param {boolean} [hoverMode] - Optional

 * @param {number} [borderSize] - Optional

 */

Cobo({

    img,

    hoverMode: false,

    borderSize: 8

});

```

`Cobo` offers two modes: `static` (default) and `hover`. To activate `static` mode,

you just need to pass an `HTMLImageElement` in image initialization function:

```js

Cobo({

    img: e.target

})

```

To activate `hover` mode, you need to pass a `hoverMode` parameter too and set to `true`: 

```js

Cobo({

    img: e.target,

    hoverMode: true

})

```

To control border size you need to pass `borderSize` parameter

```js

Cobo({

    img: e.target,

    borderSize: 32

})

```

Calling `Cobo({img: e.target, hoverMode: false})` is equal to calling `Cobo` in `static` mode.

## Example

Insert script `test.js` inside the `head` element of your `index.html` file as module:

```html

    CoBo

    

```

Import `Cobo` from `cobo.min.js` in the file `test.js` 

```js

import Cobo from './cobo.min.js';

```

then set onload function of the image like shown below:

```js

const img = document.createElement('img');

img.src = "/path/to/image";

img.onload = (e) => Cobo({

    img: e.target,

    hoverMode: true,

    borderSize: 16

});

document.body.appendChild(img);

```

## License

GPL-3.0-only