Blogger: Goodies Inside Blogger Javascript !

Friday, January 05, 2007

Today, i spent time looking at the (unnoticed) javascripts files that Blogger defaultly included in your blog.

I say that it was unnoticed, in terms that maybe just a few person, who will look at it completely, and maybe even play with it ! And that's including me :P

But now, with the recent EQ in Taiwan, i had experienced the slowness of my blog, even that i've reduced the size of my javascript. So i tried to eliminate some javascripts that i won't be needed anymore.

And guess what ? Blogger already GIVE US all the basic functions that WE NEED !! My gawd ! I wish i dwelled into these things earlier !

You see, currently Blogger provided us with 3 handy javascripts, which i'm sure it'll overcome the cross-browsers problem, it's GOOGLE's ! And the javascripts are :

- common.js
- dom.common.js
- cookies.common.js

Now i'm gonna REVEAL all the GOODIES inside these, and then you can GET RID of those prototype or framework or anything that you used :P (i'm planning to do so in the next version of zlyther ;) so stay tuned ... ) Note that i don't list all of the functions. But i guess i list almost all of it ! Brilliant Google indeed :P


1. common.js


  • function SetCookie(name, value, opt_max_age, opt_path, opt_domain)
    Use for: Setting a cookie.

  • function ExpireCookie(name, opt_path, opt_domain)
    User for: Expiring a cookie.

  • function GetCookie(name)
    Use for: Returning the value for the first cookie with the given name.

  • function Now()
    Use for: Returning the current Time.

Dynamic HTML/DOM utilities
  • function GetElement(win, id)
    Use for: Getting a element by its id, and throws an exception if it's null

  • function GetParentNode(n)
    Use for: Getting the parent of a html element.

  • function GetAttribute(node, attribute)
    Use for: Getting attribute value of a DOM node

  • function SetInnerHTML(win, id, html)
    Use for: Setting inner html of a html element

  • function GetInnerHTML(win, id)
    Use for: Getting inner-html of a html element

  • ClearInnerHTML(win, id)
    Use for: Clearing inner html of a html element

  • function SetCssStyle(win, id, name, value)
    Use for: Setting a CSS style of an element

  • function GetStyleProperty(style, name)
    Use for: Getting CSS property from a style attribute string

  • function ShowElement(el, show)
    Use for: Showing/hiding an element.

  • function ShowBlockElement(el, show)
    Use for: Showing/hiding a block element. The previous ShowElement() doesn't work if object has an initial class with display:none

  • function ShowInlineElement(el, show)
    Use for: Showing/hiding an inline element. The previous ShowElement() doesn't work when an element starts off display:none.

  • function SetButtonText(button, text)
    Use for: Setting the text of a button. This is to get around a bug in mozilla, where we can't set the text of a button by setting innerHTML.

  • function AppendNewElement(win, parent, tag)
    Use for: Appending a new HTML element to a HTML node.

  • function FindChildWithID(parent, id)
    Use for: Finding the child with the given ID, or null if there is node. This does not search the children's children.

  • function CreateDIV(win, id)
    Use for: Creating a new DIV (append it to the end of the document)

  • function Tr(win, tds)
    Use for: Creating a new TR containing the given td's

  • function Td(win, opt_colspan)
    Use for: Creating a new TD, with an optional colspan

  • function HasClass(el, cl)
    Use for: Checking if an element has a given class

  • function AddClass(el, cl)
    Use for: Adding a class to element

  • function RemoveClass(el, cl)
    Use for: Removing a class from an element

  • function GetElementsBySelector(root, selector)
    Use for: This method is a generalization of the DOM method "getElementsByTagName"

Window/screen utilities
Note from the js: TODO: these should be renamed (e.g. GetWindowWidth to GetWindowInnerWidth and moved to geom.js) Must keep an eye of the name changes, but i guess it'll took a long time to be done :P
  • - function GetPageOffsetLeft(el)
    - function GetPageOffsetTop(el)
    - function GetPageOffsetRight(el)
    - function GetPageOffsetBottom(el)
    - function GetPageOffset(el)
    Use for: Getting page offset of an element

  • - function GetScrollTop(win)
    - function GetScrollLeft(win)
    Use for: Getting the y (Top) and x (Left) position scroll offset.

  • function IsScrollAtEnd(win, opt_isHoriz)
    Use for: Checking if window scrollbar has reached its maximum offset

  • function ScrollTo(win, el, position)
    Use for: Scrolling window to pos (position: 0 = top, 0.5 = middle, 1 = bottom)

  • function ScrollIntoView(win, el, alignment)
    Use for: Scrolling so that as far as possible the entire element is in view.

  • - function GetWindowWidth(win)
    - function GetWindowHeight(win)
    - function GetAvailScreenWidth(win)
    - function GetAvailScreenHeight(win)
    - function GetNiceWindowHeight(win)
    Use for: Getting the window dimensions

  • function GetCenteringLeft(win, width)
    Use for: Horizontally centering a new window of the given width in the available screen. Set the new window's distance from the left of the screen equal to this function's return value.

  • function GetCenteringTop(win, height)
    Use for: Vertically centering a new window of the given height in the available screen. Set the new window's distance from the top of the screen equal to this function's return value.

  • function Popup(url, opt_name, opt_width, opt_height, opt_center, opt_hide_scrollbars, opt_noresize, opt_blocked_msg)
    Use for: Opening a child popup window that has no browser toolbar/decorations.

  • function OpenWindow(win, url, opt_name, opt_features, opt_blocked_msg)
    Use for: Opening a new window. Returns the new window handle.

String utilities
  • function HtmlEscape(str)
    Use for: Converting text to HTML format. For efficiency, we just convert '&', '<', '>' characters.

  • function HtmlUnescape(str)
    Use for: Converting html entities to plain text. It covers the most common named entities and numeric entities. It does not cover all named entities -- it covers &{lt,gt,amp,quot,nbsp}; but does not handle some of the more obscure ones like &{ndash,eacute};.

  • function HtmlWhitespaceEscape(str)
    Use for: Replacing multiple spaces with to retain whitespace formatting in addition to escaping '&', '<', '>'.

  • function QuoteEscape(str)
    Use for: Escape double quote '"' characters in addition to '&', '<', '>' so that a string can be included in an HTML tag attribute value within double quotes.

  • function ToJSString(s)
    Use for: Converting a string to a javascript string literal. This function has the property that the return value is also already html escaped, so the output can be embedded in an html handler attribute.

  • -function CollapseWhitespace(str)
    - function StripNewlines(str)
    - function CanonicalizeNewlines(str)
    - function HtmlifyNewlines(str)
    - function NormalizeSpaces(str)
    Use for: Converting multiple ws chars to a single space, and strips leading and trailing ws

  • function UrlEncode(str)
    Use for: URL encodes the string.

  • function Trim(str)

  • function EndsWith(str, suffix)

  • function IsEmpty(str)
    Use for: Checking if a string is empty

  • function IsLetterOrDigit(ch)
    Use for: Checking if a character is a letter

  • function IsSpace(ch)
    Use for: Checking if a character is a space character

  • function NormalizeText(str)
    Use for: Converting any instances of "\r" or "\r\n" style EOLs into "\n" (Line Feed), and also trim the extra newlines and whitespaces at the end.

  • function HtmlEscapeInsertWbrs(str, n, chars_to_break_after, chars_to_break_before)
    Use for: Inserting (word break tag) after every n non-space chars and/or after or before certain special chars. The input string should be plain text that has not yet been HTML-escaped.

  • function CompareStringsIgnoreCase(s1, s2)
    Use for: Comparing case-insensitive string

TextArea utilities
  • function GetCursorPos(win, textfield)
    Use for: Getting the cursor pos in a text area. Returns -1 if the cursor pos cannot be determined or if the cursor out of the textfield.

  • function SetCursorPos(win, textfield, pos)
    Use for: Setting the cursor pos in a text area.

Array utilities
  • function FindInArray(array, x)
    Use for: Finding an item in an array, returns the key, or -1 if not found

  • function InsertArray(array, x)
    Use for: Inserting an item into an array, if it's not already in the array

  • function DeleteArrayElement(array, x)
    Use for: Deleting an element from an array

  • function CopyArray(array)
    Use for: Copying a flat array

  • function CloneObject(x)
    Use for: Cloning an object (recursively)

  • function CloneEvent(ev)
    Use for: Cloning an event; cannot use CloneObject(event) because it suffers from infinite recursion. Thus, only a subset of the event properties are cloned.

  • function GetEventTarget(/*Event*/ ev)
    Use for: Getting an event. Note: Event is not a type in IE; IE uses Object for events

  • function CancelEvent(/*Event*/ ev)
    Use for: Canceling an event

Email address parsing
  • function ParseAddress(addr)
    Use for: Parsing an email address of the form "name" address into [name, address]

  • - function GetAddress(address)
    - function GetAddressUsername(address)
    - function GetPersonal(address)
    - function GetPersonalElseUsername(address)
    Use for: Getting a spesific field of email

  • function EmailsToArray(str)
    Use for: Converting a string containing list of email addresses into an array of strings

  • function CleanEmailAddress(str)
    Use for: Cleaning up email address which include remove extra spaces, and surround name with quotes if it contains special characters to check if we need " quotes. Note: do not use /g in the regular expression, otherwise the regular expression cannot be reusable.

2. dom.common.js
  • function toggleDisplay(o)
    Use for: Will toggle the display property of the style object for any DOM element or object that supports style as a property. Warning: This'll wreak havoc if applied to elements.

  • - function hideElement(o)
    - function showElement(o)
    Use for: Hiding an element from view. Showing an element that was hidden from view.

  • function getElement(id)
    Use for: Returning an element by its ID or shows an alert if it can't be found.

  • function setInnerHTML(id, html)
    Use for: Setting the innerHTML of an element or shows an alert if can't be set.

  • function setCssStyle(id, name, value)
    Use for: Setting the style of an element by its id or shows an alert if can't be set.

  • function getStyle(el, style)
    Use for: Getting the computed style of any object. WARNING: Produces unexpected results in Safari.

  • function getStyleAttribute(node)
    Use for: Returning the style attribute of the specified node.

  • function showProps(o)
    Use for: Displaying all the properties for a given element (this method is using document.write !!)

  • - function setIFrameEvent(iframe, eventName, func)
    - function setIFrameBody(iframe, strStyle, innerHtml)
    - function getIFrameDocument(iframe)
    - function getIFrame(strId)
    Use for: IFraming.

  • - function createElementandAppend(nodeName, strId, appendTo)
    - function createElementandInsertBefore(nodeName, strId, appendTo, sibling)
    Use for: Creating an element and appending/inserting before.

  • function getXY(el)
    Use for: Returning the position of any element as an object.

3. cookies.common.js
  • function setCookie(name, value, domain, expires, path, secure)
    Use for: Setting a Cookie with the given name and value.

  • function getCookie(name)
    Use for: Getting the value of the specified cookie.

So that's about it folks ! I surelly gonna work my way on maximizing this, and because of that i think i can remove the prototype and other thing :P

And in final words, hereby i challenged all of you the 'Bleet' to use it to your extent !!


Aditya said...

Much appreciated! :)

I actually had seen these functions pop-up in Firebug whenever I debug my pages' Javascript, but never bothered to actually sit and understand what they do (I know the names say it all, but I'm quite lazy! :P )

So thanks for doing all the hardwork! :D This will make working with the DOM a lot faster now.

Efendi said...

yeah, i wish now all the blogger will use those javascript :P

i mean, a simple one is the peek-a-boo, while blogger has made one, we go all the way re-inventing the wheel :P

well, i'll be porting my javascript too soon ^^

About Me

My Photo
An ordinary, a bit 'geeky' guy, who enjoy blogging about all unique things across the internet world. Blogs about the blogosphere, scripts, fun, games, interesting stuffs, etc. Currently staying and working in Singapore.
View my complete profile