jenkins-bot has submitted this change and it was merged.
Change subject: Offload IPA transform
......................................................................
Offload IPA transform
Had to switch the ipa_button div to a span since using a div caused
layout issues (an ugly line break) right after the assignment of the
HTML section text (pre-transformed by the service).
Not entirely sure why it didn't when we introduced the ipa_button
div during the DOM transformation phase.
Depends: I7c79548c9ea8c9cdc22551dfdc77f8455a514f8c
Change-Id: Iead9d28e55c5e9bcccdd471eba59aa1a3d00a719
---
M app/src/main/assets/bundle.js
A www/js/onclick.js
M www/js/sections.js
M www/js/transforms.js
R www/js/transforms/service/hideIpa.js
5 files changed, 164 insertions(+), 106 deletions(-)
Approvals:
Sniedzielski: Looks good to me, approved
Mholloway: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/app/src/main/assets/bundle.js b/app/src/main/assets/bundle.js
index 8b9b3cd..9363d53 100644
--- a/app/src/main/assets/bundle.js
+++ b/app/src/main/assets/bundle.js
@@ -120,7 +120,7 @@
module.exports = new ActionsHandler();
-},{"./bridge":2,"./utilities":24}],2:[function(require,module,exports){
+},{"./bridge":2,"./utilities":25}],2:[function(require,module,exports){
function Bridge() {
}
@@ -181,7 +181,7 @@
return content;
} );
-},{"./transformer":12}],4:[function(require,module,exports){
+},{"./transformer":13}],4:[function(require,module,exports){
var actions = require('./actions');
var bridge = require('./bridge');
@@ -215,7 +215,7 @@
return content;
} );
-},{"./transformer":12}],6:[function(require,module,exports){
+},{"./transformer":13}],6:[function(require,module,exports){
var bridge = require( "./bridge" );
function addStyleLink( href ) {
@@ -290,7 +290,7 @@
bridge.registerListener( "setDecorOffset", function( payload ) {
transformer.setDecorOffset(payload.offset);
} );
-},{"./bridge":2,"./transformer":12}],8:[function(require,module,exports){
+},{"./bridge":2,"./transformer":13}],8:[function(require,module,exports){
var bridge = require("./bridge");
var loader = require("./loader");
var utilities = require("./utilities");
@@ -374,7 +374,29 @@
setImageBackgroundsForDarkMode: setImageBackgroundsForDarkMode
};
-},{"./bridge":2,"./loader":6,"./utilities":24}],9:[function(require,module,exports){
+},{"./bridge":2,"./loader":6,"./utilities":25}],9:[function(require,module,exports){
+var bridge = require("./bridge");
+
+/*
+OnClick handler function for IPA spans.
+*/
+function ipaClickHandler() {
+ var container = this;
+ bridge.sendMessage( "ipaSpan", { "contents": container.innerHTML });
+}
+
+function addIPAonClick( content ) {
+ var spans = content.querySelectorAll( "span.ipa_button" );
+ for (var i = 0; i < spans.length; i++) {
+ var parent = spans[i].parentNode;
+ parent.onclick = ipaClickHandler;
+ }
+}
+
+module.exports = {
+ addIPAonClick: addIPAonClick
+};
+},{"./bridge":2}],10:[function(require,module,exports){
var bridge = require("./bridge");
bridge.registerListener( "displayPreviewHTML", function( payload ) {
@@ -383,7 +405,7 @@
content.innerHTML = payload.html;
} );
-},{"./bridge":2}],10:[function(require,module,exports){
+},{"./bridge":2}],11:[function(require,module,exports){
var bridge = require("./bridge");
bridge.registerListener( "setDirectionality", function( payload ) {
@@ -399,9 +421,10 @@
html.classList.add( "ui-" + payload.uiDirection );
} );
-},{"./bridge":2}],11:[function(require,module,exports){
+},{"./bridge":2}],12:[function(require,module,exports){
var bridge = require("./bridge");
var transformer = require("./transformer");
+var clickHandlerSetup = require("./onclick");
bridge.registerListener( "clearContents", function() {
clearContents();
@@ -495,15 +518,18 @@
// Content service transformations
if (!window.fromRestBase) {
transformer.transform( "moveFirstGoodParagraphUp" );
+
transformer.transform( "hideRedLinks", content );
transformer.transform( "setMathFormulaImageMaxWidth", content );
transformer.transform( "anchorPopUpMediaTransforms", content );
+ transformer.transform( "hideIPA", content );
+ } else {
+ clickHandlerSetup.addIPAonClick( content );
}
// client only transformations:
transformer.transform( "addDarkModeStyles", content ); // client setting
transformer.transform( "setDivWidth", content ); // offsetWidth
- transformer.transform( "hideIPA", content ); // clickHandler
if (!window.isMainPage) {
transformer.transform( "hideTables", content ); // clickHandler
@@ -579,11 +605,14 @@
transformer.transform( "hideRedLinks", content );
transformer.transform( "setMathFormulaImageMaxWidth", content );
transformer.transform( "anchorPopUpMediaTransforms", content );
+ transformer.transform( "hideIPA", content );
+ } else {
+ clickHandlerSetup.addIPAonClick( content );
}
transformer.transform( "addDarkModeStyles", content ); // client setting
transformer.transform( "setDivWidth", content ); // offsetWidth
- transformer.transform( "hideIPA", content ); // clickHandler
+
transformer.transform( "hideRefs", content ); // clickHandler
if (!window.isMainPage) {
@@ -673,7 +702,7 @@
bridge.sendMessage( "currentSectionResponse", { sectionID:
getCurrentSection() } );
} );
-},{"./bridge":2,"./transformer":12}],12:[function(require,module,exports){
+},{"./bridge":2,"./onclick":9,"./transformer":13}],13:[function(require,module,exports){
function Transformer() {
}
@@ -704,7 +733,7 @@
};
module.exports = new Transformer();
-},{}],13:[function(require,module,exports){
+},{}],14:[function(require,module,exports){
var transformer = require("../transformer");
var night = require("../night");
@@ -713,7 +742,7 @@
night.setImageBackgroundsForDarkMode ( content );
}
} );
-},{"../night":8,"../transformer":12}],14:[function(require,module,exports){
+},{"../night":8,"../transformer":13}],15:[function(require,module,exports){
var transformer = require("../transformer");
var utilities = require("../utilities");
@@ -753,7 +782,7 @@
images[i].addEventListener('load', maybeAddImageOverflowXContainer,
false);
}
} );
-},{"../transformer":12,"../utilities":24}],15:[function(require,module,exports){
+},{"../transformer":13,"../utilities":25}],16:[function(require,module,exports){
var transformer = require("../transformer");
/*
@@ -893,9 +922,88 @@
module.exports = {
handleTableCollapseOrExpandClick: handleTableCollapseOrExpandClick
};
-},{"../transformer":12}],16:[function(require,module,exports){
+},{"../transformer":13}],17:[function(require,module,exports){
var transformer = require("../transformer");
-var bridge = require("../bridge");
+var collapseTables = require("./collapseTables");
+
+transformer.register( "hideRefs", function( content ) {
+ var refLists = content.querySelectorAll( "div.reflist" );
+ for (var i = 0; i < refLists.length; i++) {
+ var caption = "<strong class='app_table_collapsed_caption'>" +
window.string_expand_refs + "</strong>";
+
+ //create the container div that will contain both the original table
+ //and the collapsed version.
+ var containerDiv = document.createElement( 'div' );
+ containerDiv.className = 'app_table_container';
+ refLists[i].parentNode.insertBefore(containerDiv, refLists[i]);
+ refLists[i].parentNode.removeChild(refLists[i]);
+
+ //create the collapsed div
+ var collapsedDiv = document.createElement( 'div' );
+ collapsedDiv.classList.add('app_table_collapsed_container');
+ collapsedDiv.classList.add('app_table_collapsed_open');
+ collapsedDiv.innerHTML = caption;
+
+ //create the bottom collapsed div
+ var bottomDiv = document.createElement( 'div' );
+ bottomDiv.classList.add('app_table_collapsed_bottom');
+ bottomDiv.classList.add('app_table_collapse_icon');
+ bottomDiv.innerHTML = window.string_table_close;
+
+ //add our stuff to the container
+ containerDiv.appendChild(collapsedDiv);
+ containerDiv.appendChild(refLists[i]);
+ containerDiv.appendChild(bottomDiv);
+
+ //give it just a little padding
+ refLists[i].style.padding = "4px";
+
+ //set initial visibility
+ refLists[i].style.display = 'none';
+ collapsedDiv.style.display = 'block';
+ bottomDiv.style.display = 'none';
+
+ //assign click handler to the collapsed divs
+ collapsedDiv.onclick = collapseTables.handleTableCollapseOrExpandClick;
+ bottomDiv.onclick = collapseTables.handleTableCollapseOrExpandClick;
+ }
+} );
+},{"../transformer":13,"./collapseTables":16}],18:[function(require,module,exports){
+var transformer = require("../../transformer");
+
+transformer.register( "anchorPopUpMediaTransforms", function( content ) {
+ // look for video thumbnail containers (divs that have class
"PopUpMediaTransform"),
+ // and enclose them in an anchor that will lead to the correct click
handler...
+ var mediaDivs = content.querySelectorAll( 'div.PopUpMediaTransform' );
+ for ( var i = 0; i < mediaDivs.length; i++ ) {
+ var mediaDiv = mediaDivs[i];
+ var imgTags = mediaDiv.querySelectorAll( 'img' );
+ if (imgTags.length === 0) {
+ continue;
+ }
+ // the first img element is the video thumbnail, and its 'alt'
attribute is
+ // the file name of the video!
+ if (!imgTags[0].getAttribute( 'alt' )) {
+ continue;
+ }
+ // also, we should hide the "Play media" link that appears
under the thumbnail,
+ // since we don't need it.
+ var aTags = mediaDiv.querySelectorAll( 'a' );
+ if (aTags.length > 0) {
+ aTags[0].parentNode.removeChild(aTags[0]);
+ }
+ var containerLink = document.createElement( 'a' );
+ containerLink.setAttribute( 'href', imgTags[0].getAttribute( 'alt' ) );
+ containerLink.classList.add( 'app_media' );
+ mediaDiv.parentNode.insertBefore(containerLink, mediaDiv);
+ mediaDiv.parentNode.removeChild(mediaDiv);
+ containerLink.appendChild(imgTags[0]);
+ }
+} );
+
+},{"../../transformer":13}],19:[function(require,module,exports){
+var transformer = require("../../transformer");
+var bridge = require("../../bridge");
/*
OnClick handler function for IPA spans.
@@ -942,86 +1050,7 @@
containerSpan.onclick = ipaClickHandler;
}
} );
-},{"../bridge":2,"../transformer":12}],17:[function(require,module,exports){
-var transformer = require("../transformer");
-var collapseTables = require("./collapseTables");
-
-transformer.register( "hideRefs", function( content ) {
- var refLists = content.querySelectorAll( "div.reflist" );
- for (var i = 0; i < refLists.length; i++) {
- var caption = "<strong class='app_table_collapsed_caption'>" +
window.string_expand_refs + "</strong>";
-
- //create the container div that will contain both the original table
- //and the collapsed version.
- var containerDiv = document.createElement( 'div' );
- containerDiv.className = 'app_table_container';
- refLists[i].parentNode.insertBefore(containerDiv, refLists[i]);
- refLists[i].parentNode.removeChild(refLists[i]);
-
- //create the collapsed div
- var collapsedDiv = document.createElement( 'div' );
- collapsedDiv.classList.add('app_table_collapsed_container');
- collapsedDiv.classList.add('app_table_collapsed_open');
- collapsedDiv.innerHTML = caption;
-
- //create the bottom collapsed div
- var bottomDiv = document.createElement( 'div' );
- bottomDiv.classList.add('app_table_collapsed_bottom');
- bottomDiv.classList.add('app_table_collapse_icon');
- bottomDiv.innerHTML = window.string_table_close;
-
- //add our stuff to the container
- containerDiv.appendChild(collapsedDiv);
- containerDiv.appendChild(refLists[i]);
- containerDiv.appendChild(bottomDiv);
-
- //give it just a little padding
- refLists[i].style.padding = "4px";
-
- //set initial visibility
- refLists[i].style.display = 'none';
- collapsedDiv.style.display = 'block';
- bottomDiv.style.display = 'none';
-
- //assign click handler to the collapsed divs
- collapsedDiv.onclick = collapseTables.handleTableCollapseOrExpandClick;
- bottomDiv.onclick = collapseTables.handleTableCollapseOrExpandClick;
- }
-} );
-},{"../transformer":12,"./collapseTables":15}],18:[function(require,module,exports){
-var transformer = require("../../transformer");
-
-transformer.register( "anchorPopUpMediaTransforms", function( content ) {
- // look for video thumbnail containers (divs that have class
"PopUpMediaTransform"),
- // and enclose them in an anchor that will lead to the correct click
handler...
- var mediaDivs = content.querySelectorAll( 'div.PopUpMediaTransform' );
- for ( var i = 0; i < mediaDivs.length; i++ ) {
- var mediaDiv = mediaDivs[i];
- var imgTags = mediaDiv.querySelectorAll( 'img' );
- if (imgTags.length === 0) {
- continue;
- }
- // the first img element is the video thumbnail, and its 'alt'
attribute is
- // the file name of the video!
- if (!imgTags[0].getAttribute( 'alt' )) {
- continue;
- }
- // also, we should hide the "Play media" link that appears
under the thumbnail,
- // since we don't need it.
- var aTags = mediaDiv.querySelectorAll( 'a' );
- if (aTags.length > 0) {
- aTags[0].parentNode.removeChild(aTags[0]);
- }
- var containerLink = document.createElement( 'a' );
- containerLink.setAttribute( 'href', imgTags[0].getAttribute( 'alt' ) );
- containerLink.classList.add( 'app_media' );
- mediaDiv.parentNode.insertBefore(containerLink, mediaDiv);
- mediaDiv.parentNode.removeChild(mediaDiv);
- containerLink.appendChild(imgTags[0]);
- }
-} );
-
-},{"../../transformer":12}],19:[function(require,module,exports){
+},{"../../bridge":2,"../../transformer":13}],20:[function(require,module,exports){
var transformer = require("../../transformer");
transformer.register( "hideRedLinks", function( content ) {
@@ -1034,7 +1063,7 @@
redLink.parentNode.replaceChild( replacementSpan, redLink );
}
} );
-},{"../../transformer":12}],20:[function(require,module,exports){
+},{"../../transformer":13}],21:[function(require,module,exports){
var transformer = require("../../transformer");
// Move the first non-empty paragraph (and related elements) to the top of the
section.
@@ -1118,7 +1147,7 @@
}
}
-},{"../../transformer":12}],21:[function(require,module,exports){
+},{"../../transformer":13}],22:[function(require,module,exports){
var transformer = require("../../transformer");
transformer.register( "setMathFormulaImageMaxWidth", function( content ) {
@@ -1135,7 +1164,7 @@
}
}
} );
-},{"../../transformer":12}],22:[function(require,module,exports){
+},{"../../transformer":13}],23:[function(require,module,exports){
var transformer = require("../transformer");
transformer.register( "setDivWidth", function( content ) {
@@ -1153,7 +1182,7 @@
}
}
} );
-},{"../transformer":12}],23:[function(require,module,exports){
+},{"../transformer":13}],24:[function(require,module,exports){
var transformer = require("../transformer");
var utilities = require("../utilities");
@@ -1262,7 +1291,7 @@
images[i].addEventListener('load', maybeWidenImage, false);
}
} );
-},{"../transformer":12,"../utilities":24}],24:[function(require,module,exports){
+},{"../transformer":13,"../utilities":25}],25:[function(require,module,exports){
function hasAncestor( el, tagName ) {
if (el !== null && el.tagName === tagName) {
@@ -1357,4 +1386,4 @@
firstAncestorWithMultipleChildren: firstAncestorWithMultipleChildren
};
-},{}]},{},[2,7,24,12,13,14,15,16,17,22,23,18,19,20,21,1,3,4,5,6,8,9,10,11])
\ No newline at end of file
+},{}]},{},[2,7,25,13,14,15,16,17,23,24,18,19,20,21,22,1,3,4,5,6,8,10,11,12])
\ No newline at end of file
diff --git a/www/js/onclick.js b/www/js/onclick.js
new file mode 100644
index 0000000..d77a829
--- /dev/null
+++ b/www/js/onclick.js
@@ -0,0 +1,21 @@
+var bridge = require("./bridge");
+
+/*
+OnClick handler function for IPA spans.
+*/
+function ipaClickHandler() {
+ var container = this;
+ bridge.sendMessage( "ipaSpan", { "contents": container.innerHTML });
+}
+
+function addIPAonClick( content ) {
+ var spans = content.querySelectorAll( "span.ipa_button" );
+ for (var i = 0; i < spans.length; i++) {
+ var parent = spans[i].parentNode;
+ parent.onclick = ipaClickHandler;
+ }
+}
+
+module.exports = {
+ addIPAonClick: addIPAonClick
+};
\ No newline at end of file
diff --git a/www/js/sections.js b/www/js/sections.js
index d5446e5..361649c 100644
--- a/www/js/sections.js
+++ b/www/js/sections.js
@@ -1,5 +1,6 @@
var bridge = require("./bridge");
var transformer = require("./transformer");
+var clickHandlerSetup = require("./onclick");
bridge.registerListener( "clearContents", function() {
clearContents();
@@ -93,15 +94,18 @@
// Content service transformations
if (!window.fromRestBase) {
transformer.transform( "moveFirstGoodParagraphUp" );
+
transformer.transform( "hideRedLinks", content );
transformer.transform( "setMathFormulaImageMaxWidth", content );
transformer.transform( "anchorPopUpMediaTransforms", content );
+ transformer.transform( "hideIPA", content );
+ } else {
+ clickHandlerSetup.addIPAonClick( content );
}
// client only transformations:
transformer.transform( "addDarkModeStyles", content ); // client setting
transformer.transform( "setDivWidth", content ); // offsetWidth
- transformer.transform( "hideIPA", content ); // clickHandler
if (!window.isMainPage) {
transformer.transform( "hideTables", content ); // clickHandler
@@ -177,11 +181,14 @@
transformer.transform( "hideRedLinks", content );
transformer.transform( "setMathFormulaImageMaxWidth", content );
transformer.transform( "anchorPopUpMediaTransforms", content );
+ transformer.transform( "hideIPA", content );
+ } else {
+ clickHandlerSetup.addIPAonClick( content );
}
transformer.transform( "addDarkModeStyles", content ); // client setting
transformer.transform( "setDivWidth", content ); // offsetWidth
- transformer.transform( "hideIPA", content ); // clickHandler
+
transformer.transform( "hideRefs", content ); // clickHandler
if (!window.isMainPage) {
diff --git a/www/js/transforms.js b/www/js/transforms.js
index b0d4b91..8c854ad 100644
--- a/www/js/transforms.js
+++ b/www/js/transforms.js
@@ -2,7 +2,8 @@
require("./transforms/addImageOverflowContainers");
require("./transforms/service/anchorPopUpMediaTransforms");
require("./transforms/collapseTables");
-require("./transforms/hideIpa");
+require("./transforms/service/hideIpa");
+require("./transforms/clickIpa");
require("./transforms/service/hideRedLinks");
require("./transforms/hideRefs");
require("./transforms/service/relocateFirstParagraph");
diff --git a/www/js/transforms/hideIpa.js b/www/js/transforms/service/hideIpa.js
similarity index 94%
rename from www/js/transforms/hideIpa.js
rename to www/js/transforms/service/hideIpa.js
index c6de0ca..61b83aa 100644
--- a/www/js/transforms/hideIpa.js
+++ b/www/js/transforms/service/hideIpa.js
@@ -1,5 +1,5 @@
-var transformer = require("../transformer");
-var bridge = require("../bridge");
+var transformer = require("../../transformer");
+var bridge = require("../../bridge");
/*
OnClick handler function for IPA spans.
--
To view, visit https://gerrit.wikimedia.org/r/253469
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iead9d28e55c5e9bcccdd471eba59aa1a3d00a719
Gerrit-PatchSet: 2
Gerrit-Project: apps/android/wikipedia
Gerrit-Branch: master
Gerrit-Owner: BearND <[email protected]>
Gerrit-Reviewer: BearND <[email protected]>
Gerrit-Reviewer: Brion VIBBER <[email protected]>
Gerrit-Reviewer: Dbrant <[email protected]>
Gerrit-Reviewer: Mholloway <[email protected]>
Gerrit-Reviewer: Niedzielski <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
