diff --git a/frontend/Gruntfile.js b/frontend/Gruntfile.js index 6922fc8b9..f2fa78e76 100644 --- 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 new file mode 100644 index 000000000..e0f4651ba Binary files /dev/null and b/frontend/app/images/github.png differ diff --git a/frontend/app/images/web.png b/frontend/app/images/web.png new file mode 100644 index 000000000..ee238aabf Binary files /dev/null and b/frontend/app/images/web.png differ diff --git a/frontend/app/index.html b/frontend/app/index.html index f027faa82..db7c94247 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -11,6 +11,7 @@ + @@ -22,28 +23,35 @@ +
+
+ + +
-
- logo -
+
-
- - + +
- - + + + + + + - - - - diff --git a/frontend/app/scripts/app.js b/frontend/app/scripts/app.js index 495d64cf8..5d2b95777 100644 --- 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: '/' }); -}); \ No newline at end of file +}); diff --git a/frontend/app/scripts/controllers/main.js b/frontend/app/scripts/controllers/main.js index 246d2eb94..c19fabe96 100644 --- 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]; }); } -}); \ No newline at end of file +}); + +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()(); + } + } + }; +}); diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css index d9bb73942..36596fb60 100644 --- a/frontend/app/styles/main.css +++ b/frontend/app/styles/main.css @@ -1,16 +1,11 @@ body { - background-color: #ebebeb; + background-color: #f4f4f4; color: #5e5b64; margin: 40px; font: 15px/1.3 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } -a, -a:visited { - color: #00AE3B; -} - a:hover{ text-decoration: none; } @@ -19,109 +14,116 @@ a:hover{ /*------------------------- The search input --------------------------*/ - .search { - background-color: #00571E; - box-shadow: 0 1px 1px #ccc; - border-radius: 2px; - width: 400px; - padding: 14px; - margin: 45px auto 20px; - position: relative; + width: 90%; + margin: 0 auto; + margin-bottom: 1.5em; + font-size: 1.2em; + height: 43px } -.search input { - background: #fff no-repeat 13px 13px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAWlBMVEWHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKCHmKBNnrrDAAAAHnRSTlMAAgUaJCYpKy4wMmBiam5xc3Z6f4SJrba5vsXHyswZmlxOAAAAe0lEQVR4AV3M2w6CQAxF0c1lQHC4CTgIPf//m2bSF2U9NTvNAaj3pLTXOMp4Kbti4WGRTU3RTKaFrJP1ZL2pA9g04AZtAEkVrlICuFTiStn94/CNiIu+0el8kLWn/HjJxkAYTVp9azA5L0DYD723dvXyI5f5Xj78mc/nFz8cCbx5SV/CAAAAAElFTkSuQmCC); - - border: none; - width: 100%; - line-height: 19px; - padding: 11px 0; - - border-radius: 2px; - box-shadow: 0 2px 8px #c4c4c4 inset; - text-align: left; - font-size: 14px; - font-family: inherit; - font-weight: bold; - color: #738289; - text-indent: 40px; -} ul { list-style-type: none; - width: 428px; margin: 0 auto; padding: 0; text-align: left; } -ul li { - border-bottom: 1px solid #ddd; - padding: 10px; - margin: 0; - overflow: hidden; +.extra { + margin-top: 1em; } -ul li img { - width: 60px; - height: 60px; - float: left; - border: none; +.wrap-dd-select { + padding: 0.25em; } -ul li p { - margin-left: 75px; - font-weight: bold; - padding-top: 12px; - color: #6e7a7f; +.dropdown { + z-index: 10; + + overflow: auto; + max-height: 20em; } -.extra { - margin-top: 1em; +.dropdown:before, .dropdown:after { + right: inherit; + left: 2em; +} + +.libraries { + width: 90%; +} + +.library, .file { + box-sizing: border-box; + + padding: 0.5em; } .library { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + margin-bottom: 1em; + + background-color: white; + border-radius: 0.2em 0.1em 0.1em 0.1em; + border: 0.1em solid #e3e3e3; } -.library:hover { - background-color: #ddd; +.library .name { + display: inline; } -.library.visible { - background-color: #ccc; +.library .versionSelector { + margin-left: 1em; } -.displayHelp { +.library .description { + margin: 1em 0.5em 1em 0.5em; +} + +.library .extras { float: right; - color: #aaa; - display: none; - cursor: pointer; } -.library:hover > .displayHelp, -.versionContainer:hover .displayHelp { - display: block; +.library .extras .author { + margin-right: 0.5em; + + font-weight: bold; } -.sort { - margin-right: 1em; +.library .extras img { + margin-left: 0.25em; + margin-right: 0.25em; } -.label { - margin-right: 0.5em; +.library .files { + -moz-transition: 0.25s linear all; + -webkit-transition: 0.25s linear all; + -o-transition: 0.25s linear all; + transition: 0.25s linear all; + + overflow: auto; + max-height: 15em; } -.pageSelector, -.sort { - padding: 0; +.library .files.full { + max-height: 30em; +} + +.library .file:nth-child(odd) { + background-color: #f9f9f9; +} + +.library .file:nth-of-type(1) { + border-top: 0.1em solid #ddd; +} + +.library .file { + border-bottom: 0.1em solid #ddd; +} + +.library .show { + text-align: center; + cursor: pointer; } @@ -163,3 +165,35 @@ ul li p { footer { padding-top: 20px; } + +#logo { + width: 400px; + margin-left: 50px; + margin-bottom: 20px; + float:left; +} + +nav { + position: relative; + top: 0.3em; + float: right; +} +nav ul { + list-style-type: none; + margin: 0; + margin-right: 40px; +} +nav ul li { + display: inline; + background: #e3e3e3; + cursor: pointer; + border-radius: .3em; + padding: 1em; + padding-top: .5em; + padding-bottom: .5em; + margin-right: 10px; +} +nav ul li:hover { background: #005494 } +nav ul li:hover a { color: white } +nav ul li a { color: #575757 } +nav ul li a:hover { text-decoration: none } diff --git a/frontend/app/views/about.html b/frontend/app/views/about.html new file mode 100644 index 000000000..f115f2279 --- /dev/null +++ b/frontend/app/views/about.html @@ -0,0 +1 @@ +TODO: about diff --git a/frontend/app/views/main.html b/frontend/app/views/main.html index c139d4cf4..0e0de509f 100644 --- a/frontend/app/views/main.html +++ b/frontend/app/views/main.html @@ -1,37 +1,36 @@ -
- -
+ -
- Sort by stars - Sort by hits -
Loading
- - +
+
Show less
+
Show more
- -
\ No newline at end of file + diff --git a/frontend/app/views/network.html b/frontend/app/views/network.html new file mode 100644 index 000000000..67e771126 --- /dev/null +++ b/frontend/app/views/network.html @@ -0,0 +1 @@ +TODO: network diff --git a/frontend/bower.json b/frontend/bower.json index 1ea918245..960fea477 100644 --- a/frontend/bower.json +++ b/frontend/bower.json @@ -6,8 +6,9 @@ "angular-animate": "1.2.5", "json3": "~3.2.6", "es5-shim": "~2.1.0", - "angular-route": "1.2.5", - "bootstrap": "~3.0.3" + "bootstrap": "~3.0.3", + "angular-dropdowns": "*", + "angular-ui-router": "~0.2.7" }, "devDependencies": { "angular-mocks": "1.2.5", diff --git a/frontend/serve.js b/frontend/serve.js index ed526825b..b26cf5d95 100755 --- a/frontend/serve.js +++ b/frontend/serve.js @@ -28,7 +28,7 @@ function main() { app.use(express.errorHandler()); }); - app.get('/', function(req, res) { + app.use(function(req, res) { res.sendfile(__dirname + '/dist/index.html'); }); @@ -36,7 +36,7 @@ function main() { ['SIGHUP', 'SIGINT', 'SIGQUIT', 'SIGILL', 'SIGTRAP', 'SIGABRT', 'SIGBUS', 'SIGFPE', 'SIGUSR1', 'SIGSEGV', 'SIGUSR2', 'SIGPIPE', 'SIGTERM' - ].forEach(function(element, index, array) { + ].forEach(function(element) { process.on(element, function() { terminator(element); }); }); diff --git a/generate_data.sh b/generate_data.sh index fc0db16e9..72487cb3a 100755 --- a/generate_data.sh +++ b/generate_data.sh @@ -1,4 +1,4 @@ #!/bin/bash cd walker -./index.js -i ../files/ -o ../frontend/app/data/ +./index.js -i ../files/ -o ../frontend/app/data/ -c config.js cd .. diff --git a/walker/index.js b/walker/index.js index f6d3249b0..8ba16a04c 100755 --- a/walker/index.js +++ b/walker/index.js @@ -25,7 +25,7 @@ function main() { if(!program.input) return console.error('Missing input!'); if(!program.output) return console.error('Missing output!'); - var config = {github: ''}; + var config = {github: '', exclude: []}; try { config = require('./' + program.config); @@ -41,7 +41,7 @@ function main() { }; } - walk(program.input, utils.catchError(write.bind(null, program.output))); + walk(program.input, utils.catchError(write.bind(null, program.output, config.exclude))); } function walk(root, cb) { @@ -65,9 +65,16 @@ function walk(root, cb) { return cb(); } + var author = d.author && d.author.name; + + if(!author && d.maintainers) { + author = d.maintainers[0].name; + } + async.waterfall([ function(cb) { var ret = { + author: author, name: d.name, version: d.version, description: d.description, @@ -87,6 +94,7 @@ function walk(root, cb) { return cb(null, ret); } + ret.github = repoUrl.split('.git')[0]; ret.stars = stars; cb(null, ret); @@ -113,7 +121,7 @@ function walk(root, cb) { }).on('error', cb).on('done', cb.bind(null, null, ret)).walk(); }, function(ret, cb) { - ret.hits = 0; // TODO: fetch this through API + //ret.hits = 0; // TODO: fetch this through API cb(null, ret); } @@ -126,7 +134,13 @@ function walk(root, cb) { }); } -function write(output, d) { +function write(output, exclude, d) { + exclude = exclude || []; + + d = d.filter(function(v) { + return exclude.indexOf(v.name) === -1; + }); + var indexData = d.map(function(v) { return { name: v.name, diff --git a/walker/template.config.js b/walker/template.config.js index 08155515c..1d865ea31 100644 --- a/walker/template.config.js +++ b/walker/template.config.js @@ -1,3 +1,4 @@ module.exports = { - github: 'replacethis' // generate through GitHub settings -> Applications + github: 'replacethis', // generate through GitHub settings -> Applications + exclude: ['foo', 'bar'] // libraries to exclude (by project name) };