PB Profile Constructor

[Peter]

Please note: The JS file is hosted at webpost.net, you may use it from there, but due to bandwidth limitations, it would probably be better to host it yourself

First, i'll explain what it is, what it does, and how to use it, following with a few examples.

Basically what this is, is an object with a library of functions for coders who do not have enough coding knowledge to be able to create profile hacks. What this does is allows coders to create ProBoard hacks that add extra fields / drop downs to the modify profile page, and shows the information in the mini profile (all pages) and bio. There are various options that can be changed which will be explain.

---

First, we have to place the Javascript file into the global header, this is so the file can be loaded before it is used, and so that it is on every page.

Settings

There are various settings that can be set before you create your extra profile objects:

• PBProfile.storage
  This tells the script which field it should use to store the information. By default it is set to the personal text field, but it has been tested on signature and custom title. It will most likely work with most of the fields. It hasn't been setup to work with the URL field, but you can easily code in support for that.
  
  To change it to something else instead of the default, we do...
  
  PBProfile.storage = "customtitle";
  
  That means the data will be stored in the custom title field.
  
  
• PBProfile.display_storage
  If you would much rather hide the storage element, then this will hide the whole row for that element. So by default it is set to true, so this will hide the personal text field and row. Use a true or false value like this...
  
  PBProfile.display_storage = false;
  
  That will keep the personal text field displayed.
  
  
• PBProfile.clear
  This setting is incase you would like the storage element to be cleared and only used to store the data, by default it is set to false. Use it like this...
  
  PBProfile.clear = true;
  
  
• PBProfile.chars
  This is an object, it holds the characters that split the data up, it uses a delimiter to separate the user value from the data value, and 3 other chars.
  
  delimiter = separate the user value from the data value.
  id_delimiter = So we can separate the id from the data value.
  open = opening character to be placed at the start of the data value
  end = closing character to be placed at the end of the data string
  
  It's important that you do this correctly. If you are unsure, then leave it as default. There are 2 ways we can change the characters...
  
  
  PBProfile.chars = {
      delimiter: "::", id_delimiter: ":", open: "[", end: "]"
  };
  
  Or...
  
  
  PBProfile.chars.delimiter = "::";
  PBProfile.chars.id_delimiter = ":";
  PBProfile.chars.open = "[";
  PBProfile.chars.end = "]";
  
  It is recommended you leave it as default though.
  

Ok, so that is the settings. You do not have to change any if you wish, it is all setup to go.

Creating

So here comes the main part, and that is actually creating the extra profile elements.

In this example I will show you how to create a simple text field.

I'll show you the code first, and then will explain it.


PBProfile.create({
    modify_position: "sex",
    bio_position: "posts",
    mini_pro: true,
    name: "A Field:",
    description: "This is a new field .",
    access: "all",
    elem: {
        element: "input", type: "text"
    }
});

That little block of code does all the work, it creates the new field called "A Field" above the gender drop down. It allows all users to access it.

modify_position:
This is the position of the new profile element, it will be place above the element you specify. All you have to do is to look in the source of the modify profile page to get the name of the element. So if I wanted it above the signature, I would use...

modify_position: "signature",

bio_position:
This is the position of the row in the profile bio (view profile page). It will add the information above the row you specify. So in this case, I wanted to place it above the posts row, so I used posts. If I wanted it above the location row I would do...

bio_position: "location",

mini_pro:
This is optional, if you don't wish to have the information displayed in the mini profile (all pages), then you can either not add it, or set it to false.

mini_pro: false;

name:
This is the name of your new feature. This is displayed in the modify profile, bio and mini profile (if set).

description:
This is the description of your new profile feature, it will show the description like the other modify profile features. This only can be text, no HTML (though you can change it if you wish).

access:
If you want to limit access to only certain users (staff for example), then you can provide an array like so...

access: ["admin", "username2", "username3"],

All users in that array will be able to access the element so they can edit it.

If you want it to be accessed by all users, then you just set it to "all".

elem:
This is an important one, this tells the script what element to create.

elem: {
    element: "input", type: "text"
}

element: This is the type of element you want to create. It can be a input field, or a drop down (select). Check the examples below to see how to do a drop down.

type: This is for fields, you don't really need to specify the type, as by default it will be set to a text field, but it's good to set it.

Now, you can also apply additional attributes. Like this..

element: "input", type: "text", maxLength: 10, size: 35

That will create a text field that has a max length of 10 characters, and is set to a size of 35. You can apply a default value if you wished...

element: "input", type: "text", maxLength: 10, size: 35, value: "value here"

If you do create a drop down element, then you need to specify the options list like this...

elem: {
   element: "select",
   options: ["Happy", "Sad", "Angry"]
}

That's it basically, you can create more then 1 element, just create another block for another element.

---

Examples

Below are a few examples of how to use it. This JS file must be placed in the Global header...

<script type="text/javascript" src="http://pixeldepth.net/proboards/profile/PB_Profile_lib.js"></script>

You can use it from there, or if you like you can upload it to your own host.

- Mood Hack

<script type="text/javascript">
<!--

PBProfile.create({
    modify_position: "sex",
    bio_position: "posts",
    mini_pro: true,
    name: "Mood:",
    description: "Select a mood from the drop down list.",
    access: "all",
    elem: {
        element: "select",
        options: ["Happy", "Sad", "Angry", "Cheerful", "Joyful"]
    }
});

//-->
</script>

---

- Fav Food

<script type="text/javascript">
<!--

PBProfile.create({
    modify_position: "personaltext",
    bio_position: "posts",
    name: "Fav. Food:",
    description: "Select a fav. food.",
    access: "all",
    elem: {
        element: "select",
        options: ["Pizza", "Curry", "Chips"]
    }
});

//-->
</script>

---

- Wins / Losses

<script type="text/javascript">
<!--

PBProfile.storage = "customtitle";

PBProfile.create({
    modify_position: "customtitle",
    bio_position: "location",
    mini_pro: true,
    name: "Wins:",
    description: "Set this users total wins.",
    access: "admin",
    elem: {
        element: "input", type: "text", maxLength: 3, size: 32
    }
});

PBProfile.create({
    modify_position: "customtitle",
    bio_position: "location",
    mini_pro: true,
    name: "Losses:",
    description: "Set this users total losses.",
    access: "admin",
    elem: {
        element: "input", type: "text", maxLength: 3, size: 32
    }
});

//-->
</script>

Any bugs, let me know.

This is open source, so you can extend and modify it as you wish. Just read the notice in the JS file.

[CrAzY_J]

You're like santa claus, spoiling the coders

great script peter, I'm sure tons of profile codes will come out now.
We just have to wait for the PB admins to make a hidden textfield in the profile area for us to save all the data.

[Peter]

crazyj2 said:

You're like santa claus, spoiling the coders

great script peter, I'm sure tons of profile codes will come out now.
We just have to wait for the PB admins to make a hidden textfield in the profile area for us to save all the data.

lol

Thanks, hopefully we won't see too many profile scripts submitted

[g0alieb0y]

Great Idea! It works in IE too!

Edit: A bad thing is that we can change the rows of a text area and stuff. *hint-hint*

Edit-Edit: Maybe you should add a feature to "bio_position" that is called "last" so it will be the last thing in your bio.

[hpmad]

*huggles* awesomeness!

[hey]

Someone has too much time on their hands...

J/k! Nice work.

[Maxpower57]

It makes me think i should do something with my life.. eh, oh well

Nice work there

[g0alieb0y]

You should really sticky this.

[Ross]

It's already linked to in the 'Free Snippets' sticky. It doesn't need to be stickyed itself

[Anselm]

It's a great code Peter, and it's actually not that long. And there's no script src in there either. Well done!

[g0alieb0y]

Yes there is.

webpost.net/pb/pblibrary/PB_Profile_lib.js

[Anselm]

I haven't read it properly in that case. I misunderstood something. It's confusing.

[Peter]

transfermktforum said:

I haven't read it properly in that case. I misunderstood something. It's confusing.

I think it's very simple

[jamesbowater]

I would just like to thank you. This post has helped me so much on my site. You have inspired me to try (but most likey fail) to learn Javascript. Do you know of any good tutorials? Thank you once again.

[Cow Pie]

Links to Resources --- its a sticky here