🆕 new: new field type: noUiSlider

Lionel Bijaoui · Lionel Bijaoui · commit 9abf3e22ffa7 · 2016-08-11T16:30:29.000+02:00
diff --git a/dev/index.html b/dev/index.html
@@ -10,6 +10,8 @@
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
+
 	
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
@@ -21,6 +23,7 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
 	<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>
diff --git a/dev/schema.js b/dev/schema.js
@@ -298,6 +298,27 @@ module.exports = {
 			valueOff: "male"
 		},
 
+		{
+			type: "noUiSlider",
+			label: "Rank (noUiSlider field)",
+			model: "rank",
+			multi: true,
+			min: 1,
+			max: 10,
+			required: true,
+			sliderOptions: {
+				// connect: "lower",	// "lower", "upper", true, false
+				// margin: 2 //number
+				// limit: 2 //number
+				step:1,
+				// orientation:"horizontal", //"vertical", "horizontal"
+				// direction: "ltr", //"ltr", "rtl"
+				// tooltips: false, // false, true, formatter, array[formatter or false]
+				// animate: true,
+			},
+			// validator: validators.integer
+		},
+
 		{
 			type: "slider",
 			label: "Rank (slider field)",
@@ -309,7 +330,7 @@ module.exports = {
 			sliderOptions: {
 				grid: true
 			},
-			validator: validators.integer
+			// validator: validators.integer
 		},
 
 		{
diff --git a/src/fields/fieldNoUiSlider.vue b/src/fields/fieldNoUiSlider.vue
@@ -0,0 +1,56 @@
+<template lang="jade">
+	div.slider
+</template>
+
+<script>
+import abstractField from "./abstractField";
+import { defaults } from "lodash";
+
+export default {
+	mixins: [abstractField],
+	data() {
+		return {
+			slider: null
+		};
+	},
+	watch: {
+		model: function() {
+			if (window.noUiSlider) {
+				console.log(this.value);
+				this.slider.noUiSlider.set(this.value);
+			}
+		}
+	},
+	methods: {
+		onChange(value) {
+			if (value.length === 1) {
+				// this.value = parseInt(value[0], 10);
+				this.value = value[0];
+			}
+		}
+	},
+	ready() {
+		if (window.noUiSlider) {
+			this.slider = this.$el;
+			window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, {
+				start: this.schema.min,
+				range: {
+					"min": this.schema.min,
+					"max": this.schema.max
+				}
+			}));
+			this.slider.noUiSlider.on("change", this.onChange.bind(this));
+		} else {
+			console.warn("noUiSlider is missing. Please download from https://github.com/leongersen/noUiSlider and load the script and CSS in the HTML head section!");
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.vue-form-generator .field-noUiSlider {
+	.field-wrap {
+		display: block;
+	}
+}
+</style>
diff --git a/test/unit/specs/fields/fieldNoUiSlider.spec.js b/test/unit/specs/fields/fieldNoUiSlider.spec.js
@@ -0,0 +1,42 @@
+import { expect } from "chai";
+import { createVueField } from "../util";
+
+import Vue from "vue";
+import fieldNoUiSlider from "src/fields/fieldNoUiSlider.vue";
+
+Vue.component("fieldNoUiSlider", fieldNoUiSlider);
+
+// eslint-disable-next-line
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	[ el, vm, field ] = createVueField("fieldNoUiSlider", schema, model, disabled, options);
+}
+
+describe("fieldNoUiSlider.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "range",
+			label: "Rating",
+			model: "rating",
+			min: 1,
+			max: 10
+		};
+		let model = { rating: 8 };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByClassName("slider")[0];
+		});
+
+		it("should contain a div element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.classList.contains("slider")).to.be.true;			
+		});
+	});
+});
