appscms-tools-theme 2.2.3 → 2.2.6

data/assets/js/ads.js

@@ -1,8 +1,8 @@
-;(function (s, u, z, p) {
-  ;(s.src = u), s.setAttribute('data-zone', z), p.appendChild(s)
-})(
-  document.createElement('script'),
-  'https://inklinkor.com/tag.min.js',
-  5225477,
-  document.body || document.documentElement
-)
+;(function (s, u, z, p) {
+  ;(s.src = u), s.setAttribute('data-zone', z), p.appendChild(s)
+})(
+  document.createElement('script'),
+  'https://inklinkor.com/tag.min.js',
+  5225477,
+  document.body || document.documentElement
+)

data/assets/js/append-div.js

@@ -1,10 +1,10 @@
----
----
-function insertAfter(referenceNode, newNode) {
-  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
-}
-let themeContentBox = document.getElementById('theme-content-box')
-const div = document.createElement('div')
-const profitablecpmgateId = '{{site.profitablecpmgateId}}'
-div.setAttribute('id', `container-${profitablecpmgateId}`)
-insertAfter(themeContentBox, div)
+---
+---
+function insertAfter(referenceNode, newNode) {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
+}
+let themeContentBox = document.getElementById('theme-content-box')
+const div = document.createElement('div')
+const profitablecpmgateId = '{{site.profitablecpmgateId}}'
+div.setAttribute('id', `container-${profitablecpmgateId}`)
+insertAfter(themeContentBox, div)

data/assets/js/frame.js

@@ -19,7 +19,7 @@ let image = null
 const showLoader = () => {
   showLoading()
 }
-const closeLoader = () => { }
+const closeLoader = () => {}
 const clickInput = (e) => {
   console.log(`#file-${e.dataset.index}`)
   document.querySelector(`#file-${e.dataset.index}`).click()
@@ -52,16 +52,21 @@ form.addEventListener('submit', (e) => {
   e.preventDefault()
   drawImage()
 })
-const drawInputImage = (ctx, item, indexValue, canvas, image) => {
+const drawInputImage = (ctx, item, indexValue) => {
   return new Promise((resolve, reject) => {
     let image = document.createElement('img')
     image.src = files[indexValue]
     image.onload = () => {
+      ctx.save()
       image.width = Number(item.width)
       image.height = Number(item.height)
       if (item.filter) {
         ctx.filter = item.filter
       }
+      if (item.rotate) {
+        ctx.rotate((item.rotate * Math.PI) / 180)
+      }
+
       ctx.drawImage(
         image,
         Number(item.x),
@@ -69,31 +74,35 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
         image.width,
         image.height
       )
-      if (item.rotate) {
-        drawRotated(item.rotate, ctx, canvas, image, item)
+      if (item.translate) {
+        ctx.translate(item.translate.x, item.translate.y)
       }
+      if (item.skew) {
+        ctx.setTransform(1, item.skew.x, item.skew.y, 1, 0, 0)
+      }
+      ctx.restore()
       resolve()
     }
   })
 }
 
 const drawRotated = (degrees, ctx, canvas, image, item) => {
-  console.log(image)
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  // console.log(image)
+  // ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   // save the unrotatedctx of the canvas so we can restore it later
   // the alternative is to untranslate & unrotate after drawing
   ctx.save()
 
   // move to the center of the canvas
-  ctx.translate(item.x, item.y)
+  // ctx.translate(item.x, item.y)
 
   // rotate the canvas to the specified degrees
-  ctx.rotate((degrees * Math.PI) / 180)
+  ctx.rotate((50 * Math.PI) / 180)
 
   // draw the image
   // since thectx is rotated, the image will be rotated also
-  ctx.drawImage(image, -image.width / 2, -image.width / 2)
+  // ctx.drawImage(image, -image.width / 2, -image.width / 2)
 
   // we’re done with the rotating so restore the unrotatedctx
   ctx.restore()
@@ -118,21 +127,18 @@ const drawImage = () => {
       })
     ).then(() => {
       ctx.filter = 'none'
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+      // ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
       featureData.elements.map((item, indexValue) => {
         if (item.type === 'text') {
           let myFont = new FontFace(item.font, `url(${item.fontPath})`)
           myFont.load().then(function (font) {
+            ctx.save()
             document.fonts.add(font)
             ctx.font = `${item.fontSize}px ${item.font}`
             if (item.shadowColor) {
               ctx.shadowColor = `${item.shadowColor}`
             }
-            console.log(item)
-            console.log((item.rotate * Math.PI) / 180)
-            if (item.rotate) {
-              ctx.rotate((item.rotate * Math.PI) / 180)
-            }
+
             if (item.shadowOffsetX) {
               ctx.shadowOffsetX = 3
             }
@@ -142,9 +148,11 @@ const drawImage = () => {
             if (item.shadowBlur) {
               ctx.shadowBlur = 2
             }
+            if (item.rotate) {
+              ctx.rotate((item.rotate * Math.PI) / 180)
+            }
             ctx.textAlign = 'center'
             ctx.fillStyle = `${item.color}`
-            ctx.save()
             ctx.fillText(
               document.querySelector(`#${item.id}`).value,
               item.x,

data/assets/js/photo-effects.json

@@ -1,56 +1,22 @@
-[
-    {
-        "name": "together_forever",
-        "effectImagePath": "/assets/images/together_forever.png",
-        "elements": [
-            {
-                "type": "image",
-                "filter": "",
-                "perspective": "",
-                "height": 300,
-                "width": 300,
-                "x": 200,
-                "y": 200,
-                "id": "file-1"
-            },
-            {
-                "label": "",
-                "id": "text-1",
-                "type": "text",
-                "x": "100",
-                "rotate": 0,
-                "y": "100",
-                "color": "red",
-                "fontFamily": "Calligraphy",
-                "fontPath": "/assets/fonts/Calligraphy.ttf",
-                "fontWeight": "bold",
-                "fontSize": 50
-            },
-            {
-                "type": "image",
-                "imagePath": "",
-                "filter": "grayscale(100%)",
-                "perspective": "",
-                "rotate": 40,
-                "height": 300,
-                "width": 300,
-                "x": 100,
-                "y": 200,
-                "id": "file-3"
-            },
-            {
-                "label": "",
-                "id": "text-2",
-                "type": "text",
-                "x": "200",
-                "y": "200",
-                "rotate": 40,
-                "color": "red",
-                "fontFamily": "Calligraphy",
-                "fontPath": "/assets/fonts/Calligraphy.ttf",
-                "fontWeight": "bold",
-                "fontSize": 50
-            }
-        ]
-    }
+[
+    {
+        "name": "together_forever",
+        "effectImagePath": "/assets/images/together_forever.png",
+        "elements": [
+            {
+                "type": "image",
+                "filter": "",
+                "perspective": "",
+                "height": 300,
+                "width": 300,
+                "translate": {
+                    "x": -5,
+                    "y": -10
+                },
+                "x": 100,
+                "y": 100,
+                "id": "file-1"
+            }
+        ]
+    }
 ]

data/assets/js/testing-batch.js

@@ -1,3 +1,4 @@
+const opacity = document.querySelector("#opacity")
 const batchConversion = async (file, indexValue) => {
     return new Promise((resolve, reject) => {
         if (file) {
@@ -12,18 +13,9 @@ const batchConversion = async (file, indexValue) => {
                     image.onload = () => {
                         canvas.width = image.width
                         canvas.height = image.height
-                        // counter.innerHTML = e.target.value + "%"
-                        let filters = document.querySelector('#applyFilter')
-                        if (filters.getAttribute('data-filter') === "opacity") {
-                            ctx.globalAlpha = filters.value
-                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
-                            resolve([indexValue, canvas.toDataURL('image/png'), "image"])
-                        } else {
-                            ctx.filter = filters.getAttribute('data-filter') + '(' + filters.value + filters.getAttribute('data-scale') + ') '
-                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
-                            resolve([indexValue, canvas.toDataURL('image/png'), "image"])
-                        }
-
+                        ctx.globalAlpha = opacity.value
+                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+                        resolve([indexValue, canvas.toDataURL('image/png'), "image"])
                     }
                     image.src = e.target.result
                 }

data/assets/js/theme.js

@@ -1,11 +1,11 @@
-$(document).ready(function () {
-  var safuiAlert = $('#safeui-alert')
-  if (safuiAlert) {
-    safuiAlert
-      .first()
-      .delay(10000)
-      .slideUp(1000, function () {
-        $(this).remove()
-      })
-  }
-})
+$(document).ready(function () {
+  var safuiAlert = $('#safeui-alert')
+  if (safuiAlert) {
+    safuiAlert
+      .first()
+      .delay(10000)
+      .slideUp(1000, function () {
+        $(this).remove()
+      })
+  }
+})

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 2.2.3
+  version: 2.2.6
 platform: ruby
 authors:
 - vivek-appscms
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-20 00:00:00.000000000 Z
+date: 2022-08-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -52,7 +52,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '12.0'
-description: 
+description:
 email:
 - vivek@appscms.com
 executables: []
@@ -2637,7 +2637,7 @@ homepage: https://github.com/Appscms-com/appscms-tools-theme
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2652,8 +2652,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
-signing_key: 
+rubygems_version: 3.1.6
+signing_key:
 specification_version: 4
 summary: Appscms theme for all tools
 test_files: []