Introduce a Llaminator class, be able to list multiple items #73
Conversation
src/llaminator.ts
Outdated
| clearContainer() { | ||
| const { container } = this.elements; | ||
|
|
||
| while (container.firstChild) |
There was a problem hiding this comment.
!$ npx eslint src/llaminator.ts
/home/glenn/llaminator/src/llaminator.ts
46:14 warning Missing JSDoc comment require-jsdoc
62:7 error Expected { after 'while' condition curly
✖ 2 problems (1 error, 1 warning)
1 error and 0 warnings potentially fixable with the `--fix` option.
We can ignore the jsdoc warning. It might take some time (and separate PRs) to fix all the lint issues with existing files, but we might as well make sure new ones are compliant
There was a problem hiding this comment.
Fixed.
I can't actually run the linter locally yet without a ton of noise, because all the line endings are CRLF for me. Yay Windows :) Will figure that out separately.
There was a problem hiding this comment.
you probably want to change your git autocrlf settings for the project to input (or false, but preferable input), then possibly re-checkout. As long as your editor can handle that, I think it should solve the issue.
There was a problem hiding this comment.
also I just learned about the editorconfig format example - might be a convenient way to standardize our editors to use the same style as our linters
src/llaminator.ts
Outdated
| * Is given a series of HTML elements (`LlaminatorElements`) in which the app is to be rendered. | ||
| */ | ||
| export class Llaminator { | ||
| private elements: LlaminatorElements; |
src/llaminator.ts
Outdated
| */ | ||
| export class Llaminator { | ||
| private elements: LlaminatorElements; | ||
| private storage: Promise<LlamaStorage>; |
There was a problem hiding this comment.
probably also readonly
|
|
||
| // Set up event listeners on the elements. | ||
| this.elements.select.addEventListener( | ||
| 'fileselected', Llaminator.prototype.onFileSelected.bind(this)); |
There was a problem hiding this comment.
this.onFileSelected doesn't work? :(
There was a problem hiding this comment.
Nope, then the this value in the onFileSelected function would be bound to the input element.
| * Called when a file has been selected in the <llama-select-fab> that is to be stored. | ||
| * | ||
| * @param {Event} event The event, which is a `CustomEvent` with its detail being a File instance. | ||
| * @todo Can we provide stronger typing for our own custom events? |
There was a problem hiding this comment.
Yeah, that's pretty close to what I found. Still, we should try, I don't think that it's impossible.
beverloo
force-pushed
the
multiple-items
branch
from
10eff2e to
0a4284c
Compare
| llama-item { | ||
| margin-bottom: 2rem; | ||
|
|
||
| /** TODO: Use a stack based on flexbox */ |
There was a problem hiding this comment.
I've taken brief looks at flexbox and grid layout before. I think I found grid to be much more manageable.
There was a problem hiding this comment.
I'm fairly sure I disagree for a simple stack like this, which shouldn't be more complicated than...
main {
display: flex;
flex-direction: column;
row-gap: 2rem;
}However, it's a TODO because we should try properly :)
Fixes #72
Only functional change is in
Llaminator.populate().