occheung
/
web2019
forked from M-Labs/web2019
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix hover logic on touchables 

* fix cards removal
* fix cards progress bar overlay
* fix cards warning overlay

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-11-07 12:21:44 +08:00
parent bd33946b0e
commit a5b217c183
6 changed files with 343 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
package-lock.json generated
View File

@ -20,6 +20,7 @@
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"webpack": "^5.88.1", "webpack": "^5.88.1",
@ -1922,12 +1923,77 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true, "dev": true,
"peer": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@react-aria/ssr": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.8.0.tgz",
"integrity": "sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==",
"dev": true,
"dependencies": {
"@swc/helpers": "^0.5.0"
},
"engines": {
"node": ">= 12"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
}
},
"node_modules/@restart/hooks": {
"version": "0.4.11",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
"integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
"dev": true,
"dependencies": {
"dequal": "^2.0.3"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@restart/ui": {
"version": "1.6.6",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
"integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.21.0",
"@popperjs/core": "^2.11.6",
"@react-aria/ssr": "^3.5.0",
"@restart/hooks": "^0.4.9",
"@types/warning": "^3.0.0",
"dequal": "^2.0.3",
"dom-helpers": "^5.2.0",
"uncontrollable": "^8.0.1",
"warning": "^4.0.3"
},
"peerDependencies": {
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
}
},
"node_modules/@restart/ui/node_modules/uncontrollable": {
"version": "8.0.4",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
"integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
"dev": true,
"peerDependencies": {
"react": ">=16.14.0"
}
},
"node_modules/@swc/helpers": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
"integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
"dev": true,
"dependencies": {
"tslib": "^2.4.0"
}
},
"node_modules/@types/eslint": { "node_modules/@types/eslint": {
"version": "8.44.0", "version": "8.44.0",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
@ -2005,12 +2071,27 @@
"redux": "^4.0.0" "redux": "^4.0.0"
} }
}, },
"node_modules/@types/react-transition-group": {
"version": "4.4.8",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.8.tgz",
"integrity": "sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": { "node_modules/@types/scheduler": {
"version": "0.16.3", "version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
"dev": true "dev": true
}, },
"node_modules/@types/warning": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.2.tgz",
"integrity": "sha512-S/2+OjBIcBl8Kur23YLe0hG1e7J5m2bHfB4UuMNoLZjIFhQWhTf1FeS+WFoXHUC6QsCEfk4pftj4J1KIKC1glA==",
"dev": true
},
"node_modules/@webassemblyjs/ast": { "node_modules/@webassemblyjs/ast": {
"version": "1.11.6", "version": "1.11.6",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@ -2784,6 +2865,12 @@
"node": ">=6.0" "node": ">=6.0"
} }
}, },
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
"dev": true
},
"node_modules/clone-deep": { "node_modules/clone-deep": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@ -2929,6 +3016,25 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.454", "version": "1.4.454",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.454.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.454.tgz",
@ -3393,6 +3499,15 @@
"node": ">=10.13.0" "node": ">=10.13.0"
} }
}, },
"node_modules/invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dev": true,
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/is-binary-path": { "node_modules/is-binary-path": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@ -3860,6 +3975,25 @@
"react-is": "^16.13.1" "react-is": "^16.13.1"
} }
}, },
"node_modules/prop-types-extra": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
"dev": true,
"dependencies": {
"react-is": "^16.3.2",
"warning": "^4.0.0"
},
"peerDependencies": {
"react": ">=0.14.0"
}
},
"node_modules/prop-types-extra/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"node_modules/prop-types/node_modules/react-is": { "node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -3927,6 +4061,36 @@
"react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
} }
}, },
"node_modules/react-bootstrap": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz",
"integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.22.5",
"@restart/hooks": "^0.4.9",
"@restart/ui": "^1.6.6",
"@types/react-transition-group": "^4.4.6",
"classnames": "^2.3.2",
"dom-helpers": "^5.2.1",
"invariant": "^2.2.4",
"prop-types": "^15.8.1",
"prop-types-extra": "^1.1.0",
"react-transition-group": "^4.4.5",
"uncontrollable": "^7.2.1",
"warning": "^4.0.3"
},
"peerDependencies": {
"@types/react": ">=16.14.8",
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.2.0", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -3946,6 +4110,12 @@
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true "dev": true
}, },
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
"dev": true
},
"node_modules/react-redux": { "node_modules/react-redux": {
"version": "7.2.9", "version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@ -3971,6 +4141,22 @@
} }
} }
}, },
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/readdirp": { "node_modules/readdirp": {
"version": "3.6.0", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -4404,6 +4590,27 @@
"node": ">=8.0" "node": ">=8.0"
} }
}, },
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
"dev": true
},
"node_modules/uncontrollable": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
"integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.6.3",
"@types/react": ">=16.9.11",
"invariant": "^2.2.4",
"react-lifecycles-compat": "^3.0.4"
},
"peerDependencies": {
"react": ">=15.0.0"
}
},
"node_modules/unicode-canonical-property-names-ecmascript": { "node_modules/unicode-canonical-property-names-ecmascript": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@ -4501,6 +4708,15 @@
"uuid": "dist/bin/uuid" "uuid": "dist/bin/uuid"
} }
}, },
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dev": true,
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/watchpack": { "node_modules/watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

3
package.json
View File

@ -27,7 +27,8 @@
"axios": "^1.4.0", "axios": "^1.4.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"jquery": "^3.7.0", "jquery": "^3.7.0",
"uuid": "^9.0.0" "uuid": "^9.0.0",
"react-bootstrap": "^2.8.0"
}, },
"babel": { "babel": {
"presets": [ "presets": [

83
sass/css/_shop.scss
View File

@ -438,50 +438,6 @@ button {
width: 20px; width: 20px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.k-popup-connectors,
.k-popup-warning {
position: absolute;
background-color: $color-primary;
color: white;
font-weight: 700;
font-size: .6rem;
padding: .8rem 1rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
text-align: left;
p {
margin-bottom: 0;
}
p + p {
padding-bottom: 8px;
}
}
.k-popup-connectors {
min-width: 200px;
bottom: 50px;
}
.k-popup-warning {
background-color: #c75e5e;
min-width: 350px;
.rule.warning {
display: flex;
font-size: .75rem;
img {
margin-right: 10px;
height: 100%;
}
}
}
.k-popup-warning.inverted {
right: 0;
}
} }
.overlayRemove { .overlayRemove {
@ -551,3 +507,42 @@ button {
} }
} }
.k-popup-connectors,
.k-popup-warning {
background-color: $color-primary;
color: white;
font-weight: 700;
font-size: .6rem;
padding: .8rem 1rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
text-align: left;
p {
margin-bottom: 0;
}
p + p {
padding-bottom: 8px;
}
}
.k-popup-connectors {
min-width: 200px;
}
.k-popup-warning {
background-color: #c75e5e;
min-width: 300px;
.rule.warning {
display: flex;
font-size: .75rem;
img {
margin-right: 10px;
height: 100%;
}
}
}

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

191
static/js/shop.jsx
View File

@ -6,6 +6,7 @@ import { createRoot } from "react-dom/client";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { OverlayTrigger } from "react-bootstrap";
const data = window.shop_data; const data = window.shop_data;
@ -532,15 +533,14 @@ class ProductCartItem extends React.PureComponent {
static get propTypes() { static get propTypes() {
return { return {
isMobile: PropTypes.bool, isMobile: PropTypes.bool,
isTouch: PropTypes.bool,
hovered: PropTypes.bool, hovered: PropTypes.bool,
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
model: PropTypes.object.isRequired, model: PropTypes.object.isRequired,
data: PropTypes.object, data: PropTypes.object,
onToggleProgress: PropTypes.func,
onToggleWarning: PropTypes.func,
onToggleOverlayRemove: PropTypes.func, onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func, onClickRemoveItem: PropTypes.func,
shouldTooltipWarningClassInverted: PropTypes.bool, onClickItem: PropTypes.func,
}; };
} }
@ -552,47 +552,10 @@ class ProductCartItem extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
this.handleOnMouseEnterWarningItem = this.handleOnMouseEnterWarningItem.bind(this);
this.handleOnMouseLeaveWarningItem = this.handleOnMouseLeaveWarningItem.bind(this);
this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this); this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this); this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this); this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
} this.handleOnClickItem = this.handleOnClickItem.bind(this);
handleOnMouseEnterItem(index, e) {
if (this.props.onToggleProgress) {
this.props.onToggleProgress(index, true);
}
e.preventDefault();
}
handleOnMouseLeaveItem(index, e) {
if (this.props.onToggleProgress) {
this.props.onToggleProgress(index, false);
}
e.preventDefault();
}
handleOnMouseEnterWarningItem(index, isWarning, e) {
if (!isWarning) {
return;
}
if (this.props.onToggleWarning) {
this.props.onToggleWarning(index, true);
}
e.preventDefault();
}
handleOnMouseLeaveWarningItem(index, isWarning, e) {
if (!isWarning) {
return;
}
if (this.props.onToggleWarning) {
this.props.onToggleWarning(index, false);
}
e.preventDefault();
} }
handleOnMouseEnterRemoveItem(index, e) { handleOnMouseEnterRemoveItem(index, e) {
@ -609,6 +572,13 @@ class ProductCartItem extends React.PureComponent {
e.preventDefault(); e.preventDefault();
} }
handleOnClickItem(index, e) {
if (this.props.onClickItem && this.props.isTouch) {
this.props.onClickItem(index);
}
e.preventDefault();
}
handleOnClickRemoveItem(index, e) { handleOnClickRemoveItem(index, e) {
if (this.props.onClickRemoveItem) { if (this.props.onClickRemoveItem) {
this.props.onClickRemoveItem(index); this.props.onClickRemoveItem(index);
@ -621,7 +591,6 @@ class ProductCartItem extends React.PureComponent {
model, model,
data, data,
index, index,
shouldTooltipWarningClassInverted,
} = this.props; } = this.props;
let warning; let warning;
@ -634,7 +603,7 @@ class ProductCartItem extends React.PureComponent {
} }
let render_progress; let render_progress;
if (model.showProgress && data) { if (data) {
switch(model.type) { switch(model.type) {
case 'kasli': case 'kasli':
render_progress = ( render_progress = (
@ -696,28 +665,29 @@ class ProductCartItem extends React.PureComponent {
> >
{/* warning container */} {/* warning container */}
<div <OverlayTrigger
className="progress-container warning" placement="bottom"
onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)} trigger={warning ? ['click', 'hover', 'focus'] : []}
onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}> overlay={
warning ? (<div className="k-popup-warning">
{warning && (
<img className="alert-warning" src={warning ? `/images${warning.icon}` : null} />
)}
{warning && model.showWarning && (
<div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
<p className="rule warning"> <p className="rule warning">
<i>{warning.message}</i> <i>{warning.message}</i>
</p> </p>
</div>) : null
}
rootClose
>
<div className="progress-container warning">
{warning && (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>)}
</div> </div>
)} </OverlayTrigger>
</div>
<h6>{model.name_number}</h6> <h6>{model.name_number}</h6>
<div <div
onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)} onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
onClick={this.handleOnClickItem.bind(this, index)}
> >
<img <img
@ -737,10 +707,14 @@ class ProductCartItem extends React.PureComponent {
</div> </div>
{/* progression container */} {/* progression container */}
<div {render_progress && (
className="progress-container" <OverlayTrigger
onMouseEnter={this.handleOnMouseEnterItem.bind(this, index)} placement="top"
onMouseLeave={this.handleOnMouseLeaveItem.bind(this, index)}> trigger={['click', 'hover', 'focus']}
overlay={render_progress}
rootClose
>
<div className="progress-container">
{model.nbrSlotMax > 0 && ( {model.nbrSlotMax > 0 && (
<div className="nbr-connectors"> <div className="nbr-connectors">
@ -753,10 +727,10 @@ class ProductCartItem extends React.PureComponent {
<div style={{ ...nbrClocksStyle(data)}}></div> <div style={{ ...nbrClocksStyle(data)}}></div>
</div> </div>
)} )}
{/* progress info when mouse over */}
{render_progress}
</div> </div>
</OverlayTrigger>
)}
</div> </div>
)} )}
@ -820,32 +794,28 @@ class Cart extends React.PureComponent {
static get propTypes() { static get propTypes() {
return { return {
isMobile: PropTypes.bool, isMobile: PropTypes.bool,
isTouch: PropTypes.bool,
nbrSlots: PropTypes.number, nbrSlots: PropTypes.number,
itemHovered: PropTypes.string, itemHovered: PropTypes.string,
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
onToggleProgress: PropTypes.func,
onToggleWarning: PropTypes.func,
onToggleOverlayRemove: PropTypes.func, onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func, onClickRemoveItem: PropTypes.func,
onClickItem: PropTypes.func,
}; };
} }
render() { render() {
const { const {
isMobile, isMobile,
isTouch,
nbrSlots, nbrSlots,
itemHovered, itemHovered,
data, data,
onToggleProgress,
onToggleWarning,
onToggleOverlayRemove, onToggleOverlayRemove,
onClickRemoveItem, onClickRemoveItem,
onClickItem,
} = this.props; } = this.props;
const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
const products = data.items.map((item, index) => { const products = data.items.map((item, index) => {
let itemData; let itemData;
if (data.itemsData && index in data.itemsData) { if (data.itemsData && index in data.itemsData) {
@ -854,15 +824,14 @@ class Cart extends React.PureComponent {
return ( return (
<ProductCartItem <ProductCartItem
isMobile={isMobile} isMobile={isMobile}
isTouch={isTouch}
hovered={item.id === itemHovered} hovered={item.id === itemHovered}
key={item.id} key={item.id}
index={index} index={index}
data={itemData} data={itemData}
shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
onToggleProgress={onToggleProgress}
onToggleWarning={onToggleWarning}
onToggleOverlayRemove={onToggleOverlayRemove} onToggleOverlayRemove={onToggleOverlayRemove}
onClickRemoveItem={onClickRemoveItem} onClickRemoveItem={onClickRemoveItem}
onClickItem={onClickItem}
model={item}> model={item}>
</ProductCartItem> </ProductCartItem>
); );
@ -1261,7 +1230,7 @@ class OrderForm extends React.PureComponent {
<textarea <textarea
onChange={handleNote} onChange={handleNote}
value={note} defaultValue={note}
rows="5" rows="5"
placeholder="Additional notes" /> placeholder="Additional notes" />
@ -1269,7 +1238,7 @@ class OrderForm extends React.PureComponent {
<input <input
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2" className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
style={{'cursor': 'pointer', 'fontWeight': '700'}} style={{'cursor': 'pointer', 'fontWeight': '700'}}
value="Show JSON" defaultValue="Show JSON"
onClick={onClickShow} /> onClick={onClickShow} />
<input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} /> <input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
@ -1620,11 +1589,10 @@ class Shop extends React.PureComponent {
this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this); this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
this.handleClickAddItem = this.handleClickAddItem.bind(this); this.handleClickAddItem = this.handleClickAddItem.bind(this);
this.checkAlerts = this.checkAlerts.bind(this); this.checkAlerts = this.checkAlerts.bind(this);
this.handleToggleItemProgress = this.handleToggleItemProgress.bind(this);
this.handleToggleItemWarning = this.handleToggleItemWarning.bind(this);
this.handleClickSelectItem = this.handleClickSelectItem.bind(this); this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
this.handleClickSubmit = this.handleClickSubmit.bind(this); this.handleClickSubmit = this.handleClickSubmit.bind(this);
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this); this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this); this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this); this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
this.handleClickShowOrder = this.handleClickShowOrder.bind(this); this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
@ -1632,6 +1600,7 @@ class Shop extends React.PureComponent {
this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this); this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);
this.timer = null; this.timer = null;
this.timer_remove = null;
} }
componentDidMount() { componentDidMount() {
@ -1748,50 +1717,6 @@ class Shop extends React.PureComponent {
}, tap); }, tap);
} }
handleToggleItemProgress(index, show) {
const itemsCloned = Array.from(this.state.columns.cart.items);
this.setState({
...this.state,
columns: {
...this.state.columns,
cart: {
...this.state.columns.cart,
items: itemsCloned.map((item, i) => {
return {
...item,
showProgress: i === index ? show : false,
showOverlayRemove: false,
showWarning: false,
};
}),
}
},
});
}
handleToggleItemWarning(index, show) {
const itemsCloned = Array.from(this.state.columns.cart.items);
this.setState({
...this.state,
columns: {
...this.state.columns,
cart: {
...this.state.columns.cart,
items: itemsCloned.map((item, i) => {
return {
...item,
showWarning: i === index ? show : false,
showProgress: false,
showOverlayRemove: false,
};
}),
}
},
});
}
handleClickSelectItem(index) { handleClickSelectItem(index) {
const itemsCloned = Array.from(this.state.columns.cart.items); const itemsCloned = Array.from(this.state.columns.cart.items);
@ -1821,9 +1746,7 @@ class Shop extends React.PureComponent {
items: itemsCloned.map((item, id) => { items: itemsCloned.map((item, id) => {
return { return {
...item, ...item,
showOverlayRemove: id === index ? show : false, showOverlayRemove: id === index ? show : false
showProgress: false,
showWarning: false,
}; };
}), }),
} }
@ -1831,6 +1754,17 @@ class Shop extends React.PureComponent {
}); });
} }
handleShowOverlayRemove(index) {
if (this.timer_remove)
clearTimeout(this.timer_remove);
this.handleToggleOverlayRemove(index, true);
this.timer_remove = setTimeout(() => {
this.handleToggleOverlayRemove(index, false);
}, 2000);
}
handleClickShowOrder() { handleClickShowOrder() {
const crate = { const crate = {
items: [], items: [],
@ -2364,6 +2298,7 @@ class Shop extends React.PureComponent {
} = this.state; } = this.state;
const isMobile = window.deviceIsMobile(); const isMobile = window.deviceIsMobile();
const isTouch = window.isTouchEnabled();
return ( return (
<DragDropContext onDragEnd={this.handleOnDragEnd}> <DragDropContext onDragEnd={this.handleOnDragEnd}>
@ -2411,11 +2346,11 @@ class Shop extends React.PureComponent {
nbrSlots={crateModeSlots[currentMode]} nbrSlots={crateModeSlots[currentMode]}
data={columns['cart']} data={columns['cart']}
isMobile={isMobile} isMobile={isMobile}
isTouch={isTouch}
itemHovered={currentItemHovered} itemHovered={currentItemHovered}
onToggleProgress={this.handleToggleItemProgress}
onToggleWarning={this.handleToggleItemWarning}
onToggleOverlayRemove={this.handleToggleOverlayRemove} onToggleOverlayRemove={this.handleToggleOverlayRemove}
onClickRemoveItem={this.handleDeleteItem}> onClickRemoveItem={this.handleDeleteItem}
onClickItem={this.handleShowOverlayRemove}>
</Cart> </Cart>
} }
rules={Object.values(rules).filter(rule => rule)}> rules={Object.values(rules).filter(rule => rule)}>

8
templates/page-place-order.html
View File

@ -31,7 +31,15 @@
return window.innerWidth < 768; return window.innerWidth < 768;
} }
function isTouchEnabled() {
return ('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0);
}
window.deviceIsMobile = deviceIsMobile; window.deviceIsMobile = deviceIsMobile;
window.isTouchEnabled = isTouchEnabled;
})(); })();
</script> </script>