@creopse/react 0.0.7 → 0.0.8
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/dist/index.cjs +74 -1
- package/dist/index.js +74 -1
- package/dist/index.mjs +74 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -12199,6 +12199,10 @@ var EditorMessageType;
|
|
|
12199
12199
|
(function(EditorMessageType2) {
|
|
12200
12200
|
EditorMessageType2["RELOAD"] = "reload";
|
|
12201
12201
|
EditorMessageType2["RELOAD_COMPLETE"] = "reload-complete";
|
|
12202
|
+
EditorMessageType2["ENABLE_EDITION_MODE"] = "enable-edition-mode";
|
|
12203
|
+
EditorMessageType2["DESELECT_ALL_SECTIONS"] = "deselect-all-sections";
|
|
12204
|
+
EditorMessageType2["SELECT_PREVIEW_SECTION"] = "select-preview-section";
|
|
12205
|
+
EditorMessageType2["SELECT_SIDEBAR_SECTION"] = "select-sidebar-section";
|
|
12202
12206
|
})(EditorMessageType || (EditorMessageType = {}));
|
|
12203
12207
|
var MenuItemTargetType;
|
|
12204
12208
|
(function(MenuItemTargetType2) {
|
|
@@ -12267,18 +12271,87 @@ const RootContainer = ({
|
|
|
12267
12271
|
}, 1e3);
|
|
12268
12272
|
return () => clearTimeout(timeout);
|
|
12269
12273
|
}, [page, sections]);
|
|
12274
|
+
const sectionsStateRef = React.useRef({});
|
|
12275
|
+
const sectionsRef = React.useRef(sections);
|
|
12270
12276
|
React.useEffect(() => {
|
|
12277
|
+
const deselectAllSections = () => {
|
|
12278
|
+
Object.keys(sectionsStateRef.current).forEach((key) => {
|
|
12279
|
+
sectionsStateRef.current[key].isActive = false;
|
|
12280
|
+
const element = document.getElementById(key);
|
|
12281
|
+
if (element) {
|
|
12282
|
+
element.style.border = "none";
|
|
12283
|
+
element.style.boxShadow = "none";
|
|
12284
|
+
}
|
|
12285
|
+
});
|
|
12286
|
+
};
|
|
12271
12287
|
const handleMessage = (event) => {
|
|
12272
12288
|
if (event.data?.type === EditorMessageType.RELOAD) {
|
|
12273
12289
|
sessionStorage.setItem("shouldNotifyReload", "1");
|
|
12274
12290
|
sessionStorage.setItem("replyOrigin", event.origin);
|
|
12275
12291
|
window.location.reload();
|
|
12292
|
+
} else if (event.data?.type === EditorMessageType.ENABLE_EDITION_MODE) {
|
|
12293
|
+
const primaryColor = event.data?.primaryColor ?? "blue";
|
|
12294
|
+
sessionStorage.setItem("replyOrigin", event.origin);
|
|
12295
|
+
sessionStorage.setItem("primaryColor", primaryColor);
|
|
12296
|
+
sectionsRef.current?.forEach((section) => {
|
|
12297
|
+
if (section.slug && section.pivot?.linkId) {
|
|
12298
|
+
const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
|
|
12299
|
+
const sectionElement = document.getElementById(sectionElementId);
|
|
12300
|
+
if (sectionElement) {
|
|
12301
|
+
sectionsStateRef.current[sectionElementId] = {
|
|
12302
|
+
element: sectionElement,
|
|
12303
|
+
clickCount: 0,
|
|
12304
|
+
isActive: false
|
|
12305
|
+
};
|
|
12306
|
+
const handleClick = function() {
|
|
12307
|
+
deselectAllSections();
|
|
12308
|
+
sectionsStateRef.current[this.id].clickCount++;
|
|
12309
|
+
sectionsStateRef.current[this.id].isActive = true;
|
|
12310
|
+
this.style.border = `5px solid ${primaryColor}`;
|
|
12311
|
+
this.style.boxShadow = `0 0 10px ${primaryColor}`;
|
|
12312
|
+
window.parent.postMessage(
|
|
12313
|
+
{
|
|
12314
|
+
type: EditorMessageType.SELECT_PREVIEW_SECTION,
|
|
12315
|
+
slug: section.slug,
|
|
12316
|
+
linkId: section.pivot?.linkId
|
|
12317
|
+
},
|
|
12318
|
+
event.origin
|
|
12319
|
+
);
|
|
12320
|
+
};
|
|
12321
|
+
sectionElement.addEventListener("click", handleClick);
|
|
12322
|
+
sectionElement.style.cursor = "pointer";
|
|
12323
|
+
sectionElement.style.transition = "all 0.3s ease";
|
|
12324
|
+
}
|
|
12325
|
+
}
|
|
12326
|
+
});
|
|
12327
|
+
} else if (event.data?.type === EditorMessageType.DESELECT_ALL_SECTIONS) {
|
|
12328
|
+
deselectAllSections();
|
|
12329
|
+
} else if (event.data?.type === EditorMessageType.SELECT_SIDEBAR_SECTION) {
|
|
12330
|
+
setTimeout(() => {
|
|
12331
|
+
if (sectionsRef.current?.find(
|
|
12332
|
+
(section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
|
|
12333
|
+
)) {
|
|
12334
|
+
slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
|
|
12335
|
+
}
|
|
12336
|
+
}, 1e3);
|
|
12337
|
+
const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
|
|
12338
|
+
const element = document.getElementById(elementId);
|
|
12339
|
+
if (element) {
|
|
12340
|
+
deselectAllSections();
|
|
12341
|
+
sectionsStateRef.current[elementId].clickCount++;
|
|
12342
|
+
sectionsStateRef.current[elementId].isActive = true;
|
|
12343
|
+
element.style.border = `5px solid ${sessionStorage.getItem("primaryColor")}`;
|
|
12344
|
+
element.style.boxShadow = `0 0 10px ${sessionStorage.getItem("primaryColor")}`;
|
|
12345
|
+
}
|
|
12276
12346
|
}
|
|
12277
12347
|
};
|
|
12278
12348
|
window.addEventListener("message", handleMessage);
|
|
12279
12349
|
if (sessionStorage.getItem("shouldNotifyReload") === "1") {
|
|
12280
12350
|
const origin = sessionStorage.getItem("replyOrigin") || "*";
|
|
12281
|
-
window.parent.postMessage(
|
|
12351
|
+
window.parent.postMessage(
|
|
12352
|
+
{ type: EditorMessageType.RELOAD_COMPLETE },
|
|
12353
|
+
origin
|
|
12354
|
+
);
|
|
12282
12355
|
sessionStorage.removeItem("shouldNotifyReload");
|
|
12283
12356
|
sessionStorage.removeItem("replyOrigin");
|
|
12284
12357
|
}
|
package/dist/index.js
CHANGED
|
@@ -12197,6 +12197,10 @@ var CreopseReactToolkit = function(exports, React2, reactDom) {
|
|
|
12197
12197
|
(function(EditorMessageType2) {
|
|
12198
12198
|
EditorMessageType2["RELOAD"] = "reload";
|
|
12199
12199
|
EditorMessageType2["RELOAD_COMPLETE"] = "reload-complete";
|
|
12200
|
+
EditorMessageType2["ENABLE_EDITION_MODE"] = "enable-edition-mode";
|
|
12201
|
+
EditorMessageType2["DESELECT_ALL_SECTIONS"] = "deselect-all-sections";
|
|
12202
|
+
EditorMessageType2["SELECT_PREVIEW_SECTION"] = "select-preview-section";
|
|
12203
|
+
EditorMessageType2["SELECT_SIDEBAR_SECTION"] = "select-sidebar-section";
|
|
12200
12204
|
})(EditorMessageType || (EditorMessageType = {}));
|
|
12201
12205
|
var MenuItemTargetType;
|
|
12202
12206
|
(function(MenuItemTargetType2) {
|
|
@@ -12265,18 +12269,87 @@ var CreopseReactToolkit = function(exports, React2, reactDom) {
|
|
|
12265
12269
|
}, 1e3);
|
|
12266
12270
|
return () => clearTimeout(timeout);
|
|
12267
12271
|
}, [page, sections]);
|
|
12272
|
+
const sectionsStateRef = React2.useRef({});
|
|
12273
|
+
const sectionsRef = React2.useRef(sections);
|
|
12268
12274
|
React2.useEffect(() => {
|
|
12275
|
+
const deselectAllSections = () => {
|
|
12276
|
+
Object.keys(sectionsStateRef.current).forEach((key) => {
|
|
12277
|
+
sectionsStateRef.current[key].isActive = false;
|
|
12278
|
+
const element = document.getElementById(key);
|
|
12279
|
+
if (element) {
|
|
12280
|
+
element.style.border = "none";
|
|
12281
|
+
element.style.boxShadow = "none";
|
|
12282
|
+
}
|
|
12283
|
+
});
|
|
12284
|
+
};
|
|
12269
12285
|
const handleMessage = (event) => {
|
|
12270
12286
|
if (event.data?.type === EditorMessageType.RELOAD) {
|
|
12271
12287
|
sessionStorage.setItem("shouldNotifyReload", "1");
|
|
12272
12288
|
sessionStorage.setItem("replyOrigin", event.origin);
|
|
12273
12289
|
window.location.reload();
|
|
12290
|
+
} else if (event.data?.type === EditorMessageType.ENABLE_EDITION_MODE) {
|
|
12291
|
+
const primaryColor = event.data?.primaryColor ?? "blue";
|
|
12292
|
+
sessionStorage.setItem("replyOrigin", event.origin);
|
|
12293
|
+
sessionStorage.setItem("primaryColor", primaryColor);
|
|
12294
|
+
sectionsRef.current?.forEach((section) => {
|
|
12295
|
+
if (section.slug && section.pivot?.linkId) {
|
|
12296
|
+
const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
|
|
12297
|
+
const sectionElement = document.getElementById(sectionElementId);
|
|
12298
|
+
if (sectionElement) {
|
|
12299
|
+
sectionsStateRef.current[sectionElementId] = {
|
|
12300
|
+
element: sectionElement,
|
|
12301
|
+
clickCount: 0,
|
|
12302
|
+
isActive: false
|
|
12303
|
+
};
|
|
12304
|
+
const handleClick = function() {
|
|
12305
|
+
deselectAllSections();
|
|
12306
|
+
sectionsStateRef.current[this.id].clickCount++;
|
|
12307
|
+
sectionsStateRef.current[this.id].isActive = true;
|
|
12308
|
+
this.style.border = `5px solid ${primaryColor}`;
|
|
12309
|
+
this.style.boxShadow = `0 0 10px ${primaryColor}`;
|
|
12310
|
+
window.parent.postMessage(
|
|
12311
|
+
{
|
|
12312
|
+
type: EditorMessageType.SELECT_PREVIEW_SECTION,
|
|
12313
|
+
slug: section.slug,
|
|
12314
|
+
linkId: section.pivot?.linkId
|
|
12315
|
+
},
|
|
12316
|
+
event.origin
|
|
12317
|
+
);
|
|
12318
|
+
};
|
|
12319
|
+
sectionElement.addEventListener("click", handleClick);
|
|
12320
|
+
sectionElement.style.cursor = "pointer";
|
|
12321
|
+
sectionElement.style.transition = "all 0.3s ease";
|
|
12322
|
+
}
|
|
12323
|
+
}
|
|
12324
|
+
});
|
|
12325
|
+
} else if (event.data?.type === EditorMessageType.DESELECT_ALL_SECTIONS) {
|
|
12326
|
+
deselectAllSections();
|
|
12327
|
+
} else if (event.data?.type === EditorMessageType.SELECT_SIDEBAR_SECTION) {
|
|
12328
|
+
setTimeout(() => {
|
|
12329
|
+
if (sectionsRef.current?.find(
|
|
12330
|
+
(section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
|
|
12331
|
+
)) {
|
|
12332
|
+
slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
|
|
12333
|
+
}
|
|
12334
|
+
}, 1e3);
|
|
12335
|
+
const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
|
|
12336
|
+
const element = document.getElementById(elementId);
|
|
12337
|
+
if (element) {
|
|
12338
|
+
deselectAllSections();
|
|
12339
|
+
sectionsStateRef.current[elementId].clickCount++;
|
|
12340
|
+
sectionsStateRef.current[elementId].isActive = true;
|
|
12341
|
+
element.style.border = `5px solid ${sessionStorage.getItem("primaryColor")}`;
|
|
12342
|
+
element.style.boxShadow = `0 0 10px ${sessionStorage.getItem("primaryColor")}`;
|
|
12343
|
+
}
|
|
12274
12344
|
}
|
|
12275
12345
|
};
|
|
12276
12346
|
window.addEventListener("message", handleMessage);
|
|
12277
12347
|
if (sessionStorage.getItem("shouldNotifyReload") === "1") {
|
|
12278
12348
|
const origin = sessionStorage.getItem("replyOrigin") || "*";
|
|
12279
|
-
window.parent.postMessage(
|
|
12349
|
+
window.parent.postMessage(
|
|
12350
|
+
{ type: EditorMessageType.RELOAD_COMPLETE },
|
|
12351
|
+
origin
|
|
12352
|
+
);
|
|
12280
12353
|
sessionStorage.removeItem("shouldNotifyReload");
|
|
12281
12354
|
sessionStorage.removeItem("replyOrigin");
|
|
12282
12355
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -12181,6 +12181,10 @@ var EditorMessageType;
|
|
|
12181
12181
|
(function(EditorMessageType2) {
|
|
12182
12182
|
EditorMessageType2["RELOAD"] = "reload";
|
|
12183
12183
|
EditorMessageType2["RELOAD_COMPLETE"] = "reload-complete";
|
|
12184
|
+
EditorMessageType2["ENABLE_EDITION_MODE"] = "enable-edition-mode";
|
|
12185
|
+
EditorMessageType2["DESELECT_ALL_SECTIONS"] = "deselect-all-sections";
|
|
12186
|
+
EditorMessageType2["SELECT_PREVIEW_SECTION"] = "select-preview-section";
|
|
12187
|
+
EditorMessageType2["SELECT_SIDEBAR_SECTION"] = "select-sidebar-section";
|
|
12184
12188
|
})(EditorMessageType || (EditorMessageType = {}));
|
|
12185
12189
|
var MenuItemTargetType;
|
|
12186
12190
|
(function(MenuItemTargetType2) {
|
|
@@ -12249,18 +12253,87 @@ const RootContainer = ({
|
|
|
12249
12253
|
}, 1e3);
|
|
12250
12254
|
return () => clearTimeout(timeout);
|
|
12251
12255
|
}, [page, sections]);
|
|
12256
|
+
const sectionsStateRef = useRef({});
|
|
12257
|
+
const sectionsRef = useRef(sections);
|
|
12252
12258
|
useEffect(() => {
|
|
12259
|
+
const deselectAllSections = () => {
|
|
12260
|
+
Object.keys(sectionsStateRef.current).forEach((key) => {
|
|
12261
|
+
sectionsStateRef.current[key].isActive = false;
|
|
12262
|
+
const element = document.getElementById(key);
|
|
12263
|
+
if (element) {
|
|
12264
|
+
element.style.border = "none";
|
|
12265
|
+
element.style.boxShadow = "none";
|
|
12266
|
+
}
|
|
12267
|
+
});
|
|
12268
|
+
};
|
|
12253
12269
|
const handleMessage = (event) => {
|
|
12254
12270
|
if (event.data?.type === EditorMessageType.RELOAD) {
|
|
12255
12271
|
sessionStorage.setItem("shouldNotifyReload", "1");
|
|
12256
12272
|
sessionStorage.setItem("replyOrigin", event.origin);
|
|
12257
12273
|
window.location.reload();
|
|
12274
|
+
} else if (event.data?.type === EditorMessageType.ENABLE_EDITION_MODE) {
|
|
12275
|
+
const primaryColor = event.data?.primaryColor ?? "blue";
|
|
12276
|
+
sessionStorage.setItem("replyOrigin", event.origin);
|
|
12277
|
+
sessionStorage.setItem("primaryColor", primaryColor);
|
|
12278
|
+
sectionsRef.current?.forEach((section) => {
|
|
12279
|
+
if (section.slug && section.pivot?.linkId) {
|
|
12280
|
+
const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
|
|
12281
|
+
const sectionElement = document.getElementById(sectionElementId);
|
|
12282
|
+
if (sectionElement) {
|
|
12283
|
+
sectionsStateRef.current[sectionElementId] = {
|
|
12284
|
+
element: sectionElement,
|
|
12285
|
+
clickCount: 0,
|
|
12286
|
+
isActive: false
|
|
12287
|
+
};
|
|
12288
|
+
const handleClick = function() {
|
|
12289
|
+
deselectAllSections();
|
|
12290
|
+
sectionsStateRef.current[this.id].clickCount++;
|
|
12291
|
+
sectionsStateRef.current[this.id].isActive = true;
|
|
12292
|
+
this.style.border = `5px solid ${primaryColor}`;
|
|
12293
|
+
this.style.boxShadow = `0 0 10px ${primaryColor}`;
|
|
12294
|
+
window.parent.postMessage(
|
|
12295
|
+
{
|
|
12296
|
+
type: EditorMessageType.SELECT_PREVIEW_SECTION,
|
|
12297
|
+
slug: section.slug,
|
|
12298
|
+
linkId: section.pivot?.linkId
|
|
12299
|
+
},
|
|
12300
|
+
event.origin
|
|
12301
|
+
);
|
|
12302
|
+
};
|
|
12303
|
+
sectionElement.addEventListener("click", handleClick);
|
|
12304
|
+
sectionElement.style.cursor = "pointer";
|
|
12305
|
+
sectionElement.style.transition = "all 0.3s ease";
|
|
12306
|
+
}
|
|
12307
|
+
}
|
|
12308
|
+
});
|
|
12309
|
+
} else if (event.data?.type === EditorMessageType.DESELECT_ALL_SECTIONS) {
|
|
12310
|
+
deselectAllSections();
|
|
12311
|
+
} else if (event.data?.type === EditorMessageType.SELECT_SIDEBAR_SECTION) {
|
|
12312
|
+
setTimeout(() => {
|
|
12313
|
+
if (sectionsRef.current?.find(
|
|
12314
|
+
(section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
|
|
12315
|
+
)) {
|
|
12316
|
+
slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
|
|
12317
|
+
}
|
|
12318
|
+
}, 1e3);
|
|
12319
|
+
const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
|
|
12320
|
+
const element = document.getElementById(elementId);
|
|
12321
|
+
if (element) {
|
|
12322
|
+
deselectAllSections();
|
|
12323
|
+
sectionsStateRef.current[elementId].clickCount++;
|
|
12324
|
+
sectionsStateRef.current[elementId].isActive = true;
|
|
12325
|
+
element.style.border = `5px solid ${sessionStorage.getItem("primaryColor")}`;
|
|
12326
|
+
element.style.boxShadow = `0 0 10px ${sessionStorage.getItem("primaryColor")}`;
|
|
12327
|
+
}
|
|
12258
12328
|
}
|
|
12259
12329
|
};
|
|
12260
12330
|
window.addEventListener("message", handleMessage);
|
|
12261
12331
|
if (sessionStorage.getItem("shouldNotifyReload") === "1") {
|
|
12262
12332
|
const origin = sessionStorage.getItem("replyOrigin") || "*";
|
|
12263
|
-
window.parent.postMessage(
|
|
12333
|
+
window.parent.postMessage(
|
|
12334
|
+
{ type: EditorMessageType.RELOAD_COMPLETE },
|
|
12335
|
+
origin
|
|
12336
|
+
);
|
|
12264
12337
|
sessionStorage.removeItem("shouldNotifyReload");
|
|
12265
12338
|
sessionStorage.removeItem("replyOrigin");
|
|
12266
12339
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@creopse/react",
|
|
3
3
|
"description": "Creopse React Toolkit",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.8",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Noé Gnanih <noegnanih@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-dom": "^19.1.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@creopse/utils": "^0.0.
|
|
39
|
+
"@creopse/utils": "^0.0.10",
|
|
40
40
|
"framer-motion": "^12.23.9"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|