Ticket #5369 (closed enhancement: fixed)

Opened 1 year ago

Last modified 9 months ago

jQuery should be used to fade alerts

Reported by: JeremyVisser Assigned to: mdawaffe
Priority: low Milestone: 2.5
Component: Administration Version: 2.5
Severity: minor Keywords:
Cc:

Description

jQuery has the ability to perform fades now, I believe. Doing fades with jQuery should simplify code, and would also give us the ability to drop fat.js.

Additionally, FAT will only fade an alert if it contains an id="something", not just class="fade alert", which is a pain in the butt for debugging, IMO. jQuery doesn't suffer from that limitation.

Attachments

jquery-alerts.diff (7.5 kB) - added by JeremyVisser on 11/27/07 12:58:55.
jquery-alerts.2.diff (8.3 kB) - added by JeremyVisser on 11/28/07 00:51:19.
Uses the jquery-color plugin. Non-working, because it requires jQuery 1.2, and WP only has 1.1.4.
jquery-alerts.3.diff (4.5 kB) - added by JeremyVisser on 11/28/07 01:07:25.
Here's another one, using the Highlight function of interface.js.
fade.diff (5.6 kB) - added by ryan on 01/05/08 07:05:38.
Fade with jquery.color

Change History

11/20/07 23:10:43 changed by lloydbudd

  • milestone changed from 2.4 to 2.5.

11/21/07 01:51:19 changed by Viper007Bond

+1

11/27/07 12:58:35 changed by JeremyVisser

  • owner changed from anonymous to JeremyVisser.
  • status changed from new to assigned.

[citation needed]

I can't for the life of me figure out how I came up with that "jQuery has the ability to perform fades now" statement. jQuery has no such colour fading support.

However, I found a jQuery-ified version of FAT, which I have baked into a patch, which will give plugin authors the ability to drop the id="mymessage" attribute from their alerts (by just using class="fade alert".

It has the wonderful side-effect of pointlessly adding jQuery as a dependency for every WP Admin page now, so no WP Admin page won't have jQuery enqueued.

11/27/07 12:58:55 changed by JeremyVisser

  • attachment jquery-alerts.diff added.

11/27/07 13:03:42 changed by JeremyVisser

A side-effect for this patch: Fat.fade_all() is no longer called unless there is a .alert.fade present, so if you manually create a <div id="mymessage" class="fade-ff0000 alert"> (i.e. a red fading alert), it won't fade anymore. You could always call jQuery(".alert#mymessage").vkfade("ff0000") but that's inferior to just using FAT.

Also, I strongly believe the "fade" class is unsemantic, and the "alert" class for alerts should be just used, and the fade should be implied. For red fades, an "error" class could be added.

Could FAT be rewritten to use jQuery.animate()?

Ironically, I'm currently -1 to my own patch in its current state.

(follow-up: ↓ 7 ) 11/27/07 13:06:11 changed by filosofo

I think you could use instead the Highlight effect of the Interface plugin, a jQuery plugin which is included in WP (and used on the admin widgets page).

11/28/07 00:48:35 changed by JeremyVisser

Ah, found what I was looking for, with a usage example on the release notes.

However, I was getting really weird JS errors, and realised that this requires jQuery 1.2. Are we ready to make the move to 1.2 yet?

11/28/07 00:51:19 changed by JeremyVisser

  • attachment jquery-alerts.2.diff added.

Uses the jquery-color plugin. Non-working, because it requires jQuery 1.2, and WP only has 1.1.4.

(in reply to: ↑ 5 ) 11/28/07 00:53:30 changed by JeremyVisser

Replying to filosofo:

I think you could use instead the Highlight effect of the Interface plugin, a jQuery plugin which is included in WP (and used on the admin widgets page).

Cool, I'll have a hack at that.

11/28/07 01:07:25 changed by JeremyVisser

  • attachment jquery-alerts.3.diff added.

Here's another one, using the Highlight function of interface.js.

(follow-up: ↓ 9 ) 11/28/07 01:08:09 changed by JeremyVisser

I'm a bit uneasy about the need for a 4-line .js file. Should this be integrated anywhere else, like at the end of interface.js?

(in reply to: ↑ 8 ) 11/28/07 01:36:45 changed by DD32

Replying to JeremyVisser:

I'm a bit uneasy about the need for a 4-line .js file. Should this be integrated anywhere else, like at the end of interface.js?

Interface is a jQuery plugin, so in my mind it should stay as *only* interface.

Maybe a Generic JS file for around the admin pages is needed? (Or someone could revisit the JS / CSS combiner+compressor function idea again)

(follow-up: ↓ 11 ) 11/28/07 04:41:01 changed by matt

interface.js is HUGE.

(in reply to: ↑ 10 ) 11/28/07 05:18:05 changed by rob1n

Replying to matt:

interface.js is HUGE.

No kidding. It also seems to be unmaintained currently -- I believe that's why the official jQuery UI project was started.

01/02/08 19:35:32 changed by ryan

Once we upgrade to jQuery 1.2 (see #549), can we use the color animations jquery plugin?

http://plugins.jquery.com/project/color

01/02/08 19:39:44 changed by ryan

Duh, I see that there's already a patch for that. That route seems the best since we're planning to upgrade jquery.

01/05/08 07:05:38 changed by ryan

  • attachment fade.diff added.

Fade with jquery.color

01/05/08 07:09:41 changed by ryan

Patch uses jquery color animations to fade. We still need fat until list manipulation is ported to jquery color.

01/07/08 02:26:37 changed by mdawaffe

jQuery.color is a bit nicer than FAT. It's also 1k bigger, though.

Maybe WP should start minifying some of its JS?

01/08/08 06:39:09 changed by ryan

  • status changed from assigned to closed.
  • resolution set to fixed.

(In [6572]) Fade using jquery.color. Props JeremyVisser?. fixes #5369

01/08/08 06:40:13 changed by ryan

  • milestone changed from 2.6 to 2.5.

Minified jquery.color. Created admin.js to hold the fade code and any future JS bits that should be loaded for all admin pages.

01/08/08 06:44:31 changed by ryan

(In [6573]) Fade using jquery.color. Props JeremyVisser?. fixes #5369

(follow-up: ↓ 21 ) 01/08/08 06:48:04 changed by matt

Did we just lose the ability in FAT to go to/from any background color? (Akismet uses this.)

Fat was smaller and more functional, and didn't use Prototype. Switching for switching sake is not worth it.

01/08/08 06:48:09 changed by matt

  • status changed from closed to reopened.
  • resolution deleted.

(in reply to: ↑ 19 ) 01/08/08 06:56:52 changed by ryan

Replying to matt:

Did we just lose the ability in FAT to go to/from any background color? (Akismet uses this.)

I don't think so, but need to make sure.

Fat was smaller and more functional, and didn't use Prototype. Switching for switching sake is not worth it.

If we use core animations to bring back the fading delete when deleting from lists then it is probably worth it. But, 'tis no matter to me to revert.

01/08/08 07:18:09 changed by ryan

Do you mean the fade-ff0000? jquery.color doesn't seem to have such a convenience. Easily written, but recreating fat is not worthwhile.

01/08/08 07:22:08 changed by ryan

(In [6574]) Revert back to fat for now. see #5369

01/08/08 07:22:33 changed by ryan

Back to FAT pending further revelations, if any.

01/09/08 09:27:18 changed by matt

Actually I think we can kill the fade-trick. I think we can make our fading more static and leave fancier stuff up to something else. Let me look at a cleaner way of loading fat/color though, so we don't get the hit on every page even if there's nothing to fade.

01/09/08 12:12:36 changed by matt

(In [6582]) Replacing FAT with jQuery effects, new styling for alerts. See #5369.

01/09/08 12:18:04 changed by matt

  • owner changed from JeremyVisser to mdawaffe.
  • status changed from reopened to new.

Aw crap, Trac just deleted my long comment. Short version:

jQuery.color is generally useful to WP, allows animating non numeric color fields. Means we don't need effects libraries for things like the pulse on the new notices.

Leaving ticket open until mdawaffe has a chance to review wp-lists.js, which I modified to the best of my ability, but I feel I missed something. Also listmanip stuff should be removed from the repo.

mdawaffe, there is something funky going on line 65. When I have 'break on all errors" in firebug it catches every time I delete a comment, and the infinite loading feature seems to break after one. I see the AJAX request returning a new comment but there's nothing added to the list.

02/28/08 01:40:15 changed by mdawaffe

  • status changed from new to closed.
  • version set to 2.5.
  • resolution set to fixed.

matt, fades seem to work now [7050].

Deletes work fine for me.

Infinite comments does not work for me. Opening new ticket.