1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-30 09:13:16 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid

45 lines
3.7 KiB
Plaintext
Raw Normal View History

2014-09-10 23:06:19 +00:00
caption: checkbox
Checkbox widget: list and filter modes (#6561) * Docs for CheckboxWidget list and filter modes This documents the `listField` and `filter` attributes. * Tests for checkbox widget list mode * Implement checkbox list mode * WIP on implementing filter attr for checkboxes * Improve CheckboxWidget documentation * Refactor checkbox tests: move function to top The big findNodeOfType function belongs at the top of the describe block, so that the checkbox tests are more compact and easy to read. * Move checkbox widget tests to end of file The checkbox widget tests are long and involved, so we'll move them to the end of the file so they aren't a huge block of code you need to read past to find the next test. * Improve formatting of CheckboxWidget docs The \define() calls that are short enough to fit on one line should be put on one line, for readability. The ones that are quite long have been kept on multiple lines, for readability. * Added more passing tests for checkbox widget * Add some failing tests for checkbox widget The filter mode where neither checked nor unchecked is specified (in which case an empty filter result means false and a non-empty result means true) is not working yet. * Make failing tests pass * Uncomment (and improve) test for field mode We're now ready to start working on making this test pass. (There was also one small mistake in the test, which this commit corrects). * All tests now passing * No indeterminate checkboxes in simple modes The simple checkbox modes (field and index) should not produce indeterminate checkboxes. That should be reserved for the advanced modes (list and filter). * Minor improvement to unit tests * Allow indeterminate checkboxes in list and filter modes This change may require some tweaks to the unit tests to be able to test it properly. * Slightly easier to read tests * Two more tests for list mode * Greatly simplify unit test code Turns out there's no need to jump through Object.getPrototypeOf hoops. * Minor simplification of unit test * Add tests for indeterminate in list & filter modes With this, the set of tests is complete. * More tests to specify list mode behavior * Unfocus tests so all tests run * Update docs to say "new in 5.2.3" insetad of 5.2.2 * Move checkbox widget tests into their own file The test-widget.js file was getting too long with all the checkbox tests added, so we'll move the checkbox tests into their own file. * Add checkbox widget tests for index mode This commit also adds tests for index list mode (with a listIndex attribute that will parallel the listField attribute) but leaves them commented out because they don't pass yet: the code that implements the listIndex attribute hasn't been written yet). * Add listIndex attribute to checkbox widget * Remove code that lets checkboxes be indeterminate This reverts commit 6afcb151befecd3e6656c4edee7e1b2bbf529909. We will add this code back in a later PR. * Remove indeterminate tests for checkbox widget We're currently not allowing indeterminate checkboxes, so there's no need for the tests that check for them. * Document listIndex attribute of CheckboxWidget * adds class tc-checkbox-checked when checked * equivalent to #2182 (RadioWidget) * also applies `tc-checkbox` to checkboxes by default, always * Move macro definitions inside example text Since the wikitext-example-without-html macro creates a new parsing context, it's safe to have macro definitions inside it. That makes these examples a lot easier to write, and to read. * Remove all mention of indeterminate checkboxes Also improve the documentation a little bit: mention what happens in list mode if neither checked nor unchecked is specified. * Move filter mode to bottom of checkbox docs The `filter` attribute should be under both `listField` and `listIndex` rather than being between them. The documentation for filter mode should similarly be after the `listIndex` documentation. * Improve docs for `class` attr of checkbox widget This brings the wording of the `class` attribute more in line with how it's worded in the RadioWidget docs. * Fix bug with list tiddlers If neither checked nor unchecked was specified, then the behavior should be "empty = false, non-empty = true". But if *both* are specified yet neither is found, then the checkbox should be unchecked (false). It had been falling through to the "non-empty = true" behavior, which was wrong. * Improve listIndex example of checkbox widgets * Remove unused function from test-widget.js Co-authored-by: Tobias Beer <beertobias@gmail.com>
2022-04-02 14:16:08 +00:00
colors: red orange yellow blue
created: 20131024141900000
fruits: bananas oranges grapes
list: [[CheckboxWidget (tag Mode)]] [[CheckboxWidget (field Mode)]] [[CheckboxWidget (listField Mode)]] [[CheckboxWidget (index Mode)]] [[CheckboxWidget (listIndex Mode)]] [[CheckboxWidget (filter Mode)]] [[CheckboxWidget (indeterminate)]]
modified: 20231113093304323
tags: Widgets TriggeringWidgets
title: CheckboxWidget
type: text/vnd.tiddlywiki
vegetables: carrots potatoes
! Introduction
The checkbox widget displays an HTML `<input type="checkbox">` element that is dynamically bound to either:
* the presence or absence of a specified tag on a specified tiddler
* the value of a specified field of a specified tiddler
! Content and Attributes
The content of the `<$checkbox>` widget is displayed within an HTML `<label>` element immediately after the checkbox itself. This means that clicking on the content will toggle the checkbox.
|!Attribute |!Description |
|<<.attr tiddler>> |Title of the tiddler to manipulate (defaults to the [[Current Tiddler]]) |
|<<.widget-attr-link tag "CheckboxWidget (tag Mode)">> |The name of the [[tag|Tagging]] to which the checkbox is bound |
|<<.attr invertTag>> |When set to <<.value yes>>, flips the tag binding logic so that the absence of the tag causes the checkbox to be checked |
|<<.widget-attr-link field "CheckboxWidget (field Mode)">> |The name of the field to which the checkbox is bound |
|<<.widget-attr-link listField "CheckboxWidget (listField Mode)">> |<<.from-version "5.2.3">> The name of the field that contains the list to which the checkbox is bound |
|<<.widget-attr-link index "CheckboxWidget (index Mode)">> |<<.from-version "5.1.14">> The property of the [[DataTiddler|DataTiddlers]] to which the checkbox is bound|
|<<.widget-attr-link listIndex "CheckboxWidget (listIndex Mode)">> |<<.from-version "5.2.3">> Like <<.attr index>>, but treats the value as a list the same way that <<.attr listField>> does |
|<<.widget-attr-link filter "CheckboxWidget (filter Mode)">> |<<.from-version "5.2.3">> A filter whose output determines the checked state of the checkbox |
|<<.attr checked>> |The value of the field corresponding to the checkbox being checked |
|<<.attr unchecked>> |The value of the field corresponding to the checkbox being unchecked |
|<<.attr default>> |The default value to use if the field is not defined |
|<<.widget-attr-link indeterminate "CheckboxWidget (indeterminate)">> |Whether ambiguous values can produce indeterminate checkboxes (see below) |
|<<.attr class>> |The class that will be assigned to the `<label>` element <$macrocall $name=".tip" _="""<<.from-version "5.2.3">> `tc-checkbox` is always applied by default, as well as `tc-checkbox-checked` when checked"""/> |
|<<.attr actions>> |<<.from-version "5.1.14">> A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked) |
|<<.attr uncheckactions>> |<<.from-version "5.1.16">> A string containing ActionWidgets to be triggered when the checkbox is unchecked |
|<<.attr checkactions>> |<<.from-version "5.1.20">> A string containing ActionWidgets to be triggered when the checkbox is checked |
|<<.attr disabled>> |<<.from-version "5.1.23">> Optionally disables the checkbox if set to <<.value yes>> (defaults to <<.value no>>)|
|<<.attr data-*>> |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML `<input>` element |
|<<.attr style.*>> |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the HTML `<input>` element |
<<.doc-tabs>>