mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2025-01-06 21:49:40 +02:00
Adds feature to be able to copy Glyph class, hex, or icon itself
This commit is contained in:
Ryan L McIntyre
parent
c5b1bcebbd
commit
ac6af2a4df
@ -15262,5 +15262,6 @@ page: cheat-sheet
|
||||
{% endhighlight %}
|
||||
<span class="nerd-fonts-example-usage">
|
||||
I really <i class="nf nf-fa-heart ow"></i> <i class="nf nf-custom-vim nfunc"></i>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div id="glyphCheatSheetCopyFrom"></div> -->
|
||||
176
site.js
176
site.js
@ -114,14 +114,41 @@ $(document).ready(function (){
|
||||
|
||||
// extremely basic search
|
||||
|
||||
$('#glyphSearch').on('keyup', function(e) {
|
||||
$('#glyphSearch').on('keyup', debounce(function(e) {
|
||||
gtag('event', 'search-via-input', {
|
||||
'event_category': 'glyph-search',
|
||||
'event_label': 'Cheat Sheet : ' + (e.target && e.target.value),
|
||||
'value': e.target && e.target.value
|
||||
});
|
||||
searchGlyphs();
|
||||
});
|
||||
}, 500));
|
||||
|
||||
// Credit David Walsh (https://davidwalsh.name/javascript-debounce-function)
|
||||
// Returns a function, that, as long as it continues to be invoked, will not
|
||||
// be triggered. The function will be called after it stops being called for
|
||||
// N milliseconds. If `immediate` is passed, trigger the function on the
|
||||
// leading edge, instead of the trailing.
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
|
||||
return function executedFunction() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
|
||||
var callNow = immediate && !timeout;
|
||||
|
||||
clearTimeout(timeout);
|
||||
|
||||
timeout = setTimeout(later, wait);
|
||||
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
}
|
||||
|
||||
function searchGlyphs() {
|
||||
var input = $('#glyphSearch');
|
||||
@ -180,7 +207,150 @@ $(document).ready(function (){
|
||||
// redirect to cheat sheet with param
|
||||
window.location.href = window.location.origin + "/cheat-sheet?set=" + set;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* hold on to yer' butts */
|
||||
|
||||
// Copies a string to the clipboard. Must be called from within an
|
||||
// event handler such as click. May return false if it failed, but
|
||||
// this is not always possible. Browser support for Chrome 43+,
|
||||
// Firefox 42+, Safari 10+, Edge and IE 10+.
|
||||
// IE: The clipboard feature may be disabled by an administrator. By
|
||||
// default a prompt is shown the first time the clipboard is
|
||||
// used (per session).
|
||||
function copyToClipboard(text) {
|
||||
if (window.clipboardData && window.clipboardData.setData) {
|
||||
// IE specific code path to prevent textarea being shown while dialog is visible.
|
||||
return clipboardData.setData("Text", text);
|
||||
|
||||
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
|
||||
var textarea = document.createElement("textarea");
|
||||
textarea.textContent = text;
|
||||
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
try {
|
||||
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
|
||||
} catch (ex) {
|
||||
console.warn("Copy to clipboard failed.", ex);
|
||||
return false;
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* document.getElementById('glyphCheatSheet').addEventListener('mouseover', function (event) {
|
||||
const target = event.target
|
||||
if (target.matches('.column') && target.children.length > 2 && !target.contains(target.querySelector('.glyph-popout-copy-clipboard'))) {
|
||||
console.log(target.value);
|
||||
const className = target.children[1].innerText;
|
||||
const codePoint = target.children[2].innerText;
|
||||
const unicodeChar = target.children[0].dataset.content && target.children[0].dataset.content.charAt(0);
|
||||
console.log('class', className, 'codepoint', codePoint, 'unicodeChar', unicodeChar);
|
||||
document.getElementById('glyphCheatSheetCopyFrom').innerText = className;
|
||||
|
||||
const newNode = document.createElement('span');
|
||||
const copyClassNode = document.createElement('span');
|
||||
const copyCodePoint = document.createElement('span');
|
||||
newNode.className = 'glyph-popout-copy-clipboard';
|
||||
copyClassNode.innerText = 'Copy Class';
|
||||
copyCodePoint.innerText = 'Copy Hex';
|
||||
newNode.appendChild(copyClassNode);
|
||||
newNode.appendChild(copyCodePoint);
|
||||
target.children[0].before(newNode);
|
||||
// copyToClipboard('foooo');
|
||||
//document.getElementById('glyphCheatSheet').insertBefore(newNode, target);
|
||||
}
|
||||
}); */
|
||||
|
||||
/* document.getElementById('glyphCheatSheet').addEventListener('click', function (event) {
|
||||
console.log('clicked');
|
||||
copyToClipboard('foooo copied');
|
||||
}); */
|
||||
|
||||
/* document.getElementById('glyphCheatSheet').addEventListener('mouseout', function (event) {
|
||||
const target = event.target;
|
||||
const e = event.toElement || event.relatedTarget;
|
||||
const isOriginalNodeEvent = e.parentNode == this || e == this; // avoid removal on child elements
|
||||
const doesToElementContainOriginalNode = e.contains(this);
|
||||
// no need to capture 'this' > it is always the #glyphCheatSheet
|
||||
console.log('mouse out', 'target', target, 'toElement', event.toElement, 'relatedTarget', event.relatedTarget);
|
||||
console.log('isOriginal', isOriginalNodeEvent, 'doesContain', doesToElementContainOriginalNode);
|
||||
console.log('target matches column', target.matches('.column'));
|
||||
if (isOriginalNodeEvent || doesToElementContainOriginalNode) {
|
||||
if (target.matches('.column')) {
|
||||
console.log('is .column');
|
||||
//target.querySelectorAll('.glyph-popout-copy-clipboard').forEach(el => el.remove()); // @TODO fix reliance on querySelectorAll and use of forEach
|
||||
target.querySelector('.glyph-popout-copy-clipboard').remove();
|
||||
}
|
||||
else if (target.parentNode.matches('.column') && target.parentNode.querySelector('.glyph-popout-copy-clipboard')) {
|
||||
console.log('is parent .column');
|
||||
target.parentNode.querySelector('.glyph-popout-copy-clipboard').remove();
|
||||
}
|
||||
else {
|
||||
console.log('is NOT original event', 'this', this, 'e', e, 'e.parentNode', e.parentNode);
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
document.getElementById('glyphCheatSheet').addEventListener("mouseenter", function(e) {
|
||||
if(e.target.className === "column") {
|
||||
console.log("entered column");
|
||||
|
||||
// add Node
|
||||
const newNode = document.createElement('span');
|
||||
const copyTextNode = document.createElement('span');
|
||||
const copyGlyphNode = document.createElement('span');
|
||||
const copyClassNode = document.createElement('span');
|
||||
const copyCodePoint = document.createElement('span');
|
||||
newNode.className = 'glyph-popout-copy-clipboard';
|
||||
copyTextNode.innerText = 'Copy';
|
||||
copyGlyphNode.innerText = 'Icon';
|
||||
copyClassNode.innerText = 'Class';
|
||||
copyCodePoint.innerText = 'Hex';
|
||||
copyGlyphNode.title = 'Copy Icon to Clipboard'
|
||||
copyClassNode.title = 'Copy Class Name to Clipboard'
|
||||
copyCodePoint.title = 'Copy Hex Code Point to Clipboard'
|
||||
copyGlyphNode.className = 'copy-glyph';
|
||||
copyClassNode.className = 'copy-class';
|
||||
copyCodePoint.className = 'copy-hex';
|
||||
newNode.appendChild(copyTextNode);
|
||||
newNode.appendChild(copyGlyphNode);
|
||||
newNode.appendChild(copyClassNode);
|
||||
newNode.appendChild(copyCodePoint);
|
||||
e.target.children[0].before(newNode);
|
||||
}
|
||||
},true);
|
||||
|
||||
document.getElementById('glyphCheatSheet').addEventListener("mouseleave", function(e) {
|
||||
if(e.target.className === "column") {
|
||||
console.log("left column");
|
||||
e.target.querySelector('.glyph-popout-copy-clipboard').remove()
|
||||
}
|
||||
},true);
|
||||
|
||||
document.getElementById('glyphCheatSheet').addEventListener('click', function (event) {
|
||||
let textToCopy = '';
|
||||
if (event.target.parentNode.className === 'glyph-popout-copy-clipboard') {
|
||||
if (event.target.className === 'copy-class') {
|
||||
textToCopy = event.target.parentNode.parentNode.querySelector('.class-name').innerText;
|
||||
}
|
||||
else if (event.target.className === 'copy-hex') {
|
||||
textToCopy = event.target.parentNode.parentNode.querySelector('.codepoint').innerText;
|
||||
}
|
||||
else if (event.target.className === 'copy-glyph') {
|
||||
// console.log('copy glyph', event.target.parentNode.parentNode.querySelector('.nf'), event.target.parentNode.parentNode.querySelector('.nf').innerHTML);
|
||||
// textToCopy = event.target.parentNode.parentNode.querySelector('.nf').innerHTML;
|
||||
textToCopy = window.getComputedStyle(
|
||||
document.querySelector(`.${event.target.parentNode.parentNode.querySelector('.class-name').innerText}`), ':before'
|
||||
).getPropertyValue('content').replace(/"/g,'');
|
||||
}
|
||||
copyToClipboard(textToCopy);
|
||||
// console.log('clicked');
|
||||
// copyToClipboard('foooo copied');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user