Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add useful things from jQuery #8376

Closed
DartBot opened this issue Feb 6, 2013 · 19 comments
Closed

Add useful things from jQuery #8376

DartBot opened this issue Feb 6, 2013 · 19 comments
Assignees
Labels
P1 A high priority bug; for example, a single project is unusable or has many test failures type-enhancement A request for a change that isn't a bug web-libraries Issues impacting dart:html, etc., libraries
Milestone

Comments

@DartBot
Copy link

DartBot commented Feb 6, 2013

This issue was originally filed by yohan.bes...@gmail.com


Here is a list of functions from jQuery I find useful and that are missing from Dart (or that I'm not aware of).
These functions should be methods of the class Element :

CSS/Dimensions/Offset


Effects/Animation


@dgrove
Copy link
Contributor

dgrove commented Feb 6, 2013

cc @efortuna.
Set owner to @blois.
Removed Type-Defect label.
Added Type-Enhancement, Area-HTML, Triaged labels.

@justinfagnani
Copy link
Contributor

Kevin Moore has implemented some of the effects for widget.dart:

http://kevmoo.github.com/widget.dart/#effects

@DartBot
Copy link
Author

DartBot commented Feb 7, 2013

This comment was originally written by ladicek@gmail.com


At least the add/remove/toggle/hasClass is already there -- the Element class contains a set (which is actually a Set, so a normal collection!) of CSS classes called 'classes'. Normal Set wouldn't need a 'toggle' method, but this one does -- and it's there.

Also, the offset* seem to already be there, but maybe they are different than in jQuery, I can't tell.

@DartBot
Copy link
Author

DartBot commented Feb 7, 2013

This comment was originally written by yohan.b...@gmail.com


  • jQuery functions addClass(), removeClass(), toggleClass() do way more than just take one class name.
  • hasClass() is like contains(), but the name doesn't seem right to me. But I agree, at least we have the functionnality.

And I'm wondering, if couldn't have some kind of facade methods in Element.
Instead of doing: element.classes.add('bar')
element.addClass('bar') is easier.
I think nobody care of the implementation behind all of this. We know that we have an attribute "class", and we want to make change to it from the element. Or at least it's how I see it.

  • offset() returns an object (top and left).
    Doing

Offset offset = query('#foo').offset()
offset.top // do something
offset.left // do something
...


seems better than


Element element = query('#foo');
element.offsetTop // do something
element.offsetLeft // do something


But again it's just my personal opinion.

Moreover, the jQuery method allow you to pass an object ".offset({ top: 10, left: 30 })" or a function "offset( function(index, coords))", to move an element.

  • After checking, offsetParent() is already present in Dart.

@blois
Copy link
Contributor

blois commented Feb 7, 2013

We added Element.append() which is a shortcut for Element.children.add(), not opposed to additional shortcuts. But .addClass doesn't seem to buy much beyond .classes.add().

CssClassSet APIs which support sets of tags rather than single tags seems logical, though a bit odd since its overriding Set functions. I think we should get this in.

For the offset APIs, I want Point and Rect classes in Dart (I renamed dart:html's webkit-only Point class to DomPoint to make way for it), but there's some discussion about where they should live- in dart:html or elsewhere (I prefer elsewhere, specifically dart:math). Once we have the Point class, we should also have APIs for relative positioning between elements and events. As far as I'm concerned, getting proper Point & Rect classes is the blocking pre-req for this.

Good discussion, I'm going to break out specific items and at some point close this bug as invalid (too many divergent issues), but feel free to continue to append to it and we can fork as needed.

So far I've opened:
Bug 8406- Improvements to Element.classes APIs
Bug 8407- Improve element positioning & sizing APIs

The effects/animation ones are definitely useful, but for now I'd prefer to have those in a separate package.

@DartBot
Copy link
Author

DartBot commented Feb 27, 2013

This comment was originally written by yohan.b...@gmail.com


If you are interested I implemented few features (What I needed in fact)
Demo: http://goo.gl/tirFa & Sources: http://goo.gl/y7gCg

@efortuna
Copy link
Contributor

Added this to the M4 milestone.

@DartBot
Copy link
Author

DartBot commented Mar 19, 2013

This comment was originally written by amouravski@google.com


Issue #6526 has been merged into this issue.

@DartBot
Copy link
Author

DartBot commented Mar 19, 2013

This comment was originally written by amouravski@google.com


Issue #4144 has been merged into this issue.

@efortuna
Copy link
Contributor

Set owner to @efortuna.

@efortuna
Copy link
Contributor

cc @blois.

@blois
Copy link
Contributor

blois commented Apr 15, 2013

Issue #6526 has been merged into this issue.

@blois
Copy link
Contributor

blois commented Apr 19, 2013

Removed this from the M4 milestone.
Added this to the M5 milestone.

@efortuna
Copy link
Contributor

efortuna commented May 9, 2013

It seems that jQuery's innerHeight is the same as clientHeight. Is this actually the case?

If so, how do we merge this new functionality with what's already available on Element? See discussion on web-ui mailing list for more details https://groups.google.com/a/dartlang.org/d/msg/web-ui/hV0EwPVeWvE/INUVX9IMVMgJ

@blois
Copy link
Contributor

blois commented May 29, 2013

Removed this from the M5 milestone.
Added this to the M6 milestone.
Removed Priority-Medium label.
Added Priority-High label.

@DartBot
Copy link
Author

DartBot commented Jul 6, 2013

This comment was originally written by danny@kirchmeier.us


I am very interested in seeing 'toggleClass(className, switch)' implemented in dart in some way.

I abhor having to write this code:

if(foo) e.classes.add('myStyle');
else e.classes.remove('myStyle');

and would rather write:

e.classes.toggle('myStyle', foo);

@DartBot
Copy link
Author

DartBot commented Jul 7, 2013

This comment was originally written by @sethladd


Thanks for the suggestion. Turns out there's an API for it:

http://api.dartlang.org/docs/releases/latest/dart_html/CssClassSet.html#toggle

I think you can use it like:

query('#elem').classes.toggle('myStyle');

Give that a try, let us know. Thanks!

@DartBot
Copy link
Author

DartBot commented Jul 8, 2013

This comment was originally written by @seaneagan


@danny:

I agree toggling classes via a boolean value is useful. I filed issue #11741 for that.

@efortuna
Copy link
Contributor

Toggling via boolean value has been added. Also just checked in https://codereview.chromium.org//19786005 at r25235 which provides functionality for all the innerHeight/outerHeight/height measurements (but hopefully in a more straightforward Dart-y way). More to come.

@DartBot DartBot added Type-Enhancement P1 A high priority bug; for example, a single project is unusable or has many test failures web-libraries Issues impacting dart:html, etc., libraries labels Jul 19, 2013
@DartBot DartBot added this to the M6 milestone Jul 19, 2013
@kevmoo kevmoo added type-enhancement A request for a change that isn't a bug and removed type-enhancement labels Mar 1, 2016
@dart-lang dart-lang locked as resolved and limited conversation to collaborators Jul 18, 2018
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P1 A high priority bug; for example, a single project is unusable or has many test failures type-enhancement A request for a change that isn't a bug web-libraries Issues impacting dart:html, etc., libraries
Projects
None yet
Development

No branches or pull requests

6 participants