import Utilities from './Utilities.js';

class ContentMeter {
	constructor( barSelector, contentSelector, options ) {
		this.barSelector = barSelector;
		this.contentSelector = contentSelector;

		this.init();
	}

  readContentDimensions() {
    this.content = {
      height        : this.contentContainer.scrollHeight,
      visibleHeight : this.contentContainer.clientHeight,
      offset        : this.contentContainer.offsetTop,
      selfScrolled  : false
    }

    if ( this.content.visibleHeight > window.innerHeight ) {
      this.content.visibleHeight = window.innerHeight;
    } else {
      this.content.selfScrolled = true;
    }
  }

	createMeter() {
    const bar = document.createElement( "div" );
    bar.classList.add( "baza-contentmeter__bar" );
		bar.style.width = this.getBarWidth( this.content.selfScrolled ) + "%";

    this.barContainer.style.overflow = "hidden";
    this.barContainer.appendChild( bar );

    this.bar = bar;

    this.updateClasses();
		this.bindUIEvents();
	}

	bindUIEvents() {
		const bar = this.bar;
    const contentContainer = this.contentContainer;
    const selfScrolled = this.content.selfScrolled;

		if ( !selfScrolled ) {
			window.addEventListener( "scroll", () => bar.style.width = this.getBarWidth() + "%" );
		} else {
			contentContainer.addEventListener( "scroll", () => bar.style.width = this.getBarWidth( selfScrolled ) + "%" );
      window.addEventListener( "scroll", () => this.updateClasses() );
		}

		window.addEventListener( "resize", () => {
			this.readContentDimensions();
			bar.style.width = this.getBarWidth() + "%";
			this.updateClasses();
		} );
	}

	getBarWidth( ofScrollable = false ) {
		let barW = 0;

		if ( !this.content ) this.readContentDimensions();

    barW = ofScrollable ? this.contentContainer.scrollTop : (Utilities.getDocScrolltop() - this.content.offset);
    barW = (barW + this.content.visibleHeight) / this.content.height * 100;
		barW = Utilities.limitTheNumber( barW, 0, 100 );

		return barW;
	}

	updateClasses() {
		if ( Utilities.getDocScrolltop() > ( this.content.height + this.content.offset )
		  || ( Utilities.getDocScrolltop() + this.content.visibleHeight ) < this.content.offset ) {

			this.barContainer.classList.add( "js-invisible" );
		} else {
			this.barContainer.classList.remove( "js-invisible" );
		}
	}

  init() {
    this.barContainer = Utilities.getDOMElement( this.barSelector );
    this.contentContainer = Utilities.getDOMElement( this.contentSelector );

    if ( this.barContainer !== null && this.contentContainer !== null ) {
      this.readContentDimensions();
      this.createMeter();
    } else {
      throw new Error( "Wrong selectors or given selectors match no elements." );
    }
  }
};

export default ContentMeter;

@@ -704,24 +704,45 @@
 t( %22div%22 );%0A
+    this.bar = bar;%0A%0A
     bar.clas
@@ -780,18 +780,20 @@
 bar%22 );%0A
-%09%09
+    
 bar.styl
@@ -799,33 +799,33 @@
 le.width = this.
-g
+s
 etBarWidth( this
@@ -847,22 +847,16 @@
 rolled )
- + %22%25%22
 ;%0A%0A    t
@@ -942,37 +942,16 @@
 bar );%0A%0A
-    this.bar = bar;%0A%0A
     this
@@ -1017,282 +1017,147 @@
 ) %7B%0A
-%09%09const bar = this.bar;%0A    const contentContainer = this.contentContainer;%0A    const selfScrolled = this.content.selfScrolled;%0A%0A%09%09if ( !selfScrolled ) %7B%0A%09%09%09window.addEventListener( %22scroll%22, () =%3E bar.style.width = this.getBarWidth() + %22%25%22 );%0A%09%09%7D else %7B%0A%09%09%09contentContainer
+    const selfScrolled = this.content.selfScrolled;%0A%0A    const scrollTarget = selfScrolled ? this.contentContainer : window;%0A%09%09scrollTarget
 .add
@@ -1190,33 +1190,15 @@
 ) =%3E
- bar.style.width =
  this.
-g
+s
 etBa
@@ -1223,20 +1223,13 @@
 ed )
- + %22%25%22
  );%0A
-  
+%0A
     
@@ -1297,13 +1297,8 @@
  );%0A
-%09%09%7D%0A%0A
 %09%09wi
@@ -1378,32 +1378,14 @@
 %0A%09%09%09
-bar.style.width = 
 this.
-g
+s
 etBa
@@ -1395,16 +1395,23 @@
 dth(
-) + %22%25%22;
+ selfScrolled )
 %0A%09%09%09
@@ -1447,10 +1447,11 @@
 %09%7D%0A%0A
-%09g
+  s
 etBa
@@ -1483,16 +1483,119 @@
 lse ) %7B%0A
+    this.bar.style.width = this.getBarWidth( ofScrollable ) + %22%25%22;%0A  %7D%0A%0A%09getBarWidth( ofScrollable ) %7B%0A
 %09%09let ba

Add setBarWidth()