Skip to content

Commit

Permalink
Fix: Only show create dialog when creating new point annotations (#29)
Browse files Browse the repository at this point in the history 
* Fix: Only show create dialog when creating new point annotations
* Chore: Move CreateEvents to annotationConstants.js
* Chore: Consolidating common methods in create dialogs
  • Loading branch information
@pramodsum
pramodsum authored Nov 14, 2017
1 parent 968efb3 commit 4822ece
Show file tree
Hide file tree
Showing 23 changed files with 1,243 additions and 568 deletions.
52 changes: 31 additions & 21 deletions src/AnnotationDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,26 +82,10 @@ class AnnotationDialog extends EventEmitter {
* @return {void}
*/
show() {
// Populate mobile annotations dialog with annotations information
// Populate mobile annotations dialog with annotations
// information
if (this.isMobile) {
this.element = this.container.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
annotatorUtil.showElement(this.element);
this.element.appendChild(this.dialogEl);

const commentEls = this.element.querySelectorAll(`.${CLASS_COMMENT}`);
if (this.highlightDialogEl && !commentEls.length) {
this.element.classList.add(constants.CLASS_ANNOTATION_PLAIN_HIGHLIGHT);

const headerEl = this.element.querySelector(constants.SELECTOR_MOBILE_DIALOG_HEADER);
headerEl.classList.add(constants.CLASS_HIDDEN);
}

const dialogCloseButtonEl = this.element.querySelector(constants.SELECTOR_DIALOG_CLOSE);
dialogCloseButtonEl.addEventListener('click', this.hideMobileDialog);

this.element.classList.add(constants.CLASS_ANIMATE_DIALOG);

this.bindDOMListeners();
this.showMobileDialog();
}

const textAreaEl = this.hasAnnotations
Expand All @@ -114,8 +98,8 @@ class AnnotationDialog extends EventEmitter {
return;
}

// Position and show - we need to reposition every time since the DOM
// could have changed from zooming
// Position and show - we need to reposition every time since
// the DOM could have changed from zooming
if (!this.isMobile) {
this.position();
}
Expand Down Expand Up @@ -144,6 +128,32 @@ class AnnotationDialog extends EventEmitter {
}
}

/**
* Shows the shared mobile dialog.
*
* @return {void}
*/
showMobileDialog() {
this.element = this.container.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
annotatorUtil.showElement(this.element);
this.element.appendChild(this.dialogEl);

const commentEls = this.element.querySelectorAll(`.${CLASS_COMMENT}`);
if (this.highlightDialogEl && !commentEls.length) {
this.element.classList.add(constants.CLASS_ANNOTATION_PLAIN_HIGHLIGHT);

const headerEl = this.element.querySelector(constants.SELECTOR_MOBILE_DIALOG_HEADER);
headerEl.classList.add(constants.CLASS_HIDDEN);
}

const dialogCloseButtonEl = this.element.querySelector(constants.SELECTOR_DIALOG_CLOSE);
dialogCloseButtonEl.addEventListener('click', this.hideMobileDialog);

this.element.classList.add(constants.CLASS_ANIMATE_DIALOG);

this.bindDOMListeners();
}

/**
* Hides and resets the shared mobile dialog.
*
Expand Down
58 changes: 56 additions & 2 deletions src/Annotator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
CLASS_DIALOG_CLOSE,
ID_MOBILE_ANNOTATION_DIALOG,
TYPES,
STATES,
THREAD_EVENT,
ANNOTATOR_EVENT,
CONTROLLER_EVENT
} from './annotationConstants';
Expand Down Expand Up @@ -68,6 +70,8 @@ class Annotator extends EventEmitter {
const { CONTROLLERS } = this.options.annotator || {};
this.modeControllers = CONTROLLERS || {};

this.createPointThread = this.createPointThread.bind(this);

this.fetchPromise = this.fetchAnnotations();
}

Expand Down Expand Up @@ -261,7 +265,8 @@ class Annotator extends EventEmitter {

const options = {
header: this.options.header,
isTouchCompatible: this.isMobile && this.hasTouch
isMobile: this.isMobile,
hasTouch: this.hasTouch
};
Object.keys(this.modeControllers).forEach((type) => {
const controller = this.modeControllers[type];
Expand All @@ -270,7 +275,6 @@ class Annotator extends EventEmitter {
annotatedElement: this.annotatedElement,
mode: type,
modeButton: this.modeButtons[type],

permissions: this.permissions,
annotator: this,
options
Expand Down Expand Up @@ -302,6 +306,15 @@ class Annotator extends EventEmitter {
</div>`.trim();

this.container.appendChild(mobileDialogEl);

const pointController = this.modeControllers[TYPES.point];
if (pointController) {
pointController.setupSharedDialog(this.container, {
isMobile: this.isMobile,
hasTouch: this.hasTouch,
localized: this.localized
});
}
}

/**
Expand Down Expand Up @@ -459,6 +472,44 @@ class Annotator extends EventEmitter {
return modes[0] || null;
}

/**
* Creates a point annotation thread, adds it to in-memory map, and returns it.
*
* @private
* @param {Object} data - Thread data
* @param {string} data.commentText - The text for the first comment in
* the thread.
* @param {string} data.lastPointEvent - Point event for the annotation location
* @param {string} data.pendingThreadID - Thread ID for the current pending point thread
* @return {AnnotationThread} Created point annotation thread
*/
createPointThread(data) {
// Empty string will be passed in if no text submitted in comment
const { commentText, lastPointEvent, pendingThreadID } = data;
if (!lastPointEvent || !pendingThreadID || !commentText || commentText.trim() === '') {
return null;
}

const location = this.getLocationFromEvent(lastPointEvent, TYPES.point);
if (!location) {
return null;
}

const pageThreads = this.threads[location.page] || {};
const thread = pageThreads[pendingThreadID];
if (!thread) {
return null;
}

thread.dialog.hasComments = true;
thread.state = STATES.hover;
thread.showDialog();
thread.dialog.postAnnotation(commentText);

this.emit(THREAD_EVENT.threadSave, thread.getThreadEventData());
return thread;
}

//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -696,6 +747,9 @@ class Annotator extends EventEmitter {
this.threads[opt.page] = opt.pageThreads;
this.emit(data.event, data.data);
break;
case CONTROLLER_EVENT.createThread:
this.createPointThread(data.data);
break;
default:
this.emit(data.event, data.data);
}
Expand Down
31 changes: 16 additions & 15 deletions src/CommentBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,16 +79,14 @@ class CommentBox extends EventEmitter {
super();

this.parentEl = parentEl;

this.hasTouch = config.hasTouch;

this.localized = config.localized;
this.cancelText = config.localized.cancelButton;
this.postText = config.localized.postButton;
this.placeholderText = config.localized.addCommentPlaceholder;

// Explicit scope binding for event listeners
this.focus = this.focus.bind(this);
this.onCancel = this.onCancel.bind(this);
this.onPost = this.onPost.bind(this);
this.containerEl = this.createCommentBox();
}

/**
Expand Down Expand Up @@ -160,23 +158,24 @@ class CommentBox extends EventEmitter {
return;
}

this.containerEl.removeEventListener('touchend', this.preventDefaultAndPropagation);

this.containerEl.remove();
this.parentEl = null;
this.containerEl = null;

if (this.cancelEl) {
this.cancelEl.removeEventListener('click', this.onCancel);
this.cancelEl.removeEventListener('touchstart', this.onCancel);
this.cancelEl.removeEventListener('touchend', this.onCancel);
}

if (this.postEl) {
this.postEl.removeEventListener('click', this.onPost);
this.postEl.removeEventListener('touchstart', this.onPost);
this.postEl.removeEventListener('touchend', this.onPost);
}

if (this.textAreaEl) {
this.textAreaEl.removeEventListener('focus', this.focus);
this.textAreaEl.removeEventListener('keydown', this.focus);
}
}

Expand All @@ -192,7 +191,7 @@ class CommentBox extends EventEmitter {
*/
createHTML() {
const containerEl = document.createElement('section');
containerEl.classList.add('bp-create-highlight-comment');
containerEl.classList.add('bp-create-comment');
containerEl.innerHTML = `
<textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA} ${constants.CLASS_ACTIVE}"
placeholder="${this.placeholderText}"></textarea>
Expand Down Expand Up @@ -270,14 +269,16 @@ class CommentBox extends EventEmitter {
this.postEl = containerEl.querySelector(constants.SELECTOR_ANNOTATION_BUTTON_POST);

// Add event listeners
this.textAreaEl.addEventListener('focus', this.focus);
this.cancelEl.addEventListener('click', this.onCancel);
this.postEl.addEventListener('click', this.onPost);

if (this.hasTouch) {
this.textAreaEl.addEventListener('keydown', this.focus);
this.textAreaEl.addEventListener('focus', this.focus.bind(this));
containerEl.addEventListener('touchend', this.preventDefaultAndPropagation.bind(this));
this.cancelEl.addEventListener('touchend', this.onCancel);
this.postEl.addEventListener('touchend', this.onPost);
this.cancelEl.addEventListener('touchend', this.onCancel.bind(this));
this.postEl.addEventListener('touchend', this.onPost.bind(this));
} else {
this.textAreaEl.addEventListener('focus', this.focus);
this.cancelEl.addEventListener('click', this.onCancel);
this.postEl.addEventListener('click', this.onPost);
}

return containerEl;
Expand Down
Loading

0 comments on commit 4822ece

Please sign in to comment.