[{"created":"20231020004058858","creator":"tones","text":"\\function my-summary() [[TOC]] [tag[TableOfContents]count[]] +[join[ ]]\n\n<$.details content=\"!!HelloThere\" tiddler=\"HelloThere\">\n\n</$.details>\n\n<$.details content=\"Table of Contents\" summary=<<my-summary>> >\n<div class=\"tc-table-of-contents\">\n\n<<toc-selective-expandable 'TableOfContents'>>\n\n</div>\n</$.details>\n\n<$.details content=\"!!HelloThere\" class=\"details-background details-box\">\n\n{{HelloThere}}\n</$.details>","tags":"","title":"Test more details and custom widget problem","modified":"20231020014203902","modifier":"tones"},{"created":"20230906063627060","creator":"tones","text":"\\widget $.details()\n<$parameters content tiddler summary=\"Details\" details-hr-class=\"details-hr\" $params=params >\n<$genesis $type=\"details\" \n    $names=\"[<params>jsonindexes[]]\" \n    $values=\"[<params>jsonindexes[]] :map[<params>jsonget<currentTiddler>]\" \n>\n<summary><<summary>></summary>\n\n<$transclude $variable=content $mode=block/>\n\n<$slot $name=\"ts-raw\"/>\n\n<$transclude tiddler=<<tiddler>> mode=block/>\n<$button tag=hr tooltip={{{ [[Bottom of ]addsuffix<summary>] }}} class=<<details-hr-class>>/>\n\n</$genesis>\n</$parameters>\n\\end $.details\n<!-- end of code ======================= -->\n[[Old methods]]\n\n<style>\n.details-background { background-color: #f2f2f2; padding: 0 .5em 0 .5em; }\n.details-box { border: 1px solid grey; border-style: dotted; }\n.details-hr { width: 80%; border: 0; height: 2px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin-top:2.0rem; margin-bottom:2.0rem; padding:0;}\n</style>\n\n\n\n;Current work\n* default and override box or background\n* details for block what for inline (buttons)\n* extended summary to allow counts etc?\n\n\n;Note: Any additional parameters such as open class=\"\" style=\"\" are all passed through to the html details tag.\n* content open-state summary hr-details-class\n\n!!Simplest uses\n;using content `<$.details content=\"this info\"/>`\n: Transcludes variable in block mode, thus wikifies\n<$.details content=\"this info\" open/>\n\n`<$.details>The content of the widget is the content in the details</$.details>`\n<$.details>The content of the widget is the content in the details</$.details>\n\n;Transclude a tiddler as the details\n`<$.details tiddler=\"Function fiddles\"/>`\n<$.details tiddler=\"Function fiddles\"/>\n\n;Add a tootip to the content\n`<$.details tiddler=\"Function fiddles\" title=\"tooltip on details\"/>`\n<$.details tiddler=\"Function fiddles\" title=\"tooltip on details\"/>\n\n;Alter the summary/title of the details line\n```\n<$.details tiddler=\"Function fiddles\" summary=\"Example Functions [[⎘|Function fiddles]]\">\ncontent\n</$.details>\n```\n\n\n<$.details tiddler=\"Function fiddles\" summary=\"Example Functions [[⎘|Function fiddles]]\">\n\nThis text below was transcluded using the $.details widget parameter `tiddler=\"Function fiddles\"`\n\n* Here `<<currentTiddler>>` is \"<<currentTiddler>>\"\n\n* As in the last two examples but includes the summary parameter\n</$.details>\n\n;Default to open details, click to close\n```\n<$.details summary=\"Details open by default\" open>\ncontent\n</$.details>\n```\n\n<$.details summary=\"Details open by default\" open>\n\n;The content of the details widget appears within the content\nstart the content with a blank line for block mode\n\n* All standard wiki text works inside the $.details\n* Eg `''{{!!detail1}}''` gives ''{{!!detail1}}''\n* `<<currentTiddler>>`=<<currentTiddler>>\n\nIf you do use the tiddler=tiddlername parmeter this will be transcluded below the contents within the details widget (if any)\n</$.details>\n\n;Using a state to determin open or closed\n<$.details summary=\"Setting the $.details widget to an open/closed state\" open>\n\n;To set a default open state on the $.details widget\n:Simply add the \"open\" parameter (no value necessary), to the widget parameters \n\n;To use a state value from elsewhere;\n:Set the $.details \"open-state\" parameter to a filter that resolves to \"open\" or not.\n\n\n* Filters and filter functions can access variables, fields or tiddler content\n* if the filter returns nothing or other than \"open\" it will remain closed\n* The result of the filter is passed as parameters to the HTML details tag.\n</$.details>\n\n```\n<$.details summary=\"Details open by default\" open>\ncontent\n</$.details>\n```\n\n<$.details summary=\"Using other parameters?\" newparam=\"a parameter with a value\">\n\n# transclude=<<transclude>>\n# newparam=<<newparam>> \n# thisTiddler=<<thisTiddler>>\n</$.details>\n\n\n\n<$.details summary=\"''More notes on the $.details widget''\" >\n\n;It is often helpful to use the details widget on the remainder of tiddler content to ensure consistency\n\n;Inspiration\n* Using Genesis inside the widget to pass all parameters to the details widget!\n** eg class style style.name title etc...\n* Method discovered to pass boolean attributes like open has being found\n* The content of the details widget can be anything including transclusions of fields or tiddlers, a combination of variables and more.\n** This includes relavant [[HTML Global Attributes|https://www.w3schools.com/tags/ref_standardattributes.asp]] such as `title=\"tooltip\"`\n* Added a rapid details for transclusions eg tiddler=\"tiddler name\" will use the title as the summary and transclude tiddler name it contains\n* Can details be used to import macros, pragma and or toggle styles?\n** at lease when transcluding tiddler?\n\n\n;Nested details\n<$.details summary=\"more...\">\n \n* content\n<$.details summary=\"even more...\">\n \n* content\n</$.details>\n</$.details>\n\n* Open as stored value?\n<hr>\n\n\n\n\n\n\n[[discussion|https://talk.tiddlywiki.org/t/the-genesiswidget-and-html5-input-tag/5503/12?u=tw_tones]]\n\n[quote=\"Mohammad, post:6, topic:5503\"]\nThe new widget will allow me to bound the HTML5 tag attributes to tiddler fields, and access them through WIkiText.\n[/quote]","tags":"[[Genesis play]] $:/tags/Global/View/Body","title":"my details widget?","modified":"20231020011355258","modifier":"tones","detail1":"Content of detail1 field","id":"open"}]