gist.diff

commit 62d1b23eabb185616015d786990a7f82f042777f
Author: a2nt <[email protected]>
Date:   Sat May 4 04:45:53 2013 +0700

    IMPROVEMENT Media Dialog extra data
    
    HtmlEditorField_Toolbar class allows you to extend media fields for an
    instance this way:
    [code]
    class HtmlEditorField_ToolbarEx extends Extension {
    	public function updateFieldsForImage($fields, $url, $file){
    		if(is_a($file,'HtmlEditorField_Embed')){
    			$fields->push(
    				CheckboxField::create('lightbox','Popup Preview',0)
    					->addExtraClass('extra-data')
    			);
    		}
    	}
    }[/code]
    
    But there's no use in such exteding when u can't pass this attributes
    to content field so every field that has class "extra-data" will be
    added to media as data-*field_name* attribute as u can see in my
    exmaple data-lightbox="1" attribute will be added to an image. The same
    way we can add a hidden field with full size image url and it will be
    possible to open this image in lightbox window

diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js
index 38269ac..54d4ef0 100644
--- a/javascript/HtmlEditorField.js
+++ b/javascript/HtmlEditorField.js
@@ -981,6 +981,11 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			 * by the specific media type.
 			 */
 			getExtraData: function() {
+				var data = {};
+				this.find(':input.extra-data').each(function(){
+					data[$(this).attr('name')] = $(this).val();
+				});
+				return data;
 			},
 			/**
 			 * @return {String} HTML suitable for insertion into the rich text editor
@@ -1053,9 +1058,13 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				};
 			},
 			getExtraData: function() {
-				return {
+				var data = {
 					'CaptionText': this.find(':input[name=CaptionText]').val()
 				};
+				this.find(':input.extra-data').each(function(){
+					data[$(this).attr('name')] = $(this).val();
+				});
+				return data;
 			},
 			getHTML: function() {
 				/* NOP */
@@ -1186,7 +1195,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			getExtraData: function() {
 				var width = this.find(':input[name=Width]').val(),
 					height = this.find(':input[name=Height]').val();
-				return {
+				var data = {
 					'CaptionText': this.find(':input[name=CaptionText]').val(),
 					'Url': this.find(':input[name=URL]').val(),
 					'thumbnail': this.find('.thumbnail-preview').attr('src'),
@@ -1194,6 +1203,10 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					'height' : height ? parseInt(height, 10) : null,
 					'cssclass': this.find(':input[name=CSSClass]').val()
 				};
+				this.find(':input.extra-data').each(function(){
+					data[$(this).attr('name')] = $(this).val();
+				});
+				return data;
 			},
 			getHTML: function() {
 				var el,