hPanels issue

[Sam Blowes]

I'm using the plugin and have everything working except for the hPanels setting.

I've been over the documentation and the source and cant figure out why my setup isnt working. Am I doing something wrong or is there a bug?

Version 1.1.5

Example;
https://stackblitz.com/edit/oridomi-angular?file=app/app.component.ts

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
declare var OriDomi: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private $el;
  private paper;

  ngOnInit() {
    this.$el = document.getElementsByClassName('paper')[0] ;
    this.paper = new OriDomi(this.$el, {
      hPanels: 10,
      ripple: true,
      shading: true
    });
  }

  toggle() {
    const methods = ['accordion', 'stairs', 'curl', 'reveal', 'foldUp', 'ramp', 'twist', 'fracture'];
    this.paper[_.sample(methods)](_.random(0, 80, true));
  }
}

app.component.html

<button (click)="toggle()">Randomise</button>
<div style="text-align:center"  class="paper">
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

[Dan Motzenbecker]

You have to fold from either the top or bottom anchor for the hPanels setting to be apparent. The default is left.

[Sam Blowes]

Thanks @dmotz for anyone else finding this. You can set the direction after init using

   this.paper.accordion(30, 'top')