diff options
Diffstat (limited to 'src/list.html')
-rw-r--r-- | src/list.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/src/list.html b/src/list.html new file mode 100644 index 0000000..bc77ac1 --- /dev/null +++ b/src/list.html @@ -0,0 +1,81 @@ +--- +--- +<!doctype html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + + <link rel="stylesheet" href="editor.css"> + <title>Tabler Icons</title> + + <style> + body { + display: none; + } + </style> +</head> +<body> +<div class="container"> + <div class="box"> + + <div class="mb"> + <div class="icons-list"> + {% for icon in site.icons %} + {% assign name = icon.slug %} + <div class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}"> + {% include icon.html name=name %} + </div> + {% endfor %} + </div> + </div> + + <div class="mb"> + <div class="icons-list"> + {% for icon in site.icons %} + {% assign name = icon.slug %} + <div class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}"> + {% include icon.html name=name stroke=1.25 %} + </div> + {% endfor %} + </div> + </div> + </div> +</div> + +<script src="{{ site.baseurl }}/jquery-3.4.1.slim.min.js"></script> +<script> + + $(document).ready(function () { + $('body') + .on('click', '.js-icon', function (e) { + var icon = $(this).attr('data-icon'); + + $('.js-icon-name').html(icon); + localStorage.setItem('icon', icon); + + $('.js-icon-manager svg').replaceWith($(this).find('>svg:eq(0)').clone()); + + e.preventDefault(); + return false; + }) + .on('input', '.js-input-range', function(e){ + $('.js-icon svg').css('stroke-width', $(this).val()); + + e.preventDefault(); + return false; + }); + + + var icon = localStorage.getItem('icon'); + if (icon) { + $('.js-icon[data-icon="' + icon + '"]').eq(0).click(); + } + + document.body.style.display = "block" + }); +</script> +</body> +</html> |