MDL-53172 javascript: Stop requiring body manipulation on load

lib/amd/build/inplace_editable.min.js

@@ -1 +1 @@
-define(["jquery","core/ajax","core/templates","core/notification","core/str","core/config","core/url"],function(a,b,c,d,e,f,g){return a("body").on("click keypress","[data-inplaceeditable] [data-inplaceeditablelink]",function(h){if("keypress"!==h.type||13===h.keyCode){h.stopImmediatePropagation(),h.preventDefault();var i=a(this),j=i.closest("[data-inplaceeditable]"),k=function(b){b.addClass("updating");var c=b.find("img.spinner");c.length?c.show():(c=a("<img/>").attr("src",g.imageUrl("i/loading_small")).addClass("spinner").addClass("iconsmall"),b.append(c))},l=function(a){a.removeClass("updating"),a.find("img.spinner").hide()},m=function(e,f){k(e);var g=b.call([{methodname:"core_update_inplace_editable",args:{itemid:e.attr("data-itemid"),component:e.attr("data-component"),itemtype:e.attr("data-itemtype"),value:f}}],!0);a.when.apply(a,g).done(function(b){var d=e.attr("data-value");c.render("core/inplace_editable",b).done(function(f,g){var h=a(f);c.replaceNode(e,h,g),h.find("[data-inplaceeditablelink]").focus(),h.trigger({type:"updated",ajaxreturn:b,oldvalue:d})})}).fail(function(b){var c=a.Event("updatefailed",{exception:b,newvalue:f});l(e),e.trigger(c),c.isDefaultPrevented()||d.exception(b)})},n=function(a){a.find("input").off(),a.find("select").off(),a.html(a.attr("data-oldcontent")),a.removeAttr("data-oldcontent"),a.removeClass("inplaceeditingon"),a.find("[data-inplaceeditablelink]").focus()},o=function(){a("span.inplaceeditable.inplaceeditingon").each(function(){n(a(this))})},p=function(b,c){for(var d=b,e=0;c>e;e++)d+=String(Math.floor(10*Math.random()));return 0===a("#"+d).length?d:p(b,c)},q=function(b){e.get_string("edittitleinstructions").done(function(c){var d=a('<span class="editinstructions">'+c+"</span>").attr("id",p("id_editinstructions_",20)),e=a('<input type="text"/>').attr("id",p("id_inplacevalue_",20)).attr("value",b.attr("data-value")).attr("aria-describedby",d.attr("id")),g=a('<label class="accesshide">'+j.attr("data-editlabel")+"</label>").attr("for",e.attr("id"));b.html("").append(d).append(g).append(e),e.focus(),e.select(),e.on("keyup keypress focusout",function(a){if(!f.behatsiterunning||"focusout"!==a.type){if("keypress"===a.type&&13===a.keyCode){var c=e.val();n(b),m(b,c)}("keyup"===a.type&&27===a.keyCode||"focusout"===a.type)&&n(b)}})})},r=function(a,b){n(a),m(a,b)},s=function(b,c){var d=a("<select></select>").attr("id",p("id_inplacevalue_",20)),e=a('<label class="accesshide">'+j.attr("data-editlabel")+"</label>").attr("for",d.attr("id"));for(var g in c)d.append(a("<option>").attr("value",g).html(c[g]));d.val(b.attr("data-value")),b.html("").append(e).append(d),d.focus(),d.select(),d.on("keyup change focusout",function(a){if(!f.behatsiterunning||"focusout"!==a.type){if("change"===a.type){var c=d.val();n(b),m(b,c)}("keyup"===a.type&&27===a.keyCode||"focusout"===a.type)&&n(b)}})},t=function(b){b.addClass("inplaceeditingon"),b.attr("data-oldcontent",b.html());var c=b.attr("data-type"),d=b.attr("data-options");"toggle"===c?r(b,d):"select"===c?s(b,a.parseJSON(d)):q(b)};o(),t(j)}}),{init_inplace_editable:function(){a("[data-inplaceeditable]:not([data-loaded])").each(function(){var b=a(this),c=b.find("[data-inplaceeditablelink]");"toggle"===b.attr("data-type")?(c.remove(),c.html(b.html()),b.html(c)):1===b.find("a").length&&(c.remove(),c.html(b.html()+c.html()),b.html(c)),b.attr("data-loaded",1)})}}});
+define(["jquery","core/ajax","core/templates","core/notification","core/str","core/config","core/url"],function(a,b,c,d,e,f,g){return a("body").on("click keypress","[data-inplaceeditable] [data-inplaceeditablelink]",function(h){if("keypress"!==h.type||13===h.keyCode){h.stopImmediatePropagation(),h.preventDefault();var i=a(this),j=i.closest("[data-inplaceeditable]"),k=function(b){b.addClass("updating");var c=b.find("img.spinner");c.length?c.show():(c=a("<img/>").attr("src",g.imageUrl("i/loading_small")).addClass("spinner").addClass("iconsmall"),b.append(c))},l=function(a){a.removeClass("updating"),a.find("img.spinner").hide()},m=function(e,f){k(e);var g=b.call([{methodname:"core_update_inplace_editable",args:{itemid:e.attr("data-itemid"),component:e.attr("data-component"),itemtype:e.attr("data-itemtype"),value:f}}],!0);a.when.apply(a,g).done(function(b){var d=e.attr("data-value");c.render("core/inplace_editable",b).done(function(f,g){var h=a(f);c.replaceNode(e,h,g),h.find("[data-inplaceeditablelink]").focus(),h.trigger({type:"updated",ajaxreturn:b,oldvalue:d})})}).fail(function(b){var c=a.Event("updatefailed",{exception:b,newvalue:f});l(e),e.trigger(c),c.isDefaultPrevented()||d.exception(b)})},n=function(a){a.find("input").off(),a.find("select").off(),a.html(a.attr("data-oldcontent")),a.removeAttr("data-oldcontent"),a.removeClass("inplaceeditingon"),a.find("[data-inplaceeditablelink]").focus()},o=function(){a("span.inplaceeditable.inplaceeditingon").each(function(){n(a(this))})},p=function(b,c){for(var d=b,e=0;c>e;e++)d+=String(Math.floor(10*Math.random()));return 0===a("#"+d).length?d:p(b,c)},q=function(b){e.get_string("edittitleinstructions").done(function(c){var d=a('<span class="editinstructions">'+c+"</span>").attr("id",p("id_editinstructions_",20)),e=a('<input type="text"/>').attr("id",p("id_inplacevalue_",20)).attr("value",b.attr("data-value")).attr("aria-describedby",d.attr("id")),g=a('<label class="accesshide">'+j.attr("data-editlabel")+"</label>").attr("for",e.attr("id"));b.html("").append(d).append(g).append(e),e.focus(),e.select(),e.on("keyup keypress focusout",function(a){if(!f.behatsiterunning||"focusout"!==a.type){if("keypress"===a.type&&13===a.keyCode){var c=e.val();n(b),m(b,c)}("keyup"===a.type&&27===a.keyCode||"focusout"===a.type)&&n(b)}})})},r=function(a,b){n(a),m(a,b)},s=function(b,c){var d=a("<select></select>").attr("id",p("id_inplacevalue_",20)),e=a('<label class="accesshide">'+j.attr("data-editlabel")+"</label>").attr("for",d.attr("id"));for(var g in c)d.append(a("<option>").attr("value",g).html(c[g]));d.val(b.attr("data-value")),b.html("").append(e).append(d),d.focus(),d.select(),d.on("keyup change focusout",function(a){if(!f.behatsiterunning||"focusout"!==a.type){if("change"===a.type){var c=d.val();n(b),m(b,c)}("keyup"===a.type&&27===a.keyCode||"focusout"===a.type)&&n(b)}})},t=function(b){b.addClass("inplaceeditingon"),b.attr("data-oldcontent",b.html());var c=b.attr("data-type"),d=b.attr("data-options");"toggle"===c?r(b,d):"select"===c?s(b,a.parseJSON(d)):q(b)};o(),t(j)}}),{}});

lib/amd/src/inplace_editable.js

@@ -204,25 +204,5 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
 
     });
 
-    return {
-        init_inplace_editable : function() {
-            $('[data-inplaceeditable]:not([data-loaded])').each(function() {
-                var el = $(this), link = el.find('[data-inplaceeditablelink]');
-                if (el.attr('data-type') === 'toggle') {
-                    // For toggle elements wrap the displayvalue in the link instead of
-                    // displaying edit link after the displayvalue.
-                    link.remove();
-                    link.html(el.html());
-                    el.html(link);
-                } else if (el.find('a').length === 1) {
-                    // For non-toggle elements that do not have links in the displayvalue
-                    // wrap displayvalue in the edit link.
-                    link.remove();
-                    link.html(el.html() + link.html());
-                    el.html(link);
-                }
-                el.attr('data-loaded', 1);
-            });
-        }
-    };
-});
+    return {};
+});

lib/classes/output/inplace_editable.php

@@ -185,6 +185,21 @@ class inplace_editable implements templatable, renderable {
         return $this;
     }
 
+    /**
+     * Whether the link should contain all of the content or not.
+     */
+    protected function get_linkeverything() {
+        if ($this->type === 'toggle') {
+            return true;
+        }
+
+        if (preg_match('#<a .*>.*</a>#', $this->displayvalue) === 1) {
+            return false;
+        }
+
+        return true;
+    }
+
     /**
      * Export this data so it can be used as the context for a mustache template (core/inplace_editable).
      *
@@ -208,6 +223,7 @@ class inplace_editable implements templatable, renderable {
             'editlabel' => (string)$this->editlabel,
             'type' => $this->type,
             'options' => $this->options,
+            'linkeverything' => $this->get_linkeverything() ? 1 : 0,
         );
     }
-}
+}

lib/external/externallib.php

@@ -407,6 +407,7 @@ class core_external extends external_api {
                 'editlabel' => new external_value(PARAM_NOTAGS, 'label for editing element', VALUE_OPTIONAL),
                 'type' => new external_value(PARAM_ALPHA, 'type of the element (text, toggle, select)', VALUE_OPTIONAL),
                 'options' => new external_value(PARAM_RAW, 'options of the element, format depends on type', VALUE_OPTIONAL),
+                'linkeverything' => new external_value(PARAM_INT, 'Should everything be wrapped in the edit link or link displayed separately', VALUE_OPTIONAL),
             )
         );
     }

lib/templates/inplace_editable.mustache

@@ -46,19 +46,21 @@
         "edithint" : "Edit this",
         "editlabel" : "New name for this",
         "type" : "text",
-        "options" : ""
+        "options" : "",
+        "linkeverything": 0
     }
 }}
 {{#component}}
 <span class="inplaceeditable inplaceeditable-{{type}}" data-inplaceeditable="1" data-component="{{component}}" data-itemtype="{{itemtype}}" data-itemid="{{itemid}}"
     data-value="{{value}}" data-editlabel="{{editlabel}}" data-type="{{type}}" data-options="{{options}}">
-        {{{displayvalue}}}
-        <a href="#" class="quickeditlink visibleifjs" data-inplaceeditablelink="1" title="{{edithint}}">
-            {{#pix}}t/editstring,core,{{edithint}}{{/pix}}
+        {{^ linkeverything }}{{{displayvalue}}}{{/ linkeverything }}
+        <a href="#" class="quickeditlink" data-inplaceeditablelink="1" title="{{edithint}}">
+            {{# linkeverything }}{{{displayvalue}}}{{/ linkeverything }}
+            <span class="quickediticon">{{#pix}}t/editstring,core,{{edithint}}{{/pix}}</span>
         </a>
 </span>
 {{#js}}
-    require(['core/inplace_editable'], function(ie) { ie.init_inplace_editable(); });
+    require(['core/inplace_editable']);
 {{/js}}
 {{/component}}
 {{^component}}

theme/bootstrapbase/less/moodle/core.less

@@ -2476,3 +2476,23 @@ span.inplaceeditable select {
 h3.sectionname span.inplaceeditable.inplaceeditingon span.editinstructions {
     margin-top: -20px;
 }
+
+
+.jsenabled {
+    .inplaceeditable {
+        .quickediticon {
+            display: inline;
+        }
+        &.inplaceeditable-toggle {
+            .quickediticon {
+                display: none;
+            }
+        }
+    }
+}
+
+.inplaceeditable {
+    .quickediticon {
+        display: none;
+    }
+}