├── .gitignore
├── .DS_Store
├── image
    ├── .DS_Store
    ├── toStar.png
    └── starred.png
├── Dockerfile
├── bower.json
├── package.json
├── server.js
├── routes
    └── rest.js
├── style
    └── app.css
├── services
    └── flickrService.js
├── index.html
└── script
    └── app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | /node_modules
3 | /bower_components
4 | /data
5 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiJunpeng/flickr_gallery/HEAD/.DS_Store


--------------------------------------------------------------------------------
/image/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiJunpeng/flickr_gallery/HEAD/image/.DS_Store


--------------------------------------------------------------------------------
/image/toStar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiJunpeng/flickr_gallery/HEAD/image/toStar.png


--------------------------------------------------------------------------------
/image/starred.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiJunpeng/flickr_gallery/HEAD/image/starred.png


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:6.3.1
 2 | 
 3 | RUN npm install nodemon -g
 4 | 
 5 | RUN mkdir -p /app
 6 | 
 7 | WORKDIR /app
 8 | 
 9 | ADD . /app
10 | 
11 | RUN cd /app && npm install
12 | 
13 | EXPOSE 3001
14 | 
15 | CMD ["nodemon", "/app/server.js"]


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mini_flcikr",
 3 |   "description": "",
 4 |   "main": "server.js",
 5 |   "license": "ISC",
 6 |   "homepage": "https://github.com/LiJunpeng/mini_flickr",
 7 |   "ignore": [
 8 |     "**/.*",
 9 |     "node_modules",
10 |     "bower_components",
11 |     "test",
12 |     "tests"
13 |   ],
14 |   "dependencies": {
15 |     "angular-deckgrid": "^0.5.0",
16 |     "me-lazyload": "^0.0.5"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mini_flcikr",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "bower": "^1.8.2",
14 |     "express": "^4.14.0",
15 |     "flickrapi": "^0.6.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | 
 4 | // var flickrService = require('./services/flickrService');
 5 | // flickrService.getRecentFlickrPhotos(function () {
 6 | //     var restRouter = require('./routes/rest');
 7 |     
 8 | //     app.use('/', express.static(__dirname + '/'));
 9 | //     app.use('/api/v1', restRouter);
10 | 
11 | //     app.listen(3000);
12 | //     console.log("Server initialized");
13 | // });
14 | 
15 | 
16 | var restRouter = require('./routes/rest');
17 | 
18 | app.use('/', express.static(__dirname + '/'));
19 | app.use('/api/v1', restRouter);
20 | 
21 | app.listen(3001);
22 | console.log("Server initialized");


--------------------------------------------------------------------------------
/routes/rest.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var router = express.Router();
 3 | 
 4 | var flickrService = require('../services/flickrService');
 5 | 
 6 | router.get('/photos/', function (req, res) {
 7 | 	//console.log(req.params.topic);
 8 |     var ip = req.headers['x-forwarded-for'] ||
 9 |         req.connection.remoteAddress ||
10 |         req.socket.remoteAddress;
11 |     console.log("Got a client request from " + ip);
12 | 
13 |     flickrService.getRecentFlickrPhotosWithTag(" ", function (recentPhotos) {
14 |     	res.json(recentPhotos);
15 |     });
16 | });
17 | 
18 | router.get('/photos/:topic', function (req, res) {
19 | 	//console.log(req.params.topic);
20 |     var ip = req.headers['x-forwarded-for'] ||
21 |         req.connection.remoteAddress ||
22 |         req.socket.remoteAddress;
23 |     console.log("Got a client request from " + ip);
24 | 
25 |     flickrService.getRecentFlickrPhotosWithTag(req.params.topic, function (recentPhotos) {
26 |     	res.json(recentPhotos);
27 |     });
28 | });
29 | 
30 | module.exports = router;


--------------------------------------------------------------------------------
/style/app.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 | }
  4 | 
  5 | h1 {
  6 |     margin: 0;
  7 |     padding: 0;
  8 | }
  9 | 
 10 | h3 {
 11 |     margin: 0;
 12 |     padding: 10px;
 13 | }
 14 | 
 15 | img {
 16 |     width: 100%;
 17 | }
 18 | 
 19 | 
 20 | .pin-button-group{
 21 |     margin: 50px 0 0 0;
 22 |     float: right
 23 | }
 24 | 
 25 | .pin-button {
 26 |     width: 77px;
 27 | }
 28 | 
 29 | .search-input-group {
 30 |     margin: -10px 0 0 0;
 31 | }
 32 | 
 33 | .search-input-group .search-addon {
 34 |     background: none;
 35 |     padding: 0;
 36 |     border: 0;
 37 | }
 38 | 
 39 | .search-input-group .search-button {
 40 |     border-left: 0;
 41 |     border-top-left-radius: 0;
 42 |     border-bottom-left-radius: 0;
 43 | }
 44 | 
 45 | .a-card {
 46 |     height: auto;
 47 |     border: 1px solid rgba(0, 0, 0, .15);
 48 |     border-radius: 3px;
 49 |     margin: 0 10px 10px 0;
 50 |     /*box-shadow: -2px 3px 3px #E8E8E8;*/
 51 | }
 52 | 
 53 | .a-card-tags {
 54 |     padding: 0 10px 10px 10px;
 55 |     font-size: 80%;
 56 |     opacity: .5;
 57 |     word-wrap: break-word;
 58 | }
 59 | 
 60 | .a-card-pin {
 61 |     height: 30px;
 62 |     width: 32px;
 63 |     position: relative;
 64 |     left: 85%;
 65 | }
 66 | 
 67 | .a-card-pin-icon {
 68 |     background: url("images/starred.png") no-repeat;
 69 | }
 70 | 
 71 | .a-card-pin-icon:hover {
 72 |     background: url("images/toStar.png") no-repeat;
 73 | }
 74 | 
 75 | .deckgrid{
 76 |     padding: 10px 0 10px 10px;
 77 | }
 78 | 
 79 | .deckgrid .column {
 80 |     float: left;
 81 | }
 82 | 
 83 | .deckgrid .column-1-1 {
 84 |     width: 100%;
 85 | }
 86 | 
 87 | .deckgrid .column-1-2 {
 88 |     width: 50%;
 89 | }
 90 | 
 91 | .deckgrid .column-1-3 {
 92 |     width: 33.33%;
 93 | }
 94 | 
 95 | .deckgrid .column-1-4 {
 96 |      width: 25%;
 97 |  }
 98 | 
 99 | .deckgrid[deckgrid]::before {
100 |     content: '4 .column.column-1-4';
101 |     font-size: 0;
102 |     visibility: hidden;
103 | }
104 | 
105 | #searchBox {
106 |     margin-bottom: 20px;
107 | }
108 | 
109 | @media screen and (max-width: 960px) {
110 |     .deckgrid[deckgrid]::before {
111 |         content: '3 .column.column-1-3';
112 |     }
113 | }
114 | 
115 | @media screen and (max-width: 720px) {
116 |     .deckgrid[deckgrid]::before {
117 |         content: '2 .column.column-1-2';
118 |     }
119 | }
120 | 
121 | @media screen and (max-width: 480px) {
122 |     .deckgrid[deckgrid]::before {
123 |         content: '1 .column.column-1-1';
124 |     }
125 |     .pin-button-group{
126 |         float: left;
127 |     }
128 |     .search-input-group{
129 |         clear: left;
130 |     }
131 | }


--------------------------------------------------------------------------------
/services/flickrService.js:
--------------------------------------------------------------------------------
  1 | var flickrApi = require('flickrapi');
  2 | var flickrOptions = {
  3 |     //put your flickr api key here
  4 |     api_key: ""
  5 | };
  6 | 
  7 | // var recentPhotos = [];
  8 | // var photoCount = 100;
  9 | // var searchTag = 'mountain';
 10 | 
 11 | function getRecentFlickrPhotosWithTag(searchTag, callback) {
 12 |     var recentPhotos = [];
 13 |     var photoCount = 100;
 14 |     console.log(searchTag);
 15 | 
 16 |     flickrApi.tokenOnly(flickrOptions, function (err, flickr) {
 17 |         flickr.photos.search({tags: searchTag, page: 1, per_page: photoCount}, function (err, result) {
 18 |             if (err) {
 19 |                 console.log(err);
 20 |                 return;
 21 |             }
 22 |             var photos = result.photos.photo;
 23 |             var i = 0;
 24 |             photos.forEach(function (photo) {
 25 |                 var title = photo.title;
 26 |                 var link = composePhotoUrl(photo.owner, photo.id);
 27 |                 var src = composePhotoSrc(photo);
 28 | 
 29 |                 populateTags(flickr, photo.id, function (tags) {
 30 |                     recentPhotos.push({
 31 |                         title: title,
 32 |                         link: link,
 33 |                         src: src,
 34 |                         tags: tags,
 35 |                         originalIndex: i++
 36 |                     });
 37 |                     if (recentPhotos.length == 100) {
 38 |                         callback(recentPhotos);
 39 |                     }
 40 |                 });
 41 |             });
 42 |         });
 43 |     });
 44 | 
 45 | }
 46 | 
 47 | 
 48 | function getRecentFlickrPhotos(callback) {
 49 |     flickrApi.tokenOnly(flickrOptions, function (err, flickr) {
 50 |         flickr.photos.search({tags: searchTag, page: 1, per_page: photoCount}, function (err, result) {
 51 |             if (err) {
 52 |                 console.log(err);
 53 |                 return;
 54 |             }
 55 |             var photos = result.photos.photo;
 56 |             var i = 0;
 57 |             photos.forEach(function (photo) {
 58 |                 var title = photo.title;
 59 |                 var link = composePhotoUrl(photo.owner, photo.id);
 60 |                 var src = composePhotoSrc(photo);
 61 | 
 62 |                 populateTags(flickr, photo.id, function (tags) {
 63 |                     recentPhotos.push({
 64 |                         title: title,
 65 |                         link: link,
 66 |                         src: src,
 67 |                         tags: tags,
 68 |                         originalIndex: i++
 69 |                     });
 70 |                     if (recentPhotos.length == 100) {
 71 |                         return;
 72 |                     }
 73 |                 });
 74 |             });
 75 |         });
 76 |     });
 77 | }
 78 | 
 79 | function composePhotoUrl(userId, photoId) {
 80 |     //https://www.flickr.com/photos/12037949754@N01/155761353/
 81 |     return 'https://www.flickr.com/photos/' + userId + '/' + photoId;
 82 | }
 83 | 
 84 | function composePhotoSrc(photo) {
 85 |     //https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
 86 |     return 'https://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
 87 | }
 88 | 
 89 | function populateTags(flickr, photoId, callback) {
 90 |     flickr.photos.getInfo({photo_id: photoId}, function (err, result) {
 91 |         var rawTags = [];
 92 |         result.photo.tags.tag.forEach(function (tag) {
 93 |             rawTags.push(tag.raw);
 94 |         });
 95 |         tags = rawTags.join();
 96 |         callback(tags);
 97 |     });
 98 | }
 99 | 
100 | module.exports = {
101 |     getRecentFlickrPhotosWithTag: getRecentFlickrPhotosWithTag,
102 |     getRecentFlickrPhotos: getRecentFlickrPhotos
103 | };
104 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Flickr Gallery</title>
 6 | 
 7 |     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 8 |     <script src="/bower_components/angular-deckgrid/angular-deckgrid.js"></script>
 9 |     <script src="/bower_components/me-lazyload/me-lazyload.js"></script>
10 | 
11 |     <script src="/script/app.js"></script>
12 | 
13 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
14 |     <link rel="stylesheet" href="style/app.css">
15 | 
16 | </head>
17 | <body ng-app="miniFlickr" ng-controller="PhotoCtrl" style="background:#ecf2f9">
18 |     <div class="container">
19 |         <div class="page-header">
20 |             <div class="row">
21 |                 <div class="col-xs-12 col-md-8">
22 |                     <h1>Flickr Gallery</h1>
23 |                 </div>
24 |                 <div class="col-xs-12 col-md-4">
25 |                     <div class="btn-group pin-button-group">
26 |                         <label ng-click="togglePinned('all')" class="btn btn-default pin-button"
27 |                                ng-class="{'btn-danger': pinFilter === 'all'}">All</label>
28 |                         <label ng-click="togglePinned('pinned')" class="btn btn-default pin-button"
29 |                                ng-class="{'btn-danger': pinFilter === 'pinned'}">Pinned</label>
30 |                     </div>
31 |                 </div>
32 |             </div>
33 |         </div>
34 | 
35 |         <div class="row">
36 |             <div id="searchBox" class="col-md-4 pull-right">
37 |                 <div class="input-group search-input-group">
38 |                     <input type="text" class="form-control" placeholder="cat"
39 |                            ng-model="photoTopic" />
40 |                 <span class="input-group-addon search-addon">
41 |                     <label class="btn btn-default search-button" ng-click="searchTopic(photoTopic)">
42 |                         <span class="glyphicon glyphicon-search"></span>
43 |                     </label>
44 |                 </span>
45 |                 </div>
46 |             </div>
47 |         </div>
48 | 
49 |         <div class="row">
50 |             <div id="filterBox" class="col-md-4 pull-right">
51 |                 <div class="input-group search-input-group">
52 |                     <input type="text" class="form-control" placeholder="Filter Tags"
53 |                            ng-model="tagsFilter" ng-change="searchTags()"/>
54 |                 <span class="input-group-addon search-addon">
55 |                     <label class="btn btn-default search-button">
56 |                         <span class="glyphicon glyphicon-filter"></span>
57 |                     </label>
58 |                 </span>
59 |                 </div>
60 |             </div>
61 |         </div>
62 | 
63 |         <div class="row">
64 |             <div ng-init="initialised=true;"></div>
65 |             <div ng-if="initialised" deckgrid class="deckgrid" source="filteredPhotos">
66 |                 <div class="a-card" ng-mouseover="hoverPin = true" ng-mouseleave="hoverPin = false">
67 |                     <a ng-href="{{card.link}}" target="_blank">
68 |                         <img lazy-src="{{card.src}}" animate-visible="true" animate-speed="0.7s" >
69 |                     </a>
70 |                     <h3>{{card.title}}</h3>
71 |                     <div class="a-card-tags">
72 |                         Tags: {{card.tags}}
73 |                     </div>
74 |                     <div class="a-card-pin">
75 |                         <img src="/image/starred.png" class="a-card-pin-icon" ng-show="hoverPin || card.pinned"
76 |                              ng-click="mother.pin(card.originalIndex)">
77 |                     </div>
78 |                 </div>
79 |             </div>
80 |         </div>
81 |     </div>
82 | 
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/script/app.js:
--------------------------------------------------------------------------------
  1 | var app = angular.module("miniFlickr", ['akoenig.deckgrid', 'me-lazyload']);
  2 | 
  3 | app.controller("PhotoCtrl", ["$http", "$scope", "$filter", function ($http, $scope, $filter) {
  4 | 
  5 | 
  6 |     // $scope.photos = response.data;
  7 |     // $scope.filteredPhotos = $scope.photos;
  8 | 
  9 |     // $scope.pinFilter = 'all';
 10 | 
 11 |     $scope.searchTags = function () {
 12 |         if ($scope.tagsFilter === '') {
 13 |             if ($scope.pinFilter === 'all') {
 14 |                 $scope.filteredPhotos = $scope.photos;
 15 |             } else if ($scope.pinFilter === 'pinned'){
 16 |                 $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true});
 17 |             }
 18 |         } else {
 19 |             if ($scope.pinFilter === 'all') {
 20 |                 $scope.filteredPhotos = $filter('filter')($scope.photos, {tags: $scope.tagsFilter});
 21 |             } else if ($scope.pinFilter === 'pinned') {
 22 |                 $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true, tags: $scope.tagsFilter});
 23 |             }
 24 |         }
 25 |     };
 26 | 
 27 |     $scope.searchTopic = function (topic) {
 28 |         $http.get("/api/v1/photos/" + topic)
 29 |             .then(function (response) {
 30 |                 $scope.photos = response.data;
 31 |                 $scope.filteredPhotos = $scope.photos;
 32 | 
 33 |                 $scope.pinFilter = 'all';
 34 |             });
 35 |     };
 36 | 
 37 |     $scope.pin = function (index) {
 38 |         var currentPinStatus = $scope.photos[index].pinned;
 39 |         if (currentPinStatus == null) {
 40 |             $scope.photos[index].pinned = true;
 41 |         } else {
 42 |             $scope.photos[index].pinned = !currentPinStatus;
 43 |         }
 44 |     };
 45 | 
 46 |     $scope.togglePinned = function (pinFilter) {
 47 |         $scope.pinFilter = pinFilter; //to toggle button style class
 48 |         if (pinFilter === 'all') {
 49 |             if ($scope.tagsFilter === '') {
 50 |                 $scope.filteredPhotos = $scope.photos;
 51 |             } else {
 52 |                 $scope.filteredPhotos = $filter('filter')($scope.photos, {tags: $scope.tagsFilter});
 53 |             }
 54 |         } else if (pinFilter === 'pinned') {
 55 |             if ($scope.tagsFilter === '') {
 56 |                 $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true});
 57 |             } else {
 58 |                 $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true, tags: $scope.tagsFilter});
 59 |             }
 60 |         }
 61 |     }
 62 | 
 63 |     $scope.searchTopic("cat");
 64 | 
 65 | }]);
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | // app.controller("PhotoCtrl", ["$http", "$scope", "$filter", function ($http, $scope, $filter) {
 74 | //     $http.get("/api/v1/photos")
 75 | //         .then(function (response) {
 76 | //             $scope.photos = response.data;
 77 | //             $scope.filteredPhotos = $scope.photos;
 78 | 
 79 | //             $scope.pinFilter = 'all';
 80 | 
 81 | //             $scope.searchTags = function () {
 82 | //                 if ($scope.tagsFilter === '') {
 83 | //                     if ($scope.pinFilter === 'all') {
 84 | //                         $scope.filteredPhotos = $scope.photos;
 85 | //                     } else if ($scope.pinFilter === 'pinned'){
 86 | //                         $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true});
 87 | //                     }
 88 | //                 } else {
 89 | //                     if ($scope.pinFilter === 'all') {
 90 | //                         $scope.filteredPhotos = $filter('filter')($scope.photos, {tags: $scope.tagsFilter});
 91 | //                     } else if ($scope.pinFilter === 'pinned') {
 92 | //                         $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true, tags: $scope.tagsFilter});
 93 | //                     }
 94 | //                 }
 95 | //             };
 96 | 
 97 | //             $scope.searchTopic = function () {
 98 | 
 99 | //             };
100 | 
101 | //             $scope.pin = function (index) {
102 | //                 var currentPinStatus = $scope.photos[index].pinned;
103 | //                 if (currentPinStatus == null) {
104 | //                     $scope.photos[index].pinned = true;
105 | //                 } else {
106 | //                     $scope.photos[index].pinned = !currentPinStatus;
107 | //                 }
108 | //             };
109 | 
110 | //             $scope.togglePinned = function (pinFilter) {
111 | //                 $scope.pinFilter = pinFilter; //to toggle button style class
112 | //                 if (pinFilter === 'all') {
113 | //                     if ($scope.tagsFilter === '') {
114 | //                         $scope.filteredPhotos = $scope.photos;
115 | //                     } else {
116 | //                         $scope.filteredPhotos = $filter('filter')($scope.photos, {tags: $scope.tagsFilter});
117 | //                     }
118 | //                 } else if (pinFilter === 'pinned') {
119 | //                     if ($scope.tagsFilter === '') {
120 | //                         $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true});
121 | //                     } else {
122 | //                         $scope.filteredPhotos = $filter('filter')($scope.photos, {pinned: true, tags: $scope.tagsFilter});
123 | //                     }
124 | //                 }
125 | //             }
126 | //         });
127 | // }]);


--------------------------------------------------------------------------------