Recent Topics

1 Mar 08, 2010 01:02    

My b2evolution Version: Not Entered

As i have hundreds of categories, it's a pain to choose from each time, scroll down all the way, back up, down again...

So i just made this quick hack and wanted to share:

http://i48.tinypic.com/vpjln7.png

The jquery part:


jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
  var new_hidden = false;
  if( this.last_phrase === phrase ) return false;

  var phrase_length = phrase.length;
  var words = phrase.toLowerCase().split(" ");

  // these function pointers may change
  var matches = function(elem) { elem.show() }
  var noMatch = function(elem) { elem.hide(); new_hidden = true }
  var getText = function(elem) { return elem.text() }

  if( column ) {
    var index = null;
    jq.find("thead > tr:last > th").each( function(i){
      if( $(this).text() == column ){
        index = i; return false;
      }
    });
    if( index == null ) throw("given column: " + column + " not found")

    getText = function(elem){ return jQuery(elem.find(
      ("td:eq(" + index + ")")  )).text().addClass('bold')
    }
  }

  // if added one letter to last time,
  // just check newest word and only need to hide
  if( (words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
        this.last_phrase) ) {

    if( phrase[-1] === " " )
    { this.last_phrase = phrase; return false; }

    var words = words[-1]; // just search for the newest word

    // only hide visible rows
    matches = function(elem) {;}
    var elems = jq.find("tbody > tr:visible")
  }
  else {
    new_hidden = true;
    var elems = jq.find("tbody > tr")
  }

  elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words( getText(elem), words, false ) ?
      matches(elem) : noMatch(elem);
  });

  last_phrase = phrase;
  if( ifHidden && new_hidden ) ifHidden();
  return jq;
};

// caching for speedup
jQuery.uiTableFilter.last_phrase = ""

// not jQuery dependent
// "" [""] -> Boolean
// "" [""] Boolean -> Boolean
jQuery.uiTableFilter.has_words = function( str, words, caseSensitive )
{
  var text = caseSensitive ? str : str.toLowerCase();
  for (var i=0; i < words.length; i++) {
    if (text.indexOf(words[i]) === -1) return false;
  }
  return true;
}

/*
 * Copyright (c) 2008 Greg Weber greg at gregweber.info
 * documentation at http://gregweber.info/projects/uitablefilter
 *
 * allows table rows to be filtered (made invisible)
 * <code>
 * t = $('table')
 * $.uiTableFilter( t, phrase )
 * </code>
 * arguments:
 *   jQuery object containing table rows
 *   phrase to search for
 *   optional arguments:
 *     column to limit search too (the column title in the table header)
 *     ifHidden - callback to execute if one or more elements was hidden
 */

to call :

$(function() { 
  var theTable = $('table.catselect')

  theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){
    $(this).prev().find(":checkbox").click()
  });

  $("#filterfield").keyup(function() {
    $.uiTableFilter( theTable, this.value );
  })

  $('#filtercats').submit(function(){
    theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
    return false;
  }).focus(); //Give focus to input field
});  

finally add the filter field,
open up ..\inc\items\model\_item.funcs.php

find

$r .= '<table cellspacing="0" class="catselect">';

and replace with:


    $r .='<form id="filtercats">Filter: <input name="filterfield" id="filterfield" 
value="" maxlength="30" size="30" type="text"></form><br>';
	$r .= '<table cellspacing="0" class="catselect">';

include these two either in core under inc\items\model\_item.funcs.php or in admin skin chicago, and add the filter field..thats about it..

personally i hacked the _item.funcs.php, that i already have to hack it to add filter field..

you might want to polish it with highlighting, well i do, but i did this just before going sleep so i dont have time to add it, i ll update if i do later on.. and i d be happy if someone could do this into a plugin, so that we wont lose the changes with an upgrade

2 Mar 08, 2010 01:02

As i ve said, it was a pain to choose from hundreds of categories for me so, i have replaced the previous hack with another, this time with a highlight and step by steps instructions.

Again; i would be really happy if someone could make this into a plugin

Result:

http://i47.tinypic.com/2w405kg.png

Step 1:

Grab the [url=http://www.tilqi.com/assets/filter_cats.js]filter_cats.js[/url] and upload it under "../rsc/js/"

Step 2:

Open up" ..\skins_adm\_html_header.inc.php" and call the filter_cats.js with adding the following

require_js( 'filter_cats.js' );

Add the below to initiate:

		<script type="text/javascript">
			$(document).ready(function(){
				$('#filter_cats').jfilter({
					speed: 200,
					highlight: 'highlight' // Class name with no "."
				});
			});
		</script>


and below for highlighted text and filter box styling:

			<style>
			input#filter_cats { width: 194px;/*filter box width*/ border: 1px solid #666; padding: 1px; }
			.highlight { background-color: yellow; font-weight: bold; font-size: 110%; }/* highlighted text*/
		</style>


Ideally right before </head>

Step 3:

Open up "../inc/items/model/_item.funcs.php and add the following line

      $r .='<p style="margin: 4px;">Filter cats: <input id="filter_cats" type="text"></p>';

before this line

	$r .= '<table cellspacing="0" class="catselect">';


in order to display the filter box.

Thats it..

Retold with picture:

http://i47.tinypic.com/2vmisd5.jpg

It requires jQuery 1.2.6 or higher to work, but i didnt say anything about that as admin skins already include jquery by default.

Warning
This hack requires core hacking as you are playing with an admin skin.(which means you will lose your changes with an upgrade)

4 Mar 08, 2010 19:28

thanks, its pretty simple and straight forward but it ll save me time for sure.. i d be glad if someone could make it into a plugin or give some tips on how to do so or point to a similar plugin so that i can try on my own at least

5 Apr 27, 2010 12:56

just try incorporating ajax i think that would be a lot easier

6 Apr 27, 2010 17:34

jmcausing wrote:

just try incorporating ajax i think that would be a lot easier

Why use ajax when the data is already part of the dom?

¥

7 Apr 27, 2010 19:02

¥åßßå wrote:

jmcausing wrote:

just try incorporating ajax i think that would be a lot easier

Why use ajax when the data is already part of the dom?

¥

i guess he just suggest otherwise :D

tilqicom wrote:

...So i just made this quick jquery hack...

reply:
jmcausing wrote:

just try incorporating ajax i think that would be a lot easier

na3 wrote:

... i would like to incorporate some ajax transitions

reply:
jmcausing wrote:

use a jQuery

It is always good to have an opposite opinion but...P:

8 Apr 27, 2010 19:25

Keep this up and you'll understand js enhancement without reaching for the ajax vodoo doll ;)

¥


Form is loading...