OxCom/constraint-validator – js валидатор форм

import {
    Form,
    NotBlank,
    Email,
    Length
} from 'constraint-validator';

const form = new Form();

form
    .add('email', [
        new NotBlank(),
        new Email(),
    ])
    .add('password', [
        new NotBlank(),
        new Length({min: 6}),
    ]);

const errors = form.validate({
    email: 'email@example.com',
    password: '1234567',
});

// Object with list of invalid properties. Each property contains array of errors
console.log(errors)

https://github.com/OxCom/constraint-validator

fengyuanchen / cropperjs – обрезание изображений на js

import axios from 'axios';
import Compressor from 'compressorjs';

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];

  if (!file) {
    return;
  }

  new Compressor(file, {
    quality: 0.6,
    success(result) {
      const formData = new FormData();

      // The third parameter is required for server
      formData.append('file', result, result.name);

      // Send the compressed image file to server with XMLHttpRequest.
      axios.post('/path/to/upload', formData).then(() => {
        console.log('Upload success');
      });
    },
    error(err) {
      console.log(err.message);
    },
  });
});

https://github.com/fengyuanchen/cropperjs

nickdeny / darkmode-js – автоматически определяет время пользователя и переключает тему

Облегченный и кросс-браузерный скрипт поможет вам автоматически определять время пользователя и переключать тему на темную. Кроме того, он весит всего 2,39 КБ (1.05 КБ в сжатом виде) и написан на чистом Javascript, без каких-либо плагинов и jQuery!

<script src="darkmode.js"></script>
<script>
  var options = {
    light: "light.css",
    dark: "dark.css",
    startAt: "23:00",
    endAt: "06:00",
    checkSystemScheme: true,
    saveOnToggle: true
  };
  var DarkMode = new DarkMode(options);
</script>

https://github.com/nickdeny/darkmode-js

Fluor.js – скрипт позволяет добавлять взаимодействия и эффекты на сайте

Он отлично подходит для прототипов, исследований пользовательского интерфейса и UX, а также для всех веб-сайтов, которые не требуют громоздких механизмов полноценного фреймворка.

Не имеет зависимостей и может быть добавлен на любую страницу с помощью одной строки HTML.

https://github.com/fluorjs/fluor

robinloeffel / cosha – js скрипт создает разноцветные тени для изображений

Простой и легкий (меньше 1кб)

import cosha from 'cosha';

cosha({
  className: 'colorful-shadow',
  blur: '10px',
  brightness: '125%',
  saturation: '110%',
  x: '2px',
  y: '6px'
});

https://github.com/robinloeffel/cosha

quotable-toolbar – скрипт позволяет делиться цитатами с сайта в twitter

JS библиотека, которая позволяет легко добавлять контекстное всплывающее окно на веб-страницу для обмена выбранным текстом и цитатами в Twitter

https://github.com/localjo/quotable-toolbar

bstreeview – плагин для создания дерева категорий на twitter bootstrap 4

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}

$('#tree').bstreeview({ data: getTree() });

var tree = [
  {
    text: "Node 1",
    icon: "fa fa-folder",
    nodes: [
      {
        text: "Sub Node 1",
        icon: "fa fa-folder",
        nodes: [
          {
            id:    "sub-node-1",
            text:  "Sub Child Node 1",
            icon:  "fa fa-folder",
            class: "nav-level-3",
            href:  "https://google.com"
          },
          {
            text: "Sub Child Node 2",
            icon: "fa fa-folder"
          }
        ]
      },
      {
        text: "Sub Node 2",
         icon: "fa fa-folder"
      }
    ]
  },
  {
    text: "Node 2",
    icon: "fa fa-folder"
  }
];

https://github.com/chniter/bstreeview

panolens.js – просмотрщик панорам js на основе Three.js

Panolens.js – это программа для просмотра панорам на основе событий и WebGL. Легкий и гибкий. Он построен поверх Three.JS.

const panorama = new PANOLENS.ImagePanorama( 'asset/equirectangular.jpg' );
const viewer = new PANOLENS.Viewer();
viewer.add( panorama );

https://github.com/pchen66/panolens.js

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. ...
  9. 114
Scroll Up