Skip to content

Commit 9abf3e2

Browse files
author
Lionel Bijaoui
committed
🆕 new: new field type: noUiSlider
1 parent 31a578d commit 9abf3e2

File tree

4 files changed

+123
-1
lines changed

4 files changed

+123
-1
lines changed

‎dev/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
1111
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
1212
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
13+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
14+
1315

1416
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
1517
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
@@ -21,6 +23,7 @@
2123
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
2224
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
2325
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
26+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
2427
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
2528
</head>
2629
<body>

‎dev/schema.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,27 @@ module.exports = {
298298
valueOff: "male"
299299
},
300300

301+
{
302+
type: "noUiSlider",
303+
label: "Rank (noUiSlider field)",
304+
model: "rank",
305+
multi: true,
306+
min: 1,
307+
max: 10,
308+
required: true,
309+
sliderOptions: {
310+
// connect: "lower", // "lower", "upper", true, false
311+
// margin: 2 //number
312+
// limit: 2 //number
313+
step:1,
314+
// orientation:"horizontal", //"vertical", "horizontal"
315+
// direction: "ltr", //"ltr", "rtl"
316+
// tooltips: false, // false, true, formatter, array[formatter or false]
317+
// animate: true,
318+
},
319+
// validator: validators.integer
320+
},
321+
301322
{
302323
type: "slider",
303324
label: "Rank (slider field)",
@@ -309,7 +330,7 @@ module.exports = {
309330
sliderOptions: {
310331
grid: true
311332
},
312-
validator: validators.integer
333+
// validator: validators.integer
313334
},
314335

315336
{

‎src/fields/fieldNoUiSlider.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template lang="jade">
2+
div.slider
3+
</template>
4+
5+
<script>
6+
import abstractField from "./abstractField";
7+
import { defaults } from "lodash";
8+
9+
export default {
10+
mixins: [abstractField],
11+
data() {
12+
return {
13+
slider: null
14+
};
15+
},
16+
watch: {
17+
model: function() {
18+
if (window.noUiSlider) {
19+
console.log(this.value);
20+
this.slider.noUiSlider.set(this.value);
21+
}
22+
}
23+
},
24+
methods: {
25+
onChange(value) {
26+
if (value.length === 1) {
27+
// this.value = parseInt(value[0], 10);
28+
this.value = value[0];
29+
}
30+
}
31+
},
32+
ready() {
33+
if (window.noUiSlider) {
34+
this.slider = this.$el;
35+
window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, {
36+
start: this.schema.min,
37+
range: {
38+
"min": this.schema.min,
39+
"max": this.schema.max
40+
}
41+
}));
42+
this.slider.noUiSlider.on("change", this.onChange.bind(this));
43+
} else {
44+
console.warn("noUiSlider is missing. Please download from https://github.com/leongersen/noUiSlider and load the script and CSS in the HTML head section!");
45+
}
46+
}
47+
};
48+
</script>
49+
50+
<style lang="sass">
51+
.vue-form-generator .field-noUiSlider {
52+
.field-wrap {
53+
display: block;
54+
}
55+
}
56+
</style>

‎test/unit/specs/fields/fieldNoUiSlider.spec.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { expect } from "chai";
2+
import { createVueField } from "../util";
3+
4+
import Vue from "vue";
5+
import fieldNoUiSlider from "src/fields/fieldNoUiSlider.vue";
6+
7+
Vue.component("fieldNoUiSlider", fieldNoUiSlider);
8+
9+
// eslint-disable-next-line
10+
let el, vm, field;
11+
12+
function createField(schema = {}, model = null, disabled = false, options) {
13+
[ el, vm, field ] = createVueField("fieldNoUiSlider", schema, model, disabled, options);
14+
}
15+
16+
describe("fieldNoUiSlider.vue", () => {
17+
18+
describe("check template", () => {
19+
let schema = {
20+
type: "range",
21+
label: "Rating",
22+
model: "rating",
23+
min: 1,
24+
max: 10
25+
};
26+
let model = { rating: 8 };
27+
let input;
28+
29+
before( () => {
30+
createField(schema, model, false);
31+
input = el.getElementsByClassName("slider")[0];
32+
});
33+
34+
it("should contain a div element", () => {
35+
expect(field).to.be.exist;
36+
expect(field.$el).to.be.exist;
37+
38+
expect(input).to.be.defined;
39+
expect(input.classList.contains("slider")).to.be.true;
40+
});
41+
});
42+
});

0 commit comments

Comments
 (0)