added a lot of modified presets

presets/abcjs.txt

@@ -0,0 +1 @@
+{"key":"abcjs","name":"ABCJS","instructions":"Display musical notation. Place the text in abc notation between the Generico tags to render the music score.\nBased on abc.js from : https://abcjs.net ","requirecss":"","requirejs":"https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js","shim":"","defaults":"","amd":"1","body":"<div id=\"@@AUTOID@@_output\" />\n\n<div id=\"@@AUTOID@@_tunebookstring\" class=\"hide\">","bodyend":"</div>","script":"var music = $('#' + @@AUTOID@@ + '_tunebookstring').text();\nABCJS.renderAbc(@@AUTOID@@ + '_output',music);","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.0"}

presets/chartist.txt

@@ -0,0 +1 @@
+{"key":"chartist","name":"Chartist","instructions":"Select the type of chart that you want, and the other options below. In between the Generico tags put a regular html table using the Atto editor table icon. Each column is a set of data. The first row in a column is the data set title. When the page is displayed, in place of the table there will be a chart. (Dev. note. AMD broke on later versions of Chartist. So we remain on 0.97)","requirecss":"//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css","requirejs":"//cdn.jsdelivr.net/chartist.js/0.9.7/chartist.min.js","shim":"","defaults":"charttype=\"line|bar|pie|donut\",rowlabels=\"no|yes\", style=\"ct-fixed-widths|ct-golden-section|ct-square|ct-perfect-fourth\",width=400,height=250","amd":"1","body":"<div id='@@AUTOID@@_chart' class='ct-chart @@style@@ '></div>\n<div id='@@AUTOID@@_datatable' style='display: none'>\n@@charttype@@\n@@rowlabels@@\n@@width@@\n@@height@@","bodyend":"</div>","script":"//this uses a plain html table as the data source, header row + no row label + multirows\nvar da = [];\nvar collabels = [];\nvar rowlabels = [];\nvar options = {};\nif(@@style@@=='ct-fixed-widths'){\noptions.width = opts['width'];\noptions.height = opts['height'];\n}\n\n//extract an array of values from each row(tr) as a 2d array of values (da)\n$('#' + @@AUTOID@@ + '_datatable > table tr').each(function(i, the_tr){\n\tvar onerow =[];\n\tvar cells= $(the_tr).find('td');\n\tif(cells.length>0){\n\t\t cells.each(function(j,the_cell){onerow.push($(the_cell).text())});\n\t\t da.push(onerow);\n\t};\n});\n\n//extract an array of values from the head row(th) as col labels (collabels)\nvar headcells = $('#' + @@AUTOID@@ + '_datatable > table th');\nif(headcells.length>0){\n\t headcells.each(function(n,the_hcell){collabels.push($(the_hcell).text())});\n};\n\n\n//if rowlabels = true, we extract row labels from the first col of each row\n//and remove the first col of the head row. \nif(opts['rowlabels']=='yes'){\n\t //remove the first col into labels \n\t $().each(da,function(index,item){\n\t  rowlabels.push(item.shift())\n\t });\n\t //remove the first col of head, because its useless\n\t if(collabels.length>0){\n\t  collabels.shift();\n\t } \n}\n\nvar data = {\n  labels: collabels\n};\n\nswitch (@@charttype@@){\n case 'line':\n    data.series = da;\n   new Chartist.Line('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\ncase 'bar':\n   data.series = da;\n   new Chartist.Bar('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\ncase 'pie':\n   data.series = da.length>0 ? da[0] : [];\n   new Chartist.Pie('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\ncase 'donut':\n    data.series = da.length>0 ? da[0] : [];\n    options.donut = true;\n   new Chartist.Pie('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\n}","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.2"}

presets/codebox.txt

@@ -1 +1 @@
-{"key":"codebox","name":"codebox","version":"1.0.0","instructions":"This uses highlight js to display code snippets nicely. Put code in between  codebox generico tags. You might find putting code and generico tags inside <pre> tags works well. Codebox can optionally prevent them being copied from browser. Set the language variable to one of css html or js","requirecss":"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css","requirejs":"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js","defaults":"language=html|css|javascript,allow_copy=true|false","jquery":"0","amd":"1","body":"<code id=\"@@AUTOID@@\" class=\"@@language@@\">","bodyend":"</code>","script":"$('#' + @@AUTOID@@).each(function(i, block) {\n  hljs.highlightBlock(block);\n  $(block).bind('copy paste cut', function (e) {\n       if(@@allow_copy@@=='false'){\n           e.preventDefault(); //disable cut,copy,paste\n           return false;\n      }\n    });\n});","style":"code.css{\n background-color: aliceblue;\n}\ncode.html{\n background-color: antiquewhite;\n}\ncode.javascript{\n background-color: khaki;\n}","dataset":"","datasetvars":""}
+{"key":"codebox","name":"codebox","instructions":"This uses highlight js to display code snippets nicely. Put code in between  codebox generico tags. You might find putting code and generico tags inside <pre> tags works well. Codebox can optionally prevent them being copied from browser. Set the language variable to one of css, html, php or javascript.","requirecss":"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css","requirejs":"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js","shim":"","defaults":"language=html|css|php|javascript,allow_copy=true|false","amd":"1","body":"<code id=\"@@AUTOID@@\" class=\"@@language@@\">","bodyend":"</code>","script":"$('#' + @@AUTOID@@).each(function(i, block) {\n  hljs.highlightBlock(block);\n  $(block).bind('copy paste cut', function (e) {\n       if(@@allow_copy@@=='false'){\n           e.preventDefault(); //disable cut,copy,paste\n           return false;\n      }\n    });\n});","style":"code.css{\n background-color: aliceblue;\n}\ncode.html{\n background-color: antiquewhite;\n}\ncode.php{\n background-color: lavender;\n}\ncode.javascript{\n background-color: khaki;\n}","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/fontawesome.txt

@@ -1 +1 @@
-{"key":"fontawesome","name":"Font Awesome","instructions":"","version":"1.0.0","requirecss":"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css","requirejs":"","defaults":"icon=\"fa-cog\",orientation=\"fa-spin|fa-rotate-90|fa-rotate-180|fa-rotate-270\",size=\"fa-lg|fa-2x\",layout=\"pull-left|fa-border\"","jquery":"0","amd":"1","body":"<span class=\"fa @@icon@@ @@orientation@@ @@size@@ @@layout@@\"></span>","bodyend":"","script":"","style":"","dataset":"","datasetvars":""}
+{"key":"fontawesome","name":"Font Awesome","instructions":"Displays a font awesome icon. You will need to specify the icon. The default is 'cog.' Try \n'star', 'ambulance' or 'youtube'","requirecss":"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css","requirejs":"","shim":"","defaults":"icon=\"cog\",orientation=\"fa-rotate-0|fa-rotate-90|fa-rotate-180|fa-rotate-270|fa-spin\",size=\"fa-lg|fa-2x|fa-4x\",layout=\"pull-left|fa-border\"","amd":"1","body":"<span class=\"fa fa-@@icon@@ @@orientation@@ @@size@@ @@layout@@\"></span>","bodyend":"","script":"","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/infobox.txt

@@ -1 +1 @@
-{"key":"infobox","name":"Info Box","version":"1.0.0","instructions":"","requirecss":"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css","requirejs":"","defaults":"text=\"Your message goes here.\"","jquery":"0","amd":"1","body":"<div class=\"filter_generico_info\">\n    <i class=\"fa fa-info-circle\"></i>\n    @@text@@\n</div>","bodyend":"","script":"","style":".filter_generico_info {\n\tmargin: 10px 0px;\n    padding:12px;\n    color: #00529B;\n    background-color: #BDE5F8;\n    border: 1px solid;\n    border-radius:.5em;\n}\n.isa_info i {\n    margin:10px 22px;\n    font-size:2em;\n    vertical-align:middle;\n}","dataset":"","datasetvars":""}
+{"key":"infobox","name":"Info Box","instructions":"The info box displays a text message with a font awesome icon. It loads font-awesome from CDN  ","requirecss":"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css","requirejs":"","shim":"","defaults":"text=\"Your message goes here.\"","amd":"1","body":"<div class=\"filter_generico_info\">\n    <i class=\"fa fa-info-circle\"></i>\n    @@text@@\n</div>","bodyend":"","script":"","style":".filter_generico_info {\n\tmargin: 10px 0px;\n    padding:12px;\n    color: #00529B;\n    background-color: #BDE5F8;\n    border: 1px solid;\n    border-radius:.5em;\n    max-width: 800px;\n}\n.isa_info i {\n    margin:10px 22px;\n    font-size:2em;\n    vertical-align:middle;\n}","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/lightbox.txt

@@ -1 +1 @@
-{"name":"Lightbox","key":"lightbox","version":"1.0.0","instructions":"Specify link text, and place content between the Lightbox tags on the page. The content will be displayed when the link is clicked.","showatto":"1","showplayers":"0","requirecss":"/filter/poodll/3rdparty/featherlight-1.5.0/release/featherlight.min.css","requirejs":"/filter/poodll/3rdparty/featherlight-1.5.0/release/featherlight.min.js","shim":"featherlight","defaults":"text=click","amd":"1","body":"<a href=\"#\" data-featherlight=\"#@@AUTOID@@\" data-featherlight-persist=\"true\"><div class=\"ishine_lbox_text\">@@text@@</div></a><div style=\"display: none;\"><div  id=\"@@AUTOID@@\">","bodyend":"</div></div>","script":"","style":"","dataset":"","datasetvars":""}
+{"key":"lightbox","name":"Lightbox","instructions":"Specify link text, and place content between the Lightbox tags on the page. The content will be displayed when the link is clicked. This is based on the featherlight project","requirecss":"//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css","requirejs":"","shim":"","defaults":"text=click","amd":"1","body":"<a href=\"#\" data-featherlight=\"#@@AUTOID@@\" data-featherlight-persist=\"true\">@@text@@</a><div style=\"display: none;\"><div  id=\"@@AUTOID@@\">","bodyend":"</div></div>","script":"if(!$.fn.featherlight){ \n$.getScript('https://cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js', function(){});\n}return;","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/lightbox2.txt

@@ -0,0 +1 @@
+{"key":"lightbox2","name":"Lightbox2","instructions":"Add content to display in lightbox between the tags on the page. This is based on the Fancybox project","requirecss":"//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css","requirejs":"","shim":"","defaults":"linktext=\"Click to show\"","amd":"1","body":"<a id=\"@@AUTOID@@\" data-fancybox data-src=\"#@@AUTOID@@_content\" href=\"javascript:;\" >@@linktext@@</a>\n<div id=\"@@AUTOID@@_content\" class=\"hide\">\n","bodyend":"</div>\n","script":"if(!$.fn.fancybox){ \n$.getScript('https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', function(){});\n}return;\n","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/personal_tag.txt

@@ -0,0 +1 @@
+{"key":"personal_tag","name":"Personal Tag","instructions":"This displays a ribbon style alert message with the current user's name","requirecss":"","requirejs":"","shim":"","defaults":"Colour=\"#CF142B\",Text=\"This is important!\"","amd":"1","body":"<style>\n.bs {\n  padding: .4em;\n  background: @@Colour@@;\n  color: white;\n  font-family: helvetica;\n  border-radius: 3px 0 0 3px;\n  position: relative;\n}\n\n.bs:before,\n.bs:after {\n  content: \"\";\n  position: absolute;\n  right: -.75em;\n  top: 0;\n  width: 0;\n  height: 0;\n  /* the trangles are made of different border widths, not the box itslef */\n  border-style: solid;\n  border-width: 18px 11px 0 0;\n  border-color: @@Colour@@ transparent transparent transparent;\n}\n\n.bs:after {\n  top: auto;\n  /*reset the top placement */\n  bottom: 1px;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 18px 0 0 11px;\n  border-color: transparent transparent transparent @@Colour@@;\n}\n\n</style>\n\n<span class=\"bs\">@@USER:firstname@@, &nbsp;@@Text@@</span>&nbsp;&nbsp;&nbsp;\n","bodyend":"","script":"","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/piechart.txt

@@ -1 +1 @@
-{"key":"piechart","name":"Pie Chart","version":"1.0.0","instructions":"This will display a pie chart. Put the data labels and matching data into comma separated strings inside the labels and data fields.","requirecss":"","requirejs":"//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js","shim":"","defaults":"width=600,height=400,datalabel=mydata,labels=\"jan,feb,march\",data=\"1,2,3\"","amd":"1","body":"<canvas id=\"@@AUTOID@@\" width=\"@@width@@\" height=\"@@height@@\"></canvas>\n<div id=\"@@AUTOID@@_legend\" class=\"chart-legend\"></div>","bodyend":"","script":"var ctx = document.getElementById(\"@@AUTOID@@\").getContext(\"2d\");\nvar cjoptions = {\n\n\n   //Boolean - Whether we should show a stroke on each segment\n    segmentShowStroke : true,\n\n    //String - The colour of each segment stroke\n    segmentStrokeColor : \"#fff\",\n\n    //Number - The width of each segment stroke\n    segmentStrokeWidth : 2,\n\n    //Number - The percentage of the chart that we cut out of the middle\n    percentageInnerCutout : 50, // This is 0 for Pie charts\n\n    //Number - Amount of animation steps\n    animationSteps : 100,\n\n    //String - Animation easing effect\n    animationEasing : \"easeOutBounce\",\n\n    //Boolean - Whether we animate the rotation of the Doughnut\n    animateRotate : true,\n\n    //Boolean - Whether we animate scaling the Doughnut from the centre\n    animateScale : false,\n\n    //String - A legend template\n    legendTemplate : \"<ul class=\\\"<%=name.toLowerCase()%>-legend\\\"><% for (var i=0; i<segments.length; i++){%><li><span style=\\\"background-color:<%=segments[i].fillColor%>\\\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>\"\n\n};\nvar colors = [\"#F7464A\",\"#46BFBD\",\"#FDA25C\",\"#F7404A\",\"#464FBD\",\"#FD445C\",\"#FDB45C\",\"#F7464A\",\"#46BFBD\",\"#FDA25C\",\"#F7404A\",\"#464FBD\",\"#FD445C\",\"#FDB45C\"];\nvar highlights=[\"#FDB45C\",\"#5AD3D1\",\"#FF5870\",\"#FD445C\",\"#5A63D1\",\"#FF5870\",\"#FFC870\",\"#FDB45C\",\"#5AD3D1\",\"#FF5870\",\"#FD445C\",\"#5A63D1\",\"#FF5870\",\"#FFC870\"];\nvar labels= \"@@labels@@\".split(\",\");\nvar values= \"@@data@@\".split(\",\");\nvar cjdata=[];\nfor(var i=0;i<labels.length;i++){\n\tcjdata.push({label: labels[i],color: colors[i],highlight: highlights[i],value: parseInt(values[i])});\n\n}\nvar myPieChart = new Chart(ctx).Pie(cjdata, cjoptions);\ndocument.getElementById(@@AUTOID@@ + '_legend').innerHTML = myPieChart.generateLegend();","style":".chart-legend li span{\n    display: inline-block;\n    width: 12px;\n    height: 12px;\n    margin-right: 5px;\n}","dataset":"","datasetvars":""}
+{"key":"piechart","name":"Pie Chart","instructions":"This will display a pie chart. Put the data labels and matching data into comma separated strings inside the labels and data fields.","requirecss":"","requirejs":"//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js","shim":"","defaults":"width=600,height=400,datalabel=mydata,labels=\"jan,feb,march\",data=\"1,2,3\"","amd":"1","body":"<canvas id=\"@@AUTOID@@\" width=\"@@width@@\" height=\"@@height@@\"></canvas>\n<div id=\"@@AUTOID@@_legend\" class=\"chart-legend\"></div>","bodyend":"","script":"var ctx = document.getElementById(\"@@AUTOID@@\").getContext(\"2d\");\nvar cjoptions = {\n\n\n   //Boolean - Whether we should show a stroke on each segment\n    segmentShowStroke : true,\n\n    //String - The colour of each segment stroke\n    segmentStrokeColor : \"#fff\",\n\n    //Number - The width of each segment stroke\n    segmentStrokeWidth : 2,\n\n    //Number - The percentage of the chart that we cut out of the middle\n    percentageInnerCutout : 0, // This is 0 for Pie charts\n\n    //Number - Amount of animation steps\n    animationSteps : 100,\n\n    //String - Animation easing effect\n    animationEasing : \"easeOutBounce\",\n\n    //Boolean - Whether we animate the rotation of the Doughnut\n    animateRotate : true,\n\n    //Boolean - Whether we animate scaling the Doughnut from the centre\n    animateScale : false,\n\n    //String - A legend template\n    legendTemplate : \"<ul class=\\\"<%=name.toLowerCase()%>-legend\\\"><% for (var i=0; i<segments.length; i++){%><li><span style=\\\"background-color:<%=segments[i].fillColor%>\\\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>\"\n\n};\nvar colors = [\"#F7464A\",\"#46BFBD\",\"#FDA25C\",\"#F7404A\",\"#464FBD\",\"#FD445C\",\"#FDB45C\",\"#F7464A\",\"#46BFBD\",\"#FDA25C\",\"#F7404A\",\"#464FBD\",\"#FD445C\",\"#FDB45C\"];\nvar highlights=[\"#FDB45C\",\"#5AD3D1\",\"#FF5870\",\"#FD445C\",\"#5A63D1\",\"#FF5870\",\"#FFC870\",\"#FDB45C\",\"#5AD3D1\",\"#FF5870\",\"#FD445C\",\"#5A63D1\",\"#FF5870\",\"#FFC870\"];\nvar labels= \"@@labels@@\".split(\",\");\nvar values= \"@@data@@\".split(\",\");\nvar cjdata=[];\nfor(var i=0;i<labels.length;i++){\n\tcjdata.push({label: labels[i],color: colors[i],highlight: highlights[i],value: parseInt(values[i])});\n\n}\nvar myPieChart = new Chart(ctx).Pie(cjdata, cjoptions);\ndocument.getElementById(@@AUTOID@@ + '_legend').innerHTML = myPieChart.generateLegend();","style":".chart-legend li span{\n    display: inline-block;\n    width: 12px;\n    height: 12px;\n    margin-right: 5px;\n}","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}

presets/qrcode.txt

@@ -1 +1 @@
-{"key":"qrcode","name":"QR Code","version":"1.0.0","instructions":"","requirecss":"","requirejs":"//cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js","defaults":"data=http://mywebsite.com,size=100","jquery":"0","amd":"1","body":"<div id=\"@@AUTOID@@\"></div>","bodyend":"","script":"$(\"#\" + @@AUTOID@@).qrcode({\n    \"render\": \"div\",\n    \"size\": @@size@@,\n    \"height\": @@size@@,\n     \"width\": @@size@@,\n    \"color\": \"#3a3\",\n    \"text\": \"@@data@@\"\n});","style":"","dataset":"","datasetvars":""}
+{"key":"qrcode","name":"QR Code","instructions":"Enter a URL/text you wish to encode, and size. Generico will turn it into a nice \nQR code.","requirecss":"","requirejs":"//cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.3.1/qrcode.min.js","shim":"","defaults":"data=http://mywebsite.com,size=6","amd":"1","body":"<div id=\"@@AUTOID@@\"></div>","bodyend":"","script":"var typeNumber = 0; //the higher the number ... the more data 0 = auto\nvar errorCorrectionLevel = 'L'; //L M Q H\nvar qr = qrcode(typeNumber, errorCorrectionLevel);\nqr.addData(@@data@@);\nqr.make();\ndocument.getElementById(@@AUTOID@@).innerHTML = qr.createImgTag(@@size@@,8);","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.2"}

presets/tabitem.txt

@@ -1 +1 @@
-{"name":"Tab Item","key":"tabitem","version":"1.0.0","instructions":"","showatto":"1","showplayers":"0","requirecss":"","requirejs":"","defaults":"title=\"mybaby\"","amd":"1","body":"<div id=\"@@AUTOID@@\" class=\"filter_generico_tabitem\" title=\"@@title@@\">","bodyend":"</div>","script":"","style":"","dataset":"","datasetvars":""}
+{"key":"tabitem","name":"Tab Item","instructions":"Nest Generico tabitems in between Generico tabs, to produce a tabset. You can not put bullet points inside tabs.","requirecss":"","requirejs":"","shim":"","defaults":"title=\"my tab\"","amd":"1","body":"<div id=\"@@AUTOID@@\" class=\"filter_generico_tabitem\" title=\"@@title@@\">","bodyend":"</div>","script":"","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}