Fjalapeno has uploaded a new change for review.
https://gerrit.wikimedia.org/r/189897
Change subject: WIP Info Box collapsing.
......................................................................
WIP Info Box collapsing.
Add js to open and close
Add CSS to style box
Localize title and close text on info box
Change-Id: I76ff322ef727b2f948e85c42862a34b3f9dc1d01
---
M wikipedia/View Controllers/WebView/WebViewController.m
M wikipedia/en.lproj/Localizable.strings
M wikipedia/qqq.lproj/Localizable.strings
M www/js/listeners.js
M www/js/transforms.js
M www/less/langbutton.less
6 files changed, 273 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/apps/ios/wikipedia
refs/changes/97/189897/1
diff --git a/wikipedia/View Controllers/WebView/WebViewController.m
b/wikipedia/View Controllers/WebView/WebViewController.m
index 47dad9e..5e05e71 100644
--- a/wikipedia/View Controllers/WebView/WebViewController.m
+++ b/wikipedia/View Controllers/WebView/WebViewController.m
@@ -197,6 +197,8 @@
// Show lead image!
[weakSelf.leadImageContainer showForArticle:[SessionSingleton
sharedInstance].article];
+
+ [weakSelf replaceLoadedInfoBoxTextInWebview];
}];
self.unsafeToScroll = NO;
@@ -1768,6 +1770,73 @@
return [NSString stringWithFormat:@"<div dir=\"%@\"
class=\"mw-license-footer\">%@</div>", dir, licenseText];
}
+-(void)replaceLoadedInfoBoxTextInWebview{
+
+ BOOL end = NO;
+ int i = 0;
+
+ while (!end) {
+
+ NSString *js = [NSString stringWithFormat:@"(function() {"
+ @" var x =
document.getElementById(\"app_span_quick_fact_text%i\").innerHTML;"
+ @" return x;"
+ @"})()", i];
+
+ NSString* text = [self.webView
stringByEvaluatingJavaScriptFromString:js];
+
+ if([text length] > 0){
+
+ text = [text stringByReplacingOccurrencesOfString:@"$Quick_Facts"
withString:MWLocalizedString(@"info-box-title", nil) ];
+
+ NSString *js = [NSString stringWithFormat:@"(function() {"
+ @" var x =
document.getElementById(\"app_span_quick_fact_text%i\");"
+ @" x.innerHTML = \"%@\";"
+ @" return x;"
+ @"})()", i, text];
+
+ text = [self.webView stringByEvaluatingJavaScriptFromString:js];
+
+
+ }else{
+ end = YES;
+ }
+
+ i++;
+ }
+
+ end = NO;
+ i = 0;
+
+ while (!end) {
+
+ NSString *js = [NSString stringWithFormat:@"(function() {"
+ @" var x =
document.getElementById(\"app_span_close_table_text%i\").innerHTML;"
+ @" return x;"
+ @"})()", i];
+
+ NSString* text = [self.webView
stringByEvaluatingJavaScriptFromString:js];
+
+ if([text length] > 0){
+
+ text = [text stringByReplacingOccurrencesOfString:@"$Close_Table"
withString:MWLocalizedString(@"info-box-close-text", nil) ];
+
+ NSString *js = [NSString stringWithFormat:@"(function() {"
+ @" var x =
document.getElementById(\"app_span_close_table_text%i\");"
+ @" x.innerHTML = \"%@\";"
+ @" return x;"
+ @"})()", i, text];
+
+ text = [self.webView stringByEvaluatingJavaScriptFromString:js];
+
+
+ }else{
+ end = YES;
+ }
+
+ i++;
+ }
+}
+
#pragma mark Scroll to last section after rotate
-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration
diff --git a/wikipedia/en.lproj/Localizable.strings
b/wikipedia/en.lproj/Localizable.strings
index 5a51845..a5e0ab9 100644
--- a/wikipedia/en.lproj/Localizable.strings
+++ b/wikipedia/en.lproj/Localizable.strings
@@ -3,6 +3,9 @@
"article-languages-downloading" = "Loading article languages...";
"article-languages-filter-placeholder" = "Language Filter";
+"info-box-title" = "Quick Facts";
+"info-box-close-text" = "Close";
+
"language-button-text" = "You can read this article in %d other languages";
"history-label" = "Recent";
diff --git a/wikipedia/qqq.lproj/Localizable.strings
b/wikipedia/qqq.lproj/Localizable.strings
index e655bf5..c92c5c8 100644
--- a/wikipedia/qqq.lproj/Localizable.strings
+++ b/wikipedia/qqq.lproj/Localizable.strings
@@ -13,6 +13,8 @@
"article-languages-cancel" = "Button text for dismissing the language selector
screen.\n{{Identical|Cancel}}";
"article-languages-downloading" = "Alert text shown when obtaining list of
languages in which an article is available";
"article-languages-filter-placeholder" = "Filter languages text box
placeholder text.";
+"info-box-title" = "The title of info boxes - in collapsed and expanded form";
+"info-box-close-text" = "The text for telling users thyey can tap the bottom
of the info box to close it";
"language-button-text" = "Label for 'other languages' button in content area
footer. %d is placeholder for the number of available languages; note that
support for PLURAL string marking is not yet available, so make your message
generic if possible for now.";
"history-label" = "Header label for screen showing the users' in-app browsing
history.\n{{Identical|Recent}}";
"history-section-today" = "Subsection label for list of articles browsed
today.\n{{Identical|Today}}";
@@ -240,3 +242,5 @@
"nearby-location-general-error" = "General location determination error
message";
"nearby-wifi" = "Alert text telling user how to improve location accuracy";
"update-progress-label" = "Label shown during automatic upgrade of local data
to new internal format. May be on screen very briefly or for a few seconds.";
+"info-box-title" = "MISSING DESCRIPTION; DO NOT COMMIT FILE YET";
+"info-box-close-text" = "MISSING DESCRIPTION; DO NOT COMMIT FILE YET";
diff --git a/www/js/listeners.js b/www/js/listeners.js
index ecee4ba..c0d8459 100644
--- a/www/js/listeners.js
+++ b/www/js/listeners.js
@@ -7,6 +7,7 @@
document.addEventListener("DOMContentLoaded", function(event) {
transformer.transform( "moveFirstGoodParagraphUp", document );
+ transformer.transform( "hideTables", document );
transformer.transform( "hideRedlinks", document );
transformer.transform( "disableFilePageEdit", document );
diff --git a/www/js/transforms.js b/www/js/transforms.js
index d732188..e53d6ea 100644
--- a/www/js/transforms.js
+++ b/www/js/transforms.js
@@ -60,11 +60,142 @@
// Move the P!
block_0.insertBefore(p.parentNode.removeChild(p), block_0.firstChild);
-
+
// But only move one P!
break;
}
});
+
+/*
+Tries to get an array of table header (TH) contents from a given table.
+If there are no TH elements in the table, an empty array is returned.
+*/
+function getTableHeader( element ) {
+ var thArray = [];
+ if (element.children === undefined || element.children === null) {
+ return thArray;
+ }
+ for (var i = 0; i < element.children.length; i++) {
+ var el = element.children[i];
+ if (el.tagName === "TH") {
+ // ok, we have a TH element!
+ // However, if it contains more than two links, then ignore it,
because
+ // it will probably appear weird when rendered as plain text.
+ var aNodes = el.querySelectorAll( "a" );
+ if (aNodes.length < 3) {
+ // Also ignore it if it's identical to the page title.
+ if (el.innerText.length > 0 && el.innerText !==
window.pageTitle && el.innerHTML !== window.pageTitle) {
+ thArray.push(el.innerText);
+ }
+ }
+ }
+ //if it's a table within a table, don't worry about it
+ if (el.tagName === "TABLE") {
+ continue;
+ }
+ //recurse into children of this element
+ var ret = getTableHeader(el);
+ //did we get a list of TH from this child?
+ if (ret.length > 0) {
+ thArray = thArray.concat(ret);
+ }
+ }
+ return thArray;
+}
+
+/*
+OnClick handler function for expanding/collapsing tables and infoboxes.
+*/
+function tableCollapseClickHandler() {
+ var container = this.parentNode;
+ var divCollapsed = container.children[0];
+ var tableFull = container.children[1];
+ var divBottom = container.children[2];
+ if (tableFull.style.display !== 'none') {
+ tableFull.style.display = 'none';
+ divCollapsed.classList.remove('app_table_collapse_close');
+ divCollapsed.classList.remove('app_table_collapse_icon');
+ divCollapsed.classList.add('app_table_collapsed_open');
+ divBottom.style.display = 'none';
+ //if they clicked the bottom div, then scroll back up to the top of
the table.
+ if (this === divBottom) {
+ window.scrollTo( 0, container.offsetTop - 48 );
+ }
+ } else {
+ tableFull.style.display = 'block';
+ divCollapsed.classList.remove('app_table_collapsed_open');
+ divCollapsed.classList.add('app_table_collapse_close');
+ divCollapsed.classList.add('app_table_collapse_icon');
+ divBottom.style.display = 'block';
+ }
+}
+
+transformer.register( "hideTables", function( content ) {
+ var tables = content.querySelectorAll( "table" );
+ for (var i = 0; i < tables.length; i++) {
+ //is the table already hidden? if so, don't worry about it
+ if (tables[i].style.display === 'none' ||
tables[i].classList.contains( 'navbox' ) || tables[i].classList.contains(
'vertical-navbox' ) || tables[i].classList.contains( 'navbox-inner' ) ||
tables[i].classList.contains( 'metadata' )) {
+ continue;
+ }
+
+ var isInfobox = tables[i].classList.contains( 'infobox' );
+ var headerText = getTableHeader(tables[i]);
+ if (headerText.length === 0 && !isInfobox) {
+ continue;
+ }
+ var caption = "<strong><span id='app_span_quick_fact_text" + i +
"'>$Quick_Facts</span></strong>";
+ caption += "<span class='app_span_collapse_text'>";
+ if (headerText.length > 0) {
+ caption += ": " + headerText[0];
+ }
+ if (headerText.length > 1) {
+ caption += ", " + headerText[1];
+ }
+ if (headerText.length > 0) {
+ caption += ", ...";
+ }
+ caption += "</span>";
+
+ //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';
+ tables[i].parentNode.insertBefore(containerDiv, tables[i]);
+ tables[i].parentNode.removeChild(tables[i]);
+
+ //remove top and bottom margin from the table, so that it's flush with
+ //our expand/collapse buttons
+ tables[i].style.marginTop = "0px";
+ tables[i].style.marginBottom = "0px";
+
+ //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 = "<span id='app_span_close_table_text" + i +
"'>$Close_Table</span>";
+
+ //add our stuff to the container
+ containerDiv.appendChild(collapsedDiv);
+ containerDiv.appendChild(tables[i]);
+ containerDiv.appendChild(bottomDiv);
+
+ //set initial visibility
+ tables[i].style.display = 'none';
+ collapsedDiv.style.display = 'block';
+ bottomDiv.style.display = 'none';
+
+ //assign click handler to the collapsed divs
+ collapsedDiv.onclick = tableCollapseClickHandler;
+ bottomDiv.onclick = tableCollapseClickHandler;
+ }
+} );
+
transformer.register( "hideRedlinks", function( content ) {
var redLinks = content.querySelectorAll( 'a.new' );
@@ -96,4 +227,3 @@
}
}
} );
-
diff --git a/www/less/langbutton.less b/www/less/langbutton.less
index aae8b95..262b006 100644
--- a/www/less/langbutton.less
+++ b/www/less/langbutton.less
@@ -79,3 +79,67 @@
margin-top: 24px;
margin-bottom: 24px;
}
+
+
+.content table.infobox {
+font-size: 100%;
+}
+
+table.infobox caption {
+text-align: center;
+font-weight: bold;
+}
+
+.app_table_container {
+width: 100%;
+margin-top: 14px;
+margin-bottom: 14px;
+border-radius: 2px;
+box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12), 0 0 1px 0 rgba(0,0,0,0.18);
+}
+
+.app_table_collapsed_container {
+width: 100%;
+padding-left: 12px;
+padding-right: 48px;
+padding-top: 12px;
+padding-bottom: 12px;
+line-height: 120%;
+background-color: #f8f8f8;
+background-repeat: no-repeat;
+background-position: 95% 50%;
+background-size: 16px 16px;
+}
+
+.app_table_collapsed_open {
+border-radius: 2px;
+background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4zjOaXUAAAAoZJREFUaEPtmE1uE0EQhceEn1NwFEtwALL0CSzbe2+9QQgJAoKI8BeF8I8ImCQCIRCSxVk4QNhkxwZ4z+qOespvPNMzYxCiS/ricVVX1evpnukkWbJkyZIlS5Ys2f9ss9lsTr/fPz8ajV4Mh8Nv4Dv4OhgMLvr43wKaLkDLF3BEbdRIrT4+/wGhlxA8Br8MPxG74gf/adD7OjUYTeSYmjkmw5d18CMILoBZ37DFVw0E3lFaAqh5nROYBs5CUPC2arQCOuh1T2kQTLNer3cGF4cmIOFdEQ3bhOIfqt6CQ2qfJ7pJHJgBEt4dNgqatgXF76iegn1qZt5JgclkchqBd2ZgEdts6HOb0u12T+E52xV9FFNq9bm5Qm4Sb01CEY/YOMyvgxP/VNRfAOPehOJJrhjhAA5UBQRPmkwC+WvoxbNH1c6B7fUan2u2Ru6LhwNdgixmeA4WCpfBHPDK1SiD42SPBYeHCS5RFbQUNlC4rboX5BfiVqiwtnR6mIiVeBkWXMKe3Z+KmOcMvZ+VbVHpDGEBFOM2kU0MuTeExb2u901OEZWeL+m0xLwpwIF/R4c48ZUOTPTarfpykE4FC2JJH6uGgvfgrM/lNfjgYktBjx3kVD5jpLMItxJVD5yP4/H4HOG1iRURfUBKZwkxR/4n8Nn4JLgxD1jb9CpFOivQQdNtK6IuuCG1f7+Szop0eNeUoEi2RO3KSGcEXIn7RlAMm6JmFNIZC1birhC3FOTcUrVikc46YB+X/Ql4AsbeVDXqIJ11gbhNK1awoXLrIp1N4NYQoucgdk3lNEE6m8ItIsRfVWObIp1tANEbXjwmtLL/LUlnW3DLYAKXVawtkiVLlixZsn/Ysuw35enU+iMlJaQAAAAASUVORK5CYII=);
+}
+
+.app_table_collapse_close {
+border-radius: 2px 2px 0px 0px;
+}
+
+.app_table_collapse_icon {
+background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4zjOaXUAAAAoBJREFUaEPtmE1uE0EQhW3Mzyk4iiU4AFn6BJbtvbfeIIQEAUEUCEnE/58ImCQCIRCSxVk4AGyyYwN5L+qOxuXXM90zthCiS/ricXV11avunhkrrWzZsmXLlu2fttlstjJGo9GN4XB4VY0tC+lcBhC+Dv6QwWBwTcUsA+lsCgTf9uI92I3rKrYp0tkECL1jxXt4pNScJkhnXSByw4oWrKu5dZHOOuDYbAqxEh4xlaMO0pkKjsZ9JbQMHjWVKxXpTKANMQ+suAQ2RM4kpDOSNlZxW4hK5Z7IHY10RsCV3zVCaoN7Yos5TY0opLOCNgo+VEIEn8EX45NwN5nb1KpEOkN0u90zKPRYCRB8Go/HFwivzViIXdRJakI6FRSPlX8iiio+gPN+Lq/BRzdWCncXc6KbkE6LW/lnqqDgoNfrnbM56MPYoYmVcJdZ0+ZQSGcRJkLSF7ZIgOlkMjmr8hDXxL6ZE+JpTBPS6UGSDrb0lUkcYq9MvIcxiH1n5kpQ+3lVE9JJkKADXhcTlsC4jsqjcE3sFeYHwXF6ic9gbunkBHT/ppioBB6vaPEezgGNF2jBwdVB129NghBR5zQE5nfcCqvcc7gFXWhi7kvK+QSPmoj3MEfsE44La++z0wsn/r2dFCD5hVOGayL2BTn3pDv54x5vByZQgq2s/bulgpSfKPv+XZP0gkGBTVN02bCJHVVbcEjtvJGmZkCCxHdFwVXAJraUBsGUDayBXwXnAjift0ShlcLdVloKUPOaD76CL0eFQc9vjK3sfzpVoPZNajCayBE1M+Y0uN/vX3TP5O/gJ/iGoMt+/G8BTZeg5Sv4QW3USK1+PFu2bNmyZcuW7f+1VusYzYvU+uNoBCAAAAAASUVORK5CYII=);
+}
+
+.app_span_collapse_text {
+color: #808080;
+}
+
+.app_table_collapsed_bottom {
+width: 100%;
+color: #808080;
+padding-left: 12px;
+padding-right: 48px;
+padding-top: 12px;
+padding-bottom: 12px;
+line-height: 120%;
+border-radius: 0px 0px 2px 2px;
+background-color: #f8f8f8;
+background-repeat: no-repeat;
+background-position: 95% 50%;
+background-size: 16px 16px;
+}
+
--
To view, visit https://gerrit.wikimedia.org/r/189897
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I76ff322ef727b2f948e85c42862a34b3f9dc1d01
Gerrit-PatchSet: 1
Gerrit-Project: apps/ios/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Fjalapeno <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
