constants.js

export const USER_ANONYMOUS = 'Anonymous';

// Preview CSS constants
export const CLASS_ACTIVE = 'bp-is-active';
export const SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;
export const CLASS_HIDDEN = 'bp-is-hidden';
export const SELECTOR_HIDDEN = `.${CLASS_HIDDEN}`;
export const CLASS_INVISIBLE = 'bp-is-invisible';
export const SELECTOR_INVISIBLE = `.${CLASS_INVISIBLE}`;
export const CLASS_DISABLED = 'is-disabled';
export const SELECTOR_DISABLED = `.${CLASS_DISABLED}`;

export const CLASS_BUTTON = 'bp-btn';
export const SELECTOR_BUTTON = `.${CLASS_BUTTON}`;
export const CLASS_BUTTON_PLAIN = 'bp-btn-plain';
export const SELECTOR_BUTTON_PLAIN = `.${CLASS_BUTTON_PLAIN}`;
export const CLASS_BUTTON_PRIMARY = 'bp-btn-primary';
export const SELECTOR_BUTTON_PRIMARY = `.${CLASS_BUTTON_PRIMARY}`;

export const CLASS_BOX_PREVIEW_HEADER = 'bp-header';
export const SELECTOR_BOX_PREVIEW_HEADER = `.${CLASS_BOX_PREVIEW_HEADER}`;
export const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
export const SELECTOR_BOX_PREVIEW_BASE_HEADER = `.${CLASS_BOX_PREVIEW_BASE_HEADER}`;
export const CLASS_ANNOTATION_BUTTON_POINT = 'bp-btn-annotate-point';
export const SELECTOR_ANNOTATION_BUTTON_POINT = `.${CLASS_ANNOTATION_BUTTON_POINT}`;
export const CLASS_ANNOTATION_BUTTON_DRAW = 'bp-btn-annotate-draw';
export const SELECTOR_ANNOTATION_BUTTON_DRAW = `.${CLASS_ANNOTATION_BUTTON_DRAW}`;
export const CLASS_ANNOTATION_BUTTON_DRAW_ENTER = 'bp-btn-annotate-draw-enter';
export const SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER = `.${CLASS_ANNOTATION_BUTTON_DRAW_ENTER}`;
export const CLASS_BOX_PREVIEW_HEADER_CONTAINER = 'bp-header-container';
export const SELECTOR_BOX_PREVIEW_HEADER_CONTAINER = `.${CLASS_BOX_PREVIEW_HEADER_CONTAINER}`;

export const CLASS_BOX_PREVIEW = 'bp';
export const SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`;
export const CLASS_PREVIEW_PRESENTATION = 'bp-doc-presentation';
export const SELECTOR_PREVIEW_PRESENTATION = `.${CLASS_PREVIEW_PRESENTATION}`;
export const CLASS_TEXT_LAYER = 'textLayer';
export const SELECTOR_TEXT_LAYER = `.${CLASS_TEXT_LAYER}`;

// Annotation CSS constants
export const CLASS_ANNOTATED_ELEMENT = 'annotated-element';
export const SELECTOR_ANNOTATED_ELEMENT = `.${CLASS_ANNOTATED_ELEMENT}`;
export const CLASS_ANNOTATIONS_LOADED = 'ba-annotations-loaded';
export const SELECTOR_ANNOTATIONS_LOADED = `.${CLASS_ANNOTATIONS_LOADED}`;
export const CLASS_ANNOTATION_POINT_MARKER = 'ba-point-annotation-marker';
export const SELECTOR_ANNOTATION_POINT_MARKER = `.${CLASS_ANNOTATION_POINT_MARKER}`;
export const CLASS_ANNOTATION_POINT_BUTTON = 'ba-point-annotation-btn';
export const SELECTOR_ANNOTATION_POINT_BUTTON = `.${CLASS_ANNOTATION_POINT_BUTTON}`;

// Dialog CSS constants
export const CLASS_ANNOTATION_DIALOG = 'ba-annotation-dialog';
export const SELECTOR_ANNOTATION_DIALOG = `.${CLASS_ANNOTATION_DIALOG}`;
export const CLASS_ANNOTATION_CARET = 'ba-annotation-caret';
export const SELECTOR_ANNOTATION_CARET = `.${CLASS_ANNOTATION_CARET}`;

export const CLASS_TEXTAREA = 'ba-textarea';
export const SELECTOR_TEXTAREA = `.${CLASS_TEXTAREA}`;
export const CLASS_ANNOTATION_TEXTAREA = 'annotation-textarea';
export const SELECTOR_ANNOTATION_TEXTAREA = `.${CLASS_ANNOTATION_TEXTAREA}`;
export const CLASS_INVALID_INPUT = 'ba-invalid-input';
export const SELECTOR_INVALID_INPUT = `.${CLASS_INVALID_INPUT}`;

export const CLASS_BUTTON_CONTAINER = 'button-container';
export const SELECTOR_BUTTON_CONTAINER = `.${CLASS_BUTTON_CONTAINER}`;
export const CLASS_ANNOTATION_BUTTON_CANCEL = 'cancel-annotation-btn';
export const SELECTOR_ANNOTATION_BUTTON_CANCEL = `.${CLASS_ANNOTATION_BUTTON_CANCEL}`;
export const CLASS_ANNOTATION_BUTTON_POST = 'post-annotation-btn';
export const SELECTOR_ANNOTATION_BUTTON_POST = `.${CLASS_ANNOTATION_BUTTON_POST}`;
export const CLASS_DELETE_COMMENT_BTN = 'delete-comment-btn';
export const SELECTOR_DELETE_COMMENT_BTN = `.${CLASS_DELETE_COMMENT_BTN}`;

export const CLASS_DELETE_CONFIRM_MESSAGE = 'delete-confirmation-message';
export const SELECTOR_DELETE_CONFIRM_MESSAGE = `.${CLASS_DELETE_CONFIRM_MESSAGE}`;
export const CLASS_CANCEL_DELETE_BTN = 'cancel-delete-btn';
export const SELECTOR_CANCEL_DELETE_BTN = `.${CLASS_CANCEL_DELETE_BTN}`;
export const CLASS_CONFIRM_DELETE_BTN = 'confirm-delete-btn';
export const SELECTOR_CONFIRM_DELETE_BTN = `.${CLASS_CONFIRM_DELETE_BTN}`;

export const CLASS_ANNOTATION_CONTAINER = 'annotation-container';
export const SELECTOR_ANNOTATION_CONTAINER = `.${CLASS_ANNOTATION_CONTAINER}`;
export const CLASS_ANNOTATION_COMMENT = 'annotation-comment';
export const SELECTOR_ANNOTATION_COMMENT = `.${CLASS_ANNOTATION_COMMENT}`;
export const CLASS_ANNOTATION_COMMENT_TEXT = 'ba-annotation-comment-text';
export const SELECTOR_ANNOTATION_COMMENT_TEXT = `.${CLASS_ANNOTATION_COMMENT_TEXT}`;
export const CLASS_PROFILE_CONTAINER = 'profile-container';
export const SELECTOR_PROFILE_CONTAINER = `.${CLASS_PROFILE_CONTAINER}`;
export const CLASS_PROFILE_IMG_CONTAINER = 'profile-image-container';
export const SELECTOR_PROFILE_IMG_CONTAINER = `.${CLASS_PROFILE_IMG_CONTAINER}`;
export const CLASS_USER_NAME = 'user-name';
export const SELECTOR_USER_NAME = `.${CLASS_USER_NAME}`;
export const CLASS_COMMENT_DATE = 'comment-date';
export const SELECTOR_COMMENT_DATE = `.${CLASS_COMMENT_DATE}`;

export const CLASS_REPLY_CONTAINER = 'reply-container';
export const SELECTOR_REPLY_CONTAINER = `.${CLASS_REPLY_CONTAINER}`;
export const CLASS_REPLY_TEXTAREA = 'reply-textarea';
export const SELECTOR_REPLY_TEXTAREA = `.${CLASS_REPLY_TEXTAREA}`;

export const CLASS_CREATE_COMMENT = 'ba-create-comment';
export const SELECTOR_CREATE_COMMENT = `.${CLASS_CREATE_COMMENT}`;

// Highlight dialog CSS constants
export const CLASS_ANNOTATION_HIGHLIGHT_DIALOG = 'ba-annotation-highlight-dialog';
export const SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG = `.${CLASS_ANNOTATION_HIGHLIGHT_DIALOG}`;
export const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'ba-plain-highlight';
export const SELECTOR_ANNOTATION_PLAIN_HIGHLIGHT = `.${CLASS_ANNOTATION_PLAIN_HIGHLIGHT}`;

export const CLASS_HIGHLIGHT_DIALOG = 'ba-highlight-dialog';
export const SELECTOR_HIGHLIGHT_DIALOG = `.${CLASS_HIGHLIGHT_DIALOG}`;
export const CLASS_TEXT_HIGHLIGHTED = 'ba-is-text-highlighted';
export const SELECTOR_TEXT_HIGHLIGHTED = `.${CLASS_TEXT_HIGHLIGHTED}`;
export const CLASS_HIGHLIGHT_LABEL = 'ba-annotation-highlight-label';
export const SELECTOR_HIGHLIGHT_LABEL = `.${CLASS_HIGHLIGHT_LABEL}`;
export const CLASS_HIGHLIGHT_BTNS = 'ba-annotation-highlight-btns';
export const SELECTOR_HIGHLIGHT_BTNS = `.${CLASS_HIGHLIGHT_BTNS}`;
export const CLASS_ADD_HIGHLIGHT_BTN = 'ba-add-highlight-btn';
export const SELECTOR_ADD_HIGHLIGHT_BTN = `.${CLASS_ADD_HIGHLIGHT_BTN}`;
export const CLASS_ADD_HIGHLIGHT_COMMENT_BTN = 'ba-highlight-comment-btn';
export const SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN = `.${CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`;
export const CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER = 'ba-quad-corner-container';
export const SELECTOR_HIGHLIGHT_QUAD_CORNER_CONTAINER = `.${CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER}`;
export const CLASS_HIGHLIGHT_QUAD_CORNER = 'ba-quad-corner';
export const SELECTOR_HIGHLIGHT_QUAD_CORNER = `.${CLASS_HIGHLIGHT_QUAD_CORNER}`;

// Drawing dialog CSS constants
export const CLASS_ANNOTATION_DRAWING_LABEL = 'ba-annotation-drawing-label';
export const SELECTOR_ANNOTATION_DRAWING_LABEL = `.${CLASS_ANNOTATION_DRAWING_LABEL}`;
export const CLASS_ANNOTATION_DRAWING_DIALOG = 'ba-annotation-drawing-dialog';
export const SELECTOR_ANNOTATION_DRAWING_DIALOG = `.${CLASS_ANNOTATION_DRAWING_DIALOG}`;

export const CLASS_ANNOTATION_DRAWING_BTNS = 'ba-annotation-drawing-btns';
export const SELECTOR_ANNOTATION_DRAWING_BTNS = `.${CLASS_ANNOTATION_DRAWING_BTNS}`;
export const CLASS_ADD_DRAWING_BTN = 'ba-btn-annotate-draw-add';
export const SELECTOR_ADD_DRAWING_BTN = `.${CLASS_ADD_DRAWING_BTN}`;
export const CLASS_DELETE_DRAWING_BTN = 'ba-btn-annotate-draw-delete';
export const SELECTOR_DELETE_DRAWING_BTN = `.${CLASS_DELETE_DRAWING_BTN}`;

// Mobile dialog CSS constants
export const CLASS_ANIMATE_DIALOG = 'ba-animate-show-dialog';
export const SELECTOR_ANIMATE_DIALOG = `.${CLASS_ANIMATE_DIALOG}`;
export const CLASS_MOBILE_ANNOTATION_DIALOG = 'ba-mobile-annotation-dialog';
export const SELECTOR_MOBILE_ANNOTATION_DIALOG = `.${CLASS_MOBILE_ANNOTATION_DIALOG}`;
export const CLASS_MOBILE_CREATE_ANNOTATION_DIALOG = 'ba-mobile-create-annotation-dialog';
export const SELECTOR_MOBILE_CREATE_ANNOTATION_DIALOG = `.${CLASS_MOBILE_CREATE_ANNOTATION_DIALOG}`;
export const CLASS_MOBILE_CREATE_HIGHLIGHT_DIALOG = 'ba-mobile-create-highlight-dialog';
export const SELECTOR_MOBILE_CREATE_HIGHLIGHT_DIALOG = `.${CLASS_MOBILE_CREATE_HIGHLIGHT_DIALOG}`;
export const CLASS_CREATE_DIALOG = 'ba-create-annotation-dialog';
export const SELECTOR_CREATE_DIALOG = `.${CLASS_CREATE_DIALOG}`;

export const CLASS_MOBILE_DIALOG_HEADER = 'ba-annotation-mobile-header';
export const SELECTOR_MOBILE_DIALOG_HEADER = `.${CLASS_MOBILE_DIALOG_HEADER}`;
export const CLASS_DIALOG_CLOSE = 'ba-annotation-dialog-close';
export const SELECTOR_DIALOG_CLOSE = `.${CLASS_DIALOG_CLOSE}`;

// Annotation mode CSS constants
export const CLASS_ANNOTATION_MODE = 'ba-annotation-mode';
export const SELECTOR_ANNOTATION_MODE = `.${CLASS_ANNOTATION_MODE}`;
export const CLASS_ANNOTATION_POINT_MODE = 'ba-point-mode';
export const SELECTOR_ANNOTATION_POINT_MODE = `.${CLASS_ANNOTATION_POINT_MODE}`;
export const CLASS_ANNOTATION_DRAW_MODE = 'ba-draw-mode';
export const SELECTOR_ANNOTATION_DRAW_MODE = `.${CLASS_ANNOTATION_DRAW_MODE}`;
export const CLASS_ANNNOTATION_MODE_BACKGROUND = 'ba-annotate-mode-background';
export const SELECTOR_ANNNOTATION_MODE_BACKGROUND = `.${CLASS_ANNNOTATION_MODE_BACKGROUND}`;
export const CLASS_ANNOTATION_BUTTON_POINT_EXIT = 'ba-btn-annotate-point-exit';
export const SELECTOR_ANNOTATION_BUTTON_POINT_EXIT = `.${CLASS_ANNOTATION_BUTTON_POINT_EXIT}`;

export const CLASS_ANNOTATION_MODE_HEADER = 'ba-mode-header';
export const SELECTOR_ANNOTATION_MODE_HEADER = `.${CLASS_ANNOTATION_MODE_HEADER}`;
export const CLASS_POINT_MODE_HEADER = 'ba-point-mode-header';
export const SELECTOR_POINT_MODE_HEADER = `.${CLASS_POINT_MODE_HEADER}`;
export const CLASS_DRAW_MODE_HEADER = 'ba-draw-mode-header';
export const SELECTOR_DRAW_MODE_HEADER = `.${CLASS_DRAW_MODE_HEADER}`;

export const CLASS_ANNOTATION_LAYER_HIGHLIGHT = 'ba-annotation-layer-highlight';
export const SELECTOR_ANNOTATION_LAYER_HIGHLIGHT = `.${CLASS_ANNOTATION_LAYER_HIGHLIGHT}`;
export const CLASS_ANNOTATION_LAYER_HIGHLIGHT_COMMENT = 'ba-annotation-layer-highlight-comment';
export const SELECTOR_ANNOTATION_LAYER_HIGHLIGHT_COMMENT = `.${CLASS_ANNOTATION_LAYER_HIGHLIGHT_COMMENT}`;
export const CLASS_ANNOTATION_LAYER_DRAW = 'ba-annotation-layer-draw';
export const SELECTOR_ANNOTATION_LAYER_DRAW = `.${CLASS_ANNOTATION_LAYER_DRAW}`;
export const CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS = 'ba-annotation-layer-draw-in-progress';
export const SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS = `.${CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS}`;

// Drawing CSS constants
export const CLASS_ANNOTATION_DRAW = 'ba-annotation-draw';
export const SELECTOR_ANNOTATION_DRAW = `.${CLASS_ANNOTATION_DRAW}`;
export const CLASS_ANNOTATION_BUTTON_DRAW_UNDO = 'ba-btn-annotate-draw-undo';
export const SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO = `.${CLASS_ANNOTATION_BUTTON_DRAW_UNDO}`;
export const CLASS_ANNOTATION_BUTTON_DRAW_REDO = 'ba-btn-annotate-draw-redo';
export const SELECTOR_ANNOTATION_BUTTON_DRAW_REDO = `.${CLASS_ANNOTATION_BUTTON_DRAW_REDO}`;
export const CLASS_ANNOTATION_BUTTON_DRAW_POST = 'ba-btn-annotate-draw-post';
export const SELECTOR_ANNOTATION_BUTTON_DRAW_POST = `.${CLASS_ANNOTATION_BUTTON_DRAW_POST}`;
export const CLASS_ANNOTATION_BUTTON_DRAW_CANCEL = 'ba-btn-annotate-draw-cancel';
export const SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL = `.${CLASS_ANNOTATION_BUTTON_DRAW_CANCEL}`;

// Data types
export const DATA_TYPE_ANNOTATION_DIALOG = 'annotation-dialog';
export const DATA_TYPE_ANNOTATION_INDICATOR = 'annotation-indicator';
export const DATA_TYPE_HIGHLIGHT = 'highlight-btn';
export const DATA_TYPE_ADD_HIGHLIGHT_COMMENT = 'add-highlight-comment-btn';
export const DATA_TYPE_POST = 'post-annotation-btn';
export const DATA_TYPE_CANCEL = 'cancel-annotation-btn';
export const DATA_TYPE_REPLY_TEXTAREA = 'reply-textarea';
export const DATA_TYPE_CANCEL_REPLY = 'cancel-reply-btn';
export const DATA_TYPE_POST_REPLY = 'post-reply-btn';
export const DATA_TYPE_DELETE = 'delete-btn';
export const DATA_TYPE_CANCEL_DELETE = 'cancel-delete-btn';
export const DATA_TYPE_CONFIRM_DELETE = 'confirm-delete-btn';
export const DATA_TYPE_MOBILE_CLOSE = 'mobile-dialog-close-btn';

export const SECTION_CREATE = '[data-section="create"]';
export const SECTION_SHOW = '[data-section="show"]';

export const PERMISSION_ANNOTATE = 'can_annotate';
export const PERMISSION_CAN_VIEW_ANNOTATIONS_ALL = 'can_view_annotations_all';
export const PERMISSION_CAN_VIEW_ANNOTATIONS_SELF = 'can_view_annotations_self';

export const DRAW_STATES = {
    idle: 'idle',
    drawing: 'drawing',
    erasing: 'erasing'
};

export const STATES = {
    hover: 'hover', // mouse is over
    inactive: 'inactive', // not clicked and mouse is not over
    pending: 'pending', // not saved
    pending_active: 'pending-active' // not saved and pending comment
};
export const PENDING_STATES = [STATES.pending, STATES.pending_active];

export const TYPES = {
    point: 'point',
    highlight: 'highlight',
    draw: 'draw',
    highlight_comment: 'highlight-comment'
};

export const ANNOTATOR_TYPE = {
    doc: 'document',
    image: 'image'
};

export const HIGHLIGHT_FILL = {
    normal: 'rgba(254, 217, 78, 0.5)',
    active: 'rgba(255, 201, 0, 0.5)',
    erase: 'rgba(255, 245, 132, 1)'
};

export const ANNOTATOR_EVENT = {
    fetch: 'annotationsfetched',
    error: 'annotationerror',
    scale: 'scaleannotations'
};

export const THREAD_EVENT = {
    pending: 'annotationpending',
    threadSave: 'annotationthreadsaved',
    threadDelete: 'annotationthreaddeleted',
    threadCleanup: 'annotationthreadcleanup',
    save: 'annotationsaved',
    delete: 'annotationdeleted',
    deleteError: 'annotationdeleteerror',
    cancel: 'annotationcanceled',
    createError: 'annotationcreateerror',
    show: 'annotationshow',
    hide: 'annotationhide'
};

export const CONTROLLER_EVENT = {
    toggleMode: 'togglemode',
    enter: 'annotationmodeenter',
    exit: 'annotationmodeexit',
    createThread: 'createannotationthread',
    register: 'registerthread',
    unregister: 'unregisterthread',
    bindDOMListeners: 'binddomlisteners',
    unbindDOMListeners: 'unbinddomlisteners',
    renderPage: 'annotationsrenderpage',
    resetMobileDialog: 'annotationsmobiledialogreset'
};

export const CREATE_EVENT = {
    init: 'init',
    post: 'post_comment',
    cancel: 'cancel',
    plain: 'plain_highlight_create',
    comment: 'comment_highlight_edit'
};

export const PAGE_PADDING_TOP = 15;
export const PAGE_PADDING_BOTTOM = 15;

export const ID_MOBILE_ANNOTATION_DIALOG = 'mobile-annotation-dialog';

export const DRAW_RENDER_THRESHOLD = 16.67; // 60 FPS target using 16.667ms/frame
export const DRAW_BASE_LINE_WIDTH = 3;
export const BORDER_OFFSET = 5;
export const DRAW_DASHED_SPACING = 5;