open-index/open-npm huggingface dataset:
npm package: @inotom/expand-controller
Description: Toggle expand state script.
Author: inotom
Latest version: 2.0.0

# expand-controller

The open / close state of the operation target element is switched by the click event of the handler element.

When switching elements, `aria-expanded` and `aria-hidden` attributes are automatically set.


## Demo

[Demo](https://sandbox.serendip.ws/expand-controller.html)


## Install

```
$ npm install -D @inotom/expand-controller
```


## Usage

### Browser

```html
<script src="expand-controller.min.js"></script>
<script>
ExpandController.expandController();
</script>
```


### Node.js

```js
import { expandController } from '@inotom/expand-controller';
expandController();
```


### HTML

Assign `js-expand-controller` class to handler element.

Set `id` of target element to be operated in `aria-controls` attribute of handler element.

```html
<button class="js-expand-controller" aria-controls="exc-1">
  Lorem ipsum
</button>
<div id="exc-1">
  Lorem ipsum dolor sit amet
</div>
```

To start in the open state, specify `true` in the `aria-expanded` attribute.

```html
<button class="js-expand-controller" aria-controls="exc-1" aria-expanded="true">
  Lorem ipsum
</button>
<div id="exc-1">
  Lorem ipsum dolor sit amet
</div>
```

When the height style is not changed, specify `false` in the `data-enable-height-style` attribute of the target element.

```html
<button class="js-expand-controller" aria-controls="exc-1">
  Lorem ipsum
</button>
<div id="exc-1" data-enable-height-style="false">
  Lorem ipsum dolor sit amet
</div>
```

To operate multiple target elements, specify the `id` of the target element in `aria-controls` separated by a space.

```html
<button class="js-expand-controller" aria-controls="exc-1 exc-2">
  Lorem ipsum
</button>
<div id="exc-1">
  Lorem ipsum dolor sit amet
</div>
<div id="exc-2">
  Ut enim ad minim veniam
</div>
```

For elements other than `button`, if the `role="button"` attribute is added, it operates with the `Enter/Space` key press event.

```html
<div class="js-expand-controller" aria-controls="exc-1" role="button" tabindex="0">
  Lorem ipsum
</div>
<div id="exc-1">
  Lorem ipsum dolor sit amet
</div>
```

When the value of `prevent` or `stop` is set in `data-disable-events` attribute in anchor element, etc., `preventDefault` and `stopPropagation` are executed.

```html
<a class="js-expand-controller" href="#" aria-controls="exc-1" role="button" tabindex="0" data-disable-events="prevent stop">
  Lorem ipsum
</a>
<div id="exc-1">
  Lorem ipsum dolor sit amet
</div>
```


## Options

```js
expandController({
  // selector name (default: .js-expand-controller)
  selector: '.js-custom-expand-controller',
});
```


## License

MIT


## Author

inotom
npm package: @inotom/ja-kana-convert
Description: Convert hiragana/katakana string.
Author: inotom
Latest version: 2.0.0

# ja-kana-convert

Convert hiragana/katakana string.


## Install

```
$ npm install -D @inotom/ja-kana-convert
```


## Usage

### Browser

```html
<script src="ja-kana-convert.min.js"></script>
<script>
console.log(JaKanaConvert.toKatakana('ひらがなをカタカナに'));
console.log(JaKanaConvert.toHiragana('カタカナをひらがなに'));
</script>
```

### Node.js

```js
import { toKatakana, toHiragana } from '@inotom/ja-kana-convert';
console.log(toKatakana('ひらがなをカタカナに'));
console.log(toHiragana('カタカナをひらがなに'));
```


## License

MIT


## Author

inotom
npm package: @inotom/responsive-clickable-area-map
Description: A clickable area map script for responsive web design.
Author: inotom
Latest version: 1.2.0

# @inotom/responsive-clickable-area-map

A clickable area map script for responsive web design.


## Demo

[Demo](http://sandbox.serendip.ws/responsive-clickable-area-map.html)


## Install

### npm

```
npm install -D @inotom/responsive-clickable-area-map
```


## Usage

### Browser

```html
<script src="responsive-clickable-area-map.min.js"></script>
<script>
ResponsiveClickableAreaMap.responsiveClickableAreaMap('img[usemap]');
</script>
```


### ES module

```js
import { responsiveClickableAreaMap } from '@inotom/responsive-clickable-area-map';

window.addEventListener('load', () => {
  responsiveClickableAreaMap('img[usermap]');
});
```

## License

MIT


## Author

inotom
npm package: @inotom/smoothscroll
Description: Smooth scrolling fragment links.
Author: inotom
Latest version: 2.2.0

# @inotom/smoothscroll

Smooth scrolling fragment links.


## Demo

[Demo](http://sandbox.serendip.ws/smoothscroll.html)


## Install

### npm

```
npm install -D @inotom/smoothscroll
```


## Usage

### Browser

```html
<script src="smoothscroll.min.js"></script>
<script>
  SmoothScroll.smoothScroll();
</script>
```


### ES module

```js
import { smoothScroll } from '@inotom/smoothscroll';

window.addEventListener('load', () => {
  smoothScroll();
});
```

## License

MIT


## Author

inotom
npm package: @inotom/switcher
Description: Change layer element height by handle element click.
Author: inotom
Latest version: 1.4.0

# @inotom/switcher

Change layer element height by handle element click.


## Demo

[Demo](http://sandbox.serendip.ws/switcher.html)


## Install

### npm

```
npm install -D @inotom/switcher
```


## Usage

### Browser

```html
<script src="switcher.min.js"></script>
<script>
  Switcher.switcher();
</script>
```


### ES module

```js
import { switcher } from '@inotom/switcher';

window.addEventListener('load', () => {
  switcher();
});
```


### HTML

Set a same string key to `data-switcher-handle` and `data-switcher-layer` attributes.

The `is-active` attribute of these elements are toggled , when clicking `*[data-switcher-handle]` element.

The `is-active` attribute of these elements are removed, when clicking `*[data-switcher-close]` element.

```html
<div>
  <a data-switcher-handle="SOME_KEY" href="#">Handle</a>
</div>
<div data-switcher-layer="SOME_KEY">
  Content
</div>
```


Overwrite `changeHeight` option for each elemetns, by `data-switcher-change-height` data attribute.

```html
<div>
  <a data-switcher-handle="SOME_KEY" href="#">Handle</a>
</div>
<div data-switcher-layer="SOME_KEY" data-switcher-change-height="true">
  Content
</div>
<script src="switcher.min.js"></script>
<script>
  Switcher.switcher({
    changeHeight: false,
  });
</script>
```


## Options

| name | type | defaults | description |
|------|------|----------|-------------|
| `changeHeight` | `Boolean` | `true` | Change layer element height value |
| `activeAttribute` | `String` | `is-active` | Active handle/layer element attribute name |


### Example options

```js
switcher({
  changeHeight: false,
  activeAttribute: 'is-custom-active',
});
```


## License

MIT


## Author

inotom
npm package: @inotom/sws-icons
Description: A web components to display icons
Author: inotom
Latest version: 1.0.0

# sws-icons

A web components to display the status indicator.


## Demo

[Demo](https://sandbox.serendip.ws/sws-icons.html)


### sws-cross

#### Usage

Place `sws-cross` custom element.

```html
<sws-cross></sws-cross>
<script type="module" src="sws-icons.umd.js" defer></script>
```

Set element's style etc... by css custom properties.

```css
sws-cross {
  --sws-cross-position: relative;
  --sws-cross-size: 24px;
  --sws-cross-color: currentColor;
  --sws-cross-line-weight: 2px;
  --sws-cross-line-border-radius: 0;
  --sws-cross-transition: transform .3s;
  --sws-cross-horizontal-line-deg: 0deg;
  --sws-cross-vertical-line-deg: 90deg;
}
```


### sws-hamburger

#### Usage

Place `sws-hamburger` custom element.

```html
<sws-hamburger></sws-hamburger>
<script type="module" src="sws-icons.umd.js" defer></script>
```

Set element's style etc... by css custom properties.

```css
sws-hamburger {
  --sws-hamburger-display: flex;
  --sws-hamburger-flex-direction: column;
  --sws-hamburger-justify-content: center;
  --sws-hamburger-align-items: center;
  --sws-hamburger-gap: 0;
  --sws-hamburger-position: relative;
  --sws-hamburger-width: 60px;
  --sws-hamburger-height: var(--sws-hamburger-width);
  --sws-hamburger-padding: 10px;
  --sws-hamburger-fg-color: currentColor;
  --sws-hamburger-bg-color: initial;
  --sws-hamburger-lines-bg-color: initial;
  --sws-hamburger-line-align: center;
  --sws-hamburger-line-weight: 3px;
  --sws-hamburger-line-margin: 10px;
  --sws-hamburger-line-border-radius: 0;
  --sws-hamburger-line-transition: transform .3s;
  --sws-hamburger-line-1-opacity: 1;
  --sws-hamburger-line-2-opacity: 1;
  --sws-hamburger-line-3-opacity: 1;
  --sws-hamburger-line-1-width: 100%;
  --sws-hamburger-line-2-width: 100%;
  --sws-hamburger-line-3-width: 100%;
  --sws-hamburger-line-1-color: var(--sws-hamburger-fg-color);
  --sws-hamburger-line-2-color: var(--sws-hamburger-fg-color);
  --sws-hamburger-line-3-color: var(--sws-hamburger-fg-color);
  --sws-hamburger-line-1-transform: translateY(
    calc((var(--sws-hamburger-line-weight) + var(--sws-hamburger-line-margin)) * -1)
  );
  --sws-hamburger-line-2-transform: initial;
  --sws-hamburger-line-3-transform: translateY(
    calc(var(--sws-hamburger-line-weight) + var(--sws-hamburger-line-margin))
  );
  --sws-hamburger-label-width: 100%;
  --sws-hamburger-label-bg-color: initial;
}
```


### sws-angle

#### Usage

Place `sws-angle` custom element.

```html
<sws-angle></sws-angle>
<script type="module" src="sws-icons.umd.js" defer></script>
```

Set element's style etc... by css custom properties.

```css
sws-angle {
  --sws-angle-position: relative;
  --sws-angle-size: 30px;
  --sws-angle-color: currentColor;
  --sws-angle-triangle-color: none;
  --sws-angle-line-weight: 2px;
  --sws-angle-transform: none;
  --sws-angle-transform-origin: 50% 50% 0;
  --sws-angle-transition: transform .3s;
}
```


## License

MIT


## Author

inotom
npm package: @inotom/sws-nav-drawer
Description: Toggle root element attribute for navigation drawer.
Author: inotom
Latest version: 2.1.0

# @inotom/sws-nav-drawer

Toggle root element attribute for navigation drawer.


## Demo

[Demo](https://sandbox.serendip.ws/sws-nav-drawer.html)


## Install

### npm

```
npm install -D @inotom/sws-nav-drawer
```


## Usage

### Browser

```html
<script src="sws-nav-drawer.min.js"></script>
<script>
SwsNavDrawer.swsNavDrawer();
</script>
```

### ES module

```js
import { swsNavDrawer } from '@inotom/sws-nav-drawer';

swsNavDrawer();
```


## Options

| name             | type     | defaults                    | description                              |
|------------------|----------|-----------------------------|------------------------------------------|
| `key`            | `String` | `is-sws-nav-drawer-active`  | Root element attribute name              |
| `toggleSelector` | `String` | `.js-sws-nav-drawer-toggle` | Selector for toggle event handle element |
| `closeSelector`  | `String` | `.js-sws-nav-drawer-close`  | Selector for close event handle element  |

### example

```js
swsNavDrawer({
  key: 'some-key-string',
  toggleSelector: '.js-some-toggle-selector',
  closeSelector: '.js-some-close-selector',
});
```

## License

MIT


## Author

inotom
npm package: @inotom/sws-ripple-box
Description: A web Components to add ripple animation to some element.
Author: inotom
Latest version: 1.1.0

# sws-ripple-box

A web Components to add ripple animation to some element.


## Demo

[Demo](http://sandbox.serendip.ws/sws-ripple-box.html)


## Usage

Place `sws-ripple-box` custom element.

```html
<sws-ripple-box>
  <div>
    Hello World
  </div>
</sws-ripple-box>
<script type="module" src="sws-ripple-box.min.js"></script>
```

Set element's style etc... by css custom properties.

```css
sws-ripple-box {
  --sws-ripple-box-color: rgba(255, 255, 255, 0.5);
  --sws-ripple-box-border-radius: 100%;
  --sws-ripple-box-scale-up-size: 1.2;
  --sws-ripple-box-shadow-blur-radius: 10px;
  --sws-ripple-box-shadow-spread-radius: 2.5px;
  --sws-ripple-box-animation-duration: 2000ms;
  --sws-ripple-box-animation-delay: 1000ms;
  --sws-ripple-box-animation-count: infinite;
  --sws-ripple-box-animation-timing-function: ease-out;
  --sws-ripple-box-clip-path: none;
}
```


## CSS custom properties

| css custom property name                     | content                         |  defaults                  |
|:---------------------------------------------|:--------------------------------|:---------------------------|
| `--sws-ripple-box-color`                     | Ripple box-shadow color         | `rgba(255, 255, 255, 0.5)` |
| `--sws-ripple-box-border-radius`             | Box border-radius               | `100%`                     |
| `--sws-ripple-box-scale-up-size`             | Ripple transform scale up size  | `1.2`                      |
| `--sws-ripple-box-shadow-blur-radius`        | Ripple box-shadow blur radius   | `10px`                     |
| `--sws-ripple-box-shadow-spread-radius`      | Ripple box-shadow sperad radius | `2.5px`                    |
| `--sws-ripple-box-animation-duration`        | Animation duration              | `2000ms`                   |
| `--sws-ripple-box-animation-delay`           | Animation delay                 | `1000ms`                   |
| `--sws-ripple-box-animation-count`           | Animation count                 | `infinite`                 |
| `--sws-ripple-box-animation-timing-function` | Animation timing function       | `ease-out`                 |
| `--sws-ripple-box-clip-path`                 | Limit the range of mouse events | `none`                     |


## Options

```html
<sws-ripple-box
  mode="static"
>
  <div>
    Hello World
  </div>
</sws-ripple-box>
```

| option name | content                                                           | defaults |
|:------------|:------------------------------------------------------------------|:---------|
| `mode`      | If `static` is set, it will be played automatically and infinite. | ``       |


## License

MIT


## Author

inotom
npm package: @inotom/sws-smoothscroll
Description: Smooth scrolling fragment links script for browsers.
Author: inotom
Latest version: 2.1.0

# @inotom/sws-smoothscroll

Smooth scrolling fragment links script for browsers.


## Demo

[Demo](https://sandbox.serendip.ws/sws-smoothscroll.html)


## Install

```html
<script src="sws-smoothscroll.min.js" defer></script>
```


## License

MIT


## Author

inotom
npm package: @inotom/vue-curve-text
Description: A Vue.js component that makes text align with the SVG curve.
Author: inotom
Latest version: 3.0.0

# vue-curve-text

A Vue.js component that makes text align with the SVG curve.

From v3.0.0, it works for Vue 3.

## Demo

[Demo](https://sandbox.serendip.ws/vue-curve-text.html)


## Screenshot

![](https://raw.githubusercontent.com/inotom/vue-curve-text/v3.0.0/vue-curve-text.png)


## Install

### Browser

```html
<script src="vue.global.prod.js"></script>
<script src="vue-curve-text.umd.js"></script>
```

### npm

```
npm install --save @inotom/vue-curve-text
```


## Usage

### Browser

```html
<div id="app">
  <curve-text>Hello, World!</curve-text>
  <curve-text
    :width="300"
    :height="100"
    :r="50"
    offset="30%"
    textid="my-curve-text"
    color="#f00"
    :debug="true">Hello, World!</curve-text>
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-curve-text.umd.js"></script>
<script>
const { createApp } = Vue;
const { CurveText } = SwsVueCurveText;

createApp({
  components: {
    CurveText,
  },
}).mount('#app');
</script>
```


### SFC (TypeScript)

```vue
<template>
  <div>
    <curve-text>Hello, World!</curve-text>
    <curve-text
      :width="300"
      :height="100"
      :r="50"
      offset="30%"
      textid="my-curve-text"
      color="#f00"
      :debug="true">Hello, World!</curve-text>
  </div>
</template>

<script setup lang="ts">
import { CurveText } from '@inotom/vue-curve-text';
</script>
```


## Props

| Props      | Type     | Default          | Description           |
|------------|----------|------------------|-----------------------|
| `:width`   | Number   | `200`            | Svg box width         |
| `:height`  | Number   | `50`             | Svg box height        |
| `:r`       | Number   | `25`             | Curve height          |
| `offset`   | String   | `"50%"`          | Text start position   |
| `textid`   | String   | `""`             | Text anchor id        |
| `color`    | String   | `"currentColor"` | Text color            |
| `:debug`   | Boolean  | `false`          | Show curve line       |


## License

MIT


## Author

inotom
npm package: @inotom/vue-fold-box
Description: A Vue.js component of folding container.
Author: inotom
Latest version: 2.0.0

# vue-fold-box

A Vue.js component of folding container.

From v2.0.0, it works for Vue 3.

## Demo

[Demo](https://sandbox.serendip.ws/vue-fold-box.html)


## Install

### Browser

```html
<script src="vue.global.prod.js"></script>
<script src="vue-fold-box.umd.js"></script>
```


### npm

```
npm install --save @inotom/vue-fold-box
```


## Usage

### Browser

```html
<div id="app">
  <fold-box>
    <template #handle>
      Handle
    </template>
    <template #content>
      Content
    </template>
  </fold-box>
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-fold-box.umd.js"></script>
<script>
const { createApp } = Vue;
const { FoldBox } = SwsVueFoldBox;

createApp({
  components: {
    FoldBox,
  },
}).mount('#app');
</script>
```


### SFC (TypeScript)

```vue
<template>
  <fold-box>
    <template #handle>
      Handle
    </template>
    <template #content>
      Content
    </template>
  </fold-box>
</template>

<script setup lang="ts">
import { FoldBox } from '@inotom/vue-fold-box';
</script>
```


## Props

| Props                | Type      | Default         | Description                            |
|----------------------|-----------|-----------------|----------------------------------------|
| `is-initial-open`    | `Boolean` | `false`         | Initial folding state                  |
| `block-name`         | `String`  | `"fold-box"`    | Custom class name (Block of BEM)       |
| `animation-duration` | `Number`  | `300`           | Folding animation duration (ms)        |
| `animation-easing`   | `String`  | `"ease-in-out"` | Folding animation easing function name |


## License

MIT


## Author

inotom
npm package: @inotom/vue-rating-star
Description: Rating star icon, Vue.js component.
Author: inotom
Latest version: 2.0.0

# vue-rating-star

Rating star icon, Vue.js component.

From v2.0.0, it works for Vue 3.

## Demo

[Demo](https://sandbox.serendip.ws/vue-rating-star.html)


## Install

### Browser

```html
<script src="vue.global.prod.js"></script>
<script src="vue-rating-star.umd.js"></script>
```


### npm

```
npm install --save @inotom/vue-rating-star
```


## Usage

### Browser

```html
<div id="app">
  <rating-star></rating-star>
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-rating-star.umd.js"></script>
<script>
const { createApp } = Vue;
const { RatingStar } = SwsVueRatingStar;

createApp({
  components: {
    RatingStar,
  },
}).mount('#app');
</script>
```


### SFC (TypeScript)

```vue
<template>
  <rating-star></rating-star>
</template>

<script setup lang="ts">
import RatingStar from '@inotom/vue-rating-star';
</script>
```


## Props

| name             | type      | defaults | description                    |
|------------------|-----------|----------|--------------------------------|
| `:max-value`     | `Number`  | `5`      | Number of stars                |
| `:initial-value` | `Number`  | `0`      | Initial rating number          |
| `:star-size`     | `Number`  | `30`     | Star icon width/height         |
| `color`          | `String`  | `ffcc00` | Star icon color                |
| `bg-color`       | `String`  | `cccccc` | Star icon background-color     |
| `stroke-color`   | `String`  | `000000` | Star icon stroke color         |
| `:has-stroke`    | `Boolean` | `false`  | Enable star icon stroke        |
| `:is-readonly`   | `Boolean` | `false`  | Disable rating status changing |


## License

MIT

## Author

inotom
npm package: @inotom/vue-roll-number
Description: Number changing animation Vue.js component.
Author: inotom
Latest version: 2.0.0

# vue-roll-number

Number changing animation Vue.js component.

From v2.0.0, it works for Vue 3.

## Demo

[Demo](https://sandbox.serendip.ws/vue-roll-number.html)


## Install

### Browser

```html
<script src="vue.global.prod.js"></script>
<script src="vue-roll-number.umd.js"></script>
```


### npm

```
npm install --save @inotom/vue-roll-number
```


## Usage

### Browser

```html
<div id="app">
  <roll-number number-value="1,920" />
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-roll-number.umd.js"></script>
<script>
const { createApp } = Vue;
const { RollNumber } = SwsVueRollNumber;

createApp({
  components: {
    RollNumber,
  },
}).mount('#app');
</script>
```


### SFC (TypeScript)

```vue
<template>
  <roll-number number-value="1,920" />
</template>

<script setup lang="ts">
import { RollNumber } from '@inotom/vue-roll-number';
</script>
```

## Props

| name              | type     | defaults      | description                 |
|-------------------|----------|---------------|-----------------------------|
| `number-value`    | `String` | ``            | Numbar value (required)     |
| `:anim-duration`  | `Number` | `3000`        | Animation duration time(ms) |
| `:anim-interval`  | `Number` | `10`          | Animation interval time(ms) |
| `block-name`      | `String` | `roll-number` | Custom class name           |


## License

MIT


## Author

inotom
npm package: @inotom/vue-svg-loading
Description: SVG loading animation Vue.js component.
Author: inotom
Latest version: 3.0.0

# @inotom/vue-svg-loading

SVG loading animation Vue.js component.

From v3.0.0, it works for Vue 3.

## Demo

[Demo](https://sandbox.serendip.ws/vue-svg-loading.html)


## Install

### Browser

```html
<script src="vue.global.prod.js"></script>
<script src="vue-svg-loading.umd.js"></script>
```


### npm

```
npm install --save @inotom/vue-svg-loading
```


## Usage

### Browser

```html
<div id="app">
  <svg-loading></svg-loading>
  <svg-spinner></svg-spinner>
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-svg-loading.umd.js"></script>
<script>
const { createApp } = Vue;
const { SvgLoading, SvgSpinner } = SwsVueSvgLoading;

createApp({
  components: {
    SvgLoading,
    SvgSpinner,
  },
}).mount('#app');
</script>
```


### SFC (TypeScript)

```vue
<script setup lang="ts">
import { SvgLoading, SvgSpinner } from '@inotom/vue-svg-loading';
</script>

<template>
  <svg-loading></svg-loading>
  <svg-spinner></svg-spinner>
</template>
```


## Props

### svg-loading

| name    | type     | defaults | description              |
|---------|----------|----------|--------------------------|
| `:size` | `Number` | `50`     | width/height pixel size  |
| `fill`  | `String` | `#666`   | SVG fill color           |


### svg-spinner

| name     | type     | defaults | description                          |
|----------|----------|----------|--------------------------------------|
| `size`   | `number` | `50`     | width/height pixel size              |
| `weight` | `number` | `5`      | SVG spinner circle weight pixel size |
| `fill`   | `String` | `#666`   | SVG spinner circle  color            |


## License

MIT


## Author

inotom
npm package: @inottn/carousel
Description: A simple html5 carousel plugin
Author: inottn
Latest version: 0.2.1

# carousel

> 一个简单的，易于上手的轮播图插件

[![npm](https://img.shields.io/npm/v/@inottn/carousel.svg?style=flat-square)](https://www.npmjs.com/package/@inottn/carousel)
![npm](https://img.shields.io/npm/l/@inottn/carousel.svg?style=flat-square)

**[文档](https://inottn.github.io/carousel/)**
npm package: @inottn/fp-utils
Description: A js utils library
Author: inottn
Latest version: 0.4.3

<p align="center">
  <img alt="logo" src="https://fastly.jsdelivr.net/npm/@inottn/assets/fp-utils/logo.svg" width="420" style="margin-bottom: 10px;">
</p>

<p align="center">A js utils library</p>

## Install

Using `pnpm` to install:

```bash
pnpm add @inottn/fp-utils
```

Using `yarn` or `npm`:

```bash
# with yarn
yarn add @inottn/fp-utils

# with npm
npm i @inottn/fp-utils
```
npm package: @inottn/infinity-flow
Description: A high-performance, native JavaScript library for creating seamless infinite horizontal scrolling effects (marquee)
Author: inottn
Latest version: 0.1.0

# InfinityFlow - JS Marquee Library

[English](./README.md)

**InfinityFlow** 是一个高性能的原生 JavaScript 库，用于创建无缝的无限横向滚动效果（跑马灯）。它内置了拖拽交互和惯性效果，带来自然且现代的用户体验。

### 特性

- 🚀 **零依赖**: 使用纯原生 TypeScript 编写。
- ⚡️ **高性能**: 流畅运行，丝滑体验。
- 🖱️ **物理拖拽**: 支持鼠标和触摸拖拽，松开时带有惯性效果。
- ♾️ **无缝循环**: 完美循环，自然衔接。
- 📱 **响应式**: 在桌面端和移动端都能完美运行。
- 🔧 **高度可配**: 可控制速度、方向、间距以及悬停暂停行为。

## 安装

通过 npm、yarn 或 pnpm 安装：

```bash
npm install @inottn/infinity-flow
```

```bash
yarn add @inottn/infinity-flow
```

```bash
pnpm add @inottn/infinity-flow
```

## 使用方法

### 1. HTML 结构

库需要一个包含子元素的容器。它会自动将子元素包裹在一个轨道（track）中。

```html
<div id="my-marquee">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
</div>
```

### 2. 初始化

```typescript
import InfinityFlow from "@inottn/infinity-flow";

const container = document.getElementById("my-marquee");
const flow = new InfinityFlow(container, {
  speed: 1.5,
  direction: "left",
  gap: 20,
  pauseOnHover: true,
});
```

### 3. 配置选项

所有配置选项都是可选的。以下是可用的配置项：

| 选项           | 类型                | 默认值   | 说明                                                          |
| -------------- | ------------------- | -------- | ------------------------------------------------------------- |
| `speed`        | `number`            | `1`      | 滚动速度，单位为像素/帧。推荐范围：0.5-5。数值越大滚动越快。  |
| `direction`    | `"left" \| "right"` | `"left"` | 滚动方向。`"left"` 表示内容向左滚动，`"right"` 表示向右滚动。 |
| `gap`          | `number`            | `20`     | 元素之间的间距，单位为像素。必须为非负数。                    |
| `pauseOnHover` | `boolean`           | `true`   | 当用户鼠标悬停在容器上时，是否暂停自动滚动。                  |

### 4. API 方法

#### `play(): void`

开始或恢复滚动动画。在初始化后或暂停后调用此方法。

```typescript
flow.play();
```

#### `pause(): void`

暂停滚动动画。当前位置会被保留。

```typescript
flow.pause();
```

#### `updateOptions(options: Partial<InfinityFlowOptions>): void`

动态更新一个或多个配置选项。跑马灯会立即适应新的设置。

**参数：**

- `options`: 包含要更新的选项的对象。只有指定的选项会被修改。

```typescript
// 修改速度和方向
flow.updateOptions({
  speed: 3,
  direction: "right",
});

// 仅更新间距
flow.updateOptions({ gap: 40 });
```

**注意：** 修改 `gap` 选项会触发内容的重新布局。

#### `destroy(): void`

完全清理跑马灯实例：

- 停止所有动画
- 移除所有事件监听器
- 恢复原始的 DOM 结构和样式
- 断开 ResizeObserver 连接

当不再需要跑马灯时调用此方法，以防止内存泄漏。

```typescript
flow.destroy();
```

**重要提示：** 调用 `destroy()` 后，实例无法重用。如需再次使用，必须创建新的 `InfinityFlow` 实例。

## 浏览器兼容性

InfinityFlow 适用于所有支持以下特性的现代浏览器：

- ES6+ JavaScript
- `requestAnimationFrame`
- CSS `transform` 和 `translate3d`
- Pointer Events API
- ResizeObserver API

## TypeScript 支持

InfinityFlow 使用 TypeScript 编写，内置完整的类型定义。

```typescript
import InfinityFlow, { type InfinityFlowOptions } from "@inottn/infinity-flow";

const options: InfinityFlowOptions = {
  speed: 2,
  direction: "left",
  gap: 20,
  pauseOnHover: true,
};

const flow = new InfinityFlow(container, options);
```

## 许可证

MIT
npm package: @inoue2002/xmind-mcp
Description: MCP server for creating and managing XMind mind maps
Author: Yousuke Inoue
Latest version: 1.2.0

# XMind MCP Server

TypeScript製のXMindマインドマップを作成・管理するためのMCPサーバーです。

## 機能

- マインドマップの作成
- トピック（ノード）の追加
- マインドマップ構造の取得
- XMind形式でのファイル保存
- 既存のXMindファイルの読み込み
- マインドマップ一覧の表示

## インストール

```bash
claude mcp add xmind npx -- -y @inoue2002/xmind-mcp
```

## 利用可能なツール

### 1. create_mindmap
新しいマインドマップを作成します。

```json
{
  "title": "プロジェクト計画",
  "rootTitle": "メイントピック"
}
```

### 2. add_topic
既存のトピックに新しいトピックを追加します。

```json
{
  "mindMapId": "mindmap_1",
  "parentTopicId": "topic_1",
  "title": "サブトピック"
}
```

### 3. get_mindmap
マインドマップの構造を取得します。

```json
{
  "mindMapId": "mindmap_1"
}
```

### 4. list_mindmaps
作成したマインドマップの一覧を表示します。

```json
{}
```

### 5. save_mindmap
マインドマップをXMindファイルとして保存します。

```json
{
  "mindMapId": "mindmap_1",
  "filePath": "/path/to/output.xmind"
}
```

### 6. load_mindmap
既存のXMindファイルを読み込んで編集可能にします。

```json
{
  "filePath": "/path/to/existing.xmind"
}
```

## 開発

```bash
# ビルド
npm run build

# ウォッチモード
npm run watch

# 実行
npm start
```

## ライセンス

MIT
npm package: @inoueke-n/sairi-common
Description: Fine-grained edit history collection platform: utility
Latest version: 0.6.0

# sairi-common

This repository is a utility library for the fine-grained edit history collection platform.

## Fine-grained edit history collection platform

### Overview

This platform enables users to collect fine-grained edit history from various code editors through the language-server protocol.

![overview](./doc/overview.png)

### Modules

#### [inoueke-n/sairi-common](https://github.com/inoueke-n/sairi-common)

A utility library.

#### [inoueke-n/sairi-plugin-for-vscode](https://github.com/inoueke-n/sairi-plugin-for-vscode)

Basic implementation of a fine-grained edit history collector.
This repository contains following three modules.

* LSP-extended
  * An extended protocol which defines requests for collecting edit history.
* server
  * A language server module.
* sairi-collector
  * VS Code plugin to collect a fine-grained edit history via the language server above.

#### [inoueke-n/sairi-plugin-for-eclipse](https://github.com/inoueke-n/sairi-plugin-for-eclipse)

An Eclipse plugin of a fine-grained edit history collector. Depends on the language server above.

#### [inoueke-n/sairi-backend](https://github.com/inoueke-n/sairi-backend)

A server module to store and load collected edit history.

### Related articles

* Sentaro Onizuka, Tetsuya Kanda, Katsuro Inoue: "Comparison of Developer's Work Efficiency Between Different Editors", Proceedings of the 29th Asia-Pacific Software Engineering Conference (APSEC2022) Poster session, pp.572-573, Nov. 2022
* (Japanese article) 石田 直人, 神田 哲也, 嶋利 一真, 井上 克郎: "言語サーバを応用した細粒度編集履歴収集プラットフォームの構想", ソフトウェアエンジニアリングシンポジウム2020 ワークショップ (SES 2020 WS5), 2020年9月

## Usage

```sh
npm i @inoueke-n/sairi-common@0.6.0
```

## Build

```sh
npm install
npm run build
```
npm package: @inoueke-n/sairi-lsp
Description: Fine-grained edit history collection platform: protocol
Latest version: 0.6.0

# LSP-extended

This repository defines a protocol for the fine-grained edit history collection platform.
For overview, please see the repository: [inoueke-n/sairi-common](https://github.com/inoueke-n/sairi-common).

## Usage

```sh
npm i @inoueke-n/sairi-lsp@0.6.0
```

## Build

```sh
npm install
npm run build
```
npm package: @inoutch/semantic-release-demo
Description: [![CircleCI](https://circleci.com/gh/inoutch/semantic-release-demo.svg?style=shield)](https://circleci.com/gh/inoutch/semantic-release-demo)
Latest version: 2.2.2

# semantic-release-demo
[![CircleCI](https://circleci.com/gh/inoutch/semantic-release-demo.svg?style=shield)](https://circleci.com/gh/inoutch/semantic-release-demo)

### semantic-releaseとは?

- gitコミットのコメントから, 次のバージョンやリリースノートを自動的に生成
- npmレポジトリへ自動でpublishする

https://github.com/semantic-release/semantic-release

### デモの内容
- npmレポジトリに自作のライブラリ(helloModules)をpublsihすることを想定

## semantic-releaseの流れ(デモ)
- GitHubのWebhookにてCircleCIを走らせる
- CircleCIでテストを走らせる

  ```
  $ npm run test
  ```

- CIがパスするとsemantic-releaseが走り, GitHubとnpmにpublishされる

  ```
  npm run semantic-release
  ```

## その他
- Release Noteの自動生成といったGitHub連携のために, CIで環境変数`$GH_TOKEN`の設定が必要
- npmレポジトリへのpublishにも, CIで環境変数`$NPM_TOKEN`の設定が必要
npm package: @inova/semver
Description: version management for git repos
Author: Admir Ramic
Latest version: 1.0.0

# semver

CLI for managing semantic versioning in git repos.

## Installation

**Local :**
For [node](https://nodejs.org/en/about/) projects we recommend installing @inova/semver locally and running the semver command with npx: `npm install --save-dev @inova/semver`

Then in the CI environment: `npx semver bump`

**Global :**
For other project types you can install @inova/semver globally: `npm install -g @inova/semver`

## Configuration

You can create a `.semver.json` file in the root dir of your workspace, if you like to override the default configuration.

The config options:

**_betaBranchName_**

Name of the branch that produces the beta builds.

Default is set to `main`

**_releaseBranchName_**

Name of the branch that produces the rc and stable builds.
It can be defined as a glob in which case the definition will be expanded to one per matching branch existing in the repository.

Default is set to `releases/*`.

**_commitMessageFormat_**

By default semver uses Angular Commit Message Conventions.
The commit message format can be changed with this `commitMessageFormat` property.

Check [conventional-changelog-preset-loader](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-preset-loader) for further information.

**_releaseCandidate_**

Indicates whether the current branch produces rc builds.
This is only relevant for release branches. Set this to `false` to produce stable builds from your release branch

Default is set to `true`.

**_commitTypesToIgnore_**

Commit types to ignore.

Default: `ci`, `repo`, `docs`, `test`, `chore`, `refactor`, `build`.

## Commands

To show the commands list you can run `npx semver --help` or just `semver --help` if you installed @inova/semver globally.

To see what options the command support run `semver [command] -h` eg. `semver bump -h`.

### `bump`

`semver bump` creates the pending release and applies the release side effects.

For a safe preview of the release flow, use:

```bash
semver bump --dry-run
```

Dry-run mode still performs the read operations required to calculate the release, but it does not modify files, create commits, push changes, or create git tags. Instead, those write operations are reported as informational logs, and the command starts with a warning that dry-run mode is enabled.