mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2025-01-25 03:32:02 +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
@ -1,6 +1,7 @@
|
|||||||
{% if site.google_analytics_key %}
|
{% if jekyll.environment == "production" %}
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_key }}"></script>
|
{% if site.google_analytics_key %}
|
||||||
<script type="text/javascript">
|
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_key }}"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
var _gaq = _gaq || [];
|
var _gaq = _gaq || [];
|
||||||
_gaq.push(['_setAccount', '{{ site.google_analytics_key }}']);
|
_gaq.push(['_setAccount', '{{ site.google_analytics_key }}']);
|
||||||
@ -17,5 +18,10 @@
|
|||||||
function gtag(){dataLayer.push(arguments);}
|
function gtag(){dataLayer.push(arguments);}
|
||||||
gtag('js', new Date());
|
gtag('js', new Date());
|
||||||
gtag('config', '{{ site.google_analytics_key }}');
|
gtag('config', '{{ site.google_analytics_key }}');
|
||||||
|
</script>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<script>
|
||||||
|
function gtag() { console.log('noop'); }
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -45,7 +45,7 @@ p {
|
|||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main .nerd-font-cheat-sheet .column {
|
#glyphCheatSheet .column {
|
||||||
width: 146px;
|
width: 146px;
|
||||||
height: 146px;
|
height: 146px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -61,6 +61,10 @@ p {
|
|||||||
display: none; /* don't show any by default */
|
display: none; /* don't show any by default */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#glyphCheatSheet .column.is-visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
#main .nerd-font-cheat-sheet .column:hover {
|
#main .nerd-font-cheat-sheet .column:hover {
|
||||||
background: rgba(0,0,0,.25);
|
background: rgba(0,0,0,.25);
|
||||||
border: 2px solid #0fbfcf;
|
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)
|
super tiny size (phones)
|
||||||
point at which nav wraps
|
point at which nav wraps
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
<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>
|
<script>
|
||||||
((window.gitter = {}).chat = {}).options = {
|
((window.gitter = {}).chat = {}).options = {
|
||||||
room: 'ryanoasis/nerd-fonts'
|
room: 'ryanoasis/nerd-fonts'
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
{% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
|
{% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
|
||||||
<div id="{{id}}" class="section p-{{id}}">
|
<div id="{{id}}" class="section p-{{id}}">
|
||||||
|
{% if id == 'home' %}
|
||||||
|
<div class="icon-backdrop rainbow">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
{% if page.icon %}
|
{% if page.icon %}
|
||||||
<div class="subtlecircle sectiondivider imaged">
|
<div class="subtlecircle sectiondivider imaged">
|
||||||
<img src="{{page.icon}}" alt="section icon" />
|
<img src="{{page.icon}}" alt="section icon" />
|
||||||
|
|||||||
@ -6,8 +6,10 @@ color: black
|
|||||||
style: center
|
style: center
|
||||||
---
|
---
|
||||||
|
|
||||||
<h1 align="center">
|
<h1>
|
||||||
<a href="https://github.com/ryanoasis/nerd-fonts"><img src="assets/img/nerd-fonts-logo.svg" alt="Nerd Fonts - Iconic font aggregator" /></a>
|
<a href="https://github.com/ryanoasis/nerd-fonts">
|
||||||
|
<img src="assets/img/nerd-fonts-logo.svg" alt="Nerd Fonts - Iconic font aggregator" />
|
||||||
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
### Iconic font aggregator, collection, and patcher
|
### Iconic font aggregator, collection, and patcher
|
||||||
@ -34,12 +36,12 @@ style: center
|
|||||||
</div>
|
</div>
|
||||||
</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.
|
**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">
|
<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>
|
<a href="https://github.com/ryanoasis/nerd-fonts">
|
||||||
</h1>
|
<img src="assets/img/sankey-glyphs-combined-diagram.png" alt="Nerd Fonts Sankey Diagram" />
|
||||||
<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>
|
</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">
|
<span id="forkongithub">
|
||||||
<a href="{{ site.source_link }}" class="bg-blue">
|
<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>
|
<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)
|
- [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)
|
- [UbuntuMono](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.0.0/UbuntuMono.zip)
|
||||||
</div>
|
</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>
|
||||||
340
site.js
340
site.js
@ -1,127 +1,112 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
$.extend($.easing,
|
const elementGlyphSearch = document.getElementById('glyphSearch');
|
||||||
{
|
const elementGlyphCheatSheet = document.getElementById('glyphCheatSheet');
|
||||||
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
(function( $ ) {
|
// nice scrolling
|
||||||
|
|
||||||
var settings;
|
document.getElementsByTagName('nav')[0].addEventListener('click', function (e) {
|
||||||
var disableScrollFn = false;
|
if (e.target.matches('a') && e.target.hash) {
|
||||||
var navItems;
|
const section = document.getElementById(e.target.hash.slice(1));
|
||||||
var navs = {}, sections = {};
|
|
||||||
|
|
||||||
$.fn.navScroller = function(options) {
|
if (section) {
|
||||||
settings = $.extend({
|
e.preventDefault();
|
||||||
scrollToOffset: 170,
|
scrollIt(section);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function scrollIt(destination, duration = 200, easing = 'linear', callback) {
|
||||||
|
|
||||||
|
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() {
|
const start = window.pageYOffset;
|
||||||
navItems.each(function(){
|
const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
|
||||||
var scrollID = $(this).attr('href').substring(1);
|
|
||||||
navs[scrollID] = (settings.activateParentNode)? this.parentNode : this;
|
const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
|
||||||
sections[scrollID] = $(document.getElementById(scrollID)).offset().top;
|
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) {
|
function scroll() {
|
||||||
for (nav in navs) { $(navs[nav]).removeClass('active'); }
|
const now = 'now' in window.performance ? performance.now() : new Date().getTime();
|
||||||
$(navs[navID]).addClass('active');
|
const time = Math.min(1, ((now - startTime) / duration));
|
||||||
|
const timeFunction = easings[easing](time);
|
||||||
|
window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));
|
||||||
|
|
||||||
|
if (window.pageYOffset === destinationOffsetToScroll) {
|
||||||
|
if (callback) {
|
||||||
|
callback();
|
||||||
}
|
}
|
||||||
})( jQuery );
|
return;
|
||||||
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
|
requestAnimationFrame(scroll);
|
||||||
$(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];
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
|
scroll();
|
||||||
|
}
|
||||||
|
|
||||||
// extremely basic search
|
// extremely basic search
|
||||||
|
elementGlyphSearch && elementGlyphSearch.addEventListener(
|
||||||
$('#glyphSearch').on('keyup', debounce(function(e) {
|
'keyup',
|
||||||
|
debounce(function (e) {
|
||||||
gtag('event', 'search-via-input', {
|
gtag('event', 'search-via-input', {
|
||||||
'event_category': 'glyph-search',
|
event_category: 'glyph-search',
|
||||||
'event_label': 'Cheat Sheet : ' + (e.target && e.target.value),
|
event_label: 'Cheat Sheet : ' + (e.target && e.target.value),
|
||||||
'value': e.target && e.target.value
|
value: e.target && e.target.value
|
||||||
});
|
});
|
||||||
searchGlyphs();
|
searchGlyphs();
|
||||||
}, 500));
|
}, 500)
|
||||||
|
);
|
||||||
|
|
||||||
// Credit David Walsh (https://davidwalsh.name/javascript-debounce-function)
|
// Credit David Walsh (https://davidwalsh.name/javascript-debounce-function)
|
||||||
// Returns a function, that, as long as it continues to be invoked, will not
|
// Returns a function, that, as long as it continues to be invoked, will not
|
||||||
@ -135,7 +120,7 @@ $(document).ready(function (){
|
|||||||
var context = this;
|
var context = this;
|
||||||
var args = arguments;
|
var args = arguments;
|
||||||
|
|
||||||
var later = function() {
|
var later = function () {
|
||||||
timeout = null;
|
timeout = null;
|
||||||
if (!immediate) func.apply(context, args);
|
if (!immediate) func.apply(context, args);
|
||||||
};
|
};
|
||||||
@ -151,24 +136,27 @@ $(document).ready(function (){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function searchGlyphs() {
|
function searchGlyphs() {
|
||||||
var input = $('#glyphSearch');
|
var filter = elementGlyphSearch.value.toLowerCase();
|
||||||
var filter = input.val().toUpperCase();
|
|
||||||
var container = $('#glyphCheatSheet');
|
|
||||||
var i = 0;
|
var i = 0;
|
||||||
var elements = container.find('.column');
|
var elements = elementGlyphCheatSheet.querySelectorAll('.column');
|
||||||
var length = elements.length;
|
var length = elements.length;
|
||||||
var elementClassName, elementCodePoint;
|
var elementClassName, elementCodePoint;
|
||||||
|
|
||||||
for (; i < length; i++) {
|
for (; i < length; i++) {
|
||||||
elementClassName = $(elements[i]).find('div.class-name');
|
elementClassName = elements[i].querySelector('div.class-name');
|
||||||
elementCodePoint = $(elements[i]).find('div.codepoint');
|
elementCodePoint = elements[i].querySelector('div.codepoint');
|
||||||
if (elementClassName && elementCodePoint) {
|
if (elementClassName && elementCodePoint) {
|
||||||
if (elementClassName.text().toUpperCase().indexOf(filter) > -1
|
if (
|
||||||
|| elementCodePoint.text().toUpperCase().indexOf(filter) > -1
|
elementClassName
|
||||||
|
.textContent
|
||||||
|
.indexOf(filter) > -1 ||
|
||||||
|
elementCodePoint
|
||||||
|
.textContent
|
||||||
|
.indexOf(filter) > -1
|
||||||
) {
|
) {
|
||||||
elementClassName.parent().show();
|
elementClassName.parentNode.classList.add('is-visible');
|
||||||
} else {
|
} else {
|
||||||
elementClassName.parent().hide();
|
elementClassName.parentNode.classList.remove('is-visible');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -176,13 +164,15 @@ $(document).ready(function (){
|
|||||||
|
|
||||||
// extremely basic filtering on load:
|
// extremely basic filtering on load:
|
||||||
function getParameterByName(name, url) {
|
function getParameterByName(name, url) {
|
||||||
if (!url) url = window.location.href;
|
if (!url) {
|
||||||
name = name.replace(/[\[\]]/g, "\\$&");
|
url = window.location.href;
|
||||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
}
|
||||||
|
name = name.replace(/[\[\]]/g, '\\$&');
|
||||||
|
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
||||||
results = regex.exec(url);
|
results = regex.exec(url);
|
||||||
if (!results) return null;
|
if (!results) return null;
|
||||||
if (!results[2]) return '';
|
if (!results[2]) return '';
|
||||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
const set = getParameterByName('set');
|
const set = getParameterByName('set');
|
||||||
@ -190,22 +180,21 @@ $(document).ready(function (){
|
|||||||
|
|
||||||
if (set) {
|
if (set) {
|
||||||
if (onCheatSheet) {
|
if (onCheatSheet) {
|
||||||
$('#glyphSearch').val(set);
|
elementGlyphSearch.value = set;
|
||||||
gtag('event', 'search-via-url', {
|
gtag('event', 'search-via-url', {
|
||||||
'event_category': 'glyph-search',
|
event_category: 'glyph-search',
|
||||||
'event_label': 'Cheat Sheet : ' + set,
|
event_label: 'Cheat Sheet : ' + set,
|
||||||
'value': set
|
value: set
|
||||||
});
|
});
|
||||||
searchGlyphs();
|
searchGlyphs();
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
gtag('event', 'search-via-redirect', {
|
gtag('event', 'search-via-redirect', {
|
||||||
'event_category': 'glyph-search',
|
event_category: 'glyph-search',
|
||||||
'event_label': 'Cheat Sheet : ' + set,
|
event_label: 'Cheat Sheet : ' + set,
|
||||||
'value': set
|
value: set
|
||||||
});
|
});
|
||||||
// redirect to cheat sheet with param
|
// redirect to cheat sheet with param
|
||||||
window.location.href = window.location.origin + "/cheat-sheet?set=" + set;
|
window.location.href = window.location.origin + '/cheat-sheet?set=' + set;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -221,18 +210,17 @@ $(document).ready(function (){
|
|||||||
function copyToClipboard(text) {
|
function copyToClipboard(text) {
|
||||||
if (window.clipboardData && window.clipboardData.setData) {
|
if (window.clipboardData && window.clipboardData.setData) {
|
||||||
// IE specific code path to prevent textarea being shown while dialog is visible.
|
// IE specific code path to prevent textarea being shown while dialog is visible.
|
||||||
return clipboardData.setData("Text", text);
|
return clipboardData.setData('Text', text);
|
||||||
|
} else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
|
||||||
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
|
var textarea = document.createElement('textarea');
|
||||||
var textarea = document.createElement("textarea");
|
|
||||||
textarea.textContent = text;
|
textarea.textContent = text;
|
||||||
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
|
textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.
|
||||||
document.body.appendChild(textarea);
|
document.body.appendChild(textarea);
|
||||||
textarea.select();
|
textarea.select();
|
||||||
try {
|
try {
|
||||||
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
|
return document.execCommand('copy'); // Security exception may be thrown by some browsers.
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
console.warn("Copy to clipboard failed.", ex);
|
console.warn('Copy to clipboard failed.', ex);
|
||||||
return false;
|
return false;
|
||||||
} finally {
|
} finally {
|
||||||
document.body.removeChild(textarea);
|
document.body.removeChild(textarea);
|
||||||
@ -240,10 +228,11 @@ $(document).ready(function (){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('glyphCheatSheet').addEventListener("mouseenter", function(e) {
|
elementGlyphCheatSheet && elementGlyphCheatSheet.addEventListener(
|
||||||
if(e.target.className === "column") {
|
'mouseenter',
|
||||||
console.log("entered column");
|
function (e) {
|
||||||
|
if (e.target.classList.contains('column')) {
|
||||||
|
console.log('entered column');
|
||||||
// add Node
|
// add Node
|
||||||
const newNode = document.createElement('span');
|
const newNode = document.createElement('span');
|
||||||
const copyTextNode = document.createElement('span');
|
const copyTextNode = document.createElement('span');
|
||||||
@ -255,9 +244,9 @@ $(document).ready(function (){
|
|||||||
copyGlyphNode.innerText = 'Icon';
|
copyGlyphNode.innerText = 'Icon';
|
||||||
copyClassNode.innerText = 'Class';
|
copyClassNode.innerText = 'Class';
|
||||||
copyCodePoint.innerText = 'Hex';
|
copyCodePoint.innerText = 'Hex';
|
||||||
copyGlyphNode.title = 'Copy Icon to Clipboard'
|
copyGlyphNode.title = 'Copy Icon to Clipboard';
|
||||||
copyClassNode.title = 'Copy Class Name to Clipboard'
|
copyClassNode.title = 'Copy Class Name to Clipboard';
|
||||||
copyCodePoint.title = 'Copy Hex Code Point to Clipboard'
|
copyCodePoint.title = 'Copy Hex Code Point to Clipboard';
|
||||||
copyGlyphNode.className = 'copy-glyph';
|
copyGlyphNode.className = 'copy-glyph';
|
||||||
copyClassNode.className = 'copy-class';
|
copyClassNode.className = 'copy-class';
|
||||||
copyCodePoint.className = 'copy-hex';
|
copyCodePoint.className = 'copy-hex';
|
||||||
@ -267,36 +256,59 @@ $(document).ready(function (){
|
|||||||
newNode.appendChild(copyCodePoint);
|
newNode.appendChild(copyCodePoint);
|
||||||
e.target.children[0].before(newNode);
|
e.target.children[0].before(newNode);
|
||||||
}
|
}
|
||||||
},true);
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
document.getElementById('glyphCheatSheet').addEventListener("mouseleave", function(e) {
|
elementGlyphCheatSheet && elementGlyphCheatSheet.addEventListener(
|
||||||
if(e.target.className === "column") {
|
'mouseleave',
|
||||||
console.log("left column");
|
function (e) {
|
||||||
e.target.querySelector('.glyph-popout-copy-clipboard').remove()
|
if (e.target.classList.contains('column')) {
|
||||||
|
console.log('left column');
|
||||||
|
e.target.querySelector('.glyph-popout-copy-clipboard').remove();
|
||||||
}
|
}
|
||||||
},true);
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
document.getElementById('glyphCheatSheet').addEventListener('click', function (event) {
|
elementGlyphCheatSheet && elementGlyphCheatSheet.addEventListener('click', function (event) {
|
||||||
let textToCopy = '';
|
let textToCopy = '';
|
||||||
if (event.target.parentNode.className === 'glyph-popout-copy-clipboard') {
|
let target = event.target;
|
||||||
if (event.target.className === 'copy-class') {
|
let parent = target.parentNode;
|
||||||
textToCopy = event.target.parentNode.parentNode.querySelector('.class-name').innerText;
|
if (parent.className === 'glyph-popout-copy-clipboard') {
|
||||||
}
|
if (target.className === 'copy-class') {
|
||||||
else if (event.target.className === 'copy-hex') {
|
textToCopy = parent.parentNode.querySelector('.class-name').innerText;
|
||||||
textToCopy = event.target.parentNode.parentNode.querySelector('.codepoint').innerText;
|
} else if (target.className === 'copy-hex') {
|
||||||
}
|
textToCopy = parent.parentNode.querySelector('.codepoint').innerText;
|
||||||
else if (event.target.className === 'copy-glyph') {
|
} else if (target.className === 'copy-glyph') {
|
||||||
textToCopy = window.getComputedStyle(
|
textToCopy = window
|
||||||
document.querySelector(`.${event.target.parentNode.parentNode.querySelector('.class-name').innerText}`), ':before'
|
.getComputedStyle(document.querySelector(`.${parent.parentNode.querySelector('.class-name').innerText}`), ':before')
|
||||||
).getPropertyValue('content').replace(/"/g,'');
|
.getPropertyValue('content')
|
||||||
|
.replace(/"/g, '');
|
||||||
}
|
}
|
||||||
gtag('event', event.target.className, {
|
gtag('event', event.target.className, {
|
||||||
'event_category': 'clipboard-copy',
|
event_category: 'clipboard-copy',
|
||||||
'event_label': 'Copy To Clipboard : ' + textToCopy,
|
event_label: 'Copy To Clipboard : ' + textToCopy,
|
||||||
'value': textToCopy
|
value: textToCopy
|
||||||
});
|
});
|
||||||
copyToClipboard(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…
x
Reference in New Issue
Block a user