feature/character-list — Following the withdrawal of native transitio…

…ns, I made a few optimisations :

- no more box shadows : replaced by a subtil border
- removed one useless composite layer inside scroll area
- replaced img tags by a div with a background image
- replaced model functions by properties in order to not recalculate the same value every time
I also replaced Marvel default image for images not found by a custom nicer one.

app/_ionic.app.scss

@@ -5,7 +5,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" !default;
-$base-background-color: #EEE;
+$base-background-color: #DDD;
 
 // Override default font family
 //$font-family-sans-serif:          "Roboto", "Segoe UI", "Arial", sans-serif;

app/character/_character-list.scss

@@ -6,16 +6,33 @@
         text-align: center;
         margin: $content-padding $content-padding $content-padding*2 $content-padding;
     }
-    &__item-cover{
+    &__search-bar{
+        // #perfmatters
+        // In order to not have a composite layer (the bar) inside another composite layer (the scroll area)
+        // Default css from ionic define a transform matrix which is useless in that case.
+        transform: none;
+    }
+    &__card{
+        // #perfmatters
+        box-shadow: none;
+    }
+    &-card__cover{
         background-color: #CCC;
-        object-fit: cover;
-        object-position: center;
+        background-size: cover;
+        background-position: center;
+        width: 100%;
+        height: 250px;
+        &--not-found{
+            background-image: url('../img/image-not-available.png');
+        }
+    }
+    &-card__footer{
+        border-bottom: 1px solid #CCC !important;
     }
 }
 .platform-ios.platform-cordova .characters{
     &__footer{
-        // Bugfix iOS
-        // margin-bottom is not respected.
+        // Bugfix iOS: margin-bottom is not respected.
         transform: translateY(-10px);
     }
 }

app/character/character-detail.controller.js

@@ -22,7 +22,7 @@
 
         function openDetailPage(){
             var open = _.get(window, 'cordova.InAppBrowser.open') || window.open;
-            open(vm.character.getDetailUrl(), '_system');
+            open(vm.character.detailUrl, '_system');
         }
 
     }

app/character/character-detail.jade

@@ -1,4 +1,4 @@
-ion-view.character.character__background(view-title='{{::vm.character.name}}' img-cache ic-bg='{{::vm.character.getThumbnailUrl()}}')
+ion-view.character.character__background(view-title='{{::vm.character.name}}' img-cache ic-bg='{{::vm.character.thumbnailUrl}}')
     ion-nav-buttons(side="right")
         button.button.button-light.button-clear.icon.ion-link(ng-click='::vm.openDetailPage()')
     ion-content.character__content

app/character/character-list.controller.js

@@ -11,14 +11,14 @@
         var vm = this;
         vm.title = 'CharacterListController';
         // Let's start with something cool ;)
-        vm.filter = '';
+        vm.filter = 'Deadpool';
         vm.characters = [];
         vm.searching = false;
         vm.offset = 0;
         vm.keep = keep;
         vm.search = search;
         vm.loadMore = loadMore;
-        vm.hasMoreData = hasMoreData;
+        vm.hasMoreData = false;
 
         activate();
 
@@ -36,20 +36,20 @@
         function search() {
             showSpinner();
             var promise = characterListService.findByName(vm.filter);
-            vm.characters = promise.$object;
+            vm.characters = [];
+            vm.hasMoreData = false;
             vm.offset = 0;
             $cordovaKeyboard.close();
             return promise
-                .then(clean)
+                .then(updateList)
+                .then(notify)
                 .catch(throwErr)
                 .finally(hideSpinner);
 
             ///////////
 
-            function clean(results) {
-                var meta = _.get(results, 'meta');
-                $log.info('Loaded', meta.count, '/', meta.total, 'characters which name starts with', vm.filter);
-                $cordovaToast.showShortBottom(meta.total + ' results');
+            function notify() {
+                $cordovaToast.showShortBottom(vm.characters.meta.total + ' results');
             }
 
         }
@@ -69,24 +69,20 @@
                 .then(updateList)
                 .catch(throwErr)
                 .finally(hideSpinner);
-
-            ///////////
-
-            function updateList(results) {
-                var meta = _.get(results, 'meta');
-                $log.info('Loaded', (meta.count + meta.offset), '/', meta.total, 'characters which name starts with', vm.filter);
-                vm.characters = _.concat(vm.characters, results);
-                vm.characters.meta = results.meta;
-            }
-
         }
 
-        function hasMoreData() {
-            var meta = _.get(vm, 'characters.meta');
-            return meta && (meta.count + meta.offset) < meta.total;
+        function updateList(results) {
+            var meta = _.get(results, 'meta');
+            $log.info('Loaded', (meta.count + meta.offset), '/', meta.total, 'characters which name starts with `' +
+                vm.filter + '`');
+            // Update list of characters
+            vm.characters = meta.offset === 0 ? results : _.concat(vm.characters, results);
+            // Update meta
+            meta = vm.characters.meta = results.meta;
+            // Update boolean to know instantly if there is more
+            vm.hasMoreData = meta && (meta.count + meta.offset) < meta.total;
         }
 
-
     }
 
 })();

app/character/character-list.jade

@@ -1,20 +1,20 @@
 ion-view.characters(view-title='Characters')
     ion-content
-        .bar.item-input-inset
-            form.characters__form(name='crtSearchForm', novalidate, ng-submit='vm.search()', autocomplete="off")
+        .bar.item-input-inset.characters__search-bar
+            form.characters__form(name='crtSearchForm' novalidate ng-submit='vm.search()' autocomplete="off")
                 label.item-input-wrapper
                     i.icon.ion-ios-search.placeholder-icon
-                    input(type='search', placeholder='Name starts with…', name='name',
-                    ng-model='vm.filter', spellcheck="false")
+                    input(type='search' placeholder='Name starts with…' name='name' ng-model='vm.filter'
+                    spellcheck="false")
         .list
-            .card(ng-repeat="character in vm.characters track by character.id")
+            .card.characters__card(ng-repeat="character in vm.characters track by character.id")
                 .item.item-image(ui-sref='app.character-detail({character:character})')
-                    img.characters__item-cover(img-cache ic-src="{{::character.getThumbnailUrl()}}", width="100%",
-                    height="250px")
-                .item.item-icon-right.assertive
-                    i.icon.ion-android-favorite-outline(ng-click='::vm.keep()')
+                    div.characters-card__cover(ng-if="character.thumbnailUrl" img-cache ic-bg="{{::character.thumbnailUrl}}")
+                    div.characters-card__cover.characters-card__cover--not-found(ng-if="!character.thumbnailUrl")
+                .item.item-icon-right.assertive.characters-card__footer
+                    i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
                     | {{::character.name}}
         .characters__footer
             ion-spinner.spinner-assertive(ng-if='vm.searching')
-            button.button.button-block.button-assertive(ng-click='vm.loadMore()',
-            ng-show='vm.hasMoreData()') Show more
+            button.button.button-block.button-assertive(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
+                | Show more

app/character/character-list.run.js

@@ -9,15 +9,16 @@
 
     function addNewMethodsToCharacters(Restangular) {
         Restangular.extendModel('characters', function (model) {
-            model.getThumbnailUrl = getThumbnailUrl;
-            model.getDetailUrl = getDetailUrl;
+            model.thumbnailUrl = getThumbnailUrl();
+            model.detailUrl = getDetailUrl();
             return model;
 
             /////////////
 
             function getThumbnailUrl() {
-                if(_.isEmpty(model.thumbnail)) return;
-                return model.thumbnail.path + '.' + model.thumbnail.extension;
+                var tnl = model.thumbnail;
+                if(_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
+                return tnl.path + '.' + tnl.extension;
             }
             function getDetailUrl(){
                 return _.get(_.find(model.urls, {type:'detail'}), 'url');