Subversion Repositories SmartDukaan

/**
 * 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: {},
        
        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(cssClass) {
                //NOTE: This is dependent on the CSS structure
                return cssClass == 'mynotes-section' || cssClass == null ? $('#product_id').val() : $('#colorboxEntityId').html();
        },
        
        /**
         * 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 noteViewPane = $(this).children('div');
                                
                                if($.trim($(noteViewPane).html()) == "")        $(noteViewPane).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);

                        var notesSection = $(textareaElement).parent();
                trackEventWithGA('My Notes', 'Note Length Limit Reached', this.getEntityId($(notesSection).attr('class')) + " - " + this.getSlideId(notesSection));
                } 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, entityId, note)     {
                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);
        },
        
        showColorbox: function(entityId)        {
                $.colorbox({
                        width:"670px",
                        height:"485px",
                        iframe: false,
                        href:"/my-notes/" + entityId + "-html",
                        
                        onComplete: function(){
                                myNotes.populateColorbox();
                        }
                });
        }
    };

$(function(){
    /**
     ******************** 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);
        
        trackEventWithGA('My Notes', 'Note Taking Attempt', myNotes.getEntityId($(this).attr('class')) + " - " + myNotes.getSlideId($(this).parent()));
    });
    
    $('.mynotes-section textarea, .mynotes-colorbox-section textarea').live('blur', function(){
        var slideId = myNotes.getSlideId($(this).parent());
                var entityId = myNotes.getEntityId($(this).parent().attr('class'));
        
        var text = $.trim($(this).val());
        
        if (text != "" && text != myNotes.defaultNoteText && text != myNotes.getNoteForSlide(slideId))  {
                var note = myNotes.sanitize(text);
                
                myNotes.saveNote(slideId, entityId, note);
                myNotes.updateNoteInViews(slideId, note);
                $(this).siblings('div').show();
                trackEventWithGA('My Notes', 'Note Saved', entityId + " - " + slideId);

        } else  {
                $(this).siblings('div').show();
        }
                $(this).hide().siblings('p').hide();
                
    }).live('keyup', function(){
        myNotes.limitNoteLength($(this));
    });
    
    $('.view-mynotes').click(function(){
        var entityId = myNotes.getEntityId();
        trackEventWithGA('My Notes', 'Colorbox From Product Page', entityId + '');
        myNotes.showColorbox(entityId);
    });
    
    $('a.view-my-notes').live('click', function(){
        var entityId = $(this).attr('entity');
        trackEventWithGA('My Notes', 'Colorbox From Widget', entityId + '');
        myNotes.showColorbox(entityId);
    });
});