Julio Montoya
5 years ago
parent
43fbda4023
commit
c58ed868e8
@ -1,165 +1,165 @@ |
||||
.page-chat { |
||||
padding: 10px 0; |
||||
background: #ffffff; |
||||
padding: 10px 0; |
||||
background: #ffffff; |
||||
} |
||||
|
||||
.message-form-chat .nav { |
||||
margin-bottom: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.message-form-chat .nav-tabs .active a { |
||||
background-color: #f6f6f6; |
||||
background-color: #f6f6f6; |
||||
} |
||||
|
||||
.message-student .chat-image, .message-teacher .chat-image { |
||||
width: 80px; |
||||
height: auto; |
||||
max-height: 80px; |
||||
display: inline-block; |
||||
vertical-align: top; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border: 2px solid #fff; |
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); |
||||
width: 80px; |
||||
height: auto; |
||||
max-height: 80px; |
||||
display: inline-block; |
||||
vertical-align: top; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border: 2px solid #fff; |
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.message-student .content-message { |
||||
background-color: #F9F2E0; |
||||
color: #000; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #F9F2E0; |
||||
border-right: 2px #F7E5B9; |
||||
border-bottom: 3px #F7E5B9; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
padding: 15px; |
||||
vertical-align: top; |
||||
width: calc(100% - 100px); |
||||
background-color: #F9F2E0; |
||||
color: #000; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #F9F2E0; |
||||
border-right: 2px #F7E5B9; |
||||
border-bottom: 3px #F7E5B9; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
padding: 15px; |
||||
vertical-align: top; |
||||
width: calc(100% - 100px); |
||||
} |
||||
|
||||
.message-teacher .icon-message { |
||||
display: inline-block; |
||||
margin-left: -6px; |
||||
margin-top: 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 0 solid transparent; |
||||
border-bottom: 15px solid transparent; |
||||
border-left: 15px solid #EBEFF3; |
||||
display: inline-block; |
||||
margin-left: -6px; |
||||
margin-top: 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 0 solid transparent; |
||||
border-bottom: 15px solid transparent; |
||||
border-left: 15px solid #EBEFF3; |
||||
} |
||||
|
||||
.message-student .icon-message { |
||||
display: inline-block; |
||||
margin-right: -6px; |
||||
margin-top: 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 0 solid transparent; |
||||
border-bottom: 15px solid transparent; |
||||
border-right: 15px solid #F9F2E0; |
||||
display: inline-block; |
||||
margin-right: -6px; |
||||
margin-top: 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 0 solid transparent; |
||||
border-bottom: 15px solid transparent; |
||||
border-right: 15px solid #F9F2E0; |
||||
} |
||||
|
||||
.message-teacher .content-message { |
||||
background-color: #EBEFF3; |
||||
color: #000; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #EBEFF3; |
||||
border-bottom: 3px #DEE1E5; |
||||
border-left: 2px #DEE1E5; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
padding: 15px; |
||||
vertical-align: top; |
||||
width: calc(100% - 100px); |
||||
background-color: #EBEFF3; |
||||
color: #000; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #EBEFF3; |
||||
border-bottom: 3px #DEE1E5; |
||||
border-left: 2px #DEE1E5; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
padding: 15px; |
||||
vertical-align: top; |
||||
width: calc(100% - 100px); |
||||
} |
||||
|
||||
.message-teacher .message-date { |
||||
color: #666; |
||||
font-style: italic; |
||||
font-size: 10px; |
||||
text-align: right; |
||||
margin-right: 35px; |
||||
margin-top: 10px; |
||||
color: #666; |
||||
font-style: italic; |
||||
font-size: 10px; |
||||
text-align: right; |
||||
margin-right: 35px; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.message-student .message-date { |
||||
color: #666; |
||||
font-style: italic; |
||||
font-size: 10px; |
||||
text-align: right; |
||||
margin-top: 10px; |
||||
color: #666; |
||||
font-style: italic; |
||||
font-size: 10px; |
||||
text-align: right; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.chat-user { |
||||
background-color: #EEEEEE; |
||||
border: 1px solid #E2E2E2; |
||||
border-radius: 10px; |
||||
color: #666; |
||||
margin-bottom: 5px; |
||||
padding: 10px; |
||||
cursor: pointer; |
||||
background-color: #EEEEEE; |
||||
border: 1px solid #E2E2E2; |
||||
border-radius: 10px; |
||||
color: #666; |
||||
margin-bottom: 5px; |
||||
padding: 10px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.chat-user .user-image-chat { |
||||
border: 2px solid #FFF; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
height: auto; |
||||
margin-right: 10px; |
||||
max-height: 40px; |
||||
float: left; |
||||
width: 40px; |
||||
border: 2px solid #FFF; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
height: auto; |
||||
margin-right: 10px; |
||||
max-height: 40px; |
||||
float: left; |
||||
width: 40px; |
||||
} |
||||
|
||||
.emoticons-chat img { |
||||
width: 24px; |
||||
border: none; |
||||
width: 24px; |
||||
border: none; |
||||
} |
||||
|
||||
.message-form-chat { |
||||
margin-top: 10px; |
||||
padding: 5px; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
background: #EEEEEE; |
||||
margin-top: 10px; |
||||
padding: 5px; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
background: #EEEEEE; |
||||
} |
||||
|
||||
.emoji-menu { |
||||
margin-left: -234px; |
||||
margin-top: -224px; |
||||
width: 468px; |
||||
margin-left: -234px; |
||||
margin-top: -224px; |
||||
width: 468px; |
||||
} |
||||
|
||||
.emoji-wysiwyg-editor-preview, |
||||
.emoji-wysiwyg-editor { |
||||
padding: 3%; |
||||
height: 50px; |
||||
background-color: #ffffff; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border: 1px solid #EEEEEE; |
||||
color: #666; |
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) inset; |
||||
padding: 3%; |
||||
height: 50px; |
||||
background-color: #ffffff; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border: 1px solid #EEEEEE; |
||||
color: #666; |
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) inset; |
||||
} |
||||
|
||||
#chat-tabs .tab-content { |
||||
margin-top: 15px; |
||||
margin-top: 15px; |
||||
} |
||||
|
||||
.chat-history { |
||||
height: 400px; |
||||
overflow: auto; |
||||
height: 400px; |
||||
overflow: auto; |
||||
} |
||||
|
||||
#chat-users { |
||||
margin-left: 0; |
||||
margin-left: 0; |
||||
} |
||||
|
||||
#chat-users div.chat-user > div { |
||||
padding: 5px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
export const VueConfig = { |
||||
delimiters: ['[[', ']]'] |
||||
}; |
||||
// export const VueConfig = {
|
||||
// delimiters: ['[[', ']]']
|
||||
// };
|
||||
@ -1,367 +1,367 @@ |
||||
/* For licensing terms, see /license.txt */ |
||||
|
||||
(function (window, $) { |
||||
"use strict"; |
||||
|
||||
function getPointOnImage(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) |
||||
}; |
||||
} |
||||
|
||||
var SvgElementModel = function (attributes) { |
||||
this.attributes = attributes; |
||||
this.id = 0; |
||||
this.name = ""; |
||||
|
||||
this.changeEvent = null; |
||||
}; |
||||
SvgElementModel.prototype.set = function (key, value) { |
||||
this.attributes[key] = value; |
||||
|
||||
if (this.changeEvent) { |
||||
this.changeEvent(this); |
||||
} |
||||
}; |
||||
SvgElementModel.prototype.get = function (key) { |
||||
return this.attributes[key]; |
||||
}; |
||||
SvgElementModel.prototype.onChange = function (callback) { |
||||
this.changeEvent = callback; |
||||
}; |
||||
SvgElementModel.decode = function () { |
||||
return new this(); |
||||
}; |
||||
SvgElementModel.prototype.encode = function () { |
||||
return ""; |
||||
}; |
||||
|
||||
var SvgPathModel = function (attributes) { |
||||
SvgElementModel.call(this, attributes); |
||||
}; |
||||
SvgPathModel.prototype = Object.create(SvgElementModel.prototype); |
||||
SvgPathModel.prototype.addPoint = function (x, y) { |
||||
x = parseInt(x); |
||||
y = parseInt(y); |
||||
|
||||
var points = this.get("points"); |
||||
points.push([x, y]); |
||||
|
||||
this.set("points", points); |
||||
}; |
||||
SvgPathModel.prototype.encode = function () { |
||||
var pairedPoints = []; |
||||
|
||||
this.get("points").forEach(function (point) { |
||||
pairedPoints.push( |
||||
point.join(";") |
||||
); |
||||
}); |
||||
|
||||
return "P)(" + pairedPoints.join(")("); |
||||
}; |
||||
SvgPathModel.decode = function (pathInfo) { |
||||
var points = []; |
||||
|
||||
$(pathInfo).each(function (i, point) { |
||||
points.push([point.x, point.y]); |
||||
}); |
||||
|
||||
return new SvgPathModel({points: points}); |
||||
}; |
||||
|
||||
var TextModel = function (userAttributes) { |
||||
var attributes = $.extend({ |
||||
text: "", |
||||
x: 0, |
||||
y: 0, |
||||
color: "red", |
||||
fontSize: 20 |
||||
}, userAttributes); |
||||
|
||||
SvgElementModel.call(this, attributes); |
||||
}; |
||||
TextModel.prototype = Object.create(SvgElementModel.prototype); |
||||
TextModel.prototype.encode = function () { |
||||
return "T)(" + this.get("text") + ")(" + this.get("x") + ";" + this.get("y"); |
||||
}; |
||||
TextModel.decode = function (textInfo) { |
||||
return new TextModel({ |
||||
text: textInfo.text, |
||||
x: textInfo.x, |
||||
y: textInfo.y |
||||
}); |
||||
}; |
||||
|
||||
var SvgPathView = function (model) { |
||||
var self = this; |
||||
|
||||
this.model = model; |
||||
this.model.onChange(function () { |
||||
self.render(); |
||||
}); |
||||
|
||||
this.el = document.createElementNS("http://www.w3.org/2000/svg", "path"); |
||||
this.el.setAttribute("fill", "transparent"); |
||||
this.el.setAttribute("stroke", "red"); |
||||
this.el.setAttribute("stroke-width", "3"); |
||||
}; |
||||
SvgPathView.prototype.render = function () { |
||||
var d = ""; |
||||
|
||||
$.each( |
||||
this.model.get("points"), |
||||
function (i, point) { |
||||
d += (i === 0) ? "M" : " L "; |
||||
d += point[0] + " " + point[1]; |
||||
} |
||||
); |
||||
|
||||
this.el.setAttribute("d", d); |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
var TextView = function (model) { |
||||
var self = this; |
||||
|
||||
this.model = model; |
||||
this.model.onChange(function () { |
||||
self.render(); |
||||
}); |
||||
|
||||
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'text'); |
||||
this.el.setAttribute('fill', this.model.get('color')); |
||||
this.el.setAttribute('font-size', this.model.get('fontSize')); |
||||
this.el.setAttribute('stroke', 'none'); |
||||
}; |
||||
TextView.prototype.render = function () { |
||||
this.el.setAttribute('x', this.model.get('x')); |
||||
this.el.setAttribute('y', this.model.get('y')); |
||||
this.el.textContent = this.model.get('text'); |
||||
|
||||
return this; |
||||
"use strict"; |
||||
|
||||
function getPointOnImage(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) |
||||
}; |
||||
} |
||||
|
||||
var ElementsCollection = function () { |
||||
this.models = []; |
||||
this.length = 0; |
||||
this.addEvent = null; |
||||
}; |
||||
ElementsCollection.prototype.add = function (pathModel) { |
||||
pathModel.id = ++this.length; |
||||
var SvgElementModel = function (attributes) { |
||||
this.attributes = attributes; |
||||
this.id = 0; |
||||
this.name = ""; |
||||
|
||||
this.models.push(pathModel); |
||||
this.changeEvent = null; |
||||
}; |
||||
SvgElementModel.prototype.set = function (key, value) { |
||||
this.attributes[key] = value; |
||||
|
||||
if (this.addEvent) { |
||||
this.addEvent(pathModel); |
||||
if (this.changeEvent) { |
||||
this.changeEvent(this); |
||||
} |
||||
}; |
||||
SvgElementModel.prototype.get = function (key) { |
||||
return this.attributes[key]; |
||||
}; |
||||
SvgElementModel.prototype.onChange = function (callback) { |
||||
this.changeEvent = callback; |
||||
}; |
||||
SvgElementModel.decode = function () { |
||||
return new this(); |
||||
}; |
||||
SvgElementModel.prototype.encode = function () { |
||||
return ""; |
||||
}; |
||||
|
||||
var SvgPathModel = function (attributes) { |
||||
SvgElementModel.call(this, attributes); |
||||
}; |
||||
SvgPathModel.prototype = Object.create(SvgElementModel.prototype); |
||||
SvgPathModel.prototype.addPoint = function (x, y) { |
||||
x = parseInt(x); |
||||
y = parseInt(y); |
||||
|
||||
var points = this.get("points"); |
||||
points.push([x, y]); |
||||
|
||||
this.set("points", points); |
||||
}; |
||||
SvgPathModel.prototype.encode = function () { |
||||
var pairedPoints = []; |
||||
|
||||
this.get("points").forEach(function (point) { |
||||
pairedPoints.push( |
||||
point.join(";") |
||||
); |
||||
}); |
||||
|
||||
return "P)(" + pairedPoints.join(")("); |
||||
}; |
||||
SvgPathModel.decode = function (pathInfo) { |
||||
var points = []; |
||||
|
||||
$(pathInfo).each(function (i, point) { |
||||
points.push([point.x, point.y]); |
||||
}); |
||||
|
||||
return new SvgPathModel({points: points}); |
||||
}; |
||||
|
||||
var TextModel = function (userAttributes) { |
||||
var attributes = $.extend({ |
||||
text: "", |
||||
x: 0, |
||||
y: 0, |
||||
color: "red", |
||||
fontSize: 20 |
||||
}, userAttributes); |
||||
|
||||
SvgElementModel.call(this, attributes); |
||||
}; |
||||
TextModel.prototype = Object.create(SvgElementModel.prototype); |
||||
TextModel.prototype.encode = function () { |
||||
return "T)(" + this.get("text") + ")(" + this.get("x") + ";" + this.get("y"); |
||||
}; |
||||
TextModel.decode = function (textInfo) { |
||||
return new TextModel({ |
||||
text: textInfo.text, |
||||
x: textInfo.x, |
||||
y: textInfo.y |
||||
}); |
||||
}; |
||||
|
||||
var SvgPathView = function (model) { |
||||
var self = this; |
||||
|
||||
this.model = model; |
||||
this.model.onChange(function () { |
||||
self.render(); |
||||
}); |
||||
|
||||
this.el = document.createElementNS("http://www.w3.org/2000/svg", "path"); |
||||
this.el.setAttribute("fill", "transparent"); |
||||
this.el.setAttribute("stroke", "red"); |
||||
this.el.setAttribute("stroke-width", "3"); |
||||
}; |
||||
SvgPathView.prototype.render = function () { |
||||
var d = ""; |
||||
|
||||
$.each( |
||||
this.model.get("points"), |
||||
function (i, point) { |
||||
d += (i === 0) ? "M" : " L "; |
||||
d += point[0] + " " + point[1]; |
||||
} |
||||
); |
||||
|
||||
this.el.setAttribute("d", d); |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
var TextView = function (model) { |
||||
var self = this; |
||||
|
||||
this.model = model; |
||||
this.model.onChange(function () { |
||||
self.render(); |
||||
}); |
||||
|
||||
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'text'); |
||||
this.el.setAttribute('fill', this.model.get('color')); |
||||
this.el.setAttribute('font-size', this.model.get('fontSize')); |
||||
this.el.setAttribute('stroke', 'none'); |
||||
}; |
||||
TextView.prototype.render = function () { |
||||
this.el.setAttribute('x', this.model.get('x')); |
||||
this.el.setAttribute('y', this.model.get('y')); |
||||
this.el.textContent = this.model.get('text'); |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
var ElementsCollection = function () { |
||||
this.models = []; |
||||
this.length = 0; |
||||
this.addEvent = null; |
||||
}; |
||||
ElementsCollection.prototype.add = function (pathModel) { |
||||
pathModel.id = ++this.length; |
||||
|
||||
this.models.push(pathModel); |
||||
|
||||
if (this.addEvent) { |
||||
this.addEvent(pathModel); |
||||
} |
||||
}; |
||||
ElementsCollection.prototype.get = function (index) { |
||||
return this.models[index]; |
||||
}; |
||||
ElementsCollection.prototype.onAdd = function (callback) { |
||||
this.addEvent = callback; |
||||
}; |
||||
|
||||
var AnnotationCanvasView = function (elementsCollection, image, questionId) { |
||||
var self = this; |
||||
|
||||
this.questionId = parseInt(questionId); |
||||
this.image = image; |
||||
|
||||
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
||||
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); |
||||
|
||||
var svgImage = document.createElementNS('http://www.w3.org/2000/svg', 'image'); |
||||
svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.image.src); |
||||
svgImage.setAttribute('width', this.image.width); |
||||
svgImage.setAttribute('height', this.image.height); |
||||
|
||||
this.el.appendChild(svgImage); |
||||
|
||||
this.$el = $(this.el); |
||||
|
||||
this.elementsCollection = elementsCollection; |
||||
this.elementsCollection.onAdd(function (pathModel) { |
||||
self.renderElement(pathModel); |
||||
}); |
||||
|
||||
this.$rdbOptions = null; |
||||
}; |
||||
AnnotationCanvasView.prototype.render = function () { |
||||
this.setEvents(); |
||||
|
||||
this.$rdbOptions = $('[name="' + this.questionId + '-options"]'); |
||||
|
||||
return this; |
||||
}; |
||||
AnnotationCanvasView.prototype.setEvents = function () { |
||||
var self = this; |
||||
|
||||
var isMoving = false, |
||||
elementModel = null; |
||||
|
||||
self.$el |
||||
.on('dragstart', function (e) { |
||||
e.preventDefault(); |
||||
}) |
||||
.on('click', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
if ("1" !== self.$rdbOptions.filter(':checked').val()) { |
||||
return; |
||||
} |
||||
}; |
||||
ElementsCollection.prototype.get = function (index) { |
||||
return this.models[index]; |
||||
}; |
||||
ElementsCollection.prototype.onAdd = function (callback) { |
||||
this.addEvent = callback; |
||||
}; |
||||
|
||||
var AnnotationCanvasView = function (elementsCollection, image, questionId) { |
||||
var self = this; |
||||
|
||||
this.questionId = parseInt(questionId); |
||||
this.image = image; |
||||
|
||||
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
||||
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); |
||||
|
||||
var svgImage = document.createElementNS('http://www.w3.org/2000/svg', 'image'); |
||||
svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.image.src); |
||||
svgImage.setAttribute('width', this.image.width); |
||||
svgImage.setAttribute('height', this.image.height); |
||||
|
||||
this.el.appendChild(svgImage); |
||||
var point = getPointOnImage(self.el, e.clientX, e.clientY); |
||||
elementModel = new TextModel({x: point.x, y: point.y, text: ''}); |
||||
self.elementsCollection.add(elementModel); |
||||
elementModel = null; |
||||
isMoving = false; |
||||
}) |
||||
.on('mousedown', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
var point = getPointOnImage(self.el, e.clientX, e.clientY); |
||||
if (isMoving || "0" !== self.$rdbOptions.filter(':checked').val() || elementModel) { |
||||
return; |
||||
} |
||||
|
||||
this.$el = $(this.el); |
||||
elementModel = new SvgPathModel({points: [[point.x, point.y]]}); |
||||
self.elementsCollection.add(elementModel); |
||||
isMoving = true; |
||||
}) |
||||
.on('mousemove', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
this.elementsCollection = elementsCollection; |
||||
this.elementsCollection.onAdd(function (pathModel) { |
||||
self.renderElement(pathModel); |
||||
}); |
||||
|
||||
this.$rdbOptions = null; |
||||
}; |
||||
AnnotationCanvasView.prototype.render = function () { |
||||
this.setEvents(); |
||||
if (!isMoving || "0" !== self.$rdbOptions.filter(':checked').val() || !elementModel) { |
||||
return; |
||||
} |
||||
|
||||
this.$rdbOptions = $('[name="' + this.questionId + '-options"]'); |
||||
var point = getPointOnImage(self.el, e.clientX, e.clientY); |
||||
elementModel.addPoint(point.x, point.y); |
||||
}) |
||||
.on('mouseup', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
return this; |
||||
}; |
||||
AnnotationCanvasView.prototype.setEvents = function () { |
||||
var self = this; |
||||
|
||||
var isMoving = false, |
||||
elementModel = null; |
||||
|
||||
self.$el |
||||
.on('dragstart', function (e) { |
||||
e.preventDefault(); |
||||
}) |
||||
.on('click', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
if ("1" !== self.$rdbOptions.filter(':checked').val()) { |
||||
return; |
||||
} |
||||
|
||||
var point = getPointOnImage(self.el, e.clientX, e.clientY); |
||||
elementModel = new TextModel({x: point.x, y: point.y, text: ''}); |
||||
self.elementsCollection.add(elementModel); |
||||
elementModel = null; |
||||
isMoving = false; |
||||
}) |
||||
.on('mousedown', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
var point = getPointOnImage(self.el, e.clientX, e.clientY); |
||||
if (isMoving || "0" !== self.$rdbOptions.filter(':checked').val() || elementModel) { |
||||
return; |
||||
} |
||||
|
||||
elementModel = new SvgPathModel({points: [[point.x, point.y]]}); |
||||
self.elementsCollection.add(elementModel); |
||||
isMoving = true; |
||||
}) |
||||
.on('mousemove', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
if (!isMoving || "0" !== self.$rdbOptions.filter(':checked').val() || !elementModel) { |
||||
return; |
||||
} |
||||
|
||||
var point = getPointOnImage(self.el, e.clientX, e.clientY); |
||||
elementModel.addPoint(point.x, point.y); |
||||
}) |
||||
.on('mouseup', function (e) { |
||||
e.preventDefault(); |
||||
|
||||
if (!isMoving || "0" !== self.$rdbOptions.filter(':checked').val() || !elementModel) { |
||||
return; |
||||
} |
||||
|
||||
elementModel = null; |
||||
isMoving = false; |
||||
}); |
||||
}; |
||||
AnnotationCanvasView.prototype.renderElement = function (elementModel) { |
||||
var elementView = null, |
||||
self = this; |
||||
|
||||
if (elementModel instanceof SvgPathModel) { |
||||
elementView = new SvgPathView(elementModel); |
||||
} else if (elementModel instanceof TextModel) { |
||||
elementView = new TextView(elementModel); |
||||
if (!isMoving || "0" !== self.$rdbOptions.filter(':checked').val() || !elementModel) { |
||||
return; |
||||
} |
||||
|
||||
if (!elementView) { |
||||
return; |
||||
} |
||||
elementModel = null; |
||||
isMoving = false; |
||||
}); |
||||
}; |
||||
AnnotationCanvasView.prototype.renderElement = function (elementModel) { |
||||
var elementView = null, |
||||
self = this; |
||||
|
||||
if (elementModel instanceof SvgPathModel) { |
||||
elementView = new SvgPathView(elementModel); |
||||
} else if (elementModel instanceof TextModel) { |
||||
elementView = new TextView(elementModel); |
||||
} |
||||
|
||||
$('<input>') |
||||
.attr({ |
||||
type: 'hidden', |
||||
name: 'choice[' + this.questionId + '][' + elementModel.id + ']' |
||||
}) |
||||
.val(elementModel.encode()) |
||||
.appendTo(this.el.parentNode); |
||||
|
||||
$('<input>') |
||||
.attr({ |
||||
type: 'hidden', |
||||
name: 'hotspot[' + this.questionId + '][' + elementModel.id + ']' |
||||
}) |
||||
.val(elementModel.encode()) |
||||
.appendTo(this.el.parentNode); |
||||
|
||||
this.el.appendChild(elementView.render().el); |
||||
|
||||
elementModel.onChange(function () { |
||||
elementView.render(); |
||||
|
||||
$('input[name="choice[' + self.questionId + '][' + elementModel.id + ']"]').val(elementModel.encode()); |
||||
$('input[name="hotspot[' + self.questionId + '][' + elementModel.id + ']"]').val(elementModel.encode()); |
||||
}); |
||||
if (!elementView) { |
||||
return; |
||||
} |
||||
|
||||
if (elementModel instanceof TextModel) { |
||||
$('<input>') |
||||
.attr({ |
||||
type: 'text', |
||||
name: 'text[' + this.questionId + '][' + elementModel.id + ']' |
||||
}) |
||||
.addClass('form-control input-sm') |
||||
.on('change', function (e) { |
||||
elementModel.set('text', this.value); |
||||
|
||||
e.preventDefault(); |
||||
}) |
||||
.val(elementModel.get('text')) |
||||
.appendTo('#annotation-toolbar-' + this.questionId + ' ul') |
||||
.wrap('<li class="form-group"></li>') |
||||
.focus(); |
||||
} |
||||
}; |
||||
$('<input>') |
||||
.attr({ |
||||
type: 'hidden', |
||||
name: 'choice[' + this.questionId + '][' + elementModel.id + ']' |
||||
}) |
||||
.val(elementModel.encode()) |
||||
.appendTo(this.el.parentNode); |
||||
|
||||
$('<input>') |
||||
.attr({ |
||||
type: 'hidden', |
||||
name: 'hotspot[' + this.questionId + '][' + elementModel.id + ']' |
||||
}) |
||||
.val(elementModel.encode()) |
||||
.appendTo(this.el.parentNode); |
||||
|
||||
this.el.appendChild(elementView.render().el); |
||||
|
||||
elementModel.onChange(function () { |
||||
elementView.render(); |
||||
|
||||
$('input[name="choice[' + self.questionId + '][' + elementModel.id + ']"]').val(elementModel.encode()); |
||||
$('input[name="hotspot[' + self.questionId + '][' + elementModel.id + ']"]').val(elementModel.encode()); |
||||
}); |
||||
|
||||
if (elementModel instanceof TextModel) { |
||||
$('<input>') |
||||
.attr({ |
||||
type: 'text', |
||||
name: 'text[' + this.questionId + '][' + elementModel.id + ']' |
||||
}) |
||||
.addClass('form-control input-sm') |
||||
.on('change', function (e) { |
||||
elementModel.set('text', this.value); |
||||
|
||||
e.preventDefault(); |
||||
}) |
||||
.val(elementModel.get('text')) |
||||
.appendTo('#annotation-toolbar-' + this.questionId + ' ul') |
||||
.wrap('<li class="form-group"></li>') |
||||
.focus(); |
||||
} |
||||
}; |
||||
|
||||
window.AnnotationQuestion = function (userSettings) { |
||||
$(function () { |
||||
var settings = $.extend( |
||||
{ |
||||
questionId: 0, |
||||
exerciseId: 0, |
||||
relPath: '/' |
||||
}, |
||||
userSettings |
||||
), |
||||
xhrUrl = 'exercise/annotation_user.php?', |
||||
$container = $('#annotation-canvas-' + settings.questionId); |
||||
$.getJSON(settings.relPath + xhrUrl, { |
||||
question_id: parseInt(settings.questionId), |
||||
exe_id: parseInt(settings.exerciseId), |
||||
course_id: parseInt(settings.courseId) |
||||
}) |
||||
.done(function (questionInfo) { |
||||
var image = new Image(); |
||||
image.onload = function () { |
||||
var elementsCollection = new ElementsCollection(), |
||||
canvas = new AnnotationCanvasView(elementsCollection, this, settings.questionId); |
||||
|
||||
$container.html(canvas.render().el); |
||||
|
||||
/** @namespace questionInfo.answers.paths */ |
||||
$.each(questionInfo.answers.paths, function (i, pathInfo) { |
||||
var pathModel = SvgPathModel.decode(pathInfo); |
||||
elementsCollection.add(pathModel); |
||||
}); |
||||
|
||||
window.AnnotationQuestion = function (userSettings) { |
||||
$(function () { |
||||
var settings = $.extend( |
||||
{ |
||||
questionId: 0, |
||||
exerciseId: 0, |
||||
relPath: '/' |
||||
}, |
||||
userSettings |
||||
), |
||||
xhrUrl = 'exercise/annotation_user.php?', |
||||
$container = $('#annotation-canvas-' + settings.questionId); |
||||
$.getJSON(settings.relPath + xhrUrl, { |
||||
question_id: parseInt(settings.questionId), |
||||
exe_id: parseInt(settings.exerciseId), |
||||
course_id: parseInt(settings.courseId) |
||||
}) |
||||
.done(function (questionInfo) { |
||||
var image = new Image(); |
||||
image.onload = function () { |
||||
var elementsCollection = new ElementsCollection(), |
||||
canvas = new AnnotationCanvasView(elementsCollection, this, settings.questionId); |
||||
|
||||
$container.html(canvas.render().el); |
||||
|
||||
/** @namespace questionInfo.answers.paths */ |
||||
$.each(questionInfo.answers.paths, function (i, pathInfo) { |
||||
var pathModel = SvgPathModel.decode(pathInfo); |
||||
elementsCollection.add(pathModel); |
||||
}); |
||||
|
||||
/** @namespace questionInfo.answers.texts */ |
||||
$(questionInfo.answers.texts).each(function (i, textInfo) { |
||||
var textModel = TextModel.decode(textInfo); |
||||
elementsCollection.add(textModel); |
||||
}); |
||||
}; |
||||
image.src = questionInfo.image.path; |
||||
/** @namespace questionInfo.answers.texts */ |
||||
$(questionInfo.answers.texts).each(function (i, textInfo) { |
||||
var textModel = TextModel.decode(textInfo); |
||||
elementsCollection.add(textModel); |
||||
}); |
||||
}; |
||||
image.src = questionInfo.image.path; |
||||
}); |
||||
}; |
||||
}); |
||||
}; |
||||
})(window, window.jQuery); |
||||
|
||||
@ -1,12 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<p>This is an example of a new components in VueJs</p> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "example" |
||||
} |
||||
</script> |
||||
<style scoped> |
||||
</style> |
||||
@ -1,36 +1,36 @@ |
||||
$(function () { |
||||
// Elevator Scroll
|
||||
$(window).scroll(function () { |
||||
if ($(this).scrollTop() > 50) { |
||||
$('.app-elevator').fadeIn(); |
||||
} else { |
||||
$('.app-elevator').fadeOut(); |
||||
} |
||||
}); |
||||
// Elevator Scroll
|
||||
$(window).scroll(function () { |
||||
if ($(this).scrollTop() > 50) { |
||||
$('.app-elevator').fadeIn(); |
||||
} else { |
||||
$('.app-elevator').fadeOut(); |
||||
} |
||||
}); |
||||
|
||||
// scroll body to 0px on click
|
||||
$('#back-to-top').click(function () { |
||||
$('#back-to-top').tooltip('hide'); |
||||
$('body,html').animate({ |
||||
scrollTop: 0 |
||||
}, 800); |
||||
return false; |
||||
}); |
||||
// scroll body to 0px on click
|
||||
$('#back-to-top').click(function () { |
||||
$('#back-to-top').tooltip('hide'); |
||||
$('body,html').animate({ |
||||
scrollTop: 0 |
||||
}, 800); |
||||
return false; |
||||
}); |
||||
|
||||
var $inputTitle = $("#add_course_title"); |
||||
$inputTitle.keyup(function () { |
||||
var value = $(this).val(); |
||||
var titleDefault = "Course Title"; |
||||
if (value.length > 0) { |
||||
$("#title_course_card").text(value); |
||||
} else { |
||||
$("#title_course_card").text(titleDefault); |
||||
} |
||||
}).keyup(); |
||||
var $inputTitle = $("#add_course_title"); |
||||
$inputTitle.keyup(function () { |
||||
var value = $(this).val(); |
||||
var titleDefault = "Course Title"; |
||||
if (value.length > 0) { |
||||
$("#title_course_card").text(value); |
||||
} else { |
||||
$("#title_course_card").text(titleDefault); |
||||
} |
||||
}).keyup(); |
||||
|
||||
$("select[name=category_code]").change(function () { |
||||
$(".category").show(); |
||||
var $category = $('select[name=category_code] option:selected').html(); |
||||
$(".category").text($category); |
||||
}); |
||||
$("select[name=category_code]").change(function () { |
||||
$(".category").show(); |
||||
var $category = $('select[name=category_code] option:selected').html(); |
||||
$(".category").text($category); |
||||
}); |
||||
}); |
||||
|
||||
Loading…
Reference in new issue