├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── assets └── Kursorjs.gif ├── dist ├── kursor.css ├── kursor.js └── kursor.min.js ├── docs ├── .vuepress │ ├── components │ │ └── Types │ │ │ ├── 1.vue │ │ │ ├── 2.vue │ │ │ ├── 3.vue │ │ │ ├── 4.vue │ │ │ └── 5.vue │ ├── config.js │ ├── enhanceApp.js │ ├── public │ │ └── kursorjs.gif │ └── theme │ │ ├── LICENSE │ │ ├── components │ │ ├── AlgoliaSearchBox.vue │ │ ├── Carbon.vue │ │ ├── DropdownLink.vue │ │ ├── DropdownTransition.vue │ │ ├── Home.vue │ │ ├── NavLink.vue │ │ ├── NavLinks.vue │ │ ├── Navbar.vue │ │ ├── Page.vue │ │ ├── Sidebar.vue │ │ ├── SidebarButton.vue │ │ ├── SidebarGroup.vue │ │ ├── SidebarLink.vue │ │ └── SidebarLinks.vue │ │ ├── global-components │ │ └── Badge.vue │ │ ├── index.js │ │ ├── layouts │ │ ├── 404.vue │ │ └── Layout.vue │ │ ├── noopModule.js │ │ ├── styles │ │ ├── arrow.styl │ │ ├── code.styl │ │ ├── custom-blocks.styl │ │ ├── mobile.styl │ │ ├── theme.styl │ │ ├── toc.styl │ │ └── wrapper.styl │ │ └── util │ │ └── index.js ├── README.md └── guide │ ├── README.md │ ├── configuration.md │ ├── getting-started.md │ ├── installation.md │ └── types.md ├── index.html ├── package-lock.json ├── package.json ├── postinstall.js ├── scripts └── deploy.sh ├── src ├── index.js ├── styles │ ├── index.styl │ └── mixins.styl └── utils │ └── index.js ├── test ├── index.spec.js └── mocha.opts └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"], 3 | "plugins": ["babel-plugin-add-module-exports"], 4 | "env": { 5 | "test": { 6 | "plugins": [ 7 | ["istanbul"] 8 | ] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = LF 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "node": true 7 | }, 8 | 9 | "globals": { 10 | "document": false, 11 | "escape": false, 12 | "navigator": false, 13 | "unescape": false, 14 | "window": false, 15 | "describe": true, 16 | "before": true, 17 | "it": true, 18 | "expect": true, 19 | "sinon": true 20 | }, 21 | 22 | "parser": "babel-eslint", 23 | 24 | "plugins": [ 25 | 26 | ], 27 | 28 | "rules": { 29 | "block-scoped-var": 2, 30 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 31 | "camelcase": [2, { "properties": "always" }], 32 | "complexity": 0, 33 | "consistent-return": 2, 34 | "consistent-this": 0, 35 | "curly": [2, "multi-line"], 36 | "default-case": 0, 37 | "dot-location": [2, "property"], 38 | "dot-notation": 0, 39 | "eol-last": 2, 40 | "eqeqeq": [2, "allow-null"], 41 | "func-names": 0, 42 | "func-style": 0, 43 | "generator-star-spacing": [2, "both"], 44 | "guard-for-in": 0, 45 | "handle-callback-err": [2, "^(err|error|anySpecificError)$" ], 46 | "indent": [2, 2, { "SwitchCase": 1 }], 47 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 48 | "keyword-spacing": [2, {"before": true, "after": true}], 49 | "linebreak-style": 0, 50 | "max-depth": 0, 51 | "max-len": [2, 120, 4], 52 | "max-nested-callbacks": 0, 53 | "max-params": 0, 54 | "max-statements": 0, 55 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }], 56 | "newline-after-var": [2, "always"], 57 | "new-parens": 2, 58 | "no-alert": 0, 59 | "no-array-constructor": 2, 60 | "no-bitwise": 0, 61 | "no-caller": 2, 62 | "no-catch-shadow": 0, 63 | "no-cond-assign": 2, 64 | "no-console": 0, 65 | "no-constant-condition": 0, 66 | "no-continue": 0, 67 | "no-control-regex": 2, 68 | "no-debugger": 2, 69 | "no-delete-var": 2, 70 | "no-div-regex": 0, 71 | "no-dupe-args": 2, 72 | "no-dupe-keys": 2, 73 | "no-duplicate-case": 2, 74 | "no-else-return": 2, 75 | "no-empty": 0, 76 | "no-empty-character-class": 2, 77 | "no-eq-null": 0, 78 | "no-eval": 2, 79 | "no-ex-assign": 2, 80 | "no-extend-native": 2, 81 | "no-extra-bind": 2, 82 | "no-extra-boolean-cast": 2, 83 | "no-extra-parens": 0, 84 | "no-extra-semi": 0, 85 | "no-extra-strict": 0, 86 | "no-fallthrough": 2, 87 | "no-floating-decimal": 2, 88 | "no-func-assign": 2, 89 | "no-implied-eval": 2, 90 | "no-inline-comments": 0, 91 | "no-inner-declarations": [2, "functions"], 92 | "no-invalid-regexp": 2, 93 | "no-irregular-whitespace": 2, 94 | "no-iterator": 2, 95 | "no-label-var": 2, 96 | "no-labels": 2, 97 | "no-lone-blocks": 0, 98 | "no-lonely-if": 0, 99 | "no-loop-func": 0, 100 | "no-mixed-requires": 0, 101 | "no-mixed-spaces-and-tabs": [2, false], 102 | "no-multi-spaces": 2, 103 | "no-multi-str": 2, 104 | "no-multiple-empty-lines": [2, { "max": 1 }], 105 | "no-native-reassign": 2, 106 | "no-negated-in-lhs": 2, 107 | "no-nested-ternary": 0, 108 | "no-new": 2, 109 | "no-new-func": 2, 110 | "no-new-object": 2, 111 | "no-new-require": 2, 112 | "no-new-wrappers": 2, 113 | "no-obj-calls": 2, 114 | "no-octal": 2, 115 | "no-octal-escape": 2, 116 | "no-path-concat": 0, 117 | "no-plusplus": 0, 118 | "no-process-env": 0, 119 | "no-process-exit": 0, 120 | "no-proto": 2, 121 | "no-redeclare": 2, 122 | "no-regex-spaces": 2, 123 | "no-reserved-keys": 0, 124 | "no-restricted-modules": 0, 125 | "no-return-assign": 2, 126 | "no-script-url": 0, 127 | "no-self-compare": 2, 128 | "no-sequences": 2, 129 | "no-shadow": 0, 130 | "no-shadow-restricted-names": 2, 131 | "no-spaced-func": 2, 132 | "no-sparse-arrays": 2, 133 | "no-sync": 0, 134 | "no-ternary": 0, 135 | "no-throw-literal": 2, 136 | "no-trailing-spaces": 2, 137 | "no-undef": 2, 138 | "no-undef-init": 2, 139 | "no-undefined": 0, 140 | "no-underscore-dangle": 0, 141 | "no-unneeded-ternary": 2, 142 | "no-unreachable": 2, 143 | "no-unused-expressions": 0, 144 | "no-unused-vars": [2, { "vars": "all", "args": "none" }], 145 | "no-use-before-define": 2, 146 | "no-var": 0, 147 | "no-void": 0, 148 | "no-warning-comments": 0, 149 | "no-with": 2, 150 | "one-var": 0, 151 | "operator-assignment": 0, 152 | "operator-linebreak": [2, "after"], 153 | "padded-blocks": 0, 154 | "quote-props": 0, 155 | "quotes": [2, "single", "avoid-escape"], 156 | "radix": 2, 157 | "semi-spacing": 0, 158 | "sort-vars": 0, 159 | "space-before-blocks": [2, "always"], 160 | "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], 161 | "space-in-brackets": 0, 162 | "space-in-parens": [2, "never"], 163 | "space-infix-ops": 2, 164 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 165 | "spaced-comment": [2, "always"], 166 | "strict": 0, 167 | "use-isnan": 2, 168 | "valid-jsdoc": 0, 169 | "valid-typeof": 2, 170 | "vars-on-top": 2, 171 | "wrap-iife": [2, "any"], 172 | "wrap-regex": 0, 173 | "yoda": [2, "never"] 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | .nyc_output 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 28 | node_modules 29 | 30 | # Remove some common IDE working directories 31 | .idea 32 | .vscode 33 | 34 | .DS_Store 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 ldrovira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | vuesax 3 |

4 | 5 | # Kursorjs 6 | 7 | New library to facilitate the creation of custom cursors, which are in trend with the new web pages 8 | 9 | ## In Beta 10 | 11 | Is a new library and in (**BETA**) you can use it for projects in production if you are an adventurer 12 | 13 | ## Documents 14 | 15 | Soon they will update and create the documents ... 16 | 17 | ## Use 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | 26 | Document 27 | 28 | 29 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 66 | 67 | ``` 68 | -------------------------------------------------------------------------------- /assets/Kursorjs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lusaxweb/Kursor/cc557d421366887651fd63e6412950a458df854a/assets/Kursorjs.gif -------------------------------------------------------------------------------- /dist/kursor.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Kursor v0.1.5 3 | * Forged by Luis Daniel Rovira 4 | * Released under the MIT License. 5 | */ 6 | .notCursor { 7 | cursor: none; 8 | } 9 | .notCursor * { 10 | cursor: none; 11 | } 12 | #kursorWrapper { 13 | position: fixed; 14 | z-index: 99; 15 | overflow: hidden; 16 | pointer-events: none; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | overflow: hidden; 22 | } 23 | div[class*='kursor'] { 24 | position: fixed; 25 | pointer-events: none; 26 | transform: translate(-50%, -50%); 27 | z-index: 10000; 28 | } 29 | div[class*='kursor'].kursor--hidden { 30 | opacity: 0; 31 | width: 0px; 32 | height: 0px; 33 | } 34 | div[class*='kursor'].kursor--1 { 35 | left: 0px; 36 | top: 0px; 37 | width: 25px; 38 | height: 25px; 39 | border-radius: 50%; 40 | border: 2px solid rgba(var(--k-color), 1); 41 | transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out; 42 | } 43 | div[class*='kursor'].kursor--1 + .kursorChild { 44 | display: block; 45 | width: 4px; 46 | height: 4px; 47 | background: rgba(var(--k-color), 1); 48 | border-radius: 50%; 49 | transition: all 0.2s ease, top 0s ease-out, left 0s ease-out; 50 | } 51 | div[class*='kursor'].kursor--1.--hover { 52 | width: 40px; 53 | height: 40px; 54 | border: 2px solid rgba(var(--k-color), 0); 55 | background: rgba(var(--k-color), 0.1); 56 | } 57 | div[class*='kursor'].kursor--1.--hover + .kursorChild { 58 | background: rgba(var(--k-color), 0.3); 59 | } 60 | div[class*='kursor'].kursor--1.kursor--down { 61 | width: 20px; 62 | height: 20px; 63 | } 64 | div[class*='kursor'].kursor--1.kursor--down + .kursorChild:after { 65 | width: 40px !important; 66 | height: 40px !important; 67 | opacity: 0; 68 | border: 1px solid; 69 | border-radius: 50%; 70 | border-color: rgba(var(--k-color), 1); 71 | transition: all 0.4s ease; 72 | } 73 | div[class*='kursor'].kursor--2 { 74 | left: 0px; 75 | top: 0px; 76 | width: 20px; 77 | height: 20px; 78 | border-radius: 50%; 79 | background: rgba(var(--k-color), 1); 80 | transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out; 81 | } 82 | div[class*='kursor'].kursor--2 + .kursorChild { 83 | display: block; 84 | width: 4px; 85 | height: 4px; 86 | background: rgba(var(--k-color), 1); 87 | border-radius: 50%; 88 | transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; 89 | } 90 | div[class*='kursor'].kursor--2.--hover { 91 | width: 40px; 92 | height: 40px; 93 | background: rgba(var(--k-color), 0.1); 94 | } 95 | div[class*='kursor'].kursor--2.--hover + .kursorChild { 96 | background: rgba(var(--k-color), 0.3); 97 | } 98 | div[class*='kursor'].kursor--2.kursor--down { 99 | width: 10px; 100 | height: 10px; 101 | } 102 | div[class*='kursor'].kursor--2.kursor--down + .kursorChild:after { 103 | width: 40px !important; 104 | height: 40px !important; 105 | opacity: 0; 106 | border: 1px solid; 107 | border-radius: 50%; 108 | border-color: rgba(var(--k-color), 1); 109 | transition: all 0.4s ease; 110 | } 111 | div[class*='kursor'].kursor--3 { 112 | left: 0px; 113 | top: 0px; 114 | width: 20px; 115 | height: 20px; 116 | border: 1px solid rgba(var(--k-color), 1); 117 | transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out; 118 | } 119 | div[class*='kursor'].kursor--3 + .kursorChild { 120 | display: block; 121 | width: 4px; 122 | height: 4px; 123 | background: rgba(var(--k-color), 1); 124 | transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; 125 | } 126 | div[class*='kursor'].kursor--3.--hover { 127 | width: 40px; 128 | height: 40px; 129 | background: rgba(var(--k-color), 0.1); 130 | border: 1px solid rgba(var(--k-color), 0); 131 | } 132 | div[class*='kursor'].kursor--3.--hover + .kursorChild { 133 | background: rgba(var(--k-color), 0.3); 134 | } 135 | div[class*='kursor'].kursor--3.kursor--down { 136 | width: 5px; 137 | height: 5px; 138 | border: 1px solid rgba(var(--k-color), 0); 139 | } 140 | div[class*='kursor'].kursor--3.kursor--down + .kursorChild { 141 | width: 10px; 142 | height: 10px; 143 | } 144 | div[class*='kursor'].kursor--3.kursor--down + .kursorChild:after { 145 | width: 40px !important; 146 | height: 40px !important; 147 | opacity: 0; 148 | border: 1px solid; 149 | border-color: rgba(var(--k-color), 1); 150 | transition: all 0.4s ease; 151 | } 152 | div[class*='kursor'].kursor--4 { 153 | left: 0px; 154 | top: 0px; 155 | width: 50px; 156 | height: 50px; 157 | border: 1px solid rgba(var(--k-color), 0.3); 158 | border-radius: 50%; 159 | transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; 160 | } 161 | div[class*='kursor'].kursor--4 + .kursorChild { 162 | display: block; 163 | width: 6px; 164 | height: 6px; 165 | background: rgba(var(--k-color), 1); 166 | border-radius: 50%; 167 | transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out; 168 | } 169 | div[class*='kursor'].kursor--4.--hover { 170 | width: 30px; 171 | height: 30px; 172 | background: rgba(var(--k-color), 0.1); 173 | border: 3px solid rgba(var(--k-color), 0); 174 | } 175 | div[class*='kursor'].kursor--4.--hover + .kursorChild { 176 | width: 25px; 177 | height: 25px; 178 | background: rgba(var(--k-color), 0.1); 179 | } 180 | div[class*='kursor'].kursor--4.kursor--down { 181 | width: 5px; 182 | height: 5px; 183 | } 184 | div[class*='kursor'].kursor--4.kursor--down + .kursorChild { 185 | width: 10px; 186 | height: 10px; 187 | } 188 | div[class*='kursor'].kursor--4.kursor--down + .kursorChild:after { 189 | width: 40px !important; 190 | height: 40px !important; 191 | opacity: 0; 192 | border-radius: 50%; 193 | border: 1px solid; 194 | border-color: rgba(var(--k-color), 1); 195 | transition: all 0.4s ease; 196 | } 197 | div[class*='kursor'].kursor--5 { 198 | left: 0px; 199 | top: 0px; 200 | width: 10px; 201 | height: 10px; 202 | border: 1px solid rgba(var(--k-color), 0.5); 203 | border-radius: 50%; 204 | transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; 205 | } 206 | div[class*='kursor'].kursor--5.--hover { 207 | width: 26px; 208 | height: 26px; 209 | background: rgba(var(--k-color), 0.1); 210 | border: 3px solid rgba(var(--k-color), 0); 211 | } 212 | div[class*='kursor'].kursor--5.kursor--down { 213 | width: 15px; 214 | height: 15px; 215 | } 216 | div[class*='kursorChild'] { 217 | position: fixed; 218 | pointer-events: none; 219 | transform: translate(-50%, -50%); 220 | display: none; 221 | overflow: hidden; 222 | } 223 | div[class*='kursorChild'].kursorChild[class*='--hidden'] { 224 | opacity: 0; 225 | width: 0px; 226 | height: 0px; 227 | } 228 | div[class*='kursorChild'].kursorChild:after { 229 | content: ''; 230 | pointer-events: none; 231 | width: 0px; 232 | height: 0px; 233 | position: absolute; 234 | left: 50%; 235 | top: 50%; 236 | opacity: 1; 237 | border: 0px solid rgba(var(--k-color), 0.5); 238 | transform: translate(-50%, -50%); 239 | } 240 | .kursor--absolute { 241 | position: absolute !important; 242 | z-index: 2000; 243 | } 244 | @media screen and (max-width: 768px) { 245 | .notCursor * { 246 | cursor: auto; 247 | } 248 | div[class*='kursor'] { 249 | display: none !important; 250 | } 251 | div[class*='kursorChild'] { 252 | display: none !important; 253 | } 254 | } 255 | @media screen and (max-width: 812px) and (max-height: 430px) and (orientation: landscape) { 256 | div[class*='kursor'] { 257 | display: none !important; 258 | } 259 | div[class*='kursorChild'] { 260 | display: none !important; 261 | } 262 | .notCursor * { 263 | cursor: auto; 264 | } 265 | } 266 | 267 | -------------------------------------------------------------------------------- /dist/kursor.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Kursor v0.1.5 3 | * Forged by Luis Daniel Rovira 4 | * Released under the MIT License. 5 | */ 6 | (function webpackUniversalModuleDefinition(root, factory) { 7 | if(typeof exports === 'object' && typeof module === 'object') 8 | module.exports = factory(); 9 | else if(typeof define === 'function' && define.amd) 10 | define("kursor", [], factory); 11 | else if(typeof exports === 'object') 12 | exports["kursor"] = factory(); 13 | else 14 | root["kursor"] = factory(); 15 | })(typeof self !== 'undefined' ? self : this, function() { 16 | return /******/ (function(modules) { // webpackBootstrap 17 | /******/ // The module cache 18 | /******/ var installedModules = {}; 19 | /******/ 20 | /******/ // The require function 21 | /******/ function __webpack_require__(moduleId) { 22 | /******/ 23 | /******/ // Check if module is in cache 24 | /******/ if(installedModules[moduleId]) { 25 | /******/ return installedModules[moduleId].exports; 26 | /******/ } 27 | /******/ // Create a new module (and put it into the cache) 28 | /******/ var module = installedModules[moduleId] = { 29 | /******/ i: moduleId, 30 | /******/ l: false, 31 | /******/ exports: {} 32 | /******/ }; 33 | /******/ 34 | /******/ // Execute the module function 35 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 36 | /******/ 37 | /******/ // Flag the module as loaded 38 | /******/ module.l = true; 39 | /******/ 40 | /******/ // Return the exports of the module 41 | /******/ return module.exports; 42 | /******/ } 43 | /******/ 44 | /******/ 45 | /******/ // expose the modules object (__webpack_modules__) 46 | /******/ __webpack_require__.m = modules; 47 | /******/ 48 | /******/ // expose the module cache 49 | /******/ __webpack_require__.c = installedModules; 50 | /******/ 51 | /******/ // define getter function for harmony exports 52 | /******/ __webpack_require__.d = function(exports, name, getter) { 53 | /******/ if(!__webpack_require__.o(exports, name)) { 54 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 55 | /******/ } 56 | /******/ }; 57 | /******/ 58 | /******/ // define __esModule on exports 59 | /******/ __webpack_require__.r = function(exports) { 60 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 61 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 62 | /******/ } 63 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 64 | /******/ }; 65 | /******/ 66 | /******/ // create a fake namespace object 67 | /******/ // mode & 1: value is a module id, require it 68 | /******/ // mode & 2: merge all properties of value into the ns 69 | /******/ // mode & 4: return value when already ns object 70 | /******/ // mode & 8|1: behave like require 71 | /******/ __webpack_require__.t = function(value, mode) { 72 | /******/ if(mode & 1) value = __webpack_require__(value); 73 | /******/ if(mode & 8) return value; 74 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 75 | /******/ var ns = Object.create(null); 76 | /******/ __webpack_require__.r(ns); 77 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 78 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 79 | /******/ return ns; 80 | /******/ }; 81 | /******/ 82 | /******/ // getDefaultExport function for compatibility with non-harmony modules 83 | /******/ __webpack_require__.n = function(module) { 84 | /******/ var getter = module && module.__esModule ? 85 | /******/ function getDefault() { return module['default']; } : 86 | /******/ function getModuleExports() { return module; }; 87 | /******/ __webpack_require__.d(getter, 'a', getter); 88 | /******/ return getter; 89 | /******/ }; 90 | /******/ 91 | /******/ // Object.prototype.hasOwnProperty.call 92 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 93 | /******/ 94 | /******/ // __webpack_public_path__ 95 | /******/ __webpack_require__.p = "/dist/"; 96 | /******/ 97 | /******/ 98 | /******/ // Load entry module and return exports 99 | /******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); 100 | /******/ }) 101 | /************************************************************************/ 102 | /******/ ({ 103 | 104 | /***/ "./src/index.js": 105 | /*!**********************!*\ 106 | !*** ./src/index.js ***! 107 | \**********************/ 108 | /*! no static exports found */ 109 | /***/ (function(module, exports, __webpack_require__) { 110 | 111 | "use strict"; 112 | eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\n__webpack_require__(/*! ./styles/index.styl */ \"./src/styles/index.styl\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/utils/index.js\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar key = 1;\n\nvar kursor =\n/*#__PURE__*/\nfunction () {\n function kursor() {\n var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n _classCallCheck(this, kursor);\n\n var _props = {\n type: 1,\n ...props\n };\n this.props = _props;\n this.key = key === 1 ? '' : key;\n key++;\n this.render();\n this.hovers();\n this.mousemove();\n this.down();\n }\n\n _createClass(kursor, [{\n key: \"color\",\n value: function color(colorx) {\n (0, _utils.setColor)('color', colorx, this.kursor);\n (0, _utils.setColor)('color', colorx, this.kursorChild);\n }\n }, {\n key: \"hidden\",\n value: function hidden() {\n var isHidden = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n\n if (isHidden) {\n this.addClass('kursor--hidden');\n this.addClass('kursorChild--hidden', true);\n } else {\n this.removeClass('kursor--hidden');\n this.removeClass('kursorChild--hidden', true);\n }\n }\n }, {\n key: \"createWrapper\",\n value: function createWrapper() {\n var wrapper = document.createElement('div');\n wrapper.setAttribute('id', 'kursorWrapper');\n document.querySelector(this.props.el).insertBefore(wrapper, document.querySelector(this.props.el).firstChild);\n }\n }, {\n key: \"render\",\n value: function render() {\n if (this.mobileAndTabletcheck()) {\n return;\n }\n\n this.createCursor('kursorChild');\n this.createCursor('kursor');\n\n if (this.props.hasOwnProperty('removeDefaultCursor')) {\n if (this.props.removeDefaultCursor) {\n document.body.classList.add('notCursor');\n }\n }\n\n if (this.props.hasOwnProperty('type')) {\n this.addClass(\"kursor--\".concat(this.props.type));\n }\n }\n }, {\n key: \"down\",\n value: function down() {\n var _this = this;\n\n document.addEventListener('mousedown', function (e) {\n _this.addClass('kursor--down');\n });\n document.addEventListener('mouseup', function (e) {\n _this.removeClass('kursor--down');\n });\n }\n }, {\n key: \"mobileAndTabletcheck\",\n value: function mobileAndTabletcheck() {\n var check = false;\n\n (function (a) {\n if (/(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(a.substr(0, 4))) check = true;\n })(navigator.userAgent || navigator.vendor || window.opera);\n\n return check;\n }\n }, {\n key: \"mousemove\",\n value: function mousemove() {\n var _this2 = this;\n\n var hasEl = this.props.hasOwnProperty('el');\n var el = window;\n\n if (hasEl) {\n el = document.querySelector(this.props.el);\n }\n\n el.addEventListener('mousemove', function (e) {\n var cursor = document.querySelector('.kursor' + _this2.key);\n var cursorChild = document.querySelector('.kursorChild' + _this2.key);\n\n if (hasEl) {\n var notEl = e.target !== document.querySelector(_this2.props.el);\n var parentEl = e.target.closest(_this2.props.el);\n\n if (notEl) {\n cursor = parentEl.querySelector('.kursor' + _this2.key);\n cursorChild = parentEl.querySelector('.kursorChild' + _this2.key);\n } else {\n cursor = e.target.querySelector('.kursor' + _this2.key);\n cursorChild = e.target.querySelector('.kursorChild' + _this2.key);\n }\n\n cursor.style.left = \"\".concat(notEl ? e.offsetX + e.target.offsetLeft : e.offsetX, \"px\");\n cursor.style.top = \"\".concat(notEl ? e.offsetY + e.target.offsetTop : e.offsetY, \"px\");\n cursorChild.style.left = \"\".concat(notEl ? e.offsetX + e.target.offsetLeft : e.offsetX, \"px\");\n cursorChild.style.top = \"\".concat(notEl ? e.offsetY + e.target.offsetTop : e.offsetY, \"px\");\n } else {\n cursor.style.left = \"\".concat(e.x, \"px\");\n cursor.style.top = \"\".concat(e.y, \"px\");\n cursorChild.style.left = \"\".concat(e.x, \"px\");\n cursorChild.style.top = \"\".concat(e.y, \"px\");\n }\n });\n var doc = document;\n\n if (hasEl) {\n doc = document.querySelector(this.props.el);\n }\n\n doc.addEventListener('mouseenter', function (e) {\n _this2.removeClass('kursor--hidden');\n\n _this2.removeClass('kursorChild--hidden', true);\n });\n doc.addEventListener('mouseleave', function (e) {\n _this2.addClass('kursor--hidden');\n\n _this2.addClass('kursorChild--hidden', true);\n });\n }\n }, {\n key: \"hovers\",\n value: function hovers() {\n var _this3 = this;\n\n var hovers = document.querySelectorAll('.k-hover' + this.key);\n console.log(hovers);\n hovers.forEach(function (item) {\n item.addEventListener('mouseenter', function () {\n _this3.addClass('--hover');\n });\n item.addEventListener('mouseleave', function () {\n _this3.removeClass('--hover');\n });\n });\n }\n }, {\n key: \"createCursor\",\n value: function createCursor(name) {\n this[name] = document.createElement('div');\n this[name].setAttribute('class', name);\n this[name].classList.add(name + this.key);\n this[name].setAttribute('style', '--k-color: 0,0,0');\n\n if (this.props.hasOwnProperty('el')) {\n this[name].classList.add(\"\".concat(name, \"--hidden\"));\n this[name].classList.add('kursor--absolute');\n document.querySelector(this.props.el).insertBefore(this[name], document.querySelector(this.props.el).firstChild);\n } else {\n document.body.insertBefore(this[name], document.body.firstChild);\n }\n\n if (this.props.hasOwnProperty('color')) {\n (0, _utils.setColor)('color', this.props.color, this[name]);\n }\n }\n }, {\n key: \"addClass\",\n value: function addClass(classx) {\n var child = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n document.querySelector(child ? '.kursorChild' + this.key : '.kursor' + this.key).classList.add(classx);\n }\n }, {\n key: \"removeClass\",\n value: function removeClass(classx) {\n var child = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n document.querySelector(child ? '.kursorChild' + this.key : '.kursor' + this.key).classList.remove(classx);\n }\n }, {\n key: \"name\",\n get: function get() {\n return this._name;\n }\n }]);\n\n return kursor;\n}();\n\nexports.default = kursor;\nmodule.exports = exports[\"default\"];\n\n//# sourceURL=webpack://kursor/./src/index.js?"); 113 | 114 | /***/ }), 115 | 116 | /***/ "./src/styles/index.styl": 117 | /*!*******************************!*\ 118 | !*** ./src/styles/index.styl ***! 119 | \*******************************/ 120 | /*! no static exports found */ 121 | /***/ (function(module, exports, __webpack_require__) { 122 | 123 | eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack://kursor/./src/styles/index.styl?"); 124 | 125 | /***/ }), 126 | 127 | /***/ "./src/utils/index.js": 128 | /*!****************************!*\ 129 | !*** ./src/utils/index.js ***! 130 | \****************************/ 131 | /*! no static exports found */ 132 | /***/ (function(module, exports, __webpack_require__) { 133 | 134 | "use strict"; 135 | eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.setColor = void 0;\n\nvar setVar = function setVar(propertyName, value, el) {\n if (!el) {\n document.documentElement.style.setProperty(\"--k-\".concat(propertyName), value);\n } else {\n el.style.setProperty(\"--k-\".concat(propertyName), value);\n }\n};\n\nvar setColor = function setColor(colorName, color, el) {\n function hexToRgb(hex) {\n var shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function (m, r, g, b) {\n return r + r + g + g + b + b;\n });\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n }\n\n var isRGB = /^(rgb|rgba)/.test(color);\n var isHEX = /^(#)/.test(color);\n var newColor;\n\n if (isRGB) {\n var arrayColor = color.replace(/[rgba()]/g, '').split(',');\n newColor = \"\".concat(arrayColor[0], \",\").concat(arrayColor[1], \",\").concat(arrayColor[2]);\n setVar(colorName, newColor, el);\n } else if (isHEX) {\n var rgb = hexToRgb(color);\n newColor = \"\".concat(rgb.r, \",\").concat(rgb.g, \",\").concat(rgb.b);\n setVar(colorName, newColor, el);\n }\n};\n\nexports.setColor = setColor;\n\n//# sourceURL=webpack://kursor/./src/utils/index.js?"); 136 | 137 | /***/ }) 138 | 139 | /******/ }); 140 | }); -------------------------------------------------------------------------------- /dist/kursor.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Kursor v0.1.0 3 | * Forged by Luis Daniel Rovira 4 | * Released under the MIT License. 5 | */ 6 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("kursor",[],t):"object"==typeof exports?exports.kursor=t():e.kursor=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var s=t[o]={i:o,l:!1,exports:{}};return e[o].call(s.exports,s,s.exports,r),s.l=!0,s.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)r.d(o,s,function(t){return e[t]}.bind(null,s));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/dist/",r(r.s=0)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,r(1);var o=r(2);function s(e,t){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var r={type:1,...t};this.props=r,this.key=1===n?"":n,n++,this.render(),this.hovers(),this.mousemove(),this.down()}var t,r,u;return t=e,(r=[{key:"color",value:function(e){(0,o.setColor)("color",e,this.kursor),(0,o.setColor)("color",e,this.kursorChild)}},{key:"hidden",value:function(){!(arguments.length>0&&void 0!==arguments[0])||arguments[0]?(this.addClass("kursor--hidden"),this.addClass("kursorChild--hidden",!0)):(this.removeClass("kursor--hidden"),this.removeClass("kursorChild--hidden",!0))}},{key:"createWrapper",value:function(){var e=document.createElement("div");e.setAttribute("id","kursorWrapper"),document.querySelector(this.props.el).insertBefore(e,document.querySelector(this.props.el).firstChild)}},{key:"render",value:function(){this.createCursor("kursorChild"),this.createCursor("kursor"),this.props.hasOwnProperty("removeDefaultCursor")&&this.props.removeDefaultCursor&&document.body.classList.add("notCursor"),this.props.hasOwnProperty("type")&&this.addClass("kursor--".concat(this.props.type))}},{key:"down",value:function(){var e=this;document.addEventListener("mousedown",function(t){e.addClass("kursor--down")}),document.addEventListener("mouseup",function(t){e.removeClass("kursor--down")})}},{key:"mousemove",value:function(){var e=this,t=this.props.hasOwnProperty("el"),r=window;t&&(r=document.querySelector(this.props.el)),r.addEventListener("mousemove",function(r){var o=document.querySelector(".kursor"+e.key),s=document.querySelector(".kursorChild"+e.key);if(t){var n=r.target!==document.querySelector(e.props.el),u=r.target.closest(e.props.el);n?(o=u.querySelector(".kursor"+e.key),s=u.querySelector(".kursorChild"+e.key)):(o=r.target.querySelector(".kursor"+e.key),s=r.target.querySelector(".kursorChild"+e.key)),o.style.left="".concat(n?r.offsetX+r.target.offsetLeft:r.offsetX,"px"),o.style.top="".concat(n?r.offsetY+r.target.offsetTop:r.offsetY,"px"),s.style.left="".concat(n?r.offsetX+r.target.offsetLeft:r.offsetX,"px"),s.style.top="".concat(n?r.offsetY+r.target.offsetTop:r.offsetY,"px")}else o.style.left="".concat(r.x,"px"),o.style.top="".concat(r.y,"px"),s.style.left="".concat(r.x,"px"),s.style.top="".concat(r.y,"px")});var o=document;t&&(o=document.querySelector(this.props.el)),o.addEventListener("mouseenter",function(t){e.removeClass("kursor--hidden"),e.removeClass("kursorChild--hidden",!0)}),o.addEventListener("mouseleave",function(t){e.addClass("kursor--hidden"),e.addClass("kursorChild--hidden",!0)})}},{key:"hovers",value:function(){var e=this,t=document.querySelectorAll(".k-hover"+this.key);console.log(t),t.forEach(function(t){t.addEventListener("mouseenter",function(){e.addClass("--hover")}),t.addEventListener("mouseleave",function(){e.removeClass("--hover")})})}},{key:"createCursor",value:function(e){this[e]=document.createElement("div"),this[e].setAttribute("class",e),this[e].classList.add(e+this.key),this[e].setAttribute("style","--k-color: 0,0,0"),this.props.hasOwnProperty("el")?(this[e].classList.add("".concat(e,"--hidden")),this[e].classList.add("kursor--absolute"),document.querySelector(this.props.el).insertBefore(this[e],document.querySelector(this.props.el).firstChild)):document.body.insertBefore(this[e],document.body.firstChild),this.props.hasOwnProperty("color")&&(0,o.setColor)("color",this.props.color,this[e])}},{key:"addClass",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];document.querySelector(t?".kursorChild"+this.key:".kursor"+this.key).classList.add(e)}},{key:"removeClass",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];document.querySelector(t?".kursorChild"+this.key:".kursor"+this.key).classList.remove(e)}},{key:"name",get:function(){return this._name}}])&&s(t.prototype,r),u&&s(t,u),e}();t.default=u,e.exports=t.default},function(e,t,r){},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.setColor=void 0;var o=function(e,t,r){r?r.style.setProperty("--k-".concat(e),t):document.documentElement.style.setProperty("--k-".concat(e),t)};t.setColor=function(e,t,r){var s,n=/^(rgb|rgba)/.test(t),u=/^(#)/.test(t);if(n){var i=t.replace(/[rgba()]/g,"").split(",");s="".concat(i[0],",").concat(i[1],",").concat(i[2]),o(e,s,r)}else if(u){var a=function(e){e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,r,o){return t+t+r+r+o+o});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}(t);s="".concat(a.r,",").concat(a.g,",").concat(a.b),o(e,s,r)}}}])}); -------------------------------------------------------------------------------- /docs/.vuepress/components/Types/1.vue: -------------------------------------------------------------------------------- 1 | 13 | 34 | 52 | 53 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Types/2.vue: -------------------------------------------------------------------------------- 1 | 13 | 34 | 52 | 53 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Types/3.vue: -------------------------------------------------------------------------------- 1 | 13 | 34 | 52 | 53 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Types/4.vue: -------------------------------------------------------------------------------- 1 | 13 | 34 | 52 | 53 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Types/5.vue: -------------------------------------------------------------------------------- 1 | 13 | 34 | 54 | 55 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: '/Kursor/', 3 | ga:'UA-122319353-1', 4 | docsDir: 'docs', 5 | title: 'Kursor.js - library for javascript', 6 | description: 'Cursor style with javascript and css', 7 | plugins: [ 8 | [ 9 | 'vuepress-plugin-smooth-scroll', 10 | ], 11 | ['container', { 12 | type: 'tip', 13 | defaultTitle: '', 14 | }], 15 | ['container', { 16 | type: 'warning', 17 | defaultTitle: '', 18 | }], 19 | ['container', { 20 | type: 'danger', 21 | defaultTitle: '', 22 | }] 23 | ], 24 | themeConfig: { 25 | // Assumes GitHub. Can also be a full GitLab url. 26 | repo: 'lusaxweb/kursor', 27 | // Optional options for generating "Edit this page" link 28 | // if your docs are in a different repo from your main project: 29 | docsRepo: 'lusaxweb/kursor', 30 | // if your docs are not at the root of the repo: 31 | docsDir: 'docs', 32 | // if your docs are in a specific branch (defaults to 'master'): 33 | docsBranch: 'master', 34 | // defaults to true, set to false to disable 35 | editLinks: true, 36 | // custom text for edit link. Defaults to "Edit this page" 37 | nav: [ 38 | { text: 'Home', link: '/' }, 39 | { text: 'Guide', link: '/guide/' }, 40 | // { text: 'External', link: 'https://google.com' }, 41 | ], 42 | sidebar: { 43 | '/guide/': [ 44 | '', /* /guide/ */ 45 | 'installation', 46 | 'getting-started', 47 | 'configuration', 48 | 'types', 49 | ], 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import kursor from '../../src' 2 | import '../../src/styles/index.styl' 3 | export default ({ 4 | Vue, // the version of Vue being used in the VuePress app 5 | options, // the options for the root Vue instance 6 | router, // the router instance for the app 7 | siteData 8 | }) => { 9 | // ...apply enhancements to the app 10 | var kursorx = new kursor({ 11 | removeDefaultCursor: true 12 | }) 13 | 14 | Vue.prototype.$mykursor = kursorx 15 | 16 | Vue.prototype.$kursor = kursor 17 | // Vue.use(kursor) 18 | // console.log(kursor) 19 | } 20 | -------------------------------------------------------------------------------- /docs/.vuepress/public/kursorjs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lusaxweb/Kursor/cc557d421366887651fd63e6412950a458df854a/docs/.vuepress/public/kursorjs.gif -------------------------------------------------------------------------------- /docs/.vuepress/theme/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present, Yuxi (Evan) You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/AlgoliaSearchBox.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 61 | 62 | 156 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Carbon.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 34 | 164 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/DropdownLink.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 78 | 79 | 180 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Home.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 72 | 73 | 163 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 50 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/NavLinks.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 117 | 118 | 150 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 87 | 88 | 129 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Page.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 200 | 201 | 251 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | 23 | 60 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/SidebarButton.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/SidebarGroup.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 71 | 72 | 130 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/SidebarLink.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 110 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/components/SidebarLinks.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 87 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/global-components/Badge.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 45 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | // Theme API. 4 | module.exports = (options, ctx) => ({ 5 | alias () { 6 | const { themeConfig, siteConfig } = ctx 7 | // resolve algolia 8 | const isAlgoliaSearch = ( 9 | themeConfig.algolia 10 | || Object.keys(siteConfig.locales && themeConfig.locales || {}) 11 | .some(base => themeConfig.locales[base].algolia) 12 | ) 13 | return { 14 | '@AlgoliaSearchBox': isAlgoliaSearch 15 | ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') 16 | : path.resolve(__dirname, 'noopModule.js') 17 | } 18 | }, 19 | 20 | plugins: [ 21 | '@vuepress/active-header-links', 22 | '@vuepress/search', 23 | '@vuepress/plugin-nprogress', 24 | ['@vuepress/container', { type: 'tip' }], 25 | ['@vuepress/container', { type: 'warning' }], 26 | ['@vuepress/container', { type: 'danger' }] 27 | ] 28 | }) 29 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/layouts/404.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/layouts/Layout.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .arrow 4 | display inline-block 5 | width 0 6 | height 0 7 | &.up 8 | border-left 4px solid transparent 9 | border-right 4px solid transparent 10 | border-bottom 6px solid $arrowBgColor 11 | &.down 12 | border-left 4px solid transparent 13 | border-right 4px solid transparent 14 | border-top 6px solid $arrowBgColor 15 | &.right 16 | border-top 4px solid transparent 17 | border-bottom 4px solid transparent 18 | border-left 6px solid $arrowBgColor 19 | &.left 20 | border-top 4px solid transparent 21 | border-bottom 4px solid transparent 22 | border-right 6px solid $arrowBgColor 23 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/code.styl: -------------------------------------------------------------------------------- 1 | .content 2 | code 3 | color lighten($textColor, 20%) 4 | padding 0.25rem 0.5rem 5 | margin 0 6 | font-size 0.85em 7 | background-color rgba(27,31,35,0.05) 8 | border-radius 3px 9 | .token 10 | &.deleted 11 | color #EC5975 12 | &.inserted 13 | color $accentColor 14 | 15 | .content 16 | pre, pre[class*="language-"] 17 | line-height 1.4 18 | padding 1.25rem 1.5rem 19 | margin 0.85rem 0 20 | background-color $codeBgColor 21 | border-radius 6px 22 | overflow auto 23 | code 24 | color #fff 25 | padding 0 26 | background-color transparent 27 | border-radius 0 28 | 29 | div[class*="language-"] 30 | position relative 31 | background-color $codeBgColor 32 | border-radius 6px 33 | .highlight-lines 34 | user-select none 35 | padding-top 1.3rem 36 | position absolute 37 | top 0 38 | left 0 39 | width 100% 40 | line-height 1.4 41 | .highlighted 42 | background-color rgba(0, 0, 0, 66%) 43 | pre, pre[class*="language-"] 44 | background transparent 45 | position relative 46 | z-index 1 47 | &::before 48 | position absolute 49 | z-index 3 50 | top 0.8em 51 | right 1em 52 | font-size 0.75rem 53 | color rgba(255, 255, 255, 0.4) 54 | &:not(.line-numbers-mode) 55 | .line-numbers-wrapper 56 | display none 57 | &.line-numbers-mode 58 | .highlight-lines .highlighted 59 | position relative 60 | &:before 61 | content ' ' 62 | position absolute 63 | z-index 3 64 | left 0 65 | top 0 66 | display block 67 | width $lineNumbersWrapperWidth 68 | height 100% 69 | background-color rgba(0, 0, 0, 66%) 70 | pre 71 | padding-left $lineNumbersWrapperWidth + 1 rem 72 | vertical-align middle 73 | .line-numbers-wrapper 74 | position absolute 75 | top 0 76 | width $lineNumbersWrapperWidth 77 | text-align center 78 | color rgba(255, 255, 255, 0.3) 79 | padding 1.25rem 0 80 | line-height 1.4 81 | br 82 | user-select none 83 | .line-number 84 | position relative 85 | z-index 4 86 | user-select none 87 | font-size 0.85em 88 | &::after 89 | content '' 90 | position absolute 91 | z-index 2 92 | top 0 93 | left 0 94 | width $lineNumbersWrapperWidth 95 | height 100% 96 | border-radius 6px 0 0 6px 97 | border-right 1px solid rgba(0, 0, 0, 66%) 98 | background-color $codeBgColor 99 | 100 | 101 | for lang in $codeLang 102 | div{'[class~="language-' + lang + '"]'} 103 | &:before 104 | content ('' + lang) 105 | 106 | div[class~="language-javascript"] 107 | &:before 108 | content "js" 109 | 110 | div[class~="language-typescript"] 111 | &:before 112 | content "ts" 113 | 114 | div[class~="language-markup"] 115 | &:before 116 | content "html" 117 | 118 | div[class~="language-markdown"] 119 | &:before 120 | content "md" 121 | 122 | div[class~="language-json"]:before 123 | content "json" 124 | 125 | div[class~="language-ruby"]:before 126 | content "rb" 127 | 128 | div[class~="language-python"]:before 129 | content "py" 130 | 131 | div[class~="language-bash"]:before 132 | content "sh" 133 | 134 | div[class~="language-php"]:before 135 | content "php" 136 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin-bottom -0.4rem 5 | &.tip, &.warning, &.danger 6 | padding .1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | a 20 | color $textColor 21 | &.danger 22 | background-color #ffe6e6 23 | border-color darken(red, 20%) 24 | color darken(red, 70%) 25 | .custom-block-title 26 | color darken(red, 40%) 27 | a 28 | color $textColor 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/mobile.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | $mobileSidebarWidth = $sidebarWidth * 0.82 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: $MQNarrow) 7 | .sidebar 8 | font-size 15px 9 | width $mobileSidebarWidth 10 | .page 11 | padding-left $mobileSidebarWidth 12 | 13 | // wide mobile 14 | @media (max-width: $MQMobile) 15 | .sidebar 16 | top 0 17 | padding-top $navbarHeight 18 | transform translateX(-100%) 19 | transition transform .2s ease 20 | .page 21 | padding-left 0 22 | .theme-container 23 | &.sidebar-open 24 | .sidebar 25 | transform translateX(0) 26 | &.no-navbar 27 | .sidebar 28 | padding-top: 0 29 | 30 | // narrow mobile 31 | @media (max-width: $MQMobileNarrow) 32 | h1 33 | font-size 1.9rem 34 | .content 35 | div[class*="language-"] 36 | margin 0.85rem -1.5rem 37 | border-radius 0 38 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/theme.styl: -------------------------------------------------------------------------------- 1 | @require './code' 2 | @require './custom-blocks' 3 | @require './arrow' 4 | @require './wrapper' 5 | @require './toc' 6 | 7 | html, body 8 | padding 0 9 | margin 0 10 | background-color #fff 11 | 12 | body 13 | font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif 14 | -webkit-font-smoothing antialiased 15 | -moz-osx-font-smoothing grayscale 16 | font-size 16px 17 | color $textColor 18 | 19 | .page 20 | padding-left $sidebarWidth 21 | 22 | .navbar 23 | position fixed 24 | z-index 20 25 | top 0 26 | left 0 27 | right 0 28 | height $navbarHeight 29 | background-color #fff 30 | box-sizing border-box 31 | border-bottom 1px solid $borderColor 32 | 33 | .sidebar-mask 34 | position fixed 35 | z-index 9 36 | top 0 37 | left 0 38 | width 100vw 39 | height 100vh 40 | display none 41 | 42 | .sidebar 43 | font-size 16px 44 | background-color #fff 45 | width $sidebarWidth 46 | position fixed 47 | z-index 10 48 | margin 0 49 | top $navbarHeight 50 | left 0 51 | bottom 0 52 | box-sizing border-box 53 | border-right 1px solid $borderColor 54 | overflow-y auto 55 | 56 | .content:not(.custom) 57 | @extend $wrapper 58 | > *:first-child 59 | margin-top $navbarHeight 60 | a:hover 61 | text-decoration underline 62 | p.demo 63 | padding 1rem 1.5rem 64 | border 1px solid #ddd 65 | border-radius 4px 66 | img 67 | max-width 100% 68 | 69 | .content.custom 70 | padding 0 71 | margin 0 72 | img 73 | max-width 100% 74 | 75 | a 76 | font-weight 500 77 | color $accentColor 78 | text-decoration none 79 | 80 | p a code 81 | font-weight 400 82 | color $accentColor 83 | 84 | kbd 85 | background #eee 86 | border solid 0.15rem #ddd 87 | border-bottom solid 0.25rem #ddd 88 | border-radius 0.15rem 89 | padding 0 0.15em 90 | 91 | blockquote 92 | font-size .9rem 93 | color #999 94 | border-left .5rem solid #dfe2e5 95 | margin 0.5rem 0 96 | padding .25rem 0 .25rem 1rem 97 | & > p 98 | margin 0 99 | 100 | ul, ol 101 | padding-left 1.2em 102 | 103 | strong 104 | font-weight 600 105 | 106 | h1, h2, h3, h4, h5, h6 107 | font-weight 600 108 | line-height 1.25 109 | .content:not(.custom) > & 110 | margin-top (0.5rem - $navbarHeight) 111 | padding-top ($navbarHeight + 1rem) 112 | margin-bottom 0 113 | &:first-child 114 | margin-top -1.5rem 115 | margin-bottom 1rem 116 | + p, + pre, + .custom-block 117 | margin-top 2rem 118 | &:hover .header-anchor 119 | opacity: 1 120 | 121 | h1 122 | font-size 2.2rem 123 | 124 | h2 125 | font-size 1.65rem 126 | padding-bottom .3rem 127 | border-bottom 1px solid $borderColor 128 | 129 | h3 130 | font-size 1.35rem 131 | 132 | a.header-anchor 133 | font-size 0.85em 134 | float left 135 | margin-left -0.87em 136 | padding-right 0.23em 137 | margin-top 0.125em 138 | opacity 0 139 | &:hover 140 | text-decoration none 141 | 142 | code, kbd, .line-number 143 | font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace 144 | 145 | p, ul, ol 146 | line-height 1.7 147 | 148 | hr 149 | border 0 150 | border-top 1px solid $borderColor 151 | 152 | table 153 | border-collapse collapse 154 | margin 1rem 0 155 | display: block 156 | overflow-x: auto 157 | 158 | tr 159 | border-top 1px solid #dfe2e5 160 | &:nth-child(2n) 161 | background-color #f6f8fa 162 | 163 | th, td 164 | border 1px solid #dfe2e5 165 | padding .6em 1em 166 | 167 | .theme-container 168 | &.sidebar-open 169 | .sidebar-mask 170 | display: block 171 | &.no-navbar 172 | .content:not(.custom) > h1, h2, h3, h4, h5, h6 173 | margin-top 1.5rem 174 | padding-top 0 175 | .sidebar 176 | top 0 177 | 178 | 179 | @media (min-width: ($MQMobile + 1px)) 180 | .theme-container.no-sidebar 181 | .sidebar 182 | display none 183 | .page 184 | padding-left 0 185 | 186 | @require 'mobile.styl' 187 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/toc.styl: -------------------------------------------------------------------------------- 1 | .table-of-contents 2 | .badge 3 | vertical-align middle 4 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/wrapper.styl: -------------------------------------------------------------------------------- 1 | $wrapper 2 | max-width $contentWidth 3 | margin 0 auto 4 | padding 2rem 2.5rem 5 | @media (max-width: $MQNarrow) 6 | padding 2rem 7 | @media (max-width: $MQMobileNarrow) 8 | padding 1.5rem 9 | 10 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/util/index.js: -------------------------------------------------------------------------------- 1 | export const hashRE = /#.*$/ 2 | export const extRE = /\.(md|html)$/ 3 | export const endingSlashRE = /\/$/ 4 | export const outboundRE = /^(https?:|mailto:|tel:)/ 5 | 6 | export function normalize (path) { 7 | return decodeURI(path) 8 | .replace(hashRE, '') 9 | .replace(extRE, '') 10 | } 11 | 12 | export function getHash (path) { 13 | const match = path.match(hashRE) 14 | if (match) { 15 | return match[0] 16 | } 17 | } 18 | 19 | export function isExternal (path) { 20 | return outboundRE.test(path) 21 | } 22 | 23 | export function isMailto (path) { 24 | return /^mailto:/.test(path) 25 | } 26 | 27 | export function isTel (path) { 28 | return /^tel:/.test(path) 29 | } 30 | 31 | export function ensureExt (path) { 32 | if (isExternal(path)) { 33 | return path 34 | } 35 | const hashMatch = path.match(hashRE) 36 | const hash = hashMatch ? hashMatch[0] : '' 37 | const normalized = normalize(path) 38 | 39 | if (endingSlashRE.test(normalized)) { 40 | return path 41 | } 42 | return normalized + '.html' + hash 43 | } 44 | 45 | export function isActive (route, path) { 46 | const routeHash = route.hash 47 | const linkHash = getHash(path) 48 | if (linkHash && routeHash !== linkHash) { 49 | return false 50 | } 51 | const routePath = normalize(route.path) 52 | const pagePath = normalize(path) 53 | return routePath === pagePath 54 | } 55 | 56 | export function resolvePage (pages, rawPath, base) { 57 | if (base) { 58 | rawPath = resolvePath(rawPath, base) 59 | } 60 | const path = normalize(rawPath) 61 | for (let i = 0; i < pages.length; i++) { 62 | if (normalize(pages[i].regularPath) === path) { 63 | return Object.assign({}, pages[i], { 64 | type: 'page', 65 | path: ensureExt(pages[i].path) 66 | }) 67 | } 68 | } 69 | console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`) 70 | return {} 71 | } 72 | 73 | function resolvePath (relative, base, append) { 74 | const firstChar = relative.charAt(0) 75 | if (firstChar === '/') { 76 | return relative 77 | } 78 | 79 | if (firstChar === '?' || firstChar === '#') { 80 | return base + relative 81 | } 82 | 83 | const stack = base.split('/') 84 | 85 | // remove trailing segment if: 86 | // - not appending 87 | // - appending to trailing slash (last segment is empty) 88 | if (!append || !stack[stack.length - 1]) { 89 | stack.pop() 90 | } 91 | 92 | // resolve relative path 93 | const segments = relative.replace(/^\//, '').split('/') 94 | for (let i = 0; i < segments.length; i++) { 95 | const segment = segments[i] 96 | if (segment === '..') { 97 | stack.pop() 98 | } else if (segment !== '.') { 99 | stack.push(segment) 100 | } 101 | } 102 | 103 | // ensure leading slash 104 | if (stack[0] !== '') { 105 | stack.unshift('') 106 | } 107 | 108 | return stack.join('/') 109 | } 110 | 111 | /** 112 | * @param { Page } page 113 | * @param { string } regularPath 114 | * @param { SiteData } site 115 | * @param { string } localePath 116 | * @returns { SidebarGroup } 117 | */ 118 | export function resolveSidebarItems (page, regularPath, site, localePath) { 119 | const { pages, themeConfig } = site 120 | 121 | const localeConfig = localePath && themeConfig.locales 122 | ? themeConfig.locales[localePath] || themeConfig 123 | : themeConfig 124 | 125 | const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar 126 | if (pageSidebarConfig === 'auto') { 127 | return resolveHeaders(page) 128 | } 129 | 130 | const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar 131 | if (!sidebarConfig) { 132 | return [] 133 | } else { 134 | const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig) 135 | return config 136 | ? config.map(item => resolveItem(item, pages, base)) 137 | : [] 138 | } 139 | } 140 | 141 | /** 142 | * @param { Page } page 143 | * @returns { SidebarGroup } 144 | */ 145 | function resolveHeaders (page) { 146 | const headers = groupHeaders(page.headers || []) 147 | return [{ 148 | type: 'group', 149 | collapsable: false, 150 | title: page.title, 151 | path: null, 152 | children: headers.map(h => ({ 153 | type: 'auto', 154 | title: h.title, 155 | basePath: page.path, 156 | path: page.path + '#' + h.slug, 157 | children: h.children || [] 158 | })) 159 | }] 160 | } 161 | 162 | export function groupHeaders (headers) { 163 | // group h3s under h2 164 | headers = headers.map(h => Object.assign({}, h)) 165 | let lastH2 166 | headers.forEach(h => { 167 | if (h.level === 2) { 168 | lastH2 = h 169 | } else if (lastH2) { 170 | (lastH2.children || (lastH2.children = [])).push(h) 171 | } 172 | }) 173 | return headers.filter(h => h.level === 2) 174 | } 175 | 176 | export function resolveNavLinkItem (linkItem) { 177 | return Object.assign(linkItem, { 178 | type: linkItem.items && linkItem.items.length ? 'links' : 'link' 179 | }) 180 | } 181 | 182 | /** 183 | * @param { Route } route 184 | * @param { Array | Array | [link: string]: SidebarConfig } config 185 | * @returns { base: string, config: SidebarConfig } 186 | */ 187 | export function resolveMatchingConfig (regularPath, config) { 188 | if (Array.isArray(config)) { 189 | return { 190 | base: '/', 191 | config: config 192 | } 193 | } 194 | for (const base in config) { 195 | if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) { 196 | return { 197 | base, 198 | config: config[base] 199 | } 200 | } 201 | } 202 | return {} 203 | } 204 | 205 | function ensureEndingSlash (path) { 206 | return /(\.html|\/)$/.test(path) 207 | ? path 208 | : path + '/' 209 | } 210 | 211 | function resolveItem (item, pages, base, groupDepth = 1) { 212 | if (typeof item === 'string') { 213 | return resolvePage(pages, item, base) 214 | } else if (Array.isArray(item)) { 215 | return Object.assign(resolvePage(pages, item[0], base), { 216 | title: item[1] 217 | }) 218 | } else { 219 | if (groupDepth > 3) { 220 | console.error( 221 | '[vuepress] detected a too deep nested sidebar group.' 222 | ) 223 | } 224 | const children = item.children || [] 225 | if (children.length === 0 && item.path) { 226 | return Object.assign(resolvePage(pages, item.path, base), { 227 | title: item.title 228 | }) 229 | } 230 | return { 231 | type: 'group', 232 | path: item.path, 233 | title: item.title, 234 | sidebarDepth: item.sidebarDepth, 235 | children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)), 236 | collapsable: item.collapsable !== false 237 | } 238 | } 239 | } 240 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /kursorjs.gif 4 | heroText: Kursorjs 5 | tagline: Cursor style with javascript and css 6 | actionText: Get Started → 7 | actionLink: /guide/ 8 | features: 9 | - title: Simple to implement 10 | details: Only with a few lines of code are you going to have a beautiful cursor. 11 | - title: In trend 12 | details: Create great websites and with a different trend, surprise!. 13 | - title: No dependencies 14 | details: Kursor is created with only javascript so you do not need to install any additional dependencies. 15 | footer: MIT Licensed | Copyright © 2019-present Lusaxweb 16 | --- 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Kursor is a javascript library to implement a cursor (mouse) on the website, it is very simple to implement and with many types of themes to choose from 4 | 5 | ## Example 6 | 7 | The cursor (mouse) that you are seeing right now in this site is a perfect example of what you can achieve with kursor, and most importantly with few lines of code and very easy 8 | 9 | -------------------------------------------------------------------------------- /docs/guide/configuration.md: -------------------------------------------------------------------------------- 1 | # configuration 2 | 3 | Kursor.js is a very simple library to configure, when instantiating the global variable `kursor` as a parameter we pass the options to create the cursor (mouse) 4 | 5 | ## type 6 | 7 | Change the theme of the kursor, as value is of type `Number` and at the moment there are only 5 types of cursors 8 | 9 | ```js 10 | new Kursor({ 11 | type: 1 /* 1 | 2 | 3 | 4 | 5 */ 12 | }) 13 | ``` 14 | 15 | ## el 16 | 17 | By default Kursor is implemented inside the ``, but if you only need the cursor(mouse) inside a specific element you can use the property (**el**) 18 | 19 | As a value you need a `String` with the name of the **id** or the **class** an example would be something like this 20 | 21 | ```html 22 |
23 | ``` 24 | 25 | ```js 26 | new Kursor({ 27 | el: '.myBox' 28 | }) 29 | ``` 30 | 31 | ## removeDefaultCursor 32 | 33 | Remove the user's default cursor with exceptions in the input elements and some others 34 | 35 | ```js 36 | new Kursor({ 37 | removeDefaultCursor: true 38 | }) 39 | ``` 40 | 41 | ## color 42 | 43 | Change the color of the theme to the one provided, changing all its modalities to that color as (`hover`,` mousedown`) 44 | 45 | :::warning 46 | Solo estan permitidos los colores **RGB** y **HEX** por ejemplo 47 | 48 | - `rgb(0,0,0)` 49 | - `#fff` 50 | ::: 51 | 52 | ```js 53 | new Kursor({ 54 | color: 'rgba(200,145,54)' 55 | }) 56 | 57 | // OR 58 | 59 | new Kursor({ 60 | color: '#476582' 61 | }) 62 | ``` 63 | 64 | -------------------------------------------------------------------------------- /docs/guide/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | The easiest way to try out Kursor.js is using the [JSFiddle Hello World example](https://jsfiddle.net/luisdanielroviracontreras/01xsk2fq/9/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Kursor with: 4 | 5 | ```html 6 | 7 | 8 | 9 | 10 | 11 | 12 | Document 13 | 14 | 15 | 16 | 17 |
18 |

hello Kursor.js

19 |
20 | 21 | 22 | 27 | 28 | ``` 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/guide/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ## CDN 4 | 5 | For prototyping or learning purposes, you can use the latest version with: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions: 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | You can browse the source of the NPM package at [https://www.jsdelivr.com/package/npm/kursor](https://www.jsdelivr.com/package/npm/kursor). 18 | 19 | Kursor is also available on [unpkg](https://unpkg.com/kursor) and cdnjs (cdnjs takes some time to sync so the latest release may not be available yet). 20 | 21 | ## NPM 22 | 23 | NPM is the recommended installation method when building large scale applications with Kursor. It pairs nicely with module bundlers such as Webpack or Browserify 24 | 25 | ```sh 26 | # latest stable 27 | $ npm install kursor 28 | ``` 29 | 30 | ## Explanation of Different Builds 31 | 32 | In the dist/ directory of the NPM package you will find many different builds of kursor.js. Here’s an overview of the difference between them: 33 | 34 | | | UMD | 35 | | --- | --- | 36 | | **Full** | kursor.js | 37 | | **Full (production)** | kursor.min.js | 38 | 39 | ## Terms 40 | 41 | - **Full**: builds that contain both the compiler and the runtime. 42 | - [UMD](https://github.com/umdjs/umd): UMD builds can be used directly in the browser via a ` 67 | 68 | 101 | 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kursor", 3 | "version": "0.1.6", 4 | "description": "Cursor style", 5 | "main": "dist/kursor.js", 6 | "scripts": { 7 | "build": "webpack --env dev && webpack --env build", 8 | "dev": "webpack --progress --colors --watch --env dev", 9 | "test": "mocha --require babel-register --colors ./test/*.spec.js", 10 | "test:watch": "mocha --require babel-register --colors -w ./test/*.spec.js", 11 | "test:cover": "cross-env NODE_ENV=test nyc mocha --require babel-register --colors test/*.js", 12 | "repl": "node -i -e \"$(< ./dist/kursor.js)\"", 13 | "v": "npm version patch", 14 | "p": "npm publish", 15 | "deploy": "npm run build & git add . & git commit -m 'deploy' & npm run v & npm run p && git push && npm run docs:deploy", 16 | "postinstall": "node postinstall.js", 17 | "docs:dev": "vuepress dev docs", 18 | "docs:build": "vuepress build docs", 19 | "docs:deploy": "sh scripts/deploy.sh" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/lusaxweb/kursor.git" 24 | }, 25 | "keywords": [ 26 | "javascript", 27 | "js", 28 | "html", 29 | "css", 30 | "stylus", 31 | "library", 32 | "commonjs" 33 | ], 34 | "author": "Luis Rovira", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/lusaxweb/kursor/issues" 38 | }, 39 | "homepage": "https://lusaxweb.github.io/kursor", 40 | "devDependencies": { 41 | "@babel/cli": "^7.0.0-beta.51", 42 | "@babel/core": "^7.0.0-beta.51", 43 | "@babel/preset-env": "^7.0.0-beta.51", 44 | "babel-eslint": "^8.0.3", 45 | "babel-loader": "^8.0.0-beta.4", 46 | "babel-plugin-add-module-exports": "^0.2.1", 47 | "babel-plugin-istanbul": "^5.1.0", 48 | "babel-preset-env": "^7.0.0-beta.3", 49 | "babel-register": "^7.0.0-beta.3", 50 | "chai": "^4.1.2", 51 | "cross-env": "^5.2.0", 52 | "css-loader": "^2.1.1", 53 | "eslint": "^5.0.1", 54 | "eslint-loader": "^2.0.0", 55 | "jsdom": "11.11.0", 56 | "jsdom-global": "3.0.2", 57 | "mini-css-extract-plugin": "^0.6.0", 58 | "mocha": "^4.0.1", 59 | "nyc": "^13.1.0", 60 | "optimize-css-assets-webpack-plugin": "^5.0.1", 61 | "style-loader": "^0.23.1", 62 | "stylus": "^0.54.5", 63 | "stylus-loader": "^3.0.2", 64 | "terser-webpack-plugin": "^1.2.3", 65 | "uglifyjs-webpack-plugin": "^1.2.7", 66 | "vuepress": "^1.0.0-alpha.48", 67 | "webpack": "^4.12.2", 68 | "webpack-cli": "^3.0.8", 69 | "yargs": "^10.0.3" 70 | }, 71 | "nyc": { 72 | "sourceMap": false, 73 | "instrument": false 74 | }, 75 | "dependencies": { 76 | "chalk": "^2.4.2", 77 | "extract-text-webpack-plugin": "^3.0.2", 78 | "vuepress-plugin-container": "^2.0.1", 79 | "vuepress-plugin-smooth-scroll": "0.0.3" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /postinstall.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const chalk = require('chalk') 3 | const isWin32 = process.platform === 'win32' 4 | 5 | const print = (color = null) => (str = '') => { 6 | const terminalCols = retrieveCols() 7 | const strLength = str.replace(/\u001b\[[0-9]{2}m/g, '').length 8 | const leftPaddingLength = Math.floor((terminalCols - strLength) / 2) 9 | const leftPadding = ' '.repeat(Math.max(leftPaddingLength, 0)) 10 | 11 | if (color) { 12 | str = chalk[color](str) 13 | } 14 | 15 | console.log(leftPadding, str) 16 | } 17 | 18 | const retrieveCols = (() => { 19 | let result = false 20 | 21 | return () => { 22 | if (result) { 23 | return result 24 | } 25 | const defaultCols = 80 26 | 27 | try { 28 | const terminalCols = execSync(`tput cols`, { stdio: ['pipe', 'pipe', 'ignore'] }) 29 | 30 | result = parseInt(terminalCols.toString()) || defaultCols 31 | } catch (e) { 32 | result = defaultCols 33 | } 34 | return result 35 | } 36 | })() 37 | 38 | const emoji = emoji => process.stdout.isTTY && !isWin32 ? emoji : '' 39 | 40 | const dim = print('dim') 41 | const yellow = print('yellow') 42 | const emptyLine = print() 43 | 44 | emptyLine() 45 | emptyLine() 46 | yellow(chalk.bold(`Thanks for installing kursorjs ${emoji('🙏')}`)) 47 | emptyLine() 48 | dim('Please consider donating to our Patreon') 49 | dim('to help us maintain this package.') 50 | emptyLine() 51 | print()(`${chalk.bold(`${emoji('👉 ')} Donate:`)} ${'https://www.patreon.com/bePatron?c=1567892'}`) 52 | emptyLine() 53 | emptyLine() 54 | emptyLine() 55 | -------------------------------------------------------------------------------- /scripts/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | npm run docs:build 8 | 9 | # navigate into the build output directory 10 | cd docs/.vuepress/dist 11 | 12 | # if you are deploying to a custom domain 13 | # echo 'www.example.com' > CNAME 14 | 15 | git init 16 | git add -A 17 | git commit -m 'deploy' 18 | 19 | # if you are deploying to https://.github.io 20 | # git push -f git@github.com:/.github.io.git master 21 | 22 | # if you are deploying to https://.github.io/ 23 | git push -f git@github.com:lusaxweb/Kursor.git master:gh-pages 24 | 25 | cd - 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './styles/index.styl'; 2 | import { setColor } from './utils' 3 | var key = 1 4 | 5 | export default class kursor { 6 | 7 | constructor(props = {}) { 8 | let _props = { 9 | type: 1, 10 | ...props 11 | } 12 | 13 | this.props = _props 14 | this.key = key === 1 ? '' : key 15 | key++ 16 | 17 | this.render() 18 | 19 | this.hovers() 20 | 21 | this.mousemove() 22 | 23 | this.down() 24 | } 25 | 26 | color(colorx) { 27 | setColor('color', colorx, this.kursor) 28 | setColor('color', colorx, this.kursorChild) 29 | } 30 | 31 | hidden(isHidden = true) { 32 | if (isHidden) { 33 | this.addClass('kursor--hidden') 34 | this.addClass('kursorChild--hidden', true) 35 | } else { 36 | this.removeClass('kursor--hidden') 37 | this.removeClass('kursorChild--hidden', true) 38 | } 39 | } 40 | 41 | createWrapper() { 42 | let wrapper = document.createElement('div') 43 | 44 | wrapper.setAttribute('id', 'kursorWrapper') 45 | document.querySelector(this.props.el).insertBefore(wrapper, document.querySelector(this.props.el).firstChild) 46 | } 47 | 48 | render() { 49 | if (this.mobileAndTabletcheck()) { 50 | return 51 | } 52 | this.createCursor('kursorChild') 53 | this.createCursor('kursor') 54 | 55 | if (this.props.hasOwnProperty('removeDefaultCursor')) { 56 | if (this.props.removeDefaultCursor) { 57 | document.body.classList.add('notCursor') 58 | } 59 | } 60 | 61 | if (this.props.hasOwnProperty('type')) { 62 | this.addClass(`kursor--${this.props.type}`) 63 | } 64 | } 65 | 66 | down() { 67 | document.addEventListener('mousedown', (e) => { 68 | this.addClass('kursor--down') 69 | }) 70 | document.addEventListener('mouseup', (e) => { 71 | this.removeClass('kursor--down') 72 | }) 73 | } 74 | 75 | mobileAndTabletcheck() { 76 | var check = false; 77 | 78 | (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); 79 | 80 | return check; 81 | } 82 | 83 | mousemove() { 84 | let hasEl = this.props.hasOwnProperty('el') 85 | 86 | let el = window 87 | 88 | if (hasEl) { 89 | el = document.querySelector(this.props.el) 90 | } 91 | el.addEventListener('mousemove',(e) => { 92 | let cursor = document.querySelector('.kursor' + this.key) 93 | let cursorChild = document.querySelector('.kursorChild' + this.key) 94 | 95 | if (hasEl) { 96 | let notEl = e.target !== document.querySelector(this.props.el) 97 | let parentEl = e.target.closest(this.props.el) 98 | 99 | if (notEl) { 100 | 101 | cursor = parentEl.querySelector('.kursor' + this.key) 102 | cursorChild = parentEl.querySelector('.kursorChild' + this.key) 103 | 104 | } else { 105 | 106 | cursor = e.target.querySelector('.kursor' + this.key) 107 | cursorChild = e.target.querySelector('.kursorChild' + this.key) 108 | 109 | } 110 | 111 | cursor.style.left = `${notEl ? e.offsetX + e.target.offsetLeft : e.offsetX }px` 112 | cursor.style.top = `${notEl ? e.offsetY + e.target.offsetTop : e.offsetY }px` 113 | 114 | cursorChild.style.left = `${notEl ? e.offsetX + e.target.offsetLeft : e.offsetX }px` 115 | cursorChild.style.top = `${notEl ? e.offsetY + e.target.offsetTop : e.offsetY }px` 116 | 117 | } else { 118 | 119 | cursor.style.left = `${e.x}px` 120 | cursor.style.top = `${e.y}px` 121 | 122 | cursorChild.style.left = `${e.x}px` 123 | cursorChild.style.top = `${e.y}px` 124 | 125 | } 126 | 127 | }) 128 | 129 | let doc = document 130 | 131 | if (hasEl) { 132 | doc = document.querySelector(this.props.el) 133 | } 134 | 135 | doc.addEventListener('mouseenter',(e) => { 136 | this.removeClass('kursor--hidden') 137 | this.removeClass('kursorChild--hidden', true) 138 | }) 139 | 140 | doc.addEventListener('mouseleave',(e) => { 141 | this.addClass('kursor--hidden') 142 | this.addClass('kursorChild--hidden', true) 143 | }) 144 | } 145 | 146 | hovers() { 147 | let hovers = document.querySelectorAll('.k-hover' + this.key) 148 | 149 | console.log(hovers) 150 | 151 | hovers.forEach((item) => { 152 | item.addEventListener('mouseenter',() => { 153 | this.addClass('--hover') 154 | }) 155 | item.addEventListener('mouseleave', () => { 156 | this.removeClass('--hover') 157 | }) 158 | }) 159 | } 160 | 161 | createCursor(name) { 162 | this[name] = document.createElement('div') 163 | this[name].setAttribute('class', name) 164 | this[name].classList.add(name + this.key) 165 | this[name].setAttribute('style', '--k-color: 0,0,0') 166 | 167 | if (this.props.hasOwnProperty('el')) { 168 | this[name].classList.add(`${name}--hidden`) 169 | this[name].classList.add('kursor--absolute') 170 | document.querySelector(this.props.el).insertBefore(this[name], document.querySelector(this.props.el).firstChild) 171 | } else { 172 | document.body.insertBefore(this[name], document.body.firstChild) 173 | } 174 | 175 | if (this.props.hasOwnProperty('color')) { 176 | setColor('color', this.props.color, this[name]) 177 | } 178 | } 179 | 180 | addClass(classx, child = false) { 181 | document.querySelector(child ? '.kursorChild' + this.key : '.kursor' + this.key).classList.add(classx) 182 | } 183 | removeClass(classx, child = false) { 184 | document.querySelector(child ? '.kursorChild' + this.key : '.kursor' + this.key).classList.remove(classx) 185 | } 186 | 187 | get name() { 188 | return this._name; 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /src/styles/index.styl: -------------------------------------------------------------------------------- 1 | @import './mixins' 2 | 3 | .notCursor 4 | cursor: none 5 | * 6 | cursor: none 7 | 8 | #kursorWrapper 9 | position fixed 10 | z-index 99 11 | overflow hidden 12 | pointer-events none 13 | top 0 14 | left 0 15 | width 100% 16 | height 100% 17 | overflow hidden 18 | 19 | // --k-color: 0,0,0 20 | div[class*='kursor'] 21 | position fixed 22 | pointer-events: none 23 | transform: translate(-50%, -50%) 24 | z-index 10000 25 | &.kursor 26 | &--hidden 27 | opacity 0 28 | width: 0px 29 | height 0px 30 | &--1 31 | left 0px 32 | top 0px 33 | width: 25px 34 | height 25px 35 | border-radius: 50% 36 | border 2px solid k-color(color) 37 | transition: all .2s ease, top .18s ease-out, left .18s ease-out 38 | + .kursorChild 39 | display: block 40 | width: 4px 41 | height 4px 42 | background: k-color(color) 43 | border-radius: 50% 44 | transition: all .2s ease, top .0s ease-out, left .0s ease-out 45 | &.--hover 46 | width: 40px 47 | height 40px 48 | border 2px solid k-color(color, 0) 49 | background: k-color(color, .1) 50 | + .kursorChild 51 | background: k-color(color, .3) 52 | &.kursor--down 53 | width: 20px 54 | height 20px 55 | + .kursorChild 56 | &:after 57 | width: 40px !important 58 | height 40px !important 59 | opacity 0 60 | border 1px solid 61 | border-radius: 50% 62 | border-color: k-color(color) 63 | transition: all .4s ease 64 | &--2 65 | left 0px 66 | top 0px 67 | width: 20px 68 | height 20px 69 | border-radius: 50% 70 | background: k-color(color) 71 | transition: all .2s ease, top .1s ease-out, left .1s ease-out 72 | + .kursorChild 73 | display: block 74 | width: 4px 75 | height 4px 76 | background: k-color(color) 77 | border-radius: 50% 78 | transition: all .2s ease, top .2s ease-out, left .2s ease-out 79 | &.--hover 80 | width: 40px 81 | height 40px 82 | background: k-color(color, .1) 83 | + .kursorChild 84 | background: k-color(color, .3) 85 | &.kursor--down 86 | width: 10px 87 | height 10px 88 | + .kursorChild 89 | &:after 90 | width: 40px !important 91 | height 40px !important 92 | opacity 0 93 | border 1px solid 94 | border-radius: 50% 95 | border-color: k-color(color) 96 | transition: all .4s ease 97 | 98 | &--3 99 | left 0px 100 | top 0px 101 | width: 20px 102 | height 20px 103 | border 1px solid k-color(color) 104 | transition: all .2s ease, top .05s ease-out, left .05s ease-out 105 | + .kursorChild 106 | display: block 107 | width: 4px 108 | height 4px 109 | background: k-color(color) 110 | transition: all .2s ease, top .2s ease-out, left .2s ease-out 111 | &.--hover 112 | width: 40px 113 | height 40px 114 | background: k-color(color, .1) 115 | border 1px solid k-color(color, 0) 116 | + .kursorChild 117 | background: k-color(color, .3) 118 | &.kursor--down 119 | width: 5px 120 | height 5px 121 | border 1px solid k-color(color, 0) 122 | + .kursorChild 123 | width: 10px 124 | height 10px 125 | &:after 126 | width: 40px !important 127 | height 40px !important 128 | opacity 0 129 | border 1px solid 130 | border-color: k-color(color) 131 | transition: all .4s ease 132 | 133 | &--4 134 | left 0px 135 | top 0px 136 | width: 50px 137 | height 50px 138 | border 1px solid k-color(color, .3) 139 | border-radius: 50% 140 | transition: all .2s ease, top .2s ease-out, left .2s ease-out 141 | + .kursorChild 142 | display: block 143 | width: 6px 144 | height 6px 145 | background: k-color(color) 146 | border-radius: 50% 147 | transition: all .2s ease, top .03s ease-out, left .03s ease-out 148 | &.--hover 149 | width: 30px 150 | height 30px 151 | background: k-color(color, .1) 152 | border 3px solid k-color(color, 0) 153 | + .kursorChild 154 | width: 25px 155 | height 25px 156 | background: k-color(color, .1) 157 | &.kursor--down 158 | width: 5px 159 | height 5px 160 | + .kursorChild 161 | width: 10px 162 | height 10px 163 | &:after 164 | width: 40px !important 165 | height 40px !important 166 | opacity 0 167 | border-radius: 50% 168 | border 1px solid 169 | border-color: k-color(color) 170 | transition: all .4s ease 171 | 172 | &--5 173 | left 0px 174 | top 0px 175 | width: 10px 176 | height 10px 177 | border 1px solid k-color(color, .5) 178 | border-radius: 50% 179 | transition: all .2s ease, top .2s ease-out, left .2s ease-out 180 | &.--hover 181 | width: 26px 182 | height 26px 183 | background: k-color(color, .1) 184 | border 3px solid k-color(color, 0) 185 | &.kursor--down 186 | width: 15px 187 | height 15px 188 | 189 | 190 | div[class*='kursorChild'] 191 | position fixed 192 | pointer-events: none 193 | transform: translate(-50%, -50%) 194 | display: none 195 | overflow hidden 196 | &.kursorChild 197 | &[class*='--hidden'] 198 | opacity 0 199 | width: 0px 200 | height 0px 201 | 202 | &:after 203 | content: '' 204 | pointer-events: none 205 | width: 0px 206 | height 0px 207 | position absolute 208 | left 50% 209 | top 50% 210 | 211 | opacity 1 212 | border 0px solid k-color(color, .5) 213 | transform: translate(-50%, -50%) 214 | 215 | .kursor--absolute 216 | position absolute !important 217 | z-index 2000 218 | 219 | 220 | // responsive 221 | @media screen and (max-width: 768px) 222 | .notCursor * 223 | cursor auto 224 | div[class*='kursor'] 225 | display: none !important 226 | div[class*='kursorChild'] 227 | display: none !important 228 | @media screen and (max-width: 812px) and (max-height: 430px) and (orientation: landscape) 229 | div[class*='kursor'] 230 | display: none !important 231 | div[class*='kursorChild'] 232 | display: none !important 233 | .notCursor * 234 | cursor auto 235 | -------------------------------------------------------------------------------- /src/styles/mixins.styl: -------------------------------------------------------------------------------- 1 | // get color var css 2 | k-color(colorx, alpha = 1) 3 | unquote("rgba(var(--k-"+colorx+"), "+alpha+")") 4 | 5 | k-var(var) 6 | unquote("var(--k-"+var+")") 7 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | const setVar = (propertyName, value, el) => { 2 | if (!el) { 3 | document.documentElement.style.setProperty(`--k-${propertyName}`, value) 4 | } else { 5 | el.style.setProperty(`--k-${propertyName}`, value) 6 | } 7 | } 8 | 9 | const setColor = (colorName, color, el) => { 10 | function hexToRgb(hex) { 11 | var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 12 | 13 | hex = hex.replace(shorthandRegex, function (m, r, g, b) { 14 | return r + r + g + g + b + b 15 | }) 16 | 17 | let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 18 | 19 | return result ? { 20 | r: parseInt(result[1], 16), 21 | g: parseInt(result[2], 16), 22 | b: parseInt(result[3], 16) 23 | } : null 24 | } 25 | 26 | let isRGB = /^(rgb|rgba)/.test(color) 27 | let isHEX = /^(#)/.test(color) 28 | let newColor 29 | 30 | if (isRGB) { 31 | let arrayColor = color.replace(/[rgba()]/g, '').split(',') 32 | 33 | newColor = `${arrayColor[0]},${arrayColor[1]},${arrayColor[2]}` 34 | setVar(colorName, newColor, el) 35 | } else if (isHEX) { 36 | let rgb = hexToRgb(color) 37 | 38 | newColor = `${rgb.r},${rgb.g},${rgb.b}` 39 | setVar(colorName, newColor, el) 40 | } 41 | } 42 | 43 | export { setColor } 44 | -------------------------------------------------------------------------------- /test/index.spec.js: -------------------------------------------------------------------------------- 1 | /* global describe, it, before */ 2 | 3 | import chai from 'chai'; 4 | import kursor from '../dist/kursor.js'; 5 | 6 | chai.expect(); 7 | 8 | // const expect = chai.expect; 9 | 10 | // let lib; 11 | 12 | describe('Given an instance of my Cat library', () => { 13 | before(() => { 14 | // lib = new Cat(); 15 | // kursor 16 | console.log(kursor) 17 | }); 18 | // describe('when I need the name', () => { 19 | // it('should return the name', () => { 20 | // expect(lib.name).to.be.equal('Cat'); 21 | // }); 22 | // }); 23 | }); 24 | 25 | // describe('Given an instance of my Dog library', () => { 26 | // before(() => { 27 | // lib = new Dog(); 28 | // }); 29 | // describe('when I need the name', () => { 30 | // it('should return the name', () => { 31 | // expect(lib.name).to.be.equal('Dog'); 32 | // }); 33 | // }); 34 | // }); 35 | -------------------------------------------------------------------------------- /test/mocha.opts: -------------------------------------------------------------------------------- 1 | -r jsdom-global/register -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* global __dirname, require, module*/ 2 | 3 | const webpack = require('webpack'); 4 | const path = require('path'); 5 | const env = require('yargs').argv.env; // use --env with webpack 2 6 | const pkg = require('./package.json'); 7 | 8 | // const TerserJSPlugin = require('terser-webpack-plugin'); 9 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 10 | // const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 11 | 12 | let libraryName = pkg.name; 13 | 14 | let outputFile, mode; 15 | 16 | if (env === 'build') { 17 | mode = 'production'; 18 | outputFile = libraryName + '.min.js'; 19 | } else { 20 | mode = 'development'; 21 | outputFile = libraryName + '.js'; 22 | } 23 | 24 | const resolve = file => path.resolve(__dirname, file); 25 | 26 | module.exports = { 27 | mode: mode, 28 | entry: __dirname + '/src/index.js', 29 | output: { 30 | path: resolve('./dist'), 31 | publicPath: '/dist/', 32 | filename: outputFile, 33 | library: libraryName, 34 | libraryTarget: 'umd', 35 | umdNamedDefine: true, 36 | globalObject: "typeof self !== 'undefined' ? self : this" 37 | }, 38 | plugins: [ 39 | new MiniCssExtractPlugin({ 40 | filename: libraryName + '.css' 41 | }), 42 | new webpack.BannerPlugin({ 43 | banner: `/*! 44 | * Kursor v${pkg.version} 45 | * Forged by Luis Daniel Rovira 46 | * Released under the MIT License. 47 | */`, 48 | raw: true, 49 | entryOnly: true 50 | }) 51 | ], 52 | 53 | module: { 54 | rules: [ 55 | { 56 | test: /(\.jsx|\.js)$/, 57 | loader: 'babel-loader', 58 | exclude: /(node_modules|bower_components)/ 59 | }, 60 | { 61 | test: /(\.jsx|\.js)$/, 62 | loader: 'eslint-loader', 63 | exclude: /node_modules/ 64 | }, 65 | { 66 | test: /\.styl(us)?$/, 67 | use: [ 68 | MiniCssExtractPlugin.loader, 69 | 'css-loader', 70 | 'stylus-loader' 71 | ] 72 | } 73 | ] 74 | }, 75 | resolve: { 76 | modules: [path.resolve('./node_modules'), path.resolve('./src')], 77 | extensions: ['*', '.js', '.json'] 78 | } 79 | }; 80 | --------------------------------------------------------------------------------