Awesometray: a JavaScript Quick Access Toolbar

Events happening in the community are now at Drupal community events on www.drupal.org.
Ed Ropple's picture

Hey there, folks. This is a copy of my Google Summer of Code application for this project. The original discussion can be found here. For mentor-y folks, the view of the proposal on the GSoC page is here (I think, anyway, this link works for me--please let me know if it's broken!). Thanks for reading, and any feedback is appreciated!

Overview: The abstract really does say most of it. Awesometray is a tray (a JavaScript toolbar that affixes to an edge of the window) that allows for both administrator and user customization to offer a sort of quick-launch functionality for whatever they might want to make easily available.

Description: rpfilomeno gave an excellent description of the idea, so I'll paraphrase his original idea a little bit, then offer my own suggestions and alterations.

Awesometray is a JavaScript-based tray. Unlike Drupal menus, the Awesometray will be user-customizable, allowing authenticated users to manage what features they see in the tray. The toolbar can keep track of bookmarked pages as well as display DHTML popups for a Block, a View, or an Application, such as the output provided by the Embed Widget module. The toolbar will be relocatable (probably just to any of the four sides of the browser window, for simplicity's sake, and changing orientation from horizontal to vertical if the tray is placed on the left or right sides) and either integrate with the Color module to allow for recoloring or provide its own more robust theming mechanism to allow for more than a simple recolor.

Each shortcut icon will need to have the ability to in some method display a state change. For example, a bookmarked node may show up with a different background, an asterisk by its name, or a different icon to highlight the fact that it has been updated. Each non-bookmark Awesometray tab can be configured to either activate on rollover or click and each can be configured to display in a verbose mode (showing the item's title) or a brief mode, showing only an icon. For example, the Blog module may push an Awesometray tab that is click-to-display (perhaps indicated with a small notch in the bottom of the tab?) and displays only a small pen-and-paper icon, while the Menu module might attach a menu with its given name and have it display on rollover.

The reference of Awesometray functionality being exposed to other modules obviously necessitates the creation of an API to register these different Awesometray tabs. While I'm sure I'm missing some necessary functionality, the following seems like a decent start:

  • Adding an Awesometray tab to the available list (perhaps permission-based?)
  • Removing an Awesometray tab from the available list
  • Configuring an Awesometray tab
    • Tab caption
    • Tab icon
    • Display style (brief/verbose)
    • Behavior (rollover/click)
    • Action
  • Set a notification on the tab (so it flashes, changes colors, whatever)

I disagree with the way rpfilomeno suggested a few parts of the project, however. For example, while I think that bookmarking functionality will be a handy part of Awesometray, I don't think it necessarily should be a part of Awesometray itself. Some users may not want it and it strikes me as being easier to wrap that in a module that adds a "Bookmark This" tab to the tray. I think that "Awesometray Bookmark" (integrating with other bookmarking solutions, if applicable) would be a good test of a module that specifically exercises Awesometray functionality. The Awesometray module itself should only be the renderer, the API for registering and controlling tabs, and the assorted configuration "glue"; the rest of it will be whatever modules we decide need to be packaged with Awesometray releases.

Also, I don't think I've said "awesome" enough times, so I'd just like to conclude with this: I think this is an absolutely awesome project that will add awesome functionality to an already awesome website framework.

Thanks for reading. You're awesome too.

Mentors:

  • rpfilomeno - it was his idea in the first place. This dude? He's awesome.

Difficulty: Medium

Comments

You might want to look at

beeradb's picture

You might want to look at http://drupal.org/project/navigate as a module that provides similar functionality. Can you explain the differences between that module and what you are proposing?

Sure thing. First off, from

Ed Ropple's picture

Sure thing. First off, from what Navigate's page suggests, that looks to be a site administration module only. Very cool (and something I might look at, though I'm not sure how it really differs from admin_menu_dropdown), but this isn't for administrators. This is for users. An administrator can specify which Awesometray-compatible modules are available to which users, probably just via permissions or whatever, and users can pick and choose what they put on their own Awesometray.

For example: you might be a heavy blogger, so you might put a widget, provided by the Blog module, on your Awesometray to allow for a quick blog post without leaving the page you're currently on, while using the Awesometray Bookmarks module to allow for a pop-open list of your site-specific bookmarks. I might likewise dig the Bookmarks module, but be less of a blogger--maybe my thing's the Forum, which provides me of a synopsis of forums with recent activity when I mouseover it. Just putting more functionality in the hands of the user, faster. I figure, the user probably knows more about what they want to be doing than I do, so why not give them the ability to make things faster for themselves? :-)

(Awesometray, Awesometray, Awesometray...can you tell I'm a fan of the word "awesome"? ;-) )

Great! My Mentor ID is godie

rpfilomeno's picture

Great! My Mentor ID is godie on sochop site, im not yet able to link the project to my profile tho.

Anyway I'm really excite about this project. I'm already experimenting on a new theme that's fully horizontal (looks like a Plurk so all contents scrolls horizontally) so bye bye to side bars and more real-estate for content on every page -- I think its a best way to showcase this project when its done!

Seems like a solid project to me!

alex ua's picture

Question: do you plan to use jquery for the javascript functionality? If so, will it require jquery update and/or jquery ui?

Personally I believe this should be integrated with flag module from the start, since that could provide some cool bookmarking/list creation capabilities. It might provide a good example module for how to hook into the awesometray api.

--
Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Thanks for the kind words!

Ed Ropple's picture

JQuery, yes, mostly because I like it when other people have already done most of my work for me. :-) I don't know enough about the particulars of JQuery to tell you right now whether it'd need JQuery Update; I'm pretty sure that once Godie and I have a functional spec written down we can totally hammer that out very quickly. I've never actually used JQuery UI (random aside: OH MY GOD WHERE HAS THIS BEEN ALL MY LIFE?!), but I'm guessing that yes, this is definitely going to be necessary.

I hesitate to have Awesometray's core module integrated with anything it doesn't absolutely have to be integrated with, but yeah, I'd imagine that Awesometray Bookmarks would have Flag as a dependency. Awesometray Bookmarks would probably be that example of the API.

Thanks a lot! :-)

-Ed

I have looked into Flag and

rpfilomeno's picture

I have looked into Flag and one way of looking at this project is being an extension to Flag. However Awesometray API should allow more than bookmarking, it should also allow other modules (eg,via cron hook) to push contents into the toolbar e.g: as a notification/visual clue and displayed via JQuery. This means the toolbar may need a sort of volatile message queuing that's accessible via its hook api; which Flag doesn't have.

Im also looking at the possibility that the queuing system can leverage on existing caching system like memcache, I find that this becomes a necessity once the site is hitting high numbers of active users. On my experience implementing this for a client, we had to build a separate notification system and reintegrate it to a Drupal site since a few hundred instance of the toolbar firing JQueries every few second to poll updates if a bookmarked node has change will just kill the site in a matter of minutes.

For this SoC project however, the queuing system is more of my wish-list but it would be nice is the Awesometray's code level design will allow such extension.

@Alex UA: when will I be able to associate my mentor profile to the project? I was reading the Melange testing procedure and Im at lost when the "I'd like to mentor this project" option becomes available to a mentor.

I'm not sure when this opens

alex ua's picture

I'm not sure when this opens up- presumably after the applications deadline closes.

--
Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

I have looked into Flag and

Ed Ropple's picture

I have looked into Flag and one way of looking at this project is being an extension to Flag. However Awesometray API should allow more than bookmarking, it should also allow other modules (eg,via cron hook) to push contents into the toolbar e.g: as a notification/visual clue and displayed via JQuery. This means the toolbar may need a sort of volatile message queuing that's accessible via its hook api; which Flag doesn't have.

This is exactly why I personally don't want bookmarking to be a part of the core API. I'd like Awesometray Core to have as few dependencies as possible (JQuery UI is likely, JQuery Update a maybe, I don't know on that one yet). The Awesometray Bookmarks module could easily depend on Flag, though.

Basically, I want Awesometray Core to focus on the bullet points listed above, and do them...well, awesomely, and let other modules add the whiz-bang effects. :)

-Ed

Looking for Backup/co-Mentor

rpfilomeno's picture

Were set for GSoC but before were 100% good to go, we need a co-mentor/backup as per requirement preferably near the Ed (Orono, Maine). Starting Monday, I'll be hanging at #drupal around 7AM GMT, look for ^godie^ (finally convinced my office admin that I need IRC port opened for me, hehe). You can also post on my contact form or leave a reply here if you want to be a co-mentor.

IRC meetup

Ed Ropple's picture

Godie--

Sorry I haven't managed to connect with you the last few days. Been running all over the place. Think we can figure out a time to chat about this on IRC? :-)

I'm always in there as "eropple"; if you /msg me, I'll get it, even if I don't respond right away.

Also, for any prospective local mentors, I can travel as far afield as Boston during GSoC for local mentor meetups, though we'll have to figure out when in advance.

Thanks!

Hi Ed, You can catch me up

rpfilomeno's picture

Hi Ed,

You can catch me up on IRC from 7:00AM EST, that's around 4PM Manila,PH here. Look for ^godie^.

First thing I can advise is start putting together a development environment, a svn/cvs to backup your files. You can use code.google.com or github.com if you use git and prepare a starting module for latest D6.

Now for the hosting environment this is not mandatory; I always try to use a LAMP setup, if your machine is on Windows then try using VirtualBox and select an easy to install distro like Ubuntu which comes with an installation profile for Apache+PHP+MySQL. Also using a LAMP Vm will give you better guarantees that it will work out of the box and whatever personal tweaks in your development setup will not be carried into the project.

Alright, I'll see what I can

Ed Ropple's picture

Alright, I'll see what I can do.

I host my own SVN and have my own development boxes, that's not an issue.

Starting up so quickly might be a little bit of an issue due to classes, but I'll see what I can do.

-Ed

Detailed Components

rpfilomeno's picture

Hi Ed,

Let me help out plan your time-line, were going to break the project down into its components then from there figure out the proposed dates for each delivery.

So here is my initial break down(feel free to revise):

  • AwesomeTray API - hook methods to allow other modules to interact with AwesomeTray. Eg. allow content such as Embed Widget Iframe output to be placed as a view pop-out (right side icons).
  • Bookmarks - adding a node as bookmark (left side icon group), may use Flag module but it should work without it as well.
  • View - rendering any view as a pop-up window (right side icon group).
  • Organize - here we can assign a custom icon to a shortcut item and organize them- for example we have bookmarked 20 nodes, it would only show the last 5. The rest is hidded and will be revealed via a collapsible menu (just like in Facebook) or an expand list (like in windows system tray icons) or a carousel type list.
  • Notification - hook that will change the highlight/change visual elements of the bookmark items to notify the user of an update (hook into existing subscription notification maybe?).

Lemme take a quick look. I'm

Ed Ropple's picture

Lemme take a quick look.

I'm not yet sold on the arrangement of buttons. I'd like them to be reorderable in any configuration the user wants. View pop-outs, functions, whatever--my guiding principle is that the user knows best.

Bookmarks, I think, should use Flag as a hard requirement. It seems a little silly to code alternate paths when there's something as easy to hook into as Flag right there. Regarding Organization, it seems to me to be a little cleaner (and conceptually and programmatically smoother) to have all bookmarks in the bookmark widget's pop-out on the tray.

I think that Notifications needs to be a lot broader than just bookmarks (might want a notification on the Blog module, for example, telling you that somebody's commented on a post), and as such bookmarks will have to hook into the notifications system; I don't see a good way to make them tightly coupled.

I agree 100% on Views and Embed Widget functionality, it'll mostly just be hashing out the APIs we want to use for various functions and then just plugging it together.

+1

rpfilomeno's picture

Good point on the layout of items depends on user preference.

BTW, I have just linked my mentor ID to this project! My bad, it seems there are two URLs to view the proposal; one for student and one for mentor but if a mentor view the link shared by the student then the mentor wont see the "Im willing to mentor this" button X_X

Finally, Leslie (LH, our SoC program manager) just announced initially that Drupal got 23 slots so we need to make sure we get a good number votes at socghop site for AwesomeTray. This means updates to the proposal with timelines and etc should do the trick :D

Schedule

Ed Ropple's picture

I'll take a crack at the schedule over the next 18 hours or so. The roof kind of fell in this week and I got stuck doing disaster recovery for a web host, so everything's been all out of whack.

Schedule, again

Ed Ropple's picture

A couple of assignments have snuck up on me, so it'll be a little later for the schedule. I'll have it up ASAP.

SoC 2009

Group organizers

Group categories

Admin Tags

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: