Merge pull request #14 from MaxCDN/ui-redesign

Ui redesign
MaxCDN · Dec 24, 2013 · 692096f · 692096f
2 parents 42a12ab + 098c2de
commit 692096f
Show file tree

Hide file tree

Showing 15 changed files with 269 additions and 139 deletions.
diff --git a/frontend/Gruntfile.js b/frontend/Gruntfile.js
@@ -120,7 +120,7 @@ module.exports = function (grunt) {
           src: [
             '<%= yeoman.dist %>/scripts/{,*/}*.js',
             '<%= yeoman.dist %>/styles/{,*/}*.css',
-            '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
+            //'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
             '<%= yeoman.dist %>/styles/fonts/*'
           ]
         }

diff --git a/frontend/app/images/github.png b/frontend/app/images/github.png
diff --git a/frontend/app/images/web.png b/frontend/app/images/web.png
diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -11,6 +11,7 @@
     <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
 
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="bower_components/angular-dropdowns/css/dropdowns.css">
     <link rel="stylesheet" href="styles/main.css">
   </head>
   <body ng-app="osscdnApp">
@@ -22,28 +23,35 @@
       <script src="bower_components/es5-shim/es5-shim.js"></script>
       <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
+    <div class="container">
+      <header>
+        <div id="logo"><a href="/#/"> <img src="./images/osscdn-logo.png" alt="logo" width="345" height="120"></a></div>
+        <nav class="btn-group" style="margin-right: 50px;">
+            <a target="_blank" href="http://www.maxcdn.com/company/network/"><button type="button" class="btn btn-default">Network</button></a>
+            <a href="/#/about"><button type="button" class="btn btn-default">About</button></a>
+            <a target="_blank" href="https://github.com/MaxCDN/osscdn"><button type="button" class="btn btn-default">GitHub <i class="icon-share-alt icon-white"></i></button></a>
+        </nav>
+      </header>
 
-    <header>
-     <img src="./images/osscdn-logo.png" alt="logo" width="345" height="120">
-    </header>
+      <article class="container" ui-view></article>
 
-    <article class="container" ng-view=""></article>
-
-    <footer>
-      <p>Brought to you by your friends at <a href="http://www.maxcdn.com">MaxCDN</a></p>
-    </footer>
+      <footer>
+        <p>Brought to you by your friends at <a href="http://www.maxcdn.com">MaxCDN</a></p>
+        <p>Powered by <a href="http://www.jsdelivr.com">jsDelivr</a></p>
+      </footer>
+    </div>
 
     <script src="bower_components/angular/angular.min.js"></script>
-    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
-    <script src="bower_components/angular-route/angular-route.min.js"></script>
+
+    <!-- build:js scripts/modules.js -->
+    <script src="bower_components/angular-animate/angular-animate.js"></script>
+    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+    <script src="bower_components/angular-dropdowns/dist/angular-dropdowns.js"></script>
+    <!-- endbuild -->
 
     <!-- build:js({.tmp,app}) scripts/scripts.js -->
     <script src="scripts/app.js"></script>
     <script src="scripts/controllers/main.js"></script>
-    <script src="scripts/services/Paginator.js"></script>
-    <script src="scripts/directives/paginator.js"></script>
-    <script src="scripts/filters/forLoop.js"></script>
-    <script src="scripts/filters/paginate.js"></script>
     <!-- endbuild -->
   </body>
 </html>
diff --git a/frontend/app/scripts/app.js b/frontend/app/scripts/app.js
@@ -1,13 +1,18 @@
 'use strict';
 
-angular.module('osscdnApp', ['ngAnimate', 'ngRoute']).
-        config(function($locationProvider, $routeProvider) {
-    $locationProvider.html5Mode(true);
+angular.module('osscdnApp', ['ngAnimate', 'ui.router', 'ngDropdowns']).
+        config(function($stateProvider, $urlRouterProvider) {
+    $urlRouterProvider.otherwise('/');
 
-    $routeProvider.when('/', {
+    $stateProvider.state('network', {
+        url: '/network',
+        templateUrl: 'views/network.html'
+    }).state('about', {
+        url: '/about',
+        templateUrl: 'views/about.html'
+    }).state('libraries', {
+        url: '/:name',
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
-    }).otherwise({
-        redirectTo: '/'
     });
-});
+});
diff --git a/frontend/app/scripts/controllers/main.js b/frontend/app/scripts/controllers/main.js
@@ -1,14 +1,51 @@
 'use strict';
 
-angular.module('osscdnApp').controller('MainCtrl', function ($scope, $http) {
+angular.module('osscdnApp').controller('MainCtrl', function ($scope, $http, $state) {
+    $scope.search = {};
+    $scope.libraries = [];
+    $scope.limit = 10;
+
     $http.get('data/index.json').then(function(res) {
         $scope.libraries = res.data;
+
+        if($state.params.name) {
+            $scope.search.name = $state.params.name;
+            $scope.limit = 1;
+        }
     });
 
-    $scope.getLibrary = function($index, library) {
-        library.showExtra =! library.showExtra;
+    $scope.orderByName = function(library) {
+        if($scope.search && $scope.search.name) {
+            return library.name.length;
+        }
+
+        return library.name;
+    };
+
+    $scope.getLibraries = function() {
+        if($scope.libraries.filtered) {
+            $scope.libraries.filtered.forEach(getLibrary);
+        }
+        else {
+            console.warn('Missing library data!');
+        }
+    };
+
+    $scope.hasEnoughItems = function(library) {
+        if(!library.selectedVersion) {
+            return;
+        }
+
+        // it would be better to calculate visibility status via CSS
+        var version = library.selectedVersion.value;
 
-        if(library.description || !library.showExtra) return;
+        return library.cdn[version].length > 6;
+    };
+
+    function getLibrary(library) {
+        if(library.description) {
+            return;
+        }
 
         $http.get('data/' + library.name + '.json').then(function(res) {
             var d = res.data;
@@ -17,6 +54,35 @@ angular.module('osscdnApp').controller('MainCtrl', function ($scope, $http) {
             for(k in d) {
                 library[k] = d[k];
             }
+
+            library.versions = Object.keys(library.cdn).map(function(version) {
+                return {
+                    text: version,
+                    value: version
+                };
+            }).reverse();
+
+            library.selectedVersion = library.versions[0];
         });
     }
-});
+});
+
+angular.module('osscdnApp').filter('as', function($parse) {
+    return function(value, path) {
+        return $parse(path).assign(this, value);
+    };
+});
+
+angular.module('osscdnApp').directive('repeatDone', function() {
+    return {
+        restrict: 'A',
+        scope: {
+            method: '&repeatDone'
+        },
+        link: function($scope) {
+            if($scope.$parent.$last) {
+                $scope.method()();
+            }
+        }
+    };
+});