feat: Add tag chips UI to all 3 setting pages (ohli24, anilife, linkkf) - Modern UI replacing textarea with draggable chips - Tab renamed from 홈화면 자동 to 자동등록
This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
<nav>
|
||||
{{ macros.m_tab_head_start() }}
|
||||
{{ macros.m_tab_head('normal', '일반', true) }}
|
||||
{{ macros.m_tab_head('auto', '홈화면 자동', false) }}
|
||||
{{ macros.m_tab_head('auto', '자동등록', false) }}
|
||||
{{ macros.m_tab_head('action', '기타', false) }}
|
||||
{{ macros.m_tab_head_end() }}
|
||||
</nav>
|
||||
@@ -68,7 +68,23 @@
|
||||
{{ macros.global_setting_scheduler_button(arg['scheduler'], arg['is_running']) }}
|
||||
{{ macros.setting_input_text('anilife_interval', '스케쥴링 실행 정보', value=arg['anilife_interval'], col='3', desc=['Inverval(minute 단위)이나 Cron 설정']) }}
|
||||
{{ macros.setting_checkbox('anilife_auto_start', '시작시 자동실행', value=arg['anilife_auto_start'], desc='On : 시작시 자동으로 스케쥴러에 등록됩니다.') }}
|
||||
{{ macros.setting_input_textarea('anilife_auto_code_list', '자동 다운로드할 작품 코드', desc=['all 입력시 모두 받기', '구분자 | 또는 엔터'], value=arg['anilife_auto_code_list'], row='10') }}
|
||||
<!-- 자동 다운로드 작품 코드 - Tag Chips UI -->
|
||||
<div class="row" style="padding-top: 10px; padding-bottom:10px;">
|
||||
<div class="col-sm-3 set-left">
|
||||
<strong>자동 다운로드할 작품 코드</strong>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input type="hidden" id="anilife_auto_code_list" name="anilife_auto_code_list" value="{{arg['anilife_auto_code_list']}}">
|
||||
<div id="tag_chips_container" class="tag-chips-wrapper mb-2"></div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" id="new_tag_input" class="form-control" placeholder="작품명 입력 후 Enter (all: 모두 받기)">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-primary" id="add_tag_btn"><i class="bi bi-plus-lg"></i> 추가</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top:5px;"><em class="text-muted">Enter로 추가, X로 삭제, 드래그 순서변경 | all 입력시 모두 받기</em></div>
|
||||
</div>
|
||||
</div>
|
||||
{{ macros.setting_checkbox('anilife_auto_mode_all', '에피소드 모두 받기', value=arg['anilife_auto_mode_all'], desc=['On : 이전 에피소드를 모두 받습니다.', 'Off : 최신 에피소드만 받습니다.']) }}
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
@@ -354,6 +370,59 @@
|
||||
background: rgba(59, 130, 246, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Tag Chips Styles */
|
||||
.tag-chips-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
min-height: 60px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tag-chips-wrapper:empty::before {
|
||||
content: '작품이 없습니다. 아래에서 추가하세요.';
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
}
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.4) 100%);
|
||||
border: 1px solid rgba(96, 165, 250, 0.4);
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
color: #e2e8f0;
|
||||
cursor: grab;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.tag-chip:hover {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.6) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.tag-chip .tag-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tag-chip .tag-remove {
|
||||
width: 18px; height: 18px;
|
||||
background: rgba(239, 68, 68, 0.5);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.tag-chip .tag-remove:hover { background: rgba(239, 68, 68, 0.9); }
|
||||
.tag-chip .tag-index {
|
||||
width: 20px; height: 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -588,8 +657,58 @@ $('#copy_cmd_btn').on('click', function() {
|
||||
// 초기 실행 - Action 탭 로드시 시스템 체크
|
||||
$(document).ready(function() {
|
||||
runSystemCheck();
|
||||
initTagChips();
|
||||
});
|
||||
|
||||
// ======================================
|
||||
// Tag Chips 기능
|
||||
// ======================================
|
||||
function initTagChips() {
|
||||
var value = $('#anilife_auto_code_list').val().trim();
|
||||
if (value) {
|
||||
var items = value.split(/[|\n]/).map(s => s.trim()).filter(s => s.length > 0);
|
||||
items.forEach(function(item, index) { addTagChip(item, index); });
|
||||
}
|
||||
updateTagIndices();
|
||||
}
|
||||
function addTagChip(text, index) {
|
||||
var chip = $('<div class="tag-chip" draggable="true" data-value="'+escapeHtml(text)+'"><span class="tag-index">'+(index+1)+'</span><span class="tag-text" title="'+escapeHtml(text)+'">'+escapeHtml(text)+'</span><span class="tag-remove"><i class="bi bi-x"></i></span></div>');
|
||||
$('#tag_chips_container').append(chip);
|
||||
}
|
||||
function updateHiddenField() {
|
||||
var values = [];
|
||||
$('#tag_chips_container .tag-chip').each(function() { values.push($(this).data('value')); });
|
||||
$('#anilife_auto_code_list').val(values.join('|'));
|
||||
}
|
||||
function updateTagIndices() {
|
||||
$('#tag_chips_container .tag-chip').each(function(i) { $(this).find('.tag-index').text(i+1); });
|
||||
}
|
||||
$('#tag_chips_container').on('click', '.tag-remove', function(e) {
|
||||
e.stopPropagation();
|
||||
var chip = $(this).closest('.tag-chip');
|
||||
chip.fadeOut(200, function() { $(this).remove(); updateHiddenField(); updateTagIndices(); });
|
||||
});
|
||||
$('#add_tag_btn').on('click', function() { addNewTag(); });
|
||||
$('#new_tag_input').on('keypress', function(e) { if (e.which === 13) { e.preventDefault(); addNewTag(); } });
|
||||
function addNewTag() {
|
||||
var text = $('#new_tag_input').val().trim();
|
||||
if (!text) { $.notify('작품명을 입력하세요', {type:'warning'}); return; }
|
||||
var exists = false;
|
||||
$('#tag_chips_container .tag-chip').each(function() { if ($(this).data('value') === text) exists = true; });
|
||||
if (exists) { $.notify('이미 등록된 작품입니다', {type:'warning'}); return; }
|
||||
addTagChip(text, $('#tag_chips_container .tag-chip').length);
|
||||
updateHiddenField();
|
||||
$('#new_tag_input').val('');
|
||||
$.notify('"'+text+'" 추가됨', {type:'success'});
|
||||
}
|
||||
var draggedChip = null;
|
||||
$('#tag_chips_container').on('dragstart', '.tag-chip', function(e) { draggedChip = this; $(this).addClass('dragging'); });
|
||||
$('#tag_chips_container').on('dragend', '.tag-chip', function() { $(this).removeClass('dragging'); draggedChip = null; updateHiddenField(); updateTagIndices(); });
|
||||
$('#tag_chips_container').on('dragover', function(e) { e.preventDefault(); var after = getDragAfterElement(this, e.originalEvent.clientX); if (!after) this.appendChild(draggedChip); else this.insertBefore(draggedChip, after); });
|
||||
function getDragAfterElement(container, x) {
|
||||
return [...container.querySelectorAll('.tag-chip:not(.dragging)')].reduce((c, el) => { var box = el.getBoundingClientRect(); var offset = x - box.left - box.width/2; return (offset < 0 && offset > c.offset) ? {offset, element: el} : c; }, {offset: Number.NEGATIVE_INFINITY}).element;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user