Makes album a component.
Should not be a directive, but a simple component
This commit is contained in:
15
webapp/js/components/album/album.html
Normal file
15
webapp/js/components/album/album.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<a href="" ng-click="$ctrl.openAlbumModal()">
|
||||
<div class="cover-container">
|
||||
<div class="cover">
|
||||
<img class="img-responsive img-rounded" alt="{{$ctrl.album.titleDisplay}}" ng-src="{{$ctrl.album.CoverURL}}"/>
|
||||
<div class="over-img-rating">
|
||||
<uib-rating ng-if="$ctrl.render" ng-model="$ctrl.album.Note" readonly="true"></uib-rating>
|
||||
</div>
|
||||
<div class="over-img-ref">{{$ctrl.album.ref}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-ellipsis">
|
||||
<p>{{$ctrl.album.serieDisplay || '-'}}</p>
|
||||
<p>{{$ctrl.album.titleDisplay}}</p>
|
||||
</div>
|
||||
</a>
|
||||
49
webapp/js/components/album/album.js
Normal file
49
webapp/js/components/album/album.js
Normal file
@@ -0,0 +1,49 @@
|
||||
var album = angular.module('satbd.satellite.bar.components.album', [
|
||||
'ui.bootstrap',
|
||||
'ngAnimate']);
|
||||
|
||||
function AlbumCtrl($log,$uibModal,albumService) {
|
||||
var ctrl = this;
|
||||
ctrl.render = false;
|
||||
ctrl.album = {Note :-1};
|
||||
|
||||
albumService.get(ctrl.id)
|
||||
.then(function(data) {
|
||||
ctrl.album = data;
|
||||
ctrl.render = true;
|
||||
}, function(err) {
|
||||
$log.error('Could not fetch album '+ ctrl.id + ' :' +err);
|
||||
});
|
||||
|
||||
ctrl.openAlbumModal = function() {
|
||||
var albumModalInstance = $uibModal.open({
|
||||
templateUrl: 'js/components/album/albumModal.html',
|
||||
controller: 'AlbumModalInstanceCtrl',
|
||||
size: 'lg',
|
||||
keyboard: true,
|
||||
resolve: {
|
||||
album: function() {
|
||||
return ctrl.album;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
album.component('album', {
|
||||
templateUrl: 'js/components/album/album.html',
|
||||
controller: AlbumCtrl,
|
||||
bindings: {
|
||||
id: '=albumId'
|
||||
}
|
||||
})
|
||||
|
||||
album.controller('AlbumModalInstanceCtrl', function($scope,$uibModalInstance,album) {
|
||||
$scope.album = album;
|
||||
$scope.ok = function() {
|
||||
$uibModalInstance.close('');
|
||||
};
|
||||
$scope.getLink = function(n) {
|
||||
return $scope.album[n];
|
||||
}
|
||||
});
|
||||
49
webapp/js/components/album/albumModal.html
Normal file
49
webapp/js/components/album/albumModal.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" ng-if="album.serieDisplay.length > 0">{{album.serieDisplay}}: {{album.titleDisplay}}</h3>
|
||||
<h3 class="modal-title" ng-if="album.serieDisplay.length == 0">{{album.titleDisplay}}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<div class="album-modal-cover">
|
||||
<img class="img-responsive img-rounded" alt="Couverture - {{album.titleDisplay}}" ng-src="{{album.CoverURL}}" />
|
||||
<div class="over-img-rating">
|
||||
<uib-rating ng-model="album.Note" readonly="true"></uib-rating>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-9">
|
||||
<div class="album-modal-description">
|
||||
<p class="infos">
|
||||
<span ng-if="album.serieDisplay">Série: {{album.serie || '-'}}, </span>
|
||||
<span ng-if="album.Num > -1 || album.NumA">Tome: {{album.NumA || album.Num }}, </span>
|
||||
<span ng-if="album.dessins">Dessins:
|
||||
<a ng-repeat="d in album.dessins" ng-href="{{album.Links[d]}}">{{d}}, </a>
|
||||
</span>
|
||||
<span ng-if="album.scenario">Scenario:
|
||||
<a ng-repeat="s in album.scenario" ng-href="{{album.Links[s]}}">{{s}}, </a>
|
||||
</span>
|
||||
<span ng-if="album.couleurs">Couleurs:
|
||||
<a ng-repeat="c in album.couleurs" ng-href="{{album.Links[c]}}">{{c}}, </a>
|
||||
</span>
|
||||
<span ng-if="album.Note>-1">Note: {{ album.Note }}/5, </span>
|
||||
<span ng-if="album.editeur">Éditeur: {{album.editeur}}, </span>
|
||||
<span ng-if="album.collection">Collection: {{album.collection}}, </span>
|
||||
<span ng-if="album.ISBN">ISBN: {{album.ISBN}}</span>
|
||||
<span ng-if="album.PurchaseDate">Date d'acquisition: {{album.PurchaseDate | date:'dd/MM/yyyy' }}</span>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
<p ng-if="album.description.length > 0">{{album.description}}</p>
|
||||
|
||||
<p ng-if="album.description.length == 0">Album sans description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="row">
|
||||
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
|
||||
<h3 class="reference">Réf: {{album.ref}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,51 +0,0 @@
|
||||
var directives = angular.module('satbd.satellite.bar.directives',[
|
||||
'ui.bootstrap',
|
||||
'ngAnimate'
|
||||
])
|
||||
|
||||
directives.directive('album', function() {
|
||||
return {
|
||||
scope: {
|
||||
id: '=albumId'
|
||||
},
|
||||
templateUrl: 'js/directives/album.html',
|
||||
restrict: 'E',
|
||||
controller: 'AlbumCtrl'
|
||||
};
|
||||
});
|
||||
|
||||
directives.controller('AlbumCtrl', function($scope,$http,$log,$uibModal,albumService) {
|
||||
//we need to make sure rating is not rendered before note is known
|
||||
$scope.render = false;
|
||||
$scope.album = { Note:-1};
|
||||
albumService.get($scope.id)
|
||||
.then(function(data) {
|
||||
$scope.album = data;
|
||||
$scope.render = true;
|
||||
}, function(err) {
|
||||
$log.error('Could not fetch album ' + $scope.id + ' :' + err);
|
||||
});
|
||||
$scope.openAlbumModal = function() {
|
||||
var albumModalInstance = $uibModal.open({
|
||||
templateUrl: 'html/albumModal.html',
|
||||
controller: 'AlbumModalInstanceCtrl',
|
||||
size: 'lg',
|
||||
keyboard: true,
|
||||
resolve: {
|
||||
album: function() {
|
||||
return $scope.album;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
directives.controller('AlbumModalInstanceCtrl', function($scope,$uibModalInstance,album) {
|
||||
$scope.album = album;
|
||||
$scope.ok = function() {
|
||||
$uibModalInstance.close('');
|
||||
};
|
||||
$scope.getLink = function(n) {
|
||||
return $scope.album[n];
|
||||
}
|
||||
});
|
||||
@@ -1,15 +0,0 @@
|
||||
<a href="" ng-click="openAlbumModal()">
|
||||
<div class="cover-container">
|
||||
<div class="cover">
|
||||
<img class="img-responsive img-rounded" alt="{{album.titleDisplay}}" ng-src="{{album.CoverURL}}"/>
|
||||
<div class="over-img-rating">
|
||||
<uib-rating ng-if="render" ng-model="album.Note" readonly="true"></uib-rating>
|
||||
</div>
|
||||
<div class="over-img-ref">{{album.ref}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-ellipsis">
|
||||
<p>{{album.serieDisplay || '-'}}</p>
|
||||
<p>{{album.titleDisplay}}</p>
|
||||
</div>
|
||||
</a>
|
||||
@@ -6,7 +6,7 @@ responsiveRatio.directive('responsiveRatio', function() {
|
||||
scope: {
|
||||
responsiveRatio: '<responsiveRatio'
|
||||
},
|
||||
templateUrl: 'js/directives/responsive-ratio.html',
|
||||
templateUrl: 'js/directives/responsive-ratio/responsive-ratio.html',
|
||||
restrict: 'A',
|
||||
transclude: true,
|
||||
controller: 'ResponsiveRatioCtrl'
|
||||
@@ -3,7 +3,6 @@
|
||||
angular.module('satbd.satellite.bar',[
|
||||
'ngRoute',
|
||||
'satbd.satellite.bar.controllers',
|
||||
'satbd.satellite.bar.directives',
|
||||
'satbd.satellite.bar.services',
|
||||
'satbd.satellite.bar.views.recents',
|
||||
'satbd.satellite.bar.views.series',
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
angular.module('satbd.satellite.bar.views.recents',[
|
||||
'ngRoute',
|
||||
'satbd.satellite.bar.components.album',
|
||||
'angular-inview'
|
||||
]).config(function($routeProvider) {
|
||||
$routeProvider.when('/recents', {
|
||||
|
||||
Reference in New Issue
Block a user