Skip to content

Commit

Permalink
優化超級樣板 && 超級樣板設定支援拖拉調整順序
Browse files Browse the repository at this point in the history
  • Loading branch information
joe committed Nov 4, 2023
1 parent 5f7b7ed commit 48e6af2
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 15 deletions.
35 changes: 23 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
- 支援 Windows 和 Mac 平台的快捷鍵功能，讓使用者更加快速地操作。
- 支援 Dark Mode，讓使用者在低光環境下也能舒適地使用。
- 可匯出設定檔，和朋友分享你設計的問題樣板和快速回覆文字。
- 可下載當前對話的網頁，和朋友分享對話。

> 請注意：本工具僅提供 輔助對話 和 快捷鍵 功能，並不包括 ChatGPT Plus 的使用。如果您需要使用 ChatGPT Plus，請自行前往官方網站訂閱。
Expand Down Expand Up @@ -49,16 +48,14 @@
### 100組客製化問題模板（可根據使用習慣調整）

![](https://i.imgur.com/qK5CU5L.png)
> 按下 **主鍵+W**，打開第一個設定視窗。

![](https://i.imgur.com/S1pmDVv.png)
> 按下 **主鍵+S**，打開第二個設定視窗。

### 開啟提問視窗

![](https://i.imgur.com/mvR5rG6.gif)

> 可使用滑鼠點擊選單按鈕，或是使用 **主鍵+上排數字鍵1~0** 開啟對應的提問視窗。
> 可使用滑鼠點擊選單按鈕，或是使用 **主鍵+上排數字鍵1~5** 開啟對應的提問視窗。
### 提問視窗的操作

Expand All @@ -72,13 +69,10 @@

![](https://i.imgur.com/SWNqcGw.png)

> 按下 **主鍵+G**，打開快速回覆設定視窗。
### 快速回覆文字

![](https://i.imgur.com/zobAda2.gif)


### 新開 Chat 搭配 切換 Model 選單（已在 v0.9.5 移除）

![](https://i.imgur.com/Db57qXg.gif)
Expand Down Expand Up @@ -127,10 +121,18 @@

ChatGPT 雖然很厲害，但也有它的極限，所以我們要加強自己的判斷力，才能更好地利用與辨別 ChatGPT 的回答。此外，使用恰當的提示詞，也可以幫助我們更有效使用 ChatGPT 喔！

### 參數範例
![](https://hackmd.io/_uploads/H1iWnb0C3.png)
### 超級樣板的參數範例

![](https://hackmd.io/_uploads/Skizc5zG6.png)
![image.png](https://hackmd.io/_uploads/Hknnz4ZQp.png)

```
輸入 {{}} 可產生一個輸入框
輸入 {{ 欄位名稱 }} 可產生一個具有欄位名稱的輸入框
輸入 {{ 欄位名稱 || 預設值 }} 可產生一個具有欄位名稱的輸入框，且有預設值
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 || s }} 可產生一個具有欄位名稱的下拉選單，且預設值為第一個選項
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 , 選項四 , 選項五, 選項六 || c || 選項三 , 選項五 }} 可產生一個具有欄位名稱的複選框，且有預設值
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 , 選項四 , 選項五, 選項六 || r || 選項六 }} 可產生一個具有欄位名稱的單選框，且有預設值
```

### 支援多個欄位

Expand Down Expand Up @@ -576,8 +578,17 @@ ChatGPT 雖然很厲害，但也有它的極限，所以我們要加強自己的

### 1.1.3 版
送審日期：2023/10/29
通過日期：送審中
通過日期：2023/10/31

- 移除右側選單的下載功能
- 下拉選單、單選框、複選框 增加滑鼠移入效果
- 調整部分樣式
- 調整部分樣式

### 1.1.4 版
送審日期：2023/11/4
通過日期：送審中

- 優化超級樣板
- 超級樣板設定支援拖拉調整順序

![拖拉.gif](https://hackmd.io/_uploads/S1Cwuhmm6.gif)
173 changes: 170 additions & 3 deletions js/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1709,6 +1709,20 @@ function findGroupAndIndex(promptId) {
.dark .expand-edit-prompt{
fill:#d1d5db;
}
.dark .drag-btn{
color:#d1d5db;
}
.drag-over {
border-top: 2px solid blue;
padding-top: 10px;
}
.drag-over-bottom {
border-bottom: 2px solid blue;
padding-bottom: 10px;
}
.dragging-row {
opacity: 0.5;
}
`;

// 插入 style
Expand Down Expand Up @@ -2585,7 +2599,7 @@ function findGroupAndIndex(promptId) {
<div id="dialog6" class="dialog-wrapper" style="display:none">
<div class="dialog" style="max-width:95%;">
<div class="dialog-title"></div>
<div class="table-container">
<div id="superTableFormContainer" class="table-container">
<table id="superTableForm" class="my-table scroll-table-form" style="width:100%;margin-top:0px;">
<thead>
<tr>
Expand All @@ -2597,13 +2611,14 @@ function findGroupAndIndex(promptId) {
"table_title_super_prompt_text"
)}</th>
<th style="width:118px">${i18n("table_title_is_show")}</th>
<th style="width:40px;"></th>
</tr>
</thead>
<tbody>
${Array.from({ length: SuperPromptSettingsListLength })
.map((_, index) => {
return `
<tr>
<tr class="customDragItem" draggable="false">
<td style="text-align:center;width:50px">
<span class="superPromptId super-prompt-id"></span>
</td>
Expand Down Expand Up @@ -2631,6 +2646,9 @@ function findGroupAndIndex(promptId) {
<label for="superSlideCheckbox${index}"><span></span></label>
</div>
</td>
<td style="width:40px;">
<button class="drag-btn" style="margin:0px;padding:5px;font-size:1.5rem">☰</button>
</td>
</tr>
`;
})
Expand Down Expand Up @@ -3672,6 +3690,22 @@ function findGroupAndIndex(promptId) {

let isShowSuperPromptSettingDialogInit = true;

let dragged;

const handleMouseDown = (e) => {
dragged = e.target.closest('tr');
dragged.classList.add('dragging');
dragged.draggable = true;
};

const handleMouseUp = (e) => {
if (dragged) {
dragged.classList.remove('dragging');
dragged.draggable = false;
dragged = null;
}
};

function showSuperPromptSettingDialog(
superFormType,
focusElementIndex = null
Expand Down Expand Up @@ -3733,11 +3767,28 @@ function findGroupAndIndex(promptId) {
});
}

const draggingRow = document.querySelector('.dragging-row');

if(draggingRow){
draggingRow.classList.remove('dragging-row');
}

document.querySelectorAll('.drag-btn').forEach(btn => {
btn.removeEventListener('mousedown', handleMouseDown);
btn.removeEventListener('mouseup', handleMouseUp);
});

document.querySelectorAll('.drag-btn').forEach(btn => {
btn.addEventListener('mousedown', handleMouseDown);
btn.addEventListener('mouseup', handleMouseUp);
});

controlSuperPromptSettingsDialogTabindex();

isAllShow = superPromptSlideElements[0].checked;

isShowSuperPromptSettingDialogInit = false;

}

function saveSuperPromptSittings() {
Expand Down Expand Up @@ -4182,7 +4233,10 @@ function findGroupAndIndex(promptId) {

controlSuperDialogTabindex();

table.querySelector(".superPromptText").focus();
if(table.querySelector(".superPromptText")){
table.querySelector(".superPromptText").focus();
}

}

function sendSuperPrompt() {
Expand Down Expand Up @@ -5420,4 +5474,117 @@ function findGroupAndIndex(promptId) {
.querySelector(".custom-menu")
.addEventListener("keydown", controlCustomMenuTabindexHandler);
}

let draggedElement = null;

superPromptSettingsDialog.addEventListener('dragstart', function(e) {
if (e.target.tagName === 'TR' && e.target.classList.contains('dragging')) {
draggedElement = e.target;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', '');
setTimeout(() => e.target.classList.add('dragging-row'), 0);
}
});

superPromptSettingsDialog.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';

const target = e.target.closest('tr.customDragItem');

if (target) {
const rect = target.getBoundingClientRect();
const relY = e.clientY - rect.top;
if (relY < rect.height / 2) {
target.classList.add('drag-over');
target.classList.remove('drag-over-bottom');
} else {
target.classList.add('drag-over-bottom');
target.classList.remove('drag-over');
}
}

// 定義滾動速度和閾值
const SCROLL_SPEED = 2;
const SCROLL_THRESHOLD = 50;

// 獲取滾動容器
const scrollContainer = document.querySelector('#superTableFormContainer');

// 獲取滾動容器的矩形信息
const scrollContainerRect = scrollContainer.getBoundingClientRect();
// 計算相對於文檔的絕對位置
const scrollContainerTop = scrollContainerRect.top + window.scrollY;
const scrollContainerBottom = scrollContainerRect.bottom + window.scrollY;

// 檢查是否應該向上或向下滾動
if (e.clientY < (scrollContainerTop + SCROLL_THRESHOLD)) {
// 向上滾動
scrollContainer.scrollTop -= SCROLL_SPEED;
} else if (e.clientY > (scrollContainerBottom - SCROLL_THRESHOLD)) {
// 向下滾動
scrollContainer.scrollTop += SCROLL_SPEED;
}
});

superPromptSettingsDialog.addEventListener('dragleave', function(e) {
const target = e.target.closest('tr.customDragItem');
if (target) {
target.classList.remove('drag-over', 'drag-over-bottom');
}
});

superPromptSettingsDialog.addEventListener('drop', function(e) {
e.preventDefault();
if (draggedElement) {
const target = e.target.closest('tr.customDragItem');
if (target) {
target.classList.remove('drag-over', 'drag-over-bottom');
const tbody = target.parentNode;
const rects = target.getClientRects()[0];
const isDropAbove = e.clientY < rects.top + rects.height / 2;
if (isDropAbove) {
tbody.insertBefore(draggedElement, target);
} else {
tbody.insertBefore(draggedElement, target.nextSibling);
}
}
draggedElement.classList.remove('dragging-row');
draggedElement = null;
recalculateSupperSettingIndexes();
setTimeout(() => {
controlSuperPromptSettingsDialogTabindex();
});
}
});

function recalculateSupperSettingIndexes(){

const allCustomDragItem = document.querySelectorAll('.customDragItem');

const nowSuperPromptList = superPromptList.slice(
(currentSuperSettingFormType - 1) * SuperPromptSettingsListLength,
currentSuperSettingFormType * SuperPromptSettingsListLength
);

allCustomDragItem.forEach((item, index) => {
const superPromptIdElement = item.querySelector('.superPromptId');
superPromptIdElement.textContent = nowSuperPromptList[index].key;
const inputElement = item.querySelector('.superPromptButtonText');
inputElement.tabIndex = index * 2 + 1;
const textareaElement = item.querySelector('.superPromptText');
textareaElement.tabIndex = index * 2 + 2;
});

}

superPromptSettingsDialog.addEventListener('dragend', function(e) {
const trElements = document.querySelectorAll('.customDragItem');
trElements.forEach((tr) => {
tr.classList.remove('dragging-row', 'drag-over', 'drag-over-bottom' , 'dragging');
tr.draggable = false;
});
draggedElement = null;
});

})();

0 comments on commit 48e6af2

Please sign in to comment.