Ngx-drag-scroll: Question : Comment l'utiliser avec le tabset de ng-bootstrap ?

Salut @tommykamkcm , j'aimerais faire tout ce que je peux pour obtenir de l'aide, pouvez-vous fournir une partie de votre code ?

Merci pour votre réponse rapide! Tout d'abord, je n'ai qu'une certaine expérience sur Angular1 et je suis un débutant sur Angular2. Donc je ne suis pas sûr que ce que j'essaie de faire soit possible ou non:

Voici donc ci-dessous le code HTML pour générer le composant Tabset de 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>

et finalement ça devient

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

Donc, ce que j'ai essayé de faire, c'est d'ajouter drag-scroll au <div class="longTabMenu"> dans le ng-bootstrap.js

Et comme prévu, cela ne fonctionne probablement pas parce que le <div class="longTabMenu" drag-scroll ...> n'est pas rendu.

Étant donné que le premier essai ne semble pas fonctionner, je pense maintenant si nous pouvons injecter le composant DragScroll dans ngOnInit / ngAfterViewInit du composant hôte afin que je puisse initialiser manuellement le DragScroll sur <div ... >
par exemple

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

C'est toute l'info que j'ai pour l'instant. Merci beaucoup pour votre temps!

Bonjour @bfwg , ça marche enfin ! Fondamentalement, je dois manuellement

• définir les attributs disponibles dans l'API
• appeler ngOnChanges()
• lier tous les événements de souris en utilisant 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);
        });
}
...
}

J'ai aussi une petite suggestion (bien que je ne sois pas sûr que ce soit une bonne idée ou non): utilisez renderer.listen() & renderer.listenGlobal() au lieu de document.addEventListener() & document.removeEventListener()
En faisant ce changement, le code source sera probablement écrit en pur Angular2, non mélangé avec du vanilla JS

Enfin, appréciez vos efforts et j'espère que mes conclusions/suggestions seront utiles !

@tommykamkcm Merci d'avoir signalé cela, j'ai mis à jour la bibliothèque pour utiliser renderer.listenGlobal() . Faites-moi savoir si vous remarquez autre chose.

bonjour @bfwg , désolé d'être ennuyeux mais je viens de découvrir que ce que j'ai fait hier affecte en fait d'autres composants, par exemple .

Ce que je suggère de faire est: lier mouseup mousemove sur el.nativeElement au lieu de document dans le constructeur

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

Après cela, seules 2 étapes sont nécessaires pour l'initialisation :

• définir les attributs disponibles dans l'API
• appeler ngOnChanges()
• ~lier tous les événements de souris en utilisant renderer.listen() & renderer.listenGlobal()~

constructeur(...) {}
ngOnInit() : void {
...
// A la fin de 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 = faux ;
this.dragScroll.scrollbarHidden = vrai;
this.dragScroll.yDisabled = vrai;
this.dragScroll.xDisabled = faux ;
this.dragScroll.ngOnChanges();
this.renderer.listen(this.dragScrollDo , 'mousedown', (event) => {
this.dragScroll.onMouseDown(event);
});
~this.renderer.listenGlobal('document', 'mousemove', (événement) => {
this.dragScroll.onMouseMove(event);
});
this.renderer.listenGlobal('document', 'mouseup', (événement) => {
this.dragScroll.onMouseUp(event);
});~
}

Enfin, ce serait vraiment bien si vous pouviez compiler le code source et le rendre disponible pour npm install . Merci beaucoup!

Ah, je vois ce que tu veux dire. Je mettrai à jour la source dans le courant de la journée et la téléchargerai sur npm, merci encore de l'avoir signalé.

Hé @tommykamkcm , je viens de réaliser que mouseup et mousemove doivent être sur le document, sinon le contenu cessera de bouger si vous appuyez sur la souris et faites glisser vers l'extérieur du composant.
Des idées? Si vous le souhaitez, vous pouvez créer une pull request et je peux la fusionner.

Bonjour @bfwg , prenons peut-être du recul et réfléchissons à différents cas d'utilisation.

Mon cas d'utilisation consiste à faire défiler un long menu horizontal avec la souris ou le doigt. Tout allait bien jusqu'à ce que je fasse glisser un curseur HTML5, qui est sensible au mouvement de la souris. Je pouvais cliquer et faire glisser, mais pas relâcher la poignée une fois qu'elle avait atteint la bonne position.

Donc, pour moi, ce que j'attends, c'est un) utilisateur. faites toujours glisser à l'intérieur de la zone de glissement, c'est-à-dire le menu b) les autres composants de la page ne doivent pas être affectés par le plugin.

et votre cas d'utilisation est probablement tant que les utilisateurs tiennent et déplacent la souris, ils devraient pouvoir faire glisser et voir facilement une certaine partie du contenu (zone de glissement = document )

Je suis sûr qu'il y aura de plus en plus de cas d'utilisation et je pense rendre la zone de glissement configurable [self| default:document ] sera probablement la solution.

Salut @tommykamkcm , je pense que nous pouvons définitivement résoudre ce problème. Je vais tester avec le tabset de ng-bootstrap et voir si je peux reproduire.
Merci encore d'avoir été patient avec moi 😄 .

Salut @tommykamkcm , j'ai mis le code ci-dessous dans le modèle html de l'application de démonstration.

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

La liste déroulante a fonctionné comme prévu. Pouvez-vous fournir plus de détails sur votre code html s'il vous plaît?

Bonjour @bfwg désolé pour le long silence.

Ce que j'essaie de faire, c'est d'appliquer le plugin au <ngb-tab> , qui sera plus tard remplacé par un <ul role="tablist" ... >

Pas de soucis @tommykamkcm , je vois, vous essayez d'ajouter la directive après le rendu du composant. Laissez-moi essayer demain et je vous recontacterai dès que possible.

@tommykamkcm Désolé pour la réponse tardive. J'ai un peu joué avec ng-tab et je ne peux pas le faire fonctionner sans utiliser un hack, comme dans votre implémentation précédente.

Pas de soucis @bfwg , tout le monde devrait se détendre tant qu'il y a un hack et que ça marche.

Ce serait aussi bien si nous pouvions avoir une méthode qui fait le hack, en d'autres termes, applique dynamiquement le plugin à un élément DOM !

Quoi qu'il en soit, merci encore pour votre soutien ! J'apprécie beaucoup!

Hey @tommykamkcm , je travaille la méthode attach() dans le plugin qui fait ce que tu veux :

"appliquer dynamiquement le plugin à un élément DOM"

C'est presque terminé, souhaitez-vous revoir la requête Pull une fois qu'elle est prête ?
Désolé pour l'énorme retard. 😞

Bonjour @bfwg pas de soucis, j'apprécie vraiment votre aide ! Il suffit de lire votre code et tout semble bon ! Merci encore!

Salut @tommykamkcm / @bfwg Pouvez-vous s'il vous plaît déposer la démo pour ngb-tabs avec défilement

Merci