added new presets, and optimised preset loading

CHANGES.txt

@@ -1,5 +1,9 @@
 Change List
 =========
+Version 1.4.11(Build 2021010400)
+- optimized preset loading
+- Fixed cloudpoodlltoken to be callable from template JS
+- Added super interactive transcript widgets
 
 Version 1.4.10(Build 2019071300)
 -Fixed cloud poodll token fetch [again]

classes/presets_control.php

@@ -44,10 +44,13 @@ class presets_control extends \admin_setting {
      * @param string $heading heading
      * @param string $information text in box
      */
-    public function __construct($name, $visiblename, $information, $templateindex) {
+    public function __construct($name, $visiblename, $information, $templateindex, $presetdata=false) {
         $this->nosave = true;
         $this->templateindex = $templateindex;
-        $this->presetdata = $this->fetch_presets();
+        if(!$presetdata){
+            $presetdata=$this->fetch_presets();
+        }
+        $this->presetdata = $presetdata;
         $this->visiblename = $visiblename;
         $this->information = $information;
         parent::__construct($name, $visiblename, $information, $templateindex);

filter.php

@@ -193,8 +193,12 @@ function filter_generico_callback(array $link) {
         $token = \filter_generico\generico_utils::fetch_token($conf['cpapiuser'], $conf['cpapisecret']);
         if ($token) {
             $genericotemplate = str_replace('@@CLOUDPOODLLTOKEN@@', $token, $genericotemplate);
+            //stash this for passing to js
+            $filterprops['CLOUDPOODLLTOKEN'] = $token;
         } else {
             $genericotemplate = str_replace('@@CLOUDPOODLLTOKEN@@', 'INVALID TOKEN', $genericotemplate);
+            //stash this for passing to js
+            $filterprops['CLOUDPOODLLTOKEN'] = 'INVALID TOKEN';
         }
     }
 

presets/dictationcloud.txt

@@ -0,0 +1 @@
+{"name":"Dictation (Cloud)","key":"dictationcloud","version":"1.0.0","instructions":"Add an html list (bullets) of statements/words to be read, between the dictation tags. Users must listen to the audio and type what they hear. (Uses Cloud Poodll)  ","showatto":"1","showplayers":"0","requirecss":"","requirejs":"","shim":"","defaults":"language=\"English(US)|English(GB)|English(AU)|English(In)|English(Welsh)|Danish|Dutch|French(FR)|French(CA)|German|Icelandic|Italian|Japanese|Korean|Norwegian|Polish|Portugese(BR)|Portugese(PT)|Romanian|Russian|Spanish(ES)|Spanish(US)|Swedish|Turkish|Welsh\",\nspeaker=\"Male|Female\"","amd":"1","body":"<div id=\"@@AUTOID@@_container\" class=\"container\"></div>\n<audio id=\"@@AUTOID@@_player\"></audio>\n<!-- @@CLOUDPOODLLTOKEN@@ -->\n<div id=\"@@AUTOID@@\" class=\"poodll-dictation hide\">\n","bodyend":"</div>","script":"//FUNCTION fetch polly url\n var fetch_polly_url = function(speaktext, voice, callback) {\n\n                //The REST API we are calling\n                var functionname = 'local_cpapi_fetch_polly_url';\n\n                //fetch the Posturl. We need this.\n                //set up our ajax request\n                var xhr = new XMLHttpRequest();\n                var that = this;\n\n                //set up our handler for the response\n                xhr.onreadystatechange = function (e) {\n                    if (this.readyState === 4) {\n                        if (xhr.status == 200) {\n\n                            //get a yes or forgetit or tryagain\n                            var payload = xhr.responseText;\n                            var payloadobject = JSON.parse(payload);\n                            if (payloadobject) {\n                                //returnCode > 0  indicates an error\n                                if (payloadobject.returnCode > 0) {\n                                    console.log(payloadobject.returnMessage);\n                                    return false;\n                                    //if all good, then lets do the embed\n                                } else if (payloadobject.returnCode === 0){\n                                    var pollyurl = payloadobject.returnMessage;\n                                    callback(pollyurl);\n                                } else {\n                                    console.log('Polly Signed URL Request failed:');\n                                    console.log(payloadobject);\n                                }\n                            } else {\n                                console.log('Polly Signed URL Request something bad happened');\n                            }\n                        } else {\n                            console.log('Polly Signed URL Request Not 200 response:' + xhr.status);\n                        }\n                    }\n                };\n\n                //make our request\n                var xhrparams = \"wstoken=\" + @@CLOUDPOODLLTOKEN@@\n                + \"&wsfunction=\" + functionname\n                + \"&moodlewsrestformat=\" + 'json'\n                + \"&text=\" + encodeURIComponent(speaktext)\n                + '&texttype=text'\n                + '&voice=' + voice\n                + '&appid=' + 'filter_poodll'\n                + '&owner=poodll'\n                + '&region=useast1';\n\n                var serverurl = 'https://cloud.poodll.com' + \"/webservice/rest/server.php\";\n                xhr.open(\"POST\", serverurl, true);\n                xhr.setRequestHeader(\"Cache-Control\", \"no-cache\");\n                xhr.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");\n                xhr.send(xhrparams);\n        };\n\n//remove any HTML editor artifacts\n$('#' + @@AUTOID@@ + ' p').remove();\n$('#' + @@AUTOID@@ + ' span').remove();\n\n//fetch the controls we inserted in \"body\"\nvar theplayer = $('#' + @@AUTOID@@ + '_player');\nvar theulcontainer = $('#' + @@AUTOID@@); \nvar theitemscontainer = $('#' + @@AUTOID@@ + '_container'); \n\ntheitemscontainer.on('click','.dictationtrigger', function(e){\n   theplayer.attr('src',$(this).attr('data-src'));\n   theplayer[0].play();\n});\n\n\n//determine voice\nvar mf=@@speaker@@\nswitch(@@language@@){\ncase \"English(US)\": voice = mf=='Male'?'Joey':'Kendra';break;\ncase \"English(GB)\": voice = mf=='Male'?'Brian':'Amy';break;\ncase \"English(AU)\": voice = mf=='Male'?'Russell':'Nicole';break;\ncase \"English(IN)\": voice = mf=='Male'?'Aditi':'Raveena';break;\ncase \"English(WELSH)\": voice = mf=='Male'? 'Geraint':'Geraint';break;\ncase \"Danish\": voice = mf=='Male'?'Mads':'Naja';break;\ncase \"Dutch\": voice = mf=='Male'?'Ruben':'Lotte';break;\ncase \"French(FR)\": voice = mf=='Male'?'Mathieu':'Celine';break;\ncase \"French(CA)\": voice = mf=='Male'?'Chantal':'Chantal';break;\ncase \"German\": voice = mf=='Male'?'Hans':'Marlene';break;\ncase \"Icelandic\": voice = mf=='Male'?'Karl':'Dora';break;\ncase \"Italian\": voice = mf=='Male'?'Carla':'Giorgio';break;\ncase \"Japanese\": voice = mf=='Male'?'Takumi':'Mizuki';break;\ncase \"Korean\": voice = mf=='Male'?'Seoyan':'Seoyan';break;\ncase \"Norwegian\": voice = mf=='Male'?'Liv':'Liv';break;\ncase \"Polish\": voice = mf=='Male'?'Jacek':'Ewa';break;\ncase \"Portugese(BR)\": voice = mf=='Male'?'Ricardo':'Vitoria';break;\ncase \"Portugese(PT)\": voice = mf=='Male'?'Cristiano':'Ines';break;\ncase \"Romanian\": voice = mf=='Male'?'Carmen':'Carmen';break;\ncase \"Russian\": voice = mf=='Male'?'Maxim':'Tatyana';break;\ncase \"Spanish(ES)\": voice = mf=='Male'?'Enrique':'Conchita';break;\ncase \"Spanish(US)\": voice = mf=='Male'?'Miguel':'Penelope';break;\ncase \"Swedish\": voice = mf=='Male'?'Astrid':'Astrid';break;\ncase \"Turkish\": voice = mf=='Male'?'Filiz':'Filiz';break;\ncase \"Welsh\": voice = mf=='Male'?'Gwyneth':'Gwyneth';break;\ndefault: voice = mf=='Male'?'Brian':'Amy';\n}\n\n\n\n//build template for one dictation item\nvar template ='<div class=\"row dictationrow\">';\ntemplate += '<div id=\"dictationplayer_@ID@\" class=\"col-md-1 poodlldictationplayer\">';\ntemplate += '<a class=\"dictationtrigger\" data-src=\"@AUDIO@\"><i class=\"fa fa-play\"></i></a></div>';\ntemplate += '<div id=\"dictationinput_@ID@\" class=\"col-md-10 poodlldictationinput\"><input type=\"text\"></input></div>';\ntemplate +=  '<div class=\"col-md-1\" ><div  id=\"dictationstatus_@ID@\" class=\"poodlldictationstatus\"><i class=\"fa fa-check\"></i></div></div>';\ntemplate +='</div>';\n\nvar container = \n\n$('#' + @@AUTOID@@ + \" li\" ).each(function(index) {\n    var usetext = $(this).text();\n    fetch_polly_url(usetext,voice,\n    function(bulletindex){return function(pollyurl){\n\n        //create the item and get the TTS audio\n        var usetemplate = template.replace('@AUDIO@',pollyurl); \n        usetemplate = usetemplate.replace(/@ID@/g, bulletindex);\n        theitemscontainer.append(usetemplate);\n\n       //add events\n       var theinput=  $('#dictationinput_' + bulletindex + ' input');\n       var thestatus=  $('#dictationstatus_' + bulletindex);\n       var theaudio=  $('#dictationplayer_' + bulletindex + ' audio');\n       theinput.on('keyup',function(){\n        if($(this).val()==usetext){\n            thestatus.addClass('dictationcorrect');\n        }else{\n            thestatus.removeClass('dictationcorrect');\n        }\n   });//end of change event\n    //we use function inside function so that: index = bullet index.  (index value changing before callback called)\n      }}(index)\n   );\n\n  });//end of each loop","style":"div.poodlldictationstatus {\n    padding: 3px;\n    border: black 1px solid;\n    border-width: 2px;\n    border-radius: 10px;\n    width: 30px;\n    text-align: center;\n}\ndiv.dictationcorrect{\n color: white;\nbackground-color: green;\n}\ndiv.row.dictationrow{\n max-width: 600px;\n min-height: 50px;\ndisplay: flex;\n}\ndiv.dictationrow input {\n    width: 100%;\n}","dataset":"","datasetvars":"","alternate":"","alternateend":""}

presets/flipclock.txt

@@ -0,0 +1 @@
+{"name":"flipclock","key":"flipclock","version":"1.0.0","instructions":"Shows a countdown clock","showatto":"1","showplayers":"0","requirecss":"https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css","requirejs":"https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js","shim":"FlipClock","defaults":"seconds=120","amd":"1","body":"<div id=\"@@AUTOID@@\"></div>","bodyend":"","script":"var clock = new FlipClock($('#' + @@AUTOID@@),@@seconds@@, {\nclockFace: 'MinuteCounter',\ncountdown: true\n});","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":""}

presets/glossaryttsreadercloud.txt

@@ -0,0 +1 @@
+{"name":"Glossary TTS Reader (Cloud)","key":"glossaryttsreadercloud","version":"1.0.1","instructions":"This is a small html5 audio player that will read aloud the enclosed text block. It works anywhere but mainly in the glossary popup (Uses Cloud Poodll)  ","showatto":"1","showplayers":"0","requirecss":"","requirejs":"","shim":"","defaults":"play=\"fa-volume-up\",background=\"red\",color=\"#fff\",width=\"40\",height=\"40\",defaultvoice=\"Kendra|Justin|Amy|Emma|Russell\"","amd":"1","body":"<button type='button' id='@@AUTOID@@' data-currentsentence=\"0\" class=\"roundmini-audio-player\" style=\"width: @@width@@px; height: @@height@@px; background-color: @@background@@; \tborder-radius: 50%;\" \nonclick=\"\n //FUNCTION fetch polly url\n var fetch_polly_url = function(speaktext, voice, callback) {\n\n                //The REST API we are calling\n                var functionname = 'local_cpapi_fetch_polly_url';\n\n                //fetch the Posturl. We need this.\n                //set up our ajax request\n                var xhr = new XMLHttpRequest();\n                var that = this;\n\n                //set up our handler for the response\n                xhr.onreadystatechange = function (e) {\n                    if (this.readyState === 4) {\n                        if (xhr.status == 200) {\n\n                            //get a yes or forgetit or tryagain\n                            var payload = xhr.responseText;\n                            var payloadobject = JSON.parse(payload);\n                            if (payloadobject) {\n                                //returnCode > 0  indicates an error\n                                if (payloadobject.returnCode > 0) {\n                                    console.log(payloadobject.returnMessage);\n                                    return false;\n                                    //if all good, then lets do the embed\n                                } else if (payloadobject.returnCode === 0){\n                                    var pollyurl = payloadobject.returnMessage;\n                                    callback(pollyurl);\n                                } else {\n                                    console.log('Polly Signed URL Request failed:');\n                                    console.log(payloadobject);\n                                }\n                            } else {\n                                console.log('Polly Signed URL Request something bad happened');\n                            }\n                        } else {\n                            console.log('Polly Signed URL Request Not 200 response:' + xhr.status);\n                        }\n                    }\n                };\n\n                //make our request\n                var xhrparams = 'wstoken=' + '@@CLOUDPOODLLTOKEN@@'\n                + '&wsfunction=' + functionname\n                + '&moodlewsrestformat=' + 'json'\n                + '&text=' + encodeURIComponent(speaktext)\n                + '&texttype=text'\n                + '&voice=' + voice\n                + '&appid=' + 'filter_poodll'\n                + '&owner=poodll'\n                + '&region=useast1';\n\n                var serverurl = 'https://cloud.poodll.com' + '/webservice/rest/server.php';\n                xhr.open('POST', serverurl, true);\n                xhr.setRequestHeader('Cache-Control', 'no-cache');\n                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');\n                xhr.send(xhrparams);\n        };\n\n//fetch DOM elements that we care about\nvar thebutton =document.getElementById('@@AUTOID@@');\n  var theaudio =document.getElementById('@@AUTOID@@_player');\n  var theinnerdiv =document.getElementById('@@AUTOID@@_innerdiv');\n\n  //if we are playing, then stop\n  if(!theaudio.paused){\n   theaudio.pause();\n   theaudio.currentTime = 0;\n   return;\n}\n       \n//if we have the Polly URL, we do no need to get it again\nif(theaudio.getAttribute('src') == undefined){\n      fetch_polly_url(theinnerdiv.textContent,'@@defaultvoice@@',function(pollyurl){\n           theaudio.setAttribute('src',pollyurl);\n           theaudio.play();  \n       });     \n}else{\n    theaudio.play();    \n}\n\n\n\n\">\n\t<audio id='@@AUTOID@@_player' class=\"roundminiaudio nomediaplugin\">\n\t</audio>\n\t<i class=\"fa fa-volume-up\" aria-hidden=\"true\" style=\"color:@@color@@\"></i>\n</button>\n\n<!-- @@CLOUDPOODLLTOKEN@@ -->\n\n<div id='@@AUTOID@@_textblock' >\n<div id='@@AUTOID@@_innerdiv' class='tbr_innerdiv'>","bodyend":"</div>\n</div>","script":"","style":"button.roundmini-audio-player{\n\tborder: none;\n\tcolor: #fff;\n}\nbutton.roundmini-audio-player .fa{\n     font-size: 28px;\n}\n.activesentence {\n    background: #c5efcf;\n   /* font-weight: bold; */\n}","dataset":"","datasetvars":"","alternate":"","alternateend":""}

presets/icontoggle.txt

@@ -0,0 +1 @@
+{"name":"Toggle with icon","key":"icontoggle","version":"1.0.2","instructions":"Enter content to toggle in between the tags in the page\n","showatto":"1","showplayers":"0","requirecss":"","requirejs":"","shim":"","defaults":"closedtext=\"Show\",opentext=\"Hide\"","amd":"1","body":"<div id=\"@@AUTOID@@\"><span class=\"fa fa-2x fa-toggle-off togglebutton\"  aria-hidden=\"true\"></span><span class=\"toggletext\" style=\"padding: 5px;\">@@closedtext@@</span></div>\n\t<div id=\"@@AUTOID@@_target\" class=\"@@AUTOID@@_target\" style=\"display: none;\">","bodyend":"</div>","script":"var state=0;\n$(\"#\"  + @@AUTOID@@).click(function(e){\n$(\"#\" + @@AUTOID@@ + \"_target\").toggle(\n{duration: 300, complete: doToggleState}\n); \nreturn false;\n});\n\nvar doToggleState=function(){\nvar tb = $(\"#\"  + @@AUTOID@@ + ' .togglebutton');\nif(state==0){\ntb.removeClass('fa-toggle-off');\ntb.addClass('fa-toggle-on');\n $(\"#\"  + @@AUTOID@@ + ' .toggletext').text(@@opentext@@);\nstate=1;\n}else{\ntb.removeClass('fa-toggle-on');\ntb.addClass('fa-toggle-off');\n $(\"#\"  + @@AUTOID@@ + ' .toggletext').text(@@closedtext@@);\nstate=0;\n}\n};","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":""}

presets/icontoggleright.txt

@@ -0,0 +1 @@
+{"name":"Toggle with icon (horizontal)","key":"icontoggleright","version":"1.0.2","instructions":"Enter content to toggle in between the tags in the page. It will display to the right of the toggle buttons\n","showatto":"1","showplayers":"0","requirecss":"","requirejs":"","shim":"","defaults":"closedtext=\"Show\",opentext=\"Hide\"","amd":"1","body":"<div class=\"container\">\n  <div class=\"row justify-content-md-center\">\n    <div class=\"col col-lg-2\">\n      <div id=\"@@AUTOID@@\"><span class=\"fa fa-2x fa-toggle-off togglebutton\"  aria-hidden=\"true\"></span><br><span class=\"toggletext\" style=\"padding: 5px;\">@@closedtext@@</span></div>\n    </div>\n    <div class=\"col-md-auto\">\n \t<div id=\"@@AUTOID@@_target\" class=\"@@AUTOID@@_target\" style=\"display: none;\">\n\n\n","bodyend":"    </div>\n  </div>\n</div>\n</div>","script":"var state=0;\n$(\"#\"  + @@AUTOID@@).click(function(e){\n$(\"#\" + @@AUTOID@@ + \"_target\").toggle(\n{duration: 300, complete: doToggleState}\n); \nreturn false;\n});\n\nvar doToggleState=function(){\nvar tb = $(\"#\"  + @@AUTOID@@ + ' .togglebutton');\nif(state==0){\ntb.removeClass('fa-toggle-off');\ntb.addClass('fa-toggle-on');\n $(\"#\"  + @@AUTOID@@ + ' .toggletext').text(@@opentext@@);\nstate=1;\n}else{\ntb.removeClass('fa-toggle-on');\ntb.addClass('fa-toggle-off');\n $(\"#\"  + @@AUTOID@@ + ' .toggletext').text(@@closedtext@@);\nstate=0;\n}\n};","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":""}