From 5444d2457f5f9baf374f5e0140ad63bb4e61acee Mon Sep 17 00:00:00 2001 From: Anand Chitipothu Date: Thu, 10 Dec 2009 20:18:07 +0530 Subject: [PATCH] generate jquery.wmd.js and jquery.wmd.min.js by combining all js files --- Makefile | 10 + jquery.wmd.js | 3667 +++++++++++++++++++++++++++++++++++++++++++++ jquery.wmd.min.js | 242 +++ jsmin.py | 218 +++ readme.txt | 168 +-- wmd-test.html | 4 +- 6 files changed, 4209 insertions(+), 100 deletions(-) create mode 100644 Makefile create mode 100644 jquery.wmd.js create mode 100644 jquery.wmd.min.js create mode 100644 jsmin.py diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..fb97753 --- /dev/null +++ b/Makefile @@ -0,0 +1,10 @@ + +JSFILES=jquery-wmd-plugin.js wmd.js showdown.js + +all: jquery.wmd.js jquery.wmd.min.js + +jquery.wmd.js: $(JSFILES) + cat $(JSFILES) > $@ + +jquery.wmd.min.js: $(JSFILES) + cat $(JSFILES) | python jsmin.py > $@ diff --git a/jquery.wmd.js b/jquery.wmd.js new file mode 100644 index 0000000..ba2234c --- /dev/null +++ b/jquery.wmd.js @@ -0,0 +1,3667 @@ +/* + * jQuery wmd plugin. + */ + +(function($) { + var counter = 0; + + $.fn.wmd = function(_options) { + this.each(function() { + var defaults = {"preview": true}; + var options = $.extend({}, _options || {}, defaults); + + if (!options.button_bar) { + options.button_bar = "wmd-button-bar-" + counter; + $("
") + .attr("class", "wmd-button-bar") + .attr("id", options.button_bar) + .insertBefore(this); + } + + if (typeof(options.preview) == "boolean" && options.preview) { + options.preview = "wmd-preview-" + counter; + $("
") + .attr("class", "wmd-preview") + .attr("id", options.preview) + .insertAfter(this); + } + + if (typeof(options.output) == "boolean" && options.output) { + options.output = "wmd-output-" + counter; + $("
") + .attr("class", "wmd-output") + .attr("id", options.output) + .insertAfter(this); + } + + this.id = this.id || "wmd-input-" + counter; + options.input = this.id; + + if (window.console) + console.log(options); + + setup_wmd(options); + counter++; + }); + }; +})(jQuery); +function setup_wmd(wmd_options) { + +var Attacklab = Attacklab || {}; +wmd_options = wmd_options || top.wmd_options || {}; + +Attacklab.wmdBase = function(){ + + // A few handy aliases for readability. + var wmd = Attacklab; + var doc = top.document; + var re = top.RegExp; + var nav = top.navigator; + + // Some namespaces. + wmd.Util = {}; + wmd.Position = {}; + wmd.Command = {}; + wmd.Global = {}; + wmd.buttons = {}; + + wmd.showdown = top.Attacklab && top.Attacklab.showdown; + + var util = wmd.Util; + var position = wmd.Position; + var command = wmd.Command; + var global = wmd.Global; + + + // Used to work around some browser bugs where we can't use feature testing. + global.isIE = /msie/.test(nav.userAgent.toLowerCase()); + global.isIE_5or6 = /msie 6/.test(nav.userAgent.toLowerCase()) || /msie 5/.test(nav.userAgent.toLowerCase()); + global.isIE_7plus = global.isIE && !global.isIE_5or6; + global.isOpera = /opera/.test(nav.userAgent.toLowerCase()); + global.isKonqueror = /konqueror/.test(nav.userAgent.toLowerCase()); + + + // ------------------------------------------------------------------- + // YOUR CHANGES GO HERE + // + // I've tried to localize the things you are likely to change to + // this area. + // ------------------------------------------------------------------- + + // The text that appears on the upper part of the dialog box when + // entering links. + var imageDialogText = wmd_options.imageDialogText || "

Enter the image URL.

You can also add a title, which will be displayed as a tool tip.

Example:
http://wmd-editor.com/images/cloud1.jpg \"Optional title\"

"; + var linkDialogText = wmd_options.linkDialogText || "

Enter the web address.

You can also add a title, which will be displayed as a tool tip.

Example:
http://wmd-editor.com/ \"Optional title\"

"; + + // The default text that appears in the dialog input box when entering + // links. + var imageDefaultText = "http://"; + var linkDefaultText = "http://"; + + // The location of your button images relative to the base directory. + var imageDirectory = "images/"; + + // Some intervals in ms. These can be adjusted to reduce the control's load. + var previewPollInterval = 500; + var pastePollInterval = 100; + + // The link and title for the help button + var helpLink = wmd_options.helpLink || "http://wmd-editor.com/"; + var helpHoverTitle = wmd_options.helpHoverTitle || "WMD website"; + var helpTarget = wmd_options.helpTarget || "_blank"; + + // ------------------------------------------------------------------- + // END OF YOUR CHANGES + // ------------------------------------------------------------------- + + // A collection of the important regions on the page. + // Cached so we don't have to keep traversing the DOM. + wmd.PanelCollection = function(){ + this.buttonBar = doc.getElementById(wmd_options.button_bar || "wmd-button-bar"); + this.preview = doc.getElementById(wmd_options.preview || "wmd-preview"); + this.output = doc.getElementById(wmd_options.output || "wmd-output"); + this.input = doc.getElementById(wmd_options.input || "wmd-input"); + }; + + // This PanelCollection object can't be filled until after the page + // has loaded. + wmd.panels = undefined; + + // Internet explorer has problems with CSS sprite buttons that use HTML + // lists. When you click on the background image "button", IE will + // select the non-existent link text and discard the selection in the + // textarea. The solution to this is to cache the textarea selection + // on the button's mousedown event and set a flag. In the part of the + // code where we need to grab the selection, we check for the flag + // and, if it's set, use the cached area instead of querying the + // textarea. + // + // This ONLY affects Internet Explorer (tested on versions 6, 7 + // and 8) and ONLY on button clicks. Keyboard shortcuts work + // normally since the focus never leaves the textarea. + wmd.ieCachedRange = null; // cached textarea selection + wmd.ieRetardedClick = false; // flag + + // Returns true if the DOM element is visible, false if it's hidden. + // Checks if display is anything other than none. + util.isVisible = function (elem) { + + if (window.getComputedStyle) { + // Most browsers + return window.getComputedStyle(elem, null).getPropertyValue("display") !== "none"; + } + else if (elem.currentStyle) { + // IE + return elem.currentStyle["display"] !== "none"; + } + }; + + + // Adds a listener callback to a DOM element which is fired on a specified + // event. + util.addEvent = function(elem, event, listener){ + if (elem.attachEvent) { + // IE only. The "on" is mandatory. + elem.attachEvent("on" + event, listener); + } + else { + // Other browsers. + elem.addEventListener(event, listener, false); + } + }; + + + // Removes a listener callback from a DOM element which is fired on a specified + // event. + util.removeEvent = function(elem, event, listener){ + if (elem.detachEvent) { + // IE only. The "on" is mandatory. + elem.detachEvent("on" + event, listener); + } + else { + // Other browsers. + elem.removeEventListener(event, listener, false); + } + }; + + // Converts \r\n and \r to \n. + util.fixEolChars = function(text){ + text = text.replace(/\r\n/g, "\n"); + text = text.replace(/\r/g, "\n"); + return text; + }; + + // Extends a regular expression. Returns a new RegExp + // using pre + regex + post as the expression. + // Used in a few functions where we have a base + // expression and we want to pre- or append some + // conditions to it (e.g. adding "$" to the end). + // The flags are unchanged. + // + // regex is a RegExp, pre and post are strings. + util.extendRegExp = function(regex, pre, post){ + + if (pre === null || pre === undefined) + { + pre = ""; + } + if(post === null || post === undefined) + { + post = ""; + } + + var pattern = regex.toString(); + var flags = ""; + + // Replace the flags with empty space and store them. + // Technically, this can match incorrect flags like "gmm". + var result = pattern.match(/\/([gim]*)$/); + if (result === null) { + flags = result[0]; + } + else { + flags = ""; + } + + // Remove the flags and slash delimiters from the regular expression. + pattern = pattern.replace(/(^\/|\/[gim]*$)/g, ""); + pattern = pre + pattern + post; + + return new RegExp(pattern, flags); + } + + + // Sets the image for a button passed to the WMD editor. + // Returns a new element with the image attached. + // Adds several style properties to the image. + util.createImage = function(img){ + + var imgPath = imageDirectory + img; + + var elem = doc.createElement("img"); + elem.className = "wmd-button"; + elem.src = imgPath; + + return elem; + }; + + + // This simulates a modal dialog box and asks for the URL when you + // click the hyperlink or image buttons. + // + // text: The html for the input box. + // defaultInputText: The default value that appears in the input box. + // makeLinkMarkdown: The function which is executed when the prompt is dismissed, either via OK or Cancel + util.prompt = function(text, defaultInputText, makeLinkMarkdown){ + + // These variables need to be declared at this level since they are used + // in multiple functions. + var dialog; // The dialog box. + var background; // The background beind the dialog box. + var input; // The text box where you enter the hyperlink. + + + if (defaultInputText === undefined) { + defaultInputText = ""; + } + + // Used as a keydown event handler. Esc dismisses the prompt. + // Key code 27 is ESC. + var checkEscape = function(key){ + var code = (key.charCode || key.keyCode); + if (code === 27) { + close(true); + } + }; + + // Dismisses the hyperlink input box. + // isCancel is true if we don't care about the input text. + // isCancel is false if we are going to keep the text. + var close = function(isCancel){ + util.removeEvent(doc.body, "keydown", checkEscape); + var text = input.value; + + if (isCancel){ + text = null; + } + else{ + // Fixes common pasting errors. + text = text.replace('http://http://', 'http://'); + text = text.replace('http://https://', 'https://'); + text = text.replace('http://ftp://', 'ftp://'); + + if (text.indexOf('http://') === -1 && text.indexOf('ftp://') === -1 && text.indexOf('https://') === -1) { + text = 'http://' + text; + } + } + + dialog.parentNode.removeChild(dialog); + background.parentNode.removeChild(background); + makeLinkMarkdown(text); + return false; + }; + + // Creates the background behind the hyperlink text entry box. + // Most of this has been moved to CSS but the div creation and + // browser-specific hacks remain here. + var createBackground = function(){ + + background = doc.createElement("div"); + background.className = "wmd-prompt-background"; + style = background.style; + style.position = "absolute"; + style.top = "0"; + + style.zIndex = "1000"; + + // Some versions of Konqueror don't support transparent colors + // so we make the whole window transparent. + // + // Is this necessary on modern konqueror browsers? + if (global.isKonqueror){ + style.backgroundColor = "transparent"; + } + else if (global.isIE){ + style.filter = "alpha(opacity=50)"; + } + else { + style.opacity = "0.5"; + } + + var pageSize = position.getPageSize(); + style.height = pageSize[1] + "px"; + + if(global.isIE){ + style.left = doc.documentElement.scrollLeft; + style.width = doc.documentElement.clientWidth; + } + else { + style.left = "0"; + style.width = "100%"; + } + + doc.body.appendChild(background); + }; + + // Create the text input box form/window. + var createDialog = function(){ + + // The main dialog box. + dialog = doc.createElement("div"); + dialog.className = "wmd-prompt-dialog"; + dialog.style.padding = "10px;"; + dialog.style.position = "fixed"; + dialog.style.width = "400px"; + dialog.style.zIndex = "1001"; + + // The dialog text. + var question = doc.createElement("div"); + question.innerHTML = text; + question.style.padding = "5px"; + dialog.appendChild(question); + + // The web form container for the text box and buttons. + var form = doc.createElement("form"); + form.onsubmit = function(){ return close(false); }; + style = form.style; + style.padding = "0"; + style.margin = "0"; + style.cssFloat = "left"; + style.width = "100%"; + style.textAlign = "center"; + style.position = "relative"; + dialog.appendChild(form); + + // The input text box + input = doc.createElement("input"); + input.type = "text"; + input.value = defaultInputText; + style = input.style; + style.display = "block"; + style.width = "80%"; + style.marginLeft = style.marginRight = "auto"; + form.appendChild(input); + + // The ok button + var okButton = doc.createElement("input"); + okButton.type = "button"; + okButton.onclick = function(){ return close(false); }; + okButton.value = "OK"; + style = okButton.style; + style.margin = "10px"; + style.display = "inline"; + style.width = "7em"; + + + // The cancel button + var cancelButton = doc.createElement("input"); + cancelButton.type = "button"; + cancelButton.onclick = function(){ return close(true); }; + cancelButton.value = "Cancel"; + style = cancelButton.style; + style.margin = "10px"; + style.display = "inline"; + style.width = "7em"; + + // The order of these buttons is different on macs. + if (/mac/.test(nav.platform.toLowerCase())) { + form.appendChild(cancelButton); + form.appendChild(okButton); + } + else { + form.appendChild(okButton); + form.appendChild(cancelButton); + } + + util.addEvent(doc.body, "keydown", checkEscape); + dialog.style.top = "50%"; + dialog.style.left = "50%"; + dialog.style.display = "block"; + if(global.isIE_5or6){ + dialog.style.position = "absolute"; + dialog.style.top = doc.documentElement.scrollTop + 200 + "px"; + dialog.style.left = "50%"; + } + doc.body.appendChild(dialog); + + // This has to be done AFTER adding the dialog to the form if you + // want it to be centered. + dialog.style.marginTop = -(position.getHeight(dialog) / 2) + "px"; + dialog.style.marginLeft = -(position.getWidth(dialog) / 2) + "px"; + + }; + + createBackground(); + + // Why is this in a zero-length timeout? + // Is it working around a browser bug? + top.setTimeout(function(){ + + createDialog(); + + var defTextLen = defaultInputText.length; + if (input.selectionStart !== undefined) { + input.selectionStart = 0; + input.selectionEnd = defTextLen; + } + else if (input.createTextRange) { + var range = input.createTextRange(); + range.collapse(false); + range.moveStart("character", -defTextLen); + range.moveEnd("character", defTextLen); + range.select(); + } + + input.focus(); + }, 0); + }; + + + // UNFINISHED + // The assignment in the while loop makes jslint cranky. + // I'll change it to a better loop later. + position.getTop = function(elem, isInner){ + var result = elem.offsetTop; + if (!isInner) { + while (elem = elem.offsetParent) { + result += elem.offsetTop; + } + } + return result; + }; + + position.getHeight = function (elem) { + return elem.offsetHeight || elem.scrollHeight; + }; + + position.getWidth = function (elem) { + return elem.offsetWidth || elem.scrollWidth; + }; + + position.getPageSize = function(){ + + var scrollWidth, scrollHeight; + var innerWidth, innerHeight; + + // It's not very clear which blocks work with which browsers. + if(self.innerHeight && self.scrollMaxY){ + scrollWidth = doc.body.scrollWidth; + scrollHeight = self.innerHeight + self.scrollMaxY; + } + else if(doc.body.scrollHeight > doc.body.offsetHeight){ + scrollWidth = doc.body.scrollWidth; + scrollHeight = doc.body.scrollHeight; + } + else{ + scrollWidth = doc.body.offsetWidth; + scrollHeight = doc.body.offsetHeight; + } + + if(self.innerHeight){ + // Non-IE browser + innerWidth = self.innerWidth; + innerHeight = self.innerHeight; + } + else if(doc.documentElement && doc.documentElement.clientHeight){ + // Some versions of IE (IE 6 w/ a DOCTYPE declaration) + innerWidth = doc.documentElement.clientWidth; + innerHeight = doc.documentElement.clientHeight; + } + else if(doc.body){ + // Other versions of IE + innerWidth = doc.body.clientWidth; + innerHeight = doc.body.clientHeight; + } + + var maxWidth = Math.max(scrollWidth, innerWidth); + var maxHeight = Math.max(scrollHeight, innerHeight); + return [maxWidth, maxHeight, innerWidth, innerHeight]; + }; + + // Watches the input textarea, polling at an interval and runs + // a callback function if anything has changed. + wmd.inputPoller = function(callback, interval){ + + var pollerObj = this; + var inputArea = wmd.panels.input; + + // Stored start, end and text. Used to see if there are changes to the input. + var lastStart; + var lastEnd; + var markdown; + + var killHandle; // Used to cancel monitoring on destruction. + // Checks to see if anything has changed in the textarea. + // If so, it runs the callback. + this.tick = function(){ + + if (!util.isVisible(inputArea)) { + return; + } + + // Update the selection start and end, text. + if (inputArea.selectionStart || inputArea.selectionStart === 0) { + var start = inputArea.selectionStart; + var end = inputArea.selectionEnd; + if (start != lastStart || end != lastEnd) { + lastStart = start; + lastEnd = end; + + if (markdown != inputArea.value) { + markdown = inputArea.value; + return true; + } + } + } + return false; + }; + + + var doTickCallback = function(){ + + if (!util.isVisible(inputArea)) { + return; + } + + // If anything has changed, call the function. + if (pollerObj.tick()) { + callback(); + } + }; + + // Set how often we poll the textarea for changes. + var assignInterval = function(){ + // previewPollInterval is set at the top of the namespace. + killHandle = top.setInterval(doTickCallback, interval); + }; + + this.destroy = function(){ + top.clearInterval(killHandle); + }; + + assignInterval(); + }; + + // Handles pushing and popping TextareaStates for undo/redo commands. + // I should rename the stack variables to list. + wmd.undoManager = function(callback){ + + var undoObj = this; + var undoStack = []; // A stack of undo states + var stackPtr = 0; // The index of the current state + var mode = "none"; + var lastState; // The last state + var poller; + var timer; // The setTimeout handle for cancelling the timer + var inputStateObj; + + // Set the mode for later logic steps. + var setMode = function(newMode, noSave){ + + if (mode != newMode) { + mode = newMode; + if (!noSave) { + saveState(); + } + } + + if (!global.isIE || mode != "moving") { + timer = top.setTimeout(refreshState, 1); + } + else { + inputStateObj = null; + } + }; + + var refreshState = function(){ + inputStateObj = new wmd.TextareaState(); + poller.tick(); + timer = undefined; + }; + + this.setCommandMode = function(){ + mode = "command"; + saveState(); + timer = top.setTimeout(refreshState, 0); + }; + + this.canUndo = function(){ + return stackPtr > 1; + }; + + this.canRedo = function(){ + if (undoStack[stackPtr + 1]) { + return true; + } + return false; + }; + + // Removes the last state and restores it. + this.undo = function(){ + + if (undoObj.canUndo()) { + if (lastState) { + // What about setting state -1 to null or checking for undefined? + lastState.restore(); + lastState = null; + } + else { + undoStack[stackPtr] = new wmd.TextareaState(); + undoStack[--stackPtr].restore(); + + if (callback) { + callback(); + } + } + } + + mode = "none"; + wmd.panels.input.focus(); + refreshState(); + }; + + // Redo an action. + this.redo = function(){ + + if (undoObj.canRedo()) { + + undoStack[++stackPtr].restore(); + + if (callback) { + callback(); + } + } + + mode = "none"; + wmd.panels.input.focus(); + refreshState(); + }; + + // Push the input area state to the stack. + var saveState = function(){ + + var currState = inputStateObj || new wmd.TextareaState(); + + if (!currState) { + return false; + } + if (mode == "moving") { + if (!lastState) { + lastState = currState; + } + return; + } + if (lastState) { + if (undoStack[stackPtr - 1].text != lastState.text) { + undoStack[stackPtr++] = lastState; + } + lastState = null; + } + undoStack[stackPtr++] = currState; + undoStack[stackPtr + 1] = null; + if (callback) { + callback(); + } + }; + + var handleCtrlYZ = function(event){ + + var handled = false; + + if (event.ctrlKey || event.metaKey) { + + // IE and Opera do not support charCode. + var keyCode = event.charCode || event.keyCode; + var keyCodeChar = String.fromCharCode(keyCode); + + switch (keyCodeChar) { + + case "y": + undoObj.redo(); + handled = true; + break; + + case "z": + if (!event.shiftKey) { + undoObj.undo(); + } + else { + undoObj.redo(); + } + handled = true; + break; + } + } + + if (handled) { + if (event.preventDefault) { + event.preventDefault(); + } + if (top.event) { + top.event.returnValue = false; + } + return; + } + }; + + // Set the mode depending on what is going on in the input area. + var handleModeChange = function(event){ + + if (!event.ctrlKey && !event.metaKey) { + + var keyCode = event.keyCode; + + if ((keyCode >= 33 && keyCode <= 40) || (keyCode >= 63232 && keyCode <= 63235)) { + // 33 - 40: page up/dn and arrow keys + // 63232 - 63235: page up/dn and arrow keys on safari + setMode("moving"); + } + else if (keyCode == 8 || keyCode == 46 || keyCode == 127) { + // 8: backspace + // 46: delete + // 127: delete + setMode("deleting"); + } + else if (keyCode == 13) { + // 13: Enter + setMode("newlines"); + } + else if (keyCode == 27) { + // 27: escape + setMode("escape"); + } + else if ((keyCode < 16 || keyCode > 20) && keyCode != 91) { + // 16-20 are shift, etc. + // 91: left window key + // I think this might be a little messed up since there are + // a lot of nonprinting keys above 20. + setMode("typing"); + } + } + }; + + var setEventHandlers = function(){ + + util.addEvent(wmd.panels.input, "keypress", function(event){ + // keyCode 89: y + // keyCode 90: z + if ((event.ctrlKey || event.metaKey) && (event.keyCode == 89 || event.keyCode == 90)) { + event.preventDefault(); + } + }); + + var handlePaste = function(){ + if (global.isIE || (inputStateObj && inputStateObj.text != wmd.panels.input.value)) { + if (timer == undefined) { + mode = "paste"; + saveState(); + refreshState(); + } + } + }; + + // pastePollInterval is specified at the beginning of this namespace. + poller = new wmd.inputPoller(handlePaste, pastePollInterval); + + util.addEvent(wmd.panels.input, "keydown", handleCtrlYZ); + util.addEvent(wmd.panels.input, "keydown", handleModeChange); + + util.addEvent(wmd.panels.input, "mousedown", function(){ + setMode("moving"); + }); + wmd.panels.input.onpaste = handlePaste; + wmd.panels.input.ondrop = handlePaste; + }; + + var init = function(){ + setEventHandlers(); + refreshState(); + saveState(); + }; + + this.destroy = function(){ + if (poller) { + poller.destroy(); + } + }; + + init(); + }; + + // I think my understanding of how the buttons and callbacks are stored in the array is incomplete. + wmd.editor = function(previewRefreshCallback){ + + if (!previewRefreshCallback) { + previewRefreshCallback = function(){}; + } + + var inputBox = wmd.panels.input; + + var offsetHeight = 0; + + var editObj = this; + + var mainDiv; + var mainSpan; + + var div; // This name is pretty ambiguous. I should rename this. + + // Used to cancel recurring events from setInterval. + var creationHandle; + + var undoMgr; // The undo manager + + // Perform the button's action. + var doClick = function(button){ + + inputBox.focus(); + + if (button.textOp) { + + if (undoMgr) { + undoMgr.setCommandMode(); + } + + var state = new wmd.TextareaState(); + + if (!state) { + return; + } + + var chunks = state.getChunks(); + + // Some commands launch a "modal" prompt dialog. Javascript + // can't really make a modal dialog box and the WMD code + // will continue to execute while the dialog is displayed. + // This prevents the dialog pattern I'm used to and means + // I can't do something like this: + // + // var link = CreateLinkDialog(); + // makeMarkdownLink(link); + // + // Instead of this straightforward method of handling a + // dialog I have to pass any code which would execute + // after the dialog is dismissed (e.g. link creation) + // in a function parameter. + // + // Yes this is awkward and I think it sucks, but there's + // no real workaround. Only the image and link code + // create dialogs and require the function pointers. + var fixupInputArea = function(){ + + inputBox.focus(); + + if (chunks) { + state.setChunks(chunks); + } + + state.restore(); + previewRefreshCallback(); + }; + + var useDefaultText = true; + var noCleanup = button.textOp(chunks, fixupInputArea, useDefaultText); + + if(!noCleanup) { + fixupInputArea(); + } + + } + + if (button.execute) { + button.execute(editObj); + } + }; + + var setUndoRedoButtonStates = function(){ + if(undoMgr){ + setupButton(wmd.buttons["wmd-undo-button"], undoMgr.canUndo()); + setupButton(wmd.buttons["wmd-redo-button"], undoMgr.canRedo()); + } + }; + + var setupButton = function(button, isEnabled) { + + var normalYShift = "0px"; + var disabledYShift = "-20px"; + var highlightYShift = "-40px"; + + if(isEnabled) { + button.style.backgroundPosition = button.XShift + " " + normalYShift; + button.onmouseover = function(){ + this.style.backgroundPosition = this.XShift + " " + highlightYShift; + }; + + button.onmouseout = function(){ + this.style.backgroundPosition = this.XShift + " " + normalYShift; + }; + + // IE tries to select the background image "button" text (it's + // implemented in a list item) so we have to cache the selection + // on mousedown. + if(global.isIE) { + button.onmousedown = function() { + wmd.ieRetardedClick = true; + wmd.ieCachedRange = document.selection.createRange(); + }; + } + + if (!button.isHelp) + { + button.onclick = function() { + if (this.onmouseout) { + this.onmouseout(); + } + doClick(this); + return false; + } + } + } + else { + button.style.backgroundPosition = button.XShift + " " + disabledYShift; + button.onmouseover = button.onmouseout = button.onclick = function(){}; + } + } + + var makeSpritedButtonRow = function(){ + + var buttonBar = document.getElementById(wmd_options.button_bar || "wmd-button-bar"); + + var normalYShift = "0px"; + var disabledYShift = "-20px"; + var highlightYShift = "-40px"; + + var buttonRow = document.createElement("ul"); + buttonRow.className = "wmd-button-row" + buttonRow = buttonBar.appendChild(buttonRow); + + var xoffset = 0; + + function createButton(name, title, textOp) { + var button = document.createElement("li"); + wmd.buttons[name] = button; + button.className = "wmd-button " + name; + button.XShift = xoffset + "px"; + xoffset -= 20; + + if (title) + button.title = title; + + if (textOp) + button.textOp = textOp; + + return button; + } + + function addButton(name, title, textOp) { + var button = createButton(name, title, textOp); + + setupButton(button, true); + buttonRow.appendChild(button); + return button; + } + + function addSpacer() { + var spacer = document.createElement("li"); + spacer.className = "wmd-spacer"; + buttonRow.appendChild(spacer); + return spacer; + } + + var boldButton = addButton("wmd-bold-button", "Strong Ctrl+B", command.doBold); + var italicButton = addButton("wmd-italic-button", "Emphasis Ctrl+I", command.doItalic); + var spacer1 = addSpacer(); + + var linkButton = addButton("wmd-link-button", "Hyperlink Ctrl+L", function(chunk, postProcessing, useDefaultText) { + return command.doLinkOrImage(chunk, postProcessing, false); + }); + var quoteButton = addButton("wmd-quote-button", "Blockquote
Ctrl+Q", command.doBlockquote); + var codeButton = addButton("wmd-code-button", "Code Sample 
 Ctrl+K", command.doCode);
+			var imageButton = addButton("wmd-image-button", "Image  Ctrl+G", function(chunk, postProcessing, useDefaultText) {
+				return command.doLinkOrImage(chunk, postProcessing, true);
+			});
+			
+			var spacer2 = addSpacer();
+
+			var olistButton = addButton("wmd-olist-button", "Numbered List 
     Ctrl+O", function(chunk, postProcessing, useDefaultText) {
+				command.doList(chunk, postProcessing, true, useDefaultText);
+			});
+			var ulistButton = addButton("wmd-ulist-button", "Bulleted List