Ngx-drag-scroll: Frage: Wie wird es mit dem Tabset von ng-bootstrap verwendet?

Hallo @tommykamkcm , ich würde gerne tun, was ich kann, um Hilfe zu erhalten. Können Sie etwas von Ihrem Code bereitstellen?

Danke für Ihre schnelle Antwort! Zunächst einmal habe ich nur etwas Erfahrung mit Angular1 und bin ein Neuling bei Angular2. Ich bin mir also nicht sicher, ob das, was ich versuche, möglich ist oder nicht:

Nachfolgend finden Sie den HTML-Code zum Generieren der Tabset-Komponente von 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>

und schließlich wird es

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

Ich habe also versucht, drag-scroll zu <div class="longTabMenu"> in ng-bootstrap.js hinzuzufügen

Und wie erwartet funktioniert es wahrscheinlich nicht, weil <div class="longTabMenu" drag-scroll ...> nicht gerendert wird.

Da der erste Versuch nicht zu funktionieren scheint, überlege ich jetzt, ob wir die DragScroll-Komponente in ngOnInit / ngAfterViewInit der Host-Komponente injizieren können, damit ich die DragScroll auf <div ... > manuell initialisieren kann
z.B

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

Das sind alle Infos, die ich bisher habe. Vielen Dank für Ihre Zeit!

Hallo @bfwg , Endlich funktioniert es! Grundsätzlich muss ich manuell

• Definieren Sie die in der API verfügbaren Attribute
• ngOnChanges() aufrufen
• Binden Sie alle Mausereignisse mit 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);
        });
}
...
}

Ich habe auch einen kleinen Vorschlag (obwohl ich nicht sicher bin, ob es eine gute Idee ist oder nicht): Verwenden Sie renderer.listen() & renderer.listenGlobal() von Angular2 anstelle von document.addEventListener() & document.removeEventListener()
Durch diese Änderung wird der Quellcode wahrscheinlich in reinem Angular2 geschrieben, nicht gemischt mit Vanilla JS

Abschließend, schätzen Sie Ihre Bemühungen und hoffentlich sind meine Ergebnisse / Vorschläge nützlich!

@tommykamkcm Vielen Dank, dass Sie dies gemeldet haben. Ich habe die Bibliothek so aktualisiert, dass sie renderer.listenGlobal() verwendet. Lass mich wissen, wenn dir noch etwas auffällt.

hallo @bfwg , entschuldigung für die nerven, aber ich habe gerade festgestellt, dass das, was ich gestern getan habe, tatsächlich andere komponenten betrifft, zb .

Was ich vorschlage, ist: Binden Sie mouseup mousemove an el.nativeElement anstelle von document im Konstruktor

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

Danach sind nur noch 2 Schritte zur Initialisierung erforderlich:

• Definieren Sie die in der API verfügbaren Attribute
• ngOnChanges() aufrufen
• ~binden Sie alle Mausereignisse mit renderer.listen() & renderer.listenGlobal()~

Konstrukteur(...) {}
ngOnInit(): void {
...
// Am Ende von 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 = falsch;
this.dragScroll.scrollbarHidden = true;
this.dragScroll.yDisabled = true;
this.dragScroll.xDisabled = falsch;
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);
});~
}

Schließlich wäre es wirklich gut, wenn Sie den Quellcode kompilieren und für npm install zur Verfügung stellen könnten. Danke sehr!

Ah, ich verstehe was du meinst. Ich werde die Quelle irgendwann heute aktualisieren und auf npm hochladen, nochmals vielen Dank für die Meldung.

Hey @tommykamkcm , mir ist gerade klar geworden, dass mouseup und mousemove im Dokument sein müssen, sonst wird der Inhalt nicht mehr bewegt, wenn Sie die Maus drücken und aus der Komponente ziehen.
Irgendwelche Ideen? Wenn Sie möchten, können Sie eine Pull-Anfrage stellen und ich kann sie zusammenführen.

Hallo @bfwg , vielleicht gehen wir einen Schritt zurück und denken über verschiedene Anwendungsfälle nach.

Mein Anwendungsfall besteht darin, ein langes horizontales Menü per Drag-Scrolling mit der Maus oder dem Finger zu erstellen. Alles lief gut, bis ich einen HTML5-Schieberegler aufzog, der auf Mausbewegungen reagiert. Ich konnte klicken und ziehen, aber den Griff nicht loslassen, nachdem er die richtige Position erreicht hatte.

Was ich also erwarte, sind für mich a) Benutzer. Ziehen Sie immer innerhalb der Ziehzone, dh im Menü. b) Andere Komponenten auf der Seite sollten nicht durch das Plugin beeinflusst werden.

und Ihr Anwendungsfall ist wahrscheinlich, solange Benutzer die Maus halten und bewegen, sollten sie in der Lage sein, einen bestimmten Teil des Inhalts leicht zu ziehen und zu sehen (Ziehzone = document ).

Ich bin mir sicher, dass es immer mehr Anwendungsfälle geben wird, und ich gehe davon aus, dass Drag Zone konfigurierbar [self| default:document ] wird wahrscheinlich der richtige Weg sein.

Hallo @tommykamkcm , ich denke, wir können das definitiv beheben. Ich werde es mit dem Tabset von ng-bootstrap testen und sehen, ob ich es reproduzieren kann.
Nochmals vielen Dank für Ihre Geduld mit mir 😄 .

Hallo @tommykamkcm , ich habe den folgenden Code in die HTML-Vorlage der Demo-App eingefügt.

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

Die Drag-Liste funktionierte wie erwartet. Können Sie bitte mehr Details zu Ihrem HTML-Code angeben?

hallo @bfwg sorry für die lange stille.

Was ich versuche, ist das Plugin tatsächlich auf das <ngb-tab> anzuwenden, das später durch ein <ul role="tablist" ... > ersetzt wird

Keine Sorge @tommykamkcm , wie ich sehe, versuchen Sie, die Direktive anzuhängen, nachdem die Komponente gerendert wurde. Lass es mich morgen versuchen und ich melde mich so schnell wie möglich bei dir.

@tommykamkcm Entschuldigung für die verspätete Antwort. Ich habe ein bisschen mit ng-tab gespielt und kann es nicht zum Laufen bringen, ohne einen Hack zu verwenden, wie in Ihrer vorherigen Implementierung.

Keine Sorge @bfwg , jeder sollte sich entspannen, solange es einen Hack gibt und es funktioniert.

Es wäre auch gut, wenn wir eine Methode hätten, die den Hack durchführt, mit anderen Worten, das Plugin dynamisch auf ein DOM-Element anwendet!

Auf jeden Fall nochmal vielen Dank für deine Unterstützung! Schätze es wirklich!

Hey @tommykamkcm , ich arbeite mit der Methode attach() im Plugin, das tut, was du willst:

"Plugin dynamisch auf ein DOM-Element anwenden"

Es ist fast fertig, möchten Sie die Pull-Anforderung überprüfen, sobald sie fertig ist?
Sorry für die große Verspätung. 😞

Hallo @bfwg , keine Sorge, ich weiß deine Hilfe sehr zu schätzen! Lesen Sie einfach Ihren Code und alles sieht gut aus! Danke noch einmal!

Hallo @tommykamkcm / @bfwg Kannst du bitte die Demo für ngb-Tabs mit Scrollen löschen

Danke