[pLog-svn] r4707 - in plog/branches/lifetype-1.2: js/editor templates/admin
oscar at devel.lifetype.net
oscar at devel.lifetype.net
Sat Feb 10 05:11:49 EST 2007
Author: oscar
Date: 2007-02-10 05:11:49 -0500 (Sat, 10 Feb 2007)
New Revision: 4707
Added:
plog/branches/lifetype-1.2/js/editor/lifetypeeditor.css
plog/branches/lifetype-1.2/js/editor/lifetypeeditor.js
Removed:
plog/branches/lifetype-1.2/js/editor/plogeditor.css
plog/branches/lifetype-1.2/js/editor/plogeditor.js
Modified:
plog/branches/lifetype-1.2/templates/admin/editpost.template
plog/branches/lifetype-1.2/templates/admin/newpost.template
Log:
moved the non-visual editor of HTML into the new Lifetype.UI namespace for Javascript code and polished its code a bit. Now it's not necessary to specify baseImageFolder or load the stylesheet manually into every page that wants to use the editor, as it is all handled via DOM.
Copied: plog/branches/lifetype-1.2/js/editor/lifetypeeditor.css (from rev 4702, plog/branches/lifetype-1.2/js/editor/plogeditor.css)
===================================================================
--- plog/branches/lifetype-1.2/js/editor/lifetypeeditor.css (rev 0)
+++ plog/branches/lifetype-1.2/js/editor/lifetypeeditor.css 2007-02-10 10:11:49 UTC (rev 4707)
@@ -0,0 +1,61 @@
+.textEditorToolbar {
+ cursor: default;
+ background: ButtonFace;
+ padding: 1px 1px 1px 1px;
+ border: 1px solid;
+ border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
+ width: 100%;
+ height: 20px;
+}
+
+.pressedButton {
+ border: 1px solid;
+ border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+ margin-left:2px;
+ margin-bottom: 2px;
+ color: ButtonText;
+ padding: 0px;
+ width: 18px;
+ height: 18px;
+}
+
+.normalButton {
+ border: 1px ButtonFace solid;
+ margin-left:3px;
+ margin-bottom: 3px;
+ color: ButtonText;
+ padding: 0px;
+ width: 18px;
+ height: 18px;
+}
+
+.buttonHover {
+ border: 1px solid;
+ border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
+ margin-left:3px;
+ margin-bottom: 3px;
+ padding: 0px;
+ width: 18px;
+ height: 18px;
+}
+
+.separator {
+ margin-bottom: 3px;
+ margin-left: 3px;
+ margin-right: 3px;
+ margin-top: 0px;
+ border-left: 1px solid ButtonShadow;
+ border-right: 1px solid ButtonHighlight;
+ width: 0px;
+ height: 16px;
+ padding: 0px;
+ position:relative;
+ top: -9px;
+}
+
+.editorDropDownList {
+ position: relative;
+ top: -9px;
+ padding: 0px;
+ margin: 0px;
+}
Copied: plog/branches/lifetype-1.2/js/editor/lifetypeeditor.js (from rev 4702, plog/branches/lifetype-1.2/js/editor/plogeditor.js)
===================================================================
--- plog/branches/lifetype-1.2/js/editor/lifetypeeditor.js (rev 0)
+++ plog/branches/lifetype-1.2/js/editor/lifetypeeditor.js 2007-02-10 10:11:49 UTC (rev 4707)
@@ -0,0 +1,823 @@
+/**
+ * LifetypeEditor.js
+ *
+ * Non-wysiwyg javascript-based editor for textarea controls in browsers. It works in
+ * exactly the same as HTMLArea control but instead of graphically showing the contents
+ * of the post, works based on raw html code. It does not offer as many features as
+ * htmlarea but it does offer some other things as customizable toolbars, support
+ * for text selections and ranges, etc. It should work in every major browser with
+ * some support for DOM and DHTML.
+ *
+ * This code is licensed under the terms of the GPL license.
+ *
+ * -- Installation and usage --
+ *
+ * Place this file somewhere in your web server tree and from your html files, call it like
+ * <html>
+ * <head>
+ * <link rel="stylesheet" href="plogeditor.css" type="text/css">
+ * <script type="text/javascript" src="lifetypeeditor.js"></script>
+ * </head>
+ * <body>
+ * <h1>Lifetype Javascript Sample</h1>
+ * <form name="textEditor" id="textEditor">
+ * text1:<br/>
+ * <script type="text/javascript">ed1 = new Lifetype.UI.Editor('text1', 'ed1');</script>
+ * <textarea id="text1" name="text1" rows="8" cols="60"></textarea>
+ * <br/>text2:<br/>
+ * <script type="text/javascript">ed2 = new Lifetype.UI.Editor('text2', 'ed2');</script>
+ * <textarea id="text2" name="text1" rows="8" cols="60"></textarea>
+ * </form>
+ * </body>
+ * </html>
+ *
+ * Create a new pLogEditor object in the place where you would like to show the
+ * toolbar of the editor. The first paramter for the constructor is the value of the 'id'
+ * attribute of the textarea that will be the content area for the toolbar. The second parameter
+ * is the name of the object itself, so if you are creating an editor called 'myEditor', the second
+ * parameter will be 'myEditor.
+ */
+
+/**
+ * main class
+ *
+ */
+Lifetype.UI.Editor = function(txtId, objName)
+{
+
+ // class attributes
+ this.txtId = txtId;
+ this.objName = objName;
+
+ // array with all the open tags that haven't been closed
+ this.tagStack = new Array();
+
+ this.debug = false;
+
+ this.setToolbar = function()
+ {
+ // --
+ // our very own toolbar
+ // --
+ this.toolBar = new Array();
+ options = new Array();
+ options['8'] = '8 pt';
+ options['10'] = '10 pt';
+ options['12'] = '12 pt';
+ options['14'] = '14 pt';
+ options['18'] = '18 pt';
+ options['24'] = '24 pt';
+ options['36'] = '36 pt';
+ this.toolBar['list_font_size'] = new Lifetype.UI.Editor.List.FontSize( 'list_font_size', options );
+ this.toolBar['1_but_b'] = new Lifetype.UI.Editor.Button( '1_but_b', 'bold', '<strong>', '</strong>', 'ed_format_bold.gif', 1 );
+ this.toolBar['2_but_i'] = new Lifetype.UI.Editor.Button( '2_but_i', 'italics', '<em>', '</em>', 'ed_format_italic.gif', 1 );
+ this.toolBar['3_but_u'] = new Lifetype.UI.Editor.Button( '3_but_u', 'underline', '<span style="text-decoration:underline">', '</span>', 'ed_format_underline.gif', 1 );
+ this.toolBar['4_but_strikethrough'] = new Lifetype.UI.Editor.Button( '4_but_strikethrough', 'strikethrough', '<span style="text-decoration: line-through;">', '</span>', 'ed_format_strike.gif', 1 );
+ this.toolBar['but_sep1'] = new Lifetype.UI.Editor.Button.Separator();
+ this.toolBar['but_align_left'] = new Lifetype.UI.Editor.Button( 'but_align_left', 'align left', '<div style="text-align: left;">', '</div>', 'ed_align_left.gif' );
+ this.toolBar['but_align_center'] = new Lifetype.UI.Editor.Button( 'but_align_center', 'align center', '<div style="text-align: center;">', '</div>', 'ed_align_center.gif' );
+ this.toolBar['but_align_right'] = new Lifetype.UI.Editor.Button( 'but_align_right', 'align right', '<div style="text-align: right;">', '</div>', 'ed_align_right.gif' );
+ this.toolBar['but_align_justify'] = new Lifetype.UI.Editor.Button( 'but_align_justify', 'align justify', '<div style="text-align: justify;">', '</div>', 'ed_align_justify.gif' );
+ this.toolBar['but_sep2'] = new Lifetype.UI.Editor.Button.Separator();
+ this.toolBar['but_ordered_list'] = new Lifetype.UI.Editor.Button( 'but_ordered_list', 'ordered list', '<ol><li></li></ol>', '', 'ed_list_num.gif', -1 );
+ this.toolBar['but_unordered_list'] = new Lifetype.UI.Editor.Button( 'but_unordered_list', 'unordered list', '<ul><li></li></ul>', '', 'ed_list_bullet.gif', -1 );
+ this.toolBar['5_but_a'] = new Lifetype.UI.Editor.Button.Link( '5_but_a', 'anchor', 'ed_link.gif' );
+ this.toolBar['6_but_img']= new Lifetype.UI.Editor.Button.Image( '6_but_img', 'image', 'ed_image.gif' );
+ this.toolBar['7_but_res']= new Lifetype.UI.Editor.Button.Resource ('7_but_res', 'resource', 'ed_resource.gif' );
+ this.toolBar['8_but_more']= new Lifetype.UI.Editor.Button.More ('8_but_more', 'more', 'ed_more.gif' );
+ }
+
+ /**
+ * returns whether our browser supports the features that we are going
+ * to use or not
+ *
+ * @return true if supported, false if not
+ */
+ this.isSupportedBrowser = function()
+ {
+ return( document.getElementById || document.all );
+ }
+
+ /**
+ * draws the buttons. Takes no parameters
+ *
+ * @return nothing
+ */
+ this.init = function()
+ {
+ // generate the toolbar
+ this.setToolbar();
+
+ // load the editor stylesheet dynamically
+ link = document.createElement( "link" );
+ link.rel = "stylesheet";
+ link.type = "text/css";
+ link.href = Lifetype.getBaseURL() + "/js/editor/lifetypeeditor.css";
+ document.documentElement.appendChild( link );
+
+ // first of all, check for unsupported browsers. If the browser
+ // is not supported, we will silently not do anything... since we won't
+ // even print the toolbar! (and nothing will happen without a toolbar)
+ if( !this.isSupportedBrowser())
+ return;
+
+ markup = '';
+
+ document.write('<div class="textEditorToolbar" id="textEditorToolbar">');
+ for( var buttonId in this.toolBar ) {
+ if ( Lifetype.prototypeCompatibabilityCheck( buttonId ) )
+ continue;
+ button = this.toolBar[buttonId];
+ markup += button.show(this.txtId, this.objName);
+ }
+ document.write(markup);
+ document.write('</div>');
+
+ if( this.debug ) {
+ document.write('<textarea>'+markup+'</textarea>');
+ }
+ }
+
+ // after initializing the buttons, we can generate the toolbar
+ // we can't call this method after defining it!! :)
+ this.init();
+
+ /**
+ * calls the edButton.execute() callback
+ *
+ * @param txtId
+ * @param buttonId
+ * @return nothing
+ */
+ this.execute = function( txtId, buttonId, param )
+ {
+ // get the button from the array
+ var edButton = this.toolBar[buttonId];
+
+ // execute the button
+ if( !this.selectionExists()) {
+ result = edButton.execute( txtId, param );
+ if( result != 'undefined' )
+ this.insertText( result );
+ }
+ else {
+ surroundInfo = edButton.surround( txtId, param );
+ this.surroundText( surroundInfo['start'], surroundInfo['end'] );
+ }
+ }
+
+ /**
+ * returns the textarea object associated to this editor
+ *
+ * @return a textarea object
+ */
+ this.getTextArea = function()
+ {
+ textArea = document.getElementById( this.txtId );
+ return textArea;
+ }
+
+ /**
+ * calls the onMouseOver handler for this button
+ *
+ * @param txtId
+ * @param buttonId
+ */
+ this.mouseOver = function( txtId, buttonId )
+ {
+ var edButton = this.toolBar[buttonId];
+ edButton.mouseOver();
+ }
+
+ /**
+ * calls the onMouseOut handler for this button
+ *
+ * @param txtId
+ * @param buttonId
+ */
+ this.mouseOut = function( txtId, buttonId )
+ {
+ var edButton = this.toolBar[buttonId];
+ edButton.mouseOut();
+ }
+
+ /**
+ * inserts text where the cursor is
+ *
+ * @param myField
+ * @param myValue
+ * @return nothing
+ */
+ this.insertText = function(myValue)
+ {
+ myField = this.getTextArea();
+
+ //IE support
+ if (document.selection) {
+ myField.focus();
+ sel = document.selection.createRange();
+ sel.text = myValue;
+ myField.focus();
+ }
+ //MOZILLA/NETSCAPE support
+ else if (myField.selectionStart || myField.selectionStart == '0') {
+ var startPos = myField.selectionStart;
+ var endPos = myField.selectionEnd;
+ myField.value = myField.value.substring(0, startPos)
+ + myValue
+ + myField.value.substring(endPos, myField.value.length);
+ myField.focus();
+ myField.selectionStart = startPos + myValue.length;
+ myField.selectionEnd = startPos + myValue.length;
+ } else {
+ myField.value += myValue;
+ myField.focus();
+ }
+ }
+
+ /**
+ * surrounds the current selection with the given opening and closing texts
+ *
+ * @param myValueOpen
+ * @param myValueClose
+ */
+ this.surroundText = function( myValueOpen, myValueClose )
+ {
+ myField = this.getTextArea();
+ if (document.selection) {
+ myField.focus();
+ sel = document.selection.createRange();
+ sel.text = myValueOpen + sel.text + myValueClose;
+ myField.focus();
+ }
+ else if (myField.selectionStart || myField.selectionStart == '0') {
+ var startPos = myField.selectionStart;
+ var endPos = myField.selectionEnd;
+ var cursorPos = endPos;
+ myField.value = myField.value.substring(0, startPos)
+ + myValueOpen
+ + myField.value.substring(startPos, endPos)
+ + myValueClose
+ + myField.value.substring(endPos, myField.value.length);
+ cursorPos += myValueOpen.length + myValueClose.length;
+ myField.selectionStart = cursorPos;
+ myField.selectionEnd = cursorPos;
+ myField.focus();
+ }
+ else {
+ myField.value += myValueOpen;
+ myField.focus();
+ }
+ }
+
+ /**
+ * returns whether there is a user selection in the given editor
+ *
+ * @return True if there is a selection or false otherwise
+ */
+ this.selectionExists = function()
+ {
+ var selection = false;
+ var myField = this.getTextArea();
+
+ if (document.selection) {
+ // for IE
+ myField.focus();
+ sel = document.selection.createRange();
+ selection = (sel.text != '' );
+ myField.focus();
+ }
+ else if (myField.selectionStart || myField.selectionStart == '0') {
+ // for Mozilla
+ selection = (myField.selectionEnd > myField.selectionStart)
+ }
+ else {
+ // for everybody else...
+ selection = false;
+ }
+
+ return selection;
+ }
+}
+
+/**
+ * represents a button from our toolbar
+ *
+ * @param id
+ * @param display
+ * @param tagStart
+ * @param tagEnd
+ * @param icon
+ * @param open
+ */
+Lifetype.UI.Editor.Button = function(id, display, tagStart, tagEnd, icon, open)
+{
+ this.id = id; // used to name the toolbar button
+ this.display = display; // label on button
+ this.tagStart = tagStart; // open tag
+ this.tagEnd = tagEnd; // close tag
+ this.open = open; // set to -1 if tag does not need to be closed
+ this.isOpen = false;
+ this.icon = icon;
+ this.htmlId = '';
+ this.currentStatus = 'normalButton';
+
+ /**
+ * renders the button
+ *
+ * @param txtId
+ * @return nothing
+ */
+ this.show = function(txtId, objName)
+ {
+ // a very simple document.write...
+ this.htmlId = txtId + '_' + this.id;
+ var buttonText = '<img src="' + Lifetype.getBaseURL() + "/js/editor/images"+'/'+this.icon+'" id="' + txtId + '_' + this.id + '" class="normalButton" onmouseout="'+objName+'.mouseOut(\'' + txtId + '\', \'' + this.id + '\');" onmouseover="'+objName+'.mouseOver(\'' + txtId + '\', \'' + this.id + '\');" onclick="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', null );" alt = "' + this.display + '" />';
+
+ return(buttonText);
+ }
+
+ /**
+ * returns the html element to which this button is associated
+ *
+ * @return an html element
+ */
+ this.getHtmlButton = function()
+ {
+ return document.getElementById( this.htmlId );
+ }
+
+ /**
+ * whether this button needs to be closed or not
+ *
+ * @return True whether it needs to be closed or false otherwise
+ */
+ this.needsClose = function()
+ {
+ return( this.open != -1 );
+ }
+
+ /**
+ * handler for the onMouseOver event, changes the colour of the borders
+ */
+ this.mouseOver = function()
+ {
+ htmlButton = this.getHtmlButton();
+ htmlButton.className = 'buttonHover';
+ }
+
+ /**
+ * handler for the onMouseOut event, returns the button to its original state
+ */
+ this.mouseOut = function()
+ {
+ htmlButton = htmlButton = this.getHtmlButton();
+ htmlButton.className = this.currentStatus;
+ }
+
+ /**
+ * checks/unchecks the button
+ */
+ this.toggle = function()
+ {
+ htmlButton = this.getHtmlButton();
+
+ // change its class and save it for later use...
+ if( this.currentStatus == 'pressedButton' )
+ this.currentStatus = 'normalButton';
+ else
+ this.currentStatus = 'pressedButton';
+
+ htmlButton.className = this.currentStatus;
+ }
+
+ /**
+ * performs the button's action
+ *
+ * @param txtId
+ * @return nothing
+ */
+ this.execute = function( txtId, param )
+ {
+ var text = '';
+
+ // check if the tag needs a closing tag
+ if( this.open == -1 ) {
+ // it doesnt...
+ text = this.tagStart;
+ }
+ else {
+ // it does...
+ if( this.isOpen )
+ text = this.tagEnd;
+ else
+ text = this.tagStart;
+
+ // change the status of the button
+ this.isOpen = !this.isOpen;
+ }
+
+ // change the look of the button
+ if( this.open != -1 ) {
+ this.toggle();
+ }
+
+ // return the text to be added
+ return text;
+ }
+
+ /**
+ * special callback function that is executed when the main editor would like to
+ * surround the current selection in the browser
+ *
+ * @param txtId the textarea id
+ */
+ this.surround = function( txtId, param )
+ {
+ surroundInfo = Array()
+ surroundInfo['start'] = this.tagStart;
+ surroundInfo['end'] = this.tagEnd;
+
+ return surroundInfo;
+ }
+
+ this.toString = function()
+ {
+ objSignature = this.id + ' Button';
+ return( objSignature );
+ }
+}
+
+/**
+ * visual separators for the toolbar are also implemented as buttons, but they do
+ * do nothing and only show a vertical bar anyway with some margin on both sides...
+ */
+Lifetype.UI.Editor.Button.Separator = function()
+{
+ this.prototype = new Lifetype.UI.Editor.Button('separator', '', '', '', '', -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.superclass('separator', '', '', '', '', -1 );
+
+ /**
+ * draws a vertical line
+ */
+ this.show = function( txtId, objName )
+ {
+ separatorCode = '<span class="separator"></span>';
+
+ return( separatorCode );
+ }
+}
+
+/**
+ * special button that only adds a link
+ *
+ * @param id
+ * @param display
+ * @param icon
+ */
+Lifetype.UI.Editor.Button.Link = function(id, display, icon)
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.Button(id, display, '', '', icon, -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.superclass(id, display, '', '', icon, -1 );
+
+ /**
+ * function redefined from above so that users can type links
+ *
+ * @param txtId
+ */
+ this.execute = function( txtId, param )
+ {
+ this.toggle();
+
+ linkText = prompt('Enter the link text: ');
+ if( linkText == null ) {
+ this.toggle();
+ return '';
+ }
+
+ linkDest = prompt('Enter the destination for the link:');
+ if( linkDest == null ) {
+ this.toggle();
+ return '';
+ }
+
+ this.toggle();
+
+ // if everything went fine, add the link and return
+ var linkTag = '<a href="' + linkDest + '">' + linkText + '</a>';
+ return linkTag;
+ }
+
+ /**
+ * special behaviour for this function... It will only ask for the link destination
+ * and surround the current selection with the user's input
+ *
+ * @param txtId
+ */
+ this.surround = function( txtId, param )
+ {
+ surroundInfo = Array();
+ surroundInfo['start'] = '';
+ surroundInfo['end'] = '';
+
+ this.toggle();
+ linkDest = prompt('Enter the destination for the link:');
+ if( linkDest == null ) {
+ this.toggle();
+ return surroundInfo;
+ }
+
+ surroundInfo['start'] = '<a href="' + linkDest + '">';
+ surroundInfo['end'] = '</a>';
+
+ this.toggle();
+
+ return surroundInfo;
+ }
+}
+
+/**
+ * special button that only adds a link
+ *
+ * @param id
+ * @param display
+ * @param icon
+ */
+Lifetype.UI.Editor.Button.BR = function(id, display, icon)
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.Button(id, display, '', '', icon, -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.superclass(id, display, '<br />', '', icon, -1 );
+
+ /**
+ * special behaviour for this function... It will only ask for the link destination
+ * and surround the current selection with the user's input
+ *
+ * @param txtId
+ */
+ this.surround = function( txtId, param )
+ {
+ surroundInfo = Array();
+ surroundInfo['start'] = '<p>';
+ surroundInfo['end'] = '</p>';
+ this.toggle();
+
+ return surroundInfo;
+ }
+}
+
+/**
+ * special button that adds/removes the "[@more@]" separator
+ *
+ * @param id
+ * @param display
+ * @param icon
+ */
+Lifetype.UI.Editor.Button.More = function(id, display, icon)
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.Button(id, display, '', '', icon, -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.superclass(id, display, '', '', icon, -1 );
+
+ /**
+ * @private
+ */
+ this._getMoreTag = function()
+ {
+ return( "[@more@]" );
+ }
+
+ this.execute = function( txtId, param )
+ {
+ var txtArea = document.getElementById( txtId );
+ var content = txtArea.value;
+ var bFound = 0;
+ var startPos = 0;
+ var returnValue = '';
+
+ // Parse all img tags and remove any 'more' tags
+ while((startPos = content.indexOf(this._getMoreTag(), startPos)) != -1) {
+ var contentAfter = content.substring(startPos + this._getMoreTag().length);
+ content = content.substring(0, startPos) + contentAfter;
+ startPos++;
+ bFound = 1;
+ }
+
+ if(bFound ) {
+ // the tag is already there and should be removed, we can use a regular expression
+ // to easily remove it
+ returnValue = '';
+ txtArea.value = content;
+ }
+ else {
+ // the tag is not there and can be safely added
+ returnValue = '\n' + this._getMoreTag() + '\n';
+ }
+
+ return( returnValue );
+ }
+}
+
+/**
+ * special button that only adds an image
+ *
+ * @param id
+ * @param display
+ * @param icon
+ */
+Lifetype.UI.Editor.Button.Image = function(id, display, icon)
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.Button(id, display, '', '', icon, -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.superclass(id, display, '', '', icon, -1 );
+
+ /**
+ * reimplemented from edButton so that we can ask for an image url and a description
+ *
+ * @param txtId
+ */
+ this.execute = function( txtId, param )
+ {
+ textArea = document.getElementById(txtId);
+
+ this.toggle();
+
+ imgSrc = prompt('Enter the image source: ');
+ if( imgSrc == null ) {
+ this.toggle();
+ return '';
+ }
+
+ imgAlt = prompt('Enter an image description:');
+ if( imgAlt == null ) {
+ this.toggle();
+ return '';
+ }
+
+ this.toggle();
+
+ // if everything went fine, add the link and return
+ var imgTag = '<img src="' + imgSrc + '" alt="' + imgAlt + '" />';
+ return imgTag;
+ }
+}
+
+/**
+ * special button that only adds an resource
+ *
+ * @param id
+ * @param display
+ * @param icon
+ */
+Lifetype.UI.Editor.Button.Resource = function(id, display, icon)
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.Button(id, display, '', '', icon, -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.superclass(id, display, '', '', icon, -1 );
+
+ /**
+ * reimplemented from edButton so that we can ask for an image url and a description
+ *
+ * @param txtId
+ */
+ this.execute = function( txtId, param )
+ {
+ if ( txtId == 'postText' )
+ resource_list_window(1);
+ else
+ resource_list_window(2);
+ return '';
+ }
+}
+
+/**
+ * implements drop-down lists
+ */
+Lifetype.UI.Editor.List = function( id, options )
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.Button(id, '', '', '', '', -1 );
+ this.prototype.constructor = Lifetype.UI.Editor.Button;
+ this.superclass = Lifetype.UI.Editor.Button;
+
+ this.options = options;
+
+ this.superclass(id, '', '', '', '', -1 );
+
+ /**
+ * renders the button. In our case, creates a drop-down list with the available options
+ *
+ * @param txtId
+ * @returns the markup that is going to be written to the document
+ */
+ this.show = function(txtId, objName)
+ {
+ selectBox = '<select class="editorDropDownList" name=\''+this.id+'\' onChange="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', this);">';
+ for( var key in this.options ) {
+ if ( Lifetype.prototypeCompatibabilityCheck( key ) )
+ continue;
+ selectBox += '<option value=\''+key+'\'>'+this.options[key]+'</option>';
+ }
+ selectBox += '</select>';
+
+ return( selectBox );
+ }
+
+ /**
+ * reimplement this method for lists that should behave in a particular way when an option
+ * is selected
+ */
+ this.execute = function( txtId, param )
+ {
+ // param is the drop-down list that generated the event, so we can easily learn
+ // more about what was selected by
+ opt = param.selectedIndex;
+
+ return( param.options[opt].value );
+ }
+
+ /**
+ * does nothing
+ */
+ this.surround = function( txtId, param )
+ {
+ surroundInfo = Array();
+ return( surroundInfo );
+ }
+
+}
+
+/**
+ * button that shows a list with different font sizes
+ */
+Lifetype.UI.Editor.List.FontSize = function( id, options )
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new Lifetype.UI.Editor.List(id, options );
+ this.prototype.constructor = Lifetype.UI.Editor.List;
+ this.superclass = Lifetype.UI.Editor.List;
+
+ this.superclass(id, options );
+
+ /**
+ * returns the right <span style=...></span> markup
+ */
+ this.execute = function( txtId, param )
+ {
+ // param is the drop-down list that generated the event, so we can easily learn
+ // more about what was selected in the dropdown list
+ opt = param.selectedIndex;
+ fontSizePt = param.options[opt].value;
+
+ spanCode = '<span style="font-size: '+fontSizePt+'pt;"></span>';
+
+ return( spanCode );
+ }
+
+ /**
+ * surrouns the selected text with the right <span>...</span> tags
+ */
+ this.surround = function( txtId, param )
+ {
+ opt = param.selectedIndex;
+ fontSizePt = param.options[opt].value;
+
+ surroundInfo = Array();
+ surroundInfo['start'] = '<span style="font-size: '+fontSizePt+'pt;">';
+ surroundInfo['end'] = '</span>';
+ return( surroundInfo );
+ }
+}
\ No newline at end of file
Deleted: plog/branches/lifetype-1.2/js/editor/plogeditor.css
===================================================================
--- plog/branches/lifetype-1.2/js/editor/plogeditor.css 2007-02-10 09:15:45 UTC (rev 4706)
+++ plog/branches/lifetype-1.2/js/editor/plogeditor.css 2007-02-10 10:11:49 UTC (rev 4707)
@@ -1,61 +0,0 @@
-.textEditorToolbar {
- cursor: default;
- background: ButtonFace;
- padding: 1px 1px 1px 1px;
- border: 1px solid;
- border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
- width: 100%;
- height: 20px;
-}
-
-.pressedButton {
- border: 1px solid;
- border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
- margin-left:2px;
- margin-bottom: 2px;
- color: ButtonText;
- padding: 0px;
- width: 18px;
- height: 18px;
-}
-
-.normalButton {
- border: 1px ButtonFace solid;
- margin-left:3px;
- margin-bottom: 3px;
- color: ButtonText;
- padding: 0px;
- width: 18px;
- height: 18px;
-}
-
-.buttonHover {
- border: 1px solid;
- border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
- margin-left:3px;
- margin-bottom: 3px;
- padding: 0px;
- width: 18px;
- height: 18px;
-}
-
-.separator {
- margin-bottom: 3px;
- margin-left: 3px;
- margin-right: 3px;
- margin-top: 0px;
- border-left: 1px solid ButtonShadow;
- border-right: 1px solid ButtonHighlight;
- width: 0px;
- height: 16px;
- padding: 0px;
- position:relative;
- top: -9px;
-}
-
-.editorDropDownList {
- position: relative;
- top: -9px;
- padding: 0px;
- margin: 0px;
-}
Deleted: plog/branches/lifetype-1.2/js/editor/plogeditor.js
===================================================================
--- plog/branches/lifetype-1.2/js/editor/plogeditor.js 2007-02-10 09:15:45 UTC (rev 4706)
+++ plog/branches/lifetype-1.2/js/editor/plogeditor.js 2007-02-10 10:11:49 UTC (rev 4707)
@@ -1,872 +0,0 @@
-/**
- * pLogEditor.js
- *
- * Non-wysiwyg javascript-based editor for textarea controls in browsers. It works in
- * exactly the same as HTMLArea control but instead of graphically showing the contents
- * of the post, works based on raw html code. It does not offer as many features as
- * htmlarea but it does offer some other things as customizable toolbars, support
- * for text selections and ranges, etc. It should work in every major browser with
- * some support for DOM and DHTML.
- * It is very loosely based on Alex King's js_quicktags.js which is also used in Wordpress.
- * However, js_quicktags has the limitation that it can only work with one textarea per page
- * and plog for example needs two in the "new post" page. The code is javascript with OOP
- * so it might look a bit weird at first...
- * This code is licensed under the terms of the GPL license.
- *
- * -- Installation and usage --
- *
- * Place this file somewhere in your web server tree and from your html files, call it like
- * <html>
- * <head>
- * <link rel="stylesheet" href="plogeditor.css" type="text/css">
- * <script type="text/javascript" src="plogeditor.js"></script>
- * <script type="text/javascript">
- * // define where your images are...
- * var baseImageFolder='/js/editor/images';
- * </script>
- * </head>
- * <body>
- * <h1>pLogEditor Javascript Sample</h1>
- * <form name="textEditor" id="textEditor">
- * text1:<br/>
- * <script type="text/javascript">ed1 = new pLogEditor('text1', 'ed1');</script>
- * <textarea id="text1" name="text1" rows="8" cols="60"></textarea>
- * <br/>text2:<br/>
- * <script type="text/javascript">ed2 = new pLogEditor('text2', 'ed2');</script>
- * <textarea id="text2" name="text1" rows="8" cols="60"></textarea>
- * </form>
- * </body>
- * </html>
- *
- * Create a new pLogEditor object in the place where you would like to show the
- * toolbar of the editor. The first paramter for the constructor is the value of the 'id'
- * attribute of the textarea that will be the content area for the toolbar. The second parameter
- * is the name of the object itself, so if you are creating an editor called 'myEditor', the second
- * parameter will be 'myEditor'
- *
- * Please set the value of baseImageFolder to the base path where your icons are stored.
- */
-
-
-/**
- * please change this if your icons are somewhere else!
- */
-var baseImageFolder = 'js/editor/images/';
-
-/**
- * represents a button from our toolbar
- *
- * @param id
- * @param display
- * @param tagStart
- * @param tagEnd
- * @param icon
- * @param open
- */
-edButton = function(id, display, tagStart, tagEnd, icon, open)
-{
- this.id = id; // used to name the toolbar button
- this.display = display; // label on button
- this.tagStart = tagStart; // open tag
- this.tagEnd = tagEnd; // close tag
- this.open = open; // set to -1 if tag does not need to be closed
- this.isOpen = false;
- this.icon = icon;
- this.htmlId = '';
- this.currentStatus = 'normalButton';
-
- /**
- * renders the button
- *
- * @param txtId
- * @return nothing
- */
- this.show = function(txtId, objName)
- {
- // a very simple document.write...
- this.htmlId = txtId + '_' + this.id;
- var buttonText = '<img src="'+baseImageFolder+'/'+this.icon+'" id="' + txtId + '_' + this.id + '" class="normalButton" onmouseout="'+objName+'.mouseOut(\'' + txtId + '\', \'' + this.id + '\');" onmouseover="'+objName+'.mouseOver(\'' + txtId + '\', \'' + this.id + '\');" onclick="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', null );" alt = "' + this.display + '" />';
-
- return(buttonText);
- }
-
- /**
- * returns the html element to which this button is associated
- *
- * @return an html element
- */
- this.getHtmlButton = function()
- {
- return document.getElementById( this.htmlId );
- }
-
- /**
- * whether this button needs to be closed or not
- *
- * @return True whether it needs to be closed or false otherwise
- */
- this.needsClose = function()
- {
- return( this.open != -1 );
- }
-
- /**
- * handler for the onMouseOver event, changes the colour of the borders
- */
- this.mouseOver = function()
- {
- htmlButton = this.getHtmlButton();
- htmlButton.className = 'buttonHover';
- }
-
- /**
- * handler for the onMouseOut event, returns the button to its original state
- */
- this.mouseOut = function()
- {
- htmlButton = htmlButton = this.getHtmlButton();
- htmlButton.className = this.currentStatus;
- }
-
- /**
- * checks/unchecks the button
- */
- this.toggle = function()
- {
- htmlButton = this.getHtmlButton();
-
- // change its class and save it for later use...
- if( this.currentStatus == 'pressedButton' )
- this.currentStatus = 'normalButton';
- else
- this.currentStatus = 'pressedButton';
-
- htmlButton.className = this.currentStatus;
- }
-
- /**
- * performs the button's action
- *
- * @param txtId
- * @return nothing
- */
- this.execute = function( txtId, param )
- {
- var text = '';
-
- // check if the tag needs a closing tag
- if( this.open == -1 ) {
- // it doesnt...
- text = this.tagStart;
- }
- else {
- // it does...
- if( this.isOpen )
- text = this.tagEnd;
- else
- text = this.tagStart;
-
- // change the status of the button
- this.isOpen = !this.isOpen;
- }
-
- // change the look of the button
- if( this.open != -1 ) {
- this.toggle();
- }
-
- // return the text to be added
- return text;
- }
-
- /**
- * special callback function that is executed when the main editor would like to
- * surround the current selection in the browser
- *
- * @param txtId the textarea id
- */
- this.surround = function( txtId, param )
- {
- surroundInfo = Array()
- surroundInfo['start'] = this.tagStart;
- surroundInfo['end'] = this.tagEnd;
-
- return surroundInfo;
- }
-
- this.toString = function()
- {
- objSignature = this.id + ' Button';
- return( objSignature );
- }
-}
-
-/**
- * visual separators for the toolbar are also implemented as buttons, but they do
- * do nothing and only show a vertical bar anyway with some margin on both sides...
- */
-edButtonSeparator = function()
-{
- this.prototype = new edButton('separator', '', '', '', '', -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.superclass('separator', '', '', '', '', -1 );
-
- /**
- * draws a vertical line
- */
- this.show = function( txtId, objName )
- {
- separatorCode = '<span class="separator"></span>';
-
- return( separatorCode );
- }
-}
-
-/**
- * special button that only adds a link
- *
- * @param id
- * @param display
- * @param icon
- */
-edButtonLink = function(id, display, icon)
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButton(id, display, '', '', icon, -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.superclass(id, display, '', '', icon, -1 );
-
- /**
- * function redefined from above so that users can type links
- *
- * @param txtId
- */
- this.execute = function( txtId, param )
- {
- this.toggle();
-
- linkText = prompt('Enter the link text: ');
- if( linkText == null ) {
- this.toggle();
- return '';
- }
-
- linkDest = prompt('Enter the destination for the link:');
- if( linkDest == null ) {
- this.toggle();
- return '';
- }
-
- this.toggle();
-
- // if everything went fine, add the link and return
- var linkTag = '<a href="' + linkDest + '">' + linkText + '</a>';
- return linkTag;
- }
-
- /**
- * special behaviour for this function... It will only ask for the link destination
- * and surround the current selection with the user's input
- *
- * @param txtId
- */
- this.surround = function( txtId, param )
- {
- surroundInfo = Array();
- surroundInfo['start'] = '';
- surroundInfo['end'] = '';
-
- this.toggle();
- linkDest = prompt('Enter the destination for the link:');
- if( linkDest == null ) {
- this.toggle();
- return surroundInfo;
- }
-
- surroundInfo['start'] = '<a href="' + linkDest + '">';
- surroundInfo['end'] = '</a>';
-
- this.toggle();
-
- return surroundInfo;
- }
-}
-
-/**
- * special button that only adds a link
- *
- * @param id
- * @param display
- * @param icon
- */
-edButtonBr = function(id, display, icon)
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButton(id, display, '', '', icon, -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.superclass(id, display, '<br />', '', icon, -1 );
-
- /**
- * special behaviour for this function... It will only ask for the link destination
- * and surround the current selection with the user's input
- *
- * @param txtId
- */
- this.surround = function( txtId, param )
- {
- surroundInfo = Array();
- surroundInfo['start'] = '<p>';
- surroundInfo['end'] = '</p>';
- this.toggle();
-
- return surroundInfo;
- }
-}
-
-/**
- * special button that adds/removes the "[@more@]" separator
- *
- * @param id
- * @param display
- * @param icon
- */
-edButtonMore = function(id, display, icon)
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButton(id, display, '', '', icon, -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.superclass(id, display, '', '', icon, -1 );
-
- /**
- * @private
- */
- this._getMoreTag = function()
- {
- return( "[@more@]" );
- }
-
- this.execute = function( txtId, param )
- {
- var txtArea = document.getElementById( txtId );
- var content = txtArea.value;
- var bFound = 0;
- var startPos = 0;
- var returnValue = '';
-
- // Parse all img tags and remove any 'more' tags
- while((startPos = content.indexOf(this._getMoreTag(), startPos)) != -1) {
- var contentAfter = content.substring(startPos + this._getMoreTag().length);
- content = content.substring(0, startPos) + contentAfter;
- startPos++;
- bFound = 1;
- }
-
- if(bFound ) {
- // the tag is already there and should be removed, we can use a regular expression
- // to easily remove it
- returnValue = '';
- txtArea.value = content;
- }
- else {
- // the tag is not there and can be safely added
- returnValue = '\n' + this._getMoreTag() + '\n';
- }
-
- return( returnValue );
- }
-}
-
-/**
- * special button that only adds an image
- *
- * @param id
- * @param display
- * @param icon
- */
-edButtonImage = function(id, display, icon)
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButton(id, display, '', '', icon, -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.superclass(id, display, '', '', icon, -1 );
-
- /**
- * reimplemented from edButton so that we can ask for an image url and a description
- *
- * @param txtId
- */
- this.execute = function( txtId, param )
- {
- textArea = document.getElementById(txtId);
-
- this.toggle();
-
- imgSrc = prompt('Enter the image source: ');
- if( imgSrc == null ) {
- this.toggle();
- return '';
- }
-
- imgAlt = prompt('Enter an image description:');
- if( imgAlt == null ) {
- this.toggle();
- return '';
- }
-
- this.toggle();
-
- // if everything went fine, add the link and return
- var imgTag = '<img src="' + imgSrc + '" alt="' + imgAlt + '" />';
- return imgTag;
- }
-}
-
-/**
- * special button that only adds an resource
- *
- * @param id
- * @param display
- * @param icon
- */
-edButtonResource = function(id, display, icon)
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButton(id, display, '', '', icon, -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.superclass(id, display, '', '', icon, -1 );
-
- /**
- * reimplemented from edButton so that we can ask for an image url and a description
- *
- * @param txtId
- */
- this.execute = function( txtId, param )
- {
- if ( txtId == 'postText' )
- resource_list_window(1);
- else
- resource_list_window(2);
- return '';
- }
-}
-
-/**
- * implements drop-down lists
- */
-edButtonList = function( id, options )
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButton(id, '', '', '', '', -1 );
- this.prototype.constructor = edButton;
- this.superclass = edButton;
-
- this.options = options;
-
- this.superclass(id, '', '', '', '', -1 );
-
- /**
- * renders the button. In our case, creates a drop-down list with the available options
- *
- * @param txtId
- * @returns the markup that is going to be written to the document
- */
- this.show = function(txtId, objName)
- {
- selectBox = '<select class="editorDropDownList" name=\''+this.id+'\' onChange="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', this);">';
- for( var key in this.options ) {
- if ( prototypeCompatibabilityCheck( key ) )
- continue;
- selectBox += '<option value=\''+key+'\'>'+this.options[key]+'</option>';
- }
- selectBox += '</select>';
-
- return( selectBox );
- }
-
- /**
- * reimplement this method for lists that should behave in a particular way when an option
- * is selected
- */
- this.execute = function( txtId, param )
- {
- // param is the drop-down list that generated the event, so we can easily learn
- // more about what was selected by
- opt = param.selectedIndex;
-
- return( param.options[opt].value );
- }
-
- /**
- * does nothing
- */
- this.surround = function( txtId, param )
- {
- surroundInfo = Array();
- return( surroundInfo );
- }
-
-}
-
-/**
- * button that shows a list with different font sizes
- */
-edFontSizeList = function( id, options )
-{
- //
- // strange javascript thingies used for object inheritance...
- //
- this.prototype = new edButtonList(id, options );
- this.prototype.constructor = edButtonList;
- this.superclass = edButtonList;
-
- this.superclass(id, options );
-
- /**
- * returns the right <span style=...></span> markup
- */
- this.execute = function( txtId, param )
- {
- // param is the drop-down list that generated the event, so we can easily learn
- // more about what was selected in the dropdown list
- opt = param.selectedIndex;
- fontSizePt = param.options[opt].value;
-
- spanCode = '<span style="font-size: '+fontSizePt+'pt;"></span>';
-
- return( spanCode );
- }
-
- /**
- * surrouns the selected text with the right <span>...</span> tags
- */
- this.surround = function( txtId, param )
- {
- opt = param.selectedIndex;
- fontSizePt = param.options[opt].value;
-
- surroundInfo = Array();
- surroundInfo['start'] = '<span style="font-size: '+fontSizePt+'pt;">';
- surroundInfo['end'] = '</span>';
- return( surroundInfo );
- }
-}
-
-
-/**
- * main class
- *
- */
-pLogEditor = function(txtId, objName)
-{
-
- // class attributes
- this.txtId = txtId;
- this.objName = objName;
-
- // array with all the open tags that haven't been closed
- this.tagStack = new Array();
-
- this.debug = false;
-
- // --
- // our very own toolbar
- // --
- this.toolBar = new Array();
- options = new Array();
- options['8'] = '8 pt';
- options['10'] = '10 pt';
- options['12'] = '12 pt';
- options['14'] = '14 pt';
- options['18'] = '18 pt';
- options['24'] = '24 pt';
- options['36'] = '36 pt';
- this.toolBar['list_font_size'] = new edFontSizeList( 'list_font_size', options );
- this.toolBar['1_but_b'] = new edButton( '1_but_b', 'bold', '<strong>', '</strong>', 'ed_format_bold.gif', 1 );
- this.toolBar['2_but_i'] = new edButton( '2_but_i', 'italics', '<em>', '</em>', 'ed_format_italic.gif', 1 );
- this.toolBar['3_but_u'] = new edButton( '3_but_u', 'underline', '<span style="text-decoration:underline">', '</span>', 'ed_format_underline.gif', 1 );
- this.toolBar['4_but_strikethrough'] = new edButton( '4_but_strikethrough', 'strikethrough', '<span style="text-decoration: line-through;">', '</span>', 'ed_format_strike.gif', 1 );
- this.toolBar['but_sep1'] = new edButtonSeparator();
- this.toolBar['but_align_left'] = new edButton( 'but_align_left', 'align left', '<div style="text-align: left;">', '</div>', 'ed_align_left.gif' );
- this.toolBar['but_align_center'] = new edButton( 'but_align_center', 'align center', '<div style="text-align: center;">', '</div>', 'ed_align_center.gif' );
- this.toolBar['but_align_right'] = new edButton( 'but_align_right', 'align right', '<div style="text-align: right;">', '</div>', 'ed_align_right.gif' );
- this.toolBar['but_align_justify'] = new edButton( 'but_align_justify', 'align justify', '<div style="text-align: justify;">', '</div>', 'ed_align_justify.gif' );
- this.toolBar['but_sep2'] = new edButtonSeparator();
- this.toolBar['but_ordered_list'] = new edButton( 'but_ordered_list', 'ordered list', '<ol><li></li></ol>', '', 'ed_list_num.gif', -1 );
- this.toolBar['but_unordered_list'] = new edButton( 'but_unordered_list', 'unordered list', '<ul><li></li></ul>', '', 'ed_list_bullet.gif', -1 );
- this.toolBar['5_but_a'] = new edButtonLink( '5_but_a', 'anchor', 'ed_link.gif' );
- this.toolBar['6_but_img']= new edButtonImage( '6_but_img', 'image', 'ed_image.gif' );
- this.toolBar['7_but_res']= new edButtonResource ('7_but_res', 'resource', 'ed_resource.gif' );
- this.toolBar['8_but_more']= new edButtonMore ('8_but_more', 'more', 'ed_more.gif' );
-
- /**
- * returns whether our browser supports the features that we are going
- * to use or not
- *
- * @return true if supported, false if not
- */
- this.isSupportedBrowser = function()
- {
- return( document.getElementById || document.all );
- }
-
- /**
- * draws the buttons. Takes no parameters
- *
- * @return nothing
- */
- this.showToolbar = function() {
-
- // first of all, check for unsupported browsers. If the browser
- // is not supported, we will silently not do anything... since we won't
- // even print the toolbar! (and nothing will happen without a toolbar)
- if( !this.isSupportedBrowser())
- return;
-
- markup = '';
-
- document.write('<div class="textEditorToolbar" id="textEditorToolbar">');
- for( var buttonId in this.toolBar ) {
- if ( prototypeCompatibabilityCheck( buttonId ) )
- continue;
- button = this.toolBar[buttonId];
- markup += button.show(this.txtId, this.objName);
- }
- document.write(markup);
- document.write('</div>');
-
- if( this.debug ) {
- document.write('<textarea>'+markup+'</textarea>');
- }
- }
-
- // after initializing the buttons, we can generate the toolbar
- // we can't call this method after defining it!! :)
- this.showToolbar();
-
- /**
- * calls the edButton.execute() callback
- *
- * @param txtId
- * @param buttonId
- * @return nothing
- */
- this.execute = function( txtId, buttonId, param )
- {
- // get the button from the array
- var edButton = this.toolBar[buttonId];
-
- // execute the button
- if( !this.selectionExists()) {
- result = edButton.execute( txtId, param );
- if( result != 'undefined' )
- this.insertText( result );
- }
- else {
- surroundInfo = edButton.surround( txtId, param );
- this.surroundText( surroundInfo['start'], surroundInfo['end'] );
- }
- }
-
- /**
- * returns the textarea object associated to this editor
- *
- * @return a textarea object
- */
- this.getTextArea = function()
- {
- textArea = document.getElementById( this.txtId );
- return textArea;
- }
-
- /**
- * calls the onMouseOver handler for this button
- *
- * @param txtId
- * @param buttonId
- */
- this.mouseOver = function( txtId, buttonId )
- {
- var edButton = this.toolBar[buttonId];
- edButton.mouseOver();
- }
-
- /**
- * calls the onMouseOut handler for this button
- *
- * @param txtId
- * @param buttonId
- */
- this.mouseOut = function( txtId, buttonId )
- {
- var edButton = this.toolBar[buttonId];
- edButton.mouseOut();
- }
-
- /**
- * inserts text where the cursor is
- *
- * @param myField
- * @param myValue
- * @return nothing
- */
- this.insertText = function(myValue)
- {
- myField = this.getTextArea();
-
- //IE support
- if (document.selection) {
- myField.focus();
- sel = document.selection.createRange();
- sel.text = myValue;
- myField.focus();
- }
- //MOZILLA/NETSCAPE support
- else if (myField.selectionStart || myField.selectionStart == '0') {
- var startPos = myField.selectionStart;
- var endPos = myField.selectionEnd;
- myField.value = myField.value.substring(0, startPos)
- + myValue
- + myField.value.substring(endPos, myField.value.length);
- myField.focus();
- myField.selectionStart = startPos + myValue.length;
- myField.selectionEnd = startPos + myValue.length;
- } else {
- myField.value += myValue;
- myField.focus();
- }
- }
-
- /**
- * surrounds the current selection with the given opening and closing texts
- *
- * @param myValueOpen
- * @param myValueClose
- */
- this.surroundText = function( myValueOpen, myValueClose )
- {
- myField = this.getTextArea();
- if (document.selection) {
- myField.focus();
- sel = document.selection.createRange();
- sel.text = myValueOpen + sel.text + myValueClose;
- myField.focus();
- }
- else if (myField.selectionStart || myField.selectionStart == '0') {
- var startPos = myField.selectionStart;
- var endPos = myField.selectionEnd;
- var cursorPos = endPos;
- myField.value = myField.value.substring(0, startPos)
- + myValueOpen
- + myField.value.substring(startPos, endPos)
- + myValueClose
- + myField.value.substring(endPos, myField.value.length);
- cursorPos += myValueOpen.length + myValueClose.length;
- myField.selectionStart = cursorPos;
- myField.selectionEnd = cursorPos;
- myField.focus();
- }
- else {
- myField.value += myValueOpen;
- myField.focus();
- }
- }
-
- /**
- * returns whether there is a user selection in the given editor
- *
- * @return True if there is a selection or false otherwise
- */
- this.selectionExists = function()
- {
- var selection = false;
- var myField = this.getTextArea();
-
- if (document.selection) {
- // for IE
- myField.focus();
- sel = document.selection.createRange();
- selection = (sel.text != '' );
- myField.focus();
- }
- else if (myField.selectionStart || myField.selectionStart == '0') {
- // for Mozilla
- selection = (myField.selectionEnd > myField.selectionStart)
- }
- else {
- // for everybody else...
- selection = false;
- }
-
- return selection;
- }
-}
-
-// Add this function to Prototype Lib Compatibability Check
-function prototypeCompatibabilityCheck( str )
-{
- if ( str == '_each' ||
- str == '_reverse' ||
- str == 'all' ||
- str == 'any' ||
- str == 'clear' ||
- str == 'collect' ||
- str == 'compact' ||
- str == 'detect' ||
- str == 'each' ||
- str == 'entries' ||
- str == 'extend' ||
- str == 'find' ||
- str == 'findAll' ||
- str == 'first' ||
- str == 'flatten' ||
- str == 'grep' ||
- str == 'include' ||
- str == 'indices' ||
- str == 'indexOf' ||
- str == 'inject' ||
- str == 'inspect' ||
- str == 'invoke' ||
- str == 'last' ||
- str == 'map' ||
- str == 'max' ||
- str == 'member' ||
- str == 'min' ||
- str == 'partition' ||
- str == 'pluck' ||
- str == 'reject' ||
- str == 'remove' ||
- str == 'removeItem' ||
- str == 'select' ||
- str == 'shift' ||
- str == 'sortBy' ||
- str == 'toArray' ||
- str == 'without' ||
- str == 'zip')
- return true;
- else
- return false;
-}
Modified: plog/branches/lifetype-1.2/templates/admin/editpost.template
===================================================================
--- plog/branches/lifetype-1.2/templates/admin/editpost.template 2007-02-10 09:15:45 UTC (rev 4706)
+++ plog/branches/lifetype-1.2/templates/admin/editpost.template 2007-02-10 10:11:49 UTC (rev 4707)
@@ -11,8 +11,7 @@
<script type="text/javascript" src="js/tinymce/tiny_mce_gzip.php"></script>
<script type="text/javascript" src="js/tinymce/tiny_mce-plog.js"></script>
{else}
- <link rel="stylesheet" href="js/editor/plogeditor.css" type="text/css" />
- <script type="text/javascript" src="js/editor/plogeditor.js"></script>
+ <script type="text/javascript" src="js/editor/lifetypeeditor.js"></script>
{/if}
<script type="text/javascript">
@@ -71,7 +70,7 @@
<label for="postText">{$locale->tr("text")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("text_help")}</div>
- {if !$htmlarea}<script type="text/javascript">var ed1 = new pLogEditor('postText','ed1');</script>{/if}
+ {if !$htmlarea}<script type="text/javascript">var ed1 = new Lifetype.UI.Editor('postText','ed1');</script>{/if}
<textarea {if $htmlarea==1}rows="20"{else}rows="15"{/if} id="postText" name="postText" style="width:100%">{$postText}</textarea>
<a href="{if $htmlarea}javascript:tinyMCE.execInstanceCommand('mce_editor_0','mceinsertresource',true);{else}javascript:ed1.execute('postText','7_but_res',''){/if}">{$locale->tr("insert_media")}</a> |
<a href="{if $htmlarea}javascript:tinyMCE.execInstanceCommand('mce_editor_0','mcemoremore');{else}javascript:ed1.execute('postText','8_but_more',''){/if}">{$locale->tr("insert_more")}</a>
Modified: plog/branches/lifetype-1.2/templates/admin/newpost.template
===================================================================
--- plog/branches/lifetype-1.2/templates/admin/newpost.template 2007-02-10 09:15:45 UTC (rev 4706)
+++ plog/branches/lifetype-1.2/templates/admin/newpost.template 2007-02-10 10:11:49 UTC (rev 4707)
@@ -15,8 +15,7 @@
<script type="text/javascript" src="js/tinymce/tiny_mce_gzip.php"></script>
<script type="text/javascript" src="js/tinymce/tiny_mce-plog.js"></script>
{else}
- <link rel="stylesheet" href="js/editor/plogeditor.css" type="text/css" />
- <script type="text/javascript" src="js/editor/plogeditor.js"></script>
+ <script type="text/javascript" src="js/editor/lifetypeeditor.js"></script>
{/if}
<script type="text/javascript">
@@ -85,7 +84,7 @@
<label for="postText">{$locale->tr("text")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("text_help")}</div>
- {if !$htmlarea}<script type="text/javascript">var ed1 = new pLogEditor('postText','ed1');</script>{/if}
+ {if !$htmlarea}<script type="text/javascript">var ed1 = new Lifetype.UI.Editor('postText','ed1');</script>{/if}
<textarea {if $htmlarea==1}rows="20"{else}rows="15"{/if} id="postText" name="postText" style="width:100%">{$postText}</textarea>
<a href="{if $htmlarea}javascript:tinyMCE.execInstanceCommand('mce_editor_0','mceinsertresource',true);{else}javascript:ed1.execute('postText','7_but_res',''){/if}">{$locale->tr("insert_media")}</a> |
<a href="{if $htmlarea}javascript:tinyMCE.execInstanceCommand('mce_editor_0','mcemoremore');{else}javascript:ed1.execute('postText','8_but_more',''){/if}">{$locale->tr("insert_more")}</a>
More information about the pLog-svn
mailing list