Brion VIBBER has submitted this change and it was merged. Change subject: Work in progress: language marker button in doc area ......................................................................
Work in progress: language marker button in doc area Looks more or less like the mockup at https://trello-attachments.s3.amazonaws.com/52e98a603e6d08a53861025b/5363dc861f242dbd5eb6af22/4881x3543/879a1efeee2a2eb7ad4fa19e4de513e0/Apps_Language%26EditHistory_Sprint31.png though not 100% exact just yet. Questions: * Should this be added to ToC as well? * Do we need/want a single-character icon in the icon font for the Aあ bit? Or should we use the existing one that's different from the mockup? * How should the button respond visually while being pressed? * How should the marker be displayed when no languages available? Or leave it out as now? * Exact wrapping/pixel-level details and localization questions... Change-Id: I46f40a347ee5d0c60b9c9b320c4bffc8da780d07 --- M wikipedia/View Controllers/WebView/WebViewController.m M wikipedia/assets/bundle.js M wikipedia/assets/styles.css M wikipedia/en.lproj/Localizable.strings M wikipedia/qqq.lproj/Localizable.strings M www/Gruntfile.js M www/js/listeners.js A www/less/langbutton.less 8 files changed, 189 insertions(+), 24 deletions(-) Approvals: Brion VIBBER: Verified; Looks good to me, approved diff --git a/wikipedia/View Controllers/WebView/WebViewController.m b/wikipedia/View Controllers/WebView/WebViewController.m index ad509ea..027e01c 100644 --- a/wikipedia/View Controllers/WebView/WebViewController.m +++ b/wikipedia/View Controllers/WebView/WebViewController.m @@ -678,7 +678,12 @@ [weakSelf showSectionEditor]; }]; - + + [self.bridge addListener:@"langClicked" withBlock:^(NSString *messageType, NSDictionary *payload) { + NSLog(@"Language button pushed"); + [weakSelf languageButtonPushed]; + }]; + [self.bridge addListener:@"nonAnchorTouchEndedWithoutDragging" withBlock:^(NSString *messageType, NSDictionary *payload) { NSLog(@"nonAnchorTouchEndedWithoutDragging = %@", payload); @@ -1304,7 +1309,9 @@ self.scrollOffset = scrollOffset; -[sectionTextArray addObject:[NSString stringWithFormat:@"THIS MANY LANGS AVAILABLE = %d", langCount.integerValue]]; + if (mode != DISPLAY_LEAD_SECTION) { + [sectionTextArray addObject: [self renderLanguageButtonForCount: langCount.integerValue]]; + } // Join article sections text @@ -1327,6 +1334,19 @@ }]; } +-(NSString *)renderLanguageButtonForCount:(NSInteger)count +{ + if (count > 0) { + NSString *aa = @"<span class=\"mw-language-icon\">Aあ</span>"; + NSString *countStr = [NSString stringWithFormat:@"<span class=\"mw-language-count\">%d</span>", (int)count]; + NSString *otherLanguages = [NSString stringWithFormat:@"<span class=\"mw-language-label\">%@</span>", MWLocalizedString(@"language-button-other-languages", nil)]; + + return [NSString stringWithFormat:@"<button class=\"mw-language-button\"><span class=\"mw-language-items\">%@%@%@</span></button>", aa, countStr, otherLanguages]; + } else { + return @""; + } +} + #pragma mark Scroll to last section after rotate -(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration diff --git a/wikipedia/assets/bundle.js b/wikipedia/assets/bundle.js index c4caa93..896ca6f 100644 --- a/wikipedia/assets/bundle.js +++ b/wikipedia/assets/bundle.js @@ -158,6 +158,41 @@ bridge.sendMessage( "pong", payload ); }); +/** + * Quickie function to walk from the current element up to parents and match CSS-ish selectors. + * Think of it as a reverse element.querySelector :) + * + * Takes only element names, raw classes, and ids right now. Combines all given. + */ +function findParent(element, selector) { + var matches = selector.match(/^([a-z0-9]*)(?:\.([a-z0-9-]+))?(?:#([a-z0-9-]+))?$/i); + if (matches) { + var selectorName = matches[1] || null; + var selectorClass = matches[2] || null; + var selectorId = matches[3] || null; + + var candidate = element; + while (candidate) { + do { + if (selectorName && candidate.tagName && selectorName.toLowerCase() !== candidate.tagName.toLowerCase()) { + break; + } + if (selectorClass && selectorClass !== candidate.className) { + break; + } + if (selectorId && selectorId !== candidate.id) { + break; + } + return candidate; + } while (false); + candidate = candidate.parentNode; + } + } else { + throw new Error("Unexpected findParent selector format: " + selector); + } + return null; +} + document.onclick = function() { /* @@ -171,15 +206,7 @@ encountered. */ - var anchorTarget = null; - var potentialAnchorTarget = event.target; - while (potentialAnchorTarget) { - if ( potentialAnchorTarget.tagName === "A" ){ - anchorTarget = potentialAnchorTarget; - break; - } - potentialAnchorTarget = potentialAnchorTarget.parentNode; - } + var anchorTarget = findParent(event.target, 'A'); if ( anchorTarget && (anchorTarget.tagName === "A") ) { var href = anchorTarget.getAttribute( "href" ); @@ -206,7 +233,9 @@ if ( event.target.className === "edit_section" ) { bridge.sendMessage( 'editClicked', { href: event.target.getAttribute( "id" ) }); - }else{ + } else if (findParent(event.target, 'button.mw-language-button')) { + bridge.sendMessage( 'langClicked', {} ); + } else { event.preventDefault(); bridge.sendMessage( 'nonAnchorTouchEndedWithoutDragging', { id: event.target.getAttribute( "id" ), tagName: event.target.tagName}); } diff --git a/wikipedia/assets/styles.css b/wikipedia/assets/styles.css index 60cf097..67a0dd5 100644 --- a/wikipedia/assets/styles.css +++ b/wikipedia/assets/styles.css @@ -8,7 +8,8 @@ line-height: 26px; } html { - -webkit-text-size-adjust: none; /* Never autoresize text */ + -webkit-text-size-adjust: none; + /* Never autoresize text */ } #ios_app_content { margin: 0px; @@ -154,3 +155,41 @@ -webkit-transform: scaleX(-1); transform: scaleX(-1); } + +.mw-language-button { + appearance: none; + -webkit-appearance: none; + display: table; + color: #aaa; + background: #222; + font-size: 24px; + line-height: 24px; + padding: 12px; +} +.mw-language-items { + display: table-row; +} +.mw-language-icon, +.mw-language-count, +.mw-language-label { + display: table-cell; + vertical-align: middle; + height: 24px; +} +.mw-language-icon { + text-align: right; + color: white; + padding-right: 12px; + border-right: solid 1px #aaa; + white-space: nowrap; + font-family: "AvenirNextCondensed-Medium"; +} +.mw-language-count { + text-align: center; + padding-left: 12px; +} +.mw-language-label { + text-align: left; + padding-left: 12px; + font-size: 10px; +} diff --git a/wikipedia/en.lproj/Localizable.strings b/wikipedia/en.lproj/Localizable.strings index 9b0839f..ae19526 100644 --- a/wikipedia/en.lproj/Localizable.strings +++ b/wikipedia/en.lproj/Localizable.strings @@ -3,6 +3,8 @@ "article-languages-downloading" = "Loading article languages..."; "article-languages-filter-placeholder" = "Filter"; +"language-button-other-languages" = "Other Languages"; + "history-label" = "Browsing History"; "history-section-today" = "Today"; "history-section-yesterday" = "Yesterday"; diff --git a/wikipedia/qqq.lproj/Localizable.strings b/wikipedia/qqq.lproj/Localizable.strings index 9962213..58bb95e 100644 --- a/wikipedia/qqq.lproj/Localizable.strings +++ b/wikipedia/qqq.lproj/Localizable.strings @@ -110,3 +110,4 @@ "credits-gerrit-repo" = "Text for item linking to the app's main gerrit repository"; "credits-github-mirror" = "Text for item linking to the app's mirrored GitHub repository"; "credits-external-libraries" = "Title for area of credits page showing external open source libraries used by app.\n{{Identical|External}}"; +"language-button-other-languages" = "Label for 'other languages' button in content area. Button also shows the number of available languages, but an indeterminate plural should be used here."; diff --git a/www/Gruntfile.js b/www/Gruntfile.js index ce00dff..759d6b5 100644 --- a/www/Gruntfile.js +++ b/www/Gruntfile.js @@ -22,7 +22,7 @@ less: { all: { files: [ - { src: ["less/pagestyles.less"], dest: "styles.css"} + { src: ["less/pagestyles.less", "less/langbutton.less"], dest: "styles.css"} ] } }, diff --git a/www/js/listeners.js b/www/js/listeners.js index 0758c99..1cfd1e6 100644 --- a/www/js/listeners.js +++ b/www/js/listeners.js @@ -62,6 +62,41 @@ bridge.sendMessage( "pong", payload ); }); +/** + * Quickie function to walk from the current element up to parents and match CSS-ish selectors. + * Think of it as a reverse element.querySelector :) + * + * Takes only element names, raw classes, and ids right now. Combines all given. + */ +function findParent(element, selector) { + var matches = selector.match(/^([a-z0-9]*)(?:\.([a-z0-9-]+))?(?:#([a-z0-9-]+))?$/i); + if (matches) { + var selectorName = matches[1] || null; + var selectorClass = matches[2] || null; + var selectorId = matches[3] || null; + + var candidate = element; + while (candidate) { + do { + if (selectorName && candidate.tagName && selectorName.toLowerCase() !== candidate.tagName.toLowerCase()) { + break; + } + if (selectorClass && selectorClass !== candidate.className) { + break; + } + if (selectorId && selectorId !== candidate.id) { + break; + } + return candidate; + } while (false); + candidate = candidate.parentNode; + } + } else { + throw new Error("Unexpected findParent selector format: " + selector); + } + return null; +} + document.onclick = function() { /* @@ -75,15 +110,7 @@ encountered. */ - var anchorTarget = null; - var potentialAnchorTarget = event.target; - while (potentialAnchorTarget) { - if ( potentialAnchorTarget.tagName === "A" ){ - anchorTarget = potentialAnchorTarget; - break; - } - potentialAnchorTarget = potentialAnchorTarget.parentNode; - } + var anchorTarget = findParent(event.target, 'A'); if ( anchorTarget && (anchorTarget.tagName === "A") ) { var href = anchorTarget.getAttribute( "href" ); @@ -110,7 +137,9 @@ if ( event.target.className === "edit_section" ) { bridge.sendMessage( 'editClicked', { href: event.target.getAttribute( "id" ) }); - }else{ + } else if (findParent(event.target, 'button.mw-language-button')) { + bridge.sendMessage( 'langClicked', {} ); + } else { event.preventDefault(); bridge.sendMessage( 'nonAnchorTouchEndedWithoutDragging', { id: event.target.getAttribute( "id" ), tagName: event.target.tagName}); } diff --git a/www/less/langbutton.less b/www/less/langbutton.less new file mode 100644 index 0000000..bb205f6 --- /dev/null +++ b/www/less/langbutton.less @@ -0,0 +1,45 @@ +.mw-language-button { + appearance: none; + -webkit-appearance: none; + + display: table; + + color: #aaa; + background: #222; + font-size: 24px; + line-height: 24px; + padding: 12px; +} + +.mw-language-items { + display: table-row; +} + +.mw-language-icon, +.mw-language-count, +.mw-language-label { + display: table-cell; + vertical-align: middle; + height: 24px; +} + +.mw-language-icon { + text-align: right; + color: white; + padding-right: 12px; + border-right: solid 1px #aaa; + white-space: nowrap; + + font-family: "AvenirNextCondensed-Medium"; +} + +.mw-language-count { + text-align: center; + padding-left: 12px; +} + +.mw-language-label { + text-align: left; + padding-left: 12px; + font-size: 10px; +} -- To view, visit https://gerrit.wikimedia.org/r/134678 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I46f40a347ee5d0c60b9c9b320c4bffc8da780d07 Gerrit-PatchSet: 7 Gerrit-Project: apps/ios/wikipedia Gerrit-Branch: master Gerrit-Owner: Brion VIBBER <br...@wikimedia.org> Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
