@netless/app-slide 0.3.0-canary.0 → 0.3.0-canary.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/SlideViewer.d.ts +4 -1
- package/dist/main.cjs.js +103 -103
- package/dist/main.cjs.js.map +1 -1
- package/dist/main.es.js +38 -17
- package/dist/main.es.js.map +1 -1
- package/dist/main.iife.js +94 -94
- package/dist/main.iife.js.map +1 -1
- package/package.json +1 -1
- package/src/SlideViewer.ts +23 -4
- package/src/fancy-scrollbar.scss +57 -0
- package/src/index.ts +26 -17
- package/src/style.scss +17 -11
package/dist/main.es.js
CHANGED
|
@@ -37507,7 +37507,7 @@ const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
|
|
|
37507
37507
|
function noop() {
|
|
37508
37508
|
return;
|
|
37509
37509
|
}
|
|
37510
|
-
var styles = /* @__PURE__ */ (() =>
|
|
37510
|
+
var styles = /* @__PURE__ */ (() => '.netless-app-slide-tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.netless-app-slide-tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.netless-app-slide-tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.netless-app-slide-content{position:relative;height:100%;overflow:hidden}.netless-app-slide-slide{width:100%;height:100%}.netless-app-slide-preview-mask{display:none;position:absolute;z-index:10200;top:0;left:0;width:100%;height:100%}.netless-app-slide-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:10300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-slide-preview-active .netless-app-slide-preview-mask{display:block}.netless-app-slide-preview-active .netless-app-slide-preview{transform:translate(0)}.netless-app-slide-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-slide-preview-page:hover,.netless-app-slide-preview-page.netless-app-slide-preview-page-active{border-color:#444e601a}.netless-app-slide-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-slide-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;user-select:none}.netless-app-slide-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.netless-app-slide-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.netless-app-slide-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-slide-footer-btn:hover{background:transparent!important}}.netless-app-slide-footer-btn>svg{width:100%;height:100%}.netless-app-slide-footer-btn>svg:nth-of-type(2){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-slide-footer-btn~.netless-app-slide-footer-btn{margin-left:15px}.netless-app-slide-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-slide-page-number{display:flex;align-items:center;height:26px;margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all;font-variant-numeric:tabular-nums}.netless-app-slide-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 .5em 0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";background:transparent;transition:background .4s;user-select:text;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-page-number-input:hover,.netless-app-slide-page-number-input:focus,.netless-app-slide-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-slide-readonly .netless-app-slide-footer-btn{cursor:not-allowed}.netless-app-slide-readonly .netless-app-slide-footer-btn:hover{background:transparent}.netless-app-slide-readonly .netless-app-slide-page-number-input{cursor:not-allowed}.netless-app-slide-readonly .netless-app-slide-page-number-input:hover,.netless-app-slide-readonly .netless-app-slide-page-number-input:focus,.netless-app-slide-readonly .netless-app-slide-page-number-input:active{background:transparent;box-shadow:none}.netless-app-slide-readonly .netless-app-slide-page-number-input:disabled{color:inherit}.netless-app-slide-readonly.netless-app-slide-float-footer{display:none}.telebox-color-scheme-dark .netless-app-slide-page-number-input:active,.telebox-color-scheme-dark .netless-app-slide-page-number-input:focus,.telebox-color-scheme-dark .netless-app-slide-page-number-input:hover{color:currentColor;background:#25282e}.telebox-color-scheme-dark .netless-app-slide-footer{border-top:none}.telebox-color-scheme-dark .netless-app-slide-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-slide-preview{background:rgba(50,50,50,.9)}\n')();
|
|
37511
37511
|
function sidebarSVG(namespace2) {
|
|
37512
37512
|
const NS = "http://www.w3.org/2000/svg";
|
|
37513
37513
|
const $svg = document.createElementNS(NS, "svg");
|
|
@@ -37620,7 +37620,7 @@ function create_sidebar() {
|
|
|
37620
37620
|
append($content, $previewMask);
|
|
37621
37621
|
const $preview = h("div");
|
|
37622
37622
|
set_class($preview, "preview");
|
|
37623
|
-
$preview.classList.add("tele-fancy-scrollbar");
|
|
37623
|
+
$preview.classList.add(wrap_class("tele-fancy-scrollbar"));
|
|
37624
37624
|
$preview.onclick = function on_click_preview(ev) {
|
|
37625
37625
|
var _a;
|
|
37626
37626
|
if (readonly)
|
|
@@ -37865,7 +37865,6 @@ class SlideViewer {
|
|
|
37865
37865
|
this.$content = this.sidebar.$content;
|
|
37866
37866
|
this.$footer = this.footer.$footer;
|
|
37867
37867
|
append(this.$content, this.$slide);
|
|
37868
|
-
append(this.$content, this.$footer);
|
|
37869
37868
|
let resolveReady;
|
|
37870
37869
|
this._readyPromise = new Promise((resolve) => {
|
|
37871
37870
|
resolveReady = resolve;
|
|
@@ -37885,6 +37884,11 @@ class SlideViewer {
|
|
|
37885
37884
|
});
|
|
37886
37885
|
this.sideEffect.addDisposer(this.sidebar.destroy);
|
|
37887
37886
|
this.sideEffect.addDisposer(() => this.slide.destroy());
|
|
37887
|
+
this.sideEffect.addDisposer(() => {
|
|
37888
|
+
this.$content.parentElement && this.$content.remove();
|
|
37889
|
+
this.$footer.parentElement && this.$footer.remove();
|
|
37890
|
+
this.$slide.parentElement && this.$slide.remove();
|
|
37891
|
+
});
|
|
37888
37892
|
let saved_is_frozen = false;
|
|
37889
37893
|
this.sideEffect.addDisposer(on_visibility_change((visible) => {
|
|
37890
37894
|
if (this._destroyed)
|
|
@@ -37897,12 +37901,24 @@ class SlideViewer {
|
|
|
37897
37901
|
this.unfreeze();
|
|
37898
37902
|
}
|
|
37899
37903
|
}));
|
|
37900
|
-
this.slide = new Slide.Slide({
|
|
37904
|
+
this.slide = new Slide.Slide({
|
|
37905
|
+
anchor: this.$slide,
|
|
37906
|
+
resize: true,
|
|
37907
|
+
mode: "local",
|
|
37908
|
+
interactive: true,
|
|
37909
|
+
enableGlobalClick: true,
|
|
37910
|
+
...options
|
|
37911
|
+
});
|
|
37901
37912
|
this.slide.setResource(options.taskId, options.url || DefaultUrl);
|
|
37902
37913
|
let resolveFetching;
|
|
37903
37914
|
this._infoPromise = new Promise((resolve) => {
|
|
37904
37915
|
resolveFetching = resolve;
|
|
37905
37916
|
});
|
|
37917
|
+
this.slide.on("slideChange", (page) => {
|
|
37918
|
+
if (this._destroyed)
|
|
37919
|
+
return;
|
|
37920
|
+
this.setPage(page);
|
|
37921
|
+
});
|
|
37906
37922
|
this.slide.on("renderEnd", () => {
|
|
37907
37923
|
if (!this._ready)
|
|
37908
37924
|
setTimeout(() => {
|
|
@@ -38033,26 +38049,26 @@ const addHooks = function addHooks2(emitter) {
|
|
|
38033
38049
|
refrigerator.focus(event.appId);
|
|
38034
38050
|
});
|
|
38035
38051
|
};
|
|
38036
|
-
const version = "0.3.0-canary.
|
|
38052
|
+
const version = "0.3.0-canary.3";
|
|
38037
38053
|
const SlideApp = {
|
|
38038
38054
|
kind: "Slide",
|
|
38039
38055
|
setup(context) {
|
|
38040
38056
|
var _a, _b;
|
|
38041
|
-
console.log("[Slide] setup @ 0.3.0-canary.
|
|
38057
|
+
console.log("[Slide] setup @ 0.3.0-canary.3");
|
|
38042
38058
|
if (!context.storage.state.taskId) {
|
|
38043
38059
|
throw new Error("[Slide] no taskId");
|
|
38044
38060
|
}
|
|
38045
38061
|
const options = context.getAppOptions() || {};
|
|
38046
|
-
const
|
|
38062
|
+
const logger = make_logger(context);
|
|
38063
|
+
logger.info("[Slide] setup @ 0.3.0-canary.3");
|
|
38047
38064
|
const sideEffect = new n();
|
|
38048
38065
|
const viewer = new SlideViewer({
|
|
38049
38066
|
interactive: true,
|
|
38050
38067
|
mode: "interactive",
|
|
38051
38068
|
resize: true,
|
|
38052
38069
|
enableGlobalClick: true,
|
|
38053
|
-
controller: debug,
|
|
38054
38070
|
timestamp: make_timestamp(context),
|
|
38055
|
-
logger
|
|
38071
|
+
logger,
|
|
38056
38072
|
renderOptions: {
|
|
38057
38073
|
minFPS: options.minFPS || 25,
|
|
38058
38074
|
maxFPS: options.maxFPS || 30,
|
|
@@ -38071,17 +38087,21 @@ const SlideApp = {
|
|
|
38071
38087
|
context.box.mountFooter(viewer.$footer);
|
|
38072
38088
|
context.box.mountContent(viewer.$content);
|
|
38073
38089
|
sideEffect.addDisposer(() => viewer.destroy());
|
|
38074
|
-
connect({ context, viewer, sideEffect,
|
|
38090
|
+
connect({ context, viewer, sideEffect, logger });
|
|
38075
38091
|
onUnmount(context, () => {
|
|
38076
|
-
|
|
38092
|
+
logger.info("[Slide] destroy");
|
|
38077
38093
|
sideEffect.flushAll();
|
|
38078
38094
|
});
|
|
38079
38095
|
}
|
|
38080
38096
|
};
|
|
38081
38097
|
function previewSlide(options) {
|
|
38082
38098
|
const { container } = options;
|
|
38099
|
+
container.style.cssText = "display:flex;flex-direction:column";
|
|
38083
38100
|
const viewer = new SlideViewer(options);
|
|
38101
|
+
container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
|
|
38084
38102
|
container.appendChild(viewer.$content);
|
|
38103
|
+
container.appendChild(viewer.$footer);
|
|
38104
|
+
viewer.prepare(() => viewer.slide.renderSlide(1));
|
|
38085
38105
|
return viewer;
|
|
38086
38106
|
}
|
|
38087
38107
|
function make_timestamp(context) {
|
|
@@ -38127,14 +38147,14 @@ function hex(color) {
|
|
|
38127
38147
|
function onUnmount(context, callback) {
|
|
38128
38148
|
context.emitter.on("destroy", callback);
|
|
38129
38149
|
}
|
|
38130
|
-
function connect({ context, viewer, sideEffect,
|
|
38131
|
-
const log =
|
|
38150
|
+
function connect({ context, viewer, sideEffect, logger }) {
|
|
38151
|
+
const log = logger.info.bind(logger);
|
|
38132
38152
|
let whiteboard = null;
|
|
38133
38153
|
viewer.prepare(({ width, height, slideCount }) => {
|
|
38134
38154
|
if (context.destroyed)
|
|
38135
38155
|
return;
|
|
38136
38156
|
width && context.box.setStageRatio(height / width);
|
|
38137
|
-
whiteboard = context.createWhiteBoardView(slideCount);
|
|
38157
|
+
whiteboard = context.createWhiteBoardView({ size: slideCount });
|
|
38138
38158
|
kick_start();
|
|
38139
38159
|
});
|
|
38140
38160
|
const { slide } = viewer;
|
|
@@ -38183,9 +38203,10 @@ function connect({ context, viewer, sideEffect, debug }) {
|
|
|
38183
38203
|
slide.emit("syncReceive", payload);
|
|
38184
38204
|
}, { fireSelfEventAfterCommit: true }));
|
|
38185
38205
|
slide.on("slideChange", (page) => {
|
|
38186
|
-
|
|
38187
|
-
|
|
38188
|
-
|
|
38206
|
+
if (context.isWritable && whiteboard) {
|
|
38207
|
+
log("[Slide] page to", page);
|
|
38208
|
+
whiteboard.jumpPage(page - 1);
|
|
38209
|
+
}
|
|
38189
38210
|
});
|
|
38190
38211
|
viewer.setReadonly(!context.isWritable);
|
|
38191
38212
|
sideEffect.addDisposer(context.emitter.on("writableChange", (w) => {
|