From 34bdd7a52e276e70a9da339c12dfecde25755e1c Mon Sep 17 00:00:00 2001 From: HydroWood <2242730098@qq.com> Date: Mon, 24 Jun 2024 15:18:53 +1000 Subject: [PATCH 1/3] 0.1.6: New option to hide the input form group above the checklist --- js/checkbox-wikirule.js | 13 ++++++++ tiddlers/config.tid | 11 +++++-- tiddlers/stylesheet.tid | 67 ++++++++++------------------------------- 3 files changed, 38 insertions(+), 53 deletions(-) diff --git a/js/checkbox-wikirule.js b/js/checkbox-wikirule.js index 9195b19..f504e05 100644 --- a/js/checkbox-wikirule.js +++ b/js/checkbox-wikirule.js @@ -20,6 +20,16 @@ exports.init = function(parser) { this.matchRegExp = /^\[([ xX])\] .*$/mg; }; + /*New option to hide the input form group above the checklist*/ +exports.showInput= function() { + var configWidgetTitle = "$:/plugins/tgrosinger/tw5-checklist/Configuration"; + var configWidgetFields = $tw.wiki.getTiddler(configWidgetTitle).fields; + + var showInputBlock = configWidgetFields["show-input"] || "true"; + return (showInputBlock === "true"); +} + + /* Retrieve the configuration state of the clear all button */ @@ -45,6 +55,9 @@ exports.parse = function() { listItems.push({ type: "element", tag: "li", + attributes: { + class: {type: "string", value: (this.showInput()?"":"hideme")} + }, children: [ { type: "element", diff --git a/tiddlers/config.tid b/tiddlers/config.tid index 90077bd..f198495 100644 --- a/tiddlers/config.tid +++ b/tiddlers/config.tid @@ -9,6 +9,13 @@ Please see the [[homepage|https://grosinger.net/tw5-checklist/]] for more inform Save and reload the wiki to activate changes. + + + + @@ -46,4 +53,4 @@ Save and reload the wiki to activate changes. content: ' *'; color: #e32; } - + \ No newline at end of file diff --git a/tiddlers/stylesheet.tid b/tiddlers/stylesheet.tid index 29f4a1b..e49acb4 100644 --- a/tiddlers/stylesheet.tid +++ b/tiddlers/stylesheet.tid @@ -6,19 +6,17 @@ ul.checklist { margin: 0; padding: 0; } - ul.checklist > li { position: relative; width: calc(100% - 1em); } - - /* input form */ - +.hideme { + display:none; +} .checklist-newitem-icon::before { content: "✎"; } - input.checklist-newitem { margin-left: 1em; margin-bottom: 0.75em; @@ -28,43 +26,20 @@ input.checklist-newitem { transition: border 0.3s; width: calc(100% - 2em - 20px); } - input:focus.checklist-newitem { border-bottom: solid 2px <>; } - - /* placeholder text */ - -::-webkit-input-placeholder { - color: #444; - font-style: italic; -} -::-moz-placeholder { - color: #444; - font-style: italic; -} -:-ms-input-placeholder { - color: #444; - font-style: italic; -} -:-moz-placeholder { - color: #444; - font-style: italic; -} -::placeholder { - color: #444; - font-style: italic; -} - - +-webkit-input-placeholder { color: #444; font-style: italic; } +::-moz-placeholder { color: #444; font-style: italic; } +:-ms-input-placeholder { color: #444; font-style: italic; } +:-moz-placeholder { color: #444; font-style: italic; } +::placeholder { color: #444; font-style: italic; } /* list items content */ - .checklist li input[type="checkbox"] { vertical-align: top; margin-top: 4px; } - .checklist label { display: inline-block; position: relative; @@ -73,24 +48,20 @@ input:focus.checklist-newitem { left: 1.4em; width: calc(100% - 2em - 20px); } - .checklist > li:hover label, .checklist input[type="checkbox"]:hover + button + label, .checklist input[type="checkbox"]:focus + button + label { background-color: <>; } - input:checked + .checklist-remove + label { opacity: 0.5; } - .checklist li input + .checklist-remove:hover + label, .checklist li input + .checklist-remove:focus + label { background-color: rgba(255,0,0,0.25); opacity: 0.8; border-radius: 5px; } - /* strike checked items only if set in user configuration */ <$list filter="[[$:/plugins/tgrosinger/tw5-checklist/Configuration]field:strike-checked[true]]"> input:checked + .checklist-remove + label { @@ -100,21 +71,20 @@ input:checked + .checklist-remove + label { /* buttons */ - button.checklist-add { position: relative; left: 0.75em; width: 18px; height: 18px; border-radius: 5px; -background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%3E%0A%3Crect%20width%3D%221%22%20height%3D%227%22%20x%3D%225%22%20y%3D%222%22%20fill%3D%22%239B9B9B%22%2F%3E%0A%3Crect%20width%3D%227%22%20height%3D%221%22%20x%3D%222%22%20y%3D%225%22%20fill%3D%22%239B9B9B%22%2F%3E%0A%3C%2Fsvg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%3E%0A%3Crect%20width%3D%221%22%20height%3D%227%22%20x%3D%225%22%20y%3D%222%22%20fill%3D%22%239B9B9B%22%2F%3E%0A%3Crect%20width%3D%227%22%20height%3D%221%22%20x%3D%222%22%20y%3D%225%22%20fill%3D%22%239B9B9B%22%2F%3E%0A%3C%2Fsvg%3E'); background-size: 100%; + display: inline-block; /* Change to inline-block */ + vertical-align: top; /* Align with input */ } - button.checklist-add:hover, button.checklist-add:focus { background-color: <>; } - button.checklist-remove { display: block; position: absolute; @@ -124,33 +94,28 @@ button.checklist-remove { height: 18px; border-radius: 5px; color: <>; -background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%3E%0A%3Crect%20width%3D%225%22%20height%3D%221%22%20x%3D%223%22%20y%3D%225%22%20fill%3D%22%23444%22%2F%3E%0A%3C%2Fsvg%3E'); + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%3E%0A%3Crect%20width%3D%225%22%20height%3D%221%22%20x%3D%223%22%20y%3D%225%22%20fill%3D%22%23444%22%2F%3E%0A%3C%2Fsvg%3E'); background-size: 100%; /* background-color: <>; */ border: 1px solid <>; } - ul.checklist > li:hover button.checklist-remove { color: <>; } - button.checklist-remove:hover, button.checklist-remove:focus { color: <>; background-color: <>; } - button.checklist-clearall { margin-top: 0.75em; + display: inline-block; /* Change to inline-block */ + vertical-align: top; /* Align with input and add button */ } - button.checklist-clearall::before { content: "↻ "; } - - -/* visualliy hidden, accessible for screen reader */ - +/* visually hidden, accessible for screen reader */ .checklist-vh { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); @@ -159,4 +124,4 @@ button.checklist-clearall::before { height: 1px !important; width: 1px !important; overflow: hidden; -} +} \ No newline at end of file From f2e4d8a120959766b2bf86306cc5e3f50c604f70 Mon Sep 17 00:00:00 2001 From: HydroWood <2242730098@qq.com> Date: Mon, 24 Jun 2024 15:36:37 +1000 Subject: [PATCH 2/3] 0.17: Modify the CSS so that all the input and buttons incluing"Clear all" are all displayed on the first line. --- tiddlers/stylesheet.tid | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/tiddlers/stylesheet.tid b/tiddlers/stylesheet.tid index e49acb4..05ba9ca 100644 --- a/tiddlers/stylesheet.tid +++ b/tiddlers/stylesheet.tid @@ -5,10 +5,15 @@ ul.checklist { list-style: none; margin: 0; padding: 0; + display: grid; + /* Set grid-template-columns to two columns, and use the minmax function to ensure that the first column has at least enough space to accommodate the input box and add button */ + grid-template-columns: minmax(0, 1fr) auto; + grid-auto-rows: min-content; /* Ensure that the height of each row is automatically adjusted according to the content */ } ul.checklist > li { position: relative; width: calc(100% - 1em); + grid-column: span 2; /*The default is to fill both columns of the gird*/ } /* input form */ .hideme { @@ -24,7 +29,9 @@ input.checklist-newitem { border: none; border-bottom: solid 2px <>; transition: border 0.3s; - width: calc(100% - 2em - 20px); + width: calc(100% - 2em - 20px - 18px); /* Adjust width to fit + button */ + display: inline-block; /* Change to inline-block */ + vertical-align: top; /* Align with button */ } input:focus.checklist-newitem { border-bottom: solid 2px <>; @@ -80,7 +87,10 @@ button.checklist-add { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%3E%0A%3Crect%20width%3D%221%22%20height%3D%227%22%20x%3D%225%22%20y%3D%222%22%20fill%3D%22%239B9B9B%22%2F%3E%0A%3Crect%20width%3D%227%22%20height%3D%221%22%20x%3D%222%22%20y%3D%225%22%20fill%3D%22%239B9B9B%22%2F%3E%0A%3C%2Fsvg%3E'); background-size: 100%; display: inline-block; /* Change to inline-block */ + /* align-self: center;*/ vertical-align: top; /* Align with input */ + border: 1px solid <>; /* Add border similar to clearall button */ + cursor: pointer; /* Change cursor to pointer on hover */ } button.checklist-add:hover, button.checklist-add:focus { background-color: <>; @@ -108,13 +118,17 @@ button.checklist-remove:focus { background-color: <>; } button.checklist-clearall { - margin-top: 0.75em; + /*margin-top: 0.75em;*/ display: inline-block; /* Change to inline-block */ vertical-align: top; /* Align with input and add button */ + white-space: nowrap; /* Display without wrapping */ } button.checklist-clearall::before { content: "↻ "; } +button.checklist-clearall:hover { + background-color: <>; /* Add hover effects such as background color changes */ +} /* visually hidden, accessible for screen reader */ .checklist-vh { position: absolute !important; @@ -124,4 +138,22 @@ button.checklist-clearall::before { height: 1px !important; width: 1px !important; overflow: hidden; +} + +ul.checklist > li:last-child:has(button.checklist-clearall) { + grid-column: 2; + grid-row: 1; + vertical-align: top; + /*align-self: center;*/ + display: inline-block; /* Add display: inline-block */ +} +ul.checklist > li:first-child:has(input.checklist-newitem) { + grid-column: 1; + grid-row: 1; + /*align-self: center*/; /* Consistent vertical alignment with input boxes and add buttons */ + /*line-height: 1.5em; */ /* Manually set the line height to match the height of the input box */ +} +/* When the Clear All button is not present, the first line takes up the entire line */ +ul.checklist > li:first-child:has(input.checklist-newitem):not(:has(~ li:has(button.checklist-clearall))) { + grid-column: span 2; } \ No newline at end of file From b559665a2957e231a2b6ba80b06d3bd13b8a761e Mon Sep 17 00:00:00 2001 From: HydroWood <2242730098@qq.com> Date: Wed, 26 Jun 2024 06:32:19 +1000 Subject: [PATCH 3/3] Feat: Change the delete key to comment, visible in edit mode, to ensure data security! --- js/checkbox-wikirule.js | 27 +++++++++++++++------- js/checklist.js | 50 +++++++++++++++++++++++++---------------- 2 files changed, 50 insertions(+), 27 deletions(-) diff --git a/js/checkbox-wikirule.js b/js/checkbox-wikirule.js index f504e05..fdd6657 100644 --- a/js/checkbox-wikirule.js +++ b/js/checkbox-wikirule.js @@ -14,13 +14,13 @@ exports.name = "checkbox"; exports.types = {inline: true}; exports.init = function(parser) { - this.parser = parser; + this.parser = parser; - // Match on [ ], [x], and [X], to the end of the line - this.matchRegExp = /^\[([ xX])\] .*$/mg; + // 匹配 [ ], [x], [X] 和 HTML 注释 + this.matchRegExp = /^(?:)?(?:\[\s*([ xX])\]\s*(.*))$/mg; }; - /*New option to hide the input form group above the checklist*/ +/*New option to hide the input form group above the checklist*/ exports.showInput= function() { var configWidgetTitle = "$:/plugins/tgrosinger/tw5-checklist/Configuration"; var configWidgetFields = $tw.wiki.getTiddler(configWidgetTitle).fields; @@ -29,7 +29,7 @@ exports.showInput= function() { return (showInputBlock === "true"); } - + /* Retrieve the configuration state of the clear all button */ @@ -119,9 +119,18 @@ exports.parse = function() { do { var startPos = this.parser.pos; this.parser.pos = this.matchRegExp.lastIndex; + + // 检查是否为注释行 + var isCommented = this.parser.source.substring(startPos, startPos + 4) === "")) { + commentedItems.push(bodyList[i]); + } else { + activeItems.push(bodyList[i]); + } + } + + // 对未注释的行进行排序或重新排列 if (shouldMove) { - // Find the index of the first checked item - if (shouldSort){ - // sort by items subject, grouping checked and unchecked - bodyList.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }); - }else{ - // Order only by 3 first chars, so we have order by grouping check and unchecked - bodyList.sort(function (a, b) { return a.substring(0, 3).toLowerCase().localeCompare(b.substring(0, 3).toLowerCase()); }); + if (shouldSort) { + activeItems.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }); + } else { + // 移除注释标记后再排序 + activeItems.sort(function (a, b) { return a.replace(//g, "").trim().toLowerCase().localeCompare(b.replace(//g, "").trim().toLowerCase()); }); } - }else if(shouldSort){ - // sort by items subject - bodyList.sort(function (a, b) { return a.substring(3).toLowerCase().localeCompare(b.substring(3).toLowerCase()); }); + } else if (shouldSort) { + activeItems.sort(function (a, b) { return a.replace(//g, "").trim().toLowerCase().localeCompare(b.replace(//g, "").trim().toLowerCase()); }); } + + // 将排序/重新排列后的 activeItems 和注释行合并 + bodyList = activeItems.concat(commentedItems); // Save the updated body var newBody = tiddlerBody.substring(0, this.startPos) + - bodyList.join("\n") + - tiddlerBody.substring(this.stopPos); + bodyList.join("\n") + + tiddlerBody.substring(this.stopPos); $tw.wiki.setText(this.tiddlerTitle, "text", null, newBody); } @@ -215,10 +227,10 @@ CheckListWidget.prototype.handleRemoveEvent = function (event) { var bodyList = tiddlerBody.substring(this.startPos, this.stopPos).split("\n"); // Update the tiddler data - bodyList.splice(itemIndex, 1); + bodyList[itemIndex] = ``; var newBody = tiddlerBody.substring(0, this.startPos) + - bodyList.join("\n") + - tiddlerBody.substring(this.stopPos); + bodyList.join("\n") + + tiddlerBody.substring(this.stopPos); $tw.wiki.setText(this.tiddlerTitle, "text", null, newBody); }; @@ -241,4 +253,4 @@ CheckListWidget.prototype.refresh = function(changedTiddlers) { exports.checklist = CheckListWidget; -})(); +})(); \ No newline at end of file
Show input box for new entries above the list: + <$checkbox field="show-input" tiddler="$:/plugins/tgrosinger/tw5-checklist/Configuration" + checked="true" unchecked="false" default="true"> +
Rearrange checked items: @@ -27,7 +34,7 @@ Save and reload the wiki to activate changes. Sort list alphabetically: <$checkbox field="sort-alphabetically" tiddler="$:/plugins/tgrosinger/tw5-checklist/Configuration" - checked="true" unchecked="false" default="false"> + checked="true" unchecked="false" default="true">