cocoen - GitLite

KO | EN

gitlite — search

#typescript #go #machine-learning #rust #deep-learning #macos #nodejs #java #windows #cli #kubernetes #awesome-list #openai #open-source

cocoen

(★ 247)

Much like the caterpillar, your image will undergo a clear transformation with Cocoen. Making comparison really easy, it’s as straightforward way of seeing your images in a new light.

파일 탐색기

최종 버전 다운로드 (.zip)

- - coveralls.yml
  - formatter.yml
  - push-branch.yml
  - push-main.yml
  - types.yml
- main.js
- manager.js
- preview.js
- extensions.json
- settings.json
- cocoen.d.ts
- cocoen.esm.js
- cocoen.esm.js.map
- cocoen.js
- cocoen.js.map
- build.js
- format.sh
- - cocoen.stories.ts
  - cocoen.test.ts
  - cocoen.ts
- - calculate-element-height.test.ts
  - calculate-element-height.ts
  - calculate-element-width.test.ts
  - calculate-element-width.ts
  - calculate-open-ratio.test.ts
  - calculate-open-ratio.ts
  - calculate-point-from-event.test.ts
  - calculate-point-from-event.ts
  - debounce.test.ts
  - debounce.ts
  - format-percentage-as-string.test.ts
  - format-percentage-as-string.ts
- config.ts
- create.test.ts
- create.ts
- index.ts
- parse.test.ts
- parse.ts
.editorconfig
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.markdownlint.yaml
.markdownlintignore
.npmignore
.npmrc
.nvmrc
.prettierignore
after.jpg
babel.config.js
before.jpg
CHANGELOG.md
dts-bundle-generator.config.js
importsort.config.js
index.html
jest.config.js
LICENSE
package-lock.json
package.json
prettier.config.js
readme.gif
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Cocoen

[![Version](https://img.shields.io/npm/v/cocoen.svg?style=flat-square)](https://www.npmjs.com/package/cocoen?activeTab=versions) [![Downloads](https://img.shields.io/npm/dt/cocoen.svg?style=flat-square)](https://www.npmjs.com/package/cocoen) [![Last commit](https://img.shields.io/github/last-commit/koenoe/cocoen.svg?style=flat-square)](https://github.com/koenoe/cocoen/graphs/commit-activity) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fkoenoe%2Fcocoen%2Fbadge%3Fref%3Dmain&style=flat&label=build&logo=false)](https://actions-badge.atrox.dev/koenoe/cocoen/goto?ref=main) [![Coverage Status](https://coveralls.io/repos/github/koenoe/cocoen/badge.svg?branch=main&kill_cache=2)](https://coveralls.io/github/koenoe/cocoen?branch=main&kill_cache=1) [![License](https://img.shields.io/github/license/koenoe/cocoen.svg?style=flat-square)](https://github.com/koenoe/cocoen/blob/main/LICENSE)

Touch-enabled before/after slider. Inspired by [before-after.js](https://github.com/jotform/before-after.js).

![Example](https://raw.githubusercontent.com/koenoe/cocoen/main/readme.gif)

## Quick start

[Demo](https://koenromers.com/cocoen/index.html)

## Install

Install with NPM

```bash
npm install cocoen --save
```

Get it from CDN

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Cocoen from CDN</title>
  </head>
  <body>
    <div class="cocoen">
      <img src="img/before.jpg" alt="" />
      <img src="img/after.jpg" alt="" />
    </div>

<script src="https://unpkg.com/cocoen/dist/cocoen.js"></script>

<script>
      Cocoen.parse(document.body);
    </script>
  </body>
</html>
```

Or download the [latest release](https://github.com/koenoe/cocoen/releases).

## Usage

Only the class `cocoen` is mandatory to apply proper default styles:

```html
<div class="cocoen">
  <img src="img/before.jpg" alt="" />
  <img src="img/after.jpg" alt="" />
</div>
```

Include the `cocoen.js` script in your page, and then:

```js
Cocoen.create(document.querySelector('.cocoen'));
```

Multiple Cocoens in one page:

```js
Cocoen.parse(document.body);
```

### Options

Can be passed directly to `Cocoen.create`, like:

```js
Cocoen.create(document.querySelector('.cocoen'), {
  color: '#ff0000',
  orientation: 'vertical',
  start: '75',
});
```

or you can set data attributes in the html:

```html
<div
  class="cocoen"
  data-color="#ff0000"
  data-orientation="vertical"
  data-start="75"
>
  <img src="img/before.jpg" alt="" />
  <img src="img/after.jpg" alt="" />
</div>
```

| Option        | Type   | Description                                                                     |
| ------------- | ------ | ------------------------------------------------------------------------------- |
| `color`       | String | Default: "#fff". Color of drag control                                          |
| `orientation` | String | Default: "horizontal". Orientation of Cocoen, can be 'horizontal' or 'vertical' |
| `start`       | String | Default: "50". The start position of Cocoen as a percentage.                    |

### Events

| Option                          | Description                              |
| ------------------------------- | ---------------------------------------- |
| `cocoen-component:connected`    | Fires when Cocoen mounts                 |
| `cocoen-component:disconnected` | Fires when Cocoen unmounts               |
| `cocoen-component:resized`      | Fires when Cocoen dimensions are updated |
| `cocoen-component:updated`      | Fires when Cocoen is updated             |
| `cocoen-component:visible`      | Fires when Cocoen is in viewport         |

## License

The code and the documentation are released under the [MIT License](LICENSE).