Rewrite JavaScript on main page

Both feedback form and calculator interaction now in its own class.

static/js/application.js

+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  window.Calculator = (function() {
+
+    function Calculator() {}
+
+    Calculator.bind = function() {
+      var calculator;
+      calculator = new Calculator;
+      $('.calc').click(calculator.toggle);
+      $('form#calculator').submit(calculator.calculate).submit(function(e) {
+        return e.preventDefault();
+      });
+      return $('div.help-wrapper a').hover(calculator.helpToggle).click(function(e) {
+        return e.preventDefault();
+      });
+    };
+
+    Calculator.prototype.toggle = function() {
+      $('li.calc-main').toggleClass('open');
+      $('#calculator_wrapper #calculator_input').focus();
+      return $('.calc').toggleClass('closed');
+    };
+
+    Calculator.prototype.helpToggle = function() {
+      return $('.help').toggleClass('shown');
+    };
+
+    Calculator.prototype.calculate = function() {
+      return $.getJSON('/calculate', {
+        equation: $('#calculator_input').val()
+      }, function(data) {
+        return $('#calculator_output').val(data.result);
+      });
+    };
+
+    return Calculator;
+
+  })();
+
+  window.FeedbackForm = (function() {
+
+    function FeedbackForm() {}
+
+    FeedbackForm.bind = function() {
+      return $('#feedback_button').click(function() {
+        var data;
+        data = {
+          subject: $('#feedback_subject').val(),
+          message: $('#feedback_message').val(),
+          url: window.location.href
+        };
+        return $.post('/send_feedback', data, function() {
+          return $('#feedback_div').html('Feedback submitted. Thank you');
+        }, 'json');
+      });
+    };
+
+    return FeedbackForm;
+
+  })();
+
+  $(function() {
+    $.ajaxSetup({
+      headers: {
+        'X-CSRFToken': $.cookie('csrftoken')
+      }
+    });
+    FeedbackForm.bind();
+    Calculator.bind();
+    return $("a[rel*=leanModal]").leanModal();
+  });
+
+}).call(this);

templates/coffee/files.json

+{
+  "js_files": [
+    "/static/js/jquery-1.6.2.min.js"
+  ],
+  "static_files": [
+    "js/application.js"
+  ]
+}

templates/coffee/fixtures/calculator.html

+<ul>
+  <li class="calc-main">
+    <a href="#" class="calc">Calculator</a>
+    <div id="calculator_wrapper">
+      <form id="calculator">
+        <div class="input-wrapper">
+          <input type="text" id="calculator_input" />
+          <div class="help-wrapper">
+            <a href="#">Hints</a>
+            <dl class="help"></dl>
+          </div>
+        </div>
+        <input id="calculator_button" type="submit" value="="/>
+        <input type="text" id="calculator_output" readonly />
+      </form>
+    </div>
+  </li>
+</ul>

templates/coffee/fixtures/feedback_form.html

+<div id="feedback_div">
+  <form>
+    <label>Subject:</label> <input type="text" id="feedback_subject">
+    <label>Feedback: </label><textarea id="feedback_message"></textarea>
+    <input id="feedback_button" type="button" value="Submit">
+  </form>
+</div>

templates/coffee/spec/calculator_spec.coffee

+describe 'Calculator', ->
+  beforeEach ->
+    loadFixtures 'calculator.html'
+    @calculator = new Calculator
+
+  describe 'bind', ->
+    beforeEach ->
+      Calculator.bind()
+
+    it 'bind the calculator button', ->
+      expect($('.calc')).toHandleWith 'click', @calculator.toggle
+
+    it 'bind the help button', ->
+      # These events are bind by $.hover()
+      expect($('div.help-wrapper a')).toHandleWith 'mouseenter', @calculator.helpToggle
+      expect($('div.help-wrapper a')).toHandleWith 'mouseleave', @calculator.helpToggle
+
+    it 'prevent default behavior on help button', ->
+      $('div.help-wrapper a').click (e) ->
+        expect(e.isDefaultPrevented()).toBeTruthy()
+      $('div.help-wrapper a').click()
+
+    it 'bind the calculator submit', ->
+      expect($('form#calculator')).toHandleWith 'submit', @calculator.calculate
+
+    it 'prevent default behavior on form submit', ->
+      $('form#calculator').submit (e) ->
+        expect(e.isDefaultPrevented()).toBeTruthy()
+        e.preventDefault()
+      $('form#calculator').submit()
+
+  describe 'toggle', ->
+    it 'toggle the calculator and focus the input', ->
+      spyOn $.fn, 'focus'
+      @calculator.toggle()
+
+      expect($('li.calc-main')).toHaveClass('open')
+      expect($('#calculator_wrapper #calculator_input').focus).toHaveBeenCalled()
+
+    it 'toggle the close button on the calculator button', ->
+      @calculator.toggle()
+      expect($('.calc')).toHaveClass('closed')
+
+      @calculator.toggle()
+      expect($('.calc')).not.toHaveClass('closed')
+
+  describe 'helpToggle', ->
+    it 'toggle the help overlay', ->
+      @calculator.helpToggle()
+      expect($('.help')).toHaveClass('shown')
+
+      @calculator.helpToggle()
+      expect($('.help')).not.toHaveClass('shown')
+
+  describe 'calculate', ->
+    beforeEach ->
+      $('#calculator_input').val '1+2'
+      spyOn($, 'getJSON').andCallFake (url, data, callback) ->
+        callback({ result: 3 })
+      @calculator.calculate()
+
+    it 'send data to /calculate', ->
+      expect($.getJSON).toHaveBeenCalledWith '/calculate',
+        equation: '1+2'
+      , jasmine.any(Function)
+
+    it 'update the calculator output', ->
+      expect($('#calculator_output').val()).toEqual('3')

templates/coffee/spec/calculator_spec.js

+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  describe('Calculator', function() {
+    beforeEach(function() {
+      loadFixtures('calculator.html');
+      return this.calculator = new Calculator;
+    });
+    describe('bind', function() {
+      beforeEach(function() {
+        return Calculator.bind();
+      });
+      it('bind the calculator button', function() {
+        return expect($('.calc')).toHandleWith('click', this.calculator.toggle);
+      });
+      it('bind the help button', function() {
+        expect($('div.help-wrapper a')).toHandleWith('mouseenter', this.calculator.helpToggle);
+        return expect($('div.help-wrapper a')).toHandleWith('mouseleave', this.calculator.helpToggle);
+      });
+      it('prevent default behavior on help button', function() {
+        $('div.help-wrapper a').click(function(e) {
+          return expect(e.isDefaultPrevented()).toBeTruthy();
+        });
+        return $('div.help-wrapper a').click();
+      });
+      it('bind the calculator submit', function() {
+        return expect($('form#calculator')).toHandleWith('submit', this.calculator.calculate);
+      });
+      return it('prevent default behavior on form submit', function() {
+        $('form#calculator').submit(function(e) {
+          expect(e.isDefaultPrevented()).toBeTruthy();
+          return e.preventDefault();
+        });
+        return $('form#calculator').submit();
+      });
+    });
+    describe('toggle', function() {
+      it('toggle the calculator and focus the input', function() {
+        spyOn($.fn, 'focus');
+        this.calculator.toggle();
+        expect($('li.calc-main')).toHaveClass('open');
+        return expect($('#calculator_wrapper #calculator_input').focus).toHaveBeenCalled();
+      });
+      return it('toggle the close button on the calculator button', function() {
+        this.calculator.toggle();
+        expect($('.calc')).toHaveClass('closed');
+        this.calculator.toggle();
+        return expect($('.calc')).not.toHaveClass('closed');
+      });
+    });
+    describe('helpToggle', function() {
+      return it('toggle the help overlay', function() {
+        this.calculator.helpToggle();
+        expect($('.help')).toHaveClass('shown');
+        this.calculator.helpToggle();
+        return expect($('.help')).not.toHaveClass('shown');
+      });
+    });
+    return describe('calculate', function() {
+      beforeEach(function() {
+        $('#calculator_input').val('1+2');
+        spyOn($, 'getJSON').andCallFake(function(url, data, callback) {
+          return callback({
+            result: 3
+          });
+        });
+        return this.calculator.calculate();
+      });
+      it('send data to /calculate', function() {
+        return expect($.getJSON).toHaveBeenCalledWith('/calculate', {
+          equation: '1+2'
+        }, jasmine.any(Function));
+      });
+      return it('update the calculator output', function() {
+        return expect($('#calculator_output').val()).toEqual('3');
+      });
+    });
+  });
+
+}).call(this);

templates/coffee/spec/feedback_form_spec.coffee

+describe 'FeedbackForm', ->
+  beforeEach ->
+    loadFixtures 'feedback_form.html'
+
+  describe 'bind', ->
+    beforeEach ->
+      FeedbackForm.bind()
+      spyOn($, 'post').andCallFake (url, data, callback, format) ->
+        callback()
+
+    it 'binds to the #feedback_button', ->
+      expect($('#feedback_button')).toHandle 'click'
+
+    it 'post data to /send_feedback on click', ->
+      $('#feedback_subject').val 'Awesome!'
+      $('#feedback_message').val 'This site is really good.'
+      $('#feedback_button').click()
+
+      expect($.post).toHaveBeenCalledWith '/send_feedback', {
+        subject: 'Awesome!'
+        message: 'This site is really good.'
+        url: window.location.href
+      }, jasmine.any(Function), 'json'
+
+    it 'replace the form with a thank you message', ->
+      $('#feedback_button').click()
+
+      expect($('#feedback_div').html()).toEqual 'Feedback submitted. Thank you'

templates/coffee/spec/feedback_form_spec.js

+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  describe('FeedbackForm', function() {
+    beforeEach(function() {
+      return loadFixtures('feedback_form.html');
+    });
+    return describe('bind', function() {
+      beforeEach(function() {
+        FeedbackForm.bind();
+        return spyOn($, 'post').andCallFake(function(url, data, callback, format) {
+          return callback();
+        });
+      });
+      it('binds to the #feedback_button', function() {
+        return expect($('#feedback_button')).toHandle('click');
+      });
+      it('post data to /send_feedback on click', function() {
+        $('#feedback_subject').val('Awesome!');
+        $('#feedback_message').val('This site is really good.');
+        $('#feedback_button').click();
+        return expect($.post).toHaveBeenCalledWith('/send_feedback', {
+          subject: 'Awesome!',
+          message: 'This site is really good.',
+          url: window.location.href
+        }, jasmine.any(Function), 'json');
+      });
+      return it('replace the form with a thank you message', function() {
+        $('#feedback_button').click();
+        return expect($('#feedback_div').html()).toEqual('Feedback submitted. Thank you');
+      });
+    });
+  });
+
+}).call(this);

templates/coffee/spec/helper.coffee

+jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/"

templates/coffee/spec/helper.js

+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/";
+
+}).call(this);

templates/coffee/src/calculator.coffee

+class window.Calculator
+  @bind: ->
+    calculator = new Calculator
+    $('.calc').click calculator.toggle
+    $('form#calculator').submit(calculator.calculate).submit (e) ->
+      e.preventDefault()
+    $('div.help-wrapper a').hover(calculator.helpToggle).click (e) ->
+      e.preventDefault()
+
+  toggle: ->
+    $('li.calc-main').toggleClass 'open'
+    $('#calculator_wrapper #calculator_input').focus()
+    $('.calc').toggleClass 'closed'
+
+  helpToggle: ->
+    $('.help').toggleClass 'shown'
+
+  calculate: ->
+    $.getJSON '/calculate', { equation: $('#calculator_input').val() }, (data) ->
+      $('#calculator_output').val(data.result)

templates/coffee/src/feedback_form.coffee

+class window.FeedbackForm
+  @bind: ->
+    $('#feedback_button').click ->
+      data =
+        subject: $('#feedback_subject').val()
+        message: $('#feedback_message').val()
+        url: window.location.href
+      $.post '/send_feedback', data, ->
+        $('#feedback_div').html 'Feedback submitted. Thank you'
+      ,'json'

templates/coffee/src/main.coffee

+$ ->
+  $.ajaxSetup
+    headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
+
+  Calculator.bind()
+  FeedbackForm.bind()
+  $("a[rel*=leanModal]").leanModal()

templates/main.html

@@ -9,6 +9,7 @@
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>
   <script type="text/javascript" src="${ settings.LIB_URL }swfobject/swfobject.js"></script>
+  <script type="text/javascript" src="/static/js/application.js"></script>
 
   <!--[if lt IE 9]>
   <script src="/static/js/html5shiv.js"></script>
@@ -90,20 +91,18 @@
       </nav>
   </footer>
 
-    <div id="feedback_div" class="leanModal_box">
-      <h1>Feedback for MITx</h1>
-      <p>Found a bug? Got an idea for improving our system? Let us know.</p>
-
-      <form>
-        <ol>
-          <li><label>Subject:</label> <input type="text" id="feedback_subject"></li>
-          <li><label>Feedback: </label><textarea id="feedback_message"></textarea></li>
-          <li><input id="feedback_button" type="button" value="Submit"></li>
-        </ol>
-      </form>
-
-    </div>
+  <div id="feedback_div" class="leanModal_box">
+    <h1>Feedback for MITx</h1>
+    <p>Found a bug? Got an idea for improving our system? Let us know.</p>
 
+    <form>
+      <ol>
+        <li><label>Subject:</label> <input type="text" id="feedback_subject"></li>
+        <li><label>Feedback: </label><textarea id="feedback_message"></textarea></li>
+        <li><input id="feedback_button" type="button" value="Submit"></li>
+      </ol>
+    </form>
+  </div>
 
   <script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
   <script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
@@ -112,52 +111,7 @@
   <script type="text/javascript" src="/static/js/video_player.js"></script>
   <script type="text/javascript" src="/static/js/schematic.js"></script>
   <script type="text/javascript" src="/static/js/cktsim.js"></script>
- 
-
-<script>
-  // Feedback form
-$(function() {
-    $("#feedback_button").click(function(){
-      postJSON("/send_feedback", {"subject":$("#feedback_subject").attr("value"),
-        "url":document.URL,
-        "message":$("#feedback_message").attr("value")},
-        function(data){
-        $("#feedback_subject").attr("value","");
-        $("#feedback_message").attr("value","");
-        $("#feedback_div").html("Feedback submitted. Thank you");
-        });
-      });
-
-// Calculator
-
-    $(".calc").click(function(){
-      $("li.calc-main").toggleClass('open');
-      $("#calculator_wrapper #calculator_input").focus();
-      $(this).toggleClass("closed");
-      return false;
-      });
-
-    $("div.help-wrapper a").hover(function(){
-      $(".help").toggleClass("shown");
-
-      });
-
-    $("div.help-wrapper a").click(function(){
-      return false;
-      });
-    $("form#calculator").submit(function(e){
-      e.preventDefault();
-      $.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
-        function(data){
-        $("#calculator_output").attr("value",data.result);
-        });
-      });
-
-    $("a[rel*=leanModal]").leanModal();
-
-    });
-</script>
 
-<%block name="js_extra"/>
+  <%block name="js_extra"/>
 </body>
 </html>