path: root/public/assets/js/lesson-features.js

const valid_codeblocks = [      // supported sort-code keys
    'youtube',
    'spotify',
    'spotify-track',
    'world-data',
    'vimeo',
    'dailymotion'
];


const symbol_escapes = [
    { esc: '>',    chr: '>' },
    { esc: '&lt;',    chr: '<' },
    { esc: '&amp;',   chr: '&' },
    { esc: '&quot;',  chr: '\"' },
    { esc: '&apos;',  chr: '\'' },
    { esc: '&euro;',  chr: '€' },
    { esc: '&copy;',  chr: '©' },
    { esc: '&reg;',   chr: '®' }
];


var youtube_template = ( id => {
    return '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/'+ id +'?rel=0&controls=0" title="YouTube video player" frameborder="0" allow="clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>';
}); 


var spotify_template = ( id => {
    return '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/episode/'+ id +'?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>';
});

var spotify_track = ( id => {
    return '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/'+ id +'?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>';
});

var owid_template = ( id => {       // our world in data (explorer)
    return '<iframe src="https://ourworldindata.org/explorers/'+ id +'?zoomToSelection=true&hideControls=true" loading="lazy" style="width: 100%; height: 480px; border: 0px none;"></iframe>'
});

var vimeo_template = ( id => {
    return '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/'+ id +'?h=2e7bdb3901&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>'
});

var dailymotion_template = ( id => {
    return '<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"> <iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden" frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/'+ id +'" width="100%" height="100%" allowfullscreen title="Dailymotion Video Player" > </iframe> </div>'
});



/** inject_codeblocks
 * --- -- -- - - -
 * 
 * NOTE:
 * a short-code is a mustache block of 3 parametres:
 * {{ object = someID ; some label description }}
 * ex. `{{product=1507175; Coca Cola Zero}}`
 * 
 * The short-code is parsed to a code-block:
 * an `a` modal-toggler link with certain data-attributes (+label), ex:
 * `<a class='modal-toggler view-product' data-id='1507175'>Coca Cola Zero</a>`
 * 
 * @param code (string): original content html with short-codes
 * @returns (string): html content with code-blocks
 */
function inject_codeblocks(code) {
    // isolate all mustache blocks
    const regexp = /{{(.*?)}}/g;        // regex makes multiple-matching easier
    const matches = [...code.matchAll(regexp)];
        // console.log(matches);
    
    var output = code;      // use a copy of (source) code

    console.log(matches);
      
    matches.forEach( match => {
      // parse (every) match
        // NOTE:
        // match array has 3 items; example:
        // match[0] : `{{youtube=6EA-MIYY1bg}}`
        // match[1] : `youtube=6EA-MIYY1bg`
        // match[3] : the (source) code string

      // let blockparts = unescaped_str( match[1] ).trim().split('=');
      let blockparts = match[1].trim().split('=');
      let target = blockparts[0].toLowerCase();
      let id = blockparts[1];
      // let label = escaped_str(blockparts[1]);
      if (valid_codeblocks.includes(target)) {

        var codeblock = '';

        console.log(target, id);

        switch (target) {

            case 'youtube':
                codeblock = youtube_template(id);
                break;
            
            case 'spotify':
                codeblock = spotify_template(id);
                break;

            case 'spotify-track':
                codeblock = spotify_track(id);
                break;

            case 'world-data':
                codeblock = owid_template(id);
                break;

            case 'vimeo':
                codeblock = vimeo_template(id);
                break;

            case 'dailymotion':
                codeblock = dailymotion_template(id);
                break;
                
            default:
                codeblock = id;

        }

        output = output.replaceAll(match[0], codeblock);

      }
    });
    
    return output;
}


// pair of function to escepe/unescape special html symbols
// --- -- -- - - -
function unescaped_str(txt) {
    symbol_escapes.forEach( pair => { txt = txt.replaceAll(pair.esc, pair.chr); })
    return txt;
}

function escaped_str(txt) {
    symbol_escapes.forEach( pair => { txt = txt.replaceAll(pair.chr, pair.esc); })
    return txt;
}


$(document).ready(function() {


    /** translate short-codes to code-blocks
     * -------------------------------------------------------------------------
     */ 
    var content = $('.main-content .article-body').html();       // get code with shorts
    $('.main-content .article-body').html( inject_codeblocks(content) ); // put code with blocks
    

    
    /** modal listeners
     * -------------------------------------------------------------------------
     */  
/* DEPRICATED: not needed
    // open store modal listener
    // --- -- -- - - -
    $(document).on('click', '.js-get_store', function (e) {
        e.preventDefault();
        var id = $(this).data('id');    // id for requesting content via ajax

        $('#dynamic-content').html('');
        $('#modal-loader').show();

        $.ajax({
            url: '/libs/modals/modalStore.php',
            type: 'POST',
            cache: false,
            data: 'id=' + id,
            dataType: 'html'
        })
        .done(function (data) {
            $('#dynamic-content').html('');
            $('#dynamic-content').html(data);
            $('#modal-loader').hide();
        })
        .fail(function () {
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Υπήρξε κάποιο πρόβλημα, παρακαλώ προσπαθήστε ξανά.');
            $('#modal-loader').hide();
        });
    });

    // open product modal listener
    // ---
    $(document).on('click', '.js-get_product', function (e) {
        e.preventDefault();
        var id = $(this).data('id');    // id for requesting content via ajax

        $('#dynamic-product').html('');
        $('#modal-loader').show();
        
        $.ajax({
            url: '/products/ajax/get_product_full',
            cache: false,
            type: 'POST',
            data: { id: id },
            dataType: 'html'
        })
        .done(function (data) {
            $('#dynamic-product').html('');
            $('#dynamic-product').html(data);
            $('#modal-loader').hide();

        })
        .fail(function () {
            $('#dynamic-product').html('<i class="glyphicon glyphicon-info-sign"></i> Υπήρξε κάποιο πρόβλημα, παρακαλώ προσπαθήστε ξανά.');
            $('#modal-loader').hide();

        });
    });
*/
});