Merge pull request #10034 from archesproject/10011_target_widget_css

10011 add node alias and widget name as class to HTML elements
archesproject · Oct 11, 2023 · 2f39375 · 2f39375
2 parents 76670b0 + 9f6550d
commit 2f39375
Show file tree

Hide file tree

Showing 19 changed files with 269 additions and 259 deletions.
diff --git a/arches/app/media/js/viewmodels/widget.js b/arches/app/media/js/viewmodels/widget.js
@@ -62,6 +62,12 @@ define([
             this.config = ko.observable(this.config);
         }
 
+        this.nodeCssClasses = ko.pureComputed(function() {
+            return [ko.unwrap(self.node?.alias),
+                self.widget?.widgetLookup[ko.unwrap(self.widget?.widget_id)].name
+                ].join(" ").trim();
+        });
+
         this.disposables = [];
 
         var subscribeConfigObservable = function(obs, key) {

diff --git a/arches/app/templates/views/components/widgets/base.htm b/arches/app/templates/views/components/widgets/base.htm
@@ -9,15 +9,16 @@
 <!-- ko if: !configForm  && state === 'report' -->
 <!-- ko if: !ko.unwrap(hideEmptyNodes) || ko.unwrap(hideEmptyNodes) === true && displayValue() -->
 {% block report %}
-<dt data-bind="text: label"></dt>
-<dd data-bind="text: displayValue() || $root.translations.none"></dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="text: displayValue() || $root.translations.none, class: nodeCssClasses"></dd>
 {% endblock report %}
 <!-- /ko -->
 <!-- /ko -->
 
 <!-- ko if: !configForm  && state === 'display_value' -->
 {% block display_value %}
-<span data-bind="text: displayValue() || $root.translations.none"></span>
+<span data-bind="text: displayValue() || $root.translations.none,
+    class: nodeCssClasses"></span>
 {% endblock display_value %}
 <!-- /ko -->
 

diff --git a/arches/app/templates/views/components/widgets/checkbox.htm b/arches/app/templates/views/components/widgets/checkbox.htm
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-label widget-input-label" data-bind="text:label"></span>
         <!-- ko if: node -->

diff --git a/arches/app/templates/views/components/widgets/concept-select.htm b/arches/app/templates/views/components/widgets/concept-select.htm
@@ -2,13 +2,13 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
-        <span class="control-label widget-input-label" data-bind="text:label"></span>
+        <span class="control-label widget-input-label" data-bind="text:label, class: nodeCssClasses"></span>
         <!-- ko if: node -->
         <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
         <!-- /ko -->
-        <div class="col-xs-12 resource-instance-wrapper">
+        <div class="col-xs-12 resource-instance-wrapper" data-bind="class: nodeCssClasses">
             <input style="display:inline-block;"
                 data-bind="
                     value: value,
@@ -29,11 +29,11 @@
         <span data-bind="text: $root.translations.placeholder"></span>
     </div>
     <div class="col-xs-12 pad-no crud-widget-container">
-        <input 
+        <input
             class="form-control input-md widget-input"
             data-bind="
                 attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
-                value: placeholder, 
+                value: placeholder,
                 valueUpdate: 'keyup'
             "
         >
@@ -59,13 +59,13 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko foreach: valueObjects -->
-    <dd data-bind="text: name">
+    <dd data-bind="text: name, class: $parent.nodeCssClasses">
     </dd>
 <!-- /ko -->
 <!-- ko if: valueObjects().length === 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <span data-bind="text: $root.translations.none"></span>
 </dd>
 <!-- /ko -->

diff --git a/arches/app/templates/views/components/widgets/datepicker.htm b/arches/app/templates/views/components/widgets/datepicker.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-labx mesel widget-input-label" data-bind="text:label"></span>
         <!-- ko if: node -->
@@ -12,7 +12,7 @@
         <div class="col-xs-12">
             <div>
                 <div class="input-group date">
-                    <input type="text" data-bind="value: value, placeholder: placeholder, disable: disabled, attr: {'aria-label': label}, 
+                    <input type="text" data-bind="value: value, placeholder: placeholder, disable: disabled, attr: {'aria-label': label},
                         datepicker: {format: dateFormat, viewMode: viewMode, maxDate: maxDate, minDate: minDate}" class="form-control input-lg"
                         ><span class="input-group-addon date-icon"><i class="fa fa-calendar fa-lg date-icon"></i></span>
                 </div>
@@ -24,13 +24,13 @@
 {% endblock form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko if: value() !== null -->
-<dd data-bind="date: value(), dateFormat: dateFormat || $root.translations.noDateEntered"></dd>
+<dd data-bind="date: value(), dateFormat: dateFormat || $root.translations.noDateEntered, class: nodeCssClasses"></dd>
 <!-- /ko -->
 <!-- ko if: value() === null -->
 <dd>
-    <span data-bind="text: $root.translations.none"></span>
+    <span data-bind="text: $root.translations.none, class: nodeCssClasses"></span>
 </dd>
 <!-- /ko -->
 {% endblock report %}
@@ -40,12 +40,12 @@
     <span data-bind="text: $root.translations.minimumDate"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        id="datetimepickermin" 
-        class="form-control input-md widget-input" 
+    <input
+        id="datetimepickermin"
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.minimumDate, 'aria-label': $root.translations.minimumDate},
-            value: minDate, 
+            value: minDate,
             datepicker: {format: 'YYYY-MM-DD', viewMode: viewMode, minDate: false, maxDate: false}
         "
     >
@@ -54,12 +54,12 @@
     <span data-bind="text: $root.translations.maximumDate"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        id="datetimepickermax" 
-        class="form-control input-md widget-input" 
+    <input
+        id="datetimepickermax"
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.maximumDate, 'aria-label': $root.translations.maximumDate},
-            value: maxDate, 
+            value: maxDate,
             datepicker: {format: 'YYYY-MM-DD', viewMode: viewMode, minDate: false, maxDate: false}
         "
     >
@@ -68,14 +68,14 @@
     <span data-bind="text: $root.translations.viewMode"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <select 
+    <select
         data-bind="
             attr: {placeholder: $root.translations.viewMode, 'aria-label': $root.translations.viewMode},
-            options:viewModeOptions, 
-            optionsText:'name', 
-            optionsValue:'id', 
-            event: {change: onViewModeSelection}, 
-            value: viewMode, 
+            options:viewModeOptions,
+            optionsText:'name',
+            optionsValue:'id',
+            event: {change: onViewModeSelection},
+            value: viewMode,
             chosen: {width: '100%', disable_search: true}
         "
     ></select>
@@ -94,7 +94,7 @@
         </div>
     </div>
     <div class="toggle-container">
-        <span id="default-date-switcher" class="switch switch-small" data-bind="css: {'on': getdefault}, onEnterkeyClick, onSpaceClick, click: setdefault, 
+        <span id="default-date-switcher" class="switch switch-small" data-bind="css: {'on': getdefault}, onEnterkeyClick, onSpaceClick, click: setdefault,
             attr: {'aria-checked': getdefault, 'aria-labeledby': 'default-date-switcher-label', 'aria-describedby': 'default-date-switcher-context'}" tabindex="0" role="switch"><small></small></span>
             <div style="display:flex; flex-direction:row;">
                 <label id="default-date-switcher-label" class="arches-toggle-sm" data-bind="text: $root.translations.useDateOfDataEntry"></label>

diff --git a/arches/app/templates/views/components/widgets/edtf.htm b/arches/app/templates/views/components/widgets/edtf.htm
@@ -3,19 +3,19 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}">
+<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}, class: nodeCssClasses">
     <!-- ko if: node -->
     <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
     <!-- /ko -->
     <div class="form-group">
-        <div class="widget-inline-tools-collapser" style="max-width: 600px;" 
-            data-bind="onEnterkeyClick, onSpaceClick, 
+        <div class="widget-inline-tools-collapser" style="max-width: 600px;"
+            data-bind="onEnterkeyClick, onSpaceClick,
                 click: function() { showEDTFFormats(!showEDTFFormats()); },
                 attr: {
-                    'aria-expanded': showEDTFFormats().toString(), 
-                    'aria-label': $root.translations.edtfFormats , 
+                    'aria-expanded': showEDTFFormats().toString(),
+                    'aria-label': $root.translations.edtfFormats ,
                     'aria-controls': uid
-                }" 
+                }"
             tabindex="0" role="button"
         >
             <span class="control-label widget-input-label" data-bind="text:label"></span><span>
@@ -46,23 +46,23 @@
 
                     <dl>
                         <dt>
-                            2021-04-12 
+                            2021-04-12
                             <span class="text-thin" data-bind="text: $root.translations.dayPrecisionEncoding"></span>
                         </dt>
                         <dd class="mar-btm">
                             <span data-bind="text: $root.translations.dayPrecisionEncodingExplanation"></span>
                         </dd>
 
                         <dt>
-                            2021-04 
+                            2021-04
                             <span class="text-thin" data-bind="text: $root.translations.monthPrecisionEncoding"></span>
                         </dt>
                         <dd class="mar-btm">
                             <span data-bind="text: $root.translations.monthPrecisionEncodingExplanation"></span>
                         </dd>
 
                         <dt>
-                            2021 
+                            2021
                             <span class="text-thin" data-bind="text: $root.translations.yearPrecisionEncoding"></span>
                         </dt>
                         <dd class="mar-btm">
@@ -115,8 +115,8 @@
           </div>
         <div class="col-xs-12">
             <input type="text" data-bind="
-                textInput: value, 
-                attr: {placeholder: placeholder, disabled: disabled, 'aria-label': label}" 
+                textInput: value,
+                attr: {placeholder: placeholder, disabled: disabled, 'aria-label': label}"
                 class="form-control input-lg widget-input">
         </div>
         <div class="col-xs-12" data-bind="if: value">
@@ -135,8 +135,8 @@
     <span data-bind="text: $root.translations.placeholder"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        class="form-control input-md widget-input" 
+    <input
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
             textInput: placeholder
@@ -148,8 +148,8 @@
     <span data-bind="text: $root.translations.defaultValue"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        class="form-control input-md widget-input" 
+    <input
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.defaultValue, 'aria-label': $root.translations.defaultValue},
             textInput: defaultValue

diff --git a/arches/app/templates/views/components/widgets/file.htm b/arches/app/templates/views/components/widgets/file.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-label widget-input-label" for="" data-bind="text:label"></span>
         <!-- ko if: node -->
@@ -54,13 +54,13 @@
                 <div class="file-upload-options">
                     <div class="file-upload-options-grow list-filter">
                     <!--ko if: filesJSON().length > 1-->
-                    
-                        <input 
+
+                        <input
                             data-bind="
                                 attr: {placeholder: $root.translations.findAFile + '...', 'aria-label': $root.translations.findAFile},
                                 textInput: filter
-                            " 
-                            type="text" 
+                            "
+                            type="text"
                             class="file-upload-filter"
                         >
                         <!-- Clear Search -->
@@ -140,11 +140,11 @@
     <span data-bind="text: $root.translations.acceptedFileTypes"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        class="form-control input-md widget-input" 
+    <input
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.exampleFileTypes, 'aria-label': $root.translations.acceptedFileTypes},
-            value: acceptedFiles, 
+            value: acceptedFiles,
             valueUpdate: 'keyup'
         "
     >
@@ -154,9 +154,9 @@
     <span data-bind="text: $root.translations.maxFileSize"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
-        class="form-control input-md widget-input" 
+    <input
+        type="number"
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.maxFileSize, 'aria-label': $root.translations.maxFileSize},
             value: maxFilesize
@@ -167,16 +167,16 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 
 <!-- ko if: uploadedFiles().length === 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <span data-bind="text: $root.translations.none"></span>
 </dd>
 <!-- /ko -->
 
 <!-- ko foreach: reportFiles() -->
-<dd>
+<dd data-bind="class: $parent.nodeCssClasses">
     <a data-bind="attr: {href: $parent.getFileUrl(url)}" target="_blank">
         <i class="ion ion-forward"></i>
         <span data-bind="text: name"></span>
@@ -185,7 +185,7 @@
 <!-- /ko -->
 
 <!-- ko if: reportImages().length > 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <div id="report-image-grid" class="report-image-grid">
         <!-- ko foreach: reportImages() -->
         <div class="rp-image-grid-item">
@@ -200,5 +200,5 @@
 {% endblock report %}
 
 {% block display_value %}
-<span data-bind="text: Number.isInteger(displayValue()) ? displayValue() + $root.translations.filesUploaded : displayValue()"></span>
+<span data-bind="text: Number.isInteger(displayValue()) ? displayValue() + $root.translations.filesUploaded : displayValue(), class: nodeCssClasses"></span>
 {% endblock display_value %}