bbelements async loading

bbelements.html

<!-- 

je treba na strance vytvorit pozice ve stylu:

<div id='branding_1829391' data-bbelements-id="21812.1.2.9"></div>

kdy identifikator elementu je vzdy unikatni, nejlepe generovany z CMS

-->
<script id='ibbTagEngine' src='https://bbcdn-static.bbelements.com/scripts/ibb-async/stable/tag.js'></script>
<script type='text/javascript'>

    var bb_attr_name = 'data-bbelements-id';
    var bb_all_positions = null;
    bb_create();

    function bb_create() 
    {
        var adserver = ibbAds.tag.useAdProvider("BbmEu"); // Create bbElements variable if ibbAds exist

        bb_handlers();

        // run something live
        bb_fillManageSlot(bb_findPositions(), adserver);

        // make request to bbelements server
        ibbAds.tag.requestAndPlaceAds(adserver);
    };


    /**
     * Native bbelements handlers
    */
    function bb_handlers() 
    {
        // if ad has some conentet to render
        ibbAds.tag.on("ADS_WRITTEN_TO_AD_SLOT", function (event) {
            var id = event.getData().slotId;
            document.getElementById(id).className = "promotion__slot_active";
        });

        // there is no content in ad for rendering
        ibbAds.tag.on("NO_AD_RETURNED_FOR_AD_SLOT", function(event) {
            var id = event.getData().getCustomId();
            document.getElementById(id).className = "promotion__slot_empty";
        });         
    };


    /**
     * find in DOM all <div> which has filled data-position-id="XY" and get his ID
    */
    function bb_findPositions()
    {
        if(null == bb_all_positions)
        {
            var array       = [];
            var elements    = [].slice.call(document.querySelectorAll('div['+bb_attr_name+']'));

            elements.forEach(function(i)
            {
                id_el = i.getAttribute('id');
                id_bb = i.getAttribute(bb_attr_name);

                array.push([id_el, id_bb]);
            });

            bb_all_positions = array;
        }
        else 
        {
            var array = bb_all_positions;
        }

        return array;
    };


    /**
     * say bbelements about position to load!
    */
    function bb_fillManageSlot(array, adserver)
    {
        array.forEach(function(i)
        {
            adserver.manageAdSlot(i[0], i[1]);
        });
    };


    /**
     * get only element ids from loaded array of positions
    */
    function bb_getPositionElementIds()
    {
        var flat = [];
        var list = bb_findPositions();

        list.forEach(function(i)
        {
            flat.push(i[0]);
        });


        return flat;
    };


    /**
     * make request to bbelements for reload all positions on site
    */
    function bb_reloadAllPositions()
    {
        var ids = bb_getPositionElementIds();
        ibbAds.tag.requestAndPlaceAds(ids);
    };




/* takto vypada klasicky zpusob pouziti: */
/*
   
    var adserver = ibbAds.tag.useAdProvider('BbmEu');

    console.log(adserver);

    ibbAds.tag.on("ADS_WRITTEN_TO_AD_SLOT", function (event) {
        var id = event.getData().slotId;
        document.getElementById(id).className = "promotion__slot_active";

        console.log(id);
    });

    ibbAds.tag.on("NO_AD_RETURNED_FOR_AD_SLOT", function(event) {
        var id = event.getData().getCustomId();
        document.getElementById(id).className = "promotion__slot_empty";
    });



    var branding    = adserver.manageAdSlot('branding_1829391', '21812.1.2.9');
    var square      = adserver.manageAdSlot('square', '21812.1.14.5');
    var square2     = adserver.manageAdSlot('square2', '21812.1.15.5');
    var square3     = adserver.manageAdSlot('square3', '21812.1.16.5');
    var square4     = adserver.manageAdSlot('square4', '21812.1.17.5');
    var square5     = adserver.manageAdSlot('square5', '21812.1.21.5');
    var boardbanner = adserver.manageAdSlot('boardbanner', '21812.1.8.8');
    var nestandard  = adserver.manageAdSlot('nestandard', '21812.1.14.18');


    // render all positions here
    ibbAds.tag.requestAndPlaceAds(adserver);
*/
</script>