Adding a bit of jquery to toggle elements based on checkbox/radio selection

- + related template changes, using a data-controllerid to relate an element to a checkbox or radio button for visibility control

--HG--
branch : dev

src/Orchard.Web/Core/Navigation/Views/EditorTemplates/Parts/Navigation.EditMenuPart.ascx

@@ -4,6 +4,8 @@
 <fieldset>
     <%=Html.EditorFor(m => m.OnMainMenu) %>
     <label for="OnMainMenu" class="forcheckbox"><%=_Encoded("Add to the main menu") %></label>
-    <label for="MenuText"><%=_Encoded("Menu text") %></label>
+    <div data-controllerid="OnMainMenu" class="">
-    <%=Html.TextBoxFor(m => m.MenuText, new { @class = "large text" })%>
+        <label for="MenuText"><%=_Encoded("Menu text") %></label>
+        <%=Html.TextBoxFor(m => m.MenuText, new { @class = "large text" })%>
+    </div>
 </fieldset>

src/Orchard.Web/Core/Orchard.Core.csproj

@@ -232,6 +232,7 @@
     <Content Include="Common\Views\DisplayTemplates\Parts\Common.Body.Manage.ascx" />
     <Content Include="Dashboard\Views\Web.config" />
     <Content Include="Themes\Content\orchard.ico" />
+    <Content Include="Themes\Scripts\base.js" />
     <Content Include="Themes\Styles\special.css" />
     <Content Include="Themes\Views\NotFound.ascx" />
   </ItemGroup>

src/Orchard.Web/Core/Themes/Scripts/base.js

@@ -0,0 +1,30 @@
+jQuery.fn.extend({
+    toggleWhatYouControl: function() {
+        var _controller = $(this);
+        var _controllees = $("[data-controllerid=" + _controller.attr("id") + "]");
+        if (_controller.is(":checked")) {
+            $(_controllees.slideDown(200)[0]).find("input").focus();
+        } else {
+            _controllees.slideUp(200);
+        }
+    }
+});
+(function() {
+    $("[data-controllerid]").each(function() {
+        var controller = $("#" + $(this).attr("data-controllerid"));
+        if (!controller.is(":checked")) {
+            $("[data-controllerid=" + controller.attr("id") + "]").hide();
+        }
+        if (controller.is(":checkbox")) {
+            controller.change(function() {
+                $(this).toggleWhatYouControl();
+            });
+        } else if (controller.is(":radio")) {
+            $("[name=" + controller.attr("name") + "]").change(function() {
+                $("[name=" + $(this).attr("name") + "]").each(function() {
+                    $(this).toggleWhatYouControl();
+                });
+            });
+        }
+    });
+})();

src/Orchard.Web/Core/Themes/Views/HeadPreload.ascx

@@ -3,4 +3,5 @@
 if (Request.IsAuthenticated) { Html.RegisterStyle("special.css"); }
                                                                           
 Html.RegisterScript("jquery-1.4.1.js"); // <- change to .min.js for use on a real site :) 
+Html.RegisterFootScript("base.js");
 %>

src/Orchard.Web/Modules/Orchard.Comments/Views/EditorTemplates/Parts/Comments.SiteSettings.ascx

@@ -12,12 +12,12 @@
         <label class="forcheckbox" for="CommentSettings_EnableSpamProtection"><%=_Encoded("Enable spam protection") %></label>
         <%=Html.ValidationMessage("EnableSpamProtection", "*")%>
     </div>
-    <div>
+    <div data-controllerid="CommentSettings_EnableSpamProtection">
         <label for="CommentSettings_AkismetKey"><%=_Encoded("Akismet key") %></label>
         <%=Html.EditorFor(m => m.AkismetKey) %>
         <%=Html.ValidationMessage("AkismetKey", "*")%>
     </div>
-    <div>
+    <div data-controllerid="CommentSettings_EnableSpamProtection">
         <label for="CommentSettings_AkismetUrl"><%=_Encoded("Akismet endpoint URL") %></label>
         <%=Html.EditorFor(m => m.AkismetUrl) %>
         <%=Html.ValidationMessage("AkismetUrl", "*")%>

src/Orchard.Web/Modules/Orchard.Setup/Views/Setup/Index.ascx

@@ -20,7 +20,7 @@ using (Html.BeginFormAntiForgeryPost()) { %>
         <%=Html.PasswordFor(svm => svm.AdminPassword) %>
     </div>
 </fieldset>
-<fieldset class="data<%=Model.DatabaseOptions ? " builtin" : " sql" %>">
+<fieldset class="data">
     <legend><%=_Encoded("How would you like to store your data?") %></legend>
     <%=Html.ValidationMessage("DatabaseOptions", "Unable to setup data storage") %>
     <div>
@@ -30,20 +30,14 @@ using (Html.BeginFormAntiForgeryPost()) { %>
     <div>
         <%=Html.RadioButtonFor(svm => svm.DatabaseOptions, false, new { id = "sql" })%>
         <label for="sql" class="forcheckbox"><%=_Encoded("Use an existing SQL Server (or SQL Express) database") %></label>
-        <span>
+        <span data-controllerid="sql">
             <label for="DatabaseConnectionString"><%=_Encoded("Connection string") %></label>
             <%=Html.EditorFor(svm => svm.DatabaseConnectionString)%>
-            <i class="hint"><%=_Encoded("Example: Data Source=sqlServerName;Initial Catalog=dbName;Persist Security Info=True;User ID=userName;Password=password") %></i>
+            <span class="hint"><%=_Encoded("Example:") %><br /><%=_Encoded("Data Source=sqlServerName;Initial Catalog=dbName;Persist Security Info=True;User ID=userName;Password=password") %></span>
         </span>
     </div>
 </fieldset>
 <fieldset>
     <input class="button" type="submit" value="<%=_Encoded("Finish Setup") %>" />
 </fieldset><%
-} %>
+} %>
-<script type="text/javascript">
-    $(function() {
-        $("#sql").change(function() { $(this).siblings("span").slideDown(200).find("input").focus(); });
-        $("#builtin").change(function() { $("#sql").siblings("span").slideUp(200); });
-    });
-</script>

src/Orchard.Web/Themes/SafeMode/Styles/site.css

@@ -35,7 +35,10 @@ h3 {font-size: 130%;}
 h4 {font-size: 120%;}
 h5 {font-size: 105%;}
 
-
+.hint {
+    font-size:60%;
+    font-style:italic;
+}
 
 #header {
 	background:#2d2f25 url(images/backgroundHeader.gif) no-repeat bottom right;
@@ -48,7 +51,7 @@ h5 {font-size: 105%;}
 	background:url(images/orchardLogo.gif) no-repeat;
 	display:block;
 	height:60px;
-	margin:0 0 0 20px;;
+	margin:0 0 0 20px;
 }
 
 
@@ -146,10 +149,6 @@ button:focus, .button:focus {
     text-decoration:none;
 }
 
-html.dyn fieldset.data.builtin div span {
-    display:none;
-}
-
 
 /* Confirmations, Messages and the like
 ----------------------------------------------------------*/

src/Orchard.Web/Themes/SafeMode/Views/Layout.ascx

@@ -4,10 +4,13 @@
 <%  //todo: (heskew) this should really be using the IResourceManager if it's to be a theme especially for the jquery dep (w/out needing to copy into this theme...)
     var jquery = ResolveUrl("~/Core/Themes/Scripts/jquery-1.4.1.js");
     Model.Zones.AddAction("head:scripts", html =>
-      html.ViewContext.Writer.Write(@"<script type=""text/javascript"" src="""+jquery+@"""></script>"));
+      html.ViewContext.Writer.Write(@"<script type=""text/javascript"" src=""" + jquery + @"""></script>"));
+    var basejs = ResolveUrl("~/Core/Themes/Scripts/base.js");
+    Model.Zones.AddAction("content:after", html =>
+      html.ViewContext.Writer.Write(@"<script type=""text/javascript"" src=""" + basejs + @"""></script>"));
     var siteCss = ResolveUrl("../Styles/site.css");
     Model.Zones.AddAction("head:styles", html =>
-      html.ViewContext.Writer.Write(@"<link rel=""stylesheet"" type=""text/css"" href="""+siteCss+@"""/>")); %>
+      html.ViewContext.Writer.Write(@"<link rel=""stylesheet"" type=""text/css"" href=""" + siteCss + @"""/>")); %>
 <div id="header">
 	<div id="branding"><h1>Welcome to Orchard</h1></div>
 </div>