display customized home page html

app/assets/javascripts/controllers/home.js

@@ -5,7 +5,7 @@ Application.Controllers.controller('HomeController', ['$scope', '$stateParams',
   /* PUBLIC SCOPE */
 
     // Home page HTML content
-    $scope.homeContent = homeContentPromise;
+    $scope.homeContent = null;
 
     /* PRIVATE SCOPE */
 
@@ -18,6 +18,46 @@ Application.Controllers.controller('HomeController', ['$scope', '$stateParams',
       if ($stateParams.reset_password_token) {
         return $scope.$parent.editPassword($stateParams.reset_password_token);
       }
+
+      // We set the home page content, with the directives replacing the placeholders
+      $scope.homeContent = insertDirectives(homeContentPromise.setting.value);
+    };
+
+    const insertDirectives = function (html) {
+      const node = document.createElement('div');
+      node.innerHTML = html.trim();
+
+      const newsNode = node.querySelector('div#news');
+      if (newsNode) {
+        const news = document.createElement('news');
+        newsNode.parentNode.replaceChild(news, newsNode);
+      }
+
+      const projectsNode = node.querySelector('div#projects');
+      if (projectsNode) {
+        const projects = document.createElement('projects');
+        projectsNode.parentNode.replaceChild(projects, projectsNode);
+      }
+
+      const twitterNode = node.querySelector('div#twitter');
+      if (twitterNode) {
+        const twitter = document.createElement('twitter');
+        twitterNode.parentNode.replaceChild(twitter, twitterNode);
+      }
+
+      const membersNode = node.querySelector('div#members');
+      if (membersNode) {
+        const members = document.createElement('members');
+        membersNode.parentNode.replaceChild(members, membersNode);
+      }
+
+      const eventsNode = node.querySelector('div#events');
+      if (eventsNode) {
+        const events = document.createElement('events');
+        eventsNode.parentNode.replaceChild(events, eventsNode);
+      }
+
+      return node.outerHTML;
     };
 
     // !!! MUST BE CALLED AT THE END of the controller

app/assets/javascripts/directives/compile.js

@@ -0,0 +1,21 @@
+Application.Directives.directive('compile', ['$compile', function ($compile) {
+  return function (scope, element, attrs) {
+    scope.$watch(
+      function (scope) {
+        // watch the 'compile' expression for changes
+        return scope.$eval(attrs.compile);
+      },
+      function (value) {
+        // when the 'compile' expression changes
+        // assign it into the current DOM
+        element.html(value);
+
+        // compile the new DOM and link it to the current
+        // scope.
+        // NOTE: we only compile .childNodes so that
+        // we don't get into infinite loop compiling ourselves
+        $compile(element.contents())(scope);
+      }
+    );
+  };
+}]);

app/assets/stylesheets/app.layout.scss

@@ -636,3 +636,8 @@ body.container{
     left: -4px;
   }
 }
+
+
+.home-page {
+  @extend .wrapper;
+}

app/assets/templates/home.html.erb

@@ -1,22 +1,2 @@
-<div class="m-sm">
-  <news></news>
-</div>
-<div class="row wrapper">
-	<div class="col-lg-8">
-		<projects></projects>
-  </div>
-
-
-	<div class="col-lg-4 m-t-lg">
-    <twitter></twitter>
-
-		<members></members>
-
-	</div>
-</div>
-
-<div class="row wrapper m-t-sm">
-  <div class="col-lg-12">
-    <events></events>
-  </div>
+<div class="home-page" compile="homeContent">
 </div>