Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
5baf673b
Commit
5baf673b
authored
Jun 20, 2023
by
Alejandro Celaya
Committed by
Alejandro Celaya
Jun 21, 2023
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add documentation page for custom DOM events
parent
ed40dd31
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
60 additions
and
8 deletions
+60
-8
events.rst
docs/publishers/events.rst
+45
-0
index.rst
docs/publishers/index.rst
+1
-0
events.ts
src/annotator/events.ts
+1
-1
guest.ts
src/annotator/guest.ts
+1
-1
guest-test.js
src/annotator/test/guest-test.js
+12
-6
No files found.
docs/publishers/events.rst
0 → 100644
View file @
5baf673b
Events
======
The Hypothesis client emits custom DOM events at ``document.body``, to which your app can react.
They extend `CustomEvent <https://developer.mozilla.org/docs/Web/API/CustomEvent>`_, so their payload can be found inside the ``detail`` property.
.. option:: hypothesis:layoutchange
This event is emitted when the sidebar layout changes. eg. when it is opened or closed.
Properties
----------
.. option:: sidebarLayout
.. option:: expanded
``Boolean`` True if the sidebar is open
.. option:: width
``Number`` The width of the sidebar in pixels
.. option:: height
``Number`` The height of the sidebar in pixels
.. option:: sideBySideActive
``Boolean`` Indicates whether side-by-side mode is active
.. code-block:: javascript
document.body.addEventListener('hypothesis:layoutchange', event => {
console.log(event.detail.sidebarLayout.expanded);
console.log(event.detail.sidebarLayout.width);
console.log(event.detail.sidebarLayout.height);
console.log(event.detail.sideBySideActive);
});
.. note::
`See also "onLayoutChange" </publishers/config/#cmdoption-arg-onLayoutChange>`_ function, for an alternative way
to make your app programmatically react to layout changes.
docs/publishers/index.rst
View file @
5baf673b
...
@@ -13,3 +13,4 @@ pages will help you get started.
...
@@ -13,3 +13,4 @@ pages will help you get started.
embedding
embedding
config
config
host-page-integration
host-page-integration
events
src/annotator/events.ts
View file @
5baf673b
import
type
{
SidebarLayout
}
from
'../types/annotator'
;
import
type
{
SidebarLayout
}
from
'../types/annotator'
;
type
LayoutChangeEventDetail
=
{
type
LayoutChangeEventDetail
=
{
isS
ideBySideActive
:
boolean
;
s
ideBySideActive
:
boolean
;
sidebarLayout
:
SidebarLayout
;
sidebarLayout
:
SidebarLayout
;
};
};
...
...
src/annotator/guest.ts
View file @
5baf673b
...
@@ -461,7 +461,7 @@ export class Guest extends TinyEmitter implements Annotator, Destroyable {
...
@@ -461,7 +461,7 @@ export class Guest extends TinyEmitter implements Annotator, Destroyable {
this
.
element
.
dispatchEvent
(
this
.
element
.
dispatchEvent
(
new
LayoutChangeEvent
({
new
LayoutChangeEvent
({
sidebarLayout
,
sidebarLayout
,
isS
ideBySideActive
:
this
.
_sideBySideActive
,
s
ideBySideActive
:
this
.
_sideBySideActive
,
})
})
);
);
});
});
...
...
src/annotator/test/guest-test.js
View file @
5baf673b
...
@@ -260,7 +260,7 @@ describe('Guest', () => {
...
@@ -260,7 +260,7 @@ describe('Guest', () => {
assert
.
notCalled
(
fakeIntegration
.
fitSideBySide
);
assert
.
notCalled
(
fakeIntegration
.
fitSideBySide
);
});
});
it
(
'emits a "hypothesis:layoutchange" DOM event'
,
done
=>
{
it
(
'emits a "hypothesis:layoutchange" DOM event'
,
()
=>
{
const
guest
=
createGuest
();
const
guest
=
createGuest
();
const
dummyLayout
=
{
const
dummyLayout
=
{
expanded
:
true
,
expanded
:
true
,
...
@@ -268,14 +268,20 @@ describe('Guest', () => {
...
@@ -268,14 +268,20 @@ describe('Guest', () => {
height
:
300
,
height
:
300
,
toolbarWidth
:
10
,
toolbarWidth
:
10
,
};
};
const
listener
=
sinon
.
stub
();
guest
.
element
.
addEventListener
(
'hypothesis:layoutchange'
,
e
=>
{
guest
.
element
.
addEventListener
(
'hypothesis:layoutchange'
,
listener
);
assert
.
equal
(
e
.
detail
.
sidebarLayout
,
dummyLayout
);
// This ensures the test will timeout if this event is not emitted
done
();
});
emitHostEvent
(
'sidebarLayoutChanged'
,
dummyLayout
);
emitHostEvent
(
'sidebarLayoutChanged'
,
dummyLayout
);
assert
.
calledWith
(
listener
,
sinon
.
match
({
detail
:
sinon
.
match
({
sidebarLayout
:
dummyLayout
,
}),
})
);
});
});
});
});
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment