open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #105 from tophf/editor-fixes

Browse Source 
Editor fixes
This commit is contained in:
Jason Barnabe 2015-05-13 09:33:40 -05:00
commit 2048d17333
2 changed files with 354 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
edit.html
View File

@ -30,6 +30,8 @@
<script src="codemirror/addon/hint/css-hint.js"></script> <script src="codemirror/addon/hint/css-hint.js"></script>
<script src="codemirror/keymap/sublime.js"></script> <script src="codemirror/keymap/sublime.js"></script>
<script src="codemirror/keymap/emacs.js"></script>
<script src="codemirror/keymap/vim.js"></script>
<style type="text/css"> <style type="text/css">
@ -59,11 +61,16 @@
.aligned { .aligned {
display: table-row; display: table-row;
} }
.aligned > * { .aligned > *:not(img) {
display: table-cell; display: table-cell;
margin-top: 0.1rem; margin-top: 0.1rem;
min-height: 1.4rem; min-height: 1.4rem;
} }
img[src="help.png"] {
cursor: pointer;
vertical-align: middle;
margin-left: 0.2rem;
}
input[type="checkbox"] { input[type="checkbox"] {
margin-left: 0.1rem; margin-left: 0.1rem;
} }
@ -86,11 +93,6 @@
margin-right: 0.5rem; margin-right: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
#actions img {
margin-left: 0.2rem;
position: relative;
top: 0.2rem;
}
/* options */ /* options */
#options [type="number"] { #options [type="number"] {
max-width: 2.5rem; max-width: 2.5rem;
@ -131,7 +133,7 @@
.CodeMirror-vscrollbar { .CodeMirror-vscrollbar {
margin-bottom: 8px; /* make space for resize-grip */ margin-bottom: 8px; /* make space for resize-grip */
} }
.CodeMirror-search-field { .CodeMirror-search-field, .CodeMirror-jump-field {
-webkit-animation: highlight 3s ease-out; -webkit-animation: highlight 3s ease-out;
} }
.CodeMirror-focused { .CodeMirror-focused {
@ -200,6 +202,55 @@
.applies-to img { .applies-to img {
vertical-align: bottom; vertical-align: bottom;
} }
/************ help popup ************/
#help-popup {
top: 3rem;
right: 3rem;
max-width: 50vw;
position: fixed;
display: none;
background-color: white;
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
padding: 0.5rem;
z-index: 9999;
}
#help-popup .title {
font-weight: bold;
background-color: rgba(0,0,0,0.05);
margin: -0.5rem -0.5rem 0.5rem;
padding: 0.5rem;
}
#help-popup .contents {
max-height: calc(100vh - 8rem);
overflow-y: auto;
}
#help-popup .close-icon {
cursor: pointer;
width: 8px;
height: 8px;
position: absolute;
right: 0.5rem;
top: 0.75rem;
background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px), linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px);
}
.keymap-list {
font-size: 85%;
line-height: 1.0;
border-spacing: 0;
word-break: break-all;
}
.keymap-list input {
width: 100%;
}
.keymap-list tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.07);
}
.keymap-list td:first-child {
white-space: nowrap;
font-family: monospace;
padding-right: 0.5rem;
}
/************ reponsive layouts ************/ /************ reponsive layouts ************/
@media(max-width:737px) { @media(max-width:737px) {
@ -246,7 +297,7 @@
#options { #options {
-webkit-column-count: 2; -webkit-column-count: 2;
} }
#options .aligned > * { #options .aligned > *:not(img) {
margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */ margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
padding-right: 0.4rem; padding-right: 0.4rem;
vertical-align: baseline; vertical-align: baseline;
@ -334,6 +385,7 @@
<div class="option aligned"> <div class="option aligned">
<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label> <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
<select data-option="keyMap" id="editor.keyMap"></select> <select data-option="keyMap" id="editor.keyMap"></select>
<img id="keyMap-help" src="help.png" i18n-alt="helpAlt">
</div> </div>
<div class="option aligned"> <div class="option aligned">
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label> <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@ -344,5 +396,9 @@
<section id="sections"> <section id="sections">
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2> <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2>
</section> </section>
<div id="help-popup">
<div class="title"></div><div class="close-icon"></div>
<div class="contents"></div>
</div>
</body> </body>
</html> </html>

428
edit.js
View File

@ -3,7 +3,6 @@
var styleId = null; var styleId = null;
var dirty = {}; // only the actually dirty items here var dirty = {}; // only the actually dirty items here
var editors = []; // array of all CodeMirror instances var editors = []; // array of all CodeMirror instances
var lockScroll; // temporary focus-jump-on-click fix, TODO: revert c084ea3 once CM is updated
var isSeparateWindow; // used currrently to determine if the window size/pos should be remembered var isSeparateWindow; // used currrently to determine if the window size/pos should be remembered
// direct & reverse mapping of @-moz-document keywords and internal property names // direct & reverse mapping of @-moz-document keywords and internal property names
@ -50,11 +49,19 @@ var sectionTemplate = tHTML('\
var findTemplate = t("search") + ': <input type="text" style="width: 10em" class="CodeMirror-search-field"/>&nbsp;' + var findTemplate = t("search") + ': <input type="text" style="width: 10em" class="CodeMirror-search-field"/>&nbsp;' +
'<span style="color: #888" class="CodeMirror-search-hint">(' + t("searchRegexp") + ')</span>'; '<span style="color: #888" class="CodeMirror-search-hint">(' + t("searchRegexp") + ')</span>';
var jumpToLineTemplate = t('editGotoLine') + ': <input class="CodeMirror-jump-field" type="text" style="width: 5em"/>';
// make querySelectorAll enumeration code readable // make querySelectorAll enumeration code readable
["forEach", "some", "indexOf"].forEach(function(method) { ["forEach", "some", "indexOf"].forEach(function(method) {
NodeList.prototype[method]= Array.prototype[method]; NodeList.prototype[method]= Array.prototype[method];
}); });
// reroute handling to nearest editor when keypress resolves to one of these commands
var commandsToReroute = {
save: true, jumpToLine: true, nextEditor: true, prevEditor: true,
find: true, findNext: true, findPrev: true, replace: true, replaceAll: true
};
function onChange(event) { function onChange(event) {
var node = event.target; var node = event.target;
if ("savedValue" in node) { if ("savedValue" in node) {
@ -117,6 +124,8 @@ function setCleanSection(section) {
function initCodeMirror() { function initCodeMirror() {
var CM = CodeMirror; var CM = CodeMirror;
var isWindowsOS = navigator.appVersion.indexOf("Windows") > 0;
// default option values // default option values
var userOptions = prefs.getPref("editor.options"); var userOptions = prefs.getPref("editor.options");
var stylishOptions = { var stylishOptions = {
@ -127,9 +136,12 @@ function initCodeMirror() {
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"], gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
matchBrackets: true, matchBrackets: true,
lint: CodeMirror.lint.css, lint: CodeMirror.lint.css,
keyMap: "sublime",
theme: "default", theme: "default",
extraKeys: {"Ctrl-Space": "autocomplete"} keyMap: isWindowsOS ? "sublime" : "default",
extraKeys: { // independent of current keyMap
"Alt-PageDown": "nextEditor",
"Alt-PageUp": "prevEditor"
}
} }
mergeOptions(stylishOptions, CM.defaults); mergeOptions(stylishOptions, CM.defaults);
mergeOptions(userOptions, CM.defaults); mergeOptions(userOptions, CM.defaults);
@ -140,23 +152,51 @@ function initCodeMirror() {
} }
// additional commands // additional commands
var cc = CM.commands; CM.commands.jumpToLine = jumpToLine;
cc.jumpToLine = jumpToLine; CM.commands.nextEditor = function(cm) { nextPrevEditor(cm, 1) };
cc.nextBuffer = function(cm) { nextPrevBuffer(cm, 1) }; CM.commands.prevEditor = function(cm) { nextPrevEditor(cm, -1) };
cc.prevBuffer = function(cm) { nextPrevBuffer(cm, -1) }; CM.commands.save = save;
var cssHintHandler = CM.hint.css; // "basic" keymap only has basic keys by design, so we skip it
CM.hint.css = function(cm) {
var cursor = cm.getCursor(); CM.keyMap.sublime["Ctrl-G"] = "jumpToLine";
var token = cm.getTokenAt(cursor); CM.keyMap.emacsy["Ctrl-G"] = "jumpToLine";
if (token.state.state === "prop" && "!important".indexOf(token.string) === 0) { CM.keyMap.pcDefault["Ctrl-J"] = "jumpToLine";
return { CM.keyMap.macDefault["Cmd-J"] = "jumpToLine";
from: CM.Pos(cursor.line, token.start),
to: CM.Pos(cursor.line, token.end), CM.keyMap.pcDefault["Ctrl-Space"] = "autocomplete"; // will be used by "sublime" on PC via fallthrough
list: ["!important"] CM.keyMap.macDefault["Alt-Space"] = "autocomplete"; // OSX uses Ctrl-Space and Cmd-Space for something else
} CM.keyMap.emacsy["Alt-/"] = "autocomplete"; // copied from "emacs" keymap
} // "vim" and "emacs" define their own autocomplete hotkeys
return cssHintHandler(cm);
if (isWindowsOS) {
// "pcDefault" keymap on Windows should have F3/Shift-F3
CM.keyMap.pcDefault["F3"] = "findNext";
CM.keyMap.pcDefault["Shift-F3"] = "findPrev";
// try to remap non-interceptable Ctrl-(Shift-)N/T/W hotkeys
["N", "T", "W"].forEach(function(char) {
[{from: "Ctrl-", to: ["Alt-", "Ctrl-Alt-"]},
{from: "Shift-Ctrl-", to: ["Ctrl-Alt-", "Shift-Ctrl-Alt-"]} // Note: modifier order in CM is S-C-A
].forEach(function(remap) {
var oldKey = remap.from + char;
Object.keys(CM.keyMap).forEach(function(keyMapName) {
var keyMap = CM.keyMap[keyMapName];
var command = keyMap[oldKey];
if (!command) {
return;
}
remap.to.some(function(newMod) {
var newKey = newMod + char;
if (!(newKey in keyMap)) {
delete keyMap[oldKey];
keyMap[newKey] = command;
return true;
}
});
});
});
});
} }
// user option values // user option values
@ -249,25 +289,9 @@ function acmeEventListener(event) {
// replace given textarea with the CodeMirror editor // replace given textarea with the CodeMirror editor
function setupCodeMirror(textarea, index) { function setupCodeMirror(textarea, index) {
var cm = CodeMirror.fromTextArea(textarea); var cm = CodeMirror.fromTextArea(textarea);
cm.addKeyMap({
"Ctrl-G": "jumpToLine",
"Alt-PageDown": "nextBuffer",
"Alt-PageUp": "prevBuffer"
});
cm.lastChange = cm.changeGeneration();
cm.on("change", indicateCodeChange);
// ensure the section doesn't jump when clicking selected text cm.on("change", indicateCodeChange);
cm.on("cursorActivity", function(cm) { cm.on("blur", function(cm) { editors.lastActive = cm });
editors.lastActive = cm;
setTimeout(function() {
lockScroll = {
windowScrollY: window.scrollY,
editor: cm,
editorScrollInfo: cm.getScrollInfo()
}
}, 0);
});
var resizeGrip = cm.display.wrapper.appendChild(document.createElement("div")); var resizeGrip = cm.display.wrapper.appendChild(document.createElement("div"));
resizeGrip.className = "resize-grip"; resizeGrip.className = "resize-grip";
@ -324,30 +348,39 @@ function getCodeMirrorForSection(section) {
return null; return null;
} }
// ensure the section doesn't jump when clicking selected text // prevent the browser from seeing hotkeys that should be handled by nearest editor
document.addEventListener("scroll", function(e) { document.addEventListener("keydown", function(event) {
if (lockScroll && lockScroll.windowScrollY != window.scrollY) { if (event.target.localName == "textarea") {
window.scrollTo(0, lockScroll.windowScrollY); return; // let CodeMirror handle it
lockScroll.editor.scrollTo(lockScroll.editorScrollInfo.left, lockScroll.editorScrollInfo.top); }
lockScroll = null; var keyName = CodeMirror.keyName(event);
if ("handled" == CodeMirror.lookupKey(keyName, CodeMirror.getOption("keyMap"), handleCommand)
|| "handled" == CodeMirror.lookupKey(keyName, CodeMirror.defaults.extraKeys, handleCommand)) {
event.preventDefault();
event.stopPropagation();
}
function handleCommand(command) {
if (commandsToReroute[command] === true) {
CodeMirror.commands[command](getEditorInSight(event.target));
return true;
}
} }
}); });
document.addEventListener("keydown", function(e) { // remind Chrome to repaint a previously invisible editor box by toggling any element's transform
if (!e.altKey && e.keyCode >= 70 && e.keyCode <= 114) { // this bug is present in some versions of Chrome (v37-40 or something)
if (e.keyCode == 83 && (e.ctrlKey || e.metaKey) && !e.shiftKey) { // Ctrl-S, Cmd-S document.addEventListener("scroll", function(event) {
e.preventDefault(); var style = document.getElementById("name").style;
e.stopPropagation(); style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
save(); });
} else if (e.target.localName != "textarea") { // textareas are handled by CodeMirror
if (e.keyCode == 70 && (e.ctrlKey || e.metaKey) && !e.shiftKey) { /* Ctrl-F, Cmd-F */ // Shift-Ctrl-Wheel scrolls entire page even when mouse is over a code editor
document.browserSearchHandler(e, "find"); document.addEventListener("wheel", function(event) {
} else if (e.keyCode == 71 && (e.ctrlKey || e.metaKey)) { /*Ctrl-G, Ctrl-Shift-G, Cmd-G, Cmd-Shift-G*/ if (event.shiftKey && event.ctrlKey && !event.altKey && !event.metaKey) {
document.browserSearchHandler(e, e.shiftKey ? "findPrev" : "findNext"); // Chrome scrolls horizontally when Shift is pressed but on some PCs this might be different
} else if (e.keyCode == 114 && !e.ctrlKey && !e.metaKey) { /*F3, Shift-F3*/ window.scrollBy(0, event.deltaX || event.deltaY);
document.browserSearchHandler(e, e.shiftKey ? "findPrev" : "findNext"); event.preventDefault();
}
}
} }
}); });
@ -426,7 +459,9 @@ function addSection(event, section) {
var clickedSection = event.target.parentNode; var clickedSection = event.target.parentNode;
sections.insertBefore(div, clickedSection.nextElementSibling); sections.insertBefore(div, clickedSection.nextElementSibling);
var newIndex = document.querySelectorAll("#sections > div").indexOf(clickedSection) + 1; var newIndex = document.querySelectorAll("#sections > div").indexOf(clickedSection) + 1;
setupCodeMirror(codeElement, newIndex).focus(); var cm = setupCodeMirror(codeElement, newIndex);
makeSectionVisible(cm);
cm.focus()
} else { } else {
sections.appendChild(div); sections.appendChild(div);
setupCodeMirror(codeElement); setupCodeMirror(codeElement);
@ -468,10 +503,9 @@ function removeAreaAndSetDirty(area) {
} }
function makeSectionVisible(cm) { function makeSectionVisible(cm) {
var section = cm.display.wrapper.parentNode; var section = getSectionForCodeMirror(cm);
var bounds = section.getBoundingClientRect(); var bounds = section.getBoundingClientRect();
if ((bounds.bottom > window.innerHeight && bounds.top > 0) || (bounds.top < 0 && bounds.bottom < window.innerHeight)) { if ((bounds.bottom > window.innerHeight && bounds.top > 0) || (bounds.top < 0 && bounds.bottom < window.innerHeight)) {
lockScroll = null;
if (bounds.top < 0) { if (bounds.top < 0) {
window.scrollBy(0, bounds.top - 1); window.scrollBy(0, bounds.top - 1);
} else { } else {
@ -487,34 +521,51 @@ function setupGlobalSearch() {
findPrev: CodeMirror.commands.findPrev findPrev: CodeMirror.commands.findPrev
} }
var curState; // cm.state.search for last used 'find'
function shouldIgnoreCase(query) { // treat all-lowercase non-regexp queries as case-insensitive function shouldIgnoreCase(query) { // treat all-lowercase non-regexp queries as case-insensitive
return typeof query == "string" && query == query.toLowerCase(); return typeof query == "string" && query == query.toLowerCase();
} }
function updateState(cm, newState) {
if (!newState) {
if (cm.state.search) {
return cm.state.search;
}
newState = curState;
}
cm.state.search = {
query: newState.query,
overlay: newState.overlay,
annotate: cm.showMatchesOnScrollbar(newState.query, shouldIgnoreCase(newState.query))
}
cm.addOverlay(newState.overlay);
return cm.state.search;
}
function find(activeCM) { function find(activeCM) {
editors.lastActive = activeCM;
var cm = getEditorInSight();
if (cm != activeCM) {
cm.focus();
activeCM = cm;
}
var originalOpenDialog = activeCM.openDialog; var originalOpenDialog = activeCM.openDialog;
activeCM.openDialog = function(template, callback, options) { activeCM.openDialog = function(template, callback, options) {
originalOpenDialog.call(activeCM, findTemplate, function(query) { originalOpenDialog.call(activeCM, findTemplate, function(query) {
activeCM.openDialog = originalOpenDialog; activeCM.openDialog = originalOpenDialog;
callback(query); callback(query);
var state = activeCM.state.search; curState = activeCM.state.search;
if (editors.length == 1 || !state.query) { if (editors.length == 1 || !curState.query) {
return; return;
} }
for (var i=0; i < editors.length; i++) { editors.forEach(function(cm) {
var cm = editors[i]; if (cm != activeCM) {
if (cm == activeCM) { cm.execCommand("clearSearch");
continue; updateState(cm, curState);
} }
cm.execCommand("clearSearch"); });
cm.state.search = { if (CodeMirror.cmpPos(curState.posFrom, curState.posTo) == 0) {
query: state.query,
overlay: state.overlay,
annotate: cm.showMatchesOnScrollbar(state.query, shouldIgnoreCase(state.query))
}
cm.addOverlay(state.overlay);
}
if (CodeMirror.cmpPos(activeCM.state.search.posFrom, activeCM.state.search.posTo) == 0) {
findNext(activeCM); findNext(activeCM);
} }
}, options); }, options);
@ -523,21 +574,24 @@ function setupGlobalSearch() {
} }
function findNext(activeCM, reverse) { function findNext(activeCM, reverse) {
if (!activeCM.state.search || !activeCM.state.search.query) { var state = updateState(activeCM);
if (!state || !state.query) {
find(activeCM); find(activeCM);
return; return;
} }
var pos = activeCM.getCursor(); var pos = activeCM.getCursor(reverse ? "from" : "to");
// check if the search term is currently selected in the editor activeCM.setSelection(activeCM.getCursor()); // clear the selection, don't move the cursor
var m = activeCM.getSelection().match(activeCM.state.search.query);
if (m && m[0].length == activeCM.getSelection().length) {
pos = activeCM.getCursor(reverse ? "from" : "to");
activeCM.setSelection(activeCM.getCursor());
}
var rxQuery = typeof state.query == "object"
? state.query : stringAsRegExp(state.query, shouldIgnoreCase(state.query) ? "i" : "");
if (document.activeElement && document.activeElement.name == "applies-value"
&& searchAppliesTo(activeCM)) {
return;
}
for (var i=0, cm=activeCM; i < editors.length; i++) { for (var i=0, cm=activeCM; i < editors.length; i++) {
var state = cm.state.search; state = updateState(cm);
if (cm != activeCM) { if (!cm.hasFocus()) {
pos = reverse ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(0, 0); pos = reverse ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(0, 0);
} }
var searchCursor = cm.getSearchCursor(state.query, pos, shouldIgnoreCase(state.query)); var searchCursor = cm.getSearchCursor(state.query, pos, shouldIgnoreCase(state.query));
@ -551,62 +605,44 @@ function setupGlobalSearch() {
state.posTo = CodeMirror.Pos(state.posFrom.line, state.posFrom.ch); state.posTo = CodeMirror.Pos(state.posFrom.line, state.posFrom.ch);
originalCommand[reverse ? "findPrev" : "findNext"](cm); originalCommand[reverse ? "findPrev" : "findNext"](cm);
return; return;
} else if (!reverse && searchAppliesTo(cm)) {
return;
} }
cm = editors[(editors.indexOf(cm) + (reverse ? -1 + editors.length : 1)) % editors.length]; cm = editors[(editors.indexOf(cm) + (reverse ? -1 + editors.length : 1)) % editors.length];
if (reverse && searchAppliesTo(cm)) {
return;
}
} }
// nothing found so far, so call the original search with wrap-around // nothing found so far, so call the original search with wrap-around
originalCommand[reverse ? "findPrev" : "findNext"](activeCM); originalCommand[reverse ? "findPrev" : "findNext"](activeCM);
function searchAppliesTo(cm) {
var inputs = [].slice.call(getSectionForCodeMirror(cm).querySelectorAll(".applies-value"));
if (reverse) {
inputs = inputs.reverse();
}
inputs.splice(0, inputs.indexOf(document.activeElement) + 1);
return inputs.some(function(input) {
var match = rxQuery.exec(input.value);
if (match) {
input.focus();
var end = match.index + match[0].length;
// scroll selected part into view in long inputs,
// works only outside of current event handlers chain, hence timeout=0
setTimeout(function() {
input.setSelectionRange(end, end);
input.setSelectionRange(match.index, end)
}, 0);
return true;
}
});
}
} }
function findPrev(cm) { function findPrev(cm) {
findNext(cm, true); findNext(cm, true);
} }
function getVisibleEditor(activeElement) {
var linesVisible = 2; // closest editor should have at least # lines visible
function getScrollDistance(cm) {
var bounds = cm.display.wrapper.parentNode.getBoundingClientRect();
if (bounds.top < 0) {
return -bounds.top;
} else if (bounds.top < window.innerHeight - cm.defaultTextHeight() * linesVisible) {
return 0;
} else {
return bounds.top - bounds.height;
}
}
if (activeElement && activeElement.className.indexOf("applies-") >= 0) {
for (var section = activeElement; section.parentNode; section = section.parentNode) {
var cmWrapper = section.querySelector(".CodeMirror");
if (cmWrapper) {
if (getScrollDistance(cmWrapper.CodeMirror) == 0) {
return cmWrapper.CodeMirror;
}
break;
}
}
}
if (editors.lastActive && getScrollDistance(editors.lastActive) == 0) {
return editors.lastActive;
}
var sorted = editors
.map(function(cm, index) { return {cm: cm, distance: getScrollDistance(cm), index: index} })
.sort(function(a, b) { return Math.sign(a.distance - b.distance) || Math.sign(a.index - b.index)});
var cm = sorted[0].cm;
if (sorted[0].distance > 0) {
makeSectionVisible(cm)
}
cm.focus();
return cm;
}
document.browserSearchHandler = function(event, command) {
event.preventDefault();
event.stopPropagation();
if (!event.target.classList.contains("CodeMirror-search-field")) {
CodeMirror.commands[command](getVisibleEditor(event.target));
}
}
CodeMirror.commands.find = find; CodeMirror.commands.find = find;
CodeMirror.commands.findNext = findNext; CodeMirror.commands.findNext = findNext;
CodeMirror.commands.findPrev = findPrev; CodeMirror.commands.findPrev = findPrev;
@ -614,7 +650,7 @@ function setupGlobalSearch() {
function jumpToLine(cm) { function jumpToLine(cm) {
var cur = cm.getCursor(); var cur = cm.getCursor();
cm.openDialog(t('editGotoLine') + ': <input type="text" style="width: 5em"/>', function(str) { cm.openDialog(jumpToLineTemplate, function(str) {
var m = str.match(/^\s*(\d+)(?:\s*:\s*(\d+))?\s*$/); var m = str.match(/^\s*(\d+)(?:\s*:\s*(\d+))?\s*$/);
if (m) { if (m) {
cm.setCursor(m[1] - 1, m[2] ? m[2] - 1 : cur.ch); cm.setCursor(m[1] - 1, m[2] ? m[2] - 1 : cur.ch);
@ -622,12 +658,44 @@ function jumpToLine(cm) {
}, {value: cur.line+1}); }, {value: cur.line+1});
} }
function nextPrevBuffer(cm, direction) { function nextPrevEditor(cm, direction) {
cm = editors[(editors.indexOf(cm) + direction + editors.length) % editors.length]; cm = editors[(editors.indexOf(cm) + direction + editors.length) % editors.length];
makeSectionVisible(cm); makeSectionVisible(cm);
cm.focus(); cm.focus();
} }
function getEditorInSight(nearbyElement) {
// priority: 1. associated CM for applies-to element 2. last active if visible 3. first visible
var cm;
if (nearbyElement && nearbyElement.className.indexOf("applies-") >= 0) {
cm = getCodeMirrorForSection(querySelectorParent(nearbyElement, "#sections > div"));
} else {
cm = editors.lastActive;
}
if (!cm || offscreenDistance(cm) > 0) {
var sorted = editors
.map(function(cm, index) { return {cm: cm, distance: offscreenDistance(cm), index: index} })
.sort(function(a, b) { return a.distance - b.distance || a.index - b.index });
cm = sorted[0].cm;
if (sorted[0].distance > 0) {
makeSectionVisible(cm)
}
}
return cm;
function offscreenDistance(cm) {
var LINES_VISIBLE = 2; // closest editor should have at least # lines visible
var bounds = getSectionForCodeMirror(cm).getBoundingClientRect();
if (bounds.top < 0) {
return -bounds.top;
} else if (bounds.top < window.innerHeight - cm.defaultTextHeight() * LINES_VISIBLE) {
return 0;
} else {
return bounds.top - bounds.height;
}
}
}
window.addEventListener("load", init, false); window.addEventListener("load", init, false);
function init() { function init() {
@ -687,6 +755,7 @@ function initHooks() {
document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false); document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false);
document.getElementById("save-button").addEventListener("click", save, false); document.getElementById("save-button").addEventListener("click", save, false);
document.getElementById("sections-help").addEventListener("click", showSectionHelp, false); document.getElementById("sections-help").addEventListener("click", showSectionHelp, false);
document.getElementById("keyMap-help").addEventListener("click", showKeyMapHelp, false);
setupGlobalSearch(); setupGlobalSearch();
setCleanGlobal(); setCleanGlobal();
@ -819,19 +888,91 @@ function toMozillaFormat() {
} }
function showSectionHelp() { function showSectionHelp() {
showHelp(t("sectionHelp")); showHelp(t("styleSectionsTitle"), t("sectionHelp"));
} }
function showAppliesToHelp() { function showAppliesToHelp() {
showHelp(t("appliesHelp")); showHelp(t("appliesLabel"), t("appliesHelp"));
} }
function showToMozillaHelp() { function showToMozillaHelp() {
showHelp(t("styleToMozillaFormatHelp")); showHelp(t("styleToMozillaFormat"), t("styleToMozillaFormatHelp"));
} }
function showHelp(text) { function showKeyMapHelp() {
alert(text); var keyMap = mergeKeyMaps({}, prefs.getPref("editor.keyMap"), CodeMirror.defaults.extraKeys);
var keyMapSorted = Object.keys(keyMap)
.map(function(key) { return {key: key, cmd: keyMap[key]} })
.concat([{key: "Shift-Ctrl-Wheel", cmd: "scrollWindow"}])
.sort(function(a, b) { return a.cmd < b.cmd || (a.cmd == b.cmd && a.key < b.key) ? -1 : 1 });
showHelp(t("cm_keyMap") + ": " + prefs.getPref("editor.keyMap"),
'<table class="keymap-list">' +
"<thead><tr><th><input></th><th><input></th></tr></thead>" +
"<tbody>" + keyMapSorted.map(function(value) {
return "<tr><td>" + value.key + "</td><td>" + value.cmd + "</td></tr>";
}).join("") +
"</tbody>" +
"</table>");
document.querySelector("#help-popup table").addEventListener("input", function(event) {
var input = event.target;
var query = stringAsRegExp(input.value, "gi");
var col = input.parentNode.cellIndex;
this.tBodies[0].childNodes.forEach(function(row) {
var cell = row.children[col];
if (query.test(cell.textContent)) {
row.style.display = "";
cell.innerHTML = cell.textContent.replace(query, "<mark>$&</mark>");
} else {
row.style.display = "none";
}
});
});
function mergeKeyMaps(merged) {
[].slice.call(arguments, 1).forEach(function(keyMap) {
if (typeof keyMap == "string") {
keyMap = CodeMirror.keyMap[keyMap];
}
Object.keys(keyMap).forEach(function(key) {
var cmd = keyMap[key];
// filter out '...', 'attach', etc. (hotkeys start with an uppercase letter)
if (!merged[key] && !key.match(/^[a-z]/) && cmd != "...") {
if (typeof cmd == "function") {
// for 'emacs' keymap: provide at least something meaningful (hotkeys and the function body)
// for 'vim*' keymaps: almost nothing as it doesn't rely on CM keymap mechanism
cmd = cmd.toString().replace(/^function.*?\{[\s\r\n]*([\s\S]+?)[\s\r\n]*\}$/, "$1");
merged[key] = cmd.length <= 200 ? cmd : cmd.substr(0, 200) + "...";
} else {
merged[key] = cmd;
}
}
});
if (keyMap.fallthrough) {
merged = mergeKeyMaps(merged, keyMap.fallthrough);
}
});
return merged;
}
}
function showHelp(title, text) {
var div = document.getElementById("help-popup");
div.querySelector(".contents").innerHTML = text;
div.querySelector(".title").innerHTML = title;
if (getComputedStyle(div).display == "none") {
document.addEventListener("keydown", closeHelp);
div.querySelector(".close-icon").onclick = closeHelp; // avoid chaining on multiple showHelp() calls
}
div.style.display = "block";
function closeHelp(e) {
if (e.type == "click" || (e.keyCode == 27 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
div.style.display = "";
document.removeEventListener("keydown", closeHelp);
}
}
} }
function getParams() { function getParams() {
@ -866,3 +1007,14 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
} }
} }
}); });
function querySelectorParent(node, selector) {
var parent = node.parentNode;
while (parent && parent.matches && !parent.matches(selector))
parent = parent.parentNode;
return parent.matches ? parent : null; // null for the root document.DOCUMENT_NODE
}
function stringAsRegExp(s, flags) {
return new RegExp(s.replace(/[{}()\[\]\/\\.+?^$:=*!|]/g, "\\$&"), flags);
}