Skip to content

Commit 3972f8d

Browse files
samliewsamliew
authored
Merge pull request #58 from samliew/copilot/add-sub-issue-for-issue-45
Add description to Classes fieldset in Event Editor
2 parents b2155bd + 969f581 commit 3972f8d

3 files changed

Lines changed: 190 additions & 10 deletions

File tree

‎assets/css/editor.css‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ fieldset > legend:first-child {
8888
font-size: 0.75rem;
8989
color: #888;
9090
}
91+
fieldset > legend.w-label + .info {
92+
margin-bottom: 1.0rem;
93+
}
9194

9295
.event-editor .w-button.w-button-secondary {
9396
background-color: #888;
@@ -96,22 +99,26 @@ fieldset > legend:first-child {
9699
background-color: #d04343;
97100
}
98101

99-
.event-editor .class-grid {
102+
.event-editor .class-grid,
103+
.event-editor .type-grid {
100104
display: grid;
101105
grid-template-columns: repeat(3, auto);
102106
grid-gap: 10px;
103107
align-items: start;
104108
}
105-
.event-editor .class-grid > .form-row-inline {
109+
.event-editor .class-grid > .form-row-inline,
110+
.event-editor .type-grid > .form-row-inline {
106111
display: inline-flex;
107112
align-items: center;
108113
justify-content: flex-start;
109114
flex-wrap: wrap;
110115
}
111-
.event-editor .class-grid .w-checkbox {
116+
.event-editor .class-grid .w-checkbox,
117+
.event-editor .type-grid .w-checkbox {
112118
margin-right: 5px;
113119
}
114-
.event-editor .class-grid .info {
120+
.event-editor .class-grid .info,
121+
.event-editor .type-grid .info {
115122
display: block;
116123
flex-basis: 100%;
117124
padding-left: calc(1rem + 5px);
@@ -242,7 +249,8 @@ fieldset > legend:first-child {
242249

243250
/* Mobile Only */
244251
@media (max-width: 767px) {
245-
.event-editor .class-grid {
252+
.event-editor .class-grid,
253+
.event-editor .type-grid {
246254
grid-template-columns: repeat(2, auto);
247255
}
248256
.event-editor .link-grid,

‎assets/js/editor.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ const toSlug = str => str?.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-
157157
data[key] = values;
158158
};
159159
join('classes');
160+
join('type');
161+
data.type = data.type.join(' ');
160162

161163
// Join links
162164
const linkText = [...form.querySelectorAll('.linkText')].map(v => v.value)
@@ -224,6 +226,25 @@ const toSlug = str => str?.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-
224226
});
225227
}
226228

229+
// If type field, update checkboxes and manual field
230+
if (key === 'type') {
231+
const manualField = document.querySelector('#type_manual');
232+
manualField.value = '';
233+
const values = (typeof value === 'string' ? value.split(/\s+/) : Array.isArray(value) ? value : []).filter(Boolean);
234+
values.forEach(v => {
235+
const checkbox = document.querySelector(`[name="type"][value="${CSS.escape(v)}"]`);
236+
if (checkbox) {
237+
checkbox.checked = true;
238+
}
239+
else if (manualField.value.length) {
240+
manualField.value += `, ${v}`;
241+
}
242+
else {
243+
manualField.value = v;
244+
}
245+
});
246+
}
247+
227248
// If links field, update links
228249
if (key === 'links') {
229250
document.querySelectorAll('.linkText').forEach((el, i) => {
@@ -295,6 +316,11 @@ const toSlug = str => str?.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-
295316
}
296317
}
297318

319+
// If manual type field, remove disallowed characters
320+
if (field.id === 'type_manual') {
321+
field.value = field.value.replace(/[^a-z0-9, -]/gi, '').trim();
322+
}
323+
298324
// If url field, and does not start with http, prepend with https://
299325
if (field.type === 'url' && notEmpty && !field.value.match(/^https?:\/\//)) {
300326
field.value = `https://${field.value}`;

‎event-editor/index.html‎

Lines changed: 151 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,6 @@ <h1 class="main-title">Event Editor</h1>
6464
<div class="info">this is auto-generated if not set</div>
6565
<input class="w-input" type="text" name="slug" id="slug" maxlength="500" pattern="^([a-z0-9]|-)+$">
6666
</div>
67-
<div class="form-row">
68-
<label class="w-label" for="type">Type</label>
69-
<div class="info">describe the event using single words</div>
70-
<input class="w-input" type="text" name="type" id="type" maxlength="140" placeholder="chat blog licensing moderators staff resignation company">
71-
</div>
7267
<div class="form-row">
7368
<label class="w-label" for="summary">Summary</label>
7469
<div class="info">a short summary, displayed in italics under the title</div>
@@ -79,8 +74,159 @@ <h1 class="main-title">Event Editor</h1>
7974
<div class="info">ctrl+click to open links in a new window</div>
8075
<textarea class="w-input" type="text" name="body" id="body" rows="3" class="w-input" style="width: 100%; min-height: 150px; resize: vertical;" required></textarea>
8176
</div>
77+
<fieldset>
78+
<legend class="w-label">Type</legend>
79+
<div class="info">for grouping similar events, for easier browser page search</div>
80+
<div class="form-row">
81+
<label class="w-label" for="type_manual">Manual</label>
82+
<input class="w-input" type="text" name="type" id="type_manual" placeholder="custom-type-1, custom-type-2">
83+
</div>
84+
<div class="type-grid">
85+
<div class="form-row-inline">
86+
<input class="w-checkbox" type="checkbox" name="type" id="type_advertising" value="advertising">
87+
<label class="w-label" for="type_advertising">advertising</label>
88+
<div class="info">advertising-related event</div>
89+
</div>
90+
<div class="form-row-inline">
91+
<input class="w-checkbox" type="checkbox" name="type" id="type_april-fools" value="april-fools">
92+
<label class="w-label" for="type_april-fools">april-fools</label>
93+
<div class="info">April Fools' Day event</div>
94+
</div>
95+
<div class="form-row-inline">
96+
<input class="w-checkbox" type="checkbox" name="type" id="type_blog" value="blog">
97+
<label class="w-label" for="type_blog">blog</label>
98+
<div class="info">related to a blog post</div>
99+
</div>
100+
<div class="form-row-inline">
101+
<input class="w-checkbox" type="checkbox" name="type" id="type_ceo" value="ceo">
102+
<label class="w-label" for="type_ceo">ceo</label>
103+
<div class="info">CEO-related event</div>
104+
</div>
105+
<div class="form-row-inline">
106+
<input class="w-checkbox" type="checkbox" name="type" id="type_charity" value="charity">
107+
<label class="w-label" for="type_charity">charity</label>
108+
<div class="info">charity event</div>
109+
</div>
110+
<div class="form-row-inline">
111+
<input class="w-checkbox" type="checkbox" name="type" id="type_community-event" value="community-event">
112+
<label class="w-label" for="type_community-event">community-event</label>
113+
<div class="info">community event</div>
114+
</div>
115+
<div class="form-row-inline">
116+
<input class="w-checkbox" type="checkbox" name="type" id="type_company" value="company">
117+
<label class="w-label" for="type_company">company</label>
118+
<div class="info">company-related event</div>
119+
</div>
120+
<div class="form-row-inline">
121+
<input class="w-checkbox" type="checkbox" name="type" id="type_data-dump" value="data-dump">
122+
<label class="w-label" for="type_data-dump">data-dump</label>
123+
<div class="info">data dump event</div>
124+
</div>
125+
<div class="form-row-inline">
126+
<input class="w-checkbox" type="checkbox" name="type" id="type_design" value="design">
127+
<label class="w-label" for="type_design">design</label>
128+
<div class="info">design change</div>
129+
</div>
130+
<div class="form-row-inline">
131+
<input class="w-checkbox" type="checkbox" name="type" id="type_experiment" value="experiment">
132+
<label class="w-label" for="type_experiment">experiment</label>
133+
<div class="info">experimental feature</div>
134+
</div>
135+
<div class="form-row-inline">
136+
<input class="w-checkbox" type="checkbox" name="type" id="type_feature" value="feature">
137+
<label class="w-label" for="type_feature">feature</label>
138+
<div class="info">feature change or launch</div>
139+
</div>
140+
<div class="form-row-inline">
141+
<input class="w-checkbox" type="checkbox" name="type" id="type_fired" value="fired">
142+
<label class="w-label" for="type_fired">fired</label>
143+
<div class="info">termination event</div>
144+
</div>
145+
<div class="form-row-inline">
146+
<input class="w-checkbox" type="checkbox" name="type" id="type_hired" value="hired">
147+
<label class="w-label" for="type_hired">hired</label>
148+
<div class="info">hiring event</div>
149+
</div>
150+
<div class="form-row-inline">
151+
<input class="w-checkbox" type="checkbox" name="type" id="type_hosting" value="hosting">
152+
<label class="w-label" for="type_hosting">hosting</label>
153+
<div class="info">hosting-related event</div>
154+
</div>
155+
<div class="form-row-inline">
156+
<input class="w-checkbox" type="checkbox" name="type" id="type_licensing" value="licensing">
157+
<label class="w-label" for="type_licensing">licensing</label>
158+
<div class="info">licensing change</div>
159+
</div>
160+
<div class="form-row-inline">
161+
<input class="w-checkbox" type="checkbox" name="type" id="type_meta" value="meta">
162+
<label class="w-label" for="type_meta">meta</label>
163+
<div class="info">Meta discussion</div>
164+
</div>
165+
<div class="form-row-inline">
166+
<input class="w-checkbox" type="checkbox" name="type" id="type_moderator" value="moderator">
167+
<label class="w-label" for="type_moderator">moderator</label>
168+
<div class="info">moderator-related event</div>
169+
</div>
170+
<div class="form-row-inline">
171+
<input class="w-checkbox" type="checkbox" name="type" id="type_policy" value="policy">
172+
<label class="w-label" for="type_policy">policy</label>
173+
<div class="info">policy change</div>
174+
</div>
175+
<div class="form-row-inline">
176+
<input class="w-checkbox" type="checkbox" name="type" id="type_product" value="product">
177+
<label class="w-label" for="type_product">product</label>
178+
<div class="info">product update</div>
179+
</div>
180+
<div class="form-row-inline">
181+
<input class="w-checkbox" type="checkbox" name="type" id="type_reinstatement" value="reinstatement">
182+
<label class="w-label" for="type_reinstatement">reinstatement</label>
183+
<div class="info">reinstatement event</div>
184+
</div>
185+
<div class="form-row-inline">
186+
<input class="w-checkbox" type="checkbox" name="type" id="type_reputation" value="reputation">
187+
<label class="w-label" for="type_reputation">reputation</label>
188+
<div class="info">reputation system change</div>
189+
</div>
190+
<div class="form-row-inline">
191+
<input class="w-checkbox" type="checkbox" name="type" id="type_resignation" value="resignation">
192+
<label class="w-label" for="type_resignation">resignation</label>
193+
<div class="info">resignation event</div>
194+
</div>
195+
<div class="form-row-inline">
196+
<input class="w-checkbox" type="checkbox" name="type" id="type_security" value="security">
197+
<label class="w-label" for="type_security">security</label>
198+
<div class="info">security event</div>
199+
</div>
200+
<div class="form-row-inline">
201+
<input class="w-checkbox" type="checkbox" name="type" id="type_site-graduation" value="site-graduation">
202+
<label class="w-label" for="type_site-graduation">site-graduation</label>
203+
<div class="info">site graduation</div>
204+
</div>
205+
<div class="form-row-inline">
206+
<input class="w-checkbox" type="checkbox" name="type" id="type_site-launch" value="site-launch">
207+
<label class="w-label" for="type_site-launch">site-launch</label>
208+
<div class="info">new site launch</div>
209+
</div>
210+
<div class="form-row-inline">
211+
<input class="w-checkbox" type="checkbox" name="type" id="type_staff" value="staff">
212+
<label class="w-label" for="type_staff">staff</label>
213+
<div class="info">staff-related event</div>
214+
</div>
215+
<div class="form-row-inline">
216+
<input class="w-checkbox" type="checkbox" name="type" id="type_statement" value="statement">
217+
<label class="w-label" for="type_statement">statement</label>
218+
<div class="info">official statement</div>
219+
</div>
220+
<div class="form-row-inline">
221+
<input class="w-checkbox" type="checkbox" name="type" id="type_strike" value="strike">
222+
<label class="w-label" for="type_strike">strike</label>
223+
<div class="info">strike or protest</div>
224+
</div>
225+
</div>
226+
</fieldset>
82227
<fieldset>
83228
<legend class="w-label">Classes</legend>
229+
<div class="info">for visual styling and filtering only; use Tags for textual labelling of events</div>
84230
<div class="class-grid">
85231
<div class="form-row-inline">
86232
<input class="w-checkbox" type="checkbox" name="classes" id="classes_featured-event" value="featured-event">

0 commit comments

Comments
 (0)