code to highlight applied classes

[duckypoo]

While I was developing a page with WYM I thought it would be useful to see which classes are applied to the current selection, something along the lines of the "hover tools" plugin in reverse (sort of). FYI: I have styled up my "classes" list as a drop-down menu (like the default "containers" drop-down), which is why I use .hover() the way I do.

At the moment I have have it in the skin.js, not as a proper plugin. It works quite well for my needs, but I imagine it might be need some tweaking for more general use (nested elements might need some more thought). Just thought I'd share - feel free to tell me if the code is full of holes or something!

Code: Select all

   jQuery(wym._options.classesSelector).hover(
      function(){
         jQuery("a",this).each(function(){
            var link = jQuery(this);
            var classtofind = "."+link.attr("name");
            var selected = wym._selected_image || wym.selected() || wym._doc.body;
            var matchedcontainer = jQuery(selected).parents().andSelf().filter(classtofind);
            if(matchedcontainer.length > 0)
               link.addClass("sel");
            else
               link.removeClass("sel");
         });
      },
      function(){}
   );
      
   jQuery(wym._options.classesSelector + " a").click(function(){
      var clicked = jQuery(this);
      var classtofind = "."+clicked.attr("name");
      var selected = wym._selected_image || wym.selected() || wym._doc.body;
      setTimeout(function(){
         var matchedcontainer = jQuery(selected).parents().andSelf().filter(classtofind);
         if(matchedcontainer.length > 0)
            clicked.addClass("sel");
         else
            clicked.removeClass("sel");
      },2);   
   });


[duckypoo]

I added a little bit the the first part to apply a "disabled" class to classes that aren't applicable.
i.e the following style rule will be grayed out (or something) unless an image is selected:

Code: Select all

/* Right aligned image */
.right_align img
{
    //style
}


Here is just the modified hover part from the first post:

Code: Select all

      jQuery(wym._options.classesSelector).hover(
         function(){      
            var classObjects = wym._options.classesItems;
            jQuery("a",this).each(function(){                              
               var link = jQuery(this);
               var name = link.attr("name");
               var operableelem = "*";
               $(classObjects).each(function(){if(this.name==name) operableelem = this.expr});
               var classtofind = "."+name;
               var selected = wym._selected_image || wym.selected() || wym._doc.body;
               selected = jQuery(selected);
               if(selected.is(operableelem) || selected.parents(operableelem).length > 0)
                  link.removeClass("disabled");
               else
                  link.addClass("disabled");
               var matchedcontainer = jQuery(selected).parents().andSelf().filter(classtofind);
               if(matchedcontainer.length > 0)
                  link.addClass("sel");
               else
                  link.removeClass("sel");
            });
         },
         function(){}
      );


[datastyle]

Thanks for sharing, but how exactly do I apply your plugin? The documentation isn't finished...