142 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			142 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
# hi
 | 
						|
this showcases my worst idea yet; *extending markdown with inline javascript*
 | 
						|
 | 
						|
due to obvious reasons it's disabled by default, and can be enabled with `-emp`
 | 
						|
 | 
						|
the examples are by no means correct, they're as much of a joke as this feature itself
 | 
						|
 | 
						|
 | 
						|
### sub-header
 | 
						|
nothing special about this one
 | 
						|
 | 
						|
 | 
						|
## except/
 | 
						|
this one becomes a hyperlink to ./except/ thanks to
 | 
						|
* the `copyparty_pre` plugin at the end of this file
 | 
						|
* which is invoked as a markdown filter every time the document is modified
 | 
						|
* which looks for headers ending with a `/` and erwrites all headers below that
 | 
						|
 | 
						|
it is a passthrough to the markdown extension api, see https://marked.js.org/using_pro
 | 
						|
 | 
						|
in addition to the markdown extension functions, `ctor` will be called on document init
 | 
						|
 | 
						|
 | 
						|
### these/
 | 
						|
and this one becomes ./except/these/
 | 
						|
 | 
						|
 | 
						|
#### ones.md
 | 
						|
finally ./except/these/ones.md
 | 
						|
 | 
						|
 | 
						|
### also-this.md
 | 
						|
whic hshoud be ./except/also-this.md
 | 
						|
 | 
						|
 | 
						|
 | 
						|
 | 
						|
# ok
 | 
						|
now for another extension type, `copyparty_post` which is called to manipulate the generated dom instead
 | 
						|
 | 
						|
`copyparty_post` can have the following functions, all optional
 | 
						|
* `ctor` is called on document init
 | 
						|
* `render` is called when the dom is done but still in-memory
 | 
						|
* `render2` is called with the live browser dom as-displayed
 | 
						|
 | 
						|
## post example
 | 
						|
 | 
						|
the values in the `ex:` columns are linkified to `example.com/$value`
 | 
						|
 | 
						|
| ex:foo       | bar      | ex:baz |
 | 
						|
| ------------ | -------- | ------ |
 | 
						|
| asdf         | nice     | fgsfds |
 | 
						|
| more one row | hi hello | aaa    |
 | 
						|
 | 
						|
and the table can be sorted by clicking the headers
 | 
						|
 | 
						|
the difference is that with `copyparty_pre` you'll probably break various copyparty features but if you use `copyparty_post` then future copyparty versions will probably break you
 | 
						|
 | 
						|
 | 
						|
 | 
						|
 | 
						|
# heres the plugins
 | 
						|
if there is anything below ths line in the preview then the plugin feature is disabled (good)
 | 
						|
 | 
						|
 | 
						|
 | 
						|
 | 
						|
```copyparty_pre
 | 
						|
ctor() {
 | 
						|
    md_plug['h'] = {
 | 
						|
        on: false,
 | 
						|
        lv: -1,
 | 
						|
        path: []
 | 
						|
    }
 | 
						|
},
 | 
						|
walkTokens(token) {
 | 
						|
    if (token.type == 'heading') {
 | 
						|
        var h = md_plug['h'],
 | 
						|
            is_dir = token.text.endsWith('/');
 | 
						|
        
 | 
						|
        if (h.lv >= token.depth) {
 | 
						|
            h.on = false;
 | 
						|
        }
 | 
						|
        if (!h.on && is_dir) {
 | 
						|
            h.on = true;
 | 
						|
            h.lv = token.depth;
 | 
						|
            h.path = [token.text];
 | 
						|
        }
 | 
						|
        else if (h.on && h.lv < token.depth) {
 | 
						|
            h.path = h.path.slice(0, token.depth - h.lv);
 | 
						|
            h.path.push(token.text);
 | 
						|
        }
 | 
						|
        if (!h.on)
 | 
						|
            return false;
 | 
						|
 | 
						|
        var path = h.path.join('');
 | 
						|
        var emoji = is_dir ? '📂' : '📜';
 | 
						|
        token.tokens[0].text = '<a href="' + path + '">' + emoji + ' ' + path + '</a>';
 | 
						|
    }
 | 
						|
    if (token.type == 'paragraph') {
 | 
						|
        //console.log(JSON.parse(JSON.stringify(token.tokens)));
 | 
						|
        for (var a = 0; a < token.tokens.length; a++) {
 | 
						|
            var t = token.tokens[a];
 | 
						|
            if (t.type == 'text' || t.type == 'strong' || t.type == 'em') {
 | 
						|
                var ret = '', text = t.text;
 | 
						|
                for (var b = 0; b < text.length; b++)
 | 
						|
                    ret += (Math.random() > 0.5) ? text[b] : text[b].toUpperCase();
 | 
						|
                
 | 
						|
                t.text = ret;
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
    return true;
 | 
						|
}
 | 
						|
```
 | 
						|
 | 
						|
 | 
						|
 | 
						|
```copyparty_post
 | 
						|
render(dom) {
 | 
						|
    var ths = dom.querySelectorAll('th');
 | 
						|
    for (var a = 0; a < ths.length; a++) {
 | 
						|
        var th = ths[a];
 | 
						|
        if (th.textContent.indexOf('ex:') === 0) {
 | 
						|
            th.textContent = th.textContent.slice(3);
 | 
						|
            var nrow = 0;
 | 
						|
            while ((th = th.previousSibling) != null)
 | 
						|
                nrow++;
 | 
						|
            
 | 
						|
            var trs = ths[a].parentNode.parentNode.parentNode.querySelectorAll('tr');
 | 
						|
            for (var b = 1; b < trs.length; b++) {
 | 
						|
                var td = trs[b].childNodes[nrow];
 | 
						|
                td.innerHTML = '<a href="//example.com/' + td.innerHTML + '">' + td.innerHTML + '</a>';
 | 
						|
            }
 | 
						|
        }
 | 
						|
    }
 | 
						|
},
 | 
						|
render2(dom) {
 | 
						|
    window.makeSortable(dom.getElementsByTagName('table')[0]);
 | 
						|
}
 | 
						|
```
 |