mirror of
https://github.com/TiddlyWiki/TiddlyWiki5.git
synced 2026-05-01 02:16:50 +00:00
Add data attribute support to button and other widgets (#7769)
* Add data attribute support to button widget * Fix typo * Refactor ready for making mechanism more generic * Apply more generic implementation to multiplate widgets * Refactor to use existing widget.assignAttributes() method * Fix typo * Clarify docs * Update docs * Update select widget to support style.* attributes * Remove obsolete comment * Fixes refresh issues for checkbox and links widgets for data attributes (#7846) * fix: refresh issues with checkbox and links widgets * fix: indenting * Feat: add support for data attributes to Draggable and Droppable widgets (#7845) * Docs clarification * docs: add style and data attributes to Draggable and Droppable widget docs (#7850) * Refactors Select widget to directly create DOM node (#7848) * fix: refactored SelectWidget to directly create DOM nodes * fix: refactored SelectWidget to directly create DOM nodes * fix: improve refresh handling for select widget * Fixes issues in the PR "Button widget data attributes" (#7852) * fix: fixed ordered attributes handling and improved tests to catch event attributes * fix: clean up code from testing * fix: more tests and refactoring * fix: use lowercase when checking for event attribute prefix * fix: use lowercase when checking for event attribute prefix * fix: changed comment wording * fix: minor refactoring * refactor: for brevity --------- Co-authored-by: Saq Imtiaz <saq.imtiaz@gmail.com>
This commit is contained in:
Jeremy Ruston
@@ -0,0 +1,27 @@
|
||||
title: Widgets/DataAttributes/ButtonWidget
|
||||
description: Data Attributes for ButtonWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$button tag="div" class="myclass" data-title="mytiddler" style.color="red" onclick="clicked">
|
||||
my tiddler
|
||||
</$button>
|
||||
<$button tag="div" class="myclass" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
|
||||
hello
|
||||
</$button>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="myclass" data-title="mytiddler" style="color:red;">my tiddler</div><div class="myclass" data-title="Title2" style="color:red;">hello</div></p>
|
||||
@@ -0,0 +1,22 @@
|
||||
title: Widgets/DataAttributes/CheckboxWidget
|
||||
description: Data Attributes for CheckboxWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$checkbox tag="done" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}} onclick="clicked"> Is it done?</$checkbox>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><label class="tc-checkbox "><input data-title="Title2" type="checkbox" style="color:red;"><span>Is it done?</span></label></p>
|
||||
@@ -0,0 +1,27 @@
|
||||
title: Widgets/DataAttributes/DraggableWidget
|
||||
description: Data Attributes for DraggableWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$draggable tag="div" class="myclass" data-title="mytiddler" style.color="red" onclick="clicked">
|
||||
my tiddler
|
||||
</$draggable>
|
||||
<$draggable tag="div" class="myclass" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
|
||||
hello
|
||||
</$draggable>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="myclass tc-draggable" data-title="mytiddler" draggable="true" style="color:red;">my tiddler</div><div class="myclass tc-draggable" data-title="Title2" draggable="true" style="color:red;">hello</div></p>
|
||||
@@ -0,0 +1,27 @@
|
||||
title: Widgets/DataAttributes/DroppableWidget
|
||||
description: Data Attributes for DroppableWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$droppable tag="div" class="myclass" data-title="mytiddler" style.color="red" onclick="clicked">
|
||||
my tiddler
|
||||
</$droppable>
|
||||
<$droppable tag="div" class="myclass" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
|
||||
hello
|
||||
</$droppable>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="myclass tc-droppable" data-title="mytiddler" style="color:red;">my tiddler</div><div class="myclass tc-droppable" data-title="Title2" style="color:red;">hello</div></p>
|
||||
@@ -0,0 +1,27 @@
|
||||
title: Widgets/DataAttributes/LinkWidget
|
||||
description: Data Attributes for LinkWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$link data-id="mytiddler" style.color="red" to="Temp" onclick="clicked">
|
||||
link to Temp
|
||||
</$link>
|
||||
<$link tag="button" data-id={{Temp}} style.color={{{ [[Temp]get[color]] }}} to="SomeTiddler">
|
||||
some tiddler
|
||||
</$link>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><a class="tc-tiddlylink tc-tiddlylink-resolves" data-id="mytiddler" href="#Temp" style="color:red;">link to Temp</a><button class="tc-tiddlylink tc-tiddlylink-missing" data-id="Title2" draggable="true" style="color:red;">some tiddler</button></p>
|
||||
@@ -0,0 +1,15 @@
|
||||
title: Widgets/DataAttributes/OrderedStyleAttributes
|
||||
description: Ordered style attributes
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<div style="background:red;color:blue;" style.background="green">
|
||||
hello
|
||||
</div>
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div style="background:green;color:blue;">hello</div></p>
|
||||
@@ -0,0 +1,27 @@
|
||||
title: Widgets/DataAttributes/SelectWidget
|
||||
description: Data Attributes for SelectWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$select tiddler='New Tiddler' field='text' default='Choose a new text' data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}} onclick="clicked">
|
||||
<option disabled>Choose a new text</option>
|
||||
<option>A Tale of Two Cities</option>
|
||||
<option>A New Kind of Science</option>
|
||||
<option>The Dice Man</option>
|
||||
</$select>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><select data-title="Title2" value="Choose a new text" style="color:red;"><option disabled="true">Choose a new text</option><option>A Tale of Two Cities</option><option>A New Kind of Science</option><option>The Dice Man</option></select></p>
|
||||
@@ -0,0 +1,15 @@
|
||||
title: Widgets/ElementWidgetEventAttributes
|
||||
description: Element widget should not support event attributes starting with "on"
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<div class="hello" onclick="clicked">
|
||||
TiddlyWiki
|
||||
</div>
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="hello">TiddlyWiki</div></p>
|
||||
@@ -0,0 +1,15 @@
|
||||
title: Widgets/ElementWidgetStyleAttributes
|
||||
description: Element widget should support style.* attributes
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<div class="hello" onclick="clicked" style.color="blue" style.color="red" style.background="yellow">
|
||||
TiddlyWiki
|
||||
</div>
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="hello" style="color:red;background:yellow;">TiddlyWiki</div></p>
|
||||
Reference in New Issue
Block a user