storyly-web 1.0.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/.babelrc +10 -0
- package/.eslintrc.js +21 -0
- package/.github/workflows/commit-message-checker.yml +32 -0
- package/.github/workflows/enforce-pr-labels.yml +27 -0
- package/.husky/pre-commit +4 -0
- package/.parcel-cache/081b21d675a52722 +0 -0
- package/.parcel-cache/adbf3c8817e7b823 +0 -0
- package/.parcel-cache/data.mdb +0 -0
- package/.parcel-cache/f0ace7bde139ae65.txt +2 -0
- package/.parcel-cache/lock.mdb +0 -0
- package/.prettierrc +5 -0
- package/.vscode/launch.json +15 -0
- package/.vscode/settings.json +6 -0
- package/README.md +41 -0
- package/dist/AdGroup.8ca7e3ac.js +5 -0
- package/dist/esm.eba669ad.js +175 -0
- package/dist/index.js +416 -0
- package/dist/storyly-web.css +1 -0
- package/dist/storyly-web.js +416 -0
- package/index.html +210 -0
- package/package.json +53 -0
- package/styleConvertor.js +30 -0
- package/yarn-error.log +5685 -0
package/index.html
ADDED
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Storyly Web Stories</title>
|
|
8
|
+
<!-- <script
|
|
9
|
+
async
|
|
10
|
+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5041357298988716"
|
|
11
|
+
crossorigin="anonymous"
|
|
12
|
+
></script> -->
|
|
13
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
14
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
15
|
+
<link
|
|
16
|
+
href="https://fonts.googleapis.com/css2?family=Inspiration&display=swap"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
/>
|
|
19
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
20
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
21
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
22
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
23
|
+
<link
|
|
24
|
+
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
/>
|
|
27
|
+
<link
|
|
28
|
+
href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inspiration&family=Inter:wght@400;600&family=Palette+Mosaic&family=Roboto&display=swap"
|
|
29
|
+
rel="stylesheet"
|
|
30
|
+
/>
|
|
31
|
+
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
|
|
32
|
+
</head>
|
|
33
|
+
<style>
|
|
34
|
+
body {
|
|
35
|
+
margin: 0;
|
|
36
|
+
}
|
|
37
|
+
p {
|
|
38
|
+
margin: 0;
|
|
39
|
+
}
|
|
40
|
+
.custom-story-group .storyly__story-group-title-container .storyly__story-group-title {
|
|
41
|
+
font-family: 'Poppins', sans-serif !important;
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
|
|
45
|
+
<body>
|
|
46
|
+
<script custom-element="storyly-web" src="./src/index.js"></script>
|
|
47
|
+
|
|
48
|
+
<!-- <script
|
|
49
|
+
custom-element="storyly-web"
|
|
50
|
+
src="https://web-story.storyly.io/latest/storyly-web.js"
|
|
51
|
+
></script>
|
|
52
|
+
<storyly-web-embed autoplay group="88892" useClose useShare inPhone>
|
|
53
|
+
<div
|
|
54
|
+
style="
|
|
55
|
+
position: relative;
|
|
56
|
+
width: 360px;
|
|
57
|
+
height: 640px;
|
|
58
|
+
margin: 0 auto;
|
|
59
|
+
left: 50%;
|
|
60
|
+
transform: translateX(-50%);
|
|
61
|
+
"
|
|
62
|
+
>
|
|
63
|
+
<storyly-web></storyly-web>
|
|
64
|
+
<script>
|
|
65
|
+
const storylyWeb = document.querySelector('storyly-web');
|
|
66
|
+
storylyWeb.init({
|
|
67
|
+
token:
|
|
68
|
+
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NfaWQiOjM3MTAsImFwcF9pZCI6MTU0MTgsImluc19pZCI6MTY4ODh9.FCybgFVT74-4hS9mW6tZMhSJDgiP_SU-tpigZFk-GVc',
|
|
69
|
+
events: {
|
|
70
|
+
closeStoryGroup: (e) => console.log(e),
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
</script>
|
|
74
|
+
</div>
|
|
75
|
+
</storyly-web-embed> -->
|
|
76
|
+
|
|
77
|
+
<storyly-web></storyly-web>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
let products;
|
|
81
|
+
fetch('products.json')
|
|
82
|
+
.then((response) => {
|
|
83
|
+
return response.json();
|
|
84
|
+
})
|
|
85
|
+
.then((data) => {
|
|
86
|
+
products = data;
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
const storylyWeb = document.querySelector('storyly-web');
|
|
90
|
+
const externalData = [
|
|
91
|
+
{
|
|
92
|
+
'{Swipe}': 'swipe text',
|
|
93
|
+
'{Text_1}': 'Deneme text 2',
|
|
94
|
+
'{Text_2}': 'Deneme text 2',
|
|
95
|
+
'{Text_3}': 'Deneme Text 1',
|
|
96
|
+
'{CTA_Name}': 'Deneme Text 1',
|
|
97
|
+
'{CTA_URL}': 'https://google.com.tr',
|
|
98
|
+
'{Media_1}':
|
|
99
|
+
'https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8OSUzQTE2fGVufDB8fDB8fA%3D%3D&w=1000&q=80',
|
|
100
|
+
'{Media_2}':
|
|
101
|
+
'https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8OSUzQTE2fGVufDB8fDB8fA%3D%3D&w=1000&q=80',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
'{Swipe}': 'story 2',
|
|
105
|
+
'{Text_2}': 'story2 text 2',
|
|
106
|
+
'{Text_1}': 'story2 Text 1',
|
|
107
|
+
'{CTA_Name}': 'Deneme Text 2',
|
|
108
|
+
'{CTA_URL}': 'https://google.com.tr',
|
|
109
|
+
'{Media_1}':
|
|
110
|
+
'https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8OSUzQTE2fGVufDB8fDB8fA%3D%3D&w=1000&q=80',
|
|
111
|
+
'{Media_2}':
|
|
112
|
+
'https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8OSUzQTE2fGVufDB8fDB8fA%3D%3D&w=1000&q=80',
|
|
113
|
+
},
|
|
114
|
+
];
|
|
115
|
+
|
|
116
|
+
const userPropertyData = {
|
|
117
|
+
'{user_name}': 'İslam',
|
|
118
|
+
};
|
|
119
|
+
// const userPropertyData = {
|
|
120
|
+
// '{age}': '234',
|
|
121
|
+
// '{cenk}': 'balım',
|
|
122
|
+
// '{ezg}': 'www.google.com',
|
|
123
|
+
// '{product_name}': 'LLLF^',
|
|
124
|
+
// '{za13}': 'TESTSTEST',
|
|
125
|
+
// '{user_image}':
|
|
126
|
+
// 'https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-ejemplo-de-texto-sello-blanco-en-backgroud-roja.jpg',
|
|
127
|
+
// };
|
|
128
|
+
|
|
129
|
+
// setTimeout(() => {
|
|
130
|
+
|
|
131
|
+
storylyWeb.init({
|
|
132
|
+
token:
|
|
133
|
+
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NfaWQiOjIxOSwiYXBwX2lkIjo1ODk0LCJpbnNfaWQiOjYxMTR9.zVDyODqutUd_C477uiGGdC4IWj-FrX4lf19_5xN_tTQ',
|
|
134
|
+
props: {
|
|
135
|
+
storyGroupBorderRadius: 50,
|
|
136
|
+
storyGroupSize: '100x100',
|
|
137
|
+
storyGroupAlign: 'center',
|
|
138
|
+
storyGroupIconBorderColorNotSeen: ['rgba(122,75,255, 1)', 'rgba(0,224,228, 1)'],
|
|
139
|
+
storyGroupIconBorderColorSeen: ['red'],
|
|
140
|
+
storyTextFont: 'Roboto',
|
|
141
|
+
scrollIndicator: true,
|
|
142
|
+
},
|
|
143
|
+
segments: ['test'],
|
|
144
|
+
isProductFallbackEnabled: true,
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
function goStory() {
|
|
148
|
+
storylyWeb.setSegments(['mest']);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
let cartProducts = [];
|
|
152
|
+
let err = false;
|
|
153
|
+
|
|
154
|
+
function addProduct({ product, onError, onSuccess }) {
|
|
155
|
+
const filteredProducts = cartProducts.filter((p) => p.product_id !== product.product_id);
|
|
156
|
+
if (product.quantity) filteredProducts.push(product);
|
|
157
|
+
|
|
158
|
+
const prices = [].concat(filteredProducts).reduce(
|
|
159
|
+
(acc, val) => {
|
|
160
|
+
const newVal = {
|
|
161
|
+
price: acc.price + val.price * val.quantity,
|
|
162
|
+
sales_price: acc.sales_price + val.sales_price * val.quantity,
|
|
163
|
+
};
|
|
164
|
+
return newVal;
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
price: 0,
|
|
168
|
+
sales_price: 0,
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
|
|
172
|
+
setTimeout(() => {
|
|
173
|
+
if (err) {
|
|
174
|
+
err = !err;
|
|
175
|
+
onError({
|
|
176
|
+
message: `We're sorry to inform you that the item you're interested in purchasing is currently out of stock.`,
|
|
177
|
+
});
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
err = !err;
|
|
181
|
+
cartProducts = filteredProducts;
|
|
182
|
+
onSuccess({
|
|
183
|
+
products: filteredProducts,
|
|
184
|
+
price: prices.price,
|
|
185
|
+
sales_price: prices.sales_price,
|
|
186
|
+
price_currency: 'USD',
|
|
187
|
+
});
|
|
188
|
+
}, 500);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
function setUserPropertiesData() {
|
|
192
|
+
storylyWeb.setUserPropertiesData(userPropertyData);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
function setExternalData() {
|
|
196
|
+
storylyWeb.setExternalData(externalData);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// setTimeout(() => {
|
|
200
|
+
// setExternalData();
|
|
201
|
+
// }, 1000);
|
|
202
|
+
</script>
|
|
203
|
+
|
|
204
|
+
<button onclick="goStory()">Go Story</button>
|
|
205
|
+
<button onclick="setExternalData()">set External data</button>
|
|
206
|
+
<button onclick="setUserPropertiesData()">Set Segments</button>
|
|
207
|
+
<button onclick="setStorylyHydration()">Set Storyly Hydration</button>
|
|
208
|
+
<!-- <script src="http://localhost:8000/dist/amp-story-player.js"></script> -->
|
|
209
|
+
</body>
|
|
210
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "storyly-web",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Web stories by Storyly",
|
|
5
|
+
"exports": "./dist/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "parcel index.html --host dev.storyly --open --port 8083 --https --cert dev.storyly.pem --key dev.storyly-key.pem",
|
|
8
|
+
"startlocal": "parcel index.html --open --port 8083 --https --cert localhost.pem --key localhost-key.pem",
|
|
9
|
+
"build": "parcel build ./src/index.js -o storyly-web.js --public-url /v2 --no-source-maps",
|
|
10
|
+
"lint": "eslint './src/**/*.{js,jsx}'",
|
|
11
|
+
"format": "prettier \"src/**/*.{js,html}\" --write",
|
|
12
|
+
"npmbuild": "NPM_MODULE=true yarn build && node styleConvertor.js"
|
|
13
|
+
},
|
|
14
|
+
"author": "Storyly",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@babel/core": "^7.13.1",
|
|
18
|
+
"@babel/plugin-transform-runtime": "^7.13.8",
|
|
19
|
+
"@babel/preset-env": "^7.13.5",
|
|
20
|
+
"eslint": "^8.9.0",
|
|
21
|
+
"eslint-config-airbnb-base": "^15.0.0",
|
|
22
|
+
"eslint-config-prettier": "^8.5.0",
|
|
23
|
+
"eslint-plugin-import": "^2.25.4",
|
|
24
|
+
"eslint-plugin-prettier": "^4.0.0",
|
|
25
|
+
"husky": "^7.0.4",
|
|
26
|
+
"lint-staged": "^12.3.6",
|
|
27
|
+
"parcel-bundler": "^1.12.4",
|
|
28
|
+
"prettier": "^2.5.1",
|
|
29
|
+
"sass": "^1.39.2"
|
|
30
|
+
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"@babel/runtime": "^7.20.13",
|
|
33
|
+
"@sentry/browser": "^7.14.0",
|
|
34
|
+
"canvas-confetti": "^1.4.0",
|
|
35
|
+
"copy-to-clipboard": "^3.3.1",
|
|
36
|
+
"isotope-horizontal": "^2.0.1",
|
|
37
|
+
"isotope-layout": "^3.0.6",
|
|
38
|
+
"platform": "^1.3.6",
|
|
39
|
+
"swiper": "^7.3.1",
|
|
40
|
+
"uuid": "^8.3.2"
|
|
41
|
+
},
|
|
42
|
+
"resolvers": [
|
|
43
|
+
"@parcel/resolver-glob"
|
|
44
|
+
],
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "git+https://github.com/Netvent/storyly-web.git"
|
|
48
|
+
},
|
|
49
|
+
"bugs": {
|
|
50
|
+
"url": "https://github.com/Netvent/storyly-web/issues"
|
|
51
|
+
},
|
|
52
|
+
"homepage": "https://github.com/Netvent/storyly-web#readme"
|
|
53
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
|
|
4
|
+
const entryFile = './dist/storyly-web.js';
|
|
5
|
+
const outputDir = './dist';
|
|
6
|
+
const outputFile = 'index.js';
|
|
7
|
+
|
|
8
|
+
function transformClassNames(sourceCode, cssCode) {
|
|
9
|
+
const updatedCode = sourceCode.replace(
|
|
10
|
+
/this\.storylyWebCss_/g,
|
|
11
|
+
`this.storylyWebCss = \`${cssCode}\``
|
|
12
|
+
);
|
|
13
|
+
return updatedCode;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function build() {
|
|
17
|
+
const entryPath = path.join(__dirname, entryFile);
|
|
18
|
+
const outputPath = path.join(__dirname, outputDir, outputFile);
|
|
19
|
+
const cssPath = path.join(__dirname, 'dist/storyly-web.css');
|
|
20
|
+
|
|
21
|
+
const entryCode = fs.readFileSync(entryPath, 'utf8');
|
|
22
|
+
|
|
23
|
+
const cssCode = fs.readFileSync(cssPath, 'utf8');
|
|
24
|
+
const finalCode = transformClassNames(entryCode, cssCode);
|
|
25
|
+
|
|
26
|
+
fs.mkdirSync(path.dirname(outputPath), { recursive: true });
|
|
27
|
+
fs.writeFileSync(outputPath, finalCode, 'utf8');
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
build();
|