feat(Bookmarklet)

[DavidWiesner]

Hi,

thanks for your package its very useful. To make it easier to create the plunk_config.json I have created a Bookmarklet for this.

It's this function called embeded in a <a href="javascript:"> tag. Than can be drag and drop to the bookmarks.

(function(){
    // helper function create element with css and inner textnode
    function c(e,s,t){
        var r=document.createElement(e);
        r.style.cssText=s;
        if(t){
            r.appendChild(document.createTextNode(t));
        };
        return r;
    };
    // create div overlay
    var d=c('div', 'padding:.2em .5em;z-index:2000;position:absolute; top:1em; left:1em; background-color:white;box-shadow: 0 2px 4px 2px rgba(0,0,0,0.16), 0 2px 4px 2px rgba(0,0,0,0.23);');
    // create file download link
    var f=c('a', 'display:block;margin:1em;', '.plunk_config.json');
    // create close button
    var a=c('a', 'display:block;text-align:right;text-decoration:none;color:black;', '\u274C');
    // create error link
    var e=c('a', 'color:red;display:block;', 'no plunkr id found go to http://plnkr.co and sign in');
    // extract plunkr session id
    var m=document.cookie.match(/plnk_session=(\w+)/);
    var id= m && m.length>1 ? m[1] : undefined;

    // handle close button click
    a.href='javascript:void(0);';
    a.onclick=function(){document.body.removeChild(d);};
    // setup download link
    f.href='data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify({auth:{id:id}}, null, 2));
    f.download='.plunk_config.json';
    // setup error link
    e.href='https://plnkr.co';
    // putting all together and append to body
    d.appendChild(a);
    d.appendChild(id ? f : e);
    document.body.appendChild(d);
})();

And this embedded in a link you can drag and drop to the Bookmarks.

<a href="javascript:(function(){function c(o,e,n){var d=document.createElement(o);return d.style.cssText=e,n&&d.appendChild(document.createTextNode(n)),d}var d=c('div','padding:.2em .5em;z-index:2000;position:absolute; top:1em; left:1em; background-color:white;box-shadow: 0 2px 4px 2px rgba(0,0,0,0.16), 0 2px 4px 2px rgba(0,0,0,0.23);'),f=c('a','display:block;margin:1em;','.plunk_config.json'),a=c('a','display:block;text-align:right;text-decoration:none;color:black;','❌'),e=c('a','color:red;display:block;','no plunkr id found go to http://plnkr.co and sign in'),m=document.cookie.match(/plnk_session=(\w+)/),id=m&&m.length>1?m[1]:void 0;a.href='javascript:void(0);',a.onclick=function(){document.body.removeChild(d)},f.href='data:text/plain;charset=utf-8,'+encodeURIComponent(JSON.stringify({auth:{id:id}},null,2)),f.download='.plunk_config.json',e.href='https://plnkr.co',d.appendChild(a),d.appendChild(id?f:e),document.body.appendChild(d);})()">create plunk_config.json</a>

The only thing that will not work is to force the filename to start with a dot.

regards, David