Oh yeah, I’m still alive, if you were wondering..

Problem

The issue is that usually an event is added and the default behavior is disabled.

1
2
3
4

$('myLink').addEvent('click',function(e) {
    e.stop();
    //do stuff
});

And if you just so happen to need to trigger the event manually, like so:

1

$('myLink').fireEvent('click');

You’ll get an error that the stop method doesn’t exist. This is because you’re just firing the function and an event argument is not being passed into the function.

Now, lets say you have a class and you wanted to manually execute a method that’s being attached to an event. An error would also occur in this case.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myClass = new Class({
    // ... some code here..
 
    // the click event function that is attached..
    clicky: function(e){
        e.stop();
        //.. do some clicky stuff
    }
 
});
 
// create instance of class
var instance_of_myClass = new myClass();
 
// firing clicky function
instance_of_myClass.clicky(); // results in error because stop() does not exist

Solution

Here’s how you can solve both problems, and I learned this from Mark Obcena. This is very useful if you don’t want to modify the classes code or extend it. Pass in a dummy object with an empty stop function:

1
2
3
4
5

// this will fire the click event without an issue
$('myLink').fireEvent('click', {stop:$empty});
 
// this too will fire the clicky function on the instance without an issue
instance_of_myClass.clicky({stop:$empty});

Tada! Thanks David and Mark!

Check out all the details from the MooTools blog!

Core

• Element: MooTools compatibility mode: the $ function is only defined if no pre-existing $ function is found. If an existing $ function is found, you can use document.id()
• Element: changed internal instances of $ to document.id
• Core: fix for server-side MS JScript 5.x; makes MooTools more friendly for server side programming
• Class: Class doesn’t require Browser, removed from scripts.json
• Element: Fixes for set/get Property
• Element.Dimensions: fix for webkit body.scrollTop inconsistency, getBoundingClientRect used whenever possible (not just for Trident), renaming element.position to element.setPosition; adding docs for the method; alias is included in-line for compatibility
• Hash: Hash extend no longer uses the window if no arguments supplied
• Request: clearing Request readystate before calling success or failure;
• Selectors: Added :enabled pseudoselector, was in the Docs but not implemented.
• Docs: Fixed docs headers for first-child, last-child, and only-child.
• Internal: UnitTester test suite is now a git submodule
• Numerous small fixes, speed improvements, documentation tweaks, etc.

More

• Per the change in -core, $ is no longer used (uses document.id instead)
• Element.Measure: trying cssText solution for Element.expose (again).
• Element.Forms: swapping feature detection for browser support per
• Date: Massive refactoring of Date.js and Date.Extras.js
• Drag.Move: Fixing drag with grid issues
• IframeShim: altering zindex assignment in IframeShim to better ensure that it’s always underneath the shimmed element, updating Iframeshim’s empty document creation; fixes https issues in IE6
• FormValidator: reworking formvalidator scroll-to logic to be a little more efficient
• OverText: preventing overtext from focusing on inputs except when they are interacted with (so OverText.update() does not focus an input);now stops polling when elements are hidden (when polling is enabled)
• Fx.Scroll: adding scrollIntoView method – scrolls an element so that it is completely visible; if below the view, scrolls down until it is at the bottom of the screen, if above, scrolls up until it is at the top.
• JSONP: was calling (the deprecated) this.request instead of this.send during retries
• URI: Adding set(‘data’, obj) to set
• Assets: adding error callback for Assets.images
• Tips: removing dependency for Element.Measure for Tips; updating CSS class name in OverText
• Numerous small fixes, speed improvements, documentation tweaks, etc.

Great job MooTools-Dev team!

Well, you can also pull these properties by using an undocumented method in MooTools, as I just learned from Mark Obcena. How? It’s very simple as you will see.

Code

1
2

var selector_rules = new Fx.CSS().search('.some_class');
// returns an object with camelCase key's

See, isn’t that simple? Keep in mind that this doesn’t give you every single property. In my tests of running this code with Firebug on GameSpot.com, font-family and overflow properties were missing in the returned object when it clearly shows up in Firebug’s CSS panel.

I understand it’s like re-inventing the wheel. But in order to improve, we should always scrutinize work because a better solution may be available.

Here’s my first attempt, with the MooTools class, TextOverlay. If you look closely, it’s MooTools-More OverText modified to give the user more options.

What’s the Difference?

You must be wondering what’s different between the two. Well, I felt that positioning of the element should be handled by css, so I removed the reposition method. In OverText, the text-overlaying was created for you with MooTools and the default element was a ‘div’ with ‘label’ as your option. I did away with that and you now can either pass in an existing DOM element, or create one on the fly (though you’ll need to inject it into the DOM yourself). OverText ‘show’ and ‘hide’ methods explicitly call’s the text-overlay’s show/hide methods and then fires custom events ‘textShow’ and ‘textHide’. I decided to give the user flexibility by removing the explicit call’s to the text-overlay’s and only firing the custom events.

Example

The HTML, CSS, and JavaScript below is an example of how to set things up.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
    <form id="textoverlay_test" name="textoverlay_test" action="" method="post">
        <fieldset>
            <legend></legend>
            <div class="fields">
                <input id="first_name" type="text" name="first_name" value="" />
                <label for="first_name">First Name</label>
            </div>
            <div class="fields">
                <input type="text" name="last_name" value="" />
                <label for="last_name">Last Name</label>
            </div>
        </fieldset>
    </form>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.container {
    margin:0 auto;
    width:500px;
}
 
input, label {
    border:0;
    display:block;
    font:11px arial, veranda, helvetica, sans-serif;
    height:16px;
    line-height:16px;
    margin:0;
    padding:0 5px;
    width:100%;
}
 
label {
    display:none;
    cursor:pointer;
    margin-top:-16px;
}
 
.fields {
    border:1px solid #333;
    margin-bottom:10px;
    overflow:hidden;
    padding:5px;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

window.addEvent('domready', function(){
    var input, label, fields = $$('#textoverlay_test .fields').each(function(item){
        new TextOverlay(item.getElement('input'), item.getElement('label'),{
            onTextHide: function(element, text){
                text.setStyle('display','none');
                alert('hide'); //added to differentiate from default textHide event
            },
            onTextShow: function(element, text){
                text.setStyle('display','block');
                alert('show'); //added to differentiate from default textShow event
            }
        });
    });
});

Doing all this should simplify things and decrease the number of function calls. If you did a ‘console.profile’ in Firebug, I’m sure you’ll notice the difference between OverText and TextOverlay. Give it a try and let me know what you think! I’ve set it up in Github.

Features (straight from the horses mouth)

• Browse through Files and Folders on your Server
• Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
• View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
• Nice User Interface
• Upload Files via FancyUpload (integrated Feature)
• Option to automatically resize big Images when uploading
• Use it to select a File anywhere you need to specify one inside your Application’s Backend
• Use as a FileManager in TinyMCE
• Provides your Client with the most possible convenience ( ;D )

The back-end is in PHP but you can port it to whatever language you’re working with. The file manager is also released under the MIT-License. This is currently his RC1 (1st release candidate, for those not in the know). Head over to check out his demos!

Great job, Christoph!

Looks like there are some goodies from the Core:

MooTools 1.2.2 is a mainly a bug fix release but it also includes an almost entirely new Class.js. The reasoning behind this is that the old Class.js didn’t play nicely with some advanced usages of this.parent() present in the new MooTools-More. We already had the script ready and tested in the MooTools 2.0 branch so we simply “backported” it to 1.2.2. Other than providing the parent fixes, the new Class also features a much more robust inheritance model, especially when dealing with objects.

And something for the More:

One of the new features of MooTools-More, since the last RC, is that it is now possible access the previous state of overwritten methods of classes through Class.refractor.

And last bit of exciting news: quick/regular new feature bi-weekly releases.

Way to go team! Thank you for the awesome work!

Mike Horn shared with me how a user, named Hipska, created a Smarty debug template file that works with Firebug. I thought it was so awesome and decided to share it with you too, but with a slight tweak of my own.

The Code

Here’s the code. I’ll explain how it works right after.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

{* Smarty *}
{* debug.tpl, firebug version by Hipska, tweaked by GarrickCheung *}
{assign_debug_info}
{if isset($_smarty_debug_output) and $_smarty_debug_output eq "html"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Smarty Debug Console</title>
{literal}
<style type="text/css">
/* <![CDATA[ */
body, h1, h2, td, th, p {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.9em;
    margin: 1px;
    padding: 0;
}
 
h1 {
    margin: 0;
    text-align: left;
    padding: 2px;
    background-color: #f0c040;
    color:  black;
    font-weight: bold;
    font-size: 1.2em;
 }
 
h2 {
    background-color: #9B410E;
    color: white;
    text-align: left;
    font-weight: bold;
    padding: 2px;
    border-top: 1px solid black;
}
 
body {
    background: black; 
}
 
p, table, div {
    background: #f0ead8;
} 
 
p {
    margin: 0;
    font-style: italic;
    text-align: center;
}
 
table {
    width: 100%;
}
 
th, td {
    font-family: monospace;
    vertical-align: top;
    text-align: left;
    width: 50%;
}
 
td {
    color: green;
}
 
.odd {
    background-color: #eeeeee;
}
 
.even {
    background-color: #fafafa;
}
 
.exectime {
    font-size: 0.8em;
    font-style: italic;
}
 
#table_assigned_vars th {
    color: blue;
}
 
#table_config_vars th {
    color: maroon;
}
/* ]]> */
</style>
{/literal}
</head>
<body>
 
<h1>Smarty Debug Console</h1>
 
<h2>included templates &amp; config files (load time in seconds)</h2>
 
<div>
{section name=templates loop=$_debug_tpls}
    {section name=indent loop=$_debug_tpls[templates].depth}&nbsp;&nbsp;&nbsp;{/section}
    <font color={if $_debug_tpls[templates].type eq "template"}brown{elseif $_debug_tpls[templates].type eq "insert"}black{else}green{/if}>
        {$_debug_tpls[templates].filename|escape:html}</font>
    {if isset($_debug_tpls[templates].exec_time)}
        <span class="exectime">
        ({$_debug_tpls[templates].exec_time|string_format:"%.5f"})
        {if %templates.index% eq 0}(total){/if}
        </span>
    {/if}
    <br />
{sectionelse}
    <p>no templates included</p>
{/section}
</div>
 
<h2>assigned template variables</h2>
 
<table id="table_assigned_vars">
    {section name=vars loop=$_debug_keys}
        <tr class="{cycle values="odd,even"}">
            <th>{ldelim}${$_debug_keys[vars]|escape:'html'}{rdelim}</th>
            <td>{$_debug_vals[vars]|@debug_print_var}</td></tr>
    {sectionelse}
        <tr><td><p>no template variables assigned</p></td></tr>
    {/section}
</table>
 
<h2>assigned config file variables (outer template scope)</h2>
 
<table id="table_config_vars">
    {section name=config_vars loop=$_debug_config_keys}
        <tr class="{cycle values="odd,even"}">
            <th>{ldelim}#{$_debug_config_keys[config_vars]|escape:'html'}#{rdelim}</th>
            <td>{$_debug_config_vals[config_vars]|@debug_print_var}</td></tr>
    {sectionelse}
        <tr><td><p>no config vars assigned</p></td></tr>
    {/section}
</table>
</body>
</html>
{else}
<script type="text/javascript">
// <![CDATA[
var Smarty_debug = function Smarty_debug(collapsed){ldelim}
 
	var group = (collapsed) ? console.groupCollapsed : console.group;
 
	group("Smarty Debug");
 
	group("Included templates & config files");
	{section name=templates loop=$_debug_tpls}
		 console.log("{$_debug_tpls[templates].filename|escape:javascript}{if isset($_debug_tpls[templates].exec_time)} - {$_debug_tpls[templates].exec_time|string_format:"%.5f"}{if %templates.index% eq 0} (total){/if}{/if}");
	{sectionelse}
		 console.info("no templates included");
	{/section}
	console.groupEnd();
 
	group("Assigned template variables");
	{section name=vars loop=$_debug_keys}
		 console.log("{ldelim}${$_debug_keys[vars]|escape:'javascript'}{rdelim}:", {$_debug_vals[vars]|@json_encode});
	{sectionelse}
		 console.info("no template variables assigned");
	{/section}
	console.groupEnd();
 
	group("Assigned config file variables");
	{section name=config_vars loop=$_debug_config_keys}
		 console.log("{ldelim}#{$_debug_config_keys[config_vars]|escape:'javascript'}#{rdelim}:", {$_debug_config_vals[config_vars]|@json_encode});
	{sectionelse}
		 console.info("no config file variables assigned");
	{/section}
	console.groupEnd();
 
	console.groupEnd();
	return "Smarty version {$smarty.version}";
 
{rdelim};
// ]]>
</script>
{/if}

How it Works

This debug template gives you two options on how to view it: the original method display’s everything in a new pop-up window, the new and awesome method shows the same thing but in the Firebug Console. The template has an if statement/flag that checks whether it should be rendered in HTML or use Firebug. You’ll have to do some digging on how to setup this flag in your configuration, but the flag is in line 4 defined as $_smarty_debug_output.

The default is to use Firebug. A function named Smarty_debug is defined at the bottom at line 143. When you run it in the Firebug console, it will print out the Smarty debug information in the console as collapsible groups. If the browser doesn’t support console, then you probably shouldn’t be using this method, that’s why the HTML version is available.

1

Smarty_debug(); //type this in your Firebug Console

It bothered me a little that Hipska’s method printed out every line in the group once Smarty_debug function is called. Now here’s my tweak: I’ve made it optional to print out as a collapsed group but you WILL need Firebug 1.3+ (if it works on other versions, please let me know). All you need to do is supply a boolean argument.

1

Smarty_debug(true); //prints out a collapsed group

Conclusion

I really love being able to print out the Smarty debug data to the Firebug Console because I won’t have to deal with an additional pop-up every time. I get’s a little annoying and I think it suck’s up more memory. Thank you Hipska and Mike!

Now, have you heard of Sly, the new selector engine on the block? No? That’s because Harald Kirschner just released it yesterday, 03/25/09, and I can’t tell you how awesome it is.. or can I?

I’ll start you off with a brief description… and graphs!

Sly is a turbocharged, cross-browser, library-agnostic JavaScript class for querying DOM documents using CSS3 selectors.

And turbocharged it sure is, just check out the stats!

The benefits:

• Pure and powerful JavaScript matching algorithm for fast and accurate queries
• Extra optimizations for frequently used selectors and latest browser features
• Works uniformly in DOM documents, fragments or XML documents
• Utility methods for matching and filtering of elements
• Standalone selector parser to produce JavaScript Object representations
• Customizable pseudo-classes, attribute operators and combinators
• Just 3 kB! (minified and gzipped, 8 kB without gzip)
• No dependencies on third-party JS libraries, but developers can override internal methods (like getAttribute) for seamless integration.
• Code follows the MooTools philosophy, respecting strict standards, throwing no warnings and using meaningful variable names

Use it in MooTools?

Yes, that’s right. You can use it in MooTools right now, though I don’t think it’s necessary since the MooTools selector engine is very good. But just like how David Walsh showed us how to use Sizzle and Peppy in MooTools, you can do the following to use Sly:

1
2
3
4
5
6
7
8
9
10
11

Window.implement({
    $Sly: function(selector){
        return new Sly(selector);
    }
});
 
// returns an array of all the anchors in the page
$Sly('a').search();
 
// returns the first anchor on the page
$Sly('a').find();

Now, you may be wondering whether doing this will allow you to use MooTools methods on the elements. Well, the good news is that you can because the MooTools Elements class applies the methods to all elements. Observe:

1
2

// returns the href of the first anchor
$Sly('a').find().get('href');

And lastly, Oskar Krawczyk posted how to replace the $$ function itself (thanks Oskar!):

1
2
3
4
5

Window.implement({
    $$: function(selector){
        return Sly.search(selector);
    }
});

Great job, Harald, great job indeed. Way to represent!