Skip to content

Significant optimization + beautification #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Significant optimization + beautification #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34bdd7a
0.1.6: New option to hide the input form group above the checklist
GitnubIsShit Jun 24, 2024
f2e4d8a
0.17: Modify the CSS so that all the input and buttons incluing"Clear…
GitnubIsShit Jun 24, 2024
b559665
Feat: Change the delete key to comment, visible in edit mode, to ensu…
GitnubIsShit Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 30 additions & 6 deletions js/checkbox-wikirule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,22 @@ 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*(.*?)-->)?(?:\[\s*([ xX])\]\s*(.*))$/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
*/
Expand All @@ -45,6 +55,9 @@ exports.parse = function() {
listItems.push({
type: "element",
tag: "li",
attributes: {
class: {type: "string", value: (this.showInput()?"":"hideme")}
},
children: [
{
type: "element",
Expand Down Expand Up @@ -106,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) === "<!--";

// 提取 checkbox 状态和内容
var checkboxState = isCommented ? match[1] : match[3];
var content = isCommented ? match[2] : match[4];

// 解析列表项内容，跳过注释标记
var parseResults = this.parser.wiki.parseText(
"text/vnd.tiddlywiki",
this.parser.source.substring(startPos + 4, this.parser.pos),
content.trim(),
{parseAsInline: true});

// Use the listitem body as a label for the checkbox to get better accessibility
Expand All @@ -130,10 +152,12 @@ exports.parse = function() {
id: {type: "string", value: match.index}
}
};
if (match[1] === "x" || match[1] === "X") {
// 根据 checkboxState 设置 checked 属性
if (checkboxState === "x" || checkboxState === "X") {
checkbox.attributes.checked = {type: "boolean", value: true};
}


// Make a button to delete the item
var removelabel = {
type: "element",
Expand Down Expand Up @@ -213,4 +237,4 @@ exports.parse = function() {
}];
};

})();
})();
50 changes: 31 additions & 19 deletions js/checklist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,8 @@ CheckListWidget.prototype.handleClearChecksEvent = function(event) {

// 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);
};

Expand All @@ -133,25 +133,37 @@ CheckListWidget.prototype.reorderList = function(event, bodyList) {
// Sort items (if configured to do so)
var shouldSort = this.shouldSort();

// These are all combinations
// 分离注释行和活动行
var activeItems = [];
var commentedItems = [];
for (var i = 0; i < bodyList.length; i++) {
// 检查是否为注释行，使用 trim() 去除首尾空格
if (bodyList[i].trim().startsWith("<!--") && bodyList[i].trim().endsWith("-->")) {
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);

}
Expand Down Expand Up @@ -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] = `<!-- ${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);
};

Expand All @@ -241,4 +253,4 @@ CheckListWidget.prototype.refresh = function(changedTiddlers) {

exports.checklist = CheckListWidget;

})();
})();
11 changes: 9 additions & 2 deletions tiddlers/config.tid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ Please see the [[homepage|https://grosinger.net/tw5-checklist/]] for more inform
Save and reload the wiki to activate changes.

<table>
<tr>
<th align="left">Show input box for new entries above the list:</th>
<td>
<$checkbox field="show-input" tiddler="$:/plugins/tgrosinger/tw5-checklist/Configuration"
checked="true" unchecked="false" default="true"></$checkbox>
</td>
</tr>
<tr>
<th align="left">Rearrange checked items:</th>
<td>
Expand All @@ -27,7 +34,7 @@ Save and reload the wiki to activate changes.
<th align="left" class="rerendering-required">Sort list alphabetically: </th>
<td>
<$checkbox field="sort-alphabetically" tiddler="$:/plugins/tgrosinger/tw5-checklist/Configuration"
checked="true" unchecked="false" default="false"></$checkbox>
checked="true" unchecked="false" default="true"></$checkbox>
</td>
</tr>
<tr>
Expand All @@ -46,4 +53,4 @@ Save and reload the wiki to activate changes.
content: ' *';
color: #e32;
}
</style>
</style>
101 changes: 49 additions & 52 deletions tiddlers/stylesheet.tid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,48 @@ 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 {
display:none;
}
.checklist-newitem-icon::before {
content: "&#x270e;";
}

input.checklist-newitem {
margin-left: 1em;
margin-bottom: 0.75em;
padding: 2px;
border: none;
border-bottom: solid 2px <<colour sidebar-tab-background>>;
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 <<colour notification-border>>;
}


/* 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;
Expand All @@ -73,24 +55,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: <<colour sidebar-tab-background>>;
}

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 {
Expand All @@ -100,21 +78,23 @@ 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 */
/* align-self: center;*/
vertical-align: top; /* Align with input */
border: 1px solid <<colour sidebar-tab-background>>; /* Add border similar to clearall button */
cursor: pointer; /* Change cursor to pointer on hover */
}

button.checklist-add:hover, button.checklist-add:focus {
background-color: <<colour sidebar-tab-background>>;
}

button.checklist-remove {
display: block;
position: absolute;
Expand All @@ -124,33 +104,32 @@ button.checklist-remove {
height: 18px;
border-radius: 5px;
color: <<colour sidebar-muted-foreground>>;
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: <<colour sidebar-tab-background-selected>>; */
border: 1px solid <<colour sidebar-tab-background>>;
}

ul.checklist > li:hover button.checklist-remove {
color: <<colour sidebar-muted-foreground-hover>>;
}

button.checklist-remove:hover,
button.checklist-remove:focus {
color: <<colour dirty-indicator>>;
background-color: <<colour sidebar-tab-background>>;
}

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: "↻ ";
}


/* visualliy hidden, accessible for screen reader */

button.checklist-clearall:hover {
background-color: <<colour sidebar-tab-background>>; /* Add hover effects such as background color changes */
}
/* visually hidden, accessible for screen reader */
.checklist-vh {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
Expand All @@ -160,3 +139,21 @@ button.checklist-clearall::before {
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;
}