mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2024-09-19 09:51:48 +02:00
Styling tweaks to home and downloads pages + JS improvements
* improves download page links and adds other download/install options * adds some more styling to home page to be a bit more striking * removes reliance on jQuery and rewrites most of the JavaScript * misc formatting fixes
This commit is contained in:
Ryan L McIntyre
parent
6d41ea070a
commit
a0a73c77ee
7 changed files with 422 additions and 311 deletions
|
|
@ -1,21 +1,27 @@
|
|||
{% if site.google_analytics_key %}
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_key }}"></script>
|
||||
<script type="text/javascript">
|
||||
{% if jekyll.environment == "production" %}
|
||||
{% if site.google_analytics_key %}
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_key }}"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', '{{ site.google_analytics_key }}']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', '{{ site.google_analytics_key }}']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '{{ site.google_analytics_key }}');
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '{{ site.google_analytics_key }}');
|
||||
</script>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<script>
|
||||
function gtag() { console.log('noop'); }
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -45,7 +45,7 @@ p {
|
|||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#main .nerd-font-cheat-sheet .column {
|
||||
#glyphCheatSheet .column {
|
||||
width: 146px;
|
||||
height: 146px;
|
||||
text-align: center;
|
||||
|
|
@ -61,6 +61,10 @@ p {
|
|||
display: none; /* don't show any by default */
|
||||
}
|
||||
|
||||
#glyphCheatSheet .column.is-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#main .nerd-font-cheat-sheet .column:hover {
|
||||
background: rgba(0,0,0,.25);
|
||||
border: 2px solid #0fbfcf;
|
||||
|
|
@ -365,6 +369,60 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.icon-backdrop {
|
||||
/* position: absolute;
|
||||
opacity: 0.20;
|
||||
font-size: 2rem;
|
||||
line-height: 1.43em;
|
||||
word-spacing: 1rem;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
font-family: 'NerdFontsSymbols Nerd Font';
|
||||
padding: 0px 20px 10px 20px; */
|
||||
position: absolute;
|
||||
opacity: 0.15;
|
||||
font-size: 2em;
|
||||
line-height: 1.43em;
|
||||
word-spacing: 1rem;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
font-family: 'NerdFontsSymbols Nerd Font';
|
||||
padding: 0px 20px 10px 20px;
|
||||
height: 444px;
|
||||
}
|
||||
|
||||
.rainbow {
|
||||
/* fe2 and ff2 with 66601e */
|
||||
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(.9, #66601e), color-stop(1, #f22) );
|
||||
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #66601e), color-stop(1, #f22) );
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Downloads page */
|
||||
#downloads {}
|
||||
|
||||
#downloads ul {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 1.2em;
|
||||
font-size: 22px;
|
||||
}
|
||||
#downloads ul li:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#downloads li {
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
super tiny size (phones)
|
||||
point at which nav wraps
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script>
|
||||
((window.gitter = {}).chat = {}).options = {
|
||||
room: 'ryanoasis/nerd-fonts'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
{% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
|
||||
<div id="{{id}}" class="section p-{{id}}">
|
||||
{% if id == 'home' %}
|
||||
<div class="icon-backdrop rainbow">
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if page.icon %}
|
||||
<div class="subtlecircle sectiondivider imaged">
|
||||
<img src="{{page.icon}}" alt="section icon" />
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@ color: black
|
|||
style: center
|
||||
---
|
||||
|
||||
<h1 align="center">
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts"><img src="assets/img/nerd-fonts-logo.svg" alt="Nerd Fonts - Iconic font aggregator" /></a>
|
||||
<h1>
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts">
|
||||
<img src="assets/img/nerd-fonts-logo.svg" alt="Nerd Fonts - Iconic font aggregator" />
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
### Iconic font aggregator, collection, and patcher
|
||||
|
|
@ -34,12 +36,12 @@ style: center
|
|||
</div>
|
||||
</div>
|
||||
**Nerd Fonts** patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as [Font Awesome][font-awesome], [Devicons][vorillaz-devicons], [Octicons][octicons], and others.
|
||||
<h1 align="center" markdown="0">
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts"><img src="assets/img/sankey-glyphs-combined-diagram.png" alt="Nerd Fonts Sankey Diagram" /></a>
|
||||
</h1>
|
||||
<small markdown="0" class="text-left"><sub><em>Diagram created using <a href="http://sankeymatic.com/" title="SankeyMATIC (BETA): A Sankey diagram builder for everyone">SankeyMATIC</a></em></sub></small>
|
||||
|
||||
|
||||
<div class="container" markdown="0">
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts">
|
||||
<img src="assets/img/sankey-glyphs-combined-diagram.png" alt="Nerd Fonts Sankey Diagram" />
|
||||
</a>
|
||||
<div class="text-left"><small><sub><em>Diagram created using <a href="http://sankeymatic.com/" title="SankeyMATIC (BETA): A Sankey diagram builder for everyone">SankeyMATIC</a></em></sub></small></div>
|
||||
</div>
|
||||
<span id="forkongithub">
|
||||
<a href="{{ site.source_link }}" class="bg-blue">
|
||||
<i class="nf nf-fa-code_fork"></i> Fork us on GitHub <i class="nf nf-fa-heart ow"></i>
|
||||
|
|
|
|||
|
|
@ -58,3 +58,32 @@ page: font-downloads
|
|||
- [Ubuntu](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.0.0/Ubuntu.zip)
|
||||
- [UbuntuMono](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.0.0/UbuntuMono.zip)
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div markdown="1">
|
||||
|
||||
## Other Download & Install Options
|
||||
|
||||
### Homebrew
|
||||
|
||||
```sh
|
||||
brew tap homebrew/cask-fonts &&
|
||||
brew cask install font-<FONT NAME>-nerd-font
|
||||
```
|
||||
|
||||
### :// curl
|
||||
|
||||
```sh
|
||||
curl -fLo "<FONT NAME> Nerd Font Complete.otf" https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/<FONT_PATH>/complete/<FONT_NAME>%20Nerd%20Font%20Complete.otf
|
||||
```
|
||||
|
||||
### Bash Install Script
|
||||
|
||||
```sh
|
||||
./install.sh <FontName>
|
||||
```
|
||||
|
||||
### Unofficial Arch User Repository (AUR)
|
||||
|
||||
See: [Nerd Fonts Packages](https://aur.archlinux.org/packages/?K=nerd-fonts&SB=p)
|
||||
|
||||
</div>
|
||||
584
site.js
584
site.js
|
|
@ -1,302 +1,314 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
$.extend($.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
const elementGlyphSearch = document.getElementById('glyphSearch');
|
||||
const elementGlyphCheatSheet = document.getElementById('glyphCheatSheet');
|
||||
|
||||
// nice scrolling
|
||||
|
||||
document.getElementsByTagName('nav')[0].addEventListener('click', function (e) {
|
||||
if (e.target.matches('a') && e.target.hash) {
|
||||
const section = document.getElementById(e.target.hash.slice(1));
|
||||
|
||||
if (section) {
|
||||
e.preventDefault();
|
||||
scrollIt(section);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
(function( $ ) {
|
||||
function scrollIt(destination, duration = 200, easing = 'linear', callback) {
|
||||
|
||||
var settings;
|
||||
var disableScrollFn = false;
|
||||
var navItems;
|
||||
var navs = {}, sections = {};
|
||||
|
||||
$.fn.navScroller = function(options) {
|
||||
settings = $.extend({
|
||||
scrollToOffset: 170,
|
||||
scrollSpeed: 800,
|
||||
activateParentNode: true,
|
||||
}, options );
|
||||
navItems = this;
|
||||
|
||||
//attatch click listeners
|
||||
navItems.on('click', function(event){
|
||||
event.preventDefault();
|
||||
var navID = $(this).attr("href").substring(1);
|
||||
disableScrollFn = true;
|
||||
activateNav(navID);
|
||||
populateDestinations(); //recalculate these!
|
||||
$('html,body').animate({scrollTop: sections[navID] - settings.scrollToOffset},
|
||||
settings.scrollSpeed, "easeInOutExpo", function(){
|
||||
disableScrollFn = false;
|
||||
window.location.hash = navID;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//populate lookup of clicable elements and destination sections
|
||||
populateDestinations(); //should also be run on browser resize, btw
|
||||
|
||||
// setup scroll listener
|
||||
$(document).scroll(function(){
|
||||
if (disableScrollFn) { return; }
|
||||
var page_height = $(window).height();
|
||||
var pos = $(this).scrollTop();
|
||||
for (i in sections) {
|
||||
if ((pos + settings.scrollToOffset >= sections[i]) && sections[i] < pos + page_height){
|
||||
activateNav(i);
|
||||
}
|
||||
}
|
||||
});
|
||||
const easings = {
|
||||
linear(t) {
|
||||
return t;
|
||||
},
|
||||
easeInQuad(t) {
|
||||
return t * t;
|
||||
},
|
||||
easeOutQuad(t) {
|
||||
return t * (2 - t);
|
||||
},
|
||||
easeInOutQuad(t) {
|
||||
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
||||
},
|
||||
easeInCubic(t) {
|
||||
return t * t * t;
|
||||
},
|
||||
easeOutCubic(t) {
|
||||
return (--t) * t * t + 1;
|
||||
},
|
||||
easeInOutCubic(t) {
|
||||
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
||||
},
|
||||
easeInQuart(t) {
|
||||
return t * t * t * t;
|
||||
},
|
||||
easeOutQuart(t) {
|
||||
return 1 - (--t) * t * t * t;
|
||||
},
|
||||
easeInOutQuart(t) {
|
||||
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
|
||||
},
|
||||
easeInQuint(t) {
|
||||
return t * t * t * t * t;
|
||||
},
|
||||
easeOutQuint(t) {
|
||||
return 1 + (--t) * t * t * t * t;
|
||||
},
|
||||
easeInOutQuint(t) {
|
||||
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
|
||||
}
|
||||
};
|
||||
|
||||
function populateDestinations() {
|
||||
navItems.each(function(){
|
||||
var scrollID = $(this).attr('href').substring(1);
|
||||
navs[scrollID] = (settings.activateParentNode)? this.parentNode : this;
|
||||
sections[scrollID] = $(document.getElementById(scrollID)).offset().top;
|
||||
});
|
||||
const start = window.pageYOffset;
|
||||
const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
|
||||
|
||||
const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
|
||||
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
|
||||
const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop;
|
||||
const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset);
|
||||
|
||||
if ('requestAnimationFrame' in window === false) {
|
||||
window.scroll(0, destinationOffsetToScroll);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
function activateNav(navID) {
|
||||
for (nav in navs) { $(navs[nav]).removeClass('active'); }
|
||||
$(navs[navID]).addClass('active');
|
||||
}
|
||||
})( jQuery );
|
||||
function scroll() {
|
||||
const now = 'now' in window.performance ? performance.now() : new Date().getTime();
|
||||
const time = Math.min(1, ((now - startTime) / duration));
|
||||
const timeFunction = easings[easing](time);
|
||||
window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));
|
||||
|
||||
|
||||
// lazy load images
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const imageObserver = new IntersectionObserver((entries, imgObserver) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const lazyImage = entry.target
|
||||
lazyImage.src = lazyImage.dataset.src
|
||||
}
|
||||
})
|
||||
});
|
||||
const arr = document.querySelectorAll('img.lzy_img')
|
||||
arr.forEach((v) => {
|
||||
imageObserver.observe(v);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function (){
|
||||
// call on all links that start an anchor/hash
|
||||
$('nav li a[href^="#"]').navScroller();
|
||||
|
||||
//section divider icon click gently scrolls to reveal the section
|
||||
$(".sectiondivider").on('click', function(event) {
|
||||
$('html,body').animate({scrollTop: $(event.target.parentNode).offset().top - 50}, 400, "linear");
|
||||
});
|
||||
|
||||
//links going to other sections nicely scroll
|
||||
$(".container a").each(function(){
|
||||
if ($(this).attr("href").charAt(0) == '#'){
|
||||
$(this).on('click', function(event) {
|
||||
event.preventDefault();
|
||||
var target = $(event.target).closest("a");
|
||||
var targetHight = $(target.attr("href")).offset().top
|
||||
$('html,body').animate({scrollTop: targetHight - 170}, 800, "easeInOutExpo", function() {
|
||||
window.location.hash = $(this).attr("href").split('#')[1];
|
||||
});
|
||||
});
|
||||
if (window.pageYOffset === destinationOffsetToScroll) {
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// extremely basic search
|
||||
|
||||
$('#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);
|
||||
};
|
||||
requestAnimationFrame(scroll);
|
||||
}
|
||||
|
||||
function searchGlyphs() {
|
||||
var input = $('#glyphSearch');
|
||||
var filter = input.val().toUpperCase();
|
||||
var container = $('#glyphCheatSheet');
|
||||
var i = 0;
|
||||
var elements = container.find('.column');
|
||||
var length = elements.length;
|
||||
var elementClassName, elementCodePoint;
|
||||
scroll();
|
||||
}
|
||||
|
||||
for (; i < length; i++) {
|
||||
elementClassName = $(elements[i]).find('div.class-name');
|
||||
elementCodePoint = $(elements[i]).find('div.codepoint');
|
||||
if (elementClassName && elementCodePoint) {
|
||||
if (elementClassName.text().toUpperCase().indexOf(filter) > -1
|
||||
|| elementCodePoint.text().toUpperCase().indexOf(filter) > -1
|
||||
) {
|
||||
elementClassName.parent().show();
|
||||
} else {
|
||||
elementClassName.parent().hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// extremely basic filtering on load:
|
||||
function getParameterByName(name, url) {
|
||||
if (!url) url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, "\\$&");
|
||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
const set = getParameterByName('set');
|
||||
const onCheatSheet = window.location.href.indexOf('/cheat-sheet') !== -1;
|
||||
|
||||
if (set) {
|
||||
if (onCheatSheet) {
|
||||
$('#glyphSearch').val(set);
|
||||
gtag('event', 'search-via-url', {
|
||||
'event_category': 'glyph-search',
|
||||
'event_label': 'Cheat Sheet : ' + set,
|
||||
'value': set
|
||||
});
|
||||
searchGlyphs();
|
||||
}
|
||||
else {
|
||||
gtag('event', 'search-via-redirect', {
|
||||
'event_category': 'glyph-search',
|
||||
'event_label': 'Cheat Sheet : ' + set,
|
||||
'value': set
|
||||
});
|
||||
// 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("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') {
|
||||
textToCopy = window.getComputedStyle(
|
||||
document.querySelector(`.${event.target.parentNode.parentNode.querySelector('.class-name').innerText}`), ':before'
|
||||
).getPropertyValue('content').replace(/"/g,'');
|
||||
}
|
||||
gtag('event', event.target.className, {
|
||||
'event_category': 'clipboard-copy',
|
||||
'event_label': 'Copy To Clipboard : ' + textToCopy,
|
||||
'value': textToCopy
|
||||
});
|
||||
copyToClipboard(textToCopy);
|
||||
}
|
||||
// extremely basic search
|
||||
elementGlyphSearch && elementGlyphSearch.addEventListener(
|
||||
'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 filter = elementGlyphSearch.value.toLowerCase();
|
||||
var i = 0;
|
||||
var elements = elementGlyphCheatSheet.querySelectorAll('.column');
|
||||
var length = elements.length;
|
||||
var elementClassName, elementCodePoint;
|
||||
|
||||
for (; i < length; i++) {
|
||||
elementClassName = elements[i].querySelector('div.class-name');
|
||||
elementCodePoint = elements[i].querySelector('div.codepoint');
|
||||
if (elementClassName && elementCodePoint) {
|
||||
if (
|
||||
elementClassName
|
||||
.textContent
|
||||
.indexOf(filter) > -1 ||
|
||||
elementCodePoint
|
||||
.textContent
|
||||
.indexOf(filter) > -1
|
||||
) {
|
||||
elementClassName.parentNode.classList.add('is-visible');
|
||||
} else {
|
||||
elementClassName.parentNode.classList.remove('is-visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// extremely basic filtering on load:
|
||||
function getParameterByName(name, url) {
|
||||
if (!url) {
|
||||
url = window.location.href;
|
||||
}
|
||||
name = name.replace(/[\[\]]/g, '\\$&');
|
||||
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||||
}
|
||||
|
||||
const set = getParameterByName('set');
|
||||
const onCheatSheet = window.location.href.indexOf('/cheat-sheet') !== -1;
|
||||
|
||||
if (set) {
|
||||
if (onCheatSheet) {
|
||||
elementGlyphSearch.value = set;
|
||||
gtag('event', 'search-via-url', {
|
||||
event_category: 'glyph-search',
|
||||
event_label: 'Cheat Sheet : ' + set,
|
||||
value: set
|
||||
});
|
||||
searchGlyphs();
|
||||
} else {
|
||||
gtag('event', 'search-via-redirect', {
|
||||
event_category: 'glyph-search',
|
||||
event_label: 'Cheat Sheet : ' + set,
|
||||
value: set
|
||||
});
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
elementGlyphCheatSheet && elementGlyphCheatSheet.addEventListener(
|
||||
'mouseenter',
|
||||
function (e) {
|
||||
if (e.target.classList.contains('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
|
||||
);
|
||||
|
||||
elementGlyphCheatSheet && elementGlyphCheatSheet.addEventListener(
|
||||
'mouseleave',
|
||||
function (e) {
|
||||
if (e.target.classList.contains('column')) {
|
||||
console.log('left column');
|
||||
e.target.querySelector('.glyph-popout-copy-clipboard').remove();
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
elementGlyphCheatSheet && elementGlyphCheatSheet.addEventListener('click', function (event) {
|
||||
let textToCopy = '';
|
||||
let target = event.target;
|
||||
let parent = target.parentNode;
|
||||
if (parent.className === 'glyph-popout-copy-clipboard') {
|
||||
if (target.className === 'copy-class') {
|
||||
textToCopy = parent.parentNode.querySelector('.class-name').innerText;
|
||||
} else if (target.className === 'copy-hex') {
|
||||
textToCopy = parent.parentNode.querySelector('.codepoint').innerText;
|
||||
} else if (target.className === 'copy-glyph') {
|
||||
textToCopy = window
|
||||
.getComputedStyle(document.querySelector(`.${parent.parentNode.querySelector('.class-name').innerText}`), ':before')
|
||||
.getPropertyValue('content')
|
||||
.replace(/"/g, '');
|
||||
}
|
||||
gtag('event', event.target.className, {
|
||||
event_category: 'clipboard-copy',
|
||||
event_label: 'Copy To Clipboard : ' + textToCopy,
|
||||
value: textToCopy
|
||||
});
|
||||
copyToClipboard(textToCopy);
|
||||
}
|
||||
});
|
||||
|
||||
// lazy load images
|
||||
(function lazyLoadImages() {
|
||||
const imageObserver = new IntersectionObserver((entries, imgObserver) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const lazyImage = entry.target;
|
||||
lazyImage.src = lazyImage.dataset.src;
|
||||
}
|
||||
});
|
||||
});
|
||||
const arr = document.querySelectorAll('img.lzy_img');
|
||||
arr.forEach(v => {
|
||||
imageObserver.observe(v);
|
||||
});
|
||||
})();
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue