Name
Dimension
' + config.showsecret + '
');
281 | });
282 |
283 | el.find('.lang-video').each(function() {
284 | var t = this;
285 | if (t.$mdloaded)
286 | return;
287 | t.$mdloaded = 1;
288 | var el = $(t);
289 | var html = el.html();
290 | if (html.indexOf('youtube') !== -1)
291 | el.parent().replaceWith('');
292 | else if (html.indexOf('vimeo') !== -1)
293 | el.parent().replaceWith('');
294 | });
295 |
296 | el.find('.lang-barchart').each(function() {
297 |
298 | var t = this;
299 | if (t.$mdloaded)
300 | return;
301 |
302 | t.$mdloaded = 1;
303 | var el = $(t);
304 | var arr = el.html().split('\n').trim();
305 | var series = [];
306 | var categories = [];
307 | var y = '';
308 |
309 | for (var i = 0; i < arr.length; i++) {
310 | var line = arr[i].split('|').trim();
311 | for (var j = 1; j < line.length; j++) {
312 | if (i === 0)
313 | series.push({ name: line[j], data: [] });
314 | else
315 | series[j - 1].data.push(+line[j]);
316 | }
317 | if (i)
318 | categories.push(line[0]);
319 | else
320 | y = line[0];
321 | }
322 |
323 | var options = {
324 | chart: {
325 | height: 300,
326 | type: 'bar',
327 | },
328 | yaxis: { title: { text: y }},
329 | series: series,
330 | xaxis: { categories: categories, },
331 | fill: { opacity: 1 },
332 | };
333 |
334 | var chart = new ApexCharts($(this).parent().empty()[0], options);
335 | chart.render();
336 | });
337 |
338 | el.find('.lang-linerchart').each(function() {
339 |
340 | var t = this;
341 | if (t.$mdloaded)
342 | return;
343 | t.$mdloaded = 1;
344 |
345 | var el = $(t);
346 | var arr = el.html().split('\n').trim();
347 | var series = [];
348 | var categories = [];
349 | var y = '';
350 |
351 | for (var i = 0; i < arr.length; i++) {
352 | var line = arr[i].split('|').trim();
353 | for (var j = 1; j < line.length; j++) {
354 | if (i === 0)
355 | series.push({ name: line[j], data: [] });
356 | else
357 | series[j - 1].data.push(+line[j]);
358 | }
359 | if (i)
360 | categories.push(line[0]);
361 | else
362 | y = line[0];
363 | }
364 |
365 | var options = {
366 | chart: {
367 | height: 300,
368 | type: 'line',
369 | },
370 | yaxis: { title: { text: y }},
371 | series: series,
372 | xaxis: { categories: categories, },
373 | fill: { opacity: 1 },
374 | };
375 |
376 | var chart = new ApexCharts($(this).parent().empty()[0], options);
377 | chart.render();
378 | });
379 |
380 | el.find('.lang-iframe').each(function() {
381 |
382 | var t = this;
383 | if (t.$mdloaded)
384 | return;
385 | t.$mdloaded = 1;
386 |
387 | var el = $(t);
388 | el.parent().replaceWith('' + el.html().trim().markdown() +'
' + el.html().replace(/</g, '<').replace(/>/g, '>') + '
');
389 | });
390 |
391 | el.find('pre code').each(function(i, block) {
392 | var t = this;
393 | if (t.$mdloaded)
394 | return;
395 | t.$mdloaded = 1;
396 | hljs.highlightBlock(block);
397 | });
398 |
399 | el.find('a').each(function() {
400 | var t = this;
401 | if (t.$mdloaded)
402 | return;
403 | t.$mdloaded = 1;
404 | var el = $(t);
405 | var href = el.attr('href');
406 | var c = href.substring(0, 1);
407 |
408 | if (c !== '/' && c !== '#')
409 | el.attr('target', '_blank');
410 |
411 | if (href === '#') {
412 | var beg = '';
413 | var end = '';
414 | var text = el.html();
415 | if (text.substring(0, 1) === '<')
416 | beg = '-';
417 | if (text.substring(text.length - 1) === '>')
418 | end = '-';
419 | el.attr('href', '#' + (beg + markdown_id(el.text()) + end));
420 | }
421 | });
422 |
423 | el.find('.markdown-code').rclass('hidden');
424 |
425 | if (config.headlines) {
426 | var arr = [];
427 | el.find('h1,h2,h3,h4').each(function() {
428 | var el = $(this);
429 | arr.push({ name: el.text(), id: el.attr('id'), tag: this.tagName.toLowerCase(), offset: el.offset().top });
430 | });
431 | SEEX(config.headlines, arr);
432 | }
433 |
434 | };
435 |
436 | self.setter = function(value) {
437 |
438 | if (config.html) {
439 | self.redraw(self.element);
440 | return;
441 | }
442 |
443 | // Waits for markdown component
444 | if (!String.prototype.markdown) {
445 | setTimeout(self.setter, 500, value);
446 | return;
447 | }
448 |
449 | var cache = {};
450 | var html = (value || '').markdown();
451 | var vdom = $(html);
452 |
453 | elcache.empty();
454 |
455 | elbody.find('.code').each(function() {
456 | var t = this;
457 | cache[t.getAttribute('data-checksum')] = t;
458 | elcache[0].appendChild(t);
459 | });
460 |
461 | elbody.find('img').each(function() {
462 | var t = this;
463 | cache[t.getAttribute('data-checksum')] = t;
464 | elcache[0].appendChild(t);
465 | });
466 |
467 | vdom.find('.code').each(function() {
468 | var t = this;
469 | var h = 'code' + HASH(t.outerHTML, true) + '';
470 | if (cache[h])
471 | $(t).replaceWith(cache[h]);
472 | else
473 | t.setAttribute('data-checksum', h);
474 | }).rclass('hidden');
475 |
476 | vdom.find('img').each(function() {
477 | var t = this;
478 | var h = 'img' + HASH(t.outerHTML, true) + '';
479 | if (cache[h])
480 | $(t).replaceWith(cache[h]);
481 | else
482 | t.setAttribute('data-checksum', h);
483 | });
484 |
485 | elbody.html(vdom);
486 | self.redraw(elbody);
487 | config.render && EXEC(self.makepath(config.render), elbody);
488 | };
489 |
490 | self.readingtime = function() {
491 | var arr = self.find('h1,h2,h3,h4,h5,p,li');
492 | var sum = 0;
493 | for (var i = 0; i < arr.length; i++) {
494 | var text = $(arr[i]).text();
495 | var words = text.split(' ');
496 | for (var j = 0; j < words.length; j++) {
497 | var word = words[j];
498 | sum += (word.length * 0.650) / 10; // Reading time for 10 characters word is 450 ms
499 | }
500 | }
501 | return (sum / 60) >> 0;
502 | };
503 |
504 | }, ['https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.5/apexcharts.min.js']);
505 |
506 | COMPONENT('markdown', 'highlight:true;charts:false', function (self, config) {
507 |
508 | self.readonly();
509 | self.singleton();
510 | self.blind();
511 | self.nocompile();
512 |
513 | self.make = function() {
514 |
515 | if (config.highlight) {
516 | IMPORT('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/highlight.min.js');
517 | IMPORT('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/github.min.css');
518 | }
519 |
520 | if (config.charts)
521 | IMPORT('https://cdn.componentator.com/apexcharts.min@310.js');
522 |
523 | // Remove from DOM because Markdown is used as a String prototype and Tangular helper
524 | setTimeout(function() {
525 | self.remove();
526 | }, 500);
527 |
528 | $(document).on('click', '.markdown-showsecret,.markdown-showblock', function() {
529 | var el = $(this);
530 | var next = el.next();
531 | next.tclass('hidden');
532 | var is = next.hclass('hidden');
533 | var icons = el.find('i');
534 | if (el.hclass('markdown-showsecret')) {
535 | icons.eq(0).tclass('ti-unlock', !is).tclass('ti-lock', is);
536 | icons.eq(1).tclass('ti-angle-up', !is).tclass('ti-angle-down', is);
537 | } else {
538 | icons.eq(0).tclass('ti-minus', !is).tclass('ti-plus', is);
539 | el.tclass('markdown-showblock-visible', !is);
540 | }
541 | el.find('b').html(el.attrd(is ? 'show' : 'hide'));
542 | });
543 | };
544 |
545 | (function Markdown() {
546 |
547 | var keywords = /\{.*?\}\(.*?\)/g;
548 | var linksexternal = /(https|http):\/\//;
549 | var format = /__.*?__|_.*?_|\*\*.*?\*\*|\*.*?\*|~~.*?~~|~.*?~/g;
550 | var ordered = /^[a-z|0-9]{1,3}\.\s|^-\s/i;
551 | var orderedsize = /^(\s|\t)+/;
552 | var code = /`.*?`/g;
553 | var encodetags = /<|>/g;
554 | var regdash = /-{2,}/g;
555 | var regicons = /(^|[^\w]):((fab|far|fas|fal|fad|fa|ti)\s(fa|ti)-)?[a-z-]+:([^\w]|$)/g;
556 | var regemptychar = /\s|\W/;
557 | var regtags = /<[^>]*>/g;
558 |
559 | var encode = function(val) {
560 | return '&' + (val === '<' ? 'lt' : 'gt') + ';';
561 | };
562 |
563 | function markdown_code(value) {
564 | return value ? ('' + value.substring(1, value.length - 1) + '') : '';
565 | }
566 |
567 | function markdown_imagelinks(value) {
568 |
569 | if (!value)
570 | return '';
571 |
572 | var end = value.lastIndexOf(')') + 1;
573 | var img = value.substring(0, end);
574 | var url = value.substring(end + 2, value.length - 1);
575 | var label = markdown_links(img);
576 | var footnote = label.substring(0, 13);
577 |
578 | if (footnote === '' + label + '';
582 | }
583 |
584 | function markdown_table(value, align, ishead) {
585 |
586 | var columns = value.substring(1, value.length - 1).split('|');
587 | var builder = '';
588 |
589 | for (var i = 0; i < columns.length; i++) {
590 | var column = columns[i].trim();
591 | if (column.charAt(0) != '-') {
592 | var a = align[i];
593 | builder += '<' + (ishead ? 'th' : 'td') + (a && a !== 'left' ? (' class="' + a + '"') : '') + '>' + column + '';
594 | }
595 | }
596 |
597 | return '- ' : li.type === 'o1' ? '
- ' : '
- ';
781 | var end = li.type === 'ul' ? '
{0}
');
841 | }
842 | }
843 | }
844 |
845 | if (!opt.novideo) {
846 | arr = el.find('.lang-video');
847 | for (var t of arr) {
848 | if (!t.$mdloaded) {
849 | t.$mdloaded = 1;
850 | tmp = $(t);
851 | var html = tmp.html();
852 | if (html.indexOf('youtube') !== -1)
853 | tmp.parent().replaceWith('');
854 | else if (html.indexOf('vimeo') !== -1)
855 | tmp.parent().replaceWith('');
856 | }
857 | }
858 | }
859 |
860 | if (!opt.nochart && W.ApexCharts) {
861 | arr = el.find('.lang-barchart');
862 | for (var t of arr) {
863 | if (!t.$mdloaded) {
864 | t.$mdloaded = 1;
865 | tmp = $(t);
866 | var arr = tmp.html().split('\n').trim();
867 | var series = [];
868 | var categories = [];
869 | var y = '';
870 |
871 | for (var i = 0; i < arr.length; i++) {
872 | var line = arr[i].split('|').trim();
873 | for (var j = 1; j < line.length; j++) {
874 | if (i === 0)
875 | series.push({ name: line[j], data: [] });
876 | else
877 | series[j - 1].data.push(+line[j]);
878 | }
879 | if (i)
880 | categories.push(line[0]);
881 | else
882 | y = line[0];
883 | }
884 |
885 | var options = {
886 | chart: {
887 | height: 300,
888 | type: 'bar',
889 | },
890 | yaxis: { title: { text: y }},
891 | series: series,
892 | xaxis: { categories: categories, },
893 | fill: { opacity: 1 },
894 | };
895 |
896 | var chart = new W.ApexCharts(tmp.parent().empty()[0], options);
897 | chart.render();
898 | }
899 | }
900 |
901 | arr = el.find('.lang-linechart');
902 | for (var t of arr) {
903 | if (!t.$mdloaded) {
904 |
905 | t.$mdloaded = 1;
906 |
907 | if (!W.ApexCharts)
908 | return;
909 |
910 | tmp = $(t);
911 | var arr = tmp.html().split('\n').trim();
912 | var series = [];
913 | var categories = [];
914 | var y = '';
915 |
916 | for (var i = 0; i < arr.length; i++) {
917 | var line = arr[i].split('|').trim();
918 | for (var j = 1; j < line.length; j++) {
919 | if (i === 0)
920 | series.push({ name: line[j], data: [] });
921 | else
922 | series[j - 1].data.push(+line[j]);
923 | }
924 | if (i)
925 | categories.push(line[0]);
926 | else
927 | y = line[0];
928 | }
929 |
930 | var options = {
931 | chart: {
932 | height: 300,
933 | type: 'line',
934 | },
935 | yaxis: { title: { text: y }},
936 | series: series,
937 | xaxis: { categories: categories, },
938 | fill: { opacity: 1 },
939 | };
940 |
941 | var chart = new W.ApexCharts(el.parent().empty()[0], options);
942 | chart.render();
943 | }
944 | }
945 | }
946 |
947 | if (!opt.noiframe) {
948 | arr = el.find('.lang-iframe');
949 | for (var t of arr) {
950 | if (!t.$mdloaded) {
951 | t.$mdloaded = 1;
952 | tmp = $(t);
953 | tmp.parent().replaceWith(''.format(opt.showsecret || 'Show secret data', opt.hidesecret || 'Hide secret data') + tmp.html().trim().markdown(opt.secretoptions, true) +'
' + tmp.html().replace(/</g, '<').replace(/>/g, '>') + '
');
954 | }
955 | }
956 | }
957 |
958 | if (!opt.nocode && config.highlight) {
959 | WAIT('hljs', function() {
960 | arr = el.find('.markdown-code');
961 | for (var t of arr) {
962 | if (!t.$mdloaded) {
963 | t.$mdloaded = 1;
964 | tmp = $(t).find('pre code');
965 | for (var block of tmp)
966 | W.hljs.highlightBlock(block);
967 | }
968 | }
969 | });
970 | }
971 |
972 | arr = el.find('a');
973 |
974 | for (var t of arr) {
975 | if (!t.$mdloaded) {
976 | t.$mdloaded = 1;
977 | var a = $(t);
978 | var href = a.attr('href');
979 | var c = href.substring(0, 1);
980 | if (href === '#') {
981 | var beg = '';
982 | var end = '';
983 | var text = el.html();
984 | if (text.substring(0, 1) === '<')
985 | beg = '-';
986 | if (text.substring(text.length - 1) === '>')
987 | end = '-';
988 | a.attr('href', '#' + (beg + markdown_id(a.text()) + end));
989 | } else if (c !== '/' && c !== '#')
990 | a.attr('target', '_blank');
991 | }
992 | }
993 |
994 | EMIT('markdown', el, opt);
995 | el.find('.markdown-code').rclass('hidden');
996 | };
997 |
998 | Thelpers.markdown = function(val, opt) {
999 | return val ? (val + '').markdown(opt) : val;
1000 | };
1001 |
1002 | String.prototype.markdown = function(opt, nested) {
1003 |
1004 | // opt.wrap = true;
1005 | // opt.linetag = 'p';
1006 | // opt.ul = true;
1007 | // opt.code = true;
1008 | // opt.images = true;
1009 | // opt.links = true;
1010 | // opt.formatting = true;
1011 | // opt.icons = true;
1012 | // opt.tables = true;
1013 | // opt.br = true;
1014 | // opt.headlines = true;
1015 | // opt.hr = true;
1016 | // opt.blockquotes = true;
1017 | // opt.sections = true;
1018 | // opt.custom
1019 | // opt.footnotes = true;
1020 | // opt.urlify = true;
1021 | // opt.keywords = true;
1022 | // opt.emptynewline = true;
1023 |
1024 | var str = this;
1025 |
1026 | if (!opt)
1027 | opt = {};
1028 |
1029 | var lines = str.split('\n');
1030 | var builder = [];
1031 | var ul = [];
1032 | var table = false;
1033 | var iscode = false;
1034 | var isblock = false;
1035 | var ishead = 0;
1036 | var isprevblock = false;
1037 | var tmp;
1038 | var headline = '<{0} id="{3}" class="markdown-line" data-index="{1}">{2}';
1039 |
1040 | if (opt.wrap == null)
1041 | opt.wrap = true;
1042 |
1043 | if (opt.linetag == null)
1044 | opt.linetag = 'p';
1045 |
1046 | var closeul = function() {
1047 | while (ul.length) {
1048 | var text = ul.pop();
1049 | builder.push('');
1050 | }
1051 | };
1052 |
1053 | var formatlinks = function(val) {
1054 | return markdown_links(val, opt.images);
1055 | };
1056 |
1057 | var linkscope = function(val, index, callback) {
1058 |
1059 | var beg = -1;
1060 | var beg2 = -1;
1061 | var can = false;
1062 | var skip = false;
1063 | var find = false;
1064 | var n;
1065 |
1066 | for (var i = index; i < val.length; i++) {
1067 | var c = val.charAt(i);
1068 |
1069 | if (c === '[') {
1070 | beg = i;
1071 | can = false;
1072 | find = true;
1073 | continue;
1074 | }
1075 |
1076 | var codescope = val.substring(i, i + 6);
1077 |
1078 | if (skip && codescope === '') {
1088 | skip = true;
1089 | continue;
1090 | }
1091 |
1092 | var il = val.substring(i, i + 4);
1093 |
1094 | if (il === '<') {
1095 | beg2 = i;
1096 | continue;
1097 | } else if (beg2 > -1 && il === '>') {
1098 | callback(val.substring(beg2, i + 4), true);
1099 | beg2 = -1;
1100 | continue;
1101 | }
1102 |
1103 | if (c === ']') {
1104 |
1105 | can = false;
1106 | find = false;
1107 |
1108 | if (beg === -1)
1109 | continue;
1110 |
1111 | n = val.charAt(i + 1);
1112 |
1113 | // maybe a link mistake
1114 | if (n === ' ')
1115 | n = val.charAt(i + 2);
1116 |
1117 | // maybe a link
1118 | can = n === '(';
1119 | }
1120 |
1121 | if (beg > -1 && can && c === ')') {
1122 | n = val.charAt(beg - 1);
1123 | callback(val.substring(beg - (n === '!' ? 1 : 0), i + 1));
1124 | can = false;
1125 | find = false;
1126 | beg = -1;
1127 | }
1128 | }
1129 |
1130 | };
1131 |
1132 | var formatline = function(line) {
1133 | var tmp = [];
1134 | return line.replace(code, function(text) {
1135 | tmp.push(text);
1136 | return '\0';
1137 | }).replace(format, markdown_format).replace(/\0/g, function() {
1138 | return markdown_code(tmp.shift());
1139 | });
1140 | };
1141 |
1142 | var imagescope = function(val) {
1143 |
1144 | var beg = -1;
1145 | var can = false;
1146 | var n;
1147 |
1148 | for (var i = 0; i < val.length; i++) {
1149 | var c = val.charAt(i);
1150 |
1151 | if (c === '[') {
1152 | beg = i;
1153 | can = false;
1154 | continue;
1155 | }
1156 |
1157 | if (c === ']') {
1158 |
1159 | can = false;
1160 |
1161 | if (beg === -1)
1162 | continue;
1163 |
1164 | n = val.charAt(i + 1);
1165 |
1166 | // maybe a link mistake
1167 | if (n === ' ')
1168 | n = val.charAt(i + 2);
1169 |
1170 | // maybe a link
1171 | can = n === '(';
1172 | }
1173 |
1174 | if (beg > -1 && can && c === ')') {
1175 | n = val.charAt(beg - 1);
1176 | var tmp = val.substring(beg - (n === '!' ? 1 : 0), i + 1);
1177 | if (tmp.charAt(0) === '!')
1178 | val = val.replace(tmp, markdown_image(tmp));
1179 | can = false;
1180 | beg = -1;
1181 | }
1182 | }
1183 |
1184 |
1185 | return val;
1186 | };
1187 |
1188 | for (var i = 0; i < lines.length; i++) {
1189 |
1190 | lines[i] = lines[i].replace(encodetags, encode);
1191 |
1192 | if (!lines[i]) {
1193 | builder.push('');
1194 | continue;
1195 | }
1196 |
1197 | var three = lines[i].substring(0, 3);
1198 |
1199 | if (!iscode && (three === ':::' || (three === '==='))) {
1200 |
1201 | if (isblock) {
1202 | if (opt.blocks !== false)
1203 | builder[builder.length - 1] += '';
1204 | isblock = false;
1205 | isprevblock = true;
1206 | continue;
1207 | }
1208 |
1209 | closeul();
1210 | isblock = true;
1211 | if (opt.blocks !== false) {
1212 | line = lines[i].substring(3).trim();
1213 | if (opt.formatting !== false)
1214 | line = formatline(line);
1215 | if (opt.custom)
1216 | line = opt.custom(line);
1217 | if (opt.html)
1218 | line = opt.html(line, 'block');
1219 | builder.push('{1}
'.format(i, line));
1220 | }
1221 | continue;
1222 | }
1223 |
1224 | if (!isblock && lines[i] && isprevblock) {
1225 | builder.push('
'); 1226 | isprevblock = false; 1227 | } 1228 | 1229 | if (three === '```') { 1230 | 1231 | if (iscode) { 1232 | if (opt.code !== false) 1233 | builder[builder.length - 1] += '
';
1234 | iscode = false;
1235 | continue;
1236 | }
1237 |
1238 | closeul();
1239 | iscode = true;
1240 | if (opt.code !== false)
1241 | tmp = ''); 1226 | isprevblock = false; 1227 | } 1228 | 1229 | if (three === '```') { 1230 | 1231 | if (iscode) { 1232 | if (opt.code !== false) 1233 | builder[builder.length - 1] += '
