├── .babelrc ├── .bowerrc ├── .csscomb.json ├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .release.json ├── .stylelintrc.json ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── config.js ├── dist ├── css │ ├── asRange.css │ └── asRange.min.css ├── jquery-asRange.es.js ├── jquery-asRange.js ├── jquery-asRange.min.js └── jquery-asRange.min.js.map ├── examples ├── css │ ├── asRange.css │ ├── bootstrap.min.css │ ├── main.css │ └── prism.css ├── image │ └── scale.png ├── index.html └── js │ ├── bootstrap.min.js │ ├── jquery.js │ ├── jquery.mousewheel.js │ ├── jquery.toc.js │ └── prism.js ├── gulp ├── tasks │ ├── archive.js │ ├── assets.js │ ├── browser.js │ ├── clean.js │ ├── deploy.js │ ├── lint-scripts.js │ ├── lint-styles.js │ ├── release.js │ ├── scripts.js │ ├── styles.js │ └── test.js └── util │ ├── getFolders.js │ ├── getSrcFiles.js │ └── handleErrors.js ├── gulpfile.babel.js ├── karma.conf.js ├── manifest.json ├── package-lock.json ├── package.json └── src ├── asRange.js ├── defaults.js ├── info.js ├── keyboard.js ├── main.js ├── pointer.js ├── scale.js ├── scss └── asRange.scss ├── selected.js ├── tip.js └── util.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "remove-empty-rulesets": true, 3 | "always-semicolon": true, 4 | "color-case": "lower", 5 | "block-indent": " ", 6 | "color-shorthand": true, 7 | "element-case": "lower", 8 | "eof-newline": true, 9 | "leading-zero": false, 10 | "quotes": "double", 11 | "space-before-colon": "", 12 | "space-after-colon": " ", 13 | "space-before-combinator": " ", 14 | "space-after-combinator": " ", 15 | "space-between-declarations": "\n", 16 | "space-before-opening-brace": " ", 17 | "space-after-opening-brace": "\n", 18 | "space-after-selector-delimiter": " ", 19 | "space-before-selector-delimiter": "", 20 | "space-before-closing-brace": "\n", 21 | "strip-spaces": true, 22 | "tab-size": true, 23 | "unitless-zero": true, 24 | "vendor-prefix-align": false, 25 | "sort-order": [ 26 | "position", 27 | "top", 28 | "right", 29 | "bottom", 30 | "left", 31 | "z-index", 32 | "-moz-box-sizing", 33 | "-webkit-box-sizing", 34 | "box-sizing", 35 | "display", 36 | "flex", 37 | "flex-align", 38 | "flex-basis", 39 | "flex-direction", 40 | "flex-flow", 41 | "flex-grow", 42 | "flex-order", 43 | "flex-pack", 44 | "float", 45 | "width", 46 | "min-width", 47 | "max-width", 48 | "height", 49 | "min-height", 50 | "max-height", 51 | "padding", 52 | "padding-top", 53 | "padding-right", 54 | "padding-bottom", 55 | "padding-left", 56 | "margin", 57 | "margin-top", 58 | "margin-right", 59 | "margin-bottom", 60 | "margin-left", 61 | "overflow", 62 | "overflow-x", 63 | "overflow-y", 64 | "-webkit-overflow-scrolling", 65 | "-ms-overflow-x", 66 | "-ms-overflow-y", 67 | "-ms-overflow-style", 68 | "clip", 69 | "clear", 70 | "font", 71 | "font-family", 72 | "font-size", 73 | "font-style", 74 | "font-weight", 75 | "font-variant", 76 | "font-size-adjust", 77 | "font-stretch", 78 | "font-effect", 79 | "font-emphasize", 80 | "font-emphasize-position", 81 | "font-emphasize-style", 82 | "font-smooth", 83 | "-webkit-hyphens", 84 | "-moz-hyphens", 85 | "hyphens", 86 | "line-height", 87 | "color", 88 | "text-align", 89 | "-webkit-text-align-last", 90 | "-moz-text-align-last", 91 | "-ms-text-align-last", 92 | "text-align-last", 93 | "text-emphasis", 94 | "text-emphasis-color", 95 | "text-emphasis-style", 96 | "text-emphasis-position", 97 | "text-decoration", 98 | "text-indent", 99 | "text-justify", 100 | "text-outline", 101 | "-ms-text-overflow", 102 | "text-overflow", 103 | "text-overflow-ellipsis", 104 | "text-overflow-mode", 105 | "text-shadow", 106 | "text-transform", 107 | "text-wrap", 108 | "-webkit-text-size-adjust", 109 | "-ms-text-size-adjust", 110 | "letter-spacing", 111 | "-ms-word-break", 112 | "word-break", 113 | "word-spacing", 114 | "-ms-word-wrap", 115 | "word-wrap", 116 | "-moz-tab-size", 117 | "-o-tab-size", 118 | "tab-size", 119 | "white-space", 120 | "vertical-align", 121 | "list-style", 122 | "list-style-position", 123 | "list-style-type", 124 | "list-style-image", 125 | "pointer-events", 126 | "-ms-touch-action", 127 | "touch-action", 128 | "cursor", 129 | "visibility", 130 | "zoom", 131 | "table-layout", 132 | "empty-cells", 133 | "caption-side", 134 | "border-spacing", 135 | "border-collapse", 136 | "content", 137 | "quotes", 138 | "counter-reset", 139 | "counter-increment", 140 | "resize", 141 | "-webkit-user-select", 142 | "-moz-user-select", 143 | "-ms-user-select", 144 | "-o-user-select", 145 | "user-select", 146 | "nav-index", 147 | "nav-up", 148 | "nav-right", 149 | "nav-down", 150 | "nav-left", 151 | "background", 152 | "background-color", 153 | "background-image", 154 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 155 | "filter:progid:DXImageTransform.Microsoft.gradient", 156 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 157 | "filter", 158 | "background-repeat", 159 | "background-attachment", 160 | "background-position", 161 | "background-position-x", 162 | "background-position-y", 163 | "-moz-background-clip", 164 | "-webkit-background-clip", 165 | "background-clip", 166 | "background-origin", 167 | "-moz-background-size", 168 | "-o-background-size", 169 | "-webkit-background-size", 170 | "background-size", 171 | "border", 172 | "border-color", 173 | "border-style", 174 | "border-width", 175 | "border-top", 176 | "border-top-color", 177 | "border-top-style", 178 | "border-top-width", 179 | "border-right", 180 | "border-right-color", 181 | "border-right-style", 182 | "border-right-width", 183 | "border-bottom", 184 | "border-bottom-color", 185 | "border-bottom-style", 186 | "border-bottom-width", 187 | "border-left", 188 | "border-left-color", 189 | "border-left-style", 190 | "border-left-width", 191 | "-moz-border-radius", 192 | "-o-border-radius", 193 | "-webkit-border-radius", 194 | "border-radius", 195 | "border-top-left-radius", 196 | "border-top-right-radius", 197 | "border-bottom-right-radius", 198 | "border-bottom-left-radius", 199 | "-moz-border-image", 200 | "-o-border-image", 201 | "-webkit-border-image", 202 | "border-image", 203 | "-moz-border-image-source", 204 | "-o-border-image-source", 205 | "-webkit-border-image-source", 206 | "border-image-source", 207 | "-moz-border-image-slice", 208 | "-o-border-image-slice", 209 | "-webkit-border-image-slice", 210 | "border-image-slice", 211 | "-moz-border-image-width", 212 | "-o-border-image-width", 213 | "-webkit-border-image-width", 214 | "border-image-width", 215 | "-moz-border-image-outset", 216 | "-o-border-image-outset", 217 | "-webkit-border-image-outset", 218 | "border-image-outset", 219 | "-moz-border-image-repeat", 220 | "-o-border-image-repeat", 221 | "-webkit-border-image-repeat", 222 | "border-image-repeat", 223 | "outline", 224 | "outline-width", 225 | "outline-style", 226 | "outline-color", 227 | "outline-offset", 228 | "-webkit-box-shadow", 229 | "-moz-box-shadow", 230 | "box-shadow", 231 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 232 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 233 | "opacity", 234 | "-ms-interpolation-mode", 235 | "-moz-transition", 236 | "-ms-transition", 237 | "-o-transition", 238 | "-webkit-transition", 239 | "transition", 240 | "-moz-transition-delay", 241 | "-ms-transition-delay", 242 | "-o-transition-delay", 243 | "-webkit-transition-delay", 244 | "transition-delay", 245 | "-moz-transition-timing-function", 246 | "-ms-transition-timing-function", 247 | "-o-transition-timing-function", 248 | "-webkit-transition-timing-function", 249 | "transition-timing-function", 250 | "-moz-transition-duration", 251 | "-ms-transition-duration", 252 | "-o-transition-duration", 253 | "-webkit-transition-duration", 254 | "transition-duration", 255 | "-moz-transition-property", 256 | "-ms-transition-property", 257 | "-o-transition-property", 258 | "-webkit-transition-property", 259 | "transition-property", 260 | "-moz-transform", 261 | "-ms-transform", 262 | "-o-transform", 263 | "-webkit-transform", 264 | "transform", 265 | "-moz-transform-origin", 266 | "-ms-transform-origin", 267 | "-o-transform-origin", 268 | "-webkit-transform-origin", 269 | "transform-origin", 270 | "-webkit-animation", 271 | "-moz-animation", 272 | "-ms-animation", 273 | "-o-animation", 274 | "animation", 275 | "-moz-animation-name", 276 | "-ms-animation-name", 277 | "-o-animation-name", 278 | "-webkit-animation-name", 279 | "animation-name", 280 | "-moz-animation-duration", 281 | "-ms-animation-duration", 282 | "-o-animation-duration", 283 | "-webkit-animation-duration", 284 | "animation-duration", 285 | "-moz-animation-play-state", 286 | "-ms-animation-play-state", 287 | "-o-animation-play-state", 288 | "-webkit-animation-play-state", 289 | "animation-play-state", 290 | "-moz-animation-timing-function", 291 | "-ms-animation-timing-function", 292 | "-o-animation-timing-function", 293 | "-webkit-animation-timing-function", 294 | "animation-timing-function", 295 | "-moz-animation-delay", 296 | "-ms-animation-delay", 297 | "-o-animation-delay", 298 | "-webkit-animation-delay", 299 | "animation-delay", 300 | "-moz-animation-iteration-count", 301 | "-ms-animation-iteration-count", 302 | "-o-animation-iteration-count", 303 | "-webkit-animation-iteration-count", 304 | "animation-iteration-count", 305 | "-moz-animation-direction", 306 | "-ms-animation-direction", 307 | "-o-animation-direction", 308 | "-webkit-animation-direction" 309 | ] 310 | } 311 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # End every file with a newline 7 | [*] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | [*.{css,less,scss}] 16 | indent_style = space 17 | indent_size = 2 18 | 19 | [*.{js,json}] 20 | indent_style = space 21 | indent_size = 2 22 | 23 | [*.{html,hbs}] 24 | indent_style = tab 25 | indent_size = 2 26 | 27 | [*.md] 28 | indent_style = space 29 | indent_size = 2 30 | insert_final_newline = false 31 | trim_trailing_whitespace = false 32 | 33 | [*.xml] 34 | indent_style = space 35 | indent_size = 2 36 | 37 | [*.yml] 38 | indent_style = space 39 | indent_size = 2 40 | 41 | [*.inc] 42 | indent_style = tab 43 | indent_size = 2 -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "es6": true, 7 | "jquery": true, 8 | "builtin": true, 9 | "mocha": true, 10 | "node": true 11 | }, 12 | "extends": "eslint:recommended", 13 | "parserOptions": { 14 | "ecmaVersion": 8, 15 | "sourceType": "module" 16 | }, 17 | // "plugins": [ 18 | // "prettier" 19 | // ], 20 | "rules": { 21 | // Prettier 22 | // "prettier/prettier": "error", 23 | // Possible Errors 24 | "no-inner-declarations": "off", 25 | "no-await-in-loop": "error", 26 | "no-compare-neg-zero": "error", 27 | "no-extra-parens": ["error", "all", { 28 | "returnAssign": false, 29 | "enforceForArrowConditionals": false 30 | } 31 | ], 32 | "no-prototype-builtins": "off", 33 | "no-template-curly-in-string": "error", 34 | "valid-jsdoc": "off", 35 | 36 | // Best Practices 37 | "accessor-pairs": "error", 38 | "array-callback-return": "error", 39 | "block-scoped-var": "error", 40 | "class-methods-use-this": "off", 41 | "complexity": "error", 42 | "consistent-return": "error", 43 | "curly": "error", 44 | "default-case": "error", 45 | "dot-location": ["error", "property"], 46 | "dot-notation": "error", 47 | "eqeqeq": "error", 48 | "guard-for-in": "error", 49 | "no-alert": "error", 50 | "no-caller": "error", 51 | "no-div-regex": "error", 52 | "no-else-return": "error", 53 | "no-empty-function": "error", 54 | "no-eq-null": "error", 55 | "no-eval": "error", 56 | "no-extend-native": "error", 57 | "no-extra-bind": "error", 58 | "no-extra-label": "error", 59 | "no-floating-decimal": "error", 60 | "no-implicit-coercion": "error", 61 | "no-implicit-globals": "error", 62 | "no-implied-eval": "error", 63 | "no-invalid-this": "off", 64 | "no-iterator": "error", 65 | "no-labels": "error", 66 | "no-lone-blocks": "error", 67 | "no-loop-func": "error", 68 | "no-magic-numbers": "off", 69 | "no-multi-spaces": ["error", { 70 | "exceptions": { 71 | "AssignmentExpression": true, 72 | "ArrowFunctionExpression": true, 73 | "CallExpression": true, 74 | "VariableDeclarator": true 75 | } 76 | } 77 | ], 78 | "no-multi-str": "error", 79 | "no-new": "error", 80 | "no-new-func": "error", 81 | "no-new-wrappers": "error", 82 | "no-octal-escape": "error", 83 | "no-param-reassign": "off", 84 | "no-proto": "error", 85 | "no-restricted-properties": "error", 86 | "no-return-assign": "off", 87 | "no-return-await": "error", 88 | "no-script-url": "error", 89 | "no-self-compare": "error", 90 | "no-sequences": "error", 91 | "no-throw-literal": "error", 92 | "no-unmodified-loop-condition": "error", 93 | "no-unused-expressions": "error", 94 | "no-useless-call": "error", 95 | "no-useless-concat": "error", 96 | "no-useless-escape": "error", 97 | "no-useless-return": "off", 98 | "no-void": "error", 99 | "no-warning-comments": "off", 100 | "no-with": "error", 101 | "prefer-promise-reject-errors": "error", 102 | "radix": "error", 103 | "require-await": "error", 104 | "vars-on-top": "error", 105 | "wrap-iife": "error", 106 | "yoda": "error", 107 | 108 | // Strict Mode 109 | "strict": "error", 110 | 111 | // Variables 112 | "init-declarations": "off", 113 | "no-catch-shadow": "error", 114 | "no-label-var": "error", 115 | "no-restricted-globals": "error", 116 | "no-shadow": "off", 117 | "no-shadow-restricted-names": "error", 118 | "no-undef-init": "error", 119 | "no-undefined": "off", 120 | "no-use-before-define": "off", 121 | 122 | // Node.js and CommonJS 123 | "callback-return": "off", 124 | "global-require": "error", 125 | "handle-callback-err": "error", 126 | "no-mixed-requires": "error", 127 | "no-new-require": "error", 128 | "no-path-concat": "error", 129 | "no-process-env": "error", 130 | "no-process-exit": "error", 131 | "no-restricted-modules": "error", 132 | "no-sync": "error", 133 | 134 | // Stylistic Issues 135 | "array-bracket-spacing": "error", 136 | "block-spacing": "error", 137 | "brace-style": "error", 138 | "camelcase": "error", 139 | "capitalized-comments": "off", 140 | "comma-dangle": "error", 141 | "comma-spacing": "error", 142 | "comma-style": "error", 143 | "computed-property-spacing": "error", 144 | "consistent-this": "error", 145 | "eol-last": "error", 146 | "func-call-spacing": "error", 147 | "func-name-matching": "error", 148 | "func-names": "off", 149 | "func-style": ["error", "declaration", { 150 | "allowArrowFunctions": true 151 | }], 152 | "id-blacklist": "error", 153 | "id-length": "off", 154 | "id-match": "error", 155 | "indent": "off", 156 | "indent-legacy": ["error", 2, { "SwitchCase": 1 }], 157 | "jsx-quotes": "error", 158 | "key-spacing": "off", 159 | "keyword-spacing": "error", 160 | "line-comment-position": "off", 161 | "linebreak-style": ["error", "unix"], 162 | "lines-around-comment": "off", 163 | "lines-around-directive": "error", 164 | "max-depth": ["error", 10], 165 | "max-len": "off", 166 | "max-lines": "off", 167 | "max-nested-callbacks": "error", 168 | "max-params": "off", 169 | "max-statements": "off", 170 | "max-statements-per-line": "error", 171 | "multiline-ternary": "off", 172 | "new-cap": ["error", { "capIsNewExceptionPattern": "$.*", "newIsCapExceptions": ["asRange"] }], 173 | "new-parens": "error", 174 | "newline-after-var": "off", 175 | "newline-before-return": "off", 176 | "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 5 }], 177 | "no-array-constructor": "error", 178 | "no-bitwise": "error", 179 | "no-continue": "off", 180 | "no-inline-comments": "off", 181 | "no-lonely-if": "error", 182 | "no-mixed-operators": "off", 183 | "no-multi-assign": "error", 184 | "no-multiple-empty-lines": "error", 185 | "no-negated-condition": "off", 186 | "no-nested-ternary": "error", 187 | "no-new-object": "error", 188 | "no-plusplus": "off", 189 | "no-restricted-syntax": "error", 190 | "no-tabs": "error", 191 | "no-ternary": "off", 192 | "no-trailing-spaces": "error", 193 | "no-underscore-dangle": "off", 194 | "no-unneeded-ternary": "error", 195 | "no-whitespace-before-property": "error", 196 | "nonblock-statement-body-position": "error", 197 | "object-curly-newline": ["error", { "minProperties": 1 }], 198 | "object-curly-spacing": ["error", "always"], 199 | "object-property-newline": "error", 200 | "one-var": ["error", "never"], 201 | "one-var-declaration-per-line": "error", 202 | "operator-assignment": "error", 203 | "operator-linebreak": "off", 204 | "padded-blocks": "off", 205 | "quote-props": ["error", "as-needed"], 206 | "quotes": ["error", "single", { "allowTemplateLiterals": true }], 207 | "require-jsdoc": "off", 208 | "semi": ["error", "always"], 209 | "semi-spacing": ["error", {"before": false, "after": true}], 210 | "sort-keys": "off", 211 | "sort-vars": "error", 212 | "space-before-blocks": "error", 213 | "space-before-function-paren": ["error", { 214 | "anonymous": "always", 215 | "named": "never" 216 | }], 217 | "space-in-parens": "error", 218 | "space-infix-ops": "error", 219 | "space-unary-ops": "error", 220 | "spaced-comment": "error", 221 | "template-tag-spacing": "error", 222 | "unicode-bom": "error", 223 | "wrap-regex": "off", 224 | 225 | // ECMAScript 6 226 | "arrow-body-style": "off", 227 | "arrow-parens": "error", 228 | "arrow-spacing": "error", 229 | "generator-star-spacing": "error", 230 | "no-confusing-arrow": ["error", { "allowParens": true }], 231 | "no-duplicate-imports": "error", 232 | "no-restricted-imports": "error", 233 | "no-useless-computed-key": "error", 234 | "no-useless-constructor": "error", 235 | "no-useless-rename": "error", 236 | "no-var": "error", 237 | "object-shorthand": "error", 238 | "prefer-arrow-callback": "error", 239 | "prefer-const": "error", 240 | "prefer-destructuring": "off", 241 | "prefer-numeric-literals": "error", 242 | "prefer-rest-params": "error", 243 | "prefer-spread": "error", 244 | "prefer-template": "error", 245 | "rest-spread-spacing": "error", 246 | "sort-imports": "off", 247 | "symbol-description": "error", 248 | "template-curly-spacing": "error", 249 | "yield-star-spacing": "error" 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ################################## 2 | # project-specific.gitattributes # 3 | ################################## 4 | 5 | 6 | ########################### 7 | # documents.gitattributes # 8 | ########################### 9 | *.doc diff=astextplain 10 | *.docx diff=astextplain 11 | *.dot diff=astextplain 12 | *.pdf diff=astextplain 13 | *.rtf diff=astextplain 14 | *.css text eol=lf 15 | *.scss text eol=lf 16 | *.less text eol=lf 17 | *.html text eol=lf 18 | *.js text eol=lf 19 | *.json text eol=lf 20 | *.md text eol=lf 21 | *.txt text eol=lf 22 | *.hbs text eol=lf 23 | *.mustache text eol=lf 24 | *.xml text eol=lf 25 | *.csv text eol=lf 26 | *.tab text eol=lf 27 | *.tsv text eol=lf 28 | *.sql text eol=lf 29 | 30 | ############################ 31 | ### graphics.gitattributes # 32 | ############################ 33 | *.png binary 34 | *.jpg binary 35 | *.jpeg binary 36 | *.gif binary 37 | *.tif binary 38 | *.tiff binary 39 | *.ico binary 40 | *.svg binary 41 | *.eps binary 42 | *.psd binary 43 | *.ai binary 44 | 45 | ########################### 46 | # git-crypt.gitattributes # 47 | ########################### 48 | vault_* binary filter=git-crypt diff=git-crypt 49 | vault.* binary filter=git-crypt diff=git-crypt 50 | 51 | ####################### 52 | # shell.gitattributes # 53 | ####################### 54 | # Linux 55 | *.sh text eol=lf 56 | 57 | # Windows 58 | *.bat text eol=crlf 59 | *.cmd text eol=crlf 60 | *.ps1 text eol=crlf -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | _[Remove this line and all of the above before submitting your issue]_ 7 | 8 | ### Checklist 9 | * [ ] I'm using **version** [x.x.x] 10 | * [ ] My **browser** is: 11 | * [ ] This is a **Sass** issue: I'm using version [x.x.x] 12 | * [ ] I am sure this issue is **not a duplicate**? 13 | 14 | ### Description 15 | 16 | [Description of the bug, enhancement, or question] 17 | [Please tag accordingly] 18 | 19 | ### How can we reproduce this bug? 20 | 21 | 1. [First Step] 22 | 2. [Second Step] 23 | 3. [and so on...] 24 | 25 | ### What did you expect to happen? 26 | 27 | ### What happened instead? 28 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | _[Remove this line and all of the above before submitting your PR]_ 15 | 16 | ### Pull Request 17 | 18 | Fixes # 19 | 20 | Changes proposed: 21 | 22 | * [ ] Add 23 | * [ ] Fix 24 | * [ ] Remove 25 | * [ ] Update 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #################### 2 | # project-specific # 3 | #################### 4 | 5 | 6 | #################### 7 | # Generated source # 8 | #################### 9 | _build/ 10 | archives/ 11 | results 12 | screenshots 13 | 14 | ########################## 15 | # Dependency directories # 16 | ########################## 17 | bower_components 18 | node_modules 19 | 20 | ####### 21 | # OSX # 22 | ####### 23 | .DS_Store 24 | .AppleDouble 25 | .LSOverride 26 | 27 | # Icon must end with two \r 28 | Icon 29 | 30 | # Thumbnails 31 | ._* 32 | 33 | # Files that might appear in the root of a volume 34 | .DocumentRevisions-V100 35 | .fseventsd 36 | .Spotlight-V100 37 | .TemporaryItems 38 | .Trashes 39 | .VolumeIcon.icns 40 | 41 | # Directories potentially created on remote AFP share 42 | .AppleDB 43 | .AppleDesktop 44 | Network Trash Folder 45 | Temporary Items 46 | .apdisk 47 | 48 | ########### 49 | # Windows # 50 | ########### 51 | # Windows image file caches 52 | Thumbs.db 53 | ehthumbs.db 54 | 55 | # Folder config file 56 | Desktop.ini 57 | 58 | # Recycle Bin used on file shares 59 | $RECYCLE.BIN/ 60 | 61 | # Windows Installer files 62 | *.cab 63 | *.msi 64 | *.msm 65 | *.msp 66 | 67 | # Windows shortcuts 68 | *.lnk 69 | 70 | ######## 71 | # Node # 72 | ######## 73 | # Logs 74 | logs 75 | *.log 76 | npm-debug.log* 77 | 78 | # Runtime data 79 | pids 80 | *.pid 81 | *.seed 82 | 83 | # Directory for instrumented libs generated by jscoverage/JSCover 84 | lib-cov 85 | 86 | # Coverage directory used by tools like istanbul 87 | coverage 88 | 89 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 90 | .grunt 91 | 92 | # Sass 93 | .sass-cache/ 94 | *.css.map 95 | 96 | # node-waf configuration 97 | .lock-wscript 98 | 99 | # Compiled binary addons (http://nodejs.org/api/addons.html) 100 | build/Release 101 | 102 | # Dependency directory 103 | node_modules 104 | 105 | # JSPM 106 | jspm_packages 107 | 108 | # Optional npm cache directory 109 | .npm 110 | 111 | ############### 112 | # SublimeText # 113 | ############### 114 | # cache files for sublime text 115 | *.tmlanguage.cache 116 | *.tmPreferences.cache 117 | *.stTheme.cache 118 | 119 | # workspace files are user-specific 120 | *.sublime-workspace 121 | 122 | # project files should be checked into the repository, unless a significant 123 | # proportion of contributors will probably not be using SublimeText 124 | # *.sublime-project 125 | 126 | # sftp configuration file 127 | sftp-config.json 128 | 129 | ####### 130 | # Vim # 131 | ####### 132 | # swap 133 | [._]*.s[a-w][a-z] 134 | [._]s[a-w][a-z] 135 | # persistent undo 136 | *.un~ 137 | # session 138 | Session.vim 139 | # temporary 140 | .netrwhist 141 | *~ 142 | 143 | ############# 144 | # NotepadPP # 145 | ############## 146 | *.bak 147 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .travis.yml 2 | yarn.lock 3 | package-lock.json 4 | .editorconfig 5 | .babelrc 6 | .beautifyrc 7 | .sass-cache 8 | .bowerrc 9 | .eslintrc.json 10 | .github 11 | .gitattributes 12 | .release.json 13 | _build 14 | bower.json 15 | composer.json 16 | gulpfile.js 17 | gulpfile.babel.js 18 | README.md 19 | CONTRIBUTING.md 20 | coverage 21 | docs 22 | test 23 | gulp 24 | test 25 | demo 26 | libs 27 | archives 28 | config.js 29 | karma.conf.js 30 | bower_components 31 | -------------------------------------------------------------------------------- /.release.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": false, 3 | "force": false, 4 | "pkgFiles": ["package.json", "bower.json"], 5 | "increment": "patch", 6 | "commitMessage": "Release v%s", 7 | "tagName": "v%s", 8 | "tagAnnotation": "Release v%s", 9 | "buildCommand": "gulp build", 10 | "npm": { 11 | "publish": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-bootstrap" 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5.10" 4 | - "6.2" 5 | - "stable" 6 | sudo: false 7 | 8 | script: 9 | - npm run test 10 | - npm run eslint src 11 | 12 | cache: 13 | directories: 14 | - node_modules 15 | 16 | addons: 17 | sauce_connect: true 18 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to this project 2 | 3 | Please take a moment to review this document in order to make the contribution 4 | process easy and effective for everyone involved. 5 | 6 | Following these guidelines helps to communicate that you respect the time of 7 | the developers managing and developing this open source project. In return, 8 | they should reciprocate that respect in addressing your issue or assessing 9 | patches and features. 10 | 11 | 12 | ## Using the issue tracker 13 | 14 | The issue tracker is the preferred channel for [bug reports](#bug-reports), 15 | [features requests](#feature-requests) and submitting pull requests, but please 16 | respect the following restrictions: 17 | 18 | * Please **do not** use the issue tracker for personal support requests (use 19 | [Stack Overflow](http://stackoverflow.com) or IRC). 20 | 21 | * Please **do not** derail or troll issues. Keep the discussion on topic and 22 | respect the opinions of others. 23 | 24 | 25 | ## Bug reports 26 | 27 | A bug is a _demonstrable problem_ that is caused by the code in the repository. 28 | Good bug reports are extremely helpful - thank you! 29 | 30 | Guidelines for bug reports: 31 | 32 | 1. **Use the GitHub issue search.** Check if the issue has already been 33 | reported. 34 | 35 | 2. **Check if the issue has been fixed.** Try to reproduce it using the 36 | latest `master` or development branch in the repository. 37 | 38 | 3. **Provide environment details.** Provide your operating system, browser(s), 39 | devices, and jquery-asRange version. 40 | 41 | 4. **Create an isolated and reproducible test case.** Create a [reduced test 42 | case](http://css-tricks.com/6263-reduced-test-cases/). 43 | 44 | 5. **Include a live example.** Make use of jsFiddle or jsBin to share your 45 | isolated test cases. 46 | 47 | A good bug report shouldn't leave others needing to chase you up for more 48 | information. Please try to be as detailed as possible in your report. What is 49 | your environment? What steps will reproduce the issue? What browser(s) and OS 50 | experience the problem? What would you expect to be the outcome? All these 51 | details will help people to fix any potential bugs. 52 | 53 | Example: 54 | 55 | > Short and descriptive example bug report title 56 | > 57 | > A summary of the issue and the browser/OS environment in which it occurs. If 58 | > suitable, include the steps required to reproduce the bug. 59 | > 60 | > 1. This is the first step 61 | > 2. This is the second step 62 | > 3. Further steps, etc. 63 | > 64 | > `` - a link to the reduced test case 65 | > 66 | > Any other information you want to share that is relevant to the issue being 67 | > reported. This might include the lines of code that you have identified as 68 | > causing the bug, and potential solutions (and your opinions on their 69 | > merits). 70 | 71 | 72 | ## Feature requests 73 | 74 | Feature requests are welcome. But take a moment to find out whether your idea 75 | fits with the scope and aims of the project. It's up to *you* to make a strong 76 | case to convince the project's developers of the merits of this feature. Please 77 | provide as much detail and context as possible. 78 | 79 | 80 | ## Pull Requests 81 | 82 | **Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 83 | 84 | Good pull requests - patches, improvements, new features - are a fantastic 85 | help. They should remain focused in scope and avoid containing unrelated 86 | commits. 87 | 88 | **Please ask first** before embarking on any significant pull request (e.g. 89 | implementing features, refactoring code, porting to a different language), 90 | otherwise you risk spending a lot of time working on something that the 91 | project's developers might not want to merge into the project. 92 | 93 | Please adhere to the coding conventions used throughout a project (indentation, 94 | accurate comments, etc.) and any other requirements (such as test coverage). 95 | 96 | Follow this process if you'd like your work considered for inclusion in the 97 | project: 98 | 99 | 1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, 100 | and configure the remotes: 101 | 102 | ```bash 103 | # Clone your fork of the repo into the current directory 104 | git clone https://github.com// 105 | # Navigate to the newly cloned directory 106 | cd 107 | # Assign the original repo to a remote called "upstream" 108 | git remote add upstream https://github.com// 109 | ``` 110 | 111 | 2. If you cloned a while ago, get the latest changes from upstream: 112 | 113 | ```bash 114 | git checkout 115 | git pull upstream 116 | ``` 117 | 118 | 3. Create a new topic branch (off the main project development branch) to 119 | contain your feature, change, or fix: 120 | 121 | ```bash 122 | git checkout -b 123 | ``` 124 | 125 | 4. Commit your changes in logical chunks. Please adhere to these [git commit 126 | message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) 127 | or your code is unlikely be merged into the main project. Use Git's 128 | [interactive rebase](https://help.github.com/articles/interactive-rebase) 129 | feature to tidy up your commits before making them public. 130 | 131 | 5. Locally merge (or rebase) the upstream development branch into your topic branch: 132 | 133 | ```bash 134 | git pull [--rebase] upstream 135 | ``` 136 | 137 | 6. Push your topic branch up to your fork: 138 | 139 | ```bash 140 | git push origin 141 | ``` 142 | 143 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 144 | with a clear title and description. 145 | 146 | **IMPORTANT**: By submitting a patch, you agree to allow the project owner to 147 | license your work under the same license as that used by the project. 148 | 149 | 150 | ## Code Consitency 151 | 152 | To help create consistent looking code throughout the project, we use a few tools to help us. 153 | 154 | #### ESlint 155 | We use [ESlint](http://eslint.org) on each build to find easy-to-catch errors and potential problems in our js. You can find our ESlint settings in the `.eslintrc.json` file in the root of the project. 156 | 157 | #### EditorConfig 158 | 159 | We use [EditorConfig](http://EditorConfig.org) to maintain consistent coding styles between various editors and IDEs. You can find our settings in the `.editorconfig` file in the root of the project. 160 | 161 | 162 | ## Development 163 | 164 | We are using node, gulp and babel to build and (in the future) test this project. This means that you must setup a local development environment: 165 | 166 | 1. Install `node` and `npm` using your preferred method 167 | 2. Install the gulp CLI: `npm install -g gulp-cli` 168 | 3. Install the Babel CLI: `npm install -g babel-cli` 169 | 4. Install the project's development dependencies: `npm install` 170 | 171 | #### Available Tasks 172 | - `gulp` or `gulp watch` Start watch for changes and server with Browsersync. 173 | - `gulp build` Run all development tasks 174 | - `gulp serve` Start server with Browsersync. 175 | - `gulp clean` Clean output directories. 176 | - `gulp bundler` Bundle javasript modules. 177 | - `gulp scripts` Concatenate and minify JavaScript to `dist`. 178 | - `gulp lint:script` Lint ES6 files using eslint. 179 | - `gulp clean` Clean out distribution javascript files. 180 | - `gulp tdd` Test for Test Driven Development purposes. 181 | - `gulp test` Test for Continuous Integration purposes. 182 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [jQuery asRange](https://github.com/amazingSurge/jquery-asRange) ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing) 2 | 3 | > A jquery plugin to convert input into range slider. 4 | 5 | ## Table of contents 6 | - [Main files](#main-files) 7 | - [Quick start](#quick-start) 8 | - [Requirements](#requirements) 9 | - [Usage](#usage) 10 | - [Examples](#examples) 11 | - [Options](#options) 12 | - [Methods](#methods) 13 | - [Events](#events) 14 | - [No conflict](#no-conflict) 15 | - [Browser support](#browser-support) 16 | - [Contributing](#contributing) 17 | - [Development](#development) 18 | - [Changelog](#changelog) 19 | - [Copyright and license](#copyright-and-license) 20 | 21 | ## Main files 22 | ``` 23 | dist/ 24 | ├── jquery-asRange.js 25 | ├── jquery-asRange.es.js 26 | ├── jquery-asRange.min.js 27 | └── css/ 28 |    ├── asRange.css 29 |    └── asRange.min.css 30 | ``` 31 | 32 | ## Quick start 33 | Several quick start options are available: 34 | #### Download the latest build 35 | 36 | * [Development](https://raw.githubusercontent.com/amazingSurge/jquery-asRange/master/dist/jquery-asRange.js) - unminified 37 | * [Production](https://raw.githubusercontent.com/amazingSurge/jquery-asRange/master/dist/jquery-asRange.min.js) - minified 38 | 39 | #### Install From Bower 40 | ```sh 41 | bower install jquery-asRange --save 42 | ``` 43 | 44 | #### Install From Npm 45 | ```sh 46 | npm install jquery-asRange --save 47 | ``` 48 | 49 | #### Install From Yarn 50 | ```sh 51 | yarn add jquery-asRange 52 | ``` 53 | 54 | #### Build From Source 55 | If you want build from source: 56 | 57 | ```sh 58 | git clone git@github.com:amazingSurge/jquery-asRange.git 59 | cd jquery-asRange 60 | npm install 61 | npm install -g gulp-cli babel-cli 62 | gulp build 63 | ``` 64 | 65 | Done! 66 | 67 | ## Requirements 68 | `jquery-asRange` requires the latest version of [`jQuery`](https://jquery.com/download/). 69 | 70 | ## Usage 71 | #### Including files: 72 | 73 | ```html 74 | 75 | 76 | 77 | ``` 78 | 79 | #### Required HTML structure 80 | 81 | ```html 82 | 83 | ``` 84 | 85 | #### Initialization 86 | All you need to do is call the plugin on the element: 87 | 88 | ```javascript 89 | jQuery(function($) { 90 | $('.example').asRange(); 91 | }); 92 | ``` 93 | 94 | ## Examples 95 | There are some example usages that you can look at to get started. They can be found in the 96 | [examples folder](https://github.com/amazingSurge/jquery-asRange/tree/master/examples). 97 | 98 | ## Options 99 | `jquery-asRange` can accept an options object to alter the way it behaves. You can see the default options by call `$.asRange.setDefaults()`. The structure of an options object is as follows: 100 | 101 | ``` 102 | { 103 | namespace: 'asRange', 104 | skin: null, 105 | max: 100, 106 | min: 0, 107 | value: null, 108 | step: 10, 109 | limit: true, 110 | range: false, 111 | direction: 'h', // 'v' or 'h' 112 | keyboard: true, 113 | replaceFirst: false, // false, 'inherit', {'inherit': 'default'} 114 | tip: true, 115 | scale: true, 116 | format(value) { 117 | return value; 118 | } 119 | } 120 | ``` 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 |
PropertyDefaultDescription
namespace"asRange"Optional property, set a namspace for css class, for example, we have .asRange_active class for active effect, if namespace set to 'as-range', then it will be .as-range_active
skinnullCompulsory property, set transition effect, it works after you load specified skin file
max100Optional property, set the maximum range value of the progress bar
min0Optional property, set the initial value of the progress bar
valuenullOptional property, set the pointer to the initial position
step10Optional property, set up the moving step at a time
limittrueOptional property, if true, limit the range of the pointer moving
rangefalseOptional property, if true, allow to set min and max
direction'v'Optional property, set the direction for the progress bar ,'v' for vertical and 'h' for horizontal
keyboardtrueOptional property, if true, allow to change value using keyboard
replaceFirstfalseOptional property, set the default value when value is set as min.
tiptrueOptional property, if true, the component of tip will display and follow the pointer
scaleObjectOptional property, values means the value you want to add to scale; gap means how many parts you want to division between value; grid means how many small parts in the part
formatfunction(value) {return value;}Optional property, a function of formatting output
onChangefunction(instance) {}Optional property, according to your need, it can be as a function of the extended interface
209 | 210 | ## Methods 211 | Methods are called on asRange instances through the asRange method itself. 212 | You can also save the instances to variable for further use. 213 | 214 | ```javascript 215 | // call directly 216 | $().asRange('destroy'); 217 | 218 | // or 219 | var api = $().data('asRange'); 220 | api.destroy(); 221 | ``` 222 | 223 | #### val(value) 224 | Set the range if value is defined or get the value. 225 | ```javascript 226 | // set the val 227 | $().asRange('val', '5'); 228 | 229 | // get the val 230 | var value = $().asRange('val'); 231 | ``` 232 | 233 | #### set(value) 234 | Set the range value. 235 | ```javascript 236 | $().asRange('set', '5'); 237 | ``` 238 | 239 | #### get() 240 | Get the range value. 241 | ```javascript 242 | var value = $().asRange('get'); 243 | ``` 244 | 245 | #### enable() 246 | Enable the range functions. 247 | ```javascript 248 | $().asRange('enable'); 249 | ``` 250 | 251 | #### disable() 252 | Disable the range functions. 253 | ```javascript 254 | $().asRange('disable'); 255 | ``` 256 | 257 | #### destroy() 258 | Destroy the range instance. 259 | ```javascript 260 | $().asRange('destroy'); 261 | ``` 262 | 263 | ## Events 264 | `jquery-asRange` provides custom events for the plugin’s unique actions. 265 | 266 | ```javascript 267 | $('.the-element').on('asRange::ready', function (e) { 268 | // on instance ready 269 | }); 270 | 271 | ``` 272 | 273 | Event | Description 274 | ------- | ----------- 275 | init | Fires when the instance is setup for the first time. 276 | ready | Fires when the instance is ready for API use. 277 | enable | Fires immediately when the `enable` instance method has been called. 278 | disable | Fires immediately when the `disable` instance method has been called. 279 | change | Fires when the position of pointer is changed. 280 | end | Fires when mouse up. 281 | destroy | Fires when an instance is destroyed. 282 | 283 | ## No conflict 284 | If you have to use other plugin with the same namespace, just call the `$.asRange.noConflict` method to revert to it. 285 | 286 | ```html 287 | 288 | 289 | 293 | ``` 294 | 295 | ## Browser support 296 | 297 | Tested on all major browsers. 298 | 299 | | Safari | Chrome | Firefox | Edge | IE | Opera | 300 | |:--:|:--:|:--:|:--:|:--:|:--:| 301 | | Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ | 302 | 303 | As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/). 304 | 305 | ## Contributing 306 | Anyone and everyone is welcome to contribute. Please take a moment to 307 | review the [guidelines for contributing](CONTRIBUTING.md). Make sure you're using the latest version of `jquery-asRange` before submitting an issue. There are several ways to help out: 308 | 309 | * [Bug reports](CONTRIBUTING.md#bug-reports) 310 | * [Feature requests](CONTRIBUTING.md#feature-requests) 311 | * [Pull requests](CONTRIBUTING.md#pull-requests) 312 | * Write test cases for open bug issues 313 | * Contribute to the documentation 314 | 315 | ## Development 316 | `jquery-asRange` is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run: 317 | 318 | ```sh 319 | npm install -g gulp 320 | npm install -g babel-cli 321 | npm install 322 | ``` 323 | 324 | Then you can generate new distributable files from the sources, using: 325 | ``` 326 | gulp build 327 | ``` 328 | 329 | More gulp tasks can be found [here](CONTRIBUTING.md#available-tasks). 330 | 331 | ## Changelog 332 | To see the list of recent changes, see [Releases section](https://github.com/amazingSurge/jquery-asRange/releases). 333 | 334 | ## Copyright and license 335 | Copyright (C) 2016 amazingSurge. 336 | 337 | Licensed under [the LGPL license](LICENSE). 338 | 339 | [⬆ back to top](#table-of-contents) 340 | 341 | [bower-image]: https://img.shields.io/bower/v/jquery-asRange.svg?style=flat 342 | [bower-link]: https://david-dm.org/amazingSurge/jquery-asRange/dev-status.svg 343 | [npm-image]: https://badge.fury.io/js/jquery-asRange.svg?style=flat 344 | [npm-url]: https://npmjs.org/package/jquery-asRange 345 | [license]: https://img.shields.io/npm/l/jquery-asRange.svg?style=flat 346 | [prs-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg 347 | [daviddm-image]: https://david-dm.org/amazingSurge/jquery-asRange.svg?style=flat 348 | [daviddm-url]: https://david-dm.org/amazingSurge/jquery-asRange 349 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-asRange", 3 | "version": "0.3.4", 4 | "description": "A jquery plugin for convent input into range slider.", 5 | "main": "dist/jquery-asRange.js", 6 | "copyright": "amazingSurge", 7 | "license": "LGPL-3.0", 8 | "ignore": [ 9 | "**/.*", 10 | "node_modules", 11 | "bower_components", 12 | "test", 13 | "demo", 14 | "gulp", 15 | "CONTRIBUTING.md", 16 | "manifest.json", 17 | "karma.conf.js", 18 | "config.js", 19 | "package.json", 20 | "gulpfile.babel.js", 21 | "tests" 22 | ], 23 | "homepage": "https://github.com/amazingSurge/jquery-asRange", 24 | "authors": [ 25 | "amazingSurge " 26 | ], 27 | "moduleType": [ 28 | "globals" 29 | ], 30 | "dependencies": { 31 | "jquery": ">=2.2.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import fs from 'graceful-fs'; 4 | import {argv} from 'yargs'; 5 | 6 | const production = argv.production || argv.prod || false; 7 | 8 | export default { 9 | getConfig: function(pkg, src, dest) { 10 | return { 11 | version: pkg.version, 12 | name: pkg.name, 13 | title: pkg.title, 14 | description: pkg.description, 15 | author: pkg.author, 16 | banner: `/** 17 | * ${pkg.title} v${pkg.version} 18 | * ${pkg.homepage} 19 | * 20 | * Copyright (c) ${pkg.author.name} 21 | * Released under the ${pkg.license} license 22 | */ 23 | `, 24 | // basic locations 25 | paths: { 26 | root: './', 27 | srcDir: `${src}/`, 28 | destDir: `${dest}/`, 29 | }, 30 | 31 | styles: { 32 | files: '**/*.scss', 33 | src: `${src}/scss`, 34 | dest: `${dest}/css`, 35 | prodSourcemap: false, 36 | sassIncludePaths: [], 37 | autoprefixer: { 38 | browsers: ['last 2 versions', 'ie >= 9', 'Android >= 2.3'] 39 | } 40 | }, 41 | 42 | scripts: { 43 | input: 'main.js', 44 | version: 'info.js', 45 | files: '**/*.js', 46 | src: `${src}`, 47 | dest: `${dest}`, 48 | prodSourcemap: false, 49 | test: './test', 50 | gulp: './gulp' 51 | }, 52 | 53 | archive: { 54 | src: `${dest}/**/*`, 55 | dest: './archives/', 56 | zip: {} 57 | }, 58 | 59 | browser: { 60 | baseDir: './', 61 | startPath: "examples/index.html", 62 | browserPort: 3000, 63 | UIPort: 3001, 64 | testPort: 3002, 65 | }, 66 | 67 | deploy: { 68 | versionFiles: ['package.json', 'bower.json'], 69 | increment: "patch", // major, minor, patch, premajor, preminor, prepatch, or prerelease. 70 | }, 71 | 72 | notify: { 73 | title: pkg.title 74 | }, 75 | 76 | env: 'development', 77 | production: production, 78 | setEnv: function(env) { 79 | if (typeof env !== 'string') return; 80 | this.env = env; 81 | this.production = env === 'production'; 82 | process.env.NODE_ENV = env; 83 | }, 84 | 85 | test: {}, 86 | }; 87 | }, 88 | 89 | init: function() { 90 | const pkg = JSON.parse(fs.readFileSync('./package.json', { encoding: 'utf-8' })); 91 | 92 | let src = 'src'; 93 | let dest = 'dist'; 94 | 95 | Object.assign(this, this.getConfig(pkg, src, dest, production)); 96 | this.setEnv(production? 'production': 'development'); 97 | 98 | return this; 99 | } 100 | 101 | }.init(); 102 | -------------------------------------------------------------------------------- /dist/css/asRange.css: -------------------------------------------------------------------------------- 1 | /** 2 | * asRange v0.3.4 3 | * https://github.com/amazingSurge/jquery-asRange 4 | * 5 | * Copyright (c) amazingSurge 6 | * Released under the LGPL-3.0 license 7 | */ 8 | .asRange { 9 | position: relative; 10 | width: 331px; 11 | height: 8px; 12 | background-color: #cfcdc7; 13 | border-radius: 8px; 14 | } 15 | .asRange .asRange-pointer { 16 | position: absolute; 17 | left: 30%; 18 | z-index: 2; 19 | width: 8px; 20 | height: 8px; 21 | margin-left: -4px; 22 | background-color: #fff; 23 | border-radius: 9px; 24 | } 25 | .asRange .asRange-pointer:before { 26 | position: absolute; 27 | top: -4px; 28 | right: -4px; 29 | bottom: -4px; 30 | left: -4px; 31 | content: ""; 32 | background: #6ba1ad; 33 | border-radius: inherit; 34 | } 35 | .asRange .asRange-pointer:after { 36 | position: absolute; 37 | top: 0; 38 | right: 0; 39 | bottom: 0; 40 | left: 0; 41 | content: ""; 42 | background: #fff; 43 | border-radius: inherit; 44 | } 45 | .asRange .asRange-pointer.start { 46 | left: 0; 47 | margin-left: 4px; 48 | } 49 | .asRange .asRange-pointer.stop { 50 | left: 100%; 51 | margin-left: -12px; 52 | } 53 | .asRange .asRange-pointer .asRange-tip { 54 | position: absolute; 55 | top: -33px; 56 | left: 0; 57 | width: 36px; 58 | height: 20px; 59 | margin-left: -15px; 60 | font-family: Bpreplay; 61 | font-size: 12px; 62 | line-height: 20px; 63 | color: #fff; 64 | text-align: center; 65 | background-color: #5d5c58; 66 | border: 1px solid #5d5c58; 67 | border-radius: 3px; 68 | -webkit-transition: opacity .3s ease-in-out 0s; 69 | transition: opacity .3s ease-in-out 0s; 70 | } 71 | .asRange .asRange-pointer .asRange-tip:before { 72 | position: absolute; 73 | bottom: -3px; 74 | left: 50%; 75 | display: inline-block; 76 | width: 6px; 77 | height: 6px; 78 | margin-left: -3px; 79 | content: ""; 80 | background-color: #5d5c58; 81 | -webkit-transform: rotate(-45deg); 82 | -ms-transform: rotate(-45deg); 83 | transform: rotate(-45deg); 84 | } 85 | .asRange .asRange-selected { 86 | position: absolute; 87 | left: 30%; 88 | z-index: 1; 89 | width: 40%; 90 | height: 8px; 91 | background-color: #7ebdcb; 92 | border-radius: 9px; 93 | } 94 | .asRange .asRange-scale { 95 | display: none; 96 | } 97 | 98 | .asRange-scale { 99 | position: relative; 100 | width: 331px; 101 | height: 8px; 102 | background-color: #cfcdc7; 103 | border-radius: 8px; 104 | } 105 | .asRange-scale .asRange-pointer { 106 | position: absolute; 107 | left: 30%; 108 | z-index: 2; 109 | width: 8px; 110 | height: 8px; 111 | margin-left: -4px; 112 | background-color: #fff; 113 | border-radius: 9px; 114 | } 115 | .asRange-scale .asRange-pointer:before { 116 | position: absolute; 117 | top: -4px; 118 | right: -4px; 119 | bottom: -4px; 120 | left: -4px; 121 | content: ""; 122 | background: #6ba1ad; 123 | border-radius: inherit; 124 | } 125 | .asRange-scale .asRange-pointer:after { 126 | position: absolute; 127 | top: 0; 128 | right: 0; 129 | bottom: 0; 130 | left: 0; 131 | content: ""; 132 | background: #fff; 133 | border-radius: inherit; 134 | } 135 | .asRange-scale .asRange-pointer.start { 136 | left: 0; 137 | margin-left: 4px; 138 | } 139 | .asRange-scale .asRange-pointer.stop { 140 | left: 100%; 141 | margin-left: -12px; 142 | } 143 | .asRange-scale .asRange-pointer .asRange-tip { 144 | position: absolute; 145 | top: -33px; 146 | left: 0; 147 | width: 36px; 148 | height: 20px; 149 | margin-left: -15px; 150 | font-family: Bpreplay; 151 | font-size: 12px; 152 | line-height: 20px; 153 | color: #fff; 154 | text-align: center; 155 | background-color: #5d5c58; 156 | border: 1px solid #5d5c58; 157 | border-radius: 3px; 158 | -webkit-transition: opacity .3s ease-in-out 0s; 159 | transition: opacity .3s ease-in-out 0s; 160 | } 161 | .asRange-scale .asRange-pointer .asRange-tip:before { 162 | position: absolute; 163 | bottom: -3px; 164 | left: 50%; 165 | display: inline-block; 166 | width: 6px; 167 | height: 6px; 168 | margin-left: -3px; 169 | content: ""; 170 | background-color: #5d5c58; 171 | -webkit-transform: rotate(-45deg); 172 | -ms-transform: rotate(-45deg); 173 | transform: rotate(-45deg); 174 | } 175 | .asRange-scale .asRange-selected { 176 | position: absolute; 177 | left: 30%; 178 | z-index: 1; 179 | width: 40%; 180 | height: 8px; 181 | background-color: #7ebdcb; 182 | border-radius: 9px; 183 | } 184 | .asRange-scale .asRange-scale { 185 | position: absolute; 186 | bottom: -22px; 187 | left: 0; 188 | width: 100%; 189 | height: 20px; 190 | padding: 0; 191 | margin: 0; 192 | list-style: none; 193 | background: url("../image/scale.png") no-repeat 0 center transparent; 194 | } 195 | .asRange-scale .asRange-scale li { 196 | position: absolute; 197 | top: 18px; 198 | width: 30px; 199 | height: 20px; 200 | padding: 0; 201 | margin: 0; 202 | margin-left: -15px; 203 | text-align: center; 204 | } 205 | .asRange-scale .asRange-scale li:first-child { 206 | left: 0; 207 | } 208 | .asRange-scale .asRange-scale li:nth-child(2) { 209 | left: 33.3%; 210 | } 211 | .asRange-scale .asRange-scale li:nth-child(3) { 212 | left: 66.6%; 213 | } 214 | .asRange-scale .asRange-scale li:last-child { 215 | left: 100%; 216 | } 217 | -------------------------------------------------------------------------------- /dist/css/asRange.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * asRange v0.3.4 3 | * https://github.com/amazingSurge/jquery-asRange 4 | * 5 | * Copyright (c) amazingSurge 6 | * Released under the LGPL-3.0 license 7 | */ 8 | .asRange{position:relative;width:331px;height:8px;background-color:#cfcdc7;border-radius:8px}.asRange .asRange-pointer{position:absolute;left:30%;z-index:2;width:8px;height:8px;margin-left:-4px;background-color:#fff;border-radius:9px}.asRange .asRange-pointer:before{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;content:"";background:#6ba1ad;border-radius:inherit}.asRange .asRange-pointer:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:#fff;border-radius:inherit}.asRange .asRange-pointer.start{left:0;margin-left:4px}.asRange .asRange-pointer.stop{left:100%;margin-left:-12px}.asRange .asRange-pointer .asRange-tip{position:absolute;top:-33px;left:0;width:36px;height:20px;margin-left:-15px;font-family:Bpreplay;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#5d5c58;border:1px solid #5d5c58;border-radius:3px;-webkit-transition:opacity .3s ease-in-out 0s;transition:opacity .3s ease-in-out 0s}.asRange .asRange-pointer .asRange-tip:before{position:absolute;bottom:-3px;left:50%;display:inline-block;width:6px;height:6px;margin-left:-3px;content:"";background-color:#5d5c58;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.asRange .asRange-selected{position:absolute;left:30%;z-index:1;width:40%;height:8px;background-color:#7ebdcb;border-radius:9px}.asRange .asRange-scale{display:none}.asRange-scale{position:relative;width:331px;height:8px;background-color:#cfcdc7;border-radius:8px}.asRange-scale .asRange-pointer{position:absolute;left:30%;z-index:2;width:8px;height:8px;margin-left:-4px;background-color:#fff;border-radius:9px}.asRange-scale .asRange-pointer:before{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;content:"";background:#6ba1ad;border-radius:inherit}.asRange-scale .asRange-pointer:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:#fff;border-radius:inherit}.asRange-scale .asRange-pointer.start{left:0;margin-left:4px}.asRange-scale .asRange-pointer.stop{left:100%;margin-left:-12px}.asRange-scale .asRange-pointer .asRange-tip{position:absolute;top:-33px;left:0;width:36px;height:20px;margin-left:-15px;font-family:Bpreplay;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#5d5c58;border:1px solid #5d5c58;border-radius:3px;-webkit-transition:opacity .3s ease-in-out 0s;transition:opacity .3s ease-in-out 0s}.asRange-scale .asRange-pointer .asRange-tip:before{position:absolute;bottom:-3px;left:50%;display:inline-block;width:6px;height:6px;margin-left:-3px;content:"";background-color:#5d5c58;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.asRange-scale .asRange-selected{position:absolute;left:30%;z-index:1;width:40%;height:8px;background-color:#7ebdcb;border-radius:9px}.asRange-scale .asRange-scale{position:absolute;bottom:-22px;left:0;width:100%;height:20px;padding:0;margin:0;list-style:none;background:url(../image/scale.png) no-repeat 0 transparent}.asRange-scale .asRange-scale li{position:absolute;top:18px;width:30px;height:20px;padding:0;margin:0;margin-left:-15px;text-align:center}.asRange-scale .asRange-scale li:first-child{left:0}.asRange-scale .asRange-scale li:nth-child(2){left:33.3%}.asRange-scale .asRange-scale li:nth-child(3){left:66.6%}.asRange-scale .asRange-scale li:last-child{left:100%} 9 | /*# sourceMappingURL=asRange.min.css.map */ 10 | -------------------------------------------------------------------------------- /dist/jquery-asRange.es.js: -------------------------------------------------------------------------------- 1 | /** 2 | * asRange v0.3.4 3 | * https://github.com/amazingSurge/jquery-asRange 4 | * 5 | * Copyright (c) amazingSurge 6 | * Released under the LGPL-3.0 license 7 | */ 8 | import $ from 'jquery'; 9 | 10 | var DEFAULTS = { 11 | namespace: 'asRange', 12 | skin: null, 13 | max: 100, 14 | min: 0, 15 | value: null, 16 | step: 10, 17 | limit: true, 18 | range: false, 19 | direction: 'h', // 'v' or 'h' 20 | keyboard: true, 21 | replaceFirst: false, // false, 'inherit', {'inherit': 'default'} 22 | tip: true, 23 | scale: true, 24 | format(value) { 25 | return value; 26 | } 27 | }; 28 | 29 | function getEventObject(event) { 30 | let e = event.originalEvent; 31 | if (e.touches && e.touches.length && e.touches[0]) { 32 | e = e.touches[0]; 33 | } 34 | 35 | return e; 36 | } 37 | 38 | class Pointer { 39 | constructor($element, id, parent) { 40 | this.$element = $element; 41 | this.uid = id; 42 | this.parent = parent; 43 | this.options = $.extend(true, {}, this.parent.options); 44 | this.direction = this.options.direction; 45 | this.value = null; 46 | this.classes = { 47 | active: `${this.parent.namespace}-pointer_active` 48 | }; 49 | } 50 | 51 | mousedown(event) { 52 | const axis = this.parent.direction.axis; 53 | const position = this.parent.direction.position; 54 | const offset = this.parent.$wrap.offset(); 55 | 56 | this.$element.trigger(`${this.parent.namespace}::moveStart`, this); 57 | 58 | this.data = {}; 59 | this.data.start = event[axis]; 60 | this.data.position = event[axis] - offset[position]; 61 | 62 | const value = this.parent.getValueFromPosition(this.data.position); 63 | this.set(value); 64 | 65 | $.each(this.parent.pointer, (i, p) => { 66 | p.deactive(); 67 | }); 68 | 69 | this.active(); 70 | 71 | this.mousemove = function (event) { 72 | const eventObj = getEventObject(event); 73 | const value = this.parent.getValueFromPosition(this.data.position + (eventObj[axis] || this.data.start) - this.data.start); 74 | this.set(value); 75 | 76 | event.preventDefault(); 77 | return false; 78 | }; 79 | this.mouseup = function () { 80 | $(document).off('.asRange mousemove.asRange touchend.asRange mouseup.asRange touchcancel.asRange'); 81 | this.$element.trigger(`${this.parent.namespace}::moveEnd`, this); 82 | return false; 83 | }; 84 | 85 | $(document).on('touchmove.asRange mousemove.asRange', $.proxy(this.mousemove, this)) 86 | .on('touchend.asRange mouseup.asRange', $.proxy(this.mouseup, this)); 87 | return false; 88 | } 89 | 90 | active() { 91 | this.$element.addClass(this.classes.active); 92 | } 93 | 94 | deactive() { 95 | this.$element.removeClass(this.classes.active); 96 | } 97 | 98 | set(value) { 99 | if (this.value === value) { 100 | return; 101 | } 102 | 103 | if (this.parent.step) { 104 | value = this.matchStep(value); 105 | } 106 | if (this.options.limit === true) { 107 | value = this.matchLimit(value); 108 | } else { 109 | if (value <= this.parent.min) { 110 | value = this.parent.min; 111 | } 112 | if (value >= this.parent.max) { 113 | value = this.parent.max; 114 | } 115 | } 116 | this.value = value; 117 | 118 | this.updatePosition(); 119 | this.$element.focus(); 120 | 121 | this.$element.trigger(`${this.parent.namespace}::move`, this); 122 | } 123 | 124 | updatePosition() { 125 | const position = {}; 126 | 127 | position[this.parent.direction.position] = `${this.getPercent()}%`; 128 | this.$element.css(position); 129 | } 130 | 131 | getPercent() { 132 | return (this.value - this.parent.min) / this.parent.interval * 100; 133 | } 134 | 135 | get() { 136 | return this.value; 137 | } 138 | 139 | matchStep(value) { 140 | const step = this.parent.step; 141 | const decimal = step.toString().split('.')[1]; 142 | 143 | value = Math.round(value / step) * step; 144 | 145 | if (decimal) { 146 | value = value.toFixed(decimal.length); 147 | } 148 | 149 | return parseFloat(value); 150 | } 151 | 152 | matchLimit(value) { 153 | let left; 154 | let right; 155 | const pointer = this.parent.pointer; 156 | 157 | if (this.uid === 1) { 158 | left = this.parent.min; 159 | } else { 160 | left = pointer[this.uid - 2].value; 161 | } 162 | 163 | if (pointer[this.uid] && pointer[this.uid].value !== null) { 164 | right = pointer[this.uid].value; 165 | } else { 166 | right = this.parent.max; 167 | } 168 | 169 | if (value <= left) { 170 | value = left; 171 | } 172 | if (value >= right) { 173 | value = right; 174 | } 175 | return value; 176 | } 177 | 178 | destroy() { 179 | this.$element.off('.asRange'); 180 | this.$element.remove(); 181 | } 182 | } 183 | 184 | var scale = { 185 | defaults: { 186 | scale: { 187 | valuesNumber: 3, 188 | gap: 1, 189 | grid: 5 190 | } 191 | }, 192 | init(instance) { 193 | const opts = $.extend({}, this.defaults, instance.options.scale); 194 | const scale = opts.scale; 195 | scale.values = []; 196 | scale.values.push(instance.min); 197 | const part = (instance.max - instance.min) / (scale.valuesNumber - 1); 198 | for (let j = 1; j <= scale.valuesNumber - 2; j++) { 199 | scale.values.push(part * j); 200 | } 201 | scale.values.push(instance.max); 202 | const classes = { 203 | scale: `${instance.namespace}-scale`, 204 | lines: `${instance.namespace}-scale-lines`, 205 | grid: `${instance.namespace}-scale-grid`, 206 | inlineGrid: `${instance.namespace}-scale-inlineGrid`, 207 | values: `${instance.namespace}-scale-values` 208 | }; 209 | 210 | const len = scale.values.length; 211 | const num = ((scale.grid - 1) * (scale.gap + 1) + scale.gap) * (len - 1) + len; 212 | const perOfGrid = 100 / (num - 1); 213 | const perOfValue = 100 / (len - 1); 214 | 215 | this.$scale = $('
').addClass(classes.scale); 216 | this.$lines = $('
    ').addClass(classes.lines); 217 | this.$values = $('
      ').addClass(classes.values); 218 | 219 | for (let i = 0; i < num; i++) { 220 | let $list; 221 | if (i === 0 || i === num || i % ((num - 1) / (len - 1)) === 0) { 222 | $list = $(`
    • `); 223 | } else if (i % scale.grid === 0) { 224 | $list = $(`
    • `); 225 | } else { 226 | $list = $('
    • '); 227 | } 228 | 229 | // position scale 230 | $list.css({ 231 | left: `${perOfGrid * i}%` 232 | }).appendTo(this.$lines); 233 | } 234 | 235 | for (let v = 0; v < len; v++) { 236 | // position value 237 | $(`
    • ${scale.values[v]}
      • `).css({ 238 | left: `${perOfValue * v}%` 239 | }).appendTo(this.$values); 240 | } 241 | 242 | this.$lines.add(this.$values).appendTo(this.$scale); 243 | this.$scale.appendTo(instance.$wrap); 244 | }, 245 | update(instance) { 246 | this.$scale.remove(); 247 | this.init(instance); 248 | } 249 | }; 250 | 251 | var selected = { 252 | defaults: {}, 253 | init(instance) { 254 | this.$arrow = $('').appendTo(instance.$wrap); 255 | this.$arrow.addClass(`${instance.namespace}-selected`); 256 | 257 | if (instance.options.range === false) { 258 | instance.p1.$element.on(`${instance.namespace}::move`, (e, pointer) => { 259 | this.$arrow.css({ 260 | left: 0, 261 | width: `${pointer.getPercent()}%` 262 | }); 263 | }); 264 | } 265 | 266 | if (instance.options.range === true) { 267 | const onUpdate = () => { 268 | let width = instance.p2.getPercent() - instance.p1.getPercent(); 269 | let left; 270 | if (width >= 0) { 271 | left = instance.p1.getPercent(); 272 | } else { 273 | width = -width; 274 | left = instance.p2.getPercent(); 275 | } 276 | this.$arrow.css({ 277 | left: `${left}%`, 278 | width: `${width}%` 279 | }); 280 | }; 281 | instance.p1.$element.on(`${instance.namespace}::move`, onUpdate); 282 | instance.p2.$element.on(`${instance.namespace}::move`, onUpdate); 283 | } 284 | } 285 | }; 286 | 287 | var tip = { 288 | defaults: { 289 | active: 'always' // 'always' 'onMove' 290 | }, 291 | init(instance) { 292 | const that = this; 293 | const opts = $.extend({}, this.defaults, instance.options.tip); 294 | 295 | this.opts = opts; 296 | this.classes = { 297 | tip: `${instance.namespace}-tip`, 298 | show: `${instance.namespace}-tip-show` 299 | }; 300 | $.each(instance.pointer, (i, p) => { 301 | const $tip = $('').appendTo(instance.pointer[i].$element); 302 | 303 | $tip.addClass(that.classes.tip); 304 | if (that.opts.active === 'onMove') { 305 | $tip.css({ 306 | display: 'none' 307 | }); 308 | p.$element.on(`${instance.namespace}::moveEnd`, () => { 309 | that.hide($tip); 310 | return false; 311 | }).on(`${instance.namespace}::moveStart`, () => { 312 | that.show($tip); 313 | return false; 314 | }); 315 | } 316 | p.$element.on(`${instance.namespace}::move`, () => { 317 | let value; 318 | if (instance.options.range) { 319 | value = instance.get()[i]; 320 | } else { 321 | value = instance.get(); 322 | } 323 | if (typeof instance.options.format === 'function') { 324 | if (instance.options.replaceFirst && typeof value !== 'number') { 325 | if (typeof instance.options.replaceFirst === 'string') { 326 | value = instance.options.replaceFirst; 327 | } 328 | if (typeof instance.options.replaceFirst === 'object') { 329 | for (const key in instance.options.replaceFirst) { 330 | if (Object.hasOwnProperty(instance.options.replaceFirst, key)) { 331 | value = instance.options.replaceFirst[key]; 332 | } 333 | } 334 | } 335 | } else { 336 | value = instance.options.format(value); 337 | } 338 | } 339 | $tip.text(value); 340 | return false; 341 | }); 342 | }); 343 | }, 344 | show($tip) { 345 | $tip.addClass(this.classes.show); 346 | $tip.css({ 347 | display: 'block' 348 | }); 349 | }, 350 | hide($tip) { 351 | $tip.removeClass(this.classes.show); 352 | $tip.css({ 353 | display: 'none' 354 | }); 355 | } 356 | }; 357 | 358 | var keyboard = function () { 359 | const $doc = $(document); 360 | 361 | $doc.on('asRange::ready', (event, instance) => { 362 | let step; 363 | 364 | const keyboard = { 365 | keys: { 366 | UP: 38, 367 | DOWN: 40, 368 | LEFT: 37, 369 | RIGHT: 39, 370 | RETURN: 13, 371 | ESCAPE: 27, 372 | BACKSPACE: 8, 373 | SPACE: 32 374 | }, 375 | map: {}, 376 | bound: false, 377 | press(e) { 378 | /* eslint consistent-return: "off"*/ 379 | const key = e.keyCode || e.which; 380 | if (key in keyboard.map && typeof keyboard.map[key] === 'function') { 381 | keyboard.map[key](e); 382 | return false; 383 | } 384 | }, 385 | attach(map) { 386 | let key; 387 | let up; 388 | for (key in map) { 389 | if (map.hasOwnProperty(key)) { 390 | up = key.toUpperCase(); 391 | if (up in keyboard.keys) { 392 | keyboard.map[keyboard.keys[up]] = map[key]; 393 | } else { 394 | keyboard.map[up] = map[key]; 395 | } 396 | } 397 | } 398 | if (!keyboard.bound) { 399 | keyboard.bound = true; 400 | $doc.bind('keydown', keyboard.press); 401 | } 402 | }, 403 | detach() { 404 | keyboard.bound = false; 405 | keyboard.map = {}; 406 | $doc.unbind('keydown', keyboard.press); 407 | } 408 | }; 409 | 410 | if (instance.options.keyboard === true) { 411 | $.each(instance.pointer, (i, p) => { 412 | if (instance.options.step) { 413 | step = instance.options.step; 414 | } else { 415 | step = 1; 416 | } 417 | const left = () => { 418 | const value = p.value; 419 | p.set(value - step); 420 | }; 421 | const right = () => { 422 | const value = p.value; 423 | p.set(value + step); 424 | }; 425 | p.$element.attr('tabindex', '0').on('focus', () => { 426 | keyboard.attach({ 427 | left, 428 | right 429 | }); 430 | return false; 431 | }).on('blur', () => { 432 | keyboard.detach(); 433 | return false; 434 | }); 435 | }); 436 | } 437 | }); 438 | }; 439 | 440 | const components = {}; 441 | 442 | /** 443 | * Plugin constructor 444 | **/ 445 | class asRange { 446 | constructor(element, options) { 447 | const metas = {}; 448 | this.element = element; 449 | this.$element = $(element); 450 | 451 | if (this.$element.is('input')) { 452 | const value = this.$element.val(); 453 | 454 | if (typeof value === 'string') { 455 | metas.value = value.split(','); 456 | } 457 | 458 | $.each(['min', 'max', 'step'], (index, key) => { 459 | const val = parseFloat(this.$element.attr(key)); 460 | if (!isNaN(val)) { 461 | metas[key] = val; 462 | } 463 | }); 464 | 465 | this.$element.css({ 466 | display: 'none' 467 | }); 468 | this.$wrap = $('
      '); 469 | this.$element.after(this.$wrap); 470 | } else { 471 | this.$wrap = this.$element; 472 | } 473 | 474 | this.options = $.extend({}, DEFAULTS, options, this.$element.data(), metas); 475 | this.namespace = this.options.namespace; 476 | this.components = $.extend(true, {}, components); 477 | if (this.options.range) { 478 | this.options.replaceFirst = false; 479 | } 480 | 481 | // public properties 482 | this.value = this.options.value; 483 | if (this.value === null) { 484 | this.value = this.options.min; 485 | } 486 | 487 | if (!this.options.range) { 488 | if ($.isArray(this.value)) { 489 | this.value = this.value[0]; 490 | } 491 | } else if (!$.isArray(this.value)) { 492 | this.value = [this.value, this.value]; 493 | } else if (this.value.length === 1) { 494 | this.value[1] = this.value[0]; 495 | } 496 | 497 | this.min = this.options.min; 498 | this.max = this.options.max; 499 | this.step = this.options.step; 500 | this.interval = this.max - this.min; 501 | 502 | // flag 503 | this.initialized = false; 504 | this.updating = false; 505 | this.disabled = false; 506 | 507 | if (this.options.direction === 'v') { 508 | this.direction = { 509 | axis: 'pageY', 510 | position: 'top' 511 | }; 512 | } else { 513 | this.direction = { 514 | axis: 'pageX', 515 | position: 'left' 516 | }; 517 | } 518 | 519 | this.$wrap.addClass(this.namespace); 520 | 521 | if (this.options.skin) { 522 | this.$wrap.addClass(`${this.namespace}_${this.options.skin}`); 523 | } 524 | 525 | if (this.max < this.min || this.step >= this.interval) { 526 | throw new Error('error options about max min step'); 527 | } 528 | 529 | this.init(); 530 | } 531 | 532 | init() { 533 | this.$wrap.append(`
      `); 534 | 535 | // build pointers 536 | this.buildPointers(); 537 | 538 | // initial components 539 | this.components.selected.init(this); 540 | 541 | if (this.options.tip !== false) { 542 | this.components.tip.init(this); 543 | } 544 | if (this.options.scale !== false) { 545 | this.components.scale.init(this); 546 | } 547 | 548 | // initial pointer value 549 | this.set(this.value); 550 | 551 | // Bind events 552 | this.bindEvents(); 553 | 554 | this._trigger('ready'); 555 | this.initialized = true; 556 | } 557 | 558 | _trigger(eventType, ...params) { 559 | const data = [this].concat(params); 560 | 561 | // event 562 | this.$element.trigger(`${this.namespace}::${eventType}`, data); 563 | 564 | // callback 565 | eventType = eventType.replace(/\b\w+\b/g, (word) => { 566 | return word.substring(0, 1).toUpperCase() + word.substring(1); 567 | }); 568 | const onFunction = `on${eventType}`; 569 | 570 | if (typeof this.options[onFunction] === 'function') { 571 | this.options[onFunction].apply(this, params); 572 | } 573 | } 574 | 575 | buildPointers() { 576 | this.pointer = []; 577 | let pointerCount = 1; 578 | if (this.options.range) { 579 | pointerCount = 2; 580 | } 581 | for (let i = 1; i <= pointerCount; i++) { 582 | const $pointer = $(`
      `).appendTo(this.$wrap); 583 | const p = new Pointer($pointer, i, this); 584 | this.pointer.push(p); 585 | } 586 | 587 | // alias of pointer 588 | this.p1 = this.pointer[0]; 589 | 590 | if (this.options.range) { 591 | this.p2 = this.pointer[1]; 592 | } 593 | } 594 | 595 | bindEvents() { 596 | const that = this; 597 | this.$wrap.on('touchstart.asRange mousedown.asRange', (event) => { 598 | /* eslint consistent-return: "off"*/ 599 | if (that.disabled === true) { 600 | return; 601 | } 602 | event = getEventObject(event); 603 | const rightclick = event.which ? event.which === 3 : event.button === 2; 604 | if (rightclick) { 605 | return false; 606 | } 607 | 608 | const offset = that.$wrap.offset(); 609 | const start = event[that.direction.axis] - offset[that.direction.position]; 610 | const p = that.getAdjacentPointer(start); 611 | 612 | p.mousedown(event); 613 | return false; 614 | }); 615 | 616 | if (this.$element.is('input')) { 617 | this.$element.on(`${this.namespace}::change`, () => { 618 | const value = this.get(); 619 | this.$element.val(value); 620 | }); 621 | } 622 | 623 | $.each(this.pointer, (i, p) => { 624 | p.$element.on(`${this.namespace}::move`, () => { 625 | that.value = that.get(); 626 | if (!that.initialized || that.updating) { 627 | return false; 628 | } 629 | that._trigger('change', that.value); 630 | return false; 631 | }); 632 | }); 633 | } 634 | 635 | getValueFromPosition(px) { 636 | if (px > 0) { 637 | return this.min + px / this.getLength() * this.interval; 638 | } 639 | return 0; 640 | } 641 | 642 | getAdjacentPointer(start) { 643 | const value = this.getValueFromPosition(start); 644 | if (this.options.range) { 645 | const p1 = this.p1.value; 646 | const p2 = this.p2.value; 647 | const diff = Math.abs(p1 - p2); 648 | if (p1 <= p2) { 649 | if (value > p1 + diff / 2) { 650 | return this.p2; 651 | } 652 | return this.p1; 653 | } 654 | 655 | if (value > p2 + diff / 2) { 656 | return this.p1; 657 | } 658 | 659 | return this.p2; 660 | } 661 | return this.p1; 662 | } 663 | 664 | getLength() { 665 | if (this.options.direction === 'v') { 666 | return this.$wrap.height(); 667 | } 668 | return this.$wrap.width(); 669 | } 670 | 671 | update(options) { 672 | this.updating = true; 673 | $.each(['max', 'min', 'step', 'limit', 'value'], (key, value) => { 674 | if (options[value]) { 675 | this[value] = options[value]; 676 | } 677 | }); 678 | if (options.max || options.min) { 679 | this.setInterval(options.min, options.max); 680 | } 681 | 682 | if (!options.value) { 683 | this.value = options.min; 684 | } 685 | 686 | $.each(this.components, (key, value) => { 687 | if (typeof value.update === 'function') { 688 | value.update(this); 689 | } 690 | }); 691 | 692 | this.set(this.value); 693 | 694 | this._trigger('update'); 695 | 696 | this.updating = false; 697 | } 698 | 699 | get() { 700 | const value = []; 701 | 702 | $.each(this.pointer, (i, p) => { 703 | value[i] = p.get(); 704 | }); 705 | 706 | if (this.options.range) { 707 | return value; 708 | } 709 | 710 | if (value[0] === this.options.min) { 711 | if (typeof this.options.replaceFirst === 'string') { 712 | value[0] = this.options.replaceFirst; 713 | } 714 | if (typeof this.options.replaceFirst === 'object') { 715 | for (const key in this.options.replaceFirst) { 716 | if (Object.hasOwnProperty(this.options.replaceFirst, key)) { 717 | value[0] = key; 718 | } 719 | } 720 | } 721 | } 722 | 723 | return value[0]; 724 | } 725 | 726 | set(value) { 727 | if (this.options.range) { 728 | if (typeof value === 'number') { 729 | value = [value]; 730 | } 731 | if (!$.isArray(value)) { 732 | return; 733 | } 734 | $.each(this.pointer, (i, p) => { 735 | p.set(value[i]); 736 | }); 737 | } else { 738 | this.p1.set(value); 739 | } 740 | 741 | this.value = value; 742 | } 743 | 744 | val(value) { 745 | if (value) { 746 | this.set(value); 747 | return this; 748 | } 749 | return this.get(); 750 | } 751 | 752 | setInterval(start, end) { 753 | this.min = start; 754 | this.max = end; 755 | this.interval = end - start; 756 | } 757 | 758 | enable() { 759 | this.disabled = false; 760 | this.$wrap.removeClass(`${this.namespace}_disabled`); 761 | 762 | this._trigger('enable'); 763 | return this; 764 | } 765 | 766 | disable() { 767 | this.disabled = true; 768 | this.$wrap.addClass(`${this.namespace}_disabled`); 769 | 770 | this._trigger('disable'); 771 | return this; 772 | } 773 | 774 | destroy() { 775 | $.each(this.pointer, (i, p) => { 776 | p.destroy(); 777 | }); 778 | this.$wrap.destroy(); 779 | 780 | this._trigger('destroy'); 781 | } 782 | 783 | static registerComponent(component, methods) { 784 | components[component] = methods; 785 | } 786 | 787 | static setDefaults(options) { 788 | $.extend(DEFAULTS, $.isPlainObject(options) && options); 789 | } 790 | } 791 | 792 | asRange.registerComponent('scale', scale); 793 | asRange.registerComponent('selected', selected); 794 | asRange.registerComponent('tip', tip); 795 | keyboard(); 796 | 797 | var info = { 798 | version:'0.3.4' 799 | }; 800 | 801 | const NAMESPACE = 'asRange'; 802 | const OtherAsRange = $.fn.asRange; 803 | 804 | function jQueryAsRange(options, ...args) { 805 | if (typeof options === 'string') { 806 | const method = options; 807 | 808 | if (/^_/.test(method)) { 809 | return false; 810 | } else if (/^(get)$/.test(method) || method === 'val' && args.length === 0) { 811 | const instance = this.first().data(NAMESPACE); 812 | if (instance && typeof instance[method] === 'function') { 813 | return instance[method](...args); 814 | } 815 | } else { 816 | return this.each(function () { 817 | const instance = $.data(this, NAMESPACE); 818 | if (instance && typeof instance[method] === 'function') { 819 | instance[method](...args); 820 | } 821 | }); 822 | } 823 | } 824 | 825 | return this.each(function () { 826 | if (!$(this).data(NAMESPACE)) { 827 | $(this).data(NAMESPACE, new asRange(this, options)); 828 | } 829 | }); 830 | } 831 | 832 | $.fn.asRange = jQueryAsRange; 833 | 834 | $.asRange = $.extend({ 835 | setDefaults: asRange.setDefaults, 836 | noConflict() { 837 | $.fn.asRange = OtherAsRange; 838 | return jQueryAsRange; 839 | } 840 | }, info); 841 | -------------------------------------------------------------------------------- /dist/jquery-asRange.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * asRange v0.3.4 3 | * https://github.com/amazingSurge/jquery-asRange 4 | * 5 | * Copyright (c) amazingSurge 6 | * Released under the LGPL-3.0 license 7 | */ 8 | !function(t,e){if("function"==typeof define&&define.amd)define(["jquery"],e);else if("undefined"!=typeof exports)e(require("jquery"));else{var i={exports:{}};e(t.jQuery),t.jqueryAsRangeEs=i.exports}}(this,function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t){var e=t.originalEvent;return e.touches&&e.touches.length&&e.touches[0]&&(e=e.touches[0]),e}function s(t){for(var e=arguments.length,i=Array(e>1?e-1:0),s=1;s=this.parent.max&&(t=this.parent.max)),this.value=t,this.updatePosition(),this.$element.focus(),this.$element.trigger(this.parent.namespace+"::move",this))}},{key:"updatePosition",value:function(){var t={};t[this.parent.direction.position]=this.getPercent()+"%",this.$element.css(t)}},{key:"getPercent",value:function(){return(this.value-this.parent.min)/this.parent.interval*100}},{key:"get",value:function(){return this.value}},{key:"matchStep",value:function(t){var e=this.parent.step,i=e.toString().split(".")[1];return t=Math.round(t/e)*e,i&&(t=t.toFixed(i.length)),parseFloat(t)}},{key:"matchLimit",value:function(t){var e=void 0,i=void 0,s=this.parent.pointer;return e=1===this.uid?this.parent.min:s[this.uid-2].value,i=s[this.uid]&&null!==s[this.uid].value?s[this.uid].value:this.parent.max,t<=e&&(t=e),t>=i&&(t=i),t}},{key:"destroy",value:function(){this.$element.off(".asRange"),this.$element.remove()}}]),t}(),l={defaults:{scale:{valuesNumber:3,gap:1,grid:5}},init:function(t){var e=n.default.extend({},this.defaults,t.options.scale).scale;e.values=[],e.values.push(t.min);for(var i=(t.max-t.min)/(e.valuesNumber-1),s=1;s<=e.valuesNumber-2;s++)e.values.push(i*s);e.values.push(t.max);var a={scale:t.namespace+"-scale",lines:t.namespace+"-scale-lines",grid:t.namespace+"-scale-grid",inlineGrid:t.namespace+"-scale-inlineGrid",values:t.namespace+"-scale-values"},o=e.values.length,r=((e.grid-1)*(e.gap+1)+e.gap)*(o-1)+o,u=100/(r-1),l=100/(o-1);this.$scale=(0,n.default)("
      ").addClass(a.scale),this.$lines=(0,n.default)("
        ").addClass(a.lines),this.$values=(0,n.default)("
          ").addClass(a.values);for(var h=0;h'):h%e.grid==0?(0,n.default)('
        • '):(0,n.default)("
        • ")).css({left:u*h+"%"}).appendTo(this.$lines)}for(var p=0;p"+e.values[p]+"").css({left:l*p+"%"}).appendTo(this.$values);this.$lines.add(this.$values).appendTo(this.$scale),this.$scale.appendTo(t.$wrap)},update:function(t){this.$scale.remove(),this.init(t)}},h={defaults:{},init:function(t){var e=this;if(this.$arrow=(0,n.default)("").appendTo(t.$wrap),this.$arrow.addClass(t.namespace+"-selected"),!1===t.options.range&&t.p1.$element.on(t.namespace+"::move",function(t,i){e.$arrow.css({left:0,width:i.getPercent()+"%"})}),!0===t.options.range){var i=function(){var i=t.p2.getPercent()-t.p1.getPercent(),s=void 0;i>=0?s=t.p1.getPercent():(i=-i,s=t.p2.getPercent()),e.$arrow.css({left:s+"%",width:i+"%"})};t.p1.$element.on(t.namespace+"::move",i),t.p2.$element.on(t.namespace+"::move",i)}}},p={defaults:{active:"always"},init:function(t){var e=this,i=n.default.extend({},this.defaults,t.options.tip);this.opts=i,this.classes={tip:t.namespace+"-tip",show:t.namespace+"-tip-show"},n.default.each(t.pointer,function(i,s){var o=(0,n.default)("").appendTo(t.pointer[i].$element);o.addClass(e.classes.tip),"onMove"===e.opts.active&&(o.css({display:"none"}),s.$element.on(t.namespace+"::moveEnd",function(){return e.hide(o),!1}).on(t.namespace+"::moveStart",function(){return e.show(o),!1})),s.$element.on(t.namespace+"::move",function(){var e=void 0;if(e=t.options.range?t.get()[i]:t.get(),"function"==typeof t.options.format)if(t.options.replaceFirst&&"number"!=typeof e){if("string"==typeof t.options.replaceFirst&&(e=t.options.replaceFirst),"object"===a(t.options.replaceFirst))for(var s in t.options.replaceFirst)Object.hasOwnProperty(t.options.replaceFirst,s)&&(e=t.options.replaceFirst[s])}else e=t.options.format(e);return o.text(e),!1})})},show:function(t){t.addClass(this.classes.show),t.css({display:"block"})},hide:function(t){t.removeClass(this.classes.show),t.css({display:"none"})}},c={},d=function(){function t(i,s){var a=this;e(this,t);var o={};if(this.element=i,this.$element=(0,n.default)(i),this.$element.is("input")){var u=this.$element.val();"string"==typeof u&&(o.value=u.split(",")),n.default.each(["min","max","step"],function(t,e){var i=parseFloat(a.$element.attr(e));isNaN(i)||(o[e]=i)}),this.$element.css({display:"none"}),this.$wrap=(0,n.default)("
          "),this.$element.after(this.$wrap)}else this.$wrap=this.$element;if(this.options=n.default.extend({},r,s,this.$element.data(),o),this.namespace=this.options.namespace,this.components=n.default.extend(!0,{},c),this.options.range&&(this.options.replaceFirst=!1),this.value=this.options.value,null===this.value&&(this.value=this.options.min),this.options.range?n.default.isArray(this.value)?1===this.value.length&&(this.value[1]=this.value[0]):this.value=[this.value,this.value]:n.default.isArray(this.value)&&(this.value=this.value[0]),this.min=this.options.min,this.max=this.options.max,this.step=this.options.step,this.interval=this.max-this.min,this.initialized=!1,this.updating=!1,this.disabled=!1,"v"===this.options.direction?this.direction={axis:"pageY",position:"top"}:this.direction={axis:"pageX",position:"left"},this.$wrap.addClass(this.namespace),this.options.skin&&this.$wrap.addClass(this.namespace+"_"+this.options.skin),this.max=this.interval)throw new Error("error options about max min step");this.init()}return o(t,[{key:"init",value:function(){this.$wrap.append('
          '),this.buildPointers(),this.components.selected.init(this),!1!==this.options.tip&&this.components.tip.init(this),!1!==this.options.scale&&this.components.scale.init(this),this.set(this.value),this.bindEvents(),this._trigger("ready"),this.initialized=!0}},{key:"_trigger",value:function(t){for(var e=arguments.length,i=Array(e>1?e-1:0),s=1;s
          ').appendTo(this.$wrap),s=new u(i,e,this);this.pointer.push(s)}this.p1=this.pointer[0],this.options.range&&(this.p2=this.pointer[1])}},{key:"bindEvents",value:function(){var t=this,e=this;this.$wrap.on("touchstart.asRange mousedown.asRange",function(t){if(!0!==e.disabled){if((t=i(t)).which?3===t.which:2===t.button)return!1;var s=e.$wrap.offset(),n=t[e.direction.axis]-s[e.direction.position];return e.getAdjacentPointer(n).mousedown(t),!1}}),this.$element.is("input")&&this.$element.on(this.namespace+"::change",function(){var e=t.get();t.$element.val(e)}),n.default.each(this.pointer,function(i,s){s.$element.on(t.namespace+"::move",function(){return e.value=e.get(),!(!e.initialized||e.updating)&&(e._trigger("change",e.value),!1)})})}},{key:"getValueFromPosition",value:function(t){return t>0?this.min+t/this.getLength()*this.interval:0}},{key:"getAdjacentPointer",value:function(t){var e=this.getValueFromPosition(t);if(this.options.range){var i=this.p1.value,s=this.p2.value,n=Math.abs(i-s);return i<=s?e>i+n/2?this.p2:this.p1:e>s+n/2?this.p1:this.p2}return this.p1}},{key:"getLength",value:function(){return"v"===this.options.direction?this.$wrap.height():this.$wrap.width()}},{key:"update",value:function(t){var e=this;this.updating=!0,n.default.each(["max","min","step","limit","value"],function(i,s){t[s]&&(e[s]=t[s])}),(t.max||t.min)&&this.setInterval(t.min,t.max),t.value||(this.value=t.min),n.default.each(this.components,function(t,i){"function"==typeof i.update&&i.update(e)}),this.set(this.value),this._trigger("update"),this.updating=!1}},{key:"get",value:function(){var t=[];if(n.default.each(this.pointer,function(e,i){t[e]=i.get()}),this.options.range)return t;if(t[0]===this.options.min&&("string"==typeof this.options.replaceFirst&&(t[0]=this.options.replaceFirst),"object"===a(this.options.replaceFirst)))for(var e in this.options.replaceFirst)Object.hasOwnProperty(this.options.replaceFirst,e)&&(t[0]=e);return t[0]}},{key:"set",value:function(t){if(this.options.range){if("number"==typeof t&&(t=[t]),!n.default.isArray(t))return;n.default.each(this.pointer,function(e,i){i.set(t[e])})}else this.p1.set(t);this.value=t}},{key:"val",value:function(t){return t?(this.set(t),this):this.get()}},{key:"setInterval",value:function(t,e){this.min=t,this.max=e,this.interval=e-t}},{key:"enable",value:function(){return this.disabled=!1,this.$wrap.removeClass(this.namespace+"_disabled"),this._trigger("enable"),this}},{key:"disable",value:function(){return this.disabled=!0,this.$wrap.addClass(this.namespace+"_disabled"),this._trigger("disable"),this}},{key:"destroy",value:function(){n.default.each(this.pointer,function(t,e){e.destroy()}),this.$wrap.destroy(),this._trigger("destroy")}}],[{key:"registerComponent",value:function(t,e){c[t]=e}},{key:"setDefaults",value:function(t){n.default.extend(r,n.default.isPlainObject(t)&&t)}}]),t}();d.registerComponent("scale",l),d.registerComponent("selected",h),d.registerComponent("tip",p),function(){var t=(0,n.default)(document);t.on("asRange::ready",function(e,i){var s=void 0,a={keys:{UP:38,DOWN:40,LEFT:37,RIGHT:39,RETURN:13,ESCAPE:27,BACKSPACE:8,SPACE:32},map:{},bound:!1,press:function(t){var e=t.keyCode||t.which;if(e in a.map&&"function"==typeof a.map[e])return a.map[e](t),!1},attach:function(e){var i=void 0,s=void 0;for(i in e)e.hasOwnProperty(i)&&((s=i.toUpperCase())in a.keys?a.map[a.keys[s]]=e[i]:a.map[s]=e[i]);a.bound||(a.bound=!0,t.bind("keydown",a.press))},detach:function(){a.bound=!1,a.map={},t.unbind("keydown",a.press)}};!0===i.options.keyboard&&n.default.each(i.pointer,function(t,e){s=i.options.step?i.options.step:1;var n=function(){var t=e.value;e.set(t-s)},o=function(){var t=e.value;e.set(t+s)};e.$element.attr("tabindex","0").on("focus",function(){return a.attach({left:n,right:o}),!1}).on("blur",function(){return a.detach(),!1})})})}();var f={version:"0.3.4"},v="asRange",m=n.default.fn.asRange;n.default.fn.asRange=s,n.default.asRange=n.default.extend({setDefaults:d.setDefaults,noConflict:function(){return n.default.fn.asRange=m,s}},f)}); 9 | //# sourceMappingURL=jquery-asRange.min.js.map 10 | -------------------------------------------------------------------------------- /examples/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Boilerplate 3 | * 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html, 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | color: #222; 19 | } 20 | 21 | body { 22 | font-size: 1em; 23 | line-height: 1.4; 24 | } 25 | 26 | /* 27 | * Remove text-shadow in selection highlight: h5bp.com/i 28 | * These selection declarations have to be separate. 29 | * Customize the background color to match your design. 30 | */ 31 | 32 | ::-moz-selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | ::selection { 38 | background: #b3d4fc; 39 | text-shadow: none; 40 | } 41 | 42 | /* 43 | * A better looking default horizontal rule 44 | */ 45 | 46 | hr { 47 | display: block; 48 | height: 1px; 49 | border: 0; 50 | border-top: 1px solid #ccc; 51 | margin: 1em 0; 52 | padding: 0; 53 | } 54 | 55 | /* 56 | * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 57 | */ 58 | 59 | img { 60 | vertical-align: middle; 61 | } 62 | 63 | /* 64 | * Remove default fieldset styles. 65 | */ 66 | 67 | fieldset { 68 | border: 0; 69 | margin: 0; 70 | padding: 0; 71 | } 72 | 73 | /* 74 | * Allow only vertical resizing of textareas. 75 | */ 76 | 77 | textarea { 78 | resize: vertical; 79 | } 80 | 81 | /* ========================================================================== 82 | Chrome Frame prompt 83 | ========================================================================== */ 84 | 85 | .chromeframe { 86 | margin: 0.2em 0; 87 | background: #ccc; 88 | color: #000; 89 | padding: 0.2em 0; 90 | } 91 | 92 | /* ========================================================================== 93 | Author's custom styles 94 | ========================================================================== */ 95 | #toc { 96 | top: 0px; 97 | left: 0px; 98 | height: 100%; 99 | position: fixed; 100 | background: #333; 101 | box-shadow: inset -5px 0 5px 0px #000; 102 | width: 150px; 103 | padding-top: 20px; 104 | color: #fff; 105 | } 106 | 107 | #toc ul { 108 | margin: 0; 109 | padding: 0; 110 | list-style: none; 111 | } 112 | 113 | #toc li { 114 | padding: 5px 10px; 115 | } 116 | 117 | #toc a { 118 | color: #fff; 119 | text-decoration: none; 120 | display: block; 121 | } 122 | 123 | #toc .toc-h2 { 124 | padding-left: 10px; 125 | } 126 | 127 | #toc .toc-h3 { 128 | padding-left: 20px; 129 | } 130 | 131 | #toc .toc-active { 132 | background: #336699; 133 | box-shadow: inset -5px 0px 10px -5px #000; 134 | } 135 | 136 | #wrapper { 137 | margin: 0 20px 0 170px; 138 | } 139 | code, pre { 140 | font-size: 12px; 141 | } 142 | 143 | 144 | .example { 145 | background-color: #f0f0f0; 146 | margin-top: 0; 147 | padding: 1em; 148 | } 149 | 150 | 151 | 152 | /* positons */ 153 | .position_tooltip,.show { 154 | margin: 0.5em; 155 | background: #ddddff; 156 | padding: 10px; 157 | cursor: default; 158 | float:left; 159 | width: 100px; 160 | text-align: center; 161 | } 162 | .show { 163 | width: auto; 164 | } 165 | .trace { 166 | width: 200px; 167 | height: 100px; 168 | } 169 | .positon_wrap { 170 | overflow: hidden; 171 | } 172 | .position_tooltip:nth-child(3n+1){ 173 | clear:left; 174 | } 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | /* ========================================================================== 184 | Helper classes 185 | ========================================================================== */ 186 | 187 | /* 188 | * Image replacement 189 | */ 190 | 191 | .ir { 192 | background-color: transparent; 193 | border: 0; 194 | overflow: hidden; 195 | /* IE 6/7 fallback */ 196 | *text-indent: -9999px; 197 | } 198 | 199 | .ir:before { 200 | content: ""; 201 | display: block; 202 | width: 0; 203 | height: 100%; 204 | } 205 | 206 | /* 207 | * Hide from both screenreaders and browsers: h5bp.com/u 208 | */ 209 | 210 | .hidden { 211 | display: none !important; 212 | visibility: hidden; 213 | } 214 | 215 | /* 216 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 217 | */ 218 | 219 | .visuallyhidden { 220 | border: 0; 221 | clip: rect(0 0 0 0); 222 | height: 1px; 223 | margin: -1px; 224 | overflow: hidden; 225 | padding: 0; 226 | position: absolute; 227 | width: 1px; 228 | } 229 | 230 | /* 231 | * Extends the .visuallyhidden class to allow the element to be focusable 232 | * when navigated to via the keyboard: h5bp.com/p 233 | */ 234 | 235 | .visuallyhidden.focusable:active, 236 | .visuallyhidden.focusable:focus { 237 | clip: auto; 238 | height: auto; 239 | margin: 0; 240 | overflow: visible; 241 | position: static; 242 | width: auto; 243 | } 244 | 245 | /* 246 | * Hide visually and from screenreaders, but maintain layout 247 | */ 248 | 249 | .invisible { 250 | visibility: hidden; 251 | } 252 | 253 | /* 254 | * Clearfix: contain floats 255 | * 256 | * For modern browsers 257 | * 1. The space content is one way to avoid an Opera bug when the 258 | * `contenteditable` attribute is included anywhere else in the document. 259 | * Otherwise it causes space to appear at the top and bottom of elements 260 | * that receive the `clearfix` class. 261 | * 2. The use of `table` rather than `block` is only necessary if using 262 | * `:before` to contain the top-margins of child elements. 263 | */ 264 | 265 | .clearfix:before, 266 | .clearfix:after { 267 | content: " "; /* 1 */ 268 | display: table; /* 2 */ 269 | } 270 | 271 | .clearfix:after { 272 | clear: both; 273 | } 274 | 275 | /* 276 | * For IE 6/7 only 277 | * Include this rule to trigger hasLayout and contain floats. 278 | */ 279 | 280 | .clearfix { 281 | *zoom: 1; 282 | } 283 | 284 | /* ========================================================================== 285 | EXAMPLE Media Queries for Responsive Design. 286 | Theses examples override the primary ('mobile first') styles. 287 | Modify as content requires. 288 | ========================================================================== */ 289 | 290 | @media only screen and (min-width: 35em) { 291 | /* Style adjustments for viewports that meet the condition */ 292 | } 293 | 294 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 295 | only screen and (min-resolution: 144dpi) { 296 | /* Style adjustments for high resolution devices */ 297 | } 298 | 299 | /* ========================================================================== 300 | Print styles. 301 | Inlined to avoid required HTTP connection: h5bp.com/r 302 | ========================================================================== */ 303 | 304 | @media print { 305 | * { 306 | background: transparent !important; 307 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 308 | box-shadow:none !important; 309 | text-shadow: none !important; 310 | } 311 | 312 | a, 313 | a:visited { 314 | text-decoration: underline; 315 | } 316 | 317 | a[href]:after { 318 | content: " (" attr(href) ")"; 319 | } 320 | 321 | abbr[title]:after { 322 | content: " (" attr(title) ")"; 323 | } 324 | 325 | /* 326 | * Don't show links for images, or javascript/internal links 327 | */ 328 | 329 | .ir a:after, 330 | a[href^="javascript:"]:after, 331 | a[href^="#"]:after { 332 | content: ""; 333 | } 334 | 335 | pre, 336 | blockquote { 337 | border: 1px solid #999; 338 | page-break-inside: avoid; 339 | } 340 | 341 | thead { 342 | display: table-header-group; /* h5bp.com/t */ 343 | } 344 | 345 | tr, 346 | img { 347 | page-break-inside: avoid; 348 | } 349 | 350 | img { 351 | max-width: 100% !important; 352 | } 353 | 354 | @page { 355 | margin: 0.5cm; 356 | } 357 | 358 | p, 359 | h2, 360 | h3 { 361 | orphans: 3; 362 | widows: 3; 363 | } 364 | 365 | h2, 366 | h3 { 367 | page-break-after: avoid; 368 | } 369 | } 370 | -------------------------------------------------------------------------------- /examples/css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | text-shadow: 0 1px white; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | 17 | -moz-tab-size: 4; 18 | -o-tab-size: 4; 19 | tab-size: 4; 20 | 21 | -webkit-hyphens: none; 22 | -moz-hyphens: none; 23 | -ms-hyphens: none; 24 | hyphens: none; 25 | } 26 | 27 | /* Code blocks */ 28 | pre[class*="language-"] { 29 | padding: 1em; 30 | margin: .5em 0; 31 | overflow: auto; 32 | } 33 | 34 | :not(pre) > code[class*="language-"], 35 | pre[class*="language-"] { 36 | background: #f5f2f0; 37 | } 38 | 39 | /* Inline code */ 40 | :not(pre) > code[class*="language-"] { 41 | padding: .1em; 42 | border-radius: .3em; 43 | } 44 | 45 | .token.comment, 46 | .token.prolog, 47 | .token.doctype, 48 | .token.cdata { 49 | color: slategray; 50 | } 51 | 52 | .token.punctuation { 53 | color: #999; 54 | } 55 | 56 | .namespace { 57 | opacity: .7; 58 | } 59 | 60 | .token.property, 61 | .token.tag, 62 | .token.boolean, 63 | .token.number { 64 | color: #905; 65 | } 66 | 67 | .token.selector, 68 | .token.attr-name, 69 | .token.string { 70 | color: #690; 71 | } 72 | 73 | .token.operator, 74 | .token.entity, 75 | .token.url, 76 | .language-css .token.string, 77 | .style .token.string { 78 | color: #a67f59; 79 | background: hsla(0,0%,100%,.5); 80 | } 81 | 82 | .token.atrule, 83 | .token.attr-value, 84 | .token.keyword { 85 | color: #07a; 86 | } 87 | 88 | 89 | .token.regex, 90 | .token.important { 91 | color: #e90; 92 | } 93 | 94 | .token.important { 95 | font-weight: bold; 96 | } 97 | 98 | .token.entity { 99 | cursor: help; 100 | } 101 | -------------------------------------------------------------------------------- /examples/image/scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecreation/jquery-asRange/05b4bc50d6c3df3dda087b1893be84695bc32d89/examples/image/scale.png -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | asRange 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 55 | 56 | 57 | 60 | 61 |
          62 |
          63 |

          Modes

          64 |
          65 |

          asRange

          66 | 
          
 67 | $(".range-example-single").asRange({
 68 |     step: 10,
 69 |     limit: true,
 70 |     format: function(value) {
 71 |         return '$' + value;
 72 |     }
 73 | });
 74 |
          75 |
          76 |
          77 | 93 |
          94 |
          95 |
          96 |
          97 |
          98 |
          99 |
          100 |
          101 |
          102 | 
          
103 | $(".range-example-2").asRange({
104 |     range: true,
105 |     limit: true,
106 |     tip: {
107 |         active: 'onMove'
108 |     }
109 | });
110 |
          111 |
          112 | 124 |
          125 |
          126 | 127 |
          128 |
          129 | 
          
130 | $(".range-example-2").asRange({
131 |     range: true,
132 |     limit: true,
133 |     tip: {
134 |         active: 'onMove'
135 |     },
136 |     keyboard: true
137 | });
138 |
          139 |
          140 | 152 |
          153 |
          154 |
          155 | 
          
156 | $(".range-example-5").asRange({
157 |     step: 0.1,
158 |     range: false,
159 |     min: 0,
160 |     max: 10
161 | });
          162 |
          163 |
          164 | 174 |
          175 |
          176 |
          177 | 
          
178 | $(".range-example-3").asRange({
179 |     range: true,
180 |     limit: false
181 | });
          182 |
          183 |
          184 | 192 |
          193 |
          194 |
          195 | 
          
196 | $(".range-example-4").asRange({
197 |     tip: false,
198 |     range: true,
199 |     limit: false
200 | });
          201 |
          202 |
          203 | 212 |
          213 |
          214 |
          215 | 
          
216 | $(".range-example-single-1").asRange({
217 |     step: 0.01,
218 |     range: false,
219 |     min: 0,
220 |     max: 1
221 | });
          222 |
          223 |
          224 | 225 | 244 |
          245 |
          246 |
          247 | 
          
248 | $(".range-example-start").asRange({
249 |     step: 1,
250 |     range: false,
251 |     min: 2,
252 |     max: 12
253 | });
          254 |
          255 |
          256 | 266 |
          267 |
          268 |
          269 |

          build on input

          270 | 
          
271 | $(".range-example-input").asRange({
272 |     range: false,
273 |     limit: false
274 | });
          275 |
          276 |
          277 | 278 | 279 |
          280 | 288 |
          289 |
          290 |
          291 |

          build on input with range

          292 | 
          
293 | $(".range-example-input-2").asRange({
294 |     range: true,
295 |     limit: false
296 | });
          297 |
          298 |
          299 | 300 | 301 |
          302 | 310 |
          311 |
          312 |
          313 |

          build on input with range

          314 | 
          
315 | $(".range-example-input-3").asRange({
316 |     range: true,
317 |     limit: false
318 | });
          319 |
          320 |
          321 | 322 | 323 |
          324 | 332 |
          333 |
          334 |
          335 |

          build on input with range

          336 | 
          
337 | $(".range-example-input-4").asRange({
338 |     range: false,
339 |     limit: false
340 | });
          341 |
          342 |
          343 | 344 | 345 |
          346 | 354 |
          355 |
          356 |
          357 |

          build on input with range

          358 | 
          
359 | $(".range-example-input-5").asRange({
360 |     range: true,
361 |     limit: false
362 | });
          363 |
          364 |
          365 | 366 | 367 |
          368 | 376 |
          377 |
          378 |
          379 |
          380 | 385 | 386 | 387 | -------------------------------------------------------------------------------- /examples/js/jquery.mousewheel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Mousewheel 3.1.13 3 | * 4 | * Copyright jQuery Foundation and other contributors 5 | * Released under the MIT license 6 | * http://jquery.org/license 7 | */ 8 | 9 | (function (factory) { 10 | if ( typeof define === 'function' && define.amd ) { 11 | // AMD. Register as an anonymous module. 12 | define(['jquery'], factory); 13 | } else if (typeof exports === 'object') { 14 | // Node/CommonJS style for Browserify 15 | module.exports = factory; 16 | } else { 17 | // Browser globals 18 | factory(jQuery); 19 | } 20 | }(function ($) { 21 | 22 | var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'], 23 | toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ? 24 | ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'], 25 | slice = Array.prototype.slice, 26 | nullLowestDeltaTimeout, lowestDelta; 27 | 28 | if ( $.event.fixHooks ) { 29 | for ( var i = toFix.length; i; ) { 30 | $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; 31 | } 32 | } 33 | 34 | var special = $.event.special.mousewheel = { 35 | version: '3.1.12', 36 | 37 | setup: function() { 38 | if ( this.addEventListener ) { 39 | for ( var i = toBind.length; i; ) { 40 | this.addEventListener( toBind[--i], handler, false ); 41 | } 42 | } else { 43 | this.onmousewheel = handler; 44 | } 45 | // Store the line height and page height for this particular element 46 | $.data(this, 'mousewheel-line-height', special.getLineHeight(this)); 47 | $.data(this, 'mousewheel-page-height', special.getPageHeight(this)); 48 | }, 49 | 50 | teardown: function() { 51 | if ( this.removeEventListener ) { 52 | for ( var i = toBind.length; i; ) { 53 | this.removeEventListener( toBind[--i], handler, false ); 54 | } 55 | } else { 56 | this.onmousewheel = null; 57 | } 58 | // Clean up the data we added to the element 59 | $.removeData(this, 'mousewheel-line-height'); 60 | $.removeData(this, 'mousewheel-page-height'); 61 | }, 62 | 63 | getLineHeight: function(elem) { 64 | var $elem = $(elem), 65 | $parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent'](); 66 | if (!$parent.length) { 67 | $parent = $('body'); 68 | } 69 | return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16; 70 | }, 71 | 72 | getPageHeight: function(elem) { 73 | return $(elem).height(); 74 | }, 75 | 76 | settings: { 77 | adjustOldDeltas: true, // see shouldAdjustOldDeltas() below 78 | normalizeOffset: true // calls getBoundingClientRect for each event 79 | } 80 | }; 81 | 82 | $.fn.extend({ 83 | mousewheel: function(fn) { 84 | return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel'); 85 | }, 86 | 87 | unmousewheel: function(fn) { 88 | return this.unbind('mousewheel', fn); 89 | } 90 | }); 91 | 92 | 93 | function handler(event) { 94 | var orgEvent = event || window.event, 95 | args = slice.call(arguments, 1), 96 | delta = 0, 97 | deltaX = 0, 98 | deltaY = 0, 99 | absDelta = 0, 100 | offsetX = 0, 101 | offsetY = 0; 102 | event = $.event.fix(orgEvent); 103 | event.type = 'mousewheel'; 104 | 105 | // Old school scrollwheel delta 106 | if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; } 107 | if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; } 108 | if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; } 109 | if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; } 110 | 111 | // Firefox < 17 horizontal scrolling related to DOMMouseScroll event 112 | if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { 113 | deltaX = deltaY * -1; 114 | deltaY = 0; 115 | } 116 | 117 | // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy 118 | delta = deltaY === 0 ? deltaX : deltaY; 119 | 120 | // New school wheel delta (wheel event) 121 | if ( 'deltaY' in orgEvent ) { 122 | deltaY = orgEvent.deltaY * -1; 123 | delta = deltaY; 124 | } 125 | if ( 'deltaX' in orgEvent ) { 126 | deltaX = orgEvent.deltaX; 127 | if ( deltaY === 0 ) { delta = deltaX * -1; } 128 | } 129 | 130 | // No change actually happened, no reason to go any further 131 | if ( deltaY === 0 && deltaX === 0 ) { return; } 132 | 133 | // Need to convert lines and pages to pixels if we aren't already in pixels 134 | // There are three delta modes: 135 | // * deltaMode 0 is by pixels, nothing to do 136 | // * deltaMode 1 is by lines 137 | // * deltaMode 2 is by pages 138 | if ( orgEvent.deltaMode === 1 ) { 139 | var lineHeight = $.data(this, 'mousewheel-line-height'); 140 | delta *= lineHeight; 141 | deltaY *= lineHeight; 142 | deltaX *= lineHeight; 143 | } else if ( orgEvent.deltaMode === 2 ) { 144 | var pageHeight = $.data(this, 'mousewheel-page-height'); 145 | delta *= pageHeight; 146 | deltaY *= pageHeight; 147 | deltaX *= pageHeight; 148 | } 149 | 150 | // Store lowest absolute delta to normalize the delta values 151 | absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) ); 152 | 153 | if ( !lowestDelta || absDelta < lowestDelta ) { 154 | lowestDelta = absDelta; 155 | 156 | // Adjust older deltas if necessary 157 | if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { 158 | lowestDelta /= 40; 159 | } 160 | } 161 | 162 | // Adjust older deltas if necessary 163 | if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { 164 | // Divide all the things by 40! 165 | delta /= 40; 166 | deltaX /= 40; 167 | deltaY /= 40; 168 | } 169 | 170 | // Get a whole, normalized value for the deltas 171 | delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta); 172 | deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta); 173 | deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta); 174 | 175 | // Normalise offsetX and offsetY properties 176 | if ( special.settings.normalizeOffset && this.getBoundingClientRect ) { 177 | var boundingRect = this.getBoundingClientRect(); 178 | offsetX = event.clientX - boundingRect.left; 179 | offsetY = event.clientY - boundingRect.top; 180 | } 181 | 182 | // Add information to the event object 183 | event.deltaX = deltaX; 184 | event.deltaY = deltaY; 185 | event.deltaFactor = lowestDelta; 186 | event.offsetX = offsetX; 187 | event.offsetY = offsetY; 188 | // Go ahead and set deltaMode to 0 since we converted to pixels 189 | // Although this is a little odd since we overwrite the deltaX/Y 190 | // properties with normalized deltas. 191 | event.deltaMode = 0; 192 | 193 | // Add event and delta to the front of the arguments 194 | args.unshift(event, delta, deltaX, deltaY); 195 | 196 | // Clearout lowestDelta after sometime to better 197 | // handle multiple device types that give different 198 | // a different lowestDelta 199 | // Ex: trackpad = 3 and mouse wheel = 120 200 | if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); } 201 | nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200); 202 | 203 | return ($.event.dispatch || $.event.handle).apply(this, args); 204 | } 205 | 206 | function nullLowestDelta() { 207 | lowestDelta = null; 208 | } 209 | 210 | function shouldAdjustOldDeltas(orgEvent, absDelta) { 211 | // If this is an older event and the delta is divisable by 120, 212 | // then we are assuming that the browser is treating this as an 213 | // older mouse wheel event and that we should divide the deltas 214 | // by 40 to try and get a more usable deltaFactor. 215 | // Side note, this actually impacts the reported scroll distance 216 | // in older browsers and can cause scrolling to be slower than native. 217 | // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false. 218 | return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0; 219 | } 220 | 221 | })); 222 | -------------------------------------------------------------------------------- /examples/js/jquery.toc.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.toc.js - A jQuery plugin that will automatically generate a table of contents. 3 | * v0.1.1 4 | * https://github.com/jgallen23/toc 5 | * copyright JGA 2012 6 | * MIT License 7 | */ 8 | 9 | !function($) { 10 | $.fn.toc = function(options) { 11 | var self = this; 12 | var opts = $.extend({}, jQuery.fn.toc.defaults, options); 13 | 14 | var container = $(opts.container); 15 | var headings = $(opts.selectors, container); 16 | var headingOffsets = []; 17 | var activeClassName = opts.prefix+'-active'; 18 | 19 | var findScrollableElement = function(els) { 20 | for (var i = 0, argLength = arguments.length; i < argLength; i++) { 21 | var el = arguments[i], 22 | $scrollElement = $(el); 23 | if ($scrollElement.scrollTop() > 0) { 24 | return $scrollElement; 25 | } else { 26 | $scrollElement.scrollTop(1); 27 | var isScrollable = $scrollElement.scrollTop() > 0; 28 | $scrollElement.scrollTop(0); 29 | if (isScrollable) { 30 | return $scrollElement; 31 | } 32 | } 33 | } 34 | return []; 35 | }; 36 | var scrollable = findScrollableElement(opts.container, 'body', 'html'); 37 | 38 | var scrollTo = function(e) { 39 | if (opts.smoothScrolling) { 40 | e.preventDefault(); 41 | var elScrollTo = $(e.target).attr('href'); 42 | var $el = $(elScrollTo); 43 | 44 | scrollable.animate({ scrollTop: $el.offset().top }, 400, 'swing', function() { 45 | location.hash = elScrollTo; 46 | }); 47 | } 48 | $('li', self).removeClass(activeClassName); 49 | $(e.target).parent().addClass(activeClassName); 50 | }; 51 | 52 | //highlight on scroll 53 | var timeout; 54 | var highlightOnScroll = function(e) { 55 | if (timeout) { 56 | clearTimeout(timeout); 57 | } 58 | timeout = setTimeout(function() { 59 | var top = $(window).scrollTop(), 60 | highlighted; 61 | for (var i = 0, c = headingOffsets.length; i < c; i++) { 62 | if (headingOffsets[i] >= top) { 63 | $('li', self).removeClass(activeClassName); 64 | highlighted = $('li:eq('+(i-1)+')', self).addClass(activeClassName); 65 | opts.onHighlight(highlighted); 66 | break; 67 | } 68 | } 69 | }, 50); 70 | }; 71 | if (opts.highlightOnScroll) { 72 | $(window).bind('scroll', highlightOnScroll); 73 | highlightOnScroll(); 74 | } 75 | 76 | return this.each(function() { 77 | //build TOC 78 | var el = $(this); 79 | var ul = $('