trilium/src/public/javascripts/widgets/tab_row.js

/*!
 * Draggabilly PACKAGED v2.2.0
 * Make that shiz draggable
 * https://draggabilly.desandro.com
 * MIT license
 */

import BasicWidget from "./basic_widget.js";
import contextMenuService from "../services/context_menu.js";

!function(i, e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("jquery")):i.jQueryBridget=e(i,i.jQuery)}(window,function(t, i){"use strict";var c=Array.prototype.slice,e=t.console,p=void 0===e?function(){}:function(t){e.error(t)};function n(d, o, u){(u=u||i||t.jQuery)&&(o.prototype.option||(o.prototype.option=function(t){u.isPlainObject(t)&&(this.options=u.extend(!0,this.options,t))}),u.fn[d]=function(t){if("string"==typeof t){var i=c.call(arguments,1);return s=i,a="$()."+d+'("'+(r=t)+'")',(e=this).each(function(t, i){var e=u.data(i,d);if(e){var n=e[r];if(n&&"_"!=r.charAt(0)){var o=n.apply(e,s);h=void 0===h?o:h}else p(a+" is not a valid method")}else p(d+" not initialized. Cannot call methods, i.e. "+a)}),void 0!==h?h:e}var e,r,s,h,a,n;return n=t,this.each(function(t, i){var e=u.data(i,d);e?(e.option(n),e._init()):(e=new o(i,n),u.data(i,d,e))}),this},r(u))}function r(t){!t||t&&t.bridget||(t.bridget=n)}return r(i||t.jQuery),n}),function(t, i){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return i()}):"object"==typeof module&&module.exports?module.exports=i():t.getSize=i()}(window,function(){"use strict";function m(t){var i=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(i)&&i}var e="undefined"==typeof console?function(){}:function(t){console.error(t)},y=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],b=y.length;function E(t){var i=getComputedStyle(t);return i||e("Style returned "+i+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),i}var _,x=!1;function P(t){if(function(){if(!x){x=!0;var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(t);var e=E(t);P.isBoxSizeOuter=_=200==m(e.width),i.removeChild(t)}}(),"string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var i=E(t);if("none"==i.display)return function(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},i=0; i<b; i++)t[y[i]]=0;return t}();var e={};e.width=t.offsetWidth,e.height=t.offsetHeight;for(var n=e.isBorderBox="border-box"==i.boxSizing,o=0; o<b; o++){var r=y[o],s=i[r],h=parseFloat(s);e[r]=isNaN(h)?0:h}var a=e.paddingLeft+e.paddingRight,d=e.paddingTop+e.paddingBottom,u=e.marginLeft+e.marginRight,c=e.marginTop+e.marginBottom,p=e.borderLeftWidth+e.borderRightWidth,f=e.borderTopWidth+e.borderBottomWidth,g=n&&_,l=m(i.width);!1!==l&&(e.width=l+(g?0:a+p));var v=m(i.height);return!1!==v&&(e.height=v+(g?0:d+f)),e.innerWidth=e.width-(a+p),e.innerHeight=e.height-(d+f),e.outerWidth=e.width+u,e.outerHeight=e.height+c,e}}return P}),function(t, i){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",i):"object"==typeof module&&module.exports?module.exports=i():t.EvEmitter=i()}("undefined"!=typeof window?window:this,function(){function t(){}var i=t.prototype;return i.on=function(t, i){if(t&&i){var e=this._events=this._events||{},n=e[t]=e[t]||[];return-1==n.indexOf(i)&&n.push(i),this}},i.once=function(t, i){if(t&&i){this.on(t,i);var e=this._onceEvents=this._onceEvents||{};return(e[t]=e[t]||{})[i]=!0,this}},i.off=function(t, i){var e=this._events&&this._events[t];if(e&&e.length){var n=e.indexOf(i);return-1!=n&&e.splice(n,1),this}},i.emitEvent=function(t, i){var e=this._events&&this._events[t];if(e&&e.length){e=e.slice(0),i=i||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0; o<e.length; o++){var r=e[o];n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,i)}return this}},i.allOff=function(){delete this._events,delete this._onceEvents},t}),function(i, e){"function"==typeof define&&define.amd?define("unipointer/unipointer",["ev-emitter/ev-emitter"],funct

const Draggabilly = window.Draggabilly;

const TAB_CONTENT_MIN_WIDTH = 24;
const TAB_CONTENT_MAX_WIDTH = 240;
const NEW_TAB_WIDTH = 32;
const MIN_FILLER_WIDTH = 50;

const TAB_SIZE_SMALL = 84;
const TAB_SIZE_SMALLER = 60;
const TAB_SIZE_MINI = 48;

const TAB_TPL = `
<div class="note-tab">
  <div class="note-tab-wrapper">
    <div class="note-tab-title"></div>
    <div class="note-tab-drag-handle"></div>
    <div class="note-tab-close"><span>×</span></div>
  </div>
</div>`;

const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab" title="Add new tab">+</div>`;
const FILLER_TPL = `<div class="tab-row-filler">
    <div class="tab-row-border"></div>
</div>`;

const TAB_ROW_TPL = `
<div class="note-tab-row">
    <style>
    .note-tab-row {
        box-sizing: border-box;
        position: relative;
        height: 34px;
        min-height: 34px;
        width: 100%;
        background: var(--main-background-color);
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        margin-top: 2px;
    }
    .note-tab-row * {
        box-sizing: inherit;
        font: inherit;
    }
    .note-tab-row .note-tab-row-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .note-tab-row .note-tab {
        position: absolute;
        left: 0;
        height: 33px;
        width: 240px;
        border: 0;
        margin: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    .note-new-tab {
        position: absolute;
        left: 0;
        height: 33px;
        width: 32px;
        border: 0;
        margin: 0;
        z-index: 1;
        text-align: center;
        font-size: 24px;
        cursor: pointer;
        border-bottom: 1px solid var(--main-border-color);
    }
    
    .note-new-tab:hover {
        background-color: var(--accented-background-color);
        border-radius: 5px;
    }
    
    .tab-row-filler {
        -webkit-app-region: drag;
        position: absolute;
        left: 0;
        height: 33px;
    }
    
    .tab-row-filler .tab-row-border {
        position: relative;
        background: linear-gradient(to right, var(--main-border-color), transparent);
        height: 1px;
        margin-top: 32px;
    }
    
    .note-tab-row .note-tab[active] {
        z-index: 5;
    }
    
    .note-tab-row .note-tab,
    .note-tab-row .note-tab * {
        user-select: none;
        cursor: default;
    }
    
    .note-tab-row .note-tab.note-tab-was-just-added {
        top: 10px;
        animation: note-tab-was-just-added 120ms forwards ease-in-out;
    }
    
    .note-tab-row .note-tab .note-tab-wrapper {
        position: absolute;
        display: flex;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5px 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        overflow: hidden;
        pointer-events: all;
        background-color: var(--accented-background-color);
        border-bottom: 1px solid var(--main-border-color);
    }
    
    .note-tab-row .note-tab[active] .note-tab-wrapper {
        background-color: var(--main-background-color);
        border: 1px solid var(--main-border-color);
        border-bottom: 0;
        font-weight: bold;
    }
    
    .note-tab-row .note-tab[is-mini] .note-tab-wrapper {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    .note-tab-row .note-tab .note-tab-title {
        flex: 1;
        vertical-align: top;
        overflow: hidden;
        white-space: nowrap;
        color: var(--muted-text-color);
    }
    
    .note-tab-row .note-tab[is-small] .note-tab-title {
        margin-left: 0;
    }
    
    .note-tab-row .note-tab[active] .note-tab-title {
        color: var(--main-text-color);
    }
    
    .note-tab-row .note-tab .note-tab-drag-handle {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    
    .note-tab-row .note-tab .note-tab-close {
        flex-grow: 0;
        flex-shrink: 0;
        border-radius: 50%;
        z-index: 100;
        width: 24px;
        height: 24px;
        text-align: center;
    }
    
    .note-tab-row .note-tab .note-tab-close span {
        font-size: 24px;
        position: relative;
        top: -6px;
    }
    
    .note-tab-row .note-tab .note-tab-close:hover {
        background-color: var(--hover-item-background-color);
        color: var(--hover-item-text-color);
    }
    
    .note-tab-row .note-tab[is-smaller] .note-tab-close {
        margin-left: auto;
    }
    .note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close {
        display: none;
    }
    .note-tab-row .note-tab[is-mini][active] .note-tab-close {
        margin-left: auto;
        margin-right: auto;
    }
    @-moz-keyframes note-tab-was-just-added {
        to {
            top: 0;
        }
    }
    @-webkit-keyframes note-tab-was-just-added {
        to {
            top: 0;
        }
    }
    @-o-keyframes note-tab-was-just-added {
        to {
            top: 0;
        }
    }
    @keyframes note-tab-was-just-added {
        to {
            top: 0;
        }
    }
    .note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging),
    .note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged {
        transition: transform 120ms ease-in-out;
    }
    </style>

    <div class="note-tab-row-content"></div>
</div>`;

export default class TabRowWidget extends BasicWidget {
    doRender() {
        this.$widget = $(TAB_ROW_TPL);

        this.draggabillies = [];
        this.eventListeners = {};

        this.setupStyle();
        this.setupEvents();
        this.setupDraggabilly();
        this.setupNewButton();
        this.setupFiller();
        this.layoutTabs();
        this.setVisibility();

        this.$widget.on('contextmenu', '.note-tab', e => {
            e.preventDefault();

            const tab = $(e.target).closest(".note-tab");

            contextMenuService.initContextMenu(e, {
                getContextMenuItems: () => {
                    return [
                        {title: "Close all tabs", cmd: "removeAllTabs", uiIcon: "empty"},
                        {title: "Close all tabs except for this", cmd: "removeAllTabsExceptForThis", uiIcon: "empty"}
                    ];
                },
                selectContextMenuItem: (e, cmd) => {
                    if (cmd === 'removeAllTabs') {
                        this.removeAllTabs();
                    } else if (cmd === 'removeAllTabsExceptForThis') {
                        this.removeAllTabsExceptForThis(tab[0]);
                    }
                }
            });
        });

        return this.$widget;
    }

    setupStyle() {
        this.$style = $("<style>");
        this.$widget.append(this.$style);
    }

    setupEvents() {
        const resizeListener = _ => {
            this.cleanUpPreviouslyDraggedTabs();
            this.layoutTabs();
        };

        // ResizeObserver exists only in FF69
        if (typeof ResizeObserver !== "undefined") {
            new ResizeObserver(resizeListener).observe(this.$widget[0]);
        }
        else {
            // for older firefox
            window.addEventListener('resize', resizeListener);
        }

        this.tabEls.forEach((tabEl) => this.setTabCloseEventListener(tabEl));
    }

    setVisibility() {
        this.$widget.show();
    }

    get tabEls() {
        return Array.prototype.slice.call(this.$widget.find('.note-tab'));
    }

    get $tabContent() {
        return this.$widget.find('.note-tab-row-content');
    }

    get tabContentWidths() {
        const numberOfTabs = this.tabEls.length;
        const tabsContentWidth = this.$tabContent[0].clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH;
        const targetWidth = tabsContentWidth / numberOfTabs;
        const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
        const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
        const totalTabsWidthUsingTarget = flooredClampedTargetWidth * numberOfTabs;
        const totalExtraWidthDueToFlooring = tabsContentWidth - totalTabsWidthUsingTarget;

        const widths = [];
        let extraWidthRemaining = totalExtraWidthDueToFlooring;

        for (let i = 0; i < numberOfTabs; i += 1) {
            const extraWidth = flooredClampedTargetWidth < TAB_CONTENT_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0;
            widths.push(flooredClampedTargetWidth + extraWidth);
            if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
        }

        if (this.$filler) {
            this.$filler.css("width", (extraWidthRemaining + MIN_FILLER_WIDTH) + "px");
        }

        return widths;
    }

    getTabPositions() {
        const tabPositions = [];
        const tabContentWidths = this.tabContentWidths;

        let position = 0;
        tabContentWidths.forEach(width => {
            tabPositions.push(position);
            position += width;
        });

        const newTabPosition = position;
        const fillerPosition = position + 32;

        return {tabPositions, newTabPosition, fillerPosition};
    }

    layoutTabs() {
        const tabContentWidths = this.tabContentWidths;

        this.tabEls.forEach((tabEl, i) => {
            const width = tabContentWidths[i];

            tabEl.style.width = width + 'px';
            tabEl.removeAttribute('is-small');
            tabEl.removeAttribute('is-smaller');
            tabEl.removeAttribute('is-mini');

            if (width < TAB_SIZE_SMALL) tabEl.setAttribute('is-small', '');
            if (width < TAB_SIZE_SMALLER) tabEl.setAttribute('is-smaller', '');
            if (width < TAB_SIZE_MINI) tabEl.setAttribute('is-mini', '');
        });

        let styleHTML = '';

        const {tabPositions, newTabPosition, fillerPosition} = this.getTabPositions();

        tabPositions.forEach((position, i) => {
            styleHTML += `.note-tab:nth-child(${ i + 1 }) { transform: translate3d(${ position }px, 0, 0)} `;
        });

        styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) } `;
        styleHTML += `.tab-row-filler { transform: translate3d(${ fillerPosition }px, 0, 0) } `;

        this.$style.html(styleHTML);
    }

    addTab(tabId) {
        const div = document.createElement('div');
        div.innerHTML = TAB_TPL;
        const tabEl = div.firstElementChild;
        tabEl.setAttribute('data-tab-id', tabId);

        tabEl.classList.add('note-tab-was-just-added');
        setTimeout(() => tabEl.classList.remove('note-tab-was-just-added'), 500);

        this.$newTab.before(tabEl);
        this.setVisibility();
        this.setTabCloseEventListener(tabEl);
        this.updateTab(tabEl, {title: 'New tab'});
        this.cleanUpPreviouslyDraggedTabs();
        this.layoutTabs();
        this.setupDraggabilly();

        return tabEl;
    }

    setTabCloseEventListener(tabEl) {
        tabEl.querySelector('.note-tab-close')
            .addEventListener('click', _ => this.removeTab(tabEl.getAttribute('data-tab-id')));

        tabEl.addEventListener('mousedown', e => {
            if (e.which === 2) {
                this.removeTab(tabEl.getAttribute('data-tab-id'));

                return true; // event has been handled
            }
        });
    }

    get activeTabId() {
        const tabEl = this.activeTabEl;

        return tabEl ? tabEl.getAttribute('data-tab-id') : null;
    }

    get activeTabEl() {
        return this.$widget.find('.note-tab[active]')[0];
    }

    get previousTabEl() {
        const tabEls = this.tabEls;

        if (tabEls.length <= 1) {
            return null;
        }

        let prev = tabEls[tabEls.length - 1];

        for (const tabEl of tabEls) {
            if (tabEl.hasAttribute("active")) {
                return prev;
            }

            prev = tabEl;
        }

        return null;
    }

    get nextTabEl() {
        const tabEls = this.tabEls;

        if (tabEls.length <= 1) {
            return null;
        }

        let prev = tabEls[tabEls.length - 1];

        for (const tabEl of tabEls) {
            if (prev.hasAttribute("active")) {
                return tabEl;
            }

            prev = tabEl;
        }

        return null;
    }

    hasActiveTab() {
        return !!this.activeTabEl;
    }

    activateTab(tabEl) {
        const activeTabEl = this.activeTabEl;
        if (activeTabEl === tabEl) return;
        if (activeTabEl) activeTabEl.removeAttribute('active');
        tabEl.setAttribute('active', '');
        this.trigger('activeTabChanged', { tabId: tabEl.getAttribute('data-tab-id') });
    }

    removeTab(tabId) {
        const tabEl = this.$widget.find(`[data-tab-id='${tabId}']`)[0];

        if (tabEl === this.activeTabEl) {
            if (tabEl.nextElementSibling && tabEl.nextElementSibling.classList.contains("note-tab")) {
                this.activateTab(tabEl.nextElementSibling)
            } else if (tabEl.previousElementSibling && tabEl.previousElementSibling.classList.contains("note-tab")) {
                this.activateTab(tabEl.previousElementSibling)
            }
        }
        tabEl.parentNode.removeChild(tabEl);
        this.trigger('tabRemove', { tabId: tabEl.getAttribute('data-tab-id') });
        this.cleanUpPreviouslyDraggedTabs();
        this.layoutTabs();
        this.setupDraggabilly();
        this.setVisibility();
    }

    removeAllTabs() {
        for (const tabEl of this.tabEls) {
            this.removeTab(tabEl.getAttribute('data-tab-id'));
        }
    }

    removeAllTabsExceptForThis(remainingTabEl) {
        for (const tabEl of this.tabEls) {
            if (remainingTabEl !== tabEl) {
                this.removeTab(tabEl.getAttribute('data-tab-id'));
            }
        }
    }

    updateTab(tabEl, tabProperties) {
        tabEl.querySelector('.note-tab-title').textContent = tabProperties.title;
    }

    cleanUpPreviouslyDraggedTabs() {
        this.tabEls.forEach((tabEl) => tabEl.classList.remove('note-tab-was-just-dragged'));
    }

    setupDraggabilly() {
        const tabEls = this.tabEls;
        const {tabPositions} = this.getTabPositions();

        if (this.isDragging) {
            this.isDragging = false;
            this.$widget.removeClass('note-tab-row-is-sorting');
            this.draggabillyDragging.element.classList.remove('note-tab-is-dragging');
            this.draggabillyDragging.element.style.transform = '';
            this.draggabillyDragging.dragEnd();
            this.draggabillyDragging.isDragging = false;
            this.draggabillyDragging.positionDrag = _ => {}; // Prevent Draggabilly from updating tabEl.style.transform in later frames
            this.draggabillyDragging.destroy();
            this.draggabillyDragging = null;
        }

        this.draggabillies.forEach(d => d.destroy());

        tabEls.forEach((tabEl, originalIndex) => {
            const originalTabPositionX = tabPositions[originalIndex];
            const draggabilly = new Draggabilly(tabEl, {
                axis: 'x',
                handle: '.note-tab-drag-handle',
                containment: this.$tabContent[0]
            });

            this.draggabillies.push(draggabilly);

            draggabilly.on('pointerDown', _ => {
                this.activateTab(tabEl)
            });

            draggabilly.on('dragStart', _ => {
                this.isDragging = true;
                this.draggabillyDragging = draggabilly;
                tabEl.classList.add('note-tab-is-dragging');
                this.$widget.addClass('note-tab-row-is-sorting');
            });

            draggabilly.on('dragEnd', _ => {
                this.isDragging = false;
                const finalTranslateX = parseFloat(tabEl.style.left, 10);
                tabEl.style.transform = `translate3d(0, 0, 0)`;

                // Animate dragged tab back into its place
                requestAnimationFrame(_ => {
                    tabEl.style.left = '0';
                    tabEl.style.transform = `translate3d(${ finalTranslateX }px, 0, 0)`;

                    requestAnimationFrame(_ => {
                        tabEl.classList.remove('note-tab-is-dragging');
                        this.$widget.removeClass('note-tab-row-is-sorting');

                        tabEl.classList.add('note-tab-was-just-dragged');

                        requestAnimationFrame(_ => {
                            tabEl.style.transform = '';

                            this.layoutTabs();
                            this.setupDraggabilly();
                        })
                    })
                })
            });

            draggabilly.on('dragMove', (event, pointer, moveVector) => {
                // Current index be computed within the event since it can change during the dragMove
                const tabEls = this.tabEls;
                const currentIndex = tabEls.indexOf(tabEl);

                const currentTabPositionX = originalTabPositionX + moveVector.x;
                const destinationIndexTarget = this.closest(currentTabPositionX, tabPositions);
                const destinationIndex = Math.max(0, Math.min(tabEls.length, destinationIndexTarget));

                if (currentIndex !== destinationIndex) {
                    this.animateTabMove(tabEl, currentIndex, destinationIndex);
                }
            })
        })
    }

    animateTabMove(tabEl, originIndex, destinationIndex) {
        if (destinationIndex < originIndex) {
            tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]);
        } else {
            const beforeEl = this.tabEls[destinationIndex + 1] || this.$newTab;

            tabEl.parentNode.insertBefore(tabEl, beforeEl);
        }
        this.trigger('tabReorder');
        this.layoutTabs();
    }

    setupNewButton() {
        this.$newTab = $(NEW_TAB_BUTTON_TPL);

        this.$tabContent.append(this.$newTab);

        this.$newTab.on('click', _ => this.trigger('newTab'));
    }

    setupFiller() {
        this.$filler = $(FILLER_TPL);

        this.$tabContent.append(this.$filler);
    }

    closest(value, array) {
        let closest = Infinity;
        let closestIndex = -1;

        array.forEach((v, i) => {
            if (Math.abs(value - v) < closest) {
                closest = Math.abs(value - v);
                closestIndex = i
            }
        });

        return closestIndex;
    };
}