Skip to content

A complete tool to maintain all the front-end through a json

License

Notifications You must be signed in to change notification settings

lean/absolute-json

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

absolute-json

=========

logo

A complete tool to maintain all the front-end through a json. You can manipulate all text and HTML attributes automatically.

  • The best way to work with config files
  • Use it as localization library
  • Dynamic loading json files
  • Fast startup, lightweight
  • Easy to maintain
  • Errors and warnings

Examples

#####Bind your texts with the source json

//file: source.json
{
    "title" : "GitHub",
	"text" : "GitHub · Build software better, together."
}

in your html

<h3 data-abjson='title'></h3>
<p data-abjson='text'></p>

becomes

<h3 data-abjson='title'>GitHub</h3>
<p data-abjson='text'>GitHub · Build software better, together.</p>

#####Bind your texts with place holders for values in the source json

//file: source.json
{
	"title" : "%1 is something %2",
}

in your html

<h3 data-abjson='title' data-abjson-r='Abjson|Amazing'></h3>

becomes

<h3 data-abjson='title' data-abjson-r='Abjson|Amazing'>Abjson is something Amazing</h3>

#####Bind html attributes You can work with objects in the source. The default property for the html text in an object will be "text". If you specified an html attribute it will be replaced

//file: source.json
{
	"githubLink" : {
		"text" : "GitHub · Build software better",
		"href" : "https://github.com/"
	}
}

in your html

<a data-abjson='githubLink' href=''></a>

becomes

<a data-abjson='github' href='https://github.com/'>GitHub · Build software better</a>

Getting started

create a file that will be the source of all your texts and HTML attributes

//file: text-sources.json

{
  "greeting" : "Hello!!!",
  "githubLink" : {
    "text" : "GitHub · Build software better, together.",
    "href" : "http://www.github.com"
  }
}

now in your HTML import the lib

<!-- file: example.html -->

<script src="absolute-json.js">

Add the data-abjson attribute to the HTML elements

<p data-abjson='greeting'></p>
<a src='' data-abjson='githubLink'></a>

init the lib

abjson.load({
    sourceUrl : 'text-sources.json',
  }, function(err){
      if (err) {
        throw err;
      }
      //update the dom
      $(body).abjson();
});

Methods

###abjson.load (options, callback) load the resource file and init the library.

For example, you can load sources from memory

var jsonData = {
  "hello": "hola"
};

abjson.load({
    source : jsonData,
  }, function(err){
  if (err) {
    throw err;
  }

  //update the dom
  $(body).abjson();
});

Or if you want, you can load sources from an URL

abjson.load({
    sourceUrl : "http://path.to.your.source/file.json",
  }, function(err){
  if (err) {
    throw err;
  }

  //update the dom
  $(body).abjson();
});

###abjson.get (key) get the value for a given key

  var jsonData = {
    "hello": "hola extraño, espero que disfrute leyendo esta documentación"
  };
  //init...
  console.log(abjson.get('hello')); // hola extraño...
});

###abjson.get (key, a, b...) It accepts a variable number of parameters after the key. get the value for a given key. If the value is templated, generate the output based on the extra parameters provided.

  var jsonData = {
    "hello": "hola %1 %2!",
    "bye": "chau %1"
  };
  //init...
  console.log(abjson.get('hello', 'Mr.', 'Magoo')); // hola Mr. Magoo!
  console.log(abjson.get('bye','Magoo')); // chau Magoo
});

##Contribute

  1. install some HTTP static server pointing to root directory (i.e. npm install -g wup)
  2. open your browser and run tests from http://localhost:8080
  3. pull request
  4. get some vodka ;)

##Changelog

###0.7

  • Added support to access an object with string key
  • Removed support to custom parser

###0.6

  • Added support to load json from reference (not a file URL)

###0.5

  • Many improvements
  • Removed underscorejs dependency

##TODO

  • Register as a Bower package

About

A complete tool to maintain all the front-end through a json

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published