Skip to content

Commit

Permalink
release 0.1.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@medeirosinacio
medeirosinacio committed Nov 21, 2024
1 parent 42cd7a2 commit b066f62
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 178 deletions.
161 changes: 160 additions & 1 deletion _layouts/blog-post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="post-title fw-bold color-hover">
</div>
<div class="col-md-10 col-lg-8">
{% if page.image %}
<div class="post-image mb-5">
<div class="post-image mb-4">
<a class="card-img-top d-block rounded-3"
style="background-image: url('{{ site.srcurl }}{{ page.image }}')"
href="{{ site.srcurl }}{{ page.url }}" title="{{ page.title }}"></a>
Expand Down Expand Up @@ -93,3 +93,162 @@ <h6 class="text-muted mb-3">
</script>
</div>
</article>

<script>
document.addEventListener('DOMContentLoaded', function () {

// Add style to images based on URL parameters
const images = document.querySelectorAll('.post-content img');
images.forEach(function (img) {
const imgUrl = img.src;
if (imgUrl.includes('/assets/images/posts/')) {
const urlParams = new URLSearchParams(new URL(imgUrl).search);
const classParams = urlParams.get('class');
if (classParams) {
for (const className of classParams.split(' ')) {
img.classList.add(className);
}
}
}
});
// Função para alternar entre abrir e fechar a imagem em tela cheia
images.forEach(function (img) {
img.addEventListener('click', function () {
let fullscreenDiv = document.querySelector('.fullscreen-image-container');

if (fullscreenDiv) {
fullscreenDiv.remove();
enableScroll();
} else {
// Cria a div que vai conter a imagem em tela cheia
fullscreenDiv = document.createElement('div');
fullscreenDiv.classList.add('fullscreen-image-container');
fullscreenDiv.style.position = 'fixed';
fullscreenDiv.style.top = '0';
fullscreenDiv.style.left = '0';
fullscreenDiv.style.width = '100vw';
fullscreenDiv.style.height = '100vh';
fullscreenDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
fullscreenDiv.style.display = 'flex';
fullscreenDiv.style.justifyContent = 'center';
fullscreenDiv.style.alignItems = 'center';
fullscreenDiv.style.zIndex = '1000';

// Cria a imagem
const fullscreenImg = document.createElement('img');
fullscreenImg.src = img.src;
fullscreenImg.style.maxWidth = '90%';
fullscreenImg.style.maxHeight = '80vh';
fullscreenImg.style.objectFit = 'contain';
fullscreenDiv.appendChild(fullscreenImg);
document.body.appendChild(fullscreenDiv);

disableScroll();

fullscreenDiv.addEventListener('click', function () {
fullscreenDiv.remove();
enableScroll();
});
}
});
});

// Add copy button to code blocks
const codeElements = document.querySelectorAll('.highlighter-rouge');
codeElements.forEach(function (codeElement) {
const newDiv = document.createElement('span');
newDiv.className = 'copy';
newDiv.setAttribute('data-bs-toggle', 'tooltip');
newDiv.setAttribute('title', 'Código copiado!');
newDiv.innerHTML = '<i class="bi bi-copy"></i>';
codeElement.insertAdjacentElement('afterbegin', newDiv);
});

// Initialize code block tooltips
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
trigger: 'click',
placement: 'top',
animation: true
});
tooltipTriggerEl.addEventListener('shown.bs.tooltip', function () {
setTimeout(function () {
tooltip.hide();
}, 1000);
});
return tooltip;
});

// Script to Copy code block to clipboard from click event in icon
document.querySelectorAll('.copy').forEach(function (codeBlock) {
codeBlock.addEventListener('click', function () {
const code = codeBlock.parentNode.lastElementChild;
const textToCopy = code.textContent || code.innerText;
navigator.clipboard.writeText(textToCopy).then(function () {
console.log('Código copiado com sucesso!');
console.log(textToCopy);
}).catch(function (err) {
console.log(err);
});
});
});

// Customize/add class to blockquote based on type
document.querySelectorAll('blockquote').forEach(blockquote => {
const p = blockquote.querySelector('p');
if (p) {
const text = p.textContent.trim();
const type = text.match(/^\[!(\w+)\]/);
if (type) {
const typeName = type[1].toLowerCase();
p.textContent = text.replace(/^\[!\w+\]/, '').trim();
blockquote.classList.add("blockquote-alert");
blockquote.classList.add("blockquote-" + typeName);
}
}
});
});

// Enable/Disable scroll
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () { supportsPassive = true; }
}));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
</script>
15 changes: 0 additions & 15 deletions assets/scripts/default.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,3 @@
document.addEventListener("DOMContentLoaded", function () {

});

document.querySelector('.switch').addEventListener('click', () => {
const elements = document.querySelectorAll('.mode-dark');
elements.forEach(function (element) {
const classes = element.className.split(' ');
classes.forEach(function (className, index) {
if (className.includes('mode-light')) {
classes[index] = className.replace('mode-light', 'mode-dark');
} else if (className.includes('mode-dark')) {
classes[index] = className.replace('mode-dark', 'mode-light');
}
});
element.className = classes.join(' ');
});
});
163 changes: 1 addition & 162 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ <h2 style="font-size: 0">Paginação</h2>
<!-- {% include aside.html %}-->
<!-- </div>-->
</div>
<script type="text/javascript" async>
<script>
const button = document.querySelector(".pagination");

const readout = document.querySelector("p");
Expand All @@ -125,164 +125,3 @@ <h2 style="font-size: 0">Paginação</h2>
button.style.setProperty("--y", e.clientY - y);
});
</script>
<script type="text/javascript" async>
document.addEventListener('DOMContentLoaded', function () {

// Add style to images based on URL parameters
const images = document.querySelectorAll('.post-content img');
images.forEach(function (img) {
const imgUrl = img.src;
if (imgUrl.includes('/assets/images/posts/')) {
const urlParams = new URLSearchParams(new URL(imgUrl).search);
const classParams = urlParams.get('class');
if (classParams) {
for (const className of classParams.split(' ')) {
img.classList.add(className);
}
}
}
});
// Função para alternar entre abrir e fechar a imagem em tela cheia
images.forEach(function (img) {
img.addEventListener('click', function () {
let fullscreenDiv = document.querySelector('.fullscreen-image-container');

if (fullscreenDiv) {
fullscreenDiv.remove();
enableScroll();
} else {
// Cria a div que vai conter a imagem em tela cheia
fullscreenDiv = document.createElement('div');
fullscreenDiv.classList.add('fullscreen-image-container');
fullscreenDiv.style.position = 'fixed';
fullscreenDiv.style.top = '0';
fullscreenDiv.style.left = '0';
fullscreenDiv.style.width = '100vw';
fullscreenDiv.style.height = '100vh';
fullscreenDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
fullscreenDiv.style.display = 'flex';
fullscreenDiv.style.justifyContent = 'center';
fullscreenDiv.style.alignItems = 'center';
fullscreenDiv.style.zIndex = '1000';

// Cria a imagem
const fullscreenImg = document.createElement('img');
fullscreenImg.src = img.src;
fullscreenImg.style.maxWidth = '90%';
fullscreenImg.style.maxHeight = '80vh';
fullscreenImg.style.objectFit = 'contain';
fullscreenDiv.appendChild(fullscreenImg);
document.body.appendChild(fullscreenDiv);

disableScroll();

fullscreenDiv.addEventListener('click', function () {
fullscreenDiv.remove();
enableScroll();
});
}
});
});

// Add copy button to code blocks
const codeElements = document.querySelectorAll('.highlighter-rouge');
codeElements.forEach(function (codeElement) {
const newDiv = document.createElement('span');
newDiv.className = 'copy';
newDiv.setAttribute('data-bs-toggle', 'tooltip');
newDiv.setAttribute('title', 'Código copiado!');
newDiv.innerHTML = '<i class="bi bi-copy"></i>';
codeElement.insertAdjacentElement('afterbegin', newDiv);
});

// Initialize code block tooltips
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
trigger: 'click',
placement: 'top',
animation: true
});
tooltipTriggerEl.addEventListener('shown.bs.tooltip', function () {
setTimeout(function () {
tooltip.hide();
}, 1000);
});
return tooltip;
});

// Script to Copy code block to clipboard from click event in icon
document.querySelectorAll('.copy').forEach(function (codeBlock) {
codeBlock.addEventListener('click', function () {
const code = codeBlock.parentNode.lastElementChild;
const textToCopy = code.textContent || code.innerText;
navigator.clipboard.writeText(textToCopy).then(function () {
console.log('Código copiado com sucesso!');
console.log(textToCopy);
}).catch(function (err) {
console.log(err);
});
});
});

// Customize/add class to blockquote based on type
document.querySelectorAll('blockquote').forEach(blockquote => {
const p = blockquote.querySelector('p');
if (p) {
const text = p.textContent.trim();
const type = text.match(/^\[!(\w+)\]/);
if (type) {
const typeName = type[1].toLowerCase();
p.textContent = text.replace(/^\[!\w+\]/, '').trim();
blockquote.classList.add("blockquote-alert");
blockquote.classList.add("blockquote-" + typeName);
}
}
});
});

// Enable/Disable scroll
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () {
supportsPassive = true;
}
}));
} catch (e) {
}

var wheelOpt = supportsPassive ? {passive: false} : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
</script>

0 comments on commit b066f62

Please sign in to comment.