Sass-Embed - MASTER

by joshuatz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Split JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js" integrity="sha256-9u7Hr7DXDRNHVZ/p9uoV5oIHL9Ql7Qx3dKPJzeRakII=" crossorigin="anonymous"></script>

    <!-- Code Flask, Language, and Theme -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/CodeFlask.js/1.4.1/codeflask.min.js" integrity="sha256-G969tEzJXrGgPCQjr06NYkQhnHVWDW1lITsA6OhINqU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-scss.min.js" integrity="sha256-e8D5SrALfYOcy2NqfpblBaRTuTlrmQUP6RUOYtQ+7cg=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-okaidia.min.css" integrity="sha256-Ykz0nNWK7w4QWJUYR7OraN4773aMB/11aMt1nZyrhuQ=" crossorigin="anonymous" />

    <!-- Sass.js for actual conversion -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.0/sass.sync.min.js" integrity="sha256-fRTlFt0oTb9cQ26hylSirmI2ovPArP9ON+V1mVnb1DM=" crossorigin="anonymous"></script>
    <script>
        var foundInlineStyle = false;
        // Load stylesheet if not inline
        if (self !== top){
            // Scan for inline
            var inlineStyles = document.querySelectorAll('style');
            for (var x=0; x<inlineStyles.length; x++){
                if (/#inlineCssDetectionRule/.test(inlineStyles[x].innerText)){
                    foundInlineStyle = true;
                    break;
                }
            }
        }
        if (!foundInlineStyle){
            var linkE = document.createElement('link');
            linkE.rel = 'stylesheet';
            linkE.href = 'style.css?stamp=' + (new Date()).getTime();
           ...

CSS

#topbar {
    padding: 0px 0px 10px 4px;
}
#topbar > * {
    display: inline-block;
    margin-left: 10px;
}

.indicatorBar {
    width: 100%;
    text-align: center;
}
.indicatorBar.input {
    background-color: #63B8EE;
}
.indicatorBar.output {
    background-color: #a6e22e;
}
.indicatorBar .indicatorText {
    padding: 5px;
    font-size: 1.2rem;
}

.container {
    width: 100%;
}
.container > *, #sass-input, #css-output {
    float: left;
    /* Offset by topbar */
    min-height: calc(100vh - 50px);
}
#sass-input, #css-output {
    width: 100%;
}
#sass-input-wrapper, #css-output-wrapper {
    position: relative;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

#compilingStatus {
    transition: opacity 0.8s ease-in-out 0.20s;
}

button {
	-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background-color:#63b8ee;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
}
button:hover {
	background-color:#468ccf;
}
button:active {
	position:relative;
	top:1px;
}


/**
*...

JavaScript

SCRIPT_JS_LOADED = true;
CODEFLASK_USE_DEF_THEME = false;

// Setup code editor
inputFlask = new CodeFlask('#sass-input', {
    language: 'scss',
    lineNumbers: false,
    readonly: false,
    defaultTheme: CODEFLASK_USE_DEF_THEME
});
outputFlask = new CodeFlask('#css-output', {
    language: 'css',
    lineNumbers: false,
    readonly: true,
    defaultTheme: CODEFLASK_USE_DEF_THEME
});

// Setup split js
Split(['#sass-input-wrapper','#css-output-wrapper'],{
    sizes: [50,50],
    direction: 'horizontal',
    gutterSize: 10
});

// common elements & globals
var indentCheckbox = document.getElementById('indentCheckbox');
var convertButton = document.querySelector('#convertButton');
var sassInputWrapper = document.querySelector('#sass-input-wrapper');
var sassInputElem = sassInputWrapper.querySelector('textarea');
var topBarElem = document.querySelector('#topbar');
var autorunCheckbox = document.querySelector('#autorunCheckbox');
var compilingStatusElem = document.querySelector('#compilingStatus');
var AUTORUN_ON = false;
var DEBOUNCE_TIMER = null;
var DEBOUNCE_WAIT_MS = 1000*2;
var LAST_INPUT_MS = 0;
// Global - can touch parent window (or not due to Cross-Origin)
var CAN_TOUCH_PARENT = false;

// Copy theme details over if not using default theme
if (!CODEFLASK_USE_DEF_THEME){
    var injectDelay = 0;
    if (document.querySelectorAll('link[href*="prism-okaidia"]').length < 1){
        injectDelay = 1500;
        var linkElem = document.createElement('link');
        linkElem.rel = 'stylesheet';
        linkElem.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-okaidia.min.css';
        document.body.appendChild(linkElem);
    }
    setTimeout(function(){
        var computedStyles = getComputedStyle(sassInputWrapper.querySelector('pre[class*="language-"]'));
        var injectedStyleText = '' + 
        '.codeflask {' +
            'background-color: ' + computedStyles.backgroundColor + ';' +
        '}' + 
        '.codeflask textarea...