overflow.js

define(function(require,exports,module){const DropdownButton=require("widgets/DropdownButton"),MainViewManager=require("view/MainViewManager"),CommandManager=require("command/CommandManager"),Commands=require("command/Commands"),EditorManager=require("editor/EditorManager"),FileSystem=require("filesystem/FileSystem");let $dropdown=null;function _getListOfHiddenTabs(paneId){const $currentTabBar="first-pane"===paneId?$("#phoenix-tab-bar"):$("#phoenix-tab-bar-2"),tabBarRect=$currentTabBar[0].getBoundingClientRect(),hiddenTabs=[];return $currentTabBar.find(".tab").each(function(){const tabRect=this.getBoundingClientRect(),isVisible=tabRect.left>=tabBarRect.left&&tabRect.right<=tabBarRect.right+2;if(!isVisible){const $tab=$(this),tabData={path:$tab.data("path"),name:$tab.find(".tab-name").text(),isActive:$tab.hasClass("active"),isDirty:$tab.hasClass("dirty"),isPlaceholder:$tab.hasClass("placeholder"),$icon:$tab.find(".tab-icon").clone()};hiddenTabs.push(tabData)}}),hiddenTabs}function toggleOverflowVisibility(paneId){const hiddenTabs=_getListOfHiddenTabs(paneId);if("first-pane"===paneId){const $overflowButton=$("#overflow-button");hiddenTabs.length>0?$overflowButton.removeClass("hidden"):$overflowButton.addClass("hidden")}else{const $overflowButton=$("#overflow-button-2");hiddenTabs.length>0?$overflowButton.removeClass("hidden"):$overflowButton.addClass("hidden")}}function showOverflowMenu(paneId,x,y){const hiddenTabs=_getListOfHiddenTabs(paneId),closingTabPaths={};($dropdown=new DropdownButton.DropdownButton("",hiddenTabs,function(item,index){const iconHtml=item.$icon[0].outerHTML,dirtyHtml=item.isDirty?'<span class="tab-dirty-icon-overflow">•</span>':'<span class="tab-dirty-icon-overflow empty"></span>',closeIconHtml=`<span class="tab-close-icon-overflow" data-tab-path="${item.path}" data-tab-index="${index}">\n                <i class="fa-solid fa-times"></i>\n            </span>`,placeholderClass=item.isPlaceholder?" placeholder-name":"";return{html:`<div class="dropdown-tab-item${item.isPlaceholder?" placeholder-item":""}" data-tab-path="${item.path}">\n                <div class="tab-info-container">\n                    ${dirtyHtml}\n                    <span class="tab-icon-container">${iconHtml}</span>\n                    <span class="tab-name-container${placeholderClass}">${item.name}</span>\n                </div>\n                ${closeIconHtml}\n            </div>`,enabled:!0}})).dropdownExtraClasses="dropdown-overflow-menu",$("body").append($dropdown.$button),$dropdown.$button.css({position:"absolute",left:x+"px",top:y+"px",zIndex:1e3}),$(document).one("mousedown",".tab-close-icon-overflow",function(e){const tabPath=$(this).data("tab-path");closingTabPaths[tabPath]=!0,e.preventDefault()}),$dropdown.showDropdown(),$dropdown.on("select",function(e,item,index){if(closingTabPaths[item.path]){const file=FileSystem.getFileForPath(item.path);return file&&setTimeout(function(){CommandManager.execute(Commands.FILE_CLOSE,{file:file,paneId:paneId}),delete closingTabPaths[item.path]},0),!1}const filePath=item.path;filePath&&(MainViewManager.setActivePaneId(paneId),CommandManager.execute(Commands.FILE_OPEN,{fullPath:filePath}),setTimeout(function(){const $tabBarElement="first-pane"===paneId?$("#phoenix-tab-bar"):$("#phoenix-tab-bar-2");scrollToActiveTab($tabBarElement)},100))}),$dropdown.$button.css({display:"none"})}function scrollToActiveTab($tabBarElement){if(!$tabBarElement||!$tabBarElement.length)return;let activePath;const activeEditor=EditorManager.getActiveEditor();if(activeEditor&&activeEditor.document&&activeEditor.document.file)activePath=activeEditor.document.file.fullPath;else{const currentFile=MainViewManager.getCurrentlyViewedFile();if(!currentFile)return;activePath=currentFile.fullPath}const $activeTab=$tabBarElement.find(`.tab[data-path="${activePath}"]`);if($activeTab.length){const tabBar=$tabBarElement[0],tabBarRect=tabBar.getBoundingClientRect(),tabBarVisibleWidth=tabBarRect.width,tabRect=$activeTab[0].getBoundingClientRect(),tabLeftRelative=tabRect.left-tabBarRect.left,tabRightRelative=tabRect.right-tabBarRect.left,currentScroll=tabBar.scrollLeft;let targetScroll=currentScroll,scrollDistance=0;if(tabLeftRelative<0)targetScroll=currentScroll+tabLeftRelative-10;else if(tabRightRelative>tabBarVisibleWidth){const scrollAdjustment=tabRightRelative-tabBarVisibleWidth+10;targetScroll=currentScroll+scrollAdjustment}scrollDistance=Math.abs(targetScroll-currentScroll);let duration=Math.min(Math.max(.15*scrollDistance,100),400);scrollDistance>5?$tabBarElement.stop(!0).animate({scrollLeft:targetScroll},duration,"linear"):tabBar.scrollLeft=targetScroll}}function _closeDropdown(){$dropdown&&($dropdown.$button&&$dropdown.$button.remove(),$dropdown=null)}function _handleOverflowButtonClick(e,paneId){e.stopPropagation(),$dropdown?_closeDropdown():showOverflowMenu(paneId,e.pageX,e.pageY)}function init(){$("html").on("click",function(e){$(e.target).closest("#overflow-button, #overflow-button-2").length||_closeDropdown()}),$(document).on("click","#overflow-button",function(e){_handleOverflowButtonClick(e,"first-pane")}),$(document).on("click","#overflow-button-2",function(e){_handleOverflowButtonClick(e,"second-pane")})}module.exports={init:init,toggleOverflowVisibility:toggleOverflowVisibility,scrollToActiveTab:scrollToActiveTab}});