[Pro] ID to Class Conversion

Legacy ActionsDev
1

Is there an action or could an action be created that would convert an ID to a Class style using the same name in the title field?

Example:

<div id="sample" rest_of_inline_styling...>

could be turned into:

<div class="sample" rest_of_inline_styling...>

Now I know that there is an ‘Add Selector’ and the ‘Anonymous’ actions, but it’d be nice to have an action that could do this in one hit versus two actions.

Reason I need this is for a blog entries archive page in ExpressionEngine and I want the code to validate and it won’t if multiple same ID’s are used.

OR if someone has handled this issue differently, I’d be interested to know how.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I’ll also add that the reason why I need the class style attached is to use the “switch” parameter in EE.

I’d be fine with Anonymous if the client didn’t enjoy the switch parameter so much.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

A little custom code fixed the issue. There really couldn’t be a way to do that without custom coding it. The Anonymous action does remove the ID tag, so that works out as far as validation goes.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

You could try a combination of AddSelector (to add the classname) and Anonymous (to remove the ID). Not sure if AddSelector is really all that useful for this purpose except for non-layer layouts, though, as the Extended dialog allows you to add a classname just about as easily.

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I was using the combination for it, however I still needed some control over it if I had just used the Anonymous action. I may use that on my site as I have repeated content, although when I use Tim’s Externalize action everything (name-wise) goes south.

Perhaps I’ll have to live with inline-styling until the sun slowly rises and in the distance Softpress towers is heard bellowing the tones of “You can have your external CSS without inline styling and eat it too!”

However through some custom coding I was able to solve the issue and it existed only on one or two pages at most. Just didn’t know if an action that was a one straight shot would be beneficial to anyone else.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Well, off the top of my head, the Action would be something like this:

<item-action name="Classify">
<action-checkbox name="Add Class" />
<action-checkbox name="Remove Id" />
<action-javascript>
function addClassName(elm, className){
    var classes = [];
    if(elm['class']){
        var c = fwQuote(elm['class'],'','"').split(/s+/);
        for (i in c) classes.push ( c[i] );
    }
    classes.push ( className );
    elm['class'] = classes.join(' ');
}
function fwBeforeEndHTML(){
    var me = fwDocument.fwTags.FwFind(fwItem);
    if(fwParameters['Add Class'].fwBoolValue){
        if (me && me.id && (!me['class'] || me['class'].toString().indexOf(me.id) !> -1)){
            addClassName(me,me.id);
        }
        if(fwParameters['Remove Id'].fwBoolValue){
            me.id = null;
        }
    }
}
</action-javascript>
</item-action>

This would convert the ID to a ClassName, and optionally remove the ID as well.

I haven’t tested this, but it might work on the first try. I just typed it here.

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Naturally, just spotted something I left out. This will currently produce an unquoted class string, so change the function addClassName() to read as follows:

function addClassName(elm, className){
    var classes = [];
    if(elm['class']){
        var c = fwQuote(elm['class'],'','"').split(/s+/);
        for (i in c) classes.push ( c[i] );
    }
    classes.push ( className );
    elm['class'] = fwQuote(classes.join(' '));
}

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Just tried putting that together to see for fun. I get a ‘Action is not properly terminated’ error that pops up.

Here’s what I put in there and saved it as Classify.fwaction

<item-action name="Classify">
<action-text name="classify" title="Classify" />
<action-checkbox name="Add Class" />
<action-checkbox name="Remove Id" />
<action-javascript>
function addClassName(elm, className){
    var classes = [];
    if(elm['class']){
        var c = fwQuote(elm['class'],'','"').split(/s+/);
        for (i in c) classes.push ( c[i] );
    }
    classes.push ( className );
    elm['class'] = fwQuote(classes.join(' '));
}
function fwBeforeEndHTML(){
    var me = fwDocument.fwTags.FwFind(fwItem);
    if(fwParameters['Add Class'].fwBoolValue){
        if (me && me.id && (!me['class'] || me['class'].toString().indexOf(me.id) !> -1)){
            addClassName(me,me.id);
        }
        if(fwParameters['Remove Id'].fwBoolValue){
            me.id = null;
        }
    }
}
</action-javascript>
</item-action>

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

To do a straight swap from an ID to a Class you can use fwTitle to
simply rename the original ID attribute;


<item-action name="ID2Class">
<action-javascript>
function fwBeforeEndHTML(){
    var me = fwDocument.fwTags.fwFind(fwItem);
    if(me.id){
        me.id.fwTitle = "class";
    }
}
</action-javascript>
</item-action>

It works for virgin divs but won’t handle items that also contain
existing classes. For that you’d need to look back to Walter’s method
of concatenating the class names in his action.
Thanks,
Tim.

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

It looks to me like you are trying to add a text field to set your own classname, rather than what you asked for at the beginning – using the item’s existing ID as its class. If you have a look at the internals of the AddSelector Action, you might find some goodies for that.

As to the error you got, I’m not sure. Probably an unclosed quote somewhere. Oh wait, yeah, that’s a Freeway bug from way way back.

Anywhere you see this sort of construction:

fwQuote(elm['class'],'','"')

you have to add a commented double-quote at the end of that same line. Freeway looks at the line, sees that it has an odd number of quotes, and throws a hissy. So make that line read:

var c = fwQuote(elm['class'],'','"').split(/\s+/); //"

…and the Action will Just Work™.

If you’re trying to add your own classname in there using the text field, then you’ll have to create an accessor for it inside your function. If you want to maintain the ID-changed-into-a-class and add another class, then you would do something like this before the end of the function:

if(fwParameters['classify'].fwBoolValue){
    addClassName(me,fwParameters['classify']fwValue);
}

It would be up to you whether to do that in place of the ID value or to add it on to the string, so you would have class="myId myOtherClass" as the result.

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Grrrr. Left out a dot:

if(fwParameters['classify'].fwBoolValue){
    addClassName(me,fwParameters['classify'].fwValue);
}

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Wow, out of my league here. Walt, I just copied and pasted what you had wrote previously, there wasn’t any customization or anything other than an action version number that I read through on another action as a reference.

Now the action installs without error but when I try and use it, it says this line grouping has missing parentheses:

if(fwParameters['Add Class'].fwBoolValue){
        if (me && me.id && (!me['class'] || me['class'].toString().indexOf(me.id) !> -1)){
            addClassName(me,me.id);
        }

I’d like to be able to use my own class name if possible then I could style multiple similar HTML items. It would be great for box-model sites. While I hope for a response I’ll investigate the Selector Action if it’s not encoded.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Yup, the perils of typing in a web form, without the comfort of my usual editor and its auto-paired parentheses.

Here’s the line (fixed) that’s causing the problem.

if (me && me.id && (!me['class'] || me['class'].toString().indexOf(me.id) !> -1))){

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Still not working even after the replacement. Odd. It still gives me the error upon applying it and it does show the additional ) at the end.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options