ENHANCEMENT: toggle header and action label for image dialog popups (from content TinyMCE image icon)

forms/HtmlEditorField.php

@@ -422,14 +422,19 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 		$fields = new FieldList(
 			new LiteralField(
 				'Heading',
-				sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Insert Image'))
+				sprintf('<h3 class="htmleditorfield-mediaform-heading insert">%s</h3>', _t('HtmlEditorField.INSERTIMAGE', 'Insert Image')).
+				sprintf('<h3 class="htmleditorfield-mediaform-heading update">%s</h3>', _t('HtmlEditorField.UpdateIMAGE', 'Update Image'))
 			),
 			$allFields
 		);
 		
 		$actions = new FieldList(
 			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
-				->addExtraClass('ss-ui-action-constructive')
+				->addExtraClass('ss-ui-action-constructive image-insert')
+				->setAttribute('data-icon', 'accept')
+				->setUseButtonTag(true),
+			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONUpdate', 'Update'))
+				->addExtraClass('ss-ui-action-constructive image-update')
 				->setAttribute('data-icon', 'accept')
 				->setUseButtonTag(true)
 		);

javascript/HtmlEditorField.js

@@ -653,6 +653,24 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 		 * of remove files as well.
 		 */
 		$('form.htmleditorfield-mediaform').entwine({
+			onmatch: function() {
+				this.toggleLooks();
+				this._super();
+			},
+			toggleLooks: function(){
+				var updateExisting = Boolean(this.find('.ss-htmleditorfield-file').length);
+				if(updateExisting){
+					this.find('.htmleditorfield-mediaform-heading.insert').hide();
+					this.find('.Actions .image-insert').hide();
+					this.find('.htmleditorfield-mediaform-heading.update').show();
+					this.find('.Actions .image-update').show();
+				}else{
+					this.find('.htmleditorfield-mediaform-heading.insert').show();
+					this.find('.Actions .image-insert').show();
+					this.find('.htmleditorfield-mediaform-heading.update').hide();
+					this.find('.Actions .image-update').hide();
+				}
+			},
 			onsubmit: function() {
 				var self = this, ed = this.getEditor();
 
@@ -682,7 +700,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			},
 			redraw: function() {
 				this._super();
-
+				this.toggleLooks();
 				var ed = this.getEditor(), node = $(ed.getSelectedNode()),
 					hasItems = Boolean(this.find('.ss-htmleditorfield-file').length),
 					editingSelected = node.is('img');

lang/en.yml

@@ -287,7 +287,8 @@ en:
     FROMCMS: "From the CMS"
     FROMCOMPUTER: "From your computer"
     Find: "Find"
-    IMAGE: "Insert Image"
+    INSERTIMAGE: "Insert Image"
+    UPDATEIMAGE: "Update Image"
     IMAGEALTTEXT: "Alternative text (alt) - shown if image cannot be displayed"
     IMAGEDIMENSIONS: "Dimensions"
     IMAGEHEIGHTPX: "Height"