Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive demos #40

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from
Draft

Interactive demos #40

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a5f62c8
Create hello-world.html
caendesilva Nov 4, 2023
06979cf
Create interactive-blog-posts.blade.php
caendesilva Nov 4, 2023
83c778d
Inline file
caendesilva Nov 4, 2023
3bd6310
Front matter editable
caendesilva Nov 4, 2023
9f39f15
Improve interactions
caendesilva Nov 4, 2023
8920047
More interactions
caendesilva Nov 4, 2023
bf24d3f
Refactor to extract function
caendesilva Nov 4, 2023
3ebd0fd
More interactions
caendesilva Nov 4, 2023
b2dcf22
Source cleanup
caendesilva Nov 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactor to extract function
  • Loading branch information
@caendesilva
caendesilva committed Nov 4, 2023
commit bf24d3f530e1ba32935877eae34d79d1b8ccbbe1
243 changes: 77 additions & 166 deletions _pages/_partials/interactive-blog-posts.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,83 +229,79 @@ class="w-full x-uncloak-md md:flex flex-grow md:flex-grow-0 md:items-center md:w
</section>
</main>
<script>
// Title
const fmTitle = document.getElementById('fmTitle');
const resultTitle = document.getElementById('resultTitle');
const fileLabel = document.querySelectorAll('.file-label-result');
function registerMirror(sourceId, targetId, handler = function (source, target) {
target.innerText = source.innerText;
}) {
const source = document.getElementById(sourceId);
const target = document.getElementById(targetId);

source.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}

// Run the handler
handler(source, target);
});
}

fmTitle.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
// On hover of a field, highlight the corresponding result
function registerHover(source, target) {
if (typeof target === 'string') {
target = document.getElementById(target);
}
resultTitle.innerText = fmTitle.innerText;
// If title is empty, then we add a placeholder
if (resultTitle.innerText === '') {
resultTitle.innerText = 'Write a title!';
if (typeof source === 'string') {
source = document.getElementById(source);
}

fileLabel.forEach(function(label) {
source.addEventListener('mouseover', function() {
target.classList.add('highlight');
});

source.addEventListener('mouseout', function() {
target.classList.remove('highlight');
});
}

registerMirror('fmTitle', 'resultTitle', function(source, target) {
target.innerText = source.innerText;
if (target.innerText === '') {
target.innerText = 'Write a title!';
}

document.querySelectorAll('.file-label-result').forEach(function(label) {
// Update the file label to be kebab version of the title
let fileName = fmTitle.innerText.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
let fileName = source.innerText.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
// Remove any dashes from the start or end of the string
fileName = fileName.replace(/^-+|-+$/g, '');
label.innerText = fileName;
// If title is empty, then we add a placeholder
if (label.innerText === '') {
label.innerText = 'hello-world';
}
});
});

// Description
const fmDescription = document.getElementById('fmDescription');

fmDescription.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}

// Description is not rendered on this page
registerMirror('fmDescription', 'void', function () {
// Description is not rendered on this page (but we may want to add a popup showing the index page excerpt on hover?)
});

// Category
const fmCategory = document.getElementById('fmCategory');
const resultCategory = document.getElementById('resultCategory');

fmCategory.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
resultCategory.innerText = fmCategory.innerText;
// If category is empty, then we add a placeholder
if (resultCategory.innerText === '') {
resultCategory.innerText = 'demo';
registerMirror('fmCategory', 'resultCategory', function(source, target) {
target.innerText = source.innerText;
if (target.innerText === '') {
target.innerText = 'demo';
}
});

// Author
const fmAuthor = document.getElementById('fmAuthor');
const resultAuthor = document.getElementById('resultAuthor');
const resultAuthorParent = document.getElementById('resultAuthorParent');
const resultAuthorAlt = document.getElementById('resultAuthorAlt');

fmAuthor.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
registerMirror('fmAuthor', 'resultAuthor', function (source, target) {
const resultAuthorParent = document.getElementById('resultAuthorParent');
const resultAuthorAlt = document.getElementById('resultAuthorAlt');

let displayValue = fmAuthor.innerText;
let displayValue = source.innerText;

// if text is mr_hyde then we make the parent visible, and the alt span invisible
if (fmAuthor.innerText === 'mr_hyde') {
if (source.innerText === 'mr_hyde') {
resultAuthorParent.style.display = 'inline';
resultAuthorAlt.style.display = 'none';
displayValue = 'Mr. Hyde';
Expand All @@ -314,138 +310,53 @@ class="w-full x-uncloak-md md:flex flex-grow md:flex-grow-0 md:items-center md:w
resultAuthorAlt.style.display = 'inline';
}

resultAuthor.innerText = displayValue;
target.innerText = displayValue;
resultAuthorParent.href = displayValue;
resultAuthorAlt.innerText = displayValue;
// If author is empty, then we add a placeholder
if (fmAuthor.innerText === '') {
if (source.innerText === '') {
resultAuthorAlt.innerText = 'Guest';
}
});

// Date
const fmDate = document.getElementById('fmDate');
const resultDate = document.getElementById('resultDate');

fmDate.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}

// If date is empty, then we add a placeholder
if (resultDate.innerText === '') {
resultDate.innerText = 'Mar 14th, 2023';
registerMirror('fmDate', 'resultDate', function(source, target) {
if (target.innerText === '') {
target.innerText = 'Mar 14th, 2023';
}

// Format according to M jS, Y (with ordinal suffix
let date = new Date(fmDate.innerText);
let date = new Date(source.innerText);
let options = { year: 'numeric', month: 'short', day: 'numeric' };
resultDate.innerText = date.toLocaleDateString('en-US', options);
target.innerText = date.toLocaleDateString('en-US', options);
});

// Subheading
const mdSubheading = document.getElementById('mdSubheading');
const resultSubheading = document.getElementById('resultSubheading');

mdSubheading.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
resultSubheading.innerText = mdSubheading.innerText;
// If subheading is empty, then we add a placeholder
if (resultSubheading.innerText === '') {
resultSubheading.innerText = 'Write something awesome.';
}
});

// L1
const mdL1 = document.getElementById('mdL1');
const resultL1 = document.getElementById('resultL1');

mdL1.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
resultL1.innerText = mdL1.innerText;
// If L1 is empty, then we add a placeholder
if (resultL1.innerText === '') {
resultL1.innerText = 'Lorem markdownum Austri occupat redire sum sponte arcus,';
registerMirror('mdSubheading', 'resultSubheading', function(source, target) {
target.innerText = source.innerText;
if (target.innerText === '') {
target.innerText = 'Write something awesome.';
}
});

// Link
const mdLink = document.getElementById('mdLink');
const resultLink = document.getElementById('resultLink');

mdLink.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
resultLink.innerText = mdLink.innerText;
// If link is empty, then we add a placeholder
if (resultLink.innerText === '') {
resultLink.innerText = 'ferae';
}
});

// L2
const mdL2 = document.getElementById('mdL2');
const resultL2 = document.getElementById('resultL2');

mdL2.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
resultL2.innerText = mdL2.innerText;
// If L2 is empty, then we add a placeholder
if (resultL2.innerText === '') {
resultL2.innerText = 'longo,';
registerMirror('mdL1', 'resultL1', function(source, target) {
target.innerText = source.innerText;
if (target.innerText === '') {
target.innerText = 'Lorem markdownum Austri occupat redire sum sponte arcus,';
}
});

// L3
const mdL3 = document.getElementById('mdL3');
const resultL3 = document.getElementById('resultL3');

mdL3.addEventListener('input', function(event) {
// if insertParagraph is true, then the user pressed enter
if (event.inputType === 'insertParagraph') {
// We don't want to insert a paragraph, so we remove it
document.execCommand('undo');
}
resultL3.innerText = mdL3.innerText;
// If L3 is empty, then we add a placeholder
if (resultL3.innerText === '') {
resultL3.innerText = 'timuit magnanimus aera, violentam. Tractu ter.';
registerMirror('mdLink', 'resultLink', function(source, target) {
target.innerText = source.innerText;
if (target.innerText === '') {
target.innerText = 'ferae';
}
});

// On hover of a field, highlight the corresponding result
function registerHover(source, target) {
source.addEventListener('mouseover', function() {
target.classList.add('highlight');
});

source.addEventListener('mouseout', function() {
target.classList.remove('highlight');
});
}
registerMirror('mdL2', 'resultL2');
registerMirror('mdL3', 'resultL3');

registerHover(fmTitle, resultTitle);
registerHover(fmCategory, resultCategory);
registerHover(fmAuthor, resultAuthor);
registerHover(fmDate, resultDate);
registerHover(mdSubheading, resultSubheading);
registerHover('fmTitle', 'resultTitle');
registerHover('fmCategory', 'resultCategory');
registerHover('fmAuthor', 'resultAuthor');
registerHover('fmDate', 'resultDate');
registerHover('mdSubheading', 'resultSubheading');
</script>
</body>
</html>