CHANGELOG.md

@@ -1,3 +1,110 @@
-# 1.1.0
+# Change Log
+
+## v3.1.2
+
+ - fix bug: mobile device isn't properly supported
+ - upgrade dependencies
+
+
+## v3.1.1
+
+ - fix bug: `setConfig()` should also prepare default values for missing configs.
+
+
+## v3.1.0
+
+ - support `unit` option
+
+
+## v3.0.6
+
+ - tweak ui layout by increasing height with 2px
+
+
+## v3.0.5
+
+ - properly format values in input element 
+ - upgrade dev modules
+
+
+## v3.0.4
+
+ - upgrade modules to fix vulnerabilities
+ - fix bug: resizeObserver should be installed after root is correctly set
+
+
+## v3.0.3
+
+ - add resizeObserver to fix slider rendering bug when off screen.
+
+
+## v3.0.2
+
+ - release with compact directory structure
+
+
+## v3.0.1
+
+ - remove `ldSlider` and keep `ldslider` since we expect to remove it in v3
+
+
+## v3.0.0
+
+ - rename `ldrs.js`, `ldrs.css` to `index.js`, `index.css`. also do the same to source files.
+ - add `main`, `browser` and `style` fields in `package.json`.
+ - further minimize js file with mangling and compression options.
+ - make build faster by bypassing `npx` command
+ - upgrade modules
+
+
+## v2.0.6
+
+ - fix bug: ldrs.update should check range flag.
+
+
+## v2.0.5
+
+ - remove postinstall to prevent from breaking dependency installation
+
+
+## v2.0.4
+
+ - add `ldslider` and deprecate `ldSlider`.
+
+
+## v2.0.3
+
+ - use `number ~ number` instead of `number to number` for input value.
+ - duse default value `0` for input value if parseFloat fails.
+
+
+## v2.0.2
+
+ - handle right-click issue
+
+
+## v2.0.1
+
+ - remove the dependency of ldiconfont by mimicing lock icon with pure CSS.
+
+
+## v2.0.0
+
+ - use `crash numbering gothic` font and tweak vertical offset, especially for Firefox.
+ - remove redundant and unnecessary width / right style in bar width
+ - align class name ( .lock-line to .line.lock, .ptr to .line.p )
+ - tweak stylus source code for better readability
+ - add crashing-number default font for consistent size.
+   - use `ldrs-default-font` for placeholder and easier plug-play.
+ - add font.styl which inline font directly.
+ - support range slider and custom variables for styling
+
+
+## v1.1.1
+
+ - upgrade modules
+
+
+## v1.1.0
 
  - rename package.

README.md

@@ -6,40 +6,31 @@ Slider Library in Vanilla JS. Support exponential scale.
 ## Usage
 
 
-1. download and include ldSlider [JS](https://github.com/loadingio/ldSlider/releases/latest/download/ldrs.min.js) / [CSS](https://github.com/loadingio/ldSlider/releases/latest/download/ldrs.min.css):
+1. download and include ldSlider [JS](https://github.com/loadingio/ldslider/releases/latest/download/ldrs.min.js) / [CSS](https://github.com/loadingio/ldslider/releases/latest/download/ldrs.min.css):
 
-```
     <link rel="stylesheet" type="text/css" href="ldrs.css"/>
     <script type="text/javascript" src="ldrs.js"></script>
-```
 
 you an use a CDN, such as, from jsDelivr:
 
-```
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/loadingio/ldslider@v1.0.0/dist/ldrs.min.css"/>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/loadingio/ldslider@v1.0.0/dist/ldrs.min.js"/>
-```
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/loadingio/ldslider@v1.0.0/dist/ldrs.min.css"/>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/gh/loadingio/ldslider@v1.0.0/dist/ldrs.min.js"/>
 
-2. create a new ldSlider instance for using ldSlider's API:
 
-```
-    ldrs = new ldSlider(configs);
+2. create a new ldslider instance for using ldSlider's API:
+
+    ldrs = new ldslider(configs);
     ldrs.set(value);
-```
 
 Example:
 
-```
     <div class="ldrs"></div>
-    <script> ldrs = new ldSlider({root: document.querySelector('.ldrs')}); </script>
-```
+    <script> ldrs = new ldslider({root: document.querySelector('.ldrs')}); </script>
 
-You can also use an input box to initialize ldSlider:
+You can also use an input box to initialize ldslider:
 
-```
     <input class="ldrs" data-class="form-control">
-    <script> ldrs = new ldSlider({root: document.querySelector('.ldrs')}); </script>
-```
+    <script> ldrs = new ldslider({root: document.querySelector('.ldrs')}); </script>
 
 In this case, a new `div` will be created and inserted before the `input` element, inherits all classes of the `input` element. The `input` element's type will be set to `hidden`.
 
@@ -48,50 +39,129 @@ You can use an optional `data-class` attribute in `input` to define the classes
 
 ## API
 
- * set(value, forceNotify): set slider's value. Notify listeners if forceNotify = true and value is changed.
- * get: get slider's value.
- * setConfig(config): update slider's config. 
- * on("change", cb): listen to value change.
- * edit(v): toggle input box on (v = true) or off (v = false). auto swtich if v is undefined.
+ - `set(value, forceNotify)`: set slider's value
+    - if `forceNotify` set to true, Notify listeners if value is changed.
+    - value is a number with number slider, and is `{from, to}` object with range slider.
+ - `get()`: get slider's value. return number with number slider, and `{from,to}` object with range slider.
+ - `setConfig(config)`: update slider's config. 
+ - `on("change", cb(value))`: listen to value change.
+   - `value` parameter in `cb` is a number with number slider and `{from,to}` object with range slider.
+ - `edit(v)`: toggle input box on (v = true) or off (v = false). auto swtich if v is undefined.
    this only works if you init ldrs over input element.
- * update: update ui. useful when your slider is out of place ( sometimes due to toggle display and set value when widget is not visible.)
+ - `update()`: update ui. useful when your slider is out of place ( sometimes due to toggle display and set value when widget is not visible.)
 
 
 ## Configuration
 
- * root: when the range slider kicks in.
- * min: minimal value
- * max: maximal value
- * step: each step when dragging
- * from: default value
- * exp: setup exponential scale.
-   - exp.percent: when slider to move this percent ...
-   - exp.value: ... the value should be map to this percent. 
+ * `root`: when the range slider kicks in.
+ * `range`: true if it's a range slider.
+ * `min`: minimal value
+ * `max`: maximal value
+ * `step`: each step when dragging
+ * `from`: default value
+ * `to`: default value for alternative pointer. ( only effective in range slider )
+ * `exp`: setup exponential scale.
+   - `exp.percent`: when slider to move this percent ...
+   - `exp.value`: ... the value should be map to this percent. 
    - for example:
      - {output: 0.9, input: 0.1} lets the slider to output 90% from min to max when slider is in the 10% position.
      - {output: 0.5, input: 0.5} equals to linear scale.
- * label: custom label.
-   - label.min - text for showing in minimal value label
-   - label.max - text for showing in maximal value label
-   - label.ptr(v) - function that convert v ( value ) to the returned customized string that representing v.
+ * `label`: custom label.
+   - `label.min` - text for showing in minimal value label
+   - `label.max` - text for showing in maximal value label
+   - `label.ptr(v)` - function that convert v ( value ) to the returned customized string that representing v.
+ * `unit`: unit for showing in label
 
 
 ## Decorating Classes
 
 Add following css classes to decorate your range slider:
 
- * up - force all tips toward up.
- * ldrs-sm - small size slider
- * ldrs-lg - large size slider
+ * `up` - force all tips toward up.
+ * `ldrs.sm` - small size slider
+ * `ldrs.lg` - large size slider
+ * `ldrs.auto` - adjust slider size based on context font size
+ * `ldrs.auto.sm` - adjust slider size based on context font size, while make it smaller
+ * `ldrs.auto.lg` - adjust slider size based on context font size, while make it larger
 
 
 Some quick and useful tweaks:
 
+ * adjust label height 
+
+     /* line-height for label height */
+     .ldrs .hint { line-height: 1em }
+     /* overall height is affected so we have to tweak this too */
+     .ldrs { height: calc(2.58em) + 2px) }
+
+ * adjust text alignment within hint label:
+
+     /* tweak padding for text alignment. overall height part is omitted for simplicity */
+     .ldrs .hint { padding-bottom: 1px }
+
  * gap between bar and tips:
-   - .ldrs { height: 34px; }
-   - .ldrs .hint { top: 0; }
-   - .ldrs .bar { top: 18px; }
-   - .ldrs .ptr { top: 15px; }
+
+     .ldrs { height: 34px; }
+     .ldrs .hint { top: 0; }
+     .ldrs .bar { top: 18px; }
+     .ldrs .p { top: 15px; }
+
+
+## Restyling with CSS Variable
+
+Default colorschema of ldslider can be changed with CSS variables by adding `tone` class along with `ldrs` class:
+
+    <div class="ldrs tone"> ... </div>
+
+There are four variables:
+
+ - `--fg`: foreground color.
+ - `--bg`: background color.
+ - `--text`: active text color.
+ - `--text-muted`: muted text color.
+
+Here is an example with blue slider bar and yellow active text:
+
+
+    .ldrs.tone {
+      --fg: #09f
+      --bg: #eee
+      --text: #ff0
+      --text-muted: #aaa
+    }
+
+
+## DOM Structure
+
+    .ldrs
+      .bar
+        .cap
+        .cap
+        .bar-inner
+          .bk
+          .fg
+          .line.p     //- indicator line for chosen value
+          .line.lock  //- indicator line for lock value
+          .hint.p     //- chosen value pointer
+      .hint.l
+      .hint.lock
+      .hint.r
+
+
+## Off Screen Rendering Issue
+
+Off screen rendering of the slider may be incorrect because we don't have the correct box size. We use ResizeObserver to redraw so you will consider using ResizeObserver Polyfill in older browser.
+
+
+## Credit
+
+To provide a more consistent visual effect, ldslider embeds a number font directly in CSS: 
+
+ - [Crash Numbering Gothic](https://www.psyops.com/crash-numbering/), released under free license
+
+We expect to replace this with a more compact font file crafted exclusively for ldslider.
+
+The font-family value in ldrs.css is set to `ldrs-default-font` only for convenience.
 
 
 ## License

build

@@ -1,15 +1,19 @@
 #!/usr/bin/env bash
+rm -rf dist
 mkdir -p dist
-echo "build src/ldrs.ls -> dist/ldrs.js ..."
-./node_modules/.bin/lsc -cbp src/ldrs.ls > dist/ldrs.js
-echo "build src/ldrs.styl -> dist/ldrs.css ..."
-./node_modules/.bin/stylus -p src/ldrs.styl > dist/ldrs.css
-echo "minifying ldrs.js ..."
-./node_modules/.bin/uglifyjs dist/ldrs.js > dist/ldrs.min.js
-echo "minifying ldrs.css ..."
-./node_modules/.bin/uglifycss dist/ldrs.css > dist/ldrs.min.css
+echo "build src/index.ls -> dist/index.js ..."
+./node_modules/.bin/lsc -cp --no-header src/index.ls > dist/index.js
+echo "build src/font.styl -> dist/index.css ..."
+./node_modules/.bin/stylus -p src/font.styl > dist/index.css
+echo "build src/index.styl ->> dist/index.css ..."
+./node_modules/.bin/stylus -p src/index.styl >> dist/index.css
+echo "minifying index.js ..."
+./node_modules/.bin/uglifyjs dist/index.js -m -c > dist/index.min.js
+echo "minifying index.css ..."
+./node_modules/.bin/uglifycss dist/index.css > dist/index.min.css
 echo "copy dist files to web ..."
-mkdir -p web/static/assets/ldrs/
-cp -R dist/* web/static/assets/ldrs/
+rm -rf web/static/assets/lib/ldslider/
+mkdir -p web/static/assets/lib/ldslider/dev
+cp -R dist/* web/static/assets/lib/ldslider/dev/
 echo "done."