UPDATE: Build system

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "MIT",
 	"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
@@ -67,6 +67,8 @@
 		"@babel/preset-env": "^7.9.6",
 		"@google/markerclusterer": "^1.0.3",
 		"animate.css": "^3.7.2",
+		"ansi-html": "^0.0.7",
+		"ansi-regex": "^5.0.0",
 		"autoprefixer": "^9.7.6",
 		"babel-eslint": "^8.2.6",
 		"babel-loader": "^8.1.0",
@@ -83,6 +85,7 @@
 		"file-loader": "^5.1.0",
 		"font-awesome": "^4.7.0",
 		"hard-source-webpack-plugin": "^0.13.1",
+		"html-entities": "^1.3.1",
 		"html-loader": "^1.1.0",
 		"html-webpack-plugin": "^4.3.0",
 		"imagemin-gifsicle": "^7.0.0",
@@ -103,6 +106,8 @@
 		"sass-lint-fix": "^1.12.1",
 		"sass-loader": "^8.0.2",
 		"script-ext-html-webpack-plugin": "^2.1.4",
+		"sockjs-client": "^1.4.0",
+		"strip-ansi": "^6.0.0",
 		"style-loader": "^0.19.1",
 		"svg-url-loader": "^2.3.3",
 		"terser-webpack-plugin": "^2.3.6",

src/js/_components/_ui.header-footer.js

@@ -34,14 +34,25 @@ const HeaderUI = (($) => {
 
       const updateFooter = (i, el) => {
         const $el = $(el);
-        $el.css('height', 'auto');
         const footerHeight = $el.height();
+        $el.css('height', footerHeight);
 
         $el.css('margin-top', -footerHeight);
         $el.siblings('.wrapper').css('padding-bottom', footerHeight);
       };
 
+      $('.footer,.jsFooterUI').css('height', 'auto');
+      setTimeout(() => {
         $('.footer,.jsFooterUI').each(updateFooter);
+      }, 500);
+
+      $Body.on('resize', () => {
+        $('.footer,.jsFooterUI').css('height', 'auto');
+        setTimeout(() => {
+          $('.footer,.jsFooterUI').each(updateFooter);
+        }, 500);
+      });
+
     }
 
     static dispose() {

src/js/_components/_ui.image-position.js

@@ -0,0 +1,42 @@
+'use strict';
+
+import Events from '../_events';
+
+const ImagePositionUI = (($) => {
+  const D = document;
+  const W = window;
+  const $Body = $('html,body');
+  const NAME = 'ImagePositionUI';
+  const CLASSNAME = `js${NAME}`;
+
+  class ImagePositionUI {
+    static init() {
+      const ui = this;
+      ui.dispose();
+
+      if (!$(`.${CLASSNAME}`).length) {
+        return;
+      }
+
+      console.log(`Initializing: ${NAME}`);
+      $(`.${CLASSNAME}`).on('click', (e) => {
+        e.preventDefault();
+        console.log(e);
+      });
+    }
+
+    static dispose() {
+      console.log(`Destroying: ${NAME}`);
+    }
+  }
+
+  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+    ImagePositionUI.init();
+  });
+
+  W.ImagePositionUI = new ImagePositionUI();
+
+  return ImagePositionUI;
+})($);
+
+export default ImagePositionUI;