Skip to content

Commit

Permalink
Update github repo package
Browse files Browse the repository at this point in the history
  • Loading branch information
@underpostnet
underpostnet committed Oct 30, 2024
1 parent 06cab49 commit eb759a1
Show file tree
Hide file tree
Showing 5 changed files with 228 additions and 23 deletions.
33 changes: 30 additions & 3 deletions src/client/components/core/CssCore.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AgGrid } from './AgGrid.js';
import { boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
import { borderChar, boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
import { LoadingAnimation } from './LoadingAnimation.js';
import { append, getProxyPath, s } from './VanillaJs.js';

Expand Down Expand Up @@ -135,6 +135,21 @@ const CssCommonCore = async () => {
width: 100%;
height: auto;
}
.down-arrow-submenu {
top: -20px;
text-align: right;
padding-right: 42px;
color: #5f5f5f;
}
.main-body-btn {
width: 50px;
height: 50px;
font-size: 18px;
cursor: pointer;
}
.main-body-btn:hover {
font-size: 21px;
}
</style>
<style>
.lds-dual-ring,
Expand Down Expand Up @@ -484,6 +499,12 @@ const CssCoreDark = {
a:hover {
color: #cdcdcd;
}
.ac {
color: #b1a7a7 !important;
}
.ahc {
color: #cdcdcd !important;
}
.content-render {
font-size: 16px;
font-family: monospace;
Expand All @@ -499,7 +520,7 @@ const CssCoreDark = {
.btn-input-extension:hover {
}
</style>
${scrollBarDarkRender()}
${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
`,
};

Expand Down Expand Up @@ -795,6 +816,12 @@ const CssCoreLight = {
a:hover {
color: #e89f4c;
}
.ac {
color: #6d68ff !important;
}
.ahc {
color: #e89f4c !important;
}
.content-render {
font-size: 16px;
font-family: monospace;
Expand All @@ -810,7 +837,7 @@ const CssCoreLight = {
.btn-input-extension:hover {
}
</style>
${scrollBarLightRender()}
${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
`,
};

Expand Down
20 changes: 19 additions & 1 deletion src/client/components/core/Docs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,16 +154,31 @@ const Docs = {
const { idModal } = options;
this.Tokens[idModal] = options;
setTimeout(() => {
const cleanActive = () => {
s(`.btn-docs-src`).classList.remove('main-btn-menu-active');
s(`.btn-docs-api`).classList.remove('main-btn-menu-active');
s(`.btn-docs-coverage`).classList.remove('main-btn-menu-active');
for (const umlType of umlTypes) {
const umlId = `uml-${umlType}`;
s(`.btn-docs-${umlId}`).classList.remove('main-btn-menu-active');
}
};
s(`.btn-docs-src`).onclick = async () => {
setQueryPath({ path: 'docs', queryPath: 'src' });
cleanActive();
s(`.btn-docs-src`).classList.add('main-btn-menu-active');
await this.RenderModal('src', options.modalOptions);
};
s(`.btn-docs-api`).onclick = async () => {
setQueryPath({ path: 'docs', queryPath: 'api' });
cleanActive();
s(`.btn-docs-api`).classList.add('main-btn-menu-active');
await this.RenderModal('api', options.modalOptions);
};
s(`.btn-docs-coverage`).onclick = async () => {
setQueryPath({ path: 'docs', queryPath: 'coverage' });
cleanActive();
s(`.btn-docs-coverage`).classList.add('main-btn-menu-active');
await this.RenderModal('coverage', options.modalOptions);
};

Expand All @@ -183,6 +198,8 @@ const Docs = {
for (const umlType of umlTypes) {
const umlId = `uml-${umlType}`;
s(`.btn-docs-${umlId}`).onclick = async () => {
cleanActive();
s(`.btn-docs-${umlId}`).classList.add('main-btn-menu-active');
setQueryPath({ path: 'docs', queryPath: umlId });
await this.RenderModal(umlId, { ...options.modalOptions, handleType: 'bar' });
};
Expand Down Expand Up @@ -229,7 +246,8 @@ const Docs = {
}

htmls('.menu-btn-container-children', html` <div class="fl menu-btn-container-docs">${docMenuRender}</div>`);
s(`.menu-btn-container-main`).classList.add('hide');
if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.add('hide');
htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);

this.Tokens[idModal] = new Sortable(s(`.menu-btn-container-docs`), {
animation: 150,
Expand Down
168 changes: 156 additions & 12 deletions src/client/components/core/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,11 @@ const Modal = {
}
});

setTimeout(() => {
s(`.main-body-btn-container`).style[
true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
});
Responsive.Event[`slide-menu-${idModal}`]();
};
barConfig.buttons.close.onClick = () => {
Expand All @@ -213,10 +218,87 @@ const Modal = {
}
});
// s(`.title-modal-${idModal}`).style.display = 'none';
setTimeout(() => {
s(`.main-body-btn-container`).style[
true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
] = `${0}px`;
});
Responsive.Event[`slide-menu-${idModal}`]();
};
transition += `, width 0.3s`;

setTimeout(() => {
append(
'body',
html`
<div
class="abs main-body-btn-container"
style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
(options.mode && options.mode.match('right'))
? 'right'
: 'left'}: 50px; width: 100px; transition: .3s"
>
<div
class="abs main-body-btn main-body-btn-menu hide"
style="top: 0px; ${true || (options.mode && options.mode.match('right'))
? 'right'
: 'left'}: 50px"
>
<div class="abs center">
<i class="fa-solid fa-xmark hide"></i>
<i class="fa-solid fa-bars"></i>
</div>
</div>
<div
class="abs main-body-btn main-body-btn-ui"
style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
>
<div class="abs center">
<i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
<i class="fas fa-caret-up main-body-btn-ui-close"></i>
</div>
</div>
</div>
`,
);

s(`.main-body-btn-menu`).onclick = () => {};

let _heightTopBar, _heightBottomBar, _topMenu;
s(`.main-body-btn-ui`).onclick = () => {
if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
s(`.main-body-btn-ui-open`).classList.remove('hide');
s(`.main-body-btn-ui-close`).classList.add('hide');
_heightTopBar = newInstance(options.heightTopBar);
_heightBottomBar = newInstance(options.heightBottomBar);
_topMenu = newInstance(s(`.modal-menu`).style.top);
options.heightTopBar = 0;
options.heightBottomBar = 0;
s(`.slide-menu-top-bar`).classList.add('hide');
s(`.bottom-bar`).classList.add('hide');
s(`.modal-menu`).style.top = '0px';
s(`.main-body-btn-container`).style.top = '50px';
} else {
s(`.main-body-btn-ui-close`).classList.remove('hide');
s(`.main-body-btn-ui-open`).classList.add('hide');
options.heightTopBar = _heightTopBar;
options.heightBottomBar = _heightBottomBar;
s(`.modal-menu`).style.top = _topMenu;
s(`.main-body-btn-container`).style.top = `${options.heightTopBar + 50}px`;
s(`.slide-menu-top-bar`).classList.remove('hide');
s(`.bottom-bar`).classList.remove('hide');
}
s(`.btn-menu-${'modal-menu'}`).click();
Object.keys(this.Data).map((_idModal) => {
if (this.Data[_idModal].slideMenu) {
s(`.btn-maximize-${_idModal}`).click();
}
});
Responsive.Event[`view-${'main-body'}`]();
if (Responsive.Event[`view-${'bottom-bar'}`]) Responsive.Event[`view-${'bottom-bar'}`]();
};
});

const inputSearchBoxId = `top-bar-search-box`;
append(
'body',
Expand Down Expand Up @@ -1053,6 +1135,28 @@ const Modal = {
top: 5%;
left: 5%;
}
.sub-menu-title-container-${idModal},
.nav-path-container-${idModal} {
top: 0px;
left: 0px;
width: 200px;
height: 50px;
overflow: hidden;
font-size: 20px;
cursor: default;
}
.nav-path-display-${idModal} {
font-size: 11px;
width: 100%;
top: 35px;
left: 37px;
}
.nav-title-display-${idModal} {
font-size: 19px;
width: 100%;
top: 13px;
left: 13px;
}
</style>
${renderStyleTag(`style-${idModal}`, `.${idModal}`, options)}
<div class="fix ${options && options.class ? options.class : ''} modal box-shadow ${idModal}">
Expand Down Expand Up @@ -1144,8 +1248,16 @@ const Modal = {
${await BtnIcon.Render({
style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
class: `in flr main-btn-menu action-bar-box btn-icon-menu-back hide`,
label: html`<div class="abs center"><i class="fa-solid fa-bars"></i></div>`,
label: html`<div class="abs center"><i class="fas fa-undo-alt"></i></div>`,
})}
<div class="abs sub-menu-title-container-${idModal} ac">
<div class="abs nav-title-display-${idModal}">
<!-- <i class="fas fa-home"></i> ${Translate.Render('home')} -->
</div>
</div>
<div class="abs nav-path-container-${idModal} ahc bold">
<div class="abs nav-path-display-${idModal}"><!-- ${location.pathname} --></div>
</div>
</div>`
: ''}
${options && options.html ? (typeof options.html === 'function' ? await options.html() : options.html) : ''}
Expand Down Expand Up @@ -1179,6 +1291,15 @@ const Modal = {
case 'slide-menu':
case 'slide-menu-right':
case 'slide-menu-left':
const backMenuButtonEvent = async () => {
if (location.pathname !== getProxyPath()) setPath(getProxyPath());
if (s(`.menu-btn-container-children`)) htmls(`.menu-btn-container-children`, '');
// htmls(`.nav-title-display-${'modal-menu'}`, html`<i class="fas fa-home"></i> ${Translate.Render('home')}`);
htmls(`.nav-title-display-${'modal-menu'}`, html``);
htmls(`.nav-path-display-${idModal}`, '');
s(`.btn-icon-menu-back`).classList.add('hide');
if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
};
s(`.main-btn-home`).onclick = () => {
for (const keyModal of Object.keys(this.Data)) {
if (
Expand All @@ -1187,14 +1308,11 @@ const Modal = {
.includes(keyModal)
)
s(`.btn-close-${keyModal}`).click();
backMenuButtonEvent();
}
s(`.btn-close-modal-menu`).click();
};
EventsUI.onClick(`.btn-icon-menu-back`, () => {
htmls(`.menu-btn-container-children`, '');
s(`.btn-icon-menu-back`).classList.add('hide');
s(`.menu-btn-container-main`).classList.remove('hide');
});
EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
EventsUI.onClick(`.btn-icon-menu-mode`, () => {
if (s(`.btn-icon-menu-mode-right`).classList.contains('hide')) {
s(`.btn-icon-menu-mode-right`).classList.remove('hide');
Expand All @@ -1205,6 +1323,12 @@ const Modal = {
}
if (slideMenuWidth === originSlideMenuWidth) {
slideMenuWidth = collapseSlideMenuWidth;
setTimeout(() => {
s(`.main-body-btn-container`).style[
true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
}, 1);

if (!s(`.btn-bar-center-icon-close`).classList.contains('hide')) {
sa(`.handle-btn-container`).forEach((el) => el.classList.add('hide'));
sa(`.menu-label-text`).forEach((el) => el.classList.add('hide'));
Expand All @@ -1216,8 +1340,16 @@ const Modal = {
s(`.btn-icon-menu-back`).classList.add('hide');
}
if (options.onCollapseMenu) options.onCollapseMenu();
s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
} else {
slideMenuWidth = originSlideMenuWidth;
setTimeout(() => {
s(`.main-body-btn-container`).style[
true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
}, 1);

sa(`.handle-btn-container`).forEach((el) => el.classList.remove('hide'));
sa(`.menu-label-text`).forEach((el) => el.classList.remove('hide'));
if (!Modal.mobileModal()) {
Expand All @@ -1228,6 +1360,8 @@ const Modal = {
s(`.btn-icon-menu-back`).classList.remove('hide');

if (options.onExtendMenu) options.onExtendMenu();
s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
}
// btn-bar-center-icon-menu
this.actionBtnCenter();
Expand Down Expand Up @@ -1366,13 +1500,23 @@ const Modal = {
callBack,
id: options.slideMenu,
};
s(`.${idModal}`).style.height = `${
window.innerHeight -
(options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
(options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
}px`;
s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
Responsive.Event['h-ui-hide-' + idModal] = () => {
setTimeout(() => {
s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
? `${window.innerHeight}px`
: `${
window.innerHeight -
(options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
(options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
}px`;
s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
? `0px`
: `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
});
};
Responsive.Event['h-ui-hide-' + idModal]();
} else {
delete Responsive.Event['h-ui-hide-' + idModal];
s(`.${idModal}`).style.width = '100%';
s(`.${idModal}`).style.height = '100%';
s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
Expand Down
Loading

0 comments on commit eb759a1

Please sign in to comment.