diff --git a/package.json b/package.json index 495ccc5..aa7c3e8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react", - "version": "4.6.0", + "version": "4.6.1", "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "author": "Tony Air ", "license": "BSD-2-Clause", @@ -53,9 +53,9 @@ ], "dependencies": { "@a2nt/meta-lightbox-js": "^4.2.1", - "@angular/common": "^13.3.3", - "@angular/core": "^13.3.3", - "@apollo/client": "^3.5.10", + "@angular/common": "^13.3.5", + "@angular/core": "^13.3.5", + "@apollo/client": "^3.6.1", "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed", "@popperjs/core": "^2.11.5", "@turf/clone": "^6.5.0", @@ -68,13 +68,14 @@ "aos": "^2.3.4", "apollo3-cache-persist": "^0.14.0", "balanced-match": "^2.0.0", - "bootbox": "^5.5.2", + "bootbox": "^5.5.3", "bootstrap": "^5.1.3", "brace-expansion": "^2.0.1", "density-clustering": "^1.3.0", + "eslint-scope": "^7.1.1", "fast-deep-equal": "^3.1.3", "font-awesome": "^4.7.0", - "graphql": "^16.3.0", + "graphql": "^16.4.0", "hammerjs": "^2.0.8", "inputmask": "^5.0.7", "kdbush": "^3.0.0", @@ -83,16 +84,16 @@ "localforage-cordovasqlitedriver": "^1.8.0", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", - "mapbox-gl": "^2.8.1", + "mapbox-gl": "^2.8.2", "material-design-color": "^2.3.2", "minimatch": "^5.0.1", "moment": "^2.29.3", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "^18.1.0", + "react-dom": "^18.1.0", "react-easy-swipe": "^0.0.22", "react-tiny-oembed": "^1.1.0", - "redaxios": "^0.4.1", - "redux": "^4.1.2", + "redaxios": "^0.5.0", + "redux": "^4.2.0", "rxjs": "^7.5.5", "select2": "^4.0.13", "setimmediate": "^1.0.5", @@ -103,16 +104,16 @@ }, "devDependencies": { "@a2nt/image-sprite-webpack-plugin": "^0.2.5", - "@babel/core": "^7.17.9", + "@babel/core": "^7.17.10", "@babel/eslint-parser": "^7.17.0", "@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/plugin-proposal-object-rest-spread": "^7.17.3", "@babel/plugin-syntax-jsx": "^7.16.7", "@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.17.3", - "@babel/plugin-transform-runtime": "^7.17.0", + "@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-typescript": "^7.16.8", - "@babel/preset-env": "^7.16.11", + "@babel/preset-env": "^7.17.10", "@babel/preset-react": "^7.16.7", "@babel/runtime": "^7.17.9", "@googlemaps/markerclusterer": "*", @@ -125,8 +126,8 @@ "ansi-html": "^0.0.9", "ansi-html-community": "^0.0.8", "ansi-regex": "^6.0.1", - "autoprefixer": "^10.4.4", - "babel-loader": "^8.2.4", + "autoprefixer": "^10.4.7", + "babel-loader": "^8.2.5", "classnames": "^2.3.1", "copy-webpack-plugin": "^10.2.4", "croppie": "^2.6.5", @@ -134,7 +135,7 @@ "css-loader": "^6.7.1", "css-minimizer-webpack-plugin": "^3.4.1", "debug": "^4.3.4", - "eslint": "^8.13.0", + "eslint": "^8.14.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jquery": "^1.5.1", "eslint-plugin-react": "^7.29.4", @@ -152,14 +153,14 @@ "html-dom-parser": "^1.2.0", "html-entities": "^2.3.3", "html-loader": "^3.1.0", - "html-react-parser": "^1.4.11", + "html-react-parser": "^1.4.12", "html-webpack-plugin": "^5.5.0", "img-optimize-loader": "^1.0.7", "loglevel": "^1.8.0", "mini-css-extract-plugin": "^2.6.0", "ms": "^2.1.3", "msw": "^0.39.2", - "node-fetch": "^3.2.3", + "node-fetch": "^3.2.4", "object-assign": "^4.1.1", "optimism": "^0.16.1", "postcss-loader": "^6.2.1", @@ -168,7 +169,7 @@ "querystring": "^0.2.1", "raw-loader": "^4.0.2", "react-hot-loader": "^4.13.0", - "react-is": "^18.0.0", + "react-is": "^18.1.0", "react-lifecycles-compat": "^3.0.4", "regenerator-runtime": "^0.13.9", "resolve-url-loader": "^5.0.0", @@ -179,7 +180,7 @@ "sass-lint-auto-fix": "^0.21.2", "sass-lint-fix": "^1.12.1", "sass-loader": "^12.6.0", - "scheduler": "^0.21.0", + "scheduler": "^0.22.0", "shallowequal": "^1.1.0", "strip-ansi": "^7.0.1", "style-loader": "^3.3.1", @@ -188,7 +189,7 @@ "symbol-observable": "^4.0.0", "terser-webpack-plugin": "^5.3.1", "ts-invariant": "^0.9.4", - "tslib": "^2.3.1", + "tslib": "^2.4.0", "url": "^0.11.0", "url-loader": "^4.1.1", "webpack": "^5.72.0", diff --git a/src/js/ui/carousel.js b/src/js/ui/carousel.js index 9157396..cc7d747 100644 --- a/src/js/ui/carousel.js +++ b/src/js/ui/carousel.js @@ -13,6 +13,7 @@ const CarouselUI = ((window) => { }); el.ui = carousel; const items = el.querySelectorAll(".carousel-item"); + const numberOfItems = parseInt(items.length); // create next/prev arrows if (el.dataset.bsArrows) { @@ -47,7 +48,7 @@ const CarouselUI = ((window) => { const indicators = document.createElement("div"); indicators.classList.add("carousel-indicators"); let i = 0; - while (i < items.length) { + while (i < numberOfItems) { const ind = document.createElement("button"); ind.setAttribute("type", "button"); ind.setAttribute("aria-label", `Slide to #${i + 1}`); @@ -91,22 +92,21 @@ const CarouselUI = ((window) => { const el = entry.target; const rect = entry.contentRect; + const items = el.querySelectorAll('.carousel-item'); const width = rect.width; const height = rect.height; - const numToDisplay = Math.min(el.dataset['length'], items.length); + const numToDisplay = Math.min(parseInt(el.dataset['length']), numberOfItems); const itemWidth = width / numToDisplay; el.dataset['itemWidth'] = itemWidth; el.dataset['numToDisplay'] = numToDisplay; - const items = el.querySelectorAll('.carousel-item'); - - el.querySelector('.carousel-inner').style.width = `${items.length * itemWidth }px`; + el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth }px`; items.forEach((el,i) => { el.style.width = `${itemWidth }px`; }); - if(items.length === numToDisplay) { + if(numberOfItems === numToDisplay) { el.classList.add('js-carousel-no-slide'); carousel.pause(); } diff --git a/src/scss/ui/carousel.scss b/src/scss/ui/carousel.scss index 0de1fff..fe66129 100644 --- a/src/scss/ui/carousel.scss +++ b/src/scss/ui/carousel.scss @@ -95,9 +95,6 @@ $carousel-slide-img-loading-max-height: 25vh !default; .carousel-multislide { overflow: hidden; - display: flex; - align-items: center; - justify-content: center; .carousel-item { display: block;