viewer2d.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Viewer 2D - SLAcer.js (bêta)</title>
        <style>
            html, body, #slice {
                border: 0;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #000000;
            }
            #slice {
                background-position: center;
                background-repeat: no-repeat;
            }
            .mirror {
                -moz-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
                filter: FlipH;
                -ms-filter: "FlipH";
            }
        </style>
    </head>
    <body>
        <div id="slice"></div>
        <script src="vendor/lodash.min.js" type="text/javascript"></script>
        <script src="js/slacer/settings.js" type="text/javascript"></script>
        <script>
                function storageListener() {
                    var settings = new SLAcer.Settings();
                    var mirror   = settings.get('slice.mirror', false);
                    var dataURL  = settings.get('slice.dataURL', 'none');
                    var image    = dataURL !== 'none' ? 'url(' + dataURL + ')' : 'none';
                    var slice    =  document.getElementById('slice');

                    slice.style.backgroundImage = image;
                    slice.className = mirror ? 'mirror' : '';
                }

                window.addEventListener('storage', storageListener, false);
        </script>
    </body>
</html>