[ongoing] move homepage components to standalone directives

app/assets/javascripts/controllers/home.js

@@ -10,22 +10,16 @@
  */
 'use strict';
 
-Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'lastMembersPromise', 'lastProjectsPromise', 'upcomingEventsPromise', 'homeBlogpostPromise', 'twitterNamePromise',
-  function ($scope, $stateParams, lastMembersPromise, lastProjectsPromise, upcomingEventsPromise, homeBlogpostPromise, twitterNamePromise) {
+Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'lastMembersPromise', 'upcomingEventsPromise', 'twitterNamePromise',
+  function ($scope, $stateParams, lastMembersPromise, upcomingEventsPromise, twitterNamePromise) {
   /* PUBLIC SCOPE */
 
     // The last registered members who confirmed their addresses
     $scope.lastMembers = lastMembersPromise;
 
-    // The last projects published/documented on the plateform
-    $scope.lastProjects = lastProjectsPromise;
-
     // The closest upcoming events
     $scope.upcomingEvents = upcomingEventsPromise;
 
-    // The admin blogpost
-    $scope.homeBlogpost = homeBlogpostPromise.setting.value;
-
     // Twitter username
     $scope.twitterName = twitterNamePromise.setting.value;
 

app/assets/javascripts/directives/news.js.erb

@@ -0,0 +1,26 @@
+Application.Directives.directive('news', [ 'Setting',
+  function (Setting) {
+    return ({
+      restrict: 'E',
+      templateUrl: '<%= asset_path "home/news.html" %>',
+      link ($scope, element, attributes) {
+        // The admin blogpost
+        $scope.homeBlogpost = null;
+
+        /* PRIVATE SCOPE */
+
+        /**
+         * Kind of constructor: these actions will be realized first when the directive is loaded
+         */
+        const initialize = function () {
+          Setting.get({ name: 'home_blogpost' }, function (data) {
+            $scope.homeBlogpost = data.setting.value;
+          })
+        };
+
+        // !!! MUST BE CALLED AT THE END of the directive
+        return initialize();
+      }
+    });
+  }
+]);

app/assets/javascripts/directives/projects.js.erb

@@ -0,0 +1,26 @@
+Application.Directives.directive('projects', [ 'Project',
+  function (Project) {
+    return ({
+      restrict: 'E',
+      templateUrl: '<%= asset_path "home/projects.html" %>',
+      link ($scope, element, attributes) {
+        // The last projects published/documented on the plateform
+        $scope.lastProjects = null;
+
+        /* PRIVATE SCOPE */
+
+        /**
+         * Kind of constructor: these actions will be realized first when the directive is loaded
+         */
+        const initialize = function () {
+          Project.lastPublished(function (data) {
+            $scope.lastProjects = data;
+          })
+        };
+
+        // !!! MUST BE CALLED AT THE END of the directive
+        return initialize();
+      }
+    });
+  }
+]);

app/assets/javascripts/directives/twitter.js.erb

@@ -10,9 +10,9 @@ Application.Directives.directive('twitter', [ function () {
     scope: {
       profile: '@'
     },
-    templateUrl: '<%= asset_path "shared/_twitter.html" %>',
+    templateUrl: '<%= asset_path "home/_twitter.html" %>',
     link ($scope, element, attributes) {
-      var configProfile = {
+      const configProfile = {
         'profile': { 'screenName': $scope.profile },
         'domId': 'twitter',
         'maxTweets': 1,

app/assets/javascripts/router.js.erb

@@ -99,10 +99,8 @@ angular.module('application.router', ['ui.router'])
         },
         resolve: {
           lastMembersPromise: ['Member', function (Member) { return Member.lastSubscribed({ limit: 4 }).$promise; }],
-          lastProjectsPromise: ['Project', function (Project) { return Project.lastPublished().$promise; }],
           upcomingEventsPromise: ['Event', function (Event) { return Event.upcoming({ limit: 3 }).$promise; }],
-          homeBlogpostPromise: ['Setting', function (Setting) { return Setting.get({ name: 'home_blogpost' }).$promise; }],
-          twitterNamePromise: ['Setting', function (Setting) { return Setting.get({ name: 'twitter_name' }).$promise; }],
+          twitterNamePromise: ['Setting', function (Setting) { return Setting.get({ name: 'twitter_name' }).$promise; }]
         }
       })
       .state('app.public.privacy', {

app/assets/templates/home.html.erb

@@ -1,22 +1,10 @@
-
-<div class="alert alert-warning m-sm text-center" ng-if="(homeBlogpost != null) && (homeBlogpost != '') && (homeBlogpost != undefined)">
-	<span ng-bind-html="homeBlogpost"></span>
+<div class="m-sm">
+  <news></news>
 </div>
-
 <div class="row wrapper">
 	<div class="col-lg-8">
-		<h4 class="text-sm m-t-sm" translate>{{ 'app.public.home.latest_documented_projects' }}</h4>
-
-		<uib-carousel interval="5000" disable-animation="true">
-			<uib-slide class="h480 cover r" ng-repeat="p in lastProjects" active="p.active" style="background-image:url({{p.project_image}});">
-			  <!-- <img ng-src="{{p.project_image}}" style="margin:auto;"> -->
-			  <div class="carousel-caption">
-			    <h1 class="title"><a ui-sref="app.public.projects_show({id:p.slug})">{{p.name}}</a></h1>
-			    <!-- <p class="description hidden-xs">{{p.description | humanize : 120}}</p> -->
-			  </div>
-			</uib-slide>
-		</uib-carousel>
-    </div>
+		<projects></projects>
+  </div>
 
 
 	<div class="col-lg-4 m-t-lg">
@@ -24,7 +12,6 @@
 
 		<section class="widget panel b-a" >
 		  <div class="panel-heading small b-b">
-		    <!-- <span class="badge inverse pull-right">110</span> -->
 		    <h2 translate>{{ 'app.public.home.latest_registered_members' }}</h2>
 		  </div>
 

app/assets/templates/home/news.html

@@ -0,0 +1,3 @@
+<div class="alert alert-warning text-center" ng-if="(homeBlogpost != null) && (homeBlogpost != '') && (homeBlogpost != undefined)">
+  <span ng-bind-html="homeBlogpost"></span>
+</div>

app/assets/templates/home/projects.html

@@ -0,0 +1,11 @@
+<div>
+  <h4 class="text-sm m-t-sm" translate>{{ 'app.public.home.latest_documented_projects' }}</h4>
+
+  <uib-carousel interval="5000" disable-animation="true">
+    <uib-slide class="h480 cover r" ng-repeat="p in lastProjects" active="p.active" style="background-image:url({{p.project_image}});">
+      <div class="carousel-caption">
+        <h1 class="title"><a ui-sref="app.public.projects_show({id:p.slug})">{{p.name}}</a></h1>
+      </div>
+    </uib-slide>
+  </uib-carousel>
+</div>

db/seeds.rb

@@ -654,20 +654,20 @@ end
 unless Setting.find_by(name: 'home_content').try(:value)
   setting = Setting.find_or_initialize_by(name: 'home_content')
   setting.value = <<~HTML
-    <div class="row wrapper">
-      <div id="news">Brève</div>
+    <div class="m-sm">
+      <div id="news">#{I18n.t('app.admin.settings.item_news')}</div>
     </div>
-    <div class="row">
+    <div class="row wrapper">
       <div class="col-lg-8">
-        <div id="projects">Derniers projets</div>
+        <div id="projects">#{I18n.t('app.admin.settings.item_projects')}</div>
       </div>
       <div class="col-lg-4 m-t-lg">
-        <div id="twitter">Dernier tweet</div>
-        <div id="members">Derniers membres</div>
+        <div id="twitter">#{I18n.t('app.admin.settings.item_twitter')}</div>
+        <div id="members">#{I18n.t('app.admin.settings.item_members')}</div>
       </div>
     </div>
     <div class="row wrapper m-t-sm">
-      <div id="events">Prochains événements</div>
+      <div id="events">#{I18n.t('app.admin.settings.item_events')}</div>
     </div>
   HTML
   setting.save