@flourish/ui-styles 2.0.0 → 3.0.0

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 (9) hide show
  1. package/README.md +10 -3
  2. package/RELEASE_NOTES.md +3 -0
  3. package/package.json +1 -1
  4. package/slider-style/settings.yml +45 -0
  5. package/src/dropdown-style/index.js +2 -1
  6. package/src/index.js +6 -1
  7. package/src/lib/remToPx.js +3 -0
  8. package/src/slider-style/index.js +103 -0
  9. package/ui-styles.js +109 -1
package/README.md CHANGED
@@ -12,7 +12,8 @@ Add one or more control style objects to your template state:
12
12
  export var state = {
13
13
  controls_style: {},
14
14
  button_style: {},
15
- dropdown_style: {}
15
+ dropdown_style: {},
16
+ slider_style: {},
16
17
  }
17
18
  ```
18
19
 
@@ -25,6 +26,8 @@ Import settings for controls styling in your `template.yml` settings.
25
26
  import: "@flourish/ui-styles/dropdown-style"
26
27
  - property: button_style
27
28
  import: "@flourish/ui-styles/button-style"
29
+ - property: slider_style
30
+ import: "@flourish/ui-styles/slider-style"
28
31
  ```
29
32
 
30
33
  ## Basics
@@ -32,13 +35,16 @@ Import settings for controls styling in your `template.yml` settings.
32
35
  Initialise the styling outside any function or in a special init function:
33
36
 
34
37
  ``` js
35
- import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle } from "@flourish/ui-styles";
38
+ import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle } from "@flourish/ui-styles";
36
39
  var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
37
40
  buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
38
41
  dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown");
42
+ sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider");
39
43
  ```
40
44
 
41
- The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above. If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of `fl-control`.
45
+ The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above.
46
+
47
+ If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of `fl-control`. If you're using specifically the button styles with custom HTML make sure your buttons also have a `button` class and your selected elements a `selected` class.
42
48
 
43
49
  Then in the update function, make sure to update the styles with `update()`.
44
50
 
@@ -46,6 +52,7 @@ Then in the update function, make sure to update the styles with `update()`.
46
52
  controlsStyle.update();
47
53
  buttonStyle.update();
48
54
  dropdownStyle.update();
55
+ sliderStyle.update();
49
56
  ```
50
57
 
51
58
  ## Using defaults from @flourish/layout
package/RELEASE_NOTES.md CHANGED
@@ -1,3 +1,6 @@
1
+ # 3.0.0
2
+ * BREAKING: Move slider styles from @flourish/controls and change to reflect use of a `input` element for slider. For use with version 7.0.0+ of @flourish/controls
3
+
1
4
  # 2.0.0
2
5
  * BREAKING: Change styles to reflect use of a `select` element for the dropdown. For use with version 3.0.0+ of @flourish/controls
3
6
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Flourish module for styling UI elements",
5
5
  "main": "ui-styles.js",
6
6
  "module": "src/index.js",
package/slider-style/settings.yml ADDED
@@ -0,0 +1,45 @@
1
+ - property: track_color
2
+ name: Track
3
+ type: color
4
+ width: quarter
5
+ optional: true
6
+ - property: font_color
7
+ name: Text
8
+ type: color
9
+ width: quarter
10
+ optional: true
11
+ - property: handle_color
12
+ name: Handle
13
+ type: color
14
+ width: quarter
15
+ optional: true
16
+ - property: play_color
17
+ name: Play/pause
18
+ type: color
19
+ width: quarter
20
+ optional: true
21
+ show_if: play_button
22
+ - property: width
23
+ name: Slider width
24
+ type: number
25
+ min: 0
26
+ max: 100
27
+ width: quarter
28
+ - property: track_height
29
+ name: Track height
30
+ type: number
31
+ step: 0.1
32
+ min: 0
33
+ max: 1
34
+ width: quarter
35
+ - property: handle_height
36
+ name: Height
37
+ type: number
38
+ step: 0.1
39
+ min: 0
40
+ max: 10
41
+ width: quarter
42
+ - property: play_button
43
+ name: Play button
44
+ type: boolean
45
+ width: half
package/src/dropdown-style/index.js CHANGED
@@ -58,7 +58,8 @@ DropdownStyle.prototype.update = function() {
58
58
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
59
59
 
60
60
  this._styles.select(this._selector + ":after")
61
- .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
61
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
62
+ .style("color", text_color);
62
63
 
63
64
  this._styles.select(this._selector + " .main .current")
64
65
  .style("line-height", "1em")
package/src/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import GeneralControlsStyle from "./general-controls-style";
2
2
  import ButtonStyle from "./button-style";
3
3
  import DropdownStyle from "./dropdown-style";
4
+ import SliderStyle from "./slider-style";
4
5
 
5
6
  function createGeneralControlsStyle(state, selector, layout) {
6
7
  return new GeneralControlsStyle(state, selector, layout);
@@ -14,4 +15,8 @@ function createDropdownStyle(state, selector, layout) {
14
15
  return new DropdownStyle(state, selector, layout);
15
16
  }
16
17
 
17
- export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle };
18
+ function createSliderStyle(state, selector, layout) {
19
+ return new SliderStyle(state, selector, layout);
20
+ }
21
+
22
+ export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle };
package/src/lib/remToPx.js ADDED
@@ -0,0 +1,3 @@
1
+ export function remToPx(rem) {
2
+ return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
3
+ }
package/src/slider-style/index.js ADDED
@@ -0,0 +1,103 @@
1
+ import { remToPx } from "../lib/remToPx";
2
+ import Stylesheet from "../lib/js2css";
3
+
4
+ var DEFAULTS = Object.freeze({
5
+ width: 15,
6
+ play_color: null,
7
+ handle_color: null,
8
+ font_color: null,
9
+ track_color: null,
10
+
11
+ handle_height: 1,
12
+ track_height: 0.2,
13
+ margin: 4.5,
14
+
15
+ play_button: true
16
+ });
17
+
18
+ function SliderStyle(state_, selector_, layout_) {
19
+ this._state = state_;
20
+ for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
21
+
22
+ this._layout = layout_ || {};
23
+
24
+ this._styles = new Stylesheet();
25
+ this._selector = selector_;
26
+ this._createStylesheet();
27
+
28
+ return this;
29
+ }
30
+
31
+ SliderStyle.prototype._createStylesheet = function() {
32
+ this._stylesheet = document.createElement("style");
33
+ this._stylesheet.className = "fl-ui-styles-slider";
34
+ document.head.appendChild(this._stylesheet);
35
+ };
36
+
37
+ SliderStyle.prototype.update = function() {
38
+ this._styles.clear();
39
+
40
+ var track_color = this._state.track_color || "#dddddd";
41
+ var text_color = this._state.font_color || this._layout.font_color || "currentColor";
42
+ var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
43
+ var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
44
+ var play_color = this._state.play_color || this._layout.font_color || "currentColor";
45
+
46
+ var slider_width = Math.round(remToPx(this._state.width));
47
+ var handle_radius = Math.round(remToPx(this._state.handle_height));
48
+ var track_height = remToPx(this._state.track_height);
49
+
50
+ this._styles.select(this._selector + " .fl-controls-slider")
51
+ .style("height", handle_radius * 2 + "px");
52
+
53
+ this._styles.select(this._selector + " .slider-play")
54
+ .style("fill", play_color)
55
+ .style("width", handle_radius + "px")
56
+ .style("height", handle_radius + "px")
57
+ .style("display", this._state.play_button ? null : "none");
58
+
59
+ this._styles.select(this._selector + " .slider-label")
60
+ .style("padding-inline-start", "0.3rem")
61
+ .style("color", text_color);
62
+
63
+ this._styles.select(this._selector + " input[type=range]")
64
+ .style("-webkit-appearance", "none")
65
+ .style("width", slider_width + "px")
66
+ .style("color", slider_color)
67
+ .style("background-color", "transparent");
68
+
69
+ // Chrome/Edge
70
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
71
+ .style("-webkit-appearance", "none")
72
+ .style("background", track_color)
73
+ .style("border-radius", "100px")
74
+ .style("height", track_height + "px");
75
+
76
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
77
+ .style("-webkit-appearance", "none")
78
+ .style("width", handle_radius + "px")
79
+ .style("height", handle_radius + "px")
80
+ .style("border-radius", "100px")
81
+ .style("background", handle_color)
82
+ .style("margin-top", -handle_radius/2 + track_height/2 + "px");
83
+
84
+ // Firefox
85
+ this._styles.select(this._selector + " input[type=range]::-moz-range-track")
86
+ .style("-webkit-appearance", "none")
87
+ .style("background", track_color)
88
+ .style("border-radius", "100px")
89
+ .style("height", track_height + "px");
90
+
91
+ this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
92
+ .style("-webkit-appearance", "none")
93
+ .style("width", handle_radius + "px")
94
+ .style("height", handle_radius + "px")
95
+ .style("border-radius", "100px")
96
+ .style("border", "none")
97
+ .style("background", handle_color);
98
+
99
+ this._stylesheet.innerHTML = this._styles.print();
100
+ };
101
+
102
+
103
+ export default SliderStyle;
package/ui-styles.js CHANGED
@@ -834,7 +834,8 @@
834
834
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
835
835
 
836
836
  this._styles.select(this._selector + ":after")
837
- .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
837
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
838
+ .style("color", text_color);
838
839
 
839
840
  this._styles.select(this._selector + " .main .current")
840
841
  .style("line-height", "1em")
@@ -882,6 +883,108 @@
882
883
  this._stylesheet.innerHTML = this._styles.print();
883
884
  };
884
885
 
886
+ function remToPx(rem) {
887
+ return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
888
+ }
889
+
890
+ var DEFAULTS$3 = Object.freeze({
891
+ width: 15,
892
+ play_color: null,
893
+ handle_color: null,
894
+ font_color: null,
895
+ track_color: null,
896
+
897
+ handle_height: 1,
898
+ track_height: 0.2,
899
+ margin: 4.5,
900
+
901
+ play_button: true
902
+ });
903
+
904
+ function SliderStyle(state_, selector_, layout_) {
905
+ this._state = state_;
906
+ for (var key in DEFAULTS$3) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
907
+
908
+ this._layout = layout_ || {};
909
+
910
+ this._styles = new Stylesheet();
911
+ this._selector = selector_;
912
+ this._createStylesheet();
913
+
914
+ return this;
915
+ }
916
+
917
+ SliderStyle.prototype._createStylesheet = function() {
918
+ this._stylesheet = document.createElement("style");
919
+ this._stylesheet.className = "fl-ui-styles-slider";
920
+ document.head.appendChild(this._stylesheet);
921
+ };
922
+
923
+ SliderStyle.prototype.update = function() {
924
+ this._styles.clear();
925
+
926
+ var track_color = this._state.track_color || "#dddddd";
927
+ var text_color = this._state.font_color || this._layout.font_color || "currentColor";
928
+ var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
929
+ var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
930
+ var play_color = this._state.play_color || this._layout.font_color || "currentColor";
931
+
932
+ var slider_width = Math.round(remToPx(this._state.width));
933
+ var handle_radius = Math.round(remToPx(this._state.handle_height));
934
+ var track_height = remToPx(this._state.track_height);
935
+
936
+ this._styles.select(this._selector + " .fl-controls-slider")
937
+ .style("height", handle_radius * 2 + "px");
938
+
939
+ this._styles.select(this._selector + " .slider-play")
940
+ .style("fill", play_color)
941
+ .style("width", handle_radius + "px")
942
+ .style("height", handle_radius + "px")
943
+ .style("display", this._state.play_button ? null : "none");
944
+
945
+ this._styles.select(this._selector + " .slider-label")
946
+ .style("padding-inline-start", "0.3rem")
947
+ .style("color", text_color);
948
+
949
+ this._styles.select(this._selector + " input[type=range]")
950
+ .style("-webkit-appearance", "none")
951
+ .style("width", slider_width + "px")
952
+ .style("color", slider_color)
953
+ .style("background-color", "transparent");
954
+
955
+ // Chrome/Edge
956
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
957
+ .style("-webkit-appearance", "none")
958
+ .style("background", track_color)
959
+ .style("border-radius", "100px")
960
+ .style("height", track_height + "px");
961
+
962
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
963
+ .style("-webkit-appearance", "none")
964
+ .style("width", handle_radius + "px")
965
+ .style("height", handle_radius + "px")
966
+ .style("border-radius", "100px")
967
+ .style("background", handle_color)
968
+ .style("margin-top", -handle_radius/2 + track_height/2 + "px");
969
+
970
+ // Firefox
971
+ this._styles.select(this._selector + " input[type=range]::-moz-range-track")
972
+ .style("-webkit-appearance", "none")
973
+ .style("background", track_color)
974
+ .style("border-radius", "100px")
975
+ .style("height", track_height + "px");
976
+
977
+ this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
978
+ .style("-webkit-appearance", "none")
979
+ .style("width", handle_radius + "px")
980
+ .style("height", handle_radius + "px")
981
+ .style("border-radius", "100px")
982
+ .style("border", "none")
983
+ .style("background", handle_color);
984
+
985
+ this._stylesheet.innerHTML = this._styles.print();
986
+ };
987
+
885
988
  function createGeneralControlsStyle(state, selector, layout) {
886
989
  return new GeneralControlsStyle(state, selector, layout);
887
990
  }
@@ -894,9 +997,14 @@
894
997
  return new DropdownStyle(state, selector, layout);
895
998
  }
896
999
 
1000
+ function createSliderStyle(state, selector, layout) {
1001
+ return new SliderStyle(state, selector, layout);
1002
+ }
1003
+
897
1004
  exports.createButtonStyle = createButtonStyle;
898
1005
  exports.createDropdownStyle = createDropdownStyle;
899
1006
  exports.createGeneralControlsStyle = createGeneralControlsStyle;
1007
+ exports.createSliderStyle = createSliderStyle;
900
1008
 
901
1009
  Object.defineProperty(exports, '__esModule', { value: true });
902
1010