سيء للغاية ، هذا ليس السلوك الافتراضي عند وجود عدة إخطار swal: /
سيكون هذا جميل العلاقات العامة.

kentmw ما هو احتمال أن تقوم بإصدار جديد مع هذا الإصلاح فيه ، لذلك من الممكن التعامل مع العديد من النوافذ المنبثقة Swal بعد بعضكم البعض؟
ليس بشكل عام كعلاقات عامة ، نظرًا لأنه لن يتم دمجها على أي حال ، ولكن ربما تكون دليلًا ، حول كيفية استخدام الكود أعلاه بدلاً من ذلك؟ هل هو مجرد نسخ / لصق في ملف SWAL js؟

inctor سأكتب دليلاً في غضون 15 دقيقة أو نحو ذلك وأقوم بتحديث الخدمة إلى الخدمة التي

SwalService

هذا هو الكود مع jquery فقط باعتباره تبعيات مشروع بخلاف sweetalert:

الرمز

var SwalService = function(options) {
  this.pendingSwal = [];
  if (options && options.showPendingMessage != undefined) {
    this.showPendingMessage = options.showPendingMessage;
  }
  this.initialize();
}

SwalService.prototype = {
  currentSwal: null,
  showPendingMessage: true,
  swalFirstCalled: false,
  __swal: swal,
  pendingSwal: null,
  nextId: 1,

  swal: function() {
    var pending = {
      args: arguments,
      id: this.nextId++
    }
    return this._swalWithId(pending);
  },

  _swalWithId: function(pending) {
    var service = this;
    if (this.isSwalOpen() || this.isClosing) {
      this.pendingSwal.push(pending);
    } else {
      this.__swal.apply(null, pending.args);
      this.currentSwal = pending;
      if (!this.swalFirstCalled) {
        $('.sweet-alert').prepend('<span class="other-messages"></span>');
        this.swalFirstCalled = true;
      }
    }
    this.refreshPendingText();
    return pending.id;
  },

  onClosed: function() {
    this.isClosing = false;
    this.openNextSwal();
  },

  refreshPendingText: function() {
    if (this.showPendingMessage) {
      if (this.pendingSwal.length === 0) {
        $('.other-messages').text('');
      } else {
        $('.other-messages').text(this.pendingSwal.length + ' unread alerts');
      }
    }
  },

  close: function(id) {
    if (id === undefined || (this.currentSwal && this.currentSwal.id == id)) {
      this.__swal.close();
    } else if (id !== undefined && this.pendingSwal.length > 0) {
      var indexOfSwalToClose;
      for (var i = 0; i < this.pendingSwal.length; i++) {
        if (this.pendingSwal[i].id == id) {
          indexOfSwalToClose = i;
          break;
        }
      }
      if (!(indexOfSwalToClose === undefined)) {
        this.pendingSwal.splice(indexOfSwalToClose, 1);
        this.refreshPendingText();
      }
    }
  },

  openNextSwal: function() {
    var service = this;
    if (service.pendingSwal.length > 0) {
      var pending = service.pendingSwal.shift();
      service._swalWithId(pending);
    }
  },

  isSwalOpen: function() {
    return this.currentSwal != null && this.currentSwal != undefined;
  },

  closeAndFireCallback: function(id, opts) {
    this.close(id);
    if (this.currentSwal.args && this.currentSwal.args.length > 1 && typeof this.currentSwal.args[1] == 'function') {
      // Currently, programatically closing the swal doesn't invoke the callback.
      var callback = this.currentSwal.args[1];
      callback(opts);
    }
  },

  initialize: function() {
    var service = this;
    var originalClose = this.__swal.close;
    this.__swal.close = function() {
      service.isClosing = true;
      originalClose();
      service.currentSwal = null;
      setTimeout(function() {
        service.onClosed();
      }, 400);
    };
  }
}

قم بإحضار هذا الرمز بأي طريقة تريدها بعد sweetalert - إذا كنت تستخدم المتصفح ، فما عليك سوى إضافة

 module.exports = SwalSevice;

في الجزء السفلي من الملف.

التهيئة

بمجرد أن تكون على الصفحة ، قم بتهيئة الخدمة:

var swalService = new SwalService();

ملاحظة: لم يتم اختباره مع مثيلات متعددة في نفس الصفحة. بالنسبة لمعظم الاستخدامات ، فإن المفرد هو ما تريده على أي حال.

إنشاء كالمعتاد

لإنشاء تنبيه لطيف ، استخدم طريقة swal للخدمة تمامًا كما لو كنت تستخدم طريقة swal الأصلية من sweetalert.

var handleId = swalService.swal('My Title', 'My message', 'info');
//or
var handleId = swalService.swal({title: 'My Title', text: 'My message', type: 'info'}, function(args) { ... });

انطلق وجربها عن طريق نسخ رمز الخدمة في وحدة التحكم على http://t4t5.github.io/sweetalert/
ولكن الآن ، إذا أطلقت طائرًا آخر بعد ذلك ، فبدلاً من تجاوزه ، سيكون الطائر الجديد معلقًا وستظهر رسالة.

قريب

يمكنك إغلاق swal الحالي من خلال واجهة المستخدم أو بشكل برمجي باستخدام swalService.close() . سيغلق swal الحالي ويفتح swal التالي بعد تأخير قصير (400ms) للرسوم المتحركة للإغلاق حتى النهاية. نظرًا لأن طريقة swal's swalService تُرجع مقبض معرف فريدًا ، يمكنك إغلاق swals محددة (وليس فقط الحالية) باستخدام swalService.close(swalHandleId) حتى إذا كان swal إلى الهدف معلقًا. يعد هذا مفيدًا أيضًا إذا كان لديك swal لا تريد أن يغلقه المستخدم كمؤشر على التحميل / المعلق الذي لا يحتوي على زر إغلاق ومع ذلك يمكن للمطور إغلاقه برمجيًا.

يرجى ملاحظة أنه عندما يكون لديك تنبيه مضاف إلى رد نداء يجب استدعاؤه عند الإغلاق ، فسيتم استدعاء رد النداء هذا تلقائيًا إذا بدأ المستخدم الإغلاق. ولكن إذا كنت ترغب في استدعاء رد الاتصال هذا أثناء إغلاق التنبيه برمجيًا ، فاتصل بـ:

swalService.closeAndFireCallback(id, opts)
// opts will be passed to the callback
// id is an optional identifier for the targeted alert. Defaults to current swal

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

مفتوح

تحتوي الخدمة أيضًا على المزيد من واجهة برمجة التطبيقات. يمكنك الاتصال بـ swalService.isSwalOpen() لمعرفة ما إذا كان هناك صندوق مفتوح حاليًا.

رسالة تنبيه معلقة

ستظهر رسالة حول عدد الطوابير المعلقة على الطائر الحالي أثناء انتظارهم. يمكنك نمط هذا عن طريق إضافة css التي تستهدف مدى مع فئة "رسائل أخرى".

.other-messages {
  color: red;
}

يمكنك أيضًا إيقاف تشغيل الرسائل المعلقة تمامًا عن طريق بدء الخدمة باستخدام:

var swalService = new SwalService({showPendingMessage: false})

من الواضح أن الحالة التي لا تدعمها هذه الخدمة هي i18n (جلسات استماع متعددة اللغات) ، سيتعين عليك تجاوز طريقة refreshPendingText() لذلك.

المصيد

إذا لم تقم بإنشاء swal بشكل صحيح ، مثل العنوان المفقود على سبيل المثال ، فستظل swalService تعتقد أن هناك تنبيهًا مفتوحًا على الرغم من أن مكتبة swal الأساسية لم تنشئه مطلقًا. كن حذرًا لإنشاء تنبيهات لك بشكل كامل.

kentmw شكرا جزيلا. تم إصلاح مشكلتي المتمثلة في الحاجة إلى تقديم تنبيه تلو الآخر.

لا يبدو أنه يعمل إذا حاولت ربط طريقتين ، كل منهما تتطلب من المستخدم النقر فوق "موافق" للمتابعة (وليس "إلغاء") - يتم عرض الضرب الثاني ، ولكن يتم إغلاقه على الفور

QuakePhil هل تمانع في نشر دعوات swalService.swal المتسلسلة؟

في الواقع ، لقد جعلته يعمل من خلال تداخل swal الثاني في رد الاتصال الأول ، وضبط closeOnConfirm إلى false في الأول ... (هذا الحل يعمل دون الحاجة إلى swalservice ، باستخدام swal2)

أصبح الرمز جافًا بعض الشيء ، بسبب متطلبات التداخل (وبالتالي لا يمكنني فقط فتح swal جديد في رد الاتصال ، يجب أن يكون رد الاتصال نفسه مكالمة مباشرة إلى swal ، أو ربما هناك طريقة للحصول على دالة وسيطة بين اثنين من swals ؛ أنا فقط لم أحسبها)

kentmw أنت رجل رائع !! شكرا جزيلا!!

غلافك أنقذ مؤخرتي. بعض الملاحظات. كما ذكر QuakePhil ، هناك مشكلة إذا كانت هناك تنبيهات متعددة في قائمة الانتظار ، كل منها يحتوي على ردود متداخلة للتأكيد / الإلغاء.

من أجل التعامل مع هذا ، أقوم بإغلاق swal الأم باستخدام المعرف فورًا بعد إنشاء الطفل. ومن أجل إقران سيناريو الوالد (السؤال) - الطفل (الاستجابة) ، قمت بإجراء تعديل طفيف في الغلاف لإلحاق جميع swals الجديدة في بداية المصفوفة / قائمة الانتظار وليس في النهاية.

هذا يعمل مع الطلبات الفردية أيضًا. لذلك ، ضع في اعتبارك السيناريو التالي لتوضيح كيفية إنشاء التنبيهات:

ID: 1, NAME: swallQA, CONTENT: Would you like to delete this file A? (Confirm/Cancel)
ID: 2, NAME: swallQB, CONTENT: Would you like to delete this file B? (Confirm/Cancel)
ID: 3, NAME: swallCA, CONTENT: Confirmed - delete A
ID: 4, NAME: swallCB, CONTENT: Cancelled - won't delete B

وإليك كيفية عرض التنبيهات للمستخدم:

ID: 1, NAME: swallQA, CONTENT: Would you like to delete this file A? (Confirm/Cancel)
ID: 3, NAME: swallCA, CONTENT: Confirmed - delete A
ID: 2, NAME: swallQB, CONTENT: Would you like to delete this file B? (Confirm/Cancel)
ID: 4, NAME: swallCB, CONTENT: Cancelled - won't delete B

إذا كان لديك أي سؤال أخبرني.

مرة أخرى شكرًا جزيلاً يا رجل ، قام الغلاف بعمل رائع.

koullislp أنا سعيد لأنه كان مفيدًا :) هل تمانع في نشر

تضمين التغريدة

تم تغيير كلمة واحدة فقط في التعليمات البرمجية الخاصة بك:

<       this.pendingSwal.push(pending);
---
>       this.pendingSwal.unshift(pending);

والطريقة التي أسميها بها:

var handleId = swalService.swal({
        title: "Are you sure?",
        text: "You are about to delete file"+filename,
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        closeOnConfirm: false
    }, function(isConfirm) {
        if (isConfirm) {
            sendRequest("POST", "", "delete", function(actionResult) {
                var handleSecondId = swalService.swal({
                    title: "Result", 
                    text: "deleted!"
                });
                swalService.closeAndFireCallback(handleId);
            }
        }
    });

هل من فرصة أن تساعدوني يا رفاق في تصور هذا باستخدام الوعود؟ لقد كنت أستخدم هذا مع https://github.com/limonte/sweetalert2 ، لكن المؤلف يشعر أن قائمة انتظار التنبيه "غير مرغوب فيها" (https://github.com/limonte/sweetalert2/issues/125). ومع ذلك ، فهو حل مثالي لحالة الاستخدام الخاصة بي ، وأنا لست على دراية كافية بالوعود لمعرفة كيفية إنشائها وحلها باستخدام شوكة Sweetalert والملحق الخاص بك. أفترض أنه يمكنني إضافة ثم (وظيفة () {}) ووضع حل () وإغلاق () هناك ، لكنني لا أعرف ما إذا كان ذلك سيعمل بالفعل. مرة أخرى ، لست على دراية بالوعود بعد.

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

يدعم SweetAlert2 قائمة انتظار الوسائط: https://sweetalert2.github.io/#chaining -modals

شكرا جزيلا يا صاح ، أنت رائع!

@ kentmw أن كود swalservice مذهل ، شكرًا جزيلاً لك (أعرف أن swal2.0 يصلح هذا ولكنني أبقى عمدًا مع 1.0 لأنني أجده أبسط وأجمل في الاستخدام ، ولديه أيضًا بعض الميزات التي تمت إزالتها في 2.0 )