Skip to content
This repository was archived by the owner on Feb 4, 2024. It is now read-only.

Commit 1819ed0

Browse files
moragsmorags
committed
Revised code to conform with MediaWiki style requirements
1 parent f36c826 commit 1819ed0

File tree

4 files changed

+223
-218
lines changed

4 files changed

+223
-218
lines changed

‎i18n/qqq.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"@metadata": {
3+
"authors": [ "..." ]
4+
},
5+
"skinname-example": "{{optional}}",
6+
"example-desc": "{{desc|what=skin|name=Example|url=https://www.mediawiki.org/wiki/Skin:Example}}"
7+
}

‎resources/js/contentTransformation.js‎

Lines changed: 173 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,194 +1,191 @@
1+
/* globals ClipboardJS, UIkit */
2+
/* eslint-disable max-len */
3+
14
/* Permalink clipboard handling */
2-
window.addEventListener('load', function () {
3-
var clipboard = new ClipboardJS('#copy-permalink');
5+
window.addEventListener( 'load', function () {
6+
var clipboard = new ClipboardJS( '#copy-permalink' );
47

5-
clipboard.on('success', function (e) {
6-
UIkit.tooltip('#copy-permalink', {
7-
'title': 'Copied link to clipboard!'
8-
}).show();
9-
});
8+
clipboard.on( 'success', function () {
9+
UIkit.tooltip( '#copy-permalink', {
10+
title: 'Copied link to clipboard!'
11+
} ).show();
12+
} );
1013

11-
clipboard.on('error', function (e) {
12-
$('#copy-permalink').text(e.text);
13-
});
14-
});
14+
clipboard.on( 'error', function ( e ) {
15+
$( '#copy-permalink' ).text( e.text );
16+
} );
17+
} );
1518

1619
/* Format TOC */
1720
// TODO: Change font size dynamically to fit smaller viewports
1821
// TODO: Deal with text overflow / truncation of text
19-
window.addEventListener('load', function () {
20-
// Article TOC
21-
if (document.querySelector('#toc')) {
22-
var $toc = $('#toc');
23-
$toc.appendTo($('#left-col'));
24-
$toc.addClass('uk-margin-small-left uk-height-1-1 uk-overflow-auto').attr('uk-sticky', '');
25-
$toc.find('h2').addClass('uk-nav-header uk-margin-remove-bottom uk-inline');
26-
$toc.find('.toctoggle').attr('hidden', '');
27-
$toc.find('>ul').addClass('uk-nav uk-nav-default uk-margin-remove-top')
28-
.attr('uk-scrollspy-nav', 'closest: li; scroll: true;'); // BUG: Scrollspy isn't working (uikit#3100)
29-
// Useful for tab navigation
30-
$toc.find('>ul').prepend(`
31-
<li class="toclevel-0 tocsection-0 uk-parent">
32-
<a href="#content">
33-
<span class="tocnumber"></span>
34-
<span class="toctext">Introduction</span>
35-
</a></li>`);
36-
$toc.find('.toclevel-1').addClass('uk-parent');
37-
$toc.find('.toclevel-1>ul').addClass('uk-nav-sub');
38-
}
39-
// User preferences TOC
40-
else if (document.querySelector('#preftoc')) {
41-
var $toc = $('#preftoc');
42-
$toc.appendTo($('#left-col'))
43-
.prepend('<h2 class="uk-nav-header uk-margin-remove-bottom uk-inline">What would you like to change?</h>') // A change of tone from the otherwise technical MediaWiki
44-
.addClass('uk-margin-small-left uk-height-1-1 uk-nav uk-nav-default').attr('uk-sticky', '');
45-
}
46-
});
22+
window.addEventListener( 'load', function () {
23+
if ( document.querySelector( '#toc' ) ) {
24+
// Article TOC
25+
let $toc = $( '#toc' );
26+
$toc.appendTo( $( '#left-col' ) );
27+
$toc.addClass( 'uk-margin-small-left uk-height-1-1 uk-overflow-auto' ).attr( 'uk-sticky', '' );
28+
$toc.find( 'h2' ).addClass( 'uk-nav-header uk-margin-remove-bottom uk-inline' );
29+
$toc.find( '.toctoggle' ).attr( 'hidden', '' );
30+
$toc.find( '>ul' ).addClass( 'uk-nav uk-nav-default uk-margin-remove-top' )
31+
.attr( 'uk-scrollspy-nav', 'closest: li; scroll: true;' ); // BUG: Scrollspy isn't working (uikit#3100)
32+
// Useful for tab navigation
33+
$toc.find( '>ul' ).prepend( `
34+
<li class="toclevel-0 tocsection-0 uk-parent">
35+
<a href="#content">
36+
<span class="tocnumber"></span>
37+
<span class="toctext">Introduction</span>
38+
</a></li>` );
39+
$toc.find( '.toclevel-1' ).addClass( 'uk-parent' );
40+
$toc.find( '.toclevel-1>ul' ).addClass( 'uk-nav-sub' );
41+
} else if ( document.querySelector( '#preftoc' ) ) {
42+
// User preferences TOC
43+
let $toc = $( '#preftoc' );
44+
$toc.appendTo( $( '#left-col' ) )
45+
.prepend( '<h2 class="uk-nav-header uk-margin-remove-bottom uk-inline">What would you like to change?</h>' ) // A change of tone from the otherwise technical MediaWiki
46+
.addClass( 'uk-margin-small-left uk-height-1-1 uk-nav uk-nav-default' ).attr( 'uk-sticky', '' );
47+
}
48+
} );
4749

4850
/* Convert edit links to icons */
49-
window.addEventListener('load', function () {
50-
if (document.querySelector('.mw-editsection')) {
51-
var $edit_markers = $('.mw-editsection');
52-
$edit_markers.addClass('uk-invisible-hover uk-text-middle');
53-
$edit_markers.parent().addClass('uk-visible-toggle');
54-
$edit_markers.find('>.mw-editsection-bracket').attr('hidden', '');
55-
$edit_markers.find('>a').attr('uk-icon', 'icon: pencil').text('');
56-
}
57-
});
51+
window.addEventListener( 'load', function () {
52+
if ( document.querySelector( '.mw-editsection' ) ) {
53+
let $editMarkers = $( '.mw-editsection' );
54+
$editMarkers.addClass( 'uk-invisible-hover uk-text-middle' );
55+
$editMarkers.parent().addClass( 'uk-visible-toggle' );
56+
$editMarkers.find( '>.mw-editsection-bracket' ).attr( 'hidden', '' );
57+
$editMarkers.find( '>a' ).attr( 'uk-icon', 'icon: pencil' ).text( '' );
58+
}
59+
} );
5860

5961
// TODO: Split article to <section> elements
6062
// TODO: Add 'to top' markers to section ends
6163

6264
/* Reformat history pages */
63-
window.addEventListener('load', function () {
64-
if (document.getElementById('mw-history-compare')) {
65-
66-
// Create table
67-
$('#mw-history-compare ul').replaceWith(function () {
68-
return $('<table id="pagehistory" />').append($(this).contents());
69-
});
70-
71-
var $table = $('table');
72-
73-
// Select and transform cells
74-
var re = /\(|\)/g;
75-
var s = function (context, query, transform = 0) {
76-
var res = $(context).find(query);
77-
// jQuery returns 'undefined' if it can't find an object, eg. '.minoredit' or '.comment'
78-
if (res[0] != undefined) {
79-
if (transform == 1) {
80-
// Remove parentheses from bytes
81-
return res[0].outerHTML.replace(re, '');
82-
} else if (transform == 2) {
83-
// Reverse date formatting
84-
var date = res.text().split(', ');
85-
var fixed_date = [date[1], date[0]].join(', ');
86-
res.text(fixed_date);
87-
return res[0].outerHTML;
88-
};
89-
return res[0].outerHTML;
90-
};
91-
// Has to return something to the template literal
92-
return '';
93-
};
94-
95-
$table.children().replaceWith(function () {
96-
return `<tr>
97-
<td>${s(this, '.mw-userlink')}<div class="uk-padding-small uk-text-center" uk-dropdown>${s(this, '.mw-usertoollinks')}<\/div></td>
98-
<td>${s(this, '.mw-changeslist-date', 2)}</td>
99-
<td>${s(this, '.minoredit')}</td>
100-
<td>${s(this, '.mw-plusminus-pos', 1)}${s(this, '.mw-plusminus-neg', 1)}</td>
101-
<td>${s(this, '.history-size')}</td>
102-
<td>${s(this, '.comment')}</td>
103-
<td>${s(this, '.mw-history-histlinks')}</td>
104-
<td><span>${$(this).find('input')[0].outerHTML}</span><span>${$(this).find('input')[1].outerHTML}</span></td>
105-
<td><span uk-icon="icon: cog"></span><div class="uk-padding-small uk-text-center" uk-dropdown>${s(this, '.mw-history-undo')}</div></td>
106-
</tr>
107-
`
108-
});
109-
$table.children().wrapAll('<tbody />');
110-
111-
// Add headings
112-
// WORKAROUND: 'Change size' should span two columns ('.minoredit' and '.mw-plusminus-*'), but Tablesorter doesn't handle 'colspan' well. Instead, an empty header is added just before to accomodate for '.minoredit'.
113-
$table.prepend(' \
114-
<thead> \
115-
<tr> \
116-
<th>Editor</th> \
117-
<th>Time</th> \
118-
<th class=parser-false sorter-false></th> \
119-
<th>Change</th> \
120-
<th>(Total)</th> \
121-
<th>Comment</th> \
122-
<th colspan=3 class=parser-false sorter-false>Tools</th> \
123-
</tr> \
124-
</thead> \
125-
');
126-
127-
// Style
128-
// FIX: For some reason Tablersorter's css disrupt uk-table-hover
129-
$table = $('table').addClass('uk-table uk-table-divider uk-table-hover uk-table-justify uk-table-small uk-text-small tablesorter');
130-
131-
// TODO: Add more tools to the history tools menu (next to the "undo")
132-
133-
// TODO: Make sure this sorts properly at the beginning of a month
134-
$table.tablesorter();
135-
136-
};
137-
});
65+
window.addEventListener( 'load', function () {
66+
if ( document.getElementById( 'mw-history-compare' ) ) {
67+
68+
// Create table
69+
$( '#mw-history-compare ul' ).replaceWith( function () {
70+
return $( '<table id="pagehistory" />' ).append( $( this ).contents() );
71+
} );
72+
73+
let $table = $( 'table' ),
74+
// Select and transform cells
75+
re = /\(|\)/g,
76+
s = function ( context, query, transform = 0 ) {
77+
var res = $( context ).find( query );
78+
// jQuery returns 'undefined' if it can't find an object, eg. '.minoredit' or '.comment'
79+
if ( res[ 0 ] !== undefined ) {
80+
if ( transform === 1 ) {
81+
// Remove parentheses from bytes
82+
return res[ 0 ].outerHTML.replace( re, '' );
83+
} else if ( transform === 2 ) {
84+
// Reverse date formatting
85+
let date = res.text().split( ', ' ),
86+
fixedDate = [ date[ 1 ], date[ 0 ] ].join( ', ' );
87+
res.text( fixedDate );
88+
return res[ 0 ].outerHTML;
89+
}
90+
return res[ 0 ].outerHTML;
91+
}
92+
// Has to return something to the template literal
93+
return '';
94+
};
95+
96+
$table.children().replaceWith( function () {
97+
return '<tr>' +
98+
'<td>' + s( this, '.mw-userlink' ) + '<div class="uk-padding-small uk-text-center" uk-dropdown>' + s( this, '.mw-usertoollinks' ) + '</div></td>' +
99+
'<td>' + s( this, '.mw-changeslist-date', 2 ) + '</td>' +
100+
'<td>' + s( this, '.minoredit' ) + '</td>' +
101+
'<td>' + s( this, '.mw-plusminus-pos', 1 ) + s( this, '.mw-plusminus-neg', 1 ) + '</td>' +
102+
'<td>' + s( this, '.history-size' ) + '</td>' +
103+
'<td>' + s( this, '.comment' ) + '</td>' +
104+
'<td>' + s( this, '.mw-history-histlinks' ) + '</td>' +
105+
'<td><span>' + $( this ).find( 'input' )[ 0 ].outerHTML + '</span><span>' + $( this ).find( 'input' )[ 1 ].outerHTML + '</span></td>' +
106+
'<td><span uk-icon="icon: cog"></span><div class="uk-padding-small uk-text-center" uk-dropdown>' + s( this, '.mw-history-undo' ) + '</div></td>' +
107+
'</tr>';
108+
} );
109+
$table.children().wrapAll( '<tbody />' );
110+
111+
// Add headings
112+
// WORKAROUND: 'Change size' should span two columns ('.minoredit' and '.mw-plusminus-*'), but Tablesorter doesn't handle 'colspan' well. Instead, an empty header is added just before to accomodate for '.minoredit'.
113+
$table.prepend(
114+
'<thead>' +
115+
'<tr>' +
116+
'<th>Editor</th>' +
117+
'<th>Time</th>' +
118+
'<th class=parser-false sorter-false></th>' +
119+
'<th>Change</th>' +
120+
'<th>(Total)</th>' +
121+
'<th>Comment</th>' +
122+
'<th colspan=3 class=parser-false sorter-false>Tools</th>' +
123+
'</tr>' +
124+
'</thead>'
125+
);
126+
127+
// Style
128+
// FIX: For some reason Tablersorter's css disrupt uk-table-hover
129+
$table = $( 'table' ).addClass( 'uk-table uk-table-divider uk-table-hover uk-table-justify uk-table-small uk-text-small tablesorter' );
130+
131+
// TODO: Add more tools to the history tools menu (next to the "undo")
132+
133+
// TODO: Make sure this sorts properly at the beginning of a month
134+
$table.tablesorter();
135+
136+
}
137+
} );
138138

139139
/* Shift images to the right */
140-
window.addEventListener('load', function () {
141-
var imgs = $('main .thumb, main .mermaid');
142-
var prev = $('head');
143-
144-
imgs.each(function () {
145-
$this = $(this);
146-
var v_offest = $this.offset().top;
147-
var height = $this.height();
148-
cutoff = prev.offset().top + prev.height();
149-
if (v_offest <= cutoff) {
150-
var new_offset = cutoff + 20;
151-
$this.css('top', `${new_offset}px`); // Default UIkit margin
152-
}
153-
prev = $this;
154-
})
155-
});
140+
window.addEventListener( 'load', function () {
141+
let imgs = $( 'main .thumb, main .mermaid' ),
142+
prev = $( 'head' );
143+
144+
imgs.each( function () {
145+
let $this = $( this ),
146+
vOffest = $this.offset().top,
147+
cutoff = prev.offset().top + prev.height();
148+
if ( vOffest <= cutoff ) {
149+
let newOffset = cutoff + 20;
150+
$this.css( 'top', `${newOffset}px` ); // Default UIkit margin
151+
}
152+
prev = $this;
153+
} );
154+
} );
156155

157156
/* Preview Wikilinks */
158-
window.addEventListener('load', function () {
159-
var own = top.location.host.toString();
160-
var mothership = 'en.wikipedia.org';
161-
162-
var $wikilinks = $('#content').find('a[href^="' + own + '"], a[href^="http://' + own + '"], \
163-
a[href^="https://' + own + '"], a[href^="' + mothership + '"], a[href^="http://' + mothership + '"], \
164-
a[href^="https://' + mothership + '"], a[href^="/"], a[href^="./"], a[href^="../"], a[href^="#"]');
165-
166-
var $policies = $wikilinks.filter('a[title^="WP:"], a[title^="Wikipedia:"], a[title^="wikipedia:"]');
167-
168-
$wikilinks.each(function () {
169-
$(this).after(' \
170-
<div class="uk-padding-small" uk-dropdown> \
171-
<h2 class="uk-h4"></h2> \
172-
<p>Loading summary...</p> \
173-
</div>');
174-
});
175-
176-
$wikilinks.hover(getSummary);
177-
178-
function getSummary() {
179-
var caller = $(this).next();
180-
181-
$.getJSON('https://en.wikipedia.org/api/rest_v1/page/summary/' + $(this)[0].title)
182-
.done(function (res) {
183-
caller.find('h2').html(res.title);
184-
if (res.type != 'no-extract') {
185-
caller.find('p').html(res.extract);
186-
} else {
187-
caller.find('p').html('No extract available!'); // TODO: Add "warning" icon for policy pages, and "info" icon for guideline pages
188-
}
189-
})
190-
.fail(function (res, status, err) {
191-
caller.find('p').html('Article not found!<br>Reason: ' + status + ', ' + err);
192-
});
193-
};
194-
});
157+
window.addEventListener( 'load', function () {
158+
let own = top.location.host.toString(),
159+
mothership = 'en.wikipedia.org',
160+
161+
$wikilinks = $( '#content' ).find( 'a[href^="' + own + '"], a[href^="http://' + own + '"],' +
162+
'a[href^="https://' + own + '"], a[href^="' + mothership + '"], a[href^="http://' + mothership + '"],' +
163+
'a[href^="https://' + mothership + '"], a[href^="/"], a[href^="./"], a[href^="../"], a[href^="#"]' );
164+
165+
// let $policies = $wikilinks.filter( 'a[title^="WP:"], a[title^="Wikipedia:"], a[title^="wikipedia:"]' );
166+
167+
$wikilinks.each( function () {
168+
$( this ).after(
169+
'<div class="uk-padding-small" uk-dropdown>' +
170+
'<h2 class="uk-h4"></h2>' +
171+
' <p>Loading summary...</p>' +
172+
'</div>' );
173+
} );
174+
175+
$wikilinks.hover( function () {
176+
var caller = $( this ).next();
177+
178+
$.getJSON( 'https://en.wikipedia.org/api/rest_v1/page/summary/' + $( this )[ 0 ].title )
179+
.done( function ( res ) {
180+
caller.find( 'h2' ).html( res.title );
181+
if ( res.type !== 'no-extract' ) {
182+
caller.find( 'p' ).html( res.extract );
183+
} else {
184+
caller.find( 'p' ).html( 'No extract available!' ); // TODO: Add "warning" icon for policy pages, and "info" icon for guideline pages
185+
}
186+
} )
187+
.fail( function ( res, status, err ) {
188+
caller.find( 'p' ).html( 'Article not found!<br>Reason: ' + status + ', ' + err );
189+
} );
190+
} );
191+
} );

‎resources/less/print.less‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Import default styles
22
@import "styles.less";
33

4-
#tools, #left-col {
5-
display: none;
6-
}
4+
#tools,
5+
#left-col {
6+
display: none;
7+
}

0 commit comments

Comments
 (0)