Blogger: Goodies Inside Blogger Javascript !

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

Cookies

• 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.

Time

• 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 !!
.