Ngx-drag-scroll: Pergunta: Como usá-lo com o conjunto de guias do ng-bootstrap?

Oi @tommykamkcm , eu adoraria fazer o que puder para ajudar, você pode fornecer um pouco do seu código?

Obrigado por sua sua resposta rápida! Em primeiro lugar, só tenho alguma experiência em Angular1 e sou novato em Angular2. Então, não tenho certeza do que estou tentando fazer é possível ou não:

Então, abaixo está o código HTML para gerar o componente Tabset do 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>

e eventualmente torna-se

<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>

Então, o que eu tentei fazer é adicionar drag-scroll ao <div class="longTabMenu"> no ng-bootstrap.js

E como esperado, provavelmente não funciona porque o <div class="longTabMenu" drag-scroll ...> não é renderizado.

Como a primeira tentativa parece não funcionar, agora estou pensando se podemos injetar o componente DragScroll em ngOnInit / ngAfterViewInit do componente host para que eu possa inicializar manualmente o DragScroll em <div ... >
por exemplo

@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**
    }
...
}

Essa é toda a informação que tenho até agora. Muito obrigado pelo seu tempo!

Olá @bfwg , Finalmente funcionou! Basicamente, eu preciso manualmente

• definir os attrs disponíveis na API
• chame ngOnChanges()
• vincular todos os eventos do mouse usando 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);
        });
}
...
}

Eu também tenho uma pequena sugestão (embora eu não tenha certeza se é uma boa ideia ou não): use renderer.listen() & renderer.listenGlobal() do Angular2 em vez de document.addEventListener() & document.removeEventListener()
Ao fazer essa alteração, o código-fonte provavelmente será escrito em Angular2 puro, não misturado com vanilla JS

Finalmente, agradeço seu esforço e espero que minhas descobertas / sugestões sejam úteis!

@tommykamkcm Obrigado por relatar isso, atualizei a biblioteca para usar renderer.listenGlobal() . Avise-me se notar mais alguma coisa.

Olá @bfwg , desculpe por ser chato, mas acabei de descobrir que o que fiz ontem está realmente afetando outros componentes, por exemplo .

O que eu sugiro fazer é: vincular mouseup mousemove em el.nativeElement em vez de document no construtor

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

Depois de fazer isso, apenas 2 etapas são necessárias para a inicialização:

• definir os attrs disponíveis na API
• chame ngOnChanges()
• ~ligar todos os eventos do mouse usando renderer.listen() & renderer.listenGlobal()~

construtor(...) {}
ngOnInit(): void {
...
// No final do 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', (evento) => {
this.dragScroll.onMouseDown(evento);
});
~this.renderer.listenGlobal('document', 'mousemove', (evento) => {
this.dragScroll.onMouseMove(evento);
});
this.renderer.listenGlobal('document', 'mouseup', (evento) => {
this.dragScroll.onMouseUp(evento);
});~
}

Finalmente, seria muito bom se você pudesse compilar o código-fonte e disponibilizá-lo por npm install . Muito obrigado!

Ah, eu entendo o que você quer dizer. Vou atualizar a fonte em algum momento hoje e enviar para o npm, obrigado novamente por relatar isso.

Ei @tommykamkcm , acabei de perceber que mouseup e mousemove devem estar no documento, caso contrário, o conteúdo parará de se mover se você pressionar o mouse e arrastar para fora do componente.
Alguma ideia? Se você quiser, pode fazer um pull request e eu posso mesclá-lo.

Olá @bfwg , talvez vamos dar um passo atrás e pensar em diferentes casos de uso.

Meu caso de uso é fazer um longo menu horizontal que pode ser arrastado com o mouse ou com o dedo. Tudo estava indo bem até eu arrastar um controle deslizante HTML5, que é sensível ao movimento do mouse. Eu podia clicar e arrastar, mas não soltar a alça depois que ela atingisse a posição correta.

Então, para mim, o que eu espero é a) usuário. sempre arraste dentro da zona de arrastar, ou seja, o menu b) outros componentes na página não devem ser afetados pelo plugin.

e seu caso de uso provavelmente é contanto que os usuários segurem e movam o mouse, eles devem poder arrastar e ver uma certa parte do conteúdo facilmente (drag zone = document )

Tenho certeza de que haverá mais e mais casos de uso e considero tornar a zona de arrasto configurável [self| default:document ] provavelmente será o caminho a seguir.

Oi @tommykamkcm , acho que definitivamente podemos consertar isso. Vou testar com o tabset do ng-bootstrap e ver se consigo reproduzir.
Obrigado mais uma vez por ser paciente comigo 😄 .

Oi @tommykamkcm , coloquei o código abaixo no modelo html do aplicativo de demonstração.

    <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>

A lista de arrasto funcionou como esperado. Você pode fornecer mais detalhes sobre o seu código html, por favor?

Olá @bfwg desculpe o longo silêncio.

O que estou tentando fazer é aplicar o plugin ao <ngb-tab> , que mais tarde será substituído por um <ul role="tablist" ... >

Não se preocupe @tommykamkcm , vejo que você está tentando anexar a diretiva após o componente ser renderizado. Deixe-me tentar isso amanhã e entrarei em contato com você assim que puder.

@tommykamkcm Desculpe a demora na resposta. Eu joguei um pouco com ng-tab e não consigo fazer funcionar sem usar algum hack, como na sua implementação anterior.

Não se preocupe @bfwg , todos devem relaxar enquanto houver um hack e funcionar.

Também seria bom se pudéssemos ter um método que fizesse o hack, ou seja, aplicasse dinamicamente o plugin a um elemento DOM!

De qualquer forma, obrigado novamente pelo apoio! Realmente aprecio isso!

Ei @tommykamkcm , estou trabalhando o método attach() no plugin que faz o que você quer:

"aplicar dinamicamente o plugin a um elemento DOM"

Está quase pronto, você gostaria de revisar a solicitação Pull quando ela estiver pronta?
Desculpe o grande atraso. 😞

Olá @bfwg não se preocupe, eu realmente aprecio sua ajuda! Basta ler o seu código e tudo parece bom! Obrigado novamente!

Oi @tommykamkcm / @bfwg Você pode, por favor, soltar a demonstração para ngb-tabs com rolagem

Obrigado