347 lines
13 KiB
JavaScript
347 lines
13 KiB
JavaScript
(function(define, undefined) {
|
|
'use strict';
|
|
define([
|
|
'jquery', 'underscore', 'annotator_1.2.9', 'js/edxnotes/utils/utils', 'edx-ui-toolkit/js/utils/html-utils'
|
|
], function($, _, Annotator, Utils, HtmlUtils) {
|
|
var _t = Annotator._t;
|
|
|
|
/**
|
|
* The original _setupDynamicStyle uses a very expensive call to
|
|
* Util.maxZIndex(...) that sets the z-index of .annotator-adder,
|
|
* .annotator-outer, .annotator-notice, .annotator-filter. We set these
|
|
* values in annotator.min.css instead and do nothing here.
|
|
*/
|
|
Annotator.prototype._setupDynamicStyle = function() { };
|
|
|
|
Annotator.frozenSrc = null;
|
|
|
|
/**
|
|
* Modifies Annotator.Plugin.Auth.haveValidToken to make it work with a new
|
|
* token format.
|
|
**/
|
|
Annotator.Plugin.Auth.prototype.haveValidToken = function() {
|
|
return (
|
|
this._unsafeToken &&
|
|
this._unsafeToken.sub &&
|
|
this._unsafeToken.exp &&
|
|
this._unsafeToken.iat &&
|
|
this.timeToExpiry() > 0
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Modifies Annotator.Plugin.Auth.timeToExpiry to make it work with a new
|
|
* token format.
|
|
**/
|
|
Annotator.Plugin.Auth.prototype.timeToExpiry = function() {
|
|
var now = new Date().getTime() / 1000,
|
|
expiry = this._unsafeToken.exp,
|
|
timeToExpiry = expiry - now;
|
|
|
|
return (timeToExpiry > 0) ? timeToExpiry : 0;
|
|
};
|
|
|
|
|
|
Annotator.Plugin.Tags.prototype.updateField = _.compose(
|
|
function() {
|
|
// Add screen reader label for edit mode. Note that the id of the tags element will not always be "1".
|
|
// It depends on the number of annotatable components on the page.
|
|
var tagsField = $('li.annotator-item >input', this.annotator.editor.element).attr('id');
|
|
if ($("label.sr[for='" + tagsField + "']", this.annotator.editor.element).length === 0) {
|
|
HtmlUtils.prepend(
|
|
$('#' + tagsField, this.annotator.editor.element),
|
|
$(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML('<label class="sr" for='),
|
|
tagsField,
|
|
HtmlUtils.HTML('>'),
|
|
_t('Tags (space-separated)'),
|
|
HtmlUtils.HTML('</label>')
|
|
)));
|
|
}
|
|
return this;
|
|
},
|
|
Annotator.Plugin.Tags.prototype.updateField
|
|
);
|
|
|
|
Annotator.Plugin.Tags.prototype.updateViewer = _.compose(
|
|
function() {
|
|
// Add ARIA information for viewing mode.
|
|
$('div.annotator-tags', this.wrapper).attr({
|
|
role: 'region',
|
|
'aria-label': 'tags'
|
|
});
|
|
return this;
|
|
},
|
|
Annotator.Plugin.Tags.prototype.updateViewer
|
|
);
|
|
|
|
/**
|
|
* Modifies Annotator.highlightRange to add "tabindex=0" and role="link"
|
|
* attributes to the <span class="annotator-hl"> markup that encloses the
|
|
* note. These are then focusable via the TAB key and are accessible to
|
|
* screen readers.
|
|
**/
|
|
Annotator.prototype.highlightRange = _.compose(
|
|
function(results) {
|
|
$('.annotator-hl', this.wrapper).attr({
|
|
tabindex: 0,
|
|
role: 'link'
|
|
});
|
|
return results;
|
|
},
|
|
Annotator.prototype.highlightRange
|
|
);
|
|
|
|
/**
|
|
* Modifies Annotator.destroy to unbind click.edxnotes:freeze from the
|
|
* document and reset isFrozen to default value, false.
|
|
**/
|
|
Annotator.prototype.destroy = _.compose(
|
|
Annotator.prototype.destroy,
|
|
function() {
|
|
// We are destroying the instance that has the popup visible, revert to default,
|
|
// unfreeze all instances and set their isFrozen to false
|
|
if (this === Annotator.frozenSrc) {
|
|
this.unfreezeAll();
|
|
} else {
|
|
// Unfreeze only this instance and unbound associated 'click.edxnotes:freeze' handler
|
|
$(document).off('click.edxnotes:freeze' + this.uid);
|
|
this.isFrozen = false;
|
|
}
|
|
|
|
if (this.logger && this.logger.destroy) {
|
|
this.logger.destroy();
|
|
}
|
|
// Unbind onNoteClick from click
|
|
this.viewer.element.off('click', this.onNoteClick);
|
|
this.wrapper.off('click', '.annotator-hl');
|
|
}
|
|
);
|
|
|
|
/**
|
|
* Modifies Annotator.Viewer.html template to make viewer div focusable.
|
|
* Also adds a close button and necessary i18n attributes to all buttons.
|
|
**/
|
|
Annotator.Viewer.prototype.html = {
|
|
element: [
|
|
'<div class="annotator-outer annotator-viewer">',
|
|
'<ul class="annotator-widget annotator-listing" tabindex="-1"></ul>',
|
|
'</div>'
|
|
].join(''),
|
|
item: [
|
|
'<li class="annotator-annotation annotator-item">',
|
|
'<span class="annotator-controls">',
|
|
'<a href="#" title="', _t('View as webpage'), '" class="annotator-link">',
|
|
_t('View as webpage'),
|
|
'</a>',
|
|
'<button class="annotator-edit">',
|
|
_t('Edit'),
|
|
'<span class="sr">', _t('Note'), '</span>',
|
|
'</button>',
|
|
'<button class="annotator-delete">',
|
|
_t('Delete'),
|
|
'<span class="sr">', _t('Note'), '</span>',
|
|
'</button>',
|
|
'<button class="annotator-close">',
|
|
_t('Close'),
|
|
'<span class="sr">', _t('Note'), '</span>',
|
|
'</button>',
|
|
'</span>',
|
|
'</li>'
|
|
].join('')
|
|
};
|
|
|
|
/**
|
|
* Overrides Annotator._setupViewer to add a "click" event on viewer and to
|
|
* improve line breaks.
|
|
**/
|
|
Annotator.prototype._setupViewer = function() {
|
|
var self = this;
|
|
this.viewer = new Annotator.Viewer({readOnly: this.options.readOnly});
|
|
this.viewer.element.on('click', _.bind(this.onNoteClick, this));
|
|
this.viewer.hide()
|
|
.on('edit', this.onEditAnnotation)
|
|
.on('delete', this.onDeleteAnnotation)
|
|
.addField({
|
|
load: function(field, annotation) {
|
|
if (annotation.text) {
|
|
$(field).html(HtmlUtils.HTML(Utils.nl2br(Annotator.Util.escape(annotation.text))).toString());
|
|
} else {
|
|
// eslint-disable-next-line max-len
|
|
$(field).html(HtmlUtils.joinHtml(HtmlUtils.HTML('<i>'), _t('No Comment'), HtmlUtils.HTML('</i>')).toString());
|
|
}
|
|
return self.publish('annotationViewerTextField', [field, annotation]);
|
|
}
|
|
})
|
|
.element.appendTo(this.wrapper).bind({ // xss-lint: disable=javascript-jquery-insert-into-target
|
|
mouseover: this.clearViewerHideTimer,
|
|
mouseout: this.startViewerHideTimer
|
|
});
|
|
return this;
|
|
};
|
|
|
|
Annotator.Editor.prototype.isShown = Annotator.Viewer.prototype.isShown;
|
|
|
|
/**
|
|
* Modifies Annotator.Editor.html template to add tabindex = -1 to
|
|
* form.annotator-widget and reverse order of Save and Cancel buttons.
|
|
**/
|
|
Annotator.Editor.prototype.html = [
|
|
'<div class="annotator-outer annotator-editor">',
|
|
'<form class="annotator-widget" tabindex="-1">',
|
|
'<ul class="annotator-listing"></ul>',
|
|
'<div class="annotator-controls">',
|
|
'<button class="annotator-save">',
|
|
_t('Save'),
|
|
'<span class="sr">', _t('Note'), '</span>',
|
|
'</button>',
|
|
'<button class="annotator-cancel">',
|
|
_t('Cancel'),
|
|
'<span class="sr">', _t('Note'), '</span>',
|
|
'</button>',
|
|
'</div>',
|
|
'</form>',
|
|
'</div>'
|
|
].join('');
|
|
|
|
|
|
/**
|
|
* Modifies Annotator.Editor.show, in the case of a keydown event, to remove
|
|
* focus from Save button and put it on form.annotator-widget instead.
|
|
*
|
|
* Also add a sr label for note textarea.
|
|
**/
|
|
Annotator.Editor.prototype.show = _.compose(
|
|
function(event) {
|
|
// Add screen reader label for the note area. Note that the id of the tags element will not always be "0".
|
|
// It depends on the number of annotatable components on the page.
|
|
var noteField = $('li.annotator-item >textarea', this.element).attr('id');
|
|
if ($("label.sr[for='" + noteField + "']", this.element).length === 0) {
|
|
HtmlUtils.prepend(
|
|
$('#' + noteField, this.element),
|
|
$(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML('<label class="sr" for='),
|
|
noteField,
|
|
HtmlUtils.HTML('>'),
|
|
_t('Note'),
|
|
HtmlUtils.HTML('</label>')
|
|
)));
|
|
}
|
|
|
|
if (event.type === 'keydown') {
|
|
this.element.find('.annotator-save').removeClass(this.classes.focus);
|
|
this.element.find('form.annotator-widget').focus();
|
|
}
|
|
},
|
|
Annotator.Editor.prototype.show
|
|
);
|
|
|
|
/**
|
|
* Removes the textarea keydown event handler as it triggers 'processKeypress'
|
|
* which hides the viewer on ESC and saves on ENTER. We will define different
|
|
* behaviors for these in /plugins/accessibility.js
|
|
**/
|
|
delete Annotator.Editor.prototype.events['textarea keydown'];
|
|
|
|
/**
|
|
* Modifies Annotator.onHighlightMouseover to avoid showing the viewer if the
|
|
* editor is opened.
|
|
**/
|
|
// xss-lint: disable=javascript-jquery-insertion
|
|
Annotator.prototype.onHighlightMouseover = _.wrap(
|
|
Annotator.prototype.onHighlightMouseover,
|
|
function(func, event) {
|
|
// Do nothing if the editor is opened.
|
|
if (this.editor.isShown()) {
|
|
return false;
|
|
}
|
|
return func.call(this, event);
|
|
},
|
|
Annotator.prototype._setupViewer
|
|
);
|
|
|
|
/**
|
|
* Modifies Annotator._setupWrapper to add a "click" event on '.annotator-hl'.
|
|
**/
|
|
Annotator.prototype._setupWrapper = _.compose(
|
|
function() {
|
|
this.element.on('click', '.annotator-hl', _.bind(this.onHighlightClick, this));
|
|
return this;
|
|
},
|
|
Annotator.prototype._setupWrapper
|
|
);
|
|
|
|
$.extend(true, Annotator.prototype, {
|
|
isFrozen: false,
|
|
uid: _.uniqueId(),
|
|
|
|
onHighlightClick: function(event) {
|
|
event.stopPropagation();
|
|
if (!this.editor.isShown()) {
|
|
this.unfreezeAll();
|
|
this.onHighlightMouseover.call(this, event);
|
|
Annotator.frozenSrc = this;
|
|
this.freezeAll();
|
|
}
|
|
},
|
|
|
|
onNoteClick: function(event) {
|
|
var $target = $(event.target);
|
|
event.stopPropagation();
|
|
Annotator.Util.preventEventDefault(event);
|
|
|
|
if (!($target.is('.annotator-delete') || $target.is('.annotator-close'))) {
|
|
Annotator.frozenSrc = this;
|
|
this.freezeAll();
|
|
} else if ($target.is('.annotator-close')) {
|
|
this.viewer.hide();
|
|
}
|
|
},
|
|
|
|
freeze: function() {
|
|
if (!this.isFrozen) {
|
|
// Remove default events
|
|
this.removeEvents();
|
|
this.viewer.element.unbind('mouseover mouseout');
|
|
this.uid = _.uniqueId();
|
|
$(document).on('click.edxnotes:freeze' + this.uid, _.bind(this.unfreeze, this));
|
|
this.isFrozen = true;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
unfreeze: function() {
|
|
if (this.isFrozen) {
|
|
// Add default events
|
|
this.addEvents();
|
|
this.viewer.element.bind({
|
|
mouseover: this.clearViewerHideTimer,
|
|
mouseout: this.startViewerHideTimer
|
|
});
|
|
this.viewer.hide();
|
|
$(document).off('click.edxnotes:freeze' + this.uid);
|
|
this.isFrozen = false;
|
|
Annotator.frozenSrc = null;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
freezeAll: function() {
|
|
_.invoke(Annotator._instances, 'freeze');
|
|
return this;
|
|
},
|
|
|
|
unfreezeAll: function() {
|
|
_.invoke(Annotator._instances, 'unfreeze');
|
|
return this;
|
|
},
|
|
|
|
showFrozenViewer: function(annotations, location) {
|
|
this.showViewer(annotations, location);
|
|
this.freezeAll();
|
|
return this;
|
|
}
|
|
});
|
|
});
|
|
}).call(this, define || RequireJS.define);
|