-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21 from Applelo/dev
Version 0.8.0
- Loading branch information
Showing
28 changed files
with
1,888 additions
and
1,409 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -104,4 +104,4 @@ | |
Item | ||
</li> | ||
</ul> | ||
</nav> | ||
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# Marquee Demo | ||
|
||
<script setup> | ||
import './../../packages/core/dist/css/marquee.css' | ||
import { Marquee } from './../../packages/core' | ||
import { onMounted } from 'vue' | ||
|
||
onMounted(() => { | ||
const marqueeDefault = new Marquee('#marquee-default', { | ||
fill: true | ||
}) | ||
const marqueeLeft = new Marquee('#marquee-left', { | ||
direction: 'left', | ||
fill: true | ||
}) | ||
const marqueeDown = new Marquee('#marquee-down', { | ||
direction: 'down', | ||
fill: true | ||
}) | ||
const marqueeAlternateEl = document.getElementById('marquee-alternate') | ||
const marqueeAlternate = new Marquee(marqueeAlternateEl, { | ||
behavior: 'alternate' | ||
}) | ||
}) | ||
</script> | ||
<style> | ||
.c-marquee .c-marquee-container { | ||
list-style: none; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
.c-marquee li { | ||
margin: 0!important; | ||
padding: 0 .5rem; | ||
} | ||
</style> | ||
<div id="marquee-default" class="c-marquee" style="margin-top: 2rem;"> | ||
<ul class="c-marquee-container"> | ||
<li>This is the default <a href="#">marquee</a></li> | ||
<li>Marquee or <a href="#">marquii</a></li> | ||
</ul> | ||
</div> | ||
<div id="marquee-left" class="c-marquee" style="margin-top: 2rem;"> | ||
<ul class="c-marquee-container"> | ||
<li>Marquee Left Direction</li> | ||
<li><img width="25" height="25" src="https://vitejs.dev/logo.svg"/></li> | ||
</ul> | ||
</div> | ||
<div id="marquee-down" class="c-marquee" style="margin-top: 2rem; height: 500px;"> | ||
<ul class="c-marquee-container"> | ||
<li>Marquee Bottom Direction</li> | ||
</ul> | ||
</div> | ||
<div id="marquee-alternate" class="c-marquee" style="margin-top: 2rem; width: 100px;"> | ||
<ul class="c-marquee-container"> | ||
<li>Alternate</li> | ||
</ul> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
# Marquee | ||
|
||
The marquee component allows to create an animated text copying the old [marquee](https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee) element with modern support. | ||
|
||
```scss | ||
@import 'compotes/css/marquee'; | ||
``` | ||
|
||
```js | ||
import { Marquee } from 'compotes' | ||
|
||
const marquee = new Drag('.c-marquee') | ||
``` | ||
|
||
The structure consists to a list of element. All animation are CSS based. | ||
|
||
```html | ||
|
||
<div class="c-marquee"> | ||
<ul class="c-marquee-container"> | ||
<li>This is the default marquee</li> | ||
<li>Marquee or marquii</li> | ||
</ul> | ||
</div> | ||
``` | ||
|
||
You are not limited to text. You can also add any kind of valid HTML like image. | ||
|
||
## Accessibility | ||
|
||
- Make the marquee tabbable and stop it if it is in focus via the keyboard | ||
- If the user has configure `prefers-reduced-motion` on his browser, the marquee animation will not be played. | ||
- If you are using the `fill` option, all cloned element will be set to `aria-hidden` to hide the non necessary content to the screen reader and not be tabbable thank to a `tabindex="-1"`. | ||
- If an element is focus with the keyboard, the marquee animation will be stop. | ||
|
||
## Options | ||
|
||
You can access some data from the component. | ||
|
||
```js | ||
import { Drag } from 'compotes' | ||
|
||
const drag = new Drag('.c-drag', { | ||
init: true, // [!code focus:6] | ||
initEvents: true, | ||
fill: false, | ||
direction: 'left', | ||
behavior: 'scroll', | ||
duration: 1 | ||
}) | ||
``` | ||
|
||
- `init` (boolean): Init the component on creation | ||
- `initEvents` (boolean): Init events on the component | ||
- `fill` (boolean): Fill the marquee to make a loop | ||
- `direction` ('left' | 'right' | 'up' | 'down'): Direction of marquee animation | ||
- `behavior` ('scroll' | 'alternate'): The behavior the marquee animation | ||
- `duration` (number or string): The duration of the marquee animation | ||
|
||
## Methods | ||
|
||
The marquee component provides several methods to init and destroy the components. | ||
|
||
```js | ||
import { Marquee } from 'compotes' | ||
|
||
const marquee = new Marquee('.c-marquee', { | ||
init: false | ||
}) | ||
marquee.init()// [!code focus] | ||
``` | ||
|
||
- `init()`: Init the component | ||
- `initEvents()`: Init component events | ||
- `destroyEvents()`: Destroy the component events | ||
- `destroy()`: Destroy the component | ||
- `update()`: Update the marquee component | ||
- `play()`: Play the marquee component | ||
- `pause()`: Pause the marquee component | ||
|
||
## Events | ||
|
||
You can listen to emitted events directly on the marquee element like this: | ||
|
||
```js | ||
import { Marquee } from 'compotes' | ||
|
||
const marquee = new Drag('.c-marquee') | ||
marquee.addEventListener('c.marquee.init', (e) => { // [!code focus:3] | ||
console.log(e.detail)// marquee object | ||
}) | ||
``` | ||
|
||
- `c.marquee.init`: On component init | ||
- `c.marquee.play`: On component drag play | ||
- `c.marquee.pause`: On component drag pause | ||
- `c.marquee.loop`: On component marquee loop | ||
- `c.marquee.destroy`: On component destroy |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,4 +24,3 @@ features: | |
icon: 📠 | ||
details: Typescript for better world | ||
--- | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,4 +20,4 @@ | |
visibility: hidden; | ||
transition-property: visibility; | ||
transition-delay: var(--c-drilldown-delay, 0s); | ||
} | ||
} |
Oops, something went wrong.