Conatraints

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/codemirror.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/codemirror.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/mode/javascript/javascript.min.js"></script>
<div class="container">
  <h5>Enter Constraints</h5>
  <div id="app"></div>
</div>

CSS

#main{margin-top: 20px;}
.panel-heading {    
  color: #333;
  background-color: #f5f5f5;
  border-bottom: solid #ddd 1px;
}
.panel{
  border-radius: 0px;
  box-shadow: none;
  border: solid lightgray 1px;
}
span.heading{
  margin-left: 5px;
}
.panel-custom-heading, .panel-custom-footer{
  padding: 5px 10px;
  background: none;
}
.panel-custom-heading .glyphicon-remove{
  visibility: hidden;
}
.panel-custom-heading:hover .glyphicon-remove{
  visibility: visible;
}
.remove, .add{
  margin-right: -5px;
}
.add{
  color: white;
  background: steelblue;
  padding: 5px;
  font-size: 9px;
}
.remove{
  color: white;
  background: darkred;
  padding: 5px;
  font-size: 9px;
}
.panel-custom-heading .heading{
  font-family: Consolas;
}
.CodeMirror{
  height: 60px;
  font-family: Menlo;
  border: solid lightgray 1px;
}

CoffeeScript

CodeMirrorComponent = 
  view: (ctrl, props) -> m "div", m "textarea", 
    {config: CodeMirrorComponent.config(props)}, props.value()
  config: (props) -> (el, isInit) ->
    if (typeof CodeMirror != 'undefined')
      if (!isInit)
        editor = CodeMirror.fromTextArea(el, {lineNumbers: false})
        editor.on "blur", (instance, object) ->
          m.startComputation()
          props.value editor.doc.getValue()
          if (typeof props.onchange is "function")
            props.onchange(instance, object)
          m.endComputation()
    else
      console.warn "ERROR: You need CodeMirror on the page"

ToggleDiv = (props) -> (el, isInit) ->
  if (!isInit)
    el.style.display = 'block'
  else
    t = if props.display is 'block'  then 'slideDown' else 'slideUp'
    Velocity(el, t)
Panel = view: (ctrl, props) -> 
  icon1 = if props.display is 'block' then 'bottom' else 'right' 
  m 'div',
    m 'div.panel-heading.panel-custom-heading', 
      m 'span',
        m "span.glyphicon.glyphicon-triangle-#{icon1}", {
         onclick: props.handleClick
         style: {"z-index": 999}
        }
        m 'span.heading', props.heading
        m 'span.glyphicon.glyphicon-remove.remove.pull-right', {
          onclick: (e) ->
            #index = props.constraints().indexOf(props.num)
            props.constraints.splice(props.num, 1)
        }
    m 'div.panel-body', {
      config: ToggleDiv(props)
    }, props.body
    
App = view: (ctrl, props) ->
  m '.accordion.panel.panel-default', 
    ctrl.constraints.map (d, i) ->
      display = if ctrl.isOpen() is i then 'block' else 'none'
      body = if ctrl.isOpen() is i
        ###
        m 'div', m 'input[type="text"].form-control', 
          value: ctrl.constraints[i]()
          onchange: (e) ->
            ctrl.constraints[i](e.target.value)
            ctrl.isOpen(-1)
        ###
        m CodeMirrorComponent, 
          value: ctrl.constraints[i]
          onchange: -> ctrl.isOpen(-1)
      else
        null
 ...