aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/examples/cropper-in-modal.html
diff options
context:
space:
mode:
Diffstat (limited to 'library/cropperjs/examples/cropper-in-modal.html')
-rw-r--r--library/cropperjs/examples/cropper-in-modal.html76
1 files changed, 0 insertions, 76 deletions
diff --git a/library/cropperjs/examples/cropper-in-modal.html b/library/cropperjs/examples/cropper-in-modal.html
deleted file mode 100644
index a9ce3e80b..000000000
--- a/library/cropperjs/examples/cropper-in-modal.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <title>Cropper.js</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
- <link rel="stylesheet" href="../dist/cropper.css">
- <style>
- .img-container img {
- max-width: 100%;
- }
- </style>
-</head>
-<body>
-
- <div class="container">
- <h1>Cropper in a Bootstrap modal</h1>
-
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-primary" data-target="#modal" data-toggle="modal">
- Launch the demo
- </button>
-
- <!-- Modal -->
- <div class="modal fade" id="modal" role="dialog" aria-labelledby="modalLabel" tabindex="-1">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="modalLabel">Cropper</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="modal-body">
- <div class="img-container">
- <img id="image" src="../docs/images/picture.jpg" alt="Picture">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
- <script src="../dist/cropper.js"></script>
- <script>
- window.addEventListener('DOMContentLoaded', function () {
- var image = document.getElementById('image');
- var cropBoxData;
- var canvasData;
- var cropper;
-
- $('#modal').on('shown.bs.modal', function () {
- cropper = new Cropper(image, {
- autoCropArea: 0.5,
- ready: function () {
-
- // Strict mode: set crop box data first
- cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
- }
- });
- }).on('hidden.bs.modal', function () {
- cropBoxData = cropper.getCropBoxData();
- canvasData = cropper.getCanvasData();
- cropper.destroy();
- });
- });
- </script>
-</body>
-</html>