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);

    });

});