Skip to content

Commit

Permalink
Chore: Cleaning up annotation strings/classes (#215)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pramodsum
pramodsum authored Jul 14, 2017
1 parent a6fe4b6 commit 0cfcaf7
Show file tree
Hide file tree
Showing 31 changed files with 526 additions and 395 deletions.
2 changes: 1 addition & 1 deletion src/lib/Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,7 +824,7 @@ const PREVIEW_LOCATION = findScriptLocation(PREVIEW_SCRIPT_NAME, document.curren
* @return {void}
*/
finishLoading(data = {}) {
// Show or hide annotate/print/download buttons
// Show or hide print/download buttons
// canDownload is not supported by all of our browsers, so for now we need to check isMobile
if (checkPermission(this.file, PERMISSION_DOWNLOAD) && this.options.showDownload && Browser.canDownload()) {
this.ui.showDownloadButton(this.download);
Expand Down
136 changes: 82 additions & 54 deletions src/lib/annotations/AnnotationDialog.js
View file

Large diffs are not rendered by default.

22 changes: 9 additions & 13 deletions src/lib/annotations/AnnotationThread.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import autobind from 'autobind-decorator';
import Annotation from './Annotation';
import AnnotationService from './AnnotationService';
import * as annotatorUtil from './annotatorUtil';
import * as constants from './annotationConstants';
import { ICON_PLACED_ANNOTATION } from '../icons/icons';
import { STATES, TYPES, CLASS_ANNOTATION_POINT_BUTTON, DATA_TYPE_ANNOTATION_INDICATOR } from './annotationConstants';

@autobind class AnnotationThread extends EventEmitter {
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -92,7 +92,7 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
* @return {void}
*/
reset() {
this.state = constants.ANNOTATION_STATE_INACTIVE;
this.state = STATES.inactive;
}

/**
Expand Down Expand Up @@ -144,7 +144,7 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
this.saveAnnotationToThread(tempAnnotation);

// Changing state from pending
this.state = constants.ANNOTATION_STATE_HOVER;
this.state = STATES.hover;

// Save annotation on server
this.annotationService
Expand Down Expand Up @@ -282,9 +282,9 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
*/
setup() {
if (this.annotations.length === 0) {
this.state = constants.ANNOTATION_STATE_PENDING;
this.state = STATES.pending;
} else {
this.state = constants.ANNOTATION_STATE_INACTIVE;
this.state = STATES.inactive;
}

this.createDialog();
Expand Down Expand Up @@ -385,11 +385,7 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
* @return {void}
*/
cancelUnsavedAnnotation() {
if (
!this.isMobile &&
this.state !== constants.ANNOTATION_STATE_PENDING &&
this.state !== constants.ANNOTATION_STATE_PENDING_ACTIVE
) {
if (!this.isMobile && !annotatorUtil.isPending(this.state)) {
return;
}
this.destroy();
Expand All @@ -407,8 +403,8 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
*/
createElement() {
const indicatorEl = document.createElement('button');
indicatorEl.classList.add('bp-point-annotation-btn');
indicatorEl.setAttribute('data-type', 'annotation-indicator');
indicatorEl.classList.add(CLASS_ANNOTATION_POINT_BUTTON);
indicatorEl.setAttribute('data-type', DATA_TYPE_ANNOTATION_INDICATOR);
indicatorEl.innerHTML = ICON_PLACED_ANNOTATION;
return indicatorEl;
}
Expand Down Expand Up @@ -469,7 +465,7 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
* @return {void}
*/
createAnnotation(data) {
this.saveAnnotation(constants.ANNOTATION_TYPE_POINT, data.text);
this.saveAnnotation(TYPES.point, data.text);
}

/**
Expand Down
33 changes: 21 additions & 12 deletions src/lib/annotations/Annotator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,20 @@ import EventEmitter from 'events';
import autobind from 'autobind-decorator';
import Notification from '../Notification';
import AnnotationService from './AnnotationService';
import * as constants from './annotationConstants';
import * as annotatorUtil from './annotatorUtil';
import { CLASS_ACTIVE, CLASS_HIDDEN } from '../constants';
import { ICON_CLOSE } from '../icons/icons';
import './Annotator.scss';
import {
DATA_TYPE_ANNOTATION_DIALOG,
CLASS_MOBILE_ANNOTATION_DIALOG,
CLASS_ANNOTATION_DIALOG,
CLASS_MOBILE_DIALOG_HEADER,
CLASS_DIALOG_CLOSE,
TYPES
} from './annotationConstants';

const CLASS_ANNOTATION_POINT_MODE = 'bp-point-annotation-mode';

@autobind class Annotator extends EventEmitter {
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -98,14 +107,14 @@ import './Annotator.scss';
setupMobileDialog() {
// Generate HTML of dialog
const mobileDialogEl = document.createElement('div');
mobileDialogEl.setAttribute('data-type', 'annotation-dialog');
mobileDialogEl.classList.add(constants.CLASS_MOBILE_ANNOTATION_DIALOG);
mobileDialogEl.classList.add(constants.CLASS_ANNOTATION_DIALOG);
mobileDialogEl.setAttribute('data-type', DATA_TYPE_ANNOTATION_DIALOG);
mobileDialogEl.classList.add(CLASS_MOBILE_ANNOTATION_DIALOG);
mobileDialogEl.classList.add(CLASS_ANNOTATION_DIALOG);
mobileDialogEl.classList.add(CLASS_HIDDEN);

mobileDialogEl.innerHTML = `
<div class="bp-annotation-mobile-header">
<button class="bp-annotation-dialog-close">${ICON_CLOSE}</button>
<div class="${CLASS_MOBILE_DIALOG_HEADER}">
<button class="${CLASS_DIALOG_CLOSE}">${ICON_CLOSE}</button>
</div>`.trim();

this.container.appendChild(mobileDialogEl);
Expand Down Expand Up @@ -237,7 +246,7 @@ import './Annotator.scss';
this.notification.hide();

this.emit('annotationmodeexit');
this.annotatedElement.classList.remove(constants.CLASS_ANNOTATION_POINT_MODE);
this.annotatedElement.classList.remove(CLASS_ANNOTATION_POINT_MODE);
if (buttonEl) {
buttonEl.classList.remove(CLASS_ACTIVE);
}
Expand All @@ -250,7 +259,7 @@ import './Annotator.scss';
this.notification.show(__('notification_annotation_mode'));

this.emit('annotationmodeenter');
this.annotatedElement.classList.add(constants.CLASS_ANNOTATION_POINT_MODE);
this.annotatedElement.classList.add(CLASS_ANNOTATION_POINT_MODE);
if (buttonEl) {
buttonEl.classList.add(CLASS_ACTIVE);
}
Expand Down Expand Up @@ -495,7 +504,7 @@ import './Annotator.scss';
}

// Get annotation location from click event, ignore click if location is invalid
const location = this.getLocationFromEvent(event, constants.ANNOTATION_TYPE_POINT);
const location = this.getLocationFromEvent(event, TYPES.point);
if (!location) {
this.togglePointModeHandler();
return;
Expand All @@ -505,7 +514,7 @@ import './Annotator.scss';
this.togglePointModeHandler();

// Create new thread with no annotations, show indicator, and show dialog
const thread = this.createAnnotationThread([], location, constants.ANNOTATION_TYPE_POINT);
const thread = this.createAnnotationThread([], location, TYPES.point);

if (thread) {
thread.show();
Expand Down Expand Up @@ -536,7 +545,7 @@ import './Annotator.scss';
* @return {boolean} Whether or not in point mode
*/
isInPointMode() {
return this.annotatedElement.classList.contains(constants.CLASS_ANNOTATION_POINT_MODE);
return this.annotatedElement.classList.contains(CLASS_ANNOTATION_POINT_MODE);
}

//--------------------------------------------------------------------------
Expand All @@ -554,7 +563,7 @@ import './Annotator.scss';
let hasPendingThreads = false;
Object.keys(this.threads).forEach((page) => {
this.threads[page].forEach((pendingThread) => {
if (pendingThread.state === constants.ANNOTATION_STATE_PENDING) {
if (annotatorUtil.isPending(pendingThread.state)) {
hasPendingThreads = true;
pendingThread.destroy();
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/annotations/Annotator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ $avatar-color-9: #f22c44;
fill: $highlight-yellow;
}

&.highlight-active svg {
&.bp-is-active svg {
fill: $highlight-yellow-active-hover;
}

Expand Down
5 changes: 3 additions & 2 deletions src/lib/annotations/BoxAnnotations.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import DocAnnotator from './doc/DocAnnotator';
import ImageAnnotator from './image/ImageAnnotator';
import { TYPES } from './annotationConstants';

const ANNOTATORS = [
{
NAME: 'Document',
CONSTRUCTOR: DocAnnotator,
VIEWER: ['Document', 'Presentation'],
TYPE: ['point', 'highlight']
TYPE: [TYPES.point, TYPES.highlight]
},
{
NAME: 'Image',
CONSTRUCTOR: ImageAnnotator,
VIEWER: ['Image', 'MultiImage'],
TYPE: ['point']
TYPE: [TYPES.point]
}
];

Expand Down
15 changes: 8 additions & 7 deletions src/lib/annotations/CommentBox.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import EventEmitter from 'events';
import { CLASS_ACTIVE } from '../constants';
import * as constants from './annotationConstants';
import { hideElement, showElement } from './annotatorUtil';

// Display Text
Expand Down Expand Up @@ -177,13 +178,13 @@ class CommentBox extends EventEmitter {
const containerEl = document.createElement('section');
containerEl.classList.add('bp-create-highlight-comment');
containerEl.innerHTML = `
<textarea class="bp-textarea annotation-textarea ${CLASS_ACTIVE}"
<textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA} ${CLASS_ACTIVE}"
placeholder="${this.placeholderText}"></textarea>
<div class="button-container">
<button class="bp-btn cancel-annotation-btn">
<div class="${constants.CLASS_BUTTON_CONTAINER}">
<button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}">
${this.cancelText}
</button>
<button class="bp-btn bp-btn-primary post-annotation-btn">
<button class="bp-btn bp-btn-primary ${constants.CLASS_ANNOTATION_BUTTON_POST}">
${this.postText}
</button>
</div>`.trim();
Expand Down Expand Up @@ -224,9 +225,9 @@ class CommentBox extends EventEmitter {
const containerEl = this.createHTML();

// Reference HTML
this.textAreaEl = containerEl.querySelector('.annotation-textarea');
this.cancelEl = containerEl.querySelector('.cancel-annotation-btn');
this.postEl = containerEl.querySelector('.post-annotation-btn');
this.textAreaEl = containerEl.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
this.cancelEl = containerEl.querySelector(constants.SELECTOR_ANNOTATION_BUTTON_CANCEL);
this.postEl = containerEl.querySelector(constants.SELECTOR_ANNOTATION_BUTTON_POST);

// Add event listeners
this.cancelEl.addEventListener('click', this.onCancel);
Expand Down
Loading

0 comments on commit 0cfcaf7

Please sign in to comment.