OCU Carousel Object

The Fifth Iteration - Taking the project into an object refactor

by Nate Armstrong

HTML

<script src="https://www.ohiochristian.edu/sites/default/files/bootstrap-native-v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://www.ohiochristian.edu/sites/default/files/ocu.style.css">
<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#news" role="tab" aria-controls="News" aria-selected="true">News</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#athletics" role="tab" aria-controls="Athletics" aria-selected="false">Athletics</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="news-tab">
      <div class="row ocu-carousel">
        <div class="carousel slide col-sm-5 col-md-6 col-lg-7" data-ride="carousel" data-interval="5000">
          <div class="carousel-inner">
            <div class="carousel-item">
              <div class="carousel-image"><a href="#"></a><span>FEBRUARY 5TH, 2019</span></div>
              <h3 class="carousel-text"><a href="#">Marketing and Consumer Behavior Degree Opens Doors</a></h3>
              <p class="carousel-text">Ohio Christian University’s Information Technology and Data Analytics degrees train students for high-tech careers in today’s ever-changing environment. By offering both a Bachelor of Science in Information Technology and a Bachelor of Science
                in Data Analytics, OCU prepares students to meet all the challenges in these continually growing and evolving fields.</p>
            </div>
            <div class="carousel-item">
              <div class="carousel-image"><a href="#"></a><span>FEBRUARY 8TH, 2019</span></div>
              <h3 class="carousel-text"><a href="#">4.0 Students Recognized in Chapel Service</a></h3>
              <p...

SCSS

.carousel.slide, #outside-controls-container {
  margin:0px;
  padding:0px 10px 0px 0px;
}

.carousel-inner{
  background-color: #f1f1f3;
}

.carousel-item {
  transition: 0.4s;
    &:nth-child(1) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_1.jpg);}
    &:nth-child(2) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_2.jpg);}
    &:nth-child(3) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_3.jpg);}
    &:nth-child(4) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_4.jpg);}

  div.carousel-image{
    background-repeat: no-repeat !important;
    background-size: cover  !important;
    background-position: center center !important;
    a {
      display:block;
      width:100%;
      height:100%;
      opacity:0;
    }
    span{
    background-color: rgba(19, 106, 177, 0.7);
    position: relative;
    height: 25px;
    bottom: 25px;
    display: inline-block;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 16px;
    color:white;
    }
  }
  h3.carousel-text{
    width: auto;
    height:70px;
    padding: 1.5vw;
    font-size: 1em;
    line-height:1.2em;
    background-color: #f1f1f3;
    color: #0453a0;
    margin:0px;
  }
  p.carousel-text{
    background-color: #f1f1f3;
    color: #141416;
    font-size: 1em;
    padding: 0px 1.5vw 1.5vw 1.5vw;
    height:10vw;
    margin:0px;
  }
}

li.thumbnail {
  &:nth-child(1) > div.thumbnail-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_1.jpg);}
  &:nth-child(2) > div.thumbnail-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_2.jpg);}
  &:nth-child(3) > div.thumbnail-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_3.jpg);}
  &:nth-child(4) > div.thumbnail-image {background:...

JavaScript

// ████████████████████████████████████████████████████████████████████████
// Currently tying to figure out object scope of this.thumbnails
// doesn't work within the callback function this.observerCallback
// ████████████████████████████████████████████████████████████████████████
// WHY IS 'THIS' the window and not the instantianted instance?
// Because it's not this of an object... but this of an


// Had to extend the mutationObserver inorder to later attach the OCUCarousel Object
class MyMutationObserver extends MutationObserver {
  constructor(mutationsList, observe) {
    super(mutationsList, observe);
  }
}

var OCUCarousel = function(index, element) {
  var self = this;
  this.childCarousel = index;
  this.element = element;
  this.controlsContainer = this.element.querySelector('.outside-controls-container');
  this.carouselButtons = this.controlsContainer.children[0].children;
  this.carouselImages = this.element.getElementsByClassName('carousel-image');
  this.carouselText = this.element.getElementsByClassName('carousel-text');
  this.carouselTextH3 = this.element.querySelectorAll('H3.carousel-text');
  this.carouselTextP = this.element.querySelectorAll('p.carousel-text');
  this.thumbnailTextP = this.element.querySelectorAll('.thumbnail-text > p');
  this.carouselInner = this.element.querySelectorAll('.carousel-inner');
  this.thumbnails = this.element.querySelectorAll('.thumbnail');
  this.carouselItems = this.element.querySelectorAll('.carousel-item');
  this.marker = this.element.querySelector('.thumbnail-marker');
  this.carousel = this.element.querySelector('.carousel').Carousel;
  // the Ratio is used to determine the height vs width of the image
  this.ratio = .7322;
  this.eventListner = window.addEventListener.__proto__;
  this.init = function() {
    console.log('There is an OCUCarousel on page. ' + this.childCarousel);
    this.matchHeights();
    window.addEventListener("resize", this);
    this.addCLickEvents(this.thumbnails);
   ...