almost final version of navigation

enchained · May 24, 2014 · 393d15d · 393d15d
1 parent 94c0c67
commit 393d15d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 27 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,4 @@
+/*
 .picture {
     display: inline-block !important; 
     margin-bottom: 20px;
@@ -12,7 +13,20 @@
     column-count: 4;
     column-gap: 20px;
 }
+*/
 
-#paginator {
-    position: absolute;
+.caption {
+    white-space: nowrap; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.caption:hover {
+    white-space: normal; 
+    overflow: visible;
+}
+
+.picture {
+    height: 208px;
+    width: 285px;
 }
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 <body ng-controller="SearchController as search">
     <div class="container">
         <div class="navbar navbar-default" role="navigation">
-            <div class="container">
+            <div class="container-fluid">
                 <form name="searchForm" class="navbar-form navbar-default text-center" role="search" ng-submit="search.newSearch()" novalidate>
                     <div class="container-fluid">
                         <div class="form-group">
@@ -31,20 +31,34 @@
         <div id="error" class="alert alert-danger" ng-hide="!(search.submitted)" ng-show="search.submitted && searchForm.keywords.$error.required">
            Please, enter the search keywords.
         </div>
-        <div id="main">
+
+<!--
+        <div id="main" class="container-fluid">
             <div class="thumbnail picture" ng-repeat="product in search.products">
                 <a href="{{product.flickr}}" target="_blank">
                     <img ng-src="{{product.img}}" alt="{{product.title}}">
                     <p class="caption">{{product.title}}</p>
                 </a>
             </div>
         </div>
+-->
+
+        <div class="container-fluid">
+            <div class="row" ng-repeat="row in search.rows">
+               <div class="thumbnail picture col-sm-3 col-xs-12"  ng-repeat="product in row">
+                    <a href="{{product.flickr}}" target="_blank">
+                        <img ng-src="{{product.img}}" alt="{{product.title}}">
+                        <p class="caption text-center">{{product.title}}</p>
+                    </a>     
+               </div>
+            </div>
+        </div>
 
         <div id="paginator" class="text-center" ng-show="search.started === true">
             <ul class="pagination pagination-lg">
-              <li ng-class="{'disabled' : prevPageDisabled() }"><a href ng-click="search.fetchOnePage(search.currentPage - 1)">&laquo;</a></li>
-              <li ng-repeat="n in range(search.pageCount)" ng-class="{active: n == search.currentPage}" ng-click="newSearch(n)"><a href="#">{{n}}</a></li>
-              <li ng-class="{'disabled' : nextPageDisabled() }"><a href ng-click="search.fetchOnePage(search.currentPage + 1)">&raquo;</a></li>
+              <li id="prev" ng-class="{'disabled' : prevPageDisabled() }"><a href ng-click="search.fetchOnePage(search.currentPage - 1, 'prev')">&laquo;</a></li>
+              <li ng-repeat="n in range(search.pageCount)" ng-class="{active: n == search.currentPage}" ng-click="search.fetchOnePage(n)"><a href="#">{{n}}</a></li>
+              <li id="next" ng-class="{'disabled' : nextPageDisabled() }"><a href ng-click="search.fetchOnePage(search.currentPage + 1, 'next')">&raquo;</a></li>
             </ul>
         </div>
 

diff --git a/js/app.js b/js/app.js
@@ -171,7 +171,7 @@
         search.submitted = false;
         var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=84c81a688848153a0fa4db04702b63fd&text=flowers&media=photos&extras=url_q&per_page=12&page=1&format=json&jsoncallback=JSON_CALLBACK";
 		//this.products = pictures;
-        search.products = [];
+
         //var script = document.createElement('script');
         //script.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=84c81a688848153a0fa4db04702b63fd&text=flowers&media=photos&extras=url_q&per_page=12&page=1&format=json&jsoncallback=showThirdPartyData";
         //script.src = $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=84c81a688848153a0fa4db04702b63fd&text=flowers&media=photos&extras=url_q&per_page=12&page=1&format=json&api_sig=658b06a35cefc54032f200b0da52acde&jsoncallback=?", showThirdPartyData);
@@ -216,11 +216,22 @@
 //                    });
 //                }
 //            });
-
+
+//        $scope.rows = [];
+//        var maxRows = 3;
+//        var maxCols = 4;
+//        for( var i = 0 ; i < maxRows; i++){
+//          $scope.rows.push([]);
+//          for( var j = 0 ; j < maxCols; j++){
+//              $scope.rows[i][j] = "Item in " + i + "," + j;
+//          }
+//        }
+
         this.itemsPerPage = 12;
-        search.currentPage = 0;
+        //search.currentPage = 0;
 
         this.newSearch = function(pageNumber) {
+            search.products = [];
             search.started = true;
             search.submitted = true;
             if (search.keywords) {
@@ -264,12 +275,31 @@
 //                        });
 //                    }
 //                });
+
                 search.submitted = false;
             }
 
         };
 
-        search.fetchOnePage = function(number) {
+        $scope.splitArray = function(n) {
+            var i, j, chunk = n;
+            search.rows = [];
+            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+            var arr2 = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11]];
+            for (i = 0, j = search.products.length; i < j; i+=chunk) {
+
+                 search.rows.push(search.products.slice(i, i + chunk));
+            }
+
+            console.log(search.rows);
+
+
+        };
+
+        search.fetchOnePage = function(number, direction) {
+            if ((direction === 'prev' && angular.element("#prev").hasClass("disabled")) || (direction === 'next' && angular.element("#next").hasClass("disabled"))) {
+                return;
+            }
             search.products = [];
             $scope.failed = false;        
             $scope.isFetching = true;
@@ -292,6 +322,8 @@
                             } );
 
                         });
+                        $scope.splitArray(4);
+
                         search.currentPage = number;
                         search.pageCount = feeds.photos.pages;
                         $scope.isFetching = false;
@@ -308,10 +340,13 @@
         };
 
         $scope.range = function(n) {
-            var rangeSize = 5;
+            var rangeSize = 10;
             var ret = [];
             var start;
-
+
+            if (search.pageCount < rangeSize) {
+                rangeSize = search.pageCount;
+            }
             start = search.currentPage;
             if ( start > search.pageCount-rangeSize ) {
               start = search.pageCount-rangeSize+1;
@@ -325,34 +360,25 @@
         };
 
 
-        this.prevPage = function() {
-            if (search.currentPage > 0) {
-                search.newSearch(search.currentPage--);
-            }
-        };
+
 
         $scope.prevPageDisabled = function() {
             return search.currentPage === 1 ? true : false;
-            //return "disabled";
         };
 
 //        this.pageCount = function() {
 //            return Math.ceil(this.products.length/this.itemsPerPage)-1;
 //        };
 
-        search.nextPage = function() {
-            if (search.currentPage < search.pageCount) {
-                search.newSearch(search.currentPage++);
-            }
-        };
+
 
         $scope.nextPageDisabled = function() {
             return search.currentPage === search.pageCount ? true : false;
         };
 
-        $scope.setPage = function(n) {
-            search.currentPage = n;
-        };
+//        $scope.setPage = function(n) {
+//            search.currentPage = n;
+//        };
 
 	}]);