http://leeluolee.github.io/mcss/js/main.js

1(function(){
2
3    var $tooltip = $('.tooltip');
4    var input = CodeMirror.fromTextArea($('.m-editor .input textarea')[0], {
5        mode: 'css',
6        tabSize: 2,
7        theme: 'solarized',
8        autofocus: true,
9        dragDrop: false,
10        lineNumbers: true,
11        extraKeys: {
12            Tab: function(cm) {
13                var spaces = new Array(cm.getOption("indentUnit") + 1).join(" ")
14                cm.replaceSelection(spaces, "end", "+input")
15            }
16        }
17    })
18
19    var outport = CodeMirror($('.m-editor .outport')[0], {
20        mode: 'css',
21        theme: 'solarized',
22        tabSize: 2,
23        // readOnly: 'nocursor',
24        lineNumbers: true
25    })
26    var compile = function(value){
27        mcss({
28            filename: '/mcss/index.html'
29        }).translate(value)
30        .done(function(css){
31            outport.setValue(css)
32            if(input.state.activeLine){
33                clearActiveLine(input);
34            }
35        }).fail(function(error){
36            outport.setValue(error.name + ' : ' + error.message);
37            updateActiveLine(input, error);
38        })
39    }
40    var timer = null;
41    input.on('change', function(cm){
42        var value = input.getValue();
43        clearTimeout(timer);
44        timer = setTimeout(compile.bind(null,value), 600)
45    })
46    compile(input.getValue());
47
48    // activeLine
49    input.state.activeLine = null;
50    var WRAP_CLASS = "CodeMirror-error";
51    var BACK_CLASS = "CodeMirror-error-background";
52    function clearActiveLine(cm) {
53        cm.removeLineClass(cm.state.activeLine, "wrap", WRAP_CLASS);
54        cm.removeLineClass(cm.state.activeLine, "background", BACK_CLASS);
55    }
56
57    function updateActiveLine(cm, error) {
58        var line = cm.getLineHandle(error.line -1);
59        // if (cm.state.activeLine == line) return;
60        if(cm.state.activeLine) clearActiveLine(cm);
61        cm.addLineClass(line, "wrap", WRAP_CLASS);
62        cm.addLineClass(line, "background", BACK_CLASS);
63        // cm.addLineWidget(line, $tooltip[0]);
64        // $tooltip.find('.inner').text(error.name + ':' +error.message);
65        // $tooltip.addClass('in');
66        cm.state.activeLine = line;
67    }
68
69})();