The Aurelia way of adding a horizontal top scrollbar to a table?

Question

I've tried to embed a small script within (or just outside) my template tags, without success. The script is never executed.

In my case I'm looking to execute this script:

<script type="text/javascript">
    function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }

    DoubleScroll(document.getElementById('doublescroll'));
</script>

from How can I get horizontal scrollbars at top and bottom of a div?, to add a horizontal scrollbar at the top of my table.

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        // ... a ton of rows
    </table>
</div>

Or what might a better (aurelia approach be)? Any ideas?

Here's how I imagine, but I can't seem to figure the last parts, and I don't even know if this is the right way to think about it.

1. add the dummy element with a ref attribute
2. create an attach function inside the view controller in Aurelia
3. somehow add the styles to the element fetched by the ref as this.[yourref]

Or could you avoid having to place a dummy div inside the template and actually to what the script above does, which is dynamically adding it. Also multiple table exist in the same view, so having to use ref is perhaps not the best way :/

Any further ideas would be greatly appreciated. It should be fairly easy to make a horizontal top scrollbar right? :-)

http://plnkr.co/edit/N9dRxG?p=info

Answer 1

create a custom attribute for this- here's an example:

double-scroll.js

import {inject} from 'aurelia-framework';

@inject(Element)
export class DoubleScrollCustomAttribute {
  constructor(element) {
    this.element = element; // this is the element the double-scroll attribute appears on.
  }

  attached() {
    let element = this.element;
    // contents of your DoubleScroll function from your original post
  }

  detached() {
    let element = this.element;
    // optional:  tear-down double scroll (unsubscribe events, etc)
  }
}

Then change your markup to:

app.html

<require from="./double-scroll"></require>

<div class="table-responsive">
    <table class="table table-bordered table-striped" double-scroll>
        // ...
    </table>
</div>

(the custom attribute class was exported as DoubleScrollCustomAttribute... aurelia strips the CustomAttribute and hyphenates the name resulting in the double-scroll attribute you see on your table element above.

Working plunker: http://plnkr.co/edit/SYHXBO?p=preview

For more info on custom attributes check out the docs at http://aurelia.io