BetterTweetDeck icon indicating copy to clipboard operation
BetterTweetDeck copied to clipboard

Column move snap to the left edge when clicking sidebar icon

Open andycjw opened this issue 2 years ago • 4 comments

Is your feature request related to a problem? Please describe. column doesn't always snap to the left edge when there's more than 4 columns

Describe the solution you'd like A clear and concise description of what you want to happen.

when clicking on column icon on the left side bar, corresponding column should snap to the left edge as an option

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

resize the window to very narrow, and it will snap as it is designed that way, as described in this blogpost

Additional context Add any other context or screenshots about the feature request here.

should be easy to enable this as this is already designed when there's less than 4 column showing on screen, I'm trying to look where this is implemented, hope someone else can help trying to find it together

andycjw avatar Dec 04 '21 12:12 andycjw

Given that the blogpost you linked is 8 years old, I doubt that whatever code implemented it is still there. Besides I'm not even sure there any good/reliable ways for me to meddle with the drag/drop code that TweetDeck has :confuse

eramdam avatar Dec 04 '21 21:12 eramdam

this snapping feature is still there I believe, the column clicked will snap in place when there's less than 4 columns in view, you can try it yourself

there must be a variable or function that tracks the columns in view and enable this behavior, I was thinking to override it as a user-settable value, but I can't seem to find it, and it doesn't make sense to me how they implement this.

andycjw avatar Dec 05 '21 05:12 andycjw

I found the variable that responsible for this behavior, in the tweetdeck bundle.js

        this.handleScrollColumnToCenter = function(e, t) {
            var i, n, s, a, o, l, c = r.default.getColumnElementByKey(t.columnKey), u = this.select("appColumnsContainerSelector"), d = this.select("columnsContainerSelector"), h = u.innerWidth() / c.outerWidth(!0), m = u.scrollLeft(), f = !0;
            h <= 3.05 ? (l = parseInt(d.css("padding-left"), 10),
            i = m + c.position().left - l) : (n = c.outerWidth(),
            s = u.get(0).scrollWidth - this.attr.columnsLeftMargin,
            a = d.width(),
            o = c.offset().left,
            i = m + o - (a - n) / 2,
            i = Math.min(i, s - a),
            i = Math.max(i, 0)),
            h < 2 && (f = !1),
            this.scrollColumnToOffset(t.columnKey, i, f)
        }
h = u.innerWidth() / c.outerWidth(!0)
h <= 3.05 

it's this h that is used to calculate numbers of column in view, and different scrollTo offset is calculated depending on this value, but I have no idea how to modify this from the extension side

andycjw avatar Dec 05 '21 06:12 andycjw

handler function above is triggered by event "uiColumnsScrollColumnToCenter"

I looked into some of the sample in repo, will event override like below work? I referred the code and modified from updateTabTitle.ts

import {makeBTDModule} from '../types/btdCommonTypes';

export const snapLeftColumn = makeBTDModule(({jq, settings}) => {
  if (!settings.snapLeftColumnEnable) {
    return;
  }
  getColumnElementByKey = function(e) {
    return jq(".js-app-columns .js-column").filter('[data-column="' + e + '"]');
  }

  jq(document).on('uiColumnsScrollColumnToCenter', (ev, data) => {
    var t = data;
    var i, n, s, a, o, l, c = getColumnElementByKey(t.columnKey), u = this.select("appColumnsContainerSelector"), d = this.select("columnsContainerSelector"), h = u.innerWidth() / c.outerWidth(!0), m = u.scrollLeft(), f = !0;
    settings.snapLeftColumnEnable == True ? (l = parseInt(d.css("padding-left"), 10),
    i = m + c.position().left - l) : (n = c.outerWidth(),
    s = u.get(0).scrollWidth - this.attr.columnsLeftMargin,
    a = d.width(),
    o = c.offset().left,
    i = m + o - (a - n) / 2,
    i = Math.min(i, s - a),
    i = Math.max(i, 0)),
    h < 2 && (f = !1),
    this.scrollColumnToOffset(t.columnKey, i, f)
  });
});

andycjw avatar Dec 05 '21 07:12 andycjw

I consider Better TweetDeck to be in a feature freeze state due to the impending release of the newer TweetDeck and will instead shift my focus to building an alternative client. As such, I'm marking this issue as closed for the time being. See the following issue for details #848

eramdam avatar Oct 12 '22 12:10 eramdam