@flourish/controls - npm Package Compare versions

Comparing version 0.0.7 to 0.1.0

package.json

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

rollup.config.js

@@ -8,6 +8,6 @@ import nodeResolve from "rollup-plugin-node-resolve";
   dest: "controls.js",
- 	plugins: [
-		nodeResolve()
+  plugins: [
+  	nodeResolve()
   ]
 };
 

src/css.js

@@ -1,2 +0,2 @@
-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}";
+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 {pointer-events: all; width: auto; line-height: 0; } .btn-group .btn {font-size: 12px; border: 1px solid #ccc; background:#fff; padding: 2px 8px; color: #333; font-weight: 400; text-align: center; line-height: 18px; height: 24px; border-radius: 3px; margin: 1px 1px 1px 1px; } .btn-group .btn:hover {background: #eee; opacity: .8 } .btn-group .btn.selected, .btn-group .btn.selected:hover {opacity: 1; background: #ececec; color: #333; } @media(min-width:520px) {.btn-group .btn {font-size: 14px; height: 30px; line-height: 24px; } } .dropdown {text-align: left; pointer-events: all; display: inline-table; color: #333; font-weight: 400; font-size: 16px; position: relative } .dropdown .heading {margin-bottom: .4em; font-weight: 300 } .dropdown .main {background: #fff; padding: 0 60px 0 6px; cursor: pointer; position: relative; border: 1px solid #ccc; border-radius: 3px; height: 24px; line-height: 20px; } .dropdown .list, .dropdown .symbol {position: absolute; } .dropdown .current {width: 100%; display: inline-block; font-size: 12px; } .dropdown .symbol {width: 30px; height: 100%; right: 0; top: 0; background: 80% 40% no-repeat; background-size: auto 50%; display: inline-block } .dropdown .list {top: 100%; left: -1px; min-width: calc(100% + 2px); background: rgba(255, 255, 255, 1); padding: 0 2px; text-align: left; display: none; line-height: 1.4em; max-height: 160px; overflow-y: scroll; color: #333; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .dropdown .list .list-item {font-size: 12px; height: 24px; padding: 0 5px; } .dropdown .list .list-item:hover {cursor: pointer; background: #eee; } .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: #333; } @media(min-width:520px) {.dropdown .list .list-item {font-size: 14px; height: 24px; } .dropdown .main {height: 30px; line-height: 24px; } .dropdown .current {font-size: 14px; } } .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: #333; } .slider text {fill: #333; } .slider .slider-label {font-size: 16px; } .slider .slider-end-labels {font-size: 11px; fill: #9e9e9e; } .nav-buttons {margin-bottom: 20px; } ";
 
@@ -8,7 +8,7 @@ // https://stackoverflow.com/a/21626701
 
-var chevron_body = '<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M43.33,22.133l-17.362,17.339c-0.297,0.296 -0.648,0.445 -1.053,0.445c-0.406,0 -0.757,-0.149 -1.053,-0.445l-17.362,-17.339c-0.297,-0.296 -0.445,-0.651 -0.445,-1.064c0,-0.414 0.148,-0.769 0.445,-1.065l3.884,-3.861c0.296,-0.296 0.647,-0.444 1.053,-0.444c0.406,0 0.757,0.148 1.053,0.444l12.425,12.425l12.425,-12.425c0.296,-0.296 0.647,-0.444 1.053,-0.444c0.405,0 0.756,0.148 1.053,0.444l3.884,3.861c0.296,0.296 0.444,0.651 0.444,1.065c0,0.413 -0.148,0.768 -0.444,1.064Z" style="fill:#fff;fill-rule:nonzero;"/></svg>';
+var chevron_body = '<svg width="6px" height="12px" viewBox="0 0 6 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="translate(-442.000000, -44.000000)" fill="#333333"> <g id="Group" transform="translate(442.000000, 44.000000)"> <polygon id="Triangle-2" points="3 0 6 5 0 5"></polygon> <polygon id="Triangle-2-Copy" points="3 12 0 7 6 7"></polygon> </g> </g> </svg>';
 
-var play_body = '<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g transform="matrix(1,0,0,1,3.95878,18.1658)"><path d="M36.961,7.001L5.836,24.298C5.477,24.501 5.168,24.525 4.91,24.369C4.652,24.212 4.524,23.931 4.524,23.525L4.524,-10.975C4.524,-11.381 4.652,-11.663 4.91,-11.819C5.168,-11.975 5.477,-11.952 5.836,-11.749L36.961,5.548C37.32,5.751 37.5,5.994 37.5,6.275C37.5,6.556 37.32,6.798 36.961,7.001Z" style="fill:white;fill-rule:nonzero;"/></g></svg>';
+var play_body = '<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g transform="matrix(1,0,0,1,3.95878,18.1658)"><path d="M36.961,7.001L5.836,24.298C5.477,24.501 5.168,24.525 4.91,24.369C4.652,24.212 4.524,23.931 4.524,23.525L4.524,-10.975C4.524,-11.381 4.652,-11.663 4.91,-11.819C5.168,-11.975 5.477,-11.952 5.836,-11.749L36.961,5.548C37.32,5.751 37.5,5.994 37.5,6.275C37.5,6.556 37.32,6.798 36.961,7.001Z" style="fill:#333;fill-rule:nonzero;"/></g></svg>';
 
-var pause_body = '<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M40.867,7.941l0,33c0,0.406 -0.128,0.757 -0.386,1.054c-0.257,0.297 -0.562,0.446 -0.914,0.446l-10.401,0c-0.352,0 -0.657,-0.149 -0.914,-0.446c-0.258,-0.297 -0.386,-0.648 -0.386,-1.054l0,-33c0,-0.407 0.128,-0.758 0.386,-1.055c0.257,-0.297 0.562,-0.445 0.914,-0.445l10.401,0c0.352,0 0.657,0.148 0.914,0.445c0.258,0.297 0.386,0.648 0.386,1.055ZM22.665,7.941l0,33c0,0.406 -0.129,0.757 -0.386,1.054c-0.257,0.297 -0.562,0.446 -0.914,0.446l-10.402,0c-0.352,0 -0.657,-0.149 -0.914,-0.446c-0.257,-0.297 -0.386,-0.648 -0.386,-1.054l0,-33c0,-0.407 0.129,-0.758 0.386,-1.055c0.257,-0.297 0.562,-0.445 0.914,-0.445l10.402,0c0.352,0 0.657,0.148 0.914,0.445c0.257,0.297 0.386,0.648 0.386,1.055Z" style="fill:#fff;fill-rule:nonzero;"/></svg>';
+var pause_body = '<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M40.867,7.941l0,33c0,0.406 -0.128,0.757 -0.386,1.054c-0.257,0.297 -0.562,0.446 -0.914,0.446l-10.401,0c-0.352,0 -0.657,-0.149 -0.914,-0.446c-0.258,-0.297 -0.386,-0.648 -0.386,-1.054l0,-33c0,-0.407 0.128,-0.758 0.386,-1.055c0.257,-0.297 0.562,-0.445 0.914,-0.445l10.401,0c0.352,0 0.657,0.148 0.914,0.445c0.258,0.297 0.386,0.648 0.386,1.055ZM22.665,7.941l0,33c0,0.406 -0.129,0.757 -0.386,1.054c-0.257,0.297 -0.562,0.446 -0.914,0.446l-10.402,0c-0.352,0 -0.657,-0.149 -0.914,-0.446c-0.257,-0.297 -0.386,-0.648 -0.386,-1.054l0,-33c0,-0.407 0.129,-0.758 0.386,-1.055c0.257,-0.297 0.562,-0.445 0.914,-0.445l10.402,0c0.352,0 0.657,0.148 0.914,0.445c0.257,0.297 0.386,0.648 0.386,1.055Z" style="fill:#333;fill-rule:nonzero;"/></svg>';
 
@@ -15,0 +15,0 @@ var chevron_string = makeBackgroundString(chevron_body);

src/index.js

@@ -31,6 +31,6 @@ import Slider from "@flourish/slider";
 		"control_type": "default",
-		width: 300,
+		width: 200,
 		"step_time": 2,
 		"loop_time": 1.5,
-		"handle_colour": "#73bef7"
+		"handle_colour": "#333"
 	};
@@ -175,3 +175,3 @@
 			.handleRadius(12)
-			.channelHeight(24)
+			.channelHeight(6)
 			.snap(true)
@@ -314,3 +314,3 @@ .margin({ left: 60, right: 60, top: 50 });
 		if (visible_control === "slider") slider.update(); //Doesn't update properly if slider is display: none
-		button_nav.style("width", width_px);
+		button_nav.style("width", null); //See how this works with width: auto for now - Daan
 	};
@@ -317,0 +317,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

118914

increased by0.58%

No dependency changes