MDL-56187 theme_boost: Atto fields styling for validation errors

lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js

@@ -172,6 +172,8 @@ Y.extend(Editor, Y.Base, {
             return;
         }
 
+        var extraclasses = this.textarea.getAttribute('class');
+
         this._eventHandles = [];
 
         this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
@@ -180,7 +182,7 @@ Y.extend(Editor, Y.Base, {
                 'role="textbox" ' +
                 'spellcheck="true" ' +
                 'aria-live="off" ' +
-                'class="{{CSS.CONTENT}}" ' +
+                'class="{{CSS.CONTENT}} ' + extraclasses + '" ' +
                 '/>');
         this.editor = Y.Node.create(template({
             elementid: this.get('elementid'),

lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js

@@ -170,6 +170,8 @@ Y.extend(Editor, Y.Base, {
             return;
         }
 
+        var extraclasses = this.textarea.getAttribute('class');
+
         this._eventHandles = [];
 
         this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
@@ -178,7 +180,7 @@ Y.extend(Editor, Y.Base, {
                 'role="textbox" ' +
                 'spellcheck="true" ' +
                 'aria-live="off" ' +
-                'class="{{CSS.CONTENT}}" ' +
+                'class="{{CSS.CONTENT}} ' + extraclasses + '" ' +
                 '/>');
         this.editor = Y.Node.create(template({
             elementid: this.get('elementid'),

lib/editor/atto/yui/src/editor/js/editor.js

@@ -170,6 +170,8 @@ Y.extend(Editor, Y.Base, {
             return;
         }
 
+        var extraclasses = this.textarea.getAttribute('class');
+
         this._eventHandles = [];
 
         this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
@@ -178,7 +180,7 @@ Y.extend(Editor, Y.Base, {
                 'role="textbox" ' +
                 'spellcheck="true" ' +
                 'aria-live="off" ' +
-                'class="{{CSS.CONTENT}}" ' +
+                'class="{{CSS.CONTENT}} ' + extraclasses + '" ' +
                 '/>');
         this.editor = Y.Node.create(template({
             elementid: this.get('elementid'),

theme/boost/amd/build/form-display-errors.min.js

@@ -1 +1 @@
-define(["jquery","core/event"],function(a,b){return{enhance:function(c){var d=document.getElementById(c);a(d).on(b.Events.FORM_FIELD_VALIDATION,function(b,c){b.preventDefault();var e=a(d).closest(".form-group"),f=e.find(".form-control-feedback");""!==c?(e.addClass("has-danger"),e.data("client-validation-error",!0),a(d).addClass("form-control-danger"),a(d).attr("aria-describedby",a(d).attr("id")+"-feedback"),f.html(c),f.show()):e.data("client-validation-error")===!0&&(e.removeClass("has-danger"),e.data("client-validation-error",!1),a(d).removeClass("form-control-danger"),a(d).attr("aria-describedby",""),f.hide())})}}});
+define(["jquery","core/event"],function(a,b){return{enhance:function(c){var d=document.getElementById(c);a(d).on(b.Events.FORM_FIELD_VALIDATION,function(b,c){b.preventDefault();var e=a(d).closest(".form-group"),f=e.find(".form-control-feedback");"TEXTAREA"==a(d).prop("tagName")&&e.find("[contenteditable]")&&(d=e.find("[contenteditable]")),""!==c?(e.addClass("has-danger"),e.data("client-validation-error",!0),a(d).addClass("form-control-danger"),a(d).attr("aria-describedby",a(d).attr("id")+"-feedback"),f.html(c),f.show()):e.data("client-validation-error")===!0&&(e.removeClass("has-danger"),e.data("client-validation-error",!1),a(d).removeClass("form-control-danger"),a(d).attr("aria-describedby",""),f.hide())})}}});

theme/boost/amd/src/form-display-errors.js

@@ -29,6 +29,11 @@ define(['jquery', 'core/event'], function($, Event) {
                 event.preventDefault();
                 var parent = $(element).closest('.form-group');
                 var feedback = parent.find('.form-control-feedback');
+
+                // Sometimes (atto) we have a hidden textarea backed by a real contenteditable div.
+                if (($(element).prop("tagName") == 'TEXTAREA') && parent.find('[contenteditable]')) {
+                    element = parent.find('[contenteditable]');
+                }
                 if (msg !== '') {
                     parent.addClass('has-danger');
                     parent.data('client-validation-error', true);

theme/boost/scss/moodle/forms.scss

@@ -35,6 +35,10 @@
     border-bottom: $border-width solid $table-border-color;
 }
 
+.editor_atto_content.form-control {
+    width: 100%;
+}
+
 .mform fieldset.collapsible legend a.fheader {
     padding: 0 5px 0 ($spacer * 1.5);
     margin-left: -($spacer * 1.5);
@@ -336,3 +340,15 @@ textarea[data-auto-rows] {
     margin-left: $grid-gutter-width / 2;
     max-width: 30rem;
 }
+
+/** Atto fields do not have form-control because that would break the layout of the editor.
+    So they need these extra styles to highlight the editor when there is a validation error. */
+.has-danger .editor_atto_content.form-control,
+.has-danger .editor_atto_content.form-control-danger {
+    @include form-control-validation($brand-danger);
+    background-image: $form-icon-danger;
+    padding-right: ($input-padding-x * 3);
+    background-repeat: no-repeat;
+    background-position: center right ($input-height / 4);
+    background-size: ($input-height / 2) ($input-height / 2);
+}