Skip to content

Commit

Permalink
Chore: Renaming annotator classes names to be more generic (#51)
Browse files Browse the repository at this point in the history 
* rename src/{annotationConstants.js => constants.js}
* rename src/doc/{docAnnotatorUtil.js => docUtil.js}
* rename src/image/{imageAnnotatorUtil.js => imageUtil.js}
* rename src/{annotationsShell.html => shell.html}
* rename src/{annotatorUtil.js => util.js}

* Chore: cleanup + removing duplicate imports
  • Loading branch information
@pramodsum
pramodsum authored Nov 28, 2017
1 parent ce3538a commit 21cc74c
Show file tree
Hide file tree
Showing 58 changed files with 466 additions and 490 deletions.
60 changes: 30 additions & 30 deletions src/AnnotationDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import EventEmitter from 'events';
import * as annotatorUtil from './annotatorUtil';
import * as constants from './annotationConstants';
import * as util from './util';
import * as constants from './constants';
import { ICON_CLOSE, ICON_DELETE } from './icons/icons';

const POINT_ANNOTATION_ICON_HEIGHT = 31;
Expand Down Expand Up @@ -124,7 +124,7 @@ class AnnotationDialog extends EventEmitter {
}

// Focus the textarea if visible
if (annotatorUtil.isElementInViewport(textAreaEl)) {
if (util.isElementInViewport(textAreaEl)) {
textAreaEl.focus();
}
}
Expand All @@ -136,7 +136,7 @@ class AnnotationDialog extends EventEmitter {
*/
showMobileDialog() {
this.element = this.container.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
annotatorUtil.showElement(this.element);
util.showElement(this.element);
this.element.appendChild(this.dialogEl);

const commentEls = this.element.querySelectorAll(`.${CLASS_COMMENT}`);
Expand Down Expand Up @@ -183,7 +183,7 @@ class AnnotationDialog extends EventEmitter {
const dialogCloseButtonEl = this.element.querySelector(constants.SELECTOR_DIALOG_CLOSE);
dialogCloseButtonEl.removeEventListener('click', this.hideMobileDialog);

annotatorUtil.hideElement(this.element);
util.hideElement(this.element);
this.unbindDOMListeners();

// Cancel any unsaved annotations
Expand All @@ -204,7 +204,7 @@ class AnnotationDialog extends EventEmitter {
this.hideMobileDialog();
}

annotatorUtil.hideElement(this.element);
util.hideElement(this.element);
this.deactivateReply();

// Make sure entire thread icon displays for flipped dialogs
Expand All @@ -222,8 +222,8 @@ class AnnotationDialog extends EventEmitter {
if (!this.hasAnnotations) {
const createSectionEl = this.element.querySelector(constants.SECTION_CREATE);
const showSectionEl = this.element.querySelector(constants.SECTION_SHOW);
annotatorUtil.hideElement(createSectionEl);
annotatorUtil.showElement(showSectionEl);
util.hideElement(createSectionEl);
util.showElement(showSectionEl);
this.hasAnnotations = true;
}

Expand Down Expand Up @@ -301,7 +301,7 @@ class AnnotationDialog extends EventEmitter {
this.element.appendChild(this.dialogEl);

// Adding thread number to dialog
const firstAnnotation = annotatorUtil.getFirstAnnotation(annotations);
const firstAnnotation = util.getFirstAnnotation(annotations);
if (firstAnnotation) {
this.element.dataset.threadNumber = firstAnnotation.threadNumber;
}
Expand Down Expand Up @@ -413,7 +413,7 @@ class AnnotationDialog extends EventEmitter {
*/
mouseenterHandler() {
if (this.element.classList.contains(constants.CLASS_HIDDEN)) {
annotatorUtil.showElement(this.element);
util.showElement(this.element);

const replyTextArea = this.element.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
const commentsTextArea = this.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
Expand Down Expand Up @@ -490,11 +490,11 @@ class AnnotationDialog extends EventEmitter {
keydownHandler(event) {
event.stopPropagation();

const key = annotatorUtil.decodeKeydown(event);
const key = util.decodeKeydown(event);
if (key === 'Escape') {
this.hide();
} else {
const dataType = annotatorUtil.findClosestDataType(event.target);
const dataType = util.findClosestDataType(event.target);
if (dataType === CLASS_REPLY_TEXTAREA) {
this.activateReply();
}
Expand Down Expand Up @@ -523,8 +523,8 @@ class AnnotationDialog extends EventEmitter {
event.stopPropagation();

const eventTarget = event.target;
const dataType = annotatorUtil.findClosestDataType(eventTarget);
const annotationID = annotatorUtil.findClosestDataType(eventTarget, 'data-annotation-id');
const dataType = util.findClosestDataType(eventTarget);
const annotationID = util.findClosestDataType(eventTarget, 'data-annotation-id');

switch (dataType) {
// Clicking 'Post' button to create an annotation
Expand Down Expand Up @@ -581,26 +581,26 @@ class AnnotationDialog extends EventEmitter {
* @return {void}
*/
addAnnotationElement(annotation) {
const userId = annotatorUtil.htmlEscape(annotation.user.id || '0');
const userId = util.htmlEscape(annotation.user.id || '0');

// Temporary until annotation user API is available
let userName;
if (userId === '0') {
userName = this.localized.posting;
} else {
userName = annotatorUtil.htmlEscape(annotation.user.name) || this.localized.anonymousUserName;
userName = util.htmlEscape(annotation.user.name) || this.localized.anonymousUserName;
}

const avatarUrl = annotatorUtil.htmlEscape(annotation.user.avatarUrl || '');
const avatarHtml = annotatorUtil.getAvatarHtml(avatarUrl, userId, userName, this.localized.profileAlt);
const avatarUrl = util.htmlEscape(annotation.user.avatarUrl || '');
const avatarHtml = util.getAvatarHtml(avatarUrl, userId, userName, this.localized.profileAlt);
const created = new Date(annotation.created).toLocaleString(this.locale, {
month: '2-digit',
day: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
const text = annotatorUtil.htmlEscape(annotation.text);
const text = util.htmlEscape(annotation.text);

const annotationEl = document.createElement('div');
annotationEl.classList.add(CLASS_COMMENT);
Expand Down Expand Up @@ -641,7 +641,7 @@ class AnnotationDialog extends EventEmitter {
return;
}

const deleteBtn = annotatorUtil.generateBtn(
const deleteBtn = util.generateBtn(
[constants.CLASS_BUTTON_PLAIN, CLASS_BUTTON_DELETE_COMMENT],
this.localized.deleteButton,
ICON_DELETE,
Expand All @@ -663,15 +663,15 @@ class AnnotationDialog extends EventEmitter {
deleteBtnsEl.classList.add(constants.CLASS_BUTTON_CONTAINER);
deleteConfirmEl.appendChild(deleteBtnsEl);

const cancelDeleteBtn = annotatorUtil.generateBtn(
const cancelDeleteBtn = util.generateBtn(
[constants.CLASS_BUTTON, CLASS_CANCEL_DELETE],
this.localized.cancelButton,
this.localized.cancelButton,
constants.DATA_TYPE_CANCEL_DELETE
);
deleteBtnsEl.appendChild(cancelDeleteBtn);

const confirmDeleteBtn = annotatorUtil.generateBtn(
const confirmDeleteBtn = util.generateBtn(
[constants.CLASS_BUTTON, CLASS_BUTTON_DELETE_CONFIRM, constants.CLASS_BUTTON_PRIMARY],
this.localized.deleteButton,
this.localized.deleteButton,
Expand Down Expand Up @@ -711,7 +711,7 @@ class AnnotationDialog extends EventEmitter {

const replyButtonEls = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
replyTextEl.classList.add(constants.CLASS_ACTIVE);
annotatorUtil.showElement(replyButtonEls);
util.showElement(replyButtonEls);

// Auto scroll annotations dialog to bottom where new comment was added
const annotationsEl = this.dialogEl.querySelector(constants.SELECTOR_ANNOTATION_CONTAINER);
Expand All @@ -735,11 +735,11 @@ class AnnotationDialog extends EventEmitter {
const replyContainerEl = this.dialogEl.querySelector(`.${CLASS_REPLY_CONTAINER}`);
const replyTextEl = replyContainerEl.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
const replyButtonEls = replyContainerEl.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
annotatorUtil.resetTextarea(replyTextEl, clearText);
annotatorUtil.hideElement(replyButtonEls);
util.resetTextarea(replyTextEl, clearText);
util.hideElement(replyButtonEls);

// Only focus on textarea if dialog is visible
if (annotatorUtil.isElementInViewport(replyTextEl)) {
if (util.isElementInViewport(replyTextEl)) {
replyTextEl.focus();
}

Expand Down Expand Up @@ -780,8 +780,8 @@ class AnnotationDialog extends EventEmitter {
const deleteConfirmationEl = annotationEl.querySelector(`.${CLASS_DELETE_CONFIRMATION}`);
const cancelDeleteButtonEl = annotationEl.querySelector(`.${CLASS_CANCEL_DELETE}`);
const deleteButtonEl = annotationEl.querySelector(constants.SELECTOR_DELETE_COMMENT_BTN);
annotatorUtil.hideElement(deleteButtonEl);
annotatorUtil.showElement(deleteConfirmationEl);
util.hideElement(deleteButtonEl);
util.showElement(deleteConfirmationEl);
cancelDeleteButtonEl.focus();
}

Expand All @@ -796,8 +796,8 @@ class AnnotationDialog extends EventEmitter {
const annotationEl = this.element.querySelector(`[data-annotation-id="${annotationID}"]`);
const deleteConfirmationEl = annotationEl.querySelector(`.${CLASS_DELETE_CONFIRMATION}`);
const deleteButtonEl = annotationEl.querySelector(constants.SELECTOR_DELETE_COMMENT_BTN);
annotatorUtil.showElement(deleteButtonEl);
annotatorUtil.hideElement(deleteConfirmationEl);
util.showElement(deleteButtonEl);
util.hideElement(deleteConfirmationEl);
deleteButtonEl.focus();
}

Expand Down
2 changes: 1 addition & 1 deletion src/AnnotationService.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'whatwg-fetch';
import EventEmitter from 'events';
import Annotation from './Annotation';
import { getHeaders } from './annotatorUtil';
import { getHeaders } from './util';

class AnnotationService extends EventEmitter {
//--------------------------------------------------------------------------
Expand Down
26 changes: 13 additions & 13 deletions src/AnnotationThread.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import EventEmitter from 'events';
import Annotation from './Annotation';
import AnnotationService from './AnnotationService';
import * as annotatorUtil from './annotatorUtil';
import * as util from './util';
import { ICON_PLACED_ANNOTATION } from './icons/icons';
import {
STATES,
TYPES,
CLASS_ANNOTATION_POINT_MARKER,
DATA_TYPE_ANNOTATION_INDICATOR,
THREAD_EVENT
} from './annotationConstants';
} from './constants';

class AnnotationThread extends EventEmitter {
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -100,7 +100,7 @@ class AnnotationThread extends EventEmitter {
* @return {void}
*/
hide() {
annotatorUtil.hideElement(this.element);
util.hideElement(this.element);
}

/**
Expand Down Expand Up @@ -212,14 +212,14 @@ class AnnotationThread extends EventEmitter {

// If the user doesn't have permission to delete the entire highlight
// annotation, display the annotation as a plain highlight
let firstAnnotation = annotatorUtil.getFirstAnnotation(this.annotations);
let firstAnnotation = util.getFirstAnnotation(this.annotations);
let canDeleteAnnotation =
firstAnnotation && firstAnnotation.permissions && firstAnnotation.permissions.can_delete;
if (annotatorUtil.isPlainHighlight(this.annotations) && !canDeleteAnnotation) {
if (util.isPlainHighlight(this.annotations) && !canDeleteAnnotation) {
this.cancelFirstComment();

// If this annotation was the last one in the thread, destroy the thread
} else if (!firstAnnotation || annotatorUtil.isPlainHighlight(this.annotations)) {
} else if (!firstAnnotation || util.isPlainHighlight(this.annotations)) {
if (this.isMobile && this.dialog) {
this.dialog.hideMobileDialog();
this.dialog.removeAnnotation(annotationID);
Expand Down Expand Up @@ -249,15 +249,15 @@ class AnnotationThread extends EventEmitter {
.then(() => {
// Ensures that blank highlight comment is also deleted when removing
// the last comment on a highlight
firstAnnotation = annotatorUtil.getFirstAnnotation(this.annotations);
firstAnnotation = util.getFirstAnnotation(this.annotations);
canDeleteAnnotation =
firstAnnotation && firstAnnotation.permissions && firstAnnotation.permissions.can_delete;
if (annotatorUtil.isPlainHighlight(this.annotations) && canDeleteAnnotation) {
if (util.isPlainHighlight(this.annotations) && canDeleteAnnotation) {
this.annotationService.delete(firstAnnotation.annotationID);
}

// Broadcast thread cleanup if needed
firstAnnotation = annotatorUtil.getFirstAnnotation(this.annotations);
firstAnnotation = util.getFirstAnnotation(this.annotations);
if (!firstAnnotation) {
this.emit(THREAD_EVENT.threadCleanup);
}
Expand Down Expand Up @@ -312,7 +312,7 @@ class AnnotationThread extends EventEmitter {
* @return {void}
*/
setup() {
const firstAnnotation = annotatorUtil.getFirstAnnotation(this.annotations);
const firstAnnotation = util.getFirstAnnotation(this.annotations);
if (!firstAnnotation) {
this.state = STATES.pending;
} else {
Expand Down Expand Up @@ -423,7 +423,7 @@ class AnnotationThread extends EventEmitter {
* @return {void}
*/
cancelUnsavedAnnotation() {
if (!annotatorUtil.isPending(this.state)) {
if (!util.isPending(this.state)) {
return;
}

Expand Down Expand Up @@ -549,9 +549,9 @@ class AnnotationThread extends EventEmitter {
return;
}

const mouseInDialog = annotatorUtil.isInDialog(event, this.dialog.element);
const mouseInDialog = util.isInDialog(event, this.dialog.element);

const firstAnnotation = annotatorUtil.getFirstAnnotation(this.annotations);
const firstAnnotation = util.getFirstAnnotation(this.annotations);
if (firstAnnotation && !mouseInDialog) {
this.hideDialog();
}
Expand Down
16 changes: 8 additions & 8 deletions src/Annotator.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import EventEmitter from 'events';
import AnnotationService from './AnnotationService';
import * as annotatorUtil from './annotatorUtil';
import * as util from './util';
import { ICON_CLOSE } from './icons/icons';
import './Annotator.scss';
import {
Expand All @@ -16,7 +16,7 @@ import {
THREAD_EVENT,
ANNOTATOR_EVENT,
CONTROLLER_EVENT
} from './annotationConstants';
} from './constants';

class Annotator extends EventEmitter {
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -362,7 +362,7 @@ class Annotator extends EventEmitter {
// Generate map of page to threads
Object.keys(threadMap).forEach((threadID) => {
const annotations = threadMap[threadID];
const firstAnnotation = annotatorUtil.getFirstAnnotation(annotations);
const firstAnnotation = util.getFirstAnnotation(annotations);
if (!firstAnnotation || !this.isModeAnnotatable(firstAnnotation.type)) {
return;
}
Expand Down Expand Up @@ -451,7 +451,7 @@ class Annotator extends EventEmitter {
};

// Set existing thread ID if created with annotations
const firstAnnotation = annotatorUtil.getFirstAnnotation(annotations);
const firstAnnotation = util.getFirstAnnotation(annotations);
if (firstAnnotation) {
params.threadID = firstAnnotation.threadID;
params.threadNumber = firstAnnotation.threadNumber;
Expand Down Expand Up @@ -585,9 +585,9 @@ class Annotator extends EventEmitter {
const pointButtonSelector = this.modeButtons[TYPES.point].selector;
const pointAnnotateButton = controller.getButton(pointButtonSelector);
if (rotationAngle !== 0) {
annotatorUtil.hideElement(pointAnnotateButton);
util.hideElement(pointAnnotateButton);
} else {
annotatorUtil.showElement(pointAnnotateButton);
util.showElement(pointAnnotateButton);
}
}

Expand Down Expand Up @@ -740,12 +740,12 @@ class Annotator extends EventEmitter {
this.bindDOMListeners();
break;
case CONTROLLER_EVENT.register:
opt = annotatorUtil.addThreadToMap(data.data, this.threads);
opt = util.addThreadToMap(data.data, this.threads);
this.threads[opt.page] = opt.pageThreads;
this.emit(data.event, data.data);
break;
case CONTROLLER_EVENT.unregister:
opt = annotatorUtil.removeThreadFromMap(data.data, this.threads);
opt = util.removeThreadFromMap(data.data, this.threads);
this.threads[opt.page] = opt.pageThreads;
this.emit(data.event, data.data);
break;
Expand Down
4 changes: 2 additions & 2 deletions src/BoxAnnotations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import ImageAnnotator from './image/ImageAnnotator';
import DrawingModeController from './controllers/DrawingModeController';
import PointModeController from './controllers/PointModeController';
import HighlightModeController from './controllers/HighlightModeController';
import { TYPES } from './annotationConstants';
import { canLoadAnnotations } from './annotatorUtil';
import { TYPES } from './constants';
import { canLoadAnnotations } from './util';

/**
* NAME: The name of the annotator.
Expand Down
Loading

0 comments on commit 21cc74c

Please sign in to comment.