@flourish/ui-styles 3.0.0 → 4.0.0

package/README.md

@@ -46,7 +46,7 @@ The init function takes the state object as a first argument. The second argumen
 
 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()`.
+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();

package/RELEASE_NOTES.md

@@ -1,3 +1,10 @@
+# 4.0.0
+* Move slider width setting from @flourish/ui-styles to @flourish/controls [BREAKING] For use with version 8.0.0+ of @flourish/controls
+
+# 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "3.0.0",
+  "version": "4.0.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

@@ -19,12 +19,6 @@
   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

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/slider-style/index.js

@@ -2,7 +2,6 @@ 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,
@@ -43,7 +42,6 @@ SliderStyle.prototype.update = function() {
 	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);
 
@@ -62,7 +60,6 @@ SliderStyle.prototype.update = function() {
 
 	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");
 

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);
 
@@ -888,7 +1010,6 @@
 	}
 
 	var DEFAULTS$3 = Object.freeze({
-		width: 15,
 		play_color: null,
 		handle_color: null,
 		font_color: null,
@@ -929,7 +1050,6 @@
 		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);
 
@@ -948,7 +1068,6 @@
 
 		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");