Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 23483: Donation banner on about:tor for 2017
(Also removes a dot from aboutTor.donationBanner.slogan)
- Loading branch information
1 parent
0387a6f
commit b3ff986
Showing
8 changed files
with
357 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /* jshint esnext:true */ | ||
|
|
||
| let sel = selector => document.querySelector(selector); | ||
|
|
||
| // Shrink the font size if the text in the given element is overflowing. | ||
| let fitTextInElement = function (element) { | ||
| element.style.fontSize = "8px"; | ||
| let defaultWidth = element.scrollWidth, | ||
| defaultHeight = element.scrollHeight; | ||
| let bestSize; | ||
| for (let testSize = 8; testSize <= 40; testSize += 0.5) { | ||
| element.style.fontSize = `${testSize}px`; | ||
| if (element.scrollWidth <= defaultWidth && | ||
| element.scrollHeight <= defaultHeight) { | ||
| bestSize = testSize; | ||
| } else { | ||
| break; | ||
| } | ||
| } | ||
| element.style.fontSize = `${bestSize}px`; | ||
| }; | ||
|
|
||
| // Increase padding at end to "squeeze" text, until just before | ||
| // it gets squeezed so much that it gets longer vertically. | ||
| let avoidWidows = function (element) { | ||
| element.style.paddingRight = "0px"; | ||
| let originalWidth = element.scrollWidth; | ||
| let originalHeight = element.scrollHeight; | ||
| let bestPadding; | ||
| for (let testPadding = 0; testPadding < originalWidth; testPadding += 0.5) { | ||
| element.style.paddingRight = `${testPadding}px`; | ||
| if (element.scrollHeight <= originalHeight) { | ||
| bestPadding = testPadding; | ||
| } else { | ||
| break; | ||
| } | ||
| } | ||
| element.style.paddingRight = `${bestPadding}px`; | ||
| if (window.getComputedStyle(element).direction === "rtl") { | ||
| element.style.paddingLeft = element.style.paddingRight; | ||
| element.style.paddingRight = "0px"; | ||
| } | ||
| }; | ||
|
|
||
| // Resize the text inside banner to fit. | ||
| let updateTextSizes = function () { | ||
| fitTextInElement(sel("#banner-tagline")); | ||
| fitTextInElement(sel("#banner-slogan")); | ||
| fitTextInElement(sel("#banner-donate-button-inner")); | ||
| avoidWidows(sel("#banner-tagline span")); | ||
| }; | ||
|
|
||
| // Returns a random integer x, such that 0 <= x < max | ||
| let randomInteger = max => Math.floor(max * Math.random()); | ||
|
|
||
| // The main donation banner function. | ||
| let runDonationBanner = function ({ taglines, slogan, donate, shortLocale }) { | ||
| try { | ||
| sel("#banner-tagline span").innerText = taglines[randomInteger(taglines.length)]; | ||
| sel("#banner-slogan span").innerText = slogan; | ||
| let donateButtonText = sel("#banner-donate-button-inner span"); | ||
| let rtl = window.getComputedStyle(donateButtonText).direction === "rtl"; | ||
| donateButtonText.innerHTML = donate + " " + (rtl ? "◀" : "▶"); | ||
| sel("#banner").style.display = "flex"; | ||
| sel("#banner-spacer").style.display = "block"; | ||
| addEventListener("resize", updateTextSizes); | ||
| updateTextSizes(); | ||
| // Add a suffix corresponding to locale so we can send user | ||
| // to a correctly-localized donation page via redirect. | ||
| sel("#banner-donate-button-link").href += "-" + shortLocale; | ||
| sel("#torstatus-image").style.display = "none"; | ||
| } catch (e) { | ||
| // Something went wrong. | ||
| console.error(e); | ||
| sel("#banner").style.display = "none"; | ||
| sel("#bannerSpacer").style.display = "none"; | ||
| sel("#torstatus-image").style.display = "block"; | ||
| } | ||
| }; | ||
|
|
||
| // Calls callback(attributeValue) when the specified attribute changes on | ||
| // target. Returns a zero-arg function that stops observing. | ||
| let observeAttribute = function (target, attributeName, callback) { | ||
| let observer = new MutationObserver(mutations => { | ||
| mutations.forEach(mutation => { | ||
| if (mutation.type === "attributes" && | ||
| mutation.attributeName === attributeName) { | ||
| callback(target.getAttribute(attributeName)); | ||
| } | ||
| }); | ||
| }); | ||
| observer.observe(target, { attributes: true }); | ||
| return () => observer.disconnect(); | ||
| }; | ||
|
|
||
| // Start the donation banner if "toron" has been set to "yes". | ||
| let stopObserving = observeAttribute(document.body, "toron", value => { | ||
| stopObserving(); | ||
| if (value === "yes") { | ||
| let bannerDataJSON = document.body.getAttribute("banner-data"); | ||
| if (bannerDataJSON && bannerDataJSON.length > 0) { | ||
| runDonationBanner(JSON.parse(bannerDataJSON)); | ||
| } | ||
| } | ||
| }); |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| #banner { | ||
| -khtml-user-select: none; /* Konqueror */ | ||
| -moz-user-select: none; /* Firefox */ | ||
| -ms-user-select: none; /* Internet Explorer/Edge */ | ||
| -webkit-touch-callout: none; /* iOS Safari */ | ||
| -webkit-user-select: none; /* Chrome/Safari/Opera */ | ||
| display: none; | ||
| height: 150px; | ||
| justify-content: center; | ||
| left: 0px; | ||
| margin-top: 0px; | ||
| min-width: 900px; | ||
| opacity: 1; | ||
| position: absolute; | ||
| user-select: none; | ||
| width: 100%; | ||
| z-index: 1; | ||
| } | ||
| #banner:before { | ||
| background-color: #406; | ||
| background-image: url('resource://torbutton/chrome/content/aboutTor/onion-hand.png'); | ||
| background-position: center; | ||
| background-size: cover; | ||
| content: ""; | ||
| height: 150px; | ||
| left: 0px; | ||
| position: absolute; | ||
| top: 0px; | ||
| width: 100%; | ||
| } | ||
| #banner:-moz-dir(rtl):before { | ||
| transform: scaleX(-1); | ||
| } | ||
| #banner-contents-container { | ||
| align-items: center; | ||
| height: 100%; | ||
| max-width: 700px; | ||
| position: relative; | ||
| width: 700px; | ||
| } | ||
| #banner-tagline { | ||
| align-items: center; | ||
| bottom: 60px; | ||
| color: white; | ||
| display: flex; | ||
| font-family: monospace; | ||
| font-size: 8px; | ||
| font-weight: bold; | ||
| left: 85px; | ||
| position: absolute; | ||
| right: 0px; | ||
| text-align: start; | ||
| text-transform: uppercase; | ||
| top: 10px; | ||
| } | ||
| #banner-tagline:-moz-dir(rtl) { | ||
| left: 0px; | ||
| right: 85px; | ||
| } | ||
| #banner-slogan { | ||
| align-items: start; | ||
| bottom: 0px; | ||
| color: #f8f8a0; | ||
| display: flex; | ||
| font-family: monospace; | ||
| font-weight: bold; | ||
| left: 85px; | ||
| position: absolute; | ||
| right: 285px; | ||
| text-align: start; | ||
| top: 100px; | ||
| white-space: nowrap; | ||
| } | ||
| #banner-slogan:-moz-dir(rtl) { | ||
| left: 285px; | ||
| right: 85px; | ||
| } | ||
| #banner-donate-button { | ||
| background-color: #13a513; | ||
| border: 0px; | ||
| bottom: 10px; | ||
| color: #fbf7ef; | ||
| font-family: sans-serif; | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| left: 430px; | ||
| letter-spacing: -0.00em; | ||
| position: absolute; | ||
| right: 0px; | ||
| top: 100px; | ||
| } | ||
| #banner-donate-button:-moz-dir(rtl) { | ||
| left: 0px; | ||
| right: 430px; | ||
| } | ||
| #banner-donate-button:hover { | ||
| background-color: #38bc38; | ||
| } | ||
| #banner-donate-button-inner { | ||
| bottom: 6px; | ||
| display: flex; | ||
| justify-content: center; | ||
| left: 8px; | ||
| position: absolute; | ||
| right: 8px; | ||
| top: 6px; | ||
| } | ||
| #banner-spacer { | ||
| display: none; | ||
| height: 150px; | ||
| position: relative; | ||
| top: 0; | ||
| } |
Oops, something went wrong.