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