feature/character-detail-comic-list — Comics list screen relative to a character with infinite scroll. Pretty cool as space is reserved in the grid and there is no relayout.

Author: jeandat

app/_ionic.app.scss

@@ -6,6 +6,7 @@ in ionic's _variables.scss file.
 // The path for our ionicons font files, relative to the built CSS in www/css
 $ionicons-font-path: "fonts";
 $base-background-color: #DDD;
+$dark: #333;
 
 // Override default font family
 //$font-family-sans-serif:          "Roboto", "Segoe UI", "Arial", sans-serif;

app/app.config.js

@@ -33,15 +33,13 @@
 
         $stateProvider
 
-        // setup an abstract state for the apps directive
+            // setup an abstract state for the apps directive
             .state('app', {
                 url: '/app',
                 abstract: true,
                 templateUrl: 'common/layout/layout.jade'
             })
 
-            // Each app has its own nav history stack:
-
             .state('app.characterList', {
                 url: '/characters',
                 views: {
@@ -66,7 +64,8 @@
             .state('app.characterDetailComicList', {
                 url: '/characters',
                 params: {
-                    comics: []
+                    comics: [],
+                    character: {}
                 },
                 views: {
                     'app-characters': {

app/character/list/character-list.run.js renamed to app/character/character.run.js

@@ -0,0 +1,22 @@
+.character-comics{
+    &__cover-container{
+        padding: $content-padding/2;
+    }
+    &__cover-wrapper{
+        position: relative;
+        height: 0;
+        overflow: hidden;
+        // Clever technique to reserve space although we don't know the image size yet.
+        // We can do that because we know the image aspect ratio and padding values
+        // expressed in percentage are relative to the width.
+        // http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
+        padding-bottom: 450/300 * 100%;
+        background-color: darken($base-background-color, 10%);
+    }
+    &__cover{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width:100%;
+    }
+}

app/character/comics/_character-comics.scss

@@ -5,11 +5,14 @@
         .module('app')
         .controller('CharacterComicsController', CharacterComicsController);
 
-    function CharacterComicsController($log, $stateParams) {
+    function CharacterComicsController($log, $stateParams, comicService, $scope, throwErr) {
 
         var vm = this;
         vm.title = 'CharacterComicsController';
         vm.comics = $stateParams.comics;
+        vm.character = $stateParams.character;
+        vm.hasMore = true;
+        vm.showMore = showMore;
 
         activate();
 
@@ -19,6 +22,27 @@
             $log.debug(vm.title + ' instantiated');
         }
 
+        function showMore(){
+            $log.debug('Infinite scroll boundary reached');
+            comicService
+                .findByCharacterId(vm.character.id, {offset:vm.comics.length})
+                .then(updateList)
+                .catch(throwErr);
+
+            /////////////
+
+            function updateList(results){
+                var meta = _.get(results, 'meta');
+                $log.info('Loaded', (meta.count + meta.offset), '/', meta.total, 'comics');
+                // Update list of characters
+                vm.comics = _.concat(vm.comics, results);
+                // Update meta
+                vm.comics.meta = meta;
+                // Update boolean to know instantly if there is more
+                vm.hasMore = meta && (meta.count + meta.offset) < meta.total;
+                $scope.$broadcast('scroll.infiniteScrollComplete');
+            }
+        }
     }
 
 })();

app/character/comics/character-comics.controller.js

@@ -1,2 +1,11 @@
 ion-view.character-comics(view-title='Comics')
-    ion-content
+    ion-content(delegate-handle='characterComicsHandle')
+        .row.row-wrap
+            .col-33.character-comics__cover-container(ng-repeat='comic in vm.comics track by $index')
+                div.character-comics__cover-wrapper
+                    img.character-comics__cover(ng-if='::comic.thumbnailUrlInPortraitUncanny' img-cache ic-src='{{::comic.thumbnailUrlInPortraitUncanny}}' width='100%' height='auto'
+                    ui-sref='app.characterDetailComicDetail({comic:comic})')
+                    img.character-comics__cover(ng-if='::!comic.thumbnailUrlInPortraitUncanny' width='100%' height='auto' ng-src='img/image-not-available_portrait-uncanny.png'
+                    ui-sref='app.characterDetailComicDetail({comic:comic})')
+
+        ion-infinite-scroll(on-infinite='vm.showMore()' distance='20%' immediate-check='false' ng-if='vm.hasMore')

app/character/comics/character-comics.jade

@@ -15,6 +15,6 @@ ion-view.characters(view-title='Characters')
                     i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
                     | {{::character.name}}
         .characters__footer
-            ion-spinner.spinner-assertive(ng-if='vm.searching')
+            ion-spinner(ng-if='vm.searching')
             button.button.button-block.button-assertive.characters__show-more(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
                 | Show more

app/character/list/character-list.jade

@@ -10,15 +10,21 @@
     function addNewMethodsToComics(Restangular) {
         Restangular.extendModel('comics', function (model) {
             model.thumbnailUrl = getThumbnailUrl();
+            model.thumbnailUrlInPortraitUncanny = getThumbnailUrlInPortraitUncanny();
             return model;
 
             /////////////
 
             function getThumbnailUrl() {
                 var tnl = model.thumbnail;
-                if(_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
+                if (_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
                 return tnl.path + '.' + tnl.extension;
             }
+            function getThumbnailUrlInPortraitUncanny(){
+                var tnl = model.thumbnail;
+                if (_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
+                return tnl.path + '/portrait_uncanny.' + tnl.extension;
+            }
         });
     }
 

app/comic/list/comic-list.run.js renamed to app/comic/comic.run.js

@@ -15,6 +15,6 @@ ion-view.comics(view-title='Comics')
                     i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
                     | {{::comic.title}}
         .comics__footer
-            ion-spinner.spinner-assertive(ng-if='vm.searching')
+            ion-spinner(ng-if='vm.searching')
             button.button.button-block.button-assertive.comics__show-more(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
                 | Show more