[OS] Profile Drop-Down AddOn

For a Couple of weeks iv been working on some open source codes for people to learn from and use. you've all See Peter's PB Profile Constructor, this is written in a different way and specifically for drop down options and those options turn into images, like the Mood addOn, or the HP House Code or any other thing you can think of, because its open source i haven't complicated it with a lot of options, i made it so it can be used to learn from so its for something specific and thanks to Peter the method I used is well spaced and easy to understand. So here is the code:

GLOBAL FOOTER

<script type="text/javascript" src="http://pb.proscripts.co.uk/dregond/mpAddOpt.js">
<!--

// Profile Drop-Down AddOn [Open Source]
// support.proboards.com

// -->
</script>



I'll explain abit abt Each Function part


save_AddOptions : This part of the code saves the information obviously, i used addEventListener, and attachEvent so it wont conflict with any other profile codes, attachEvent is IE function and addEventListener is for FF so it improves Cross Browsing.


get_AddOption: With the use of a Regular Expression pattern I grab the specific part of text which is used to hold the created option's value In this case it can be as example [C:0] where 0 is the drop down option value, this auto selects the option from the created drop down list so it shows its text for example [C:0] could correspond to Club: [Boxing] from the drop down.


sub_saveAddOpt: In this part its important to test if the created field has any text or option selected if there is something selected it will create the text, for example [C:#] and add that into the feild you choose to save it in, like the personal text, or custom title.


create_AddOption: This Creates the Field's in the Modify Profile section, in my original version i used innerHTML, this time around i used DOM , if your curious why i used "id" instead of "name" in the input field attributes, its because IE prefers id's when doing array's in forms. Read through the coding, its not hard to modify it for any other alternatives.


mp_AddOption: Now we have to add the info to the mini profile, no its not that hard and you can edit it anyway you want, in specifc i made it to output images you can make it output anything you want, its written in DOM so you can read it clearly. If your wondring why i use "RegExp.$1.replace(/ /g,'')" its because the personal text area and a few other fields tend to break off the line of text and sometimes causes spaces this removes those spaces. It could probably be made more specific but you can go ahead and use your version of removing spaces. Once the option is added, you need to remove the [$:#] part from the mini profile and thats what the replace(); function is for.


main_AddOption: I decided why not add it to the main profile too which is the part on the right, so i wrote this part to do that if you read it you'll see its a lot like the mp_AddOption part. you can adjust it anyway you like.



Calling The Function


To call any of the functions outside the function loop you use the main function name and then the innerFunction name, if your calling it from inside the function loop you use this.function. here are examples


do_mpAddOpt.save_AddOptions(); <---- calls the save fucntion after the code has loaded


this.create_AddOption(); <-- when the save function is called, it also calls the create_AddOption(); from inside the loop.


Editing The Code


This is the fun part...don't give me that look! *glares back at you* To make it easy lets take the mood Addon also remember the AddOns can go either in the GLOBAL HEADER / FOOTER above the main code


//Mood Addon

var mp_AddOption = [

          ["Mood:", "M0", "mood", "Please select Your Mood", "None", "personaltext", [

                    ["none","Mood"],
                    ["http://s2.images.proboards.com/smiley.gif", "Happy"],
                    ["http://s4.images.proboards.com/cheesy.gif", "Cheesy"],
                    ["http://s2.images.proboards.com/angry.gif", "Angry"],
                    ["http://s2.images.proboards.com/cry.gif", "Cry"] // Ref Note 1 *

                    ]
          ]
];




"Mood:" <-- This is the field name its like karma: or posts:

"M0" <-- we need a storage symbol to identify one from another so you can add anything but make it a little creative but short like "H1" which would create [H1:#].

"mood" <--- field id, that simple, keep it unique.

"Please select Your Mood" <--- description of the new field.

"None" <--- default value which will be text

"personaltext" <--- where do you want to store it? personaltext?, customtitle?, location ? use it wisely it and just so you know if you put it in customtitle it will be only viewed and editable by staff personaltext or location is everyone, but you can use any field at all.

["none","Mood"] <-- first one gets the , "none", and the field name like "House" or "Group" just so people can switch to default and not have none on the field like House: None


*Note 1 : last one doesn't have a ,



Multiple Fields


yes you can do that, you can have a house, group, rank, mood, or anything you want. Since i used an array its quite easy. I'm using Peter's HP images just for the example, use your own !




//Mood & House Addon

var mp_AddOption = [

          ["Mood:", "M0", "mood", "Please select Your Mood", "None", "personaltext", [

                    ["none","Mood"],
                    ["http://s2.images.proboards.com/smiley.gif", "Happy"],
                    ["http://s4.images.proboards.com/cheesy.gif", "Cheesy"],
                    ["http://s2.images.proboards.com/angry.gif", "Angry"],
                    ["http://s2.images.proboards.com/cry.gif", "Cry"] // Ref Note 1 *

                    ]
          ], // Ref Note 2 *


          ["House:", "H1", "hphouse", "Please select House", "None", "customtitle", [

                    ["none","House"],
                    ["http://www.pixeldepth.elixant.com/ProBoards/Harry_Potter/gryffindor.gif", "Gryffindor"],
                    ["http://www.pixeldepth.elixant.com/ProBoards/Harry_Potter/slytherin.gif", "Slytherin"],
                    ["http://www.pixeldepth.elixant.com/ProBoards/Harry_Potter/ravenclaw.gif", "Ravenclaw"] // Ref Note 1 *

                    ]
          ]
];




Note 2 : since its an array you just got to be alitle careful to remmber the , except for the last one.


Okay that wraps this up, its open source so you can use it in code requests, on your own boards, or anything and any part of the code can be used separately like you can use it without the main_AddOption(); or the mp_AddOption(); or you can use the code as it is, while its hosted, modify whatever and host it yourself, anything. You don't need to add my name, just make sure support.proboards.com is added somewhere in the code so they can come here if their are any bugs.

Special Thanks to Simie for hosting the Code and making this little status thingy