it/itf/templates/erang/home.html

{% extends 'base.html' %}

{% block head %}
<title>India Theatre Forum - {{ current_issue.title }}</title>
<script type="text/javascript">
$(document).ready(function() {
  $('input, textarea').each(function() {
    var hasPlaceholder = $(this).attr("data-placeholder") == undefined ? false : true;
    if (hasPlaceholder) {
      $(this).data("placeholder", $(this).attr("data-placeholder"));
      $(this).addClass("placeholder").val($(this).data("placeholder"));
      $(this).focus(function() {
        var currText = $(this).val();
        if (currText == $(this).data("placeholder")) {
          $(this).val('').removeClass("placeholder");
        }
      });
      $(this).blur(function() {
        var currText = $(this).val();
        if (currText == '') {
          $(this).val($(this).data("placeholder"));
          $(this).addClass("placeholder");
        }
      });
    }
  });
});

$(document).ready(function() {
  $('#subscribeForm').submit(function(e) {
    e.preventDefault();
    $('.validation').slideUp("fast");
    var $email = $('#email');
    var email = $email.val();
    if (!isRFC822ValidEmail(email)) {
      $('<div />').addClass('validation').html("Invalid Email Address").hide().insertAfter($email).slideDown("slow");
//      $email.append(html);
      return false;
    }
    $('#subscribeBtn').attr("disabled", "disabled").text("Subscribing...");
    $.post("/erang/subscribe/", {
      'email': email
    }, function(response) {
      $('#subscribe').slideUp("slow", function() {
        $(this).addClass("response").html("<b>" + email + "</b>" + " has been subscribed to eRang. Thanks!");
        $(this).slideDown("slow");
      });
    });
  });
  $('#commentForm').submit(function(e) {
    e.preventDefault();
    $('#commentSubmit').attr("disabled", "disabled").text("Submitting...");
    $.post("/erang/postfeedback/", {
      'name': $('#commentName').val(),
      'email': $('#commentEmail').val(),
      'comment': $('#commentComment').val(),
      'issue': document.title
    }, function(response) {
      $('#commentWrapper').slideUp("slow", function() {
        $(this).addClass("response").html("Your feedback has been emailed to us at erang" + "@" + "theatreforum.in. Thanks!");
        $(this).slideDown("slow", function() { 
          $(document).scrollTop($(document).height());
        });
      });
    });    
  });
});  

//from: http://rosskendall.com/blog/web/javascript-function-to-check-an-email-address-conforms-to-rfc822

function isRFC822ValidEmail(sEmail) {

  var sQtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]';
  var sDtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]';
  var sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+';
  var sQuotedPair = '\\x5c[\\x00-\\x7f]';
  var sDomainLiteral = '\\x5b(' + sDtext + '|' + sQuotedPair + ')*\\x5d';
  var sQuotedString = '\\x22(' + sQtext + '|' + sQuotedPair + ')*\\x22';
  var sDomain_ref = sAtom;
  var sSubDomain = '(' + sDomain_ref + '|' + sDomainLiteral + ')';
  var sWord = '(' + sAtom + '|' + sQuotedString + ')';
  var sDomain = sSubDomain + '(\\x2e' + sSubDomain + ')*';
  var sLocalPart = sWord + '(\\x2e' + sWord + ')*';
  var sAddrSpec = sLocalPart + '\\x40' + sDomain; // complete RFC822 email address spec
  var sValidEmail = '^' + sAddrSpec + '$'; // as whole string
  
  var reValidEmail = new RegExp(sValidEmail);
  
  if (reValidEmail.test(sEmail)) {
    return true;
  }
  
  return false;
}

</script>
<style type="text/css">
  body {
   
  }

  #leftMenu {
    float: left;
    width: 200px;
    margin-top: 40px;
  }

  .validation {
  font-size: 12px;
  color: #f00;
  }

  #wrapper {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
  }

  #newsletterContent {
    width: 780px;
    float: left;
    margin-left: 15px;
  }

  #commentTable {
    width: 100%;
  }

  .label {
    text-align: right;
    width: 30%;
  }

  #commentComment {
    width: 400px;
    height: 250px;
  }

  .newsletterList a {
    text-decoration: none;
  }

  .newsletterList li {
    margin-bottom: 4px;
    list-style-type: none;
  }

  .response {
    font-size: 11px;
    text-align: center;
    color: #363636;
  }

  ul {
    padding: 0px;
    padding-left: 4px;
    margin-top: 2px;
  }

  
  h3 {
    padding: 0px;
    margin-bottom: 4px;
  }

  .homeLink a {
    text-decoration: none;
  }

  .date {
    color: #808080;
    font-style: italic;
    font-size: 10px;
  }

  .placeholder {
    color: #808080;
    font-style: italic;
  }
</style>
{% endblock %}

{% block body %}
  <div id="leftMenu">
    <div class="homeLink">
      <h3><img src="/static/images/favicon.ico" title="India Theatre Forum" alt="" /> <a href="/" title="India Theatre Forum Home">&nbsp;Home</a> </h3>
    </div>
    <h3>Past Issues:</h3>
    <ul class="newsletterList">
      {% for p in past_issues %}
        <li>
          <a href="?issue_id={{p.id}}">{{ p.title }}</a>
          <br />
          <span class="date">{{ p.date|date:"d M Y" }}</span>
        </li>
      {% endfor %}
    </ul>
    <div id="subscribe">
      <a name="subscribe"></>
      <h3>Subscribe:</h3>
      <form id="subscribeForm">
        <input id="email" name="email" data-placeholder="E-Mail" /><br />
        <button id="subscribeBtn">Subscribe!</button>
      </form>
    </div>
  </div>
  <div id="newsletterContent">
    {% autoescape off %}
    {{ current_issue.html }}
    {% endautoescape %}
    <div id="commentWrapper">
      <h3>Comments and Feedback</h3>
      <a name="comments"></a>
      <form id="commentForm" action="">
        <table id="commentTable">
          <tr>
            <td class="label">Name:</td>
            <td><input name="commentName" id="commentName" /></td>
          </tr>
          <tr>
            <td class="label">Email:</td>
            <td><input name="commentEmail" id="commentEmail" /></td>
          </tr>
          <tr>
            <td class="label">Comment:</td>
            <td><textarea name="commentComment" id="commentComment"></textarea></td>
          </tr>
          <tr>
            <td class="label"></td>
            <td><button id="commentSubmit">Submit</button></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
{% endblock %}