Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js
| Show All 14 Lines | JX.behavior('phabricator-remarkup-assist', function(config) { | ||||
| var pht = JX.phtize(config.pht); | var pht = JX.phtize(config.pht); | ||||
| var root = JX.$(config.rootID); | var root = JX.$(config.rootID); | ||||
| var area = JX.DOM.find(root, 'textarea'); | var area = JX.DOM.find(root, 'textarea'); | ||||
| var edit_mode = 'normal'; | var edit_mode = 'normal'; | ||||
| var edit_root = null; | var edit_root = null; | ||||
| var preview = null; | var preview = null; | ||||
| var pinned = false; | var pinned = false; | ||||
epriestley: Consider renaming the `'fa-arrows-alt'` mode (which I think is just named that for legacy… | |||||
| // When we pin the comment area to the bottom of the window, we need to put | // When we pin the comment area to the bottom of the window, we need to put | ||||
| // an extra spacer element at the bottom of the document so that it is | // an extra spacer element at the bottom of the document so that it is | ||||
| // possible to scroll down far enough to see content at the end. Otherwise, | // possible to scroll down far enough to see content at the end. Otherwise, | ||||
| // the last part of the document will be hidden behind the comment area when | // the last part of the document will be hidden behind the comment area when | ||||
| // the document is fully scrolled. | // the document is fully scrolled. | ||||
| var pinned_spacer = JX.$N( | var pinned_spacer = JX.$N( | ||||
| 'div', | 'div', | ||||
| {className: 'remarkup-assist-pinned-spacer'}); | {className: 'remarkup-assist-pinned-spacer'}); | ||||
| function set_edit_mode(root, mode) { | function set_edit_mode(root, mode) { | ||||
| if (mode == edit_mode) { | if (mode == edit_mode) { | ||||
| return; | return; | ||||
| } | } | ||||
| // First, disable any active mode. | // First, disable any active mode. | ||||
| if (edit_root) { | if (edit_root) { | ||||
| if (edit_mode == 'fa-arrows-alt') { | if (edit_mode == 'fullscreen') { | ||||
| JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', false); | JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', false); | ||||
| JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', false); | JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', false); | ||||
| JX.Mask.hide('jx-light-mask'); | JX.Mask.hide('jx-light-mask'); | ||||
| } | } | ||||
| area.style.height = ''; | area.style.height = ''; | ||||
| // If we're in preview mode, kick the preview back down to default | // If we're in preview mode, kick the preview back down to default | ||||
| // size. | // size. | ||||
| if (preview) { | if (preview) { | ||||
| JX.DOM.show(area); | JX.DOM.show(area); | ||||
| resize_preview(); | resize_preview(); | ||||
| JX.DOM.hide(area); | JX.DOM.hide(area); | ||||
| } | } | ||||
| } | } | ||||
| edit_root = root; | edit_root = root; | ||||
| edit_mode = mode; | edit_mode = mode; | ||||
| // Now, apply the new mode. | // Now, apply the new mode. | ||||
| if (mode == 'fa-arrows-alt') { | if (mode == 'fullscreen') { | ||||
| JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', true); | JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', true); | ||||
| JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', true); | JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', true); | ||||
| JX.Mask.show('jx-light-mask'); | JX.Mask.show('jx-light-mask'); | ||||
| // If we're in preview mode, expand the preview to full-size. | // If we're in preview mode, expand the preview to full-size. | ||||
| if (preview) { | if (preview) { | ||||
| JX.DOM.show(area); | JX.DOM.show(area); | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 43 Lines • ▼ Show 20 Lines | if (pinned) { | ||||
| var d = JX.Vector.getDim(container); | var d = JX.Vector.getDim(container); | ||||
| d.x = null; | d.x = null; | ||||
| d.setDim(pinned_spacer); | d.setDim(pinned_spacer); | ||||
| } | } | ||||
| if (!edit_root) { | if (!edit_root) { | ||||
| return; | return; | ||||
| } | } | ||||
| if (edit_mode != 'fa-arrows-alt') { | if (edit_mode != 'fullscreen') { | ||||
| return; | return; | ||||
| } | } | ||||
| // In Firefox, a textarea with position "absolute" or "fixed", anchored | // In Firefox, a textarea with position "absolute" or "fixed", anchored | ||||
| // "top" and "bottom", and height "auto" renders as two lines high. Force | // "top" and "bottom", and height "auto" renders as two lines high. Force | ||||
| // it to the correct height with Javascript. | // it to the correct height with Javascript. | ||||
| var v = JX.Vector.getViewport(); | var v = JX.Vector.getViewport(); | ||||
| v.x = null; | v.x = null; | ||||
| v.y -= 26; | v.y -= 26; | ||||
| v.setDim(area); | v.setDim(area); | ||||
| } | } | ||||
| JX.Stratcom.listen('resize', null, resizearea); | JX.Stratcom.listen('resize', null, resizearea); | ||||
| JX.Stratcom.listen('keydown', null, function(e) { | JX.Stratcom.listen('keydown', null, function(e) { | ||||
| if (e.getSpecialKey() != 'esc') { | if (e.getSpecialKey() != 'esc') { | ||||
| return; | return; | ||||
| } | } | ||||
| if (edit_mode != 'fa-arrows-alt') { | if (edit_mode != 'fullscreen') { | ||||
| return; | return; | ||||
| } | } | ||||
| e.kill(); | e.kill(); | ||||
| set_edit_mode(edit_root, 'normal'); | set_edit_mode(edit_root, 'normal'); | ||||
| set_pinned_mode(root, false); | set_pinned_mode(root, false); | ||||
| }); | }); | ||||
| ▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines | switch (action) { | ||||
| JX.TextAreaUtils.insertFileReference(area, upload); | JX.TextAreaUtils.insertFileReference(area, upload); | ||||
| } | } | ||||
| }) | }) | ||||
| .start(); | .start(); | ||||
| break; | break; | ||||
| case 'fa-arrows-alt': | case 'fa-arrows-alt': | ||||
| set_pinned_mode(root, false); | set_pinned_mode(root, false); | ||||
| if (edit_mode == 'fa-arrows-alt') { | if (edit_mode == 'fullscreen') { | ||||
| set_edit_mode(root, 'normal'); | set_edit_mode(root, 'normal'); | ||||
| } else { | } else { | ||||
| set_edit_mode(root, 'fa-arrows-alt'); | set_edit_mode(root, 'fullscreen'); | ||||
| } | } | ||||
| break; | break; | ||||
| case 'fa-eye': | case 'fa-eye': | ||||
| if (!preview) { | if (!preview) { | ||||
| preview = JX.$N( | preview = JX.$N( | ||||
| 'div', | 'div', | ||||
| { | { | ||||
| className: 'remarkup-inline-preview' | className: 'remarkup-inline-preview' | ||||
| ▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines | JX.behavior('phabricator-remarkup-assist', function(config) { | ||||
| if (config.canPin) { | if (config.canPin) { | ||||
| new JX.KeyboardShortcut('z', pht('key-help')) | new JX.KeyboardShortcut('z', pht('key-help')) | ||||
| .setHandler(function() { | .setHandler(function() { | ||||
| set_pinned_mode(root, !pinned); | set_pinned_mode(root, !pinned); | ||||
| }) | }) | ||||
| .register(); | .register(); | ||||
| } | } | ||||
| if (config.sendOnEnter) { | |||||
| // Send on enter if the shift key is not held. | |||||
| JX.DOM.listen(area, 'keydown', null, | |||||
| function(e) { | |||||
| if (e.getSpecialKey() != 'return') { | |||||
Not Done Inline ActionsYou should be able to JX.DOM.listen(area, 'keydown', null, ...) without needing to put remarkup-send-on-enter on the form. epriestley: You should be able to `JX.DOM.listen(area, 'keydown', null, ...)` without needing to put… | |||||
| return; | |||||
| } | |||||
| var raw = e.getRawEvent(); | |||||
| if (raw.shiftKey) { | |||||
| // If the shift key is pressed, let the browser write a newline into | |||||
| // the textarea. | |||||
| return; | |||||
| } | |||||
| if (edit_mode == 'fullscreen') { | |||||
| // Don't send on enter in fullscreen | |||||
| return; | |||||
| } | |||||
| // From here on, interpret this as a "send" action, not a literal | |||||
| // newline. | |||||
| e.kill(); | |||||
| // This allows 'workflow' and similar actions to take effect. | |||||
| // Such as pontificate in Conpherence | |||||
| var form = e.getNode('tag:form'); | |||||
| var r = JX.DOM.invoke(form, 'didSyntheticSubmit'); | |||||
| }); | |||||
| } | |||||
Not Done Inline ActionsThis has no effect again :3 epriestley: This has no effect again :3 | |||||
| }); | }); | ||||
Not Done Inline ActionsThis has no effect. epriestley: This has no effect. | |||||
Not Done Inline ActionsI think I had a form.submit() that's supposed to go after this. The main problem I was working on was the conpherence listener wasn't getting executed before form.submit() and the page would reload vs. ajax a message. chad: I think I had a `form.submit()` that's supposed to go after this. The main problem I was… | |||||
Consider renaming the 'fa-arrows-alt' mode (which I think is just named that for legacy reasons) into 'fullscreen', then testing edit_mode == 'fullscreen' instead of using a separate flag which stores the same state information.