Anyway to run client side with Meteor about propagating-hammerjs HOT 11 CLOSED

I'm not sure what you mean. propagating-hammerjs is distributed via NPM, but NPM does not mean the library is restricted to server side code or something, it's just a (great!) package manager.

propagating-hammerjs uses UMD, so you can load it directly in the browser, using require.js or using commonjs + browserify. Did you try the examples? They show how to load the file propagating.js.

from propagating-hammerjs.

@josdejong thanks. Part of my issue is do to (most probably due my lack of knowledge) Meteor. I am using a Meteorhacks NPM package to install the package... but as I understand it, this will only work on the Meteor server.

So as an alternative, I did try and bypass using NPM and just placing propagating.js into my client directory, which basically ends up with something equivalent to <script src="../propagating.js"></script> as per the examples. This is where I got the propagating is not defined error generated on the propagating.js file.

from propagating-hammerjs.

I'm not familiar with Meteor, but I suppose you can just download and host your own "assets" separately of the Meteor ecosystem.

I suppose the file <script src="../propagating.js"> is loaded correctly and has no fetching errors.

propagating-hammerjs exposes the propagating function to window when it detects it's not running inside an AMD environment (define.amd exists) or in a CommonJS environment (exports exists). I'm just guessing here, but maybe Meteor exposes any of these (define.amd or exports), and if so, propagating-hammerjs configures itself for that environment.
If that's the case, it may help to load the <script src="../propagating.js"> script before any meteor scripts. And else, you probably have to retrieve the module via the module system of Meteor, using a require call or something.

from propagating-hammerjs.

Thanks.

Ok, I am know loading thethe JS files in the following order

 <script type="text/javascript" src="/client/views/helpers/a_loadbefore/hammer.js?4aaab178e607ad12fce1490a5b9c38b72daa6b9a"></script>
  <script type="text/javascript" src="/client/views/helpers/a_loadbefore/jquery.hammer.js?f9949f3ffce2eab65e671ed76e8c94c6dbb80b86"></script>
  <script type="text/javascript" src="/client/views/helpers/a_loadbefore/propagating.js?f5a5a8a8c5862329c4494071cc19d053f4688a4e"></script>
  <

followed by:

<script type="text/javascript" src="/client/views/helpers/hammer2.js?90e6abd5bceebe51c03dc1932831d51f3025611e"></script>

All hammer2.js has in it is: Hammer = propagating(Hammer);

as per example: https://github.com/josdejong/propagating-hammerjs/blob/master/examples/global.html

I see the following errors in the console:

from propagating-hammerjs.

Ah, that's an interesting first error in the console. Looks like the propagating.js script has no top level this (which should resolve to window when used in the browser). I've removed that from the code and released v1.2.1, maybe that solves this issue.

from propagating-hammerjs.

Wow, thanks for the quick turnaround.. that sorted it out.

Now, I still have a propagation issue... when I press in a div, I want to highlight it... but it seems to propagate up the tree. I have tried both stopImmediatePropagation and stopPropagation as per:

My markup is similar to:

<div id="58bd5c48632c1ac6d63365ed" class="some-class">
    <div id="cba2a40e17ff6a263519255d" class="some-class"> somehting</div>
</div>

my code looks something like:

$('.some-class.editable').hammer({domEvents: true}).bind("press", function(e, target){
       // console.log(e)
        e.stopPropagation();
        e.preventDefault();


        $('.some-class.editable.active').removeClass('active');
        console.log($(this)[0].id)
        //$(this).addClass('hover');
        //$(e.target).addClass('active');
        $(this).addClass('active');
    });

if I click the child (id=cba2a40e17ff6a263519255d) the console shows me multiple ID's of the children and the parent:

As I am using jQuery and before installing your code I got no complaints about call e.PreventDefault() or stopPropagation. Do I need to change the order of inclusion to have propagation.js load before the jquery.hammer.js and do the override before that?

from propagating-hammerjs.

Ok great that that solved the initial issue.

It does not matter in which order you load propagating.js. But I don't see you actually using propagating in your code, you create regular hammer instances it seems.

from propagating-hammerjs.

I was trying to use the global override approach: All hammer2.js has in it is: Hammer = propagating(Hammer);

from propagating-hammerjs.

hm then I'm not sure whether you actually created instances of propagating-hammerjs or not. It sounds like you do, because there is a method event.stopPropagation available (you could also check for event.firstTarget and event._handled, which are added to events by propagating-hammerjs too).

Back to the ordering thing:

Do I need to change the order of inclusion to have propagation.js load before the jquery.hammer.js and do the override before that?

Looking at the code of jquery.hammer.js I see it creates a local reference to Hammer. So in that case it actually does matter in which order the libraries are loaded: your hammer2.js script should be loaded before jquery.hammer.js, as it replaces the global Hammer.

Are you sure that both child element and parent element use a propagating hammer instance? Only then this solution can work.

from propagating-hammerjs.

Yea!!! That did it. Thanks!!!

I renamed the files so they get loaded in the correct order:

Meteor loads them alphabetically.

My only concern is the my "press" function seems to be called twice:

That said, it has not propagated to the parent. Is there some reason that I'd get 2 calls?

from propagating-hammerjs.

Ok that's great :)

I tested whether a press event is fired twice in a bare bones propagating-hammerjs example, that is not the case. I'm afraid you will have to do some more debugging to figure out where this comes from. If this is related to propagating-hammerjs feel free to open another issue for that.

from propagating-hammerjs.