POC for custom home page

app/assets/javascripts/application.js.erb

@@ -56,6 +56,7 @@
 //= require angular-base64-upload/dist/angular-base64-upload.min
 //= require summernote/dist/summernote
 //= require angular-summernote/dist/angular-summernote
+//= require summernote-ext-nugget
 //= require jquery-minicolors/jquery.minicolors.js
 //= require angular-minicolors/angular-minicolors.js
 //= require angular-translate/dist/angular-translate

app/assets/javascripts/controllers/admin/settings.js.erb

@@ -12,8 +12,8 @@
  */
 'use strict';
 
-Application.Controllers.controller('SettingsController', ['$scope', '$filter', '$uibModal', 'Setting', 'growl', 'settingsPromise', 'privacyDraftsPromise', 'cgvFile', 'cguFile', 'logoFile', 'logoBlackFile', 'faviconFile', 'profileImageFile', 'CSRF', '_t',
-  function ($scope, $filter, $uibModal, Setting, growl, settingsPromise, privacyDraftsPromise, cgvFile, cguFile, logoFile, logoBlackFile, faviconFile, profileImageFile, CSRF, _t) {
+Application.Controllers.controller('SettingsController', ['$scope', '$rootScope', '$filter', '$uibModal', 'Setting', 'growl', 'settingsPromise', 'privacyDraftsPromise', 'cgvFile', 'cguFile', 'logoFile', 'logoBlackFile', 'faviconFile', 'profileImageFile', 'CSRF', '_t',
+  function ($scope, $rootScope, $filter, $uibModal, Setting, growl, settingsPromise, privacyDraftsPromise, cgvFile, cguFile, logoFile, logoBlackFile, faviconFile, profileImageFile, CSRF, _t) {
     /* PUBLIC SCOPE */
 
     // timepickers steps configuration
@@ -59,6 +59,7 @@ Application.Controllers.controller('SettingsController', ['$scope', '$filter', '
     $scope.privacyDpoSetting = { name: 'privacy_dpo', value: settingsPromise.privacy_dpo };
     $scope.aboutContactsSetting = { name: 'about_contacts', value: settingsPromise.about_contacts };
     $scope.homeBlogpostSetting = { name: 'home_blogpost', value: settingsPromise.home_blogpost };
+    $scope.homeContent = { name: 'home_content', value: settingsPromise.home_content };
     $scope.machineExplicationsAlert = { name: 'machine_explications_alert', value: settingsPromise.machine_explications_alert };
     $scope.trainingExplicationsAlert = { name: 'training_explications_alert', value: settingsPromise.training_explications_alert };
     $scope.trainingInformationMessage = { name: 'training_information_message', value: settingsPromise.training_information_message };
@@ -135,6 +136,17 @@ Application.Controllers.controller('SettingsController', ['$scope', '$filter', '
       bodyTemp: settingsPromise.privacy_body
     };
 
+    // Extend the options for summernote editor, with special tools for home page
+    $scope.summernoteOptsHomePage = Object.assign({}, $rootScope.summernoteOpts);
+    $scope.summernoteOptsHomePage.toolbar[5][1].push('nugget'); // toolbar -> insert -> nugget
+    $scope.summernoteOptsHomePage.nugget = {
+      label: "🧱",
+      tooltip: "blabla",
+      list: [
+        '[[lorem ipsum]]'
+      ]
+    }
+
     /**
      * For use with 'ng-class', returns the CSS class name for the uploads previews.
      * The preview may show a placeholder or the content of the file depending on the upload state.

app/assets/templates/admin/settings/home_page.html

@@ -1,6 +1,16 @@
 <div class="panel panel-default m-t-md">
     <div class="panel-body">
         <div class="row">
+            <div class="col-md-12">
+              <h4 translate>{{ 'app.admin.settings.customize_home_page' }}</h4>
+              <summernote ng-model="homeContent.value"
+                          id="home_content"
+                          config="summernoteOptsHomePage">
+              </summernote>
+              <button name="button" class="btn btn-warning" ng-click="save(homeContent)" translate>{{ 'app.shared.buttons.save' }}</button>
+            </div>
+        </div>
+        <div class="row m-t-lg">
             <div class="col-md-6">
                 <h4 translate>{{ 'app.admin.settings.news_of_the_home_page' }}</h4>
                 <div ng-model="homeBlogpostSetting.value" class="well" medium-editor options='{"placeholder": "{{ "app.admin.settings.type_your_news_here" | translate }}",

vendor/assets/javascripts/summernote-ext-nugget.js

@@ -0,0 +1,146 @@
+// Credits to: https://github.com/pHAlkaline/summernote-plugins/tree/master/plugins/nugget
+/*
+ summernote-nugget
+
+ Allow users to insert custom nuggets into the WYSIWYG.
+
+ Installation
+
+ 1) Copy the plugin
+
+ You must copy the plugin/nugget folder into your local summernote plugin folder.
+
+ 2) Configure the plugin
+
+ After that, to initialize the template plugin, you have to set these options :
+
+ $('#summernote').summernote({
+   toolbar: [
+     ['insert', ['nugget']]
+   ],
+   nugget: {
+     list: [
+       '[[Condo.name]]',
+       '[[Condo.title]]'
+     ]
+   },
+ });
+
+ *
+ **/
+(function (factory) {
+  /* global define */
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(window.jQuery);
+  }
+}(function ($) {
+
+
+  $.extend($.summernote.options, {
+    nugget: {
+      list: []
+    }
+
+  });
+  $.extend(true, $.summernote, {
+    // add localization texts
+    lang: {
+      'en-US': {
+        nugget: {
+          Nugget: 'Nugget',
+          Insert_nugget: 'Insert Nugget'
+
+        }
+      },
+      'en-GB': {
+        nugget: {
+          Nugget: 'Nugget',
+          Insert_nugget: 'Insert Nugget'
+
+        }
+      },
+      'pt-PT': {
+        nugget: {
+          Nugget: 'Pepita',
+          Insert_nugget: 'Inserir pepita'
+
+        }
+      },
+      'it-IT': {
+        nugget: {
+          Nugget: 'Pepite',
+          Insert_nugget: 'Pepite Inserto'
+
+        }
+      }
+    }
+  });
+  // Extends plugins for adding nuggets.
+  //  - plugin is external module for customizing.
+  $.extend($.summernote.plugins, {
+    /**
+     * @param {Object} context - context object has status of editor.
+     */
+    'nugget': function (context) {
+      // ui has renders to build ui elements.
+      //  - you can create a button with `ui.button`
+      var ui = $.summernote.ui;
+      var options = context.options.nugget;
+      var context_options = context.options;
+      var lang = context_options.langInfo;
+      var defaultOptions = {
+        label: lang.nugget.Nugget,
+        tooltip: lang.nugget.Insert_nugget
+      };
+
+      // Assign default values if not supplied
+      for (var propertyName in defaultOptions) {
+        if (options.hasOwnProperty(propertyName) === false) {
+          options[propertyName] = defaultOptions[propertyName];
+        }
+      }
+
+      // add hello button
+      context.memo('button.nugget', function () {
+        // create button
+
+        var button = ui.buttonGroup([
+          ui.button({
+            className: 'dropdown-toggle',
+            contents: '<span class="nugget">' + options.label + ' </span><span class="note-icon-caret"></span>',
+            tooltip: options.tooltip,
+            data: {
+              toggle: 'dropdown'
+            }
+          }),
+          ui.dropdown({
+            className: 'dropdown-nugget',
+            items: options.list,
+            click: function (event) {
+              event.preventDefault();
+
+              var $button = $(event.target);
+              var value = $button.data('value');
+              var node = document.createElement('span');
+              node.innerHTML = value;
+              context.invoke('editor.insertText', value);
+
+            }
+          })
+        ]);
+
+        // create jQuery object from button instance.
+        return button.render();
+      });
+    }
+
+  });
+
+}));