From 0ac391e7ba2c8bf20604cee97e1490e40b19977d Mon Sep 17 00:00:00 2001 From: Craig Humphreys Date: Mon, 30 Oct 2017 10:25:34 +0000 Subject: [PATCH 1/5] Remove 'dead' pixel column The 0 mouse offset on the x axis was causing a 'dead' column of pixels on each star, meaning users could reset to 0 by clicking this dead column on the first star. --- examples/commonjs/App.vue | 4 ++-- examples/commonjs/index.html | 2 +- src/star.vue | 4 +++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/commonjs/App.vue b/examples/commonjs/App.vue index 658b8d2..3f9ffc7 100644 --- a/examples/commonjs/App.vue +++ b/examples/commonjs/App.vue @@ -1,11 +1,11 @@ \r\n\r\n\r\n\n\n\n// WEBPACK FOOTER //\n// star-rating.vue?a5ae70f6","\r\n\r\n\r\n\n\n\n// WEBPACK FOOTER //\n// star.vue?bd55aafc","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(undefined);\n// imports\n\n\n// module\nexports.push([module.id, \".star[data-v-34cbeed1]{display:inline-block}.pointer[data-v-34cbeed1]{cursor:pointer}.star-rating[data-v-34cbeed1]{display:flex;align-items:center}.inline[data-v-34cbeed1]{display:inline-flex}.rating-text[data-v-34cbeed1]{margin-top:7px;margin-left:7px}.star-rating-rtl[data-v-34cbeed1]{direction:rtl}.star-rating-rtl .rating-text[data-v-34cbeed1]{margin-right:10px;direction:rtl}\", \"\"]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader?minimize!./~/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-34cbeed1\",\"scoped\":true,\"hasInlineConfig\":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/star-rating.vue\n// module id = 5\n// module chunks = 0","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader/lib/css-base.js\n// module id = 6\n// module chunks = 0","var Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./star.vue\"),\n /* template */\n require(\"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-21f5376e\\\"}!../node_modules/vue-loader/lib/selector?type=template&index=0!./star.vue\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/star.vue\n// module id = 7\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('svg', {\n staticStyle: {\n \"overflow\": \"visible\"\n },\n attrs: {\n \"height\": _vm.getSize,\n \"width\": _vm.getSize\n },\n on: {\n \"mousemove\": _vm.mouseMoving,\n \"click\": _vm.selected\n }\n }, [_c('linearGradient', {\n attrs: {\n \"id\": _vm.grad,\n \"x1\": \"0\",\n \"x2\": \"100%\",\n \"y1\": \"0\",\n \"y2\": \"0\"\n }\n }, [_c('stop', {\n attrs: {\n \"offset\": _vm.getFill,\n \"stop-color\": (_vm.rtl) ? _vm.inactiveColor : _vm.activeColor\n }\n }), _vm._v(\" \"), _c('stop', {\n attrs: {\n \"offset\": _vm.getFill,\n \"stop-color\": (_vm.rtl) ? _vm.activeColor : _vm.inactiveColor\n }\n })], 1), _vm._v(\" \"), _c('polygon', {\n attrs: {\n \"points\": _vm.starPointsToString,\n \"fill\": _vm.getGradId,\n \"stroke\": _vm.borderColor,\n \"stroke-width\": _vm.borderWidth\n }\n }), _vm._v(\" \"), _c('polygon', {\n attrs: {\n \"points\": _vm.starPointsToString,\n \"fill\": _vm.getGradId\n }\n })], 1)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-21f5376e\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/star.vue\n// module id = 8\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n class: ['star-rating', {\n 'star-rating-rtl': _vm.rtl\n }, {\n inline: _vm.inline\n }]\n }, [_c('div', {\n staticClass: \"star-rating\",\n on: {\n \"mouseleave\": _vm.resetRating\n }\n }, [_vm._l((_vm.maxRating), function(n) {\n return _c('span', {\n class: [{\n pointer: !_vm.readOnly\n }, 'star']\n }, [_c('star', {\n attrs: {\n \"fill\": _vm.fillLevel[n - 1],\n \"size\": _vm.starSize,\n \"star-id\": n,\n \"step\": _vm.step,\n \"active-color\": _vm.activeColor,\n \"inactive-color\": _vm.inactiveColor,\n \"border-color\": _vm.borderColor,\n \"border-width\": _vm.borderWidth,\n \"padding\": _vm.padding,\n \"rtl\": _vm.rtl\n },\n on: {\n \"star-selected\": function($event) {\n _vm.setRating($event, true)\n },\n \"star-mouse-move\": _vm.setRating\n }\n })], 1)\n }), _vm._v(\" \"), (_vm.showRating) ? _c('span', {\n class: ['rating-text', _vm.textClass]\n }, [_vm._v(\" \" + _vm._s(_vm.formattedRating))]) : _vm._e()], 2)])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-34cbeed1\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/star-rating.vue\n// module id = 9\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a \n\n\n\n// WEBPACK FOOTER //\n// star-rating.vue?85bd2db8","\r\n\r\n\r\n\n\n\n// WEBPACK FOOTER //\n// star.vue?2c8a332d","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(undefined);\n// imports\n\n\n// module\nexports.push([module.id, \".vue-star-rating-star[data-v-34cbeed1]{display:inline-block}.vue-star-rating-pointer[data-v-34cbeed1]{cursor:pointer}.vue-star-rating[data-v-34cbeed1]{display:flex;align-items:center}.vue-star-rating-inline[data-v-34cbeed1]{display:inline-flex}.vue-star-rating-rating-text[data-v-34cbeed1]{margin-top:7px;margin-left:7px}.vue-star-rating-rtl[data-v-34cbeed1]{direction:rtl}.vue-star-rating-rtl .vue-star-rating-rating-text[data-v-34cbeed1]{margin-right:10px;direction:rtl}\", \"\"]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader?minimize!./~/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-34cbeed1\",\"scoped\":true,\"hasInlineConfig\":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/star-rating.vue\n// module id = 5\n// module chunks = 0","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader/lib/css-base.js\n// module id = 6\n// module chunks = 0","var Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./star.vue\"),\n /* template */\n require(\"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-21f5376e\\\"}!../node_modules/vue-loader/lib/selector?type=template&index=0!./star.vue\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/star.vue\n// module id = 7\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('svg', {\n staticStyle: {\n \"overflow\": \"visible\"\n },\n attrs: {\n \"height\": _vm.getSize,\n \"width\": _vm.getSize\n },\n on: {\n \"mousemove\": _vm.mouseMoving,\n \"click\": _vm.selected\n }\n }, [_c('linearGradient', {\n attrs: {\n \"id\": _vm.grad,\n \"x1\": \"0\",\n \"x2\": \"100%\",\n \"y1\": \"0\",\n \"y2\": \"0\"\n }\n }, [_c('stop', {\n attrs: {\n \"offset\": _vm.getFill,\n \"stop-color\": (_vm.rtl) ? _vm.inactiveColor : _vm.activeColor\n }\n }), _vm._v(\" \"), _c('stop', {\n attrs: {\n \"offset\": _vm.getFill,\n \"stop-color\": (_vm.rtl) ? _vm.activeColor : _vm.inactiveColor\n }\n })], 1), _vm._v(\" \"), _c('polygon', {\n attrs: {\n \"points\": _vm.starPointsToString,\n \"fill\": _vm.getGradId,\n \"stroke\": _vm.borderColor,\n \"stroke-width\": _vm.borderWidth\n }\n }), _vm._v(\" \"), _c('polygon', {\n attrs: {\n \"points\": _vm.starPointsToString,\n \"fill\": _vm.getGradId\n }\n })], 1)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-21f5376e\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/star.vue\n// module id = 8\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n class: ['vue-star-rating', {\n 'vue-star-rating-rtl': _vm.rtl\n }, {\n 'vue-star-rating-inline': _vm.inline\n }]\n }, [_c('div', {\n staticClass: \"vue-star-rating\",\n on: {\n \"mouseleave\": _vm.resetRating\n }\n }, [_vm._l((_vm.maxRating), function(n) {\n return _c('span', {\n class: [{\n 'vue-star-rating-pointer': !_vm.readOnly\n }, 'vue-star-rating-star']\n }, [_c('star', {\n attrs: {\n \"fill\": _vm.fillLevel[n - 1],\n \"size\": _vm.starSize,\n \"star-id\": n,\n \"step\": _vm.step,\n \"active-color\": _vm.activeColor,\n \"inactive-color\": _vm.inactiveColor,\n \"border-color\": _vm.borderColor,\n \"border-width\": _vm.borderWidth,\n \"padding\": _vm.padding,\n \"rtl\": _vm.rtl\n },\n on: {\n \"star-selected\": function($event) {\n _vm.setRating($event, true)\n },\n \"star-mouse-move\": _vm.setRating\n }\n })], 1)\n }), _vm._v(\" \"), (_vm.showRating) ? _c('span', {\n class: ['vue-star-rating-rating-text', _vm.textClass]\n }, [_vm._v(\" \" + _vm._s(_vm.formattedRating))]) : _vm._e()], 2)])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-34cbeed1\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/star-rating.vue\n// module id = 9\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a