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
df10f49e
Commit
df10f49e
authored
Jul 06, 2023
by
Alejandro Celaya
Committed by
Alejandro Celaya
Jul 07, 2023
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add customizable side-by-side mode to HTMLIntegration
parent
6aeeed8c
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
41 additions
and
9 deletions
+41
-9
html.ts
src/annotator/integrations/html.ts
+14
-7
html-test.js
src/annotator/integrations/test/html-test.js
+14
-2
annotator.ts
src/types/annotator.ts
+13
-0
No files found.
src/annotator/integrations/html.ts
View file @
df10f49e
...
...
@@ -5,6 +5,7 @@ import type {
FeatureFlags
,
Integration
,
SidebarLayout
,
SideBySideOptions
,
}
from
'../../types/annotator'
;
import
type
{
Selector
}
from
'../../types/api'
;
import
{
anchor
,
describe
}
from
'../anchoring/html'
;
...
...
@@ -36,8 +37,9 @@ export class HTMLIntegration extends TinyEmitter implements Integration {
private
_htmlMeta
:
HTMLMetadata
;
private
_prevURI
:
string
;
/** Whether to attempt to resize the document to fit alongside sidebar. */
private
_sideBySideEnabled
:
boolean
;
/** Controls how we resize the document to fit alongside sidebar. */
private
_sideBySideOptions
:
SideBySideOptions
;
private
_sideBySideFlagEnabled
:
boolean
;
/**
* Whether the document is currently being resized to fit alongside an
...
...
@@ -53,9 +55,11 @@ export class HTMLIntegration extends TinyEmitter implements Integration {
constructor
({
features
,
container
=
document
.
body
,
sideBySideOptions
,
}:
{
features
:
FeatureFlags
;
container
?:
HTMLElement
;
sideBySideOptions
?:
SideBySideOptions
;
})
{
super
();
...
...
@@ -65,7 +69,9 @@ export class HTMLIntegration extends TinyEmitter implements Integration {
this
.
_htmlMeta
=
new
HTMLMetadata
();
this
.
_prevURI
=
this
.
_htmlMeta
.
uri
();
this
.
_sideBySideEnabled
=
this
.
features
.
flagEnabled
(
'html_side_by_side'
);
this
.
_sideBySideFlagEnabled
=
this
.
features
.
flagEnabled
(
'html_side_by_side'
);
this
.
_sideBySideOptions
=
sideBySideOptions
??
{
mode
:
'auto'
};
this
.
_sideBySideActive
=
false
;
this
.
_lastLayout
=
null
;
...
...
@@ -92,9 +98,9 @@ export class HTMLIntegration extends TinyEmitter implements Integration {
});
this
.
_flagsChanged
=
()
=>
{
const
sideBySide
=
features
.
flagEnabled
(
'html_side_by_side'
);
if
(
sideBySide
!==
this
.
_sideBySide
Enabled
)
{
this
.
_sideBySide
Enabled
=
sideBySide
;
const
sideBySide
Enabled
=
features
.
flagEnabled
(
'html_side_by_side'
);
if
(
sideBySide
Enabled
!==
this
.
_sideBySideFlag
Enabled
)
{
this
.
_sideBySide
FlagEnabled
=
sideBySideEnabled
;
// `fitSideBySide` is normally called by Guest when the sidebar layout
// changes. When the feature flag changes, we need to re-run the method.
...
...
@@ -156,7 +162,8 @@ export class HTMLIntegration extends TinyEmitter implements Integration {
const
maximumWidthToFit
=
window
.
innerWidth
-
layout
.
width
;
const
active
=
this
.
_sideBySideEnabled
&&
this
.
_sideBySideFlagEnabled
&&
this
.
_sideBySideOptions
.
mode
===
'auto'
&&
layout
.
expanded
&&
maximumWidthToFit
>=
MIN_HTML_WIDTH
;
...
...
src/annotator/integrations/test/html-test.js
View file @
df10f49e
...
...
@@ -64,8 +64,8 @@ describe('HTMLIntegration', () => {
$imports
.
$restore
();
});
function
createIntegration
()
{
return
new
HTMLIntegration
({
features
});
function
createIntegration
(
sideBySideOptions
)
{
return
new
HTMLIntegration
({
features
,
sideBySideOptions
});
}
it
(
'implements `anchor` and `destroy` using HTML anchoring'
,
async
()
=>
{
...
...
@@ -380,6 +380,18 @@ describe('HTMLIntegration', () => {
features
.
update
({
html_side_by_side
:
false
});
assert
.
isFalse
(
isSideBySideActive
());
});
it
(
'manual side-by-side is not changed by enabled feature flag'
,
()
=>
{
features
.
update
({
html_side_by_side
:
true
});
const
integration
=
createIntegration
({
mode
:
'manual'
});
integration
.
fitSideBySide
({
expanded
:
true
,
width
:
sidebarWidth
});
assert
.
isFalse
(
isSideBySideActive
());
// Even if the feature flag is enabled, side-by-side stays disabled/manual
features
.
update
({
html_side_by_side
:
true
});
assert
.
isFalse
(
isSideBySideActive
());
});
});
describe
(
'#getMetadata'
,
()
=>
{
...
...
src/types/annotator.ts
View file @
df10f49e
...
...
@@ -336,3 +336,16 @@ export type DocumentInfo = {
*/
persistent
:
boolean
;
};
/**
* `auto`: The client will decide if side-by-side is enabled. If enabled, it
* will apply some heuristics to determine how the content is affected.
* This is default value.
* `manual`: The host app wants to manually take full control of side-by-side,
* effectively disabling the logic in client.
*/
export
type
SideBySideMode
=
'auto'
|
'manual'
;
export
type
SideBySideOptions
=
{
mode
:
SideBySideMode
;
};
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