@flourish/ui-styles 2.0.0 → 3.1.0

package/README.md

@@ -12,7 +12,8 @@ Add one or more control style objects to your template state:
 export var state = {
 	controls_style: {},
 	button_style: {},
-	dropdown_style: {}
+	dropdown_style: {},
+	slider_style: {},
 }
 ```
 
@@ -25,6 +26,8 @@ Import settings for controls styling in your `template.yml` settings.
   import: "@flourish/ui-styles/dropdown-style"
 - property: button_style
   import: "@flourish/ui-styles/button-style"
+- property: slider_style
+  import: "@flourish/ui-styles/slider-style"
 ```
 
 ## Basics
@@ -32,20 +35,24 @@ Import settings for controls styling in your `template.yml` settings.
 Initialise the styling outside any function or in a special init function:
 
 ``` js
-import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle } from "@flourish/ui-styles";
+import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle } from "@flourish/ui-styles";
 var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
     buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
     dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown");
+	sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider");
 ```
 
-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`.
+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. 
 
-Then in the update function, make sure to update the styles with `update()`.
+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.
+
+Then in the update function, make sure to update the styles with `update()`. To ensure right-to-left read direction support works correctly call the style update functions after the read direction of the template has been updated (i.e. `layout.update()` has been called).
 
 ```js
 controlsStyle.update();
 buttonStyle.update();
 dropdownStyle.update();
+sliderStyle.update();
 ```
 
 ## Using defaults from @flourish/layout

package/RELEASE_NOTES.md

@@ -1,3 +1,10 @@
+# 3.1.0
+* Add support for right-to-left read direction to button border radius styles
+* Update @flourish/pocket-knife to v1.0.0
+
+# 3.0.0
+* 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
+
 # 2.0.0
 * BREAKING: Change styles to reflect use of a `select` element for the dropdown. For use with version 3.0.0+ of @flourish/controls
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
   "module": "src/index.js",
@@ -14,7 +14,7 @@
   "author": "Kiln Enterprises Ltd",
   "license": "https://flourish.studio/terms/fcl/",
   "dependencies": {
-    "@flourish/pocket-knife": "^0.5.0",
+    "@flourish/pocket-knife": "^1.0.0",
     "d3-selection": "^1.4.0"
   },
   "devDependencies": {

package/slider-style/settings.yml

@@ -0,0 +1,45 @@
+- property: track_color
+  name: Track
+  type: color
+  width: quarter
+  optional: true
+- property: font_color
+  name: Text
+  type: color
+  width: quarter
+  optional: true
+- property: handle_color
+  name: Handle
+  type: color
+  width: quarter
+  optional: true
+- property: play_color
+  name: Play/pause
+  type: color
+  width: quarter
+  optional: true
+  show_if: play_button
+- property: width
+  name: Slider width
+  type: number
+  min: 0
+  max: 100
+  width: quarter
+- property: track_height
+  name: Track height
+  type: number
+  step: 0.1
+  min: 0
+  max: 1
+  width: quarter
+- property: handle_height
+  name: Height
+  type: number
+  step: 0.1
+  min: 0
+  max: 10
+  width: quarter
+- property: play_button
+  name: Play button
+  type: boolean
+  width: half

package/src/button-style/index.js

@@ -1,4 +1,4 @@
-import { hexToRgba } from "@flourish/pocket-knife";
+import { hexToRgba, getTextDirection } from "@flourish/pocket-knife";
 import Stylesheet from "../lib/js2css";
 
 var DEFAULTS = Object.freeze({
@@ -42,6 +42,7 @@ ButtonStyle.prototype.update = function() {
 	var background_color = this._state.background || this._layout.background_color || "#ffffff";
 	var text_color = this._state.font_color || this._layout.font_color || "#333333";
 	var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+	var read_direction = getTextDirection();
 
 	this._styles.select(this._selector + ".fl-control.hidden")
 		.style("display", "none");
@@ -68,10 +69,14 @@ ButtonStyle.prototype.update = function() {
 		.style("border-radius", "0")
 		.style("margin", "0");
 
-	this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
+	var is_rtl = read_direction === "rtl";
+	var left_most_button_selector = is_rtl ? ":last-child" : ":first-child";
+	var right_most_button_selector = is_rtl ? ":first-child" : ":last-child";
+
+	this._styles.select(this._selector + ".grouped.fl-control .button" + left_most_button_selector)
 		.style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
 
-	this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
+	this._styles.select(this._selector + ".grouped.fl-control .button" + right_most_button_selector)
 		.style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
 		.style("border-right", this._state.border_width + "px solid " + border_color);
 

package/src/dropdown-style/index.js

@@ -58,7 +58,8 @@ DropdownStyle.prototype.update = function() {
 		.style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
 
 	this._styles.select(this._selector + ":after")
-		.style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
+		.style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
+		.style("color", text_color);
 
 	this._styles.select(this._selector + " .main .current")
 		.style("line-height", "1em")

package/src/index.js

@@ -1,6 +1,7 @@
 import GeneralControlsStyle from "./general-controls-style";
 import ButtonStyle from "./button-style";
 import DropdownStyle from "./dropdown-style";
+import SliderStyle from "./slider-style";
 
 function createGeneralControlsStyle(state, selector, layout) {
 	return new GeneralControlsStyle(state, selector, layout);
@@ -14,4 +15,8 @@ function createDropdownStyle(state, selector, layout) {
 	return new DropdownStyle(state, selector, layout);
 }
 
-export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle };
+function createSliderStyle(state, selector, layout) {
+	return new SliderStyle(state, selector, layout);
+}
+
+export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle };

package/src/lib/remToPx.js

@@ -0,0 +1,3 @@
+export function remToPx(rem) {
+	return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}

package/src/slider-style/index.js

@@ -0,0 +1,103 @@
+import { remToPx } from "../lib/remToPx";
+import Stylesheet from "../lib/js2css";
+
+var DEFAULTS = Object.freeze({
+	width: 15,
+	play_color: null,
+	handle_color: null,
+	font_color: null,
+	track_color: null,
+
+	handle_height: 1,
+	track_height: 0.2,
+	margin: 4.5,
+
+	play_button: true
+});
+
+function SliderStyle(state_, selector_, layout_) {
+	this._state = state_;
+	for (var key in DEFAULTS) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
+
+	this._layout = layout_ || {};
+
+	this._styles = new Stylesheet();
+	this._selector = selector_;
+	this._createStylesheet();
+
+	return this;
+}
+
+SliderStyle.prototype._createStylesheet = function() {
+	this._stylesheet = document.createElement("style");
+	this._stylesheet.className = "fl-ui-styles-slider";
+	document.head.appendChild(this._stylesheet);
+};
+
+SliderStyle.prototype.update = function() {
+	this._styles.clear();
+
+	var track_color = this._state.track_color || "#dddddd";
+	var text_color = this._state.font_color || this._layout.font_color || "currentColor";
+	var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
+	var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
+	var play_color = this._state.play_color || this._layout.font_color || "currentColor";
+
+	var slider_width = Math.round(remToPx(this._state.width));
+	var handle_radius = Math.round(remToPx(this._state.handle_height));
+	var track_height = remToPx(this._state.track_height);
+
+	this._styles.select(this._selector + " .fl-controls-slider")
+		.style("height", handle_radius * 2 + "px");
+
+	this._styles.select(this._selector + " .slider-play")
+		.style("fill", play_color)
+		.style("width", handle_radius + "px")
+		.style("height", handle_radius + "px")
+		.style("display", this._state.play_button ? null : "none");
+
+	this._styles.select(this._selector + " .slider-label")
+		.style("padding-inline-start", "0.3rem")
+		.style("color", text_color);
+
+	this._styles.select(this._selector + " input[type=range]")
+		.style("-webkit-appearance", "none")
+		.style("width", slider_width + "px")
+		.style("color", slider_color)
+		.style("background-color", "transparent");
+
+	// Chrome/Edge
+	this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
+		.style("-webkit-appearance", "none")
+		.style("background", track_color)
+		.style("border-radius", "100px")
+		.style("height", track_height + "px");
+
+	this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
+		.style("-webkit-appearance", "none")
+		.style("width", handle_radius + "px")
+		.style("height", handle_radius + "px")
+		.style("border-radius", "100px")
+		.style("background", handle_color)
+		.style("margin-top", -handle_radius/2 + track_height/2 + "px");
+
+	// Firefox
+	this._styles.select(this._selector + " input[type=range]::-moz-range-track")
+		.style("-webkit-appearance", "none")
+		.style("background", track_color)
+		.style("border-radius", "100px")
+		.style("height", track_height + "px");
+
+	this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
+		.style("-webkit-appearance", "none")
+		.style("width", handle_radius + "px")
+		.style("height", handle_radius + "px")
+		.style("border-radius", "100px")
+		.style("border", "none")
+		.style("background", handle_color);
+
+	this._stylesheet.innerHTML = this._styles.print();
+};
+
+
+export default SliderStyle;

package/ui-styles.js

@@ -330,8 +330,8 @@
 	  format = (format + "").trim().toLowerCase();
 	  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
 	      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
-	      : l === 8 ? new Rgb(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
-	      : l === 4 ? new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+	      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+	      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
 	      : null) // invalid hex
 	      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
 	      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
@@ -675,15 +675,132 @@
 	  }
 	}));
 
-	var getTextWidth = (function() {
+	var prefix = "$";
+
+	function Map() {}
+
+	Map.prototype = map.prototype = {
+	  constructor: Map,
+	  has: function(key) {
+	    return (prefix + key) in this;
+	  },
+	  get: function(key) {
+	    return this[prefix + key];
+	  },
+	  set: function(key, value) {
+	    this[prefix + key] = value;
+	    return this;
+	  },
+	  remove: function(key) {
+	    var property = prefix + key;
+	    return property in this && delete this[property];
+	  },
+	  clear: function() {
+	    for (var property in this) if (property[0] === prefix) delete this[property];
+	  },
+	  keys: function() {
+	    var keys = [];
+	    for (var property in this) if (property[0] === prefix) keys.push(property.slice(1));
+	    return keys;
+	  },
+	  values: function() {
+	    var values = [];
+	    for (var property in this) if (property[0] === prefix) values.push(this[property]);
+	    return values;
+	  },
+	  entries: function() {
+	    var entries = [];
+	    for (var property in this) if (property[0] === prefix) entries.push({key: property.slice(1), value: this[property]});
+	    return entries;
+	  },
+	  size: function() {
+	    var size = 0;
+	    for (var property in this) if (property[0] === prefix) ++size;
+	    return size;
+	  },
+	  empty: function() {
+	    for (var property in this) if (property[0] === prefix) return false;
+	    return true;
+	  },
+	  each: function(f) {
+	    for (var property in this) if (property[0] === prefix) f(this[property], property.slice(1), this);
+	  }
+	};
+
+	function map(object, f) {
+	  var map = new Map;
+
+	  // Copy constructor.
+	  if (object instanceof Map) object.each(function(value, key) { map.set(key, value); });
+
+	  // Index array by numeric index or specified key function.
+	  else if (Array.isArray(object)) {
+	    var i = -1,
+	        n = object.length,
+	        o;
+
+	    if (f == null) while (++i < n) map.set(i, object[i]);
+	    else while (++i < n) map.set(f(o = object[i], i, object), o);
+	  }
+
+	  // Convert object to map.
+	  else if (object) for (var key in object) map.set(key, object[key]);
+
+	  return map;
+	}
+
+	function Set() {}
+
+	var proto = map.prototype;
+
+	Set.prototype = set.prototype = {
+	  constructor: Set,
+	  has: proto.has,
+	  add: function(value) {
+	    value += "";
+	    this[prefix + value] = value;
+	    return this;
+	  },
+	  remove: proto.remove,
+	  clear: proto.clear,
+	  values: proto.keys,
+	  size: proto.size,
+	  empty: proto.empty,
+	  each: proto.each
+	};
+
+	function set(object, f) {
+	  var set = new Set;
+
+	  // Copy constructor.
+	  if (object instanceof Set) object.each(function(value) { set.add(value); });
+
+	  // Otherwise, assume it’s an array.
+	  else if (object) {
+	    var i = -1, n = object.length;
+	    if (f == null) while (++i < n) set.add(object[i]);
+	    else while (++i < n) set.add(f(object[i], i, object));
+	  }
+
+	  return set;
+	}
+
+	var getTextDimensions = (function() {
 		var context = document.createElement("canvas").getContext("2d");
 		return function(text, font) {
 			context.font = font || "10px sans-serif";
 			var metrics = context.measureText(text);
-			return metrics.width;
+			return {
+				width: metrics.width,
+				height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+			};
 		};
 	})();
 
+	function getTextDirection() {
+		return window.getComputedStyle(document.body).direction || "ltr";
+	}
+
 	function hexToColor(hex_string, opacity) {
 		if (typeof hex_string != "string") return false;
 		var c = color(hex_string);
@@ -738,6 +855,7 @@
 		var background_color = this._state.background || this._layout.background_color || "#ffffff";
 		var text_color = this._state.font_color || this._layout.font_color || "#333333";
 		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+		var read_direction = getTextDirection();
 
 		this._styles.select(this._selector + ".fl-control.hidden")
 			.style("display", "none");
@@ -764,10 +882,14 @@
 			.style("border-radius", "0")
 			.style("margin", "0");
 
-		this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
+		var is_rtl = read_direction === "rtl";
+		var left_most_button_selector = is_rtl ? ":last-child" : ":first-child";
+		var right_most_button_selector = is_rtl ? ":first-child" : ":last-child";
+
+		this._styles.select(this._selector + ".grouped.fl-control .button" + left_most_button_selector)
 			.style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
 
-		this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
+		this._styles.select(this._selector + ".grouped.fl-control .button" + right_most_button_selector)
 			.style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
 			.style("border-right", this._state.border_width + "px solid " + border_color);
 
@@ -834,7 +956,8 @@
 			.style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
 
 		this._styles.select(this._selector + ":after")
-			.style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
+			.style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
+			.style("color", text_color);
 
 		this._styles.select(this._selector + " .main .current")
 			.style("line-height", "1em")
@@ -882,6 +1005,108 @@
 		this._stylesheet.innerHTML = this._styles.print();
 	};
 
+	function remToPx(rem) {
+		return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+	}
+
+	var DEFAULTS$3 = Object.freeze({
+		width: 15,
+		play_color: null,
+		handle_color: null,
+		font_color: null,
+		track_color: null,
+
+		handle_height: 1,
+		track_height: 0.2,
+		margin: 4.5,
+
+		play_button: true
+	});
+
+	function SliderStyle(state_, selector_, layout_) {
+		this._state = state_;
+		for (var key in DEFAULTS$3) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
+
+		this._layout = layout_ || {};
+
+		this._styles = new Stylesheet();
+		this._selector = selector_;
+		this._createStylesheet();
+
+		return this;
+	}
+
+	SliderStyle.prototype._createStylesheet = function() {
+		this._stylesheet = document.createElement("style");
+		this._stylesheet.className = "fl-ui-styles-slider";
+		document.head.appendChild(this._stylesheet);
+	};
+
+	SliderStyle.prototype.update = function() {
+		this._styles.clear();
+
+		var track_color = this._state.track_color || "#dddddd";
+		var text_color = this._state.font_color || this._layout.font_color || "currentColor";
+		var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
+		var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
+		var play_color = this._state.play_color || this._layout.font_color || "currentColor";
+
+		var slider_width = Math.round(remToPx(this._state.width));
+		var handle_radius = Math.round(remToPx(this._state.handle_height));
+		var track_height = remToPx(this._state.track_height);
+
+		this._styles.select(this._selector + " .fl-controls-slider")
+			.style("height", handle_radius * 2 + "px");
+
+		this._styles.select(this._selector + " .slider-play")
+			.style("fill", play_color)
+			.style("width", handle_radius + "px")
+			.style("height", handle_radius + "px")
+			.style("display", this._state.play_button ? null : "none");
+
+		this._styles.select(this._selector + " .slider-label")
+			.style("padding-inline-start", "0.3rem")
+			.style("color", text_color);
+
+		this._styles.select(this._selector + " input[type=range]")
+			.style("-webkit-appearance", "none")
+			.style("width", slider_width + "px")
+			.style("color", slider_color)
+			.style("background-color", "transparent");
+
+		// Chrome/Edge
+		this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
+			.style("-webkit-appearance", "none")
+			.style("background", track_color)
+			.style("border-radius", "100px")
+			.style("height", track_height + "px");
+
+		this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
+			.style("-webkit-appearance", "none")
+			.style("width", handle_radius + "px")
+			.style("height", handle_radius + "px")
+			.style("border-radius", "100px")
+			.style("background", handle_color)
+			.style("margin-top", -handle_radius/2 + track_height/2 + "px");
+
+		// Firefox
+		this._styles.select(this._selector + " input[type=range]::-moz-range-track")
+			.style("-webkit-appearance", "none")
+			.style("background", track_color)
+			.style("border-radius", "100px")
+			.style("height", track_height + "px");
+
+		this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
+			.style("-webkit-appearance", "none")
+			.style("width", handle_radius + "px")
+			.style("height", handle_radius + "px")
+			.style("border-radius", "100px")
+			.style("border", "none")
+			.style("background", handle_color);
+
+		this._stylesheet.innerHTML = this._styles.print();
+	};
+
 	function createGeneralControlsStyle(state, selector, layout) {
 		return new GeneralControlsStyle(state, selector, layout);
 	}
@@ -894,9 +1119,14 @@
 		return new DropdownStyle(state, selector, layout);
 	}
 
+	function createSliderStyle(state, selector, layout) {
+		return new SliderStyle(state, selector, layout);
+	}
+
 	exports.createButtonStyle = createButtonStyle;
 	exports.createDropdownStyle = createDropdownStyle;
 	exports.createGeneralControlsStyle = createGeneralControlsStyle;
+	exports.createSliderStyle = createSliderStyle;
 
 	Object.defineProperty(exports, '__esModule', { value: true });