MDL-55417 theme_noname: Update mform templates to re-use javascript

Use an amd module instead of repeating JS in the templates. Part of MDL-55071
mpetrowi · Sep 23, 2016 · 4691b2d · 4691b2d
1 parent 344321e
commit 4691b2d
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 106 deletions.
diff --git a/theme/noname/amd/build/form-display-errors.min.js b/theme/noname/amd/build/form-display-errors.min.js
diff --git a/theme/noname/amd/src/form-display-errors.js b/theme/noname/amd/src/form-display-errors.js
@@ -0,0 +1,47 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Custom form error event handler to manipulate the bootstrap markup and show
+ * nicely styled errors in an mform.
+ *
+ * @module     theme_noname/form-display-errors
+ * @copyright  2016 Damyon Wiese <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/event'], function($, Event) {
+    return {
+        enhance: function(elementid) {
+            var element = document.getElementById(elementid);
+            $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
+                event.preventDefault();
+                var parent = $(element).closest('.form-group');
+                var feedback = parent.find('.form-control-feedback');
+                if (msg !== '') {
+                    parent.addClass('has-danger');
+                    $(element).addClass('form-control-danger');
+                    $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
+                    feedback.html(msg);
+                    feedback.show();
+                } else {
+                    parent.removeClass('has-danger');
+                    $(element).removeClass('form-control-danger');
+                    $(element).attr('aria-describedby', '');
+                    feedback.hide();
+                }
+            });
+        }
+    };
+});
diff --git a/theme/noname/templates/core_form/element-checkbox-inline.mustache b/theme/noname/templates/core_form/element-checkbox-inline.mustache
@@ -12,22 +12,7 @@
     {{{error}}}
 </span>
 {{#js}}
-require(['jquery', 'core/event'], function($, Event) {
-    var element = document.getElementById('{{element.id}}');
-    $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
-        event.preventDefault();
-        var parent = $(element).closest('.form-group');
-        var feedback = parent.find('.form-control-feedback');
-        if (msg !== '') {
-            parent.addClass('has-danger');
-            $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
-            feedback.html(msg);
-            feedback.show();
-        } else {
-            parent.removeClass('has-danger');
-            $(element).attr('aria-describedby', '');
-            feedback.hide();
-        }
-    });
+require(['theme_noname/form-display-errors'], function(module) {
+    module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
 {{/js}}
diff --git a/theme/noname/templates/core_form/element-checkbox.mustache b/theme/noname/templates/core_form/element-checkbox.mustache
@@ -15,22 +15,7 @@
     </div>
 </div>
 {{#js}}
-require(['jquery', 'core/event'], function($, Event) {
-    var element = document.getElementById('{{element.id}}');
-    $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
-        event.preventDefault();
-        var parent = $(element).closest('.form-group');
-        var feedback = parent.find('.form-control-feedback');
-        if (msg !== '') {
-            parent.addClass('has-danger');
-            $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
-            feedback.html(msg);
-            feedback.show();
-        } else {
-            parent.removeClass('has-danger');
-            $(element).attr('aria-describedby', '');
-            feedback.hide();
-        }
-    });
+require(['theme_noname/form-display-errors'], function(module) {
+    module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
 {{/js}}
diff --git a/theme/noname/templates/core_form/element-radio-inline.mustache b/theme/noname/templates/core_form/element-radio-inline.mustache
@@ -12,22 +12,7 @@
     {{{error}}}
 </span>
 {{#js}}
-require(['jquery', 'core/event'], function($, Event) {
-    var element = document.getElementById('{{element.id}}');
-    $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
-        event.preventDefault();
-        var parent = $(element).closest('.form-group');
-        var feedback = parent.find('.form-control-feedback');
-        if (msg !== '') {
-            parent.addClass('has-danger');
-            $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
-            feedback.html(msg);
-            feedback.show();
-        } else {
-            parent.removeClass('has-danger');
-            $(element).attr('aria-describedby', '');
-            feedback.hide();
-        }
-    });
+require(['theme_noname/form-display-errors'], function(module) {
+    module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
 {{/js}}
diff --git a/theme/noname/templates/core_form/element-radio.mustache b/theme/noname/templates/core_form/element-radio.mustache
@@ -15,22 +15,7 @@
     </div>
 </div>
 {{#js}}
-require(['jquery', 'core/event'], function($, Event) {
-    var element = document.getElementById('{{element.id}}');
-    $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
-        event.preventDefault();
-        var parent = $(element).closest('.form-group');
-        var feedback = parent.find('.form-control-feedback');
-        if (msg !== '') {
-            parent.addClass('has-danger');
-            $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
-            feedback.html(msg);
-            feedback.show();
-        } else {
-            parent.removeClass('has-danger');
-            $(element).attr('aria-describedby', '');
-            feedback.hide();
-        }
-    });
+require(['theme_noname/form-display-errors'], function(module) {
+    module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
 {{/js}}
diff --git a/theme/noname/templates/core_form/element-template-inline.mustache b/theme/noname/templates/core_form/element-template-inline.mustache
@@ -10,24 +10,7 @@
     </div>
 </div>
 {{#js}}
-require(['jquery', 'core/event'], function($, Event) {
-    var element = document.getElementById('{{element.id}}');
-    $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
-        event.preventDefault();
-        var parent = $(element).closest('.form-group');
-        var feedback = parent.find('.form-control-feedback');
-        if (msg !== '') {
-            parent.addClass('has-danger');
-            $(element).addClass('form-control-danger');
-            $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
-            feedback.html(msg);
-            feedback.show();
-        } else {
-            parent.removeClass('has-danger');
-            $(element).removeClass('form-control-danger');
-            $(element).attr('aria-describedby', '');
-            feedback.hide();
-        }
-    });
+require(['theme_noname/form-display-errors'], function(module) {
+    module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
 {{/js}}
diff --git a/theme/noname/templates/core_form/element-template.mustache b/theme/noname/templates/core_form/element-template.mustache
@@ -12,24 +12,7 @@
     </div>
 </div>
 {{#js}}
-require(['jquery', 'core/event'], function($, Event) {
-    var element = document.getElementById('{{element.id}}');
-    $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
-        event.preventDefault();
-        var parent = $(element).closest('.form-group');
-        var feedback = parent.find('.form-control-feedback');
-        if (msg !== '') {
-            parent.addClass('has-danger');
-            $(element).addClass('form-control-danger');
-            $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
-            feedback.html(msg);
-            feedback.show();
-        } else {
-            parent.removeClass('has-danger');
-            $(element).removeClass('form-control-danger');
-            $(element).attr('aria-describedby', '');
-            feedback.hide();
-        }
-    });
+require(['theme_noname/form-display-errors'], function(module) {
+    module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
 {{/js}}