appscms-tools-theme 2.1.9 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_data/feature/en/theframe.json +28 -7
- data/_data/photo-categories.json +11 -0
- data/_layouts/frame.html +106 -86
- data/assets/css/frame.css +4 -0
- data/assets/fonts/Calligraphy.ttf +0 -0
- data/assets/images/together_forever.png +0 -0
- data/assets/js/frame.js +145 -88
- data/assets/js/photo-effects.json +56 -0
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1f4226c5b2b1f495436ea6b165051daddc9f3d5c13b656dc98581f2fdd3e9305
|
|
4
|
+
data.tar.gz: ccb7fbd097362a8b89f0dd419955e28ac5dded4513bb3b8f1b4b62d6f64e139c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 36df83176916c33601c7ffe917a4420a7fadb0f766879b7ac558a9f3ac488f03b0768c28344964bcd0d0a2269e34f0f4fbb349dd801d4336cb20dc226e663ec8
|
|
7
|
+
data.tar.gz: 0a54a63f6bd4986aa4f4f6017d058dd26c7c823f56454a885007edda323be8a7188ef83dc84049b21750275b309e932e5aa6be355b83d336d183ca2d7418f0a9
|
|
@@ -27,11 +27,32 @@
|
|
|
27
27
|
"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css",
|
|
28
28
|
"/assets/css/frame.css"
|
|
29
29
|
],
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
|
|
30
|
+
"mainPreviewImage": "https://cdn.photofunia.com/effects/calendar/icons/medium.jpg",
|
|
31
|
+
"imageSamples": [
|
|
32
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1hjpco5_r.jpg",
|
|
33
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1gzzwn7_r.jpg",
|
|
34
|
+
"https://cdn.photofunia.com/effects/calendar/examples/eny6h4_r.jpg",
|
|
35
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1v705mc_r.jpg"
|
|
36
|
+
],
|
|
37
|
+
"effectImagePath": "/assets/images/gallary.png",
|
|
38
|
+
"elements": [
|
|
39
|
+
{
|
|
40
|
+
"type": "image",
|
|
41
|
+
"label": "1."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"label": "label",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"id": "text-1"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"type": "image",
|
|
50
|
+
"label": "1."
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"label": "label",
|
|
54
|
+
"type": "text",
|
|
55
|
+
"id": "text-2"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
37
58
|
}
|
data/_layouts/frame.html
CHANGED
|
@@ -2,108 +2,128 @@
|
|
|
2
2
|
layout: feature
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
5
6
|
<div class="container">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div class="inner-box">
|
|
11
|
-
<div style="display:none;" id="file-loader"><img src="/spinner.gif" alt="">
|
|
12
|
-
<p>Please Wait ,Loading Your file </p>
|
|
7
|
+
<div class="row">
|
|
8
|
+
<div class="col-md-3">
|
|
9
|
+
<div class="categories-section">
|
|
10
|
+
<h3>Categories</h3>
|
|
13
11
|
</div>
|
|
14
|
-
<div class="
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<i class="fas fa-angle-down arrow-sign "></i>
|
|
36
|
-
<div class="file-picker-dropdown" style="display: none;">
|
|
37
|
-
<button id="dropbox"> <svg viewBox="0 0 24 24" fill="#0061FF"
|
|
38
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
39
|
-
<path id="icon"
|
|
40
|
-
d="M12.0146 6.57367L6.50732 10.1473L12.0146 13.721L6.50732 17.2947L1 13.6912L6.50732 10.1176L1 6.57367L6.50732 3L12.0146 6.57367ZM6.47803 18.4263L11.9854 14.8527L17.4927 18.4263L11.9854 22L6.47803 18.4263ZM12.0146 13.6912L17.522 10.1176L12.0146 6.57367L17.4927 3L23 6.57367L17.4927 10.1473L23 13.721L17.4927 17.2947L12.0146 13.6912Z">
|
|
41
|
-
</path>
|
|
42
|
-
</svg> From Dropbox</button>
|
|
43
|
-
<button id='filepicker'> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
44
|
-
<path id="Path" d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z" fill="#FFC107">
|
|
45
|
-
</path>
|
|
46
|
-
<path id="Path_2" d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z" fill="#1976D2">
|
|
47
|
-
</path>
|
|
48
|
-
<path id="Path_3" d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z"
|
|
49
|
-
fill="#4CAF50">
|
|
50
|
-
</path>
|
|
51
|
-
</svg> From Google Drive</button>
|
|
12
|
+
<div class="categories-list">
|
|
13
|
+
<div class="accordion" id="accordionExample">
|
|
14
|
+
{%- for item in site.data.photo-categories -%}
|
|
15
|
+
<div class="card">
|
|
16
|
+
<div class="card-header" id="heading-{{forloop.index}}">
|
|
17
|
+
<h3 class="mb-0">
|
|
18
|
+
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
|
|
19
|
+
data-target="#collapse-{{forloop.index}}" aria-expanded="true"
|
|
20
|
+
aria-controls="collapse-{{forloop.index}}">
|
|
21
|
+
{{item.category}}
|
|
22
|
+
</button>
|
|
23
|
+
</h3>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div id="collapse-{{forloop.index}}" class="collapse show"
|
|
27
|
+
aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
|
|
28
|
+
<div class="card-body">
|
|
29
|
+
{%- for i in item.features -%}
|
|
30
|
+
<a href="{{i.link}}">{{i.name}}</a>
|
|
31
|
+
{%- endfor -%}
|
|
32
|
+
</div>
|
|
52
33
|
</div>
|
|
53
34
|
</div>
|
|
35
|
+
{%- endfor -%}
|
|
54
36
|
</div>
|
|
55
|
-
<p id="dropfile">or drop your file here</p>
|
|
56
37
|
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="crop-image-modal-container">
|
|
60
|
-
<div class="row w-100">
|
|
61
|
-
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
62
|
-
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
63
|
-
<div>Select an area you would like to use</div>
|
|
64
|
-
<div>
|
|
65
|
-
<button onclick="closeModal()">
|
|
66
|
-
<i class="fas fa-times"></i>
|
|
67
|
-
</button>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="crop-image-modal-body">
|
|
71
38
|
|
|
72
|
-
</div>
|
|
73
|
-
<div class="crop-btn-section">
|
|
74
|
-
<button id="crop" class="mx-auto my-3" style="background-color: {{fileData.color}};">crop</button>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
39
|
</div>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
40
|
+
<div class="col-md-9">
|
|
41
|
+
<div class="row">
|
|
42
|
+
<div class="col-md-8">
|
|
43
|
+
<form id="effect-form" data-feature-name="{{page.featureName}}">
|
|
44
|
+
{%- for item in fileData.elements -%}
|
|
45
|
+
{%- if item.type == "image" -%}
|
|
46
|
+
<label for="{{item.id}}">{{item.label}}</label>
|
|
47
|
+
<button type="button" id="{{item.id}}" data-index="{{forloop.index}}"
|
|
48
|
+
onclick="clickInput(this)">Choose
|
|
49
|
+
image</button>
|
|
50
|
+
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
|
|
51
|
+
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
|
|
52
|
+
{%- endif -%}
|
|
53
|
+
{%- if item.type == "text" -%}
|
|
54
|
+
<label for="{{item.id}}">{{item.label}}</label>
|
|
55
|
+
<input type="text" id="{{item.id}}" required>
|
|
56
|
+
{%- endif -%}
|
|
57
|
+
{%- endfor -%}
|
|
58
|
+
<div>
|
|
59
|
+
<button type="submit">Go</button>
|
|
60
|
+
</div>
|
|
61
|
+
</form>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="col-md-4">
|
|
64
|
+
<div class="preview-section">
|
|
65
|
+
<img src="{{fileData.mainPreviewImage}}" alt="">
|
|
86
66
|
</div>
|
|
87
|
-
<
|
|
67
|
+
<h3>Examples</h3>
|
|
68
|
+
<div class="image-samples">
|
|
69
|
+
{%- for item in fileData.imageSamples -%}
|
|
70
|
+
<img src="{{item}}" alt="sample">
|
|
71
|
+
{%- endfor -%}
|
|
88
72
|
</div>
|
|
89
73
|
</div>
|
|
90
74
|
</div>
|
|
91
|
-
<div class="col-md-4">
|
|
92
|
-
<div class="options-panel">
|
|
93
|
-
<div class="title">
|
|
94
75
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
76
|
+
<div class="crop-image-modal-container">
|
|
77
|
+
<div class="row w-100">
|
|
78
|
+
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
79
|
+
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
80
|
+
<div>Select an area you would like to use</div>
|
|
81
|
+
<div>
|
|
82
|
+
<button onclick="closeModal()">
|
|
83
|
+
<i class="fas fa-times"></i>
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="crop-image-modal-body">
|
|
88
|
+
|
|
89
|
+
</div>
|
|
90
|
+
<div class="crop-btn-section">
|
|
91
|
+
<button id="crop" class="mx-auto my-3"
|
|
92
|
+
style="background-color: {{fileData.color}};">crop</button>
|
|
93
|
+
</div>
|
|
102
94
|
</div>
|
|
103
95
|
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
98
|
+
<div class="row">
|
|
99
|
+
<div class="col-md-8 mx-auto">
|
|
100
|
+
<div class="select-img-panel">
|
|
101
|
+
<div id="saving-data" style="display: none;">
|
|
102
|
+
<img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
|
|
103
|
+
images...</span>
|
|
104
|
+
</div>
|
|
105
|
+
<div id="canvas-panel">
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="col-md-4">
|
|
110
|
+
<div class="options-panel">
|
|
111
|
+
<div class="title">
|
|
112
|
+
|
|
113
|
+
</div>
|
|
114
|
+
<div class="download-wrapper">
|
|
115
|
+
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
|
116
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
117
|
+
<path
|
|
118
|
+
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" />
|
|
119
|
+
</svg>Download</button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
104
122
|
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
105
125
|
</div>
|
|
106
126
|
</div>
|
|
107
127
|
</div>
|
|
108
|
-
|
|
109
|
-
|
|
128
|
+
|
|
129
|
+
</div>
|
data/assets/css/frame.css
CHANGED
|
Binary file
|
|
Binary file
|
data/assets/js/frame.js
CHANGED
|
@@ -1,122 +1,194 @@
|
|
|
1
1
|
const getScript = document.currentScript
|
|
2
2
|
const pageTool = getScript.dataset.tool
|
|
3
3
|
const lang = getScript.dataset.lang
|
|
4
|
-
const gdrive = document.querySelector('#filepicker')
|
|
5
4
|
const inputBox = document.querySelector('#Inputbox')
|
|
6
5
|
const fileDropBox = document.querySelector('.custom-box')
|
|
7
6
|
const cropModal = document.querySelector('.crop-image-modal-container')
|
|
8
7
|
const workspace = document.getElementById('workspace')
|
|
9
8
|
const canvasPanel = document.getElementById('canvas-panel')
|
|
10
9
|
const download = document.querySelector('#download-button')
|
|
10
|
+
const form = document.querySelector('#effect-form')
|
|
11
|
+
let files = []
|
|
12
|
+
let cropWidth = null
|
|
13
|
+
let cropHeight = null
|
|
14
|
+
let cropper = null
|
|
11
15
|
let cropInputWidth = null
|
|
16
|
+
let index = 0
|
|
12
17
|
let cropInputHeight = null
|
|
13
18
|
let image = null
|
|
14
19
|
const showLoader = () => {
|
|
15
20
|
showLoading()
|
|
16
21
|
}
|
|
17
22
|
const closeLoader = () => {}
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
'click',
|
|
22
|
-
(getFile, mimeTypes, showLoader, closeLoader) => {
|
|
23
|
-
const data = loadPicker()
|
|
24
|
-
}
|
|
25
|
-
)
|
|
26
|
-
const getDropBoxFile = (file) => {
|
|
27
|
-
handleFile(file)
|
|
28
|
-
}
|
|
29
|
-
const getFile = (file) => {
|
|
30
|
-
handleFile(file)
|
|
23
|
+
const clickInput = (e) => {
|
|
24
|
+
console.log(`#file-${e.dataset.index}`)
|
|
25
|
+
document.querySelector(`#file-${e.dataset.index}`).click()
|
|
31
26
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
27
|
+
let featureData = null
|
|
28
|
+
|
|
29
|
+
fetch('/assets/js/photo-effects.json')
|
|
30
|
+
.then((response) => response.json())
|
|
31
|
+
.then((data) => {
|
|
32
|
+
featureData = data.find((i) => i.name === form.dataset.featureName)
|
|
33
|
+
console.log(featureData)
|
|
34
|
+
})
|
|
35
|
+
const fileOnChange = (e) => {
|
|
36
|
+
index = Number(e.dataset.index)
|
|
37
|
+
let reader = new FileReader()
|
|
38
|
+
reader.readAsDataURL(e.files[0])
|
|
39
|
+
reader.onload = (event) => {
|
|
40
|
+
if (cropper === null) {
|
|
41
|
+
cropImage(event.target.result, e.id)
|
|
42
|
+
} else {
|
|
43
|
+
updateCropper(event.target.result, e.id)
|
|
44
|
+
}
|
|
40
45
|
}
|
|
41
|
-
)
|
|
42
|
-
inputBox.onclick = function () {
|
|
43
|
-
document.querySelector('#file').click()
|
|
44
46
|
}
|
|
45
|
-
fileDropBox.addEventListener('dragover', (e) => {
|
|
46
|
-
e.preventDefault()
|
|
47
|
-
})
|
|
48
|
-
fileDropBox.addEventListener('drop', (e) => {
|
|
49
|
-
e.preventDefault()
|
|
50
|
-
handleFile(e.dataTransfer.files[0])
|
|
51
|
-
})
|
|
52
47
|
const closeModal = () => {
|
|
53
48
|
cropModal.style.display = 'none'
|
|
54
49
|
}
|
|
50
|
+
form.addEventListener('submit', (e) => {
|
|
51
|
+
e.preventDefault()
|
|
52
|
+
drawImage()
|
|
53
|
+
})
|
|
54
|
+
const drawInputImage = (ctx, item, indexValue, canvas, image) => {
|
|
55
|
+
console.log(ctx)
|
|
56
|
+
return new Promise((resolve, reject) => {
|
|
57
|
+
let image = document.createElement('img')
|
|
58
|
+
image.src = files[indexValue]
|
|
59
|
+
image.onload = () => {
|
|
60
|
+
image.width = Number(item.width)
|
|
61
|
+
image.height = Number(item.height)
|
|
62
|
+
ctx.drawImage(
|
|
63
|
+
image,
|
|
64
|
+
Number(item.x),
|
|
65
|
+
Number(item.y),
|
|
66
|
+
image.width,
|
|
67
|
+
image.height
|
|
68
|
+
)
|
|
69
|
+
if (item.rotate) {
|
|
70
|
+
drawRotated(item.rotate, ctx, canvas, image)
|
|
71
|
+
}
|
|
72
|
+
resolve()
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
}
|
|
76
|
+
const drawRotated = (degrees, ctx, canvas, image) => {
|
|
77
|
+
console.log(image)
|
|
78
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
79
|
+
|
|
80
|
+
// save the unrotatedctx of the canvas so we can restore it later
|
|
81
|
+
// the alternative is to untranslate & unrotate after drawing
|
|
82
|
+
ctx.save()
|
|
83
|
+
|
|
84
|
+
// move to the center of the canvas
|
|
85
|
+
ctx.translate(canvas.width / 2, canvas.height / 2)
|
|
86
|
+
|
|
87
|
+
// rotate the canvas to the specified degrees
|
|
88
|
+
ctx.rotate((degrees * Math.PI) / 180)
|
|
89
|
+
|
|
90
|
+
// draw the image
|
|
91
|
+
// since thectx is rotated, the image will be rotated also
|
|
92
|
+
ctx.drawImage(image, -image.width / 2, -image.width / 2)
|
|
93
|
+
|
|
94
|
+
// we’re done with the rotating so restore the unrotatedctx
|
|
95
|
+
ctx.restore()
|
|
96
|
+
}
|
|
55
97
|
const drawImage = () => {
|
|
56
98
|
let img = new Image()
|
|
57
|
-
img.src =
|
|
99
|
+
img.src = featureData.effectImagePath
|
|
58
100
|
var canvas = document.createElement('canvas')
|
|
59
101
|
var ctx = canvas.getContext('2d')
|
|
60
102
|
img.onload = () => {
|
|
61
|
-
image.width = Number(fileDropBox.dataset.width)
|
|
62
|
-
image.height = Number(fileDropBox.dataset.height)
|
|
63
103
|
canvas.width = img.width
|
|
64
104
|
canvas.height = img.height
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
105
|
+
Promise.all(
|
|
106
|
+
featureData.elements.map((item, indexValue) => {
|
|
107
|
+
if (item.type === 'image') {
|
|
108
|
+
return new Promise((resolve, reject) => {
|
|
109
|
+
drawInputImage(ctx, item, indexValue, canvas).then(() => {
|
|
110
|
+
resolve()
|
|
111
|
+
})
|
|
112
|
+
})
|
|
113
|
+
}
|
|
114
|
+
})
|
|
115
|
+
).then(() => {
|
|
116
|
+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
|
117
|
+
featureData.elements.map((item, indexValue) => {
|
|
118
|
+
if (item.type === 'text') {
|
|
119
|
+
let myFont = new FontFace(item.font, `url(${item.fontPath})`)
|
|
120
|
+
myFont.load().then(function (font) {
|
|
121
|
+
document.fonts.add(font)
|
|
122
|
+
ctx.font = `${item.fontSize}px ${item.fontWeight} ${item.font}`
|
|
123
|
+
if (item.shadowColor) {
|
|
124
|
+
ctx.shadowColor = `${item.shadowColor}`
|
|
125
|
+
}
|
|
126
|
+
if (item.shadowOffsetX) {
|
|
127
|
+
ctx.shadowOffsetX = 3
|
|
128
|
+
}
|
|
129
|
+
if (item.shadowOffsetY) {
|
|
130
|
+
ctx.shadowOffsetY = 3
|
|
131
|
+
}
|
|
132
|
+
if (item.shadowBlur) {
|
|
133
|
+
ctx.shadowBlur = 2
|
|
134
|
+
}
|
|
135
|
+
ctx.fillStyle = `${item.color}`
|
|
136
|
+
ctx.fillText(
|
|
137
|
+
document.querySelector(`#${item.id}`).value,
|
|
138
|
+
item.x,
|
|
139
|
+
item.y
|
|
140
|
+
)
|
|
141
|
+
})
|
|
142
|
+
}
|
|
143
|
+
if (item.type === 'rectangle') {
|
|
144
|
+
}
|
|
145
|
+
})
|
|
146
|
+
canvasPanel.innerHTML = ''
|
|
147
|
+
canvasPanel.appendChild(canvas)
|
|
148
|
+
workspace.style.display = 'block'
|
|
149
|
+
})
|
|
78
150
|
}
|
|
79
151
|
}
|
|
80
|
-
const cropImage = (result) => {
|
|
81
|
-
let
|
|
82
|
-
|
|
83
|
-
img.src = fileDropBox.dataset.src
|
|
84
|
-
img.onload = () => {
|
|
152
|
+
const cropImage = (result, id) => {
|
|
153
|
+
let image = new Image()
|
|
154
|
+
image.onload = () => {
|
|
85
155
|
let img = document.createElement('img')
|
|
86
|
-
img.id = 'image'
|
|
87
156
|
img.src = result
|
|
88
|
-
|
|
89
|
-
let cropHeight = null
|
|
157
|
+
img.id = 'image'
|
|
90
158
|
document.querySelector('.crop-image-modal-body').appendChild(img)
|
|
91
159
|
cropper = new Cropper(img, {
|
|
160
|
+
viewMode: 3,
|
|
92
161
|
ready() {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
)
|
|
162
|
+
console.log(id)
|
|
163
|
+
let find = featureData.elements.find((i) => i.id === id)
|
|
164
|
+
console.log(find)
|
|
165
|
+
cropper.setAspectRatio(Number(find.width) / Number(find.height))
|
|
96
166
|
cropModal.style.display = 'flex'
|
|
97
167
|
this.cropper.crop()
|
|
98
|
-
document.querySelector('#crop').addEventListener('click', () => {
|
|
99
|
-
let cropperImg = cropper
|
|
100
|
-
.getCroppedCanvas({
|
|
101
|
-
width: cropWidth,
|
|
102
|
-
height: cropHeight,
|
|
103
|
-
})
|
|
104
|
-
.toDataURL()
|
|
105
|
-
image = new Image()
|
|
106
|
-
image.onload = () => {
|
|
107
|
-
drawImage()
|
|
108
|
-
}
|
|
109
|
-
image.src = cropperImg
|
|
110
|
-
})
|
|
111
168
|
},
|
|
112
169
|
crop(event) {
|
|
113
170
|
cropWidth = Math.round(event.detail.width)
|
|
114
171
|
cropHeight = Math.round(event.detail.height)
|
|
115
172
|
},
|
|
116
173
|
})
|
|
117
|
-
stopLoading()
|
|
118
174
|
}
|
|
175
|
+
image.src = result
|
|
119
176
|
}
|
|
177
|
+
const updateCropper = (result, id) => {
|
|
178
|
+
cropper.destroy()
|
|
179
|
+
document.querySelector('.crop-image-modal-body').innerHTML = ''
|
|
180
|
+
cropImage(result, id)
|
|
181
|
+
}
|
|
182
|
+
document.querySelector('#crop').addEventListener('click', () => {
|
|
183
|
+
let cropperImg = cropper
|
|
184
|
+
.getCroppedCanvas({
|
|
185
|
+
width: cropWidth,
|
|
186
|
+
height: cropHeight,
|
|
187
|
+
})
|
|
188
|
+
.toDataURL()
|
|
189
|
+
files[index - 1] = cropperImg
|
|
190
|
+
cropModal.style.display = 'none'
|
|
191
|
+
})
|
|
120
192
|
let inputFile = ''
|
|
121
193
|
const handleFile = (file) => {
|
|
122
194
|
cropModal.style.display = 'flex'
|
|
@@ -154,18 +226,3 @@ download.addEventListener('click', () => {
|
|
|
154
226
|
window.location.href = `/${lang}/download?tool=${pageTool}`
|
|
155
227
|
}
|
|
156
228
|
})
|
|
157
|
-
const showDropDown = document.querySelector('.file-pick-dropdown')
|
|
158
|
-
const icon = document.querySelector('.arrow-sign')
|
|
159
|
-
const dropDown = document.querySelector('.file-picker-dropdown')
|
|
160
|
-
showDropDown.addEventListener('click', () => {
|
|
161
|
-
addScripts()
|
|
162
|
-
if (dropDown.style.display !== 'none') {
|
|
163
|
-
dropDown.style.display = 'none'
|
|
164
|
-
icon.classList.remove('fa-angle-up')
|
|
165
|
-
icon.classList.add('fa-angle-down')
|
|
166
|
-
} else {
|
|
167
|
-
dropDown.style.display = 'block'
|
|
168
|
-
icon.classList.remove('fa-angle-down')
|
|
169
|
-
icon.classList.add('fa-angle-up')
|
|
170
|
-
}
|
|
171
|
-
})
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "together_forever",
|
|
4
|
+
"effectImagePath": "/assets/images/together_forever.png",
|
|
5
|
+
"elements": [
|
|
6
|
+
{
|
|
7
|
+
"type": "image",
|
|
8
|
+
"imagePath": "",
|
|
9
|
+
"filter": "",
|
|
10
|
+
"perspective": "",
|
|
11
|
+
"rotate": 45,
|
|
12
|
+
"height": 300,
|
|
13
|
+
"width": 300,
|
|
14
|
+
"x": 200,
|
|
15
|
+
"y": 200,
|
|
16
|
+
"id": "file-1"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"label": "",
|
|
20
|
+
"id": "text-1",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"x": "100",
|
|
23
|
+
"y": "100",
|
|
24
|
+
"color": "red",
|
|
25
|
+
"fontFamily": "Calligraphy",
|
|
26
|
+
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
|
27
|
+
"fontWeight": "bold",
|
|
28
|
+
"fontSize": 50
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"type": "image",
|
|
32
|
+
"imagePath": "",
|
|
33
|
+
"filter": "",
|
|
34
|
+
"perspective": "",
|
|
35
|
+
"rotate": "",
|
|
36
|
+
"height": 300,
|
|
37
|
+
"width": 300,
|
|
38
|
+
"x": 100,
|
|
39
|
+
"y": 200,
|
|
40
|
+
"id": "file-3"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"id": "text-2",
|
|
44
|
+
"label": "",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"x": 100,
|
|
47
|
+
"y": 100,
|
|
48
|
+
"color": "red",
|
|
49
|
+
"fontFamily": "Calligraphy",
|
|
50
|
+
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
|
51
|
+
"fontWeight": "bold",
|
|
52
|
+
"fontSize": 50
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
]
|
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.
|
|
4
|
+
version: 2.2.0
|
|
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-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -2376,6 +2376,7 @@ files:
|
|
|
2376
2376
|
- _data/home/hi/hi.json
|
|
2377
2377
|
- _data/languagesupport/compress-pdf-langs.json
|
|
2378
2378
|
- _data/languagesupport/index-langs.json
|
|
2379
|
+
- _data/photo-categories.json
|
|
2379
2380
|
- _data/privacy/en/privacyPolicy.json
|
|
2380
2381
|
- _data/rating/rating.json
|
|
2381
2382
|
- _data/termAndCondition/en/termAndCondition.json
|
|
@@ -2564,6 +2565,7 @@ files:
|
|
|
2564
2565
|
- assets/fileimg/wcqHWtb.jpeg
|
|
2565
2566
|
- assets/fileimg/xbfyrdU.jpeg
|
|
2566
2567
|
- assets/fileimg/xeDZX8x.jpeg
|
|
2568
|
+
- assets/fonts/Calligraphy.ttf
|
|
2567
2569
|
- assets/guaranty.svg
|
|
2568
2570
|
- assets/images/Ankita.webp
|
|
2569
2571
|
- assets/images/Anushka.webp
|
|
@@ -2584,6 +2586,7 @@ files:
|
|
|
2584
2586
|
- assets/images/safevideoconverter.svg
|
|
2585
2587
|
- assets/images/siddhika.jpeg
|
|
2586
2588
|
- assets/images/sona.jpeg
|
|
2589
|
+
- assets/images/together_forever.png
|
|
2587
2590
|
- assets/images/udit.jpeg
|
|
2588
2591
|
- assets/images/udit.jpg
|
|
2589
2592
|
- assets/images/udit.png
|
|
@@ -2599,6 +2602,7 @@ files:
|
|
|
2599
2602
|
- assets/js/homeResult.js
|
|
2600
2603
|
- assets/js/manifest.json
|
|
2601
2604
|
- assets/js/multiselect.js
|
|
2605
|
+
- assets/js/photo-effects.json
|
|
2602
2606
|
- assets/js/redirectResult.js
|
|
2603
2607
|
- assets/js/theme.js
|
|
2604
2608
|
- assets/linkdin.svg
|