Page with more then one Atto editor cause display of double layout icons in dialog

[nadavkav]

When opening the BSGrid dialog in a question settings edit page, with multiple Atto editors, the layout icons are displayed multiple times.

[johnhpercival]

This CSS code seems to work as a quick-and-easy solution (but there may be unforeseen consequences):

.atto_form:not(:first-of-type) {
    display: none;
}

More fundamentally, I think this can be fixed by changing (but again, there may be unforeseen consequences):

moodle-atto_bsgrid/yui/src/button/js/button.js

Line 132 in f9a218f

TEMPLATE +=

To:
TEMPLATE =

This source then needs to be worked through into the build files (is this an automated process?):

moodle-atto_bsgrid/yui/build/moodle-atto_bsgrid-button/moodle-atto_bsgrid-button-debug.js

Line 134 in f9a218f

TEMPLATE +=

And, probably most importantly:

moodle-atto_bsgrid/yui/build/moodle-atto_bsgrid-button/moodle-atto_bsgrid-button-min.js

Line 1 in f9a218f

YUI.add("moodle-atto_bsgrid-button",function(e,t){function h(e,t){for(var n=0;n<e.length;n++)if(e[n]===t)return!0;return!1}var n="atto_bsgrid",r="atto_bsgrid",i={INPUTSUBMIT:"atto_bsgrid_selectcolumns"},s='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-6 span6"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-6 span6"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",o='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-4 span4"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-4 span4"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+'<div class="col-md-4 span4"><p>'+M.util.get_string("column3","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",u='<div class="atto_bsgrid container-fluid"><div class="row row-fluid"><div class="col-md-4 span4"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-8 span8"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",a='<div class="atto_bsgrid container-fluid"><div class="row row-fluid"><div class="col-md-8 span8"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-4 span4"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",f='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-3 span3"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-3 span3"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+'<div class="col-md-3 span3"><p>'+M.util.get_string("column3","atto_bsgrid")+"</p></div>"+'<div class="col-md-3 span3"><p>'+M.util.get_string("column4","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",l='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-2 span2"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column3","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column4","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column5","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column6","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",c={col2:{template:s,icon:"col2",title:M.util.get_string("col2","atto_bsgrid")},col3:{template:o,icon:"col3",title:M.util.get_string("col3","atto_bsgrid")},col1x3:{template:u,icon:"col1x3",title:M.util.get_string("col1x3","atto_bsgrid")},col3x1:{template:a,icon:"col3x1",title:M.util.get_string("col3x1","atto_bsgrid")},col4:{template:f,icon:"col4",title:M.util.get_string("col4","atto_bsgrid")},col6:{template:l,icon:"col6",title:M.util.get_string("col6","atto_bsgrid")}},p="";e.namespace("M.atto_bsgrid").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){if(this.get("disabled"))return;var t=["iconone"];p+='<form class="atto_form"><div id="{{elementid}}_{{innerform}}" class="mdl-align">';for(var n in c)h(this.get("enabled_templates"),n)&&(p+='<a class="bsgridtemplateicon {{CSS.INPUTSUBMIT}}" alt="'+c[n].title+'" title="'+c[n].title+'" data-template="'+n+'">'+'<img src="'+M.util.image_url("ed/"+c[n].icon,"atto_bsgrid")+'"/>'+"</a>");p+="</div></form>",e.Array.each(t,function(e){this.addButton({icon:"ed/"+e,iconComponent:"atto_bsgrid",buttonName:e,callback:this._displayDialogue,callbackArgs:e})},this)},_displayDialogue:function(t,r){t.preventDefault();var i=400,s=this.getDialogue({headerContent:M.util.get_string("dialogtitle",n),width:i+"px",focusAfterHide:r});s.width!==i+"px"&&s.set("width",i+"px");var o=this._getFormContent(r),u=e.Node.create("<div></div>");u.append(o),s.set("bodyContent",u),s.show(),this.markUpdated()},_getFormContent:function(t){var r=e.Handlebars.compile(p),s=e.Node.create(r({elementid:this.get("host").get("elementid"),CSS:i,component:n,clickedicon:t}));return this._form=s,this._form.all("."+i.INPUTSUBMIT).on("click",this._doInsert,this),s},_doInsert:function(e){e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),this.editor.focus();var t=e.currentTarget.getAttribute("data-template");this.get("host").insertContentAtFocusPoint(c[t].template),this.markUpdated()}},{ATTRS:{enabled_templates:{values:["col2","col3","col1x3","col3x1","col4","col6"]}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});

YUI.add("moodle-atto_bsgrid-button",function(e,t){function h(e,t){for(var n=0;n<e.length;n++)if(e[n]===t)return!0;return!1}var n="atto_bsgrid",r="atto_bsgrid",i={INPUTSUBMIT:"atto_bsgrid_selectcolumns"},s='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-6 span6"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-6 span6"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",o='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-4 span4"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-4 span4"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+'<div class="col-md-4 span4"><p>'+M.util.get_string("column3","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",u='<div class="atto_bsgrid container-fluid"><div class="row row-fluid"><div class="col-md-4 span4"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-8 span8"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",a='<div class="atto_bsgrid container-fluid"><div class="row row-fluid"><div class="col-md-8 span8"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-4 span4"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",f='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-3 span3"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-3 span3"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+'<div class="col-md-3 span3"><p>'+M.util.get_string("column3","atto_bsgrid")+"</p></div>"+'<div class="col-md-3 span3"><p>'+M.util.get_string("column4","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",l='<div class="atto_bsgrid container-fluid"><div class="row-fluid"><div class="col-md-2 span2"><p>'+M.util.get_string("column1","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column2","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column3","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column4","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column5","atto_bsgrid")+"</p></div>"+'<div class="col-md-2 span2"><p>'+M.util.get_string("column6","atto_bsgrid")+"</p></div>"+"</div>"+"</div>",c={col2:{template:s,icon:"col2",title:M.util.get_string("col2","atto_bsgrid")},col3:{template:o,icon:"col3",title:M.util.get_string("col3","atto_bsgrid")},col1x3:{template:u,icon:"col1x3",title:M.util.get_string("col1x3","atto_bsgrid")},col3x1:{template:a,icon:"col3x1",title:M.util.get_string("col3x1","atto_bsgrid")},col4:{template:f,icon:"col4",title:M.util.get_string("col4","atto_bsgrid")},col6:{template:l,icon:"col6",title:M.util.get_string("col6","atto_bsgrid")}},p="";e.namespace("M.atto_bsgrid").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){if(this.get("disabled"))return;var t=["iconone"];p='<form class="atto_form"><div id="{{elementid}}_{{innerform}}" class="mdl-align">';for(var n in c)h(this.get("enabled_templates"),n)&&(p+='<a class="bsgridtemplateicon {{CSS.INPUTSUBMIT}}" alt="'+c[n].title+'" title="'+c[n].title+'" data-template="'+n+'">'+'<img src="'+M.util.image_url("ed/"+c[n].icon,"atto_bsgrid")+'"/>'+"</a>");p+="</div></form>",e.Array.each(t,function(e){this.addButton({icon:"ed/"+e,iconComponent:"atto_bsgrid",buttonName:e,callback:this._displayDialogue,callbackArgs:e})},this)},_displayDialogue:function(t,r){t.preventDefault();var i=400,s=this.getDialogue({headerContent:M.util.get_string("dialogtitle",n),width:i+"px",focusAfterHide:r});s.width!==i+"px"&&s.set("width",i+"px");var o=this._getFormContent(r),u=e.Node.create("<div></div>");u.append(o),s.set("bodyContent",u),s.show(),this.markUpdated()},_getFormContent:function(t){var r=e.Handlebars.compile(p),s=e.Node.create(r({elementid:this.get("host").get("elementid"),CSS:i,component:n,clickedicon:t}));return this._form=s,this._form.all("."+i.INPUTSUBMIT).on("click",this._doInsert,this),s},_doInsert:function(e){e.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),this.editor.focus();var t=e.currentTarget.getAttribute("data-template");this.get("host").insertContentAtFocusPoint(c[t].template),this.markUpdated()}},{ATTRS:{enabled_templates:{values:["col2","col3","col1x3","col3x1","col4","col6"]}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});

Edit: updated CSS fix so that it doesn't conflict with atto_generico plugin

[johnhpercival]

I created a pull request #28

[nadavkav]

Thank you @johnhpercival :-)
I can confirm that your suggested patch solved this issue for me.

[ralf-krause]

You can download the updated plugin https://github.com/johnhpercival/moodle-atto_bsgrid

[johnhpercival]

Thanks Ralf. In an ideal world the plugin owner/maintainer would check, confirm and then merge my proposed changes into the main repository here.