Demo of showing Dialog on At.js library

Show dialog to insert value on typing '=' using At.js

by Budhram Gurung

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/at.js/0.5.0/css/jquery.atwho.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/caret.js/0.2.0/jquery.caret.min.js"></script>
<script src="http://cdn.jsdelivr.net/at.js/0.5.0/js/jquery.atwho.min.js"></script>
<div id='question' class='span12 code_area_style' contenteditable="true">Type '=' to trigger Dialog.</div>
<!-- Formula Dialog -->
<div id="formulaDialog" class='template_helper_commands row-fluid'>
    <div class='span12'>
        <div id='dialogContent' class='span12' style="display:block;position:static;margin-bottom:5px;"></div>
        <div class='span12'>
            <button id='formulaCancel' type="button" class="btn done pull-left">Cancel</button>
            <button id='formulaApply' type="button" class="btn done pull-right">Apply</button>
        </div>
    </div>
</div>
<!-- Template for Formula Dialog -->
<script type='text/template' id='formula_template'>
  <% _.each(configs, function(config) { %>
    <div class='span12'>
      <label class="span4"><%- config %></label>
      <input id="formulaInput" class="span8 pull-right" type="text" value="<%- value %>" />
    </div>
  <% }); %>
</script>

CSS

.code_area_style {
    width: 400px;
    height: 100px;
    border: 1px solid #ccc;
}
.template_helper_commands {
    position: absolute;
    display:none;
}
#formulaDialog {
      width: 280px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      padding: 5px;
      height: auto;
      z-index: 1000;
      background-color: #fff;
}
.var {
      padding: 0 5px;
      background: #E6E6E6;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 1px 1px #CCC;
}

JavaScript

$(document).ready(function () {
    var formula_template, configs, formulaConfigs;

    // configurations
    configs = {
        'Math.sqrt': ['Input Number']
    };
    formulaConfigs = {
        at: '=',
        limit: 50,
        data: ['Math.sqrt'],
        callbacks: {
            before_insert: function (template, $li) {
                var formulaDivPosition, position = {};
                template = atWhoBeforeInsertCallback(template, true);
                formulaDivPosition = $li.parent().parent().position();
                position.pageX = formulaDivPosition.left;
                position.pageY = formulaDivPosition.top + 5;
                handleFormulaDialog(position, 'Math.sqrt', '');
                return '<replaceableUnit>' + template + '</replaceableUnit>';
            }
        }
    };
    formula_template = _.template($('#formula_template').html());

    // helper functions
    function getFormattedVariableName(name) {
      var span_id = Math.random().toString(36).substring(2, 10);
      return '<span id="' + span_id + '" class="var">' + name + '</span>'
    }
    function atWhoBeforeInsertCallback(value, is_new_one) {
      var that = this;
      return value.replace(/<span id='\w+'>.(.+)<\/span>/g, function(_, m){
        if(is_new_one) {
          m = m + '(...)';
        }
        return getFormattedVariableName(m);
      });
    }
    function updateQuestionView(questionDiv, formula_type, data) {
      var var_name, templateContent;

      var_span = getFormattedVariableName(formula_type + '(' + data +')');
      templateContent = questionDiv.html();
        console.log(templateContent);
      templateContent = templateContent.replace(/<replaceableunit>(.+)<\/replaceableunit>/, var_span);
      questionDiv.html(templateContent);
      hideTemplateHelpersMenu();
    }
    function handleFormulaDialog(e, formula_type, value) {
        var xLeft,
            formulaDialog, inputVal,
            question_div = $('#question');

       ...