herrfugbaum / cato.js Goto Github PK

Todo

• Setup the build pipeline for JS
• Setup the build pipeline for CSS
• Add support for major browsers
• Rewrite in modern JavaScript
• Modularize the code into testable units
• Get rid of the old HTML structure
• Make cato responsive
• Write new manual
• Add code of conduct
• Add contributing guidelines

Similar blocks of code found in 3 locations. Consider refactoring.

https://codeclimate.com/github/herrfugbaum/cato.js/src/cato.js#issue_5be85de3c7b1c50001000023

Describe the bug
The keyboard controls are inverted on vertical sliders due to the rotate(90deg) style attribute.
If you change it to -90deg the indicator works as expected but now the slider flips its direction.

To Reproduce
Steps to reproduce the behavior:

1. Focus the range input
2. Use the arrow keys to navigate the slider
3. See error

Expected behavior
The slider needs appropriate keyboard support. Pressing the up arrow key ↑ should move the slider and it's indicator up, the down arrow key ↓ should do the opposite.

Describe the bug
We had an issue on Safari 13.0.5 on macOS 10.14.6 caused by clipPath not being prefixed.

To Reproduce

1. Use as instructed.
2. Every browser that knows clip-path works as expected
3. Open the page on Safari
4. Sliders are visible and operable, but the image doesn't get clip-path style property

Expected behavior
Safari doesn't know clip-path.
It needs to be vendor prefixed by -webkit.

Desktop (please complete the following information):

• OS: macOS 10.14.6
• Browser Safari
• Version 13.0.5

Describe the bug
The example for the ES6 import does not work.

To Reproduce
Steps to reproduce the behavior:

1. yarn global add serve (ES6 Modules require CORS to be set)
2. cd into the cato root directory (not into /examples)
3. in your terminal type serve
4. Go to http://localhost:5000/examples/es6-module/demo
5. See error in dev tools

Desktop (please complete the following information):

• webpack: ^4.24.0
• Browser: Chrome Version 70.0.3538.102

Additional context

webpack/webpack#3929

webpack/webpack#8318

feature request

If we could use div wrappers around the images we could include sub-elements
like text etc and this would be perfect... ;}

Is your feature request related to a problem? Please describe.
The range indicator is placed to the right or under the slider, giving it a quiet laborious look.

Describe the solution you'd like
The range indicator should be centered, according to the direction of the slider.

Describe alternatives you've considered
None.

Additional context
None.