Add v17.6.9 client offer workspace tabs
This commit is contained in:
pavlov346346-source
parent
4ba730990b
commit
b4bae027fa
97
public/core/offer-workspace-v1769.js
Normal file
97
public/core/offer-workspace-v1769.js
Normal file
@ -0,0 +1,97 @@
|
||||
(()=>{
|
||||
'use strict';
|
||||
if(window.SunOfferWorkspaceV1769)return;
|
||||
const VERSION='17.6.9';
|
||||
const RELEASE='20260908-v17-6-9-offer-pdf-tabs-gallery';
|
||||
const MODES=new Set(['preview','editor','templates']);
|
||||
const $=id=>document.getElementById(id);
|
||||
const modal=()=>$('sunClientOfferModal');
|
||||
const dialog=()=>modal()?.querySelector('.dialog')||null;
|
||||
let mode='preview',wasOpen=false;
|
||||
|
||||
function installStyle(){
|
||||
if($('sunOfferWorkspaceV1769Style'))return;
|
||||
const s=document.createElement('style');s.id='sunOfferWorkspaceV1769Style';s.textContent=`
|
||||
#sunClientOfferModal .dialog.sun-offer-workspace-v1769{width:min(1240px,calc(100vw - 24px));height:min(94vh,980px);max-height:94vh;overflow:hidden!important;padding:0!important;display:flex;flex-direction:column;background:#f5f6f5;border-radius:19px}
|
||||
#sunClientOfferModal .sun-offer-modal-head{flex:0 0 auto;padding:14px 16px;background:#fff;border-bottom:1px solid #e5e7e6;position:relative;z-index:5}
|
||||
.sun-offer-workspace-tabs-v1769{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 12px;background:#fff;border-bottom:1px solid #e5e7e6;overflow-x:auto;scrollbar-width:thin}
|
||||
.sun-offer-workspace-tabs-v1769 button{flex:0 0 auto;border:1px solid #dfe3e0;background:#f7f8f7;color:#48504a;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:850;white-space:nowrap}
|
||||
.sun-offer-workspace-tabs-v1769 button.on{background:#1d2a22;color:#fff;border-color:#1d2a22;box-shadow:0 4px 13px rgba(29,42,34,.16)}
|
||||
#sunClientOfferModal .sun-offer-frame-wrap,#sunClientOfferModal #sunOfferEditor,#sunClientOfferModal #sunOfferTemplateV1764{flex:1 1 auto;min-height:0!important;overflow:auto!important;margin:0!important}
|
||||
#sunClientOfferModal .sun-offer-frame-wrap{padding:14px 16px 20px;background:#eef0ee}
|
||||
#sunClientOfferModal #sunOfferEditor{padding:15px 16px 24px!important;background:#fff;border:0!important}
|
||||
#sunClientOfferModal #sunOfferTemplateV1764{padding:16px!important;background:#fff;border:0!important}
|
||||
#sunClientOfferModal[data-offer-workspace-mode="preview"] #sunOfferEditor,#sunClientOfferModal[data-offer-workspace-mode="preview"] #sunOfferTemplateV1764{display:none!important}
|
||||
#sunClientOfferModal[data-offer-workspace-mode="preview"] .sun-offer-frame-wrap{display:block!important}
|
||||
#sunClientOfferModal[data-offer-workspace-mode="editor"] .sun-offer-frame-wrap,#sunClientOfferModal[data-offer-workspace-mode="editor"] #sunOfferTemplateV1764{display:none!important}
|
||||
#sunClientOfferModal[data-offer-workspace-mode="editor"] #sunOfferEditor{display:block!important}
|
||||
#sunClientOfferModal[data-offer-workspace-mode="templates"] .sun-offer-frame-wrap,#sunClientOfferModal[data-offer-workspace-mode="templates"] #sunOfferEditor{display:none!important}
|
||||
#sunClientOfferModal[data-offer-workspace-mode="templates"] #sunOfferTemplateV1764{display:block!important}
|
||||
#sunClientOfferModal #sunOfferTemplateV1764 .sun-v1764-offer-template-head{position:sticky;top:-16px;z-index:2;background:#fff;padding:1px 0 10px;margin-bottom:10px}
|
||||
#sunClientOfferModal #sunOfferTemplateV1764 .sun-v1764-offer-template-grid{grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px}
|
||||
#sunClientOfferModal #sunOfferTemplateV1764 .sun-v1764-offer-template-grid button{min-height:166px;padding:10px;border-radius:15px}
|
||||
#sunClientOfferModal #sunOfferTemplateV1764 .sun-offer-template-mini{height:116px}
|
||||
#sunClientOfferModal .sun-offer-editor-gallery{border:1px solid #e0e4e1;border-radius:16px;padding:14px;background:#f8faf8}
|
||||
#sunClientOfferModal .sun-offer-editor-gallery-images{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;margin-top:12px}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769{position:relative;border:1px solid #d9dfda;border-radius:14px;background:#fff;padding:9px;min-width:0}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 img{display:block;width:100%!important;height:170px!important;object-fit:cover!important;border-radius:10px!important;background:#edf0ed}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 .sun-offer-gallery-actions-v1769{display:flex;gap:7px;align-items:center;justify-content:space-between;margin-top:8px;flex-wrap:wrap}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 .sun-offer-gallery-actions-v1769 b{font-size:12px;color:#303831}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 input[type=file]{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 label,#sunClientOfferModal .sun-offer-gallery-upload-v1769 button{display:inline-flex!important;width:auto!important;flex-direction:row!important;align-items:center;gap:5px;margin:0!important;border-radius:9px;padding:7px 9px;font-size:11px;font-weight:800;cursor:pointer}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 label{background:#1d2a22;color:#fff;border:1px solid #1d2a22}
|
||||
#sunClientOfferModal .sun-offer-gallery-upload-v1769 button{background:#fff;color:#7b3a32;border:1px solid #e3c9c5}
|
||||
#sunClientOfferModal .sun-offer-editor-note{margin:12px 0 0}
|
||||
@media(max-width:820px){
|
||||
#sunClientOfferModal{padding:0!important}#sunClientOfferModal .dialog.sun-offer-workspace-v1769{width:100vw;height:100vh;max-height:none;border-radius:0}
|
||||
#sunClientOfferModal .sun-offer-modal-head{padding:10px 12px}#sunClientOfferModal .sun-offer-modal-actions{gap:5px}
|
||||
#sunClientOfferModal .sun-offer-modal-actions button{padding:7px 9px;font-size:11px}
|
||||
#sunClientOfferModal #sunOfferTemplateV1764 .sun-v1764-offer-template-grid{grid-template-columns:repeat(2,minmax(135px,1fr))}
|
||||
#sunClientOfferModal .sun-offer-editor-gallery-images{grid-template-columns:1fr}
|
||||
}
|
||||
`;document.head.appendChild(s);
|
||||
}
|
||||
|
||||
function ensureTabs(){
|
||||
const d=dialog(),m=modal();if(!d||!m)return false;
|
||||
d.classList.add('sun-offer-workspace-v1769');
|
||||
let tabs=$('sunOfferWorkspaceTabsV1769');
|
||||
if(!tabs){
|
||||
tabs=document.createElement('nav');tabs.id='sunOfferWorkspaceTabsV1769';tabs.className='sun-offer-workspace-tabs-v1769';tabs.setAttribute('aria-label','Разделы предложения клиенту');tabs.innerHTML=`<button type="button" data-offer-workspace-tab="preview">PDF и предпросмотр</button><button type="button" data-offer-workspace-tab="editor">Редактор</button><button type="button" data-offer-workspace-tab="templates">Оформление PDF</button>`;
|
||||
const head=d.querySelector('.sun-offer-modal-head');head?.insertAdjacentElement('afterend',tabs);
|
||||
tabs.addEventListener('click',e=>{const b=e.target.closest('[data-offer-workspace-tab]');if(b)setMode(b.dataset.offerWorkspaceTab)});
|
||||
}
|
||||
setMode(mode,false);return true;
|
||||
}
|
||||
|
||||
function setMode(next,focus=true){
|
||||
if(!MODES.has(next))next='preview';mode=next;const m=modal();if(!m)return;
|
||||
m.dataset.offerWorkspaceMode=mode;
|
||||
document.querySelectorAll('#sunOfferWorkspaceTabsV1769 [data-offer-workspace-tab]').forEach(b=>b.classList.toggle('on',b.dataset.offerWorkspaceTab===mode));
|
||||
const edit=$('sunOfferEdit');if(edit){edit.textContent=mode==='editor'?'К просмотру':'Редактировать';edit.setAttribute('aria-pressed',mode==='editor'?'true':'false')}
|
||||
if(focus){const target=mode==='editor'?$('sunOfferEditor'):mode==='templates'?$('sunOfferTemplateV1764'):m.querySelector('.sun-offer-frame-wrap');target?.scrollTo?.({top:0,behavior:'instant'});}
|
||||
}
|
||||
|
||||
function upgradeGalleryUi(){
|
||||
const wrap=modal()?.querySelector('.sun-offer-editor-gallery-images');if(!wrap||wrap.dataset.sunV1769==='1')return false;
|
||||
const inputs=wrap.querySelectorAll('[data-offer-gallery-slot]');
|
||||
if(inputs.length===2){wrap.dataset.sunV1769='1';return true;}
|
||||
const old=[...wrap.querySelectorAll('img')].map(x=>x.getAttribute('src')).filter(Boolean);
|
||||
wrap.innerHTML=[0,1].map(i=>`<div class="sun-offer-gallery-upload-v1769"><img id="sunOfferGalleryPreview${i}" src="${old[i]||`offer-gallery/${String(i+1).padStart(3,'0')}.jpg`}" alt="Фото сервировки ${i+1}"><div class="sun-offer-gallery-actions-v1769"><b>Фото ${i+1}</b><div style="display:flex;gap:6px"><label>Загрузить<input type="file" accept="image/*" data-offer-gallery-slot="${i}"></label><button type="button" data-offer-gallery-reset="${i}">Сбросить</button></div></div></div>`).join('');
|
||||
wrap.dataset.sunV1769='1';return true;
|
||||
}
|
||||
|
||||
function enhance(){installStyle();ensureTabs();upgradeGalleryUi();}
|
||||
|
||||
document.addEventListener('click',e=>{
|
||||
const edit=e.target.closest?.('#sunOfferEdit');if(edit&&modal()?.classList.contains('on')){e.preventDefault();e.stopImmediatePropagation();setMode(mode==='editor'?'preview':'editor');return;}
|
||||
const pdf=e.target.closest?.('#sunOfferPdf');if(pdf&&modal()?.classList.contains('on')&&mode!=='preview')setMode('preview',false);
|
||||
},true);
|
||||
|
||||
const observer=new MutationObserver(()=>{
|
||||
const m=modal();if(!m)return;enhance();const open=m.classList.contains('on');if(open&&!wasOpen)setMode('preview',false);wasOpen=open;
|
||||
});
|
||||
observer.observe(document.documentElement,{subtree:true,childList:true,attributes:true,attributeFilter:['class']});
|
||||
installStyle();enhance();
|
||||
window.SunOfferWorkspaceV1769={VERSION,RELEASE,setMode,enhance,checks:()=>({version:VERSION,mode,modal:Boolean(modal()),tabs:Boolean($('sunOfferWorkspaceTabsV1769'))})};
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user