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 الخالصة ، وليس مختلطة مع Vanilla 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);

بعد القيام بذلك ، لا يلزم سوى خطوتين للتهيئة:

• تحديد السمات المتوفرة في API
• استدعاء ngOnChanges ()
• ~ اربط جميع أحداث الماوس باستخدام renderer.listen () & renderer.listenGlobal () ~

البناء(...) {}
ngOnInit (): باطل {
...
// في نهاية ngOnInit ()
this.dragScrollDom = this.element.nativeElement.querySelector ('. longTabMenu') ،
this.dragScrollRef = جديد ElementRef (this.dragScrollDom) ؛
this.dragScroll = new DragScroll (this.dragScrollRef، this.renderer) ؛
this.dragScroll.disabled = خطأ ؛
this.dragScroll.scrollbarHidden = صحيح ؛
this.dragScroll.yDisabled = صحيح ؛
this.dragScroll.xDisabled = false ؛
this.dragScroll.ngOnChanges () ،
this.renderer.listen (this.dragScrollDo، 'mousedown'، (event) => {
this.dragScroll.onMouseDown (حدث) ،
}) ؛
~ this.renderer.listenGlobal ('document'، 'mousemove'، (event) => {
this.dragScroll.onMouseMove (حدث) ،
}) ؛
this.renderer.listenGlobal ('document'، 'mouseup'، (event) => {
this.dragScroll.onMouseUp (حدث) ،
}) ؛ ~
}

أخيرًا ، سيكون من الجيد حقًا أن تتمكن من تجميع الكود المصدري وإتاحته مقابل npm install . شكرا جزيلا!

آه ، أرى ما تعنيه. سوف أقوم بتحديث المصدر في وقت ما اليوم وسأقوم بالتحميل إلى npm ، شكرًا مرة أخرى على الإبلاغ عن هذا.

مرحبًا tommykamkcm ، لقد أدركت للتو أن mouseup و mousemove يجب أن يكونا في المستند ، وإلا سيتوقف المحتوى عن الحركة إذا ضغطت على الماوس واسحبته إلى خارج المكون.
أيه أفكار؟ إذا كنت ترغب في ذلك ، يمكنك تقديم طلب سحب ويمكنني دمجه.

مرحبًا bfwg ، ربما دعونا نعود خطوة إلى الوراء ونفكر في حالات الاستخدام المختلفة.

حالة الاستخدام الخاصة بي هي جعل قائمة أفقية طويلة قابلة للتمرير بالماوس أو الإصبع. كان كل شيء يسير على ما يرام حتى قمت بسحب شريط تمرير HTML5 ، والذي يعد حساسًا لحركة الماوس. يمكنني النقر والسحب ، لكن لا يمكنني تحرير المقبض بعد وصوله إلى الموضع الصحيح.

لذلك بالنسبة لي ما أتوقعه هو) مستخدم. اسحب دائمًا داخل منطقة السحب ، أي القائمة ب) يجب ألا تتأثر المكونات الأخرى على الصفحة بالمكون الإضافي.

ومن المحتمل أن تكون حالة الاستخدام الخاصة بك طالما أن المستخدمين يمسكون بالماوس ويحركونه ، فيجب أن يكونوا قادرين على السحب ورؤية جزء معين من المحتوى بسهولة (منطقة السحب = document )

أنا متأكد من أنه سيكون هناك المزيد والمزيد من حالات الاستخدام وأعتقد أن منطقة السحب قابلة للتكوين [self | الافتراضي: المستند ] سيكون على الأرجح السبيل للذهاب.

مرحبًا 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 مع التمرير

شكرا