Double Carousel TestRefactor

extension experiments

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="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="news-tab">
          <div class="row">
        <div class="carousel slide thumbnail-carousel" data-ride="carousel">
        <button>ButtonReport 1</button>
        <button>ButtonReport 2</button>
        <button>ButtonReport 3</button>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://www.ohiochristian.edu/sites/default/files/GeorgeBarnaHeadshotWeb.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://www.ohiochristian.edu/sites/default/files/GeorgeBarnaHeadshotWeb.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div> <!-- ROW --> 

     <div class="row">
        <div class="carousel slide" data-ride="carousel">
        <button>ButtonReport</button>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://www.ohiochristian.edu/sites/default/files/PlaceHolderImage.jpg" class="d-block w-100" alt="...">
            </div>
            <div...

JavaScript

/*
Object.Carousel.prototype.test = function(){
	console.log('worked');
};
*/
/*
var carouselsInWindow = window.document.querySelectorAll('.carousel');
for(var i=0; i < carouselsInWindow.length; i++ ){
	carouselsInWindow[i].Carousel.prototype.test = function(){
  	console.log('test worked');
  };
}
*/

// WHY IS 'THIS' the window and not the instantianted instance?
// Because it's not this of an object... but this of an 
var OCUCarousel = function(index,element) {
  this.childCarousel = index;
  this.element = element;
   // I need to setup an event on the button it finds within the carousel ... so when a button is pressed it will return which index carousel it is
  // pub methods
  this.init = function() {
    console.log('There is an OCUCarousel on page. ' + this.childCarousel);  
  };

  // ...

  this.init(); // <------------ added this
}

OCUCarousel.prototype.addEventToChildButton = function(childlist){
  console.log(childlist);
}

OCUCarousel.prototype.report = function() {
  console.log(this.childCarousel);
}

OCUCarousel.prototype.report2 = function() {
  console.log(this.childCarousel);
}

OCUCarousel.prototype.buttonReport = function(input) {
  console.log(input);
}

OCUCarousel.prototype.elementReport = function(){
	var e = this.element.querySelectorAll('button');
	for(var i = 0; i < e.length; i++ ){
    var thisButton = e[i].innerHTML;
  	e[i].onclick =  function(){OCUCarousel.prototype.buttonReport(thisButton);};
  }
}

// Set our own name space for OCU:
var OCU = OCU || {};
window.OCU = OCU;

//pass namespace into an IIFE. Within the IIFE refer to namespace as "ns_obj"
(function(ns_obj){
	ns_obj.carousels = {};
  // first, did the Carousel from bootstrap actually load?
  if (typeof window.Carousel != "undefined") {
    var carouselsInWindow = window.document.querySelectorAll('.carousel');
    for(var i=0; i < carouselsInWindow.length; i++ ){
      // assign a new OCUCarousel to each bootstrap carousel
      var _neoCarousel = new...