edx-platform/lms/templates/help_modal.html

<%namespace name='static' file='static_content.html'/>
<%! from django.conf import settings %>
<%! from courseware.tabs import get_discussion_link %>

% if settings.MITX_FEATURES.get('ENABLE_FEEDBACK_SUBMISSION', False):

<div class="help-tab">
  <a href="#help-modal" rel="leanModal">Help</a>
</div>

<section id="help-modal" class="modal">
  <div class="inner-wrapper" id="help_wrapper">
    <header>
      <h2><span class="edx">edX</span> Help</h2>
      <hr>
    </header>

<%
discussion_link = get_discussion_link(course) if course else None
%>
% if discussion_link:
    <p>
      Have a course-specific question?
      <a href="${discussion_link}" target="_blank"/>
        Post it on the course forums.
      </a>
    </p>
    <hr>
% endif

    <p>Have a general question about edX? <a href="/help" target="_blank">Check the FAQ</a>.</p>
    <hr>

    <div class="help-buttons">
      <a href="#" id="feedback_link_problem">Report a problem</a>
      <a href="#" id="feedback_link_suggestion">Make a suggestion</a>
      <a href="#" id="feedback_link_question">Ask a question</a>
    </div>

## TODO: find a way to refactor this
    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>

  <div class="inner-wrapper" id="feedback_form_wrapper">
    <header></header>

    <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
      <div id="feedback_error" class="modal-form-error"></div>
% if not user.is_authenticated():
      <label data-field="name">Name*</label>
      <input name="name" type="text">
      <label data-field="email">E-mail*</label>
      <input name="email" type="text">
% endif
      <label data-field="subject">Subject*</label>
      <input name="subject" type="text">
      <label data-field="details">Details*</label>
      <textarea name="details"></textarea>
      <input name="tag" type="hidden">
      <div class="submit">
        <input name="submit" type="submit" value="Submit">
      </div>
    </form>

    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>

  <div class="inner-wrapper" id="feedback_success_wrapper">
    <header>
      <h2>Thank You!</h2>
      <hr>
    </header>

    <p>
    Thanks for your feedback. We will read your message, and our
    support team may contact you to respond or ask for further clarification.
    </p>

    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
(function() {
    $(".help-tab").click(function() {
        $(".field-error").removeClass("field-error");
        $("#feedback_form")[0].reset();
        $("#feedback_form input[type='submit']").removeAttr("disabled");
        $("#feedback_form_wrapper").css("display", "none");
        $("#feedback_error").css("display", "none");
        $("#feedback_success_wrapper").css("display", "none");
        $("#help_wrapper").css("display", "block");
    });
    showFeedback = function(e, tag, title) {
        $("#help_wrapper").css("display", "none");
        $("#feedback_form input[name='tag']").val(tag);
        $("#feedback_form_wrapper").css("display", "block");
        $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
        e.preventDefault();
    };
    $("#feedback_link_problem").click(function(e) {
        showFeedback(e, "problem", "Report a Problem");
    });
    $("#feedback_link_suggestion").click(function(e) {
        showFeedback(e, "suggestion", "Make a Suggestion");
    });
    $("#feedback_link_question").click(function(e) {
        showFeedback(e, "question", "Ask a Question");
    });
    $("#feedback_form").submit(function() {
        $("input[type='submit']", this).attr("disabled", "disabled");
    });
    $("#feedback_form").on("ajax:complete", function() {
        $("input[type='submit']", this).removeAttr("disabled");
    });
    $("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
        $("#feedback_form_wrapper").css("display", "none");
        $("#feedback_success_wrapper").css("display", "block");
    });
    $("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
        $(".field-error").removeClass("field-error");
        var responseData;
        try {
            responseData = jQuery.parseJSON(xhr.responseText);
        } catch(err) {
        }
        if (responseData) {
            $("[data-field='"+responseData.field+"']").addClass("field-error");
            $("#feedback_error").html(responseData.error).stop().css("display", "block");
        } else {
            // If no data (or malformed data) is returned, a server error occurred
            htmlStr = "An error has occurred.";
% if settings.FEEDBACK_SUBMISSION_EMAIL:
            htmlStr += " Please <a href='#' id='feedback_email'>send us e-mail</a>.";
% else:
            // If no email is configured, we can't do much other than
            // ask the user to try again later
            htmlStr += " Please try again later.";
% endif
            $("#feedback_error").html(htmlStr).stop().css("display", "block");
% if settings.FEEDBACK_SUBMISSION_EMAIL:
            $("#feedback_email").click(function(e) {
                mailto = "mailto:" + "${settings.FEEDBACK_SUBMISSION_EMAIL}" +
                    "?subject=" + $("#feedback_form input[name='subject']").val() +
                    "&body=" + $("#feedback_form textarea[name='details']").val();
                window.open(mailto);
                e.preventDefault();
            });
%endif
        }
    });
})(this)
</script>

%endif