Skip to content

Commit

Permalink
Merge pull request #36 from obgnail/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@obgnail
obgnail authored Jul 29, 2023
2 parents 4ba9235 + 9a2db57 commit db731fe
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 14 deletions.
3 changes: 2 additions & 1 deletion plugin/go_top.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const config = {
// 距顶部50像素开始显示
THRESHOLD: 50,
COLOR: "var(--active-file-border-color, black)",
}

const goTopDiv = document.createElement("div");
Expand All @@ -13,7 +14,7 @@
goTopDiv.style.zIndex = "99999";
goTopDiv.style.cursor = "pointer"
goTopDiv.style.fontSize = "50px";
goTopDiv.style.color = "#ffafa3";
goTopDiv.style.color = config.COLOR;
goTopDiv.style.display = "none";
const body = document.querySelector("body");
body.appendChild(goTopDiv);
Expand Down
2 changes: 1 addition & 1 deletion plugin/search_multi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#find-and-replace-icon-case"></use>
</svg>
</span>
<span ty-hint="将文件名加入搜索内容" id="typora-search-multi-path-option-btn" class="search-multi-search-option-btn" aria-label="将文件名加入搜索内容">
<span ty-hint="将文件路径加入搜索内容" id="typora-search-multi-path-option-btn" class="search-multi-search-option-btn" aria-label="将文件路径加入搜索内容">
<div class="ion-ionic"></div>
</span>
</div>
Expand Down
175 changes: 163 additions & 12 deletions plugin/window_tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
const config = {
// 隐藏掉titleBar
HIDE_WINDOW_TITLE_BAR: true,
// 允许拖拽排序标签页
ALLOW_DRAG: true,
// 拖拽排序标签页的方式（1 or 2）
DRAG_STYLE: 1,
// 是否调整content的top，以免被tab遮挡
CHANGE_CONTENT_TOP: true,
// 当标签页脱离父标签3倍高度时，视为新建窗口
HEIGHT_SCALE: 3,
// 总是在当前标签页打开
Expand Down Expand Up @@ -43,6 +45,7 @@
content: "";
height: 100%;
width: 100vw;
border-bottom: solid 1px rgba(0, 0, 0, 0.07);
}
#plugin-window-tab .tab-bar:hover::-webkit-scrollbar-thumb {
Expand Down Expand Up @@ -150,6 +153,20 @@
background-color: var(--active-file-border-color, black);
display: none;
}
#plugin-window-tab [dragging] {
position: static !important;
box-sizing: border-box !important;
margin: 0 !important;
}
#plugin-window-tab .drag-obj {
position: fixed;
left: 0;
top: 0;
z-index: 99999;
pointer-events: none;
}
`
const style = document.createElement('style');
style.type = 'text/css';
Expand All @@ -162,6 +179,11 @@
windowTab.innerHTML = div;
document.getElementById("write-style").parentElement
.insertBefore(windowTab, document.getElementById("write-style"));

if (config.CHANGE_CONTENT_TOP) {
const {height} = document.querySelector("#plugin-window-tab").getBoundingClientRect();
document.querySelector("content").style.top = height + "px";
}
})()

const Package = {
Expand Down Expand Up @@ -399,7 +421,143 @@
openFile(filePath);
}, true)

if (config.ALLOW_DRAG) {
const newWindowIfNeed = (offsetY, tab) => {
offsetY = Math.abs(offsetY);
const height = entities.tabBar.getBoundingClientRect().height;
if (offsetY > height * config.HEIGHT_SCALE) {
const idx = parseInt(tab.getAttribute("idx"));
const _path = tabUtil.tabs[idx].path;
openFileNewWindow(_path, false);
}
}

if (config.DRAG_STYLE === 1) {
const resetTabBar = () => {
const tabs = document.querySelectorAll("#plugin-window-tab .tab-container");
const activeIdx = parseInt(entities.tabBar.querySelector(".tab-container.active").getAttribute("idx"));
const activePath = tabUtil.tabs[activeIdx].path;
const newTabList = []
tabs.forEach(tab => {
const idx = parseInt(tab.getAttribute("idx"));
newTabList.push(tabUtil.tabs[idx]);
})
tabUtil.tabs = newTabList;
openTab(activePath);
}

const tabBar = $("#plugin-window-tab .tab-bar");
let currentDragItem = null;
let _offsetX = 0;

tabBar.on("dragstart", ".tab-container", function (ev) {
_offsetX = ev.offsetX;
currentDragItem = this;
})
tabBar.on("dragend", ".tab-container", function (ev) {
currentDragItem = null;
})
tabBar.on("dragover", ".tab-container", function (ev) {
ev.preventDefault();
if (!currentDragItem) return;
this[ev.offsetX > _offsetX ? 'after' : 'before'](currentDragItem);
})
tabBar.on("dragenter", function (ev) {
return false
})

let cloneObj = null;
let offsetX = 0;
let offsetY = 0;
let startX = 0;
let startY = 0;
let dragBox = null;
let axis, _axis;

tabBar.on("dragstart", ".tab-container", function (ev) {
dragBox = this;
dragBox.dragData = {};
axis = dragBox.getAttribute('axis');
_axis = axis;
ev.originalEvent.dataTransfer.effectAllowed = "move";
ev.originalEvent.dataTransfer.dropEffect = 'move';
let rect = dragBox.getBoundingClientRect();
let left = rect.left;
let top = rect.top;
startX = ev.clientX;
startY = ev.clientY;
offsetX = startX - left;
offsetY = startY - top;
dragBox.style.transition = 'none';

const fakeObj = dragBox.cloneNode(true);
fakeObj.style.width = dragBox.offsetWidth + 'px';
fakeObj.style.height = dragBox.offsetHeight + 'px';
fakeObj.style.transform = 'translate3d(0,0,0)';
fakeObj.setAttribute('dragging', '');
cloneObj = document.createElement('DIV');
cloneObj.appendChild(fakeObj);
cloneObj.className = 'drag-obj';
cloneObj.style = `transform:translate3d(${left}px, ${top}px, 0)`;
document.querySelector("content").appendChild(cloneObj);
})

tabBar.on("dragend", ".tab-container", function (ev) {
newWindowIfNeed(ev.offsetY, this);

if (!cloneObj) return;
const rect = this.getBoundingClientRect();
const reset = cloneObj.animate(
[{
transform: cloneObj.style.transform
}, {
transform: `translate3d(${rect.left}px, ${rect.top}px, 0)`
}], {
duration: 150,
easing: "ease-in-out",
}
)

reset.onfinish = function () {
document.querySelector("content").removeChild(cloneObj);
cloneObj = null;
dragBox.dragData = null;
dragBox.style.visibility = 'visible';
resetTabBar();
}
})

document.addEventListener('dragover', function (ev) {
if (!cloneObj) return;

ev.preventDefault();
ev.stopPropagation();
ev.dataTransfer.dropEffect = 'move';
dragBox.style.visibility = 'hidden';
let left = ~~(ev.clientX - offsetX);
let top = ~~(ev.clientY - offsetY);
if (ev.shiftKey || axis) {
if (_axis === 'X') {
top = ~~(startY - offsetY);
} else if (_axis === 'Y') {
left = ~~(startX - offsetX);
} else {
_axis = (~~Math.abs(ev.clientX - startX) > ~~Math.abs(ev.clientY - startY) && 'X' ||
~~Math.abs(ev.clientX - startX) < ~~Math.abs(ev.clientY - startY) && 'Y' || ''
)
}
} else {
_axis = '';
}
startX = left + offsetX;
startY = top + offsetY;

cloneObj.style.transform = `translate3d(${left}px, ${top}px, 0)`;
dragBox.dragData.left = left;
dragBox.dragData.top = top;
})
}

if (config.DRAG_STYLE === 2) {
let lastOver = null;
const tabBar = $("#plugin-window-tab .tab-bar");

Expand All @@ -411,21 +569,14 @@
})
tabBar.on("dragend", ".tab-container", function (ev) {
this.style.opacity = "";
const fromIdx = parseInt(this.getAttribute("idx"));

const offsetY = Math.abs(ev.offsetY);
const height = entities.tabBar.getBoundingClientRect().height;
if (offsetY > height * config.HEIGHT_SCALE) {
const _path = tabUtil.tabs[fromIdx].path;
openFileNewWindow(_path, false);
return
}
newWindowIfNeed(ev.offsetY, this);

if (lastOver) {
lastOver.classList.remove("over");
const activeIdx = parseInt(entities.tabBar.querySelector(".tab-container.active").getAttribute("idx"));
const activePath = tabUtil.tabs[activeIdx].path;
const toIdx = parseInt(lastOver.getAttribute("idx"));
const fromIdx = parseInt(this.getAttribute("idx"));
const ele = tabUtil.tabs.splice(fromIdx, 1)[0];
tabUtil.tabs.splice(toIdx, 0, ele);
openTab(activePath);
Expand Down

0 comments on commit db731fe

Please sign in to comment.