Code {AugmentedReaderView}

/* to be used in the console or as a shortcut with e.g Tridactyl */

url = `https://fabien.benetou.fr/PIMVRdata/AugmentedReaderView?action=`; var pimdata = null; var lastSelection = document.getSelection().toString();

function drop_handler(ev){ ev.preventDefault(); console.log(ev); console.log("dropped, appending for now but should switch" ); /* might end up with children */ ev.target.parentElement.appendChild(document.getElementById(ev.dataTransfer.getData("application/my-app"))); /* using flex so order matters */ } function dragover_handler(ev) { ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; } function dragstart_handler(ev) { ev.dataTransfer.setData("application/my-app", ev.target.id); ev.dataTransfer.effectAllowed = "move"; }

function remoteload(){

        fetch(url+'source') 
                .then( response => { return response.json() } )
                .then( data => { pimdata = data; document.querySelector("#arvnotes").innerText = data; })

}

function remotesave(data){

          fetch(url+'edit', {
                  method: 'POST',
                  headers: {'Content-Type':'application/x-www-form-urlencoded'},
                  body: "post=1&author=PIMVR&authpw=CHANGE_ME&text="+JSON.stringify( data )
          }).then(res => res).then(res => console.log("saved remotely", res)) /* should output to page */

}

fetch('https://raw.githack.com/mozilla/readability/master/Readability.js').then(response => response.text())

    .then(text => { eval(text); article = new Readability(document).parse(); document.body.innerHTML = 
        "Sidebars for annotation loaded from own PIM! - ⌨ Shft+Ctrl+x to save to PIM.<hr>"
        +"<div style='display:flex;flex-flow:row;'><div id=pimpage ondragstart=dragstart_handler(event) ondrop='drop_handler(event)' ondragover='dragover_handler(event)' draggable=true style='flex:1;'><iframe src='https://fabien.benetou.fr/Analysis/CreativityFosteringBehaviors?action=print' style=transform:scale(.8);border:0;width:90%;height:"
        +window.outerHeight+"px></iframe><iframe src='https://fabien.benetou.fr/AugmentedReaderView/Ideas?action=print' style=transform:scale(.8);border:0;width:90%;></iframe></div>'"
	+"<div style='flex:1;' id=readerviewcontent>" + article.content+"</div>"
	+"<div id=augmentedactions ondragstart=dragstart_handler(event) ondrop='drop_handler(event)' ondragover='dragover_handler(event)' draggable=true style='flex:1;'>Automated summarization: <div id=summarized></div><hr>Previous Augmented Reader View <a href=https://fabien.benetou.fr/PIMVRdata/AugmentedReaderView?action=diff>notes</a>: <div id=arvnotes></div>"
	+"<hr>Selection search (select keywords to search)<br/><iframe id=searchframe style=transform:scale(.8);border:0;width:90%;height:"+window.outerHeight+"px src="+"https://fabien.benetou.fr/?action=search&q="+lastSelection+"></iframe></div></div>";

	remoteload();

        fetch('https://hf.space/embed/benthecoder/news-summarizer/+/api/predict/', { method: "POST", body: JSON.stringify({"data":[ window.location.href ]}), headers: { "Content-Type": "application/json" } })
                .then(function(response) { return response.json(); }).then(function(json_response){ document.querySelector("#summarized").innerText = json_response.data.join(" ")});
	article = document.querySelector("#article");
        if (article) autoscroll = setInterval( () => { 
                window.scrollBy(0, 1);
                Array.from( article.children ).map( i => { 
                                let zoomFactor = 2 / ( Math.abs( window.innerHeight/2 - i.getBoundingClientRect().top )/100); 
                                if (zoomFactor>1) zoomFactor=1;
                                i.style.transform = "scale("+ zoomFactor + ")";
                        } )
        } , 100 );
   } );

 selectionWatcher = setInterval( () => { selection = document.getSelection().toString(); if (selection && selection != lastSelection) document.querySelector("#searchframe").src = "https://fabien.benetou.fr/?action=search&q="+selection; lastSelection = selection } , 100 );