Skip to content

Commit 8899f7c

Browse files
KrinkleVolker-E
Krinkle
authored and
Volker-E
committed
docs: Convert to WMUI and remove references to third-party CDNs
* Remove outdated python2 reference from README.md. * Remove Bootstrap from third-party origin, use local WMUI. * Remove needless use of jQuery, also from third-party origin. Anno 2023 this code is simpler and shorter in vanilla DOM. * Remove "Fork on GitHub" button, also from yet another third-party. * Remove es5-shim as we no longer support ES5 browsers for developer-facing docs, or indeed at all. * Fix `<label for="demo-input">Output</label>` which was targetting the input when clicked for native focus. * Fix inaccessible header on "demo" header by using position sticky instead of position fixed. Change-Id: I66899f81edc42f6bf9ed23a2dc2a99765ae4b524
1 parent de38fd3 commit 8899f7c

File tree

9 files changed

+654
-2255
lines changed

9 files changed

+654
-2255
lines changed

‎docs/README.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
# [cssjanus.github.io](https://cssjanus.github.io/)
2-
3-
Website for [CSSJanus](https://github.com/cssjanus/cssjanus).
4-
5-
Report issues to the [CSSJanus issue tracker](https://github.com/cssjanus/cssjanus/issues).
1+
# CSSJanus Website
62

73
## Getting started
84

95
It's a static site. To run a server, you can use the built-in
106
capabilities of Python or PHP, like so:
117

128
* `python3 -m http.server 4000` (Python 3)
13-
* `python -m SimpleHTTPServer 4000` (Python 2)
149
* `php -S localhost:4000` (PHP)
1510

1611
Then view <http://localhost:4000>.

‎docs/demo/index.html

Lines changed: 101 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<meta charset="utf-8">
4-
<title>CSSJanus Demos</title>
5-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">
4+
<title>CSSJanus Live demos</title>
5+
<link rel="stylesheet" href="../lib/wikimedia-ui-base-0.19.0.css">
66
<link rel="stylesheet" href="../site.css">
77
<link rel="icon" href="../favicon.svg">
88
<style id="css">
@@ -15,6 +15,28 @@
1515
direction: ltr;
1616
}
1717

18+
section {
19+
margin: 1rem 0;
20+
}
21+
section:after {
22+
content: " ";
23+
display: table;
24+
clear: both;
25+
}
26+
section h3 {
27+
font-size: 2.4rem;
28+
padding-bottom: 2px;
29+
border-bottom: 3px solid var( --wmui-color-base80 );
30+
}
31+
32+
.well {
33+
background: var( --wmui-color-base90 );
34+
border: 1px solid var( --wmui-color-base80 );
35+
border-radius: 2px;
36+
padding: 1rem;
37+
margin: 0 0 1rem 0;
38+
}
39+
1840
/* Content direction */
1941

2042
.inline-arrow-container {
@@ -313,22 +335,28 @@
313335
-webkit-writing-mode: horizontal-tb;
314336
writing-mode: horizontal-tb;
315337
direction: ltr;
316-
position: fixed;
338+
position: sticky;
317339
top: 1%;
318-
left: 0;
319-
right: 0;
320340
text-align: center;
321341
}
322342
</style>
323343
</head>
324-
<div class="container">
325-
<div class="page-header">
326-
<h1>CSSJanus Demos</h1>
327-
<p class="lead"><a href="../">Return to flip service</a>.</p>
328-
</div>
329-
<div class="panel panel-default">
330-
<div class="panel-heading"><h3 class="panel-title">Content direction</h3></div>
331-
<div class="panel-body">
344+
345+
<header><div class="wm-container">
346+
<a href="../" role="banner" title="Return to flip service"><em>CSSJanus</em> Live demos</a>
347+
<span class="wm-header-caption">Convert CSS stylesheets between left-to-right and right-to-left.</span>
348+
</div></header>
349+
350+
<main>
351+
<div class="wm-container">
352+
<div class="cje-form">
353+
<p>
354+
<button type="button" class="wm-btn" data-value="ltr">LTR</button>
355+
<button type="button" class="wm-btn" data-value="rtl">RTL</button>
356+
</p>
357+
</div>
358+
<section>
359+
<h3>Content direction</h3>
332360
<div class="inline-arrow-container">
333361
<div class="inline-arrow-body">
334362
Inline direction
@@ -341,41 +369,30 @@ <h1>CSSJanus Demos</h1>
341369
</div>
342370
<div class="block-arrow-head"></div>
343371
</div>
344-
</div>
345-
</div>
346-
<div class="panel panel-default">
347-
<div class="panel-heading"><h3 class="panel-title">Floated content</h3></div>
348-
<div class="panel-body">
349-
<div class="well well-sm"><span class="floatpointer">Point to the end</span></div>
350-
<div class="clearfix"></div>
351-
<div class="p-float well well-sm">Floatation</div>
372+
</section>
373+
<section>
374+
<h3>Floated content</h3>
375+
<div class="well"><span class="floatpointer">Point to the end</span></div>
376+
<div class="p-float well">Floatation</div>
352377
<p><em>Cupcake ipsum dolor sit. Amet I love croissant chocolate chocolate cake gummi bears chocolate. Chocolate jelly beans I love jelly. Sweet roll pastry sweet. Tart lemon drops pie. Jelly candy canes brownie pie macaroon pudding pie.</em></p>
353-
</div>
354-
</div>
355-
<div class="panel panel-default">
356-
<div class="panel-heading"><h3 class="panel-title">Sides</h3></div>
357-
<div class="panel-body">
378+
</section>
379+
<section>
380+
<h3>Sides</h3>
358381
<div class="p-float p-sides">Flotation</div>
359382
<p>A floating box at the far end of the box has borders on two sides (using <code>border-color</code> with four values), and <code>border-radius</code> on the one visible corner. It also has a margin on two sides, with different units.</p>
360-
</div>
361-
</div>
362-
<div class="panel panel-default">
363-
<div class="panel-heading"><h3 class="panel-title">Vertical</h3></div>
364-
<div class="panel-body">
383+
</section>
384+
<section>
385+
<h3>Vertical</h3>
365386
<div class="p-container">
366387
<p>This paragraph is in a container that has padding on each side, using the two-value ("padding: 0 20%;") syntax. When rotated (top to bottom), the values should be flipped, so that the padding is on the top and bottom.</p>
367388
</div>
368-
</div>
369-
</div>
370-
<div class="panel panel-default">
371-
<div class="panel-heading"><h3 class="panel-title">Text</h3></div>
372-
<div class="panel-body">
389+
</section>
390+
<section>
391+
<h3>Text</h3>
373392
<p class="p-indent">This paragraph is has a <code>text-indent</code>. <em>Sed efficitur vulputate arcu a facilisis. Sed et libero volutpat, facilisis ex vel, dapibus nisi. Maecenas bibendum, est non consequat consectetur, tellus erat elementum tortor, ut aliquet tellus enim sed ligula. Sed luctus congue purus sit amet condimentum. Suspendisse est ligula, accumsan laoreet porta vel, rutrum finibus dui.</em></p>
374-
</div>
375-
</div>
376-
<div class="panel panel-default">
377-
<div class="panel-heading"><h3 class="panel-title">Spacing</h3></div>
378-
<div class="panel-body">
393+
</section>
394+
<section>
395+
<h3>Spacing</h3>
379396
<p><code>padding</code> and <code>margin</code> styles. <span class="padding">Padding</span>.</p>
380397
<p>
381398
<span class="space-after">This span has both padding and margin after the text, using margin-[direction]/padding-[direction] properties.</span> When flipping from ltr to rtl, padding-right becomes padding-left. For tb-lr, it becomes padding-bottom.
@@ -386,68 +403,55 @@ <h1>CSSJanus Demos</h1>
386403
<p>
387404
Lorem ipsum. <span class="space-both">This span has both padding and margin on both sides of the text, using the three-value syntax.</span> When rotated, this gets converted to four-value syntax.
388405
</p>
389-
</div>
390-
</div>
391-
<div class="panel panel-default">
392-
<div class="panel-heading"><h3 class="panel-title">Borders</h3></div>
393-
<div class="panel-body">
406+
</section>
407+
<section>
408+
<h3>Borders</h3>
394409
<p>A <span class="border">border</span> and <span class="radius">border radius</span>.</p>
395410
<p><span class="border-styles">This span has a red border after the text, with rounded corners.</span></p>
396411
<p><span class="border-images">This span has a thicker border <span class="border-images-block-start">closer to the preceding line</span>, a thinner border to the <span class="border-images-inline-start">inline-start direction</span>, and repeating text at the <span class="border-images-block-end">border closer to the following line</span>. </span></p>
397-
</div>
398-
</div>
399-
<div class="panel panel-default">
400-
<div class="panel-heading"><h3 class="panel-title">Shadows</h3></div>
401-
<div class="panel-body">
412+
</section>
413+
<section>
414+
<h3>Shadows</h3>
402415
<p>Using <code>box-shadow</code>, <code>text-shadow</code>, including inset positioning and overlapping shadows.</p>
403416
<p class="text-shadows">This text has a red shadow before the text slightly closer to the previous line, and a blue shadow after the text and slightly closer to the following line.</p>
404417
<p class="box-shadows">This box has an inset shadow, visible before the text.</p>
405418
<div class="box-shadows2">This box has a light orange shadow at the start and above the text. And a red shadow at the end and below the text.</div>
406-
</li>
407-
</div>
408-
</div>
409-
<div class="panel panel-default">
410-
<div class="panel-heading"><h3 class="panel-title">Transform</h3></div>
411-
<div class="panel-body">
419+
</section>
420+
<section>
421+
<h3>Transform</h3>
412422
<p><code>transform: translate( 25%, 50% );</code></p>
413423
<div class="well p-float untransformed">
414424
Original
415425
</div>
416426
<div class="well p-float transformed">
417427
Transformed<br>(25% towards end of line, 50% toward end of page)
418428
</div>
419-
</div>
420-
</div>
421-
<div class="panel panel-default">
422-
<div class="panel-heading"><h3 class="panel-title">Position</h3></div>
423-
<div class="panel-body">
429+
</section>
430+
<section>
431+
<h3>Position</h3>
424432
<p><code>position: relative;</code></p>
425-
<ul class="list-group">
426-
<li class="list-group-item posholder">Moved <span class="posbase"></span><span class="postop">toward the following line</span><span class="posbase"></span>.</li>
427-
<li class="list-group-item posholder">Moved <span class="posbase"></span><span class="posbottom">toward the previous line</span><span class="posbase"></span>.</li>
428-
<li class="list-group-item posholder">Moved <span class="posbase"></span><span class="posleft">forward in the direction of the text</span><span class="posbase"></span>.</li>
429-
<li class="list-group-item posholder">Moved <span class="posbase"></span><span class="posright">backward in the direction of the text</span><span class="posbase"></span>.</li>
433+
<ul>
434+
<li class="well posholder">Moved <span class="posbase"></span><span class="postop">toward the following line</span><span class="posbase"></span>.</li>
435+
<li class="well posholder">Moved <span class="posbase"></span><span class="posbottom">toward the previous line</span><span class="posbase"></span>.</li>
436+
<li class="well posholder">Moved <span class="posbase"></span><span class="posleft">forward in the direction of the text</span><span class="posbase"></span>.</li>
437+
<li class="well posholder">Moved <span class="posbase"></span><span class="posright">backward in the direction of the text</span><span class="posbase"></span>.</li>
430438
</ul>
431-
</div>
432-
</div>
433-
<div class="panel panel-default">
434-
<div class="panel-heading"><h3 class="panel-title">Cursors</h3></div>
435-
<div class="panel-body">
439+
</section>
440+
<section>
441+
<h3>Cursors</h3>
436442
<p class="cursor-pointer">Cursor is shown when hovering over the text.</p>
437-
<ul class="list-group">
438-
<li class="list-group-item resize-r">The cursor points in the text direction.</li>
439-
<li class="list-group-item resize-l">The cursor points against the text direction.</li>
440-
<li class="list-group-item resize-v">The cursor is perpendicular to the text direction.</li>
441-
<li class="list-group-item resize-rd">The cursor points to the diagonal between the block direction and inline direction.</li>
442-
<li class="list-group-item resize-d">diagonal cursor</li>
443-
<li class="list-group-item resize-row">row cursor</li>
444-
<li class="list-group-item resize-column">column cursor</li>
443+
<ul>
444+
<li class="well resize-r">The cursor points in the text direction.</li>
445+
<li class="well resize-l">The cursor points against the text direction.</li>
446+
<li class="well resize-v">The cursor is perpendicular to the text direction.</li>
447+
<li class="well resize-rd">The cursor points to the diagonal between the block direction and inline direction.</li>
448+
<li class="well resize-d">diagonal cursor</li>
449+
<li class="well resize-row">row cursor</li>
450+
<li class="well resize-column">column cursor</li>
445451
</ul>
446-
</div>
447-
</div>
448-
<div class="panel panel-default">
449-
<div class="panel-heading"><h3 class="panel-title">Background image</h3></div>
450-
<div class="panel-body">
452+
</section>
453+
<section>
454+
<h3>Background image</h3>
451455
<p>Background-images, including URL flips, and positioning.</p>
452456
<ul class="outer">
453457
<li>Outer</li>
@@ -456,22 +460,16 @@ <h1>CSSJanus Demos</h1>
456460
<li class="inline-start-background">This element has a background arrow pointing toward the text, positioned at the text beginning.</li>
457461
<li class="block-after-background">This element has repeated background arrows on a line after the the text's block, pointing toward the inline direction.</li>
458462
</ul>
459-
</div>
460-
</div>
461-
</div>
462-
<div class="cje-form">
463-
<div class="btn-group" role="group">
464-
<button type="button" class="btn btn-default" data-value="ltr">LTR</button>
465-
<button type="button" class="btn btn-default" data-value="rtl">RTL</button>
463+
</section>
466464
</div>
467-
</div>
468-
<footer class="demo-footer" role="contentinfo">
469-
<div class="container">
470-
<p><a href="../">Flip service</a> · <a href="https://github.com/cssjanus/cssjanus.github.io/blob/master/demo/index.html">Source code of this page</a></p>
465+
</main>
466+
467+
<footer>
468+
<div class="wm-container">
469+
<p><a href="../">Flip service</a> · <a href="https://gerrit.wikimedia.org/g/mediawiki/libs/node-cssjanus/+/HEAD/docs/demo/index.html">Source code of this page</a></p>
471470
</div>
472471
</footer>
473-
<!-- es5-shim for old IE -->
474-
<script src="../lib/es5-shim.js"></script>
472+
475473
<script src="../lib/cssjanus.js"></script>
476474
<script>
477475
( function () {
@@ -487,8 +485,10 @@ <h1>CSSJanus Demos</h1>
487485
} else {
488486
cssElem.firstChild.nodeValue = cssjanus.transform(
489487
css,
490-
true,
491-
true
488+
{
489+
transformDirInUrl: true,
490+
transformEdgeInUrl: true
491+
}
492492
);
493493
}
494494
this.className += ' active';

0 commit comments

Comments
 (0)