Skip to content

Commit 110f4ce

Browse files
ciampociampo
committed
refactor(name): <x-slider> ==> <macro-carousel>
1 parent 517cbb4 commit 110f4ce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+682
-683
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
npm-debug.log.*
44
node_modules
55
coverage
6-
dist/x-slider-test.js
6+
dist/macro-carousel-test.js

‎README.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# `<x-slider>`
1+
# `<macro-carousel>`
22

3-
[![Build Status](https://travis-ci.org/ciampo/x-slider.svg?branch=master)](https://travis-ci.org/ciampo/x-slider)
4-
[![Coverage Status](https://coveralls.io/repos/github/ciampo/x-slider/badge.svg)](https://coveralls.io/github/ciampo/x-slider)
3+
[![Build Status](https://travis-ci.org/ciampo/macro-carousel.svg?branch=master)](https://travis-ci.org/ciampo/macro-carousel)
4+
[![Coverage Status](https://coveralls.io/repos/github/ciampo/macro-carousel/badge.svg)](https://coveralls.io/github/ciampo/macro-carousel)
55

6-
`<x-slider>` is a carousel (*vanilla*) Web Component ([DEMOS](https://ciampo.github.io/x-slider/demo/))
6+
`<macro-carousel>` is a carousel (*vanilla*) Web Component ([DEMOS](https://ciampo.github.io/macro-carousel/demo/))
77

88
Latest version: `0.9.1`
99

10-
**Please note that this is still a WIP — [wait for version 1.0.0](https://github.com/ciampo/x-slider/milestone/1) !**
10+
**Please note that this is still a WIP — [wait for version 1.0.0](https://github.com/ciampo/macro-carousel/milestone/1) !**
1111

1212
- Compatible with every framework
1313
- Public APIs exposed as methods, events and properties/attributes
@@ -34,48 +34,48 @@ Run `npm run start` to start a local dev server and open the `demo/` page in you
3434

3535
## Usage
3636

37-
Please read the [full documentation](./docs/x-slider.md)
37+
Please read the [full documentation](./docs/macro-carousel.md)
3838

3939
```html
40-
<x-slider>
40+
<macro-carousel>
4141
<div>First slide</div>
4242
<div>Second slide</div>
4343
<div>Third slide</div>
44-
</x-slider>
44+
</macro-carousel>
4545

46-
<script src="x-slider.min.js" defer></script>
46+
<script src="macro-carousel.min.js" defer></script>
4747
```
4848

49-
For more examples, look at the demos ([Live demo](https://ciampo.github.io/x-slider/demo/), [Demo code](./demo/))
49+
For more examples, look at the demos ([Live demo](https://ciampo.github.io/macro-carousel/demo/), [Demo code](./demo/))
5050

5151
## Browser support
5252

5353
### WebComponent Polyfills suite
5454

55-
In order for this Web Component to work on all evergreen browsers, you may need to add the [WebComponent polyfills suite](https://github.com/webcomponents/webcomponentsjs) to your page. (*Please note that this repository focuses on the `x-slider` Web Component, and not on the polyfills*)
55+
In order for this Web Component to work on all evergreen browsers, you may need to add the [WebComponent polyfills suite](https://github.com/webcomponents/webcomponentsjs) to your page. (*Please note that this repository focuses on the `macro-carousel` Web Component, and not on the polyfills*)
5656

57-
All the demos in this repository already make use of the polyfills (by using [`webcomponents-loader.js`](https://github.com/webcomponents/webcomponentsjs#webcomponents-loaderjs)). The source code of the `x-slider` Web Component also makes optional calls to the `ShadyCSS` polyfill.
57+
All the demos in this repository already make use of the polyfills (by using [`webcomponents-loader.js`](https://github.com/webcomponents/webcomponentsjs#webcomponents-loaderjs)). The source code of the `macro-carousel` Web Component also makes optional calls to the `ShadyCSS` polyfill.
5858

5959
Because of the [`ShadyCSS` polyfill limitations](https://github.com/webcomponents/shadycss#limitations), certain style rules are not applied in polyfilled browsers:
6060

6161
- all the rules that rely on the `:host-context()` selector are not polyfilled correctly (these rules are mainly around using the `focus-visible` polyfill)
6262
- some of the more complex selectors using `:host()` are also not supported. This mainly impact the hover/focus states on navigation buttons.
6363
- normally, external styles have the priority over the internal Web Component styles. But sometimes, after the polyfill's transformation, some internal selectors end up having a higher specificity then the external ones. This is quite an edge case, but keep an eye for it (e.g.: the [custom navigation demo](./demo/custom-navigation.html) uses the `!important` keyword to force some styles).
6464

65-
For browsers not supporting ES6 classes, the tranpiled ES5 version can be used instead (`x-slider.es5.min.js`), together with the [`custom-elements-es5-adapter.js`](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) polyfill. The [es5 demo](./demo/es5.html) shows how to do that.
65+
For browsers not supporting ES6 classes, the tranpiled ES5 version can be used instead (`macro-carousel.es5.min.js`), together with the [`custom-elements-es5-adapter.js`](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) polyfill. The [es5 demo](./demo/es5.html) shows how to do that.
6666

6767
As browser support grows and the polyfills improve, these limitations should become less and less frequent and problematic.
6868

6969
### Other known cross-browser limitations
7070

71-
In order to change the color of the navigation button arrow, this project makes use of the `mask-image` CSS property. Unofruntaly, when this CSS feature is not supported, the color defined through `--x-slider-navigation-color-focus` is not going to be applied correctly to the arrow.
71+
In order to change the color of the navigation button arrow, this project makes use of the `mask-image` CSS property. Unofruntaly, when this CSS feature is not supported, the color defined through `--macro-carousel-navigation-color-focus` is not going to be applied correctly to the arrow.
7272

7373
## Test
7474

7575
Run `npm run test` to run all tests.
7676

7777
## Whishlist
7878

79-
Please have a look at [the backlog](https://github.com/ciampo/x-slider/milestone/2) to see the plan for the next releases.
79+
Please have a look at [the backlog](https://github.com/ciampo/macro-carousel/milestone/2) to see the plan for the next releases.
8080

8181
If you have a feature request, feel free to open an issue!

‎demo/add-remove.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Add/Remove slide - x-slider demo</title>
7+
<title>Add/Remove slide - macro-carousel demo</title>
88

99
<link rel="stylesheet" href="css/third-party/prism.css">
1010
<link rel="stylesheet" href="css/demo.css">
@@ -15,9 +15,9 @@ <h1 id="title">Add/Remove slides</h1>
1515

1616
<template id="demoTemplate">
1717
<style>
18-
x-slider {
18+
macro-carousel {
1919
height: 300px;
20-
padding: 0 calc(10px + var(--x-slider-navigation-button-size));
20+
padding: 0 calc(10px + var(--macro-carousel-navigation-button-size));
2121
margin: 0 10px;
2222
}
2323

@@ -36,22 +36,22 @@ <h1 id="title">Add/Remove slides</h1>
3636
</style>
3737

3838
<!--
39-
Setting `pagination` and `navigation` to show how `x-slider` automatically
39+
Setting `pagination` and `navigation` to show how `macro-carousel` automatically
4040
updates itself after a slide is added/removed.
4141
Both the pagination dots and the navigation arrows update automatically in
4242
order to reflect the new number of slides.
4343
-->
44-
<x-slider navigation pagination>
44+
<macro-carousel navigation pagination>
4545
<article class="slide">Slide 1</article>
4646
<article class="slide">Slide 2</article>
4747
<article class="slide">Slide 3</article>
4848
<article class="slide">Slide 4</article>
49-
</x-slider>
49+
</macro-carousel>
5050
<button id="append" disabled>Append slide</button>
5151
<button id="remove" disabled>Remove last slide</button>
5252

5353
<script>
54-
const slider = document.querySelector('x-slider');
54+
const slider = document.querySelector('macro-carousel');
5555
const appendBtn = document.querySelector('#append');
5656
const removeBtn = document.querySelector('#remove');
5757

@@ -94,7 +94,7 @@ <h1 id="title">Add/Remove slides</h1>
9494
}
9595

9696
function onWCReady() {
97-
customElements.whenDefined('x-slider').then(() => {
97+
customElements.whenDefined('macro-carousel').then(() => {
9898
appendBtn.addEventListener('click', appendSlide);
9999
removeBtn.addEventListener('click', removeSlide);
100100

‎demo/auto-focus.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Auto focus - x-slider demo</title>
7+
<title>Auto focus - macro-carousel demo</title>
88

99
<link rel="stylesheet" href="css/third-party/prism.css">
1010
<link rel="stylesheet" href="css/demo.css">
@@ -15,7 +15,7 @@ <h1 id="title">Auto focus</h1>
1515

1616
<template id="demoTemplate">
1717
<style>
18-
x-slider {
18+
macro-carousel {
1919
height: 300px;
2020
}
2121

@@ -34,17 +34,17 @@ <h1 id="title">Auto focus</h1>
3434
</style>
3535

3636
<!--
37-
When the `auto-focus` attribute is added, x-slider automatically focuses
37+
When the `auto-focus` attribute is added, macro-carousel automatically focuses
3838
a slide when it get selected. This behaviour can improve the a11y of the
3939
carousel, but at the same time can also force the browser to scroll the
4040
crousel into view.
4141
-->
42-
<x-slider auto-focus>
42+
<macro-carousel auto-focus>
4343
<article class="slide">Slide 1</article>
4444
<article class="slide">Slide 2</article>
4545
<article class="slide">Slide 3</article>
4646
<article class="slide">Slide 4</article>
47-
</x-slider>
47+
</macro-carousel>
4848
</template>
4949

5050
<script defer src="js/third-party/inert.min.js"></script>

‎demo/base.html‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Basic Usage - x-slider demo</title>
7+
<title>Basic Usage - macro-carousel demo</title>
88

99
<link rel="stylesheet" href="css/third-party/prism.css">
1010
<link rel="stylesheet" href="css/demo.css">
@@ -15,7 +15,7 @@ <h1 id="title">Basic usage</h1>
1515

1616
<template id="demoTemplate">
1717
<style>
18-
x-slider {
18+
macro-carousel {
1919
height: 300px;
2020
}
2121

@@ -34,25 +34,19 @@ <h1 id="title">Basic usage</h1>
3434
</style>
3535

3636
<!--
37-
The basic version of x-slider doesn't show any UI that allows the
37+
The basic version of macro-carousel doesn't show any UI that allows the
3838
user to navigate through its slides. The slides can still be dragged,
3939
or also navigated by programmatically calling next(), previous(), or
4040
by setting the `selected` property.
4141
-->
42-
<x-slider slides-per-view="3">
42+
<macro-carousel>
4343
<article class="slide">Slide 1</article>
4444
<article class="slide">Slide 2</article>
4545
<article class="slide">Slide 3</article>
4646
<article class="slide">Slide 4</article>
4747
<article class="slide">Slide 5</article>
4848
<article class="slide">Slide 6</article>
49-
<article class="slide">Slide 7</article>
50-
<article class="slide">Slide 8</article>
51-
<article class="slide">Slide 9</article>
52-
<article class="slide">Slide 10</article>
53-
<article class="slide">Slide 11</article>
54-
<article class="slide">Slide 12</article>
55-
</x-slider>
49+
</macro-carousel>
5650
</template>
5751

5852
<script defer src="js/third-party/inert.min.js"></script>

‎demo/complete.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Complete - x-slider demo</title>
7+
<title>Complete - macro-carousel demo</title>
88

99
<link rel="stylesheet" href="css/third-party/prism.css">
1010
<link rel="stylesheet" href="css/demo.css">
@@ -15,17 +15,17 @@ <h1 id="title">Complete usage</h1>
1515

1616
<template id="demoTemplate">
1717
<style>
18-
x-slider {
18+
macro-carousel {
1919
/*
2020
* Leverage padding and margin to decide how much horizontal space
2121
* around the navigation arrows.
2222
*/
23-
padding: 0 calc(10px + var(--x-slider-navigation-button-size));
23+
padding: 0 calc(10px + var(--macro-carousel-navigation-button-size));
2424
margin: 0 10px;
2525

26-
--x-slider-gap: 1rem;
27-
--x-slider-slide-min-height: 300px;
28-
--x-slider-pagination-size: 10px;
26+
--macro-carousel-gap: 1rem;
27+
--macro-carousel-slide-min-height: 300px;
28+
--macro-carousel-pagination-size: 10px;
2929
}
3030

3131
.slide {
@@ -73,7 +73,7 @@ <h1 id="title">Complete usage</h1>
7373
}
7474
</style>
7575

76-
<x-slider
76+
<macro-carousel
7777
selected="1"
7878
navigation
7979
pagination
@@ -121,14 +121,14 @@ <h1 id="title">Complete usage</h1>
121121
<span>10</span>
122122
<button>Click me</button>
123123
</article>
124-
</x-slider>
124+
</macro-carousel>
125125

126126
<p>Currently selected slide: <span id="selected"></span></p>
127127

128128
<script>
129-
const slider = document.querySelector('x-slider');
129+
const slider = document.querySelector('macro-carousel');
130130
const selectedIndicator = document.querySelector('#selected');
131-
slider.addEventListener('x-slider-selected-changed', e => {
131+
slider.addEventListener('macro-carousel-selected-changed', e => {
132132
selectedIndicator.textContent = e.detail;
133133
});
134134
</script>

‎demo/custom-navigation.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Custom navigation - x-slider demo</title>
7+
<title>Custom navigation - macro-carousel demo</title>
88

99
<link rel="stylesheet" href="css/third-party/prism.css">
1010
<link rel="stylesheet" href="css/demo.css">
@@ -15,36 +15,36 @@ <h1 id="title">Custom navigation (previous/next buttons)</h1>
1515

1616
<template id="demoTemplate">
1717
<style>
18-
x-slider {
18+
macro-carousel {
1919
height: 300px;
20-
padding: 0 calc(10px + var(--x-slider-navigation-button-size));
20+
padding: 0 calc(10px + var(--macro-carousel-navigation-button-size));
2121
margin: 0 10px;
2222

23-
--x-slider-navigation-color: #ff0844;
24-
--x-slider-navigation-color-focus: #fff;
25-
--x-slider-navigation-color-background: #ffe5dd;
26-
--x-slider-navigation-color-background-focus: #ff0844;
27-
--x-slider-navigation-button-size: 72px;
28-
--x-slider-navigation-icon-size: 40px;
23+
--macro-carousel-navigation-color: #ff0844;
24+
--macro-carousel-navigation-color-focus: #fff;
25+
--macro-carousel-navigation-color-background: #ffe5dd;
26+
--macro-carousel-navigation-color-background-focus: #ff0844;
27+
--macro-carousel-navigation-button-size: 72px;
28+
--macro-carousel-navigation-icon-size: 40px;
2929

3030
/*
3131
* It is possible to override the shape of the previous and next
32-
* arrows by changing the --x-slider-navigation-icon-mask property. This
32+
* arrows by changing the --macro-carousel-navigation-icon-mask property. This
3333
* property is used as a value for the `mask-image` CSS property.
3434
* https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
3535
*
3636
* In this example, the new SVG mask has been optimised according to
3737
* https://codepen.io/tigt/post/optimizing-svgs-in-data-uris.
3838
* You can see the original SVG asset in /demo/images/arrow-left-alt.svg
3939
*/
40-
--x-slider-navigation-icon-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23000'%3E %3Cpath fill-rule='evenodd' d='M47 2L32 32l15 30-29-30L47 2z'/%3E %3C/svg%3E");
40+
--macro-carousel-navigation-icon-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23000'%3E %3Cpath fill-rule='evenodd' d='M47 2L32 32l15 30-29-30L47 2z'/%3E %3C/svg%3E");
4141
}
4242

4343
/* Previous and next buttons */
44-
.x-slider-previous,
45-
.x-slider-next {
44+
.macro-carousel-previous,
45+
.macro-carousel-next {
4646
border-radius: 0;
47-
border: 1px solid var(--x-slider-navigation-color);
47+
border: 1px solid var(--macro-carousel-navigation-color);
4848

4949
/*
5050
* By tweaking the `top` (and/or `bottom`) and the `transform` CSS
@@ -70,23 +70,23 @@ <h1 id="title">Custom navigation (previous/next buttons)</h1>
7070
</style>
7171

7272
<!-- `navigation` adds previous and next buttons -->
73-
<x-slider navigation>
73+
<macro-carousel navigation>
7474
<article class="slide">Slide 1</article>
7575
<article class="slide">Slide 2</article>
7676
<article class="slide">Slide 3</article>
7777
<article class="slide">Slide 4</article>
78-
</x-slider>
79-
<p>If the CSS properties to customize the <code>x-slider</code> navigation buttons are not enough for your needs, you can always use any custom UI and call the `previous()` and `next()` methods.</p>
78+
</macro-carousel>
79+
<p>If the CSS properties to customize the <code>macro-carousel</code> navigation buttons are not enough for your needs, you can always use any custom UI and call the `previous()` and `next()` methods.</p>
8080
<button id="custom-previous">Custom previous button</button>
8181
<button id="custom-next">Custom next button</button>
8282

8383
<script>
84-
const slider = document.querySelector('x-slider');
84+
const slider = document.querySelector('macro-carousel');
8585
const customPreviousBtn = document.querySelector('#custom-previous');
8686
const customNextBtn = document.querySelector('#custom-next');
8787

8888
function onWCReady() {
89-
customElements.whenDefined('x-slider').then(() => {
89+
customElements.whenDefined('macro-carousel').then(() => {
9090
customPreviousBtn.addEventListener('click', () => {
9191
slider.previous();
9292
});

0 commit comments

Comments
 (0)