Merge pull request #1290 from bartbutenaers/switch-select-area

Switch - adjustable clickable area

docs/nodes/widgets/ui-switch.md

@@ -4,6 +4,7 @@ props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
     Label: The text shown within the button.
+    Clickable: The clickable area (which will result in the switch toggling).
     On Icon: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "on" state. No need to include the <code>mdi</code> prefix.
     Off Icon: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "off" state. No need to include the <code>mdi</code> prefix.
     On Color: If provided with a icons, this colour is used for the icon when in "on" state
@@ -23,6 +24,9 @@ dynamic:
     Label:
         payload: msg.ui_update.label
         structure: ["Boolean"]
+    Clickable:
+        payload: msg.ui_update.clickableArea
+        structure: ["String"]
     Passthrough:
         payload: msg.ui_update.passthru
         structure: ["Boolean"]

nodes/widgets/locales/en-US/ui_switch.html

@@ -24,6 +24,8 @@ <h3>Properties</h3>
         <dd>If "Icon" is defined, this property controls which side of the "Label" the icon will render on</dd>
         <dt>Label <span class="property-type">string</span></dt>
         <dd>The text shown within the button. If not provided, then the button will only render the icon. It supports HTML content</dd>
+        <dt>Clickable <span class="property-type">string</span></dt>
+        <dd>The part of the horizontal line that is clickable.  By default only the switch icon will be clickable.</dd>
         <dt>Icon <span class="property-type">default | custom</span></dt>
         <dd>Either use the "default" switch appearance, or define your own custom icons.</dd>
         <dt>On Icon <span class="property-type">string</span></dt>
@@ -55,6 +57,17 @@ <h3>Dynamic Properties (Inputs)</h3>
         <dt class="optional">label <span class="property-type">string</span></dt>
         <dd>Change the switch label at runtime.</dd>
     </dl>
+    <dl class="message-properties">
+        <dt class="optional">clickableArea <span class="property-type">string</span></dt>
+        <dd>
+            Change the clickable area at runtime:
+            <ul>
+                <li><code>switch</code>: only the switch icon is clickable</li>
+                <li><code>label</code>: both the label text and the switch icon are clickable</li>
+                <li><code>line</code>: the entire line is clickable</li>
+            </ul>
+        </dd>
+    </dl>
     <dl class="message-properties">
         <dt class="optional">passthru <span class="property-type">boolean</span></dt>
         <dd>Change the passthrough behaviour of input messages at runtime.</dd>

nodes/widgets/ui_switch.html

@@ -30,6 +30,7 @@
                 topicType: { value: 'msg' },
                 style: { value: '' },
                 className: { value: '' },
+                clickableArea: { value: 'switch' },
                 // on state
                 onvalue: { value: true, validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('onvalueType') : function (v) { return true }) },
                 onvalueType: { value: 'bool' },
@@ -48,6 +49,11 @@
             label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'switch' },
             labelStyle: function () { return this.name ? 'node_label_italic' : '' },
             oneditprepare: function () {
+                // Migration of older nodes without clickableArea
+                if (!this.clickableArea) {
+                    $('#node-input-clickableArea').val('switch')
+                }
+
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                 if (RED.nodes.subflow(this.z)) {
@@ -167,6 +173,14 @@
         <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
         <input type="text" id="node-input-label">
     </div>
+    <div class="form-row">
+        <label for="node-input-clickableArea"><i class="fa fa-hand-pointer-o"></i> Clickable</label>
+        <select id="node-input-clickableArea" style="width:70%">
+            <option value="switch">Only switch</option>
+            <option value="label">Label and switch</option>
+            <option value="line">Entire line</option>
+        </select>
+    </div>
     <div class="form-row">
         <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
         <div style="display: inline;">
@@ -186,7 +200,7 @@
     </div>-->
     <div class="form-row">
         <label for="node-input-custom-icons"><i class="fa fa-picture-o"></i> Icon</label>
-        <select id="node-input-custom-icons" style="width:35%">
+        <select id="node-input-custom-icons" style="width:70%">
             <option value="default">Default</option>
             <option value="custom">Custom</option>
         </select>
@@ -233,4 +247,4 @@
         <input type="text" id="node-input-topic">
         <input type="hidden" id="node-input-topicType">
     </div>
-</script>
+</script>

nodes/widgets/ui_switch.js

@@ -104,6 +104,10 @@ module.exports = function (RED) {
                         // dynamically set "label" property
                         statestore.set(group.getBase(), node, msg, 'label', updates.label)
                     }
+                    if (typeof updates.clickableArea !== 'undefined') {
+                        // dynamically set "clickableArea" property
+                        statestore.set(group.getBase(), node, msg, 'clickableArea', updates.clickableArea)
+                    }
                     if (typeof updates.passthru !== 'undefined') {
                         // dynamically set "passthru" property
                         statestore.set(group.getBase(), node, msg, 'passthru', updates.passthru)

ui/src/widgets/ui-switch/UISwitch.vue

@@ -1,6 +1,19 @@
 <template>
     <div class="nrdb-switch" :class="{'nrdb-nolabel': !label, [className]: !!className}">
-        <label v-if="label" class="v-label">{{ label }}</label>
+        <label
+            v-if="label"
+            class="v-label"
+            :style="{cursor: lineClickable ? 'pointer' : 'default'}"
+            @click="lineClickable ? toggle() : null"
+        >
+            <span
+                class="clickable-label"
+                :style="{cursor: textClickable ? 'pointer' : 'default'}"
+                @click.stop="textClickable ? toggle() : null"
+            >
+                {{ props.label }}
+            </span>
+        </label>
         <v-switch
             v-if="!icon" v-model="status"
             :disabled="!state.enabled"
@@ -57,6 +70,12 @@ export default {
             }
             return null
         },
+        lineClickable: function () {
+            return this.getProperty('clickableArea') === 'line'
+        },
+        textClickable: function () {
+            return this.getProperty('clickableArea') === 'label' || this.getProperty('clickableArea') === 'line'
+        },
         value () {
             return this.selection
         },
@@ -102,6 +121,7 @@ export default {
                 return
             }
             this.updateDynamicProperty('label', updates.label)
+            this.updateDynamicProperty('clickableArea', updates.clickableArea)
             this.updateDynamicProperty('decouple', updates.decouple)
             this.updateDynamicProperty('oncolor', updates.oncolor)
             this.updateDynamicProperty('offcolor', updates.offcolor)