add sanitize function to accept url from the request response - enable edit on dbclick - improve html
--- a/client/app/app.js Wed Mar 25 15:55:38 2015 +0100
+++ b/client/app/app.js Wed Mar 25 15:57:45 2015 +0100
@@ -20,11 +20,7 @@
controller: 'slidesCtrl',
templateUrl: 'slides/slides.html'
}).
- when('/slide/edit/:idSlide', {
- controller: 'slideEditCtrl',
- templateUrl: 'slides/slides.html'
- }).
- when('/slideshow', {
+ when('/slideshow/', {
controller: 'slideshowCtrl',
templateUrl: 'slideshow/slideshow.html'
}).
@@ -49,8 +45,8 @@
templateUrl: 'search/search.html'
}).
when('/login', {
- controller: 'loginCtrl',
- templateUrl: 'login/login.html'
+ controller: 'authCtrl',
+ templateUrl: 'auth/auth.html'
}).
otherwise({
redirectTo: '/'
@@ -65,7 +61,7 @@
.config(function($logProvider){
$logProvider.debugEnabled(true);
})
- .service('searchApi', function($resource, context) {
+ .service('searchApi', function($resource, context, $sce) {
this.searchResource = function(params){
return $resource(context.urls.searchUrl,
{
@@ -101,6 +97,15 @@
this.booksSlides = $resource(context.urls.ammicoUrl+'/books/:idBook/slides/', {idBook:'@idBook'});
this.listSlides= $resource(context.urls.ammicoUrl+'/slides/');
this.slide = $resource(context.urls.ammicoUrl+'/slides/:idSlide/', {idSlide:'@idSlide'});
+ this.sanitizeUrls = function(data){
+ console.log('heyr there !');
+ console.log(data);
+ data.details.audio = $sce.trustAsResourceUrl(data.details.audio);
+ data.details.video = $sce.trustAsResourceUrl(data.details.video);
+ data.audio = $sce.trustAsResourceUrl(data.audio);
+ data.video = $sce.trustAsResourceUrl(data.video);
+ return data;
+ };
});
})();
--- a/client/app/slides/dataEditor.html Wed Mar 25 15:55:38 2015 +0100
+++ b/client/app/slides/dataEditor.html Wed Mar 25 15:57:45 2015 +0100
@@ -1,14 +1,17 @@
-<div>
-<div ng-hide="slide.editMode">
- <h4>{{slide.user_title}}</h4>
- <p>{{slide.user_description}}</p>
- <p><em>{{slide.tags.join(', ')}}</em></p>
- <p class="text-right"><button id="btn-search-annotations" class="btn" ng-click="slide.editMode=true"><span class="glyphicon glyphicon-pencil"></span></button></p>
-</div>
-<div ng-show="slide.editMode">
- <input type="text" class="form-control" ng-model='slide.user_title'></input>
- <textarea class="form-control editor-textarea" ng-model='slide.user_description'></textarea>
- <input type="text" class="form-control" ng-model='slide.tags'></input>
- <p class="text-right"><button id="btn-search-annotations" class="btn" ng-click="slidesave()"><span class="glyphicon glyphicon-ok"></span></button></p>
-</div>
+<div class="user-details">
+ <div ng-hide="slide.editMode">
+ <h4 ng-dblClick="doubleClick()">{{slide.title}}</h4>
+ <p ng-dblClick="doubleClick()" class="description">{{slide.description}}</p>
+ <p ng-dblClick="doubleClick()">{{slide.comments}}</p>
+ <p ng-dblClick="doubleClick()"><em>{{slide.tags.join(', ')}}</em></p>
+ <div class="text-right"><button id="btn-search-annotations" class="btn" ng-click="slide.editMode=true"><span class="glyphicon glyphicon-pencil"></span></button></div>
+ </div>
+
+ <div ng-show="slide.editMode">
+ <input type="text" class="form-control" ng-model='slide.title' placeholder="Titre"></input>
+ <textarea class="form-control editor-textarea" ng-model='slide.description' placeholder="Description"></textarea>
+ <input type="text" class="form-control" ng-model='slide.comments' placeholder="Comments"></input>
+ <input type="text" class="form-control" ng-model='slide.tags' placeholder="Tags"></input>
+ <div class="text-right"><button id="btn-search-annotations" class="btn" ng-click="slidesave()"><span class="glyphicon glyphicon-ok"></span></button></div>
+ </div>
</div>
\ No newline at end of file
--- a/client/app/slides/slides.css Wed Mar 25 15:55:38 2015 +0100
+++ b/client/app/slides/slides.css Wed Mar 25 15:57:45 2015 +0100
@@ -1,9 +1,32 @@
-.media {
- border: 1px solid;
+.slide {
+ margin-top: -20px;
+}
+
+.slide-title,
+.slide-nav,
+.slide-content {
+ border-bottom:1px solid grey;
}
-.media img{
- max-height: 500px;
+.slide-nav{
+ padding:10px 0;
+ display: inline-block;
+ width: 100%;
+}
+
+.slide-content{
+ padding:10px 0;
+ height: 524px;
+}
+
+.media{
+ border-right:1px solid grey;
+ height: 100%
+}
+
+.media img,
+.media video{
+ max-height: 100%;
max-width: 100%;
display: block;
margin: auto;
@@ -14,17 +37,40 @@
position: static;
text-shadow: none;
text-align: left;
- border: 1px solid;
+ overflow: scroll;
+ height: 100%
}
.original-text {
font-style: italic;
}
-textarea.form-control {
+.user-details textarea.form-control {
height: 140px;
+ margin: 10px 0;
+}
+.user-details input.form-control{
+ margin: 10px 0;
+}
+
+#back{
+ float:left;
+ margin: 0 10px;
}
-.ng-binding img{
- height: 80px;
+#previous,
+#next{
+ float:right;
+ margin: 0 10px;
+}
+.user-details p,
+.user-details h4{
+ border: 1px solid #ededed;
+ min-height: 21px;
+ padding: 6px 12px;
+ border-radius: 4px;
+}
+
+.user-details p.description{
+ min-height: 140px;
}
\ No newline at end of file
--- a/client/app/slides/slides.html Wed Mar 25 15:55:38 2015 +0100
+++ b/client/app/slides/slides.html Wed Mar 25 15:57:45 2015 +0100
@@ -1,20 +1,29 @@
-<h1>Slide</h1>
-<div class="container">
- <div class="col-md-6 media">
- <img ng-src="{{ slide.details.firstImg }}" style="margin: auto;">
+<div class="slide row">
+ <div class="slide-title">
+ <h1>{{slide.title}} - {{slide.details.title}}</h1>
+ </div>
+ <div class="slide-nav">
+ <a id="back" href="#/books/{{slide.book}}">«Retour galerie</a>
+ <a id="next" href="#">Suivant»</a>
+ <a id="previous" href="#">«Precedents</a>
</div>
- <div class="col-md-6 caption ">
- <slide-editor index="{{$index}}"></slide-editor>
- <hr />
- <h4 class="original-text">{{ slide.metas_dict.name }}</h4>
- <p class="original-text">{{ slide.metas_dict.description }}</p>
- <p>
- <strong>Titre : </strong><small>{{
- slide.details.title }}</small>
- </p>
- <p>
- <strong>Description : </strong><small
- ng-bind-html="slide.details.description"></small>
- </p>
+ <div class="container slide-content">
+ <div class="col-md-7 media">
+ <img ng-if="slide.details.firstImg" ng-src="{{ slide.details.firstImg }}" style="margin: auto;">
+ <audio ng-if="slide.details.audio" ng-src="{{ slide.details.audio }}" style="margin: auto; controls loop"></audio>
+ <video ng-if="slide.details.video" ng-src="{{ slide.details.video }}" style="margin: auto;" controls></video>
+ </div>
+ <div class="col-md-5 caption">
+ <slide-editor index="{{$index}}"></slide-editor>
+ <hr />
+ <div class="details">
+ <p>
+ <strong>Titre : </strong><small>{{slide.details.title}}</small>
+ </p>
+ <p>
+ <strong>Description : </strong><small>{{slide.details.captionImg}}</small>
+ </p>
+ </div>
+ </div>
</div>
</div>
--- a/client/app/slides/slides_controller.js Wed Mar 25 15:55:38 2015 +0100
+++ b/client/app/slides/slides_controller.js Wed Mar 25 15:57:45 2015 +0100
@@ -2,10 +2,11 @@
'use strict';
angular.module('ammicoSlides',['ngResource', 'ngRoute'])
- .controller('slidesCtrl', function($scope, $routeParams, searchApi, $sce){
-
+ .controller('slidesCtrl', function($scope, $routeParams, searchApi){
+ console.log($scope.currentBook);
+
$scope.slide = searchApi.slide.get({idSlide:$routeParams.idSlide, format:'json'}, function(data){
- data.details.description = $sce.trustAsHtml(data.details.description);
+ data = searchApi.sanitizeUrls(data);
});
$scope.save = function(){
@@ -23,13 +24,16 @@
$scope.slidesave = function(){
if(typeof $scope.slide.tags === 'string'){
$scope.slide.tags = $scope.slide.tags.split(',');
- }
- for (var i = $scope.slide.tags.length - 1; i >= 0; i--) {
- $scope.slide.tags[i] = $scope.slide.tags[i].trim();
+ for (var i = $scope.slide.tags.length - 1; i >= 0; i--) {
+ $scope.slide.tags[i] = $scope.slide.tags[i].trim();
+ }
}
$scope.slide.editMode = false;
$scope.save();
};
+ $scope.doubleClick = function(){
+ $scope.slide.editMode = true;
+ };
}
};
});