You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
17 KiB
431 lines
17 KiB
<template>
|
|
<div>
|
|
<!--
|
|
<b-row no-gutters w-100 h-100
|
|
v-if="showlloedit"
|
|
>
|
|
<b-col cols="12" sm="12" md="12" >
|
|
<iframe id="llocontainer"
|
|
:srcdoc="htmlasciitmp"
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
name="Forgot_Iframe">
|
|
</iframe>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
-->
|
|
<b-row no-gutters w-100 h-100
|
|
v-if="showlloedit"
|
|
>
|
|
<b-col cols="12" sm="12" md="12" >
|
|
<iframe id="llocontainer1"
|
|
src="http://doclive.swarmlab.io/adoc.html"
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
name="Forgot_Iframe1">
|
|
</iframe>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue'
|
|
import Asciidoctor from 'asciidoctor'
|
|
import JSZip from 'jszip';
|
|
import FileSaver from 'file-saver';
|
|
export default {
|
|
components: {
|
|
},
|
|
data () {
|
|
return {
|
|
swarmlabllo: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/llo-index.yml',
|
|
ssl:{},
|
|
url_asciijshighlight:[
|
|
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'
|
|
],
|
|
url_asciijs:[
|
|
//'https://code.jquery.com/jquery-3.5.1.slim.min.js',
|
|
//'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js',
|
|
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'
|
|
],
|
|
url_asciicss:[
|
|
// 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css',
|
|
'https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
|
|
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'
|
|
],
|
|
url_asciicssbody:[
|
|
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css'
|
|
],
|
|
|
|
code: '',
|
|
editchoice: '',
|
|
optionsedit: [
|
|
{ text: 'code', value: 'code' },
|
|
{ text: 'text', value: 'text' }
|
|
],
|
|
llodesc:[{
|
|
llo_url : '',
|
|
llo_name : '',
|
|
llo_author : '',
|
|
llo_intro : ''
|
|
}],
|
|
searchLLO: [],
|
|
searchLLOactive : false,
|
|
ADOC_html_code:'',
|
|
challenge:[],
|
|
action:'',
|
|
tryLLO:[],
|
|
service:'os2',
|
|
active:0,
|
|
activecount:0,
|
|
remove:'',
|
|
activeField:'',
|
|
bootstrap:false,
|
|
firstbootstrap:0,
|
|
htmlasciitmp:'',
|
|
datafile: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data',
|
|
datadir: '0_netstat/data',
|
|
LearningObject:'',
|
|
asciidochtml:'',
|
|
asciidochtmlzip:'',
|
|
showllo:true,
|
|
showlloedit:true,
|
|
selected: 'sublime',
|
|
options: [
|
|
{ text: 'vim', value: 'vim' },
|
|
{ text: 'sublime', value: 'sublime' }
|
|
],
|
|
pValidate: false,
|
|
ADOC_html:[]
|
|
}
|
|
},
|
|
methods: {
|
|
async saveascii() {
|
|
var asciiname = 'myname'
|
|
var filesave = asciiname+"_DocLive.zip"
|
|
var zip = new JSZip();
|
|
|
|
var llofile = zip.folder(asciiname);
|
|
var ziphtml = await this.createhtmlfromadoc()
|
|
llofile.file("ascii.adoc.html", this.asciidochtmlzip);
|
|
llofile.file("ascii.adoc", this.code);
|
|
|
|
zip.generateAsync({type:"blob"})
|
|
.then(function(content) {
|
|
FileSaver.saveAs(content, filesave);
|
|
});
|
|
|
|
},
|
|
async bootsrapllo() {
|
|
console.log('created');
|
|
var action=this.action
|
|
var value=this.code
|
|
var service=this.service
|
|
var asciiID = this.active
|
|
var asciiid = "llo_"+asciiID+"_ascii"
|
|
try {
|
|
|
|
// *************************************
|
|
// ***** ------- HTML ------- *****
|
|
// *************************************
|
|
try{
|
|
// -------------------------------------
|
|
// ------- create file
|
|
// -------------------------------------
|
|
var thishtml = `<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
</head>
|
|
<body>
|
|
<div id="firstElement">
|
|
<span id="AsciiElement"></span>
|
|
</div>
|
|
<div id="lastElement">
|
|
<div>
|
|
<span id="jsElement"></span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>`
|
|
|
|
var htmlAscii = new DOMParser().parseFromString(thishtml, "text/html");
|
|
|
|
// -------------------------------------
|
|
// ------- create css body
|
|
// -------------------------------------
|
|
var arrayLengthb = this.url_asciicssbody.length
|
|
for (var i = 0; i < arrayLengthb; i++) {
|
|
var asciilinkb = document.createElement('link');
|
|
asciilinkb.rel = 'stylesheet';
|
|
asciilinkb.href = this.url_asciicssbody[i]
|
|
//let parentDivb = htmlAscii.getElementById("jsElement").parentNode
|
|
//let lastelb = document.getElementById("jsElement")
|
|
let parentDivb = htmlAscii.getElementById("lastElement").parentNode
|
|
let lastelb = document.getElementById("lastElement")
|
|
parentDivb.insertBefore(asciilinkb, lastelb)
|
|
//console.log(this.url_asciicss[i])
|
|
}
|
|
|
|
// -------------------------------------
|
|
// ------- insert script head allagi se body
|
|
// -------------------------------------
|
|
var arrayLengthi1 = this.url_asciijshighlight.length
|
|
for (var i = 0; i < arrayLengthi1; i++) {
|
|
//var asciiscript0 = document.createElement('script');
|
|
// asciiscript0.type = 'text/javascript';
|
|
// asciiscript0.src = this.url_asciijshighlight[i]
|
|
//htmlAscii.head.appendChild(asciiscript0);
|
|
|
|
var asciiscript0 = document.createElement('script');
|
|
asciiscript0.type = 'text/javascript';
|
|
asciiscript0.src = this.url_asciijshighlight[i]
|
|
//let parentDiv0 = htmlAscii.getElementById("jsElement").parentNode
|
|
//let lastel0 = document.getElementById("jsElement")
|
|
let parentDiv0 = htmlAscii.getElementById("lastElement").parentNode
|
|
let lastel0 = document.getElementById("lastElement")
|
|
parentDiv0.insertBefore(asciiscript0, lastel0)
|
|
}
|
|
|
|
// -------------------------------------
|
|
// ------- create css head
|
|
// -------------------------------------
|
|
var arrayLength = this.url_asciicss.length
|
|
for (var i = 0; i < arrayLength; i++) {
|
|
var asciilink = document.createElement('link');
|
|
asciilink.rel = 'stylesheet';
|
|
asciilink.href = this.url_asciicss[i]
|
|
htmlAscii.head.appendChild(asciilink);
|
|
//console.log(this.url_asciicss[i])
|
|
}
|
|
|
|
// -------------------------------------
|
|
// ------- insert custom functions head
|
|
// -------------------------------------
|
|
var myfunction = `function llorm(msg) {
|
|
var origin = 'https://api-client.swarmlab.io:8088'
|
|
window.parent.postMessage({'event': 'warranty-transaction-rm', 'data': msg}, origin);
|
|
};
|
|
function topwindow(field) {
|
|
var asciiid = "llo_"+field+"_ascii"
|
|
var llotarget = document.getElementById(asciiid);
|
|
if(llotarget){
|
|
llotarget.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
|
|
}
|
|
};
|
|
function lloedit(msg,field) {
|
|
var origin = 'https://api-client.swarmlab.io:8088'
|
|
topwindow(msg);
|
|
window.parent.postMessage({'event': 'warranty-transaction-success', 'data': msg , 'field': field}, origin);
|
|
};`
|
|
//var asciiscript2 = document.createElement('script');
|
|
// asciiscript2.type = 'text/javascript';
|
|
// asciiscript2.innerHTML = myfunction
|
|
// htmlAscii.head.appendChild(asciiscript2);
|
|
|
|
|
|
// -------------------------------------
|
|
// ------- insert script body
|
|
// -------------------------------------
|
|
// var arrayLengthi = this.url_asciijs.length
|
|
// //console.log(arrayLengthi)
|
|
// for (var i = 0; i < arrayLengthi; i++) {
|
|
// var asciiscript = document.createElement('script');
|
|
// asciiscript.type = 'text/javascript';
|
|
// asciiscript.src = this.url_asciijs[i]
|
|
// let parentDiv = htmlAscii.getElementById("jsElement").parentNode
|
|
// let lastel = document.getElementById("jsElement")
|
|
// //let parentDiv = htmlAscii.getElementById("lastElement").parentNode
|
|
// //let lastel = document.getElementById("lastElement")
|
|
// parentDiv.insertBefore(asciiscript, lastel)
|
|
// //htmlAscii.body.appendChild(asciiscript);
|
|
// }
|
|
|
|
// -------------------------------------
|
|
// ------- run hlhs body
|
|
// -------------------------------------
|
|
var asciiscript1 = document.createElement('script');
|
|
asciiscript1.type = 'text/javascript';
|
|
asciiscript1.innerHTML = "hljs.initHighlighting()";
|
|
//let parentDivl = htmlAscii.getElementById("jsElement").parentNode
|
|
//let lastell = document.getElementById("jsElement")
|
|
let parentDivl = htmlAscii.getElementById("lastElement").parentNode
|
|
let lastell = document.getElementById("lastElement")
|
|
parentDivl.insertBefore(asciiscript1, lastell)
|
|
//htmlAscii.body.appendChild(asciiscript1);
|
|
|
|
// -------------------------------------
|
|
// ------- html serialize
|
|
// -------------------------------------
|
|
var Myascii = new XMLSerializer();
|
|
this.htmlasciitmp = Myascii.serializeToString(htmlAscii)
|
|
|
|
// *************************************
|
|
// ***** ------- HTML ------- *****
|
|
// *************************************
|
|
|
|
//console.log(" asciii3 "+JSON.stringify(this.htmlasciitmp))
|
|
//console.log(asciidoctor1.getRuntime())
|
|
this.bootstrap = true
|
|
//console.log(" bootstrap "+JSON.stringify(this.htmlasciitmp))
|
|
|
|
|
|
}catch (ex) {
|
|
console.log(" asc error "+JSON.stringify(ex))
|
|
return
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}catch (ex) {
|
|
console.log(" logi error "+JSON.stringify(ex))
|
|
return
|
|
}
|
|
},
|
|
async addlloascii() {
|
|
var value = this.code
|
|
console.log(" ascii code "+JSON.stringify(this.code))
|
|
|
|
// *************************************
|
|
// ***** ------- HTML ------- *****
|
|
// *************************************
|
|
try{
|
|
var asciidoctor1 = Asciidoctor()
|
|
var value_compiled = asciidoctor1.convert(value,
|
|
{
|
|
standalone: false,
|
|
backend: 'html5',
|
|
header_footer: false,
|
|
doctype: 'article',
|
|
safe: 'safe',
|
|
attributes: {
|
|
'source-highlighter': 'highlightjs',
|
|
//'toc':'right',
|
|
'sectnumlevels':4,
|
|
'toclevels':4,
|
|
'sectnums':true,
|
|
'icons': 'font',
|
|
'copycss':true,
|
|
'stylesheet': 'https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
|
|
'iconfont-cdn': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css',
|
|
'iconfont-name': 'fontawesome-5-14.0',
|
|
'iconfont-remote':true,
|
|
'linkcss': true
|
|
}
|
|
}) // (2)
|
|
|
|
|
|
var mydinfunction = ` <div>
|
|
${value_compiled}
|
|
</div>`
|
|
|
|
|
|
console.log(" ascii "+JSON.stringify(value_compiled))
|
|
var asciiidtext = 'firstElement'
|
|
this.asciidochtml = value_compiled
|
|
//document.getElementById('llocontainer').contentWindow.document.getElementById(asciiidtext).innerHTML = this.asciidochtml
|
|
//this.addtask (asciiID, divascii);
|
|
|
|
var iframe = document.getElementById('llocontainer1'),
|
|
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
|
|
iframedoc.body.innerHTML = this.asciidochtml
|
|
theIframe.contentWindow.location = theIframe.src
|
|
|
|
//var frame = document.createElement("iframe");
|
|
//frame.src = URL.createObjectURL(new Blob([this.asciidochtml], {type: "text/html"}));
|
|
//document.body.appendChild(frame)
|
|
|
|
}catch (ex) {
|
|
console.log(" ascerror "+JSON.stringify(ex))
|
|
return
|
|
}
|
|
|
|
|
|
},
|
|
async createhtmlfromadoc() {
|
|
var value = this.code
|
|
|
|
// *************************************
|
|
// ***** ------- HTML ------- *****
|
|
// *************************************
|
|
try{
|
|
var asciidoctor1 = Asciidoctor()
|
|
var value_compiled = asciidoctor1.convert(value,
|
|
{
|
|
standalone: true,
|
|
backend: 'html5',
|
|
header_footer: false,
|
|
doctype: 'article',
|
|
safe: 'safe',
|
|
attributes: {
|
|
'source-highlighter': 'highlightjs',
|
|
'sectnumlevels':4,
|
|
'toclevels':4,
|
|
'sectnums':true,
|
|
'icons': 'font',
|
|
'copycss':true,
|
|
'stylesheet': 'https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
|
|
'iconfont-cdn': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css',
|
|
'iconfont-name': 'fontawesome-5-14.0',
|
|
'iconfont-remote':true,
|
|
'linkcss': true
|
|
}
|
|
}) // (2)
|
|
|
|
this.asciidochtmlzip = value_compiled
|
|
|
|
}catch (ex) {
|
|
console.log(" ascerror "+JSON.stringify(ex))
|
|
return
|
|
}
|
|
|
|
|
|
},
|
|
handleChange() {
|
|
},
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
mounted() {
|
|
this.$root.$on('asciilive_add', (v) => {
|
|
this.code = v
|
|
this.addlloascii()
|
|
})
|
|
this.$root.$on('asciilive_save', (v) => {
|
|
this.saveascii()
|
|
})
|
|
|
|
},
|
|
beforeDestroy () {
|
|
this.$root.$off('asciilive_add')
|
|
this.$root.$off('asciilive_save')
|
|
},
|
|
|
|
created () {
|
|
this.bootsrapllo()
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.CodeMirror {
|
|
|
|
|
|
/* Set height, width, borders, and global font properties here */
|
|
font-family: monospace;
|
|
height: 750px;
|
|
}
|
|
|
|
</style>
|
|
|