Custom data toolkit

Javascript wrapper for Voog custom data API is integrated in Voog's admin tools.

The usage examples are here:

• Save body background color to custom data.
• Image drop area that saves the dropped image to custom data

Voog admin tools can be added to your template using the code below:

{% editorjsblock %}
  <script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
{% endeditorjsblock %}

Enables site editor to save, retrieve and manage custom key:value pairs on page, site and article objects. Set attributes are available in template when rendering via object.data.key. For example: {{ article.data.bgcolor }}

Usage

Initiation:

var articleData = new Edicy.CustomData({
  type: "article", // allowed values "article", "page", "site"
  id: {{ article.id }} // Must be defined for "page" ({{page.id}}) or "article" ({{ article.id }})
});

Events:

Available events:

• success
• error

var handleSuccess = function(data, request) {
  var type = request.type; // "get", "set" or "remove"
  var key = request.key // the specific key that was given or null for batch get request
};

articleData.on('success', handleSuccess);

articleData.on('error', function(response, request) {
  alert(response.message + ' Request:' + request .type + ' Key:' + request.key);
});

articleData.off('success', handleSuccess);

Setting data:

articleData.set({
  "bgcolor": "#abcdef",
  "textcolor": "white"
});

articleData.set("bgcolor", "#abcdef");

articleData.set("bgcolor", "#abcdef", {
  success: function(data) {

  },

  error: function(response) {

  }
});

Getting data:

articleData.get();

articleData.get({
  success: function(data) {

  },

  error: function(response) {

  }
});

articleData.get("bgcolor");

articleData.get("bgcolor", {
  success: function(data) {
  },

  error: function(response) {

  }
});

Removing key:

articleData.remove("bgcolor");

articleData.remove("bgcolor", {
  success: function(data) {
  },

  error: function(response) {
  }
});