vevet 1.4.27 → 2.0.1-dev.3

package/package.json

@@ -1,102 +1,108 @@
 {
   "name": "vevet",
-  "version": "1.4.27",
+  "version": "2.0.1-dev.3",
   "description": "VEVET - A JavaScript library",
-  "directories": {
-    "dist:": "./dist"
-  },
-  "main": "dist/js/index.js",
-  "types": "dist/types/types.d.ts",
-  "sideEffects": false,
-  "sass": "dist/scss/index.scss",
-  "scripts": {
-    "dev": "NODE_ENV=development webpack --config ./webpack/webpack.dev.conf.js",
-    "build": "NODE_ENV=production webpack --config ./webpack/webpack.build.conf.js",
-    "start": "webpack-dev-server --open --config ./webpack/webpack.dev.conf.js",
-    "docs": "npm run docs:default && npm run docs:types",
-    "docs:default": "./node_modules/.bin/jsdoc -c jsdoc/jsdoc.json -R README.md",
-    "docs:types": "./node_modules/.bin/jsdoc -c jsdoc/jsdoc.types.json && node jsdoc/exportVevetJsDoc.js",
-    "release": "npm publish",
-    "prepare": "npm run prepare:cjs && npm run build && npm run docs",
-    "prepare:cjs": "NODE_ENV=cjs babel ./src/js --out-dir ./dist/js/"
-  },
   "browserslist": [
-    "> 1%",
-    "last 3 version"
+    "since 2015"
   ],
+  "scripts": {
+    "pages-build": "node ./examples-src/compiler/index.js && webpack --config ./examples-src/webpack/webpack.prod.js",
+    "pages-dev": "npm-run-all --parallel pages-dev:pug pages-dev:webpack",
+    "pages-dev:pug": "nodemon --watch ./examples-src/pages --watch ./examples-src/compiler --ext pug,json,ts,js,html,css ./examples-src/compiler/index.js",
+    "pages-dev:webpack": "webpack serve --config ./examples-src/webpack/webpack.dev.js",
+    "watch-tsc": "nodemon --watch ./src/ts --ext ts,js --exec \"npm run prepare:es\"",
+    "prepare:all": "npm run prepare:es && npm run prepare:cjs && npm run prepare:cdn",
+    "prepare:es": "tsc ./src/ts/index.ts --outDir ./build/es --target es6 --module es6 --moduleResolution node --esModuleInterop true --allowSyntheticDefaultImports true --declaration true --declarationDir ./build/types --declarationMap true",
+    "prepare:cjs": "tsc ./src/ts/index.ts --outDir ./build/cjs --target es5 --module commonjs --moduleResolution node --esModuleInterop true --allowSyntheticDefaultImports true",
+    "prepare:cdn": "webpack --config ./config/webpack.cdn.js",
+    "lint:js": "eslint . --ext .ts,.js",
+    "prepare": "npm run prepare:all",
+    "release": "npm version prerelease --preid=dev && npm publish"
+  },
+  "main": "./build/cjs/index.js",
+  "types": "./build/types/index.d.ts",
+  "module": "./build/es/index.js",
+  "jsdelivr": "./build/cdn/index.js",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "git+https://github.com/antonbobrov/vevet.git"
   },
+  "keywords": [
+    "vevet",
+    "callbacks",
+    "viewport",
+    "onresize",
+    "onload",
+    "responsive",
+    "properties",
+    "settings",
+    "animationframe",
+    "fps",
+    "requestAnimationFrame",
+    "canvas",
+    "ctx2d",
+    "image prerender",
+    "cursor",
+    "drag",
+    "swipe",
+    "preloader",
+    "resources",
+    "smooth scroll",
+    "scrolling",
+    "scrollbar",
+    "scroll keyboard",
+    "split text",
+    "text animation",
+    "timeline"
+  ],
   "author": "Anton Bobrov <anton.bobrov@hotmail.com>",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/antonbobrov/vevet/issues"
-  },
-  "homepage": "https://github.com/antonbobrov/vevet#readme",
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@otris/jsdoc-tsd": "^1.0.4",
-    "@pixi/jsdoc-template": "^2.4.2",
-    "autoprefixer": "^9.6.0",
-    "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
-    "babel-preset-es2015": "^6.24.1",
-    "braintree-jsdoc-template": "^3.3.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^3.0.0",
-    "css-mqpacker": "^7.0.0",
-    "cssnano": "^4.1.10",
-    "escape-regex-string": "^1.0.6",
-    "escape-string-regexp": "^2.0.0",
-    "eslint": "^6.0.1",
-    "eslint-config-fbjs": "^3.1.0",
-    "eslint-config-google": "^0.13.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-jsdoc": "^10.0.0",
-    "file-loader": "^4.0.0",
-    "fs": "0.0.1-security",
-    "html-webpack-plugin": "^3.2.0",
-    "imagemin-webpack-plugin": "^2.4.2",
-    "jsdoc": "^3.6.2",
-    "mini-css-extract-plugin": "^0.7.0",
-    "node-sass": "^4.12.0",
-    "node-static": "^0.7.11",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@types/lodash.mergewith": "^4.6.6",
+    "@types/normalize-wheel": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/parser": "^4.28.1",
+    "babel-loader": "^8.2.2",
+    "bootstrap": "^5.0.2",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^6.2.0",
+    "cssnano": "^5.0.7",
+    "eslint": "^7.29.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsdoc": "^35.4.1",
+    "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.1.0",
+    "node-sass": "^6.0.1",
+    "nodemon": "^2.0.9",
     "normalize-scss": "^7.0.1",
+    "npm-run-all": "^4.1.5",
     "path": "^0.12.7",
-    "postcss-loader": "^3.0.0",
-    "pug": "^2.0.4",
-    "pug-loader": "^2.4.0",
-    "sass-lint": "^1.13.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "ts-loader": "^6.0.4",
-    "ts-node": "^8.3.0",
-    "tsd-jsdoc": "^2.3.0",
-    "typescript": "^3.5.2",
-    "uglifyjs-webpack-plugin": "^1.1.6",
-    "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.5",
-    "webpack-dev-server": "^3.7.2",
-    "webpack-merge": "^4.2.1"
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^6.7.0",
+    "pug": "^3.0.2",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "terser-webpack-plugin": "^5.1.4",
+    "ts-loader": "^9.2.3",
+    "typescript": "^4.3.5",
+    "webpack": "^5.41.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "dom-create-element": "^1.0.2",
-    "form-serialize": "^0.7.2",
-    "form-to-object": "^6.0.0",
-    "isarray": "^2.0.5",
+    "detect-browser": "^5.2.0",
+    "easing-progress": "0.0.4",
+    "get-image-pos": "0.0.9",
     "ismobilejs": "^1.1.1",
-    "lerp": "^1.0.3",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.merge": "^4.6.1",
     "lodash.mergewith": "^4.6.2",
-    "node-background-size": "^1.0.4",
-    "polyfill-array-includes": "^2.0.0",
-    "select-el": "^1.0.3",
-    "string.prototype.includes": "^1.0.0"
+    "normalize-wheel": "^1.0.1",
+    "p-cancelable": "^3.0.0",
+    "vevet-dom": "0.0.15"
   }
 }

package/src/cdn/index.js

@@ -0,0 +1,3 @@
+import * as Vevet from '../ts/index';
+
+window.Vevet = Vevet;

package/src/sass/base.scss

@@ -0,0 +1,3 @@
+$prefix: 'v-' !default;
+
+@import './mixins/index';

package/src/sass/components/cursor/_custom-cursor.scss

@@ -0,0 +1,63 @@
+@import '../../mixins/index';
+
+$preloader-bg-color: #000 !default;
+$custom-cursor-inner-size: 50px;
+$custom-cursor-alpha-duration: 0.25s;
+$custom-cursor-scale-duration: 0.5s;
+$custom-cursor-alpha: 0.5;
+$custom-cursor-color: #000;
+
+
+
+.#{$prefix}custom-cursor-container {
+
+    &.hide-defaut-cursor {
+        cursor: none;
+        * {
+            cursor: none;
+        }
+    }
+
+}
+
+.#{$prefix}custom-cursor {
+
+    &.in-window {
+        position: fixed;
+    }
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    z-index: 999;
+    pointer-events: none;
+
+    @include transition(opacity $custom-cursor-alpha-duration);
+    opacity: 0;
+    &.in-action {
+        opacity: 1;
+    }
+    &.disabled {
+        opacity: 0;
+    }
+    
+    &__inner {
+        width: $custom-cursor-inner-size;
+        height: $custom-cursor-inner-size;
+        margin-top: $custom-cursor-inner-size / -2;
+        margin-left: $custom-cursor-inner-size / -2;
+        border-radius: 50%;
+
+        background-color: $custom-cursor-color;
+        opacity: $custom-cursor-alpha;
+
+        @include transition(transform $custom-cursor-scale-duration);
+        &.click {
+            transform: scale(0.75);
+        }
+
+    }
+
+}

package/src/sass/components/index.scss

@@ -0,0 +1,6 @@
+@import './loading/preloader';
+
+@import './scroll/smooth-scroll';
+@import './scroll/scrollbar';
+
+@import './cursor/custom-cursor';

package/src/sass/components/loading/_preloader.scss

@@ -0,0 +1,15 @@
+@import '../../mixins/index';
+
+$preloader-bg-color: #000 !default;
+
+
+
+.#{$prefix}preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background-color: $preloader-bg-color;
+}

package/src/sass/components/scroll/_scrollbar.scss

@@ -0,0 +1,73 @@
+@import '../../mixins/index';
+
+$scrollbar-color: #babac0 !default;
+$scrollbar-duration: 0.5s !default;
+$scrollbar-gap: 3px !default;
+$scrollbar-track-size: 10px !default;
+$scrollbar-thumb-size: 50px !default;
+$scrollbar-thumb-radius: 5px !default;
+
+
+
+.#{$prefix}scrollbar-parent {
+    @include hide-scroll-bars;
+}
+
+.#{$prefix}scrollbar {
+    position: absolute;
+    z-index: 9;
+
+    &.in-window {
+        position: fixed;
+    }
+
+    &.is-empty {
+        display: none;
+    }
+
+    &.auto-hide {
+        opacity: 0;
+        @include transition(opacity $scrollbar-duration);
+
+        &.is-hovered,
+        &.in-action {
+            opacity: 1;
+        }
+    }
+
+    &_x {
+        bottom: $scrollbar-gap;
+        left: $scrollbar-gap;
+        width: calc(100% - #{$scrollbar-gap * 2});
+        height: $scrollbar-track-size;
+    }
+    
+    &_y {
+        top: $scrollbar-gap;
+        right: $scrollbar-gap;
+        width: $scrollbar-track-size;
+        height: calc(100% - #{$scrollbar-gap * 2});
+    }
+
+    &__thumb {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: $scrollbar-color;
+        border-radius: $scrollbar-thumb-radius;
+
+        cursor: pointer;
+
+        &_x {
+            width: $scrollbar-thumb-size;
+            height: 100%;
+        }
+
+        &_y {
+            width: 100%;
+            height: $scrollbar-thumb-size;
+        }
+
+    }
+
+}

package/src/sass/components/scroll/_smooth-scroll.scss

@@ -0,0 +1,17 @@
+@import '../../mixins/index';
+
+.#{$prefix}smooth-scroll {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &__container {
+        width: 100%;
+        &.is-dragging {
+            pointer-events: none;
+            user-select: none;
+        }
+    }
+
+}

package/src/sass/index.scss

@@ -0,0 +1,3 @@
+@import './base';
+
+@import './components/index';

package/src/sass/mixins/_scroll.scss

@@ -0,0 +1,7 @@
+@mixin hide-scroll-bars {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}

package/{dist/scss → src/sass}/mixins/_transition.scss

@@ -1,14 +1,18 @@
 $transition-timing-function: cubic-bezier(.25, .1, .25, 1) !default;
 
-
-
-@mixin transition($duration: 1.25s, $delay: 0s) {
+@mixin transition (
+    $duration: 1.25s, 
+    $delay: 0s
+) {
     transition: #{$duration};
     transition-delay: #{$delay};
     transition-timing-function: $transition-timing-function;
 }
 
-@mixin transition-animation($duration: 1.25s, $delay: 0s) {
+@mixin transition-animation (
+    $duration: 1.25s, 
+    $delay: 0s
+) {
     animation-duration: #{$duration};
     animation-delay: #{$delay};
     animation-timing-function: $transition-timing-function;

package/src/sass/mixins/_viewport.scss

@@ -0,0 +1,69 @@
+$viewport-phone: 899px !default;
+$viewport-tablet: 1199px !default;
+
+
+
+@mixin viewport-desktop () {
+    @media (min-width: $viewport-tablet + 1) {
+        @content;
+    }
+}
+
+
+
+@mixin viewport-tablet () {
+    @media (min-width: $viewport-phone + 1) and (max-width: $viewport-tablet) {
+        @content;
+    }
+}
+
+@mixin viewport-tablet-max () {
+    @media (max-width: $viewport-tablet) {
+        @content;
+    }
+}
+
+@mixin viewport-tablet-min () {
+    @media (min-width: $viewport-phone + 1) {
+        @content;
+    }
+}
+
+
+
+@mixin viewport-phone () {
+    @media (max-width: $viewport-phone) {
+        @content;
+    }
+}
+
+
+
+
+@include viewport-desktop {
+    .desktop-hide {
+        display: none !important;
+    }
+}
+
+@include viewport-tablet {
+    .tablet-hide {
+        display: none !important;
+    }
+}
+
+@include viewport-phone {
+    .phone-hide {
+        display: none !important;
+    }
+}
+
+
+
+@function calc-vw ($val) {
+    @return calc(#{$val} * var(--vw));
+}
+
+@function calc-vh ($val) {
+    @return calc(#{$val} * var(--vh));
+}

package/src/sass/mixins/index.scss

@@ -0,0 +1,3 @@
+@import './transition';
+@import './viewport';
+@import './scroll';