Merge pull request #6 from phucbm/webpack

v2.0.0

.babelrc.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "rules": {
+    "prefer-template": "off",
+    "no-var": 1,
+    "no-unused-vars": 1,
+    "camelcase": 1,
+    "no-nested-ternary": 1,
+    "no-console": 1,
+    "no-template-curly-in-string": 1,
+    "no-self-compare": 1,
+    "import/prefer-default-export": 0,
+    "arrow-body-style": 1,
+    "import/no-extraneous-dependencies": [
+      "off",
+      {
+        "devDependencies": false
+      }
+    ]
+  },
+  "ignorePatterns": [
+    "dist",
+    "node_modules",
+    "webpack.*",
+    "config/paths.js"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "prettier"
+  ],
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "config/webpack.common.js"
+      }
+    }
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+/package-lock.json
+/node_modules/
+/.idea/
+/package-lock.json

.npmignore

@@ -0,0 +1,11 @@
+.idea
+.gitignore
+.babelrc.json
+.eslintrc.json
+.prettierrc.json
+jsconfig.json
+/config
+/public
+/src
+/web
+/dev

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false
+}

CHANGELOG.md

@@ -0,0 +1,20 @@
+### v2.0.0 - 2022-11-11
+
+- Refactor dev environment with webpack
+- Support jQuery and vanilla JS
+- Release NPM package
+
+### v1.1.1 - 2021-09-27
+
+- Fix bug when `responsive` property is not defined.
+
+### v1.1.0 - 2021-09-24
+
+- The core responsive handle has been split into `class ResponsiveObject()` so we can use this feature for other
+  libraries as well.
+
+> See [ResponsiveObject()](https://github.com/phucbm/js-gist/blob/main/responsive-object.js)
+
+### v1.0.0 - 2021-08-14
+
+- jQuery plugin for Flickity responsive

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Phuc Bui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,58 +1,95 @@
-# Flickity responsive v1.1.1 [![](https://data.jsdelivr.com/v1/package/gh/phucbm/flickity-responsive/badge)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
+# Flickity Responsive
 
-A jQuery plugin that adds `responsive` option for Flickity.
+[![release](https://badgen.net/github/release/phucbm/flickity-responsive/)](https://github.com/phucbm/flickity-responsive/releases/latest)
+[![minified](https://badgen.net/badge/minified/4KB/cyan)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/phucbm/flickity-responsive/badge?style=rounded)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
+[![license](https://badgen.net/github/license/phucbm/flickity-responsive/)](https://github.com/phucbm/flickity-responsive/blob/main/LICENSE)
 
-## Introduce
+> A vanilla JS plugin that adds `responsive` option for Flickity.
 
-> At the time of this plugin was made, Flickity does not officially offer any way to update the options on various screensizes.
+## Introduction
+
+> At the time of this plugin was made, Flickity does not officially offer any way to update the options on various
+> screensizes.
 
 Read more about the issue here 👉 https://github.com/metafizzy/flickity/issues/233
 
-So, I create an jQuery plugin that brings `responsive` to Flickity, just like the
+So, I create a plugin that brings `responsive` to Flickity, just like the
 way [Slick](https://kenwheeler.github.io/slick/) works.
 
-## Demo
-
-Check the latest demo on CodePen 👉 https://codepen.io/phucbui/pen/ExmJVZa
-
 ## Getting started
 
-Add `flickity-responsive.js` to your scripts, in this order 👇
+Add the script to your project in this order 👇
 
-- jQuery
+- jQuery (optional)
 - Flickity
-- `flickity-responsive.js`
+- `flickity-responsive`
 
-### Download
+### NPM Package
+
+Install NPM package
+
+```shell
+npm i flickity-responsive
+```
+
+Import
+
+```js
+import {FlickityResponsive} from "flickity-responsive";
+```
 
-Directly from Github
+### Download
 
-[⬇️ flickity-responsive.js](https://raw.githubusercontent.com/phucbm/flickity-responsive/master/flickity-responsive.js)
+👉 Self hosted - [Download the latest release](https://github.com/phucbm/flickity-responsive/releases/latest)
 
-or
+```html
 
-### CDN
+<script src="./flickity-responsive.min.js"></script>
+```
 
-Get the latest minify version thanks for jsDelivr
+👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/gh/phucbm/flickity-responsive@latest/flickity-responsive.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/phucbm/flickity-responsive@2.0.0/flickity-responsive.min.js"></script>
 ```
 
 ## Usage
 
-Use `$('.carousel').flickityResponsive()` to initialize your carousel.
+Just change the name, all other options stay the same.
+
+- `new Flickity()` => `new FlickityResponsive()`.
+- `$('.carousel').flickity()` => `$('.carousel').flickityResponsive()`.
 
 ```js
-// init flickity responsive
+// init with vanilla JS
+new FlickityResponsive('.carousel', {
+    cellAlign: "left",
+    contain: true,
+    freeScroll: true,
+    responsive: [
+        {
+            breakpoint: 748,
+            settings: {
+                wrapAround: true,
+                cellAlign: "center",
+                freeScroll: false,
+                prevNextButtons: false,
+                pageDots: false
+            }
+        }
+    ]
+});
+
+// init with jQuery
 $('.carousel').flickityResponsive({
     cellAlign: "left",
     contain: true,
     freeScroll: true,
     responsive: [
         {
-            breakpoint: 1024,
+            breakpoint: 748,
             settings: {
                 wrapAround: true,
                 cellAlign: "center",
@@ -67,24 +104,35 @@ $('.carousel').flickityResponsive({
 
 ## FYI
 
-This plugin uses Flickity's API and `matchMedia()` with some logics to decide when to destroy and re-initialize the
+This plugin respects Flickity's API and use `matchMedia()` to know when to destroy and re-initialize the
 carousel.
 
-> **⚠️ Important note**: the `breakpoint` property is using CSS `max-width` logic. For instance, when you set `breakpoint:480`, that means responsive settings will be applied when the viewport is `<=480px` (while Slick is `<480px`). Let's be cleared 💎
+> **⚠️ Important note**: the `breakpoint` property is using CSS `max-width` logic. For instance, when you
+> set `breakpoint:480`, that means responsive settings will be applied when the viewport is `<=480px` (while Slick
+> is `<480px`). Let's be cleared 💎
 
-## Changelog
+## Deployment
 
-### v1.1.1 - 2021-09-27
+### Dev server
 
-- Fix bug when `responsive` property is not defined.
+Run dev server
 
-### v1.1.0 - 2021-09-24
+```shell
+npm run dev
+```
+
+### Generate production files
 
-- The core responsive handle has been split into `class ResponsiveObject()` so we can use this feature for other
-  libraries as well.
+Generate UMD and module version
+
+```shell
+npm run prod
+```
 
-> See [ResponsiveObject()](https://github.com/phucbm/js-gist/blob/main/responsive-object.js)
+### Build sites
 
-### v1.0.0 - 2021-08-14
+Build production site
 
-- jQuery plugin for Flickity responsive
+```shell
+npm run build
+```