[Koha-patches] [PATCH] Bug 9766 - Remove YUI menu on budget planning page in favor of different column-hiding system
Owen Leonard
oleonard at myacpl.org
Fri Mar 8 14:35:44 CET 2013
The budget planning table previously used a YUI menu as part of a
system for hiding and showing table columns. Instead of trying
to convert that sytem to Bootstrap I have used code from the
batch modification/deletion pages which uses a list of checkboxes
to show and hide table columns. This has the advantage of giving
the user visual feedback of what columns are hidden and of offering the
user an interface which is familiar from other pages.
This patch also moves CSS from a batch-operations-specific
CSS file into the main CSS file. Batch modification templates have been
modified accordingly.
To test, view the budget planning page and choose different
"plan by" options (by month, by library, by item type). Test
the show/hide action on each individual column and using the
"show all" and "hide all" checkboxes.
---
.../intranet-tmpl/prog/en/css/pages/batchMod.css | 7 --
.../intranet-tmpl/prog/en/css/staff-global.css | 9 +-
koha-tmpl/intranet-tmpl/prog/en/js/acq.js | 80 +++++----------
.../intranet-tmpl/prog/en/modules/admin/aqplan.tt | 102 +++++++++-----------
.../prog/en/modules/tools/batchMod-del.tt | 1 -
.../prog/en/modules/tools/batchMod-edit.tt | 1 -
6 files changed, 80 insertions(+), 120 deletions(-)
delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css b/koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css
deleted file mode 100644
index c8d6bfb..0000000
--- a/koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css
+++ /dev/null
@@ -1,7 +0,0 @@
-#jobpanel,#jobstatus,#jobfailed { display : none; }
-#jobstatus { margin:.4em; }
-#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }
-#selections { width : 100%; white-space : normal; }
-#selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
-#selections span.selected { background-color : #CCE0FC; }
-#selections input { vertical-align:middle;margin:0 2px; }
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index a1e8f48..cf37f0d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -2551,4 +2551,11 @@ button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit
.btn-group label,
.btn-group select {
font-size: 13px;
-}
\ No newline at end of file
+}
+#jobpanel,#jobstatus,#jobfailed { display : none; }
+#jobstatus { margin:.4em; }
+#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }
+#selections { width : 100%; white-space : normal; }
+#selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
+#selections span.selected { background-color : #CCE0FC; }
+#selections input { vertical-align:middle;margin:0 2px; }
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/acq.js b/koha-tmpl/intranet-tmpl/prog/en/js/acq.js
index 35287ed..067cd08 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/js/acq.js
+++ b/koha-tmpl/intranet-tmpl/prog/en/js/acq.js
@@ -862,61 +862,33 @@ function checkBudgetParent(budgetId, newBudgetParent) {
}
}
-
-function addColumn(p_sType, p_aArgs, p_oValue)
-{
- var allRows = document.getElementById('plan').rows;
- var colnum = p_oValue[0];
- var code = p_oValue[1];
- var colnum = new Number(colnum);
-
- for (var i=0; i<allRows.length; i++) {
- var allCells = allRows[i].cells;
- allCells[colnum+1].style.display="table-cell";
- }
-
-// make a menuitem object
- var hids = document.getElementsByName("hide_cols")
- for (var i=0; i<hids.length; i++) {
- if (hids[i].value == code) {
- var x = hids[i];
- x.parentNode.removeChild(x) // sigh...
- break;
- }
- }
+function hideColumn(num) {
+ $("#hideall,#showall").removeAttr("checked").parent().removeClass("selected");
+ $("#"+num).parent().removeClass("selected");
+ var hide = Number(num.replace("col","")) + 2;
+ // hide header and cells matching the index
+ $("#plan td:nth-child("+hide+"),#plan th:nth-child("+hide+")").toggle();
}
-
-function delColumn(n, code)
-{
- var allRows = document.getElementById('plan').rows;
-
-// find index
- var index;
- var nn = new Number(n);
- var code = code ;
- for (var i=0; i<allRows.length; i++) {
- var allCells = allRows[i].cells;
- allCells[nn+1].style.display="none";
- }
-
- var r = 0;
- var hids = document.getElementsByName("hide_cols")
- for (var i=0; i<hids.length; i++) {
- if (hids[i].value == code) {
- r = 1;
- break;
- }
- }
-
- if (r == 0 ) {
- // add hide_col to form
- var el = document.createElement("input");
- el.setAttribute("type", 'hidden' );
- el.setAttribute("value", code);
- el.setAttribute("name", 'hide_cols');
- document.getElementById("hide_div").appendChild(el);
- }
+function showColumn(num){
+ $("#hideall").removeAttr("checked").parent().removeClass("selected");
+ $("#"+num).parent().addClass("selected");
+ // set the index of the table column to hide
+ show = Number(num.replace("col","")) + 2;
+ // hide header and cells matching the index
+ $("#plan td:nth-child("+show+"),#plan th:nth-child("+show+")").toggle();
}
-
+function showAllColumns(){
+ $("#selections").checkCheckboxes();
+ $("#selections span").addClass("selected");
+ $("#plan td:nth-child(2),#plan tr th:nth-child(2)").nextAll().show();
+ $("#hideall").removeAttr("checked").parent().removeClass("selected");
+}
+function hideAllColumns(){
+ var allCols = $("#plan th").length;
+ $("#selections").unCheckCheckboxes();
+ $("#selections span").removeClass("selected");
+ $("#plan td:nth-child(2),#plan th:nth-child(2)").nextUntil("th:nth-child("+(allCols-1)+"),td:nth-child("+(allCols-1)+")").hide(); // hide all but the last two columns
+ $("#hideall").attr("checked","checked").parent().addClass("selected");
+}
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
index 59e9121..94261bd 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
@@ -1,12 +1,10 @@
[% INCLUDE 'doc-head-open.inc' %]
<title>Koha › Administration › Budgets › Funds › Planning for [% budget_period_description %] by [% authcat %]</title>
[% INCLUDE 'doc-head-close.inc' %]
+<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
<script type="text/javascript" src="[% themelang %]/js/acq.js"></script>
<script type="text/javascript">
//<![CDATA[
-// ---------------------------------------------------------------------
-// Javascript
-// ---------------------------------------------------------------------
function Check(f) {
var ok=1;
var _alertString="";
@@ -38,29 +36,32 @@
alert(alertString2);
}
}
-
-
-YAHOO.util.Event.onAvailable("popmenu", function () {
-
- var itemData = new Array();
- table = document.getElementById('plan')
- tableTmp = table.cloneNode(true);
- tableTmp.id = 'planTmp';
-
- [% FOREACH authvals_ro IN authvals_row %]
- itemData.push( { text: "[% authvals_ro.val %]", onclick: { fn: addColumn, obj: ["[% authvals_ro.colnum %]", "[% authvals_ro.code %]"] } } );
-
- [% END %]
- oMenu = new YAHOO.widget.Menu("basicmenu",
- { position: "dynamic", itemdata: itemData , clicktohide : "true" , context:["popmenu","tl","tr"] }
- );
-
- oMenu.render("popmenu");
- YAHOO.util.Event.addListener("add_popmenu_item", "click", oMenu.show, null, oMenu);
-
-// oMenu.removeItem(2); // TODO.....
-
-});
+ $(document).ready(function() {
+ $("#selectallbutton").on("click",function(e){
+ $("#itemst").checkCheckboxes();
+ e.preventDefault();
+ });
+ $("#clearallbutton").on("click",function(e){
+ $("#itemst").unCheckCheckboxes();
+ e.preventDefault();
+ });
+ $("#selections input").on("change",function(e){
+ var num = $(this).attr("id");
+ if(num == 'showall'){
+ showAllColumns();
+ e.stopPropagation();
+ } else if(num == 'hideall'){
+ hideAllColumns();
+ e.stopPropagation();
+ } else {
+ if($(this).attr("checked")){
+ showColumn(num);
+ } else {
+ hideColumn(num);
+ }
+ }
+ });
+ });
//]]>
</script>
<style type="text/css">td.locked { background-image: url('/intranet-tmpl/prog/img/locked.png'); padding-left : 20px; background-repeat: no-repeat; background-position: 4% 50%; } a.control { font-size:85%;text-decoration:none; }</style>
@@ -82,7 +83,6 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
<div id="yui-main">
<div class="yui-b">
-
[% INCLUDE 'budgets-admin-toolbar.inc' %]
<form method="post" id="Aform" name="Aform" action="/cgi-bin/koha/admin/aqplan.pl">
@@ -105,8 +105,13 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
<p><b>Cells contain estimated values only.</b></p>
[% END %]
[% END %]
-
- <table id="plan" width="100%">
+ <p id="selections">
+ <strong>Show/hide columns:</strong> <span class="selected"><input type="checkbox" checked="checked" id="showall"/><label for="showall">Show all columns</label></span> <span><input type="checkbox" id="hideall"/><label for="hideall">Hide all columns</label></span>
+ [% FOREACH authvals_ro IN authvals_row %]
+ <span class="selected"><label><input type="checkbox" checked="checked" id="col[% authvals_ro.colnum %]">[% authvals_ro.code %]</label></span>
+ [% END %]
+ </p>
+ <table id="plan">
<thead>
<tr>
<th>Fund name</th>
@@ -122,32 +127,17 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
[% authvals_ro.code %]</th>
[% END %]
- <th>Fund remaining</th><th> </th>
+ <th class="remaining">Fund remaining</th><th> </th>
</tr>
- <tr>
- <th> </th><th> </th>
- [% FOREACH authvals_ro IN authvals_row %]
- [% IF ( authvals_ro.display ) %]
- <th class="[% authvals_ro.colnum %]">
- [% ELSE %]
- <th style="display:none;" class="[% authvals_ro.colnum %]">
- [% END %]
-
- <a class="control" onclick="delColumn('[% authvals_ro.colnum %]', 'col[% authvals_ro.code %]')" href="#" title="Hide this column">[ hide ]</a></th>
-
- [% END %]
- <th id="popmenu"><a style="font-size:85%;text-decoration:none;" id="add_popmenu_item" href="#" title="Show a hidden column">[ show a column ]</a></th><th> </th>
- </tr>
-
</thead>
<tbody>
[% FOREACH budget_line IN budget_lines %]
[% UNLESS ( loop.odd ) %]<tr class="highlight">[% ELSE %]<tr>[% END %]
[% IF ( budget_line.budget_lock ) %]
- <td align="left" class="locked" title="Fund locked">
+ <td class="locked" title="Fund locked">
[% ELSE %]
- <td align="left">
+ <td>
[% END %]
<a href="/cgi-bin/koha/admin/aqbudgets.pl?op=add_form&budget_id=[% budget_line.budget_id %]&budget_period_id=[% budget_line.budget_period_id %]">[% budget_line.budget_name_indent %]</a></td>
<td><span id="budget_tot_formatted_[% budget_line.budget_id %]">[% budget_line.budget_amount_formatted %] </span>
@@ -162,10 +152,10 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
[% ELSE %]
<td style="display:none;" class="[% line.colnum %]">
[% END %]
- <table class="invis" width="100%">
+ <table class="invis">
<tr>
[% IF ( line.show_actual ) %]
- <td width="50%" >[% line.actual_amount %]</td>
+ <td >[% line.actual_amount %]</td>
[% END %]
<td>
@@ -182,26 +172,26 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
[% END %]
<td>
- <table class="invis" width="100%">
+ <table class="invis">
<tr>
[% IF ( budget_line.show_actual ) %]
[% IF ( budget_line.act_negative ) %]
- <td width="50%" style="color: red;">
+ <td style="color: red;">
[% ELSIF ( budget_line.act_positive ) %]
- <td width="50%" style="color: green;">
+ <td style="color: green;">
[% ELSE %]
- <td width="50%">
+ <td>
[% END %]
[% budget_line.budget_act_remain %]
</td>
[% END %]
[% IF ( budget_line.est_negative ) %]
- <td width="50%" style="color: red;" id="budget_est_[% budget_line.budget_id %]">
+ <td style="color: red;" id="budget_est_[% budget_line.budget_id %]">
[% ELSIF ( budget_line.est_positive ) %]
- <td width="50%" style="color: green;" id="budget_est_[% budget_line.budget_id %]">
+ <td style="color: green;" id="budget_est_[% budget_line.budget_id %]">
[% ELSE %]
- <td width="50%" id="budget_est_[% budget_line.budget_id %]">
+ <td id="budget_est_[% budget_line.budget_id %]">
[% END %]
[% budget_line.budget_est_remain %]
</td>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
index e3f6b29..19a8a1d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
@@ -2,7 +2,6 @@
<title>Koha › Tools › Batch item deletion</title>
[% INCLUDE 'doc-head-close.inc' %]
<script type="text/javascript" src="[% themelang %]/js/background-job-progressbar.js"></script>
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/pages/batchMod.css" />
<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
<script type="text/javascript">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
index c65277a..2f3e239 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
@@ -3,7 +3,6 @@
[% INCLUDE 'doc-head-close.inc' %]
<script type="text/javascript" src="[% themelang %]/js/background-job-progressbar.js"></script>
<script type="text/javascript" src="[% themelang %]/js/cataloging.js"></script>
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/pages/batchMod.css" />
<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
<script type="text/javascript">
--
1.7.9.5
More information about the Koha-patches
mailing list