@flourish/controls - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
   "name": "@flourish/controls",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Switchable Dropdown/buttons/slider control",
@@ -5,0 +5,0 @@ "main": "controls.js",

src/css.js

@@ -1,2 +0,2 @@
-var css_string = ".btn-group .btn,.dropdown .current{overflow:hidden;text-overflow:ellipsis;height:100%;white-space:nowrap}.btn-group .btn,.dropdown .current,.dropdown .list .list-item{white-space:nowrap}.slider,.slider-play{pointer-events:all;vertical-align:bottom}.btn{display:inline-block;cursor:pointer}.btn:hover{opacity:.5}.btn.selected,.btn.selected:hover{color:#fff;cursor:default;opacity:1;background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.btn-group{background:#fff;border-radius:3px;display:table;border:1px solid rgba(0,0,0,.5);box-shadow:2px 2px 5px rgba(0,0,0,.5);pointer-events:all;width:100%;table-layout:fixed}.btn-group .btn{font-size:.9em;border-left:1px solid rgba(0,0,0,.5);padding:2px 8px;color:#000;font-weight:400;display:table-cell;text-align:center}.btn-group .btn:hover{background:#dedede;opacity:.8}.btn-group .btn:first-child{border:none}.btn-group .btn.selected,.btn-group .btn.selected:hover{opacity:1;background:#888;color:#fff}.dropdown{pointer-events:all;display:inline-table;color:#000;font-weight:400;font-size:16px;position:relative}.dropdown .heading{margin-bottom:.4em;font-weight:300}.dropdown .main{background:#fff;padding:4px 40px 4px 8px;cursor:pointer;position:relative;border:1px solid #000}.dropdown .list,.dropdown .symbol{position:absolute;border:1px solid #000}.dropdown .current{flex:1 1 auto;width:100%;display:inline-block}.dropdown .symbol{width:30px;height:100%;right:0;top:0;background:50% 40% no-repeat #000;background-size:80%;display:inline-block}.dropdown .list{top:100%;left:-1px;min-width:calc(100% + 2px);background:rgba(255,255,255,1);padding:.2em .4em;text-align:left;display:none;line-height:1.4em;max-height:160px;overflow-y:scroll;color:#000}.dropdown .list .list-item:hover{opacity:.5;cursor:pointer}.dropdown.open .list{display:block;z-index:1}.dropdown .list .list-item.selected,.dropdown .list .list-item.selected:hover{color:#57c1fc;cursor:default;opacity:1}.dropdown .list .list-item.header,.dropdown .list .list-item.header:hover{font-size:.66em;letter-spacing:1px;text-transform:uppercase;color:#888;opacity:1;cursor:default;font-weight:300;margin-top:.5em}.dropdown .list .list-item.header:first-child{margin-top:0}.controls-container .dropdown{margin:0 0 1.5em}.controls-container .dropdown .heading{color:#fff}.slider-holder{margin-bottom:25px}.slider-play{width:2em;height:2em;background-repeat:no-repeat;background-size:100% 100%;cursor:pointer;display:none}.slider,.slider-holder.animatable .slider-play{display:inline-block}.slider-play:hover{opacity:.7}.slider{height:64px;width:100%;bottom:0}.slider-holder.animatable .slider{width:calc(100% - 37px)}.slider-holder.playing .slider{pointer-events:none}.slider circle{fill:#57c1fc}.slider .tick line{stroke:#fff}.slider text{fill:#fff}.slider .slider-label{font-size:17px}.slider .slider-end-labels{font-size:14px}.nav-buttons{margin-bottom:20px}";
+var css_string = ".controls-container,.controls-container *{box-sizing:border-box},.btn-group .btn,.dropdown .current{overflow:hidden;text-overflow:ellipsis;height:100%;white-space:nowrap}.btn-group .btn,.dropdown .current,.dropdown .list .list-item{white-space:nowrap}.slider,.slider-play{pointer-events:all;vertical-align:bottom}.btn{display:inline-block;cursor:pointer}.btn:hover{opacity:.5}.btn.selected,.btn.selected:hover{color:#fff;cursor:default;opacity:1;background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.btn-group{background:#fff;border-radius:3px;display:table;border:1px solid rgba(0,0,0,.5);box-shadow:2px 2px 5px rgba(0,0,0,.5);pointer-events:all;width:100%;table-layout:fixed}.btn-group .btn{font-size:.9em;border-left:1px solid rgba(0,0,0,.5);padding:2px 8px;color:#000;font-weight:400;display:table-cell;text-align:center}.btn-group .btn:hover{background:#dedede;opacity:.8}.btn-group .btn:first-child{border:none}.btn-group .btn.selected,.btn-group .btn.selected:hover{opacity:1;background:#888;color:#fff}.dropdown{pointer-events:all;display:inline-table;color:#000;font-weight:400;font-size:16px;position:relative}.dropdown .heading{margin-bottom:.4em;font-weight:300}.dropdown .main{background:#fff;padding:4px 40px 4px 8px;cursor:pointer;position:relative;border:1px solid #000}.dropdown .list,.dropdown .symbol{position:absolute;border:1px solid #000}.dropdown .current{flex:1 1 auto;width:100%;display:inline-block}.dropdown .symbol{width:30px;height:100%;right:0;top:0;background:50% 40% no-repeat #000;background-size:80%;display:inline-block}.dropdown .list{top:100%;left:-1px;min-width:calc(100% + 2px);background:rgba(255,255,255,1);padding:.2em .4em;text-align:left;display:none;line-height:1.4em;max-height:160px;overflow-y:scroll;color:#000}.dropdown .list .list-item:hover{opacity:.5;cursor:pointer}.dropdown.open .list{display:block;z-index:1}.dropdown .list .list-item.selected,.dropdown .list .list-item.selected:hover{color:#57c1fc;cursor:default;opacity:1}.dropdown .list .list-item.header,.dropdown .list .list-item.header:hover{font-size:.66em;letter-spacing:1px;text-transform:uppercase;color:#888;opacity:1;cursor:default;font-weight:300;margin-top:.5em}.dropdown .list .list-item.header:first-child{margin-top:0}.controls-container .dropdown{margin:0 0 1.5em}.controls-container .dropdown .heading{color:#fff}.slider-holder{margin-bottom:25px}.slider-play{width:2em;height:2em;background-repeat:no-repeat;background-size:100% 100%;cursor:pointer;display:none}.slider,.slider-holder.animatable .slider-play{display:inline-block}.slider-play:hover{opacity:.7}.slider{height:64px;width:100%;bottom:0}.slider-holder.animatable .slider{width:calc(100% - 37px)}.slider-holder.playing .slider{pointer-events:none}.slider circle{fill:#57c1fc}.slider .tick line{stroke:#fff}.slider text{fill:#fff}.slider .slider-label{font-size:17px}.slider .slider-end-labels{font-size:14px}.nav-buttons{margin-bottom:20px}";
 
@@ -3,0 +3,0 @@ // https://stackoverflow.com/a/21626701

src/index.js

@@ -6,5 +6,5 @@ import Slider from "@flourish/slider";
 
-function injectCSS(css) {
+(function injectCSS(css) {
   if (typeof document === 'undefined') return;
-  css = css || '';
+  css = css;
   var head = document.head || document.getElementsByTagName('head')[0];
@@ -21,18 +21,13 @@ var style = document.createElement('style');
   return;
-}
+})(css_string);
 
 
-function createControlsGroup(container_selector, state_obj, value_value, update) {
-	
-	injectCSS(css_string);
-	
+function createControlsGroup(container_selector) {
 	var output_obj = {};
-	update = update || function() {};
-	var options, visible_control, current_value, width, is_animatable;
+	var options, visible_control, current_index, current_value, width, is_animatable;
 	
 	var props = {
-		options: [],
 		"data_type": "categorical",
-		"control_type": "dropdown",
-		width: "300",
+		"control_type": "auto",
+		width: 300,
 		"step_time": 2,
@@ -45,13 +40,55 @@ "loop_time": 1.5,
 		var methodName = key.replace(/_\w/g, function(substr) { return substr.charAt(1).toUpperCase(); });
-		output_obj[methodName] = function(value){
-			if(value === undefined) return props[key];
-			props[key] = value;
-			return this;
+		output_obj[methodName] = function(val){
+			if (val === undefined) return props[key];
+			props[key] = val;
+			return output_obj;
 		};
 	} );
-		
+
+	props.index = 0;
+
+	output_obj.index = function(index) {
+		if (index=== undefined) return props.index;
+		if (!Number.isFinite(index)) throw TypeError("index must be a number greater than or equal to 0.")
+		if (index < 0) throw RangeError("index must be greater than or equal to 0.")
+		props.index = Math.floor(index);
+		return output_obj;
+	}
+	
+	props.options = [];
+	
+	output_obj.options = function(opts) {
+		if (opts === undefined) return props.options.slice();
+		props.options = Object.freeze(opts.slice());
+		return output_obj
+	};
+
 	Object.defineProperty(props, "value", {
-		get: function() { return state_obj[value_value]; },
-		set: function(x) { state_obj[value_value] = x; }
-	});
+  	get: function() { return props.options[props.index]; },
+		set: function() { console.warn("Nothing changed: props.value is read only"); }
+	} );
+
+	output_obj.value = function(value){
+		if (value === undefined) return props.value;
+		var index = props.options.indexOf(value);
+		if(index !== -1) props.index = index;
+		else console.warn("Nothing changed: value not in options list");
+		return output_obj;
+	};
+
+	props.changeHandlers = [];
+
+	output_obj.on = function(event, callback){
+		if(event === "change") props.changeHandlers.push(callback.bind(output_obj));
+		return this;
+	};
+
+	function onChangeCallbacks() {
+		var value = props.value;
+		var index = props.index;
+		props.changeHandlers.forEach(function(func) {
+			func(value, index);
+		});
+	}
+
 	
@@ -108,3 +145,3 @@ // Grab container
 		toggleDropdownList();
-	});
+	} );
 	
@@ -119,7 +156,8 @@ var updateDropdown = function() {
 			.text(function(d) { return d; })
-			.on("click", function(d) {
+			.on("click", function(d, i) {
 				hideDropdownList();
 				if (select(this).classed("selected")) return;
-				props.value = d;
-				update();
+				props.index = i;
+				updateCurrentValue();
+				onChangeCallbacks();
 			});
@@ -129,4 +167,2 @@ };
 
-	//slider_holder.classed("animatable", true);
-
 	var slider = Slider(container_selector + " .slider-holder .slider")
@@ -159,4 +195,4 @@ .handleRadius(12)
 			slider.value(index).update();
-			props.value = options[index];
-			update();
+			props.index = index;
+			onChangeCallbacks();
 			var ni = (next_index+1)%options.length;
@@ -177,4 +213,4 @@ setSliderPlayerMove(ni);
 			slider.value(val).update();
-			props.value = options[val];
-			update();
+			props.index = val;
+			onChangeCallbacks();
 		}
@@ -184,4 +220,4 @@ else if (step_time < 0 && val === 0) {
 			slider.value(val).update();
-			props.value = options[val];
-			update();
+			props.index = val;
+			onChangeCallbacks();
 		}
@@ -205,4 +241,5 @@ var effective_index = step_time>0 ? val : options.length-(1+val);
 			.on("change", function(index) {
-				props.value = options[index];
-				update();
+				props.index = index;
+				updateCurrentValue();
+				onChangeCallbacks();
 			})
@@ -216,5 +253,3 @@ .update();
 	var updateButtons = function() {
-			buttons = button_group.text("");
-
-			buttons = button_group.selectAll(".btn")
+			buttons = button_group.text("").selectAll(".btn")
 				.data(options)
@@ -226,7 +261,8 @@ .enter()
 				.attr("title", function(d) { return d; })
-				.on("click", function(d) {
+				.on("click", function(d, i) {
 					hideDropdownList();
-					if (d === current_value) return;
-					props.value = d;
-					update();
+					if (i === props.index) return;
+					props.index = i;
+					updateCurrentValue();
+					onChangeCallbacks();
 				});
@@ -255,3 +291,5 @@ };
 		options = opts.slice();
-		if (options.length < 2) {
+		var num_options = options.length;
+		if (props.index > num_options - 1) props.index = num_options ? num_options - 1 : 0;
+		if (num_options < 2) {
 			changeVisibleControl();
@@ -286,3 +324,4 @@ return false;
 			slider.update();
-		} else{
+		} 
+		else {
 			slider_holder.classed("animatable", true);
@@ -315,3 +354,4 @@ slider.update();
 	var updateCurrentValue = function() {
-		if (current_value === props.value) return;
+		if (current_index === props.index && current_value === props.value) return;
+		current_index = props.index;
 		current_value = props.value;
@@ -326,8 +366,6 @@ dropdown_current.text(current_value).attr("title", current_value);
 	};
-
-	var prop_list =	["data_type", "control_type",	"width", "step_time",	"loop_time", "handle_colour"];
 	
-	
 	var updateControls = function() {
-		if (!updateControlOptions(props.options)) return;
+		var multiple_options = updateControlOptions(props.options);
+		if (!multiple_options) return;
 		updateControlWidth();
@@ -341,4 +379,4 @@ updateControlAnimation();
 	output_obj.showDropdownList = function() { showDropdownList(); return this; };
-	output_obj.hideDropdownList = function() { showDropdownList(); return this; };
-	output_obj.toggleDropdownList = function() { showDropdownList(); return this; };
+	output_obj.hideDropdownList = function() { hideDropdownList(); return this; };
+	output_obj.toggleDropdownList = function() { toggleDropdownList(); return this; };
 	output_obj.update = function() { updateControls(); return this; };
@@ -345,0 +383,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117077

increased by2.3%

Lines of code

3157

increased by2.27%

No dependency changes