import $ from 'jquery'
import StudentView from 'js/student_view'
import helper from 'js/url'
export default StudentView.extend({
events: {},
initialize() {},
render() {
return this;
},
postRender() {
return this;
},
});
export default StudentView.extend({
initialize() {
},
render() {
return this;
},
postRender() {
var filterTag = '#block-' + this.model.id;
var $container = this.$el.find('div.blubber-stream');
var assetsBaseUrl = $container.attr('data-assets-base-url');
// hide tags used to filter Blubber threads
var filterHashTags = function () {
jQuery('a.hashtag', $container).filter(function () {
return jQuery(this).text() == filterTag;
}).hide();
};
this.loadStylesheets([ assetsBaseUrl + 'stylesheets/blubberforum.css' ]);
this.loadScripts(
[
assetsBaseUrl + 'javascripts/autoresize.jquery.min.js',
assetsBaseUrl + 'javascripts/blubber.js',
assetsBaseUrl + 'javascripts/formdata.js'
],
function () {
// ensure that the filter tag is set properly before
// creating the new Blubber posting
jQuery(document).ajaxSend(function (event, xhr, options) {
if (options.type != 'POST') {
return;
}
if (options.url.substr(-12) != '/new_posting') {
return;
}
if (options.data.indexOf(filterTag.replace(/#/, '%23')) == -1) {
options.data = options.data + '+' + filterTag.replace(/#/, '%23');
}
});
jQuery.get($container.attr('data-stream-url'), function (data) {
$container.html(data);
$container.removeClass('loading');
// hide filter hash tags of newly created postings
var originalInsertThread = window.STUDIP.Blubber.insertThread;
window.STUDIP.Blubber.insertThread = function (postingId, date, contents) {
originalInsertThread(postingId, date, contents);
filterHashTags();
};
filterHashTags();
var $newPostingInput = jQuery('#new_posting');
$newPostingInput.after('<input type="submit" value="Absenden">');
$newPostingInput.next().click(function () {
var event = jQuery.Event('keydown');
event.keyCode = 13;
event.which = 13;
jQuery('#new_posting').trigger(event);
});
});
}
);
return this;
},
loadStylesheets(stylesheets) {
for (var i = 0; i < stylesheets.length; i++) {
if (document.createStyleSheet) {
document.createStyleSheet(stylesheets[i]);
} else {
var attributes = {
'rel': 'stylesheet',
'href': stylesheets[i],
'type': 'text/css',
'media': 'screen'
};
jQuery('<link>', attributes).appendTo('head');
}
}
},
loadScripts(scripts, callback) {
var remaining = scripts.length;
for (var i = 0; i < scripts.length; i++) {
jQuery.getScript(scripts[i], function () {
remaining--;
if (remaining == 0) {
callback();
}
});
}
}
});
import StudentView from 'js/student_view'
import slick from 'slick-carousel'
export default StudentView.extend({
events: {},
initialize() {
},
render() {
return this;
},
postRender() {
var $autoplay = this.$el.find('input[name="gallery-autoplay"]').val() == 1;
var $autoplaytimer = this.$el.find('input[name="gallery-autoplay-timer"]').val()*1000;
var $hidenav = this.$el.find('input[name="gallery-hidenav"]').val() == 0;
if (!$hidenav) {
this.$el.find(".cw-gallery").addClass("cw-gallery-hidenav");
}
$autoplaytimer == "" ? $autoplaytimer = 2000 : $autoplaytimer = $autoplaytimer;
this.$('.cw-gallery').slick({
arrows: $hidenav,
autoplay: $autoplay,
autoplaySpeed: $autoplaytimer,
infinite: true
});
}
});
export default StudentView.extend({
events: {
'click button[name=reset-exercise]': function (event) {
var $form = this.$(event.target).closest('form'),
view = this,
$exercise_index = $form.find('input[name="exercise_index"]').val(),
$block = this.$el.parent();
if (confirm('Soll die Antwort zurückgesetzt werden?')) {
helper.callHandler(this.model.id, 'exercise_reset', $form.serialize())
.then(function () {
return view.renderServerSide();
}).catch(function () {
console.log('failed to reset the exercise');
}).then(function () {
$block.find('.exercise').hide();
$block.find('#exercise' + $exercise_index).show();
$(window).trigger('resize');
});
}
return false;
},
'click button[name=submit-exercise]': function (event) {
let $form = this.$(event.target).closest('form'),
view = this,
$exercise_index = $form.find('input[name="exercise_index"]').val(),
$block = this.$el.parent();
let files = [];
if (this.$('input[name="upload"]').length > 0) {
files.push(this.$('input[name="upload"]')[0].files[0]); //Files[0] = 1st file
}
if (this.$('input[name="upload[]"]').length > 0) {
files = this.$('input[name="upload[]"]')[0].files;
}
let files_array = [];
let promises = [];
if (files.length > 0) {
$.each(files, function(index, file){
let filePromise = new Promise( resolve => {
let reader = new FileReader();
let file_data = {};
reader.readAsDataURL(file);
reader.onloadend = function(){
file_data.file = reader.result;
file_data.name = file.name;
file_data.size = file.size;
file_data.type = file.type;
files_array.push(file_data);
resolve(reader.result);
};
});
promises.push(filePromise);
});
}
let indexed_array = {};
$.each($form.serializeArray(), function () {
if (this.name.indexOf('[') < 0) {
indexed_array[this.name] = this.value || '';
} else {
let splinter = this.name.split('[');
let name = splinter[0];
let key = splinter[1].split(']')[0];
if (!indexed_array[name]) {
indexed_array[name] = [indexed_array[name]];
}
indexed_array[name][key] = this.value || '';
}
});
Promise.all(promises).then(function() {
indexed_array.files = files_array;
helper.callHandler(view.model.id, 'exercise_submit', indexed_array)
.then(function (resp) {
if(resp.is_nobody) {
var $ex =view.$("#exercise"+resp.exercise_index);
$ex.find(".cw-test-content").first().html('<form class="studip_form"><fieldset><legend>'+resp.title+'</legend>'+resp.solution+'</fieldset></form>');
} else {
return view.renderServerSide();
}
}).then(function () {
$block.find('.exercise').hide();
$block.find('#exercise' + $exercise_index).show();
$block.find('.submitinfo').slideDown(250).delay(1500).slideUp(250);
$(window).trigger('resize');
})
.catch(function () {
console.log('failed to store the solution');
});
});
return false;
},
'click button[name=exercisenav]': function (event) {
var options = $.parseJSON(this.$(event.target).attr('button-data')),
$num = parseInt(options.id),
$block = this.$el.parent();
if (options.direction == 'next') {
$num++;
} else {
$num--;
}
if ($num > parseInt(options.numexes, 10)) {
$num = 1;
}
if ($num < 1) {
$num = parseInt(options.numexes, 10);
}
$block.find('.exercise').hide();
$block.find('#exercise' + $num).show();
$(window).trigger('resize');
},
'click button[name=exercise-hint-button]': function (event) {
$('#exercise-hint-' + this.$(event.target).attr('exercise-data')).toggle('slow');
if (this.$(event.target).hasClass("showing")) {
this.$(event.target).removeClass("showing");
this.$(event.target).html("Hinweis anzeigen");
} else {
this.$(event.target).addClass("showing");
this.$(event.target).html("Hinweis ausblenden");
}
}
},
initialize() {
},
render() {
return this;
},
postRender() {
// TODO this code from vips.js should be called by vips.js
if (this.$('.exercise').hasClass('vips14')) {
this.$('.rh_list').sortable({
item: '> .rh_item',
tolerance: 'pointer',
connectWith: '.rh_list',
update: function(event, ui) {
if (ui.sender) {
ui.item.find('input').val(jQuery(this).data('group'));
}
},
over: function(event, ui) {
jQuery(this).addClass('hover');
},
out: function(event, ui) {
jQuery(this).removeClass('hover');
},
receive: function(event, ui) {
var sortable = jQuery(this);
var container = sortable.closest('tbody').find('.answer_container');
// default answer container can have more items
if (sortable.children().length > 1 && !sortable.is(container)) {
sortable.find('.rh_item').each(function(i) {
if (!ui.item.is(this)) {
jQuery(this).find('input').val(-1);
jQuery(this).detach().appendTo(container)
.css('opacity', 0).animate({opacity: 1});
}
});
}
}
});
} else {
this.$('.rh_list').sortable({
axis: 'y',
containment: 'parent',
item: '> .rh_item',
tolerance: 'pointer',
update: this.rh_move_choice
});
}
},
// TODO this code from vips.js should be called by vips.js
rh_move_choice(event, ui)
{
jQuery(this).children().each(function(i) {
jQuery(this).find('input').val(i);
});
}
});
export default StudentView.extend({
events: {
},
initialize() {
},
postRender() {
var $assorttype = this.$(".assorttype-selection-assort").val();
if (!$assorttype) {return;}
var $div = $("<div>", {class: "assortblock-content"});
this.$el.append($div);
if($assorttype == "tabs") {
var $ul = $("<ul>");
$div.append($ul);
}
try {
var $assortblocks = JSON.parse(this.$(".assortblocks-selection-assort").val());
} catch (e) {
console.log("json parse crashed!");
console.log(e);
return;
}
var $maxheight = 0;
if(!$assortblocks) {return ;}
$.each($assortblocks , function(){
var $id = this["id"];
var $name = this["name"];
if(!$id) {return;}
if(!$name) {$name = $id; }
var $thisblock = $("#block-"+$id);
if ($thisblock.length == 0) { return; }
$thisblock.hide();
if ($maxheight < $thisblock.height()) $maxheight = $thisblock.height();
if ($name == "") {$name = "Block "+$id;}
switch($assorttype){
case "accordion":
$div.append("<h3>"+$name+"</h3><div>"+$thisblock.html()+"</div>");
break;
case "tabs":
$ul.append("<li><a href='#tabs-"+$id+"'>"+$name+"</a></li>");
$div.append("<div id ='tabs-"+$id+"'>"+$thisblock.html()+"</div>");
break;
}
});
switch($assorttype){
case "accordion":
$div.accordion({
heightStyle: "content"
});
break;
case "tabs":
$div.tabs({
heightStyle: "auto"
});
break;
}
$div.find(".controls").hide();
},
render() {
return this;
}
});
export default StudentView.extend({
events: {
'touchstart .cw-canvasblock-canvas' :'touchStart',
'touchmove .cw-canvasblock-canvas': 'touchMove',
'touchend .cw-canvasblock-canvas' :'touchEnd',
'mousedown .cw-canvasblock-canvas' :'mouseDown',
'mousemove .cw-canvasblock-canvas': 'mouseMove',
'mouseup .cw-canvasblock-canvas' :'mouseUp',
'mouseout .cw-canvasblock-canvas' :'mouseUp',
'mouseleave .cw-canvasblock-canvas' :'mouseUp',
'click .cw-canvasblock-reset': 'reset',
'click .cw-canvasblock-color': 'changeColor',
'click .cw-canvasblock-size': 'changeSize',
'click .cw-canvasblock-tool': 'changeTool',
'click .cw-canvasblock-download' : 'downloadImage',
'click .cw-canvasblock-undo': 'undoDraw'
},
initialize() { },
render() {
return this;
},
postRender() {
var $view = this;
var $original_img = $view.$('.cw-canvasblock-original-img');
$view.buildCanvas($original_img);
$original_img.on('load', function(){
$view.buildCanvas($original_img);
});
},
buildCanvas($original_img) {
var $view = this;
var $canvas = $view.$('.cw-canvasblock-canvas');
var img = $original_img[0];
var canvas = $canvas[0];
canvas.width = 860;
if ($original_img[0].height > 0) {
canvas.height = Math.round((canvas.width / $original_img[0].width) * $original_img[0].height);
} else {
canvas.height = 484;
}
$original_img.hide();
this.context = canvas.getContext( '2d' );
this.paint = false;
this.write = false;
this.clickX = new Array();
this.clickY = new Array();
this.clickDrag = new Array();
this.colors = {
'white': 'rgba(255,255,255,1)',
'blue': 'rgba(52,152,219,1)',
'green': 'rgba(46,204,113,1)',
'purple': 'rgba(155,89,182,1)',
'red': 'rgba(231,76,60,1)',
'yellow': 'rgba(254,211,48,1)',
'orange': 'rgba(243,156,18,1)',
'grey': 'rgba(149,165,166,1)',
'darkgrey': 'rgba(52,73,94,1)',
'black': 'rgba(0,0,0,1)'
};
this.$('.cw-canvasblock-color').each(function(index){
let color = $(this).val();
$(this).css('background-color', $view.colors[color]);
});
this.clickColor = new Array();
this.currentColor = this.colors['blue'];
this.$('.cw-canvasblock-color[value="blue"]').addClass('selected-color');
this.sizes = {'small': 2, 'normal': 5, 'large': 8, 'huge': 12};
this.clickSize = new Array();
this.currentSize = this.sizes['normal'];
this.$('.cw-canvasblock-size-normal').addClass('selected-size');
this.tools = {'pen': 'pen', 'text': 'text'}
this.clickTool = new Array();
this.currentTool = this.tools['pen'];
this.$('.cw-canvasblock-tool-pen').addClass('selected-tool');
this.Text = new Array();
$canvas.addClass('cw-canvasblock-tool-selected-'+this.currentTool);
this.loadStoredData();
this.redraw();
},
mouseDown(e) {
if (this.write) {
return;
}
var mouseX = e.offsetX;
var mouseY = e.offsetY;
if(this.currentTool == 'pen') {
this.paint = true;
this.addClick(e.offsetX, e.offsetY, false);
this.redraw();
}
if(this.currentTool == 'text') {
this.write = true;
this.addClick(e.offsetX, e.offsetY, false);
}
},
mouseMove(e) {
if(this.paint){
this.addClick(e.offsetX, e.offsetY, true);
this.redraw();
}
},
mouseUp(e) {
this.paint = false;
},
touchStart(e) {
e.preventDefault();
if (this.write) {
return;
}
var canvas = this.$('.cw-canvasblock-canvas')[0];
var mousePos = this.getTouchPos(canvas, e);
if(this.currentTool == 'pen') {
this.paint = true;
this.addClick(mousePos.x, mousePos.y, false);
this.redraw();
}
if(this.currentTool == 'text') {
this.write = true;
this.addClick(mousePos.x, mousePos.y, false);
}
},
touchMove(e) {
e.preventDefault();
var canvas = this.$('.cw-canvasblock-canvas')[0];
var mousePos = this.getTouchPos(canvas, e);
if(this.paint){
this.addClick(mousePos.x, mousePos.y, true);
this.redraw();
}
},
touchEnd(e) {
this.paint = false;
},
getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
},
preventScrollOnCanvas(e) {
var canvas = this.$('.cw-canvasblock-canvas')[0];
if (e.target == canvas) {
e.preventDefault();
}
},
addClick(x, y, dragging) {
this.clickX.push(x);
this.clickY.push(y);
this.clickDrag.push(dragging);
this.clickColor.push(this.currentColor);
this.clickSize.push(this.currentSize);
this.clickTool.push(this.currentTool);
if (this.currentTool == 'text') {
this.enableTextInput(x, y);
} else {
this.Text.push('');
}
},
loadStoredData() {
var draw = this.$('.cw-canvasblock-stored-draw').val();
if ( draw == '') {
return;
}
draw = JSON.parse(draw);
this.clickX = JSON.parse(draw.clickX);
this.clickY = JSON.parse(draw.clickY);
this.clickDrag = JSON.parse(draw.clickDrag);
this.clickColor = JSON.parse(draw.clickColor);
this.clickSize = JSON.parse(draw.clickSize);
this.clickTool = JSON.parse(draw.clickTool);
this.Text = JSON.parse(draw.Text);
},
redraw() {
var $view = this;
var context = this.context;
var clickX = this.clickX;
var clickY = this.clickY;
var clickDrag = this.clickDrag;
var outlineImage = new Image();
outlineImage.src = this.$('.cw-canvasblock-original-img').attr('src');
var bg = this.$('.cw-canvasblock-bgimage').val();
$(outlineImage).on('load', function(){// chrome needs this!
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.fillStyle = "#ffffff";
context.fillRect(0, 0, context.canvas.width, context.canvas.height); // set background
if (bg == 1) {
context.drawImage(outlineImage, 0, 0, context.canvas.width, context.canvas.height);
}
context.lineJoin = "round";
for(var i=0; i < clickX.length; i++) {
if ($view.clickTool[i] == 'pen') {
context.beginPath();
if(clickDrag[i] && i) {
context.moveTo(clickX[i-1], clickY[i-1]);
} else {
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.strokeStyle = $view.clickColor[i];
context.lineWidth = $view.clickSize[i];
context.stroke();
}
if ($view.clickTool[i] == 'text') {
let fontsize = $view.clickSize[i]*6;
context.font = fontsize+"px Arial";
context.fillStyle = $view.clickColor[i];
context.fillText($view.Text[i], clickX[i], clickY[i]+fontsize);
}
}
});
if (bg == 0) {
$(outlineImage).trigger('load');
}
this.store();
},
store(){
var $view = this;
var draw = {};
draw.clickX = JSON.stringify(this.clickX);
draw.clickY = JSON.stringify(this.clickY);
draw.clickDrag = JSON.stringify(this.clickDrag);
draw.clickColor = JSON.stringify(this.clickColor);
draw.clickSize = JSON.stringify(this.clickSize);
draw.clickTool = JSON.stringify(this.clickTool);
draw.Text = JSON.stringify(this.Text);
draw = JSON.stringify(draw);
helper
.callHandler(this.model.id, 'store_draw', {
canvas_draw: draw
})
.then(
// success
function () {
},
// error
function (error) {
var errorMessage = 'Could not store drawing: '+$.parseJSON(error.responseText).reason;
alert(errorMessage);
console.log(errorMessage, arguments);
});
},
reset() {
this.clickX.length = 0;
this.clickY.length = 0;
this.clickDrag.length = 0;
this.clickColor.length = 0;
this.clickSize.length = 0;
this.clickTool.length = 0;
this.Text.length = 0;
this.$('input.cw-canvasblock-text-input').remove();
this.paint = false;
this.write = false;
this.redraw();
},
changeColor(e) {
if (this.write) {
return;
}
var color = e.target.value;
this.$('.cw-canvasblock-color').removeClass('selected-color');
$(e.target).addClass('selected-color');
this.currentColor = this.colors[color];
},
changeSize(e) {
if (this.write) {
return;
}
var size = e.target.value;
this.$('.cw-canvasblock-size').removeClass('selected-size');
$(e.target).addClass('selected-size');
this.currentSize = this.sizes[size];
},
changeTool(e) {
var tool = e.target.value;
if (this.write) {
this.clickX.pop();
this.clickY.pop();
this.clickDrag.pop();
this.clickColor.pop();
this.clickSize.pop();
this.clickTool.pop();
this.$('input.cw-canvasblock-text-input').remove();
this.write = false;
}
this.$('.cw-canvasblock-tool').removeClass('selected-tool');
$(e.target).addClass('selected-tool');
var $canvas = this.$('.cw-canvasblock-canvas');
this.currentTool = this.tools[tool];
$canvas.removeClass('cw-canvasblock-tool-selected-pen').removeClass('cw-canvasblock-tool-selected-text');
$canvas.addClass('cw-canvasblock-tool-selected-'+this.currentTool);
},
enableTextInput(x, y) {
var $view = this;
this.$('input.cw-canvasblock-text-input').remove();
let fontsize = this.currentSize*6;
$view.$('.cw-canvasblock-canvas').before('<input class="cw-canvasblock-text-input">');
var $input = this.$('input.cw-canvasblock-text-input');
$input.ready(function(){
$input.focus();
});
$input.css('position', 'absolute');
$input.css('top', (this.$('canvas')[0].offsetTop + y) + 'px');
$input.css('left', x +'px');
$input.css('line-height', fontsize +'px');
$input.css('font-size', fontsize +'px');
$input.css('max-width', '300px');
$input[0].addEventListener('keyup', function(e){
if (e.defaultPrevented) {
return;
}
var key = e.key || e.keyCode;
if (key === 'Enter' || key === 13) {
$view.Text.push($input.val());
$view.$('input.cw-canvasblock-text-input').remove();
$view.write = false;
$view.redraw();
}
if (key === 'Escape' || key === 'Esc' || key === 27) {
$view.clickX.pop();
$view.clickY.pop();
$view.clickDrag.pop();
$view.clickColor.pop();
$view.clickSize.pop();
$view.clickTool.pop();
$view.$('input.cw-canvasblock-text-input').remove();
$view.write = false;
}
}, false);
},
downloadImage() {
var image = this.context.canvas.toDataURL();
$("<a/>", {
"class": "cw-canvasblock-download-link",
"text": 'download',
"title": 'download',
"href": image,
"download" : "cw-img.png"
}).appendTo(this.$el);
var link = this.$('.cw-canvasblock-download-link');
link[0].click();
link.remove();
},
undoDraw() {
var dragging = this.clickDrag[this.clickDrag.length -1];
this.clickX.pop();
this.clickY.pop();
this.clickDrag.pop();
this.clickColor.pop();
this.clickSize.pop();
this.clickTool.pop();
if (this.write) {
this.$('input.cw-canvasblock-text-input').remove();
this.write = false;
} else {
this.Text.pop('');
}
if (dragging){
this.undoDraw();
}
this.redraw();
}
});
import StudentView from 'js/student_view'
export default StudentView.extend({
initialize() { },
render() {
return this;
}
});
export default StudentView.extend({
events: {},
initialize() {},
render() {
return this;
},
postRender() {
if (this.$(".cw-chart-stored-content").val() != "") {
this.buildChart();
}
return this;
},
buildChart() {
var $view = this;
var ctx = $view.$('.cw-chartblock-canvas').get(0).getContext('2d');
var $type = $view.$(".cw-chart-stored-type").val();
var $content = $view.$(".cw-chart-stored-content").val();
var json = JSON.parse($content);
var $labels = [];
var $data = [];
var $backgroundColor = [];
var $borderColor = [];
$.each(json, function(i){
$labels.push(json[i].label);
$data.push(json[i].value);
$backgroundColor.push('rgba('+$view.getColor(json[i].color)+', 0.6)' );
$borderColor.push('rgba('+$view.getColor(json[i].color)+', 1.0)' );
});
var $label = $view.$('.cw-chart-stored-label').val();
if (($type == 'bar') || ($type == 'horizontalBar')) {
var myChart = new Chart(ctx, {
type: $type,
data: {
labels: $labels,
datasets: [{
label: $label,
data: $data,
backgroundColor: $backgroundColor,
borderColor: $borderColor,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
legend: {
display: false
}
}
});
}
if (($type == 'pie') || ($type == 'doughnut') || ($type == 'polarArea')){
var myChart = new Chart(ctx, {
type: $type,
data: {
labels: $labels,
datasets: [{
data: $data,
backgroundColor: $backgroundColor,
borderWidth: 1
}]
},
options: {}
});
}
if ($type == 'line') {
var myChart = new Chart(ctx, {
type: $type,
data: {
labels: $labels,
datasets: [{
label: $label,
data: $data,
fill: false,
borderWidth: 2,
pointBackgroundColor: $borderColor
}]
},
options: {}
});
}
},
getColor($color) {
switch($color) {
case 'red':
return '192, 57, 43';
case 'blue':
return '52, 152, 219';
case 'yellow':
return '241, 196, 15';
case 'green':
return '46, 204, 113';
case 'purple':
return '155, 89, 182';
case 'orange':
return '230, 126, 34';
case 'turquoise':
return '26, 188, 156';
case 'grey':
return '52, 73, 94';
case 'lightgrey':
return '149, 165, 166';
case 'black':
return '0, 0, 0';
}
}
});
import jQuery from 'jquery'
import StudentView from 'js/student_view'
import hljs from 'highlight.js'
export default StudentView.extend({
events: {},
initialize() {
},
render() {
return this;
},
postRender() {
hljs.highlightBlock(this.$('.code-content > pre > code')[0]);
}
});
export default StudentView.extend({
events: {
'click button[name=play]': 'playVideo',
'click button[name=stop]': 'stopVideo',
'click .cw-iav-stop-button-continue': 'continueVideo',
'click .cw-iav-test-button-continue': 'continueVideo',
'click button[name=submit-exercise]': 'submitExercise'
},
initialize() {},
render() {
return this;
},
postRender() {
var $view = this,
$player_element = $view.$('.cw-iav-player').get(0);
if (typeof $player_element !== 'undefined') {
if ($player_element.readyState >= 2) { //if firefox
$view.setupVideo();
} else { // else may be chrome
$player_element.addEventListener('loadedmetadata', function () {
$view.setupVideo();
}, false);
}
// TODO this code from vips.js should be called by vips.js
this.$('.rh_list').sortable({
axis: 'y',
containment: 'parent',
item: '> .rh_item',
tolerance: 'pointer',
update: this.rh_move_choice
});
}
},
setupVideo() {
var $view = this,
$player = $view.$('.cw-iav-player'),
$player_element = $player.get(0),
$duration = parseInt($player_element.duration),
$playbutton = $view.$('.cw-iav-playbutton'),
$range = $view.$('.cw-iav-range'),
$time = $view.$('.cw-iav-time');
if (isNaN($duration)) {
$duration = 0;
}
$time.html($view.displayTimer(0, $duration));
$range.slider({
range: 'max',
min: 0,
max: $duration,
value: 0,
slide( event, ui ) {
$player.prop('currentTime',ui.value);
$time.html($view.displayTimer(ui.value, $duration));
}
});
$player.find('source').each(function () {
var $source = $(this).prop('src');
if ($source.indexOf('mp4') > -1) {
$(this).prop('type', 'audio/mp4')
}
if ($source.indexOf('ogg') > -1) {
$(this).prop('type', 'audio/ogg')
}
if ($source.indexOf('webm') > -1) {
$(this).prop('type', 'audio/webm')
}
});
var overlay_json = $view.$('.overlay-json').val();
if (overlay_json != "") {
overlay_json = JSON.parse(overlay_json);
$view.addOverlays(overlay_json);
}
var stop_json = $view.$('.stop-json').val();
if (stop_json != "") {
stop_json = JSON.parse(stop_json);
$view.addStops(stop_json);
}
var test_json = $view.$('.test-json').val();
if (test_json != "") {
test_json = JSON.parse(test_json);
$view.setupTests(test_json);
}
$player_element.addEventListener('timeupdate',function () {
var $current = parseInt($player.prop('currentTime'));
try {
$range.slider( 'value', $current );
}
catch(err) {
}
$time.html($view.displayTimer($current, $duration));
$view.interactionEventOverlay($current, overlay_json);
$view.interactionEventStopAndTest($current);
if ($current == $duration) {
$view.onWatched();
}
}, false);
$player_element.addEventListener('ended', function () {
$playbutton.removeClass('playing');
$player.prop('currentTime', 0);
}, false);
},
displayTimer($current, $duration) {
if (isNaN($duration) || ($duration == 0)) {
return '';
} else {
return this.seconds2time($current) + '/' + this.seconds2time($duration);
}
},
seconds2time(seconds) {
var hours = Math.floor(seconds / 3600),
minutes = Math.floor((seconds - (hours * 3600)) / 60),
time = '';
seconds = seconds - (hours * 3600) - (minutes * 60);
if (hours != 0) {
time = hours + ':';
}
if (minutes != 0 || time !== '') {
minutes = (minutes < 10 && time !== '') ? '0' + minutes : String(minutes);
time += minutes + ':';
}
if (time === '') {
time = (seconds < 10) ? '0:0' + seconds : '0:' + seconds;
}
else {
time += (seconds < 10) ? '0' + seconds : String(seconds);
}
return time;
},
interactionEventOverlay($time, overlay_json) {
if (overlay_json == "") { return; }
var $view = this;
for (var i in overlay_json) {
var $overlay = $view.$('.cw-iav-overlay-content');
if (($time >= overlay_json[i].start ) && ($time <= overlay_json[i].end)) {
$overlay.filter('[data-overlayid='+overlay_json[i].id+']').show('fade', 800);
} else {
$overlay.filter('[data-overlayid='+overlay_json[i].id+']').hide('fade', 800);
}
}
},
interactionEventStopAndTest($time) {
var $view = this;
var stop_json = $view.$('.stop-json').val();
if (stop_json != "") {
stop_json = JSON.parse(stop_json);
}
var test_json = $view.$('.test-json').val();
if (test_json != "") {
test_json = JSON.parse(test_json);
}
if ((stop_json == "") && (test_json == "")){ return; }
var $range = $view.$('.cw-iav-range'),
$player = $view.$('.cw-iav-player'),
$playbutton = $view.$('.cw-iav-playbutton'),
interactionevents = [];
for (var i in stop_json) {
if (stop_json[i].solved == true) {
continue;
}
if ($time >= stop_json[i].moment){
interactionevents.push({"type": "stop", "id": stop_json[i].id , "moment": stop_json[i].moment});
}
}
for (var i in test_json) {
if ((test_json[i].use_test == false)||(test_json[i].solved == true)) {
continue;
}
if ($time >= test_json[i].moment){
interactionevents.push({"type": "test", "id": test_json[i].test_id , "moment": test_json[i].moment});
}
}
if (interactionevents.length > 0) {
interactionevents.sort(function (a, b) {
return a.moment - b.moment;
});
let interaction = false;
if (interactionevents[0].type == 'stop') {
let $stop = $view.$('.cw-iav-stop-content[data-stopid='+interactionevents[0].id+']')
if ($stop.is(':hidden')) {
$stop.show('fade', 800);
interaction = true;
}
}
if (interactionevents[0].type == 'test') {
let $test = $view.$('.cw-iav-test-content[data-testid='+interactionevents[0].id+']');
if ($test.is(':hidden')) {
$test.show('fade', 800);
$(window).trigger('resize');
interaction = true;
}
}
if (interaction) {
$player.prop('currentTime', interactionevents[0].moment);
try {$range.slider('disable');}
catch(err) {}
$player.trigger('pause');
$playbutton.removeClass('playing').hide();
$playbutton.removeClass('playing').hide();
}
}
},
addOverlays(overlay_json) {
var $view = this;
var $overlay_wrapper = $view.$('.cw-iav-overlay-wrapper');
var html = "";
for (var i in overlay_json) {
var $item = $view.$('.cw-iav-overlay-content-default').clone();
$item.attr('data-overlayid', overlay_json[i].id);
$item.find('.cw-iav-overlay-content-title').text(overlay_json[i].title);
$item.find('.cw-iav-overlay-content-text').text(overlay_json[i].content);
$item.removeClass('cw-iav-overlay-content-default').addClass('overlay-content-'+overlay_json[i].id).addClass(overlay_json[i].position).addClass(overlay_json[i].type).addClass(overlay_json[i].color);
$($item).appendTo($overlay_wrapper);
}
$view.$('.cw-iav-overlay-content.overlay-content-default').remove();
$view.$('.cw-iav-overlay-content').hide();
},
addStops(stop_json) {
var $view = this;
var $stop_wrapper = $view.$('.cw-iav-stop-wrapper');
var html = "";
for (var i in stop_json) {
var $item = $view.$('.cw-iav-stop-content-default').clone();
$item.attr('data-stopid', stop_json[i].id);
$item.attr('data-stop-moment', stop_json[i].moment);
$item.find('.cw-iav-stop-content-title').text(stop_json[i].title);
$item.find('.cw-iav-stop-content-text').text(stop_json[i].content);
$item.find('.cw-iav-stop-button-continue').attr('data-stopid', stop_json[i].id);
$item.removeClass('cw-iav-stop-content-default').addClass('stop-content-'+stop_json[i].id).addClass(stop_json[i].type).addClass(stop_json[i].position).addClass(stop_json[i].color);
$($item).appendTo($stop_wrapper);
}
$view.$('.cw-iav-stop-content.cw-iav-stop-content-default').remove();
$view.$('.cw-iav-stop-content').hide();
},
setupTests(test_json) {
for (var i in test_json) {
let $test = this.$('.cw-iav-test-content[data-testid="'+test_json[i].test_id+'"]');
$test.attr('data-test-moment', test_json[i].moment);
}
},
playVideo() {
var $view = this,
$player = $view.$('.cw-iav-player'),
$player_element = $player[0],
$range = $view.$('.cw-iav-range'),
$playbutton = $view.$('.cw-iav-playbutton');
if ($player_element.paused) {
$player.trigger('play');
$playbutton.addClass('playing');
} else {
$player.trigger('pause');
$playbutton.removeClass('playing');
}
},
stopVideo() {
var $view = this,
$player = $view.$('.cw-iav-player'),
$playbutton = $view.$('.cw-iav-playbutton'),
$range = $view.$('.cw-iav-range');
$player.trigger('pause');
$range.slider('enable');
$view.$('.cw-iav-overlay-content').hide();
$view.$('.cw-iav-stop-content').hide();
$player.prop('currentTime', 0);
$playbutton.removeClass('playing').show();
if ($view.$('.stop-json').val() != "") {
var stop_json = JSON.parse($view.$('.stop-json').val());
for (var i = 0; i < stop_json.length; i++) {
stop_json[i].solved = false;
}
$view.$('.stop-json').val(JSON.stringify(stop_json));
}
},
continueVideo(event) {
var $view = this,
$player = $view.$('.cw-iav-player'),
$playbutton = $view.$('.cw-iav-playbutton'),
$range = $view.$('.cw-iav-range'),
$continue_button = this.$(event.target),
item_id = '';
$player.trigger('play');
$playbutton.addClass('playing').show();
$range.slider('enable');
if ($continue_button.hasClass('cw-iav-stop-button-continue')) {
item_id = event.currentTarget.attributes.getNamedItem('data-stopid').value;
if ($view.$('.stop-json').val() != "") {
var stop_json = JSON.parse($view.$('.stop-json').val());
stop_json[item_id].solved = true;
$continue_button.closest('.cw-iav-stop-content').addClass('cw-iav-stop-solved');
$view.$('.stop-json').val(JSON.stringify(stop_json));
}
}
if ($continue_button.hasClass('cw-iav-test-button-continue')) {
item_id = event.currentTarget.attributes.getNamedItem('data-testid').value;
if ($view.$('.test-json').val() != "") {
var test_json = JSON.parse($view.$('.test-json').val());
$.each(test_json, function(i, item){
if (item.test_id == item_id){
item.solved = true;
$continue_button.closest('.cw-iav-test-content').addClass('cw-iav-test-solved');
}
});
$view.$('.test-json').val(JSON.stringify(test_json));
}
}
$view.$('.cw-iav-stop-content').hide('fade', 800);
$view.$('.cw-iav-test-content').hide('fade', 800);
},
submitExercise(event) {
var $form = this.$(event.target).closest('form'),
view = this,
top = document.body.scrollTop,
$player = view.$('.cw-iav-player'),
$current = $player.prop('currentTime'),
$test_json = view.$('.test-json').val(),
$stop_json = view.$('.stop-json').val(),
$block = this.$el.parent();
helper.callHandler(this.model.id, 'exercise_submit', $form.serialize())
.then(function (resp) {
return view.renderServerSide();
}).then(function () {
view.$('.test-json').val($test_json);
view.$('.stop-json').val($stop_json);
$player.prop('currentTime', $current);
document.body.scrollTop = top;
})
.catch(function () {
console.log('failed to store the solution');
});
return false;
},
onWatched() {
helper
.callHandler(this.model.id, 'watched', {})
.catch(function (error) {
var errorMessage = 'Could not update the block: ' + $.parseJSON(error.responseText).reason;
alert(errorMessage);
console.log(errorMessage, arguments);
});
},
// TODO this code from vips.js should be called by vips.js
rh_move_choice(event, ui)
{
jQuery(this).children().each(function(i) {
jQuery(this).find('input').val(i);
});
}
});