From 2e8cbbb3acdaa191a06411fc09ae3e5f63111a15 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Fri, 11 Apr 2014 12:55:28 +0800 Subject: [PATCH 1/2] MDL-44826 Atto: Remove most of the image alignment options Just keep the simple ones and put some default padding on images. --- .../atto/plugins/image/lang/en/atto_image.php | 5 -- lib/editor/atto/plugins/image/lib.php | 5 -- .../moodle-atto_image-button-debug.js | 53 +++++++++---------- .../moodle-atto_image-button-min.js | 4 +- .../moodle-atto_image-button.js | 53 +++++++++---------- .../plugins/image/yui/src/button/js/button.js | 53 +++++++++---------- 6 files changed, 74 insertions(+), 99 deletions(-) diff --git a/lib/editor/atto/plugins/image/lang/en/atto_image.php b/lib/editor/atto/plugins/image/lang/en/atto_image.php index 424312f66a3..245c20c3fb3 100644 --- a/lib/editor/atto/plugins/image/lang/en/atto_image.php +++ b/lib/editor/atto/plugins/image/lang/en/atto_image.php @@ -23,15 +23,10 @@ */ $string['alignment'] = 'Alignment'; -$string['alignment_baseline'] = 'Default (baseline)'; $string['alignment_bottom'] = 'Bottom'; $string['alignment_left'] = 'Left'; $string['alignment_middle'] = 'Middle'; $string['alignment_right'] = 'Right'; -$string['alignment_sub'] = 'Subscript'; -$string['alignment_super'] = 'Superscript'; -$string['alignment_textbottom'] = 'Text bottom'; -$string['alignment_texttop'] = 'Text top'; $string['alignment_top'] = 'Top'; $string['browserepositories'] = 'Browse repositories...'; $string['constrain'] = 'Keep ratio'; diff --git a/lib/editor/atto/plugins/image/lib.php b/lib/editor/atto/plugins/image/lib.php index a3279e718ba..adbc51943cb 100644 --- a/lib/editor/atto/plugins/image/lib.php +++ b/lib/editor/atto/plugins/image/lib.php @@ -32,15 +32,10 @@ function atto_image_strings_for_js() { $strings = array( 'alignment', - 'alignment_baseline', 'alignment_bottom', 'alignment_left', 'alignment_middle', 'alignment_right', - 'alignment_sub', - 'alignment_super', - 'alignment_textbottom', - 'alignment_texttop', 'alignment_top', 'browserepositories', 'constrain', diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js index d1ee9b84802..0310f2fc23b 100644 --- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js +++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js @@ -50,48 +50,33 @@ var CSS = { ALIGNMENTS = [ // Vertical alignment. { - 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' + str: 'alignment_top', + value: 'vertical-align', + margin: '0 .5em' }, { name: 'middle', str: 'alignment_middle', - value: 'vertical-align' - }, { - name: 'bottom', - str: 'alignment_bottom', - value: 'vertical-align' + value: 'vertical-align', + margin: '0 .5em' }, { name: 'text-bottom', - str: 'alignment_textbottom', - value: 'vertical-align' + str: 'alignment_bottom', + value: 'vertical-align', + margin: '0 .5em' }, // Floats. { name: 'left', str: 'alignment_left', - value: 'float' + value: 'float', + margin: '0 .5em 0 0' }, { name: 'right', str: 'alignment_right', - value: 'float' + value: 'float', + margin: '0 0 .5em 0' } ]; @@ -160,7 +145,7 @@ var COMPONENTNAME = 'atto_image', '{{#if width}}width="{{width}}" {{/if}}' + '{{#if height}}height="{{height}}" {{/if}}' + '{{#if presentation}}role="presentation" {{/if}}' + - '{{#if alignment}}style="{{alignment}}" {{/if}}' + + 'style="{{alignment}}{{margin}}"' + '/>'; Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -551,8 +536,10 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi width = form.one('.' + CSS.INPUTWIDTH).get('value'), height = form.one('.' + CSS.INPUTHEIGHT).get('value'), alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'), + margin = '', presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'), imagehtml, + i, host = this.get('host'); e.preventDefault(); @@ -574,6 +561,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } else { host.setSelection(this._currentSelection); } + for (i in ALIGNMENTS) { + css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; + if (alignment === css) { + margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + } + } + template = Y.Handlebars.compile(IMAGETEMPLATE); imagehtml = template({ url: url, @@ -581,7 +575,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi width: width, height: height, presentation: presentation, - alignment: alignment + alignment: alignment, + margin: margin }); this.get('host').insertContentAtFocusPoint(imagehtml); diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js index 8b5f69703ad..f5112f80a2e 100644 --- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js +++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js @@ -1,2 +1,2 @@ -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",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",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='

{{#if showFilepicker}}{{/if}}

x


',o='{{alt}}';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_imageRawWidth:0,_imageRawHeight:0,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._handleDoubleClick,"img",this)},_handleDoubleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").setSelection(n),this._displayDialogue()},_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()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onload=function(){var e,t,i,s,o;r._imageRawWidth=this.width,r._imageRawHeight=this.height,e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline"),this.width===0&&(this.width=1),this.height===0&&(this.height=1),e=r._form.one("."+n.INPUTCONSTRAIN),s=Math.round(parseInt(t,10)/this.width),o=Math.round(parseInt(i,10)/this.height),e.set("checked",s===o),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=this.get("host").canShowFilepicker("image"),u=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:o,alignments:r}));return this._form=u,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustHeight,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustWidth,this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),o&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),u},_autoAdjustHeight:function(){var e -,t,r;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),r=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",r),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e);return}e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),t=Math.round(e/this._imageRawWidth*this._imageRawHeight),this._form.one("."+n.INPUTHEIGHT).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e)},_autoAdjustWidth:function(){var e,t;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){currentWidth=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",currentWidth);return}e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),t=Math.round(e/this._imageRawHeight*this._imageRawWidth),this._form.one("."+n.INPUTWIDTH).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e)},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(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),this._loadPreviewImage(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);e.get("value")!==""&&this._loadPreviewImage(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(this._updateWarning())return;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())},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]}); +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",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",IMAGEPREVIEW:"atto_image_preview"},r=[{name:"text-top",str:"alignment_top",value:"vertical-align",margin:"0 .5em"},{name:"middle",str:"alignment_middle",value:"vertical-align",margin:"0 .5em"},{name:"text-bottom",str:"alignment_bottom",value:"vertical-align",margin:"0 .5em"},{name:"left",str:"alignment_left",value:"float",margin:"0 .5em 0 0"},{name:"right",str:"alignment_right",value:"float",margin:"0 0 .5em 0"}],i="atto_image",s='

{{#if showFilepicker}}{{/if}}

x


',o='{{alt}}';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_imageRawWidth:0,_imageRawHeight:0,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._handleDoubleClick,"img",this)},_handleDoubleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").setSelection(n),this._displayDialogue()},_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()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onload=function(){var e,t,i,s,o;r._imageRawWidth=this.width,r._imageRawHeight=this.height,e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline"),this.width===0&&(this.width=1),this.height===0&&(this.height=1),e=r._form.one("."+n.INPUTCONSTRAIN),s=Math.round(parseInt(t,10)/this.width),o=Math.round(parseInt(i,10)/this.height),e.set("checked",s===o),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=this.get("host").canShowFilepicker("image"),u=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:o,alignments:r}));return this._form=u,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustHeight,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustWidth,this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),o&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),u},_autoAdjustHeight:function(){var e,t,r;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),r=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height" +,r),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e);return}e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),t=Math.round(e/this._imageRawWidth*this._imageRawHeight),this._form.one("."+n.INPUTHEIGHT).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e)},_autoAdjustWidth:function(){var e,t;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){currentWidth=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",currentWidth);return}e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),t=Math.round(e/this._imageRawHeight*this._imageRawWidth),this._form.one("."+n.INPUTWIDTH).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e)},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(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),this._loadPreviewImage(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);e.get("value")!==""&&this._loadPreviewImage(e.get("value"))},_setImage:function(t){var i=this._form,s=i.one("."+n.INPUTURL).get("value"),u=i.one("."+n.INPUTALT).get("value"),a=i.one("."+n.INPUTWIDTH).get("value"),f=i.one("."+n.INPUTHEIGHT).get("value"),l=i.one("."+n.INPUTALIGNMENT).get("value"),c="",h=i.one("."+n.IMAGEPRESENTATION).get("checked"),p,d,v=this.get("host");t.preventDefault();if(this._updateWarning())return;this.getDialogue({focusAfterHide:null}).hide(),v.focus();if(s!==""){this._selectedImage?v.setSelection(v.getSelectionFromNode(this._selectedImage)):v.setSelection(this._currentSelection);for(d in r)css=r[d].value+":"+r[d].name+";",l===css&&(c=" margin: "+r[d].margin+";");template=e.Handlebars.compile(o),p=template({url:s,alt:u,width:a,height:f,presentation:h,alignment:l,margin:c}),this.get("host").insertContentAtFocusPoint(p),this.markUpdated()}},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]}); diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js index d1ee9b84802..0310f2fc23b 100644 --- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js +++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js @@ -50,48 +50,33 @@ var CSS = { ALIGNMENTS = [ // Vertical alignment. { - 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' + str: 'alignment_top', + value: 'vertical-align', + margin: '0 .5em' }, { name: 'middle', str: 'alignment_middle', - value: 'vertical-align' - }, { - name: 'bottom', - str: 'alignment_bottom', - value: 'vertical-align' + value: 'vertical-align', + margin: '0 .5em' }, { name: 'text-bottom', - str: 'alignment_textbottom', - value: 'vertical-align' + str: 'alignment_bottom', + value: 'vertical-align', + margin: '0 .5em' }, // Floats. { name: 'left', str: 'alignment_left', - value: 'float' + value: 'float', + margin: '0 .5em 0 0' }, { name: 'right', str: 'alignment_right', - value: 'float' + value: 'float', + margin: '0 0 .5em 0' } ]; @@ -160,7 +145,7 @@ var COMPONENTNAME = 'atto_image', '{{#if width}}width="{{width}}" {{/if}}' + '{{#if height}}height="{{height}}" {{/if}}' + '{{#if presentation}}role="presentation" {{/if}}' + - '{{#if alignment}}style="{{alignment}}" {{/if}}' + + 'style="{{alignment}}{{margin}}"' + '/>'; Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -551,8 +536,10 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi width = form.one('.' + CSS.INPUTWIDTH).get('value'), height = form.one('.' + CSS.INPUTHEIGHT).get('value'), alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'), + margin = '', presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'), imagehtml, + i, host = this.get('host'); e.preventDefault(); @@ -574,6 +561,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } else { host.setSelection(this._currentSelection); } + for (i in ALIGNMENTS) { + css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; + if (alignment === css) { + margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + } + } + template = Y.Handlebars.compile(IMAGETEMPLATE); imagehtml = template({ url: url, @@ -581,7 +575,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi width: width, height: height, presentation: presentation, - alignment: alignment + alignment: alignment, + margin: margin }); this.get('host').insertContentAtFocusPoint(imagehtml); diff --git a/lib/editor/atto/plugins/image/yui/src/button/js/button.js b/lib/editor/atto/plugins/image/yui/src/button/js/button.js index 49208ab6743..804836b24f3 100644 --- a/lib/editor/atto/plugins/image/yui/src/button/js/button.js +++ b/lib/editor/atto/plugins/image/yui/src/button/js/button.js @@ -48,48 +48,33 @@ var CSS = { ALIGNMENTS = [ // Vertical alignment. { - 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' + str: 'alignment_top', + value: 'vertical-align', + margin: '0 .5em' }, { name: 'middle', str: 'alignment_middle', - value: 'vertical-align' - }, { - name: 'bottom', - str: 'alignment_bottom', - value: 'vertical-align' + value: 'vertical-align', + margin: '0 .5em' }, { name: 'text-bottom', - str: 'alignment_textbottom', - value: 'vertical-align' + str: 'alignment_bottom', + value: 'vertical-align', + margin: '0 .5em' }, // Floats. { name: 'left', str: 'alignment_left', - value: 'float' + value: 'float', + margin: '0 .5em 0 0' }, { name: 'right', str: 'alignment_right', - value: 'float' + value: 'float', + margin: '0 0 .5em 0' } ]; @@ -158,7 +143,7 @@ var COMPONENTNAME = 'atto_image', '{{#if width}}width="{{width}}" {{/if}}' + '{{#if height}}height="{{height}}" {{/if}}' + '{{#if presentation}}role="presentation" {{/if}}' + - '{{#if alignment}}style="{{alignment}}" {{/if}}' + + 'style="{{alignment}}{{margin}}"' + '/>'; Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -549,8 +534,10 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi width = form.one('.' + CSS.INPUTWIDTH).get('value'), height = form.one('.' + CSS.INPUTHEIGHT).get('value'), alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'), + margin = '', presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'), imagehtml, + i, host = this.get('host'); e.preventDefault(); @@ -572,6 +559,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } else { host.setSelection(this._currentSelection); } + for (i in ALIGNMENTS) { + css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; + if (alignment === css) { + margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + } + } + template = Y.Handlebars.compile(IMAGETEMPLATE); imagehtml = template({ url: url, @@ -579,7 +573,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi width: width, height: height, presentation: presentation, - alignment: alignment + alignment: alignment, + margin: margin }); this.get('host').insertContentAtFocusPoint(imagehtml); From d28af3d4aab83cb1f05d58ccb41057f159cdb7a0 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Tue, 15 Apr 2014 12:23:31 +0800 Subject: [PATCH 2/2] MDL-44826 Atto: Image alignment options If an image has custom alignment or margins - don't overwrite them unless a new alignment option is chosen. --- .../atto/plugins/image/lang/en/atto_image.php | 1 + lib/editor/atto/plugins/image/lib.php | 1 + .../moodle-atto_image-button-debug.js | 51 +++++++++++++++---- .../moodle-atto_image-button-min.js | 4 +- .../moodle-atto_image-button.js | 51 +++++++++++++++---- .../plugins/image/yui/src/button/js/button.js | 51 +++++++++++++++---- 6 files changed, 127 insertions(+), 32 deletions(-) diff --git a/lib/editor/atto/plugins/image/lang/en/atto_image.php b/lib/editor/atto/plugins/image/lang/en/atto_image.php index 245c20c3fb3..47003098347 100644 --- a/lib/editor/atto/plugins/image/lang/en/atto_image.php +++ b/lib/editor/atto/plugins/image/lang/en/atto_image.php @@ -31,6 +31,7 @@ $string['alignment_top'] = 'Top'; $string['browserepositories'] = 'Browse repositories...'; $string['constrain'] = 'Keep ratio'; $string['createimage'] = 'Insert image'; +$string['customstyle'] = 'Custom style'; $string['enteralt'] = 'Describe this image for someone who cannot see it'; $string['enterurl'] = 'Enter URL'; $string['height'] = 'Height'; diff --git a/lib/editor/atto/plugins/image/lib.php b/lib/editor/atto/plugins/image/lib.php index adbc51943cb..220ee242e8e 100644 --- a/lib/editor/atto/plugins/image/lib.php +++ b/lib/editor/atto/plugins/image/lib.php @@ -40,6 +40,7 @@ function atto_image_strings_for_js() { 'browserepositories', 'constrain', 'createimage', + 'customstyle', 'enterurl', 'enteralt', 'height', diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js index 0310f2fc23b..1c1b18171d4 100644 --- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js +++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js @@ -45,6 +45,7 @@ var CSS = { IMAGEBROWSER: 'openimagebrowser', IMAGEPRESENTATION: 'atto_image_presentation', INPUTCONSTRAIN: 'atto_image_constrain', + INPUTCUSTOMSTYLE: 'atto_image_customstyle', IMAGEPREVIEW: 'atto_image_preview' }, ALIGNMENTS = [ @@ -77,6 +78,10 @@ var CSS = { str: 'alignment_right', value: 'float', margin: '0 0 .5em 0' + }, { + name: 'customstyle', + str: 'customstyle', + value: 'style' } ]; @@ -128,6 +133,8 @@ var COMPONENTNAME = 'atto_image', '' + '{{/each}}' + '' + + // Hidden input to store custom styles. + '' + '
' + // Add the image preview. @@ -145,7 +152,7 @@ var COMPONENTNAME = 'atto_image', '{{#if width}}width="{{width}}" {{/if}}' + '{{#if height}}height="{{height}}" {{/if}}' + '{{#if presentation}}role="presentation" {{/if}}' + - 'style="{{alignment}}{{margin}}"' + + 'style="{{alignment}}{{margin}}{{customstyle}}"' + '/>'; Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -419,11 +426,20 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi if (properties === false) { img.setStyle('display', 'none'); + // Remove the custom style option if this is a new image. + form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1); return; } if (properties.align) { form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align); + // Remove the custom style option if we have a standard alignment. + form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1); + } else { + form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;'); + } + if (properties.customstyle) { + form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle); } if (properties.display) { img.setStyle('display', properties.display); @@ -461,7 +477,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi alt :null, width: null, height: null, - align: null, + align: '', display: 'inline', presentation: false }, @@ -479,6 +495,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi this._selectedImage = image; style = image.getAttribute('style'); + properties.customstyle = style; + style = style.replace(/ /g, ''); width = parseInt(image.getAttribute('width'), 10); height = parseInt(image.getAttribute('height'), 10); @@ -490,9 +508,14 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } for (i in ALIGNMENTS) { css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; - if (style.replace(' ', '').indexOf(css) !== -1) { - properties.align = css; - break; + if (style.indexOf(css) !== -1) { + margin = 'margin:' + ALIGNMENTS[i].margin + ';'; + margin = margin.replace(/ /g, ''); + // Must match alignment and margins - otherwise custom style is selected. + if (style.indexOf(margin) !== -1) { + properties.align = css; + break; + } } } properties.src = image.getAttribute('src'); @@ -539,6 +562,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi margin = '', presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'), imagehtml, + customstyle = '', i, host = this.get('host'); @@ -561,10 +585,16 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } else { host.setSelection(this._currentSelection); } - for (i in ALIGNMENTS) { - css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; - if (alignment === css) { - margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + + if (alignment === 'style:customstyle;') { + alignment = ''; + customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'); + } else { + for (i in ALIGNMENTS) { + css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; + if (alignment === css) { + margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + } } } @@ -576,7 +606,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi height: height, presentation: presentation, alignment: alignment, - margin: margin + margin: margin, + customstyle: customstyle }); this.get('host').insertContentAtFocusPoint(imagehtml); diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js index f5112f80a2e..6a463c4fbc8 100644 --- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js +++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js @@ -1,2 +1,2 @@ -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",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",IMAGEPREVIEW:"atto_image_preview"},r=[{name:"text-top",str:"alignment_top",value:"vertical-align",margin:"0 .5em"},{name:"middle",str:"alignment_middle",value:"vertical-align",margin:"0 .5em"},{name:"text-bottom",str:"alignment_bottom",value:"vertical-align",margin:"0 .5em"},{name:"left",str:"alignment_left",value:"float",margin:"0 .5em 0 0"},{name:"right",str:"alignment_right",value:"float",margin:"0 0 .5em 0"}],i="atto_image",s='

{{#if showFilepicker}}{{/if}}

x


',o='{{alt}}';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_imageRawWidth:0,_imageRawHeight:0,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._handleDoubleClick,"img",this)},_handleDoubleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").setSelection(n),this._displayDialogue()},_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()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onload=function(){var e,t,i,s,o;r._imageRawWidth=this.width,r._imageRawHeight=this.height,e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline"),this.width===0&&(this.width=1),this.height===0&&(this.height=1),e=r._form.one("."+n.INPUTCONSTRAIN),s=Math.round(parseInt(t,10)/this.width),o=Math.round(parseInt(i,10)/this.height),e.set("checked",s===o),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=this.get("host").canShowFilepicker("image"),u=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:o,alignments:r}));return this._form=u,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustHeight,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustWidth,this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),o&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),u},_autoAdjustHeight:function(){var e,t,r;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),r=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height" -,r),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e);return}e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),t=Math.round(e/this._imageRawWidth*this._imageRawHeight),this._form.one("."+n.INPUTHEIGHT).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e)},_autoAdjustWidth:function(){var e,t;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){currentWidth=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",currentWidth);return}e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),t=Math.round(e/this._imageRawHeight*this._imageRawWidth),this._form.one("."+n.INPUTWIDTH).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e)},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(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),this._loadPreviewImage(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);e.get("value")!==""&&this._loadPreviewImage(e.get("value"))},_setImage:function(t){var i=this._form,s=i.one("."+n.INPUTURL).get("value"),u=i.one("."+n.INPUTALT).get("value"),a=i.one("."+n.INPUTWIDTH).get("value"),f=i.one("."+n.INPUTHEIGHT).get("value"),l=i.one("."+n.INPUTALIGNMENT).get("value"),c="",h=i.one("."+n.IMAGEPRESENTATION).get("checked"),p,d,v=this.get("host");t.preventDefault();if(this._updateWarning())return;this.getDialogue({focusAfterHide:null}).hide(),v.focus();if(s!==""){this._selectedImage?v.setSelection(v.getSelectionFromNode(this._selectedImage)):v.setSelection(this._currentSelection);for(d in r)css=r[d].value+":"+r[d].name+";",l===css&&(c=" margin: "+r[d].margin+";");template=e.Handlebars.compile(o),p=template({url:s,alt:u,width:a,height:f,presentation:h,alignment:l,margin:c}),this.get("host").insertContentAtFocusPoint(p),this.markUpdated()}},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]}); +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",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",INPUTCUSTOMSTYLE:"atto_image_customstyle",IMAGEPREVIEW:"atto_image_preview"},r=[{name:"text-top",str:"alignment_top",value:"vertical-align",margin:"0 .5em"},{name:"middle",str:"alignment_middle",value:"vertical-align",margin:"0 .5em"},{name:"text-bottom",str:"alignment_bottom",value:"vertical-align",margin:"0 .5em"},{name:"left",str:"alignment_left",value:"float",margin:"0 .5em 0 0"},{name:"right",str:"alignment_right",value:"float",margin:"0 0 .5em 0"},{name:"customstyle",str:"customstyle",value:"style"}],i="atto_image",s='

{{#if showFilepicker}}{{/if}}

x


',o='{{alt}}';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_imageRawWidth:0,_imageRawHeight:0,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._handleDoubleClick,"img",this)},_handleDoubleClick:function(e){var t=e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").setSelection(n),this._displayDialogue()},_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()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onload=function(){var e,t,i,s,o;r._imageRawWidth=this.width,r._imageRawHeight=this.height,e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline"),this.width===0&&(this.width=1),this.height===0&&(this.height=1),e=r._form.one("."+n.INPUTCONSTRAIN),s=Math.round(parseInt(t,10)/this.width),o=Math.round(parseInt(i,10)/this.height),e.set("checked",s===o),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=this.get("host").canShowFilepicker("image"),u=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:o,alignments:r}));return this._form=u,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustHeight,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustWidth,this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),o&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),u},_autoAdjustHeight:function(){var e,t,r;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){e=parseInt +(this._form.one("."+n.INPUTWIDTH).get("value"),10),r=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",r),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e);return}e=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),t=Math.round(e/this._imageRawWidth*this._imageRawHeight),this._form.one("."+n.INPUTHEIGHT).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",e)},_autoAdjustWidth:function(){var e,t;if(!this._form.one("."+n.INPUTCONSTRAIN).get("checked")){currentWidth=parseInt(this._form.one("."+n.INPUTWIDTH).get("value"),10),e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",currentWidth);return}e=parseInt(this._form.one("."+n.INPUTHEIGHT).get("value"),10),t=Math.round(e/this._imageRawHeight*this._imageRawWidth),this._form.one("."+n.INPUTWIDTH).set("value",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("width",t),this._form.one("."+n.IMAGEPREVIEW).setAttribute("height",e)},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url)}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),i=e.one("."+n.IMAGEPREVIEW);if(t===!1){i.setStyle("display","none"),e.one("."+n.INPUTALIGNMENT).getDOMNode().options.remove(r.length-1);return}t.align?(e.one("."+n.INPUTALIGNMENT).set("value",t.align),e.one("."+n.INPUTALIGNMENT).getDOMNode().options.remove(r.length-1)):e.one("."+n.INPUTALIGNMENT).set("value","style:customstyle;"),t.customstyle&&e.one("."+n.INPUTCUSTOMSTYLE).set("value",t.customstyle),t.display&&i.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),this._loadPreviewImage(t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked")},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:"",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"),e.customstyle=o,o=o.replace(/ /g,""),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.indexOf(u)!==-1){margin="margin:"+r[n].margin+";",margin=margin.replace(/ /g,"");if(o.indexOf(margin)!==-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);e.get("value")!==""&&this._loadPreviewImage(e.get("value"))},_setImage:function(t){var i=this._form,s=i.one("."+n.INPUTURL).get("value"),u=i.one("."+n.INPUTALT).get("value"),a=i.one("."+n.INPUTWIDTH).get("value"),f=i.one("."+n.INPUTHEIGHT).get("value"),l=i.one("."+n.INPUTALIGNMENT).get("value"),c="",h=i.one("."+n.IMAGEPRESENTATION).get("checked"),p,d="",v,m=this.get("host");t.preventDefault();if(this._updateWarning())return;this.getDialogue({focusAfterHide:null}).hide(),m.focus();if(s!==""){this._selectedImage?m.setSelection(m.getSelectionFromNode(this._selectedImage)):m.setSelection(this._currentSelection);if(l==="style:customstyle;")l="",d=i.one("."+n.INPUTCUSTOMSTYLE).get("value");else for(v in r)css=r[v].value+":"+r[v].name+";",l===css&&(c=" margin: "+r[v].margin+";");template=e.Handlebars.compile(o),p=template({url:s,alt:u,width:a,height:f,presentation:h,alignment:l,margin:c,customstyle:d}),this.get("host").insertContentAtFocusPoint(p),this.markUpdated()}},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]}); diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js index 0310f2fc23b..1c1b18171d4 100644 --- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js +++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js @@ -45,6 +45,7 @@ var CSS = { IMAGEBROWSER: 'openimagebrowser', IMAGEPRESENTATION: 'atto_image_presentation', INPUTCONSTRAIN: 'atto_image_constrain', + INPUTCUSTOMSTYLE: 'atto_image_customstyle', IMAGEPREVIEW: 'atto_image_preview' }, ALIGNMENTS = [ @@ -77,6 +78,10 @@ var CSS = { str: 'alignment_right', value: 'float', margin: '0 0 .5em 0' + }, { + name: 'customstyle', + str: 'customstyle', + value: 'style' } ]; @@ -128,6 +133,8 @@ var COMPONENTNAME = 'atto_image', '' + '{{/each}}' + '' + + // Hidden input to store custom styles. + '' + '
' + // Add the image preview. @@ -145,7 +152,7 @@ var COMPONENTNAME = 'atto_image', '{{#if width}}width="{{width}}" {{/if}}' + '{{#if height}}height="{{height}}" {{/if}}' + '{{#if presentation}}role="presentation" {{/if}}' + - 'style="{{alignment}}{{margin}}"' + + 'style="{{alignment}}{{margin}}{{customstyle}}"' + '/>'; Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -419,11 +426,20 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi if (properties === false) { img.setStyle('display', 'none'); + // Remove the custom style option if this is a new image. + form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1); return; } if (properties.align) { form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align); + // Remove the custom style option if we have a standard alignment. + form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1); + } else { + form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;'); + } + if (properties.customstyle) { + form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle); } if (properties.display) { img.setStyle('display', properties.display); @@ -461,7 +477,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi alt :null, width: null, height: null, - align: null, + align: '', display: 'inline', presentation: false }, @@ -479,6 +495,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi this._selectedImage = image; style = image.getAttribute('style'); + properties.customstyle = style; + style = style.replace(/ /g, ''); width = parseInt(image.getAttribute('width'), 10); height = parseInt(image.getAttribute('height'), 10); @@ -490,9 +508,14 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } for (i in ALIGNMENTS) { css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; - if (style.replace(' ', '').indexOf(css) !== -1) { - properties.align = css; - break; + if (style.indexOf(css) !== -1) { + margin = 'margin:' + ALIGNMENTS[i].margin + ';'; + margin = margin.replace(/ /g, ''); + // Must match alignment and margins - otherwise custom style is selected. + if (style.indexOf(margin) !== -1) { + properties.align = css; + break; + } } } properties.src = image.getAttribute('src'); @@ -539,6 +562,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi margin = '', presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'), imagehtml, + customstyle = '', i, host = this.get('host'); @@ -561,10 +585,16 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } else { host.setSelection(this._currentSelection); } - for (i in ALIGNMENTS) { - css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; - if (alignment === css) { - margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + + if (alignment === 'style:customstyle;') { + alignment = ''; + customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'); + } else { + for (i in ALIGNMENTS) { + css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; + if (alignment === css) { + margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + } } } @@ -576,7 +606,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi height: height, presentation: presentation, alignment: alignment, - margin: margin + margin: margin, + customstyle: customstyle }); this.get('host').insertContentAtFocusPoint(imagehtml); diff --git a/lib/editor/atto/plugins/image/yui/src/button/js/button.js b/lib/editor/atto/plugins/image/yui/src/button/js/button.js index 804836b24f3..a0af106c2df 100644 --- a/lib/editor/atto/plugins/image/yui/src/button/js/button.js +++ b/lib/editor/atto/plugins/image/yui/src/button/js/button.js @@ -43,6 +43,7 @@ var CSS = { IMAGEBROWSER: 'openimagebrowser', IMAGEPRESENTATION: 'atto_image_presentation', INPUTCONSTRAIN: 'atto_image_constrain', + INPUTCUSTOMSTYLE: 'atto_image_customstyle', IMAGEPREVIEW: 'atto_image_preview' }, ALIGNMENTS = [ @@ -75,6 +76,10 @@ var CSS = { str: 'alignment_right', value: 'float', margin: '0 0 .5em 0' + }, { + name: 'customstyle', + str: 'customstyle', + value: 'style' } ]; @@ -126,6 +131,8 @@ var COMPONENTNAME = 'atto_image', '' + '{{/each}}' + '' + + // Hidden input to store custom styles. + '' + '
' + // Add the image preview. @@ -143,7 +150,7 @@ var COMPONENTNAME = 'atto_image', '{{#if width}}width="{{width}}" {{/if}}' + '{{#if height}}height="{{height}}" {{/if}}' + '{{#if presentation}}role="presentation" {{/if}}' + - 'style="{{alignment}}{{margin}}"' + + 'style="{{alignment}}{{margin}}{{customstyle}}"' + '/>'; Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -417,11 +424,20 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi if (properties === false) { img.setStyle('display', 'none'); + // Remove the custom style option if this is a new image. + form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1); return; } if (properties.align) { form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align); + // Remove the custom style option if we have a standard alignment. + form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1); + } else { + form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;'); + } + if (properties.customstyle) { + form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle); } if (properties.display) { img.setStyle('display', properties.display); @@ -459,7 +475,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi alt :null, width: null, height: null, - align: null, + align: '', display: 'inline', presentation: false }, @@ -477,6 +493,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi this._selectedImage = image; style = image.getAttribute('style'); + properties.customstyle = style; + style = style.replace(/ /g, ''); width = parseInt(image.getAttribute('width'), 10); height = parseInt(image.getAttribute('height'), 10); @@ -488,9 +506,14 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } for (i in ALIGNMENTS) { css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; - if (style.replace(' ', '').indexOf(css) !== -1) { - properties.align = css; - break; + if (style.indexOf(css) !== -1) { + margin = 'margin:' + ALIGNMENTS[i].margin + ';'; + margin = margin.replace(/ /g, ''); + // Must match alignment and margins - otherwise custom style is selected. + if (style.indexOf(margin) !== -1) { + properties.align = css; + break; + } } } properties.src = image.getAttribute('src'); @@ -537,6 +560,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi margin = '', presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'), imagehtml, + customstyle = '', i, host = this.get('host'); @@ -559,10 +583,16 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi } else { host.setSelection(this._currentSelection); } - for (i in ALIGNMENTS) { - css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; - if (alignment === css) { - margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + + if (alignment === 'style:customstyle;') { + alignment = ''; + customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'); + } else { + for (i in ALIGNMENTS) { + css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';'; + if (alignment === css) { + margin = ' margin: ' + ALIGNMENTS[i].margin + ';'; + } } } @@ -574,7 +604,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi height: height, presentation: presentation, alignment: alignment, - margin: margin + margin: margin, + customstyle: customstyle }); this.get('host').insertContentAtFocusPoint(imagehtml);