How to use multiple objects with OLOO pattern

Question

Trying to get my head around OLOO pattern. Here's the fiddle which will make it easier to explain: https://jsfiddle.net/t0o5jnyL/

(function() {

  return PushdownProto = {
    init: function(elem) {
      this.element = $(elem);
      this.btn = this.element.find('.js-pushdown-btn');
      this.bindEvents();
    },
    open: function open() {
      var panel = this.btn.data('panel');
      this.btn.addClass('is-active');
      $('#' + panel).addClass('is-active');
    },
    close: function close() {
      var panel = this.btn.data('panel');
      this.btn.removeClass('is-active');
      $('#' + panel).removeClass('is-active');
    },
    toggle: function toggle(e) {
      console.log(e);
      if ($(e.target).hasClass('is-active')) {
        this.close();
      } else {
        this.open();
      }
    },
    bindEvents: function bindEvents() {
      var self = this;
      this.element.find('.js-pushdown-btn').on('click', $.proxy(self.toggle, this));
    }
  };

})();

(function() {

  return PickerProto = {
    init: function init(sector) {

      var origin = sector + ' .js-pushdown1';
      var destination = sector + ' .js-pushdown2';

      Pushdown1 = Object.create(PushdownProto);
      Pushdown1.init(origin);

      Pushdown2 = Object.create(PushdownProto);
      Pushdown2.init(destination);

    }
  }

})();

(function() {

  var SectorPicker1 = Object.create(PickerProto);
  SectorPicker1.init('.sector1');

  var SectorPicker2 = Object.create(PickerProto);
  SectorPicker2.init('.sector2');

})();

I've created a simple object called pushdown and created multiple objects (Pushdown1 and Pushdown2) linking to the pushdown object. These objects create a new object called PickerProto, which I would like to create new objects from.

If you look at the fiddle, you can see that the pushdowns on Sector 2 don't work and control the pushdowns from Sector 1.

I guess this is because it uses the same object. So my question is how to structure my code using OLOO pattern that allows modularity.

Hope that makes sense. And thanks in advance for any advice.

Answer 1

This is because:

1st -> you are using the IIFEs

2nd -> In the HTML you have "sector1" twice instead of "sertor1" and "sector2"

https://jsfiddle.net/49rnyu7u/1/

JS:

var PushdownProto = {
    init: function(elem) {
      this.element = $(elem);
      this.btn = this.element.find('.js-pushdown-btn');
      this.bindEvents();
    },
    open: function open() {
      var panel = this.btn.data('panel');
      this.btn.addClass('is-active');
      $('#' + panel).addClass('is-active');
    },
    close: function close() {
      var panel = this.btn.data('panel');
      this.btn.removeClass('is-active');
      $('#' + panel).removeClass('is-active');
    },
    toggle: function toggle(e) {
      console.log(e);
      if ($(e.target).hasClass('is-active')) {
        this.close();
      } else {
        this.open();
      }
    },
    bindEvents: function bindEvents() {
      var self = this;
      this.element.find('.js-pushdown-btn').on('click', $.proxy(self.toggle, this));
    }
  };

var PickerProto = {
    init: function init(sector) {

      var origin = sector + ' .js-pushdown1';
      var destination = sector + ' .js-pushdown2';

      Pushdown1 = Object.create(PushdownProto);
      Pushdown1.init(origin);

      Pushdown2 = Object.create(PushdownProto);
      Pushdown2.init(destination);

    }
  }

      var SectorPicker1 = Object.create(PickerProto);
  SectorPicker1.init('.sector1');

  var SectorPicker2 = Object.create(PickerProto);
  SectorPicker2.init('.sector2');

HTML:

<div class="sector1">

  <h2>Sector 1</h2>

  <div class="js-pushdown1">
    <button class="js-pushdown-btn" data-panel="panel1">Panel 1</button>
    <div id="panel1" class="js-pushdown-panel">This is panel 1</div>
  </div>

  <div class="js-pushdown2">
    <button class="js-pushdown-btn" data-panel="panel2">Panel 2</button>
    <div id="panel2" class="js-pushdown-panel">This is panel 2</div>
  </div>

</div>

<div class="sector2">

  <h2>Sector 2</h2>

  <div class="js-pushdown1">
    <button class="js-pushdown-btn" data-panel="panel3">Panel 3</button>
    <div id="panel3" class="js-pushdown-panel">This is panel 3</div>
  </div>

  <div class="js-pushdown2">
    <button class="js-pushdown-btn" data-panel="panel4">Panel 4</button>
    <div id="panel4" class="js-pushdown-panel">This is panel 4</div>
  </div>

</div>

PS: I am joking about the IIFEs :) Generally it's better if you remove unneeded code. It will ease your development in future.