AppJS Custom Window

Example of a custom chrome window for AppJS with styling for all major desktop platforms.

by studiochris

HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Custom Chrome</title>
<script src="libs/jquery.js"></script>

</head>

<body class="windows xp">

<div class="app">
    <div class="title-bar">
        <!-- Title Bar Elements go here... -->
        <div class="title-drag"></div>
        <div class="app-title">
            <span class="app-icon"></span><!--.app-icon-->
            <span class="text"></span>
        </div><!--.app-title-->
        <span class="button-container window-controls">
            <ul class="inline">
                <li><a class="button minimize-button" href="#minimize-app">Minimize</a></li>
                <li><a class="button maximize-button" href="#maximize-app">Maximize</a></li>
                <li><a class="button close-button" href="#close-app">Close</a></li>
            </ul>
        </span><!--.window-controls-->
        <span class="button-container fullscreen-button-container"><a class="button fullscreen-button" href="#fullscreen-app">Full Screen</a></span>
    </div><!--.title-bar-->
    <div class="app-content">
        <!-- App content goes here... -->
        <h1>Change Window Style</h1>
        <div class="container">
        <div class="column">
        <h3>Windows</h3>
            <ul class="button-list">
                <li class="active"><a class="button" href="#windows-xp">Windows XP</a></li>
                <li><a class="button" href="#windows">Windows Vista &amp; 7</a></li>
                <li><a class="button" href="#windows-eight">Windows 8</a></li>
            </ul>
        </div>
        
        <div class="column">
        <h3>Mac OS X</h3>
            <ul class="button-list">
                <li><a class="button" href="#macosx">Mac OS X</a></li>
                <li><a class="button" href="#macosx-lion">Mac OS X Lion+</a></li>
            </ul>
        </div>
        
        <div class="column">
        <h3>Linux</h3>
            <ul...

CSS

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-button:start:decrement { display: block; width: 5px; height: 5px; background-color: transparent; border-left: 1px solid rgba(0,0,0,.1); }
::-webkit-scrollbar-button:end:increment { display: block; width: 5px; height: 5px; background-color: transparent; border-left: 1px solid rgba(0,0,0,.1);}
::-webkit-scrollbar-track{border-left: 1px solid rgba(0,0,0,.1); background: transparent; padding-left: 1px;}
::-webkit-scrollbar-track:enabled { background-color: transparent; }
::-webkit-scrollbar-track-piece { background-color: transparent; border: none; margin: 0; } 
::-webkit-scrollbar-thumb:window-inactive{}
::-webkit-scrollbar-thumb{-webkit-border-radius: 5px; border: 1px solid #222; background: rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:vertical { height: 30px;}
::-webkit-scrollbar-thumb:horizontal { width: 30px;}

html{height: 100%; box-sizing: border-box;}
body{height: 100%; padding: 17px 20px 23px; box-sizing: border-box;}
body.maximized, body.fullscreen{padding: 0;}

/*Utility Classes*/
ul.inline, ul.inline li{display: inline-block; margin: 0; padding: 0; list-style: none;}

/*App Window*/
.app{display: block; position: relative; height: 100%; width: 100%; box-sizing: border-box; border-radius: 9px; box-shadow: 0 4px 20px rgba(0,0,0,.5);}
.maximized .app, .fullscreen .app{border-radius: 0 !important; padding: 0 !important;}
.title-bar{display: block; position: relative; height: 42px; width: 100%; box-sizing: border-box; background: #333; border-radius: 8px 8px 0 0; border: 1px solid #222; -webkit-user-select: none; user-select: none;}
.maximized .title-bar, .fullscreen .title-bar{border-radius: 0 !important;}
.app-content{display: block; position: absolute; top: 42px; bottom: 22px; left: 0; right: 0; width: 100%; overflow: hidden; box-sizing: border-box; background: #666; border: 1px solid #222; border-width: 0 1px; -webkit-user-select: none; user-select: none;}
.status-bar{display: block;...

JavaScript

$(function() {
    //Window Controls
    //Helper function with logic to toggle the action of the maximize 
    //button between maximize and restore.
    var maximizeWindow = function(event) {
        switch (window.frame.state) {
        case 'maximized':
            window.frame.restore();
            $(document.body).removeClass('maximized');
            break;

        case 'normal':
            window.frame.maximize();
            $(document.body).addClass('maximized');
            break;
        };
    };

    //Helper function with logic to toggle the action of the fullscreen 
    //button between fullscreen and restore.
    var fullscreenWindow = function(event) {
        switch (window.frame.state) {
        case 'fullscreen':
            window.frame.restore();
            $(document.body).removeClass('fullscreen');
            break;

        case 'normal':
            window.frame.fullscreen();
            $(document.body).addClass('fullscreen');
            break;
        };
    };

    var frameDrag = function(event) {

    };

    $('.app-title .text').text(document.title);
    $('.title-drag').on('mousedown', function(event) {
        window.frame.drag();
    });
    $('.title-bar').on('dblclick', function(event) {
        maximizeWindow(event)
    });

    $('.title-bar .close-button').on('click', function(event) {
        window.close();
    });
    $('.title-bar .minimize-button').on('click', function(event) {
        window.frame.minimize();
    });

    $('.title-bar .maximize-button').on('click', function(event) {
        maximizeWindow(event)
    });
    $('.title-bar .fullscreen-button').on('click', function(event) {
        fullscreenWindow(event)
    });

    $('.window-controls .button').on('mouseover', function(event) {
        $(this).css('z-index', 2);
    }).on('mouseout', function(event) {
        $(this).css('z-index', 0);
    });

    //App Controls
    $('.button-list .button').on('click', function(event) {
       ...