CODEWITHSUNDEEP
javascriptsweetalertvis.jssweetalert2
Rami Sedhom
Rami Sedhom

Reputation: 759

Using SweetAlert2 with vis.js

To make items editable in vis.js, it uses callback which was okay with SweetAlert

I wanted to use SweetAlert2 to utilize its new features, however it is using Promise instead of callback and vis.js using callback!

Here is example code taken from http://visjs.org/examples/timeline/editing/editingItemsCallbacks.html:

Lines 47 to 57 and lines 129 to 137 where vis.js calling SweetAlert for prompt:

onAdd: function (item, callback) {
      prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
        if (value) {
          item.content = value;
          callback(item); // send back adjusted new item
        }
        else {
          callback(null); // cancel item creation
        }
      });
    },

function prettyPrompt(title, text, inputValue, callback) {
    swal({
      title: title,
      text: text,
      type: 'input',
      showCancelButton: true,
      inputValue: inputValue
    }, callback);
  }

So how to modify this to use SweetAlert2?

Upvotes: 2

Views: 300

Answers (1)

Limon Monte
Limon Monte

Reputation: 54389

Here you go:

var items = new vis.DataSet([
  {id: 1, content: 'item 1', start: new Date(2013, 3, 20)}
]);

var min = new Date(2013, 3, 1); // 1 april
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april

var container = document.getElementById('visualization');
var options = {
  editable: true,

  onAdd: function (item, callback) {
    swal({
      title: 'Add item', 
      text: 'Enter text content for new item:', 
      input: 'text', 
      inputValue: item.content
    }).then( function(result) {
      if (result.value) {
        item.content = result.value;
        callback(item); // send back adjusted new item
      }
    });
  }
};
var timeline = new vis.Timeline(container, items, options);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

Double-click to create a new item: 
<div id="visualization"></div>

Upvotes: 1

Related Questions