').addClass('col-xs-6 col-sm-4 col-md-3 col-lg-2').get(0);
this.model = polygonModel;
selectedPolygonIndex = this.model.id;
var self = this,
$el = $(this.el);
this.render = function () {
var type = this.model instanceof OarModel ? 'oar' : 'delineation';
var template = '\n\
\n\
\n\
\n\
' + (type === 'delineation' ? lang.Delineation : lang.Oar) + '\n\
\n\
\n\
\n\
';
$el.html(template);
$el.find('select')
.on('focus', function () {
$('.input-group').removeClass('active');
$el.find('.input-group').addClass('active');
selectedPolygonIndex = self.model.id;
});
return this;
};
};
var ContextMenu = function () {
this.el = $('
', {
id: 'hotspot-context-menu'
}).addClass('dropdown-menu').get(0);
var self = this,
$el = $(this.el);
this.onHide = function (callback) {
$(this).on('hide', function () {
callback();
});
};
this.render = function () {
var template = '\n\
- \n\
' + lang.CloseDelineation + '\n\
\n\
';
$el.html(template);
$el.find('a')
.on('click', function (e) {
e.preventDefault();
$(self).trigger('hide');
$el.hide();
});
return this;
};
this.show = function (x, y) {
$el.css({
left: x,
top: y
}).show();
};
};
var AdminSvg = function (polygonCollection, image) {
this.collection = polygonCollection;
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var self = this,
$el = $(this.el);
this.collection.onAdd(function (polygonModel) {
self.renderPolygon(polygonModel);
});
this.render = function () {
var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', image.src);
imageSvg.setAttribute('width', image.width);
imageSvg.setAttribute('height', image.height);
this.el.setAttribute('version', '1.1');
this.el.setAttribute('viewBox', '0 0 ' + image.width + ' ' + image.height);
this.el.setAttribute('width', image.width);
this.el.setAttribute('height', image.height);
this.el.appendChild(imageSvg);
var isDrawing = false;
var contextMenu = new ContextMenu();
contextMenu.onHide(function () {
var currentHotspot = self.collection.get(selectedPolygonIndex);
$('[name="hotspot_coordinates[' + (currentHotspot.id + 1) + ']"]').val(
currentHotspot.encode()
);
isDrawing = false;
});
$el.on({
'dragstart': function (e) {
e.preventDefault();
},
'click': function (e) {
e.preventDefault();
var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY),
points = [];
if (!isDrawing) {
isDrawing = true;
} else {
points = self.collection.get(selectedPolygonIndex).get('points');
}
points.push([currentPoint.x, currentPoint.y]);
self.collection.get(selectedPolygonIndex).set('points', points);
},
'contextmenu': function (e) {
e.preventDefault();
if (!contextMenu.el.parentNode) {
$el.parent().append(contextMenu.render().el);
}
var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY);
contextMenu.show(currentPoint.x, currentPoint.y);
}
});
return this;
};
this.renderPolygon = function (oarModel) {
var oarSVG = new PolygonSvg(oarModel);
$el.append(oarSVG.render().el);
var oarSelect = new HotspotSelect(oarModel);
$el.parent().parent().find('.row').append(
oarSelect.render().el
);
return this;
};
};
var startAdminSvg = function (questionInfo) {
var image = new Image();
image.onload = function () {
$(config.selector).html('');
var polygonCollection = new PolygonCollection(),
adminSvg = new AdminSvg(polygonCollection, image);
$(config.selector)
.css('width', this.width)
.append(
adminSvg.render().el
);
$(config.selector).parent().prepend('\n\
\n\
\n\
\n\
' + lang.DelineationStatus1 + '\n\
\n\
\n\
');
$(config.selector).parent().prepend('');
$.each(questionInfo.hotspots, function (index, hotspotInfo) {
$('.input-group').removeClass('active');
var polygonModel = PolygonModel.decode(hotspotInfo);
polygonModel.id = index;
polygonCollection.add(polygonModel);
});
};
image.src = questionInfo.image;
lang = questionInfo.lang;
};
var UserSvg = function (answerModel, image) {
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.model = answerModel;
var self = this,
$el = $(this.el);
this.render = function () {
var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', image.src);
imageSvg.setAttribute('width', image.width);
imageSvg.setAttribute('height', image.height);
this.el.setAttribute('version', '1.1');
this.el.setAttribute('viewBox', '0 0 ' + image.width + ' ' + image.height);
this.el.setAttribute('width', image.width);
this.el.setAttribute('height', image.height);
this.el.appendChild(imageSvg);
this.renderDelineation();
var isDrawing = false;
var contextMenu = new ContextMenu();
contextMenu.onHide(function () {
var answerInput = $('hotspot[' + config.questionId + '][1]'),
choiceInput = $('choice[' + config.questionId + '][1]');
if (!answerInput.length) {
answerInput = $('', {
type: 'hidden',
name: 'hotspot[' + config.questionId + '][1]'
}).insertAfter($el);
}
if (!choiceInput.length) {
choiceInput = $('', {
type: 'hidden',
name: 'choice[' + config.questionId + '][1]'
}).insertAfter($el);
}
answerInput.val(self.model.encode());
choiceInput.val(1);
isDrawing = false;
});
$el.on({
'dragstart': function (e) {
e.preventDefault();
},
'click': function (e) {
e.preventDefault();
var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY),
points = [];
if (!isDrawing) {
isDrawing = true;
} else {
points = self.model.get('points');
}
points.push([currentPoint.x, currentPoint.y]);
self.model.set('points', points);
},
'contextmenu': function (e) {
e.preventDefault();
if (!contextMenu.el.parentNode) {
$el.parent().append(contextMenu.render().el);
}
var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY);
contextMenu.show(currentPoint.x, currentPoint.y);
}
});
return this;
};
this.renderDelineation = function () {
var delineationSvg = new PolygonSvg(this.model);
$el.append(
delineationSvg.render().el
);
};
};
var startUserSvg = function (questionInfo) {
var image = new Image();
image.onload = function () {
$(config.selector).html('');
var answerModel = new AnswerModel({
points: []
}),
userSvg = new UserSvg(answerModel, image);
$(config.selector).parent().prepend('\n\
\n\
\n\
\n\
' + lang.DelineationStatus1 + '\n\
\n\
\n\
');
$(config.selector)
.css('width', this.width)
.append(
userSvg.render().el
);
};
image.src = questionInfo.image;
lang = questionInfo.lang;
};
var PreviewSVG = function (polygonCollection, image) {
this.collection = polygonCollection;
this.image = image;
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var self = this,
$el = $(this.el);
this.collection.onAdd(function (polygonModel) {
self.renderPolygon(polygonModel);
});
this.render = function () {
var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', image.src);
imageSvg.setAttribute('width', this.image.width);
imageSvg.setAttribute('height', this.image.height);
this.el.setAttribute('version', '1.1');
this.el.setAttribute('viewBox', '0 0 ' + this.image.width + ' ' + this.image.height);
this.el.setAttribute('width', this.image.width);
this.el.setAttribute('height', this.image.height);
this.el.appendChild(imageSvg);
return this;
};
this.renderPolygon = function (oarModel) {
var oarSVG = new PolygonSvg(oarModel);
$el.append(oarSVG.render().el);
return this;
};
};
var startPreviewSvg = function (questionInfo) {
var image = new Image();
image.onload = function () {
$(config.selector).html('');
var polygonCollection = new PolygonCollection(),
previewSvg = new PreviewSVG(polygonCollection, image);
$(config.selector)
.css('width', this.width)
.append(
previewSvg.render().el
);
$.each(questionInfo.hotspots, function (index, hotspotInfo) {
var polygonModel = PolygonModel.decode(hotspotInfo);
polygonModel.id = index;
polygonCollection.add(polygonModel);
});
};
image.src = questionInfo.image;
lang = questionInfo.lang;
};
var config = {
questionId: 0,
exerciseId: 0,
selector: null,
for: ''
},
lang = {},
selectedPolygonIndex = -1;
var getPointOnImage = function (referenceElement, x, y) {
var pointerPosition = {
left: x + window.scrollX,
top: y + window.scrollY
},
canvasOffset = {
x: referenceElement.getBoundingClientRect().left + window.scrollX,
y: referenceElement.getBoundingClientRect().top + window.scrollY
};
return {
x: Math.round(pointerPosition.left - canvasOffset.x),
y: Math.round(pointerPosition.top - canvasOffset.y)
};
};
return function (settings) {
config = $.extend({
questionId: 0,
selector: ''
}, settings);
if (!config.questionId || !config.selector) {
return;
}
$(config.selector).html('\n\
\n\
Loading\n\
');
var xhrQuestion = null;
switch (config.for) {
case 'admin':
xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_actionscript_admin.as.php?' + webCidReq, {
modifyAnswers: parseInt(config.questionId)
});
break;
case 'user':
xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_actionscript.as.php?' + webCidReq, {
modifyAnswers: parseInt(config.questionId),
exe_id: parseInt(config.exerciseId)
});
break;
case 'solution':
// no break
case 'preview':
xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_answers.as.php?' + webCidReq, {
modifyAnswers: parseInt(config.questionId),
exerciseId: parseInt(config.exerciseId),
exeId: parseInt(config.exeId)
});
break;
}
$.when(xhrQuestion).done(function (questionInfo) {
switch (questionInfo.type) {
case 'admin':
startAdminSvg(questionInfo);
break;
case 'user':
startUserSvg(questionInfo);
break;
case 'solution':
// no break
case 'preview':
startPreviewSvg(questionInfo);
break;
}
});
};
})();