Adding the jqueryui accordion to the search form
authorSteve Sutton <steve@gaslightmedia.com>
Mon, 15 Jul 2013 17:24:26 +0000 (17:24 +0000)
committerSteve Sutton <steve@gaslightmedia.com>
Mon, 15 Jul 2013 17:24:26 +0000 (17:24 +0000)
Toolkit/Members/UserSearchForm.php
Toolkit/Members/libjs/userSearchForm.js [new file with mode: 0644]
Toolkit/Members/templates/userSearchForm.html

index bb22c83..e7589e7 100644 (file)
@@ -569,7 +569,12 @@ class Toolkit_Members_UserSearchForm
                array $flexyOpts,
                Toolkit_Toolbox_PageGatewayAbstract $pageGateway
        ) {
-               $GLOBALS['styleSheets'][] = BASE_URL . 'Toolkit/Members/css/member.css';
+               $GLOBALS['styleSheets'][]
+            = BASE_URL . 'Toolkit/Members/css/member.css';
+        $GLOBALS['styleSheets'][]   = JQUERY_UI_CDN_CSS;
+        $GLOBALS['topScripts'][]    = JQUERY_UI_CDN_JS;
+        $GLOBALS['bottomScripts'][]
+            = BASE_URL . 'Toolkit/Members/libjs/userSearchForm.js';
         $tpl = new HTML_Template_Flexy($flexyOpts);
         $tpl->compile($this->formTemplate);
 
@@ -598,7 +603,6 @@ class Toolkit_Members_UserSearchForm
             ? $counties
             : null;
         $page->amenities = $amenities;
-//        var_dump($page);exit;
 
         return $tpl->bufferedOutputObject($page);
        }
diff --git a/Toolkit/Members/libjs/userSearchForm.js b/Toolkit/Members/libjs/userSearchForm.js
new file mode 100644 (file)
index 0000000..9d9e601
--- /dev/null
@@ -0,0 +1,3 @@
+$(function() {
+    $( "#accordion" ).accordion();
+});
\ No newline at end of file
index d9e7880..ff3a111 100644 (file)
@@ -1,10 +1,11 @@
 <style>
-    fieldset #glm-member-search {width:100%;}
+    .ui-accordion-content {height:260px;width: 100}
+    #accordion, #category-search {width: 100%;}
     fieldset #glm-member-search label {width:25%;text-align: right;}
     .fieldcontain {display:block;width:100%;clear:right; margin: 10px 0;padding: 5px;}
-       .fieldcontain input[type=submit] {
-               float: right;
-       }
+    .fieldcontain input[type=submit] {
+        float: right;
+    }
     .glm-chbx-label {width:280px;text-align: left;float:left;display:inline;}
     .glm-chbx {width:580px;text-align: left;display:block;clear:right;float:right;}
     .fieldHdr {width: 120px;float: left;display: block;text-align: right;margin:0 15px;font-weight: bold;}
         action="{formURL:h}"
         method="post">
         <input type="hidden" name="search" value="1">
-               <fieldset id="glm-member-search">
-                       <legend>Search for Trails</legend>
-            <div class="fieldcontain">
-                <label class="fieldHdr">Trail Name</label>
-                <input
-                    type="search"
-                    name="member_name"
-                    placeholder="trail name"
-                    value="{_POST[member_name]}">
-            </div>
-            <div flexy:if="regions" class="fieldcontain">
-                <label class="fieldHdr">Regions</label>
-                <select name="regionId">
-                    <option value="">-- Select --</option>
-                    {foreach:regions,id,name}
-                    <?php
-                    echo '<option value="'.$id.'"
+        <div id="accordion">
+            <h3><a href="#">Search for Trails</a></h3>
+            <div>
+                <div class="fieldcontain">
+                    <label class="fieldHdr">Trail Name</label>
+                    <input
+                        type="search"
+                        name="member_name"
+                        placeholder="trail name"
+                        value="{_POST[member_name]}">
+                </div>
+                <div flexy:if="regions" class="fieldcontain">
+                    <label class="fieldHdr">Regions</label>
+                    <select name="regionId">
+                        <option value="">-- Select --</option>
+                        {foreach:regions,id,name}
+                        <?php
+                        echo '<option value="'.$id.'"
                         '.(($id == $_POST['region'])?'selected':'')
                         .'>'.$name.'</option>';
-                    ?>
-                    {end:}
-                </select>
-            </div>
-            <div flexy:if="counties" class="fieldcontain">
-                <label class="fieldHdr">Counties</label>
-                <select name="countyId">
-                    <option value="">-- Select --</option>
-                    {foreach:counties,id,name}
-                    <?php
-                    echo '<option value="'.$id.'"
+                        ?>
+                        {end:}
+                    </select>
+                </div>
+                <div flexy:if="counties" class="fieldcontain">
+                    <label class="fieldHdr">Counties</label>
+                    <select name="countyId">
+                        <option value="">-- Select --</option>
+                        {foreach:counties,id,name}
+                        <?php
+                        echo '<option value="'.$id.'"
                         '.(($id == $_POST['county'])?'selected':'')
                         .'>'.$name.'</option>';
-                    ?>
-                    {end:}
-                </select>
-            </div>
-            <div flexy:if="activities" class="fieldcontain">
-                <label class="fieldHdr2">Activities</label>
-                <div class="glm-chbx">
-                {foreach:activities,id,name}
-                <label for="chbx-{id:h}" class="glm-chbx-label">
-                  <?php
-                  echo '<input
-                    id="chbx-'.$id.'"
-                    type="checkbox"
-                    name="activity[]"
-                    value="'.$id.'"
-                    '.((isset($_POST['activity'])
-                    && is_array($_POST['activity'])
-                    && in_array($id, $_POST['activity']))?'checked':'').'
-                  >';
-                  ?>
-                  {name}
-                </label>
-                {end:}
+                        ?>
+                        {end:}
+                    </select>
                 </div>
             </div>
-            <div flexy:if="parks" class="fieldcontain">
-                <label class="fieldHdr2">Parks</label>
-                <div class="glm-chbx">
-                {foreach:parks,id,name}
-                <label for="chbx-{id:h}" class="glm-chbx-label">
-                  <?php
-                  echo '<input
-                    id="chbx-'.$id.'"
-                    type="checkbox"
-                    name="park[]"
-                    value="'.$id.'"
-                    '.((isset($_POST['park'])
-                    && is_array($_POST['park'])
-                    && in_array($id, $_POST['park']))?'checked':'').'
-                  >';
-                  ?>
-                  {name}
-                </label>
-                {end:}
+
+            <h3><a href="#">Activities</a></h3>
+            <div>
+                <div flexy:if="activities" class="fieldcontain">
+                    <div class="glm-chbx">
+                        {foreach:activities,id,name}
+                        <label for="chbx-{id:h}" class="glm-chbx-label">
+                            <?php
+                            echo '<input
+                            id="chbx-'.$id.'"
+                            type="checkbox"
+                            name="activity[]"
+                            value="'.$id.'"
+                            '.((isset($_POST['activity'])
+                            && is_array($_POST['activity'])
+                            && in_array($id, $_POST['activity']))?'checked':'').'
+                            >';
+                            ?>
+                            {name}
+                        </label>
+                        {end:}
+                    </div>
                 </div>
             </div>
 
-            <div flexy:if="parks" class="fieldcontain">
-                <label class="fieldHdr2">Amenities</label>
-                <div class="glm-chbx">
-                {foreach:amenities,name,id}
-                <label for="amchbx-{id:h}" class="glm-chbx-label">
-                  <?php
-                  echo '<input
-                    id="amchbx-'.$id.'"
-                    type="checkbox"
-                    name="amenity[]"
-                    value="'.$id.'"
-                    '.((isset($_POST['amenity'])
-                    && is_array($_POST['amenity'])
-                    && in_array($id, $_POST['amenity']))?'checked':'').'
-                  >';
-                  ?>
-                  {name}
-                </label>
-                {end:}
+            <h3><a href="#">Parks</a></h3>
+            <div>
+                <div flexy:if="parks" class="fieldcontain">
+                    <div class="glm-chbx">
+                        {foreach:parks,id,name}
+                        <label for="chbx-{id:h}" class="glm-chbx-label">
+                            <?php
+                            echo '<input
+                            id="chbx-'.$id.'"
+                            type="checkbox"
+                            name="park[]"
+                            value="'.$id.'"
+                            '.((isset($_POST['park'])
+                            && is_array($_POST['park'])
+                            && in_array($id, $_POST['park']))?'checked':'').'
+                            >';
+                            ?>
+                            {name}
+                        </label>
+                        {end:}
+                    </div>
                 </div>
             </div>
 
-            <div class="fieldcontain">
-                <input class="submit" type="submit" value="Search">
+            <h3><a href="#">Amenities</a></h3>
+            <div>
+
+                <div flexy:if="parks" class="fieldcontain">
+                    <div class="glm-chbx">
+                        {foreach:amenities,name,id}
+                        <label for="amchbx-{id:h}" class="glm-chbx-label">
+                            <?php
+                            echo '<input
+                            id="amchbx-'.$id.'"
+                            type="checkbox"
+                            name="amenity[]"
+                            value="'.$id.'"
+                            '.((isset($_POST['amenity'])
+                            && is_array($_POST['amenity'])
+                            && in_array($id, $_POST['amenity']))?'checked':'').'
+                            >';
+                            ?>
+                            {name}
+                        </label>
+                        {end:}
+                    </div>
+                </div>
             </div>
-               </fieldset>
-       </form>
+
+        </div>
+        <div class="fieldcontain">
+            <input class="submit" type="submit" value="Search">
+        </div>
+    </form>
 </div>
\ No newline at end of file