微件

TierListMaker：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,124次编辑
无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,124次编辑
无编辑摘要
第152行： 第152行：
}
}


.exporting .tier-dropzone.pool {
/* 导出时隐藏角色池 */
   border: 0;
#tierlist-maker.exporting .pool-wrapper {
  background: transparent;
   display: none !important;
}
}
</style>
</style>
第191行： 第191行：
       avatar.classList.add('dragging');
       avatar.classList.add('dragging');
       e.dataTransfer.setData('text/plain', avatar.dataset.id || avatar.querySelector('.avatar-name')?.textContent || '');
       e.dataTransfer.setData('text/plain', avatar.dataset.id || avatar.querySelector('.avatar-name')?.textContent || '');
      // allow move effect
       e.dataTransfer.effectAllowed = 'move';
       e.dataTransfer.effectAllowed = 'move';
     });
     });
第201行： 第200行：
     const avatars = root.querySelectorAll('.avatar-frame');
     const avatars = root.querySelectorAll('.avatar-frame');
     avatars.forEach(function(av) {
     avatars.forEach(function(av) {
      // Ensure data attributes exist
       if (!av.dataset.id) {
       if (!av.dataset.id) {
         const nameEl = av.querySelector('.avatar-name');
         const nameEl = av.querySelector('.avatar-name');
第212行： 第210行：
     zone.addEventListener('dragover', function(e) {
     zone.addEventListener('dragover', function(e) {
       e.preventDefault();
       e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
       const afterElement = getDragAfterElement(zone, e.clientY);
       const afterElement = getDragAfterElement(zone, e.clientY);
       const dragging = document.querySelector('.avatar-frame.dragging');
       const dragging = document.querySelector('.avatar-frame.dragging');
第224行： 第223行：
       e.preventDefault();
       e.preventDefault();
       const dragging = document.querySelector('.avatar-frame.dragging');
       const dragging = document.querySelector('.avatar-frame.dragging');
       if (dragging && dragging.parentNode !== zone) {
       if (dragging) {
        zone.appendChild(dragging);
        // 确保元素被正确添加到dropzone中
        if (!zone.contains(dragging)) {
          zone.appendChild(dragging);
        }
       }
       }
     });
     });
第252行： 第254行：
     th.appendChild(label);
     th.appendChild(label);
     th.appendChild(toolsWrap);
     th.appendChild(toolsWrap);
    // initial colors
     const initialBg = th.getAttribute('data-initial-bg') || 'gray';
     const initialBg = th.getAttribute('data-initial-bg') || 'gray';
     const fg = contrastColor(initialBg);
     const fg = contrastColor(initialBg);
     th.style.background = initialBg;
     th.style.background = initialBg;
     th.style.color = fg;
     th.style.color = fg;
    // color palette
     attachColorPalette(toolsWrap.querySelector('.color-toggle'), th);
     attachColorPalette(toolsWrap.querySelector('.color-toggle'), th);
    // delete handler
     const delBtn = toolsWrap.querySelector('.delete-row');
     const delBtn = toolsWrap.querySelector('.delete-row');
     delBtn.addEventListener('click', function() {
     delBtn.addEventListener('click', function() {
第265行： 第264行：
       const dropzone = tr.querySelector('.tier-dropzone');
       const dropzone = tr.querySelector('.tier-dropzone');
       const pool = document.getElementById('character-pool');
       const pool = document.getElementById('character-pool');
       // move items back to pool
       // 将角色移回角色池
       Array.from(dropzone.querySelectorAll('.avatar-frame')).forEach(function(av) {
       Array.from(dropzone.querySelectorAll('.avatar-frame')).forEach(function(av) {
         pool.appendChild(av);
         pool.appendChild(av);
第337行： 第336行：
     buildEditableHead(th);
     buildEditableHead(th);
   }
   }
 
  // 重置功能：将所有角色移回角色池
  function resetTierList() {
    const pool = document.getElementById('character-pool');
    const allDropzones = document.querySelectorAll('.tier-dropzone:not(.pool)');
   
    allDropzones.forEach(function(zone) {
      Array.from(zone.querySelectorAll('.avatar-frame')).forEach(function(av) {
        pool.appendChild(av);
      });
    });
  }
 
   function ensureHtml2Canvas(cb) {
   function ensureHtml2Canvas(cb) {
     if (window.html2canvas) { cb(); return; }
     if (window.html2canvas) { cb(); return; }
第347行： 第359行：
     document.body.appendChild(s);
     document.body.appendChild(s);
   }
   }
 
   function savePNG() {
   function savePNG() {
    const container = document.getElementById('tierlist-maker');
     const table = document.getElementById('tierlist-table');
     const table = document.getElementById('tierlist-table');
     document.getElementById('tierlist-maker').classList.add('exporting');
      
    // 添加导出样式类
    container.classList.add('exporting');
   
     ensureHtml2Canvas(function() {
     ensureHtml2Canvas(function() {
       // Use higher scale for sharper image
       // 等待样式应用
       html2canvas(table, {backgroundColor: null, scale: 2}).then(function(canvas) {
       setTimeout(function() {
        const link = document.createElement('a');
        html2canvas(table, {
        link.href = canvas.toDataURL('image/png');
          backgroundColor: '#ffffff',
        link.download = 'tierlist.png';
          scale: 2,
        document.body.appendChild(link);
          logging: false,
        link.click();
          useCORS: true
        document.body.removeChild(link);
        }).then(function(canvas) {
        document.getElementById('tierlist-maker').classList.remove('exporting');
          canvas.toBlob(function(blob) {
      }).catch(function() {
            const link = document.createElement('a');
        document.getElementById('tierlist-maker').classList.remove('exporting');
            link.href = URL.createObjectURL(blob);
        alert('保存PNG失败。');
            link.download = 'tierlist.png';
       });
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(link.href);
           
            // 移除导出样式类
            container.classList.remove('exporting');
          }, 'image/png');
        }).catch(function(err) {
          console.error('保存PNG失败:', err);
          container.classList.remove('exporting');
          alert('保存PNG失败，请重试。');
        });
       }, 100);
     });
     });
   }
   }
 
   ready(function() {
   ready(function() {
     // Initialize table heads editable and with tools
     // Initialize table heads editable and with tools
第376行： 第407行：
     document.getElementById('add-row').addEventListener('click', addNewRow);
     document.getElementById('add-row').addEventListener('click', addNewRow);
     document.getElementById('save-png').addEventListener('click', savePNG);
     document.getElementById('save-png').addEventListener('click', savePNG);
     // If avatars are loaded later (SMW), observe mutations to init new avatars
     document.getElementById('reset-btn').addEventListener('click', resetTierList);
   
    // Observe mutations to init new avatars
     const pool = document.getElementById('character-pool');
     const pool = document.getElementById('character-pool');
     const obs = new MutationObserver(function(muts) {
     const obs = new MutationObserver(function(muts) {
第384行： 第417行：
             if (n.nodeType === 1) {
             if (n.nodeType === 1) {
               if (n.classList.contains('avatar-frame')) makeDraggable(n);
               if (n.classList.contains('avatar-frame')) makeDraggable(n);
              // Also init any nested avatar frames
               n.querySelectorAll && n.querySelectorAll('.avatar-frame').forEach(makeDraggable);
               n.querySelectorAll && n.querySelectorAll('.avatar-frame').forEach(makeDraggable);
             }
             }

2025年10月21日 (二) 09:02的版本

检索自“http://cznwiki.com/index.php?title=微件:TierListMaker&oldid=3550”