зеркало из https://github.com/mozilla/bedrock.git
Родитель
1d1287e780
Коммит
88f6723a93
|
@ -107,8 +107,6 @@
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}{% endblock %}
|
|
||||||
|
|
||||||
{# Banner is last in HTML as it's low priority for search engines and uses `data-nosnippet` (issue #8739) #}
|
{# Banner is last in HTML as it's low priority for search engines and uses `data-nosnippet` (issue #8739) #}
|
||||||
{% block page_banner %}{% endblock %}
|
{% block page_banner %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,43 +0,0 @@
|
||||||
{#
|
|
||||||
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/.
|
|
||||||
#}
|
|
||||||
|
|
||||||
{% set promo_referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=sticky-promo' %}
|
|
||||||
{% if ftl_has_messages('firefox-sticky-promo-get-the-latest-firefox', 'firefox-sticky-promo-meet-our-family-of') %}
|
|
||||||
<aside class="mzp-c-sticky-promo mzp-t-product-firefox mzp-t-dark hide-from-legacy-ie {% if non_fx_only %} hide-from-fx-user{% endif %}">
|
|
||||||
<button class="mzp-c-sticky-promo-close" type="button">{{ ftl('ui-close') }}</button>
|
|
||||||
<div class="promo-firefox">
|
|
||||||
<h3 class="mzp-c-sticky-promo-title">{{ ftl('firefox-sticky-promo-get-the-latest-firefox') }}</h3>
|
|
||||||
{{ download_firefox_thanks(dom_id='sticky-promo', download_location='sticky-promo-box', button_class='mzp-c-button mzp-t-product mzp-t-small') }}
|
|
||||||
</div>
|
|
||||||
<div class="promo-products">
|
|
||||||
<h3 class="mzp-c-sticky-promo-title">{{ ftl('firefox-sticky-promo-meet-mozillas-family', fallback='firefox-sticky-promo-meet-our-family-of') }}</h3>
|
|
||||||
<ul class="promo-products-list">
|
|
||||||
<li>
|
|
||||||
<a data-link-text="Browsers" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" href="{{ url('firefox.browsers.index') }}">
|
|
||||||
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" width="32" height="32" alt="">
|
|
||||||
{{ ftl('firefox-sticky-promo-browsers') }}
|
|
||||||
</a>
|
|
||||||
<a data-link-text="Monitor" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" href="https://monitor.mozilla.org/{{ promo_referrals }}" rel="external noopener">
|
|
||||||
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" width="32" height="32" alt="">
|
|
||||||
{{ ftl('firefox-sticky-promo-monitor') }}
|
|
||||||
</a>
|
|
||||||
<a data-link-text="Pocket" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" rel="external noopener" href="https://getpocket.com/{{ promo_referrals }}">
|
|
||||||
<img loading="lazy" src="{{ static('protocol/img/logos/pocket/logo.svg') }}" width="32" height="29" alt="">
|
|
||||||
{{ ftl('firefox-sticky-promo-pocket') }}
|
|
||||||
</a>
|
|
||||||
<a data-link-text="Mozilla VPN" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" rel="external noopener" href="{{ url('products.vpn.landing') }}">
|
|
||||||
<img loading="lazy" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat-white.svg') }}" width="32" height="35" alt="">
|
|
||||||
{{ ftl('firefox-sticky-promo-mozilla-vpn') }}
|
|
||||||
</a>
|
|
||||||
<a data-link-text="Relay" data-link-type="link" data-link-position="sticky-promo" class="promo-products-link" rel="external noopener" href="https://relay.firefox.com/{{ promo_referrals }}">
|
|
||||||
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/relay/logo-white.svg') }}" width="32" height="32" alt="">
|
|
||||||
{{ ftl('firefox-sticky-promo-relay') }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
{% endif %}
|
|
|
@ -133,12 +133,4 @@
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
{% block js %}{% endblock %}
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -121,12 +121,4 @@
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
{% block js %}{% endblock %}
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -294,12 +294,6 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('firefox_compare_details') }}
|
{{ js_bundle('firefox_compare_details') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -286,12 +286,6 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('firefox_compare_details') }}
|
{{ js_bundle('firefox_compare_details') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -273,12 +273,6 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('firefox_compare_details') }}
|
{{ js_bundle('firefox_compare_details') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -381,12 +381,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
{% block js %}{% endblock %}
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -270,12 +270,6 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('firefox_compare_details') }}
|
{{ js_bundle('firefox_compare_details') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -278,12 +278,6 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('firefox_compare_details') }}
|
{{ js_bundle('firefox_compare_details') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -202,12 +202,4 @@
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
{% block js %}{% endblock %}
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -180,10 +180,6 @@
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('fxa_form') }}
|
{{ js_bundle('fxa_form') }}
|
||||||
{{ js_bundle('firefox-browsers-products') }}
|
{{ js_bundle('firefox-browsers-products') }}
|
||||||
|
|
|
@ -161,10 +161,6 @@
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('fxa_form') }}
|
{{ js_bundle('fxa_form') }}
|
||||||
{{ js_bundle('firefox-browsers-products') }}
|
{{ js_bundle('firefox-browsers-products') }}
|
||||||
|
|
|
@ -90,12 +90,4 @@
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
{% block js %}{% endblock %}
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -98,13 +98,3 @@
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
|
@ -231,10 +231,6 @@
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('fxa_product_button') }}
|
{{ js_bundle('fxa_product_button') }}
|
||||||
{{ js_bundle('firefox-master') }}
|
{{ js_bundle('firefox-master') }}
|
||||||
|
|
|
@ -655,10 +655,6 @@
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
{{ js_bundle('firefox_desktop_download') }}
|
{{ js_bundle('firefox_desktop_download') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -395,17 +395,6 @@
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sticky_promo %}
|
|
||||||
{% with non_fx_only=True %}
|
|
||||||
{% include '/includes/sticky-promo.html' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ js_bundle('sticky_promo') }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
|
|
||||||
{% block email_form %}{% endblock %}
|
{% block email_form %}{% endblock %}
|
||||||
|
|
||||||
{% macro note_entry(note) %}
|
{% macro note_entry(note) %}
|
||||||
|
|
|
@ -236,7 +236,6 @@ FLUENT_DEFAULT_FILES = [
|
||||||
"banners/firefox-app-store",
|
"banners/firefox-app-store",
|
||||||
"brands",
|
"brands",
|
||||||
"download_button",
|
"download_button",
|
||||||
"firefox/sticky-promo",
|
|
||||||
"footer",
|
"footer",
|
||||||
"fxa_form",
|
"fxa_form",
|
||||||
"mozorg/about/shared",
|
"mozorg/about/shared",
|
||||||
|
|
|
@ -376,7 +376,7 @@ link element.
|
||||||
`data-link-text` must be present to trigger the event:
|
`data-link-text` must be present to trigger the event:
|
||||||
|
|
||||||
- data-link-text (examples: “Monitor”, “Features”, “Instagram (mozilla)”, “Mozilla VPN”)
|
- data-link-text (examples: “Monitor”, “Features”, “Instagram (mozilla)”, “Mozilla VPN”)
|
||||||
- data-link-position (examples: topnav, subnav, sticky-promo, topnav - firefox, footer - company)
|
- data-link-position (examples: topnav, subnav, topnav - firefox, footer - company)
|
||||||
|
|
||||||
```
|
```
|
||||||
<a href="" data-link-text=""></a>
|
<a href="" data-link-text=""></a>
|
||||||
|
|
|
@ -1,21 +0,0 @@
|
||||||
# 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/.
|
|
||||||
|
|
||||||
### URL: https://www-dev.allizom.org/firefox/new
|
|
||||||
### Appears on /firefox/browsers, /firefox/new and /firefox/browsers
|
|
||||||
|
|
||||||
# Obsolete string
|
|
||||||
# Meet our family of products
|
|
||||||
firefox-sticky-promo-meet-our-family-of = Meet our family of products
|
|
||||||
|
|
||||||
firefox-sticky-promo-meet-mozillas-family = Meet { -brand-name-mozilla}’s family of products
|
|
||||||
firefox-sticky-promo-get-the-latest-firefox = Get the latest { -brand-name-firefox } browser.
|
|
||||||
|
|
||||||
# Products List
|
|
||||||
firefox-sticky-promo-browsers = Browsers
|
|
||||||
firefox-sticky-promo-monitor = { -brand-name-monitor }
|
|
||||||
firefox-sticky-promo-lockwise = { -brand-name-lockwise }
|
|
||||||
firefox-sticky-promo-pocket = { -brand-name-pocket }
|
|
||||||
firefox-sticky-promo-mozilla-vpn = { -brand-name-mozilla-vpn }
|
|
||||||
firefox-sticky-promo-relay = { -brand-name-relay }
|
|
|
@ -8,7 +8,6 @@ $brand-theme: 'firefox';
|
||||||
|
|
||||||
@import '../protocol/components/custom-menu-list';
|
@import '../protocol/components/custom-menu-list';
|
||||||
@import '../protocol/components/fxa-form';
|
@import '../protocol/components/fxa-form';
|
||||||
@import './sticky-promo';
|
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
|
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/zap';
|
@import '~@mozilla-protocol/core/protocol/css/components/zap';
|
||||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||||
|
|
|
@ -15,7 +15,6 @@ $brand-theme: 'firefox';
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-relay';
|
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-relay';
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/zap';
|
@import '~@mozilla-protocol/core/protocol/css/components/zap';
|
||||||
@import '../../protocol/components/custom-menu-list';
|
@import '../../protocol/components/custom-menu-list';
|
||||||
@import '../sticky-promo';
|
|
||||||
|
|
||||||
// conditional content
|
// conditional content
|
||||||
.js-fx-only {
|
.js-fx-only {
|
||||||
|
|
|
@ -14,7 +14,6 @@ $image-path: '/media/protocol/img';
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
|
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/zap';
|
@import '~@mozilla-protocol/core/protocol/css/components/zap';
|
||||||
@import '../../../protocol/components/sub-navigation';
|
@import '../../../protocol/components/sub-navigation';
|
||||||
@import '../../sticky-promo';
|
|
||||||
|
|
||||||
// --------------------------------------------------------------------------
|
// --------------------------------------------------------------------------
|
||||||
// Protocol over-rides
|
// Protocol over-rides
|
||||||
|
|
|
@ -1,79 +0,0 @@
|
||||||
// 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/.
|
|
||||||
|
|
||||||
$brand-theme: 'firefox';
|
|
||||||
$font-path: '/media/protocol/fonts';
|
|
||||||
$image-path: '/media/protocol/img';
|
|
||||||
|
|
||||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
|
||||||
@import '~@mozilla-protocol/core/protocol/css/components/sticky-promo';
|
|
||||||
|
|
||||||
// Hide promo by default for mobile devices (<$mq-md)
|
|
||||||
.mzp-c-sticky-promo {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show non-Fx users a promo to download Fx
|
|
||||||
.promo-firefox {
|
|
||||||
.is-firefox & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show Fx users a promo to try other products
|
|
||||||
.promo-products {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
.is-firefox & {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.mzp-c-sticky-promo-title {
|
|
||||||
background: none;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mzp-c-sticky-promo .mzp-c-button-download-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// * -------------------------------------------------------------------------- */
|
|
||||||
// Promo Products List Styles
|
|
||||||
|
|
||||||
.promo-products-list {
|
|
||||||
@include white-links;
|
|
||||||
align-items: center;
|
|
||||||
border-top: $border-radius-xs solid rgba(255, 255, 255, 0.5);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
list-style: none;
|
|
||||||
margin: $spacing-xl 0 0;
|
|
||||||
padding-top: $spacing-xl;
|
|
||||||
|
|
||||||
.promo-products-link {
|
|
||||||
align-items: center;
|
|
||||||
color: $color-white;
|
|
||||||
display: flex;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: $spacing-md;
|
|
||||||
text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
margin-inline-end: $spacing-md;
|
|
||||||
width: $spacing-xl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$mq-md} {
|
|
||||||
.mzp-c-sticky-promo.mzp-a-slide-in,
|
|
||||||
.mzp-c-sticky-promo.is-displayed {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,141 +0,0 @@
|
||||||
/*
|
|
||||||
* 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/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import MzpStickyPromo from '@mozilla-protocol/core/protocol/js/sticky-promo';
|
|
||||||
|
|
||||||
// https://davidwalsh.name/javascript-debounce-function
|
|
||||||
function debounce(func, wait, immediate) {
|
|
||||||
let timeout;
|
|
||||||
return function () {
|
|
||||||
const context = this;
|
|
||||||
const args = arguments;
|
|
||||||
const later = () => {
|
|
||||||
timeout = null;
|
|
||||||
if (!immediate) {
|
|
||||||
func.apply(context, args);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const callNow = immediate && !timeout;
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = setTimeout(later, wait);
|
|
||||||
if (callNow) {
|
|
||||||
func.apply(context, args);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function isInViewport(element) {
|
|
||||||
// Calculate on each scroll if the footer is in the view port.
|
|
||||||
const elementTop = element.offsetTop;
|
|
||||||
const elementBottom = elementTop + element.offsetHeight;
|
|
||||||
const viewportTop = window.scrollY || window.pageYOffset;
|
|
||||||
const viewportBottom = viewportTop + window.screen.height;
|
|
||||||
|
|
||||||
return elementBottom > viewportTop && elementTop < viewportBottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onLoad() {
|
|
||||||
// Check if promo exists on the page, or if smaller than tablet, or if user prefers reduced motion.
|
|
||||||
const matchMediaNoMotion = window.matchMedia(
|
|
||||||
'(prefers-reduced-motion: reduce)'
|
|
||||||
).matches;
|
|
||||||
const matchMediaDesktop = window.matchMedia('(min-width: 768px)').matches;
|
|
||||||
const promo = document.querySelector('.mzp-c-sticky-promo');
|
|
||||||
|
|
||||||
if (!promo || !matchMediaDesktop || matchMediaNoMotion) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the user is on Firefox and is NOT supposed to see sticky promo.
|
|
||||||
const fxUser = document.documentElement.classList.contains('is-firefox');
|
|
||||||
const hideFromFxUser = promo.classList.contains('hide-from-fx-user');
|
|
||||||
|
|
||||||
if (fxUser && hideFromFxUser) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StickyPromo = {};
|
|
||||||
const STICKY_PROMO_COOKIE_ID = 'firefox-sticky-promo';
|
|
||||||
|
|
||||||
StickyPromo.bindEvents = function () {
|
|
||||||
promo.addEventListener(
|
|
||||||
'animationend',
|
|
||||||
function () {
|
|
||||||
promo.classList.add('is-displayed');
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
StickyPromo.hasCookie = function () {
|
|
||||||
return Mozilla.Cookies.hasItem(STICKY_PROMO_COOKIE_ID);
|
|
||||||
};
|
|
||||||
|
|
||||||
StickyPromo.setCookie = function () {
|
|
||||||
const date = new Date();
|
|
||||||
const cookieDuration = 1 * 24 * 60 * 60 * 1000; // 1 day expiration
|
|
||||||
date.setTime(date.getTime() + cookieDuration); // 1 day expiration
|
|
||||||
Mozilla.Cookies.setItem(
|
|
||||||
STICKY_PROMO_COOKIE_ID,
|
|
||||||
true,
|
|
||||||
date.toUTCString(),
|
|
||||||
'/',
|
|
||||||
undefined,
|
|
||||||
false,
|
|
||||||
'lax'
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
StickyPromo.show = function () {
|
|
||||||
function openOnScroll() {
|
|
||||||
// Open promo
|
|
||||||
MzpStickyPromo.open();
|
|
||||||
document.removeEventListener('scroll', openOnScroll, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('scroll', openOnScroll, false);
|
|
||||||
|
|
||||||
const checkForFooterOnScroll = debounce(function () {
|
|
||||||
// If the footer is in the viewport, fade out the promo.
|
|
||||||
// Animate it back in when the footer leaves the viewport
|
|
||||||
// if the user did not dismiss it.
|
|
||||||
if (isInViewport(footer)) {
|
|
||||||
promo.classList.remove('mzp-a-slide-in');
|
|
||||||
promo.classList.add('mzp-a-fade-out');
|
|
||||||
} else if (!promo.classList.contains('user-dismiss')) {
|
|
||||||
promo.classList.remove('mzp-a-fade-out');
|
|
||||||
promo.classList.add('mzp-a-slide-in');
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
// Add modifier class to the footer to make sure the language selection drop-down is not obscured by the sticky promo
|
|
||||||
const footer = document.querySelector('.mzp-c-footer');
|
|
||||||
if (footer) {
|
|
||||||
document.addEventListener('scroll', checkForFooterOnScroll, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set Close Button event
|
|
||||||
const stickyBtnClose = document.querySelector(
|
|
||||||
'.mzp-c-sticky-promo-close'
|
|
||||||
);
|
|
||||||
|
|
||||||
stickyBtnClose.addEventListener('click', function () {
|
|
||||||
StickyPromo.setCookie(STICKY_PROMO_COOKIE_ID);
|
|
||||||
promo.classList.add('user-dismiss');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Check on page load
|
|
||||||
const cookiesEnabled =
|
|
||||||
typeof Mozilla.Cookies !== 'undefined' && Mozilla.Cookies.enabled();
|
|
||||||
|
|
||||||
if (cookiesEnabled && !StickyPromo.hasCookie()) {
|
|
||||||
StickyPromo.bindEvents();
|
|
||||||
StickyPromo.show();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.Mozilla.run(onLoad);
|
|
|
@ -96,12 +96,6 @@
|
||||||
],
|
],
|
||||||
"name": "firefox_developer_whatsnew_mdnplus"
|
"name": "firefox_developer_whatsnew_mdnplus"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"files": [
|
|
||||||
"css/firefox/sticky-promo.scss"
|
|
||||||
],
|
|
||||||
"name": "sticky_promo"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/new/basic/download.scss"
|
"css/firefox/new/basic/download.scss"
|
||||||
|
@ -653,7 +647,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/releasenotes.scss"
|
"css/firefox/releasenotes.scss"
|
||||||
],
|
],
|
||||||
"name": "firefox_releasenotes"
|
"name": "firefox_releasenotes"
|
||||||
|
@ -759,7 +752,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/browsers/what-is-a-browser.scss"
|
"css/firefox/browsers/what-is-a-browser.scss"
|
||||||
],
|
],
|
||||||
"name": "what-is-a-browser"
|
"name": "what-is-a-browser"
|
||||||
|
@ -778,14 +770,12 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/browsers/incognito-browser.scss"
|
"css/firefox/browsers/incognito-browser.scss"
|
||||||
],
|
],
|
||||||
"name": "incognito-browser"
|
"name": "incognito-browser"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/browsers/browser-history.scss"
|
"css/firefox/browsers/browser-history.scss"
|
||||||
],
|
],
|
||||||
"name": "browser-history"
|
"name": "browser-history"
|
||||||
|
@ -810,7 +800,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/browsers/best-browser.scss"
|
"css/firefox/browsers/best-browser.scss"
|
||||||
],
|
],
|
||||||
"name": "best-browser"
|
"name": "best-browser"
|
||||||
|
@ -818,14 +807,12 @@
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/protocol/components/send-to-device.scss",
|
"css/protocol/components/send-to-device.scss",
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/compare/compare.scss"
|
"css/firefox/compare/compare.scss"
|
||||||
],
|
],
|
||||||
"name": "compare"
|
"name": "compare"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/compare/compare.scss",
|
"css/firefox/compare/compare.scss",
|
||||||
"css/firefox/compare/compare-details.scss"
|
"css/firefox/compare/compare-details.scss"
|
||||||
],
|
],
|
||||||
|
@ -942,7 +929,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"css/firefox/sticky-promo.scss",
|
|
||||||
"css/firefox/browsers/quantum.scss"
|
"css/firefox/browsers/quantum.scss"
|
||||||
],
|
],
|
||||||
"name": "quantum"
|
"name": "quantum"
|
||||||
|
@ -1389,7 +1375,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"js/firefox/sticky-promo.es6.js",
|
|
||||||
"js/firefox/new/desktop/download.js"
|
"js/firefox/new/desktop/download.js"
|
||||||
],
|
],
|
||||||
"name": "firefox_desktop_download"
|
"name": "firefox_desktop_download"
|
||||||
|
@ -1408,12 +1393,6 @@
|
||||||
],
|
],
|
||||||
"name": "firefox_new_thanks_direct"
|
"name": "firefox_new_thanks_direct"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"files": [
|
|
||||||
"js/firefox/sticky-promo.es6.js"
|
|
||||||
],
|
|
||||||
"name": "sticky_promo"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"js/base/stub-attribution.js",
|
"js/base/stub-attribution.js",
|
||||||
|
@ -1497,7 +1476,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"js/firefox/sticky-promo.es6.js",
|
|
||||||
"js/firefox/home/master.js"
|
"js/firefox/home/master.js"
|
||||||
],
|
],
|
||||||
"name": "firefox-master"
|
"name": "firefox-master"
|
||||||
|
@ -1513,7 +1491,6 @@
|
||||||
"files": [
|
"files": [
|
||||||
"js/base/mozilla-fxa.js",
|
"js/base/mozilla-fxa.js",
|
||||||
"js/base/mozilla-fxa-init.js",
|
"js/base/mozilla-fxa-init.js",
|
||||||
"js/firefox/sticky-promo.es6.js",
|
|
||||||
"js/firefox/browsers-products.js"
|
"js/firefox/browsers-products.js"
|
||||||
],
|
],
|
||||||
"name": "firefox-browsers-products"
|
"name": "firefox-browsers-products"
|
||||||
|
@ -1831,7 +1808,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"js/firefox/sticky-promo.es6.js",
|
|
||||||
"js/firefox/compare-details.js"
|
"js/firefox/compare-details.js"
|
||||||
],
|
],
|
||||||
"name": "firefox_compare_details"
|
"name": "firefox_compare_details"
|
||||||
|
|
|
@ -1,16 +0,0 @@
|
||||||
# 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/.
|
|
||||||
|
|
||||||
import pytest
|
|
||||||
|
|
||||||
from pages.firefox.new.sticky_promo import StickyPromoPage
|
|
||||||
|
|
||||||
|
|
||||||
@pytest.mark.nondestructive
|
|
||||||
def test_sticky_promo(base_url, selenium):
|
|
||||||
page = StickyPromoPage(selenium, base_url).open()
|
|
||||||
page.init_promo()
|
|
||||||
assert page.promo.is_displayed
|
|
||||||
page.promo.close()
|
|
||||||
assert not page.promo.is_displayed
|
|
|
@ -13,12 +13,3 @@ def test_download_menu_list_displays(base_url, selenium):
|
||||||
page = FirefoxHomePage(selenium, base_url).open()
|
page = FirefoxHomePage(selenium, base_url).open()
|
||||||
page.browser_menu_list.click()
|
page.browser_menu_list.click()
|
||||||
assert page.browser_menu_list.list_is_open
|
assert page.browser_menu_list.list_is_open
|
||||||
|
|
||||||
|
|
||||||
@pytest.mark.nondestructive
|
|
||||||
def test_sticky_promo(base_url, selenium):
|
|
||||||
page = FirefoxHomePage(selenium, base_url).open()
|
|
||||||
page.init_promo()
|
|
||||||
assert page.promo.is_displayed
|
|
||||||
page.promo.close()
|
|
||||||
assert not page.promo.is_displayed
|
|
||||||
|
|
|
@ -6,7 +6,6 @@ from selenium.webdriver.common.by import By
|
||||||
|
|
||||||
from pages.base import BasePage
|
from pages.base import BasePage
|
||||||
from pages.regions.menu_list import MenuList
|
from pages.regions.menu_list import MenuList
|
||||||
from pages.regions.sticky_promo import StickyPromo
|
|
||||||
|
|
||||||
|
|
||||||
class FirefoxHomePage(BasePage):
|
class FirefoxHomePage(BasePage):
|
||||||
|
@ -15,15 +14,9 @@ class FirefoxHomePage(BasePage):
|
||||||
# browser download menu list
|
# browser download menu list
|
||||||
_browser_menu_list_locator = (By.ID, "test-menu-browsers-wrapper")
|
_browser_menu_list_locator = (By.ID, "test-menu-browsers-wrapper")
|
||||||
|
|
||||||
# facebook container extention link visiability
|
# facebook container extension link visibility
|
||||||
_facebook_container_link_locator = (By.ID, "test-fbc")
|
_facebook_container_link_locator = (By.ID, "test-fbc")
|
||||||
|
|
||||||
# floating/sticky box - download link
|
|
||||||
_sticky_promo_modal_content_locator = (By.CSS_SELECTOR, ".mzp-c-sticky-promo")
|
|
||||||
|
|
||||||
# Used as a scroll target to move down the page, to trigger the sticky promo element
|
|
||||||
_page_promise_content_locator = (By.CSS_SELECTOR, ".t-promise")
|
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def fb_container_is_displayed(self):
|
def fb_container_is_displayed(self):
|
||||||
return self.is_element_displayed(*self._facebook_container_link_locator)
|
return self.is_element_displayed(*self._facebook_container_link_locator)
|
||||||
|
@ -32,18 +25,3 @@ class FirefoxHomePage(BasePage):
|
||||||
def browser_menu_list(self):
|
def browser_menu_list(self):
|
||||||
el = self.find_element(*self._browser_menu_list_locator)
|
el = self.find_element(*self._browser_menu_list_locator)
|
||||||
return MenuList(self, root=el)
|
return MenuList(self, root=el)
|
||||||
|
|
||||||
def init_promo(self):
|
|
||||||
assert not self.is_promo_displayed, "Promo detail is not displayed"
|
|
||||||
# scroll down page to trigger promo to display
|
|
||||||
self.scroll_element_into_view(*self._page_promise_content_locator)
|
|
||||||
promo = self.find_element(*self._sticky_promo_modal_content_locator)
|
|
||||||
self.wait.until(lambda s: "is-displayed" in promo.get_attribute("class"))
|
|
||||||
|
|
||||||
@property
|
|
||||||
def is_promo_displayed(self):
|
|
||||||
return self.is_element_displayed(*self._sticky_promo_modal_content_locator)
|
|
||||||
|
|
||||||
@property
|
|
||||||
def promo(self):
|
|
||||||
return StickyPromo(self)
|
|
||||||
|
|
|
@ -1,31 +0,0 @@
|
||||||
# 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/.
|
|
||||||
|
|
||||||
from selenium.webdriver.common.by import By
|
|
||||||
|
|
||||||
from pages.base import BasePage
|
|
||||||
from pages.regions.sticky_promo import StickyPromo
|
|
||||||
|
|
||||||
|
|
||||||
class StickyPromoPage(BasePage):
|
|
||||||
URL_TEMPLATE = "/{locale}/firefox/new/"
|
|
||||||
|
|
||||||
# Used as a scroll target to move down the page, to trigger the sticky promo element
|
|
||||||
_page_highlights_content_locator = (By.CSS_SELECTOR, ".t-highlights")
|
|
||||||
_sticky_promo_modal_content_locator = (By.CSS_SELECTOR, ".mzp-c-sticky-promo")
|
|
||||||
|
|
||||||
def init_promo(self):
|
|
||||||
assert not self.is_promo_displayed, "Promo detail is not displayed"
|
|
||||||
# scroll down page to trigger promo to display
|
|
||||||
self.scroll_element_into_view(*self._page_highlights_content_locator)
|
|
||||||
promo = self.find_element(*self._sticky_promo_modal_content_locator)
|
|
||||||
self.wait.until(lambda s: "is-displayed" in promo.get_attribute("class"))
|
|
||||||
|
|
||||||
@property
|
|
||||||
def is_promo_displayed(self):
|
|
||||||
return self.is_element_displayed(*self._sticky_promo_modal_content_locator)
|
|
||||||
|
|
||||||
@property
|
|
||||||
def promo(self):
|
|
||||||
return StickyPromo(self)
|
|
|
@ -1,23 +0,0 @@
|
||||||
# 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/.
|
|
||||||
|
|
||||||
from selenium.webdriver.common.by import By
|
|
||||||
|
|
||||||
from pages.base import BaseRegion
|
|
||||||
|
|
||||||
|
|
||||||
class StickyPromo(BaseRegion):
|
|
||||||
_root_locator = (By.CLASS_NAME, "mzp-c-sticky-promo")
|
|
||||||
_close_locator = (By.CLASS_NAME, "mzp-c-sticky-promo-close")
|
|
||||||
|
|
||||||
def close(self):
|
|
||||||
self.find_element(*self._close_locator).click()
|
|
||||||
self.wait.until(lambda s: not self.is_displayed)
|
|
||||||
|
|
||||||
@property
|
|
||||||
def is_displayed(self):
|
|
||||||
return self.page.is_element_displayed(*self._root_locator)
|
|
||||||
|
|
||||||
def displays(self, selector):
|
|
||||||
return self.is_element_displayed(*selector)
|
|
Загрузка…
Ссылка в новой задаче