appscms-tools-theme 2.2.0 → 2.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_data/feature/en/theframe.json +7 -0
- data/_layouts/frame.html +1 -1
- data/assets/css/frame.css +0 -4
- data/assets/js/frame.js +12 -3
- data/assets/js/photo-effects.json +4 -5
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a214d95b3e1cd03e4f5b23f10e7dfdab5c037a8954a8d5384a464ba85f14567c
|
4
|
+
data.tar.gz: 1c87ad2ef5e1748d734910383417fb3cc189874b3935b4a84b69913dbec2dec4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c8f4e52b5ef4e4368ff273c1476e8a6d923fffdad6fa5b3c521088e6d5d9c455a527a3d4068ea5413014437895971fbf33d7aa9dd1e0b544d0e459cd8753e2c4
|
7
|
+
data.tar.gz: c6068ad6242f047d7525f88f28086986ef2214965d232aa17695c0fb4d9e1c42a94c87c746528de3fca96f22be54fe59ab030c5ede1e8671b7140b561d7a7904
|
@@ -34,6 +34,13 @@
|
|
34
34
|
"https://cdn.photofunia.com/effects/calendar/examples/eny6h4_r.jpg",
|
35
35
|
"https://cdn.photofunia.com/effects/calendar/examples/1v705mc_r.jpg"
|
36
36
|
],
|
37
|
+
"image": {
|
38
|
+
"src": "/assets/images/gallary.png",
|
39
|
+
"height": 277,
|
40
|
+
"width": 378,
|
41
|
+
"x": 110,
|
42
|
+
"y": 180
|
43
|
+
},
|
37
44
|
"effectImagePath": "/assets/images/gallary.png",
|
38
45
|
"elements": [
|
39
46
|
{
|
data/_layouts/frame.html
CHANGED
data/assets/css/frame.css
CHANGED
data/assets/js/frame.js
CHANGED
@@ -35,14 +35,15 @@ fetch('/assets/js/photo-effects.json')
|
|
35
35
|
const fileOnChange = (e) => {
|
36
36
|
index = Number(e.dataset.index)
|
37
37
|
let reader = new FileReader()
|
38
|
-
reader.readAsDataURL(e.files[0])
|
39
38
|
reader.onload = (event) => {
|
39
|
+
cropModal.style.display = 'flex'
|
40
40
|
if (cropper === null) {
|
41
41
|
cropImage(event.target.result, e.id)
|
42
42
|
} else {
|
43
43
|
updateCropper(event.target.result, e.id)
|
44
44
|
}
|
45
45
|
}
|
46
|
+
reader.readAsDataURL(e.files[0])
|
46
47
|
}
|
47
48
|
const closeModal = () => {
|
48
49
|
cropModal.style.display = 'none'
|
@@ -59,6 +60,9 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
|
|
59
60
|
image.onload = () => {
|
60
61
|
image.width = Number(item.width)
|
61
62
|
image.height = Number(item.height)
|
63
|
+
if (item.filter) {
|
64
|
+
ctx.filter = item.filter
|
65
|
+
}
|
62
66
|
ctx.drawImage(
|
63
67
|
image,
|
64
68
|
Number(item.x),
|
@@ -66,6 +70,7 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
|
|
66
70
|
image.width,
|
67
71
|
image.height
|
68
72
|
)
|
73
|
+
|
69
74
|
if (item.rotate) {
|
70
75
|
drawRotated(item.rotate, ctx, canvas, image)
|
71
76
|
}
|
@@ -82,7 +87,7 @@ const drawRotated = (degrees, ctx, canvas, image) => {
|
|
82
87
|
ctx.save()
|
83
88
|
|
84
89
|
// move to the center of the canvas
|
85
|
-
ctx.translate(canvas.width / 2, canvas.height / 2)
|
90
|
+
// ctx.translate(canvas.width / 2, canvas.height / 2)
|
86
91
|
|
87
92
|
// rotate the canvas to the specified degrees
|
88
93
|
ctx.rotate((degrees * Math.PI) / 180)
|
@@ -113,16 +118,20 @@ const drawImage = () => {
|
|
113
118
|
}
|
114
119
|
})
|
115
120
|
).then(() => {
|
121
|
+
ctx.filter = 'none'
|
116
122
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
117
123
|
featureData.elements.map((item, indexValue) => {
|
118
124
|
if (item.type === 'text') {
|
119
125
|
let myFont = new FontFace(item.font, `url(${item.fontPath})`)
|
120
126
|
myFont.load().then(function (font) {
|
121
127
|
document.fonts.add(font)
|
122
|
-
ctx.font = `${item.fontSize}px ${item.
|
128
|
+
ctx.font = `${item.fontSize}px ${item.font}`
|
123
129
|
if (item.shadowColor) {
|
124
130
|
ctx.shadowColor = `${item.shadowColor}`
|
125
131
|
}
|
132
|
+
if (item.rotate) {
|
133
|
+
ctx.rotate((item.rotate * Math.PI) / 180)
|
134
|
+
}
|
126
135
|
if (item.shadowOffsetX) {
|
127
136
|
ctx.shadowOffsetX = 3
|
128
137
|
}
|
@@ -5,10 +5,8 @@
|
|
5
5
|
"elements": [
|
6
6
|
{
|
7
7
|
"type": "image",
|
8
|
-
"imagePath": "",
|
9
8
|
"filter": "",
|
10
9
|
"perspective": "",
|
11
|
-
"rotate": 45,
|
12
10
|
"height": 300,
|
13
11
|
"width": 300,
|
14
12
|
"x": 200,
|
@@ -21,6 +19,7 @@
|
|
21
19
|
"type": "text",
|
22
20
|
"x": "100",
|
23
21
|
"y": "100",
|
22
|
+
"rotate": 10,
|
24
23
|
"color": "red",
|
25
24
|
"fontFamily": "Calligraphy",
|
26
25
|
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
@@ -30,9 +29,9 @@
|
|
30
29
|
{
|
31
30
|
"type": "image",
|
32
31
|
"imagePath": "",
|
33
|
-
"filter": "",
|
32
|
+
"filter": "grayscale(100%)",
|
34
33
|
"perspective": "",
|
35
|
-
"rotate":
|
34
|
+
"rotate": 40,
|
36
35
|
"height": 300,
|
37
36
|
"width": 300,
|
38
37
|
"x": 100,
|
@@ -49,7 +48,7 @@
|
|
49
48
|
"fontFamily": "Calligraphy",
|
50
49
|
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
51
50
|
"fontWeight": "bold",
|
52
|
-
"fontSize":
|
51
|
+
"fontSize": 0
|
53
52
|
}
|
54
53
|
]
|
55
54
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: appscms-tools-theme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.2.
|
4
|
+
version: 2.2.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- vivek-appscms
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-08-
|
11
|
+
date: 2022-08-13 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|