How to use PopupAnnotation method in wpt

Best JavaScript code snippet using wpt

layer.js

Source:layer.js Github

copy

Full Screen

1'use strict';2import React, { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo } from 'react';3import ReactDOM from 'react-dom';4import cx from 'classnames';5import Highlight from './highlight';6import Note from './note';7import Area from './area';8import AreaSelector from './area-selector';9import SelectionMenu from './selection-menu';10import PagePopup from './page-popup';11import { PopupPreview } from './preview';12import { p2v as p2vc, v2p as v2pc, wx, hy } from '../lib/coordinates';13import {14 throttle,15 findOrCreateContainerLayer,16 pointerEventToPosition,17 setDataTransferAnnotations18} from '../lib/utilities';19import Ink from './ink';20function PageLayerInk(props) {21 function getContainerNode(viewport) {22 return findOrCreateContainerLayer(23 viewport.div,24 'layer-ink'25 );26 }27 let node = getContainerNode(props.view);28 if (!node) return null;29 return ReactDOM.createPortal(30 <div className={cx({ 'selecting-annotation': !!props.selectedAnnotationIDs.length })}>31 {props.annotations.map(32 (annotation, index) => {33 let { position, ...rest } = annotation;34 let viewportAnnotation = {35 position: p2vc(position, props.view.viewport),36 ...rest37 };38 return (39 <div key={annotation.id}>40 <Ink41 annotation={viewportAnnotation}42 isSelected={props.selectedAnnotationIDs.includes(annotation.id)}43 />44 </div>45 );46 }47 )}48 </div>,49 node50 );51}52function PageLayerHighlight(props) {53 function getContainerNode(viewport) {54 return findOrCreateContainerLayer(55 viewport.div,56 'layer-highlight'57 );58 }59 let node = getContainerNode(props.view);60 if (!node) return null;61 return ReactDOM.createPortal(62 <div className={cx({ 'selecting-annotation': !!props.selectedAnnotationIDs.length })}>63 {props.annotations.map(64 (annotation, index) => {65 let { position, ...rest } = annotation;66 let viewportAnnotation = {67 position: p2vc(position, props.view.viewport),68 ...rest69 };70 return (71 <div key={annotation.id}>72 <Highlight73 annotation={viewportAnnotation}74 isSelected={props.selectedAnnotationIDs.includes(annotation.id)}75 onDragStart={props.onDragStart}76 onDragEnd={props.onDragEnd}77 />78 </div>79 );80 }81 )}82 </div>,83 node84 );85}86function PageLayerNote(props) {87 function getContainerNode(viewport) {88 return findOrCreateContainerLayer(89 viewport.div,90 'layer-note'91 );92 }93 let node = getContainerNode(props.view);94 if (!node) return null;95 return ReactDOM.createPortal(96 <div>97 {props.annotations.map(98 (annotation, index) => {99 let { position, ...rest } = annotation;100 let viewportAnnotation = {101 position: p2vc(position, props.view.viewport),102 ...rest103 };104 return (105 <div key={annotation.id}>106 <Note107 annotation={viewportAnnotation}108 isSelected={props.selectedAnnotationIDs.includes(annotation.id)}109 enableMoving={props.selectedAnnotationIDs.length === 1}110 onDragStart={props.onDragStart}111 onDragEnd={props.onDragEnd}112 onChangePosition={(position) => {113 props.onChangePosition(annotation.id, position);114 }}115 />116 </div>117 );118 }119 )}120 </div>,121 node122 );123}124function PageLayerArea(props) {125 function getContainerNode(viewport) {126 return findOrCreateContainerLayer(127 viewport.div,128 'layer-area'129 );130 }131 let node = getContainerNode(props.view);132 if (!node) return null;133 return ReactDOM.createPortal(134 <div>135 {props.annotations.map(136 (annotation, index) => {137 let { position, ...rest } = annotation;138 let viewportAnnotation = {139 position: p2vc(position, props.view.viewport),140 ...rest141 };142 return (143 <div key={annotation.id}>144 <Area145 annotation={viewportAnnotation}146 isSelected={props.selectedAnnotationIDs.includes(annotation.id)}147 move={props.selectedAnnotationIDs.length === 1}148 onResizeStart={props.onResizeStart}149 onDragStart={props.onDragStart}150 onDragEnd={props.onDragEnd}151 onChangePosition={(position) => {152 props.onChangePosition(annotation.id, position);153 }}154 />155 </div>156 );157 }158 )}159 </div>,160 node161 );162}163function AreaSelectorLayer(props) {164 function getContainerNode() {165 let container = document.getElementById('areaSelectorContainer');166 if (!container) {167 let viewerContainer = document.getElementById('viewerContainer');168 container = document.createElement('div');169 container.id = 'areaSelectorContainer';170 viewerContainer.appendChild(container);171 }172 return container;173 }174 return ReactDOM.createPortal(175 <AreaSelector176 color={props.color}177 shouldStart={props.enableAreaSelector}178 onSelectionStart={props.onSelectionStart}179 onSelection={props.onSelection}180 />,181 getContainerNode()182 );183}184function EdgeNoteLayer(props) {185 function getContainerNode(viewport) {186 return findOrCreateContainerLayer(187 viewport.div,188 'layer-edge-note'189 );190 }191 function quickIntersectRect(r1, r2) {192 return !(r2[0] > r1[2]193 || r2[2] < r1[0]194 || r2[1] > r1[3]195 || r2[3] < r1[1]);196 }197 function stackNotes(notes) {198 notes.sort((a, b) => a.rect[0] - b.rect[0]);199 for (let note of notes) {200 for (let note2 of notes) {201 if (note2 === note) break;202 if (quickIntersectRect(note.rect, note2.rect)) {203 let shift = wx(note2.rect) / 3 * 2;204 note.rect[0] = note2.rect[0] + shift;205 note.rect[2] = note2.rect[2] + shift;206 }207 }208 }209 }210 function getNotes(annotations, viewport) {211 let notes = [];212 let scale = PDFViewerApplication.pdfViewer._currentScale;213 let width = 9.6 * scale;214 let height = 9.6 * scale;215 for (let annotation of annotations) {216 let viewportPosition = p2vc(annotation.position, viewport);217 let left = viewportPosition.rects[0][0] - width / 2;218 let top = viewportPosition.rects[0][1] - height + height / 3;219 notes.push({220 annotation,221 rect: [222 left,223 top,224 left + width,225 top + height226 ]227 }228 );229 }230 notes.reverse();231 return notes;232 }233 let node = getContainerNode(props.view);234 if (!node) return null;235 let commentedAnnotations = props.annotations.filter(x => x.comment);236 let notes = getNotes(commentedAnnotations, props.view.viewport);237 stackNotes(notes);238 return ReactDOM.createPortal(239 <div>240 {notes.map(241 (note) => {242 let isSelected = props.selectedAnnotationIDs.includes(note.annotation.id);243 return (244 <div245 key={note.annotation.id}246 className={cx('edge-note', { selected: isSelected })}247 style={{248 left: note.rect[0],249 top: note.rect[1],250 width: wx(note.rect),251 height: hy(note.rect),252 color: note.annotation.color,253 zIndex: isSelected ? 2 : 1254 }}255 onClick={(e) => {256 e.preventDefault();257 e.stopPropagation();258 // Call after all other events259 setTimeout(() => {260 props.onClick(note.annotation.id);261 }, 0);262 }}263 >264 <svg width={wx(note.rect)} height={hy(note.rect)} viewBox="0 0 12 12">265 <path fill="currentColor" d="M0,0V6.707L5.293,12H12V0Z"/>266 <path d="M0,0V6.707L5.293,12H12V0ZM1.707,7H5v3.293ZM11,11H6V6H1V1H11Z" opacity="0.67"/>267 <polygon points="1.707 7 5 10.293 5 7 1.707 7" fill="#fff" opacity="0.4"/>268 </svg>269 </div>270 );271 }272 )}273 </div>,274 node275 );276}277function BlinkLayer(props) {278 const intervalRef = useRef(null);279 const innerRef = useRef(null);280 useLayoutEffect(() => {281 fade(innerRef.current);282 }, [props.id]);283 function fade(element) {284 if (intervalRef.current) clearInterval(intervalRef.current);285 let op = 1;286 intervalRef.current = setInterval(() => {287 if (op <= 0.05) {288 clearInterval(intervalRef.current);289 element.style.opacity = 0;290 return;291 }292 element.style.opacity = op;293 op -= op * 0.1;294 }, 100);295 }296 function getContainerNode(viewport) {297 return findOrCreateContainerLayer(viewport.div, 'layer-blink');298 }299 let node = getContainerNode(props.view);300 if (!node) return null;301 return ReactDOM.createPortal(302 <div ref={innerRef}>303 {props.position.rects.map((rect, index) => (304 <div305 key={index}306 className="rect"307 style={{308 left: rect[0],309 top: rect[1],310 width: rect[2] - rect[0],311 height: rect[3] - rect[1]312 }}313 />314 ))}315 </div>,316 node317 );318}319function SelectionLayer({ positions, color }) {320 useEffect(() => {321 draw();322 return () => {323 erase();324 };325 }, [positions]);326 function getCtx(pageIndex) {327 let viewport = window.PDFViewerApplication.pdfViewer.getPageView(pageIndex);328 let canvas = viewport.div.querySelector('.canvasWrapper .selectionCanvas');329 if (!canvas) {330 let wrapper = viewport.div.querySelector('.canvasWrapper');331 if (!wrapper) return null;332 canvas = document.createElement('canvas');333 canvas.className = 'selectionCanvas';334 canvas.width = viewport.canvas.width;335 canvas.height = viewport.canvas.height;336 canvas.style.width = viewport.div.style.width;337 canvas.style.height = viewport.div.style.height;338 wrapper.appendChild(canvas);339 }340 let ctx = canvas.getContext('2d');341 ctx.clearRect(0, 0, canvas.width, canvas.height);342 return ctx;343 }344 function erase() {345 for (let i = 0; i < window.PDFViewerApplication.pdfDocument.numPages; i++) {346 let page = window.PDFViewerApplication.pdfViewer.getPageView(i);347 let canvas = page.div.querySelector('.canvasWrapper .selectionCanvas');348 if (canvas) {349 let ctx = canvas.getContext('2d');350 ctx.clearRect(0, 0, canvas.width, canvas.height);351 }352 }353 }354 function draw() {355 for (let position of positions) {356 let ctx = getCtx(position.pageIndex);357 if (!ctx) return null;358 let viewport = window.PDFViewerApplication.pdfViewer.getPageView(position.pageIndex);359 ctx.fillStyle = color;360 for (let rect of position.rects) {361 let { sx, sy } = viewport.outputScale;362 ctx.fillRect(rect[0] * sx, rect[1] * sy, (rect[2] - rect[0]) * sx, (rect[3] - rect[1]) * sy);363 }364 }365 }366 return null;367}368function Layer(props) {369 const [initialized, setInitialized] = useState(false);370 const [render, setRender] = useState({});371 let viewer = window.PDFViewerApplication.pdfViewer;372 let containerNode = document.getElementById('viewerContainer');373 let selectionPositions = useMemo(() => props.selectionPositions.map(p => p2v(p)), [props.selectionPositions]);374 const handlePointerDownCallback = useCallback(handlePointerDown, []);375 const handlePointerMoveCallback = useMemo(() => throttle(handlePointerMove, 50), []);376 const handlePointerUpDownCallback = useCallback(handlePointerUp, []);377 const handlePageRenderCallback = useCallback(handlePageRender, []);378 useEffect(() => {379 containerNode = document.getElementById('viewerContainer');380 // event.detail doesn't work with pointerdown381 containerNode.addEventListener('mousedown', handlePointerDownCallback);382 containerNode.addEventListener('mousemove', handlePointerMoveCallback);383 containerNode.addEventListener('pointerup', handlePointerUpDownCallback);384 viewer = window.PDFViewerApplication.pdfViewer;385 viewer.eventBus.on('pagerendered', handlePageRenderCallback);386 return () => {387 containerNode.removeEventListener('mousedown', handlePointerDownCallback);388 containerNode.removeEventListener('mousemove', handlePointerMoveCallback);389 containerNode.removeEventListener('pointerup', handlePointerUpDownCallback);390 viewer.eventBus.off('pagerendered', handlePageRenderCallback);391 };392 }, []);393 function handlePointerDown(event) {394 let position = pointerEventToPosition(event);395 if (!position) {396 return;397 }398 props.onPointerDown(v2p(position), event);399 }400 function handlePointerMove(event) {401 let position = pointerEventToPosition(event);402 if (!position) {403 return;404 }405 if (viewer.pdfDocument.uninitialized) {406 return;407 }408 props.onPointerMove(v2p(position), event);409 }410 function handlePointerUp(event) {411 if (event.target.classList.contains('edge-note')) {412 return;413 }414 let position = pointerEventToPosition(event);415 if (!position) {416 return;417 }418 // Shoot the event after all other events are emitted.419 // Otherwise the resize updating in the area annotation is emitted too late420 // setTimeout(() => {421 props.onPointerUp(v2p(position), event);422 // }, 0);423 }424 function handlePageRender(event) {425 // console.log(`pdf.js rendered pageIndex ${event.pageNumber - 1}`);426 setRender({});427 setInitialized(true);428 }429 function groupAnnotationsByPage(annotations) {430 return [...annotations]431 .reduce((res, annotation) => {432 let { pageIndex } = annotation.position;433 res[pageIndex] = res[pageIndex] || [];434 res[pageIndex].push(annotation);435 return res;436 }, {});437 }438 function v2p(position) {439 let viewport = viewer.getPageView(position.pageIndex).viewport;440 return v2pc(position, viewport);441 }442 function p2v(position) {443 let viewport = viewer.getPageView(position.pageIndex).viewport;444 return p2vc(position, viewport);445 }446 let {447 annotations,448 color,449 selectedAnnotationIDs,450 popupAnnotation,451 blink,452 onChange,453 onClickTags,454 onClickEdgeNote455 } = props;456 if (!initialized) return null;457 let pageLayers = [];458 let annotationsByPage = groupAnnotationsByPage(annotations);459 for (let pageIndex = 0; pageIndex < viewer.pdfDocument.numPages; pageIndex++) {460 if (!annotationsByPage[pageIndex] || viewer._pages[pageIndex].renderingState === 0) {461 continue;462 }463 let view = viewer.getPageView(pageIndex);464 pageLayers.push(465 <PageLayerInk466 key={'i_' + pageIndex}467 view={view}468 selectedAnnotationIDs={selectedAnnotationIDs}469 annotations={(annotationsByPage[pageIndex].filter(x => x.type === 'ink') || [])}470 />,471 <PageLayerHighlight472 key={'h_' + pageIndex}473 view={view}474 selectedAnnotationIDs={selectedAnnotationIDs}475 annotations={(annotationsByPage[pageIndex].filter(x => x.type === 'highlight') || [])}476 onDragStart={props.onDragStart}477 onDragEnd={props.onDragEnd}478 />,479 <PageLayerNote480 key={'n_' + pageIndex}481 view={view}482 selectedAnnotationIDs={selectedAnnotationIDs}483 annotations={(annotationsByPage[pageIndex].filter(x => x.type === 'note') || [])}484 onChangePosition={(id, position) => {485 onChange({ id, position: v2p(position) });486 }}487 onDragStart={props.onDragStart}488 onDragEnd={props.onDragEnd}489 />,490 <PageLayerArea491 key={'a_' + pageIndex}492 view={view}493 selectedAnnotationIDs={selectedAnnotationIDs}494 annotations={(annotationsByPage[pageIndex].filter(x => x.type === 'image') || [])}495 onResizeStart={props.onAreaResizeStart}496 onChangePosition={(id, position) => {497 onChange({ id, position: v2p(position) });498 }}499 onDragStart={props.onDragStart}500 onDragEnd={props.onDragEnd}501 />502 );503 if (props.enableEdgeNotes) {504 pageLayers.push(<EdgeNoteLayer505 key={'m_' + pageIndex}506 view={view}507 selectedAnnotationIDs={selectedAnnotationIDs}508 annotations={(annotationsByPage[pageIndex].filter(x => ['highlight', 'image'].includes(x.type)) || [])}509 onClick={onClickEdgeNote}510 />);511 }512 }513 if (popupAnnotation) {514 let { position, ...rest } = popupAnnotation;515 popupAnnotation = {516 position: p2v(position),517 ...rest518 };519 }520 let blinkLayer = null;521 if (blink) {522 let view = viewer.getPageView(blink.position.pageIndex);523 if (view && view.renderingState !== 0) {524 let id = blink.id;525 let position = p2v(blink.position);526 blinkLayer = <BlinkLayer view={view} id={id} position={position}/>;527 }528 }529 return (530 <React.Fragment>531 {blinkLayer}532 <SelectionLayer positions={selectionPositions} color={props.selectionColor}/>533 <AreaSelectorLayer534 color={color}535 enableAreaSelector={props.enableAreaSelector}536 onSelectionStart={props.onAreaSelectionStart}537 onSelection={(position) => {538 props.onAreaSelection(v2p(position));539 }}540 />541 {542 popupAnnotation && (543 <PagePopup544 id={popupAnnotation.id}545 className="annotation-popup"546 position={popupAnnotation.position}547 // TODO: After area resize popup still needs to be repositioned548 updateOnPositionChange={false}549 >550 <PopupPreview551 annotation={popupAnnotation}552 isExpandable={false}553 enableText={false}554 enableImage={false}555 enableComment={!popupAnnotation.readOnly || popupAnnotation.comment}556 enableTags={!popupAnnotation.readOnly || popupAnnotation.tags.length > 0}557 onUpdate={(comment) => {558 onChange({ id: popupAnnotation.id, comment });559 }}560 onColorChange={(color) => {561 onChange({ id: popupAnnotation.id, color });562 }}563 onDoubleClickPageLabel={props.onDoubleClickPageLabel}564 onClickTags={onClickTags}565 onChange={onChange}566 onPageMenu={props.onPageMenu}567 onMoreMenu={props.onMoreMenu}568 onDragStart={(event) => {569 setDataTransferAnnotations(event.dataTransfer, [popupAnnotation]);570 }}571 />572 </PagePopup>573 )574 }575 {576 props.enableSelectionPopup && selectionPositions.length && (577 <PagePopup578 id={1}579 className="selection-popup"580 position={selectionPositions[0]}581 updateOnPositionChange={true}582 >583 <SelectionMenu584 color={color}585 enableAddToNote={props.enableAddToNote}586 onHighlight={props.onHighlightSelection}587 onCopy={props.onCopySelection}588 onAddToNote={props.onAddToNoteSelection}589 />590 </PagePopup>591 )592 }593 {pageLayers}594 </React.Fragment>595 );596}...

Full Screen

Full Screen

PdfJS.js

Source:PdfJS.js Github

copy

Full Screen

1import React from 'react';2import ReactDOM from 'react-dom';3import Event from './Event';4import Contract from "./Contract";5import Config from "./config";6var cachePDF = [];7var PdfJS = React.createClass({8 propTypes: {9 file: React.PropTypes.string,10 page: React.PropTypes.number,11 scale: React.PropTypes.number,12 onPageRendered: React.PropTypes.func13 },14 getInitialState() {15 return {16 page: 1,17 pageRendering: false,18 filePending: null,19 scale: 1,20 message: ''21 };22 },23 abortXhr(){24 if (this.xhr && this.xhr.readystate != 4) {25 //if the users clicks pagination quickly, abort previous ajax calls.26 this.xhr.abort();27 }28 },29 fetchBlob(uri, callback) {30 this.xhr = new XMLHttpRequest();31 this.xhr.open('GET', uri, true);32 this.xhr.onprogress = (evt)=> {33 let progress = document.getElementById('progress-bar-info');34 if (evt.lengthComputable) {35 var percentComplete = (evt.loaded / evt.total) * 100;36 progress.style.width = percentComplete + "%";37 if (percentComplete > 99) {38 setTimeout(()=> {39 progress.style.display = "none"40 }, 600);41 } else {42 progress.style.display = "block"43 }44 }45 };46 this.xhr.responseType = 'blob';47 this.xhr.onload = (e) => {48 if (this.xhr.status == 200) {49 var blob = new Blob([this.xhr.response], {50 type: 'application/pdf'51 });52 var url = URL.createObjectURL(blob);53 if (callback) {54 cachePDF[uri] = url;55 callback(url);56 }57 }58 else {59 cachePDF[uri] = '';60 callback('');61 }62 };63 this.xhr.send();64 },65 renderPage(file) {66 this.abortXhr();67 if (cachePDF[file]) {68 this.renderPdf(cachePDF[file]);69 } else {70 this.fetchBlob(file, this.renderPdf);71 }72 },73 renderPdf(file) {74 if (file == '') {75 this.state.pageRendering = false;76 if (this.state.filePending !== null) {77 this.renderPage(this.state.filePending);78 this.setState({filePending: null});79 }80 this.notice('<div class="no-contract-error">' + pdf_not_loading + '</div>', true);81 return;82 }83 this.setState({pageRendering: true});84 var loadingTask = PDFJS.getDocument(file).then((pdfDoc) => {85 pdfDoc.getPage(this.state.page).then((page) => {86 var canvas = ReactDOM.findDOMNode(this.refs.pdfCanvas);87 if (!canvas) {88 return;89 }90 var ctx = canvas.getContext('2d');91 var viewport = page.getViewport(this.props.scale);92 canvas.height = viewport.height;93 canvas.width = viewport.width;94 var renderContext = {95 canvasContext: ctx,96 viewport: viewport97 };98 var renderTask = page.render(renderContext);99 renderTask.promise.then(()=> {100 var popupAnnotation = Config.contract.annotations.result.filter( item => item.annotation_id == Config.popupAnnotation.annotation_id && (typeof item.shapes == 'object'));101 if ( popupAnnotation && this.props.page == popupAnnotation[0].page_no) {102 Contract.showPopup(Config.popupAnnotation.annotation_id);103 }104 this.setState({pageRendering: false});105 this.notice('');106 Event.publish('loading', false);107 this.props.onPageRendered();108 if (this.state.filePending !== null) {109 this.renderPage(this.state.filePending);110 this.setState({filePending: null});111 }112 });113 });114 }, (exception) => {115 this.state.pageRendering = false;116 this.notice('<div class="no-contract-error">' + pdf_not_loading + '</div>', true);117 });118 },119 notice (msg, clear = false) {120 this.setState({message: msg});121 if (clear) {122 var canvas = ReactDOM.findDOMNode(this.refs.pdfCanvas);123 $('.annotator-viewer').addClass('annotator-hide');124 $('.annotator-pdf-hl').hide();125 if (canvas) {126 var context = canvas.getContext('2d');127 context.clearRect(0, 0, canvas.width, canvas.height);128 context.fill();129 }130 }131 },132 queueRenderPage (file, scale) {133 if (this.state.pageRendering) {134 this.setState({filePending: file, scale: scale});135 } else {136 this.setState({scale: scale});137 this.renderPage(file);138 }139 },140 componentDidMount () {141 PDFJS.disableWorker = true;142 PDFJS.verbosity = 0;143 this.loadPdf(this.props);144 },145 loadPdf (props) {146 this.notice('', true);147 Event.publish('loading', [true, loading_page + ' ' + props.page]);148 this.queueRenderPage(props.file, props.scale);149 },150 componentWillReceiveProps (props) {151 this.loadPdf(props);152 },153 render () {154 return (155 <div className="canvas-wrap canvas-wrapper">156 <div className="message" dangerouslySetInnerHTML={{__html: this.state.message}}/>157 <div className="pdf-container">158 <canvas ref="pdfCanvas"></canvas>159 </div>160 </div>161 );162 }163});...

Full Screen

Full Screen

Pdf.js

Source:Pdf.js Github

copy

Full Screen

1import React, {Component} from "react";2import {getHashPage} from "./Helper";3import PdfJS from "./PdfJS";4import Event from './Event';5import AnnotationLoader from "../contract/annotator/loader";6import Contract from "./Contract";7import Config from "./config";8class Pdf extends Component {9 constructor(props) {10 super(props);11 this.state = {page: 0, scale: 1, isLoading: true};12 this.changePage = this.changePage.bind(this);13 }14 componentDidMount() {15 window.addEventListener("hashchange", this.changePage, false);16 Event.subscribe('zomm.scale', zoom=> {17 this.setState({scale: zoom.scale});18 });19 this.subscribe = Event.subscribe('pagination:change', this.paginationHandler.bind(this));20 }21 paginationHandler(page_no) {22 let view = Contract.getView();23 if (view == 'pdf' && this.state.page != page_no) {24 $('.pdf-viewer').animate({scrollTop: 0}, 'slow');25 // this.setState({currentPage: this.getSelectedPage(this.state.pages)})26 }27 }28 componentWillMount() {29 Contract.setCurrentPage(Config.popupAnnotation.page_no);30 Contract.setCurrentAnnotation(Config.popupAnnotation.annotation_id);31 this.setState({32 page: this.props.annotation.pages[0].page_no,33 contract_id: this.props.annotation.contract_id,34 isLoading: false35 });36 this.changePage();37 Event.publish('loading', false);38 }39 changePage() {40 let page = getHashPage();41 if (page > 0) {42 Contract.setCurrentPage(page);43 this.setState({page: page});44 }45 }46 getFile() {47 return AWS_URL + "/" + this.state.contract_id + "/" + this.state.page + ".pdf";48 }49 getAnnotations() {50 let pageAnnotations = [];51 let annotations = Contract.getAnnotations();52 annotations.result.forEach(annotation=> {53 if (typeof annotation.shapes == 'object' && this.state.page == annotation.page_no) {54 pageAnnotations.push(annotation);55 }56 });57 return pageAnnotations;58 }59 onPageRendered() {60 if (!this.annotator) {61 this.annotator = new AnnotationLoader('.pdf-annotator');62 this.annotator.init();63 Contract.setAnnotatorInstance(this.annotator);64 }65 const annotations = this.getAnnotations().filter( item => item.annotation_id == Config.popupAnnotation.annotation_id );66 if (annotations.length > 0) {67 this.annotator.content.annotator("loadAnnotations", [...annotations]);68 }69 Event.publish('annotation:loaded', 'pdf');70 }71 render() {72 if (this.state.isLoading) {73 return null;74 }75 return (76 <div className="pdf-viewer pdf-annotator popup-pdf-viewer">77 {/*<div className="pdf-wrapper">*/}78 {/* </div>*/}79 {/*</div>*/}80 {/*<div className="annotator-viewer" id="pdf-container">*/}81 <div id="progress-bar-info"></div>82 <PdfJS onPageRendered={this.onPageRendered.bind(this)} file={this.getFile()} page={this.state.page} scale={this.state.scale}/>83 </div>84 );85 }86}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptb = require('wptb');2wptb.PopupAnnotation('Hello World');3var wptb = require('wptb');4wptb.PopupAnnotation('Hello World', 'Title');5var wptb = require('wptb');6wptb.PopupAnnotation('Hello World', 'Title', 'Text');7var wptb = require('wptb');8wptb.PopupAnnotation('Hello World', 'Title', 'Text', 'OK');9var wptb = require('wptb');10wptb.PopupAnnotation('Hello World', 'Title', 'Text', 'OK', 'Cancel');11var wptb = require('wptb');12wptb.PopupAnnotation('Hello World', 'Title', 'Text', 'OK', 'Cancel', 'Icon');13var wptb = require('wptb');14wptb.PopupAnnotation('Hello World', 'Title', 'Text', 'OK', 'Cancel', 'Icon', 'Buttons');15var wptb = require('wptb');16wptb.PopupAnnotation('Hello World', 'Title', 'Text', 'OK', 'Cancel', 'Icon', 'Buttons', 'Options');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var popup = new PopupAnnotation("This is a popup");2popup.show();3function PopupAnnotation(text) {4 this.text = text;5}6PopupAnnotation.prototype.show = function() {7 alert(this.text);8};9function PopupAnnotation(text) {10 this.text = text;11}12PopupAnnotation.prototype.show = function() {13 alert(this.text);14};15var popup = new PopupAnnotation("This is a popup");16popup.show();17function PopupAnnotation(text) {18 this.text = text;19}20PopupAnnotation.prototype.show = function() {21 alert(this.text);22};23function PopupAnnotation(text) {24 this.text = text;25}26PopupAnnotation.prototype.show = function() {27 alert(this.text);28};29var popup = new PopupAnnotation("This is a popup");30popup.show();31function PopupAnnotation(text) {32 this.text = text;33}34PopupAnnotation.prototype.show = function() {35 alert(this.text);36};37function PopupAnnotation(text) {38 this.text = text;39}40PopupAnnotation.prototype.show = function() {41 alert(this.text);42};43var popup = new PopupAnnotation("This is a popup");44popup.show();45function PopupAnnotation(text) {46 this.text = text;47}48PopupAnnotation.prototype.show = function() {49 alert(this.text);50};51function PopupAnnotation(text) {52 this.text = text;53}54PopupAnnotation.prototype.show = function() {55 alert(this.text);56};57var popup = new PopupAnnotation("This is a popup");58popup.show();59function PopupAnnotation(text) {60 this.text = text;61}62PopupAnnotation.prototype.show = function() {63 alert(this.text);64};65function PopupAnnotation(text) {66 this.text = text;67}68PopupAnnotation.prototype.show = function() {69 alert(this.text);70};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var page = require('webpage').create();2var wptdriver = require('./wptdriver.js');3wptdriver.setPage(page);4 if (status !== 'success') {5 console.log('Unable to access network');6 } else {7 page.render('google.png');8 }9 phantom.exit();10});11{12 "data": {13 }14}15{16 "data": {17 "annotation": {18 }19 }20}21{22 "data": {23 "annotation": {24 }25 }26}27var page = require('webpage').create();28var wptdriver = require('./wptdriver.js');29wptdriver.setPage(page);30 if (status !== 'success') {31 console.log('Unable to access network');32 } else {33 page.render('google.png');34 }35 phantom.exit();36});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptDriver = require('./wptdriver.js');2var driver = new wptDriver();3var webdriver = require('selenium-webdriver');4var By = webdriver.By;5var until = webdriver.until;6var wptDriver = function() {7 this.driver = new webdriver.Builder()8 .forBrowser('chrome')9 .build();10 this.driver.wait(until.titleIs('Google'), 1000);11}12wptDriver.prototype.PopupAnnotation = function(title, text, url) {13 this.driver.executeScript(function(title, text, url) {14 var wpt = window.wpt;15 if (wpt) {16 wpt.popupAnnotation(title, text, url);17 }18 }, title, text, url);19}20module.exports = wptDriver;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptextbox = require("wptextbox");2var popupAnnotation = wptextbox.PopupAnnotation;3var popup = popupAnnotation({4});5popup.show();6popup.hide();7popup.remove();8popup.show();9popup.hide();10popup.remove();11popup.show();12popup.hide();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var popup = new PopupAnnotation();2popup.show("Hello World", 2000);3function PopupAnnotation() {4 this.show = function (text, time) {5 var popup = document.createElement('div');6 popup.setAttribute('id', 'popup');7 popup.setAttribute('class', 'popup');8 popup.innerHTML = text;9 document.body.appendChild(popup);10 setTimeout(function () {11 popup.parentNode.removeChild(popup);12 }, time);13 };14 this.hide = function () {15 var popup = document.getElementById('popup');16 popup.parentNode.removeChild(popup);17 };18}19.popup {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 100%;25 background-color: rgba(0, 0, 0, 0.5);26 color: #fff;27 text-align: center;28 font-size: 3em;29 z-index: 9999;30}31The test.js file contains the code that uses the PopupAnnotation class. The class is instantiated and the show() method is called

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful