@flourish/ui-styles 6.0.0 → 6.0.1

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 (11) hide show
  1. package/RELEASE_NOTES.md +3 -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 +186 -84
package/RELEASE_NOTES.md CHANGED
@@ -1,3 +1,6 @@
1
+ # 6.0.1
2
+ * Remove repo from package.json
3
+
1
4
  # 6.0.0
2
5
  * Switch to preferring ESM by default on recent versions of Node.js by adding an `exports` field to `package.json`.
3
6
  * 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.1",
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.1.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")
package/ui-styles.js CHANGED
@@ -9,7 +9,7 @@
9
9
  return this;
10
10
  }
11
11
 
12
- Stylesheet.prototype.select = function(selector) {
12
+ Stylesheet.prototype.select = function (selector) {
13
13
  if (!selector) return this;
14
14
  var declaration = new Declaration(selector);
15
15
  declaration.parent = this;
@@ -18,16 +18,16 @@
18
18
  return declaration;
19
19
  };
20
20
 
21
- Stylesheet.prototype.addDeclaration = function(declaration) {
21
+ Stylesheet.prototype.addDeclaration = function (declaration) {
22
22
  this.declarations.push(declaration);
23
23
  return this;
24
24
  };
25
25
 
26
- Stylesheet.prototype.print = function() {
26
+ Stylesheet.prototype.print = function () {
27
27
  var text = "";
28
- this.declarations.forEach(function(declaration) {
28
+ this.declarations.forEach(function (declaration) {
29
29
  text += declaration.selector + " {\n";
30
- declaration.styles.forEach(function(style) {
30
+ declaration.styles.forEach(function (style) {
31
31
  text += "\t" + style[0] + ": " + style[1] + ";\n";
32
32
  });
33
33
  text += "}\n\n";
@@ -35,7 +35,7 @@
35
35
  return text;
36
36
  };
37
37
 
38
- Stylesheet.prototype.clear = function() {
38
+ Stylesheet.prototype.clear = function () {
39
39
  this.declarations = [];
40
40
  return this;
41
41
  };
@@ -46,25 +46,28 @@
46
46
  return this;
47
47
  }
48
48
 
49
- Declaration.prototype.style = function(property, _value) {
49
+ Declaration.prototype.style = function (property, _value) {
50
50
  var value = typeof value_ == "function" ? _value() : _value;
51
- if (value !== "" && value !== null && value !== undefined) this.styles.push([property, value]);
51
+ if (value !== "" && value !== null && value !== undefined)
52
+ this.styles.push([property, value]);
52
53
  return this;
53
54
  };
54
55
 
55
- Declaration.prototype.select = function(selector) {
56
+ Declaration.prototype.select = function (selector) {
56
57
  return this.parent.select(this.selector + " " + selector);
57
58
  };
58
59
 
59
60
  var DEFAULTS$3 = Object.freeze({
60
61
  font_size: 1,
61
62
  font_weight: "bold",
62
- height: 2
63
+ height: 2,
63
64
  });
64
65
 
65
66
  function GeneralControlsStyle(state_, selector_, layout_) {
66
67
  this._state = state_;
67
- for (var key in DEFAULTS$3) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
68
+ for (var key in DEFAULTS$3) {
69
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key];
70
+ }
68
71
 
69
72
  this._layout = layout_ || {};
70
73
 
@@ -75,44 +78,49 @@
75
78
  return this;
76
79
  }
77
80
 
78
- GeneralControlsStyle.prototype._createStylesheet = function() {
81
+ GeneralControlsStyle.prototype._createStylesheet = function () {
79
82
  this._stylesheet = document.createElement("style");
80
83
  this._stylesheet.className = "fl-ui-styles-controls";
81
84
  document.head.appendChild(this._stylesheet);
82
85
  };
83
86
 
84
- GeneralControlsStyle.prototype.update = function() {
87
+ GeneralControlsStyle.prototype.update = function () {
85
88
  this._styles.clear();
86
89
 
87
- this._styles.select(this._selector + ".hidden")
88
- .style("display", "none");
90
+ this._styles.select(this._selector + ".hidden").style("display", "none");
89
91
 
90
- this._styles.select(this._selector)
92
+ this._styles
93
+ .select(this._selector)
91
94
  .style("vertical-align", "middle")
92
95
  .style("position", "relative")
93
96
  .style("font-size", this._state.font_size + "rem")
94
97
  .style("font-weight", this._state.font_weight);
95
98
 
96
- this._styles.select(".fl-controls-title")
99
+ this._styles
100
+ .select(".fl-controls-title")
97
101
  .style("font-size", this._state.font_size + "rem")
98
102
  .style("font-weight", this._state.font_weight)
99
103
  .style("vertical-align", "middle");
100
104
 
101
- this._styles.select(this._selector + ".fl-control .button")
105
+ this._styles
106
+ .select(this._selector + ".fl-control .button")
102
107
  .style("height", this._state.height + "rem")
103
108
  .style("padding", "0 0.5em");
104
109
 
105
- this._styles.select(this._selector + "-dropdown select")
110
+ this._styles
111
+ .select(this._selector + "-dropdown select")
106
112
  .style("height", this._state.height + "rem")
107
113
  .style("font-size", this._state.font_size + "rem")
108
114
  .style("font-weight", this._state.font_weight)
109
115
  .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
110
116
 
111
- this._styles.select(this._selector + "-slider .slider-end-labels")
117
+ this._styles
118
+ .select(this._selector + "-slider .slider-end-labels")
112
119
  .style("font-size", this._state.font_size + "rem")
113
120
  .style("font-weight", this._state.font_weight);
114
121
 
115
- this._styles.select(this._selector + "-slider")
122
+ this._styles
123
+ .select(this._selector + "-slider")
116
124
  .style("height", this._state.height + "rem");
117
125
 
118
126
  // Some additional styling for slider controls
@@ -654,12 +662,14 @@
654
662
  border_width: 1,
655
663
  border_transparency: 0.25,
656
664
  border_color: null,
657
- border_radius: 3
665
+ border_radius: 3,
658
666
  });
659
667
 
660
668
  function ButtonStyle(state_, selector_, layout_) {
661
669
  this._state = state_;
662
- for (var key in DEFAULTS$2) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
670
+ for (var key in DEFAULTS$2) {
671
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key];
672
+ }
663
673
 
664
674
  this._layout = layout_ || {};
665
675
 
@@ -670,24 +680,34 @@
670
680
  return this;
671
681
  }
672
682
 
673
- ButtonStyle.prototype._createStylesheet = function() {
683
+ ButtonStyle.prototype._createStylesheet = function () {
674
684
  this._stylesheet = document.createElement("style");
675
685
  this._stylesheet.className = "fl-ui-styles-button";
676
686
  document.head.appendChild(this._stylesheet);
677
687
  };
678
688
 
679
- ButtonStyle.prototype.update = function() {
689
+ ButtonStyle.prototype.update = function () {
680
690
  this._styles.clear();
681
691
 
682
- var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
683
- var text_color = this._state.font_color || this._layout.font_color || "#333333";
684
- var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
692
+ var background_color =
693
+ this._state.background ||
694
+ (this._layout.background_color_enabled
695
+ ? this._layout.background_color || "#ffffff"
696
+ : "#ffffff");
697
+ var text_color =
698
+ this._state.font_color || this._layout.font_color || "#333333";
699
+ var border_color = hexToRgba(
700
+ this._state.border_color || text_color,
701
+ this._state.border_transparency,
702
+ );
685
703
  var read_direction = getTextDirection();
686
704
 
687
- this._styles.select(this._selector + ".fl-control.hidden")
705
+ this._styles
706
+ .select(this._selector + ".fl-control.hidden")
688
707
  .style("display", "none");
689
708
 
690
- this._styles.select(this._selector + ".fl-control .button")
709
+ this._styles
710
+ .select(this._selector + ".fl-control .button")
691
711
  .style("overflow", "hidden")
692
712
  .style("white-space", "nowrap")
693
713
  .style("margin", "0 2px 0 0 !important")
@@ -696,15 +716,18 @@
696
716
  .style("border", this._state.border_width + "px solid " + border_color)
697
717
  .style("border-radius", this._state.border_radius + "px");
698
718
 
699
- this._styles.select(this._selector + ".fl-control .button:hover")
719
+ this._styles
720
+ .select(this._selector + ".fl-control .button:hover")
700
721
  .style("background-color", this._state.background_hover || background_color)
701
722
  .style("color", this._state.font_color_hover || text_color);
702
723
 
703
- this._styles.select(this._selector + ".fl-control .button.selected")
724
+ this._styles
725
+ .select(this._selector + ".fl-control .button.selected")
704
726
  .style("background-color", this._state.background_selected)
705
727
  .style("color", this._state.font_color_selected);
706
728
 
707
- this._styles.select(this._selector + ".grouped.fl-control .button")
729
+ this._styles
730
+ .select(this._selector + ".grouped.fl-control .button")
708
731
  .style("border-right", "none")
709
732
  .style("border-radius", "0")
710
733
  .style("margin", "0");
@@ -713,14 +736,38 @@
713
736
  var left_most_button_selector = is_rtl ? ":last-child" : ":first-child";
714
737
  var right_most_button_selector = is_rtl ? ":first-child" : ":last-child";
715
738
 
716
- this._styles.select(this._selector + ".grouped.fl-control .button" + left_most_button_selector)
717
- .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
718
-
719
- this._styles.select(this._selector + ".grouped.fl-control .button" + right_most_button_selector)
720
- .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
721
- .style("border-right", this._state.border_width + "px solid " + border_color);
722
-
723
- this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
739
+ this._styles
740
+ .select(
741
+ this._selector +
742
+ ".grouped.fl-control .button" +
743
+ left_most_button_selector,
744
+ )
745
+ .style(
746
+ "border-radius",
747
+ this._state.border_radius + "px 0 0 " + this._state.border_radius + "px",
748
+ );
749
+
750
+ this._styles
751
+ .select(
752
+ this._selector +
753
+ ".grouped.fl-control .button" +
754
+ right_most_button_selector,
755
+ )
756
+ .style(
757
+ "border-radius",
758
+ "0 " +
759
+ this._state.border_radius +
760
+ "px " +
761
+ this._state.border_radius +
762
+ "px 0",
763
+ )
764
+ .style(
765
+ "border-right",
766
+ this._state.border_width + "px solid " + border_color,
767
+ );
768
+
769
+ this._styles
770
+ .select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
724
771
  .style("width", this._state.grouped_width + "%");
725
772
 
726
773
  this._stylesheet.innerHTML = this._styles.print();
@@ -734,12 +781,14 @@
734
781
  border_width: 1,
735
782
  border_color: null,
736
783
  border_transparency: 0.25,
737
- border_radius: 3
784
+ border_radius: 3,
738
785
  });
739
786
 
740
787
  function DropdownStyle(state_, selector_, layout_) {
741
788
  this._state = state_;
742
- for (var key in DEFAULTS$1) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
789
+ for (var key in DEFAULTS$1) {
790
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key];
791
+ }
743
792
 
744
793
  this._layout = layout_ || {};
745
794
 
@@ -750,36 +799,42 @@
750
799
  return this;
751
800
  }
752
801
 
753
- DropdownStyle.prototype._createStylesheet = function() {
802
+ DropdownStyle.prototype._createStylesheet = function () {
754
803
  this._stylesheet = document.createElement("style");
755
804
  this._stylesheet.className = "fl-ui-styles-dropdown";
756
805
  document.head.appendChild(this._stylesheet);
757
806
  };
758
807
 
759
- DropdownStyle.prototype.update = function() {
808
+ DropdownStyle.prototype.update = function () {
760
809
  this._styles.clear();
761
810
 
762
811
  const background_color = this._state.background || "transparent";
763
- const user_defined_text_color = this._state.font_color || this._layout.font_color;
812
+ const user_defined_text_color =
813
+ this._state.font_color || this._layout.font_color;
764
814
  const text_color = user_defined_text_color || "inherit";
765
815
  let border_color;
766
816
  if (this._state.border_color) {
767
- border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
768
- }
769
- else if (user_defined_text_color) {
770
- border_color = hexToRgba(user_defined_text_color, this._state.border_transparency);
771
- }
772
- else {
817
+ border_color = hexToRgba(
818
+ this._state.border_color,
819
+ this._state.border_transparency,
820
+ );
821
+ } else if (user_defined_text_color) {
822
+ border_color = hexToRgba(
823
+ user_defined_text_color,
824
+ this._state.border_transparency,
825
+ );
826
+ } else {
773
827
  border_color = "currentColor";
774
828
  }
775
829
 
776
- this._styles.select(this._selector + " .heading")
830
+ this._styles
831
+ .select(this._selector + " .heading")
777
832
  .style("margin-bottom", "0.4em");
778
833
 
779
- this._styles.select(this._selector)
780
- .style("pointer-events", "all");
834
+ this._styles.select(this._selector).style("pointer-events", "all");
781
835
 
782
- this._styles.select(this._selector + " select")
836
+ this._styles
837
+ .select(this._selector + " select")
783
838
  .style("display", "inline-block")
784
839
  .style("cursor", "pointer")
785
840
  .style("overflow", "hidden")
@@ -788,15 +843,37 @@
788
843
  .style("font-family", "inherit")
789
844
  .style("background-color", background_color)
790
845
  .style("color", text_color)
791
- .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
792
- .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
793
- .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
794
-
795
- this._styles.select(this._selector + ":after")
796
- .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
846
+ .style(
847
+ "border",
848
+ this._state.border_style == "bottom"
849
+ ? this._state.border_width + "px solid transparent"
850
+ : this._state.border_width + "px solid " + border_color,
851
+ )
852
+ .style(
853
+ "border-bottom",
854
+ this._state.border_style == "bottom"
855
+ ? this._state.border_width + "px solid " + border_color
856
+ : null,
857
+ )
858
+ .style(
859
+ "border-radius",
860
+ this._state.border_style == "bottom"
861
+ ? null
862
+ : this._state.border_radius + "px",
863
+ );
864
+
865
+ this._styles
866
+ .select(this._selector + ":after")
867
+ .style(
868
+ "right",
869
+ this._state.border_style == "bottom"
870
+ ? null
871
+ : this._state.border_width + 5 + "px",
872
+ )
797
873
  .style("color", text_color);
798
874
 
799
- this._styles.select(this._selector + " .main .current")
875
+ this._styles
876
+ .select(this._selector + " .main .current")
800
877
  .style("line-height", "1em")
801
878
  .style("height", "100%")
802
879
  .style("max-width", "88%")
@@ -804,7 +881,8 @@
804
881
  .style("overflow", "hidden")
805
882
  .style("vertical-align", "top");
806
883
 
807
- this._styles.select(this._selector + " .list")
884
+ this._styles
885
+ .select(this._selector + " .list")
808
886
  .style("top", "2px")
809
887
  .style("min-width", "100%")
810
888
  .style("padding", "2px")
@@ -819,22 +897,31 @@
819
897
  .style("font-weight", "normal")
820
898
  .style("color", text_color);
821
899
 
822
- this._styles.select(this._selector + ".open .list")
900
+ this._styles
901
+ .select(this._selector + ".open .list")
823
902
  .style("display", "block")
824
903
  .style("border", this._state.border_width + "px solid " + border_color)
825
904
  .style("background-color", background_color)
826
905
  .style("z-index", "1")
827
906
  .style("animation", "dropdown-out 200ms");
828
907
 
829
- this._styles.select(this._selector + " .list-item:hover")
908
+ this._styles
909
+ .select(this._selector + " .list-item:hover")
830
910
  .style("opacity", "0.6");
831
911
 
832
- this._styles.select(this._selector + " .list-item.selected, " + this._selector + " .list-item.selected:hover")
912
+ this._styles
913
+ .select(
914
+ this._selector +
915
+ " .list-item.selected, " +
916
+ this._selector +
917
+ " .list-item.selected:hover",
918
+ )
833
919
  .style("opacity", "1")
834
920
  .style("cursor", "default");
835
921
 
836
922
  if (this._state.border_style == "bottom") {
837
- this._styles.select(this._selector + " .main")
923
+ this._styles
924
+ .select(this._selector + " .main")
838
925
  .style("padding-left", 0)
839
926
  .style("padding-right", "0.1rem");
840
927
  }
@@ -856,12 +943,14 @@
856
943
  track_height: 0.2,
857
944
  margin: 4.5,
858
945
 
859
- play_button: true
946
+ play_button: true,
860
947
  });
861
948
 
862
949
  function SliderStyle(state_, selector_, layout_) {
863
950
  this._state = state_;
864
- for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
951
+ for (var key in DEFAULTS) {
952
+ if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
953
+ }
865
954
 
866
955
  this._layout = layout_ || {};
867
956
 
@@ -872,66 +961,79 @@
872
961
  return this;
873
962
  }
874
963
 
875
- SliderStyle.prototype._createStylesheet = function() {
964
+ SliderStyle.prototype._createStylesheet = function () {
876
965
  this._stylesheet = document.createElement("style");
877
966
  this._stylesheet.className = "fl-ui-styles-slider";
878
967
  document.head.appendChild(this._stylesheet);
879
968
  };
880
969
 
881
- SliderStyle.prototype.update = function() {
970
+ SliderStyle.prototype.update = function () {
882
971
  this._styles.clear();
883
972
 
884
973
  var track_color = this._state.track_color || "#dddddd";
885
- var text_color = this._state.font_color || this._layout.font_color || "currentColor";
974
+ var text_color =
975
+ this._state.font_color || this._layout.font_color || "currentColor";
886
976
  var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
887
- var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
888
- var play_color = this._state.play_color || this._layout.font_color || "currentColor";
977
+ var handle_color =
978
+ this._state.handle_color || this._layout.font_color || "currentColor";
979
+ var play_color =
980
+ this._state.play_color || this._layout.font_color || "currentColor";
889
981
 
890
982
  var handle_radius = Math.round(remToPx(this._state.handle_height));
891
983
  var track_height = remToPx(this._state.track_height);
892
984
 
893
- this._styles.select(this._selector + " .fl-controls-slider")
985
+ this._styles
986
+ .select(this._selector + " .fl-controls-slider")
894
987
  .style("height", handle_radius * 2 + "px");
895
988
 
896
- this._styles.select(this._selector + " .slider-play")
989
+ this._styles
990
+ .select(this._selector + " .slider-play")
897
991
  .style("fill", play_color)
898
992
  .style("width", handle_radius + "px")
899
993
  .style("height", handle_radius + "px")
900
994
  .style("display", this._state.play_button ? null : "none");
901
995
 
902
- this._styles.select(this._selector + " .slider-label")
996
+ this._styles
997
+ .select(this._selector + " .slider-label")
903
998
  .style("padding-inline-start", "0.3rem")
904
999
  .style("box-sizing", "content-box")
905
1000
  .style("color", text_color);
906
1001
 
907
- this._styles.select(this._selector + " input[type=range]")
1002
+ this._styles
1003
+ .select(this._selector + " input[type=range]")
908
1004
  .style("-webkit-appearance", "none")
909
1005
  .style("color", slider_color)
910
1006
  .style("background-color", "transparent");
911
1007
 
912
1008
  // Chrome/Edge
913
- this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
1009
+ this._styles
1010
+ .select(
1011
+ this._selector + " input[type=range]::-webkit-slider-runnable-track",
1012
+ )
914
1013
  .style("-webkit-appearance", "none")
915
1014
  .style("background", track_color)
916
1015
  .style("border-radius", "100px")
917
1016
  .style("height", track_height + "px");
918
1017
 
919
- this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
1018
+ this._styles
1019
+ .select(this._selector + " input[type=range]::-webkit-slider-thumb")
920
1020
  .style("-webkit-appearance", "none")
921
1021
  .style("width", handle_radius + "px")
922
1022
  .style("height", handle_radius + "px")
923
1023
  .style("border-radius", "100px")
924
1024
  .style("background", handle_color)
925
- .style("margin-top", -handle_radius/2 + track_height/2 + "px");
1025
+ .style("margin-top", -handle_radius / 2 + track_height / 2 + "px");
926
1026
 
927
1027
  // Firefox
928
- this._styles.select(this._selector + " input[type=range]::-moz-range-track")
1028
+ this._styles
1029
+ .select(this._selector + " input[type=range]::-moz-range-track")
929
1030
  .style("-webkit-appearance", "none")
930
1031
  .style("background", track_color)
931
1032
  .style("border-radius", "100px")
932
1033
  .style("height", track_height + "px");
933
1034
 
934
- this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
1035
+ this._styles
1036
+ .select(this._selector + " input[type=range]::-moz-range-thumb")
935
1037
  .style("-webkit-appearance", "none")
936
1038
  .style("width", handle_radius + "px")
937
1039
  .style("height", handle_radius + "px")