Skip to content

Loading…

Create a dialog service and a popover directive and use that for Downloa... #36

Closed
wants to merge 4 commits into from

4 participants

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 27, 2012
  1. @michalstanko
Commits on Nov 7, 2012
  1. @mhevery

    Merge pull request #33 from shyamseshadri/fix-youtube

    mhevery committed
    Fix broken youtube tutorial links on main page
  2. @mhevery

    Merge pull request #31 from michalstanko/patch-1

    mhevery committed
    Typo fixed: "to abstracts" -> "to abstract"
Commits on Nov 26, 2012
  1. @shyamseshadri
This page is out of date. Refresh to see the latest.
Showing with 141 additions and 90 deletions.
  1. +0 −8 css/docs.css
  2. +3 −53 index.html
  3. +106 −29 js/homepage.js
  4. +32 −0 partials/download-dialog-body.html
View
8 css/docs.css
@@ -177,14 +177,6 @@ img.cache {
.modal.fade.in {
top: 40%;
}
-#downloadModalBackdrop {
- display: none;
- z-index: -2000;
-}
-#downloadModalBackdrop.fade.in {
- display: block;
- z-index: 1040;
-}
.popover {
z-index: 1200;
View
56 index.html
@@ -92,7 +92,7 @@
value:a("$provide","value"),constant:a("$provide","constant","unshift"),filter:a("$filterProvider","register"),controller:a("$controllerProvider","register"),directive:a("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
</script>
</head>
-<body ng-controller="DownloadCtrl">
+<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
@@ -185,7 +185,7 @@
</a>
<span class="spacer"></span>
- <a class="btn btn-large btn-primary" href="" ng-click="lightbox('stable')">
+ <a class="btn btn-large btn-primary" href="" ng-click="showDownloadDialog()">
<i class="icon-download-alt icon-large"></i> Download
<span class="version"> (<span>1.0.2/1.1.0</span>) </span>
</a>
@@ -735,7 +735,7 @@ <h1 id="embed-and-inject">Embed and Inject</h1>
, "ng-disabled": "Disable the 'Save' button when the form has not been filled in or is invalid."
}
, "mongolab.js":
- { "'mongolab'": "Declares the <code>mongolab</code> module. You use modules to configure existing services, and define new services, directives, filters, and so on. Here, we’ll set up <code>Project</code> class to abstracts server communication."
+ { "'mongolab'": "Declares the <code>mongolab</code> module. You use modules to configure existing services, and define new services, directives, filters, and so on. Here, we’ll set up <code>Project</code> class to abstract server communication."
, "'ngResource'": "We depend on AngularJS <code>ngResource</code> module which provides a generic interface to RESTful services."
, "factory": "Use the module's <code>factory</code> method to define new services. Any service defined here will then be automatically injected anywhere your application requests it."
, "Project": "Here is a service definition for the <code>Project</code> resource class. The class will represent the data associated with each 'project'. It has methods for retrieving and storing the data."
@@ -881,55 +881,5 @@ <h1 id="embed-and-inject">Embed and Inject</h1>
</script>
</div>
- <!-- The Download Modal that is to be shown when the user clicks on Download in the main AngularJS.org page -->
- <div class="modal fade downloadModal" id="downloadModal" ng-class="{in: lightbox()}">
- <div class="modal-header">
- <button type="button" class="close" ng-click="lightbox(false)">×</button>
- <h2 id="downloadLabel">Download AngularJS</h2>
- </div>
- <div class="modal-body">
-
- <dl class="dl-horizontal">
- <dt>Branch</dt>
- <dd>
- <span>
- <span class="btn-group" data-toggle="buttons-radio">
- <button id="bluePill" type="button" ng-class="getPillClass('stable', currentBranch)" class="btn bluePill" ng-click="selectType('stable')">Stable</button>
- <button id="redPill" type="button" ng-class="getPillClass('unstable', currentBranch)" class="btn redPill" ng-click="selectType('unstable')">Unstable</button>
- </span>
- <a id="extraInfoBranch" href="" rel="popover" data-original-title="Branches" data-content="<dl class='dl-horizontal'><dt>Stable</dt><dd>The Release has been well tested, and the API for this version will not undergo any further change.</dd><dt>Unstable</dt><dd>This version is still being worked on, and API's are subject to change without any prior notice. Use only if you want to remain on the most cutting edge...</dd></dl>"><i class="icon-question-sign"></i></a>
- </span>
-
- </dd>
- <dt>Build</dt>
- <dd>
- <span>
- <span class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn" ng-class="getPillClass('minified', currentBuild)" ng-click="selectBuild('minified')" ng-class="get">Minified</button>
- <button type="button" class="btn" ng-class="getPillClass('uncompressed', currentBuild)" ng-click="selectBuild('uncompressed')">Uncompressed</button>
- <button type="button" class="btn" ng-class="getPillClass('zipped', currentBuild)" ng-click="selectBuild('zipped')">Zip</button>
- </span>
- <a id="extraInfoBuild" href="" rel="popover" data-original-title="Branches" data-content="<dl class='dl-horizontal'><dt>Minified</dt><dd>Minified and obfuscated version of the AngularJS base code. Use this in your deployed application (but only if you can't use Google's CDN)</dd><dt>Uncompressed</dt><dd>The main AngularJS source code, as is. Useful for debugging and development purpose, but should ideally not be used in your deployed application</dd><dt>Zipped</dt><dd>The zipped version of the Angular Build, which contains both the builds of AngularJS, as well as documentation and other extras</dd></dl>"><i class="icon-question-sign"></i></a>
- </span>
-
- </dd>
- <dt>CDN</dt>
- <dd>
- <span class="input-append">
- <input class="input-xxlarge" type="text" readonly="readonly" ng-model="cdnURL">
- <a id="extraInfoCDN" href="" rel="popover" data-original-title="Why Google CDN?" data-content="While downloading and using the AngularJS source code is great for development, we recommend that you source the script from Google's CDN (Content Delivery Network) in your deployed, customer facing app whenever possible. You get the following advantages for doing so: <ul><li><strong>Better Caching :</strong> If you host AngularJS yourself, your users will have to download the source code atleast once. But if the browser sees that you are referring to Google CDN's version of AngularJS, and your user has visited another app which uses AngularJS, then he can avail the benefits of caching, and thus reduce one download, speeding up his overall experience!</li><li><strong>Decreased Latency :</strong> Google's CDN distributes your static content across the globe, in various diverse, physical locations. It increases the odds that the user gets a version of AngularJS served from a location near him, thus reducing overall latency.</li><li><strong>Increased Parallelism : </strong>Using Google's CDN reduces one request to your domain. Depending on the browser, the number of parallel requests it can make to a domain is restricted (as low as 2 in IE 7). So it can make a gigantic difference in loading times for users of those browsers.</li></ul>"><i class="icon-question-sign"></i></a>
- </span>
- </dd>
- </dl>
-
- </div>
- <div class="modal-footer">
- <a ng-href="http://code.angularjs.org/{{getVersion(currentBranch)}}">Extras</a>
- <a href="http://code.angularjs.org/">Previous Versions</a>
-
- <a class="btn btn-primary btn-large" style="float: right; font-size: 20px; padding-left: 20px;" ng-href="{{downloadLink()}}" download><i class="icon-download-alt icon-large"></i> Download</a>
- </div>
- </div>
- <div id="downloadModalBackdrop" class="modal-backdrop fade" ng-class="{in: lightbox()}" ng-click='lightbox(false)'></div>
</body>
</html>
View
135 js/homepage.js
@@ -302,6 +302,97 @@ angular.module('homepage', [])
}
})
+ .factory('createDialog', ["$document","$compile","$rootScope","$controller", "$timeout",
+ function ($document, $compile, $rootScope, $controller, $timeout) {
+ var defaults = {
+ id: null,
+ title: 'Default Title',
+ backdrop: true,
+ success: {label: 'OK', fn: null},
+ controller: null, //just like route controller declaration
+ backdropClass: "modal-backdrop",
+ footerTemplate: null,
+ modalClass: "modal"
+ };
+ var body = $document.find('body');
+
+ return function Dialog(template, options) {
+ options = angular.extend({}, defaults, options); //options defined in constructor
+
+ var idAttr = options.id ? ' id="' + options.id + '" ' : '';
+ var defaultFooter = '<button class="btn" ng-click="$modalCancel()">Close</button>' +
+ '<button class="btn btn-primary" ng-click="$modalSuccess()">{{$modalSuccessLabel}}</button>'
+ var footerTemplate = '<div class="modal-footer">' +
+ (options.footerTemplate || defaultFooter) +
+ '</div>';
+ //We don't have the scope we're gonna use yet, so just get a compile function for modal
+ var modalEl = angular.element(
+ '<div class="' + options.modalClass + ' fade"' + idAttr + '>' +
+ ' <div class="modal-header">' +
+ ' <button type="button" class="close" ng-click="$modalCancel()">x</button>' +
+ ' <h2>{{$title}}</h2>' +
+ ' </div>' +
+ ' <div class="modal-body" ng-include="\'' + template + '\'"></div>' +
+ footerTemplate +
+ '</div>');
+
+
+ var backdropEl = angular.element('<div ng-click="$modalCancel()">');
+ backdropEl.addClass(options.backdropClass);
+ backdropEl.addClass('fade in');
+
+ var handleEscPressed = function(event) {
+ if (event.keyCode === 27) {
+ scope.$modalCancel();
+ }
+ };
+
+ var closeFn = function() {
+ body.unbind('keydown', handleEscPressed);
+ modalEl.remove();
+ if (options.backdrop) {
+ backdropEl.remove();
+ }
+ };
+
+ body.bind('keydown', handleEscPressed);
+
+ var ctrl, locals,
+ scope = options.scope || $rootScope.$new();
+
+ scope.$title = options.title;
+ scope.$modalCancel = closeFn;
+ scope.$modalSuccess = options.success.fn || closeFn;
+ scope.$modalSuccessLabel = options.success.label;
+
+ if (options.controller) {
+ locals = angular.extend({$scope: scope});
+ ctrl = $controller(options.controller, locals);
+ modalEl.contents().data('$ngControllerController', ctrl);
+ }
+
+ $compile(modalEl)(scope);
+ $compile(backdropEl)(scope);
+ body.append(modalEl);
+ if (options.backdrop) body.append(backdropEl);
+
+ $timeout(function() {
+ modalEl.addClass('in');
+ }, 200);
+ };
+ }])
+
+ .directive('popover', function() {
+ return function(scope, element, attrs) {
+ $(element[0]).popover({
+ placement: 'left',
+ trigger: 'hover',
+ delay: {hide: '300'}
+ });
+
+ };
+ })
+
.controller('DownloadCtrl', function($scope, $location) {
var CURRENT_STABLE_VERSION = '1.0.2';
var CURRENT_UNSTABLE_VERSION = '1.1.0';
@@ -318,15 +409,10 @@ angular.module('homepage', [])
}
};
- var currentBranch = false;
-
$scope.currentBranch = 'stable';
$scope.currentBuild = 'minified';
$scope.selectType = function(type) {
- if (type === false) {
- return;
- }
$scope.currentBranch = type || 'stable';
$scope.updateCdnLink();
};
@@ -339,34 +425,13 @@ angular.module('homepage', [])
$scope.currentBuild = build;
$scope.updateCdnLink();
};
- angular.forEach(['#extraInfoBranch', '#extraInfoBuild', '#extraInfoCDN'], function(id) {
- $(id).popover({
- placement: 'left',
- trigger: 'hover',
- delay: {hide: '300'}
- });
- });
+
$scope.getPillClass = function(pill, actual) {
return pill === actual ? 'active' : '';
};
- window.onkeydown = function (ev) {
- if (ev.keyCode === 27 && currentBranch) {
- $scope.lightbox(false);
- $scope.$apply();
- }
- }
-
- $scope.lightbox = function(arg) {
- if (typeof arg !== 'undefined') {
- currentBranch = arg;
- $scope.selectType(currentBranch);
- }
- return currentBranch;
- };
-
$scope.downloadLink = function() {
- if ($scope.cdnURL && $scope.cdnURL.indexOf('http://') == 0) {
+ if ($scope.cdnURL && $scope.cdnURL.indexOf('http://') === 0) {
return $scope.cdnURL;
} else {
return BASE_CODE_ANGULAR_URL + getRelativeUrl($scope.currentBranch, $scope.currentBuild);
@@ -379,10 +444,22 @@ angular.module('homepage', [])
$scope.cdnURL = BASE_CDN_URL + getRelativeUrl($scope.currentBranch, $scope.currentBuild);
}
};
+
+ $scope.updateCdnLink();
})
- .run(function($rootScope, startPulse){
+ .run(function($rootScope, startPulse, createDialog){
$rootScope.version = angular.version;
+ $rootScope.showDownloadDialog = function() {
+ createDialog('partials/download-dialog-body.html', {
+ id: 'downloadModal',
+ title: 'AngularJS Downloads',
+ controller: 'DownloadCtrl',
+ footerTemplate: '<a ng-href="http://code.angularjs.org/{{getVersion(currentBranch)}}">Extras</a>\n' +
+ '<a href="http://code.angularjs.org/">Previous Versions</a>\n' +
+ '<a class="btn btn-primary btn-large" style="float: right; font-size: 20px; padding-left: 20px;" ng-href="{{downloadLink()}}" download><i class="icon-download-alt icon-large"></i> Download</a>'
+ });
+ };
$rootScope.$evalAsync(function(){
var videoURL;
View
32 partials/download-dialog-body.html
@@ -0,0 +1,32 @@
+<dl class="dl-horizontal">
+ <dt>Branch</dt>
+ <dd>
+ <span>
+ <span class="btn-group" data-toggle="buttons-radio">
+ <button id="bluePill" type="button" ng-class="getPillClass('stable', currentBranch)" class="btn bluePill" ng-click="selectType('stable')">Stable</button>
+ <button id="redPill" type="button" ng-class="getPillClass('unstable', currentBranch)" class="btn redPill" ng-click="selectType('unstable')">Unstable</button>
+ </span>
+ <a id="extraInfoBranch" popover href="" rel="popover" data-original-title="Branches" data-content="<dl class='dl-horizontal'><dt>Stable</dt><dd>The Release has been well tested, and the API for this version will not undergo any further change.</dd><dt>Unstable</dt><dd>This version is still being worked on, and API's are subject to change without any prior notice. Use only if you want to remain on the most cutting edge...</dd></dl>"><i class="icon-question-sign"></i></a>
+ </span>
+
+ </dd>
+ <dt>Build</dt>
+ <dd>
+ <span>
+ <span class="btn-group" data-toggle="buttons-radio">
+ <button type="button" class="btn" ng-class="getPillClass('minified', currentBuild)" ng-click="selectBuild('minified')" ng-class="get">Minified</button>
+ <button type="button" class="btn" ng-class="getPillClass('uncompressed', currentBuild)" ng-click="selectBuild('uncompressed')">Uncompressed</button>
+ <button type="button" class="btn" ng-class="getPillClass('zipped', currentBuild)" ng-click="selectBuild('zipped')">Zip</button>
+ </span>
+ <a id="extraInfoBuild" popover href="" rel="popover" data-original-title="Branches" data-content="<dl class='dl-horizontal'><dt>Minified</dt><dd>Minified and obfuscated version of the AngularJS base code. Use this in your deployed application (but only if you can't use Google's CDN)</dd><dt>Uncompressed</dt><dd>The main AngularJS source code, as is. Useful for debugging and development purpose, but should ideally not be used in your deployed application</dd><dt>Zipped</dt><dd>The zipped version of the Angular Build, which contains both the builds of AngularJS, as well as documentation and other extras</dd></dl>"><i class="icon-question-sign"></i></a>
+ </span>
+
+ </dd>
+ <dt>CDN</dt>
+ <dd>
+ <span class="input-append">
+ <input class="input-xxlarge" type="text" readonly="readonly" ng-model="cdnURL">
+ <a id="extraInfoCDN" popover href="" rel="popover" data-original-title="Why Google CDN?" data-content="While downloading and using the AngularJS source code is great for development, we recommend that you source the script from Google's CDN (Content Delivery Network) in your deployed, customer facing app whenever possible. You get the following advantages for doing so: <ul><li><strong>Better Caching :</strong> If you host AngularJS yourself, your users will have to download the source code atleast once. But if the browser sees that you are referring to Google CDN's version of AngularJS, and your user has visited another app which uses AngularJS, then he can avail the benefits of caching, and thus reduce one download, speeding up his overall experience!</li><li><strong>Decreased Latency :</strong> Google's CDN distributes your static content across the globe, in various diverse, physical locations. It increases the odds that the user gets a version of AngularJS served from a location near him, thus reducing overall latency.</li><li><strong>Increased Parallelism : </strong>Using Google's CDN reduces one request to your domain. Depending on the browser, the number of parallel requests it can make to a domain is restricted (as low as 2 in IE 7). So it can make a gigantic difference in loading times for users of those browsers.</li></ul>"><i class="icon-question-sign"></i></a>
+ </span>
+ </dd>
+</dl>
Something went wrong with that request. Please try again.