View Issue Details
ID | Project | Category | View Status | Date Submitted | Last Update |
---|---|---|---|---|---|
901 | RackTables | JavaScript | public | 2013-06-19 10:09 | 2013-11-26 15:37 |
Reporter | blaza-pl | Assigned To | adoom42 | ||
Priority | low | Severity | feature | Reproducibility | always |
Status | closed | Resolution | fixed | ||
Product Version | 0.20.4 | ||||
Target Version | 0.20.6 | Fixed in Version | 0.20.6 | ||
Summary | 901: Add collapse/expand feature to Loaction filter | ||||
Description | This patch is based on my previous work (bug: 0000841). It extends the functionality of Location filter by adding +/- elements which allow the user to expand/collapse sub level locations. This also runs javascript on load to auto-collapse all sub locations which are not selected/checked. I found it very useful in case where location tree is quite huge (>100 locations with 3 sub levels tree) | ||||
Tags | No tags attached. | ||||
location-filter-collapser_interface.php.patch (3,487 bytes)
--- inc/interface.php 2013-06-17 07:40:16.341132554 +0200 +++ inc/interface.php 2013-06-19 08:59:39.573195984 +0200 @@ -277,16 +277,26 @@ foreach ($subtree as $location_id => $location) { - echo "<tr><td class=tagbox style='padding-left: " . ($level * 16) . "px;'><label>"; + + echo "<div class=tagbox style='text-align:left; padding-left: " . ($level * 8) . "px;'><label>"; + $checked = (in_array ($location['id'], $_SESSION['locationFilter'])) ? 'checked' : ''; - echo "<label><input type=checkbox name='location_id[]' class=${level} value='${location['id']}'${checked} onClick=checkAll(this)>"; + echo "<input type=checkbox name='location_id[]' class=${level} value='${location['id']}' ${checked} onClick=checkAll(this)>"; echo "<a class=nolink title='" .getLocationTooltip($location['id']) . "'>${location['name']}</a>"; echo "</label>"; + if ($location['kidc']) + { + echo "<a id='lfa" .$location['id'] . "' onclick=\"expand('${location['id']}')\" href\"#\" > - </a>"; + echo "<div id='lfd" . $location['id'] . "'>"; $self ($location['kids'], $level + 1); + echo "</div>"; } + echo "</div>\n"; } + } + addJS(<<<END function checkAll(bx){ @@ -311,13 +321,63 @@ else if(parseInt(bxs[j].className) <= parseInt(bx.className)) in_tree = false; - if (bxs[j].type=="checkbox" && in_tree == true) bxs[j].checked = bx.checked; + } + } + } + function collapseAll(bx){ + for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; ) + if (tbls[i].id=="locationFilter") + { + var bxs=tbls[i].getElementsByTagName("div"); + //loop through divs to hide unchecked + for (var j=0; j<bxs.length; j++ ) + { + var is_checked = -1; + var in_div=bxs[j].getElementsByTagName("input"); + //loop through input to find if any is checked + for (var k=0; k<in_div.length; k++) + { + if(in_div[k].type="checkbox") + { + if (in_div[k].checked == true) + { + is_checked = true; + break; } + else + is_checked = false; + } + } + //nothing selected and element id is lfd... + if (is_checked == false && !bxs[j].id.indexOf("lfd")) + { + //collapse + expand(bxs[j].id.substr(3)); + } + } + } + } + + + function expand(id) + { + var divid = document.getElementById("lfd" + id); + var iconid = document.getElementById("lfa" + id); + if (divid.style.display == 'none') + { + divid.style.display = 'block'; + iconid.innerHTML = ' - '; } + else + { + divid.style.display = 'none'; + iconid.innerHTML = ' + '; } + } + END ,TRUE); @@ -338,13 +398,18 @@ { echo "<tr><td class=tagbox><hr></td></tr>\n"; - echo "<tr><td class=tagbox style='padding-left: 0px' ><label>"; + echo "<tr><td class=tagbox style='padding-left: 0px' >"; echo "<label><input type=checkbox name='location' onClick=checkAll(this)>"; + echo "<img src=pix/1x1t.gif onLoad=collapseAll(this)>"; //dirty hack to collapse all when page is displayed echo "</label></td></tr>\n"; + echo "<tr><td>"; renderLocationCheckbox (treeFromList ($locationlist)); + echo "</td></tr>"; + echo "<tr><td class=tagbox><hr></td></tr>\n"; echo "<tr><td>"; + printImageHREF ('setfilter', 'set filter', TRUE); echo "</td></tr>\n"; } |
|
Aaron has merged the previous patch, so I assign this to him. | |
location-filter-collapser_interface.php_0.20.5.patch (3,068 bytes)
--- interface.php.orig 2013-07-03 10:01:34.845134313 +0200 +++ interface.php 2013-07-03 10:20:45.013258283 +0200 @@ -282,13 +282,19 @@ foreach ($subtree as $location_id => $location) { - echo "<tr><td class=tagbox style='padding-left: " . ($level * 16) . "px;'><label>"; + echo "<div class=tagbox style='text-align:left; padding-left: " . ($level * 16) . "px;'>"; $checked = (in_array ($location['id'], $_SESSION['locationFilter'])) ? 'checked' : ''; echo "<label><input type=checkbox name='location_id[]' class=${level} value='${location['id']}'${checked} onClick=checkAll(this)>"; echo "<a class=nolink title='" .getLocationTooltip($location['id']) . "'>${location['name']}</a>"; - echo "</label></td></tr>\n"; + echo "</label> "; if ($location['kidc']) + { + echo "<a id='lfa" .$location['id'] . "' onclick=\"expand('${location['id']}')\" href\"#\" > - </a>"; + echo "<div id='lfd" . $location['id'] . "'>"; $self ($location['kids'], $level + 1); + echo "</div>"; + } + echo "</div>\n"; } } @@ -308,6 +314,59 @@ } } } + +function collapseAll(bx){ + for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; ) + if (tbls[i].id=="locationFilter") + { + var bxs=tbls[i].getElementsByTagName("div"); + //loop through divs to hide unchecked + for (var j=0; j<bxs.length; j++ ) + { + var is_checked = -1; + var in_div=bxs[j].getElementsByTagName("input"); + //loop through input to find if any is checked + for (var k=0; k<in_div.length; k++) + { + if(in_div[k].type="checkbox") + { + if (in_div[k].checked == true) + { + is_checked = true; + break; + } + else + is_checked = false; + } + } + //nothing selected and element id is lfd... + if (is_checked == false && !bxs[j].id.indexOf("lfd")) + { + //collapse + expand(bxs[j].id.substr(3)); + } + } + } + } + + +function expand(id) +{ + var divid = document.getElementById("lfd" + id); + var iconid = document.getElementById("lfa" + id); + if (divid.style.display == 'none') + { + divid.style.display = 'block'; + iconid.innerHTML = ' - '; + } + else + { + divid.style.display = 'none'; + iconid.innerHTML = ' + '; + } +} + + END ,TRUE); startPortlet ('Location filter'); @@ -324,10 +383,11 @@ { echo "<tr><td class=tagbox style='padding-left: 0px'><label>"; echo "<input type=checkbox name='location' onClick=checkAll(this)> Toggle all"; + echo "<img src=pix/1x1t.gif onLoad=collapseAll(this)>"; //dirty hack to collapse all when page is displayed echo "</label></td></tr>\n"; - echo "<tr><td class=tagbox><hr></td></tr>\n"; + echo "<tr><td class=tagbox><hr>\n"; renderLocationCheckbox (treeFromList ($locationlist)); - echo "<tr><td class=tagbox><hr></td></tr>\n"; + echo "<hr></td></tr>\n"; echo "<tr><td>"; printImageHREF ('setfilter', 'set filter', TRUE); echo "</td></tr>\n"; |
|
I have uploaded a new version for 0.20.5 | |
It's a nice feature. Thanks for the patch. | |
Date Modified | Username | Field | Change |
---|---|---|---|
2013-06-19 10:09 | blaza-pl | New Issue | |
2013-06-19 10:09 | blaza-pl | Status | new => assigned |
2013-06-19 10:09 | blaza-pl | Assigned To | => andriyanov |
2013-06-19 10:09 | blaza-pl | File Added: location-filter-collapser_interface.php.patch | |
2013-06-19 10:30 | andriyanov | Note Added: 0001531 | |
2013-06-19 10:30 | andriyanov | Assigned To | andriyanov => adoom42 |
2013-07-03 12:44 | blaza-pl | File Added: location-filter-collapser_interface.php_0.20.5.patch | |
2013-07-03 12:45 | blaza-pl | Note Added: 0001575 | |
2013-07-20 01:27 | adoom42 | Note Added: 0001601 | |
2013-07-20 01:27 | adoom42 | Status | assigned => closed |
2013-07-20 01:27 | adoom42 | Resolution | open => fixed |
2013-07-20 01:27 | adoom42 | Fixed in Version | => 0.20.6 |
2013-07-20 01:27 | adoom42 | Target Version | => 0.20.6 |