Cacher is the code snippet organizer for pro developers

/* global Callbacks, Strings, $, _, Mustache, CryptoJS */
/* jshint strict: false, maxparams: 5 */

// // Tips: Load the JavaScript libraries you need
// Stackla.loadJS([
//     'https://cdnjs.cloudflare.com/ajax/libs/slabText/2.3/jquery.slabtext.min.js'
// ]).then(function () {
//     // After all JS urls are loaded
// });



$.extend(Callbacks.prototype, {	
    /**
     * #1 Invoked befored tiles are rendered.
     * Use it when you want to add, remove, or update tiles before rendering.
     */
    onBeforeRenderTiles: function (addedIds, addedData) {
        //console.log('[onBeforeRenderTiles]', addedIds, addedData);
    },
    /**
     * #2 Invoked before each tile is appended to container.
     * Use it when you need to modify the tile HTML structure according to its data.
     */
	onCompleteJsonToHtml: function ($tile, tileData) {
        
        // FIND THE TILE-CONTENT ELEMENT
        // AND PREPEND OUR NEW HOVER ELEMENT CALLED TILE-HOVER
        var $content = $tile.find('.tile-content');
        $content.prepend('<div class="tile-hover"></div>');
        
        // REPOSITION TILE-SOURCE TO BOTTOM OF TILE-CONTNENT
        $content.append($tile.find('.tile-source'));
        
        // FIND TILE-HOVER ELEMENT
        // AND MOVE TILE-CAPTION INTO IT
        var $hover = $tile.find('.tile-hover');
		
		// CREATE AND APPEND A NEW TILE-USER ELEMENT
        // MOVE POST'S USER INFO TO TILE-USER ELEMENT
        $hover.prepend('<div class="tile-user"></div>');
        $tile.find('.tile-user').append($tile.find('.tile-user-top'));
		
        $hover.append($tile.find('.tile-caption'));
		$hover.prepend($tile.find('.tile-timestamp'));
        
        
        // REMOVE ALL LEFTOVER ELEMENTS THAT AREN'T NEEDED
        //$tile.find('.tile-timestamp').remove();
        $tile.find('.tile-details').remove();
		$tile.find('.tile-belt').remove();
        $tile.find('.tile-avatar-wrapper').remove();
        $tile.find('.tile-twitter-intent').remove();
        $tile.find('.tile-interactions').remove();
        $tile.find('.tile-tags').remove();
        
        return $tile;
    },
    /**
     * #3 Invoked after each tile is appended to container.
     * Use it when you need to resize inside elements according to actual tile dimension.
     */
    onCalculateDimensions: function ($tile) {
        var tileWidth = $tile.width();
        $tile.height(tileWidth);
    },
    /**
     *  #4 Invoked after each tile is appended to container.
     */
    onCompleteAddingToDom: function ($tile) {
        //console.log('[onCompleteAddingToDom]', $tile);
    },
    /**
     * #5 Invoked after each tile image is loaded.
     */
    onCompleteRenderImage: function ($image) {
        //console.log('[onCompleteRenderImage]', $image);
    },
    /**
     *  #6 Invoked after tiles are rendered.
     *  Use it when you need to update tiles after they are rendered.
     */
    onCompleteRenderTiles: function ($addedTiles, addedData) {
        //console.log('[onCompleteRenderTiles]', $addedTiles, addedData);
    },
    /**
     *  Invoked after filter is changed.
     *  Use it when you need to prompt user the filter has been changed.
     */
    onCompleteChangeFilter: function ($tiles, prevFilterId, nextFilterId) {
        //console.log('[onCompleteChangeFilter]', $tiles, prevFilterId, nextFilterId);
    },
    /**
     * Invoked when a widget receives customised message from parent page.
     */
    onMessage: function (type, data) {
        //console.log('[onMessage]', type, data);
    }
});