DED|Chain A.P.I. Documentation

• @param: <String> classname
• @desc: appends a class name value to the class attribute

Toggle Example code

_$('#content').addClass('active');

• @param: <String> classname
• @param: <Function> callback
• @desc: returns a boolean to the callback depending if the provided classname is found

Toggle Example code

_$('#content').hasClass('active', function(b) {
    // b is either true or false
});

• @param: <String> classname
• @desc: removes a class name from class attribute

Toggle Example code

_$('#content').removeClass('active');

• @param: <String> old
• @param: <String> new
• @desc: replaces the old class name with the new class name

Toggle Example code

_$('#content').replaceClass('active', 'inactive');

• @param: <String> name: The name of the CSS property you're seeking
• @param: <Function> callback: The function that returns the style value
• @desc: YUI core: YAHOO.util.Dom.getStyle

Toggle Example code

_$('#content').getStyle('color', function(c) {
    // 'c' is the color
});

• @param: <String> prop: The name of the CSS property you want to set
• @param: <String> value: The value of the CSS property you want to set
• @desc: YUI core: YAHOO.util.Dom.setStyle

Toggle Example code

_$('#content').setStyle('color', '#f00');

• @desc: sets the element selector to be shown

Toggle Example code

_$('#content').show();

• @desc: sets the element selector to be hidden (display:none)

Toggle Example code

_$('#content').hide();

• @desc: toggles the element selector between show and hide

Toggle Example code

_$('#content').toggle();

• @param: <Function> callback: returns the XY cordinates (in pixels) of selector of type <Array>
• * @desc: YUI core: YAHOO.util.Dom.getXY

Toggle Example code

_$('#content').getXY(function(xy) {
    // xy is array of cordinates
    // eg [200, 400]
});

• @param: <Array> xy: sets the XY cordinates (in pixels) of the selector
• @desc: YUI core: YAHOO.util.Dom.setXY

Toggle Example code

_$('#content').setXY([300, 500]);

• @param: <Object> styles: sets each style property in the styles object
• @desc: An elegant style of setting CSS properties on DOM elements

Toggle Example code

_$('ul#navigation li').setCSS({
    color: 'red',
    backgroundColor: '#00f',
    textTransform: 'uppercase',
    position: 'relative',
    left: '2px',
    fontFamily: '"trebuchet ms"',
    fontSize: '1.2em'
});

• @param <Object> o: animation properties. The first subset of keys are the css properties (as objects). Those subsets of objects take in a 'from' key, and a 'to' key, and a 'unit' key.
• @param <Int> time: unit of time measured in seconds
• @param <Function> ease: The callback which calculates the easing of the animation. Usually one from YAHOO.util.Easing
• @param <Object> callback: This callback object has 'before' and 'after' properties, which are of type <Function>

Toggle Example code

_$('#box').animate({
    color: {
        from: '#fff',
        to: '000000'
    },
    fontSize: {
        from: 1,
        to: 1.5,
        unit: 'em'
    }
    opacity: {
        from: 1,
        to: 0.5
    },
    width: {
        to: 600,
        unit: 'px'
    }
}, 
1,
YAHOO.util.Easing.easeOut,
{
    before: function() {
        // do stuff...
    },
    after: function() {
        // do stuff...
    }
});

• @param <Object> o: motion properties. The first subset of keys are the action properties (as objects). Those subsets of objects take in a 'from' key, a 'to' key, a 'by' key, a 'control' key, and a 'unit' key.
• @param <Int> time: unit of time measured in seconds
• @param <Function> ease: The callback which calculates the easing of the motion. Usually one from YAHOO.util.Easing
• @param <Object> callback: This callback object has 'before' and 'after' properties, which are of type <Function>

Toggle Example code

_$('#box').move({
    points: {
        // optional. Defaults to where it currently sits
        from: [0, 0],
        // or use 'by'
        to: [200, 300],
        // or use 'to'
        by: [400, 300],
        // optional
        control: [[500, 100], [-200, 600]]
    }
},
2,
YAHOO.util.Easing.elasticOut,
{
    before: function() {
        // do stuff...
    },
    after: function() {
        // do stuff...
    }
});

• @param: <Object> o {optional}: An object with a 'duration' key, and a 'callback' key.
• @desc: fades in the selector. The duration defaults to 1 if one isn't provided, and the callback function will not fire if it isn't provided.

Toggle Example code

// fadeIn with options
_$('#content p').fadeIn({
    duration: 1,
    callback: function() {
        // do stuff...
    }
});

// fadeIn without options
_$('#content p').fadeIn();

• @param: <Object> o {optional}: An object with a 'duration' key, and a 'callback' key.
• @desc: fades out the selector. The duration defaults to 1 if one isn't provided, and the callback function will not fire if it isn't provided.

Toggle Example code

// fadeOut with options
_$('#content p').fadeOut({
    duration: 1,
    callback: function() {
        // do stuff...
    }
});

// fadeOut without options
_$('#content p').fadeOut();

• @param: <String> type: The type of DOM event
• @param: <Function> callback: The method that will be fired back upon the event being fired. There are two parameters passed back to this function.
  1) el @type: HTMLElement: The element the event was assigned to
  2) e @type: Event: The event object associated with the event that was fired
• @param: <Boolean> preventDefault: Will stop the default action for the event
• @desc: 'on' is the core of all event handling in DED|Chain. See the example code for best understanding.

Toggle Example code

/*
* get all links within id="content"
* assign click event listener
* when clicked...
* fetch the url of it's 'href' attribute
* set the contents of id="results" with the result
* prevent the default action (following link)
*/
_$('#content a').on('click', function(el, e) {
    this.fetch(el.href, {
        after: function(resp) {
            _$('#results').setContent(resp);
        }
    });
}, true);
    

• @param: <HTMLElement> element: The element object that will be appended to the selector
• @desc: This Interface is not final. For now it takes an element, and sets it as a child of the selected elements.

Toggle Example code

See example for 'create'

• @param: <String> element: The element you want to create
• @param: <Object> attributes: The attributes you want set on the element
• @param: <Function> callback: The function your new element will be passed to

Toggle Example code

_$('ul#people li').create('a', {
    class: 'person',
    rel: 'friend'
}, function(el) {
    // el is the element you've just created
    // works well with append :)
    this.append(el);
});

• @param: <Int> time: The length of time in seconds before each needle is fired back to the callback
• @param: <Array||Object> haystack: The array of needles, of object literal. If an object is passed in, the needle passed back to the callback function will be represented with two keys. The keys will be appropriately named "key" and "value"
• @param: <Object> config: The configuration object which contains two keys
  1) id <String>: a unique identifier for the throttler
  2) callback <Function>: The method the needle is passed to
  3) loop <Boolean>: Denotes whether the throttle should continue looping
• @desc: Throttle is very unique in what it does. It is more like a throttle map. It will fire off timed requests at a callback mapped to the array (or object) with the needle.

Toggle Example code

_$().throttle(2, ['diaz', 'adams', 'snook'], {
    id: 'unique_throttle_identifier',
    callback: function(needle) {
        // do stuff with needle
    },
    loop: true // defaults to false
});

• @param: <String> throttle_id: the unique throttle id
• @desc: Stops a current throttle process by a unique identifier

Toggle Example code

_$().stopThrottle('some_throttle_id');

• @param: <Int> time: A time measured in seconds (defaults to 1)
• @param: <String> repeatid: A unique id representing the repetition
• @param: <Function> fn: The callback function that gets repeated
• @desc: A simple mechanism to repeat an actions on the chain

Toggle Example code

_$().repeat(
    10,
    'some_repeat_id',
    function() {
        // do stuff...
    }
);

• @param: <String> repeat_id: the unique repeat id
• @desc: Stops a current repeated process by a unique identifier

Toggle Example code

_$().stopRepeat('some_repeat_id');

• @param: <String> attribute: The desired attribute from which to be plucked
• @param: <String> delimeter: Optional parameter which will join the array
• @param: <Function> callback: The callback method which will provide the plucked values
• @desc: A simple way to grab attribute values from the selected elements

Toggle Example code

_$('form input:checked').pluck('value',
    ",",
    function(plucked) {
        // do stuff with the plucked values
    }
);

• @param <Object> config: sets the configuration properties of hijacking a form. The object has the following keys:
  1) before <Function>: Called immediately after 'submit' fires, but before a request has been successful or failed.
  2) after <Function>: called upon 'success' of the submission with the response passed as the first argument
  3) failure <Function>: called when the request fails
  4) populate <String/HTMLElement>: An element or string of an id of an element to populate the contents of the response back from the server
• @desc: Allows you to simply hijack any given form essentially making it 'POST' ready with all the elements of the form.

Toggle Example code

// simplest way to use hijackForm
_$('form#registration').hijackForm();

// or use formal parameters
_$('form#registration').hijackForm({
    populate: 'results'
});

// or other stuff
_$('form#registration').hijackForm({
    before: function() {
        _$('#spinner').show();
    },
    after: function(resp) {
        _$('#spinner).hide();
        _$('#notify').setContent(resp);
    }
});

• @param: <String> uri: The uri of you want to fetch
• @param: <Object> callback: The callback object with the following keys:
  1) before <Function>: called directly before the request is made
  2) after <Function>: called when the request completes and returns the reponseText
• @desc: D|C's way of doing AJAX. It's easy and straight to the point.

Toggle Example code

_$('#content').fetch('data.php', {
    before: function() {
        _$('#spinner').show(); 
    },
    after: function(resp) {
        _$('#spinner).hide();
        this.setContent(resp);
    }
});

• @param: <String> uri: A valid uri.
• @desc: A shortcut of taking a uri, and populating the selector with the results. Takes the cruft out of alternative methods.

Toggle Example code

_$('#content').populate('data.php');
// can someone tell me where the easy button is?

• @param: <String> content: A string of HTML
• @desc: Takes a set of HTML, and populates the selector

Toggle Example code

_$('div.columns').
    setContent('<p>hello world</p>');

• @param: <Object> config: The configuration object that allows you to customize the DED|Chain API.
• @desc: This functionality allows you to change the way you work with the D|C library. Currently this function cannot be run outside of the file.

• @param: <String> name: The name of the function you extend onto the chain
• @param: <Function> fn: The function that extends the chain
• @desc: If you need more functionality on your chains, by all means, extend the library using this plugin API.

Toggle Example code

// extend the chain
DED.extendChain('dostuff', function(a, b, c) {
    console.log(a, b, c);
    return this; // ALWAYS "return this"
});

// use the new functionality
_$('pre code').
    // use your extension
    doStuff('foo', 'bar', 'baz'). 
    // use existing D|C
    setStyle('color', 'orange'). 
    // use your stuff again!
    doStuff('thunk', 'blam', 'bla');