undefined | Better HN

0 pointsdrinchev9y ago0 comments

True. Although whenever I see a jQuery plugin like that I try to replace it with some combination of "components" [1]. There is a lot of progress in that area.

There are stuff like : File picker [2], dropdown [3], tip [4] for tooltips and many more.

1 : https://github.com/component

2 : https://github.com/component/file-picker

3 : https://github.com/component/dropdown

4 : http://component.github.io/tip/

0 comments

weavie9y ago

What is this "components"? I can't find anywhere that explains what it is. Is it just a random collection of javascript utilities?

nailer9y ago

It's an isolated collection of HTML, js, and scss to achieve a thing. Like a credit card payment form.

They're mainly for react, though other platforms have them (eg, I use 'ractive', from the guardian, which has its own component model).

Go check out npm, there are a while bunch of react components you can just pick up and use.

Touche9y ago

It was like browserify before browserify. It was a TJ project that was abandoned and replaced by Duo.

JustSomeNobody9y ago

CBP (component based programming) has been around (at least the idea has) since the 60s. It is the holy grail of some developers; being able to compose apps from a collection of components that work everywhere. I don't believe anyone has ever truly reached that goal. But surely it'll work this time because of JavaScript.

Sir_Cmpwn9y ago

The dropdown and tooltips look useful, but FYI it's really simple to make a file picker. Just put a hidden input type="file" on the page, then:

    document.getElementById("that-element").addEventListener("change", function(e) {
        // e.target.files
    });
    document.getElementById("that-element").click();

drinchevOP9y ago

It's not so easy

    document.getElementById("that-element").click();

doesn't exist. You need to use something like

        /** Creates the click on the input */
        const clickEvent = document.createEvent( "MouseEvents" );
        clickEvent.initEvent( "click", true, false );
        document.getElementById("that-element").dispatchEvent( clickEvent );

References :

1 : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget...

2 : http://stackoverflow.com/questions/6367339/trigger-a-button-...

EDIT ( sorry can't reply to you, because HN ) :

Relevant jQuery discussion

3 : https://github.com/jquery/jquery/issues/2476

Sir_Cmpwn9y ago

Here's code I wrote a while ago that did exactly what I specified and worked in production on all major browsers:

https://github.com/MediaCrush/MediaCrush/blob/master/scripts...

Here's the code in the jQuery library you linked to that does exactly this as well:

https://github.com/component/file-picker/blob/master/index.j...

1 more reply

j / k navigate · click thread line to collapse

0 comments

weavie9y ago

What is this "components"? I can't find anywhere that explains what it is. Is it just a random collection of javascript utilities?

nailer9y ago

It's an isolated collection of HTML, js, and scss to achieve a thing. Like a credit card payment form.

They're mainly for react, though other platforms have them (eg, I use 'ractive', from the guardian, which has its own component model).

Go check out npm, there are a while bunch of react components you can just pick up and use.

Touche9y ago

It was like browserify before browserify. It was a TJ project that was abandoned and replaced by Duo.

JustSomeNobody9y ago

Sir_Cmpwn9y ago

The dropdown and tooltips look useful, but FYI it's really simple to make a file picker. Just put a hidden input type="file" on the page, then:

    document.getElementById("that-element").addEventListener("change", function(e) {
        // e.target.files
    });
    document.getElementById("that-element").click();

drinchevOP9y ago

It's not so easy

    document.getElementById("that-element").click();

doesn't exist. You need to use something like

        /** Creates the click on the input */
        const clickEvent = document.createEvent( "MouseEvents" );
        clickEvent.initEvent( "click", true, false );
        document.getElementById("that-element").dispatchEvent( clickEvent );

References :

1 : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget...

2 : http://stackoverflow.com/questions/6367339/trigger-a-button-...

EDIT ( sorry can't reply to you, because HN ) :

Relevant jQuery discussion

3 : https://github.com/jquery/jquery/issues/2476

Sir_Cmpwn9y ago

Here's code I wrote a while ago that did exactly what I specified and worked in production on all major browsers:

https://github.com/MediaCrush/MediaCrush/blob/master/scripts...

Here's the code in the jQuery library you linked to that does exactly this as well:

https://github.com/component/file-picker/blob/master/index.j...

1 more reply

j / k navigate · click thread line to collapse