datomicism

by shaunxcode

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<script src="http://use.edgefonts.net/ubuntu-condensed.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script>
    window.edn = window.exports = {};
    window.require = function() { return _ };
</script>
<script src="https://raw.github.com/shaunxcode/jsedn/master/edn.js"></script>

SCSS

body {
    background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png);
    font-family: ubuntu-condensed, serif;
    color: #333;
    margin: 0;
    padding: 0;
}

.import-modal {
    position: absolute;
    border-radius: 5px;
    border: 1px solid #999;
    padding: 5px;
    width: 350px;
    background: #fefefe;
    textarea {
        width: 100%;
        height: 300px;
    }
    button {
        float: right;
    }   
    overflow: hidden;
    clear: both;
}

.output {
    padding: 5px;
    position: fixed;
    top: 50px;
    bottom: 0;
    right: 0;
    width: 350px;
    border-left: 4px solid #999;
    background: rgba(255, 255, 255, 0.66);
    overflow: auto;
}

.toolbar {
    button { 
        font-family: inherit;
        font-size: inherit;
    }

    border-bottom: 1px solid #999;
    padding: 10px;
    background: #fdfdfd;
    button {
      float: right;
    }

    li {
        cursor: pointer;
        border-radius: 5px;
        border: 1px solid #999;
        display: inline-block;
        padding: 5px;
        background: #efefef;
        margin-right: 5px;
    
    }
}

.query.ui-draggable {
    width: 350px;
    background: #fffffe;
    border-radius: 5px;
    border: 1px solid #999;
    border-top: 10px solid #999;
    position: absolute; 
    .CodeMirror { 
        height: 150px;
    }
    .Details {
        height: 50px;
        border-top: 1px solid #333;
    }
}

.entity.ui-draggable.enumEntity {
    .attribute {
        .nameInput {
            width: 80%;
        }
    }
}

.entity.ui-draggable {
    width: 250px;
    background: #fffffe;
    border-radius: 5px;
    border: 1px solid #999;
    border-top: 10px solid #999;
    position: absolute; 
    .header {
        padding: 5px;
        input {
            background: inherit;        
            border: 0;
            font-family: inherit;
            font-size: inherit;
            width: 100%;
        }

        border-bottom: 1px solid #999;
...

CoffeeScript

String.prototype.$tag = (args) -> $ "<#{@}/>", args

kosherName = (name) ->
    name.replace /[\?\-\:\/\.]/g, "_"
    
id = 1

types = 
    ":db.type/keyword": "keyword"
    ":db.type/string":  "string"
    ":db.type/boolean": "boolean"
    ":db.type/long":    "long"
    ":db.type/bigint":  "bigint"
    ":db.type/float":   "float"
    ":db.type/double":  "double"
    ":db.type/bigdec":  "bigdec"
    ":db.type/ref":     "ref"
    ":db.type/instant": "instant"
    ":db.type/uuid":    "uuid"
    ":db.type/uri":     "uri"
    ":db.type/bytes":   "bytes"

uniqueTypes = 
    "nil":                 "no"
    ":db.unique/value":    "value"
    ":db.unique/identity": "identity"

textInput = (model, field) ->
    self = "input".$tag(class: "textInput", value: model.get field, "").on 
        blur: ->
            model.set field, self.val()
            self.trigger "changedValue", self.val()
        keyup: (e) -> if e.keyCode is $.ui.keyCode.SPACE
            self.val self.val().replace /\s/g, "_"
        
nameInput = (model, field) -> 
    textInput(model, field).addClass "nameInput"
        
typeCombo = (model, field) ->
    options = ("option".$tag(value: val, text: vis) for val, vis of types)
    self = "select".$tag(class: "typeCombo", html: options).on change: ->
        model.set field, self.val()
        
    console.log model.get(field)
    if model.get(field) then self.val model.get(field)
    
    self

uniqueCombo = (model, field) ->
    options = ("option".$tag(value: val, text: vis) for val, vis of uniqueTypes)
    self = "select".$tag(class: "uniqueCombo", html: options).on change: ->
        model.set field, self.val()
    
    if model.get(field) then self.val model.get(field)
    self
    
checkbox = (model, field) ->
    self = ("input".$tag type: "checkbox").on change: ->
        model.set field, self.is ":checked"
        
    if model.get field, false
        self.attr "checked", true
    
    self
    
textarea = (model, field) ->
   ...