Forum closed. New forum available at http://community.wymeditor.org/

code to highlight applied classes

Discuss features, code, contributions, ideas, suggestions, ...
For bugs, patches and feature requests, please post on the Trac:
http://trac.wymeditor.org/

code to highlight applied classes

Postby duckypoo on Thu Jul 24, 2008 2:43 am

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
 
Posts: 3
Joined: Fri Jun 13, 2008 2:49 am

Re: code to highlight applied classes

Postby duckypoo on Fri Jul 25, 2008 1:02 am

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(){}
      );
duckypoo
 
Posts: 3
Joined: Fri Jun 13, 2008 2:49 am

Re: code to highlight applied classes

Postby datastyle on Wed Mar 18, 2009 4:35 am

Thanks for sharing, but how exactly do I apply your plugin? The documentation isn't finished...
datastyle
 
Posts: 2
Joined: Wed Mar 18, 2009 4:34 am


Return to Developers

Who is online

Users browsing this forum: No registered users and 1 guest