iwmlib/browser/padAccordion.js

3541 lines
129 KiB
JavaScript
Raw Normal View History

const {fileURL} = require('./utils.js')
const path = require('path')
const electron = require('electron');
const BrowserWindow = electron.remote.BrowserWindow;
/* 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("../dev/tumortisch/icons/svg/cross.svg", "close")
this.backButton = this.addButton("../dev/tumortisch/icons/svg/left.svg", "go back")
this.forwardButton = this.addButton("../dev/tumortisch/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<h ? w*0.5 : h*0.5
let animationRingWidth = animationSize*0.1;
this.loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
this.loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
this.loadAnim.style.borderRadius="50%"
this.loadAnim.style.height=animationSize-animationRingWidth*2+"px"
this.loadAnim.style.width=animationSize-animationRingWidth*2+"px"
this.loadAnim.style.top = h*0.25+"px"
this.loadAnim.style.left = w*0.25+"px"
w<h ? this.loadAnim.style.top = 0.5*(h-animationSize)+"px" : this.loadAnim.style.left = 0.5*(w-animationSize)+"px"
})
this.web.addEventListener('did-stop-loading', (e)=>{
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 = "./icons/resize.png"
this.scatter.resizeButton.appendChild(img)
// this.scatter.resizeButton.className = "frameButton"
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=value
button.draggable = false
button.classList.add("interactiveElement")
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,
minimizedHiddenHeight = 0,
minimizedHiddenWidth = 0,
minimized = false,
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.minimizedHiddenHeight = minimizedHiddenHeight
this.minimizedHiddenWidth = minimizedHiddenWidth
this.minimized = minimized
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("../dev/tumortisch/icons/clear_all.png", "closeAll")
this.minimizeButton = this.addButton("../dev/tumortisch/icons/remove.png", "minimize")
this.maximizeButton = this.addButton("../dev/tumortisch/icons/fullscreen.png", "maximize")
this.closeButton = this.addButton("../dev/tumortisch/icons/clear.png", "closeSingle")
this.backButton = this.addButton("../dev/tumortisch/icons/left.svg", "go back")
this.forwardButton = this.addButton("../dev/tumortisch/icons/right.svg", "go forward")
this.expandButton = this.addButton("../dev/tumortisch/icons/launch.png", "expand")
this.expandButton.id=this.title+"expandButton"
this.minimized == false ? this.minimizeButton.src = fileURL("../dev/tumortisch/icons/remove.png") : this.minimizeButton.src = fileURL("../dev/tumortisch/icons/fullscreen.png")
this.backButton.style.opacity = 0.5
this.forwardButton.style.opacity = 0.5
TweenMax.to(this.maximizeButton, 0.0, {scale:"0"})
/*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<this.urlList.length; i++){
this.appendWebView(this.urlList[i].url,this.urlList[i].source)
}
// this.appendWebView(this.urlList[0].url,this.urlList[0].source)
/*for (let callback of window.padLoadedHandler) {
callback(this, url)
}*/
/*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<h ? w*0.5 : h*0.5
let animationRingWidth = animationSize*0.1;
this.loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
this.loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
this.loadAnim.style.borderRadius="50%"
this.loadAnim.style.height=animationSize-animationRingWidth*2+"px"
this.loadAnim.style.width=animationSize-animationRingWidth*2+"px"
this.loadAnim.style.top = h*0.25+"px"
this.loadAnim.style.left = w*0.25+"px"
w<h ? this.loadAnim.style.top = 0.5*(h-animationSize)+"px" : this.loadAnim.style.left = 0.5*(w-animationSize)+"px"
})
this.web.addEventListener('did-stop-loading', ()=>{
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 = "./icons/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()
InteractionMapper.on('tap',this.backButton, 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()
}
})
InteractionMapper.on('tap',this.forwardButton, 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()
}
})
InteractionMapper.on('tap',this.closeAllButton, e => {
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.close()
})
InteractionMapper.on('tap',this.minimizeButton, e => {
let s = this.scatter.scale
let x=0
let y=0
let deltaX = 0
let deltaY = 0
switch(this.minimized){
case false:
let w = this.frame.offsetWidth*s < 800 ? this.frame.offsetWidth : 800/s
x = this.frame.getBoundingClientRect().right - w
y = this.frame.getBoundingClientRect().bottom - this.border
deltaX = this.frame.offsetWidth - w
deltaY = this.frame.offsetHeight - this.border
this.minimizedHiddenHeight = this.frame.offsetHeight
this.minimizedHiddenWidth = this.frame.offsetWidth
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.minimize(w, this.border, this.scatter.scale, deltaX*s, deltaY*s)
this.minimized = true
this.minimizeButton.src = fileURL("../dev/tumortisch/icons/fullscreen.png")
this.scatter.scalable = false
// this.frame.style.pointerEvents = "none"
// this.minimizeButton.style.pointerEvents = "all"
// this.closeAllButton.style.pointerEvents = "all"
$(this.frame).children(".frameButton").each(function(i, obj) {
if(obj.value !="close" && obj.value !="closeAll" && obj.value !="minimize")obj.style.pointerEvents = "none"
})
break
case true:
s = this.scatter.scale
x = this.frame.getBoundingClientRect().right - this.minimizedHiddenWidth
y = this.frame.getBoundingClientRect().bottom - this.minimizedHiddenHeight
deltaX = this.frame.getBoundingClientRect().width - this.minimizedHiddenWidth*s
deltaY = this.frame.getBoundingClientRect().height - this.minimizedHiddenHeight*s
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.minimize(this.minimizedHiddenWidth, this.minimizedHiddenHeight, this.scatter.scale, deltaX, deltaY)
this.minimized = false
this.minimizeButton.src = fileURL("../dev/tumortisch/icons/remove.png")
this.arrangeWebviews()
this.scatter.scalable = true
$(this.frame).children(".frameButton").each(function(i, obj) {
obj.style.pointerEvents = "all"
})
// this.frame.style.pointerEvents = "all"
break
}
})
/* InteractionMapper.on('tap',this.minimizeButton, e => {
let p = {x:e.center.x, y:e.center.y}
// let framePosition = Points.fromPageToNode(this.frame,p)
let s = this.scatter.scale
let w = this.frame.offsetWidth*s < 800 ? this.frame.offsetWidth : 800/s
// let x = this.frame.getBoundingClientRect().x + this.frame.offsetWidth*s - w
// let y = this.frame.getBoundingClientRect().y + this.frame.offsetHeight*s - this.border
let x = this.frame.getBoundingClientRect().right - w
let y = this.frame.getBoundingClientRect().bottom - this.border
let deltaX = this.frame.offsetWidth - w
let deltaY = this.frame.offsetHeight - this.border
let tmp = this.frame.getBoundingClientRect().bottom - this.frame.getBoundingClientRect().top
console.log("minimizeButton", s, this.frame.getBoundingClientRect().x, this.frame.offsetHeight*s, this.frame.offsetWidth*s, tmp)
this.currentHeight = this.frame.offsetHeight
this.currentWidth = this.frame.offsetWidth
this.currentWebHeight = this.webFrame.offsetHeight
this.currentScale = s
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
// TweenMax.to(this.webFrame, 1.1, {height:"0px"})
// TweenMax.to(this.frame, 0.2, {height:this.border, width:w})
this.resize(w, this.border, this.scatter.scale, deltaX*s, deltaY*s)
TweenMax.to(this.minimizeButton, 0.0, {scale:"0"})
TweenMax.to(this.maximizeButton, 0.0, {scale:"1"})
})
InteractionMapper.on('tap',this.maximizeButton, e => {
console.log("maximizeButton", this.frame.getBoundingClientRect().width, this.currentWidth, this.frame.getBoundingClientRect().width - this.currentWidth)
let p = {x:e.center.x, y:e.center.y}
// let framePosition = Points.fromPageToNode(this.frame,p)
let s = this.scatter.scale
// let r = this.frame.offsetWidth - framePosition.x
// let b = this.frame.offsetHeight - framePosition.y
// let x = this.frame.getBoundingClientRect().x + this.frame.offsetWidth - this.currentWidth
// let y = this.frame.getBoundingClientRect().y + this.frame.offsetHeight - this.currentHeight
let x = this.frame.getBoundingClientRect().right - this.currentWidth
let y = this.frame.getBoundingClientRect().bottom - this.currentHeight
let deltaX = this.frame.getBoundingClientRect().width - this.currentWidth*s
let deltaY = this.frame.getBoundingClientRect().height - this.currentHeight*s
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
// TweenMax.to(this.webFrame, 0.1, {height:this.currentWebHeight+"px"})
this.resize(this.currentWidth, this.currentHeight, this.scatter.scale, deltaX, deltaY)
// TweenMax.to(this.frame, 0.2, {height: this.currentHeight+"px", width: this.currentWidth+"px", x: x, y: y})
TweenMax.to(this.minimizeButton, 0.0, {scale:"1"})
TweenMax.to(this.maximizeButton, 0.0, {scale:"0"})
}) */
InteractionMapper.on('tap',this.closeButton, e => {
if(this.webviewMap.size>1)this.removeWebView()
})
InteractionMapper.on('tap',this.expandButton, 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("NEW PAD ACCORDION",this.currentWebview.src)
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)
})
/*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("NEW PAD ACCORDION",this.currentWebview.src)
// 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})
/* let newPad= new PadAccordion(nodePadContainer, {
x: 500,
y: 200,
padMapKey: newPadKey,
title: this.title+" - "+ this.expandButton.getAttribute('source'),//this.currentWebview.getTitle(),
urlList: [{'url':this.currentWebview.src,'source':this.expandButton.getAttribute('source')}],
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"})
}
minimize(width, height, scale, x, y) {
let oldPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
this.frame.style.transformOrigin = "0% 0%"
let newPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
let offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.frame, 0, { css: { left: "+=" + offset.x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + offset.y + "px" } })
// TweenLite.to(this.frame, 0, { width: width , height: height, x: x, y: y })
TweenLite.to(this.frame, 0, { width: width , height: height})
TweenLite.to(this.frame, 0, { css: { left: "+=" + x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + y + "px" } })
oldPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
this.frame.style.transformOrigin = "50% 50%"
newPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.frame, 0, { css: { left: "+=" + offset.x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + offset.y + "px" } })
}
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 timeTouchStart = 0
let web=document.createElement("webview")
let webOffloading=document.createElement("webview")
let webImage=document.createElement("img")
let dummyImage=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 overlayCaptureEvents = document.createElement('div')
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"
overlayCaptureEvents.classList.add("interactiveElement")
this.expandButton.setAttribute('source',source)
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%",
// pointerEvents: 'none',
left: "0%",
// 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",
})
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%",
pointerEvents: 'none',
// display: "none",
visibility: "visible",
// border: "1px solid #fff",
height: this.webFrame.offsetHeight+"px"
})
Elements.setStyle(dummyImage, {
visibility: "visible"
})
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(overlayCaptureEvents, {
position: "absolute",
overflow: "hidden",
top: "0px",
left: "5%",
background: "white",
// pointerEvents: 'none',
width: "90%",
height: "100%",
opacity: "0.0001"
})
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)
overlayCaptureEvents.addEventListener('touchmove',(e)=>{
e.preventDefault()
e.stopPropagation()
})
overlayCaptureEvents.addEventListener('pointerup',(e)=>{
e.preventDefault()
e.stopPropagation()
let d = new Date()
console.log("delta Time",d.getTime()-timeTouchStart)
if(d.getTime()-timeTouchStart<150)web.sendInputEvent({type:'mouseUp', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale, button:'left', clickCount: 1})
})
overlayCaptureEvents.addEventListener('pointerdown',(e)=>{
web.send('overlayEvent')
e.preventDefault()
e.stopPropagation()
let d = new Date()
timeTouchStart = d.getTime()
console.log("timeTouchStart",timeTouchStart)
web.sendInputEvent({type:'mouseDown', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale, button:'left', clickCount: 1})
})
overlayCaptureEvents.addEventListener('pointermove',(e)=>{
if(e.pointerType!='mouse'){
// console.log("e.movementY",e.movementY)
web.executeJavaScript("window.scrollTo(scrollX+"+(-1*e.movementX)+", scrollY+"+ (-1*e.movementY)+")")
}
// if(e.pointerType=='mouse'){
// web.sendInputEvent({type:'mouseMove', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale})
// }
})
overlayCaptureEvents.addEventListener('mousewheel',(e)=>{
// console.log("mousewheel",e.deltaY)
web.executeJavaScript("window.scrollTo(scrollX+"+e.deltaX+", scrollY+"+ e.deltaY+")")
// web.sendInputEvent({type:'mouseWheel', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale, deltaY: -e.deltaY})
})
this.webFrame.appendChild(webviewFrame)
webviewFrame.appendChild(webBackground)
webviewFrame.appendChild(shadow)
webviewFrame.appendChild(shadowReverse)
webviewFrame.appendChild(web)
webviewFrame.appendChild(webImage)
// webBackground.appendChild(heinz)
if(remote.getGlobal('multiUserMode'))webviewFrame.appendChild(overlayCaptureEvents)
webviewFrame.appendChild(overlay)
webviewFrame.appendChild(progressBar)
web.setAttribute('id',this.webviewID)
web.setAttribute('isLoading','true')
this.webviewMap.set(this.webviewID, webviewFrame)
this.webviewID++
shadow.addEventListener('pointermove',(e)=>{
console.log("pointer moving over shadow")
})
let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/PreviewSnapshots/phantom_'+source+"_"+this.title+'.png')
dummyImage.src=captureFile
// web.src=captureFile
// webImage.src=captureFile
web.src=newUrl
// console.log("newUrl",newUrl)
// webOffloading.src=newUrl
/*let zoomFactor = 1
document.body.appendChild(dummyImage)
dummyImage.addEventListener("load", ()=>{
let w = (dummyImage.width/dummyImage.height) * this.webFrame.offsetHeight * 2
zoomFactor=this.webFrame.offsetWidth/w
console.log("IMAGE LOADEED",newUrl, w,this.webFrame.offsetWidth)
});*/
// web.src="https://www.golem.de/"
// console.log("Appending WebView",newUrl)
// // document.getElementById(this.title+"bufferPadWeb").src=newUrl
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<h ? w*0.5 : h*0.5
let animationRingWidth = animationSize*0.1;
loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
loadAnim.style.borderRadius="50%"
loadAnim.style.height=animationSize-animationRingWidth*2+"px"
loadAnim.style.width=animationSize-animationRingWidth*2+"px"
loadAnim.style.top = h*0.25+"px"
loadAnim.style.left = w*0.25+"px"
w<h ? loadAnim.style.top = 0.5*(h-animationSize)+"px" : loadAnim.style.left = 0.5*(w-animationSize)+"px"*/
})
web.addEventListener('did-stop-loading', ()=>{
// web.setZoomFactor(1.0)
/*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<this.urlList.length)this.appendWebView(this.urlList[this.webviewID].url,this.urlList[this.webviewID].source)
/*webImage.src='var/cosmic.png'
web.capturePage((image)=>{
// 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/PreviewSnapshots/phantom_'+source+"_"+this.title+'.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(){
webImage.src=captureFile
})
})
})
})*/
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"
// if(source.indexOf("sum") >-1)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.pointerEvents = "none"
// 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.currentWebviewFrame.style.pointerEvents = "all"
// 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=value
button.draggable = false
button.classList.add("interactiveElement")
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.minimizeButton, {
right: (b * 3.75) + "px",
bottom: "0px",
width: b+"px",
height: b+"px"})
Elements.setStyle(this.maximizeButton, {
right: (b * 3.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"
})*/
InteractionMapper.on('tap',this.closeButton, 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=value
button.draggable = false
button.classList.add("interactiveElement")
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,
minimizedHiddenHeight = 0,
minimizedHiddenWidth = 0,
minimized = false,
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.minimizedHiddenHeight = minimizedHiddenHeight
this.minimizedHiddenWidth = minimizedHiddenWidth
this.minimized = minimized
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)
this.showWebviewListButton = this.addButton("../dev/tumortisch/icons/ic_list_48px.svg", "show list")
this.expandButton = this.addButton("../dev/tumortisch/icons/launch.png", "expand")
this.expandButton.id=this.title+"expandButton"
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.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: [e.target.getAttribute('url')],
startScale:1,
hideOnStart: false,
width: this.pageWidth*0.3906,
height: this.pageWidth*0.3906,
scalable: true,
rotatable: false})
urlPadMap.set(newPadKey,newPad)
})
for(var i=0; i<this.urlList.length; i++){
this.addNewWebview(this.urlList[i])
}
this.webViewSnapshot.style.visibility="hidden"
this.closeButton = this.addButton("../dev/tumortisch/icons/cross.svg", "close")
this.minimizeButton = this.addButton("../dev/tumortisch/icons/remove.png", "minimize")
this.backButton = this.addButton("../dev/tumortisch/icons/left.svg", "go back")
this.forwardButton = this.addButton("../dev/tumortisch/icons/right.svg", "go forward")
this.backButton.style.opacity = 0.5
this.forwardButton.style.opacity = 0.5
this.minimized == false ? this.minimizeButton.src = fileURL("../dev/tumortisch/icons/remove.png") : this.minimizeButton.src = fileURL("../dev/tumortisch/icons/fullscreen.png")
/*for (let callback of window.padLoadedHandler) {
callback(this, url)
}*/
// this.pseudoFrame = document.createElement('div')
this.pseudoFrameTop = document.createElement('div')
this.pseudoFrameLeft = document.createElement('div')
this.pseudoFrameRight = document.createElement('div')
/*Elements.setStyle(this.pseudoFrame, {
position: "absolute",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
pointerEvents: "none"
})*/
Elements.setStyle(this.pseudoFrameTop, {
position: "absolute",
// background: "pink",
top: "0px",
left: "0px",
width: "100%"
// height: "50px"
})
Elements.setStyle(this.pseudoFrameLeft, {
position: "absolute",
// background: "pink",
top: "0px",
left: "0px",
// width: "5px",
height: "100%"
})
Elements.setStyle(this.pseudoFrameRight, {
position: "absolute",
// background: "pink",
top: "0px",
right: "0px",
// width: "5px",
height: "100%"
})
this.frame.appendChild(this.pseudoFrameTop)
this.frame.appendChild(this.pseudoFrameLeft)
this.frame.appendChild(this.pseudoFrameRight)
// this.frame.appendChild(this.pseudoFrame)
this.pseudoFrameTop.addEventListener('pointerenter',(e)=>{
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)
}
})*/
InteractionMapper.on('tap',this.minimizeButton, e => {
let s = this.scatter.scale
let x=0
let y=0
let deltaX = 0
let deltaY = 0
switch(this.minimized){
case false:
let w = this.frame.offsetWidth*s < 800 ? this.frame.offsetWidth : 800/s
x = this.frame.getBoundingClientRect().right - w
y = this.frame.getBoundingClientRect().bottom - this.border
deltaX = this.frame.offsetWidth - w
deltaY = this.frame.offsetHeight - this.border
this.minimizedHiddenHeight = this.frame.offsetHeight
this.minimizedHiddenWidth = this.frame.offsetWidth
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.minimize(w, this.border, this.scatter.scale, deltaX*s, deltaY*s)
this.minimized = true
this.minimizeButton.src = fileURL("../dev/tumortisch/icons/fullscreen.png")
this.scatter.scalable = false
$(this.frame).children(".frameButton").each(function(i, obj) {
if(obj.value !="close" && obj.value !="closeAll" && obj.value !="minimize")obj.style.pointerEvents = "none"
})
// this.frame.style.pointerEvents = "none"
// this.minimizeButton.style.pointerEvents = "all"
// this.closeButton.style.pointerEvents = "all"
break
case true:
s = this.scatter.scale
x = this.frame.getBoundingClientRect().right - this.minimizedHiddenWidth
y = this.frame.getBoundingClientRect().bottom - this.minimizedHiddenHeight
deltaX = this.frame.getBoundingClientRect().width - this.minimizedHiddenWidth*s
deltaY = this.frame.getBoundingClientRect().height - this.minimizedHiddenHeight*s
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.minimize(this.minimizedHiddenWidth, this.minimizedHiddenHeight, this.scatter.scale, deltaX, deltaY)
this.minimized = false
this.minimizeButton.src = fileURL("../dev/tumortisch/icons/remove.png")
this.scatter.scalable = true
$(this.frame).children(".frameButton").each(function(i, obj) {
obj.style.pointerEvents = "all"
})
// this.frame.style.pointerEvents = "all"
break
}
})
InteractionMapper.on('tap',this.backButton, 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()
}
})
InteractionMapper.on('tap',this.forwardButton, 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()
}
})
InteractionMapper.on('tap',this.closeButton, e => {
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.close()
})
/* 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 = "./icons/resize.png"
this.scatter.resizeButton.appendChild(img)
// this.scatter.resizeButton.className = "frameButton"
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" )
})*/
}
minimize(width, height, scale, x, y) {
let oldPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
this.frame.style.transformOrigin = "0% 0%"
let newPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
let offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.frame, 0, { css: { left: "+=" + offset.x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + offset.y + "px" } })
// TweenLite.to(this.frame, 0, { width: width , height: height, x: x, y: y })
TweenLite.to(this.frame, 0, { width: width , height: height})
TweenLite.to(this.frame, 0, { css: { left: "+=" + x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + y + "px" } })
oldPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
this.frame.style.transformOrigin = "50% 50%"
newPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.frame, 0, { css: { left: "+=" + offset.x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + offset.y + "px" } })
}
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 timeTouchStart = 0
let overlayCaptureEvents = document.createElement('div')
overlayCaptureEvents.style.position="absolute"
overlayCaptureEvents.style.background="white"
overlayCaptureEvents.style.opacity="0.01"
overlayCaptureEvents.style.width="100%"
overlayCaptureEvents.style.height="100%"
overlayCaptureEvents.style.top="0px"
overlayCaptureEvents.style.left="0px"
// overlay.style.background="white"
overlayCaptureEvents.classList.add("interactiveElement")
overlayCaptureEvents.addEventListener('touchmove',(e)=>{
e.preventDefault()
e.stopPropagation()
})
overlayCaptureEvents.addEventListener('pointerup',(e)=>{
e.preventDefault()
e.stopPropagation()
let d = new Date()
console.log("delta Time",d.getTime()-timeTouchStart)
if(d.getTime()-timeTouchStart<150)web.sendInputEvent({type:'mouseUp', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale, button:'left', clickCount: 1})
})
overlayCaptureEvents.addEventListener('pointerdown',(e)=>{
e.preventDefault()
e.stopPropagation()
let d = new Date()
timeTouchStart = d.getTime()
console.log("timeTouchStart",timeTouchStart)
web.sendInputEvent({type:'mouseDown', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale, button:'left', clickCount: 1})
})
overlayCaptureEvents.addEventListener('pointermove',(e)=>{
if(e.pointerType!='mouse'){
// console.log("e.movementY",e.movementY)
web.executeJavaScript("window.scrollTo(scrollX+"+(-1*e.movementX)+", scrollY+"+ (-1*e.movementY)+")")
}
// if(e.pointerType=='mouse'){
// web.sendInputEvent({type:'mouseMove', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale})
// }
})
overlayCaptureEvents.addEventListener('mousewheel',(e)=>{
// console.log("mousewheel",e.deltaY)
web.executeJavaScript("window.scrollTo(scrollX+"+e.deltaX+", scrollY+"+ e.deltaY+")")
// web.sendInputEvent({type:'mouseWheel', x: (e.clientX-web.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-web.getBoundingClientRect().top)/this.scatter.scale, deltaY: -e.deltaY})
})
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)
if(remote.getGlobal('multiUserMode'))this.webBackground.appendChild(overlayCaptureEvents)
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<h ? w*0.5 : h*0.5
let animationRingWidth = animationSize*0.1;
loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
loadAnim.style.borderRadius="50%"
loadAnim.style.height=animationSize-animationRingWidth*2+"px"
loadAnim.style.width=animationSize-animationRingWidth*2+"px"
loadAnim.style.top = h*0.25+"px"
loadAnim.style.left = w*0.25+"px"
w<h ? loadAnim.style.top = 0.5*(h-animationSize)+"px" : loadAnim.style.left = 0.5*(w-animationSize)+"px"*/
})
webview.addEventListener('did-stop-loading', ()=>{
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.setAttribute('source',src)
// 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"
this.expandButton.setAttribute('url',src)
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'))
this.expandButton.setAttribute("url",e.target.getAttribute('source'))
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.tabs.scrollLeft){
$(this.tabs).animate({scrollLeft: e.target.offsetLeft-10}, "slow")
}
/* $("webview").each(function(i, obj) {
obj.style.visibility="hidden"
obj.setAttribute('selected','0')
if(obj.getAttribute('id')==src){
obj.style.visibility="visible"
obj.style.opacity="1"
newSelectedWebview=obj
obj.setAttribute('selected','1')
}
})*/
//this.web = newSelectedWebview
this.enableButtons()
})
}
getPreviousTab(val){
let obj=null
let returnValue=null
this.webviewMap.forEach(function (item, key, mapObj) {
if(key==val){
returnValue=obj
}
obj=item
})
return returnValue
}
getNextTab(val){
console.log("this.webviewMap",this.webviewMap[0])
let obj=null
let oldKey=null
let returnValue=null
this.webviewMap.forEach(function (item, key, mapObj) {
obj=item
if(oldKey==val){
returnValue=obj
}
oldKey=key
})
return returnValue
}
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.padMapKey)
}
enableButtons() {
console.log("enabling buttons")
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=value
button.draggable = false
button.classList.add("interactiveElement")
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) +"px)"
let h = "calc(100% - " + (b) +"px)"
let w = "calc(100% - "+2 +"px)"
let w2 = "calc(100% - " + (b+2) +"px)"
/* Elements.setStyle(this.web, {
width: w,
height: h,
margin: "0px"})*/
$(this.frame).find(".tabCloseButton").css('height',0.5*b+"px")
$(this.frame).find(".tabCloseButton").css('width',0.5*b+"px")
$(this.frame).find(".tabCloseButton").css('borderRadius',b+"px")
$(this.frame).find(".tabTitle").css('fontSize',0.3*b+"px")
// $(this.frame).find(".tab").css('borderLeft',0.01*b+'px solid black')
// $(this.frame).find(".tab").css('borderTop',0.01*b+'px solid black')
// $(this.frame).find(".tab").css('borderRight',0.01*b+'px solid black')
// $(".tabTitle").css('fontSize',0.3*b+"px")
this.scatter.resizeButton.style.width=b+"px"
this.scatter.resizeButton.style.height=b+"px"
Elements.setStyle(this.titlebar, {
left: (b * 5.75) + "px",
bottom: "0px",
fontSize: 0.7*b+"px",
// paddingTop: 10+"px",
// textAlign: "center",
height: b+"px"})
Elements.setStyle(this.webViewSnapshot, {
width: w,
height: h,
margin: "0px"})
Elements.setStyle(this.tabs, {
width: w2,
height: b+"px",
bottom: b+"px",
margin: "1px"})
Elements.setStyle(this.webBackground, {
width: w,
height: size,
margin: "1px"})
Elements.setStyle(this.webviewList, {
bottom: 2*b+2+"px",
right: b+"px",
width: "50%",
margin: "0px"})
/* Elements.setStyle(this.overlay, {
width: w,
height: h,
margin: "0px"})*/
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"})
Elements.setStyle(this.minimizeButton, {
right: (b * 2.75) + "px",
bottom: "0px",
width: b+"px",
height: b+"px"})
Elements.setStyle(this.backButton, {
left: (b * 0.1) +"px",
bottom: "0px",
width: b+"px",
height: b+"px"})
Elements.setStyle(this.forwardButton, {
left: (this.border + (b * 0.1)) +"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.showWebviewListButton, {
right: "1px",
background: "white",
bottom: b+1+"px",
width: b+"px",
height: b+"px"})
if(this.tabMap.size > 1){
this.tabs.style.display = "flex"
this.showWebviewListButton.style.display = "inline"
if(this.hasTtitleBar){
Elements.setStyle(this.webBackground, {
top: b+"px",
width: w,
height: size-b,
margin: "1px"})
Elements.setStyle(this.titlebar, {
display: "inline"})
}
if(!this.hasTtitleBar){
Elements.setStyle(this.webBackground, {
width: w,
height: size,
margin: "1px"})
}
}
if(this.tabMap.size <= 1){
this.tabs.style.display = "none"
this.showWebviewListButton.style.display = "none"
if(this.hasTtitleBar){
Elements.setStyle(this.webBackground, {
top: b+"px",
width: w,
height: size,
margin: "1px"})
Elements.setStyle(this.titlebar, {
display: "inline"})
}
if(!this.hasTtitleBar){
Elements.setStyle(this.webBackground, {
width: w,
height: h,
margin: "1px"})
}
}
}
}
class minimalPadFromElement {
constructor(element, scatterContainer, {
startScale=1.0, minScale=0.1, maxScale=1.0,
autoBringToFront=true,
type = 'minimalFromElement',
title = 'new Pad',
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,
minimizedHiddenHeight = 0,
minimizedHiddenWidth = 0,
minimized = false,
resizable=false,
} ={}) {
this.element = element
this.x = x
this.y = y
this.type = type
this.title = title
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.minimizedHiddenHeight = minimizedHiddenHeight
this.minimizedHiddenWidth = minimizedHiddenWidth
this.minimized = minimized
this.frame = document.createElement('div')
this.toolButtonMap = new Map()
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("../dev/tumortisch/icons/clear.png", "close")
this.minimizeButton = this.addButton("../dev/tumortisch/icons/remove.png", "minimize")
this.minimized == false ? this.minimizeButton.src = fileURL("../dev/tumortisch/icons/remove.png") : this.minimizeButton.src = fileURL("../dev/tumortisch/icons/fullscreen.png")
// this.addContentButton = this.addButton("../assets/icons/png/flat/note_add.png", "addContent")
// this.copyButton = this.addButton("../assets/icons/png/flat/content_copy.png", "copy")
// this.pasteButton = this.addButton("../assets/icons/png/flat/content_paste.png", "paste")
// this.saveButton = this.addButton("../assets/icons/png/flat/save.png", "save")
// this.deleteButton = this.addButton("../assets/icons/png/flat/delete.png", "delete")
document.body.appendChild( this.frame)
this.border = 50
this.frame.appendChild(this.element)
// this.pseudoFrame = document.createElement('div')
this.pseudoFrameTop = document.createElement('div')
this.pseudoFrameLeft = document.createElement('div')
this.pseudoFrameRight = document.createElement('div')
/*Elements.setStyle(this.pseudoFrame, {
position: "absolute",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
pointerEvents: "none"
})*/
Elements.setStyle(this.pseudoFrameTop, {
position: "absolute",
// background: "pink",
top: "0px",
left: "0px",
width: "100%"
// height: "50px"
})
Elements.setStyle(this.pseudoFrameLeft, {
position: "absolute",
// background: "pink",
top: "0px",
left: "0px",
// width: "5px",
height: "100%"
})
Elements.setStyle(this.pseudoFrameRight, {
position: "absolute",
// background: "pink",
top: "0px",
right: "0px",
// width: "5px",
height: "100%"
})
this.frame.appendChild(this.pseudoFrameTop)
this.frame.appendChild(this.pseudoFrameLeft)
this.frame.appendChild(this.pseudoFrameRight)
// this.frame.appendChild(this.pseudoFrame)
this.pseudoFrameTop.addEventListener('pointerenter',(e)=>{
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.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"
})*/
InteractionMapper.on('tap',this.minimizeButton, e => {
let s = this.scatter.scale
let x=0
let y=0
let deltaX = 0
let deltaY = 0
switch(this.minimized){
case false:
let w = this.frame.offsetWidth*s < 800 ? this.frame.offsetWidth : 800/s
x = this.frame.getBoundingClientRect().right - w
y = this.frame.getBoundingClientRect().bottom - this.border
deltaX = this.frame.offsetWidth - w
deltaY = this.frame.offsetHeight - this.border
this.minimizedHiddenHeight = this.frame.offsetHeight
this.minimizedHiddenWidth = this.frame.offsetWidth
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.minimize(w, this.border, this.scatter.scale, deltaX*s, deltaY*s)
this.minimized = true
this.minimizeButton.src = fileURL("../dev/tumortisch/icons/fullscreen.png")
this.scatter.scalable = false
$(this.frame).children(".frameButton").each(function(i, obj) {
if(obj.value !="close" && obj.value !="closeAll" && obj.value !="minimize")obj.style.pointerEvents = "none"
})
// this.frame.style.pointerEvents = "none"
// this.minimizeButton.style.pointerEvents = "all"
// this.closeButton.style.pointerEvents = "all"
break
case true:
s = this.scatter.scale
x = this.frame.getBoundingClientRect().right - this.minimizedHiddenWidth
y = this.frame.getBoundingClientRect().bottom - this.minimizedHiddenHeight
deltaX = this.frame.getBoundingClientRect().width - this.minimizedHiddenWidth*s
deltaY = this.frame.getBoundingClientRect().height - this.minimizedHiddenHeight*s
TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
TweenMax.to(e.target, 0.1, {scale:"1.0"})
}})
this.minimize(this.minimizedHiddenWidth, this.minimizedHiddenHeight, this.scatter.scale, deltaX, deltaY)
this.minimized = false
this.minimizeButton.src = fileURL("../dev/tumortisch/icons/remove.png")
this.scatter.scalable = true
$(this.frame).children(".frameButton").each(function(i, obj) {
obj.style.pointerEvents = "all"
})
// this.frame.style.pointerEvents = "all"
break
}
})
InteractionMapper.on('tap',this.closeButton, 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 = "./icons/resize.png"
this.scatter.resizeButton.appendChild(img)
// this.scatter.resizeButton.className = "frameButton"
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()
})
this.layout()
}
minimize(width, height, scale, x, y) {
let oldPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
this.frame.style.transformOrigin = "0% 0%"
let newPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
let offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.frame, 0, { css: { left: "+=" + offset.x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + offset.y + "px" } })
// TweenLite.to(this.frame, 0, { width: width , height: height, x: x, y: y })
TweenLite.to(this.frame, 0, { width: width , height: height})
TweenLite.to(this.frame, 0, { css: { left: "+=" + x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + y + "px" } })
oldPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
this.frame.style.transformOrigin = "50% 50%"
newPostition = { x: $(this.frame).position().left, y: $(this.frame).position().top }
offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.frame, 0, { css: { left: "+=" + offset.x + "px" } })
TweenLite.to(this.frame, 0, { css: { top: "+=" + offset.y + "px" } })
}
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
button.classList.add("interactiveElement")
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("layounting minmalPadFromElement")
let b = this.border
let b2 = b * 2
let b8 = b / 8
let b25 = b / 25
let b15 = b / 15
this.scatter.resizeButton.style.width=b+"px"
this.scatter.resizeButton.style.height=b+"px"
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"})
Elements.setStyle(this.minimizeButton, {
right: (b * 2.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 }