IMPROVEMENT: Video slides

src/js/_components/_ui.carousel.js

@@ -53,6 +53,37 @@ const CarouselUI = (($) => {
         // init carousel
         $e.carousel();
 
+        const $youtubeSlides = $e.find('iframe[src^="https://www.youtube.com/embed/"]');
+
+        $e.on('slide.bs.carousel', () => {
+          if ($youtubeSlides.length) {
+            $youtubeSlides.each((i, e) => {
+              const $e = $(e);
+              try {
+                $e.data('player', new YT.Player(e, {
+                  events: {
+                    'onReady': () => {
+                      $e.data('player').pauseVideo();
+                    }
+                  }
+                }));
+
+                $e.data('player').pauseVideo();
+              } catch (e) {}
+            });
+          }
+        });
+
+        $e.find('.carousel-control-prev').on('click', (e) => {
+          e.preventDefault();
+          $e.carousel('prev');
+        });
+
+        $e.find('.carousel-control-next').on('click', (e) => {
+          e.preventDefault();
+          $e.carousel('next');
+        });
+
         // init touch swipes
         $e.hammer().bind('swipeleft', (event) => {
           $(event.target).carousel('next');
@@ -70,7 +101,7 @@ const CarouselUI = (($) => {
           $(event.target).carousel('prev');
         });
 
-        $e.hammer().bind('tap', (event) => {
+        $e.find('.carousel-item').hammer().bind('tap', (event) => {
           $(event.target).carousel('next');
         });
       });

src/js/_components/_ui.form.fields.js

@@ -66,7 +66,7 @@ const FormFieldUI = (($) => {
         $el.collapse('show');
       }*/
 
-      $el.trigger('shown.' + NAME);
+      $el.trigger(`shown.${  NAME}`);
     }
 
     hide() {
@@ -85,7 +85,7 @@ const FormFieldUI = (($) => {
       }
 
       $el.trigger('change');*/
-      $el.trigger('hidden.' + NAME);
+      $el.trigger(`hidden.${  NAME}`);
     }
 
     wipe() {

src/js/_components/_ui.form.fields.toggle.js

@@ -19,7 +19,7 @@ const FormToggleUI = (($) => {
 
       ui.toggle();
 
-      ui.$el.on('change shown.' + FieldUI + ' hidden.' + FieldUI, (e) => {
+      ui.$el.on(`change shown.${  FieldUI  } hidden.${  FieldUI}`, (e) => {
         ui.toggle();
       });
 
@@ -34,7 +34,7 @@ const FormToggleUI = (($) => {
 
       const val = ($el.attr('type') === 'checkbox') ?
         ($el.is(':checked') ? true : false) :
-        ($el.attr('type') === 'radio' ? $Html.find('[name="' + $el.attr('name') + '"]:checked').val() : $el.val());
+        ($el.attr('type') === 'radio' ? $Html.find(`[name="${  $el.attr('name')  }"]:checked`).val() : $el.val());
 
       const $dataEl = ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
         $el.parents('.optionset') : $el;
@@ -81,7 +81,7 @@ const FormToggleUI = (($) => {
         $el.collapse(action);
       });
 
-      $el.trigger(action + '.' + NAME);
+      $el.trigger(`${action  }.${  NAME}`);
     }
 
     dispose() {
@@ -111,8 +111,8 @@ const FormToggleUI = (($) => {
         const $el = $(el);
         const name = $el.attr('name');
 
-        if ($('[name="' + name + '"]').length > 1) {
+        if ($(`[name="${  name  }"]`).length > 1) {
-          console.log(NAME + ': Module malfunction duplicate "' + name + '" elements found');
+          console.log(`${NAME  }: Module malfunction duplicate "${  name  }" elements found`);
         }
       });
     }

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

@@ -82,7 +82,7 @@ const FormValidateField = (($) => {
 
     isHtml(str) {
       const doc = new DOMParser().parseFromString(str, "text/html");
-      return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
+      return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);
     }
 
     valideURL(str) {

src/js/_main.js

@@ -246,6 +246,11 @@ const MainUI = (($) => {
       if (W.URLDetails['hash'].indexOf('printpage') > -1) {
         W.print();
       }
+
+      // load youtube API
+      if ($('iframe[src^="https://www.youtube.com/embed/"]').length) {
+        $Body.append('<script src="https://www.youtube.com/iframe_api"></script>');
+      }
     }
 
     static updateLocation(url) {

src/scss/_components/_ui.carousel.scss

@@ -2,12 +2,32 @@
  * Bootstrap carousel improvement
  */
 
-.carousel-item {
+/*.carousel-item {
     &.active {
         display: flex !important;
         justify-content: center;
         align-items: flex-start;
     }
+}*/
+
+.carousel-slide {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    .video {
+        width: 100%;
+
+        iframe {
+            width: 100% !important;
+            height: auto !important;
+        }
+    }
+
+    .img {
+        display: block;
+        width: 100%;
+    }
 }
 
 .carousel-control-prev,

src/scss/_components/_ui.main.scss

@@ -204,3 +204,35 @@ button, input, optgroup, select, textarea,
         z-index: 1;
     }
 }
+
+// dark dropdowns
+.dropdown-menu.bg-dark {
+    border-color: $dark;
+
+    .nav-link {
+        color: $navbar-dark-color;
+
+        @include hover-focus {
+            color: $navbar-dark-hover-color;
+        }
+
+
+        &.disabled {
+            color: $navbar-dark-disabled-color;
+        }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+        color: $navbar-dark-active-color;
+    }
+
+    .dropdown-item {
+        @include hover-focus {
+            color: $navbar-dark-brand-hover-color;
+            background: $dark;
+        }
+    }
+}

src/scss/_variables.scss

@@ -21,9 +21,12 @@ $bg-alt: $yellow;
 $body-color: $gray-900;
 $navbar-light-active-color: $blue;
 
+$navbar-dark-hover-background: $dark;
+$navbar-dark-active-background: $dark;
+
 $dropdown-border-color: $white;
 
-$footer-size: 16rem;
+$footer-size: 18.5rem;
 $footer-bar-size: 2.5rem;
 
 /*