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

Sidebar resize refactorization (2) #1908

Merged
merged 6 commits into from
Oct 23, 2012
Merged

Sidebar resize refactorization (2) #1908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
df7a495
Basic sidebar resize support
jbalsas Oct 21, 2012
00297dd
Fixed forceMargins on update
jbalsas Oct 21, 2012
d1da08b
Added elementSize to panelExpanded and panelCollapsed events
jbalsas Oct 21, 2012
1d79e7d
Fix tabs
jbalsas Oct 21, 2012
9a8718f
Remove old resizing style
jbalsas Oct 21, 2012
9132a2b
Code review fixes
jbalsas Oct 23, 2012
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
3 changes: 1 addition & 2 deletions src/htmlContent/main-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@

<!-- Main UI -->
<div class="main-view">
<div id="sidebar-resizer"></div>
<div id="sidebar" class="sidebar quiet-scrollbars">
<div id="sidebar" class="sidebar quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-forcemargin=".content">
<!-- Left-hand 'Project panel' -->
<div id="projects" class="panel">
<div id="project-header"></div>
Expand Down
226 changes: 39 additions & 187 deletions src/project/SidebarView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,14 @@ define(function (require, exports, module) {
CommandManager = require("command/CommandManager"),
Commands = require("command/Commands"),
Strings = require("strings"),
PreferencesManager = require("preferences/PreferencesManager"),
EditorManager = require("editor/EditorManager"),
Global = require("utils/Global");

var isSidebarClosed = false;

var PREFERENCES_CLIENT_ID = "com.adobe.brackets.SidebarView",
defaultPrefs = { sidebarWidth: 200, sidebarClosed: false };
Global = require("utils/Global"),
Resizer = require("utils/Resizer");

// These vars are initialized by the htmlReady handler
// below since they refer to DOM elements
var $sidebar,
$sidebarMenuText,
$sidebarResizer,
$openFilesContainer,
$projectTitle,
$projectFilesContainer;
Expand All @@ -67,201 +61,59 @@ define(function (require, exports, module) {
$projectTitle.attr("title", ProjectManager.getProjectRoot().fullPath);
}

/**
* @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.
* @param {!boolean} updateMenu Updates "View" menu label to indicate current sidebar state.
* @param {!boolean} displayTriangle Display selection marker triangle in the active view.
*/
function _setWidth(width, updateMenu, displayTriangle) {
// 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);

if (typeof displayTriangle === "boolean") {
var display = (displayTriangle) ? "block" : "none";
$sidebar.find(".sidebar-selection-triangle").css("display", display);
}

if (isSidebarClosed) {
$sidebarResizer.css("left", 0);

// Adjust content area left/width - see below
$(".content", $sidebar.parent()).css("margin-left", 0);

} else {
$sidebar.width(width);
$sidebarResizer.css("left", width - 1);

// This maintains the content area's position to the right of the sidebar. (A simple float is not enough
// because the non-floated content technically underlaps the floated sidebar; this breaks CodeMirror
// listeners and relative positioning).
// TODO: Ultimately this should go into EditorManager.js, triggered via an event we dispatch
$(".content", $sidebar.parent()).css("margin-left", width);

// This helps resize things within the sidebar when it's shown.
// TODO: Ultimately this should go into ProjectManager.js, triggered via an event we dispatch
$sidebar.find(".sidebar-selection").width(width);

if (width > 10) {
prefs.setValue("sidebarWidth", width);
}
}

if (updateMenu) {
var text = (isSidebarClosed) ? Strings.CMD_SHOW_SIDEBAR : Strings.CMD_HIDE_SIDEBAR;
CommandManager.get(Commands.VIEW_HIDE_SIDEBAR).setName(text);
}
EditorManager.resizeEditor();
}

/**
* Toggle sidebar visibility.
*/
function toggleSidebar(width) {
if (isSidebarClosed) {
$sidebar.show();
$(exports).triggerHandler("show");
} else {
$sidebar.hide();
$(exports).triggerHandler("hide");
}

isSidebarClosed = !isSidebarClosed;

var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs);
prefs.setValue("sidebarClosed", isSidebarClosed);
_setWidth(width, true, !isSidebarClosed);
}

/**
* @private
* Install sidebar resize handling.
*/
function _initSidebarResizer() {
var $mainView = $(".main-view"),
$body = $(document.body),
prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs),
sidebarWidth = prefs.getValue("sidebarWidth"),
startingSidebarPosition = sidebarWidth,
animationRequest = null,
isMouseDown = false;

$sidebarResizer.css("left", sidebarWidth - 1);

// Initially size sidebar at app startup
if (prefs.getValue("sidebarClosed")) {
toggleSidebar(sidebarWidth);
} else {
_setWidth(sidebarWidth, true, true);
}

$sidebarResizer.on("dblclick", function () {
if ($sidebar.width() < 10) {
//mousedown is fired first. Sidebar is already toggeled open to at least 10px.
_setWidth(null, true, true);
$projectFilesContainer.triggerHandler("scroll");
$openFilesContainer.triggerHandler("scroll");
} else {
toggleSidebar(sidebarWidth);
}
});
$sidebarResizer.on("mousedown.sidebar", function (e) {
var startX = e.clientX,
newWidth = Math.max(e.clientX, 0),
doResize = true;

isMouseDown = true;

// take away the shadows (for performance reasons during sidebar movement)
$sidebar.find(".scroller-shadow").css("display", "none");

$body.toggleClass("resizing");

// check to see if we're currently in hidden mode
if (isSidebarClosed) {
toggleSidebar(1);
}


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 we've gone below 10 pixels on a mouse move, and the
// sidebar is shrinking, hide the sidebar automatically an
// unbind the mouse event.
if ((startX > 10) && (newWidth < 10)) {
toggleSidebar(startingSidebarPosition);
$mainView.off("mousemove.sidebar");

// turn off the mouseup event so that it doesn't fire twice and retoggle the
// resizing class
$mainView.off("mouseup.sidebar");
$body.toggleClass("resizing");
doResize = false;
startX = 0;

// force isMouseDown so that we don't keep calling requestAnimationFrame
// this keeps the sidebar from stuttering
isMouseDown = false;

}

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.
_setWidth(newWidth, false, false);
}

animationRequest = window.webkitRequestAnimationFrame(doRedraw);
});

$mainView.on("mousemove.sidebar", function (e) {
newWidth = Math.max(e.clientX, 0);

e.preventDefault();
});

$mainView.one("mouseup.sidebar", function (e) {
isMouseDown = false;

// replace shadows and triangle
$sidebar.find(".sidebar-selection-triangle").css("display", "block");
$sidebar.find(".scroller-shadow").css("display", "block");

$projectFilesContainer.triggerHandler("scroll");
$openFilesContainer.triggerHandler("scroll");
$mainView.off("mousemove.sidebar");
$body.toggleClass("resizing");
startingSidebarPosition = $sidebar.width();
});

e.preventDefault();
});
Resizer.toggle($sidebar);
}

// Initialize items dependent on HTML DOM
AppInit.htmlReady(function () {
$sidebar = $("#sidebar");
$sidebarMenuText = $("#menu-view-hide-sidebar span");
$sidebarResizer = $("#sidebar-resizer");
$openFilesContainer = $("#open-files-container");
$projectTitle = $("#project-title");
$projectFilesContainer = $("#project-files-container");

// init
WorkingSetView.create($openFilesContainer);
_initSidebarResizer();

$sidebar.on("panelResizeStart", function (evt, width) {
$sidebar.find(".sidebar-selection-triangle").css("display", "none");
$sidebar.find(".scroller-shadow").css("display", "none");
});

$sidebar.on("panelResizeUpdate", function (evt, width) {
$sidebar.find(".sidebar-selection").width(width);
});

$sidebar.on("panelResizeEnd", function (evt, width) {
$sidebar.find(".sidebar-selection").width(width);
$sidebar.find(".sidebar-selection-triangle").css("display", "block").css("left", width);
$sidebar.find(".scroller-shadow").css("display", "block");
$projectFilesContainer.triggerHandler("scroll");
$openFilesContainer.triggerHandler("scroll");
});

$sidebar.on("panelCollapsed", function (evt, width) {
CommandManager.get(Commands.VIEW_HIDE_SIDEBAR).setName(Strings.CMD_SHOW_SIDEBAR);
});

$sidebar.on("panelExpanded", function (evt, width) {
$sidebar.find(".sidebar-selection").width(width);
$sidebar.find(".scroller-shadow").css("display", "block");
$sidebar.find(".sidebar-selection-triangle").css("left", width);
$projectFilesContainer.triggerHandler("scroll");
$openFilesContainer.triggerHandler("scroll");
CommandManager.get(Commands.VIEW_HIDE_SIDEBAR).setName(Strings.CMD_HIDE_SIDEBAR);
});

// AppInit.htmlReady in utils/Resizer executes before, so it's possible that the sidebar
// is collapsed before we add the event. Check here initially
if (!$sidebar.is(":visible")) {
$sidebar.trigger("panelCollapsed");
}
});

$(ProjectManager).on("projectOpen", _updateProjectTitle);
Expand Down
4 changes: 0 additions & 4 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,6 @@ html, body {

body {
height: 100%;

&.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines {
cursor: col-resize;
}
}

.resizing-container {
Expand Down
Loading