root / htmltest / sites / all / modules / media / js / wysiwyg-media.js @ a5572547
1 |
|
---|---|
2 |
/**
|
3 |
* @file
|
4 |
* Attach Media WYSIWYG behaviors.
|
5 |
*/
|
6 |
|
7 |
(function ($) { |
8 |
|
9 |
Drupal.media = Drupal.media || {}; |
10 |
|
11 |
/**
|
12 |
* Register the plugin with WYSIWYG.
|
13 |
*/
|
14 |
Drupal.wysiwyg.plugins.media = { |
15 |
|
16 |
/**
|
17 |
* Determine whether a DOM element belongs to this plugin.
|
18 |
*
|
19 |
* @param node
|
20 |
* A DOM element
|
21 |
*/
|
22 |
isNode: function(node) { |
23 |
return $(node).is('img.media-element'); |
24 |
}, |
25 |
/**
|
26 |
* Execute the button.
|
27 |
*
|
28 |
* @param data
|
29 |
* An object containing data about the current selection:
|
30 |
* - format: 'html' when the passed data is HTML content, 'text' when the
|
31 |
* passed data is plain-text content.
|
32 |
* - node: When 'format' is 'html', the focused DOM element in the editor.
|
33 |
* - content: The textual representation of the focused/selected editor
|
34 |
* content.
|
35 |
* @param settings
|
36 |
* The plugin settings, as provided in the plugin's PHP include file.
|
37 |
* @param instanceId
|
38 |
* The ID of the current editor instance.
|
39 |
*/
|
40 |
invoke: function (data, settings, instanceId) { |
41 |
if (data.format == 'html') { |
42 |
var insert = new InsertMedia(instanceId); |
43 |
if (this.isNode(data.node)) { |
44 |
// Change the view mode for already-inserted media.
|
45 |
var media_file = Drupal.media.filter.extract_file_info($(data.node)); |
46 |
insert.onSelect([media_file]); |
47 |
} |
48 |
else {
|
49 |
// Insert new media.
|
50 |
insert.prompt(settings.global); |
51 |
} |
52 |
} |
53 |
}, |
54 |
|
55 |
/**
|
56 |
* Attach function, called when a rich text editor loads.
|
57 |
* This finds all [[tags]] and replaces them with the html
|
58 |
* that needs to show in the editor.
|
59 |
*
|
60 |
* This finds all JSON macros and replaces them with the HTML placeholder
|
61 |
* that will show in the editor.
|
62 |
*/
|
63 |
attach: function (content, settings, instanceId) { |
64 |
content = Drupal.media.filter.replaceTokenWithPlaceholder(content); |
65 |
return content;
|
66 |
}, |
67 |
|
68 |
/**
|
69 |
* Detach function, called when a rich text editor detaches
|
70 |
*/
|
71 |
detach: function (content, settings, instanceId) { |
72 |
content = Drupal.media.filter.replacePlaceholderWithToken(content); |
73 |
return content;
|
74 |
} |
75 |
}; |
76 |
/**
|
77 |
* Defining InsertMedia object to manage the sequence of actions involved in
|
78 |
* inserting a media element into the WYSIWYG.
|
79 |
* Keeps track of the WYSIWYG instance id.
|
80 |
*/
|
81 |
var InsertMedia = function (instance_id) { |
82 |
this.instanceId = instance_id;
|
83 |
return this; |
84 |
}; |
85 |
|
86 |
InsertMedia.prototype = { |
87 |
/**
|
88 |
* Prompt user to select a media item with the media browser.
|
89 |
*
|
90 |
* @param settings
|
91 |
* Settings object to pass on to the media browser.
|
92 |
* TODO: Determine if this is actually necessary.
|
93 |
*/
|
94 |
prompt: function (settings) { |
95 |
Drupal.media.popups.mediaBrowser($.proxy(this, 'onSelect'), settings); |
96 |
}, |
97 |
|
98 |
/**
|
99 |
* On selection of a media item, display item's display configuration form.
|
100 |
*/
|
101 |
onSelect: function (media_files) { |
102 |
this.mediaFile = media_files[0]; |
103 |
Drupal.media.popups.mediaStyleSelector(this.mediaFile, $.proxy(this, 'insert'), {}); |
104 |
}, |
105 |
|
106 |
/**
|
107 |
* When display config has been set, insert the placeholder markup into the
|
108 |
* wysiwyg and generate its corresponding json macro pair to be added to the
|
109 |
* tagmap.
|
110 |
*/
|
111 |
insert: function (formatted_media) { |
112 |
var element = Drupal.media.filter.create_element(formatted_media.html, {
|
113 |
fid: this.mediaFile.fid, |
114 |
view_mode: formatted_media.type,
|
115 |
attributes: formatted_media.options,
|
116 |
fields: formatted_media.options
|
117 |
}); |
118 |
// Get the markup and register it for the macro / placeholder handling.
|
119 |
var markup = Drupal.media.filter.getWysiwygHTML(element);
|
120 |
|
121 |
// Insert placeholder markup into wysiwyg.
|
122 |
Drupal.wysiwyg.instances[this.instanceId].insert(markup);
|
123 |
} |
124 |
}; |
125 |
|
126 |
/** Helper functions */
|
127 |
|
128 |
/**
|
129 |
* Ensures the tag map has been initialized.
|
130 |
*/
|
131 |
function ensure_tagmap () { |
132 |
return Drupal.media.filter.ensure_tagmap();
|
133 |
} |
134 |
|
135 |
/**
|
136 |
* Serializes file information as a url-encoded JSON object and stores it as a
|
137 |
* data attribute on the html element.
|
138 |
*
|
139 |
* @param html (string)
|
140 |
* A html element to be used to represent the inserted media element.
|
141 |
* @param info (object)
|
142 |
* A object containing the media file information (fid, view_mode, etc).
|
143 |
*
|
144 |
* @deprecated
|
145 |
*/
|
146 |
function create_element (html, info) { |
147 |
return Drupal.media.filter.create_element(html, info);
|
148 |
} |
149 |
|
150 |
/**
|
151 |
* Create a macro representation of the inserted media element.
|
152 |
*
|
153 |
* @param element (jQuery object)
|
154 |
* A media element with attached serialized file info.
|
155 |
*
|
156 |
* @deprecated
|
157 |
*/
|
158 |
function create_macro (element) { |
159 |
return Drupal.media.filter.create_macro(element);
|
160 |
} |
161 |
|
162 |
/**
|
163 |
* Extract the file info from a WYSIWYG placeholder element as JSON.
|
164 |
*
|
165 |
* @param element (jQuery object)
|
166 |
* A media element with attached serialized file info.
|
167 |
*
|
168 |
* @deprecated
|
169 |
*/
|
170 |
function extract_file_info (element) { |
171 |
return Drupal.media.filter.extract_file_info(element);
|
172 |
} |
173 |
|
174 |
/**
|
175 |
* Gets the HTML content of an element.
|
176 |
*
|
177 |
* @param element (jQuery object)
|
178 |
*
|
179 |
* @deprecated
|
180 |
*/
|
181 |
function outerHTML (element) { |
182 |
return Drupal.media.filter.outerHTML(element);
|
183 |
} |
184 |
|
185 |
})(jQuery); |