appscms-tools-theme 2.1.7 → 2.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a8f11e33a5e4fa43b24c3c4e38962363e709bbae4f2cca8d3d754818efeea2c
-  data.tar.gz: 67f6ecce54af396a3c938777732506fff204250a6d329c5640930df1f6e4b611
+  metadata.gz: 51b3c31ee812993687656e68b2412e478286a67cbb98d2e104b9292fdb0bce6f
+  data.tar.gz: cb31442354d68bb04bcfb6a790c1b140fbc2081eb83bf2bb51b35e70d6b6050b
 SHA512:
-  metadata.gz: eefeeba7c687f986c8b4025107a8a5ae6ca6ce778aeeb9c509c12bae544ac3d069b5e9fa9f3871e7f51d9a5dcae261cc1a4aa633e5e1e14dad287088539088f2
-  data.tar.gz: 730943d59eeae6263b46d87a59e4ff02e5d55f4487bb04465d0476e8c34bf32b8f00af91e01eb9c3a3b9e4422f204791677e035a74d0a393882d8a8f94abfcf5
+  metadata.gz: 93cb976dbffe80210bc811ee1ce7c7fbee6c4ae099744f191f3747ea2896753fa78b783dd761ebfd53fa9d82f84444779c7e252dc4ae33629cb0d8618a7658f9
+  data.tar.gz: 457d0caab467afae723489e2e5e13bf73856c76ab389a6e2b3e3b2941026f15a995386e7a7bda5a0ebe8162995cfbca89ea1c993e05d483599fc8f683b7c79a6

data/_data/feature/en/theframe.json

@@ -20,9 +20,18 @@
     ],
     "jsfilepaths": [
         "/assets/js/googledrive.js",
-        "/js/canvas-image-effects.js"
+        "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js",
+        "/assets/js/frame.js"
     ],
     "cssfilepaths": [
+        "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css",
         "/assets/css/frame.css"
-    ]
+    ],
+    "image": {
+        "src": "/assets/images/gallary.png",
+        "height": 277,
+        "width": 378,
+        "x": 110,
+        "y": 180
+    }
 }

data/_layouts/frame.html

@@ -3,8 +3,10 @@ layout: feature
 ---
 
 <div class="container">
-    {%- assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
-    <div class="custom-box" data-filter="{{page.filter}}" style="background-color:{{boxColor}};">
+    {%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
+    <div class="custom-box" data-filter="{{page.filter}}" data-src="{{fileData.image.src}}"
+        data-height="{{fileData.image.height}}" data-width="{{fileData.image.width}}" data-x="{{fileData.image.x}}"
+        data-y="{{fileData.image.y}}" style="background-color:{{fileData.color}};">
         <div class="inner-box">
             <div style="display:none;" id="file-loader"><img src="/spinner.gif" alt="">
                 <p>Please Wait ,Loading Your file </p>
@@ -54,6 +56,26 @@ layout: feature
             </div>
         </div>
     </div>
+    <div class="crop-image-modal-container">
+        <div class="row w-100">
+            <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
+                <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
+                    <div>Select an area you would like to use</div>
+                    <div>
+                        <button onclick="closeModal()">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="crop-image-modal-body">
+
+                </div>
+                <div class="crop-btn-section">
+                    <button id="crop" class="mx-auto my-3" style="background-color: {{fileData.color}};">crop</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <div id="workspace" style="display: none;">
         <div class="row">
             <div class="col-md-8 mx-auto">
@@ -72,7 +94,7 @@ layout: feature
 
                     </div>
                     <div class="download-wrapper">
-                        <button id="download-button" style="background-color: {{boxColor}};"><svg
+                        <button id="download-button" style="background-color: {{fileData.color}};"><svg
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                 <path
                                     d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />

data/assets/css/frame.css

@@ -146,3 +146,286 @@ input {
 .options-panel div {
   width: 100%;
 }
+#action-button {
+  background-color: #ff6537;
+  margin: 0;
+  width: 180px;
+  padding: 10px 0;
+  font-size: 13pt;
+  position: relative;
+  border-radius: 2px;
+  border: 1px solid #ff6131;
+  color: #fff;
+  font-weight: 600;
+  display: block;
+  margin: auto;
+  margin-top: 20px;
+}
+#workspace-area input[type='text'] {
+  height: 40px;
+  border: 1px solid gray;
+  border-radius: 2px;
+}
+#canvas-area {
+  width: 100%;
+  margin-top: 30px;
+  max-width: 100%;
+}
+#img-svg {
+  margin: auto;
+  margin-top: 16px;
+  height: 67px;
+  width: 98px;
+}
+
+#file-loader {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+#file-loader img {
+  height: 60px;
+}
+
+#file-loader p {
+  text-align: center;
+  color: #fff;
+  font-size: 17px;
+}
+
+#loading-img {
+  height: 27px;
+  width: 27px;
+  margin-right: 21px;
+}
+
+#dropbox svg,
+#filepicker svg,
+.boxes svg {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+.file-picker-dropdown a,
+.file-picker-dropdown button {
+  border: none;
+  width: 100%;
+  border-radius: 4px;
+  text-align: left;
+  background: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 15px 24px;
+  list-style: none;
+  height: 54px;
+}
+
+.file-picker-dropdown {
+  width: 213px;
+  position: absolute;
+  background: #fff;
+  top: 111%;
+  right: 0;
+  display: none;
+  box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
+  border-radius: 4px;
+}
+
+.file-pick-dropdown i {
+  margin: 0;
+}
+
+.boxes {
+  background: #fff;
+  border-radius: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 15px 24px;
+  height: 54px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 800;
+  color: #000;
+}
+
+.file-pick-dropdown {
+  color: #000;
+  cursor: pointer;
+  display: inline-flex;
+  background: #fff;
+  height: 54px;
+  border-left: 1px solid rgba(95, 88, 88, 0.75);
+  padding: 13px 20px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  align-items: center;
+  position: relative;
+}
+
+.crop-img-box {
+  background-color: #fff;
+  width: 100%;
+  border-radius: 0.75em;
+  border: 1px solid #f2f2f2;
+  box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
+  font-size: 16px;
+  height: auto;
+  display: none;
+}
+
+.custom-box {
+  padding: 15px;
+}
+
+.inner-box {
+  border: 1px dashed rgba(0, 0, 0, 0.15);
+  background: rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  min-height: 300px;
+  width: 100%;
+}
+#dropfile {
+  font-size: 16px;
+  margin-top: 15px;
+  text-align: center;
+  color: #fff;
+}
+.options-panel {
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  border-radius: 4px;
+  padding: 30px;
+  width: 100%;
+}
+.options-panel .title {
+  width: 100%;
+  font-size: 28px;
+  line-height: 36px;
+  color: #000;
+  font-weight: 700;
+  text-align: left;
+  text-transform: capitalize;
+}
+.options-panel .description {
+  width: 100%;
+  font-size: 17px;
+  color: #666;
+  font-weight: 400;
+  text-align: left;
+}
+.options-title {
+  width: 100%;
+  font-size: 17px;
+  color: #666;
+  font-weight: 400;
+  text-align: left;
+}
+#download-button {
+  cursor: pointer;
+  display: inline-block;
+  width: 100%;
+  padding: 14px 0;
+  margin-bottom: 20px;
+  text-align: center;
+  border-radius: 50px;
+  background: #0050e5;
+  font-size: 18px;
+  color: #fff;
+  font-weight: 700;
+  text-decoration: none;
+  transition: all 0.3s;
+  border: none;
+}
+#download-button svg {
+  fill: #fff;
+  margin-right: 4px;
+  margin-bottom: 4px;
+  height: 20px;
+}
+.download-wrapper {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ddd;
+  margin: 12px 0px;
+  padding: 12px 0px;
+}
+#canvas-panel canvas {
+  max-width: 100%;
+}
+.options-panel select,
+textarea,
+input {
+  width: 100%;
+  text-align: left;
+  background: #fff;
+  height: 34px;
+  display: flex;
+  border-radius: 4px;
+  justify-content: space-between;
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+  color: #0f0c0c;
+  border: 1px solid #ccc;
+}
+.crop-image-modal-container {
+  position: fixed;
+  display: none;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.297);
+  height: 100vh;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  padding: 0px 20px;
+}
+.crop-image-modal {
+  height: fit-content;
+  background-color: #fff;
+  width: 100%;
+  margin-top: 10px;
+  border-radius: 5px;
+  padding: 0;
+  overflow-y: auto;
+}
+.crop-image-modal-header {
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  background-color: #ff5554;
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+}
+.crop-image-modal-header div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  color: #fff;
+}
+.crop-image-modal-body {
+  width: 450px;
+  margin: 10px auto;
+}
+.crop-image-modal-header button {
+  border: none;
+  background-color: transparent;
+}
+.crop-image-modal-header button i {
+  color: #fff;
+  font-size: 20px;
+}
+.crop-image-modal-body {
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+}
+#crop {
+  border: none;
+  padding: 7px 14px;
+  color: #fff;
+}

data/assets/js/frame.js

@@ -0,0 +1,171 @@
+const getScript = document.currentScript
+const pageTool = getScript.dataset.tool
+const lang = getScript.dataset.lang
+const gdrive = document.querySelector('#filepicker')
+const inputBox = document.querySelector('#Inputbox')
+const fileDropBox = document.querySelector('.custom-box')
+const cropModal = document.querySelector('.crop-image-modal-container')
+const workspace = document.getElementById('workspace')
+const canvasPanel = document.getElementById('canvas-panel')
+const download = document.querySelector('#download-button')
+let cropInputWidth = null
+let cropInputHeight = null
+let image = null
+const showLoader = () => {
+  showLoading()
+}
+const closeLoader = () => {}
+const mimeTypes = 'image/png,image/jpg,image/jpeg,image/webp'
+const filemimes = ['.png', '.webp', '.jpg', '.jpeg']
+gdrive.addEventListener(
+  'click',
+  (getFile, mimeTypes, showLoader, closeLoader) => {
+    const data = loadPicker()
+  }
+)
+const getDropBoxFile = (file) => {
+  handleFile(file)
+}
+const getFile = (file) => {
+  handleFile(file)
+}
+const fileOnChange = () => {
+  handleFile(file.files[0])
+}
+const dropbox = document.getElementById('dropbox')
+dropbox.addEventListener(
+  'click',
+  async (getDropBoxFile, showLoader, closeLoader) => {
+    const getFile = chooseFromDropbox()
+  }
+)
+inputBox.onclick = function () {
+  document.querySelector('#file').click()
+}
+fileDropBox.addEventListener('dragover', (e) => {
+  e.preventDefault()
+})
+fileDropBox.addEventListener('drop', (e) => {
+  e.preventDefault()
+  handleFile(e.dataTransfer.files[0])
+})
+const closeModal = () => {
+  cropModal.style.display = 'none'
+}
+const drawImage = () => {
+  let img = new Image()
+  img.src = fileDropBox.dataset.src
+  var canvas = document.createElement('canvas')
+  var ctx = canvas.getContext('2d')
+  img.onload = () => {
+    image.width = Number(fileDropBox.dataset.width)
+    image.height = Number(fileDropBox.dataset.height)
+    canvas.width = img.width
+    canvas.height = img.height
+    ctx.drawImage(
+      image,
+      Number(fileDropBox.dataset.x),
+      Number(fileDropBox.dataset.y),
+      image.width,
+      image.height
+    )
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    canvasPanel.innerHTML = ''
+    canvasPanel.appendChild(canvas)
+    stopLoading()
+    cropModal.style.display = 'none'
+    workspace.style.display = 'block'
+  }
+}
+const cropImage = (result) => {
+  let img = new Image()
+  let cropper = null
+  img.src = fileDropBox.dataset.src
+  img.onload = () => {
+    let img = document.createElement('img')
+    img.id = 'image'
+    img.src = result
+    let cropWidth = null
+    let cropHeight = null
+    document.querySelector('.crop-image-modal-body').appendChild(img)
+    cropper = new Cropper(img, {
+      ready() {
+        cropper.setAspectRatio(
+          Number(fileDropBox.dataset.width) / Number(fileDropBox.dataset.height)
+        )
+        cropModal.style.display = 'flex'
+        this.cropper.crop()
+        document.querySelector('#crop').addEventListener('click', () => {
+          let cropperImg = cropper
+            .getCroppedCanvas({
+              width: cropWidth,
+              height: cropHeight,
+            })
+            .toDataURL()
+          image = new Image()
+          image.onload = () => {
+            drawImage()
+          }
+          image.src = cropperImg
+        })
+      },
+      crop(event) {
+        cropWidth = Math.round(event.detail.width)
+        cropHeight = Math.round(event.detail.height)
+      },
+    })
+    stopLoading()
+  }
+}
+let inputFile = ''
+const handleFile = (file) => {
+  cropModal.style.display = 'flex'
+  document.querySelector('#file-loader').style.display = 'flex'
+  document.querySelector('.file-input').style.display = 'none'
+  inputFile = file
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (e.target.result) {
+        cropImage(e.target.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+}
+const showLoading = () => {
+  document.querySelector('#file-loader').style.display = 'flex'
+  document.querySelector('.file-input').style.display = 'none'
+}
+const stopLoading = () => {
+  fileDropBox.style.display = 'none'
+}
+download.addEventListener('click', () => {
+  let canvas = document.querySelector('canvas')
+  let url = canvas.toDataURL(`image/png`)
+  let a = document.createElement('a')
+  a.href = url
+  a.download = `safeimagekit-border-image.${inputFile.type.split('/')[1]}`
+  document.body.appendChild(a)
+  a.click()
+  if (lang === 'en') {
+    window.location.href = `/download?tool=${pageTool}`
+  } else {
+    window.location.href = `/${lang}/download?tool=${pageTool}`
+  }
+})
+const showDropDown = document.querySelector('.file-pick-dropdown')
+const icon = document.querySelector('.arrow-sign')
+const dropDown = document.querySelector('.file-picker-dropdown')
+showDropDown.addEventListener('click', () => {
+  addScripts()
+  if (dropDown.style.display !== 'none') {
+    dropDown.style.display = 'none'
+    icon.classList.remove('fa-angle-up')
+    icon.classList.add('fa-angle-down')
+  } else {
+    dropDown.style.display = 'block'
+    icon.classList.remove('fa-angle-down')
+    icon.classList.add('fa-angle-up')
+  }
+})

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 2.1.7
+  version: 2.1.8
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-07-27 00:00:00.000000000 Z
+date: 2022-08-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -2575,6 +2575,7 @@ files:
 - assets/images/avatar.png
 - assets/images/balark.jpeg
 - assets/images/fileformat.webp
+- assets/images/gallary.png
 - assets/images/keshav.webp
 - assets/images/krutika.jpeg
 - assets/images/logo.png
@@ -2593,6 +2594,7 @@ files:
 - assets/js/ads.js
 - assets/js/append-div.js
 - assets/js/featureResult.js
+- assets/js/frame.js
 - assets/js/googledrive.js
 - assets/js/homeResult.js
 - assets/js/manifest.json