Windows

1 | Implement Window.close() 2 | Aero Blur 3 | Titlebar Buttons 4 | Faster?

by XTREME104

HTML

<input id="title" placeholder="Window Title"/><br/>
<input id="icon" placeholder="Window Icon (URL)"/><br/>
<textarea id="content" placeholder="Window Content (HTML)"></textarea><br/>
<p>Color Names, rgb(Red,Green,Blue), rgba(Red,Green,Blue,Alpha), #RRGGBB</p>
<input type="number" value="20" min="0" size="3" id="chrometop">Top Chrome</input><br/>
<input type="number" value="0" min="0" size="3" id="chromebottom">Bottom Chrome</input><br/>
<input type="number" value="0" min="0" size="3" id="chromeleft">Left Chrome</input><br/>
<input type="number" value="0" min="0" size="3" id="chromeright">Right Chrome</input><br/>
<input type="color" value="transparent" id="chromecolor">Chrome Color</input><br/>
<input type="color" value="transparent" id="backgroundcolor">Content Background Color</input><br/>
<p>Color Names, rgb(Red,Green,Blue), rgba(Red,Green,Blue,Alpha), #RRGGBB</p>
<input id="hardwareacceleration" type="checkbox" checked="checked">Hardware Acceleration</input><br/>
<button onclick="var win = new Window(document.getElementById('title').value, document.getElementById('icon').value,  document.getElementById('content').value, document.getElementById('hardwareacceleration').value); win.chromeTop(document.getElementById('chrometop').value); win.chromeBottom(document.getElementById('chromebottom').value); win.chromeLeft(document.getElementById('chromeleft').value); win.chromeRight(document.getElementById('chromeright').value); win.chromeColor(document.getElementById('chromecolor').value); win.backgroundColor(document.getElementById('backgroundcolor').value); win.open()">Open Window</button>
<button onclick="win.close()">Close Window</button>

<script>
    function Window(title, iconurl, content, hardwareAccelerated) {
    this.hardwareAccelerated = hardwareAccelerated;
    if (this.hardwareAccelerated) {
    /* this.hardwareAccelerationClass = ".accelerated"; */
    this.hardwareAccelerationClass = "";
    } else {
    this.hardwareAccelerationClass = "";
    }
   ...

CSS

html {
    margin-right: 4px;
}

body {
    background: #AADFFF;
    -webkit-perspective: 1000;
}

div.window {
    position:absolute;
    z-index:2;
    min-width: 200px;
    min-height: 150px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.5), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25);
    text-shadow: 0 0 5px white;
    -webkit-animation: open 300ms ease-in;
    perspective: 2000;
}

div.window > div#titlebar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: default;
    text-overflow: ellipsis;
    word-wrap: break-word;
    margin-left: 3px;
    margin-top: 0;
}

div.window > div#titlebar > img#icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    margin-top: 3px;
}

div.window > div#body {
    position: absolute;
    top: 20px; /* chrome.top */
    bottom: 0; /* chrome.bottom */
    left: 0; /* chrome.left */
    right: 0; /*chrome.right */
    margin: 2px; /* chrome.padding */
    border: 1px solid gray;
    overflow: auto;
}

.accelerated, .accelerated * {
    -webkit-transform: translate3d(0,0,0);
}

@-webkit-keyframes open {
    from {
        -webkit-transform: rotateX(10deg);
} to {
    -webkit-transform: rotateX(0deg);
}
}

@-webkit-keyframes close {
    from {
        -webkit-transform: rotateX(0deg);
} to {
    -webkit-transform: rotateX(10deg);
    display: none;
}
}

input#title, input#icon, textarea#content {
    width: 100%;
}

input#chromecolor, input#backgroundcolor {
    width: 300px;
}