Skip to content

Commit 619f839

Browse files
pepc84pepc84
committed
Examples: dedicated CM wrap div, no pre flash
1 parent 8f5ae59 commit 619f839

2 files changed

Lines changed: 98 additions & 104 deletions

File tree

‎assets/nav.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -130,30 +130,36 @@
130130
marker.id = 'ref-cm-loaded';
131131
document.head.appendChild(marker);
132132
const dark = document.body.classList.contains('dark-mode');
133-
document.querySelectorAll('.syntax-block, .impl-block, pre#code-pre').forEach(el => {
134-
el.style.display = 'none'; // hide original immediately
133+
// Example pages: render into #code-cm-wrap
134+
const cmWrap = document.getElementById('code-cm-wrap');
135+
const codePre = document.getElementById('code-pre');
136+
if (cmWrap && codePre) {
137+
const code = codePre.textContent.trim();
138+
CodeMirror(cmWrap, {
139+
value: code,
140+
mode: 'cppmode',
141+
theme: dark ? 'cppmode-dark' : 'cppmode',
142+
readOnly: true,
143+
lineNumbers: true,
144+
lineWrapping: false,
145+
});
146+
}
147+
// Reference pages: replace .syntax-block and .impl-block
148+
document.querySelectorAll('.syntax-block, .impl-block').forEach(el => {
135149
if (!el.parentNode) return;
136-
const code = (el.tagName === 'PRE' ? el.textContent : el.innerHTML
137-
.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')).trim();
150+
const code = el.innerHTML
151+
.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').trim();
138152
if (!code) return;
139153
const wrap = document.createElement('div');
140-
wrap.style.cssText = 'border-radius:6px;overflow:auto;margin-bottom:0.5rem;';
141154
el.parentNode.replaceChild(wrap, el);
142-
const cm = CodeMirror(wrap, {
155+
CodeMirror(wrap, {
143156
value: code,
144157
mode: 'cppmode',
145158
theme: dark ? 'cppmode-dark' : 'cppmode',
146159
readOnly: true,
147-
lineNumbers: true,
160+
lineNumbers: false,
148161
lineWrapping: false,
149162
});
150-
cm.setSize('100%', 'auto');
151-
// Force CM to expand to full content height
152-
const cmEl = wrap.querySelector('.CodeMirror');
153-
const scroller = wrap.querySelector('.CodeMirror-scroll');
154-
if (cmEl) cmEl.style.height = 'auto';
155-
if (scroller) { scroller.style.height = 'auto'; scroller.style.overflowY = 'visible'; }
156-
cm.refresh();
157163
});
158164
});
159165
});

‎index.html‎

Lines changed: 78 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -242,121 +242,109 @@ <h1 style="font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:600
242242
<div class="examples-section">
243243
<h2>Examples</h2>
244244
<div class="examples-grid">
245-
<a class="example-card" href="/examples/rollover.html" id="card1">
246-
<iframe class="example-canvas" id="c1" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c1');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let rectX, rectY; // Position of square button
247-
let circleX, circleY; // Position of circle button
248-
let rectSize = 90; // Diameter of rect
249-
let circleSize = 93; // Diameter of circle
250-
251-
let rectColor;
252-
let circleColor;
253-
let baseColor;
254-
255-
let rectOver = false;
256-
let circleOver = false;
245+
<a class="example-card" href="/examples/characters-strings.html" id="card1">
246+
<iframe class="example-canvas" id="c1" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c1');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let letter = "";
247+
let words = "Begin...";
257248
258249
function setup() {
259250
createCanvas(300,300);
260-
rectColor = color(0);
261-
circleColor = color(255);
262-
baseColor = color(102);
263-
circleX = width/2+circleSize/2+10;
264-
circleY = height/2;
265-
rectX = width/2-rectSize-10;
266-
rectY = height/2-rectSize/2;
267-
ellipseMode(CENTER);
251+
textFont("monospace");
268252
}
269253
270254
function draw() {
271-
update(mouseX, mouseY);
272-
273-
noStroke();
274-
if (rectOver) {
275-
background(rectColor);
276-
} else if (circleOver) {
277-
background(circleColor);
278-
} else {
279-
background(baseColor);
280-
}
281-
282-
stroke(255);
283-
fill(rectColor);
284-
rect(rectX, rectY, rectSize, rectSize);
285-
stroke(0);
286-
fill(circleColor);
287-
ellipse(circleX, circleY, circleSize, circleSize);
288-
}
289-
290-
function update(x, y) {
291-
if( overCircle(circleX, circleY, circleSize) ) {
292-
circleOver = true;
293-
rectOver = false;
294-
} else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
295-
rectOver = true;
296-
circleOver = false;
297-
} else {
298-
circleOver = rectOver = false;
299-
}
300-
}
301-
302-
function overRect(x, y, width, height) {
303-
if (mouseX >= x && mouseX <= x+width &&
304-
mouseY >= y && mouseY <= y+height) {
305-
return true;
306-
} else {
307-
return false;
255+
background(0);
256+
fill(255);
257+
textSize(14);
258+
text("Click on the program, then type to add to the String", 50, 50);
259+
text("Current key: " + letter, 50, 70);
260+
text("The String is " + words.length + " characters long", 50, 90);
261+
textSize(36);
262+
263+
// manual wrap
264+
let lineWidth = 540;
265+
let x = 50;
266+
let y = 140;
267+
let lineHeight = 44;
268+
let line = "";
269+
for (let i = 0; i < words.length; i++) {
270+
let testLine = line + words[i];
271+
if (textWidth(testLine) > lineWidth) {
272+
text(line, x, y);
273+
y += lineHeight;
274+
line = words[i];
275+
} else {
276+
line = testLine;
277+
}
308278
}
279+
text(line, x, y);
309280
}
310281
311-
function overCircle(x, y, diameter) {
312-
let disX = x - mouseX;
313-
let disY = y - mouseY;
314-
if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
315-
return true;
316-
} else {
317-
return false;
282+
function keyTyped() {
283+
if ((key >= 'A' && key <= 'z') || key === ' ') {
284+
letter = key;
285+
words += key;
318286
}
319287
}<\/script></body></html>`);doc.close();})();</script>
320-
<div class="example-info"><h3>Rollover</h3><p>Gui example</p></div>
288+
<div class="example-info"><h3>Characters Strings</h3><p>Data example</p></div>
321289
</a>
322-
<a class="example-card" href="/examples/shape-primitives.html" id="card2">
290+
<a class="example-card" href="/examples/operator-precedence.html" id="card2">
323291
<iframe class="example-canvas" id="c2" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c2');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>function setup() {
324292
createCanvas(300,300);
325-
background(0);
326-
noStroke();
293+
background(51);
294+
noFill();
295+
stroke(51);
296+
297+
stroke(204);
298+
for (let i = 0; i < width - 20; i += 4) {
299+
if (i > (30 + 70)) {
300+
line(i, 0, i, 50);
301+
}
302+
}
327303
328-
fill(204);
329-
triangle(18, 18, 18, 360, 81, 360);
304+
stroke(255);
305+
rect(4 + (2 * 8), 52, 290, 48);
306+
rect((4 + 2) * 8, 100, 290, 49);
330307
331-
fill(102);
332-
rect(81, 81, 63, 63);
308+
stroke(153);
309+
for (let i = 0; i < width; i += 2) {
310+
if (((i > 20) && (i < 50)) || ((i > 100) && (i < width - 20))) {
311+
line(i, 151, i, height - 1);
312+
}
313+
}
314+
}<\/script></body></html>`);doc.close();})();</script>
315+
<div class="example-info"><h3>Operator Precedence</h3><p>Math example</p></div>
316+
</a>
317+
<a class="example-card" href="/examples/rotate.html" id="card3">
318+
<iframe class="example-canvas" id="c3" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c3');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let angle = 0;
319+
let jitter = 0;
333320
334-
fill(204);
335-
quad(189, 18, 216, 18, 216, 360, 144, 360);
321+
function setup() {
322+
createCanvas(300,300);
336323
324+
noStroke();
337325
fill(255);
338-
ellipse(252, 144, 72, 72);
339326
340-
fill(204);
341-
triangle(288, 18, 351, 360, 288, 360);
327+
rectMode(CENTER);
328+
}
342329
343-
fill(255);
344-
arc(479, 300, 280, 280, PI, TWO_PI);
330+
function draw() {
331+
background(51);
345332
346-
noLoop();
347-
}
333+
// during even-numbered seconds (0, 2, 4, 6...)
334+
if (second() % 2 === 0) {
335+
jitter = random(-0.1, 0.1);
336+
}
348337
349-
function draw() {}<\/script></body></html>`);doc.close();})();</script>
350-
<div class="example-info"><h3>Shape Primitives</h3><p>Forms example</p></div>
351-
</a>
352-
<a class="example-card" href="/examples/statements-and-comments.html" id="card3">
353-
<iframe class="example-canvas" id="c3" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c3');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>function setup() {
354-
createCanvas(300,300);
355-
background(204, 153, 0);
338+
angle = angle + jitter;
356339
357-
noLoop();
340+
let c = cos(angle);
341+
342+
translate(width / 2, height / 2);
343+
rotate(c);
344+
345+
rect(0, 0, 180, 180);
358346
}<\/script></body></html>`);doc.close();})();</script>
359-
<div class="example-info"><h3>Statements and Comments</h3><p>Structure example</p></div>
347+
<div class="example-info"><h3>Rotate</h3><p>Transform example</p></div>
360348
</a>
361349
</div>
362350
<div class="examples-footer">

0 commit comments

Comments
 (0)