v0.4.0

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.4.0
+- 201636a: added feature to use HTML Node as popper content. Use it defining `contentType: 'node'` and `content: yourHTMLNode` (thanks @rosskevin)
+- 9503e09: make sure to not add `="undefined"` when setting attributes (#39)
+- minor performance improvements
+
 ## v0.3.8
 - fixed problem with NPM release
 

build/popper.js

@@ -1,6 +1,6 @@
 /**
  * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 0.3.8
+ * @version 0.4.0
  * @license
  * Copyright (c) 2016 Federico Zivolo and contributors
  *
@@ -87,8 +87,8 @@
      * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper.
      * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it.
      * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string.
-     * @param {String} [popper.content=''] The content of the popper, it can be text or HTML, in case of HTML, enable `allowHtml`.
-     * @param {Boolean} [popper.allowHtml=false] If set to true, the `content` will be parsed as HTML.
+     * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`.
+     * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is.
      * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element.
      * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element.
      * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element.
@@ -174,6 +174,10 @@
             this._popper.setAttribute('x-placement', this._options.placement);
         }
 
+        // make sure to apply the popper position before any computation
+        this.state.position = this._getPosition(this._popper, this._reference);
+        setStyle(this._popper, { position: this.state.position});
+
         // fire the first update to position the popper in the right place
         this.update();
 
@@ -214,10 +218,6 @@
     Popper.prototype.update = function() {
         var data = { instance: this };
 
-        // make sure to apply the popper position before any computation
-        this.state.position = this._getPosition(this._popper, this._reference);
-        setStyle(this._popper, { position: this.state.position});
-
         // store placement inside the data object, modifiers will be able to edit `placement` if needed
         // and refer to _originalPlacement to know the original value
         data.placement = this._options.placement;
@@ -276,7 +276,7 @@
             attributes: [],
             parent: root.document.body,
             content: '',
-            allowHtml: false,
+            contentType: 'text',
             arrowTagName: 'div',
             arrowClassNames: [ 'popper__arrow' ],
             arrowAttributes: [ 'x-arrow']
@@ -288,7 +288,9 @@
         var popper = d.createElement(config.tagName);
         addClassNames(popper, config.classNames);
         addAttributes(popper, config.attributes);
-        if (config.allowHtml) {
+        if (config.contentType === 'node') {
+            popper.appendChild(config.content.jquery ? config.content[0] : config.content);
+        }else if (config.contentType === 'html') {
             popper.innerHTML = config.content;
         } else {
             popper.textContent = config.content;
@@ -352,7 +354,7 @@
          */
         function addAttributes(element, attributes) {
             attributes.forEach(function(attribute) {
-                element.setAttribute(attribute.split(':')[0], attribute.split(':')[1]);
+                element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || '');
             });
         }