vex2-dialog - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

dist/vex2.dialog.js

 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vexDialog = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+
+/**
+ * Expose `parse`.
+ */
+
+module.exports = parse;
+
+/**
+ * Tests for browser support.
+ */
+
+var innerHTMLBug = false;
+var bugTestDiv;
+if (typeof document !== 'undefined') {
+  bugTestDiv = document.createElement('div');
+  // Setup
+  bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+  // Make sure that link elements get serialized correctly by innerHTML
+  // This requires a wrapper element in IE
+  innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+  bugTestDiv = undefined;
+}
+
+/**
+ * Wrap map from jquery.
+ */
+
+var map = {
+  legend: [1, '<fieldset>', '</fieldset>'],
+  tr: [2, '<table><tbody>', '</tbody></table>'],
+  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+  // for script/link/style tags to work in IE6-8, you have to wrap
+  // in a div with a non-whitespace character in front, ha!
+  _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+};
+
+map.td =
+map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+
+map.option =
+map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+
+map.thead =
+map.tbody =
+map.colgroup =
+map.caption =
+map.tfoot = [1, '<table>', '</table>'];
+
+map.polyline =
+map.ellipse =
+map.polygon =
+map.circle =
+map.text =
+map.line =
+map.path =
+map.rect =
+map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+
+/**
+ * Parse `html` and return a DOM Node instance, which could be a TextNode,
+ * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+ * instance, depending on the contents of the `html` string.
+ *
+ * @param {String} html - HTML string to "domify"
+ * @param {Document} doc - The `document` instance to create the Node for
+ * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+ * @api private
+ */
+
+function parse(html, doc) {
+  if ('string' != typeof html) throw new TypeError('String expected');
+
+  // default to the global `document` object
+  if (!doc) doc = document;
+
+  // tag name
+  var m = /<([\w:]+)/.exec(html);
+  if (!m) return doc.createTextNode(html);
+
+  html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+
+  var tag = m[1];
+
+  // body support
+  if (tag == 'body') {
+    var el = doc.createElement('html');
+    el.innerHTML = html;
+    return el.removeChild(el.lastChild);
+  }
+
+  // wrap map
+  var wrap = map[tag] || map._default;
+  var depth = wrap[0];
+  var prefix = wrap[1];
+  var suffix = wrap[2];
+  var el = doc.createElement('div');
+  el.innerHTML = prefix + html + suffix;
+  while (depth--) el = el.lastChild;
+
+  // one element
+  if (el.firstChild == el.lastChild) {
+    return el.removeChild(el.firstChild);
+  }
+
+  // several elements
+  var fragment = doc.createDocumentFragment();
+  while (el.firstChild) {
+    fragment.appendChild(el.removeChild(el.firstChild));
+  }
+
+  return fragment;
+}
+
+},{}],2:[function(require,module,exports){
 // get successful control from form and assemble into object
@@ -263,24 +377,6 @@ // http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
 
-},{}],2:[function(require,module,exports){
+},{}],3:[function(require,module,exports){
+var domify = require('domify')
 var serialize = require('form-serialize')
 
-// Basic string to DOM function
-var stringToDom = function (str) {
-  var testEl = document.createElement('div')
-  testEl.innerHTML = str
-  if (testEl.childElementCount === 0) {
-    return document.createTextNode(str)
-  }
-  if (testEl.childElementCount === 1) {
-    return testEl.firstElementChild
-  }
-  var frag = document.createDocumentFragment()
-  // Appending the element from testEl will remove it from testEl.children,
-  // so we store the initial length of children and then always append the first child
-  for (var i = 0, len = testEl.children.length; i < len; i++) {
-    frag.appendChild(testEl.children[0])
-  }
-  return frag
-}
-
 var buildDialogForm = function (options) {
@@ -292,7 +388,7 @@ var form = document.createElement('form')
   message.classList.add('vex-dialog-message')
-  message.appendChild(options.message instanceof window.Node ? options.message : stringToDom(options.message))
+  message.appendChild(options.message instanceof window.Node ? options.message : domify(options.message))
 
   var input = document.createElement('div')
   input.classList.add('vex-dialog-input')
-  input.appendChild(options.input instanceof window.Node ? options.input : stringToDom(options.input))
+  input.appendChild(options.input instanceof window.Node ? options.input : domify(options.input))
 
@@ -336,9 +432,30 @@ form.appendChild(message)
 
-var dialog = function (vex) {
-  // dialog plugin
-  return {
+var escapeHtml = function (str) {
+  if (typeof str !== 'undefined') {
+    var div = document.createElement('div')
+    div.appendChild(document.createTextNode(str))
+    return div.innerHTML
+  } else {
+    return ''
+  }
+}
+
+var plugin = function (vex) {
+  // Define the API first
+  var dialog = {
+    // Plugin name
+    name: 'dialog',
+
     // Open
     open: function (opts) {
-      var options = Object.assign({}, dialog.defaultOptions, opts)
+      var options = Object.assign({}, this.defaultOptions, opts)
 
+      // `message` is unsafe internally, so translate
+      // safe default: HTML-escape the message before passing it through
+      if (options.unsafeMessage && !options.message) {
+        options.message = options.unsafeMessage
+      } else if (options.message) {
+        options.message = escapeHtml(options.message)
+      }
+
       // Build the form from the options
@@ -387,3 +504,3 @@ var form = options.content = buildDialogForm(options)
       }
-      options = Object.assign({}, dialog.defaultOptions, dialog.defaultAlertOptions, options)
+      options = Object.assign({}, this.defaultOptions, this.defaultAlertOptions, options)
       return this.open(options)
@@ -397,3 +514,3 @@ },
       }
-      options = Object.assign({}, dialog.defaultOptions, dialog.defaultConfirmOptions, options)
+      options = Object.assign({}, this.defaultOptions, this.defaultConfirmOptions, options)
       return this.open(options)
@@ -407,5 +524,8 @@ },
       }
-      options = Object.assign({}, dialog.defaultOptions, dialog.defaultPromptOptions, options)
-      options.message = '<label for="vex">' + options.label + '</label>'
-      options.input = '<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="' + options.placeholder + '" value="' + options.value + '" />'
+      var defaults = Object.assign({}, this.defaultOptions, this.defaultPromptOptions)
+      var dynamicDefaults = {
+        unsafeMessage: '<label for="vex">' + (escapeHtml(options.label) || defaults.label) + '</label>',
+        input: '<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="' + (options.placeholder || defaults.placeholder) + '" value="' + (options.value || defaults.value) + '" />'
+      }
+      options = Object.assign(defaults, dynamicDefaults, options)
       var callback = options.callback
@@ -419,67 +539,68 @@ options.callback = function (value) {
   }
-}
 
-dialog.buttons = {
-  YES: {
-    text: 'OK',
-    type: 'submit',
-    className: 'vex-dialog-button-primary',
-    click: function () {
-      this.value = true
-    }
-  },
+  // Now define any additional data that's not the direct dialog API
+  dialog.buttons = {
+    YES: {
+      text: 'OK',
+      type: 'submit',
+      className: 'vex-dialog-button-primary',
+      click: function () {
+        this.value = true
+      }
+    },
 
-  NO: {
-    text: 'Cancel',
-    type: 'button',
-    className: 'vex-dialog-button-secondary',
-    click: function () {
-      this.value = false
-      this.close()
+    NO: {
+      text: 'Cancel',
+      type: 'button',
+      className: 'vex-dialog-button-secondary',
+      click: function () {
+        this.value = false
+        this.close()
+      }
     }
   }
-}
 
-dialog.defaultOptions = {
-  callback: function () {},
-  afterOpen: function () {},
-  message: '',
-  input: '',
-  buttons: [
-    dialog.buttons.YES,
-    dialog.buttons.NO
-  ],
-  showCloseButton: false,
-  onSubmit: function (e) {
-    e.preventDefault()
-    if (this.options.input) {
-      this.value = serialize(this.form, { hash: true })
-    }
-    return this.close()
-  },
-  focusFirstInput: true
-}
+  dialog.defaultOptions = {
+    callback: function () {},
+    afterOpen: function () {},
+    message: '',
+    input: '',
+    buttons: [
+      dialog.buttons.YES,
+      dialog.buttons.NO
+    ],
+    showCloseButton: false,
+    onSubmit: function (e) {
+      e.preventDefault()
+      if (this.options.input) {
+        this.value = serialize(this.form, { hash: true })
+      }
+      return this.close()
+    },
+    focusFirstInput: true
+  }
 
-dialog.defaultAlertOptions = {
-  message: 'Alert',
-  buttons: [
-    dialog.buttons.YES
-  ]
-}
+  dialog.defaultAlertOptions = {
+    message: 'Alert',
+    buttons: [
+      dialog.buttons.YES
+    ]
+  }
 
-dialog.defaultPromptOptions = {
-  label: 'Prompt:',
-  placeholder: '',
-  value: ''
-}
+  dialog.defaultPromptOptions = {
+    label: 'Prompt:',
+    placeholder: '',
+    value: ''
+  }
 
-dialog.defaultConfirmOptions = {
-  message: 'Confirm'
+  dialog.defaultConfirmOptions = {
+    message: 'Confirm'
+  }
+
+  return dialog
 }
 
-dialog.pluginName = 'dialog'
+module.exports = plugin
 
-module.exports = dialog
-
-},{"form-serialize":1}]},{},[2])(2)
+},{"domify":1,"form-serialize":2}]},{},[3])(3)
 });

dist/vex2.dialog.min.js

@@ -1,2 +0,2 @@
-/*! vex2.dialog.min.js 2.0.1 */
-!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.vexDialog=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){function d(a,b){"object"!=typeof b?b={hash:!!b}:void 0===b.hash&&(b.hash=!0);for(var c=b.hash?{}:"",d=b.serializer||(b.hash?g:h),e=a&&a.elements?a.elements:[],f=Object.create(null),k=0;k<e.length;++k){var l=e[k];if((b.disabled||!l.disabled)&&l.name&&j.test(l.nodeName)&&!i.test(l.type)){var m=l.name,n=l.value;if("checkbox"!==l.type&&"radio"!==l.type||l.checked||(n=void 0),b.empty){if("checkbox"!==l.type||l.checked||(n=""),"radio"===l.type&&(f[l.name]||l.checked?l.checked&&(f[l.name]=!0):f[l.name]=!1),!n&&"radio"==l.type)continue}else if(!n)continue;if("select-multiple"!==l.type)c=d(c,m,n);else{n=[];for(var o=l.options,p=!1,q=0;q<o.length;++q){var r=o[q],s=b.empty&&!r.value,t=r.value||s;r.selected&&t&&(p=!0,c=b.hash&&"[]"!==m.slice(m.length-2)?d(c,m+"[]",r.value):d(c,m,r.value))}!p&&b.empty&&(c=d(c,m,""))}}}if(b.empty)for(var m in f)f[m]||(c=d(c,m,""));return c}function e(a){var b=[],c=/^([^\[\]]*)/,d=new RegExp(k),e=c.exec(a);for(e[1]&&b.push(e[1]);null!==(e=d.exec(a));)b.push(e[1]);return b}function f(a,b,c){if(0===b.length)return a=c;var d=b.shift(),e=d.match(/^\[(.+?)\]$/);if("[]"===d)return a=a||[],Array.isArray(a)?a.push(f(null,b,c)):(a._values=a._values||[],a._values.push(f(null,b,c))),a;if(e){var g=e[1],h=+g;isNaN(h)?(a=a||{},a[g]=f(a[g],b,c)):(a=a||[],a[h]=f(a[h],b,c))}else a[d]=f(a[d],b,c);return a}function g(a,b,c){var d=b.match(k);if(d){var g=e(b);f(a,g,c)}else{var h=a[b];h?(Array.isArray(h)||(a[b]=[h]),a[b].push(c)):a[b]=c}return a}function h(a,b,c){return c=c.replace(/(\r)?\n/g,"\r\n"),c=encodeURIComponent(c),c=c.replace(/%20/g,"+"),a+(a?"&":"")+encodeURIComponent(b)+"="+c}var i=/^(?:submit|button|image|reset|file)$/i,j=/^(?:input|select|textarea|keygen)/i,k=/(\[[^\[\]]*\])/g;b.exports=d},{}],2:[function(a,b,c){var d=a("form-serialize"),e=function(a){var b=document.createElement("div");if(b.innerHTML=a,0===b.childElementCount)return document.createTextNode(a);if(1===b.childElementCount)return b.firstElementChild;for(var c=document.createDocumentFragment(),d=0,e=b.children.length;d<e;d++)c.appendChild(b.children[0]);return c},f=function(a){var b=document.createElement("form");b.classList.add("vex-dialog-form");var c=document.createElement("div");c.classList.add("vex-dialog-message"),c.appendChild(a.message instanceof window.Node?a.message:e(a.message));var d=document.createElement("div");return d.classList.add("vex-dialog-input"),d.appendChild(a.input instanceof window.Node?a.input:e(a.input)),b.appendChild(c),b.appendChild(d),b},g=function(a){var b=document.createElement("div");b.classList.add("vex-dialog-buttons");for(var c=0;c<a.length;c++){var d=a[c],e=document.createElement("button");e.type=d.type,e.textContent=d.text,e.classList.add(d.className),e.classList.add("vex-dialog-button"),0===c?e.classList.add("vex-first"):c===a.length-1&&e.classList.add("vex-last"),function(a){e.addEventListener("click",function(b){a.click&&a.click.call(this,b)}.bind(this))}.bind(this)(d),b.appendChild(e)}return b},h=function(a){return{open:function(b){var c=Object.assign({},h.defaultOptions,b),d=c.content=f(c),e=a.open(c),i=c.beforeClose;if(e.options.beforeClose=function(){c.callback(this.value||!1),i&&i.call(this)}.bind(e),d.appendChild(g.call(e,c.buttons)),e.form=d,d.addEventListener("submit",c.onSubmit.bind(e)),c.focusFirstInput){var j=e.contentEl.querySelector("button, input, textarea");j&&j.focus()}return e},alert:function(a){return"string"==typeof a&&(a={message:a}),a=Object.assign({},h.defaultOptions,h.defaultAlertOptions,a),this.open(a)},confirm:function(a){if("string"==typeof a)throw new Error("dialog.confirm(options) requires options.callback.");return a=Object.assign({},h.defaultOptions,h.defaultConfirmOptions,a),this.open(a)},prompt:function(a){if("string"==typeof a)throw new Error("dialog.prompt(options) requires options.callback.");a=Object.assign({},h.defaultOptions,h.defaultPromptOptions,a),a.message='<label for="vex">'+a.label+"</label>",a.input='<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="'+a.placeholder+'" value="'+a.value+'" />';var b=a.callback;return a.callback=function(a){a=a[Object.keys(a)[0]],b(a)},this.open(a)}}};h.buttons={YES:{text:"OK",type:"submit",className:"vex-dialog-button-primary",click:function(){this.value=!0}},NO:{text:"Cancel",type:"button",className:"vex-dialog-button-secondary",click:function(){this.value=!1,this.close()}}},h.defaultOptions={callback:function(){},afterOpen:function(){},message:"",input:"",buttons:[h.buttons.YES,h.buttons.NO],showCloseButton:!1,onSubmit:function(a){return a.preventDefault(),this.options.input&&(this.value=d(this.form,{hash:!0})),this.close()},focusFirstInput:!0},h.defaultAlertOptions={message:"Alert",buttons:[h.buttons.YES]},h.defaultPromptOptions={label:"Prompt:",placeholder:"",value:""},h.defaultConfirmOptions={message:"Confirm"},h.pluginName="dialog",b.exports=h},{"form-serialize":1}]},{},[2])(2)});
+/*! vex2.dialog.min.js 3.0.0 */
+!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.vexDialog=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){function d(a,b){if("string"!=typeof a)throw new TypeError("String expected");b||(b=document);var c=/<([\w:]+)/.exec(a);if(!c)return b.createTextNode(a);a=a.replace(/^\s+|\s+$/g,"");var d=c[1];if("body"==d){var e=b.createElement("html");return e.innerHTML=a,e.removeChild(e.lastChild)}var f=g[d]||g._default,h=f[0],i=f[1],j=f[2],e=b.createElement("div");for(e.innerHTML=i+a+j;h--;)e=e.lastChild;if(e.firstChild==e.lastChild)return e.removeChild(e.firstChild);for(var k=b.createDocumentFragment();e.firstChild;)k.appendChild(e.removeChild(e.firstChild));return k}b.exports=d;var e,f=!1;"undefined"!=typeof document&&(e=document.createElement("div"),e.innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>',f=!e.getElementsByTagName("link").length,e=void 0);var g={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:f?[1,"X<div>","</div>"]:[0,"",""]};g.td=g.th=[3,"<table><tbody><tr>","</tr></tbody></table>"],g.option=g.optgroup=[1,'<select multiple="multiple">',"</select>"],g.thead=g.tbody=g.colgroup=g.caption=g.tfoot=[1,"<table>","</table>"],g.polyline=g.ellipse=g.polygon=g.circle=g.text=g.line=g.path=g.rect=g.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"]},{}],2:[function(a,b,c){function d(a,b){"object"!=typeof b?b={hash:!!b}:void 0===b.hash&&(b.hash=!0);for(var c=b.hash?{}:"",d=b.serializer||(b.hash?g:h),e=a&&a.elements?a.elements:[],f=Object.create(null),k=0;k<e.length;++k){var l=e[k];if((b.disabled||!l.disabled)&&l.name&&j.test(l.nodeName)&&!i.test(l.type)){var m=l.name,n=l.value;if("checkbox"!==l.type&&"radio"!==l.type||l.checked||(n=void 0),b.empty){if("checkbox"!==l.type||l.checked||(n=""),"radio"===l.type&&(f[l.name]||l.checked?l.checked&&(f[l.name]=!0):f[l.name]=!1),!n&&"radio"==l.type)continue}else if(!n)continue;if("select-multiple"!==l.type)c=d(c,m,n);else{n=[];for(var o=l.options,p=!1,q=0;q<o.length;++q){var r=o[q],s=b.empty&&!r.value,t=r.value||s;r.selected&&t&&(p=!0,c=b.hash&&"[]"!==m.slice(m.length-2)?d(c,m+"[]",r.value):d(c,m,r.value))}!p&&b.empty&&(c=d(c,m,""))}}}if(b.empty)for(var m in f)f[m]||(c=d(c,m,""));return c}function e(a){var b=[],c=/^([^\[\]]*)/,d=new RegExp(k),e=c.exec(a);for(e[1]&&b.push(e[1]);null!==(e=d.exec(a));)b.push(e[1]);return b}function f(a,b,c){if(0===b.length)return a=c;var d=b.shift(),e=d.match(/^\[(.+?)\]$/);if("[]"===d)return a=a||[],Array.isArray(a)?a.push(f(null,b,c)):(a._values=a._values||[],a._values.push(f(null,b,c))),a;if(e){var g=e[1],h=+g;isNaN(h)?(a=a||{},a[g]=f(a[g],b,c)):(a=a||[],a[h]=f(a[h],b,c))}else a[d]=f(a[d],b,c);return a}function g(a,b,c){var d=b.match(k);if(d){var g=e(b);f(a,g,c)}else{var h=a[b];h?(Array.isArray(h)||(a[b]=[h]),a[b].push(c)):a[b]=c}return a}function h(a,b,c){return c=c.replace(/(\r)?\n/g,"\r\n"),c=encodeURIComponent(c),c=c.replace(/%20/g,"+"),a+(a?"&":"")+encodeURIComponent(b)+"="+c}var i=/^(?:submit|button|image|reset|file)$/i,j=/^(?:input|select|textarea|keygen)/i,k=/(\[[^\[\]]*\])/g;b.exports=d},{}],3:[function(a,b,c){var d=a("domify"),e=a("form-serialize"),f=function(a){var b=document.createElement("form");b.classList.add("vex-dialog-form");var c=document.createElement("div");c.classList.add("vex-dialog-message"),c.appendChild(a.message instanceof window.Node?a.message:d(a.message));var e=document.createElement("div");return e.classList.add("vex-dialog-input"),e.appendChild(a.input instanceof window.Node?a.input:d(a.input)),b.appendChild(c),b.appendChild(e),b},g=function(a){var b=document.createElement("div");b.classList.add("vex-dialog-buttons");for(var c=0;c<a.length;c++){var d=a[c],e=document.createElement("button");e.type=d.type,e.textContent=d.text,e.classList.add(d.className),e.classList.add("vex-dialog-button"),0===c?e.classList.add("vex-first"):c===a.length-1&&e.classList.add("vex-last"),function(a){e.addEventListener("click",function(b){a.click&&a.click.call(this,b)}.bind(this))}.bind(this)(d),b.appendChild(e)}return b},h=function(a){if("undefined"!=typeof a){var b=document.createElement("div");return b.appendChild(document.createTextNode(a)),b.innerHTML}return""},i=function(a){var b={name:"dialog",open:function(b){var c=Object.assign({},this.defaultOptions,b);c.unsafeMessage&&!c.message?c.message=c.unsafeMessage:c.message&&(c.message=h(c.message));var d=c.content=f(c),e=a.open(c),i=c.beforeClose;if(e.options.beforeClose=function(){c.callback(this.value||!1),i&&i.call(this)}.bind(e),d.appendChild(g.call(e,c.buttons)),e.form=d,d.addEventListener("submit",c.onSubmit.bind(e)),c.focusFirstInput){var j=e.contentEl.querySelector("button, input, textarea");j&&j.focus()}return e},alert:function(a){return"string"==typeof a&&(a={message:a}),a=Object.assign({},this.defaultOptions,this.defaultAlertOptions,a),this.open(a)},confirm:function(a){if("string"==typeof a)throw new Error("dialog.confirm(options) requires options.callback.");return a=Object.assign({},this.defaultOptions,this.defaultConfirmOptions,a),this.open(a)},prompt:function(a){if("string"==typeof a)throw new Error("dialog.prompt(options) requires options.callback.");var b=Object.assign({},this.defaultOptions,this.defaultPromptOptions),c={unsafeMessage:'<label for="vex">'+(h(a.label)||b.label)+"</label>",input:'<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="'+(a.placeholder||b.placeholder)+'" value="'+(a.value||b.value)+'" />'};a=Object.assign(b,c,a);var d=a.callback;return a.callback=function(a){a=a[Object.keys(a)[0]],d(a)},this.open(a)}};return b.buttons={YES:{text:"OK",type:"submit",className:"vex-dialog-button-primary",click:function(){this.value=!0}},NO:{text:"Cancel",type:"button",className:"vex-dialog-button-secondary",click:function(){this.value=!1,this.close()}}},b.defaultOptions={callback:function(){},afterOpen:function(){},message:"",input:"",buttons:[b.buttons.YES,b.buttons.NO],showCloseButton:!1,onSubmit:function(a){return a.preventDefault(),this.options.input&&(this.value=e(this.form,{hash:!0})),this.close()},focusFirstInput:!0},b.defaultAlertOptions={message:"Alert",buttons:[b.buttons.YES]},b.defaultPromptOptions={label:"Prompt:",placeholder:"",value:""},b.defaultConfirmOptions={message:"Confirm"},b};b.exports=i},{domify:1,"form-serialize":2}]},{},[3])(3)});

package.json

 {
   "name": "vex2-dialog",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A vex2 plugin for drop-in alert, confirm, and prompt dialogs",
@@ -13,2 +13,3 @@ "author": "Brendan Batliner <[e-mail]>",
   "dependencies": {
+    "domify": "^1.4.0",
     "form-serialize": "latest"
@@ -15,0 +16,0 @@ },

README.md

@@ -1,7 +0,5 @@
-## vex2-dialog
+## vex-dialog
 
-A dialog plugin for [vex2](https://github.com/bbatliner/vex2). Drop-in replacement for the browser's `alert`, `confirm`, and `prompt`.
+A dialog plugin for [vex](https://github.com/bbatliner/vex2). Drop-in replacement for the browser's `alert`, `confirm`, and `prompt`.
 
-Documentation/examples coming soon...
-
 [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

src/vex2.dialog.js

@@ -0,22 +1,4 @@
+var domify = require('domify')
 var serialize = require('form-serialize')
 
-// Basic string to DOM function
-var stringToDom = function (str) {
-  var testEl = document.createElement('div')
-  testEl.innerHTML = str
-  if (testEl.childElementCount === 0) {
-    return document.createTextNode(str)
-  }
-  if (testEl.childElementCount === 1) {
-    return testEl.firstElementChild
-  }
-  var frag = document.createDocumentFragment()
-  // Appending the element from testEl will remove it from testEl.children,
-  // so we store the initial length of children and then always append the first child
-  for (var i = 0, len = testEl.children.length; i < len; i++) {
-    frag.appendChild(testEl.children[0])
-  }
-  return frag
-}
-
 var buildDialogForm = function (options) {
@@ -28,7 +10,7 @@ var form = document.createElement('form')
   message.classList.add('vex-dialog-message')
-  message.appendChild(options.message instanceof window.Node ? options.message : stringToDom(options.message))
+  message.appendChild(options.message instanceof window.Node ? options.message : domify(options.message))
 
   var input = document.createElement('div')
   input.classList.add('vex-dialog-input')
-  input.appendChild(options.input instanceof window.Node ? options.input : stringToDom(options.input))
+  input.appendChild(options.input instanceof window.Node ? options.input : domify(options.input))
 
@@ -72,9 +54,30 @@ form.appendChild(message)
 
-var dialog = function (vex) {
-  // dialog plugin
-  return {
+var escapeHtml = function (str) {
+  if (typeof str !== 'undefined') {
+    var div = document.createElement('div')
+    div.appendChild(document.createTextNode(str))
+    return div.innerHTML
+  } else {
+    return ''
+  }
+}
+
+var plugin = function (vex) {
+  // Define the API first
+  var dialog = {
+    // Plugin name
+    name: 'dialog',
+
     // Open
     open: function (opts) {
-      var options = Object.assign({}, dialog.defaultOptions, opts)
+      var options = Object.assign({}, this.defaultOptions, opts)
 
+      // `message` is unsafe internally, so translate
+      // safe default: HTML-escape the message before passing it through
+      if (options.unsafeMessage && !options.message) {
+        options.message = options.unsafeMessage
+      } else if (options.message) {
+        options.message = escapeHtml(options.message)
+      }
+
       // Build the form from the options
@@ -123,3 +126,3 @@ var form = options.content = buildDialogForm(options)
       }
-      options = Object.assign({}, dialog.defaultOptions, dialog.defaultAlertOptions, options)
+      options = Object.assign({}, this.defaultOptions, this.defaultAlertOptions, options)
       return this.open(options)
@@ -133,3 +136,3 @@ },
       }
-      options = Object.assign({}, dialog.defaultOptions, dialog.defaultConfirmOptions, options)
+      options = Object.assign({}, this.defaultOptions, this.defaultConfirmOptions, options)
       return this.open(options)
@@ -143,5 +146,8 @@ },
       }
-      options = Object.assign({}, dialog.defaultOptions, dialog.defaultPromptOptions, options)
-      options.message = '<label for="vex">' + options.label + '</label>'
-      options.input = '<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="' + options.placeholder + '" value="' + options.value + '" />'
+      var defaults = Object.assign({}, this.defaultOptions, this.defaultPromptOptions)
+      var dynamicDefaults = {
+        unsafeMessage: '<label for="vex">' + (escapeHtml(options.label) || defaults.label) + '</label>',
+        input: '<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="' + (options.placeholder || defaults.placeholder) + '" value="' + (options.value || defaults.value) + '" />'
+      }
+      options = Object.assign(defaults, dynamicDefaults, options)
       var callback = options.callback
@@ -155,64 +161,65 @@ options.callback = function (value) {
   }
-}
 
-dialog.buttons = {
-  YES: {
-    text: 'OK',
-    type: 'submit',
-    className: 'vex-dialog-button-primary',
-    click: function () {
-      this.value = true
-    }
-  },
+  // Now define any additional data that's not the direct dialog API
+  dialog.buttons = {
+    YES: {
+      text: 'OK',
+      type: 'submit',
+      className: 'vex-dialog-button-primary',
+      click: function () {
+        this.value = true
+      }
+    },
 
-  NO: {
-    text: 'Cancel',
-    type: 'button',
-    className: 'vex-dialog-button-secondary',
-    click: function () {
-      this.value = false
-      this.close()
+    NO: {
+      text: 'Cancel',
+      type: 'button',
+      className: 'vex-dialog-button-secondary',
+      click: function () {
+        this.value = false
+        this.close()
+      }
     }
   }
-}
 
-dialog.defaultOptions = {
-  callback: function () {},
-  afterOpen: function () {},
-  message: '',
-  input: '',
-  buttons: [
-    dialog.buttons.YES,
-    dialog.buttons.NO
-  ],
-  showCloseButton: false,
-  onSubmit: function (e) {
-    e.preventDefault()
-    if (this.options.input) {
-      this.value = serialize(this.form, { hash: true })
-    }
-    return this.close()
-  },
-  focusFirstInput: true
-}
+  dialog.defaultOptions = {
+    callback: function () {},
+    afterOpen: function () {},
+    message: '',
+    input: '',
+    buttons: [
+      dialog.buttons.YES,
+      dialog.buttons.NO
+    ],
+    showCloseButton: false,
+    onSubmit: function (e) {
+      e.preventDefault()
+      if (this.options.input) {
+        this.value = serialize(this.form, { hash: true })
+      }
+      return this.close()
+    },
+    focusFirstInput: true
+  }
 
-dialog.defaultAlertOptions = {
-  message: 'Alert',
-  buttons: [
-    dialog.buttons.YES
-  ]
-}
+  dialog.defaultAlertOptions = {
+    message: 'Alert',
+    buttons: [
+      dialog.buttons.YES
+    ]
+  }
 
-dialog.defaultPromptOptions = {
-  label: 'Prompt:',
-  placeholder: '',
-  value: ''
-}
+  dialog.defaultPromptOptions = {
+    label: 'Prompt:',
+    placeholder: '',
+    value: ''
+  }
 
-dialog.defaultConfirmOptions = {
-  message: 'Confirm'
+  dialog.defaultConfirmOptions = {
+    message: 'Confirm'
+  }
+
+  return dialog
 }
 
-dialog.pluginName = 'dialog'
-
-module.exports = dialog
+module.exports = plugin

No alert changes

Improved metrics

Total package byte prevSize

35128

increased by15.48%

Lines of code

720

increased by16.5%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

8

decreased by-11.11%

Number of lines in readme file

6

decreased by-25%

Dependency changes

• + Addeddomify@^1.4.0

• + Addeddomify@1.4.2(transitive)