From ce27fdaeee317c15a99abc320919482a51474b2f Mon Sep 17 00:00:00 2001 From: Vasilii Burlacu Date: Wed, 10 Jul 2019 17:37:43 +0300 Subject: [PATCH 1/9] Add new docs page about Dropdown Widget --- _data/toc/javascript-developer-guide.yml | 3 + .../widgets/images/dropdown-widget-result.jpg | Bin 0 -> 42853 bytes .../widgets/jquery-widgets-about.md | 2 + .../widgets/widget_dropdown.md | 202 ++++++++++++++++++ .../widgets/widget_dropdown.md | 1 + .../widgets/widget_dropdown.md | 1 + 6 files changed, 209 insertions(+) create mode 100644 guides/v2.1/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg create mode 100644 guides/v2.1/javascript-dev-guide/widgets/widget_dropdown.md create mode 120000 guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md create mode 120000 guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md diff --git a/_data/toc/javascript-developer-guide.yml b/_data/toc/javascript-developer-guide.yml index fecf6aaf860..9703c0b36d1 100644 --- a/_data/toc/javascript-developer-guide.yml +++ b/_data/toc/javascript-developer-guide.yml @@ -55,6 +55,9 @@ pages: - label: Confirmation widget url: /javascript-dev-guide/widgets/widget_confirm.html + - label: Dropdown widget + url: /javascript-dev-guide/widgets/widget_dropdown.html + - label: DropdownDialog widget url: /javascript-dev-guide/widgets/widget_dialog.html diff --git a/guides/v2.1/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg b/guides/v2.1/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bf5c7553ae761a9c161200372a5ad291d75da482 GIT binary patch literal 42853 zcmeFZ2Ut_z(;$55ok;IRiXhbjf`9}>x=0lS#HjRUl&&H{5Rfh?pjd(+MXK~Fp(7yD zyAlFO5s-uuqA7eAfBpZxyYIgHef#XQ`~0uwW-_PFoH=La%$&pi^en=!bZ^0f3nqAO`>dBS1?f2+)BLm<7e&MMBAjT7*{XNeG z@cZBaYx`B^w{Pk!>OXQ&2W8Rx0aIN$$hyA)s9Siz1K|E1@SEZ%m5u@GXN}Eh4{8LT zU$FEq@X)A8!c;O)LAx5x^mLtYHf(>MVZ~Ta4`yLyZeV;~{}&+)lhRMQwKdAE{@2|T5@xqV)>N_x^_#dbLBlExh zU~zHvcLs@P1QXyc{?5K290CAzFPv}s1poj8H;7jc4!C&$AM}CS59}ZaUp;``e}lm^ zfcyGy@WWquY^?OaJTE|)-Pz-s3kVm3u)_7f;obiR|JDaE2Uw4x>kU^wPiOH1URe0S z-8_92}po=iifN50e?jSfJWRiz}N4UHW2*-KDO%M72)=5+2A7p)iKj_co9S^;OejeaIdR;TI0AWE8o_F;zJjf5WMMJt7 zVDWn&Xhm=MTsUYKY>W1stN$;0!Fp YYuKs?wktxtfT&F^JtAGvuN82_HX!o$z# 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 + + Dropdown Opener Button + + + +``` + +### Styles + +By default the dropdown is not styled. But, there is a handy +[LESS mixin `.lib-dropdown()`] that comes to the rescue: + +```less +// +// Simple dropdown +// --------------------------------------------- + +.lib-dropdown( + @_toggle-selector : ~".action.toggle", + @_options-selector : ~"ul.dropdown", + + @_dropdown-actions-padding: @dropdown-actions__padding, + @_dropdown-list-min-width: @dropdown-list__min-width, + @_dropdown-list-width: @dropdown-list__width, + @_dropdown-list-height: @dropdown-list__height, + @_dropdown-list-margin-top: @dropdown-list__margin-top, + @_dropdown-list-position-top: @dropdown-list__position-top, + @_dropdown-list-position-bottom: @dropdown-list__position-bottom, + @_dropdown-list-position-left: @dropdown-list__position-left, + @_dropdown-list-position-right: @dropdown-list__position-right, + @_dropdown-list-background: @dropdown-list__background, + @_dropdown-list-border: @dropdown-list__border, + @_dropdown-list-pointer: @dropdown-list__pointer, + @_dropdown-list-pointer-border: @dropdown-list-pointer__border, + @_dropdown-list-pointer-position: @dropdown-list-pointer__position, + @_dropdown-list-pointer-position-top: @dropdown-list-pointer__position-top, + @_dropdown-list-pointer-position-left-right: @dropdown-list-pointer__position-left-right, + @_dropdown-list-item-border: @dropdown-list-item__border, + @_dropdown-list-item-padding: @dropdown-list-item__padding, + @_dropdown-list-item-margin: @dropdown-list-item__margin, + @_dropdown-list-item-hover: @dropdown-list-item__hover, + @_dropdown-list-shadow: @dropdown-list__shadow, + @_dropdown-list-z-index: @dropdown-list__z-index, + + @_dropdown-toggle-icon-content: @dropdown-toggle-icon__content, + @_dropdown-toggle-active-icon-content: @dropdown-toggle-icon__active__content, + + @_icon-font: @dropdown-toggle-icon__font, + @_icon-font-size: @dropdown-toggle-icon__font-size, + @_icon-font-line-height: @dropdown-toggle-icon__font-line-height, + @_icon-font-color: @dropdown-toggle-icon__font-color, + @_icon-font-color-hover: @dropdown-toggle-icon__font-color-hover, + @_icon-font-color-active: @dropdown-toggle-icon__font-color-active, + @_icon-font-margin: @dropdown-toggle-icon__font-margin, + @_icon-font-position: @dropdown-toggle-icon__position, + @_icon-font-vertical-align: @dropdown-toggle-icon__font-vertical-align, + @_icon-font-text-hide: @dropdown-toggle-icon__text-hide +) { + // ... +} +``` + +[LESS mixin `.lib-dropdown()`]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/css/source/lib/_dropdowns.less + +## Initialize the dropdown widget {#dropdown_init} + +The loader widget is initialized as described in [JavaScript initialization]. + +### Initialize with `data-mage-init` attribute + +```html +
+ + Dropdown Opener Button + +
    +
+``` + +### Initialize in `.js` file with options + +```js +$('.magento__dropdown-widget').dropdown(); +``` + +## Options {#dropdown_options} + +- [parent](#d_parent) +- [autoclose](#d_autoclose) +- [btnArrow](#d_btnArrow) +- [menu](#d_menu) +- [activeClass](#d_activeClass) + +Description of each option as follows below location. + +### `parent` {#d_parent} + +The parent of element on which the widget was initialized. If not specified, +the widget finds it himself with jQuery method `.parent()`. + +**Type**: + +- jQuery object +- HTML +- String + +**Default value**: `null` + + +### `autoclose` {#d_autoclose} + +Whenever to close or not the dropdown menu when mouse is clicked outside of dropdown scope. + +**Type**: Boolean + +**Default value**: `true` + + +### `btnArrow` {#d_btnArrow} + +A jQuery selector for the arrow that expresses the state of the dropdown. +The widget changes given element's text to '+' or '-", depending on the dropdown state. +It's not required the element to be present into the dropdown HTML markup. It works +just fine without it as well. + +**Type**: String + +**Default value**: `.arrow` + + +### `menu` {#d_menu} + +A jQuery selector that represents the dropdown's menu element. +Looking at the HTML markup, given element has to be inside the `parent` option. + +**Type**: String + +**Default value**: `[data-target="dropdown"]` + + +### `activeClass` {#d_activeClass} + +The CSS class that reflects the current state of the dropdown widget. +Given class is added to the element widget was initialized when the dropdown +menu should be visible. + +**Type**: String + +**Default value**: `active` + + +## Result + +The result is a custom select dropdown with custom content as options. + +![Dropdown Widget]({{ page.baseurl }}/javascript-dev-guide/widgets/images/dropdown-widget-result.png) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md new file mode 120000 index 00000000000..4ce612b78f7 --- /dev/null +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -0,0 +1 @@ +../../../v2.1/javascript-dev-guide/widgets/widget_dropdown.md \ No newline at end of file diff --git a/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md new file mode 120000 index 00000000000..4ce612b78f7 --- /dev/null +++ b/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md @@ -0,0 +1 @@ +../../../v2.1/javascript-dev-guide/widgets/widget_dropdown.md \ No newline at end of file From 75ca94d8e13feada3fc650af8ad49d59c75e2a23 Mon Sep 17 00:00:00 2001 From: Vasilii Burlacu Date: Wed, 10 Jul 2019 18:00:06 +0300 Subject: [PATCH 2/9] Added adjustments according to latest DevDocs changes --- .../widgets/jquery-widgets-about.md | 51 ----- .../widgets/widget_dropdown.md | 202 ----------------- .../widgets/images/dropdown-widget-result.jpg | Bin .../widgets/jquery-widgets-about.md | 2 + .../widgets/widget_dropdown.md | 203 +++++++++++++++++- .../widgets/widget_dropdown.md | 2 +- 6 files changed, 205 insertions(+), 255 deletions(-) delete mode 100644 guides/v2.1/javascript-dev-guide/widgets/jquery-widgets-about.md delete mode 100644 guides/v2.1/javascript-dev-guide/widgets/widget_dropdown.md rename guides/{v2.1 => v2.2}/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg (100%) mode change 120000 => 100644 guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md diff --git a/guides/v2.1/javascript-dev-guide/widgets/jquery-widgets-about.md b/guides/v2.1/javascript-dev-guide/widgets/jquery-widgets-about.md deleted file mode 100644 index 1f3787ff6b3..00000000000 --- a/guides/v2.1/javascript-dev-guide/widgets/jquery-widgets-about.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -group: javascript-developer-guide -subgroup: 3_Widgets -title: Magento jQuery widgets -redirect_from: - - /guides/v2.0/frontend-dev-guide/javascript/jquery-widgets-about.html ---- - -The Magento system uses a jQuery JavaScript library to implement client functionality. This includes a wide usage of standard, customized, and custom jQuery widgets. - -This guide discusses the following widgets: -- [Accordion widget] -- [Alert widget] -- [Calendar widget] -- [Collapsible widget] -- [Confirm widget] -- [Dropdown widget] -- [DropdownDialog widget] -- [Gallery widget] -- [List widget] -- [Loader widget] -- [Menu widget] -- [Modal widget] -- [Navigation widget] -- [Prompt widget] -- [QuickSearch widget] -- [Tabs widget] - -{:.bs-callout .bs-callout-info} -Magento 2 supports [jQuery UI 1.9.2], widget options added in later versions might be unavailable. - -{:.bs-callout .bs-callout-info} -Magento out of the box does not contain jQuery UI styles. Also, it is not recommended to download them as is, because it can break the default Magento design. To use certain jQuery UI styles, you need to add them manually in your custom stylesheets in the `{your_theme_dir}/web/css` or `{your_module_dir}/view/{area}/web/css` directory. - -[Accordion widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_accordion.html -[Alert widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_alert.html -[Calendar widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_calendar.html -[Collapsible widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_collapsible.html -[Confirm widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_confirm.html -[Dropdown widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_dropdown.html -[DropdownDialog widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_dialog.html -[Gallery widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_gallery.html -[List widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_list.html -[Loader widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_loader.html -[Menu widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_menu.html -[Modal widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_modal.html -[Navigation widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_navigation.html -[Prompt widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_prompt.html -[QuickSearch widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_quickSearch.html -[Tabs widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_tabs.html -[jQuery UI 1.9.2]: http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/ \ No newline at end of file diff --git a/guides/v2.1/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.1/javascript-dev-guide/widgets/widget_dropdown.md deleted file mode 100644 index d311eb7987f..00000000000 --- a/guides/v2.1/javascript-dev-guide/widgets/widget_dropdown.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -group: javascript-developer-guide -subgroup: 3_Widgets -title: Dropdown widget -functional_areas: frontend,theme,dropdown ---- - -## Overview - -Widget source file is [lib/web/mage/dropdowns.js]. - -The dropdown widget allows to show show on storefront a select box with custom -content for each of available options. - -{:.bs-callout .bs-callout-info} Dropdown widget is not meant to replace default -HTML select element. By replacing default select in store forms don't expect -the store to work 100% the same as before changes. - - -**Usages:** -- [Shipping policy] -- [Customer menu] -- [UI Tooltip] - -[lib/web/mage/dropdowns.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/dropdowns.js -[Shipping policy]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html -[Customer menu]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Customer/view/frontend/templates/account/customer.phtml -[UI Tooltip]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html - -### HTML markup - -```html -
- - Dropdown Opener Button - - -
-``` - -### Styles - -By default the dropdown is not styled. But, there is a handy -[LESS mixin `.lib-dropdown()`] that comes to the rescue: - -```less -// -// Simple dropdown -// --------------------------------------------- - -.lib-dropdown( - @_toggle-selector : ~".action.toggle", - @_options-selector : ~"ul.dropdown", - - @_dropdown-actions-padding: @dropdown-actions__padding, - @_dropdown-list-min-width: @dropdown-list__min-width, - @_dropdown-list-width: @dropdown-list__width, - @_dropdown-list-height: @dropdown-list__height, - @_dropdown-list-margin-top: @dropdown-list__margin-top, - @_dropdown-list-position-top: @dropdown-list__position-top, - @_dropdown-list-position-bottom: @dropdown-list__position-bottom, - @_dropdown-list-position-left: @dropdown-list__position-left, - @_dropdown-list-position-right: @dropdown-list__position-right, - @_dropdown-list-background: @dropdown-list__background, - @_dropdown-list-border: @dropdown-list__border, - @_dropdown-list-pointer: @dropdown-list__pointer, - @_dropdown-list-pointer-border: @dropdown-list-pointer__border, - @_dropdown-list-pointer-position: @dropdown-list-pointer__position, - @_dropdown-list-pointer-position-top: @dropdown-list-pointer__position-top, - @_dropdown-list-pointer-position-left-right: @dropdown-list-pointer__position-left-right, - @_dropdown-list-item-border: @dropdown-list-item__border, - @_dropdown-list-item-padding: @dropdown-list-item__padding, - @_dropdown-list-item-margin: @dropdown-list-item__margin, - @_dropdown-list-item-hover: @dropdown-list-item__hover, - @_dropdown-list-shadow: @dropdown-list__shadow, - @_dropdown-list-z-index: @dropdown-list__z-index, - - @_dropdown-toggle-icon-content: @dropdown-toggle-icon__content, - @_dropdown-toggle-active-icon-content: @dropdown-toggle-icon__active__content, - - @_icon-font: @dropdown-toggle-icon__font, - @_icon-font-size: @dropdown-toggle-icon__font-size, - @_icon-font-line-height: @dropdown-toggle-icon__font-line-height, - @_icon-font-color: @dropdown-toggle-icon__font-color, - @_icon-font-color-hover: @dropdown-toggle-icon__font-color-hover, - @_icon-font-color-active: @dropdown-toggle-icon__font-color-active, - @_icon-font-margin: @dropdown-toggle-icon__font-margin, - @_icon-font-position: @dropdown-toggle-icon__position, - @_icon-font-vertical-align: @dropdown-toggle-icon__font-vertical-align, - @_icon-font-text-hide: @dropdown-toggle-icon__text-hide -) { - // ... -} -``` - -[LESS mixin `.lib-dropdown()`]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/css/source/lib/_dropdowns.less - -## Initialize the dropdown widget {#dropdown_init} - -The loader widget is initialized as described in [JavaScript initialization]. - -### Initialize with `data-mage-init` attribute - -```html -
- - Dropdown Opener Button - -
    -
-``` - -### Initialize in `.js` file with options - -```js -$('.magento__dropdown-widget').dropdown(); -``` - -## Options {#dropdown_options} - -- [parent](#d_parent) -- [autoclose](#d_autoclose) -- [btnArrow](#d_btnArrow) -- [menu](#d_menu) -- [activeClass](#d_activeClass) - -Description of each option as follows below location. - -### `parent` {#d_parent} - -The parent of element on which the widget was initialized. If not specified, -the widget finds it himself with jQuery method `.parent()`. - -**Type**: - -- jQuery object -- HTML -- String - -**Default value**: `null` - - -### `autoclose` {#d_autoclose} - -Whenever to close or not the dropdown menu when mouse is clicked outside of dropdown scope. - -**Type**: Boolean - -**Default value**: `true` - - -### `btnArrow` {#d_btnArrow} - -A jQuery selector for the arrow that expresses the state of the dropdown. -The widget changes given element's text to '+' or '-", depending on the dropdown state. -It's not required the element to be present into the dropdown HTML markup. It works -just fine without it as well. - -**Type**: String - -**Default value**: `.arrow` - - -### `menu` {#d_menu} - -A jQuery selector that represents the dropdown's menu element. -Looking at the HTML markup, given element has to be inside the `parent` option. - -**Type**: String - -**Default value**: `[data-target="dropdown"]` - - -### `activeClass` {#d_activeClass} - -The CSS class that reflects the current state of the dropdown widget. -Given class is added to the element widget was initialized when the dropdown -menu should be visible. - -**Type**: String - -**Default value**: `active` - - -## Result - -The result is a custom select dropdown with custom content as options. - -![Dropdown Widget]({{ page.baseurl }}/javascript-dev-guide/widgets/images/dropdown-widget-result.png) diff --git a/guides/v2.1/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg b/guides/v2.2/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg similarity index 100% rename from guides/v2.1/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg rename to guides/v2.2/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg diff --git a/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md b/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md index f9f73d3f653..9ad7adb2165 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md +++ b/guides/v2.2/javascript-dev-guide/widgets/jquery-widgets-about.md @@ -12,6 +12,7 @@ This guide discusses the following widgets: - [Calendar widget] - [Collapsible widget] - [Confirm widget] +- [Dropdown widget] - [DropdownDialog widget] - [Gallery widget] - [List widget] @@ -35,6 +36,7 @@ Magento out of the box does not contain jQuery UI styles. Also, it is not recomm [Calendar widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_calendar.html [Collapsible widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_collapsible.html [Confirm widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_confirm.html +[Dropdown widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_dropdown.html [DropdownDialog widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_dialog.html [Gallery widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_gallery.html [List widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_list.html diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md deleted file mode 120000 index 4ce612b78f7..00000000000 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ /dev/null @@ -1 +0,0 @@ -../../../v2.1/javascript-dev-guide/widgets/widget_dropdown.md \ No newline at end of file diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md new file mode 100644 index 00000000000..d311eb7987f --- /dev/null +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -0,0 +1,202 @@ +--- +group: javascript-developer-guide +subgroup: 3_Widgets +title: Dropdown widget +functional_areas: frontend,theme,dropdown +--- + +## Overview + +Widget source file is [lib/web/mage/dropdowns.js]. + +The dropdown widget allows to show show on storefront a select box with custom +content for each of available options. + +{:.bs-callout .bs-callout-info} Dropdown widget is not meant to replace default +HTML select element. By replacing default select in store forms don't expect +the store to work 100% the same as before changes. + + +**Usages:** +- [Shipping policy] +- [Customer menu] +- [UI Tooltip] + +[lib/web/mage/dropdowns.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/dropdowns.js +[Shipping policy]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html +[Customer menu]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Customer/view/frontend/templates/account/customer.phtml +[UI Tooltip]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html + +### HTML markup + +```html +
+ + Dropdown Opener Button + + +
+``` + +### Styles + +By default the dropdown is not styled. But, there is a handy +[LESS mixin `.lib-dropdown()`] that comes to the rescue: + +```less +// +// Simple dropdown +// --------------------------------------------- + +.lib-dropdown( + @_toggle-selector : ~".action.toggle", + @_options-selector : ~"ul.dropdown", + + @_dropdown-actions-padding: @dropdown-actions__padding, + @_dropdown-list-min-width: @dropdown-list__min-width, + @_dropdown-list-width: @dropdown-list__width, + @_dropdown-list-height: @dropdown-list__height, + @_dropdown-list-margin-top: @dropdown-list__margin-top, + @_dropdown-list-position-top: @dropdown-list__position-top, + @_dropdown-list-position-bottom: @dropdown-list__position-bottom, + @_dropdown-list-position-left: @dropdown-list__position-left, + @_dropdown-list-position-right: @dropdown-list__position-right, + @_dropdown-list-background: @dropdown-list__background, + @_dropdown-list-border: @dropdown-list__border, + @_dropdown-list-pointer: @dropdown-list__pointer, + @_dropdown-list-pointer-border: @dropdown-list-pointer__border, + @_dropdown-list-pointer-position: @dropdown-list-pointer__position, + @_dropdown-list-pointer-position-top: @dropdown-list-pointer__position-top, + @_dropdown-list-pointer-position-left-right: @dropdown-list-pointer__position-left-right, + @_dropdown-list-item-border: @dropdown-list-item__border, + @_dropdown-list-item-padding: @dropdown-list-item__padding, + @_dropdown-list-item-margin: @dropdown-list-item__margin, + @_dropdown-list-item-hover: @dropdown-list-item__hover, + @_dropdown-list-shadow: @dropdown-list__shadow, + @_dropdown-list-z-index: @dropdown-list__z-index, + + @_dropdown-toggle-icon-content: @dropdown-toggle-icon__content, + @_dropdown-toggle-active-icon-content: @dropdown-toggle-icon__active__content, + + @_icon-font: @dropdown-toggle-icon__font, + @_icon-font-size: @dropdown-toggle-icon__font-size, + @_icon-font-line-height: @dropdown-toggle-icon__font-line-height, + @_icon-font-color: @dropdown-toggle-icon__font-color, + @_icon-font-color-hover: @dropdown-toggle-icon__font-color-hover, + @_icon-font-color-active: @dropdown-toggle-icon__font-color-active, + @_icon-font-margin: @dropdown-toggle-icon__font-margin, + @_icon-font-position: @dropdown-toggle-icon__position, + @_icon-font-vertical-align: @dropdown-toggle-icon__font-vertical-align, + @_icon-font-text-hide: @dropdown-toggle-icon__text-hide +) { + // ... +} +``` + +[LESS mixin `.lib-dropdown()`]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/css/source/lib/_dropdowns.less + +## Initialize the dropdown widget {#dropdown_init} + +The loader widget is initialized as described in [JavaScript initialization]. + +### Initialize with `data-mage-init` attribute + +```html +
+ + Dropdown Opener Button + +
    +
+``` + +### Initialize in `.js` file with options + +```js +$('.magento__dropdown-widget').dropdown(); +``` + +## Options {#dropdown_options} + +- [parent](#d_parent) +- [autoclose](#d_autoclose) +- [btnArrow](#d_btnArrow) +- [menu](#d_menu) +- [activeClass](#d_activeClass) + +Description of each option as follows below location. + +### `parent` {#d_parent} + +The parent of element on which the widget was initialized. If not specified, +the widget finds it himself with jQuery method `.parent()`. + +**Type**: + +- jQuery object +- HTML +- String + +**Default value**: `null` + + +### `autoclose` {#d_autoclose} + +Whenever to close or not the dropdown menu when mouse is clicked outside of dropdown scope. + +**Type**: Boolean + +**Default value**: `true` + + +### `btnArrow` {#d_btnArrow} + +A jQuery selector for the arrow that expresses the state of the dropdown. +The widget changes given element's text to '+' or '-", depending on the dropdown state. +It's not required the element to be present into the dropdown HTML markup. It works +just fine without it as well. + +**Type**: String + +**Default value**: `.arrow` + + +### `menu` {#d_menu} + +A jQuery selector that represents the dropdown's menu element. +Looking at the HTML markup, given element has to be inside the `parent` option. + +**Type**: String + +**Default value**: `[data-target="dropdown"]` + + +### `activeClass` {#d_activeClass} + +The CSS class that reflects the current state of the dropdown widget. +Given class is added to the element widget was initialized when the dropdown +menu should be visible. + +**Type**: String + +**Default value**: `active` + + +## Result + +The result is a custom select dropdown with custom content as options. + +![Dropdown Widget]({{ page.baseurl }}/javascript-dev-guide/widgets/images/dropdown-widget-result.png) diff --git a/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md index 4ce612b78f7..41a68d1c40e 120000 --- a/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.3/javascript-dev-guide/widgets/widget_dropdown.md @@ -1 +1 @@ -../../../v2.1/javascript-dev-guide/widgets/widget_dropdown.md \ No newline at end of file +../../../v2.2/javascript-dev-guide/widgets/widget_dropdown.md \ No newline at end of file From de00f1270a412ebe0ed58ca350078b65182e15cd Mon Sep 17 00:00:00 2001 From: Burlacu Vasilii Date: Wed, 10 Jul 2019 21:40:19 +0300 Subject: [PATCH 3/9] Update guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md Co-Authored-By: Yaroslav Rogoza --- guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index d311eb7987f..39d176e07ed 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -9,7 +9,7 @@ functional_areas: frontend,theme,dropdown Widget source file is [lib/web/mage/dropdowns.js]. -The dropdown widget allows to show show on storefront a select box with custom +The dropdown widget allows to show on storefront a select box with custom content for each of available options. {:.bs-callout .bs-callout-info} Dropdown widget is not meant to replace default From 46133a17c0fae77b44dfc06f2509c89fa2c45eca Mon Sep 17 00:00:00 2001 From: Burlacu Vasilii Date: Wed, 10 Jul 2019 21:40:54 +0300 Subject: [PATCH 4/9] Update guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md Co-Authored-By: Yaroslav Rogoza --- guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index 39d176e07ed..b40d88883a6 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -155,7 +155,7 @@ the widget finds it himself with jQuery method `.parent()`. ### `autoclose` {#d_autoclose} -Whenever to close or not the dropdown menu when mouse is clicked outside of dropdown scope. +Whenever to close or not the dropdown menu when the click is performed outside of dropdown scope. **Type**: Boolean From e0d4d6bfbb0abd58e452ec15372712c888d408da Mon Sep 17 00:00:00 2001 From: Burlacu Vasilii Date: Wed, 10 Jul 2019 21:41:04 +0300 Subject: [PATCH 5/9] Update guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md Co-Authored-By: Yaroslav Rogoza --- guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index b40d88883a6..74ad27f1885 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -166,7 +166,7 @@ Whenever to close or not the dropdown menu when the click is performed outside o A jQuery selector for the arrow that expresses the state of the dropdown. The widget changes given element's text to '+' or '-", depending on the dropdown state. -It's not required the element to be present into the dropdown HTML markup. It works +It's not required the element to be present in the dropdown HTML markup. It works just fine without it as well. **Type**: String From 60553413db8b5d52876dc32d0b9512143dd27587 Mon Sep 17 00:00:00 2001 From: Vasilii Burlacu Date: Wed, 10 Jul 2019 21:52:26 +0300 Subject: [PATCH 6/9] Added text adjustments and moved result screenshot to appropriate path --- .../images/widget}/dropdown-widget-result.jpg | Bin .../widgets/widget_dropdown.md | 14 ++++---------- 2 files changed, 4 insertions(+), 10 deletions(-) rename {guides/v2.2/javascript-dev-guide/widgets/images => common/images/widget}/dropdown-widget-result.jpg (100%) diff --git a/guides/v2.2/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg b/common/images/widget/dropdown-widget-result.jpg similarity index 100% rename from guides/v2.2/javascript-dev-guide/widgets/images/dropdown-widget-result.jpg rename to common/images/widget/dropdown-widget-result.jpg diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index d311eb7987f..389761a3e6d 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -12,10 +12,6 @@ Widget source file is [lib/web/mage/dropdowns.js]. The dropdown widget allows to show show on storefront a select box with custom content for each of available options. -{:.bs-callout .bs-callout-info} Dropdown widget is not meant to replace default -HTML select element. By replacing default select in store forms don't expect -the store to work 100% the same as before changes. - **Usages:** - [Shipping policy] @@ -50,8 +46,8 @@ the store to work 100% the same as before changes. ### Styles -By default the dropdown is not styled. But, there is a handy -[LESS mixin `.lib-dropdown()`] that comes to the rescue: +The dropdown widget is not styled out of the box. +Use [LESS mixin `.lib-dropdown()`] to customize it. ```less // @@ -186,9 +182,7 @@ Looking at the HTML markup, given element has to be inside the `parent` option. ### `activeClass` {#d_activeClass} -The CSS class that reflects the current state of the dropdown widget. -Given class is added to the element widget was initialized when the dropdown -menu should be visible. +Given class is added to the widget element when the menu is visible. **Type**: String @@ -199,4 +193,4 @@ menu should be visible. The result is a custom select dropdown with custom content as options. -![Dropdown Widget]({{ page.baseurl }}/javascript-dev-guide/widgets/images/dropdown-widget-result.png) +![Dropdown Widget]({{ site.baseurl }}/common/images/widget/dropdown-widget-result.jpg) From 3aa13ff1528e9190eaad193e0642f6e18c011830 Mon Sep 17 00:00:00 2001 From: Yaroslav Rogoza Date: Fri, 12 Jul 2019 13:22:04 +0200 Subject: [PATCH 7/9] Minor refactoring --- guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md | 1 - 1 file changed, 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index 6348f10e910..7136437dcf1 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -133,7 +133,6 @@ $('.magento__dropdown-widget').dropdown(); - [menu](#d_menu) - [activeClass](#d_activeClass) -Description of each option as follows below location. ### `parent` {#d_parent} From ffe02d584c39b056bd846f1f0db9d8632bc3c515 Mon Sep 17 00:00:00 2001 From: Burlacu Vasilii Date: Tue, 16 Jul 2019 09:25:46 +0300 Subject: [PATCH 8/9] Refactor functional areas Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> --- guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index 7136437dcf1..de36ab42b68 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -2,7 +2,9 @@ group: javascript-developer-guide subgroup: 3_Widgets title: Dropdown widget -functional_areas: frontend,theme,dropdown +functional_areas: + - Frontend + - Theme --- ## Overview From c66d51340e005f5c03fccd1f9f52859c6cd8b394 Mon Sep 17 00:00:00 2001 From: Burlacu Vasilii Date: Tue, 16 Jul 2019 09:27:44 +0300 Subject: [PATCH 9/9] Editorial changes Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> Co-Authored-By: Erik Marr <45772211+erikmarr@users.noreply.github.com> --- .../widgets/widget_dropdown.md | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md index de36ab42b68..25abcd3b79c 100644 --- a/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md +++ b/guides/v2.2/javascript-dev-guide/widgets/widget_dropdown.md @@ -9,21 +9,20 @@ functional_areas: ## Overview -Widget source file is [lib/web/mage/dropdowns.js]. +Use the dropdown widget to display custom content on the storefront. -The dropdown widget allows to show on storefront a select box with custom -content for each of available options. +Widget source file is [lib/web/mage/dropdowns.js]. **Usages:** - [Shipping policy] - [Customer menu] -- [UI Tooltip] +- [UI tooltip] [lib/web/mage/dropdowns.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/dropdowns.js [Shipping policy]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html [Customer menu]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Customer/view/frontend/templates/account/customer.phtml -[UI Tooltip]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html +[UI tooltip]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html ### HTML markup @@ -48,8 +47,7 @@ content for each of available options. ### Styles -The dropdown widget is not styled out of the box. -Use [LESS mixin `.lib-dropdown()`] to customize it. +Because the dropdown widget is not formatted by default, use [LESS mixin `.lib-dropdown()`] to customize it. ```less // @@ -105,7 +103,7 @@ Use [LESS mixin `.lib-dropdown()`] to customize it. ## Initialize the dropdown widget {#dropdown_init} -The loader widget is initialized as described in [JavaScript initialization]. +The dropdown widget is initialized as described in [JavaScript initialization]({{ page.baseurl }}/javascript-dev-guide/javascript/js_init.html). ### Initialize with `data-mage-init` attribute @@ -136,10 +134,9 @@ $('.magento__dropdown-widget').dropdown(); - [activeClass](#d_activeClass) -### `parent` {#d_parent} +### `parent` {#d_parent} -The parent of element on which the widget was initialized. If not specified, -the widget finds it himself with jQuery method `.parent()`. +The parent element that initialized the widget. If not specified, the widget locates the element using the `.parent()` jQuery method. **Type**: @@ -150,38 +147,34 @@ the widget finds it himself with jQuery method `.parent()`. **Default value**: `null` -### `autoclose` {#d_autoclose} +### `autoclose` {#d_autoclose} -Whenever to close or not the dropdown menu when the click is performed outside of dropdown scope. +Determines whether to close the dropdown menu when the user clicks outside of the dropdown scope. **Type**: Boolean **Default value**: `true` -### `btnArrow` {#d_btnArrow} +### `btnArrow` {#d_btnArrow} -A jQuery selector for the arrow that expresses the state of the dropdown. -The widget changes given element's text to '+' or '-", depending on the dropdown state. -It's not required the element to be present in the dropdown HTML markup. It works -just fine without it as well. +(Optional) A jQuery selector that updates the arrow to `+` or `-` based on the state of the dropdown. **Type**: String **Default value**: `.arrow` -### `menu` {#d_menu} +### `menu` {#d_menu} -A jQuery selector that represents the dropdown's menu element. -Looking at the HTML markup, given element has to be inside the `parent` option. +A jQuery selector that represents the dropdown's menu element. `menu` must be inside the `parent` element. **Type**: String **Default value**: `[data-target="dropdown"]` -### `activeClass` {#d_activeClass} +### `activeClass` {#d_activeClass} Given class is added to the widget element when the menu is visible.