From 8edc97a838f8ee49c099e3870a15e43d554e2b63 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 2 Dec 2011 10:25:50 +0100 Subject: [PATCH] Bug 6836: followup CSS work Signed-off-by: Chris Cormack Signed-off-by: Katrin Fischer (cherry picked from commit fb928d48fc25812891860d699fe53ac4b503ec50) Signed-off-by: Chris Nighswonger --- .../intranet-tmpl/prog/en/css/datatables.css | 157 +++++++++++++++++- .../intranet-tmpl/prog/en/js/datatables.js | 105 +++++++++++- .../opac-tmpl/prog/en/css/datatables.css | 157 +++++++++++++++++- koha-tmpl/opac-tmpl/prog/en/js/datatables.js | 105 +++++++++++- 4 files changed, 516 insertions(+), 8 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css index e069b93535..e7b11bd17c 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css +++ b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css @@ -3,15 +3,15 @@ input.search_init { } .sorting_asc { padding-right: 19px; - background: url("../../img/datatables/sort_asc.png") no-repeat scroll right center #EEEEEE; + background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE; } .sorting_desc { padding-right: 19px; - background: url("../../img/datatables/sort_desc.png") no-repeat scroll right center #EEEEEE; + background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE; } .sorting { padding-right: 19px; - background: url("../../img/datatables/sort_both.png") no-repeat scroll right center #EEEEEE; + background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE; } .sorting_asc_disabled { padding-right: 19px; @@ -26,6 +26,157 @@ input.search_init { background-color: #EEEEEE; } +div.top {clear : both; } + +div.top.pager, +div.bottom.pager { + background-color : #E5E5E5; + padding : 0; +} + +div.bottom.pager div.dataTables_paginate.paging_full_numbers, +div.bottom.pager div.dataTables_paginate.paging_four_button { + border-right-width : 0; +} + +div.dataTables_filter, +div.dataTables_length, +div.dataTables_info, +div.dataTables_paginate { + float: left; + padding : .3em .5em .3em .5em; + +} +div.dataTables_length { + border-right : 1px solid #686868; + line-height:1.9em; +} +div.dataTables_info { + border-right : 1px solid #AAA; + line-height:1.9em; +} +div.dataTables_length, +div.dataTables_filter { + border-left : 1px solid #FFF; +} +div.dataTables_filter { + line-height : 1.9em; +} +div.dataTables_paginate { + background-color : #F4F4F4; + font-size: 110%; + padding : 0; +} + +.paging_full_numbers span.paginate_button, +.paging_full_numbers span.paginate_active { + border-right : 1px solid #AAA; + border-left : 1px solid #FFF; + display : block; + float : left; + line-height:1.6em; + padding: .3em .7em; + cursor: pointer; +} + +.paging_full_numbers span.paginate_button { + color : #0000CC; +} +.paging_full_numbers span.paginate_button.first { + background-image : url('../../img/first.png'); + background-repeat: no-repeat; + background-position : 2px center; + padding-left : 2em; +} +.paging_full_numbers span.paginate_button.previous { + background-image : url('../../img/prev.png'); + background-repeat: no-repeat; + background-position : 2px center; + padding-left : 2em; +} +.paging_full_numbers span.paginate_button.next { + background-image : url('../../img/next.png'); + background-repeat: no-repeat; + background-position : right center; + padding-right : 2em; +} +.paging_full_numbers span.paginate_button.last { + background-image : url('../../img/last.png'); + background-repeat: no-repeat; + background-position : right center; + border-right : 1px solid #686868; + padding-right : 2em; +} +div.bottom.pager .paging_full_numbers span.paginate_button.last { + border-right-width : 0; +} +.paging_full_numbers span.paginate_active { + background-color : #FFFFEA; + color : #000; + font-weight: bold; +} + +.paging_full_numbers span.paginate_button:hover { + background-color: #FFC; +} + +.paging_full_numbers span.paginate_button.paginate_button_disabled { + color : #666; +} + +/* Two-button version */ + +div.dataTables_paginate.paging_two_button, +div.dataTables_paginate.paging_four_button { + background-color : transparent; + border-right : 1px solid #686868; + border-left : 1px solid #FFF; + line-height : 1.8em; +} +.paginate_disabled_first, +.paginate_enabled_first, +.paginate_disabled_previous, +.paginate_enabled_previous, +.paginate_disabled_next, +.paginate_enabled_next, +.paginate_disabled_last, +.paginate_enabled_last { + float: left; + height: 16px; + margin: .5em; + width: 16px; +} +.paginate_disabled_first { + background-image: url("../../img/first-disabled.png"); +} +.paginate_enabled_first { + background-image: url("../../img/first.png"); + cursor: pointer; +} +.paginate_disabled_previous { + background-image: url("../../img/prev-disabled.png"); +} +.paginate_enabled_previous { + background-image: url("../../img/prev.png"); + cursor: pointer; +} +.paginate_disabled_next { + background-image: url("../../img/next-disabled.png"); +} +.paginate_enabled_next { + background-image: url("../../img/next.png"); + cursor: pointer; +} +.paginate_disabled_last { + background-image: url("../../img/last-disabled.png"); +} +.paginate_enabled_last { + background-image: url("../../img/last.png"); + cursor: pointer; +} + + +/* table.display { width: 100%; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js index 38dd1d5ed1..e0cc888f59 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js @@ -22,7 +22,8 @@ var dataTablesDefaults = { "sProcessing" : window.MSG_DT_PROCESSING || "Processing...", "sSearch" : window.MSG_DT_SEARCH || "Search:", "sZeroRecords" : window.MSG_DT_ZERO_RECORDS || "No matching records found" - } + }, + "sDom": '<"top pager"ilpf>t<"bottom pager"ip>' }; @@ -279,3 +280,105 @@ function replace_html_date( original_node, id, format ) { script.text = script_content; $(original_node).append( script ); } + +$.fn.dataTableExt.oPagination.four_button = { + /* + * Function: oPagination.four_button.fnInit + * Purpose: Initalise dom elements required for pagination with a list of the pages + * Returns: - + * Inputs: object:oSettings - dataTables settings object + * node:nPaging - the DIV which contains this pagination control + * function:fnCallbackDraw - draw function which must be called on update + */ + "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) + { + nFirst = document.createElement( 'span' ); + nPrevious = document.createElement( 'span' ); + nNext = document.createElement( 'span' ); + nLast = document.createElement( 'span' ); + +/* nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) ); + nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) ); + nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) ); + nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );*/ + + nFirst.className = "paginate_button first"; + nPrevious.className = "paginate_button previous"; + nNext.className="paginate_button next"; + nLast.className = "paginate_button last"; + + nPaging.appendChild( nFirst ); + nPaging.appendChild( nPrevious ); + nPaging.appendChild( nNext ); + nPaging.appendChild( nLast ); + + $(nFirst).click( function () { + oSettings.oApi._fnPageChange( oSettings, "first" ); + fnCallbackDraw( oSettings ); + } ); + + $(nPrevious).click( function() { + oSettings.oApi._fnPageChange( oSettings, "previous" ); + fnCallbackDraw( oSettings ); + } ); + + $(nNext).click( function() { + oSettings.oApi._fnPageChange( oSettings, "next" ); + fnCallbackDraw( oSettings ); + } ); + + $(nLast).click( function() { + oSettings.oApi._fnPageChange( oSettings, "last" ); + fnCallbackDraw( oSettings ); + } ); + + /* Disallow text selection */ + $(nFirst).bind( 'selectstart', function () { return false; } ); + $(nPrevious).bind( 'selectstart', function () { return false; } ); + $(nNext).bind( 'selectstart', function () { return false; } ); + $(nLast).bind( 'selectstart', function () { return false; } ); + }, + + /* + * Function: oPagination.four_button.fnUpdate + * Purpose: Update the list of page buttons shows + * Returns: - + * Inputs: object:oSettings - dataTables settings object + * function:fnCallbackDraw - draw function which must be called on update + */ + "fnUpdate": function ( oSettings, fnCallbackDraw ) + { + if ( !oSettings.aanFeatures.p ) + { + return; + } + + /* Loop over each instance of the pager */ + var an = oSettings.aanFeatures.p; + for ( var i=0, iLen=an.length ; it<"bottom pager"ip>' }; @@ -279,3 +280,105 @@ function replace_html_date( original_node, id, format ) { script.text = script_content; $(original_node).append( script ); } + +$.fn.dataTableExt.oPagination.four_button = { + /* + * Function: oPagination.four_button.fnInit + * Purpose: Initalise dom elements required for pagination with a list of the pages + * Returns: - + * Inputs: object:oSettings - dataTables settings object + * node:nPaging - the DIV which contains this pagination control + * function:fnCallbackDraw - draw function which must be called on update + */ + "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) + { + nFirst = document.createElement( 'span' ); + nPrevious = document.createElement( 'span' ); + nNext = document.createElement( 'span' ); + nLast = document.createElement( 'span' ); + +/* nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) ); + nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) ); + nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) ); + nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );*/ + + nFirst.className = "paginate_button first"; + nPrevious.className = "paginate_button previous"; + nNext.className="paginate_button next"; + nLast.className = "paginate_button last"; + + nPaging.appendChild( nFirst ); + nPaging.appendChild( nPrevious ); + nPaging.appendChild( nNext ); + nPaging.appendChild( nLast ); + + $(nFirst).click( function () { + oSettings.oApi._fnPageChange( oSettings, "first" ); + fnCallbackDraw( oSettings ); + } ); + + $(nPrevious).click( function() { + oSettings.oApi._fnPageChange( oSettings, "previous" ); + fnCallbackDraw( oSettings ); + } ); + + $(nNext).click( function() { + oSettings.oApi._fnPageChange( oSettings, "next" ); + fnCallbackDraw( oSettings ); + } ); + + $(nLast).click( function() { + oSettings.oApi._fnPageChange( oSettings, "last" ); + fnCallbackDraw( oSettings ); + } ); + + /* Disallow text selection */ + $(nFirst).bind( 'selectstart', function () { return false; } ); + $(nPrevious).bind( 'selectstart', function () { return false; } ); + $(nNext).bind( 'selectstart', function () { return false; } ); + $(nLast).bind( 'selectstart', function () { return false; } ); + }, + + /* + * Function: oPagination.four_button.fnUpdate + * Purpose: Update the list of page buttons shows + * Returns: - + * Inputs: object:oSettings - dataTables settings object + * function:fnCallbackDraw - draw function which must be called on update + */ + "fnUpdate": function ( oSettings, fnCallbackDraw ) + { + if ( !oSettings.aanFeatures.p ) + { + return; + } + + /* Loop over each instance of the pager */ + var an = oSettings.aanFeatures.p; + for ( var i=0, iLen=an.length ; i