From c95183082a26949992b28f2840c08f706b5b4506 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Mon, 4 Nov 2024 10:35:26 -0500 Subject: [PATCH] Nothing Personal Updates (fix #15420) --- .../includes/browser-macro.html | 2 +- .../firefox/nothing-personal/index.html | 272 +++++++++--------- .../firefox/nothing-personal/_animations.scss | 16 -- .../firefox/nothing-personal/_browser.scss | 179 +----------- .../nothing-personal/_feature-box.scss | 20 ++ .../firefox/nothing-personal/_fox-gif.scss | 70 +---- .../nothing-personal/_sticky-note.scss | 36 +-- .../css/firefox/nothing-personal/_things.scss | 98 +++++++ .../css/firefox/nothing-personal/styles.scss | 146 +++++++--- ...nimate-pop-in.es6.js => animations.es6.js} | 44 +-- .../nothing-personal/random-answers.es6.js | 43 +++ media/static-bundles.json | 3 +- 12 files changed, 423 insertions(+), 506 deletions(-) create mode 100644 media/css/firefox/nothing-personal/_feature-box.scss create mode 100644 media/css/firefox/nothing-personal/_things.scss rename media/js/firefox/nothing-personal/{animate-pop-in.es6.js => animations.es6.js} (51%) create mode 100644 media/js/firefox/nothing-personal/random-answers.es6.js diff --git a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html index 45aa055cfe6..6a643805a92 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html @@ -10,7 +10,7 @@ heading=None, aria_label=None ) -%} -
+
{% if heading and aria_label %}

{{ heading }}

diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html index c11088f3b3c..31cceaefad4 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/index.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html @@ -27,6 +27,8 @@ {% set ios_url = 'https://apps.apple.com/us/app/firefox-private-safe-browser/id989804926?ppid=fb7ff70c-585e-4c32-bd90-f3abb0500d2a&ct=nothing-personal&mt=8' %} {% set android_url = 'https://play.google.com/store/apps/details?id=org.mozilla.firefox&listing=nothing_personal&referrer=utm_source%3Dwww.mozilla.org%26utm_medium%3Dreferral%26utm_campaign%3Dnothing-personal' %} +{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nothing-personal' %} + {% block content %}
@@ -46,79 +48,102 @@

Firefox by Mozilla

-
-
-
-
- {% call browser_border(class='c-browser-window-top-wrapper mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} -
-

We look forward to not getting to know you

+
+
+
+

Ok, we admit it: we’re fast, reliable and private.

+

We don’t need to watch everything you do online to get you where you need to go.

+ + + {% call browser_border(class='u-border-box mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading="What would Firefox do?") %} +

Things we’d rather do than go through your personal data

+
+
    +
  • Work out to elevator music
    • +
  • Have a pigeon as a roommate
    • +
  • Eat buffet oysters
    • +
  • Sit next to a crying infant on a plane
    • +
  • Reset password only to be told you can’t use your existing password
    • +
+
+
All the things!
 +
    +
  • Get into a passionate debate with a bot in the comments
    • +
  • Sit in a waiting room with no signal AND no gossip magazines
    • +
  • Bare feet → Lego bricks
    • +
  • Floss (not the dance... but also the dance)
    • +
  • Lose an earbud on a long walk
    • +
  • Peel wet asparagus
    • +
  • Go to a wedding alone where we don’t know anyone
    • +
  • Fold a fitted sheet :( :( :(
    • +
  • Clean up hairballs from someone else’s cat
    • +
  • Detangle headphone cables
    • +
  • Assemble a dresser without the instructions
    • +
  • Paint toenails while holding brush in our teeth
    • +
  • Look for the end of the tape roll
    • +
  • Explain what memes are to Uncle Gary
    • +
  • Try to track down where a weird smell is coming from... and fail
    • +
  • Leave phone at home 😱
    • +
+
+
+
+

+
+
+ +

(And keep clicking)

+
{% endcall %} - - {% call browser_border(class='c-browser-window-top-wrapper c-hidden-browser yellow mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} -
- -

We look forward to not getting to know you

+
+ +
+
+

The thing is, your privacy has always been our thing

+

Experience the internet the way you want — without the data tradeoffs.

- {% endcall %} - - {% call browser_border(class='c-browser-window-top-wrapper c-hidden-browser dark-yellow mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} -
- -

We look forward to not getting to know you

+
+ {% call browser_border() %} + placeholder +

Your privacy is respected by default

+

No need to dig through your privacy settings — with Firefox your personal data is private by default.

+ {% endcall %} + {% call browser_border() %} + placeholder +

Keep third-party trackers off your trail

+

We make it hard for cookies and trackers to follow you around, so they can’t get data about you they definitely don’t need.

+ {% endcall %}
- {% endcall %} - - {% call browser_border(class='c-browser-window-top-wrapper c-hidden-browser darker-yellow mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} -
- -

We look forward to not getting to know you

+
+ +
+
+

Here’s why people dump their other browsers for us

- {% endcall %} -
- - {% call browser_border(class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='Nothing Personal') %} -
-

You’re great — probably.

-

We just don’t need a lot of your data to be a fast, reliable browser that keeps up with the big guys.

+
+
+

We’re fast. Like, really fast.

+

With Firefox, there’s no waiting around. Web pages and videos load in a flash, and we’re getting faster every day.

- {% endcall %} - -
-
- {{ picture( - url='img/firefox/nothing-personal/thug-life.gif', - sources=[ - { - 'media': '(prefers-reduced-motion: reduce)', - 'srcset': { - 'img/firefox/nothing-personal/thug-life-img.jpg': '200w' - }, - 'sizes': { - 'default': '200px' - } - }, - { - 'media': '(prefers-reduced-motion: no-preference)', - 'srcset': { - 'img/firefox/nothing-personal/thug-life.gif': '200w' - }, - 'sizes': { - 'default': '200px' - } - } - ], - optional_attributes={ - 'height': '200', - 'loading': 'lazy', - 'width': '200' - } - ) }} +
+

You can count on us

+

We can handle all your tabs, streams, vision boards — whatever you need, we can hold it down.

+
+
+

Features with a following

+

Our actually-useful features are kind of a big deal. Fan favorites include popping out videos and a built-in PDF editor.

+
+
+

We make switching easy

+

Bring over your browsing history, bookmarks, extensions and logins with just a few clicks.

- -
+
+ +
+
- - +
+ {% endblock %} {% block js %} diff --git a/media/css/firefox/nothing-personal/_animations.scss b/media/css/firefox/nothing-personal/_animations.scss index a6b70ac0b18..b70aab7bc11 100644 --- a/media/css/firefox/nothing-personal/_animations.scss +++ b/media/css/firefox/nothing-personal/_animations.scss @@ -48,18 +48,6 @@ right: 0; } } - - @keyframes slide-in-mobile { - 0% { - left: 100%; - opacity: 0; - } - - 100% { - left: 0; - opacity: 1; - } - } } .animate-pop-in { @@ -69,8 +57,4 @@ .animate-slide-in { animation: 0.5s ease-out 0s 1 normal forwards running slide-in; } - - .animate-slide-in-mobile { - animation: 0.5s ease-out 0s 1 normal forwards running slide-in-mobile; - } } diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss index 6623945f840..deeaf5f9b8b 100644 --- a/media/css/firefox/nothing-personal/_browser.scss +++ b/media/css/firefox/nothing-personal/_browser.scss @@ -4,9 +4,9 @@ .c-browser { border-radius: $border-radius-md; - margin-bottom: $layout-lg; .c-browser-bar { + $heading-size: #{var(--title-3xs-size)}; background: url('/media/img/firefox/nothing-personal/browser-dots.svg') left $spacing-md center no-repeat, $browser-background $browser-cool-gradient; background-size: 60px 16px, auto; @@ -16,11 +16,12 @@ border-top-left-radius: $border-radius-lg; border-top-right-radius: $border-radius-lg; padding: $spacing-sm $spacing-md; + min-height: $heading-size; // reserve space for bars without text h3 { - @include font-size(18px); color: $browser-background; font-family: 'Fira Mono', 'Andale Mono', monospace; + font-size: $heading-size; font-weight: 500; margin-bottom: 0; padding-left: 80px; @@ -41,8 +42,10 @@ border-bottom-right-radius: $border-radius-lg; padding: $layout-sm; + h3, h4, h5 { + @include text-title-2xs; font-family: 'Fira Mono', 'Andale Mono', monospace; } @@ -50,38 +53,8 @@ margin-bottom: $layout-sm; } - h4, - h5, - p { - @include font-size(20px); - } - - h5 { - br { - display: none; - } - } - } - - @media #{$mq-md} { - .c-browser-bar.c-bar-with-heading h3 { - white-space: nowrap; - } - - .c-browser-content { - padding: $layout-xs $layout-md; - - h4, - h5, - p { - @include font-size(22px); - } - - h5 { - br { - display: block; - } - } + > *:last-child { + margin-bottom: 0; } } @@ -89,141 +62,3 @@ opacity: 0; } } - -.c-browser-window-top-wrapper { - position: relative; - z-index: 10; - - .c-browser-bar { - min-height: 16px; - background: $browser-background url('/media/img/firefox/nothing-personal/browser-dots.svg') left $spacing-md center no-repeat; - background-size: 60px 16px; - } - - .c-browser-window-top { - h2 { - line-height: 1; - margin: 0; - padding-right: $spacing-lg; - @include text-title-xl; - } - - &::after { - position: absolute; - content: ""; - background-image: url("/media/img/firefox/nothing-personal/heart-sticker.svg"); - background-repeat: no-repeat; - background-size: contain; - filter: drop-shadow(5px 4px 13px rgba(0, 0, 0, 0.2)); - height: 82px; - top: 10px; - right: 35px; - width: 90px; - } - } - - @media #{$mq-md} { - margin-bottom: $layout-lg; - - .c-browser-window-top { - &::after { - height: 95px; - bottom: 6px; - right: 205px; - top: auto; - width: 105px; - } - } - } -} - -// Layered background styles for first window -.c-browser-windows { - padding-top: $layout-lg; - - .c-layered-browser { - position: relative; - margin-bottom: $layout-lg; - - .c-browser { - &::before { - content: ""; - position: absolute; - width: 88%; - height: 99%; - background-color: $color-yellow-30; - border-radius: $border-radius-lg; - top: 15px; - right: 12px; - z-index: -1; - } - } - - @media #{$mq-md} { - margin-bottom: $layout-xl + $layout-xs; // extra room for the layered windows - .c-browser { - &::before { - content: none; - } - } - } - - .c-hidden-browser { - display: none; - - @media #{$mq-md} { - display: block; - - &.yellow { - position: absolute; - right: -20px; - top: 20px; - z-index: 5; - - .c-browser-bar, - .c-browser-content { - background-color: $color-yellow-10; - } - } - - &.dark-yellow { - position: absolute; - top: 40px; - right: -40px; - z-index: 3; - - .c-browser-bar, - .c-browser-content { - background-color: $color-yellow-30; - } - } - - &.darker-yellow { - position: absolute; - top: 60px; - right: -60px; - z-index: 2; - - .c-browser-bar, - .c-browser-content { - background-color: $color-yellow-40; - } - } - - .c-browser-window-top { - h2 { - visibility: hidden; - } - - &::after { - content: none; - } - } - } - } - } -} - -.sticky-window { - position: relative; -} diff --git a/media/css/firefox/nothing-personal/_feature-box.scss b/media/css/firefox/nothing-personal/_feature-box.scss new file mode 100644 index 00000000000..31b56cca581 --- /dev/null +++ b/media/css/firefox/nothing-personal/_feature-box.scss @@ -0,0 +1,20 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at https://mozilla.org/MPL/2.0/. + +.c-feature-box { + background-color: $browser-background; + border-radius: $border-radius-md; + padding: $layout-sm; // match browser components + + > *:last-child { + margin-bottom: 0; + } +} + +.c-feature-box-title { + align-items: center; + display: flex; + font-family: 'Fira Mono', 'Andale Mono', monospace; + gap: $spacing-sm; +} diff --git a/media/css/firefox/nothing-personal/_fox-gif.scss b/media/css/firefox/nothing-personal/_fox-gif.scss index bdb58313a9b..6b38acd8dc6 100644 --- a/media/css/firefox/nothing-personal/_fox-gif.scss +++ b/media/css/firefox/nothing-personal/_fox-gif.scss @@ -2,69 +2,21 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -.c-thug-life-gif-wrapper { - text-align: center; - padding-bottom: 0; - display: block; - margin-bottom: $layout-lg; - - @media #{$mq-lg} { - display: none; - } -} - +// TODO: check mobile/tablet expectations for this asset .c-thug-life-gif { - display: inline-block; - z-index: 10; - - .c-gif { - display: none; - } - - .c-image { - display: block; - } - - img { - border: 3px solid $color-black; - max-height: 200px; - display: block; - } - - &.c-attached-gif { - display: none; - } - - - - @media (prefers-reduced-motion: no-preference) { - .c-gif { - display: block; - } - - .c-image { - display: none; - } - - } + display: none; @media #{$mq-lg} { - &.c-attached-gif { - display: block; - position: absolute; - top: 350px; - left: -105px; - - img { - width: 180px; - height: 180px; - object-fit: cover; - } - - } + display: inline-block; + position: relative; + z-index: 10; - @media (prefers-reduced-motion: no-preference) { - opacity: 0; + img { + border: 3px solid $color-black; + display: block; + width: 180px; + height: 180px; + object-fit: cover; } &::before { diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss index 483dcef66ca..65b610b7cbb 100644 --- a/media/css/firefox/nothing-personal/_sticky-note.scss +++ b/media/css/firefox/nothing-personal/_sticky-note.scss @@ -8,27 +8,12 @@ background-size: contain; width: 200px; height: 220px; - margin: 0 auto; + margin: $spacing-xl auto 0; padding: $spacing-xl; transform: rotate(11deg); text-align: center; @include text-body-lg; - &.c-detached-sticky { - position: relative; - margin: 0 auto; - display: block; - opacity: 1; - - @media (prefers-reduced-motion: no-preference) { - opacity: 0; - } - } - - &.c-attached-sticky { - display: none; - } - p, span, a { @@ -42,25 +27,6 @@ span { font-weight: bold; } - - @media #{$mq-lg} { - &.c-detached-sticky { - display: none; - } - - &.c-attached-sticky { - display: block; - position: absolute; - bottom: -80px; - right: 0; - margin-right: -150px; - opacity: 1; - - @media (prefers-reduced-motion: no-preference) { - opacity: 0; - } - } - } } .c-sticky-note > .c-button-download-thanks { diff --git a/media/css/firefox/nothing-personal/_things.scss b/media/css/firefox/nothing-personal/_things.scss new file mode 100644 index 00000000000..6495e3c450f --- /dev/null +++ b/media/css/firefox/nothing-personal/_things.scss @@ -0,0 +1,98 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at https://mozilla.org/MPL/2.0/. + +.c-things { + @media screen and (max-width: #{$screen-md}) { + // no room on mobile for browser buttons and fox sticker + .c-browser-bar { + background: $browser-background $browser-cool-gradient; + } + } +} + +.c-things-list-container { + display: none; +} + +.c-things-list { + background-color: var(--background-color); + border: $border-black; + padding: $spacing-md; + + &.mzp-u-list-styled { + margin-left: 0; + padding-left: $spacing-xl; + } +} + +.c-things-output-container { + background-color: var(--background-color); + border: $border-black; + margin-bottom: $layout-sm; // match c-browser h4 margin + padding: $spacing-md; +} + +.c-things-output { + margin-bottom: 0; + text-wrap: pretty; +} + +// TODO: confirm hover, focus, active styling +.c-things-button { + $push-depth: 2px; + + @include text-title-xl; + background-color: $color-pink-10; + background-image: linear-gradient(to right,$color-pink-10, $color-pink-10, $color-pink-40, $color-pink-10, $color-pink-10); + background-size: 400% 100%; + border: $border-black; + box-shadow: $spacing-xs $spacing-xs var(--background-color-inverse); + padding: $spacing-sm $spacing-lg; + + @media (prefers-reduced-motion: reduce) { + &:hover, + &:focus-visible { + background-position: 200% 0; + } + } + + @media (prefers-reduced-motion: no-preference) { + transition: background-position 0.3s ease-out; + + &:hover, + &:focus-visible { + background-position: 100% 0; + } + } + + &:active { + transform: translate($push-depth, $push-depth); + box-shadow: $push-depth $push-depth var(--background-color-inverse); + } +} + +.c-things-note { + @include text-body-xs; +} + +// override the extra specificity margin from c-browser +p:has(.c-things-note) { + margin-bottom: 0; +} + +.c-things-button-container { + text-align: center; +} + +// use details instead of button +html.no-js { + .c-things-list-container { + display: block; + } + + .c-things-output-container, + .c-things-button-container { + display: none; + } +} diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss index 0bbb5fb412f..5ab41b9d816 100644 --- a/media/css/firefox/nothing-personal/styles.scss +++ b/media/css/firefox/nothing-personal/styles.scss @@ -15,6 +15,7 @@ $browser-cool-gradient: linear-gradient(to right,$color-blue-40, $color-violet-5 $border-black: 2px solid $color-black; $mq-tad-smaller-sm: 455px; +@import './feature-box'; @import './fonts'; @import './animations'; @import './header'; @@ -22,71 +23,111 @@ $mq-tad-smaller-sm: 455px; @import './browser'; @import './fox-gif'; @import './sticky-note'; +@import './things'; -.c-page-main-content { - background: $page-background 60% 10% / cover no-repeat url('/media/img/firefox/nothing-personal/grid-background.svg'); - font-family: 'Fira Mono', 'Andale Mono', monospace; - position: relative; +// TODO: font size audit, use mixins `text-[body|title]` - section { - display: flex; - flex-direction: column; - align-items: center; - overflow-x: hidden; - } +.u-border-box { + box-sizing: border-box; +} - aside { - display: none; - } +.u-text-uppercase { + text-transform: uppercase; +} + +.c-main { + font-family: 'Fira Mono', 'Andale Mono', monospace; + padding-top: $layout-lg; + padding-bottom: $layout-lg; + background: $page-background 60% 10% / cover no-repeat url('/media/img/firefox/nothing-personal/grid-background.svg'); @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) { background-attachment: fixed; } + > *:not(:last-child) { + margin-bottom: $layout-lg; + } +} + +.c-aside { + display: none; + @media #{$mq-lg} { - aside { + display: flex; + flex-direction: column; + position: absolute; + text-align: center; + top: 105px; + right: 0; + + a, .c-trash { + color: $color-white; display: flex; flex-direction: column; - position: absolute; - text-align: center; - top: 105px; - right: 0; + align-items: center; + margin-bottom: $spacing-2xl; + padding: $spacing-sm; + text-decoration: none; + cursor: default; + } - a, .c-trash { + a { + &:hover, + &:active, + &:focus { color: $color-white; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: $spacing-2xl; - padding: $spacing-sm; - text-decoration: none; - cursor: default; } - a { - &:hover, - &:active, - &:focus { - color: $color-white; - } - - &:active, - &:focus { - background-color: $color-blue-60; - } + &:active, + &:focus { + background-color: $color-blue-60; } } } @media #{$mq-xl} { - aside { - right: 140px; + right: 140px; + } +} + +.c-text-section { + margin-bottom: $spacing-md; + + * { + color: var(--body-text-color-inverse); + } +} + +.c-grid { + display: grid; + gap: $spacing-md; + + @media #{$mq-md} { + grid-template-columns: repeat(2, minmax(0, 1fr)); + + &.mzp-t-content-md { + max-width: $screen-md; } } } +.c-slide-in-container { + overflow: hidden; +} + +.c-newsletter-gif-container { + position: relative; +} + +// bit magic number-y :( +.c-thug-life-gif { + position: absolute; + left: -170px; + top: -50px; +} + .c-sign-off { - margin: $layout-lg 0; @include text-title-xs; .c-nothing-personal { @@ -98,6 +139,8 @@ $mq-tad-smaller-sm: 455px; background-size: contain; width: 300px; height: 36px; + margin-right: auto; + margin-left: auto; } .c-sign-off-wordmark { @@ -106,8 +149,6 @@ $mq-tad-smaller-sm: 455px; } @media #{$mq-md} { - margin-top: 0; - .c-nothing-personal p { width: 415px; height: 51px; @@ -115,10 +156,25 @@ $mq-tad-smaller-sm: 455px; } } +@media (prefers-reduced-motion: no-preference) { + [data-animation="pop-in"] { + opacity: 0; + } + + [data-animation="slide-in"] { + position: relative; + opacity: 0; + } +} + // Make sure content is visible of JS fails html.no-js { - .c-browser, - .c-sticky-note.c-detached-sticky { - opacity: 1 !important; /* stylelint-disable-line declaration-no-important */ + [data-animation="pop-in"] { + opacity: 1; + } + + [data-animation="slide-in"] { + position: static; + opacity: 1; } } diff --git a/media/js/firefox/nothing-personal/animate-pop-in.es6.js b/media/js/firefox/nothing-personal/animations.es6.js similarity index 51% rename from media/js/firefox/nothing-personal/animate-pop-in.es6.js rename to media/js/firefox/nothing-personal/animations.es6.js index bc37a6f4aee..8937e9ff588 100644 --- a/media/js/firefox/nothing-personal/animate-pop-in.es6.js +++ b/media/js/firefox/nothing-personal/animations.es6.js @@ -5,31 +5,19 @@ */ let observer; -let browser; -let attachedStickyNote; -let detachedStickyNote; -let stickyGif; function createObserver() { return new IntersectionObserver(function (entries) { let chain = Promise.resolve(); entries.forEach(function (entry) { if (entry.isIntersecting) { - if (entry.target.classList.contains('c-browser')) { + if (entry.target.dataset.animation === 'pop-in') { // chain promises with a 200ms delay in between each one chain = chain.then(() => popIn(entry.target)); // remove target observer after triggering animation observer.unobserve(entry.target); - } else if ( - entry.target.classList.contains('c-attached-sticky') - ) { + } else if (entry.target.dataset.animation === 'slide-in') { slideIn(entry.target); - } else if ( - entry.target.classList.contains('c-detached-sticky') - ) { - slideInMobile(entry.target); - } else if (entry.target.classList.contains('c-thug-life-gif')) { - popIn(entry.target); } } }); @@ -41,26 +29,19 @@ function init() { window.MzpSupports.intersectionObserver && window.Mozilla.Utils.allowsMotion() ) { - browser = document.querySelector('.c-browser'); - attachedStickyNote = document.querySelector('.c-attached-sticky'); - detachedStickyNote = document.querySelector('.c-detached-sticky'); - stickyGif = document.querySelector('.c-thug-life-gif'); observer = createObserver(); - document.querySelectorAll('.c-browser').forEach(function (element) { - observer.observe(element); - }); - document - .querySelectorAll('.c-thug-life-gif') + .querySelectorAll("[data-animation='pop-in']") .forEach(function (element) { observer.observe(element); }); - observer.observe(browser); - observer.observe(attachedStickyNote); - observer.observe(detachedStickyNote); - observer.observe(stickyGif); + document + .querySelectorAll("[data-animation='slide-in']") + .forEach(function (element) { + observer.observe(element); + }); } } @@ -82,13 +63,4 @@ function slideIn(element) { }); } -function slideInMobile(element) { - return new Promise((res) => { - setTimeout(() => { - element.classList.add('animate-slide-in-mobile'); - res(); - }, 800); - }); -} - init(); diff --git a/media/js/firefox/nothing-personal/random-answers.es6.js b/media/js/firefox/nothing-personal/random-answers.es6.js new file mode 100644 index 00000000000..3b1fae90276 --- /dev/null +++ b/media/js/firefox/nothing-personal/random-answers.es6.js @@ -0,0 +1,43 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +let randomizerButton; +let randomOutput; +let answers; +let mutableAnswers; + +function getRandomAnswer(answers) { + // set a mutable array we can work through, reset it when empty + if (mutableAnswers === undefined || mutableAnswers.length === 0) { + mutableAnswers = [...answers]; + } + const answerIndex = Math.floor(Math.random() * mutableAnswers.length); + // mutate array to remove answer so we can't repeat it, return answer + return mutableAnswers.splice(answerIndex, 1); +} + +function setRandomAnswer(container, answers) { + container.textContent = getRandomAnswer(answers); +} + +function init() { + randomizerButton = document.getElementById('randomizer-button'); + randomOutput = document.getElementById('random-output'); + + answers = Array.from(document.querySelectorAll('#things-list li')).map( + (li) => li.textContent + ); + + // set new answer on button click + randomizerButton.addEventListener('click', () => { + setRandomAnswer(randomOutput, answers); + }); + + // set initial random answer on load + setRandomAnswer(randomOutput, answers); +} + +init(); diff --git a/media/static-bundles.json b/media/static-bundles.json index 4efdc10e011..d5d340fdcc3 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -1775,7 +1775,8 @@ { "files": [ "js/firefox/nothing-personal/fx-is-default-init.es6.js", - "js/firefox/nothing-personal/animate-pop-in.es6.js" + "js/firefox/nothing-personal/animations.es6.js", + "js/firefox/nothing-personal/random-answers.es6.js" ], "name": "firefox-nothing-personal" },