From f6acab9d9ef46cacbd3cc47946bf98ede4bb341f Mon Sep 17 00:00:00 2001 From: cahrens Date: Mon, 17 Mar 2014 12:33:07 -0400 Subject: [PATCH] Modify paths for location of CodeMirror files. --- .../xmodule/xmodule/js/src/html/edit.coffee | 21 +-- .../CodeMirror/addons/dialog/dialog.css | 32 +++++ .../vendor/CodeMirror/addons/dialog/dialog.js | 122 ++++++++++++++++++ .../tiny_mce/plugins/codemirror/source.html | 27 ++-- 4 files changed, 180 insertions(+), 22 deletions(-) create mode 100755 common/static/js/vendor/CodeMirror/addons/dialog/dialog.css create mode 100755 common/static/js/vendor/CodeMirror/addons/dialog/dialog.js diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index 9b5ff85486..ccd95c4144 100644 --- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee +++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee @@ -32,28 +32,31 @@ class @HTMLEditingDescriptor # TODO: we should share this CSS with studio (and LMS) content_css : "#{baseUrl}/css/tiny-mce.css", formats : { - # Disable h4, h5, and h6 styles as we don't have CSS for them. - # TODO: this doesn't seem to be working with the upgrade. + # Disable h4, h5, and h6 styles as we don't have CSS for them. + # TODO: this doesn't seem to be working with the upgrade. h4: {}, h5: {}, h6: {}, - # tinyMCE does block level for code by default + # tinyMCE does block level for code by default code: {inline: 'code'} }, # Disable visual aid on borderless table. - visual:false, - plugins: "textcolor, link, image", + visual: false, + plugins: "textcolor, link, image, codemirror", + codemirror: { + path: "#{baseUrl}/js/vendor/CodeMirror" + }, # We may want to add "styleselect" when we collect all styles used throughout the LMS # Can have a single toolbar by just specifying "toolbar". Splitting for now so all are visible. - toolbar1 : "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent", - toolbar2 : "link unlink image | blockquote wrapAsCode ", + toolbar1: "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent", + toolbar2: "link unlink image | blockquote wrapAsCode code", # TODO: i18n - block_formats : "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3", + block_formats: "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3", width: '100%', height: '400px', menubar: false, statusbar: false, - setup : @setupTinyMCE, + setup: @setupTinyMCE, # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered. # The tinyMCE callback passes in the editor as a paramter. init_instance_callback: @initInstanceCallback diff --git a/common/static/js/vendor/CodeMirror/addons/dialog/dialog.css b/common/static/js/vendor/CodeMirror/addons/dialog/dialog.css new file mode 100755 index 0000000000..2e7c0fc9b8 --- /dev/null +++ b/common/static/js/vendor/CodeMirror/addons/dialog/dialog.css @@ -0,0 +1,32 @@ +.CodeMirror-dialog { + position: absolute; + left: 0; right: 0; + background: white; + z-index: 15; + padding: .1em .8em; + overflow: hidden; + color: #333; +} + +.CodeMirror-dialog-top { + border-bottom: 1px solid #eee; + top: 0; +} + +.CodeMirror-dialog-bottom { + border-top: 1px solid #eee; + bottom: 0; +} + +.CodeMirror-dialog input { + border: none; + outline: none; + background: transparent; + width: 20em; + color: inherit; + font-family: monospace; +} + +.CodeMirror-dialog button { + font-size: 70%; +} diff --git a/common/static/js/vendor/CodeMirror/addons/dialog/dialog.js b/common/static/js/vendor/CodeMirror/addons/dialog/dialog.js new file mode 100755 index 0000000000..41d7bf8663 --- /dev/null +++ b/common/static/js/vendor/CodeMirror/addons/dialog/dialog.js @@ -0,0 +1,122 @@ +// Open simple dialogs on top of an editor. Relies on dialog.css. + +(function() { + function dialogDiv(cm, template, bottom) { + var wrap = cm.getWrapperElement(); + var dialog; + dialog = wrap.appendChild(document.createElement("div")); + if (bottom) { + dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom"; + } else { + dialog.className = "CodeMirror-dialog CodeMirror-dialog-top"; + } + if (typeof template == "string") { + dialog.innerHTML = template; + } else { // Assuming it's a detached DOM element. + dialog.appendChild(template); + } + return dialog; + } + + function closeNotification(cm, newVal) { + if (cm.state.currentNotificationClose) + cm.state.currentNotificationClose(); + cm.state.currentNotificationClose = newVal; + } + + CodeMirror.defineExtension("openDialog", function(template, callback, options) { + closeNotification(this, null); + var dialog = dialogDiv(this, template, options && options.bottom); + var closed = false, me = this; + function close() { + if (closed) return; + closed = true; + dialog.parentNode.removeChild(dialog); + } + var inp = dialog.getElementsByTagName("input")[0], button; + if (inp) { + if (options && options.value) inp.value = options.value; + CodeMirror.on(inp, "keydown", function(e) { + if (options && options.onKeyDown && options.onKeyDown(e, inp.value, close)) { return; } + if (e.keyCode == 13 || e.keyCode == 27) { + CodeMirror.e_stop(e); + close(); + me.focus(); + if (e.keyCode == 13) callback(inp.value); + } + }); + if (options && options.onKeyUp) { + CodeMirror.on(inp, "keyup", function(e) {options.onKeyUp(e, inp.value, close);}); + } + if (options && options.value) inp.value = options.value; + inp.focus(); + CodeMirror.on(inp, "blur", close); + } else if (button = dialog.getElementsByTagName("button")[0]) { + CodeMirror.on(button, "click", function() { + close(); + me.focus(); + }); + button.focus(); + CodeMirror.on(button, "blur", close); + } + return close; + }); + + CodeMirror.defineExtension("openConfirm", function(template, callbacks, options) { + closeNotification(this, null); + var dialog = dialogDiv(this, template, options && options.bottom); + var buttons = dialog.getElementsByTagName("button"); + var closed = false, me = this, blurring = 1; + function close() { + if (closed) return; + closed = true; + dialog.parentNode.removeChild(dialog); + me.focus(); + } + buttons[0].focus(); + for (var i = 0; i < buttons.length; ++i) { + var b = buttons[i]; + (function(callback) { + CodeMirror.on(b, "click", function(e) { + CodeMirror.e_preventDefault(e); + close(); + if (callback) callback(me); + }); + })(callbacks[i]); + CodeMirror.on(b, "blur", function() { + --blurring; + setTimeout(function() { if (blurring <= 0) close(); }, 200); + }); + CodeMirror.on(b, "focus", function() { ++blurring; }); + } + }); + + /* + * openNotification + * Opens a notification, that can be closed with an optional timer + * (default 5000ms timer) and always closes on click. + * + * If a notification is opened while another is opened, it will close the + * currently opened one and open the new one immediately. + */ + CodeMirror.defineExtension("openNotification", function(template, options) { + closeNotification(this, close); + var dialog = dialogDiv(this, template, options && options.bottom); + var duration = options && (options.duration === undefined ? 5000 : options.duration); + var closed = false, doneTimer; + + function close() { + if (closed) return; + closed = true; + clearTimeout(doneTimer); + dialog.parentNode.removeChild(dialog); + } + + CodeMirror.on(dialog, 'click', function(e) { + CodeMirror.e_preventDefault(e); + close(); + }); + if (duration) + doneTimer = setTimeout(close, options.duration); + }); +})(); diff --git a/common/static/js/vendor/tiny_mce/plugins/codemirror/source.html b/common/static/js/vendor/tiny_mce/plugins/codemirror/source.html index d5ed5248f7..18b18f6d24 100644 --- a/common/static/js/vendor/tiny_mce/plugins/codemirror/source.html +++ b/common/static/js/vendor/tiny_mce/plugins/codemirror/source.html @@ -45,20 +45,21 @@ function inArray(key, arr) styleActiveLine: true }, jsFiles: [// Default JS files - 'lib/codemirror.js', - 'addon/edit/matchbrackets.js', - 'mode/xml/xml.js', - 'mode/javascript/javascript.js', - 'mode/css/css.js', - 'mode/htmlmixed/htmlmixed.js', - 'addon/dialog/dialog.js', - 'addon/search/searchcursor.js', - 'addon/search/search.js', - 'addon/selection/active-line.js' +// MODIFIED FOR EDX VENDOR FILE LOCATIONS. + 'codemirror.js', +// 'addon/edit/matchbrackets.js', + 'xml.js', + 'javascript.js', + 'addons/css.js', + 'addons/htmlmixed.js', + 'addons/dialog/dialog.js', + 'addons/searchcursor.js', + 'addons/search.js' +// 'addon/selection/active-line.js' ], - cssFiles: [// Default CSS files - 'lib/codemirror.css', - 'addon/dialog/dialog.css' + cssFiles: [ + 'codemirror.css', + 'addons/dialog/dialog.css' ] };