Working Example

[weastaugh]

Hi Paolo.

This looks super useful. I'm struggling to get it to work.

I realise that it's been two years since you last updated this repo but could you provide a working example? It looks like we should wrap the markup in a tag but what are the required attributes? Something like below?

  <nx-slideout target.bind="'#panel'">
    <nav id="menu">
      <header>
        <h2>Menu</h2>
        <ul>
          <li>lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
          <li>sit</li>
          <li>amet</li>
        </ul>
      </header>
    </nav>

    <main id="panel">
      <header>
        <button class="toggle-button">☰</button>
        <h2>Panel</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </header>
    </main>
  </nx-slideout>

[3cp]

https://github.com/Nexbit/aurelia-slideout/blob/master/test/resources/my-component-host.ts

That is your example, don't put panel inside nx-slideout, but cross reference it by target.bind="content" and <main ref="content">.

<nx-slideout ref="slideout" id="menu" target.bind="content" view-model.ref="slideout" close-on-click.bind="closeOnClick" opened.bind="opened" duration="1"></nx-slideout>
<main id="panel" ref="content">
<!-- -->
</main>

[weastaugh]

Thanks @huochunpeng but still doesn't work.

For reference, try creating a new aurelia application, npm install aurelia-slideout, npm install emitter, npm install decouple, npm install slideout, add the above markup and to app.html, run it, click on the button and you get:

Uncaught TypeError: this.emit is not a function
at Slideout.open (vendor-bundle.js:28852)
at Slideout.toggle (vendor-bundle.js:28890)
at NxSlideout.toggle (vendor-bundle.js:28626)
at CallMember.evaluate (vendor-bundle.js:7548)
at BindingBehavior.evaluate (vendor-bundle.js:7155)
at Listener.callSource (vendor-bundle.js:11215)
at Listener.throttle [as callSource] (vendor-bundle.js:26584)
at Listener.handleEvent (vendor-bundle.js:11224)
at HTMLDocument.handleDelegatedEvent (vendor-bundle.js:9296)

[3cp]

It worked for me but I am not using webpack. https://github.com/huochunpeng/test-aurelia-slideout

For requirejs, it's fine as long as the css file is bundled, either follow the readme of this repo, or just use unreleased (but going to be) auto-tracing cli.

Update: bug on auto-tracing is fixed now. It all works fully automatically.

[3cp]

I can confirm this plugin doesn't support webpack. It' not surprising, since it was created before Aurelia got webpack support.

aurelia-slideout/src/aurelia-slideout.ts

Line 22 in b77f69d

frameworkConfig.globalResources('./nx-slideout');

This needs to use PLATFORM.moduleName('./nx-slideout')

Since the author is probably not maintaining this plugin, you can simply borrow the source code to your app instead of using npm package. Or you can publish a fixed version under different name to npmjs registry.

[3cp]

FYI, there is another cli bug that prevents the inlineView in src/nx-slideout.ts from working properly with webpack.
aurelia/cli#911

[ghost]

For requirejs, it's fine as long as the css file is bundled

@weastaugh, it works for systemjs too, but the component is too buggy (for example, toggle Device Mode in Chrome/Opera and try to emulate touch gestures), properties are not supported at most.

For now I use the pure css solution.