aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/WebBox.scss219
-rw-r--r--src/client/views/nodes/WebBox.tsx106
2 files changed, 166 insertions, 159 deletions
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 4623444b9..4b2f3cc1a 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,135 +1,140 @@
@import "../globalCssVariables.scss";
-.webBox-container, .webBox-container-dragging {
- transform-origin: top left;
- width: 100%;
- height: 100%;
-
- .webBox-htmlSpan {
- position: absolute;
- top: 0;
- left: 0;
- }
- .webBox-cont {
- pointer-events: none;
- }
- .webBox-cont, .webBox-cont-interactive {
- padding: 0vw;
- position: absolute;
- top: 0;
- left: 0;
+.webBox {
+ height:100%;
+ position: relative;
+ display: flex;
+ .webBox-container, .webBox-container-dragging {
+ transform-origin: top left;
width: 100%;
height: 100%;
- transform-origin: top left;
- overflow: auto;
- .webBox-iframe {
+
+ .webBox-htmlSpan {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .webBox-cont {
+ pointer-events: none;
+ }
+ .webBox-cont, .webBox-cont-interactive {
+ padding: 0vw;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform-origin: top left;
+ overflow: auto;
+ .webBox-iframe {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top:0;
+ }
+ }
+ .webBox-cont-interactive {
+ span {
+ user-select: text !important;
+ }
+ }
+ .webBox-outerContent {
width: 100%;
height: 100%;
position: absolute;
- top:0;
+ top: 0;
+ left: 0;
+ overflow: auto;
+ .webBox-innerContent {
+ width:100%;
+ }
}
- }
- .webBox-cont-interactive {
- span {
- user-select: text !important;
+ div.webBox-outerContent::-webkit-scrollbar-thumb {
+ display:none;
}
}
- .webBox-outerContent {
+
+
+ .webBox-overlay {
width: 100%;
height: 100%;
position: absolute;
- top: 0;
- left: 0;
- overflow: auto;
- .webBox-innerContent {
- width:100%;
- }
- }
- div.webBox-outerContent::-webkit-scrollbar-thumb {
- display:none;
}
-}
-
-
-.webBox-overlay {
- width: 100%;
- height: 100%;
- position: absolute;
-}
-.webBox-buttons {
- margin-left: 44;
- background:lightGray;
- width: 100%;
-}
-.webBox-freeze {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 5px;
- width: 30px;
-}
-
-.webBox-urlEditor {
- position: relative;
- opacity: 0.9;
- z-index: 9001;
- transition: top .5s;
-
- .urlEditor {
- display: grid;
- grid-template-columns: 1fr auto;
- padding-bottom: 10px;
- overflow: hidden;
-
- .editorBase {
- display: flex;
-
- .editor-collapse {
- transition: all .5s, opacity 0.3s;
- position: absolute;
- width: 40px;
- transform-origin: top left;
- }
+ .webBox-buttons {
+ margin-left: 44;
+ background:lightGray;
+ width: 100%;
+ }
+ .webBox-freeze {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 5px;
+ width: 30px;
+ }
- .switchToText {
- color: $main-accent;
+ .webBox-urlEditor {
+ position: relative;
+ opacity: 0.9;
+ z-index: 9001;
+ transition: top .5s;
+
+ .urlEditor {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ padding-bottom: 10px;
+ overflow: hidden;
+
+ .editorBase {
+ display: flex;
+
+ .editor-collapse {
+ transition: all .5s, opacity 0.3s;
+ position: absolute;
+ width: 40px;
+ transform-origin: top left;
+ }
+
+ .switchToText {
+ color: $main-accent;
+ }
+
+ .switchToText:hover {
+ color: $dark-color;
+ }
}
- .switchToText:hover {
- color: $dark-color;
+ button:hover {
+ transform: scale(1);
}
}
+ }
- button:hover {
- transform: scale(1);
- }
+ .webpage-urlInput {
+ padding: 12px 10px 11px 10px;
+ border: 0px;
+ color: grey;
+ letter-spacing: 2px;
+ outline-color: black;
+ background: rgb(238, 238, 238);
+ width: 100%;
+ margin-right: 10px;
+ height: 100%;
}
-}
-
-.webpage-urlInput {
- padding: 12px 10px 11px 10px;
- border: 0px;
- color: grey;
- letter-spacing: 2px;
- outline-color: black;
- background: rgb(238, 238, 238);
- width: 100%;
- margin-right: 10px;
- height: 100%;
-}
-
-.touch-iframe-overlay {
- width: 100%;
- height: 100%;
- position: absolute;
-
- .indicator {
+
+ .touch-iframe-overlay {
+ width: 100%;
+ height: 100%;
position: absolute;
- &.active {
- background-color: rgba(0, 0, 0, 0.1);
+ .indicator {
+ position: absolute;
+
+ &.active {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
}
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 39bb7c01d..724044295 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -399,7 +399,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
specificContextMenu = (e: React.MouseEvent): void => {
const cm = ContextMenu.Instance;
const funcs: ContextMenuProps[] = [];
- funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" });
+ funcs.push({ description: (this.layoutDoc.UseCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.UseCors = !this.layoutDoc.UseCors, icon: "snowflake" });
cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
@@ -446,58 +446,60 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
}
scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
render() {
- return (<div className={`webBox-container`}
- style={{
- transform: `scale(${this.props.ContentScaling()})`,
- width: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}%` : "100%",
- height: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}%` : "100%",
- pointerEvents: this.layoutDoc.isBackground ? "none" : undefined
- }}
- onContextMenu={this.specificContextMenu}>
- <base target="_blank" />
- {this.content}
- <div className={"webBox-outerContent"} ref={this._outerRef}
- style={{ pointerEvents: this.layoutDoc.isAnnotating && !this.layoutDoc.isBackground ? "all" : "none" }}
- onWheel={e => e.stopPropagation()}
- onScroll={e => {
- const iframe = this._iframeRef?.current?.contentDocument;
- const outerFrame = this._outerRef.current;
- if (iframe && outerFrame) {
- if (iframe.children[0].scrollTop !== outerFrame.scrollTop) {
- iframe.children[0].scrollTop = outerFrame.scrollTop;
+ return (<div className="webBox" style={{ width: Number.isFinite(this.props.ContentScaling()) ? `${Math.max(100, 100 / this.props.ContentScaling())}% ` : "100%" }}>
+ <div className={`webBox-container`}
+ style={{
+ transform: `scale(${this.props.ContentScaling()})`,
+ width: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}% ` : "100%",
+ height: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}% ` : "100%",
+ pointerEvents: this.layoutDoc.isBackground ? "none" : undefined
+ }}
+ onContextMenu={this.specificContextMenu}>
+ <base target="_blank" />
+ {this.content}
+ <div className={"webBox-outerContent"} ref={this._outerRef}
+ style={{ pointerEvents: this.layoutDoc.isAnnotating && !this.layoutDoc.isBackground ? "all" : "none" }}
+ onWheel={e => e.stopPropagation()}
+ onScroll={e => {
+ const iframe = this._iframeRef?.current?.contentDocument;
+ const outerFrame = this._outerRef.current;
+ if (iframe && outerFrame) {
+ if (iframe.children[0].scrollTop !== outerFrame.scrollTop) {
+ iframe.children[0].scrollTop = outerFrame.scrollTop;
+ }
+ if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) {
+ iframe.children[0].scrollLeft = outerFrame.scrollLeft;
+ }
}
- if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) {
- iframe.children[0].scrollLeft = outerFrame.scrollLeft;
- }
- }
- //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop)
- }}>
- <div className={"webBox-innerContent"} style={{ height: NumCast(this.layoutDoc.scrollHeight), width: 4000 }}>
- <CollectionFreeFormView {...this.props}
- PanelHeight={this.props.PanelHeight}
- PanelWidth={this.props.PanelWidth}
- annotationsKey={this.annotationKey}
- NativeHeight={returnZero}
- NativeWidth={returnZero}
- focus={this.props.focus}
- setPreviewCursor={this.setPreviewCursor}
- isSelected={this.props.isSelected}
- isAnnotationOverlay={true}
- select={emptyFunction}
- active={this.active}
- ContentScaling={returnOne}
- whenActiveChanged={this.whenActiveChanged}
- removeDocument={this.removeDocument}
- moveDocument={this.moveDocument}
- addDocument={this.addDocument}
- CollectionView={undefined}
- ScreenToLocalTransform={this.scrollXf}
- renderDepth={this.props.renderDepth + 1}
- docFilters={this.props.docFilters}
- ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
- </CollectionFreeFormView>
+ //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop)
+ }}>
+ <div className={"webBox-innerContent"} style={{ height: NumCast(this.layoutDoc.scrollHeight), width: 4000 }}>
+ <CollectionFreeFormView {...this.props}
+ PanelHeight={this.props.PanelHeight}
+ PanelWidth={this.props.PanelWidth}
+ annotationsKey={this.annotationKey}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ focus={this.props.focus}
+ setPreviewCursor={this.setPreviewCursor}
+ isSelected={this.props.isSelected}
+ isAnnotationOverlay={true}
+ select={emptyFunction}
+ active={this.active}
+ ContentScaling={returnOne}
+ whenActiveChanged={this.whenActiveChanged}
+ removeDocument={this.removeDocument}
+ moveDocument={this.moveDocument}
+ addDocument={this.addDocument}
+ CollectionView={undefined}
+ ScreenToLocalTransform={this.scrollXf}
+ renderDepth={this.props.renderDepth + 1}
+ docFilters={this.props.docFilters}
+ ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+ </CollectionFreeFormView>
+ </div>
</div>
- </div>
- </div >);
+ </div >
+ </div>);
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 21:15:18 +0000