Marcoil has uploaded a new change for review.
https://gerrit.wikimedia.org/r/159483
Change subject: WIP: Use CSS to style Cite references
......................................................................
WIP: Use CSS to style Cite references
Remove directly outputting reference numbers and text for <ref>s and
<references>, use CSS instead to add those so that it can be configured
per-wiki.
This is an exploratory patch to see if the strategy is sound. Right now
the CSS is served directly from localhost.
Change-Id: I74d487874be4e2692f17a9bd5ec351f4a20eadc6
---
A api/static/css/cite.css
M lib/ext.Cite.js
M lib/mediawiki.DOMPostProcessor.js
3 files changed, 70 insertions(+), 23 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/services/parsoid
refs/changes/83/159483/1
diff --git a/api/static/css/cite.css b/api/static/css/cite.css
new file mode 100644
index 0000000..da9133a
--- /dev/null
+++ b/api/static/css/cite.css
@@ -0,0 +1,38 @@
+/* Styling for back-links from references to their <ref> */
+
+/* Both single and multiple backlinks */
+*[rel="mw:referencedBy"]::before {
+ content: "^ ";
+ font-weight: bold;
+}
+
+span[rel="mw:referencedBy"]::before {
+ font-weight: normal;
+}
+
+/* Each back-link */
+span[rel="mw:referencedBy"] a::before {
+ content: counter(mw-Ref, lower-alpha);
+ vertical-align: super;
+ line-height: 1;
+ font-weight: bold;
+ font-style: italic;
+ font-size: 80%;
+ padding-right: 0.40em;
+}
+
+/* Styling for <ref>s */
+
+span.reference {
+ font-size: 80%;
+}
+
+/* with group */
+span.reference a[data-mw-group]::after {
+ content: "[" attr(data-mw-group) " " counter(mw-Ref, decimal) "]";
+}
+
+/* without group */
+span.reference a::after {
+ content: "[" counter(mw-Ref, decimal) "]";
+}
\ No newline at end of file
diff --git a/lib/ext.Cite.js b/lib/ext.Cite.js
index c685436..0bf2c50 100644
--- a/lib/ext.Cite.js
+++ b/lib/ext.Cite.js
@@ -189,8 +189,7 @@
RefGroup.prototype.renderLine = function(refsList, ref) {
var ownerDoc = refsList.ownerDocument,
- arrow = ownerDoc.createTextNode('↑'),
- li, a;
+ li, a, reftext_span;
// Generate the li and set ref content first, so the HTML gets parsed.
// We then append the rest of the ref nodes before the first node
@@ -199,39 +198,43 @@
'about': "#" + ref.target,
'id': ref.target
});
- li.innerHTML = ref.content;
+ reftext_span = ownerDoc.createElement('span');
+ reftext_span.setAttribute('class', 'reference-text');
+ reftext_span.innerHTML = ref.content;
+ li.appendChild(reftext_span);
var contentNode = li.firstChild;
-
- // 'mw:referencedBy' span wrapper
- var span = ownerDoc.createElement('span');
- span.setAttribute('rel', 'mw:referencedBy');
- li.insertBefore(span, contentNode);
// Generate leading linkbacks
if (ref.linkbacks.length === 1) {
a = ownerDoc.createElement('a');
DU.addAttributes(a, {
- 'href': '#' + ref.linkbacks[0]
+ 'href': '#' + ref.linkbacks[0],
+ 'rel': 'mw:referencedBy',
+ 'style': "counter-reset: mw-Ref 0"
});
- a.appendChild(arrow);
- span.appendChild(a);
+ if (ref.group) {
+ a.setAttribute('data-mw-group', ref.group);
+ }
+ li.insertBefore(a, contentNode);
} else {
- span.appendChild(arrow);
+ // 'mw:referencedBy' span wrapper
+ var span = ownerDoc.createElement('span');
+ span.setAttribute('rel', 'mw:referencedBy');
+ li.insertBefore(span, contentNode);
+
ref.linkbacks.forEach(function(linkback, i) {
a = ownerDoc.createElement('a');
DU.addAttributes(a, {
- 'href': '#' + ref.linkbacks[i]
+ 'href': '#' + ref.linkbacks[i],
+ 'style': "counter-reset: mw-Ref " + (i+1)
});
- a.appendChild(ownerDoc.createTextNode(ref.groupIndex +
'.' + i));
- // Separate linkbacks with a space
- span.appendChild(ownerDoc.createTextNode(' '));
+ if (ref.group) {
+ a.setAttribute('data-mw-group', ref.group);
+ }
span.appendChild(a);
});
}
-
- // Space before content node
- li.insertBefore(ownerDoc.createTextNode(' '), contentNode);
// Add it to the ref list
refsList.appendChild(li);
@@ -392,10 +395,13 @@
// refIndex-a
var refIndex = doc.createElement('a');
- refIndex.setAttribute('href', '#' + ref.target);
- refIndex.appendChild(doc.createTextNode(
- '[' + ((group === '') ? '' : group + ' ') + ref.groupIndex + ']'
- ));
+ DU.addAttributes(refIndex, {
+ 'href': '#' + ref.target,
+ 'style': 'counter-reset: mw-Ref ' + ref.groupIndex
+ });
+ if (ref.group) {
+ refIndex.setAttribute('data-mw-group', ref.group);
+ }
span.appendChild(refIndex);
if (!nestedInReferences) {
diff --git a/lib/mediawiki.DOMPostProcessor.js
b/lib/mediawiki.DOMPostProcessor.js
index b20c8bf..b2b88c1 100644
--- a/lib/mediawiki.DOMPostProcessor.js
+++ b/lib/mediawiki.DOMPostProcessor.js
@@ -347,6 +347,9 @@
appendToHead( document, 'link', { rel: 'stylesheet', href:
styleURI } );
}
+ // TEMP: Send a CSS file here for testing Cite styling
+ appendToHead(document, 'link', {rel: 'stylesheet', href:
'http://localhost:8000/static/css/cite.css'});
+
// stick data-parsoid in the head
if ( psd.storeDataParsoid ) {
var dp = JSON.stringify( DU.getDataParsoid( document ) );
--
To view, visit https://gerrit.wikimedia.org/r/159483
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I74d487874be4e2692f17a9bd5ec351f4a20eadc6
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/services/parsoid
Gerrit-Branch: master
Gerrit-Owner: Marcoil <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
