- var page_Title = 'Image Cropper';
- var theme_customizer      = true;
- var image_cropper         = true;
- var sidebar               = true;
//- - var tooltip               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var height_equal          = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Image Cropper
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    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
            .img-cropper
              .grid.grid-cols-12.card-gap
                div(class="col-span-12")
                  .card.mb-6
                    .card-header
                      h5 Image Cropper
                      p.f-m-light.mt-1 
                        | Use image cropper.js
                    .card-body
                      .grid.grid-cols-12.card-gap.items-center
                        div(class="col-span-9 xl:col-span-12")
                          .img-container
                            img#image(src='../assets/images/other-images/bg-profile.png', alt='Picture')
                        div(class="col-span-3 xl:col-span-12")
                          .docs-preview.clearfix
                            .img-preview.preview-md
                            .img-preview.preview-sm
                            .img-preview.preview-xs
                          .docs-data
                            .input-group.input-group-sm
                              span.input-group-text X
                              input#dataX.form-control(type='text', placeholder='x')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text Y
                              input#dataY.form-control(type='text', placeholder='y')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text Width
                              input#dataWidth.form-control(type='text', placeholder='width')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text Height 
                              input#dataHeight.form-control(type='text', placeholder='height')
                              span.input-group-text px
                            .input-group.input-group-sm
                              span.input-group-text Rotate
                              input#dataRotate.form-control(type='text', placeholder='rotate')
                              span.input-group-text deg
                            .input-group.input-group-sm
                              span.input-group-text ScaleX
                              input#dataScaleX.form-control(type='text', placeholder='scaleX')
                            .input-group.input-group-sm
                              span.input-group-text ScaleY
                              input#dataScaleY.form-control(type='text', placeholder='scaleY')
                  .card
                    .card-body
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-8 xxl:col-span-8 xl:col-span-12")
                          .docs-buttons.flex.flex-wrap
                            .btn-group
                              button.btn.btn-primary.rounded-l-md(type='button', data-method='setDragMode', data-option='move', title='Move')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Move')
                                  span.fa-solid.fa-arrows-up-down-left-right.text-white
                              button.btn.button-light-primary.rounded-r-md(type='button', data-method='setDragMode', data-option='crop', title='Crop')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Crop')
                                  span.fa-solid.fa-crop.txt-primary
                            .btn-group
                              button.btn.btn-primary.rounded-l-md(type='button', data-method='zoom', data-option='0.1', title='Zoom In')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Zoom In')
                                  span.fa-solid.fa-magnifying-glass-plus.text-white
                              button.btn.button-light-primary.rounded-r-md(type='button', data-method='zoom', data-option='-0.1', title='Zoom Out')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Zoom Out')
                                  span.fa-solid.fa-magnifying-glass-minus.txt-primary
                            .btn-group
                              button.btn.btn-outline-secondary.rounded-l-md.border(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='Move Left')
                                  span.fa-solid.fa-arrow-left
                              button.btn.btn-outline-secondary.border(type='button', data-method='move', class="!rounded-none" data-option='10', data-second-option='0', title='Move Right')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Move Right')
                                  span.fa-solid.fa-arrow-right
                              button.btn.btn-outline-secondary.border(type='button', data-method='move', class="!rounded-none" data-option='0', data-second-option='-10', title='Move Up')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Move Up')
                                  span.fa-solid.fa-arrow-up
                              button.btn.btn-outline-secondary.rounded-r-md.border(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='Move Down')
                                  span.fa-solid.fa-arrow-down
                            .btn-group
                              button.btn.btn-outline-success.rounded-l-md.border(type='button', data-method='rotate', data-option='-45', title='Rotate Left')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Rotate Left')
                                  span.fa-solid.fa-rotate-left
                              button.btn.btn-outline-success.rounded-r-md.border(type='button', data-method='rotate', data-option='45', title='Rotate Right')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Rotate Right')
                                  span.fa-solid.fa-rotate-right
                            .btn-group
                              button.btn.btn-outline-info.rounded-l-md.border(type='button', data-method='scaleX', data-option='-1', title='Flip Horizontal')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Flip Horizontal')
                                  span.fa-solid.fa-arrows-left-right
                              button.btn.btn-outline-info.rounded-r-md.border(type='button', data-method='scaleY', data-option='-1', title='Flip Vertical')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Flip Vertical')
                                  span.fa-solid.fa-arrows-up-down
                            .btn-group
                              button.btn.btn-outline-warning.rounded-l-md.border(type='button', data-method='crop', title='Check')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Check')
                                  span.fa-solid.fa-check
                              button.btn.btn-outline-warning.rounded-r-md.border(type='button', data-method='clear', title='Clear')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Clear')
                                  span.fa-solid.fa-xmark
                            .btn-group
                              button.btn.btn-outline-danger.rounded-l-md.border(type='button', data-method='disable', title='Disable')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Disable')
                                  span.fa-solid.fa-lock
                              button.btn.btn-outline-danger.rounded-r-md.border(type='button', data-method='enable', title='Enable')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Enable')
                                  span.fa-solid.fa-unlock
                            .btn-group.flex
                              button.btn.btn-outline-dark.rounded-l-md.border(type='button', data-method='reset', title='Reset')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Reset')
                                  span.fa-solid.fa-arrows-rotate
                              label.btn.btn-outline-dark.btn-upload.border(for='inputImage', class="!rounded-none" 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='Upload')
                                  span.fa-solid.fa-upload
                              button.btn.btn-outline-dark.rounded-r-md.border(type='button', data-method='destroy', title='Destroy')
                                span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Destroy')
                                  span.fa-solid.fa-power-off
                          .docs-buttons.flex.flex-wrap
                            // /.modal
                            button.btn.btn-outline-danger.rounded.border(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-outline-info.rounded.border(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-outline-success.rounded.border(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-outline-warning.rounded.border(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.mb-0(rows='1', placeholder='Get data to here or set data with this value')
                        // /.docs-buttons
                        div(class="col-span-4 xxl:col-span-4 xl:col-span-12 docs-toggles box-col-12")
                          .btn-group.flex.flex-nowrap(data-bs-toggle='buttons')
                            label.btn.btn-info.active.border
                              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-info.border( class="!rounded-none")
                              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-info.border( class="!rounded-none")
                              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-info.border( class="!rounded-none")
                              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-info.border
                              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.flex.flex-nowrap(data-bs-toggle='buttons')
                            label.btn.btn-warning.active.border
                              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-warning.border( class="!rounded-none")
                              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-warning.border( class="!rounded-none")
                              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-warning.border
                              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.checkbox-primary(type='checkbox', name='responsive', checked='')
                                  label.form-check-label(for='responsive') responsive
                              li.dropdown-item
                                .form-check
                                  input#restore.form-check-input.checkbox-primary(type='checkbox', name='restore', checked='')
                                  label.form-check-label(for='restore') restore
                              li.dropdown-item
                                .form-check
                                  input#checkCrossOrigin.form-check-input.checkbox-primary(type='checkbox', name='checkCrossOrigin', checked='')
                                  label.form-check-label(for='checkCrossOrigin') checkCrossOrigin
                              li.dropdown-item
                                .form-check
                                  input#checkOrientation.form-check-input.checkbox-primary(type='checkbox', name='checkOrientation', checked='')
                                  label.form-check-label(for='checkOrientation') checkOrientation
                              li.dropdown-item
                                .form-check
                                  input#modal.form-check-input.checkbox-primary(type='checkbox', name='modal', checked='')
                                  label.form-check-label(for='modal') modal
                              li.dropdown-item
                                .form-check
                                  input#guides.form-check-input.checkbox-primary(type='checkbox', name='guides', checked='')
                                  label.form-check-label(for='guides') guides
                              li.dropdown-item
                                .form-check
                                  input#center.form-check-input.checkbox-primary(type='checkbox', name='center', checked='')
                                  label.form-check-label(for='center') center
                              li.dropdown-item
                                .form-check
                                  input#highlight.form-check-input.checkbox-primary(type='checkbox', name='highlight', checked='')
                                  label.form-check-label(for='highlight') highlight
                              li.dropdown-item
                                .form-check
                                  input#background.form-check-input.checkbox-primary(type='checkbox', name='background', checked='')
                                  label.form-check-label(for='background') background
                              li.dropdown-item
                                .form-check
                                  input#autoCrop.form-check-input.checkbox-primary(type='checkbox', name='autoCrop', checked='')
                                  label.form-check-label(for='autoCrop') autoCrop
                              li.dropdown-item
                                .form-check
                                  input#movable.form-check-input.checkbox-primary(type='checkbox', name='movable', checked='')
                                  label.form-check-label(for='movable') movable
                              li.dropdown-item
                                .form-check
                                  input#rotatable.form-check-input.checkbox-primary(type='checkbox', name='rotatable', checked='')
                                  label.form-check-label(for='rotatable') rotatable
                              li.dropdown-item
                                .form-check
                                  input#scalable.form-check-input.checkbox-primary(type='checkbox', name='scalable', checked='')
                                  label.form-check-label(for='scalable') scalable
                              li.dropdown-item
                                .form-check
                                  input#zoomable.form-check-input.checkbox-primary(type='checkbox', name='zoomable', checked='')
                                  label.form-check-label(for='zoomable') zoomable
                              li.dropdown-item
                                .form-check
                                  input#zoomOnTouch.form-check-input.checkbox-primary(type='checkbox', name='zoomOnTouch', checked='')
                                  label.form-check-label(for='zoomOnTouch') zoomOnTouch
                              li.dropdown-item
                                .form-check
                                  input#zoomOnWheel.form-check-input.checkbox-primary(type='checkbox', name='zoomOnWheel', checked='')
                                  label.form-check-label(for='zoomOnWheel') zoomOnWheel
                              li.dropdown-item
                                .form-check
                                  input#cropBoxMovable.form-check-input.checkbox-primary(type='checkbox', name='cropBoxMovable', checked='')
                                  label.form-check-label(for='cropBoxMovable') cropBoxMovable
                              li.dropdown-item
                                .form-check
                                  input#cropBoxResizable.form-check-input.checkbox-primary(type='checkbox', name='cropBoxResizable', checked='')
                                  label.form-check-label(for='cropBoxResizable') cropBoxResizable
                              li.dropdown-item
                                .form-check
                                  input#toggleDragModeOnDblclick.form-check-input.checkbox-primary(type='checkbox', name='toggleDragModeOnDblclick', checked='')
                                  label.form-check-label(for='toggleDragModeOnDblclick') toggleDragModeOnDblclick
                  .grid.grid-cols-12.card-gap
                    div(class="col-span-6 md:col-span-12")
                      .card
                        .card-header
                          h5 Disabled Zoom
                          p.f-m-light.mt-1 
                            | Use 
                            code crop-zoomable 
                            | class to disabled zoom-in and zoom-out.
                        .card-body
                          .img-container
                            img.crop-zoomable.max-w-full.h-auto(src='../assets/images/other-images/img-cropper.jpg', alt='baby')
                    div(class="col-span-6 md:col-span-12")
                      .card
                        .card-header
                          h5 Auto-crop Disable
                          p.f-m-light.mt-1 
                            | Use
                            code  crop-auto 
                            | class to cropped image in any directions.
                        .card-body
                          .img-container
                            img.crop-auto.max-w-full.h-auto(src='../assets/images/slider/1.jpg', alt='#')
                    div(class="col-span-6 md:col-span-12")
                      .card
                        .card-header
                          h5 Disabled Image Drag
                          p.f-m-light.mt-1 
                            | Use
                            code  crop-drag 
                            | class to move disabled.
                        .card-body
                          .img-container
                            img.crop-drag.max-w-full.h-auto(src='../assets/images/other-images/sea.jpg', alt='#')
                    div(class="col-span-6 md:col-span-12")
                      .card
                        .card-header
                          h5 Minimum Zone Size
                          p.f-m-light.mt-1 
                            | Use
                            code  crop-min 
                            | class to minimum and maximum crop size defined.
                        .card-body
                          .img-container
                            img.crop-min.max-w-full.h-auto(src='../assets/images/slider/9.jpg', alt='#')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
