Skip to content

Commit

Permalink
first official release
Browse files Browse the repository at this point in the history
  • Loading branch information
clubside committed Jul 22, 2024
1 parent 5e1fbb6 commit f92ff4b
Show file tree
Hide file tree
Showing 9 changed files with 348 additions and 93 deletions.
24 changes: 24 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"useTabs": true,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 160,
"overrides": [
{
"files": ["*.html", "*.css"],
"options": {
"printWidth": 8000
}
},
{
"files": ["*.css"],
"options": {
"singleQuote": false
}
}
],
"plugins": [
"prettier-plugin-jsdoc"
]
}
166 changes: 166 additions & 0 deletions .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
{
"rules": {
"alpha-value-notation": [
"percentage",
{
"exceptProperties": [
"opacity",
"fill-opacity",
"flood-opacity",
"stop-opacity",
"stroke-opacity"
]
}
],
"annotation-no-unknown": true,
"at-rule-empty-line-before": [
"always",
{
"except": [
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"at-rule-no-unknown": true,
"at-rule-no-vendor-prefix": true,
"block-no-empty": true,
"color-function-notation": "modern",
"color-hex-length": "short",
"color-no-invalid-hex": true,
"comment-empty-line-before": [
"always",
{
"except": [
"first-nested"
],
"ignore": [
"stylelint-commands"
]
}
],
"comment-no-empty": true,
"comment-whitespace-inside": "always",
"custom-media-pattern": [
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
{
"message": "(name) => `Expected custom media query name \"${name}\" to be kebab-case`"
}
],
"custom-property-no-missing-var-function": true,
"custom-property-pattern": [
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
{
"message": "(name) => `Expected custom property name \"${name}\" to be kebab-case`"
}
],
"declaration-block-no-duplicate-custom-properties": true,
"declaration-block-no-duplicate-properties": [
true,
{
"ignore": [
"consecutive-duplicates-with-different-values"
]
}
],
"declaration-block-no-redundant-longhand-properties": true,
"declaration-block-no-shorthand-property-overrides": true,
"declaration-empty-line-before": [
"always",
{
"except": [
"after-declaration",
"first-nested"
],
"ignore": [
"after-comment",
"inside-single-line-block"
]
}
],
"font-family-name-quotes": "always-where-recommended",
"font-family-no-duplicate-names": true,
"font-family-no-missing-generic-family-keyword": true,
"function-calc-no-unspaced-operator": true,
"function-linear-gradient-no-nonstandard-direction": true,
"function-name-case": "lower",
"function-no-unknown": true,
"function-url-quotes": "always",
"hue-degree-notation": "number",
"import-notation": "url",
"keyframe-block-no-duplicate-selectors": true,
"keyframe-declaration-no-important": true,
"keyframe-selector-notation": "percentage-unless-within-keyword-only-block",
"keyframes-name-pattern": [
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
{
"message": "(name) => `Expected keyframe name \"${name}\" to be kebab-case`"
}
],
"length-zero-no-unit": true,
"media-feature-name-no-unknown": true,
"media-feature-name-no-vendor-prefix": true,
"named-grid-areas-no-invalid": true,
"no-duplicate-at-import-rules": true,
"no-duplicate-selectors": true,
"no-empty-source": true,
"no-invalid-double-slash-comments": true,
"no-invalid-position-at-import-rule": true,
"no-irregular-whitespace": true,
"number-max-precision": 4,
"property-no-unknown": true,
"rule-empty-line-before": [
"always-multi-line",
{
"except": [
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"selector-attribute-quotes": "always",
"selector-class-pattern": [
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
{
"message": "(selector) => `Expected class selector \"${selector}\" to be kebab-case`"
}
],
"selector-id-pattern": [
"^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
{
"message": "(selector) => `Expected id selector \"${selector}\" to be kebab-case`"
}
],
"selector-no-vendor-prefix": true,
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-element-no-unknown": true,
"selector-type-case": "lower",
"selector-type-no-unknown": [
true,
{
"ignore": [
"custom-elements"
]
}
],
"shorthand-property-no-redundant-values": true,
"string-no-newline": true,
"unit-no-unknown": true,
"value-keyword-case": "lower",
"value-no-vendor-prefix": [
true,
{
"ignoreValues": [
"box",
"inline-box"
]
}
]
}
}
149 changes: 85 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,61 @@ While working on my [NFO editor for Kodi](https://github.com/clubside/KodiNFOMus

I'm organizing this similarly to how the MDN examples at [web-components-examples](https://github.com/mdn/web-components-examples) are set up but with each component `.js` file named the way the component is used. There is a sample `html` file to show off the functionality but I definitely need to work on better documentation.

## media-upload
The individual component `.js` files can be downloaded and used as they are sel-contained but there is a full test suite if you download the release:

```bash
npm i
npm start
```

then go to [http://http://localhost:3600/](http://http://localhost:3600/) to test all of the components including for submission support.

## <image-option-group>

An image-based option chooser with `option-group` and `multiple` behavior. Insert `<img>` elements inside the component to generate the options. At a minimum an `id` is necessary to generate each option's `id`. Additionally you can specify both a title and and initial checked state through `dataset` attributes `data-title` and `data-checked` respectively.

### Usage

`<image-option-group multiple><img id="test" src="test.png" data-title="Test" data-checked="false"></image-option-group>`

#### Attributes

- `disabled` indicates the user cannot interact with the component.
- `multiple` to allow selection of multiple options. If not included only a single option within the group may be selected, clicking/tapping another removes the checked status of the others.
- `required` indicates at least one option must be chosen when `multiple` is true, or one option chosen when not.
- `value` is a semi-colon separated list of `id`s that are checked.

#### Events

- `change` is fired everytime the number of selected options changes.

#### Properties

- `disabled` returns or sets the `disabled` attribute as a boolean.
- `multiple` returns or sets the `multiple` attribute as a boolean.
- `required` returns or sets the `required` attribute as a boolean.
- `value` returns an array of `id`s representing which options are checked or passes an array of `id`s to set as checked..

#### Keyboard Support

When focused both `Enter` and `Spacebar` with toggle a non-`disabled` option, and `tab` and `shift-tab` will navigate between options.

#### Appearance

There are a few standard styles all of which can be overwriiten by targeting the approriate part.

##### CSS Parts

- `option` is the container `<div>` element which by default is `display: flex; flex-direction: column;`.
- `image` is the option's `<img>` element.
- `status` is the option's check box which at the moment uses a hard-coded gray-outlined circle to indicate unchecked and a filled-green circle with white checkmark to indicate checked. By default it is `position: absolute; top: 0; right: 0;width: 32px; height: 32px;`I have plans to allow passing the images used to indicate checked status in the future.
- `title` is the optional `<div>` element that contains the title.

#### Form support

The component is fully compatible inside `<form>` elements. Seeting the `required` attribute will deny validity until at least one option has been chosen when the `multiple` attribute is set, .

## &lt;media-upload&gt;

There are many image upload with preview solutions out there, this one is mine. It supports file selection and drag/drop, images and video, add and remove events as well as a simplistic zoom. I hope to make the zoom more full-featured and add crop functionality in the future. The sample page demonstrates adding/removing new instances of the component and a 'Save' button will `console.log()` the current media.

Expand Down Expand Up @@ -34,7 +88,30 @@ The component has a number of internal styles that I probably need to work on si

The component is fully compatible inside `<form>` elements. Seeting the `required` attribute will deny validity until a media file has been set.

## star-rating
## &lt;progress-bar&gt;

A fancy (for me 😜) progress bar as a replacement for the standard `<progress>` element. It uses the same attributes so it can be a drop-in replacement.

### Usage

`<progress-bar value="0" max="100" gradient="linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)" nostripes></progress-bar>`

#### Attributes

- `value` is the current progress of the control. It defaults to 0 and if it exceeds `max` it is set to `max`.
- `max` is the maximum progress. It defaults to 100.
- `gradient` allows a custom CSS `background-image` for the progress bar. This should be in the standard CSS format.
- `nostripes` will disable the animated stripes normally applied to the progress bar.

#### Appearance

Standards are set in terms of the `border-radius` and `background-image` fill gradient which is green-ish. The primary element is filled with an inherited `background-color`. The component scales based on `font-size`.

##### CSS Parts

- `fill` controls the inner bar that indicates progress. Setting `background-image` changes the look (see example) but you can also change `border-radius`, `background` and other styles.

## &lt;star-rating&gt;

Another common pattern, this one was very frustrating owing to how `document.createElement` and `svg` don't play well together. No half-stars here, I'd have to find a different way to render the stars and probably lose the fancy schmancy rounded corners (unless som `CSS` genius wishes to step forward 😀), but Kodi only uses one to five for it's `userrating`. But I'm happy with the live highlight of stars as you hover over the component. Clicking on the current number of stars is how you remove the value.

Expand Down Expand Up @@ -63,7 +140,11 @@ You can style the `stroke` and `fill` of the stars at the top level and use `::p
- `star-selected` is for any star equal to or less than the current `value`.
- `star-hover` is for stars when hovering. This is an adaptive state in that the hover styles are only applied to stars equal to or great than the current `value` while `star` is applied to any star greater than the one you're currently hovering over, all stars are set to `star` when you hover over the current `value`, and `star-selected` is applied to any star greater than the one being hovered and less than or equal to `value`. See demo page for how this works.

## toggle-switch
#### Form support

The component is fully compatible inside `<form>` elements. Seeting the `required` attribute will deny validity until thew number of selected stars is at least one.

## &lt;toggle-switch&gt;

An approximation of the iOS toggle as a replacement for the standard `<input type="checkbox">` form control.

Expand All @@ -90,66 +171,6 @@ When focused both `Enter` and `Spacebar` with toggle a non-`disabled` instance.

Another opinionated display in terms of colors, using greys for the `off` state background and off-green for `on`. Opacity is used to indicate `disabled`. The component will resize height based on `font-size` of the containing element.

## progress-bar

A fancy (for me 😜) progress bar as a replacement for the standard `<progress>` element. It uses the same attributes so it can be a drop-in replacement.

### Usage

`<progress-bar value="0" max="100" gradient="linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)" nostripes></progress-bar>`

#### Attributes

- `value` is the current progress of the control. It defaults to 0 and if it exceeds `max` it is set to `max`.
- `max` is the maximum progress. It defaults to 100.
- `gradient` allows a custom CSS `background-image` for the progress bar. This should be in the standard CSS format.
- `nostripes` will disable the animated stripes normally applied to the progress bar.

#### Appearance

Mostly opinionated in terms of the border radius. There is a default gradient which is green-ish. The primary element is filled with an inherited `background-color`. The component scales based on `font-size`.

## image-option-group

An image-based option chooser with `option-group` and `multiple` behavior. Insert `<img>` elements inside the component to generate the options. At a minimum an `id` is necessary to generate each option's `id`. Additionally you can specify both a title and and initial checked state through `dataset` attributes `data-title` and `data-checked` respectively.

### Usage

`<image-option-group multiple><img id="test" src="test.png" data-title="Test" data-checked="false"></image-option-group>`

#### Attributes

- `disabled` indicates the user cannot interact with the component.
- `multiple` to allow selection of multiple options. If not included only a single option within the group may be selected, clicking/tapping another removes the checked status of the others.
- `required` indicates at least one option must be chosen when `multiple` is true, or one option chosen when not.
- `value` is a semi-colon separated list of `id`s that are checked.

#### Events

- `change` is fired everytime the number of selected options changes.

#### Properties

- `disabled` returns or sets the `disabled` attribute as a boolean.
- `multiple` returns or sets the `multiple` attribute as a boolean.
- `required` returns or sets the `required` attribute as a boolean.
- `value` returns an array of `id`s representing which options are checked or passes an array of `id`s to set as checked..

#### Keyboard Support

When focused both `Enter` and `Spacebar` with toggle a non-`disabled` option, and `tab` and `shift-tab` will navigate between options.

#### Appearance

There are a few standard styles all of which can be overwriiten by targeting the approriate part.

##### CSS Parts

- `option` is the container `<div>` element which by default is `display: flex; flex-direction: column;`.
- `image` is the option's `<img>` element.
- `status` is the option's check box which at the moment uses a hard-coded gray-outlined circle to indicate unchecked and a filled-green circle with white checkmark to indicate checked. By default it is `position: absolute; top: 0; right: 0;width: 32px; height: 32px;`I have plans to allow passing the images used to indicate checked status in the future.
- `title` is the optional `<div>` element that contains the title.

#### Form support

The component is fully compatible inside `<form>` elements. Seeting the `required` attribute will deny validity until at least one option has been chosen when the `multiple` attribute is set, .
The component is fully compatible inside `<form>` elements.
7 changes: 5 additions & 2 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@ module.exports = [
__dirname: 'readonly',
setTimeout: 'readonly',
clearTimeout: 'readonly',
Buffer: 'readonly',
HTMLElement: 'readonly',
customElements: 'readonly',
CustomEvent: 'readonly',
FileReader: 'readonly',
alert: 'readonly',
BABYLON: 'readonly',
MutationObserver: 'readonly',
HTMLImageElement: 'readonly'
HTMLImageElement: 'readonly',
FileReader: 'readonly'
}
},
rules: {
Expand Down
11 changes: 11 additions & 0 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"module": "CommonJS",
"target": "esnext"
},
"include": [
"*.js",
"*.html",
"./types/**/*.js"
]
}
Loading

0 comments on commit f92ff4b

Please sign in to comment.