appscms-tools-theme 2.2.0 → 2.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f4226c5b2b1f495436ea6b165051daddc9f3d5c13b656dc98581f2fdd3e9305
-  data.tar.gz: ccb7fbd097362a8b89f0dd419955e28ac5dded4513bb3b8f1b4b62d6f64e139c
+  metadata.gz: a214d95b3e1cd03e4f5b23f10e7dfdab5c037a8954a8d5384a464ba85f14567c
+  data.tar.gz: 1c87ad2ef5e1748d734910383417fb3cc189874b3935b4a84b69913dbec2dec4
 SHA512:
-  metadata.gz: 36df83176916c33601c7ffe917a4420a7fadb0f766879b7ac558a9f3ac488f03b0768c28344964bcd0d0a2269e34f0f4fbb349dd801d4336cb20dc226e663ec8
-  data.tar.gz: 0a54a63f6bd4986aa4f4f6017d058dd26c7c823f56454a885007edda323be8a7188ef83dc84049b21750275b309e932e5aa6be355b83d336d183ca2d7418f0a9
+  metadata.gz: c8f4e52b5ef4e4368ff273c1476e8a6d923fffdad6fa5b3c521088e6d5d9c455a527a3d4068ea5413014437895971fbf33d7aa9dd1e0b544d0e459cd8753e2c4
+  data.tar.gz: c6068ad6242f047d7525f88f28086986ef2214965d232aa17695c0fb4d9e1c42a94c87c746528de3fca96f22be54fe59ab030c5ede1e8671b7140b561d7a7904

data/_data/feature/en/theframe.json

@@ -34,6 +34,13 @@
         "https://cdn.photofunia.com/effects/calendar/examples/eny6h4_r.jpg",
         "https://cdn.photofunia.com/effects/calendar/examples/1v705mc_r.jpg"
     ],
+    "image": {
+        "src": "/assets/images/gallary.png",
+        "height": 277,
+        "width": 378,
+        "x": 110,
+        "y": 180
+    },
     "effectImagePath": "/assets/images/gallary.png",
     "elements": [
         {

data/_layouts/frame.html

@@ -52,7 +52,7 @@ layout: feature
                         {%- endif -%}
                         {%- if item.type == "text" -%}
                         <label for="{{item.id}}">{{item.label}}</label>
-                        <input type="text" id="{{item.id}}" required>
+                        <input type="text" id="{{item.id}}">
                         {%- endif -%}
                         {%- endfor -%}
                         <div>

data/assets/css/frame.css

@@ -429,7 +429,3 @@ input {
   padding: 7px 14px;
   color: #fff;
 }
-.crop-image-modal-body  img{
-  width: 100%;
-  height: 100%;
-}

data/assets/js/frame.js

@@ -35,14 +35,15 @@ fetch('/assets/js/photo-effects.json')
 const fileOnChange = (e) => {
   index = Number(e.dataset.index)
   let reader = new FileReader()
-  reader.readAsDataURL(e.files[0])
   reader.onload = (event) => {
+    cropModal.style.display = 'flex'
     if (cropper === null) {
       cropImage(event.target.result, e.id)
     } else {
       updateCropper(event.target.result, e.id)
     }
   }
+  reader.readAsDataURL(e.files[0])
 }
 const closeModal = () => {
   cropModal.style.display = 'none'
@@ -59,6 +60,9 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
     image.onload = () => {
       image.width = Number(item.width)
       image.height = Number(item.height)
+      if (item.filter) {
+        ctx.filter = item.filter
+      }
       ctx.drawImage(
         image,
         Number(item.x),
@@ -66,6 +70,7 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
         image.width,
         image.height
       )
+
       if (item.rotate) {
         drawRotated(item.rotate, ctx, canvas, image)
       }
@@ -82,7 +87,7 @@ const drawRotated = (degrees, ctx, canvas, image) => {
   ctx.save()
 
   // move to the center of the canvas
-  ctx.translate(canvas.width / 2, canvas.height / 2)
+  // ctx.translate(canvas.width / 2, canvas.height / 2)
 
   // rotate the canvas to the specified degrees
   ctx.rotate((degrees * Math.PI) / 180)
@@ -113,16 +118,20 @@ const drawImage = () => {
         }
       })
     ).then(() => {
+      ctx.filter = 'none'
       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) {
             document.fonts.add(font)
-            ctx.font = `${item.fontSize}px ${item.fontWeight} ${item.font}`
+            ctx.font = `${item.fontSize}px ${item.font}`
             if (item.shadowColor) {
               ctx.shadowColor = `${item.shadowColor}`
             }
+            if (item.rotate) {
+              ctx.rotate((item.rotate * Math.PI) / 180)
+            }
             if (item.shadowOffsetX) {
               ctx.shadowOffsetX = 3
             }

data/assets/js/photo-effects.json

@@ -5,10 +5,8 @@
         "elements": [
             {
                 "type": "image",
-                "imagePath": "",
                 "filter": "",
                 "perspective": "",
-                "rotate": 45,
                 "height": 300,
                 "width": 300,
                 "x": 200,
@@ -21,6 +19,7 @@
                 "type": "text",
                 "x": "100",
                 "y": "100",
+                "rotate": 10,
                 "color": "red",
                 "fontFamily": "Calligraphy",
                 "fontPath": "/assets/fonts/Calligraphy.ttf",
@@ -30,9 +29,9 @@
             {
                 "type": "image",
                 "imagePath": "",
-                "filter": "",
+                "filter": "grayscale(100%)",
                 "perspective": "",
-                "rotate": "",
+                "rotate": 40,
                 "height": 300,
                 "width": 300,
                 "x": 100,
@@ -49,7 +48,7 @@
                 "fontFamily": "Calligraphy",
                 "fontPath": "/assets/fonts/Calligraphy.ttf",
                 "fontWeight": "bold",
-                "fontSize": 50
+                "fontSize": 0
             }
         ]
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 2.2.0
+  version: 2.2.1
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-11 00:00:00.000000000 Z
+date: 2022-08-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll