Ngx-drag-scroll: Вопрос: Как использовать его с набором вкладок ng-bootstrap?

Привет @tommykamkcm , я хотел бы сделать все, что в моих силах, для помощи, можете ли вы предоставить свой код?

Спасибо за ваш быстрый ответ! Прежде всего, у меня есть только некоторый опыт работы с Angular1, и я новичок в Angular2. Поэтому я не уверен, что я пытаюсь сделать, возможно или нет:

Итак, ниже приведен HTML-код для создания компонента Tabset ng-bootstrap: https://ng-bootstrap.github.io/#/components/tabs .

<ngb-tabset>
    <ngb-tab *ngFor="let group of groups" [id]="group.id">
        <template ngbTabTitle>{{group.name}}</template>
        <template ngbTabContent>
            ...
        </template>
    </ngb-tab>
</ngb-tabset>

и в конце концов становится

<ngb-tabset _ngcontent-43="">
   <div class="longTabMenu">
    <ul role="tablist" ng-reflect-class-name="nav nav-tabs justify-content-start" class="nav nav-tabs justify-content-start">
        <li class="nav-item">
            <a href="" role="tab" ng-reflect-ng-style="[object Object]" ng-reflect-id="Themes" id="Themes" ng-reflect-class-name="nav-link nav-link-Themes" class="nav-link nav-link-Themes active" aria-controls="Themes-panel" aria-expanded="true" style="border-color: blanchedalmond;">
                Tab 1
            </a>
        </li>
        ...
        </ul>
    </div> 
    <div class="tab-content">
      ...
    </div>
  </ngb-tabset>

Итак, что я пытался сделать, это добавить drag-scroll к <div class="longTabMenu"> в ng-bootstrap.js.

И, как и ожидалось, это не работает, вероятно, потому, что <div class="longTabMenu" drag-scroll ...> не отображается.

Поскольку первая попытка, похоже, не работает, теперь я думаю, можем ли мы внедрить компонент DragScroll в ngOnInit / ngAfterViewInit хост-компонента, чтобы я мог вручную инициализировать DragScroll на <div ... >
например

@Component({
    selector: 'wd-shows',
    templateUrl: 'app/shows/shows.component.html',
    styleUrls: ['app/shows/shows.component.css'],
    providers: [ShowService, JobService],
})

export class ShowsComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit(): void {
        console.log('AfterViewInit');
        console.log(this.elTablistHolder);
        this.elTablistHolder = this.element.nativeElement.querySelector('.longTabMenu');
        this.renderer.setElementAttribute(this.elTablistHolder, 'drag-scroll', null);
        this.renderer.setElementAttribute(this.elTablistHolder, 'drag-scroll-y-disabled', 'true');
        this.renderer.setElementAttribute(this.elTablistHolder, 'scrollbar-hidden', 'true');
        **// Not sure what's next, still googling**
    }
...
}

Это пока вся информация, которая у меня есть. Большое спасибо за уделенное время!

Привет @bfwg , наконец-то заработало! В принципе, мне нужно вручную

• определить атрибуты, доступные в API
• вызов ngOnChanges()
• привязать все события мыши, используя renderer.listen() и renderer.listenGlobal()

export class BlahComponent implements OnInit {
...
dragScrollDom: any;
dragScrollRef: ElementRef;
dragScroll: DragScroll;

constructor(...) {}
ngOnInit(): void {
...
        // At the end of the ngOnInit()
        this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
        this.dragScrollRef = new ElementRef(this.dragScrollDom );
        this.dragScroll = new DragScroll(this.dragScrollRef, this.renderer);
        this.dragScroll.disabled = false;
        this.dragScroll.scrollbarHidden = true;
        this.dragScroll.yDisabled = true;
        this.dragScroll.xDisabled = false;
        this.dragScroll.ngOnChanges();
        this.renderer.listen(this.dragScrollDo , 'mousedown', (event) => {
            this.dragScroll.onMouseDown(event);
        });
        this.renderer.listenGlobal('document', 'mousemove', (event) => {
            this.dragScroll.onMouseMove(event);
        });
        this.renderer.listenGlobal('document', 'mouseup', (event) => {
            this.dragScroll.onMouseUp(event);
        });
}
...
}

У меня также есть небольшое предложение (хотя я не уверен, хорошая это идея или нет): используйте Angular2 renderer.listen() & renderer.listenGlobal() вместо document.addEventListener() & document.removeEventListener()
Сделав это изменение, исходный код, вероятно, будет написан на чистом Angular2, а не на ванильном JS.

Наконец, оцените ваши усилия и, надеюсь, мои выводы / предложения будут полезны!

@tommykamkcm Спасибо, что сообщили об этом, я обновил библиотеку, чтобы использовать renderer.listenGlobal() . Дайте мне знать, если вы заметите что-нибудь еще.

привет @bfwg , извините за назойливость, но я только что обнаружил, что то, что я сделал вчера, на самом деле влияет на другие компоненты, например .

Я предлагаю сделать следующее: привязать mouseup mousemove к el.nativeElement вместо document в конструкторе

this.mouseMoveListener = renderer.listen(el.nativeElement, 'mousemove', this.onMouseMoveHandler);
this.mouseUpListener = renderer.listen(el.nativeElement, 'mouseup', this.onMouseUpHandler);

После этого для инициализации требуется всего 2 шага:

• определить атрибуты, доступные в API
• вызов ngOnChanges()
• ~связать все события мыши с помощью renderer.listen() и renderer.listenGlobal()~

конструктор(...) {}
ngOnInit(): недействительным {
...
// В конце ngOnInit()
this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
this.dragScrollRef = новая ссылка на элемент (this.dragScrollDom);
this.dragScroll = новый DragScroll(this.dragScrollRef, this.renderer);
this.dragScroll.disabled = ложь;
this.dragScroll.scrollbarHidden = true;
this.dragScroll.yDisabled = истина;
this.dragScroll.xDisabled = ложь;
this.dragScroll.ngOnChanges();
this.renderer.listen(this.dragScrollDo , 'mousedown', (событие) => {
this.dragScroll.onMouseDown (событие);
});
~this.renderer.listenGlobal('документ', 'mousemove', (событие) => {
this.dragScroll.onMouseMove (событие);
});
this.renderer.listenGlobal('документ', 'наведение мыши', (событие) => {
this.dragScroll.onMouseUp(событие);
});~
}

Наконец, было бы очень хорошо, если бы вы могли скомпилировать исходный код и сделать его доступным за npm install . Большое спасибо!

А, я понимаю, что вы имеете в виду. Я обновлю исходный код сегодня и загружу в npm, еще раз спасибо за сообщение об этом.

Привет, @tommykamkcm , я только что понял, что mouseup и mousemove должны быть в документе, иначе содержимое перестанет двигаться, если вы нажмете кнопку мыши и перетащите ее за пределы компонента.
Есть идеи? Если хотите, вы можете отправить запрос на включение, и я могу его объединить.

привет @bfwg , может быть, давайте сделаем шаг назад и подумаем о других вариантах использования.

Мой вариант использования - сделать длинное горизонтальное меню прокручиваемым мышью или пальцем. Все шло хорошо, пока я не перетащил ползунок HTML5, который чувствителен к движению мыши. Я мог щелкнуть и перетащить, но не отпустить ручку после того, как она достигла правильного положения.

Так что я ожидаю, что это а) пользователь. всегда перетаскивайте в зону перетаскивания, т.е. в меню. б) плагин не должен влиять на другие компоненты на странице.

и ваш вариант использования, вероятно, заключается в том, что пока пользователи держат и перемещают мышь, они должны иметь возможность легко перетаскивать и видеть определенную часть контента (зона перетаскивания = document )

Я уверен, что вариантов использования будет все больше и больше, и я думаю, что можно сделать зону перетаскивания настраиваемой [self| default:document ] , вероятно, будет правильным решением.

Привет @tommykamkcm , я думаю, мы точно сможем это исправить. Я собираюсь протестировать набор вкладок ng-bootstrap и посмотреть, смогу ли я воспроизвести.
Еще раз спасибо за терпение ко мне 😄 .

Привет @tommykamkcm , я поместил приведенный ниже код в HTML-шаблон демо-приложения.

    <ngb-tabset>
      <ngb-tab title="Simple">
        <ng-template ngbTabContent>
          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
        <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
          <div class="demo-one" drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
            <img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
          </div>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>

Список перетаскивания работал, как и ожидалось. Не могли бы вы предоставить более подробную информацию о вашем html-коде, пожалуйста?

привет @bfwg извините за долгое молчание.

Что я пытаюсь сделать, так это применить плагин к <ngb-tab> , который позже будет заменен на <ul role="tablist" ... >

Не беспокойтесь @tommykamkcm , я вижу, вы пытаетесь добавить директиву после рендеринга компонента. Позвольте мне попробовать это завтра, и я вернусь к вам, как только смогу.

@tommykamkcm Извините за задержку с ответом. Я немного поиграл с ng-tab и не могу заставить его работать без использования какого-нибудь хака, как в вашей предыдущей реализации.

Не беспокойтесь @bfwg , все должны расслабиться, пока есть хак и он работает.

Было бы также хорошо, если бы у нас был метод, который выполняет взлом, другими словами, динамически применяет плагин к элементу DOM!

В любом случае, еще раз спасибо за вашу поддержку! Действительно ценю это!

Привет, @tommykamkcm , я работаю с методом attach() в плагине, который делает то, что вы хотите:

"динамически применить плагин к элементу DOM"

Почти готово. Хотите просмотреть запрос на включение, как только он будет готов?
Извините за огромную задержку. 😞

Здравствуйте, @bfwg , не беспокойтесь, я очень ценю вашу помощь! Просто прочитайте свой код, и все выглядит хорошо! Спасибо еще раз!

Привет @tommykamkcm / @bfwg Не могли бы вы скинуть демо для ngb-tabs с прокруткой

Спасибо