Merge pull request #487 from magento-vanilla/PR

[Vanilla] bugs fixes + stories

Gruntfile.js

@@ -15,6 +15,9 @@ module.exports = function (grunt) {
  [
  taskDir + '/mage-minify',
  taskDir + '/deploy',
+ taskDir + '/black-list-generator',
+ taskDir + '/clean-black-list',
+ taskDir + '/static',
  'time-grunt'
  ].forEach(function (task) {
  require(task)(grunt);

app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js

@@ -209,6 +209,10 @@ define(
  emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
  }
 
+ if (!emailValidationResult) {
+ $(loginFormSelector + ' input[name=username]').focus();
+ }
+
  if (this.isFormInline) {
  this.source.set('params.invalid', false);
  this.source.trigger('shippingAddress.data.validate');

app/code/Magento/Tax/view/adminhtml/templates/rule/edit.phtml

@@ -216,11 +216,16 @@ require([
  of: 'body'
  },
  open: function () {
- $(this).closest('.ui-dialog').addClass('ui-dialog-active');
+ var topMargin;
 
- var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 30;
+ $(this).closest('.ui-dialog').addClass('ui-dialog-active');
+ topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 80;
+ $(this).closest('.ui-dialog').css({
+ top: '1%',
+ position: 'absolute',
+ left: '10%'
+ });
  $(this).closest('.ui-dialog').css('margin-top', topMargin);
-
  $(this).addClass('admin__scope-old'); // ToDo UI: remove with old styles removal
  },
  close: function() {

app/code/Magento/Ui/view/base/web/js/modal/modal.js

@@ -2,17 +2,39 @@
  * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
+
 define([
- "jquery",
- "underscore",
- "mage/template",
- "text!ui/template/modal/modal-popup.html",
- "text!ui/template/modal/modal-slide.html",
- "text!ui/template/modal/modal-custom.html",
- "jquery/ui",
- "mage/translate"
-], function($, _, template, popupTpl, slideTpl, customTpl){
- "use strict";
+ 'jquery',
+ 'underscore',
+ 'mage/template',
+ 'text!ui/template/modal/modal-popup.html',
+ 'text!ui/template/modal/modal-slide.html',
+ 'text!ui/template/modal/modal-custom.html',
+ 'jquery/ui',
+ 'mage/translate'
+], function ($, _, template, popupTpl, slideTpl, customTpl) {
+ 'use strict';
+
+ /**
+ * Detect browser transition end event.
+ * @return {String|undefined} - transition event.
+ */
+ var transitionEvent = (function () {
+ var transition,
+ elementStyle = document.body.style,
+ transitions = {
+ 'transition': 'transitionend',
+ 'OTransition': 'oTransitionEnd',
+ 'MozTransition': 'transitionend',
+ 'WebkitTransition': 'webkitTransitionEnd'
+ };
+
+ for (transition in transitions) {
+ if (elementStyle[transition] !== undefined && transitions.hasOwnProperty(transition)) {
+ return transitions[transition];
+ }
+ }
+ })();
 
  /**
  * Modal Window Widget
@@ -44,132 +66,167 @@ define([
  buttons: [{
  text: $.mage.__('Ok'),
  class: '',
- click: function(){
+
+ /**
+ * Default action on button click
+ */
+ click: function () {
  this.closeModal();
  }
  }]
  },
+
  /**
  * Creates modal widget.
  */
- _create: function() {
- this.options.transitionEvent = this.whichTransitionEvent();
+ _create: function () {
+ this.options.transitionEvent = transitionEvent;
  this._createWrapper();
  this._renderModal();
  this._createButtons();
 
- this.modal.find(this.options.modalCloseBtn).on('click', _.bind(this.closeModal, this));
  $(this.options.trigger).on('click', _.bind(this.toggleModal, this));
- this.element.on('openModal', _.bind(this.openModal, this));
- this.element.on('closeModal', _.bind(this.closeModal, this));
+ this._on(this.modal.find(this.options.modalCloseBtn), {
+ 'click': this.closeModal
+ });
+ this._on(this.element, {
+ 'openModal': this.openModal,
+ 'closeModal': this.closeModal
+ });
  },
+
  /**
  * Returns element from modal node.
  * @return {Object} - element.
  */
- _getElem: function(elem) {
+ _getElem: function (elem) {
  return this.modal.find(elem);
  },
+
  /**
  * Gets visible modal count.
  * * @return {Number} - visible modal count.
  */
- _getVisibleCount: function() {
- return this.modalWrapper.find('.'+this.options.modalVisibleClass).length;
+ _getVisibleCount: function () {
+ var modals = this.modalWrapper.find(this.options.modalBlock);
+
+ return modals.filter('.' + this.options.modalVisibleClass).length;
  },
+
  /**
  * Gets count of visible modal by slide type.
  * * @return {Number} - visible modal count.
  */
- _getVisibleSlideCount: function() {
+ _getVisibleSlideCount: function () {
  var elems = this.modalWrapper.find('[data-type="slide"]');
 
- return elems.filter('.'+this.options.modalVisibleClass).length;
+ return elems.filter('.' + this.options.modalVisibleClass).length;
  },
- toggleModal: function() {
- if (this.options.isOpen == true) {
+
+ /**
+ * Toggle modal.
+ * * @return {Element} - current element.
+ */
+ toggleModal: function () {
+ if (this.options.isOpen === true) {
  this.closeModal();
  } else {
  this.openModal();
  }
  },
- openModal: function() {
- var that = this;
 
+ /**
+ * Open modal.
+ * * @return {Element} - current element.
+ */
+ openModal: function () {
  this.options.isOpen = true;
  this._createOverlay();
  this._setActive();
- this.modal.one(this.options.transitionEvent, function() {
- that._trigger('opened');
- });
+ this.modal.one(this.options.transitionEvent, _.bind(this._trigger, this, 'opened'));
  this.modal.addClass(this.options.modalVisibleClass);
- if ( !this.options.transitionEvent ) {
- that._trigger('opened');
+
+ if (!this.options.transitionEvent) {
+ this._trigger('opened');
  }
 
  return this.element;
  },
- closeModal: function() {
+
+ /**
+ * Close modal.
+ * * @return {Element} - current element.
+ */
+ closeModal: function () {
  var that = this;
 
  this.options.isOpen = false;
- this.modal.one(this.options.transitionEvent, function() {
+ this.modal.one(this.options.transitionEvent, function () {
  that._close();
  });
  this.modal.removeClass(this.options.modalVisibleClass);
- if ( !this.options.transitionEvent ) {
+
+ if (!this.options.transitionEvent) {
  that._close();
  }
 
  return this.element;
  },
+
  /**
  * Helper for closeModal function.
  */
- _close: function() {
+ _close: function () {
  var trigger = _.bind(this._trigger, this, 'closed', this.modal);
 
  this._destroyOverlay();
  this._unsetActive();
  _.defer(trigger, this);
  },
+
  /**
  * Set z-index and margin for modal and overlay.
  */
- _setActive: function() {
+ _setActive: function () {
  var zIndex = this.modal.zIndex();
 
  this.prevOverlayIndex = this.overlay.zIndex();
  this.modal.zIndex(zIndex + this._getVisibleCount());
  this.overlay.zIndex(zIndex + (this._getVisibleCount() - 1));
- if ( this._getVisibleSlideCount() ) {
+
+ if (this._getVisibleSlideCount()) {
  this.modal.css('marginLeft', this.options.modalLeftMargin * this._getVisibleSlideCount());
  }
  },
+
  /**
  * Unset styles for modal and set z-index for previous modal.
  */
- _unsetActive: function() {
+ _unsetActive: function () {
  this.modal.removeAttr('style');
- if ( this.overlay ) {
+
+ if (this.overlay) {
  this.overlay.zIndex(this.prevOverlayIndex);
  }
  },
+
  /**
  * Creates wrapper to hold all modals.
  */
- _createWrapper: function() {
- this.modalWrapper = $('.'+this.options.wrapperClass);
- if ( !this.modalWrapper.length ) {
+ _createWrapper: function () {
+ this.modalWrapper = $('.' + this.options.wrapperClass);
+
+ if (!this.modalWrapper.length) {
  this.modalWrapper = $('<div></div>')
-  .addClass(this.options.wrapperClass)
-  .appendTo(this.options.appendTo);
+ .addClass(this.options.wrapperClass)
+ .appendTo(this.options.appendTo);
  }
  },
+
  /**
  * Compile template and append to wrapper.
  */
- _renderModal: function() {
+ _renderModal: function () {
  $(template(
  this.options[this.options.type + 'Tpl'],
  {
@@ -178,74 +235,56 @@ define([
  this.modal = this.modalWrapper.find(this.options.modalBlock).last();
  this.element.show().appendTo(this._getElem(this.options.modalContent));
  },
+
  /**
  * Creates buttons pane.
  */
- _createButtons: function() {
+ _createButtons: function () {
  var that = this;
 
  this.buttons = this._getElem(this.options.modalAction);
- _.each(this.options.buttons, function(btn, key) {
+ _.each(this.options.buttons, function (btn, key) {
  var button = that.buttons[key];
 
  $(button).on('click', _.bind(btn.click, that));
  });
  },
+
  /**
  * Creates overlay, append it to wrapper, set previous click event on overlay.
  */
- _createOverlay: function() {
+ _createOverlay: function () {
  var that = this,
  events;
 
  this.overlay = $('.' + this.options.overlayClass);
- if ( !this.overlay.length ) {
+
+ if (!this.overlay.length) {
  $(this.options.appendTo).addClass(this.options.parentModalClass);
  this.overlay = $('<div></div>')
  .addClass(this.options.overlayClass)
  .appendTo(this.modalWrapper);
  }
-
  events = $._data(this.overlay.get(0), 'events');
- if ( events ) {
+
+ if (events) {
  this.prevOverlayHandler = events.click[0].handler;
  }
- this.overlay.unbind().on('click', function() {
+ this.overlay.unbind().on('click', function () {
  that.closeModal();
  });
  },
+
  /**
  * Destroy overlay.
  */
- _destroyOverlay: function() {
- var modalCount = this.modalWrapper.find('.'+this.options.modalVisibleClass).length;
-
- if ( !modalCount ) {
+ _destroyOverlay: function () {
+ if (this._getVisibleCount()) {
+ this.overlay.unbind().on('click', this.prevOverlayHandler);
+ } else {
  $(this.options.appendTo).removeClass(this.options.parentModalClass);
  this.overlay.remove();
  this.overlay = null;
-
- } else {
- this.overlay.unbind().on('click', this.prevOverlayHandler);
- }
- },
- /**
- * Detects browser transition event.
- */
- whichTransitionEvent: function() {
- var transition,
- el = document.createElement('element'),
- transitions = {
- 'transition': 'transitionend',
- 'OTransition': 'oTransitionEnd',
- 'MozTransition': 'transitionend',
- 'WebkitTransition': 'webkitTransitionEnd'
- };
-
- for (transition in transitions){
- if ( el.style[transition] !== undefined && transitions.hasOwnProperty(transition) ) {
- return transitions[transition];
- }
  }
  }
  });

app/code/Magento/Ui/view/base/web/templates/form/components/collection.html

@@ -15,7 +15,7 @@
  </button>
  </div>
  <!-- ko template: previewTpl --><!-- /ko -->
- <div data-bind="foreach: { data: element.getRegion('head'), as: 'element' }, stopPropagation: true">
+ <div data-bind="foreach: { data: element.getRegion('head'), as: 'element' }">
  <!-- ko template: element.getTemplate() --><!-- /ko -->
  </div>
  </li>