jquery.sketchable.serializer.js

/*!
 * Serializer plugin for Sketchable | v1.0 | Luis A. Leiva | MIT license
 */
/* eslint-env browser */
/* global jQuery */
;(function($) {
  // Custom namespace ID, for private data bindind.
  var namespace = 'sketchable';
  /**
   * Serializer plugin constructor for jQuery Sketchable instances.
   * @param {jQuery} $instance - jQuery sketchable instance.
   * @namespace $.fn.sketchable.plugins.serializer
   */
  $.fn.sketchable.plugins.serializer = function($instance) {
    // Expose public API: all jQuery sketchable instances will have these methods.
    $.extend($.fn.sketchable.api, {
      // Namespace methods to avoid collisions with other plugins.
      serializer: {
        /**
         * Save canvas data as JSON string.
         * @return {string}
         * @memberof $.fn.sketchable.plugins.serializer
         * @example
         * var contents = jqueryElem.sketchable('serializer.save');
         */
        save: function() {
          var data = $(this).data(namespace);
          // Save only the required properties.
          // Also avoid circular JSON references.
          return JSON.stringify({
            strokes: data.strokes,
            options: data.options,
            actions: data.sketch.callStack,
          });
        },
        /**
         * Load canvas data from JSON string.
         * @param {string} jsonStr - JSON data saved with {@link $.fn.sketchable.plugins.serializer.save} method.
         * @return {jQuery} jQuery sketchable element.
         * @memberof $.fn.sketchable.plugins.serializer
         * @example
         * jqueryElem.sketchable('serializer.load', jsonStr);
         */
        load: function(jsonStr) {
          var data = $(this).data(namespace);
          var origData = JSON.parse(jsonStr);
          var mySketch = data.sketch;
          for (var i = 0; i < origData.actions.length; i++) {
            var entry = origData.actions[i];
            if (entry.property && typeof entry.value !== 'object') {
              // Update graphics properties.
              mySketch.data[entry.property] = entry.value;
            } else if (entry.method) {
              mySketch[entry.method].apply(mySketch, entry.args);
            } else {
              console.warn('Unknown call:', entry);
            }
          }
          // Update required properties.
          data.sketch.callStack = origData.actions.slice();
          data.strokes = origData.strokes.slice();
          data.options = origData.options;
          return $instance;
        },
      },
    });
  };
})(jQuery);