Issue #11

Possibility to set the header element in start configuration (like the body element) _______________________________ Possibilité de fournir le header de l'élement dans la configuration de départ (comme le body)
pixelhumain · Oct 24, 2018 · e9bc913 · e9bc913
1 parent 5a33bd5
commit e9bc913
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 26 deletions.
diff --git a/src/js/classes/config/gogo-config.class.ts b/src/js/classes/config/gogo-config.class.ts
@@ -50,6 +50,11 @@ export class GoGoConfig
       content: undefined,
       type: "string", // string | url
       isMarkdown: true
+    },
+    headerTemplate: {
+      content: undefined,
+      type: "string", // string | url
+      isMarkdown: true
     }
   };
   readonly general =

diff --git a/src/js/gogocarto.ts b/src/js/gogocarto.ts
@@ -119,11 +119,16 @@ export class GoGoCartoModule
 
 			App.component.initialize();		
 
+			let onReadyReceived = 0;
 			App.templateModule.elementTemplate.onReady.do(() =>
 			{
-				App.routerModule.loadInitialState();
-				// wait for initial state to be loaded
-				setTimeout( () => App.elementsJsonModule.loadLocalElements(), 100);
+				++onReadyReceived;
+				if(onReadyReceived==2)
+				{
+					App.routerModule.loadInitialState();
+					// wait for initial state to be loaded
+					setTimeout( () => App.elementsJsonModule.loadLocalElements(), 100);
+				}
 			});
 
 			App.templateModule.initialize();

diff --git a/src/js/modules/core/template.module.ts b/src/js/modules/core/template.module.ts
@@ -2,7 +2,7 @@ import { AppModule } from "../../app.module";
 
 import { App } from "../../gogocarto";
 import { GoGoConfig } from "../../classes/config/gogo-config.class";
-import { TemplateElementModule } from "../element/template-element.module";
+import { HtmlElement, TemplateElementModule } from "../element/template-element.module";
 import { TemplateElementFiltersModule } from "../element/template-element-filters.module";
 
 declare var $;
@@ -41,11 +41,16 @@ export class TemplateModule
 			case 'gogo-styles'         : fileUrl = 'gogo-styles.html.njk'; break;
 			case 'element'             : fileUrl = 'components/element/element.html.njk'; break;
 			case 'element-body-default': fileUrl = 'components/element/body.html.njk'; break;
+			case 'element-header-default': fileUrl = 'components/element/header.html.njk'; break;
 			case 'vote-modal-content'  : fileUrl = 'components/modals/element/vote-content.html.njk'; break;
 			default: console.warn('[GoGoCarto] No template associated to templateName', templateName);
 		}
 
-		if (templateName == 'element') options.body = this.elementTemplate.renderBody(options);
+		if (templateName == 'element')
+		{
+			options.header = this.elementTemplate.renderHtmlElement(HtmlElement.Header, options);
+			options.body = this.elementTemplate.renderHtmlElement(HtmlElement.Body, options);
+		}
 
 		return this.nunjucksEnvironment.render(fileUrl, options);
 	}

diff --git a/src/js/modules/element/template-element.module.ts b/src/js/modules/element/template-element.module.ts
@@ -8,55 +8,101 @@ declare var $;
 declare var nunjucks;
 declare var commonmark;
 
+export enum HtmlElement {
+  Body,
+  Header
+}
+
 export class TemplateElementModule
 {
   onReady = new Event<any>();
 
   bodyConfig : any;
   bodyTemplate : any; // nunjucks template
 
+  headerConfig : any;
+  headerTemplate : any; // nunjucks template
   initialize()
   {
     this.bodyConfig = App.config.infobar.bodyTemplate;
 
-    if (!this.bodyConfig.content) { this.onReady.emit(); return; } // nothng to do
+    this.headerConfig = App.config.infobar.headerTemplate;
+
+    this.getHtmlElementData(this.bodyConfig, HtmlElement.Body);
+
+    this.getHtmlElementData(this.headerConfig, HtmlElement.Header);
+  }
+
+  private getHtmlElementData(htmlElementConfig: any, htmlElementConcerned: HtmlElement)
+  {
+    if (!htmlElementConfig.content) { this.onReady.emit(); return; } // nothing to do
 
-    switch(this.bodyConfig.type)
+    switch(htmlElementConfig.type)
     {
       case "string":
-        let content = this.bodyConfig.content;
+        let content = htmlElementConfig.content;
         if (Array.isArray(content)) content = content.join('\n');
-        this.compileBody(content);          
+        this.compile(htmlElementConfig, htmlElementConcerned, content);
+        this.onReady.emit();
         break;
       case "url":
         $.ajax({
           dataType: 'text',
-          url: this.bodyConfig.content,
-          success: (data) => { this.compileBody(data); },
-          error: () => { console.error("Error while getting the body template at url ", this.bodyConfig.content)}
+          url: htmlElementConfig.content,
+          success: (data) => { this.compile(htmlElementConfig, htmlElementConcerned, data);this.onReady.emit(); },
+          error: () => { this.showError(htmlElementConcerned, htmlElementConfig.content); }
         });
         break;
     }
   }
 
-  // Compile the body template once for all
-  compileBody(content : any)
+  private showError(htmlElementConcerned: HtmlElement, urlConcerned: string)
   {
-    if (this.bodyConfig.isMarkdown) content = this.parseMarkdownSyntax(content);
-    this.bodyTemplate = App.templateModule.compile(content);    
-    this.onReady.emit();
-  }  
+    let errorMessage;
+    switch(htmlElementConcerned)
+    {
+      case HtmlElement.Body:
+        errorMessage = "Error while getting the body template at url :";
+        break;
+      case HtmlElement.Header:
+        errorMessage = "Error while getting the header template at url :";
+        break;
+    }
+    console.error(errorMessage, urlConcerned);
+  }
 
-  // If there is a body template configured, then we use it. We use the default body otherwise.
-  renderBody(options)
+  renderHtmlElement(htmlElementConcerned: HtmlElement, options: any): any
   {    
-    let renderedTemplate = ""
+    let renderedTemplate = "";
+    switch(htmlElementConcerned)
+    {
+      case HtmlElement.Body:
+        renderedTemplate = this.renderBody(options);
+        break;
+      case HtmlElement.Header:
+        renderedTemplate = this.renderHeader(options);
+        break;
+    }
+
+    return this.fixTemplate(renderedTemplate);
+  }
+
+  // If there is a body template configured, then we use it. We use the default body otherwise.
+  private renderBody(options:any): any
+  {
     if (this.bodyTemplate)
-      renderedTemplate = this.bodyTemplate.render(options.element);      
+      return this.bodyTemplate.render(options.element);
     else
-      renderedTemplate = App.templateModule.render('element-body-default', options);
+      return App.templateModule.render('element-body-default', options);
+  }
 
-    return this.fixTemplate(renderedTemplate);
+  // If there is a header template configured, then we use it. We use the default header otherwise.
+  private renderHeader(options: any): any
+  {
+    if (this.headerTemplate)
+      return this.headerTemplate.render(options.element);
+    else
+      return App.templateModule.render('element-header-default', options);
   }
 
   private fixTemplate(template) {
@@ -67,6 +113,22 @@ export class TemplateElementModule
     return template;
   }
 
+  // Compile given content as a template once for all
+  private compile(htmlElementConfig : any, htmlElementConcerned: HtmlElement, content: any)
+  {
+    if (htmlElementConfig.isMarkdown) content = this.parseMarkdownSyntax(content);
+    let template = App.templateModule.compile(content);
+    switch(htmlElementConcerned)
+    {
+      case HtmlElement.Body:
+        this.bodyTemplate = template;
+        break;
+      case HtmlElement.Header:
+        this.headerTemplate = template;
+        break;
+    }
+  }
+
   private parseMarkdownSyntax(markdownString: string): string
   {
     let parser = new commonmark.Parser()

diff --git a/src/views/components/element/element.html.njk b/src/views/components/element/element.html.njk
@@ -10,8 +10,8 @@
 {% set isHistoryAvailable = config.isFeatureAvailable('elementHistory') %}
 
 {# HEADER #}
-<div class="collapsible-header bgdSoftColorAs {{pendingClass}}" option-id={{mainOptionToDisplay.colorOptionId}}>    
-   {% include here ~ 'header.html.njk' %}  
+<div class="collapsible-header bgdSoftColorAs {{pendingClass}}" option-id={{mainOptionToDisplay.colorOptionId}}>
+    {{ header|safe }}
 </div>
 
 {# INTERACTIVE SECTION #}