LaTeX Helper v2

by Vlad Korotkov

HTML

<script src="http://dxdy-js.korotkov.co.uk/styles/subsilver2/template/jquery.selection.js"></script>
<script src="http://dxdy.ru/misc/lxhelper/lxh_commands.php?3"></script>
<script src="http://dxdy-js.korotkov.co.uk/styles/subsilver2/jquery-ui/jquery-ui_custom_1.11.2.min.js"></script>
<link rel="stylesheet" href="http://dxdy-js.korotkov.co.uk/styles/subsilver2/jquery-ui/jquery-ui_custom_1.11.2_noicons.min.css">
<table id="tablewrapper">
    <tr>
        <td>
            <textarea id="textarea" cols="30" rows="4">Попробуйте использовать это окно для теста. Скрипт должен понимать в каком режиме вы находитесь. [math]$a=b$[/math] $a-b$ $$a+ b$$ [math]$$y-x$$[/math] [math]textmode[/math]</textarea>
        </td>
        <td>
            <div id="lxtoolbar"></div>
        </td>
    </tr>
</table>

CSS

body {
    font-family:'Lucida Grande';
    font-size: 10px;
}
textarea {
    font-size: 1em;
    width: 100%;
}
div#lxtoolbar {
    float: right;
    text-align: left;
    padding: 10px;
    width: 200px;
    height: 220px;
}
.lxcommands {
}
button {
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
    font-family:'PT Mono', monospace;
}
button img {
    vertical-align: middle;
    //max-height: 18px;
    margin: 5px;
}
.stdiconBtn {
    height: 25px;
}
.stdiconImg {
    max-height: 15px;
}
.largeiconBtn {
    height: 70px;
}
.largeiconImg {
    max-height: 60px;
}
#tablewrapper {
    width: 100%;
}
#tablewrapper td {
    vertical-align: top;
}
.ui-accordion {
    font-size: 1em;
}
.ui-accordion .ui-accordion-content {
    padding: 0.5em;
}
.ui-accordion .ui-accordion-header {
    padding: 0em 0.5em 0em 2em;
}

JavaScript

function isInMathMode() {
    var selectedPosition = textarea.selection('getPos');
    var ss = textarea.val().substr(0, selectedPosition.start) + ' ';
    var sslen = ss.length;
    var sdb = -1; // single dollar balance
    var ddb = -1; // double dollar balance

    for (var i = 0; i < sslen; i++) {
        if (ss[i] == '$' && (ss[i + 1] != '$')) {
            sdb *= -1;
        } else if (ss[i] == '$' && ss[i + 1] == '$') {
            ddb *= -1;
            i++; // extra step forward
        }
    }
    return (sdb > 0 || ddb > 0);
}

function getSymbolAtCarret() {
    return textarea.val().substr(textarea.selection('getPos').start, 1);
}

function hashToSrc(hash) {
    var ext = 'svg';
    var host = 'dxdy-01.korotkov.co.uk';
    return 'http://' + host +
        '/f/' + hash.substr(0, 1) + '/' + hash.substr(1, 1) + '/' + hash.substr(2, 1) + '/' + hash + (ext == 'png' ? '82' : '') + '.' + ext;
}

function findCommand(id) {
    for (j = 0; j < commandsSize; j++) {
        if (id == commands[j].id) {
            return commands[j];
        }
    }
    return false;
}

categoriesSize = categories.length;
commandsSize = commands.length;
var lxtoolbar = $('#lxtoolbar');
var textarea = $('#textarea');
var toolbarhtml = lxtoolbar.html();

for (i = 0; i < categoriesSize; i++) {
    //lxtoolbar.html(lxtoolbar.html() + '<h3 class="lxcattitle">' + categories[i].title_ru + '</h3>');
    toolbarhtml = toolbarhtml + '<h3 class="lxcattitle">' + categories[i].title_ru + '</h3>';
    var catid = categories[i].id;
    var commandsInCategory = 0;
    var commandsHtml = '';
    var btncontents = '';
    for (j = 0; j < commandsSize; j++) {
        if (commands[j].cat_id === catid) {
            commandsInCategory++;
            var cmdClass = (commands[j].class === '') ? 'stdicon' : commands[j].class;
            var cmdClassBtn = cmdClass + 'Btn';
            var cmdClassImg = cmdClass + 'Img';
            if (commands[j].pict_url !== '' || commands[j].pict_source_hash !==...