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