Visit jquerypp.com for the overview and DoneJS for the API documentation.
bitovi / jquerypp Goto Github PK
View Code? Open in Web Editor NEWjQuery's missing utils and special events
Home Page: http://jquerypp.com
License: MIT License
jQuery's missing utils and special events
Home Page: http://jquerypp.com
License: MIT License
Visit jquerypp.com for the overview and DoneJS for the API documentation.
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 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.
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.
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.
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",
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.
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!
Determine if it would make sense to check if a droppable element is hidden. Suggested here:
https://forum.javascriptmvc.com/#Topic/32525000001014013
Demo:
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 :)
This code is not working when using jquerypp.animate.
$('.container').animate({scrollTop: 20}, 200);
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.
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
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
Solution: I added a similar array like this._elements to the
I could post the code if this will help?
Cheers!
On http://jquerypp.com there is a link "jQuery.formParams" which "redirects" to http://jquerypp.com/#dimensions instead of http://jquerypp.com/#formparams
As reported here:
https://forum.javascriptmvc.com/#Topic/32525000001010087
Firebug shows a security error in
if (sheets[x].cssRules || sheets[x].rules) {
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.swipe has a "max" property. However it's not actually being used in the calculation for the swiping.
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.
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"
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.
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.
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>
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.
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.
This way you only do
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 );
}
}
});
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,
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");
})
});
Please add start and stop coordinates (and maybe time) data to fired swipe events.
Currently Opera support is disabled. Test if CSS 3 animations work as expected in Opera 12. Currently doesn't fire the transition end event.
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>]
TypeError: this.originalEvent.touches is undefined
[Break On This Error]
...nd" in document && this.originalEvent.touches.length ? this.originalEvent.change...
vector.js (line 185)
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;
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
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.
jQuery.event.fastfix is breaking on mobile Safari
It looks like pixel to percent animation is not working.
The other way round seems to work fine.
example: http://jsfiddle.net/UEuUx/5/
When I for instance press "ø" I get this: http://screencast.com/t/6GKvfSg7m
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)
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.
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" }
// }
The current download build doesn't include the Steal and raw versions of all files.
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.
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 );
}
}
});
},
The easing parameter currently doesn't seem to be used properly.
Is there a reason this package hasn't been registered with Bower?
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 passthrough
function 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.
whether it's a feature or a bug is up to you. But
Imo $++.formParams should also skip disabled fields.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.