зеркало из https://github.com/mozilla/bedrock.git
Craig Cook
GitHub
Родитель
0a7658827d
Коммит
712a49ede3
|
|
@ -90,6 +90,8 @@
|
|||
data-global-fx-out-of-date-banner-confirm="{{ _('Update Firefox') }}"
|
||||
{% block string_data %}{% endblock %}></div>
|
||||
|
||||
{% block page_banner %}{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
{% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
{# 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 http://mozilla.org/MPL/2.0/. -#}
|
||||
|
||||
<aside class="c-banner hide-from-legacy-ie {% if class_name %}{{ class_name }}{% endif %}" id="page-banner">
|
||||
<button type="button" class="c-banner-close" id="page-banner-close"><span>{{ _('Close') }}</span></button>
|
||||
<div class="mzp-l-content">
|
||||
<h2 class="c-banner-title">
|
||||
{% block banner_title %}{% endblock %}
|
||||
</h2>
|
||||
<div class="c-banner-content">
|
||||
{% block banner_content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
{# 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 http://mozilla.org/MPL/2.0/. -#}
|
||||
|
||||
{% extends 'includes/banners/base.html' %}
|
||||
|
||||
{% block banner_title %}
|
||||
<span>{{ _('We all love the web. Join Mozilla in defending it.') }}</span>
|
||||
{% endblock %}
|
||||
|
||||
{% block banner_content %}
|
||||
<p>
|
||||
{% trans %}
|
||||
Big corporations try to restrict how we access the web. Misinformation
|
||||
makes it harder for us to find the truth. Web-connected devices go to
|
||||
market without basic security standards. The non-profit Mozilla Foundation
|
||||
fights for a healthier internet. <strong>Will you donate today?</strong>
|
||||
{% endtrans %}
|
||||
</p>
|
||||
|
||||
<form id="fundraiser-form" class="c-fundraiser-form" method="get" action="https://donate.mozilla.org/{{ LANG }}/">
|
||||
<fieldset class="c-fundraiser-recurring">
|
||||
<label for="monthly">
|
||||
<input type="radio" value="monthly" id="monthly" name="frequency"> {{ _('Monthly') }}
|
||||
</label>
|
||||
|
||||
<label for="onetime">
|
||||
<input type="radio" value="single" id="onetime" name="frequency" checked> {{ _('One-time') }}
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="c-fundraiser-options">
|
||||
{% for amount in donate_params.preset_list %}
|
||||
<label for="donate{{ amount }}"{% if amount == donate_params.default %} class="selected"{% endif %}>
|
||||
<input class="c-fundraiser-amount-input" type="radio" value="{{ amount }}" id="donate{{ amount }}" name="amount"{% if amount == donate_params.default %} checked="checked"{% endif %}>
|
||||
{# L10n: Inserts a sum in US dollars, e.g. '$100'. Adapt the string in your translation for your locale conventions if needed, ex: %(sum)s US$ #}
|
||||
<span class="mzp-c-button mzp-t-secondary mzp-t-dark">{{ _('$%(sum)s')|format(sum=amount) }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="mzp-c-button mzp-t-dark">{{ _('Donate') }}</button>
|
||||
|
||||
<input type="hidden" name="currency" value="{{ donate_params.currency }}">
|
||||
<input type="hidden" name="presets" value="{{ donate_params.presets }}">
|
||||
|
||||
{# GA params #}
|
||||
<input type="hidden" name="ref" value="sept2019banner">
|
||||
<input type="hidden" name="utm_campaign" value="sept2019banner">
|
||||
<input type="hidden" name="utm_source" value="mozilla.org">
|
||||
<input type="hidden" name="utm_medium" value="referral">
|
||||
<input type="hidden" name="utm_content" value="banner">
|
||||
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
@ -39,13 +39,16 @@
|
|||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('home-2018') }}
|
||||
|
||||
{% if switch('fundraising-banner') %}
|
||||
{{ css_bundle('fundraising-banner') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
{% if switch('home-fundraising-sept2019') %}
|
||||
{% include 'mozorg/home/includes/fundraiser.html' %}
|
||||
{% block page_banner %}
|
||||
{% if switch('fundraising-banner') %}
|
||||
{% include 'includes/banners/fundraiser.html' %}
|
||||
{% endif %}
|
||||
{% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -206,8 +209,9 @@
|
|||
|
||||
{% block js %}
|
||||
{{ js_bundle('home') }}
|
||||
{% if switch('home-fundraising-sept2019') %}
|
||||
{{ js_bundle('home-fundraiser') }}
|
||||
|
||||
{% if switch('fundraising-banner') %}
|
||||
{{ js_bundle('fundraising-banner') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,17 @@ accessible to all.') }}
|
|||
{% endblock %}
|
||||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('home') }}
|
||||
{{ css_bundle('home') }}
|
||||
|
||||
{% if switch('fundraising-banner') %}
|
||||
{{ css_bundle('fundraising-banner') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_banner %}
|
||||
{% if switch('fundraising-banner') %}
|
||||
{% include 'includes/banners/fundraiser.html' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -196,7 +206,11 @@ accessible to all.') }}
|
|||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js_bundle('newsletter') }}
|
||||
{{ js_bundle('newsletter') }}
|
||||
|
||||
{% if switch('fundraising-banner') %}
|
||||
{{ js_bundle('fundraising-banner') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block structured_data %}
|
||||
|
|
|
|||
|
|
@ -1,58 +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 http://mozilla.org/MPL/2.0/. -#}
|
||||
|
||||
<aside class="c-fundraiser hide-from-legacy-ie" id="fundraiser">
|
||||
<button type="button" class="c-fundraiser-close" id="fundraiser-close"><span>{{ _('Close') }}</span></button>
|
||||
<div class="content mzp-l-content">
|
||||
<h2 class="c-fundraiser-title">
|
||||
<span>{{ _('We all love the web. Join Mozilla in defending it.') }}</span>
|
||||
</h2>
|
||||
|
||||
<div class="c-fundraiser-content">
|
||||
<p>
|
||||
{% trans %}
|
||||
Big corporations try to restrict how we access the web. Misinformation
|
||||
makes it harder for us to find the truth. Web-connected devices go to
|
||||
market without basic security standards. The non-profit Mozilla Foundation
|
||||
fights for a healthier internet. <strong>Will you donate today?</strong>
|
||||
{% endtrans %}
|
||||
</p>
|
||||
|
||||
<form id="fundraiser-form" class="c-fundraiser-form" method="get" action="https://donate.mozilla.org/{{ LANG }}/">
|
||||
<fieldset class="c-fundraiser-recurring">
|
||||
<label for="monthly">
|
||||
<input type="radio" value="monthly" id="monthly" name="frequency"> {{ _('Monthly') }}
|
||||
</label>
|
||||
|
||||
<label for="onetime">
|
||||
<input type="radio" value="single" id="onetime" name="frequency" checked> {{ _('One-time') }}
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="c-fundraiser-options">
|
||||
{% for amount in donate_params.preset_list %}
|
||||
<label for="donate{{ amount }}"{% if amount == donate_params.default %} class="selected"{% endif %}>
|
||||
<input class="c-fundraiser-amount-input" type="radio" value="{{ amount }}" id="donate{{ amount }}" name="amount"{% if amount == donate_params.default %} checked="checked"{% endif %}>
|
||||
{# L10n: Inserts a sum in US dollars, e.g. '$100'. Adapt the string in your translation for your locale conventions if needed, ex: %(sum)s US$ #}
|
||||
<span class="mzp-c-button mzp-t-secondary mzp-t-dark">{{ _('$%(sum)s')|format(sum=amount) }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="mzp-c-button mzp-t-dark">{{ _('Donate') }}</button>
|
||||
|
||||
<input type="hidden" name="currency" value="{{ donate_params.currency }}">
|
||||
<input type="hidden" name="presets" value="{{ donate_params.presets }}">
|
||||
|
||||
{# GA params #}
|
||||
<input type="hidden" name="ref" value="sept2019banner">
|
||||
<input type="hidden" name="utm_campaign" value="sept2019banner">
|
||||
<input type="hidden" name="utm_source" value="mozilla.org">
|
||||
<input type="hidden" name="utm_medium" value="referral">
|
||||
<input type="hidden" name="utm_content" value="banner">
|
||||
|
||||
</form>
|
||||
</div>{#--/#fundraiser-content--#}
|
||||
</div>{#--/.content--#}
|
||||
</aside>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
.. 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 http://mozilla.org/MPL/2.0/.
|
||||
|
||||
.. _banners:
|
||||
|
||||
=======
|
||||
Banners
|
||||
=======
|
||||
|
||||
Creating page banners
|
||||
---------------------
|
||||
|
||||
Any page on bedrock can incorporate a top of page banner as a temporary
|
||||
feature. An example of such a banner is the MOFO fundraising form that gets
|
||||
shown on the home page several times a year.
|
||||
|
||||
Banners can be inserted into any page template by using the ``page_banner``
|
||||
block. Banners can also be toggled on and off using a switch:
|
||||
|
||||
.. code-block:: jinja
|
||||
|
||||
{% block page_banner %}
|
||||
{% if switch('fundraising-banner') %}
|
||||
{% include 'includes/banners/fundraiser.html' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Banner templates should extend the *base banner template*, and content can
|
||||
then be inserted using ``banner_title`` and ``banner_content`` blocks:
|
||||
|
||||
.. code-block:: jinja
|
||||
|
||||
{% extends 'includes/banners/base.html' %}
|
||||
|
||||
{% block banner_title %}We all love the web. Join Mozilla in defending it.{% endblock %}
|
||||
|
||||
{% block banner_content %}
|
||||
<!-- insert custom HTML here -->
|
||||
{% endblock %}
|
||||
|
||||
CSS styles for banners should be located in ``media/css/base/banners/``, and
|
||||
should extend common base banner styles:
|
||||
|
||||
.. code-block:: css
|
||||
|
||||
@import 'includes/base';
|
||||
|
||||
To initiate a banner on a page, include ``media/js/base/mozilla-banner.js`` in
|
||||
your page bundle and then initiate the banner using a unique ID. The ID will
|
||||
be used as a cookie identifier should someone dismiss a banner and not wish to
|
||||
see it again.
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function onLoad() {
|
||||
window.Mozilla.Banner.init('fundraiser-sept2019');
|
||||
}
|
||||
|
||||
window.Mozilla.run(onLoad);
|
||||
|
||||
})();
|
||||
|
||||
L10n for page banners
|
||||
~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Becuase banners can technically be shown on any page, they need to be broadly
|
||||
translated, or alternatively limited to the subset of locales that have
|
||||
translations. Each banner should have its own ``.lang`` or ``.ftl`` associated
|
||||
with it, and accessible to the template or view it gets used in.
|
||||
|
||||
Fundraising banner
|
||||
------------------
|
||||
|
||||
The fundraising banner typically gets shown on the home page, but
|
||||
technically can be shown on any page in bedrock. The donation
|
||||
parameters that get passed to the form require some extra context
|
||||
data that needs to get passed to the template via the view in order
|
||||
to work. For example:
|
||||
|
||||
.. code-block:: python
|
||||
|
||||
def home_view(request):
|
||||
locale = l10n_utils.get_locale(request)
|
||||
donate_params = settings.DONATE_PARAMS.get(
|
||||
locale, settings.DONATE_PARAMS['en-US'])
|
||||
|
||||
# presets are stored as a string but, for the home banner
|
||||
# we need it as a list.
|
||||
donate_params['preset_list'] = donate_params['presets'].split(',')
|
||||
|
||||
ctx = {
|
||||
'donate_params': donate_params
|
||||
}
|
||||
|
||||
return l10n_utils.render(request, 'mozorg/home/home.html', ctx)
|
||||
|
||||
The HTML and CSS assets for the fundraising banner are located in:
|
||||
|
||||
- ``bedrock/base/templates/includes/banners/fundraiser.html``
|
||||
- ``media/css/base/banners/fundraiser.scss``
|
||||
|
||||
.. note::
|
||||
|
||||
Strings for the fundraising banner are currently in a bit of a mess.
|
||||
Some are in ``main.lang``, whilst others are in the homepage ``.lang``
|
||||
file. This means it can't be shown outside of the home page currently,
|
||||
unless in English only. This needs fixing when we migrate over to Fluent.
|
||||
|
|
@ -33,6 +33,7 @@ Contents
|
|||
javascript-libs
|
||||
newsletters
|
||||
content-cards
|
||||
banners
|
||||
uitour
|
||||
send-to-device
|
||||
firefox-accounts
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ Our convention for string ID creation is the following:
|
|||
3. IDs should be prefixed with the name of the template file (e.g. ``firefox-new-skyline`` for ``firefox-new-skyline.html``)
|
||||
4. If you need to create a new string for the same place on a page and to transition to it as it is translated, you can
|
||||
add a version suffix to the string ID: e.g. ``firefox-new-skyline-main-page-title-v2``.
|
||||
4. The ID should be as descriptive as possible to make sense to the developer, but could be anything as long as it adheres
|
||||
5. The ID should be as descriptive as possible to make sense to the developer, but could be anything as long as it adheres
|
||||
to the rules above.
|
||||
|
||||
The ``ftl`` helper function
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
@import 'includes/base';
|
||||
|
||||
@keyframes swoosh {
|
||||
0% {background: $color-blue-40;}
|
||||
|
|
@ -35,57 +36,14 @@ $image-path: '/media/protocol/img';
|
|||
100% {background-color: $color-green-40;}
|
||||
}
|
||||
|
||||
.c-fundraiser {
|
||||
@include clearfix;
|
||||
background-size: cover;
|
||||
background-color: black;
|
||||
color: $color-white;
|
||||
padding: $spacing-md 0 0;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
// hide by default if JS is available to avoid flicker
|
||||
// (if visitor previously dismissed)
|
||||
.js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mzp-c-button.mzp-t-secondary {
|
||||
background-color: transparent;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.c-fundraiser-title {
|
||||
@include font-mozilla;
|
||||
@include text-display-lg;
|
||||
font-weight: bold;
|
||||
.c-banner-title {
|
||||
line-height: 1.25em;
|
||||
|
||||
span {
|
||||
animation-duration: 3s;
|
||||
animation-name: swoosh;
|
||||
background-color: $color-green-40;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.c-fundraiser-amount-input {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&:checked + .mzp-c-button.mzp-t-secondary {
|
||||
background-color: rgba(255, 255, 255, .25);
|
||||
font-weight: bold;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,85 +54,56 @@ $image-path: '/media/protocol/img';
|
|||
display: inline-block;
|
||||
|
||||
&:first-child {
|
||||
@include bidi(((margin-right, $spacing-lg, 0),(margin-left, 0, $spacing-lg)));
|
||||
@include bidi((
|
||||
(margin-right, $spacing-lg, 0),
|
||||
(margin-left, 0, $spacing-lg)
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-fundraiser-options {
|
||||
margin-bottom: $spacing-sm;
|
||||
|
||||
.mzp-c-button.mzp-t-secondary {
|
||||
background-color: transparent;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@include bidi(((margin, $spacing-sm $spacing-sm 0 0, 0 0 $spacing-sm $spacing-sm),));
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
@include bidi(((margin-left, 0, $spacing-sm),(margin-right, $spacing-sm, 0)));
|
||||
@include bidi((
|
||||
(margin-left, 0, $spacing-sm),
|
||||
(margin-right, $spacing-sm, 0)
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
.c-fundraiser-amount-input {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&:checked + .mzp-c-button.mzp-t-secondary {
|
||||
background-color: rgba(255, 255, 255, .25);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include bidi(((margin-right, $spacing-md, 0),(margin-left, 0, $spacing-md)));
|
||||
@include bidi((
|
||||
(margin-right, $spacing-md, 0),
|
||||
(margin-left, 0, $spacing-md)
|
||||
));
|
||||
display: inline-block;
|
||||
}
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.c-fundraiser-close {
|
||||
@include background-size(20px 20px);
|
||||
@include bidi(((right, $spacing-sm, auto), (left, auto, $spacing-sm)));
|
||||
@include image-replaced;
|
||||
background: transparent url('#{$image-path}/icons/close-white.svg') center center no-repeat;
|
||||
border: none;
|
||||
display: none;
|
||||
height: 42px;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: $spacing-sm;
|
||||
width: 42px;
|
||||
z-index: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include transition(transform .1s ease-in-out);
|
||||
@include transform(scale(1.1));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted $color-white;
|
||||
}
|
||||
|
||||
// hide the 'Close' text
|
||||
span {
|
||||
@include visually-hidden;
|
||||
}
|
||||
|
||||
// only display when JS is available
|
||||
.js & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
.c-fundraiser {
|
||||
padding-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.c-fundraiser-title {
|
||||
@include bidi(((table-cell, left, right),(padding-right, $spacing-xl, 0), (padding-left, 0, $spacing-xl)));
|
||||
@include grid-half;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.c-fundraiser-content {
|
||||
@include bidi(((table-cell, right, left),));
|
||||
@include grid-half;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
// 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 http://mozilla.org/MPL/2.0/.
|
||||
|
||||
$font-path: '/media/fonts';
|
||||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../../../protocol/css/includes/lib';
|
||||
|
||||
.c-banner {
|
||||
@include clearfix;
|
||||
@include background-size(cover);
|
||||
background-color: $color-black;
|
||||
color: $color-white;
|
||||
padding: $spacing-md 0 0;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
// hide by default if JS is available to avoid flicker
|
||||
// (if visitor previously dismissed)
|
||||
.js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// conditional class used to display the banner.
|
||||
&.c-banner-is-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
padding-bottom: $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
.c-banner-title {
|
||||
@include font-mozilla;
|
||||
@include text-display-lg;
|
||||
|
||||
@media #{$mq-lg} {
|
||||
@include bidi((
|
||||
(table-cell, left, right),
|
||||
(padding-right, $spacing-xl, 0),
|
||||
(padding-left, 0, $spacing-xl)
|
||||
));
|
||||
@include grid-half;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.c-banner-content {
|
||||
@media #{$mq-lg} {
|
||||
@include bidi(((table-cell, right, left),));
|
||||
@include grid-half;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.c-banner-close {
|
||||
@include background-size(20px 20px);
|
||||
@include bidi(((right, $spacing-sm, auto), (left, auto, $spacing-sm)));
|
||||
@include image-replaced;
|
||||
background: transparent url('#{$image-path}/icons/close-white.svg') center center no-repeat;
|
||||
border: none;
|
||||
display: none;
|
||||
height: 42px;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: $spacing-sm;
|
||||
width: 42px;
|
||||
z-index: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include transition(transform .1s ease-in-out);
|
||||
@include transform(scale(1.1));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted $color-white;
|
||||
}
|
||||
|
||||
// hide the 'Close' text
|
||||
span {
|
||||
@include visually-hidden;
|
||||
}
|
||||
|
||||
// only display when JS is available
|
||||
.js & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
// 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 http://mozilla.org/MPL/2.0/.
|
||||
|
||||
// Create namespace
|
||||
if (typeof window.Mozilla === 'undefined') {
|
||||
window.Mozilla = {};
|
||||
}
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var _fundraiser;
|
||||
|
||||
var Banner = {};
|
||||
|
||||
Banner.setCookie = function(id) {
|
||||
var date = new Date();
|
||||
var cookieDuration = 1 * 24 * 60 * 60 * 1000; // 1 day expiration
|
||||
date.setTime(date.getTime() + cookieDuration); // 1 day expiration
|
||||
Mozilla.Cookies.setItem(id, true, date.toUTCString(), '/');
|
||||
};
|
||||
|
||||
Banner.hasCookie = function(id) {
|
||||
return Mozilla.Cookies.hasItem(id);
|
||||
};
|
||||
|
||||
Banner.close = function() {
|
||||
// Remove the banner from the DOM.
|
||||
_fundraiser.parentNode.removeChild(_fundraiser);
|
||||
|
||||
// Set a cookie to not display it again.
|
||||
Banner.setCookie(Banner.id);
|
||||
|
||||
// Track the event in GA.
|
||||
window.dataLayer.push({
|
||||
'event': 'in-page-interaction',
|
||||
'eLabel': 'Banner Dismissal',
|
||||
'data-banner-name': Banner.id,
|
||||
'data-banner-dismissal': '1'
|
||||
});
|
||||
};
|
||||
|
||||
Banner.show = function() {
|
||||
// display the banner
|
||||
_fundraiser.classList.add('c-banner-is-visible');
|
||||
|
||||
// wire up close button
|
||||
document.getElementById('page-banner-close').addEventListener('click', Banner.close, false);
|
||||
};
|
||||
|
||||
Banner.init = function(id) {
|
||||
var cookiesEnabled = typeof Mozilla.Cookies !== 'undefined' && Mozilla.Cookies.enabled();
|
||||
|
||||
_fundraiser = document.getElementById('page-banner');
|
||||
|
||||
/**
|
||||
* If the banner does not exist on a page,
|
||||
* or there's not a valid banner ID then do nothing.
|
||||
*/
|
||||
if (!_fundraiser || typeof id !== 'string') {
|
||||
return false;
|
||||
}
|
||||
|
||||
Banner.id = id;
|
||||
|
||||
// Show only if cookies enabled & banner not previously dismissed.
|
||||
if (cookiesEnabled && !Banner.hasCookie(Banner.id)) {
|
||||
Banner.show();
|
||||
}
|
||||
};
|
||||
|
||||
window.Mozilla.Banner = Banner;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// 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 http://mozilla.org/MPL/2.0/.
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function onLoad() {
|
||||
window.Mozilla.Banner.init('fundraising-banner');
|
||||
}
|
||||
|
||||
window.Mozilla.run(onLoad);
|
||||
|
||||
})();
|
||||
|
|
@ -1,38 +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 http://mozilla.org/MPL/2.0/.
|
||||
|
||||
(function(Mozilla) {
|
||||
'use strict';
|
||||
|
||||
var fundraiser = document.getElementById('fundraiser');
|
||||
var fundraiserClose = document.getElementById('fundraiser-close');
|
||||
var cookieDurationDays = 1;
|
||||
var cookiesOK = typeof Mozilla.Cookies !== 'undefined' && Mozilla.Cookies.enabled();
|
||||
var storageKey = 'fundraiser-sept2019';
|
||||
var wasClosed = false;
|
||||
|
||||
// see if visitor previously dismissed the banner
|
||||
if (cookiesOK) {
|
||||
wasClosed = Mozilla.Cookies.getItem(storageKey);
|
||||
}
|
||||
|
||||
if (!wasClosed) {
|
||||
// show the banner
|
||||
fundraiser.style.display = 'block';
|
||||
|
||||
// wire up close button
|
||||
fundraiserClose.addEventListener('click', function() {
|
||||
var d;
|
||||
|
||||
fundraiser.parentNode.removeChild(fundraiser);
|
||||
|
||||
if (cookiesOK) {
|
||||
d = new Date();
|
||||
d.setTime(d.getTime() + (cookieDurationDays * 24 * 60 * 60 * 1000)); // 1 day expiration
|
||||
Mozilla.Cookies.setItem(storageKey, true, d.toUTCString(), '/');
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
})(window.Mozilla);
|
||||
|
|
@ -248,11 +248,16 @@
|
|||
},
|
||||
{
|
||||
"files": [
|
||||
"css/mozorg/home/home-2018.scss",
|
||||
"css/mozorg/home/fundraiser.scss"
|
||||
"css/mozorg/home/home-2018.scss"
|
||||
],
|
||||
"name": "home-2018"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/base/banners/fundraiser.scss"
|
||||
],
|
||||
"name": "fundraising-banner"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/pebbles/base/oldIE.scss"
|
||||
|
|
@ -1055,9 +1060,10 @@
|
|||
},
|
||||
{
|
||||
"files": [
|
||||
"js/mozorg/home/fundraiser.js"
|
||||
"js/base/mozilla-banner.js",
|
||||
"js/mozorg/home/banner-init.js"
|
||||
],
|
||||
"name": "home-fundraiser"
|
||||
"name": "fundraising-banner"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ module.exports = function(config) {
|
|||
'media/js/base/mozilla-client.js',
|
||||
'media/js/base/search-params.js',
|
||||
// end common dependencies.
|
||||
'media/js/base/mozilla-banner.js',
|
||||
'media/js/base/mozilla-run.js',
|
||||
'media/js/base/core-datalayer-page-id.js',
|
||||
'media/js/base/core-datalayer.js',
|
||||
|
|
@ -38,6 +39,7 @@ module.exports = function(config) {
|
|||
'media/js/firefox/all/all-downloads-unified.js',
|
||||
'media/js/firefox/new/yandex/scene1.js',
|
||||
'media/js/ie/mozilla-utils-ie.js',
|
||||
'tests/unit/spec/base/mozilla-banner.js',
|
||||
'tests/unit/spec/base/mozilla-run.js',
|
||||
'tests/unit/spec/base/core-datalayer-page-id.js',
|
||||
'tests/unit/spec/base/core-datalayer.js',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
/* For reference read the Jasmine and Sinon docs
|
||||
* Jasmine docs: http://pivotal.github.io/jasmine/
|
||||
* Sinon docs: http://sinonjs.org/docs/
|
||||
*/
|
||||
|
||||
/* global sinon, */
|
||||
|
||||
describe('mozilla-banner.js', function() {
|
||||
'use strict';
|
||||
|
||||
beforeEach(function() {
|
||||
// stub out Mozilla.Cookie lib
|
||||
window.Mozilla.Cookies = sinon.stub();
|
||||
window.Mozilla.Cookies.enabled = sinon.stub().returns(true);
|
||||
window.Mozilla.Cookies.setItem = sinon.stub();
|
||||
window.Mozilla.Cookies.getItem = sinon.stub();
|
||||
window.Mozilla.Cookies.hasItem = sinon.stub();
|
||||
|
||||
// stub out google tag manager
|
||||
window.dataLayer = sinon.stub();
|
||||
window.dataLayer.push = sinon.stub();
|
||||
});
|
||||
|
||||
describe('init', function() {
|
||||
|
||||
var bannerId = 'test-banner';
|
||||
|
||||
beforeEach(function() {
|
||||
var banner = '<aside id="page-banner"><button type="button" id="page-banner-close">Close</button></aside>';
|
||||
document.body.insertAdjacentHTML('beforeend', banner);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
var banner = document.getElementById('page-banner');
|
||||
banner.parentNode.removeChild(banner);
|
||||
|
||||
Mozilla.Banner.id = null;
|
||||
});
|
||||
|
||||
it('should show the banner if no cookie is set', function() {
|
||||
spyOn(window.Mozilla.Banner, 'hasCookie').and.returnValue(false);
|
||||
spyOn(window.Mozilla.Banner, 'show');
|
||||
Mozilla.Banner.init(bannerId);
|
||||
expect(Mozilla.Banner.id).toEqual(bannerId);
|
||||
expect(Mozilla.Banner.show).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not show the banner if there is a cookie', function() {
|
||||
spyOn(window.Mozilla.Banner, 'hasCookie').and.returnValue(true);
|
||||
spyOn(window.Mozilla.Banner, 'show');
|
||||
Mozilla.Banner.init(bannerId);
|
||||
expect(Mozilla.Banner.id).toEqual(bannerId);
|
||||
expect(Mozilla.Banner.show).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('close', function() {
|
||||
var bannerId = 'test-banner';
|
||||
|
||||
beforeEach(function() {
|
||||
var banner = '<aside id="page-banner"><button type="button" id="page-banner-close">Close</button></aside>';
|
||||
document.body.insertAdjacentHTML('beforeend', banner);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
Mozilla.Banner.id = null;
|
||||
});
|
||||
|
||||
it('should close the banner when clicked and set a cookie', function() {
|
||||
spyOn(window.Mozilla.Banner, 'hasCookie').and.returnValue(false);
|
||||
spyOn(window.Mozilla.Banner, 'setCookie');
|
||||
spyOn(window.Mozilla.Banner, 'close').and.callThrough();
|
||||
Mozilla.Banner.init(bannerId);
|
||||
var banner = document.getElementById('page-banner');
|
||||
expect(banner.classList.contains('c-banner-is-visible')).toBeTruthy();
|
||||
var close = document.getElementById('page-banner-close');
|
||||
close.click();
|
||||
expect(Mozilla.Banner.close).toHaveBeenCalled();
|
||||
expect(Mozilla.Banner.setCookie).toHaveBeenCalledWith(bannerId);
|
||||
expect(document.getElementById('page-banner')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче