search

petrosh / snippetrosh

Notes with Issues
MIT License
1 stars 3 forks source link

JSON CSON YAML HJSON – Data formats #11

Open petrosh opened 9 years ago

petrosh commented 9 years ago
petrosh commented 8 years ago

Functions in JSON

// character
var character = {
    title: 'character',
    attributes: {
        ht: 10,
        dx: 12,
        st: 9
    }
}

// functions
function basicSpeed (c) {
    return (c.attributes.ht + c.attributes.dx)/4;
};

function encumbrance (c) {
    var st = c.attributes.st;
    var ca = carrying(c);
    switch (true) {
        case (ca>=(2*st) && ca<(4*st)):
            return 1;
            break;
        case (ca>=(4*st) && ca<(6*st)):
            return 2;
            break;
        case (ca>=(6*st) && ca<(12*st)):
            return 3;
            break;
        case (ca>=(12*st)):
            return 4;
            break;
        default:
            return 0;
    }
};

function speed (c) {
    return (basicSpeed(c) - encumbrance(c));
};

function carrying (c) {
    // loop items you are carrying and sum weigth
    return 57;
};

console.log(character.speed(character));
// 2.5
// [basicSpeed() = 5.5] - [encumberance() = 3]

JSON Schema

Array

"properties": {
  "gauges": {
    "type": "array",
    "uniqueItems": true,
    "items": {
      "$ref": "#/definitions/gauge"
    }
  }
}

Ref

"properties": {
  "units": { "$ref": "#/definitions/units" },
  "rolls": { "$ref": "#/definitions/rolls" }
}

oneOf

"properties": {
  "formula": {
    "oneOf": [
      { "type": "string" },
      { "type": "number" }
    ]
  }
}

JSON Editor

Options

"properties": {
  "generation": {
    "type": "array",
    "enum": [
      "roll",
      "formula"
    ],
    "options": {
      "enum_titles": [
        "Roll",
        "Formula"
      ]
    }
  }
}
"options": {
  "collapsed": true
}
"options": {
  "hidden": "true"
}

Watch

"properties": {
  "depend": {
    "type": "string",
    "watch": {
      "gaugelist": "character.gauge_list"
    },
    "enumSource": [ "gaugelist" ],
    "default": ""
  }
}
editor.watch('root.character.gauges', function() {
  var gauges = editor.getEditor('root.character.gauges').getValue();
  var arr = [];
  for (var i = 0; i < gauges.length; i++) {
    arr.push(gauges[i].title);
  }
  arr.unshift("");
  editor.getEditor('root.character.gauge_list').setValue( arr );
});

Disable and Enable

editor.watch('root.character.gauges.0.generation', function() {
  var generation = editor.getEditor('root.character.gauges.0.generation').getValue();
  if(generation=='roll'){
    editor.getEditor('root.character.gauges.0.depend').disable();
  }
  if(generation=='formula'){
    editor.getEditor('root.character.gauges.0.depend').enable();
  }
});

Keywords

{
  "oneOf": [
    { "type": "array" },
    { "type": "object" }
  ],
  "headerTemplate": "> {{self.title}} {{self.type}}"
}

HTML

<div data-schemaid="root" data-schematype="object" data-schemapath="root" style="position: relative;">
  <h3>
    <span>Car</span>
    <div style="display: inline-block; margin-left: 10px; font-size: 0.8em; vertical-align: middle;">
      <button type="button" class=" json-editor-btn-collapse ">Collapse</button>
    </div>
    <div style="display: inline-block; margin-left: 10px; font-size: 0.8em; vertical-align: middle;">
      <button type="button" class=" json-editor-btn-edit " style="display: none;">Edit JSON</button>
      <div style="border: 1px solid black; box-shadow: black 3px 3px; position: absolute; z-index: 10; display: none; background-color: white;">
        <textarea style="width: 300px; height: 170px; box-sizing: border-box; display: block;"></textarea>
        <button type="button" class=" json-editor-btn-save ">Save</button>
        <button type="button" class=" json-editor-btn-cancel ">Cancel</button>
      </div>
    </div>
    <div style="display: none; margin-left: 10px; font-size: 0.8em; vertical-align: middle;">
      <button type="button" class=" json-editor-btn-edit ">Object Properties</button>
      <div style="border: 1px solid black; box-shadow: black 3px 3px; position: absolute; z-index: 10; display: none; background-color: white;">
        <div class="property-selector" style="width: 295px; max-height: 160px; padding: 5px 0px 5px 5px; overflow-y: auto; overflow-x: hidden;"></div>
        <input type="text" placeholder="Property name..." style="width: 220px; margin-bottom: 0px; display: inline-block;">
        <button type="button" class=" json-editor-btn-add ">add</button>
        <div style="clear: both;"></div>
      </div>
    </div>
  </h3>
  <div style="display: none;"></div>
  <div class="nero getIndentedPanel">
    <div>
      <div>
        <div class="row">
          <div data-schematype="string" data-schemapath="root.make">
            <div class="form-control">
              <label style="display: block; margin-bottom: 3px; font-weight: bold;">Produttore</label>
              <select name="root[make]">
                <option value="undefined"> </option>
                <option value="Toyota">Toyota</option>
                <option value="BMW">BMW</option>
                <option value="Honda">Honda</option>
                <option value="Ford">Ford</option>
                <option value="Chevy">Chevy</option>
                <option value="VW">VW</option>
              </select>
            </div>
            <div>
            </div>
          </div>
        </div>
        <div class="row">
          <div data-schematype="string" data-schemapath="root.model">
            <div class="form-control">
              <label style="display: block; margin-bottom: 3px; font-weight: bold;">Model</label>
              <input type="text" name="root[model]">
            </div>
            <div>
            </div>
          </div>
        </div>
        <div class="row">
          <div data-schematype="integer" data-schemapath="root.year">
            <div class="form-control">
              <label style="display: block; margin-bottom: 3px; font-weight: bold;">Year</label>
              <select name="root[year]">
                <option value="undefined"> </option>
                <option value="1995">1995</option>
                <option value="2014">2014</option>
              </select>
            </div>
            <div>
            </div>
          </div>
        </div>
        <div class="row">
          <div data-schematype="string" data-schemapath="root.color">
            <div class="form-control">
              <label style="display: block; margin-bottom: 3px; font-weight: bold;">Color</label>
              <input type="color" data-schemaformat="color" name="root[color]">
              <p style="font-size: 0.8em; margin: 0px; display: inline-block; font-style: italic;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
  </div>
</div>
petrosh commented 8 years ago

HJSON – https://github.com/laktak/hjson

circa:
  nonso:
    6
    # siacomesia
petrosh commented 8 years ago

CSON – https://github.com/pickhardt/CSON

.cson is extension of CoffeeScript

circa:
  nonso:
    6
    # siacomesia
    ciao nero
    4%
    "15"
petrosh commented 8 years ago

YAML – https://github.com/nodeca/js-yaml

Specs

.yml is aliases of .yaml

circa:
  nonso:
    6
    # siacomesia
    ciao nero
    4%
    "15"