зеркало из https://github.com/mozilla/bedrock.git
Improve mozilla-pager.js. Bug 966702.
- Remove unused 'pager' JS bundle. - Add docs pages for mozilla-pager (Bug 1007717). - Add mozilla-pager.js demo page to styleguide (dev only). - Add ARIA support for mozilla-pager. - Add ability to create/destroy pagers. - General performance/cleanup of mozilla-pager.js. - Updated /firefox/desktop/tips/, /firefox/partners, /firefox/os/devices/, and /firefox/channel/ to use newer pager features. - Re-structured hider CSS - .visually-hidden is now a proper class (not just a mixin), and .hidden sets display: none;
This commit is contained in:
Jon Petto
Родитель
180a032991
Коммит
53e276b147
|
|
@ -82,7 +82,11 @@
|
|||
</head>
|
||||
|
||||
<body {% if self.body_id() %}id="{% block body_id %}{% endblock %}" {% endif %}class="html-{{ DIR }} {% block body_class %}{% endblock %}"{% block body_attrs %}{% endblock %}>
|
||||
<div id="strings" data-global-close="{{ _('Close') }}" {% block string_data %}{% endblock %}></div>
|
||||
<div id="strings"
|
||||
data-global-close="{{ _('Close') }}"
|
||||
data-global-next="{{ _('Next') }}"
|
||||
data-global-previous="{{ _('Previous') }}"
|
||||
{% block string_data %}{% endblock %}></div>
|
||||
<div id="outer-wrapper">
|
||||
<div id="wrapper">
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,11 @@
|
|||
</head>
|
||||
|
||||
<body {% if self.body_id() %}id="{% block body_id %}{% endblock %}" {% endif %}class="html-{{ DIR }} {% block body_class %}{% endblock %}"{% block body_attrs %}{% endblock %}>
|
||||
<div id="strings" data-global-close="{{ _('Close') }}" {% block string_data %}{% endblock %}></div>
|
||||
<div id="strings"
|
||||
data-global-close="{{ _('Close') }}"
|
||||
data-global-next="{{ _('Next') }}"
|
||||
data-global-previous="{{ _('Previous') }}"
|
||||
{% block string_data %}{% endblock %}></div>
|
||||
<div id="outer-wrapper">
|
||||
<div id="wrapper">
|
||||
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
|
||||
<div class="form-contents">
|
||||
<div class="field field-email">
|
||||
<label for="id_email" class="hidden">{{ _('Email') }}</label>
|
||||
<label for="id_email" class="visually-hidden">{{ _('Email') }}</label>
|
||||
<input name="email" type="email" id="id_email" value="" required aria-required="true" placeholder="{{ _('YOUR EMAIL HERE') }}">
|
||||
</div>
|
||||
|
||||
<div id="form-details">
|
||||
<!-- This is bad, but a quick fix because we are pushing live in an hour -->
|
||||
<div class="field field-country">
|
||||
<label for="country" class="hidden">{{ _('Country') }}</label>
|
||||
<label for="country" class="visually-hidden">{{ _('Country') }}</label>
|
||||
<select id="country" name="country">
|
||||
<option value=""></option>
|
||||
<option value="AF">Afghanistan</option>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<div id="main-content" class="pager pager-with-tabs pager-cleartype-fix">
|
||||
<div id="main-content" class="pager pager-with-tabs pager-cleartype-fix pager-auto-init">
|
||||
|
||||
<ul id="toggler-container" class="pager-tabs">
|
||||
<li id="beta-link"><a href="#beta"><img src="{{ media('/img/firefox/channel/toggler-beta.png?2013-06') }}" alt="Firefox Beta" id="toggler-logo-beta" /></a></li>
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
<li id="aurora-link"><a href="#aurora"><img src="{{ media('/img/firefox/channel/toggler-aurora.png?2013-06') }}" alt="Firefox Aurora" id="toggler-logo-aurora" /></a></li>
|
||||
</ul>
|
||||
|
||||
<a href="#" id="carousel-left"></a>
|
||||
<a href="#" id="carousel-right"></a>
|
||||
<a href="#" id="carousel-left" aria-hidden="true"></a>
|
||||
<a href="#" id="carousel-right" aria-hidden="true"></a>
|
||||
|
||||
<div class="pager-content">
|
||||
|
||||
|
|
|
|||
|
|
@ -38,12 +38,22 @@
|
|||
<div id="share-nav-wrapper" class="share-wrapper">
|
||||
{% include 'firefox/includes/social-share.html' %}
|
||||
<nav id="tips-nav-direct">
|
||||
<ol>
|
||||
<li><a href="#bookmarks"><span>{{ _('1') }}</span> {{ _('Bookmarks') }}</a></li>
|
||||
<li><a href="#simplify"><span>{{ _('2') }}</span> {{ _('Simplify') }}</a></li>
|
||||
<li><a href="#arrange"><span>{{ _('3') }}</span> {{ _('Arrange') }}</a></li>
|
||||
<li><a href="#sync"><span>{{ _('4') }}</span> {{ _('Sync') }}</a></li>
|
||||
<li><a href="#addons"><span>{{ _('5') }}</span> {{ _('Add-ons') }}</a></li>
|
||||
<ol role="tablist">
|
||||
<li role="presentation">
|
||||
<a role="tab" aria-controls="bookmarks-tip" aria-selected="true" href="#bookmarks" id="tab-bookmarks"><span>{{ _('1') }}</span> {{ _('Bookmarks') }}</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="tab" aria-controls="simplify-tip" aria-selected="false" href="#simplify" id="tab-simplify"><span>{{ _('2') }}</span> {{ _('Simplify') }}</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="tab" aria-controls="arrange-tip" aria-selected="false" href="#arrange" id="tab-arrange"><span>{{ _('3') }}</span> {{ _('Arrange') }}</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="tab" aria-controls="sync-tip" aria-selected="false" href="#sync" id="tab-sync"><span>{{ _('4') }}</span> {{ _('Sync') }}</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="tab" aria-controls="addons-tip" aria-selected="false" href="#addons" id="tab-addons"><span>{{ _('5') }}</span> {{ _('Add-ons') }}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>{# /#share-nav-wrapper #}
|
||||
|
|
@ -51,9 +61,9 @@
|
|||
</div>{# /#page-header #}
|
||||
|
||||
<div id="page-content">
|
||||
<div class="container pager pager-no-history">
|
||||
<div class="container pager pager-no-history pager-auto-init">
|
||||
<div id="tips-nav-prev-next">
|
||||
<button class="link-button" id="tip-prev">{{ _('back') }}</button>
|
||||
<button class="link-button" id="tip-prev" aria-controls="tips-wrapper">{{ _('back') }}</button>
|
||||
|
||||
<div id="tips-nav-dots">
|
||||
<span data-tip="bookmarks">{{ _('1') }}</span>
|
||||
|
|
@ -63,11 +73,11 @@
|
|||
<span data-tip="addons">{{ _('5') }}</span>
|
||||
</div>
|
||||
|
||||
<button class="link-button" type="button" id="tip-next">{{ _('next') }}</button>
|
||||
<button class="link-button" type="button" id="tip-next" aria-controls="tips-wrapper">{{ _('next') }}</button>
|
||||
</div>
|
||||
|
||||
<div id="tips-wrapper" class="pager-content">
|
||||
<div class="tip pager-page default-page" id="bookmarks-tip">
|
||||
<div class="tip pager-page default-page" id="bookmarks-tip" role="tabpanel" aria-labelledby="tab-bookmarks">
|
||||
<div class="tip-copy">
|
||||
<div class="ordinal">{{ _('1') }}</div>
|
||||
|
||||
|
|
@ -98,7 +108,7 @@
|
|||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="tip pager-page" id="simplify-tip">
|
||||
<div class="tip pager-page" id="simplify-tip" role="tabpanel" aria-labelledby="tab-simplify">
|
||||
<div class="tip-copy">
|
||||
<div class="ordinal">{{ _('2') }}</div>
|
||||
|
||||
|
|
@ -129,7 +139,7 @@
|
|||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="tip" id="arrange-tip">
|
||||
<div class="tip pager-page" id="arrange-tip" role="tabpanel" aria-labelledby="tab-arrange">
|
||||
<div class="tip-copy">
|
||||
<div class="ordinal">{{ _('3') }}</div>
|
||||
|
||||
|
|
@ -159,7 +169,7 @@
|
|||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="tip" id="sync-tip">
|
||||
<div class="tip pager-page" id="sync-tip" role="tabpanel" aria-labelledby="tab-sync">
|
||||
<div class="tip-copy">
|
||||
<div class="ordinal">{{ _('4') }}</div>
|
||||
|
||||
|
|
@ -193,7 +203,7 @@
|
|||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="tip" id="addons-tip">
|
||||
<div class="tip pager-page" id="addons-tip" role="tabpanel" aria-labelledby="tab-addons">
|
||||
<div class="tip-copy">
|
||||
<div class="ordinal">{{ _('5') }}</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
</div> <!--/#overview-news-links-->
|
||||
|
||||
<div class="partner-logos">
|
||||
<div class="pager pager-with-tabs pager-no-history pager-auto-rotate">
|
||||
<div class="pager pager-with-tabs pager-no-history pager-auto-rotate pager-auto-init">
|
||||
<div class="pager-content">
|
||||
<div class="pager-page default-page">
|
||||
<ul class="logos">
|
||||
|
|
@ -318,7 +318,7 @@
|
|||
<a href="https://mobilepartners.mozilla.org/" class="button">{{ _('Partner with us') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketplace-logos pager pager-with-tabs pager-no-history">
|
||||
<div class="marketplace-logos pager pager-with-tabs pager-no-history pager-auto-init">
|
||||
<div class="pager-content">
|
||||
<div class="pager-page default-page">
|
||||
<ul class="logos">
|
||||
|
|
|
|||
|
|
@ -371,6 +371,9 @@ MINIFY_BUNDLES = {
|
|||
'css/styleguide/communications.less',
|
||||
'css/styleguide/products-firefox-os.less',
|
||||
),
|
||||
'styleguide-docs-mozilla-pager': (
|
||||
'css/styleguide/docs/mozilla-pager.less',
|
||||
),
|
||||
'tabzilla': (
|
||||
'css/tabzilla/tabzilla.less',
|
||||
),
|
||||
|
|
@ -620,9 +623,6 @@ MINIFY_BUNDLES = {
|
|||
'nightly-firstrun': (
|
||||
'js/firefox/firstrun/nightly-firstrun.js',
|
||||
),
|
||||
'pager': (
|
||||
'js/base/mozilla-pager.js',
|
||||
),
|
||||
'partnerships': (
|
||||
'js/libs/jquery.validate.js',
|
||||
'js/base/mozilla-form-helper.js',
|
||||
|
|
@ -655,6 +655,10 @@ MINIFY_BUNDLES = {
|
|||
'styleguide': (
|
||||
'js/styleguide/styleguide.js',
|
||||
),
|
||||
'styleguide-docs-mozilla-pager': (
|
||||
'js/base/mozilla-pager.js',
|
||||
'js/styleguide/docs/mozilla-pager.js',
|
||||
),
|
||||
'video': (
|
||||
'js/base/mozilla-video-tools.js',
|
||||
),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,213 @@
|
|||
{# 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 "mozorg/base-resp.html" %}
|
||||
|
||||
{% block page_title %}{{ _('mozilla-pager.js examples') }}{% endblock %}
|
||||
{% block body_id %}mozilla-pager{% endblock %}
|
||||
{% block body_class %}sand{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('styleguide-docs-mozilla-pager') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<article id="main-content">
|
||||
<h1>{{ _('mozilla-pager.js Examples') }}</h1>
|
||||
|
||||
<section class="example" id="example1">
|
||||
<h2>Pager with nav, history, & auto rotation</h2>
|
||||
|
||||
<div class="pager pager-auto-init pager-with-nav pager-auto-rotate">
|
||||
<!-- nav will be drawn here -->
|
||||
<div class="pager-content">
|
||||
<article id="example1-page1" class="pager-page">
|
||||
<h3>Page 1</h3>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec
|
||||
odio vel metus vestibulum tempus. Integer imperdiet mollis pulvinar.
|
||||
Praesent consectetur sagittis lacus, quis gravida mauris imperdiet in.
|
||||
Fusce pretium, mi et tempus lobortis, lectus nunc mollis risus, sit amet
|
||||
tempor eros eros eget nisl. Etiam quis placerat augue.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example1-page2" class="pager-page">
|
||||
<h3>Page 2</h3>
|
||||
|
||||
<p>
|
||||
Donec dapibus odio et pulvinar tristique. In a tristique tortor. Sed at
|
||||
metus elit. Etiam commodo lobortis ligula auctor porta. Vivamus imperdiet,
|
||||
dolor non pretium tempor, neque lectus pharetra tellus, at volutpat orci
|
||||
velit at tellus. Curabitur in molestie ipsum. Maecenas imperdiet magna sed
|
||||
aliquam tincidunt.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example1-page3" class="pager-page">
|
||||
<h3>Page 3</h3>
|
||||
|
||||
<p>
|
||||
Ut vitae consectetur mauris, a scelerisque quam. Vestibulum mi nibh,
|
||||
porttitor et tellus vitae, rhoncus cursus sapien. Sed posuere leo neque,
|
||||
vel dapibus ligula rhoncus et. Integer vehicula rhoncus volutpat.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example" id="example2">
|
||||
<h2>Pager with tabs, no history, & starting on page 2</h2>
|
||||
|
||||
<div id="pager-example2" class="pager pager-auto-init pager-with-tabs pager-no-history">
|
||||
<ol class="pager-tabs">
|
||||
<li>
|
||||
<a href="#example2-page1">Page 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#example2-page2">Page 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#example2-page3">Page 3</a>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="pager-content">
|
||||
<article id="example2-page1" class="pager-page">
|
||||
<h3>Page 1</h3>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec
|
||||
odio vel metus vestibulum tempus. Integer imperdiet mollis pulvinar.
|
||||
Praesent consectetur sagittis lacus, quis gravida mauris imperdiet in.
|
||||
Fusce pretium, mi et tempus lobortis, lectus nunc mollis risus, sit amet
|
||||
tempor eros eros eget nisl. Etiam quis placerat augue.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example2-page2" class="pager-page default-page">
|
||||
<h3>Page 2</h3>
|
||||
|
||||
<p>
|
||||
Donec dapibus odio et pulvinar tristique. In a tristique tortor. Sed at
|
||||
metus elit. Etiam commodo lobortis ligula auctor porta. Vivamus imperdiet,
|
||||
dolor non pretium tempor, neque lectus pharetra tellus, at volutpat orci
|
||||
velit at tellus. Curabitur in molestie ipsum. Maecenas imperdiet magna sed
|
||||
aliquam tincidunt.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example2-page3" class="pager-page">
|
||||
<h3>Page 3</h3>
|
||||
|
||||
<p>
|
||||
Ut vitae consectetur mauris, a scelerisque quam. Vestibulum mi nibh,
|
||||
porttitor et tellus vitae, rhoncus cursus sapien. Sed posuere leo neque,
|
||||
vel dapibus ligula rhoncus et. Integer vehicula rhoncus volutpat.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example" id="example3">
|
||||
<h2>Enable/Disable Pager with tabs, nav, & random start page</h2>
|
||||
|
||||
<button type="button" id="pager3-enable">Enable Pager</button>
|
||||
<button type="button" id="pager3-disable">Disable Pager</button>
|
||||
|
||||
<div id="pager-example3" class="pager pager-with-tabs pager-with-nav pager-random">
|
||||
<ol class="pager-tabs">
|
||||
<li>
|
||||
<a href="#example3-page1">Page 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#example3-page2">Page 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#example3-page3">Page 3</a>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="pager-content">
|
||||
<article id="example3-page1" class="pager-page">
|
||||
<h3>Page 1</h3>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec
|
||||
odio vel metus vestibulum tempus. Integer imperdiet mollis pulvinar.
|
||||
Praesent consectetur sagittis lacus, quis gravida mauris imperdiet in.
|
||||
Fusce pretium, mi et tempus lobortis, lectus nunc mollis risus, sit amet
|
||||
tempor eros eros eget nisl. Etiam quis placerat augue.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example3-page2" class="pager-page">
|
||||
<h3>Page 2</h3>
|
||||
|
||||
<p>
|
||||
Donec dapibus odio et pulvinar tristique. In a tristique tortor. Sed at
|
||||
metus elit. Etiam commodo lobortis ligula auctor porta. Vivamus imperdiet,
|
||||
dolor non pretium tempor, neque lectus pharetra tellus, at volutpat orci
|
||||
velit at tellus. Curabitur in molestie ipsum. Maecenas imperdiet magna sed
|
||||
aliquam tincidunt.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example3-page3" class="pager-page">
|
||||
<h3>Page 3</h3>
|
||||
|
||||
<p>
|
||||
Ut vitae consectetur mauris, a scelerisque quam. Vestibulum mi nibh,
|
||||
porttitor et tellus vitae, rhoncus cursus sapien. Sed posuere leo neque,
|
||||
vel dapibus ligula rhoncus et. Integer vehicula rhoncus volutpat.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example" id="example4">
|
||||
<h2>Pager with custom next/previous controls</h2>
|
||||
|
||||
<div id="pager-example4" class="pager pager-auto-init">
|
||||
|
||||
<button type="button" class="link-button" id="prev">Previous</button>
|
||||
<button type="button" class="link-button" id="next">Next</button>
|
||||
|
||||
<div class="pager-content">
|
||||
<article id="example4-page1" class="pager-page">
|
||||
<h3>Page 1</h3>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec
|
||||
odio vel metus vestibulum tempus. Integer imperdiet mollis pulvinar.
|
||||
Praesent consectetur sagittis lacus, quis gravida mauris imperdiet in.
|
||||
Fusce pretium, mi et tempus lobortis, lectus nunc mollis risus, sit amet
|
||||
tempor eros eros eget nisl. Etiam quis placerat augue.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example4-page2" class="pager-page">
|
||||
<h3>Page 2</h3>
|
||||
|
||||
<p>
|
||||
Donec dapibus odio et pulvinar tristique. In a tristique tortor. Sed at
|
||||
metus elit. Etiam commodo lobortis ligula auctor porta. Vivamus imperdiet,
|
||||
dolor non pretium tempor, neque lectus pharetra tellus, at volutpat orci
|
||||
velit at tellus. Curabitur in molestie ipsum. Maecenas imperdiet magna sed
|
||||
aliquam tincidunt.
|
||||
</p>
|
||||
</article>
|
||||
<article id="example4-page3" class="pager-page">
|
||||
<h3>Page 3</h3>
|
||||
|
||||
<p>
|
||||
Ut vitae consectetur mauris, a scelerisque quam. Vestibulum mi nibh,
|
||||
porttitor et tellus vitae, rhoncus cursus sapien. Sed posuere leo neque,
|
||||
vel dapibus ligula rhoncus et. Integer vehicula rhoncus volutpat.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('styleguide-docs-mozilla-pager') }}
|
||||
{% endblock %}
|
||||
|
|
@ -91,9 +91,13 @@ all_children = [
|
|||
]
|
||||
|
||||
if settings.DEV:
|
||||
all_children.append(
|
||||
all_children.extend((
|
||||
PageNode('All Buttons', path='all-download-buttons',
|
||||
template='styleguide/websites/sandstone-all-download-buttons.html'),
|
||||
)
|
||||
PageNode('Docs', path='docs', children=(
|
||||
PageNode('Mozilla Pager JS', path='mozilla-pager',
|
||||
template='styleguide/docs/mozilla-pager.html'),
|
||||
)),
|
||||
))
|
||||
|
||||
urlpatterns = PageRoot('Home', children=tuple(all_children)).as_urlpatterns()
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ Contents
|
|||
php
|
||||
l10n
|
||||
coding
|
||||
jslibs
|
||||
contribute
|
||||
grunt
|
||||
newsletters
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
.. 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/.
|
||||
|
||||
.. _jslibs:
|
||||
|
||||
====================
|
||||
JavaScript Libraries
|
||||
====================
|
||||
|
||||
.. _with mozillapager:
|
||||
|
||||
- :ref:`mozilla-pager.js<mozillapager>`
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
.. 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/.
|
||||
|
||||
.. _mozillapager:
|
||||
|
||||
=============
|
||||
Mozilla Pager
|
||||
=============
|
||||
|
||||
`mozilla-pager.js` converts a section of markup into a tabbed or carousel interface. At minimum, each pager requires the following HTML elements:
|
||||
|
||||
- A container with the class ``pager``, which contains,
|
||||
- A container with the class ``pager-content``, which contains,
|
||||
- Multiple containers with the class ``pager-page``.
|
||||
|
||||
A very basic (yet fully functional) example might look like::
|
||||
|
||||
<div class="pager pager-auto-init pager-with-nav">
|
||||
<div class="pager-content">
|
||||
<div class="pager-page">
|
||||
<p>Page 1</p>
|
||||
</div>
|
||||
<div class="pager-page">
|
||||
<p>Page 2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
See below for explanation of the ``pager-auto-init`` and ``pager-with-nav`` classes.
|
||||
|
||||
Defaults
|
||||
--------
|
||||
|
||||
All pagers have the following default behaviors:
|
||||
|
||||
- The first page (the first element with class ``pager-page``) will be displayed when the pager is initialized. Can be overridden using either the ``default-page`` class on a specific ``pager-page`` element, or by using the ``pager-random`` class on the ``pager`` element.
|
||||
- The URL hash will be updated when navigating to a page other than the default page. This URL hash will be honored on page reload, displayed the last viewed pager page. Can be overridden using the ``pager-no-history`` class on the ``pager`` element.
|
||||
|
||||
Pager options
|
||||
-------------
|
||||
|
||||
Each pager can be individually configured through classes on the
|
||||
container ``pager`` element:
|
||||
|
||||
``pager-auto-init``
|
||||
Instructs the library to initialize the pager on ``$(document).ready()``.
|
||||
``pager-with-tabs``
|
||||
Instructs the ``pager`` to look for a child element with the class
|
||||
``pager-tabs``. Links within this element will be used to show specific
|
||||
pages. For example::
|
||||
|
||||
<div class="pager pager-auto-init pager-with-tabs">
|
||||
<ol class="pager-tabs">
|
||||
<li><a href="#page1">Page 1</a></li>
|
||||
<li><a href="#page2">Page 2</a></li>
|
||||
</ol>
|
||||
<div class="pager-content">
|
||||
<div id="page1" class="pager-page">
|
||||
<p>Page 1</p>
|
||||
</div>
|
||||
<div id="page2" class="pager-page">
|
||||
<p>Page 2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
The ``pager-tabs`` element will usually either be a ``<ul>`` or ``<ol>``, but can be any element you wish. **Note that tab anchor tags must be inside of a container, such as an** ``<li>`` (as shown above).
|
||||
|
||||
The anchor tag linking to the currently displayed page will have a ``selected`` class applied.
|
||||
|
||||
``pager-with-nav``
|
||||
Instructs the pager to generate and insert navigational markup directly before the ``pager-content`` element. The **generated markup** would look like::
|
||||
|
||||
|
||||
<div class="pager pager-auto-init pager-with-nav" id="mozilla-pager-1">
|
||||
|
||||
<!-- BEGIN GENERATED MARKUP -->
|
||||
<div class="pager-nav">
|
||||
<span class="pager-nav-page-number">1 / 2</span>
|
||||
<fieldset class="pager-nav-links-wrapper" aria-controls="mozilla-pager-1-pages">
|
||||
<button type="button" class="pager-prev" disabled="disabled" aria-label="Previous">Previous</button>
|
||||
<span class="pager-nav-divider"></span>
|
||||
<button type="button" class="pager-next" aria-label="Next">Next</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
<!-- END GENERATED MARKUP -->
|
||||
|
||||
<div class="pager-content" id="mozilla-pager-1-pages">
|
||||
<div id="page1" class="pager-page">
|
||||
<p>Page 1</p>
|
||||
</div>
|
||||
<div id="page2" class="pager-page">
|
||||
<p>Page 2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
The appearance of the nav can easily be customized by writing your own selectors for the relevant CSS class names.
|
||||
|
||||
``pager-no-history``
|
||||
Instructs the library **not** to update the URL hash with the currently visible page.
|
||||
``pager-random``
|
||||
The pager will display a random page when initialized.
|
||||
``pager-auto-rotate``
|
||||
The pager will automatically rotate through all pages, looping when when reaching the last page. Rotation will pause when the page is either focused or moused over.
|
||||
|
||||
Page options
|
||||
------------
|
||||
|
||||
Each page inside the pager can be customized by applying the following classes to the ``pager-page`` element:
|
||||
|
||||
``default-page``
|
||||
Sets the page as the default page for the pager. If not provided, defaults to first ``pager-page`` element.
|
||||
|
||||
Pager API
|
||||
---------
|
||||
|
||||
Initializing new pagers
|
||||
^^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
||||
You can initialize new pagers in bulk by calling the ``createPagers`` method::
|
||||
|
||||
Mozilla.Pager.createPagers();
|
||||
|
||||
This call will initialize all un-initialized pagers.
|
||||
|
||||
You can also initialize a single pager by creating a new ``Mozilla.Pager`` object, passing a reference to the ``pager`` element::
|
||||
|
||||
<div class="pager" id="delayed-pager">
|
||||
<!-- additional pager markup here -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var delayedPager = new Mozilla.Pager(document.querySelector('#delayed-pager'));
|
||||
</script>
|
||||
|
||||
Once initialized, the ``pager-initialized`` class is applied to each ``pager`` element.
|
||||
|
||||
If a pager does not have an ``id`` specified, the library will provide one during initialization in the form of ``mozilla-pager-X``, where ``X`` represents the new pager's creation order.
|
||||
|
||||
Accessing pagers
|
||||
^^^^^^^^^^^^^^^^
|
||||
|
||||
All initialized pagers can be accessed through the ``Mozilla.Pager.pagers`` array::
|
||||
|
||||
var pagers = Mozilla.Pager.pagers;
|
||||
|
||||
// log the id of each pager
|
||||
for (var i = 0; i < pagers.length; i++) {
|
||||
console.log(pagers[i].id);
|
||||
}
|
||||
|
||||
You can also find a pager by its ``id`` using the ``Mozilla.Pager.findPagerById()`` function. Returns a ``Mozilla.Pager`` object on success, ``null`` on failure::
|
||||
|
||||
// assume pagers have already been initialized
|
||||
var myPager = Mozilla.Pager.findPagerById('my-pager');
|
||||
|
||||
Destroying pagers
|
||||
^^^^^^^^^^^^^^^^^
|
||||
|
||||
Pagers can be destroyed by passing the pager's ``id`` to the ``Mozilla.Pagers.destroyPagerById()`` function::
|
||||
|
||||
<div class="pager" id="delayed-pager">
|
||||
<!-- additional pager markup here -->
|
||||
</div>
|
||||
|
||||
<button id="destroy-pager">Destroy Pager</button>
|
||||
|
||||
<script>
|
||||
var delayed_pager = new Mozilla.Pager(document.querySelector('#delayed-pager'));
|
||||
|
||||
document.querySelector('#destroy-pager').addEventListener('click', function(e) {
|
||||
Mozilla.Pager.destroyPagerById('delayed-pager');
|
||||
});
|
||||
</script>
|
||||
|
||||
This function removes the pager from the ``Mozilla.Pager.pagers`` array, removes any generated navigational markup, displays all pages in the pager, removes the ``pager-initialized`` class, and unbinds all event listeners within the pager.
|
||||
|
||||
IDs and WAI-ARIA attributes added by the library are not removed.
|
||||
|
||||
Returns ``true`` on success and ``false`` on failure.
|
||||
|
||||
You can destroy *all* pagers on a page using the ``Mozilla.Pager.destroyPagers()`` function, which simply calls ``Mozilla.Pager.destroyPagerById()`` for each existing pager.
|
||||
|
||||
Accessing pages
|
||||
^^^^^^^^^^^^^^^
|
||||
|
||||
All pagers have a ``pages`` array containing ``Mozilla.Page`` objects::
|
||||
|
||||
var my_pager = new Mozilla.Pager(document.querySelector('#my-pager'));
|
||||
|
||||
var my_pager_pages = my_pager.pages;
|
||||
|
||||
// log each page in my_pager
|
||||
for (var i = 0; i < my_pager_pages.length; i++) {
|
||||
console.log(my_pager_pages[i]);
|
||||
}
|
||||
|
||||
Changing pages
|
||||
^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
||||
A pager's currently displayed page can be set through a variety of methods:
|
||||
|
||||
``nextPageWithAnimation``
|
||||
Moves the pager to the next page in the set. Will loop back to the first page if currently on the last page. Optionally takes a numeric ``duration`` (in milliseconts) parameter::
|
||||
|
||||
var my_pager = new Mozilla.Pager(document.querySelector('#my-pager'));
|
||||
|
||||
my_pager.nextPageWithAnimation();
|
||||
|
||||
``prevPageWithAnimation``
|
||||
Moves the pager to the previous page in the set. Will loop back to the last page if currently on the first page. Optionally takes a numeric ``duration`` (in milliseconds) parameter::
|
||||
|
||||
var my_pager = new Mozilla.Pager(document.querySelector('#my-pager'));
|
||||
|
||||
my_pager.prevPageWithAnimation(400);
|
||||
|
||||
``setPage``
|
||||
Sets the current page to the passed ``Mozilla.Page`` object::
|
||||
|
||||
var my_pager = new Mozilla.Pager(document.querySelector('#my-pager'));
|
||||
|
||||
var my_pager_pages = my_pager.pages;
|
||||
|
||||
// display the third page
|
||||
my_pager.setPage(my_pager_pages[2]);
|
||||
|
||||
``setPageWithAnimation``
|
||||
Same as ``setPage``, but with fade in/fade out animations. Takes an optional numeric ``duration`` (in milliseconds) parameter::
|
||||
|
||||
var my_pager = new Mozilla.Pager(document.querySelector('#my-pager'));
|
||||
|
||||
var my_pager_pages = my_pager.pages;
|
||||
|
||||
// display the second page
|
||||
my_pager.setPageWithAnimation(my_pager_pages[1], 450);
|
||||
|
||||
Global Settings
|
||||
---------------
|
||||
|
||||
You can configure some appearance and behavior of the library by supplying custom values for the following. Custom values should generally be set prior to ``$(document).ready()``.
|
||||
|
||||
``Mozilla.Pager.PAGE_DURATION``
|
||||
Time taken for page to fade in/out from tab and nav interaction. Defaults to ``150`` (milliseconds).
|
||||
|
||||
``Mozilla.Pager.PAGE_AUTO_DURATION``
|
||||
Time taken for page to fade in/out during auto rotate. Defaults to ``850`` (milliseconds).
|
||||
|
||||
``Mozilla.Pager.AUTO_ROTATE_INTERVAL``
|
||||
Time page is visible during auto rotate. Defaults to ``7000`` (milliseconds).
|
||||
|
||||
``Mozilla.Pager.NEXT_TEXT``
|
||||
Sets the text displayed in the `next` link in the generated navigation. Defaults to 'Next'. Note that any new value supplied should be localized (likely using the ``window.trans`` function).
|
||||
|
||||
``Mozilla.Pager.PREV_TEXT``
|
||||
Same as above, but for the `previous` link.
|
||||
|
||||
``Mozilla.Pager.HIDDEN_CLASS``
|
||||
Sets the CSS class used to hide pages. If overridden, should set ``display: none;`` for ARIA purposes. Defaults to ``hidden``.
|
||||
|
||||
Examples
|
||||
--------
|
||||
|
||||
You can view some common pager examples by navigating to ``/styleguide/docs/mozilla-pager/`` in your local development environment (not available in production).
|
||||
|
|
@ -391,7 +391,6 @@ html[lang^='en'] #tips-nav-direct li a span:after {
|
|||
}
|
||||
|
||||
.tip {
|
||||
display: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// 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/.
|
||||
|
||||
|
||||
@import "../../sandstone/sandstone-resp.less";
|
||||
@import "get_device.less";
|
||||
|
||||
|
|
|
|||
|
|
@ -298,8 +298,11 @@
|
|||
color: @linkRed;
|
||||
}
|
||||
|
||||
/****************************************************************************/
|
||||
// Classes used to hide content from users. Choose wisely!
|
||||
|
||||
// Hide visually, but not to screen readers
|
||||
.visually-hidden() {
|
||||
.visually-hidden {
|
||||
position: absolute!important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
|
@ -310,6 +313,13 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
// Hide visually & from screen readers
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/****************************************************************************/
|
||||
|
||||
// not the most up to date method, but works in IE7
|
||||
.image-replaced {
|
||||
text-indent: 120%; // extra 20% to account for fancy fonts that may overhang
|
||||
|
|
@ -324,6 +334,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.leading-arrow() {
|
||||
&:before {
|
||||
content: "« "; /* laquo nbsp */
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-column(@width: auto, @count: auto, @gap: normal) {
|
||||
-webkit-column-width: @width;
|
||||
-moz-column-width: @width;
|
||||
|
|
|
|||
|
|
@ -170,8 +170,7 @@
|
|||
}
|
||||
|
||||
.hidden {
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-field-error {
|
||||
|
|
|
|||
|
|
@ -670,10 +670,6 @@ img {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
.visually-hidden();
|
||||
}
|
||||
|
||||
// not the most up to date method, but works in IE7
|
||||
.image-replaced {
|
||||
text-indent: 110%; // extra 10% to account for fancy fonts that may overhang
|
||||
|
|
|
|||
|
|
@ -1458,8 +1458,4 @@ nav.menu-bar {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
.visually-hidden();
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
@import '../../sandstone/sandstone-resp.less';
|
||||
|
||||
.example {
|
||||
margin: (@baseLine * 2) 0;
|
||||
}
|
||||
|
||||
.pager {
|
||||
background: #fff;
|
||||
padding: @baseLine;
|
||||
}
|
||||
|
||||
.pager-nav {
|
||||
margin-bottom: @baseLine;
|
||||
|
||||
button {
|
||||
.link-button();
|
||||
|
||||
&.pager-prev {
|
||||
.leading-arrow();
|
||||
}
|
||||
|
||||
&.pager-next {
|
||||
.trailing-arrow();
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: @textColorLight;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager-nav-links-wrapper {
|
||||
display: inline;
|
||||
margin: 0 (@baseLine / 2);
|
||||
}
|
||||
|
||||
.pager-nav-divider {
|
||||
margin: 0 (@baseLine / 4);
|
||||
&:after {
|
||||
content: '|';
|
||||
}
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -6,7 +6,7 @@ $(document).ready(function() {
|
|||
var $logo = $('#masthead h2 img');
|
||||
var logoOriginalSrc = $logo.attr('src');
|
||||
|
||||
var pager = Mozilla.Pager.rootPagers[0];
|
||||
var pager = Mozilla.Pager.pagers[0];
|
||||
var selected_href = false;
|
||||
|
||||
function redirect(a) {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
var $tipPrev = $('#tip-prev');
|
||||
var $tipNext = $('#tip-next');
|
||||
var $tipsNavDirect = $('#tips-nav-direct');
|
||||
var $tipsTabLinks = $tipsNavDirect.find('a');
|
||||
var $tipsNavDots = $('#tips-nav-dots');
|
||||
|
||||
// only show download button for users on desktop platforms, using either a non-Firefox browser
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
var currentURL = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.hash;
|
||||
gaTrack(['_trackEvent','/desktop/tips/ Interactions','page load', currentURL, 0, true]);
|
||||
|
||||
var pager = Mozilla.Pager.rootPagers[0];
|
||||
var pager = Mozilla.Pager.pagers[0];
|
||||
|
||||
// sets the current pager tab based on the url hash
|
||||
function setCurrentPage (noAnim) {
|
||||
|
|
@ -63,8 +64,8 @@
|
|||
var current = pager.currentPage.id.replace('-tip', '');
|
||||
|
||||
// update direct nav links
|
||||
$tipsNavDirect.find('a').removeClass('selected');
|
||||
$tipsNavDirect.find('a[href="#' + current + '"]').addClass('selected');
|
||||
$tipsTabLinks.removeClass('selected').attr('aria-selected', 'false');
|
||||
$tipsNavDirect.find('a[href="#' + current + '"]').addClass('selected').attr('aria-selected', 'true');
|
||||
|
||||
// update next/prev links
|
||||
if (pager.currentPage.index === 0) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
// create namespace
|
||||
if (typeof Mozilla == 'undefined') {
|
||||
if (typeof Mozilla === 'undefined') {
|
||||
var Mozilla = {};
|
||||
}
|
||||
|
||||
|
|
@ -13,8 +13,9 @@ if (typeof Mozilla == 'undefined') {
|
|||
var COUNTRY_CODE = '';
|
||||
var selectedDevice;
|
||||
|
||||
var isSmallViewport = $(window).width() < 760;
|
||||
var isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints || navigator.maxTouchPoints || isSmallViewport;
|
||||
// Will be used when color pickers are activated
|
||||
//var isSmallViewport = $(window).width() < 760;
|
||||
//var isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints || navigator.maxTouchPoints || isSmallViewport;
|
||||
|
||||
var $purchaseDeviceButton = $('#purchase-device');
|
||||
var $locationSelect = $('#location');
|
||||
|
|
@ -22,12 +23,10 @@ if (typeof Mozilla == 'undefined') {
|
|||
var $deviceDetailLists = $('.device-detail-list');
|
||||
var $deviceDetails = $('.device-detail');
|
||||
|
||||
var $pagerPages = $('.pager-page');
|
||||
|
||||
var $providerLinks = $('#provider-links');
|
||||
|
||||
// create namespace
|
||||
if (typeof Mozilla.FxOs == 'undefined') {
|
||||
if (typeof Mozilla.FxOs === 'undefined') {
|
||||
Mozilla.FxOs = {};
|
||||
}
|
||||
|
||||
|
|
@ -111,23 +110,14 @@ if (typeof Mozilla == 'undefined') {
|
|||
*/
|
||||
var togglePagers = function(enable) {
|
||||
if (enable) {
|
||||
$pagerPages.each(function(i, page) {
|
||||
var $page = $(page);
|
||||
|
||||
$page.attr('style', $page.data('oldstyle')).data('oldstyle', '');
|
||||
});
|
||||
Mozilla.Pager.createPagers();
|
||||
} else {
|
||||
$pagerPages.each(function(i, page) {
|
||||
var $page = $(page);
|
||||
$page.data('oldstyle', $page.attr('style'));
|
||||
|
||||
$page.attr('style', '');
|
||||
});
|
||||
Mozilla.Pager.destroyPagers();
|
||||
}
|
||||
};
|
||||
|
||||
// wire up location select
|
||||
$locationSelect.on('change', function(e) {
|
||||
$locationSelect.on('change', function() {
|
||||
COUNTRY_CODE = $locationSelect.val();
|
||||
selectDevicesAndSetPartnerContent();
|
||||
|
||||
|
|
@ -147,7 +137,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
});
|
||||
|
||||
// wire up thumbnail select
|
||||
$('.device-thumbnails').on('click', '.device-thumbnail', function(e) {
|
||||
$('.device-thumbnails').on('click', '.device-thumbnail', function() {
|
||||
var $this = $(this);
|
||||
|
||||
selectedDevice = $this.attr('href').replace(/#/gi, '');
|
||||
|
|
@ -210,7 +200,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
try {
|
||||
COUNTRY_CODE = geoip_country_code().toLowerCase();
|
||||
} catch (e) {
|
||||
COUNTRY_CODE = "";
|
||||
COUNTRY_CODE = '';
|
||||
}
|
||||
|
||||
if (COUNTRY_CODE !== '' && Mozilla.FxOs.Countries.hasOwnProperty(COUNTRY_CODE)) {
|
||||
|
|
@ -224,8 +214,8 @@ if (typeof Mozilla == 'undefined') {
|
|||
var queryIsMobile = matchMedia('(max-width: 480px)');
|
||||
|
||||
setTimeout(function() {
|
||||
if (queryIsMobile.matches) {
|
||||
togglePagers(false);
|
||||
if (!queryIsMobile.matches) {
|
||||
togglePagers(true);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
|
|
@ -264,7 +254,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
});
|
||||
|
||||
// track mozilla pager tab clicks
|
||||
$('.pager-tabs').on('click', 'a', function(e) {
|
||||
$('.pager-tabs').on('click', 'a', function() {
|
||||
gaTrack(['_trackEvent', '/os/devices/ Interactions', selectedDevice + ' Interactions', $(this).data('label') + ' Tab']);
|
||||
});
|
||||
})(window.jQuery);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/* 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';
|
||||
|
||||
// Customize global setting.
|
||||
Mozilla.Pager.AUTO_ROTATE_INTERVAL = 4000;
|
||||
|
||||
var pager3;
|
||||
|
||||
$('#pager3-enable').on('click', function() {
|
||||
if (!pager3) {
|
||||
pager3 = new Mozilla.Pager($('#pager-example3'));
|
||||
}
|
||||
});
|
||||
|
||||
$('#pager3-disable').on('click', function() {
|
||||
if (pager3) {
|
||||
Mozilla.Pager.destroyPagerById(pager3.id);
|
||||
pager3 = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Bind custom next/previous buttons inside document ready
|
||||
// to ensure pager is initialized.
|
||||
$(function() {
|
||||
var pager4 = Mozilla.Pager.findPagerById('pager-example4');
|
||||
|
||||
$('#next').on('click', function() {
|
||||
pager4.nextPageWithAnimation();
|
||||
});
|
||||
|
||||
$('#prev').on('click', function() {
|
||||
pager4.prevPageWithAnimation();
|
||||
});
|
||||
});
|
||||
})(window.jQuery);
|
||||
Загрузка…
Ссылка в новой задаче