Skip to content

Commit

Permalink
Chore: Passing localized strings into annotations (#441)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pramodsum
pramodsum authored Oct 19, 2017
1 parent 360989d commit 0ae1c47
Show file tree
Hide file tree
Showing 28 changed files with 548 additions and 423 deletions.
29 changes: 14 additions & 15 deletions src/lib/annotations/AnnotationDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,13 +478,13 @@ class AnnotationDialog extends EventEmitter {
// Temporary until annotation user API is available
let userName;
if (userId === '0') {
userName = __('annotation_posting_message');
userName = this.localized.posting;
} else {
userName = annotatorUtil.htmlEscape(annotation.user.name) || __('annotation_anonymous_user_name');
userName = annotatorUtil.htmlEscape(annotation.user.name) || this.localized.anonymousUserName;
}

const avatarUrl = annotatorUtil.htmlEscape(annotation.user.avatarUrl || '');
const avatarHtml = annotatorUtil.getAvatarHtml(avatarUrl, userId, userName);
const avatarHtml = annotatorUtil.getAvatarHtml(avatarUrl, userId, userName, this.localized.profileAlt);
const created = new Date(annotation.created).toLocaleString(this.locale, {
month: '2-digit',
day: '2-digit',
Expand All @@ -506,19 +506,19 @@ class AnnotationDialog extends EventEmitter {
<div class="comment-text">${text}</div>
<button class="bp-btn-plain ${CLASS_BUTTON_DELETE_COMMENT} ${annotation.permissions.can_delete
? ''
: constants.CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
: constants.CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${this.localized.deleteButton}">
${ICON_DELETE}
</button>
<div class="${CLASS_DELETE_CONFIRMATION} ${constants.CLASS_HIDDEN}">
<div class="delete-confirmation-message">
${__('annotation_delete_confirmation_message')}
${this.localized.deleteConfirmation}
</div>
<div class="${constants.CLASS_BUTTON_CONTAINER}">
<button class="bp-btn ${CLASS_CANCEL_DELETE}" data-type="${constants.DATA_TYPE_CANCEL_DELETE}">
${__('annotation_cancel')}
${this.localized.cancelButton}
</button>
<button class="bp-btn bp-btn-primary ${CLASS_BUTTON_DELETE_CONFIRM}" data-type="${constants.DATA_TYPE_CONFIRM_DELETE}">
${__('annotation_delete')}
${this.localized.delete}
</button>
</div>
</div>`.trim();
Expand Down Expand Up @@ -670,29 +670,28 @@ class AnnotationDialog extends EventEmitter {
dialogEl.innerHTML = `
<section class="${numAnnotations ? constants.CLASS_HIDDEN : ''}" data-section="create">
<textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA}"
placeholder="${__('annotation_add_comment_placeholder')}"></textarea>
placeholder="${this.localized.addCommentPlaceholder}"></textarea>
<div class="${constants.CLASS_BUTTON_CONTAINER}">
<button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL}">
${__('annotation_cancel')}
${this.localized.cancelButton}
</button>
<button class="bp-btn bp-btn-primary ${constants.CLASS_ANNOTATION_BUTTON_POST}" data-type="${constants.DATA_TYPE_POST}">
${__('annotation_post')}
${this.localized.postButton}
</button>
</div>
</section>
<section class="${numAnnotations ? '' : constants.CLASS_HIDDEN}" data-section="show">
<div class="${CLASS_COMMENTS_CONTAINER}"></div>
<div class="${CLASS_REPLY_CONTAINER}">
<textarea class="${constants.CLASS_TEXTAREA} ${CLASS_REPLY_TEXTAREA}"
placeholder="${__(
'annotation_reply_placeholder'
)}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
placeholder="${this.localized
.replyPlaceholder}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
<div class="${constants.CLASS_BUTTON_CONTAINER} ${constants.CLASS_HIDDEN}">
<button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL_REPLY}">
${__('annotation_cancel')}
${this.localized.cancelButton}
</button>
<button class="bp-btn bp-btn-primary ${constants.CLASS_ANNOTATION_BUTTON_POST}" data-type="${constants.DATA_TYPE_POST_REPLY}">
${__('annotation_post')}
${this.localized.postButton}
</button>
</div>
</div>
Expand Down
10 changes: 4 additions & 6 deletions src/lib/annotations/AnnotationService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@ import autobind from 'autobind-decorator';
import Annotation from './Annotation';
import { getHeaders } from './annotatorUtil';

const ANONYMOUS_USER = {
id: '0',
name: __('annotation_anonymous_user_name')
};

@autobind
class AnnotationService extends EventEmitter {
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -60,7 +55,10 @@ class AnnotationService extends EventEmitter {
this.fileId = data.fileId;
this.headers = getHeaders({}, data.token);
this.canAnnotate = data.canAnnotate;
this.user = ANONYMOUS_USER;
this.user = {
id: '0',
name: this.anonymousUserName
};
}

/**
Expand Down
2 changes: 2 additions & 0 deletions src/lib/annotations/AnnotationThread.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ class AnnotationThread extends EventEmitter {
this.isMobile = data.isMobile;
this.hasTouch = data.hasTouch;
this.permissions = data.permissions;
this.localized = data.localized;

this.setup();
}
Expand Down Expand Up @@ -312,6 +313,7 @@ class AnnotationThread extends EventEmitter {

if (this.dialog) {
this.dialog.isMobile = this.isMobile;
this.dialog.localized = this.localized;
}

this.setupElement();
Expand Down
18 changes: 10 additions & 8 deletions src/lib/annotations/Annotator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ class Annotator extends EventEmitter {
this.isMobile = options.isMobile || false;
this.hasTouch = options.hasTouch || false;
this.annotationModeHandlers = [];
this.localized = options.localizedStrings;

const { file } = this.options;
this.fileVersionId = file.file_version.id;
Expand Down Expand Up @@ -117,7 +118,8 @@ class Annotator extends EventEmitter {
apiHost,
fileId: file.id,
token,
canAnnotate: this.permissions.canAnnotate
canAnnotate: this.permissions.canAnnotate,
anonymousUserName: this.localized.anonymousUserName
});

// Set up mobile annotations dialog
Expand Down Expand Up @@ -901,7 +903,7 @@ class Annotator extends EventEmitter {
return;
}

this.emit(ANNOTATOR_EVENT.error, __('annotations_load_error'));
this.emit(ANNOTATOR_EVENT.error, this.localized.loadError);
/* eslint-disable no-console */
console.error('Annotation could not be created due to invalid params');
/* eslint-enable no-console */
Expand All @@ -921,18 +923,18 @@ class Annotator extends EventEmitter {
let errorMessage = '';
switch (data.reason) {
case 'read':
errorMessage = __('annotations_load_error');
errorMessage = this.localized.loadError;
break;
case 'create':
errorMessage = __('annotations_create_error');
errorMessage = this.localized.createError;
this.showAnnotations();
break;
case 'delete':
errorMessage = __('annotations_delete_error');
errorMessage = this.localized.deleteError;
this.showAnnotations();
break;
case 'authorization':
errorMessage = __('annotations_authorization_error');
errorMessage = this.localized.authError;
break;
default:
}
Expand Down Expand Up @@ -980,11 +982,11 @@ class Annotator extends EventEmitter {
this.emit(data.event, data.data);
break;
case THREAD_EVENT.deleteError:
this.emit(ANNOTATOR_EVENT.error, __('annotations_delete_error'));
this.emit(ANNOTATOR_EVENT.error, this.localized.deleteError);
this.emit(data.event, data.data);
break;
case THREAD_EVENT.createError:
this.emit(ANNOTATOR_EVENT.error, __('annotations_create_error'));
this.emit(ANNOTATOR_EVENT.error, this.localized.createError);
this.emit(data.event, data.data);
break;
default:
Expand Down
21 changes: 7 additions & 14 deletions src/lib/annotations/CommentBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,27 @@ import EventEmitter from 'events';
import * as constants from './annotationConstants';
import { hideElement, showElement } from './annotatorUtil';

// Display Text
const TEXT_ANNOTATION_CANCEL = __('annotation_cancel');
const TEXT_ANNOTATION_POST = __('annotation_post');
const TEXT_ADD_COMMENT_PLACEHOLDER = __('annotation_add_comment_placeholder');

class CommentBox extends EventEmitter {
/**
* Text displayed in the Cancel button element.
*
* @property {string}
*/
cancelText = TEXT_ANNOTATION_CANCEL;
cancelText;

/**
* Text displayed in the Post button element.
*
* @property {string}
*/
postText = TEXT_ANNOTATION_POST;
postText;

/**
* Placeholder text displayed in the text area element.
*
* @property {string}
*/
placeholderText = TEXT_ADD_COMMENT_PLACEHOLDER;
placeholderText;

/**
* Reference to the comment box element. Contains buttons and text area.
Expand Down Expand Up @@ -78,19 +73,17 @@ class CommentBox extends EventEmitter {
*
* @param {HTMLElement} parentEl - Parent element
* @param {Object} [config] - Object containing text values to be displayed to the user.
* @param {string} config.cancel - Text displayed in the "Cancel" button
* @param {string} config.post - Text displayed in the "Post" button
* @param {string} config.placeholder - Placeholder text displayed in the text area
* @param {Object} config.localized - Translated strings for UI
*/
constructor(parentEl, config = {}) {
super();

this.parentEl = parentEl;

this.cancelText = config.cancel || this.cancelText;
this.postText = config.post || this.postText;
this.placeholderText = config.placeholder || this.placeholderText;
this.hasTouch = config.hasTouch;
this.cancelText = config.localized.cancelButton;
this.postText = config.localized.postButton;
this.placeholderText = config.localized.addCommentPlaceholder;

// Explicit scope binding for event listeners
this.onCancel = this.onCancel.bind(this);
Expand Down
6 changes: 5 additions & 1 deletion src/lib/annotations/__tests__/AnnotationDialog-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ describe('lib/annotations/AnnotationDialog', () => {
annotations: [],
canAnnotate: true
});
dialog.localized = {
addCommentPlaceholder: 'add comment placeholder',
posting: 'posting'
};
dialog.setup([]);
document.querySelector('.annotated-element').appendChild(dialog.element);

Expand Down Expand Up @@ -606,7 +610,7 @@ describe('lib/annotations/AnnotationDialog', () => {
})
);
const username = document.querySelector('.user-name');
expect(username).to.contain.html(__('annotation_posting_message'));
expect(username).to.contain.html(dialog.localized.posting);
});

it('should display user name if the user id is not 0', () => {
Expand Down
13 changes: 10 additions & 3 deletions src/lib/annotations/__tests__/Annotator-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,14 @@ describe('lib/annotations/Annotator', () => {
isMobile: false,
options,
modeButtons: {},
location: {}
location: {},
localizedStrings: {
anonymousUserName: 'anonymous',
loadError: 'load error',
createError: 'create error',
deleteError: 'delete error',
authError: 'auth error',
}
});
annotator.threads = {};
annotator.modeControllers = {};
Expand Down Expand Up @@ -1048,7 +1055,7 @@ describe('lib/annotations/Annotator', () => {
};
annotator.handleAnnotationThreadEvents(data);
expect(stubs.emit).to.be.calledWith(data.event, data.data);
expect(stubs.emit).to.be.calledWith(ANNOTATOR_EVENT.error, __('annotations_delete_error'));
expect(stubs.emit).to.be.calledWith(ANNOTATOR_EVENT.error, sinon.match.string);
expect(stubs.unbind).to.not.be.called;
expect(stubs.remove).to.not.be.called;
});
Expand All @@ -1061,7 +1068,7 @@ describe('lib/annotations/Annotator', () => {
};
annotator.handleAnnotationThreadEvents(data);
expect(stubs.emit).to.be.calledWith(data.event, data.data);
expect(stubs.emit).to.be.calledWith(ANNOTATOR_EVENT.error, __('annotations_create_error'));
expect(stubs.emit).to.be.calledWith(ANNOTATOR_EVENT.error, sinon.match.string);
expect(stubs.unbind).to.not.be.called;
expect(stubs.remove).to.not.be.called;
});
Expand Down
22 changes: 13 additions & 9 deletions src/lib/annotations/__tests__/CommentBox-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@ describe('lib/annotations/CommentBox', () => {

beforeEach(() => {
parentEl = document.createElement('span');
commentBox = new CommentBox(parentEl);
commentBox = new CommentBox(parentEl, {
localized: {
cancelButton: 'cancel'
}
});
});

afterEach(() => {
Expand All @@ -24,14 +28,14 @@ describe('lib/annotations/CommentBox', () => {

describe('constructor()', () => {
let tempCommentBox;
const config = {
placeholder: 'some placeholder',
cancel: 'some cancel',
post: 'some postage'
const localized = {
cancelButton: 'cancel',
postButton: 'post',
addCommentPlaceholder: 'placeholder'
};

beforeEach(() => {
tempCommentBox = new CommentBox(parentEl, config);
tempCommentBox = new CommentBox(parentEl, { localized });
});

afterEach(() => {
Expand All @@ -44,15 +48,15 @@ describe('lib/annotations/CommentBox', () => {
});

it('should assign cancelText to the string passed in the config', () => {
expect(tempCommentBox.cancelText).to.equal(config.cancel);
expect(tempCommentBox.cancelText).to.equal(localized.cancelButton);
});

it('should assign postText to the string passed in the config', () => {
expect(tempCommentBox.postText).to.equal(config.post);
expect(tempCommentBox.postText).to.equal(localized.postButton);
});

it('should assign placeholderText to the string passed in the config', () => {
expect(tempCommentBox.placeholderText).to.equal(config.placeholder);
expect(tempCommentBox.placeholderText).to.equal(localized.addCommentPlaceholder);
});
});

Expand Down
17 changes: 14 additions & 3 deletions src/lib/annotations/__tests__/annotatorUtil-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ import {
round,
prevDefAndStopProp,
canLoadAnnotations,
insertTemplate
insertTemplate,
generateBtn
} from '../annotatorUtil';
import {
STATES,
Expand Down Expand Up @@ -223,7 +224,6 @@ describe('lib/annotations/annotatorUtil', () => {
});
});


describe('insertTemplate()', () => {
it('should insert template into node', () => {
const node = document.createElement('div');
Expand All @@ -234,6 +234,17 @@ describe('lib/annotations/annotatorUtil', () => {
});
});

describe('generateBtn()', () => {
it('should return button node from specified details', () => {
const btn = generateBtn('class', 'title', 'content', 'type');
expect(btn).to.have.class('bp-btn-plain');
expect(btn).to.have.class('class');
expect(btn).to.have.attribute('data-type', 'type');
expect(btn).to.have.attribute('title', 'title');
expect(btn).to.have.text('content');
});
});

describe('isElementInViewport()', () => {
it('should return true for an element fully in the viewport', () => {
assert.ok(isElementInViewport(childEl));
Expand All @@ -250,7 +261,7 @@ describe('lib/annotations/annotatorUtil', () => {
describe('getAvatarHtml()', () => {
it('should return avatar HTML with img if avatarUrl is provided', () => {
const expectedHtml = '<img src="https://example.com" alt="Avatar">';
assert.equal(getAvatarHtml('https://example.com', '1', 'Some Name'), expectedHtml);
assert.equal(getAvatarHtml('https://example.com', '1', 'Some Name', 'Avatar'), expectedHtml);
});

it('should return avatar HTML initials if no avatarUrl is provided', () => {
Expand Down
Loading

0 comments on commit 0ae1c47

Please sign in to comment.