Skip to content
Snippets Groups Projects
Select Git revision
  • 2226a234369c3bb95503f689c486553b694aa062
  • main default protected
  • export
  • 28-conversion-tests
  • extraction
  • exploration
  • exploration-old
  • 2-encoding-fix
  • main-old
9 results

extract_mosetp.py

Blame
  • CanvasAnnotations.js 4.40 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import Chip from '@material-ui/core/Chip';
    import List from '@material-ui/core/List';
    import ListItem from '@material-ui/core/ListItem';
    import ListItemText from '@material-ui/core/ListItemText';
    import Typography from '@material-ui/core/Typography';
    import SanitizedHtml from '../containers/SanitizedHtml';
    
    /**
     * CanvasAnnotations ~
    */
    export class CanvasAnnotations extends Component {
      /**
       * constructor -
       */
      constructor(props) {
        super(props);
    
        this.handleClick = this.handleClick.bind(this);
        this.handleAnnotationHighlight = this.handleAnnotationHighlight.bind(this);
        this.handleAnnotationUnHighlight = this.handleAnnotationUnHighlight.bind(this);
      }
    
      /**
       * Handle click event of an annotation.
      */
      handleClick(event, annotation) {
        const {
          deselectAnnotation, selectAnnotation, selectedAnnotationIds, windowId,
        } = this.props;
    
        if (selectedAnnotationIds.includes(annotation.id)) {
          deselectAnnotation(windowId, annotation.targetId, annotation.id);
        } else {
          selectAnnotation(windowId, annotation.targetId, annotation.id);
        }
      }
    
      /** */
      handleAnnotationHighlight(annotation) {
        const { allAnnotationsAreHighlighted, highlightAnnotation, windowId } = this.props;
        if (allAnnotationsAreHighlighted) return;
    
        highlightAnnotation(windowId, annotation.id);
      }
    
      /** */
      handleAnnotationUnHighlight() {
        const { allAnnotationsAreHighlighted, highlightAnnotation, windowId } = this.props;
        if (allAnnotationsAreHighlighted) return;
    
        highlightAnnotation(windowId, null);
      }
    
      /**
       * Returns the rendered component
      */
      render() {
        const {
          annotations, classes, index, label, selectedAnnotationIds, t, totalSize,
          listContainerComponent, htmlSanitizationRuleSet,
        } = this.props;
        if (annotations.length === 0) return <></>;
    
        return (
          <>
            <Typography className={classes.sectionHeading} variant="overline">
              {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
            </Typography>
            <List>
              {
                annotations.map(annotation => (
                  <ListItem
                    button
                    component={listContainerComponent}
                    className={classes.annotationListItem}
                    key={annotation.id}
                    annotation={annotation}
                    annotationid={annotation.id}
                    selected={selectedAnnotationIds.includes(annotation.id)}
                    onClick={e => this.handleClick(e, annotation)}
                    onFocus={() => this.handleAnnotationHighlight(annotation)}
                    onBlur={this.handleAnnotationUnHighlight}
                    onMouseEnter={() => this.handleAnnotationHighlight(annotation)}
                    onMouseLeave={this.handleAnnotationUnHighlight}
                  >
                    <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
                      <SanitizedHtml
                        ruleSet={htmlSanitizationRuleSet}
                        htmlString={annotation.content}
                      />
                      <div>
                        {
                          annotation.tags.map(tag => (
                            <Chip size="small" variant="outlined" label={tag} id={tag} className={classes.chip} />
                          ))
                        }
                      </div>
                    </ListItemText>
                  </ListItem>
                ))
              }
            </List>
          </>
        );
      }
    }
    
    CanvasAnnotations.propTypes = {
      allAnnotationsAreHighlighted: PropTypes.bool.isRequired,
      annotations: PropTypes.arrayOf(
        PropTypes.shape({
          content: PropTypes.string.isRequired,
          id: PropTypes.string.isRequired,
        }),
      ),
      classes: PropTypes.objectOf(PropTypes.string),
      deselectAnnotation: PropTypes.func.isRequired,
      highlightAnnotation: PropTypes.func.isRequired,
      htmlSanitizationRuleSet: PropTypes.string,
      index: PropTypes.number.isRequired,
      label: PropTypes.string.isRequired,
      listContainerComponent: PropTypes.elementType,
      selectAnnotation: PropTypes.func.isRequired,
      selectedAnnotationIds: PropTypes.arrayOf(PropTypes.string),
      t: PropTypes.func.isRequired,
      totalSize: PropTypes.number.isRequired,
      windowId: PropTypes.string.isRequired,
    };
    CanvasAnnotations.defaultProps = {
      annotations: [],
      classes: {},
      htmlSanitizationRuleSet: 'iiif',
      listContainerComponent: 'li',
      selectedAnnotationIds: [],
    };