diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..8f1d938
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file
diff --git a/.github/workflows/check_code_format.yml b/.github/workflows/check_code_format.yml
new file mode 100644
index 0000000..1c82e7a
--- /dev/null
+++ b/.github/workflows/check_code_format.yml
@@ -0,0 +1,50 @@
+name: Check Code Format
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ branches:
+ - main
+
+permissions:
+ contents: write
+
+jobs:
+ check_js_code_format:
+ name: Check JS code format
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+ ref: ${{ github.head_ref }}
+
+ - name: Check format
+ uses: creyD/prettier_action@v4.3
+ with:
+ prettier_options: --check
+ dry: true
+ only_changed: true
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+
+ check_py_code_format:
+ name: Check PY code format
+ runs-on: ubuntu-latest
+ needs: check_js_code_format
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+ ref: ${{ github.head_ref }}
+
+ - name: Check format
+ uses: psf/black@stable
+ with:
+ options: '--exclude="3rd party"'
+ src: "."
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 74b7f1e..dd668df 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -2,7 +2,7 @@ name: Deploy repository to Github Pages
on:
push:
- branches: [ main, stable ]
+ branches: [main, stable]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
@@ -17,27 +17,27 @@ jobs:
build:
runs-on: ubuntu-22.04
steps:
- - name: Checkout main
- uses: actions/checkout@v2
- with:
- path: main
- ref: main
- fetch-depth: '0'
- - run: |
- cd main
- ./build_site.sh ../_site/stable
- - name: Checkout dev
- uses: actions/checkout@v2
- with:
- path: dev
- # change this ref to whatever dev branch/tag we need when necessary
- ref: main
- fetch-depth: '0'
- - run: |
- cd dev
- ../main/build_site.sh ../_site/develop
- - uses: actions/upload-pages-artifact@v2
-
+ - name: Checkout main
+ uses: actions/checkout@v2
+ with:
+ path: main
+ ref: main
+ fetch-depth: "0"
+ - run: |
+ cd main
+ ./build_site.sh ../_site/stable
+ - name: Checkout dev
+ uses: actions/checkout@v2
+ with:
+ path: dev
+ # change this ref to whatever dev branch/tag we need when necessary
+ ref: main
+ fetch-depth: "0"
+ - run: |
+ cd dev
+ ../main/build_site.sh ../_site/develop
+ - uses: actions/upload-pages-artifact@v2
+
deploy:
environment:
name: github-pages
@@ -48,4 +48,3 @@ jobs:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
-
diff --git a/.gitignore b/.gitignore
index 16182c5..0320849 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-/_site
\ No newline at end of file
+/_site
+node_modules
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..af4db47
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,11 @@
+*.md
+
+# dependencies
+node_modules
+package-lock.json
+
+# production
+dist
+
+# workflows
+.github
\ No newline at end of file
diff --git a/3rd party/StashPlexAgent.bundle/Contents/DefaultPrefs.json b/3rd party/StashPlexAgent.bundle/Contents/DefaultPrefs.json
index 27fb244..6176182 100644
--- a/3rd party/StashPlexAgent.bundle/Contents/DefaultPrefs.json
+++ b/3rd party/StashPlexAgent.bundle/Contents/DefaultPrefs.json
@@ -1,146 +1,146 @@
[
- {
- "id": "Hostname",
- "label": "The host for Stash",
- "type": "text",
- "default": "127.0.0.1"
- },
- {
- "id": "Port",
- "label": "The port for Stash",
- "type": "text",
- "default": "9999"
- },
- {
- "id": "UseHTTPS",
- "label": "Use HTTPS instead of HTTP to connect",
- "type": "bool",
- "default": false
- },
- {
- "id": "APIKey",
- "label": "The API Key for Stash if Authentication is enabled",
- "type": "text",
- "default": ""
- },
- {
- "id": "IncludeGalleryImages",
- "label": "Include attached Gallery images in addition to default poster?",
- "type": "bool",
- "default": false
- },
- {
- "id": "SortGalleryImages",
- "label": "If including gallery images, auto sort into poster/background based on orientation?",
- "type": "bool",
- "default": false
- },
- {
- "id": "AppendPerformerTags",
- "label": "Include Performer Tags with the scraped scene tags?",
- "type": "bool",
- "default": false
- },
- {
- "id": "IgnoreTags",
- "label": "Stash Tag ID numbers to ignore (comma separated, 0 to disable)",
- "type": "text",
- "default": "1,2,3318,6279"
- },
- {
- "id": "CreateTagCollectionTags",
- "label": "Stash Tag ID numbers create Collections from (comma separated, 0 to disable)",
- "type": "text",
- "default": "0"
- },
- {
- "id": "CreateAllTagCollectionTags",
- "label": "Create Collections from ALL Tags (If TRUE then option above will exclude instead of include tags)",
- "type": "bool",
- "default": false
- },
- {
- "id": "CreateSiteCollectionTags",
- "label": "Auto create Plex Collection tags for scene Site",
- "type": "bool",
- "default": true
- },
- {
- "id": "PrefixSiteCollectionTags",
- "label": "Prefix for Site Collection Names (The Site name will be appended to this value)",
- "type": "text",
- "default": "Site: "
- },
- {
- "id": "CreateStudioCollectionTags",
- "label": "Auto create Plex Collection tags for scene Studio",
- "type": "bool",
- "default": true
- },
- {
- "id": "UseSiteForStudioCollectionTags",
- "label": "If Studio is not defined, use Site instead (In Stash, Studio is the parent of the scene Studio)",
- "type": "bool",
- "default": false
- },
- {
- "id": "PrefixStudioCollectionTags",
- "label": "Prefix for Studio Collection Names (The Studio name (if available) will be appended to this value)",
- "type": "text",
- "default": "Studio: "
- },
- {
- "id": "CreateMovieCollectionTags",
- "label": "Auto create Plex Collection tags for associated scene Movie",
- "type": "bool",
- "default": false
- },
- {
- "id": "PrefixMovieCollectionTags",
- "label": "Prefix for Movie Collection Names (The Movie title (if available) will be appended to this value)",
- "type": "text",
- "default": "Movie: "
- },
- {
- "id": "CreatePerformerCollectionTags",
- "label": "Auto create Plex Collection tags for associated Performers",
- "type": "bool",
- "default": false
- },
- {
- "id": "PrefixPerformerCollectionTags",
- "label": "Prefix for Performer Collection Names (The performer (if available) will be appended to this value)",
- "type": "text",
- "default": "Actor: "
- },
- {
- "id": "CreateRatingTags",
- "label": "Auto create Plex Collection tags for Stash star rating",
- "type": "bool",
- "default": false
- },
- {
- "id": "RequireOrganized",
- "label": "Require Organized flag to be set in Stash to pull metadata",
- "type": "bool",
- "default": false
- },
- {
- "id": "RequireURL",
- "label": "Require scene URL to be set in Stash to pull metadata",
- "type": "bool",
- "default": false
- },
- {
- "id": "RequireStashID",
- "label": "Require a scene StashID to be set in Stash to pull metadata",
- "type": "bool",
- "default": false
- },
- {
- "id": "debug",
- "label": "Use debug logging",
- "type": "bool",
- "default": false
- },
+ {
+ "id": "Hostname",
+ "label": "The host for Stash",
+ "type": "text",
+ "default": "127.0.0.1"
+ },
+ {
+ "id": "Port",
+ "label": "The port for Stash",
+ "type": "text",
+ "default": "9999"
+ },
+ {
+ "id": "UseHTTPS",
+ "label": "Use HTTPS instead of HTTP to connect",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "APIKey",
+ "label": "The API Key for Stash if Authentication is enabled",
+ "type": "text",
+ "default": ""
+ },
+ {
+ "id": "IncludeGalleryImages",
+ "label": "Include attached Gallery images in addition to default poster?",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "SortGalleryImages",
+ "label": "If including gallery images, auto sort into poster/background based on orientation?",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "AppendPerformerTags",
+ "label": "Include Performer Tags with the scraped scene tags?",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "IgnoreTags",
+ "label": "Stash Tag ID numbers to ignore (comma separated, 0 to disable)",
+ "type": "text",
+ "default": "1,2,3318,6279"
+ },
+ {
+ "id": "CreateTagCollectionTags",
+ "label": "Stash Tag ID numbers create Collections from (comma separated, 0 to disable)",
+ "type": "text",
+ "default": "0"
+ },
+ {
+ "id": "CreateAllTagCollectionTags",
+ "label": "Create Collections from ALL Tags (If TRUE then option above will exclude instead of include tags)",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "CreateSiteCollectionTags",
+ "label": "Auto create Plex Collection tags for scene Site",
+ "type": "bool",
+ "default": true
+ },
+ {
+ "id": "PrefixSiteCollectionTags",
+ "label": "Prefix for Site Collection Names (The Site name will be appended to this value)",
+ "type": "text",
+ "default": "Site: "
+ },
+ {
+ "id": "CreateStudioCollectionTags",
+ "label": "Auto create Plex Collection tags for scene Studio",
+ "type": "bool",
+ "default": true
+ },
+ {
+ "id": "UseSiteForStudioCollectionTags",
+ "label": "If Studio is not defined, use Site instead (In Stash, Studio is the parent of the scene Studio)",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "PrefixStudioCollectionTags",
+ "label": "Prefix for Studio Collection Names (The Studio name (if available) will be appended to this value)",
+ "type": "text",
+ "default": "Studio: "
+ },
+ {
+ "id": "CreateMovieCollectionTags",
+ "label": "Auto create Plex Collection tags for associated scene Movie",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "PrefixMovieCollectionTags",
+ "label": "Prefix for Movie Collection Names (The Movie title (if available) will be appended to this value)",
+ "type": "text",
+ "default": "Movie: "
+ },
+ {
+ "id": "CreatePerformerCollectionTags",
+ "label": "Auto create Plex Collection tags for associated Performers",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "PrefixPerformerCollectionTags",
+ "label": "Prefix for Performer Collection Names (The performer (if available) will be appended to this value)",
+ "type": "text",
+ "default": "Actor: "
+ },
+ {
+ "id": "CreateRatingTags",
+ "label": "Auto create Plex Collection tags for Stash star rating",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "RequireOrganized",
+ "label": "Require Organized flag to be set in Stash to pull metadata",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "RequireURL",
+ "label": "Require scene URL to be set in Stash to pull metadata",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "RequireStashID",
+ "label": "Require a scene StashID to be set in Stash to pull metadata",
+ "type": "bool",
+ "default": false
+ },
+ {
+ "id": "debug",
+ "label": "Use debug logging",
+ "type": "bool",
+ "default": false
+ }
]
diff --git a/README.md b/README.md
index 1945069..0f357c8 100644
--- a/README.md
+++ b/README.md
@@ -51,3 +51,25 @@ We welcome new themes, as well as patches to existing themes.
---------|---------------|-----------|----
StashDB |[StashDB Submission Helper](/userscripts/StashDB_Submission_Helper)|Adds handy functions for StashDB submissions like buttons to add aliases in bulk to a performer|:x:
Kodi|[Kodi Helper](scripts/kodi-helper)|Generates `nfo` and `strm` for use with Kodi.|v0.7|:x:
+
+## Contributing
+
+Formatting is enforced on all files.
+
+[Yarn](https://yarnpkg.com/en/docs/install) must be installed to run the formatting tools. Python dependencies must also be installed to format `py` files.
+
+### Formatting non-`py` files
+
+For non-`py` files, files may be formatted using `prettier`
+
+After installing `yarn` and before running prettier for the first time, `prettier` must be installed by running: `yarn install --frozen-lockfile`
+
+To run `prettier` to format non-`py` files, run the following: `yarn run format`
+
+### Formatting `py` files
+
+`py` files are formatted using `black` which must be installed first.
+
+After installing `yarn` and before formatting for the first time, `black` must be installed by running: `pip install -r requirements.txt`
+
+To run `black` to format `py` files, run the following: `yarn run format-py`
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5306f64
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,29 @@
+{
+ "name": "community-scripts",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "community-scripts",
+ "license": "AGPL-3.0-only",
+ "devDependencies": {
+ "prettier": "^3.2.5"
+ }
+ },
+ "node_modules/prettier": {
+ "version": "3.2.5",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+ "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+ "dev": true,
+ "bin": {
+ "prettier": "bin/prettier.cjs"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "funding": {
+ "url": "https://github.com/prettier/prettier?sponsor=1"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1691a6b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "community-scripts",
+ "description": "This repository contains plugin and utility scripts created by the Stash community and hosted on the official GitHub repo.",
+ "license": "AGPL-3.0-only",
+ "scripts": {
+ "format": "prettier --write .",
+ "format-py": "black --exclude=\"3rd party\" ."
+ },
+ "devDependencies": {
+ "prettier": "^3.2.5"
+ }
+}
diff --git a/plugins/CropperJS/CropperJS.yml b/plugins/CropperJS/CropperJS.yml
index 7b5b6cb..38fb2e0 100644
--- a/plugins/CropperJS/CropperJS.yml
+++ b/plugins/CropperJS/CropperJS.yml
@@ -3,9 +3,8 @@ description: Exports cropper.js functionality for JS/Userscripts
version: 1.6.1
ui:
css:
- - cropper.css
+ - cropper.css
javascript:
- - cropper.js
-
+ - cropper.js
# note - not minimized for more transparency around updates & diffs against source code
-# https://github.com/fengyuanchen/cropperjs/tree/main/dist
\ No newline at end of file
+# https://github.com/fengyuanchen/cropperjs/tree/main/dist
diff --git a/plugins/CropperJS/cropper.css b/plugins/CropperJS/cropper.css
index 98a40ab..74935b2 100644
--- a/plugins/CropperJS/cropper.css
+++ b/plugins/CropperJS/cropper.css
@@ -14,24 +14,24 @@
line-height: 0;
position: relative;
-ms-touch-action: none;
- touch-action: none;
+ touch-action: none;
-webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.cropper-container img {
- backface-visibility: hidden;
- display: block;
- height: 100%;
- image-orientation: 0deg;
- max-height: none !important;
- max-width: none !important;
- min-height: 0 !important;
- min-width: 0 !important;
- width: 100%;
- }
+ backface-visibility: hidden;
+ display: block;
+ height: 100%;
+ image-orientation: 0deg;
+ max-height: none !important;
+ max-width: none !important;
+ min-height: 0 !important;
+ min-width: 0 !important;
+ width: 100%;
+}
.cropper-wrap-box,
.cropper-canvas,
@@ -77,22 +77,22 @@
}
.cropper-dashed.dashed-h {
- border-bottom-width: 1px;
- border-top-width: 1px;
- height: calc(100% / 3);
- left: 0;
- top: calc(100% / 3);
- width: 100%;
- }
+ border-bottom-width: 1px;
+ border-top-width: 1px;
+ height: calc(100% / 3);
+ left: 0;
+ top: calc(100% / 3);
+ width: 100%;
+}
.cropper-dashed.dashed-v {
- border-left-width: 1px;
- border-right-width: 1px;
- height: 100%;
- left: calc(100% / 3);
- top: 0;
- width: calc(100% / 3);
- }
+ border-left-width: 1px;
+ border-right-width: 1px;
+ height: 100%;
+ left: calc(100% / 3);
+ top: 0;
+ width: calc(100% / 3);
+}
.cropper-center {
display: block;
@@ -105,26 +105,26 @@
}
.cropper-center::before,
- .cropper-center::after {
- background-color: #eee;
- content: ' ';
- display: block;
- position: absolute;
- }
+.cropper-center::after {
+ background-color: #eee;
+ content: " ";
+ display: block;
+ position: absolute;
+}
.cropper-center::before {
- height: 1px;
- left: -3px;
- top: 0;
- width: 7px;
- }
+ height: 1px;
+ left: -3px;
+ top: 0;
+ width: 7px;
+}
.cropper-center::after {
- height: 7px;
- left: 0;
- top: -3px;
- width: 1px;
- }
+ height: 7px;
+ left: 0;
+ top: -3px;
+ width: 1px;
+}
.cropper-face,
.cropper-line,
@@ -147,32 +147,32 @@
}
.cropper-line.line-e {
- cursor: ew-resize;
- right: -3px;
- top: 0;
- width: 5px;
- }
+ cursor: ew-resize;
+ right: -3px;
+ top: 0;
+ width: 5px;
+}
.cropper-line.line-n {
- cursor: ns-resize;
- height: 5px;
- left: 0;
- top: -3px;
- }
+ cursor: ns-resize;
+ height: 5px;
+ left: 0;
+ top: -3px;
+}
.cropper-line.line-w {
- cursor: ew-resize;
- left: -3px;
- top: 0;
- width: 5px;
- }
+ cursor: ew-resize;
+ left: -3px;
+ top: 0;
+ width: 5px;
+}
.cropper-line.line-s {
- bottom: -3px;
- cursor: ns-resize;
- height: 5px;
- left: 0;
- }
+ bottom: -3px;
+ cursor: ns-resize;
+ height: 5px;
+ left: 0;
+}
.cropper-point {
background-color: #39f;
@@ -182,103 +182,100 @@
}
.cropper-point.point-e {
- cursor: ew-resize;
- margin-top: -3px;
- right: -3px;
- top: 50%;
- }
+ cursor: ew-resize;
+ margin-top: -3px;
+ right: -3px;
+ top: 50%;
+}
.cropper-point.point-n {
- cursor: ns-resize;
- left: 50%;
- margin-left: -3px;
- top: -3px;
- }
+ cursor: ns-resize;
+ left: 50%;
+ margin-left: -3px;
+ top: -3px;
+}
.cropper-point.point-w {
- cursor: ew-resize;
- left: -3px;
- margin-top: -3px;
- top: 50%;
- }
+ cursor: ew-resize;
+ left: -3px;
+ margin-top: -3px;
+ top: 50%;
+}
.cropper-point.point-s {
- bottom: -3px;
- cursor: s-resize;
- left: 50%;
- margin-left: -3px;
- }
+ bottom: -3px;
+ cursor: s-resize;
+ left: 50%;
+ margin-left: -3px;
+}
.cropper-point.point-ne {
- cursor: nesw-resize;
- right: -3px;
- top: -3px;
- }
+ cursor: nesw-resize;
+ right: -3px;
+ top: -3px;
+}
.cropper-point.point-nw {
- cursor: nwse-resize;
- left: -3px;
- top: -3px;
- }
+ cursor: nwse-resize;
+ left: -3px;
+ top: -3px;
+}
.cropper-point.point-sw {
- bottom: -3px;
- cursor: nesw-resize;
- left: -3px;
- }
+ bottom: -3px;
+ cursor: nesw-resize;
+ left: -3px;
+}
.cropper-point.point-se {
- bottom: -3px;
- cursor: nwse-resize;
- height: 20px;
- opacity: 1;
- right: -3px;
- width: 20px;
- }
+ bottom: -3px;
+ cursor: nwse-resize;
+ height: 20px;
+ opacity: 1;
+ right: -3px;
+ width: 20px;
+}
@media (min-width: 768px) {
-
-.cropper-point.point-se {
- height: 15px;
- width: 15px;
+ .cropper-point.point-se {
+ height: 15px;
+ width: 15px;
}
- }
+}
@media (min-width: 992px) {
-
-.cropper-point.point-se {
- height: 10px;
- width: 10px;
+ .cropper-point.point-se {
+ height: 10px;
+ width: 10px;
}
- }
+}
@media (min-width: 1200px) {
-
-.cropper-point.point-se {
- height: 5px;
- opacity: 0.75;
- width: 5px;
+ .cropper-point.point-se {
+ height: 5px;
+ opacity: 0.75;
+ width: 5px;
}
- }
+}
.cropper-point.point-se::before {
- background-color: #39f;
- bottom: -50%;
- content: ' ';
- display: block;
- height: 200%;
- opacity: 0;
- position: absolute;
- right: -50%;
- width: 200%;
- }
+ background-color: #39f;
+ bottom: -50%;
+ content: " ";
+ display: block;
+ height: 200%;
+ opacity: 0;
+ position: absolute;
+ right: -50%;
+ width: 200%;
+}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-hide {
diff --git a/plugins/CropperJS/cropper.js b/plugins/CropperJS/cropper.js
index 55a50c8..8d321c7 100644
--- a/plugins/CropperJS/cropper.js
+++ b/plugins/CropperJS/cropper.js
@@ -9,40 +9,66 @@
*/
(function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
- typeof define === 'function' && define.amd ? define(factory) :
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Cropper = factory());
-})(this, (function () { 'use strict';
+ typeof exports === "object" && typeof module !== "undefined"
+ ? (module.exports = factory())
+ : typeof define === "function" && define.amd
+ ? define(factory)
+ : ((global =
+ typeof globalThis !== "undefined" ? globalThis : global || self),
+ (global.Cropper = factory()));
+})(this, function () {
+ "use strict";
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
- r && (o = o.filter(function (r) {
- return Object.getOwnPropertyDescriptor(e, r).enumerable;
- })), t.push.apply(t, o);
+ r &&
+ (o = o.filter(function (r) {
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
+ })),
+ t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
- r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
- _defineProperty(e, r, t[r]);
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
- Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
- });
+ r % 2
+ ? ownKeys(Object(t), !0).forEach(function (r) {
+ _defineProperty(e, r, t[r]);
+ })
+ : Object.getOwnPropertyDescriptors
+ ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
+ : ownKeys(Object(t)).forEach(function (r) {
+ Object.defineProperty(
+ e,
+ r,
+ Object.getOwnPropertyDescriptor(t, r),
+ );
+ });
}
return e;
}
function _typeof(o) {
"@babel/helpers - typeof";
- return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
- return typeof o;
- } : function (o) {
- return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
- }, _typeof(o);
+ return (
+ (_typeof =
+ "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
+ ? function (o) {
+ return typeof o;
+ }
+ : function (o) {
+ return o &&
+ "function" == typeof Symbol &&
+ o.constructor === Symbol &&
+ o !== Symbol.prototype
+ ? "symbol"
+ : typeof o;
+ }),
+ _typeof(o)
+ );
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
@@ -62,7 +88,7 @@
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
- writable: false
+ writable: false,
});
return Constructor;
}
@@ -73,7 +99,7 @@
value: value,
enumerable: true,
configurable: true,
- writable: true
+ writable: true,
});
} else {
obj[key] = value;
@@ -81,13 +107,22 @@
return obj;
}
function _toConsumableArray(arr) {
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+ return (
+ _arrayWithoutHoles(arr) ||
+ _iterableToArray(arr) ||
+ _unsupportedIterableToArray(arr) ||
+ _nonIterableSpread()
+ );
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+ if (
+ (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
+ iter["@@iterator"] != null
+ )
+ return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
@@ -95,7 +130,8 @@
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+ return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
@@ -103,7 +139,9 @@
return arr2;
}
function _nonIterableSpread() {
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+ throw new TypeError(
+ "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.",
+ );
}
function _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
@@ -120,25 +158,29 @@
return typeof key === "symbol" ? key : String(key);
}
- var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+ var IS_BROWSER =
+ typeof window !== "undefined" && typeof window.document !== "undefined";
var WINDOW = IS_BROWSER ? window : {};
- var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;
- var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
- var NAMESPACE = 'cropper';
+ var IS_TOUCH_DEVICE =
+ IS_BROWSER && WINDOW.document.documentElement
+ ? "ontouchstart" in WINDOW.document.documentElement
+ : false;
+ var HAS_POINTER_EVENT = IS_BROWSER ? "PointerEvent" in WINDOW : false;
+ var NAMESPACE = "cropper";
// Actions
- var ACTION_ALL = 'all';
- var ACTION_CROP = 'crop';
- var ACTION_MOVE = 'move';
- var ACTION_ZOOM = 'zoom';
- var ACTION_EAST = 'e';
- var ACTION_WEST = 'w';
- var ACTION_SOUTH = 's';
- var ACTION_NORTH = 'n';
- var ACTION_NORTH_EAST = 'ne';
- var ACTION_NORTH_WEST = 'nw';
- var ACTION_SOUTH_EAST = 'se';
- var ACTION_SOUTH_WEST = 'sw';
+ var ACTION_ALL = "all";
+ var ACTION_CROP = "crop";
+ var ACTION_MOVE = "move";
+ var ACTION_ZOOM = "zoom";
+ var ACTION_EAST = "e";
+ var ACTION_WEST = "w";
+ var ACTION_SOUTH = "s";
+ var ACTION_NORTH = "n";
+ var ACTION_NORTH_EAST = "ne";
+ var ACTION_NORTH_WEST = "nw";
+ var ACTION_SOUTH_EAST = "se";
+ var ACTION_SOUTH_WEST = "sw";
// Classes
var CLASS_CROP = "".concat(NAMESPACE, "-crop");
@@ -154,29 +196,33 @@
var DATA_PREVIEW = "".concat(NAMESPACE, "Preview");
// Drag modes
- var DRAG_MODE_CROP = 'crop';
- var DRAG_MODE_MOVE = 'move';
- var DRAG_MODE_NONE = 'none';
+ var DRAG_MODE_CROP = "crop";
+ var DRAG_MODE_MOVE = "move";
+ var DRAG_MODE_NONE = "none";
// Events
- var EVENT_CROP = 'crop';
- var EVENT_CROP_END = 'cropend';
- var EVENT_CROP_MOVE = 'cropmove';
- var EVENT_CROP_START = 'cropstart';
- var EVENT_DBLCLICK = 'dblclick';
- var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
- var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
- var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
- var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
- var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
- var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
- var EVENT_READY = 'ready';
- var EVENT_RESIZE = 'resize';
- var EVENT_WHEEL = 'wheel';
- var EVENT_ZOOM = 'zoom';
+ var EVENT_CROP = "crop";
+ var EVENT_CROP_END = "cropend";
+ var EVENT_CROP_MOVE = "cropmove";
+ var EVENT_CROP_START = "cropstart";
+ var EVENT_DBLCLICK = "dblclick";
+ var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? "touchstart" : "mousedown";
+ var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? "touchmove" : "mousemove";
+ var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? "touchend touchcancel" : "mouseup";
+ var EVENT_POINTER_DOWN = HAS_POINTER_EVENT
+ ? "pointerdown"
+ : EVENT_TOUCH_START;
+ var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? "pointermove" : EVENT_TOUCH_MOVE;
+ var EVENT_POINTER_UP = HAS_POINTER_EVENT
+ ? "pointerup pointercancel"
+ : EVENT_TOUCH_END;
+ var EVENT_READY = "ready";
+ var EVENT_RESIZE = "resize";
+ var EVENT_WHEEL = "wheel";
+ var EVENT_ZOOM = "zoom";
// Mime types
- var MIME_TYPE_JPEG = 'image/jpeg';
+ var MIME_TYPE_JPEG = "image/jpeg";
// RegExps
var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
@@ -205,7 +251,7 @@
// An object with the previous cropping result data
data: null,
// A selector for adding extra containers to preview
- preview: '',
+ preview: "",
// Re-render the cropper when resize the window
responsive: true,
// Restore the cropped area after resize the window
@@ -261,10 +307,35 @@
cropmove: null,
cropend: null,
crop: null,
- zoom: null
+ zoom: null,
};
- var TEMPLATE = '
' + '
' + '
' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '
';
+ var TEMPLATE =
+ '' +
+ '
" +
+ '
' +
+ '
' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ "
" +
+ "
";
/**
* Check if the given value is not a number.
@@ -277,7 +348,7 @@
* @returns {boolean} Returns `true` if the given value is a number, else `false`.
*/
function isNumber(value) {
- return typeof value === 'number' && !isNaN(value);
+ return typeof value === "number" && !isNaN(value);
}
/**
@@ -295,7 +366,7 @@
* @returns {boolean} Returns `true` if the given value is undefined, else `false`.
*/
function isUndefined(value) {
- return typeof value === 'undefined';
+ return typeof value === "undefined";
}
/**
@@ -304,7 +375,7 @@
* @returns {boolean} Returns `true` if the given value is an object, else `false`.
*/
function isObject(value) {
- return _typeof(value) === 'object' && value !== null;
+ return _typeof(value) === "object" && value !== null;
}
var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -320,7 +391,11 @@
try {
var _constructor = value.constructor;
var prototype = _constructor.prototype;
- return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
+ return (
+ _constructor &&
+ prototype &&
+ hasOwnProperty.call(prototype, "isPrototypeOf")
+ );
} catch (error) {
return false;
}
@@ -332,7 +407,7 @@
* @returns {boolean} Returns `true` if the given value is a function, else `false`.
*/
function isFunction(value) {
- return typeof value === 'function';
+ return typeof value === "function";
}
var slice = Array.prototype.slice;
@@ -372,21 +447,29 @@
* @param {*} args - The rest objects for merging to the target object.
* @returns {Object} The extended object.
*/
- var assign = Object.assign || function assign(target) {
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
- if (isObject(target) && args.length > 0) {
- args.forEach(function (arg) {
- if (isObject(arg)) {
- Object.keys(arg).forEach(function (key) {
- target[key] = arg[key];
- });
- }
- });
- }
- return target;
- };
+ var assign =
+ Object.assign ||
+ function assign(target) {
+ for (
+ var _len = arguments.length,
+ args = new Array(_len > 1 ? _len - 1 : 0),
+ _key = 1;
+ _key < _len;
+ _key++
+ ) {
+ args[_key - 1] = arguments[_key];
+ }
+ if (isObject(target) && args.length > 0) {
+ args.forEach(function (arg) {
+ if (isObject(arg)) {
+ Object.keys(arg).forEach(function (key) {
+ target[key] = arg[key];
+ });
+ }
+ });
+ }
+ return target;
+ };
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
/**
@@ -397,8 +480,13 @@
* @returns {number} Returns the normalized number.
*/
function normalizeDecimalNumber(value) {
- var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;
- return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
+ var times =
+ arguments.length > 1 && arguments[1] !== undefined
+ ? arguments[1]
+ : 100000000000;
+ return REGEXP_DECIMALS.test(value)
+ ? Math.round(value * times) / times
+ : value;
}
var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/;
@@ -424,7 +512,9 @@
* @returns {boolean} Returns `true` if the special class was found.
*/
function hasClass(element, value) {
- return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;
+ return element.classList
+ ? element.classList.contains(value)
+ : element.className.indexOf(value) > -1;
}
/**
@@ -474,7 +564,7 @@
return;
}
if (element.className.indexOf(value) >= 0) {
- element.className = element.className.replace(value, '');
+ element.className = element.className.replace(value, "");
}
}
@@ -510,7 +600,7 @@
* @returns {string} The transformed value.
*/
function toParamCase(value) {
- return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase();
+ return value.replace(REGEXP_CAMEL_CASE, "$1-$2").toLowerCase();
}
/**
@@ -569,12 +659,12 @@
}
}
var REGEXP_SPACES = /\s\s*/;
- var onceSupported = function () {
+ var onceSupported = (function () {
var supported = false;
if (IS_BROWSER) {
var once = false;
var listener = function listener() {};
- var options = Object.defineProperty({}, 'once', {
+ var options = Object.defineProperty({}, "once", {
get: function get() {
supported = true;
return once;
@@ -586,13 +676,13 @@
*/
set: function set(value) {
once = value;
- }
+ },
});
- WINDOW.addEventListener('test', listener, options);
- WINDOW.removeEventListener('test', listener, options);
+ WINDOW.addEventListener("test", listener, options);
+ WINDOW.removeEventListener("test", listener, options);
}
return supported;
- }();
+ })();
/**
* Remove event listener from the target element.
@@ -602,24 +692,28 @@
* @param {Object} options - The event options.
*/
function removeListener(element, type, listener) {
- var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+ var options =
+ arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var handler = listener;
- type.trim().split(REGEXP_SPACES).forEach(function (event) {
- if (!onceSupported) {
- var listeners = element.listeners;
- if (listeners && listeners[event] && listeners[event][listener]) {
- handler = listeners[event][listener];
- delete listeners[event][listener];
- if (Object.keys(listeners[event]).length === 0) {
- delete listeners[event];
- }
- if (Object.keys(listeners).length === 0) {
- delete element.listeners;
+ type
+ .trim()
+ .split(REGEXP_SPACES)
+ .forEach(function (event) {
+ if (!onceSupported) {
+ var listeners = element.listeners;
+ if (listeners && listeners[event] && listeners[event][listener]) {
+ handler = listeners[event][listener];
+ delete listeners[event][listener];
+ if (Object.keys(listeners[event]).length === 0) {
+ delete listeners[event];
+ }
+ if (Object.keys(listeners).length === 0) {
+ delete element.listeners;
+ }
}
}
- }
- element.removeEventListener(event, handler, options);
- });
+ element.removeEventListener(event, handler, options);
+ });
}
/**
@@ -630,31 +724,43 @@
* @param {Object} options - The event options.
*/
function addListener(element, type, listener) {
- var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+ var options =
+ arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var _handler = listener;
- type.trim().split(REGEXP_SPACES).forEach(function (event) {
- if (options.once && !onceSupported) {
- var _element$listeners = element.listeners,
- listeners = _element$listeners === void 0 ? {} : _element$listeners;
- _handler = function handler() {
- delete listeners[event][listener];
- element.removeEventListener(event, _handler, options);
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
- args[_key2] = arguments[_key2];
+ type
+ .trim()
+ .split(REGEXP_SPACES)
+ .forEach(function (event) {
+ if (options.once && !onceSupported) {
+ var _element$listeners = element.listeners,
+ listeners = _element$listeners === void 0 ? {} : _element$listeners;
+ _handler = function handler() {
+ delete listeners[event][listener];
+ element.removeEventListener(event, _handler, options);
+ for (
+ var _len2 = arguments.length, args = new Array(_len2), _key2 = 0;
+ _key2 < _len2;
+ _key2++
+ ) {
+ args[_key2] = arguments[_key2];
+ }
+ listener.apply(element, args);
+ };
+ if (!listeners[event]) {
+ listeners[event] = {};
}
- listener.apply(element, args);
- };
- if (!listeners[event]) {
- listeners[event] = {};
+ if (listeners[event][listener]) {
+ element.removeEventListener(
+ event,
+ listeners[event][listener],
+ options,
+ );
+ }
+ listeners[event][listener] = _handler;
+ element.listeners = listeners;
}
- if (listeners[event][listener]) {
- element.removeEventListener(event, listeners[event][listener], options);
- }
- listeners[event][listener] = _handler;
- element.listeners = listeners;
- }
- element.addEventListener(event, _handler, options);
- });
+ element.addEventListener(event, _handler, options);
+ });
}
/**
@@ -672,10 +778,10 @@
event = new CustomEvent(type, {
detail: data,
bubbles: true,
- cancelable: true
+ cancelable: true,
});
} else {
- event = document.createEvent('CustomEvent');
+ event = document.createEvent("CustomEvent");
event.initCustomEvent(type, true, true, data);
}
return element.dispatchEvent(event);
@@ -689,8 +795,9 @@
function getOffset(element) {
var box = element.getBoundingClientRect();
return {
- left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
- top: box.top + (window.pageYOffset - document.documentElement.clientTop)
+ left:
+ box.left + (window.pageXOffset - document.documentElement.clientLeft),
+ top: box.top + (window.pageYOffset - document.documentElement.clientTop),
};
}
var location = WINDOW.location;
@@ -703,7 +810,12 @@
*/
function isCrossOriginURL(url) {
var parts = url.match(REGEXP_ORIGINS);
- return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
+ return (
+ parts !== null &&
+ (parts[1] !== location.protocol ||
+ parts[2] !== location.hostname ||
+ parts[3] !== location.port)
+ );
}
/**
@@ -713,7 +825,7 @@
*/
function addTimestamp(url) {
var timestamp = "timestamp=".concat(new Date().getTime());
- return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;
+ return url + (url.indexOf("?") === -1 ? "?" : "&") + timestamp;
}
/**
@@ -745,11 +857,11 @@
if (isNumber(scaleY) && scaleY !== 1) {
values.push("scaleY(".concat(scaleY, ")"));
}
- var transform = values.length ? values.join(' ') : 'none';
+ var transform = values.length ? values.join(" ") : "none";
return {
WebkitTransform: transform,
msTransform: transform,
- transform: transform
+ transform: transform,
};
}
@@ -790,12 +902,17 @@
pageY = _ref2.pageY;
var end = {
endX: pageX,
- endY: pageY
+ endY: pageY,
};
- return endOnly ? end : _objectSpread2({
- startX: pageX,
- startY: pageY
- }, end);
+ return endOnly
+ ? end
+ : _objectSpread2(
+ {
+ startX: pageX,
+ startY: pageY,
+ },
+ end,
+ );
}
/**
@@ -818,7 +935,7 @@
pageY /= count;
return {
pageX: pageX,
- pageY: pageY
+ pageY: pageY,
};
}
@@ -832,12 +949,18 @@
var aspectRatio = _ref4.aspectRatio,
height = _ref4.height,
width = _ref4.width;
- var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';
+ var type =
+ arguments.length > 1 && arguments[1] !== undefined
+ ? arguments[1]
+ : "contain";
var isValidWidth = isPositiveNumber(width);
var isValidHeight = isPositiveNumber(height);
if (isValidWidth && isValidHeight) {
var adjustedWidth = height * aspectRatio;
- if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) {
+ if (
+ (type === "contain" && adjustedWidth > width) ||
+ (type === "cover" && adjustedWidth < width)
+ ) {
height = width / aspectRatio;
} else {
width = height * aspectRatio;
@@ -849,7 +972,7 @@
}
return {
width: width,
- height: height
+ height: height,
};
}
@@ -866,21 +989,23 @@
if (degree === 90) {
return {
width: height,
- height: width
+ height: width,
};
}
- var arc = degree % 90 * Math.PI / 180;
+ var arc = ((degree % 90) * Math.PI) / 180;
var sinArc = Math.sin(arc);
var cosArc = Math.cos(arc);
var newWidth = width * cosArc + height * sinArc;
var newHeight = width * sinArc + height * cosArc;
- return degree > 90 ? {
- width: newHeight,
- height: newWidth
- } : {
- width: newWidth,
- height: newHeight
- };
+ return degree > 90
+ ? {
+ width: newHeight,
+ height: newWidth,
+ }
+ : {
+ width: newWidth,
+ height: newHeight,
+ };
}
/**
@@ -905,11 +1030,13 @@
naturalWidth = _ref7.naturalWidth,
naturalHeight = _ref7.naturalHeight;
var _ref8$fillColor = _ref8.fillColor,
- fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor,
+ fillColor = _ref8$fillColor === void 0 ? "transparent" : _ref8$fillColor,
_ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,
- imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,
+ imageSmoothingEnabled =
+ _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,
_ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,
- imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ,
+ imageSmoothingQuality =
+ _ref8$imageSmoothingQ === void 0 ? "low" : _ref8$imageSmoothingQ,
_ref8$maxWidth = _ref8.maxWidth,
maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,
_ref8$maxHeight = _ref8.maxHeight,
@@ -918,35 +1045,53 @@
minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,
_ref8$minHeight = _ref8.minHeight,
minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
+ var canvas = document.createElement("canvas");
+ var context = canvas.getContext("2d");
var maxSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: maxWidth,
- height: maxHeight
+ height: maxHeight,
});
- var minSizes = getAdjustedSizes({
- aspectRatio: aspectRatio,
- width: minWidth,
- height: minHeight
- }, 'cover');
- var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
- var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
+ var minSizes = getAdjustedSizes(
+ {
+ aspectRatio: aspectRatio,
+ width: minWidth,
+ height: minHeight,
+ },
+ "cover",
+ );
+ var width = Math.min(
+ maxSizes.width,
+ Math.max(minSizes.width, naturalWidth),
+ );
+ var height = Math.min(
+ maxSizes.height,
+ Math.max(minSizes.height, naturalHeight),
+ );
// Note: should always use image's natural sizes for drawing as
// imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
var destMaxSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: maxWidth,
- height: maxHeight
+ height: maxHeight,
});
- var destMinSizes = getAdjustedSizes({
- aspectRatio: imageAspectRatio,
- width: minWidth,
- height: minHeight
- }, 'cover');
- var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));
- var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));
+ var destMinSizes = getAdjustedSizes(
+ {
+ aspectRatio: imageAspectRatio,
+ width: minWidth,
+ height: minHeight,
+ },
+ "cover",
+ );
+ var destWidth = Math.min(
+ destMaxSizes.width,
+ Math.max(destMinSizes.width, imageNaturalWidth),
+ );
+ var destHeight = Math.min(
+ destMaxSizes.height,
+ Math.max(destMinSizes.height, imageNaturalHeight),
+ );
var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
canvas.width = normalizeDecimalNumber(width);
canvas.height = normalizeDecimalNumber(height);
@@ -954,13 +1099,20 @@
context.fillRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
- context.rotate(rotate * Math.PI / 180);
+ context.rotate((rotate * Math.PI) / 180);
context.scale(scaleX, scaleY);
context.imageSmoothingEnabled = imageSmoothingEnabled;
context.imageSmoothingQuality = imageSmoothingQuality;
- context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {
- return Math.floor(normalizeDecimalNumber(param));
- }))));
+ context.drawImage.apply(
+ context,
+ [image].concat(
+ _toConsumableArray(
+ params.map(function (param) {
+ return Math.floor(normalizeDecimalNumber(param));
+ }),
+ ),
+ ),
+ );
context.restore();
return canvas;
}
@@ -974,7 +1126,7 @@
* @returns {string} The read result.
*/
function getStringFromCharCode(dataView, start, length) {
- var str = '';
+ var str = "";
length += start;
for (var i = start; i < length; i += 1) {
str += fromCharCode(dataView.getUint8(i));
@@ -989,7 +1141,7 @@
* @returns {ArrayBuffer} The result array buffer.
*/
function dataURLToArrayBuffer(dataURL) {
- var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');
+ var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, "");
var binary = atob(base64);
var arrayBuffer = new ArrayBuffer(binary.length);
var uint8 = new Uint8Array(arrayBuffer);
@@ -1014,10 +1166,12 @@
while (uint8.length > 0) {
// XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9
// eslint-disable-next-line prefer-spread
- chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));
+ chunks.push(
+ fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))),
+ );
uint8 = uint8.subarray(chunkSize);
}
- return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join('')));
+ return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join("")));
}
/**
@@ -1036,11 +1190,14 @@
var ifdStart;
// Only handle JPEG image (start by 0xFFD8)
- if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
+ if (dataView.getUint8(0) === 0xff && dataView.getUint8(1) === 0xd8) {
var length = dataView.byteLength;
var offset = 2;
while (offset + 1 < length) {
- if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
+ if (
+ dataView.getUint8(offset) === 0xff &&
+ dataView.getUint8(offset + 1) === 0xe1
+ ) {
app1Start = offset;
break;
}
@@ -1050,12 +1207,15 @@
if (app1Start) {
var exifIDCode = app1Start + 4;
var tiffOffset = app1Start + 10;
- if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
+ if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
var endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
- if (littleEndian || endianness === 0x4D4D /* bigEndian */) {
- if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
- var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+ if (littleEndian || endianness === 0x4d4d /* bigEndian */) {
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002a) {
+ var firstIFDOffset = dataView.getUint32(
+ tiffOffset + 4,
+ littleEndian,
+ );
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
@@ -1069,7 +1229,10 @@
var i;
for (i = 0; i < _length; i += 1) {
_offset = ifdStart + i * 12 + 2;
- if (dataView.getUint16(_offset, littleEndian) === 0x0112 /* Orientation */) {
+ if (
+ dataView.getUint16(_offset, littleEndian) ===
+ 0x0112 /* Orientation */
+ ) {
// 8 is the offset of the current tag's value
_offset += 8;
@@ -1138,7 +1301,7 @@
return {
rotate: rotate,
scaleX: scaleX,
- scaleY: scaleY
+ scaleY: scaleY,
};
}
@@ -1162,13 +1325,19 @@
addClass(cropper, CLASS_HIDDEN);
removeClass(element, CLASS_HIDDEN);
var containerData = {
- width: Math.max(container.offsetWidth, minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH),
- height: Math.max(container.offsetHeight, minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT)
+ width: Math.max(
+ container.offsetWidth,
+ minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH,
+ ),
+ height: Math.max(
+ container.offsetHeight,
+ minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT,
+ ),
};
this.containerData = containerData;
setStyle(cropper, {
width: containerData.width,
- height: containerData.height
+ height: containerData.height,
});
addClass(element, CLASS_HIDDEN);
removeClass(cropper, CLASS_HIDDEN);
@@ -1179,8 +1348,12 @@
imageData = this.imageData;
var viewMode = this.options.viewMode;
var rotated = Math.abs(imageData.rotate) % 180 === 90;
- var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;
- var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;
+ var naturalWidth = rotated
+ ? imageData.naturalHeight
+ : imageData.naturalWidth;
+ var naturalHeight = rotated
+ ? imageData.naturalWidth
+ : imageData.naturalHeight;
var aspectRatio = naturalWidth / naturalHeight;
var canvasWidth = containerData.width;
var canvasHeight = containerData.height;
@@ -1200,13 +1373,19 @@
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
width: canvasWidth,
- height: canvasHeight
+ height: canvasHeight,
};
this.canvasData = canvasData;
this.limited = viewMode === 1 || viewMode === 2;
this.limitCanvas(true, true);
- canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
- canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
+ canvasData.width = Math.min(
+ Math.max(canvasData.width, canvasData.minWidth),
+ canvasData.maxWidth,
+ );
+ canvasData.height = Math.min(
+ Math.max(canvasData.height, canvasData.minHeight),
+ canvasData.maxHeight,
+ );
canvasData.left = (containerData.width - canvasData.width) / 2;
canvasData.top = (containerData.height - canvasData.height) / 2;
canvasData.oldLeft = canvasData.left;
@@ -1236,9 +1415,15 @@
}
} else if (viewMode > 0) {
if (minCanvasWidth) {
- minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0);
+ minCanvasWidth = Math.max(
+ minCanvasWidth,
+ cropped ? cropBoxData.width : 0,
+ );
} else if (minCanvasHeight) {
- minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0);
+ minCanvasHeight = Math.max(
+ minCanvasHeight,
+ cropped ? cropBoxData.height : 0,
+ );
} else if (cropped) {
minCanvasWidth = cropBoxData.width;
minCanvasHeight = cropBoxData.height;
@@ -1252,7 +1437,7 @@
var _getAdjustedSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: minCanvasWidth,
- height: minCanvasHeight
+ height: minCanvasHeight,
});
minCanvasWidth = _getAdjustedSizes.width;
minCanvasHeight = _getAdjustedSizes.height;
@@ -1270,8 +1455,14 @@
canvasData.maxLeft = Math.max(0, newCanvasLeft);
canvasData.maxTop = Math.max(0, newCanvasTop);
if (cropped && this.limited) {
- canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width));
- canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height));
+ canvasData.minLeft = Math.min(
+ cropBoxData.left,
+ cropBoxData.left + (cropBoxData.width - canvasData.width),
+ );
+ canvasData.minTop = Math.min(
+ cropBoxData.top,
+ cropBoxData.top + (cropBoxData.height - canvasData.height),
+ );
canvasData.maxLeft = cropBoxData.left;
canvasData.maxTop = cropBoxData.top;
if (viewMode === 2) {
@@ -1300,12 +1491,13 @@
var _getRotatedSizes = getRotatedSizes({
width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),
height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),
- degree: imageData.rotate || 0
+ degree: imageData.rotate || 0,
}),
naturalWidth = _getRotatedSizes.width,
naturalHeight = _getRotatedSizes.height;
var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);
- var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);
+ var height =
+ canvasData.height * (naturalHeight / canvasData.naturalHeight);
canvasData.left -= (width - canvasData.width) / 2;
canvasData.top -= (height - canvasData.height) / 2;
canvasData.width = width;
@@ -1315,26 +1507,50 @@
canvasData.naturalHeight = naturalHeight;
this.limitCanvas(true, false);
}
- if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) {
+ if (
+ canvasData.width > canvasData.maxWidth ||
+ canvasData.width < canvasData.minWidth
+ ) {
canvasData.left = canvasData.oldLeft;
}
- if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) {
+ if (
+ canvasData.height > canvasData.maxHeight ||
+ canvasData.height < canvasData.minHeight
+ ) {
canvasData.top = canvasData.oldTop;
}
- canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
- canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
+ canvasData.width = Math.min(
+ Math.max(canvasData.width, canvasData.minWidth),
+ canvasData.maxWidth,
+ );
+ canvasData.height = Math.min(
+ Math.max(canvasData.height, canvasData.minHeight),
+ canvasData.maxHeight,
+ );
this.limitCanvas(false, true);
- canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);
- canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop);
+ canvasData.left = Math.min(
+ Math.max(canvasData.left, canvasData.minLeft),
+ canvasData.maxLeft,
+ );
+ canvasData.top = Math.min(
+ Math.max(canvasData.top, canvasData.minTop),
+ canvasData.maxTop,
+ );
canvasData.oldLeft = canvasData.left;
canvasData.oldTop = canvasData.top;
- setStyle(this.canvas, assign({
- width: canvasData.width,
- height: canvasData.height
- }, getTransforms({
- translateX: canvasData.left,
- translateY: canvasData.top
- })));
+ setStyle(
+ this.canvas,
+ assign(
+ {
+ width: canvasData.width,
+ height: canvasData.height,
+ },
+ getTransforms({
+ translateX: canvasData.left,
+ translateY: canvasData.top,
+ }),
+ ),
+ );
this.renderImage(changed);
if (this.cropped && this.limited) {
this.limitCropBox(true, true);
@@ -1343,21 +1559,35 @@
renderImage: function renderImage(changed) {
var canvasData = this.canvasData,
imageData = this.imageData;
- var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
- var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);
+ var width =
+ imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
+ var height =
+ imageData.naturalHeight *
+ (canvasData.height / canvasData.naturalHeight);
assign(imageData, {
width: width,
height: height,
left: (canvasData.width - width) / 2,
- top: (canvasData.height - height) / 2
+ top: (canvasData.height - height) / 2,
});
- setStyle(this.image, assign({
- width: imageData.width,
- height: imageData.height
- }, getTransforms(assign({
- translateX: imageData.left,
- translateY: imageData.top
- }, imageData))));
+ setStyle(
+ this.image,
+ assign(
+ {
+ width: imageData.width,
+ height: imageData.height,
+ },
+ getTransforms(
+ assign(
+ {
+ translateX: imageData.left,
+ translateY: imageData.top,
+ },
+ imageData,
+ ),
+ ),
+ ),
+ );
if (changed) {
this.output();
}
@@ -1369,7 +1599,7 @@
var autoCropArea = Number(options.autoCropArea) || 0.8;
var cropBoxData = {
width: canvasData.width,
- height: canvasData.height
+ height: canvasData.height,
};
if (aspectRatio) {
if (canvasData.height * aspectRatio > canvasData.width) {
@@ -1382,14 +1612,28 @@
this.limitCropBox(true, true);
// Initialize auto crop area
- cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
- cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
+ cropBoxData.width = Math.min(
+ Math.max(cropBoxData.width, cropBoxData.minWidth),
+ cropBoxData.maxWidth,
+ );
+ cropBoxData.height = Math.min(
+ Math.max(cropBoxData.height, cropBoxData.minHeight),
+ cropBoxData.maxHeight,
+ );
// The width/height of auto crop area must large than "minWidth/Height"
- cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);
- cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);
- cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2;
- cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2;
+ cropBoxData.width = Math.max(
+ cropBoxData.minWidth,
+ cropBoxData.width * autoCropArea,
+ );
+ cropBoxData.height = Math.max(
+ cropBoxData.minHeight,
+ cropBoxData.height * autoCropArea,
+ );
+ cropBoxData.left =
+ canvasData.left + (canvasData.width - cropBoxData.width) / 2;
+ cropBoxData.top =
+ canvasData.top + (canvasData.height - cropBoxData.height) / 2;
cropBoxData.oldLeft = cropBoxData.left;
cropBoxData.oldTop = cropBoxData.top;
this.initialCropBoxData = assign({}, cropBoxData);
@@ -1404,8 +1648,22 @@
if (sizeLimited) {
var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
- var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;
- var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height;
+ var maxCropBoxWidth = limited
+ ? Math.min(
+ containerData.width,
+ canvasData.width,
+ canvasData.width + canvasData.left,
+ containerData.width - canvasData.left,
+ )
+ : containerData.width;
+ var maxCropBoxHeight = limited
+ ? Math.min(
+ containerData.height,
+ canvasData.height,
+ canvasData.height + canvasData.top,
+ containerData.height - canvasData.top,
+ )
+ : containerData.height;
// The min/maxCropBoxWidth/Height must be less than container's width/height
minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);
@@ -1439,8 +1697,12 @@
if (limited) {
cropBoxData.minLeft = Math.max(0, canvasData.left);
cropBoxData.minTop = Math.max(0, canvasData.top);
- cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width;
- cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height;
+ cropBoxData.maxLeft =
+ Math.min(containerData.width, canvasData.left + canvasData.width) -
+ cropBoxData.width;
+ cropBoxData.maxTop =
+ Math.min(containerData.height, canvasData.top + canvasData.height) -
+ cropBoxData.height;
} else {
cropBoxData.minLeft = 0;
cropBoxData.minTop = 0;
@@ -1453,30 +1715,61 @@
var options = this.options,
containerData = this.containerData,
cropBoxData = this.cropBoxData;
- if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {
+ if (
+ cropBoxData.width > cropBoxData.maxWidth ||
+ cropBoxData.width < cropBoxData.minWidth
+ ) {
cropBoxData.left = cropBoxData.oldLeft;
}
- if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {
+ if (
+ cropBoxData.height > cropBoxData.maxHeight ||
+ cropBoxData.height < cropBoxData.minHeight
+ ) {
cropBoxData.top = cropBoxData.oldTop;
}
- cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);
- cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);
+ cropBoxData.width = Math.min(
+ Math.max(cropBoxData.width, cropBoxData.minWidth),
+ cropBoxData.maxWidth,
+ );
+ cropBoxData.height = Math.min(
+ Math.max(cropBoxData.height, cropBoxData.minHeight),
+ cropBoxData.maxHeight,
+ );
this.limitCropBox(false, true);
- cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);
- cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);
+ cropBoxData.left = Math.min(
+ Math.max(cropBoxData.left, cropBoxData.minLeft),
+ cropBoxData.maxLeft,
+ );
+ cropBoxData.top = Math.min(
+ Math.max(cropBoxData.top, cropBoxData.minTop),
+ cropBoxData.maxTop,
+ );
cropBoxData.oldLeft = cropBoxData.left;
cropBoxData.oldTop = cropBoxData.top;
if (options.movable && options.cropBoxMovable) {
// Turn to move the canvas when the crop box is equal to the container
- setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL);
+ setData(
+ this.face,
+ DATA_ACTION,
+ cropBoxData.width >= containerData.width &&
+ cropBoxData.height >= containerData.height
+ ? ACTION_MOVE
+ : ACTION_ALL,
+ );
}
- setStyle(this.cropBox, assign({
- width: cropBoxData.width,
- height: cropBoxData.height
- }, getTransforms({
- translateX: cropBoxData.left,
- translateY: cropBoxData.top
- })));
+ setStyle(
+ this.cropBox,
+ assign(
+ {
+ width: cropBoxData.width,
+ height: cropBoxData.height,
+ },
+ getTransforms({
+ translateX: cropBoxData.left,
+ translateY: cropBoxData.top,
+ }),
+ ),
+ );
if (this.cropped && this.limited) {
this.limitCanvas(true, true);
}
@@ -1487,7 +1780,7 @@
output: function output() {
this.preview();
dispatchEvent(this.element, EVENT_CROP, this.getData());
- }
+ },
};
var preview = {
@@ -1496,8 +1789,8 @@
crossOrigin = this.crossOrigin;
var preview = this.options.preview;
var url = crossOrigin ? this.crossOriginUrl : this.url;
- var alt = element.alt || 'The image to preview';
- var image = document.createElement('img');
+ var alt = element.alt || "The image to preview";
+ var image = document.createElement("img");
if (crossOrigin) {
image.crossOrigin = crossOrigin;
}
@@ -1509,20 +1802,20 @@
return;
}
var previews = preview;
- if (typeof preview === 'string') {
+ if (typeof preview === "string") {
previews = element.ownerDocument.querySelectorAll(preview);
} else if (preview.querySelector) {
previews = [preview];
}
this.previews = previews;
forEach(previews, function (el) {
- var img = document.createElement('img');
+ var img = document.createElement("img");
// Save the original size for recover
setData(el, DATA_PREVIEW, {
width: el.offsetWidth,
height: el.offsetHeight,
- html: el.innerHTML
+ html: el.innerHTML,
});
if (crossOrigin) {
img.crossOrigin = crossOrigin;
@@ -1536,8 +1829,16 @@
* Add `height:auto` to override `height` attribute on IE8
* (Occur only when margin-top <= -height)
*/
- img.style.cssText = 'display:block;' + 'width:100%;' + 'height:auto;' + 'min-width:0!important;' + 'min-height:0!important;' + 'max-width:none!important;' + 'max-height:none!important;' + 'image-orientation:0deg!important;"';
- el.innerHTML = '';
+ img.style.cssText =
+ "display:block;" +
+ "width:100%;" +
+ "height:auto;" +
+ "min-width:0!important;" +
+ "min-height:0!important;" +
+ "max-width:none!important;" +
+ "max-height:none!important;" +
+ 'image-orientation:0deg!important;"';
+ el.innerHTML = "";
el.appendChild(img);
});
},
@@ -1546,7 +1847,7 @@
var data = getData(element, DATA_PREVIEW);
setStyle(element, {
width: data.width,
- height: data.height
+ height: data.height,
});
element.innerHTML = data.html;
removeData(element, DATA_PREVIEW);
@@ -1565,13 +1866,24 @@
if (!this.cropped || this.disabled) {
return;
}
- setStyle(this.viewBoxImage, assign({
- width: width,
- height: height
- }, getTransforms(assign({
- translateX: -left,
- translateY: -top
- }, imageData))));
+ setStyle(
+ this.viewBoxImage,
+ assign(
+ {
+ width: width,
+ height: height,
+ },
+ getTransforms(
+ assign(
+ {
+ translateX: -left,
+ translateY: -top,
+ },
+ imageData,
+ ),
+ ),
+ ),
+ );
forEach(this.previews, function (element) {
var data = getData(element, DATA_PREVIEW);
var originalWidth = data.width;
@@ -1590,17 +1902,28 @@
}
setStyle(element, {
width: newWidth,
- height: newHeight
+ height: newHeight,
});
- setStyle(element.getElementsByTagName('img')[0], assign({
- width: width * ratio,
- height: height * ratio
- }, getTransforms(assign({
- translateX: -left * ratio,
- translateY: -top * ratio
- }, imageData))));
+ setStyle(
+ element.getElementsByTagName("img")[0],
+ assign(
+ {
+ width: width * ratio,
+ height: height * ratio,
+ },
+ getTransforms(
+ assign(
+ {
+ translateX: -left * ratio,
+ translateY: -top * ratio,
+ },
+ imageData,
+ ),
+ ),
+ ),
+ );
});
- }
+ },
};
var events = {
@@ -1623,20 +1946,45 @@
if (isFunction(options.zoom)) {
addListener(element, EVENT_ZOOM, options.zoom);
}
- addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));
+ addListener(
+ cropper,
+ EVENT_POINTER_DOWN,
+ (this.onCropStart = this.cropStart.bind(this)),
+ );
if (options.zoomable && options.zoomOnWheel) {
- addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {
- passive: false,
- capture: true
- });
+ addListener(
+ cropper,
+ EVENT_WHEEL,
+ (this.onWheel = this.wheel.bind(this)),
+ {
+ passive: false,
+ capture: true,
+ },
+ );
}
if (options.toggleDragModeOnDblclick) {
- addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));
+ addListener(
+ cropper,
+ EVENT_DBLCLICK,
+ (this.onDblclick = this.dblclick.bind(this)),
+ );
}
- addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this));
- addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this));
+ addListener(
+ element.ownerDocument,
+ EVENT_POINTER_MOVE,
+ (this.onCropMove = this.cropMove.bind(this)),
+ );
+ addListener(
+ element.ownerDocument,
+ EVENT_POINTER_UP,
+ (this.onCropEnd = this.cropEnd.bind(this)),
+ );
if (options.responsive) {
- addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));
+ addListener(
+ window,
+ EVENT_RESIZE,
+ (this.onResize = this.resize.bind(this)),
+ );
}
},
unbind: function unbind() {
@@ -1662,18 +2010,22 @@
if (options.zoomable && options.zoomOnWheel) {
removeListener(cropper, EVENT_WHEEL, this.onWheel, {
passive: false,
- capture: true
+ capture: true,
});
}
if (options.toggleDragModeOnDblclick) {
removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);
}
- removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);
+ removeListener(
+ element.ownerDocument,
+ EVENT_POINTER_MOVE,
+ this.onCropMove,
+ );
removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);
if (options.responsive) {
removeListener(window, EVENT_RESIZE, this.onResize);
}
- }
+ },
};
var handlers = {
@@ -1698,12 +2050,16 @@
}
this.render();
if (options.restore) {
- this.setCanvasData(forEach(canvasData, function (n, i) {
- canvasData[i] = n * ratio;
- }));
- this.setCropBoxData(forEach(cropBoxData, function (n, i) {
- cropBoxData[i] = n * ratio;
- }));
+ this.setCanvasData(
+ forEach(canvasData, function (n, i) {
+ canvasData[i] = n * ratio;
+ }),
+ );
+ this.setCropBoxData(
+ forEach(cropBoxData, function (n, i) {
+ cropBoxData[i] = n * ratio;
+ }),
+ );
}
}
},
@@ -1711,7 +2067,9 @@
if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {
return;
}
- this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);
+ this.setDragMode(
+ hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP,
+ );
},
wheel: function wheel(event) {
var _this = this;
@@ -1742,15 +2100,17 @@
cropStart: function cropStart(event) {
var buttons = event.buttons,
button = event.button;
- if (this.disabled
-
- // Handle mouse event and pointer event and ignore touch event
- || (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && (
- // No primary button (Usually the left button)
- isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0
-
- // Open context menu
- || event.ctrlKey)) {
+ if (
+ this.disabled ||
+ // Handle mouse event and pointer event and ignore touch event
+ ((event.type === "mousedown" ||
+ (event.type === "pointerdown" && event.pointerType === "mouse")) &&
+ // No primary button (Usually the left button)
+ ((isNumber(buttons) && buttons !== 1) ||
+ (isNumber(button) && button !== 0) ||
+ // Open context menu
+ event.ctrlKey))
+ ) {
return;
}
var options = this.options,
@@ -1765,7 +2125,11 @@
// Handle mouse event and pointer event
pointers[event.pointerId || 0] = getPointer(event);
}
- if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {
+ if (
+ Object.keys(pointers).length > 1 &&
+ options.zoomable &&
+ options.zoomOnTouch
+ ) {
action = ACTION_ZOOM;
} else {
action = getData(event.target, DATA_ACTION);
@@ -1773,10 +2137,12 @@
if (!REGEXP_ACTIONS.test(action)) {
return;
}
- if (dispatchEvent(this.element, EVENT_CROP_START, {
- originalEvent: event,
- action: action
- }) === false) {
+ if (
+ dispatchEvent(this.element, EVENT_CROP_START, {
+ originalEvent: event,
+ action: action,
+ }) === false
+ ) {
return;
}
@@ -1796,10 +2162,12 @@
}
var pointers = this.pointers;
event.preventDefault();
- if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
- originalEvent: event,
- action: action
- }) === false) {
+ if (
+ dispatchEvent(this.element, EVENT_CROP_MOVE, {
+ originalEvent: event,
+ action: action,
+ }) === false
+ ) {
return;
}
if (event.changedTouches) {
@@ -1830,17 +2198,21 @@
}
event.preventDefault();
if (!Object.keys(pointers).length) {
- this.action = '';
+ this.action = "";
}
if (this.cropping) {
this.cropping = false;
- toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);
+ toggleClass(
+ this.dragBox,
+ CLASS_MODAL,
+ this.cropped && this.options.modal,
+ );
}
dispatchEvent(this.element, EVENT_CROP_END, {
originalEvent: event,
- action: action
+ action: action,
});
- }
+ },
};
var change = {
@@ -1872,13 +2244,25 @@
if (this.limited) {
minLeft = cropBoxData.minLeft;
minTop = cropBoxData.minTop;
- maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);
- maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);
+ maxWidth =
+ minLeft +
+ Math.min(
+ containerData.width,
+ canvasData.width,
+ canvasData.left + canvasData.width,
+ );
+ maxHeight =
+ minTop +
+ Math.min(
+ containerData.height,
+ canvasData.height,
+ canvasData.top + canvasData.height,
+ );
}
var pointer = pointers[Object.keys(pointers)[0]];
var range = {
x: pointer.endX - pointer.startX,
- y: pointer.endY - pointer.startY
+ y: pointer.endY - pointer.startY,
};
var check = function check(side) {
switch (side) {
@@ -1913,7 +2297,11 @@
// Resize crop box
case ACTION_EAST:
- if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) {
+ if (
+ range.x >= 0 &&
+ (right >= maxWidth ||
+ (aspectRatio && (top <= minTop || bottom >= maxHeight)))
+ ) {
renderable = false;
break;
}
@@ -1930,7 +2318,11 @@
}
break;
case ACTION_NORTH:
- if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) {
+ if (
+ range.y <= 0 &&
+ (top <= minTop ||
+ (aspectRatio && (left <= minLeft || right >= maxWidth)))
+ ) {
renderable = false;
break;
}
@@ -1948,7 +2340,11 @@
}
break;
case ACTION_WEST:
- if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) {
+ if (
+ range.x <= 0 &&
+ (left <= minLeft ||
+ (aspectRatio && (top <= minTop || bottom >= maxHeight)))
+ ) {
renderable = false;
break;
}
@@ -1966,7 +2362,11 @@
}
break;
case ACTION_SOUTH:
- if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) {
+ if (
+ range.y >= 0 &&
+ (bottom >= maxHeight ||
+ (aspectRatio && (left <= minLeft || right >= maxWidth)))
+ ) {
renderable = false;
break;
}
@@ -2232,7 +2632,7 @@
p.startX = p.endX;
p.startY = p.endY;
});
- }
+ },
};
var methods = {
@@ -2269,7 +2669,7 @@
left: 0,
top: 0,
width: 0,
- height: 0
+ height: 0,
});
this.cropped = false;
this.renderCropBox();
@@ -2289,7 +2689,10 @@
* @returns {Cropper} this
*/
replace: function replace(url) {
- var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ var hasSameSize =
+ arguments.length > 1 && arguments[1] !== undefined
+ ? arguments[1]
+ : false;
if (!this.disabled && url) {
if (this.isImg) {
this.element.src = url;
@@ -2300,7 +2703,7 @@
if (this.ready) {
this.viewBoxImage.src = url;
forEach(this.previews, function (element) {
- element.getElementsByTagName('img')[0].src = url;
+ element.getElementsByTagName("img")[0].src = url;
});
}
} else {
@@ -2353,11 +2756,17 @@
* @returns {Cropper} this
*/
move: function move(offsetX) {
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX;
+ var offsetY =
+ arguments.length > 1 && arguments[1] !== undefined
+ ? arguments[1]
+ : offsetX;
var _this$canvasData = this.canvasData,
left = _this$canvasData.left,
top = _this$canvasData.top;
- return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));
+ return this.moveTo(
+ isUndefined(offsetX) ? offsetX : left + Number(offsetX),
+ isUndefined(offsetY) ? offsetY : top + Number(offsetY),
+ );
},
/**
* Move the canvas to an absolute point
@@ -2366,7 +2775,8 @@
* @returns {Cropper} this
*/
moveTo: function moveTo(x) {
- var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
+ var y =
+ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
var canvasData = this.canvasData;
var changed = false;
x = Number(x);
@@ -2400,7 +2810,11 @@
} else {
ratio = 1 + ratio;
}
- return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);
+ return this.zoomTo(
+ (canvasData.width * ratio) / canvasData.naturalWidth,
+ null,
+ _originalEvent,
+ );
},
/**
* Zoom the canvas to an absolute ratio
@@ -2420,27 +2834,42 @@
if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {
var newWidth = naturalWidth * ratio;
var newHeight = naturalHeight * ratio;
- if (dispatchEvent(this.element, EVENT_ZOOM, {
- ratio: ratio,
- oldRatio: width / naturalWidth,
- originalEvent: _originalEvent
- }) === false) {
+ if (
+ dispatchEvent(this.element, EVENT_ZOOM, {
+ ratio: ratio,
+ oldRatio: width / naturalWidth,
+ originalEvent: _originalEvent,
+ }) === false
+ ) {
return this;
}
if (_originalEvent) {
var pointers = this.pointers;
var offset = getOffset(this.cropper);
- var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
- pageX: _originalEvent.pageX,
- pageY: _originalEvent.pageY
- };
+ var center =
+ pointers && Object.keys(pointers).length
+ ? getPointersCenter(pointers)
+ : {
+ pageX: _originalEvent.pageX,
+ pageY: _originalEvent.pageY,
+ };
// Zoom from the triggering point of the event
- canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width);
- canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height);
- } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
- canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width);
- canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height);
+ canvasData.left -=
+ (newWidth - width) *
+ ((center.pageX - offset.left - canvasData.left) / width);
+ canvasData.top -=
+ (newHeight - height) *
+ ((center.pageY - offset.top - canvasData.top) / height);
+ } else if (
+ isPlainObject(pivot) &&
+ isNumber(pivot.x) &&
+ isNumber(pivot.y)
+ ) {
+ canvasData.left -=
+ (newWidth - width) * ((pivot.x - canvasData.left) / width);
+ canvasData.top -=
+ (newHeight - height) * ((pivot.y - canvasData.top) / height);
} else {
// Zoom from the center of the canvas
canvasData.left -= (newWidth - width) / 2;
@@ -2467,7 +2896,12 @@
*/
rotateTo: function rotateTo(degree) {
degree = Number(degree);
- if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {
+ if (
+ isNumber(degree) &&
+ this.ready &&
+ !this.disabled &&
+ this.options.rotatable
+ ) {
this.imageData.rotate = degree % 360;
this.renderCanvas(true, true);
}
@@ -2498,7 +2932,10 @@
* @returns {Cropper} this
*/
scale: function scale(scaleX) {
- var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;
+ var scaleY =
+ arguments.length > 1 && arguments[1] !== undefined
+ ? arguments[1]
+ : scaleX;
var imageData = this.imageData;
var transformed = false;
scaleX = Number(scaleX);
@@ -2524,7 +2961,10 @@
* @returns {Object} The result cropped data.
*/
getData: function getData() {
- var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+ var rounded =
+ arguments.length > 0 && arguments[0] !== undefined
+ ? arguments[0]
+ : false;
var options = this.options,
imageData = this.imageData,
canvasData = this.canvasData,
@@ -2535,7 +2975,7 @@
x: cropBoxData.left - canvasData.left,
y: cropBoxData.top - canvasData.top,
width: cropBoxData.width,
- height: cropBoxData.height
+ height: cropBoxData.height,
};
var ratio = imageData.width / imageData.naturalWidth;
forEach(data, function (n, i) {
@@ -2556,7 +2996,7 @@
x: 0,
y: 0,
width: 0,
- height: 0
+ height: 0,
};
}
if (options.rotatable) {
@@ -2638,9 +3078,12 @@
var canvasData = this.canvasData;
var data = {};
if (this.ready) {
- forEach(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (n) {
- data[n] = canvasData[n];
- });
+ forEach(
+ ["left", "top", "width", "height", "naturalWidth", "naturalHeight"],
+ function (n) {
+ data[n] = canvasData[n];
+ },
+ );
}
return data;
},
@@ -2682,7 +3125,7 @@
left: cropBoxData.left,
top: cropBoxData.top,
width: cropBoxData.width,
- height: cropBoxData.height
+ height: cropBoxData.height,
};
}
return data || {};
@@ -2729,12 +3172,18 @@
* @returns {HTMLCanvasElement} - The result canvas.
*/
getCroppedCanvas: function getCroppedCanvas() {
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+ var options =
+ arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (!this.ready || !window.HTMLCanvasElement) {
return null;
}
var canvasData = this.canvasData;
- var source = getSourceCanvas(this.image, this.imageData, canvasData, options);
+ var source = getSourceCanvas(
+ this.image,
+ this.imageData,
+ canvasData,
+ options,
+ );
// Returns the source canvas if it is not cropped.
if (!this.cropped) {
@@ -2756,30 +3205,35 @@
var maxSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: options.maxWidth || Infinity,
- height: options.maxHeight || Infinity
+ height: options.maxHeight || Infinity,
});
- var minSizes = getAdjustedSizes({
- aspectRatio: aspectRatio,
- width: options.minWidth || 0,
- height: options.minHeight || 0
- }, 'cover');
+ var minSizes = getAdjustedSizes(
+ {
+ aspectRatio: aspectRatio,
+ width: options.minWidth || 0,
+ height: options.minHeight || 0,
+ },
+ "cover",
+ );
var _getAdjustedSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: options.width || (ratio !== 1 ? source.width : initialWidth),
- height: options.height || (ratio !== 1 ? source.height : initialHeight)
+ height:
+ options.height || (ratio !== 1 ? source.height : initialHeight),
}),
width = _getAdjustedSizes.width,
height = _getAdjustedSizes.height;
width = Math.min(maxSizes.width, Math.max(minSizes.width, width));
height = Math.min(maxSizes.height, Math.max(minSizes.height, height));
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
+ var canvas = document.createElement("canvas");
+ var context = canvas.getContext("2d");
canvas.width = normalizeDecimalNumber(width);
canvas.height = normalizeDecimalNumber(height);
- context.fillStyle = options.fillColor || 'transparent';
+ context.fillStyle = options.fillColor || "transparent";
context.fillRect(0, 0, width, height);
var _options$imageSmoothi = options.imageSmoothingEnabled,
- imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,
+ imageSmoothingEnabled =
+ _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,
imageSmoothingQuality = options.imageSmoothingQuality;
context.imageSmoothingEnabled = imageSmoothingEnabled;
if (imageSmoothingQuality) {
@@ -2836,14 +3290,26 @@
// Avoid "IndexSizeError"
if (dstWidth > 0 && dstHeight > 0) {
var scale = width / initialWidth;
- params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);
+ params.push(
+ dstX * scale,
+ dstY * scale,
+ dstWidth * scale,
+ dstHeight * scale,
+ );
}
// All the numerical parameters should be integer for `drawImage`
// https://github.com/fengyuanchen/cropper/issues/476
- context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) {
- return Math.floor(normalizeDecimalNumber(param));
- }))));
+ context.drawImage.apply(
+ context,
+ [source].concat(
+ _toConsumableArray(
+ params.map(function (param) {
+ return Math.floor(normalizeDecimalNumber(param));
+ }),
+ ),
+ ),
+ );
return canvas;
},
/**
@@ -2890,21 +3356,24 @@
}
}
return this;
- }
+ },
};
var AnotherCropper = WINDOW.Cropper;
- var Cropper = /*#__PURE__*/function () {
+ var Cropper = /*#__PURE__*/ (function () {
/**
* Create a new Cropper.
* @param {Element} element - The target element for cropping.
* @param {Object} [options={}] - The configuration options.
*/
function Cropper(element) {
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+ var options =
+ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Cropper);
if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {
- throw new Error('The first argument is required and must be an
or