From 164ffa89889123a963d7e9d6a98beacdf4b6b1b0 Mon Sep 17 00:00:00 2001 From: Chema Date: Fri, 7 Sep 2012 20:27:41 +0200 Subject: [PATCH 01/14] - Basic bottom panel resize behaviour --- src/htmlContent/main-view.html | 3 + src/language/JSLintUtils.js | 126 ++++++++++++++++++++++++++++- src/search/FindInFiles.js | 120 ++++++++++++++++++++++++++- src/styles/brackets.less | 15 ++++ src/styles/brackets_variables.less | 1 + 5 files changed, 260 insertions(+), 5 deletions(-) diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index 45ab3382a04..ac4aac47400 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -96,12 +96,15 @@
+
{{JSLINT_ERRORS}}
+
+
{{SEARCH_RESULTS}}
diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index 47710c5666d..19673a75e38 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -23,7 +23,7 @@ /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ -/*global define, $, JSLINT, PathUtils */ +/*global define, $, JSLINT, PathUtils, document, window */ /** * Allows JSLint to run on the current document and report results in a UI panel. @@ -43,7 +43,21 @@ define(function (require, exports, module) { PreferencesManager = require("preferences/PreferencesManager"), PerfUtils = require("utils/PerfUtils"), Strings = require("strings"), - EditorManager = require("editor/EditorManager"); + EditorManager = require("editor/EditorManager"), + AppInit = require("utils/AppInit"); + + var EDITOR_MIN_HEIGHT = 400, + MIN_HEIGHT = 100; + + var PREFERENCES_CLIENT_ID = module.id, + defaultPrefs = { height: 200, enabled: true }; + + // These vars are initialized by the htmlReady handler + // below since they refer to DOM elements + var $mainView, + $jslintResults, + $jslintContent, + $jslintResizer; /** * @private @@ -199,14 +213,120 @@ define(function (require, exports, module) { setEnabled(!getEnabled()); } + /** + * @private + * Sets sidebar width and resizes editor. Does not change internal sidebar open/closed state. + * @param {number} width Optional width in pixels. If null or undefined, the default width is used. + */ + function _setHeight(height) { + // if we specify a width with the handler call, use that. Otherwise use + // the greater of the current width or 200 (200 is the minimum width we'd snap back to) + + //var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs), + // sidebarWidth = Math.max(prefs.getValue("sidebarWidth"), 10); + + //width = width || Math.max($sidebar.width(), sidebarWidth); + + $jslintResults.height(height); + $jslintContent.height(height - 30); + //$jslintResizer.css("bottom", height - 1); + + // the following three lines help resize things when the sidebar shows + // but ultimately these should go into ProjectManager.js with a "notify" + // event that we can just call from anywhere instead of hard-coding it. + // waiting on a ProjectManager refactor to add that. + // $sidebar.find(".sidebar-selection").width(width); + + _prefs.setValue("height", height); + EditorManager.resizeEditor(); + } + + /** + * @private + * Install sidebar resize handling. + */ + function _initJSLintResizer() { + var $body = $(document.body), + animationRequest = null, + isMouseDown = false; + + console.log("_________8"); + + if (_enabled) { + _setHeight(_prefs.getValue("height")); + } + + $jslintResizer.on("mousedown.jslint", function (e) { + var startY = e.clientY, + newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT), + doResize = true; + + newHeight = Math.max(newHeight, MIN_HEIGHT); + isMouseDown = true; + + // take away the shadows (for performance reasons during sidebarmovement) + //$sidebar.find(".scroller-shadow").css("display", "none"); + + $body.toggleClass("hor-resizing"); + + animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { + // only run this if the mouse is down so we don't constantly loop even + // after we're done resizing. + if (!isMouseDown) { + return; + } + + if (doResize) { + // for right now, displayTriangle is always going to be false for _setWidth + // because we want to hide it when we move, and _setWidth only gets called + // on mousemove now. + _setHeight(newHeight); + } + + animationRequest = window.webkitRequestAnimationFrame(doRedraw); + }); + + $mainView.on("mousemove.jslint", function (e) { + newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT); + newHeight = Math.max(newHeight, MIN_HEIGHT); + e.preventDefault(); + }); + + $mainView.one("mouseup.jslint", function (e) { + isMouseDown = false; + + // replace shadows and triangle + //$sidebar.find(".scroller-shadow").css("display", "block"); + + //$projectFilesContainer.triggerHandler("scroll"); + //$openFilesContainer.triggerHandler("scroll"); + $mainView.off("mousemove.jslint"); + $body.toggleClass("hor-resizing"); + //startingSidebarPosition = $sidebar.width(); + }); + + e.preventDefault(); + }); + } // Register command handlers CommandManager.register(Strings.CMD_JSLINT, Commands.TOGGLE_JSLINT, _handleToggleJSLint); // Init PreferenceStorage - _prefs = PreferencesManager.getPreferenceStorage(module.id, { enabled: true }); + _prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs); _setEnabled(_prefs.getValue("enabled")); + // Initialize items dependent on HTML DOM + AppInit.htmlReady(function () { + $mainView = $(".main-view"); + $jslintResults = $("#jslint-results"); + $jslintResizer = $("#jslint-resizer"); + $jslintContent = $("#jslint-results .table-container"); + + // init + _initJSLintResizer(); + }); + // Define public API exports.run = run; exports.getEnabled = getEnabled; diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 0ceba5a3ff0..f60df9049cf 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -22,7 +22,7 @@ */ /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */ -/*global define, $, PathUtils, window */ +/*global define, $, PathUtils, window, document */ /* * Adds a "find in files" command to allow the user to find all occurances of a string in all files in @@ -49,10 +49,24 @@ define(function (require, exports, module) { StringUtils = require("utils/StringUtils"), DocumentManager = require("document/DocumentManager"), EditorManager = require("editor/EditorManager"), - FileIndexManager = require("project/FileIndexManager"); + FileIndexManager = require("project/FileIndexManager"), + AppInit = require("utils/AppInit"), + PreferencesManager = require("preferences/PreferencesManager"); var FIND_IN_FILES_MAX = 100; + var EDITOR_MIN_HEIGHT = 400, + MIN_HEIGHT = 100; + + var PREFERENCES_CLIENT_ID = module.id, + defaultPrefs = { height: 200 }; + + // These vars are initialized by the htmlReady handler + // below since they refer to DOM elements + var $searchResults, + $searchContent, + $searchResizer; + // This dialog class was mostly copied from QuickOpen. We should have a common dialog // class that everyone can use. @@ -330,6 +344,108 @@ define(function (require, exports, module) { } }); } + + /** + * @private + * Sets sidebar width and resizes editor. Does not change internal sidebar open/closed state. + * @param {number} width Optional width in pixels. If null or undefined, the default width is used. + */ + function _setHeight(height) { + // if we specify a width with the handler call, use that. Otherwise use + // the greater of the current width or 200 (200 is the minimum width we'd snap back to) + + var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs); + // sidebarWidth = Math.max(prefs.getValue("sidebarWidth"), 10); + + //width = width || Math.max($sidebar.width(), sidebarWidth); + + $searchResults.height(height); + $searchContent.height(height - 30); + //$jslintResizer.css("bottom", height - 1); + + // the following three lines help resize things when the sidebar shows + // but ultimately these should go into ProjectManager.js with a "notify" + // event that we can just call from anywhere instead of hard-coding it. + // waiting on a ProjectManager refactor to add that. + // $sidebar.find(".sidebar-selection").width(width); + + prefs.setValue("height", height); + EditorManager.resizeEditor(); + } + + /** + * @private + * Install sidebar resize handling. + */ + function _initSearchResizer() { + var $mainView = $(".main-view"), + $body = $(document.body), + prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs), + animationRequest = null, + isMouseDown = false; + + $searchResizer.on("mousedown.search", function (e) { + var startY = e.clientY, + newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT), + doResize = true; + + newHeight = Math.max(newHeight, MIN_HEIGHT); + isMouseDown = true; + + // take away the shadows (for performance reasons during sidebarmovement) + //$sidebar.find(".scroller-shadow").css("display", "none"); + + $body.toggleClass("hor-resizing"); + + animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { + // only run this if the mouse is down so we don't constantly loop even + // after we're done resizing. + if (!isMouseDown) { + return; + } + + if (doResize) { + // for right now, displayTriangle is always going to be false for _setWidth + // because we want to hide it when we move, and _setWidth only gets called + // on mousemove now. + _setHeight(newHeight); + } + + animationRequest = window.webkitRequestAnimationFrame(doRedraw); + }); + + $mainView.on("mousemove.search", function (e) { + newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT); + newHeight = Math.max(newHeight, MIN_HEIGHT); + e.preventDefault(); + }); + + $mainView.one("mouseup.search", function (e) { + isMouseDown = false; + + // replace shadows and triangle + //$sidebar.find(".scroller-shadow").css("display", "block"); + + //$projectFilesContainer.triggerHandler("scroll"); + //$openFilesContainer.triggerHandler("scroll"); + $mainView.off("mousemove.search"); + $body.toggleClass("hor-resizing"); + //startingSidebarPosition = $sidebar.width(); + }); + + e.preventDefault(); + }); + } CommandManager.register(Strings.CMD_FIND_IN_FILES, Commands.EDIT_FIND_IN_FILES, doFindInFiles); + + // Initialize items dependent on HTML DOM + AppInit.htmlReady(function () { + $searchResults = $("#search-results"); + $searchResizer = $("#search-resizer"); + $searchContent = $("#search-results .table-container"); + + // init + _initSearchResizer(); + }); }); \ No newline at end of file diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 13b18fcaff4..7dea36e4e3b 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -67,6 +67,12 @@ body { &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines { cursor: col-resize; } + + /* This appears to be necessary in Firefox when body is set to display: box. */ + height: 100%; + &.hor-resizing a, &.hor-resizing #projects a, &.hor-resizing .main-view, &.hor-resizing .CodeMirror-lines { + cursor: row-resize; + } } @@ -125,6 +131,15 @@ a, img { border-width: 1px; border-color: lighten(@bc-grey, @bc-color-step-size*4); + .h-resizer { + position: absolute; + height: 6px; + width: 100%; + z-index: @z-index-brackets-bottom-resizer; + opacity: 0; + cursor: row-resize; + } + .toolbar { height: auto; padding-top: @base-padding / 2; diff --git a/src/styles/brackets_variables.less b/src/styles/brackets_variables.less index 170bf59b3f4..e757a2a7480 100644 --- a/src/styles/brackets_variables.less +++ b/src/styles/brackets_variables.less @@ -50,5 +50,6 @@ @z-index-brackets-sidebar-resizer: @z-index-brackets-ui + 2; @z-index-brackets-resizer-div: @z-index-brackets-sidebar-resizer + 1; +@z-index-brackets-bottom-resizer: @z-index-brackets-ui + 2; @z-index-brackets-context-menu-base: 1000; From 3b05f42a8e6b05f01aad0bc15a0f974e2cdf0cf7 Mon Sep 17 00:00:00 2001 From: Chema Date: Sat, 8 Sep 2012 16:11:43 +0200 Subject: [PATCH 02/14] Combine both panels to get available height. Check search panel visibility to adjust jslint mouse drag position --- src/language/JSLintUtils.js | 29 ++++++++++++++++++++--------- src/search/FindInFiles.js | 25 ++++++++++++++++--------- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index 19673a75e38..b6ecd33a7a1 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -57,7 +57,8 @@ define(function (require, exports, module) { var $mainView, $jslintResults, $jslintContent, - $jslintResizer; + $jslintResizer, + $searchResults; /** * @private @@ -225,7 +226,13 @@ define(function (require, exports, module) { //var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs), // sidebarWidth = Math.max(prefs.getValue("sidebarWidth"), 10); - //width = width || Math.max($sidebar.width(), sidebarWidth); + var availableHeight = $mainView.height() - EDITOR_MIN_HEIGHT; + if ($searchResults.is(':visible')) { + availableHeight -= $searchResults.height(); + } + + height = Math.min(height, availableHeight); + height = Math.max(height, MIN_HEIGHT); $jslintResults.height(height); $jslintContent.height(height - 30); @@ -249,19 +256,20 @@ define(function (require, exports, module) { var $body = $(document.body), animationRequest = null, isMouseDown = false; - - console.log("_________8"); - + if (_enabled) { _setHeight(_prefs.getValue("height")); } $jslintResizer.on("mousedown.jslint", function (e) { var startY = e.clientY, - newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT), + newHeight = $mainView.height() - e.clientY, doResize = true; + + if ($searchResults.is(':visible')) { + newHeight -= $searchResults.height(); + } - newHeight = Math.max(newHeight, MIN_HEIGHT); isMouseDown = true; // take away the shadows (for performance reasons during sidebarmovement) @@ -287,8 +295,10 @@ define(function (require, exports, module) { }); $mainView.on("mousemove.jslint", function (e) { - newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT); - newHeight = Math.max(newHeight, MIN_HEIGHT); + newHeight = $mainView.height() - e.clientY; + if ($searchResults.is(':visible')) { + newHeight -= $searchResults.height(); + } e.preventDefault(); }); @@ -322,6 +332,7 @@ define(function (require, exports, module) { $jslintResults = $("#jslint-results"); $jslintResizer = $("#jslint-resizer"); $jslintContent = $("#jslint-results .table-container"); + $searchResults = $("#search-results"); // init _initJSLintResizer(); diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index f60df9049cf..2d9983ec98a 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -63,9 +63,11 @@ define(function (require, exports, module) { // These vars are initialized by the htmlReady handler // below since they refer to DOM elements - var $searchResults, + var $mainView, + $searchResults, $searchContent, - $searchResizer; + $searchResizer, + $jslintResults; // This dialog class was mostly copied from QuickOpen. We should have a common dialog // class that everyone can use. @@ -357,7 +359,13 @@ define(function (require, exports, module) { var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs); // sidebarWidth = Math.max(prefs.getValue("sidebarWidth"), 10); - //width = width || Math.max($sidebar.width(), sidebarWidth); + var availableHeight = $mainView.height() - EDITOR_MIN_HEIGHT; + if ($jslintResults.is(':visible')) { + availableHeight -= $jslintResults.height(); + } + + height = Math.min(height, availableHeight); + height = Math.max(height, MIN_HEIGHT); $searchResults.height(height); $searchContent.height(height - 30); @@ -378,18 +386,16 @@ define(function (require, exports, module) { * Install sidebar resize handling. */ function _initSearchResizer() { - var $mainView = $(".main-view"), - $body = $(document.body), + var $body = $(document.body), prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs), animationRequest = null, isMouseDown = false; $searchResizer.on("mousedown.search", function (e) { var startY = e.clientY, - newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT), + newHeight = $mainView.height() - e.clientY, doResize = true; - newHeight = Math.max(newHeight, MIN_HEIGHT); isMouseDown = true; // take away the shadows (for performance reasons during sidebarmovement) @@ -415,8 +421,7 @@ define(function (require, exports, module) { }); $mainView.on("mousemove.search", function (e) { - newHeight = Math.min($mainView.height() - e.clientY, $mainView.height() - EDITOR_MIN_HEIGHT); - newHeight = Math.max(newHeight, MIN_HEIGHT); + newHeight = $mainView.height() - e.clientY; e.preventDefault(); }); @@ -441,9 +446,11 @@ define(function (require, exports, module) { // Initialize items dependent on HTML DOM AppInit.htmlReady(function () { + $mainView = $(".main-view"); $searchResults = $("#search-results"); $searchResizer = $("#search-resizer"); $searchContent = $("#search-results .table-container"); + $jslintResults = $("#jslint-results"); // init _initSearchResizer(); From 19fa897774ecd03567e4dc3c483df212d60c53a0 Mon Sep 17 00:00:00 2001 From: Chema Date: Sat, 15 Sep 2012 14:52:01 +0200 Subject: [PATCH 03/14] - Removed panels coupling - Removed old comments --- src/language/JSLintUtils.js | 50 ++++--------------------------------- src/search/FindInFiles.js | 43 ++++--------------------------- 2 files changed, 10 insertions(+), 83 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index b6ecd33a7a1..921b40b25e5 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -46,8 +46,7 @@ define(function (require, exports, module) { EditorManager = require("editor/EditorManager"), AppInit = require("utils/AppInit"); - var EDITOR_MIN_HEIGHT = 400, - MIN_HEIGHT = 100; + var MIN_HEIGHT = 100; var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200, enabled: true }; @@ -59,7 +58,7 @@ define(function (require, exports, module) { $jslintContent, $jslintResizer, $searchResults; - + /** * @private * @type {PreferenceStorage} @@ -220,29 +219,10 @@ define(function (require, exports, module) { * @param {number} width Optional width in pixels. If null or undefined, the default width is used. */ function _setHeight(height) { - // if we specify a width with the handler call, use that. Otherwise use - // the greater of the current width or 200 (200 is the minimum width we'd snap back to) - - //var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs), - // sidebarWidth = Math.max(prefs.getValue("sidebarWidth"), 10); - - var availableHeight = $mainView.height() - EDITOR_MIN_HEIGHT; - if ($searchResults.is(':visible')) { - availableHeight -= $searchResults.height(); - } - - height = Math.min(height, availableHeight); height = Math.max(height, MIN_HEIGHT); $jslintResults.height(height); $jslintContent.height(height - 30); - //$jslintResizer.css("bottom", height - 1); - - // the following three lines help resize things when the sidebar shows - // but ultimately these should go into ProjectManager.js with a "notify" - // event that we can just call from anywhere instead of hard-coding it. - // waiting on a ProjectManager refactor to add that. - // $sidebar.find(".sidebar-selection").width(width); _prefs.setValue("height", height); EditorManager.resizeEditor(); @@ -263,18 +243,11 @@ define(function (require, exports, module) { $jslintResizer.on("mousedown.jslint", function (e) { var startY = e.clientY, - newHeight = $mainView.height() - e.clientY, + startHeight = $jslintResults.height(), + newHeight = startHeight + (startY - e.clientY), doResize = true; - - if ($searchResults.is(':visible')) { - newHeight -= $searchResults.height(); - } isMouseDown = true; - - // take away the shadows (for performance reasons during sidebarmovement) - //$sidebar.find(".scroller-shadow").css("display", "none"); - $body.toggleClass("hor-resizing"); animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { @@ -285,9 +258,6 @@ define(function (require, exports, module) { } if (doResize) { - // for right now, displayTriangle is always going to be false for _setWidth - // because we want to hide it when we move, and _setWidth only gets called - // on mousemove now. _setHeight(newHeight); } @@ -295,24 +265,14 @@ define(function (require, exports, module) { }); $mainView.on("mousemove.jslint", function (e) { - newHeight = $mainView.height() - e.clientY; - if ($searchResults.is(':visible')) { - newHeight -= $searchResults.height(); - } + newHeight = startHeight + (startY - e.clientY); e.preventDefault(); }); $mainView.one("mouseup.jslint", function (e) { isMouseDown = false; - - // replace shadows and triangle - //$sidebar.find(".scroller-shadow").css("display", "block"); - - //$projectFilesContainer.triggerHandler("scroll"); - //$openFilesContainer.triggerHandler("scroll"); $mainView.off("mousemove.jslint"); $body.toggleClass("hor-resizing"); - //startingSidebarPosition = $sidebar.width(); }); e.preventDefault(); diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 2d9983ec98a..0e48a873af0 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -55,8 +55,7 @@ define(function (require, exports, module) { var FIND_IN_FILES_MAX = 100; - var EDITOR_MIN_HEIGHT = 400, - MIN_HEIGHT = 100; + var MIN_HEIGHT = 100; var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200 }; @@ -353,29 +352,12 @@ define(function (require, exports, module) { * @param {number} width Optional width in pixels. If null or undefined, the default width is used. */ function _setHeight(height) { - // if we specify a width with the handler call, use that. Otherwise use - // the greater of the current width or 200 (200 is the minimum width we'd snap back to) - var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs); - // sidebarWidth = Math.max(prefs.getValue("sidebarWidth"), 10); - - var availableHeight = $mainView.height() - EDITOR_MIN_HEIGHT; - if ($jslintResults.is(':visible')) { - availableHeight -= $jslintResults.height(); - } - - height = Math.min(height, availableHeight); + height = Math.max(height, MIN_HEIGHT); $searchResults.height(height); $searchContent.height(height - 30); - //$jslintResizer.css("bottom", height - 1); - - // the following three lines help resize things when the sidebar shows - // but ultimately these should go into ProjectManager.js with a "notify" - // event that we can just call from anywhere instead of hard-coding it. - // waiting on a ProjectManager refactor to add that. - // $sidebar.find(".sidebar-selection").width(width); prefs.setValue("height", height); EditorManager.resizeEditor(); @@ -393,27 +375,19 @@ define(function (require, exports, module) { $searchResizer.on("mousedown.search", function (e) { var startY = e.clientY, - newHeight = $mainView.height() - e.clientY, + startHeight = $jslintResults.height(), + newHeight = startHeight + (startY - e.clientY), doResize = true; isMouseDown = true; - - // take away the shadows (for performance reasons during sidebarmovement) - //$sidebar.find(".scroller-shadow").css("display", "none"); - $body.toggleClass("hor-resizing"); animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { - // only run this if the mouse is down so we don't constantly loop even - // after we're done resizing. if (!isMouseDown) { return; } if (doResize) { - // for right now, displayTriangle is always going to be false for _setWidth - // because we want to hide it when we move, and _setWidth only gets called - // on mousemove now. _setHeight(newHeight); } @@ -421,21 +395,14 @@ define(function (require, exports, module) { }); $mainView.on("mousemove.search", function (e) { - newHeight = $mainView.height() - e.clientY; + newHeight = startHeight + (startY - e.clientY); e.preventDefault(); }); $mainView.one("mouseup.search", function (e) { isMouseDown = false; - - // replace shadows and triangle - //$sidebar.find(".scroller-shadow").css("display", "block"); - - //$projectFilesContainer.triggerHandler("scroll"); - //$openFilesContainer.triggerHandler("scroll"); $mainView.off("mousemove.search"); $body.toggleClass("hor-resizing"); - //startingSidebarPosition = $sidebar.width(); }); e.preventDefault(); From e714f3870ff8a38e85a1cb7cb34b156b6aff88bf Mon Sep 17 00:00:00 2001 From: Chema Date: Sun, 16 Sep 2012 12:06:11 +0200 Subject: [PATCH 04/14] Cleanup vars and comments --- src/language/JSLintUtils.js | 18 ++++++++++-------- src/search/FindInFiles.js | 17 +++++++++++------ 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index 1cb2ae1c80b..35e74d76778 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -57,8 +57,8 @@ define(function (require, exports, module) { var $mainView, $jslintResults, $jslintContent, - $jslintResizer, - $searchResults; + $jslintToolbar, + $jslintResizer; /** * @private @@ -216,22 +216,22 @@ define(function (require, exports, module) { /** * @private - * Sets sidebar width and resizes editor. Does not change internal sidebar open/closed state. - * @param {number} width Optional width in pixels. If null or undefined, the default width is used. + * Sets jslint panel height and resizes editor. + * @param {number} height Height in pixels. */ function _setHeight(height) { height = Math.max(height, MIN_HEIGHT); + _prefs.setValue("height", height); $jslintResults.height(height); - $jslintContent.height(height - 30); + $jslintContent.height(height - $jslintToolbar); - _prefs.setValue("height", height); EditorManager.resizeEditor(); } /** * @private - * Install sidebar resize handling. + * Initialize resize handling. */ function _initJSLintResizer() { var $body = $(document.body), @@ -266,6 +266,8 @@ define(function (require, exports, module) { }); $mainView.on("mousemove.jslint", function (e) { + // calculate newHeight as difference between stargint and current + // position to avoid dependencies with other panels newHeight = startHeight + (startY - e.clientY); e.preventDefault(); }); @@ -292,8 +294,8 @@ define(function (require, exports, module) { $mainView = $(".main-view"); $jslintResults = $("#jslint-results"); $jslintResizer = $("#jslint-resizer"); + $jslintToolbar = $("#jslint-results .toolbar"); $jslintContent = $("#jslint-results .table-container"); - $searchResults = $("#search-results"); // init _initJSLintResizer(); diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 6540b08a967..63fe93b8ec9 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -66,8 +66,8 @@ define(function (require, exports, module) { var $mainView, $searchResults, $searchContent, - $searchResizer, - $jslintResults; + $searchToolbar, + $searchResizer; // This dialog class was mostly copied from QuickOpen. We should have a common dialog // class that everyone can use. @@ -349,8 +349,8 @@ define(function (require, exports, module) { /** * @private - * Sets sidebar width and resizes editor. Does not change internal sidebar open/closed state. - * @param {number} width Optional width in pixels. If null or undefined, the default width is used. + * Sets jslint panel height and resizes editor. + * @param {number} height Height in pixels. */ function _setHeight(height) { var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs); @@ -358,7 +358,7 @@ define(function (require, exports, module) { height = Math.max(height, MIN_HEIGHT); $searchResults.height(height); - $searchContent.height(height - 30); + $searchContent.height(height - $searchToolbar); prefs.setValue("height", height); EditorManager.resizeEditor(); @@ -366,7 +366,7 @@ define(function (require, exports, module) { /** * @private - * Install sidebar resize handling. + * Install resize handling. */ function _initSearchResizer() { var $body = $(document.body), @@ -384,6 +384,8 @@ define(function (require, exports, module) { $body.toggleClass("hor-resizing"); animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { + // only run this if the mouse is down so we don't constantly loop even + // after we're done resizing. if (!isMouseDown) { return; } @@ -396,6 +398,8 @@ define(function (require, exports, module) { }); $mainView.on("mousemove.search", function (e) { + // calculate newHeight as difference between stargint and current + // position to avoid dependencies with other panels newHeight = startHeight + (startY - e.clientY); e.preventDefault(); }); @@ -417,6 +421,7 @@ define(function (require, exports, module) { $mainView = $(".main-view"); $searchResults = $("#search-results"); $searchResizer = $("#search-resizer"); + $searchToolbar = $("#search-results .toolbar"); $searchContent = $("#search-results .table-container"); // init From cbadfc48f1cf548bef0db43ead2ee489fb10a0e0 Mon Sep 17 00:00:00 2001 From: Chema Date: Sun, 16 Sep 2012 12:14:36 +0200 Subject: [PATCH 05/14] Fix bug in search panel resize with toolbar height --- src/search/FindInFiles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 63fe93b8ec9..14428fdc858 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -358,7 +358,7 @@ define(function (require, exports, module) { height = Math.max(height, MIN_HEIGHT); $searchResults.height(height); - $searchContent.height(height - $searchToolbar); + $searchContent.height(height - $searchToolbar.height()); prefs.setValue("height", height); EditorManager.resizeEditor(); From e2ff4eaf3338179a05e2aea5a30a7c965f6fdbce Mon Sep 17 00:00:00 2001 From: Chema Date: Sun, 16 Sep 2012 12:18:56 +0200 Subject: [PATCH 06/14] Fixed comment indentation --- src/search/FindInFiles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 14428fdc858..f3df9586a3a 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -416,7 +416,7 @@ define(function (require, exports, module) { CommandManager.register(Strings.CMD_FIND_IN_FILES, Commands.EDIT_FIND_IN_FILES, doFindInFiles); - // Initialize items dependent on HTML DOM + // Initialize items dependent on HTML DOM AppInit.htmlReady(function () { $mainView = $(".main-view"); $searchResults = $("#search-results"); From 9e25576483d4c02f5abad8f86fa898d92b93467c Mon Sep 17 00:00:00 2001 From: Chema Date: Thu, 27 Sep 2012 00:27:31 +0200 Subject: [PATCH 07/14] Use outerHeight() for toolbars height to account for paddings and margins Fixed missing toolbar.outerHeight() in _setHeight for jsLint --- src/language/JSLintUtils.js | 10 +++++++++- src/search/FindInFiles.js | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index 35e74d76778..a93b6956631 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -220,11 +220,19 @@ define(function (require, exports, module) { * @param {number} height Height in pixels. */ function _setHeight(height) { + // There seems to be a race condition when accessing height if JSLint is + // enabled when Brackets is opening. Neither htmlReady nor appReady seem + // to work for that. Forcing 27px height for the toolbar in that case. + var toolbarHeight = $jslintToolbar.outerHeight(true); + if (!$jslintToolbar.height()) { + toolbarHeight = 27; + } + height = Math.max(height, MIN_HEIGHT); _prefs.setValue("height", height); $jslintResults.height(height); - $jslintContent.height(height - $jslintToolbar); + $jslintContent.height(height - toolbarHeight); EditorManager.resizeEditor(); } diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index f3df9586a3a..ded6342088f 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -358,7 +358,7 @@ define(function (require, exports, module) { height = Math.max(height, MIN_HEIGHT); $searchResults.height(height); - $searchContent.height(height - $searchToolbar.height()); + $searchContent.height(height - $searchToolbar.outerHeight()); prefs.setValue("height", height); EditorManager.resizeEditor(); From e8530665684594c5ab329a3393cd5d3b36878db4 Mon Sep 17 00:00:00 2001 From: Chema Date: Fri, 28 Sep 2012 03:17:14 +0200 Subject: [PATCH 08/14] Resize behavior refactored in utils/Resizer --- src/brackets.js | 3 +- src/htmlContent/main-view.html | 10 +-- src/language/JSLintUtils.js | 115 +++++-------------------- src/search/FindInFiles.js | 101 ++++------------------ src/styles/brackets_variables.less | 2 + src/utils/Resizer.js | 130 +++++++++++++++++++++++++++++ 6 files changed, 172 insertions(+), 189 deletions(-) create mode 100644 src/utils/Resizer.js diff --git a/src/brackets.js b/src/brackets.js index 07c338d3e57..46bcccf5239 100644 --- a/src/brackets.js +++ b/src/brackets.js @@ -90,7 +90,8 @@ define(function (require, exports, module) { UpdateNotification = require("utils/UpdateNotification"), UrlParams = require("utils/UrlParams").UrlParams, NativeFileSystem = require("file/NativeFileSystem").NativeFileSystem, - PreferencesManager = require("preferences/PreferencesManager"); + PreferencesManager = require("preferences/PreferencesManager"), + Resizer = require("utils/Resizer"); // Local variables var params = new UrlParams(), diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index 08b4b91dbf7..b5da3cb256a 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -94,22 +94,20 @@
-
-
+
{{JSLINT_ERRORS}}
-
+
-
-
+
{{SEARCH_RESULTS}}
×
-
+
diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index a93b6956631..adb0add17e0 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -45,20 +45,11 @@ define(function (require, exports, module) { PreferencesManager = require("preferences/PreferencesManager"), PerfUtils = require("utils/PerfUtils"), Strings = require("strings"), - AppInit = require("utils/AppInit"); - - var MIN_HEIGHT = 100; - + AppInit = require("utils/AppInit"), + Resizer = require("utils/Resizer"); + var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200, enabled: true }; - - // These vars are initialized by the htmlReady handler - // below since they refer to DOM elements - var $mainView, - $jslintResults, - $jslintContent, - $jslintToolbar, - $jslintResizer; /** * @private @@ -214,82 +205,6 @@ define(function (require, exports, module) { setEnabled(!getEnabled()); } - /** - * @private - * Sets jslint panel height and resizes editor. - * @param {number} height Height in pixels. - */ - function _setHeight(height) { - // There seems to be a race condition when accessing height if JSLint is - // enabled when Brackets is opening. Neither htmlReady nor appReady seem - // to work for that. Forcing 27px height for the toolbar in that case. - var toolbarHeight = $jslintToolbar.outerHeight(true); - if (!$jslintToolbar.height()) { - toolbarHeight = 27; - } - - height = Math.max(height, MIN_HEIGHT); - _prefs.setValue("height", height); - - $jslintResults.height(height); - $jslintContent.height(height - toolbarHeight); - - EditorManager.resizeEditor(); - } - - /** - * @private - * Initialize resize handling. - */ - function _initJSLintResizer() { - var $body = $(document.body), - animationRequest = null, - isMouseDown = false; - - if (_enabled) { - _setHeight(_prefs.getValue("height")); - } - - $jslintResizer.on("mousedown.jslint", function (e) { - var startY = e.clientY, - startHeight = $jslintResults.height(), - newHeight = startHeight + (startY - e.clientY), - doResize = true; - - isMouseDown = true; - $body.toggleClass("hor-resizing"); - - animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { - // only run this if the mouse is down so we don't constantly loop even - // after we're done resizing. - if (!isMouseDown) { - return; - } - - if (doResize) { - _setHeight(newHeight); - } - - animationRequest = window.webkitRequestAnimationFrame(doRedraw); - }); - - $mainView.on("mousemove.jslint", function (e) { - // calculate newHeight as difference between stargint and current - // position to avoid dependencies with other panels - newHeight = startHeight + (startY - e.clientY); - e.preventDefault(); - }); - - $mainView.one("mouseup.jslint", function (e) { - isMouseDown = false; - $mainView.off("mousemove.jslint"); - $body.toggleClass("hor-resizing"); - }); - - e.preventDefault(); - }); - } - // Register command handlers CommandManager.register(Strings.CMD_JSLINT, Commands.TOGGLE_JSLINT, _handleToggleJSLint); @@ -299,18 +214,26 @@ define(function (require, exports, module) { // Initialize items dependent on HTML DOM AppInit.htmlReady(function () { - $mainView = $(".main-view"); - $jslintResults = $("#jslint-results"); - $jslintResizer = $("#jslint-resizer"); - $jslintToolbar = $("#jslint-results .toolbar"); - $jslintContent = $("#jslint-results .table-container"); + var height = _prefs.getValue("height"), + $jslintResults = $("#jslint-results"), + $jslintContent = $("#jslint-results .table-container"); - // init - _initJSLintResizer(); + $jslintResults.height(height); + $jslintContent.height(height - 27); + + if (_enabled) { + EditorManager.resizeEditor(); + } + + $.when(Resizer.promise($jslintResults)).progress(function (status, height) { + if (status === "end") { + _prefs.setValue("height", height); + } + }); }); // Define public API exports.run = run; exports.getEnabled = getEnabled; exports.setEnabled = setEnabled; -}); +}); \ No newline at end of file diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index ded6342088f..37c069b18bc 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -50,25 +50,16 @@ define(function (require, exports, module) { DocumentManager = require("document/DocumentManager"), EditorManager = require("editor/EditorManager"), FileIndexManager = require("project/FileIndexManager"), - AppInit = require("utils/AppInit"), PreferencesManager = require("preferences/PreferencesManager"), - KeyEvent = require("utils/KeyEvent"); + KeyEvent = require("utils/KeyEvent"), + AppInit = require("utils/AppInit"), + Resizer = require("utils/Resizer"); var FIND_IN_FILES_MAX = 100; - - var MIN_HEIGHT = 100; var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200 }; - // These vars are initialized by the htmlReady handler - // below since they refer to DOM elements - var $mainView, - $searchResults, - $searchContent, - $searchToolbar, - $searchResizer; - // This dialog class was mostly copied from QuickOpen. We should have a common dialog // class that everyone can use. @@ -347,84 +338,22 @@ define(function (require, exports, module) { }); } - /** - * @private - * Sets jslint panel height and resizes editor. - * @param {number} height Height in pixels. - */ - function _setHeight(height) { - var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs); + // Initialize items dependent on HTML DOM + AppInit.htmlReady(function () { + var $searchResults = $("#search-results"), + $searchContent = $("#search-results .table-container"), + prefs = PreferencesManager.getPreferenceStorage(module.id, defaultPrefs), + height = prefs.getValue("height"); - height = Math.max(height, MIN_HEIGHT); - $searchResults.height(height); - $searchContent.height(height - $searchToolbar.outerHeight()); + $searchContent.height(height - 27); - prefs.setValue("height", height); - EditorManager.resizeEditor(); - } - - /** - * @private - * Install resize handling. - */ - function _initSearchResizer() { - var $body = $(document.body), - prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs), - animationRequest = null, - isMouseDown = false; - - $searchResizer.on("mousedown.search", function (e) { - var startY = e.clientY, - startHeight = $searchResults.height(), - newHeight = startHeight + (startY - e.clientY), - doResize = true; - - isMouseDown = true; - $body.toggleClass("hor-resizing"); - - animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { - // only run this if the mouse is down so we don't constantly loop even - // after we're done resizing. - if (!isMouseDown) { - return; - } - - if (doResize) { - _setHeight(newHeight); - } - - animationRequest = window.webkitRequestAnimationFrame(doRedraw); - }); - - $mainView.on("mousemove.search", function (e) { - // calculate newHeight as difference between stargint and current - // position to avoid dependencies with other panels - newHeight = startHeight + (startY - e.clientY); - e.preventDefault(); - }); - - $mainView.one("mouseup.search", function (e) { - isMouseDown = false; - $mainView.off("mousemove.search"); - $body.toggleClass("hor-resizing"); - }); - - e.preventDefault(); + $.when(Resizer.promise($("#search-results"))).progress(function (status, height) { + if (status === "end") { + prefs.setValue("height", height); + } }); - } + }); CommandManager.register(Strings.CMD_FIND_IN_FILES, Commands.EDIT_FIND_IN_FILES, doFindInFiles); - - // Initialize items dependent on HTML DOM - AppInit.htmlReady(function () { - $mainView = $(".main-view"); - $searchResults = $("#search-results"); - $searchResizer = $("#search-resizer"); - $searchToolbar = $("#search-results .toolbar"); - $searchContent = $("#search-results .table-container"); - - // init - _initSearchResizer(); - }); }); diff --git a/src/styles/brackets_variables.less b/src/styles/brackets_variables.less index e757a2a7480..dc207bab102 100644 --- a/src/styles/brackets_variables.less +++ b/src/styles/brackets_variables.less @@ -52,4 +52,6 @@ @z-index-brackets-resizer-div: @z-index-brackets-sidebar-resizer + 1; @z-index-brackets-bottom-resizer: @z-index-brackets-ui + 2; +@z-index-brackets-panel-resizer: @z-index-brackets-ui + 2; + @z-index-brackets-context-menu-base: 1000; diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js new file mode 100644 index 00000000000..8e076376c78 --- /dev/null +++ b/src/utils/Resizer.js @@ -0,0 +1,130 @@ +/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ +/*global define, $, document, window */ + +/** + * Allows JSLint to run on the current document and report results in a UI panel. + * + */ +define(function (require, exports, module) { + "use strict"; + + var VRESIZABLE = "vertical"; + var HRESIZABLE = "horizontal"; + + var DEFAULT_MIN_HEIGHT = 100; + + // Load dependent modules + var AppInit = require("utils/AppInit"), + EditorManager = require("editor/EditorManager"); + + // These vars are initialized by the htmlReady handler + // below since they refer to DOM elements + var $mainView; + + // + var resizePromises = {}; + + /** + * + * + */ + function makeResizable(element, direction, minHeight) { + + var $resizer = $('
'), + $element = $(element), + $resizableElement = $($element.find(".resizable:first")[0]), + $body = $(document.body), + $deferred = $.Deferred(), + animationRequest = null; + + minHeight = minHeight || 0; + resizePromises[$element.attr("id")] = $deferred.promise(); + + $element.prepend($resizer); + + $resizer.on("mousedown", function (e) { + var startY = e.clientY, + startHeight = $element.height(), + newHeight = startHeight + (startY - e.clientY), + fixedHeight = 0, + doResize = true, + isMouseDown = true; + + $deferred.notify("start"); + + if ($resizableElement !== undefined) { + $element.children().not(".h-resizer, v-resizer, .resizable").each(function (index, child) { + fixedHeight += $(child).outerHeight(); + }); + } + + /* + isMouseDown = true;*/ + $body.toggleClass("hor-resizing"); + + animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { + // only run this if the mouse is down so we don't constantly loop even + // after we're done resizing. + if (!isMouseDown) { + return; + } + + if (doResize) { + // resize the main element to the new height + $element.height(newHeight); + + // if there is an internal resizable element, get the size of + // all the other elements and set the resizable element size to + // the rest + if ($resizableElement !== undefined) { + $resizableElement.height(newHeight - fixedHeight); + } + + EditorManager.resizeEditor(); + + $deferred.notify("update"); + } + + animationRequest = window.webkitRequestAnimationFrame(doRedraw); + }); + + $mainView.on("mousemove", function (e) { + // calculate newHeight as difference between starting and current + // position, capped at minHeight if exists + newHeight = Math.max(startHeight + (startY - e.clientY), minHeight); + e.preventDefault(); + }); + + $mainView.one("mouseup", function (e) { + isMouseDown = false; + $mainView.off("mousemove"); + $body.toggleClass("hor-resizing"); + $deferred.notifyWith($element, ["end", $element.height()]); + }); + + e.preventDefault(); + }); + + //return $deferred.promise(); + } + + function promise(element) { + return resizePromises[element.attr("id")] || new $.Deferred().promise(); + } + + // Scan DOM for hresizable and vresizable classes and make them resizable + AppInit.htmlReady(function () { + $mainView = $(".main-view"); + + $(".vresizable").each(function (index, element) { + makeResizable(element, VRESIZABLE, DEFAULT_MIN_HEIGHT); + }); + + $(".hresizable").each(function (index, element) { + makeResizable(element, HRESIZABLE, DEFAULT_MIN_HEIGHT); + }); + }); + + exports.makeResizable = makeResizable; + exports.promise = promise; +}); \ No newline at end of file From ea3354cedb65d740f243b4e983b92100fe37f307 Mon Sep 17 00:00:00 2001 From: Chema Date: Sat, 29 Sep 2012 00:42:42 +0200 Subject: [PATCH 09/14] Generalization for both resize directions --- src/language/JSLintUtils.js | 2 +- src/styles/brackets.less | 31 +++++++----- src/styles/brackets_variables.less | 2 - src/utils/Resizer.js | 79 +++++++++++++++++------------- 4 files changed, 67 insertions(+), 47 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index adb0add17e0..3ce30f5b088 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -214,7 +214,7 @@ define(function (require, exports, module) { // Initialize items dependent on HTML DOM AppInit.htmlReady(function () { - var height = _prefs.getValue("height"), + var height = Math.max(_prefs.getValue("height"), 100), $jslintResults = $("#jslint-results"), $jslintContent = $("#jslint-results .table-container"); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index c390a382659..338189a29e1 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -70,7 +70,7 @@ body { /* This appears to be necessary in Firefox when body is set to display: box. */ height: 100%; - &.hor-resizing a, &.hor-resizing #projects a, &.hor-resizing .main-view, &.hor-resizing .CodeMirror-lines { + &.ver-resizing a, &.ver-resizing #projects a, &.ver-resizing .main-view, &.ver-resizing .CodeMirror-lines { cursor: row-resize; } } @@ -114,22 +114,31 @@ a, img { background: @background-color-2 url('images/no_content_bg.svg') no-repeat center 45%; } } - + +.ver-resizer { + position: absolute; + height: 6px; + width: 100%; + z-index: @z-index-brackets-panel-resizer; + opacity: 0; + cursor: row-resize; +} + +.hor-resizer { + position: absolute; + height: 100%; + width: 6px; + z-index: @z-index-brackets-panel-resizer; + opacity: 0; + cursor: col-resize; +} + .bottom-panel { display: none; height: 200px; border-top-style: solid; border-width: 1px; border-color: lighten(@bc-grey, @bc-color-step-size*4); - - .h-resizer { - position: absolute; - height: 6px; - width: 100%; - z-index: @z-index-brackets-bottom-resizer; - opacity: 0; - cursor: row-resize; - } .toolbar { height: auto; diff --git a/src/styles/brackets_variables.less b/src/styles/brackets_variables.less index dc207bab102..79a1d61fd78 100644 --- a/src/styles/brackets_variables.less +++ b/src/styles/brackets_variables.less @@ -50,8 +50,6 @@ @z-index-brackets-sidebar-resizer: @z-index-brackets-ui + 2; @z-index-brackets-resizer-div: @z-index-brackets-sidebar-resizer + 1; -@z-index-brackets-bottom-resizer: @z-index-brackets-ui + 2; - @z-index-brackets-panel-resizer: @z-index-brackets-ui + 2; @z-index-brackets-context-menu-base: 1000; diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 8e076376c78..11bbed55449 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -8,8 +8,8 @@ define(function (require, exports, module) { "use strict"; - var VRESIZABLE = "vertical"; - var HRESIZABLE = "horizontal"; + var VERTICAL = "ver"; + var HORIZONTAL = "hor"; var DEFAULT_MIN_HEIGHT = 100; @@ -28,39 +28,44 @@ define(function (require, exports, module) { * * */ - function makeResizable(element, direction, minHeight) { + function makeResizable(element, direction, minSize) { - var $resizer = $('
'), + var $resizer = $('
'), $element = $(element), $resizableElement = $($element.find(".resizable:first")[0]), $body = $(document.body), $deferred = $.Deferred(), - animationRequest = null; - - minHeight = minHeight || 0; + animationRequest = null, + directionProperty = direction === HORIZONTAL ? "clientX" : "clientY", + elementSizeFunction = direction === HORIZONTAL ? $element.width : $element.height, + contSizeFunction = null; + + minSize = minSize || 0; resizePromises[$element.attr("id")] = $deferred.promise(); $element.prepend($resizer); $resizer.on("mousedown", function (e) { - var startY = e.clientY, - startHeight = $element.height(), - newHeight = startHeight + (startY - e.clientY), - fixedHeight = 0, - doResize = true, - isMouseDown = true; + var startPosition = e[directionProperty], + startSize = elementSizeFunction.apply($element), + newSize = startSize, + baseSize = 0, + doResize = true, + isMouseDown = true; $deferred.notify("start"); if ($resizableElement !== undefined) { - $element.children().not(".h-resizer, v-resizer, .resizable").each(function (index, child) { - fixedHeight += $(child).outerHeight(); + $element.children().not(".hor-resizer, ver-resizer, .resizable").each(function (index, child) { + if (direction === HORIZONTAL) { + baseSize += $(child).outerWidth(); + } else { + baseSize += $(child).outerHeight(); + } }); } - - /* - isMouseDown = true;*/ - $body.toggleClass("hor-resizing"); + + $body.toggleClass(direction + "-resizing"); animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { // only run this if the mouse is down so we don't constantly loop even @@ -71,13 +76,15 @@ define(function (require, exports, module) { if (doResize) { // resize the main element to the new height - $element.height(newHeight); + elementSizeFunction.apply($element, [newSize]); + //$element.height(newHeight); // if there is an internal resizable element, get the size of // all the other elements and set the resizable element size to // the rest if ($resizableElement !== undefined) { - $resizableElement.height(newHeight - fixedHeight); + elementSizeFunction.apply($resizableElement, [newSize - baseSize]); + //$resizableElement.height(newSize - baseSize); } EditorManager.resizeEditor(); @@ -91,37 +98,43 @@ define(function (require, exports, module) { $mainView.on("mousemove", function (e) { // calculate newHeight as difference between starting and current // position, capped at minHeight if exists - newHeight = Math.max(startHeight + (startY - e.clientY), minHeight); + newSize = Math.max(startSize + (startPosition - e[directionProperty]), minSize); e.preventDefault(); }); - - $mainView.one("mouseup", function (e) { - isMouseDown = false; - $mainView.off("mousemove"); - $body.toggleClass("hor-resizing"); - $deferred.notifyWith($element, ["end", $element.height()]); - }); + + function endResize(e) { + if (isMouseDown) { + isMouseDown = false; + $mainView.off("mousemove"); + $body.toggleClass(direction + "-resizing"); + $deferred.notifyWith($element, ["end", elementSizeFunction.apply($element)]); + } + } + + $mainView.one("mouseup", endResize); + $mainView.mouseleave(endResize); e.preventDefault(); }); - //return $deferred.promise(); + return $deferred.promise(); } + // function promise(element) { return resizePromises[element.attr("id")] || new $.Deferred().promise(); } // Scan DOM for hresizable and vresizable classes and make them resizable AppInit.htmlReady(function () { - $mainView = $(".main-view"); + $mainView = $(".main-view"); $(".vresizable").each(function (index, element) { - makeResizable(element, VRESIZABLE, DEFAULT_MIN_HEIGHT); + makeResizable(element, VERTICAL, DEFAULT_MIN_HEIGHT); }); $(".hresizable").each(function (index, element) { - makeResizable(element, HRESIZABLE, DEFAULT_MIN_HEIGHT); + makeResizable(element, HORIZONTAL, DEFAULT_MIN_HEIGHT); }); }); From 6a933a3117f58bdb7589c0862a0ffad7038b8957 Mon Sep 17 00:00:00 2001 From: Chema Date: Sat, 29 Sep 2012 12:30:25 +0200 Subject: [PATCH 10/14] Added position selection for future resizer position implementations --- src/htmlContent/main-view.html | 4 ++-- src/utils/Resizer.js | 38 ++++++++++++++++++++++++++-------- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index b5da3cb256a..a6d78741bf3 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -94,14 +94,14 @@
-
+
{{JSLINT_ERRORS}}
-
+
{{SEARCH_RESULTS}}
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 11bbed55449..06b11184a4e 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -8,8 +8,13 @@ define(function (require, exports, module) { "use strict"; - var VERTICAL = "ver"; - var HORIZONTAL = "hor"; + var DIRECTION_VERTICAL = "ver"; + var DIRECTION_HORIZONTAL = "hor"; + + var POSITION_TOP = "top"; + var POSITION_BOTTOM = "bottom"; + var POSITION_LEFT = "left"; + var POSITION_RIGHT = "right"; var DEFAULT_MIN_HEIGHT = 100; @@ -28,7 +33,7 @@ define(function (require, exports, module) { * * */ - function makeResizable(element, direction, minSize) { + function makeResizable(element, direction, position, minSize) { var $resizer = $('
'), $element = $(element), @@ -36,8 +41,8 @@ define(function (require, exports, module) { $body = $(document.body), $deferred = $.Deferred(), animationRequest = null, - directionProperty = direction === HORIZONTAL ? "clientX" : "clientY", - elementSizeFunction = direction === HORIZONTAL ? $element.width : $element.height, + directionProperty = direction === DIRECTION_HORIZONTAL ? "clientX" : "clientY", + elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height, contSizeFunction = null; minSize = minSize || 0; @@ -56,14 +61,15 @@ define(function (require, exports, module) { $deferred.notify("start"); if ($resizableElement !== undefined) { - $element.children().not(".hor-resizer, ver-resizer, .resizable").each(function (index, child) { - if (direction === HORIZONTAL) { + $element.children().not(".hor-resizer, .ver-resizer, .resizable").each(function (index, child) { + if (direction === DIRECTION_HORIZONTAL) { baseSize += $(child).outerWidth(); } else { baseSize += $(child).outerHeight(); } }); } + console.log(baseSize); $body.toggleClass(direction + "-resizing"); @@ -130,11 +136,25 @@ define(function (require, exports, module) { $mainView = $(".main-view"); $(".vresizable").each(function (index, element) { - makeResizable(element, VERTICAL, DEFAULT_MIN_HEIGHT); + + if ($(element).hasClass("top-resizer")) { + makeResizable(element, DIRECTION_VERTICAL, POSITION_TOP, DEFAULT_MIN_HEIGHT); + } + + //if ($(element).hasClass("bottom-resizer")) { + // makeResizable(element, DIRECTION_VERTICAL, POSITION_BOTTOM, DEFAULT_MIN_HEIGHT); + //} }); $(".hresizable").each(function (index, element) { - makeResizable(element, HORIZONTAL, DEFAULT_MIN_HEIGHT); + + //if ($(element).hasClass("left-resizer")) { + // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_LEFT, DEFAULT_MIN_HEIGHT); + //} + + //if ($(element).hasClass("bottom-resizer")) { + // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_HEIGHT); + //} }); }); From 5559cd33aefafd0f2102e48a7da8548c51ede9b9 Mon Sep 17 00:00:00 2001 From: Chema Date: Sat, 29 Sep 2012 16:56:04 +0200 Subject: [PATCH 11/14] Comments and clean up --- src/htmlContent/main-view.html | 8 +-- src/language/JSLintUtils.js | 2 +- src/search/FindInFiles.js | 2 +- src/utils/Resizer.js | 99 +++++++++++++++++++++++----------- 4 files changed, 74 insertions(+), 37 deletions(-) diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index a6d78741bf3..69f3b6896df 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -94,20 +94,20 @@
-
+
{{JSLINT_ERRORS}}
-
+
-
+
{{SEARCH_RESULTS}}
×
-
+
diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index 3ce30f5b088..aea83a3d4b9 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -225,7 +225,7 @@ define(function (require, exports, module) { EditorManager.resizeEditor(); } - $.when(Resizer.promise($jslintResults)).progress(function (status, height) { + $.when(Resizer.resizing($jslintResults)).progress(function (status, height) { if (status === "end") { _prefs.setValue("height", height); } diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 37c069b18bc..df1f520f3bb 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -348,7 +348,7 @@ define(function (require, exports, module) { $searchResults.height(height); $searchContent.height(height - 27); - $.when(Resizer.promise($("#search-results"))).progress(function (status, height) { + $.when(Resizer.resizing($("#search-results"))).progress(function (status, height) { if (status === "end") { prefs.setValue("height", height); } diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 06b11184a4e..258bb8d854d 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -2,8 +2,22 @@ /*global define, $, document, window */ /** - * Allows JSLint to run on the current document and report results in a UI panel. + * Resizer is a Module utility to inject resizing capabilities to any element + * inside Brackets. + * + * On initialization, Resizer discovers all nodes tagged as "ver-resizable" + * and "hor-resizable" to add the resizer handler. Additionally, "top-resizer", + * "bottom-resizer", "left-resizer" and "right-resizer" classes control de + * position of the resizer on the element. * + * An element can be made resizable at any time using the `makeResizable` API + * + * The `makeResizable` and `resizing` APIs return a promise that can be used to + * get updates about the resizing operations. The associated deferred object is + * notified on resize start, progress and completion. This can be used to create + * performance optimizations (such as hiding/showing elements while resizing), + * custom or internal resizes and save the final resized value into local storage + * for example. */ define(function (require, exports, module) { "use strict"; @@ -16,34 +30,53 @@ define(function (require, exports, module) { var POSITION_LEFT = "left"; var POSITION_RIGHT = "right"; - var DEFAULT_MIN_HEIGHT = 100; + // Minimum size (height or width) for autodiscovered resizable panels + var DEFAULT_MIN_SIZE = 100; // Load dependent modules var AppInit = require("utils/AppInit"), EditorManager = require("editor/EditorManager"); - // These vars are initialized by the htmlReady handler - // below since they refer to DOM elements var $mainView; - // + // Map of resize promises var resizePromises = {}; /** - * + * Adds resizing capabilities to a given html element. + * + * Resizing can be configured in two directions: + * - Vertical ("ver"): Resizes the height of the element + * - Horizontal ("hor"): Resizes the width of the element + * + * Resizer handlers can be positioned on the element at: + * - Top ("top") or bottom ("bottom") for vertical resizing + * - Left ("left") or right ("right") for horizontal resizing + * + * A resize operation notifies its associated deferred object at: + * - start: When the resize starts + * - update: On resize updates (every time it is redrawn) + * - end: When the resize ends * + * @param {DOMNode} element Html element which should be made resizable. + * @param {string} direction The direction of the resize action. Must be "hor" or "ver". + * @param {string} position The position of the resizer on the element. Can be "top" or "bottom" + * for vertical resizing and "left" or "right" for horizontal resizing. + * @param {int} minSize Minimum size (width or height) of the element. + * @return {$.Promise} jQuery Promise object that is never resolved, but gets + * notified anytime the resize starts, updates or ends. */ function makeResizable(element, direction, position, minSize) { var $resizer = $('
'), $element = $(element), - $resizableElement = $($element.find(".resizable:first")[0]), + $resizableElement = $($element.find(".resizable-content:first")[0]), $body = $(document.body), $deferred = $.Deferred(), animationRequest = null, directionProperty = direction === DIRECTION_HORIZONTAL ? "clientX" : "clientY", elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height, - contSizeFunction = null; + contentSizeFunction = null; minSize = minSize || 0; resizePromises[$element.attr("id")] = $deferred.promise(); @@ -58,18 +91,19 @@ define(function (require, exports, module) { doResize = true, isMouseDown = true; - $deferred.notify("start"); + $deferred.notifyWith($element, ["start", elementSizeFunction.apply($element)]); if ($resizableElement !== undefined) { - $element.children().not(".hor-resizer, .ver-resizer, .resizable").each(function (index, child) { + $element.children().not(".hor-resizer, .ver-resizer, .resizable-content").each(function (index, child) { if (direction === DIRECTION_HORIZONTAL) { baseSize += $(child).outerWidth(); } else { baseSize += $(child).outerHeight(); } }); + + contentSizeFunction = direction === DIRECTION_HORIZONTAL ? $resizableElement.width : $resizableElement.height; } - console.log(baseSize); $body.toggleClass(direction + "-resizing"); @@ -81,29 +115,26 @@ define(function (require, exports, module) { } if (doResize) { - // resize the main element to the new height + // resize the main element to the new size elementSizeFunction.apply($element, [newSize]); - //$element.height(newHeight); - // if there is an internal resizable element, get the size of - // all the other elements and set the resizable element size to - // the rest + // if there is a content element, its size is the new size + // minus the size of the non-resizable elements if ($resizableElement !== undefined) { - elementSizeFunction.apply($resizableElement, [newSize - baseSize]); - //$resizableElement.height(newSize - baseSize); + contentSizeFunction.apply($resizableElement, [newSize - baseSize]); } EditorManager.resizeEditor(); - $deferred.notify("update"); + $deferred.notifyWith($element, ["update", elementSizeFunction.apply($element)]); } animationRequest = window.webkitRequestAnimationFrame(doRedraw); }); $mainView.on("mousemove", function (e) { - // calculate newHeight as difference between starting and current - // position, capped at minHeight if exists + // calculate newSize adding to startSize the difference + // between starting and current position, capped at minSize newSize = Math.max(startSize + (startPosition - e[directionProperty]), minSize); e.preventDefault(); }); @@ -126,38 +157,44 @@ define(function (require, exports, module) { return $deferred.promise(); } - // - function promise(element) { + /** + * Gets the resize promise for an element + * + * @param {DOMNode} element Already resizable html element + * @return {$.Promise} jQuery The associated promise object or a new one + * if the element is not registered as resizable. + */ + function resizing(element) { return resizePromises[element.attr("id")] || new $.Deferred().promise(); } - // Scan DOM for hresizable and vresizable classes and make them resizable + // Scan DOM for hor-resizable and ver-resizable classes and make them resizable AppInit.htmlReady(function () { $mainView = $(".main-view"); - $(".vresizable").each(function (index, element) { + $(".ver-resizable").each(function (index, element) { if ($(element).hasClass("top-resizer")) { - makeResizable(element, DIRECTION_VERTICAL, POSITION_TOP, DEFAULT_MIN_HEIGHT); + makeResizable(element, DIRECTION_VERTICAL, POSITION_TOP, DEFAULT_MIN_SIZE); } //if ($(element).hasClass("bottom-resizer")) { - // makeResizable(element, DIRECTION_VERTICAL, POSITION_BOTTOM, DEFAULT_MIN_HEIGHT); + // makeResizable(element, DIRECTION_VERTICAL, POSITION_BOTTOM, DEFAULT_MIN_SIZE); //} }); - $(".hresizable").each(function (index, element) { + $(".hor-resizable").each(function (index, element) { //if ($(element).hasClass("left-resizer")) { - // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_LEFT, DEFAULT_MIN_HEIGHT); + // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_LEFT, DEFAULT_MIN_SIZE); //} //if ($(element).hasClass("bottom-resizer")) { - // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_HEIGHT); + // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_SIZE); //} }); }); exports.makeResizable = makeResizable; - exports.promise = promise; + exports.resizing = resizing; }); \ No newline at end of file From c561ef0b0b6c67560d04b8ad87a1b5afc0ccc299 Mon Sep 17 00:00:00 2001 From: Chema Date: Wed, 3 Oct 2012 15:39:20 +0100 Subject: [PATCH 12/14] Cleanup changes for pull request review --- src/language/JSLintUtils.js | 18 +++++---- src/search/FindInFiles.js | 14 ++++--- src/styles/brackets.less | 4 -- src/utils/Resizer.js | 81 ++++++++++++++++++------------------- 4 files changed, 58 insertions(+), 59 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index aea83a3d4b9..9faa8f21ad0 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -23,7 +23,7 @@ /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ -/*global define, $, JSLINT, PathUtils, document, window */ +/*global define, $, JSLINT, PathUtils */ /** * Allows JSLint to run on the current document and report results in a UI panel. @@ -50,7 +50,11 @@ define(function (require, exports, module) { var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200, enabled: true }; - + + // Height in pixels of the JSLint panel header. Hardcoded to avoid race + // condition when measuring it on htmlReady + var HEADER_HEIGHT = 27; + /** * @private * @type {PreferenceStorage} @@ -219,16 +223,14 @@ define(function (require, exports, module) { $jslintContent = $("#jslint-results .table-container"); $jslintResults.height(height); - $jslintContent.height(height - 27); + $jslintContent.height(height - HEADER_HEIGHT); if (_enabled) { EditorManager.resizeEditor(); } - - $.when(Resizer.resizing($jslintResults)).progress(function (status, height) { - if (status === "end") { - _prefs.setValue("height", height); - } + + $jslintResults.on("panelResizeEnd", function (event, height) { + _prefs.setValue("height", height); }); }); diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index df1f520f3bb..acb8fb2c962 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -22,7 +22,7 @@ */ /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */ -/*global define, $, PathUtils, window, document */ +/*global define, $, PathUtils, window */ /* * Adds a "find in files" command to allow the user to find all occurances of a string in all files in @@ -60,6 +60,10 @@ define(function (require, exports, module) { var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200 }; + // Height in pixels of the JSLint panel header. Hardcoded to avoid race + // condition when measuring it on htmlReady + var HEADER_HEIGHT = 27; + // This dialog class was mostly copied from QuickOpen. We should have a common dialog // class that everyone can use. @@ -346,12 +350,10 @@ define(function (require, exports, module) { height = prefs.getValue("height"); $searchResults.height(height); - $searchContent.height(height - 27); + $searchContent.height(height - HEADER_HEIGHT); - $.when(Resizer.resizing($("#search-results"))).progress(function (status, height) { - if (status === "end") { - prefs.setValue("height", height); - } + $searchResults.on("panelResizeEnd", function (event, height) { + prefs.setValue("height", height); }); }); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 338189a29e1..1c686cd1fc8 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -62,14 +62,10 @@ html, body { body { .vbox; - /* This appears to be necessary in Firefox when body is set to display: box. */ - width: 100%; &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines { cursor: col-resize; } - /* This appears to be necessary in Firefox when body is set to display: box. */ - height: 100%; &.ver-resizing a, &.ver-resizing #projects a, &.ver-resizing .main-view, &.ver-resizing .CodeMirror-lines { cursor: row-resize; } diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 258bb8d854d..c9a59ee0e59 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -1,5 +1,28 @@ +/* + * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * + */ + /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ -/*global define, $, document, window */ +/*global define, $, window */ /** * Resizer is a Module utility to inject resizing capabilities to any element @@ -7,17 +30,18 @@ * * On initialization, Resizer discovers all nodes tagged as "ver-resizable" * and "hor-resizable" to add the resizer handler. Additionally, "top-resizer", - * "bottom-resizer", "left-resizer" and "right-resizer" classes control de + * "bottom-resizer", "left-resizer" and "right-resizer" classes control the * position of the resizer on the element. * * An element can be made resizable at any time using the `makeResizable` API * - * The `makeResizable` and `resizing` APIs return a promise that can be used to - * get updates about the resizing operations. The associated deferred object is - * notified on resize start, progress and completion. This can be used to create - * performance optimizations (such as hiding/showing elements while resizing), - * custom or internal resizes and save the final resized value into local storage - * for example. + * The resizable elements trigger a panelResizeStart, panelResizeUpdate and panelResizeEnd + * event that can be used to create performance optimizations (such as hiding/showing elements + * while resizing), custom or internal resizes and save the final resized value into local + * storage for example. + * + * TODO Trigger panelResizeStart and panelResizeUpdate as required. They aren't needed + * currently. */ define(function (require, exports, module) { "use strict"; @@ -39,9 +63,6 @@ define(function (require, exports, module) { var $mainView; - // Map of resize promises - var resizePromises = {}; - /** * Adds resizing capabilities to a given html element. * @@ -53,33 +74,29 @@ define(function (require, exports, module) { * - Top ("top") or bottom ("bottom") for vertical resizing * - Left ("left") or right ("right") for horizontal resizing * - * A resize operation notifies its associated deferred object at: - * - start: When the resize starts - * - update: On resize updates (every time it is redrawn) - * - end: When the resize ends + * A resizable element triggers the following events while resizing: + * - panelResizeStart: When the resize starts + * - panelResizeUpdate: On resize updates (every time it is redrawn) + * - panelResizeEnds: When the resize ends * * @param {DOMNode} element Html element which should be made resizable. * @param {string} direction The direction of the resize action. Must be "hor" or "ver". * @param {string} position The position of the resizer on the element. Can be "top" or "bottom" - * for vertical resizing and "left" or "right" for horizontal resizing. + * for vertical resizing and "left" or "right" for horizontal resizing. * @param {int} minSize Minimum size (width or height) of the element. - * @return {$.Promise} jQuery Promise object that is never resolved, but gets - * notified anytime the resize starts, updates or ends. */ function makeResizable(element, direction, position, minSize) { var $resizer = $('
'), $element = $(element), $resizableElement = $($element.find(".resizable-content:first")[0]), - $body = $(document.body), - $deferred = $.Deferred(), + $body = $(window.document.body), animationRequest = null, directionProperty = direction === DIRECTION_HORIZONTAL ? "clientX" : "clientY", elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height, contentSizeFunction = null; minSize = minSize || 0; - resizePromises[$element.attr("id")] = $deferred.promise(); $element.prepend($resizer); @@ -90,9 +107,7 @@ define(function (require, exports, module) { baseSize = 0, doResize = true, isMouseDown = true; - - $deferred.notifyWith($element, ["start", elementSizeFunction.apply($element)]); - + if ($resizableElement !== undefined) { $element.children().not(".hor-resizer, .ver-resizer, .resizable-content").each(function (index, child) { if (direction === DIRECTION_HORIZONTAL) { @@ -125,8 +140,6 @@ define(function (require, exports, module) { } EditorManager.resizeEditor(); - - $deferred.notifyWith($element, ["update", elementSizeFunction.apply($element)]); } animationRequest = window.webkitRequestAnimationFrame(doRedraw); @@ -144,7 +157,7 @@ define(function (require, exports, module) { isMouseDown = false; $mainView.off("mousemove"); $body.toggleClass(direction + "-resizing"); - $deferred.notifyWith($element, ["end", elementSizeFunction.apply($element)]); + $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]); } } @@ -153,19 +166,6 @@ define(function (require, exports, module) { e.preventDefault(); }); - - return $deferred.promise(); - } - - /** - * Gets the resize promise for an element - * - * @param {DOMNode} element Already resizable html element - * @return {$.Promise} jQuery The associated promise object or a new one - * if the element is not registered as resizable. - */ - function resizing(element) { - return resizePromises[element.attr("id")] || new $.Deferred().promise(); } // Scan DOM for hor-resizable and ver-resizable classes and make them resizable @@ -196,5 +196,4 @@ define(function (require, exports, module) { }); exports.makeResizable = makeResizable; - exports.resizing = resizing; }); \ No newline at end of file From 8f1cfb2377d6b2ccd1bf48e4bfba66cf6d4dbcc4 Mon Sep 17 00:00:00 2001 From: Chema Date: Wed, 3 Oct 2012 16:01:20 +0100 Subject: [PATCH 13/14] Final comments cleanup --- src/language/JSLintUtils.js | 4 ++-- src/search/FindInFiles.js | 4 ++-- src/utils/Resizer.js | 2 -- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/language/JSLintUtils.js b/src/language/JSLintUtils.js index d7281094999..98a86754753 100644 --- a/src/language/JSLintUtils.js +++ b/src/language/JSLintUtils.js @@ -53,8 +53,8 @@ define(function (require, exports, module) { var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200, enabled: true }; - // Height in pixels of the JSLint panel header. Hardcoded to avoid race - // condition when measuring it on htmlReady + /** @type {Number} Height of the JSLint panel header in pixels. Hardcoded to avoid race + condition when measuring it on htmlReady*/ var HEADER_HEIGHT = 27; /** diff --git a/src/search/FindInFiles.js b/src/search/FindInFiles.js index 3063875a739..4f871fb9b8e 100644 --- a/src/search/FindInFiles.js +++ b/src/search/FindInFiles.js @@ -61,8 +61,8 @@ define(function (require, exports, module) { var PREFERENCES_CLIENT_ID = module.id, defaultPrefs = { height: 200 }; - // Height in pixels of the JSLint panel header. Hardcoded to avoid race - // condition when measuring it on htmlReady + /** @type {Number} Height of the FIF panel header in pixels. Hardcoded to avoid race + condition when measuring it on htmlReady*/ var HEADER_HEIGHT = 27; // This dialog class was mostly copied from QuickOpen. We should have a common dialog diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index c9a59ee0e59..35efb921687 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -75,8 +75,6 @@ define(function (require, exports, module) { * - Left ("left") or right ("right") for horizontal resizing * * A resizable element triggers the following events while resizing: - * - panelResizeStart: When the resize starts - * - panelResizeUpdate: On resize updates (every time it is redrawn) * - panelResizeEnds: When the resize ends * * @param {DOMNode} element Html element which should be made resizable. From ab2645ae7500f5a166ed37c8a8ca416118046645 Mon Sep 17 00:00:00 2001 From: Chema Date: Mon, 8 Oct 2012 22:32:56 +0200 Subject: [PATCH 14/14] Rename "ver" and "hor" for easier to remember "vert" and "horz". --- src/htmlContent/main-view.html | 4 ++-- src/styles/brackets.less | 6 +++--- src/utils/Resizer.js | 24 ++++++++++++------------ 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index 51b4dc866d9..8380f4f0c64 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -90,14 +90,14 @@
-
+
{{JSLINT_ERRORS}}
-
+
{{SEARCH_RESULTS}}
diff --git a/src/styles/brackets.less b/src/styles/brackets.less index ade756944d1..37aa9b222dd 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -66,7 +66,7 @@ body { cursor: col-resize; } - &.ver-resizing a, &.ver-resizing #projects a, &.ver-resizing .main-view, &.ver-resizing .CodeMirror-lines { + &.vert-resizing a, &.vert-resizing #projects a, &.vert-resizing .main-view, &.vert-resizing .CodeMirror-lines { cursor: row-resize; } } @@ -183,7 +183,7 @@ a, img { } } -.ver-resizer { +.vert-resizer { position: absolute; height: 6px; width: 100%; @@ -192,7 +192,7 @@ a, img { cursor: row-resize; } -.hor-resizer { +.horz-resizer { position: absolute; height: 100%; width: 6px; diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 35efb921687..c380034d48a 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -28,8 +28,8 @@ * Resizer is a Module utility to inject resizing capabilities to any element * inside Brackets. * - * On initialization, Resizer discovers all nodes tagged as "ver-resizable" - * and "hor-resizable" to add the resizer handler. Additionally, "top-resizer", + * On initialization, Resizer discovers all nodes tagged as "vert-resizable" + * and "horz-resizable" to add the resizer handler. Additionally, "top-resizer", * "bottom-resizer", "left-resizer" and "right-resizer" classes control the * position of the resizer on the element. * @@ -46,8 +46,8 @@ define(function (require, exports, module) { "use strict"; - var DIRECTION_VERTICAL = "ver"; - var DIRECTION_HORIZONTAL = "hor"; + var DIRECTION_VERTICAL = "vert"; + var DIRECTION_HORIZONTAL = "horz"; var POSITION_TOP = "top"; var POSITION_BOTTOM = "bottom"; @@ -67,8 +67,8 @@ define(function (require, exports, module) { * Adds resizing capabilities to a given html element. * * Resizing can be configured in two directions: - * - Vertical ("ver"): Resizes the height of the element - * - Horizontal ("hor"): Resizes the width of the element + * - Vertical ("vert"): Resizes the height of the element + * - Horizontal ("horz"): Resizes the width of the element * * Resizer handlers can be positioned on the element at: * - Top ("top") or bottom ("bottom") for vertical resizing @@ -78,7 +78,7 @@ define(function (require, exports, module) { * - panelResizeEnds: When the resize ends * * @param {DOMNode} element Html element which should be made resizable. - * @param {string} direction The direction of the resize action. Must be "hor" or "ver". + * @param {string} direction The direction of the resize action. Must be "horz" or "vert". * @param {string} position The position of the resizer on the element. Can be "top" or "bottom" * for vertical resizing and "left" or "right" for horizontal resizing. * @param {int} minSize Minimum size (width or height) of the element. @@ -107,7 +107,7 @@ define(function (require, exports, module) { isMouseDown = true; if ($resizableElement !== undefined) { - $element.children().not(".hor-resizer, .ver-resizer, .resizable-content").each(function (index, child) { + $element.children().not(".horz-resizer, .vert-resizer, .resizable-content").each(function (index, child) { if (direction === DIRECTION_HORIZONTAL) { baseSize += $(child).outerWidth(); } else { @@ -166,11 +166,11 @@ define(function (require, exports, module) { }); } - // Scan DOM for hor-resizable and ver-resizable classes and make them resizable + // Scan DOM for horz-resizable and vert-resizable classes and make them resizable AppInit.htmlReady(function () { $mainView = $(".main-view"); - $(".ver-resizable").each(function (index, element) { + $(".vert-resizable").each(function (index, element) { if ($(element).hasClass("top-resizer")) { makeResizable(element, DIRECTION_VERTICAL, POSITION_TOP, DEFAULT_MIN_SIZE); @@ -181,13 +181,13 @@ define(function (require, exports, module) { //} }); - $(".hor-resizable").each(function (index, element) { + $(".horz-resizable").each(function (index, element) { //if ($(element).hasClass("left-resizer")) { // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_LEFT, DEFAULT_MIN_SIZE); //} - //if ($(element).hasClass("bottom-resizer")) { + //if ($(element).hasClass("right-resizer")) { // makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_SIZE); //} });