interface BaseField {
title?: string;
name?: string;
}
interface Field extends BaseField {
position: number;
orientation: Orientation;
totalSum: boolean;
}
interface ColField {
field: BaseField;
header: string;
...
}
this.colsFields: ColField[] = [
...
];
$('.scroll').on('click', function() {
const blockHeight = 1000;
$('.block-top').animate({height: `${blockHeight}px`},500);
var anchor = $('.anchor');
$('html,body').animate({ scrollTop: anchor.offset().top + blockHeight }, 500);
});
const parser = new DOMParser();
const html = parser.parseFromString( '<div><p>foo</p><p>bar</p></div>' , 'text/html');
const divDoc = html.getRootNode();
document.body.appendChild(divDoc.body);
const doc = h(
'div.block',
{
style: {
height: '200px',
},
},
h('span', 'text', {
style: {
color: 'red',
},
})
);
export const usePagination = (users = [], defaultPage = 1, amountPerPage = 10) => {
const [currentPage, setCurrentPage] = useState(defaultPage);
const [currentPosts, setCurrentPosts] = useState([]);
const [amountOfPages, setAmountOfPages] = useState(0);
useEffect(() => {
updatePosts();
updateAmountOfPages();
}, []);
const updatePosts = () => {
const indexOfLastPost = currentPage * amountPerPage;
const indexOfFirstPost = indexOfLastPost - amountPerPage;
const updatedUsers = users.slice(indexOfFirstPost, indexOfLastPost);
setCurrentPosts(updatedUsers);
};
const updateAmountOfPages = () => {
const updatedAmount = Math.ceil(users.length / amountPerPage);
setAmountOfPages(updatedAmount);
};
return {
setCurrentPage,
amountOfPages,
currentPosts,
};
};
const Pagination = ({amountOfPages, setCurrentPage}) => {
const [pageNumbers, setPageNumbers] = useState([]);
useEffect(() => {
calculatePageNumbers();
}, [amountOfPages]);
function calculatePageNumbers() {
const updatedPageNumbers = [];
for (let i = 1; i <= amountOfPages; i++) {
updatedPageNumbers.push(i);
}
setPageNumbers(updatedPageNumbers);
}
function handleSetCurrentPage(number) {
return () => {
setCurrentPage(number);
}
}
return (
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className="page-item">
<button
onClick={handleSetCurrentPage(number)}
type="button"
className="page-link"
>
{number}
</button>
</li>
))}
</ul>
</nav>
);
};
const modalContent = {
_001: { title: 'Some title', description: 'Some description' },
_002: { title: 'Some title', description: 'Some description' },
_003: { title: 'Some title', description: 'Some description' },
_004: { title: 'Some title', description: 'Some description' },
_005: { title: 'Some title', description: 'Some description' },
};
id
в myModal
.$(polygon).on('click', function(e) {
const currentId = $(e.currentTarget).attr('id);
const {title, description} = modalContent[currentId];
$('#myModal').append(`
<h1>${title}</h1>
<p>${description}</p>
`);
});
// Tunnel the Browsersync server through a random Public URL
// -> http://randomstring23232.localtunnel.me
tunnel: true
// Attempt to use the URL "http://my-private-site.localtunnel.me"
tunnel: "my-private-site"
browserSync.init({
server: { baseDir: 'app/' },
notify: false,
online: true,
tunnel: "test", // или true если нужен рандомный туннель
browser: "chrome",
});