Update

Author: vsn4ik

.github/workflows/test.yml

@@ -9,18 +9,15 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: 12
-
-      - run: node --version
-      - run: npm --version
+          node-version: 'lts/hydrogen'
 
       - name: Install npm dependencies
-        run: npm install
+        run: npm ci
 
       - name: Run tests
         run: npm run test

.npmrc

@@ -1,3 +1,2 @@
-package-lock=false
-optional=false
 ignore-prepublish=true
+lockfile-version=3

README.md

@@ -1,8 +1,7 @@
 # [Input Spinner](https://vsn4ik.github.io/input-spinner/)
 
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![Build Status](https://github.com/vsn4ik/input-spinner/workflows/Test/badge.svg)](https://github.com/vsn4ik/input-spinner/actions?workflow=Test)
-[![devDependency Status](https://david-dm.org/vsn4ik/input-spinner/dev-status.svg)](https://david-dm.org/vsn4ik/input-spinner?type=dev)
+[![Build Status](https://github.com/vsn4ik/input-spinner/actions/workflows/test.yml/badge.svg)](https://github.com/vsn4ik/input-spinner/actions/workflows/test.yml)
 
 
 A Number-Spinner, Support keyboard operations and continuous changing.

docs/assets/css/docs.css

@@ -1,3 +1,18 @@
 .gap-2 {
   gap: 0.5rem;
 }
+
+@property --stargazers {
+  syntax: "<integer>";
+  initial-value: 0;
+  inherits: false;
+}
+
+.stargazers-count {
+  transition: --stargazers 1s;
+  counter-reset: stargazers var(--stargazers);
+}
+
+.stargazers-count::after {
+  content: counter(stargazers);
+}

docs/assets/css/old.css

@@ -26,12 +26,10 @@ time, mark, audio, video {
 /* Base text styles */
 
 body {
-  padding: 10px 50px 0 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #232323;
   background-color: #FBFAF7;
-  margin: 0;
   line-height: 1.8em;
   -webkit-font-smoothing: antialiased;
 }
@@ -166,7 +164,9 @@ td {
 
 /* Wrapper */
 .wrapper {
-  width: 960px;
+  display: flex;
+  align-items: baseline;
+  /* width: 960px; */
 }
 
 
@@ -175,9 +175,9 @@ td {
 header {
   background-color: #171717;
   color: #FDFDFB;
-  width: 270px;
-  float: left;
-  position: fixed;
+  width: 320px;
+  position: sticky;
+  top: 30px;
   border: 1px solid #000;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -236,39 +236,19 @@ header li:hover {
 
 section {
   width: 650px;
-  float: right;
   padding-bottom: 50px;
 }
 
-
-/* Footer */
-
-footer {
-  width: 170px;
-  float: left;
-  position: fixed;
-  bottom: 10px;
-  padding-left: 50px;
-}
-
 @media print, screen and (max-width: 960px) {
   div.wrapper {
-    width: auto;
-    margin: 0;
+    flex-direction: column;
   }
 
-  header, section, footer {
-    float: none;
+  header, section {
     position: static;
     width: auto;
   }
 
-  footer {
-    border-top: 1px solid #ccc;
-    margin: 0 84px 0 50px;
-    padding: 0;
-  }
-
   section {
     padding: 20px 84px 20px 50px;
     margin: 0 0 20px;
@@ -300,10 +280,6 @@ footer {
     margin: 0 0 30px;
   }
 
-  footer {
-    margin: 0 0 0 30px;
-  }
-
   header ul, header p.view {
     position: static;
   }
@@ -313,14 +289,6 @@ footer {
   header ul li.download {
     display: none;
   }
-
-  footer {
-    margin: 0 0 0 20px;
-  }
-
-  footer a {
-    display: block;
-  }
 }
 
 @media print {

docs/assets/js/docs.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var exec = function() {
+  fetch('https://api.github.com/repos/vsn4ik/input-spinner')
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(response) {
+      // NOTE: XSS check
+      if (typeof response.stargazers_count !== 'number') {
+        return;
+      }
+
+      document.querySelector('.js-stargazers-count').style.setProperty('--stargazers', response.stargazers_count);
+    });
+
+    $('#customize-spinner').spinner('changed', function(event, newVal, oldVal) {
+      $('#old-val').text(oldVal);
+      $('#new-val').text(newVal);
+    });
+
+    $('[data-trigger="spinner"]').spinner('changing', function(event, newVal, oldVal) {
+      $(event.currentTarget).closest('.well').find('small').text('Old = ' + oldVal + ', New = ' + newVal);
+    });
+
+    $('#step-spinner').spinner({
+      step: function(dir) {
+        if ((this.oldValue === 1 && dir === 'down') || (this.oldValue === -1 && dir === 'up')) {
+            return 2;
+        }
+        return 1;
+      }
+    });
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', exec);
+} else {
+  exec();
+}

docs/example.html

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Input Spinner - Example</title>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="dist/input-spinner.css">
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.js"></script>
     <script src="dist/input-spinner.js"></script>
     <script>
       document.addEventListener('DOMContentLoaded', function() {

docs/index.html

@@ -5,46 +5,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Input Spinner</title>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="dist/input-spinner.css">
     <link rel="stylesheet" href="assets/css/old.css">
     <link rel="stylesheet" href="assets/css/docs.css">
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js"></script>
-    <script src="dist/input-spinner.js"></script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        $('#customize-spinner').spinner('changed', function(event, newVal, oldVal) {
-          $('#old-val').text(oldVal);
-          $('#new-val').text(newVal);
-        });
-
-        $('[data-trigger="spinner"]').spinner('changing', function(event, newVal, oldVal) {
-          $(event.currentTarget).closest('.well').find('small').text('Old = ' + oldVal + ', New = ' + newVal);
-        });
-
-        $('#step-spinner').spinner({
-          step: function(dir) {
-            if ((this.oldValue === 1 && dir === 'down') || (this.oldValue === -1 && dir === 'up')) {
-              return 2;
-            }
-            return 1;
-          }
-        });
-      });
-    </script>
+    <script src="https://code.jquery.com/jquery-3.7.1.slim.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js" defer></script>
+    <script src="dist/input-spinner.js" defer></script>
+    <script src="assets/js/docs.js" defer></script>
   </head>
   <body>
     <div class="wrapper">
       <header>
         <h1 class="header">Input Spinner</h1>
         <p class="header">A Number-Spinner, Support keyboard operations and continuous changing.</p>
 
-        <div class="d-flex flex-wrap gap-2">
-          <a class="btn btn-primary" href="https://github.com/vsn4ik/input-spinner/archive/master.zip"><i class="fas fa-download fa-lg"></i>&nbsp;Download</a>
-          <a class="btn btn-secondary" href="https://github.com/vsn4ik/input-spinner/"><i class="fab fa-github fa-lg"></i>&nbsp;View On GitHub</a>
+        <div class="btn-toolbar gap-2">
+          <a class="btn btn-primary d-flex align-items-center" href="https://github.com/vsn4ik/input-spinner/archive/master.zip" download>
+            <span class="fas fa-download mr-1"></span>
+            <span>Download</span>
+          </a>
+      
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <a class="btn btn-secondary d-flex align-items-center" href="https://github.com/vsn4ik/input-spinner/">
+                <span class="fab fa-github mr-1"></span>
+                View on GitHub
+              </a>
+            </div>
+      
+            <div class="input-group-append">
+              <div class="js-stargazers-count stargazers-count input-group-text bg-white d-flex align-items-center">
+                <span class="fas fa-star mr-1"></span>
+              </div>
+            </div>
+          </div>
         </div>
       </header>