Hacking at 0300

I've updated my widgets tutorials to use jQuery UI 1.6, pulling the rc5 release off the svn site and turning them into pages rather than posts, since they seem to be so popular. See the widget tutorial and the extending widgets page.

Now all I need is for the UI team to officially release 1.6 so I can load it from googleapis rather than the jquery svn!

Updated 2011-02-28; minor bug fix. Thanks, brian!

Every time I create or use a jQuery plugin, I realize that the assigning of behaviors to elements on the page is a design decision, not a programming one, and one that should be made by the guy in charge of the CSS, not the guy in charge of the javascript. Even when I'm the same guy, I want to wear each hat separately. But these presentational enhancements are written in javascript and applied in javascript. So my "presentational" code is in two different files:

style.css

.gallery a { border: 1px solid green }

style.js

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

I could put the presentational javascript in the HTML with $.metadata but while that's fine for quick-and-dirty pages, it's evil in production since it completely violates the separation of data/structure/presentation/behavior.

As I and others have noted before, the application of these plugins belongs in the stylesheet, and I finally got it to work:

style.css

.gallery a {
  border: 1px solid green;
  -jquery-lightbox: {overlayBgColor: '#ddd'};
}

and a single call to start it off: $(document).parsecss($.parsecss.jquery) .

Download the code.

See the demo.

Continue reading ‘jQuery CSS parser’ »

Switched themes to Barthelme; very simple and elegant. Removed the Chili code highlighting line-numbering, which only worked intermittently, tended to get lost in the margins of the <pre> elements, and didn't add much.

I added some potentially dangerous code to automatically turn code examples (things in <code> elements with class demo into actual HTML or javascript that are added to the post. The javascript part works; I used it in the last post; here's testing the HTML insertion:

  <div style="background: purple; margin: 2px">This is a test</div>

And more testing:

  <div style="background: #080; margin: 2px">This is a test</div>

Update: I no longer (2012-08-05) use Chili; I've switched to Prism.

I like the idea of syntax coloring, so let's see if Chili works:

alert('Hello, world');

and another: <div>Hello, <em>world</em></div>

I'm trying to be as HTML5-compliant as possible, at least in the sense of using their standards rather than making up my own, so the Chili setup I'm using is:

    $.extend(ChiliBook, {
        automatic: false,
        codeLanguage: function(el){
            // use the HTML5 language class
            var recipeName = /language-(\S+)/.exec(el.className);
            return recipeName ? recipeName[1] : '';
        }
    });
    $(function(){
        $('code[class*=language-]').not($('pre code')).chili({lineNumbers: false})
                                  .otherwise().chili({lineNumbers: true});
    });

 

Sweet! The idea of the above code is to look for a class that starts with "language-" and use that as the recipe for Chili (rather than Chili's built-in way of taking the entire className). It also assumes that any code in a pre element should have line numbers, and anything else should not. It uses the cute and brilliant otherwise plugin from http://groups.google.com/group/jquery-en/browse_thread/thread/6be2a127822a108d.

Update: It looks like line numbering works only intermittently. Oh well; I won't fix it.

I just looked at the blog in IE, and it looks like my <pre> elements mess everything up. They have the CSS set as scroll: auto, but IE doesn't care. Honestly, at this point, I don't care either. This blog is for me to document my thoughts on creating the Young Israel website and anyone is welcome to listen in, but you're far better off in Firefox or Safari anyway.

The Using Javascript page in the Codex says to include common javascript files in your header.php file, but that means re-writing it whenever you change themes. I created a simple plugin that includes jQuery and ui.jquery on each page; it's

<?php
/*
Plugin Name: jQuery
Plugin URI: http://bililite.nfshost.com/blog/
Description: Includes the jQuery javascript framework (and the ui.jquery plugins) in your page, with some styling for <pre> elements
Author: Daniel Wachsstock
Version: 1.0
Author URI: http://bililite.nfshost.com/blog/
*/ 

function jQuery(){
echo '
   <script type="text/javascript" src="http://www.google.com/jsapi?key=apikey"></script>
   <script type="text/javascript">google.load("jquery","1");</script>
   <script type="text/javascript" src="http://ui.jquery.com/js/ui.js" ></script>
   <style>
      pre {
        background: #F4F4F4;
        border: 1px solid #B2B2B2;
        overflow: scroll;
      }
    </style>';
}

add_action('wp_head', 'jQuery');

?>

Replace apikey with your own Google API key.

I was trying to figure out how to organize the shiurim in a way that allowed for "AND" filters; something like author=shulman&tag=audio&tanach. Regular expressions won't work; but PHP allows you to use [] after a name and it automatically creates an array, so author=shulman&tag[]=audio&tag[]=tanach works (tag=audio&tag=tanach just overwrites the first tag).
The archive filter is now basically:

function shiurquery($get){
  $ret = '1';
  foreach($get as $query=>$item) $ret .= shiurquerystring($item, $query." REGEXP");
  return $ret;
}

function shiurquerystring ($item, $query){
  if (is_array($item))
    return join (' AND ', array_map ('shiurquerystring', $item, array_fill(0, count($item), $query)));
  return "$query\"$item\"";
}

Where shiurquerystring uses array_map to recursively analyze each element of the array. It's a bit obscure but works, and tighter than a for-each loop.
So shiurquerystring("shulman", "author REGEXP",) returns 'author REGEXP "shulman"' and
shiurquerystring(array("Tanach", "Audio"), "tag REGEXP") returns 'tag REGEXP "Tanach" AND tag REGEXP "Audio"',
just as we wanted,
and shuirquery(parse_str("author=shulman&tag[]=Audio&tag[]=Tanach") returns
'1 AND author REGEXP "shulman" AND tag REGEXP "Audio" AND tag REGEXP "Tanach'.
Perfect!
The "1 AND" at the beginning makes the coding easier. The actual code is a bit more involved, to prevent cross-site scripting and to limit the filters to specific items.

It’s finally live: the redesigned Young Israel site. So far, the feedback has been all positive, and I figured I’d have more free time once it was done. But nooooooo: I’m going to have to reorganize the shiur archives; with Rabbi Shulman adding 2+ a week, it’s going to add up fast. I like the idea of organizing with tags, but right now the search is with regular expressions. Expressing ‘or’ is easy: tanach|kohelet. But is there a way to do ‘and’ with RE’s? Something like tanach&audio ? I don’t think so. So it’s back to the drawing board.

’nuff said.

http://irregularwebcomic.net/1736.html