Subversion Repositories SmartDukaan

$(function(){
    /**
     * My Notes core method library
     **/
    var myNotes = {
        /**
         * Properties
         *  - notes: Object containing slideIds and corresponding notes as key-value pairs
         *  - defaultNoteText will be displayed if user has not saved a note on a slide
         *  - maxNoteLength indicates the max number of characters allowed in each note
         *  - maxNoteLengthWarning is the template message which is show to user while he's typing
         **/
        notes: null,
        
        defaultNoteText: 'Click here to add notes',
        
        maxNoteLength: 400,
        
        maxNoteLengthWarning: '# chars remaining',
        
        /**
         * sanitize() will remove new line character from the string passed as parameter.
         * This removal is required as any new line char in JSON leads to unexpected
         * execution the code upon eval()
         **/
        sanitize: function(str) {
            return str.replace(/\n/g, " ");
        },
                
        /**
         * getEntityId() will return Entity ID for the current product
         **/
        getEntityId: function() {
                return $('#product_id').val();
        },
        
        /**
         * getSlideId() returns slideId associated with a particular notes section
         **/
        getSlideId: function(notesSectionElement)       {
                var cssClass = $(notesSectionElement).attr("class");
                // NOTE: idIndex will depend on the structure of cssClass
                idIndex = cssClass == 'mynotes-section' ? 1 : 2;
                return $(notesSectionElement).attr('id').split('-')[idIndex];
        },
        
        /**
         * setNotes(notes) will accept an object and set this.notes
         **/
        setNotes: function(notes)       {
                this.notes = notes;
        },

        /**
         * getNoteForSlide() returns note associated with a given slide
         **/
        getNoteForSlide: function(slideId)      {
                return this.notes.hasOwnProperty(slideId) ? this.notes[slideId] : null;
        },
        
        /**
         * getNoteForSlide() returns note associated with a given slide
         **/
        setNoteForSlide: function(slideId, note){
                this.notes[slideId] = note;
        },
        
        /**
         * populateNotes() will populate mynotes section on each slide with notes data
         **/
        populateNotes: function()       {
                        var notes = this.notes;
                        
                        $('.mynotes-section').each(function(){
                                var slideId = $(this).attr('id').split('-')[1];
                                
                                if(notes.hasOwnProperty(slideId) && $.trim(notes[slideId]) != "")       {
                                        
                                        $(this).children('div').html(notes[slideId]);
                                        $(this).children('textarea').val(notes[slideId]);
                                        
                                } else  {
                                        $(this).children('div').html(myNotes.defaultNoteText);
                                }
                        });
        },
        
        populateColorbox: function(){
                var notes = this.notes;
                        
                        $('.mynotes-colorbox-section').each(function(){
                                var slideId = myNotes.getSlideId($(this));
                                
                                if(notes.hasOwnProperty(slideId) && $.trim(notes[slideId]) != "")       {
                                        
                                        $(this).children('div').html(notes[slideId]);
                                        $(this).children('textarea').val(notes[slideId]);
                                        
                                } else  {
                                        $(this).children('div').html(myNotes.defaultNoteText);
                                }
                        });
        },
        
        /**
         * getNotes() will fetch user's notes for this entity (all slides) from sever
         * and populate the slides.
         **/
        getNotes: function()    {
                var entityId = this.getEntityId();
                
                jQuery.ajax({
                        type: "GET",
                        url: "/my-notes/" + entityId + "-json",
                        success: function(notesJSON)    {
                                var notes = eval(notesJSON);
                                myNotes.setNotes(notes);
                                myNotes.populateNotes();
                        }
                });
        },
        
        limitNoteLength: function(textareaElement)      {
                var currentNoteLength = $(textareaElement).val().length;
                
                if (this.maxNoteLength < currentNoteLength)     {
                        $(textareaElement).val($(textareaElement).val().substr(0, myNotes.maxNoteLength));
                        var msg = this.maxNoteLengthWarning.replace(/#/g, 0);
                } else  {
                        var msg = this.maxNoteLengthWarning.replace(/#/g, myNotes.maxNoteLength - currentNoteLength);
                }
                $(textareaElement).siblings('p').children('span').html(msg + ' (Max ' + this.maxNoteLength + ')');
        },
        
        /**
         * saveNote() sends server request to save newly entered/modified note
         * for a particular slide
         **/
        saveNote: function(slideId, note)       {
                var entityId = this.getEntityId();

                jQuery.ajax({
                        type: "POST",
                        url: "/save-note/",
                        data: ({entity: entityId, slide: slideId, note: note}),
                        success: function(msg)  {
                                myNotes.setNoteForSlide(slideId, note);
                        }
                });
        },
        
        updateNoteInViews: function(slideId, note)      {
                $('#mynotes-' + slideId + ', #mynotes-colorbox-' + slideId).children('div').html(note);
        }
    };
    /**
     * Loading user's notes for this product (entity) 
     **/
    myNotes.getNotes();

    
    /**
     ******************** Event Handlers **********************
     * When user clicks view pane, it will be transforms into a textarea
     * 
     * When textarea looses focus, a server request will be issued to add/update
     * note for that slide, if the note text is changed
     **/
    $('.mynotes-section div, .mynotes-colorbox-section div').live('click', function(){
        var textareaElement = $(this).hide().siblings('p').show().siblings('textarea');
        $(textareaElement).show().focus();
        myNotes.limitNoteLength(textareaElement);
    });
    
    $('.mynotes-section textarea, .mynotes-colorbox-section textarea').live('blur', function(){
        var slideId = myNotes.getSlideId($(this).parent());
        
        var text = $.trim($(this).val());
        
        if (text != "" && text != myNotes.defaultNoteText && text != myNotes.getNoteForSlide(slideId))  {
                var note = myNotes.sanitize(text);
                
                myNotes.saveNote(slideId, note);
                myNotes.updateNoteInViews(slideId, note);
                $(this).siblings('div').show();

        } else  {
                $(this).siblings('div').show();
        }
                $(this).hide().siblings('p').hide();
                
    }).live('keyup', function(){
        myNotes.limitNoteLength($(this));
    });
    
    $('#view-mynotes, a.view-my-notes').live('click', function(){
        $.colorbox({
                width:"670px",
                height:"485px",
                iframe: false,
                href:"/my-notes/" + myNotes.getEntityId() + "-html",
                
                onComplete: function(){
                        $('#mynotes-colorbox').show();
                        myNotes.populateColorbox();
                },
                onCleanup: function(){
                        $('#mynotes-colorbox').hide();
                }
        });
    });
});