update slideshow template
authorrougeronj
Wed, 25 Mar 2015 15:55:38 +0100
changeset 39 b714bcbe915c
parent 38 96a7d3e4d073
child 40 4b3bebe4355d
update slideshow template
client/app/slideshow/slideshow.css
client/app/slideshow/slideshow.html
client/app/slideshow/slideshow_controller.js
--- a/client/app/slideshow/slideshow.css	Tue Mar 24 18:13:23 2015 +0100
+++ b/client/app/slideshow/slideshow.css	Wed Mar 25 15:55:38 2015 +0100
@@ -1,3 +1,6 @@
+.slideshow{
+	margin-top:-20px;
+}
 .carousel-caption {
     color: #000;
     position: static;
@@ -29,3 +32,19 @@
 textarea.form-control {
     height: 140px;
 }
+
+ul.insight{
+	overflow-x: hidden;
+	overflow-y: scroll;
+	height: 170px; 
+}
+
+ul.insight li {
+    display: block;
+    height: 100%;
+}
+
+ul.insight li img{
+	height: 100%;
+	width: 100%;
+}
\ No newline at end of file
--- a/client/app/slideshow/slideshow.html	Tue Mar 24 18:13:23 2015 +0100
+++ b/client/app/slideshow/slideshow.html	Wed Mar 25 15:55:38 2015 +0100
@@ -1,27 +1,45 @@
-<h1>{{ slideshow.title }}</h1>
-<p>{{ slideshow.description }}</p>
-<div class="carousel-holder row">
-  <carousel>
-    <slide ng-repeat="slide in slideshow.hits" active="slide.active">
-        <div class="row">
-          <div class="col-md-6 col-md-offset-1">
-            <img ng-src="{{ slide.metas_dict.images }}" style="margin:auto;">
-          </div>
-          <div class="carousel-caption col-md-4">
-            <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 class="text-right"><a class="btn btn-default" ng-click="h.imgbig=!h.imgbig"><span class="glyphicon glyphicon-eye-open"></span></a></p>
-            <div ng-show="h.imgbig">
-              <p><small><strong>Classification&nbsp;:</strong> {{ slide.metas_dict.classification }}</small></p>
-              <p><small><strong>Current Custody&nbsp;:</strong> {{ slide.metas_dict.currentcustody }}</small></p>
-              <p><small><strong>Former Custody&nbsp;:</strong> {{ slide.metas_dict.formercustody }}</small></p>
-              <p><small><strong>Mesures&nbsp;:</strong> {{ slide.metas_dict.measures }}</small></p>
-              <p><small><strong>Acteurs&nbsp;:</strong> {{ slide.metas_dict.actors }}</small></p>
-              <p><small><strong>Lieux&nbsp;:</strong> {{ slide.metas_dict.places }}</small></p>
-          </div>
-          </div>
-      </slide>
-  </carousel>
+<div class="slideshow">
+	<div class="slide-title">
+			<h1>Diaporama - {{book.title}}</h1>
+	</div>
+	<div class="carousel-holder row">
+		<carousel>
+			<slide ng-repeat="slide in slideshow" active="slide.active">
+				<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">
+						<div class="user-details">
+							<h4>{{slide.title}}</h4>
+							<p>{{slide.description}}</p>
+							<p>{{slide.comments}}</p>
+							<p>
+								<em>{{slide.tags.join(', ')}}</em>
+							</p>
+						</div>
+						<hr />
+						<div class="details">
+							<p>
+								<strong>Titre&nbsp;:&nbsp;</strong><small>{{slide.details.title}}</small>
+							</p>
+							<p>
+								<strong>Description&nbsp;:&nbsp;</strong><small>{{slide.details.captionImg}}</small>
+							</p>
+						</div>
+					</div>
+				</div>
+			</slide> 
+		</carousel>
+		<ul class="list-unstyled list-inline row insight" >
+			<li class="col-md-2 item" ng-repeat="slide in slideshow">
+				<div class="img-ctn" ng-click="showSlide($index)">
+				    <img class="img img-responsive image" ng-src="{{ slide.details.firstImg }}" />
+				    <p>{{ slide.details.title }}</p>
+				</div>
+			</li>
+		</ul>
+	</div>
 </div>
--- a/client/app/slideshow/slideshow_controller.js	Tue Mar 24 18:13:23 2015 +0100
+++ b/client/app/slideshow/slideshow_controller.js	Wed Mar 25 15:55:38 2015 +0100
@@ -9,84 +9,13 @@
           controller: 'slideshowCtrl'
         });
     })
-    .service('slideshowModel', function(searchApi) {
-      this.slideshow = searchApi.searchResource({q:'stop_email=toto@gmail.com', of: 'json', synthesis: 'false', nresults:'50', callback: 'JSON_CALLBACK'}).getJsonp();
-    })
-    .controller('slideshowCtrl', function($scope, $filter, $location, $routeParams, $timeout, searchApi, slideshowModel){
-      $scope.slideshow = slideshowModel.slideshow;
-      
-      $scope.iSlide = parseInt($routeParams.iSlide) || 0;
-      if(typeof $routeParams.searched !== 'undefined'){
-          var a = $routeParams.searched.split(',');
-          var q = a[0], i = parseInt(a[1]);
-          if(a.length===2 && !isNaN(i)){
-              searchApi.searchResource({q:q, of: 'json', synthesis: 'false', nresults:'50', callback: 'JSON_CALLBACK'}).getJsonp().$promise.then(
-                  //success
-                  function( data ){
-                      $scope.slideshow.hits.push(data.hits[i]);
-                      // timeout because
-                      $timeout(function(){$scope.slideshow.hits[$scope.slideshow.hits.length-1].active = true;}, 500);
-                  },
-                  //error
-                  function( error ){
-                      alert('Erreur avec la requĂȘte (dans slideshow)', error);
-                  }
-              );
-          }
-      }
-      $timeout(function(){
-          if($scope.iSlide>=0 && $scope.iSlide<$scope.slideshow.hits.length){
-              $scope.slideshow.hits[$scope.iSlide].active = true;
-              var l = $location.path();
-              if(l.substr(0,16)==='/slideshow/edit/'){
-                  $scope.slideshow.hits[$scope.iSlide].editMode = true;
-              }
-          }
-      }, 500);
-      
-      $scope.save = function(){
-          $scope.slideshow
-          .$save()
-          .then(
-              function(response) {
-                  console.log('NICE SAVING!', response);
-              },
-              function(reason){
-                  alert('An error occured while saving : ' + reason);
-              }
-          );
-      };
-    })
-    .directive('slideEditor', function() {
-      return {
-          restrict: 'AE',
-          replace: true,
-          scope: false,
-          templateUrl: 'slideshow/dataEditor.html',
-          //controller: function($scope, $element, $attrs){
-          controller: function($scope){
-              $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();
-                  }
-                  $scope.slide.editMode = false;
-                  $scope.save();
-              };
-              $scope.editSlidesave = 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();
-                  }
-                  $scope.slide.editMode = false;
-                  $scope.save();
-              };
-          }
-      };
-  });
-
+    .controller('slideshowCtrl', function($scope, searchApi){
+    	$scope.slideshow = searchApi.booksSlides.query({idBook:'12', format:'json'}, function(data){
+    		data = searchApi.sanitizeUrls(data);
+    	});
+    	$scope.book = searchApi.book.get({idBook:'12', format:'json'});
+    	$scope.showSlide = function(index){
+    		console.log(index);
+    	};
+    });
 })();