const {fileURL} = require('./utils.js') const path = require('path') const electron = require('electron'); /* A specialization that ignores webview events and thus allows * webviews to get touch, mouse and wheel events. */ class DOMPadContainer extends DOMScatterContainer { capture(event) { if (event.target.tagName === 'WEBVIEW' || event.target.classList.contains('interactiveElement')) return false return super.capture(event) } } /* A wrapper for a webview that behaves like a virtual tablet browser. * Uses a DOMScatter to zoom and rotate the virtual browser window. * The position of buttons and the border size remain constant. */ class Pad { constructor(scatterContainer, { startScale=1.0, minScale=0.25, maxScale=10.5, autoBringToFront=true, title='new Pad', type='pad', url="https://www.iwm-tuebingen.de/www/index.html", hideOnStart=false, translatable=true, scalable=true, rotatable=true, movableX=true, movableY=true, rotationDegrees=null, rotation=null, onTransform=null, transformOrigin = 'center center', // extras which are in part needed x=0, y=0, width=null, height=null, resizable=false, } ={}) { this.x = x this.y = y this.type = type this.title=title this.url = url this.hideOnStart = hideOnStart this.width = width this.height = height this.minScale = minScale this.maxScale = maxScale this.scatterContainer = scatterContainer this.startScale = startScale this.scale = startScale this.scalable = scalable this.rotatable = rotatable this.rotationDegrees = this.startRotationDegrees this.transformOrigin = transformOrigin this.frame = document.createElement('div') this.frame.classList.add("pad") this.border = 50 / startScale Elements.setStyle(this.frame, { backgroundColor: "#333", position: "absolute", display: 'flex', width: this.width+"px", height: this.height+"px", top: 0, left: 0, visibility: "visible", // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`, // borderRadius: '10px', overflow: "visible"}) document.body.appendChild( this.frame) this.web=document.createElement("webview") this.webBackground=document.createElement("div") this.webViewSnapshot=document.createElement("img") this.overlay = document.createElement('div') this.loadAnim = document.createElement("div") this.loadAnim.style.webkitAnimation= "spin 2s linear infinite" this.loadAnim.style.animation= "spin 2s linear infinite" this.loadAnim.style.position = "absolute" document.styleSheets[0].insertRule('\ @keyframes spin {\ from { transform: rotateZ(0deg); }\ to { transform: rotateZ(360deg); }\ }' ) this.overlay.appendChild(this.loadAnim) Elements.setStyle(this.web, { position: "absolute", overflow: "auto", border: "1px solid #fff" }) Elements.setStyle(this.webBackground, { position: "absolute", overflow: "auto", background: "white" }) Elements.setStyle(this.overlay, { position: "absolute", overflow: "auto", background: "white", opacity: "0.8" }) Elements.setStyle(this.webViewSnapshot, { position: "absolute", overflow: "auto" }) this.frame.appendChild(this.webBackground) this.frame.appendChild(this.web) this.frame.appendChild(this.webViewSnapshot) // this.frame.appendChild(this.overlay) this.webViewSnapshot.style.visibility="hidden" this.web.src=url this.web.preload= path.join(__dirname, './preloadPad.js') this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close") this.backButton = this.addButton("../assets/icons/svg/left.svg", "go back") this.forwardButton = this.addButton("../assets/icons/svg/right.svg", "go forward") this.backButton.style.opacity = 0.5 this.forwardButton.style.opacity = 0.5 /*for (let callback of window.padLoadedHandler) { callback(this, url) }*/ this.layout() this.web.addEventListener('new-window', (e) => { if(e.url.indexOf("youtube")>-1)return if (urlPadMap.has(e.url)) { let childPad = urlPadMap.get(e.url) childPad.scatter.moveTo(x, y) return childPad } let childPad = new Pad(this.scatterContainer, { x: this.scatter.position.x+100, y: this.scatter.position.y+100, url: e.url, width: this.scatter.width, height: this.scatter.height, scalable: true, rotatable: true}) urlPadMap.set(e.url, childPad) for(let callback of window.padLoadedHandler) { callback(childPad, url) } }) this.web.addEventListener('did-navigate', (e) => { this.enableButtons() }) this.web.addEventListener('dom-ready',()=>{ //if(this.url.indexOf('local')>-1)this.web.openDevTools() }) this.web.addEventListener('ipc-message', (e) => { if(e.channel=='webviewPointerDown')this.scatter.bringToFront() }) this.web.addEventListener('did-start-loading', ()=>{ this.overlay.style.visibility="visible" let w = this.overlay.offsetWidth let h = this.overlay.offsetHeight // console.log("did start loading",h,w) let animationSize = w{ this.overlay.style.visibility="hidden" let query="#"+this.title+"expandButton" $(query).css("opacity","1.0") }) this.backButton.addEventListener('click', (e)=>{ if(this.web.canGoBack()){ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.web.goBack() } }) this.forwardButton.addEventListener('click', (e)=>{ if(this.web.canGoForward()){ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.web.goForward() } }) this.closeButton.addEventListener('click', (e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.close() }) this.scatter = new DOMScatter(this.frame, scatterContainer, { x: this.x, y: this.y, startScale: this.startScale, width: this.width, height: this.height, minScale: this.minScale, maxScale: this.maxScale, scalable: this.scalable, resizable: true, rotatable: this.rotatable}) let img=document.createElement("img") img.style.width = "70%" img.style.position = "absolute" img.style.bottom = "20%" img.style.right = "20%" img.style.pointerEvents="none" img.src = "../../assets/icons/png/flat/resize.png" this.scatter.resizeButton.appendChild(img) this.scatter.moveTo({x, y}) this.scatter.bringToFront() this.scatter.addTransformEventCallback((e) => { let newBorder = 50 / e.scale if (newBorder !== this.border) { this.border = newBorder this.layout() } }) } rad2degree(alpha){ return alpha * 180 / Math.PI; } degree2rad(alpha){ return alpha * Math.PI / 180; } close() { // this.frame.style.display="none" this.frame.parentNode.removeChild(this.frame) urlPadMap.delete(this.url) } enableButtons() { this.backButton.style.opacity = (this.web.canGoBack()) ? 1 : 0.5 this.forwardButton.style.opacity = (this.web.canGoForward()) ? 1 : 0.5 } addButton(src, value) { let button = document.createElement("img") button.type = "image" button.className = "frameButton" button.style.position = "absolute" button.src = fileURL(src) button.value="close" button.draggable = false this.frame.appendChild(button) return button } layout() { let b = this.border let b2 = b * 2 let b8 = b / 8 let b25 = b / 25 let b15 = b / 15 Elements.setStyle(this.frame, { // borderRadius: b8 + "px", // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)` }) let size = "calc(100% - " + (2*b+2) +"px)" Elements.setStyle(this.web, { width: size, height: size, margin: b+"px"}) Elements.setStyle(this.webViewSnapshot, { width: size, height: size, margin: b+"px"}) Elements.setStyle(this.webBackground, { width: size, height: size, margin: b+"px"}) Elements.setStyle(this.overlay, { width: size, height: size, margin: b+"px"}) Elements.setStyle(this.closeButton, { right: (b * 1.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.backButton, { left: (b * 0.8) +"px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.forwardButton, { left: (this.border + (b * 0.8)) +"px", bottom: "0px", width: b+"px", height: b+"px"}) } } class PadAccordion { constructor(scatterContainer, { startScale=1.0, minScale=0.25, maxScale=10.5, autoBringToFront=true, type = 'accordion', title="new Pad", urlList=["https://www.iwm-tuebingen.de/www/index.html"], hideOnStart=false, translatable=true, scalable=true, rotatable=true, movableX=true, movableY=true, rotationDegrees=null, rotation=null, onTransform=null, transformOrigin = 'center center', // extras which are in part needed x=0, y=0, width=null, height=null, resizable=false, } ={}) { let w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0] this.pageWidth = w.innerWidth || e.clientWidth || g.clientWidth, this.pageHeight = w.innerHeight|| e.clientHeight|| g.clientHeight this.x = x this.y = y this.type = type this.title=title this.urlList = urlList this.hideOnStart = hideOnStart this.width = width this.height = height this.minScale = minScale this.maxScale = maxScale this.scatterContainer = scatterContainer this.startScale = startScale this.scale = startScale this.scalable = scalable this.rotatable = rotatable this.rotationDegrees = this.startRotationDegrees this.transformOrigin = transformOrigin this.webviewID = 0 this.externalPadID = 0 this.currentWebviewBackground = null this.currentWebviewFrame = null this.currentWebview = null this.currentWebviewImage = null this.currentSource="" this.webviewMap = new Map() this.padMap = new Map() this.frame = document.createElement('div') this.webFrame = document.createElement('div') this.titlebar = document.createElement('div') this.frame.classList.add("pad") this.border = this.pageHeight*0.023148 / startScale this.zIndex=1000 this.numWebviewsReady = 0 this.closeAllButton = this.addButton("../assets/icons/png/flat/clear_all.png", "close all") this.closeButton = this.addButton("../assets/icons/png/flat/clear.png", "close") this.backButton = this.addButton("../assets/icons/svg/left.svg", "go back") this.forwardButton = this.addButton("../assets/icons/svg/right.svg", "go forward") this.expandButton = this.addButton("../assets/icons/png/flat/launch.png", "expand") this.expandButton.id=this.title+"expandButton" this.backButton.style.opacity = 0.5 this.forwardButton.style.opacity = 0.5 /*let pad = new Pad(nodePadContainer, { x: 500, y: 200, title: this.title, url: "var/blank.html", startScale:1, hideOnStart: false, width: 1500, height: 1500, scalable: true, rotatable: false}) this.bufferPad=pad*/ // this.bufferPad.frame.id = this.title+"bufferPadFrame" // this.bufferPad.web.id = this.title+"bufferPadWeb" // this.bufferPad.frame.style.visibility="hidden" Elements.setStyle(this.frame, { backgroundColor: "#333", position: "absolute", width: this.width+"px", height: this.height+"px", visibility: "visible", top: 0, left: 0 // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`, // borderRadius: '10px', }) Elements.setStyle(this.webFrame, { backgroundColor: "#333", position: "absolute", // display: 'flex', // flexFlow: "row no-wrap", overflowX: "hidden", width: "100%", height: "80%", top: 0, left: 0 // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`, // borderRadius: '10px', }) this.titlebar.innerHTML = this.title Elements.setStyle(this.titlebar, { color: "#fff", // backgroundColor: "#F53", // innerHTML:"title", position: "absolute", // display: 'flex', // flexFlow: "row no-wrap", overflowX: "hidden" }) this.clicker=document.createElement('div') Elements.setStyle(this.clicker, { backgroundColor: "#F53", position: "absolute", width: "60px", height: "50px", bottom: 0, left: 0 // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`, // borderRadius: '10px', }) document.body.appendChild( this.frame) this.frame.appendChild( this.webFrame) this.frame.appendChild( this.titlebar) // this.frame.appendChild( this.clicker) this.clicker.addEventListener('click',(e)=>{ this.arrangeWebviews() }) for(var i=0; i { if(e.url.indexOf("youtube")>-1)return if (urlPadMap.has(e.url)) { let childPad = urlPadMap.get(e.url) childPad.scatter.moveTo(x, y) return childPad } let childPad = new Pad(this.scatterContainer, { x: this.scatter.position.x+100, y: this.scatter.position.y+100, url: e.url, width: this.scatter.width, height: this.scatter.height, scalable: true, rotatable: true}) urlPadMap.set(e.url, childPad) for(let callback of window.padLoadedHandler) { callback(childPad, url) } }) this.web.addEventListener('did-navigate', (e) => { this.enableButtons() }) this.web.addEventListener('dom-ready',()=>{ //if(this.url.indexOf('local')>-1)this.web.openDevTools() }) this.web.addEventListener('ipc-message', (e) => { if(e.channel=='webviewPointerDown')this.scatter.bringToFront() }) this.web.addEventListener('did-start-loading', ()=>{ this.overlay.style.visibility="visible" let w = this.overlay.offsetWidth let h = this.overlay.offsetHeight console.log("did start loading",h,w) let animationSize = w{ this.overlay.style.visibility="hidden" })*/ this.scatter = new DOMScatter(this.frame, scatterContainer, { x: this.x, y: this.y, startScale: this.startScale, width: this.width, height: this.height, minScale: this.minScale, maxScale: this.maxScale, scalable: this.scalable, resizable: true, rotatable: this.rotatable}) let img=document.createElement("img") img.style.width = "70%" img.style.position = "absolute" img.style.bottom = "20%" img.style.right = "20%" img.style.pointerEvents="none" img.src = "../../assets/icons/png/flat/resize.png" this.scatter.resizeButton.appendChild(img) this.scatter.moveTo({x, y}) this.scatter.bringToFront() this.currentWebviewHeight = 0 this.scatter.element.addEventListener('resized',(e)=>{ // $(this.webFrame).find('.accordionWebimage').css('height',this.currentWebviewHeight) this.arrangeWebviews() // console.log("resized",e,e.detail) }) this.scatter.element.addEventListener('resizeStarted',()=>{ // this.currentWebviewHeight = this.webFrame.offsetHeight // console.log("resizeStarted") }) this.scatter.element.addEventListener('resizeEnded',()=>{ /*let h = this.webFrame.offsetHeight let cWebview = this.currentWebview $(this.webFrame).find('.accordionWebview').each(function(i, obj) { // obj.style.visibility="visible" if(obj!=cWebview){ obj.style.visibility="visible" obj.capturePage((image)=>{ obj.parentElement.childNodes[3].src=image.toDataURL() obj.style.visibility="hidden" $(this.webFrame).find('.accordionWebimage').css('height',h) }) } })*/ // console.log("resizeEnded") }) this.scatter.addTransformEventCallback((e) => { let newBorder = this.pageHeight*0.023148 / e.scale if (newBorder !== this.border) { this.border = newBorder this.layout() } else{ } }) this.layout() this.backButton.addEventListener('click', (e)=>{ if(this.currentWebview.canGoBack()){ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.currentWebview.goBack() } }) this.forwardButton.addEventListener('click', (e)=>{ if(this.currentWebview.canGoForward()){ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.currentWebview.goForward() } }) this.closeAllButton.addEventListener('click', (e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.close() }) this.closeButton.addEventListener('click', (e)=>{ if(this.webviewMap.size>1)this.removeWebView() }) this.expandButton.addEventListener('click',(e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.externalPadID++ let newPadKey=this.title+this.externalPadID console.log("NEW PAD KEY",newPadKey) // console.log("expanding",this.currentWebview.getTitle()) // console.log("expanding",this.currentWebview.getURL()) let newPad= new minimalPad(nodePadContainer, { x: 500, y: 200, padMapKey: newPadKey, title: this.title+" - "+ this.expandButton.getAttribute('source'),//this.currentWebview.getTitle(), urlList: [this.currentWebview.src], startScale:1, hideOnStart: false, width: this.pageWidth*0.3906, height: this.pageWidth*0.3906, scalable: true, rotatable: false}) urlPadMap.set(newPadKey,newPad) /* document.getElementById(this.title+"bufferPadFrame").style.visibility="visible" document.getElementById(this.title+"bufferPadFrame").id="" document.getElementById(this.title+"bufferPadWeb").id=""*/ /*if(e.target.style.opacity=="1"){ this.bufferPad.frame.style.visibility="visible" this.bufferPad.scatter.bringToFront() // this.bufferPad.frame.id="" // this.bufferPad.web.id="" let newPad= new Pad(nodePadContainer, { x: 500, y: 200, title: this.title, url: "var/blank.html", startScale:1, hideOnStart: false, width: 1500, height: 1500, scalable: true, rotatable: false}) this.bufferPad=newPad // newPad.web.src=this.currentWebview.src // this.bufferPad.frame.id = this.title+"bufferPadFrame" // this.bufferPad.web.id = this.title+"bufferPadWeb" this.bufferPad.frame.style.visibility = "hidden" this.bufferPad.web.src=this.currentWebview.src }*/ }) // TweenMax.to(this.frame,0,{opacity:"0.001"}) } removeWebView(){ let webVIewRemovedID=parseInt(this.currentWebview.getAttribute('id')) this.webviewMap.delete(webVIewRemovedID) this.webFrame.removeChild(this.currentWebview.parentNode) let cWeb = null let cWebviewFrame = null this.webviewMap.forEach(function (entry, key) { cWeb = entry.childNodes[3] cWebviewFrame = entry }) this.currentWebview = cWeb this.currentWebviewFrame = cWebviewFrame this.currentSource = cWeb.src this.bringWebToFront() } appendWebView(newUrl,source){ let fs = nodeRequire("fs") let web=document.createElement("webview") let webOffloading=document.createElement("webview") let webImage=document.createElement("img") let heinz=document.createElement("img") let webBackground=document.createElement("div") let webviewFrame=document.createElement("div") let shadow=document.createElement("img") let shadowReverse=document.createElement("img") let overlay = document.createElement('img') let progressBar = document.createElement('div') web.setAttribute("plugins",true) web.classList.add("accordionWebview") // web.classList.add("interactiveElement") webviewFrame.classList.add("accordionWebviewFrame") shadow.classList.add("accordionWebviewShadow") shadowReverse.classList.add("accordionWebviewShadow") webBackground.classList.add("accordionWebviewBackground") webBackground.setAttribute('source',source) webImage.classList.add("accordionWebimage") overlay.classList.add("accordionOverlay") overlay.src="img/overlay.png" webviewFrame.classList.add("interactiveElement") webBackground.classList.add("interactiveElement") webImage.classList.add("interactiveElement") overlay.classList.add("interactiveElement") web.classList.add("interactiveElement") let loadAnim = document.createElement("div") loadAnim.style.webkitAnimation= "spin 2s linear infinite" loadAnim.style.animation= "spin 2s linear infinite" loadAnim.style.position = "absolute" document.styleSheets[0].insertRule('\ @keyframes spin {\ from { transform: rotateZ(0deg); }\ to { transform: rotateZ(360deg); }\ }' ) // overlay.appendChild(loadAnim) // webBackground.className= "item" Elements.setStyle(webviewFrame, { position: "absolute", overflow: "hidden", top: "0px", left: this.webviewID*50+"px", // display:"flex", width: "20%", left: "0%", // minWidth:"5px", // maxWidth:"500px", height: "100%" // pointerEvents: 'none', // boxShadow: "-5px 5px 50px 10px #555", // border:"2px solid blue", // overflow: "hidden", // overflowX: "scroll", // flex: "0 0 50%", // whiteSpace: "nowrap", }) Elements.setStyle(webBackground, { position: "absolute", overflow: "hidden", left: "5%", // display:"flex", width: "90%", // pointerEvents: 'none', // minWidth:"5px", // maxWidth:"500px", height: "100%", // boxShadow: "-5px 5px 50px 10px #555", // border:"2px solid blue", // overflow: "hidden", // overflowX: "scroll", // flex: "0 0 50%", // whiteSpace: "nowrap", background: "white" }) shadow.src = "img/shadow.png" Elements.setStyle(shadow, { position: "absolute", overflow: "hidden", top: "0px", left: "95%", width: "5%", height: "100%", // background: "#252", // opacity: "0.1", pointerEvents:"none" }) shadowReverse.src = "img/shadowReverse.png" Elements.setStyle(shadowReverse, { position: "absolute", overflow: "hidden", top: "0px", left: "0%", width: "5%", height: "100%", // background: "#252", // opacity: "0.1", pointerEvents:"none" }) Elements.setStyle(web, { position: "absolute", overflow: "hidden", top: "0px", left: "5%", width: "90%", // pointerEvents: 'none', // filter: "blur(10px)", // display: "none", visibility: "hidden", // border: "1px solid #fff", height: "100%" }) Elements.setStyle(webOffloading, { position: "absolute", overflow: "hidden", top: "0px", left: "-100%", width: "90%", // pointerEvents: 'none', // filter: "blur(10px)", // display: "none", visibility: "visible", // border: "1px solid #fff", height: "100%" }) Elements.setStyle(webImage, { position: "absolute", overflow: "hidden", top: "0px", left: "5%", width: "90%", height: this.webFrame.offsetHeight+"px", pointerEvents: 'none', // display: "none", visibility: "visible" // border: "1px solid #fff", }) Elements.setStyle(heinz, { position: "absolute", overflow: "hidden", top: "0px", left: "0px", width: "100%", background: "pink", // display: "none", visibility: "visible", // border: "1px solid #fff", height: "100%" }) Elements.setStyle(overlay, { position: "absolute", overflow: "hidden", top: "0px", left: "5%", // background: "pink", // pointerEvents: 'none', width: "90%", height: "100%" // opacity: "0.1" }) Elements.setStyle(progressBar, { position: "absolute", overflow: "hidden", top: "0%", left: "10%", visibility: "hidden", background: "white", filter: "blur(50px)", opacity: "0.2", // pointerEvents: 'none', width: "40%", height: "100%" // opacity: "0.1" }) this.currentWebviewFrame=webviewFrame this.currentWebviewBackground=webBackground this.currentWebview = web this.currentWebviewImage = webImage this.currentSource = source // document.body.appendChild(webOffloading) this.webFrame.appendChild(webviewFrame) webviewFrame.appendChild(webBackground) webviewFrame.appendChild(shadow) webviewFrame.appendChild(shadowReverse) webviewFrame.appendChild(web) webviewFrame.appendChild(webImage) // webBackground.appendChild(heinz) webviewFrame.appendChild(overlay) webviewFrame.appendChild(progressBar) web.setAttribute('id',this.webviewID) web.setAttribute('isLoading','true') this.webviewMap.set(this.webviewID, webviewFrame) this.webviewID++ web.src=newUrl webOffloading.src=newUrl // web.src="https://www.golem.de/" // console.log("Appending WebView",newUrl) // // document.getElementById(this.title+"bufferPadWeb").src=newUrl // webImage.src='var/'+source+'.png' web.preload= path.join(__dirname, './preloadPad.js') web.addEventListener('ipc-message', (e) => { if(e.channel=='webviewPointerDown')this.scatter.bringToFront() }) web.addEventListener('did-fail-load',()=>{ console.log("failed loading",newUrl) }) let obj = { blur: 2 } let loadAnimation = new TimelineMax({repeat:-1}) // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 5,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) ) // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 2,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) ) loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"50%"}) ) loadAnimation.add( TweenMax.to(progressBar, 0, {left:"20%"}) ) loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"50%"}) ) loadAnimation.stop() // loadAnimation.add( TweenLite.to(web, 1, {filter:"blur(0px)"}) ); web.addEventListener('did-start-loading', ()=>{ web.setAttribute('isLoading','true') loadAnimation.play() overlay.style.visibility="visible" progressBar.style.visibility="visible" web.style.filter = "blur(10px)" overlay.style.pointerEvents="none" // web.style.filter = "blur(10px)" // console.log('did-start-loading') // loadAnim.style.visibility="visible" let w = overlay.offsetWidth let h = overlay.offsetHeight // console.log("accordion webview did start loading",h,w) /*let animationSize = w{ /*let win = new BrowserWindow({width: 800, height: 600, x: -1000, y: -1000, webPreferences: {offscreen: true}}) win.webContents.on('paint', (event, dirty, image) => { webImage.src=image.toDataURL() win.close() }) win.loadURL(newUrl)*/ if(this.currentWebview==web)overlay.style.visibility="hidden" overlay.style.pointerEvents="all" // loadAnimation.stop() loadAnimation.stop() progressBar.style.visibility="hidden" web.style.filter = "blur(0px)" web.setAttribute('isLoading','false') // console.log('did-stop-loading') // loadAnim.style.visibility="hidden" if(web==this.currentWebview){ // this.bufferPad.web.src=web.src } if(web!=this.currentWebview){ } // if(this.webviewID{ // webImage.src=image.toDataURL() })*/ // console.log('did-stop-loading',webImage) }) /*web.addEventListener('did-navigate', ()=>{ console.log('did-navigate') web.capturePage((image)=>{ webImage.src=image.toDataURL() }) }) web.addEventListener('did-navigate-in-page', ()=>{ console.log('did-navigate-in-page') web.capturePage((image)=>{ webImage.src=image.toDataURL() }) }) web.addEventListener('did-frame-finish-load', ()=>{ console.log('did-frame-finish-load') web.capturePage((image)=>{ webImage.src=image.toDataURL() }) }) web.addEventListener('load-commit', ()=>{ console.log('load-commit') web.capturePage((image)=>{ webImage.src=image.toDataURL() }) }) web.addEventListener('page-title-updated', ()=>{ console.log('page-title-updated') web.capturePage((image)=>{ webImage.src=image.toDataURL() }) })*/ /*let phantom = require('phantom') let date = new Date() let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/PhantomScreenshots/phantom_'+source+date.getMinutes()+date.getSeconds()+'.png') if (fs.existsSync(captureFile)) { fs.unlink(captureFile, (err) => { if (err) { return } console.log("File succesfully deleted") }) } phantom.create().then(function(ph) { ph.createPage().then(function(page) { page.open(web.src).then(function(status) { page.render(captureFile).then(function(){ let tmpIMG=document.createElement('img') tmpIMG.src=captureFile tmpIMG.addEventListener('load',()=>{ webImage.src=captureFile webImage.style.height = tmpIMG.height+"px" // webImage.style.width = tmpIMG.width+"px" }) }) }) }) })*/ web.addEventListener('dom-ready', ()=>{ /*let id=this.webviewID let nextURL = this.urlList[id].url let nextSource = this.urlList[id].source*/ // webImage.src='var/'+source+'.png' // console.log('dom-ready') web.setAttribute('isLoading','false') if(web==this.currentWebview){ // this.bufferPad.web.src=web.src } if(web!=this.currentWebview){ } /* this.currentWebviewBackground = web.parentElement this.currentWebview = web this.currentSource = source this.arrangeWebviews()*/ let captureRect = { x: 0, y: 0, width: 2000, height: 4000 } web.capturePage(captureRect,function(image) { webImage.src=image.toDataURL() console.log("web.capturePage",newUrl) let buf = image.toPNG() let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/'+source+'.png') fs.writeFile(captureFile, buf, function(err) { if (err) { console.log("ERROR Failed to save file", err) } else{ } }) }) /*this.numWebviewsReady++ if(this.numWebviewsReady==7){ this.arrangeWebviews() TweenMax.to(this.frame,0.0,{opacity:"1"}) }*/ /* web.capturePage((image)=>{ // webImage.src='var/cosmic.png' // console.log("Captured after Load",web.src) webImage.src=image.toDataURL() /* let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/'+source+'.png') let buf = image.toPng() fs.writeFile(captureFile, buf, function(err) { if (err) { console.log("ERROR Failed to save file", err) } else{ } })*/ //}) this.backButton.style.opacity = (web.canGoBack()) ? 1 : 0.5 this.forwardButton.style.opacity = (web.canGoForward()) ? 1 : 0.5 // webImage.style.display="inline" // web.openDevTools() }) web.addEventListener('new-window', (e) => { this.appendWebView(e.url) console.log("this.currentSource",source) this.urlList.push({'url':e.url,'source':source}) }) overlay.addEventListener('click',(e)=>{ // console.log("Overlay wurde geklickt",this.currentWebview.src) e.stopPropagation() e.preventDefault() this.currentWebview.capturePage((image)=>{ console.log(this.webFrame.offsetHeight) this.currentWebviewImage.style.height = this.webFrame.offsetHeight+"px"//"100%" this.currentWebviewImage.src=image.toDataURL() this.currentWebviewFrame = e.target.parentElement // this.bringWebToFront() e.target.style.visibility="hidden" this.currentSource=source this.expandButton.setAttribute('source',source) this.currentWebviewFrame = e.target.parentElement this.currentWebview = web this.currentSource = source this.currentWebviewImage = webImage this.arrangeWebviews() // this.bufferPad.web.src=web.src this.backButton.style.opacity = (web.canGoBack()) ? 1 : 0.5 this.forwardButton.style.opacity = (web.canGoForward()) ? 1 : 0.5 }) //e.target.parentElement.style.zIndex=this.zIndex }) /*overlay.addEventListener('click',(e)=>{ e.stopPropagation() e.preventDefault() this.currentWebviewBackground = e.target.parentElement this.bringWebToFront() e.target.style.visibility="hidden" //e.target.parentElement.style.zIndex=this.zIndex })*/ webImage.addEventListener('pointerenter',(e)=>{ // TweenMax.to(webBackground, 0.1, {x:"+= 50"}) }) webImage.addEventListener('pointerleave',(e)=>{ // TweenMax.to(webBackground, 0.1, {x:"-= 50"}) }) webImage.addEventListener('click',(e)=>{ this.currentSource=source this.expandButton.setAttribute('source',source) // this.expandButton.style.opacity="0.5" e.stopPropagation() e.preventDefault() let oldWeb=this.currentWebview let oldWebImage = this.currentWebviewImage oldWeb.capturePage((image)=>{ oldWebImage.src=image.toDataURL() this.currentWebviewBackground = e.target.parentElement this.currentWebview = web this.currentWebviewImage = webImage this.currentSource = source this.arrangeWebviews() }) web.capturePage((image)=>{ webImage.src=image.toDataURL() /* let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/'+source+'.png') let buf = image.toPNG() fs.writeFile(captureFile, buf, function(err) { if (err) { console.log("ERROR Failed to save file", err) } else{ } })*/ }) // this.bufferPad.web.src=web.src this.backButton.style.opacity = (web.canGoBack()) ? 1 : 0.5 this.forwardButton.style.opacity = (web.canGoForward()) ? 1 : 0.5 // e.target.style.visibility="hidden" //e.target.parentElement.style.zIndex=this.zIndex }) /*overlay.addEventListener('pointerenter',(e)=>{ TweenMax.to(webBackground, 0.1, {x:"+= 20"}) }) overlay.addEventListener('pointerleave',(e)=>{ TweenMax.to(webBackground, 0.1, {x:"-= 20"}) })*/ this.arrangeWebviews() } arrangeWebviews(){ let numWebviews = this.webviewMap.size let index = 0 let increment = 1 let z = this.zIndex let current=this.currentWebviewFrame let shadowWidth = 0 this.webviewMap.forEach(function (entry, key) { entry.style.maxWidth="1000px" // entry.style.width=100-Math.sqrt(entry.parentElement.offsetWidth-590)+"%" entry.style.width="70%" shadowWidth = $(entry).find(".accordionWebviewShadow").outerWidth() // console.log("entry.parentElement.offsetWidth",entry.parentElement.offsetWidth) z+=increment let offset=index*(entry.parentElement.offsetWidth+2*shadowWidth-entry.offsetWidth)/(numWebviews-1) // console.log("Offset",entry.parentElement.offsetWidth-(offset+entry.offsetWidth)) entry.style.left=entry.parentElement.offsetWidth+2*shadowWidth-(offset+entry.offsetWidth)-shadowWidth+"px" entry.style.zIndex=z // $( entry ).children(".accordionWebview[isLoading='false']").css( "visibility", "hidden" ) $( entry ).children(".accordionWebview").css( "visibility", "hidden" ) /* $( entry ).children(".accordionWebview").css( "visibility", "hidden" ).each(function(i, obj) { console.log("isLoading()",obj.isLoading()) })*/ $( entry ).children('.accordionOverlay').css( "visibility", "visible" ) $( entry ).children('.accordionWebimage').css( "visibility", "visible" ) // entry.style.left=index*(entry.parentElement.offsetWidth-entry.offsetWidth)/(numWebviews-1)+"px" index++ if(entry==current){ $( entry ).children('.accordionWebview').css( "visibility", "visible" ) $( entry ).children('.accordionOverlay').css( "visibility", "hidden" ) $( entry ).children('.accordionWebimage').css( "visibility", "hidden" ) increment*=-1 // entry.childNodes[1].style.opacity=0.8 } }) this.zIndex=z // this.enableButtons() /*this.zIndex++ this.currentWebviewBackground.style.zIndex=this.zIndex $( this.currentWebviewBackground ).children('.accordionWebview').css( "visibility", "visible" ) $( this.currentWebviewBackground ).children('.accordionOverlay').css( "visibility", "hidden" ) $( this.currentWebviewBackground ).children('.accordionWebimage').css( "visibility", "hidden" )*/ } bringWebToFront(){ this.arrangeWebviews() this.zIndex++ this.currentWebviewFrame.style.zIndex=this.zIndex // this.currentWebviewBackground.childNodes[2].style.opacity=0.8 } rad2degree(alpha){ return alpha * 180 / Math.PI; } degree2rad(alpha){ return alpha * Math.PI / 180; } close() { // this.frame.style.display="none" this.frame.parentNode.removeChild(this.frame) urlPadMap.delete(this.url) urlPadMap.delete(this.title) let geneTab = document.getElementById(this.title +"_tab") TweenMax.to(geneTab, 0.4, {scaleX:"1.0",x:"0px"}); geneTab.style.boxShadow = "none" geneTab.setAttribute('open','false') } enableButtons() { this.backButton.style.opacity = (this.currentWebview.canGoBack()) ? 1 : 0.5 this.forwardButton.style.opacity = (this.currentWebview.canGoForward()) ? 1 : 0.5 } addButton(src, value) { let button = document.createElement("img") button.type = "image" button.className = "frameButton" button.style.position = "absolute" button.src = fileURL(src) button.value="close" button.draggable = false this.frame.appendChild(button) return button } layout() { console.log("LAYOUT") let b = this.border let b2 = b * 2 let b8 = b / 8 let b25 = b / 25 let b15 = b / 15 Elements.setStyle(this.frame, { // borderRadius: b8 + "px", // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)` }) let size = "calc(100% - " + (2*b+2) +"px)" let h = "calc(100% - " + (b) +"px)" let w = "calc(100% - "+2 +"px)" this.scatter.resizeButton.style.width=b+"px" this.scatter.resizeButton.style.height=b+"px" Elements.setStyle(this.webFrame, { width: w, height: h, margin: "1px"}) /*Elements.setStyle(this.webBackground, { width: size, height: size, margin: b+"px"}) Elements.setStyle(this.overlay, { width: size, height: size, margin: b+"px"})*/ Elements.setStyle(this.titlebar, { left: (b * 5.75) + "px", bottom: "0px", fontSize: 0.7*b+"px", // paddingTop: 10+"px", // textAlign: "center", margin: 0.1*b+"px", height: 0.8*b+"px"}) Elements.setStyle(this.closeAllButton, { right: (b * 1.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.backButton, { left: (b * 0.8) +"px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.forwardButton, { left: (this.border + (b * 0.8)) +"px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.expandButton, { left: (this.border + (b * 1.8)) +"px", bottom: "0px", // opacity: "0.5", margin: 0.1*b+"px", width: 0.8*b+"px", height: 0.8*b+"px"}) Elements.setStyle(this.closeButton, { left: (this.border + (b * 2.8)) +"px", bottom: "0px", width: b+"px", height: b+"px"}) } } class PadFromElement { constructor(element, scatterContainer, { startScale=1.0, minScale=0.1, maxScale=1.0, autoBringToFront=true, translatable=true, scalable=true, rotatable=true, movableX=true, movableY=true, type = 'fromElement', title = 'New Pad', rotationDegrees=null, rotation=null, onTransform=null, transformOrigin = 'center center', // extras which are in part needed x=0, y=0, width=null, height=null, resizable=false, } ={}) { this.element = element this.type = type this.title = title this.x = x this.y = y this.width = width this.height = height this.minScale = minScale this.maxScale = maxScale this.scatterContainer = scatterContainer this.scale = startScale this.scalable = scalable this.rotatable = rotatable this.rotationDegrees = this.startRotationDegrees this.transformOrigin = transformOrigin this.frame = document.createElement('div') Elements.setStyle(this.frame, { width: this.width+"px", height: this.height+"px", backgroundColor: "#333", position: "fixed", visibility: "visible", top: 0, left: 0, overflow: "auto"}) this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close") document.body.appendChild( this.frame) this.border = 50 this.frame.appendChild(this.element) this.title = document.createElement("div") this.title.innerHTML = "Titel" this.title.style.color = "white" this.frame.appendChild(this.title) Elements.setStyle(this.title, { position: "absolute" }) // this.element.style.overflow = "auto" // this.element.style.position = "absolute" this.layout() this.closeButton.addEventListener('click', (e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.frame.style.visibility="hidden" }) this.scatter = new DOMScatter(this.frame, scatterContainer, { x: this.x, y: this.y, startScale: this.startScale, width: this.width, height: this.height, minScale: this.minScale, maxScale: this.maxScale, scalable: this.scalable, resizable: true, rotatable: this.rotatable}) this.scatter.bringToFront() this.scatter.addTransformEventCallback((e) => { let newBorder = 50 / e.scale if (newBorder !== this.border) { this.border = newBorder this.layout() } }) this.element.addEventListener('pointerdown', (e) => { this.scatter.bringToFront() }) } close() { // this.frame.style.display="none" this.frame.parentNode.removeChild(this.frame) // urlPadMap.delete(this.url) } addButton(src, value) { let button = document.createElement("img") button.type = "image" button.className = "frameButton" button.style.position = "absolute" button.src = fileURL(src) button.value="close" button.draggable = false this.frame.appendChild(button) return button } layout() { let b = this.border let b2 = b * 2 let b8 = b / 8 let b25 = b / 25 let b15 = b / 15 Elements.setStyle(this.frame, { // borderRadius: b8 + "px", // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)` }) let size = "calc(100% - " + (2*b+2) +"px)" Elements.setStyle(this.element, { width: size, height: size, top: b+"px", left: b+"px"}) Elements.setStyle(this.closeButton, { right: (b * 0.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.title, { left: (b * 1.5) + "px", fontSize: (b * 0.8) + "px", top: (0.1)+"0px"}) } } class minimalPad { constructor(scatterContainer, { startScale=1.0, minScale=0.25, maxScale=10.5, autoBringToFront=true, type = 'minimal', title="new Pad", urlList=["https://www.iwm-tuebingen.de/www/index.html"], padMapKey="key", // url="https://www.iwm-tuebingen.de/www/index.html", hideOnStart=false, translatable=true, scalable=true, rotatable=true, movableX=true, movableY=true, rotationDegrees=null, rotation=null, onTransform=null, transformOrigin = 'center center', // extras which are in part needed x=0, y=0, width=null, height=null, resizable=false, } ={}) { let w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0] this.pageWidth = w.innerWidth || e.clientWidth || g.clientWidth, this.pageHeight = w.innerHeight|| e.clientHeight|| g.clientHeight this.x = x this.y = y this.type = type // this.url = url this.urlList = urlList this.padMapKey = padMapKey, this.title = title, this.hideOnStart = hideOnStart this.width = width this.height = height this.minScale = minScale this.maxScale = maxScale this.scatterContainer = scatterContainer this.startScale = startScale this.scale = startScale this.scalable = scalable this.rotatable = rotatable this.rotationDegrees = this.startRotationDegrees this.transformOrigin = transformOrigin this.web = null this.WebviewCounter = 0 this.id=0 this.webviewMap = new Map() this.overlayMap = new Map() this.tabMap = new Map() this.listMap = new Map() this.frame = document.createElement('div') this.frame.classList.add("pad") this.border = this.pageHeight*0.023148 / startScale Elements.setStyle(this.frame, { backgroundColor: "#333", position: "absolute", display: 'flex', width: this.width+"px", height: this.height+"px", visibility: "visible", top: 0, left: 0, // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`, // borderRadius: '10px', overflow: "visible"}) document.body.appendChild( this.frame) this.tabs=document.createElement("div") this.webBackground=document.createElement("div") this.webviewList=document.createElement("div") this.titlebar = document.createElement("div") this.webViewSnapshot=document.createElement("img") this.tabs.classList.add("interactiveElement") this.tabs.classList.add("tabs") // this.tabs.style.display="flex" // this.tabs.style.flexFlow="row nowrap" Elements.setStyle(this.tabs, { position: "absolute", background: "white", overflowX: "auto", overflowY: "hidden", display: "flex", flexFlow:"row nowrap", // justifyContent: "flex-end", alignItems: "flex-end" // overflow: "auto", }) this.titlebar.innerHTML = this.title Elements.setStyle(this.titlebar, { color: "#fff", position: "absolute", overflowX: "hidden" }) Elements.setStyle(this.webBackground, { position: "absolute", overflow: "hidden", background: "white" }) this.webviewList.classList.add("interactiveElement") Elements.setStyle(this.webviewList, { position: "absolute", visibility: "hidden", overflow: "auto", background: "white", boxShadow: "5px 5px 10px #bbb" }) /*Elements.setStyle(this.overlay, { position: "absolute", overflow: "auto", background: "white", opacity: "0.8" })*/ Elements.setStyle(this.webViewSnapshot, { position: "absolute", overflow: "auto" }) this.frame.appendChild(this.titlebar) this.frame.appendChild(this.webBackground) // this.frame.appendChild(this.webViewSnapshot) this.frame.appendChild(this.tabs) this.frame.appendChild(this.webviewList) for(var i=0; i{ this.scatter.scalable=false this.web.pointerEvents = "none" e.target.style.cursor = "move" }) this.pseudoFrameTop.addEventListener('pointerleave',(e)=>{ this.scatter.scalable=true // this.frame.style.cursor = "initial" }) this.pseudoFrameLeft.addEventListener('pointerenter',(e)=>{ // e.target.setPointerCapture(e.pointerId) this.scatter.scalable=false this.web.pointerEvents = "none" e.target.style.cursor = "move" }) this.pseudoFrameLeft.addEventListener('pointerleave',(e)=>{ this.scatter.scalable=true // this.frame.style.cursor = "initial" }) this.pseudoFrameRight.addEventListener('pointerenter',(e)=>{ this.scatter.scalable=false this.web.pointerEvents = "none" e.target.style.cursor = "move" }) this.pseudoFrameRight.addEventListener('pointerleave',(e)=>{ this.scatter.scalable=true // this.frame.style.cursor = "initial" }) /*this.web.addEventListener('new-window', (e) => { if(e.url.indexOf("youtube")>-1)return if (urlPadMap.has(e.url)) { let childPad = urlPadMap.get(e.url) childPad.scatter.moveTo(x, y) return childPad } let childPad = new minimalPad(this.scatterContainer, { x: this.scatter.position.x+100, y: this.scatter.position.y+100, url: e.url, width: this.scatter.width, height: this.scatter.height, scalable: true, rotatable: true}) urlPadMap.set(e.url, childPad) for(let callback of window.padLoadedHandler) { callback(childPad, url) } })*/ this.backButton.addEventListener('click', (e)=>{ if(this.web.canGoBack()){ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.web.goBack() } }) this.forwardButton.addEventListener('click', (e)=>{ if(this.web.canGoForward()){ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.web.goForward() } }) this.closeButton.addEventListener('click', (e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.close() }) this.showWebviewListButton.addEventListener('click', (e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.webviewList.style.visibility=="visible" ? this.webviewList.style.visibility="hidden" : this.webviewList.style.visibility="visible" }) this.scatter = new DOMScatter(this.frame, scatterContainer, { x: this.x, y: this.y, startScale: this.startScale, width: this.width, height: this.height, minScale: this.minScale, maxScale: this.maxScale, scalable: this.scalable, resizable: true, rotatable: this.rotatable}) let img=document.createElement("img") img.style.width = "70%" img.style.position = "absolute" img.style.bottom = "20%" img.style.right = "20%" img.style.pointerEvents="none" img.src = "../../assets/icons/png/flat/resize.png" this.scatter.resizeButton.appendChild(img) this.scatter.moveTo({x, y}) this.scatter.bringToFront() this.scatter.addTransformEventCallback((e) => { let newBorder = this.pageHeight*0.023148 / e.scale if (newBorder !== this.border) { this.border = newBorder this.layout() } }) this.layout() /*this.test = document.createElement('div') Elements.setStyle(this.test, { position: "absolute", width: "400px", height: "400px", overflow: "auto", background: "pink" }) this.frame.appendChild(this.test) this.test.addEventListener('click',()=>{ // this.frame.style.visibility="hidden" console.log($( this.webBackground ).children()) $( this.webBackground ).children().css( "visibility", "hidden" ) $( this.frame ).children().css( "visibility", "hidden" ) })*/ } addNewWebview(src){ /* if(this.web!=null){ this.web.style.visibility="hidden" this.web.setAttribute('selected','0') }*/ let webview=document.createElement("webview") let progressBar = document.createElement('div') webview.setAttribute("plugins",true) this.web=webview webview.setAttribute('loaded','0') this.webBackground.appendChild(webview) this.webviewMap.set(src+this.padMapKey, webview) // console.log("number of webviews",this.webviewMap.size) // $("webview").each(function(i, obj) { // obj.setAttribute('selected','0') // }) Elements.setStyle(webview, { position: "absolute", overflow: "auto", width: "100%", height: "100%", // border: "1px solid #fff" }) Elements.setStyle(progressBar, { position: "absolute", overflow: "hidden", top: "0%", left: "10%", visibility: "hidden", background: "white", filter: "blur(50px)", opacity: "0.2", // pointerEvents: 'none', width: "40%", height: "100%" // opacity: "0.1" }) webview.src=src webview.preload= path.join(__dirname, './preloadPad.js') let listItem=document.createElement('div') listItem.className="interactiveElement" listItem.classList.add("webviewListItem") listItem.setAttribute('id',src+this.padMapKey) // listItem.style.height = "5%" // // listItem.style.width = "80%" // listItem.style.marginLeft="10%" // listItem.style.marginTop="5%" listItem.style.padding = "10px" // listItem.style.paddingBottom = "10px" this.webviewList.appendChild(listItem) this.listMap.set(src+this.padMapKey,listItem) webview.setAttribute('id',src+this.padMapKey) this.setSelectedWebview(src+this.padMapKey) this.addNewTab(webview,src) listItem.addEventListener('click',(e)=>{ console.log(e.target.getAttribute('id')) this.setSelectedWebview(e.target.getAttribute('id')) this.webviewList.style.visibility = "hidden" $(this.tabs).animate({scrollLeft: $(".tab[id='"+e.target.getAttribute('id')+"']").prop('offsetLeft') - 10}, "slow") this.enableButtons() }) listItem.addEventListener('pointerenter',(e)=>{ e.target.style.background = "#ddd" let webview=null this.webviewMap.forEach(function (item, key, mapObj) { item.style.visibility="hidden" if(item.getAttribute('id')==e.target.getAttribute("id")){ item.style.visibility="visible" if(item.getAttribute('selected')=='0')item.style.opacity="0.5" webview=item // obj.style.width="50%" // obj.style.height="50%" } }) this.overlayMap.forEach(function (item, key, mapObj) { item.style.visibility="hidden" if(item.getAttribute('id')==e.target.getAttribute("id")){ item.style.visibility="visible" } }) // webview.getAttribute('loaded')=='0' ? this.overlay.style.visibility='visible' : this.overlay.style.visibility='hidden' }) listItem.addEventListener('pointerleave',(e)=>{ e.target.style.background = "#fff" if(e.target.getAttribute('selected')=='1') e.target.style.background = "#999" this.webviewMap.forEach(function (item, key, mapObj) { if(item.getAttribute('selected')=='0'){ item.style.visibility="hidden" } if(item.getAttribute('selected')=='1'){ item.style.visibility="visible" item.style.opacity="1" } // obj.style.width="100%" // obj.style.height="100%" }) }) let overlay = document.createElement('img') overlay.style.position="absolute" overlay.style.width="100%" overlay.style.height="100%" overlay.style.top="0px" overlay.style.left="0px" // overlay.style.background="white" overlay.classList.add("minimalPadOverlay") overlay.src="img/overlay.png" this.overlayMap.set(src,overlay) let loadAnim = document.createElement("div") loadAnim.style.webkitAnimation= "spin 2s linear infinite" loadAnim.style.animation= "spin 2s linear infinite" loadAnim.style.position = "absolute" document.styleSheets[0].insertRule("div.tabs::-webkit-scrollbar {display: none;}"); document.styleSheets[0].insertRule('\ @keyframes spin {\ from { transform: rotateZ(0deg); }\ to { transform: rotateZ(360deg); }\ }' ) // overlay.appendChild(loadAnim) this.webBackground.appendChild(overlay) this.webBackground.appendChild(progressBar) webview.addEventListener('did-navigate', (e) => { this.enableButtons() //this.backButton.style.opacity = (webview.canGoBack()) ? 1 : 0.5 //this.forwardButton.style.opacity = (webview.canGoForward()) ? 1 : 0.5 }) webview.addEventListener('dom-ready',()=>{ // console.log("DOM READY TABBED WEBVIEW!!!!!!!!!!") listItem.innerHTML=webview.getTitle()+" "+src $(".tab[id='"+src+this.padMapKey+"']").children()[0].innerHTML=webview.getTitle() // $(".tab[id='"+src+"']").children()[0].innerHTML="READY LOADED" $(this.tabs).animate({scrollLeft: $(".tab[id='"+src+"']").prop('offsetLeft') - 10}, "slow") }) webview.addEventListener('ipc-message', (e) => { if(e.channel=='webviewPointerDown')this.scatter.bringToFront() }) let obj = { blur: 2 } let loadAnimation = new TimelineMax({repeat:-1}) // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 5,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) ) // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 2,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) ) loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"60%"}) ) loadAnimation.add( TweenMax.to(progressBar, 0, {left:"20%"}) ) loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"60%"}) ) loadAnimation.stop() webview.addEventListener('did-start-loading', ()=>{ console.log("started loading page") webview.setAttribute('loaded','0') overlay.style.visibility="visible" webview.style.filter = "blur(10px)" progressBar.style.visibility="visible" loadAnimation.play() let w = overlay.offsetWidth let h = overlay.offsetHeight /*let animationSize = w{ loadAnimation.stop() webview.style.filter = "blur(0px)" webview.setAttribute('loaded','1') this.layout() progressBar.style.visibility="hidden" overlay.style.visibility="hidden" }) webview.addEventListener('new-window', (e) => { if (!this.webviewMap.has(e.url+this.padMapKey)){ this.addNewWebview(e.url) } }) this.id++ } setSelectedWebview(id){ let webview=null this.webviewMap.forEach(function (item, key, mapObj) { item.setAttribute('selected','0') item.style.opacity = "0" item.style.visibility = "hidden" if(key==id){ webview=item item.setAttribute('selected','1') item.style.opacity = "1" item.style.visibility = "visible" } }) this.tabMap.forEach(function (tab, key, mapObj) { tab.style.border="none" if(key==id){ tab.style.borderLeft="1px solid black" tab.style.borderTop="1px solid black" tab.style.borderRight="1px solid black" } }) this.listMap.forEach(function (entry, key, mapObj) { entry.style.background = "white" entry.setAttribute('selected','0') if(key==id){ entry.style.background = "#999" entry.setAttribute('selected','1') } }) this.web = webview // webview.getAttribute('loaded')=='0' ? this.overlay.style.visibility='visible' : this.overlay.style.visibility='hidden' } addNewTab(webview,src){ this.tabMap.forEach(function (tab, key, mapObj) { tab.style.border="none" }) let tab=document.createElement('div') tab.className="tab" tab.classList.add("interactiveElement") tab.style.display="flex" tab.style.flexFlow="row nowrap" tab.style.textOverflow="ellipsis" tab.setAttribute('id',src+this.padMapKey) // tab.innerHTML=" " tab.style.color="black" tab.style.background="white" tab.style.borderLeft="1px solid black" tab.style.borderTop="1px solid black" tab.style.borderRight="1px solid black" tab.style.position="relative" tab.style.borderRadius="5px 5px 0 0" tab.style.maxWidth="25%" tab.style.height="80%" tab.style.alignItems= "center" // tab.style.display="inline" // tab.style.marginLeft="10px" tab.style.paddingLeft="10px" this.tabs.appendChild(tab) this.tabMap.set(src+this.padMapKey,tab) let newSelectedWebview=null let title = document.createElement('div') title.classList.add('tabTitle') // title.style.display="flex" // title.style.flexFlow="row nowrap" title.style.overflow="hidden" title.style.whiteSpace="nowrap" title.style.textOverflow="ellipsis" title.style.pointerEvents="none" title.innerHTML="new Tab" tab.appendChild(title) let close = document.createElement('img') close.setAttribute('id',src+this.padMapKey) close.classList.add('tabCloseButton') close.style.background="#666" close.style.height="50%" close.style.marginLeft="10px" close.style.marginRight="10px" close.style.borderRadius="100%" close.style.visibility="hidden" close.src = "../../assets/icons/svg/cross.svg" tab.appendChild(close) close.addEventListener('click',(e)=>{ e.stopPropagation() e.preventDefault() let newSelectedItem = false if(this.webviewMap.size>1){ let next=this.getNextTab(e.target.getAttribute("id")) let previous=this.getPreviousTab(e.target.getAttribute("id")) this.webviewMap.forEach(function (item, key, mapObj) { if(item.getAttribute('id')==e.target.getAttribute("id")){ if(item.getAttribute('selected')=='1'){ newSelectedItem=true } mapObj.delete(key) $(item).remove() } }) this.tabMap.forEach(function (tab, key, mapObj) { if(tab.getAttribute('id')==e.target.getAttribute("id")){ mapObj.delete(key) $(tab).remove() } }) this.listMap.forEach(function (entry, key, mapObj) { if(entry.getAttribute('id')==e.target.getAttribute("id")){ mapObj.delete(key) } }) $(".webviewListItem[id='"+e.target.getAttribute("id")+"']").remove() $(e.target).remove() if(newSelectedItem){ next!=null ? this.setSelectedWebview(next.getAttribute('id')) : this.setSelectedWebview(previous.getAttribute('id')) } } }) tab.addEventListener('pointerenter',(e)=>{ if(this.webviewMap.size>1)e.target.childNodes[1].style.visibility="visible" let z=this.frame.style.zIndex let webview=null e.target.style.background="#ddd" this.webviewMap.forEach(function (item, key, mapObj) { item.style.visibility="hidden" if(item.getAttribute('id')==e.target.getAttribute("id")){ item.style.visibility="visible" if(item.getAttribute('selected')=='0')item.style.opacity="0.5" webview=item // obj.style.width="50%" // obj.style.height="50%" } }) this.overlayMap.forEach(function (item, key, mapObj) { item.style.visibility="hidden" if(item.getAttribute('id')==e.target.getAttribute("id")){ item.style.visibility="visible" } }) // webview.getAttribute('loaded')=='0' ? this.overlay.style.visibility='visible' : this.overlay.style.visibility='hidden' /*Popup.open({"text":webview.getTitle()}, {x: e.clientX, y: e.clientY}, { fontSize: "2vh", maxWidth: width*0.2, spacing: '10px', notchPosition: 'topLeft', zIndex: z+100})*/ }) tab.addEventListener('pointerleave',(e)=>{ e.target.childNodes[1].style.visibility="hidden" e.target.style.background="#fff" this.webviewMap.forEach(function (item, key, mapObj) { if(item.getAttribute('selected')=='0'){ item.style.visibility="hidden" } if(item.getAttribute('selected')=='1'){ item.style.visibility="visible" item.style.opacity="1" } // obj.style.width="100%" // obj.style.height="100%" }) //this.web.style.visibility="visible" //this.web.style.opacity="1" }) tab.addEventListener('click',(e)=>{ this.tabMap.forEach(function (item, key, mapObj) { item.style.border="none" }) e.target.style.borderLeft="1px solid black" e.target.style.borderTop="1px solid black" e.target.style.borderRight="1px solid black" this.setSelectedWebview(e.target.getAttribute('id')) if(e.target.offsetLeft+e.target.offsetWidth>this.tabs.offsetWidth+this.tabs.scrollLeft){ $(this.tabs).animate({scrollLeft: e.target.offsetLeft-this.tabs.offsetWidth+e.target.offsetWidth}, "slow") } if(e.target.offsetLeft{ this.scatter.scalable=false this.element.pointerEvents = "none" e.target.style.cursor = "move" }) this.pseudoFrameTop.addEventListener('pointerleave',(e)=>{ this.scatter.scalable=true // this.frame.style.cursor = "initial" }) this.pseudoFrameLeft.addEventListener('pointerenter',(e)=>{ // e.target.setPointerCapture(e.pointerId) this.scatter.scalable=false this.element.pointerEvents = "none" e.target.style.cursor = "move" }) this.pseudoFrameLeft.addEventListener('pointerleave',(e)=>{ this.scatter.scalable=true // this.frame.style.cursor = "initial" }) this.pseudoFrameRight.addEventListener('pointerenter',(e)=>{ this.scatter.scalable=false this.element.pointerEvents = "none" e.target.style.cursor = "move" }) this.pseudoFrameRight.addEventListener('pointerleave',(e)=>{ this.scatter.scalable=true // this.frame.style.cursor = "initial" }) // this.element.style.overflow = "auto" // this.element.style.position = "absolute" this.layout() this.closeButton.addEventListener('click', (e)=>{ TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{ TweenMax.to(e.target, 0.1, {scale:"1.0"}) }}) this.frame.style.visibility="hidden" }) this.scatter = new DOMScatter(this.frame, scatterContainer, { x: this.x, y: this.y, startScale: this.startScale, width: this.width, height: this.height, minScale: this.minScale, maxScale: this.maxScale, scalable: this.scalable, resizable: true, rotatable: this.rotatable}) let img=document.createElement("img") img.style.width = "70%" img.style.position = "absolute" img.style.bottom = "20%" img.style.right = "20%" img.style.pointerEvents="none" img.src = "../../assets/icons/png/flat/resize.png" this.scatter.resizeButton.appendChild(img) this.scatter.bringToFront() this.scatter.addTransformEventCallback((e) => { let newBorder = 50 / e.scale if (newBorder !== this.border) { this.border = newBorder this.layout() } }) this.element.addEventListener('pointerdown', (e) => { this.scatter.bringToFront() }) } close() { // this.frame.style.display="none" this.frame.parentNode.removeChild(this.frame) urlPadMap.delete(this.url) } addButton(src, value) { let button = document.createElement("img") button.type = "image" button.className = "frameButton" button.style.position = "absolute" button.src = fileURL(src) button.value=value button.draggable = false this.frame.appendChild(button) return button } addToolButton(src, value) { console.log("adding tool button",value) let button = document.createElement("img") button.type = "image" button.className = "frameButton" button.style.position = "absolute" button.src = fileURL(src) button.value=value button.draggable = false this.frame.appendChild(button) this.toolButtonMap.set(value,button) return button } layout() { console.log("layouting minmalPadFromElement") let b = this.border let b2 = b * 2 let b8 = b / 8 let b25 = b / 25 let b15 = b / 15 let size = "calc(100% - " + (2*b) +"px)" let h = "calc(100% - " + (b) +"px)" let w = "calc(100% - "+2 +"px)" let w2 = "calc(100% - " + (b+2) +"px)" Elements.setStyle(this.frame, { // borderRadius: b8 + "px", // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)` }) Elements.setStyle(this.element, { width: w, height: h, top: 0+"px", left: 0+"px"}) Elements.setStyle(this.pseudoFrameTop, { width: w, height: 0.1*b+"px", margin: "0px"}) Elements.setStyle(this.pseudoFrameLeft, { width: 0.1*b+"px", height: h, margin: "0px"}) Elements.setStyle(this.pseudoFrameRight, { width: 0.1*b+"px", height: h, margin: "0px"}) Elements.setStyle(this.closeButton, { right: (b * 0.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) let buttonCounter=0 this.toolButtonMap.forEach(function (entry, key) { // console.log(entry,key) Elements.setStyle(entry, { left: (b * (buttonCounter+0.75)) + "px", bottom: "0px", margin: 0.1*b+"px", width: 0.8*b+"px", height: 0.8*b+"px"}) buttonCounter++ } ) /*Elements.setStyle(this.addContentButton, { left: (b * 0.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.copyButton, { left: (b * 1.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.pasteButton, { left: (b * 2.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.saveButton, { left: (b * 3.75) + "px", bottom: "0px", width: b+"px", height: b+"px"}) Elements.setStyle(this.deleteButton, { left: (b * 4.75) + "px", bottom: "0px", width: b+"px", height: b+"px"})*/ } } module.exports = { Pad, minimalPad, DOMPadContainer, PadFromElement, minimalPadFromElement, PadAccordion }