do not understand to extend a function

[hamburger]

Hello, I'am learning moo by doing. I found some jquery-stuff i would
like to translate.
but i do not understand the code. Where is the loaded-function called?
I see only the setting.loaded-function.

http://jsfiddle.net/4YsUV/2/

maybe I get some help here?
thanks in advance.

[Arian Stolwijk]

The 

$.extend({preload: function(){...});

seems to be equal to:

$.preload = function(){ ... };

In MooTools we have something similar, for Types, like String/Array/Element etc. we have http://mootools.net/docs/core/Core/Core#Type:extend

A bit later on $.extend({}, {}, ...) is used for the options.

This is basically equal to Object.append({}, {}, ...); http://mootools.net/docs/core/Types/Object#Object:Object-append

Additionally something often used in jQuery is $.fn.bar = function(){ ... }

This is actually adding a method to $() so you can do $('div').bar(); It's a little trick, but $.fn == $.prototype, which is native JavaScript. MooTools can do that too, For example String.prototype.foo = function(){ ... } or Element.prototype.bar = function(){ ... } which lets to do respectively 'ymString'.foo() or $('myElement').bar(). To make this easier we have Type.implement() (http://mootools.net/docs/core/Core/Core#Type:implement)

[hamburger]

Hi,
I modified it to moo
what is imgList.push($("<img />") doing?

http://jsfiddle.net/4YsUV/4/

[Arian Stolwijk]

$('<img>') is the same as new Element('div')

[hamburger]

Ok. But new Element('img') has no .load(function() {..}

I think its easier to do everything new include the logic. I remember
the function assets ...

[Arian Stolwijk]

.load(fn) is jquery for .addEvent('load', fn).

[hamburger]

Thanks Arian,
I did not remember the event load in this case.
I think its running. Not nice but ...

http://jsfiddle.net/4YsUV/6/

are the errors jsfiddle ones?

Why the the delay funktion not as easy as the jquery one?
moo: (function () {$("preloader").fade('out');}).delay(5000);
jquery: $("#preloader").delay(5000).fadeOut();

[hamburger]

as you see here: http://jsfiddle.net/4YsUV/2/
the fade('out') is a real fade out ...

[Dimitar Christoff]

I know this is learning but why not look at Asset.images in Asset.js
from more here for inspiration? It's a great implementation.

--
Dimitar Christoff

"JavaScript is to JAVA what hamster is to ham"
Personal blog: http://fragged.org/ - Twitter: @D_mitar

[hamburger]

Hello Dimitar,
I just mentioned the asset.images-stuff. I'am sure its pretty easy
with this.
But I do not need an result. I only would like to understand what
happens and where are my issues.

[Rolf Langenhuijzen]

If you look at the assets images function you will see how it works
with Moo.
You write you do not need load, but with the events available you can
determine the status of the preload you want (like showing the amount
of images that are loaded).
See http://mootools.net/docs/more/Utilities/Assets#Asset:Asset-images
and the onProgress and onComplete events.

When you want to convert jquery to mootools, my tip is to first try to
read the jquery code (if you have experience with that) and write down
what is actually happening in steps. Then keep the jquery code as
reference, but look at mootools code which plugins/code/methods you
can use to achieve the same result.

So this would be a preloader you feed an array of images. The
preloaders set some text in an info container and updates the
container while loading images. It also has a progress bar and when
done it will wait 5 seconds and fade out. Correct?



If the image is loaded you also have a reference to the image

[Dimitar Christoff]

On 21/02/2012 14:55, hamburger wrote:

It can be simple-ish:

basically, delay is a function decorator, you tell it to run the method
fade from whatever:

var pre = $("preloader");

// from host obj a fade.
Element.fade(pre, [0,1]);

// delayed from host obj - first arg is element, second is for fade
Element.fade.delay(1000, null, [pre, [0,1]]);

// from prototype, bind, simpler - bind to object, pass arg
Element.prototype.fade.delay(2000, pre, [0,1]);

// kind of the same as above
pre.fade.delay(3000, pre, [0,1]);

the jquery one will basically make a function out of $(this).fadeOut()
and run it after 500ms, so it's kind of written backwards but the end
result is the same as your initial mootools one.

[hamburger]

thx Dimitar for your explanation of delay.
I think I get it.
If you look to the jquery origin ( http://jsfiddle.net/4YsUV/2/ ) you
will see, that in the end there is a really fade-out.
With the moo-version there isn't one. http://jsfiddle.net/4YsUV/6/
tested in firefox 3.6

one more question to the structue
$(function() {
$.preload([ // define an array
"bg_1.png",
"bg_2.png"
], {
init: function(loaded, total) { //function object
dosomething
},
...

how I have to write in in moo?

var preload = ([ //array
"bg_1.png",
"bg_2.png"
], {
init: function(loaded, total) {...
is wrong

[Dimitar Christoff]

On Wed Feb 22 11:18:01 2012, hamburger wrote:
> thx Dimitar for your explanation of delay.
> I think I get it.
> If you look to the jquery origin ( http://jsfiddle.net/4YsUV/2/ ) you
> will see, that in the end there is a really fade-out.
> With the moo-version there isn't one. http://jsfiddle.net/4YsUV/6/
> tested in firefox 3.6

http://jsfiddle.net/dimitar/4YsUV/9/

One thing I'd consider is the undocumented overload option to tween
instance through fade - i.e. .fade(1, 0) ensures a start and env value
for the tween.

Anyway.

var pre = $("preloader");

pre.fade.delay(5000, pre, [1, 0]); - works

[hamburger]

You are right Dimitar.
Does this make sense?
http://jsfiddle.net/4YsUV/10/

[Dimitar Christoff]

Yes, why not - mootools is what you make out of it - though your method
is not chainable as is - it defers the action and returns nothing. add
return this;

even so, the return this can have unexpected behaviours if you destroy
the element before it runs.

eg. $("foo").fadeout(5000).destroy(); -> 5 second later, you have an
exception. this sort of pattern does not allow you to check if the
element still exists when it runs nor does it degrade gracefully when it
does not nor does it cater for management of timers - what happens when
you .fadeout(3000).fadeout(3010)?

will create 2 separate functions with no respect for tweening going on
at the moment.

if none of that is a concern, you don't need to go to dealing with
element.tween directly and manage it. else, you may be better off doing
that instead.
--
Dimitar Christoff

"JavaScript is to JAVA what hamster is to ham"

http://fragged.org/ | @D_mitar | https://github.com/DimitarChristoff

[Matthew Hazlett]

Just for fun:
http://jsfiddle.net/hazlema/4YsUV/11/

Do whatever you want to it