Skip to content

Commit 892c354

Browse files
committed
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.
1 parent 781ac09 commit 892c354

13 files changed

+70
-9
lines changed

app/_ionic.app.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ in ionic's _variables.scss file.
66
// The path for our ionicons font files, relative to the built CSS in www/css
77
$ionicons-font-path: "fonts";
88
$base-background-color: #DDD;
9+
$dark: #333;
910

1011
// Override default font family
1112
//$font-family-sans-serif: "Roboto", "Segoe UI", "Arial", sans-serif;

app/app.config.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,13 @@
3333

3434
$stateProvider
3535

36-
// setup an abstract state for the apps directive
36+
// setup an abstract state for the apps directive
3737
.state('app', {
3838
url: '/app',
3939
abstract: true,
4040
templateUrl: 'common/layout/layout.jade'
4141
})
4242

43-
// Each app has its own nav history stack:
44-
4543
.state('app.characterList', {
4644
url: '/characters',
4745
views: {
@@ -66,7 +64,8 @@
6664
.state('app.characterDetailComicList', {
6765
url: '/characters',
6866
params: {
69-
comics: []
67+
comics: [],
68+
character: {}
7069
},
7170
views: {
7271
'app-characters': {
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.character-comics{
2+
&__cover-container{
3+
padding: $content-padding/2;
4+
}
5+
&__cover-wrapper{
6+
position: relative;
7+
height: 0;
8+
overflow: hidden;
9+
// Clever technique to reserve space although we don't know the image size yet.
10+
// We can do that because we know the image aspect ratio and padding values
11+
// expressed in percentage are relative to the width.
12+
// http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
13+
padding-bottom: 450/300 * 100%;
14+
background-color: darken($base-background-color, 10%);
15+
}
16+
&__cover{
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
width:100%;
21+
}
22+
}

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@
55
.module('app')
66
.controller('CharacterComicsController', CharacterComicsController);
77

8-
function CharacterComicsController($log, $stateParams) {
8+
function CharacterComicsController($log, $stateParams, comicService, $scope, throwErr) {
99

1010
var vm = this;
1111
vm.title = 'CharacterComicsController';
1212
vm.comics = $stateParams.comics;
13+
vm.character = $stateParams.character;
14+
vm.hasMore = true;
15+
vm.showMore = showMore;
1316

1417
activate();
1518

@@ -19,6 +22,27 @@
1922
$log.debug(vm.title + ' instantiated');
2023
}
2124

25+
function showMore(){
26+
$log.debug('Infinite scroll boundary reached');
27+
comicService
28+
.findByCharacterId(vm.character.id, {offset:vm.comics.length})
29+
.then(updateList)
30+
.catch(throwErr);
31+
32+
/////////////
33+
34+
function updateList(results){
35+
var meta = _.get(results, 'meta');
36+
$log.info('Loaded', (meta.count + meta.offset), '/', meta.total, 'comics');
37+
// Update list of characters
38+
vm.comics = _.concat(vm.comics, results);
39+
// Update meta
40+
vm.comics.meta = meta;
41+
// Update boolean to know instantly if there is more
42+
vm.hasMore = meta && (meta.count + meta.offset) < meta.total;
43+
$scope.$broadcast('scroll.infiniteScrollComplete');
44+
}
45+
}
2246
}
2347

2448
})();
Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
ion-view.character-comics(view-title='Comics')
2-
ion-content
2+
ion-content(delegate-handle='characterComicsHandle')
3+
.row.row-wrap
4+
.col-33.character-comics__cover-container(ng-repeat='comic in vm.comics track by $index')
5+
div.character-comics__cover-wrapper
6+
img.character-comics__cover(ng-if='::comic.thumbnailUrlInPortraitUncanny' img-cache ic-src='{{::comic.thumbnailUrlInPortraitUncanny}}' width='100%' height='auto'
7+
ui-sref='app.characterDetailComicDetail({comic:comic})')
8+
img.character-comics__cover(ng-if='::!comic.thumbnailUrlInPortraitUncanny' width='100%' height='auto' ng-src='img/image-not-available_portrait-uncanny.png'
9+
ui-sref='app.characterDetailComicDetail({comic:comic})')
10+
11+
ion-infinite-scroll(on-infinite='vm.showMore()' distance='20%' immediate-check='false' ng-if='vm.hasMore')

app/character/list/character-list.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ ion-view.characters(view-title='Characters')
1515
i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
1616
| {{::character.name}}
1717
.characters__footer
18-
ion-spinner.spinner-assertive(ng-if='vm.searching')
18+
ion-spinner(ng-if='vm.searching')
1919
button.button.button-block.button-assertive.characters__show-more(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
2020
| Show more

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,21 @@
1010
function addNewMethodsToComics(Restangular) {
1111
Restangular.extendModel('comics', function (model) {
1212
model.thumbnailUrl = getThumbnailUrl();
13+
model.thumbnailUrlInPortraitUncanny = getThumbnailUrlInPortraitUncanny();
1314
return model;
1415

1516
/////////////
1617

1718
function getThumbnailUrl() {
1819
var tnl = model.thumbnail;
19-
if(_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
20+
if (_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
2021
return tnl.path + '.' + tnl.extension;
2122
}
23+
function getThumbnailUrlInPortraitUncanny(){
24+
var tnl = model.thumbnail;
25+
if (_.isEmpty(tnl) || _.endsWith(tnl.path, 'image_not_available')) return '';
26+
return tnl.path + '/portrait_uncanny.' + tnl.extension;
27+
}
2228
});
2329
}
2430

app/comic/list/comic-list.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ ion-view.comics(view-title='Comics')
1515
i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
1616
| {{::comic.title}}
1717
.comics__footer
18-
ion-spinner.spinner-assertive(ng-if='vm.searching')
18+
ion-spinner(ng-if='vm.searching')
1919
button.button.button-block.button-assertive.comics__show-more(ng-click='vm.loadMore()' ng-show='vm.hasMoreData')
2020
| Show more

img/image-not-available.png

-44.4 KB
Loading
12 KB
Loading

img/image-not-available_portrait.png

11.4 KB
Loading

img/image-not-available_portrait.pxm

419 KB
Binary file not shown.

0 commit comments

Comments
 (0)