Experiments w/ hypothes.is client https://labs.loupbrun.ca/hypothesis/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Louis-Olivier Brassard 2227d838c2
Quelques expériences avec Full
1 month ago
.gitignore initial commit, 2 columns w/ sticky annotation bar 3 months ago
bootstrap.min.css initial commit, 2 columns w/ sticky annotation bar 3 months ago
full.html Quelques expériences avec Full 1 month ago
index.html Add highlight when focused 3 months ago
package.json initial commit, 2 columns w/ sticky annotation bar 3 months ago
readme.md Add highlight when focused 3 months ago
yarn.lock initial commit, 2 columns w/ sticky annotation bar 3 months ago

readme.md

hypothes.is client experiments

Docs

Hypothesis provides useful documentation for integrating the client :

https://h.readthedocs.io/projects/client/en/latest/publishers/config/

Code snippets

CSS

/* Create styles for wrapper */
.hypothesis-container {
  position: sticky;
  left: 0;
  top: 30px;
}
.hypothesis-container .h-sidebar-iframe {
  /* Stuff found in default stylesheet */
  margin: 0;
  margin-left: 0px;
  padding: 0;
  border: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #ececec;
  direction: ltr;
  background: none;
  font-size: 14px;
  line-height: 20px;
  z-index: 2147483647;

  /* Custom stuff for demo */
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 0 25px rgba(0,0,0,0.2);
  border: 0;
  height: 80vh;
  width: 100%;

}

/* highlight marks on the page */
.annotator-hl,
body.annotator-highlights-always-on .annotator-hl {
  background-color: rgba(0, 255, 10, .8);
}
/* intensify when current highlight is focused */
body.annotator-highlights-always-on .annotator-hl.annotator-hl-focused {
  background-color: rgba(0, 255, 10, 1);
}

JS

const bodyElem = document.querySelector('body');
window.hypothesisConfig = function () {
  return {
    onLayoutChange: function (info) {
    // custom js callback
      if (info.expanded) {
        bodyElem.classList.add('is-open'); // useful, do stuff with css when panel is expanded
      } else {
        bodyElem.classList.remove('is-open');
      }
    },

    // useful: insert hypothesis inside the page
    // just specify a selector
    externalContainerSelector: '.hypothesis-container',

    // branding options
    branding: {
      accentColor: '#00ff00',
      appBackgroundColor: '#f4c090',
      ctaBackgroundColor: '#4455ee',
      ctaTextColor: '#ffffee',
      selectionFontFamily: 'Garamond, serif',
      annotationFontFamily: 'Courier, monospace' 
    }
  }
}