Simple plugin to persist positions of sortable areas

jquery.persistSortable.js

/**
 * Copyright (C) 2016  Darko Gjorgjijoski
 *  
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *  
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 */


(function($){
  
  $.fn.persistSortable = function( options ) {
    /**
     * Save the the current instance of the plugin
     */
    var $self = $(this);

    /**
     * Keep the defaults in this array
     */
    var defaults = {
        placeholder: 'drop-placeholder',
        storagekey: -1
    };

    /**
     * Merge passed options array with the defaults array
     */
    options = $.extend(defaults, options);

    /**
     * Break if no storage key is set.
     */
    if(options.storagekey == -1){
        console.error('Please set valid storage key!');
        return this;
    }

    /**
     * Stores to the database
     * @returns {*}
     */
    var storeToDatabase = function ( order ) {
        localStorage.setItem(options.storagekey, JSON.stringify(order));
        return true;
    };

    /**
     * Retrieves from the database
     * @returns {*}
     */
    var getStoredOrder = function () {
        // Retrieve the object from storage
        var retrievedObject = localStorage.getItem(options.storagekey);
        if (retrievedObject === null) {
            return false;
        }
        return JSON.parse(retrievedObject);
    };

    /**
     * Retrieves ordered html items
     * @returns string
     */
    var generateNewOrderedItems = function () {
        var sortedSelectors = getStoredOrder();
        var items = $self.children();
        var html  = "";
        if(sortedSelectors != false){
            for(var index in sortedSelectors){
                //console.log(sortedSelectors[index]);
                var item = $self.children("#"+sortedSelectors[index]).clone().wrap('<div></div>').parent();
                if(item.length > 0){
                    html += item.html();
                }
            }
        }
        if(html == ""){
            return false;
        }
        return html;

    };

    /**
     * Check if the user can store
     * @returns boolean
     */
    var canStore = function () {
        var items = $self.children();
        var canstore = true;
        items.each(function (i, thisSelf) {
            var elid = $(thisSelf).attr('id');
            if (typeof elid === typeof undefined && elid === false) {
                canstore = false;
            }
        });
        return canstore;
    };


    var construct = function () {

        //persist current saved order
        var newHtml = generateNewOrderedItems();
        // console.log(newHtml);
        if(newHtml){
            $self.html("");
            $self.html(newHtml);
        } else {
            console.warn("We already have stored order but i can not replace it.")
        }

        /**
         * Initialize the sortable area
         */
        $self.sortable({
            placeholder: options.placeholder,

            /**
             * Fired on create. Here we check if there is stored order to reorder the items
             * @param e
             * @param ui
             */
            create: function(e, ui){
                order = getStoredOrder();
                if(false != order){
                    console.log("Stored order is: ");
                    console.log(order);
                }
            },
            /**
             * Fired after start of moving specific element
             * @param e
             * @param ui
             */
            start: function(e, ui){
                ui.item.startPos = ui.item.index();
                ui.placeholder.height(ui.item.height());
                ui.placeholder.width(ui.item.width());
            },

            /**
             * Fired after element is dropped to specific position
             * @param e
             * @param ui
             */
            stop: function(e, ui){
                var droppedItemOldPosition = ui.item.startPos;
                var droppedItemNewPosition = ui.item.index();
                var items    = $self.children('.ui-sortable-handle');
                var idsOrder = items.map(function() { return this.id; }).get();
                if(canStore()){
                    storeToDatabase(idsOrder);
                    console.info("User can store! New order is stored.")
                }
                // console.log(idsOrder);
            }
        });

        /**
         * Disable selections
         */
        $self.disableSelection();

    };

    construct();
    return this;
};
  
})(jQuery);