1
|
|
|
/** |
2
|
|
|
* TinyMCE plugin RecordRTC - provides UI to annotate the content in the text editor with a WebRTC recording. |
3
|
|
|
* |
4
|
|
|
* @package tinymce_recordrtc |
5
|
|
|
* @author Jesus Federico (jesus [at] blindsidenetworks [dt] com) |
6
|
|
|
* @author Jacob Prud'homme (jacob [dt] prudhomme [at] blindsidenetworks [dt] com) |
7
|
|
|
* @copyright 2016 onwards, Blindside Networks Inc. |
8
|
|
|
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later |
9
|
|
|
*/ |
10
|
|
|
|
11
|
|
|
// ESLint directives. |
12
|
|
|
/* global tinyMCE */ |
13
|
|
|
/* eslint-disable camelcase, require-jsdoc */ |
14
|
|
|
|
15
|
|
|
// Scrutinizer CI directives. |
16
|
|
|
/** global: M */ |
17
|
|
|
/** global: tinyMCE */ |
18
|
|
|
|
19
|
|
|
function addForceRepaint(ed) { |
20
|
|
|
ed.addCommand('mceForceRepaint', function() { |
21
|
|
|
var root = ed.dom.getRoot(), |
22
|
|
|
items = root.getElementsByTagName("img"); |
23
|
|
|
|
24
|
|
|
for (var i = 0; i < items.length; i++) { |
25
|
|
|
var src = items[i].getAttribute('src').replace(/\?\d+$/, ''); |
26
|
|
|
items[i].setAttribute('src', src + '?' + (new Date().getTime())); |
27
|
|
|
} |
28
|
|
|
|
29
|
|
|
ed.execCommand('mceRepaint'); |
30
|
|
|
ed.focus(); |
31
|
|
|
}); |
32
|
|
|
} |
33
|
|
|
|
34
|
|
|
function addMaximizeWindow(ed) { |
35
|
|
|
ed.addCommand('mceMaximizeWindow', function(w) { |
36
|
|
|
// This function duplicates the TinyMCE windowManager code when 'maximize' button is pressed. |
37
|
|
|
var vp = ed.dom.getViewPort(), |
38
|
|
|
id = w.id; |
39
|
|
|
|
40
|
|
|
// Reduce viewport size to avoid scrollbars. |
41
|
|
|
vp.w -= 2; |
42
|
|
|
vp.h -= 2; |
43
|
|
|
|
44
|
|
|
w.oldPos = w.element.getXY(); |
45
|
|
|
w.oldSize = w.element.getSize(); |
46
|
|
|
|
47
|
|
|
w.element.moveTo(vp.x, vp.y); |
48
|
|
|
w.element.resizeTo(vp.w, vp.h); |
49
|
|
|
|
50
|
|
|
ed.dom.setStyles(id + '_ifr', {width: vp.w - w.deltaWidth, height: vp.h - w.deltaHeight}); |
51
|
|
|
ed.dom.addClass(id + '_wrapper', 'mceMaximized'); |
52
|
|
|
}); |
53
|
|
|
} |
54
|
|
|
|
55
|
|
|
function addAudio(ed, url) { |
|
|
|
|
56
|
|
|
ed.addCommand('mceAudioRTC', function() { |
57
|
|
|
var audiortc = ed.getParam('audiortc', {}); |
58
|
|
|
var viewparams = ''; |
59
|
|
|
window.Object.keys(audiortc).forEach(function(key) { |
60
|
|
|
viewparams += (viewparams !== '' ? '&' : '') + window.encodeURIComponent(key); |
61
|
|
|
viewparams += '=' + window.encodeURIComponent(audiortc[key]); |
62
|
|
|
}); |
63
|
|
|
var viewurl = ed.getParam("moodle_plugin_base") + 'recordrtc/audiortc.php'; |
64
|
|
|
viewurl += (viewparams != '' ? '?' + viewparams : ''); |
65
|
|
|
|
66
|
|
|
var onClose = function() { |
67
|
|
|
ed.windowManager.onClose.remove(onClose); |
68
|
|
|
ed.execCommand('mceForceRepaint'); |
69
|
|
|
}; |
70
|
|
|
ed.windowManager.onClose.add(onClose); |
71
|
|
|
|
72
|
|
|
var vp = ed.dom.getViewPort(), |
73
|
|
|
baseWidth = 640 + window.parseInt(ed.getLang('advimage.delta_width', 0)), |
74
|
|
|
percentOfViewportWidth = vp.w * 0.75, |
75
|
|
|
width = percentOfViewportWidth > baseWidth ? percentOfViewportWidth : baseWidth, |
76
|
|
|
height = 340 + window.parseInt(ed.getLang('advimage.delta_width', 0)), |
77
|
|
|
maximizedmode = (width >= vp.w - 2 || height >= vp.h - 2); |
78
|
|
|
if (maximizedmode) { |
79
|
|
|
width = vp.w; |
80
|
|
|
height = vp.h; |
81
|
|
|
} |
82
|
|
|
var w = ed.windowManager.open({ |
83
|
|
|
file: viewurl, |
84
|
|
|
width: width, |
85
|
|
|
height: height, |
86
|
|
|
inline: 1, |
87
|
|
|
popup_css: ed.getParam("moodle_plugin_base") + 'recordrtc/tinymce/css/popup.css' |
88
|
|
|
}, { |
89
|
|
|
plugin_url: url // Plugin absolute URL. |
90
|
|
|
}); |
91
|
|
|
if (maximizedmode) { |
92
|
|
|
ed.execCommand('mceMaximizeWindow', w); |
93
|
|
|
} |
94
|
|
|
}); |
95
|
|
|
|
96
|
|
|
// Register AudioRTC button. |
97
|
|
|
ed.addButton('audiortc', { |
98
|
|
|
title: 'recordrtc.audiortc', |
99
|
|
|
cmd: 'mceAudioRTC', |
100
|
|
|
image: url + '/img/audiortc.png' |
101
|
|
|
}); |
102
|
|
|
} |
103
|
|
|
|
104
|
|
|
function addVideo(ed, url) { |
|
|
|
|
105
|
|
|
ed.addCommand('mceVideoRTC', function() { |
106
|
|
|
var videortc = ed.getParam('videortc', {}); |
107
|
|
|
var viewparams = ''; |
108
|
|
|
window.Object.keys(videortc).forEach(function(key) { |
109
|
|
|
viewparams += (viewparams !== '' ? '&' : '') + window.encodeURIComponent(key); |
110
|
|
|
viewparams += '=' + window.encodeURIComponent(videortc[key]); |
111
|
|
|
}); |
112
|
|
|
var viewurl = ed.getParam("moodle_plugin_base") + 'recordrtc/videortc.php'; |
113
|
|
|
viewurl += (viewparams != '' ? '?' + viewparams : ''); |
114
|
|
|
|
115
|
|
|
var onClose = function() { |
116
|
|
|
ed.windowManager.onClose.remove(onClose); |
117
|
|
|
ed.execCommand('mceForceRepaint'); |
118
|
|
|
}; |
119
|
|
|
ed.windowManager.onClose.add(onClose); |
120
|
|
|
|
121
|
|
|
var vp = ed.dom.getViewPort(), |
122
|
|
|
baseWidth = 720 + window.parseInt(ed.getLang('advimage.delta_width', 0)), |
123
|
|
|
percentOfViewportWidth = vp.w * 0.75, |
124
|
|
|
width = percentOfViewportWidth > baseWidth ? percentOfViewportWidth : baseWidth, |
125
|
|
|
height = 780 + window.parseInt(ed.getLang('advimage.delta_width', 0)), |
126
|
|
|
maximizedmode = (width >= vp.w - 2 || height >= vp.h - 2); |
127
|
|
|
if (maximizedmode) { |
128
|
|
|
width = vp.w; |
129
|
|
|
height = vp.h; |
130
|
|
|
} |
131
|
|
|
var w = ed.windowManager.open({ |
132
|
|
|
file: viewurl, |
133
|
|
|
width: width, |
134
|
|
|
height: height, |
135
|
|
|
inline: 1, |
136
|
|
|
popup_css: ed.getParam("moodle_plugin_base") + 'recordrtc/tinymce/css/popup.css' |
137
|
|
|
}, { |
138
|
|
|
plugin_url: url // Plugin absolute URL. |
139
|
|
|
}); |
140
|
|
|
if (maximizedmode) { |
141
|
|
|
ed.execCommand('mceMaximizeWindow', w); |
142
|
|
|
} |
143
|
|
|
}); |
144
|
|
|
|
145
|
|
|
// Register VideoRTC button. |
146
|
|
|
ed.addButton('videortc', { |
147
|
|
|
title: 'recordrtc.videortc', |
148
|
|
|
cmd: 'mceVideoRTC', |
149
|
|
|
image: url + '/img/videortc.png' |
150
|
|
|
}); |
151
|
|
|
} |
152
|
|
|
|
153
|
|
|
(function() { |
154
|
|
|
tinyMCE.PluginManager.requireLangPack('recordrtc'); |
155
|
|
|
|
156
|
|
|
tinyMCE.create('tinymce.plugins.RecordRTC', { |
157
|
|
|
/** |
158
|
|
|
* Initializes the plugin, this will be executed after the plugin has been created. |
159
|
|
|
* This call is done before the editor instance has finished it's initialization so use the onInit event |
160
|
|
|
* of the editor instance to intercept that event. |
161
|
|
|
* |
162
|
|
|
* @param {tinyMCE.Editor} ed Editor instance that the plugin is initialized in. |
163
|
|
|
* @param {string} url Absolute URL to where the plugin is located. |
164
|
|
|
*/ |
165
|
|
|
init: function(ed, url) { |
166
|
|
|
// Add commands to the editor. |
167
|
|
|
addForceRepaint(ed); |
168
|
|
|
addMaximizeWindow(ed); |
169
|
|
|
|
170
|
|
|
if (M.editor_tinymce.filepicker_options[ed.id] && |
171
|
|
|
M.editor_tinymce.filepicker_options[ed.id].hasOwnProperty('media')) { |
172
|
|
|
addAudio(ed, url); |
173
|
|
|
addVideo(ed, url); |
174
|
|
|
} |
175
|
|
|
}, |
176
|
|
|
|
177
|
|
|
createControl: function() { |
178
|
|
|
return null; |
179
|
|
|
}, |
180
|
|
|
|
181
|
|
|
/** |
182
|
|
|
* Returns information about the plugin as a name/value array. |
183
|
|
|
* The current keys are longname, author, authorurl, infourl and version. |
184
|
|
|
* |
185
|
|
|
* @return {Object} Name/value array containing information about the plugin. |
186
|
|
|
*/ |
187
|
|
|
getInfo: function() { |
188
|
|
|
return { |
189
|
|
|
longname: 'Moodle TinyMCE RecordRTC plugin', |
190
|
|
|
author: 'Jesus Federico', |
191
|
|
|
infourl: 'http://blindsidenetworks.com', |
192
|
|
|
version: "1.0" |
193
|
|
|
}; |
194
|
|
|
}, |
195
|
|
|
}); |
196
|
|
|
|
197
|
|
|
// Register plugin. |
198
|
|
|
tinyMCE.PluginManager.add('recordrtc', tinyMCE.plugins.RecordRTC); |
199
|
|
|
})(); |
200
|
|
|
|