@GoldenChaos, @panda, @peripatew, @jerosh,
Visual Window Snapping + Monitors
UI Now Working!!
I've just done the chore of duplicating and differentiating each of the three palettes, making styles for each, copying the seperate styles into each palette and re-writing the Javascript two times over for each palette. There's basically three window snapping presets in here now, but the UI (which can be seen here, i wasn't bothered to film it again) is now working!
The functionality on BTT's side still isn't configured, but the HTML and JS should correctly call the right trigger, as i'm seeing the correct names in safari's console.
I've added an 'L' or an 'R' to the class names / BTT triggers to be created to indicate monitor snapping.
RLeftHalf: Snap to the left half of the monitor to the right
LeftHalf: Snap to the left half of this monitor
LLeftHalf: Snap to the left half of the monitor to the left
Most of the code is the same except with added 'L's and 'R's. (it still took ages to get all of them)
So, the messy UI has been fixed and it's returning the right trigger names, now:
- Need to make the actual named triggers in BTT, right now only the original 'this window' ones are there.
- Need to touchup the aesthetics a bit. The main functionality is there but the borders and such need to be refined. Stretch Goal: transform the side palletes into circles with icons when shrunk.
- Need to make an applescript that senses if any external displays are active, then shows the correct snapping HTML. (either the one with the desktop snapping or just the normal small one.) This will be called by the user, it then displays the right one based on the current situation.
I'm not sure how to make those window snapping triggers so it would be great if someone made a bunch for both L/R monitor switching!
Here is the code so far if anyone wants to have a look:
Window Snapping + Monitor Snapping
<!--
VISUAL WINDOW SNAPPING by the BetterTouchTool community.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863
Authors of this script:
- panda: The Core Original Workings
- Jerosh: Highlighting Improvements
- GoldenChaos: Colouring and Aesthetic Improvements
- yyuuiko: Multi-Desktop Snapping and Code Optimisation
Thanks for using it!
-->
<html>
<head>
<style>
html { /* background image for aesthetic testing */
/* background-image: url('red.png');
background-color: #def;
background-repeat: no-repeat;
background-size: cover; */
/* Image Centering */
background-position: 50% 50%; /* Background Position */
width: 100vw; /* Body Width (fill viewport width) */
height: 100vh; /* Body Height (fill viewport height) */
}
.main-container { /* MAIN WRAPPER */
margin: 40px;
left: calc(50% - 17.3em);
position: fixed;
overflow: visible;
/* margin-left:; */
}
.grid-container { /* MAIN GRID */
/* display: grid;
height: 150px;
width: 150px;
padding: 0px;
background-color: rgba(255,255,255,0.5);
-webkit-backdrop-filter: blur(20px);
border-radius: 38px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
border: 1.5px solid rgba(255,255,255,0.7); */
display: grid;
height: 150px;
width: 150px;
margin-left: 40px;
margin-right: 40px;
padding: 1px;
background: rgba(179, 178, 177, .5);
-webkit-backdrop-filter: blur(48px) saturate(200%);
border-radius: 38px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ Monitor Switchers ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.monitor {
/* display: grid;
height: 150px;
width: 150px;
transform: scale(.4,.4);
padding: 0px;
background-color: rgba(255,255,255,0.5);
-webkit-backdrop-filter: blur(20px);
border-radius: 38px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
border: 1.5px solid rgba(255,255,255,0.7); */
transform: scale(.4,.4);
display: grid;
height: 150px;
width: 150px;
margin-left: 40px;
margin-right: 40px;
padding: 1px;
background: rgba(179, 178, 177, .5);
-webkit-backdrop-filter: blur(48px) saturate(200%);
border-radius: 38px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0px 0px;
grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
overflow: hidden;
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.monitor-left {
float: left;
margin-right: -30px;
}
.monitor-right{
float: right;
margin-left: -30px;
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ EXPAND MONITOR PALLETES ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.expandPallete {
transform: scale(1,1);
border-radius: 30%;
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.shrinkPallete {
transform: scale(.4,.4);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ CELL HIGHLIGHTS ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.highlighted { /* REPRESENTATION Style */
-webkit-backdrop-filter: brightness(100%) saturate(180%);
background-color: rgba(255,255,255,.45);
/* opacity: 0.7;
-webkit-backdrop-filter: saturate(100%) */
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
}
.highlightCell { /* BUTTON Style */
/* background-color: rgba(255,0,0,1); */
/* -webkit-backdrop-filter: brightness(100%) saturate(100%); */
opacity: 0.7;
-webkit-backdrop-filter: saturate(100%);
-webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);
}
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ FADE (Representation) ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
.cell {
/**/ /* border: solid rgba(255,255,255,0); */
/* background-color: rgba(0,0,0,.4); */
/* -webkit-backdrop-filter: saturate(180%) brightness(50%);
-webkit-background-clip: padding-box;
background-clip: padding-box;
mix-blend-mode: multiply; */
background: rgba(49, 48, 44, .5);
-webkit-backdrop-filter: saturate(100%);
mix-blend-mode: multiply;
}
/*------------------------------------------------------------------------------------------------------------------------*/
.TopLeft {
display: grid;
grid-area: TopLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;
grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
border-top-left-radius: 36px;
}
.TopLeftTopLeft {
grid-area: TopLeftTopLeft;
border-top-left-radius: 36px;
/* border-width: 0px 1px 1px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.TopLeftBottomLeft {
grid-area: TopLeftBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.TopLeftTopRight {
grid-area: TopLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.TopLeftBottomRight {
grid-area: TopLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.LTopLeft {
display: grid;
grid-area: TopLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;
grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
border-top-left-radius: 36px;
}
.LTopLeftTopLeft {
grid-area: TopLeftTopLeft;
border-top-left-radius: 36px;
/* border-width: 0px 1px 1px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.LTopLeftBottomLeft {
grid-area: TopLeftBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.LTopLeftTopRight {
grid-area: TopLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.LTopLeftBottomRight {
grid-area: TopLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.RTopLeft {
display: grid;
grid-area: TopLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;
grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
border-top-left-radius: 36px;
}
.RTopLeftTopLeft {
grid-area: TopLeftTopLeft;
border-top-left-radius: 36px;
/* border-width: 0px 1px 1px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.RTopLeftBottomLeft {
grid-area: TopLeftBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.RTopLeftTopRight {
grid-area: TopLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.RTopLeftBottomRight {
grid-area: TopLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.TopRight {
display: grid;
grid-area: TopRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
border-top-right-radius: 36px;
}
.TopRightTopLeft {
grid-area: TopRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.TopRightTopRight {
grid-area: TopRightTopRight;
border-top-right-radius: 36px;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.TopRightBottomLeft {
grid-area: TopRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.TopRightBottomRight {
grid-area: TopRightBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.LTopRight {
display: grid;
grid-area: TopRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
border-top-right-radius: 36px;
}
.LTopRightTopLeft {
grid-area: TopRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.LTopRightTopRight {
grid-area: TopRightTopRight;
border-top-right-radius: 36px;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.LTopRightBottomLeft {
grid-area: TopRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.LTopRightBottomRight {
grid-area: TopRightBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.RTopRight {
display: grid;
grid-area: TopRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
border-top-right-radius: 36px;
}
.RTopRightTopLeft {
grid-area: TopRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.RTopRightTopRight {
grid-area: TopRightTopRight;
border-top-right-radius: 36px;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.RTopRightBottomLeft {
grid-area: TopRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.RTopRightBottomRight {
grid-area: TopRightBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.BottomLeft {
display: grid;
grid-area: BottomLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
border-bottom-left-radius: 36px;
}
.BottomLeftTopLeft {
grid-area: BottomLeftTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.BottomLeftTopRight {
grid-area: BottomLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.BottomLeftBottomLeft {
grid-area: BottomLeftBottomLeft;
border-bottom-left-radius: 36px;
/* border-width: 1px 1px 0px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.BottomLeftBottomRight {
grid-area: BottomLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.LBottomLeft {
display: grid;
grid-area: BottomLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
border-bottom-left-radius: 36px;
}
.LBottomLeftTopLeft {
grid-area: BottomLeftTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.LBottomLeftTopRight {
grid-area: BottomLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.LBottomLeftBottomLeft {
grid-area: BottomLeftBottomLeft;
border-bottom-left-radius: 36px;
/* border-width: 1px 1px 0px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.LBottomLeftBottomRight {
grid-area: BottomLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.RBottomLeft {
display: grid;
grid-area: BottomLeft;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
border-bottom-left-radius: 36px;
}
.RBottomLeftTopLeft {
grid-area: BottomLeftTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.RBottomLeftTopRight {
grid-area: BottomLeftTopRight;
/* border-width: 0px 0px 1px 1px; */
}
.RBottomLeftBottomLeft {
grid-area: BottomLeftBottomLeft;
border-bottom-left-radius: 36px;
/* border-width: 1px 1px 0px 0px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.RBottomLeftBottomRight {
grid-area: BottomLeftBottomRight;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.BottomRight {
display: grid;
grid-area: BottomRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-bottom-right-radius: 36px;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
}
.BottomRightTopLeft {
grid-area: BottomRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.BottomRightTopRight {
grid-area: BottomRightTopRight;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.BottomRightBottomLeft {
grid-area: BottomRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.BottomRightBottomRight {
grid-area: BottomRightBottomRight;
border-bottom-right-radius: 36px;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.LBottomRight {
display: grid;
grid-area: BottomRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-bottom-right-radius: 36px;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
}
.LBottomRightTopLeft {
grid-area: BottomRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.LBottomRightTopRight {
grid-area: BottomRightTopRight;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.LBottomRightBottomLeft {
grid-area: BottomRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.LBottomRightBottomRight {
grid-area: BottomRightBottomRight;
border-bottom-right-radius: 36px;
/* border-width: 1px 0px 0px 1px; */
}
/*------------------------------------------------------------------------------------------------------------------------*/
.RBottomRight {
display: grid;
grid-area: BottomRight;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-bottom-right-radius: 36px;
/**/ grid-gap: 1px 1px;;
grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
}
.RBottomRightTopLeft {
grid-area: BottomRightTopLeft;
/* border-width: 0px 1px 1px 0px; */
}
.RBottomRightTopRight {
grid-area: BottomRightTopRight;
/* border-width: 0px 0px 1px 1px; */
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.RBottomRightBottomLeft {
grid-area: BottomRightBottomLeft;
/* border-width: 1px 1px 0px 0px; */
}
.RBottomRightBottomRight {
grid-area: BottomRightBottomRight;
border-bottom-right-radius: 36px;
/* border-width: 1px 0px 0px 1px; */
}
</style>
<script>
window.currentlyHighlighted = [];
//████████████████████████████- Add Highlight FX for Representation-██████████████
function addHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
}
}
//████████████████████████████- Remove Highlight FX for Representation -██████████████
function removeHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
}
}
//████████████████████████████- Add Highlight FX for Button -██████████████
function addCellHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
}
}
//████████████████████████████- Remove Highlight FX for Button-██████████████
function removeCellHighlight(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
}
}
//████████████████████████████- Add Expand for Monitor Palletes -██████████████
function addExpand(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted.push(classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.add('expandPallete');
document.getElementsByClassName('grid-container').item(0).classList.add('shrinkPallete');
}
}
//████████████████████████████- Remove Expand for Monitor Palletes-██████████████
function removeExpand(classNames) {
for (var i = 0; i < classNames.length; i++) {
window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
document.getElementsByClassName(classNames[i]).item(0).classList.remove('expandPallete');
document.getElementsByClassName('grid-container').item(0).classList.remove('shrinkPallete');
}
}
function uniq(a) {
var prims = {
"boolean": {},
"number": {},
"string": {}
},
objs = [];
return a.filter(function(item) {
var type = typeof item;
if (type in prims)
return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
else
return objs.indexOf(item) >= 0 ? false : objs.push(item);
});
}
function performAction() {
console.log(uniq(window.currentlyHighlighted));
var trigger = '';
if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'maximize';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'tophalf';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomhalf';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'lefthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'righthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'topright';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
trigger = 'topleft';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'bottomleft';
} else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomright';
}
console.log('trigger', trigger);
window.BTT.callHandler('trigger_named', {
trigger_name: trigger,
closeFloatingHTMLMenu: 1
})
}
function performLeftAction() {
console.log(uniq(window.currentlyHighlighted));
var trigger = '';
if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'maximize';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'tophalf';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomhalf';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'lefthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'righthalf';
} else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
trigger = 'topright';
} else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
trigger = 'topleft';
} else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
trigger = 'bottomleft';
} else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
trigger = 'bottomright';
}
console.log('trigger', trigger);
window.BTT.callHandler('trigger_named', {
trigger_name: trigger,
closeFloatingHTMLMenu: 1
})
}
function performRightAction() {
console.log(uniq(window.currentlyHighlighted));
var trigger = '';
if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('RTopRight') !== -1 &&
window.currentlyHighlighted.indexOf('RBottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
trigger = 'Rmaximize';
} else if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('RTopRight') !== -1) {
trigger = 'Rtophalf';
} else if (window.currentlyHighlighted.indexOf('RBottomLeft') !== -1 &&
window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
trigger = 'Rbottomhalf';
} else if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1 &&
window.currentlyHighlighted.indexOf('RBottomLeft') !== -1) {
trigger = 'Rlefthalf';
} else if (window.currentlyHighlighted.indexOf('RTopRight') !== -1 &&
window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
trigger = 'Rrighthalf';
} else if (window.currentlyHighlighted.indexOf('RTopRight') !== -1) {
trigger = 'Rtopright';
} else if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1) {
trigger = 'Rtopleft';
} else if (window.currentlyHighlighted.indexOf('RBottomLeft') !== -1) {
trigger = 'Rbottomleft';
} else if (window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
trigger = 'Rbottomright';
}
console.log('trigger', trigger);
window.BTT.callHandler('trigger_named', {
trigger_name: trigger,
closeFloatingHTMLMenu: 1
})
}
</script>
</head>
<body>
<div class="main-container">
<!-- Left Monitor Pallete -->
<div class="monitor monitor-left" onclick="performLeftAction()" onmouseover="addExpand(['monitor-left']);" onmouseout="removeExpand(['monitor-left']);">
<div class="LTopLeft" onmouseover="addHighlight(['LTopLeft']);" onmouseout="removeHighlight(['LTopLeft']);">
<div class="LTopLeftTopLeft area-overlap cell" onmouseover="addHighlight(['LTopLeftTopLeft']); addCellHighlight(['LTopLeftTopLeft'])" onmouseout="removeHighlight(['LTopLeftTopLeft']); removeCellHighlight(['LTopLeftTopLeft'])"></div>
<div class="LTopLeftBottomLeft cell" onmouseover="addHighlight(['LBottomLeft', 'LTopLeft']); addCellHighlight(['LTopLeftBottomLeft', 'LBottomLeftTopLeft'])" onmouseout="removeHighlight(['LBottomLeft', 'LTopLeft']); removeCellHighlight([ 'LTopLeftBottomLeft', 'LBottomLeftTopLeft'])"></div>
<div class="LTopLeftTopRight cell" onmouseover="addHighlight(['LTopRight', 'LTopLeft']); addCellHighlight(['LTopLeftTopRight', 'LTopRightTopLeft']);" onmouseout="removeHighlight(['LTopRight', 'LTopLeft']); removeCellHighlight([ 'LTopLeftTopRight', 'LTopRightTopLeft'])"></div>
<div class="LTopLeftBottomRight cell" onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
</div>
<div class="LTopRight" onmouseover="addHighlight(['LTopRight'])" onmouseout="removeHighlight(['LTopRight'])">
<div class="LTopRightTopLeft area-overlap cell"onmouseover="addHighlight(['LTopRight', 'LTopLeft']); addCellHighlight([ 'LTopLeftTopRight', 'LTopRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LTopLeft']); removeCellHighlight(['LTopLeftTopRight', 'LTopRightTopLeft'])"></div>
<div class="LTopRightTopRight cell" onmouseover="addHighlight(['LTopRightTopRight']); addCellHighlight(['LTopRightTopRight'])" onmouseout="removeHighlight(['LTopRightTopRight']); removeCellHighlight(['LTopRightTopRight'])"></div>
<div class="LTopRightBottomLeft cell" onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
<div class="LTopRightBottomRight cell" onmouseover="addHighlight(['LTopRight', 'LBottomRight']); addCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight']); removeCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])"></div>
</div>
<div class="LBottomLeft" onmouseover="addHighlight(['LBottomLeft'])" onmouseout="removeHighlight(['LBottomLeft'])">
<div class="LBottomLeftTopLeft area-overlap cell" onmouseover="addHighlight(['LBottomLeft', 'LTopLeft']); addCellHighlight([ 'LTopLeftBottomLeft', 'LBottomLeftTopLeft'])" onmouseout="removeHighlight(['LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomLeft', 'LBottomLeftTopLeft'])"></div>
<div class="LBottomLeftTopRight cell" onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight([ 'LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
<div class="LBottomLeftBottomLeft cell" onmouseover="addHighlight(['LBottomLeftBottomLeft']); addCellHighlight(['LBottomLeftBottomLeft'])" onmouseout="removeHighlight(['LBottomLeftBottomLeft']); removeCellHighlight(['LBottomLeftBottomLeft'])"></div>
<div class="LBottomLeftBottomRight cell" onmouseover="addHighlight(['LBottomLeft', 'LBottomRight']); addCellHighlight(['LBottomRightBottomLeft', 'LBottomLeftBottomRight'])" onmouseout="removeHighlight(['LBottomLeft', 'LBottomRight']); removeCellHighlight([ 'LBottomRightBottomLeft', 'LBottomLeftBottomRight'])"></div>
</div>
<div class="LBottomRight" onmouseover="addHighlight(['LBottomRight'])" onmouseout="removeHighlight(['LBottomRight'])">
<div class="LBottomRightTopLeft area-overlap cell" onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight([ 'LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
<div class="LBottomRightTopRight cell" onmouseover="addHighlight(['LBottomRight', 'LTopRight']); addCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])" onmouseout="removeHighlight(['LBottomRight', 'LTopRight']); removeCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])"></div>
<div class="LBottomRightBottomLeft cell" onmouseover="addHighlight(['LBottomLeft', 'LBottomRight']); addCellHighlight(['LBottomRightBottomLeft', 'LBottomLeftBottomRight'])" onmouseout="removeHighlight(['LBottomLeft', 'LBottomRight']); removeCellHighlight([ 'LBottomRightBottomLeft', 'LBottomLeftBottomRight'])"></div>
<div class="LBottomRightBottomRight cell" onmouseover="addHighlight(['LBottomRightBottomRight']); addCellHighlight(['LBottomRightBottomRight'])" onmouseout="removeHighlight(['LBottomRightBottomRight']); removeCellHighlight(['LBottomRightBottomRight'])"></div>
</div>
</div>
<!-- Right Monitor Pallete -->
<div class="monitor monitor-right" onclick="performAction()" onmouseover="addExpand(['monitor-right']);" onmouseout="removeExpand(['monitor-right']);">
<div class="RTopLeft" onmouseover="addHighlight(['RTopLeft']);" onmouseout="removeHighlight(['RTopLeft']);">
<div class="RTopLeftTopLeft area-overlap cell" onmouseover="addHighlight(['RTopLeftTopLeft']); addCellHighlight(['RTopLeftTopLeft'])" onmouseout="removeHighlight(['RTopLeftTopLeft']); removeCellHighlight(['RTopLeftTopLeft'])"></div>
<div class="RTopLeftBottomLeft cell" onmouseover="addHighlight(['RBottomLeft', 'RTopLeft']); addCellHighlight(['RTopLeftBottomLeft', 'RBottomLeftTopLeft'])" onmouseout="removeHighlight(['RBottomLeft', 'RTopLeft']); removeCellHighlight([ 'RTopLeftBottomLeft', 'RBottomLeftTopLeft'])"></div>
<div class="RTopLeftTopRight cell" onmouseover="addHighlight(['RTopRight', 'RTopLeft']); addCellHighlight(['RTopLeftTopRight', 'RTopRightTopLeft']);" onmouseout="removeHighlight(['RTopRight', 'RTopLeft']); removeCellHighlight([ 'RTopLeftTopRight', 'RTopRightTopLeft'])"></div>
<div class="RTopLeftBottomRight cell" onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
</div>
<div class="RTopRight" onmouseover="addHighlight(['RTopRight'])" onmouseout="removeHighlight(['RTopRight'])">
<div class="RTopRightTopLeft area-overlap cell" onmouseover="addHighlight(['RTopRight', 'RTopLeft']); addCellHighlight(['RTopLeftTopRight', 'RTopRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RTopLeft']); removeCellHighlight(['RTopLeftTopRight', 'RTopRightTopLeft'])"></div>
<div class="RTopRightTopRight cell" onmouseover="addHighlight(['RTopRightTopRight']); addCellHighlight(['RTopRightTopRight'])" onmouseout="removeHighlight(['RTopRightTopRight']); removeCellHighlight(['RTopRightTopRight'])"></div>
<div class="RTopRightBottomLeft cell" onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
<div class="RTopRightBottomRight cell" onmouseover="addHighlight(['RTopRight', 'RBottomRight']); addCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight']); removeCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])"></div>
</div>
<div class="RBottomLeft" onmouseover="addHighlight(['RBottomLeft'])" onmouseout="removeHighlight(['RBottomLeft'])">
<div class="RBottomLeftTopLeft area-overlap cell" onmouseover="addHighlight(['RBottomLeft', 'RTopLeft']); addCellHighlight([ 'RTopLeftBottomLeft', 'RBottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomLeft', 'RBottomLeftTopLeft'])"></div>
<div class="RBottomLeftTopRight cell" onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight([ 'RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
<div class="RBottomLeftBottomLeft cell" onmouseover="addHighlight(['RBottomLeftBottomLeft']); addCellHighlight(['RBottomLeftBottomLeft'])" onmouseout="removeHighlight(['RBottomLeftBottomLeft']); removeCellHighlight(['RBottomLeftBottomLeft'])"></div>
<div class="RBottomLeftBottomRight cell" onmouseover="addHighlight(['RBottomLeft', 'RBottomRight']); addCellHighlight(['RBottomRightBottomLeft', 'RBottomLeftBottomRight'])" onmouseout="removeHighlight(['RBottomLeft', 'RBottomRight']); removeCellHighlight([ 'RBottomRightBottomLeft', 'RBottomLeftBottomRight'])"></div>
</div>
<div class="RBottomRight" onmouseover="addHighlight(['RBottomRight'])" onmouseout="removeHighlight(['RBottomRight'])">
<div class="RBottomRightTopLeft area-overlap cell" onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight([ 'RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
<div class="RBottomRightTopRight cell" onmouseover="addHighlight(['RBottomRight', 'RTopRight']); addCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])" onmouseout="removeHighlight(['RBottomRight', 'RTopRight']); removeCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])"></div>
<div class="RBottomRightBottomLeft cell" onmouseover="addHighlight(['RBottomLeft', 'RBottomRight']); addCellHighlight(['RBottomRightBottomLeft', 'RBottomLeftBottomRight'])" onmouseout="removeHighlight(['RBottomLeft', 'RBottomRight']); removeCellHighlight([ 'RBottomRightBottomLeft', 'RBottomLeftBottomRight'])"></div>
<div class="RBottomRightBottomRight cell" onmouseover="addHighlight(['RBottomRightBottomRight']); addCellHighlight(['RBottomRightBottomRight'])" onmouseout="removeHighlight(['RBottomRightBottomRight']); removeCellHighlight(['RBottomRightBottomRight'])"></div>
</div>
</div>
<!-- Current Monitor Pallete -->
<div class="grid-container" onclick="performAction()">
<div class="TopLeft" onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
<div class="TopLeftTopLeft area-overlap cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
<div class="TopLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="TopLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopLeftBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
</div>
<div class="TopRight" onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
<div class="TopRightTopLeft area-overlap cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
<div class="TopRightTopRight cell" onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
<div class="TopRightBottomLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="TopRightBottomRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
</div>
<div class="BottomLeft" onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
<div class="BottomLeftTopLeft area-overlap cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
<div class="BottomLeftTopRight cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomLeftBottomLeft cell" onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
<div class="BottomLeftBottomRight cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
</div>
<div class="BottomRight" onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
<div class="BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
<div class="BottomRightTopRight cell" onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
<div class="BottomRightBottomLeft cell" onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
<div class="BottomRightBottomRight cell" onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
</div>
</div>
</div>
</body>
</html>