You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@jspwiki.apache.org by br...@apache.org on 2009/06/14 21:11:09 UTC

svn commit: r784605 [1/6] - in /incubator/jspwiki/trunk: ./ src/WebContent/ src/WebContent/WEB-INF/classes/templates/ src/WebContent/scripts/ src/WebContent/templates/default/ src/WebContent/templates/default/editors/ src/WebContent/templates/default/i...

Author: brushed
Date: Sun Jun 14 19:11:08 2009
New Revision: 784605

URL: http://svn.apache.org/viewvc?rev=784605&view=rev
Log:
Version 3.0.0-svn-130: new version of jspwiki-common.js, jpswiki-edit.js and jspwiki.css. 
* extensive documentation has been added
* jspwiki-edit.js has been updated to replace posteditor.js. 
* The plain editor has a new simplified toolbar with some new icons.
* The js ajax routines better fit with new the stripes approach.

Added:
    incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/application_tile_horizontal.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/application_tile_vertical.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/arrleft.gif   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/arrright.gif   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/bg-button.gif   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/circle-256.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/cog.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/color_wheel.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/cursor.gif   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/find.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/font.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/key.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/paintbrush.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/plugin.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/redo.gif   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/text_letter_omega.png   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/undo.gif   (with props)
    incubator/jspwiki/trunk/src/WebContent/templates/default/images/vcard.png   (with props)
Modified:
    incubator/jspwiki/trunk/ChangeLog
    incubator/jspwiki/trunk/src/WebContent/Edit.jsp
    incubator/jspwiki/trunk/src/WebContent/WEB-INF/classes/templates/default.properties
    incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-common.js
    incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-commonstyles.js
    incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-edit.js
    incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-prefs.js
    incubator/jspwiki/trunk/src/WebContent/templates/default/Favorites.jsp
    incubator/jspwiki/trunk/src/WebContent/templates/default/FindContent.jsp
    incubator/jspwiki/trunk/src/WebContent/templates/default/PageActionsBottom.jsp
    incubator/jspwiki/trunk/src/WebContent/templates/default/SearchBox.jsp
    incubator/jspwiki/trunk/src/WebContent/templates/default/UserBox.jsp
    incubator/jspwiki/trunk/src/WebContent/templates/default/editors/plain.jsp
    incubator/jspwiki/trunk/src/WebContent/templates/default/jspwiki.css
    incubator/jspwiki/trunk/src/java/org/apache/wiki/Release.java

Modified: incubator/jspwiki/trunk/ChangeLog
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/ChangeLog?rev=784605&r1=784604&r2=784605&view=diff
==============================================================================
--- incubator/jspwiki/trunk/ChangeLog (original)
+++ incubator/jspwiki/trunk/ChangeLog Sun Jun 14 19:11:08 2009
@@ -1,3 +1,20 @@
+2009-06-14 Dirk Frederickx <brushed AT apache DOT org>
+
+        * 3.0.0-svn-130
+        
+        * Checked in new versions of jspwiki-common.js, jpswiki-edit.js 
+        and jspwiki.css. 
+        Extensive documentation has been added to the javascript and css
+        files, although not complete yet.
+        The jspwiki-edit.js has been updated to replace posteditor.js. Expect
+        still some loose ends though.  The plain editor has a new simplified
+        toolbar, but this is still work in progress.
+        
+        * Updated the js ajax routines to better fit with new the stripes approach.
+        FindContents.jsp is now dynamically updating search results.
+        The jsonrpc javascript is still unchanged.
+
+
 2009-06-11 Harry Metske <me...@apache.org>
 
         * 3.0.0-svn-129

Modified: incubator/jspwiki/trunk/src/WebContent/Edit.jsp
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/src/WebContent/Edit.jsp?rev=784605&r1=784604&r2=784605&view=diff
==============================================================================
--- incubator/jspwiki/trunk/src/WebContent/Edit.jsp (original)
+++ incubator/jspwiki/trunk/src/WebContent/Edit.jsp Sun Jun 14 19:11:08 2009
@@ -35,7 +35,10 @@
   <!-- Add Javascript for editors -->
   <s:layout-component name="script">
     <script type="text/javascript" src="<wiki:Link format='url' jsp='scripts/jspwiki-edit.js' />"></script>
+    <script type="text/javascript" src="<wiki:Link format='url' jsp='scripts/dialog.js' />"></script>
+    <%--
     <script type="text/javascript" src="<wiki:Link format='url' jsp='scripts/posteditor.js' />"></script>
+    --%>
   </s:layout-component>
 
   <s:layout-component name="content">

Modified: incubator/jspwiki/trunk/src/WebContent/WEB-INF/classes/templates/default.properties
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/src/WebContent/WEB-INF/classes/templates/default.properties?rev=784605&r1=784604&r2=784605&view=diff
==============================================================================
--- incubator/jspwiki/trunk/src/WebContent/WEB-INF/classes/templates/default.properties (original)
+++ incubator/jspwiki/trunk/src/WebContent/WEB-INF/classes/templates/default.properties Sun Jun 14 19:11:08 2009
@@ -29,6 +29,7 @@
 common.nopage=This page does not exist.  Why don&#8217;t you go and {0}?
 common.createit=create it
 common.more=More...
+common.ajax.loading=Loading...
 # AttachmentTab.jsp
 
 attach.tab=Attach
@@ -398,7 +399,13 @@
 editor.plain.cancel.title=Cancel editing. Your changes will be lost. [ q ]
 editor.commentsignature=Comment signature
 editor.plain.toolbar=Toolbar
+editor.plain.action=Action
+editor.plain.insert=Insert
+editor.plain.style=Style
+editor.plain.extra=Extra
 editor.plain.find=Find
+editor.plain.find.title=Find
+editor.plain.config.title=Configure the editor
 editor.plain.replace=Replace
 editor.plain.matchcase=Match Case
 editor.plain.regexp=RegExp
@@ -415,7 +422,8 @@
 editor.plain.smartpairs.title=Auto pairing of () [] {} &lt;&gt; &quot;&quot; &#39;&#39;
 editor.plain.tabcompletion=Tab Completion (keyword+Tab)
 editor.plain.tabcompletion.title=Auto expansion of keyword to Wiki Markup
-editor.plain.sneakpreview.title=Live Preview. The live preview will automatically update when you click outside the editor text area.
+editor.plain.livepreview=Live Preview
+editor.plain.livepreview.title=The live preview will automatically update when you type in the editor text area.
 editor.plain.tbLink.title=link - Insert wiki link
 editor.plain.tbH1.title=h1 - Insert heading1
 editor.plain.tbH2.title=h2 - Insert heading2

Added: incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js?rev=784605&view=auto
==============================================================================
--- incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js (added)
+++ incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js Sun Jun 14 19:11:08 2009
@@ -0,0 +1,434 @@
+
+/*
+Class: SelectionDialog
+	A selection dialog generates a dialog box, with a set
+	of selectable/clickable items. 
+
+Arguments:
+	options - see [Dialog] object
+
+Options:
+	body - set of selectable items, defined as a string ,array or object.
+	onSelect - callback function when an item is clicked
+	autoClose - (default false) hide the dialog when an iten is clicked
+
+Inherits from:
+	[Dialog]
+	
+Example:
+	(start code)
+	new SelectionDialog({
+		body:"a|b|c|d",
+		caption:"Snippet Dialog",
+		autoClose:true,
+		onClick:function(v){ alert('clicked '+v) }
+	});
+	new SelectionDialog({
+		body:[a,b,c,d],
+		caption:"Snippet Dialog",
+		onClick:function(v){ alert('clicked '+v) }
+	});
+	new SelectionDialog({
+		body:{'a':'avalue','b':'bvalue','c':'cvalue'},
+		caption:"Snippet Dialog",
+		onClick:function(v){ alert('clicked '+v) }
+	});
+	(end code)
+*/
+var SelectionDialog = Dialog.extend({
+
+	options: { 
+		//onSelect: function(value){},
+		//autoClose: false
+	},	
+
+	initialize:function( options ){
+
+		this.parent(options);
+		this.element.addClass('selectionDialog');
+		this.setBody(options.body)
+			.resetPosition();
+	},
+
+	setBody: function(content){
+
+		//turn 'multi|value|string' into [array]
+		if( $type(content) == 'string' ) content = content.split('|');
+
+		//turn [array] into {object} with name:value pairs
+		if( $type(content) == 'array' ) content = content.associate(content);
+
+		//turn {object} in DOM ul/li clickable selection
+		if( $type(content) == 'object' ){
+
+			var els = [], onselect = this.onSelect.bind(this), i;
+			for( i in content ){
+				els.push( new Element('li',{ 
+					'title': content[i],
+					'events': {
+						'click': onselect,
+						'mouseout': function(){ this.removeClass('hover') },
+						'mouseover': function(){ this.addClass('hover') }
+					}
+				}).setHTML( i/*.trunc(36)*/ ) );
+			};
+			
+			this.parent( new Element('ul').adopt(els) );
+			//this.body.empty().adopt( new Element('ul').adopt(els) );
+		}
+		
+		return this;
+	},
+	/*
+	Function: onSelect
+		Click event handler for selectable items. 
+		When the autoClose option is set, the dialog will be hidden.
+		Fires the 'onSelect' event.
+	*/
+	onSelect: function(event){
+
+		if( event ){ event = new Event(event).stop() }; 
+		if( this.options.autoClose ) this.hide();		
+				
+		this.fireEvent('onSelect', event.target.getProperty('title')); 
+	}
+
+});
+
+/*
+Class: FontDialog
+	The FontDialog is a SelectionDialog object, to selecting a font.
+	Each selectable item is redered in its proper font.
+
+Arguments:
+	options - optional, see options below
+
+Options:
+	fonts - (object) set of font definitions with name/value
+	others - see SelectionDialog options
+
+Inherits from:
+	[SelectionDialog]
+	
+Example
+	(start code)
+	dialog= new FontDialog({
+		fonts:{'Font name1':'font1', 'Font name2':'font2'},
+		caption:"Select a Font",
+		onSelect:function(value){ alert( value ); }
+	});
+	(end)
+*/
+var FontDialog = SelectionDialog.extend({
+
+	options: { 
+		fonts: {
+			'Arial':'arial',
+			'Comic Sans':'comic sans ms',
+			'Courier New':'courier new',
+			'Georgia':'georgia', 
+			'Helvetica':'helvetica', 
+			'Impact':'impact', 
+			'Times':'times new roman', 
+			'Trebuchet':'trebuchet ms', 
+			'Verdana':'verdana'
+		}
+	},	
+
+	initialize:function(options){
+
+		options.body = options.fonts ? options.fonts : this.options.fonts;
+		this.parent(options);
+		this.element.addClass('fontDialog');
+		$ES('li',this.body).each(function(li){
+			li.setStyle('font-family', li.getProperty('title') );
+		});
+	}
+	
+});
+
+/*
+Class: CharsDialog
+	The CharsDialog is a Dialog object, to support selection of special
+	character. 
+
+Arguments:
+	options - optional, see options below
+
+Options:
+	others - see Dialog options
+
+Inherits from:
+	[Dialog]
+*/
+var CharsDialog = Dialog.extend({
+
+	options: { 
+		//onChange: Class.empty, 
+		//autoClose: false,
+		chars: [
+			'&nbsp;','&iexcl;','&cent;','&pound;','&yen;','&sect;','&uml;','&copy;','&laquo;','&not;','&reg;',
+			'&deg;','&plusmn;','&acute;','&micro;','&para;','&middot;','&cedil;','&raquo;','&iquest;','&Agrave;','&Aacute;',
+			'&Acirc;','&Atilde;','&Auml;','&Aring;','&AElig;','&Ccedil;','&Egrave;','&Eacute;','&Ecirc;','&Euml;','&Igrave;',
+			'&Iacute;','&Icirc;','&Iuml;','&Ntilde;','&Ograve;','&Oacute;','&Ocirc;','&Otilde;','&Ouml;','&Oslash;','&Ugrave;',
+			'&Uacute;','&Ucirc;','&Uuml;','&szlig;','&agrave;','&aacute;','&acirc;','&atilde;','&auml;','&aring;','&aelig;',
+			'&ccedil;','&egrave;','&eacute;','&ecirc;','&euml;','&igrave;','&iacute;','&icirc;','&iuml;','&ntilde;','&ograve;',
+			'&oacute;','&ocirc;','&otilde;','&ouml;','&divide;','&oslash;','&ugrave;','&uacute;','&ucirc','&uuml','&yuml;',
+			'&#8218;','&#402;','&#8222;','&#8230;','&#8224;','&#8225;','&#710;','&#8240;','&#8249;','&#338;','&#8216;',
+			'&#8217;','&#8220;','&#8221;','&#8226;','&#8211;','&#8212;','&#732;','&#8482;','&#8250;','&#339;','&#376;'
+		]
+	},	
+
+	initialize:function(options){
+		this.parent(options);
+		this.element.addClass('charsDialog');
+
+		/* inspired by smarkup */
+		var arr = [], 
+			chars = this.options.chars,
+			rowCount = chars.length / 11, //fixme: fixed width of table !!
+			onselect = this.onSelect.bind(this);
+		
+		for (var i = 0; i < rowCount; i++) {
+			arr.push( '<tr>' );
+			for (var j = i * 11; j < (i * 11 + 11); j++) {
+				arr.extend( ['<td title="', chars[j].replace('&','&amp;'), '" >', chars[j], '</td>' ] );
+			}
+			arr.push( '</tr>' );
+		}
+		
+		this.body.adopt( new Element('table',{
+			'class':'charsDialog',
+			'events':{ 'click': onselect }
+		}).setHTML( '<tbody>', arr.join(''), '</tbody>' )
+		);
+		
+		this.resetPosition();
+
+	},
+
+	onSelect: function(e){
+		if( this.options.autoClose ) this.hide();
+		this.fireEvent('onSelect', e.target.getProperty('title')); 
+	}
+
+});
+
+
+/*
+Class: ColorDialog
+	The ColorDialog is a [Dialog] which allow visual entry of hexadecimal color 
+	values.
+
+Inspiration:
+	- http://www.colorjack.com/software/dhtml+color+sphere.html
+	- Chris Esler, http://www.chrisesler.com/mootools
+
+Inherits from:
+	[Dialog]
+
+Example:
+	ColorDialog with toggle button
+	(start code)
+	<script>
+		var cd = new ColorDialog( {
+			relativeTo: $('colorButton'), 
+			wheelImage:'circle.png',
+			onChange:function(color){ $('mytarget').setStyle('background',color); }
+		});
+		$('colorButton').addEvent('click', cd.toggle.bind(cd));
+	</script>
+	(end code)
+*/
+var ColorDialog = Dialog.extend({
+
+	options: {
+		//onChange: function(color){},
+		colorImage: 'images/circle-256.png',
+		resize:{x:[96,400],y:[96,400]}  //min/max limits for the resizer
+	},	
+
+	initialize: function(options){
+	
+		var self = this;
+		self.parent(options);	
+		self.element.addClass('colorDialog');
+		self.hsv = [0,0,100];//starting color.
+		self.color = new Element('span').setHTML('#ffffff').injectTop(self.caption);
+		self.cursor = new Element('div',{
+			'class':'cursor',
+			'styles':{'top':86,'left':68}
+			//funny calc -- checkout the dialog css defs 
+			// 86=64+32-8 (-8=offset circle)
+			// 68=64+10-5-1 (5=half cursor size, -1=offset circle)
+		});
+		self.body.adopt(
+			self.cursor,
+			new Element('img',{'src':self.options.colorImage})
+		);
+
+		self.resize( 128 ); //default size of the body/wheel
+		
+		new Drag.Base(self.cursor,{
+			handle:self.body,
+			snap:0,
+			//also update the wheel on mouse-down
+			onStart:function(){ self.setHSV( this.mouse.start ) },
+			onDrag:function(){ self.setHSV( this.mouse.now ) }
+		});
+
+		self.resetPosition();
+	},
+
+	/*
+	Function: resize
+	*/
+	resize: function( bodywidth ){
+		this.moveCursor( bodywidth );
+		this.parent( bodywidth );
+	},
+
+	/*
+	Function: setHSV
+		Recalculate the HSV-color based on x/y mouse coordinates.
+		After recalculation, the color-wheel cursor is repositioned
+		and the 'onChange' event is fired.
+		
+	Arguments:
+		page - object with {{ {x:.., y:.. } }} coordinates
+	*/
+	setHSV: function( page ){
+
+		var body = this.body.getCoordinates(), 
+			v = [page.x - body.left + 5, page.y - body.top +28 ],
+			W = body.width,
+			W2 = W/2, 
+			W3 = W2/2, 
+
+			x = v[0]-W2-3, 
+			y = W-v[1]-W2+21,
+			SV = Math.sqrt(Math.pow(x,2)+Math.pow(y,2)),
+			hue = Math.atan2(x,y)/(Math.PI*2);
+			
+		this.hsv = [
+				hue>0?(hue*360):((hue*360)+360),
+				SV<W3?(SV/W3)*100:100, 
+				SV>=W3?Math.max(0,1-((SV-W3)/(W3)))*100:100
+			];
+
+		var hexVal = this.hsv.hsv2rgb().rgbToHex(); 
+		this.color.setHTML( hexVal ).setStyles({
+			'color': new Color(hexVal).invert().hex,
+			'background-color': hexVal 
+		}); 
+		this.moveCursor( W );
+		this.fireEvent('onChange', hexVal);
+
+	},
+
+	/*
+	Function: moveCursor
+		Reposition the cursor based on the width argument
+		
+	Argument
+		width - in px
+	*/
+	moveCursor: function( width ){
+
+		var hsv = this.hsv,
+			W2 = width/2, //half of the width
+			rad = (hsv[0]/360) * (Math.PI*2), //radius
+			hyp = (hsv[1] + (100-hsv[2])) / 100*(W2/2); //hypothenuse
+
+		this.cursor.setStyles({
+			left: Math.round(Math.abs(Math.round(Math.sin(rad)*hyp) + W2 + 3)),  //+1
+			top: Math.round(Math.abs(Math.round(Math.cos(rad)*hyp) - W2 - 21))  //-18
+		});	
+
+	}
+		
+});
+ColorDialog.implement(new Options); //mootools v1.1
+
+/*
+Function: hsv2rgb
+	Convert HSV values into RGB values
+*/
+Array.extend({
+	hsv2rgb: function(){ 
+		// easyrgb.com/math.php?MATH=M21#text21
+	    var R,G,A,B,C,F,
+	    	S=this[1]/100,
+	    	V=this[2]/100,
+	    	H=this[0]/360;
+
+	    if( S>0 ){ 
+	    
+	    	if(H>=1) H=0;
+	        H=6*H; 
+	        F=H-Math.floor(H);
+	        A=Math.round(255*V*(1-S));
+	        B=Math.round(255*V*(1-(S*F)));
+	        C=Math.round(255*V*(1-(S*(1-F))));
+	        V=Math.round(255*V); 
+
+	        switch(Math.floor(H)) {
+	            case 0: R=V; G=C; B=A; break;
+	            case 1: R=B; G=V; B=A; break;
+	            case 2: R=A; G=V; B=C; break;
+	            case 3: R=A; G=B; B=V; break;
+	            case 4: R=C; G=A; B=V; break;
+	            case 5: R=V; G=A; B=B; break;
+	        }
+	        return([R?R:0,G?G:0,B?B:0]);
+	    }
+	    else return([(V=Math.round(V*255)),V,V]);
+	}
+})
+
+
+/*
+Class: FormDialog
+	The FormDialog is a dialog 
+
+Example:
+	(start code)
+	FormDialog({
+		body: dom-element,
+		buttons: { ok:'OK-label', cancel:'Cancel-label' }
+		options:{
+			onSubmit:function( queryString ){ //process-results
+		}
+	(end)
+*/
+var FormDialog = Dialog.extend({
+	//todo
+});
+
+
+/*
+Class: TableDialog
+	The TableDialog is a simple wiki table editor based on the Dialog class.
+
+	- click cell and get small input-textarea to enter markup
+	- allow to toggle header/normal-cell flag per cell
+	- hover column header (A,B,C...) and click to insert/delete
+	- hover row header (1,2,3,...) and click to insert/delete
+	- allow to extend colums
+	- allow to extend rows
+	- automatically converts wiki to table and vice-versa
+	- FFS: support [{Table plugin syntax to merge cells 
+	  This requires to select multiple cells:  join/unjoin cells
+	
+Example:
+	(start code)
+	WikiTableDialog( wiki-markup ?? textarea,{
+			buttons: { ok:'OK-label', cancel:'Cancel-label' }
+			onChange:function()
+		}
+	})
+	(end)
+*/
+var TableDialog = Dialog.extend({
+	//todo
+});