Spinner update

app/client/dist/icons/.cache

@@ -1 +1 @@
-{"hash":"3deb17371acdc75398d81da38fad464c","version":"0.0.9","optionHash":"c067d9b2d6a96a86192ece0162f1b1ac","result":{"outputFilePrefix":"/icons/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#fff\">","<meta name=\"application-name\" content=\"Webpack App\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"app/client/dist//icons/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"app/client/dist//icons/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"app/client/dist//icons/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"app/client/dist//icons/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"app/client/dist//icons/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"app/client/dist//icons/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"app/client/dist//icons/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"app/client/dist//icons/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"app/client/dist//icons/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"Webpack App\">","<link rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"app/client/dist//icons/coast-228x228.png\">","<meta name=\"msapplication-TileColor\" content=\"#fff\">","<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">","<meta name=\"msapplication-config\" content=\"browserconfig.xml\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"app/client/dist//icons/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"app/client/dist//icons/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"app/client/dist//icons/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1536x2008.png\">"],"files":["/icons/android-chrome-36x36.png","/icons/android-chrome-48x48.png","/icons/android-chrome-72x72.png","/icons/android-chrome-144x144.png","/icons/android-chrome-96x96.png","/icons/android-chrome-192x192.png","/icons/android-chrome-384x384.png","/icons/android-chrome-256x256.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-180x180.png","/icons/apple-touch-icon.png","/icons/apple-touch-icon-precomposed.png","/icons/coast-228x228.png","/icons/yandex-browser-50x50.png","/icons/mstile-70x70.png","/icons/mstile-144x144.png","/icons/mstile-150x150.png","/icons/mstile-310x150.png","/icons/mstile-310x310.png","/icons/favicon-16x16.png","/icons/favicon-32x32.png","/icons/favicon.ico","/icons/apple-touch-startup-image-320x460.png","/icons/apple-touch-startup-image-640x920.png","/icons/apple-touch-startup-image-640x1096.png","/icons/apple-touch-startup-image-750x1294.png","/icons/apple-touch-startup-image-768x1004.png","/icons/apple-touch-startup-image-748x1024.png","/icons/apple-touch-startup-image-1242x2148.png","/icons/apple-touch-startup-image-1182x2208.png","/icons/apple-touch-startup-image-1496x2048.png","/icons/apple-touch-startup-image-1536x2008.png","/icons/firefox_app_60x60.png","/icons/firefox_app_128x128.png","/icons/firefox_app_512x512.png","/icons/manifest.json","/icons/yandex-browser-manifest.json","/icons/browserconfig.xml","/icons/manifest.webapp"]}}
+{"hash":"3deb17371acdc75398d81da38fad464c","version":"0.0.9","optionHash":"c067d9b2d6a96a86192ece0162f1b1ac","result":{"outputFilePrefix":"/icons/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#fff\">","<meta name=\"application-name\" content=\"Webpack App\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"app/client/dist//icons/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"app/client/dist//icons/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"app/client/dist//icons/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"app/client/dist//icons/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"app/client/dist//icons/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"app/client/dist//icons/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"app/client/dist//icons/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"app/client/dist//icons/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"app/client/dist//icons/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"Webpack App\">","<link rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"app/client/dist//icons/coast-228x228.png\">","<meta name=\"msapplication-TileColor\" content=\"#fff\">","<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">","<meta name=\"msapplication-config\" content=\"browserconfig.xml\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"app/client/dist//icons/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"app/client/dist//icons/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"app/client/dist//icons/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1536x2008.png\">"],"files":["/icons/android-chrome-36x36.png","/icons/android-chrome-48x48.png","/icons/android-chrome-72x72.png","/icons/android-chrome-144x144.png","/icons/android-chrome-192x192.png","/icons/android-chrome-256x256.png","/icons/android-chrome-384x384.png","/icons/android-chrome-96x96.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-180x180.png","/icons/apple-touch-icon-precomposed.png","/icons/apple-touch-icon.png","/icons/coast-228x228.png","/icons/yandex-browser-50x50.png","/icons/mstile-70x70.png","/icons/mstile-144x144.png","/icons/mstile-150x150.png","/icons/mstile-310x150.png","/icons/mstile-310x310.png","/icons/favicon-16x16.png","/icons/favicon-32x32.png","/icons/favicon.ico","/icons/apple-touch-startup-image-640x920.png","/icons/apple-touch-startup-image-320x460.png","/icons/apple-touch-startup-image-640x1096.png","/icons/apple-touch-startup-image-748x1024.png","/icons/apple-touch-startup-image-750x1294.png","/icons/apple-touch-startup-image-768x1004.png","/icons/apple-touch-startup-image-1182x2208.png","/icons/apple-touch-startup-image-1242x2148.png","/icons/apple-touch-startup-image-1536x2008.png","/icons/apple-touch-startup-image-1496x2048.png","/icons/firefox_app_60x60.png","/icons/firefox_app_128x128.png","/icons/firefox_app_512x512.png","/icons/manifest.json","/icons/yandex-browser-manifest.json","/icons/browserconfig.xml","/icons/manifest.webapp"]}}

app/client/src/js/_components/_ui.carousel.js

@@ -1,5 +1,8 @@
 import $ from 'jquery';
 
+import 'hammerjs/hammer';
+import 'jquery-hammerjs/jquery.hammer';
+
 import Events from '../_events';
 
 const CarouselUI = (($) => {

app/client/src/js/_components/_ui.form.basics.js

@@ -1,6 +1,8 @@
 import $ from 'jquery';
 
-import 'bootstrap-select/js/bootstrap-select';
+import 'bootstrap-select/dist/js/bootstrap-select';
+$.fn.selectpicker.Constructor.BootstrapVersion = '4';
+
 import 'jquery.inputmask/dist/jquery.inputmask.bundle';
 
 import Events from "../_events";
@@ -12,6 +14,8 @@ const FormBasics = (($) => {
   const NAME = 'jsFormBasics';
   const DATA_KEY = NAME;
   const $Html = $('html, body');
+  const W = window;
+  const D = document;
 
   class FormBasics {
 
@@ -27,6 +31,7 @@ const FormBasics = (($) => {
       const $fields = $element.find(Events.FORM_FIELDS);
       // init fields ui
       $fields.each((i, el) => {
+        // skip some fields here
         new FormFieldUI(el);
       });
 
@@ -51,12 +56,12 @@ const FormBasics = (($) => {
 
         // wrap options
         if (maxOptions > 1) {
-          $el.on('rendered.bs.select,changed.bs.select,refreshed.bs.select,loaded.bs.select', () => {
+          const wrapOptions = () => {
             if (!$el.val().length) {
               return true;
             }
 
-            const $container = $el.parent().find('.filter-option-inner-inner');
+            const $container = $el.parent().find('.dropdown-toggle .filter-option');
             const val = $container.text();
             const vals = val.split(separator);
             let html = '';
@@ -87,26 +92,25 @@ const FormBasics = (($) => {
                 vals.splice(i, 1);
                 $el.selectpicker('val', vals);
               }
+
+              wrapOptions();
             });
-          });
+          };
+
+          $el.on('rendered.bs.select changed.bs.select refreshed.bs.select loaded.bs.select change', wrapOptions);
+          wrapOptions();
         }
-
-
-        // FIX: hidden picker
-        $el.selectpicker('render');
-        $el.selectpicker('refresh');
-        $el.selectpicker('toggle');
-        document.activeElement.blur();
-        window.scroll(0, 0);
-
-        //$el.selectpicker('show');
-        //$el.selectpicker('hide');
-
-        /*$el.parents('.field.dropdown').find('.dropdown-toggle').click();
-                $el.parents('.field.dropdown').find('.dropdown-toggle').click();
-                $el.parents('.field.dropdown').find('.dropdown-toggle').blur();*/
       });
 
+      // FIX: missing conflicting 'bootstrap/js/dist/dropdown' with bootstrap-select/dist/js/bootstrap-select
+      $('[data-toggle="dropdown"]').on('click', (e) => {
+        $(e.currentTarget).siblings('.dropdown-menu').toggleClass('show');
+      });
+
+      $('.dropdown-menu a').on('click', (e) => {
+        $(e.currentTarget).parents('.dropdown-menu').removeClass('show');
+      });
+      // /FIX
 
       $fields.each((e, el) => {
         const $el = $(el);
@@ -128,7 +132,14 @@ const FormBasics = (($) => {
         const $el = $(e.currentTarget);
         const $parent = $el.parents('.radio');
 
-        $parent.siblings('.radio').removeClass('checked');
+        $parent.siblings('.radio').each((i, el) => {
+          const $el = $(el);
+
+          if (!$el.find('input').is(':checked')) {
+            $el.removeClass('checked');
+          }
+        });
+
         if ($el.is(':checked')) {
           $parent.addClass('checked');
         }
@@ -152,7 +163,7 @@ const FormBasics = (($) => {
     }
 
     static _jQueryInterface() {
-      return this.each(function() {
+      return this.each(() => {
         // attach functionality to element
         const $element = $(this);
         let data = $element.data(DATA_KEY);
@@ -173,18 +184,13 @@ const FormBasics = (($) => {
     return FormBasics._jQueryInterface;
   };
 
+  const init = () => {
+    $('form').jsFormBasics();
+  };
+
   // auto-apply
-  $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
-    $('form').each((i, el) => {
+    init();
-      const $el = $(el);
-
-      // skip some forms
-      if ($el.hasClass('no-validation')) {
-        return true;
-      }
-
-      $el.jsFormBasics();
-    });
   });
 
   return FormBasics;

app/client/src/js/_components/_ui.form.croppie.js

@@ -45,7 +45,7 @@ const CroppieUI = (($) => {
 
       $el.append(
         '<div class="cropper-wrap"><div class="cropper-container"></div>' +
-                '<a href="#" class="btn-remove"><i class="fas fa-times"></i> Remove</a></div>'
+        '<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
       );
       //$el.append(ui.inputData);
 
@@ -68,7 +68,8 @@ const CroppieUI = (($) => {
         this.readFile(e.currentTarget);
       });
 
-      $el.find('.btn-remove').on('click', (e) => {
+      ui.$btnRemove = $el.find('.btn-remove');
+      ui.$btnRemove.on('click', (e) => {
         e.preventDefault();
 
         ui.uploadCrop.removeClass('ready');
@@ -79,6 +80,10 @@ const CroppieUI = (($) => {
 
         ui.uploadCropWrap.hide();
       });
+
+      if (ui.$el.find('img.croppie-image').length) {
+        ui.$btnRemove.show();
+      }
     }
 
     readFile(input) {
@@ -97,6 +102,7 @@ const CroppieUI = (($) => {
 
           ui.uploadCrop.show();
           ui.uploadCropWrap.show();
+          ui.$btnRemove.show();
         }
 
         reader.readAsDataURL(input.files[0]);

app/client/src/js/_components/_ui.form.datetime.js

@@ -46,7 +46,7 @@ const DatetimeUI = (($) => {
       if ($el.hasClass('time') || $el.attr('type') === 'time') {
         $el.attr('readonly', 'true');
         $el.timepicker($.extend({
-          defaultTime: $el.data('default-time'),
+          snapToStep: true,
           icons: {
             up: 'fas fa-chevron-up',
             down: 'fas fa-chevron-down',
@@ -54,7 +54,11 @@ const DatetimeUI = (($) => {
         }, $el.data())).on('show.timepicker', (e) => {
           const $el = $(e.currentTarget);
           const $dropdown = $Body.find('.bootstrap-timepicker-widget');
+
+          if (!$dropdown.find('[data-action="clear"]').length) {
             $dropdown.find('tbody').append('<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>');
+          }
+
           const $clearBtn = $dropdown.find('[data-action="clear"]');
           $clearBtn.on('click', (e) => {
             e.preventDefault();

app/client/src/js/_components/_ui.form.storage.js

@@ -83,7 +83,7 @@ const FormStorage = (($) => {
         $element.data(DATA_KEY).clear();
       });
 
-      $element.find('button,[type="submit"],[type="clear"]').on('click', () => {
+      $element.find('.btn-toolbar,.form-actions').children('button,[type="submit"],[type="clear"]').on('click', () => {
         $element.data(DATA_KEY).clear();
       });
 

app/client/src/js/_components/_ui.form.validate.field.js

@@ -20,7 +20,7 @@ const FormValidateField = (($) => {
       // prevent browsers checks (will do it using JS)
       $element.attr('novalidate', 'novalidate');
 
-      $element.on('change', (e) => {
+      $element.on('change focusout', (e) => {
         ui.validate(false);
       });
 
@@ -45,19 +45,25 @@ const FormValidateField = (($) => {
       let valid = true;
       let msg = null;
 
+      const val = $el.val();
+
       // browser checks + required
       if (!ui._element.checkValidity() ||
-                ($el.hasClass('required') && !$el.val().trim().length)
+        ($el.hasClass('required') && (!val.length || !val.trim().length ||
+          ui.isHtml(val) && !$(val).text().length
+        ))
       ) {
         valid = false;
       }
 
       // validate URL
-      if ($el.hasClass('url') && $el.val().trim().length && !this.valideURL($el.val())) {
+      if ($el.hasClass('url') && val.length && !this.valideURL(val)) {
         valid = false;
         msg = 'URL must start with http:// or https://. For example: https://your-domain.com/';
       }
 
+      this.removeError();
+
       // extra checks
       if (extraChecks) {
         extraChecks.forEach((check) => {
@@ -65,18 +71,20 @@ const FormValidateField = (($) => {
         });
       }
 
-      this.removeError();
       if (valid) {
         return true;
       }
 
-      setTimeout(() => {
       this.setError(scrollTo, msg);
-      }, 500);
 
       return false;
     }
 
+    isHtml(str) {
+      const doc = new DOMParser().parseFromString(str, "text/html");
+      return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
+    }
+
     valideURL(str) {
       const pattern = new RegExp('^(https?:\\/\\/){1}' + // protocol
         '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name

app/client/src/js/_components/_ui.form.validate.js

@@ -31,6 +31,11 @@ const FormValidate = (($) => {
 
       // init fields validation
       $fields.each((i, el) => {
+        // skip some fields here
+        if ($(el).attr('role') === 'combobox') {
+          return;
+        }
+
         new FormValidateField(el);
       });
 

app/client/src/js/_components/_ui.video.preview.js

@@ -25,16 +25,19 @@ const VideoPreviewUI = (($) => {
 
       ui.$_el.data(DATA_KEY, this);
       const href = ui.$_el.attr('href') || ui.$_el.data('href');
+      const YouTubeGetID = (url) => {
+        url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+        return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
+      };
+
+
       let video;
 
       if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) {
         let video_id;
 
-        if (video[1] === 'youtube' || video[1] === 'youtube-nocookie') {
+        if (video[1] === 'youtube' || video[1] === 'youtube-nocookie' || video[1] === 'youtu') {
-          video_id = video[4];
+          video_id = YouTubeGetID(href);
-        }
-        if (video[1] === 'youtu') {
-          video_id = video[3];
         }
 
         if (video[1] == 'vimeo') {

app/client/src/js/_main.js

@@ -5,6 +5,9 @@ import $ from 'jquery';
 import 'hammerjs/hammer';
 import 'jquery-hammerjs/jquery.hammer';
 
+//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
+//import Table from 'bootstrap-table/dist/bootstrap-table';
+
 // Routie
 import 'pouchdb/dist/pouchdb';
 import './_components/routes/index';
@@ -12,17 +15,21 @@ import './_components/routes/index';
 import Events from './_events';
 import Spinner from './_components/_ui.spinner';
 
+import './_components/_ui.video.preview';
 import './_components/_ui.carousel';
 import './_components/_ui.menu';
 
+
 import FormBasics from './_components/_ui.form.basics';
-import FormDatetime from './_components/_ui.form.datetime';
+//import FormToggleUI from './_components/_ui.form.fields.toggle';
+//import FormDatetime from './_components/_ui.form.datetime';
 import FormStepped from './_components/_ui.form.stepped';
 import FormValidate from './_components/_ui.form.validate';
 import FormStorage from './_components/_ui.form.storage';
 //import FormCroppie from './_components/_ui.form.croppie';
 
 import AjaxUI from './_components/_ui.ajax';
+import NoCaptcha from './_components/_ui.nocaptcha';
 
 import SmoothScroll from 'smooth-scroll';
 const smoothScroll = SmoothScroll();
@@ -145,7 +152,9 @@ const MainUI = (($) => {
         $('a.offline').addClass('offline-available');
       }
 
+      if (typeof AjaxUI !== 'undefined') {
         this.loadImages();
+      }
 
       // mark external links
       $('a.external,a[rel="external"]').attr('target', '_blank');
@@ -340,6 +349,12 @@ const MainUI = (($) => {
     MainUI.init();
   });
 
+  $(W).on('beforeunload', () => {
+    Spinner.show(() => {
+      $Body.removeClass('loaded');
+    });
+  });
+
   W.MainUI = MainUI;
 
   return MainUI;

app/client/src/js/app.js

@@ -7,7 +7,10 @@ import 'bootstrap/js/dist/alert';
 import 'bootstrap/js/dist/button';
 import 'bootstrap/js/dist/carousel';
 import 'bootstrap/js/dist/collapse';
-import 'bootstrap/js/dist/dropdown';
+
+// conflicting with bootstrap-select/dist/js/bootstrap-select
+//import 'bootstrap/js/dist/dropdown';
+
 import 'bootstrap/js/dist/modal';
 import 'bootstrap/js/dist/tooltip';
 import 'bootstrap/js/dist/popover';

app/client/src/scss/_components/_ui.carousel.scss

@@ -2,6 +2,14 @@
  * Bootstrap carousel improvement
  */
 
+.carousel-item {
+    &.active {
+        display: flex !important;
+        justify-content: center;
+        align-items: flex-start;
+    }
+}
+
 .carousel-control-prev,
 .carousel-control-next {
     z-index: 2;

app/client/src/scss/_variables.scss

@@ -2,6 +2,9 @@
  * Your custom variables
  */
 
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1390px, xxxl: 1590px);
+$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px, xxxl: 1560px);
+
 $font-family-base: "Lato", sans-serif;
 
 $grid-gutter-height: 8rem;

app/templates/Includes/First.ss

@@ -0,0 +1,17 @@
+<%-- Upgrade your Browser notice --%>
+<!--[if lt IE 10]><div class="main-bn"><a href="https://www.google.com/chrome/browser/desktop/" title="<%t Page.UPGRADEBROWSER 'Upgrade your browser' %>"><%t Page.OUTDATEDBROWSER 'You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.' %></a></div><![endif]-->
+
+<%-- No JS enabled notice --%>
+<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
+
+<%-- Loading Spinner --%>
+<div id="PageLoading">
+    <div class="loading-spinner">
+        <img src="favicon.ico" alt="{$SiteConfig.Title}" /><br/>
+        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+        <br/><%t Page.LOADINGTEXT 'LOADING ..' %>
+    </div>
+</div>
+
+<%-- Site Wide Alert Message --%>
+<% include SiteWideMessage %>

app/templates/Includes/MetaHead.ss

@@ -7,6 +7,28 @@ $MetaTags
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="mobile-web-app-capable" content="yes" />
 
+<%-- OpenGraph --%>
+<meta property="og:url" content="{$AbsoluteBaseURL}" />
+<meta property="og:site_name" content="{$SiteConfig.Title}" />
+<meta property="og:locale" content="$ContentLocale.ATT" />
+<% if $MetaTitle %>
+	<meta property="og:title" content="{$SiteConfig.Title} - {$MetaTitle}" />
+	<meta property="og:image:alt" content="{$MetaTitle}" />
+<% end_if %>
+<% if $MetaDescription %>
+    <meta property="og:description" content="{$MetaDescription}" />
+<% end_if %>
+<% if $MetaImage %>
+    <meta property="og:image" content="{$MetaImage.Link}" />
+<% end_if %>
+<% if $FacebookAppID %>
+    <meta property="fb:app_id" content="{$FacebookAppID}" />
+<% end_if %>
+<meta property="og:type" content="<% if $OgType %>$OgType<% else %>article<% end_if %>" />
+<%-- /OpenGraph --%>
+
+<link rel="canonical" href="{$AbsoluteLink}" />
+
 <link rel="author" type="text/plain" href="{$AbsoluteBaseURL}humans.txt" />
 <link rel="sitemap" type="application/xml" title="Sitemap" href="{$AbsoluteBaseURL}sitemap.xml" />
 

app/templates/Includes/Prestyling.ss

@@ -1 +1,4 @@
-<style>html,body{font-size:14px;margin:0;padding:0;background:#fff;color:#333}.bubblingG{width:78px;height:49px;margin:auto}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;background:rgba(255,255,255,.9);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:9999}.bubblingG span{display:inline-block;vertical-align:middle;width:10px;height:10px;margin:24px auto;background:#000;border-radius:49px;animation:bubblingG 1.5s infinite alternate}#bubblingG_1{animation-delay:0s}#bubblingG_2{animation-delay:.45s}#bubblingG_3{animation-delay:.9s}@keyframes bubblingG{0%{width:10px;height:10px;background-color:#000;transform:translateY(0)}100%{width:23px;height:23px;background-color:#fff;transform:translateY(-20px)}}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:9999;padding:.5rem 1rem;text-align:center;color:#fff;background:#FF0000}</style>
+<style>
+    body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;background:rgba(255,255,255,.9);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:9999}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:0.5rem 1rem;text-align:center;color:#fff;background:#FF0000}.loading-spinner{text-align:center}
+    .lds-ellipsis{display:inline-block;position:relative;width:64px;height:64px}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 0.6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 0.6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(19px, 0)}}
+</style>

app/templates/Page.ss

@@ -6,17 +6,7 @@
 </head>
 
 <body oncontextmenu="return false;"<% with $SiteConfig %> data-default-lng="$Longitude" data-default-lat="$Latitude"<% end_with %>>
-	<%-- Upgrade your Browser notice --%>
+	<% include First %>
-	<!--[if lt IE 10]><div class="main-bn"><a href="https://www.google.com/chrome/browser/desktop/" title="<%t Page.UPGRADEBROWSER 'Upgrade your browser' %>"><%t Page.OUTDATEDBROWSER 'You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.' %></a></div><![endif]-->
-
-	<%-- No JS enabled notice --%>
-	<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
-
-	<%-- Loading Spinner --%>
-	<div id="PageLoading"><div class="loading-spinner"><div class="bubblingG"><i id="bubblingG_1"></i><i id="bubblingG_2"></i><i id="bubblingG_3"></i></div><br/><%t Page.LOADINGTEXT 'LOADING ..' %></div></div>
-
-    <%-- Site Wide Alert Message --%>
-    <% include SiteWideMessage %>
 
     <div class="wrapper">
         <header id="Header" class="container">

composer.json

@@ -38,10 +38,12 @@
         "phpunit/phpunit": "^5.7",
         "lekoala/silverstripe-debugbar": "dev-master"
     },
-    "repositories": [{
+    "repositories": [
+        {
             "type": "vcs",
             "url": "https://github.com/a2nt/silverstripe-font-awesome"
-    }],
+        }
+    ],
     "extra": {
         "expose": [
             "app/client/dist"