pixflow-upgrade-planning 0.1.0 → 1.1.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.
- package/index.js +86 -54
- package/package.json +4 -4
- package/styles/pixflow.css +31 -63
- package/template.html +7 -7
package/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
const parse = new DOMParser();
|
|
2
2
|
const fs = require("fs");
|
|
3
3
|
const path = require("path");
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
4
|
+
const CepManifest = require("pixflow-cep-manifest");
|
|
5
|
+
const cep_manifest = new CepManifest();
|
|
6
|
+
const token = require("pixflow-token");
|
|
7
|
+
const PixflowPurchaseCodeActivate = require("pixflow-purchase-code-activate");
|
|
8
|
+
const purchase_code = new PixflowPurchaseCodeActivate();
|
|
7
9
|
|
|
8
10
|
class PixflowUpgradePlanning extends HTMLElement {
|
|
9
11
|
|
|
10
12
|
constructor(){
|
|
11
13
|
super();
|
|
12
|
-
self = this;
|
|
13
14
|
this.port = localStorage.getItem("port");
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
self = this;
|
|
18
|
-
this.cep_manifest = new PixflowCEPManifest();
|
|
17
|
+
connectedCallback(){
|
|
18
|
+
const self = this;
|
|
19
19
|
const style = document.createElement("style");
|
|
20
20
|
style.textContent = fs.readFileSync(path.join(__dirname, "styles", `${this.port}.css`));
|
|
21
21
|
this.appendChild(style);
|
|
@@ -23,70 +23,98 @@ class PixflowUpgradePlanning extends HTMLElement {
|
|
|
23
23
|
this.template = parse.parseFromString(fs.readFileSync(path.join(__dirname, "template.html")).toString("utf8"), "text/html");
|
|
24
24
|
this.appendChild(this.template.querySelector(`div.${this.port}`));
|
|
25
25
|
|
|
26
|
+
purchase_code.check_device_select();
|
|
27
|
+
|
|
28
|
+
this.querySelector(`img.close`).addEventListener("click", this.close_click);
|
|
29
|
+
|
|
26
30
|
if(this.port == "pixflow"){
|
|
27
|
-
const p = await price_details(this.cep_manifest.get_post_id());
|
|
28
|
-
this.querySelector("div.pixflow > div.plan > div.single > div > div").innerHTML = p.single;
|
|
29
|
-
this.querySelector("div.pixflow > div.plan > div.team > div > div").innerHTML = p.team;
|
|
30
31
|
this.appendChild(this.template.querySelector("div.purchase-code"));
|
|
32
|
+
this.get_product_price_detail();
|
|
33
|
+
this.active_next_license();
|
|
34
|
+
this.querySelector("div.purchase-code > img.close").addEventListener("click", function(){
|
|
35
|
+
this.parentNode.classList.remove("active");
|
|
36
|
+
})
|
|
31
37
|
this.querySelector("div.activate-code").addEventListener("click", this.activate_code_click);
|
|
32
|
-
this.querySelector("div.pixflow
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
this.querySelector("div.pixflow div.activate-code-block button").addEventListener("click", function(){
|
|
39
|
+
const license = self.querySelector("div.plan > div > div.active").parentNode.className.split(" ")[0];
|
|
40
|
+
const link = `https://pixflow.net/product/${cep_manifest.get_link()}/?active-license=${license}`;
|
|
41
|
+
window.cep.util.openURLInDefaultBrowser(link);
|
|
42
|
+
})
|
|
43
|
+
this.querySelector("div.purchase-code form div.back-upgrade-plan").addEventListener("click", function(){
|
|
44
|
+
this.parentNode.parentNode.classList.remove("active");
|
|
45
|
+
})
|
|
35
46
|
this.querySelectorAll("div.plan > div > div").forEach(function(element){
|
|
36
47
|
element.addEventListener("click", function(){
|
|
37
|
-
|
|
48
|
+
try {
|
|
49
|
+
self.querySelector("div.plan > div > div.active").classList.remove("active");
|
|
50
|
+
} catch(e) {}
|
|
38
51
|
this.classList.add("active");
|
|
39
52
|
})
|
|
40
53
|
})
|
|
41
|
-
}
|
|
42
54
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
55
|
+
this.querySelector("div.purchase-code > form > button").addEventListener("click", async function(e){
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
purchase_code.set_code(self.querySelector("div.purchase-code > form > input[type=text]").value);
|
|
58
|
+
const message = self.querySelector("div.purchase-code > form > p.message");
|
|
59
|
+
const msg = self.querySelectorAll("div.purchase-code > form > ul.msg > *");
|
|
60
|
+
const res = await purchase_code.activate_code();
|
|
61
|
+
if(!res.error){
|
|
62
|
+
message.innerHTML = msg[0].innerHTML;
|
|
63
|
+
setTimeout(function(){
|
|
64
|
+
window.location.href = cep_manifest.get_main_path();
|
|
65
|
+
}, 1500);
|
|
66
|
+
} else {
|
|
67
|
+
message.innerHTML = msg[1].innerHTML;
|
|
68
|
+
}
|
|
69
|
+
})
|
|
70
|
+
}
|
|
46
71
|
|
|
47
72
|
}
|
|
48
73
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
} else if(check_device_query.error == -2){
|
|
60
|
-
index = 2;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
e.target.parentNode.querySelector(`div.message > p:nth-child(${index})`).classList.add("active");
|
|
64
|
-
if(index == 1){
|
|
65
|
-
setTimeout(() => {
|
|
66
|
-
window.location.href = "./index.html";
|
|
67
|
-
}, 1200);
|
|
74
|
+
active_next_license(){
|
|
75
|
+
var license;
|
|
76
|
+
this.querySelectorAll("div.plan > div > div").forEach(e => e.classList.remove("active"));
|
|
77
|
+
switch(localStorage.getItem("active")){
|
|
78
|
+
case "free":
|
|
79
|
+
license = "single";
|
|
80
|
+
break;
|
|
81
|
+
case "single":
|
|
82
|
+
license = "team";
|
|
83
|
+
break;
|
|
68
84
|
}
|
|
85
|
+
try {
|
|
86
|
+
this.querySelector(`div.plan > div.${license} > div`).classList.add("active");
|
|
87
|
+
} catch(e) {}
|
|
88
|
+
return license;
|
|
69
89
|
}
|
|
70
90
|
|
|
71
|
-
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
91
|
+
get_product_price_detail(){
|
|
92
|
+
const self = this;
|
|
93
|
+
const xhr = new XMLHttpRequest();
|
|
94
|
+
xhr.open("GET", `https://pixflow.net/wp-json/pixflow/get_product_price_detail?product-id=${cep_manifest.get_post_id()}&token=${token()}`);
|
|
95
|
+
xhr.addEventListener("load", function(){
|
|
96
|
+
const json = JSON.parse(this.responseText);
|
|
97
|
+
self.querySelectorAll("img.loading").forEach(function(element){
|
|
98
|
+
element.remove();
|
|
99
|
+
})
|
|
100
|
+
var off = parseInt(json.off_percentage);
|
|
101
|
+
var single = parseInt(json.single.price);
|
|
102
|
+
var team = parseInt(json.team.price);
|
|
103
|
+
var strSingle = `$${single}`;
|
|
104
|
+
var strTeam = `$${team}`;
|
|
105
|
+
if(off > 0){
|
|
106
|
+
single = Math.floor((100 - off) / 100 * parseInt(json.single.price));
|
|
107
|
+
team = Math.floor((100 - off) / 100 * parseInt(json.team.price));
|
|
108
|
+
strSingle = `$${single} <del>$${json.single.price}</del>`;
|
|
109
|
+
strTeam = `$${team} <del>$${json.team.price}</del>`;
|
|
110
|
+
}
|
|
111
|
+
self.querySelector("div.pixflow > div.plan > div.single > div > div:nth-child(2)").innerHTML = strSingle;
|
|
112
|
+
self.querySelector("div.pixflow > div.plan > div.team > div > div:nth-child(2)").innerHTML = strTeam;
|
|
113
|
+
})
|
|
114
|
+
xhr.send(null);
|
|
86
115
|
}
|
|
87
116
|
|
|
88
117
|
activate_code_click(e){
|
|
89
|
-
e.target.parentNode.parentNode.classList.remove("active");
|
|
90
118
|
e.target.parentNode.parentNode.parentNode.querySelector("div.purchase-code").classList.add("active");
|
|
91
119
|
}
|
|
92
120
|
|
|
@@ -94,8 +122,12 @@ class PixflowUpgradePlanning extends HTMLElement {
|
|
|
94
122
|
this.querySelector(`div.${this.port}`).classList.add("active");
|
|
95
123
|
}
|
|
96
124
|
|
|
125
|
+
close(){
|
|
126
|
+
this.querySelector(`div.${this.port}`).classList.remove("active");
|
|
127
|
+
}
|
|
128
|
+
|
|
97
129
|
close_click(e){
|
|
98
|
-
e.target.parentNode.
|
|
130
|
+
e.target.parentNode.parentNode.close();
|
|
99
131
|
}
|
|
100
132
|
|
|
101
133
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixflow-upgrade-planning",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"pixflow-
|
|
14
|
-
"pixflow-
|
|
15
|
-
"pixflow-
|
|
13
|
+
"pixflow-token": "^1.0.0",
|
|
14
|
+
"pixflow-cep-manifest": "^1.0.0",
|
|
15
|
+
"pixflow-purchase-code-activate": "^1.0.0"
|
|
16
16
|
}
|
|
17
17
|
}
|
package/styles/pixflow.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
pixflow-upgrade-planning > div.pixflow > div.plan > div, pixflow-upgrade-planning
|
|
10
|
+
pixflow-upgrade-planning > div.pixflow > div.plan > div, pixflow-upgrade-planning div.purchase-code button {
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -121,7 +121,7 @@ div.activate-code-block {
|
|
|
121
121
|
background: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,1) 34%, rgba(12,12,12,1) 100%);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
pixflow-upgrade-planning > div.pixflow button {
|
|
124
|
+
pixflow-upgrade-planning > div.pixflow button, pixflow-upgrade-planning > div.purchase-code > form > button {
|
|
125
125
|
width: 147px;
|
|
126
126
|
height: 34px;
|
|
127
127
|
border-radius: 17px;
|
|
@@ -129,6 +129,8 @@ pixflow-upgrade-planning > div.pixflow button {
|
|
|
129
129
|
color: #fff;
|
|
130
130
|
transition: filter 200ms;
|
|
131
131
|
border: 0;
|
|
132
|
+
outline: 0;
|
|
133
|
+
cursor: pointer;
|
|
132
134
|
}
|
|
133
135
|
|
|
134
136
|
pixflow-upgrade-planning > div.pixflow > div:nth-child(5) {
|
|
@@ -190,13 +192,6 @@ pixflow-upgrade-planning > div.pixflow div.activate-code {
|
|
|
190
192
|
color: #7C879A;
|
|
191
193
|
font-size: 13px;
|
|
192
194
|
margin: 15px 0;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right, pixflow-upgrade-planning > div.pixflow > div.plan > div, #activate, #dashboard > div, #dashboard img, .apply, .unlock, #customize > div.params > div.header > div, pixflow-upgrade-planning > div.pixflow > div.activate-code, .view-details, body > div.right-side > div.header > div.views > img.view-small-icon {
|
|
196
|
-
cursor: pointer;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
pixflow-upgrade-planning > div.pixflow div.activate-code {
|
|
200
195
|
color: #7C879A;
|
|
201
196
|
font-size: 13px;
|
|
202
197
|
cursor: pointer;
|
|
@@ -245,10 +240,11 @@ pixflow-upgrade-planning div.close {
|
|
|
245
240
|
background-position: center center;
|
|
246
241
|
width: 73px;
|
|
247
242
|
height: 27px;
|
|
243
|
+
cursor: pointer;
|
|
248
244
|
}
|
|
249
245
|
|
|
250
|
-
pixflow-upgrade-planning
|
|
251
|
-
display:
|
|
246
|
+
pixflow-upgrade-planning div.purchase-code {
|
|
247
|
+
display: flex;
|
|
252
248
|
flex-direction: column;
|
|
253
249
|
position: fixed;
|
|
254
250
|
top: calc(100vh + 10px);
|
|
@@ -261,55 +257,47 @@ pixflow-upgrade-planning > div.purchase-code {
|
|
|
261
257
|
border-radius: 17px 17px 0px 0px;
|
|
262
258
|
z-index: 1001;
|
|
263
259
|
align-items: center;
|
|
264
|
-
justify-content: space-between;
|
|
265
260
|
font-family: 'Inter';
|
|
266
261
|
font-style: normal;
|
|
267
262
|
font-weight: 700;
|
|
268
263
|
font-size: 12px;
|
|
269
264
|
transition: top 400ms;
|
|
270
265
|
background: linear-gradient(180deg, #005DFF -86.53%, #2273FF -13.89%, #0C0C0C 47.55%, rgb(221 0 27) 47.56%, #0C0C0C 47.57%);
|
|
266
|
+
justify-content: space-between;
|
|
271
267
|
}
|
|
272
268
|
|
|
273
|
-
pixflow-upgrade-planning
|
|
269
|
+
pixflow-upgrade-planning div.purchase-code.active {
|
|
274
270
|
top: calc(100vh - 95%);
|
|
275
271
|
}
|
|
276
272
|
|
|
277
|
-
pixflow-upgrade-planning
|
|
278
|
-
margin-top: 39px;
|
|
273
|
+
pixflow-upgrade-planning div.purchase-code > form > input[type=text]:nth-child(1) {
|
|
279
274
|
background: rgb(185 210 255 / 10%);
|
|
280
275
|
}
|
|
281
276
|
|
|
282
|
-
pixflow-upgrade-planning
|
|
277
|
+
pixflow-upgrade-planning div.purchase-code > form > div {
|
|
283
278
|
color: #7C879A;
|
|
284
279
|
margin: 15px 0;
|
|
285
280
|
cursor: pointer;
|
|
286
281
|
}
|
|
287
282
|
|
|
288
|
-
pixflow-upgrade-planning
|
|
283
|
+
pixflow-upgrade-planning div.purchase-code > img:nth-child(1) {
|
|
289
284
|
position: absolute;
|
|
290
285
|
z-index: -1;
|
|
291
286
|
top: -8px;
|
|
292
287
|
}
|
|
293
288
|
|
|
294
|
-
pixflow-upgrade-planning
|
|
295
|
-
margin-top: 8px;
|
|
289
|
+
pixflow-upgrade-planning div.purchase-code > img:nth-child(2) {
|
|
296
290
|
position: absolute;
|
|
291
|
+
top: 0;
|
|
292
|
+
cursor: pointer;
|
|
297
293
|
}
|
|
298
294
|
|
|
299
|
-
pixflow-upgrade-planning
|
|
300
|
-
margin-top:
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
pixflow-upgrade-planning > div.purchase-code.active, div#block.active, div#logout.active, div#revoke-access.active, div#store.active, #font-selector.active {
|
|
304
|
-
opacity: 1;
|
|
305
|
-
display: flex!important;
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
pixflow-upgrade-planning > div.purchase-code > div {
|
|
295
|
+
pixflow-upgrade-planning div.purchase-code > div {
|
|
296
|
+
margin-top: 0px;
|
|
309
297
|
color: #7C879A;
|
|
310
298
|
}
|
|
311
299
|
|
|
312
|
-
pixflow-upgrade-planning
|
|
300
|
+
pixflow-upgrade-planning div.purchase-code > p.describe {
|
|
313
301
|
font-family: Inter;
|
|
314
302
|
font-style: normal;
|
|
315
303
|
font-weight: bold;
|
|
@@ -321,18 +309,18 @@ pixflow-upgrade-planning > div.purchase-code > p.describe {
|
|
|
321
309
|
margin-top: 69px;
|
|
322
310
|
}
|
|
323
311
|
|
|
324
|
-
pixflow-upgrade-planning
|
|
312
|
+
pixflow-upgrade-planning div.purchase-code > p {
|
|
325
313
|
width: fit-content;
|
|
326
314
|
}
|
|
327
315
|
|
|
328
|
-
pixflow-upgrade-planning
|
|
316
|
+
pixflow-upgrade-planning div.purchase-code > form {
|
|
329
317
|
display: flex;
|
|
330
318
|
justify-content: space-between;
|
|
331
319
|
align-items: center;
|
|
332
320
|
flex-direction: column;
|
|
333
321
|
}
|
|
334
322
|
|
|
335
|
-
pixflow-upgrade-planning
|
|
323
|
+
pixflow-upgrade-planning div.purchase-code > form > input[type="text"] {
|
|
336
324
|
background-color: rgba(226, 226, 226, 0.6);
|
|
337
325
|
border: 0;
|
|
338
326
|
color: #8D8D8D;
|
|
@@ -349,21 +337,21 @@ pixflow-upgrade-planning > div.purchase-code > div.form > input[type="text"] {
|
|
|
349
337
|
margin: 0;
|
|
350
338
|
}
|
|
351
339
|
|
|
352
|
-
pixflow-upgrade-planning
|
|
340
|
+
pixflow-upgrade-planning div.purchase-code > form > input[type="text"]::selection {
|
|
353
341
|
filter: invert(1);
|
|
354
342
|
}
|
|
355
343
|
|
|
356
|
-
pixflow-upgrade-planning
|
|
344
|
+
pixflow-upgrade-planning div.purchase-code > form > p {
|
|
357
345
|
color: #fff;
|
|
358
346
|
height: 15px;
|
|
359
347
|
}
|
|
360
348
|
|
|
361
|
-
pixflow-upgrade-planning
|
|
349
|
+
pixflow-upgrade-planning div.purchase-code > p {
|
|
362
350
|
width: fit-content;
|
|
363
351
|
text-align: center;
|
|
364
352
|
}
|
|
365
353
|
|
|
366
|
-
pixflow-upgrade-planning
|
|
354
|
+
pixflow-upgrade-planning div.purchase-code > p.buy {
|
|
367
355
|
font-family: Inter;
|
|
368
356
|
font-style: normal;
|
|
369
357
|
font-weight: 500;
|
|
@@ -374,50 +362,30 @@ pixflow-upgrade-planning > div.purchase-code > p.buy {
|
|
|
374
362
|
color: #FFFFFF;
|
|
375
363
|
}
|
|
376
364
|
|
|
377
|
-
pixflow-upgrade-planning
|
|
365
|
+
pixflow-upgrade-planning div.purchase-code > p.buy > a {
|
|
378
366
|
color: #5c92ff;
|
|
379
367
|
text-decoration: underline;
|
|
380
368
|
transition: color 0.2s;
|
|
381
369
|
}
|
|
382
370
|
|
|
383
|
-
pixflow-upgrade-planning
|
|
371
|
+
pixflow-upgrade-planning div.purchase-code > p.buy > a:hover {
|
|
384
372
|
color: #0A48C4;
|
|
385
373
|
}
|
|
386
374
|
|
|
387
|
-
pixflow-upgrade-planning
|
|
375
|
+
pixflow-upgrade-planning div.purchase-code > p.help > a {
|
|
388
376
|
text-decoration: underline;
|
|
389
377
|
}
|
|
390
378
|
|
|
391
|
-
pixflow-upgrade-planning
|
|
379
|
+
pixflow-upgrade-planning div.purchase-code > p.buy > a {
|
|
392
380
|
color: #5c92ff;
|
|
393
381
|
text-decoration: underline;
|
|
394
382
|
display: contents;
|
|
395
383
|
}
|
|
396
384
|
|
|
397
|
-
pixflow-upgrade-planning
|
|
385
|
+
pixflow-upgrade-planning div.purchase-code div.result {
|
|
398
386
|
color: #FFFFFF;
|
|
399
387
|
}
|
|
400
388
|
|
|
401
|
-
pixflow-upgrade-planning
|
|
389
|
+
pixflow-upgrade-planning div.purchase-code ul.msg {
|
|
402
390
|
display: none;
|
|
403
391
|
}
|
|
404
|
-
|
|
405
|
-
pixflow-upgrade-planning > div.purchase-code > div.form > div.message > p.active {
|
|
406
|
-
display: block;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
pixflow-upgrade-planning > div.purchase-code button {
|
|
410
|
-
color: #FFFFFF;
|
|
411
|
-
font-family: Inter;
|
|
412
|
-
font-style: normal;
|
|
413
|
-
font-weight: 500;
|
|
414
|
-
font-size: 14px;
|
|
415
|
-
border: 0;
|
|
416
|
-
outline: none;
|
|
417
|
-
transition: background-color 0.2s;
|
|
418
|
-
cursor: pointer;
|
|
419
|
-
padding: 9px;
|
|
420
|
-
margin: 9px;
|
|
421
|
-
border-radius: 7px;
|
|
422
|
-
background-color: #005dff;
|
|
423
|
-
}
|
package/template.html
CHANGED
|
@@ -60,14 +60,14 @@
|
|
|
60
60
|
<img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="close">
|
|
61
61
|
<img src="./node_modules/pixflow-upgrade-planning/images/pixflow/purchase-code.svg">
|
|
62
62
|
<p class="describe">Use the code you received after the purchase process to activate the plugin</p>
|
|
63
|
-
<
|
|
63
|
+
<form>
|
|
64
64
|
<input type="text" spellcheck="false" placeholder="Purchase code">
|
|
65
|
-
<
|
|
66
|
-
<p>Activation was successful</p>
|
|
67
|
-
<p>Your code has been activated on 1 machines. Revoke them and try again.</p>
|
|
68
|
-
<p>Invalid purchase code!</p>
|
|
69
|
-
</div>
|
|
65
|
+
<p class="message"></p>
|
|
70
66
|
<button>ACTIVATE</button>
|
|
67
|
+
<ul class="msg">
|
|
68
|
+
<li>Activation was successful.</li>
|
|
69
|
+
<li>Invalid purchase code!</li>
|
|
70
|
+
</ul>
|
|
71
71
|
<div class="back-upgrade-plan">Purchase Pro Membership</div>
|
|
72
|
-
</
|
|
72
|
+
</form>
|
|
73
73
|
</div>
|