зеркало из https://github.com/mozilla/bedrock.git
Add initial port of Firefox Customize page
This commit is contained in:
Steven Garrity
Родитель
53d23a9bad
Коммит
220edcc545
|
|
@ -14,8 +14,8 @@
|
|||
<li class="first" id="nav-main-features"><a href="/en-US/firefox/features/" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">Desktop</a>
|
||||
<ul aria-expanded="false" id="nav-main-features-submenu">
|
||||
<li class="first"><a href="/en-US/firefox/features/" tabindex="-1">Features</a></li>
|
||||
<li><a href="/en-US/firefox/customize/" tabindex="-1">Customize</a></li>
|
||||
<li><a href="/en-US/firefox/performance/" tabindex="-1">Performance</a></li>
|
||||
<li><a href="{{ url('mozorg.firefox_customize') }}" tabindex="-1">Customize</a></li>
|
||||
<li><a href="{{ url('mozorg.firefox_performance') }}" tabindex="-1">Performance</a></li>
|
||||
<li><a href="/en-US/firefox/technology/" tabindex="-1">Technology</a></li>
|
||||
<li class="last"><a href="{{ url('mozorg.firefox_security') }}" tabindex="-1">Privacy & Security</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
{% extends "/mozorg/firefox/base.html" %}
|
||||
|
||||
{% block page_title %}Mozilla Firefox Web Browser — Customize Your Browser{% endblock %}
|
||||
{% block body_id %}firefox-customize{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('firefox-customize') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox-customize') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div id="main-feature">
|
||||
<div class="row">
|
||||
<hgroup>
|
||||
<h1>Easy Ways To <span class="large">Personalize</span></h1>
|
||||
<h4>When it comes to browsing, one size doesn’t fit all—customize Firefox pretty much any way you like!</h4>
|
||||
</hgroup>
|
||||
|
||||
<aside id="go-mobile">
|
||||
<h5>Go Mobile</h5>
|
||||
<p>Get add-ons on your mobile, too! Just <a href="https://addons.mozilla.org/en-US/mobile/?browse=featured">visit the mobile add-ons page</a> on your Android device to search and install.</p>
|
||||
</aside>
|
||||
|
||||
{{ download_button('download', 'small') }}
|
||||
|
||||
<script src="/media/js/download.js"></script>
|
||||
<script type="text/javascript">
|
||||
offerBestDownloadLink('download');
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="menu-bar billboard">
|
||||
<ul>
|
||||
<li><a href="#style">Add Style: <span>Personas</span></a></li>
|
||||
<li><a href="#addons">Customize: <span>Add-ons</span></a></li>
|
||||
<li><a href="#plugins">Make It Work: <span>Plugins</span></a></li>
|
||||
<li><a href="#interface">Adapt Your <span>Interface</span></a></li>
|
||||
<li><a href="#sync">Stay In <span>Sync</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="container divider" id="style">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Add Style: <span>Personas</span></h3>
|
||||
<p>Make Firefox match your style! Choose from thousands of <a href="http://www.getpersonas.com/">Personas</a> designed by users around the world, or <a href="http://www.getpersonas.com/en-US/demo_create">create one yourself</a>. With a single click you can dress up your browser however you want.</p>
|
||||
</div>
|
||||
<div id="persona-previews" class="span7">
|
||||
<div id="try-on"><p>Roll over to try, click to apply</p></div>
|
||||
<div class="persona-previewer persona-previewer-random">
|
||||
<div class="persona-previewer-content">
|
||||
<div id="persona-tattoo" class="persona-visible"><img src="{{ media('img/firefox/customize/personas-tattoo.png') }}" width="344" height="174" alt="preview" /></div>
|
||||
<div id="persona-endless"><img src="{{ media('img/firefox/customize/personas-endless.png') }}" width="344" height="174" alt="preview" /></div>
|
||||
<div id="persona-kanagawa"><img src="{{ media('img/firefox/customize/personas-kanagawa.png') }}" width="344" height="174" alt="preview" /></div>
|
||||
|
||||
<div id="persona-retronotes"><img src="{{ media('img/firefox/customize/personas-retronotes.png') }}" width="344" height="174" alt="preview" /></div>
|
||||
<div id="persona-bobmarley"><img src="{{ media('img/firefox/customize/personas-bobmarley.png') }}" width="344" height="174" alt="preview" /></div>
|
||||
<div id="persona-sunset"><img src="{{ media('img/firefox/customize/personas-sunset.png') }}" width="344" height="174" alt="preview" /></div>
|
||||
</div>
|
||||
<ul class="persona-previewer-tabs">
|
||||
<li><a href="http://www.getpersonas.com/en-US/persona/7610"><img src="http://www.getpersonas.com/static/1/0/7610/preview.jpg" width="138" height="46" alt="Japanese Tattoo" /></a></li>
|
||||
<li><a href="http://www.getpersonas.com/en-US/persona/30987"><img src="http://www.getpersonas.com/static/8/7/30987/preview.jpg" width="138" height="46" alt="Endless Possibilities" /></a></li>
|
||||
<li><a href="http://www.getpersonas.com/en-US/persona/141882"><img src="http://www.getpersonas.com/static/8/2/141882/preview.jpg" width="138" height="46" alt="kanagawa wave" /></a></li>
|
||||
<li><a href="http://www.getpersonas.com/en-US/persona/213203"><img src="http://www.getpersonas.com/static/0/3/213203/preview.jpg" width="138" height="46" alt="Retro Notes Reloaded" /></a></li>
|
||||
<li><a href="http://www.getpersonas.com/en-US/persona/44136"><img src="http://www.getpersonas.com/static/3/6/44136/preview.jpg" width="138" height="46" alt="Bob Marley" /></a></li>
|
||||
<li><a href="http://www.getpersonas.com/en-US/persona/64769"><img src="http://www.getpersonas.com/static/6/9/64769/preview.jpg" width="138" height="46" alt="Sunset Over Water" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p id="see-all-personas"><a href="http://www.getpersonas.com/en-US/gallery/" class="feature arrow">See all 180,000+ »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="container divider" id="addons">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Customize: <span>Add-ons</span></h3>
|
||||
<p>Many of the most popular add-ons are extensions, little extras you download to add more bells & whistles to Firefox. Compare prices, check the weather, listen to music, update your Facebook profile – all built right into the browser! There are <a href="https://addons.mozilla.org/firefox/">thousands to choose from</a>, but here are a few of our favorites:</p>
|
||||
</div>
|
||||
<div id="addons-feature" class="span7">
|
||||
<div id="addons-video" class="mozilla-video-control mozilla-video-shadow">
|
||||
<video
|
||||
id="video"
|
||||
width="620"
|
||||
height="349"
|
||||
poster="{{ media('img/firefox/video/poster-addons.jpg') }}"
|
||||
controls="controls">
|
||||
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/696470/FF%20576%20h264%20v6.webm" type="video/webm" />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/696470/FF%20576%20h264%20v6.theora.ogv" type="video/ogg; codecs="theora, vorbis"" />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/696470/FF%20576%20h264%20v6.mp4" type="video/mp4" />
|
||||
|
||||
<object type="application/x-shockwave-flash"
|
||||
style="width: 640px; height: 388px;"
|
||||
data="/includes/flash/playerWithControls.swf?flv=serv/marketing/696470/FF%20576%20h264%20v6.mp4&autoplay=false&msg=Play%20Video">
|
||||
<param name="movie" value="/includes/flash/playerWithControls.swf?flv=serv/marketing/696470/FF%20576%20h264%20v6.mp4&autoplay=false&msg=Play%20Video" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">
|
||||
This video requires a browser with support for open video
|
||||
or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
|
||||
</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<p id="builder-link">Are you a web developer? <a href="https://addons.mozilla.org/en-US/developers/builder">Learn how to make fantastic, restartless add-ons.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container divider" id="plugins">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Make It Work: <span>Plugins</span></h3>
|
||||
<p>Plugins are small bits of third-party software built by companies like Adobe Systems or Apple to power videos, animation and games (examples include Flash Player or Quicktime). They can cause browser crashes or pose security risks when they get out of date, so we’ve built an easy tool to help you stay current. <a href="/en-US/plugincheck/">Check your plugins.</a></p>
|
||||
</div>
|
||||
<div class="span7">
|
||||
<!-- TODO: platformImage -->
|
||||
<img src="{{ media('img/firefox/customize/make-it-work.png') }}" alt="Make It Work: Plugins" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container divider" id="interface">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Adapt Your <span>Interface</span></h3>
|
||||
<p>The Firefox interface has been designed by a team of experts and tested by a community of millions of users around the world to make sure your browsing is as easy and intuitive as possible.</p>
|
||||
<p>But, everyone has their own specific needs, and you can always adjust the interface to be exactly the way you like it: re-arrange, organize, add or remove buttons or fields to change your browsing experience however you want. <a href="https://support.mozilla.org/kb/How%20to%20customize%20the%20toolbar">Learn more.</a></p>
|
||||
</div>
|
||||
<div class="span7">
|
||||
<!-- TODO: platformImage -->
|
||||
<img src="{{ media('img/firefox/customize/adapt-your-interface.png') }}" alt="Adapt Your Interface" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container divider-last" id="sync">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Stay In <span>Sync</span></h3>
|
||||
<p>Sync seamlessly connects your desktop and mobile Firefoxes, so you can access your browsing history, passwords, bookmarks and even open tabs no matter which device you use.</p>
|
||||
<p>Now you can surf the Web on your desktop, get up in the middle of browsing and have your open tabs ready and waiting on your mobile, just as you left them. Your browsing will never be the same! <a href="/en-US/mobile/sync/">Learn more.</a></p>
|
||||
</div>
|
||||
<div class="span7">
|
||||
<div id="video-player" class="mozilla-video-control">
|
||||
<video
|
||||
id="video"
|
||||
width="620"
|
||||
height="349"
|
||||
poster="{{ media('img/firefox/video/poster-fx4-sync.jpg') }}"
|
||||
controls="controls">
|
||||
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/FoxySync640.webm" type="video/webm" />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/FoxySync640.theora.ogv" type="video/ogg; codecs="theora, vorbis"" />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/FoxySync640.mp4" type="video/mp4" />
|
||||
|
||||
<object type="application/x-shockwave-flash"
|
||||
style="width: 640px; height: 388px;"
|
||||
data="/includes/flash/playerWithControls.swf?flv=serv/marketing/firefox4/FoxySync640.mp4&autoplay=false&msg=Play%20Video">
|
||||
<param name="movie" value="/includes/flash/playerWithControls.swf?flv=serv/marketing/firefox4/FoxySync640.mp4&autoplay=false&msg=Play%20Video" />
|
||||
<param name="wmode" value="transparent" />
|
||||
<div class="video-player-no-flash">
|
||||
This video requires a browser with support for open video
|
||||
or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
|
||||
</div>
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -44,11 +44,10 @@
|
|||
id="video"
|
||||
width="640"
|
||||
height="360"
|
||||
poster="/media/img/firefox/performance/poster-runfield.jpg"
|
||||
poster="{{ media('img/firefox/performance/poster-runfield.jpg') }}"
|
||||
controls="controls">
|
||||
|
||||
<source src="http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/runfield/screencast.webm" type="video/webm" />
|
||||
|
||||
<source src="http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/runfield/screencast.theora.ogv" type="video/ogg; codecs="theora, vorbis"" />
|
||||
<source src="http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/runfield/screencast.mp4" type="video/mp4" />
|
||||
|
||||
|
|
@ -60,16 +59,8 @@
|
|||
<param name="wmode" value="transparent" />
|
||||
|
||||
<div class="video-player-no-flash">
|
||||
This video requires a browser with support for open video:
|
||||
/
|
||||
<ul>
|
||||
|
||||
<li><a href="http://www.mozilla.org/firefox/">Firefox</a> 3.5 or greater</li>
|
||||
<li><a href="http://www.apple.com/safari/">Safari</a> 3.1 or greater</li>
|
||||
</ul>
|
||||
|
||||
or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
|
||||
Alternatively, you may use the video download links to the right.
|
||||
This video requires a browser with support for open video
|
||||
or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
|
||||
</div>
|
||||
|
||||
</object>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
from django.conf.urls.defaults import *
|
||||
from views import contribute, channel, firefox_performance, firefox_security, button, new, sandstone, geolocation
|
||||
from views import contribute, channel, firefox_performance, firefox_customize, firefox_security, button, new, sandstone, geolocation
|
||||
|
||||
|
||||
urlpatterns = patterns('',
|
||||
|
|
@ -10,6 +10,7 @@ urlpatterns = patterns('',
|
|||
(r'^sandstone/', sandstone),
|
||||
|
||||
(r'^firefox/geolocation/', geolocation),
|
||||
url(r'^firefox/customize/', firefox_customize, name='mozorg.firefox_customize'),
|
||||
url(r'^firefox/security/', firefox_security, name='mozorg.firefox_security'),
|
||||
url(r'^firefox/performance/', firefox_performance, name='mozorg.firefox_performance'),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ def index(request):
|
|||
def contribute(request):
|
||||
return l10n_utils.render(request, "mozorg/contribute.html")
|
||||
|
||||
def firefox_customize(request):
|
||||
return l10n_utils.render(request, "mozorg/firefox/customize.html")
|
||||
|
||||
def firefox_security(request):
|
||||
return l10n_utils.render(request, "mozorg/firefox/security.html")
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
@import "template.less";
|
||||
|
||||
#main-feature hgroup {
|
||||
.span(7);
|
||||
}
|
||||
|
||||
#main-feature #go-mobile {
|
||||
.span(3);
|
||||
margin-top: @baseLine * 4;
|
||||
border-bottom: 1px dotted @borderColor;
|
||||
p {
|
||||
.small;
|
||||
}
|
||||
}
|
||||
|
||||
nav.menu-bar {
|
||||
line-height: 100%;
|
||||
ul li {
|
||||
padding-top: (@baseLine / 2);
|
||||
padding-bottom: (@baseLine / 2);
|
||||
a span {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Persona previews
|
||||
|
||||
#try-on {
|
||||
padding-bottom: 0;
|
||||
padding-left: 315px;
|
||||
}
|
||||
|
||||
#try-on.fx36 {
|
||||
padding-left: 358px;
|
||||
}
|
||||
|
||||
#try-on p {
|
||||
padding-right: 30px;
|
||||
background: url(/media/img/firefox/customize/arrow.png) 100% 100% no-repeat;
|
||||
min-height: 26px;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.persona-previewer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.persona-previewer-content {
|
||||
float: left;
|
||||
margin: 4px 0 25px 0;
|
||||
}
|
||||
|
||||
.persona-previewer-content div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.persona-previewer-content div.persona-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.persona-previewer-tabs {
|
||||
padding: 20px 0 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
position: static;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.persona-previewer-tabs li {
|
||||
background: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
list-style: none;
|
||||
float:left;
|
||||
height: 46px;
|
||||
margin: 0 0 10px 0;
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
ul.persona-previewer-tabs li a,
|
||||
ul.persona-previewer-tabs li img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.persona-previewer-tabs li .selected {
|
||||
outline: 2px solid #79b;
|
||||
}
|
||||
|
||||
#see-all-personas {
|
||||
clear: left;
|
||||
margin-left: 350px;
|
||||
width: 220px;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -304,6 +304,7 @@ nav.menu-bar {
|
|||
.inline-block;
|
||||
margin: 0;
|
||||
a {
|
||||
.inline-block;
|
||||
border-left: 1px dotted @borderColor;
|
||||
padding: @baseLine / 3 @baseLine;
|
||||
}
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 38 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 60 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 40 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 43 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 19 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 84 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 19 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 54 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 43 KiB |
|
|
@ -0,0 +1,283 @@
|
|||
/**
|
||||
* Initializes pagers on this page after the document has been loaded
|
||||
*/
|
||||
$(document).ready(function ()
|
||||
{
|
||||
if (Mozilla.hasPersonas) {
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('src', Mozilla.PersonaPreviewer.LIVE_URL);
|
||||
iframe.setAttribute('id', 'persona-preview-frame');
|
||||
iframe.setAttribute('width', '100%');
|
||||
iframe.setAttribute('height', '180');
|
||||
|
||||
var previewers = $('.persona-previewer');
|
||||
|
||||
if (previewers.length > 0) {
|
||||
var previewer = previewers[0];
|
||||
previewer.parentNode.replaceChild(iframe, previewer);
|
||||
}
|
||||
|
||||
$('try-on').addClass('fx36');
|
||||
$('see-all-personas').addClass('fx36');
|
||||
|
||||
if (iframe.contentWindow.postMessage && iframe.addEventListener) {
|
||||
iframe.addEventListener('load', function () {
|
||||
iframe.contentWindow.postMessage("activatePersonas", "*");
|
||||
}, false);
|
||||
}
|
||||
|
||||
} else {
|
||||
var previewers = $('.persona-previewer').each(function (index, previewer) {
|
||||
new Mozilla.PersonaPreviewer(previewer);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// create namespace
|
||||
if (typeof Mozilla == 'undefined') {
|
||||
var Mozilla = {};
|
||||
}
|
||||
|
||||
Mozilla.hasPersonas = (function() {
|
||||
var hasPersonas = false;
|
||||
|
||||
var matches = navigator.userAgent.match(
|
||||
/Gecko\/[0-9]+ .*(Firefox|Namoroka|Minefield)\/([0-9]+\.[0-9]+)/
|
||||
);
|
||||
|
||||
if (matches !== null) {
|
||||
hasPersonas = (parseFloat(matches[2]) >= 3.6);
|
||||
}
|
||||
|
||||
return hasPersonas;
|
||||
})();
|
||||
|
||||
/**
|
||||
* Persona previewer widget
|
||||
*
|
||||
* @param DOMElement container
|
||||
*/
|
||||
Mozilla.PersonaPreviewer = function(container)
|
||||
{
|
||||
this.container = $(container);
|
||||
|
||||
this.page_container = this.container.find('div.persona-previewer-content');
|
||||
|
||||
// this.id = this.container.attr('id');
|
||||
this.pages_by_id = {};
|
||||
this.pages = [];
|
||||
this.previous_page = null;
|
||||
this.current_page = null;
|
||||
this.in_animation = null;
|
||||
this.out_animation = null;
|
||||
|
||||
this.random_start_page = this.container.hasClass('persona-previewer-random');
|
||||
|
||||
this.tabs = this.container.find('ul.persona-previewer-tabs');
|
||||
|
||||
// add pages
|
||||
var page_nodes = this.page_container.children('div');
|
||||
|
||||
var that = this;
|
||||
|
||||
// initialize pages with tabs
|
||||
var tab_nodes = this.tabs.find('a').each(function(index, tab_node) {
|
||||
that.addPersona(new Mozilla.Persona(page_nodes[index], index, $(tab_node)));
|
||||
});
|
||||
|
||||
// initialize current page
|
||||
var current_page = null;
|
||||
|
||||
if (this.pages.length > 0) {
|
||||
if (this.random_start_page) {
|
||||
this.setPersona(this.getPseudoRandomPersona());
|
||||
} else {
|
||||
var def_page = this.page_container.children('.default-page');
|
||||
|
||||
if (def_page) {
|
||||
var def_id;
|
||||
if (def_page.attr('id').substring(0, 5) == 'page-') {
|
||||
def_id = def_page.attr('id').substring(5);
|
||||
} else {
|
||||
def_id = def_page.attr('id');
|
||||
}
|
||||
this.setPersona(this.pages_by_id[def_id]);
|
||||
} else {
|
||||
this.setPersona(this.pages[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.LIVE_URL =
|
||||
'http://www.getpersonas.com/en-US/external/mozilla/';
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.getPseudoRandomPersona = function()
|
||||
{
|
||||
var page = null;
|
||||
|
||||
if (this.pages.length > 0) {
|
||||
var now = new Date();
|
||||
page = this.pages[now.getSeconds() % this.pages.length];
|
||||
}
|
||||
|
||||
return page;
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.PAGE_DURATION = 150; // milliseconds
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.prevPersonaWithAnimation = function()
|
||||
{
|
||||
var index = this.current_page.index - 1;
|
||||
if (index < 0) {
|
||||
index = this.pages.length - 1;
|
||||
}
|
||||
|
||||
this.setPersonaWithAnimation(this.pages[index]);
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.nextPersonaWithAnimation = function()
|
||||
{
|
||||
var index = this.current_page.index + 1;
|
||||
if (index >= this.pages.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
this.setPersonaWithAnimation(this.pages[index]);
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.addPersona = function(page)
|
||||
{
|
||||
this.pages_by_id[page.id] = page;
|
||||
this.pages.push(page);
|
||||
if (page.tab) {
|
||||
var that = this;
|
||||
$(page.tab).mouseover('mouseover', function (e) {
|
||||
e.preventDefault();
|
||||
that.setPersonaWithAnimation(page);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.update = function()
|
||||
{
|
||||
if (this.tabs) {
|
||||
this.updateTabs();
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.updateTabs = function()
|
||||
{
|
||||
var class_name = this.tabs.attr('class');
|
||||
class_name = class_name.replace(/pager-selected-[\w-]+/g, '');
|
||||
class_name = class_name.replace(/^\s+|\s+$/g,'');
|
||||
this.tabs.attr('class', class_name);
|
||||
|
||||
this.current_page.selectTab();
|
||||
this.tabs.addClass('pager-selected-' + this.current_page.id);
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.setPersona = function(page)
|
||||
{
|
||||
if (this.current_page !== page) {
|
||||
if (this.current_page) {
|
||||
this.current_page.deselectTab();
|
||||
this.current_page.hide();
|
||||
}
|
||||
|
||||
if (this.previous_page) {
|
||||
this.previous_page.hide();
|
||||
}
|
||||
|
||||
this.previous_page = this.current_page;
|
||||
|
||||
this.current_page = page;
|
||||
this.current_page.show();
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.setPersonaWithAnimation = function(page)
|
||||
{
|
||||
if (this.current_page !== page) {
|
||||
// deselect last selected page (not necessarily previous page)
|
||||
if (this.current_page) {
|
||||
this.current_page.deselectTab();
|
||||
}
|
||||
|
||||
var that = this;
|
||||
if (!this.in_animation) {
|
||||
this.previous_page = this.current_page;
|
||||
}
|
||||
this.page_container.stop(true);
|
||||
this.page_container.animate({opacity: 0}, Mozilla.PersonaPreviewer.PAGE_DURATION, function () {that.fadeInPersona()})
|
||||
this.in_animation = true;
|
||||
|
||||
// always set current page
|
||||
this.current_page = page;
|
||||
this.update();
|
||||
}
|
||||
|
||||
// for Safari 1.5.x bug setting window.location.
|
||||
return false;
|
||||
}
|
||||
|
||||
Mozilla.PersonaPreviewer.prototype.fadeInPersona = function()
|
||||
{
|
||||
if (this.previous_page) {
|
||||
this.previous_page.hide();
|
||||
}
|
||||
this.current_page.show();
|
||||
this.in_animation = false;
|
||||
this.page_container.animate({opacity: 1}, Mozilla.PersonaPreviewer.PAGE_DURATION);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param DOMElement element
|
||||
* @param DOMElement tab_element
|
||||
*/
|
||||
Mozilla.Persona = function(element, index, tab_element)
|
||||
{
|
||||
this.element = element;
|
||||
|
||||
this.index = index;
|
||||
|
||||
if (tab_element) {
|
||||
this.tab = tab_element;
|
||||
} else {
|
||||
this.tab = null;
|
||||
}
|
||||
|
||||
this.hide();
|
||||
}
|
||||
|
||||
Mozilla.Persona.prototype.selectTab = function()
|
||||
{
|
||||
if (this.tab) {
|
||||
this.tab.addClass('selected');
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.Persona.prototype.deselectTab = function()
|
||||
{
|
||||
if (this.tab) {
|
||||
this.tab.removeClass('selected');
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.Persona.prototype.focusTab = function()
|
||||
{
|
||||
if (this.tab) {
|
||||
this.tab.focus();
|
||||
}
|
||||
}
|
||||
|
||||
Mozilla.Persona.prototype.hide = function()
|
||||
{
|
||||
this.element.style.display = 'none';
|
||||
}
|
||||
|
||||
Mozilla.Persona.prototype.show = function()
|
||||
{
|
||||
this.element.style.display = 'block';
|
||||
}
|
||||
|
|
@ -64,6 +64,10 @@ MINIFY_BUNDLES = {
|
|||
'firefox': (
|
||||
'css/firefox/template.less',
|
||||
),
|
||||
'firefox-customize': (
|
||||
'css/sandstone/video.less',
|
||||
'css/firefox/customize.less',
|
||||
),
|
||||
'firefox-security': (
|
||||
'css/firefox/security.less',
|
||||
),
|
||||
|
|
@ -107,6 +111,10 @@ MINIFY_BUNDLES = {
|
|||
'js/libs/jquery-1.7.1.min.js',
|
||||
'js/nav-main.js',
|
||||
),
|
||||
'firefox-customize': (
|
||||
'js/mozilla-video-tools.js',
|
||||
'js/firefox/customize.js',
|
||||
),
|
||||
'geolocation': (
|
||||
'js/libs/jquery-1.4.4.min.js',
|
||||
'js/libs/jquery.nyroModal.pack.js',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче