Question

I have a web app with Rails. I use jQuery for manipulating text selections.

I have implemented two modi:

Reading mode:
User can only read text. Highlights and modifications are hidden.

Review mode:
User can edit and modify the text.

For the reading mode I want to prevent all functions for text modifications to get triggered.

For now I have a variable inReviewMode. Its boolean and I trigger the value when the user clicks on a button. In the code I realize the switch like:

(CoffeeScript notation)

jQuery ->
  $(document).on 'contextmenu', 'article#content', (e) ->
    if inReviewMode
      e.preventDefault()
      # and so on... 

  $(document).on 'click', 'article#content', (e) ->
    if inReviewMode
      # something to do

Is there a better approach like wrapping the if statement around all functions and then implementing the “reading mode functions” in the else block?

I hope you understand my question.
Thanks for helping!

Answer 1

I think there are a few things that could clean this up:

1. Use stopImmediatePropagation to cancel notifications to sibling event handlers.
2. Use one event handler for all of the “edit” events you’d like to cancel.

In other words, something like this:

$ ->
    isReviewMode = false;

    $('#review-yes').change () ->
        isReviewMode = this.checked;

    $(document).on 'click contextmenu', '#content', (e) ->
        if isReviewMode
            e.preventDefault()
            e.stopImmediatePropagation()

    $(document).on 'click', '#content', (e) ->
        alert 'edit mode!'

Example: http://jsfiddle.net/6zAN7/8/

As you can see from the example, both click and contextmenu don’t occur in review mode.

You could extend the idea and provide a constant variable EditModeEvents that contains all of the events that you want to cancel in edit mode:

$ ->
    isReviewMode = false;
    EditModeEvents = ['click', 'contextmenu'];

    $('#review-yes').change () ->
        isReviewMode = this.checked;

    $(document).on EditModeEvents.join(' '), '#content', (e) ->
        if isReviewMode
            e.preventDefault()
            e.stopImmediatePropagation()

    $(document).on 'click', '#content', (e) ->
            alert 'edit mode!'

This way, the code is a bit clearer on what it’s accomplishing and all you’ll have to do to add new events is add the event name to EditModeEvents.

This strategy assumes that all you want to do in review mode for each event is stop the event from occurring. If you need to do different things depending on the event, then this won’t work as well–but you can do something similar with separate event handlers.