From b97955965ae50ee3c0085b1552adf38e6e9b2c84 Mon Sep 17 00:00:00 2001 From: cahrens Date: Wed, 9 Jan 2013 09:39:46 -0500 Subject: [PATCH] Warn user when going to XML Editor. Cleanup and comments. --- cms/templates/widgets/problem-edit.html | 5 +- .../xmodule/js/src/problem/edit.coffee | 83 +++++++++++++------ 2 files changed, 61 insertions(+), 27 deletions(-) diff --git a/cms/templates/widgets/problem-edit.html b/cms/templates/widgets/problem-edit.html index a6ef824ce6..244a1bea76 100644 --- a/cms/templates/widgets/problem-edit.html +++ b/cms/templates/widgets/problem-edit.html @@ -1,7 +1,6 @@ <%include file="metadata-edit.html" />
- %if markdown != '' or data == '\n\n':
+ %if markdown != '' or data == '\n\n': %endif diff --git a/common/lib/xmodule/xmodule/js/src/problem/edit.coffee b/common/lib/xmodule/xmodule/js/src/problem/edit.coffee index 465bd33f86..7de33db726 100644 --- a/common/lib/xmodule/xmodule/js/src/problem/edit.coffee +++ b/common/lib/xmodule/xmodule/js/src/problem/edit.coffee @@ -6,9 +6,10 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor @selectTemplate: "[[incorrect, (correct), incorrect]]\n" constructor: (element) -> - $body.on('click', '.editor-tabs .tab', @changeEditor) - $body.on('click', '.editor-bar a', @onToolbarButton); - $body.on('click', '.cheatsheet-toggle', @toggleCheatsheet); + @element = element + @element.on('click', '.xml-tab', @showXMLEditor) + @element.on('click', '.format-buttons a', @onToolbarButton); + @element.on('click', '.cheatsheet-toggle', @toggleCheatsheet); @xml_editor = CodeMirror.fromTextArea($(".xml-box", element)[0], { mode: "xml" @@ -17,28 +18,50 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor }) @current_editor = @xml_editor - if $(".markdown-box", element).length != 0 + if $(".markdown-box", @element).length != 0 @markdown_editor = CodeMirror.fromTextArea($(".markdown-box", element)[0], { lineWrapping: true mode: null }) @setCurrentEditor(@markdown_editor) + else + @hideMarkdownElements() - changeEditor: (e) => + ### + Hides the toolbar buttons, as they only apply to the markdown editor. + ### + hideMarkdownElements: () -> + $(@element.find('.editor-bar')).hide() + $(@element.find('.editor-tabs')).hide() + + ### + User has clicked to show the XML editor. Before XML editor is swapped in, + the user will need to confirm the one-way conversion. + ### + showXMLEditor: (e) => e.preventDefault(); - if not $(e.currentTarget).hasClass('current') - $('.editor-tabs .current').removeClass('current') - $(e.currentTarget).addClass('current') - if (@current_editor == @xml_editor) - @setCurrentEditor(@markdown_editor) - else - @setCurrentEditor(@xml_editor) - @xml_editor.setValue(MarkdownEditingDescriptor.markdownToXml(@markdown_editor.getValue())) + if @confirmConversionToXml() + @xml_editor.setValue(MarkdownEditingDescriptor.markdownToXml(@markdown_editor.getValue())) + @setCurrentEditor(@xml_editor) + # Need this to get line numbers to display properly (and put caret position to 0) + @xml_editor.setCursor(0) + @xml_editor.refresh() + @hideMarkdownElements() + ### + Have the user confirm the one-way conversion to XML. + Returns true if the user clicked OK, else false. + ### + confirmConversionToXml: -> +# TODO: use something besides a JavaScript confirm dialog? + return confirm("If you convert to the XML source representation, you cannot go back to using markdown.\n\nProceed with conversion to XML?") + + ### + Event listener for toolbar buttons (only possible when markdown editor is visible). + ### onToolbarButton: (e) => e.preventDefault(); selection = @markdown_editor.getSelection() - revisedSelection = null switch $(e.currentTarget).attr('class') when "multiple-choice-button" then revisedSelection = MarkdownEditingDescriptor.insertMultipleChoice(selection) @@ -46,33 +69,41 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor when "number-button" then revisedSelection = MarkdownEditingDescriptor.insertNumberInput(selection) when "checks-button" then revisedSelection = MarkdownEditingDescriptor.insertCheckboxChoice(selection) when "dropdown-button" then revisedSelection = MarkdownEditingDescriptor.insertSelect(selection) - else # do nothing + else # ignore click if revisedSelection != null @markdown_editor.replaceSelection(revisedSelection) @markdown_editor.focus() + ### + Event listener for toggling cheatsheet (only possible when markdown editor is visible). + ### toggleCheatsheet: (e) => e.preventDefault(); - -# TODO: don't base off of current_editor - if !$(@current_editor.getWrapperElement()).find('.simple-editor-cheatsheet')[0] + if !$(@markdown_editor.getWrapperElement()).find('.simple-editor-cheatsheet')[0] @cheatsheet = $($('#simple-editor-cheatsheet').html()) - $(@current_editor.getWrapperElement()).append(@cheatsheet) + $(@markdown_editor.getWrapperElement()).append(@cheatsheet) setTimeout (=> @cheatsheet.toggleClass('shown')), 10 + ### + Stores the current editor and hides the one that is not displayed. + ### setCurrentEditor: (editor) -> $(@current_editor.getWrapperElement()).hide() @current_editor = editor $(@current_editor.getWrapperElement()).show() $(@current_editor).focus(); + ### + Called when save is called. Listeners are unregistered because editing the block again will + result in a new instance of the descriptor. Note that this is NOT the case for cancel-- + when cancel is called the instance of the descriptor is reused if edit is selected again. + ### save: -> - $body.off('click', '.editor-tabs .tab', @changeEditor) - $body.off('click', '.editor-bar a', @onToolbarButton) - $body.off('click', '.cheatsheet-toggle', @toggleCheatsheet) - # TODO when logic is in place to remove the markdown if xml is edited, ensure this doesn't overwrite that + @element.off('click', '.xml-tab', @changeEditor) + @element.off('click', '.format-buttons a', @onToolbarButton) + @element.off('click', '.cheatsheet-toggle', @toggleCheatsheet) if @current_editor == @markdown_editor { data: MarkdownEditingDescriptor.markdownToXml(@markdown_editor.getValue()) @@ -80,7 +111,11 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor markdown: @markdown_editor.getValue() } else - data: @xml_editor.getValue() + { + data: @xml_editor.getValue() + metadata: + markdown: null + } @insertMultipleChoice: (selectedText) -> return MarkdownEditingDescriptor.insertGenericChoice(selectedText, '(', ')', MarkdownEditingDescriptor.multipleChoiceTemplate)