Micro App Maker

We use this wiki page to generate the drag-and-drop micro application. For now this is simply a demonstration. It is used by the wiki app to create new micro application]]s, or you can test it with the following wiki-button:

# Javascript Below is the javascript:

<script> let endpoint = "{{transportURL}}" window.addEventListener("message", context) let message = { action:"sendFrameContext" } window.parent.postMessage(message, "*") function context ({data}) { if (data.action == "frameContext") { window.removeEventListener("message", context) const {site, slug, item, page} = data let codes = page.story.filter(item => item.type == 'code') if (codes && codes[0] && codes[0].text.match(/^http/)) { endpoint = codes[0].text output.innerHTML = 'ready' } else { output.innerHTML = 'Expected url in Code item' } } } function over(event) { event.preventDefault(); return false } async function drop(event) { event.preventDefault(); let dt = event.dataTransfer output.innerHTML = dt.types.join(", ") let text = dt.getData("text") let html = dt.getData("text/html") let url = dt.getData("URL") let data = {text, html, url} let options = { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) } let response = await fetch(endpoint, options) output.innerHTML += "<br>" + response.statusText let page = await response.json() output.innerHTML += "<br>" + page.title let message = { action: "showResult", page, keepLineup: event.shiftKey } window.parent.postMessage(message, "*"); } </script>

Replace the template variable with something like:

{{transportURL}} => http://home.c2.com:4010/image

References for the code can be found here: - HTML Drag and Drop API - mozilla - Transport.coffee - github

# HTML Here is the minimal HTMML5 we need to visualise the drop-region:

<center> <p id=output>waiting</p> <p id=dropzone ondrop="drop(event)" ondragover="over(event)" ondragenter="over(event)" >drop here</p> </center>

# CSS Here is the CSS styling for the HTML:

<style> p { font-family:"Helvetica Neue",Verdana,helvetica,Arial,Sans; } #dropzone { height:100px; width:400px; background-color:#ddd; display: table-cell; vertical-align: middle; } </style>