Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
12456de
Initial implementation search exclusion using project-based view sett…
RaymondLim Feb 21, 2014
56e70d6
Remove an incorrect assignment.
RaymondLim Feb 21, 2014
d960b63
Switch to global view state instead of project-based one and also lim…
RaymondLim Feb 22, 2014
f87f488
Fix JSLint error for extra trailing whitespaces.
RaymondLim Feb 23, 2014
bafbe88
Merge remote-tracking branch 'origin' into rlim/search-exclusions
RaymondLim Feb 24, 2014
eb580f1
First pass at UI for Find in Files exclusion filters. Not wired up to
peterflynn Feb 24, 2014
ad9cb51
Merge remote-tracking branch 'origin/rlim/search-exclusions' into pfl…
peterflynn Feb 24, 2014
6cec6e9
Wire up file exclusion UI to Find in Files search code & preferences.
peterflynn Feb 25, 2014
0bbaf7a
Hoist out a generic DropdownButton widget from CSSInlineEditor, and u…
peterflynn Feb 26, 2014
0068fa7
File exclusions usability improvements:
peterflynn Feb 27, 2014
7a96840
Fix bug that snuck into last FileFilters commit at last minute.
peterflynn Feb 27, 2014
dd94f96
Simplify file exclusions UI & prefs after discussion in #7015: single
peterflynn Feb 28, 2014
6a9b292
Basic UI integration tests for Find in Files filtering.
peterflynn Feb 28, 2014
904180a
Merge remote-tracking branch 'origin/master' into pflynn/search-exclu…
peterflynn Mar 1, 2014
f8091fe
Simplify file-exclusion filter syntax so we can use plain regexps ins…
peterflynn Mar 3, 2014
b0ea154
Fix bug when clearing filter: move trimming back to editFilter() so we
peterflynn Mar 5, 2014
439ea34
Merge commit '8572b1d8' into pflynn/search-exclusions
peterflynn Mar 5, 2014
0195c2f
Code review:
peterflynn Mar 5, 2014
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
178 changes: 45 additions & 133 deletions src/editor/CSSInlineEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,18 @@ define(function (require, exports, module) {

// Load dependent modules
var CSSUtils = require("language/CSSUtils"),
DropdownButton = require("widgets/DropdownButton").DropdownButton,
CommandManager = require("command/CommandManager"),
Commands = require("command/Commands"),
DocumentManager = require("document/DocumentManager"),
DropdownEventHandler = require("utils/DropdownEventHandler").DropdownEventHandler,
EditorManager = require("editor/EditorManager"),
Editor = require("editor/Editor").Editor,
PanelManager = require("view/PanelManager"),
ProjectManager = require("project/ProjectManager"),
HTMLUtils = require("language/HTMLUtils"),
Menus = require("command/Menus"),
MultiRangeInlineEditor = require("editor/MultiRangeInlineEditor"),
PopUpManager = require("widgets/PopUpManager"),
Strings = require("strings"),
ViewUtils = require("utils/ViewUtils"),
_ = require("thirdparty/lodash");

var StylesheetsMenuTemplate = require("text!htmlContent/stylesheets-menu.html");

var _newRuleCmd,
_newRuleHandlers = [];
Expand Down Expand Up @@ -102,19 +97,6 @@ define(function (require, exports, module) {
return selectorName;
}

/**
* @private
* Create the list of stylesheets in the dropdown menu.
* @return {string} The html content
*/
function _renderList(cssFileInfos) {
var templateVars = {
styleSheetList : cssFileInfos
};

return Mustache.render(StylesheetsMenuTemplate, templateVars);
}

/**
* @private
* Add a new rule for the given selector to the given stylesheet, then add the rule to the
Expand Down Expand Up @@ -147,6 +129,16 @@ define(function (require, exports, module) {
}
}

/** Item renderer for stylesheet-picker dropdown */
function _stylesheetListRenderer(item) {
var html = "<span class='stylesheet-name'>" + _.escape(item.name);
if (item.subDirStr.length) {
html += "<span class='stylesheet-dir'> — " + _.escape(item.subDirStr) + "</span>";
}
html += "</span>";
return html;
}

/**
* This function is registered with EditManager as an inline editor provider. It creates a CSSInlineEditor
* when cursor is on an HTML tag name, class attribute, or id attribute, find associated
Expand Down Expand Up @@ -180,107 +172,14 @@ define(function (require, exports, module) {
var result = new $.Deferred(),
cssInlineEditor,
cssFileInfos = [],
$newRuleButton,
$dropdown,
$dropdownItem,
dropdownEventHandler;

/**
* @private
* Close the dropdown externally to dropdown, which ultimately calls the
* _cleanupDropdown callback.
*/
function _closeDropdown() {
if (dropdownEventHandler) {
dropdownEventHandler.close();
}
}

/**
* @private
* Handle click
*/
function _onClickOutside(event) {
var $container = $(event.target).closest(".stylesheet-dropdown");

// If click is outside dropdown list, then close dropdown list
if ($container.length === 0 || $container[0] !== $dropdown[0]) {
_closeDropdown();
}
}

/**
* @private
* Remove the various event handlers that close the dropdown. This is called by the
* PopUpManager when the dropdown is closed.
*/
function _cleanupDropdown() {
window.document.body.removeEventListener("click", _onClickOutside, true);
$(hostEditor).off("scroll", _closeDropdown);
$(PanelManager).off("editorAreaResize", _closeDropdown);
dropdownEventHandler = null;
$dropdown = null;

EditorManager.focusEditor();
}
newRuleButton;

/**
* @private
* Callback when item from dropdown list is selected
* @param {jQueryObject} $link The `a` element selected with mouse or keyboard
*/
function _onSelect($link) {
var path = $link.data("path");

if (path) {
_addRule(selectorName, cssInlineEditor, path);
}
}

/**
* @private
* Show or hide the stylesheets dropdown.
*/
function _showDropdown() {
Menus.closeAll();

$dropdown = $(_renderList(cssFileInfos))
.appendTo($("body"));

var toggleOffset = $newRuleButton.offset(),
posLeft = toggleOffset.left,
posTop = toggleOffset.top + $newRuleButton.outerHeight(),
elementRect = {
top: posTop,
left: posLeft,
height: $dropdown.height(),
width: $dropdown.width()
},
clip = ViewUtils.getElementClipSize($(window), elementRect);

if (clip.bottom > 0) {
// Bottom is clipped, so move entire menu above button
posTop = Math.max(0, toggleOffset.top - $dropdown.height() - 4);
}

if (clip.right > 0) {
// Right is clipped, so adjust left to fit menu in editor
posLeft = Math.max(0, posLeft - clip.right);
}

$dropdown.css({
left: posLeft,
top: posTop
});

dropdownEventHandler = new DropdownEventHandler($dropdown, _onSelect, _cleanupDropdown);
dropdownEventHandler.open();

$dropdown.focus();

window.document.body.addEventListener("click", _onClickOutside, true);
$(hostEditor).on("scroll", _closeDropdown);
$(PanelManager).on("editorAreaResize", _closeDropdown);
function _onDropdownSelect(event, fileInfo) {
_addRule(selectorName, cssInlineEditor, fileInfo.fullPath);
}

/**
Expand All @@ -302,27 +201,24 @@ define(function (require, exports, module) {
* Update the enablement of associated menu commands.
*/
function _updateCommands() {
_newRuleCmd.setEnabled(cssInlineEditor.hasFocus() && !$newRuleButton.hasClass("disabled"));
_newRuleCmd.setEnabled(cssInlineEditor.hasFocus() && !newRuleButton.$button.hasClass("disabled"));
}

/**
* @private
* Create a new rule on click.
*/
function _handleNewRuleClick(e) {
if (!$newRuleButton.hasClass("disabled")) {
if (!newRuleButton.$button.hasClass("disabled")) {
if (cssFileInfos.length === 1) {
// Just go ahead and create the rule.
_addRule(selectorName, cssInlineEditor, cssFileInfos[0].fullPath);
} else if ($dropdown) {
_closeDropdown();
} else {
_showDropdown();
// Although not attached to button click in 'dropdown mode', this handler can still be
// invoked via the command shortcut. Just toggle dropdown open/closed in that case.
newRuleButton.toggleDropdown();
}
}
if (e) {
e.stopPropagation();
}
}

/**
Expand Down Expand Up @@ -388,6 +284,10 @@ define(function (require, exports, module) {
return fileInfos;
}

function _onHostEditorScroll() {
newRuleButton.closeDropdown();
}

CSSUtils.findMatchingRules(selectorName, hostEditor.document)
.done(function (rules) {
var inlineEditorDeferred = new $.Deferred();
Expand All @@ -401,17 +301,22 @@ define(function (require, exports, module) {
inlineEditorDeferred.resolve();
});
$(cssInlineEditor).on("close", function () {
_closeDropdown();
newRuleButton.closeDropdown();
$(hostEditor).off("scroll", _onHostEditorScroll);
});

var $header = $(".inline-editor-header", cssInlineEditor.$htmlContent);
$newRuleButton = $("<button class='stylesheet-button btn btn-mini disabled'/>")
.text(Strings.BUTTON_NEW_RULE)
.on("click", _handleNewRuleClick);
$header.append($newRuleButton);
newRuleButton = new DropdownButton(Strings.BUTTON_NEW_RULE, []); // actual item list populated later, below
newRuleButton.$button.addClass("disabled"); // disabled until list is known
newRuleButton.$button.addClass("btn-mini stylesheet-button");
newRuleButton.itemRenderer = _stylesheetListRenderer;
$header.append(newRuleButton.$button);
_newRuleHandlers.push({inlineEditor: cssInlineEditor, handler: _handleNewRuleClick});

$(hostEditor).on("scroll", _onHostEditorScroll);

result.resolve(cssInlineEditor);


// Now that dialog has been built, collect list of stylesheets
var stylesheetsPromise = _getCSSFilesInProject();
Expand All @@ -428,14 +333,21 @@ define(function (require, exports, module) {
// "New Rule" button is disabled by default and gets enabled
// here if there are any stylesheets in project
if (cssFileInfos.length > 0) {
$newRuleButton.removeClass("disabled");
newRuleButton.$button.removeClass("disabled");
if (!rules.length) {
// Force focus to the button so the user can create a new rule from the keyboard.
$newRuleButton.focus();
newRuleButton.$button.focus();
}

if (cssFileInfos.length === 1) {
// Make it look & feel like a plain button in this case
newRuleButton.$button.removeClass("btn-dropdown");
newRuleButton.$button.on("click", _handleNewRuleClick);
} else {
// Fill out remaining dropdown attributes otherwise
newRuleButton.items = cssFileInfos;
$(newRuleButton).on("select", _onDropdownSelect);
}
}
if (cssFileInfos.length > 1) {
$newRuleButton.addClass("btn-dropdown");
}

_updateCommands();
Expand Down
9 changes: 0 additions & 9 deletions src/htmlContent/stylesheets-menu.html

This file was deleted.

8 changes: 8 additions & 0 deletions src/nls/root/strings.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,14 @@ define({
"FIND_IN_FILES_EXPAND_COLLAPSE" : "Ctrl/Cmd click to expand/collapse all",
"ERROR_FETCHING_UPDATE_INFO_TITLE" : "Error getting update info",
"ERROR_FETCHING_UPDATE_INFO_MSG" : "There was a problem getting the latest update information from the server. Please make sure you are connected to the internet and try again.",

// File exclusion filters
"NO_FILE_FILTER" : "No filter",
"EDIT_FILE_FILTER" : "Edit filter...",
"FILE_FILTER_INSTRUCTIONS" : "Exclude files and folders matching any of the following strings / substrings or <a href='{0}' title='{0}'>globs</a>. Enter each string on a new line.",
"FILE_FILTER_LIST_PREFIX" : "except",
"FILE_FILTER_CLIPPED_SUFFIX" : "and {0} more",


/**
* ProjectManager
Expand Down
Loading