@flourish/ui-styles 6.0.0 → 6.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/RELEASE_NOTES.md +6 -0
  2. package/controls-style/settings.yml +3 -3
  3. package/package.json +15 -9
  4. package/rollup.config.mjs +11 -6
  5. package/src/button-style/index.js +59 -20
  6. package/src/dropdown-style/index.js +67 -27
  7. package/src/general-controls-style/index.js +19 -12
  8. package/src/index.js +6 -1
  9. package/src/lib/js2css.js +10 -9
  10. package/src/slider-style/index.js +31 -16
  11. package/ui-styles.js +277 -85
  12. package/ui-styles.min.js +1 -1
package/RELEASE_NOTES.md CHANGED
@@ -1,3 +1,9 @@
1
+ # 6.0.2
2
+ * Bump @flourish/pocket-knife to v2.3.1
3
+
4
+ # 6.0.1
5
+ * Remove repo from package.json
6
+
1
7
  # 6.0.0
2
8
  * Switch to preferring ESM by default on recent versions of Node.js by adding an `exports` field to `package.json`.
3
9
  * Run build script as part of `prepublishOnly` instead of `prepare`.
package/controls-style/settings.yml CHANGED
@@ -8,15 +8,15 @@
8
8
  step: 0.1
9
9
  - property: font_weight
10
10
  name: Text weight
11
- description:
11
+ description:
12
12
  type: string
13
13
  width: half
14
14
  min: 0
15
15
  step: 0.1
16
16
  style: buttons
17
17
  choices:
18
- - [ Bold, bold ]
19
- - [ Normal, normal ]
18
+ - [Bold, bold]
19
+ - [Normal, normal]
20
20
  - property: height
21
21
  name: Height
22
22
  type: number
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "6.0.0",
3
+ "version": "6.0.2",
4
4
  "private": false,
5
5
  "description": "Flourish module for styling UI elements",
6
6
  "main": "ui-styles.js",
@@ -9,26 +9,32 @@
9
9
  "license": "LicenseRef-LICENSE",
10
10
  "dependencies": {
11
11
  "d3-selection": "^1.4.0",
12
- "@flourish/pocket-knife": "^2.0.0"
12
+ "@flourish/pocket-knife": "^2.3.1"
13
13
  },
14
14
  "devDependencies": {
15
15
  "@babel/core": "^7.23.6",
16
16
  "@babel/preset-env": "^7.23.6",
17
17
  "@flourish/eslint-plugin-flourish": "^0.7.2",
18
18
  "@rollup/plugin-babel": "^6.0.4",
19
+ "@rollup/plugin-node-resolve": "^15.2.3",
19
20
  "eslint": "^8.35.0",
21
+ "only-allow": "^1.2.1",
20
22
  "rollup": "^4.6.1",
21
- "@rollup/plugin-node-resolve": "^15.2.3",
22
- "uglify-js": "^3.17.4"
23
- },
24
- "repository": {
25
- "type": "git",
26
- "url": "git://github.com/kiln/flourish-ui-styles.git"
23
+ "uglify-js": "^3.17.4",
24
+ "mocha": "^10.2.0",
25
+ "@flourish/mocha-env": "^1.0.0"
27
26
  },
28
27
  "exports": "./src/index.js",
28
+ "mocha": {
29
+ "spec": "**/*.test.{js,cjs,mjs,ts}",
30
+ "recursive": true,
31
+ "require": "@flourish/mocha-env"
32
+ },
29
33
  "scripts": {
30
34
  "lint": "eslint .",
31
35
  "build": "rollup -c",
32
- "minify": "uglifyjs -m -o ui-styles.min.js ui-styles.js"
36
+ "minify": "uglifyjs -m -o ui-styles.min.js ui-styles.js",
37
+ "mocha": "mocha",
38
+ "test": "npm run mocha"
33
39
  }
34
40
  }
package/rollup.config.mjs CHANGED
@@ -8,7 +8,7 @@ export default {
8
8
  output: {
9
9
  file: "ui-styles.js",
10
10
  format: "umd",
11
- name: "ui-styles"
11
+ name: "ui-styles",
12
12
  },
13
13
  plugins: [
14
14
  nodeResolve(),
@@ -18,12 +18,17 @@ export default {
18
18
  if (warning.code === "CIRCULAR_DEPENDENCY") return;
19
19
  if (warning.code === "UNRESOLVED_IMPORT") {
20
20
  throw new Error(
21
- "Couldn't resolve the dependency " + warning.source +
22
- " (from " + warning.importer + "): sometimes you can" +
23
- " fix this with 'npm install', or add '" + warning.source +
24
- " to 'external'. See: " + warning.url
21
+ "Couldn't resolve the dependency " +
22
+ warning.source +
23
+ " (from " +
24
+ warning.importer +
25
+ "): sometimes you can" +
26
+ " fix this with 'npm install', or add '" +
27
+ warning.source +
28
+ " to 'external'. See: " +
29
+ warning.url,
25
30
  );
26
31
  }
27
32
  warn(warning);
28
- }
33
+ },
29
34
  };
package/src/button-style/index.js CHANGED
@@ -14,12 +14,14 @@ var DEFAULTS = Object.freeze({
14
14
  border_width: 1,
15
15
  border_transparency: 0.25,
16
16
  border_color: null,
17
- border_radius: 3
17
+ border_radius: 3,
18
18
  });
19
19
 
20
20
  function ButtonStyle(state_, selector_, layout_) {
21
21
  this._state = state_;
22
- for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
22
+ for (var key in DEFAULTS) {
23
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
24
+ }
23
25
 
24
26
  this._layout = layout_ || {};
25
27
 
@@ -30,24 +32,34 @@ function ButtonStyle(state_, selector_, layout_) {
30
32
  return this;
31
33
  }
32
34
 
33
- ButtonStyle.prototype._createStylesheet = function() {
35
+ ButtonStyle.prototype._createStylesheet = function () {
34
36
  this._stylesheet = document.createElement("style");
35
37
  this._stylesheet.className = "fl-ui-styles-button";
36
38
  document.head.appendChild(this._stylesheet);
37
39
  };
38
40
 
39
- ButtonStyle.prototype.update = function() {
41
+ ButtonStyle.prototype.update = function () {
40
42
  this._styles.clear();
41
43
 
42
- var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
43
- var text_color = this._state.font_color || this._layout.font_color || "#333333";
44
- var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
44
+ var background_color =
45
+ this._state.background ||
46
+ (this._layout.background_color_enabled
47
+ ? this._layout.background_color || "#ffffff"
48
+ : "#ffffff");
49
+ var text_color =
50
+ this._state.font_color || this._layout.font_color || "#333333";
51
+ var border_color = hexToRgba(
52
+ this._state.border_color || text_color,
53
+ this._state.border_transparency,
54
+ );
45
55
  var read_direction = getTextDirection();
46
56
 
47
- this._styles.select(this._selector + ".fl-control.hidden")
57
+ this._styles
58
+ .select(this._selector + ".fl-control.hidden")
48
59
  .style("display", "none");
49
60
 
50
- this._styles.select(this._selector + ".fl-control .button")
61
+ this._styles
62
+ .select(this._selector + ".fl-control .button")
51
63
  .style("overflow", "hidden")
52
64
  .style("white-space", "nowrap")
53
65
  .style("margin", "0 2px 0 0 !important")
@@ -56,15 +68,18 @@ ButtonStyle.prototype.update = function() {
56
68
  .style("border", this._state.border_width + "px solid " + border_color)
57
69
  .style("border-radius", this._state.border_radius + "px");
58
70
 
59
- this._styles.select(this._selector + ".fl-control .button:hover")
71
+ this._styles
72
+ .select(this._selector + ".fl-control .button:hover")
60
73
  .style("background-color", this._state.background_hover || background_color)
61
74
  .style("color", this._state.font_color_hover || text_color);
62
75
 
63
- this._styles.select(this._selector + ".fl-control .button.selected")
76
+ this._styles
77
+ .select(this._selector + ".fl-control .button.selected")
64
78
  .style("background-color", this._state.background_selected)
65
79
  .style("color", this._state.font_color_selected);
66
80
 
67
- this._styles.select(this._selector + ".grouped.fl-control .button")
81
+ this._styles
82
+ .select(this._selector + ".grouped.fl-control .button")
68
83
  .style("border-right", "none")
69
84
  .style("border-radius", "0")
70
85
  .style("margin", "0");
@@ -73,14 +88,38 @@ ButtonStyle.prototype.update = function() {
73
88
  var left_most_button_selector = is_rtl ? ":last-child" : ":first-child";
74
89
  var right_most_button_selector = is_rtl ? ":first-child" : ":last-child";
75
90
 
76
- this._styles.select(this._selector + ".grouped.fl-control .button" + left_most_button_selector)
77
- .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
78
-
79
- this._styles.select(this._selector + ".grouped.fl-control .button" + right_most_button_selector)
80
- .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
81
- .style("border-right", this._state.border_width + "px solid " + border_color);
82
-
83
- this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
91
+ this._styles
92
+ .select(
93
+ this._selector +
94
+ ".grouped.fl-control .button" +
95
+ left_most_button_selector,
96
+ )
97
+ .style(
98
+ "border-radius",
99
+ this._state.border_radius + "px 0 0 " + this._state.border_radius + "px",
100
+ );
101
+
102
+ this._styles
103
+ .select(
104
+ this._selector +
105
+ ".grouped.fl-control .button" +
106
+ right_most_button_selector,
107
+ )
108
+ .style(
109
+ "border-radius",
110
+ "0 " +
111
+ this._state.border_radius +
112
+ "px " +
113
+ this._state.border_radius +
114
+ "px 0",
115
+ )
116
+ .style(
117
+ "border-right",
118
+ this._state.border_width + "px solid " + border_color,
119
+ );
120
+
121
+ this._styles
122
+ .select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
84
123
  .style("width", this._state.grouped_width + "%");
85
124
 
86
125
  this._stylesheet.innerHTML = this._styles.print();
package/src/dropdown-style/index.js CHANGED
@@ -9,12 +9,14 @@ var DEFAULTS = Object.freeze({
9
9
  border_width: 1,
10
10
  border_color: null,
11
11
  border_transparency: 0.25,
12
- border_radius: 3
12
+ border_radius: 3,
13
13
  });
14
14
 
15
15
  function DropdownStyle(state_, selector_, layout_) {
16
16
  this._state = state_;
17
- for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
17
+ for (var key in DEFAULTS) {
18
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
19
+ }
18
20
 
19
21
  this._layout = layout_ || {};
20
22
 
@@ -25,36 +27,42 @@ function DropdownStyle(state_, selector_, layout_) {
25
27
  return this;
26
28
  }
27
29
 
28
- DropdownStyle.prototype._createStylesheet = function() {
30
+ DropdownStyle.prototype._createStylesheet = function () {
29
31
  this._stylesheet = document.createElement("style");
30
32
  this._stylesheet.className = "fl-ui-styles-dropdown";
31
33
  document.head.appendChild(this._stylesheet);
32
34
  };
33
35
 
34
- DropdownStyle.prototype.update = function() {
36
+ DropdownStyle.prototype.update = function () {
35
37
  this._styles.clear();
36
38
 
37
39
  const background_color = this._state.background || "transparent";
38
- const user_defined_text_color = this._state.font_color || this._layout.font_color;
40
+ const user_defined_text_color =
41
+ this._state.font_color || this._layout.font_color;
39
42
  const text_color = user_defined_text_color || "inherit";
40
43
  let border_color;
41
44
  if (this._state.border_color) {
42
- border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
43
- }
44
- else if (user_defined_text_color) {
45
- border_color = hexToRgba(user_defined_text_color, this._state.border_transparency);
46
- }
47
- else {
45
+ border_color = hexToRgba(
46
+ this._state.border_color,
47
+ this._state.border_transparency,
48
+ );
49
+ } else if (user_defined_text_color) {
50
+ border_color = hexToRgba(
51
+ user_defined_text_color,
52
+ this._state.border_transparency,
53
+ );
54
+ } else {
48
55
  border_color = "currentColor";
49
56
  }
50
57
 
51
- this._styles.select(this._selector + " .heading")
58
+ this._styles
59
+ .select(this._selector + " .heading")
52
60
  .style("margin-bottom", "0.4em");
53
61
 
54
- this._styles.select(this._selector)
55
- .style("pointer-events", "all");
62
+ this._styles.select(this._selector).style("pointer-events", "all");
56
63
 
57
- this._styles.select(this._selector + " select")
64
+ this._styles
65
+ .select(this._selector + " select")
58
66
  .style("display", "inline-block")
59
67
  .style("cursor", "pointer")
60
68
  .style("overflow", "hidden")
@@ -63,15 +71,37 @@ DropdownStyle.prototype.update = function() {
63
71
  .style("font-family", "inherit")
64
72
  .style("background-color", background_color)
65
73
  .style("color", text_color)
66
- .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
67
- .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
68
- .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
69
-
70
- this._styles.select(this._selector + ":after")
71
- .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
74
+ .style(
75
+ "border",
76
+ this._state.border_style == "bottom"
77
+ ? this._state.border_width + "px solid transparent"
78
+ : this._state.border_width + "px solid " + border_color,
79
+ )
80
+ .style(
81
+ "border-bottom",
82
+ this._state.border_style == "bottom"
83
+ ? this._state.border_width + "px solid " + border_color
84
+ : null,
85
+ )
86
+ .style(
87
+ "border-radius",
88
+ this._state.border_style == "bottom"
89
+ ? null
90
+ : this._state.border_radius + "px",
91
+ );
92
+
93
+ this._styles
94
+ .select(this._selector + ":after")
95
+ .style(
96
+ "right",
97
+ this._state.border_style == "bottom"
98
+ ? null
99
+ : this._state.border_width + 5 + "px",
100
+ )
72
101
  .style("color", text_color);
73
102
 
74
- this._styles.select(this._selector + " .main .current")
103
+ this._styles
104
+ .select(this._selector + " .main .current")
75
105
  .style("line-height", "1em")
76
106
  .style("height", "100%")
77
107
  .style("max-width", "88%")
@@ -79,7 +109,8 @@ DropdownStyle.prototype.update = function() {
79
109
  .style("overflow", "hidden")
80
110
  .style("vertical-align", "top");
81
111
 
82
- this._styles.select(this._selector + " .list")
112
+ this._styles
113
+ .select(this._selector + " .list")
83
114
  .style("top", "2px")
84
115
  .style("min-width", "100%")
85
116
  .style("padding", "2px")
@@ -94,22 +125,31 @@ DropdownStyle.prototype.update = function() {
94
125
  .style("font-weight", "normal")
95
126
  .style("color", text_color);
96
127
 
97
- this._styles.select(this._selector + ".open .list")
128
+ this._styles
129
+ .select(this._selector + ".open .list")
98
130
  .style("display", "block")
99
131
  .style("border", this._state.border_width + "px solid " + border_color)
100
132
  .style("background-color", background_color)
101
133
  .style("z-index", "1")
102
134
  .style("animation", "dropdown-out 200ms");
103
135
 
104
- this._styles.select(this._selector + " .list-item:hover")
136
+ this._styles
137
+ .select(this._selector + " .list-item:hover")
105
138
  .style("opacity", "0.6");
106
139
 
107
- this._styles.select(this._selector + " .list-item.selected, " + this._selector + " .list-item.selected:hover")
140
+ this._styles
141
+ .select(
142
+ this._selector +
143
+ " .list-item.selected, " +
144
+ this._selector +
145
+ " .list-item.selected:hover",
146
+ )
108
147
  .style("opacity", "1")
109
148
  .style("cursor", "default");
110
149
 
111
150
  if (this._state.border_style == "bottom") {
112
- this._styles.select(this._selector + " .main")
151
+ this._styles
152
+ .select(this._selector + " .main")
113
153
  .style("padding-left", 0)
114
154
  .style("padding-right", "0.1rem");
115
155
  }
package/src/general-controls-style/index.js CHANGED
@@ -3,12 +3,14 @@ import Stylesheet from "../lib/js2css.js";
3
3
  var DEFAULTS = Object.freeze({
4
4
  font_size: 1,
5
5
  font_weight: "bold",
6
- height: 2
6
+ height: 2,
7
7
  });
8
8
 
9
9
  function GeneralControlsStyle(state_, selector_, layout_) {
10
10
  this._state = state_;
11
- for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
11
+ for (var key in DEFAULTS) {
12
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
13
+ }
12
14
 
13
15
  this._layout = layout_ || {};
14
16
 
@@ -19,44 +21,49 @@ function GeneralControlsStyle(state_, selector_, layout_) {
19
21
  return this;
20
22
  }
21
23
 
22
- GeneralControlsStyle.prototype._createStylesheet = function() {
24
+ GeneralControlsStyle.prototype._createStylesheet = function () {
23
25
  this._stylesheet = document.createElement("style");
24
26
  this._stylesheet.className = "fl-ui-styles-controls";
25
27
  document.head.appendChild(this._stylesheet);
26
28
  };
27
29
 
28
- GeneralControlsStyle.prototype.update = function() {
30
+ GeneralControlsStyle.prototype.update = function () {
29
31
  this._styles.clear();
30
32
 
31
- this._styles.select(this._selector + ".hidden")
32
- .style("display", "none");
33
+ this._styles.select(this._selector + ".hidden").style("display", "none");
33
34
 
34
- this._styles.select(this._selector)
35
+ this._styles
36
+ .select(this._selector)
35
37
  .style("vertical-align", "middle")
36
38
  .style("position", "relative")
37
39
  .style("font-size", this._state.font_size + "rem")
38
40
  .style("font-weight", this._state.font_weight);
39
41
 
40
- this._styles.select(".fl-controls-title")
42
+ this._styles
43
+ .select(".fl-controls-title")
41
44
  .style("font-size", this._state.font_size + "rem")
42
45
  .style("font-weight", this._state.font_weight)
43
46
  .style("vertical-align", "middle");
44
47
 
45
- this._styles.select(this._selector + ".fl-control .button")
48
+ this._styles
49
+ .select(this._selector + ".fl-control .button")
46
50
  .style("height", this._state.height + "rem")
47
51
  .style("padding", "0 0.5em");
48
52
 
49
- this._styles.select(this._selector + "-dropdown select")
53
+ this._styles
54
+ .select(this._selector + "-dropdown select")
50
55
  .style("height", this._state.height + "rem")
51
56
  .style("font-size", this._state.font_size + "rem")
52
57
  .style("font-weight", this._state.font_weight)
53
58
  .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
54
59
 
55
- this._styles.select(this._selector + "-slider .slider-end-labels")
60
+ this._styles
61
+ .select(this._selector + "-slider .slider-end-labels")
56
62
  .style("font-size", this._state.font_size + "rem")
57
63
  .style("font-weight", this._state.font_weight);
58
64
 
59
- this._styles.select(this._selector + "-slider")
65
+ this._styles
66
+ .select(this._selector + "-slider")
60
67
  .style("height", this._state.height + "rem");
61
68
 
62
69
  // Some additional styling for slider controls
package/src/index.js CHANGED
@@ -19,4 +19,9 @@ function createSliderStyle(state, selector, layout) {
19
19
  return new SliderStyle(state, selector, layout);
20
20
  }
21
21
 
22
- export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle };
22
+ export {
23
+ createGeneralControlsStyle,
24
+ createButtonStyle,
25
+ createDropdownStyle,
26
+ createSliderStyle,
27
+ };
package/src/lib/js2css.js CHANGED
@@ -3,7 +3,7 @@ function Stylesheet() {
3
3
  return this;
4
4
  }
5
5
 
6
- Stylesheet.prototype.select = function(selector) {
6
+ Stylesheet.prototype.select = function (selector) {
7
7
  if (!selector) return this;
8
8
  var declaration = new Declaration(selector, this);
9
9
  declaration.parent = this;
@@ -12,16 +12,16 @@ Stylesheet.prototype.select = function(selector) {
12
12
  return declaration;
13
13
  };
14
14
 
15
- Stylesheet.prototype.addDeclaration = function(declaration) {
15
+ Stylesheet.prototype.addDeclaration = function (declaration) {
16
16
  this.declarations.push(declaration);
17
17
  return this;
18
18
  };
19
19
 
20
- Stylesheet.prototype.print = function() {
20
+ Stylesheet.prototype.print = function () {
21
21
  var text = "";
22
- this.declarations.forEach(function(declaration) {
22
+ this.declarations.forEach(function (declaration) {
23
23
  text += declaration.selector + " {\n";
24
- declaration.styles.forEach(function(style) {
24
+ declaration.styles.forEach(function (style) {
25
25
  text += "\t" + style[0] + ": " + style[1] + ";\n";
26
26
  });
27
27
  text += "}\n\n";
@@ -29,7 +29,7 @@ Stylesheet.prototype.print = function() {
29
29
  return text;
30
30
  };
31
31
 
32
- Stylesheet.prototype.clear = function() {
32
+ Stylesheet.prototype.clear = function () {
33
33
  this.declarations = [];
34
34
  return this;
35
35
  };
@@ -40,13 +40,14 @@ function Declaration(selector) {
40
40
  return this;
41
41
  }
42
42
 
43
- Declaration.prototype.style = function(property, _value) {
43
+ Declaration.prototype.style = function (property, _value) {
44
44
  var value = typeof value_ == "function" ? _value() : _value;
45
- if (value !== "" && value !== null && value !== undefined) this.styles.push([property, value]);
45
+ if (value !== "" && value !== null && value !== undefined)
46
+ this.styles.push([property, value]);
46
47
  return this;
47
48
  };
48
49
 
49
- Declaration.prototype.select = function(selector) {
50
+ Declaration.prototype.select = function (selector) {
50
51
  return this.parent.select(this.selector + " " + selector);
51
52
  };
52
53
 
package/src/slider-style/index.js CHANGED
@@ -11,12 +11,14 @@ var DEFAULTS = Object.freeze({
11
11
  track_height: 0.2,
12
12
  margin: 4.5,
13
13
 
14
- play_button: true
14
+ play_button: true,
15
15
  });
16
16
 
17
17
  function SliderStyle(state_, selector_, layout_) {
18
18
  this._state = state_;
19
- for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
19
+ for (var key in DEFAULTS) {
20
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
21
+ }
20
22
 
21
23
  this._layout = layout_ || {};
22
24
 
@@ -27,66 +29,79 @@ function SliderStyle(state_, selector_, layout_) {
27
29
  return this;
28
30
  }
29
31
 
30
- SliderStyle.prototype._createStylesheet = function() {
32
+ SliderStyle.prototype._createStylesheet = function () {
31
33
  this._stylesheet = document.createElement("style");
32
34
  this._stylesheet.className = "fl-ui-styles-slider";
33
35
  document.head.appendChild(this._stylesheet);
34
36
  };
35
37
 
36
- SliderStyle.prototype.update = function() {
38
+ SliderStyle.prototype.update = function () {
37
39
  this._styles.clear();
38
40
 
39
41
  var track_color = this._state.track_color || "#dddddd";
40
- var text_color = this._state.font_color || this._layout.font_color || "currentColor";
42
+ var text_color =
43
+ this._state.font_color || this._layout.font_color || "currentColor";
41
44
  var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
42
- var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
43
- var play_color = this._state.play_color || this._layout.font_color || "currentColor";
45
+ var handle_color =
46
+ this._state.handle_color || this._layout.font_color || "currentColor";
47
+ var play_color =
48
+ this._state.play_color || this._layout.font_color || "currentColor";
44
49
 
45
50
  var handle_radius = Math.round(remToPx(this._state.handle_height));
46
51
  var track_height = remToPx(this._state.track_height);
47
52
 
48
- this._styles.select(this._selector + " .fl-controls-slider")
53
+ this._styles
54
+ .select(this._selector + " .fl-controls-slider")
49
55
  .style("height", handle_radius * 2 + "px");
50
56
 
51
- this._styles.select(this._selector + " .slider-play")
57
+ this._styles
58
+ .select(this._selector + " .slider-play")
52
59
  .style("fill", play_color)
53
60
  .style("width", handle_radius + "px")
54
61
  .style("height", handle_radius + "px")
55
62
  .style("display", this._state.play_button ? null : "none");
56
63
 
57
- this._styles.select(this._selector + " .slider-label")
64
+ this._styles
65
+ .select(this._selector + " .slider-label")
58
66
  .style("padding-inline-start", "0.3rem")
59
67
  .style("box-sizing", "content-box")
60
68
  .style("color", text_color);
61
69
 
62
- this._styles.select(this._selector + " input[type=range]")
70
+ this._styles
71
+ .select(this._selector + " input[type=range]")
63
72
  .style("-webkit-appearance", "none")
64
73
  .style("color", slider_color)
65
74
  .style("background-color", "transparent");
66
75
 
67
76
  // Chrome/Edge
68
- this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
77
+ this._styles
78
+ .select(
79
+ this._selector + " input[type=range]::-webkit-slider-runnable-track",
80
+ )
69
81
  .style("-webkit-appearance", "none")
70
82
  .style("background", track_color)
71
83
  .style("border-radius", "100px")
72
84
  .style("height", track_height + "px");
73
85
 
74
- this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
86
+ this._styles
87
+ .select(this._selector + " input[type=range]::-webkit-slider-thumb")
75
88
  .style("-webkit-appearance", "none")
76
89
  .style("width", handle_radius + "px")
77
90
  .style("height", handle_radius + "px")
78
91
  .style("border-radius", "100px")
79
92
  .style("background", handle_color)
80
- .style("margin-top", -handle_radius/2 + track_height/2 + "px");
93
+ .style("margin-top", -handle_radius / 2 + track_height / 2 + "px");
81
94
 
82
95
  // Firefox
83
- this._styles.select(this._selector + " input[type=range]::-moz-range-track")
96
+ this._styles
97
+ .select(this._selector + " input[type=range]::-moz-range-track")
84
98
  .style("-webkit-appearance", "none")
85
99
  .style("background", track_color)
86
100
  .style("border-radius", "100px")
87
101
  .style("height", track_height + "px");
88
102
 
89
- this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
103
+ this._styles
104
+ .select(this._selector + " input[type=range]::-moz-range-thumb")
90
105
  .style("-webkit-appearance", "none")
91
106
  .style("width", handle_radius + "px")
92
107
  .style("height", handle_radius + "px")