diff --git a/.gitignore b/.gitignore
index d406159ec9eec8b0d33917b07cd4f38f515ff722..af575bd0c5a43d5b39ef3da13f3dc798ebe1704d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
node_modules
dist
package-lock.json
-src/res/raw
\ No newline at end of file
+src/res/raw
+src/plugin_examples/*/
\ No newline at end of file
diff --git a/src/plugin_examples/jugex/js-autocomplete.min.css b/src/plugin_examples/jugex/js-autocomplete.min.css
deleted file mode 100644
index 4261b1d033e28b55dfc43df39f5410a11823a15c..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/js-autocomplete.min.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.autocomplete-suggestions {
- text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
-
- /* core styles should not be changed */
- position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
-}
-.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
-.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
-.autocomplete-suggestion.selected { background: #f0f0f0; }
diff --git a/src/plugin_examples/jugex/js-autocomplete.min.js b/src/plugin_examples/jugex/js-autocomplete.min.js
deleted file mode 100644
index 0b460545687f2230fccf1b46fd45f4d6022cfb73..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/js-autocomplete.min.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// JavaScript autoComplete v1.0.4
-// https://github.com/Pixabay/JavaScript-autoComplete
-var autoComplete=function(){function e(e){function t(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function o(e,t,o){e.attachEvent?e.attachEvent("on"+t,o):e.addEventListener(t,o)}function s(e,t,o){e.detachEvent?e.detachEvent("on"+t,o):e.removeEventListener(t,o)}function n(e,s,n,l){o(l||document,s,function(o){for(var s,l=o.target||o.srcElement;l&&!(s=t(l,e));)l=l.parentElement;s&&n.call(l,o)})}if(document.querySelector){var l={selector:0,source:0,minChars:3,delay:150,offsetLeft:0,offsetTop:1,cache:1,menuClass:"",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(){}};for(var c in e)e.hasOwnProperty(c)&&(l[c]=e[c]);for(var a="object"==typeof l.selector?[l.selector]:document.querySelectorAll(l.selector),u=0;u<a.length;u++){var i=a[u];i.sc=document.createElement("div"),i.sc.className="autocomplete-suggestions "+l.menuClass,i.autocompleteAttr=i.getAttribute("autocomplete"),i.setAttribute("autocomplete","off"),i.cache={},i.last_val="",i.updateSC=function(e,t){var o=i.getBoundingClientRect();if(i.sc.style.left=Math.round(o.left+(window.pageXOffset||document.documentElement.scrollLeft)+l.offsetLeft)+"px",i.sc.style.top=Math.round(o.bottom+(window.pageYOffset||document.documentElement.scrollTop)+l.offsetTop)+"px",i.sc.style.width=Math.round(o.right-o.left)+"px",!e&&(i.sc.style.display="block",i.sc.maxHeight||(i.sc.maxHeight=parseInt((window.getComputedStyle?getComputedStyle(i.sc,null):i.sc.currentStyle).maxHeight)),i.sc.suggestionHeight||(i.sc.suggestionHeight=i.sc.querySelector(".autocomplete-suggestion").offsetHeight),i.sc.suggestionHeight))if(t){var s=i.sc.scrollTop,n=t.getBoundingClientRect().top-i.sc.getBoundingClientRect().top;n+i.sc.suggestionHeight-i.sc.maxHeight>0?i.sc.scrollTop=n+i.sc.suggestionHeight+s-i.sc.maxHeight:0>n&&(i.sc.scrollTop=n+s)}else i.sc.scrollTop=0},o(window,"resize",i.updateSC),document.body.appendChild(i.sc),n("autocomplete-suggestion","mouseleave",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&setTimeout(function(){e.className=e.className.replace("selected","")},20)},i.sc),n("autocomplete-suggestion","mouseover",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&(e.className=e.className.replace("selected","")),this.className+=" selected"},i.sc),n("autocomplete-suggestion","mousedown",function(e){if(t(this,"autocomplete-suggestion")){var o=this.getAttribute("data-val");i.value=o,l.onSelect(e,o,this),i.sc.style.display="none"}},i.sc),i.blurHandler=function(){try{var e=document.querySelector(".autocomplete-suggestions:hover")}catch(t){var e=0}e?i!==document.activeElement&&setTimeout(function(){i.focus()},20):(i.last_val=i.value,i.sc.style.display="none",setTimeout(function(){i.sc.style.display="none"},350))},o(i,"blur",i.blurHandler);var r=function(e){var t=i.value;if(i.cache[t]=e,e.length&&t.length>=l.minChars){for(var o="",s=0;s<e.length;s++)o+=l.renderItem(e[s],t);i.sc.innerHTML=o,i.updateSC(0)}else i.sc.style.display="none"};i.keydownHandler=function(e){var t=window.event?e.keyCode:e.which;if((40==t||38==t)&&i.sc.innerHTML){var o,s=i.sc.querySelector(".autocomplete-suggestion.selected");return s?(o=40==t?s.nextSibling:s.previousSibling,o?(s.className=s.className.replace("selected",""),o.className+=" selected",i.value=o.getAttribute("data-val")):(s.className=s.className.replace("selected",""),i.value=i.last_val,o=0)):(o=40==t?i.sc.querySelector(".autocomplete-suggestion"):i.sc.childNodes[i.sc.childNodes.length-1],o.className+=" selected",i.value=o.getAttribute("data-val")),i.updateSC(0,o),!1}if(27==t)i.value=i.last_val,i.sc.style.display="none";else if(13==t||9==t){var s=i.sc.querySelector(".autocomplete-suggestion.selected");s&&"none"!=i.sc.style.display&&(l.onSelect(e,s.getAttribute("data-val"),s),setTimeout(function(){i.sc.style.display="none"},20))}},o(i,"keydown",i.keydownHandler),i.keyupHandler=function(e){var t=window.event?e.keyCode:e.which;if(!t||(35>t||t>40)&&13!=t&&27!=t){var o=i.value;if(o.length>=l.minChars){if(o!=i.last_val){if(i.last_val=o,clearTimeout(i.timer),l.cache){if(o in i.cache)return void r(i.cache[o]);for(var s=1;s<o.length-l.minChars;s++){var n=o.slice(0,o.length-s);if(n in i.cache&&!i.cache[n].length)return void r([])}}i.timer=setTimeout(function(){l.source(o,r)},l.delay)}}else i.last_val=o,i.sc.style.display="none"}},o(i,"keyup",i.keyupHandler),i.focusHandler=function(e){i.last_val="\n",i.keyupHandler(e)},l.minChars||o(i,"focus",i.focusHandler)}this.destroy=function(){for(var e=0;e<a.length;e++){var t=a[e];s(window,"resize",t.updateSC),s(t,"blur",t.blurHandler),s(t,"focus",t.focusHandler),s(t,"keydown",t.keydownHandler),s(t,"keyup",t.keyupHandler),t.autocompleteAttr?t.setAttribute("autocomplete",t.autocompleteAttr):t.removeAttribute("autocomplete"),document.body.removeChild(t.sc),t=null}}}}return e}();!function(){"function"==typeof define&&define.amd?define("autoComplete",function(){return autoComplete}):"undefined"!=typeof module&&module.exports?module.exports=autoComplete:window.autoComplete=autoComplete}();
diff --git a/src/plugin_examples/jugex/manifest.json b/src/plugin_examples/jugex/manifest.json
deleted file mode 100644
index a56482b9ee22e34ead516c404403996b2fdd3316..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/manifest.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "name": "fzj.hb.jugex",
- "displayName":"JuGEx",
- "type": "plugin",
- "templateURL": "http://localhost:8080/res/plugins/template.html",
- "scriptURL": "http://localhost:8080/res/plugins/script.js"
-}
\ No newline at end of file
diff --git a/src/plugin_examples/jugex/newscript.js b/src/plugin_examples/jugex/newscript.js
deleted file mode 100644
index 22a6ab15d44eca451412ab9a38985860d5bbca60..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/newscript.js
+++ /dev/null
@@ -1,803 +0,0 @@
-(()=>{
- const PLUGIN_NAME = `fzj.hb.JuGEx`
- const DOM_PARSER = new DOMParser()
- const MIN_CHAR = 3
- const URL_BASE = 'http://medpc055.ime.kfa-juelich.de:8003'
-
- class HoverRegionSelectorComponent extends HTMLElement{
- constructor(){
- super()
-
- this.template =
- `
- <div class = "input-group">
- <input value = "${this.selectedRegion ? this.selectedRegion.name : ''}" class = "form-control" placeholder = "" readonly = "readonly" type = "text" region />
- <span class = "input-group-btn">
- <div class = "btn btn-default" editRegion>
- <span class = "glyphicon glyphicon-edit"></span>
- </div>
- </span>
- </div>
- `
-
- this.elTemplate = DOM_PARSER.parseFromString(this.template,'text/html') // or use innerHTML... whichever suits you
-
- this.elTemplate2 = document.createElement('div')
- this.elTemplate2.innerHTML = this.template
-
- this.renderedFlag = false
- this.listening = true
- this.selectedRegion = null
- this.shutdownHooks = []
-
- this.rootChild = document.createElement('div')
- this.appendChild(this.rootChild)
- this.firstrender = true
-
- this.init()
- window.pluginControl[PLUGIN_NAME].onShutdown((this.onShutdown).bind(this))
- }
-
- /* class method */
- /* connectedCallback can get called multiple times during the lifetime of a widget.
- most prominently, when the user chooses to dock the widget, or minimise the widget. */
- connectedCallback(){
- this.render()
- this.attachEventListeners()
- }
-
- /* class method */
- /* ditto, see above */
- disconnectedCallback(){
- this.unattachEventListeners()
- }
-
- /* in this example, the init funciton attaches any permanent listeners, such as, in this
- case, mouseovernehuba event stream */
- init(){
- this.mouseOverNehuba = window.viewerHandle.mouseOverNehuba.filter(()=>this.listening).subscribe(ev=>{
- this.selectedRegion = ev.foundRegion
- this.render()
- this.attachEventListeners()
- })
- }
-
- /* cleaning up when the user permanently closes the widget */
- onShutdown(){
- this.mouseOverNehuba.unsubscribe()
- }
-
- render(){
- if(!this.firstrender){
- this.unattachEventListeners()
- this.firstrender = false
- }
- while(this.rootChild.lastChild){
- this.rootChild.removeChild(this.rootChild.lastChild)
- }
-
- this.template =
- `
- <div class = "input-group">
- <input value = "${this.selectedRegion ? this.selectedRegion.name : ''}" class = "form-control" placeholder = "" readonly = "readonly" type = "text" region />
- <span class = "input-group-btn">
- <div class = "btn btn-default" editRegion>
- <span class = "glyphicon glyphicon-edit"></span>
- </div>
- </span>
- </div>
- `
- this.elTemplate2.innerHTML = this.template
- this.rootChild.appendChild(this.elTemplate2)
- }
-
- clearAndRelisten(ev){
- this.listening = true
- this.selectedRegion = null
- this.render()
- this.attachEventListeners()
- }
-
- attachEventListeners(){
- this.rootChild.querySelector('div[editRegion]').addEventListener('click',(this.clearAndRelisten).bind(this))
- }
-
- unattachEventListeners(){
- this.rootChild.querySelector('div[editRegion]').addEventListener('click',(this.clearAndRelisten).bind(this))
- }
- }
-
- class DismissablePill extends HTMLElement{
- constructor(){
- super()
- this.name = ``
- this.template =
- `
- <span class = "label label-default">
- <span pillName>${this.name}</span>
- <span class = "glyphicon glyphicon-remove" pillRemove></span>
- </span>
- `
- }
-
- render(){
- this.template =
- `
- <span class = "label label-default">
- <span pillName>${this.name}</span>
- <span class = "glyphicon glyphicon-remove" pillRemove></span>
- </span>
- `
- this.elTemplate = document.createElement('span')
- // this.elTemplate = DOM_PARSER.parseFromString(this.template,'text/html')
- this.elTemplate.innerHTML = this.template
-
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
- this.appendChild(this.elTemplate)
- }
-
- connectedCallback(){
- this.render()
- this.attachEventListeners()
- }
-
- disconnectedCallback(){
- this.unattachEventListeners()
- }
-
- attachEventListeners(){
- this.querySelector('span[pillRemove]').addEventListener('click',(this.dismissPill).bind(this))
- }
-
- unattachEventListeners(){
- this.querySelector('span[pillRemove]').removeEventListener('click',(this.dismissPill).bind(this))
- }
-
- dismissPill(){
- this.onRemove(this.name)
- this.remove()
- }
-
- /* needs to be overwritten by parent, if parent needs to listen to the on remove event */
- onRemove(){
-
- }
- }
-
- class WebjugexGeneComponent extends HTMLElement{
- constructor(){
- super()
- this.arrDict = []
- this.autocompletesuggestion = []
- this.selectedGenes = []
- this.template =
- `
- <div class = "input-group">
- <input geneInputBox type = "text" class = "form-control" placeholder = "Enter gene of interest ..." />
- <input geneImportInput class = "hidden" type = "file" />
- <span class = "input-group-btn">
- <div geneAdd class = "btn btn-default" title = "Add a gene">Add</div>
- <div geneImport class = "btn btn-default" title = "Import a CSV file">Import</div>
- <div geneExport class = "btn btn-default" title = "Export selected genes into a CSV file">Export</div>
- </span>
- </div>
- `
-
- window.pluginControl[PLUGIN_NAME].onShutdown((this.unloadExternalResources).bind(this))
- this.firstrender = true
- }
-
- connectedCallback(){
- if(this.firstrender){
-
- this.elTemplate = document.createElement('div')
- this.elTemplate.innerHTML = this.template
- this.rootChild = document.createElement('div')
- this.appendChild(this.rootChild)
- this.rootChild.appendChild(this.elTemplate)
- this.init()
- this.firstrender = false
- }
- // this.render()
- // this.attachEventListeners()
- /* see below */
- }
-
- disconnectedCallback(){
- // this.unattachEventListeners()
- /* see below */
- }
-
- // render(){
- // while(this.lastChild){
- // this.removeChild(lastChild)
- // }
- // this.appendChild(this.elTemplate)
- // }
-
- /* in special circumstances, where the view does not change too much, but there are numerous
- eventlisteners, it maybe more efficient to only attach event listener once, */
- init(){
-
- this.elGeneInputBox = this.rootChild.querySelector('input[geneInputBox]')
- this.elGeneImportInput = this.rootChild.querySelector('input[geneImportInput]')
- this.elGeneAdd = this.rootChild.querySelector('div[geneAdd]')
- this.elGeneImport = this.rootChild.querySelector('div[geneImport]')
- this.elGeneExport = this.rootChild.querySelector('div[geneExport]')
-
- const importGeneList = (file) => {
- const csvReader = new FileReader()
- csvReader.onload = (ev)=>{
- const csvRaw = ev.target.result
- this.selectedGenes.splice(0,this.selectedGenes.length)
- csvRaw.split(/\r|\r\n|\n|\t|\,|\;/).forEach(gene=>{
- if(gene.length > 0)
- this.addGene(gene)
- })
- }
- csvReader.readAsText(file,'utf-8')
- }
-
- this.elGeneImportInput.addEventListener('change',(ev)=>{
- importGeneList(ev.target.files[0])
- })
-
- this.elGeneImport.addEventListener('click',()=>{
- this.elGeneImportInput.click()
- })
- this.elGeneExport.addEventListener('click',()=>{
- const exportGeneList = 'data:text/csv;charset=utf-8,'+this.selectedGenes.join(',')
- const exportGeneListURI = encodeURI(exportGeneList)
- const dlExportGeneList = document.createElement('a')
- dlExportGeneList.setAttribute('href',exportGeneListURI)
- document.body.appendChild(dlExportGeneList)
- const date = new Date()
- dlExportGeneList.setAttribute('download',`exported_genelist_${''+date.getFullYear()+(date.getMonth()+1)+date.getDate()+'_'+date.getHours()+date.getMinutes()}.csv`)
- dlExportGeneList.click()
- document.body.removeChild(dlExportGeneList)
- })
- this.elGeneAdd.addEventListener('click',()=>{
- if(this.autocompleteSuggestions.length > 0 && this.elGeneInputBox.value.length >= MIN_CHAR)
- this.addGene(this.autocompleteSuggestions[0])
- })
-
- this.elGeneInputBox.addEventListener('dragenter',(ev)=>{
- this.elGeneInputBox.setAttribute('placeholder','Drop file here to be uploaded')
- })
-
- this.elGeneInputBox.addEventListener('dragleave',(ev)=>{
- this.elGeneInputBox.setAttribute('placeholder','Enter gene of interest ... ')
- })
-
- this.elGeneInputBox.addEventListener('drop',(ev)=>{
- ev.preventDefault()
- ev.stopPropagation()
- ev.stopImmediatePropagation()
- this.elGeneInputBox.setAttribute('placeholder','Enter gene of interest ... ')
- //ev.dataTransfer.files[0]
- })
-
- this.elGeneInputBox.addEventListener('dragover',(ev)=>{
- ev.preventDefault()
- ev.stopPropagation()
- ev.stopImmediatePropagation()
- })
-
- this.elGeneInputBox.addEventListener('keydown',(ev)=>{
- ev.stopPropagation()
- ev.stopImmediatePropagation()
- if(ev.key=='Enter') this.elGeneAdd.click()
- })
-
- Promise.all([
- this.loadExternalResources(),
- fetch(URL_BASE).then(txt=>txt.json())
- ])
- .then(arr=>{
- this.arrDict = arr[1]
-
- console.log('attaching autocomplete')
-
- this.autocompleteInput = new autoComplete({
- selector : this.elGeneInputBox,
- delay : 0,
- minChars : MIN_CHAR,
- cache : false,
- source : (term,suggest)=>{
- const searchTerm = new RegExp('^'+term,'gi')
- this.autocompleteSuggestions = this.arrDict.filter(dict=>searchTerm.test(dict))
- suggest(this.autocompleteSuggestions)
- },
- onSelect : (e,term,item)=>{
- this.addGene(term)
- }
- })
- })
- .catch(err=>{
- console.error('loading external resources failed ... ',err)
- // console.log('failed to fetch full list of genes... using limited list of genes instead ...',e)
- // this.arrDict = ["ADRA2A", "AVPR1B", "CHRM2", "CNR1", "CREB1", "CRH", "CRHR1", "CRHR2", "GAD2", "HTR1A", "HTR1B", "HTR1D", "HTR2A", "HTR3A", "HTR5A", "MAOA", "PDE1A", "SLC6A2", "SLC6A4", "SST", "TAC1", "TPH1", "GPR50", "CUX2", "TPH2"]
- })
- }
-
- loadExternalResources(){
- return new Promise((rs,rj)=>Promise.all([
- new Promise((resolve,reject)=>{
- this.autoCompleteCss = document.createElement('link')
- this.autoCompleteCss.type = 'text/css'
- this.autoCompleteCss.rel = 'stylesheet'
- this.autoCompleteCss.onload = () => resolve()
- this.autoCompleteCss.onerror = (e) => reject(e)
- this.autoCompleteCss.href = '/res/css/js-autocomplete.min.css'
- document.head.appendChild(this.autoCompleteCss)
- }),
- new Promise((resolve,reject)=>{
- this.autoCompleteJs = document.createElement('script')
- this.autoCompleteJs.onload = () => resolve()
- this.autoCompleteJs.onerror = (e) => reject(e)
- this.autoCompleteJs.src = '/res/js/js-autocomplete.min.js'
- document.head.appendChild(this.autoCompleteJs)
- })
- ])
- .then(()=>rs())
- .catch(e=>rj(e))
- )}
-
- unloadExternalResources(){
- document.head.removeChild(this.autoCompleteJs)
- document.head.removeChild(this.autoCompleteCss)
- }
-
- addGene(gene){
- const pill = document.createElement('dismissable-pill-card')
- pill.onRemove = (name) =>
- this.selectedGenes.splice(this.selectedGenes.indexOf(name),1)
-
- pill.name = gene
- this.rootChild.appendChild(pill)
- this.selectedGenes.push(gene)
- this.elGeneInputBox.value = ''
- this.elGeneInputBox.blur()
- this.elGeneInputBox.focus()
- }
- }
-
- class WebjugexSearchComponent extends HTMLElement{
- constructor(){
- super()
- this.template =
- `
-
- <div class = "row">
- <div class = "col-md-12">
- <small>
- Find a set of differentially expressed genes between two user defined volumes of interest based on JuBrain maps.
- The tool downloads expression values of user specified sets of genes from Allen Brain API.
- Then, it uses zscores to find which genes are expressed differentially between the user specified regions of interests.
- After the analysis is finished, the genes and their calculated p values are displayed. There is also an option of downloading the gene names and their p values
- and the roi coordinates used in the analysis.
- Please select two regions of interest, and at least one gene :
- </small>
- </div>
- <div class = "col-md-12">
- <hover-region-selector-card area1></hover-region-selector-card>
- </div>
- <div class = "col-md-12">
- <hover-region-selector-card area2></hover-region-selector-card>
- </div>
- <div class = "col-md-12">
- <div class = "input-group">
- <span class = "input-group-addon">
- Threshold
- </span>
- <input value = "0.20" class = "form-control" type = "range" min = "0" max = "1" step = "0.01" threshold />
- <span class = "input-group-addon" thresholdValue>
- 0.20
- </span>
- </div>
- <div class="input-group">
- <input type="checkbox" probemode /> Single Probe Mode
- </div>
- </div>
- <div class = "row">
- <div class = "col-md-12">
- <fzj-xg-webjugex-gene-card>
- </fzj-xg-webjugex-gene-card>
- </div>
- </div>
- <div class = "row">
- <div class = "col-md-12">
- <div class = "btn btn-default btn-block" analysisSubmit>
- Start differential analysis
- </div>
- </div>
- </div>
- `
- this.mouseEventSubscription = this.rootChild = this.threshold = this.elArea1 = this.elArea2 = null
- this.selectedGenes = []
- this.firstrender = true
-
- }
-
- connectedCallback(){
- if(this.firstrender){
- this.init()
- this.firstrender = false
- }
- }
-
- init(){
- // this.elTemplate = DOM_PARSER.parseFromString(this.template,'text/html')
- this.elTemplate = document.createElement('div')
- this.elTemplate.innerHTML = this.template
- this.appendChild(this.elTemplate)
-
- this.elArea1 = this.querySelector('hover-region-selector-card[area1]')
- this.elArea2 = this.querySelector('hover-region-selector-card[area2]')
- this.elArea1.listening = true
- this.elArea2.listening = false
- this.probemodeval = false
-
- this.elGenesInput = this.querySelector('fzj-xg-webjugex-gene-card')
-
- this.elAnalysisSubmit = this.querySelector('div[analysisSubmit]')
- this.elAnalysisSubmit.style.marginBottom = '20px'
- this.elAnalysisSubmit.addEventListener('click',()=>this.analysisGo())
-
- this.elThreshold = this.querySelector('input[threshold]')
- const elThresholdValue = this.querySelector('span[thresholdValue]')
- this.elThreshold.addEventListener('input',(ev)=> elThresholdValue.innerHTML = parseFloat(this.elThreshold.value).toFixed(2) )
-
- this.onViewerClick()
-
- window.pluginControl[PLUGIN_NAME].onShutdown(()=>{
- this.mouseEventSubscription.unsubscribe()
- })
- }
-
- onViewerClick(){
- this.mouseEventSubscription = window.viewerHandle.mouseEvent.filter(ev=>ev.eventName=='click').subscribe(ev=>{
- if(this.elArea1.listening && this.elArea2.listening){
- this.elArea1.listening = false
- }
- else if(this.elArea2.listening){
- this.elArea2.listening = false
- }
- else if(this.elArea1.listening){
- if(this.elArea2.selectedRegion == null){
- this.elArea1.listening = false
- this.elArea2.listening = true
- }
- else if(this.elArea2.selectedRegion != null){
- this.elArea1.listening = false
- }
- }
- })
- }
-
- analysisGo(){
- /* test for submit conditions */
- if(this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null || this.elGenesInput.selectedGenes.length < 1){
- const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
- container.appendChild(resultCard)
- let e = 'Error: We need '
- if(this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null) e += 'both areas to be defined and '
- if(this.elGenesInput.selectedGenes.length < 1) e += 'atleast one gene'
- else e = e.substr(0, 40)
- e += '.'
- resultCard.panelBody.innerHTML = e
- return
- }
- console.log(this.elArea1.selectedRegion,this.elArea2.selectedRegion,this.elArea1.selectedRegion.PMapURL,this.elArea2.selectedRegion.PMapURL,this.elThreshold.value,this.elGenesInput.selectedGenes)
- const region1 = Object.assign({},this.elArea1.selectedRegion,{url:this.elArea1.selectedRegion.PMapURL})
- const region2 = Object.assign({},this.elArea2.selectedRegion,{url:this.elArea2.selectedRegion.PMapURL})
- this.sendAnalysis({
- area1 : region1,
- area2 : region2,
- threshold : this.elThreshold.value,
- selectedGenes : this.elGenesInput.selectedGenes,
- mode : this.querySelector('input[probemode]').checked
- })
- }
-
- sendAnalysis(analysisInfo){
- /* to be overwritten by parent class */
- }
- }
-
- /* custom class for analysis-card */
- class WebJuGExAnalysisComponent extends HTMLElement{
- constructor(){
- super()
- this.template = ``
- this.analysisObj = {}
- this.status = 'pending'
- }
-
- connectedCallback(){
- this.render()
- this.panelHeader = this.querySelector('[panelHeader]')
- }
-
- render(){
-
- this.template =
- `
- <div class = "row">
- <div class="progress">
- <div class="progress-bar progress-bar-striped active" style="width:100%"></div>
- </div>
- </div>
- `
- this.innerHTML = this.template
- }
- }
-
-
- const searchCard = document.querySelector('fzj-xg-webjugex-search-card')
- const container = document.getElementById('fzj.xg.webjugex.container')
- const parseContentToCsv = (content)=>{
- const CSVContent = 'data:text/csv;charset=utf-8,'+content
- const CSVURI = encodeURI(CSVContent)
- const domDownload = document.createElement('a')
- domDownload.setAttribute('href',CSVURI)
- return domDownload
- }
- const createRow = ()=>{
- const domDownload = document.createElement('div')
- domDownload.style.display = 'flex'
- domDownload.style.flexDirection = 'row'
- const col1 = document.createElement('div')
- const col2 = document.createElement('div')
- col2.style.flex = col1.style.flex = '0 0 50%'
- domDownload.appendChild(col1)
- domDownload.appendChild(col2)
- return [domDownload,col1,col2]
- }
- /* custom class for analysis-card */
-
-
- class WebJuGExResultSuccessComponent extends HTMLElement{
- constructor(){
- super()
- this.template = ``
- this.resultObj = {}
- this.pvalString = ''
- this.areaString = ''
- this.status = 'pending'
- this.firstrender = true
- }
-
- connectedCallback(){
-
- if(this.firstrender){
- this.childRoot = document.createElement('div')
- this.appendChild(this.childRoot)
- this.render()
-
- this.panelHeader = this.childRoot.querySelector('[panelHeader]')
- this.panelBody = this.childRoot.querySelector('[panelBody]')
- this.panelHeader.addEventListener('click',()=>{
- this.uiTogglePanelBody()
- })
- this.firstrender = false
- }
- }
-
- uiTogglePanelBody(){
- if(/hidden/.test(this.panelBody.className)){
- this.panelBody.classList.remove('hidden')
- }else{
- this.panelBody.classList.add('hidden')
- }
- }
-
- render(){
- this.template =
- `
- <div class = "row">
- <div class = "panel panel-success">
- <div class = "btn btn-default btn-block panel-heading" panelHeader>
- <span class="glyphicon glyphicon-ok"></span> Request completed! <u> Details below.</u>
- </div>
- <div class = "panel-body hidden" panelBody>
- </div>
- <div class = "panel-footer hidden" panelFooter>
- </div>
- </div>
- </div>
- `
- this.childRoot.innerHTML = this.template
- }
- }
-
- class WebJuGExResultFailureComponent extends HTMLElement{
- constructor(){
- super()
- this.template = ``
- this.resultObj = {}
- this.pvalString = ''
- this.areaString = ''
- this.status = 'pending'
- this.firstrender = true
- }
-
- connectedCallback(){
- // const shadowRoot = this.attachShadow({mode:'open'})
- if(this.firstrender){
-
- this.childRoot = document.createElement('div')
- this.appendChild(this.childRoot)
- this.render()
-
- this.panelHeader = this.childRoot.querySelector('[panelHeader]')
- this.panelBody = this.childRoot.querySelector('[panelBody]')
- this.panelHeader.addEventListener('click',()=>{
- this.uiTogglePanelBody()
- })
- this.firstrender = false
- }
- }
-
- uiTogglePanelBody(){
- if(/hidden/.test(this.panelBody.className)){
- this.panelBody.classList.remove('hidden')
- }else{
- this.panelBody.classList.add('hidden')
- }
- }
-
- render(){
- this.template =
- `
- <div class = "row">
- <div class = "panel panel-danger">
- <div class = "btn btn-default btn-block panel-heading" panelHeader>
- <span class="glyphicon glyphicon-remove"></span> Error. Check below.
- </div>
- <div class = "panel-body hidden" panelBody>
- </div>
- <div class = "panel-footer hidden" panelFooter>
- </div>
- </div>
- </div>
- `
- this.childRoot.innerHTML = this.template
- }
- }
-
- searchCard.sendAnalysis = (analysisInfo) => {
-
- console.log(analysisInfo)
-
- const analysisCard = document.createElement('fzj-xg-webjugex-analysis-card')
- analysisCard.analysisObj = analysisInfo
- container.appendChild(analysisCard)
- const headers = new Headers()
- headers.append('Content-Type','application/json')
- const request = new Request(`${URL_BASE}/jugex`,{
- method : 'POST',
- headers : headers,
- mode : 'cors',
- body : JSON.stringify(analysisInfo)
- })
- fetch(request)
- .then(resp => {
- if (resp.ok){
- return Promise.resolve(resp)
- }
- else {
- return new Promise((resolve,reject)=>{
- resp.text()
- .then(text=>reject(text))
- })
- }
- })
- .then(resp=>resp.text())
- .then(text=>{
- container.removeChild(analysisCard)
- const resultCard = document.createElement('fzj-xg-webjugex-result-success-card')
- container.appendChild(resultCard)
- const date = new Date()
- const dateDownload = ''+date.getFullYear()+(date.getMonth()+1)+date.getDate()+'_'+date.getHours()+':'+date.getMinutes()
- resultCard.panelHeader.innerHTML += '('+dateDownload+')'
- resultCard.resultObj = JSON.parse(text)
- extension = createRow()
- extension[0].style.order = -1
- if(resultCard.resultObj.length == 3){
- extension[1].innerHTML = 'Probe ids'
- }
- else if(resultCard.resultObj.length == 2){
- extension[1].innerHTML = 'Gene Symbol'
- }
- extension[1].style.fontWeight = 900
- extension[2].innerHTML = 'Pval'
- extension[2].style.fontWeight = 900
- resultCard.panelBody.style.maxHeight = '400px'
- resultCard.panelBody.style.overflowY = 'scroll'
- resultCard.panelBody.appendChild(extension[0])
- let count = 0
- for(let key in resultCard.resultObj[1]){
- count = count+1
- }
- for(let key in resultCard.resultObj[1]){
- resultCard.pvalString += [key, resultCard.resultObj[1][key]].join(',') + '\n'
- }
- if (count < 2){
- for (let key in resultCard.resultObj[1]){
- extension = createRow()
- extension[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key])*1000) : 1000
- extension[1].innerHTML = key
- extension[2].innerHTML = resultCard.resultObj[1][key]
- resultCard.panelBody.appendChild(extension[0])
- }
- }
- else{
- let v = 0
- for(let key in resultCard.resultObj[1]){
- extension = createRow()
- extension[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key])*1000) : 1000
- if(v == 0 || v == count-1){
- extension[1].innerHTML = key
- extension[2].innerHTML = resultCard.resultObj[1][key]
- }
- else if (v == 1 || v == 2){
- extension[1].innerHTML = '...'
- extension[2].innerHTML = '...'
- }
- v = v+1
- resultCard.panelBody.appendChild(extension[0])
- }
- }
- resultCard.areaString = 'ROI, x, y, z, '
- if(resultCard.resultObj.length == 3){
- resultCard.areaString += resultCard.resultObj[2]+'\n'
- }
- else{
- for(let key in resultCard.resultObj[1]){
- resultCard.areaString += key+','
- }
- resultCard.areaString = resultCard.areaString.slice(0, -1)
- resultCard.areaString += '\n'
- }
- for(let key in resultCard.resultObj[0]){
- for(let i in resultCard.resultObj[0][key]){
- resultCard.areaString += key+','+resultCard.resultObj[0][key][i]['xyz'].join(',')+','+resultCard.resultObj[0][key][i]['winsorzed_mean']+'\n'
- }
- }
-
- const domDownloadPVal = parseContentToCsv(resultCard.pvalString)
- domDownloadPVal.innerHTML = 'Download Pvals of genes ('+dateDownload+')'
- domDownloadPVal.setAttribute('download','PVal.csv')
- resultCard.panelBody.append(domDownloadPVal)
- linebreak = document.createElement("br")
- resultCard.panelBody.append(linebreak)
- const domDownloadArea = parseContentToCsv(resultCard.areaString)
- domDownloadArea.innerHTML = 'Download sample coordinates ('+dateDownload+')'
- domDownloadArea.setAttribute('download',`SampleCoordinates.csv`)
- domDownloadArea.style.order = -3
- resultCard.panelBody.append(domDownloadArea)
- })
- .catch(e=>{
- console.log('Here 2')
- container.removeChild(analysisCard)
- const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
- container.appendChild(resultCard)
- console.log('error',e)
- resultCard.panelBody.innerHTML = e
- })
- }
-
- customElements.define('hover-region-selector-card', HoverRegionSelectorComponent)
- customElements.define('fzj-xg-webjugex-analysis-card',WebJuGExAnalysisComponent)
-
- customElements.define('fzj-xg-webjugex-result-success-card',WebJuGExResultSuccessComponent)
- customElements.define('fzj-xg-webjugex-result-failure-card',WebJuGExResultFailureComponent)
-
- customElements.define('dismissable-pill-card',DismissablePill)
-
- customElements.define('fzj-xg-webjugex-gene-card',WebjugexGeneComponent)
- customElements.define('fzj-xg-webjugex-search-card',WebjugexSearchComponent)
-})()
diff --git a/src/plugin_examples/jugex/script.js b/src/plugin_examples/jugex/script.js
deleted file mode 100644
index 8286ab8d7fdc64d014348e94f1c1f2c0b579b17a..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/script.js
+++ /dev/null
@@ -1,838 +0,0 @@
-(() => {
- // // const landmarkService = interactiveViewer.experimental.landmarkService
- const code = () => {
-
- const register = (tag,classname)=>{
-
- try{
- customElements.define(tag, classname)
- }catch(e){
- console.warn(tag + ' already registered',e)
- }
- }
-
-
- const basePath = 'res/plugins/'
-
- const backendBasePath = 'http://examcopedia.club:8003/'
-
- /* components like this are reusable. */
- class HoverRegionSelectorComponent extends HTMLElement {
-
- constructor() {
- super()
-
- this.template =
- `
- <div class = "input-group">
- <input class = "form-control" placeholder = "" readonly = "readonly" type = "text" region>
- <span class = "input-group-btn">
- <div class = "btn btn-default" editRegion>
- <span class = "glyphicon glyphicon-edit"></span>
- </div>
- </span>
- </div>
- `
- this.listening = true
- this.selectedRegion = null
- this.shutdownHooks = []
- }
-
- connectNehubaHooks() {
- const mouseOverNehuba = window.interactiveViewer.viewerHandle.mouseOverNehuba
- .subscribe(ev => {
- if(!this.listening)
- return
-
- this.selectedRegion = ev ? ev : null
- this.render()
- })
-
- this.shutdownHooks.push(() => mouseOverNehuba.unsubscribe())
- }
-
- disconnectedCallback() {
- // disconnected call back gets called multiple times, each time user chooses to
- this.shutdownHooks.forEach(fn => fn())
- }
-
- connectedCallback() {
- // const shadowRoot = this.attachShadow({mode:'open'})
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
-
- this.rootChild = document.createElement('div')
- this.appendChild(this.rootChild)
- this.connectNehubaHooks()
- this.render()
- }
-
- render() {
- this.rootChild.innerHTML = this.template
- // console.log(this.selectedRegion)
- this.rootChild.querySelector('input[region]').value = this.selectedRegion ? this.selectedRegion.name : ''
- this.rootChild.querySelector('div[editRegion]').addEventListener('click', () => {
- this.rootChild.querySelector('input[region]').value = ''
- this.selectedRegion = null
- this.listening = true
- })
- }
- }
-
- register('hover-region-selector-card',HoverRegionSelectorComponent)
-
- /* reusable pill components */
- class DismissablePill extends HTMLElement {
- constructor() {
- super()
- this.name = ''
- this.template = ``
- }
-
- render() {
- this.template =
- `
- <span class = "label label-default">
- <span pillName>${this.name}</span>
- <span class = "glyphicon glyphicon-remove" pillRemove></span>
- </span>
- `
- }
-
- connectedCallback() {
- // const shadowRoot = this.attachShadow({mode:'open'})
-
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
-
- this.render()
- this.innerHTML = this.template
- const removePill = this.querySelector('span[pillRemove]')
- removePill.addEventListener('click', () => {
- this.onRemove(this.name)
- this.remove()
- })
- }
-
- onRemove(name) { }
- }
- register('dismissable-pill-card', DismissablePill)
-
- class WebJuGExGeneComponent extends HTMLElement {
- constructor() {
- super()
- this.selectedGenes = []
- this.arrDict = []
- this.autocompleteSuggestions = []
- this.template =
- `
- <div class = "input-group">
- <input geneInputBox type = "text" class = "form-control" placeholder = "Enter gene of interest ... ">
- <input geneImportInput class="hidden" type="file">
- <span class = "input-group-btn">
- <div geneAdd class = "btn btn-default" title = "Add a gene">Add</div>
- <div geneImport class = "btn btn-default" title = "Import a CSV file">Import</div>
- <div geneExport class = "btn btn-default" title = "Export selected genes into a csv file">Export</div>
- </span>
- </div>
- `
- }
-
- connectedCallback() {
- // const shadowRoot = this.attachShadow({mode:'open'})
- this.rootChild = document.createElement('div')
- this.rootChild.innerHTML = this.template
- this.appendChild(this.rootChild)
-
- this.config()
- this.init()
- }
-
- config() {
- this.MINCHAR = 1
- }
-
- init() {
- this.elGeneInputBox = this.rootChild.querySelector('input[geneInputBox]')
- this.elGeneImportInput = this.rootChild.querySelector('input[geneImportInput]')
- this.elGeneAdd = this.rootChild.querySelector('div[geneAdd]')
- this.elGeneImport = this.rootChild.querySelector('div[geneImport]')
- this.elGeneExport = this.rootChild.querySelector('div[geneExport]')
-
- const importGeneList = (file) => {
- const csvReader = new FileReader()
- csvReader.onload = (ev) => {
- const csvRaw = ev.target.result
- this.selectedGenes.splice(0, this.selectedGenes.length)
- csvRaw.split(/\r|\r\n|\n|\t|\,|\;/).forEach(gene => {
- if (gene.length > 0)
- this.addGene(gene)
- })
- }
- csvReader.readAsText(file, 'utf-8')
- }
- this.elGeneImportInput.addEventListener('change', (ev) => {
- importGeneList(ev.target.files[0])
- })
- this.elGeneImport.addEventListener('click', () => {
- this.elGeneImportInput.click()
- })
- this.elGeneExport.addEventListener('click', () => {
- const exportGeneList = 'data:text/csv;charset=utf-8,' + this.selectedGenes.join(',')
- const exportGeneListURI = encodeURI(exportGeneList)
- const dlExportGeneList = document.createElement('a')
- dlExportGeneList.setAttribute('href', exportGeneListURI)
- document.body.appendChild(dlExportGeneList)
- const date = new Date()
- dlExportGeneList.setAttribute('download', `exported_genelist_${'' + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + '_' + date.getHours() + date.getMinutes()}.csv`)
- dlExportGeneList.click()
- document.body.removeChild(dlExportGeneList)
- })
- this.elGeneAdd.addEventListener('click', () => {
- if (this.autocompleteSuggestions.length > 0 && this.elGeneInputBox.value.length >= this.MINCHAR)
- this.addGene(this.autocompleteSuggestions[0])
- })
-
- this.elGeneInputBox.addEventListener('dragenter', (ev) => {
- this.elGeneInputBox.setAttribute('placeholder', 'Drop file here to be uploaded')
- })
-
- this.elGeneInputBox.addEventListener('dragleave', (ev) => {
- this.elGeneInputBox.setAttribute('placeholder', 'Enter gene of interest ... ')
- })
-
- this.elGeneInputBox.addEventListener('drop', (ev) => {
- ev.preventDefault()
- ev.stopPropagation()
- ev.stopImmediatePropagation()
- this.elGeneInputBox.setAttribute('placeholder', 'Enter gene of interest ... ')
- //ev.dataTransfer.files[0]
- })
-
- this.elGeneInputBox.addEventListener('dragover', (ev) => {
- ev.preventDefault()
- ev.stopPropagation()
- ev.stopImmediatePropagation()
- })
-
- this.elGeneInputBox.addEventListener('keydown', (ev) => {
- ev.stopPropagation()
- ev.stopImmediatePropagation()
- if (ev.key == 'Enter') this.elGeneAdd.click()
- })
-
- this.loadExternalResources()
- fetch(backendBasePath).then(txt => txt.json())
- .then(json => {
- this.arrDict = json
- })
- .catch(err => {
- console.log('failed to fetch full list of genes... using limited list of genes instead ...', e)
- this.arrDict = ["ADRA2A", "AVPR1B", "CHRM2", "CNR1", "CREB1", "CRH", "CRHR1", "CRHR2", "GAD2", "HTR1A", "HTR1B", "HTR1D", "HTR2A", "HTR3A", "HTR5A", "MAOA", "PDE1A", "SLC6A2", "SLC6A4", "SST", "TAC1", "TPH1", "GPR50", "CUX2", "TPH2"]
- })
- }
-
- loadExternalResources() {
- this.autoCompleteCss = document.createElement('link')
- this.autoCompleteCss.type = 'text/css'
- this.autoCompleteCss.rel = 'stylesheet'
- this.autoCompleteCss.href = basePath + 'js-autocomplete.min.css'
-
- this.autoCompleteJs = document.createElement('script')
- this.autoCompleteJs.onload = () => {
- /* append autocomplete here */
- this.autocompleteInput = new autoComplete({
- selector: this.elGeneInputBox,
- delay: 0,
- minChars: this.MINCHAR,
- cache: false,
- source: (term, suggest) => {
- const searchTerm = new RegExp('^' + term, 'gi')
- this.autocompleteSuggestions = this.arrDict.filter(dict => searchTerm.test(dict))
- suggest(this.autocompleteSuggestions)
- },
- onSelect: (e, term, item) => {
- this.addGene(term)
- }
- })
- }
- this.autoCompleteJs.src = basePath + 'js-autocomplete.min.js'
-
- document.head.appendChild(this.autoCompleteJs)
- document.head.appendChild(this.autoCompleteCss)
- }
-
- addGene(gene) {
- const pill = document.createElement('dismissable-pill-card')
- pill.onRemove = (name) =>
- this.selectedGenes.splice(this.selectedGenes.indexOf(name), 1)
- pill.name = gene
- this.rootChild.appendChild(pill)
- this.selectedGenes.push(gene)
- this.elGeneInputBox.value = ''
- this.elGeneInputBox.blur()
- this.elGeneInputBox.focus()
- }
- }
-
- register('fzj-xg-webjugex-gene-card', WebJuGExGeneComponent)
-
- class WebJuGExSearchComponent extends HTMLElement {
- constructor() {
- super()
- this.template = `
- <div>
- <div class = "col-md-12">
- <small>
- Find a set of differentially expressed genes between two user defined volumes of interest based on JuBrain maps.
- The tool downloads expression values of user specified sets of genes from Allen Brain API.
- Then, it uses zscores to find which genes are expressed differentially between the user specified regions of interests.
- After the analysis is finished, the genes and their calculated p values are displayed. There is also an option of downloading the gene names and their p values
- and the roi coordinates used in the analysis.
- Please select two regions of interest, and at least one gene :
- </small>
- </div>
- <div class = "col-md-12">
- <hover-region-selector-card area1>
- </hover-region-selector-card>
- </div>
- <div class = "col-md-12">
- <hover-region-selector-card area2>
- </hover-region-selector-card>
- </div>
- <div class = "col-md-12">
- <div class = "input-group">
- <span class = "input-group-addon">
- Threshold
- </span>
- <input value = "0.20" class = "form-control" type = "range" min = "0" max = "1" step = "0.01" threshold \>
- <span class = "input-group-addon" thresholdValue>
- 0.20
- </span>
- </div>
- </div>
- <div class = "col-md-12">
- <div class="input-group">
- <input id = "fzj-hb-jugex-singleprobe" name = "fzj-hb-jugex-singleprobe" type="checkbox" probemode>
- <label for = "fzj-hb-jugex-singleprobe">Single Probe Mode</label>
- </div>
- </div>
- <div class = "col-md-12">
- <div class = "input-group">
- <input name = "fzj-hb-jugex-hemisphere" type = "radio" id = "fzj-hb-jugex-hemisphere-lh" value = "left-hemisphere" checked/>
- <label for = "fzj-hb-jugex-hemisphere-lh">Left Hemisphere</label>
- </div>
- <div class = "input-group">
- <input name = "fzj-hb-jugex-hemisphere" type = "radio" id = "fzj-hb-jugex-hemisphere-rh" value = "right-hemisphere"/>
- <label for = "fzj-hb-jugex-hemisphere-rh">Right Hemisphere</label>
- </div>
- </div>
- <div>
- <div class = "col-md-12">
- <fzj-xg-webjugex-gene-card>
- </fzj-xg-webjugex-gene-card>
- </div>
- </div>
- <div>
- <div class = "col-md-12">
- <div class = "btn btn-default btn-block" analysisSubmit>
- Start differential analysis
- </div>
- </div>
- </div>
- `
- this.mouseEventSubscription = this.rootChild = this.threshold = this.elArea1 = this.elArea2 = null
- this.selectedGenes = []
-
- this.datasets = []
-
- this.datasetSub = window.interactiveViewer.metadata.datasetsBSubject.subscribe(datasets=>{
- this.datasets = datasets
- })
-
-
- // const createsth = ()=>{
- // const div1 = document.createElement('div')
- // const child1 = document.createElement('div')
- // const child2 = document.createElement('div')
-
- // child1.innerHTML = 'helo'
- // child2.innerHTML = 'world'
- // div1.appendChild(child1)
- // div1.appendChild(child2)
-
- // return [div1,child1,child2]
- // }
- // const container = document.getElementById('fzj.xg.webjugex.container')
-
- // const div2 = createsth()
- // container.appendChild(div2[0])
-
- }
-
- connectedCallback() {
-
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
-
- // const shadowRoot = this.attachShadow({mode:'open'})
- this.rootChild = document.createElement('div')
- this.rootChild.innerHTML = this.template
- this.appendChild(this.rootChild)
-
- /* init */
- this.init()
-
- /* attach click listeners */
- this.onViewerClick()
-
- }
-
- init() {
- this.elArea1 = this.rootChild.querySelector('hover-region-selector-card[area1]')
- this.elArea2 = this.rootChild.querySelector('hover-region-selector-card[area2]')
- this.elArea1.listening = true
- this.elArea2.listening = false
- this.probemodeval = false
-
- this.elGenesInput = this.rootChild.querySelector('fzj-xg-webjugex-gene-card')
-
- this.elAnalysisSubmit = this.rootChild.querySelector('div[analysisSubmit]')
- this.elAnalysisSubmit.style.marginBottom = '20px'
- this.elAnalysisSubmit.addEventListener('click', () => {
- this.analysisGo()
- })
-
- this.elThreshold = this.rootChild.querySelector('input[threshold]')
- const elThresholdValue = this.rootChild.querySelector('span[thresholdValue]')
- this.elThreshold.addEventListener('input', (ev) => {
- elThresholdValue.innerHTML = parseFloat(this.elThreshold.value).toFixed(2)
- })
- }
-
- onViewerClick() {
- this.mouseEventSubscription = window.interactiveViewer.viewerHandle.mouseEvent
- .subscribe(ev => {
- if(ev.eventName !== 'click') return
- if (this.elArea1.listening && this.elArea2.listening) {
- this.elArea1.listening = false
- }
- else if (this.elArea2.listening) {
- this.elArea2.listening = false
- }
- else if (this.elArea1.listening) {
- if (this.elArea2.selectedRegion == null) {
- this.elArea1.listening = false
- this.elArea2.listening = true
- }
- else if (this.elArea2.selectedRegion != null) {
- this.elArea1.listening = false
- }
- }
- })
-
- }
-
- analysisGo() {
- /* test for submit conditions */
- const hemisphere = this.rootChild.querySelector('input[name="fzj-hb-jugex-hemisphere"]:checked').value
-
- if (this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null || this.elGenesInput.selectedGenes.length < 1) {
- const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
-
- const container = document.getElementById('fzj.xg.webjugex.container')
-
- container.appendChild(resultCard)
- let e = 'Error: We need '
- if (this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null) e += 'both areas to be defined and '
- if (this.elGenesInput.selectedGenes.length < 1) e += 'atleast one gene'
- else e = e.substr(0, 40)
- e += '.'
- resultCard.panelBody.innerHTML = e
- return
- }
-
-
- console.log(this.elArea1.selectedRegion.name,
- this.elArea2.selectedRegion.name,
- this.elArea1.selectedRegion.PMapURL,
- this.elArea2.selectedRegion.PMapURL,
- this.elThreshold.value,
- this.elGenesInput.selectedGenes,
- hemisphere)
-
- const getPmap = (name) => {
- if(name == 'AStr (Amygdala)') throw Error('AStr (Amygdala) has not yet been implemented in MNI152')
-
-
-
- const dataset = this.datasets.find(dataset => dataset.type === 'Cytoarchitectonic Probabilistic Map' && dataset.regionName[0].regionName === name)
- const url = dataset.files[0].url
- console.log('getpmap', url)
- const host = 'https://neuroglancer-dev.humanbrainproject.org'
- // const host = 'http://offline-neuroglancer:80'
- const mni152url = `${host}/precomputed/JuBrain/v2.2c/PMaps/MNI152/${url.substring(url.lastIndexOf('/') + 1).replace('.nii',hemisphere == 'left-hemisphere' ? '_l.nii' : '_r.nii')}`
- console.log('MNI152 PMap',mni152url)
- if (dataset) { return mni152url } else { throw new Error('could not find PMap') }
- }
-
- const newArea1 = {
- name: this.elArea1.selectedRegion.name,
- PMapURL: getPmap(this.elArea1.selectedRegion.name)
- }
- const newArea2 = {
- name: this.elArea2.selectedRegion.name,
- PMapURL: getPmap(this.elArea2.selectedRegion.name)
- }
- console.log('fixed loop reference',
- newArea1.name,
- newArea2.name,
- newArea1.PMapURL,
- newArea2.PMapURL,
- this.elThreshold.value,
- this.elGenesInput.selectedGenes)
-
- this.sendAnalysis({
- area1: newArea1,
- area2: newArea2,
- threshold: this.elThreshold.value,
- selectedGenes: this.elGenesInput.selectedGenes,
- mode: this.rootChild.querySelector('input[probemode]').checked
- })
- }
-
- sendAnalysis(analysisInfo) {
-
- const analysisCard = document.createElement('fzj-xg-webjugex-analysis-card')
- analysisCard.analysisObj = analysisInfo
-
- const container = document.getElementById('fzj.xg.webjugex.container')
-
- container.appendChild(analysisCard)
- const headers = new Headers()
- headers.append('Content-Type', 'application/json')
- const request = new Request(backendBasePath + 'jugex', {
- method: 'POST',
- headers: headers,
- mode: 'cors',
- body: JSON.stringify(analysisInfo)
- })
- fetch(request)
- .then(resp => {
- if (resp.ok) {
- return Promise.resolve(resp)
- }
- else {
- return new Promise((resolve, reject) => {
- resp.text()
- .then(text => reject(text))
- })
- }
- })
- .then(resp => resp.text())
- .then(text => {
-
- const createRow = () => {
- const domDownload = document.createElement('div')
- domDownload.style.display = 'flex'
- domDownload.style.flexDirection = 'row'
- const col1 = document.createElement('div')
- const col2 = document.createElement('div')
- col2.style.flex = col1.style.flex = '0 0 50%'
- domDownload.appendChild(col1)
- domDownload.appendChild(col2)
- return [domDownload, col1, col2]
- }
-
- container.removeChild(analysisCard)
- const resultCard = document.createElement('fzj-xg-webjugex-result-success-card')
- container.appendChild(resultCard)
- const date = new Date()
- const dateDownload = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + '_' + date.getHours() + ':' + date.getMinutes()
- resultCard.panelHeader.innerHTML += '(' + dateDownload + ')'
- resultCard.resultObj = JSON.parse(text)
- const extension = createRow()
- extension[0].style.order = -1
- if (resultCard.resultObj.length == 3) {
- extension[1].innerHTML = 'Probe ids'
- }
- else if (resultCard.resultObj.length == 2) {
- extension[1].innerHTML = 'Gene Symbol'
- }
- extension[1].style.fontWeight = 900
- extension[2].innerHTML = 'Pval'
- extension[2].style.fontWeight = 900
- resultCard.panelBody.style.maxHeight = '400px'
- resultCard.panelBody.style.overflowY = 'scroll'
- resultCard.panelBody.appendChild(extension[0])
- let count = 0
- for (let key in resultCard.resultObj[1]) {
- count = count + 1
- }
- for (let key in resultCard.resultObj[1]) {
- resultCard.pvalString += [key, resultCard.resultObj[1][key]].join(',') + '\n'
- }
- if (count < 2) {
- for (let key in resultCard.resultObj[1]) {
- const extension1 = createRow()
- extension1[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key]) * 1000) : 1000
- extension1[1].innerHTML = key
- extension1[2].innerHTML = resultCard.resultObj[1][key]
- resultCard.panelBody.appendChild(extension1[0])
- }
- }
- else {
- let v = 0
- for (let key in resultCard.resultObj[1]) {
- const extension2 = createRow()
- extension2[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key]) * 1000) : 1000
- if (v == 0 || v == count - 1) {
- extension2[1].innerHTML = key
- extension2[2].innerHTML = resultCard.resultObj[1][key]
- }
- else if (v == 1 || v == 2) {
- extension2[1].innerHTML = '...'
- extension2[2].innerHTML = '...'
- }
- v = v + 1
- resultCard.panelBody.appendChild(extension2[0])
- }
- }
- resultCard.areaString = 'ROI, x, y, z, '
- if (resultCard.resultObj.length == 3) {
- resultCard.areaString += resultCard.resultObj[2] + '\n'
- }
- else {
- for (let key in resultCard.resultObj[1]) {
- resultCard.areaString += key + ','
- }
- resultCard.areaString = resultCard.areaString.slice(0, -1)
- resultCard.areaString += '\n'
- }
-
- /* injected to add landmarks */
- const newLandmarks = []
-
- for (let key in resultCard.resultObj[0]) {
- for (let i in resultCard.resultObj[0][key]) {
- resultCard.areaString += key + ',' + resultCard.resultObj[0][key][i]['xyz'].join(',') + ',' + resultCard.resultObj[0][key][i]['winsorzed_mean'] + '\n'
-
- const pos = resultCard.resultObj[0][key][i]['xyz']
- const newLandmark = {
- pos : pos,
- id : pos.join('_'),
- properties : pos.join('_'),
- hover:false
- }
- newLandmarks.push(newLandmark)
- // landmarkService.addLandmark(newLandmark)
- }
- }
-
- // newLandmarks.forEach((lm,idx)=>landmarkService.TEMP_parseLandmarkToVtk(lm,idx))
-
- /* end */
-
- const domDownloadPVal = parseContentToCsv(resultCard.pvalString)
- domDownloadPVal.innerHTML = 'Download Pvals of genes (' + dateDownload + ')'
- domDownloadPVal.setAttribute('download', 'PVal.csv')
- resultCard.panelBody.append(domDownloadPVal)
- const linebreak = document.createElement("br")
- resultCard.panelBody.append(linebreak)
- const domDownloadArea = parseContentToCsv(resultCard.areaString)
- domDownloadArea.innerHTML = 'Download sample coordinates (' + dateDownload + ')'
- domDownloadArea.setAttribute('download', `SampleCoordinates.csv`)
- domDownloadArea.style.order = -3
- resultCard.panelBody.append(domDownloadArea)
- })
- .catch(e => {
- console.log('Here 2')
- container.removeChild(analysisCard)
- const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
- container.appendChild(resultCard)
- console.log('error', e)
- resultCard.panelBody.innerHTML = e
- })
-
- };
- }
-
- register('fzj-xg-webjugex-search-card', WebJuGExSearchComponent)
-
- /* custom class for analysis-card */
- class WebJuGExAnalysisComponent extends HTMLElement {
- constructor() {
- super()
- this.template = ``
- this.analysisObj = {}
- this.status = 'pending'
- }
-
- connectedCallback() {
-
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
-
- // const shadowRoot = this.attachShadow({mode:'open'})
- this.childRoot = document.createElement('div')
- this.appendChild(this.childRoot)
- this.render()
- this.panelHeader = this.childRoot.querySelector('[panelHeader]')
- }
-
- render() {
-
- this.template =
- `
- <div>
- <div class="progress">
- <div class="progress-bar progress-bar-striped active" style="width:100%"></div>
- </div>
- </div>
- `
- this.childRoot.innerHTML = this.template
- }
- }
-
- register('fzj-xg-webjugex-analysis-card', WebJuGExAnalysisComponent)
-
- const parseContentToCsv = (content) => {
- const CSVContent = 'data:text/csv;charset=utf-8,' + content
- const CSVURI = encodeURI(CSVContent)
- const domDownload = document.createElement('a')
- domDownload.setAttribute('href', CSVURI)
- return domDownload
- }
- /* custom class for analysis-card */
-
-
- class WebJuGExResultSuccessComponent extends HTMLElement {
- constructor() {
- super()
- this.template = ``
- this.resultObj = {}
- this.pvalString = ''
- this.areaString = ''
- this.status = 'pending'
- }
-
- connectedCallback() {
-
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
-
- // const shadowRoot = this.attachShadow({mode:'open'})
- this.childRoot = document.createElement('div')
- this.appendChild(this.childRoot)
- this.render()
-
- this.panelHeader = this.childRoot.querySelector('[panelHeader]')
- this.panelBody = this.childRoot.querySelector('[panelBody]')
- this.panelHeader.addEventListener('click', () => {
- this.uiTogglePanelBody()
- })
- }
-
- uiTogglePanelBody() {
- if (/hidden/.test(this.panelBody.className)) {
- this.panelBody.classList.remove('hidden')
- } else {
- this.panelBody.classList.add('hidden')
- }
- }
-
- render() {
- this.template =
- `
- <div>
- <div class = "panel panel-success">
- <div class = "btn btn-default btn-block panel-heading" panelHeader>
- <span class="glyphicon glyphicon-ok"></span> Request completed! <u> Details below.</u>
- </div>
- <div class = "panel-body hidden" panelBody>
- </div>
- <div class = "panel-footer hidden" panelFooter>
- </div>
- </div>
- </div>
- `
- this.childRoot.innerHTML = this.template
- }
- }
-
- class WebJuGExResultFailureComponent extends HTMLElement {
- constructor() {
- super()
- this.template = ``
- this.resultObj = {}
- this.pvalString = ''
- this.areaString = ''
- this.status = 'pending'
- }
-
- connectedCallback() {
-
- while(this.lastChild){
- this.removeChild(this.lastChild)
- }
-
- // const shadowRoot = this.attachShadow({mode:'open'})
- this.childRoot = document.createElement('div')
- this.appendChild(this.childRoot)
- this.render()
-
- this.panelHeader = this.childRoot.querySelector('[panelHeader]')
- this.panelBody = this.childRoot.querySelector('[panelBody]')
- this.panelHeader.addEventListener('click', () => {
- this.uiTogglePanelBody()
- })
- }
-
- uiTogglePanelBody() {
- if (/hidden/.test(this.panelBody.className)) {
- this.panelBody.classList.remove('hidden')
- } else {
- this.panelBody.classList.add('hidden')
- }
- }
-
- render() {
- this.template =
- `
- <div>
- <div class = "panel panel-danger">
- <div class = "btn btn-default btn-block panel-heading" panelHeader>
- <span class="glyphicon glyphicon-remove"></span> Error. Check below.
- </div>
- <div class = "panel-body hidden" panelBody>
- </div>
- <div class = "panel-footer hidden" panelFooter>
- </div>
- </div>
- </div>
- `
- this.childRoot.innerHTML = this.template
- }
- }
-
- register('fzj-xg-webjugex-result-success-card', WebJuGExResultSuccessComponent)
- register('fzj-xg-webjugex-result-failure-card', WebJuGExResultFailureComponent)
-
- interactiveViewer.pluginControl['fzj.hb.jugex'].onShutdown(() => {
- console.log('shutting down fzj jugex')
- // landmarkService.TEMP_clearVtkLayers()
- interactiveViewer.pluginControl.unloadExternalLibraries(['webcomponentsLite'])
- })
-
- }
- interactiveViewer.pluginControl.loadExternalLibraries(['webcomponentsLite'])
- .then(() => code())
- .catch(console.warn.bind(this))
-})()
-
-
diff --git a/src/plugin_examples/jugex/template.html b/src/plugin_examples/jugex/template.html
deleted file mode 100644
index 5ab759f6278401a09cf337d7630b076175f92a68..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/template.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div id = "fzj.xg.webjugex.container">
- <fzj-xg-webjugex-search-card>
- </fzj-xg-webjugex-search-card>
-</div>
-<style>
-fzj-xg-webjugex-search-card
-{
- display:inline-block;
-}
-</style>
\ No newline at end of file
diff --git a/src/plugin_examples/mime/manifest.json b/src/plugin_examples/mime/manifest.json
deleted file mode 100644
index 382561433f73bc0a0a8c95cbbeb1fde823173b05..0000000000000000000000000000000000000000
--- a/src/plugin_examples/mime/manifest.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "name": "fzj.xg.mime",
- "displayName":"Mime",
- "type": "plugin",
- "templateURL": "http://localhost:10080/mime/template.html",
- "scriptURL": "http://localhost:10080/mime/script.js",
- "initState" : {
- "test" : "value"
- }
-}
\ No newline at end of file
diff --git a/src/plugin_examples/mime/script.js b/src/plugin_examples/mime/script.js
deleted file mode 100644
index 0d56eb9d27a36eed725b43e67b484c353f04996e..0000000000000000000000000000000000000000
--- a/src/plugin_examples/mime/script.js
+++ /dev/null
@@ -1,52 +0,0 @@
-(() => {
-
- console.log('works?',interactiveViewer.pluginControl['fzj.xg.mime'].initState)
-
- interactiveViewer.pluginControl['fzj.xg.mime'].setInitManifestUrl('http://localhost:10080/test.json')
-
- let ref
- const appendNewScript = url => new Promise((resolve,reject) => {
- const el = document.createElement('script')
- el.setAttribute('src', url)
- el.onload = resolve
- el.onerror = reject
- document.head.appendChild(el)
- })
- appendNewScript('https://www.gstatic.com/firebasejs/5.4.0/firebase-app.js')
- .then(() => appendNewScript('https://www.gstatic.com/firebasejs/5.4.0/firebase-database.js'))
- .then(() => {
- const config = {
- apiKey: "AIzaSyBq4fJdgbys419up-pHaXecXv5PWNCeWKc",
- authDomain: "websocket-40105.firebaseapp.com",
- databaseURL: "https://websocket-40105.firebaseio.com",
- projectId: "websocket-40105",
- storageBucket: "websocket-40105.appspot.com",
- messagingSenderId: "643659482319"
- }
- firebase.initializeApp(config)
-
- const database = firebase.database()
- ref = database.ref('perspectiveState')
- })
- .catch(e => console.warn('promise all error', e))
-
- try{
- nehubaViewer.navigationState.perspectiveOrientation
- .throttleTime(16)
- .subscribe(quat => {
- if(ref){
- ref.set(Array.from(quat))
- }
- })
- }catch(e){
-
- }
-
- // let num = 1
- // const animate = () => {
- // viewer.perspectiveNavigationState.pose.orientation.restoreState([0,0,0,num])
- // requestAnimationFrame(animate)
- // }
- // requestAnimationFrame(animate)
-
-})()
\ No newline at end of file
diff --git a/src/plugin_examples/mime/template.html b/src/plugin_examples/mime/template.html
deleted file mode 100644
index 3b12464976a5fd9e07d67dd7d5cf4f0f10188410..0000000000000000000000000000000000000000
--- a/src/plugin_examples/mime/template.html
+++ /dev/null
@@ -1 +0,0 @@
-TEST
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/app.js b/src/plugin_examples/newWebJugex/app.js
deleted file mode 100644
index 0b30c38e52d682453b475283a0d490b906377ebf..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/app.js
+++ /dev/null
@@ -1,2 +0,0 @@
-webpackJsonp([0],{AjZS:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\ndiv.v-pill-container[data-v-94d8f66e]\n{\n display:inline-block;\n white-space: nowrap;\n margin:5px;\n padding:0.2em 0.6em;\n border-radius: 0.8em;\n}\ndiv.v-pill-container[data-v-94d8f66e]\n{\n cursor: default;\n -webkit-transition: all 300ms;\n transition: all 300ms;\n background-color:rgba(50,50,50,0.2);\n}\ndiv.v-pill-container[data-v-94d8f66e]:hover\n{\n background-color:rgba(150,150,150,0.2);\n}\nspan.v-pill-name[data-v-94d8f66e]\n{\n cursor: default;\n display:inline-block;\n}\nspan.v-pill-remove[data-v-94d8f66e]\n{\n cursor: default;\n display:inline-block;\n}\nspan.v-pill-remove[data-v-94d8f66e]:hover\n{\n font-weight: 900;\n color:rgba(200,30,30,1);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/pill.vue"],names:[],mappings:";AAuBA;;EAEA,qBAAA;EACA,oBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,gBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,oCAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,gBAAA;EACA,qBAAA;CACA;AACA;;EAEA,gBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,iBAAA;EACA,wBAAA;CACA",file:"pill.vue",sourcesContent:['<template>\n<div @click.stop.prevent = "$emit(\'select-pill\')" class = "v-pill-container">\n <span class = "v-pill-name">{{ name }}</span>\n <span v-if = "closable" @click.stop.prevent = "$emit(\'remove-pill\')" class = "v-pill-remove">×</span>\n</div>\n</template>\n\n<script>\nmodule.exports = {\n props: {\n name: {\n type: String,\n default: \'Untitled\'\n },\n closable: {\n type: Boolean,\n default: true\n }\n }\n}\n<\/script>\n\n<style scoped>\ndiv.v-pill-container\n{\n display:inline-block;\n white-space: nowrap;\n margin:5px;\n padding:0.2em 0.6em;\n border-radius: 0.8em;\n}\n\ndiv.v-pill-container\n{\n cursor: default;\n transition: all 300ms;\n background-color:rgba(50,50,50,0.2);\n}\n\ndiv.v-pill-container:hover\n{\n background-color:rgba(150,150,150,0.2);\n}\n\nspan.v-pill-name\n{\n cursor: default;\n display:inline-block;\n}\nspan.v-pill-remove\n{\n cursor: default;\n display:inline-block;\n}\n\nspan.v-pill-remove:hover\n{\n font-weight: 900;\n color:rgba(200,30,30,1);\n}\n</style>\n'],sourceRoot:""}])},B6Kj:function(n,e,t){var o=t("RpWc");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("9aafbbb6",o,!1,{})},CJjv:function(n,e,t){var o=t("n8WV");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("6decef42",o,!1,{})},E8lD:function(n,e,t){var o=t("fKQA");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("041522c3",o,!1,{})},"KU0+":function(n,e,t){var o=t("R6Sg");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("c9be660c",o,!1,{})},NHnr:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=t("lRwf"),i=t.n(o),a={props:{top:Number,left:Number},data:function(){return{show:{type:Boolean,default:!1}}},computed:{contentContainerLeft:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?Math.min(this.left,this.$refs.screen.clientWidth-this.$refs.content.clientWidth)+"px":"0px"},contentContainerTop:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?Math.min(this.top,this.$refs.screen.clientHeight-this.$refs.content.clientHeight)+"px":"0px"},contentContainerWidth:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?"auto":"100%"},contentContainerHeight:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?"auto":"100%"}}},r=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",[t("div",{staticClass:"v-modal-container"},[t("div",{ref:"screen",staticClass:"v-modal-screen",on:{click:function(e){n.$emit("close-modal")}}}),n._v(" "),t("div",{staticClass:"v-modal-content-container",style:{top:n.contentContainerTop,left:n.contentContainerLeft,width:n.contentContainerWidth,height:n.contentContainerHeight}},[t("div",{ref:"content",staticClass:"v-modal-content"},[t("div",{staticClass:"v-modal-header"},[n._t("v-modal-header")],2),n._v(" "),t("div",{staticClass:"v-modal-body"},[n._t("v-modal-body")],2),n._v(" "),t("div",{staticClass:"v-modal-footer"},[n._t("v-modal-footer")],2)])])])])};r._withStripped=!0;var s={render:r,staticRenderFns:[]},A=s;var l=!1;var c=t("VU/8")(a,A,!1,function(n){l||t("CJjv")},"data-v-0eaeaf66",null);c.options.__file="src/components/modal.vue";var d=c.exports,p=t("u0wG"),u={props:{placeholder:{type:String,default:"Start typing to search ..."},rawarray:{type:Array,default:function(){return[]}},rendermax:{type:Number,default:25}},data:function(){return{showSuggestions:!1,typedText:"",highlightIndex:0}},methods:{selectSlice:function(n){this.$emit("selectslice",n)},hitEnter:function(){switch(event.key){case"ArrowDown":this.highlightIndex+=1;break;case"Escape":this.$refs.input.blur();break;case"ArrowUp":this.highlightIndex-=1,this.highlightIndex<=0&&(this.highlightIndex+=this.filteredArray.length);break;case"Enter":var n=this.filteredArray.slice();if(n.length>0){this.typedText="";var e=document.querySelector(":focus");e&&e.blur(),this.selectSlice(n[0])}break;default:this.highlightIndex=0}}},computed:{rawArrayLowerCase:function(){return this.rawarray.map(function(n){return n.toLowerCase()})},typedTextLowerCase:function(){return this.typedText.toLowerCase()},filteredArray:function(){var n=this,e=new RegExp(this.typedText,"i"),t=this.rawarray.find(function(e){return e.toLowerCase()===n.typedTextLowerCase}),o=this.rawarray.filter(function(n){return e.test(n)}).filter(function(e){return e.toLowerCase()!==n.typedTextLowerCase}).filter(function(e,t){return t<=n.rendermax});return t?[t].concat(o.slice(0,o.length>=this.rendermax?o.length-1:o.length)):o}}},h=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"autocomplete-container"},[t("input",{directives:[{name:"model",rawName:"v-model",value:n.typedText,expression:"typedText"}],ref:"input",attrs:{type:"text",placeholder:n.placeholder},domProps:{value:n.typedText},on:{keydown:function(e){return e.stopPropagation(),n.hitEnter(e)},focus:function(e){n.showSuggestions=!0},blur:function(e){n.showSuggestions=!1},input:function(e){e.target.composing||(n.typedText=e.target.value)}}}),n._v(" "),t("transition",{attrs:{name:"fade"}},[n.showSuggestions?t("div",{staticClass:"autocomplete-suggestion-container"},n._l(n.filteredArray,function(e,o){return t("div",{key:o,staticClass:"autocomplete-suggestions",class:{active:n.highlightIndex%n.filteredArray.length===o},on:{mousedown:function(t){n.selectSlice(e)}}},[n._v("\n "+n._s(e)+"\n ")])})):n._e()])],1)};h._withStripped=!0;var m={render:h,staticRenderFns:[]},f=m;var v=!1;var g=t("VU/8")(u,f,!1,function(n){v||t("B6Kj")},"data-v-8351e810",null);g.options.__file="src/components/autocomplete.vue";var C=g.exports,b={props:{value:{type:String,default:"default value"},copyable:{type:Boolean,default:!0}},data:function(){return{copiedFlag:!1,timeoutRef:0,copyBtnShown:!1}},methods:{copyToClipBoard:function(){var n=this;this.copiedFlag=!0,this.timeoutRef&&clearTimeout(this.timeoutRef),setTimeout(function(){n.copiedFlag=!1,n.timeoutRef=0},2e3),this.$refs.inputEl.focus(),this.$refs.inputEl.select(),document.execCommand("copy",!1)},methodGetCopyText:function(){return this.copiedFlag?"Copied!":"Copy"}}},x=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"copy-field-root"},[t("input",{ref:"inputEl",attrs:{readonly:"",type:"text"},domProps:{value:n.value}}),n._v(" "),t("div",{attrs:{hidden:!n.copyable},on:{click:function(e){return e.stopPropagation(),n.copyToClipBoard(e)}}},[n._v(n._s(n.methodGetCopyText())+"\n ")])])};x._withStripped=!0;var E={render:x,staticRenderFns:[]},y=E;var w=!1;var k=t("VU/8")(b,y,!1,function(n){w||t("E8lD")},null,null);k.options.__file="src/components/copyfield.vue";var B=k.exports,_={props:{collapsedHeight:{type:Number,default:25}},data:function(){return{collapsed:{type:Boolean,default:!0},actualHeight:{type:Number,default:25}}},mounted:function(){this.actualHeight=this.$refs.readmoreContentContainer.clientHeight},methods:{toggle:function(){this.collapsed=!this.collapsed}},computed:{computedHeight:function(){return(this.collapsed?this.collapsedHeight:this.actualHeight)+"px"}}},$=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"readmore-container"},[t("div",{staticClass:"readmore-content",style:{height:n.computedHeight}},[t("div",{ref:"readmoreContentContainer"},[n._t("readmoreContent")],2)]),n._v(" "),t("div",{staticClass:"readmore-sliver",on:{click:n.toggle}},[n.collapsed?n._t("resizeSliverContentCollapsed"):n._e(),n._v(" "),n.collapsed?n._e():n._t("resizeSliverContentShown")],2)])};$._withStripped=!0;var S={render:$,staticRenderFns:[]},T=S;var R=!1;var j=t("VU/8")(_,T,!1,function(n){R||t("KU0+")},"data-v-92448f0a",null);j.options.__file="src/components/readmore.vue";var z=j.exports,H={props:{flag:{type:Boolean,default:!0}},methods:{toggleCheckBox:function(n){this.$emit("togglecheckbox",n)}},computed:{getDialTransform:function(){return{transform:this.flag?"translateX(0)":"translateX(1.6em)"}}}},U=function(){var n=this.$createElement,e=this._self._c||n;return e("div",{staticClass:"checkbox-root",class:this.flag?"checkbox-on":"checkbox-off",on:{click:this.toggleCheckBox}},[e("div",{staticClass:"checkbox-dial",style:this.getDialTransform})])};U._withStripped=!0;var F={render:U,staticRenderFns:[]},L=F;var W=!1;var D=t("VU/8")(H,L,!1,function(n){W||t("uPPG")},"data-v-8903635a",null);D.options.__file="src/components/checkbox.vue";var I=D.exports;i.a.config.productionTip=!1,i.a.component("vue-modal",d),i.a.component("vue-pill",p.default),i.a.component("vue-autocomplete",C),i.a.component("vue-copyfield",B),i.a.component("vue-readmore",z),i.a.component("vue-checkbox",I)},R6Sg:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.readmore-content[data-v-92448f0a]\n{\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n overflow-y : hidden;\n}\n.readmore-sliver[data-v-92448f0a]\n{\n min-height: 0.5em;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background-color: rgba(128,128,128,0.2);\n}\n.readmore-sliver[data-v-92448f0a]:hover\n{\n -webkit-transform: translateY(-2px);\n transform: translateY(-2px);\n background-color: rgba(128,128,128,0.4);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/readmore.vue"],names:[],mappings:";AAiDA;;EAEA,6BAAA;EAAA,qBAAA;EACA,oBAAA;CACA;AACA;;EAEA,kBAAA;EACA,6BAAA;EAAA,qBAAA;EACA,wCAAA;CACA;AACA;;EAEA,oCAAA;UAAA,4BAAA;EACA,wCAAA;CACA",file:"readmore.vue",sourcesContent:['<template>\n<div class = "readmore-container">\n <div :style = "{ height : computedHeight }" class = "readmore-content">\n <div ref = "readmoreContentContainer">\n <slot name = "readmoreContent"></slot>\n </div>\n </div>\n <div @click = "toggle" class = "readmore-sliver">\n <slot v-if = "collapsed" name = "resizeSliverContentCollapsed">\n </slot>\n <slot v-if = "!collapsed" name = "resizeSliverContentShown">\n </slot>\n </div>\n</div>\n</template>\n<script>\nexport default {\n props: {\n collapsedHeight: {\n type: Number,\n default: 25\n }\n },\n data: () => ({\n collapsed: {\n type: Boolean,\n default: true\n },\n actualHeight: {\n type: Number,\n default: 25\n }\n }),\n mounted: function () {\n this.actualHeight = this.$refs.readmoreContentContainer.clientHeight\n },\n methods: {\n toggle: function () {\n this.collapsed = !this.collapsed\n }\n },\n computed: {\n computedHeight: function () {\n return `${this.collapsed ? this.collapsedHeight : this.actualHeight}px`\n }\n }\n}\n<\/script>\n<style scoped>\n.readmore-content\n{\n transition: all 0.3s;\n overflow-y : hidden;\n}\n.readmore-sliver\n{\n min-height: 0.5em;\n transition: all 0.3s;\n background-color: rgba(128,128,128,0.2);\n}\n.readmore-sliver:hover\n{\n transform: translateY(-2px);\n background-color: rgba(128,128,128,0.4);\n}\n</style>\n'],sourceRoot:""}])},RQup:function(n,e){n.exports={props:{name:{type:String,default:"Untitled"},closable:{type:Boolean,default:!0}}}},RpWc:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,'\ndiv.autocomplete-container[data-v-8351e810]\n{\n cursor:default;\n}\n.autocomplete-suggestions[data-v-8351e810]\n{\n width:100%;\n display:block;\n padding:0.1em 0.3em;\n -webkit-transition: all 200ms;\n transition: all 200ms;\n background-color:rgba(230,230,230,0.5);\n}\n.autocomplete-suggestions.active[data-v-8351e810]\n{\n background-color:rgba(230,230,230,0.95);\n}\n.autocomplete-suggestions[data-v-8351e810]:hover\n{\n background-color:rgba(230,230,230,0.95);\n}\ndiv.autocomplete-container:focus-within .autocomplete-suggestions[data-v-8351e810]\n{\n display: block;\n}\ndiv.autocomplete-suggestion-container[data-v-8351e810]\n{\n width: 100%;\n max-height:10em;\n overflow-y:auto;\n overflow-x:hidden;\n z-index:2;\n}\ninput[type="text"][data-v-8351e810]\n{\n width:100%;\n height:100%;\n z-index:1;\n}\n',"",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/autocomplete.vue"],names:[],mappings:";AAoGA;;EAEA,eAAA;CACA;AAEA;;EAEA,WAAA;EACA,cAAA;EACA,oBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,uCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,eAAA;CACA;AAEA;;EAEA,YAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;CACA;AACA;;EAEA,WAAA;EACA,YAAA;EACA,UAAA;CACA",file:"autocomplete.vue",sourcesContent:['<template>\n<div class = "autocomplete-container">\n <input\n ref = "input"\n @keydown.stop = "hitEnter"\n type = "text"\n @focus = "showSuggestions = true"\n @blur = "showSuggestions = false"\n v-model = "typedText"\n :placeholder = "placeholder"/>\n <transition name = "fade">\n <div v-if = "showSuggestions" class = "autocomplete-suggestion-container">\n <div\n @mousedown="selectSlice(item)"\n class = "autocomplete-suggestions"\n :class = "{active : ((highlightIndex % filteredArray.length) === index)}"\n v-bind:key = "index"\n v-for = "(item,index) in filteredArray">\n {{ item }}\n </div>\n </div>\n </transition>\n</div>\n</template>\n\n<script>\nexport default {\n props: {\n placeholder: {\n type: String,\n default: \'Start typing to search ...\'\n },\n rawarray: {\n type: Array,\n default: () => ([])\n },\n rendermax: {\n type: Number,\n default: 25\n }\n },\n data: () => ({\n showSuggestions: false,\n typedText: \'\',\n highlightIndex: 0\n }),\n methods: {\n selectSlice: function (item) {\n this.$emit(\'selectslice\', item)\n },\n hitEnter: function () {\n switch (event.key) {\n case \'ArrowDown\':\n this.highlightIndex += 1\n break\n case \'Escape\':\n this.$refs.input.blur()\n break\n case \'ArrowUp\':\n this.highlightIndex -= 1\n if (this.highlightIndex <= 0) this.highlightIndex += this.filteredArray.length\n break\n case \'Enter\':\n const array = this.filteredArray.slice()\n if (array.length > 0) {\n this.typedText = \'\'\n const el = document.querySelector(\':focus\')\n if (el) el.blur()\n this.selectSlice(array[0])\n }\n break\n default:\n this.highlightIndex = 0\n break\n }\n }\n },\n computed: {\n rawArrayLowerCase: function () {\n return this.rawarray.map(item => item.toLowerCase())\n },\n typedTextLowerCase: function () {\n return this.typedText.toLowerCase()\n },\n filteredArray: function () {\n const regex = new RegExp(this.typedText, \'i\')\n const completeMatch = this.rawarray.find(item => item.toLowerCase() === this.typedTextLowerCase)\n const othermatches = this.rawarray\n .filter(item => regex.test(item))\n .filter(item => item.toLowerCase() !== this.typedTextLowerCase)\n .filter((_, idx) => idx <= this.rendermax)\n return completeMatch\n ? [completeMatch].concat(othermatches.slice(0, othermatches.length >= this.rendermax ? othermatches.length - 1 : othermatches.length))\n : othermatches\n }\n }\n}\n<\/script>\n\n<style scoped>\ndiv.autocomplete-container\n{\n cursor:default;\n}\n\n.autocomplete-suggestions\n{\n width:100%;\n display:block;\n padding:0.1em 0.3em;\n transition: all 200ms;\n background-color:rgba(230,230,230,0.5);\n}\n\n.autocomplete-suggestions.active\n{\n background-color:rgba(230,230,230,0.95);\n}\n\n.autocomplete-suggestions:hover\n{\n background-color:rgba(230,230,230,0.95);\n}\n\ndiv.autocomplete-container:focus-within .autocomplete-suggestions\n{\n display: block;\n}\n\ndiv.autocomplete-suggestion-container\n{\n width: 100%;\n max-height:10em;\n overflow-y:auto;\n overflow-x:hidden;\n z-index:2;\n}\ninput[type="text"]\n{\n width:100%;\n height:100%;\n z-index:1;\n}\n</style>\n'],sourceRoot:""}])},ck25:function(n,e,t){"use strict";var o=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"v-pill-container",on:{click:function(e){e.stopPropagation(),e.preventDefault(),n.$emit("select-pill")}}},[t("span",{staticClass:"v-pill-name"},[n._v(n._s(n.name))]),n._v(" "),n.closable?t("span",{staticClass:"v-pill-remove",on:{click:function(e){e.stopPropagation(),e.preventDefault(),n.$emit("remove-pill")}}},[n._v("×")]):n._e()])};o._withStripped=!0;var i={render:o,staticRenderFns:[]};e.a=i},fKQA:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.copy-field-root\n{\n width: 100%;\n white-space: nowrap;\n}\n.copy-field-root *\n{\n color:black\n}\n.copy-field-root > input\n{\n width : 100%;\n height:2.0em;\n display: inline-block;\n vertical-align : middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position : relative;\n\n border : solid 1px rgba(128,128,128,0.6);\n z-index: 8;\n}\n.copy-field-root > div:not([hidden])\n{\n position : relative;\n z-index: 9;\n cursor:default;\n display: inline-block;\n -webkit-box-sizing:border-box;\n box-sizing:border-box;\n margin : 0.2em;\n height : 1.6em;\n margin-left:-4em;\n font-size:100%;\n vertical-align : middle;\n text-align: center;\n font-size:0.9em;\n padding : 0.2em;\n\n color:rgba(0,0,0,0.8);\n border : solid 1px rgba(0,0,0,0.5);\n\n background-color:rgba(230,230,230,0.9);\n}\n.copy-field-root > div:hover\n{\n background-color:rgba(240,240,240,1.0);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/copyfield.vue"],names:[],mappings:";AAiDA;;EAEA,YAAA;EACA,oBAAA;CACA;AAEA;;EAEA,WAAA;CACA;AAEA;;EAEA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,wBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oBAAA;;EAEA,yCAAA;EACA,WAAA;CACA;AAEA;;EAEA,oBAAA;EACA,WAAA;EACA,eAAA;EACA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,wBAAA;EACA,mBAAA;EACA,gBAAA;EACA,gBAAA;;EAEA,sBAAA;EACA,mCAAA;;EAEA,uCAAA;CACA;AAEA;;EAEA,uCAAA;CACA",file:"copyfield.vue",sourcesContent:['<template>\n<div class = "copy-field-root">\n <input ref = "inputEl" readonly v-bind:value = "value" type = "text" />\n <div\n v-bind:hidden = "!copyable"\n @click.stop = "copyToClipBoard">{{ methodGetCopyText() }}\n </div>\n</div>\n</template>\n\n<script>\nexport default {\n props: {\n value: {\n type: String,\n default: \'default value\'\n },\n copyable: {\n type: Boolean,\n default: true\n }\n },\n data: () => ({\n copiedFlag: false,\n timeoutRef: 0,\n copyBtnShown: false\n }),\n methods: {\n copyToClipBoard: function () {\n this.copiedFlag = true\n if (this.timeoutRef) {\n clearTimeout(this.timeoutRef)\n }\n setTimeout(() => {\n this.copiedFlag = false\n this.timeoutRef = 0\n }, 2000)\n\n this.$refs.inputEl.focus()\n this.$refs.inputEl.select()\n document.execCommand(\'copy\', false)\n },\n methodGetCopyText: function () {\n return this.copiedFlag ? \'Copied!\' : \'Copy\'\n }\n }\n}\n<\/script>\n<style>\n.copy-field-root\n{\n width: 100%;\n white-space: nowrap;\n}\n\n.copy-field-root *\n{\n color:black\n}\n\n.copy-field-root > input\n{\n width : 100%;\n height:2.0em;\n display: inline-block;\n vertical-align : middle;\n box-sizing: border-box;\n position : relative;\n\n border : solid 1px rgba(128,128,128,0.6);\n z-index: 8;\n}\n\n.copy-field-root > div:not([hidden])\n{\n position : relative;\n z-index: 9;\n cursor:default;\n display: inline-block;\n box-sizing:border-box;\n margin : 0.2em;\n height : 1.6em;\n margin-left:-4em;\n font-size:100%;\n vertical-align : middle;\n text-align: center;\n font-size:0.9em;\n padding : 0.2em;\n\n color:rgba(0,0,0,0.8);\n border : solid 1px rgba(0,0,0,0.5);\n\n background-color:rgba(230,230,230,0.9);\n}\n\n.copy-field-root > div:hover\n{\n background-color:rgba(240,240,240,1.0);\n}\n</style>\n'],sourceRoot:""}])},lRwf:function(n,e){n.exports=Vue},n8WV:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.v-modal-container[data-v-0eaeaf66]\n{\n top: 0;\n width:100%;\n height:100%;\n position : absolute;\n z-index:999;\n}\n.v-modal-screen[data-v-0eaeaf66]\n{\n top : 0;\n position : absolute;\n width:100%;\n height:100%;\n background-color:rgba(30,30,30,0.2);\n}\n.v-modal-content-container[data-v-0eaeaf66]\n{\n top : 0;\n position : absolute;\n display : -webkit-box;\n display : -ms-flexbox;\n display : flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: center;\n align-content: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n\n pointer-events: none;\n}\n.v-modal-content[data-v-0eaeaf66]\n{\n -webkit-box-flex : 0;\n -ms-flex : 0 0 auto;\n flex : 0 0 auto;\n pointer-events: all;\n}\n\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/modal.vue"],names:[],mappings:";AA4DA;;EAEA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,YAAA;CACA;AACA;;EAEA,QAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;CACA;AAEA;;EAEA,QAAA;EACA,oBAAA;EACA,sBAAA;EAAA,sBAAA;EAAA,eAAA;EACA,0BAAA;MAAA,uBAAA;UAAA,oBAAA;EACA,2BAAA;MAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,wBAAA;;EAEA,qBAAA;CACA;AACA;;EAEA,qBAAA;MAAA,oBAAA;UAAA,gBAAA;EACA,oBAAA;CACA",file:"modal.vue",sourcesContent:['<template>\n<div>\n <div class = "v-modal-container">\n <div\n ref = "screen"\n v-on:click = "$emit(\'close-modal\')"\n class = "v-modal-screen">\n </div>\n <div\n v-bind:style = "{top:contentContainerTop,left:contentContainerLeft,width:contentContainerWidth,height:contentContainerHeight,}"\n class = "v-modal-content-container">\n <div\n ref = "content"\n class = "v-modal-content">\n <div class = "v-modal-header">\n <slot name = "v-modal-header">\n </slot>\n </div>\n <div class = "v-modal-body">\n <slot name = "v-modal-body">\n </slot>\n </div>\n <div class = "v-modal-footer">\n <slot name = "v-modal-footer">\n </slot>\n </div>\n </div>\n </div>\n </div>\n</div>\n</template>\n<script>\nexport default {\n props: {\n top: Number,\n left: Number\n },\n data: () => ({\n show: {\n type: Boolean,\n default: false\n }\n }),\n computed: {\n contentContainerLeft: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.left, this.$refs.screen.clientWidth - this.$refs.content.clientWidth) + \'px\' : `0px`\n },\n contentContainerTop: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.top, this.$refs.screen.clientHeight - this.$refs.content.clientHeight) + \'px\' : `0px`\n },\n contentContainerWidth: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? \'auto\' : `100%`\n },\n contentContainerHeight: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? \'auto\' : `100%`\n }\n }\n}\n<\/script>\n<style scoped>\n.v-modal-container\n{\n top: 0;\n width:100%;\n height:100%;\n position : absolute;\n z-index:999;\n}\n.v-modal-screen\n{\n top : 0;\n position : absolute;\n width:100%;\n height:100%;\n background-color:rgba(30,30,30,0.2);\n}\n\n.v-modal-content-container\n{\n top : 0;\n position : absolute;\n display : flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n\n pointer-events: none;\n}\n.v-modal-content\n{\n flex : 0 0 auto;\n pointer-events: all;\n}\n\n</style>\n'],sourceRoot:""}])},"nFT+":function(n,e,t){var o=t("AjZS");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("12958e8c",o,!1,{})},u0wG:function(n,e,t){"use strict";var o=t("RQup"),i=t.n(o),a=t("ck25"),r=!1;var s=function(n){r||t("nFT+")},A=t("VU/8")(i.a,a.a,!1,s,"data-v-94d8f66e",null);A.options.__file="src/components/pill.vue",e.default=A.exports},uPPG:function(n,e,t){var o=t("vLWt");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("1c6ceeff",o,!1,{})},vLWt:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.checkbox-root[data-v-8903635a]\n{\n height: 2em;\n width: 3.6em;\n display: inline-block;\n border-radius: 1em;\n overflow: hidden;\n padding: 0.2em;\n -webkit-box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n.checkbox-on[data-v-8903635a]\n{\n background-color: rgba(0, 150, 0, 0.4);\n}\n.checkbox-off[data-v-8903635a]\n{\n background-color: rgba(128, 128, 128, 0.4);\n}\n.checkbox-dial[data-v-8903635a]\n{\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n display: inline-block;\n width: 1.6em;\n height: 100%;\n background-color:white;\n border-radius: 1em;\n -webkit-box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/checkbox.vue"],names:[],mappings:";AAoCA;;EAEA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;EACA,kEAAA;UAAA,0DAAA;EACA,+BAAA;UAAA,uBAAA;EACA,6BAAA;EAAA,qBAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,2CAAA;CACA;AAEA;;EAEA,6BAAA;EAAA,qBAAA;EACA,sBAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,4DAAA;UAAA,oDAAA;CACA",file:"checkbox.vue",sourcesContent:["<template>\n<div\n @click = \"toggleCheckBox\"\n :class = \"flag ? 'checkbox-on' : 'checkbox-off'\"\n class = \"checkbox-root\">\n <div\n :style = \"getDialTransform\"\n class = \"checkbox-dial\">\n </div>\n</div>\n</template>\n<script>\nexport default {\n props: {\n flag: {\n type: Boolean,\n default: true\n }\n },\n methods: {\n toggleCheckBox: function (event) {\n this.$emit('togglecheckbox', event)\n }\n },\n computed: {\n getDialTransform: function () {\n return {\n transform: this.flag\n ? 'translateX(0)'\n : 'translateX(1.6em)'\n }\n }\n }\n}\n<\/script>\n<style scoped>\n.checkbox-root\n{\n height: 2em;\n width: 3.6em;\n display: inline-block;\n border-radius: 1em;\n overflow: hidden;\n padding: 0.2em;\n box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n transition: all 0.5s;\n}\n\n.checkbox-on\n{\n background-color: rgba(0, 150, 0, 0.4);\n}\n\n.checkbox-off\n{\n background-color: rgba(128, 128, 128, 0.4);\n}\n\n.checkbox-dial\n{\n transition: all 0.2s;\n display: inline-block;\n width: 1.6em;\n height: 100%;\n background-color:white;\n border-radius: 1em;\n box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n}\n</style>\n"],sourceRoot:""}])}},["NHnr"]);
-//# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/app.js.map b/src/plugin_examples/newWebJugex/app.js.map
deleted file mode 100644
index e38712e57f7d691a70b0b6fb742ec537c0d022d8..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/app.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./src/components/pill.vue?058a","webpack:///./src/components/autocomplete.vue?d5dc","webpack:///./src/components/modal.vue?b3b0","webpack:///./src/components/copyfield.vue?5b43","webpack:///./src/components/readmore.vue?f84b","webpack:///src/components/modal.vue","webpack:///./src/components/modal.vue?3efc","webpack:///./src/components/modal.vue","webpack:///src/components/autocomplete.vue","webpack:///./src/components/autocomplete.vue?220c","webpack:///./src/components/autocomplete.vue","webpack:///src/components/copyfield.vue","webpack:///./src/components/copyfield.vue?d3b4","webpack:///./src/components/copyfield.vue","webpack:///src/components/readmore.vue","webpack:///./src/components/readmore.vue?fad6","webpack:///./src/components/readmore.vue","webpack:///src/components/checkbox.vue","webpack:///./src/components/checkbox.vue?0818","webpack:///./src/components/checkbox.vue","webpack:///./src/main.js","webpack:///./src/components/readmore.vue?2a65","webpack:///src/components/pill.vue","webpack:///./src/components/autocomplete.vue?905f","webpack:///./src/components/pill.vue?c6c2","webpack:///./src/components/copyfield.vue?23c7","webpack:///external \"Vue\"","webpack:///./src/components/modal.vue?2409","webpack:///./src/components/pill.vue?5a83","webpack:///./src/components/pill.vue","webpack:///./src/components/checkbox.vue?c5e5","webpack:///./src/components/checkbox.vue?1579"],"names":["module","exports","__webpack_require__","push","i","version","sources","names","mappings","file","sourcesContent","sourceRoot","content","locals","modal","props","top","Number","left","data","show","type","Boolean","default","computed","contentContainerLeft","this","$refs","screen","Math","min","clientWidth","contentContainerTop","clientHeight","contentContainerWidth","contentContainerHeight","render","_vm","_h","$createElement","_c","_self","staticClass","ref","on","click","$event","$emit","_v","style","width","height","_t","_withStripped","esExports","staticRenderFns","components_modal","disposed","Component","normalizeComponent","ssrContext","options","__file","src_components_modal","autocomplete","placeholder","String","rawarray","Array","rendermax","showSuggestions","typedText","highlightIndex","methods","selectSlice","item","hitEnter","event","key","input","blur","filteredArray","length","array","slice","el","document","querySelector","rawArrayLowerCase","map","toLowerCase","typedTextLowerCase","_this","regex","RegExp","completeMatch","find","othermatches","filter","test","_","idx","concat","autocomplete_render","directives","name","rawName","value","expression","attrs","domProps","keydown","stopPropagation","focus","target","composing","_l","index","class","active","mousedown","_s","_e","autocomplete_esExports","components_autocomplete","autocomplete_disposed","autocomplete_Component","autocomplete_normalizeComponent","src_components_autocomplete","copyfield","copyable","copiedFlag","timeoutRef","copyBtnShown","copyToClipBoard","clearTimeout","setTimeout","inputEl","select","execCommand","methodGetCopyText","copyfield_render","readonly","hidden","copyfield_esExports","components_copyfield","copyfield_disposed","copyfield_Component","copyfield_normalizeComponent","src_components_copyfield","readmore","collapsedHeight","collapsed","actualHeight","mounted","readmoreContentContainer","toggle","computedHeight","readmore_render","readmore_esExports","components_readmore","readmore_disposed","readmore_Component","readmore_normalizeComponent","src_components_readmore","components_checkbox","flag","toggleCheckBox","getDialTransform","transform","checkbox_render","checkbox_esExports","selectortype_template_index_0_src_components_checkbox","checkbox_disposed","checkbox_Component","checkbox_normalizeComponent","src_components_checkbox","external__Vue__default","a","config","productionTip","component","pill","closable","preventDefault","__webpack_exports__","Vue","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_94d8f66e_hasScoped_true_transformToRequire_video_src_poster_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_pill_vue__","__vue_styles__","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_pill_vue___default"],"mappings":"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","file":"static/js/app.js","sourcesContent":["exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\ndiv.v-pill-container[data-v-94d8f66e]\\n{\\n display:inline-block;\\n white-space: nowrap;\\n margin:5px;\\n padding:0.2em 0.6em;\\n border-radius: 0.8em;\\n}\\ndiv.v-pill-container[data-v-94d8f66e]\\n{\\n cursor: default;\\n -webkit-transition: all 300ms;\\n transition: all 300ms;\\n background-color:rgba(50,50,50,0.2);\\n}\\ndiv.v-pill-container[data-v-94d8f66e]:hover\\n{\\n background-color:rgba(150,150,150,0.2);\\n}\\nspan.v-pill-name[data-v-94d8f66e]\\n{\\n cursor: default;\\n display:inline-block;\\n}\\nspan.v-pill-remove[data-v-94d8f66e]\\n{\\n cursor: default;\\n display:inline-block;\\n}\\nspan.v-pill-remove[data-v-94d8f66e]:hover\\n{\\n font-weight: 900;\\n color:rgba(200,30,30,1);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/pill.vue\"],\"names\":[],\"mappings\":\";AAuBA;;EAEA,qBAAA;EACA,oBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,gBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,oCAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,gBAAA;EACA,qBAAA;CACA;AACA;;EAEA,gBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,iBAAA;EACA,wBAAA;CACA\",\"file\":\"pill.vue\",\"sourcesContent\":[\"<template>\\n<div @click.stop.prevent = \\\"$emit('select-pill')\\\" class = \\\"v-pill-container\\\">\\n <span class = \\\"v-pill-name\\\">{{ name }}</span>\\n <span v-if = \\\"closable\\\" @click.stop.prevent = \\\"$emit('remove-pill')\\\" class = \\\"v-pill-remove\\\">×</span>\\n</div>\\n</template>\\n\\n<script>\\nmodule.exports = {\\n props: {\\n name: {\\n type: String,\\n default: 'Untitled'\\n },\\n closable: {\\n type: Boolean,\\n default: true\\n }\\n }\\n}\\n</script>\\n\\n<style scoped>\\ndiv.v-pill-container\\n{\\n display:inline-block;\\n white-space: nowrap;\\n margin:5px;\\n padding:0.2em 0.6em;\\n border-radius: 0.8em;\\n}\\n\\ndiv.v-pill-container\\n{\\n cursor: default;\\n transition: all 300ms;\\n background-color:rgba(50,50,50,0.2);\\n}\\n\\ndiv.v-pill-container:hover\\n{\\n background-color:rgba(150,150,150,0.2);\\n}\\n\\nspan.v-pill-name\\n{\\n cursor: default;\\n display:inline-block;\\n}\\nspan.v-pill-remove\\n{\\n cursor: default;\\n display:inline-block;\\n}\\n\\nspan.v-pill-remove:hover\\n{\\n font-weight: 900;\\n color:rgba(200,30,30,1);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-94d8f66e\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/pill.vue\n// module id = AjZS\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./autocomplete.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"9aafbbb6\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./autocomplete.vue\", function() {\n var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./autocomplete.vue\");\n if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n update(newContent);\n });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8351e810\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/autocomplete.vue\n// module id = B6Kj\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./modal.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"6decef42\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./modal.vue\", function() {\n var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./modal.vue\");\n if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n update(newContent);\n });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-0eaeaf66\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/modal.vue\n// module id = CJjv\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./copyfield.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"041522c3\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./copyfield.vue\", function() {\n var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./copyfield.vue\");\n if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n update(newContent);\n });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-1d7c4045\",\"scoped\":false,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/copyfield.vue\n// module id = E8lD\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./readmore.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"c9be660c\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./readmore.vue\", function() {\n var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./readmore.vue\");\n if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n update(newContent);\n });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-92448f0a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/readmore.vue\n// module id = KU0+\n// module chunks = 0","<template>\n<div>\n <div class = \"v-modal-container\">\n <div\n ref = \"screen\"\n v-on:click = \"$emit('close-modal')\"\n class = \"v-modal-screen\">\n </div>\n <div\n v-bind:style = \"{top:contentContainerTop,left:contentContainerLeft,width:contentContainerWidth,height:contentContainerHeight,}\"\n class = \"v-modal-content-container\">\n <div\n ref = \"content\"\n class = \"v-modal-content\">\n <div class = \"v-modal-header\">\n <slot name = \"v-modal-header\">\n </slot>\n </div>\n <div class = \"v-modal-body\">\n <slot name = \"v-modal-body\">\n </slot>\n </div>\n <div class = \"v-modal-footer\">\n <slot name = \"v-modal-footer\">\n </slot>\n </div>\n </div>\n </div>\n </div>\n</div>\n</template>\n<script>\nexport default {\n props: {\n top: Number,\n left: Number\n },\n data: () => ({\n show: {\n type: Boolean,\n default: false\n }\n }),\n computed: {\n contentContainerLeft: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.left, this.$refs.screen.clientWidth - this.$refs.content.clientWidth) + 'px' : `0px`\n },\n contentContainerTop: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.top, this.$refs.screen.clientHeight - this.$refs.content.clientHeight) + 'px' : `0px`\n },\n contentContainerWidth: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\n },\n contentContainerHeight: function () {\n return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\n }\n }\n}\n</script>\n<style scoped>\n.v-modal-container\n{\n top: 0;\n width:100%;\n height:100%;\n position : absolute;\n z-index:999;\n}\n.v-modal-screen\n{\n top : 0;\n position : absolute;\n width:100%;\n height:100%;\n background-color:rgba(30,30,30,0.2);\n}\n\n.v-modal-content-container\n{\n top : 0;\n position : absolute;\n display : flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n\n pointer-events: none;\n}\n.v-modal-content\n{\n flex : 0 0 auto;\n pointer-events: all;\n}\n\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/modal.vue","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", [\n _c(\"div\", { staticClass: \"v-modal-container\" }, [\n _c(\"div\", {\n ref: \"screen\",\n staticClass: \"v-modal-screen\",\n on: {\n click: function($event) {\n _vm.$emit(\"close-modal\")\n }\n }\n }),\n _vm._v(\" \"),\n _c(\n \"div\",\n {\n staticClass: \"v-modal-content-container\",\n style: {\n top: _vm.contentContainerTop,\n left: _vm.contentContainerLeft,\n width: _vm.contentContainerWidth,\n height: _vm.contentContainerHeight\n }\n },\n [\n _c(\"div\", { ref: \"content\", staticClass: \"v-modal-content\" }, [\n _c(\n \"div\",\n { staticClass: \"v-modal-header\" },\n [_vm._t(\"v-modal-header\")],\n 2\n ),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"v-modal-body\" },\n [_vm._t(\"v-modal-body\")],\n 2\n ),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"v-modal-footer\" },\n [_vm._t(\"v-modal-footer\")],\n 2\n )\n ])\n ]\n )\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n module.hot.accept()\n if (module.hot.data) {\n require(\"vue-hot-reload-api\") .rerender(\"data-v-0eaeaf66\", esExports)\n }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-0eaeaf66\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/modal.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n if (disposed) return\n require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./modal.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./modal.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./modal.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./modal.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-0eaeaf66\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/modal.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n var hotAPI = require(\"vue-hot-reload-api\")\n hotAPI.install(require(\"vue\"), false)\n if (!hotAPI.compatible) return\n module.hot.accept()\n if (!module.hot.data) {\n hotAPI.createRecord(\"data-v-0eaeaf66\", Component.options)\n } else {\n hotAPI.reload(\"data-v-0eaeaf66\", Component.options)\n }\n module.hot.dispose(function (data) {\n disposed = true\n })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/modal.vue\n// module id = null\n// module chunks = ","<template>\n<div class = \"autocomplete-container\">\n <input\n ref = \"input\"\n @keydown.stop = \"hitEnter\"\n type = \"text\"\n @focus = \"showSuggestions = true\"\n @blur = \"showSuggestions = false\"\n v-model = \"typedText\"\n :placeholder = \"placeholder\"/>\n <transition name = \"fade\">\n <div v-if = \"showSuggestions\" class = \"autocomplete-suggestion-container\">\n <div\n @mousedown=\"selectSlice(item)\"\n class = \"autocomplete-suggestions\"\n :class = \"{active : ((highlightIndex % filteredArray.length) === index)}\"\n v-bind:key = \"index\"\n v-for = \"(item,index) in filteredArray\">\n {{ item }}\n </div>\n </div>\n </transition>\n</div>\n</template>\n\n<script>\nexport default {\n props: {\n placeholder: {\n type: String,\n default: 'Start typing to search ...'\n },\n rawarray: {\n type: Array,\n default: () => ([])\n },\n rendermax: {\n type: Number,\n default: 25\n }\n },\n data: () => ({\n showSuggestions: false,\n typedText: '',\n highlightIndex: 0\n }),\n methods: {\n selectSlice: function (item) {\n this.$emit('selectslice', item)\n },\n hitEnter: function () {\n switch (event.key) {\n case 'ArrowDown':\n this.highlightIndex += 1\n break\n case 'Escape':\n this.$refs.input.blur()\n break\n case 'ArrowUp':\n this.highlightIndex -= 1\n if (this.highlightIndex <= 0) this.highlightIndex += this.filteredArray.length\n break\n case 'Enter':\n const array = this.filteredArray.slice()\n if (array.length > 0) {\n this.typedText = ''\n const el = document.querySelector(':focus')\n if (el) el.blur()\n this.selectSlice(array[0])\n }\n break\n default:\n this.highlightIndex = 0\n break\n }\n }\n },\n computed: {\n rawArrayLowerCase: function () {\n return this.rawarray.map(item => item.toLowerCase())\n },\n typedTextLowerCase: function () {\n return this.typedText.toLowerCase()\n },\n filteredArray: function () {\n const regex = new RegExp(this.typedText, 'i')\n const completeMatch = this.rawarray.find(item => item.toLowerCase() === this.typedTextLowerCase)\n const othermatches = this.rawarray\n .filter(item => regex.test(item))\n .filter(item => item.toLowerCase() !== this.typedTextLowerCase)\n .filter((_, idx) => idx <= this.rendermax)\n return completeMatch\n ? [completeMatch].concat(othermatches.slice(0, othermatches.length >= this.rendermax ? othermatches.length - 1 : othermatches.length))\n : othermatches\n }\n }\n}\n</script>\n\n<style scoped>\ndiv.autocomplete-container\n{\n cursor:default;\n}\n\n.autocomplete-suggestions\n{\n width:100%;\n display:block;\n padding:0.1em 0.3em;\n transition: all 200ms;\n background-color:rgba(230,230,230,0.5);\n}\n\n.autocomplete-suggestions.active\n{\n background-color:rgba(230,230,230,0.95);\n}\n\n.autocomplete-suggestions:hover\n{\n background-color:rgba(230,230,230,0.95);\n}\n\ndiv.autocomplete-container:focus-within .autocomplete-suggestions\n{\n display: block;\n}\n\ndiv.autocomplete-suggestion-container\n{\n width: 100%;\n max-height:10em;\n overflow-y:auto;\n overflow-x:hidden;\n z-index:2;\n}\ninput[type=\"text\"]\n{\n width:100%;\n height:100%;\n z-index:1;\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/autocomplete.vue","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { staticClass: \"autocomplete-container\" },\n [\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.typedText,\n expression: \"typedText\"\n }\n ],\n ref: \"input\",\n attrs: { type: \"text\", placeholder: _vm.placeholder },\n domProps: { value: _vm.typedText },\n on: {\n keydown: function($event) {\n $event.stopPropagation()\n return _vm.hitEnter($event)\n },\n focus: function($event) {\n _vm.showSuggestions = true\n },\n blur: function($event) {\n _vm.showSuggestions = false\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.typedText = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\"transition\", { attrs: { name: \"fade\" } }, [\n _vm.showSuggestions\n ? _c(\n \"div\",\n { staticClass: \"autocomplete-suggestion-container\" },\n _vm._l(_vm.filteredArray, function(item, index) {\n return _c(\n \"div\",\n {\n key: index,\n staticClass: \"autocomplete-suggestions\",\n class: {\n active:\n _vm.highlightIndex % _vm.filteredArray.length === index\n },\n on: {\n mousedown: function($event) {\n _vm.selectSlice(item)\n }\n }\n },\n [_vm._v(\"\\n \" + _vm._s(item) + \"\\n \")]\n )\n })\n )\n : _vm._e()\n ])\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n module.hot.accept()\n if (module.hot.data) {\n require(\"vue-hot-reload-api\") .rerender(\"data-v-8351e810\", esExports)\n }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-8351e810\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/autocomplete.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n if (disposed) return\n require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./autocomplete.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./autocomplete.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./autocomplete.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-8351e810\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./autocomplete.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-8351e810\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/autocomplete.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n var hotAPI = require(\"vue-hot-reload-api\")\n hotAPI.install(require(\"vue\"), false)\n if (!hotAPI.compatible) return\n module.hot.accept()\n if (!module.hot.data) {\n hotAPI.createRecord(\"data-v-8351e810\", Component.options)\n } else {\n hotAPI.reload(\"data-v-8351e810\", Component.options)\n }\n module.hot.dispose(function (data) {\n disposed = true\n })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/autocomplete.vue\n// module id = null\n// module chunks = ","<template>\n<div class = \"copy-field-root\">\n <input ref = \"inputEl\" readonly v-bind:value = \"value\" type = \"text\" />\n <div\n v-bind:hidden = \"!copyable\"\n @click.stop = \"copyToClipBoard\">{{ methodGetCopyText() }}\n </div>\n</div>\n</template>\n\n<script>\nexport default {\n props: {\n value: {\n type: String,\n default: 'default value'\n },\n copyable: {\n type: Boolean,\n default: true\n }\n },\n data: () => ({\n copiedFlag: false,\n timeoutRef: 0,\n copyBtnShown: false\n }),\n methods: {\n copyToClipBoard: function () {\n this.copiedFlag = true\n if (this.timeoutRef) {\n clearTimeout(this.timeoutRef)\n }\n setTimeout(() => {\n this.copiedFlag = false\n this.timeoutRef = 0\n }, 2000)\n\n this.$refs.inputEl.focus()\n this.$refs.inputEl.select()\n document.execCommand('copy', false)\n },\n methodGetCopyText: function () {\n return this.copiedFlag ? 'Copied!' : 'Copy'\n }\n }\n}\n</script>\n<style>\n.copy-field-root\n{\n width: 100%;\n white-space: nowrap;\n}\n\n.copy-field-root *\n{\n color:black\n}\n\n.copy-field-root > input\n{\n width : 100%;\n height:2.0em;\n display: inline-block;\n vertical-align : middle;\n box-sizing: border-box;\n position : relative;\n\n border : solid 1px rgba(128,128,128,0.6);\n z-index: 8;\n}\n\n.copy-field-root > div:not([hidden])\n{\n position : relative;\n z-index: 9;\n cursor:default;\n display: inline-block;\n box-sizing:border-box;\n margin : 0.2em;\n height : 1.6em;\n margin-left:-4em;\n font-size:100%;\n vertical-align : middle;\n text-align: center;\n font-size:0.9em;\n padding : 0.2em;\n\n color:rgba(0,0,0,0.8);\n border : solid 1px rgba(0,0,0,0.5);\n\n background-color:rgba(230,230,230,0.9);\n}\n\n.copy-field-root > div:hover\n{\n background-color:rgba(240,240,240,1.0);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/copyfield.vue","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"copy-field-root\" }, [\n _c(\"input\", {\n ref: \"inputEl\",\n attrs: { readonly: \"\", type: \"text\" },\n domProps: { value: _vm.value }\n }),\n _vm._v(\" \"),\n _c(\n \"div\",\n {\n attrs: { hidden: !_vm.copyable },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.copyToClipBoard($event)\n }\n }\n },\n [_vm._v(_vm._s(_vm.methodGetCopyText()) + \"\\n \")]\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n module.hot.accept()\n if (module.hot.data) {\n require(\"vue-hot-reload-api\") .rerender(\"data-v-1d7c4045\", esExports)\n }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-1d7c4045\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/copyfield.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n if (disposed) return\n require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./copyfield.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./copyfield.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./copyfield.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./copyfield.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/copyfield.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n var hotAPI = require(\"vue-hot-reload-api\")\n hotAPI.install(require(\"vue\"), false)\n if (!hotAPI.compatible) return\n module.hot.accept()\n if (!module.hot.data) {\n hotAPI.createRecord(\"data-v-1d7c4045\", Component.options)\n } else {\n hotAPI.reload(\"data-v-1d7c4045\", Component.options)\n }\n module.hot.dispose(function (data) {\n disposed = true\n })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/copyfield.vue\n// module id = null\n// module chunks = ","<template>\n<div class = \"readmore-container\">\n <div :style = \"{ height : computedHeight }\" class = \"readmore-content\">\n <div ref = \"readmoreContentContainer\">\n <slot name = \"readmoreContent\"></slot>\n </div>\n </div>\n <div @click = \"toggle\" class = \"readmore-sliver\">\n <slot v-if = \"collapsed\" name = \"resizeSliverContentCollapsed\">\n </slot>\n <slot v-if = \"!collapsed\" name = \"resizeSliverContentShown\">\n </slot>\n </div>\n</div>\n</template>\n<script>\nexport default {\n props: {\n collapsedHeight: {\n type: Number,\n default: 25\n }\n },\n data: () => ({\n collapsed: {\n type: Boolean,\n default: true\n },\n actualHeight: {\n type: Number,\n default: 25\n }\n }),\n mounted: function () {\n this.actualHeight = this.$refs.readmoreContentContainer.clientHeight\n },\n methods: {\n toggle: function () {\n this.collapsed = !this.collapsed\n }\n },\n computed: {\n computedHeight: function () {\n return `${this.collapsed ? this.collapsedHeight : this.actualHeight}px`\n }\n }\n}\n</script>\n<style scoped>\n.readmore-content\n{\n transition: all 0.3s;\n overflow-y : hidden;\n}\n.readmore-sliver\n{\n min-height: 0.5em;\n transition: all 0.3s;\n background-color: rgba(128,128,128,0.2);\n}\n.readmore-sliver:hover\n{\n transform: translateY(-2px);\n background-color: rgba(128,128,128,0.4);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/readmore.vue","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"readmore-container\" }, [\n _c(\n \"div\",\n {\n staticClass: \"readmore-content\",\n style: { height: _vm.computedHeight }\n },\n [\n _c(\n \"div\",\n { ref: \"readmoreContentContainer\" },\n [_vm._t(\"readmoreContent\")],\n 2\n )\n ]\n ),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"readmore-sliver\", on: { click: _vm.toggle } },\n [\n _vm.collapsed ? _vm._t(\"resizeSliverContentCollapsed\") : _vm._e(),\n _vm._v(\" \"),\n !_vm.collapsed ? _vm._t(\"resizeSliverContentShown\") : _vm._e()\n ],\n 2\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n module.hot.accept()\n if (module.hot.data) {\n require(\"vue-hot-reload-api\") .rerender(\"data-v-92448f0a\", esExports)\n }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-92448f0a\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/readmore.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n if (disposed) return\n require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./readmore.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./readmore.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./readmore.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./readmore.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-92448f0a\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/readmore.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n var hotAPI = require(\"vue-hot-reload-api\")\n hotAPI.install(require(\"vue\"), false)\n if (!hotAPI.compatible) return\n module.hot.accept()\n if (!module.hot.data) {\n hotAPI.createRecord(\"data-v-92448f0a\", Component.options)\n } else {\n hotAPI.reload(\"data-v-92448f0a\", Component.options)\n }\n module.hot.dispose(function (data) {\n disposed = true\n })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/readmore.vue\n// module id = null\n// module chunks = ","<template>\n<div\n @click = \"toggleCheckBox\"\n :class = \"flag ? 'checkbox-on' : 'checkbox-off'\"\n class = \"checkbox-root\">\n <div\n :style = \"getDialTransform\"\n class = \"checkbox-dial\">\n </div>\n</div>\n</template>\n<script>\nexport default {\n props: {\n flag: {\n type: Boolean,\n default: true\n }\n },\n methods: {\n toggleCheckBox: function (event) {\n this.$emit('togglecheckbox', event)\n }\n },\n computed: {\n getDialTransform: function () {\n return {\n transform: this.flag\n ? 'translateX(0)'\n : 'translateX(1.6em)'\n }\n }\n }\n}\n</script>\n<style scoped>\n.checkbox-root\n{\n height: 2em;\n width: 3.6em;\n display: inline-block;\n border-radius: 1em;\n overflow: hidden;\n padding: 0.2em;\n box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n transition: all 0.5s;\n}\n\n.checkbox-on\n{\n background-color: rgba(0, 150, 0, 0.4);\n}\n\n.checkbox-off\n{\n background-color: rgba(128, 128, 128, 0.4);\n}\n\n.checkbox-dial\n{\n transition: all 0.2s;\n display: inline-block;\n width: 1.6em;\n height: 100%;\n background-color:white;\n border-radius: 1em;\n box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/checkbox.vue","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n {\n staticClass: \"checkbox-root\",\n class: _vm.flag ? \"checkbox-on\" : \"checkbox-off\",\n on: { click: _vm.toggleCheckBox }\n },\n [_c(\"div\", { staticClass: \"checkbox-dial\", style: _vm.getDialTransform })]\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n module.hot.accept()\n if (module.hot.data) {\n require(\"vue-hot-reload-api\") .rerender(\"data-v-8903635a\", esExports)\n }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-8903635a\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/checkbox.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n if (disposed) return\n require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./checkbox.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./checkbox.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./checkbox.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-8903635a\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./checkbox.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-8903635a\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/checkbox.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n var hotAPI = require(\"vue-hot-reload-api\")\n hotAPI.install(require(\"vue\"), false)\n if (!hotAPI.compatible) return\n module.hot.accept()\n if (!module.hot.data) {\n hotAPI.createRecord(\"data-v-8903635a\", Component.options)\n } else {\n hotAPI.reload(\"data-v-8903635a\", Component.options)\n }\n module.hot.dispose(function (data) {\n disposed = true\n })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/checkbox.vue\n// module id = null\n// module chunks = ","import Vue from 'vue'\n// import App from './App'\nimport Modal from './components/modal.vue'\nimport Pill from './components/pill.vue'\nimport AutoComplete from './components/autocomplete.vue'\nimport CopyField from './components/copyfield.vue'\nimport Readmore from './components/readmore.vue'\nimport CheckBox from './components/checkbox.vue'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\n// new Vue({\n// el: '#app',\n// render: h => h(App)\n// })\nVue.component('vue-modal', Modal)\nVue.component('vue-pill', Pill)\nVue.component('vue-autocomplete', AutoComplete)\nVue.component('vue-copyfield', CopyField)\nVue.component('vue-readmore', Readmore)\nVue.component('vue-checkbox', CheckBox)\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.readmore-content[data-v-92448f0a]\\n{\\n -webkit-transition: all 0.3s;\\n transition: all 0.3s;\\n overflow-y : hidden;\\n}\\n.readmore-sliver[data-v-92448f0a]\\n{\\n min-height: 0.5em;\\n -webkit-transition: all 0.3s;\\n transition: all 0.3s;\\n background-color: rgba(128,128,128,0.2);\\n}\\n.readmore-sliver[data-v-92448f0a]:hover\\n{\\n -webkit-transform: translateY(-2px);\\n transform: translateY(-2px);\\n background-color: rgba(128,128,128,0.4);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/readmore.vue\"],\"names\":[],\"mappings\":\";AAiDA;;EAEA,6BAAA;EAAA,qBAAA;EACA,oBAAA;CACA;AACA;;EAEA,kBAAA;EACA,6BAAA;EAAA,qBAAA;EACA,wCAAA;CACA;AACA;;EAEA,oCAAA;UAAA,4BAAA;EACA,wCAAA;CACA\",\"file\":\"readmore.vue\",\"sourcesContent\":[\"<template>\\n<div class = \\\"readmore-container\\\">\\n <div :style = \\\"{ height : computedHeight }\\\" class = \\\"readmore-content\\\">\\n <div ref = \\\"readmoreContentContainer\\\">\\n <slot name = \\\"readmoreContent\\\"></slot>\\n </div>\\n </div>\\n <div @click = \\\"toggle\\\" class = \\\"readmore-sliver\\\">\\n <slot v-if = \\\"collapsed\\\" name = \\\"resizeSliverContentCollapsed\\\">\\n </slot>\\n <slot v-if = \\\"!collapsed\\\" name = \\\"resizeSliverContentShown\\\">\\n </slot>\\n </div>\\n</div>\\n</template>\\n<script>\\nexport default {\\n props: {\\n collapsedHeight: {\\n type: Number,\\n default: 25\\n }\\n },\\n data: () => ({\\n collapsed: {\\n type: Boolean,\\n default: true\\n },\\n actualHeight: {\\n type: Number,\\n default: 25\\n }\\n }),\\n mounted: function () {\\n this.actualHeight = this.$refs.readmoreContentContainer.clientHeight\\n },\\n methods: {\\n toggle: function () {\\n this.collapsed = !this.collapsed\\n }\\n },\\n computed: {\\n computedHeight: function () {\\n return `${this.collapsed ? this.collapsedHeight : this.actualHeight}px`\\n }\\n }\\n}\\n</script>\\n<style scoped>\\n.readmore-content\\n{\\n transition: all 0.3s;\\n overflow-y : hidden;\\n}\\n.readmore-sliver\\n{\\n min-height: 0.5em;\\n transition: all 0.3s;\\n background-color: rgba(128,128,128,0.2);\\n}\\n.readmore-sliver:hover\\n{\\n transform: translateY(-2px);\\n background-color: rgba(128,128,128,0.4);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-92448f0a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/readmore.vue\n// module id = R6Sg\n// module chunks = 0","<template>\n<div @click.stop.prevent = \"$emit('select-pill')\" class = \"v-pill-container\">\n <span class = \"v-pill-name\">{{ name }}</span>\n <span v-if = \"closable\" @click.stop.prevent = \"$emit('remove-pill')\" class = \"v-pill-remove\">×</span>\n</div>\n</template>\n\n<script>\nmodule.exports = {\n props: {\n name: {\n type: String,\n default: 'Untitled'\n },\n closable: {\n type: Boolean,\n default: true\n }\n }\n}\n</script>\n\n<style scoped>\ndiv.v-pill-container\n{\n display:inline-block;\n white-space: nowrap;\n margin:5px;\n padding:0.2em 0.6em;\n border-radius: 0.8em;\n}\n\ndiv.v-pill-container\n{\n cursor: default;\n transition: all 300ms;\n background-color:rgba(50,50,50,0.2);\n}\n\ndiv.v-pill-container:hover\n{\n background-color:rgba(150,150,150,0.2);\n}\n\nspan.v-pill-name\n{\n cursor: default;\n display:inline-block;\n}\nspan.v-pill-remove\n{\n cursor: default;\n display:inline-block;\n}\n\nspan.v-pill-remove:hover\n{\n font-weight: 900;\n color:rgba(200,30,30,1);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/pill.vue","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\ndiv.autocomplete-container[data-v-8351e810]\\n{\\n cursor:default;\\n}\\n.autocomplete-suggestions[data-v-8351e810]\\n{\\n width:100%;\\n display:block;\\n padding:0.1em 0.3em;\\n -webkit-transition: all 200ms;\\n transition: all 200ms;\\n background-color:rgba(230,230,230,0.5);\\n}\\n.autocomplete-suggestions.active[data-v-8351e810]\\n{\\n background-color:rgba(230,230,230,0.95);\\n}\\n.autocomplete-suggestions[data-v-8351e810]:hover\\n{\\n background-color:rgba(230,230,230,0.95);\\n}\\ndiv.autocomplete-container:focus-within .autocomplete-suggestions[data-v-8351e810]\\n{\\n display: block;\\n}\\ndiv.autocomplete-suggestion-container[data-v-8351e810]\\n{\\n width: 100%;\\n max-height:10em;\\n overflow-y:auto;\\n overflow-x:hidden;\\n z-index:2;\\n}\\ninput[type=\\\"text\\\"][data-v-8351e810]\\n{\\n width:100%;\\n height:100%;\\n z-index:1;\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/autocomplete.vue\"],\"names\":[],\"mappings\":\";AAoGA;;EAEA,eAAA;CACA;AAEA;;EAEA,WAAA;EACA,cAAA;EACA,oBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,uCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,eAAA;CACA;AAEA;;EAEA,YAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;CACA;AACA;;EAEA,WAAA;EACA,YAAA;EACA,UAAA;CACA\",\"file\":\"autocomplete.vue\",\"sourcesContent\":[\"<template>\\n<div class = \\\"autocomplete-container\\\">\\n <input\\n ref = \\\"input\\\"\\n @keydown.stop = \\\"hitEnter\\\"\\n type = \\\"text\\\"\\n @focus = \\\"showSuggestions = true\\\"\\n @blur = \\\"showSuggestions = false\\\"\\n v-model = \\\"typedText\\\"\\n :placeholder = \\\"placeholder\\\"/>\\n <transition name = \\\"fade\\\">\\n <div v-if = \\\"showSuggestions\\\" class = \\\"autocomplete-suggestion-container\\\">\\n <div\\n @mousedown=\\\"selectSlice(item)\\\"\\n class = \\\"autocomplete-suggestions\\\"\\n :class = \\\"{active : ((highlightIndex % filteredArray.length) === index)}\\\"\\n v-bind:key = \\\"index\\\"\\n v-for = \\\"(item,index) in filteredArray\\\">\\n {{ item }}\\n </div>\\n </div>\\n </transition>\\n</div>\\n</template>\\n\\n<script>\\nexport default {\\n props: {\\n placeholder: {\\n type: String,\\n default: 'Start typing to search ...'\\n },\\n rawarray: {\\n type: Array,\\n default: () => ([])\\n },\\n rendermax: {\\n type: Number,\\n default: 25\\n }\\n },\\n data: () => ({\\n showSuggestions: false,\\n typedText: '',\\n highlightIndex: 0\\n }),\\n methods: {\\n selectSlice: function (item) {\\n this.$emit('selectslice', item)\\n },\\n hitEnter: function () {\\n switch (event.key) {\\n case 'ArrowDown':\\n this.highlightIndex += 1\\n break\\n case 'Escape':\\n this.$refs.input.blur()\\n break\\n case 'ArrowUp':\\n this.highlightIndex -= 1\\n if (this.highlightIndex <= 0) this.highlightIndex += this.filteredArray.length\\n break\\n case 'Enter':\\n const array = this.filteredArray.slice()\\n if (array.length > 0) {\\n this.typedText = ''\\n const el = document.querySelector(':focus')\\n if (el) el.blur()\\n this.selectSlice(array[0])\\n }\\n break\\n default:\\n this.highlightIndex = 0\\n break\\n }\\n }\\n },\\n computed: {\\n rawArrayLowerCase: function () {\\n return this.rawarray.map(item => item.toLowerCase())\\n },\\n typedTextLowerCase: function () {\\n return this.typedText.toLowerCase()\\n },\\n filteredArray: function () {\\n const regex = new RegExp(this.typedText, 'i')\\n const completeMatch = this.rawarray.find(item => item.toLowerCase() === this.typedTextLowerCase)\\n const othermatches = this.rawarray\\n .filter(item => regex.test(item))\\n .filter(item => item.toLowerCase() !== this.typedTextLowerCase)\\n .filter((_, idx) => idx <= this.rendermax)\\n return completeMatch\\n ? [completeMatch].concat(othermatches.slice(0, othermatches.length >= this.rendermax ? othermatches.length - 1 : othermatches.length))\\n : othermatches\\n }\\n }\\n}\\n</script>\\n\\n<style scoped>\\ndiv.autocomplete-container\\n{\\n cursor:default;\\n}\\n\\n.autocomplete-suggestions\\n{\\n width:100%;\\n display:block;\\n padding:0.1em 0.3em;\\n transition: all 200ms;\\n background-color:rgba(230,230,230,0.5);\\n}\\n\\n.autocomplete-suggestions.active\\n{\\n background-color:rgba(230,230,230,0.95);\\n}\\n\\n.autocomplete-suggestions:hover\\n{\\n background-color:rgba(230,230,230,0.95);\\n}\\n\\ndiv.autocomplete-container:focus-within .autocomplete-suggestions\\n{\\n display: block;\\n}\\n\\ndiv.autocomplete-suggestion-container\\n{\\n width: 100%;\\n max-height:10em;\\n overflow-y:auto;\\n overflow-x:hidden;\\n z-index:2;\\n}\\ninput[type=\\\"text\\\"]\\n{\\n width:100%;\\n height:100%;\\n z-index:1;\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8351e810\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/autocomplete.vue\n// module id = RpWc\n// module chunks = 0","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n {\n staticClass: \"v-pill-container\",\n on: {\n click: function($event) {\n $event.stopPropagation()\n $event.preventDefault()\n _vm.$emit(\"select-pill\")\n }\n }\n },\n [\n _c(\"span\", { staticClass: \"v-pill-name\" }, [_vm._v(_vm._s(_vm.name))]),\n _vm._v(\" \"),\n _vm.closable\n ? _c(\n \"span\",\n {\n staticClass: \"v-pill-remove\",\n on: {\n click: function($event) {\n $event.stopPropagation()\n $event.preventDefault()\n _vm.$emit(\"remove-pill\")\n }\n }\n },\n [_vm._v(\"×\")]\n )\n : _vm._e()\n ]\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n module.hot.accept()\n if (module.hot.data) {\n require(\"vue-hot-reload-api\") .rerender(\"data-v-94d8f66e\", esExports)\n }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-94d8f66e\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/pill.vue\n// module id = ck25\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.copy-field-root\\n{\\n width: 100%;\\n white-space: nowrap;\\n}\\n.copy-field-root *\\n{\\n color:black\\n}\\n.copy-field-root > input\\n{\\n width : 100%;\\n height:2.0em;\\n display: inline-block;\\n vertical-align : middle;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n position : relative;\\n\\n border : solid 1px rgba(128,128,128,0.6);\\n z-index: 8;\\n}\\n.copy-field-root > div:not([hidden])\\n{\\n position : relative;\\n z-index: 9;\\n cursor:default;\\n display: inline-block;\\n -webkit-box-sizing:border-box;\\n box-sizing:border-box;\\n margin : 0.2em;\\n height : 1.6em;\\n margin-left:-4em;\\n font-size:100%;\\n vertical-align : middle;\\n text-align: center;\\n font-size:0.9em;\\n padding : 0.2em;\\n\\n color:rgba(0,0,0,0.8);\\n border : solid 1px rgba(0,0,0,0.5);\\n\\n background-color:rgba(230,230,230,0.9);\\n}\\n.copy-field-root > div:hover\\n{\\n background-color:rgba(240,240,240,1.0);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/copyfield.vue\"],\"names\":[],\"mappings\":\";AAiDA;;EAEA,YAAA;EACA,oBAAA;CACA;AAEA;;EAEA,WAAA;CACA;AAEA;;EAEA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,wBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oBAAA;;EAEA,yCAAA;EACA,WAAA;CACA;AAEA;;EAEA,oBAAA;EACA,WAAA;EACA,eAAA;EACA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,wBAAA;EACA,mBAAA;EACA,gBAAA;EACA,gBAAA;;EAEA,sBAAA;EACA,mCAAA;;EAEA,uCAAA;CACA;AAEA;;EAEA,uCAAA;CACA\",\"file\":\"copyfield.vue\",\"sourcesContent\":[\"<template>\\n<div class = \\\"copy-field-root\\\">\\n <input ref = \\\"inputEl\\\" readonly v-bind:value = \\\"value\\\" type = \\\"text\\\" />\\n <div\\n v-bind:hidden = \\\"!copyable\\\"\\n @click.stop = \\\"copyToClipBoard\\\">{{ methodGetCopyText() }}\\n </div>\\n</div>\\n</template>\\n\\n<script>\\nexport default {\\n props: {\\n value: {\\n type: String,\\n default: 'default value'\\n },\\n copyable: {\\n type: Boolean,\\n default: true\\n }\\n },\\n data: () => ({\\n copiedFlag: false,\\n timeoutRef: 0,\\n copyBtnShown: false\\n }),\\n methods: {\\n copyToClipBoard: function () {\\n this.copiedFlag = true\\n if (this.timeoutRef) {\\n clearTimeout(this.timeoutRef)\\n }\\n setTimeout(() => {\\n this.copiedFlag = false\\n this.timeoutRef = 0\\n }, 2000)\\n\\n this.$refs.inputEl.focus()\\n this.$refs.inputEl.select()\\n document.execCommand('copy', false)\\n },\\n methodGetCopyText: function () {\\n return this.copiedFlag ? 'Copied!' : 'Copy'\\n }\\n }\\n}\\n</script>\\n<style>\\n.copy-field-root\\n{\\n width: 100%;\\n white-space: nowrap;\\n}\\n\\n.copy-field-root *\\n{\\n color:black\\n}\\n\\n.copy-field-root > input\\n{\\n width : 100%;\\n height:2.0em;\\n display: inline-block;\\n vertical-align : middle;\\n box-sizing: border-box;\\n position : relative;\\n\\n border : solid 1px rgba(128,128,128,0.6);\\n z-index: 8;\\n}\\n\\n.copy-field-root > div:not([hidden])\\n{\\n position : relative;\\n z-index: 9;\\n cursor:default;\\n display: inline-block;\\n box-sizing:border-box;\\n margin : 0.2em;\\n height : 1.6em;\\n margin-left:-4em;\\n font-size:100%;\\n vertical-align : middle;\\n text-align: center;\\n font-size:0.9em;\\n padding : 0.2em;\\n\\n color:rgba(0,0,0,0.8);\\n border : solid 1px rgba(0,0,0,0.5);\\n\\n background-color:rgba(230,230,230,0.9);\\n}\\n\\n.copy-field-root > div:hover\\n{\\n background-color:rgba(240,240,240,1.0);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-1d7c4045\",\"scoped\":false,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/copyfield.vue\n// module id = fKQA\n// module chunks = 0","module.exports = Vue;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"Vue\"\n// module id = lRwf\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.v-modal-container[data-v-0eaeaf66]\\n{\\n top: 0;\\n width:100%;\\n height:100%;\\n position : absolute;\\n z-index:999;\\n}\\n.v-modal-screen[data-v-0eaeaf66]\\n{\\n top : 0;\\n position : absolute;\\n width:100%;\\n height:100%;\\n background-color:rgba(30,30,30,0.2);\\n}\\n.v-modal-content-container[data-v-0eaeaf66]\\n{\\n top : 0;\\n position : absolute;\\n display : -webkit-box;\\n display : -ms-flexbox;\\n display : flex;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n -ms-flex-line-pack: center;\\n align-content: center;\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center;\\n\\n pointer-events: none;\\n}\\n.v-modal-content[data-v-0eaeaf66]\\n{\\n -webkit-box-flex : 0;\\n -ms-flex : 0 0 auto;\\n flex : 0 0 auto;\\n pointer-events: all;\\n}\\n\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/modal.vue\"],\"names\":[],\"mappings\":\";AA4DA;;EAEA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,YAAA;CACA;AACA;;EAEA,QAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;CACA;AAEA;;EAEA,QAAA;EACA,oBAAA;EACA,sBAAA;EAAA,sBAAA;EAAA,eAAA;EACA,0BAAA;MAAA,uBAAA;UAAA,oBAAA;EACA,2BAAA;MAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,wBAAA;;EAEA,qBAAA;CACA;AACA;;EAEA,qBAAA;MAAA,oBAAA;UAAA,gBAAA;EACA,oBAAA;CACA\",\"file\":\"modal.vue\",\"sourcesContent\":[\"<template>\\n<div>\\n <div class = \\\"v-modal-container\\\">\\n <div\\n ref = \\\"screen\\\"\\n v-on:click = \\\"$emit('close-modal')\\\"\\n class = \\\"v-modal-screen\\\">\\n </div>\\n <div\\n v-bind:style = \\\"{top:contentContainerTop,left:contentContainerLeft,width:contentContainerWidth,height:contentContainerHeight,}\\\"\\n class = \\\"v-modal-content-container\\\">\\n <div\\n ref = \\\"content\\\"\\n class = \\\"v-modal-content\\\">\\n <div class = \\\"v-modal-header\\\">\\n <slot name = \\\"v-modal-header\\\">\\n </slot>\\n </div>\\n <div class = \\\"v-modal-body\\\">\\n <slot name = \\\"v-modal-body\\\">\\n </slot>\\n </div>\\n <div class = \\\"v-modal-footer\\\">\\n <slot name = \\\"v-modal-footer\\\">\\n </slot>\\n </div>\\n </div>\\n </div>\\n </div>\\n</div>\\n</template>\\n<script>\\nexport default {\\n props: {\\n top: Number,\\n left: Number\\n },\\n data: () => ({\\n show: {\\n type: Boolean,\\n default: false\\n }\\n }),\\n computed: {\\n contentContainerLeft: function () {\\n return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.left, this.$refs.screen.clientWidth - this.$refs.content.clientWidth) + 'px' : `0px`\\n },\\n contentContainerTop: function () {\\n return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.top, this.$refs.screen.clientHeight - this.$refs.content.clientHeight) + 'px' : `0px`\\n },\\n contentContainerWidth: function () {\\n return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\\n },\\n contentContainerHeight: function () {\\n return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\\n }\\n }\\n}\\n</script>\\n<style scoped>\\n.v-modal-container\\n{\\n top: 0;\\n width:100%;\\n height:100%;\\n position : absolute;\\n z-index:999;\\n}\\n.v-modal-screen\\n{\\n top : 0;\\n position : absolute;\\n width:100%;\\n height:100%;\\n background-color:rgba(30,30,30,0.2);\\n}\\n\\n.v-modal-content-container\\n{\\n top : 0;\\n position : absolute;\\n display : flex;\\n align-items: center;\\n align-content: center;\\n justify-content: center;\\n\\n pointer-events: none;\\n}\\n.v-modal-content\\n{\\n flex : 0 0 auto;\\n pointer-events: all;\\n}\\n\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-0eaeaf66\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/modal.vue\n// module id = n8WV\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./pill.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"12958e8c\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./pill.vue\", function() {\n var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./pill.vue\");\n if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n update(newContent);\n });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-94d8f66e\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/pill.vue\n// module id = nFT+\n// module chunks = 0","var disposed = false\nfunction injectStyle (ssrContext) {\n if (disposed) return\n require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./pill.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./pill.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./pill.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./pill.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-94d8f66e\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/pill.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n var hotAPI = require(\"vue-hot-reload-api\")\n hotAPI.install(require(\"vue\"), false)\n if (!hotAPI.compatible) return\n module.hot.accept()\n if (!module.hot.data) {\n hotAPI.createRecord(\"data-v-94d8f66e\", Component.options)\n } else {\n hotAPI.reload(\"data-v-94d8f66e\", Component.options)\n }\n module.hot.dispose(function (data) {\n disposed = true\n })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/pill.vue\n// module id = u0wG\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./checkbox.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"1c6ceeff\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./checkbox.vue\", function() {\n var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./checkbox.vue\");\n if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n update(newContent);\n });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8903635a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/checkbox.vue\n// module id = uPPG\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.checkbox-root[data-v-8903635a]\\n{\\n height: 2em;\\n width: 3.6em;\\n display: inline-block;\\n border-radius: 1em;\\n overflow: hidden;\\n padding: 0.2em;\\n -webkit-box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n -webkit-transition: all 0.5s;\\n transition: all 0.5s;\\n}\\n.checkbox-on[data-v-8903635a]\\n{\\n background-color: rgba(0, 150, 0, 0.4);\\n}\\n.checkbox-off[data-v-8903635a]\\n{\\n background-color: rgba(128, 128, 128, 0.4);\\n}\\n.checkbox-dial[data-v-8903635a]\\n{\\n -webkit-transition: all 0.2s;\\n transition: all 0.2s;\\n display: inline-block;\\n width: 1.6em;\\n height: 100%;\\n background-color:white;\\n border-radius: 1em;\\n -webkit-box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/checkbox.vue\"],\"names\":[],\"mappings\":\";AAoCA;;EAEA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;EACA,kEAAA;UAAA,0DAAA;EACA,+BAAA;UAAA,uBAAA;EACA,6BAAA;EAAA,qBAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,2CAAA;CACA;AAEA;;EAEA,6BAAA;EAAA,qBAAA;EACA,sBAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,4DAAA;UAAA,oDAAA;CACA\",\"file\":\"checkbox.vue\",\"sourcesContent\":[\"<template>\\n<div\\n @click = \\\"toggleCheckBox\\\"\\n :class = \\\"flag ? 'checkbox-on' : 'checkbox-off'\\\"\\n class = \\\"checkbox-root\\\">\\n <div\\n :style = \\\"getDialTransform\\\"\\n class = \\\"checkbox-dial\\\">\\n </div>\\n</div>\\n</template>\\n<script>\\nexport default {\\n props: {\\n flag: {\\n type: Boolean,\\n default: true\\n }\\n },\\n methods: {\\n toggleCheckBox: function (event) {\\n this.$emit('togglecheckbox', event)\\n }\\n },\\n computed: {\\n getDialTransform: function () {\\n return {\\n transform: this.flag\\n ? 'translateX(0)'\\n : 'translateX(1.6em)'\\n }\\n }\\n }\\n}\\n</script>\\n<style scoped>\\n.checkbox-root\\n{\\n height: 2em;\\n width: 3.6em;\\n display: inline-block;\\n border-radius: 1em;\\n overflow: hidden;\\n padding: 0.2em;\\n box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n box-sizing: border-box;\\n transition: all 0.5s;\\n}\\n\\n.checkbox-on\\n{\\n background-color: rgba(0, 150, 0, 0.4);\\n}\\n\\n.checkbox-off\\n{\\n background-color: rgba(128, 128, 128, 0.4);\\n}\\n\\n.checkbox-dial\\n{\\n transition: all 0.2s;\\n display: inline-block;\\n width: 1.6em;\\n height: 100%;\\n background-color:white;\\n border-radius: 1em;\\n box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8903635a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/checkbox.vue\n// module id = vLWt\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/manifest.js b/src/plugin_examples/newWebJugex/manifest.js
deleted file mode 100644
index 1f3bed735127c3e9c9e47889a5e9bb4e44aa2053..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/manifest.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="",t.oe=function(r){throw console.error(r),r}}([]);
-//# sourceMappingURL=manifest.js.map
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/manifest.js.map b/src/plugin_examples/newWebJugex/manifest.js.map
deleted file mode 100644
index 8389ec315a2faf132f37a0959878564a0f859ece..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/manifest.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap 48e9dd598f93f03d55e3"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,GAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 48e9dd598f93f03d55e3"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/manifest.json b/src/plugin_examples/newWebJugex/manifest.json
deleted file mode 100644
index 97462a280738efbf6d57588f74b58bcf8e303c24..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/manifest.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "name" : "fzj.xg.webjugex",
- "displayName":"JuGEx differential gene expression analysis",
- "type" : "plugin",
- "templateURL" : "res/plugin_examples/newWebJugex/template.html",
- "scriptURL" : "res/plugin_examples/newWebJugex/script.js"
-}
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/script.js b/src/plugin_examples/newWebJugex/script.js
deleted file mode 100644
index 95655365e6e4d4dba2aa2ef4c9512a17aa648e37..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/script.js
+++ /dev/null
@@ -1,356 +0,0 @@
-(() => {
-
- // example of adding toasts and custom landmarks
-
- // const handler = interactiveViewer.uiHandle.getToastHandler()
- // handler.message = 'hohoho'
- // handler.dismissable = true
- // handler.timeout = 0
- // handler.show()
-
- // const handler2 = interactiveViewer.uiHandle.getToastHandler()
- // handler2.message = `hohoho2<a href = "alert('oh no')">test</a>`
- // handler2.dismissable = true
- // handler2.timeout = 0
- // setTimeout(()=>{
- // handler2.show()
- // },5000)
-
- // interactiveViewer.viewerHandle.add3DLandmarks([{
- // id : 'jugex-test1',
- // position : [0,0,0]
- // }])
-
- const backendRoot = null
- const srcRoot = 'res/plugin_examples/newWebJugex'
- const manifestID = 'fzj.xg.webjugex'
-
- /* so that on shutdown, we could unload these libraries */
- const onshutdownCB = []
- const loadedExternalLibraries = []
- const subscriptions = []
-
- const newset = new Set()
- newset.add('test')
- newset.has('test')
-
- let datasetsLoaded, mouseoverReggion
-
- const handleMouseOvernehubaEvent = (event) => {
- if(event === null){
- return
- }
- /* if either first region or second region is empty fill them */
- }
-
- const handleMouseClickEvent = (event) => {
-
- }
-
- interactiveViewer.metadata.datasetsBSubject.subscribe(datasets => datasetsLoaded = datasets)
-
- onshutdownCB.push(() => subscriptions.forEach(s => s.unsubscribe()))
-
- const loadExternalJsLibrary = (url) => new Promise((resolve,reject) => {
- const el = document.createElement('script')
- el.setAttribute('src',url)
- el.onload = () => {
- loadedExternalLibraries.push(el)
- resolve()
- }
- el.onerror = (e) => reject(e)
- document.head.appendChild(el)
- })
-
- const parseCoordToFile = (json) => {
- return Object.keys(json).reduce((acc, curr) => {
- const newRows = json[curr].map(item => {
- return `${curr},${item.xyz.join(',')},${item.winsorzed_mean.join(',')}`
- })
- return acc.concat(newRows)
- }, []).join('\n')
- }
-
- const parsePvalToFile = (json) => {
- return Object.keys(json).map(key => `${key},${json[key]}`).join('\n')
- }
-
- const jugexResponseParser = (json) => {
- const pval = json[1]
- const coord = json[0]
- const stringCoordFile = parseCoordToFile(coord)
- const stringPvalFile = parsePvalToFile(pval)
- const stringTitledCoordFile = Object.keys(pval).join(',').concat('\n').concat(stringCoordFile)
- return {
- pval : stringPvalFile,
- coord : stringTitledCoordFile
- }
- }
-
- interactiveViewer.pluginControl.loadExternalLibraries(['vue@2.5.16'])
- .then(() => loadExternalJsLibrary(`${srcRoot}/manifest.js`))
- .then(() => loadExternalJsLibrary(`${srcRoot}/vendor.js`))
- .then(() => loadExternalJsLibrary(`${srcRoot}/app.js`))
- .then(() => {
- window.interactiveViewer.pluginControl[manifestID].setInitManifestUrl('http://localhost:10080/newWebJugex/manifest.json')
-
- const controller = new Vue({
- el: '#fzj\\.xg\\.newWebJugex\\.container',
- props: {
- regionNameToPMapURLMap: {
- type: Map,
- default: () => new Map()
- }
- },
- data: {
- allgenes: ["ADRA2A", "AVPR1B", "CHRM2", "CNR1", "CREB1", "CRH", "CRHR1", "CRHR2", "GAD2", "HTR1A", "HTR1B", "HTR1D", "HTR2A", "HTR3A", "HTR5A", "MAOA", "PDE1A", "SLC6A2", "SLC6A4", "SST", "TAC1", "TPH1", "GPR50", "CUX2", "TPH2"],
- chosengenes: [],
- roi1: '',
- roi2: '',
- regions: [],
- singleProbeMode:true,
- simpleMode:true,
- ignoreCustomProbe:false,
- lefthemisphere:true,
- righthemisphere:true,
- nPermutations:1000,
- warning : []
- },
- methods: {
- animationendtmp: function(event){
- if(event.animationName === 'flash'){
- this.warning = []
- }
- },
- findNewInput: function(){
- if(this.roi1 === '')
- return this.$refs.roi1.$refs.input.focus()
- if(this.roi2 === '')
- return this.$refs.roi2.$refs.input.focus()
- return this.$refs.genelist.$refs.input.focus()
- },
- removeGene: function (gene) {
- this.chosengenes = this.chosengenes.filter(g => g !== gene)
- },
- exportGene: function () {
- this.$refs.exportGeneAnchor.setAttribute('download', `${Date.now()}.csv`)
- this.$refs.exportGeneAnchor.click()
- },
- getWarning: function(w) {
- switch(w){
- case 'roi1':
- return `ROI1 must be selected.`
- case 'roi2':
- return `ROI2 must be selected.`
- case 'chosengenes':
- return `At least 1 gene needs to be selected.`
- case 'hemisphere':
- return `If simple mode is off, at least 1 hemisphere needs to be selected.`
- default:
- return `Some other fields need to be filled.`
- }
- },
- validation: function () {
- this.warning = []
- if(this.roi1 !== '' && this.roi2 !== '' && this.chosengenes.length > 0 && (this.simpleMode || (this.lefthemisphere || this.righthemisphere))){
- return true
- }
- const warning = []
- if(this.roi1 === ''){
- warning.push('roi1')
- }
- if(this.roi2 === ''){
- warning.push('roi2')
- }
- if(this.chosengenes.length <= 0){
- warning.push('chosengenes')
- }
- if(!this.simpleMode && !(this.lefthemisphere || this.righthemisphere)){
- warning.push('hemisphere')
- }
- this.warning = warning
- },
- startAnalysis: function () {
- if(!this.validation()){
- return
- }
-
- const body = {
- area1: {
- name: this.roi1,
- PMapURL: this.regionNameToPMapURLMap.get(this.roi1)
- },
- area2: {
- name: this.roi2,
- PMapURL: this.regionNameToPMapURLMap.get(this.roi2)
- },
-
- simpleMode: this.simpleMode,
- singleProbeMode: this.singleProbeMode,
- ignoreCustomProbe: this.ignoreCustomProbe,
-
- lh: this.lefthemisphere,
- rh: this.righthemisphere,
- selectedGenes: [...this.chosengenes]
- }
-
- this.$emit('start-analysis', Object.assign({}, body))
- }
- },
- computed: {
- hemisphereWarning : function(){
- return this.warning.findIndex(v => v === 'hemisphere') >= 0
- },
- roi1Warning: function(){
- return this.warning.findIndex(v => v === 'roi1') >= 0
- },
- roi2Warning: function(){
- return this.warning.findIndex(v => v === 'roi2') >= 0
- },
- chosenGeneWarning: function(){
- return this.warning.findIndex(v => v === 'chosengenes') >= 0
- },
- placeholderTextRoi1: function () {
- return this.roi1 === '' ? 'Start typing to search ...': this.roi1
- },
- placeholderTextRoi2: function () {
- return this.roi2 === '' ? 'Start typing to search ...': this.roi2
- },
- chosenGeneCommaJoined: function(){
- return this.chosengenes.join(',')
- },
- getAllgenes: function () {
- return this.allgenes
- }
- },
- mounted: function () {
- fetch(backendRoot)
- .then(res => res.json())
- .then(array => this.allgenes = array)
- .catch(console.warn)
- }
- })
-
- interactiveViewer.metadata.datasetsBSubject.subscribe(array =>
- controller.regionNameToPMapURLMap = new Map(array
- .filter(item => item.type === 'Cytoarchitectonic Probabilistic Map'
- && typeof item.regionName !== 'undefined'
- && item.regionName.constructor === Array
- && item.regionName.length > 0
- && typeof item.files !== 'undefined'
- && item.files.constructor === Array
- && item.files.length > 0
- && typeof item.files[0].url !== 'undefined')
- .map(item => [item.regionName[0].regionName, item.files[0].url])))
-
- controller.regions = Array.from(interactiveViewer.metadata.regionsLabelIndexMap.values())
- .map(item=>item.name)
-
- const normaliseToTwoDigit = (input) => `${input.toString().length > 1 ? '' : '0'}${input.toString()}`
-
- Vue.component('fzj-xg-newwebjugex-analysis-card',{
- template: `
- <div class = "panel panel-default">
- <div
- @click = "showbody = !showbody"
- class = "panel-header btn btn-default btn-block">
- <span
- v-if = "status">
- Analysis complete. {{ dateString }}
- </span>
- <div
- v-if = "!status">
- <div class = "fzj.xg.newWebJugex.spinner">•</div>
- <div>Analysing</div>
- </div>
- <span
- @click.stop = "$emit('remove-card')"
- class = "pull-right close">
- ×
- </span>
- </div>
- <div
- v-if = "showbody"
- class = "panel-body">
- <div v-if = "error">
- {{ error }}
- </div>
- <div v-else-if = "pvaldata && coorddata">
- <a download = "pval.csv" :href = "'data:text/csv;charset=utf-8,' + pvaldata">download pvals</a><br />
- <a download = "coord.csv" :href = "'data:text/csv;charset=utf-8,' + coorddata">download coord data</a>
- </div>
- <div v-else>
- We are still working on on analysing your data ...
- </div>
- </div>
- </div>
- `,
- props: {
- querydata: {
- type: Object,
- default: () => ({})
- }
- },
- data: () => ({
- status: false,
- showbody: false,
- datenow : new Date(),
- error : null,
- pvaldata : null,
- coorddata : null
- }),
- computed: {
- filename: function(){
- return `pval_nPerm${this.querydata.nPermutations}_${this.querydata.singleProbeMode ? 'singleProbeMode' : 'allProbeMode'}`
- },
- dateString: function () {
- return `${this.datenow.getFullYear().toString()}${normaliseToTwoDigit(this.datenow.getMonth() + 1)}${normaliseToTwoDigit(this.datenow.getDate())}_${normaliseToTwoDigit(this.datenow.getHours())}${normaliseToTwoDigit(this.datenow.getMinutes())}`
- }
- },
- mounted: function () {
- console.log(this.querydata)
- const data = Object.assign({}, this.querydata, {threshold:0.2,mode:false})
- fetch(`${backendRoot}/jugex`,{
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(data)
- })
- .then(res=>res.json())
- .then(json => {
- this.status = true
- const rjson = jugexResponseParser(json)
- this.pvaldata = rjson.pval
- this.coorddata = rjson.coord
- })
- .catch(e => {
- this.status = true
- this.error = JSON.stringify(e)
- })
- }
- })
-
- const result = new Vue({
- el: '#fzj\\.xg\\.newWebJugex\\.result',
- data: {
- analyses: []
- },
- methods: {
- addAnalysis: function (json) {
- this.analyses.push(json)
- },
- removeAnalysis: function (index) {
- this.analyses.splice(index, 1)
- }
- }
- })
-
- controller.$on('start-analysis', (data) => {
- console.log({data})
- return
- result.addAnalysis(data)
- })
- })
- .catch(e => console.log('error',e))
-})()
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/template.html b/src/plugin_examples/newWebJugex/template.html
deleted file mode 100644
index 51feb4fc0f5827269117994b52ce73e7f0b19c1d..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/template.html
+++ /dev/null
@@ -1,354 +0,0 @@
-<div @animationend = "animationendtmp($event)" v-cloak id = "fzj.xg.newWebJugex.container">
- <vue-readmore :collapsed-height = "40">
- <template slot = "readmoreContent">
- <small id = "fzj.xg.newWebJugex.desc">
- Find a set of differentially expressed genes between two user defined volumes of interest based on JuBrain maps. <br />
- The tool downloads expression values of user specified sets of genes from Allen Brain API.<br />
- Then, it uses zscores to find which genes are expressed differentially between the user specified regions of interests.<br />
- After the analysis is finished, the genes and their calculated p values are displayed. There is also an option of downloading the gene names and their p values<br />
- and the roi coordinates used in the analysis.
- Please select two regions of interest, and at least one gene :
- </small>
- </template>
- <template slot = "resizeSliverContentCollapsed">
- <div class = "text-center">
- <i class = "glyphicon glyphicon-chevron-down"></i>
- </div>
- </template>
- <template slot = "resizeSliverContentShown">
- <div class = "text-center">
- <i class = "glyphicon glyphicon-chevron-up"></i>
- </div>
- </template>
- </vue-readmore>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
-
- <div class = "input-group">
- <span class = "input-group-addon">
- Simple mode:
- </span>
- <vue-checkbox
- :flag = "simpleMode === true"
- @togglecheckbox = "simpleMode = !simpleMode">
- </vue-checkbox>
- </div>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
-
- <div
- style = "z-index:5" class="input-group">
- <div
- class="input-group-addon">
- ROI1:
- </div>
- <vue-autocomplete
- :warning = "roi1Warning"
- ref = "roi1"
- @selectslice = "roi1 = $event;findNewInput()"
- class = "form-control fzj.xg.newWebJugex.vueAutocompleteFormControl"
- :rawarray = "regions"
- :placeholder = "placeholderTextRoi1">
-
- </vue-autocomplete>
- </div>
- <div style = "z-index:4" class="input-group">
- <div class="input-group-addon">
- ROI2:
- </div>
- <vue-autocomplete
- :warning = "roi2Warning"
- ref = "roi2"
- @selectslice = "roi2 = $event;findNewInput()"
- class = "form-control fzj.xg.newWebJugex.vueAutocompleteFormControl"
- :rawarray = "regions"
- :placeholder = "placeholderTextRoi2">
-
- </vue-autocomplete>
- </div>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
-
- <div style = "z-index:3" class = "input-group">
- <vue-autocomplete
- :warning = "chosenGeneWarning"
- ref = "genelist"
- @selectslice = "chosengenes.push( $event );$refs.genelist.$refs.input.focus()"
- class = "form-control fzj.xg.newWebJugex.vueAutocompleteFormControl"
- :rawarray = "getAllgenes"
- :placeholder = "'Search for genes of interest ...'">
-
- </vue-autocomplete>
-
- <div class = "input-group-btn">
- <div webjugex-tooltip = "accepts a comma delimited utf-8 encoded file" class = "btn btn-default fzj.xg.newWebJugex.geneBtns">
- Import
- </div>
- </div>
- <div class = "input-group-btn">
- <div
- @click = "exportGene"
- webjugex-tooltip = "saves the gene list as a comma delimited, utf8 encoded csv file"
- class = "btn btn-default fzj.xg.newWebJugex.geneBtns">
- Export
- <a style = "display:none" ref = "exportGeneAnchor" :href = "'data:text/csv;charset=utf-8,' + chosenGeneCommaJoined">button</a>
- </div>
- </div>
-
- </div>
-
- <vue-pill
- class = "fzj.xg.newWebJugex.pill"
- @remove-pill = "removeGene(item)"
- v-for = "(item,index) in chosengenes"
- :key = "index"
- :name = "item">
- </vue-pill>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
-
- <transition name = "fzj-xg-webjugex-fade">
- <div v-if = "!simpleMode">
-
- <div class="input-group">
- <span class="input-group-addon">
- Single probe mode
- </span>
- <vue-checkbox
- :flag = "singleProbeMode"
- @togglecheckbox = "singleProbeMode = !singleProbeMode">
-
- </vue-checkbox>
- </div>
-
- <div class="input-group">
- <span class="input-group-addon">
- Ignore custom probe
- </span>
- <vue-checkbox
- :flag = "ignoreCustomProbe"
- @togglecheckbox = "ignoreCustomProbe = !ignoreCustomProbe">
-
- </vue-checkbox>
- </div>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
-
- <div class="input-group">
- <span class="input-group-addon">
- Hemisphere
- </span>
- <div
- style = "display:inline-block"
- :warning = "hemisphereWarning">
- <div
- @click = "lefthemisphere = !lefthemisphere"
- :class = " lefthemisphere == true ? 'btn-active' : 'btn-inactive'"
- class="btn btn-default">
- Left
- </div>
- <div
- @click = "righthemisphere = !righthemisphere"
- :class = " righthemisphere == true ? 'btn-active' : 'btn-inactive'"
- class="btn btn-default">
- Right
- </div>
- </div>
- </div>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
-
- <div class="input-group">
- <span class="input-group-addon">
- Number of permutations
- </span>
- <input v-model = "nPermutations" type="text" class="form-control">
- </div>
-
- <div class="fzj.xg.newWebJugex.spacer"></div>
- </div>
- </transition>
-
- <div
- @click = "startAnalysis"
- class="btn btn-default btn-block">
- Start Differential Analysis
- </div>
-
- <transition name = "fzj-xg-webjugex-fade">
- <div style = "margin-top:0.5em" class = "alert alert-danger" v-if = "warning.length > 0">
- <i class="glyphicon glyphicon-alert"></i> WARNING:
- <div v-for = "w in warning">
- {{ getWarning(w) }}
- </div>
- </div>
- </transition>
-
-</div>
-<div v-cloak id = "fzj.xg.newWebJugex.result">
- <fzj-xg-newwebjugex-analysis-card
- class = "fzj.xg.newWebJugex.analysisCard.container"
- @remove-card = "removeAnalysis(index)"
- :querydata = "item"
- :key = "index"
- v-for = "(item, index) in analyses">
-
- </fzj-xg-newwebjugex-analysis-card>
-</div>
-<div class = "fzj.xg.newWebJugex.padding"></div>
-<style>
-[v-cloak]
-{
- display:none;
-}
-
-.fzj-xg-webjugex-fade-enter-active,
-.fzj-xg-webjugex-fade-leave-active
-{
- transition: opacity 0.3s;
-}
-
-.fzj-xg-webjugex-fade-enter,
-.fzj-xg-webjugex-fade-leave-to
-{
- opacity: 0;
-}
-
-@keyframes flash{
- 0% {
- outline:2px solid rgba(250, 100, 100, 0.0);
- }
- 10% {
- outline:2px solid rgba(250, 100, 100, 0.9);
- }
- 100% {
- outline:2px solid rgba(250, 100, 100, 0.0);
- }
-}
-
-[warning]
-{
- animation:5.5s linear flash;
-}
-
-#fzj\.xg\.newWebJugex\.container
-{
- padding: 0.5em;
-}
-#fzj\.xg\.newWebJugex\.desc
-{
- display:block;
-}
-.fzj\.xg\.newWebJugex\.autocomplete
-{
- border : 1px rgba(0,0,0,0.1) solid;
- width:10em;
- padding:1em;
- box-sizing: border-box;
- position:absolute;
-}
-
-.fzj\.xg\.newWebJugex\.autocomplete input
-{
- width:100%;
-}
-
-.fzj\.xg\.newWebJugex\.vueAutocompleteFormControl
-{
- padding:0;
-}
-.fzj\.xg\.newWebJugex\.padding
-{
- height:2em;
-}
-
-.fzj\.xg\.newWebJugex\.spacer
-{
- height: 0.5em;
-}
-
-.fzj\.xg\.newWebJugex\.geneBtns
-{
- height:34px;
-}
-
-#fzj\.xg\.newWebJugex\.container [webjugex-tooltip]
-{
- position: relative;
-}
-
-#fzj\.xg\.newWebJugex\.container [webjugex-tooltip]:after
-{
- content: attr(webjugex-tooltip);
- position: absolute;
- top: 3em;
- right: 0;
- color:white;
- background-color:rgba(0,0,0,0.7);
- width: 10em;
- white-space: normal;
- display: inline-block;
- padding: 0.2em;
- pointer-events: none;
- transition: all 0.2s;
- opacity: 0;
-}
-
-#fzj\.xg\.newWebJugex\.container [webjugex-tooltip]:hover:after
-{
- opacity: 1;
-}
-
-#fzj\.xg\.newWebJugex\.container .btn-inactive
-{
- transition: all 0.2s;
- color:rgba(0,0,0,0.5);
- text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15),
- -1px 0 0 rgba(0, 0, 0, 0.15),
- 0 1px 0 rgba(0, 0, 0, 0.15),
- 0 -1px 0 rgba(0, 0, 0, 0.15);
-}
-
-#fzj\.xg\.newWebJugex\.container .btn-active
-{
- transition: all 0.2s;
- color:rgba(200, 255, 125, 1.0);
- text-shadow: 1px 0 0 rgba(0, 255, 0, 0.15),
- -1px 0 0 rgba(0, 255, 0, 0.15),
- 0 1px 0 rgba(0, 255, 0, 0.15),
- 0 -1px 0 rgba(0, 255, 0, 0.15);
-}
-
-#fzj\.xg\.newWebJugex\.result
-{
- padding: 0.5em;
-}
-
-#fzj\.xg\.newWebJugex\.result .fzj\.xg\.newWebJugex\.spinner
-{
- animation: thinking 0.7s ease-in-out 0s infinite both;
-}
-
-@keyframes thinking {
- 0% { transform: translateX(0px); }
- 50% { transform: translateX(10px); }
- 100% { transform: translateX(0px); }
-}
-
-
-.fzj\.xg\.newWebJugex\.analysisCard\.container
-{
- margin-bottom: 0;
-}
-
-
-[darktheme="true"] #fzj\.xg\.newWebJugex\.container .checkbox-dial
-{
- background-color:rgba(210,210,210,1.0);
-}
-
-[darktheme="true"] #fzj\.xg\.newWebJugex\.container .checkbox-on
-{
- background-color:rgba(50,150,50,1.0);
-}
-</style>
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/vendor.js b/src/plugin_examples/newWebJugex/vendor.js
deleted file mode 100644
index 5fb83edbbbe9eb341864442a7a1ced49cdd52eb5..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/vendor.js
+++ /dev/null
@@ -1,2 +0,0 @@
-webpackJsonp([1],{"FZ+f":function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(i=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),s=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[n].concat(s).concat([o]).join("\n")}var i;return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var s=this[o][0];"number"==typeof s&&(r[s]=!0)}for(o=0;o<e.length;o++){var i=e[o];"number"==typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),t.push(i))}},t}},"VU/8":function(e,t){e.exports=function(e,t,n,r,o,s){var i,a=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(i=e,a=e.default);var c,d="function"==typeof a?a.options:a;if(t&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0),n&&(d.functional=!0),o&&(d._scopeId=o),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=c):r&&(c=r),c){var f=d.functional,p=f?d.render:d.beforeCreate;f?(d._injectStyles=c,d.render=function(e,t){return c.call(t),p(e,t)}):d.beforeCreate=p?[].concat(p,c):[c]}return{esModule:i,exports:a,options:d}}},rjj0:function(e,t,n){var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o=n("tTVk"),s={},i=r&&(document.head||document.getElementsByTagName("head")[0]),a=null,u=0,c=!1,d=function(){},f=null,p="data-vue-ssr-id",l="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(e){for(var t=0;t<e.length;t++){var n=e[t],r=s[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(g(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var i=[];for(o=0;o<n.parts.length;o++)i.push(g(n.parts[o]));s[n.id]={id:n.id,refs:1,parts:i}}}}function v(){var e=document.createElement("style");return e.type="text/css",i.appendChild(e),e}function g(e){var t,n,r=document.querySelector("style["+p+'~="'+e.id+'"]');if(r){if(c)return d;r.parentNode.removeChild(r)}if(l){var o=u++;r=a||(a=v()),t=b.bind(null,r,o,!1),n=b.bind(null,r,o,!0)}else r=v(),t=function(e,t){var n=t.css,r=t.media,o=t.sourceMap;r&&e.setAttribute("media",r);f.ssrId&&e.setAttribute(p,t.id);o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}e.exports=function(e,t,n,r){c=n,f=r||{};var i=o(e,t);return h(i),function(t){for(var n=[],r=0;r<i.length;r++){var a=i[r];(u=s[a.id]).refs--,n.push(u)}t?h(i=o(e,t)):i=[];for(r=0;r<n.length;r++){var u;if(0===(u=n[r]).refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete s[u.id]}}}};var m,y=(m=[],function(e,t){return m[e]=t,m.filter(Boolean).join("\n")});function b(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,o);else{var s=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(s,i[t]):e.appendChild(s)}}},tTVk:function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var s=t[o],i=s[0],a={id:e+":"+o,css:s[1],media:s[2],sourceMap:s[3]};r[i]?r[i].parts.push(a):n.push(r[i]={id:i,parts:[a]})}return n}}});
-//# sourceMappingURL=vendor.js.map
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/vendor.js.map b/src/plugin_examples/newWebJugex/vendor.js.map
deleted file mode 100644
index a131d0fce8463cf91152d8d8e4831cd591eacf39..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/vendor.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./node_modules/css-loader/lib/css-base.js","webpack:///./node_modules/vue-loader/lib/component-normalizer.js","webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js","webpack:///./node_modules/vue-style-loader/lib/listToStyles.js"],"names":["module","exports","useSourceMap","list","toString","this","map","item","content","cssMapping","btoa","sourceMapping","sourceMap","unescape","encodeURIComponent","JSON","stringify","sourceURLs","sources","source","sourceRoot","concat","join","cssWithMappingToString","i","modules","mediaQuery","alreadyImportedModules","length","id","push","rawScriptExports","compiledTemplate","functionalTemplate","injectStyles","scopeId","moduleIdentifier","esModule","scriptExports","type","default","hook","options","render","staticRenderFns","_compiled","functional","_scopeId","context","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","call","_registeredComponents","add","_ssrRegister","existing","beforeCreate","_injectStyles","h","hasDocument","document","DEBUG","Error","listToStyles","__webpack_require__","stylesInDom","head","getElementsByTagName","singletonElement","singletonCounter","isProduction","noop","ssrIdKey","isOldIE","navigator","test","userAgent","toLowerCase","addStylesToDom","styles","domStyle","refs","j","parts","addStyle","createStyleElement","styleElement","createElement","appendChild","obj","update","remove","querySelector","parentNode","removeChild","styleIndex","applyToSingletonTag","bind","css","media","setAttribute","ssrId","styleSheet","cssText","firstChild","createTextNode","newObj","parentId","_isProduction","_options","newList","mayRemove","textStore","replaceText","index","replacement","filter","Boolean","cssNode","childNodes","insertBefore","newStyles","part"],"mappings":"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","file":"static/js/vendor.js","sourcesContent":["/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader/lib/css-base.js\n// module id = FZ+f\n// module chunks = 1","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file.\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nmodule.exports = function normalizeComponent (\n rawScriptExports,\n compiledTemplate,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier /* server only */\n) {\n var esModule\n var scriptExports = rawScriptExports = rawScriptExports || {}\n\n // ES6 modules interop\n var type = typeof rawScriptExports.default\n if (type === 'object' || type === 'function') {\n esModule = rawScriptExports\n scriptExports = rawScriptExports.default\n }\n\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (compiledTemplate) {\n options.render = compiledTemplate.render\n options.staticRenderFns = compiledTemplate.staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = injectStyles\n }\n\n if (hook) {\n var functional = options.functional\n var existing = functional\n ? options.render\n : options.beforeCreate\n\n if (!functional) {\n // inject component registration as beforeCreate hook\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n } else {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functioal component in vue file\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return existing(h, context)\n }\n }\n }\n\n return {\n esModule: esModule,\n exports: scriptExports,\n options: options\n }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/component-normalizer.js\n// module id = VU/8\n// module chunks = 1","/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n if (!hasDocument) {\n throw new Error(\n 'vue-style-loader cannot be used in a non-browser environment. ' +\n \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n ) }\n}\n\nvar listToStyles = require('./listToStyles')\n\n/*\ntype StyleObject = {\n id: number;\n parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n css: string;\n media: string;\n sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n [id: number]: {\n id: number,\n refs: number,\n parts: Array<(obj?: StyleObjectPart) => void>\n }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nmodule.exports = function (parentId, list, _isProduction, _options) {\n isProduction = _isProduction\n\n options = _options || {}\n\n var styles = listToStyles(parentId, list)\n addStylesToDom(styles)\n\n return function update (newList) {\n var mayRemove = []\n for (var i = 0; i < styles.length; i++) {\n var item = styles[i]\n var domStyle = stylesInDom[item.id]\n domStyle.refs--\n mayRemove.push(domStyle)\n }\n if (newList) {\n styles = listToStyles(parentId, newList)\n addStylesToDom(styles)\n } else {\n styles = []\n }\n for (var i = 0; i < mayRemove.length; i++) {\n var domStyle = mayRemove[i]\n if (domStyle.refs === 0) {\n for (var j = 0; j < domStyle.parts.length; j++) {\n domStyle.parts[j]()\n }\n delete stylesInDom[domStyle.id]\n }\n }\n }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n for (var i = 0; i < styles.length; i++) {\n var item = styles[i]\n var domStyle = stylesInDom[item.id]\n if (domStyle) {\n domStyle.refs++\n for (var j = 0; j < domStyle.parts.length; j++) {\n domStyle.parts[j](item.parts[j])\n }\n for (; j < item.parts.length; j++) {\n domStyle.parts.push(addStyle(item.parts[j]))\n }\n if (domStyle.parts.length > item.parts.length) {\n domStyle.parts.length = item.parts.length\n }\n } else {\n var parts = []\n for (var j = 0; j < item.parts.length; j++) {\n parts.push(addStyle(item.parts[j]))\n }\n stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n }\n }\n}\n\nfunction createStyleElement () {\n var styleElement = document.createElement('style')\n styleElement.type = 'text/css'\n head.appendChild(styleElement)\n return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n var update, remove\n var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n if (styleElement) {\n if (isProduction) {\n // has SSR styles and in production mode.\n // simply do nothing.\n return noop\n } else {\n // has SSR styles but in dev mode.\n // for some reason Chrome can't handle source map in server-rendered\n // style tags - source maps in <style> only works if the style tag is\n // created and inserted dynamically. So we remove the server rendered\n // styles and inject new ones.\n styleElement.parentNode.removeChild(styleElement)\n }\n }\n\n if (isOldIE) {\n // use singleton mode for IE9.\n var styleIndex = singletonCounter++\n styleElement = singletonElement || (singletonElement = createStyleElement())\n update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n } else {\n // use multi-style-tag mode in all other cases\n styleElement = createStyleElement()\n update = applyToTag.bind(null, styleElement)\n remove = function () {\n styleElement.parentNode.removeChild(styleElement)\n }\n }\n\n update(obj)\n\n return function updateStyle (newObj /* StyleObjectPart */) {\n if (newObj) {\n if (newObj.css === obj.css &&\n newObj.media === obj.media &&\n newObj.sourceMap === obj.sourceMap) {\n return\n }\n update(obj = newObj)\n } else {\n remove()\n }\n }\n}\n\nvar replaceText = (function () {\n var textStore = []\n\n return function (index, replacement) {\n textStore[index] = replacement\n return textStore.filter(Boolean).join('\\n')\n }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n var css = remove ? '' : obj.css\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = replaceText(index, css)\n } else {\n var cssNode = document.createTextNode(css)\n var childNodes = styleElement.childNodes\n if (childNodes[index]) styleElement.removeChild(childNodes[index])\n if (childNodes.length) {\n styleElement.insertBefore(cssNode, childNodes[index])\n } else {\n styleElement.appendChild(cssNode)\n }\n }\n}\n\nfunction applyToTag (styleElement, obj) {\n var css = obj.css\n var media = obj.media\n var sourceMap = obj.sourceMap\n\n if (media) {\n styleElement.setAttribute('media', media)\n }\n if (options.ssrId) {\n styleElement.setAttribute(ssrIdKey, obj.id)\n }\n\n if (sourceMap) {\n // https://developer.chrome.com/devtools/docs/javascript-debugging\n // this makes source maps inside style tags work properly in Chrome\n css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n // http://stackoverflow.com/a/26603875\n css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n }\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild)\n }\n styleElement.appendChild(document.createTextNode(css))\n }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader/lib/addStylesClient.js\n// module id = rjj0\n// module chunks = 1","/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n var styles = []\n var newStyles = {}\n for (var i = 0; i < list.length; i++) {\n var item = list[i]\n var id = item[0]\n var css = item[1]\n var media = item[2]\n var sourceMap = item[3]\n var part = {\n id: parentId + ':' + i,\n css: css,\n media: media,\n sourceMap: sourceMap\n }\n if (!newStyles[id]) {\n styles.push(newStyles[id] = { id: id, parts: [part] })\n } else {\n newStyles[id].parts.push(part)\n }\n }\n return styles\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader/lib/listToStyles.js\n// module id = tTVk\n// module chunks = 1"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/manifest.json b/src/plugin_examples/samplePlugin/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..765339e14a65bceeb5e8fea2a4056ebfa868b894
--- /dev/null
+++ b/src/plugin_examples/samplePlugin/manifest.json
@@ -0,0 +1,11 @@
+{
+ "name":"fzj.xg.samplePlugin",
+ "displayName":"Sample Plugin Display Name (Optional)",
+ "templateURL":"http://localhost:10080/samplePlugin/template.html",
+ "scriptURL":"http://localhost:10080/samplePlugin/script.js",
+ "initState":{
+ "hello": "world",
+ "foo": "bar"
+ },
+ "initStateUrl":"http://localhost:10080/samplePlugin/optionalInitStateJson.json"
+}
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/optionalInitStateJson.json b/src/plugin_examples/samplePlugin/optionalInitStateJson.json
new file mode 100644
index 0000000000000000000000000000000000000000..8b478475478e55bd6855b11061661c5ed524b5c9
--- /dev/null
+++ b/src/plugin_examples/samplePlugin/optionalInitStateJson.json
@@ -0,0 +1,3 @@
+{
+ "foo2": "bar2"
+}
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/script.js b/src/plugin_examples/samplePlugin/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..1dbd080572707585356a699dc4f76d7f944325aa
--- /dev/null
+++ b/src/plugin_examples/samplePlugin/script.js
@@ -0,0 +1,9 @@
+/**
+ * use IIEF to avoid scope poisoning
+ */
+(() => {
+ const PLUGIN_NAME = 'fzj.xg.samplePlugin'
+ const initState = window.interactiveViewer.pluginControl[PLUGIN_NAME].initState
+ const initUrl = window.interactiveViewer.pluginControl[PLUGIN_NAME].initStateUrl
+ console.log(initState, initUrl)
+})()
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/template.html b/src/plugin_examples/samplePlugin/template.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/plugin_examples/testPlugin/manifest.json b/src/plugin_examples/testPlugin/manifest.json
deleted file mode 100644
index f59a172f48d5743665ef42219d84da73292e2bca..0000000000000000000000000000000000000000
--- a/src/plugin_examples/testPlugin/manifest.json
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"fzj.xg.test","type":"plugin","templateURL":"http://localhost:10080/testPlugin/template.html","scriptURL":"http://localhost:10080/testPlugin/script.js"}
diff --git a/src/plugin_examples/testPlugin/script.js b/src/plugin_examples/testPlugin/script.js
deleted file mode 100644
index e805a1924e712fdd43e1bd4d8d98bf2267c76893..0000000000000000000000000000000000000000
--- a/src/plugin_examples/testPlugin/script.js
+++ /dev/null
@@ -1,9 +0,0 @@
-(()=>{
- setTimeout(()=>{
- const el = document.getElementById('testplugin-id')
- const newel = document.createElement('div')
- newel.innerHTML = `hello new owrld`
- el.appendChild(newel)
-
- },100)
-})()
\ No newline at end of file
diff --git a/src/plugin_examples/testPlugin/template.html b/src/plugin_examples/testPlugin/template.html
deleted file mode 100644
index 14e0ebf75e7171960e9d2830e6cfe720dc650819..0000000000000000000000000000000000000000
--- a/src/plugin_examples/testPlugin/template.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id = "testplugin-id">
- hello world
-</div>