diff --git a/README.md b/README.md
index 3f7ff3a..275cd4d 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,17 @@ $(document).ready(() => {
### Config options
+#### Dropdown options using data attributes
+
+```html
+
+```
+
#### Item specific using data attributes
```html
@@ -101,10 +112,12 @@ $(document).ready(() => {
maxItems: Infinity,
// min total items
minItems: 0,
- // text to show on the dropdown
+ // text to show on the dropdown override data-selection-text attribute
selectionText: 'item',
// text to show for multiple items
textPlural: 'items',
+ // optionally can use setSelectionText function to override selectionText
+ setSelectionText: (itemCount, totalItems) => { /* return string */ },
// buttons to increment/decrement
controls: {
position: 'right',
@@ -121,6 +134,41 @@ $(document).ready(() => {
}
```
+#### Selection text
+
+Default value.
+
+```javascript
+`${totalItems} item` // if total items is 1
+`${totalItems} items` // if total items is not 1
+```
+
+Data attribute `data-selection-text` override default value.
+
+```html
+
+```
+
+Property `selectionText` override data attribute
+
+```javascript
+options.selectionText = 'item';
+options.textPlural = 'items';
+```
+
+Function `setSelectionText` override `selectionText` property.
+
+```javascript
+options.setSelectionText = function setSelectionText(itemCount, totalItems)
+```
+
+Arguments:
+
+- *itemCount* - keys - items data-id; values - items count
+- *totalCount* - total items count
+
+Return selection text .
+
### Demo
A demo is included [here](https://github.com/reserbus/item-quantity-dropdown/blob/master/lib/index.html)
diff --git a/lib/item-quantity-dropdown.min.js b/lib/item-quantity-dropdown.min.js
index b7dd999..5b8dcf2 100644
--- a/lib/item-quantity-dropdown.min.js
+++ b/lib/item-quantity-dropdown.min.js
@@ -1,2 +1,2 @@
-!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("item-quantity-dropdown",[],t):"object"==typeof exports?exports["item-quantity-dropdown"]=t():n["item-quantity-dropdown"]=t()}(window,function(){return function(n){var t={};function e(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,o){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(o,r,function(t){return n[t]}.bind(null,r));return o},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}([function(n,t,e){"use strict";e.r(t);e(1);!function(n){var t={maxItems:1/0,minItems:0,selectionText:"item",textPlural:"items",controls:{position:"right",displayCls:"iqdropdown-content",controlsCls:"iqdropdown-item-controls",counterCls:"counter"},items:{},onChange:function(){},beforeDecrement:function(){return!0},beforeIncrement:function(){return!0}};n.fn.iqDropdown=function(e){return this.each(function(){var o=n(this),r=o.find("p.iqdropdown-selection").last(),i=o.find("div.iqdropdown-menu").find("div.iqdropdown-menu-option"),u=n.extend(!0,{},t,e),c={},a=0;function l(){var n=1!==a&&u.textPlural.length>0?u.textPlural:u.selectionText;r.html("".concat(a," ").concat(n))}o.click(function(){o.toggleClass("menu-open")}),i.each(function(){var t=n(this),e=t.data("id"),o=Number(t.data("defaultcount")||"0");c[e]=o,a+=o,function(n,t){var e=Number(t.data("mincount")),o=Number(t.data("maxcount"));u.items[n]={minCount:Number.isNaN(Number(e))?0:e,maxCount:Number.isNaN(Number(o))?1/0:o}}(e,t),function(t,e){var o=n("
").addClass(u.controls.controlsCls),r=n('\n \n \n '),i=n('\n \n \n '),s=n("".concat(c[t]," ")).addClass(u.controls.counterCls);e.children("div").addClass(u.controls.displayCls),o.append(r,s,i),"right"===u.controls.position?e.append(o):e.prepend(o),r.click(function(n){var e=u.items,o=u.minItems,r=u.beforeDecrement,i=u.onChange;r(t,c)&&a>o&&c[t]>e[t].minCount&&(c[t]-=1,a-=1,s.html(c[t]),l(),i(t,c[t],a)),n.preventDefault()}),i.click(function(n){var e=u.items,o=u.maxItems,r=u.beforeIncrement,i=u.onChange;r(t,c)&&a0?this.textPlural:this.selectionText;return"".concat(n," ").concat(e)}};t.fn.iqDropdown=function(e){return this.each(function(){var o=t(this),r=o.find("p.iqdropdown-selection").last(),i=o.find("div.iqdropdown-menu").find("div.iqdropdown-menu-option"),u={selectionText:r.data("selection-text"),textPlural:r.data("text-plural")},c=t.extend(!0,{},n,u,e),a={},l=0;function s(){r.html(c.setSelectionText(a,l))}o.click(function(){o.toggleClass("menu-open")}),i.each(function(){var n=t(this),e=n.data("id"),o=Number(n.data("defaultcount")||"0");a[e]=o,l+=o,function(t,n){var e=Number(n.data("mincount")),o=Number(n.data("maxcount"));c.items[t]={minCount:Number.isNaN(Number(e))?0:e,maxCount:Number.isNaN(Number(o))?1/0:o}}(e,n),function(n,e){var o=t("
").addClass(c.controls.controlsCls),r=t('\n \n \n '),i=t('\n \n \n '),u=t("".concat(a[n]," ")).addClass(c.controls.counterCls);e.children("div").addClass(c.controls.displayCls),o.append(r,u,i),"right"===c.controls.position?e.append(o):e.prepend(o),r.click(function(t){var e=c.items,o=c.minItems,r=c.beforeDecrement,i=c.onChange;r(n,a)&&l>o&&a[n]>e[n].minCount&&(a[n]-=1,l-=1,u.html(a[n]),s(),i(n,a[n],l)),t.preventDefault()}),i.click(function(t){var e=c.items,o=c.maxItems,r=c.beforeIncrement,i=c.onChange;r(n,a)&&l {},\n beforeDecrement: () => true,\n beforeIncrement: () => true,\n };\n\n $.fn.iqDropdown = function (options) {\n this.each(function () {\n const $this = $(this);\n const $selection = $this.find('p.iqdropdown-selection').last();\n const $menu = $this.find('div.iqdropdown-menu');\n const $items = $menu.find('div.iqdropdown-menu-option');\n const settings = $.extend(true, {}, defaults, options);\n const itemCount = {};\n let totalItems = 0;\n\n function updateDisplay () {\n const usePlural = totalItems !== 1 && settings.textPlural.length > 0;\n const text = usePlural ? settings.textPlural : settings.selectionText;\n $selection.html(`${totalItems} ${text}`);\n }\n\n function setItemSettings (id, $item) {\n const minCount = Number($item.data('mincount'));\n const maxCount = Number($item.data('maxcount'));\n\n settings.items[id] = {\n minCount: Number.isNaN(Number(minCount)) ? 0 : minCount,\n maxCount: Number.isNaN(Number(maxCount)) ? Infinity : maxCount,\n };\n }\n\n function addControls (id, $item) {\n const $controls = $('
').addClass(settings.controls.controlsCls);\n const $decrementButton = $(`\n \n \n `);\n const $incrementButton = $(`\n \n \n `);\n const $counter = $(`${itemCount[id]} `).addClass(settings.controls.counterCls);\n\n $item.children('div').addClass(settings.controls.displayCls);\n $controls.append($decrementButton, $counter, $incrementButton);\n\n if (settings.controls.position === 'right') {\n $item.append($controls);\n } else {\n $item.prepend($controls);\n }\n\n $decrementButton.click((event) => {\n const { items, minItems, beforeDecrement, onChange } = settings;\n const allowClick = beforeDecrement(id, itemCount);\n\n if (allowClick && totalItems > minItems && itemCount[id] > items[id].minCount) {\n itemCount[id] -= 1;\n totalItems -= 1;\n $counter.html(itemCount[id]);\n updateDisplay();\n onChange(id, itemCount[id], totalItems);\n }\n\n event.preventDefault();\n });\n\n $incrementButton.click((event) => {\n const { items, maxItems, beforeIncrement, onChange } = settings;\n const allowClick = beforeIncrement(id, itemCount);\n\n if (allowClick && totalItems < maxItems && itemCount[id] < items[id].maxCount) {\n itemCount[id] += 1;\n totalItems += 1;\n $counter.html(itemCount[id]);\n updateDisplay();\n onChange(id, itemCount[id], totalItems);\n }\n\n event.preventDefault();\n });\n\n $item.click(event => event.stopPropagation());\n\n return $item;\n }\n\n $this.click(() => {\n $this.toggleClass('menu-open');\n });\n\n $items.each(function () {\n const $item = $(this);\n const id = $item.data('id');\n const defaultCount = Number($item.data('defaultcount') || '0');\n\n itemCount[id] = defaultCount;\n totalItems += defaultCount;\n setItemSettings(id, $item);\n addControls(id, $item);\n });\n\n updateDisplay();\n });\n\n return this;\n };\n}(jQuery));\n"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack://item-quantity-dropdown/webpack/universalModuleDefinition","webpack://item-quantity-dropdown/webpack/bootstrap","webpack://item-quantity-dropdown/./src/index.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","$","defaults","maxItems","Infinity","minItems","selectionText","textPlural","controls","position","displayCls","controlsCls","counterCls","items","onChange","beforeDecrement","beforeIncrement","setSelectionText","itemCount","totalItems","text","this","length","concat","fn","iqDropdown","options","each","$this","$selection","find","last","$items","dataAttrOptions","data","settings","extend","updateDisplay","html","click","toggleClass","$item","id","defaultCount","Number","minCount","maxCount","isNaN","setItemSettings","$controls","addClass","$decrementButton","$incrementButton","$counter","children","append","prepend","event","preventDefault","stopPropagation","addControls","jQuery"],"mappings":"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","file":"item-quantity-dropdown.min.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"item-quantity-dropdown\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"item-quantity-dropdown\"] = factory();\n\telse\n\t\troot[\"item-quantity-dropdown\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","/* global jQuery */\n\n// plugin styles\nimport 'styles/main.scss';\n\n/* eslint-disable func-names */\n(function ($) {\n const defaults = {\n maxItems: Infinity,\n minItems: 0,\n selectionText: 'item',\n textPlural: 'items',\n controls: {\n position: 'right',\n displayCls: 'iqdropdown-content',\n controlsCls: 'iqdropdown-item-controls',\n counterCls: 'counter',\n },\n items: {},\n onChange: () => {},\n beforeDecrement: () => true,\n beforeIncrement: () => true,\n setSelectionText (itemCount, totalItems) {\n const usePlural = totalItems !== 1 && this.textPlural.length > 0;\n const text = usePlural ? this.textPlural : this.selectionText;\n return `${totalItems} ${text}`;\n },\n };\n\n $.fn.iqDropdown = function (options) {\n this.each(function () {\n const $this = $(this);\n const $selection = $this.find('p.iqdropdown-selection').last();\n const $menu = $this.find('div.iqdropdown-menu');\n const $items = $menu.find('div.iqdropdown-menu-option');\n const dataAttrOptions = {\n selectionText: $selection.data('selection-text'),\n textPlural: $selection.data('text-plural'),\n };\n const settings = $.extend(true, {}, defaults, dataAttrOptions, options);\n const itemCount = {};\n let totalItems = 0;\n\n function updateDisplay () {\n $selection.html(settings.setSelectionText(itemCount, totalItems));\n }\n\n function setItemSettings (id, $item) {\n const minCount = Number($item.data('mincount'));\n const maxCount = Number($item.data('maxcount'));\n\n settings.items[id] = {\n minCount: Number.isNaN(Number(minCount)) ? 0 : minCount,\n maxCount: Number.isNaN(Number(maxCount)) ? Infinity : maxCount,\n };\n }\n\n function addControls (id, $item) {\n const $controls = $('
').addClass(settings.controls.controlsCls);\n const $decrementButton = $(`\n \n \n `);\n const $incrementButton = $(`\n \n \n `);\n const $counter = $(`${itemCount[id]} `).addClass(settings.controls.counterCls);\n\n $item.children('div').addClass(settings.controls.displayCls);\n $controls.append($decrementButton, $counter, $incrementButton);\n\n if (settings.controls.position === 'right') {\n $item.append($controls);\n } else {\n $item.prepend($controls);\n }\n\n $decrementButton.click((event) => {\n const { items, minItems, beforeDecrement, onChange } = settings;\n const allowClick = beforeDecrement(id, itemCount);\n\n if (allowClick && totalItems > minItems && itemCount[id] > items[id].minCount) {\n itemCount[id] -= 1;\n totalItems -= 1;\n $counter.html(itemCount[id]);\n updateDisplay();\n onChange(id, itemCount[id], totalItems);\n }\n\n event.preventDefault();\n });\n\n $incrementButton.click((event) => {\n const { items, maxItems, beforeIncrement, onChange } = settings;\n const allowClick = beforeIncrement(id, itemCount);\n\n if (allowClick && totalItems < maxItems && itemCount[id] < items[id].maxCount) {\n itemCount[id] += 1;\n totalItems += 1;\n $counter.html(itemCount[id]);\n updateDisplay();\n onChange(id, itemCount[id], totalItems);\n }\n\n event.preventDefault();\n });\n\n $item.click(event => event.stopPropagation());\n\n return $item;\n }\n\n $this.click(() => {\n $this.toggleClass('menu-open');\n });\n\n $items.each(function () {\n const $item = $(this);\n const id = $item.data('id');\n const defaultCount = Number($item.data('defaultcount') || '0');\n\n itemCount[id] = defaultCount;\n totalItems += defaultCount;\n setItemSettings(id, $item);\n addControls(id, $item);\n });\n\n updateDisplay();\n });\n\n return this;\n };\n}(jQuery));\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 02f304e..7494436 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,6 +20,11 @@ import 'styles/main.scss';
onChange: () => {},
beforeDecrement: () => true,
beforeIncrement: () => true,
+ setSelectionText (itemCount, totalItems) {
+ const usePlural = totalItems !== 1 && this.textPlural.length > 0;
+ const text = usePlural ? this.textPlural : this.selectionText;
+ return `${totalItems} ${text}`;
+ },
};
$.fn.iqDropdown = function (options) {
@@ -28,14 +33,16 @@ import 'styles/main.scss';
const $selection = $this.find('p.iqdropdown-selection').last();
const $menu = $this.find('div.iqdropdown-menu');
const $items = $menu.find('div.iqdropdown-menu-option');
- const settings = $.extend(true, {}, defaults, options);
+ const dataAttrOptions = {
+ selectionText: $selection.data('selection-text'),
+ textPlural: $selection.data('text-plural'),
+ };
+ const settings = $.extend(true, {}, defaults, dataAttrOptions, options);
const itemCount = {};
let totalItems = 0;
function updateDisplay () {
- const usePlural = totalItems !== 1 && settings.textPlural.length > 0;
- const text = usePlural ? settings.textPlural : settings.selectionText;
- $selection.html(`${totalItems} ${text}`);
+ $selection.html(settings.setSelectionText(itemCount, totalItems));
}
function setItemSettings (id, $item) {
diff --git a/test/index.html b/test/index.html
index 4938156..6eee3f5 100644
--- a/test/index.html
+++ b/test/index.html
@@ -61,6 +61,41 @@ No config options
+ No config options with custom selection message
+
+
Custom config
@@ -138,7 +173,42 @@
Custom config (2nd instance)
-
+
+ Custom message
+
+
+
+