Item869: Added ajax-upload plugin, fixed dialogAPI waiting dialog, ad…

…ded waiting-dialog message parameter, changed dialog API

git-svn-id: http://svn.foswiki.org/trunk/JQueryCompatibilityModePlugin@2190 0b4bb1d4-4e5a-0410-9cc4-b2b747904278

data/System/JQueryCompatibilityModePlugin.txt

@@ -35,20 +35,24 @@ function myGloablFunc () { $("#foo").show() }
 .
 })(jQuery);
 </verbatim>
+You can use any shortcut variable you like in this code, so =;(function($foo) {..}= would let you use $foo in for access JQuery
 ---++ Included JQuery libraries
    * JQuery 1.3.1
    * JQuery 1.2 ( deprecated but available. Not used by default )
    * JQuery URL
    * all current UI libs ( effects, dialogs, tabs, slider...)
+   * jquery-ajax-upload 1.0 ( [[http://valums.com/ajax-upload/]] )
 
 ---+++ Something missing?
 There is a lot missing here, so this needs an update. Please send me a short note on what you want to add. Actually the policy is, adding anything which can be useful, so in 99% of the cases the library gets added directly! 
 ---++ Foswiki specific upgrades
 ---+++ DialogAPI
 *Attention*: The dialog API does actually only work with the core patch attached to this [[Foswiki:Development.ExtraResponseHeaderFields]FeaturePropsal]] ( 2 lines ). I hope it gets included in the next 1.1 release
 
-You can use the jquery.dialog api specific for Foswiki ( foswiki_specific/dialogAPI.js ). By calling the =show_dialog= method
+You can use the jquery.dialog api specific for Foswiki ( foswiki_specific/dialogAPI.js ). By calling the =fetchAndShowDialog= method
 
+---++++ fetchAndShowDialog
+*Fetch, setup and show a dialog*
 | *parameter* | *meaning* |
 | selector | The div ID which should be used as the dialog-destination. Generally its a display:hidden %BR% layer hidden somewhere in the layout. You must add a # to your id here, so if the id is %BR% "example" you must use "#example" as parameter here |
 | aurl | url to fetch  |
@@ -57,7 +61,25 @@ You can use the jquery.dialog api specific for Foswiki ( foswiki_specific/dialog
 | awidth | size of the dialog  |
 | awidth | size of the dialog  |
 
-You can use any shortcut variable you like in this code, so =;(function($foo) {..}= would let you use $foo in for acces JQuery
+---++++ setupDialog
+*Setup a dialog (not show)*
+| *parameter* | *meaning* |
+| selector | The div ID which should be used as the dialog-destination. Generally its a display:hidden %BR% layer hidden somewhere in the layout. You must add a # to your id here, so if the id is %BR% "example" you must use "#example" as parameter here |
+| data | the data the dialog should show |
+| atitle | title of the dialog  |
+| amodal | boolean, should the dialog be shown modal, so you must close it before you can use the page further |
+| awidth | size of the dialog  |
+| awidth | size of the dialog  |
+
+---++++ showDialog
+*Show a dialog, which was setup before*
+| *parameter* | *meaning* |
+| selector | The div ID which should be used as the dialog-destination. Generally its a display:hidden %BR% layer hidden somewhere in the layout. You must add a # to your id here, so if the id is %BR% "example" you must use "#example" as parameter here |
+
+---++++ hideDialog 
+*hide a dialog*
+| *parameter* | *meaning* |
+| selector | The div ID which should be used as the dialog-destination. Generally its a display:hidden %BR% layer hidden somewhere in the layout. You must add a # to your id here, so if the id is %BR% "example" you must use "#example" as parameter here |
 
 ---++ Installation instructions
    * just use the installer attached to the topic or even easier, use the configure-system/Extension to easy install it through an user-interface
@@ -68,8 +90,9 @@ __Note:__ You do not need to install anything on the browser to use this plugin.
 |  Plugin Author: | Foswiki:Main.EugenMayer |
 |  Copyright: | &copy; Collaborganize ( [[www.collaborganize.com]] )|
 |  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
-|  Plugin Version: | 26 Jan 2009 (V0.6) |
+|  Plugin Version: | 27 Jan 2009 (V0.7) |
 |  Change History: | <!-- versions below in reverse order --> |
+|  27 Jan 2009: | Added ajax-upload plugin, fixed dialogAPI waiting dialog, added waiting-dialog message parameter, changed dialog API |
 |  26 Jan 2009: | JQuery updated to 1.3.1 |
 |  26 Jan 2009: | Added a Foswiki specific, updated and friendlyfied docs |
 |  25 Jan 2009: | Fixing installer bug ( when JQueryCompatibilityModePlugin has been installed, other plugins are failing ( Foswiki:Tasks/Item864 ) |

lib/Foswiki/Plugins/JQueryCompatibilityModePlugin.pm

@@ -33,7 +33,7 @@ $VERSION = '$Rev: 12445$';
 # This is a free-form string you can use to "name" your own plugin version.
 # It is *not* used by the build automation tools, but is reported as part
 # of the version number in PLUGINDESCRIPTIONS.
-$RELEASE = '0.6';
+$RELEASE = '0.7';
 
 # Short description of this plugin
 # One line description, is shown in the %FoswikiWEB%.TextFormattingRules topic:
@@ -73,6 +73,7 @@ sub initPlugin {
     }
 
     addDialogScripts() if($Foswiki::cfg{Plugins}{JQueryCompatibilityModePlugin}{DialogInclude});
+    addAjaxUpload() if($Foswiki::cfg{Plugins}{JQueryCompatibilityModePlugin}{AjaxUploadPlugin});
     return 1;
 }
 
@@ -98,3 +99,9 @@ sub addDialogScripts() {
     $output = "<script language='javascript' type='text/javascript' src='$pluginPubHome/foswiki_specific/dialogAPI.js'></script>";
     Foswiki::Func::addToHEAD($jqPluginName."_foswiki.dialogAPI",$output,$jqPluginName."_foswiki.dialogAPI_settings");
 }
+
+sub addAjaxUpload() {    
+    my $pluginPubHome = Foswiki::Func::getPubUrlPath()."/System/$jqPluginName";
+    my $output = "<script language='javascript' type='text/javascript' src='$pluginPubHome/plugins/jquery.ajax_upload.min.js'></script>";
+    Foswiki::Func::addToHEAD($jqPluginName."_jq_ajax_upload",$output,$jqPluginName."_jq_init");    
+}

lib/Foswiki/Plugins/JQueryCompatibilityModePlugin/Config.spec

@@ -20,6 +20,10 @@ $Foswiki::cfg{Plugins}{JQueryCompatibilityModePlugin}{DialogInclude} = 0;
 # should the default settings for DialogAPI be included? You dont want this if you implemented own dialogs ( and use own skins, handlers )
 $Foswiki::cfg{Plugins}{JQueryCompatibilityModePlugin}{DialogDefaultSettingsInclude} = 1;
 
+# **BOOLEAN**
+# Plugin: should be the ajax-upload-plugin be included?
+$Foswiki::cfg{Plugins}{JQueryCompatibilityModePlugin}{AjaxUploadPlugin} = 0;
+
 
 
 

lib/Foswiki/Plugins/JQueryCompatibilityModePlugin/MANIFEST

@@ -2,6 +2,7 @@ lib/Foswiki/Plugins/JQueryCompatibilityModePlugin/Config.spec
 lib/Foswiki/Plugins/JQueryCompatibilityModePlugin.pm Perl module
 data/System/JQueryCompatibilityModePlugin.txt Plugin topic
 pub/System/JQueryCompatibilityModePlugin/jquery_init.js
+pub/System/JQueryCompatibilityModePlugin/plugins/jquery.ajax_upload.1.0.min.js
 pub/System/JQueryCompatibilityModePlugin/ui/ui.resizable.js
 pub/System/JQueryCompatibilityModePlugin/ui/effects.drop.js
 pub/System/JQueryCompatibilityModePlugin/ui/effects.core.js
@@ -173,3 +174,4 @@ pub/System/JQueryCompatibilityModePlugin/themes/flora/flora.datepicker.css
 pub/System/JQueryCompatibilityModePlugin/themes/flora/flora.css
 pub/System/JQueryCompatibilityModePlugin/themes/flora/flora.resizable.css
 pub/System/JQueryCompatibilityModePlugin/themes/ui.datepicker.css
+pub/System/JQueryCompatibilityModePlugin/themes/loader.gif

pub/System/JQueryCompatibilityModePlugin/foswiki_specific/dialogAPI.js

@@ -19,24 +19,13 @@
 
 
 /*****************************/
-
-/* makes it possible to show a dialog without knowing the jquery.dialog api.
- * selector: The div ID which should be used as the dialog-destination. Generally its a display:hidden 
- * 			 layer hidden somewhere in the layout. You must add a # to your id here, so if the id is
- * 			 "example" you must use "#example" as parameter here
- * aurl:	 url to fetch
- * atitle:	 title of the dialog
- * amodal: 	 boolean, should the dialog be shown modal, so you must close it before you can use the page further
- * awidth:	 size of the dialog
- * aheight:  size of the dialog
- */
-window.show_dialog = function(selector, aurl, atitle, amodal, awidth, aheight ) {
+;(function($j) {
+function bootupDialog(selector, atitle, amodal, awidth, aheight ) {
 	// remove the main window scrollbars, so users dont get confused by scrolling the outer window
 	if(amodal) {
 		setupScrollock();
 	}
-	// adding the skin as parameter, so the fetched data is without layout
-	aurl = addSkinParameter(aurl,window.SKIN.ajaxreqskin);
+
 	showWaitingLayer(selector);
 	// show this while we are waiting for the content
     $j(selector).dialog("position", "center");
@@ -53,11 +42,46 @@ window.show_dialog = function(selector, aurl, atitle, amodal, awidth, aheight )
 								        		background: "black"
 											},
 											close: function() { uninstallScrollock(); }
-					}); 
+	}); 
 
+}
+/* makes it possible to show a dialog without knowing the jquery.dialog api.
+ * selector: The div ID which should be used as the dialog-destination. Generally its a display:hidden 
+ * 			 layer hidden somewhere in the layout. You must add a # to your id here, so if the id is
+ * 			 "example" you must use "#example" as parameter here
+ * aurl:	 url to fetch
+ * atitle:	 title of the dialog
+ * amodal: 	 boolean, should the dialog be shown modal, so you must close it before you can use the page further
+ * awidth:	 size of the dialog
+ * aheight:  size of the dialog
+ */
+window.fetchAndShowDialog = function(selector, aurl, atitle, amodal, awidth, aheight ) {
+	fetchAndSetupDialog(selector, aurl, atitle, amodal, awidth, aheight );
+	showDialog();
+}
+/* makes it possible to sertup a dialog without knowing the jquery.dialog api.
+ * selector: The div ID which should be used as the dialog-destination. Generally its a display:hidden 
+ * 			 layer hidden somewhere in the layout. You must add a # to your id here, so if the id is
+ * 			 "example" you must use "#example" as parameter here
+ * data:	 data ( mostyl HTML ) to put inside the dialog
+ * atitle:	 title of the dialog
+ * amodal: 	 boolean, should the dialog be shown modal, so you must close it before you can use the page further
+ * awidth:	 size of the dialog
+ * aheight:  size of the dialog
+ */
+
+window.setupDialog = function (selector, data, atitle, amodal, awidth, aheight ) {
+	bootupDialog(selector, atitle, amodal, awidth, aheight);
+	$j(selector).html(data);
+}
+
+window.fetchAndSetupDialog = function(selector, aurl, atitle, amodal, awidth, aheight ) {
+	bootupDialog(selector, atitle, amodal, awidth, aheight);
 	// ok show the waiting dialog
 	$j(selector).show();    	
 	$j(selector).dialog("open");
+	// adding the skin as parameter, so the fetched data is without layout
+	aurl = addSkinParameter(aurl,window.SKIN.ajaxreqskin);
 	// now fetch the content
 	$j.ajax({			
 					 url : aurl,	
@@ -68,13 +92,25 @@ window.show_dialog = function(selector, aurl, atitle, amodal, awidth, aheight )
 	});
 }
 
+window.showDialog = function (selector) {	
+	$j(selector).show();    	
+	$j(selector).dialog("open");
+}
+
+window.closeDialog = function (selector) {
+	$j(selector).hide(); 
+	$j(selector).dialog("close");
+	$j(selector).dialog("destroy"); 
+}
 // General handler, which can be called after a fetch has been completed
 window.handleDialogCompleteResponse = function (xmlHttp, status,selector) {
 	if(xmlHttp.status != 200){ // error 
 			// TODO: what to do if error
 			 return;
 	}
 	var data = xmlHttp.responseText;	
+	// welcome to foswiki`s world. Lets remove all the useful "p`s" in arround the dialog
+	$j(selector+" > p").remove();
 	var action = xmlHttp.getResponseHeader("X-FoswikiAction");
 	var uri = xmlHttp.getResponseHeader("X-FoswikiUri");
 	handleGeneralData(selector,data,action,uri);
@@ -158,7 +194,12 @@ window.addSkinParameter = function (url,skin) {
 	return url;
 }
 
-window.showWaitingLayer= function (dialogselector) {
-	var wait = '<table width="100%" height="100%"><tr><td width="100%" align="center" valign="center"><img src="'+Foswiki.pubUrlPath+'/System/CollaborganizeExtensionPlugin/images/loader.gif"></td></tr></table>';
+window.showWaitingLayer= function (dialogselector, message) {
+	if(message == undefined) {
+		message = "loading...";
+	}
+
+	var wait = '<table width="100%" height="100%"><tr><td width="100%" align="center" valign="center" style="font-weight:bolder">'+message+'<br><br><img src="'+Foswiki.pubUrlPath+'/System/JQueryCompatibilityModePlugin/themes/loader.gif"></td></tr></table>';
     $j(dialogselector).html(wait);
 }
+})(jQuery);