- var theme_customizer      = true;
- var image_cropper         = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h3
                    | Image Cropper

                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Image Cropper
          // Container-fluid starts
          .container-fluid
            .img-cropper
              .row
                .col-sm-12
                  .card
                    .card-header
                      h5 Image Cropper
                    .card-body
                      .row
                        .col-xl-9.col-md-12
                          .img-container
                            img#image(src='../assets/images/other-images/img-cropper.jpg', alt='Picture')
                        .col-xl-3.col-md-12
                          // <h3>Preview:</h3>
                          .docs-preview.clearfix
                            // <div class="img-preview preview-lg"></div>
                            .img-preview.preview-md
                            .img-preview.preview-sm
                            .img-preview.preview-xs
                          // <h3>Data:</h3>
                          .docs-data
                            .input-group.input-group-sm
                              span.input-group-text(for='dataX') X
                              input#dataX.form-control(type='text', placeholder='x')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text(for='dataY') Y
                              input#dataY.form-control(type='text', placeholder='y')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text(for='dataWidth') Width
                              input#dataWidth.form-control(type='text', placeholder='width')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text(for='dataHeight') Height 
                              input#dataHeight.form-control(type='text', placeholder='height')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text(for='dataRotate') Rotate
                              input#dataRotate.form-control(type='text', placeholder='rotate')
                              span.input-group-text deg
                            .input-group.input-group-sm
                              span.input-group-text(for='dataScaleX') ScaleX
                              input#dataScaleX.form-control(type='text', placeholder='scaleX')
                            .input-group.input-group-sm
                              span.input-group-text(for='dataScaleY') ScaleY
                              input#dataScaleY.form-control(type='text', placeholder='scaleY')
                  .card
                    .card-body
                      .row.g-2
                        .col-xl-9.col-md-12.docs-buttons
                          .btn-group
                            button.btn.btn-primary(type='button', data-method='setDragMode', data-option='move', title='Move')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setDragMode", "move")')
                                span.fa.fa-arrows
                            button.btn.btn-primary(type='button', data-method='setDragMode', data-option='crop', title='Crop')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setDragMode", "crop")')
                                span.fa.fa-crop
                          .btn-group
                            button.btn.btn-primary(type='button', data-method='zoom', data-option='0.1', title='Zoom In')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("zoom", 0.1)')
                                span.fa.fa-search-plus
                            button.btn.btn-primary(type='button', data-method='zoom', data-option='-0.1', title='Zoom Out')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("zoom", -0.1)')
                                span.fa.fa-search-minus
                          .btn-group
                            button.btn.btn-outline-primary(type='button', data-method='move', data-option='-10', data-second-option='0', title='Move Left')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", -10, 0)')
                                span.fa.fa-arrow-left
                            button.btn.btn-outline-primary(type='button', data-method='move', data-option='10', data-second-option='0', title='Move Right')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", 10, 0)')
                                span.fa.fa-arrow-right
                            button.btn.btn-outline-primary(type='button', data-method='move', data-option='0', data-second-option='-10', title='Move Up')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", 0, -10)')
                                span.fa.fa-arrow-up
                            button.btn.btn-outline-primary(type='button', data-method='move', data-option='0', data-second-option='10', title='Move Down')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", 0, 10)')
                                span.fa.fa-arrow-down
                          .btn-group
                            button.btn.btn-outline-primary(type='button', data-method='rotate', data-option='-45', title='Rotate Left')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("rotate", -45)')
                                span.fa.fa-rotate-left
                            button.btn.btn-outline-primary(type='button', data-method='rotate', data-option='45', title='Rotate Right')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("rotate", 45)')
                                span.fa.fa-rotate-right
                          .btn-group
                            button.btn.btn-outline-primary(type='button', data-method='scaleX', data-option='-1', title='Flip Horizontal')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("scaleX", -1)')
                                span.fa.fa-arrows-h
                            button.btn.btn-outline-primary(type='button', data-method='scaleY', data-option='-1', title='Flip Vertical')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("scaleY", -1)')
                                span.fa.fa-arrows-v
                          .btn-group
                            button.btn.btn-outline-primary(type='button', data-method='crop', title='Crop')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("crop")')
                                span.fa.fa-check
                            button.btn.btn-outline-primary(type='button', data-method='clear', title='Clear')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("clear")')
                                span.fa.fa-remove
                          .btn-group
                            button.btn.btn-outline-primary(type='button', data-method='disable', title='Disable')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("disable")')
                                span.fa.fa-lock
                            button.btn.btn-outline-primary(type='button', data-method='enable', title='Enable')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("enable")')
                                span.fa.fa-unlock
                          .btn-group
                            button.btn.btn-outline-primary(type='button', data-method='reset', title='Reset')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("reset")')
                                span.fa.fa-refresh
                            label.btn.btn-outline-primary.btn-upload(for='inputImage', title='Upload image file')
                              input#inputImage.sr-only(type='file', name='file', accept='.jpg,.jpeg,.png,.gif,.bmp,.tiff')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Import image with Blob URLs')
                                span.fa.fa-upload
                            button.btn.btn-outline-primary(type='button', data-method='destroy', title='Destroy')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("destroy")')
                                span.fa.fa-power-off
                          br
                          .btn-group.btn-group-crop
                            button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "maxWidth": 4096, "maxHeight": 4096 }')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { maxWidth: 4096, maxHeight: 4096 })')
                                | Get Cropped Canvas
                            button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "width": 160, "height": 90 }')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { width: 160, height: 90 })')
                                | 160×90
                            button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "width": 320, "height": 180 }')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { width: 320, height: 180 })')
                                | 320×180
                          // Show the cropped image in modal
                          #getCroppedCanvasModal.modal.fade.docs-cropped(aria-hidden='true', aria-labelledby='getCroppedCanvasTitle', role='dialog', tabindex='-1')
                            .modal-dialog
                              .modal-content
                                .modal-header
                                  h5#getCroppedCanvasTitle.modal-title Cropped
                                  button.close(type='button', data-dismiss='modal', aria-label='Close')
                                    span(aria-hidden='true') ×
                                .modal-body
                                .modal-footer
                                  button.btn.btn-primary(type='button', data-dismiss='modal') Close
                                  a#download.btn.btn-outline-primary(href='javascript:void(0);', download='cropped.jpg') Download
                          // /.modal
                          button.btn.btn-primary(type='button', data-method='getData', data-option='', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getData")')
                              | Get Data
                          button.btn.btn-primary(type='button', data-method='setData', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setData", data)')
                              | Set Data
                          button.btn.btn-primary(type='button', data-method='getContainerData', data-option='', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getContainerData")')
                              | Get Container Data
                          button.btn.btn-primary(type='button', data-method='getImageData', data-option='', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getImageData")')
                              | Get Image Data
                          button.btn.btn-primary(type='button', data-method='getCanvasData', data-option='', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCanvasData")')
                              | Get Canvas Data
                          button.btn.btn-primary(type='button', data-method='setCanvasData', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setCanvasData", data)')
                              | Set Canvas Data
                          button.btn.btn-primary(type='button', data-method='getCropBoxData', data-option='', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCropBoxData")')
                              | Get Crop Box Data
                          button.btn.btn-primary(type='button', data-method='setCropBoxData', data-bs-target='#putData')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setCropBoxData", data)')
                              | Set Crop Box Data
                          button.btn.btn-primary(type='button', data-method='moveTo', data-option='0')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='cropper.moveTo(0)')
                              | Move to [0,0]
                          button.btn.btn-primary(type='button', data-method='zoomTo', data-option='1')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='cropper.zoomTo(1)')
                              | Zoom to 100%
                          button.btn.btn-primary(type='button', data-method='rotateTo', data-option='180')
                            span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='cropper.rotateTo(180)')
                              | Rotate 180°
                          button.btn.btn-primary(type='button', data-method='scale', data-option='-2', data-second-option='-1')
                            span.docs-tooltip(data-bs-toggle='tooltip', title='cropper.scale(-2, -1)')
                              | Scale (-2, -1)
                          textarea#putData.form-control(rows='1', placeholder='Get data to here or set data with this value')
                        // /.docs-buttons
                        .col-xl-3.col-md-12.docs-toggles
                          // <h3>Toggles:</h3>
                          .btn-group.d-flex.flex-nowrap(data-bs-toggle='buttons')
                            label.btn.btn-primary.active
                              input#aspectRatio0.sr-only(type='radio', name='aspectRatio', value='1.7777777777777777')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 16 / 9')
                                | 16:9
                            label.btn.btn-outline-primary
                              input#aspectRatio1.sr-only(type='radio', name='aspectRatio', value='1.3333333333333333')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 4 / 3')
                                | 4:3
                            label.btn.btn-outline-primary
                              input#aspectRatio2.sr-only(type='radio', name='aspectRatio', value='1')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 1 / 1')
                                | 1:1
                            label.btn.btn-outline-primary
                              input#aspectRatio3.sr-only(type='radio', name='aspectRatio', value='0.6666666666666666')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 2 / 3')
                                | 2:3
                            label.btn.btn-outline-primary
                              input#aspectRatio4.sr-only(type='radio', name='aspectRatio', value='NaN')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: NaN')
                                | Free
                          .btn-group.d-flex.flex-nowrap(data-bs-toggle='buttons')
                            label.btn.btn-primary.active
                              input#viewMode0.sr-only(type='radio', name='viewMode', value='0', checked='')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 0')
                                | VM0
                            label.btn.btn-outline-primary
                              input#viewMode1.sr-only(type='radio', name='viewMode', value='1')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 1')
                                | VM1
                            label.btn.btn-outline-primary
                              input#viewMode2.sr-only(type='radio', name='viewMode', value='2')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 2')
                                | VM2
                            label.btn.btn-outline-primary
                              input#viewMode3.sr-only(type='radio', name='viewMode', value='3')
                              span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 3')
                                | VM3
                          .dropdown.dropup.docs-options.mb-0
                            button#toggleOptions.btn.btn-primary.btn-block.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='true')
                              | Toggle Options
                              span.caret
                            ul.dropdown-menu(aria-labelledby='toggleOptions', role='menu')
                              li.dropdown-item
                                .form-check
                                  input#responsive.form-check-input(type='checkbox', name='responsive', checked='')
                                  label.form-check-label(for='responsive') responsive
                              li.dropdown-item
                                .form-check
                                  input#restore.form-check-input(type='checkbox', name='restore', checked='')
                                  label.form-check-label(for='restore') restore
                              li.dropdown-item
                                .form-check
                                  input#checkCrossOrigin.form-check-input(type='checkbox', name='checkCrossOrigin', checked='')
                                  label.form-check-label(for='checkCrossOrigin') checkCrossOrigin
                              li.dropdown-item
                                .form-check
                                  input#checkOrientation.form-check-input(type='checkbox', name='checkOrientation', checked='')
                                  label.form-check-label(for='checkOrientation') checkOrientation
                              li.dropdown-item
                                .form-check
                                  input#modal.form-check-input(type='checkbox', name='modal', checked='')
                                  label.form-check-label(for='modal') modal
                              li.dropdown-item
                                .form-check
                                  input#guides.form-check-input(type='checkbox', name='guides', checked='')
                                  label.form-check-label(for='guides') guides
                              li.dropdown-item
                                .form-check
                                  input#center.form-check-input(type='checkbox', name='center', checked='')
                                  label.form-check-label(for='center') center
                              li.dropdown-item
                                .form-check
                                  input#highlight.form-check-input(type='checkbox', name='highlight', checked='')
                                  label.form-check-label(for='highlight') highlight
                              li.dropdown-item
                                .form-check
                                  input#background.form-check-input(type='checkbox', name='background', checked='')
                                  label.form-check-label(for='background') background
                              li.dropdown-item
                                .form-check
                                  input#autoCrop.form-check-input(type='checkbox', name='autoCrop', checked='')
                                  label.form-check-label(for='autoCrop') autoCrop
                              li.dropdown-item
                                .form-check
                                  input#movable.form-check-input(type='checkbox', name='movable', checked='')
                                  label.form-check-label(for='movable') movable
                              li.dropdown-item
                                .form-check
                                  input#rotatable.form-check-input(type='checkbox', name='rotatable', checked='')
                                  label.form-check-label(for='rotatable') rotatable
                              li.dropdown-item
                                .form-check
                                  input#scalable.form-check-input(type='checkbox', name='scalable', checked='')
                                  label.form-check-label(for='scalable') scalable
                              li.dropdown-item
                                .form-check
                                  input#zoomable.form-check-input(type='checkbox', name='zoomable', checked='')
                                  label.form-check-label(for='zoomable') zoomable
                              li.dropdown-item
                                .form-check
                                  input#zoomOnTouch.form-check-input(type='checkbox', name='zoomOnTouch', checked='')
                                  label.form-check-label(for='zoomOnTouch') zoomOnTouch
                              li.dropdown-item
                                .form-check
                                  input#zoomOnWheel.form-check-input(type='checkbox', name='zoomOnWheel', checked='')
                                  label.form-check-label(for='zoomOnWheel') zoomOnWheel
                              li.dropdown-item
                                .form-check
                                  input#cropBoxMovable.form-check-input(type='checkbox', name='cropBoxMovable', checked='')
                                  label.form-check-label(for='cropBoxMovable') cropBoxMovable
                              li.dropdown-item
                                .form-check
                                  input#cropBoxResizable.form-check-input(type='checkbox', name='cropBoxResizable', checked='')
                                  label.form-check-label(for='cropBoxResizable') cropBoxResizable
                              li.dropdown-item
                                .form-check
                                  input#toggleDragModeOnDblclick.form-check-input(type='checkbox', name='toggleDragModeOnDblclick', checked='')
                                  label.form-check-label(for='toggleDragModeOnDblclick') toggleDragModeOnDblclick
                          // /.dropdown
                          // /.docs-toggles
                  .row
                    .col-md-6
                      .card
                        .card-header
                          h5 Disabled Zoom
                        .card-body
                          .img-container
                            img.crop-zoomable.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                    .col-md-6
                      .card
                        .card-header
                          h5 Autocrop Disable
                        .card-body
                          .img-container
                            img.crop-auto.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                    .col-md-6
                      .card
                        .card-header
                          h5 Disabled Image Drag
                        .card-body
                          .img-container
                            img.crop-drag.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                    .col-md-6
                      .card
                        .card-header
                          h5 Minimum Zone Size
                        .card-body
                          .img-container
                            img.crop-min.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
