\n\n ${o?"":''}\n\n
\n `),u=p.interaction;return u.options.find((t=>!t.hidden&&!t.classList.add("active"))),u.type=()=>u.options.find((t=>t.classList.contains("active"))),p})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root);}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app);}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide();}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||"v").repeat(2),[n,i]=o.match(/^[vh]+$/g)?o:[],s=()=>this._color||(this._color=this._lastColor.clone()),r={palette:C({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(o,n){if(!e.palette)return;const i=s(),{_root:r,options:a}=t,{lastColor:l,currentColor:c}=r.preview;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput("slider"));const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\n `,a.comparison?a.useAsButton||t._lastColor||l.style.setProperty("--pcr-color",p):(r.button.style.setProperty("--pcr-color",p),r.button.classList.remove("clear"));const u=i.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?"add":"remove"]("pcr-active");c.style.setProperty("--pcr-color",p);}}),hue:C({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop","slider",t),onchange(o){if(!e.hue||!e.palette)return;const n=s();t._recalc&&(n.h=360*o),this.element.style.backgroundColor=`hsl(${n.h}, 100%, 50%)`,r.palette.trigger();}}),opacity:C({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop","slider",t),onchange(o){if(!e.opacity||!e.palette)return;const n=s();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background=`rgba(0, 0, 0, ${n.a})`,r.palette.trigger();}}),selectable:k({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput("swatch");}})};this._components=r;}_bindEvents(){const{_root:t,options:e}=this,o=[i(t.interaction.clear,"click",(()=>this._clearColor())),i([t.interaction.cancel,t.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel");})),i(t.interaction.save,"click",(()=>{!this.applyColor()&&!e.showAlways&&this.hide();})),i(t.interaction.result,["keyup","input"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),t.stopImmediatePropagation();})),i(t.interaction.result,["focus","blur"],(t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput(null);})),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const n=e.closeWithKey;o.push(i(t.button,"click",(()=>this.isOpen()?this.hide():this.show())),i(document,"keyup",(t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide())),i(document,["touchstart","mousedown"],(e=>{this.isOpen()&&!l(e).some((e=>e===t.app||e===t.button))&&this.hide();}),{capture:!0}));}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};p(t.interaction.result,((t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],s=t+(e>=100?1e3*o:o);return s<=0?0:Number((s\n
\n \n
\n\n \n\n \n \n \n
\n\n \n \n \n
\n\n \n \n \n
\n\n \n \n \n
\n \n \n\n \n \n \n \n \n\n \n \n \n
\n `![]()
`
+ let imgViewEl = createEl('img');
+ imgViewEl.addClass(OIT_CLASS.IMG_VIEW);
+ imgViewEl.hidden = true; // hide 'oit-img-view' for now
+ imgViewEl.dataset.index = i + ''; // set data-index
+ this.setImgViewDefaultBackground(imgViewEl);
+ imgInfo.imgContainerEl.appendChild(imgViewEl);
+ // cache imgList
+ imgInfo.imgList.push(new ImgCto(i, curTime, imgViewEl));
+ // isUpdate = true;
+ }
+ };
+ this.getMatchedImg = () => {
+ let earliestImg;
+ for (const img of this.imgInfo.imgList) {
+ if (!earliestImg || earliestImg.mtime > img.mtime)
+ earliestImg = img;
+ if (img.popup)
+ continue;
+ return img;
+ }
+ if (this.plugin.settings.pinCoverMode) {
+ return earliestImg;
+ }
+ return null;
+ };
+ /**
+ * it may from: renderContainerView(), switch GalleryNavbarView, click toolbar_refresh
+ * @param imgCto
+ * @param imgSrc
+ * @param imgAlt
+ * @param imgTitleIndex
+ */
+ this.refreshImg = (imgCto, imgSrc, imgAlt, imgTitleIndex) => {
+ if (!imgSrc)
+ imgSrc = imgCto.imgViewEl.src;
+ if (!imgAlt)
+ imgAlt = imgCto.imgViewEl.alt;
+ this.renderImgTitle(imgAlt, imgTitleIndex);
+ if (imgSrc) {
+ if (imgCto.refreshImgInterval) {
+ clearInterval(imgCto.refreshImgInterval);
+ imgCto.refreshImgInterval = null;
+ }
+ let realImg = new Image();
+ realImg.src = imgSrc;
+ imgCto.refreshImgInterval = setInterval((realImg) => {
+ var _a, _b;
+ if (realImg.width > 0 || realImg.height > 0) {
+ clearInterval(imgCto.refreshImgInterval);
+ imgCto.refreshImgInterval = null;
+ this.setImgViewPosition(ImgUtil.calculateImgZoomSize(realImg, imgCto, (_a = this.parentContainerEl) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.parentContainerEl) === null || _b === void 0 ? void 0 : _b.clientHeight), 0);
+ this.renderImgView(imgCto.imgViewEl, imgSrc, imgAlt);
+ this.renderImgTip(imgCto);
+ imgCto.imgViewEl.style.setProperty('transform', imgCto.defaultImgStyle.transform);
+ imgCto.imgViewEl.style.setProperty('filter', imgCto.defaultImgStyle.filter);
+ imgCto.imgViewEl.style.setProperty('mix-blend-mode', imgCto.defaultImgStyle.mixBlendMode);
+ }
+ }, 40, realImg);
+ }
+ };
+ this.renderImgTitle = (name, index) => {
+ };
+ this.setImgViewPosition = (imgZoomSize, rotate) => {
+ const imgViewEl = imgZoomSize.imgViewEl;
+ if (!imgViewEl)
+ return;
+ if (imgZoomSize) {
+ imgViewEl.setAttribute('width', imgZoomSize.curWidth + 'px');
+ imgViewEl.style.setProperty('margin-top', imgZoomSize.top + 'px', 'important');
+ imgViewEl.style.setProperty('margin-left', imgZoomSize.left + 'px', 'important');
+ }
+ const rotateDeg = rotate ? rotate : 0;
+ imgViewEl.style.transform = 'rotate(' + rotateDeg + 'deg)';
+ imgZoomSize.rotate = rotateDeg;
+ };
+ this.renderImgView = (imgViewEl, src, alt) => {
+ if (!imgViewEl)
+ return;
+ imgViewEl.setAttribute('src', src);
+ imgViewEl.setAttribute('alt', alt);
+ imgViewEl.hidden = !src && !alt;
+ };
+ this.renderImgTip = (activeImg) => {
+ if (!activeImg)
+ activeImg = this.imgGlobalStatus.activeImg;
+ if (activeImg && this.imgInfo.imgTipEl && activeImg.realWidth > 0 && activeImg.curWidth > 0) {
+ if (this.imgInfo.imgTipTimeout) {
+ clearTimeout(this.imgInfo.imgTipTimeout);
+ }
+ if (this.plugin.settings.imgTipToggle) {
+ this.imgInfo.imgTipEl.hidden = false; // display 'oit-img-tip'
+ const ratio = activeImg.curWidth * 100 / activeImg.realWidth;
+ const isSingleDigit = 10 > ratio;
+ const width = isSingleDigit ? 20 : 40;
+ const left = activeImg.left + activeImg.curWidth / 2 - width / 2;
+ const top = activeImg.top + activeImg.curHeight / 2 - 10;
+ this.imgInfo.imgTipEl.style.setProperty("width", width + 'px');
+ this.imgInfo.imgTipEl.style.setProperty("font-size", isSingleDigit || 100 >= activeImg.curWidth ? 'xx-small' : 'x-small');
+ this.imgInfo.imgTipEl.style.setProperty("left", left + 'px');
+ this.imgInfo.imgTipEl.style.setProperty("top", top + 'px');
+ this.imgInfo.imgTipEl.style.setProperty("z-index", activeImg.zIndex + '');
+ this.imgInfo.imgTipEl.setText(parseInt(ratio + '') + '%');
+ this.imgInfo.imgTipTimeout = setTimeout(() => {
+ this.imgInfo.imgTipEl.hidden = true;
+ }, 1000);
+ }
+ else {
+ this.imgInfo.imgTipEl.hidden = true; // hide 'oit-img-tip'
+ this.imgInfo.imgTipTimeout = null;
+ }
+ }
+ };
+ this.setImgViewDefaultBackgroundForImgList = () => {
+ for (const imgCto of this.imgInfo.imgList) {
+ this.setImgViewDefaultBackground(imgCto.imgViewEl);
+ }
+ };
+ this.setImgViewDefaultBackground = (imgViewEl) => {
+ if (!imgViewEl)
+ return;
+ if (this.plugin.settings.imgViewBackgroundColor && IMG_DEFAULT_BACKGROUND_COLOR != this.plugin.settings.imgViewBackgroundColor) {
+ imgViewEl.removeClass('img-default-background');
+ imgViewEl.style.setProperty('background-color', this.plugin.settings.imgViewBackgroundColor);
+ }
+ else {
+ imgViewEl.addClass('img-default-background');
+ imgViewEl.style.removeProperty('background-color');
+ }
+ };
+ this.setActiveImgZIndex = (activeImg) => {
+ };
+ //endregion
+ //region ================== Gallery NavBar ========================
+ this.switchImageOnGalleryNavBar = (event, next) => {
+ };
+ this.renderGalleryNavbar = () => {
+ };
+ this.removeGalleryNavbar = () => {
+ };
+ //endregion
+ //region ================== full screen ========================
+ /**
+ * full-screen mode
+ */
+ this.showPlayerImg = (activeImg) => {
+ if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg))
+ return;
+ this.imgGlobalStatus.fullScreen = true;
+ activeImg.fullScreen = true;
+ // activeImg.imgViewEl.style.setProperty('display', 'none', 'important'); // hide imgViewEl
+ // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'none'); // hide 'oit-img-footer'
+ // show the img-player
+ this.imgInfo.imgPlayerEl.style.setProperty('display', 'block');
+ this.imgInfo.imgPlayerEl.style.setProperty('z-index', (this.imgGlobalStatus.activeImgZIndex + 10) + '');
+ this.imgInfo.imgPlayerEl.addEventListener('click', this.closePlayerImg);
+ const windowWidth = this.doc.documentElement.clientWidth || this.doc.body.clientWidth;
+ const windowHeight = this.doc.documentElement.clientHeight || this.doc.body.clientHeight;
+ let newWidth, newHeight;
+ let top = 0;
+ if (IMG_FULL_SCREEN_MODE.STRETCH == this.plugin.settings.imgFullScreenMode) {
+ newWidth = windowWidth + 'px';
+ newHeight = windowHeight + 'px';
+ }
+ else if (IMG_FULL_SCREEN_MODE.FILL == this.plugin.settings.imgFullScreenMode) {
+ newWidth = '100%';
+ newHeight = '100%';
+ }
+ else {
+ // fit
+ const widthRatio = windowWidth / activeImg.realWidth;
+ const heightRatio = windowHeight / activeImg.realHeight;
+ if (widthRatio <= heightRatio) {
+ newWidth = windowWidth;
+ newHeight = widthRatio * activeImg.realHeight;
+ }
+ else {
+ newHeight = windowHeight;
+ newWidth = heightRatio * activeImg.realWidth;
+ }
+ top = (windowHeight - newHeight) / 2;
+ newWidth = newWidth + 'px';
+ newHeight = newHeight + 'px';
+ }
+ const imgPlayerImgViewEl = this.imgInfo.imgPlayerImgViewEl;
+ if (imgPlayerImgViewEl) {
+ imgPlayerImgViewEl.setAttribute('src', activeImg.imgViewEl.src);
+ imgPlayerImgViewEl.setAttribute('alt', activeImg.imgViewEl.alt);
+ imgPlayerImgViewEl.setAttribute('width', newWidth);
+ imgPlayerImgViewEl.setAttribute('height', newHeight);
+ imgPlayerImgViewEl.style.setProperty('margin-top', top + 'px');
+ //this.imgInfo.imgPlayerImgViewEl.style.setProperty('margin-left', left + 'px');
+ this.setImgViewDefaultBackground(imgPlayerImgViewEl);
+ }
+ };
+ /**
+ * close full screen
+ */
+ this.closePlayerImg = () => {
+ for (const imgCto of this.imgInfo.imgList) {
+ if (!imgCto.fullScreen)
+ continue;
+ // show the popped up image
+ // imgCto.imgViewEl?.style.setProperty('display', 'block', 'important');
+ // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'block');
+ }
+ // hide full screen
+ if (this.imgInfo.imgPlayerEl) {
+ this.imgInfo.imgPlayerEl.style.setProperty('display', 'none'); // hide 'img-player'
+ this.imgInfo.imgPlayerEl.removeEventListener('click', this.closePlayerImg);
+ }
+ if (this.imgInfo.imgPlayerImgViewEl) {
+ this.imgInfo.imgPlayerImgViewEl.setAttribute('src', '');
+ this.imgInfo.imgPlayerImgViewEl.setAttribute('alt', '');
+ }
+ this.imgGlobalStatus.fullScreen = false;
+ };
+ //endregion
+ //region ================== events ========================
+ this.addOrRemoveEvents = (matchedImg, isAdd) => {
+ if (isAdd) {
+ if (!this.imgGlobalStatus.popup) {
+ this.doc.addEventListener('keydown', this.triggerKeydown);
+ this.doc.addEventListener('keyup', this.triggerKeyup);
+ }
+ if (this.isNormalMode()) {
+ // click event: hide container view
+ this.imgInfo.oitContainerEl.addEventListener('click', this.closeContainerView);
+ }
+ matchedImg.imgViewEl.addEventListener('mouseenter', this.mouseenterImgView);
+ matchedImg.imgViewEl.addEventListener('mouseleave', this.mouseleaveImgView);
+ // drag the image via mouse
+ matchedImg.imgViewEl.addEventListener('mousedown', this.mousedownImgView);
+ matchedImg.imgViewEl.addEventListener('mouseup', this.mouseupImgView);
+ // zoom the image via mouse wheel
+ matchedImg.imgViewEl.addEventListener('mousewheel', this.mousewheelViewContainer, { passive: true });
+ }
+ else {
+ if (!this.imgGlobalStatus.popup) {
+ this.doc.removeEventListener('keydown', this.triggerKeydown);
+ this.doc.removeEventListener('keyup', this.triggerKeyup);
+ if (this.imgGlobalStatus.clickTimer) {
+ clearTimeout(this.imgGlobalStatus.clickTimer);
+ this.imgGlobalStatus.clickTimer = null;
+ this.imgGlobalStatus.clickCount = 0;
+ }
+ }
+ if (!this.isPinMode()) {
+ this.imgInfo.oitContainerEl.removeEventListener('click', this.closeContainerView);
+ }
+ matchedImg.imgViewEl.removeEventListener('mouseenter', this.mouseenterImgView);
+ matchedImg.imgViewEl.removeEventListener('mouseleave', this.mouseleaveImgView);
+ matchedImg.imgViewEl.removeEventListener('mousedown', this.mousedownImgView);
+ matchedImg.imgViewEl.removeEventListener('mouseup', this.mouseupImgView);
+ matchedImg.imgViewEl.removeEventListener('mousewheel', this.mousewheelViewContainer);
+ if (matchedImg.refreshImgInterval) {
+ clearInterval(matchedImg.refreshImgInterval);
+ matchedImg.refreshImgInterval = null;
+ }
+ }
+ };
+ this.triggerKeyup = (event) => {
+ // console.log('keyup', event, event.key);
+ const key = event.key;
+ if (!key)
+ return;
+ if (!('Escape' === key)) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ switch (key) {
+ case 'Escape':
+ // close full screen, hide container view
+ this.imgGlobalStatus.fullScreen ? this.closePlayerImg() : this.closeContainerView();
+ break;
+ case 'ArrowUp':
+ this.imgGlobalStatus.arrowUp = false;
+ break;
+ case 'ArrowDown':
+ this.imgGlobalStatus.arrowDown = false;
+ break;
+ case 'ArrowLeft':
+ this.imgGlobalStatus.arrowLeft = false;
+ // switch to the previous image on the gallery navBar
+ this.switchImageOnGalleryNavBar(event, false);
+ break;
+ case 'ArrowRight':
+ this.imgGlobalStatus.arrowRight = false;
+ // switch to the next image on the gallery navBar
+ this.switchImageOnGalleryNavBar(event, true);
+ break;
+ }
+ };
+ /**
+ * move the image by keyboard
+ * @param event
+ */
+ this.triggerKeydown = (event) => {
+ //console.log('keydown', event, event.key, this.imgStatus);
+ if (this.isPinMode())
+ return;
+ event.preventDefault();
+ event.stopPropagation();
+ if (this.imgGlobalStatus.arrowUp && this.imgGlobalStatus.arrowLeft) {
+ this.moveImgViewByHotkey(event, 'UP_LEFT');
+ return;
+ }
+ else if (this.imgGlobalStatus.arrowUp && this.imgGlobalStatus.arrowRight) {
+ this.moveImgViewByHotkey(event, 'UP_RIGHT');
+ return;
+ }
+ else if (this.imgGlobalStatus.arrowDown && this.imgGlobalStatus.arrowLeft) {
+ this.moveImgViewByHotkey(event, 'DOWN_LEFT');
+ return;
+ }
+ else if (this.imgGlobalStatus.arrowDown && this.imgGlobalStatus.arrowRight) {
+ this.moveImgViewByHotkey(event, 'DOWN_RIGHT');
+ return;
+ }
+ switch (event.key) {
+ case 'ArrowUp':
+ this.imgGlobalStatus.arrowUp = true;
+ this.moveImgViewByHotkey(event, 'UP');
+ break;
+ case 'ArrowDown':
+ this.imgGlobalStatus.arrowDown = true;
+ this.moveImgViewByHotkey(event, 'DOWN');
+ break;
+ case 'ArrowLeft':
+ this.imgGlobalStatus.arrowLeft = true;
+ this.moveImgViewByHotkey(event, 'LEFT');
+ break;
+ case 'ArrowRight':
+ this.imgGlobalStatus.arrowRight = true;
+ this.moveImgViewByHotkey(event, 'RIGHT');
+ break;
+ }
+ };
+ this.moveImgViewByHotkey = (event, orientation) => {
+ if (!orientation || !this.imgGlobalStatus.popup || !this.checkHotkeySettings(event, this.plugin.settings.moveTheImageHotkey))
+ return;
+ switch (orientation) {
+ case 'UP':
+ this.mousemoveImgView(null, { offsetX: 0, offsetY: -this.plugin.settings.imageMoveSpeed });
+ break;
+ case 'DOWN':
+ this.mousemoveImgView(null, { offsetX: 0, offsetY: this.plugin.settings.imageMoveSpeed });
+ break;
+ case 'LEFT':
+ this.mousemoveImgView(null, { offsetX: -this.plugin.settings.imageMoveSpeed, offsetY: 0 });
+ break;
+ case 'RIGHT':
+ this.mousemoveImgView(null, { offsetX: this.plugin.settings.imageMoveSpeed, offsetY: 0 });
+ break;
+ case 'UP_LEFT':
+ this.mousemoveImgView(null, {
+ offsetX: -this.plugin.settings.imageMoveSpeed,
+ offsetY: -this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ case 'UP_RIGHT':
+ this.mousemoveImgView(null, {
+ offsetX: this.plugin.settings.imageMoveSpeed,
+ offsetY: -this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ case 'DOWN_LEFT':
+ this.mousemoveImgView(null, {
+ offsetX: -this.plugin.settings.imageMoveSpeed,
+ offsetY: this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ case 'DOWN_RIGHT':
+ this.mousemoveImgView(null, {
+ offsetX: this.plugin.settings.imageMoveSpeed,
+ offsetY: this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ }
+ };
+ this.checkHotkeySettings = (event, hotkey) => {
+ // console.log("[oit] checkHotkeySettings: ", event.ctrlKey, event.altKey, event.shiftKey)
+ switch (hotkey) {
+ case "NONE":
+ return !event.ctrlKey && !event.altKey && !event.shiftKey;
+ case "CTRL":
+ return event.ctrlKey && !event.altKey && !event.shiftKey;
+ case "ALT":
+ return !event.ctrlKey && event.altKey && !event.shiftKey;
+ case "SHIFT":
+ return !event.ctrlKey && !event.altKey && event.shiftKey;
+ case "CTRL_ALT":
+ return event.ctrlKey && event.altKey && !event.shiftKey;
+ case "CTRL_SHIFT":
+ return event.ctrlKey && !event.altKey && event.shiftKey;
+ case "SHIFT_ALT":
+ return !event.ctrlKey && event.altKey && event.shiftKey;
+ case "CTRL_SHIFT_ALT":
+ return event.ctrlKey && event.altKey && event.shiftKey;
+ }
+ return false;
+ };
+ this.mouseenterImgView = (event) => {
+ this.resetClickTimer();
+ event.stopPropagation();
+ event.preventDefault();
+ this.getAndUpdateActiveImg(event);
+ // console.log('mouseenterImgView', event, this.imgGlobalStatus.activeImg);
+ };
+ this.mousedownImgView = (event) => {
+ // console.log('mousedownImgView', event, this.imgGlobalStatus.activeImg, event.button);
+ event.stopPropagation();
+ event.preventDefault();
+ const activeImg = this.getAndUpdateActiveImg(event);
+ if (!activeImg)
+ return;
+ if (0 == event.button) { // left click
+ this.setClickTimer(activeImg);
+ this.setActiveImgZIndex(activeImg);
+ this.imgGlobalStatus.dragging = true;
+ // 鼠标相对于图片的位置
+ activeImg.moveX = activeImg.imgViewEl.offsetLeft - event.clientX;
+ activeImg.moveY = activeImg.imgViewEl.offsetTop - event.clientY;
+ // 鼠标按下时持续触发/移动事件
+ activeImg.imgViewEl.onmousemove = this.mousemoveImgView;
+ }
+ };
+ /**
+ * move the image by mouse or keyboard
+ * @param event
+ * @param offsetSize
+ */
+ this.mousemoveImgView = (event, offsetSize) => {
+ // console.log('mousemoveImgView', event, this.imgGlobalStatus.activeImg);
+ const activeImg = this.imgGlobalStatus.activeImg;
+ if (!activeImg)
+ return;
+ if (event) {
+ if (!this.imgGlobalStatus.dragging)
+ return;
+ // drag via mouse cursor (Both Mode)
+ activeImg.left = event.clientX + activeImg.moveX;
+ activeImg.top = event.clientY + activeImg.moveY;
+ }
+ else if (offsetSize) {
+ // move by arrow keys (Normal Mode)
+ activeImg.left += offsetSize.offsetX;
+ activeImg.top += offsetSize.offsetY;
+ }
+ else {
+ return;
+ }
+ // move the image
+ activeImg.imgViewEl.style.setProperty('margin-left', activeImg.left + 'px', 'important');
+ activeImg.imgViewEl.style.setProperty('margin-top', activeImg.top + 'px', 'important');
+ };
+ this.mouseupImgView = (event) => {
+ var _a;
+ // console.log('mouseupImgView', event, this.imgGlobalStatus.activeImg);
+ this.imgGlobalStatus.dragging = false;
+ event.preventDefault();
+ event.stopPropagation();
+ const activeImg = this.imgGlobalStatus.activeImg;
+ if (activeImg) {
+ activeImg.imgViewEl.onmousemove = null;
+ if (2 == event.button) { // right click
+ (_a = this.menuView) === null || _a === void 0 ? void 0 : _a.show(event, activeImg);
+ }
+ }
+ };
+ this.mouseleaveImgView = (event) => {
+ // console.log('mouseleaveImgView', event, this.imgGlobalStatus.activeImg, '>>> set null');
+ this.imgGlobalStatus.dragging = false;
+ this.resetClickTimer();
+ event.preventDefault();
+ event.stopPropagation();
+ const activeImg = this.imgGlobalStatus.activeImg;
+ if (activeImg) {
+ activeImg.imgViewEl.onmousemove = null;
+ this.setActiveImgForMouseEvent(null); // for pin mode
+ }
+ };
+ this.setClickTimer = (activeImg) => {
+ ++this.imgGlobalStatus.clickCount;
+ clearTimeout(this.imgGlobalStatus.clickTimer);
+ this.imgGlobalStatus.clickTimer = setTimeout(() => {
+ const clickCount = this.imgGlobalStatus.clickCount;
+ this.resetClickTimer();
+ if (2 === clickCount) { // double click
+ if (!activeImg)
+ activeImg = this.imgGlobalStatus.activeImg;
+ // console.log('mousedownImgView: double click...', activeImg.index);
+ this.clickImgToolbar(null, this.plugin.settings.doubleClickToolbar, activeImg);
+ }
+ }, 200);
+ };
+ this.resetClickTimer = () => {
+ this.imgGlobalStatus.clickTimer = null;
+ this.imgGlobalStatus.clickCount = 0;
+ };
+ this.getAndUpdateActiveImg = (event) => {
+ const targetEl = event.target;
+ let index;
+ if (!targetEl || !(index = targetEl.dataset.index))
+ return;
+ const activeImg = this.imgInfo.imgList[parseInt(index)];
+ if (activeImg && (!this.imgGlobalStatus.activeImg || activeImg.index !== this.imgGlobalStatus.activeImg.index)) {
+ this.setActiveImgForMouseEvent(activeImg); // update activeImg
+ }
+ // console.log('getAndUpdateActiveImg: ', activeImg)
+ return activeImg;
+ };
+ this.mousewheelViewContainer = (event) => {
+ // event.preventDefault();
+ event.stopPropagation();
+ // @ts-ignore
+ this.zoomAndRender(0 < event.wheelDelta ? 0.1 : -0.1, event);
+ };
+ this.zoomAndRender = (ratio, event, actualSize, activeImg) => {
+ if (!activeImg) {
+ activeImg = this.imgGlobalStatus.activeImg;
+ }
+ let activeImgViewEl;
+ if (!activeImg || !(activeImgViewEl = activeImg.imgViewEl))
+ return;
+ let offsetSize = { offsetX: 0, offsetY: 0 };
+ if (event) {
+ offsetSize.offsetX = event.offsetX;
+ offsetSize.offsetY = event.offsetY;
+ }
+ else {
+ offsetSize.offsetX = activeImg.curWidth / 2;
+ offsetSize.offsetY = activeImg.curHeight / 2;
+ }
+ const zoomData = ImgUtil.zoom(ratio, activeImg, offsetSize, actualSize);
+ this.renderImgTip(activeImg);
+ activeImgViewEl.setAttribute('width', zoomData.curWidth + 'px');
+ activeImgViewEl.style.setProperty('margin-top', zoomData.top + 'px', 'important');
+ activeImgViewEl.style.setProperty('margin-left', zoomData.left + 'px', 'important');
+ };
+ this.clickImgToolbar = (event, targetElClass, activeImg) => {
+ if (!targetElClass && !activeImg) {
+ if (!event)
+ return;
+ // comes from clicking toolbar
+ targetElClass = event.target.className;
+ activeImg = this.imgGlobalStatus.activeImg;
+ }
+ switch (targetElClass) {
+ case 'toolbar_zoom_to_100':
+ this.zoomAndRender(null, null, true, activeImg);
+ break;
+ case 'toolbar_zoom_in':
+ this.zoomAndRender(0.1);
+ break;
+ case 'toolbar_zoom_out':
+ this.zoomAndRender(-0.1);
+ break;
+ case 'toolbar_full_screen':
+ this.showPlayerImg(activeImg);
+ break;
+ case 'toolbar_refresh':
+ this.refreshImg(activeImg);
+ break;
+ case 'toolbar_rotate_left':
+ activeImg.rotate -= 90;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_rotate_right':
+ activeImg.rotate += 90;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_scale_x':
+ activeImg.scaleX = !activeImg.scaleX;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_scale_y':
+ activeImg.scaleY = !activeImg.scaleY;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_invert_color':
+ activeImg.invertColor = !activeImg.invertColor;
+ ImgUtil.invertImgColor(activeImg.imgViewEl, activeImg.invertColor);
+ break;
+ case 'toolbar_copy':
+ ImgUtil.copyImage(activeImg.imgViewEl, activeImg.curWidth, activeImg.curHeight);
+ break;
+ case 'toolbar_close':
+ this.closeContainerView(event, activeImg);
+ break;
+ }
+ };
+ this.plugin = plugin;
+ }
+}
+
+var Md5 = /** @class */ (function () {
+ function Md5() {
+ }
+ Md5.AddUnsigned = function (lX, lY) {
+ var lX4, lY4, lX8, lY8, lResult;
+ lX8 = (lX & 0x80000000);
+ lY8 = (lY & 0x80000000);
+ lX4 = (lX & 0x40000000);
+ lY4 = (lY & 0x40000000);
+ lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
+ if (!!(lX4 & lY4)) {
+ return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
+ }
+ if (!!(lX4 | lY4)) {
+ if (!!(lResult & 0x40000000)) {
+ return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
+ }
+ else {
+ return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
+ }
+ }
+ else {
+ return (lResult ^ lX8 ^ lY8);
+ }
+ };
+ Md5.FF = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.F(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.GG = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.G(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.HH = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.H(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.II = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.I(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.ConvertToWordArray = function (string) {
+ var lWordCount, lMessageLength = string.length, lNumberOfWords_temp1 = lMessageLength + 8, lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64, lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16, lWordArray = Array(lNumberOfWords - 1), lBytePosition = 0, lByteCount = 0;
+ while (lByteCount < lMessageLength) {
+ lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+ lBytePosition = (lByteCount % 4) * 8;
+ lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
+ lByteCount++;
+ }
+ lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+ lBytePosition = (lByteCount % 4) * 8;
+ lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
+ lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
+ lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
+ return lWordArray;
+ };
+ Md5.WordToHex = function (lValue) {
+ var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
+ for (lCount = 0; lCount <= 3; lCount++) {
+ lByte = (lValue >>> (lCount * 8)) & 255;
+ WordToHexValue_temp = "0" + lByte.toString(16);
+ WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
+ }
+ return WordToHexValue;
+ };
+ Md5.Utf8Encode = function (string) {
+ var utftext = "", c;
+ string = string.replace(/\r\n/g, "\n");
+ for (var n = 0; n < string.length; n++) {
+ c = string.charCodeAt(n);
+ if (c < 128) {
+ utftext += String.fromCharCode(c);
+ }
+ else if ((c > 127) && (c < 2048)) {
+ utftext += String.fromCharCode((c >> 6) | 192);
+ utftext += String.fromCharCode((c & 63) | 128);
+ }
+ else {
+ utftext += String.fromCharCode((c >> 12) | 224);
+ utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+ utftext += String.fromCharCode((c & 63) | 128);
+ }
+ }
+ return utftext;
+ };
+ Md5.init = function (string) {
+ var temp;
+ if (typeof string !== 'string')
+ string = JSON.stringify(string);
+ this._string = this.Utf8Encode(string);
+ this.x = this.ConvertToWordArray(this._string);
+ this.a = 0x67452301;
+ this.b = 0xEFCDAB89;
+ this.c = 0x98BADCFE;
+ this.d = 0x10325476;
+ for (this.k = 0; this.k < this.x.length; this.k += 16) {
+ this.AA = this.a;
+ this.BB = this.b;
+ this.CC = this.c;
+ this.DD = this.d;
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k], this.S11, 0xD76AA478);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 1], this.S12, 0xE8C7B756);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S13, 0x242070DB);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 3], this.S14, 0xC1BDCEEE);
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S11, 0xF57C0FAF);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 5], this.S12, 0x4787C62A);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S13, 0xA8304613);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 7], this.S14, 0xFD469501);
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S11, 0x698098D8);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 9], this.S12, 0x8B44F7AF);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S13, 0xFFFF5BB1);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 11], this.S14, 0x895CD7BE);
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S11, 0x6B901122);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 13], this.S12, 0xFD987193);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S13, 0xA679438E);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 15], this.S14, 0x49B40821);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S21, 0xF61E2562);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 6], this.S22, 0xC040B340);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S23, 0x265E5A51);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k], this.S24, 0xE9B6C7AA);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S21, 0xD62F105D);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 10], this.S22, 0x2441453);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S23, 0xD8A1E681);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 4], this.S24, 0xE7D3FBC8);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S21, 0x21E1CDE6);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 14], this.S22, 0xC33707D6);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S23, 0xF4D50D87);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 8], this.S24, 0x455A14ED);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S21, 0xA9E3E905);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 2], this.S22, 0xFCEFA3F8);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S23, 0x676F02D9);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 12], this.S24, 0x8D2A4C8A);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S31, 0xFFFA3942);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 8], this.S32, 0x8771F681);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S33, 0x6D9D6122);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 14], this.S34, 0xFDE5380C);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S31, 0xA4BEEA44);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 4], this.S32, 0x4BDECFA9);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S33, 0xF6BB4B60);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 10], this.S34, 0xBEBFBC70);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S31, 0x289B7EC6);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k], this.S32, 0xEAA127FA);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S33, 0xD4EF3085);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 6], this.S34, 0x4881D05);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S31, 0xD9D4D039);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 12], this.S32, 0xE6DB99E5);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S33, 0x1FA27CF8);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 2], this.S34, 0xC4AC5665);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k], this.S41, 0xF4292244);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 7], this.S42, 0x432AFF97);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S43, 0xAB9423A7);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 5], this.S44, 0xFC93A039);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S41, 0x655B59C3);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 3], this.S42, 0x8F0CCC92);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S43, 0xFFEFF47D);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 1], this.S44, 0x85845DD1);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S41, 0x6FA87E4F);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 15], this.S42, 0xFE2CE6E0);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S43, 0xA3014314);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 13], this.S44, 0x4E0811A1);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S41, 0xF7537E82);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 11], this.S42, 0xBD3AF235);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S43, 0x2AD7D2BB);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 9], this.S44, 0xEB86D391);
+ this.a = this.AddUnsigned(this.a, this.AA);
+ this.b = this.AddUnsigned(this.b, this.BB);
+ this.c = this.AddUnsigned(this.c, this.CC);
+ this.d = this.AddUnsigned(this.d, this.DD);
+ }
+ temp = this.WordToHex(this.a) + this.WordToHex(this.b) + this.WordToHex(this.c) + this.WordToHex(this.d);
+ return temp.toLowerCase();
+ };
+ Md5.x = Array();
+ Md5.S11 = 7;
+ Md5.S12 = 12;
+ Md5.S13 = 17;
+ Md5.S14 = 22;
+ Md5.S21 = 5;
+ Md5.S22 = 9;
+ Md5.S23 = 14;
+ Md5.S24 = 20;
+ Md5.S31 = 4;
+ Md5.S32 = 11;
+ Md5.S33 = 16;
+ Md5.S34 = 23;
+ Md5.S41 = 6;
+ Md5.S42 = 10;
+ Md5.S43 = 15;
+ Md5.S44 = 21;
+ Md5.RotateLeft = function (lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits)); };
+ Md5.F = function (x, y, z) { return (x & y) | ((~x) & z); };
+ Md5.G = function (x, y, z) { return (x & z) | (y & (~z)); };
+ Md5.H = function (x, y, z) { return (x ^ y ^ z); };
+ Md5.I = function (x, y, z) { return (y ^ (x | (~z))); };
+ return Md5;
+}());
+
+class GalleryImgCto {
+ constructor(alt, src) {
+ this.alt = alt;
+ this.src = src;
+ }
+}
+class GalleryImgCacheCto {
+ constructor(file, galleryImgList, mtime) {
+ this.file = file;
+ this.galleryImgList = galleryImgList;
+ this.mtime = mtime;
+ }
+}
+
+class FileCto {
+ constructor(path, ctime, mtime) {
+ this.path = path;
+ this.ctime = ctime;
+ this.mtime = mtime;
+ }
+}
+
+/* // const imgList: Array
+ if (!this.galleryNavbarEl) {
+ // imgInfo.imgFooterEl.append(galleryNavbarEl = createDiv());
+ imgFooterEl.append(this.galleryNavbarEl = createDiv());
+ this.galleryNavbarEl.addClass('gallery-navbar');
+ this.galleryNavbarEl.onmouseover = () => {
+ this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarHoverColor);
+ };
+ this.galleryNavbarEl.onmouseout = () => {
+ this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarDefaultColor);
+ };
+ // add events
+ this.galleryNavbarEl.addEventListener('mousedown', this.mouseDownGallery);
+ this.galleryNavbarEl.addEventListener('mousemove', this.mouseMoveGallery);
+ this.galleryNavbarEl.addEventListener('mouseup', this.mouseUpGallery);
+ this.galleryNavbarEl.addEventListener('mouseleave', this.mouseLeaveGallery);
+ }
+ this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarDefaultColor);
+ if (!this.galleryListEl) {
+ this.galleryNavbarEl.append(this.galleryListEl = createEl('ul')); //
-
+ this.galleryListEl.addClass('gallery-list');
+ }
+ this.initDefaultData();
+ this.galleryNavbarEl.hidden = false; // display 'gallery-navbar'
+ this.state = true;
+ };
+ this.closeGalleryNavbar = () => {
+ if (!this.state)
+ return;
+ this.galleryNavbarEl.hidden = true; // hide 'gallery-navbar'
+ this.state = false;
+ this.initDefaultData();
+ };
+ this.remove = () => {
+ var _a, _b;
+ this.state = false;
+ (_a = this.galleryNavbarEl) === null || _a === void 0 ? void 0 : _a.remove();
+ (_b = this.galleryListEl) === null || _b === void 0 ? void 0 : _b.remove();
+ this.galleryNavbarEl = null;
+ this.galleryListEl = null;
+ this.galleryIsMousingDown = false;
+ this.galleryMouseDownClientX = 0;
+ this.galleryTranslateX = 0;
+ this.mouseDownTime = null;
+ GalleryNavbarView.GALLERY_IMG_CACHE = new Map();
+ this.initDefaultData();
+ };
+ this.getTargetImgContextHash = (targetImgEl, containerEl, imageSelector) => {
+ let imgEl;
+ let targetImgHash = null;
+ let targetIdx = -1;
+ const imgs = containerEl.querySelectorAll(imageSelector);
+ // console.log('IMAGE_SELECTOR>>', imageSelector, imgs);
+ const len = imgs.length;
+ for (let i = 0; i < len; i++) {
+ if ((imgEl = imgs[i])) {
+ if ('1' == imgEl.getAttribute('data-oit-target')) {
+ targetIdx = i;
+ targetImgHash = md5Img(imgEl.alt, imgEl.src);
+ break;
+ }
+ }
+ }
+ if (0 > targetIdx)
+ targetImgHash = md5Img(targetImgEl.alt, targetImgEl.src);
+ let prevHash, nextHash;
+ if (0 == targetIdx) {
+ prevHash = null;
+ nextHash = 1 < len ? md5Img(imgs[1].alt, imgs[1].src) : null;
+ }
+ else if (len - 1 == targetIdx) {
+ prevHash = md5Img(imgs[targetIdx - 1].alt, imgs[targetIdx - 1].src);
+ nextHash = null;
+ }
+ else {
+ prevHash = md5Img(imgs[targetIdx - 1].alt, imgs[targetIdx - 1].src);
+ nextHash = md5Img(imgs[targetIdx + 1].alt, imgs[targetIdx + 1].src);
+ }
+ return [prevHash, targetImgHash, nextHash];
+ };
+ this.activateImage = (liEl, imgEL) => {
+ if (!liEl || 'LI' !== liEl.tagName)
+ return;
+ if (!imgEL) {
+ const imgELList = liEl.getElementsByTagName('img');
+ if (imgELList && 0 < imgELList.length) {
+ imgEL = imgELList[0];
+ }
+ }
+ if (imgEL) {
+ const activeImg = this.mainContainerView.getActiveImg();
+ this.mainContainerView.initDefaultData(activeImg, imgEL.style);
+ this.mainContainerView.refreshImg(activeImg, imgEL.src, imgEL.alt || '', imgEL.dataset.index);
+ }
+ liEl.addClass('gallery-active');
+ if (this.settings.galleryImgBorderActive) {
+ liEl.addClass('img-border-active');
+ liEl.style.setProperty('border-color', this.settings.galleryImgBorderActiveColor);
+ }
+ };
+ this.deactivateImage = (liEl) => {
+ if (!liEl)
+ return;
+ liEl.removeClass('gallery-active');
+ if (liEl.hasClass('img-border-active')) {
+ liEl.removeClass('img-border-active');
+ liEl.style.removeProperty('border-color');
+ }
+ };
+ this.clickGalleryImg = (event) => {
+ const targetEl = event.target;
+ if (!targetEl || 'IMG' !== targetEl.tagName)
+ return;
+ if (this.galleryListEl) {
+ const liElList = this.galleryListEl.getElementsByClassName('gallery-active');
+ for (let i = 0, len = liElList.length; i < len; i++) {
+ this.deactivateImage(liElList[i]);
+ }
+ }
+ this.activateImage(targetEl.parentElement, targetEl);
+ };
+ /**
+ * switch the image on the gallery navbar
+ * @param next true: switch to the next image; false: switch to the previous image
+ */
+ this.switchImage = (next) => {
+ if (!this.state || !this.galleryListEl)
+ return;
+ const liElList = this.galleryListEl.getElementsByTagName('li');
+ if (!liElList || 0 >= liElList.length)
+ return;
+ let liEl;
+ let toSwitchIdx = -1;
+ for (let i = 0, len = liElList.length; i < len; i++) {
+ if (!(liEl = liElList[i]))
+ continue;
+ if (liEl.hasClass('gallery-active')) {
+ toSwitchIdx = next ? (len <= (i + 1) ? 0 : i + 1) : (0 == i ? len - 1 : i - 1);
+ this.deactivateImage(liEl);
+ break;
+ }
+ }
+ if (0 >= toSwitchIdx) {
+ toSwitchIdx = 0;
+ }
+ this.activateImage(liElList[toSwitchIdx]);
+ };
+ this.mouseDownGallery = (event) => {
+ // console.log('mouse Down Gallery...');
+ event.preventDefault();
+ event.stopPropagation();
+ this.mouseDownTime = new Date().getTime();
+ this.galleryIsMousingDown = true;
+ this.galleryMouseDownClientX = event.clientX;
+ };
+ this.mouseMoveGallery = (event) => {
+ // console.log('mouse Move Gallery...');
+ event.preventDefault();
+ event.stopPropagation();
+ if (!this.galleryIsMousingDown)
+ return;
+ let moveDistance = event.clientX - this.galleryMouseDownClientX;
+ if (4 > Math.abs(moveDistance))
+ return;
+ this.galleryMouseDownClientX = event.clientX;
+ this.galleryTranslateX += moveDistance;
+ const windowWidth = this.mainContainerView.getDoc().documentElement.clientWidth || this.mainContainerView.getDoc().body.clientWidth;
+ const imgLiWidth = (this.galleryListEl.childElementCount - 1) * 52;
+ // console.log('move...', 'windowWidth=' + windowWidth, 'galleryTranslateX=' + galleryTranslateX, 'li count=' + imgInfo.galleryList.childElementCount);
+ if (this.galleryTranslateX + 50 >= windowWidth)
+ this.galleryTranslateX = windowWidth - 50;
+ if (0 > this.galleryTranslateX + imgLiWidth)
+ this.galleryTranslateX = -imgLiWidth;
+ this.galleryListEl.style.transform = 'translateX(' + this.galleryTranslateX + 'px)';
+ };
+ this.mouseUpGallery = (event) => {
+ // console.log('mouse Up Gallery>>>', event.target);
+ event.preventDefault();
+ event.stopPropagation();
+ this.galleryIsMousingDown = false;
+ if (!this.mouseDownTime || this.CLICK_TIME > new Date().getTime() - this.mouseDownTime) {
+ this.clickGalleryImg(event);
+ }
+ this.mouseDownTime = null;
+ };
+ this.mouseLeaveGallery = (event) => {
+ // console.log('mouse Leave Gallery>>>', event.target);
+ event.preventDefault();
+ event.stopPropagation();
+ this.galleryIsMousingDown = false;
+ this.mouseDownTime = null;
+ };
+ this.getGalleryImgCache = (file) => {
+ if (!file)
+ return null;
+ const md5File = this.md5File(file.path, file.stat.ctime);
+ if (!md5File)
+ return null;
+ const galleryImgCache = GalleryNavbarView.GALLERY_IMG_CACHE.get(md5File);
+ if (galleryImgCache && file.stat.mtime !== galleryImgCache.file.mtime) {
+ GalleryNavbarView.GALLERY_IMG_CACHE.delete(md5File);
+ return null;
+ }
+ return galleryImgCache;
+ };
+ this.setGalleryImgCache = (galleryImg) => {
+ const md5File = this.md5File(galleryImg.file.path, galleryImg.file.ctime);
+ if (!md5File)
+ return;
+ this.trimGalleryImgCache();
+ GalleryNavbarView.GALLERY_IMG_CACHE.set(md5File, galleryImg);
+ };
+ this.trimGalleryImgCache = () => {
+ if (GalleryNavbarView.GALLERY_IMG_CACHE.size < this.CACHE_LIMIT)
+ return;
+ let earliestMtime, earliestKey;
+ GalleryNavbarView.GALLERY_IMG_CACHE.forEach((value, key) => {
+ if (!earliestMtime) {
+ earliestMtime = value.mtime;
+ earliestKey = key;
+ }
+ else {
+ if (earliestMtime > value.mtime) {
+ earliestMtime = value.mtime;
+ earliestKey = key;
+ }
+ }
+ });
+ if (earliestKey) {
+ GalleryNavbarView.GALLERY_IMG_CACHE.delete(earliestKey);
+ }
+ };
+ this.md5File = (path, ctime) => {
+ if (!path || !ctime)
+ return;
+ return Md5.init(path + '_' + ctime);
+ };
+ this.mainContainerView = mainContainerView;
+ this.plugin = plugin;
+ this.settings = plugin.settings;
+ }
+}
+GalleryNavbarView.GALLERY_IMG_CACHE = new Map();
+
+class NormalContainerView extends ContainerView {
+ constructor(plugin) {
+ super(plugin);
+ //region ================== Container View ========================
+ this.initContainerDom = (parentContainerEl) => {
+ let imgCto;
+ if (!this.imgInfo.oitContainerEl) {
+ // init `oit-normal` dom at first time
+ //
-
- \u{1F500} Random Image Shuffle functionality. \n
- Folder Images: You can enable random image selection from a specified folder in settings. \n
- Frontmatter Support: Use
banner-shufflein frontmatter to specify a folder path for random image selection. \n - Images are randomly selected each time the note is opened. \n
- This feature is perfect for adding variety to your notes with minimal setup using local images. \n
- New
view imagebutton icon option to open the banner image in a full-screen modal \xA0
(works with plugins likeimage toolkit, etc.) \n - dynamic
cssinreadingmode disrupting document flow of floated elements (e.g. ITS callouts) \n - debounced
updateRichFootineditingmode (new settings option that allows delay in milliseconds) \n Linksdefined in frontmatter were not being displayed \n- Option to combine
Outlinks/Backlinksin one view calledLinks\n - Directional arrows for
Links\n - Outlinks for
footnoteinternal links \n Page Previewnot displaying properly inediting mode\n- Exclusion rule via
frontmatterfield \n - Custom exclusions using specified DOM parent selectors for advanced control \n
...
+ (this.imgInfo.oitContainerEl = createDiv()).addClass(OIT_CLASS.CONTAINER_ROOT, OIT_CLASS.CONTAINER_NORMAL);
+ parentContainerEl.appendChild(this.imgInfo.oitContainerEl);
+ // 1.
...
+ this.imgInfo.oitContainerEl.append(this.imgInfo.imgContainerEl = createDiv(OIT_CLASS.IMG_CONTAINER));
+ // 1.1. `![]()
`
+ this.updateImgViewElAndList(this.imgInfo);
+ // 2.
+ this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgTipEl = createDiv(OIT_CLASS.IMG_TTP));
+ this.imgInfo.imgTipEl.hidden = true;
+ // 3. ...
+ this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgFooterEl = createDiv(OIT_CLASS.IMG_FOOTER));
+ // 3.1.
+ this.imgInfo.imgFooterEl.appendChild(this.imgInfo.imgTitleEl = createDiv(OIT_CLASS.IMG_TITLE));
+ //
+ this.imgInfo.imgTitleEl.appendChild(this.imgInfo.imgTitleNameEl = createSpan(OIT_CLASS.IMG_TITLE_NAME));
+ //
+ this.imgInfo.imgTitleEl.appendChild(this.imgInfo.imgTitleIndexEl = createSpan(OIT_CLASS.IMG_TITLE_INDEX));
+ // 3.2.
-
+ const imgToolbarUlEL = createEl('ul');
+ imgToolbarUlEL.addClass(OIT_CLASS.IMG_TOOLBAR);
+ this.imgInfo.imgFooterEl.appendChild(imgToolbarUlEL);
+ let toolbarLi;
+ for (const toolbar of TOOLBAR_CONF) {
+ if (!toolbar.enableToolbarIcon)
+ continue;
+ imgToolbarUlEL.appendChild(toolbarLi = createEl('li'));
+ toolbarLi.addClass(toolbar.class);
+ toolbarLi.setAttribute('alt', toolbar.title);
+ // @ts-ignore
+ toolbarLi.setAttribute('title', t(toolbar.title));
+ }
+ // add event: for oit-img-toolbar ul
+ imgToolbarUlEL.addEventListener('click', this.clickImgToolbar);
+ //
+
+ */
+ if (!this.imgInfo.oitContainerEl) { // init at first time
+ // create:
+ ![]()
+ ![]()
+ ...
+
+
+ (this.imgInfo.oitContainerEl = createDiv()).addClass(OIT_CLASS.CONTAINER_ROOT, OIT_CLASS.CONTAINER_PIN);
+ parentContainerEl.appendChild(this.imgInfo.oitContainerEl);
+ //
+ this.imgInfo.oitContainerEl.append(this.imgInfo.imgContainerEl = createDiv(OIT_CLASS.IMG_CONTAINER));
+ //
+ this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgTipEl = createDiv(OIT_CLASS.IMG_TTP)); // oit-img-tip
+ this.imgInfo.imgTipEl.hidden = true; // hide 'oit-img-tip'
+ // ![]()
+ this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgPlayerEl = createDiv(OIT_CLASS.IMG_PLAYER)); // img-player for full screen mode
+ this.imgInfo.imgPlayerEl.appendChild(this.imgInfo.imgPlayerImgViewEl = createEl('img'));
+ this.imgInfo.imgPlayerImgViewEl.addClass(OIT_CLASS.IMG_FULLSCREEN);
+ }
+ // ![]()
+ this.updateImgViewElAndList(this.imgInfo);
+ return this.getMatchedImg();
+ };
+ this.openOitContainerView = (matchedImg) => {
+ if (!this.imgInfo.oitContainerEl) {
+ console.error('obsidian-image-toolkit: oit-*-container-view has not been initialized!');
+ return;
+ }
+ matchedImg.popup = true;
+ if (!this.imgGlobalStatus.popup) {
+ this.imgGlobalStatus.popup = true;
+ this.imgGlobalStatus.activeImgZIndex = 0;
+ this.imgInfo.imgList.forEach(value => {
+ value.zIndex = 0;
+ });
+ }
+ else {
+ matchedImg.zIndex = (++this.imgGlobalStatus.activeImgZIndex);
+ }
+ matchedImg.imgViewEl.style.setProperty('z-index', matchedImg.zIndex + '');
+ // display 'oit-pin-container-view'
+ this.imgInfo.oitContainerEl.style.setProperty('display', 'block');
+ };
+ /**
+ * hide container view
+ * @param event not null: click event; null: keyboard event (Esc)
+ * @param activeImg
+ */
+ this.closeContainerView = (event, activeImg) => {
+ if (event && !activeImg) {
+ // PinContainerView doesn't need click event to hide container for now
+ return;
+ }
+ if (!this.imgInfo.oitContainerEl)
+ return;
+ if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg))
+ return;
+ // console.log('closeContainerView', event, activeImg)
+ this.renderImgView(activeImg.imgViewEl, '', '');
+ activeImg.popup = false;
+ activeImg.mtime = 0;
+ let globalPopupFlag = false;
+ for (const imgCto of this.imgInfo.imgList) {
+ if (imgCto.popup) {
+ globalPopupFlag = true;
+ break;
+ }
+ }
+ if (!globalPopupFlag) {
+ this.imgInfo.oitContainerEl.style.setProperty('display', 'none'); // hide 'oit-pin-container-view'
+ this.imgGlobalStatus.activeImgZIndex = 0;
+ this.imgInfo.imgList.forEach(value => {
+ value.zIndex = 0;
+ });
+ }
+ this.imgGlobalStatus.popup = globalPopupFlag;
+ this.addOrRemoveEvents(activeImg, false);
+ };
+ //endregion
+ this.setActiveImgZIndex = (activeImg) => {
+ var _a;
+ let isUpdate = false;
+ for (const imgCto of this.imgInfo.imgList) {
+ if (activeImg.index !== imgCto.index && activeImg.zIndex <= imgCto.zIndex) {
+ isUpdate = true;
+ break;
+ }
+ }
+ if (isUpdate) {
+ activeImg.zIndex = (++this.imgGlobalStatus.activeImgZIndex);
+ (_a = activeImg.imgViewEl) === null || _a === void 0 ? void 0 : _a.style.setProperty("z-index", activeImg.zIndex + '');
+ }
+ };
+ this.setMenuView(new MenuView(this));
+ }
+ setActiveImgForMouseEvent(imgCto) {
+ this.imgGlobalStatus.activeImg = imgCto;
+ }
+}
+
+class ContainerFactory {
+ constructor() {
+ // popout window containers: hash -> ContainerView
+ this.popoutContainers = new Map();
+ this.setMainContainer = (container) => {
+ this.mainContainer = container;
+ };
+ this.getMainContainer = () => {
+ return this.mainContainer;
+ };
+ this.setPopoutContainer = (key, container) => {
+ this.popoutContainers.set(key, container);
+ };
+ this.getPopoutContainer = (key) => {
+ return this.popoutContainers.get(key);
+ };
+ this.getPopoutContainers = () => {
+ return this.popoutContainers;
+ };
+ this.getContainer = (targetEl) => {
+ const bodyEl = targetEl === null || targetEl === void 0 ? void 0 : targetEl.matchParent('body');
+ if (!bodyEl)
+ return null;
+ const oitEventKey = bodyEl.getAttribute('data-oit-event');
+ if (oitEventKey) {
+ //popout window
+ return this.getPopoutContainer(oitEventKey);
+ }
+ return this.mainContainer;
+ };
+ this.getAllContainers = () => {
+ let allContainerViews = [this.mainContainer];
+ for (let value of this.popoutContainers.values()) {
+ allContainerViews.push(value);
+ }
+ return allContainerViews;
+ };
+ this.clearAll = () => {
+ this.mainContainer = null;
+ this.popoutContainers.clear();
+ };
+ }
+}
+
+class ImageToolkitPlugin extends obsidian.Plugin {
+ constructor() {
+ super(...arguments);
+ this.containerFactory = new ContainerFactory();
+ this.imgSelector = ``;
+ this.addIcons = () => __awaiter(this, void 0, void 0, function* () {
+ for (const icon of ICONS) {
+ obsidian.addIcon(icon.id, icon.svg);
+ }
+ });
+ this.getViewMode = () => {
+ return this.settings.viewMode;
+ };
+ this.setViewMode = (viewMode) => {
+ return this.settings.viewMode = viewMode;
+ };
+ this.checkViewMode = (viewMode) => __awaiter(this, void 0, void 0, function* () {
+ for (const key in ViewMode) {
+ if (key == viewMode) {
+ return;
+ }
+ }
+ this.setViewMode(DEFAULT_VIEW_MODE);
+ console.log('[oit] Reset view mode: %s', DEFAULT_VIEW_MODE);
+ yield this.saveSettings();
+ });
+ this.getAllContainerViews = () => {
+ return this.containerFactory.getAllContainers();
+ };
+ this.initContainer = (viewMode, popoutWindowEventId) => __awaiter(this, void 0, void 0, function* () {
+ const container = yield this.initContainerByViewMode(viewMode);
+ if (!container) {
+ console.error('[oit] Cannot init container');
+ return;
+ }
+ if (popoutWindowEventId) {
+ // popoutWindowEventId will be recorded into data-oit-event'of body tag
+ this.containerFactory.setPopoutContainer(popoutWindowEventId, container);
+ }
+ else {
+ this.containerFactory.setMainContainer(container);
+ }
+ });
+ this.initContainerByViewMode = (viewMode, fromDefault) => __awaiter(this, void 0, void 0, function* () {
+ switch (viewMode) {
+ case ViewMode.Normal:
+ return new NormalContainerView(this);
+ case ViewMode.Pin:
+ return new PinContainerView(this);
+ default:
+ if (fromDefault) {
+ return null;
+ }
+ this.setViewMode(viewMode = DEFAULT_VIEW_MODE);
+ yield this.saveSettings();
+ console.log('[oit] Reset view mode to: %s', viewMode);
+ return this.initContainerByViewMode(viewMode, true);
+ }
+ });
+ this.isImageElement = (imgEl) => {
+ return imgEl && 'IMG' === imgEl.tagName;
+ };
+ this.isClickable = (targetEl, event) => {
+ let container;
+ if (this.isImageElement(targetEl)
+ && (container = this.containerFactory.getContainer(targetEl))
+ && container.checkHotkeySettings(event, this.settings.viewTriggerHotkey)) {
+ return container;
+ }
+ return null;
+ };
+ this.switchViewMode = (viewMode) => __awaiter(this, void 0, void 0, function* () {
+ this.settings.viewMode = viewMode;
+ yield this.saveSettings();
+ this.getAllContainerViews().forEach(container => {
+ var _a;
+ container.removeOitContainerView();
+ this.initContainer(viewMode, (_a = container.getParentContainerEl()) === null || _a === void 0 ? void 0 : _a.getAttribute('data-oit-event'));
+ });
+ });
+ /**
+ * refresh events for main container
+ */
+ this.refreshViewTrigger = (doc) => {
+ // .workspace-leaf-content[data-type='markdown'] img,.workspace-leaf-content[data-type='image'] img
+ const viewImageInEditor = this.settings.viewImageInEditor;
+ // .community-modal-details img
+ const viewImageInCPB = this.settings.viewImageInCPB;
+ // false: ... img:not(a img)
+ const viewImageWithLink = this.settings.viewImageWithLink;
+ // #sr-flashcard-view img
+ const viewImageOther = this.settings.viewImageOther;
+ if (!doc) {
+ doc = document;
+ }
+ if (this.imgSelector) {
+ doc.off('click', this.imgSelector, this.clickImage);
+ doc.off('mouseover', this.imgSelector, this.mouseoverImg);
+ doc.off('mouseout', this.imgSelector, this.mouseoutImg);
+ }
+ if (!viewImageOther && !viewImageInEditor && !viewImageInCPB && !viewImageWithLink) {
+ return;
+ }
+ let selector = ``;
+ if (viewImageInEditor) {
+ selector += (viewImageWithLink ? VIEW_IMG_SELECTOR.EDITOR_AREAS : VIEW_IMG_SELECTOR.EDITOR_AREAS_NO_LINK);
+ }
+ if (viewImageInCPB) {
+ selector += (1 < selector.length ? `,` : ``) + (viewImageWithLink ? VIEW_IMG_SELECTOR.CPB : VIEW_IMG_SELECTOR.CPB_NO_LINK);
+ }
+ if (viewImageOther) {
+ selector += (1 < selector.length ? `,` : ``) + (viewImageWithLink ? VIEW_IMG_SELECTOR.OTHER : VIEW_IMG_SELECTOR.OTHER_NO_LINK);
+ }
+ if (selector) {
+ this.imgSelector = selector;
+ // doc.onclick = (event: MouseEvent) =>{
+ // console.log(event.target);
+ // }
+ doc.on('click', this.imgSelector, this.clickImage);
+ doc.on('mouseover', this.imgSelector, this.mouseoverImg);
+ doc.on('mouseout', this.imgSelector, this.mouseoutImg);
+ }
+ };
+ this.clickImage = (event) => {
+ const targetEl = event.target;
+ let container = this.isClickable(targetEl, event);
+ if (container) {
+ container.renderContainer(targetEl);
+ }
+ };
+ this.mouseoverImg = (event) => {
+ const targetEl = event.target;
+ if (!this.isClickable(targetEl, event)) {
+ return;
+ }
+ if (null == targetEl.getAttribute(ImageToolkitPlugin.IMG_ORIGIN_CURSOR)) {
+ targetEl.setAttribute(ImageToolkitPlugin.IMG_ORIGIN_CURSOR, targetEl.style.cursor || '');
+ }
+ targetEl.style.cursor = 'zoom-in';
+ };
+ this.mouseoutImg = (event) => {
+ const targetEl = event.target;
+ if (!this.isClickable(targetEl, event)) {
+ return;
+ }
+ targetEl.style.cursor = targetEl.getAttribute(ImageToolkitPlugin.IMG_ORIGIN_CURSOR);
+ };
+ }
+ onload() {
+ return __awaiter(this, void 0, void 0, function* () {
+ console.log('loading %s plugin v%s ...', this.manifest.id, this.manifest.version);
+ yield this.loadSettings();
+ this.addSettingTab(new ImageToolkitSettingTab(this.app, this));
+ // this.registerCommands();
+ yield this.initContainer(this.settings.viewMode);
+ this.refreshViewTrigger();
+ // addEventListener for opened new windows
+ this.app.workspace.on('layout-change', () => {
+ this.app.workspace.iterateAllLeaves((leaf) => {
+ var _a;
+ if (['markdown', 'image'].includes((_a = leaf.getViewState()) === null || _a === void 0 ? void 0 : _a.type)) {
+ const bodyEl = leaf.view.containerEl.matchParent('body');
+ if (bodyEl === null || bodyEl === void 0 ? void 0 : bodyEl.hasClass('is-popout-window')) {
+ if (!bodyEl.hasAttribute(ImageToolkitPlugin.POPOUT_WINDOW_EVENT)) {
+ console.log('popout leaf:', leaf, leaf.getDisplayText());
+ const eventId = crypto.randomUUID();
+ this.initContainer(this.settings.viewMode, eventId);
+ bodyEl.setAttr(ImageToolkitPlugin.POPOUT_WINDOW_EVENT, eventId);
+ this.refreshViewTrigger(bodyEl.ownerDocument);
+ }
+ }
+ }
+ });
+ });
+ });
+ }
+ onunload() {
+ console.log('unloading ' + this.manifest.id + ' plugin...');
+ this.getAllContainerViews().forEach(container => {
+ container.removeOitContainerView();
+ });
+ this.containerFactory.clearAll();
+ document.off('click', this.imgSelector, this.clickImage);
+ document.off('mouseover', this.imgSelector, this.mouseoverImg);
+ document.off('mouseout', this.imgSelector, this.mouseoutImg);
+ }
+ loadSettings() {
+ return __awaiter(this, void 0, void 0, function* () {
+ this.settings = Object.assign({}, DEFAULT_SETTINGS, yield this.loadData());
+ yield this.checkViewMode(this.getViewMode());
+ yield this.addIcons();
+ });
+ }
+ saveSettings() {
+ return __awaiter(this, void 0, void 0, function* () {
+ yield this.saveData(this.settings);
+ });
+ }
+ registerCommands() {
+ return __awaiter(this, void 0, void 0, function* () {
+ /* this.addCommand({
+ "id": "oit-move-up-image",
+ "name": "move up the image",
+ hotkeys: [{ modifiers: ["Ctrl"], key: "ArrowUp" }],
+ checkCallback: (checking: boolean) => {
+ if (checking) return false;
+ this.containerView.moveImgViewByHotkey('UP');
+ },
+ }); */
+ });
+ }
+}
+ImageToolkitPlugin.IMG_ORIGIN_CURSOR = 'data-oit-origin-cursor';
+// data-oit-event: 标识new window是否已addEventListener for click
+ImageToolkitPlugin.POPOUT_WINDOW_EVENT = 'data-oit-event';
+
+module.exports = ImageToolkitPlugin;
+
+
+/* nosourcemap */
\ No newline at end of file
diff --git a/example-vault/pixel-banner-example/.obsidian/plugins/obsidian-image-toolkit/manifest.json b/example-vault/pixel-banner-example/.obsidian/plugins/obsidian-image-toolkit/manifest.json
new file mode 100644
index 0000000..d6d7057
--- /dev/null
+++ b/example-vault/pixel-banner-example/.obsidian/plugins/obsidian-image-toolkit/manifest.json
@@ -0,0 +1,10 @@
+{
+ "id": "obsidian-image-toolkit",
+ "name": "Image Toolkit",
+ "version": "1.4.2",
+ "minAppVersion": "1.0.0",
+ "description": "This plugin provides some image viewing toolkit.",
+ "author": "Xiangru",
+ "authorUrl": "https://github.com/sissilab",
+ "isDesktopOnly": true
+}
diff --git a/example-vault/pixel-banner-example/.obsidian/plugins/obsidian-image-toolkit/styles.css b/example-vault/pixel-banner-example/.obsidian/plugins/obsidian-image-toolkit/styles.css
new file mode 100644
index 0000000..1545f5e
--- /dev/null
+++ b/example-vault/pixel-banner-example/.obsidian/plugins/obsidian-image-toolkit/styles.css
@@ -0,0 +1,747 @@
+body {
+ --layer-image-toolkit-popup: 1024;
+ --layer-image-toolkit-player: 1025;
+ --layer-image-toolkit-notice: 1026;
+ --layer-menu: 1027;
+}
+
+.menu {
+ z-index: var(--layer-menu);
+}
+
+.notice-container {
+ z-index: var(--layer-image-toolkit-notice);
+}
+
+.oit li::before {
+ margin-left: 0;
+}
+
+.image-toolkit-img-invert {
+ filter: invert(1) hue-rotate(180deg);
+ mix-blend-mode: screen;
+}
+
+.oit-normal {
+ position: fixed;
+ font-size: 0;
+ line-height: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, .6);
+ z-index: var(--layer-image-toolkit-popup);
+ display: none;
+}
+
+.oit-pin {
+ position: fixed;
+ font-size: 0;
+ line-height: 0;
+ z-index: var(--layer-image-toolkit-popup);
+ display: none;
+}
+
+.oit .oit-img-container {
+ position: fixed;
+ top: 0;
+ pointer-events: none;
+}
+
+.oit .oit-img-container .oit-img-view {
+ max-height: none;
+ pointer-events: auto;
+}
+
+.oit-pin .oit-img-container .oit-img-view {
+ position: fixed;
+ pointer-events: auto;
+ box-shadow: 0 0 5px;
+}
+
+.oit-pin .oit-img-container .oit-img-view:hover {
+ box-shadow: 0 0 6px #55acc6;
+}
+
+.oit .img-default-background {
+ background-position: 0 0, 5px 5px !important;
+ background-size: 10px 10px !important;
+ background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee 100%) !important;
+}
+
+.oit .oit-img-container .oit-img-view:hover {
+ cursor: pointer;
+}
+
+.oit-normal .img-close {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+}
+
+.oit .oit-img-tip {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ font-size: 12px;
+ line-height: 20px;
+ height: 20px;
+ width: 50px;
+ text-align: center;
+ color: #fff;
+ border-radius: 10px;
+ background-color: rgba(0, 0, 0, .4);
+ pointer-events: none;
+ z-index: 1;
+}
+
+/*region img-player*/
+.oit .img-player {
+ display: none;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ cursor: none;
+ background-color: #000;
+ text-align: center;
+ cursor: pointer;
+}
+
+.oit .img-player > img {
+ display: inline;
+ float: none;
+ padding: 0;
+ max-height: none;
+ transform: none;
+ cursor: pointer;
+}
+/*endregion*/
+
+.oit-normal .oit-img-footer {
+ position: absolute;
+ text-align: center;
+ bottom: 5px;
+ left: 0;
+ right: 0;
+}
+
+/*region oit-img-title*/
+.oit-normal .oit-img-footer .oit-img-title {
+ font-size: 12px;
+ line-height: 1;
+ display: inline-block;
+ max-width: 90%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 5px;
+ opacity: .8;
+ color: #fff;
+ /* filter: alpha(opacity=80) */
+}
+
+.oit-normal .oit-img-footer .oit-img-title:hover {
+ /* opacity: 1; */
+ color: #fff;
+ font-size: 15px;
+ background-color: rgba(0, 0, 0, .3);
+ border-radius: 8px;
+ line-height: 1.5;
+ /* filter: alpha(opacity=100) */
+}
+/*endregion*/
+
+/*region toolbar*/
+.oit-normal .oit-img-footer .oit-img-toolbar {
+ width: 385px;
+ height: 30px;
+ margin: 0 auto 5px;
+ padding: 3px 0;
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar:hover {
+ background-color: rgba(0, 0, 0, .3);
+ border-radius: 12px;
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar > li {
+ float: left;
+ width: 25px;
+ height: 25px;
+ margin: 0 5px;
+ padding: 0;
+ line-height: 0;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar > li:hover {
+ animation: bounce .5s cubic-bezier(0.51, 0.23, 0.02, 0.96)
+}
+
+@keyframes bounce {
+ 0% {
+ transform: scale(1, 1);
+ }
+
+ 50% {
+ transform: scale(0.85, 1.1) translateY(-5px);
+ }
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_zoom_to_100::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_zoom_in::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_zoom_out::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_full_screen::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_refresh::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_rotate_left::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_rotate_right::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_scale_x::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_scale_y::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_invert_color::before,
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_copy::before {
+ font-size: 0;
+ line-height: 0;
+ display: block;
+ width: 25px;
+ height: 25px;
+ color: transparent;
+ background-image: url(data:image/png;base64,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);
+ background-repeat: no-repeat
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_zoom_to_100::before {
+ content: 'Zoom to Actual Size';
+ background-position: 0 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_zoom_in::before {
+ content: 'Zoom In';
+ background-position: -25px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_zoom_out::before {
+ content: 'Zoom Out';
+ background-position: -50px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_full_screen::before {
+ content: 'Full Screen';
+ background-position: -75px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_refresh::before {
+ content: 'Refresh';
+ background-position: -100px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_rotate_left::before {
+ content: 'Rotate Left';
+ background-position: -125px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_rotate_right::before {
+ content: 'Rotate Right';
+ background-position: -150px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_scale_x::before {
+ content: 'Scale x';
+ background-position: -175px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_scale_y::before {
+ content: 'Scale y';
+ background-position: -200px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_invert_color::before {
+ content: 'Invert color';
+ background-position: -225px 0
+}
+
+.oit-normal .oit-img-footer .oit-img-toolbar .toolbar_copy::before {
+ content: 'Copy';
+ background-position: -250px 0
+}
+/*endregion*/
+
+/*region gallery-navbar*/
+.oit-normal .oit-img-footer .gallery-navbar {
+ position: relative;
+ flex: 0 0 auto;
+ overflow: hidden;
+ max-width: 100%;
+ max-height: 100%;
+ width: 100%;
+ height: 60px;
+ margin-top: 20px;
+ background-color: rgba(0, 0, 0, .1);
+}
+
+.oit-normal .oit-img-footer .gallery-navbar:hover {
+ background-color: rgba(0, 0, 0, .8);
+}
+
+.oit-normal .oit-img-footer .gallery-navbar .gallery-list {
+ display: flex;
+ transform: translateX(0px);
+ cursor: pointer;
+}
+
+.oit-normal .oit-img-footer .gallery-navbar .gallery-list .gallery-active {
+ opacity: 1;
+}
+
+.oit-normal .oit-img-footer .gallery-navbar .gallery-list .img-border-active {
+ margin-top: 1px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: red;
+}
+
+.oit-normal .oit-img-footer .gallery-navbar .gallery-list > li {
+ width: 48px;
+ height: 58px;
+ opacity: .3;
+ color: transparent;
+ margin: 2px 1px;
+ padding: 0;
+ border-radius: 0;
+ /* transition: all 100ms linear; */
+}
+
+.oit-normal .oit-img-footer .gallery-navbar .gallery-list img {
+ width: 46px;
+ height: 56px;
+}
+/*endregion*/
+
+.hotkeys-settings-plus {
+ margin: 0 10px;
+ font-size: x-large;
+}
+
+/*region pickr*/
+.pcr-app .pcr-swatches > button {
+ padding: 0;
+}
+
+/*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */
+.pickr {
+ position: relative;
+ overflow: visible;
+ transform: translateY(0)
+}
+
+.pickr * {
+ box-sizing: border-box;
+ outline: none;
+ border: none;
+ -webkit-appearance: none
+}
+
+.pickr .pcr-button {
+ position: relative;
+ height: 2em;
+ width: 2em;
+ padding: 0.5em;
+ cursor: pointer;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+ border-radius: .15em;
+ background: url('data:image/svg+xml;utf8, ') no-repeat center;
+ background-size: 0;
+ transition: all 0.3s
+}
+
+.pickr .pcr-button::before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url('data:image/svg+xml;utf8, ');
+ background-size: .5em;
+ border-radius: .15em;
+ z-index: -1
+}
+
+.pickr .pcr-button::before {
+ z-index: initial
+}
+
+.pickr .pcr-button::after {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ transition: background 0.3s;
+ background: var(--pcr-color);
+ border-radius: .15em
+}
+
+.pickr .pcr-button.clear {
+ background-size: 70%
+}
+
+.pickr .pcr-button.clear::before {
+ opacity: 0
+}
+
+.pickr .pcr-button.clear:focus {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px var(--pcr-color)
+}
+
+.pickr .pcr-button.disabled {
+ cursor: not-allowed
+}
+
+.pickr *, .pcr-app * {
+ box-sizing: border-box;
+ outline: none;
+ border: none;
+ -webkit-appearance: none
+}
+
+.pickr input:focus, .pickr input.pcr-active, .pickr button:focus, .pickr button.pcr-active, .pcr-app input:focus, .pcr-app input.pcr-active, .pcr-app button:focus, .pcr-app button.pcr-active {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px var(--pcr-color)
+}
+
+.pickr .pcr-palette, .pickr .pcr-slider, .pcr-app .pcr-palette, .pcr-app .pcr-slider {
+ transition: box-shadow 0.3s
+}
+
+.pickr .pcr-palette:focus, .pickr .pcr-slider:focus, .pcr-app .pcr-palette:focus, .pcr-app .pcr-slider:focus {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25)
+}
+
+.pcr-app {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ z-index: 10000;
+ border-radius: 0.1em;
+ background: #fff;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s, visibility 0s 0.3s;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+ box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
+ left: 0;
+ top: 0
+}
+
+.pcr-app.visible {
+ transition: opacity 0.3s;
+ visibility: visible;
+ opacity: 1
+}
+
+.pcr-app .pcr-swatches {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 0.75em
+}
+
+.pcr-app .pcr-swatches.pcr-last {
+ margin: 0
+}
+
+@supports (display: grid) {
+ .pcr-app .pcr-swatches {
+ display: grid;
+ align-items: center;
+ grid-template-columns: repeat(auto-fit, 1.75em)
+ }
+}
+
+.pcr-app .pcr-swatches > button {
+ font-size: 1em;
+ position: relative;
+ width: calc(1.75em - 10px);
+ height: calc(1.75em - 10px);
+ border-radius: 0.15em;
+ cursor: pointer;
+ margin: 2.5px;
+ flex-shrink: 0;
+ justify-self: center;
+ transition: all 0.15s;
+ overflow: hidden;
+ background: transparent;
+ z-index: 1
+}
+
+.pcr-app .pcr-swatches > button::before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url('data:image/svg+xml;utf8, ');
+ background-size: 6px;
+ border-radius: .15em;
+ z-index: -1
+}
+
+.pcr-app .pcr-swatches > button::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--pcr-color);
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-radius: 0.15em;
+ box-sizing: border-box
+}
+
+.pcr-app .pcr-swatches > button:hover {
+ filter: brightness(1.05)
+}
+
+.pcr-app .pcr-swatches > button:not(.pcr-active) {
+ box-shadow: none
+}
+
+.pcr-app .pcr-interaction {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 0 -0.2em 0 -0.2em
+}
+
+.pcr-app .pcr-interaction > * {
+ margin: 0 0.2em
+}
+
+.pcr-app .pcr-interaction input {
+ letter-spacing: 0.07em;
+ font-size: 0.75em;
+ text-align: center;
+ cursor: pointer;
+ color: #75797e;
+ background: #f1f3f4;
+ border-radius: .15em;
+ transition: all 0.15s;
+ padding: 0.45em 0.5em;
+ margin-top: 0.75em
+}
+
+.pcr-app .pcr-interaction input:hover {
+ filter: brightness(0.975)
+}
+
+.pcr-app .pcr-interaction input:focus {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75)
+}
+
+.pcr-app .pcr-interaction .pcr-result {
+ color: #75797e;
+ text-align: left;
+ flex: 1 1 8em;
+ min-width: 8em;
+ transition: all 0.2s;
+ border-radius: .15em;
+ background: #f1f3f4;
+ cursor: text
+}
+
+.pcr-app .pcr-interaction .pcr-result::-moz-selection {
+ background: #4285f4;
+ color: #fff
+}
+
+.pcr-app .pcr-interaction .pcr-result::selection {
+ background: #4285f4;
+ color: #fff
+}
+
+.pcr-app .pcr-interaction .pcr-type.active {
+ color: #fff;
+ background: #4285f4
+}
+
+.pcr-app .pcr-interaction .pcr-save, .pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
+ color: #fff;
+ width: auto
+}
+
+.pcr-app .pcr-interaction .pcr-save, .pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
+ color: #fff
+}
+
+.pcr-app .pcr-interaction .pcr-save:hover, .pcr-app .pcr-interaction .pcr-cancel:hover, .pcr-app .pcr-interaction .pcr-clear:hover {
+ filter: brightness(0.925)
+}
+
+.pcr-app .pcr-interaction .pcr-save {
+ background: #4285f4
+}
+
+.pcr-app .pcr-interaction .pcr-clear, .pcr-app .pcr-interaction .pcr-cancel {
+ background: #f44250
+}
+
+.pcr-app .pcr-interaction .pcr-clear:focus, .pcr-app .pcr-interaction .pcr-cancel:focus {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75)
+}
+
+.pcr-app .pcr-selection .pcr-picker {
+ position: absolute;
+ height: 18px;
+ width: 18px;
+ border: 2px solid #fff;
+ border-radius: 100%;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.pcr-app .pcr-selection .pcr-color-palette, .pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity {
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ display: flex;
+ flex-direction: column;
+ cursor: grab;
+ cursor: -webkit-grab
+}
+
+.pcr-app .pcr-selection .pcr-color-palette:active, .pcr-app .pcr-selection .pcr-color-chooser:active, .pcr-app .pcr-selection .pcr-color-opacity:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing
+}
+
+.pcr-app[data-theme='nano'] {
+ width: 14.25em;
+ max-width: 95vw
+}
+
+.pcr-app[data-theme='nano'] .pcr-swatches {
+ margin-top: .6em;
+ padding: 0 .6em
+}
+
+.pcr-app[data-theme='nano'] .pcr-interaction {
+ padding: 0 .6em .6em .6em
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection {
+ display: grid;
+ grid-gap: .6em;
+ grid-template-columns: 1fr 4fr;
+ grid-template-rows: 5fr auto auto;
+ align-items: center;
+ height: 10.5em;
+ width: 100%;
+ align-self: flex-start
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview {
+ grid-area: 2 / 1 / 4 / 1;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin-left: .6em
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-last-color {
+ display: none
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color {
+ position: relative;
+ background: var(--pcr-color);
+ width: 2em;
+ height: 2em;
+ border-radius: 50em;
+ overflow: hidden
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color::before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url('data:image/svg+xml;utf8, ');
+ background-size: .5em;
+ border-radius: .15em;
+ z-index: -1
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette {
+ grid-area: 1 / 1 / 2 / 3;
+ width: 100%;
+ height: 100%;
+ z-index: 1
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette {
+ border-radius: .15em;
+ width: 100%;
+ height: 100%
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url('data:image/svg+xml;utf8, ');
+ background-size: .5em;
+ border-radius: .15em;
+ z-index: -1
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser {
+ grid-area: 2 / 2 / 2 / 2
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity {
+ grid-area: 3 / 2 / 3 / 2
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity {
+ height: 0.5em;
+ margin: 0 .6em
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-picker {
+ top: 50%;
+ transform: translateY(-50%)
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider {
+ flex-grow: 1;
+ border-radius: 50em
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider {
+ background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red)
+}
+
+.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider {
+ background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, ');
+ background-size: 100%, 0.25em
+}
+/*endregion*/
diff --git a/example-vault/pixel-banner-example/.obsidian/plugins/open-plugin-settings/data.json b/example-vault/pixel-banner-example/.obsidian/plugins/open-plugin-settings/data.json
index 81908ac..8ad14c4 100644
--- a/example-vault/pixel-banner-example/.obsidian/plugins/open-plugin-settings/data.json
+++ b/example-vault/pixel-banner-example/.obsidian/plugins/open-plugin-settings/data.json
@@ -5,15 +5,15 @@
"name": "Open Plugin Settings",
"commandName": "Open Plugin Settings"
},
- {
- "id": "pexels-banner",
- "name": "Pixel Banner",
- "commandName": "Pixel Banner"
- },
{
"id": "rich-foot",
"name": "Rich Foot",
"commandName": "Rich Foot"
+ },
+ {
+ "id": "pexels-banner",
+ "name": "Pixel Banner",
+ "commandName": "Pixel Banner"
}
]
}
\ No newline at end of file
diff --git a/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/data.json b/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/data.json
index 247286e..730e11f 100644
--- a/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/data.json
+++ b/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/data.json
@@ -88,10 +88,11 @@
"showPinIcon": true,
"pinnedImageFolder": "pixel-banner-images",
"showReleaseNotes": true,
- "lastVersion": "2.11.0",
+ "lastVersion": "2.12.0",
"showRefreshIcon": true,
+ "showViewImageIcon": true,
"hidePixelBannerFields": true,
"hidePropertiesSectionIfOnlyBanner": true,
- "titleColor": "#ff0000",
+ "titleColor": "var(--inline-title-color)",
"enableImageShuffle": false
}
\ No newline at end of file
diff --git a/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/main.js b/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/main.js
index 4240793..721fa6c 100644
--- a/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/main.js
+++ b/example-vault/pixel-banner-example/.obsidian/plugins/pexels-banner/main.js
@@ -45,6 +45,7 @@ var DEFAULT_SETTINGS = {
showReleaseNotes: true,
lastVersion: null,
showRefreshIcon: true,
+ showViewImageIcon: false,
hidePixelBannerFields: false,
hidePropertiesSectionIfOnlyBanner: false,
titleColor: "var(--inline-title-color)",
@@ -797,7 +798,6 @@ var PixelBannerSettingTab = class extends import_obsidian.PluginSettingTab {
})).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
this.plugin.settings.titleColor = DEFAULT_SETTINGS.titleColor;
await this.plugin.saveSettings();
- this.plugin.updateAllBanners();
const colorPickerEl = button.extraSettingsEl.parentElement.querySelector('input[type="color"]');
if (colorPickerEl) {
const temp = document.createElement("div");
@@ -813,39 +813,52 @@ var PixelBannerSettingTab = class extends import_obsidian.PluginSettingTab {
}
}
}));
- new import_obsidian.Setting(containerEl).setName("Hide Pixel Banner Fields").setDesc("Hide banner-related frontmatter fields in Reading mode").addToggle((toggle) => {
- toggle.setValue(this.plugin.settings.hidePixelBannerFields).onChange(async (value) => {
- this.plugin.settings.hidePixelBannerFields = value;
- if (!value) {
- this.plugin.settings.hidePropertiesSectionIfOnlyBanner = false;
- const dependentToggle = hidePropertiesSection.components[0];
- if (dependentToggle) {
- dependentToggle.setValue(false);
- dependentToggle.setDisabled(true);
- }
- this.app.workspace.iterateAllLeaves((leaf) => {
- if (leaf.view instanceof import_obsidian.MarkdownView && leaf.view.contentEl) {
- const propertiesContainer = leaf.view.contentEl.querySelector(".metadata-container");
- if (propertiesContainer) {
- propertiesContainer.classList.remove("pixel-banner-hidden-section");
- const hiddenFields = propertiesContainer.querySelectorAll(".pixel-banner-hidden-field");
- hiddenFields.forEach((field) => {
- field.classList.remove("pixel-banner-hidden-field");
- });
- }
+ const showViewImageIconSetting = new import_obsidian.Setting(containerEl).setName("Show View Image Icon").setDesc("Show an icon to view the banner image in full screen").addToggle((toggle) => toggle.setValue(this.plugin.settings.showViewImageIcon).onChange(async (value) => {
+ this.plugin.settings.showViewImageIcon = value;
+ await this.plugin.saveSettings();
+ this.plugin.updateAllBanners();
+ })).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
+ this.plugin.settings.showViewImageIcon = DEFAULT_SETTINGS.showViewImageIcon;
+ await this.plugin.saveSettings();
+ const toggleComponent = showViewImageIconSetting.components[0];
+ if (toggleComponent) {
+ toggleComponent.setValue(DEFAULT_SETTINGS.showViewImageIcon);
+ }
+ this.plugin.updateAllBanners();
+ }));
+ const hideSettingsGroup = containerEl.createDiv({ cls: "setting-group" });
+ const hidePixelBannerFieldsSetting = new import_obsidian.Setting(hideSettingsGroup).setName("Hide Pixel Banner Fields").setDesc("Hide banner-related frontmatter fields in Reading mode").addToggle((toggle) => toggle.setValue(this.plugin.settings.hidePixelBannerFields).onChange(async (value) => {
+ this.plugin.settings.hidePixelBannerFields = value;
+ if (!value) {
+ this.plugin.settings.hidePropertiesSectionIfOnlyBanner = false;
+ const dependentToggle = hidePropertiesSection.components[0];
+ if (dependentToggle) {
+ dependentToggle.setValue(false);
+ dependentToggle.setDisabled(true);
+ }
+ hidePropertiesSection.settingEl.addClass("is-disabled");
+ this.app.workspace.iterateAllLeaves((leaf) => {
+ if (leaf.view instanceof import_obsidian.MarkdownView && leaf.view.contentEl) {
+ const propertiesContainer = leaf.view.contentEl.querySelector(".metadata-container");
+ if (propertiesContainer) {
+ propertiesContainer.classList.remove("pixel-banner-hidden-section");
+ const hiddenFields = propertiesContainer.querySelectorAll(".pixel-banner-hidden-field");
+ hiddenFields.forEach((field) => {
+ field.classList.remove("pixel-banner-hidden-field");
+ });
}
- });
- } else {
- const dependentToggle = hidePropertiesSection.components[0];
- if (dependentToggle) {
- dependentToggle.setDisabled(false);
}
+ });
+ } else {
+ const dependentToggle = hidePropertiesSection.components[0];
+ if (dependentToggle) {
+ dependentToggle.setDisabled(false);
}
- await this.plugin.saveSettings();
- this.plugin.updateAllBanners();
- });
- return toggle;
- }).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
+ hidePropertiesSection.settingEl.removeClass("is-disabled");
+ }
+ await this.plugin.saveSettings();
+ this.plugin.updateAllBanners();
+ })).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
this.plugin.settings.hidePixelBannerFields = DEFAULT_SETTINGS.hidePixelBannerFields;
this.plugin.settings.hidePropertiesSectionIfOnlyBanner = DEFAULT_SETTINGS.hidePropertiesSectionIfOnlyBanner;
await this.plugin.saveSettings();
@@ -858,16 +871,14 @@ var PixelBannerSettingTab = class extends import_obsidian.PluginSettingTab {
dependentToggle.setValue(DEFAULT_SETTINGS.hidePropertiesSectionIfOnlyBanner);
dependentToggle.setDisabled(!DEFAULT_SETTINGS.hidePixelBannerFields);
}
+ hidePropertiesSection.settingEl.toggleClass("is-disabled", !DEFAULT_SETTINGS.hidePixelBannerFields);
this.plugin.updateAllBanners();
}));
- const hidePropertiesSection = new import_obsidian.Setting(containerEl).setName("Hide Properties Section").setDesc("Hide the entire Properties section in Reading mode if it only contains Pixel Banner fields").addToggle((toggle) => {
- toggle.setValue(this.plugin.settings.hidePropertiesSectionIfOnlyBanner).setDisabled(!this.plugin.settings.hidePixelBannerFields).onChange(async (value) => {
- this.plugin.settings.hidePropertiesSectionIfOnlyBanner = value;
- await this.plugin.saveSettings();
- this.plugin.updateAllBanners();
- });
- return toggle;
- }).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
+ const hidePropertiesSection = new import_obsidian.Setting(hideSettingsGroup).setName("Hide Properties Section").setDesc("Hide the entire Properties section in Reading mode if it only contains Pixel Banner fields").addToggle((toggle) => toggle.setValue(this.plugin.settings.hidePropertiesSectionIfOnlyBanner).setDisabled(!this.plugin.settings.hidePixelBannerFields).onChange(async (value) => {
+ this.plugin.settings.hidePropertiesSectionIfOnlyBanner = value;
+ await this.plugin.saveSettings();
+ this.plugin.updateAllBanners();
+ })).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
this.plugin.settings.hidePropertiesSectionIfOnlyBanner = DEFAULT_SETTINGS.hidePropertiesSectionIfOnlyBanner;
await this.plugin.saveSettings();
const toggle = hidePropertiesSection.components[0];
@@ -876,16 +887,19 @@ var PixelBannerSettingTab = class extends import_obsidian.PluginSettingTab {
}
this.plugin.updateAllBanners();
}));
- new import_obsidian.Setting(containerEl).setName("Show Release Notes").setDesc("Show release notes after plugin updates").addToggle((toggle) => toggle.setValue(this.plugin.settings.showReleaseNotes).onChange(async (value) => {
+ hidePropertiesSection.settingEl.addClass("setting-dependent");
+ if (!this.plugin.settings.hidePixelBannerFields) {
+ hidePropertiesSection.settingEl.addClass("is-disabled");
+ }
+ const showReleaseNotesSetting = new import_obsidian.Setting(containerEl).setName("Show Release Notes").setDesc("Show release notes after plugin updates").addToggle((toggle) => toggle.setValue(this.plugin.settings.showReleaseNotes).onChange(async (value) => {
this.plugin.settings.showReleaseNotes = value;
await this.plugin.saveSettings();
})).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
this.plugin.settings.showReleaseNotes = DEFAULT_SETTINGS.showReleaseNotes;
await this.plugin.saveSettings();
- const toggleEl = button.extraSettingsEl.parentElement.querySelector(".checkbox-container input");
- if (toggleEl) {
- toggleEl.checked = DEFAULT_SETTINGS.showReleaseNotes;
- toggleEl.dispatchEvent(new Event("change"));
+ const toggleComponent = showReleaseNotesSetting.components[0];
+ if (toggleComponent) {
+ toggleComponent.setValue(DEFAULT_SETTINGS.showReleaseNotes);
}
}));
}
@@ -1230,9 +1244,39 @@ var ReleaseNotesModal = class extends import_obsidian2.Modal {
contentEl.empty();
}
};
+var ImageViewModal = class extends import_obsidian2.Modal {
+ constructor(app2, imageUrl) {
+ super(app2);
+ this.imageUrl = imageUrl;
+ }
+ onOpen() {
+ this.modalEl.addClass("pixel-banner-image-modal");
+ const { contentEl } = this;
+ contentEl.empty();
+ contentEl.addClass("pixel-banner-image-view-modal");
+ const imageContainer = contentEl.createDiv("image-container");
+ const img = imageContainer.createEl("img", {
+ attr: {
+ src: this.imageUrl,
+ style: "max-width: 100%; max-height: 90vh; object-fit: contain;"
+ }
+ });
+ const closeButton = contentEl.createEl("button", {
+ text: "Close",
+ cls: "mod-cta"
+ });
+ closeButton.style.marginTop = "10px";
+ closeButton.addEventListener("click", () => this.close());
+ this.scope.register([], "Escape", () => this.close());
+ }
+ onClose() {
+ const { contentEl } = this;
+ contentEl.empty();
+ }
+};
// virtual-module:virtual:release-notes
-var releaseNotes = '
\u{1F389} What's New
\nv2.12.0
\n\u2728 Added
\n- \n
\u{1F389} What's New
\nv2.13.0
\n\u2728 Added
\n- \n
\u{1F959} Stuffed Links
\n[1.9.2] - 2024-12-01
\n\u{1F41B} Fixed
\n- \n
[1.9.1] - 2024-12-01
\n\u{1F41B} Fixed
\n- \n
[1.9.0] - 2024-11-30
\n\u2728 Added
\n- \n
\u{1F41B} Fixed
\n- \n
\u{1F6D1} Exclude Me Please
\n[1.10.0] - 2024-12-08
\n\u2728 Added
\n- \n
