From eebef1e6474ef3302e6fd7078c3ce80d5772e238 Mon Sep 17 00:00:00 2001 From: cahrens Date: Fri, 22 Mar 2013 15:32:13 -0400 Subject: [PATCH] Don't save subsection and unit names until the change event. Fixes bugs #18 and #228. --- cms/static/coffee/src/views/unit.coffee | 25 +----- cms/static/js/base.js | 106 +----------------------- cms/static/sass/views/_subsection.scss | 78 ----------------- cms/templates/edit_subsection.html | 12 --- 4 files changed, 7 insertions(+), 214 deletions(-) diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee index 13c7e53f02..42127b2800 100644 --- a/cms/static/coffee/src/views/unit.coffee +++ b/cms/static/coffee/src/views/unit.coffee @@ -167,7 +167,7 @@ class CMS.Views.UnitEdit extends Backbone.View class CMS.Views.UnitEdit.NameEdit extends Backbone.View events: - "keyup .unit-display-name-input": "saveName" + 'change .unit-display-name-input': 'saveName' initialize: => @model.on('change:metadata', @render) @@ -190,29 +190,10 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View # Treat the metadata dictionary as immutable metadata = $.extend({}, @model.get('metadata')) metadata.display_name = @$('.unit-display-name-input').val() + @model.save(metadata: metadata) + # Update name shown in the right-hand side location summary. $('.unit-location .editing .unit-name').html(metadata.display_name) - inputField = this.$el.find('input') - - # add a spinner - @$spinner.css({ - 'position': 'absolute', - 'top': Math.floor(inputField.position().top + (inputField.outerHeight() / 2) + 3), - 'left': inputField.position().left + inputField.outerWidth() - 24, - 'margin-top': '-10px' - }); - inputField.after(@$spinner); - @$spinner.fadeIn(10) - - # save the name after a slight delay - if @timer - clearTimeout @timer - @timer = setTimeout( => - @model.save(metadata: metadata) - @timer = null - @$spinner.delay(500).fadeOut(150) - , 500) - class CMS.Views.UnitEdit.LocationState extends Backbone.View initialize: => @model.on('change:state', @render) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index d8b32cb0e8..7fbe1f6f6a 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -95,9 +95,9 @@ $(document).ready(function () { }); $('.toggle-button-sections').bind('click', toggleSections); - // autosave when a field is updated on the subsection page - $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue); - $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function (i) { + // autosave when leaving input field + $body.on('change', '.subsection-display-name-input', saveSubsection); + $('.subsection-display-name-input').each(function () { this.val = $(this).val(); }); $("#start_date, #start_time, #due_date, #due_time").bind('change', autosaveInput); @@ -113,11 +113,6 @@ $(document).ready(function () { // add new/delete subsection $('.new-subsection-item').bind('click', addNewSubsection); $('.delete-subsection-button').bind('click', deleteSubsection); - // add/remove policy metadata button click handlers - $('.add-policy-data').bind('click', addPolicyMetadata); - $('.remove-policy-data').bind('click', removePolicyMetadata); - $body.on('click', '.policy-list-element .save-button', savePolicyMetadata); - $body.on('click', '.policy-list-element .cancel-button', cancelPolicyMetadata); $('.sync-date').bind('click', syncReleaseDate); @@ -156,11 +151,6 @@ $(document).ready(function () { }); }); -// function collapseAll(e) { -// $('.branch').addClass('collapsed'); -// $('.expand-collapse-icon').removeClass('collapse').addClass('expand'); -// } - function toggleSections(e) { e.preventDefault(); @@ -219,56 +209,6 @@ function syncReleaseDate(e) { $("#start_time").val(""); } -function addPolicyMetadata(e) { - e.preventDefault(); - var template = $('#add-new-policy-element-template > li'); - var newNode = template.clone(); - var _parent_el = $(this).parent('ol:.policy-list'); - newNode.insertBefore('.add-policy-data'); - $('.remove-policy-data').bind('click', removePolicyMetadata); - newNode.find('.policy-list-name').focus(); -} - -function savePolicyMetadata(e) { - e.preventDefault(); - - var $policyElement = $(this).parents('.policy-list-element'); - saveSubsection() - $policyElement.removeClass('new-policy-list-element'); - $policyElement.find('.policy-list-name').attr('disabled', 'disabled'); - $policyElement.removeClass('editing'); -} - -function cancelPolicyMetadata(e) { - e.preventDefault(); - - var $policyElement = $(this).parents('.policy-list-element'); - if (!$policyElement.hasClass('editing')) { - $policyElement.remove(); - } else { - $policyElement.removeClass('new-policy-list-element'); - $policyElement.find('.policy-list-name').val($policyElement.data('currentValues')[0]); - $policyElement.find('.policy-list-value').val($policyElement.data('currentValues')[1]); - } - $policyElement.removeClass('editing'); -} - -function removePolicyMetadata(e) { - e.preventDefault(); - - if (!confirm('Are you sure you wish to delete this item. It cannot be reversed!')) - return; - - policy_name = $(this).data('policy-name'); - var _parent_el = $(this).parent('li:.policy-list-element'); - if ($(_parent_el).hasClass("new-policy-list-element")) { - _parent_el.remove(); - } else { - _parent_el.appendTo("#policy-to-delete"); - } - saveSubsection() -} - function getEdxTimeFromDateTimeVals(date_val, time_val, format) { var edxTimeStr = null; @@ -294,31 +234,6 @@ function getEdxTimeFromDateTimeInputs(date_id, time_id, format) { return getEdxTimeFromDateTimeVals(input_date, input_time, format); } -function checkForNewValue(e) { - if ($(this).parents('.new-policy-list-element')[0]) { - return; - } - - if (this.val) { - this.hasChanged = this.val != $(this).val(); - } else { - this.hasChanged = false; - } - - this.val = $(this).val(); - if (this.hasChanged) { - if (this.saveTimer) { - clearTimeout(this.saveTimer); - } - - this.saveTimer = setTimeout(function () { - $changedInput = $(e.target); - saveSubsection(); - this.saveTimer = null; - }, 500); - } -} - function autosaveInput(e) { if (this.saveTimer) { clearTimeout(this.saveTimer); @@ -332,6 +247,7 @@ function autosaveInput(e) { } function saveSubsection() { + // Spinner is no longer used by subsection name, but is still used by date and time pickers on the right. if ($changedInput && !$changedInput.hasClass('no-spinner')) { $spinner.css({ 'position': 'absolute', @@ -354,20 +270,6 @@ function saveSubsection() { metadata[$(el).data("metadata-name")] = el.value; } - // now add 'free-formed' metadata which are presented to the user as dual input fields (name/value) - $('ol.policy-list > li.policy-list-element').each(function (i, element) { - var name = $(element).children('.policy-list-name').val(); - metadata[name] = $(element).children('.policy-list-value').val(); - }); - - // now add any 'removed' policy metadata which is stored in a separate hidden div - // 'null' presented to the server means 'remove' - $("#policy-to-delete > li.policy-list-element").each(function (i, element) { - var name = $(element).children('.policy-list-name').val(); - if (name != "") - metadata[name] = null; - }); - // Piece back together the date/time UI elements into one date/time string // NOTE: our various "date/time" metadata elements don't always utilize the same formatting string // so make sure we're passing back the correct format diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss index 3c6bfa9f11..cd29759db8 100644 --- a/cms/static/sass/views/_subsection.scss +++ b/cms/static/sass/views/_subsection.scss @@ -172,89 +172,11 @@ body.course.subsection { font-size: 14px; } - .unit-subtitle { - display: block; - width: 100%; - } - .sortable-unit-list { ol { @include tree-view; } } - - .policy-list { - input[disabled] { - border: none; - @include box-shadow(none); - } - - .policy-list-name { - margin-right: 5px; - margin-bottom: 10px; - } - - .policy-list-value { - width: 320px; - margin-right: 10px; - } - } - - .policy-list-element { - .save-button, - .cancel-button { - display: none; - } - - .edit-icon { - margin-right: 8px; - } - - &.editing, - &.new-policy-list-element { - .policy-list-name, - .policy-list-value { - border: 1px solid #b0b6c2; - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); - background-color: #edf1f5; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); - } - } - } - - .new-policy-list-element { - padding: 10px 10px 0; - margin: 0 -10px 10px; - border-radius: 3px; - background: $mediumGrey; - - .save-button { - @include blue-button; - margin-bottom: 10px; - } - - .cancel-button { - @include white-button; - } - - .edit-icon { - display: none; - } - - .delete-icon { - display: none; - } - } - - .new-policy-item { - margin: 10px 0; - - .plus-icon-small { - position: relative; - top: -1px; - vertical-align: middle; - } - } } .subsection-name-input { diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html index 42ddc39be1..eb5a9a9824 100644 --- a/cms/templates/edit_subsection.html +++ b/cms/templates/edit_subsection.html @@ -31,18 +31,6 @@ - - - -

Subsection Settings