diff --git a/bedrock/mozorg/redirects.py b/bedrock/mozorg/redirects.py index b10efe216b8..6316ae6eb4f 100644 --- a/bedrock/mozorg/redirects.py +++ b/bedrock/mozorg/redirects.py @@ -665,4 +665,7 @@ def decider(request, **kwargs): redirect(r'^contribute/signup/?$', 'https://activate.mozilla.community/'), redirect(r'^/contribute/task(/.*)?', 'https://activate.mozilla.community/'), redirect(r'^contribute/friends/?$', 'mozorg.contribute.index'), + + # issue 7435 + redirect(r'^about/history/details/?$', 'mozorg.about.history'), ) diff --git a/bedrock/mozorg/templates/mozorg/about-base-resp.html b/bedrock/mozorg/templates/mozorg/about-base-resp.html deleted file mode 100644 index a1e320415d6..00000000000 --- a/bedrock/mozorg/templates/mozorg/about-base-resp.html +++ /dev/null @@ -1,65 +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/. -#} - -{%- set_lang_files "main" -%} -{% extends "mozorg/base-resp.html" %} - -{% set navigation_bar = [ - (url('mozorg.about'), _('About Mozilla')), - (url('mozorg.mission'), _('Mission')), - (url('mozorg.about.history'), _('History')), - (url('mozorg.about.leadership'), _('Leadership')), - (url('mozorg.about.governance.governance'), _('Governance')), - (url('mozorg.about.forums.forums'), _('Forums')), - (url('mozorg.about.policy.patents.index'), _('Patents')), -] -%} - -{% block page_css %} - {{ css_bundle('about-base-resp') }} -{% endblock %} - -{% block body_attrs %}{{ super() }} data-global-nav-current-link="about-us"{% endblock %} - -{% block content %} - -
- -
-{% block article %}{% endblock %} -
- - - -
- -{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/about-base.html b/bedrock/mozorg/templates/mozorg/about-base.html index 3125daad586..0c859f92dd9 100644 --- a/bedrock/mozorg/templates/mozorg/about-base.html +++ b/bedrock/mozorg/templates/mozorg/about-base.html @@ -6,7 +6,7 @@ {% extends "base-article.html" %} {% set navigation_bar = [ - (url('mozorg.about'), 'about-governance', _('About Mozilla')), + (url('mozorg.about'), 'about-mozilla', _('About Mozilla')), (url('mozorg.mission'), 'about-mission', _('Mission')), (url('mozorg.about.history'), 'about-history', _('History')), (url('mozorg.about.leadership'), 'about-leadership', _('Leadership')), diff --git a/bedrock/mozorg/templates/mozorg/about/history-details.html b/bedrock/mozorg/templates/mozorg/about/history-details.html deleted file mode 100644 index 580dc2e3f76..00000000000 --- a/bedrock/mozorg/templates/mozorg/about/history-details.html +++ /dev/null @@ -1,198 +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/. -#} - -{% add_lang_files "mozorg/about/history-details" "mozorg/about" %} - -{% extends "mozorg/about-base-resp.html" %} - -{% block page_title %}{{ _('History of the Mozilla Project') }}{% endblock %} -{% block body_id %}about-history{% endblock %} -{% block body_class %}sand{% endblock %} - -{% block article %} -

{{ _('History of the Mozilla Project') }}

- -

- {% trans coderush='https://air.mozilla.org/code-rush/', - sourcerelease='http://web.archive.org/web/20021001071727/wp.netscape.com/newsref/pr/newsrelease558.html' - %} - The Mozilla project was created in 1998 - with the release of the Netscape browser - suite source code. - {% endtrans %} - {% trans %} - It was intended to harness the creative power of thousands of - programmers on the Internet and fuel unprecedented levels of - innovation in the browser market. - {% endtrans %} - {% trans firstyear='http://www-archive.mozilla.org/mozilla-at-one.html' %} - Within the first year, new community - members from around the world had already contributed new - functionality, enhanced existing features and became engaged in the - management and planning of the project itself. - {% endtrans %} -

- -

- {% trans stevecase='http://www-archive.mozilla.org/stevecase.html' %} - By creating an open community, the Mozilla project had become - larger than any one company. - {% endtrans %} - {% trans mission='http://www-archive.mozilla.org/mission.html', - browsers='http://www.oreillynet.com/pub/a/mozilla/2002/09/12/mozilla_browsers.html', - bugzilla='http://www.bugzilla.org', - projects=url('firefox') - %} - Community members got involved and expanded the scope of the project’s - original mission — instead of just working - on Netscape’s next browser, people started creating - a variety of browsers, - development tools and a range of other - projects. - {% endtrans %} - {% trans %} - People contributed to Mozilla in different ways, but everyone was - passionate about creating free software that would enable people to - have a choice in how they experienced the Internet. - {% endtrans %} -

- -

- {% trans mozilla1='http://www.mozillazine.org/articles/article2278.html' %} - After several years of development, - Mozilla 1.0, the first major version, was - released in 2002. This version featured many improvements to the - browser, email client and other applications included in the suite, - but not many people were using it. - {% endtrans %} - {% trans over90='http://www.onestat.com/html/aboutus_pressbox4.html' %} - By 2002, well over 90% of Internet users - were browsing with Internet Explorer. - {% endtrans %} - {% trans charter='http://www-archive.mozilla.org/projects/firefox/charter.html' %} - Not many people noticed at the time, - but the first version of Phoenix (later renamed to Firefox) was also - released by Mozilla community members that year with the goal of - providing the best possible browsing experience - to the widest possible set of people. - {% endtrans %} -

- -

- {% trans foundation='https://blog.mozilla.org/press/2003/07/mozilla-org-announces-launch-of-the-mozilla-foundation-to-lead-open-source-browser-efforts/' %} - In 2003, the Mozilla project created the Mozilla Foundation, an - independent non-profit organization - supported by individual donors and a variety of companies. - {% endtrans %} - {% trans manifesto=url('mozorg.about.manifesto') %} - The new Mozilla Foundation continued the role of managing the daily - operations of the project and also officially took on the role of - promoting openness, innovation and opportunity - on the Internet. - {% endtrans %} - {% trans grants=url('grants') %} - It did this by continuing to release software, such as Firefox and - Thunderbird, and expanding to new areas, such as providing - grants to support accessibility - improvements on the Web. - {% endtrans %} -

- -

- {% trans firefox1='https://blog.mozilla.org/press/2004/11/mozilla-foundation-releases-the-highly-anticipated-mozilla-firefox-1-0-web-browser/', - millions='https://blog.mozilla.org/press/2005/10/firefox-surpasses-100-million-downloads/' - %} - Firefox 1.0 was released in 2004 and - became a big success — in less than a year, it was downloaded - over 100 million times. - {% endtrans %} - {% trans %} - New versions of Firefox have come out regularly since then and keep - setting new records. The popularity of Firefox has helped bring choice - back to users. - {% endtrans %} - {% trans innovation='https://blog.mozilla.org/press/2006/12/the-world-economic-forum-announces-technology-pioneers-2007-mozilla-selected/' %} - The renewed competition has - accelerated innovation and improved the - Internet for everyone. - {% endtrans %} -

- -

- {% trans firefoxos='https://support.mozilla.org/products/firefox-os' %} - In 2013, we launched Firefox OS to - unleash the full power of the Web on smartphones and once again offer - control and choice to a new generation of people coming online. - {% endtrans %} -

- -

- {% trans %} - Mozilla also celebrated its 15th anniversary in 2013. - {% endtrans %} - {% trans %} - The community has shown that commercial companies can benefit by - collaborating in open source projects and that great end user products - can be produced as open source software. - {% endtrans %} - {% trans all=firefox_url('desktop', 'all') %} - More people than ever before are using the Internet and are - experiencing it in their own language. - {% endtrans %} - {% trans range='http://www.wikipedia.org', - areas='http://creativecommons.org/' - %} - A sustainable organization has been created that uses market mechanisms - to support a public benefit mission and this model has been reused by - others to create open, transparent and collaborative organizations in - a broad range - of areas. - {% endtrans %} -

- -

- {% trans %} - The future is full of challenges and opportunities equal to those of - our past. - {% endtrans %} - {% trans %} - There’s no guarantee that the Internet will remain open or enjoyable - or safe. - {% endtrans %} - {% trans %} - Mozilla will continue to provide an opportunity for people to make - their voices heard and to shape their own online lives. - {% endtrans %} - {% trans %} - Of course, we’re not alone in doing this. - {% endtrans %} - {% trans %} - The Mozilla community, together with other open source projects and - other public benefit organizations, exists only because of the people - who are engaged in making our common goals a reality. - {% endtrans %} - {% trans contribute=url('mozorg.contribute.index') %} - If you want to join us in our mission, please - get involved. - {% endtrans %} -

- -

- {% trans %} - For more information about Mozilla’s history, see the following: - {% endtrans %} -

- - -{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/about/history.html b/bedrock/mozorg/templates/mozorg/about/history.html index 2eece6f63fc..6ea4e11e5f2 100644 --- a/bedrock/mozorg/templates/mozorg/about/history.html +++ b/bedrock/mozorg/templates/mozorg/about/history.html @@ -2,303 +2,200 @@ # 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/. -#} -{% add_lang_files "mozorg/about/history" "mozorg/about" %} - -{% extends "mozorg/base-resp.html" %} - -{% block page_title %}{{ _('Looking back. Looking ahead.') }}{% endblock %} -{% block body_id %}about-history{% endblock %} -{% block body_class %}sand{% endblock %} -{% block body_attrs %}{{ super() }} data-global-nav-current-link="about-us"{% endblock %} - -{% block page_css %} - {{ css_bundle('history-slides') }} -{% endblock %} - -{% block js %} - {{ js_bundle('history-slides') }} -{% endblock %} - -{% block site_header_logo %}{% endblock %} - -{% block content %} -
-
-

{{ _('Looking back. Looking ahead.') }}

-

- {{ _('Mozilla exists to promote openness, innovation and opportunity on the Internet.') }} -
- {{ _('Take a closer look at who we are, including some of our biggest achievements and milestones.') }} -

-
- -
- -
-
- - -
-
    -
  • - 01 -
    -

    - {% trans %} - The Mozilla Project launched at Netscape on March 31, 1998, to offer choice to users and drive innovation on the Web. - {% endtrans %} -

    -
    - - - -
  • - -
  • - 02 -
    -

    - {% trans %} - Proudly non-profit, Mozilla makes products like Firefox with a mission to keep the power of the Web in the hands of users everywhere. - {% endtrans %} -

    -
    - - - - - -
  • - -
  • - 03 -
    -

    - {# L10N: "The New York Times" is the proper name of an English publication and should not be translated. #} - {% trans %} - More than 10,000 contributors expressed their support for our mission by paying for a full-page ad in The New York Times on the day Firefox 1.0 launched in 2004. - {% endtrans %} -

    -
    - - -
  • - -
  • - 04 -
    -

    - {% trans %} - Today Mozilla has contributors on every continent, including Antarctica (where Firefox is used by 80% of people). - {% endtrans %} -

    -
    - - -
  • - -
  • - 05 -
    -

    - {% if l10n_has_tag('history_nov2014') %} - {% trans %} - Firefox Add-Ons allow you to customize and take control of your Web experience. Nearly 4 billion of them have been downloaded by users so far. - {% endtrans %} - {% else %} - {% trans %} - Firefox Add-Ons allow you to customize and take control of your Web experience. Over 3 billion of them have been downloaded by users so far. - {% endtrans %} - {% endif %} -

    -
    - - - - -
  • - -
  • - 06 -
    -

    - {% trans %} - Mozilla is leading the way in online privacy with browser innovations like Do Not Track and Lightbeam that give users greater control of their personal data. - {% endtrans %} -

    -
    - - -
  • - -
  • - 07 -
    -

    - {% trans %} - Our global community has helped translate Firefox into over 70 languages, making the browser available to more than 90% of the world's population. - {% endtrans %} -

    -
    - - -
  • - -
  • - 08 -
    -

    - {% trans %} - In 2008, 8,002,530 people chose Firefox in a single day to set a Guinness World Record for “Most Downloads of a Software Application in 24 Hours.” - {% endtrans %} -

    -
    - - - -
  • - -
  • - 09 -
    -

    - {% trans %} - The Mozilla Festival is our largest annual event, bringing together hundreds of creative minds to realize the full power and potential of the Web. - {% endtrans %} -

    -
    - - - - -
  • - -
  • - 10 -
    -

    - {% trans %} - Mozilla Webmaker works to create a more Web-literate planet, providing tools and projects to help people take greater control of their online lives. - {% endtrans %} -

    -
    - - - -
  • - -
  • - 11 -
    -

    - {% if l10n_has_tag('history_nov2014') %} - {% trans %} - Firefox for Android brings the Firefox desktop browsing experience to phones and tablets. Available on Google Play, it has been downloaded more than 80 million times. - {% endtrans %} - {% else %} - {% trans %} - Mozilla leads the Open Badges program, an online standard that helps people gain recognition for 21st century skills and unlock new career opportunities. - {% endtrans %} - {% endif %} -

    -
    - - - -
  • - -
  • - 12 -
    -

    - {% trans %} - The Mozilla Developer Network is a community-driven Web resource that provides the best documentation, tutorials and tools available to more than 2 million visitors each month. - {% endtrans %} -

    -
    - - - - - -
  • - -
  • - 13 -
    -

    - {% trans %} - Mozilla works to care for and preserve the Web as a shared public resource for the benefit of everyone. - {% endtrans %} -

    -
    - - -
  • - -
  • - 14 -
    -

    - {% trans %} - In 2013, Mozilla launched Firefox OS to unleash the full power of the Web on smartphones and once again offer control and choice to a new generation of people coming online. - {% endtrans %} -

    -
    - - - - - - -
  • - -
  • - 15 -
    -

    - {% trans %} - The work Mozilla does is made possible thanks to tens of thousands of volunteers who believe the Web should remain open and accessible to all. - {% endtrans %} -

    -
    - - - -
  • - -
-
-
-
- -
-
- {% endblock %} + +{% block newsletter %}{% endblock %} diff --git a/bedrock/mozorg/urls.py b/bedrock/mozorg/urls.py index 806a550135b..c85e17e0931 100644 --- a/bedrock/mozorg/urls.py +++ b/bedrock/mozorg/urls.py @@ -29,7 +29,6 @@ page('developer/browsertest', 'mozorg/browser-test.html'), page('about/partnerships/distribution', 'mozorg/partnerships-distribution.html'), page('about/history', 'mozorg/about/history.html'), - page('about/history/details', 'mozorg/about/history-details.html'), page('about/mozilla-based', 'mozorg/projects/mozilla-based.html'), # Bug 981063, catch all for old calendar urls. # must be here to avoid overriding the above diff --git a/media/css/mozorg/about-base.less b/media/css/mozorg/about-base.less deleted file mode 100644 index 0c4119ebc31..00000000000 --- a/media/css/mozorg/about-base.less +++ /dev/null @@ -1,361 +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/. - -@import "../sandstone/lib.less"; - -#wrapper { - width: 100%; -} - -#masthead, -#main-content, -.billboard { - width: @widthDesktop - (@gridGutterWidth * 2); - margin-left: auto; - margin-right: auto; -} - -#main-content { - .box-shadow(0 0 0 1px #fff inset); - .clearfix; - .open-sans; - background: #fff; - border-bottom: 1px solid #ddd; - display: block; - margin: 100px auto @baseLine; - padding-left: @gridGutterWidth; - padding-right: @gridGutterWidth; - position: relative; - - .title-shadow-box { - margin-right: 490px; - min-height: 80px; - - & + * { - clear: left; - } - } - - .main-column { - .span(8); - } - - .sidebar { - .offset(1); - } - - .content-wrapper { - .clearfix(); - } - - .intro { - .open-sans-light; - .font-size(28px); - line-height: 1.3; - letter-spacing: -.5px; - .span(6); - clear: left; - margin-top: -.25em; - } - - .video { - .span(6); - float: right; - margin-bottom: @baseLine; - - .moz-video-container video { - width: 100%; - height: auto; - margin:0 auto; - } - - p { - margin: 10px 10px @baseLine; - .font-size(.857em); - font-style: italic; - } - - .placeholder-img { - margin-bottom: @baseLine; - } - - .moz-video-button { - background-image: url('/media/img/mozorg/about/poster-i-am.jpg'); - } - } - - ul.links { - clear: right; - .span(6); - - li { - list-style-type: none; - margin-left: 0; - margin-bottom: @baseLine; - padding-bottom: 10px; - background: url('/media/img/mission/thin-stripe.png') center bottom repeat-x; - min-height: @baseLine * 4; - } - - li:last-child { - padding: 0; - background-image: none; - } - - h4 { - margin-bottom: @baseLine / 6; - a:after { - content: " »"; - .open-sans-light; - } - } - - p { - .font-size(.857em); - margin-bottom: @baseLine / 2; - } - } - - li > ul { - margin-bottom: @baseLine; - } - - .sidebar { - margin-top: 20px; - } -} - -html[dir="rtl"] { - #main-content .title-shadow-box { - margin-right: 0; - margin-left: 490px; - } - #main-content .intro { - float: right; - } -} - -// Newsletter form -#newsletter-subscribe { - background: transparent none; - color: @textColorPrimary; - margin-top: 0; - - .form-title { - background: transparent none; - position: relative; - text-align: center; - - h3 { - .font-size(28px); - color: @mozillaRed; - font-weight: bold; - line-height: 1.25; - } - - h4 { - .font-size(18px); - .open-sans; - color: @textColorSecondary; - line-height: 1.25; - } - - &:before { - background: @mozillaRed url('/media/img/newsletter/mozorg-newsletter.svg') center center no-repeat; - .background-size(100px, 100px); - border-radius: 100%; - content: ''; - display: block; - height: 150px; - left: 0; - position: absolute; - top: 0; - width: 150px; - } - } - - a:link, - a:visited { - color: @linkBlue; - } - - a:hover, - a:focus { - color: @linkBlueHover; - } - - input[type='email'] { - border: 1px solid @borderColor; - } - - #newsletter-form-thankyou { - color: @textColorPrimary; - - h3 { - color: @textColorPrimary; - } - } -} - - -/* Tablet Layout: 760px */ -@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) { - - #masthead, - #main-content, - .billboard { - width: @widthTablet - (@gridGutterWidth * 2); - } - - #main-content { - .title-shadow-box { - margin-right: 250px; - } - - .main-column { - .span_narrow(8); - } - - .sidebar { - .offset_narrow(1); - } - - .video { - .span_narrow(6); - margin-bottom: @baseLine; - } - - .intro { - .span_narrow(6); - .font-size(22px); - } - - ul.links { - .span_narrow(6); - h4 { - .font-size(20px); - } - } - - } - - #newsletter-subscribe .form-title { - h3 { - .font-size(24px); - } - - h4 { - .font-size(16px); - } - - &:before { - width: 120px; - height: 120px; - .background-size(80px, 80px); - } - } - - html[dir="rtl"] { - #main-content .title-shadow-box { - margin-right: 0; - margin-left: 250px; - } - } -} - -/* Mobile layout: 320px */ -@media only screen and (max-width: @breakTablet) { - - #masthead, - #main-content, - .billboard { - width: @widthMobile - (@gridGutterWidth * 2); - } - - .billboard { - padding-left: @gridGutterWidth; - padding-right: @gridGutterWidth; - } - - #main-content { - margin-bottom: @baseLine; - - .title-shadow-box { - margin-right: 0; - } - - .main-column, - .sidebar { - .span-all(); - } - - .video { - width: 100%; - margin: 0; - } - - .intro { - width: auto; - .font-size(1.2em); - margin-bottom: @baseLine; - } - - ul.links { - width: auto; - margin-bottom: 0; - li { - min-height: 0; - } - } - } - - #newsletter-subscribe .form-title { - padding-top: 150px; - - &:before { - left: 50%; - top: -20px; - margin-left: -75px; - } - } - - html[dir="rtl"] { - #main-content .title-shadow-box { - margin-left: 0; - } - } -} - -/* Wide mobile layout: 480px; */ -@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) { - - #masthead, - #main-content, - .billboard { - width: @widthMobileLandscape - @gridGutterWidth; - } - - #main-content { - .title-shadow-box { - min-width: 380px; - margin: -25px 0 40px; - } - - .video { - width: 100%; - margin: 0; - } - - .intro { - width: auto; - } - - ul.links { - width: 100%; - margin: 0; - clear: right; - } - - } -} diff --git a/media/css/mozorg/history-slides.less b/media/css/mozorg/history-slides.less deleted file mode 100644 index e57b150bdd9..00000000000 --- a/media/css/mozorg/history-slides.less +++ /dev/null @@ -1,2454 +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/. - -@import "../sandstone/lib.less"; - -/*--------------------------------------------------------------------------*/ -// Reset some template defaults for full-width containers - -#wrapper { - width: 100%; -} - -#masthead, -.billboard, -.page-head { - width: @widthDesktop - (@gridGutterWidth * 2); - margin-left: auto; - margin-right: auto; -} - - - -/*--------------------------------------------------------------------------*/ -// Page head - -.page-head { - margin-top: 48px; - text-align: center; - - .page-title { - .font-size(62px); - } - - .intro { - .font-size(@largeFontSize); - margin: 0 @gridColumnWidth 1.5em; - } -} - - - -/*--------------------------------------------------------------------------*/ -// Links block - -.links { - .clearfix(); - margin: 0; - - li { - .span(4); - list-style-type: none; - margin-bottom: @baseLine; - padding-bottom: 10px; - background: url('/media/img/mission/thin-stripe.png') center bottom repeat-x; - min-height: 7em; - - &:nth-last-child(-n+3) { - background: none; - margin-bottom: 0; - padding-bottom: 0; - } - } - - h4 { - .font-size(24px); - - a:after { - content: " »"; - white-space: nowrap; - } - } - - p { - margin-bottom: @baseLine / 2; - } -} - - - -/*--------------------------------------------------------------------------*/ -// @Slide show - -#slideshow-stage { - margin-bottom: 40px; -} - -.slide { - .clearfix; - border-top: 1px solid #d8d5d1; - list-style: none; - margin: 0 20px 10px; - padding: 20px 0 0 160px; - - .number { - background: url('/media/img/mozorg/history/numbers.png') no-repeat; - display: block; - float: left; - margin: 0 20px 5px -150px; - opacity: 1; - overflow: hidden; - text-indent: -999em; - } - - .message { - .open-sans-light; - .font-size(18px); - margin: 0; - opacity: 1; - padding: 10px 10px 0; - - } - - .message p { - margin: 0 0 10px; - } -} - -#slideshow.on { - height: 340px; - width: 100%; - margin: 0 auto; - overflow: visible; - position: relative; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - - .slides { - height: 340px; - width: 100%; - list-style: none; - margin: 0 auto; - overflow: hidden; - position: relative; - - .slide { - height: 100%; - width: 100%; - position: absolute; - margin: 0; - padding: 0; - border: 0; - - > * { - position: absolute; - z-index: 10; - } - - > .back { - z-index: 1; - } - } - } -} - -/*--------------------------------------------------------------------------*/ -// Slide controls - -.slide-control { - display: none; -} - -.on .slide-control { - display: block; - width: @widthDesktop - (@gridGutterWidth * 2); - height: 0; - position: absolute; - z-index: 999; - left: 50%; - top: 0; - margin-left: -(@widthDesktop - (@gridGutterWidth * 2))/2; - - .prev, - .next { - position: absolute; - top: 140px; - opacity: .6; - width: 44px; - height: 60px; - border: 0; - background: transparent url('/media/img/mozorg/history/slide-arrows.png') no-repeat; - display: block; - text-indent: -99em; - cursor: pointer; - overflow: hidden; - -webkit-transition: opacity .3s ease-in-out, - left .3s ease-in-out, - right .3s ease-in-out; - transition: opacity .3s ease-in-out, - left .3s ease-in-out, - right .3s ease-in-out; - } - - .prev { - left: -10px; - background-position: 0 0; - - &:hover, - &:focus { - left: -14px; - opacity: 1; - } - } - - .next { - right: -10px; - background-position: 100% 0; - - &:hover, - &:focus { - right: -14px; - opacity: 1; - } - } -} - -// Basic transitions for slide elements -.base-animate-in { - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), - margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), - margin-top 2s cubic-bezier(.6,-0.08,.6,1.08); - transition: opacity 1s cubic-bezier(.86,.01,.86,.87), - margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), - margin-top 2s cubic-bezier(.6,-0.08,.6,1.08); -} - -// animate-out is the same as animate-in, but with a .8s delay on the opacity -.base-animate-out { - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-left 2s cubic-bezier(.6,-0.08,.6,1), - margin-top 2s cubic-bezier(.6,-0.08,.6,1); - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-left 2s cubic-bezier(.6,-0.08,.6,1), - margin-top 2s cubic-bezier(.6,-0.08,.6,1); -} - - - -/*--------------------------------------------------------------------------*/ -// Base styles for all slides - -.on { - .number, - .message, - .block1, - .block2, - .block3 { - display: block; - float: none; - left: 50%; - margin: 0 0 0 2000px; - opacity: 0; - position: absolute; - z-index: 5; - } - - .number { - text-indent: -999em; - overflow: hidden; - } - - .message { - color: #fff; - .open-sans-light; - .font-size(24px); - line-height: 1.15; - font-style: italic; - letter-spacing: -.025px; - text-shadow: 0 1px 1px rgba(0,0,0,.1); - } - - .message p { - opacity: 0; - .transition(opacity .3s ease-in 0s); - } - - .message cite { - font-style: normal; - } - - .back { - background-repeat: repeat-x; - display: block; - height: 100%; - width: 100%; - left: 0; - top: 0; - opacity: 0; - } -} - -// Base fixes for locales -[lang='km'] .on .message { - line-height: 1.4; -} - -// Slides going from 'ready' to 'in' -.on .animate-in { - .number, - .message, - .block1, - .block2, - .block3 { - .base-animate-in; - opacity: 1; - } - - .message p { - .transition(opacity .3s ease-in 1.6s); - opacity: 1; - } - - .back { - opacity: 1; - -webkit-transition: opacity 1.5s linear, - background-position 2.6s ease-in-out; - transition: opacity 1.5s linear, - background-position 2.6s ease-in-out; - } -} - - -// Slides going from 'in' to 'out' -.on .animate-out { - .number, - .message, - .block1, - .block2, - .block3 { - .base-animate-out; - opacity: 0; - } - - .message p { - .transition(opacity .3s ease-in 1.6s); - opacity: 0; - } - - .back { - opacity: 0; - -webkit-transition: opacity 1.5s linear, - background-position 2.6s ease-in-out; - transition: opacity 1.5s linear, - background-position 2.6s ease-in-out; - } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @01 - Launch - -#fact01 .number { - width: 139px; - height: 125px; - background-position: 0 0; -} - -.on #fact01 { - .number, - .message, - .block1, - .block2 { - background: url('/media/img/mozorg/history/fact01-pads.png') no-repeat; - } - - .number { - width: 145px; - height: 125px; - top: 99px; - background-position: 0 0; - margin-left: 1100px; - } - - .message { - width: 380px; - height: 224px; - padding: 62px 40px 0 28px; - border: 0; - top: 18px; - background-position: -150px 0; - margin-left: 1800px; - } - - .block1 { - width: 226px; - height: 270px; - border: 0; - top: 61px; - background-position: -610px 0; - margin-left: 2900px; - } - - .block2 { - background-position: -840px 0; - border: 0; - height: 256px; - width: 98px; - margin-left: 3800px; - top: 61px; - } - - &.animate-in { - .number { - margin-left: -460px; - } - - .message { - margin-left: -320px; - } - - .block1 { - margin-left: 124px; - } - - .block2 { - margin-left: 351px; - } - } - - &.animate-out { - .number { - margin-left: -3800px; - } - - .message { - margin-left: -2900px; - } - - .block1 { - margin-left: -1800px; - } - - .block2 { - margin-left: -1100px; - } - } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @02 - Firefox - -#fact02 .number { - background-position: -139px 0; - height: 107px; - width: 115px; - margin-left: -135px; -} - -.on #fact02 { - .number, - .message, - .block1, - .block2, - .block3 { - background: url('/media/img/mozorg/history/fact02-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 102px; - width: 114px; - margin-left: 1990px; - margin-top: 90px; - top: 184px; - } - - .message { - background-position: -151px 0; - height: 200px; - width: 363px; - margin-left: 1750px; - padding: 60px 105px 20px 35px; - top: 41px; - } - - .block1 { - background-position: 0 -102px; - height: 75px; - width: 151px; - margin-left: 2140px; - margin-top: -90px; - top: 113px; - } - - .block2 { - background-position: -654px 0; - height: 83px; - width: 230px; - margin-left: 2640px; - top: 47px; - } - - .block3 { - background-position: -654px -83px; - height: 185px; - width: 230px; - margin-left: 2880px; - margin-top: 120px; - top: 126px; - } - - .logo { - .at2x('/media/img/logos/firefox/logo-quantum.png', 132px, 132px); - .transition(opacity .25s ease-in); - background-color: transparent; - background-repeat: no-repeat; - background-size: 132px; - display: block; - height: 152px; - width: 132px; - margin-left: -446px; - opacity: 0; - position: absolute; - top: -250px; - left: 50%; - z-index: 10; - } - - &.animate-in { - .number { - margin-left: -412px; - margin-top: 0; - } - - .message { - margin-left: -290px; - } - - .block1 { - margin-left: -457px; - margin-top: 0; - } - - .block2 { - margin-left: 216px; - } - - .block3 { - margin-left: 216px; - margin-top: 0; - } - - .logo { - .animation(fact02-logo-in 1.5s 1.8s forwards); - .transition(opacity .25s ease-in 1.5s); - opacity: 1; - top: -150px; - } - } - - &.animate-out { - .number { - margin-left: -3000px; - } - - .message { - margin-left: -2500px; - } - - .block1 { - margin-left: -2000px; - margin-top: 0; - } - - .block2 { - margin-left: -1850px; - } - - .block3 { - margin-left: -1500px; - } - - .logo { - .animation(fact02-logo-out 1s .4s forwards); - .transition(opacity .25s ease-in .6s); - opacity: 0; - top: 41px; - } - } -} - -// Fact @02 Fixes for specific locales -[lang^='en'] .on #fact02 .message { - padding: 80px 105px 0 35px; -} - -[lang='ro'] .on #fact02 .message { - padding: 45px 105px 35px 35px; -} - -[lang='ru'] .on #fact02 .message { - padding: 25px 105px 55px 35px; -} - -[lang='ta'] .on #fact02 .message { - padding: 35px 105px 45px 35px; -} - -@-webkit-keyframes fact02-logo-in { - 0% { top: -250px; } - 30% { top: 50px; } - 40% { top: 30px; } - 50% { top: 41px; } - 100% { top: 41px; } -} - -@keyframes fact02-logo-in { - 0% { top: -250px; } - 30% { top: 50px; } - 40% { top: 30px; } - 50% { top: 41px; } - 100% { top: 41px; } -} - -@-webkit-keyframes fact02-logo-out { - 0% { top: 41px; } - 10% { top: 30px; } - 20% { top: 50px; } - 70%, - 100% { top: 400px; } -} - -@keyframes fact02-logo-out { - 0% { top: 41px; } - 10% { top: 30px; } - 20% { top: 50px; } - 70%, - 100% { top: 400px; } -} - -/*--------------------------------------------------------------------------*/ -// Fact @03 - NY Times -#fact03 .number { - background-position: -253px 0; - height: 127px; - width: 115px; - margin-left: -128px; -} - -.on #fact03 { - .number, - .message, - .block1 { - background: url('/media/img/mozorg/history/fact03-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 129px; - width: 119px; - margin-left: 1500px; - top: 140px; - } - - .message { - background-position: -120px 0; - height: 242px; - width: 440px; - margin-left: 2000px; - padding: 40px 55px 0 35px; - top: 35px; - } - - .block1 { - background-position: -652px 0; - height: 228px; - width: 208px; - margin-left: 2500px; - margin-top: 50px; - top: 22px; - } - - &.animate-in { - .number { - margin-left: -445px; - } - .message { - margin-left: -297px; - } - .block1 { - margin-left: 234px; - margin-top: 0; - } - } - - &.animate-out { - .number { - margin-left: -4000px; - } - .message { - margin-left: -3000px; - } - .block1 { - margin-left: -2000px; - margin-top: 90px; - } - } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @04 - Global community -#fact04 .number { - background-position: -368px 0; - height: 143px; - width: 98px; - margin-left: -135px; -} - -.on #fact04 { - .number, - .message, - .block1 { - background: url('/media/img/mozorg/history/fact04-pads.png') no-repeat; - } - - .number { - width: 98px; - height: 176px; - background-position: 0 0; - top: 78px; - margin-left: 1500px; - margin-top: 60px; - } - - .message { - height: 228px; - width: 403px; - padding: 35px 40px 0 40px; - background-position: -98px 0; - top: 28px; - margin-left: 2000px; - margin-top: 60px; - } - - .block1 { - width: 284px; - height: 291px; - background-position: -582px 0; - top: 15px; - margin-left: 2500px; - margin-top: 60px; - } - - &.animate-in { - .number { - margin-left: -457px; - margin-top: 0; - } - - .message { - margin-left: -322px; - margin-top: 0; - -webkit-transition-delay: .1s; - transition-delay: .1s; - } - - .block1 { - margin-left: 167px; - margin-top: 0; - -webkit-transition-delay: .2s; - transition-delay: .2s; - } - } - - &.animate-out { - .number { - margin-left: -4500px; - margin-top: 60px; - } - .message { - margin-left: -3000px; - margin-top: 60px; - } - .block1 { - margin-left: -2000px; - margin-top: 60px; - } - } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @05 - Addons -#fact05 .number { - background-position: -466px 0; - height: 102px; - width: 97px; - margin-left: -120px; -} - -.on #fact05 { - .number, - .message, - .block1, - .block2, - .block3 { - background: url('/media/img/mozorg/history/fact05-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 103px; - width: 96px; - margin-left: 1020px; - margin-top: -40px; - top: 87px; - } - - .message { - background-position: -96px 0; - height: 237px; - width: 398px; - margin-left: 1500px; - padding: 30px 40px 0 40px; - top: 46px; - } - - .block1 { - background-position: -574px 0; - height: 95px; - width: 316px; - margin-left: 2300px; - margin-top: -40px; - top: 30px; - } - - .block2 { - background-position: -574px -95px; - height: 105px; - width: 316px; - margin-left: 2800px; - top: 122px; - } - - .block3 { - background-position: -574px -200px; - height: 95px; - width: 316px; - margin-left: 3300px; - margin-top: 40px; - top: 223px; - } - - &.animate-in { - .number { - margin-top: 0; - margin-left: -461px; - } - - .message { - margin-left: -352px; - } - - .block1 { - .transition-delay(.3s); - margin-left: 134px; - margin-top: 0; - } - - .block2 { - .transition-delay(.4s); - margin-left: 134px; - } - - .block3 { - .transition-delay(.5s); - margin-left: 134px; - margin-top: 0; - } - } - - &.animate-out { - .number { - margin-left: -1840px; - } - - .message { - margin-left: -2280px; - } - - .block1 { - margin-left: -1205px; - } - - .block2 { - margin-left: -1405px; - } - - .block3 { - margin-left: -1605px; - } - } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @06 - Privacy - -#fact06 .number { - background-position: -563px 0; - height: 116px; - width: 149px; - margin-left: -162px; -} - -.on #fact06 { - .number, - .message, - .block1, - .keyhole { - background: url('/media/img/mozorg/history/fact06-pads.png') no-repeat; - } - - .number { - width: 178px; - height: 115px; - background-position: 0 0; - top: 110px; - margin-left: 1000px; - - .keyhole { - .transform(rotateY(90deg)); - .transform-style(preserve-3d); - background-color: #000; - background-image: url('/media/img/mozorg/history/fact06-pads.png'), url('/media/img/mozorg/history/fact06-pads.png'); - background-position: 0 -117px, -86px -117px; - display: block; - height: 56px; - width: 46px; - position: absolute; - top: 25px; - left: 108px; - z-index: 8; - } - } - - .message { - background-position: -179px 0; - height: 240px; - margin-left: 1700px; - padding: 40px 130px 0 50px; - top: 35px; - width: 349px; - } - - .block1 { - background-position: -707px 0; - height: 248px; - margin-left: 2800px; - top: 55px; - width: 193px; - } - - &.animate-in { - .number { - margin-left: -462px; - margin-top: 0; - - .keyhole { - .transform(rotateY(0deg)); - .transform-style(preserve-3d); - -webkit-transition: transform 0.4s ease-in-out 2.6s, - background-position 1s ease-in-out 0.5s; - transition: transform 0.4s ease-in-out 2.6s, - background-position 1s ease-in-out 0.5s; - } - - .keyhole:hover { - .transition(background-position .6s ease-in-out 2s); - background-position: 0 -117px, -86px -175px; - } - } - - .message { - margin-left: -270px; - } - - .block1 { - margin-left: 268px; - } - } - - &.animate-out { - .number { - margin-left: -3200px; - - .keyhole { - .transform(rotateY(0deg)); - } - } - - .message { - margin-left: -2600px; - } - - .block1 { - margin-left: -1800px; - } - } -} - -// Fact @06 Fixes for specific locales -[lang='lt'] .on #fact06 .message, -[lang='pl'] .on #fact06 .message, -[lang='sr'] .on #fact06 .message, -[lang='uk'] .on #fact06 .message, -[lang='uz'] .on #fact06 .message { - padding: 25px 130px 15px 50px; -} - -[lang='ro'] .on #fact06 .message { - padding: 15px 130px 25px 50px; -} - - -/*--------------------------------------------------------------------------*/ -// Fact @07 - l10n - -#fact07 .number { - width: 124px; - height: 143px; - background-position: 0 -138px; - margin-left: -142px; -} - -.on #fact07 { - .number, - .message, - .block1 { - background: url('/media/img/mozorg/history/fact07-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - top: 138px; - margin-left: 1200px; - } - - .message { - width: 392px; - height: 222px; - padding: 50px 40px 0 40px; - background-position: -124px 0; - top: 32px; - margin-left: 1800px; - } - - .block1 { - width: 319px; - height: 225px; - background-position: -596px 0; - top: 74px; - margin-left: 2200px; - } - - &.animate-in { - .number { - margin-left: -463px; - } - - .message { - margin-left: -333px; - } - - .block1 { - margin-left: 142px; - } - } - - &.animate-out { - .number { - margin-left: -2200px; - } - - .message { - margin-left: -1690px; - } - - .block1 { - margin-left: -1000px; - } - } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @08 - world record - -#fact08 .number { - width: 91px; - height: 118px; - background-position: -138px -143px; - margin-left: -118px; -} - -.on #fact08 { - .number, - .message, - .block1, - .block2 { - background: url('/media/img/mozorg/history/fact08-pads.png') no-repeat; - } - - .number { - background-position: -182px 0; - height: 117px; - margin-left: 1600px; - top: 56px; - width: 90px; - } - - .message { - background-position: -273px 0; - height: 227px; - margin-left: 2200px; - padding: 40px 40px 0 40px; - top: 43px; - width: 378px; - } - - .block1 { - background-position: 0 0; - height: 229px; - margin-left: 3000px; - top: 56px; - width: 182px; - } - - .block2 { - background-position: -730px 0; - height: 160px; - margin-left: 1100px; - top: 141px; - width: 165px; - } - - &.animate-in { - .number { - margin-left: -279px; - } - - .message { - margin-left: -164px; - } - - .block1 { - margin-left: -462px; - } - - .block2 { - margin-left: 295px; - } - } - - &.animate-out { - .number { - margin-left: -2200px; - } - - .message { - margin-left: -1600px; - } - - .block1 { - margin-left: -3000px; - } - - .block2 { - margin-left: -1900px; - } - } -} - -// Fact @08 Fixes for specific locales -[lang='uk'] .on #fact08 .message { - padding: 20px 40px 20px 40px; -} - - -/*--------------------------------------------------------------------------*/ -/* Fact @09 - Mozfest */ -#fact09 .number { - width: 139px; - height: 127px; - background-position: -229px -143px; -} - -.on #fact09 { - .number, - .message, - .block1, - .block2, - .logo, - .logo span { - background: url('/media/img/mozorg/history/fact09-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 125px; - margin-left: 1200px; - top: 55px; - width: 138px; - } - - .message { - background-position: -138px 0; - height: 241px; - margin-left: 1800px; - padding: 40px 40px 0 40px; - top: 25px; - width: 368px; - } - - .block1 { - background-position: -586px 0; - height: 258px; - margin-left: 2200px; - top: 54px; - width: 100px; - } - - .block2 { - background-position: -686px 0; - height: 265px; - margin-left: 2900px; - top: 54px; - width: 172px; - } - - .logo { - background-position: 0 -128px; - display: block; - height: 75px; - left: 50%; - margin-left: 220px; - margin-top: 500px; - opacity: 0; - position: absolute; - top: 202px; - width: 75px; - z-index: 10; - - span { - .animation(fact09-logo-spin 10s linear infinite); - .transform-origin(center center); - background-position: 0 -205px; - content: ''; - display: block; - height: 106px; - left: -15px; - position: absolute; - top: -15px; - width: 106px; - } - } - - &.animate-in { - .number { - margin-left: -454px; - } - - .message { - margin-left: -273px; - } - - .block1 { - margin-left: 188px; - } - - .block2 { - margin-left: 282px; - } - - .logo { - opacity: 1; - margin-top: 0; - -webkit-transition: opacity .5s ease-in 1.5s, - margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s; - transition: opacity .5s ease-in 1.5s, - margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s; - } - } - - &.animate-out { - .number { - margin-left: -3200px; - } - - .message { - margin-left: -2600px; - } - - .block1 { - margin-left: -2000px; - } - - .block2 { - margin-left: -1800px; - } - - .logo { - margin-top: 500px; - -webkit-transition: opacity .5s ease-in .5s, - margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s; - transition: opacity .5s ease-in .5s, - margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s; - } - } -} - -@-webkit-keyframes fact09-logo-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes fact09-logo-spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @10 - Webmaker - -#fact10 .number { - background-position: -368px -143px; - height: 118px; - width: 111px; -} - -.on #fact10 { - .number, - .message, - .block1, - .block2 { - background: url('/media/img/mozorg/history/fact10-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 119px; - margin-left: 1200px; - top: 22px; - width: 112px; - } - - .message { - background-position: -112px 0; - height: 200px; - margin-left: 1800px; - padding: 56px 40px 0 40px; - top: 26px; - width: 398px; - } - - .block1 { - background-position: -590px 0; - height: 150px; - margin-left: 2200px; - top: 40px; - width: 315px; - } - - .block2 { - background-position: -590px -150px; - height: 140px; - margin-left: 3000px; - top: 186px; - width: 315px; - } - - &.animate-in { - .number { - margin-left: -458px; - } - - .message { - margin-left: -342px; - } - - .block1 { - margin-left: 143px; - -webkit-transition-delay: .8s, .2s; - transition-delay: .8s, .2s; - } - - .block2 { - margin-left: 140px; - -webkit-transition-delay: .8s, .4s; - transition-delay: .8s, .4s; - } - } - - &.animate-out { - .number { - margin-left: -3200px; - } - - .message { - margin-left: -2600px; - -webkit-transition-delay: .8s, 0s; - transition-delay: .8s, 0s; - } - - .block1 { - margin-left: -2000px; - -webkit-transition-delay: .8s, 0s; - transition-delay: .8s, 0s; - } - - .block2 { - margin-left: -1800px; - -webkit-transition-delay: .8s, 0s; - transition-delay: .8s, 0s; - } - } -} - -// Fact @10 Fixes for specific locales -[lang='bg'] .on #fact10 .message, -[lang^='es'] .on #fact10 .message, -[lang='it'] .on #fact10 .message, -[lang='uk'] .on #fact10 .message { - padding: 30px 40px 26px 40px; -} - -[lang='ta'] .on #fact10 .message { - padding: 16px 40px 40px 40px; -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @11 - Open badges - -#fact11 .number { - background-position: -479px -143px; - height: 141px; - margin-left: -141px; - width: 124px; -} - -.on #fact11 { - .number, - .message, - .block1, - .droid { - background: url('/media/img/mozorg/history/fact11-pads.png') no-repeat; - } - - .number { - .transition-duration(2s); - background-position: 0 0; - height: 141px; - margin-left: 2200px; - top: 85px; - width: 124px; - } - - .message { - .transition-duration(2s); - background-position: -124px 0; - height: 228px; - margin-left: 3000px; - padding: 40px 40px 0 40px; - top: 48px; - width: 434px; - } - - .block1 { - width: 210px; - height: 225px; - background-position: -638px 0; - top: 22px; - margin-top: 90px; - margin-left: 4000px; - } - - .droid { - background-position: 0 -141px; - display: block; - height: 164px; - left: 50%; - margin-left: -2200px; - opacity: 0; - position: absolute; - top: 55px; - width: 124px; - z-index: 15; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), - margin-left 2s cubic-bezier(.6,-0.08,.6,1); - transition: opacity 1s cubic-bezier(.86,.01,.86,.87), - margin-left 2s cubic-bezier(.6,-0.08,.6,1); - } - - &.animate-in { - .number { - margin-left: -455px; - } - - .message { - margin-left: -302px; - } - - .block1 { - margin-left: 220px; - margin-top: 0; - } - - .droid { - .animation(fact11-droid-in 2s forwards 1s); - .transition(opacity 1s cubic-bezier(.86,.01,.86,.87)); - opacity: 1; - } - } - - &.animate-out { - .number { - margin-left: -3200px; - } - - .message { - margin-left: -2690px; - } - - .block1 { - margin-left: -2000px; - margin-top: -60px; - } - - .droid { - .animation(fact11-droid-out 1s forwards); - .transition(opacity 1s cubic-bezier(.86,.01,.86,.87)); - opacity: 0; - } - } -} - -@-webkit-keyframes fact11-droid-in { - 0% { margin-left: -2000px; } - 100% { margin-left: 268px; } -} - -@keyframes fact11-droid-in { - 0% { margin-left: -2000px; } - 100% { margin-left: 268px; } -} - -@-webkit-keyframes fact11-droid-out { - 0% { margin-left: 268px; } - 100% { margin-left: 2000px; } -} - -@keyframes fact11-droid-out { - 0% { margin-left: 268px; } - 100% { margin-left: 2000px; } -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @12 - MDN - -#fact12 .number { - width: 138px; - height: 127px; - background-position: -604px -143px; -} - -.on #fact12 { - .number, - .message, - .block1, - .block2, - .stars, - .rocket { - background: url('/media/img/mozorg/history/fact12-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 126px; - margin-left: 1200px; - top: 33px; - width: 139px; - } - - .message { - background-position: -445px 0; - height: 242px; - margin-left: 1800px; - padding: 40px 40px 0 40px; - top: 41px; - width: 393px; - } - - .block1 { - background-position: -139px 0; - height: 235px; - margin-left: 2500px; - top: 86px; - width: 108px; - } - - .block2 { - background-position: -247px 0; - height: 232px; - margin-left: 2000px; - top: 94px; - width: 186px; - } - - .stars { - background-position: -222px -251px; - display: block; - height: 248px; - left: 50%; - margin-left: 2250px; - opacity: 0; - position: absolute; - top: 97px; - width: 223px; - z-index: 10; - } - - .rocket { - .transition-duration(0s); - background-position: 0 -235px; - display: block; - height: 139px; - left: 50%; - margin-left: -1900px; - margin-top: 500px; - opacity: 0; - position: absolute; - top: 166px; - width: 222px; - z-index: 11; - } - - &.animate-in { - .number { - margin-left: -461px; - } - - .message { - margin-left: -13px; - } - - .block1 { - margin-left: -322px; - } - - .block2 { - margin-left: -218px; - } - - .stars { - .animation(fact12-stars-spin 90s linear infinite); - .transform-origin(center center); - margin-left: -295px; - opacity: 1; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s; - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s; - } - - .rocket { - .animation(fact12-rocket-in 1.2s .8s forwards); - .transition(opacity 1s cubic-bezier(.86,.01,.86,.87) .8s); - opacity: 1; - } - } - - &.animate-out { - .number { - margin-left: -3000px; - } - - .message { - margin-left: -2500px; - } - - .block1 { - margin-left: -2000px; - } - - .block2 { - margin-left: -1500px; - } - - .stars { - .animation(fact12-stars-spin 90s linear); - margin-left: -1200px; - opacity: 0; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s; - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s; - } - - .rocket { - .animation(fact12-rocket-out 1.4s 0s forwards); - .transition(opacity 1s cubic-bezier(.86,.01,.86,.87) 1s); - opacity: 0; - } - } -} - -@-webkit-keyframes fact12-stars-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes fact12-stars-spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -@-webkit-keyframes fact12-rocket-in { - 0% { - margin-left: -2600px; - margin-top: 700px; - } - - 100% { - margin-left: -287px; - margin-top: 0; - } -} - -@keyframes fact12-rocket-in { - 0% { - margin-left: -2600px; - margin-top: 700px; - } - - 100% { - margin-left: -287px; - margin-top: 0; - } -} - -@-webkit-keyframes fact12-rocket-out { - 0% { - margin-left: -287px; - margin-top: 0; - } - - 100% { - margin-left: 1200px; - margin-top: -600px; - } -} - -@keyframes fact12-rocket-out { - 0% { - margin-left: -287px; - margin-top: 0; - } - - 100% { - margin-left: 1200px; - margin-top: -600px; - } -} - - -/*--------------------------------------------------------------------------*/ -// Fact @13 - <3 the web - -#fact13 .number { - background-position: 0 -287px; - height: 108px; - width: 110px; -} - -.on #fact13 { - .number, - .message, - .block1 { - background: url('/media/img/mozorg/history/fact13-pads.png') no-repeat; - } - - .number { - background-position: 0 0; - height: 108px; - margin-left: 1200px; - top: 118px; - width: 109px; - } - - .message { - background-position: -109px 0; - height: 178px; - margin-left: 1800px; - padding: 55px 40px 0 40px; - top: 42px; - width: 319px; - } - - .block1 { - background-position: -508px 0; - height: 282px; - margin-left: 2200px; - top: 32px; - width: 197px; - } - - &.animate-in { - .number { - margin-left: -381px; - } - - .message { - margin-left: -240px; - } - - .block1 { - .transition-delay(.1s); - margin-left: 167px; - } - } - - &.animate-out { - .number { - margin-left: -2200px; - } - - .message { - margin-left: -1690px; - } - - .block1 { - margin-left: -1000px; - } - } -} - -// Fact @13 Fixes for specific locales -[lang='pl'] .on #fact13 .message, -[lang='uz'] .on #fact13 .message { - padding: 30px 40px 25px 40px; -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @14 - Firefox OS - -#fact14 .number { - background-position: -110px -287px; - height: 106px; - margin-left: -122px; - width: 97px; -} - -.on #fact14 { - .number, - .message, - .block1, - .block2, - .shadow, - .phone, - .fox { - background: url('/media/img/mozorg/history/fact14-pads.png') no-repeat; - } - - .shadow, - .phone, - .fox { - display: block; - left: 50%; - position: absolute; - } - - .number { - background-position: 0 0; - height: 106px; - margin-left: 1200px; - top: 214px; - width: 97px; - } - - .message { - background-position: -97px 0; - height: 232px; - margin-left: 1800px; - padding: 30px 50px 0 30px; - top: 36px; - width: 375px; - } - - .message p { - padding-right: 30px; - } - - .block1 { - background-position: -552px 0; - height: 204px; - margin-left: 2200px; - margin-top: 90px; - top: 85px; - width: 167px; - } - - .block2 { - .transition-delay(0s); - background-position: -288px -261px; - height: 303px; - margin-left: 2305px; - top: 23px; - width: 466px; - } - - .shadow { - background-position: -130px -261px; - height: 13px; - margin-left: 191px; - margin-top: 300px; - opacity: 0; - top: 295px; - width: 145px; - z-index: 9; - } - - .phone { - .transition-delay(.5s); - .transition-duration(1s); - background-position: 0 -261px; - height: 245px; - margin-left: 199px; - margin-top: -500px; - opacity: 0; - top: 62px; - width: 130px; - z-index: 10; - } - - .fox { - .transition-delay(0s); - background-position: -130px -274px; - height: 215px; - margin-left: 2600px; - opacity: 0; - top: 117px; - width: 158px; - z-index: 11; - } - - &.animate-in { - .number { - margin-left: -468px; - } - - .message { - margin-left: -368px; - } - - .block1 { - .transition-delay(.1s); - margin-left: 90px; - margin-top: 0; - } - - .block2 { - .transition-delay(.15s); - margin-left: 4px; - } - - .shadow { - margin-top: 0; - opacity: 1; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top 1s ease-out 1.4s; - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top 1s ease-out 1.4s; - } - - .phone { - margin-top: 0; - opacity: 1; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top 1s ease-out 1.4s; - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top 1s ease-out 1.4s; - } - - .fox { - .base-animate-in; - .transition-delay(.15s); - margin-left: 299px; - margin-top: 0; - opacity: 1; - } - } - - &.animate-out { - .number { - margin-left: -3600px; - margin-top: -90px; - } - - .message { - margin-left: -3200px; - } - - .block1 { - margin-left: -2900px; - margin-top: 60px; - } - - .block2 { - margin-left: -2500px; - } - - .shadow { - margin-top: 500px; - opacity: 0; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top .7s ease-in 0s; - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top .7s ease-in 0s; - } - - .phone { - margin-top: -500px; - opacity: 0; - -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top .7s ease-in 0s; - transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, - margin-top .7s ease-in 0s; - } - - .fox { - .base-animate-out; - margin-left: -2201px; - opacity: 0; - } - } -} - -// Fact @14 Fixes for specific locales -[lang='ru'] .on #fact14 .message, -[lang='sq'] .on #fact14 .message, -[lang='ta'] .on #fact14 .message, -[lang='uk'] .on #fact14 .message { - padding: 20px 50px 10px 30px; -} - -[lang^='en'] .on #fact14 .message p { - padding-right: 0; -} - - - -/*--------------------------------------------------------------------------*/ -// Fact @15 - Thank you - -#fact15 .number { - background-position: -207px -287px; - height: 142px; - width: 130px; -} - -.on #fact15 { - .number, - .message, - .block1, - .block2 { - background-image: url('/media/img/mozorg/history/fact15-pads.png'); - } - - .number { - background-position: 0 0; - height: 139px; - margin-left: 1200px; - margin-top: -100px; - top: 65px; - width: 132px; - } - - .message { - background-position: -132px 0; - height: 260px; - margin-left: 1800px; - margin-top: 200px; - padding: 40px 40px 0 40px; - top: 29px; - width: 370px; - } - - .block1 { - background-position: -582px 0; - height: 194px; - margin-left: 2200px; - margin-top: -200px; - top: 4px; - width: 312px; - } - - .block2 { - background-position: -582px -195px; - height: 138px; - margin-left: 2000px; - margin-top: 50px; - top: 198px; - width: 312px; - } - - &.animate-in { - .number { - margin-left: -458px; - margin-top: 0; - } - - .message { - margin-left: -322px; - margin-top: 0; - } - - .block1 { - margin-left: 129px; - margin-top: 0; - } - - .block2 { - margin-left: 129px; - margin-top: 0; - } - } - - &.animate-out { - .number { - margin-left: -2200px; - } - - .message { - margin-left: -1690px; - } - - .block1 { - margin-left: -1000px; - } - - .block2 { - margin-left: -1400px; - } - } -} - -// Fact @15 Fixes for specific locales -[lang='ta'] .on #fact15 .message { - padding: 10px 40px 30px 40px; -} - - - -/*--------------------------------------------------------------------------*/ -// Change/move @background path for each slide -.on { - #fact01 .back, - #fact06 .back, - #fact11 .back { - background-image: url('/media/img/mozorg/history/path-red.png'); - background-position: 0 50%; - } - - #fact01.animate-in .back, - #fact06.animate-in .back, - #fact11.animate-in .back { - background-position: -200px 50%; - } - - #fact01.animate-out .back, - #fact06.animate-out .back, - #fact11.animate-out .back { - background-position: -400px 50%; - } - - #fact02 .back, - #fact07 .back, - #fact12 .back { - background-image: url('/media/img/mozorg/history/path-darkblue.png'); - background-position: -200px 50%; - } - - #fact02.animate-in .back, - #fact07.animate-in .back, - #fact12.animate-in .back { - background-position: -400px 50%; - } - - #fact02.animate-out .back, - #fact07.animate-out .back, - #fact12.animate-out .back { - background-position: -600px 50%; - } - - #fact03 .back, - #fact08 .back, - #fact13 .back { - background-image: url('/media/img/mozorg/history/path-green.png'); - background-position: -400px 50%; - } - - #fact03.animate-in .back, - #fact08.animate-in .back, - #fact13.animate-in .back { - background-position: -600px 50%; - } - - #fact03.animate-out .back, - #fact08.animate-out .back, - #fact13.animate-out .back { - background-position: -800px 50%; - } - - #fact04 .back, - #fact09 .back, - #fact14 .back { - background-image: url('/media/img/mozorg/history/path-lightblue.png'); - background-position: -600px 50%; - } - - #fact04.animate-in .back, - #fact09.animate-in .back, - #fact14.animate-in .back { - background-position: -800px 50%; - } - - #fact04.animate-out .back, - #fact09.animate-out .back, - #fact14.animate-out .back { - background-position: -1000px 50%; - } - - #fact05 .back, - #fact10 .back, - #fact15 .back { - background-image: url('/media/img/mozorg/history/path-orange.png'); - background-position: -800px 50%; - } - - #fact05.animate-in .back, - #fact10.animate-in .back, - #fact15.animate-in .back { - background-position: -1000px 50%; - } - - #fact05.animate-out .back, - #fact10.animate-out .back, - #fact15.animate-out .back { - background-position: -1200px 50%; - } -} - - - -/*--------------------------------------------------------------------------*/ -// @Tablet Layout: 760px - -@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) { - - #masthead, - .billboard, - #history-slides, - .page-head { - width: @widthTablet - (@gridGutterWidth * 2); - margin-left: auto; - margin-right: auto; - } - - .page-head .page-title { - .font-size(48px); - } - - .page-head .intro { - margin: 0 auto 1.5em; - } - - .links li { - .span_narrow(4); - min-height: 8em; - margin-bottom: @baseLine; - - h4 { - .font-size(20px); - } - } - -} - - - -/*--------------------------------------------------------------------------*/ -// @Mobile Layout: 320px - -@media only screen and (max-width: @breakTablet) { - - #masthead, - .billboard, - #history-slides, - .page-head { - width: @widthMobile; - margin-left: auto; - margin-right: auto; - } - - .page-head .page-title { - .font-size(32px); - } - - .page-head .intro { - margin: 0 0 1.5em; - } - - .links li { - width: auto; - float: none; - margin: 0 10px 1em; - min-height: 0; - - &:nth-last-child(-n+3) { - margin-bottom: @baseLine; - padding-bottom: 10px; - background: url('/media/img/mission/thin-stripe.png') center bottom repeat-x; - } - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - background: none; - } - } - -} - - - -/*--------------------------------------------------------------------------*/ -// Minimal slide styling for small viewports; just fancy numbers - -@media only screen and (max-width: @breakMobileLandscape) { - - #slideshow { - .slide { - padding: 10px 0; - - .number { - background: #ccc none; - border-radius: 25%; - box-shadow: 0 5px 0 rgba(0,0,0,.08); - color: #fff; - .font-size(26px); - font-weight: bold; - height: auto; - margin: 10px 15px 5px 0; - padding: 5px 12px; - text-align: center; - text-indent: 0; - width: auto; - } - } - - #fact01, - #fact06, - #fact11 { - .number { - background-color: #bf383e; /* red */ - } - } - - #fact02, - #fact07, - #fact12 { - .number { - background-color: #1362ae; /* dark blue */ - } - } - - #fact03, - #fact08, - #fact13 { - .number { - background-color: #86bb36; /* green */ - } - } - - #fact04, - #fact09, - #fact14 { - .number { - background-color: #54a3dd; /* light blue */ - } - } - - #fact05, - #fact10, - #fact15 { - .number { - background-color: #e26c33; /* orange */ - } - } - } - -} - - - -/*--------------------------------------------------------------------------*/ -// Wide @Mobile Layout: 480px - -@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) { - - #masthead, - .billboard, - #history-slides, - .page-head { - width: @widthMobileLandscape; - margin-left: auto; - margin-right: auto; - } - - .page-head .page-title { - .font-size(36px); - } - -} diff --git a/media/img/mozorg/history/fact01-pads.png b/media/img/mozorg/history/fact01-pads.png deleted file mode 100644 index ae7141f5d24..00000000000 Binary files a/media/img/mozorg/history/fact01-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact02-pads.png b/media/img/mozorg/history/fact02-pads.png deleted file mode 100644 index 593659f0d33..00000000000 Binary files a/media/img/mozorg/history/fact02-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact03-pads.png b/media/img/mozorg/history/fact03-pads.png deleted file mode 100644 index 44a19f3e4c8..00000000000 Binary files a/media/img/mozorg/history/fact03-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact04-pads.png b/media/img/mozorg/history/fact04-pads.png deleted file mode 100644 index ff63c676ca0..00000000000 Binary files a/media/img/mozorg/history/fact04-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact05-pads.png b/media/img/mozorg/history/fact05-pads.png deleted file mode 100644 index 9517f2b779c..00000000000 Binary files a/media/img/mozorg/history/fact05-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact06-pads.png b/media/img/mozorg/history/fact06-pads.png deleted file mode 100644 index 117a3e4b8ad..00000000000 Binary files a/media/img/mozorg/history/fact06-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact07-pads.png b/media/img/mozorg/history/fact07-pads.png deleted file mode 100644 index b1fac4dd11d..00000000000 Binary files a/media/img/mozorg/history/fact07-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact08-pads.png b/media/img/mozorg/history/fact08-pads.png deleted file mode 100644 index db6e39136f2..00000000000 Binary files a/media/img/mozorg/history/fact08-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact09-pads.png b/media/img/mozorg/history/fact09-pads.png deleted file mode 100644 index 17d307438fb..00000000000 Binary files a/media/img/mozorg/history/fact09-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact10-pads.png b/media/img/mozorg/history/fact10-pads.png deleted file mode 100644 index 32c4e5c8a87..00000000000 Binary files a/media/img/mozorg/history/fact10-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact11-pads.png b/media/img/mozorg/history/fact11-pads.png deleted file mode 100644 index cb44f99bc8b..00000000000 Binary files a/media/img/mozorg/history/fact11-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact12-pads.png b/media/img/mozorg/history/fact12-pads.png deleted file mode 100644 index bbc1b6f39ab..00000000000 Binary files a/media/img/mozorg/history/fact12-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact13-pads.png b/media/img/mozorg/history/fact13-pads.png deleted file mode 100644 index 099afc05446..00000000000 Binary files a/media/img/mozorg/history/fact13-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact14-pads.png b/media/img/mozorg/history/fact14-pads.png deleted file mode 100644 index 4876210fb28..00000000000 Binary files a/media/img/mozorg/history/fact14-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fact15-pads.png b/media/img/mozorg/history/fact15-pads.png deleted file mode 100644 index 40ff6bff532..00000000000 Binary files a/media/img/mozorg/history/fact15-pads.png and /dev/null differ diff --git a/media/img/mozorg/history/fxlogo.png b/media/img/mozorg/history/fxlogo.png deleted file mode 100644 index df7801daa3c..00000000000 Binary files a/media/img/mozorg/history/fxlogo.png and /dev/null differ diff --git a/media/img/mozorg/history/numbers.png b/media/img/mozorg/history/numbers.png deleted file mode 100644 index 7a8e8493f97..00000000000 Binary files a/media/img/mozorg/history/numbers.png and /dev/null differ diff --git a/media/img/mozorg/history/path-darkblue.png b/media/img/mozorg/history/path-darkblue.png deleted file mode 100644 index 12d7188f5ac..00000000000 Binary files a/media/img/mozorg/history/path-darkblue.png and /dev/null differ diff --git a/media/img/mozorg/history/path-green.png b/media/img/mozorg/history/path-green.png deleted file mode 100644 index a99285c537a..00000000000 Binary files a/media/img/mozorg/history/path-green.png and /dev/null differ diff --git a/media/img/mozorg/history/path-lightblue.png b/media/img/mozorg/history/path-lightblue.png deleted file mode 100644 index 69388e2aee2..00000000000 Binary files a/media/img/mozorg/history/path-lightblue.png and /dev/null differ diff --git a/media/img/mozorg/history/path-orange.png b/media/img/mozorg/history/path-orange.png deleted file mode 100644 index a18306a7d66..00000000000 Binary files a/media/img/mozorg/history/path-orange.png and /dev/null differ diff --git a/media/img/mozorg/history/path-red.png b/media/img/mozorg/history/path-red.png deleted file mode 100644 index 646ee5e1a90..00000000000 Binary files a/media/img/mozorg/history/path-red.png and /dev/null differ diff --git a/media/img/mozorg/history/slide-arrows.png b/media/img/mozorg/history/slide-arrows.png deleted file mode 100644 index 1e6db6145d4..00000000000 Binary files a/media/img/mozorg/history/slide-arrows.png and /dev/null differ diff --git a/media/js/libs/jquery.sequence.js b/media/js/libs/jquery.sequence.js deleted file mode 100644 index 9b1777d3232..00000000000 --- a/media/js/libs/jquery.sequence.js +++ /dev/null @@ -1,1065 +0,0 @@ -/* -Sequence.js (http://www.sequencejs.com) -Version: 0.8.2 Beta -Author: Ian Lunn @IanLunn -Author URL: http://www.ianlunn.co.uk/ -Github: https://github.com/IanLunn/Sequence - -This is a FREE script and is available under a MIT License: -http://www.opensource.org/licenses/mit-license.php - -Sequence.js and its dependencies are (c) Ian Lunn Design 2012 unless otherwise stated. - -Sequence also relies on the following open source scripts: - -- jQuery imagesLoaded 2.1.0 (http://github.com/desandro/imagesloaded) - Paul Irish et al - Available under a MIT License: http://www.opensource.org/licenses/mit-license.php - -- jQuery TouchWipe 1.1.1 (http://www.netcu.de/jquery-touchwipe-iphone-ipad-library) - Andreas Waltl, netCU Internetagentur (http://www.netcu.de) - Available under a MIT License: http://www.opensource.org/licenses/mit-license.php - -- Modernizr 2.6.1 Custom Build (http://modernizr.com/) - Copyright (c) Faruk Ates, Paul Irish, Alex Sexton - Available under the BSD and MIT licenses: www.modernizr.com/license/ -*/ - -(function($) { - function Sequence(element, options, defaults, get) { - var self = this; - self.container = $(element), - self.sequence = self.container.children("ul"); - - try { //is Modernizr.prefixed installed? - Modernizr.prefixed; - if(Modernizr.prefixed === undefined){ - throw "undefined"; - } - } - catch(err) { //if not...get the custom build necessary for Sequence - get.modernizr(); - } - - var prefixes = { //convert JS transition names to CSS names - 'WebkitTransition' : '-webkit-', - 'MozTransition' : '-moz-', - 'OTransition' : '-o-', - 'msTransition' : '-ms-', - 'transition' : '' - }, - transitions = { //convert JS transition names to JS transition end and animation end event names - 'WebkitTransition' : 'webkitTransitionEnd webkitAnimationEnd', - 'MozTransition' : 'transitionend animationend', - 'OTransition' : 'otransitionend oanimationend', - 'msTransition' : 'MSTransitionEnd MSAnimationEnd', - 'transition' : 'transitionend animationend' - }; - - self.prefix = prefixes[Modernizr.prefixed('transition')], //work out the CSS prefix for the browser being used (-webkit- for example) - self.transitionEnd = transitions[Modernizr.prefixed('transition')], //work out the JS transitionEnd name for the browser being used (webkitTransitionEnd webkitAnimationEnd for example) - self.transitionProperties = {}, - self.numberOfFrames = self.sequence.children("li").length, //number of frames (
  • ) Sequence consists of - - self.transitionsSupported = (self.prefix !== undefined) ? true : false, //determine if transitions are supported - self.hasTouch = ("ontouchstart" in window) ? true : false, //determine if this is a touch enabled device - self.active, //determines whether Sequence is animating - self.navigationSkipThresholdActive = false, //when active, navigation is prevented (used to stop very fast navigation) - self.autoPlayTimer, //the timer used for the autoPlay feature - self.isPaused = false, //whether Sequence is paused via being hovered over - self.isHardPaused = false, //whether Sequence is paused via a pause button - self.mouseover = false, - self.defaultPreloader, - self.nextButton, - self.prevButton, - self.pauseButton, - self.pauseIcon, - self.delayUnpause, - self.init = { - /*functionality to initiate the preloader, next/previous buttons and so on - - devOption: true = the developer wants to use the default selector. false = don't use a uiElement. string = the developer defined selector to use for the UI element - defaultOption: the default selector to use for the UI element, when the developer specifies false for devOption - */ - uiElements: function(devOption, defaultOption) { - switch(devOption) { - case false: //don't set up a uiElement - return undefined; - - case true: //use the default uiElement - if(defaultOption === ".sequence-preloader") { //if setting up the preloader... - get.defaultPreloader(self.container, self.transitionsSupported, self.prefix); //get the default preloader - }; - return $(defaultOption); //return the default element - - default: //if using a developer defined selector... - return $(devOption); //return the developer defined element - } - } - }; - - //Callbacks - self.paused = function() {}, //executes when Sequence is paused - self.unpaused = function() {}, //executes when Sequence is unpaused - - self.beforeNextFrameAnimatesIn = function() {}, //executes before the next frame animates in - self.afterNextFrameAnimatesIn = function() {}, //executes after the next frame animates in - self.beforeCurrentFrameAnimatesOut = function() {}, //executes before the current frame animates out - self.afterCurrentFrameAnimatesOut = function() {}, //executes after the current frame animates out - - self.beforeFirstFrameAnimatesIn = function() {}, //executes before the first frame animates in - self.afterFirstFrameAnimatesIn = function() {}, //executes after the first frame animates in - self.beforeLastFrameAnimatesIn = function() {}, //executes before the last frame animates in - self.afterLastFrameAnimatesIn = function() {}, //executes after the last frame animates in - - self.afterLoaded = function() {}; //executes after Sequence is initiated - - //INIT - self.settings = $.extend({}, defaults, options); //combine default options with developer defined ones - self.settings.preloader = self.init.uiElements(self.settings.preloader, ".sequence-preloader"); //set up the preloader and save it - self.firstFrame = (self.settings.animateStartingFrameIn) ? true : false; //determine if the first frame should animate in - self.settings.unpauseDelay = (self.settings.unpauseDelay === null) ? self.settings.autoPlayDelay : self.settings.unpauseDelay; //if the unpauseDelay is not specified, make it the same as the autoPlayDelay speed - self.currentHashTag; //the current hash tag taken from the URL - self.getHashTagFrom = (self.settings.hashDataAttribute) ? "data-sequence-hashtag": "id"; //get the hashtag from the ID or data attribute? - self.frameHashID = []; //array that matches frames with has IDs - self.direction = self.settings.autoPlayDirection; - - if(self.settings.hideFramesUntilPreloaded && self.settings.preloader) { //if using a preloader and hiding frames until preloading has completed... - self.sequence.children("li").hide(); //hide Sequence's frames - } - - if(self.prefix === "-o-") { //if Opera prefixes are required... - self.transitionsSupported = get.operaTest(); //run a test to see if Opera correctly supports transitions (Opera 11 has bugs relating to transitions) - } - - self.modifyElements(self.sequence.children("li"), "0s"); //reset transition time to 0s - self.sequence.children("li").removeClass("animate-in"); //remove any instance of "animate-in", which should be used incase JS is disabled - - //functionality to run once Sequence has preloaded - function oncePreloaded() { - self.afterLoaded(); //callback - if(self.settings.hideFramesUntilPreloaded && self.settings.preloader) { - self.sequence.children("li").show(); - } - if(self.settings.preloader){ - if(self.settings.hidePreloaderUsingCSS && self.transitionsSupported) { - self.prependPreloadingCompleteTo = (self.settings.prependPreloadingComplete == true) ? self.settings.preloader : $(self.settings.prependPreloadingComplete); - self.prependPreloadingCompleteTo.addClass("preloading-complete"); - setTimeout(init, self.settings.hidePreloaderDelay); - }else{ - - self.settings.preloader.fadeOut(self.settings.hidePreloaderDelay, function() { - clearInterval(self.defaultPreloader); - init(); - }); - } - }else{ - init(); - } - } - - var preloadTheseFramesLength = self.settings.preloadTheseFrames.length; //how many frames to preload? - var preloadTheseImagesLength = self.settings.preloadTheseImages.length; //how many single images to load? - - if(self.settings.preloader && (preloadTheseFramesLength !== 0 || preloadTheseImagesLength !== 0)) { //if using the preloader and the dev has specified some images should preload... - function saveImagesToArray(length, srcOnly) { - var imagesToPreload = []; //saves the images that are to be preloaded - if(!srcOnly){ - for(var i = length; i > 0; i--){ //for each frame to be preloaded... - self.sequence.children("li:nth-child("+self.settings.preloadTheseFrames[i-1]+")").find("img").each(function() { //find 's in specific frames, and for each found... - imagesToPreload.push($(this)[0]); //add it to the array of images to be preloaded - }); - } - }else{ - for(var i = length; i > 0; i--) { //for each frame to be preloaded... - imagesToPreload.push($("body").find('img[src="'+self.settings.preloadTheseImages[i-1]+'"]')[0]); //find any with the given source and add it to the array of images to be preloaded - } - } - return imagesToPreload; - } - - var frameImagesToPreload = saveImagesToArray(preloadTheseFramesLength); //get images from particular Sequence frames to be preloaded - var individualImagesToPreload = saveImagesToArray(preloadTheseImagesLength, true); //get images with specific source values to be preloaded - var imagesToPreload = $(frameImagesToPreload.concat(individualImagesToPreload)); //combine frame images and individual images - var imagesToPreloadLength = imagesToPreload.length; - - imagesLoaded(imagesToPreload, oncePreloaded); - }else{ //if not using the preloader... - $(window).bind("load", function() { //when the window loads... - oncePreloaded(); //run the init functionality when the preloader has finished - $(this).unbind("load"); //unbind the load event as it's no longer needed - }); - } - - //jQuery imagesLoaded plugin v2.1.0 (http://github.com/desandro/imagesloaded) - function imagesLoaded(imagesToPreload, callback) { - BLANK = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; - var $this = imagesToPreload, - deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, - hasNotify = $.isFunction(deferred.notify), - $images = $this.find('img').add( $this.filter('img') ), - loaded = [], - proper = [], - broken = []; - - //Register deferred callbacks - if($.isPlainObject(callback)) { - $.each(callback, function(key, value) { - if(key === 'callback') { - callback = value; - }else if(deferred) { - deferred[key](value); - } - }); - } - - function doneLoading() { - var $proper = $(proper), - $broken = $(broken); - - if(deferred) { - if(broken.length) { - deferred.reject($images, $proper, $broken); - }else{ - deferred.resolve($images); - } - } - - if($.isFunction(callback)) { - callback.call($this, $images, $proper, $broken); - } - } - - function imgLoaded( img, isBroken ) { - if(img.src === BLANK || $.inArray(img, loaded) !== -1) { // don't proceed if BLANK image, or image is already loaded - return; - } - - loaded.push(img); // store element in loaded images array - - if(isBroken) { // keep track of broken and properly loaded images - broken.push(img); - }else{ - proper.push(img); - } - - $.data(img, 'imagesLoaded', {isBroken: isBroken, src: img.src }); // cache image and its state for future calls - - if(hasNotify) { // trigger deferred progress method if present - deferred.notifyWith($(img), [isBroken, $images, $(proper), $(broken)]); - } - - if($images.length === loaded.length) { // call doneLoading and clean listeners if all images are loaded - setTimeout(doneLoading); - $images.unbind('.imagesLoaded'); - } - } - - if(!$images.length) { // if no images, trigger immediately - doneLoading(); - }else{ - $images.bind('load.imagesLoaded error.imagesLoaded', function(event) { - imgLoaded(event.target, event.type === 'error'); // trigger imgLoaded - }).each(function(i, el) { - var src = el.src; - var cached = $.data(el, 'imagesLoaded'); // find out if this image has been already checked for status if it was, and src has not changed, call imgLoaded on it - if(cached && cached.src === src) { - imgLoaded(el, cached.isBroken); - return; - } - - if(el.complete && el.naturalWidth !== undefined) { // if complete is true and browser supports natural sizes, try to check for image status manually - imgLoaded(el, el.naturalWidth === 0 || el.naturalHeight === 0); - return; - } - - // cached images don't fire load sometimes, so we reset src, but only when dealing with IE, or image is complete (loaded) and failed manual check webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f - if(el.readyState || el.complete) { - el.src = BLANK; - el.src = src; - } - }); - } - }; - - function init() { - $(self.settings.preloader).remove(); //remove the preloader element - - self.nextButton = self.init.uiElements(self.settings.nextButton, ".next"); //set up the next button - self.prevButton = self.init.uiElements(self.settings.prevButton, ".prev"); //set up the previous button - self.pauseButton = self.init.uiElements(self.settings.pauseButton, ".pause"); //set up the pause button - - if((self.nextButton !== undefined && self.nextButton !== false) && self.settings.showNextButtonOnInit){self.nextButton.show();} //if using a next button, show it - if((self.prevButton !== undefined && self.prevButton !== false) && self.settings.showPrevButtonOnInit){self.prevButton.show();} //if using a previous button, show it - if((self.pauseButton !== undefined && self.pauseButton !== false)){self.pauseButton.show();} //if using a pause button, show it - - if(self.settings.pauseIcon !== false) { - self.pauseIcon = self.init.uiElements(self.settings.pauseIcon, ".pause-icon"); - if(self.pauseIcon !== undefined) { - self.pauseIcon.hide(); - } - }else{ - self.pauseIcon = undefined; - } - - self.nextFrameID = self.settings.startingFrameID; - - if(self.settings.hashTags) { //if using hashtags... - self.sequence.children("li").each(function() { //for each frame... - self.frameHashID.push($(this).attr(self.getHashTagFrom)); //add the hashtag to an array - }); - - self.currentHashTag = location.hash.replace("#", ""); //get the current hashtag - if(self.currentHashTag === undefined || self.currentHashTag === "") { //if there is no hashtag... - self.nextFrameID = self.settings.startingFrameID; //use the startingFrameID - }else{ - self.frameHashIndex = $.inArray(self.currentHashTag, self.frameHashID); //get the index of the frame that matches the hashtag - if(self.frameHashIndex !== -1){ //if the hashtag matches a Sequence frame ID... - self.nextFrameID = self.frameHashIndex + 1; //use the frame associated to the hashtag - }else{ - self.nextFrameID = self.settings.startingFrameID; //use the startingFrameID - } - } - } - - self.nextFrame = self.sequence.children("li:nth-child("+self.nextFrameID+")"); - self.nextFrameChildren = self.nextFrame.children(); - - /* We don't want these properties forcibly applied inline. Set these dimensions and positioning in the style sheet. - * self.sequence.css({"width": "100%", "height": "100%", "position": "relative"}); //set the sequence list to 100% width/height just incase it hasn't been specified in the CSS - * self.sequence.children("li").css({"width": "100%", "height": "100%", "position": "absolute", "z-index": 1}); //do the same for the frames and make them absolute - */ - if(self.transitionsSupported) { //initiate the full featured Sequence if transitions are supported... - if(!self.settings.animateStartingFrameIn) { //start first frame in animated in position - self.currentFrameID = self.nextFrameID; - - if(self.settings.moveActiveFrameToTop) { - self.nextFrame.css("z-index", self.numberOfFrames); - } - self.modifyElements(self.nextFrameChildren, "0s"); - self.nextFrame.addClass("animate-in"); - if(self.settings.hashTags && self.settings.hashChangesOnFirstFrame) { - self.currentHashTag = self.nextFrame.attr(self.getHashTagFrom); - document.location.hash = "#"+self.currentHashTag; - } - - setTimeout(function() { - self.modifyElements(self.nextFrameChildren, ""); - }, 100); - - self.resetAutoPlay(true, self.settings.autoPlayDelay); - }else if(self.settings.reverseAnimationsWhenNavigatingBackwards && self.settings.autoPlayDirection -1 && self.settings.animateStartingFrameIn) { //animate in backwards - self.modifyElements(self.nextFrameChildren, "0s"); - self.nextFrame.addClass("animate-out"); - self.goTo(self.nextFrameID, -1); - }else{ //animate in forwards - self.goTo(self.nextFrameID, 1); - } - }else{ //initiate a basic slider for browsers that don't support CSS3 transitions - self.container.addClass("sequence-fallback"); - self.beforeNextFrameAnimatesIn(); - self.afterNextFrameAnimatesIn(); - if(self.settings.hashTags && self.settings.hashChangesOnFirstFrame){ - self.currentHashTag = self.nextFrame.attr(self.getHashTagFrom); - document.location.hash = "#"+self.currentHashTag; - } - self.currentFrameID = self.nextFrameID; - self.sequence.children("li").addClass("animate-in"); - self.sequence.children(":not(li:nth-child("+self.nextFrameID+"))").css({"display": "none", "opacity": 0}); - self.resetAutoPlay(true, self.settings.autoPlayDelay); - } - //END INIT - //EVENTS - if(self.nextButton !== undefined) { //if a next button is defined... - self.nextButton.click(function() { //when the next button is clicked... - self.next(); //go to the next frame - }); - } - - if(self.prevButton !== undefined) { //if a previous button is defined... - self.prevButton.click(function() { //when the previous button is clicked... - self.prev(); //go to the previous frame - }); - } - - if(self.pauseButton !== undefined) { //if a pause button is defined... - self.pauseButton.click(function() { //when the pause button is clicked... - self.pause(true); //pause Sequence and set hardPause to true - }); - } - - if(self.settings.keyNavigation) { - var defaultKeys = { - 'left' : 37, - 'right' : 39 - }; - - function keyEvents(keyPressed, keyDirections) { - var keyCode; - - for(keyCodes in keyDirections) { - if(keyCodes === "left" || keyCodes === "right") { - keyCode = defaultKeys[keyCodes]; - }else{ - keyCode = keyCodes; - } - - if(keyPressed === parseFloat(keyCode)) { //if the key pressed is associated with a function... - self.initCustomKeyEvent(keyDirections[keyCodes]); //initiate the function - } - } - } - - $(document).keydown(function(e) { //when a key is pressed... - var glyph = String.fromCharCode(e.keyCode); - if((glyph > 0 && glyph <= self.numberOfFrames) && (self.settings.numericKeysGoToFrames)) { - self.nextFrameID = glyph; - self.goTo(self.nextFrameID); //go to specified frame - } - - keyEvents(e.keyCode, self.settings.keyEvents); //run default keyevents - keyEvents(e.keyCode, self.settings.customKeyEvents); //run custom keyevents - }); - } - - if(self.settings.pauseOnHover && self.settings.autoPlay && !self.hasTouch) { //if using pauseOnHover and autoPlay on non touch devices - self.sequence.on({ - mouseenter: function() { //when the mouse enter the Sequence element... - self.mouseover = true; - if(!self.isHardPaused) { //if Sequence is hard paused (via a pause button)... - self.pause(); //pause autoPlay - } - }, - mouseleave: function() { //when the mouse leaves the Sequence element... - self.mouseover = false; - if(!self.isHardPaused) { //if Sequence is not hard paused (via a pause button)... - self.unpause(); //unpause autoPlay - } - } - }); - } - - if(self.settings.hashTags) { //if hashchange is enabled in the settings... - $(window).hashchange(function() { //when the hashtag changes... - newTag = location.hash.replace("#", ""); //grab the new hashtag - - if(self.currentHashTag !== newTag) { //if the last hashtag is not the same as the current one... - self.currentHashTag = newTag; //save the new tag - self.frameHashIndex = $.inArray(self.currentHashTag, self.frameHashID); //get the index of the frame that matches the hashtag - if(self.frameHashIndex !== -1) { //if the hashtag matches a Sequence frame ID... - self.nextFrameID = self.frameHashIndex + 1; //set that frame as the next one - self.goTo(self.nextFrameID); //go to the next frame - } - } - }); - } - - if(self.settings.swipeNavigation && self.hasTouch) { //if using swipeNavigation and the device has touch capabilities... - //jQuery TouchWipe v1.1.1 (http://www.netcu.de/jquery-touchwipe-iphone-ipad-library) - var startX; - var startY; - var isMoving = false; - - function cancelTouch() { - self.sequence.on("touchmove", onTouchMove); - startX = null; - isMoving = false; - } - - function onTouchMove(e) { - if(self.settings.swipePreventsDefault) { - e.preventDefault(); - } - if(isMoving) { - var x = e.originalEvent.touches[0].pageX; - var y = e.originalEvent.touches[0].pageY; - var dx = startX - x; - var dy = startY - y; - if(Math.abs(dx) >= self.settings.swipeThreshold) { - cancelTouch(); - if(dx > 0) { - self.initCustomKeyEvent(self.settings.swipeEvents.left); - }else{ - self.initCustomKeyEvent(self.settings.swipeEvents.right); - } - }else if(Math.abs(dy) >= self.settings.swipeThreshold) { - cancelTouch(); - if(dy > 0) { - self.initCustomKeyEvent(self.settings.swipeEvents.down); - }else{ - self.initCustomKeyEvent(self.settings.swipeEvents.up); - } - } - } - } - - function onTouchStart(e) { - if(e.originalEvent.touches.length == 1) { - startX = e.originalEvent.touches[0].pageX; - startY = e.originalEvent.touches[0].pageY; - isMoving = true; - self.sequence.on("touchmove", onTouchMove); - } - } - - self.sequence.on("touchstart", onTouchStart); - } - //END EVENTS - } - } //END CONSTRUCTOR - - Sequence.prototype = { - //trigger keyEvents, customKeyEvents and swipeEvents - initCustomKeyEvent: function(event) { - var self = this; - switch(event) { - case "next": - self.next(); - break; - case "prev": - self.prev(); - break; - case "pause": - self.pause(true); - break; - } - }, - - /* - modify the transition-duration and transition-delay properties of an element - - elementToReset = the element that is to have it's properties modified - cssValue = the value to be given to the transition-duration and transition-delay properties - */ - modifyElements: function(elementToReset, cssValue) { - var self = this; - elementToReset.css( - self.prefixCSS(self.prefix, { - "transition-duration": cssValue, - "transition-delay": cssValue - }) - ); - }, - - /* - adds the browser vendors prefix onto multiple CSS properties - - prefix = the prefix for the browser Sequence is being viewed in (-webkit- for example) - properties = the properties to be prefixed (transition-duration for example) - */ - prefixCSS: function(prefix, properties) { - var css = {}; - for(property in properties) { //for each property to be modified... - css[prefix + property] = properties[property]; //add the prefix to the property name - } - return css; //return the prefixed CSS - }, - - setTransitionProperties: function(frameChildren) { - var self = this; - frameChildren.each(function() { - self.transitionProperties["transition-duration"] = $(this).css(self.prefix + "transition-duration"); - self.transitionProperties["transition-delay"] = $(this).css(self.prefix + "transition-delay"); - - $(this).css( - self.prefixCSS(self.prefix, self.transitionProperties) - ); - }); - }, - - /* - start autoPlay -- causing Sequence to automatically change frame every x amount of milliseconds - - delay: a time in ms before starting the autoPlay feature (if unspecified, the default will be used) - */ - startAutoPlay: function(delay) { - var self = this; - var delay = (delay === undefined) ? self.settings.autoPlayDelay : delay; //if a delay isn't specified, use the default - self.unpause(); - - self.resetAutoPlay(); //stop autoPlay before starting it again - self.autoPlayTimer = setTimeout(function() { //start a new autoPlay timer and... - self.settings.autoPlayDirection === 1 ? self.next(): self.prev(); //go to either the next or previous frame - }, delay); //after a specified delay - }, - - //stop causing Sequence to automatically change frame every x amount of seconds - stopAutoPlay: function() { - var self = this; - self.pause(true); - clearTimeout(self.autoPlayTimer); //stop the autoPlay timer - }, - - /* - internal function used to start and stop autoPlay - start: if true, autoPlay will be started, else it'll be stopped - delay: a time in ms before starting the autoPlay feature (if unspecified, the default will be used) - */ - resetAutoPlay: function(start, delay) { - var self = this; - if(start === true) { //if starting autoPlay - if(self.settings.autoPlay && !self.isPaused) { //if using autoPlay and Sequence isn't paused... - clearTimeout(self.autoPlayTimer); //stop the autoPlay timer - self.autoPlayTimer = setTimeout(function() { //start a new autoPlay timer and... - self.settings.autoPlayDirection === 1 ? self.next(): self.prev(); //go to either the next or previous frame - }, delay); //after a specified delay - } - }else{ //if stopping autoPlay - clearTimeout(self.autoPlayTimer); //stop the autoPlay timer - } - }, - - /* - Toggle startAutoPlay (unpausing autoPlay) and stopAutoPlay (pausing autoPlay) - - hardPause: if true, Sequence's pauseOnHover will not execute. Useful for pause buttons. - - Note: Sequence 0.7.3 and below didn't have an .unpause() function -- .pause() would pause/unpause - based on the current state. .unpause() is now included for clarity but the .pause() function will - still toggle between paused and unpaused states. - */ - pause: function(hardPause) { - var self = this; - if(!self.isPaused) { //if pausing Sequence... - if(self.pauseButton !== undefined) { //if a pause button is defined... - self.pauseButton.addClass("paused"); //add the class of "paused" to the pause button - if(self.pauseIcon !== undefined) { //if a pause icon is defined... - self.pauseIcon.show(); //show the pause icon - } - } - self.paused(); //callback when Sequence is paused - self.isPaused = true; - self.isHardPaused = (hardPause) ? true : false; //if hardPausing, set hardPause to true - self.resetAutoPlay(); //stop autoPlay - }else{ //if unpausing Sequence... - self.unpause(); - } - }, - - /* - Start the autoPlay feature, as well as deal with any changes to pauseButtons, pauseIcons and public variables etc - - callback: if false, the unpause callback will not be initiated (this is because unpause is used internally during the stop and start of each frame) - */ - unpause: function(callback) { - var self = this; - if(self.pauseButton !== undefined) { //if a pause button is defined... - self.pauseButton.removeClass("paused"); //remove the class of "paused" from the pause button - if(self.pauseIcon !== undefined) { //if a pause icon is defined... - self.pauseIcon.hide(); //hide the pause icon - } - } - - self.isPaused = false; - self.isHardPaused = false; - - if(!self.active) { - if(callback !== false) { - self.unpaused(); //callback when Sequence is unpaused - } - self.resetAutoPlay(true, self.settings.unpauseDelay); //start autoPlay after a delay specified via the unpauseDelay setting - }else{ - self.delayUnpause = true; //Sequence is animating so delay the unpause event until the animation completes - } - }, - - //Go to the frame ahead of the current one - next: function() { - var self = this; - self.nextFrameID = (self.currentFrameID !== self.numberOfFrames) ? self.currentFrameID + 1 : 1; //work out the next frame - self.goTo(self.nextFrameID, 1); //go to the next frame - }, - - //Go to the frame prior to the current one - prev: function() { - var self = this; - self.nextFrameID = (self.currentFrameID === 1) ? self.numberOfFrames : self.currentFrameID - 1; //work out the prev frame - self.goTo(self.nextFrameID, -1); //go to the prev frame - }, - - /* - Go to a specific frame - - id: number of the frame to go to - direction: direction to get to that frame (1 = forward, -1 = reverse) - */ - goTo: function(id, direction) { - var self = this; - var id = parseFloat(id); //convert the id to a number just in case - - if((id === self.currentFrameID) //if the id of the frame the user is trying to go to is the same as the currently active one... - || (self.settings.navigationSkip && self.navigationSkipThresholdActive) //or navigationSkip is enabled and the navigationSkipThreshold is active (which prevents frame from being navigated too fast)... - || (!self.settings.navigationSkip && self.active) //or navigationSkip is disbaled but Sequence is animating... - || (!self.transitionsSupported && self.active) //or Sequence is in fallback mode and Sequence is animating... - || (!self.settings.cycle && direction === 1 && self.currentFrameID === self.numberOfFrames) //or cycling is disabled, the user is navigating forward and this is the last frame... - || (!self.settings.cycle && direction === -1 && self.currentFrameID === 1) //or cycling is disabled, the user is navigating backwards and this is the first frame... - || (self.settings.preventReverseSkipping && self.direction !== direction && self.active)) { //or Sequence is animating and the user is trying to change the direction of navigation... - return false; //don't go to another frame - }else if(self.settings.navigationSkip && self.active) { //if navigationSkip is enabled and Sequence is animating (a frame is being skipped before it has finished animating)... - self.navigationSkipThresholdActive = true; //the navigationSkipThreshold is now active - if(self.settings.fadeFrameWhenSkipped) { //if a frame should fade when skipped... - self.nextFrame.stop().animate({"opacity": 0}, self.settings.fadeFrameTime); //fade - } - - navigationSkipThresholdTimer = setTimeout(function() { //start the navigationSkipThreshold timer to prevent being able to navigate too quickly - self.navigationSkipThresholdActive = false; //once the timer is complete, navigationSkip can occur again - }, self.settings.navigationSkipThreshold); - } - - if(!self.active || self.settings.navigationSkip) { //if there are no animations running or navigationSkip is enabled... - self.active = true; //Sequence is now animating - self.resetAutoPlay(); //stop any autoPlay timer that may be running - - if(id === self.numberOfFrames) { //if navigating to the last frame... - self.beforeLastFrameAnimatesIn(); //callback - }else if(id === 1) { //if navigating to the first frame... - self.beforeFirstFrameAnimatesIn(); //callback - } - - if(direction === undefined) { //if no direction to navigate was defined... - self.direction = (id > self.currentFrameID) ? 1 : -1; //work out which way to go based on what frame is currently active - }else{ - self.direction = direction; //go to the developer defined frame - } - - self.currentFrame = self.sequence.children(".animate-in"); //find which frame is active -- the frame currently being viewed (and about to be animated out) - self.nextFrame = self.sequence.children("li:nth-child("+id+")"); //grab the next frame - self.frameChildren = self.currentFrame.children(); //save the child elements of the current frame - self.nextFrameChildren = self.nextFrame.children(); //save the child elements of the next frame - - if(self.transitionsSupported) { //if the browser supports CSS3 transitions... - if(self.currentFrame.length !== undefined) { //if there is a current frame (one that is in it's animate-in position)... - self.beforeCurrentFrameAnimatesOut(); //callback - if(self.settings.moveActiveFrameToTop) { //if the active frame should move to the top... - self.currentFrame.css("z-index", 1); //move this frame to the bottom as it is now inactive - } - self.modifyElements(self.nextFrameChildren, "0s"); //give the next frame elements a transition-duration and transition-delay of 0s so they don't transition to their reset position - if(!self.settings.reverseAnimationsWhenNavigatingBackwards || self.direction === 1) { //if user hit next button... - self.nextFrame.removeClass("animate-out"); //reset the next frame back to its starting position - self.modifyElements(self.frameChildren, ""); //remove any inline styles from the elements to be animated so styles via the "animate-out" class can take full effect - }else if(self.settings.reverseAnimationsWhenNavigatingBackwards && self.direction === -1) { //if the user hit prev button - self.nextFrame.addClass("animate-out"); //reset the next frame back to its animate-out position - self.setTransitionProperties(self.frameChildren); - } - }else{ - self.firstFrame = false; //no longer the first frame - } - - self.active = true; //Sequence is now animating - self.currentFrame.unbind(self.transitionEnd); //remove the animation end event - self.nextFrame.unbind(self.transitionEnd); //remove the animation end event - - if(self.settings.fadeFrameWhenSkipped) { //if a frame may have faded out when it was previously skipped... - self.nextFrame.css("opacity", 1); //show it again - } - - self.beforeNextFrameAnimatesIn(); //callback - if(self.settings.moveActiveFrameToTop) { //if an active frame should be moved to the top... - self.nextFrame.css({"z-index": self.numberOfFrames}); //move to the top of the z-index - } - - //modifications to the current and next frame's elements to get them ready to animate - if(!self.settings.reverseAnimationsWhenNavigatingBackwards || self.direction === 1) { //if user hit next button... - setTimeout(function() { //50ms timeout to give the browser a chance to modify the DOM sequentially - self.modifyElements(self.nextFrameChildren, ""); //remove any inline styles from the elements to be animated so styles via the "animate-in" class can take full effect - self.waitForAnimationsToComplete(self.nextFrame, self.nextFrameChildren, "in"); //wait for the next frame to animate in - if(self.afterCurrentFrameAnimatesOut !== "function () {}") { //if the afterCurrentFrameAnimatesOut is being used... - self.waitForAnimationsToComplete(self.currentFrame, self.frameChildren, "out"); //wait for the current frame to animate out as well - } - }, 50); - }else if(self.settings.reverseAnimationsWhenNavigatingBackwards && self.direction === -1) { //if the user hit prev button - setTimeout(function() { //50ms timeout to give the browser a chance to modify the DOM sequentially - self.modifyElements(self.nextFrameChildren, ""); //remove any inline styles from the elements to be animated so styles via the "animate-in" class can take full effect - self.setTransitionProperties(self.frameChildren); - self.waitForAnimationsToComplete(self.nextFrame, self.nextFrameChildren, "in"); //wait for the next frame to animate in - if(self.afterCurrentFrameAnimatesOut != "function () {}") { //if the afterCurrentFrameAnimatesOut is being used... - self.waitForAnimationsToComplete(self.currentFrame, self.frameChildren, "out"); //wait for the current frame to animate out as well - } - }, 50); - } - - //final class changes to make animations happen - if(!self.settings.reverseAnimationsWhenNavigatingBackwards || self.direction === 1) { //if user hit next button... - setTimeout(function() { //50ms timeout to give the browser a chance to modify the DOM sequentially - self.currentFrame.toggleClass("animate-out animate-in"); - self.nextFrame.addClass("animate-in"); //add the "animate-in" class - }, 50); - }else if(self.settings.reverseAnimationsWhenNavigatingBackwards && self.direction === -1) { //if the user hit prev button - setTimeout(function() { //50ms timeout to give the browser a chance to modify the DOM sequentially - self.nextFrame.toggleClass("animate-out animate-in"); //add the "animate-in" class and remove the "animate-out" class - self.currentFrame.removeClass("animate-in"); - }, 50); - } - }else{ //if the browser doesn't support CSS3 transitions... - function animationComplete() { - self.setHashTag(); - self.active = false; - self.resetAutoPlay(true, self.settings.autoPlayDelay); - } - - self.beforeCurrentFrameAnimatesOut(); //callback - - switch(self.settings.fallback.theme) { - case "fade": //if using the fade fallback theme... - self.sequence.children("li").css({"position": "relative"}); //this allows for fadein/out in IE - self.currentFrame.animate({"opacity": 0}, self.settings.fallback.speed, function() { //hide the current frame - self.currentFrame.css({"display": "none", "z-index": "1"}); - self.beforeNextFrameAnimatesIn(); - self.nextFrame.css({"display": "block", "z-index": self.numberOfFrames}).animate({"opacity": 1}, 500, function() { - self.afterNextFrameAnimatesIn(); - }); //make the next frame the current one and show it - animationComplete(); - }); - - self.sequence.children("li").css({"position": "relative"}); //this allows for fadein/out in IE - break; - - case "slide": //if using the slide fallback theme... - default: - //create objects which will save the .css() and .animation() objects - var animateOut = {}; - var animateIn = {}; - var moveIn = {}; - - //construct the .css() and .animation() objects - if(self.direction === 1) { - animateOut["left"] = "-100%"; - animateIn["left"] = "100%"; - }else{ - animateOut["left"] = "100%"; - animateIn["left"] = "-100%"; - } - - moveIn["left"] = "0"; - moveIn["opacity"] = 1; - - self.currentFrame = self.sequence.children("li:nth-child("+self.currentFrameID+")"); - self.currentFrame.animate(animateOut, self.settings.fallback.speed); //cause the current frame to animate out - self.beforeNextFrameAnimatesIn(); //callback - self.nextFrame.show().css(animateIn); - self.nextFrame.animate(moveIn, self.settings.fallback.speed, function() { //cause the next frame to animate in - animationComplete(); - self.afterNextFrameAnimatesIn(); //callback - }); - break; - } - } - self.currentFrameID = id; //make the currentFrameID the same as the one that is to animate in - } - }, - - /* - prevents the next frame from animating until the current frame has finished animating - - frame: the frame
  • which is animating - frameChildren: the animated direct child elements of the frame - direction: whether the elements are animating "in" to an active position or "out" of an active position - */ - waitForAnimationsToComplete: function(frame, frameChildren, direction) { - var self = this; - - if(direction === "out") { //if waiting on a frame's element to animate out... - var onceComplete = function() { - self.afterCurrentFrameAnimatesOut(); //callback - }; - }else if(direction === "in") { //if waiting on a frame's element to animate in... - var onceComplete = function() { - self.afterNextFrameAnimatesIn(); //callback - self.setHashTag(); //set the hashtag to represent the newly active frame - - if(self.currentFrameID === self.numberOfFrames) { - self.afterLastFrameAnimatesIn(); //callback - }else if(self.currentFrameID === 1) { - self.afterFirstFrameAnimatesIn(); //callback - } - - self.active = false; //Sequence is not animating - - if(!self.isHardPaused && !self.mouseover) { //if Sequence isn't hard paused (via a pause button for example) or being hovered over... - if(!self.delayUnpause) { //if unpausing isn't delayed (Sequence wasn't animating when unpause was invoked)... - self.unpause(false); //unpause Sequence but don't run the unpause callback - }else{ //if unpausing was delay because Sequence was animating when unpause was invoked... - self.delayUnpause = false; - self.unpause(); //unpause Sequence - } - } - }; - } - - frameChildren.data('animationEnded', false); // set the data attribute of each animated element to indicate that the animation has not yet ended - frame.bind(self.transitionEnd, function(e) { //when an element finishes animating... - $(e.target).data('animationEnded', true); // set the data attrbiute to indicate that the element has finished it's animation - - // now check if all elements have finished animating - var allAnimationsEnded = true; - frameChildren.each(function() { //for each element being animated within a frame... - if($(this).data('animationEnded') === false) { //if the animation hasn't ended... - allAnimationsEnded = false; //not all animations have ended yet - return false; //break out of the animationEnded check early - } - }); - - if(allAnimationsEnded) { //if all animations have ended... - frame.unbind(self.transitionEnd); //stop waiting for animations to end - onceComplete(); - } - }); - }, - - setHashTag: function() { - var self = this; - if(self.settings.hashTags) { //if hashTags is enabled... - self.currentHashTag = self.nextFrame.attr(self.getHashTagFrom); //get the hashtag name - self.frameHashIndex = $.inArray(self.currentHashTag, self.frameHashID); //get the index of the frame that matches the hashtag - if(self.frameHashIndex !== -1 && (self.settings.hashChangesOnFirstFrame || (!self.firstFrame || !self.transitionsSupported))) { //if the hashtag matches a Sequence frame ID... - self.nextFrameID = self.frameHashIndex + 1; - document.location.hash = "#"+self.currentHashTag; - }else{ - self.nextFrameID = self.settings.startingFrameID; - self.firstFrame = false; - } - } - } - }; //END PROTOTYPE - - $.fn.sequence = function(options) { - var self = this; - return self.each(function() { - var sequence = new Sequence($(this), options, defaults, get); - $(this).data("sequence", sequence); - }); - }; - - //some external functions - var get = { - /* Modernizr 2.6.1 (Custom Build) | MIT & BSD - * Build: http://modernizr.com/download/#-svg-prefixed-testprop-testallprops-domprefixes - */ - modernizr: function() { - ;window.Modernizr=function(a,b,c){function x(a){i.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&i[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+m.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+n.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.1",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l="Webkit Moz O ms",m=l.split(" "),n=l.toLowerCase().split(" "),o={svg:"http://www.w3.org/2000/svg"},p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=self;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(self instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.svg=function(){return!!b.createElementNS&&!!b.createElementNS(o.svg,"svg").createSVGRect};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),h=j=null,e._version=d,e._domPrefixes=n,e._cssomPrefixes=m,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},e}(self,self.document); - }, - - defaultPreloader: function(prependTo, transitions, prefix) { - var icon = '
    '; - - $("head").append(""); - prependTo.prepend(icon); - if(!Modernizr.svg && !transitions) { //if SVG isn't supported, remain calm and add this fallback instead... - $(".sequence-preloader").prepend('
    '); - setInterval(function(){ - $(".sequence-preloader .circle").fadeToggle(500); - }, 500); - }else if(!transitions){ //if transitions aren't supported, toggle the opacity instead - setInterval(function(){ - $(".sequence-preloader").fadeToggle(500); - }, 500); - } - }, - - //a quick test to work out if Opera supports transitions properly (to work around the fact that Opera 11 supports transitions but doesn't return a transition value properly) - operaTest: function() { - $("body").append(''); - var $operaTest = $("#sequence-opera-test"); - $operaTest.css("-o-transition", "1s"); - //if the expected value isn't returned... - if($operaTest.css("-o-transition") != "1s") { - //cause Opera to go into the fallback theme - return false; - }else{ - return true; - } - $operaTest.remove(); - } - }; - - var defaults = { - //General Settings - startingFrameID: 1, //The frame (the list item `
  • `) that should first be displayed when Sequence loads - cycle: true, //Whether Sequence should navigate to the first frame after the last frame and vice versa - animateStartingFrameIn: false, //Whether the first frame should animate in to its active position - reverseAnimationsWhenNavigatingBackwards: true, //Whether animations should be reversed when a user navigates backwards by clicking a previous button/swiping/pressing the left key - moveActiveFrameToTop: true, //Whether a frame should be given a higher `z-index` than other frames whilst it is active, to bring it above the others - - //Autoplay Settings - autoPlay: true, - autoPlayDirection: 1, - autoPlayDelay: 5000, - - //Frame Skipping Settings - navigationSkip: true, //Whether the user can navigate through frames before each frame has finished animating - navigationSkipThreshold: 250, //Amount of time that must pass before the next frame can be navigated to - fadeFrameWhenSkipped: true, //If a frame is skipped before it finishes animating, it will quickly fade out - fadeFrameTime: 150, //If fadeFrameWhenSkipped is true, how quickly a frame should fade out when skipped (in milliseconds) - preventReverseSkipping: false, //Whether the user can change the direction of navigation during frames animating (if navigating forward, the user can only skip forwards when other frames are animating). - - //Next/Prev Button Settings - nextButton: false, //if dev settings are true, the nextButton will be ".next" - showNextButtonOnInit: true, - prevButton: false, //if dev settings are true, the prevButton will be ".prev" - showPrevButtonOnInit: true, - - //Pause Settings - pauseButton: false, //if dev settings are true, the pauseButton will be ".pause" - unpauseDelay: null, //the time to wait before navigating to the next frame when Sequence is unpaused. Note that if an unpauseDelay is not specified, the default is the same as the autoPlayDelay setting - pauseOnHover: true, - pauseIcon: false, //this is an indicator to show Sequence is paused - - //Preloader Settings - preloader: false, - preloadTheseFrames: [1], //all images in these frames will load before Sequence initiates - preloadTheseImages: [ //specify particular images to load before Sequence initiates - /* Example usage - "images/catEatingSalad.jpg", - "images/meDressedAsBatman.png" - */ - ], - /*Note: You can use preloadTheseFrames and preloadTheseImages together. You might want to load all images in frame 1 and just one big image from frame 2 for example*/ - hideFramesUntilPreloaded: true, - prependPreloadingComplete: true, - hidePreloaderUsingCSS: true, - hidePreloaderDelay: 0, - - //Keyboard settings - keyNavigation: true, //false prevents the following keyboard settings - numericKeysGoToFrames: true, - keyEvents: { - left: "prev", - right: "next" - }, - customKeyEvents: { - /* Example usage - 65: "prev", //a - 68: "next", //d - 83: "prev", //s - 87: "next" //w - */ - }, - - //Touch Swipe Settings - swipeNavigation: true, - swipeThreshold: 20, - swipePreventsDefault: false, //be careful if setting this to true - swipeEvents: { - left: "prev", - right: "next", - up: false, - down: false - }, - - //hashTags Settings - //when using hashTags, please include a reference to Ben Alman's jQuery HashChange plugin above your reference to Sequence.js - - //info: http://benalman.com/projects/jquery-hashchange-plugin/ - //plugin: https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js - //GitHub: https://github.com/cowboy/jquery-hashchange - hashTags: false, //when a frame is navigated to, change the hashtag to the frames ID - hashDataAttribute: false, //false = the hashTag is taken from a frames ID attribute | true = the hashTag is taken from the data attribute "data-sequence-hash" - hashChangesOnFirstFrame: false, - - //Fallback Theme Settings (For browsers that don't support CSS3 transitions) - fallback: { - theme: "slide", - speed: 500 - } - }; -})(jQuery); \ No newline at end of file diff --git a/media/js/mozorg/history-slides.js b/media/js/mozorg/history-slides.js deleted file mode 100644 index e458c7cd43f..00000000000 --- a/media/js/mozorg/history-slides.js +++ /dev/null @@ -1,98 +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(w, $) { - 'use strict'; - - // default user action to auto - var action = 'auto'; - var $window = $(window); - var $body = $('body'); - var $slideshow = $('#slideshow'); - var hasMediaQueries = (typeof matchMedia !== 'undefined'); - - // declare slideshow options - var options = { - nextButton: '.next', - prevButton: '.prev', - autoPlay: true, - autoPlayDelay: 8500, - pauseOnHover: true, - moveActiveFrameToTop: false, - fadeFrameWhenSkipped: false, - animateStartingFrameIn: true, - reverseAnimationsWhenNavigatingBackwards: true, - preventDelayWhenReversingAnimations: true, - swipeEvents: { - left: 'next', - right: 'prev', - up: false, - down: false - } - }; - - // set up the slideshow - // @requires: sequencejs - // NOTE: this version of sequence relies on deprecated jQuery methods - var slideshow = $slideshow.sequence(options).data('sequence'); - - - // If the browser supports media queries, check the width onload and onresize. - // If not, just lock it in permanent wideMode. - if (hasMediaQueries) { - checkWidth(); - $window.on('resize', function() { - clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout(checkWidth, 200); - }); - } else { - $body.addClass('wide'); - $slideshow.addClass('on'); - } - - function checkWidth() { - if (window.matchMedia('screen and (min-width: 1000px)').matches) { - $body.addClass('wide'); - $slideshow.addClass('on'); - slideshow.startAutoPlay(); - } else { - $body.removeClass('wide'); - $slideshow.removeClass('on'); - slideshow.stopAutoPlay(); - } - } - - - // Track slide views - var track = function() { - // must use nextFrame here - currentFrame (oddly) isn't updated yet. - window.dataLayer.push({ - 'event': 'mozilla-slideshow', - 'interaction': action, - 'slide': slideshow.nextFrame[0].id - }); - - // reset action to autoplay - action = 'auto'; - }; - - // track animations when next frame comes in - slideshow.afterNextFrameAnimatesIn = function() { - track(); - }; - - $('.next, .prev').on('click', function(e) { - e.preventDefault(); - action = 'click'; - }); - - $(document).on('keydown', function(e) { - var key = e.keyCode; - - if (key === 39 || key === 37) { - action = 'keydown'; - } - }); - -})(window, jQuery); diff --git a/media/static-bundles.json b/media/static-bundles.json index 634e3a2231a..2b55c5de78e 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -517,12 +517,6 @@ ], "name": "css-grid-demo" }, - { - "files": [ - "css/mozorg/history-slides.less" - ], - "name": "history-slides" - }, { "files": [ "css/firefox/whatsnew/whatsnew-63.scss" @@ -565,12 +559,6 @@ ], "name": "contribute-embed" }, - { - "files": [ - "css/mozorg/about-base.less" - ], - "name": "about-base-resp" - }, { "files": [ "css/privacy/privacy.less" @@ -1197,13 +1185,6 @@ ], "name": "firefox-mobile" }, - { - "files": [ - "js/libs/jquery.sequence.js", - "js/mozorg/history-slides.js" - ], - "name": "history-slides" - }, { "files": [ "js/base/uitour-lib.js", diff --git a/tests/functional/test_history.py b/tests/functional/test_history.py deleted file mode 100644 index 3720c4c1531..00000000000 --- a/tests/functional/test_history.py +++ /dev/null @@ -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 http://mozilla.org/MPL/2.0/. - -import pytest - -from pages.history import HistoryPage - - -@pytest.mark.nondestructive -def test_slideshow_displayed(base_url, selenium): - page = HistoryPage(selenium, base_url).open() - assert page.is_slideshow_displayed - assert page.is_previous_button_displayed - assert page.is_next_button_displayed - - -@pytest.mark.nondestructive -def test_list_displayed(base_url, selenium_mobile): - page = HistoryPage(selenium_mobile, base_url).open() - assert not page.is_slideshow_displayed - assert not page.is_previous_button_displayed - assert not page.is_next_button_displayed diff --git a/tests/pages/history.py b/tests/pages/history.py deleted file mode 100644 index e2712a25320..00000000000 --- a/tests/pages/history.py +++ /dev/null @@ -1,28 +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/. - -from selenium.webdriver.common.by import By - -from pages.base import BasePage - - -class HistoryPage(BasePage): - - URL_TEMPLATE = '/{locale}/about/history/' - - _slideshow_locator = (By.CSS_SELECTOR, '#slideshow') - _previous_button_locator = (By.CSS_SELECTOR, '.slide-control > .prev') - _next_button_locator = (By.CSS_SELECTOR, '.slide-control > .next') - - @property - def is_slideshow_displayed(self): - return 'on' in self.find_element(*self._slideshow_locator).get_attribute('class') - - @property - def is_previous_button_displayed(self): - return self.is_element_displayed(*self._previous_button_locator) - - @property - def is_next_button_displayed(self): - return self.is_element_displayed(*self._next_button_locator) diff --git a/tests/redirects/map_globalconf.py b/tests/redirects/map_globalconf.py index c8e1a285b14..ae43ca9fad8 100644 --- a/tests/redirects/map_globalconf.py +++ b/tests/redirects/map_globalconf.py @@ -1267,4 +1267,7 @@ # Issue 7287 url_test('/accounts/', '/firefox/accounts/'), + + # Issue 7435 + url_test('/about/history/details/', '/about/history/'), ))