Added new functionality

- Define margin and limit in modeler
- Define direction and orientation in modeler
- Toggle tooltips in modeler
- Set default behaviour to drag-tap

src/Handles/Handles.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <widget id="Handles.widget.Handles" needsEntityContext="true" xmlns="http://www.mendix.com/widget/1.0/">
     <name>Handles</name>
-    <description>The description of this widget.</description>
+    <description>Slider with two (or more handles)</description>
 
     <icon />
 
@@ -22,20 +22,68 @@
           <description>The size of the interval between slider steps.</description>
       </property>
       <property key="handleAttr0" type="attribute">
-          <caption>Lower Handle</caption>
+          <caption>Lower Handle Attribute</caption>
           <category>Slider Settings</category>
           <description>Entity Attribute (decimal) coupled with the lower handle of the slider.</description>
           <attributeTypes>
               <attributeType name="Decimal" />
           </attributeTypes>
       </property>
       <property key="handleAttr1" type="attribute">
-          <caption>Upper Handle</caption>
+          <caption>Upper Handle Attribute</caption>
           <category>Slider Settings</category>
           <description>Entity Attribute (decimal) coupled with the upper handle of the slider.</description>
           <attributeTypes>
               <attributeType name="Decimal" />
           </attributeTypes>
       </property>
+      <property key="toolTips" type="boolean" defaultValue="false">
+          <caption>Display Value Labels</caption>
+          <category>Slider Settings</category>
+          <description>Set true to display the handle's value in a label.</description>
+      </property>
+      <property key="direction" type="enumeration" defaultValue="ltr">
+          <caption>Direction</caption>
+          <category>Slider Settings</category>
+          <description>Configure the slider to increase left-to-right/top-to-bottom or right-to-left/bottom-to-top.</description>
+          <enumerationValues>
+              <enumerationValue key="ltr">Left-to-right / Top-to-bottom</enumerationValue>
+              <enumerationValue key="rtl">Right-to-left / Bottom-to-top</enumerationValue>
+          </enumerationValues>
+      </property>
+      <property key="orientation" type="enumeration" defaultValue="horizontal">
+          <caption>Orientation</caption>
+          <category>Slider Settings</category>
+          <description>Configure the orientation of the slider.
+If Vertical, be sure to select the correct Direction value for your purposes.
+Also if Vertical, height must be manually set in the widget css (class .noUi-vertical)</description>
+          <enumerationValues>
+              <enumerationValue key="horizontal">Horizontal</enumerationValue>
+              <enumerationValue key="vertical">Vertical</enumerationValue>
+          </enumerationValues>
+      </property>
+
+      <property key="enforceMargin" type="boolean" defaultValue="false">
+          <caption>Enforce Minimum Range</caption>
+          <category>Advanced Settings</category>
+          <description>Set true to enforce a minimum size for the range between handles</description>
+      </property>
+      <property key="marginSize" type="integer" defaultValue="25">
+          <caption>Minimum Range</caption>
+          <category>Advanced Settings</category>
+          <description>Size of the minimum range; takes effect only if Enforce Minimum Range is true.</description>
+      </property>
+      <property key="enforceLimit" type="boolean" defaultValue="false">
+          <caption>Enforce Maximum Range</caption>
+          <category>Advanced Settings</category>
+          <description>Set true to enforce a maximum size for the range between handles</description>
+      </property>
+      <property key="limitSize" type="integer" defaultValue="25">
+          <caption>Maximum Range</caption>
+          <category>Advanced Settings</category>
+          <description>Size of the maximum range; takes effect only if Enforce Maximum Range is true.</description>
+      </property>
+
+
     </properties>
 </widget>

src/Handles/widget/Handles.js

@@ -33,10 +33,14 @@ define([
     "dojo/text",
     "dojo/html",
     "dojo/_base/event",
+    "dojo/query",
 
     "Handles/lib/nouislider",
     "dojo/text!Handles/widget/template/Handles.html"
 ], function (declare, _WidgetBase, _TemplatedMixin, dom, dojoDom, dojoProp, dojoGeometry, dojoClass, dojoStyle, dojoConstruct, dojoArray, dojoLang, dojoText, dojoHtml, dojoEvent,
+
+    dojoQuery,
+
     noUiSlider, widgetTemplate) {
     "use strict";
 
@@ -54,12 +58,21 @@ define([
         sliderStep : "",
         handleAttr0 : "",
         handleAttr1 : "",
+        testProperty : "",
+        enforceMargin : false,
+        marginSize : null,
+        enforceLimit : false,
+        limitSize : null,
+        direction : "",
+        orientation : "",
+        toolTips : false,
 
         // Internal variables. Non-primitives created in the prototype are shared between all widget instances.
         _handles: null,
         _contextObj: null,
         _alertDiv: null,
         _readOnly: false,
+        _sliderSettings: null,
 
         // dojo.declare.constructor is called to construct the widget instance. Implement to initialize non-primitive properties.
         constructor: function () {
@@ -71,13 +84,22 @@ define([
         postCreate: function () {
             logger.debug(this.id + ".postCreate");
 
+            this._sliderSettings = {
+              start: [this.sliderMax * 0.25, this.sliderMax * 0.75],
+              step: this.sliderStep,
+              connect: true,
+              range: { 'min': this.sliderMin, 'max': this.sliderMax },
+              behaviour: 'drag-tap'
+            };
+
             this._updateRendering();
-            noUiSlider.create(this.domTarget, {
-               start: [this.sliderMax * 0.25, this.sliderMax * 0.75],
-               step: this.sliderStep,
-               connect: true,
-               range: { 'min': this.sliderMin, 'max': this.sliderMax }
-             });
+
+            this._setDirectionAndOrientation();
+            this._setMarginAndLimit();
+            this._toggleTooltips();
+            this._buildPips();
+
+            noUiSlider.create(this.domTarget, this._sliderSettings);
 
             this._setupEvents();
         },
@@ -92,7 +114,7 @@ define([
 
             if(this._contextObj.get(this.handleAttr0) == 0 && this._contextObj.get(this.handleAttr1) == 0) {
               this._contextObj.set(this.handleAttr0, this.domTarget.noUiSlider.get()[0]);
-              this._contextObj.set(this.handleAttr1, this.domTarget.noUiSlider.get()[1]); 
+              this._contextObj.set(this.handleAttr1, this.domTarget.noUiSlider.get()[1]);
             } else {
               this.domTarget.noUiSlider.set( [this._contextObj.get(this.handleAttr0), this._contextObj.get(this.handleAttr1)] );
             }
@@ -132,7 +154,6 @@ define([
             logger.debug(this.id + "._setupEvents");
             var self = this;
             self.domTarget.noUiSlider.on('slide', function() {
-              console.log("listener is firing");
               self._contextObj.set(self.handleAttr0, self.domTarget.noUiSlider.get()[0]);
               self._contextObj.set(self.handleAttr1, self.domTarget.noUiSlider.get()[1]);
             });
@@ -225,7 +246,49 @@ define([
 
                 this._handles = [ objectHandle, attrHandle, validationHandle ];
             }
+        },
+
+        // Set the direction and orientation of the sliderMin
+        _setDirectionAndOrientation: function() {
+          console.log('set direction and orientation');
+          if (this.direction == 'rtl') {
+            this._sliderSettings.direction = this.direction
+          };
+          if (this.orientation == 'vertical') {
+            this._sliderSettings.orientation = this.orientation
+          };
+        },
+
+        // Set the margin and limit (minimum and maximum separation between handles)
+        _setMarginAndLimit: function() {
+          console.log('set margin...')
+          if ( (this.enforceMargin && this.marginSize != null) ) {
+            this._sliderSettings.margin = this.marginSize
+          };
+          if ( (this.enforceLimit && this.limitSize != null) ) {
+            this._sliderSettings.limit = this.limitSize
+          };
+        },
+
+        // Toogle display of values on the handles
+        _toggleTooltips: function() {
+          console.log('set tool tips...')
+          if ( (this.toolTips) ) {
+            this._sliderSettings.tooltips = [true, true];
+          }
+        },
+
+        // If steps are >= 25% of the range, render pips
+        _buildPips: function() {
+          console.log('build pips...')
+          if ( (this.sliderMax-this.sliderMin) / this.sliderStep <= 4 ) {
+            this._sliderSettings.pips = {
+              mode: 'steps', density: this.sliderStep
+            }
+          }
         }
+
+
     });
 });
 

src/Handles/widget/ui/Handles.css

@@ -92,6 +92,7 @@
 }
 .noUi-vertical {
 	width: 18px;
+  height: 400px;
 }
 .noUi-vertical .noUi-handle {
 	width: 28px;

test/deployment/build_core.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<project name="Test" default="deploy" basedir="C:\Users\mch\Desktop\Widgeting\Handles\test">
+<project name="Test" default="deploy" basedir="C:\Users\mch\Documents\GitHub\Handles\test">
   <description>Ant buildfile for deployment. Generated by the Mendix Business Modeler.</description>
   <property name="deployment" location="deployment" />
   <property name="model" location="${deployment}/model" />