FDSU-1829: Adding paginator blocks to homepage banners.

css/uw_virtual_site_homepage.css

@@ -13,3 +13,45 @@
 #edit-preview-changes {
   display: none;
 }
+
+
+.homepage_banners_paginator {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+}
+
+.homepage_banners_paginator li {
+  flex: 1;
+  padding: 0;
+  border-right: 1px solid #fff;
+  margin-top: 0;
+  marinn-bottom: 0;
+  list-style-type: none;
+}
+
+.homepage_banners_paginator li a {
+  padding: 0;
+  background-color: #878787;
+  border: 0;
+  text-indent: -9999rem;
+  display: block;
+  height: .8rem;
+  margin: 0;
+}
+
+.homepage_banners_paginator a.hpb_selected {
+  width: 100%;
+  background-color: #fff;
+  border-left: none;
+  outline: 0;
+}
+
+.homepage_banners_paginator li:last-child {
+  border-right: none;
+}

uw_virtual_site_homepage.module

@@ -61,8 +61,12 @@ function uw_virtual_site_homepage_page_alter(&$page) {
     $html = '<div class="field-name-field-uw-home-page-banners">';
     $html .= '<div class="field-items">';
 
+    $pagenumber = 0;
+    $boxes = '';
+
     // While there is a continue, process the homepage banners.
     while($continue) {
+      $pagenumber++;
 
       // Set the image.
       $html .= '<figure class="field-item uw-homepage-banners-figure">';
@@ -88,6 +92,13 @@ function uw_virtual_site_homepage_page_alter(&$page) {
       $html .= '</div>';
       $html .= '</figure>';
 
+      if($pagenumber == 1) {
+          $boxes .= '<li><a href="" title="display banner #' . $pagenumber . '" class="hpb_selected" data-pagenumber="' . $pagenumber .'"><span class="element-invisible">Display banner #</span>' . $pagenumber . '</a></li>';
+      }
+      else {
+          $boxes .= '<li><a href="" title="display banner #' . $pagenumber . '" data-pagenumber="' . $pagenumber .'"><span class="element-invisible">Display banner #</span>' . $pagenumber . '</a></li>';
+      }
+
       // Increment the index.
       $index++;
 
@@ -103,6 +114,9 @@ function uw_virtual_site_homepage_page_alter(&$page) {
     $html .= '<span class="element-invisible">Pause banner slideshow</span>';
     $html .= '<span class="icon-pause"></span>';
     $html .= '</button>';
+    $html .= '<ul class="homepage_banners_paginator">';
+    $html .= $boxes;
+    $html .= '</ul>';
     $html .= '</div>';
 
     // Set the html to the page variable.