load attachment javascript into template the clean way

IkiWiki/Plugin/attachment.pm

@@ -7,6 +7,7 @@ use IkiWiki 3.00;
 
 sub import {
 	add_underlay("javascript");
+	add_underlay("attachment");
 	hook(type => "getsetup", id => "attachment", call => \&getsetup);
 	hook(type => "checkconfig", id => "attachment", call => \&checkconfig);
 	hook(type => "formbuilder_setup", id => "attachment", call => \&formbuilder_setup);
@@ -89,10 +90,20 @@ sub formbuilder_setup (@) {
 		$form->tmpl_param("field-upload" => '<input name="_submit" type="submit" value="Upload Attachment" />');
 		$form->tmpl_param("field-link" => '<input name="_submit" type="submit" value="Insert Links" />');
 
-		# Add the toggle javascript; the attachments interface uses
-		# it to toggle visibility.
+		# Add all the javascript used by the attachments interface.
 		require IkiWiki::Plugin::toggle;
-		$form->tmpl_param("javascript" => IkiWiki::Plugin::toggle::include_javascript($params{page}));
+		my $js=IkiWiki::Plugin::toggle::include_javascript($params{page});
+		$js.='<link rel="stylesheet" href="'.urlto("ikiwiki/jquery-ui.css", $params{page}).' id="theme">\n';
+		my @jsfiles=qw{jquery.min jquery-ui.min
+			jquery.tmpl.min jquery.iframe-transport
+			jquery.fileupload jquery.fileupload-ui
+		};
+		foreach my $file (@jsfiles) {
+			$js.='<script src="'.urlto("ikiwiki/$file.js", $params{page}).
+			     '" type="text/javascript" charset="utf-8"></script>'."\n";
+		}
+		$form->tmpl_param("javascript" => $js);
+
 		# Start with the attachments interface toggled invisible,
 		# but if it was used, keep it open.
 		if ($form->submitted ne "Upload Attachment" &&

doc/style.css

@@ -493,3 +493,11 @@ a.openid_large_btn:focus {
 .openid_selected {
 	border: 4px solid #DDD;
 }
+
+.fileupload-content .ui-progressbar {
+	width: 200px;
+	height: 20px;
+}
+.fileupload-content .ui-progressbar-value {
+	background: url(ikiwiki/pbar-ani.gif);
+}

templates/editpage.tmpl

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery-ui.css" id="theme"> 
-<link rel="stylesheet" href="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery.fileupload-ui.css"> 
 <TMPL_VAR JAVASCRIPT>
 <TMPL_VAR MESSAGE>
 <br />
@@ -29,12 +27,6 @@
 <a class="toggle" href="#attachments">Attachments</a>
 <div class="<TMPL_VAR ATTACHMENTS-CLASS>" id="attachments">
 <div id="fileupload"> 
-<script src="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery.min.js"></script> 
-<script src="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery-ui.min.js"></script> 
-<script src="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery.tmpl.min.js"></script> 
-<script src="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery.iframe-transport.js"></script> 
-<script src="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery.fileupload.js"></script> 
-<script src="http://localhost/~joey/tmp/blueimp-jQuery-File-Upload-7f89121/jquery.fileupload-ui.js"></script> 
 <script>
 $(function () { $('#fileupload').fileupload(); }); // initialize upload widget
 </script>

underlays/attachments/ikiwiki/jquery.fileupload-ui.css

@@ -1,8 +0,0 @@
-.fileupload-content .ui-progressbar {
-  width: 200px;
-  height: 20px;
-}
-
-.fileupload-content .ui-progressbar-value {
-  background: url(pbar-ani.gif);
-}