Skip to content

Commit

Permalink
Temp hide show ui for plain and comment highlights (#348)
Browse files Browse the repository at this point in the history 
New: Temporary checks to hide ui base on disabled type
  • Loading branch information
@JustinHoldstock
JustinHoldstock authored Sep 5, 2017
1 parent 318501f commit 3dbddbf
Show file tree
Hide file tree
Showing 11 changed files with 429 additions and 93 deletions.
4 changes: 4 additions & 0 deletions src/lib/annotations/Annotator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,10 @@ class Annotator extends EventEmitter {

const pageThreads = this.getThreadsOnPage(pageNum);
Object.values(pageThreads).forEach((thread) => {
if (!this.isModeAnnotatable(thread.type)) {
return;
}

thread.show();
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/annotations/BoxAnnotations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const ANNOTATORS = [
NAME: 'Document',
CONSTRUCTOR: DocAnnotator,
VIEWER: ['Document', 'Presentation'],
TYPE: [TYPES.point, TYPES.highlight]
TYPE: [TYPES.point, TYPES.highlight, TYPES.highlight_comment]
},
{
NAME: 'Image',
Expand Down
9 changes: 5 additions & 4 deletions src/lib/annotations/MobileAnnotator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,20 +216,21 @@ $tablet: "(min-width: 768px)";
z-index: 9999;

.bp-annotation-highlight-btns {
display: flex;
justify-content: flex-start;
padding: 0;

button {
float: left;
flex-grow: 1;
padding: 15px 0;
width: 50%;

&:first-child::after {
&:nth-child(2)::before {
border-right: 1px solid $seesee;
bottom: 17px;
content: "";
height: 25px;
left: 50%;
position: absolute;
right: 50%;
}
}
}
Expand Down
15 changes: 15 additions & 0 deletions src/lib/annotations/__tests__/Annotator-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,21 @@ describe('lib/annotations/Annotator', () => {
stubs.threadMock3.expects('show').never();
annotator.renderAnnotationsOnPage(1);
});

it('should not call show() if the thread type is disabled', () => {
const badType = 'not_accepted';
stubs.thread3.type = badType;
stubs.thread2.type = 'type';

stubs.threadMock3.expects('show').never();
stubs.threadMock2.expects('show').once();

const isModeAnn = sandbox.stub(annotator, 'isModeAnnotatable');
isModeAnn.withArgs(badType).returns(false);
isModeAnn.withArgs('type').returns(true);

annotator.renderAnnotationsOnPage('2');
});
});

describe('rotateAnnotations()', () => {
Expand Down
134 changes: 87 additions & 47 deletions src/lib/annotations/doc/CreateHighlightDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,20 @@ const TITLE_HIGHLIGHT_TOGGLE = __('annotation_highlight_toggle');
const TITLE_HIGHLIGHT_COMMENT = __('annotation_highlight_comment');
const DATA_TYPE_HIGHLIGHT = 'add-highlight-btn';
const DATA_TYPE_ADD_HIGHLIGHT_COMMENT = 'add-highlight-comment-btn';
const CREATE_HIGHLIGHT_DIALOG_TEMPLATE = `
<div class="${constants.CLASS_ANNOTATION_CARET}" style="left: 50%;"></div>
<div>
<div class="${constants.CLASS_ANNOTATION_HIGHLIGHT_DIALOG}">
<span class="${constants.CLASS_HIGHLIGHT_BTNS}">
<button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_BTN}"
data-type="${DATA_TYPE_HIGHLIGHT}"
title="${TITLE_HIGHLIGHT_TOGGLE}">
${ICON_HIGHLIGHT}
</button>
<button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}"
data-type="${DATA_TYPE_ADD_HIGHLIGHT_COMMENT}""
title="${TITLE_HIGHLIGHT_COMMENT}">
${ICON_HIGHLIGHT_COMMENT}
</button>
</span>
</div>
</div>`.trim();

const CARAT_TEMPLATE = `<div class="${constants.CLASS_ANNOTATION_CARET}" style="left: 50%;"></div>`;
const HIGHLIGHT_BUTTON_TEMPLATE = `
<button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_BTN}"
data-type="${DATA_TYPE_HIGHLIGHT}"
title="${TITLE_HIGHLIGHT_TOGGLE}">
${ICON_HIGHLIGHT}
</button>`.trim();
const COMMENT_BUTTON_TEMPLATE = `
<button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}"
data-type="${DATA_TYPE_ADD_HIGHLIGHT_COMMENT}""
title="${TITLE_HIGHLIGHT_COMMENT}">
${ICON_HIGHLIGHT_COMMENT}
</button>`.trim();

/**
* Events emitted by this component.
Expand Down Expand Up @@ -71,6 +67,12 @@ class CreateHighlightDialog extends EventEmitter {
/** @property {boolean} - Whether or not this is visible. */
isVisible;

/** @property {boolean} - Whether or not to allow plain highlight interaction. */
allowHighlight;

/** @property {boolean} - Whether or not to allow comment interactions. */
allowComment;

/**
* A dialog used to create plain and comment highlights.
*
Expand All @@ -88,12 +90,19 @@ class CreateHighlightDialog extends EventEmitter {
this.parentEl = parentEl;
this.isMobile = config.isMobile || false;
this.hasTouch = config.hasTouch || false;
this.allowHighlight = config.allowHighlight !== undefined ? !!config.allowHighlight : true;
this.allowComment = config.allowComment !== undefined ? !!config.allowComment : true;

// Explicit scope binding for event listeners
this.onHighlightClick = this.onHighlightClick.bind(this);
this.onCommentClick = this.onCommentClick.bind(this);
this.onCommentPost = this.onCommentPost.bind(this);
this.onCommentCancel = this.onCommentCancel.bind(this);
if (this.allowHighlight) {
this.onHighlightClick = this.onHighlightClick.bind(this);
}

if (this.allowComment) {
this.onCommentClick = this.onCommentClick.bind(this);
this.onCommentPost = this.onCommentPost.bind(this);
this.onCommentCancel = this.onCommentCancel.bind(this);
}
}

/**
Expand Down Expand Up @@ -162,8 +171,10 @@ class CreateHighlightDialog extends EventEmitter {

hideElement(this.containerEl);

this.commentBox.hide();
this.commentBox.clear();
if (this.commentBox) {
this.commentBox.hide();
this.commentBox.clear();
}
}

/**
Expand All @@ -186,8 +197,6 @@ class CreateHighlightDialog extends EventEmitter {
// Event listeners
this.highlightCreateEl.removeEventListener('click', this.onHighlightClick);
this.commentCreateEl.removeEventListener('click', this.onCommentClick);
this.commentBox.removeListener(CommentBox.CommentEvents.post, this.onCommentPost);
this.commentBox.removeListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);

if (this.hasTouch) {
this.highlightCreateEl.removeEventListener('touchstart', this.stopPropagation);
Expand All @@ -201,8 +210,12 @@ class CreateHighlightDialog extends EventEmitter {
this.containerEl = null;
this.parentEl = null;

this.commentBox.destroy();
this.commentBox = null;
if (this.commentBox) {
this.commentBox.removeListener(CommentBox.CommentEvents.post, this.onCommentPost);
this.commentBox.removeListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);
this.commentBox.destroy();
this.commentBox = null;
}
}

//--------------------------------------------------------------------------
Expand Down Expand Up @@ -315,50 +328,77 @@ class CreateHighlightDialog extends EventEmitter {
* @return {HTMLElement} The element containing Highlight creation UI
*/
createElement() {
const caretTemplate = this.isMobile ? '' : CARAT_TEMPLATE;
const highlightTemplate = this.allowHighlight ? HIGHLIGHT_BUTTON_TEMPLATE : '';
const commentTemplate = this.allowComment ? COMMENT_BUTTON_TEMPLATE : '';

const createHighlightDialogTemplate = `
${caretTemplate}
<div>
<div class="${constants.CLASS_ANNOTATION_HIGHLIGHT_DIALOG}">
<span class="${constants.CLASS_HIGHLIGHT_BTNS}">
${highlightTemplate}
${commentTemplate}
</span>
</div>
</div>`.trim();

const highlightDialogEl = document.createElement('div');
highlightDialogEl.classList.add(CLASS_CREATE_DIALOG);
highlightDialogEl.innerHTML = CREATE_HIGHLIGHT_DIALOG_TEMPLATE;
highlightDialogEl.innerHTML = createHighlightDialogTemplate;

// Get rid of the caret
if (this.isMobile) {
highlightDialogEl.classList.add('bp-mobile-annotation-dialog');
highlightDialogEl.classList.add('bp-annotation-dialog');
highlightDialogEl.querySelector('.bp-annotation-caret').remove();
}

const containerEl = highlightDialogEl.querySelector(constants.SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);

// Reference HTML
this.highlightCreateEl = containerEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
this.commentCreateEl = containerEl.querySelector(`.${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`);
this.buttonsEl = containerEl.querySelector(constants.SELECTOR_HIGHLIGHT_BTNS);

// Create comment box
this.commentBox = new CommentBox(containerEl);

// Stop interacting with this element from triggering outside actions
highlightDialogEl.addEventListener('click', this.stopPropagation);
highlightDialogEl.addEventListener('mouseup', this.stopPropagation);
highlightDialogEl.addEventListener('dblclick', this.stopPropagation);

// Event listeners
this.highlightCreateEl.addEventListener('click', this.onHighlightClick);
this.commentCreateEl.addEventListener('click', this.onCommentClick);
this.commentBox.addListener(CommentBox.CommentEvents.post, this.onCommentPost);
this.commentBox.addListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);
// Events for highlight button
if (this.allowHighlight) {
this.highlightCreateEl = containerEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
this.highlightCreateEl.addEventListener('click', this.onHighlightClick);

if (this.hasTouch) {
this.highlightCreateEl.addEventListener('touchstart', this.stopPropagation);
this.highlightCreateEl.addEventListener('touchend', this.onHighlightClick);
}
}

// Events for comment button
if (this.allowComment) {
// Create comment box
this.commentBox = new CommentBox(containerEl);
this.commentCreateEl = containerEl.querySelector(`.${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`);
this.commentCreateEl.addEventListener('click', this.onCommentClick);

// Event listeners
this.commentBox.addListener(CommentBox.CommentEvents.post, this.onCommentPost);
this.commentBox.addListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);

// Hide comment box, by default
this.commentBox.hide();

if (this.hasTouch) {
this.commentCreateEl.addEventListener('touchstart', this.stopPropagation);
this.commentCreateEl.addEventListener('touchend', this.onCommentClick);
}
}

// touch events
if (this.hasTouch) {
this.highlightCreateEl.addEventListener('touchstart', this.stopPropagation);
this.commentCreateEl.addEventListener('touchstart', this.stopPropagation);
this.highlightCreateEl.addEventListener('touchend', this.onHighlightClick);
this.commentCreateEl.addEventListener('touchend', this.onCommentClick);
highlightDialogEl.addEventListener('touchend', this.stopPropagation);
}

// Hide comment box, by default
this.commentBox.hide();

return highlightDialogEl;
}
}
Expand Down
Loading

0 comments on commit 3dbddbf

Please sign in to comment.