Skip to content
This repository was archived by the owner on Nov 26, 2018. It is now read-only.

Commit 95cb121

Browse files
lanterndevlanterndev
committed
numerous fixes + improvements
- remove angular-bootstrap and angular-google-analytics dependencies which include $location to work around angular/angular.js#4608. - replace the bootstrap dropdown-toggle language chooser widget with a simple inline nav list in the footer. - show/hide faq's via ng-show/hide rather than bootstrap collapse directive. - call google analytics api directly instead of through angular-google-analytics. - create and use anchor links for each faq. - video fixes - closing the lightbox now pauses the video - reopening the lightbox now resumes playback from where you left off - required switching to youtube's iframe api: https://developers.google.com/youtube/iframe_api_reference - pull French translations from Transifex and adjust some css to accommodate the greater amount of space that strings take up in French. more tweaks needed.
1 parent d40c1f8 commit 95cb121

16 files changed

+175
-109
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ module.exports = function (grunt) {
249249
htmlmin: {
250250
dist: {
251251
options: {
252-
collapseWhitespace: true,
252+
collapseWhitespace: false, // setting to true messes up styles e.g. in footer
253253
removeComments: true,
254254
removeRedundantAttributes: true
255255
},

‎app.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
application: getlanternhr
2-
version: "2013-10-28-privacy"
2+
version: "2013-10-31-ga-faq-ytplayer-french"
33
runtime: python27
44
api_version: 1
55
threadsafe: yes

‎app/index.html

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -36,37 +36,18 @@
3636
<!-- site content starts here -->
3737
<div class="lightbox hide" lightbox>
3838
<a class="lightbox-close" lightbox-close>&times;</a>
39-
<div class="media-container"></div>
39+
<div class="media-container" id="player"></div>
4040
</div>
4141

4242
<div id="content-container">
4343
<header id="topbar" class="header">
44-
<nav class="lang-chooser btn-group dropdown pull-right">
45-
<a class="btn btn-inverse dropdown-toggle">
46-
<span class="icon-globe"></span>
47-
<!--<span class="active-lang">{{activeLang.name}}</span>-->
48-
<span class="caret"></span>
49-
</a>
50-
<ul class="lang-list dropdown-menu">
51-
<li ng-repeat="lang in LANGS" ng-show="NLANGS > 1">
52-
<a ng-show="lang.code == activeLang.code" class="active-lang">{{lang.name}}</a>
53-
<a ng-click="changeLang(lang.code)" ng-hide="lang.code == activeLang.code">{{lang.name}}</a>
54-
</li>
55-
<li class="divider" ng-show="NLANGS > 1"></li>
56-
<li>
57-
<a ng-href="{{HELP_TRANSLATE_URL}}" target="_blank" ng-bind-template="{{'HELP_TRANSLATE' | translate}}">
58-
Help Translate
59-
</a>
60-
</li>
61-
</ul>
62-
</nav>
6344
<!--
6445
<nav class="pull-right">
6546
<ul class="social-media-icons">
66-
<li><a target="_blank" ng-href="{{TWITTER_URL}}" target="_blank"><span class="icon-twitter"></span></a></li>
67-
<li><a target="_blank" ng-href="{{FACEBOOK_URL}}" target="_blank"><span class="icon-facebook"></span></a></li>
68-
<li><a target="_blank" ng-href="{{TUMBLR_URL}}" target="_blank"><span class="icon-tumblr"></span></a></li>
69-
<li class="github"><a target="_blank" ng-href="{{GITHUB_URL}}" target="_blank"><span class="icon-github"></span></a></li>
47+
<li><a target="_blank" ng-href="{{TWITTER_URL}}"><span class="icon-twitter"></span></a></li>
48+
<li><a target="_blank" ng-href="{{FACEBOOK_URL}}"><span class="icon-facebook"></span></a></li>
49+
<li><a target="_blank" ng-href="{{TUMBLR_URL}}"><span class="icon-tumblr"></span></a></li>
50+
<li><a target="_blank" ng-href="{{GITHUB_URL}}"><span class="icon-github"></span></a></li>
7051
</ul>
7152
</nav>
7253
-->
@@ -237,8 +218,9 @@ <h3 ng-bind-template="{{'QUESTIONS_AND_ANSWERS' | translate}}">Questions and Ans
237218
<li class="clearfix" ng-repeat="faq in faqs">
238219
<button ng-click="faq.expanded=!faq.expanded" class="pull-left">{{!faq.expanded && '+' || '-'}}</button>
239220
<div class="faq-item pull-left">
240-
<a ng-click="faq.expanded=!faq.expanded"><h5 ng-bind-template="{{faq.key + '_QUESTION' | translate}}"></h5></a>
241-
<div collapse="!faq.expanded" class="faq-answer">
221+
<a ng-href="#faq_{{faq.key|lowercase}}" name="faq_{{faq.key|lowercase}}"
222+
ng-click="faq.expanded=!faq.expanded"><h5 ng-bind-template="{{faq.key + '_QUESTION' | translate}}"></h5></a>
223+
<div ng-show="faq.expanded" class="faq-answer">
242224
<p ng-repeat="i in range(1, faq.nparagraphs)">
243225
<span ng-bind-html-unsafe="faq.key + '_ANSWER_' + i | translate"></span>
244226
</p>
@@ -282,29 +264,43 @@ <h2 class="screen-caption">Lantern in Action</h2>
282264
<img src="images/lantern-footer-logo.jpg" alt="Lantern" />
283265
</div>
284266

285-
<nav class="footer-links">
286-
<ul id="footer-navlink-list">
267+
<nav>
268+
<ul class="navlink-list main-nav">
287269
<li><a target="_blank" ng-href="{{FORUMS_URL}}" ng-bind-template="{{'FORUMS' | translate}}">Forums</a></li>
288270
<li><a target="_blank" ng-href="{{DOCS_URL}}" ng-bind-template="{{'DOCS' | translate}}">Docs</a></li>
289271
<li><a target="_blank" ng-href="{{PRIVACY_URL}}" ng-bind-template="{{'PRIVACY' | translate}}">Privacy</a></li>
290272
<li><a target="_blank" ng-href="{{GET_INVOLVED_URL}}" ng-bind-template="{{'GET_INVOLVED' | translate}}">Get Involved</a></li>
291273
</ul>
292274
</nav>
293275

294-
<nav class="footer-links">
276+
<nav>
295277
<!-- XXX DRY .social-media-icons in header -->
296278
<ul class="social-media-icons">
297-
<li><a target="_blank" ng-href="{{TWITTER_URL}}" target="_blank"><span class="icon-twitter"></span></a></li>
298-
<li><a target="_blank" ng-href="{{FACEBOOK_URL}}" target="_blank"><span class="icon-facebook"></span></a></li>
299-
<li><a target="_blank" ng-href="{{TUMBLR_URL}}" target="_blank"><span class="icon-tumblr"></span></a></li>
300-
<li class="github"><a target="_blank" ng-href="{{GITHUB_URL}}" target="_blank"><span class="icon-github"></span></a></li>
279+
<li><a target="_blank" ng-href="{{TWITTER_URL}}"><span class="icon-twitter"></span></a></li>
280+
<li><a target="_blank" ng-href="{{FACEBOOK_URL}}"><span class="icon-facebook"></span></a></li>
281+
<li><a target="_blank" ng-href="{{TUMBLR_URL}}"><span class="icon-tumblr"></span></a></li>
282+
<li><a target="_blank" ng-href="{{GITHUB_URL}}"><span class="icon-github"></span></a></li>
301283
<!--
302284
<li><a target="_blank" ng-href="{{GOOGLEPLUS_URL}}" target="_blank"><span class="icon-googleplus"></span></a></li>
303285
<li><a target="_blank" ng-href="{{YOUTUBE_URL}}" target="_blank"><span class="icon-youtube"></span></a></li>
304286
-->
305287
</ul>
306288
</nav>
307289

290+
<nav ng-show="NLANGS > 1">
291+
<ul class="navlink-list lang-list">
292+
<li ng-repeat="lang in LANGS">
293+
<a ng-show="lang.code == activeLang.code" class="active-lang">{{lang.name}}</a>
294+
<a ng-href="#{{lang.code}}" ng-hide="lang.code == activeLang.code" ng-click="changeLang(lang.code)">{{lang.name}}</a>
295+
</li>
296+
<li>
297+
<a ng-href="{{HELP_TRANSLATE_URL}}" target="_blank" ng-bind-template="{{'HELP_TRANSLATE' | translate}}">
298+
Help Translate
299+
</a>
300+
</li>
301+
</ul>
302+
</nav>
303+
308304
<div class="copyright">
309305
<p ng-bind-template="{{'COPYRIGHT' | translate}}">© 2013 Brave New Software</p>
310306
</div>
@@ -313,27 +309,20 @@ <h2 class="screen-caption">Lantern in Action</h2>
313309
<!-- site content ends here -->
314310

315311
<script>
316-
window.session = {
317-
options: {
318-
gapi_location: false
319-
}
320-
/*
321-
,start: function (session) {
322-
console.debug('session:', session);
323-
}*/
324-
};
312+
window.session = {options: {gapi_location: false}};
325313
</script>
326314

327315
<!-- these get automatically minified and concatenated at build time -->
328316
<!-- build:js scripts/loadlast.js -->
329317
<script src="bower_components/session.js/session.js"></script>
330318
<script src="bower_components/angular/angular.js"></script>
331319
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
332-
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
333-
<script src="bower_components/angular-google-analytics/src/angular-google-analytics.js"></script>
334320
<script src="bower_components/angular-translate/angular-translate.js"></script>
335321
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
336322

323+
<!-- local copy of google analytics -->
324+
<script src="scripts/lib/analytics.js"></script>
325+
337326
<script src="scripts/app.js"></script>
338327
<script src="scripts/constants.js"></script>
339328
<script src="scripts/controllers/download.js"></script>

‎app/scripts/app.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
angular.module('GetLanternSiteApp', [
44
'ngCookies',
5-
'pascalprecht.translate',
6-
'ui.bootstrap',
7-
'angular-google-analytics'
5+
'pascalprecht.translate'
86
],
97
['$translateProvider', 'constants', 'translations', function ($translateProvider, constants, translations) {
108
angular.forEach(translations, function (transTable, langCode) {
@@ -40,7 +38,11 @@ angular.module('GetLanternSiteApp', [
4038
return bestMatch;
4139
}
4240
}])
43-
.run(['$rootScope', '$translate', 'constants', function ($rootScope, $translate, constants) {
41+
.run(['$rootScope', '$translate', '$window', 'constants', function ($rootScope, $translate, $window, constants) {
42+
if ($window.ga) {
43+
$window.ga('create', constants.GA_WEBPROP_ID);
44+
$window.ga('send', 'pageview');
45+
}
4446
constants.NLANGS = Object.keys(constants.LANGS).length;
4547
angular.forEach(constants, function (value, key) {
4648
$rootScope[key] = value;
@@ -51,7 +53,4 @@ angular.module('GetLanternSiteApp', [
5153
$rootScope.activeLang = constants.LANGS[langCode];
5254
$translate.uses(langCode);
5355
};
54-
}])
55-
.config(['AnalyticsProvider', 'constants', function (AnalyticsProvider, constants) {
56-
AnalyticsProvider.setAccount(constants.GA_ACCOUNT_ID);
5756
}]);

‎app/scripts/constants.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ angular.module('GetLanternSiteApp')
4545
dir: 'ltr'
4646
}*/
4747
},
48-
GA_ACCOUNT_ID: 'UA-21815217-1', // google analytics
48+
GA_WEBPROP_ID: 'UA-21815217-1', // google analytics
4949
SIGNUP_URL: 'https://getlantern.us2.list-manage.com/subscribe/post?u=0ac18298d5d0330dcda8f48aa&id=f06770f311',
5050
FORUMS_URL: 'https://groups.google.com/group/lantern-users-en',
5151
DOCS_URL: 'https://github.com/getlantern/lantern/wiki',

‎app/scripts/controllers/download.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,10 @@ angular.module('GetLanternSiteApp')
66
'$rootScope',
77
'$scope',
88
'$timeout',
9-
'Analytics',
109
'constants',
1110
'installerDataFetcher',
1211
'osSniffer',
13-
function ($log, $rootScope, $scope, $timeout, Analytics, constants, installerDataFetcher, osSniffer) {
12+
function ($log, $rootScope, $scope, $timeout, constants, installerDataFetcher, osSniffer) {
1413
// have to bind to rootScope to work in IE8?
1514
if (/lt-ie9/.test((document.getElementById('ng-app') || {}).className)) {
1615
$scope = $rootScope;
@@ -58,13 +57,13 @@ angular.module('GetLanternSiteApp')
5857
location.href = $scope.data[$scope.selectedOS].url;
5958
}, 500);
6059
}
61-
Analytics.trackEvent('download', 'clicked', osSniffer.os);
60+
//Analytics.trackEvent('download', 'clicked', osSniffer.os);
6261
};
6362

6463
$scope.selectOS = function (os) {
6564
$scope.downloadClicked = false;
6665
$scope.selectedOS = os;
67-
Analytics.trackEvent('selectOS', 'clicked', os);
66+
//Analytics.trackEvent('selectOS', 'clicked', os);
6867
};
6968

7069
$scope.icnClassFor = {
@@ -77,7 +76,7 @@ angular.module('GetLanternSiteApp')
7776
$scope.isUbuntu = function (key) {
7877
return (/UBUNTU/).test(key);
7978
};
80-
79+
8180

8281
$scope.faqs = [ {
8382
key : "SAFE_TO_USE",
@@ -123,7 +122,7 @@ angular.module('GetLanternSiteApp')
123122
nparagraphs : 1
124123
}
125124
];
126-
125+
127126
/**
128127
* Generates a range of numbers from start to end (inclusive)
129128
*/
@@ -134,4 +133,4 @@ angular.module('GetLanternSiteApp')
134133
}
135134
return result;
136135
}
137-
}]);
136+
}]);

‎app/scripts/directives/lightbox.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ angular.module('GetLanternSiteApp')
66
$rootScope.lightbox = element;
77
};
88
}])
9-
.directive('lightboxClose', ['$rootScope', function ($rootScope) {
9+
.directive('lightboxClose', ['$rootScope', '$window', function ($rootScope, $window) {
1010
return function (scope, element) {
1111
element.bind('click', function () {
1212
var $lightbox = $rootScope.lightbox;
1313
$lightbox.addClass('hide');
14+
$window.player.pauseVideo();
1415
});
1516
};
1617
}]);

‎app/scripts/directives/videoOnClick.js

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,49 @@
11
'use strict';
22

33
angular.module('GetLanternSiteApp')
4-
.directive('videoOnClick', ['$rootScope', '$translate', 'constants', function ($rootScope, $translate, constants) {
4+
.directive('videoOnClick', ['$rootScope', '$translate', '$window', 'constants', function ($rootScope, $translate, $window, constants) {
55
return function (scope, element) {
66
element.bind('click', function () {
7-
var $lightbox = $rootScope.lightbox,
8-
lightbox = $lightbox[0],
9-
$container = $lightbox.find('div'),
10-
container = $container[0];
7+
var $lightbox = $rootScope.lightbox;
118
$lightbox.removeClass('hide');
12-
var width = container.scrollWidth,
13-
height = container.scrollHeight;
14-
$container.html(
15-
'<iframe id="ytplayer" type="text/html" width="'+width+'" height="'+height+'" '+
16-
'src="https://www.youtube.com/embed/4TY4IVnMO98?origin=getlantern.org&'+
17-
'autoplay=1&enablejsapi=1&rel=0&showinfo=0&autohide=1'+
18-
(width >= 1080 ? '&vq=hd1080' : (width >= 720 ? '&vq=hd720' : ''))+
19-
('en' === $translate.uses().substring(0, 2) ? '' : '&cc_load_policy=1')+
20-
'" frameborder="0" allowfullscreen>'
21-
);
9+
10+
if ($rootScope.initializedVideo) {
11+
$window.player.playVideo();
12+
} else {
13+
var lightbox = $lightbox[0],
14+
$container = $lightbox.find('div'),
15+
container = $container[0],
16+
width = container.scrollWidth,
17+
height = container.scrollHeight,
18+
ytScriptTag = document.createElement('script'),
19+
firstScriptTag = document.getElementsByTagName('script')[0];
20+
21+
ytScriptTag.src = 'https://www.youtube.com/iframe_api';
22+
firstScriptTag.parentNode.insertBefore(ytScriptTag, firstScriptTag);
23+
24+
$window.onYouTubeIframeAPIReady = function () {
25+
$window.player = new $window.YT.Player('player', {
26+
height: height,
27+
width: width,
28+
videoId: '4TY4IVnMO98',
29+
playerVars: {
30+
autohide: 1,
31+
autoplay: 1,
32+
cc_load_policy: 'en' === $translate.uses().substring(0, 2) ? 0 : 1,
33+
origin: 'getlantern.org',
34+
rel: 0,
35+
showinfo: 0
36+
},
37+
events: {onReady: $window.onPlayerReady}
38+
});
39+
};
40+
41+
$window.onPlayerReady = function (event) {
42+
event.target.playVideo();
43+
};
44+
45+
$rootScope.initializedVideo = true;
46+
}
2247
});
2348
};
2449
}]);

0 commit comments

Comments
 (0)