diff options
Diffstat (limited to 'public/assets/js/lesson-features.js')
| -rw-r--r-- | public/assets/js/lesson-features.js | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/public/assets/js/lesson-features.js b/public/assets/js/lesson-features.js new file mode 100644 index 0000000..189b301 --- /dev/null +++ b/public/assets/js/lesson-features.js @@ -0,0 +1,218 @@ +const valid_codeblocks = [ // supported sort-code keys + 'youtube', + 'spotify', + 'spotify-track', + 'world-data', + 'vimeo', + 'dailymotion' +]; + + +const symbol_escapes = [ + { esc: '>', chr: '>' }, + { esc: '<', chr: '<' }, + { esc: '&', chr: '&' }, + { esc: '"', chr: '\"' }, + { esc: ''', chr: '\'' }, + { esc: '€', chr: '€' }, + { esc: '©', chr: '©' }, + { esc: '®', 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(); + + }); + }); +*/ +}); |