EVC - Hooks

by AaronLayton

HTML

<ul>
    <li><a id="btnTest" href="#">Click me</a></li>
    <li><a class="quickAdd" href="#" data-prodid="1">Add Product 1</a></li>
    <li><a class="quickAdd" href="#" data-prodid="2">Add Product 2</a></li>
</ul>


<div id="quickAddBasket"></div>

CSS

/* http://fiddle.jshell.net/AaronLayton/eyNre/35/show/ */



/* the styles arnt important to this example */
ul {margin:20px;list-style-type:disc;}
ul li {margin: 3px 0 3px 10px;list-style-type:disc;}

#quickAddBasket {
    display:none;
    width:100px;
    height:100px;
    position:absolute;
    top:10px;
    right:10px;
    border: 1px solid #777;
    background-color: white;
    color: #777;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    background-image: linear-gradient(bottom,#e9e9e9 0,#fff 100%);
    background-image: -o-linear-gradient(bottom,#e9e9e9 0,#fff 100%);
    background-image: -moz-linear-gradient(bottom,#e9e9e9 0,#fff 100%);
    background-image: -webkit-linear-gradient(bottom,#e9e9e9 0,#fff 100%);
    background-image: -ms-linear-gradient(bottom,#e9e9e9 0,#fff 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#e9e9e9),color-stop(1,#fff));
    border-image: initial;
}

JavaScript

// Hooks test

$('a#btnTest').click(function(){
    
    
    // Run all functions that are binded to 'evc-button-click'
    $(window).trigger('evc-button-click');  // All events bound to a global object
    
    $(window).trigger('evc-doesnt-exist');  // This event doesn't exist bust also doesn't break the code
});

// We can then bind functions to any event we make up
$(window).bind('evc-button-click', function(){
    // This event gets ran everytime the button is clicked
    console.log("Clicked");  // Check the console
});











// Got that?
// Good look down















/// Example usage

// A Core js library for the basic tasts, like adding a product
var core = {}; // new object
core.addProduct = function( prodID ){
    // ... add product 
    // call some ajax to send it back to the server
    
    // Notify the page in whole that a product was added
    $(window).trigger('evc-product-added', [ prodID ]);
};


// In a separate file, when we click to add an item we can just call the core
$('a.quickAdd').click(function(){
    // Everytime a quickAdd button is clicked
    var thisClickedHref = $(this);
    
    // Call our core to add a product (use the core so all sites do it the same way, i.e. fast)
    core.addProduct( thisClickedHref.data('prodid')  );
    
    // The core will now go and add the product and do all the ajax calls needed.
});







// With me so far?
// Awesome....
// look down













// The extended module
// Example QuickBasket Module

QuickBasket = (function(core,$){
    
    var internalShowBasket = function(){
        // Add any code to update the baskets values
        $('#quickAddBasket').show().fadeOut(3000);
    }
        
    // This module can bind to any existing event
    $(window).bind('evc-product-added', function(event, prodID){
        // We can just trigger another event
        internalShowBasket();
    });
    
    
    // the public function will be showBasket
    return {
        showBasket:...