factor out onclick javascript

6 files changed, 16 insertions, 11 deletions

diff --git a/Assistant/WebApp.hs b/Assistant/WebApp.hs
index 5bb2339b3..4418a4d98 100644
--- a/Assistant/WebApp.hs
+++ b/Assistant/WebApp.hs
@@ -165,3 +165,11 @@ webAppFormAuthToken :: Widget
 webAppFormAuthToken = do
 	webapp <- lift getYesod
 	[whamlet|<input type="hidden" name="auth" value="#{secretToken webapp}">|]
+
+{- A button with an icon, and maybe label, that can be clicked to perform
+ - some action.
+ - With javascript, clicking it POSTs the Route, and remains on the same
+ - page.
+ - With noscript, clicking it GETs the Route. -}
+actionButton :: Route WebApp -> (Maybe String) -> String -> String -> Widget
+actionButton route label buttonclass iconclass = $(widgetFile "actionbutton")
diff --git a/Assistant/WebApp/SideBar.hs b/Assistant/WebApp/SideBar.hs
index 509c5fa2f..d44c75d43 100644
--- a/Assistant/WebApp/SideBar.hs
+++ b/Assistant/WebApp/SideBar.hs
@@ -53,7 +53,6 @@ sideBarDisplay = do
 		addalert :: AlertId -> Bool -> Bool -> Text -> Maybe Text -> Text -> Maybe String -> Widget
 		addalert i closable block divclass heading message icon = do
 			let alertid = show i
-			let closealert = CloseAlert i
 			$(widgetFile "sidebar/alert")
 
 {- Called by client to get a sidebar display.
diff --git a/templates/actionbutton.hamlet b/templates/actionbutton.hamlet
new file mode 100644
index 000000000..03abe5c11
--- /dev/null
+++ b/templates/actionbutton.hamlet
@@ -0,0 +1,2 @@
+<a class="#{buttonclass}" href="@{route}" onclick="(function( $ ) { $.post('@{route}'); })( jQuery ); return false;">
+  <i class="#{iconclass}"></i> #{fromMaybe "" label}
diff --git a/templates/dashboard/transfers.hamlet b/templates/dashboard/transfers.hamlet
index 150dcc296..6ace2ae84 100644
--- a/templates/dashboard/transfers.hamlet
+++ b/templates/dashboard/transfers.hamlet
@@ -28,10 +28,7 @@
                 <div .bar style="width: #{percent};">
           <div .btn-group .span2>
             $if isNothing (startedTime info)
-              <a .btn href="@{StartTransferR transfer}" onclick="(function( $ ) { $.post('@{StartTransferR transfer}'); })( jQuery ); return false;">
-                <i .icon-play title="start"></i>
+              ^{actionButton (StartTransferR transfer) Nothing "btn" "icon-play"}
             $else
-              <a .btn href="@{PauseTransferR transfer}" onclick="(function( $ ) { $.post('@{PauseTransferR transfer}'); })( jQuery ); return false;">
-                <i .icon-pause title="pause"></i>
-            <a .btn href="@{CancelTransferR transfer}" onclick="(function( $ ) { $.post('@{CancelTransferR transfer}'); })( jQuery ); return false;">
-              <i .icon-remove title="cancel"></i>
+              ^{actionButton (PauseTransferR transfer) Nothing "btn" "icon-pause"}
+            ^{actionButton (CancelTransferR transfer) Nothing "btn" "icon-remove"}
diff --git a/templates/page.hamlet b/templates/page.hamlet
index 2d33e9561..0c07c9130 100644
--- a/templates/page.hamlet
+++ b/templates/page.hamlet
@@ -10,8 +10,7 @@
       $maybe reldir <- relDir webapp
         <ul .nav .pull-right>
           <li>
-            <a href="@{FileBrowserR}" onclick="(function( $ ) { $.post('@{FileBrowserR}'); })( jQuery ); return false;">
-              <i .icon-folder-open .icon-white></i> Files
+            ^{actionButton FileBrowserR (Just "Files") "" "icon-folder-open icon-white"}
           <li .dropdown #menu1>
             <a .dropdown-toggle data-toggle="dropdown" href="#menu1">
               Current Repository: #{reldir}
diff --git a/templates/sidebar/alert.hamlet b/templates/sidebar/alert.hamlet
index 4275931a9..85ff58482 100644
--- a/templates/sidebar/alert.hamlet
+++ b/templates/sidebar/alert.hamlet
@@ -1,6 +1,6 @@
-<div .alert .fade .in .#{divclass} :block:.alert-block ##{alertid} :closable:onclick="(function( $ ) { $.get('@{closealert}') })( jQuery );">
+<div .alert .fade .in .#{divclass} :block:.alert-block ##{alertid} :closable:onclick="(function( $ ) { $.get('@{CloseAlert i}') })( jQuery );">
   $if closable
-    <a .close data-dismiss="alert">&times;</a>
+    <a .close>&times;</a>
   $maybe h <- heading
     $if block
       <h4 .alert-heading>