Ngx-drag-scroll: Pregunta: ¿Cómo usarlo con el conjunto de pestañas de ng-bootstrap?

Hola @tommykamkcm , me encantaría hacer todo lo que pueda para obtener ayuda, ¿puedes proporcionar algo de tu código?

¡Gracias por su pronta respuesta! En primer lugar, solo tengo algo de experiencia en Angular1 y soy un novato en Angular2. Así que no estoy seguro de que lo que estoy tratando de hacer sea posible o no:

A continuación se muestra el código HTML para generar el componente 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>

y finalmente se convierte

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

Entonces, lo que he intentado hacer es agregar drag-scroll a <div class="longTabMenu"> en ng-bootstrap.js

Y como era de esperar, no funciona probablemente porque el <div class="longTabMenu" drag-scroll ...> no se renderiza.

Dado que el primer intento no parece funcionar, ahora estoy pensando si podemos inyectar el componente DragScroll en ngOnInit / ngAfterViewInit del componente host para poder inicializar manualmente DragScroll en <div ... >
p.ej

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

Esa es toda la información que tengo hasta ahora. ¡Muchas gracias por tu tiempo!

Hola @bfwg , ¡Finalmente lo hice funcionar! Básicamente, necesito manualmente

• definir los atributos disponibles en la API
• llamar a ngOnChanges()
• vincula todos los eventos del mouse usando renderer.listen() y 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);
        });
}
...
}

También tengo una pequeña sugerencia (aunque no estoy seguro de si es una buena idea o no): use renderer.listen() y renderer.listenGlobal() de Angular2 en lugar de document.addEventListener() y document.removeEventListener()
Al hacer este cambio, el código fuente probablemente se escribirá en Angular2 puro, no se mezclará con Vanilla JS.

Finalmente, agradezco su esfuerzo y espero que mis hallazgos/sugerencias sean útiles.

@tommykamkcm Gracias por informar esto, actualicé la biblioteca para usar renderer.listenGlobal() . Avísame si notas algo más.

hola @bfwg , lo siento por ser molesto, pero descubrí que lo que hice ayer en realidad afecta a otros componentes, por ejemplo .

Lo que sugiero hacer es: enlazar mouseup mousemove en el.nativeElement en lugar de document en el constructor

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

Después de hacer esto, solo se requieren 2 pasos para la inicialización:

• definir los atributos disponibles en la API
• llamar a ngOnChanges()
• ~vincule todos los eventos del mouse usando renderer.listen() y renderer.listenGlobal()~

constructor(...) {}
ngOnInit(): vacío {
...
// Al final 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 = false;
this.dragScroll.scrollbarHidden = verdadero;
this.dragScroll.yDisabled = verdadero;
this.dragScroll.xDisabled = false;
this.dragScroll.ngOnChanges();
this.renderer.listen(this.dragScrollDo , 'mousedown', (evento) => {
this.dragScroll.onMouseDown(evento);
});
~this.renderer.listenGlobal('documento', 'movimiento del ratón', (evento) => {
this.dragScroll.onMouseMove(evento);
});
this.renderer.listenGlobal('documento', 'mouseup', (evento) => {
this.dragScroll.onMouseUp(evento);
});~
}

Finalmente, sería muy bueno si pudieras compilar el código fuente y ponerlo a disposición por npm install . ¡Muchas gracias!

Ah, ya veo lo que quieres decir. Actualizaré la fuente en algún momento de hoy y la subiré a npm, gracias nuevamente por informar esto.

Hola, @tommykamkcm , acabo de darme cuenta de que mouseup y mousemove deben estar en el documento; de lo contrario, el contenido dejará de moverse si presiona el mouse y lo arrastra hacia afuera del componente.
¿Algunas ideas? Si lo desea, puede enviar una solicitud de extracción y puedo fusionarla.

hola @bfwg , tal vez demos un paso atrás y pensemos en diferentes casos de uso.

Mi caso de uso es hacer un menú horizontal largo que se pueda desplazar con el mouse o el dedo. Todo iba bien hasta que arrastré un control deslizante HTML5, que es sensible al movimiento del mouse. Podía hacer clic y arrastrar, pero no soltar el mango después de que alcanzó la posición correcta.

Entonces, para mí, lo que espero es a) usuario. arrastre siempre dentro de la zona de arrastre, es decir, el menú b) otros componentes de la página no deberían verse afectados por el complemento.

y su caso de uso probablemente sea mientras los usuarios mantengan presionado y muevan el mouse, deberían poder arrastrar y ver una cierta parte del contenido fácilmente (zona de arrastre = document )

Estoy seguro de que habrá más y más casos de uso y creo que hacer que la zona de arrastre sea configurable [self| default:document ] probablemente será el camino a seguir.

Hola @tommykamkcm , creo que definitivamente podemos arreglar esto. Voy a probar con el conjunto de pestañas de ng-bootstrap y ver si puedo reproducirlo.
Gracias de nuevo por ser paciente conmigo 😄.

Hola @tommykamkcm , puse el siguiente código en la plantilla html de la aplicación de demostración.

    <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 lista de arrastre funcionó como se esperaba. ¿Puede proporcionar más detalles sobre su código html, por favor?

hola @bfwg perdón por el largo silencio.

Lo que estoy tratando de hacer es aplicar el complemento al <ngb-tab> , que luego será reemplazado por un <ul role="tablist" ... >

No se preocupe, @tommykamkcm , ya veo, está tratando de agregar la directiva después de que se represente el componente. Déjame intentarlo mañana y te responderé tan pronto como pueda.

@tommykamkcm Perdón por la demora en la respuesta. He jugado un poco con ng-tab y no puedo hacerlo funcionar sin usar algún truco, como en su implementación anterior.

No se preocupe, @bfwg , todos deberían relajarse siempre que haya un truco y funcione.

¡También sería bueno si pudiéramos tener un método que haga el truco, en otras palabras, aplicar dinámicamente el complemento a un elemento DOM!

De todos modos, ¡gracias de nuevo por su apoyo! ¡Realmente lo aprecio!

Hola, @tommykamkcm , estoy trabajando en el método attach() en el complemento que hace lo que quieres:

"aplicar dinámicamente el complemento a un elemento DOM"

Ya casi está listo, ¿le gustaría revisar la solicitud de extracción una vez que esté lista?
Perdón por la gran demora. 😞

Hola @bfwg , no te preocupes, ¡realmente aprecio tu ayuda! ¡Solo lea su código y todo se ve bien! ¡Gracias de nuevo!

Hola @tommykamkcm / @bfwg ¿Puedes dejar la demostración para ngb-tabs con desplazamiento?

Gracias