pageflow 15.2.0 → 15.5.0

data/{packages/pageflow → package}/package.json

@@ -13,6 +13,7 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^23.0.4",
     "jest": "^24.9.0",
+    "jest-css-modules-processor": "^0.0.9",
     "jest-jquery-matchers": "^2.1.0",
     "jest-sinon": "^1.0.0",
     "sinon": "^7.5.0"
@@ -22,6 +23,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "backbone-events-standalone": "^0.2.7",
+    "classlist.js": "^1.1.20150312",
     "core-js": "^3.4.1",
     "i18n-js": "^3.5.1"
   }

data/{packages/pageflow → package}/testHelpers.js

@@ -249,15 +249,6 @@ var ColorInput = Base.extend({
   }
 });
 
-var SelectInput = Base.extend({
-  selector: 'select',
-  values: function values() {
-    return this.$el.find('option').map(function () {
-      return $(this).attr('value');
-    }).get();
-  }
-});
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -273,9 +264,81 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+var Base$1 = Base.extend({
+  selector: '.input'
+});
+
+Base$1.findByPropertyName = function (propertyName, options) {
+  return this.findBy(function (el) {
+    return el.data('inputPropertyName') === propertyName;
+  }, _objectSpread2({
+    predicateName: "input property name '".concat(propertyName, "'")
+  }, options));
+};
+
+var RadioButtonGroupInput = Base$1.extend({
+  values: function values() {
+    return this.$el.find('input').map(function () {
+      return $(this).attr('value');
+    }).get();
+  },
+  enabledValues: function enabledValues() {
+    return this.$el.find('input:not([disabled])').map(function () {
+      return $(this).attr('value');
+    }).get();
+  }
+});
+
+var SelectInput = Base$1.extend({
+  value: function value() {
+    return this.$el.find('select').val();
+  },
+  values: function values() {
+    return this.$el.find('option').map(function () {
+      return $(this).attr('value');
+    }).get();
+  },
+  enabledValues: function enabledValues() {
+    return this.$el.find('option:not([disabled])').map(function () {
+      return $(this).attr('value');
+    }).get();
+  }
+});
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * Build editor Backbone models for tests.
  */
@@ -314,7 +377,7 @@ var factories = {
 
     ensureFileTypes(options);
     ensureFilesCollections(options);
-    var entry = new model(_objectSpread({
+    var entry = new model(_objectSpread2({
       id: 1
     }, attributes), _.extend({
       storylines: new Backbone.Collection(),
@@ -551,6 +614,44 @@ function ensureFilesCollections(options) {
   }
 }
 
+var state = window.pageflow || {};
+
+/**
+ * Setup global state for testing Backbone editro components.
+ *
+ * For some editor components like (some views or models) it's easier
+ * to depend on the global mutable state (available via the `$state`
+ * module alias) instead of injecting dependencies. This helper can be
+ * used to test these components in isolation.
+ *
+ * @param {Object} mapping -
+ *   Properties to set on the global state. Functions as values will
+ *   be evaluated and the return value will be assigned instead.
+ */
+
+var setupGlobals = function setupGlobals(mapping) {
+  var globalsBackup;
+  beforeEach(function () {
+    if (globalsBackup) {
+      throw new Error('There can only be one setupGlobals call per test.');
+    }
+
+    globalsBackup = {};
+
+    _.each(mapping, function (value, key) {
+      globalsBackup[key] = state[key];
+      state[key] = typeof value === 'function' ? value.call(this) : value;
+    });
+  });
+  afterEach(function () {
+    _.each(mapping, function (_, key) {
+      state[key] = globalsBackup[key];
+    });
+
+    globalsBackup = null;
+  });
+};
+
 /**
  * Define translations to use in tests.
  *
@@ -628,4 +729,4 @@ function keysWithDotsToNestedObjects(translations) {
   }, {});
 }
 
-export { ColorInput, ConfigurationEditor, ConfigurationEditorTab, DropDownButton, FileMetaDataTable, FileStageItem, FileThumbnail, ReferenceInput, SelectInput, StaticThumbnail, Table, Tabs, ThemeItem, factories, useFakeTranslations };
+export { ColorInput, ConfigurationEditor, ConfigurationEditorTab, DropDownButton, FileMetaDataTable, FileStageItem, FileThumbnail, RadioButtonGroupInput, ReferenceInput, SelectInput, StaticThumbnail, Table, Tabs, ThemeItem, factories, setupGlobals, useFakeTranslations };

data/{packages/pageflow → package}/ui.js

@@ -155,10 +155,7 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
   var _arr = [];
   var _n = true;
   var _d = false;
@@ -184,12 +181,31 @@ function _iterableToArrayLimit(arr, i) {
   return _arr;
 }
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
 function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
 /**
@@ -271,7 +287,7 @@ function ui(styles) {
  *         <button class=${styles.addButton}></button>
  *       `,
  *
- *       events: cssModulesUtils.ui(styles, {
+ *       events: cssModulesUtils.events(styles, {
  *         'click addButton': () => console.log('clicked add button');
  *       })
  *     });
@@ -1006,10 +1022,14 @@ var TooltipView = Marionette.ItemView.extend({
       this.ui.label.text(text);
       this.$el.toggleClass('align_bottom_right', options.align === 'bottom right');
       this.$el.toggleClass('align_bottom_left', options.align === 'bottom left');
+      this.$el.toggleClass('align_top_center', options.align === 'top center');
 
       if (options.align === 'bottom right' || options.align === 'bottom left') {
         offsetTop = 10;
         offsetLeft = 0;
+      } else if (options.align === 'top center') {
+        offsetTop = -10;
+        offsetLeft = 0;
       } else {
         offsetTop = -17;
         offsetLeft = 10;
@@ -1117,13 +1137,30 @@ var TooltipView = Marionette.ItemView.extend({
  *   A text that will be appended to the translation based inline
  *   text.
  *
- * @param {boolean} [options.disabled]
- *   Render input as disabled.
+ * @param {string|string[]} [options.disabledBinding]
+ *   Name of an attribute to control whether the input is disabled. If
+ *   the `disabled` and `disabledBinding` options are not set,
+ *   input will be disabled whenever this attribute has a truthy value.
+ *   When multiple attribute names are passed, the function passed to
+ *   the `disabled` option will receive an array of values in the same
+ *   order.
+ *
+ * @param {function|boolean} [options.disabled]
+ *   Render input as disabled. A Function taking the value of the
+ *  `disabledBinding` attribute as parameter. Input will be disabled
+ *  only if function returns `true`.
+ *
+ * @param {any} [options.disabledBindingValue]
+ *   Input will be disabled whenever the value of the `disabledBinding`
+ *   attribute equals the value of this option.
  *
- * @param {string} [options.visibleBinding]
+ * @param {string|string[]} [options.visibleBinding]
  *   Name of an attribute to control whether the input is visible. If
  *   the `visible` and `visibleBindingValue` options are not set,
  *   input will be visible whenever this attribute has a truthy value.
+ *   When multiple attribute names are passed, the function passed to
+ *   the `visible` option will receive an array of values in the same
+ *   order.
  *
  * @param {function|boolean} [options.visible]
  *   A Function taking the value of the `visibleBinding` attribute as
@@ -1178,15 +1215,10 @@ var inputView = {
     this.$el.data('labelText', this.labelText());
     this.$el.data('inlineHelpText', this.inlineHelpText());
     this.ui.labelText.text(this.labelText());
-    this.ui.inlineHelp.html(this.inlineHelpText());
-
-    if (!this.inlineHelpText()) {
-      this.ui.inlineHelp.hide();
-    }
-
+    this.updateInlineHelp();
     this.setLabelFor();
-    this.updateDisabled();
-    this.setupVisibleBinding();
+    this.setupAttributeBinding('disabled', this.updateDisabled);
+    this.setupAttributeBinding('visible', this.updateVisible);
   },
 
   /**
@@ -1201,6 +1233,13 @@ var inputView = {
       fallbackPrefix: 'activerecord.attributes'
     }));
   },
+  updateInlineHelp: function updateInlineHelp() {
+    this.ui.inlineHelp.html(this.inlineHelpText());
+
+    if (!this.inlineHelpText()) {
+      this.ui.inlineHelp.hide();
+    }
+  },
 
   /**
    * The inline help text for the form field.
@@ -1211,7 +1250,7 @@ var inputView = {
       fallbackPrefix: 'pageflow.ui.inline_help'
     });
 
-    if (this.options.disabled) {
+    if (this.isDisabled()) {
       keys = translationKeysWithSuffix(keys, 'disabled');
     }
 
@@ -1227,40 +1266,61 @@ var inputView = {
       this.ui.label.attr('for', id);
     }
   },
+  isDisabled: function isDisabled() {
+    return this.getAttributeBoundOption('disabled');
+  },
   updateDisabled: function updateDisabled() {
+    this.updateInlineHelp();
+
     if (this.ui.input) {
       this.updateDisabledAttribute(this.ui.input);
     }
   },
   updateDisabledAttribute: function updateDisabledAttribute(element) {
-    if (this.options.disabled) {
+    if (this.isDisabled()) {
       element.attr('disabled', true);
     } else {
       element.removeAttr('disabled');
     }
   },
-  setupVisibleBinding: function setupVisibleBinding() {
+  updateVisible: function updateVisible() {
+    this.$el.toggleClass('input-hidden_via_binding', this.getAttributeBoundOption('visible') === false);
+  },
+  setupAttributeBinding: function setupAttributeBinding(optionName, updateMethod) {
+    var _this = this;
+
+    var binding = this.options["".concat(optionName, "Binding")];
     var view = this;
 
-    if (this.options.visibleBinding) {
-      this.listenTo(this.model, 'change:' + this.options.visibleBinding, updateVisible);
-      updateVisible(this.model, this.model.get(this.options.visibleBinding));
+    if (binding) {
+      _.flatten([binding]).forEach(function (attribute) {
+        _this.listenTo(_this.model, 'change:' + attribute, update);
+      });
     }
 
-    function updateVisible(model, value) {
-      view.$el.toggleClass('input-hidden_via_binding', !isVisible(value));
+    update();
+
+    function update() {
+      updateMethod.call(view, view.getAttributeBoundOption(optionName));
     }
+  },
+  getAttributeBoundOption: function getAttributeBoundOption(optionName) {
+    var _this2 = this;
 
-    function isVisible(value) {
-      if ('visibleBindingValue' in view.options) {
-        return value === view.options.visibleBindingValue;
-      } else if (typeof view.options.visible === 'function') {
-        return !!view.options.visible(value);
-      } else if ('visible' in view.options) {
-        return !!view.options.visible;
-      } else {
-        return !!value;
-      }
+    var binding = this.options["".concat(optionName, "Binding")];
+    var bindingValueOptionName = "".concat(optionName, "BindingValue");
+    var value = Array.isArray(binding) ? binding.map(function (attribute) {
+      return _this2.model.get(attribute);
+    }) : this.model.get(binding);
+
+    if (bindingValueOptionName in this.options) {
+      return value === this.options[bindingValueOptionName];
+    } else if (typeof this.options[optionName] === 'function') {
+      return !!this.options[optionName](value);
+    } else if (optionName in this.options) {
+      return !!this.options[optionName];
+    } else if (binding) {
+      return !!value;
     }
   }
 };
@@ -1411,11 +1471,14 @@ var inputWithPlaceholderText = {
       this.listenTo(this.model, 'change:' + this.options.placeholderBinding, this.updatePlaceholder);
     }
   },
+  updateDisabled: function updateDisabled() {
+    this.updatePlaceholder();
+  },
   updatePlaceholder: function updatePlaceholder() {
     this.ui.input.attr('placeholder', this.placeholderText());
   },
   placeholderText: function placeholderText() {
-    if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
+    if (!this.isDisabled() || !this.options.hidePlaceholderIfDisabled) {
       if (this.options.placeholder) {
         if (typeof this.options.placeholder == 'function') {
           return this.options.placeholder(this.model);
@@ -1426,6 +1489,8 @@ var inputWithPlaceholderText = {
         return this.placeholderModelValue();
       }
     }
+
+    return '';
   },
   placeholderModelValue: function placeholderModelValue() {
     return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
@@ -1578,12 +1643,22 @@ var ColorInputView = Marionette.ItemView.extend({
     this.updateSettings();
   },
   updateSettings: function updateSettings() {
+    this.resetSwatchesInStoredSettings();
     this.ui.input.minicolors('settings', {
       defaultValue: this.defaultValue(),
       swatches: this.getSwatches()
     });
     this.load();
   },
+  // see https://github.com/claviska/jquery-minicolors/issues/287
+  resetSwatchesInStoredSettings: function resetSwatchesInStoredSettings() {
+    var settings = this.ui.input.data('minicolors-settings');
+
+    if (settings) {
+      delete settings.swatches;
+      this.ui.input.data('minicolors-settings', settings);
+    }
+  },
   load: function load() {
     this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
     this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
@@ -1689,6 +1764,10 @@ return __p
  *   value of the `placeholderModel` occurs whenever the attribute is
  *   blank.
  *
+ * @param {function} [options.optionDisabled]
+ *   Receives value and has to return boolean indicating whether
+ *   option is disabled.
+ *
  * @class
  */
 
@@ -1791,6 +1870,10 @@ var SelectInputView = Marionette.ItemView.extend({
       option.value = value;
       option.text = this.options.texts[index];
 
+      if (this.options.optionDisabled && this.options.optionDisabled(value)) {
+        option.setAttribute('disabled', true);
+      }
+
       if (group) {
         option.setAttribute('data-group', group);
         this.findOrCreateOptGroup(group).append(option);
@@ -1815,10 +1898,10 @@ var SelectInputView = Marionette.ItemView.extend({
     if (!this.isClosed) {
       var value = this.model.get(this.options.propertyName);
 
-      if (this.model.has(this.options.propertyName) && this.ui.select.find('option[value="' + value + '"]').length) {
+      if (this.model.has(this.options.propertyName) && this.ui.select.find('option[value="' + value + '"]:not([disabled])').length) {
         this.ui.select.val(value);
       } else {
-        this.ui.select.val(this.ui.select.find('option:first').val());
+        this.ui.select.val(this.ui.select.find('option:not([disabled]):first').val());
       }
     }
   }
@@ -1947,7 +2030,7 @@ __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></spa
 ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab') )) == null ? '' : __t) +
 '\n        </label>\n        <span class="inline_help">\n          ' +
 ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab_help') )) == null ? '' : __t) +
-'\n        </span>\n      </div>\n    </div>\n    <div class="fragment_link_panel">\n      <!-- LinkInputView is inserted here -->\n    </div>\n\n    <!-- wysihtml5 does not handle hidden fields correctly -->\n    <div class="internal">\n      <input type="text" data-wysihtml5-dialog-field="href" class="current_url" value="http://">\n      <input type="text" data-wysihtml5-dialog-field="target" class="current_target" value="_blank">\n    </div>\n\n    <a class="button" data-wysihtml5-dialog-action="save">\n      ' +
+'\n        </span>\n      </div>\n    </div>\n    <div class="fragment_link_panel">\n      <!-- LinkInputView is inserted here -->\n    </div>\n\n    <!-- wysihtml5 does not handle hidden fields correctly -->\n    <div class="internal">\n      <input type="text" data-wysihtml5-dialog-field="href" class="current_url" value="">\n      <input type="text" data-wysihtml5-dialog-field="target" class="current_target" value="_blank">\n    </div>\n\n    <a class="button" data-wysihtml5-dialog-action="save">\n      ' +
 ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.save') )) == null ? '' : __t) +
 '\n    </a>\n    <a class="button" data-wysihtml5-dialog-action="cancel">\n      ' +
 ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.cancel') )) == null ? '' : __t) +
@@ -2094,7 +2177,7 @@ var TextAreaInputView = Marionette.ItemView.extend({
       var currentUrl = this.ui.urlInput.val();
 
       if (currentUrl.startsWith('#')) {
-        this.ui.displayUrlInput.val('http://');
+        this.ui.displayUrlInput.val('');
         this.ui.openInNewTabCheckBox.prop('checked', true);
       } else {
         this.ui.displayUrlInput.val(currentUrl);
@@ -2160,6 +2243,21 @@ var TextAreaInputView = Marionette.ItemView.extend({
   }
 });
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function template$9(data) {
 var __p = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" />\n<div class="validation"></div>\n';
@@ -2202,24 +2300,32 @@ var UrlInputView = Marionette.Layout.extend(
     this.validate();
   },
   onChange: function onChange() {
-    var view = this;
-    this.saveDisplayProperty();
-    this.validate().done(function () {
-      view.save();
+    var _this = this;
+
+    this.validate().then(function () {
+      return _this.save();
+    }, function () {
+      return _this.saveDisplayProperty();
     });
   },
   saveDisplayProperty: function saveDisplayProperty() {
+    this.model.unset(this.options.propertyName, {
+      silent: true
+    });
     this.model.set(this.options.displayPropertyName, this.ui.input.val());
-    this.model.unset(this.options.propertyName);
   },
   save: function save() {
-    var view = this;
-    $.when(this.transformPropertyValue(this.ui.input.val())).then(function (value) {
-      view.model.set(view.options.propertyName, value);
+    var _this2 = this;
+
+    var value = this.ui.input.val();
+    $.when(this.transformPropertyValue(value)).then(function (transformedValue) {
+      var _this2$model$set;
+
+      _this2.model.set((_this2$model$set = {}, _defineProperty(_this2$model$set, _this2.options.displayPropertyName, value), _defineProperty(_this2$model$set, _this2.options.propertyName, transformedValue), _this2$model$set));
     });
   },
   load: function load() {
-    this.ui.input.val(this.model.get(this.options.displayPropertyName));
+    this.ui.input.val(this.model.has(this.options.displayPropertyName) ? this.model.get(this.options.displayPropertyName) : this.model.get(this.options.propertyName));
     this.onLoad();
   },
 
@@ -2428,6 +2534,15 @@ var SliderInputView = Marionette.ItemView.extend({
     });
     this.load();
   },
+  updateDisabled: function updateDisabled(disabled) {
+    this.$el.toggleClass('disabled', !!disabled);
+
+    if (disabled) {
+      this.ui.widget.slider('disable');
+    } else {
+      this.ui.widget.slider('enable');
+    }
+  },
   save: function save() {
     var value = this.ui.widget.slider('option', 'value');
     var unit = 'unit' in this.options ? this.options.unit : '%';
@@ -2552,8 +2667,11 @@ var CheckBoxInputView = Marionette.ItemView.extend({
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
+  updateDisabled: function updateDisabled() {
+    this.load();
+  },
   save: function save() {
-    if (!this.options.disabled) {
+    if (!this.isDisabled()) {
       this.model.set(this.options.propertyName, this.ui.input.is(':checked'));
     }
   },
@@ -2563,7 +2681,7 @@ var CheckBoxInputView = Marionette.ItemView.extend({
     }
   },
   displayValue: function displayValue() {
-    if (this.options.disabled && this.options.displayUncheckedIfDisabled) {
+    if (this.isDisabled() && this.options.displayUncheckedIfDisabled) {
       return false;
     } else {
       return this.model.get(this.options.propertyName);
@@ -2796,8 +2914,8 @@ var tooltipContainer = {
   events: {
     'mouseover [data-tooltip]': function mouseoverDataTooltip(event) {
       if (!this.tooltip.visible) {
-        var target = $(event.target);
-        var key = target.data('tooltip');
+        var target = $(event.currentTarget);
+        var key = target.attr('data-tooltip');
         var position;
 
         if (target.data('tooltipAlign') === 'bottom left') {
@@ -2810,6 +2928,11 @@ var tooltipContainer = {
             left: target.position().left + target.outerWidth(),
             top: target.position().top + target.outerHeight()
           };
+        } else if (target.data('tooltipAlign') === 'top center') {
+          position = {
+            left: target.position().left + target.outerWidth() / 2,
+            top: target.position().top + 2
+          };
         } else {
           position = {
             left: target.position().left + target.outerWidth(),
@@ -2822,7 +2945,7 @@ var tooltipContainer = {
         });
       }
     },
-    'mouseout [data-tooltip]': function mouseoutDataTooltip() {
+    'mouseleave [data-tooltip]': function mouseleaveDataTooltip() {
       this.tooltip.hide();
     }
   },