Social Network Javascript (BETA)
Common Public Attribution License Version 1.0.
This feature is subject to the Common Public Attribution License Version 1.0 (the 'License'); you may not use this feature except in compliance with the License. You may obtain a copy of the License at http://developers.facebook.com/fbopen/cpal.html. The License is based on the Mozilla Public License Version 1.1 but Sections 14 and 15 have been added to cover use of software over a computer network and provide for limited attribution for the Original Developer. In addition, Exhibit A has been modified to be consistent with Exhibit B.Software distributed under the License is distributed on an 'AS IS' basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License. The Original Code is Facebook Open Platform. The Original Developer is the Initial Developer. The Initial Developer of the Original Code is Facebook, Inc. All portions of the code written by Facebook, Inc. are Copyright © 2006-2008 Facebook, Inc. All Rights Reserved.
SNJS allows developers who create applications for the Bebo Application Platform to use javascript in their apps. This will allow app developers to embed javascript in the SNML that they use to build their apps, helping them to create better and more user friendly apps. SNJS also provides AJAX support and an easy to use Animation library.
I. Implementation Details
The main idea behind SNJS is to create a sandbox for every application, so that the javascript of one application does not have access to
anything outside of its own scope. This includes the objects and variables created by other applications and those by Bebo's javascript.
SNJS works by parsing the provided javascript and prepending all the identifiers with a unique id for every application. This creates a virtual scope
for every application that runs on Bebo's platform. The document content can then be modified using the provided javascript objects and functions.
For example, the following
<div id="replace">Hello .... </div>
<script>
document.getElementById('replace').setTextValue('Hello John!');
</script>
gets transformed to
<div id="app12345678_replace">Hello .... </div>
<script>
a12345678_document.getElementById("replace").setTextValue("Hello John!");
</script>
II. SNJS DOM Object
i. Here is a list of properties in JavaScript and how they translate to SNJS:
| JavaScript | SNJS getter | SNJS setter | Description | |
|---|---|---|---|---|
| parentNode | getParentNode | |||
| nextSibling | getNextSibling | |||
| previousSibling | getPreviousSibling | |||
| firstChild | getFirstChild | |||
| lastChild | getLastChild | |||
| childNodes | getChildNodes | Returns a snapshot array of childNodes | ||
| innerHTML | n/a | setInnerFBML | Note that this can throw an error if you pass a string directly. Use Sn:js-string to create the string first then pass that variable. | |
| innerHTML | n/a | setInnerXHTML | Allows you to set the innerHTML of an element by passing in a string of XHTML. The XHTML is sanitized according to SNML rules and then placed into the document. | |
| innerText/textContent | n/a | setTextValue | Not exactly like setInnerFBML as this will only allow text (no HTML)! It will remove all childNodes of the element it is called on. | |
| form | getForm | Doesn't work, use document.getElementById('formid') instead | ||
| action | getAction | setAction | ||
| value | getValue | setValue | ||
| href | getHref | setHref | ||
| target | getTarget | setTarget | ||
| src | getSrc | setSrc | ||
| className | getClassName | setClassName | ||
| tagName | getTagName | |||
| id | getId | setId | ||
| dir | getDir | setDir | ||
| checked | getChecked | setChecked | ||
| clientWidth | getClientWidth | |||
| clientHeight | getClientHeight | |||
| offsetWidth | getOffsetWidth | |||
| offsetHeight | getOffsetHeight | |||
| n\a | getAbsoluteTop | Returns the elements absolute position relative to the top of the page. Useful because of lack of offsetParent support. | ||
| n\a | getAbsoluteLeft | Same as getAbsoluteTop, but horizontally. | ||
| scrollTop | getScrollTop | setScrollTop | ||
| scrollLeft | getScrollLeft | setScrollLeft | ||
| scrollHeight | getScrollHeight | |||
| scrollWidth | getScrollWidth | |||
| tabIndex | getTabIndex | setTabIndex | ||
| title | getTitle | setTitle | ||
| name | getName | setName | ||
| cols | getCols | setCols | ||
| rows | getRows | setRows | ||
| accessKey | getAccessKey | setAccessKey | ||
| disabled | getDisabled | setDisabled | ||
| readOnly | getReadOnly | setReadOnly | ||
| type | getType | setType | ||
| selectedIndex | getSelectedIndex | setSelectedIndex | ||
| selected | getSelected | setSelected | ||
| location | n/a | setLocation | ||
| style | getStyle | setStyle | ||
| n/a | getRootElement | used as document.getRootElement - returns the top-level element of your profile box or canvas page |
ii. Additional Methods
Additional methods for manipulating CSS classes supported by SNJS.-
addClassName(className)
Adds a class name to the className string if it isn't already present.
-
removeClassName(className)
Removes a class name from the className string if it present.
-
toggleClassName(className)
If a class name exists, it removes it. If it doesn't exist it adds it.
-
hasClassName(className)
Returns true if the class name exists or false otherwise.
iii. Additional Notes:
- You need to camelize style names
- Use 'px' notation when referring to positions
III. Banned Properties
The following properties are not allowed in SNJS and will be removed from the javascript on parsing:
- __proto__
- __parent__
- constructor
- caller
- watch
- __defineGetter__
- __defineSetter__
IV. Canvas Pages vs Application Profile Modules
There are some slight differences in what can be done with SNJS on application profile modules compared to canvas pages.
-
Javascript in application profile modules is not loaded until the first active user trigered event. An active event can be one of the following:
- onfocus
- onclick
- onmousedown
- onmouseup
- ondblclick
- onchange
- onreset
- onselect
- onsubmit
- onkeydown
- onkeypress
- onkeyup
-
The following events are not supported on application profile modules:
- onblur
- onload
- onmouseover
- onmouseout
- onmousemove
- onselectstart
- External javascript includes are not supported on application profile modules. For more details see SNJS External Scripts
V. Events
i. Additional Methods
In addition to the W3C event methods, SNJS also supports the following additional methods-
listEventListeners(eventName)
Returns an array of handles of all events that have been added to this event. -
purgeEventListeners(eventName)
Removes all event listeners for a given event.
-
stopPropagation
Prevents this event from propagating to any more elements further up in the DOM. -
preventDefault
Cancels the default behavior of this event without stopping propagation. -
getId
Retrieve the ID of the object that fired the event.
ii. Additional Notes
- The addEventListener method does not support the useCapture parameter.
VI. SNML Blocks
The <sn:js-string> tag can be used to return a block of snml into a javascript variable rather than being rendered on the page. This can be used in conjuction with setInnerFBML to set a pre-rendered SNML string. SNML blocks can also be retrieved from SNJS Ajax calls with the returnType set to Ajax.FBML