1381 lines
48 KiB
JavaScript
1381 lines
48 KiB
JavaScript
|
const {fileURL} = require('./utils.js')
|
||
|
|
const path = require('path')
|
||
|
|
|
||
|
|
/* A specialization that ignores webview events and thus allows
|
||
|
|
* webviews to get touch, mouse and wheel events.
|
||
|
|
*/
|
||
|
|
class minimalDOMPadContainer 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 minimalPad {
|
||
|
|
|
||
|
|
constructor(scatterContainer, {
|
||
|
|
startScale=1.0, minScale=0.25, maxScale=10.5,
|
||
|
|
autoBringToFront=true,
|
||
|
|
type = 'minimal',
|
||
|
|
title="",
|
||
|
|
tabbedView = true,
|
||
|
|
hasTtitleBar = false,
|
||
|
|
// 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,
|
||
|
|
} ={}) {
|
||
|
|
|
||
|
|
this.x = x
|
||
|
|
this.y = y
|
||
|
|
this.type = type
|
||
|
|
this.url = url
|
||
|
|
// this.urlList = urlList
|
||
|
|
this.padMapKey = padMapKey,
|
||
|
|
this.title = title,
|
||
|
|
this.hasTtitleBar = hasTtitleBar
|
||
|
|
this.tabbedView = tabbedView
|
||
|
|
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.pointerCounter = 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 = 50 / 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 = ""
|
||
|
|
|
||
|
|
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"
|
||
|
|
})
|
||
|
|
|
||
|
|
if(this.hasTtitleBar)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.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.addNewWebview(this.url)
|
||
|
|
|
||
|
|
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()
|
||
|
|
})*/
|
||
|
|
|
||
|
|
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.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 = 50 / e.scale
|
||
|
|
if (newBorder !== this.border) {
|
||
|
|
this.border = newBorder
|
||
|
|
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" )
|
||
|
|
})*/
|
||
|
|
this.heinz = document.createElement('div')
|
||
|
|
|
||
|
|
Elements.setStyle(this.heinz, {
|
||
|
|
position: "absolute",
|
||
|
|
background: "pink",
|
||
|
|
top: "0px",
|
||
|
|
left: "0px",
|
||
|
|
width: "100%",
|
||
|
|
opacity: "0.5",
|
||
|
|
display: "inline",
|
||
|
|
height: "100%"
|
||
|
|
})
|
||
|
|
|
||
|
|
this.heinz.addEventListener('pointerdown',(e)=>{
|
||
|
|
console.log('pointer down on Heinz')
|
||
|
|
e.target.style.display="none"
|
||
|
|
})
|
||
|
|
this.layout()
|
||
|
|
|
||
|
|
// this.webBackground.appendChild(this.heinz)
|
||
|
|
// this.heinz.classList.add("interactiveElement")
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
addNewWebview(src){
|
||
|
|
/* if(this.web!=null){
|
||
|
|
this.web.style.visibility="hidden"
|
||
|
|
this.web.setAttribute('selected','0')
|
||
|
|
}*/
|
||
|
|
let timeTouchStart = 0
|
||
|
|
|
||
|
|
let webview=document.createElement("webview")
|
||
|
|
this.web=webview
|
||
|
|
// webview.style.pointerEvents="none"
|
||
|
|
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: "hidden",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
// border: "1px solid #fff"
|
||
|
|
})
|
||
|
|
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('div')
|
||
|
|
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.style.opacity="0.6"
|
||
|
|
|
||
|
|
this.overlayMap.set(src,overlay)
|
||
|
|
|
||
|
|
let overlayCaptureEvents = document.createElement('div')
|
||
|
|
overlayCaptureEvents.style.position="absolute"
|
||
|
|
overlayCaptureEvents.style.background="lime"
|
||
|
|
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 p = {x:e.clientX, y:e.clientY}
|
||
|
|
|
||
|
|
let webviewPosition = Points.fromPageToNode(webview,p)
|
||
|
|
// oldX = 0
|
||
|
|
// oldY = 0
|
||
|
|
|
||
|
|
let d = new Date()
|
||
|
|
console.log("delta Time",d.getTime()-timeTouchStart)
|
||
|
|
// if(d.getTime()-timeTouchStart<150)webview.sendInputEvent({type:'mouseUp', x: (e.clientX-webview.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-webview.getBoundingClientRect().top)/this.scatter.scale, button:'left', clickCount: 1})
|
||
|
|
if(d.getTime()-timeTouchStart<150)webview.sendInputEvent({type:'mouseUp', x: webviewPosition.x, y: webviewPosition.y, button:'left', clickCount: 1})
|
||
|
|
})
|
||
|
|
|
||
|
|
overlayCaptureEvents.addEventListener('pointerdown',(e)=>{
|
||
|
|
e.preventDefault()
|
||
|
|
e.stopPropagation()
|
||
|
|
this.scatter.bringToFront()
|
||
|
|
let p = {x:e.clientX, y:e.clientY}
|
||
|
|
|
||
|
|
let webviewPosition = Points.fromPageToNode(webview,p)
|
||
|
|
|
||
|
|
let d = new Date()
|
||
|
|
timeTouchStart = d.getTime()
|
||
|
|
|
||
|
|
// webview.sendInputEvent({type:'mouseDown', x: (e.clientX-webview.getBoundingClientRect().left)/this.scatter.scale, y: (e.clientY-webview.getBoundingClientRect().top)/this.scatter.scale, button:'left', clickCount: 1})
|
||
|
|
webview.sendInputEvent({type:'mouseDown', x: webviewPosition.x, y: webviewPosition.y, button:'left', clickCount: 1})
|
||
|
|
})
|
||
|
|
|
||
|
|
overlayCaptureEvents.addEventListener('pointermove',(e)=>{
|
||
|
|
if(e.pointerType!='mouse'){
|
||
|
|
let rotation = Angle.radian2degree(this.scatter.rotation);
|
||
|
|
rotation = (rotation + 360) % 360;
|
||
|
|
|
||
|
|
let r = Math.sqrt(Math.pow(e.movementX, 2) + Math.pow(e.movementY, 2));
|
||
|
|
let phi = Angle.radian2degree(Math.atan2(e.movementX, e.movementY));
|
||
|
|
|
||
|
|
phi = ((phi) + 630) % 360;
|
||
|
|
let rot = ((rotation + 90) + 630) % 360;
|
||
|
|
|
||
|
|
let diffAngle = ((0 + rot) + 360) % 360;
|
||
|
|
let phiCorrected = (phi + diffAngle + 360) % 360;
|
||
|
|
|
||
|
|
let deltaX = r * Math.cos(Angle.degree2radian(phiCorrected));
|
||
|
|
let deltaY = -r * Math.sin(Angle.degree2radian(phiCorrected));
|
||
|
|
// if(oldX!=0)deltaX = (e.clientX-oldX)
|
||
|
|
// if(oldY!=0)deltaY = (e.clientY-oldY)
|
||
|
|
// console.log("e.movementY",e.movementY)
|
||
|
|
// webview.sendInputEvent({type:'mouseWheel', x: 0, y: 0, deltaX: e.movementX, deltaY: e.movementY, canScroll: true })
|
||
|
|
webview.executeJavaScript("window.scrollTo(scrollX+"+(-1*deltaX)+", scrollY+"+ (-1*deltaY)+")")
|
||
|
|
// oldX = e.clientX
|
||
|
|
// oldY = e.clientY
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
overlayCaptureEvents.addEventListener('mousewheel',(e)=>{
|
||
|
|
console.log("mousewheel",e.deltaY)
|
||
|
|
// webview.sendInputEvent({type:'mouseWheel', x: 0, y: 0, deltaX: e.deltaX, deltaY: -e.deltaY, canScroll: true })
|
||
|
|
webview.executeJavaScript("window.scrollTo(scrollX+"+e.deltaX+", scrollY+"+ 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)
|
||
|
|
|
||
|
|
this.webBackground.appendChild(overlay)
|
||
|
|
if(remote.getGlobal('multiUserMode'))this.webBackground.appendChild(overlayCaptureEvents)
|
||
|
|
|
||
|
|
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")
|
||
|
|
this.titlebar.innerHTML=this.web.getTitle()
|
||
|
|
// this.web.openDevTools()
|
||
|
|
// webview.style.overflow= "auto"
|
||
|
|
// webview.style.overflowY= "hidden"
|
||
|
|
})
|
||
|
|
|
||
|
|
webview.addEventListener('ipc-message', (e) => {
|
||
|
|
if(e.channel=='touchStart'){
|
||
|
|
// console.log("pointer down on webview",e.srcElement)
|
||
|
|
if(e.srcElement.src==webview.src)this.pointerCounter++
|
||
|
|
this.scatter.bringToFront()
|
||
|
|
}
|
||
|
|
if(e.channel=='touchEnd'){
|
||
|
|
// console.log("pointer up on webview")
|
||
|
|
if(e.srcElement.src==webview.src)this.pointerCounter--
|
||
|
|
}
|
||
|
|
if(e.channel=='webviewPointerCancel'){
|
||
|
|
this.heinz.style.display="inline"
|
||
|
|
}
|
||
|
|
// console.log("pointerCounter",this.pointerCounter)
|
||
|
|
})
|
||
|
|
|
||
|
|
/* let {ipcRenderer} = require('electron')
|
||
|
|
|
||
|
|
ipcRenderer.on('touchStartWebview' ,function(event){
|
||
|
|
console.log(event)
|
||
|
|
})*/
|
||
|
|
|
||
|
|
webview.addEventListener('did-start-loading', ()=>{
|
||
|
|
|
||
|
|
webview.setAttribute('loaded','0')
|
||
|
|
overlay.style.visibility="visible"
|
||
|
|
|
||
|
|
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('dom-ready', ()=>{
|
||
|
|
// })
|
||
|
|
webview.addEventListener('did-stop-loading', ()=>{
|
||
|
|
webview.setAttribute('loaded','1')
|
||
|
|
this.layout()
|
||
|
|
overlay.style.visibility="hidden"
|
||
|
|
})
|
||
|
|
|
||
|
|
webview.addEventListener('new-window', (e) => {
|
||
|
|
if (!this.webviewMap.has(e.url+this.padMapKey)){
|
||
|
|
if(this.tabbedView)this.addNewWebview(e.url)
|
||
|
|
if(!this.tabbedView){
|
||
|
|
|
||
|
|
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,
|
||
|
|
tabbedView: false,
|
||
|
|
hasTtitleBar: this.hasTtitleBar,
|
||
|
|
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.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
|
||
|
|
if(webview.getAttribute('loaded')=='1') this.titlebar.innerHTML=this.web.getTitle()
|
||
|
|
// 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'))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.layout()
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
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.url)
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
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)`
|
||
|
|
})
|
||
|
|
|
||
|
|
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.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")
|
||
|
|
|
||
|
|
|
||
|
|
Elements.setStyle(this.titlebar, {
|
||
|
|
left: (b * 2.75) + "px",
|
||
|
|
top: "0px",
|
||
|
|
fontSize: 0.7*b+"px",
|
||
|
|
display: "none",
|
||
|
|
// paddingTop: 10+"px",
|
||
|
|
// textAlign: "center",
|
||
|
|
height: 0.9*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: "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"})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if(!this.tabbedView){
|
||
|
|
this.tabs.style.display = "none"
|
||
|
|
this.showWebviewListButton.style.display = "none"
|
||
|
|
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,
|
||
|
|
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.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",
|
||
|
|
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 = ""
|
||
|
|
this.title.style.color = "white"
|
||
|
|
// this.frame.appendChild(this.title)
|
||
|
|
|
||
|
|
Elements.setStyle(this.title, {
|
||
|
|
position: "absolute"
|
||
|
|
})
|
||
|
|
|
||
|
|
// 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', ()=>{
|
||
|
|
this.frame.style.display="none"
|
||
|
|
})
|
||
|
|
|
||
|
|
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="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
|
||
|
|
|
||
|
|
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)"
|
||
|
|
|
||
|
|
this.scatter.resizeButton.style.width=b+"px"
|
||
|
|
this.scatter.resizeButton.style.height=b+"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.title, {
|
||
|
|
left: (b * 1.5) + "px",
|
||
|
|
fontSize: (b * 0.8) + "px",
|
||
|
|
top: (0.1)+"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"})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = { minimalPad, minimalDOMPadContainer, minimalPadFromElement}
|