MDL-44487 Atto: Restrict size of image preview in popup.

[moodle.git] / lib / editor / atto / plugins / image / yui / build / moodle-atto_image-button / moodle-atto_image-button-min.js

YUI.add("moodle-atto_image-button",function(e,t){var n={INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",IMAGEPREVIEW:"atto_image_preview"},r=[{name:"baseline",str:"alignment_baseline",value:"vertical-align"},{name:"sub",str:"alignment_sub",value:"vertical-align"},{name:"super",str:"alignment_super",value:"vertical-align"},{name:"top",str:"alignment_top",value:"vertical-align"},{name:"text-top",str:"alignment_texttop",value:"vertical-align"},{name:"middle",str:"alignment_middle",value:"vertical-align"},{name:"bottom",str:"alignment_bottom",value:"vertical-align"},{name:"text-bottom",str:"alignment_textbottom",value:"vertical-align"},{name:"left",str:"alignment_left",value:"float"},{name:"right",str:"alignment_right",value:"float"}],i="atto_image",s='<form class="atto_form"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><br/>{{#if showFilepicker}}<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>{{/if}}<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">{{get_string "presentationoraltrequired" component}}</div><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/><br/><input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="{{CSS.INPUTWIDTH}} id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="10"/><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="{{CSS.INPUTHEIGHT}}" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="10"/><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>{{/each}}</select><br/><label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label><div class="mdl-align"><img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/><br/><button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "createimage" component}}</button></div></form>',o='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if alignment}}style="{{alignment}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("createimage",i),width:"480px",focusAfterHide:!0});e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:this.get("host").canShowFilepicker("image"),alignments:r}));return this._form=o,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),o},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL),r=this;t.set("value",e.url);var i=new Image;i.onload=function(){r._form.one("."+n.INPUTWIDTH).set("value",this.width),r._form.one("."+n.INPUTHEIGHT).set("value",this.height),r._form.one("."+n.IMAGEPREVIEW).set("src",this.src),r._form.one("."+n.IMAGEPREVIEW).setStyle("display","inline"),r.getDialogue().centerDialogue()},i.src=e.url}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW);if(t===!1){r.setStyle("display","none");return}t.align&&e.one("."+n.INPUTALIGNMENT).set("value",t.align),t.display&&r.setStyle("display",t.display),t.width&&e.one("."+n.INPUTWIDTH).set("value",t.width),t.height&&e.one("."+n.INPUTHEIGHT).set("value",t.height),t.alt&&e.one("."+n.INPUTALT).set("value",t.alt),t.src&&(e.one("."+n.INPUTURL).set("value",t.src),r.setAttribute("src",t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked")},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:null,display:"inline",presentation:!1},t=this.get("host").getSelectedNodes(),n,i,s,o,u;t&&(t=t.filter("img"));if(t&&t.size()){image=t.item(0),this._selectedImage=image,o=image.getAttribute("style"),i=parseInt(image.getAttribute("width"),10),s=parseInt(image.getAttribute("height"),10),i>0&&(e.width=i),s>0&&(e.height=s);for(n in r){u=r[n].value+":"+r[n].name+";";if(o.replace(" ","").indexOf(u)!==-1){e.align=u;break}}return e.src=image.getAttribute("src"),e.alt=image.getAttribute("alt")||"",e.presentation=image.get("role")==="presentation",e}return this._selectedImage=null,!1},_urlChanged:
function(){var e=this._form.one("."+n.INPUTURL),t=this;if(e.get("value")!==""){var r=new Image;r.onload=function(){var e;e=t._form.one("."+n.INPUTWIDTH),e.get("value")===""&&e.set("value",this.width),e=t._form.one("."+n.INPUTHEIGHT),e.get("value")===""&&e.set("value",this.height),e=t._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline"),t.getDialogue().centerDialogue()},r.src=e.get("value")}},_setImage:function(t){var r=this._form,i=r.one("."+n.INPUTURL).get("value"),s=r.one("."+n.INPUTALT).get("value"),u=r.one("."+n.INPUTWIDTH).get("value"),a=r.one("."+n.INPUTHEIGHT).get("value"),f=r.one("."+n.INPUTALIGNMENT).get("value"),l=r.one("."+n.IMAGEPRESENTATION).get("checked"),c,h=this.get("host");t.preventDefault();if(s===""&&!l){r.one("."+n.IMAGEALTWARNING).setStyle("display","block"),r.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),r.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0);return}r.one("."+n.IMAGEALTWARNING).setStyle("display","none"),r.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),r.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),this.getDialogue({focusAfterHide:null}).hide(),h.focus(),i!==""&&(this._selectedImage?h.setSelection(h.getSelectionFromNode(this._selectedImage)):h.setSelection(this._currentSelection),template=e.Handlebars.compile(o),c=template({url:i,alt:s,width:u,height:a,presentation:l,alignment:f}),this.get("host").insertContentAtFocusPoint(c),this.markUpdated())}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});