From 00ebcf7fe72340b077783075067a1534d0ef07d7 Mon Sep 17 00:00:00 2001 From: cahrens Date: Fri, 11 Oct 2013 14:36:09 -0400 Subject: [PATCH] Move index code into index.js. --- cms/static/js/base.js | 180 +----------------------- cms/static/js/index.js | 161 +++++++++++++++++++++ cms/static/js/utils/cancel_on_escape.js | 17 +++ cms/templates/index.html | 2 +- 4 files changed, 184 insertions(+), 176 deletions(-) create mode 100644 cms/static/js/index.js create mode 100644 cms/static/js/utils/cancel_on_escape.js diff --git a/cms/static/js/base.js b/cms/static/js/base.js index e59d49fc46..4fd340ad7b 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -1,6 +1,6 @@ require(["domReady", "jquery", "underscore", "gettext", "js/views/feedback_notification", "js/views/feedback_prompt", - "jquery.ui", "jquery.timepicker", "jquery.leanModal", "jquery.form", "jquery.smoothScroll"], - function(domReady, $, _, gettext, NotificationView, PromptView) { + "js/utils/cancel_on_escape", "jquery.ui", "jquery.timepicker", "jquery.leanModal", "jquery.form", "jquery.smoothScroll"], + function(domReady, $, _, gettext, NotificationView, PromptView, CancelOnEscape) { var $body; var $modal; @@ -123,8 +123,6 @@ domReady(function() { $('.sync-date').bind('click', syncReleaseDate); - $('.new-course-button').bind('click', addNewCourse); - // section date setting $('.set-publish-date').bind('click', setSectionScheduleDate); $('.edit-section-start-cancel').bind('click', cancelSetSectionScheduleDate); @@ -446,19 +444,9 @@ function addNewSection(e) { $newSection.find('.new-section-name').focus().select(); $newSection.find('.section-name-form').bind('submit', saveNewSection); $cancelButton.bind('click', cancelNewSection); - $body.bind('keyup', { - $cancelButton: $cancelButton - }, checkForCancel); + CancelOnEscape($cancelButton); } -function checkForCancel(e) { - if (e.which == 27) { - $body.unbind('keyup', checkForCancel); - e.data.$cancelButton.click(); - } -} - - function saveNewSection(e) { e.preventDefault(); @@ -475,7 +463,7 @@ function saveNewSection(e) { $.post('/create_item', { 'parent_location': parent, 'category': category, - 'display_name': display_name, + 'display_name': display_name }, function(data) { @@ -489,162 +477,6 @@ function cancelNewSection(e) { $(this).parents('section.new-section').remove(); } -function addNewCourse(e) { - e.preventDefault(); - $('.new-course-button').addClass('is-disabled'); - $('.new-course-save').addClass('is-disabled'); - var $newCourse = $('.wrapper-create-course').addClass('is-shown'); - var $cancelButton = $newCourse.find('.new-course-cancel'); - var $courseName = $('.new-course-name'); - $courseName.focus().select(); - $('.new-course-save').on('click', saveNewCourse); - $cancelButton.bind('click', cancelNewCourse); - $body.bind('keyup', { - $cancelButton: $cancelButton - }, checkForCancel); - - // Check that a course (org, number, run) doesn't use any special characters - var validateCourseItemEncoding = function(item) { - var required = validateRequiredField(item); - if(required) { - return required; - } - if(item !== encodeURIComponent(item)) { - return gettext('Please do not use any spaces or special characters in this field.'); - } - return ''; - }; - - // Ensure that org/course_num/run < 65 chars. - var validateTotalCourseItemsLength = function() { - var totalLength = _.reduce( - ['.new-course-org', '.new-course-number', '.new-course-run'], - function(sum, ele) { - return sum + $(ele).val().length; - }, 0 - ); - if(totalLength > 65) { - $('.wrap-error').addClass('is-shown'); - $('#course_creation_error').html('

' + gettext('The combined length of the organization, course number, and course run fields cannot be more than 65 characters.') + '

'); - $('.new-course-save').addClass('is-disabled'); - } - else { - $('.wrap-error').removeClass('is-shown'); - } - }; - - // Handle validation asynchronously - _.each( - ['.new-course-org', '.new-course-number', '.new-course-run'], - function(ele) { - var $ele = $(ele); - $ele.on('keyup', function(event) { - // Don't bother showing "required field" error when - // the user tabs into a new field; this is distracting - // and unnecessary - if(event.keyCode === 9) { - return; - } - var error = validateCourseItemEncoding($ele.val()); - setNewCourseFieldInErr($ele.parent('li'), error); - validateTotalCourseItemsLength(); - }); - } - ); - var $name = $('.new-course-name'); - $name.on('keyup', function() { - var error = validateRequiredField($name.val()); - setNewCourseFieldInErr($name.parent('li'), error); - validateTotalCourseItemsLength(); - }); -} - -function validateRequiredField(msg) { - return msg.length === 0 ? gettext('Required field.') : ''; -} - -function setNewCourseFieldInErr(el, msg) { - if(msg) { - el.addClass('error'); - el.children('span.tip-error').addClass('is-showing').removeClass('is-hiding').text(msg); - $('.new-course-save').addClass('is-disabled'); - } - else { - el.removeClass('error'); - el.children('span.tip-error').addClass('is-hiding').removeClass('is-showing'); - // One "error" div is always present, but hidden or shown - if($('.error').length === 1) { - $('.new-course-save').removeClass('is-disabled'); - } - } -}; - -function saveNewCourse(e) { - e.preventDefault(); - - // One final check for empty values - var errors = _.reduce( - ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'], - function(acc, ele) { - var $ele = $(ele); - var error = validateRequiredField($ele.val()); - setNewCourseFieldInErr($ele.parent('li'), error); - return error ? true : acc; - }, - false - ); - - if(errors) { - return; - } - - var $newCourseForm = $(this).closest('#create-course-form'); - var display_name = $newCourseForm.find('.new-course-name').val(); - var org = $newCourseForm.find('.new-course-org').val(); - var number = $newCourseForm.find('.new-course-number').val(); - var run = $newCourseForm.find('.new-course-run').val(); - - analytics.track('Created a Course', { - 'org': org, - 'number': number, - 'display_name': display_name, - 'run': run - }); - - $.post('/create_new_course', { - 'org': org, - 'number': number, - 'display_name': display_name, - 'run': run - }, - function(data) { - if (data.id !== undefined) { - window.location = '/' + data.id.replace(/.*:\/\//, ''); - } else if (data.ErrMsg !== undefined) { - $('.wrap-error').addClass('is-shown'); - $('#course_creation_error').html('

' + data.ErrMsg + '

'); - $('.new-course-save').addClass('is-disabled'); - } - } - ); -} - -function cancelNewCourse(e) { - e.preventDefault(); - $('.new-course-button').removeClass('is-disabled'); - $('.wrapper-create-course').removeClass('is-shown'); - // Clear out existing fields and errors - _.each( - ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'], - function(field) { - $(field).val(''); - } - ); - $('#course_creation_error').html(''); - $('.wrap-error').removeClass('is-shown'); - $('.new-course-save').off('click'); -} - function addNewSubsection(e) { e.preventDefault(); var $section = $(this).closest('.courseware-section'); @@ -662,9 +494,7 @@ function addNewSubsection(e) { $newSubsection.find('.new-subsection-form').bind('submit', saveNewSubsection); $cancelButton.bind('click', cancelNewSubsection); - $body.bind('keyup', { - $cancelButton: $cancelButton - }, checkForCancel); + CancelOnEscape($cancelButton); } function saveNewSubsection(e) { diff --git a/cms/static/js/index.js b/cms/static/js/index.js new file mode 100644 index 0000000000..f2688f3dc0 --- /dev/null +++ b/cms/static/js/index.js @@ -0,0 +1,161 @@ +require(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape"], + function (domReady, $, _, CancelOnEscape) { + var saveNewCourse = function (e) { + e.preventDefault(); + + // One final check for empty values + var errors = _.reduce( + ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'], + function (acc, ele) { + var $ele = $(ele); + var error = validateRequiredField($ele.val()); + setNewCourseFieldInErr($ele.parent('li'), error); + return error ? true : acc; + }, + false + ); + + if (errors) { + return; + } + + var $newCourseForm = $(this).closest('#create-course-form'); + var display_name = $newCourseForm.find('.new-course-name').val(); + var org = $newCourseForm.find('.new-course-org').val(); + var number = $newCourseForm.find('.new-course-number').val(); + var run = $newCourseForm.find('.new-course-run').val(); + + analytics.track('Created a Course', { + 'org': org, + 'number': number, + 'display_name': display_name, + 'run': run + }); + + $.post('/create_new_course', { + 'org': org, + 'number': number, + 'display_name': display_name, + 'run': run + }, + function (data) { + if (data.id !== undefined) { + window.location = '/' + data.id.replace(/.*:\/\//, ''); + } else if (data.ErrMsg !== undefined) { + $('.wrap-error').addClass('is-shown'); + $('#course_creation_error').html('

' + data.ErrMsg + '

'); + $('.new-course-save').addClass('is-disabled'); + } + } + ); + }; + + var cancelNewCourse = function (e) { + e.preventDefault(); + $('.new-course-button').removeClass('is-disabled'); + $('.wrapper-create-course').removeClass('is-shown'); + // Clear out existing fields and errors + _.each( + ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'], + function (field) { + $(field).val(''); + } + ); + $('#course_creation_error').html(''); + $('.wrap-error').removeClass('is-shown'); + $('.new-course-save').off('click'); + }; + + var addNewCourse = function (e) { + e.preventDefault(); + $('.new-course-button').addClass('is-disabled'); + $('.new-course-save').addClass('is-disabled'); + var $newCourse = $('.wrapper-create-course').addClass('is-shown'); + var $cancelButton = $newCourse.find('.new-course-cancel'); + var $courseName = $('.new-course-name'); + $courseName.focus().select(); + $('.new-course-save').on('click', saveNewCourse); + $cancelButton.bind('click', cancelNewCourse); + CancelOnEscape($cancelButton); + + // Check that a course (org, number, run) doesn't use any special characters + var validateCourseItemEncoding = function (item) { + var required = validateRequiredField(item); + if (required) { + return required; + } + if (item !== encodeURIComponent(item)) { + return gettext('Please do not use any spaces or special characters in this field.'); + } + return ''; + }; + + // Ensure that org/course_num/run < 65 chars. + var validateTotalCourseItemsLength = function () { + var totalLength = _.reduce( + ['.new-course-org', '.new-course-number', '.new-course-run'], + function (sum, ele) { + return sum + $(ele).val().length; + }, 0 + ); + if (totalLength > 65) { + $('.wrap-error').addClass('is-shown'); + $('#course_creation_error').html('

' + gettext('The combined length of the organization, course number, and course run fields cannot be more than 65 characters.') + '

'); + $('.new-course-save').addClass('is-disabled'); + } + else { + $('.wrap-error').removeClass('is-shown'); + } + }; + + // Handle validation asynchronously + _.each( + ['.new-course-org', '.new-course-number', '.new-course-run'], + function (ele) { + var $ele = $(ele); + $ele.on('keyup', function (event) { + // Don't bother showing "required field" error when + // the user tabs into a new field; this is distracting + // and unnecessary + if (event.keyCode === 9) { + return; + } + var error = validateCourseItemEncoding($ele.val()); + setNewCourseFieldInErr($ele.parent('li'), error); + validateTotalCourseItemsLength(); + }); + } + ); + var $name = $('.new-course-name'); + $name.on('keyup', function () { + var error = validateRequiredField($name.val()); + setNewCourseFieldInErr($name.parent('li'), error); + validateTotalCourseItemsLength(); + }); + }; + + var validateRequiredField = function (msg) { + return msg.length === 0 ? gettext('Required field.') : ''; + }; + + var setNewCourseFieldInErr = function (el, msg) { + if(msg) { + el.addClass('error'); + el.children('span.tip-error').addClass('is-showing').removeClass('is-hiding').text(msg); + $('.new-course-save').addClass('is-disabled'); + } + else { + el.removeClass('error'); + el.children('span.tip-error').addClass('is-hiding').removeClass('is-showing'); + // One "error" div is always present, but hidden or shown + if($('.error').length === 1) { + $('.new-course-save').removeClass('is-disabled'); + } + } + }; + + + domReady(function () { + $('.new-course-button').bind('click', addNewCourse); + }); + }); diff --git a/cms/static/js/utils/cancel_on_escape.js b/cms/static/js/utils/cancel_on_escape.js new file mode 100644 index 0000000000..febfc42bb4 --- /dev/null +++ b/cms/static/js/utils/cancel_on_escape.js @@ -0,0 +1,17 @@ +define(["jquery"], function($) { + var $body = $('body'); + var checkForCancel = function (e) { + if (e.which == 27) { + $body.unbind('keyup', checkForCancel); + e.data.$cancelButton.click(); + } + }; + + var cancelOnEscape = function (cancelButton) { + $body.bind('keyup', { + $cancelButton: cancelButton + }, checkForCancel); + }; + + return cancelOnEscape; +}); diff --git a/cms/templates/index.html b/cms/templates/index.html index 794310901d..82183c10b7 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -7,7 +7,7 @@ <%block name="jsextra">