parent
067f5556eb
commit
4661735f69
After Width: | Height: | Size: 1016 B |
@ -0,0 +1,35 @@ |
|||||||
|
CKEDITOR.plugins.add('glossary', |
||||||
|
{ |
||||||
|
init: function(editor) |
||||||
|
{ |
||||||
|
var pluginName = 'glossary'; |
||||||
|
editor.addCommand( |
||||||
|
pluginName, |
||||||
|
{ |
||||||
|
exec: function(editor) |
||||||
|
{ |
||||||
|
var selectedText = editor.getSelection().getSelectedText(); |
||||||
|
if (selectedText !== '') { |
||||||
|
var spanElement = new CKEDITOR.dom.element("span"); |
||||||
|
spanElement.setAttributes({ |
||||||
|
class: 'glossary', |
||||||
|
style: 'color: rgb(0, 151, 74);' + |
||||||
|
'cursor: pointer;' + |
||||||
|
'font-weight: bold;' |
||||||
|
}); |
||||||
|
spanElement.setText(selectedText); |
||||||
|
editor.insertElement(spanElement); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
editor.ui.addButton( |
||||||
|
'Glossary', |
||||||
|
{ |
||||||
|
label: 'Glossary', |
||||||
|
command: pluginName, |
||||||
|
icon: this.path + 'images/glossary.gif' |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
}); |
@ -0,0 +1,388 @@ |
|||||||
|
/** |
||||||
|
* Plugin created by BeezNest Latino S.A.C |
||||||
|
* |
||||||
|
* For licensing terms, see /license.txt |
||||||
|
* |
||||||
|
* This plugin allows set quizzes markers in video with mediaelement. |
||||||
|
*/ |
||||||
|
|
||||||
|
CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) { |
||||||
|
var lang = editor.lang.qmarkersrolls, |
||||||
|
player = null, |
||||||
|
pgbProgress = null, |
||||||
|
fakeImage = null, |
||||||
|
videoNode = null, |
||||||
|
quizzesList = [], |
||||||
|
currentMarkers = [], |
||||||
|
colorDialog = editor.plugins.colordialog; |
||||||
|
|
||||||
|
function initPlayer(selectedElement) { |
||||||
|
fakeImage = selectedElement; |
||||||
|
|
||||||
|
if (!fakeImage || |
||||||
|
!fakeImage.data( 'cke-real-element-type' ) || |
||||||
|
fakeImage.data( 'cke-real-element-type' ) != 'video' |
||||||
|
) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
videoNode = editor.restoreRealElement(fakeImage); |
||||||
|
|
||||||
|
var sourcesList = videoNode.getElementsByTag('source', ''); |
||||||
|
|
||||||
|
if (sourcesList.count() === 0) { |
||||||
|
sourcesList = videoNode.getElementsByTag('source', 'cke'); |
||||||
|
} |
||||||
|
|
||||||
|
if (sourcesList.count() === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var sourceNode = sourcesList.getItem(0); |
||||||
|
|
||||||
|
if (!sourceNode) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
pgbProgress = document.getElementById('ck-qmr-progress'); |
||||||
|
pgbProgress.value = 0; |
||||||
|
pgbProgress.min = 0; |
||||||
|
pgbProgress.step = 1; |
||||||
|
pgbProgress.onchange = function () { |
||||||
|
player.currentTime = this.value; |
||||||
|
|
||||||
|
document.getElementById('ck-qmr-current-time').textContent = encodeTime(this.value); |
||||||
|
}; |
||||||
|
|
||||||
|
var playerContainer = document.getElementById('ck-qmr-player-container'); |
||||||
|
playerContainer.innerHTML = ''; |
||||||
|
|
||||||
|
player = document.createElement('video'); |
||||||
|
player.className = 'skip'; |
||||||
|
player.controls = false; |
||||||
|
player.style.maxWidth = '100%'; |
||||||
|
player.style.minWidth = '100%'; |
||||||
|
player.onloadedmetadata = function () { |
||||||
|
pgbProgress.max = Math.floor(player.duration); |
||||||
|
playerContainer.appendChild(player); |
||||||
|
}; |
||||||
|
player.src = sourceNode.getAttribute('src'); |
||||||
|
} |
||||||
|
|
||||||
|
function decodeTime(time) { |
||||||
|
var parts = time.split(':'); |
||||||
|
|
||||||
|
if (parts.length != 3) { |
||||||
|
return 0; |
||||||
|
} |
||||||
|
|
||||||
|
var hours = parseInt(parts[0]), |
||||||
|
minutes = parseInt(parts[1]), |
||||||
|
seconds = parseInt(parts[2]); |
||||||
|
|
||||||
|
if (seconds > 59 || minutes > 59) { |
||||||
|
return 0; |
||||||
|
} |
||||||
|
|
||||||
|
hours *= 60 * 60; |
||||||
|
minutes *= 60; |
||||||
|
|
||||||
|
return hours + minutes + seconds; |
||||||
|
} |
||||||
|
|
||||||
|
function encodeTime(time) { |
||||||
|
if (time < 60) { |
||||||
|
if (time < 10) { |
||||||
|
time = '0' + time; |
||||||
|
} |
||||||
|
|
||||||
|
return '00:00:' + time; |
||||||
|
} |
||||||
|
|
||||||
|
var hours = 0, |
||||||
|
minutes = Math.floor(time / 60), |
||||||
|
seconds = Math.floor(time % 60); |
||||||
|
|
||||||
|
if (minutes > 60) { |
||||||
|
hours = Math.floor(minutes / 60); |
||||||
|
minutes = minutes - (hours * 60); |
||||||
|
} |
||||||
|
|
||||||
|
return (hours < 10 ? '0' + hours : hours) + ':' |
||||||
|
+ (minutes < 10 ? '0' + minutes : minutes) + ':' |
||||||
|
+ (seconds < 10 ? '0' + seconds : seconds); |
||||||
|
} |
||||||
|
|
||||||
|
function displayQuizzes() { |
||||||
|
var container = document.getElementById('ck-qmr-quizzes-container'); |
||||||
|
container.innerHTML = ''; |
||||||
|
|
||||||
|
quizzesList.forEach(function (quiz) { |
||||||
|
var alreadyAdded = false; |
||||||
|
|
||||||
|
currentMarkers.forEach(function (markerRoll) { |
||||||
|
if (quiz.id == markerRoll[1]) { |
||||||
|
alreadyAdded = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
if (alreadyAdded) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var label = document.createElement('label'); |
||||||
|
label.textContent = quiz.title; |
||||||
|
label.htmlFor = 'ck-qmr-quiz-' + quiz.id; |
||||||
|
label.style.verticalAlign = 'super'; |
||||||
|
|
||||||
|
var radio = document.createElement('input'); |
||||||
|
radio.type = 'radio'; |
||||||
|
radio.name = 'ck_qmr_quiz'; |
||||||
|
radio.id = 'ck-qmr-quiz-' + quiz.id; |
||||||
|
radio.value = quiz.id; |
||||||
|
|
||||||
|
var row = document.createElement('div'); |
||||||
|
row.appendChild(radio); |
||||||
|
row.appendChild(label); |
||||||
|
|
||||||
|
container.appendChild(row); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function displayCurrentMarkersList() { |
||||||
|
var quizzesAddedContainer = document.getElementById('ck-qmr-quizzes-added-container'); |
||||||
|
quizzesAddedContainer.innerHTML = ''; |
||||||
|
|
||||||
|
currentMarkers.forEach(function (markerRoll) { |
||||||
|
var makerForQuiz = null; |
||||||
|
|
||||||
|
quizzesList.forEach(function (quiz) { |
||||||
|
if (markerRoll[1] == quiz.id) { |
||||||
|
makerForQuiz = quiz; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
if (!makerForQuiz) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var btnRemove = document.createElement('a'); |
||||||
|
btnRemove.className = 'cke_dialog_ui_button'; |
||||||
|
btnRemove.type = 'button'; |
||||||
|
btnRemove.innerHTML = '<span class="cke_dialog_ui_button">' + lang.delete + '</span>'; |
||||||
|
btnRemove.setAttribute('role', 'button'); |
||||||
|
btnRemove.addEventListener('click', function (e) { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
|
||||||
|
for (var i = 0; i < currentMarkers.length; i++) { |
||||||
|
if (currentMarkers[i][1] == markerRoll[1]) { |
||||||
|
currentMarkers.splice(i, 1); |
||||||
|
i--; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
displayQuizzes(); |
||||||
|
displayCurrentMarkersList(); |
||||||
|
}, false); |
||||||
|
|
||||||
|
var divMarker = document.createElement('span'); |
||||||
|
divMarker.innerHTML = ' <strong>' + encodeTime(markerRoll[0]) + '</strong> — ' |
||||||
|
+ makerForQuiz.title; |
||||||
|
|
||||||
|
var pMarker = document.createElement('p'); |
||||||
|
pMarker.appendChild(btnRemove); |
||||||
|
pMarker.appendChild(divMarker); |
||||||
|
|
||||||
|
quizzesAddedContainer.appendChild(pMarker); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
title: lang.dialogTitle, |
||||||
|
minWidth: 400, |
||||||
|
minHeight: 500, |
||||||
|
resizable: CKEDITOR.DIALOG_RESIZE_NONE, |
||||||
|
contents: [ |
||||||
|
{ |
||||||
|
id: 'tab-markers', |
||||||
|
label: lang.markers, |
||||||
|
elements: [ |
||||||
|
{ |
||||||
|
type: 'vbox', |
||||||
|
width: '100%', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
type: 'html', |
||||||
|
id: 'html', |
||||||
|
html: '<div id="ck-qmr-player-container"></div>' |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'hbox', |
||||||
|
widths: ['100%', '200px'], |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
type: 'html', |
||||||
|
html: '<input type="range" min="0" step="1" id="ck-qmr-progress">' |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'html', |
||||||
|
title: 'Current Time', |
||||||
|
html: '<span id="ck-qmr-current-time">00:00:00</span>' |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'hbox', |
||||||
|
widths: ['100%', '200px'], |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
type: 'html', |
||||||
|
html: lang.embeddableQuizzes + ' ' |
||||||
|
+ '<div id="ck-qmr-quizzes-container" ' |
||||||
|
+ 'style="max-height: 110px; overflow: hidden auto;"></div>' |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'button', |
||||||
|
id: 'btn-assign', |
||||||
|
label: lang.assignQuiz, |
||||||
|
title: lang.assignQuiz, |
||||||
|
onClick: function () { |
||||||
|
var radioQuizzes = document.getElementsByName('ck_qmr_quiz'), |
||||||
|
selected = null; |
||||||
|
|
||||||
|
radioQuizzes.forEach(function (radio) { |
||||||
|
if (!radio.checked) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
selected = radio; |
||||||
|
}); |
||||||
|
|
||||||
|
if (!selected) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
currentMarkers.push([ |
||||||
|
parseInt(pgbProgress.value), |
||||||
|
parseInt(selected.value) |
||||||
|
]); |
||||||
|
|
||||||
|
displayCurrentMarkersList(); |
||||||
|
|
||||||
|
selected.parentElement.remove(); |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'html', |
||||||
|
html: lang.currentMarkers + ' ' |
||||||
|
+ '<div id="ck-qmr-quizzes-added-container" ' |
||||||
|
+ 'style="max-height: 140px; overflow: hidden auto;"></div>' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'tab-settings', |
||||||
|
label: lang.settings, |
||||||
|
elements: [ |
||||||
|
{ |
||||||
|
type: 'hbox', |
||||||
|
widths: ['200px', '100%'], |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
type: 'text', |
||||||
|
id: 'markerColor', |
||||||
|
label: lang.markerColor, |
||||||
|
'default': '', |
||||||
|
setup: function (widget) { |
||||||
|
this.setValue(widget.getAttribute('data-q-markersrolls-color')); |
||||||
|
}, |
||||||
|
commit: function (widget) { |
||||||
|
widget.setAttribute('data-q-markersrolls-color', this.getValue()); |
||||||
|
} |
||||||
|
}, |
||||||
|
colorDialog ? { |
||||||
|
type: 'button', |
||||||
|
id: 'markerColorChoose', |
||||||
|
'class': 'colorChooser', |
||||||
|
label: lang.choose, |
||||||
|
onLoad: function() { |
||||||
|
// Stick the element to the bottom
|
||||||
|
this.getElement() |
||||||
|
.getParent() |
||||||
|
.setStyle('vertical-align', 'bottom'); |
||||||
|
}, |
||||||
|
onClick: function () { |
||||||
|
editor.getColorFromDialog(function (color) { |
||||||
|
if (color) { |
||||||
|
this.getDialog() |
||||||
|
.getContentElement('tab-settings', 'markerColor') |
||||||
|
.setValue(color); |
||||||
|
} |
||||||
|
|
||||||
|
this.focus(); |
||||||
|
}, this) |
||||||
|
} |
||||||
|
} : { |
||||||
|
type: 'html', |
||||||
|
html: ' ' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
], |
||||||
|
onShow: function () { |
||||||
|
var dialog = this; |
||||||
|
|
||||||
|
document.getElementById('ck-qmr-quizzes-container').innerHTML = ''; |
||||||
|
|
||||||
|
initPlayer( |
||||||
|
dialog.getSelectedElement() |
||||||
|
); |
||||||
|
|
||||||
|
currentMarkers = JSON.parse( |
||||||
|
videoNode.getAttribute('data-q-markersrolls') || '[]' |
||||||
|
); |
||||||
|
|
||||||
|
CKEDITOR.ajax.load( |
||||||
|
editor.config.qMarkersRollsUrl, |
||||||
|
function (response) { |
||||||
|
quizzesList = JSON.parse(response); |
||||||
|
|
||||||
|
displayQuizzes(); |
||||||
|
|
||||||
|
displayCurrentMarkersList(); |
||||||
|
|
||||||
|
dialog.setupContent(videoNode); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
onHide: function () { |
||||||
|
player = null; |
||||||
|
pgbProgress = null; |
||||||
|
}, |
||||||
|
onOk: function () { |
||||||
|
if (!fakeImage) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.commitContent(videoNode); |
||||||
|
|
||||||
|
videoNode.setAttribute('data-q-markersrolls', JSON.stringify(currentMarkers)); |
||||||
|
|
||||||
|
var newFakeImage = editor.createFakeElement(videoNode, 'cke_video', 'video', false); |
||||||
|
newFakeImage.setStyles({ |
||||||
|
width: fakeImage.getStyle('width'), |
||||||
|
height: fakeImage.getStyle('height') |
||||||
|
}); |
||||||
|
|
||||||
|
newFakeImage.replace(fakeImage); |
||||||
|
editor.getSelection().selectElement(newFakeImage); |
||||||
|
} |
||||||
|
}; |
||||||
|
}); |
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,19 @@ |
|||||||
|
/** |
||||||
|
* Plugin created by BeezNest Latino S.A.C |
||||||
|
* |
||||||
|
* For licensing terms, see /license.txt |
||||||
|
* |
||||||
|
* This plugin allows set quizzes markers in video with mediaelement. |
||||||
|
*/ |
||||||
|
CKEDITOR.plugins.setLang('qmarkersrolls', 'en', { |
||||||
|
dialogTitle: 'Quizzes Marker Rolls', |
||||||
|
setQuizMarkersRolls: 'Set Quiz Markers Rolls', |
||||||
|
delete: 'Delete', |
||||||
|
markers: 'Markers', |
||||||
|
settings: 'Settings', |
||||||
|
embeddableQuizzes: 'Embeddable quizzes', |
||||||
|
assignQuiz: 'Assign quiz', |
||||||
|
currentMarkers: 'Current Markers', |
||||||
|
markerColor: 'Marker color', |
||||||
|
choose: 'Choose' |
||||||
|
}); |
@ -0,0 +1,20 @@ |
|||||||
|
/** |
||||||
|
* Plugin created by BeezNest Latino S.A.C |
||||||
|
* |
||||||
|
* For licensing terms, see /license.txt |
||||||
|
* |
||||||
|
* This plugin allows set quizzes markers in video with mediaelement. |
||||||
|
*/ |
||||||
|
|
||||||
|
CKEDITOR.plugins.setLang('qmarkersrolls', 'es', { |
||||||
|
dialogTitle: 'Marcadores de exámenes', |
||||||
|
setQuizMarkersRolls: 'Agregar marcadores de exámenes', |
||||||
|
delete: 'Eliminar', |
||||||
|
markers: 'Marcadores', |
||||||
|
settings: 'Configuración', |
||||||
|
embeddableQuizzes: 'Exámenes integrables', |
||||||
|
assignQuiz: 'Asignar examen', |
||||||
|
currentMarkers: 'Marcadores actuales', |
||||||
|
markerColor: 'Color del marcador', |
||||||
|
choose: 'Elegir' |
||||||
|
}); |
@ -0,0 +1,51 @@ |
|||||||
|
/** |
||||||
|
* Plugin created by BeezNest Latino S.A.C |
||||||
|
* |
||||||
|
* For licensing terms, see /license.txt |
||||||
|
* |
||||||
|
* This plugin allows set quizzes markers in video with mediaelement. |
||||||
|
*/ |
||||||
|
|
||||||
|
(function () { |
||||||
|
|
||||||
|
CKEDITOR.plugins.add('qmarkersrolls', { |
||||||
|
lang: [ |
||||||
|
'en', |
||||||
|
'es', |
||||||
|
], |
||||||
|
requires: ['video'], |
||||||
|
init: function (editor) { |
||||||
|
var lang = editor.lang.qmarkersrolls; |
||||||
|
|
||||||
|
editor |
||||||
|
.addCommand( |
||||||
|
'qmarkersrolls', |
||||||
|
new CKEDITOR.dialogCommand('qMarkersrollsDialog') |
||||||
|
); |
||||||
|
|
||||||
|
if (editor.contextMenu) { |
||||||
|
editor.addMenuGroup('qMarkersRollsGroup'); |
||||||
|
editor.addMenuItem('qMarkersRollsItem', { |
||||||
|
label: lang.setQuizMarkersRolls, |
||||||
|
icon: this.path + 'images/icon.png', |
||||||
|
command: 'qmarkersrolls', |
||||||
|
group: 'qMarkersRollsGroup' |
||||||
|
}); |
||||||
|
editor.contextMenu.addListener(function (element) { |
||||||
|
if (element && |
||||||
|
element.is('img') && |
||||||
|
!element.isReadOnly() && |
||||||
|
element.data('cke-real-element-type') == 'video' |
||||||
|
) { |
||||||
|
return { |
||||||
|
qMarkersRollsItem: CKEDITOR.TRISTATE_OFF |
||||||
|
}; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
CKEDITOR.dialog.add('qMarkersrollsDialog', this.path + 'dialogs/qmarkersrolls.js'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
})(); |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in new issue