Skip to content

Commit 8bf88b1

Browse files
ebullientebullient
committed
♻️ Move Checkbox template to .eta file
1 parent b5175ea commit 8bf88b1

File tree

3 files changed

+214
-208
lines changed

3 files changed

+214
-208
lines changed

‎src/snippetor-Snippetor-Templates.ts‎

Lines changed: 2 additions & 208 deletions
Original file line numberDiff line numberDiff line change
@@ -1,212 +1,6 @@
1-
export const SIMPLE_TASK = `
2-
@charset "UTF-8";
3-
/*
4-
Generated by Snippetor on <%= it.date %>.
5-
This file will be overwritten if you push the button again...
6-
*/
7-
<%
8-
const root = it.cfg.name;
9-
10-
function getForeground(e, light) {
11-
value = light ? e.lightMode.foreground : e.darkMode.foreground;
12-
return value ? value : '"inherit"'
13-
}
14-
function getBackground(e, light) {
15-
value = light ? e.lightMode.background : e.darkMode.background;
16-
return value ? value : '"transparent"'
17-
}
18-
function getTextDecoration(format) {
19-
if ( format && format.strikethrough ) {
20-
return "line-through";
21-
}
22-
return "none";
23-
}
24-
function getFontWeight(format) {
25-
if ( format && format.bold ) {
26-
return 700;
27-
}
28-
return 500;
29-
}
30-
function getFontStyle(format) {
31-
if ( format && format.italics ) {
32-
return "italic";
33-
}
34-
return "normal";
35-
}
36-
function getFontSize(format) {
37-
if ( format && format.fontSize ) {
38-
return format.fontSize;
39-
}
40-
return 14;
41-
}
42-
43-
function defineColors(i, ts) {
44-
const li = ts.li.syncTaskColor ? ts.checkbox : ts.li;
45-
%>
46-
/* '<%~ ts.data %>' for task ('- [<%~ ts.data %>]') */
47-
.theme-dark {
48-
--<%~ root %>-checkbox-<%= i %>: <% tR += getForeground(ts.checkbox, false) %>;
49-
--<%~ root %>-checkbox-bg-<%= i %>: <% tR += getBackground(ts.checkbox, false) %>;
50-
--<%~ root %>-li-<%= i %>: <% tR += getForeground(li, false) %>;
51-
--<%~ root %>-li-bg-<%= i %>: <% tR += getBackground(li, false) %>;
52-
}
53-
.theme-dark .print,
54-
.theme-light {
55-
--<%~ root %>-checkbox-<%= i %>: <% tR += getForeground(ts.checkbox, true) %>;
56-
--<%~ root %>-checkbox-bg-<%= i %>: <% tR += getBackground(ts.checkbox, true) %>;
57-
--<%~ root %>-li-<%= i %>: <% tR += getForeground(li, true) %>;
58-
--<%~ root %>-li-bg-<%= i %>: <% tR += getBackground(li, true) %>;
59-
}
60-
<%
61-
} // end defineColors
62-
63-
function checkboxSettings(i, ts) {
64-
%>
65-
position: relative;
66-
-webkit-appearance: none;
67-
box-sizing: border-box;
68-
background: var(--<%~ root %>-checkbox-bg-<%= i %>) !important; /* override theme */
69-
filter: none;
70-
color: var(--<%~ root %>-checkbox-<%= i %>);
71-
font-family: var(--font-monospace);
72-
border-width: 1px;
73-
border-style: solid;
74-
<% if (it.cfg.borderRadius) { %>
75-
border-radius: <%~ it.cfg.borderRadius %>%;
76-
<% } %>
77-
<% if (ts.checkbox.preventClick) { %>
78-
pointer-events: none;
79-
cursor: not-allowed;
80-
<% } %>
81-
<% if (ts.checkbox.hideBorder) { %>
82-
border-color: transparent !important;
83-
<% } else { %>
84-
border-color: var(--<%~ root %>-checkbox-<%= i %>) !important;
85-
<% }
86-
} // end checkboxSettings
87-
88-
function marginSettings(cm6, preview) {
89-
%>
90-
body:not(.is-mobile) <%~ cm6 %>,
91-
body:not(.is-mobile) <%~ preview %> {
92-
margin-top: 2px;
93-
margin-bottom: 1px;
94-
}
95-
body.is-mobile <%~ cm6 %>,
96-
body.is-mobile <%~ preview %> {
97-
margin-top: 1px;
98-
margin-bottom: 0;
99-
}
100-
<%
101-
} // end margins
102-
103-
function pseudoElementSettings(i, ts) {
104-
%>
105-
font-family: var(--font-monospace);
106-
transform: !important; /* override theme */
107-
-webkit-mask-image: !important; /* override theme */
108-
background: none;
109-
position: absolute;
110-
text-align: center;
111-
font-weight: 500;
112-
font-size: <%~ getFontSize(ts.checkbox.format) %>px;
113-
line-height: <%~ getFontSize(ts.checkbox.format) %>px;
114-
<% if (ts.checkbox.top) { %>
115-
top: <%~ ts.checkbox.top %>px;
116-
<% } else { %>
117-
top: 0;
118-
<% }
119-
if (ts.checkbox.left) { %>
120-
left: <%~ ts.checkbox.left %>px;
121-
<% } else { %>
122-
left: 1px;
123-
<% } %>
124-
right: 1px;
125-
color: var(--<%~ root %>-checkbox-<%= i %>);
126-
content: '<% tR += ts.checkbox.readModeData ? ts.checkbox.readModeData : ts.data %>';
127-
<%
128-
} // end pseudoElementSettings
129-
130-
function listElementSettings(i, ts) {
131-
%>
132-
text-decoration: <%~ getTextDecoration(ts.li.format) %> !important; /* override theme */
133-
font-weight: <%~ getFontWeight(ts.li.format) %>;
134-
font-style: <%~ getFontStyle(ts.li.format) %>;
135-
color: var(--<%~ root %>-li-<%= i %>);
136-
background-color: var(--<%~ root %>-li-bg-<%= i %>);
137-
<%
138-
} // end listElementSettings
139-
140-
// UNCHECKED TASKS ---------
141-
if (it.cfg.styleUncheckedTask && it.cfg.uncheckedTask) {
142-
const ts = it.cfg.uncheckedTask;
143-
const i = "u";
144-
defineColors(i, ts);
145-
%>
146-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox][data-task=" "].task-list-item-checkbox:not(:checked)::before,
147-
.markdown-preview-view ul.contains-task-list > li[data-task=""].task-list-item input[type=checkbox].task-list-item-checkbox:not(:checked)::before {
148-
<% pseudoElementSettings(i, ts); %>
149-
}
150-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox][data-task=" "].task-list-item-checkbox:not(:checked),
151-
.markdown-preview-view ul.contains-task-list > li[data-task=""].task-list-item input[type=checkbox].task-list-item-checkbox:not(:checked) {
152-
<% checkboxSettings(i, ts); %>
153-
}
154-
<% marginSettings(
155-
'.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox][data-task=" "].task-list-item-checkbox:not(:checked)',
156-
'.markdown-preview-view ul.contains-task-list > li[data-task=""].task-list-item input[type=checkbox].task-list-item-checkbox:not(:checked)'
157-
); %>
158-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "],
159-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox].task-list-item-checkbox[data-task=" "] + span,
160-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox].task-list-item-checkbox[data-task=" "] + span + span,
161-
.markdown-preview-view ul.contains-task-list > li[data-task=""].task-list-item:not(.is-checked) {
162-
<% listElementSettings(i, ts); %>
163-
}
164-
<% } // END IF UNCHECKED
165-
166-
// EVERYTHING ELSE ----------------
167-
const list = it.cfg.taskSettings.filter((ts) => ts.data !== "" && ts.data != " ");
168-
for (let i = 0; i < list.length; i++) {
169-
let ts = list[i];
170-
defineColors(i, ts); %>
171-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<%~ ts.data %>"] input[type=checkbox][data-task="<%~ ts.data %>"].task-list-item-checkbox:checked::before,
172-
.markdown-preview-view ul.contains-task-list > li[data-task="<%~ ts.data %>"].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before {
173-
<% pseudoElementSettings(i, ts); %>
174-
}
175-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<%~ ts.data %>"] input[type=checkbox][data-task="<%~ ts.data %>"].task-list-item-checkbox:checked,
176-
.markdown-preview-view ul.contains-task-list > li[data-task="<%~ ts.data %>"].task-list-item input[type=checkbox].task-list-item-checkbox:checked {
177-
<% checkboxSettings(i, ts); %>
178-
}
179-
<% marginSettings(
180-
'.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="' + ts.data + '"] input[type=checkbox][data-task="' + ts.data + '"].task-list-item-checkbox:checked',
181-
'.markdown-preview-view ul.contains-task-list > li[data-task="' + ts.data + '"].task-list-item input[type=checkbox].task-list-item-checkbox:checked'
182-
); %>
183-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<%~ ts.data %>"],
184-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<%~ ts.data %>"] input[type=checkbox].task-list-item-checkbox[data-task="<%~ ts.data %>"] + span,
185-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<%~ ts.data %>"] input[type=checkbox].task-list-item-checkbox[data-task="<%~ ts.data %>"] + span + span,
186-
.markdown-preview-view ul.contains-task-list > li[data-task="<%~ ts.data %>"].task-list-item.is-checked {
187-
<% listElementSettings(i, ts); %>
188-
}
189-
<% } // end if unchecked %>
190-
191-
/* Consistent hover colors */
192-
<% if (it.cfg.styleUncheckedTask && it.cfg.uncheckedTask) { %>
193-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox][data-task=" "].task-list-item-checkbox:not(:checked):hover,
194-
.markdown-preview-view ul.contains-task-list > li[data-task=""].task-list-item input[type=checkbox].task-list-item-checkbox:not(:checked):hover,
195-
<% } %>
196-
<%
197-
const max = it.cfg.taskSettings.length - 1;
198-
for (let i = 0; i <= max; i++) {
199-
let ts = it.cfg.taskSettings[i];
200-
%>
201-
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<%~ ts.data %>"] input[type=checkbox][data-task="<%~ ts.data %>"].task-list-item-checkbox:checked:hover,
202-
.markdown-preview-view ul.contains-task-list > li[data-task="<%~ ts.data %>"].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover<% tR += (i < max) ? ',' : '{' %>
203-
<% } %>
204-
color: var(--text-on-accent) !important;
205-
background-color: var(--interactive-accent-hover) !important;
206-
border-color: var(--text-on-accent) !important;
207-
}
208-
`;
1+
import TASK_TEMPLATE from "./templates/CHECKBOXES.eta";
2092

3+
export const SIMPLE_TASK = TASK_TEMPLATE;
2104

2115
import FOLDER_TEMPLATE from "./templates/COLORED_FOLDER.eta";
2126

0 commit comments

Comments
 (0)