From eb95a584d01c8ff8898d2b1943eb02209587bfc4 Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Wed, 21 Aug 2019 15:46:10 +0300 Subject: [PATCH 1/4] Add example of a mixin for jQuery Widget and adjusted the mixin documentation --- .../javascript/js_mixins.md | 78 ++++++++++++++----- 1 file changed, 60 insertions(+), 18 deletions(-) diff --git a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md index 7701ded36bc..7014fa05e79 100644 --- a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md +++ b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md @@ -38,33 +38,71 @@ This function accepts a target component(module) as an argument and returns a mo This allows you to return a new instance of the target component with your modifications attached to it before it is used in the application. -### Example +### Examples + +#### Extend UI Component -The following is an example of a mixin module that extends the `target` component with a function that introduces a new `blockVisibility` property to a column element. +The following is an example of a mixin that extends the `target` component with a function that introduces a new `blockVisibility` property to a column element. **File:** `OrangeCompany/Sample/view/base/web/js/columns-mixin.js` ```javascript - define(function () { - 'use strict'; + 'use strict'; + + var mixin = { + + /** + * + * @param {Column} elem + */ + isDisabled: function (elem) { + return elem.blockVisibility || this._super(); + } + }; + + return function (target) { // target == Result that Magento_Ui/.../columns returns. + return target.extend(mixin); // new result that all other modules receive + }; +}); +``` - var mixin = { +#### Extend jQuery Widget - /** - * - * @param {Column} elem - */ - isDisabled: function (elem) { - return elem.blockVisibility || this._super(); - } - }; +The following is an example of a mixin that extends the [modal widget] with a function that adds confirmation for a modal closing. - return function (target) { // target == Result that Magento_Ui/.../columns returns. - return target.extend(mixin); // new result that all other modules receive - }; -}); +**File:** `OrangeCompany/Sample/view/base/web/js/modal-widget-mixin.js` +```javascript +define(['jquery'], function ($) { + 'use strict'; + + var modalWidgetMixin = { + options: { + confirmMessage: "Please, confirm modal closing." + }, + + /** + * Added confirming for modal closing + * + * @returns {Element} + */ + closeModal: function () { + if (!confirm(this.options.confirmMessage)) { + return this.element; + } + + return this._super(); + } + }; + + return function (targetWidget) { + // Example how to extend a widget by mixin object + $.widget('mage.modal', targetWidget, modalWidgetMixin); // the widget alias should be like for the target widget + + return $.mage.modal; // the widget by parent alias should be returned + }; +}); ``` ## Declaring a mixin @@ -76,7 +114,7 @@ The mixins configuration in the `requirejs-config.js` associates a target compon ### Example -The following is an example of a `requirejs-config.js` file that adds the `columns-mixins`, defined in the previous example, to the [grid column component]. +The following is an example of a `requirejs-config.js` file that adds the `columns-mixin` and `modal-widget-mixin` mixins, defined in the previous examples, to the [grid column component] and [modal widget]. **File:** `OrangeCompany/Sample/view/base/requirejs-config.js` @@ -86,6 +124,9 @@ var config = { mixins: { 'Magento_Ui/js/grid/controls/columns': { 'OrangeCompany_Sample/js/columns-mixin': true + }, + "Magento_Ui/js/modal/modal": { + "OrangeCompany_Sample/js/modal-widget-mixin": true } } } @@ -114,4 +155,5 @@ The following is a list of files in the [`Magento_CheckoutAgreement`] module tha [`view/frontend/web/js/model/set-payment-information-mixin.js`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/set-payment-information-mixin.js [`Magento_CheckoutAgreement`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements [About AMD modules and RequireJS]: {{ page.baseurl }}/javascript-dev-guide/javascript/js-resources.html#requirejs-library +[modal widget]: {{ page.baseurl }}/javascript-dev-guide/javascript/widgets/widget_modal.html [Configure JS resources]: {{ page.baseurl }}/javascript-dev-guide/javascript/js-resources.html From 9854b1db135bd24116bc668fd37d5f390c1bc75c Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Wed, 21 Aug 2019 15:49:08 +0300 Subject: [PATCH 2/4] Fixed the link --- guides/v2.2/javascript-dev-guide/javascript/js_mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md index 7014fa05e79..4a064b2a4c1 100644 --- a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md +++ b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md @@ -155,5 +155,5 @@ The following is a list of files in the [`Magento_CheckoutAgreement`] module tha [`view/frontend/web/js/model/set-payment-information-mixin.js`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/set-payment-information-mixin.js [`Magento_CheckoutAgreement`]: {{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CheckoutAgreements [About AMD modules and RequireJS]: {{ page.baseurl }}/javascript-dev-guide/javascript/js-resources.html#requirejs-library -[modal widget]: {{ page.baseurl }}/javascript-dev-guide/javascript/widgets/widget_modal.html +[modal widget]: {{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html [Configure JS resources]: {{ page.baseurl }}/javascript-dev-guide/javascript/js-resources.html From 2b354a5839e29364c2ce9b88aeb80498cc1949c2 Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Fri, 23 Aug 2019 18:35:32 +0300 Subject: [PATCH 3/4] Adjusted the JS mixins documentation --- guides/v2.2/javascript-dev-guide/javascript/js_mixins.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md index 4a064b2a4c1..8c4ad6fa59a 100644 --- a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md +++ b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md @@ -69,7 +69,7 @@ define(function () { #### Extend jQuery Widget -The following is an example of a mixin that extends the [modal widget] with a function that adds confirmation for a modal closing. +The following is an example of a mixin that extends the [modal widget][] with a function that adds confirmation for a modal closing. **File:** `OrangeCompany/Sample/view/base/web/js/modal-widget-mixin.js` @@ -114,7 +114,7 @@ The mixins configuration in the `requirejs-config.js` associates a target compon ### Example -The following is an example of a `requirejs-config.js` file that adds the `columns-mixin` and `modal-widget-mixin` mixins, defined in the previous examples, to the [grid column component] and [modal widget]. +The following is an example of a `requirejs-config.js` file that adds the `columns-mixin` and `modal-widget-mixin` mixins, defined in the previous examples, to the [grid column component][] and [modal widget][]. **File:** `OrangeCompany/Sample/view/base/requirejs-config.js` From b1fbe6ce3da90d0b3c116399490a8de7070a87ba Mon Sep 17 00:00:00 2001 From: Sergiy Zhovnir Date: Sun, 25 Aug 2019 13:51:05 +0300 Subject: [PATCH 4/4] Fixed the issue with trailing spaces --- guides/v2.2/javascript-dev-guide/javascript/js_mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md index 8c4ad6fa59a..8f04d7377d5 100644 --- a/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md +++ b/guides/v2.2/javascript-dev-guide/javascript/js_mixins.md @@ -83,7 +83,7 @@ define(['jquery'], function ($) { }, /** - * Added confirming for modal closing + * Added confirming for modal closing * * @returns {Element} */