bitovi / jquerypp Goto Github PK

I have different kinds of Drag-Drop-Operations in my app. Situation: Lot's of DropInit-Listeners are waiting for a Drag to call the DropInits. (SVG-Diagramming App.)

The drag-Object transports some semantic information, so every DropInit can decide to call the "drop.cancel()" method. Some DropInits will call the cancel method some won't call it. That's fine, because some want to take part in the upcoming DragDrop-Operation and some won't.

Problem: The next time a DragInit is done the DropInits of my previously "canceled" Drops are not informed. So the drop.cancel() canceles the DropHandlers forever (?)

Is this the desired behaviour? I would like to cancel the Drop just for the next upcoming DragDrop.

Cause: When a Drop is cancelled it is removed from the newElems-Array in the Drop.add() method. By this these cancelled Drops are not added to this._elements (which is fine). BUT, when cleaning up after the DragDrop the clean() Method just removes the $.data() from all this._elements. By this: In the next Drag-Operation the addCallbacks() method returns FALSE, because an $.data() element is already connected (origData !== null). By this, the old cancelled Drops will not take part in any upcoming Drags, because they are not added the the newElems-Array :(

Solution: I added a similar array like this._elements to the $.Drop and called it this._cancelledElements. In the add() method if (drop._cancelled === true) I add the current Elem to this array. Further I added the $.data() cleanup code for this new array in the clean() method. Works fine.

I could post the code if this will help?

Cheers!

whether it's a feature or a bug is up to you. But $.serialize and $.serializeArray both dismiss disabled fields. This is done so that they work hand in hand with the html specs.

Imo $++.formParams should also skip disabled fields.

When I for instance press "ø" I get this: http://screencast.com/t/6GKvfSg7m

The $.Event.prototype.vector method tries to take into account the coordinates of touch events, but fails miserably by only querying the TouchList in originalEvent.touches and foregoing the one in originalEvent.changedTouches. This gimps draggable and droppable events on any modern touch-supported browser.

Is there a reason this package hasn't been registered with Bower?

This code is not working when using jquerypp.animate.

$('.container').animate({scrollTop: 20}, 200);

I replaced my jquerypp with latest version and got very strange behaviour of dragger object (limited horizontally)
if found that the problem is in two lines 365 and 368:

style.top = Math.round(this.required_css_position.top()) + (style.top.match(/px/) ? "px" : "%");
..
style.left = Math.round(this.required_css_position.left()) + (style.top.match(/px/) ? "px" : "%");

I've replaces them with the code from my old version

style.left = this.required_css_position.left() + "px";
..
style.left = this.required_css_position.left() + "px";

All started to work well.

Using the hover plugin on multiple elements matching the same selector. Setting any leave prevents the next element from ever being hovered until you mouseover another element. e.g., If you start on an even, only the evens will hover.

var Foo = can.Control({
    ".item hoverinit": function(el,ev,hover){
        hover.leave(300);
    },
    ".item hoverenter": function(el) {
        el.addClass("active");
    },
    ".item hoverleave": function(el) {
        el.removeClass("active");
    }
});

new Foo(".test-foo");

<div class="test-foo">
    <ol>
        <li class="item">1
        <li class="item">2
        <li class="item">3
        <li class="item">4
    </ol>
</div>​

Demo: http://jsfiddle.net/AXwHG/

Hey, I found out that the compiled js files lack a semicolon at the end of the closure call (function ($) {/*...*/})(jQuery). When you now merge some files it will result in this:

(function ($) {
/*some plugin code*/
})(jQuery)
(function ($) {
/*another plugin code*/
})(jQuery)

which will file with the error defined in this issue title.

I suggest to put a semicolon before and after the closure call (this is also recommended by Mr. Crockford):

;(function ($) {
/*...*/
})(jQuery);

greets,
krnl

jQuery.event.fastfix is breaking on mobile Safari

Implement a move event that propagates like resize and is triggered when a drag element moves.

Probably also needs a general helper for any event that bubbles that way.

The jquerypp repo has in-tact license and attribution for 3rd party JavaScript sources, including jQuery.cookie, jQuery hashchange, jQuery JSON, OpenAjax.js, jslint.js, Micro, and Tmpl

Other than these 7 instances, the word 'license' does not appear in the repository. This means the jquerypp is not currently released to the public under any license. I recommend you select a license and make it clear by what license the code in jquerypp is available. This is best done by having a LICENSE file in the root as well as by having clear copyright and license headers at the top of each file.

See http://jsfiddle.net/qAFSX/3/. Remove an element that is being hovered, and nothing will ever be hovered again.

An easy partial fix is to have the hover plugin bind to destroyed and mouseleave, although there is still some weird behavior if the element is detatch()ed, and if the element is not reattached, no hover events will trigger until it is.

This way you only do

$this = $(this) once.

setParams: function( params ) {

        // Find all the inputs
        this.find("[name]").each(function() {

            var $this = $(this),
                value = params[$this.attr("name") ];

            // Don't do all this work if there's no value
            if ( value !== undefined ) {                    
                // Nested these if statements for performance
                if ( $this.is(":radio") ) {
                    if ( $this.val() == value ) {
                        $this.attr("checked", true);
                    }
                } else if ( $this.is(":checkbox") ) {
                    // Convert single value to an array to reduce
                    // complexity
                    value = $.isArray( value ) ? value : [value];
                    if ( $.inArray( $this.val(), value ) > -1) {
                        $this.attr("checked", true);
                    }
                } else {
                    $this.val( value );
                }
            }
        });

downloaded from the website:

As reported here:

https://forum.javascriptmvc.com/#Topic/32525000001010087

Firebug shows a security error in

if (sheets[x].cssRules || sheets[x].rules) {

The current download build doesn't include the Steal and raw versions of all files.

In order to address issue #20 a selector or helper that checks if a current element is actually visible (not covered by other elements and not scrolled out of the window or parent element) needs to be implemented first.

On http://jquerypp.com there is a link "jQuery.formParams" which "redirects" to http://jquerypp.com/#dimensions instead of http://jquerypp.com/#formparams

How to build jquery++ ?

~/workdir/jquerypp $ git clone https://github.com/jupiterjs/steal.git
~/workdir/jquerypp $ js buildAll.js
js: uncaught JavaScript runtime exception: TypeError: Cannot set property "pluginify" of undefined to "org.mozilla.javascript.gen.steal_build_pluginify_pluginify_js_6@4a62b9d3"

Did work prior to my lunch today... no joke. Then the "magic" Chrome-Update happened...

In Chrome 22 the "dragdown" special-event is no longer recognized. Up to know I am sure that the bound "mousedown" listener is no longer called, so it can not be transformed to the "dragdown".

It work fine, when switching to "touch"-events, the "touchstart" is recognized and the "dragdown" is triggered.

Sorry for the bad news...

The jQuery++ animate plugin breaks the basic jQuery.fn.animate signature as present since jQuery v1.0 :
.animate( properties [, duration] [, easing] [, complete] )

All options except the hash literal of property values are optional, but currently the passthroughfunction from jQuery++ (which checks whether an animation should be passed along to the default jQuery.fn.animate) expects two parameters: props and ops and will try to access ops.length without checking whether ops is actually defined.

This causes a basic animation such as $("#foo").animate({scrollLeft:"+20"}) to fail with an "'ops' is undefined" error.

The outerHeight() method returns the object itself and not the outer height of the selected element.

Eg:
console.log($('#content').outerHeight())

returns

[<div id=​"content" class=​"row">​…​</div>​]

Please add start and stop coordinates (and maybe time) data to fired swipe events.

The easing parameter currently doesn't seem to be used properly.

Hi, I found two issues on the Range implementation causing this bug.
The first issue is that on .start() and .end() the .move() TextRange's call is missing the 'character' unit, so the whole thing causes an error.
The second one is that for some reason extending the Range prototype with a custom toString doesn't work in IE 7-8, so toString() always return '[object Object]'. What this causes is that whenever you're setting the end using another range.end() result, only the first 15 characters of the last endContainer are selected.

The fix

Add to the global vars:

rangeToString = function () {
    return typeof this.range.text == "string" ? this.range.text : this.range.toString();
}

in Range constructor, as last thing

if(this.toString !== rangeToString) {
    this.toString = rangeToString;
}

and obviously change the .extend($.Range.prototype to use rangeToString instead of the function body.

For the missing unit, just change

var newPoint = $.Range(container).collapse();
//move it over offset characters
newPoint.range.move('character', offset);
this.move("START_TO_START", newPoint);

in start and

var newPoint = $.Range(container).collapse();
//move it over offset characters
newPoint.range.move('character', offset);
this.move("END_TO_START", newPoint);

in end.

Hope this helps someone!

TypeError: this.originalEvent.touches is undefined
[Break On This Error]

...nd" in document && this.originalEvent.touches.length ? this.originalEvent.change...

vector.js (line 185)

While the various modules are surrounded by...

define(['jquery', ...], function( $, ... ) {

... many of them make references to the global jQuery variable, which does not exist if jQuery.noConflict(true); has been called.

In general AMD modules should avoid accessing variables in the global scope.

I get this error message when I try to load jquery++ on IE8. This happens without even calling the jquery.range plugin, just by loading it.

SCRIPT438: Object doesn't support property or method 'Range'
jquerypp.js, line 2184 character 1

jQuery.event.swipe has a "max" property. However it's not actually being used in the calculation for the swiping.

Use touch events if available like:

var supportTouch = !isPhantom && "ontouchend" in document,
    // Use touch events or map it to mouse events
    touchStartEvent = supportTouch ? "touchstart" : "mousedown",
    touchStopEvent = supportTouch ? "touchend" : "mouseup",
    touchMoveEvent = supportTouch ? "touchmove" : "mousemove",

jsfiddle: http://jsfiddle.net/DarkArgon/7eDuT/4/
without jquery++ : http://jsfiddle.net/DarkArgon/4SQfJ/1/

It only does not work with this combination: animation -> delay/timeout -> stop() -> animation
the second animation will trigger the callback of the first one, even though .stop() was called.

( Sorry for my bad English)

Hi,

I create a test case and change your tabs widget example ( http://jsfiddle.net/yusufsafak/4Bg3Z/12/ ) for this bug.
I am trying create a patch but I haven't find any good solution yet.
I see a lot of problems in triggerAsync function. My comments start with '////' in triggerAsync function for these problems.

Thanks.

triggerAsync function

$.fn.triggerAsync = function(type, data, success, prevented){
    if(typeof data == 'function'){
        ////change prevented to success
                prevented = success;
        success = data;
        data = undefined;
    }

    if ( this[0] ) {
        // Create a new jQuery event object and store the original preventDefault
        var event = $.Event( type ),
            old = event.preventDefault;

        event.preventDefault = function(){
            old.apply(this, arguments);
            // call the prevented callback when event.preventDefault is called
            prevented && prevented(this)
        }
        // Trigger the event with the success callback as the success handler
        ////trigger function does not trigger the above event, it triggers new event
        ////When above event is used, event.pause() always called preventDefault in pause.js
        jQuery.event.trigger( {type: type, _success: success}, data, this[0]  );
    } 
        ////if this[0] does not exist then success callback is fired, but when success callback does not exist? 
    else{
        // If we have no elements call the success callback right away
        success.call(this);
    }
    return this;
}

Test Case

test("triggerAsync with prevented callback", function(){
    $("#qunit-test-area").html("<div id='foo_default_pause'>hello</div>")

    var order = [];
    stop();

    $("#foo_default_pause").live("default.show", function(){
        order.push("default")
    });

    $("#foo_default_pause").live("show", function(ev){
        order.push('show')
        ev.preventDefault();
        ev.pause();
        setTimeout(function(){
            ev.resume();
            setTimeout(function(){
                start();
                $("#foo_default_pause").die()
                same(order,['show','prevented'])
            },30)
        },50)
    });


    $("#foo_default_pause").triggerAsync("show", function(){
        order.push("async")
    },function(){
        order.push("prevented");
    })
});

The dropon event doesn't trigger on Android in both Chrome and Firefox.

Here's my code:

https://gist.github.com/whatisjasongoldstein/7b367c1de43b36b9b9a7

Update: I can also reproduce this by turning on "emulate touch events" in Chrome dev tools.

The tap-event is in de repository but isn't supported.
https://github.com/jupiterjs/jquerypp/tree/master/event/tap
This would be a nice feature to have in jquerypp for everybody who's using jsmvc/canjs/jquerypp to build mobile apps.

I propose adding a querystring helper to convert querystrings to objects. jQuery currently has $.param to convert from object to querystring, but not the other way round.

It'll use the following syntax:

$.deparam('first=john&last=Doe&phone[mobile]=1234567890&phone[home]=0987654321');
// -> {
//   first : "John", last : "Doe",
//   phone : { mobile : "1234567890", home : "0987654321" }
// }

As reported here:

https://forum.javascriptmvc.com/#Topic/32525000001012037

And demonstrated in this fiddle:

http://jsfiddle.net/javiergarmon/yUAuV/1/

.stop() doesn't seem to work consistently.

If I have this structure

<form id="times">
        <input name="begin[time]" value="A">
        <input name="begin[date]" value="B">
        <input name="end[time]" value="C">
        <input name="end[date]" value="D">
</form>

I get

{
    begin   :{time:"A",date:"B"},
    end     :{time:["C"],date:["D"]}
}

instead of the expected

{
    begin   :{time:"A",date:"B"},
    end     :{time:"C",date:"D"}
}

Hi,

Currently dragend is called as the only cleanup method but the element could theoretically not be done moving if there is a drag.revert() action called.

I can see two solutions to the issue;

1. Add a dragcleanup or dragcomplete event to the cleanup function
2. Add a dragreverted event for when the element is being reverted

I personally chose the dragcleanup option for my use and will submit a pull request for it in case you decide to go that route.

Cheers,

Jason

It looks like pixel to percent animation is not working.
The other way round seems to work fine.

example: http://jsfiddle.net/UEuUx/5/

Hi,

I can't find documentation about the support of "transform" property by jquerypp, also nothing about 2D and 3D transitions.

I would like to do something like:

$('#something').css({transform: 'rotate(10deg)'});
$('#something').css({transform: 'rotate(10deg)', transformOrigin: '50% 100%'});

$('#something').animate({transform: 'translateX(10px) rotate(10deg)'}, 1000);
$('#something').animate({transform: '+= translateX(10px)'}, 1000);

Is it planned to support it ?

Thanks for all :)

downloaded from the website:

If I have code like:

hoverinit: function(){
  this.delay(0)
  $("#someelement").show();
}.
hoverenter: function(){
  console.log("Called")
}

where #someelement hides the to-be-hovered element, a mouseleave is immediately triggered before the hovered flag is set.

If the user is setting delay to 0, they most likely want to be using leave this.leave(2000) and want a hoverenter no matter what.

The fix is to recognize this as a special case and always fire hoverenter and set hovered to true.

I would love to be able to check or uncheck by passing a boolean for checkbox and radio button.

This will allow for checking and unchecking of boolean and checkbox without needing to know the value before hand. This would also allow to load in model data with booleans and display them as checkboxs

//Change if Boolean is passed as true or false
if ( value === true || value === false ){
    $this.attr("checked", value);
}

setParams: function( params ) {

        // Find all the inputs
        this.find("[name]").each(function() {

            var $this = $(this),
                value = params[ $this.attr("name") ];

            // Don't do all this work if there's no value
            if ( value !== undefined ) {                    
                // Nested these if statements for performance
                if ( $this.is(":radio") ) {
                    //Change if Boolean is passed as true or false
                    if ( value === true || value === false ){
                        $this.attr("checked", value);
                    }
                    if ( $this.val() == value ) {
                        $this.attr("checked", true);
                    }
                } else if ( $this.is(":checkbox") ) {
                    //Change if Boolean is passed as true or false
                    if ( value === true || value === false ){
                        $this.attr("checked", value);
                    }
                    // Convert single value to an array to reduce
                    // complexity
                    value = $.isArray( value ) ? value : [value],
                    if ( $.inArray( $this.val(), value ) > -1) {
                        $this.attr("checked", true);
                    }
                } else {
                    $this.val( value );
                }
            }
        });
    },

Currently Opera support is disabled. Test if CSS 3 animations work as expected in Opera 12. Currently doesn't fire the transition end event.

With jQuery 1.9 and the jQuery Migrate plug-in, there is a warning in "jquery/event/hashchange/hashchange.js", which relies on jQuery.browser (that is now removed).
The plug-in should be updated because it will fail without the migrate plug-in also installed.

Determine if it would make sense to check if a droppable element is hidden. Suggested here:

https://forum.javascriptmvc.com/#Topic/32525000001014013

Demo:

http://jsfiddle.net/rgGmQ/1/