Stop using <input> fields #43
Comments
Nice. What's that font you're using? Very stylish! |
|
The suggestion makes sense sure I'd be happy for a PR! |
|
Hi @mmkal, I've been thinking about the selectability of the inputs for a while. What you're proposing - using a
|
This was referenced Dec 18, 2023
dwmkerr
added a commit
that referenced
this issue
Dec 26, 2023
* Remove input element from grid cellElement
modified: docs/module-api.md
GridView documentation - remove input element
modified: package-lock.json
Audit fix
deleted: pull-request.config
Replaced
modified: src/crossword-controller-helpers.mjs
Use controller.setInputElementText within setCellText()
modified: src/crossword-controller.mjs
Add setInputElementText()
Adust helpers for removed input element in grid cell
Change assignment of eventCell in listeners
Prevent unbound arrow key events default actions for cellElement
passing through to webpage base - causes page scrolling.
modified: src/crossword-gridview.mjs
Remove input element from cellElement
Add tabindex to cellElements to enable tabbing in grid
Add explicit text node to cellElement to enable changing cell
text content without destroying other child div nodes.
Change implementation of setCellContent()
modified: style/crosswords.less
Relocate input attributes to .cwcell
Add text alignment atributes to .cwcell
Add .noselect attributes to stop text selection of grid cells
modified: style/cwdimensions.less
Fix typo
* Remove webpack and unused packages; improve docs; work on github actions (#51)
* Merge remote-tracking branch 'nas/main' into old-head
- Remove webpack and substituted vite for remaining actions.
- Remove all unused devDependencies packages
- Update main.yml to deploy dev/ demo to GitHub Pages.
- Update main.yml to use GitHub official actions.
- Add MacOS bootstrap script to fetch and
build all tools and crosswords-js package, run dev/ demo, then cleanup on vanilla MacBook.
modified: .eslintrc.yml
Remove webpack ref
modified: .github/workflows/main.yml
Deploy demo site from dev/
Switch to github official actions for
uploading artifacts and deploying to Pages
modified: .gitignore
Ignore rebase artifacts
new file: bin/demo-macos.sh
Bootstrap MacOS tools and packages, run dev/demo, then cleanup.
modified: cspell.json
more words
modified: README.md
Quickstart reference changed to package pulled from hub (npmjs.com)
modified: dist/crosswords.css
modified: dist/crosswords.js
new file: dist/crosswords.umd.cjs
Rebuilt via 'npm build'
modified: package-lock.json
Rebult via 'npm ci'
modified: package.json
Switch from yaml -> js-yaml
Removed webpack
Removed unused packages (determined by 'npx depcheck')
modified: src/cell-map.mjs
modified: src/crossword-controller.mjs
Update location of newCellElement() in comments
modified: src/crossword-model.mjs
Change from yaml -> js-yaml
renamed: dev/crosswords.js -> src/crosswords.js
Add ../style/crosswords.less import to get
vite to transpile src/crosswords.less -> dist/crosswords.css
deleted: src/index.mjs
src/crosswords.js contains package exports
modified: test/crossword-model.specs.mjs
Add bletchley to tested crosswords
Refactor test on return value from newCrosswordModel()
- null on failure, and model object otherwise
deleted: test/index.specs.mjs
TODO: replace with tests on src/crosswords.js
new file: vite.config.js
Setup config for package 'build' action
Add 'rollupOptions' hack to rename css file generated
in src/crosswords.js
deleted: webpack.config.js
deleted: jsconfig.json
deleted: pull-request.config
Unused
deleted: makefile
Unused now. Using dev/ demo for dwmkerr.github.io
modified: style/crosswords.less
modified: dev/index.html
modified: dev/index.js
nfc
* chore: correct all contributors config (#46)
* build: deploy demo site on all builds to main
* docs: Update README.md
* refactor: improve styling code
* more css vars
* don't apply variables to :root
* dist
* :root out another
* dist
* fix merge conflicts more properly
* dist
* doc
* disst
* typo + docs + less calc
* update dist again
* Move docs to existing styling doc file
* add + use clue-label-width
* forgot dist again
* point to styling doc from root readme
---------
Co-authored-by: Misha Kaletsky <[email protected]>
* docs: add mmkal as a contributor for code, doc, and review (#49)
* docs: update README.md [skip ci]
* docs: update .all-contributorsrc [skip ci]
---------
Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
* Extract git hook script from README.md and
add package "qa:install" action - adding production assets
build as suggested by @mmkal
Use github's deploy pages action in main.yml
README work on QA and workflow advice
Add MacOS environment scripts
new file: .githook-pre-commit
Extract script from README.md
Add steps to build and stage distribution assets
modified: .github/workflows/main.yml
Add new Node LTS version (20.x)
Use github's deploy pages action (actions/deploy-pages@v2)
modified: .github/workflows/pull-request.yml
Remove hardcoded ubuntu version
Add new Node LTS version (20.x)
modified: README.md
Move documentation section to top of file
De-nest sections under Quickstart
Re-do "Setting up your dev environment"
- add section on triangular workflow
- specific bootstrap instructions for Linux/MacOS/Windows
Re-do "Quality assurance"
- Change pre-commit heredoc to action "qa:install"
- Reference production assets building under "Manual checks"
renamed: bin/bootstrap-linux.sh -> bin/bootstrap-posixish.sh
Combine instructions for Linux/MacOS
modified: bin/demo-macos.sh
Repoint repo refs to dwmkerr
new file: bin/install-githook.sh
Add script to install QA hooks - used by action "qa:install"
modified: bin/update-package.sh
Add "npm ci" step
modified: cspell.json
More words
modified: dev/index.js
Fxup script location
modified: dev/index.less
nfc
modified: dist/crosswords.css
modified: dist/crosswords.js
modified: dist/crosswords.umd.cjs
Re-built
modified: docs/crossword-styling.md
Add script location for usage of --row-count, --column-count
Add note for vite generation of CSS assets
modified: package-lock.json
Updated
modified: package.json
Switch yaml -> to js-yaml
Change build action - vite replaces lessc call
Change action - dev:prod -> dev:preview
Add action qa:install to install git hook
Drop action start:angular - broken; moving to separate repo
modified: pull-request-config.sh
Add vars for merge rollback location - process now includes
fast-forward commits for simpler commit chains
modified: src/crossword-cluesview.mjs
modified: src/crossword-gridview.mjs
Replace multiple addClass() calls with an addClasses() call
modified: src/crossword-model.mjs
Switch from yaml -> js-yaml
modified: style/crosswords.less
Resolve lint warnings - duplicate rules
Sort cell sections to match layering order in DOM
Amalgamate partial sections for same-names
modified: style/cwdimensions.less
Add code location for JS usage of --row-count, --column-count
* Fixes for GitHub Pages deployment.
modified: .github/workflows/main.yml
More work on GH Pages deploy
modified: README.md
Fix quickstart example to use "installed" crosswords-json
Remove references to Angular sample
Change 'pipeline' to 'workflow'
renamed: bin/bootstrap-posixish.sh -> bin/bootstrap-posix-ish.sh
Add dnf package manager
Fix package action reference to "qa:install"
new file: bin/build-dev.sh
Add script for "dev:build" action
Setup website folder structure for upload to GH Pages
modified: cspell.json
More words
modified: package.json
Change "dev:build" action to run new script "bin/build-dev.sh"
* Improve colour contrast for @highlight-color
* Add styles for for grid text colours
modified: dev/index.less
modified: dist/crosswords.css
modified: style/crosswords.less
modified: style/cwcolors.less
* Accessible colors. CSP.
modified: cspell.json
modified: dev/index.html
modified: dev/index.less
modified: style/crosswords.less
---------
Co-authored-by: Dave Kerr <[email protected]>
Co-authored-by: Misha Kaletsky <[email protected]>
Co-authored-by: Misha Kaletsky <[email protected]>
Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
* Remove input element from grid cellElement
modified: docs/module-api.md
GridView documentation - remove input element
modified: package-lock.json
Audit fix
deleted: pull-request.config
Replaced
modified: src/crossword-controller-helpers.mjs
Use controller.setInputElementText within setCellText()
modified: src/crossword-controller.mjs
Add setInputElementText()
Adust helpers for removed input element in grid cell
Change assignment of eventCell in listeners
Prevent unbound arrow key events default actions for cellElement
passing through to webpage base - causes page scrolling.
modified: src/crossword-gridview.mjs
Remove input element from cellElement
Add tabindex to cellElements to enable tabbing in grid
Add explicit text node to cellElement to enable changing cell
text content without destroying other child div nodes.
Change implementation of setCellContent()
modified: style/crosswords.less
Relocate input attributes to .cwcell
Add text alignment atributes to .cwcell
Add .noselect attributes to stop text selection of grid cells
modified: style/cwdimensions.less
Fix typo
* Replace references to inputElement with cellElement
modified: src/crossword-controller-helpers.mjs
modified: src/crossword-controller.mjs
addCellEventListeners -> addKeyboardEventListeners
addInputEventListeners -> addCellEventListeners
modified: src/crossword-gridview.mjs
---------
Co-authored-by: Dave Kerr <[email protected]>
Co-authored-by: Misha Kaletsky <[email protected]>
Co-authored-by: Misha Kaletsky <[email protected]>
Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi again! A problem that crosswords-js (and some other HTML-based crossword software I've come across) has is that on iPhone, using an input field opts in to some unwanted functionality (it may also happen on Android). For example, when you tap on the current cell to switch from across to down, a popup appears offering for you to "Select" the text in the input:
Also, for users with dark mode enabled, Safari iOS automatically changes the input background to be dark, making the difference between light and dark cells almost invisible:
Both of these could be controlled for by using a div or span with a keypress listener. This is, I think, roughly what squares.io does:
squares.io:
The Guardian uses an input, but is somehow hiding it so it's not clickable. They use some kind of customised HTML tags to actually show the entered letter:
I think the squares.io approach would be easier! I'd be happy to submit a pull request making this change after #42 is in, if you'd be open to it @dwmkerr and @pvspain ?
(Side-note: the modified styling in the first couple of screenshots is taking advantages of the overridable CSS variables in #41!)
The text was updated successfully, but these errors were encountered: