ENHANCEMENT [tractorcow-farm#188] Add visual indicator for whether a …

…field has been changed (tractorcow-farm#189) * [tractorcow-farm#188] Add visual indicator for whether a field has been changed from the default locale value * Add unit test * Add JavaScript switch while editing in CMS * Click the locale label to reset to the default value * * Pointers and colour change on hover state for locale label
tractorcow · Apr 20, 2016 · 73db640 · 73db640
1 parent 1b995c1
commit 73db640
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 27 deletions.
diff --git a/code/Fluent.php b/code/Fluent.php
@@ -669,4 +669,40 @@ public static function get_template_global_variables()
             )
         );
     }
+
+    /**
+     * Given a field on an object and optionally a locale, compare its locale value against the default locale value to
+     * determine if the value is changed at the given locale.
+     *
+     * @param  DataObject  $object
+     * @param  FormField   $field
+     * @param  string|null $locale Optional: if not provided, will be gathered from the request
+     * @return boolean
+     */
+    public static function isFieldModified(DataObject $object, FormField $field, $locale = null)
+    {
+        if (is_null($locale)) {
+            $locale = self::current_locale();
+        }
+
+        if ($locale === $defaultLocale = self::default_locale()) {
+            // It's the default locale, so it's never "modified" from the default locale value
+            return false;
+        }
+
+        $defaultField = self::db_field_for_locale($field->getName(), $defaultLocale);
+        $localeField  = self::db_field_for_locale($field->getName(), $locale);
+
+        $defaultValue = $object->$defaultField;
+        $localeValue  = $object->$localeField;
+
+        if ((!empty($defaultValue) && empty($localeValue))
+            || ($defaultValue === $localeValue)
+        ) {
+            // Unchanged from default
+            return false;
+        }
+
+        return true;
+    }
 }
diff --git a/code/extensions/FluentExtension.php b/code/extensions/FluentExtension.php
@@ -715,12 +715,43 @@ public function updateCMSFields(FieldList $fields)
                     $field = $fields->dataFieldByName($matches['field']);
                 }
 
-                // Highlight any translated field
-                if($field && !$field->hasClass('LocalisedField')) {
+                // Highlight any translatable field
+                if ($field && !$field->hasClass('LocalisedField')) {
                     // Add a language indicator next to the fluent icon
                     $locale = Fluent::current_locale();
                     $title = $field->Title();
-                    $field->setTitle('<span class="fluent-locale-label">' . strtok($locale, '_') . '</span>'. $title);
+
+                    $titleClasses = 'fluent-locale-label';
+
+                    // Add a visual indicator for whether the value has been changed from the default locale
+                    $isModified = Fluent::isFieldModified($this->owner, $field, $locale);
+                    $modifiedTitle = 'Using default locale value';
+
+                    if ($isModified) {
+                        $titleClasses .= ' fluent-modified-value';
+                        $modifiedTitle = 'Modified from default locale value - click to reset';
+                    }
+
+                    $field->setTitle(
+                        sprintf(
+                            '<span class="%s" title="%s">%s</span>%s',
+                            $titleClasses,
+                            $modifiedTitle,
+                            strtok($locale, '_'),
+                            $title
+                        )
+                    );
+
+                    // Set the default value to the element so we can compare it with JavaScript
+                    if (Fluent::default_locale() !== $locale) {
+                        $field->setAttribute(
+                            'data-default-locale-value',
+                            Convert::raw2json(
+                                $this->owner->{Fluent::db_field_for_locale($field->getName(), Fluent::default_locale())}
+                            )
+                        );
+                    }
+
                     $field->addExtraClass('LocalisedField');
                 }
 

diff --git a/css/fluent.css b/css/fluent.css
diff --git a/javascript/fluent.js b/javascript/fluent.js
@@ -106,5 +106,59 @@
 				this._super();
 			}
 		});
+
+		/**
+		 * Translated fields - visual indicator
+		 */
+		$('div.LocalisedField *').entwine({
+			/**
+			 * Switch the class and title/tooltip on translated fields
+			 */
+			toggleModified: function(sameAsDefault, selector) {
+				selector = selector || this;
+
+				var label = selector.closest('.field').find('.fluent-locale-label');
+				label.toggleClass('fluent-modified-value');
+
+				if (label.hasClass('fluent-modified-value')) {
+					label.attr('title', 'Modified from default locale value - click to reset');
+				} else {
+					label.attr('title', 'Using default locale value');
+				}
+			}
+		});
+
+		$('div.LocalisedField input.LocalisedField').entwine({
+			/**
+			 * Check for changes against the default value
+			 */
+			onchange: function() {
+				var newValue = this.val();
+				var defaultValue = $.parseJSON(this.data('default-locale-value'));
+
+				if (!defaultValue) {
+					// We'll turn this off on the default locale
+					return;
+				}
+
+				this.toggleModified(newValue === defaultValue);
+			}			
+		});
+
+		/**
+		 * If the user clicks on the locale label in its modified state, reset to the default field value
+		 */
+		$('.fluent-locale-label.fluent-modified-value').entwine({
+			onclick: function() {
+				var input = this.closest('.LocalisedField').find('input.LocalisedField');
+				var defaultValue = $.parseJSON(input.data('default-locale-value'));
+
+				if (!defaultValue) {
+					return;
+				}
+
+				input.val(defaultValue).change();
+			}
+		})
 	});
 })(jQuery);