Как использовать spin.js из клиента (Javascript, Node) - PullRequest
0 голосов
/ 14 мая 2018

Я пытаюсь использовать spin.js (https://spin.js.org/#!) с клиента, но у меня есть некоторые проблемы.
Делая

npm install spin.js

тогда

const Spinner = require('spin.js');

не работает, так как вам нужно просмотреть модуль для использования модуля с клиента.

Я также пытался скопировать и пропустить spin.js (https://spin.js.org/spin.js) и сослаться на него из html, но он дал мне ошибку в spin.js на

export { Spinner };

а

Uncaught SyntaxError: Unexpected token export

Что необходимо для использования spin.js с клиента?

1 Ответ

0 голосов
/ 14 мая 2018

Хорошо, так что я понял это.

Что вам нужно сделать, это:

Скопируйте файл spin.js в вашу локальную файловую систему (назовите его spin.js) и обратитесь к локальному spin.js в конце тега body в html-файле.

...
<script type="text/javascript" src="js/spin.js"></script>
<script type="text/javascript" src="js/scriptWithSpinner.js"></script>
</body>

Закомментируйте следующую строку в spin.js.

export { Spinner };

Скопируйте CSS из https://spin.js.org/spin.css и сохраните его в локальной файловой системе. Обратитесь к CSS из заголовка html-файла.

<head>
    <meta charset="utf-8">
    ...

    <link rel="stylesheet" type="text/css" href="mystyles.css" />
    <link rel="stylesheet" type="text/css" href="spin.css" />
    ...
</head>

Если вы используете экспресс, вам может понадобиться открыть каталог с помощью js и CSS в коде вашего сервера, чтобы html-файл мог его прочитать.

Теперь вы можете напрямую использовать глобально определенный объект Spinner из scriptWithSpinner.js, без импорта или необходимости.

scriptWithSpinner.js

var opts = {
  lines: 13, // The number of lines to draw
  length: 38, // The length of each line
  width: 17, // The line thickness
  radius: 45, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#ffffff', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: '0 0 1px transparent', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var target = document.getElementsByClassName('uploader')[0];
var spinner = new Spinner(opts).spin(target);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...