export TEMPLATE_TYPES

Author: meirotstein

README.md

@@ -91,15 +91,15 @@ Example callback function for `onAfterElementRendered`:
 const onAfterElementRendered = (element, template) => {
     // maniplate elements:
     switch (template.type) {
-      case 'text':
+      case JsonPollock.TEMPLATE_TYPES.TEXT:
         // add custom css class
         element.classList.add('my-ns-text');
         break;
-      case 'link':
+      case JsonPollock.TEMPLATE_TYPES.LINK:
         // edit inline style
         element.style.color = 'red';
         break;
-      case 'map':
+      case JsonPollock.TEMPLATE_TYPES.MAP:
         // prevent 'map' element to be rendered
         return null;
       ...

dist/json-pollock.bundle.min.js

@@ -290,24 +290,26 @@
       const onAfterElementRendered = (element, template) => {
         console.log(element, template.type);
         switch (template.type) {
-          case 'vertical':
+          case JsonPollock.TEMPLATE_TYPES.VERTICAL:
             element.style = 'border-style:dashed;border-color:red;';
             break;
-          case 'image':            
+          case JsonPollock.TEMPLATE_TYPES.IMAGE:
             element.firstElementChild.src = 'https://image.shutterstock.com/image-vector/hacked-glitched-abstract-digital-background-450w-761155144.jpg';
             break;
-          case 'button':
+          case JsonPollock.TEMPLATE_TYPES.BUTTON:
             element.firstElementChild.onclick = () => {
               alert('hacked on after render hook!');
             }
             break;
-          case 'map':
+          case JsonPollock.TEMPLATE_TYPES.MAP:
             element.classList.add('take-me-out');
             break;
-          case 'text':
+          case JsonPollock.TEMPLATE_TYPES.TEXT:
             const color = Math.trunc(Math.random() * 1000000);
             element.firstElementChild.style.color = `#${color}`;
             break;
+          case JsonPollock.TEMPLATE_TYPES.HORIZONTAL:
+          case JsonPollock.TEMPLATE_TYPES.CAROUSEL:
           default:
             // this will remove the element
             element = null;

dist/json-pollock.global.min.js

@@ -14,6 +14,7 @@ const registerAction = instance.registerAction.bind(instance);
 const unregisterAction = instance.unregisterAction.bind(instance);
 const unregisterAllActions = instance.unregisterAllActions.bind(instance);
 const version = '@@VERSION';
+const TEMPLATE_TYPES = JsonPollock.TEMPLATE_TYPES;
 
 export {
   init,
@@ -22,4 +23,5 @@ export {
   unregisterAction,
   unregisterAllActions,
   version,
+  TEMPLATE_TYPES,
 };

dist/json-pollock.global.no_validation.min.js

@@ -13,6 +13,7 @@ const registerAction = instance.registerAction.bind(instance);
 const unregisterAction = instance.unregisterAction.bind(instance);
 const unregisterAllActions = instance.unregisterAllActions.bind(instance);
 const version = '@@VERSION';
+const TEMPLATE_TYPES = JsonPollock.TEMPLATE_TYPES;
 
 export {
   init,
@@ -21,4 +22,5 @@ export {
   unregisterAction,
   unregisterAllActions,
   version,
+  TEMPLATE_TYPES,
 };

dist/json-pollock.js

@@ -5,8 +5,20 @@ import Utils from './Utils';
 const Events = require('Chronosjs/dist/min/Events');
 /*eslint-enable */
 
+const TYPES = {
+  TEXT: 'text',
+  BUTTON: 'button',
+  IMAGE: 'image',
+  MAP: 'map',
+  VERTICAL: 'vertical',
+  HORIZONTAL: 'horizontal',
+  CAROUSEL: 'carousel',
+};
+
 export default class ElementRendererProvider {
 
+  static TYPES: Object = TYPES;
+
   elements: Object;
   events: Events;
 
@@ -17,7 +29,7 @@ export default class ElementRendererProvider {
     /*
     predefined renderes
     */
-    this.set('text', (config): HTMLElement => {
+    this.set(TYPES.TEXT, (config): HTMLElement => {
       const divEl = document.createElement('div');
       const tooltip = config.tooltip ? Utils.escapeHtml(config.tooltip) : '';
       divEl.className = 'lp-json-pollock-element-text';
@@ -29,7 +41,7 @@ export default class ElementRendererProvider {
       return divEl;
     });
 
-    this.set('button', (config): HTMLElement => {
+    this.set(TYPES.BUTTON, (config): HTMLElement => {
       const divEl = document.createElement('div');
       divEl.className = 'lp-json-pollock-element-button';
 
@@ -58,7 +70,7 @@ export default class ElementRendererProvider {
       return divEl;
     });
 
-    this.set('image', (config): HTMLElement => {
+    this.set(TYPES.IMAGE, (config): HTMLElement => {
       const divEl = document.createElement('div');
       divEl.className = 'lp-json-pollock-element-image loading';
 
@@ -101,7 +113,7 @@ export default class ElementRendererProvider {
       return divEl;
     });
 
-    this.set('map', (config): HTMLElement => {
+    this.set(TYPES.MAP, (config): HTMLElement => {
       const divEl = document.createElement('div');
       divEl.className = 'lp-json-pollock-element-map';
 
@@ -125,13 +137,13 @@ export default class ElementRendererProvider {
       return divEl;
     });
 
-    this.set('vertical', (): HTMLElement => {
+    this.set(TYPES.VERTICAL, (): HTMLElement => {
       const divEl = document.createElement('div');
       divEl.className = 'lp-json-pollock-layout lp-json-pollock-layout-vertical';
       return divEl;
     });
 
-    this.set('carousel', (config): HTMLElement => {
+    this.set(TYPES.CAROUSEL, (config): HTMLElement => {
       const defaultPadding = 0;
       const padding = config.padding || defaultPadding;
       const CARD_DEFAULT_WIDTH = 180;
@@ -270,7 +282,7 @@ export default class ElementRendererProvider {
       return divCarouselWrapper;
     });
 
-    this.set('horizontal', (): HTMLElement => {
+    this.set(TYPES.HORIZONTAL, (): HTMLElement => {
       const divEl = document.createElement('div');
       divEl.className = 'lp-json-pollock-layout lp-json-pollock-layout-horizontal';
       (divEl: any).afterRender = () => {

dist/json-pollock.js.map

@@ -18,6 +18,8 @@ class JsonPollockError extends Error {
 
 export default class JsonPollock {
 
+  static TEMPLATE_TYPES: Object = ElementRendererProvider.TYPES;
+
   provider: ElementRendererProvider;
   events: Events;
   currentNumOfElements: number;