Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Make clicks in dead space in inline CSS widget set focus back to the act... #566

Merged
gruehle merged 1 commit into from
Apr 5, 2012
Merged

Make clicks in dead space in inline CSS widget set focus back to the act... #566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion src/editor/CSSInlineEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

define(function (require, exports, module) {
'use strict';

// Load dependent modules
var DocumentManager = require("document/DocumentManager"),
HTMLUtils = require("language/HTMLUtils"),
Expand Down Expand Up @@ -56,6 +56,7 @@ define(function (require, exports, module) {

// Bind event handlers
this._updateRelatedContainer = this._updateRelatedContainer.bind(this);
this._onClick = this._onClick.bind(this);

// Create DOM to hold editors and related list
this.$editorsDiv = $(document.createElement('div')).addClass("inlineEditorHolder");
Expand Down Expand Up @@ -108,6 +109,9 @@ define(function (require, exports, module) {

// Listen to the editor's scroll event to reposition the relatedContainer.
$(this.hostEditor).on("scroll", this._updateRelatedContainer);

// Listen for clicks directly on us, so we can set focus back to the editor
this.$htmlContent.on("click", this._onClick);

return (new $.Deferred()).resolve();
};
Expand Down Expand Up @@ -193,6 +197,24 @@ define(function (require, exports, module) {
$(this.hostEditor).off("scroll", this._updateRelatedContainer);
};

/**
* Handle a click outside our child editor by setting focus back to it.
*/
CSSInlineEditor.prototype._onClick = function (event) {
var childEditor = this.editors[0],
editorRoot = childEditor.getRootElement(),
editorPos = $(editorRoot).offset();
if (!$.contains(editorRoot, event.target)) {
childEditor.focus();
if (event.pageY < editorPos.top) {
childEditor.setCursorPos(0, 0);
} else if (event.pageY > editorPos.top + $(editorRoot).height()) {
var lastLine = childEditor.getLastVisibleLine();
childEditor.setCursorPos(lastLine, childEditor.getLineText(lastLine).length);
}
}
};

/**
*
*
Expand Down
33 changes: 25 additions & 8 deletions src/editor/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,14 +357,8 @@ define(function (require, exports, module) {
* bugs in CodeMirror when lines are hidden.
*/
Editor.prototype._selectAllVisible = function () {
var startLine, endLine;
if (this._visibleRange) {
startLine = this._visibleRange.startLine;
endLine = this._visibleRange.endLine;
} else {
startLine = 0;
endLine = this.lineCount() - 1;
}
var startLine = this.getFirstVisibleLine(),
endLine = this.getLastVisibleLine();
this.setSelection({line: startLine, ch: 0},
{line: endLine, ch: this.getLineText(endLine).length});

@gruehle gruehle Apr 5, 2012

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this isn't part of this pull request, but the setSelection() call here will not include the carriage return at the end of the last line. In other words, in an inline editor, if you do Cmd-A and Cmd-X, you will leave an extra blank line in the file. You can pass {line: endLine + 1, ch: 0} for the end pos to include the carriage return. (setSelection internally calls clipPos(), so this is safe even if endLine is the last line in the document).

@njx njx Apr 5, 2012

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a little tricky, because if the user then hits delete, there will be no visible lines left in the editor. We'd have to insert a new blank line in that case. I'm inclined to treat that as a separate bug (it's actually new behavior).

Sent from tiny phone

On Apr 5, 2012, at 7:30 AM, "Glenn Ruehle" reply@reply.github.com wrote:

@@ -357,14 +357,8 @@ define(function (require, exports, module) {
* bugs in CodeMirror when lines are hidden.
*/
Editor.prototype._selectAllVisible = function () {

  •    var startLine, endLine;

  •    if (this._visibleRange) {

  •        startLine = this._visibleRange.startLine;

  •        endLine = this._visibleRange.endLine;

  •    } else {

  •        startLine = 0;

  •        endLine = this.lineCount() - 1;

  •    }

  •    var startLine = this.getFirstVisibleLine(),

  •        endLine = this.getLastVisibleLine();
this.setSelection({line: startLine, ch: 0},
                  {line: endLine, ch: this.getLineText(endLine).length});

I know this isn't part of this pull request, but the setSelection() call here will not include the carriage return at the end of the last line. In other words, in an inline editor, if you do Cmd-A and Cmd-X, you will leave an extra blank line in the file. You can pass {line: endLine + 1, ch: 0} for the end pos to include the carriage return. (setSelection internally calls clipPos(), so this is safe even if endLine is the last line in the document).

Reply to this email directly or view it on GitHub:
https://github.com/adobe/brackets/pull/566/files#r650333

@gruehle gruehle Apr 5, 2012

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good.

};
Expand Down Expand Up @@ -664,6 +658,22 @@ define(function (require, exports, module) {
Editor.prototype.lineCount = function () {
return this._codeMirror.lineCount();
};

/**
* Gets the number of the first visible line in the editor.
* @returns {number} The 0-based index of the first visible line.
*/
Editor.prototype.getFirstVisibleLine = function () {
return (this._visibleRange ? this._visibleRange.startLine : 0);
};

/**
* Gets the number of the last visible line in the editor.
* @returns {number} The 0-based index of the last visible line.
*/
Editor.prototype.getLastVisibleLine = function () {
return (this._visibleRange ? this._visibleRange.endLine : this.lineCount() - 1);
};

/* Hides the specified line number in the editor
* @param {!number}
Expand All @@ -689,6 +699,13 @@ define(function (require, exports, module) {
return this._codeMirror.getScrollerElement();
};

/**
* Gets the root DOM node of the editor.
* @returns {Object} The editor's root DOM node.
*/
Editor.prototype.getRootElement = function () {
return this._codeMirror.getWrapperElement();
};

/**
* Adds an inline widget below the given line. If any inline widget was already open for that
Expand Down